/* ================================================================
   base.css — Reset, Typography & Utility Helpers
   ----------------------------------------------------------------
   PURPOSE : Normalize browser differences, set typographic scale,
             provide reusable utility classes, and handle RTL/LTR.
   DEPENDS : variables.css must be loaded first.
   ================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* A flex/grid item's default min-width:auto refuses to shrink below its content,
   which is how one long SKU or e-mail address widens a whole page on a phone.
   Scoped to the shell's own containers so no component layout is disturbed. */
#app-shell, #main-area, #content, .topbar-left, .topbar-title-group { min-width:0; }
/* Landing-style ambient background: two soft accent glows over the base colour.
   Built from var(--accent) so it follows the primary/brand colour automatically;
   fixed to the viewport and subtle enough to keep cards + text fully legible. */
body { font-family:var(--font); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(58% 48% at 82% 4%,  color-mix(in srgb, var(--accent, #C7312E) 8%, transparent), transparent 60%),
    radial-gradient(48% 42% at 2% 100%, color-mix(in srgb, var(--accent, #C7312E) 5%, transparent), transparent 58%),
    var(--bg, #F6F7F9);
  background-attachment:fixed; }
a    { color:inherit; text-decoration:none; }
img  { max-width:100%; display:block; }
button, input, select, textarea { font-family:inherit; }
/* Autofill repaints a field in the browser's own light palette, and it beats
   a plain background declaration. The ERP renders sign-in, CRM, HR and settings fields that a password
   manager fills, and in dark mode the pale fill is unreadable. --card and
   --text are redefined by dark.css, so this follows the theme by itself.
   The inset shadow is the only thing that overrides it in WebKit; the long
   transition stops the pale flash before it lands. */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill,
input:-webkit-autofill:hover,
select:-webkit-autofill:hover,
textarea:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill:active,
textarea:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--card) inset;
  box-shadow:0 0 0 1000px var(--card) inset;
  caret-color:var(--text);
  transition:background-color 100000s ease-in-out 0s;
}
/* The standard selector, kept in its OWN block: a browser that does not know
   :autofill drops the whole rule it appears in, which would take the
   -webkit- fallback above down with it. */
input:autofill,
select:autofill,
textarea:autofill{
  box-shadow:0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
}

/* Native <select> dropdown popups paint option text in the select's own colour on the
   browser's popup surface. Without a declared colour-scheme that surface is white, so a
   dark theme's light option text becomes unreadable ("ghosted"). Declare the scheme and
   theme the option rows so the popup matches the app — readable in light AND dark. */
select { color-scheme: light; }
select option, select optgroup { background-color: var(--card); color: var(--text); }

/* ── RTL Support (Arabic) ───────────────────────────────────── */
/* Applied dynamically by i18n.js when language is set to 'ar'  */
[dir="rtl"] body                 { font-family: var(--font-ar); }
[dir="rtl"] .nav-badge           { margin-left:unset; margin-right:auto; }
[dir="rtl"] .topbar-right        { margin-left:unset; margin-right:auto; }
[dir="rtl"] .kpi-icon            { right:unset; left:16px; }
[dir="rtl"] .section-header      { flex-direction:row-reverse; }
[dir="rtl"] .stat-row            { flex-direction:row-reverse; }
[dir="rtl"] .table-header        { flex-direction:row-reverse; }
[dir="rtl"] .modal-foot          { flex-direction:row-reverse; }
[dir="rtl"] .sidebar-brand       { text-align:right; }
[dir="rtl"] .brand-logo          { flex-direction:row-reverse; }
[dir="rtl"] .user-card           { flex-direction:row-reverse; }
[dir="rtl"] #toast               { right:unset; left:28px; }
[dir="rtl"] .inv-filter-bar      { flex-direction:row-reverse; }
[dir="rtl"] .profile-row         { flex-direction:row-reverse; }
[dir="rtl"] th, [dir="rtl"] td   { text-align:right; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--brand-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--brand-400); }

/* ── Typography ─────────────────────────────────────────────── */
/* Fluid scale from css/mobile.css. Every token below resolves to the SAME px
   value this file used to hard-code once the viewport is >= 1024px (h1 26 /
   h2 20 / h3 15 / h4 13 / p 13), so desktop is untouched; on a 320px phone
   the headings shrink and the 13px body text grows to 14px. The px fallback
   after each comma keeps this file usable on its own. */
h1 { font-size:var(--fs-h1,26px); font-weight:800; letter-spacing:-.5px; }
h2 { font-size:var(--fs-h2,20px); font-weight:700; letter-spacing:-.3px; }
h3 { font-size:var(--fs-h3,15px); font-weight:700; }
h4 { font-size:var(--fs-body,13px); font-weight:700; }
p  { font-size:var(--fs-body,13px); color:var(--text-sub); }

/* ── Utility: Text ──────────────────────────────────────────── */
.fw-800   { font-weight:800; } .fw-700  { font-weight:700; } .fw-600 { font-weight:600; }
.text-green  { color:var(--green); }   .text-red   { color:var(--red); }
.text-blue   { color:var(--blue-600); } .text-amber { color:var(--amber); }
.text-purple { color:var(--purple); }  .text-muted { color:var(--text-muted); }
.text-sub    { color:var(--text-sub); }
.text-center { text-align:center; } .text-right { text-align:right; }

/* ── Utility: Display / Flex ────────────────────────────────── */
.hidden         { display:none !important; }
.flex           { display:flex; }
.flex-col       { display:flex; flex-direction:column; }
.items-center   { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8  { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; }
.scrollable-x   { overflow-x:auto; }

/* ── Utility: Spacing ───────────────────────────────────────── */
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mb-8{margin-bottom:8px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}

/* ── Divider ────────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:14px 0; }

/* ── Empty State ────────────────────────────────────────────── */
.empty-state { text-align:center; padding:48px var(--sp-card,24px); color:var(--text-muted); }
.empty-state .empty-icon { font-size:40px; margin-bottom:12px; }

/* ── Toast ──────────────────────────────────────────────────── */
#toast {
  display:none; position:fixed; top:74px; right:28px;
  background:var(--brand-900); color:#FFF;
  padding:13px 20px; border-radius:var(--r); font-size:13px; font-weight:600;
  z-index:9999; box-shadow:var(--sh-lg); max-width:360px;
  align-items:center; gap:10px;
}
#toast.show { display:flex; animation:toastIn .2s ease; }
#toast .toast-row { display:inline-flex; align-items:center; gap:9px; }
#toast .toast-row > svg { flex-shrink:0; }
@keyframes toastIn { from{transform:translateY(-10px);opacity:0} to{transform:translateY(0);opacity:1} }