/* =====================================================================
   RasoiRaj 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; }
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-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; }
}