/* ==========================================================================
   Mauqe V2 — Base layer
   Reset, document defaults, typography, and layout primitives.
   Depends on tokens.css.
   ========================================================================== */

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 2;
}

body {
  min-height: 100dvh;
  background-color: var(--bg-app);
  /* Fixed, so a themed wash stays put behind a scrolling page and a themed
     grid does not slide under the content like a moving floor. */
  background-image: var(--bg-app-image);
  background-attachment: fixed;
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: var(--lh-base);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* Arabic gets its own family and a touch more line-height for legibility. */
[lang="ar"] body, body[lang="ar"], [dir="rtl"] body {
  font-family: var(--font-arabic);
  line-height: var(--lh-loose);
}

img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* An element hidden by the attribute is hidden, full stop. The user-agent's
   `[hidden] { display: none }` loses to any author rule that sets display, and
   several components do (.field, .row, .board) — so a conditional field the
   form runtime hides would still be on screen. This is the one place in the
   stylesheet that needs !important, because it is overriding a declaration
   whose whole purpose is to be overridden. */
[hidden] { display: none !important; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: var(--s-5);
}

:target { scroll-margin-block-start: calc(var(--topbar-h) + var(--s-4)); }

/* ---- Focus ----------------------------------------------------------
   Visible only for keyboard users, but always visible for inputs since
   pointer users need to see which field is active. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-solid);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- Motion preferences --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---- Selection & scrollbars ----------------------------------------- */
::selection { background: var(--brand-bg-2); color: var(--fg-strong); }

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-disabled); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
h5, h6 { font-size: var(--t-sm); }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { letter-spacing: 0; }

a {
  color: var(--brand-fg);
  text-decoration: none;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration: underline; }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

code:not(pre code) {
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  padding: 0.1em 0.35em;
  color: var(--fg-strong);
}

pre {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  overflow-x: auto;
  line-height: var(--lh-snug);
}

kbd {
  display: inline-flex;
  align-items: center;
  min-width: 1.6em;
  height: 1.6em;
  justify-content: center;
  padding: 0 0.4em;
  font-size: var(--t-2xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-block-end-width: 2px;
  border-radius: var(--r-xs);
}

/* Text utilities ------------------------------------------------------- */
.t-2xs { font-size: var(--t-2xs); }
.t-xs  { font-size: var(--t-xs); }
.t-sm  { font-size: var(--t-sm); }
.t-md  { font-size: var(--t-md); }
.t-lg  { font-size: var(--t-lg); }
.t-xl  { font-size: var(--t-xl); }
.t-2xl { font-size: var(--t-2xl); }
.t-3xl { font-size: var(--t-3xl); }

.fw-normal { font-weight: var(--fw-normal); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semi   { font-weight: var(--fw-semi); }
.fw-bold   { font-weight: var(--fw-bold); }

.fg-strong   { color: var(--fg-strong); }
.fg-default  { color: var(--fg-default); }
.fg-muted    { color: var(--fg-muted); }
.fg-subtle   { color: var(--fg-subtle); }
.fg-brand    { color: var(--brand-fg); }
.fg-ok       { color: var(--ok-fg); }
.fg-warn     { color: var(--warn-fg); }
.fg-bad      { color: var(--bad-fg); }

.mono { font-family: var(--font-mono); }
.nums-tabular { font-variant-numeric: tabular-nums; }
/* Numbers, IDs, money and dates stay LTR even inside Arabic layouts. */
.ltr-nums { direction: ltr; unicode-bidi: isolate; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

.prose-width { max-width: var(--prose-max); }

/* Screen-reader only, but focusable variant for skip links. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus-visible {
  position: fixed;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: var(--z-toast);
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-raised);
  color: var(--fg-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
}

/* ==========================================================================
   Layout primitives
   A tiny, predictable set. Anything more specific belongs to a component.
   ========================================================================== */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; flex-direction: row; align-items: center; }
.row-top { display: flex; flex-direction: row; align-items: flex-start; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }
.shrink-0{ flex: 0 0 auto; }
.spacer  { flex: 1 1 auto; }

.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }

.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-stretch{ align-items: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.grid { display: grid; gap: var(--s-4); }
/* Responsive-by-default grid: cards reflow without media queries. */
.grid-auto  { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.page {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-6);
  padding-block: var(--s-6) var(--s-16);
}
.page--wide { max-width: none; }
.page--narrow { max-width: 760px; }
@media (max-width: 700px) { .page { padding-inline: var(--s-4); padding-block: var(--s-4) var(--s-12); } }

.section { margin-block-end: var(--s-8); }

.divider { height: 1px; background: var(--border); border: 0; }
.divider-v { width: 1px; align-self: stretch; background: var(--border); }

/* Display / visibility ------------------------------------------------- */
.hidden { display: none !important; }
@media (max-width: 900px) { .hide-md { display: none !important; } }
@media (max-width: 620px) { .hide-sm { display: none !important; } }
@media (min-width: 901px) { .only-md { display: none !important; } }
@media (min-width: 621px) { .only-sm { display: none !important; } }

/* Print ---------------------------------------------------------------- */
@media print {
  .no-print, .app-sidebar, .app-topbar, .toast-region { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .panel { box-shadow: none; border: 1px solid #ddd; }
}