:root {
    --bg-color: #f4f4f9;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    --text-color: #1e293b;
    --input-bg: rgba(0, 0, 0, 0.05);
    --btn-primary: #3b82f6;
    --btn-primary-hover: #2563eb;
    --btn-secondary: #64748b;
    --table-header: #3b82f6;
    --table-row-even: rgba(0,0,0,0.03);
    --table-row-hover: rgba(0,0,0,0.08);
    --dot-pattern: radial-gradient(#cbd5e1 1px, transparent 1px);
}

[data-theme="dark"] {
    --bg-color: #0f172a;
    --glass-bg: rgba(15, 23, 42, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.5);
    --text-color: #f8fafc;
    --input-bg: rgba(255, 255, 255, 0.1);
    --btn-primary: #3b82f6;
    --btn-primary-hover: #60a5fa;
    --btn-secondary: #475569;
    --table-header: #1e293b;
    --table-row-even: rgba(255,255,255,0.03);
    --table-row-hover: rgba(255,255,255,0.08);
    --dot-pattern: radial-gradient(#1e293b 1px, transparent 1px);
}

body, html {
    margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    background-image: var(--dot-pattern);
    background-size: 20px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#mynetwork { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; outline: none; }

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 var(--glass-shadow);
    border-radius: 12px; z-index: 10; position: absolute;
    transition: all 0.3s ease;
}

.top-bar {
    top: 20px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; align-items: center; padding: 12px 20px; width: 75%; max-width: 900px;
}
.logo-text { font-weight: bold; font-size: 18px; margin-left: 5px; margin-right: 5px; white-space: nowrap; }
.search-box {
    flex: 1; padding: 10px 15px; border-radius: 8px; border: 1px solid var(--glass-border);
    background: var(--input-bg); color: var(--text-color); font-family: Tahoma; outline: none;
}
.search-box::placeholder { color: #94a3b8; }

button { font-family: Tahoma; font-weight: bold; cursor: pointer; border: none; border-radius: 8px; transition: 0.2s; color: white; }
.btn-primary { background: var(--btn-primary); padding: 10px 15px; }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-secondary { background: var(--btn-secondary); padding: 10px 15px; }
.btn-danger { background: #ef4444; color: white; padding: 8px 15px; }
.btn-icon { background: transparent; border: 1px solid var(--glass-border); color: var(--text-color); padding: 8px 12px; font-size: 16px; }
.btn-icon:hover { background: var(--input-bg); }

/* باکس متنی ثابت (Context) */
.context-box {
    top: 90px;
    width: 260px;
    padding: 20px;
    max-height: 20vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
html[dir="rtl"] .context-box { right: 30px; left: auto; }
html[dir="ltr"] .context-box { left: 30px; right: auto; }

.context-box h4 { margin: 0 0 10px 0; font-size: 13px; text-align: center; color: var(--btn-primary); border-bottom: 1px solid var(--glass-border); padding-bottom: 10px;}
.context-content-wrapper { overflow-y: auto; flex: 1; padding-right: 5px; }
.context-box p { margin: 0; font-size: 12px; line-height: 1.6; text-align: justify; direction: ltr;}

/* استایل زمانی که متنی وجود ندارد */
.context-box p.empty-context { text-align: center; color: var(--btn-secondary); margin-top: 10px; direction: inherit;}
html[dir="ltr"] .context-box p { text-align: left; }
html[dir="ltr"] .context-box p.empty-context { text-align: center; }

/* راهنما */
.legend-card {
    bottom: 30px; padding: 20px; width: 260px; max-height: 55vh;
    display: flex; flex-direction: column; overflow: hidden;
}
html[dir="rtl"] .legend-card { right: 30px; left: auto; }
html[dir="ltr"] .legend-card { left: 30px; right: auto; }

.legend-card h3 { margin: 0 0 10px 0; font-size: 13px; text-align: center; }
.legend-divider { border: 0; border-top: 1px solid var(--glass-border); margin: 15px 0; width: 100%; }
.legend-content { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 5px; }
.legend-item { display: flex; align-items: center; font-size: 11.5px; cursor: pointer; opacity: 1; }
.legend-item.disabled { opacity: 0.25; filter: grayscale(100%); }
.shape { width: 12px; height: 12px; margin-left: 10px; margin-right: 10px; flex-shrink: 0; }
.shape.circle { border-radius: 50%; } .shape.square { border-radius: 2px; }

/* مودال جدول اکسل */
.glass-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 100; display: flex; align-items: center; justify-content: center;
}
.glass-modal-content {
    background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); box-shadow: 0 8px 32px 0 var(--glass-shadow);
    border-radius: 16px; width: 90%; height: 85%; padding: 20px; display: flex; flex-direction: column; position: relative;
}
.close-btn { position: absolute; top: 20px; }
html[dir="rtl"] .close-btn { right: 20px; left: auto; }
html[dir="ltr"] .close-btn { left: 20px; right: auto; }

.table-wrapper { margin-top: 50px; overflow: auto; flex: 1; border-radius: 8px; }
.excel-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text-color); }
.excel-table th, .excel-table td { border: 1px solid var(--glass-border); padding: 12px; text-align: start; }
.excel-table th { background-color: var(--table-header); color: white; position: sticky; top: 0; z-index: 1; }
.excel-table tr:nth-child(even) { background-color: var(--table-row-even); }
.excel-table tr:hover { background-color: var(--table-row-hover); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(150,150,150,0.4); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(150,150,150,0.6); }