/* ==========================================================================
   Majelani App Shell — distinct Dark / Light / High-Contrast
   NOTE: Header keeps dark gradient across themes (per user request).
   ========================================================================== */

/* ----- Reset & motion ----- */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light dark}
body{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------------------------
   THEME TOKENS
   We scope tokens to [data-theme="*"] so differences are clearly visible.
   -------------------------------------------------------------------------- */

/* ===== Dark (default) ===== */
:root,
:root[data-theme="dark"]{
  --bg: #0d1726;        /* page background */
  --bg-2:#101f33;       /* secondary bg */
  --surface:#112339;    /* cards/surfaces */
  --text:#e7f0ff;       /* main text */
  --muted:#9db4cc;      /* subdued text */
  --border:rgba(255,255,255,.10);
  --shadow:0 12px 32px rgba(0,0,0,.35);

  --field-bg:#1b2a3c;
  --field-bd:#3c4b5e;
  --placeholder:#aab6c4;

  --primary:#4ea3ff;
  --primary-600:#2b7ef0;
  --ring:rgba(78,163,255,.35);

  --ok:#42d28c;
  --warn:#ffce56;
  --danger:#ff5f7a;

  --radius:12px; --radius-lg:16px;
  --header-h:64px; --sidebar-w:320px; --footer-h:52px;
}

/* ===== Light (clearly different from dark) ===== */
:root[data-theme="light"]{
  /* light page + cards */
  --bg:#f5f7fb;         /* near-white page background */
  --bg-2:#eef2f9;       /* subtle paper tint */
  --surface:#ffffff;    /* white cards/surfaces */
  --text:#0f172a;       /* dark text */
  --muted:#5d738a;      /* medium text */
  --border:rgba(15,23,42,.14);
  --shadow:0 8px 22px rgba(15,23,42,.10);

  --field-bg:#ffffff;
  --field-bd:#c7d2e4;
  --placeholder:#73829a;

  --primary:#1e66ff;
  --primary-600:#144ad4;
  --ring:rgba(30,102,255,.25);

  --ok:#16a34a;
  --warn:#eab308;
  --danger:#ef4444;
}

/* ===== High‑Contrast ===== */
:root[data-theme="hc"]{
  --bg:#000; --bg-2:#000; --surface:#000;
  --text:#fff; --muted:#e6e6e6;
  --border:#fff; --shadow:none;

  --field-bg:#000; --field-bd:#fff; --placeholder:#d0d0d0;

  --primary:#00ff90; --primary-600:#00d67a; --ring:rgba(0,255,144,.6);
  --ok:#00ffa8; --warn:#ff0; --danger:#ff4d6a;
}

/* --------------------------------------------------------------------------
   PAINT
   Header uses a fixed dark gradient (unchanged across themes).
   Page background differs per theme (overrides below).
   -------------------------------------------------------------------------- */

/* Header layout */
.app-header{
  position:sticky;top:0;z-index:10;
  height:var(--header-h);
  display:flex;justify-content:space-between;align-items:center;
  padding:0 16px;
  background:linear-gradient(180deg,rgba(17,35,57,.9),rgba(17,35,57,.7));
  backdrop-filter:blur(6px) saturate(120%);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* Left (logo + hamburger) */
.header-left{
  display:flex;align-items:center;gap:12px;
}

/* Right (links + quick buttons) */
.header-right{
  display:flex;align-items:center;gap:20px;
}
.header-nav{
  display:flex;gap:16px;
}
.header-quick{
  display:flex;gap:10px;
}

/* Body background (dark default with dark gradients) */
body{
  background:
    radial-gradient(1200px 600px at 30% -10%, #123, transparent),
    radial-gradient(1200px 600px at 80% -20%, #0a2748, transparent),
    var(--bg);
  color:var(--text);
}

/* Light should be flat/bright (remove dark radial gradients) */
:root[data-theme="light"] body{
  background: var(--bg);
}

/* High‑Contrast flat black */
:root[data-theme="hc"] body{
  background:#000;
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.app-footer{height:var(--footer-h);border:1px solid var(--border)}
.app-layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:calc(100vh - var(--header-h) - var(--footer-h));
  transition:grid-template-columns .22s ease; /* + نرم شدن تغییر عرض Main */
}
/* دسکتاپ: در حالت collapse ستون اول صفر شود */
body.sidebar-closed .app-layout{ grid-template-columns:0 1fr }
@media (max-width:1024px){
  .app-layout{grid-template-columns:0 1fr}
}

.app-main{padding:24px;overflow:hidden auto}
.page-head{margin:4px 0 18px}
.page-title{margin:0 0 4px;font-weight:900}
.page-subtitle{margin:0;color:var(--muted)}

/* Footer keeps subtle dark gradient frame but respects tokens */
.app-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg,rgba(17,35,57,.7),rgba(17,35,57,.9));
  color:var(--muted)
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */
.app-sidebar{
  position:sticky;top:var(--header-h);
  height:calc(100vh - var(--header-h));
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  box-shadow:var(--shadow);
  overflow:hidden auto;
  transition:width .22s ease,transform .22s ease;
  scrollbar-gutter:stable;
  border:1px solid var(--border)
}
/* دسکتاپ: عرض عادی سایدبار */
.app-sidebar:not(.open){width:var(--sidebar-w)}
/* اگر دسکتاپ و collapsed باشد: مرز و سایه پنهان تا خطوط اضافه دیده نشود */
@media (min-width:1025px){
  body.sidebar-closed .app-sidebar{
    width:0 !important;
    border-right:none;
    box-shadow:none;
  }
}

/* موبایل: slide-in واقعی و بدون تداخل با دسکتاپ */
@media (max-width:1024px){
  .app-sidebar{
    position:fixed;left:0;top:var(--header-h);
    width:0;border-right:none;
    transform:translateX(-100%);   /* تماماً بیرون از قاب */
  }
  .app-sidebar.open{
    width:min(92vw,var(--sidebar-w));
    transform:translateX(0);
  }
}

.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px}
.sidebar-title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-actions{display:inline-flex;align-items:center;gap:8px}
.sidebar-search{padding:0 14px 10px}
.sidebar-search input{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--field-bd);background:var(--field-bg);color:var(--text)
}
.sidebar-groups{padding:6px 8px 12px}
.sidebar-group{
  border:1px solid var(--border);background:rgba(255,255,255,.02);
  border-radius:12px;margin:8px 4px;overflow:hidden
}
:root[data-theme="light"] .sidebar-group{ background:rgba(15,23,42,.02) } /* very subtle tint for light */

.sidebar-group>summary{
  list-style:none;cursor:pointer;user-select:none;outline:none;
  padding:10px 12px;font-weight:800;display:flex;align-items:center;gap:8px
}
.sidebar-group>summary::-webkit-details-marker{display:none}
.sidebar-group[open]>summary{background:rgba(255,255,255,.04)}
:root[data-theme="light"] .sidebar-group[open]>summary{background:rgba(15,23,42,.06)}

.sidebar-group>summary::before{content:"▸";opacity:.8;transition:transform .18s ease}
.sidebar-group[open]>summary::before{transform:rotate(90deg)}
.sidebar-list{padding:8px 6px 10px}
.sidebar-item a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;margin:2px 0;border-radius:10px;
  text-decoration:none;color:var(--text);border:1px solid transparent
}
.sidebar-item a:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12)
}
:root[data-theme="light"] .sidebar-item a:hover{
  background:rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.12)
}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:4px 8px;border-radius:999px}
.badge .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.badge.ready{background:rgba(46,204,113,.16);color:#1c7f47;border:1px solid rgba(46,204,113,.35)}
:root[data-theme="dark"]  .badge.ready{color:#b9f6c4}
.badge.ready .dot{background:#2ecc71}
.badge.soon {background:rgba(255,206,86,.14);color:#7a5a00;border:1px solid rgba(255,206,86,.35)}
:root[data-theme="dark"] .badge.soon{color:#ffe7a1}
.badge.soon  .dot{background:#ffce56}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */
.icon-btn,.badge-btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer
}
.icon-btn:focus-visible,.badge-btn:focus-visible{outline:0;box-shadow:0 0 0 6px var(--ring)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;font-weight:700
}
.btn.primary{
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(78,163,255,.25)
}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn:hover{filter:brightness(1.02)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 6px var(--ring)}
:root[data-theme="hc"] .btn.ghost:hover{background:#111;color:#fff;border-color:#fff}

input,select,textarea{
  background:var(--field-bg);color:var(--text);
  border:1px solid var(--field-bd);border-radius:12px;padding:12px 14px;outline:none
}
input::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 6px var(--ring)}
:root[data-theme="hc"] input,:root[data-theme="hc"] select,:root[data-theme="hc"] textarea{background:#000;color:#fff;border-color:#fff}
.input-affix{position:relative}
.input-affix .suffix,.input-affix .prefix{position:absolute;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}
.input-affix .suffix{right:12px}.input-affix .prefix{left:12px}
.input-affix input{padding-right:48px}

/* --------------------------------------------------------------------------
   TOOL SHELL
   -------------------------------------------------------------------------- */
.tool-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  box-shadow:var(--shadow)
}
.tool-toolbar{
  position:sticky;top:0;z-index:2;display:flex;gap:10px;align-items:center;justify-content:flex-end;
  padding:12px 14px;
  background:linear-gradient(180deg,rgba(13,23,38,.85),rgba(13,23,38,0));
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(4px) saturate(140%);
  overflow:visible
}
.tool-body{
  max-height:clamp(360px,60vh,720px);
  overflow:auto;padding:16px
}
.tool-body::-webkit-scrollbar{width:10px}
.tool-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:8px}
.tool-foot{padding:10px 16px 16px;color:var(--muted)}

/* --------------------------------------------------------------------------
   DROPDOWNS (<details.dd>)
   -------------------------------------------------------------------------- */
details.dd{position:relative;display:inline-block}
details.dd>summary.dd-btn{
  all:unset;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--text);font-weight:800;white-space:nowrap
}
details.dd>summary.dd-btn::-webkit-details-marker{display:none}
details.dd[open]>summary.dd-btn{background:rgba(255,255,255,.10);border-bottom-left-radius:0;border-bottom-right-radius:0}
details.dd .dd-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:200px;
  background:rgba(20,30,45,.96);backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px 0;
  box-shadow:0 10px 24px rgba(0,0,0,.45);z-index:40
}
:root[data-theme="light"] details.dd .dd-menu{
  background:#fff;border:1px solid rgba(15,23,42,.14)
}
details.dd:not([open]) .dd-menu{display:none}
.dd-item{display:block;padding:9px 14px;text-decoration:none;color:#f5f5f5;font-size:.92rem}
:root[data-theme="light"] .dd-item{color:#0f172a}
.dd-item:hover{background:rgba(255,255,255,.12);color:#fff}
:root[data-theme="light"] .dd-item:hover{background:rgba(15,23,42,.06);color:#0f172a}
.dd-item.disabled{opacity:.55;pointer-events:none}
details.dd[data-disabled="true"]>summary.dd-btn{opacity:.55;pointer-events:none}
:root[data-theme="hc"] details.dd .dd-menu{background:#000;border:2px solid #fff}

/* Compact theme switcher in sidebar/header */
.dd.th-compact > summary.dd-btn[data-compact]{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:10px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis
}
.dd.th-compact > summary.dd-btn .th-ic{width:18px;display:inline-grid;place-items:center}
.dd.th-compact > summary.dd-btn .caret{opacity:.9}
@media (max-width:420px){.dd.th-compact > summary.dd-btn{max-width:140px}}

/* --------------------------------------------------------------------------
   RESULTS & NOTES
   -------------------------------------------------------------------------- */
.results-grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:18px}
@media (max-width:960px){.results-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.results-grid{grid-template-columns:1fr}}
.result-card{background:var(--field-bg);border:1px solid var(--border);border-radius:12px;padding:16px}
.result-title{font-size:.9rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text);margin:0 0 8px}
.result-figure{font-size:1.75rem;font-weight:800;color:#06b6d4}
.result-figure.big{color:var(--ok);font-size:2rem}
.note-inline{
  background:transparent!important;border:0!important;box-shadow:none!important;
  color:var(--muted);font-style:italic;font-size:.9rem;text-align:center;padding-top:8px;
  border-top:1px solid rgba(200,212,227,.18)
}
:root[data-theme="hc"] .result-card{background:#000;border:2px solid #fff}
:root[data-theme="hc"] .result-title{color:#fff}
:root[data-theme="hc"] .result-figure,.hc-strong{color:#00ff90}

/* --------------------------------------------------------------------------
   UTILITIES & DIALOG
   -------------------------------------------------------------------------- */
.hidden{display:none!important}
.center{display:grid;place-items:center}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.toast-host{position:fixed;right:16px;bottom:16px;display:grid;gap:8px;z-index:20}
.toast{opacity:0;transform:translateY(8px);transition:.2s ease;background:rgba(0,0,0,.6);color:#fff;padding:10px 12px;border-radius:10px}
.toast.show{opacity:1;transform:translateY(0)}

.sheet::backdrop{background:rgba(0,0,0,.4)}
.sheet{border:1px solid var(--border);border-radius:16px;padding:0;background:var(--surface)}
.sheet-body{padding:12px;display:grid;gap:10px}
.sheet-input{padding:12px 14px;border-radius:12px;border:1px solid var(--field-bd);background:var(--field-bg);color:var(--text)}
.sheet-list{min-height:160px;border:1px dashed var(--border);border-radius:12px}
.sheet-foot{display:flex;justify-content:flex-end;gap:10px}

/* Accessible validation */
.is-invalid,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color:var(--danger)!important;
  box-shadow:0 0 0 6px rgba(239,68,68,.25)!important;
}
:root[data-theme="hc"] .is-invalid,
:root[data-theme="hc"] input[aria-invalid="true"],
:root[data-theme="hc"] select[aria-invalid="true"],
:root[data-theme="hc"] textarea[aria-invalid="true"]{
  border:2px solid #ff4d6a!important;
  box-shadow:0 0 0 4px rgba(255,77,106,.65)!important;
}
:root[data-theme="hc"] .btn:focus-visible,
:root[data-theme="hc"] input:focus,
:root[data-theme="hc"] select:focus,
:root[data-theme="hc"] textarea:focus{
  box-shadow:0 0 0 6px rgba(0,255,144,.6)!important;
  border-color:#00ff90!important;
}

/* Theme menu item layout (icons + accelerators) */
.dd-item{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px}
.dd-item .th-ic{width:24px;text-align:center}
.dd-item .th-name{font-weight:600}
.dd-item .th-kbd{
  font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:6px;padding:2px 6px;opacity:.85
}
:root[data-theme="light"] .dd-item .th-kbd{
  background:rgba(15,23,42,.06);border-color:rgba(15,23,42,.18);color:#0f172a
}
:root[data-theme="hc"] .dd-item .th-kbd{background:#000;border-color:#fff;color:#fff}

/* ==========================================================================
   Light mode polish (clearer contrast for sidebar, cards, ghost buttons, links)
   Append to the end of shell.css
   ========================================================================== */

/* 1) Header/body separation (keep dark header, but use a lighter bottom border) */
:root[data-theme="light"] .app-header{
  border-bottom: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}

/* 2) Sidebar: slightly tinted paper so items and badges pop */
:root[data-theme="light"] .app-sidebar{
  background: linear-gradient(180deg, #f1f5fb, #e8eef8);
  border-right: 1px solid rgba(15,23,42,.10);
}

/* When a group is open, keep a subtle light strip */
:root[data-theme="light"] .sidebar-group[open] > summary{
  background: rgba(15,23,42,.06);
}

/* 3) Cards/surfaces: keep white but with clearer borders in light mode */
:root[data-theme="light"] .tool-card,
:root[data-theme="light"] .result-card,
:root[data-theme="light"] .sheet{
  border-color: rgba(15,23,42,.14);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

/* 4) Toolbar: use a light fade instead of a dark overlay */
:root[data-theme="light"] .tool-toolbar{
  background: linear-gradient(180deg, rgba(240,244,252,.95), rgba(240,244,252,0));
  border-bottom-color: rgba(15,23,42,.12);
}

/* 5) Inputs: keep white but make borders/placeholder a tad darker for readability */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background: #fff;
  border-color: #c7d2e4;
  color: #0f172a;
}
:root[data-theme="light"] input::placeholder{
  color: #687690;
}

/* 6) Ghost buttons: increase contrast on light */
:root[data-theme="light"] .btn.ghost{
  border-color: rgba(15,23,42,.22);
  background: rgba(15,23,42,.03);
  color: #0f172a;
}
:root[data-theme="light"] .btn.ghost:hover{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.30);
}

/* 7) Links (header + general): shift to darker blue for readability */
:root[data-theme="light"] .header-nav a,
:root[data-theme="light"] a{
  color: #1e66ff;
}
:root[data-theme="light"] .header-nav a:hover,
:root[data-theme="light"] a:hover{
  color: #144ad4;
  text-decoration: underline;
}

/* 8) Sidebar item hover (light): slightly stronger hover fill */
:root[data-theme="light"] .sidebar-item a:hover{
  background: rgba(15,23,42,.08);
  border-color: rgba(15,23,42,.18);
}

/* 9) Badges: make text colors darker in light mode for contrast */
:root[data-theme="light"] .badge.ready{
  color: #1c7f47; /* darker green text */
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.16);
}
:root[data-theme="light"] .badge.soon{
  color: #7a5a00; /* darker amber text */
  border-color: rgba(255,206,86,.35);
  background: rgba(255,206,86,.18);
}

/* 10) Dropdown menus (already light), add a faint shadow/border refinement */
:root[data-theme="light"] details.dd .dd-menu{
  background: #fff;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 12px 26px rgba(15,23,42,.12);
}

/* 11) Results titles & inline notes: darker neutral in light mode */
:root[data-theme="light"] .result-title,
:root[data-theme="light"] .note-inline{
  color: #475569;
}

/* 12) Divider note under tool (keeps consistent) */
:root[data-theme="light"] .tool-foot{
  border-top: 1px solid rgba(15,23,42,.10);
}

/* --- موبایل: slide-in را «فقط» روی موبایل اعمال کن؛ روی دسکتاپ خنثی شود --- */
@media (max-width:1024px){
  .app-sidebar{ transform: translateX(-100%); transition: transform .25s ease }
  .app-sidebar.open{ transform: translateX(0) }
}
@media (min-width:1025px){
  .app-sidebar{ transform:none } /* جلوگیری از اثرگذاری قانون عمومی قبلی در دسکتاپ */
}

/* Header actions tidy */
.header-cta{ display:flex; align-items:center; gap:8px }
.app-header .icon-btn{ height:36px; padding:8px 12px; line-height:1 }

/* FAB: Help/Feedback */
.fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 110;
  width: 48px; height: 48px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.fab:focus-visible{ outline:0; box-shadow:0 0 0 6px var(--ring) }

/* Hide sidebar "Close" on desktop only */
@media (min-width: 1025px){
  #btnCloseSidebar{ display:none }
}

/* Ensure header sits above sidebar border (fix overlap line) */
.app-header{ z-index: 100 }
.app-sidebar{ z-index: 20 }