/* =============================================================================
   MULTI RICH HOME DECORS, INC. — Brand Tokens
   Load this file FIRST on every page (before sidebar.css / topnav.css /
   footer.css / login.css / lockscreen.css). It defines the shared color and
   font vocabulary those files draw from, so there is exactly one palette in
   the app instead of several stylesheets each redefining --mr-* differently.

   Palette sampled directly from /img/logo-brand.png:
     Red   (wordmark)........ #C8102E
     Gold  (column capital)... #C9A227
     Ink   (body text)........ warm near-black, not pure #000
   Text-on-white gold and slate tones below are deliberately darkened from
   their decorative values so every combo in this file clears WCAG AA
   (4.5:1 body text / 3:1 large text & UI) — see the contrast note on each
   group.
   ============================================================================= */

:root {
  /* ---- Font: Arial is the default typeface for the whole application ---- */
  --mr-font: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* ---- Red — primary brand color ---- */
  --mr-red: #c8102e;          /* AA on white: 5.88:1 */
  --mr-red-dark: #9c0e24;     /* AA on white: 8.39:1 — use for links/hover text */
  --mr-red-darker: #6e0918;   /* deep maroon — gradients, dark backgrounds only */
  --mr-red-tint: #fbeaea;     /* pale red — alert/hover backgrounds */

  /* ---- Gold — secondary / accent ---- */
  --mr-gold: #c9a227;         /* decorative: borders, icons on dark backgrounds */
  --mr-gold-light: #e3c568;   /* decorative: hover/active text on dark backgrounds */
  --mr-gold-dark: #7c6130;    /* AA on white: 5.82:1 — use for gold TEXT on light backgrounds */
  --mr-gold-tint: #f5eedd;    /* pale gold — badges, highlighted rows */

  /* ---- Neutrals ---- */
  --mr-ink: #241f1b;          /* body text — warm near-black, 16.3:1 on white */
  --mr-ink-soft: #4a4440;
  --mr-slate: #6f6459;        /* muted/secondary text, 5.39:1 on --mr-paper */
  --mr-slate-light: #a39c90;
  --mr-paper: #faf7f1;        /* app/page background */
  --mr-surface: #ffffff;      /* cards, form panels */
  --mr-border: #e5dfd3;
  --mr-border-strong: #d8cfbf;

  /* ---- Sidebar-specific dark surface (kept here so login/lock screens,
     which use similar dark panels, can reuse it too) ---- */
  --mr-charcoal: #241f1b;
  --mr-charcoal-soft: #332c27;
  --mr-charcoal-border: #3d362f;

  /* ---- Status colors (kept AA-safe on white) ---- */
  --mr-success: #2f6b40;
  --mr-warning: #a06a12;
  --mr-danger: var(--mr-red);
  --mr-info: #2f5f78;

  /* ---- Shape & motion ---- */
  --mr-radius: 4px;
  --mr-radius-lg: 8px;
  --mr-shadow: 0 1px 2px rgba(36, 31, 27, 0.08);
  --mr-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.28);
  --mr-focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* -----------------------------------------------------------------------
   Global type — Arial everywhere, per spec.
   ----------------------------------------------------------------------- */
html, body {
  font-family: var(--mr-font);
}

h1, h2, h3, h4, h5, h6,
.card, .btn, .form-control, .nav, .navbar, .brand-link,
table, .dropdown-menu, .modal, .select2-container, .swal2-popup,
input, select, textarea, button {
  font-family: var(--mr-font);
}

body {
  background-color: var(--mr-paper);
  color: var(--mr-ink);
}

a {
  color: var(--mr-red-dark);
}
a:hover, a:focus {
  color: var(--mr-red);
}

:focus-visible {
  outline: none;
  box-shadow: var(--mr-focus-ring);
}

/* -----------------------------------------------------------------------
   Shared "auth chrome" components — used by BOTH the login screen
   (css/login.css) and the lock screen (css/lockscreen.css), so they live
   here once instead of being duplicated in two page-scoped files.
   ----------------------------------------------------------------------- */
.btn-signin {
  background: linear-gradient(180deg, var(--mr-red) 0%, var(--mr-red-dark) 100%);
  border: 1px solid var(--mr-red-dark);
  color: #fff;
  font-weight: 700;
  padding: 0.65rem 1rem;
  border-radius: var(--mr-radius);
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.28);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-signin:hover,
.btn-signin:focus {
  background: linear-gradient(180deg, var(--mr-red-dark) 0%, var(--mr-red-darker) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(200, 16, 46, 0.34);
}
.btn-signin:focus-visible {
  outline: none;
  box-shadow: var(--mr-focus-ring), 0 4px 12px rgba(200, 16, 46, 0.28);
}
.btn-signin:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
}

.mr-toggle-password {
  cursor: pointer;
  background: var(--mr-surface);
  border-color: var(--mr-border-strong);
  color: var(--mr-gold-dark);
}
.mr-toggle-password:hover,
.mr-toggle-password:focus {
  color: var(--mr-red-dark);
}

/* -----------------------------------------------------------------------
   Small brand utility classes used across the app (e.g. the lock icon in
   the top nav, status accents in cards/tables).
   ----------------------------------------------------------------------- */
.text-gold { color: var(--mr-gold-dark) !important; }
.bg-gold { background-color: var(--mr-gold) !important; color: var(--mr-ink) !important; }
.bg-maroon { background-color: var(--mr-red-darker) !important; color: #fff !important; }
.border-gold { border-color: var(--mr-gold) !important; }

/* Default (light-surface) scrollbar accent; sidebar.css overrides this for
   the dark sidebar panel specifically. */
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background: rgba(201, 162, 39, 0.55);
}

/* Guard against overflow on small screens app-wide. */
img { max-width: 100%; height: auto; }
.table-responsive { -webkit-overflow-scrolling: touch; }