/* ==========================================================================
   KOI Continuity — application theme (2026 refresh)
   Loaded LAST in layouts/admin.blade.php: this file is the canonical skin.
   It modernizes the AdminLTE 2 / Bootstrap 3 admin to match the public
   frontend (charcoal + koi gold). Put ALL new custom CSS here — the legacy
   files (custom_style.css, _all-skins) are kept only for layout plumbing.
   ========================================================================== */

:root {
    --koi-gold: #c9a227;
    --koi-gold-dark: #a9871c;
    --koi-gold-soft: #f7f1de;
    --koi-ink: #1c1c1c;
    --koi-ink-2: #242424;
    --koi-kpi: #3a4250;   /* sober dark slate for dashboard KPI tiles */
    --koi-bg: #ffffff;
    --koi-card: #ffffff;
    --koi-line: #e6e8ec;
    --koi-text: #1f2430;
    --koi-muted: #6b7280;
    --koi-danger: #d64545;
    --koi-success: #2e9e5b;
    --koi-radius: 10px;
    --koi-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 16px rgba(16, 24, 40, .06);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body,
.wrapper,
.content-wrapper {
    background-color: var(--koi-bg) !important;
    color: var(--koi-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* comfortable reading size app-wide (Bootstrap 3 default is 14px) */
body { font-size: 15px; }

h1, h2, h3, h4, h5, .box-title {
    font-family: inherit;
    color: var(--koi-text);
}

a { color: var(--koi-gold-dark); }
a:hover, a:focus { color: var(--koi-gold); text-decoration: none; }

/* NB: .layout-top-nav .content-wrapper (AdminLTE) outranks a bare class —
   keep the layout-qualified selector or the padding silently loses. */
.layout-top-nav .content-wrapper,
.content-wrapper {
    padding: 12px 0 40px !important;   /* ~20px gap between header and breadcrumb */
    margin-top: 0 !important;          /* kill custom_style.css leftover fixed-header offset */
    min-height: calc(100vh - 130px) !important;
}

/* Content side padding — matches the header (site-header.css) per group:
     admin working pages -> 5%
     profile / login / forgot (.wide-gutter, admin layout) -> 15% */
.layout-top-nav .content-wrapper .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 5%;
    padding-right: 5%;
}
.wide-gutter .content-wrapper .container { padding-left: 15%; padding-right: 15%; }

@media (max-width: 767px) {
    .layout-top-nav .content-wrapper .container,
    .wide-gutter .content-wrapper .container { padding-left: 18px !important; padding-right: 18px !important; }
}

/* --------------------------------------------------------------------------
   Boxes -> modern cards
   -------------------------------------------------------------------------- */
.box {
    background: var(--koi-card);
    border: 1px solid var(--koi-line) !important;
    border-top: 1px solid var(--koi-line) !important;   /* kill AdminLTE color strip */
    border-radius: var(--koi-radius);
    box-shadow: var(--koi-shadow) !important;
    margin-bottom: 22px;
}

.box-header,
.box .box-header,
.box-header.with-border {
    background: #fff !important;
    color: var(--koi-text) !important;
    border-bottom: 1px solid var(--koi-line);
    border-radius: var(--koi-radius) var(--koi-radius) 0 0;
    padding: 12px 16px 12px 18px;
    position: relative;
}

.box-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 4px;
    background: var(--koi-gold);
}

.box-header .box-title,
.box-header h3 {
    color: var(--koi-text) !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .2px;
}

.box-body { border-radius: 0 0 var(--koi-radius) var(--koi-radius); padding: 16px 18px; }

/* legacy views that painted headers with the old brand yellow */
.box-header.with-border[style],
.bg-yellow, .callout.callout-warning { background: var(--koi-gold-soft) !important; color: var(--koi-ink) !important; }

/* dashboard "card" convention (inline-styled darkkhaki in several views) */
.card {
    background: var(--koi-card);
    border: 1px solid var(--koi-line) !important;
    border-radius: var(--koi-radius);
    box-shadow: var(--koi-shadow);
}

.card-header, .content-wrapper .card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--koi-line) !important;
    border-radius: var(--koi-radius) var(--koi-radius) 0 0;
    color: var(--koi-text) !important;
    font-weight: 600 !important;
    padding: 12px 16px 12px 18px;
    position: relative;
}

.card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 4px;
    background: var(--koi-gold);
}

/* dashboard KPI tiles (was flat gray #afb0b0) */
.content-wrapper .custm_clr_cards {
    background: var(--koi-ink) !important;
    border-radius: var(--koi-radius);
}
.content-wrapper .custm_clr_cards,
.content-wrapper .custm_clr_cards h1,
.content-wrapper .custm_clr_cards h2,
.content-wrapper .custm_clr_cards h3,
.content-wrapper .custm_clr_cards p,
.content-wrapper .custm_clr_cards span,
.content-wrapper .custm_clr_cards b { color: #fff !important; }
.content-wrapper .custm_clr_cards a { color: var(--koi-gold) !important; }

/* AdminLTE user dropdown header (was old brand yellow #c9bf2c) */
.skin-blue .main-header li.user-header { background-color: var(--koi-ink-2) !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 8px !important;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-primary {
    background-color: var(--koi-gold) !important;
    border-color: var(--koi-gold) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
    background-color: var(--koi-gold-dark) !important;
    border-color: var(--koi-gold-dark) !important;
}

.btn-default {
    background-color: #fff !important;
    border: 1px solid #d4d7dd !important;
    color: var(--koi-text) !important;
    font-weight: 500 !important;
}

.btn-default:hover { background-color: var(--koi-bg) !important; }

.btn-danger {
    background-color: #fff !important;
    border: 1px solid var(--koi-danger) !important;
    color: var(--koi-danger) !important;
}

.btn-danger:hover { background-color: var(--koi-danger) !important; color: #fff !important; }

.btn-success { background-color: var(--koi-success) !important; border-color: var(--koi-success) !important; }

/* action icons in table rows: uniform icon buttons, always on one line */
.table td:has(a.action_icons) {
    white-space: nowrap;
    min-width: 150px;
    width: 150px;
}

.action_icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--koi-line);
    border-radius: 8px;
    margin-right: 6px;
    vertical-align: middle;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.action_icons:hover {
    background: var(--koi-gold-soft);
    border-color: var(--koi-gold);
    box-shadow: 0 2px 6px rgba(201, 162, 39, .2);
}

/* neutralize the legacy colored-circle icons from custom_style.css
   (td .fa_icons had red/yellow/green backgrounds, padding and scale-on-hover) */
td .fa_icons,
.action_icons .fa_icons,
.fa_icons {
    background: transparent !important;
    border-radius: 0;
    color: var(--koi-gold-dark) !important;
    font-size: 17px !important;
    font-weight: 900 !important;   /* heavier glyph */
    height: auto !important;
    margin: 0 !important;
    opacity: 1 !important;
    padding: 0 !important;
    width: auto !important;
}

.fa_icons:hover { transform: none; }
.action_icons:hover .fa_icons { color: var(--koi-ink) !important; }
/* delete action reads as destructive on hover */
.action_icons.confirmdelete:hover { background: #fdeeee; border-color: var(--koi-danger); }
.action_icons.confirmdelete:hover .fa_icons { color: var(--koi-danger) !important; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
label { color: var(--koi-text); font-weight: 600; font-size: 14px; }

.form-control {
    border: 1px solid #d4d7dd;
    border-radius: 8px !important;
    box-shadow: none;
    color: var(--koi-text);
    font-family: inherit !important;
    height: 38px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

textarea.form-control { height: auto; }

.form-control:focus {
    border-color: var(--koi-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

.help-block, .text-danger { font-size: 13px; }
.has-error .form-control { border-color: var(--koi-danger); }

/* jQuery-validation (jsvalidation) messages. The library inserts a
   `span.help-block.error-help-block` (or a `label.error`) after the field.

   Default: keep it in normal flow, just under the field. On a single-column
   (full-width) form this is the expected behaviour — the field below is simply
   pushed down a line, nothing misaligns.

   Consistent styling everywhere; `.form-group` is made a positioning context so
   the grid-column rule below can pin the message out of flow where an in-flow
   one WOULD misalign a row (multi-column forms, e.g. the Business Process
   report grid and the add/edit relation rows). */
label.error,
.error-help-block {
    display: block;
    color: var(--koi-danger, #e04b4b);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    margin: 3px 0 0;
}
.form-group { position: relative; }
input.error, select.error, textarea.error, .error > .form-control {
    border-color: var(--koi-danger, #e04b4b);
}

/* Fields laid out as narrower grid columns (col-*-1 … 11) sit side-by-side in a
   row, so an in-flow message under one cell would push only that cell and knock
   the row out of alignment. Float the message into a reserved line under the
   cell instead, so the row and everything below it stay put. Full-width columns
   (…-12) are effectively single-column and keep the in-flow behaviour above. */
.form-group[class*="col-"]:not([class*="-12"]) {
    padding-bottom: 22px;
}
.form-group[class*="col-"]:not([class*="-12"]) > label.error,
.form-group[class*="col-"]:not([class*="-12"]) > .error-help-block {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: -18px;
    padding: 0 1px;
}

/* Add/edit forms (`.mainform`) lay their fields out as floated Bootstrap grid
   columns. When cells in a row differ in height — e.g. a tall select2 dropdown
   next to a plain input — the floats "catch" and stagger the grid (fields drift
   up/down and columns go empty). Lay the form out as flex rows so every row
   stays aligned regardless of cell height. Non-column children (section
   dividers, full-width fields) span the whole row, matching normal block flow,
   so single-column forms are unaffected. */
form.mainform,
form#mainform {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
form.mainform > *:not([class*="col-"]),
form#mainform > *:not([class*="col-"]) {
    flex: 0 0 100%;
    max-width: 100%;
}

/* The custom "add multiple rows" grids (Assess|Treat, Resources, Pillar Impact
   and the Risk Score table) use bespoke tight padding — a `commonclass` cell
   (1px), an 8px `margin_left` hack on the first cell, `no_padding` rows, and
   nested `col-*` inside a `col-sm-12` — so their first field didn't line up with
   the standard 15px grid gutter used everywhere else. Normalise every section's
   left edge to that same gutter (these rules out-specify the in-page
   relationalhtml styles, so no !important is needed). */
form.mainform .no_padding { padding-left: 15px; }
form.mainform .margin_left { margin-left: 0; }
form.mainform .commonclass { padding-left: 0; padding-right: 4px; }
form.mainform .table > thead > tr > th:first-child,
form.mainform .table > tbody > tr > td:first-child { padding-left: 0; }
form.mainform .col-sm-12.form-group > [class*="col-sm-"] { padding-left: 0; }

/* select2 to match inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d4d7dd !important;
    border-radius: 8px !important;
    min-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* --------------------------------------------------------------------------
   Change Password page
   -------------------------------------------------------------------------- */
.passchange-wrap {
    max-width: 620px;
    margin: 6px auto 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.passchange-profile .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 26px 22px;
}

.passchange-profile .card-body img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    flex: none;
    margin-bottom: 4px;
}

.passchange-profile-info h4 {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 700;
    color: var(--koi-ink);
}

.passchange-profile-info p {
    margin: 0 0 4px;
    color: var(--koi-muted);
    font-size: 14px;
}

.passchange-profile-info span {
    font-size: 12.5px;
    color: var(--koi-muted);
}

.passchange-form .card-body { padding: 20px 22px 22px; }

.passchange-hint {
    color: var(--koi-muted);
    font-size: 13.5px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--koi-line);
}

.passchange-form .form-group { margin-bottom: 18px; }
.passchange-form .form-group:last-of-type { margin-bottom: 0; }

.passchange-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--koi-line);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--koi-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--koi-gold) !important;
}

/* --------------------------------------------------------------------------
   Tables & DataTables
   -------------------------------------------------------------------------- */
.table { background: transparent; }

.table > thead > tr > th {
    background: #fafbfc;
    border-bottom: 1px solid var(--koi-line) !important;
    color: var(--koi-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 10px 12px;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--koi-line);
    font-size: 14.5px;
    padding: 10px 12px;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fbfbfc; }
/* row hover: very light grey (gold tint read as a permanent highlight on
   large grouped rows) */
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background-color: #f2f3f5; }
/* DataTables paints the sorted column per-cell — keep that grey too */
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 { background-color: #f4f5f7 !important; }
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even > .sorting_1 { background-color: #fafbfc !important; }

/* responsive tables: never break the layout on small screens */
.box-body .table-responsive,
.box-body .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d4d7dd;
    border-radius: 8px;
    padding: 5px 10px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--koi-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

.dataTables_wrapper .dataTables_info { color: var(--koi-muted); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination > li > a, .pagination > li > span {
    border: 1px solid var(--koi-line);
    color: var(--koi-text);
    margin: 0 2px;
    border-radius: 6px !important;
}

.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--koi-gold) !important;
    border-color: var(--koi-gold) !important;
    color: #fff !important;
}

.pagination > li > a:hover { background: var(--koi-gold-soft); border-color: var(--koi-gold); color: var(--koi-ink); }

/* DataTables default pagination buttons */
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
    background: var(--koi-gold) !important;
    border-color: var(--koi-gold) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Tabs (used across Plan / Risk multi-section forms)
   -------------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--koi-line); }

.nav-tabs > li > a {
    border: 0 !important;
    border-radius: 0;
    color: var(--koi-muted);
    font-weight: 600;
    margin-right: 4px;
    padding: 10px 16px;
}

.nav-tabs > li > a:hover { background: transparent; color: var(--koi-ink); }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: 0 !important;
    box-shadow: inset 0 -3px 0 var(--koi-gold);
    color: var(--koi-ink);
}

/* Reports / tabbed-list pages: a connected tab panel. The active tab is a
   folder tab that opens into the bordered content panel below it, so it's
   obvious the content belongs to the selected tab (keeps the gold accent). */
.report-tabs > .nav-tabs {
    border-bottom: 1px solid var(--koi-line);
    margin-bottom: 0;
}
.report-tabs > .nav-tabs > li { margin-bottom: -1px; }
.report-tabs > .nav-tabs > li > a {
    border: 1px solid transparent !important;
    border-top-width: 2px !important;             /* reserve space so active gold bar doesn't shift layout */
    border-radius: var(--koi-radius) var(--koi-radius) 0 0;
    margin-right: 2px;
    color: var(--koi-muted);
}
.report-tabs > .nav-tabs > li > a:hover {
    background: var(--koi-gold-soft);
    color: var(--koi-ink);
}
.report-tabs > .nav-tabs > li.active > a,
.report-tabs > .nav-tabs > li.active > a:hover,
.report-tabs > .nav-tabs > li.active > a:focus {
    background: var(--koi-card);
    border: 1px solid var(--koi-line) !important;
    border-top: 2px solid var(--koi-gold) !important;   /* gold accent stays */
    border-bottom-color: var(--koi-card) !important;    /* merge into the panel below */
    box-shadow: none;
    color: var(--koi-ink);
}
/* the content panel the active tab opens into */
.report-tabs > div {
    border: 1px solid var(--koi-line);
    border-top: 0;
    border-radius: 0 0 var(--koi-radius) var(--koi-radius);
    background: var(--koi-card);
    padding: 20px 16px;
}
/* panes often hold bare floated Bootstrap columns (no .row wrapper), which
   would collapse the panel — clear them so the panel wraps its content */
.report-tabs > div::after { content: ""; display: table; clear: both; }
/* A pane that itself holds a nested tab set (Risk, Action/Task Status): the
   nested folder-tab panel is the real container, so drop this pane's own
   border/padding to avoid a double box and too much padding. */
.report-tabs > div:has(> .report-tabs) {
    border: 0;
    padding: 0;
    background: transparent;
}
/* nested tab bar (Risk, Action/Task Status): small breathing room below the
   parent tab bar so the inner content isn't cramped against it */
.report-tabs > div > .report-tabs > .nav-tabs { margin-top: 10px; }

/* Report form grids (Business Process): the forms are floated col-sm-6 cells,
   so ANY height difference between two cells — most visibly a jQuery-validation
   error label growing one form — makes the floats "catch" and reshuffles the
   whole masonry (cells jump columns, big gaps appear). Lay the cells out as
   flex rows instead: each row stays aligned and a validation error only nudges
   its own row down, never the neighbouring column. */
.report-tabs #wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.report-tabs #wrapper > [class*="col-"] { float: none; }
/* (the grid-column validation rule near .form-group reserves the error line for
   these col-sm-6 cells, so an error never nudges a neighbour or the row below) */

/* --------------------------------------------------------------------------
   Modals, alerts, misc chrome
   -------------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.modal-header { border-bottom: 1px solid var(--koi-line); }
.modal-footer { border-top: 1px solid var(--koi-line); }

.alert { border-radius: var(--koi-radius); border: 1px solid transparent; }
.alert-success { background: #eaf7ef; border-color: #bfe5cd; color: #1d6b3d; }
.alert-danger { background: #fdeeee; border-color: #f3c6c6; color: #99311f; }
.alert-warning { background: var(--koi-gold-soft); border-color: #e8d9a8; color: #6d5716; }
.alert-info { background: #eef4fb; border-color: #c9dcf1; color: #2a5583; }

.label-primary, .badge-primary { background: var(--koi-gold) !important; }

.main-footer {
    background: transparent !important;
    border-top: 1px solid var(--koi-line) !important;
    color: var(--koi-muted);
    font-size: 13.5px;
    padding: 14px 0;
    text-align: center;
}

.main-footer a, .main-footer strong a { color: var(--koi-gold-dark) !important; }

/* Flash / alert messages render OUTSIDE the .container (direct child of
   .content-wrapper), so the legacy 30px margin made them wider than the
   content. Match them to the content gutter (5%, or 15% on wide-gutter pages). */
.content-wrapper > .section_head .flash-message,
.content-wrapper > .flash-message,
.flash-message {
    margin-left: 5% !important;
    margin-right: 5% !important;
}
.wide-gutter .flash-message {
    margin-left: 15% !important;
    margin-right: 15% !important;
}
@media (max-width: 767px) {
    .flash-message, .wide-gutter .flash-message {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
}

/* page heading strip some views render */
.content-header > h1 { font-size: 22px; font-weight: 700; }

/* breadcrumbs */
.breadcrumb { background: transparent; padding-left: 0; margin-bottom: 0; }
.breadcrumb > li + li:before { color: var(--koi-muted); }
.breadcrumb > li > a { color: var(--koi-muted); font-weight: 600; }
.breadcrumb > li > a:hover { color: var(--koi-gold-dark); }
.breadcrumb > li > a > .fa-dashboard,
.breadcrumb > li > a > .fa-home { margin-right: 5px; color: var(--koi-gold-dark); }
.breadcrumb > .active { color: var(--koi-text); font-weight: 700; }

/* One clean left line for the whole admin page: the header logo, the breadcrumb,
   and the content boxes all start at the container edge (5%). Kill the small
   offsets that created a staircase — the AdminLTE section.content 8px padding
   and the breadcrumb's own padding/margin. (The logo's Bootstrap -15px margin
   is handled in site-header.css.) */
.layout-top-nav .content-wrapper section.content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Base .content-header = a lightweight section header: gold accent bar + a
   little inset, no card chrome. Inline section titles (e.g. "Risk Score",
   "Impact | Likelihood | Velocity") use this. */
.content-header {
    position: relative;
    padding: 8px 14px !important;
    margin-bottom: 12px;
    background: transparent;
}
/* gold accent bar, matching the .box/.card header treatment */
.content-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--koi-gold);
}
/* The page's navigation breadcrumb -- the one carrying the Home icon -- is the
   attractive card. Section-title headers (no Home icon) stay lightweight so
   they don't stack up as a wall of cards. */
.content-header:has(.breadcrumb a > .fa-dashboard),
.content-header:has(.breadcrumb a > .fa-home) {
    padding: 13px 14px !important;
    /* !important to beat custom_style.css's margin-bottom:5px!important */
    margin-bottom: 24px !important;      /* clear breathing room before content */
    background: var(--koi-card) !important;
    border: 1px solid var(--koi-line);
    border-radius: var(--koi-radius);
    box-shadow: var(--koi-shadow);
    overflow: hidden;
}
.content-header > .breadcrumb {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* List pages: the datatable box has no padding of its own anymore (no
   card wrapper), so give it the same 5px inset as the breadcrumb above
   it, keeping both flush on one left edge. Scoped to pages that actually
   have a breadcrumb before it (not the tables embedded in Reports tabs,
   which have no breadcrumb and already sit flush with the tab bar). */
.content-header + #datatable_section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Reports page: the tab bar + tab panels sit flush at the container edge,
   the same left line as every other page's content and the breadcrumb card. */
.report-tabs {
    padding-left: 0;
    padding-right: 0;
}
/* panels already carry the 14px inset from .report-tabs, so cancel the
   extra list-page inset a nested datatable would otherwise add (avoids a
   double indent on the Teams / Exercise report panels). */
.report-tabs .content-header + #datatable_section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Dashboard: no breadcrumb, and the outer wrapper box has no border (kept a
   soft shadow so it still reads as a container on the white background). */
.dashboard-page .content-header { display: none; }
.dashboard-page .content-wrapper section.content > .row > div > .box {
    border: 0 !important;
}

/* Dashboard: tighten the gap between the inner cards (was ~60px from the nested
   column + card-wrapper padding). */
.dashboard-page .box-pane > [class*="col-"],
.dashboard-page .box-pane > [class*="col-"] > .col-sm-12 {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Chart labels under the circular progress (Department / Stakeholder / …): the
   col-sm-12 15px padding squeezed the text so long words broke mid-word. Give
   them the full cell width and keep each label on one line. */
.info_text_bottom {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}
.info_text_bottom a {
    display: inline-block;   /* inline-block + centered parent => centered on the donut */
    font-size: 11.5px;
    white-space: nowrap;
}

/* ==========================================================================
   Dashboard — professional reporting look
   ========================================================================== */

/* section cards */
.dashboard-page .box-pane .card {
    border: 1px solid var(--koi-line) !important;
    border-radius: 12px;
    box-shadow: var(--koi-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.dashboard-page .box-pane .card > .card-body { padding: 6px 14px 14px; }

/* card headers already themed elsewhere; keep them white with a gold accent */
.dashboard-page .card-header {
    background: #fff !important;
    color: var(--koi-text) !important;
    border-bottom: 1px solid var(--koi-line);
    font-size: 14.5px;
    padding: 13px 16px 13px 18px;
    position: relative;
}
.dashboard-page .card-header::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 4px; border-radius: 4px; background: var(--koi-gold);
}

/* readiness sub-section headings: space ABOVE (separates sections), tight below
   so the heading groups with its own donuts. */
.dashboard-page .card-body h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--koi-text);
    letter-spacing: .2px;
    margin: 26px 0 2px 0;
}
.dashboard-page .card-body > .col-xs-12:first-child h4 { margin-top: 6px; }
.dashboard-page .card-body hr {
    clear: both;
    margin: 6px 0 14px;
    border-top: 1px solid var(--koi-line);
}

/* readiness donuts centered over their labels — flex column so the circle and
   the (wider-than-cell) label both center on the same vertical axis. Applies on
   the dashboard and on the Reports > Readiness Score tab. */
.dashboard-page .progress_container,
#rediness_tb .progress_container {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dashboard-page .progress_container .mobile_bar,
.dashboard-page .progress_container .info_text_bottom,
#rediness_tb .progress_container .mobile_bar,
#rediness_tb .progress_container .info_text_bottom {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: center;
    margin: 0 auto;
}
.dashboard-page .progress_container .c100,
#rediness_tb .progress_container .c100 {
    float: none !important;
    display: inline-block !important;
    margin: 4px auto !important;
}
.dashboard-page .progress_container .info_text_bottom,
#rediness_tb .progress_container .info_text_bottom { margin-top: 4px; }

/* softer, more modern circular-progress ring colours (override the harsh
   defaults in circular_progress.css, which loads later — hence the extra
   .content-wrapper specificity). */
.content-wrapper .c100 { background-color: #eef1f4 !important; }
.content-wrapper .c100.red .bar,    .content-wrapper .c100.red .fill    { border-color: #e35d4d !important; }
.content-wrapper .c100.green .bar,  .content-wrapper .c100.green .fill  { border-color: #2e9e5b !important; }
.content-wrapper .c100.orange .bar, .content-wrapper .c100.orange .fill { border-color: #e0913a !important; }
.content-wrapper .c100.blue .bar,   .content-wrapper .c100.blue .fill   { border-color: #4fc4f6 !important; }
/* broader ring: thicker colored border + a smaller inner white disc, kept at a
   1em total so the clip-based half-circle rendering still lines up. */
.content-wrapper .c100 .bar,
.content-wrapper .c100 .fill {
    border-width: .12em !important;
    width: .76em !important;
    height: .76em !important;
}
.content-wrapper .c100:after {
    width: .76em !important;
    height: .76em !important;
    top: .12em !important;
    left: .12em !important;
}
/* heavier, slightly larger percentage in the middle */
.content-wrapper .c100 > span { color: #2f3744 !important; font-weight: 700 !important; font-size: .21em !important; }
/* the stock hover blows the number up to .3em and it spills past the ring;
   keep the size/box and use a gentle centered scale instead. */
.content-wrapper .c100:hover > span {
    font-size: .21em !important;
    width: 5em !important;
    line-height: 5em !important;
    color: #1f2430 !important;
    transform: scale(1.12);
    transition: transform .15s ease;
}

/* sober dark-slate for the KPI tiles (softer than the near-black header) */
.dashboard-page .custm_clr_cards,
.dashboard-page .small-box.custm_clr_cards,
.dashboard-page .custom_card.small-box.custm_clr_cards {
    background: var(--koi-kpi) !important;
}

/* ---- KPI tiles: AdminLTE .small-box (Assign Task / SOP) ---- */
.dashboard-page .small-box.custm_clr_cards {
    border: 0 !important;
    border-radius: 12px;
    box-shadow: var(--koi-shadow);
    overflow: hidden;
}
.dashboard-page .small-box .inner { padding: 16px 18px 6px; position: relative; z-index: 1; }
.dashboard-page .small-box .inner h3 {
    color: #fff !important;
    font-size: 32px; font-weight: 700; margin: 0; line-height: 1.1;
}
.dashboard-page .small-box .inner p { color: rgba(255,255,255,.6) !important; font-size: 13px; margin: 4px 0 0; }
.dashboard-page .small-box .inner p + br { display: none; }
/* the big decorative icon: smaller and pinned to the top-right so it no longer
   spills over the footer/next row */
.dashboard-page .small-box > .icon,
.dashboard-page .small-box > .icon > i {
    color: rgba(255,255,255,.10) !important;
    font-size: 40px !important;
    top: 12px !important;
    right: 14px !important;
    bottom: auto !important;
}
.dashboard-page .small-box .small-box-footer {
    background: rgba(255,255,255,.06) !important;
    color: var(--koi-gold) !important;
    font-size: 12.5px; font-weight: 600; padding: 9px;
    position: relative; z-index: 1;
}
.dashboard-page .small-box .small-box-footer:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* ---- KPI tiles: dynamic number cards (Location / Department) ---- */
.dashboard-page .custom_card.small-box.custm_clr_cards {
    min-height: auto;
    text-align: center;
    border-radius: 12px;
}
.dashboard-page .custom_card .inner { padding: 18px 10px; }
.dashboard-page .custom_card .inner h3.widgetHeader {
    color: #fff !important;
    font-size: 30px; font-weight: 700; margin: 0;
}
.dashboard-page .custom_card .inner span { color: rgba(255,255,255,.6) !important; font-size: 12.5px; }
/* fix: hover turned the number BLACK on a black tile — make it gold instead */
.dashboard-page .widgetHeader:hover { color: var(--koi-gold) !important; }

/* the location/department dropdown */
.dashboard-page .box-pane select.form-control { border-radius: 8px; }

/* "No Data" placeholder */
.dashboard-page .card-body > .col-sm-12 { color: var(--koi-muted); font-size: 13.5px; padding: 6px 4px; }

/* report links under charts (e.g. "# of Open ... RAs Report") */
.dashboard-page .info_text_bottom a,
.dashboard-page .card-body a[target="_blank"] { color: var(--koi-gold-dark); }

/* --------------------------------------------------------------------------
   Login / auth screens
   -------------------------------------------------------------------------- */
body.auth-page .content-wrapper,
body.auth-page .wrapper {
    background:
        radial-gradient(circle at 15% 10%, #332e24 0%, #1c1c1c 60%),
        linear-gradient(135deg, #1c1c1c, #242424) !important;
}

/* auth card: narrower + longer, centered */
body.auth-page .auth-card {
    max-width: 384px;
    margin: 0 auto;
}

body.auth-page .box {
    border: 0 !important;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
}

body.auth-page .box-body { padding: 44px 36px 40px; }

/* roomier vertical rhythm makes the form feel longer */
body.auth-page .form-group { margin-bottom: 20px; }
body.auth-page .box-body .btn-block { padding: 12px; margin-top: 4px; }
body.auth-page hr { margin: 22px 0 16px; }
body.auth-page .login-title { font-size: 20px; }

/* login logo inside the card is on white — let it size naturally there */
body.auth-page .login-logo .logo_image { max-height: none !important; max-width: 120px; }

/* footer sits on the dark gradient on auth pages */
body.auth-page .main-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
    color: #9b9b9b;
}

/* --------------------------------------------------------------------------
   Responsive polish
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .content-wrapper { padding-top: 12px; }
    .box-body { padding: 14px; }
}

@media (max-width: 767px) {
    /* stack form action buttons full-width for thumbs */
    .box-body .btn + .btn { margin-top: 8px; }
    .content-header > h1 { font-size: 19px; }
    /* legacy fixed widths that overflow small screens */
    .description_width { width: 100% !important; }
}