/* Farm To Kitchen (Tanfroz Limited) — 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. Tanfroz's mark is the blue "Let's chill, keep cool"
     snowflake roundel, so the brand is BLUE, and the ground stays the NEUTRAL
     grey inherited from the red palette. The reasoning transfers unchanged:
     grey carries no hue of its own, so it lets the brand be the only colour on
     a page. It matters more here, not less — a cold-chain business reads cold,
     and a warm ground would fight that.

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

     Why #0A76AC for buttons rather than the logo's own #29ABE2: white text on
     the logo blue measures 2.62:1, nowhere near WCAG AA — a light cyan simply
     cannot carry white text. Deepening it to #0A76AC gives 5.00:1 while staying
     recognisably the same blue. The exact logo cyan stays as --f2k-brand-light,
     for the places where nothing sits on top of it. */
  /* Mtanga navy — the colour of the badge on the wall at Iringa.
     It is the MARK and the letterhead, and deliberately NOT the interface.
     The sidebar was painted navy for one build and taken back: the chrome
     here is pale on purpose, and a dark sidebar makes the work compete with
     the furniture rather than the other way round. */
  --f2k-navy:        #16213A;

  --f2k-brand:       #0A76AC;   /* active nav, primary actions — 5.00:1 on white */
  --f2k-brand-dark:  #085B84;   /* pressed / active state */
  --f2k-brand-light: #29ABE2;   /* the logo cyan exactly — accents, focus ring */
  --f2k-ground:      #F1F3F5;   /* light grey page ground */
  --f2k-border:      #DEE2E6;   /* hairline rule */
  --f2k-text:        #1F2329;   /* deep neutral ink */
  --f2k-muted:       #6B7280;   /* neutral slate for secondary text */
  --f2k-tint:        #E8F4FB;   /* pale blue 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. */
  --f2k-surface:     #F8F9FA;   /* panel / callout ground, one step off white */
  --f2k-surface-2:   #EDF0F2;   /* a second step, for a panel inside a panel */
  --f2k-note-bg:     #F8F9FA;   /* informational callout */
  --f2k-note-edge:   #ADB5BD;   /* its left rule — neutral, it is not a warning */
  --f2k-warn-bg:     #FFF4E5;   /* a REAL warning keeps amber: it carries meaning */
  --f2k-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(--f2k-brand);
  --rs-accent-light:  var(--f2k-tint);
  --rs-accent-dark:   var(--f2k-brand-dark);
  --rs-brand:         var(--f2k-brand);
  --rs-text:          var(--f2k-text);
  --rs-text-muted:    var(--f2k-muted);
  --rs-border:        var(--f2k-border);
  --rs-bg:            var(--f2k-ground);       /* page ground */
  --rs-sidebar-bg:    #FFFFFF;                     /* was #2c3a4a — dark sidebar killed */
  --rs-sidebar-txt:   var(--f2k-text);          /* dark ink for light sidebar */
  --rs-sidebar-sec:   var(--f2k-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(--f2k-border);
    color: var(--f2k-text);
}
.rs-sidebar::-webkit-scrollbar-thumb { background: var(--f2k-border); }
.rs-sidebar-brand { border-bottom: 1px solid var(--f2k-border); background: #FFFFFF; }
.rs-sidebar-brand img { height: 36px; }
.rs-sidebar-brand .brand-name { color: var(--f2k-brand); }
.rs-sidebar-brand .brand-sub  { color: var(--f2k-muted); }

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

.rs-nav-section {
    color: var(--f2k-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(--f2k-text); }

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

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

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

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

.money, td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; }
img[loading="lazy"] { background: var(--f2k-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(--f2k-tint); color: var(--f2k-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; }
}

/* ── The section bar ──────────────────────────────────────────────────────
   A strip of the current sidebar section's screens, under the topbar. It is
   drawn from the registry the sidebar fills while rendering, so it carries
   exactly what that seat may reach and nothing else.

   Deliberately quiet: it is navigation, not content. A rule underneath, the
   section name in small caps on the left, the active screen in brand blue
   with an underline. On a narrow screen it scrolls sideways ON ITS OWN
   rather than widening the page — the body must never scroll horizontally,
   which is what `overflow-x: hidden` on <body> above is defending. */
.rs-sectionbar {
    /* Sticks under the topbar, which is itself sticky at z-index 900.
       A tab strip that scrolls away is one you scroll back up to reach,
       and these lists are long — the stock ledger runs to hundreds of
       rows. One below the topbar in the stacking order so the
       notification dropdown still opens over it. */
    position: sticky;
    top: var(--rs-topbar-h, 44px);
    z-index: 899;
    display: flex;
    align-items: stretch;
    gap: .75rem;
    background: var(--f2k-surface);
    border-bottom: 1px solid var(--f2k-border);
    padding: 0 .75rem;
    min-height: 38px;
}
.rs-sectionbar-label {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--f2k-muted);
    padding-right: .75rem;
    border-right: 1px solid var(--f2k-border);
    white-space: nowrap;
}
.rs-sectionbar-links {
    display: flex;
    align-items: stretch;
    gap: .15rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.rs-sectionbar-links::-webkit-scrollbar        { height: 3px; }
.rs-sectionbar-links::-webkit-scrollbar-thumb  { background: var(--f2k-border); border-radius: 3px; }
.rs-sectionbar-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .6rem;
    font-size: .74rem;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--f2k-muted);
    border-bottom: 2px solid transparent;
    transition: color .12s ease, border-color .12s ease;
}
.rs-sectionbar-link i        { font-size: .68rem; opacity: .65; }
.rs-sectionbar-link:hover    { color: var(--f2k-brand); }
.rs-sectionbar-link:hover i  { opacity: 1; }
.rs-sectionbar-link.active {
    color: var(--f2k-brand);
    font-weight: 600;
    border-bottom-color: var(--f2k-brand);
}
.rs-sectionbar-link.active i { opacity: 1; }
.rs-sectionbar-link:focus-visible {
    outline: 2px solid var(--f2k-brand-light);
    outline-offset: -2px;
    border-radius: 3px;
}

/* Under about 600px the label is the first thing to go: the screens are
   what somebody came for, and the sidebar already says which section. */
@media (max-width: 599.98px) {
    .rs-sectionbar-label { display: none; }
    .rs-sectionbar       { padding-left: .5rem; }
}

/* The links below every section — Training, Help, Sign out — belong to no
   group. Without a rule they read as the tail of whichever section the seat
   happens to end on, which differs per role now that a seat's own section is
   floated to the top. */
.rs-nav-rule {
    height: 1px;
    margin: .6rem .9rem .2rem;
    background: var(--f2k-border);
    opacity: .6;
}