/* =====================================================================
   SwadSathi Design System — LAYER 2: BASE
   ---------------------------------------------------------------------
   Reset, document defaults, typography primitives and the small set of
   utilities that earn their keep. Depends on tokens.css.
   ===================================================================== */

/* -------------------------------------------------- PAGE TRANSITIONS ---
   This is a multi-page PHP app: clicking a nav item is a real navigation, and
   the browser's default for that is to blank the window and repaint, which
   reads as "the whole thing reloaded" even when the server answered in 150ms.

   A cross-document view transition keeps the outgoing page on screen and
   cross-fades it into the incoming one, so moving between screens feels
   continuous. Chrome/Edge honour it; browsers without support simply navigate
   as before, so nothing depends on it.

   The shell is excluded on purpose: the sidebar and header are the same on
   every screen, so fading them would draw attention to the one part that
   should look nailed down. Only the content area cross-fades. */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: 160ms; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-timing-function: var(--rr-ease, ease);
}
/* the rail and the header hold still across the navigation */
.rr-sidebar, #rrSidebar, .side, .sidebar { view-transition-name: rr-rail; }
.rr-topbar, .topbar { view-transition-name: rr-topbar; }
::view-transition-group(rr-rail), ::view-transition-group(rr-topbar) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

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

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

body {
  margin: 0;
  background: var(--rr-bg);
  color: var(--rr-text-body);
  font-family: var(--rr-font-sans);
  font-size: var(--rr-text-base);
  line-height: var(--rr-leading-normal);
  font-weight: var(--rr-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";   /* Inter: single-storey a, alt g */
  font-variant-numeric: tabular-nums;      /* money columns always align   */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
/* Owner's typography pass: Rubik for every heading, Poppins for everything
   else. body{} above sets --rr-font-sans for the whole document, so any bare
   <h1>-<h6> that does NOT also carry one of the .rr-h*/.rr-display classes
   below (several PHP screens use plain heading tags with no class at all)
   was silently inheriting Poppins instead of Rubik. This is the one rule
   that makes "every heading, on every screen" true regardless of whether the
   markup remembered to add a class — the .rr-h*/.rr-display rules still win
   where they set their own size/weight, this only backstops font-family. */
h1, h2, h3, h4, h5, h6 { font-family: var(--rr-font-display); }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

img, picture, svg, video, canvas { display: block; max-width: 100%; }
svg { flex: none; }

/* The `hidden` attribute must win. Any component that sets its own display
   (.rr-error-text is display:flex, .rr-badge is inline-flex, …) would other-
   wise override the UA stylesheet's [hidden]{display:none} and stay visible,
   which silently breaks every "hide until needed" element in the product. */
[hidden] { display: none !important; }

/* Same trap for <dialog>: a component class that sets its own display (e.g.
   .rr-modal is display:flex) beats the UA's dialog:not([open]){display:none},
   so a closed dialog would sit visible in the middle of the page. */
dialog:not([open]) { display: none !important; }

button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
textarea { resize: vertical; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

a { color: var(--rr-text-brand); text-decoration: none; }
a:hover { color: var(--rr-primary-700); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--rr-border);
  margin: var(--rr-space-6) 0;
}

/* Focus: never remove it, always the same ring. Mouse users don't see it. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rr-primary-600);
  outline-offset: 2px;
  border-radius: var(--rr-radius-xs);
}

::selection { background: var(--rr-primary-200); color: var(--rr-primary-900); }

/* Scrollbars — thin and neutral, matched to the surface they sit on. */
* { scrollbar-width: thin; scrollbar-color: var(--rr-ink-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rr-ink-300);
  border-radius: var(--rr-radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--rr-ink-400); }

/* -------------------------------------------------------- TYPOGRAPHY ---
   Semantic classes, not element selectors — a page title stays a page
   title whether it is an <h1> or an <h2> in the markup. */
.rr-display {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-4xl);
  font-weight: var(--rr-weight-extra);
  line-height: var(--rr-leading-tight);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-text);
}
.rr-h1 {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-xl);
  font-weight: var(--rr-weight-bold);
  line-height: var(--rr-leading-snug);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-text);
}
.rr-h2 {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-lg);
  font-weight: var(--rr-weight-bold);
  line-height: var(--rr-leading-snug);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-text);
}
.rr-h3 {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-md);
  font-weight: var(--rr-weight-semibold);
  line-height: var(--rr-leading-snug);
  color: var(--rr-text);
}
.rr-h4 {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-base);
  font-weight: var(--rr-weight-semibold);
  line-height: var(--rr-leading-normal);
  color: var(--rr-text);
}
.rr-body    { font-size: var(--rr-text-base); line-height: var(--rr-leading-relaxed); color: var(--rr-text-body); }
.rr-body-sm { font-size: var(--rr-text-sm);   line-height: var(--rr-leading-relaxed); color: var(--rr-text-body); }
.rr-caption { font-size: var(--rr-text-xs);   line-height: var(--rr-leading-normal);  color: var(--rr-text-muted); }
.rr-eyebrow {
  font-size: var(--rr-text-2xs);
  font-weight: var(--rr-weight-semibold);
  letter-spacing: var(--rr-tracking-caps);
  text-transform: uppercase;
  color: var(--rr-text-muted);
  line-height: var(--rr-leading-normal);
}
.rr-mono { font-family: var(--rr-font-mono); font-size: var(--rr-text-sm); }

/* Money and counts: tabular, tight, never wrapped mid-figure. */
.rr-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--rr-tracking-tight);
  white-space: nowrap;
}
.rr-num-lg {
  font-family: var(--rr-font-display);
  font-size: var(--rr-text-2xl);
  font-weight: var(--rr-weight-bold);
  line-height: var(--rr-leading-tight);
  letter-spacing: var(--rr-tracking-tight);
  color: var(--rr-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rr-text-muted  { color: var(--rr-text-muted); }
.rr-text-subtle { color: var(--rr-text-subtle); }
.rr-text-brand  { color: var(--rr-text-brand); }
.rr-text-success{ color: var(--rr-success-600); }
.rr-text-warning{ color: var(--rr-warning-600); }
.rr-text-error  { color: var(--rr-error-600); }

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

/* ----------------------------------------------------------- ICONS --- */
.rr-i {
  width: var(--rr-icon-md);
  height: var(--rr-icon-md);
  stroke-width: var(--rr-icon-stroke);
  flex: none;
}
.rr-i-sm { width: var(--rr-icon-sm); height: var(--rr-icon-sm); }
.rr-i-lg { width: var(--rr-icon-lg); height: var(--rr-icon-lg); }
.rr-i-xl { width: var(--rr-icon-xl); height: var(--rr-icon-xl); }

/* -------------------------------------------------------- UTILITIES ---
   Deliberately small. Layout belongs in components, not in a utility soup. */
.rr-row    { display: flex; align-items: center; gap: var(--rr-space-2); }
.rr-row-3  { display: flex; align-items: center; gap: var(--rr-space-3); }
.rr-col    { display: flex; flex-direction: column; gap: var(--rr-space-2); }
.rr-between{ display: flex; align-items: center; justify-content: space-between; gap: var(--rr-space-3); }
.rr-wrap   { flex-wrap: wrap; }
.rr-spacer { flex: 1 1 auto; min-width: 0; }
.rr-center { display: grid; place-items: center; }

.rr-stack   > * + * { margin-top: var(--rr-space-4); }
.rr-stack-sm> * + * { margin-top: var(--rr-space-2); }
.rr-stack-lg> * + * { margin-top: var(--rr-space-6); }

.rr-grid    { display: grid; gap: var(--rr-space-4); }
.rr-grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rr-grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rr-grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Auto-fit grid for card walls — no media queries needed. */
.rr-grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Asymmetric two-column pairs (main + aside). Use these instead of an inline
   grid-template-columns: an inline style cannot respond to a media query, so
   the columns stay side by side on a phone and squeeze to ~180px each. */
.rr-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rr-grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.rr-hide      { display: none !important; }
.rr-mobile-only  { display: none; }
.rr-scroll-x  { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Screen-reader only — for icon-only buttons and table caption context. */
.rr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 1024px) {
  .rr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rr-grid-2-1, .rr-grid-1-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rr-grid-2, .rr-grid-3, .rr-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .rr-desktop-only { display: none !important; }
  .rr-mobile-only  { display: revert; }
}

/* ----------------------------------------------------------- PRINT ---
   Global print reset. Per-document print CSS (invoice, KOT, thermal)
   lives in its own layer and is added in a later step. */
@media print {
  body { background: #fff; color: #000; }
  .rr-no-print { display: none !important; }
}