/* ==========================================================================
 * Mersal Suite — shared design system (ported verbatim from the Mersal Suite
 * prototype). The shell markup is inline-styled in PHP to stay pixel-faithful;
 * this file only carries the design tokens, base resets, the Material Symbols
 * helper, scrollbars and keyframes that cannot live as inline styles.
 * ========================================================================== */

.mersal-suite-app {
  --bg:#f4f1ea; --surface:#ffffff; --surface-2:#fafaf5; --surface-3:#f1efe8;
  --border:#e7e3d8; --border-strong:#d6d1c0;
  --fg-1:#16241d; --fg-2:#51605a; --fg-3:#8a978f;
  --accent:#0f7a4a; --accent-2:#0c6740; --accent-soft:#dcefe3; --accent-glow:rgba(15,122,74,.16);
  --hi:#ea7c39; --hi-soft:#fde6d6;
  --info:#2f86c9; --info-soft:#dceaf7;
  --violet:#7c5cd6; --violet-soft:#ece6fb;
  --danger:#d8524a; --danger-soft:#fbe2df;
  --warn:#d9962a; --warn-soft:#fbeecd;
  --shadow:0 1px 2px rgba(15,30,22,.05), 0 2px 8px rgba(15,30,22,.05);
  --shadow-lg:0 8px 30px rgba(15,30,22,.10);
}
.mersal-suite-app[data-dark="true"]{
  --bg:#0c1410; --surface:#13201a; --surface-2:#0f1a15; --surface-3:#1a2a22;
  --border:#22362c; --border-strong:#2e4639;
  --fg-1:#e9f1ea; --fg-2:#9db0a6; --fg-3:#6c8077;
  --accent:#22a76a; --accent-2:#16915a; --accent-soft:#103325; --accent-glow:rgba(34,167,106,.22);
  --hi:#f08c4c; --hi-soft:#3a2415;
  --info:#4ea3e0; --info-soft:#13293a;
  --violet:#9d82e6; --violet-soft:#241d3a;
  --danger:#e8665e; --danger-soft:#37201e;
  --warn:#e6a945; --warn-soft:#33270f;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.3);
  --shadow-lg:0 12px 36px rgba(0,0,0,.45);
}

/* Take over the WP admin canvas on our screen. */
body.mersal-suite-screen #wpcontent,
body.mersal-suite-screen #wpbody-content { padding:0 !important; }
/* Pin #wpbody so the admin page itself never scrolls under the app-shell;
 * stretch (with vendor fallbacks) keeps it filling the available width. */
body.mersal-suite-screen #wpbody{
  position:fixed;
  width:-webkit-fill-available;
  width:-moz-available;
  width:stretch;
}
body.mersal-suite-screen #wpfooter { display:none; }
body.mersal-suite-screen #wpbody-content > .notice,
body.mersal-suite-screen #wpbody-content > .updated,
body.mersal-suite-screen #wpbody-content > .error,
body.mersal-suite-screen .update-nag { display:none !important; }
/* #wpcontent margins intentionally NOT overridden — WP core handles the
 * admin-menu offset (incl. folded/auto-fold/mobile) natively. */

.mersal-suite-app *{ box-sizing:border-box; }
/* App-shell height lock: the suite fills the admin viewport below the WP
 * toolbar (position:fixed, 32px) so the sidebar rail and the main content each
 * scroll INDEPENDENTLY — the sidebar's <nav> and <main> are the internal
 * scroll regions — instead of the whole admin page scrolling as one.
 * grid-template-rows:minmax(0,1fr) gives the single row a definite, shrinkable
 * height so height:100% on the aside and flex:1 on <main> can actually scroll. */
.mersal-suite-app{
  position:relative; overflow:hidden;
  height:calc(100vh - 32px);
  background:var(--bg); color:var(--fg-1);
  font-family:"Cairo","Inter",system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  display:grid; grid-template-columns:272px 1fr; grid-template-rows:minmax(0,1fr);
}
/* WordPress shows a taller (46px) toolbar on small screens. */
@media screen and (max-width:782px){
  .mersal-suite-app{ height:calc(100vh - 46px); }
}
.mersal-suite-app[dir="ltr"]{ direction:ltr; }
.mersal-suite-app[dir="rtl"]{ direction:rtl; }

/* Main column (grid item) must be allowed to shrink so <main> can scroll. */
.mersal-suite-app > div{ min-height:0; }
.mersal-suite-app main{
  overflow-y:auto; overflow-x:hidden; min-height:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
}

/* Icon-font glyphs stay invisible until the font is actually here.
   display=block on the request already covers the common case, but a slow or
   blocked CDN would still eventually paint the ligature NAMES — "dashboard",
   "settings" — as words. This holds them back until the font resolves, and the
   timeout in suite.js reveals them regardless so a failed font degrades to the
   old behaviour instead of leaving the chrome iconless for ever. */
.mersal-suite-app .msym{ visibility:hidden; }
.ms-fonts-ready .mersal-suite-app .msym,
.mersal-suite-app .msym > svg{ visibility:visible; }
.mersal-suite-app .msym{
  font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap;
  direction:ltr; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased; user-select:none;
}
.mersal-suite-app .fill{ font-variation-settings:'FILL' 1; }

.mersal-suite-app ::-webkit-scrollbar{ width:10px; height:10px; }
.mersal-suite-app ::-webkit-scrollbar-track{ background:transparent; }
.mersal-suite-app ::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:10px; border:3px solid var(--bg); }
/* Dark sidebar scrollers get dark-tinted thumbs (the light content thumb reads
 * as a broken white strip against the green rail). */
.mersal-suite-app aside ::-webkit-scrollbar{ width:8px; }
.mersal-suite-app aside ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border:2px solid #11201a; }
.mersal-suite-app aside *{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }

@keyframes msFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes msPop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }

.mersal-suite-app input,
.mersal-suite-app button,
.mersal-suite-app select,
.mersal-suite-app textarea{ font-family:inherit; }
.mersal-suite-app input:focus-visible,
.mersal-suite-app textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.mersal-suite-app a{ text-decoration:none; }

/* nav + interactive affordances the prototype expresses through JS hover */
.mersal-suite-app .ms-nav-item:hover{ background:rgba(255,255,255,.06) !important; }
.mersal-suite-app .ms-card-link{ transition:transform .15s ease, box-shadow .15s ease; }
.mersal-suite-app .ms-card-link:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* In-place navigation: top progress bar + a soft dim on the content being
 * replaced. The bar lives on <body> so it survives the shell swap. */
.ms-progress{ position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:100000; pointer-events:none; }
.ms-progress > span{ display:block; height:100%; width:0; background:var(--accent,#0f7a4a); box-shadow:0 0 10px rgba(15,122,74,.5); }
.mersal-suite-app.ms-loading main{ opacity:.5; transition:opacity .15s ease; }
.mersal-suite-app.ms-loading main *{ cursor:progress; }
