/* Pacific Logistics — 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 {
  /* Pacific Group official brand — rolled out 2026-08-27.
     Prior navy #1E3A5F retired. Anchor: brand blue used sparingly;
     cool ground, hairline rules, deep ink with a slight cool bias. */
  --pacific-navy:        #2626F5;   /* brand blue (variable name kept for cascade) */
  --pacific-navy-dark:   #1414D6;   /* pressed / active state */
  --pacific-navy-light:  #5A5AF8;   /* focus ring, hover tint */
  --pacific-accent:      #F5F7FB;   /* pale cool ground */
  --pacific-border:      #E2E7EF;   /* hairline rule */
  --pacific-text:        #0F1220;   /* deep ink with cool bias */
  --pacific-muted:       #6B7484;   /* cool slate for secondary text */
  --pacific-tint:        #EBEFFA;   /* pale blue-tint for hover / active bg */

  /* Override rsflow's dark-sidebar default so the whole chrome goes
     pale-cool minimal, matching the direction the client approved.
     Every --rs-* here retargets an inherited rsflow token. */
  --rs-accent:        var(--pacific-navy);
  --rs-accent-light:  var(--pacific-tint);
  --rs-accent-dark:   var(--pacific-navy-dark);
  --rs-brand:         var(--pacific-navy);
  --rs-text:          var(--pacific-text);
  --rs-text-muted:    var(--pacific-muted);
  --rs-border:        var(--pacific-border);
  --rs-bg:            var(--pacific-accent);       /* page ground */
  --rs-sidebar-bg:    #FFFFFF;                     /* was #2c3a4a — dark sidebar killed */
  --rs-sidebar-txt:   #21263B;                     /* dark ink for light sidebar */
  --rs-sidebar-sec:   var(--pacific-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(--pacific-border);
    color: var(--pacific-text);
}
.rs-sidebar::-webkit-scrollbar-thumb { background: var(--pacific-border); }
.rs-sidebar-brand { border-bottom: 1px solid var(--pacific-border); background: #FFFFFF; }
.rs-sidebar-brand img { height: 36px; }
.rs-sidebar-brand .brand-name { color: var(--pacific-navy); }
.rs-sidebar-brand .brand-sub  { color: var(--pacific-muted); }

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

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

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

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

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

html, body {
  font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: var(--pacific-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(--pacific-navy); font-weight: 700; }
.btn-primary        { background-color: var(--pacific-navy); border-color: var(--pacific-navy); }
.btn-primary:hover  { background-color: var(--pacific-navy-dark); border-color: var(--pacific-navy-dark); }
.btn-primary:focus  { box-shadow: 0 0 0 .2rem rgba(38,38,245,.35); }
a       { color: var(--pacific-navy); }
a:hover { color: var(--pacific-navy-dark); }

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


/* ═══════════════════════════════════════════════════════════════════════
   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(--pacific-tint); color: var(--pacific-navy); 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; }
}
