/* Domaka General Supply — brand overlay
 * Loaded AFTER Bootstrap + FA and BEFORE rsflow.css / custom.css so this file
 * establishes the base font stack, brand vars, mobile chrome, and
 * mobile-UX polish. Downstream rsflow rules keep working on top.
 */

/* ═══════════════════════════════════════════════════════════════════════
   OPEN SANS  (self-hosted from /fonts/open-sans, no Google Fonts CDN)
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans/open-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/open-sans/open-sans-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/open-sans/open-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/open-sans/open-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/open-sans/open-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/open-sans/open-sans-800.woff2') format('woff2');
}


/* ═══════════════════════════════════════════════════════════════════════
   BRAND TOKENS + FONT STACK
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* THE CLIENT'S PALETTE. This block was a placeholder amber-on-cream while we
     waited for Domaka's identity; the logo settled it. The brand is RED, and
     the ground is a NEUTRAL grey rather than a warm one — cream carries yellow
     and red carries none, so a warm ground and a red mark make each other look
     dirty. Grey is the neutral that lets the red be the only colour on a page.

     Everything downstream reads these eight tokens, so a rebrand is one edit to
     this block — never hardcode a colour below.

     Why #D01B28 for buttons rather than the logo's own #EA1D2E: white text on
     the logo red measures 4.46:1, which misses WCAG AA for normal text by a
     whisker. Deepening it to #D01B28 gives 5.39:1 and is indistinguishable
     beside the mark. The exact logo red stays as --domaka-brand-light, for the
     places where nothing sits on top of it. */
  --domaka-brand:       #D01B28;   /* active nav, primary actions */
  --domaka-brand-dark:  #A8141F;   /* pressed / active state */
  --domaka-brand-light: #EA1D2E;   /* the logo red exactly — accents, focus ring */
  --domaka-ground:      #F1F3F5;   /* light grey page ground */
  --domaka-border:      #DEE2E6;   /* hairline rule */
  --domaka-text:        #1F2329;   /* deep neutral ink */
  --domaka-muted:       #6B7280;   /* neutral slate for secondary text */
  --domaka-tint:        #FDECEE;   /* pale red tint for hover / active bg */

  /* Callout and panel surfaces. The inherited views hardcoded thirteen cream
     backgrounds (#FDF7EC, #FEFDF6, #FFF8E6 …) with warm borders to match — the
     "Who edits what" box on Company Profile was one. They are tokens now so the
     next palette change is still one edit to this block, as promised above. */
  --domaka-surface:     #F8F9FA;   /* panel / callout ground, one step off white */
  --domaka-surface-2:   #EDF0F2;   /* a second step, for a panel inside a panel */
  --domaka-note-bg:     #F8F9FA;   /* informational callout */
  --domaka-note-edge:   #ADB5BD;   /* its left rule — neutral, it is not a warning */
  --domaka-warn-bg:     #FFF4E5;   /* a REAL warning keeps amber: it carries meaning */
  --domaka-warn-edge:   #F0A020;

  /* Override rsflow's dark-sidebar default so the whole chrome goes
     pale minimal. Every --rs-* here retargets an inherited rsflow token. */
  --rs-accent:        var(--domaka-brand);
  --rs-accent-light:  var(--domaka-tint);
  --rs-accent-dark:   var(--domaka-brand-dark);
  --rs-brand:         var(--domaka-brand);
  --rs-text:          var(--domaka-text);
  --rs-text-muted:    var(--domaka-muted);
  --rs-border:        var(--domaka-border);
  --rs-bg:            var(--domaka-ground);       /* page ground */
  --rs-sidebar-bg:    #FFFFFF;                     /* was #2c3a4a — dark sidebar killed */
  --rs-sidebar-txt:   var(--domaka-text);          /* dark ink for light sidebar */
  --rs-sidebar-sec:   var(--domaka-muted);        /* section headers */
  --rs-topbar-bg:     #FFFFFF;
  --rs-card-bg:       #FFFFFF;
}

/* ── Sidebar chrome overrides for the pale minimal treatment ───────────
   rsflow.css paints a linear-gradient with a hardcoded #1a2636 stop, so
   the flat #FFFFFF background needs !important to beat it. */
.rs-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid var(--domaka-border);
    color: var(--domaka-text);
}
.rs-sidebar::-webkit-scrollbar-thumb { background: var(--domaka-border); }
.rs-sidebar-brand { border-bottom: 1px solid var(--domaka-border); background: #FFFFFF; }
.rs-sidebar-brand img { height: 36px; }
.rs-sidebar-brand .brand-name { color: var(--domaka-brand); }
.rs-sidebar-brand .brand-sub  { color: var(--domaka-muted); }

.rs-nav-link {
    color: var(--domaka-text);
    border-left: 2px solid transparent;
}
.rs-nav-link:hover {
    background: var(--domaka-tint);
    color: var(--domaka-brand);
    border-left-color: transparent;
}
.rs-nav-link.active {
    background: var(--domaka-tint);
    color: var(--domaka-brand);
    border-left-color: var(--domaka-brand);
    font-weight: 500;
}
.rs-nav-link i { opacity: .7; }
.rs-nav-link.active i,
.rs-nav-link:hover i { opacity: 1; color: var(--domaka-brand); }

.rs-nav-section {
    color: var(--domaka-muted);
    font-size: .58rem;
    letter-spacing: .12em;
    font-weight: 500;
}

/* Override rsflow.css:135 which paints section labels white on hover —
   Domaka's sidebar is light, so white-on-white made the label vanish.
   Darken to the primary text colour instead. */
.rs-nav-section:hover { color: var(--domaka-text); }

.rs-nav-search {
    background: var(--domaka-ground);
    border: 1px solid var(--domaka-border);
    color: var(--domaka-text);
}
.rs-nav-search input {
    background: transparent;
    color: var(--domaka-text);
}
.rs-nav-search input::placeholder { color: var(--domaka-muted); }
.rs-nav-search-ico { color: var(--domaka-muted); }

.rs-topbar {
    border-bottom: 1px solid var(--domaka-border);
}
.rs-topbar .page-title { color: var(--domaka-text); font-weight: 600; }

/* User avatar / footer chips inside the sidebar */
.rs-sidebar-footer {
    border-top: 1px solid var(--domaka-border);
}
.rs-sidebar-footer .avatar {
    background: var(--domaka-tint);
    color: var(--domaka-brand);
    font-weight: 600;
}

html, body {
  font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: var(--domaka-text);
  overflow-x: hidden;                     /* belt-and-braces: no horizontal scroll on the whole page */
  -webkit-text-size-adjust: 100%;         /* iOS Safari: don't inflate text after orientation change */
}

/* Brand accents on primary UI chrome */
.rs-sidebar-brand .brand-name { color: var(--domaka-brand); font-weight: 700; }
.btn-primary        { background-color: var(--domaka-brand); border-color: var(--domaka-brand); }
.btn-primary:hover  { background-color: var(--domaka-brand-dark); border-color: var(--domaka-brand-dark); }
.btn-primary:focus  { box-shadow: 0 0 0 .2rem rgba(38,38,245,.35); }
a       { color: var(--domaka-brand); }
a:hover { color: var(--domaka-brand-dark); }

.money, td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; }
img[loading="lazy"] { background: var(--domaka-ground); }


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR — off-canvas drawer with backdrop
   ═══════════════════════════════════════════════════════════════════════ */

.rs-sidebar-toggle {
  display: none;                          /* desktop: hidden */
  background: none; border: none; cursor: pointer;
  color: #4b5563; padding: .45rem .6rem;
  border-radius: 6px; font-size: 1.1rem; line-height: 1;
  min-width: 44px; min-height: 44px;      /* touch target */
}
.rs-sidebar-toggle:hover,
.rs-sidebar-toggle:focus { background: var(--domaka-tint); color: var(--domaka-brand); outline: none; }

.rs-sidebar { transition: transform .25s ease; }

.rs-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .48);
  z-index: 998;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.rs-sidebar-backdrop.show {
  opacity: 1; visibility: visible;
  transition: opacity .2s ease;
}

.rs-topbar { z-index: 900; }


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-FIRST UX POLISH
   Breakpoints follow Bootstrap 5:
     xs  < 576px    (phones portrait)
     sm  ≥ 576px    (phones landscape)
     md  ≥ 768px    (tablets)
     lg  ≥ 992px    (desktops)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tablet + phone: drawer sidebar, tighter chrome ─────────────────── */
@media (max-width: 991.98px) {
  /* Sidebar becomes an off-canvas drawer */
  .rs-sidebar-toggle    { display: inline-flex; align-items: center; justify-content: center; }
  .rs-sidebar           { position: fixed; top: 0; left: 0; z-index: 999; box-shadow: 0 8px 40px rgba(0,0,0,.25); transform: translateX(-100%); }
  .rs-sidebar.mobile-open { transform: translateX(0); }
  .rs-main              { margin-left: 0 !important; }
  body.rs-drawer-open   { overflow: hidden; }         /* lock page scroll while drawer open */

  /* Notifications & other topnav dropdowns must fit the viewport */
  .rs-topbar .dropdown-menu {
    max-width: calc(100vw - 20px) !important;
    width: min(340px, calc(100vw - 20px));
  }

  /* Page-level breathing room reduces */
  .rs-content { padding: 12px !important; }

  /* Card padding gets tighter */
  .card-body { padding: .9rem !important; }
}

/* ── Phone (portrait) — density + touch targets ─────────────────────── */
@media (max-width: 767.98px) {
  /* Page headers scale down + wrap cleanly */
  .rs-content h5 { font-size: 1rem; }

  /* Tables: smaller font + tighter cells, but keep horizontal scroll usable */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: .4rem .5rem;
    font-size: .78rem;
    white-space: nowrap;                  /* rows scroll horizontally rather than exploding vertically */
  }
  /* Table row action buttons — enlarge tap area */
  .table .btn-sm { padding: .38rem .55rem; min-width: 32px; }

  /* Filter cards: compact but readable */
  .card > .card-body.py-2 { padding: .6rem .75rem !important; }

  /* Buttons in header rows do not truncate */
  .d-flex.gap-2 > .btn, .d-flex.flex-wrap > .btn { white-space: nowrap; }

  /* Topnav: tighter padding, larger icons for touch */
  .rs-topbar        { padding: 0 8px !important; gap: 8px !important; }
  .rs-topbar i.fas  { font-size: 1.05rem; }
  .rs-topbar a      { padding: 6px; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Small phone — form density ─────────────────────────────────────── */
@media (max-width: 575.98px) {
  .form-label       { margin-bottom: .2rem; font-size: .82rem; }
  .form-control,
  .form-select      { font-size: .88rem; }
  .card-body        { padding: .8rem .75rem !important; }

  /* Numeric badges + status chips shrink slightly */
  .badge            { font-size: .68rem; }

  /* dl rows in view screens stack better */
  dl.row > dt, dl.row > dd { padding-top: 2px; padding-bottom: 2px; }
}

/* ── jQuery-confirm modal — full-width preview on mobile ────────────── */
@media (max-width: 767.98px) {
  .jconfirm .jconfirm-box.xlarge,
  .jconfirm-holder .jconfirm-box.xlarge {
    max-width: calc(100vw - 16px) !important;
    margin: 8px !important;
    width: calc(100vw - 16px);
  }
  .jconfirm .jconfirm-content iframe { height: 55vh !important; }
  /* Wrap the footer buttons so 4 buttons don't overflow */
  .jconfirm-buttons        { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .jconfirm-buttons button { flex: 1 1 45%; min-width: 45%; margin: 0 !important; }
}

/* ── Sidebar-drawer polish (visible only when drawer is open) ───────── */
@media (max-width: 991.98px) {
  /* Slightly larger tap targets inside the drawer */
  .rs-nav-link           { padding: 11px 16px; font-size: .82rem; }
  .rs-nav-section        { padding: 12px 16px 6px; font-size: .62rem; }
  .rs-sidebar-brand      { padding: 14px 16px; }
  .rs-sidebar-brand .brand-name { font-size: .88rem; }
  .rs-sidebar-brand .brand-sub  { font-size: .62rem; }
}

/* ── Login page: sane on tiny screens ───────────────────────────────── */
@media (max-width: 400px) {
  .rs-login-card { padding: 1.4rem 1.1rem; }
}

/* ── Utility: hide desktop-only, mobile-only helpers ────────────────── */
.desktop-only { display: block; }
.mobile-only  { display: none; }
@media (max-width: 767.98px) {
  .desktop-only { display: none; }
  .mobile-only  { display: block; }
}