/* ==========================================================================
   VAKILKARO ODR — THEME
   --------------------------------------------------------------------------
   A brand layer on top of Bootstrap 5.3. Bootstrap does all the layout work
   (container / row / col, spacing, tables, dropdowns, offcanvas, modals).
   This file sets colours, type and the components Bootstrap does not ship.

   Two rules were followed throughout:

     1. Every surface is opaque. No rgba() and no backdrop-filter on anything
        that sits above content, because a translucent header or drawer looks
        broken the moment you scroll behind it on a phone.

     2. No grid is re-implemented here. To divide space, use Bootstrap columns
        in the HTML:

            <div class="row g-3">
              <div class="col-12 col-lg-8"> ... </div>
              <div class="col-12 col-lg-4"> ... </div>
            </div>

   Contents
     01. Design tokens          <- change colours here
     02. Bootstrap variables
     03. Base and typography
     04. Application shell
     05. Sidebar navigation
     06. Mobile drawer
     07. Page header
     08. Statistic cards
     09. Section panels
     10. Tables
     11. Status badges
     12. Charts
     13. Alert rows
     14. Pipeline board
     15. Review cards and documents
     16. Toggle switch
     17. Forms and buttons
     18. Tabs
     19. Empty states
     20. Toasts
     21. Responsive
     22. Print
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Change a value here and it moves across every page.
   ========================================================================== */
:root {

  /* ---- Ink. The sidebar, headings and primary buttons. ---- */
  --brand-ink:              #212121;
  --brand-ink-hover:        #2E2E2E;
  --brand-ink-pressed:      #141414;

  /* ---- The accent. Used in four places only: the logo mark, the bar on the
          current sidebar item, the notification dot, the sidebar focus ring. */
  --brand-accent:           #FFC629;

  /* ---- Surfaces. These three must stay clearly apart from each other,
          otherwise cards stop reading as cards. ---- */
  --surface-page:           #F2F2F5;   /* the page behind everything */
  --surface-card:           #FFFFFF;   /* cards, panels, the header */
  --surface-sunken:         #F7F7F9;   /* table heads, pipeline columns, wells */
  --surface-hover:          #F4F4F6;   /* row hover */

  /* ---- Text ---- */
  --text-strong:            #101014;
  --text-body:              #3A3A44;
  /* Both measured against the three backgrounds this text lands on: white,
     the sunken tint, and the unread-row tint. #9A9AA5 failed all three. */
  --text-muted:             #56565F;
  --text-faint:             #676772;
  --text-on-ink:            #FFFFFF;
  --text-on-ink-muted:      #A0A0AC;

  /* ---- Borders. Two weights: hairline for inside a card, solid for the
          outside edge of one. ---- */
  --border-hairline:        #EDEDF1;
  --border-solid:           #E1E1E6;
  --border-strong:          #D2D2D9;
  --border-on-ink:          #26262E;

  /* ---- Elevation. This is what makes a card sit above the page. ---- */
  --elevation-card:         0 1px 2px rgba(16, 16, 20, 0.04),
                            0 1px 3px rgba(16, 16, 20, 0.06);
  --elevation-raised:       0 2px 4px rgba(16, 16, 20, 0.05),
                            0 4px 12px rgba(16, 16, 20, 0.08);
  --elevation-header:       0 1px 0 var(--border-solid);
  --elevation-drawer:       0 0 40px rgba(0, 0, 0, 0.35);

  /* ---- Status. These carry meaning, so they stay - but only on small
          badges, icons and figures, never as a card background. ---- */
  --status-success:         #15803D;
  --status-success-surface: #E9F6EE;
  --status-success-border:  #C3E6D1;

  --status-warning:         #A15C07;
  --status-warning-surface: #FDF3E4;
  --status-warning-border:  #F0DCBB;

  --status-danger:          #C11B1B;
  --status-danger-surface:  #FCECEC;
  --status-danger-border:   #F3CDCD;

  --status-info:            #1D4ED8;
  --status-info-surface:    #EBF0FC;
  --status-info-border:     #CCD9F7;

  /* ---- Shape ---- */
  --radius-large:           14px;
  --radius:                 10px;
  --radius-small:           8px;
  --radius-pill:            999px;

  /* ---- Measurements ---- */
  --sidebar-width:          262px;
  --header-height:          64px;
}


/* ==========================================================================
   02. BOOTSTRAP VARIABLES
   Feeding the tokens into Bootstrap's own variables, so its components pick
   them up rather than being restyled one at a time.
   ========================================================================== */
:root {
  --bs-body-font-family:  'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size:    0.875rem;
  --bs-body-font-weight:  400;
  --bs-body-line-height:  1.55;
  --bs-body-color:        var(--text-body);
  --bs-body-bg:           var(--surface-page);

  --bs-emphasis-color:    var(--text-strong);
  --bs-secondary-color:   var(--text-muted);
  --bs-tertiary-color:    var(--text-faint);

  --bs-border-color:            var(--border-solid);
  --bs-border-color-translucent: var(--border-hairline);
  --bs-border-radius:           var(--radius);
  --bs-border-radius-sm:        var(--radius-small);
  --bs-border-radius-lg:        var(--radius-large);

  --bs-link-color:              var(--brand-ink);
  --bs-link-hover-color:        var(--brand-ink-hover);
  --bs-link-color-rgb:          16, 16, 20;

  /* Tables. Bootstrap defaults these to transparent, which is why a table
     used to show the page background straight through it. */
  --bs-table-bg:                var(--surface-card);
  --bs-table-color:             var(--text-body);
  --bs-table-border-color:      var(--border-hairline);
  --bs-table-hover-bg:          var(--surface-hover);
  --bs-table-hover-color:       var(--text-strong);

  /* The mobile drawer. Set explicitly so it can never inherit a page colour. */
  --bs-offcanvas-bg:            var(--brand-ink);
  --bs-offcanvas-color:         var(--text-on-ink);
  --bs-offcanvas-border-color:  var(--border-on-ink);
  --bs-offcanvas-width:         278px;
}


/* ==========================================================================
   03. BASE AND TYPOGRAPHY
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--surface-page);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong);
  font-weight: 600;
  letter-spacing: -0.022em;
  margin-bottom: 0;
}

a { text-decoration: none; }

hr { border-color: var(--border-solid); opacity: 1; }

strong, b, .fw-semibold, .fw-medium { color: var(--text-strong); }

.text-muted { color: var(--text-muted) !important; }

::selection { background-color: var(--brand-ink); color: #fff; }

/* Focus. Visible for keyboard users, invisible for mouse users. */
:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.sidebar-navigation :focus-visible,
.offcanvas :focus-visible { outline-color: var(--brand-accent); }

/* Label that only a screen reader reads */
.visually-hidden-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   04. APPLICATION SHELL
   ========================================================================== */
.application-shell { min-height: 100vh; }

.application-main {
  min-width: 0;                 /* lets wide tables scroll instead of pushing */
  display: flex;
  flex-direction: column;
  background-color: var(--surface-page);
}

.application-content { flex: 1 1 auto; padding: 1.5rem 0 4rem; }


/* ==========================================================================
   05. SIDEBAR NAVIGATION
   Fully opaque. Its own scrollbar, so a long menu never pushes the page.
   ========================================================================== */
.sidebar-navigation {
  width: var(--sidebar-width);
  min-height: 100vh;
  max-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--brand-ink);
  border-right: 1px solid var(--border-on-ink);
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: #3A3A44 transparent;
}

.sidebar-navigation::-webkit-scrollbar { width: 6px; }
.sidebar-navigation::-webkit-scrollbar-thumb { background-color: #3A3A44; border-radius: 6px; }

.sidebar-navigation__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  height: var(--header-height);
  padding: 0 1.125rem;
  border-bottom: 1px solid var(--border-on-ink);
  background-color: var(--brand-ink);
  text-decoration: none;
}

/* The real logo, white version, on the near-black sidebar */
.sidebar-navigation__brand-logo {
  display: block;
  height: 26px;
  width: auto;
}

.sidebar-navigation__brand-caption {
  display: block;
  margin-top: 1px;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  /* Sits on the near-black sidebar, so it takes the light grey the
     section titles use — not --text-faint, which is tuned for white. */
  color: #8A8A96;
}

.sidebar-navigation__section-title {
  margin: 0.25rem 0.9rem 0.35rem;
  padding: 0.7rem 0.35rem 0.45rem;
  font-size: 0.585rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* On the near-black sidebar this has to be lighter, not darker.
     #5A5A66 measured 2.79; #8A8A96 gives 5.6. */
  color: #8A8A96;
}

.sidebar-navigation__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1px 0.65rem;
  padding: 0.56rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 1.3;
  color: #A8A8B4;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.sidebar-navigation__link:hover {
  background-color: #1C1C23;
  color: #fff;
}

.sidebar-navigation__link.is-current {
  background-color: #ffffff;
  color: var(--text-strong);
  font-weight: 500;
  border: 0;
  border-radius: 6px;
}

/* No border or accent bar on the active item — just a clean solid-white pill. */
.sidebar-navigation__link.is-current::before { content: none; }

.sidebar-navigation__link-icon {
  width: 17px;
  flex: none;
  text-align: center;
  font-size: 0.87rem;
  opacity: 0.9;
}

.sidebar-navigation__link.is-current .sidebar-navigation__link-icon { opacity: 1; }

.sidebar-navigation__link-count {
  margin-left: auto;
  min-width: 20px;
  padding: 0.1rem 0.42rem;
  border-radius: var(--radius-pill);
  background-color: #2C2C35;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.sidebar-navigation__link.is-current .sidebar-navigation__link-count {
  background-color: var(--brand-ink);
  color: #fff;
}


/* ==========================================================================
   06. MOBILE DRAWER
   Explicitly opaque at every level. Bootstrap's offcanvas inherits the body
   background otherwise, which is what made it look see-through.
   ========================================================================== */
.offcanvas.mobile-drawer {
  background-color: var(--brand-ink) !important;
  color: var(--text-on-ink);
  box-shadow: var(--elevation-drawer);
  border-right: 0;
}

.mobile-drawer .offcanvas-header {
  height: var(--header-height);
  padding: 0 1rem 0 1.125rem;
  background-color: var(--brand-ink);
  border-bottom: 1px solid var(--border-on-ink);
}

.mobile-drawer .offcanvas-body {
  padding: 0 0 1.5rem;
  background-color: var(--brand-ink);
}

/* Inside the drawer the sidebar is a plain block, not a sticky column */
.mobile-drawer .sidebar-navigation {
  position: static;
  width: 100%;
  min-height: auto;
  max-height: none;
  border-right: 0;
  padding-bottom: 0;
}

.mobile-drawer .sidebar-navigation__link.is-current::before { left: -0.65rem; }

/* The dark scrim behind the drawer */
.offcanvas-backdrop.show { opacity: 0.55; }


/* ==========================================================================
   07. PAGE HEADER
   Solid white. No translucency and no backdrop blur - on a phone those read
   as a rendering fault the moment content scrolls underneath.
   ========================================================================== */
.page-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: var(--surface-card);
  border-bottom: 1px solid var(--border-solid);
  padding: 0.7rem 0;
}

.page-header__title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
}

.page-header__subtitle {
  margin: 1px 0 0;
  font-size: 0.755rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.page-header__search-column { max-width: 340px; }

.page-header__search .form-control,
.page-header__search .input-group-text {
  background-color: var(--surface-sunken);
  border-color: var(--border-solid);
  font-size: 0.82rem;
}

.page-header__search .form-control::placeholder { color: var(--text-faint); }

.page-header__search:focus-within .form-control,
.page-header__search:focus-within .input-group-text {
  background-color: var(--surface-card);
  border-color: var(--brand-ink);
}

.page-header__icon-button {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background-color: var(--surface-card);
  color: var(--text-body);
  font-size: 0.9rem;
  transition: background-color 0.14s, color 0.14s, border-color 0.14s;
}

.page-header__icon-button:hover {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}

.page-header__icon-button-dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 8px; height: 8px;
  border: 2px solid var(--surface-card);
  border-radius: 50%;
  background-color: var(--brand-accent);
}

.page-header__avatar {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius);
  background-color: var(--brand-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ==========================================================================
   08. STATISTIC CARDS
   Lay these out with Bootstrap columns:
     <div class="col-6 col-xl-3"><div class="statistic-card"> ... </div></div>
   ========================================================================== */
.statistic-card {
  height: 100%;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-large);
  background-color: var(--surface-card);
  box-shadow: var(--elevation-card);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.statistic-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--elevation-raised);
}

.statistic-card__icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  background-color: var(--surface-sunken);
  color: var(--text-strong);
  font-size: 0.85rem;
}

.statistic-card__icon--attention {
  background-color: var(--brand-ink);
  color: #fff;
}

.statistic-card__value {
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.statistic-card__label {
  margin-top: 3px;
  font-size: 0.735rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.statistic-card__change {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.55rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-small);
  font-size: 0.7rem;
  font-weight: 500;
}

.statistic-card__change--up {
  background-color: var(--status-success-surface);
  color: var(--status-success);
}

.statistic-card__change--down {
  background-color: var(--status-danger-surface);
  color: var(--status-danger);
}


/* ==========================================================================
   09. SECTION PANELS
   ========================================================================== */
.section-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-large);
  background-color: var(--surface-card);
  box-shadow: var(--elevation-card);
  overflow: hidden;              /* keeps a flush table inside the radius */
}

.section-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.2rem;
  border-bottom: 1px solid var(--border-hairline);
  background-color: var(--surface-card);
}

.section-panel__title {
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.3;
}

.section-panel__action {
  font-size: 0.745rem;
  color: var(--text-muted);
}

a.section-panel__action:hover { color: var(--text-strong); }

.section-panel__body { flex: 1 1 auto; padding: 1.2rem; min-width: 0; }

/* FLEX SHRINK FIX
   .section-panel is a flex column, and a flex item defaults to
   min-width:auto - which means it refuses to shrink below its content. A wide
   table inside it therefore pushed the whole page sideways on a phone instead
   of scrolling inside its own wrapper. These two rules let it shrink so
   .table-responsive can do its job. */
.section-panel > * { min-width: 0; }
.table-responsive { max-width: 100%; }

.section-panel__body--flush { padding: 0; }

/* Label and value on one line */
.summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.815rem;
}

.summary-line:first-child { padding-top: 0; }
.summary-line:last-child  { padding-bottom: 0; border-bottom: 0; }

.summary-line__label { color: var(--text-muted); }

.summary-line__value {
  font-weight: 600;
  color: var(--text-strong);
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   10. TABLES
   Always wrap in Bootstrap's .table-responsive so a wide table scrolls
   sideways on a phone instead of squashing.
   ========================================================================== */
.data-table {
  margin-bottom: 0;
  background-color: var(--surface-card);
  --bs-table-bg: var(--surface-card);
}

.data-table > thead > tr > th {
  padding: 0.6rem 1.2rem;
  background-color: var(--surface-sunken);
  border-bottom: 1px solid var(--border-solid);
  font-size: 0.645rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.data-table > tbody > tr > td {
  padding: 0.78rem 1.2rem;
  border-bottom: 1px solid var(--border-hairline);
  background-color: var(--surface-card);
  font-size: 0.82rem;
  color: var(--text-body);
  vertical-align: middle;
}

.data-table > tbody > tr:last-child > td { border-bottom: 0; }

.data-table > tbody > tr:hover > td { background-color: var(--surface-hover); }

.data-table__row-link { cursor: pointer; }

.data-table__reference {
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.data-table__note {
  display: block;
  margin-top: 1px;
  font-size: 0.705rem;
  color: var(--text-muted);
}

.data-table__figure--positive { color: var(--status-success); font-weight: 500; }
.data-table__figure--warning  { color: var(--status-warning); font-weight: 500; }
.data-table__figure--negative { color: var(--status-danger);  font-weight: 500; }

/* A scrolling table keeps its header visible */
.table-responsive { border-radius: 0; }
.table-responsive::-webkit-scrollbar { height: 8px; }
.table-responsive::-webkit-scrollbar-track { background-color: var(--surface-sunken); }
.table-responsive::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 8px; }


/* ==========================================================================
   11. STATUS BADGES
   ========================================================================== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.27em 0.68em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.685rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

.status-badge--success {
  background-color: var(--status-success-surface);
  border-color: var(--status-success-border);
  color: var(--status-success);
}

.status-badge--warning {
  background-color: var(--status-warning-surface);
  border-color: var(--status-warning-border);
  color: var(--status-warning);
}

.status-badge--danger {
  background-color: var(--status-danger-surface);
  border-color: var(--status-danger-border);
  color: var(--status-danger);
}

.status-badge--info {
  background-color: var(--status-info-surface);
  border-color: var(--status-info-border);
  color: var(--status-info);
}

.status-badge--neutral {
  background-color: var(--surface-sunken);
  border-color: var(--border-solid);
  color: var(--text-muted);
}

.status-badge--dark {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}


/* ==========================================================================
   12. CHARTS
   Plain elements with a percentage width, so a template loop can drive them
   without a charting library.
   ========================================================================== */

/* ---- Vertical bars ---- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  height: 180px;
  padding-top: 0.5rem;
}

.bar-chart__column {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  height: 100%;
  min-width: 0;
}

.bar-chart__bar {
  width: 100%;
  max-width: 46px;
  border-radius: 6px 6px 2px 2px;
  background-color: var(--brand-ink);
  transition: background-color 0.18s ease;
}

.bar-chart__column:hover .bar-chart__bar { background-color: var(--brand-ink-hover); }

.bar-chart__value {
  font-size: 0.665rem;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.bar-chart__label { font-size: 0.665rem; color: var(--text-muted); }

/* ---- Funnel ---- */
.funnel-chart__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.funnel-chart__row:last-child { margin-bottom: 0; }

.funnel-chart__label {
  width: 6.6rem;
  flex: none;
  font-size: 0.775rem;
  color: var(--text-body);
}

.funnel-chart__track {
  flex: 1 1 auto;
  height: 24px;
  min-width: 0;
  border-radius: var(--radius-small);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}

.funnel-chart__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-small) 0 0 var(--radius-small);
  background-color: var(--brand-ink);
}

.funnel-chart__fill--success { background-color: var(--status-success); }

.funnel-chart__value {
  width: 3.9rem;
  flex: none;
  text-align: right;
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ---- Thin progress rows ---- */
.progress-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.79rem;
}

.progress-line:last-child { margin-bottom: 0; }

.progress-line__label { width: 6.4rem; flex: none; color: var(--text-body); }

.progress-line__track {
  flex: 1 1 auto;
  height: 8px;
  min-width: 0;
  border-radius: var(--radius-pill);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}

.progress-line__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--brand-ink);
}

.progress-line__value {
  width: 2.6rem;
  flex: none;
  text-align: right;
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   13. ALERT ROWS
   ========================================================================== */
.alert-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border-hairline);
}

.alert-row:first-child { padding-top: 0; }
.alert-row:last-child  { padding-bottom: 0; border-bottom: 0; }

.alert-row__icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background-color: var(--surface-sunken);
  color: var(--text-body);
  font-size: 0.85rem;
}

.alert-row__icon--success {
  background-color: var(--status-success-surface);
  border-color: var(--status-success-border);
  color: var(--status-success);
}

.alert-row__icon--warning {
  background-color: var(--status-warning-surface);
  border-color: var(--status-warning-border);
  color: var(--status-warning);
}

.alert-row__icon--danger {
  background-color: var(--status-danger-surface);
  border-color: var(--status-danger-border);
  color: var(--status-danger);
}

.alert-row__icon--info {
  background-color: var(--status-info-surface);
  border-color: var(--status-info-border);
  color: var(--status-info);
}

.alert-row__title {
  display: block;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.35;
}

.alert-row__note {
  display: block;
  margin-top: 1px;
  font-size: 0.725rem;
  color: var(--text-muted);
  line-height: 1.35;
}


/* ==========================================================================
   14. PIPELINE BOARD
   The columns are Bootstrap columns in the HTML. This styles only the box.
   ========================================================================== */
.pipeline-column {
  height: 100%;
  padding: 0.85rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-large);
  background-color: var(--surface-sunken);
}

.pipeline-column__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.665rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pipeline-column__count {
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-card);
  border: 1px solid var(--border-solid);
  color: var(--text-strong);
  letter-spacing: 0;
}

.pipeline-card {
  margin-bottom: 0.55rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background-color: var(--surface-card);
  box-shadow: var(--elevation-card);
  transition: box-shadow 0.16s ease;
}

.pipeline-card:last-child { margin-bottom: 0; }
.pipeline-card:hover { box-shadow: var(--elevation-raised); }

.pipeline-card__name {
  display: block;
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--text-strong);
}

.pipeline-card__note {
  display: block;
  margin-top: 1px;
  font-size: 0.705rem;
  color: var(--text-muted);
}


/* ==========================================================================
   15. REVIEW CARDS AND DOCUMENTS
   ========================================================================== */
.review-card {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-large);
  background-color: var(--surface-card);
  box-shadow: var(--elevation-card);
}

.review-card__name { font-size: 1rem; font-weight: 600; }

.review-card__meta {
  display: block;
  margin-top: 2px;
  font-size: 0.73rem;
  color: var(--text-muted);
}

.review-card__fact-label {
  display: block;
  font-size: 0.615rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.review-card__fact-value {
  display: block;
  margin-top: 2px;
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--text-strong);
}

.document-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background-color: var(--surface-card);
}

.document-row--missing {
  border-style: dashed;
  border-color: var(--border-strong);
  background-color: var(--surface-sunken);
}

.document-row--missing .alert-row__title { color: var(--text-muted); font-weight: 400; }

.document-row__icon {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-small);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.document-row:not(.document-row--missing) .document-row__icon {
  background-color: var(--status-info-surface);
  color: var(--status-info);
}


/* ==========================================================================
   16. TOGGLE SWITCH
   ========================================================================== */
.toggle-switch {
  position: relative;
  width: 44px; height: 26px;
  flex: none;
  padding: 0;
  border: 1px solid var(--status-success);
  border-radius: var(--radius-pill);
  background-color: var(--status-success);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(16, 16, 20, 0.2);
  transition: left 0.18s ease;
}

.toggle-switch.is-switched-off {
  background-color: var(--border-strong);
  border-color: var(--border-strong);
}

.toggle-switch.is-switched-off::after { left: 2px; }


/* ==========================================================================
   17. FORMS AND BUTTONS
   ========================================================================== */
.form-label {
  margin-bottom: 0.3rem;
  font-size: 0.765rem;
  font-weight: 500;
  color: var(--text-strong);
}

.form-control, .form-select {
  padding: 0.46rem 0.7rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  background-color: var(--surface-card);
  font-size: 0.83rem;
  color: var(--text-strong);
}

.form-control::placeholder { color: var(--text-faint); }

.form-control:focus, .form-select:focus {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px rgba(16, 16, 20, 0.08);
  background-color: var(--surface-card);
}

.form-control:disabled, .form-select:disabled {
  background-color: var(--surface-sunken);
  color: var(--text-faint);
}

.input-group-text {
  border-color: var(--border-solid);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.83rem;
}

.form-check-input {
  border-color: var(--border-strong);
  width: 1.05em; height: 1.05em;
  margin-top: 0.2em;
}

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

.form-check-input:focus {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px rgba(16, 16, 20, 0.08);
}

/* ---- Buttons ---- */
.btn {
  padding: 0.46rem 0.95rem;
  border-radius: var(--radius);
  font-size: 0.825rem;
  font-weight: 500;
  line-height: 1.45;
  transition: background-color 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
}

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.765rem; }
.btn-lg { padding: 0.6rem 1.3rem; font-size: 0.9rem; }

.btn:focus-visible { box-shadow: 0 0 0 3px rgba(16, 16, 20, 0.16); }

.btn-brand {
  background-color: var(--brand-ink);
  border: 1px solid var(--brand-ink);
  color: #fff;
}

.btn-brand:hover, .btn-brand:focus {
  background-color: var(--brand-ink-hover);
  border-color: var(--brand-ink-hover);
  color: #fff;
}

.btn-brand:active { background-color: var(--brand-ink-pressed) !important; }

.btn-brand-outline {
  background-color: var(--surface-card);
  border: 1px solid var(--border-solid);
  color: var(--text-strong);
}

.btn-brand-outline:hover, .btn-brand-outline:focus {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}

.btn-brand-success {
  background-color: var(--status-success);
  border: 1px solid var(--status-success);
  color: #fff;
}

.btn-brand-success:hover, .btn-brand-success:focus {
  background-color: #10662F;
  border-color: #10662F;
  color: #fff;
}

.btn-brand-danger {
  background-color: var(--surface-card);
  border: 1px solid var(--status-danger-border);
  color: var(--status-danger);
}

.btn-brand-danger:hover, .btn-brand-danger:focus {
  background-color: var(--status-danger);
  border-color: var(--status-danger);
  color: #fff;
}


/* ==========================================================================
   18. TABS
   ========================================================================== */
.nav-pills {
  gap: 0.4rem;
  padding: 0.3rem;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-large);
  background-color: var(--surface-card);
  box-shadow: var(--elevation-card);
  display: inline-flex;
}

.nav-pills .nav-link {
  padding: 0.42rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.815rem;
  font-weight: 500;
  color: var(--text-muted);
}

.nav-pills .nav-link:hover { background-color: var(--surface-hover); color: var(--text-strong); }

.nav-pills .nav-link.active {
  background-color: var(--brand-ink);
  color: #fff;
}


/* ---- Text sizes used inside panels, so the markup carries no inline
        font-size. Reach for these instead of style="font-size:..." ---- */
.text-size-body   { font-size: 0.825rem; }
.text-size-small  { font-size: 0.775rem; }
.text-size-caption{ font-size: 0.725rem; }
.text-size-micro  { font-size: 0.685rem; }

/* A larger alert icon, for the notice strips at the top of a page */
.alert-row__icon--large { width: 46px; height: 46px; font-size: 1.05rem; }

/* The value field on the settings rows */
.config-field { width: 130px; }
@media (max-width: 575.98px) { .config-field { width: 104px; } }


/* ==========================================================================
   19. EMPTY STATES
   ========================================================================== */
.empty-state { padding: 3rem 1.5rem; text-align: center; }

.empty-state__icon {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background-color: var(--surface-sunken);
  color: var(--text-faint);
  font-size: 1.2rem;
}

.empty-state__title { font-size: 0.95rem; font-weight: 600; }

.empty-state__note {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}


/* ==========================================================================
   20. TOASTS
   ========================================================================== */
.toast {
  border: 0;
  border-radius: var(--radius);
  background-color: var(--brand-ink);
  box-shadow: var(--elevation-raised);
}

.toast .toast-body { font-size: 0.82rem; color: #fff; }


/* ==========================================================================
   21. RESPONSIVE
   Bootstrap's breakpoints do the layout work, which is why the markup uses
   col-6 col-md-4 col-xl-3 rather than custom media queries. These rules only
   adjust type and fixed widths that cannot come from a column class.
   ========================================================================== */

/* ---- Tablet and below: the sidebar column is hidden, the drawer takes over */
@media (max-width: 991.98px) {
  .application-content { padding: 1.15rem 0 3rem; }
  .page-header { padding: 0.6rem 0; }
}

/* ---- Phone ---- */
@media (max-width: 767.98px) {
  :root { --header-height: 58px; }

  .page-header__title { font-size: 1.05rem; }
  .page-header__subtitle { display: none; }

  .section-panel__header { padding: 0.85rem 1rem; }
  .section-panel__body { padding: 1rem; }

  .statistic-card { padding: 0.9rem 0.95rem; }
  .statistic-card__value { font-size: 1.28rem; }
  .statistic-card__icon { width: 32px; height: 32px; margin-bottom: 0.6rem; }

  .data-table > thead > tr > th,
  .data-table > tbody > tr > td { padding-left: 1rem; padding-right: 1rem; }

  .bar-chart { height: 150px; gap: 0.4rem; }
  .bar-chart__value { font-size: 0.62rem; }

  .funnel-chart__label { width: 5.1rem; font-size: 0.735rem; }
  .funnel-chart__value { width: 3.2rem; font-size: 0.735rem; }
  .progress-line__label { width: 4.9rem; }

  .review-card { padding: 1rem; }

  .nav-pills { display: flex; width: 100%; }
  .nav-pills .nav-link { flex: 1 1 0; text-align: center; }
}

/* ---- Small phone ---- */
@media (max-width: 419.98px) {
  .statistic-card__value { font-size: 1.15rem; }
  .statistic-card__label { font-size: 0.7rem; }
  .bar-chart { height: 128px; }
  .page-header__avatar, .page-header__icon-button { width: 34px; height: 34px; }
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   22. PRINT
   Somebody will print a case list. Make it usable.
   ========================================================================== */
@media print {
  .sidebar-navigation,
  .page-header,
  .offcanvas,
  .toast-container,
  .btn { display: none !important; }

  body { background-color: #fff; }

  .section-panel,
  .statistic-card,
  .review-card {
    border: 1px solid #CCC;
    box-shadow: none;
    break-inside: avoid;
  }
}


/* ==========================================================================
   26. AUTHENTICATION PAGES
   --------------------------------------------------------------------------
   Taken from the ODR login design: a dark, lightly textured brand panel on
   the left, and the form on a faint dot grid on the right. The curved yellow
   underline is the same stroke the public site uses on a highlighted word.

   Below lg the brand panel is hidden and the logo moves above the card.
   ========================================================================== */

.authentication-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}


/* ---- Brand panel ------------------------------------------------------- */
.authentication-brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 52px;
  background-color: var(--brand-ink);
  color: #fff;
}

/* Texture, so the panel is not flat black */
.authentication-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 380px at 82% -10%, rgba(255, 255, 255, 0.055), transparent 62%),
    radial-gradient(560px 320px at 5% 108%, rgba(255, 255, 255, 0.04), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.019) 0 1px, transparent 1px 8px);
}

.authentication-brand-panel > * { position: relative; z-index: 1; }

.authentication-brand-panel__logo img { display: block; height: 34px; width: auto; }

.authentication-brand-panel__headline {
  max-width: 440px;
  font-size: clamp(28px, 2.9vw, 40px);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.14;
  color: #fff;
}

/* The curved highlight under one phrase */
.authentication-brand-panel__highlight {
  /* The underline is one SVG stroke, so the phrase has to stay on one line.
     Without this it breaks across two and draws as two separate strokes. */
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 0.10em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3,11.5 C46,4.5 118,3.6 197,7.8' fill='none' stroke='%23FFC629' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.36em;
  color: var(--brand-accent);
}

.authentication-brand-panel__description {
  max-width: 400px;
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: #A6A6AF;
}

.authentication-brand-panel__points { display: grid; gap: 14px; margin: 34px 0 0; padding: 0; list-style: none; }

.authentication-brand-panel__point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: #A6A6AF;
}

.authentication-brand-panel__point-icon { flex: none; margin-top: 2px; font-size: 16px; color: var(--brand-accent); }
.authentication-brand-panel__point b { font-weight: 500; color: #fff; }

.authentication-brand-panel__footnote {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.65;
  color: #85858F;
}


/* ---- Form column ------------------------------------------------------- */
.authentication-form-column {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 32px;
  background-color: var(--surface-page);
}

/* Faint dot grid, matching the public page canvas */
.authentication-form-column::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(13, 13, 15, 0.055) 1px, transparent 0);
  background-size: 22px 22px;
}

.authentication-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

/* Logo above the card where the brand panel is hidden */
.authentication-card__mobile-logo { display: none; margin-bottom: 26px; }
.authentication-card__mobile-logo img { display: block; height: 30px; width: auto; }

.authentication-card__badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  background-color: var(--brand-ink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.authentication-card__title { margin: 16px 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }

.authentication-card__subtitle { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--text-muted); }
.authentication-card__subtitle b { font-weight: 500; color: var(--text-strong); }

.authentication-step { display: none; }
.authentication-step.is-active { display: block; animation: authentication-step-in 0.32s cubic-bezier(0.22, 0.70, 0.28, 1); }

@keyframes authentication-step-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}


/* ---- Fields ------------------------------------------------------------ */
.authentication-field { margin-top: 26px; }

.authentication-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-ink);
}

.authentication-input-group {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1.5px solid var(--border-solid);
  border-radius: 12px;
  background-color: var(--surface-card);
  transition: border-color 0.18s, box-shadow 0.18s;
}

.authentication-input-group:focus-within {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, 0.07);
}

.authentication-input-group.has-error { border-color: var(--status-danger); }

.authentication-input-group__prefix {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-right: 1.5px solid var(--border-solid);
  background-color: var(--surface-sunken);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.authentication-input-group__field {
  flex: 1;
  min-width: 0;
  padding: 15px 16px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
}

.authentication-input-group__field::placeholder { font-weight: 300; color: var(--text-faint); }

/* The mobile field spaces its digits out */
.authentication-input-group__field--mobile { font-size: 17px; letter-spacing: 0.06em; }
.authentication-input-group__field--mobile::placeholder { letter-spacing: normal; }

/* Tick that appears once ten digits are in */
.authentication-input-group__tick {
  display: flex;
  align-items: center;
  padding-right: 15px;
  font-size: 18px;
  color: var(--status-success);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.22s cubic-bezier(0.22, 0.70, 0.28, 1), transform 0.22s cubic-bezier(0.22, 0.70, 0.28, 1);
}

.authentication-input-group.is-complete .authentication-input-group__tick { opacity: 1; transform: none; }

/* Reveal button on a password field */
.authentication-input-group__reveal {
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
}

.authentication-input-group__reveal:hover { color: var(--text-strong); }

.authentication-field__hint { margin-top: 8px; font-size: 11.5px; font-weight: 300; color: var(--text-muted); }

.authentication-field__error { margin-top: 8px; font-size: 12px; font-weight: 400; color: var(--status-danger); }

.authentication-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-muted);
  cursor: pointer;
}

.authentication-consent input {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--brand-ink);
}

.authentication-consent a { font-weight: 500; color: var(--brand-ink); text-decoration: underline; }


/* ---- One-time code ----------------------------------------------------- */
.one-time-code {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 26px;
}

.one-time-code__digit {
  width: 100%;
  height: 58px;
  padding: 0;
  border: 1.5px solid var(--border-solid);
  border-radius: 12px;
  background-color: var(--surface-card);
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: var(--text-strong);
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}

.one-time-code__digit:focus {
  outline: none;
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, 0.07);
}

.one-time-code__digit.is-filled { background-color: var(--surface-sunken); }

.one-time-code.has-error .one-time-code__digit {
  border-color: var(--status-danger);
  background-color: var(--status-danger-surface);
}

.one-time-code.has-error { animation: one-time-code-shake 0.4s cubic-bezier(0.22, 0.70, 0.28, 1); }

@keyframes one-time-code-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(2px); }
}

.authentication-code-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.authentication-resend {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brand-ink);
  text-decoration: underline;
  cursor: pointer;
}

.authentication-resend[disabled] { color: var(--text-faint); text-decoration: none; cursor: default; }

.authentication-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink);
  cursor: pointer;
}

.authentication-back-link:hover { text-decoration: underline; }


/* ---- Outcome screens --------------------------------------------------- */
.authentication-outcome { text-align: center; padding: 12px 0; }

.authentication-outcome__mark {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background-color: var(--status-success-surface);
  color: var(--status-success);
  font-size: 30px;
  animation: authentication-pop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}

.authentication-outcome__mark--blocked {
  background-color: var(--status-warning-surface);
  color: var(--status-warning);
}

@keyframes authentication-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.authentication-outcome__note { margin: 10px 0 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--text-muted); }


/* ---- Progress along the top of the application form -------------------- */
.authentication-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; }

.authentication-steps__bar { height: 4px; border-radius: 4px; background-color: var(--border-solid); margin-bottom: 7px; }

.authentication-steps__item.is-complete .authentication-steps__bar,
.authentication-steps__item.is-current  .authentication-steps__bar { background-color: var(--brand-ink); }

.authentication-steps__label { font-size: 11px; font-weight: 300; color: var(--text-muted); }
.authentication-steps__item.is-current .authentication-steps__label { font-weight: 500; color: var(--text-strong); }


/* ---- Buttons and footer ------------------------------------------------ */
.authentication-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 26px;
  padding: 15px 22px;
  border: 1.5px solid var(--brand-ink);
  border-radius: 12px;
  background-color: var(--brand-ink);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}

.authentication-button:hover { background-color: var(--brand-ink-hover); border-color: var(--brand-ink-hover); }
.authentication-button[disabled] { opacity: 0.55; cursor: default; }

.authentication-button--outline {
  margin-top: 12px;
  background-color: transparent;
  border-color: var(--border-solid);
  color: var(--brand-ink);
}

.authentication-button--outline:hover { background-color: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

.authentication-card__footer {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border-solid);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
}

.authentication-card__footer a { font-weight: 500; color: var(--brand-ink); text-decoration: underline; }


/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 991.98px) {
  .authentication-layout { grid-template-columns: 1fr; }
  .authentication-brand-panel { display: none; }
  .authentication-card__mobile-logo { display: block; }
  .authentication-form-column { padding: 32px 22px; align-items: flex-start; }
  .authentication-card { padding-top: 12px; }
}

@media (max-width: 575.98px) {
  .authentication-form-column { padding: 26px 18px; }
  .authentication-card__title { font-size: 23px; }
  .one-time-code { gap: 7px; }
  .one-time-code__digit { height: 50px; font-size: 19px; border-radius: 10px; }
  .authentication-input-group__field { padding: 13px 14px; }
}


/* ==========================================================================
   SIDEBAR ICONS
   Font Awesome glyphs in the accent yellow on the #212121 sidebar. The current
   item keeps its white pill, so its icon and text stay dark for contrast.
   ========================================================================== */
.sidebar-navigation__link-icon { color: var(--brand-accent); opacity: 0.92; }
.sidebar-navigation__link:hover .sidebar-navigation__link-icon { color: var(--brand-accent); opacity: 1; }
.sidebar-navigation__link.is-current .sidebar-navigation__link-icon { color: var(--text-strong); opacity: 1; }