/*
  TRS design system — replaces the Metronic (Bootstrap 3 "layout3" +
  Bootstrap 5 "Keen") themes. Header direction: "Quiet Priority" — white
  top bar, one brand accent (#a1237f, sampled from the Karibu logo mark),
  and only genuinely urgent header buttons keep a warning/danger tone.
  Content areas follow the real admin dashboard's card/badge/table
  language (tokens ported from the former assets-8/css/style.bundle.css).
  Zero external requests: no webfonts, no CDN, no icon fonts.
*/

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* shell */
  --radius: 6px;
  --base-size: 16px;
  --surface2: #f5f6f7;
  --surface: #ffffff;
  --content-bg: #f5f6f7;
  --bar-bg: #ffffff;
  --bar-border: #e7e9eb;
  --menu-bg: #ffffff;
  --menu-text: #545a61;
  --text: #1c2024;
  --text-soft: #3d4349;
  --muted: #838a91;
  --border: #e9ebed;
  --border-faint: #f1f2f4;
  --accent: #a1237f;
  --accent-strong: #841b68;
  --accent-wash: #f3e3ef;
  --search-bg: #f5f6f7;
  --meta: #838a91;
  --icon-bg: #f5f6f7;
  --icon-fg: #656b71;

  /* dashboard/content palette (from the real Keen dashboard, kept as the
     content-area language; header above stays Quiet Priority) */
  --k-primary: #1B84FF; --k-primary-subtle: #eaf2ff; --k-primary-ink: #0a3a75;
  --k-success: #17C653; --k-success-subtle: #d1f4dd; --k-success-ink: #094f21;
  --k-info: #7239EA; --k-info-subtle: #e3d7fb; --k-info-ink: #2e175e;
  --k-warning: #F6C000; --k-warning-subtle: #fdf2cc; --k-warning-ink: #624d00;
  --k-danger: #F8285A; --k-danger-subtle: #fed4de; --k-danger-ink: #631024;
  --k-gray-100: #F9F9F9; --k-gray-200: #F1F1F4; --k-gray-300: #DBDFE9;
  --k-gray-400: #C4CADA; --k-gray-500: #99A1B7; --k-gray-600: #78829D;
  --k-gray-700: #4B5675; --k-gray-800: #252F4A; --k-gray-900: #071437;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--base-size);
  color: var(--text);
  background: var(--surface2);
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Metronic's Bootstrap-2-era ".btn.green" color utility. trs-legacy-listing.css
   only re-styles it under body.trs-action-list, so anywhere else (e.g. the
   PNR Lookup modal shared via header.tpl, report/service/contact pages) it
   fell back to a plain unstyled grey button. Give it the brand color everywhere. */
.btn.green { color: #fff; border-color: var(--accent-strong); background: var(--accent-strong); }
.btn.green:hover, .btn.green:focus, .btn.green:active { color: #fff; border-color: var(--accent); background: var(--accent); }

/* =====================================================================
   APP SHELL — top bar + mega-menu (templates/general/header.tpl)
   ===================================================================== */
/* header.tpl's wrapper is <div class="trs-page-header page-header">.
   "page-header" must stay in the markup — Metronic's layout.js (still
   loaded, see docs/redesign-no-metronic-plan.md §6.1/6.2) delegates the
   real search-box expand/submit/enter-to-search behavior from
   $('.page-header'), so removing the class breaks that. But that same
   name collides with Bootstrap 3's own unrelated .page-header
   typography utility (margin:40px 0 20px), which was the stray-gap bug.
   Adding "trs-page-header" alongside it and targeting the COMBINED
   selector (specificity 0,2,0) beats Bootstrap's bare .page-header
   (0,1,0) regardless of which stylesheet loads later. */
.trs-page-header.page-header { margin: 0; padding: 0; border-bottom: none; }
.trs-topbar {
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.trs-brandrow { display: flex; align-items: center; gap: 10px; }
.trs-brandrow img.trs-logo { max-height: 52px; display: block; }

.trs-action-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trs-abtn {
  font-family: var(--font-ui);
  font-size: 0.875rem; font-weight: 650; padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
}
.trs-abtn:hover { border-color: var(--muted); text-decoration: none; }
.trs-abtn .n {
  background: rgba(0,0,0,0.08); border-radius: 999px; font-size: 0.75rem; padding: 1px 7px; font-weight: 700;
}
/* Quiet Priority rule: only the two genuinely urgent counters (someone is
   waiting on a person) keep a warning tone; everything else is neutral. */
.trs-abtn.urgent {
  background: #fff4f2; color: #a3382c; border-color: #f3d9d3;
}
.trs-abtn.urgent .n { background: rgba(163,56,44,0.14); color: #a3382c; }
.trs-abtn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

.trs-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--icon-bg); color: var(--icon-fg); font-size: 0.95rem; flex-shrink: 0; position: relative;
  border: none; cursor: pointer;
}
.trs-icon-btn .dotbadge {
  position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--bar-bg);
}
.trs-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash);
  border: 1px solid var(--bar-border); flex-shrink: 0; object-fit: cover;
}

.trs-menubar {
  background: var(--menu-bg);
  border-bottom: 1px solid var(--bar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.trs-menuitems-wrap { flex: 1; min-width: 0; }
.trs-menuitems {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
/* Bootstrap's .dropdown-menu{position:absolute;top:100%;left:0} anchors
   to the nearest POSITIONED ancestor. Metronic's old CSS provided that
   implicitly via a long .page-header .page-header-menu .hor-menu
   .navbar-nav > li chain that no longer exists in our markup — without
   this, top-level dropdowns anchor to the page's initial containing
   block instead of the menu item itself (renders far down/left of the
   trigger, easy to miss entirely). This one rule is the fix. */
.trs-menuitems > li { list-style: none; position: relative; }
.trs-menuitems > li > a {
  padding: 14px 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--menu-text);
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.trs-menuitems > li > a:hover { color: var(--text); text-decoration: none; }
.trs-menuitems > li.active > a { color: var(--accent-strong); border-bottom-color: var(--accent); }
.trs-menuitems .dropdown-menu { min-width: 200px; max-width: 260px; }
/* dropdown-submenu (2nd/3rd level, e.g. Administration > Users > ...):
   Bootstrap 3 core has no built-in nested-submenu support at all — this
   is what Metronic's CSS used to add. Cascade sideways, not downward. */
.trs-menuitems .dropdown-submenu { position: relative; }
.trs-menuitems .dropdown-submenu > .dropdown-menu {
  top: 0; left: 100%; margin-top: -1px;
}
.trs-menuitems .dropdown-submenu:hover > .dropdown-menu { display: block; }
.trs-menuitems .dropdown-menu > li.active > a,
.trs-menuitems .dropdown-menu > li.active > a:hover,
.trs-menuitems .dropdown-menu > li.active > a:focus {
  color: var(--accent-strong);
  background: var(--accent-wash);
  font-weight: 600;
}
/* legacy alias kept for any inline usage */
.trs-menuitem {
  padding: 14px 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--menu-text);
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.trs-menuitem:hover { color: var(--text); text-decoration: none; }
.trs-menuitem.current { color: var(--accent-strong); border-bottom-color: var(--accent); }
.trs-searchbox {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius);
  background: var(--search-bg); border: 1px solid var(--bar-border);
  font-size: 0.875rem; color: var(--meta); margin: 8px 0;
  min-width: 180px;
}
.trs-searchbox input {
  border: none; background: transparent; font-family: var(--font-ui); font-size: 0.875rem;
  color: var(--text); outline: none; width: 100%;
}

.trs-content {
  padding: 20px 22px; background: var(--content-bg);
  width: 80%; max-width: 1140px; margin: 0 auto; box-sizing: border-box;
}
.trs-content.narrow { max-width: 900px; }
/* Admin dashboard only: match .trs-menubar's box exactly (full-width,
   same 22px side padding) instead of the shared centered/capped measure
   above, so the dashboard's content edges line up with the header. */
.trs-content.full-bleed {
  width: 90%; max-width: none; padding-left: 22px; padding-right: 22px;
}

/* Page body width: every module page (migrated or not yet) wraps its
   content in Bootstrap's stock .container inside .page-content — give
   that shared wrapper the same ~80%-of-viewport measure as .trs-content
   above, instead of Bootstrap's edge-heavy 1170px/full-bleed default, so
   the whole app feels consistently laid out even before every page's own
   markup is individually migrated. Header/menu bars stay full-width on
   purpose — only the content body below them is constrained. */
.page-content > .container {
  width: 80%;
  max-width: 1140px;
  min-width: 0;
}
@media (max-width: 900px) {
  .page-content > .container, .trs-content { width: 94%; }
}

/* breadcrumb + page head */
.trs-crumb { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); margin-bottom: 14px; flex-wrap: wrap; }
.trs-crumb .sep { opacity: 0.6; }
.trs-crumb .here { color: var(--text-soft); font-weight: 600; }

.trs-page-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.trs-page-head-row h1, .trs-page-head-row h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.trs-page-head-row .sub { font-size: 0.8rem; color: var(--muted); margin-top: 2px; font-weight: 400; }
.trs-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.trs-alert {
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px; font-size: 0.85rem;
  display: flex; align-items: center; gap: 8px;
}
.trs-alert.success { background: var(--k-success-subtle); color: var(--k-success-ink); }
.trs-alert.danger { background: var(--k-danger-subtle); color: var(--k-danger-ink); }
.trs-alert.warning { background: var(--k-warning-subtle); color: var(--k-warning-ink); }
.trs-alert .close { margin-left: auto; cursor: pointer; opacity: 0.6; border: none; background: none; font-size: 1rem; }
.trs-alert .close:hover { opacity: 1; }

@media (max-width: 760px) {
  /* No mobile nav collapse yet (the old Metronic toggler was removed,
     see docs/redesign-no-metronic-checklist.md footer.tpl audit note) —
     let the mega-menu and action buttons wrap onto their own lines
     rather than disappear with no way to reach them. */
  .trs-searchbox { display: none; }
}

/* =====================================================================
   CARD / STAT / BADGE / TABLE LANGUAGE
   Ported from the real admin dashboard (formerly assets-8/css/style.bundle.css)
   ===================================================================== */
.kcard { background: #ffffff; border: 1px solid var(--k-gray-200); border-radius: 9px; overflow: hidden; }
.kcard + .kcard { margin-top: 16px; }
.kcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 20px 24px 14px;
}
.kcard-head .kcard-title { font-size: 1rem; font-weight: 700; color: var(--k-gray-900); }
.kcard-head .kcard-sub { font-size: 0.78rem; color: var(--k-gray-600); font-weight: 500; margin-top: 3px; }
.kcard-body { padding: 6px 24px 24px; }
.kcard-body.flush-top { padding-top: 0; }
.kcard-body.tight { padding: 4px 12px 16px; }

.segmented { display: inline-flex; align-items: center; gap: 4px; background: var(--k-gray-100); border-radius: 8px; padding: 3px; }
.segmented .seg-opt {
  font-size: 0.8rem; font-weight: 600; color: var(--k-gray-600); padding: 6px 14px;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: none; background: none;
}
.segmented .seg-opt .seg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.segmented .seg-opt.on { background: #ffffff; color: var(--k-primary); box-shadow: 0 1px 2px rgba(7,20,55,0.08); }
.segmented .seg-opt.on.warn { color: #92620f; }
.segmented .seg-opt.on.succ { color: #0a7a3d; }
/* tour-forms/view-normal.tpl's Update Log type toggles are legacy jQuery
   controls that add/remove Bootstrap's "btn-primary" class on click (see
   templates/tour-forms/js/view.tpl, untouched per the redesign plan's rule
   against editing working JS) — style that same class as the segmented
   "on" state so the existing click handler keeps working visually. */
.segmented .seg-opt.btn-primary { background: #ffffff; color: var(--k-primary); box-shadow: 0 1px 2px rgba(7,20,55,0.08); }

.kstat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kstat-row.compact { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.kstat-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kstat-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.kstat {
  background: var(--k-gray-100); border-radius: 8px; padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 14px; cursor: pointer; border: none; text-align: left;
  font-family: var(--font-ui); color: inherit;
}
.kstat:hover { background: #f1f3f7; text-decoration: none; }
.kstat .ksymbol {
  width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.kstat .ksymbol.primary { background: var(--k-primary-subtle); color: var(--k-primary); }
.kstat .ksymbol.success { background: var(--k-success-subtle); color: #0a7a3d; }
.kstat .ksymbol.info { background: var(--k-info-subtle); color: var(--k-info); }
.kstat .ksymbol.warning { background: var(--k-warning-subtle); color: #92620f; }
.kstat .ksymbol.danger { background: var(--k-danger-subtle); color: var(--k-danger); }
.kstat .kval { font-size: 1.9rem; font-weight: 700; color: var(--k-gray-900); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kstat .klabel { font-size: 0.85rem; color: var(--k-gray-600); font-weight: 500; margin-top: 2px; }

.kbadge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; line-height: 1.3; white-space: nowrap;
}
.kbadge-primary { background: var(--k-primary-subtle); color: var(--k-primary-ink); }
.kbadge-success { background: var(--k-success-subtle); color: var(--k-success-ink); }
.kbadge-info { background: var(--k-info-subtle); color: var(--k-info-ink); }
.kbadge-warning { background: var(--k-warning-subtle); color: var(--k-warning-ink); }
.kbadge-danger { background: var(--k-danger-subtle); color: var(--k-danger-ink); }
.kbadge-gray { background: var(--k-gray-200); color: var(--k-gray-700); }

table.ktable { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.ktable thead th {
  text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--k-gray-500); padding: 0 10px 12px; border-bottom: 1px solid var(--k-gray-200);
}
table.ktable thead th.num, table.ktable tbody td.num { text-align: right; }
table.ktable tbody td { padding: 14px 10px; border-bottom: 1px solid var(--k-gray-200); color: var(--k-gray-700); vertical-align: middle; }
table.ktable tbody tr:last-child td { border-bottom: none; }
table.ktable tbody tr:hover td { background: var(--k-gray-100); }
table.ktable td.strong, table.ktable .kcell-strong { color: var(--k-gray-900); font-weight: 600; }
table.ktable .kwho { display: flex; align-items: center; gap: 10px; }
table.ktable .kwho .kinitial {
  width: 32px; height: 32px; border-radius: 50%; background: var(--k-primary-subtle); color: var(--k-primary-ink);
  font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
table.ktable .kwho .kname { color: var(--k-gray-900); font-weight: 600; font-size: 0.86rem; }
table.ktable .kwho .ksub { color: var(--k-gray-500); font-size: 0.76rem; margin-top: 1px; }
table.ktable .ktotalrow td { border-top: 2px solid var(--k-gray-200); border-bottom: none; font-weight: 700; color: var(--k-gray-900); }

.kchart-bars { display: flex; align-items: flex-end; gap: 14px; height: 160px; padding: 6px 4px 0; }
.kchart-bars .kcb-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.kchart-bars .kcb-stack { width: 60%; max-width: 30px; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.kchart-bars .kcb-seg.leisure { background: var(--k-warning); }
.kchart-bars .kcb-seg.corporate { background: var(--k-success); }
.kchart-bars .kcb-label { font-size: 0.72rem; color: var(--k-gray-500); font-weight: 600; text-align: center; }

.kchart-donut { display: flex; align-items: center; gap: 22px; padding: 4px; flex-wrap: wrap; }
.kchart-donut .kdonut-ring {
  width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.kchart-donut .kdonut-ring::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: #fff; }
.klegend { font-size: 0.82rem; flex: 1; min-width: 0; }
.klegend .kl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.klegend .kl-row:last-child { margin-bottom: 0; }
.klegend .kl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.klegend .kl-name { color: var(--k-gray-600); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klegend .kl-val { font-weight: 700; color: var(--k-gray-900); font-variant-numeric: tabular-nums; margin-left: 10px; }
.ksparkline { display: block; width: 100%; height: 44px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-2.ratio-1-2 { grid-template-columns: 1fr 2fr; }
.grid-2.ratio-2-3 { grid-template-columns: 2fr 3fr; }

/* =====================================================================
   KPI band (dashboard-admin.tpl headline stat tiles)
   ===================================================================== */
.kkpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kkpi {
  background: #ffffff; border: 1px solid var(--k-gray-200); border-radius: 9px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; color: inherit;
}
a.kkpi:hover { text-decoration: none; border-color: var(--k-gray-300); }
.kkpi .kkpi-icon {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.kkpi .kkpi-icon.primary { background: var(--k-primary-subtle); color: var(--k-primary); }
.kkpi .kkpi-icon.success { background: var(--k-success-subtle); color: #0a7a3d; }
.kkpi .kkpi-icon.info { background: var(--k-info-subtle); color: var(--k-info); }
.kkpi .kkpi-icon.warning { background: var(--k-warning-subtle); color: #92620f; }
.kkpi .kkpi-icon.danger { background: var(--k-danger-subtle); color: var(--k-danger); }
.kkpi .kkpi-val { font-size: 1.7rem; font-weight: 700; color: var(--k-gray-900); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kkpi .kkpi-label { font-size: 0.82rem; color: var(--k-gray-600); font-weight: 500; }

/* =====================================================================
   Server-rendered SVG charts (donut + stacked bar), replacing the old
   conic-gradient/absolute-div hacks. Geometry is computed in PHP
   (modules/dashboard.php: donut_segments() / stacked_bar_chart()) —
   these rules are presentation only.
   ===================================================================== */
.kchart-donut-svg { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kchart-donut-svg .kdonut-svg-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.kchart-donut-svg .kdonut-svg-wrap svg { transform: rotate(-90deg); }
.kchart-donut-svg .kdonut-seg { transition: stroke-width 120ms ease; }
.kchart-donut-svg .kdonut-svg-wrap:hover .kdonut-seg { stroke-width: 11; opacity: 0.55; }
.kchart-donut-svg .kdonut-svg-wrap .kdonut-seg:hover { stroke-width: 15; opacity: 1; }
.kchart-donut-svg .kdonut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.kchart-donut-svg .kdonut-center .kdc-val { font-size: 0.95rem; font-weight: 700; color: var(--k-gray-900); }
.kchart-donut-svg .kdonut-center .kdc-label { font-size: 0.66rem; color: var(--k-gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.klegend .kl-row { cursor: default; }
.klegend .kl-pct { color: var(--k-gray-500); font-size: 0.74rem; margin-left: 8px; width: 32px; text-align: right; flex-shrink: 0; }

.kbars-svg { display: block; width: 100%; height: auto; }
.kbars-svg .kbar-seg { cursor: pointer; }
.kbars-svg .kbar-seg:hover { opacity: 0.82; }
.kbars-svg .kbar-target-line { stroke: var(--k-primary); stroke-width: 2; stroke-dasharray: 4 3; fill: none; }
.kbars-svg .kbar-gridline { stroke: var(--k-gray-200); stroke-width: 1; }
.kbars-svg .kbar-axis-label { font-size: 10px; fill: var(--k-gray-500); font-family: var(--font-ui); }
.kbars-svg title { font-family: var(--font-ui); }

/* Vertical rhythm between top-level content blocks (cards, alerts, grids
   of cards) that sit as direct siblings inside .trs-content. .kcard +
   .kcard alone only catches two cards touching directly — it misses a
   card followed by a .grid-2/.grid-3 of cards, or an alert followed by
   a card, which is why those runs used to sit flush against each other. */
.trs-content > .kcard + *,
.trs-content > .grid-2 + *,
.trs-content > .grid-3 + *,
.trs-content > .trs-alert + * { margin-top: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* =====================================================================
   FILTER BARS — only rendered by templates that truly have them
   ===================================================================== */
.kfilter { background: #ffffff; border: 1px solid var(--k-gray-200); border-radius: 9px; padding: 18px 22px; margin-bottom: 18px; }
.kfilter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 16px; align-items: end; }
.kfilter-grid .kf-field label { display: block; font-size: 0.74rem; font-weight: 600; color: var(--k-gray-600); margin-bottom: 5px; }
.kfilter-grid .kf-field .kfinput, .kfilter-grid select.kfinput {
  width: 100%; font-size: 0.82rem; font-family: var(--font-ui); padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--k-gray-300); background: #ffffff; color: var(--k-gray-800); box-sizing: border-box;
}
.kfilter-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.kfilter-simple { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.kfilter-simple .kf-field { min-width: 150px; }

.kbtn {
  font-family: var(--font-ui);
  font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 6px;
  border: 1px solid var(--k-gray-300); background: #fff; color: var(--k-gray-700);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
}
.kbtn:hover { text-decoration: none; border-color: var(--k-gray-400); }
.kbtn.kbtn-primary { background: var(--k-primary); border-color: var(--k-primary); color: #fff; }
.kbtn.kbtn-light { background: var(--k-gray-100); border-color: var(--k-gray-100); color: var(--k-gray-700); }

/* =====================================================================
   FORMS / DETAIL VIEWS / MISC (add-edit, view, permission tree, etc.)
   ===================================================================== */
.form-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.form-panel .fp-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.9rem; font-weight: 700; color: var(--text); }
.form-panel .fp-body { padding: 18px 20px; }
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.fgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.fgrid.cols-1 { grid-template-columns: 1fr; }
.ffield.span2 { grid-column: span 2; }
.ffield.span3 { grid-column: span 3; }
.ffield label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-soft); margin-bottom: 5px; }
.ffield label .req { color: var(--k-danger); margin-left: 2px; }
.ffield .hint { font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.ffield input[type=text], .ffield input[type=email], .ffield input[type=password],
.ffield input[type=number], .ffield input[type=date], .ffield select, .ffield textarea {
  width: 100%; font-size: 0.86rem; font-family: var(--font-ui); padding: 8px 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: #fff; color: var(--text); box-sizing: border-box;
}
.ffield textarea { resize: vertical; min-height: 70px; font-family: var(--font-ui); }
.ffield input[readonly], .ffield input[disabled] { color: var(--muted); background: var(--border-faint); }
.radiorow { display: flex; gap: 16px; align-items: center; padding-top: 6px; }
.radiorow label { font-size: 0.84rem; color: var(--text-soft); display: inline-flex; gap: 5px; align-items: center; font-weight: 500; }
.fp-actions { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--content-bg); }

.upload-zone {
  border: 1.5px dashed var(--border); border-radius: var(--radius); background: var(--content-bg);
  padding: 22px; text-align: center; color: var(--muted); font-size: 0.84rem;
}
.upload-zone strong { color: var(--accent-strong); }

.detail-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; }
.detail-card .dp-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-wash); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: var(--accent-strong); font-weight: 700; font-size: 1.2rem; }
.detail-card h4 { margin: 0 0 3px; font-size: 1rem; }
.detail-card .dp-code { font-size: 0.78rem; color: var(--muted); margin-bottom: 14px; }
.kv-list { text-align: left; border-top: 1px solid var(--border-faint); padding-top: 10px; }
.kv-list .kv-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-faint); font-size: 0.82rem; }
.kv-list .kv-row:last-child { border-bottom: none; }
.kv-list .kv-row .k { color: var(--muted); font-weight: 600; }
.kv-list .kv-row .v { color: var(--text-soft); text-align: right; }

.info-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
.info-panel .ip-head { padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 0.82rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; }
.info-panel .ip-body { padding: 14px 16px; }
.kv-inline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px; }
.kv-inline-grid .kvi .k { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 3px; }
.kv-inline-grid .kvi .v { font-size: 0.88rem; color: var(--text); font-weight: 600; }

.perm-group { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.perm-group .pg-head { padding: 10px 14px; background: var(--content-bg); font-size: 0.86rem; font-weight: 700; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 7px; }
.perm-page { border-top: 1px solid var(--border-faint); }
.perm-page .pp-head { padding: 8px 14px 8px 28px; font-size: 0.8rem; font-weight: 600; color: var(--text-soft); background: var(--surface); cursor: pointer; }
.perm-checks { padding: 10px 14px 14px 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; background: var(--surface); }
.perm-chk { font-size: 0.8rem; color: var(--text-soft); display: flex; align-items: flex-start; gap: 6px; }
.perm-chk input { margin-top: 2px; accent-color: var(--accent-strong); }
.perm-chk .pd { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 1px; }

.pager { display: flex; justify-content: center; gap: 4px; padding: 12px 0 2px; }
.pager span, .pager a { font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--border-faint); }
.pager span.on, .pager a.on { color: #fff; background: var(--accent-strong); border-color: var(--accent-strong); }

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
  .fgrid, .fgrid.cols-3 { grid-template-columns: 1fr; }
  .ffield.span2, .ffield.span3 { grid-column: span 1; }
  .grid-2, .grid-3, .grid-2.ratio-1-2, .grid-2.ratio-2-3 { grid-template-columns: 1fr; }
  .kv-inline-grid { grid-template-columns: 1fr 1fr; }
  .kstat-row, .kstat-row.compact, .kstat-row.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .kfilter-grid { grid-template-columns: 1fr 1fr; }
  .kkpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   PRINT DOCUMENTS (tour-forms: print / quotation / proforma / lpo)
   ===================================================================== */
.doc-page {
  background: #ffffff; color: #17151a; font-family: var(--font-ui); font-size: 12.5px;
  padding: 34px 40px 40px; max-width: 900px; margin: 0 auto;
}
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #17151a; padding-bottom: 14px; margin-bottom: 18px; }
.doc-head .doc-brand { display: flex; align-items: center; gap: 10px; }
.doc-head .doc-brand img.doc-logo { max-height: 40px; }
.doc-head .doc-brand .name { font-weight: 700; font-size: 1rem; }
.doc-head .doc-brand .addr { font-size: 0.72rem; color: #66606a; line-height: 1.5; margin-top: 2px; }
.doc-head .doc-meta { text-align: right; font-size: 0.78rem; line-height: 1.6; }
.doc-title { text-align: center; margin: 4px 0 20px; }
.doc-title h1 { font-size: 1.15rem; letter-spacing: 0.04em; text-decoration: underline; margin: 0; }
.doc-title .sub { font-size: 0.72rem; color: #66606a; margin-top: 3px; }
.doc-cols { display: grid; grid-template-columns: 1fr 220px; gap: 20px; margin-bottom: 18px; }
.doc-block strong { display: block; margin-bottom: 3px; }
.doc-sidebox { border: 1px solid #17151a; border-radius: 4px; }
.doc-sidebox table { width: 100%; font-size: 0.78rem; border-collapse: collapse; }
.doc-sidebox td { padding: 6px 9px; border-bottom: 1px solid #ddd; }
.doc-sidebox tr:last-child td { border-bottom: none; }
.doc-sidebox td:first-child { color: #66606a; }
.doc-sidebox td:last-child { text-align: right; font-weight: 600; }
table.doc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 16px; }
table.doc-table th { background: #f1eef0; border-bottom: 2px solid #17151a; padding: 7px 9px; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; }
table.doc-table td { padding: 8px 9px; border-bottom: 1px solid #ddd; vertical-align: top; }
table.doc-table tr.total-row td { border-top: 2px solid #17151a; border-bottom: none; font-weight: 700; }
.doc-status-stamp { display: inline-block; border: 1.5px dashed #a1237f; color: #a1237f; font-weight: 700; padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; letter-spacing: 0.04em; }
.doc-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 26px; padding-top: 14px; border-top: 1px solid #ccc; font-size: 0.72rem; color: #66606a; }

@media (min-width: 768px) {
  /* trs-theme.css loads before bootstrap.min.css, so match Bootstrap's
     own .modal-dialog specificity here or its 600px default wins the cascade. */
  .modal-dialog.modal-md { width: 760px; }
}
.doc-sign { margin-top: 40px; display: flex; gap: 60px; }
.doc-sign .sig { flex: 1; border-top: 1px solid #17151a; padding-top: 5px; font-size: 0.72rem; color: #66606a; }
.doc-note-box { font-size: 0.76rem; color: #444; background: #f7f6f7; border: 1px solid #e5e2e5; border-radius: 4px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.5; }

@media print {
  .trs-topbar, .trs-menubar { display: none; }
  .doc-page { padding: 0; }
}

.trs-scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  box-shadow: 0 6px 18px -6px rgba(28, 32, 36, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
  z-index: 1000;
}
.trs-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.trs-scroll-top:hover,
.trs-scroll-top:focus {
  color: var(--accent-strong);
  border-color: #dfb9d3;
  background: var(--accent-wash);
  outline: none;
}
@media print { .trs-scroll-top { display: none; } }

.trs-report-daterange-bar {
    margin-bottom: 1rem;
}

/* Report table portlets: title/actions row + DataTables header toolbar
   (page-length + search, relocated out of the table body) + a single
   bottom line holding the "Showing X of Y" info and pagination together. */
.trs-report-portlet > .portlet-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.trs-report-portlet > .portlet-title > .actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.trs-dt-toolbar,
.trs-dt-toolbar-target {
    display: flex;
    align-items: center;
    gap: 10px;
}
.trs-dt-toolbar .dataTables_length select {
    height: 32px;
    padding: 2px 6px;
}
.trs-dt-toolbar .dataTables_filter input {
    height: 32px;
    margin-left: 0;
    padding: 2px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
}
.trs-dt-tablefoot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.trs-dt-tablefoot .dataTables_info {
    float: none;
    padding-top: 0;
}
.trs-dt-tablefoot .dataTables_paginate {
    float: none;
}