/* ============================================================================
   LIVA OPERATOR — MODERN + RESPONSIVE LAYER  ·  operator-modern.css
   ----------------------------------------------------------------------------
   Sits on top of Bootstrap 4.3.1 + gds.css + liva-admin-design-system.css.
   Load ORDER (in inc_header.php):
     bootstrap.min.css → gds.css → liva-admin-design-system.css → operator-modern.css
   so this file (last) wins the cascade at equal specificity.

   Responsibilities:
     1. Typography / density corrections (gds.css set everything to 16px/500)
     2. App shell — modern fixed rail on desktop, off-canvas drawer on mobile,
        mobile top bar + backdrop (the sidebar previously VANISHED below 992px)
     3. Sidebar, cards, KPI tiles, listing rows, forms, tabs, tables, modals,
        buttons — all made touch-friendly and responsive at every breakpoint.

   Presentation-only. No hook/class a behaviour keys off is renamed.
   Breakpoints follow Bootstrap 4: sm 576 · md 768 · lg 992 · xl 1200.
   ============================================================================ */

/* ===========================================================================
   1 · BASE / TYPOGRAPHY  — correct gds.css's 16px/500-everywhere baseline
   =========================================================================== */
body {
  font-family: var(--lv-font);
  font-size: var(--lv-fs-base);          /* 14px, was 16px */
  font-weight: var(--lv-fw-reg);         /* 400, was 500 */
  color: var(--lv-ink);
  background-color: var(--lv-surface-2);  /* soft app bg, was white */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* gds.css forces .small/small to 16px — restore a real small scale */
.small, small { font-size: var(--lv-fs-sm) !important; font-weight: var(--lv-fw-reg); }

h1,h2,h3,h4,h5,h6 { font-family: var(--lv-font); font-weight: var(--lv-fw-med); color: var(--lv-ink); line-height: 1.25; }
h1{font-size:var(--lv-fs-2xl);} h2{font-size:var(--lv-fs-xl);} h3{font-size:var(--lv-fs-lg);}
h4{font-size:var(--lv-fs-md);} h5{font-size:var(--lv-fs-base);} h6{font-size:var(--lv-fs-sm);}
/* #3818 — Bootstrap's .h5 means "an h2 (or h3…) that LOOKS like an h5", so a page can keep its outline
   (h1 → h2) without restyling a section title. In the XNet shell it did not hold: `.xnet h1…h4`
   (operator-xnet.css) gives headings the display face at 600 and Bootstrap's .h5 is 1.25rem, so an
   h2.h5 rendered bigger and heavier than the h5 it replaced. This returns .h5 to exactly the h5 look
   (the h1–h6 rule above + h5's size + Bootstrap's h5 margin), with enough weight to beat `.xnet h2`. */
:is(h1,h2,h3,h4).h5, .xnet :is(h1,h2,h3,h4).h5 {
  font-family: var(--lv-font); font-weight: var(--lv-fw-med); color: var(--lv-ink); line-height: 1.25;
  font-size: var(--lv-fs-base); letter-spacing: normal; margin-block: 0 .5rem;
}
/* Headings sitting inside coloured chrome must inherit the light text, not ink
   (a heading's own colour rule otherwise beats an ancestor's inherited white). */
.text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6,
.bg-primary h1,.bg-primary h2,.bg-primary h3,.bg-primary h4,.bg-primary h5,.bg-primary h6,
.bg-success h1,.bg-success h2,.bg-success h3,.bg-success h4,.bg-success h5,.bg-success h6,
.bg-danger h1,.bg-danger h2,.bg-danger h3,.bg-danger h4,.bg-danger h5,.bg-danger h6 { color: #fff; }

a { color: var(--lv-primary); transition: var(--lv-transition); }
a:hover { color: var(--lv-primary-700); }

.text-secondary { color: var(--lv-ink-2) !important; }
.text-muted { color: var(--lv-muted) !important; }

/* ===========================================================================
   2 · APP SHELL — topbar + sidebar rail (desktop) / drawer (mobile) + backdrop
   =========================================================================== */

/* -- Mobile top bar (only < lg). Fixed; gives access to the menu on phones. -- */
.app-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1040;
  display: flex; align-items: center; gap: var(--lv-s2);
  padding: 0 var(--lv-s3);
  background: var(--lv-surface);
  border-bottom: 1px solid var(--lv-line);
  box-shadow: var(--lv-shadow-1);
}
.app-topbar__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius); color: var(--lv-ink); cursor: pointer;
}
.app-topbar__toggle:hover { background: var(--lv-surface-3); }
.app-topbar__toggle .feather { width: 22px; height: 22px; }
.app-topbar__brand { display: flex; align-items: center; height: 32px; }
.app-topbar__brand img { height: 28px; width: auto; }
.app-topbar__brand span { font-weight: var(--lv-fw-semi); color: var(--lv-primary); font-size: var(--lv-fs-md); }

/* -- Backdrop behind the open drawer (only < lg). -- */
.app-backdrop {
  position: fixed; inset: 0; z-index: 1035;
  background: rgba(15,23,32,.45);
  opacity: 0; visibility: hidden; transition: opacity .3s;
}
.app-backdrop.is-open { opacity: 1; visibility: visible; }

/* -- The sidebar: modern white rail with soft divider. -- */
.app-sidebar.sidebar {
  background: var(--lv-surface);
  box-shadow: inset -1px 0 0 var(--lv-line-2);
  padding: var(--lv-s4) var(--lv-s3) !important;
  display: flex; flex-direction: column;
}
/* Menu region scrolls; profile box pins to the foot of the rail/drawer.
   Neutralises the legacy inline margin-top:-60px hack on .profile-box. */
.app-sidebar .sidebar-sticky { height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.app-sidebar .profile-box { margin-top: var(--lv-s4) !important; flex: none; }

/* Sidebar nav items */
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: var(--lv-s2);
  padding: 9px var(--lv-s3); margin-bottom: 2px;
  font-size: var(--lv-fs-sm); font-weight: var(--lv-fw-med);
  color: var(--lv-ink-2); border-radius: var(--lv-radius);
  border: 0 !important; transition: var(--lv-transition);
}
.app-sidebar .nav-link:hover { background: var(--lv-surface-3); color: var(--lv-ink); }
.app-sidebar .nav-link.active { background: var(--lv-primary); color: #fff; }
.app-sidebar .nav-link.active .feather { color: #fff !important; }
.app-sidebar .nav-link .feather { width: 18px; height: 18px; flex: none; }
.app-sidebar .nav-item.border-bottom { border-bottom: 0 !important; }
/* group headings visually via spacing */
.app-sidebar .nav-item.dropdown > .nav-link { color: var(--lv-ink); font-weight: var(--lv-fw-semi); }
.app-sidebar .dropdown-toggle::after { margin-left: auto; }
.app-sidebar .collapse .nav-link, .app-sidebar .collapsing .nav-link { font-weight: var(--lv-fw-reg); }
.app-sidebar .nav-item img { max-width: 150px; height: auto; }

/* Profile box at foot of the rail */
.app-sidebar .profile-box .btn { padding: var(--lv-s2) var(--lv-s3); }
.app-sidebar .profile-name span { font-size: var(--lv-fs-sm); }

/* ---- DESKTOP (lg+): keep the fixed left rail, hide topbar/backdrop ---- */
@media (min-width: 992px) {
  .app-topbar, .app-backdrop { display: none !important; }
  .app-sidebar.sidebar { min-width: 220px; }
}

/* ---- MOBILE / TABLET (< lg): sidebar becomes an off-canvas drawer ---- */
@media (max-width: 991.98px) {
  .app-sidebar.sidebar {
    width: 284px !important; max-width: 86vw;
    top: 0; bottom: 0; left: 0; z-index: 1045;
    transform: translateX(-100%);
    transition: transform .3s ease;
    box-shadow: var(--lv-shadow-2);
    flex: none !important;
  }
  .app-sidebar.sidebar.is-open { transform: translateX(0); }
  .app-content { padding-top: 56px; }   /* clear the fixed topbar */
  body.app-drawer-open { overflow: hidden; }   /* lock scroll while drawer open */
}

/* ===========================================================================
   3 · MAIN CONTENT / BREADCRUMB / PAGE HEADER
   =========================================================================== */
main[role="main"] { padding-bottom: var(--lv-s10); }
/* #3817 — fourteen pages nested a SECOND <main role="main"> inside the card that holds the form, so
   the page exposed two main landmarks. That inner element is now a <div class="lv-mainbody">; this keeps
   the bottom padding the rule above used to give it, so the card is the same height it was. */
.lv-mainbody { padding-bottom: var(--lv-s10); }

.breadcrumb {
  background: var(--lv-primary) !important; color: #fff;
  border-radius: var(--lv-radius); padding: var(--lv-s3) var(--lv-s4);
  font-weight: var(--lv-fw-med);
}
.breadcrumb-item, .breadcrumb-item.active { color: #fff !important; }
.breadcrumb-item strong { font-weight: var(--lv-fw-semi); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }

/* ===========================================================================
   4 · CARDS / PANELS — the ".border.p-3.bg-white" pattern → soft cards
   =========================================================================== */
main .border.bg-white,
main .border.p-3,
.lds-card {
  border: 1px solid var(--lv-line-2) !important;
  border-radius: var(--lv-radius);
  box-shadow: var(--lv-shadow-1);
}
main .bg-white { background: var(--lv-surface) !important; }

/* KPI-style stat tiles (dashboard "col-sm border p-3" blocks) */
main .row > [class*="col"].border.bg-white h3.font-blue-bold,
main .row > [class*="col"].border h3.font-blue-bold {
  font-size: var(--lv-fs-2xl); font-weight: var(--lv-fw-semi); margin: var(--lv-s1) 0 0;
}
main .row > [class*="col"].border.bg-white .small:first-child {
  color: var(--lv-muted); text-transform: uppercase; letter-spacing: .02em; font-size: var(--lv-fs-xs) !important;
}

/* ===========================================================================
   5 · TABLES & LISTING ROWS
   =========================================================================== */
/* Any raw <table> inside a screen scrolls horizontally instead of overflowing */
main table { width: 100%; }
.table-responsive, main .table-wrap { -webkit-overflow-scrolling: touch; }
/* Fallback for real <table>s that are NOT wrapped in .table-responsive (e.g.
   readiness, finance transfer info): on phones make the table itself a
   horizontally-scrollable block so it never forces page overflow. */
@media (max-width: 767.98px) {
  main table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.table thead th, main table thead th {
  background: var(--lv-surface-3); color: var(--lv-ink-2);
  font-weight: var(--lv-fw-med); border-bottom: 2px solid var(--lv-line);
  font-size: var(--lv-fs-sm);
}
.table td, .table th { font-size: var(--lv-fs-sm); vertical-align: middle; }
.table tbody tr:hover { background: var(--lv-primary-tint); }

/* Grid-based listing rows (dashboard / booking): tidy header + hover + zebra */
.rowitem.row:hover { background: var(--lv-primary-tint); }
/* Long unbroken values (site names, emails) wrap inside their column instead of
   bleeding into the neighbour at tablet grid widths. overflow-wrap:anywhere only
   breaks a token that would otherwise overflow — it never char-breaks short words,
   and badges below are explicitly kept whole. */
.rowitem .small { overflow-wrap: anywhere; }
[id$="-table"] .row.font-weight-bold, [id$="list-table"] .row.font-weight-bold {
  background: var(--lv-surface-3); border-radius: var(--lv-radius) var(--lv-radius) 0 0;
}
/* On phones, add a touch more separation between stacked rows. Deliberately a
   flat divider (not a per-row card box) so it also suits NESTED grids like the
   combined-route schedule→price template, where boxing each row would break the
   visual grouping. Those rows already self-label via inline .d-sm-none spans. */
@media (max-width: 575.98px) {
  .rowitem.row.border-bottom { padding-top: var(--lv-s2) !important; padding-bottom: var(--lv-s2) !important; }
  .rowitem.row.border-bottom:not(.bg-light) + .rowitem.row.border-bottom:not(.bg-light) { margin-top: var(--lv-s1); }
}

/* ===========================================================================
   6 · FORMS
   =========================================================================== */
label { font-size: var(--lv-fs-sm); font-weight: var(--lv-fw-med); color: var(--lv-ink-2); margin-bottom: var(--lv-s1); }
.form-control, .custom-select {
  height: 38px; font-size: var(--lv-fs-sm); color: var(--lv-ink);
  border: 1px solid var(--lv-line); border-radius: var(--lv-radius);
}
textarea.form-control { height: auto; min-height: 96px; }
.form-control:focus, .custom-select:focus {
  border-color: var(--lv-primary); box-shadow: 0 0 0 3px var(--lv-primary-tint);
}
/* was #9aa0a6, a fixed literal: 2.43 on --x-surface-2 and 2.64 on white. The ground follows
   the theme now (section 9j), so the placeholder ink has to as well. */
.form-control::placeholder { color: var(--x-ink-3); }
.input-group-text { background: var(--lv-surface-3); border-color: var(--lv-line); font-size: var(--lv-fs-sm); }

/* ===========================================================================
   7 · TABS  — horizontal scroll on narrow screens, modern underline
   =========================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--lv-line);
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.nav-tabs .nav-link {
  white-space: nowrap; border: 0; color: var(--lv-ink-2);
  font-weight: var(--lv-fw-med); border-bottom: 2px solid transparent;
  padding: var(--lv-s2) var(--lv-s4);
}
.nav-tabs .nav-link:hover { color: var(--lv-primary); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--lv-primary); background: transparent;
  border: 0; border-bottom: 2px solid var(--lv-primary);
}
.nav-pills .nav-link.active { background: var(--lv-primary); }

/* ===========================================================================
   8 · BUTTONS — touch targets, consistent radius, icon buttons
   =========================================================================== */
.btn {
  border-radius: var(--lv-radius); font-weight: var(--lv-fw-med);
  font-size: var(--lv-fs-sm); transition: var(--lv-transition);
}
.btn-lg { font-size: var(--lv-fs-md); }
.btn-sm { font-size: var(--lv-fs-xs); }
/* circular icon action buttons (approve/reject/view in listings) */
.btn.rounded-circle { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn.rounded-circle .feather { width: 16px; height: 16px; }

/* Comfortable tap targets on touch screens */
@media (max-width: 767.98px) {
  .btn:not(.rounded-circle):not(.btn-sm):not(.page-link) { min-height: 40px; }
  .btn.rounded-circle { width: 38px; height: 38px; }
}

/* ===========================================================================
   9 · BADGES / PAGINATION
   =========================================================================== */
.badge {
  font-size: var(--lv-fs-xs) !important; font-weight: var(--lv-fw-med);
  padding: 3px 9px; border-radius: var(--lv-radius-pill);
  white-space: normal; text-align: left; line-height: 1.5;
  /* never char-break a badge — wrap only at spaces between words */
  word-break: normal; overflow-wrap: normal;
}
.pagination { flex-wrap: wrap; gap: 2px; }
.page-link { border-radius: var(--lv-radius); border-color: var(--lv-line); }
/* dashboard "request-type" pill buttons wrap cleanly on mobile */
.request-type-bttn { margin-bottom: 4px; }

/* ===========================================================================
   10 · MODALS — full-height sheet on phones, comfortable on desktop
   =========================================================================== */
.modal-content { border: 0; border-radius: var(--lv-radius); box-shadow: var(--lv-shadow-3); }
.modal-header { border-top-left-radius: var(--lv-radius); border-top-right-radius: var(--lv-radius); align-items: center; }
.modal-header.bg-primary, .modal-header.bg-success, .modal-header.bg-danger { color: #fff; }
/* Close button legible on coloured headers */
.modal-header.bg-primary .close, .modal-header.bg-success .close,
.modal-header.bg-danger .close, .modal-header.text-white .close { color: #fff; opacity: .85; text-shadow: none; }
.modal-header.bg-primary .close:hover, .modal-header.text-white .close:hover { opacity: 1; }
.modal-full { min-width: 90%; }

@media (max-width: 575.98px) {
  .modal-dialog:not(.modal-sm) { margin: 0; max-width: 100%; min-height: 100%; }
  .modal-dialog.modal-lg, .modal-dialog.modal-full { min-width: 100%; }
  .modal-content { border-radius: 0; min-height: 100vh; }
}

/* ===========================================================================
   11 · MISC / UTILITIES
   =========================================================================== */
.feather { width: 16px; height: 16px; vertical-align: text-bottom; }
.pointer { cursor: pointer; }
hr { border-top-color: var(--lv-line-2); }
::selection { background: var(--lv-primary-tint); }

/* Keep long profile / cell text from breaking layout */
.ellipsis span, .profile-name span { max-width: 100%; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, .app-sidebar.sidebar, .app-backdrop { transition: none !important; }
}