/* =========================================================================
   SolutionLabs Theme  —  Bootstrap 5 override
   -------------------------------------------------------------------------
   Drop-in re-skin for the legacy Acme/Bootstrap app.

   HOW TO USE
     Add this file AFTER Bootstrap's own stylesheet so it wins the cascade:

       <link rel="stylesheet" href="/path/to/bootstrap.min.css">
       <link rel="stylesheet" href="/path/to/solutionlabs-theme.css">
       <!-- Load Inter (or self-host it) -->
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link rel="stylesheet"
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">

   WHAT IT DOES
     - Remaps Bootstrap's CSS variables to the SolutionLabs foundation
       (measured from solutionlabs.co.uk): brand orange, Inter, neutral grays.
     - Overrides only the surfaces that carry brand: primary buttons, links,
       nav active state, focus rings, badges, cards, form controls.
     - Leaves layout/markup untouched — no HTML changes required.

   TOKENS (single source of truth)
   ========================================================================= */

:root {
  /* --- SolutionLabs brand palette --- */
  --sl-orange: #ed7203;
  --sl-orange-hover: #d16403;
  --sl-orange-active: #b85703;
  --sl-orange-soft: #fdf1e6;   /* tinted backgrounds, hover fills */
  --sl-ink: #070707;           /* headings / near-black */
  --sl-gray: #595756;          /* body copy */
  --sl-dark: #3a3a3a;          /* dark bands / footer */
  --sl-line: #ececea;          /* borders / dividers */
  --sl-surface: #faf9f7;       /* subtle section background */
  --sl-alert-info: #e8f5f4;
  --sl-alert-info-text: #2a8a82;


  /* Focus ring in rgb form for Bootstrap's box-shadow tokens */
  --sl-orange-rgb: 237, 114, 3;

  /* -------------------------------------------------------------------------
     Bootstrap 5 global variable remap
     These cascade to most components automatically.
     ------------------------------------------------------------------------- */
  --bs-primary: var(--sl-orange);
  --bs-primary-rgb: var(--sl-orange-rgb);

  --bs-body-color: var(--sl-gray);
  --bs-body-color-rgb: 89, 87, 86;
  --bs-body-bg: #ffffff;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.55;

  --bs-heading-color: var(--sl-ink);
  --bs-emphasis-color: var(--sl-ink);
  --bs-emphasis-color-rgb: 7, 7, 7;

  --bs-border-color: var(--sl-line);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;

  --bs-link-color: var(--sl-orange);
  --bs-link-color-rgb: var(--sl-orange-rgb);
  --bs-link-hover-color: var(--sl-orange-hover);
  --bs-link-hover-color-rgb: 209, 100, 3;

  --bs-secondary-bg: var(--sl-surface);
  --bs-tertiary-bg: var(--sl-surface);

  --bs-text-data-small: 0.75rem;
}

/* =========================================================================
   Typography
   ========================================================================= */

body {
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--sl-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1, .h1 { font-weight: 700; }

/* Muted text should read as the warm gray, not Bootstrap's cool gray */
.text-muted,
.text-body-secondary {
  color: var(--sl-gray) !important;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn-primary {
  --bs-btn-bg: var(--sl-orange);
  --bs-btn-border-color: var(--sl-orange);
  --bs-btn-hover-bg: var(--sl-orange-hover);
  --bs-btn-hover-border-color: var(--sl-orange-hover);
  --bs-btn-active-bg: var(--sl-orange-active);
  --bs-btn-active-border-color: var(--sl-orange-active);
  --bs-btn-disabled-bg: var(--sl-orange);
  --bs-btn-disabled-border-color: var(--sl-orange);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
}

.btn-outline-primary {
  --bs-btn-color: var(--sl-orange-hover);
  --bs-btn-border-color: var(--sl-orange);
  --bs-btn-hover-bg: var(--sl-orange);
  --bs-btn-hover-border-color: var(--sl-orange);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--sl-orange-active);
  --bs-btn-active-border-color: var(--sl-orange-active);
  --bs-btn-focus-shadow-rgb: var(--sl-orange-rgb);
}

.btn-link {
  --bs-btn-color: var(--sl-orange);
  --bs-btn-hover-color: var(--sl-orange-hover);
}

.btn {
  --bs-btn-border-radius: 0.5rem;
  font-weight: 500;
}

/* Keep the info button (the little "i" on the dashboard) neutral, not blue */
.btn-info {
  --bs-btn-bg: var(--sl-surface);
  --bs-btn-border-color: var(--sl-line);
  --bs-btn-color: var(--sl-gray);
  --bs-btn-hover-bg: #f0efec;
  --bs-btn-hover-border-color: var(--sl-line);
  --bs-btn-hover-color: var(--sl-ink);
}

/* =========================================================================
   Focus states  —  orange ring instead of Bootstrap blue
   ========================================================================= */

.form-control:focus,
.form-select:focus,
.btn:focus,
.btn:focus-visible,
.form-check-input:focus,
.page-link:focus,
a:focus-visible {
  border-color: var(--sl-orange);
  box-shadow: 0 0 0 0.2rem rgba(var(--sl-orange-rgb), 0.25);
  outline: 0;
}

.form-check-input:checked {
  background-color: var(--sl-orange);
  border-color: var(--sl-orange);
}

/* =========================================================================
   Navbar  —  clean, orange active/hover state
   ========================================================================= */

.navbar {
  border-bottom: 1px solid var(--sl-line);
  background-color: #ffffff !important;
}

.navbar .nav-link {
  color: var(--sl-gray);
  font-weight: 500;
  transition: color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .nav-link.show {
  color: var(--sl-orange);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--sl-orange);
  color: #ffffff;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--sl-orange-soft);
  color: var(--sl-orange-hover);
}

/* =========================================================================
   Cards, borders, dividers
   ========================================================================= */

.card {
  border: 1px solid var(--sl-line);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(7, 7, 7, 0.04);
}

.card-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--sl-line);
  font-weight: 600;
  color: var(--sl-ink);
}

hr {
  border-top-color: var(--sl-line);
  opacity: 1;
}

/* =========================================================================
   Badges, alerts, progress, links
   ========================================================================= */

.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--sl-orange) !important;
  color: #ffffff !important;
}

/* Re-tone the info alert (the "No data in the selected date range" box)
   from Bootstrap blue to a neutral, on-brand surface */
.alert-info {
  --bs-alert-bg: var(--sl-alert-info);
  --bs-alert-border-color: var(--sl-line);
  --bs-alert-color: var(--sl-alert-info-text);
}

.progress-bar {
  background-color: var(--sl-orange);
}

a {
  color: var(--sl-orange);
  text-decoration: none;
}
a:hover {
  color: var(--sl-orange-hover);
  text-decoration: underline;
}

/* =========================================================================
   Tables  —  quieter, readable rows for the data views
   ========================================================================= */

.table {
  --bs-table-hover-bg: var(--sl-orange-soft);
  --bs-table-border-color: var(--sl-line);
}

.table {
  td, th {
    &.text-smaller {
      font-size: var(--bs-text-data-small);
    }
  }
}

.table > thead {
  color: var(--sl-ink);
  border-bottom: 2px solid var(--sl-line);
}

/* =========================================================================
   Chart color helpers
   -------------------------------------------------------------------------
   Your donut/line charts are drawn by a JS lib, so they can't be themed by
   CSS alone. Feed these hex values into the chart config instead:

     Primary series ....... #ed7203  (brand orange)
     Secondary series ..... #3a3a3a  (charcoal)
     Tertiary / grid ...... #b8b6b3
     Warm highlight ....... #f0a75a
     Neutral series ....... #8a8886

   Use orange for the most important series only; keep the rest neutral.
   ========================================================================= */

/* =========================================================================
   Utility
   ========================================================================= */

.text-sl-orange { color: var(--sl-orange); }

/* Table column width helpers */
.col-xs  { width:  60px; }
.col-sm  { width:  80px; }
.col-md  { width: 110px; }
.col-lg  { width: 140px; }

/* Truncate overflowing cell text to a single line with ellipsis */
.text-collapsed {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   v2 layout — top bar
   ========================================================================= */

body { background-color: var(--sl-surface); }

.v2-topbar {
    background: #ffffff;
    border-bottom: 1px solid var(--sl-line);
    padding: 0 1.5rem;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.v2-topbar .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sl-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.v2-topbar .brand span { color: var(--sl-orange); }

.v2-topbar .client-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sl-surface);
    border: 1px solid var(--sl-line);
    border-radius: 0.5rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sl-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.v2-topbar .client-initial {
    background: var(--sl-orange);
    color: #fff;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.v2-search {
    flex: 1;
    max-width: 340px;
    margin-left: auto;
}

.v2-search-wrap { position: relative; }

.v2-search-wrap .fa-magnifying-glass {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sl-gray);
    font-size: 0.8rem;
}

.v2-search input {
    border-radius: 0.5rem;
    border: 1px solid var(--sl-line);
    background: var(--sl-surface);
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    width: 100%;
    color: var(--sl-ink);
}

.v2-search input:focus {
    outline: none;
    border-color: var(--sl-orange);
    box-shadow: 0 0 0 0.15rem rgba(237, 114, 3, 0.2);
}

.v2-classic-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sl-gray);
    background: var(--sl-surface);
    border: 1px solid var(--sl-line);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.v2-classic-badge:hover {
    color: var(--sl-orange);
    border-color: var(--sl-orange);
}

/* =========================================================================
   v2 layout — secondary nav
   ========================================================================= */

.v2-navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--sl-line);
    padding: 0 1.5rem;
}

.v2-navbar .nav-link {
    color: var(--sl-gray);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.v2-navbar .nav-link:hover,
.v2-navbar .nav-link.active {
    color: var(--sl-orange);
    border-bottom-color: var(--sl-orange);
    background: transparent;
}

.v2-navbar .dropdown-menu {
    border: 1px solid var(--sl-line);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(7, 7, 7, 0.08);
    padding: 0.25rem 0;
    margin-top: 0;
}

.v2-navbar .dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    color: var(--sl-gray);
}

.v2-navbar .dropdown-item:hover {
    background: var(--sl-orange-soft);
    color: var(--sl-orange);
}

/* =========================================================================
   v2 layout — admin secondary nav
   ========================================================================= */

.v2-admin-navbar {
    background: var(--sl-surface);
    border-bottom: 1px solid var(--sl-line);
    padding: 0 1.5rem;
}

.v2-admin-navbar .nav-link {
    color: var(--sl-gray);
    font-weight: 500;
    font-size: 0.82rem;
    padding: 0.5rem 0.8rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.v2-admin-navbar .nav-link:hover,
.v2-admin-navbar .nav-link.active {
    color: var(--sl-orange);
    border-bottom-color: var(--sl-orange);
    background: transparent;
}

.v2-admin-navbar .dropdown-menu {
    border: 1px solid var(--sl-line);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(7, 7, 7, 0.08);
    padding: 0.25rem 0;
    margin-top: 0;
}

.v2-admin-navbar .dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    color: var(--sl-gray);
}

.v2-admin-navbar .dropdown-item:hover {
    background: var(--sl-orange-soft);
    color: var(--sl-orange);
}

/* =========================================================================
   v2 layout — page content
   ========================================================================= */

.v2-main {
    padding: 2rem 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* =========================================================================
   v2 layout — user menu / topbar dropdown
   ========================================================================= */

.v2-user-dropdown {
    color: var(--sl-ink);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0;
}

.v2-user-dropdown-menu {
    border: 1px solid var(--sl-line);
    border-radius: 0.5rem;
    min-width: 180px;
}

/* =========================================================================
   v2 layout — client switcher
   ========================================================================= */

.v2-client-chip-clickable { cursor: pointer; }

.v2-client-badge {
    font-size: 0.65rem;
}

/* =========================================================================
   Dashboard
   ========================================================================= */

.dash-card {
    background: #fff;
    border: 1px solid var(--sl-line);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.dash-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sl-gray);
    margin-bottom: 0;
}

.dash-chart-wrap {
    position: relative;
    height: 260px;
}

.dash-donut-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.dash-donut-canvas-wrap {
    position: relative;
    flex-shrink: 0;
    width: 160px;
    height: 160px;
}

.dash-donut-total {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dash-donut-total span:first-child {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sl-ink);
    line-height: 1;
}

.dash-donut-total span:last-child {
    font-size: 0.7rem;
    color: var(--sl-gray);
}

.dash-legend { list-style: none; padding: 0; margin: 0; }

.dash-legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--sl-gray);
    margin-bottom: 0.45rem;
    cursor: pointer;
}

.dash-legend li:last-child { margin-bottom: 0; }

.dash-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-legend-pct {
    margin-left: auto;
    font-weight: 600;
    color: var(--sl-ink);
    font-variant-numeric: tabular-nums;
}

.dash-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dash-filter-bar h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--sl-ink);
}

.dash-filter-bar p {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--sl-gray);
}

.dash-date-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--sl-line);
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
}

.dash-date-range input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--sl-ink);
    width: 88px;
}

.dash-date-sep { color: var(--sl-gray); }

.dash-apply-btn {
    background: var(--sl-orange);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background 0.15s;
}

.dash-apply-btn:hover { background: var(--sl-orange-hover, #c96300); }

.dash-spinner {
    display: none;
    color: var(--sl-gray);
    font-size: 0.85rem;
    align-items: center;
    gap: 0.4rem;
}

.dash-spinner.active { display: flex; }

.v2-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(7, 7, 7, 0.4);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.v2-modal-backdrop.open { display: flex; }

.v2-modal {
    background: #fff;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 860px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(7, 7, 7, 0.18);
}

.v2-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--sl-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-modal-header h5 { margin: 0; font-weight: 600; font-size: 1rem; }

.v2-modal-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--sl-gray);
    cursor: pointer;
    line-height: 1;
}

.v2-modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; }
.v2-modal-body table { width: 100%; font-size: 0.875rem; }
.v2-modal-body th { font-weight: 600; padding: 0.4rem 0.5rem; border-bottom: 2px solid var(--sl-line); }
.v2-modal-body td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--sl-line); vertical-align: middle; }
.v2-modal-body tfoot td,
.v2-modal-body tfoot th { border-bottom: none; font-weight: 700; }

/* =========================================================================
   Manual PCN — photo upload drop zone
   ========================================================================= */

.manual-pcn-dropzone {
    border: 2px dashed var(--sl-line);
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
}

.manual-pcn-dropzone.drag-over {
    border-color: var(--sl-orange);
    background: var(--sl-orange-soft);
}

.manual-pcn-photo-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--sl-line);
    font-size: 0.875rem;
}

.manual-pcn-photo-item:last-child { border-bottom: none; }

.manual-pcn-photo-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.manual-pcn-photo-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sl-gray);
}

/* =========================================================================
   Typeahead
   ========================================================================= */

.typeahead-wrap { position: relative; }

.typeahead-wrap .typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--sl-line);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1050;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,.08);
}

.typeahead-wrap .typeahead-dropdown li {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    list-style: none;
}

.typeahead-wrap .typeahead-dropdown li:hover,
.typeahead-wrap .typeahead-dropdown li.active {
    background: var(--sl-orange-soft);
    color: var(--sl-orange);
}