/**
 * GawangPinas Seller Portal — base.css
 *
 * Foundation layer for every seller page:
 * design tokens, page reset, typography, accessibility helpers,
 * and the small set of shared utility classes.
 *
 * Token values come from the GawangPinas brand kit (BRAND-KIT.md v2.0)
 * so the seller portal stays visually consistent with login, shop,
 * supplier, and admin.
 */

/* ==========================================================================
   1. DESIGN TOKENS — LIGHT THEME (default)
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Brand colour */
  --gp-primary: #2563eb;
  --gp-primary-hover: #1d4ed8;
  --gp-primary-active: #1e3a8a;
  --gp-primary-light: #eff6ff;
  --gp-primary-border: #bfdbfe;

  /* Supplier role accent (warm bronze) — BRAND-KIT subsite token name */
  --gp-subsite-supplier: #854415;
  --gp-subsite-supplier-hover: #6d3510;
  --gp-subsite-supplier-light: #fdf6ee;
  --gp-subsite-supplier-border: #f0d1b4;
  --gp-subsite-supplier-text: #854415;

  /* Canvas and surfaces */
  --gp-bg: #f8fafc;
  --gp-canvas: #eef1f6; /* signed-in backdrop the cards float on */
  --gp-surface: #ffffff;
  --gp-surface-2: #f1f5f9;
  --gp-surface-3: #e2e8f0;

  /* Text (contrast ratios noted where they matter) */
  --gp-text-main: #0f172a;      /* 16.1:1 on white */
  --gp-text-secondary: #334155; /* 9.6:1 on white */
  --gp-text-muted: #475569;     /* 4.6:1 on white */
  --gp-text-faint: #475569;     /* placeholders and disabled text only */

  /* Borders */
  --gp-border: #e2e8f0;
  --gp-border-strong: #cbd5e1;

  /* Status colours */
  --gp-success: #059669;
  --gp-success-bg: #dcfce7;
  --gp-success-text: #166534;
  --gp-success-border: #bbf7d0;

  --gp-warning: #d97706;
  --gp-warning-bg: #fef3c7;
  --gp-warning-text: #92400e;
  --gp-warning-border: #fde68a;

  --gp-danger: #e11d48;
  --gp-danger-bg: #ffe4e6;
  --gp-danger-text: #be123c;
  --gp-danger-border: #fecdd3;

  --gp-info: #0284c7;
  --gp-info-bg: #e0f2fe;
  --gp-info-text: #0369a1;
  --gp-info-border: #bae6fd;

  /* Sidebar — the dark rail of the ModularAdmin shell. Nested levels sit on a
     deeper shade; the active item is a solid block of the brand colour. */
  --sidebar-bg: #1e293b;
  --sidebar-bg-nested: #0f172a;
  --sidebar-border: rgba(148, 163, 184, 0.2);
  --sidebar-text: rgba(255, 255, 255, 0.68);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.07);
  --sidebar-hover-text: #ffffff;
  --sidebar-active-bg: var(--gp-subsite-supplier);
  --sidebar-active-text: #ffffff;
  --sidebar-group-label: rgba(255, 255, 255, 0.55);
  --sidebar-brand-name: #ffffff;
  --sidebar-brand-sub: rgba(255, 255, 255, 0.55);

  /* Public footer plane (dark, per the brand kit) */
  --gp-footer-bg: #0f172a;
  --gp-footer-text: #94a3b8;
  --gp-footer-heading: #ffffff;
  --gp-footer-link: #cbd5e1;
  --gp-footer-link-hover: #ffffff;

  /* Topbar */
  --topbar-bg: #ffffff;
  --topbar-border: #e2e8f0;

  /* Typography */
  --gp-font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --gp-tabular-nums: 'tnum' 1, 'cv05' 1;

  /* Subtle 6px corners across portal controls and surfaces. Badges stay
     smaller; status pills and avatars remain fully round. */
  --gp-radius-xs: 3px;   /* badges */
  --gp-radius-sm: 6px;
  --gp-radius-md: 6px;
  --gp-radius-lg: 6px;
  --gp-radius-full: 9999px; /* status pills and avatars only */

  /* Spacing (4px rhythm) */
  --gp-space-1: 4px;
  --gp-space-2: 8px;
  --gp-space-3: 12px;
  --gp-space-4: 16px;
  --gp-space-5: 20px;
  --gp-space-6: 24px;
  --gp-space-8: 32px;
  --gp-space-10: 40px;
  --gp-space-12: 48px;

  /* Shadows — ambient only, never coloured halos.
     --gp-shadow-card is ModularAdmin's panel drop (1px 1px 5px). */
  --gp-shadow-card: 1px 1px 5px rgba(79, 95, 111, 0.16);
  --gp-shadow-menu: 2px 3px 6px rgba(79, 95, 111, 0.18);

  /* Motion — short and purposeful */
  --gp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --gp-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Stacking order */
  --z-topbar: 30;
  --z-backdrop: 35;
  --z-sidebar: 40;
  --z-dropdown: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-skip-link: 100;

  /* Shell dimensions — ModularAdmin's 70px header and 260px rail */
  --topbar-h: 70px;
  --sidebar-w: 260px;
}

/* ==========================================================================
   2. DESIGN TOKENS — DARK THEME
   ========================================================================== */

[data-theme="dark"] {
  --gp-primary: #2563eb;
  --gp-primary-hover: #60a5fa;
  --gp-primary-active: #93c5fd;
  --gp-primary-light: rgba(59, 130, 246, 0.15);
  --gp-primary-border: rgba(59, 130, 246, 0.35);

  --gp-subsite-supplier: #deb085;
  --gp-subsite-supplier-hover: #e8c9a8;
  --gp-subsite-supplier-light: rgba(222, 176, 133, 0.16);
  --gp-subsite-supplier-border: rgba(222, 176, 133, 0.35);
  --gp-subsite-supplier-text: #deb085;

  --gp-bg: #090d16;
  --gp-surface: #0f172a;
  --gp-surface-2: #162036;
  --gp-surface-3: #1e293b;

  --gp-text-main: #f8fafc;
  --gp-text-secondary: #cbd5e1;
  --gp-text-muted: #94a3b8;
  --gp-text-faint: #94a3b8;

  --gp-border: #1e293b;
  --gp-border-strong: #334155;

  --gp-success-bg: rgba(5, 150, 105, 0.18);
  --gp-success-text: #34d399;
  --gp-success-border: rgba(5, 150, 105, 0.32);

  --gp-warning-bg: rgba(217, 119, 6, 0.18);
  --gp-warning-text: #fbbf24;
  --gp-warning-border: rgba(217, 119, 6, 0.32);

  --gp-danger-bg: rgba(225, 29, 72, 0.18);
  --gp-danger-text: #fb7185;
  --gp-danger-border: rgba(225, 29, 72, 0.32);

  --gp-info-bg: rgba(2, 132, 199, 0.18);
  --gp-info-text: #38bdf8;
  --gp-info-border: rgba(2, 132, 199, 0.32);

  --topbar-bg: #0f172a;
  --topbar-border: #1e293b;

  --gp-canvas: #070b13;

  /* The sidebar stays the darkest plane of the shell */
  --sidebar-bg: #0f172a;
  --sidebar-bg-nested: #070b13;
  --sidebar-border: rgba(148, 163, 184, 0.16);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  /* Dark bronze so the white active label keeps its contrast. */
  --sidebar-active-bg: #7c4820;

  --gp-shadow-card: 1px 1px 5px rgba(0, 0, 0, 0.45);
  --gp-shadow-menu: 2px 3px 6px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   3. RESET
   ========================================================================== */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* The canvas colour also lives on <html> so the area behind a short
     page keeps the theme colour instead of flashing white. */
  background-color: var(--gp-bg);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd,
ul, ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gp-font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gp-text-main);
  background-color: var(--gp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

table {
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--gp-text-main);
}

h1 { font-size: 1.625rem; }
h2 { font-size: 1.3125rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p {
  color: var(--gp-text-secondary);
}

small {
  font-size: 0.8125rem;
}

a {
  color: var(--gp-primary);
  text-decoration: none;
}

a:hover {
  color: var(--gp-primary-hover);
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid var(--gp-border);
}

/* Numbers that sit in columns stay aligned between rows */
.num {
  font-feature-settings: var(--gp-tabular-nums);
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--gp-font-mono);
  font-size: 0.9375rem;
}

/* ==========================================================================
   5. FOCUS, SELECTION AND SCROLLBARS
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--gp-primary);
  outline-offset: 2px;
}

::selection {
  background-color: #bfdbfe;
  color: #1e3a8a;
}

[data-theme="dark"] ::selection {
  background-color: #1e3a8a;
  color: #bfdbfe;
}

input,
textarea {
  caret-color: var(--gp-primary);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--gp-border-strong) var(--gp-surface-2);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--gp-border-strong);
  border-radius: var(--gp-radius-xs);
}

/* ==========================================================================
   6. ACCESSIBILITY HELPERS
   ========================================================================== */

/* Available to screen readers, invisible on screen.
   Used for table captions, icon-only button labels, and live status text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@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;
  }
}

/* ==========================================================================
   7. SKIP LINK
   Hidden until a keyboard user tabs to it, then it drops into view.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -60px;
  left: var(--gp-space-4);
  z-index: var(--z-skip-link);
  padding: var(--gp-space-2) var(--gp-space-4);
  border-radius: 0 0 var(--gp-radius-sm) var(--gp-radius-sm);
  background-color: var(--gp-primary);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--gp-transition-fast);
}

.skip-link:focus {
  top: 0;
  color: #ffffff;
  text-decoration: none;
}

/* ==========================================================================
   8. SHARED UTILITIES
   Only helpers reused across several pages live here.
   ========================================================================== */

.text-muted { color: var(--gp-text-muted); }
.text-secondary { color: var(--gp-text-secondary); }
.text-danger { color: var(--gp-danger-text); }
.text-success { color: var(--gp-success-text); }
.text-warning { color: var(--gp-warning-text); }

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.8125rem; }

.amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gp-text-main);
}