/* =============================================================================
   theme.css — our own look for the site, on top of plain Bootstrap 5.3.
   (Bootstrap: MIT licence. Font: Plus Jakarta Sans, SIL Open Font Licence.
    Icons: Tabler Icons, MIT licence.)

   Load order in <head>:
     vendor/bootstrap/bootstrap.min.css
     vendor/tabler-icons/tabler-icons.min.css
     css/theme.css        ← this file
     css/blocks.css       (page building blocks)
     css/customer.css     (customer pages only)

   Contents:
     1. Font
     2. Colours and sizes (Bootstrap variables)
     3. Page layout: left menu, top bar, content
     4. Left menu items
     5. Cards
     6. Buttons
     7. Forms
     8. Tables, badges, alerts, modals, progress
     9. Small helper classes
   ========================================================================== */


/* ── 1. Font ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;               /* one variable font file = all weights */
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-latin.woff2") format("woff2");
}


/* ── 2. Colours and sizes ────────────────────────────────────────────────── */
/* Change the main colour here: --bs-primary + --bs-primary-rgb (+ section 6). */

:root,
[data-bs-theme=light] {
  --bs-primary: #5d87ff;    --bs-primary-rgb: 93, 135, 255;
  --bs-secondary: #49beff;  --bs-secondary-rgb: 73, 190, 255;
  --bs-success: #13deb9;    --bs-success-rgb: 19, 222, 185;
  --bs-info: #539bff;       --bs-info-rgb: 83, 155, 255;
  --bs-warning: #ffae1f;    --bs-warning-rgb: 255, 174, 31;
  --bs-danger: #fa896b;     --bs-danger-rgb: 250, 137, 107;
  --bs-light: #f6f9fc;      --bs-light-rgb: 246, 249, 252;
  --bs-dark: #2a3547;       --bs-dark-rgb: 42, 53, 71;

  /* Pale backgrounds (badges "bg-*-subtle", alerts) */
  --bs-primary-bg-subtle: #ecf2ff;
  --bs-secondary-bg-subtle: #e8f7ff;
  --bs-success-bg-subtle: #e6fffa;
  --bs-info-bg-subtle: #ebf3fe;
  --bs-warning-bg-subtle: #fef5e5;
  --bs-danger-bg-subtle: #fdede8;
  --bs-light-bg-subtle: #f6f9fc;

  --bs-primary-border-subtle: #c3d3ff;
  --bs-secondary-border-subtle: #b6e5ff;
  --bs-success-border-subtle: #a1f2e3;
  --bs-info-border-subtle: #bad7ff;
  --bs-warning-border-subtle: #ffdfa5;
  --bs-danger-border-subtle: #fdd0c4;

  /* Darker text on pale backgrounds (alerts) */
  --bs-primary-text-emphasis: #2c4fb8;
  --bs-secondary-text-emphasis: #1a77a8;
  --bs-success-text-emphasis: #08816b;
  --bs-info-text-emphasis: #275fb0;
  --bs-warning-text-emphasis: #9a6200;
  --bs-danger-text-emphasis: #b3472b;

  /* Text and page */
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-color: #5a6a85;          --bs-body-color-rgb: 90, 106, 133;
  --bs-heading-color: #2a3547;
  --bs-secondary-color: rgba(90, 106, 133, .75);
  --bs-secondary-bg: #eaeff4;
  --bs-tertiary-bg: #f6f9fc;
  --bs-link-color: #2a3547;          --bs-link-color-rgb: 42, 53, 71;
  --bs-link-hover-color: #5d87ff;    --bs-link-hover-color-rgb: 93, 135, 255;
  --bs-border-color: #ebf1f6;
  --bs-border-radius: 7px;
  --bs-border-radius-sm: 5px;
  --bs-border-radius-lg: 12px;

  /* Layout sizes used below */
  --app-sidebar-width: 270px;
  --app-topbar-height: 70px;
  --app-shadow: 0 0 2px 0 rgba(145, 158, 171, .3), 0 12px 24px -4px rgba(145, 158, 171, .12);
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  color: var(--bs-heading-color);
}
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.3125rem; }
h5, .h5 { font-size: 1.09375rem; }
h6, .h6 { font-size: .875rem; }

a { text-decoration: none; }


/* ── 3. Page layout ──────────────────────────────────────────────────────── */
/*
   <div id="main-wrapper">
     <aside class="left-sidebar">   menu, fixed on the left
     <div class="body-wrapper">     everything else
       <header class="topbar">      sticky bar at the top
       <div class="container-fluid"> page content
   On screens narrower than 1200px the menu is hidden and slides in when the
   ☰ button is pressed (assets/js/app.js adds class "show-sidebar" to #main-wrapper).
*/

.left-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  width: var(--app-sidebar-width);
  height: 100%;
  background: #fff;
  border-right: 1px solid var(--bs-border-color);
  transition: left .2s ease-in;
  display: flex;
  flex-direction: column;
}

.body-wrapper {
  min-height: 100vh;
  margin-left: var(--app-sidebar-width);
  transition: margin-left .2s ease-in;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #fff;
  padding: 0 24px;
}
.topbar .navbar {
  min-height: var(--app-topbar-height);
  flex-wrap: nowrap;
}

.body-wrapper > .container-fluid {
  padding: 24px;
  max-width: 1440px;   /* very wide screens: keep lines readable */
}

/* The ☰ / ✕ buttons */
.sidebartoggler,
.nav-icon-hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--bs-heading-color);
  font-size: 1.25rem;
  cursor: pointer;
}
.nav-icon-hover:hover,
.topbar .sidebartoggler:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}

/* Desktop: ☰ hides / shows the menu */
@media (min-width: 1200px) {
  #main-wrapper.sidebar-hidden .left-sidebar { left: calc(-1 * var(--app-sidebar-width)); }
  #main-wrapper.sidebar-hidden .body-wrapper { margin-left: 0; }
}

/* Tablet and phone: menu slides in over the page */
@media (max-width: 1199.98px) {
  .left-sidebar { left: calc(-1 * var(--app-sidebar-width)); box-shadow: none; }
  .body-wrapper { margin-left: 0; }
  #main-wrapper.show-sidebar .left-sidebar { left: 0; box-shadow: var(--app-shadow); }
  #main-wrapper.show-sidebar::after {            /* dark layer behind the menu */
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1025;
    background: rgba(42, 53, 71, .35);
  }
  .topbar { padding: 0 12px; }
  .body-wrapper > .container-fluid { padding: 16px 12px; }
}


/* ── 4. Left menu ────────────────────────────────────────────────────────── */

.brand-logo {
  min-height: var(--app-topbar-height);
  padding: 0 24px;
}

.left-sidebar .scroll-sidebar {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 24px 24px;
}

#sidebarnav {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Section titles ("BACK OFFICE") */
.nav-small-cap {
  margin-top: 24px;
  padding: 3px 0;
  color: var(--bs-heading-color);
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  text-transform: uppercase;
}
.nav-small-cap .nav-small-cap-icon { display: none; }

/* Menu links */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 2px;
  padding: 10px;
  border-radius: var(--bs-border-radius);
  color: var(--bs-heading-color);
  font-size: 14px;
  line-height: 25px;
  white-space: nowrap;
}
.sidebar-link span:first-child { display: flex; }
.sidebar-link .ti { flex-shrink: 0; font-size: 21px; }
.sidebar-link:hover {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
}
.sidebar-link.active,
.sidebar-link.active:hover {
  background: var(--bs-primary);
  color: #fff;
}

/* Sub-menus (only used by the static mock-up) */
#sidebarnav .first-level { list-style: none; padding: 0; }
#sidebarnav .first-level.collapse:not(.show):not(.in) { display: none; }
#sidebarnav .first-level .sidebar-link { padding: 8px 10px; }
.sidebar-link.has-arrow::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform .2s;
}
.sidebar-link.has-arrow[aria-expanded="true"]::after { transform: rotate(-135deg); }


/* ── 5. Cards ────────────────────────────────────────────────────────────── */

.card {
  --bs-card-spacer-y: 30px;
  --bs-card-spacer-x: 30px;
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 30px;
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-inner-border-radius: var(--bs-border-radius);
  --bs-card-title-color: var(--bs-heading-color);
  --bs-card-subtitle-color: var(--bs-body-color);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--app-shadow);
  margin-bottom: 24px;
}
/* Full-height cards side by side in a row:
   - column has its own bottom margin (mb-3, mb-4 …) → the card needs none;
   - column has no margin → keep a 24px gap below the card. */
.row > [class*="col"][class*="mb-"] > .card.h-100,
.row > [class*="col"][class*="mb-"] > a > .card.h-100 { margin-bottom: 0; }
.row > [class*="col"]:not([class*="mb-"]) > .card.h-100 {
  height: calc(100% - 24px) !important;
  margin-bottom: 24px;
}

.card-header { border-bottom: 1px solid var(--bs-border-color); }
.card-footer { border-top: 1px solid var(--bs-border-color); background: transparent; }
.card-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.card-subtitle { font-size: 14px; line-height: 24px; }
.card-header .card-title { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .card { --bs-card-spacer-y: 20px; --bs-card-spacer-x: 20px; --bs-card-cap-padding-x: 20px; }
}


/* ── 6. Buttons ──────────────────────────────────────────────────────────── */

.btn {
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 7px;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--bs-border-radius);
}
.btn-sm {
  --bs-btn-padding-x: 10px;
  --bs-btn-padding-y: 4px;
  --bs-btn-font-size: .8125rem;
}

.btn-primary {
  --bs-btn-bg: #5d87ff;          --bs-btn-border-color: #5d87ff;
  --bs-btn-hover-bg: #4f73d9;    --bs-btn-hover-border-color: #4a6ccc;
  --bs-btn-active-bg: #4a6ccc;   --bs-btn-active-border-color: #4665bf;
  --bs-btn-disabled-bg: #5d87ff; --bs-btn-disabled-border-color: #5d87ff;
  --bs-btn-focus-shadow-rgb: 93, 135, 255;
}
.btn-secondary {
  --bs-btn-color: #fff;          --bs-btn-hover-color: #fff;   --bs-btn-active-color: #fff;
  --bs-btn-bg: #49beff;          --bs-btn-border-color: #49beff;
  --bs-btn-hover-bg: #3ea2d9;    --bs-btn-hover-border-color: #3a98cc;
  --bs-btn-active-bg: #3a98cc;   --bs-btn-active-border-color: #3a98cc;
}
.btn-success {
  --bs-btn-color: #fff;          --bs-btn-hover-color: #fff;   --bs-btn-active-color: #fff;
  --bs-btn-bg: #13deb9;          --bs-btn-border-color: #13deb9;
  --bs-btn-hover-bg: #10bd9d;    --bs-btn-hover-border-color: #0fb294;
  --bs-btn-active-bg: #0fb294;   --bs-btn-active-border-color: #0fb294;
  --bs-btn-disabled-bg: #13deb9; --bs-btn-disabled-border-color: #13deb9;
}
.btn-info {
  --bs-btn-color: #fff;          --bs-btn-hover-color: #fff;   --bs-btn-active-color: #fff;
  --bs-btn-bg: #539bff;          --bs-btn-border-color: #539bff;
  --bs-btn-hover-bg: #4784d9;    --bs-btn-hover-border-color: #427ccc;
  --bs-btn-active-bg: #427ccc;   --bs-btn-active-border-color: #427ccc;
}
.btn-warning {
  --bs-btn-color: #fff;          --bs-btn-hover-color: #fff;   --bs-btn-active-color: #fff;
  --bs-btn-bg: #ffae1f;          --bs-btn-border-color: #ffae1f;
  --bs-btn-hover-bg: #d9941a;    --bs-btn-hover-border-color: #cc8b19;
  --bs-btn-active-bg: #cc8b19;   --bs-btn-active-border-color: #cc8b19;
}
.btn-danger {
  --bs-btn-color: #fff;          --bs-btn-hover-color: #fff;   --bs-btn-active-color: #fff;
  --bs-btn-bg: #fa896b;          --bs-btn-border-color: #fa896b;
  --bs-btn-hover-bg: #d5745b;    --bs-btn-hover-border-color: #c86e56;
  --bs-btn-active-bg: #c86e56;   --bs-btn-active-border-color: #c86e56;
  --bs-btn-disabled-bg: #fa896b; --bs-btn-disabled-border-color: #fa896b;
}

.btn-outline-primary {
  --bs-btn-color: #5d87ff;       --bs-btn-border-color: #5d87ff;
  --bs-btn-hover-bg: #5d87ff;    --bs-btn-hover-border-color: #5d87ff;
  --bs-btn-active-bg: #5d87ff;   --bs-btn-active-border-color: #5d87ff;
  --bs-btn-disabled-color: #5d87ff; --bs-btn-disabled-border-color: #5d87ff;
}
.btn-outline-secondary {
  --bs-btn-color: #5a6a85;       --bs-btn-border-color: #dfe5ef;
  --bs-btn-hover-color: #2a3547; --bs-btn-hover-bg: #f6f9fc; --bs-btn-hover-border-color: #dfe5ef;
  --bs-btn-active-color: #2a3547; --bs-btn-active-bg: #eaeff4; --bs-btn-active-border-color: #dfe5ef;
}
.btn-outline-success {
  --bs-btn-color: #0fb294;       --bs-btn-border-color: #13deb9;
  --bs-btn-hover-color: #fff;    --bs-btn-hover-bg: #13deb9; --bs-btn-hover-border-color: #13deb9;
  --bs-btn-active-color: #fff;   --bs-btn-active-bg: #13deb9; --bs-btn-active-border-color: #13deb9;
}
.btn-outline-danger {
  --bs-btn-color: #e06c4e;       --bs-btn-border-color: #fa896b;
  --bs-btn-hover-color: #fff;    --bs-btn-hover-bg: #fa896b; --bs-btn-hover-border-color: #fa896b;
  --bs-btn-active-color: #fff;   --bs-btn-active-bg: #fa896b; --bs-btn-active-border-color: #fa896b;
}
.btn-outline-warning {
  --bs-btn-color: #e09612;       --bs-btn-border-color: #ffae1f;
  --bs-btn-hover-color: #fff;    --bs-btn-hover-bg: #ffae1f; --bs-btn-hover-border-color: #ffae1f;
}
.btn-outline-info {
  --bs-btn-color: #539bff;       --bs-btn-border-color: #539bff;
  --bs-btn-hover-color: #fff;    --bs-btn-hover-bg: #539bff; --bs-btn-hover-border-color: #539bff;
}


/* ── 7. Forms ────────────────────────────────────────────────────────────── */

.form-label {
  font-weight: 600;
  color: var(--bs-heading-color);
}

.form-control,
.form-select {
  padding: 8px 16px;
  font-size: .875rem;
  color: var(--bs-body-color);
  border-color: #dfe5ef;
  border-radius: var(--bs-border-radius);
}
.form-select { padding-right: 38px; }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #aec3ff;
  box-shadow: 0 0 0 .25rem rgba(93, 135, 255, .25);
}
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.input-group-text {
  background: var(--bs-light);
  border-color: #dfe5ef;
  color: var(--bs-body-color);
  font-size: .875rem;
}
.form-text { color: var(--bs-secondary-color); }


/* ── 8. Tables, badges, alerts, modals, progress ─────────────────────────── */

.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-hover-bg: rgba(93, 135, 255, .04);
}
.table > :not(caption) > * > * { padding: 14px 16px; }
.table th,
.table thead th { color: var(--bs-heading-color); font-weight: 600; }
.table-light {
  --bs-table-bg: #f6f9fc;
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-color: var(--bs-heading-color);
}

.badge {
  --bs-badge-padding-x: 10px;
  --bs-badge-padding-y: 5px;
  --bs-badge-font-size: .8125rem;
  --bs-badge-font-weight: 500;
  --bs-badge-border-radius: var(--bs-border-radius);
}

.alert { --bs-alert-border-radius: var(--bs-border-radius); }

.modal {
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-footer-border-color: var(--bs-border-color);
}
.modal-title { font-weight: 600; }

.progress {
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: 20px;
}

.list-group { --bs-list-group-border-color: var(--bs-border-color); }

.dropdown-menu.content-dd { width: 360px; max-width: calc(100vw - 24px); }
.dropdown-menu {
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: var(--bs-border-radius);
  box-shadow: var(--app-shadow);
}


/* ── 9. Small helper classes ─────────────────────────────────────────────── */
/* Font sizes: smaller steps than Bootstrap's (fs-2 = 12px, fs-3 = 14px …). */

.fs-1 { font-size: .625rem !important; }
.fs-2 { font-size: .75rem !important; }
.fs-3 { font-size: .875rem !important; }
.fs-4 { font-size: 1rem !important; }
.fs-5 { font-size: 1.125rem !important; }
.fs-6 { font-size: 1.25rem !important; }
.fs-7 { font-size: 1.5rem !important; }
.fs-8 { font-size: 1.75rem !important; }
.fs-9 { font-size: 2rem !important; }

.fw-bolder { font-weight: 800 !important; }
.text-dark { color: var(--bs-heading-color) !important; }
.ms-n3 { margin-left: -1rem !important; }

.round-16 { width: 16px; height: 16px; }
.square-40 { width: 40px; height: 40px; flex-shrink: 0; }

.display-6 { font-size: 2.5rem; font-weight: 600; }

/* Number tiles (stat_tile() in lib.php): tighter, so 6 fit in a row */
.stat-tile .card-body { padding: 20px; }
.stat-tile .card-body > .d-flex { gap: 10px; }
.stat-tile h3 { font-size: 1.375rem; white-space: nowrap; }
.stat-tile .rounded-circle { padding: .7rem !important; flex-shrink: 0; }

/* Table headings stay on one line */
.table thead th { white-space: nowrap; }
/* In very narrow tiles the icon is hidden so the number always fits */
.stat-tile { container-type: inline-size; }
@container (max-width: 210px) {
  .stat-tile .rounded-circle { display: none; }
}