:root{
    --brand-blue: #0095da;
    --brand-orange:#ff4f00;
    --brand-deep: #295cab;
    --brand-black:#000000;
  
    --bg:#050a14;
    --card:#0b1733;
    --card2:#08132a;
  
    --text:#f2f7ff;
    --muted:#b6c4d7;
  
    --line:rgba(0,149,218,.18);
  
    --bad:#ff6b6b;
    --good:#36d399;
    --warn:var(--brand-orange);
  
    --shadow: 0 14px 40px rgba(0,0,0,.45);
    --radius:18px;
  
    /* نکته مهم: اگر FaNum دارید همین عالیه */
    --font: "IRANSans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  
    --bg-g1: radial-gradient(1200px 800px at 12% 10%, rgba(0,149,218,.22), transparent 58%);
    --bg-g2: radial-gradient(900px 700px at 88% 25%, rgba(41,92,171,.20), transparent 60%);
    --bg-g3: radial-gradient(1000px 700px at 55% 95%, rgba(255,79,0,.12), transparent 62%);
  }
  
  :root[data-theme="light"]{
    --bg:#f6f8fc;
    --card:#ffffff;
    --card2:#ffffff;
  
    --text:#0b1220;
    --muted:#42526b;
  
    --line:rgba(0,149,218,.22);
  
    --shadow: 0 14px 40px rgba(10,20,40,.12);
  
    --bg-g1: radial-gradient(1200px 800px at 12% 10%, rgba(0,149,218,.18), transparent 60%);
    --bg-g2: radial-gradient(900px 700px at 88% 25%, rgba(41,92,171,.14), transparent 62%);
    --bg-g3: radial-gradient(1000px 700px at 55% 95%, rgba(255,79,0,.10), transparent 64%);
  }
  
  *{box-sizing:border-box}
  
  /* ===== IRANSans FaNum (Local) =====
     اگر فایل‌های شما اسم دیگری دارند، همینجا اصلاح کن.
  */
  @font-face{
    font-family: "IRANSans";
    src: url("fonts/IRANSansWebFaNum.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face{
    font-family: "IRANSans";
    src: url("fonts/IRANSansWebFaNum_Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face{
    font-family: "IRANSans";
    src: url("fonts/IRANSansWebFaNum_Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  
  body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background:
      var(--bg-g1),
      var(--bg-g2),
      var(--bg-g3),
      var(--bg);
    transition: background-color .25s ease, color .25s ease;
  
    /* فقط ظاهرسازی است، تبدیل رقم را JS قطعی می‌کند */
    font-variant-numeric: tabular-nums;
  }
  
  .container{
    width:min(1400px, 94vw);
    margin:24px auto 48px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  
  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    background: linear-gradient(135deg,
      rgba(41,92,171,.96) 0%,
      rgba(0,149,218,.42) 55%,
      rgba(8,19,42,.92) 100%
    );
    border:1px solid rgba(0,149,218,.22);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  
  :root[data-theme="light"] header{
    background: linear-gradient(135deg,
      rgba(41,92,171,.18) 0%,
      rgba(0,149,218,.16) 50%,
      rgba(255,255,255,.92) 100%
    );
    border-color: rgba(0,149,218,.22);
  }
  
  header::after{
    content:"";
    position:absolute;
    inset:-60px -80px auto auto;
    width:240px;
    height:240px;
    background:radial-gradient(circle at 30% 30%, rgba(255,79,0,.10), transparent 65%);
    filter:blur(6px);
    opacity:.55;
    pointer-events:none;
  }
  :root[data-theme="light"] header::after{ opacity:.35; }
  
  .title{ display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; }
  .title h1{ margin:0; font-size:18px; letter-spacing:.2px; font-weight:900; }
  
  .right-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px;
    min-width:280px;
    position:relative;
    z-index:1;
    align-items:center;
  }
  
  .brand{ display:flex; align-items:center; gap:10px; }
  
  .logo{
    width:44px;height:44px;object-fit:contain;border-radius:12px;
    background: rgba(8,19,42,.35);
    border:1px solid rgba(255,255,255,.12);
    padding:6px;
    transition: background-color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .logo{
    background: rgba(255,255,255,.75);
    border-color: rgba(0,149,218,.18);
  }
  
  .pill{
    display:flex;align-items:center;gap:8px;
    padding:9px 10px;border-radius:999px;
    border:1px solid rgba(0,149,218,.20);
    background:rgba(8,19,42,.55);
    color:rgba(242,247,255,.78);
    font-size:12px;white-space:nowrap;
    backdrop-filter: blur(8px);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .pill{
    background: rgba(255,255,255,.70);
    color: rgba(11,18,32,.75);
    border-color: rgba(0,149,218,.22);
  }
  
  .dot{width:8px;height:8px;border-radius:999px;background:var(--warn)}
  .dot.ok{background:var(--good)}
  .dot.bad{background:var(--bad)}
  
  .grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:14px;
  }
  
  .card{
    background: linear-gradient(180deg, rgba(11,23,51,.92), rgba(5,10,20,.72));
    border:1px solid rgba(0,149,218,.16);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:14px;
    position:relative;
    overflow:hidden;
    transition: transform .12s ease, filter .18s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .card:hover{ transform: translateY(-2px); filter: brightness(1.03); }
  :root[data-theme="light"] .card{
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
    border-color: rgba(0,149,218,.16);
    box-shadow: var(--shadow);
  }
  
  .card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(900px 220px at 20% 0%, rgba(0,149,218,.08), transparent 55%);
    pointer-events:none;
    transition: opacity .25s ease;
  }
  :root[data-theme="light"] .card::before{ opacity:.75; }
  
  .card.filters{
    overflow: visible;
    z-index: 50;
    grid-column: span 12;
    display:flex;
    flex-wrap:wrap;
    gap:12px 12px;
    align-items:flex-end;
    position:relative;
  }
  
  .kpi{
    grid-column: span 3;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:92px;
    position:relative;
    z-index:1;
  }
  .kpi .label{
    color:rgba(182,196,215,.92);
    font-size:12px;
    display:flex;
    align-items:center;
    gap:8px;
    transition: color .25s ease;
  }
  :root[data-theme="light"] .kpi .label{ color: rgba(66,82,107,.90); }
  
  .kpi .value{
    font-size:28px;
    font-weight:900; /* به جای 950 */
    letter-spacing:.3px;
    color:var(--text);
    text-shadow: 0 10px 30px rgba(0,0,0,.25);
    transition: color .25s ease, text-shadow .25s ease;
  }
  :root[data-theme="light"] .kpi .value{ text-shadow: 0 10px 30px rgba(10,20,40,.10); }
  
  .kpi .hint{
    color:rgba(182,196,215,.88);
    font-size:12px;
    display:flex;
    gap:8px;
    align-items:center;
    transition: color .25s ease;
  }
  :root[data-theme="light"] .kpi .hint{ color: rgba(66,82,107,.80); }
  
  .badge{
    padding:3px 9px;
    border-radius:999px;
    border:1px solid rgba(0,149,218,.22);
    background:rgba(0,149,218,.14);
    color:rgba(242,247,255,.92);
    font-size:11px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .badge{
    background: rgba(0,149,218,.10);
    color: rgba(11,18,32,.88);
  }
  
  /* همه KPI های کلی نارنجی/سرمه ای */
  .kpi.kpi-global{
    background: linear-gradient(180deg, rgba(255,79,0,.18), rgba(11,23,51,.88));
    border: 1px solid rgba(255,79,0,.35);
  }
  .kpi.kpi-global::before{
    background: radial-gradient(900px 220px at 20% 0%, rgba(255,79,0,.14), transparent 55%);
  }
  .kpi.kpi-global .label{ color: rgba(255,255,255,.88); }
  .kpi.kpi-global .hint{ color: rgba(255,255,255,.72); }
  .kpi.kpi-global .value{ color:#fff; }
  
  :root[data-theme="light"] .kpi.kpi-global{
    background: linear-gradient(180deg, rgba(255,79,0,.12), rgba(255,255,255,.92));
    border-color: rgba(255,79,0,.28);
  }
  :root[data-theme="light"] .kpi.kpi-global .label{ color: rgba(11,18,32,.82); }
  :root[data-theme="light"] .kpi.kpi-global .hint{ color: rgba(11,18,32,.62); }
  :root[data-theme="light"] .kpi.kpi-global .value{ color: rgba(11,18,32,.95); }
  
  .field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:180px;
    flex: 0 1 180px;
    position:relative;
  }
  .field.wide{ min-width:400px; flex: 1 1 420px; }
  
  .field.path-field{ z-index: 200; }
  .field.path-field{
    flex: 0 0 420px;
    width: 420px;
    max-width: 420px;
  }
  
  .flabel{
    font-size:11px;
    color:rgba(182,196,215,.92);
    padding-right:2px;
    user-select:none;
    line-height:1.2;
    transition: color .25s ease;
  }
  :root[data-theme="light"] .flabel{ color: rgba(66,82,107,.88); }
  
  .input, select{
    background:rgba(8,19,42,.70);
    border:1px solid rgba(0,149,218,.18);
    color:var(--text);
    padding:10px 10px;
    border-radius:14px;
    font-size:13px;
    outline:none;
    min-width:180px;
    transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .25s ease, color .25s ease;
    font-family: var(--font);
  }
  :root[data-theme="light"] .input,
  :root[data-theme="light"] select{
    background: rgba(255,255,255,.85);
    color: rgba(11,18,32,.92);
    border-color: rgba(0,149,218,.18);
  }
  
  .input::placeholder{color:rgba(182,196,215,.70)}
  :root[data-theme="light"] .input::placeholder{ color: rgba(66,82,107,.55); }
  
  .input:focus, select:focus{
    border-color: rgba(0,149,218,.55);
    box-shadow:
      0 0 0 4px rgba(0,149,218,.14),
      0 0 0 7px rgba(255,79,0,.08);
  }
  select{cursor:pointer}
  .input:disabled, select:disabled{ opacity:.55; cursor:not-allowed; }
  
  #pathDropdownButton{
    background:rgba(8,19,42,.70);
    border:1px solid rgba(0,149,218,.18);
    color:var(--text);
    padding:12px 14px 12px 22px;
    border-radius:14px;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    transition:all .18s ease, background-color .25s ease, color .25s ease;
    font-family: var(--font);
    width:100%;
    min-width: 420px;
  }
  :root[data-theme="light"] #pathDropdownButton{
    background: rgba(255,255,255,.85);
    color: rgba(11,18,32,.92);
  }
  #pathDropdownButton:hover{ border-color:rgba(0,149,218,.55); }
  #pathDropdownButton svg{ width:18px; height:18px; opacity:.9; }
  #pathDropdownButton[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
  
  #pathDropdown{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    left:auto;
    width: 420px;
    max-width: min(92vw, 520px);
    background:rgba(11,23,51,.98);
    border:1px solid rgba(0,149,218,.22);
    border-radius:18px;
    box-shadow:var(--shadow);
    z-index:9999;
    overflow:hidden;
    display:none;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  :root[data-theme="light"] #pathDropdown{
    background: rgba(255,255,255,.96);
    border-color: rgba(0,149,218,.18);
  }
  #pathDropdown.open{ display:block; }
  
  .path-search-wrap{
    padding:12px 12px;
    border-bottom:1px solid rgba(0,149,218,.16);
    position:relative;
    transition: border-color .25s ease;
  }
  
  #pathSearchInput{
    width:100%;
    background:rgba(8,19,42,.8);
    border:1px solid rgba(0,149,218,.3);
    color:var(--text);
    padding:10px 38px 10px 12px;
    border-radius:14px;
    font-size:13px;
    font-family: var(--font);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] #pathSearchInput{
    background: rgba(255,255,255,.92);
    color: rgba(11,18,32,.92);
    border-color: rgba(0,149,218,.22);
  }
  
  .path-list-wrap{
    max-height:280px;
    overflow:auto;
    padding:8px;
    background: rgba(8,19,42,.25);
    border-radius: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,149,218,.85) rgba(8,19,42,.65);
    transition: background-color .25s ease;
  }
  :root[data-theme="light"] .path-list-wrap{
    background: rgba(0,149,218,.04);
    scrollbar-color: rgba(0,149,218,.75) rgba(255,255,255,.85);
  }
  
  .path-checkbox-item{
    display:flex;
    align-items:center;
    padding:10px 10px;
    border-radius:12px;
    cursor:pointer;
    transition:all .18s ease, background-color .25s ease;
    gap:10px;
  }
  .path-checkbox-item:hover{ background:rgba(0,149,218,.15); }
  :root[data-theme="light"] .path-checkbox-item:hover{ background: rgba(0,149,218,.10); }
  
  .path-checkbox-item input[type="checkbox"]{
    width:18px;height:18px;accent-color:#0095da;cursor:pointer;margin:0;
  }
  .path-checkbox-item label{ cursor:pointer; font-size:13px; flex:1; user-select:none; }
  .path-checkbox-item.hidden{ display:none; }
  
  #pathFooter{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-top:1px solid rgba(0,149,218,.16);
    font-size:12px;
    color:rgba(182,196,215,.9);
    gap:12px;
    transition: color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] #pathFooter{ color: rgba(66,82,107,.85); }
  
  #pathClearAll{
    color:rgba(255,107,107,.9);
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
  }
  
  .btn{
    cursor:pointer;
    user-select:none;
    border:1px solid rgba(0,149,218,.25);
    background:linear-gradient(90deg, rgba(0,149,218,.92), rgba(41,92,171,.88));
    color:#ffffff;
    padding:10px 12px;
    border-radius:14px;
    font-size:13px;
    font-weight:800;
    transition: transform .06s ease, filter .18s ease, box-shadow .18s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
    font-family: var(--font);
  }
  .btn:hover{filter:brightness(1.05)}
  .btn:active{transform:translateY(1px)}
  .btn.secondary{
    background:rgba(8,19,42,.55);
    border:1px solid rgba(255,255,255,.10);
    color:rgba(242,247,255,.92);
    box-shadow:none;
  }
  :root[data-theme="light"] .btn.secondary{
    background: rgba(255,255,255,.70);
    border-color: rgba(0,149,218,.18);
    color: rgba(11,18,32,.85);
  }
  
  .chart{
    grid-column: span 6;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:300px;
    position:relative;
    z-index:1;
  }
  .chart h3{
    margin:0;
    font-size:14px;
    color:rgba(242,247,255,.96);
    letter-spacing:.2px;
    font-weight:900;
    transition: color .25s ease;
  }
  :root[data-theme="light"] .chart h3{ color: rgba(11,18,32,.92); }
  
  .chart-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap:12px;
    align-items:center;
    min-height:260px;
  }
  .chart-canvas{
    height:240px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    border-radius:14px;
    border:1px solid rgba(0,149,218,.16);
    background: rgba(8,19,42,.22);
    transition: background-color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .chart-canvas{
    background: rgba(0,149,218,.04);
    border-color: rgba(0,149,218,.16);
  }
  .chart-canvas canvas{ width:100% !important; height:100% !important; }
  
  .chart-summary{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
    .summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(8,19,42,.35);
    transition: background-color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .summary-row{
    background: rgba(255,255,255,.88);
    border-color: rgba(0,149,218,.14);
  }
  .summary-row .name{
    color:rgba(182,196,215,.92);
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width: 70%;
    transition: color .25s ease;
  }
  :root[data-theme="light"] .summary-row .name{ color: rgba(66,82,107,.90); }
  .summary-row .val{
    direction:ltr;
    text-align:left;
    color:rgba(242,247,255,.95);
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    transition: color .25s ease;
  }
  :root[data-theme="light"] .summary-row .val{ color: rgba(11,18,32,.92); }
  .summary-row .pct{
    direction:ltr;
    text-align:left;
    color:rgba(182,196,215,.92);
    font-size:12px;
    white-space:nowrap;
    transition: color .25s ease;
  }
  :root[data-theme="light"] .summary-row .pct{ color: rgba(66,82,107,.78); }
  
  .table-wrap{ grid-column: span 12; padding:0; overflow:hidden; }
  .table-top{
    padding:12px 14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    border-bottom:1px solid rgba(0,149,218,.16);
    background: linear-gradient(90deg, rgba(41,92,171,.20), rgba(8,19,42,.38));
    transition: background-color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .table-top{
    background: linear-gradient(90deg, rgba(41,92,171,.08), rgba(0,149,218,.06));
  }
  .table-top .meta{ color:rgba(182,196,215,.92); font-size:12px; transition: color .25s ease; }
  :root[data-theme="light"] .table-top .meta{ color: rgba(66,82,107,.88); }
  
  .pager{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  
  table{
    width: max-content;
    min-width: 100%;
    border-collapse:collapse;
    border-spacing:0;
    font-size:12.5px;
    font-family: var(--font);
  }
  
  thead th{
    position:sticky;
    top:0;
    z-index:2;
    background: linear-gradient(90deg, rgba(41,92,171,.35), rgba(0,149,218,.18));
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(0,149,218,.18);
    padding:10px 10px;
    text-align:right;
    color:rgba(242,247,255,.82);
    font-weight:900;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.10);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] thead th{
    background: linear-gradient(90deg, rgba(41,92,171,.10), rgba(0,149,218,.08));
    color: rgba(11,18,32,.78);
    border-color: rgba(0,149,218,.12);
  }
  
  tbody td{
    border:1px solid rgba(255,255,255,.09);
    padding:10px 10px;
    vertical-align:top;
    color:rgba(242,247,255,.95);
    transition: box-shadow .16s ease, filter .16s ease, color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] tbody td{
    border-color: rgba(0,149,218,.10);
    color: rgba(11,18,32,.92);
  }
  tbody tr:hover td{ box-shadow: inset 0 0 0 9999px rgba(0,149,218,.08); }
  
  .muted{color:var(--muted)}
  .link{ color:var(--brand-blue); text-decoration:none; border-bottom:1px dashed rgba(0,149,218,.55); }
  .cell-link{ color: inherit !important; border-bottom-color: currentColor !important; opacity:.92; }
  
  .toast{
    margin-top:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(0,149,218,.18);
    background:rgba(8,19,42,.55);
    color:rgba(182,196,215,.95);
    font-size:12.5px;
    display:none;
    backdrop-filter: blur(8px);
    grid-column: span 12;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .toast{
    background: rgba(255,255,255,.80);
    color: rgba(11,18,32,.85);
    border-color: rgba(0,149,218,.18);
  }
  .toast.show{display:block}
  
  .table-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(0,149,218,.22);
    border-radius: 14px;
    background: rgba(8,19,42,.25);
    transition: background-color .25s ease, border-color .25s ease;
  }
  :root[data-theme="light"] .table-scroll{
    background: rgba(255,255,255,.72);
    border-color: rgba(0,149,218,.16);
  }
  
  /* فقط بعد از انتخاب مدرسه نمایش داده شود */
  .school-only{ display:none; }
  .school-only.show{ display:flex; }
  .school-only.show.table-wrap{ display:block; }
  .school-only.show.chart{ display:flex; }
  .school-only.show.kpi{ display:flex; }
  
  /* Theme Toggle */
  .theme-switch{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(0,149,218,.20);
    background: rgba(8,19,42,.40);
    backdrop-filter: blur(8px);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    user-select:none;
  }
  :root[data-theme="light"] .theme-switch{
    background: rgba(255,255,255,.70);
    border-color: rgba(0,149,218,.22);
  }
  .theme-switch .tlabel{
    font-size:12px;
    color: rgba(242,247,255,.80);
    transition: color .25s ease;
    white-space:nowrap;
  }
  :root[data-theme="light"] .theme-switch .tlabel{ color: rgba(11,18,32,.78); }
  
  .switch{ position:relative; width:46px; height:26px; flex:0 0 auto; }
  .switch input{ opacity:0; width:0;height:0; position:absolute; }
  .slider{
    position:absolute; inset:0; border-radius:999px;
    background: rgba(182,196,215,.20);
    border:1px solid rgba(0,149,218,.18);
    transition: .18s ease;
    box-shadow: inset 0 0 0 9999px rgba(0,0,0,.12);
  }
  :root[data-theme="light"] .slider{
    background: rgba(41,92,171,.08);
    box-shadow: inset 0 0 0 9999px rgba(255,255,255,.12);
  }
  .slider:before{
    content:"";
    position:absolute;
    height:20px;width:20px;
    right:3px; top:50%;
    transform: translateY(-50%);
    border-radius:999px;
    background: linear-gradient(135deg, rgba(0,149,218,.95), rgba(41,92,171,.90));
    box-shadow: 0 8px 18px rgba(0,0,0,.30);
    transition: .18s ease;
  }
  :root[data-theme="light"] .slider:before{ box-shadow: 0 8px 18px rgba(10,20,40,.18); }
  
  .switch input:checked + .slider{
    background: rgba(255,79,0,.14);
    border-color: rgba(255,79,0,.30);
  }
  .switch input:checked + .slider:before{
    transform: translateY(-50%) translateX(-20px);
    background: linear-gradient(135deg, rgba(255,79,0,.95), rgba(0,149,218,.88));
  }
  
  @media (max-width: 980px){
    .kpi{grid-column: span 6;}
    .chart{grid-column: span 12;}
    header{flex-direction:column; align-items:stretch;}
    .right-actions{justify-content:flex-start;}
    .field{min-width: 160px;}
    .field.wide{min-width: 260px;}
    .chart-grid{ grid-template-columns: 1fr; }
    .chart-canvas{ height: 240px; }
    .field.path-field{ min-width: 260px; flex: 1 1 260px; width:auto; max-width:none; }
    #pathDropdownButton{ min-width: 260px; }
    #pathDropdown{ width: 420px; }
  }
  
  #pathDropdownButton{ width: 100%; min-width: 0; }
  #pathDropdown{ width: 420px; }
  
  /* ===== Global Summary row alignment fix (center + equal columns) ===== */
    .chart-summary{
        display:flex;
        flex-direction:column;
        gap:10px;
    }
  
  .summary-row{
    display:grid !important;
    grid-template-columns: 1fr 110px 80px;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(8,19,42,.35);
  }
  
  .summary-row .name{
    display:flex;
    align-items:center;
    gap:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100% !important;
  }
  
  .summary-row .val,
  .summary-row .pct{
    text-align:center !important;
    direction:ltr;
    justify-self:center;
    font-weight:900;
    white-space:nowrap;
  }
  .pill-lines{
    display:flex;
    flex-direction:column;
    line-height:1.2;
    gap:2px;
  }
  
  .pill-sub{
    font-size:11px;
    opacity:.85;
    color:rgba(182,196,215,.95);
  }
  
  :root[data-theme="light"] .pill-sub{
    color: rgba(11,18,32,.70);
  }
  
  /* Global charts: desktop => summary box beside chart, mobile => below (via existing @media) */
.global-charts-row .chart-grid{
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
}

/* summary box height align with chart */
.global-charts-row .chart-canvas{
  height: 440px; /* همون عددی که الان روی div گذاشتی */
}
.global-charts-row .chart-summary{
  max-height: 440px;
  overflow: auto;
  padding-left: 2px;
}
@media (max-width: 980px){
  .chart-grid{ grid-template-columns: 1fr; }
}