@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   REBORN CRM — admin theme
   ----------------------------------------------------------------------------
   Perfex loads assets/css/custom.css last for the admin area (assets_helper.php),
   after tailwind.css and style.min.css, so everything here wins on equal
   specificity without needing !important except where a Tailwind utility is
   applied inline in a core view.

   This is a theme LAYER, not a rewrite. No core view is restructured and no
   JavaScript DOM contract is touched — every selector below targets markup
   Perfex already emits, so an upgrade replaces core files and this file keeps
   working.

   Palette: Brand Identity v1, verbatim.
   ========================================================================= */

:root {
    /* brand */
    --rc-ink:       #061229;
    --rc-navy:      #0B2A66;
    --rc-blue:      #2360E6;
    --rc-blue-600:  #1A4CC0;
    --rc-azure:     #6FA8FF;
    --rc-teal:      #12B489;
    --rc-amber:     #F5A524;
    --rc-body:      #3D4F72;
    --rc-slate:     #5B6F92;
    --rc-hairline:  #DCE5F4;
    --rc-mist:      #F4F7FD;
    --rc-paper:     #FFFFFF;

    /* semantic — separate from the accent, never reused as a "series colour" */
    --rc-good:      #0E9A75;
    --rc-good-soft: #E4F7F0;
    --rc-good-ink:  #0B6E4C;
    --rc-warn:      #C77C0A;
    --rc-warn-soft: #FEF3DD;
    --rc-warn-ink:  #8A5A05;
    --rc-bad:       #D6443C;
    --rc-bad-soft:  #FCE9E8;
    --rc-bad-ink:   #A6322B;
    --rc-info-soft: #E8EFFD;

    /* sidebar (dark) */
    --rc-side-bg:     #061229;
    --rc-side-text:   #8FA4C8;
    --rc-side-dim:    #4B6288;
    --rc-side-hover:  rgba(255, 255, 255, .06);
    --rc-side-line:   #142445;

    --rc-radius:    12px;
    --rc-radius-sm: 8px;
    --rc-shadow:    0 1px 2px rgba(6, 18, 41, .04);
    --rc-shadow-md: 0 1px 2px rgba(6, 18, 41, .05), 0 8px 24px -16px rgba(6, 18, 41, .30);
    --rc-ring:      0 0 0 3px rgba(35, 96, 230, .16);

    --rc-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rc-font-text:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================================
   1 · TYPE & BASE
   ========================================================================= */

body.app.admin,
body.app.admin .content,
body.app.admin #wrapper {
    font-family: var(--rc-font-text);
    color: var(--rc-body);
    -webkit-font-smoothing: antialiased;
}

body.app.admin {
    font-size: 13.5px;
    line-height: 1.55;
}

/* Typeface is safe to set on anything. */
body.app.admin h1,
body.app.admin h2,
body.app.admin h3,
body.app.admin h4,
body.app.admin h5,
body.app.admin .panel-heading,
body.app.admin .bold {
    font-family: var(--rc-font-display);
    letter-spacing: -.01em;
}

/* Colour is not. Where a core view has already set a text colour with a
   Tailwind utility it did so for a reason — the leads kanban paints each
   column header with the status colour as its BACKGROUND and relies on
   `tw-text-white`. A blanket `.panel-heading { color: ink }` outranks that
   utility (0,3,1 beats 0,1,0) and leaves ink on deep navy at 1.36:1. So the
   ink applies only where the view has not spoken. */
body.app.admin h1:not([class*="tw-text-"]),
body.app.admin h2:not([class*="tw-text-"]),
body.app.admin h3:not([class*="tw-text-"]),
body.app.admin h4:not([class*="tw-text-"]),
body.app.admin h5:not([class*="tw-text-"]),
body.app.admin .panel-heading:not([class*="tw-text-"]),
body.app.admin .bold:not([class*="tw-text-"]) {
    color: var(--rc-ink);
}

/* A panel heading that IS the status colour carries its own text colour and
   everything inside it should follow, not fall back to a link or body colour. */
body.app.admin .panel-heading[class*="tw-text-white"],
body.app.admin .panel-heading[class*="tw-text-white"] a,
body.app.admin .panel-heading[class*="tw-text-white"] span,
body.app.admin #wrapper .panel-heading[class*="tw-text-white"] a:not(.btn) {
    color: #FFFFFF;
}

/* Links take the accent inside the content area only — and never anything
   wearing a button class.

   Both halves of that are load-bearing. A blanket `body.app.admin a` rule
   outranks `.btn-primary` (0,2,2 beats 0,1,0) and paints blue text on a blue
   button; it also outranks `.sidebar ul.nav li a` (0,2,3) and turns the whole
   dark rail blue. Scoping to #wrapper leaves the sidebar and topbar to their
   own rules, and :not(.btn) leaves buttons to theirs. */
body.app.admin #wrapper a:not(.btn):not(.rc-btn) {
    color: var(--rc-blue);
}

body.app.admin #wrapper a:not(.btn):not(.rc-btn):hover,
body.app.admin #wrapper a:not(.btn):not(.rc-btn):focus {
    color: var(--rc-blue-600);
}

/* Navigation is not content. A settings menu rendered entirely in the accent
   colour is just noise — the accent should mean "this link takes you somewhere
   else", so menu items keep body ink and earn the accent only when active. */
body.app.admin #wrapper [class*="settings-group-"] > a:not(.btn),
body.app.admin #wrapper .list-group-item:not(.btn) {
    color: var(--rc-body);
    font-weight: 600;
}

body.app.admin #wrapper [class*="settings-group-"] > a:not(.btn):hover,
body.app.admin #wrapper [class*="settings-group-"] > a:not(.btn):focus {
    color: var(--rc-ink);
}

body.app.admin #wrapper [class*="settings-group-"].active > a:not(.btn) {
    color: var(--rc-blue);
    font-weight: 700;
}

/* Anchors styled as buttons keep the button's own text colour. */
body.app.admin a.btn-primary,
body.app.admin a.btn-success,
body.app.admin a.btn-danger,
body.app.admin a.btn-warning,
body.app.admin a.btn-info,
body.app.admin a.btn-primary:hover,
body.app.admin a.btn-success:hover,
body.app.admin a.btn-danger:hover,
body.app.admin a.btn-warning:hover,
body.app.admin a.btn-info:hover {
    color: #FFFFFF;
}

body.app.admin a.btn-default,
body.app.admin a.btn-default:hover {
    color: var(--rc-navy);
}

body.app.admin .text-muted,
body.app.admin .text-info {
    color: var(--rc-slate);
}

body.app.admin .text-success { color: var(--rc-good-ink); }
body.app.admin .text-danger  { color: var(--rc-bad-ink); }
body.app.admin .text-warning { color: var(--rc-warn-ink); }

/* Digits that sit in columns should line up. */
body.app.admin .table td,
body.app.admin .table th,
body.app.admin ._total,
body.app.admin .text-stats-wrapper {
    font-variant-numeric: tabular-nums;
}

/* Keyboard focus must stay visible everywhere. */
body.app.admin :focus-visible {
    outline: 2px solid var(--rc-blue);
    outline-offset: 2px;
}

/* ============================================================================
   2 · SHELL
   ========================================================================= */

#wrapper {
    background: var(--rc-mist);
}

.content {
    padding: 22px 24px 28px;
}

/* ============================================================================
   3 · SIDEBAR — Midnight Ink
   ========================================================================= */

/* Stock Perfex positions the rail `absolute` with a light grey fill, so nobody
   noticed it stops at the first viewport. Against Midnight Ink that edge is
   glaring on any page taller than the screen, so the rail becomes `fixed` and
   scrolls its own overflow — which is what an app sidebar should do anyway.
   Perfex hides it with margin-left, and margins still work on a fixed box, so
   the hamburger and the mobile drawer keep behaving exactly as before. */
.sidebar {
    background: var(--rc-side-bg);
    border-right: 0;
    padding-left: 10px;
    padding-right: 10px;
    position: fixed;
    top: 0;
    bottom: 0;
    /* Perfex's JS writes an inline `min-height` equal to the DOCUMENT height on
       this element. That is correct for the stock `absolute` rail — it paints
       the full page — but on a `fixed` rail it makes the box taller than the
       viewport, so the content never overflows, the rail's own scrollbar never
       engages, and everything past the fold is unreachable because a fixed box
       does not scroll with the page. Inline styles lose to `!important`, which
       is why this needs it; `top`/`bottom` then resolve the height to exactly
       one viewport and the overflow below scrolls as intended. */
    min-height: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #24365C var(--rc-side-bg);
    padding-bottom: 24px;
}

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: var(--rc-side-bg); }
.sidebar::-webkit-scrollbar-thumb {
    background: #24365C;
    border-radius: 99px;
    border: 2px solid var(--rc-side-bg);
}

[dir="rtl"] .sidebar { border-left: 0; }

/* user card — the inline Tailwind on this element is light-mode, so each
   state has to be answered or the hover utility wins on its own turn */
.sidebar .sidebar-user-profile > a.profile,
.sidebar .sidebar-user-profile > a.profile:hover,
.sidebar .sidebar-user-profile > a.profile:focus {
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.sidebar .sidebar-user-profile > a.profile:hover,
.sidebar .sidebar-user-profile > a.profile:focus {
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(255, 255, 255, .20) !important;
}

.sidebar .sidebar-user-profile > a.profile span span span:last-child {
    color: var(--rc-side-text) !important;
}

/* first-level items */
.sidebar ul.nav li a {
    color: var(--rc-side-text);
    font-family: var(--rc-font-text);
    font-weight: 600;
    font-size: 13.5px;
    border: 1px solid transparent;
    border-radius: var(--rc-radius-sm);
    padding: 8px 12px;
}

.sidebar ul.nav li a i.menu-icon {
    color: var(--rc-side-dim);
    font-size: 16px;
    transition: color .15s ease;
}

.sidebar > ul.nav > li { border-left: 0; }
[dir="rtl"] .sidebar > ul.nav > li { border-right: 0; }

.sidebar > ul.nav > li:hover > a:first-child,
.sidebar > ul.nav > li:focus-within > a:first-child {
    background: var(--rc-side-hover);
    border-radius: var(--rc-radius-sm);
    border: 1px solid transparent;
    box-shadow: none;
    color: #FFFFFF;
}

.sidebar > ul.nav > li:hover > a:first-child i.menu-icon {
    color: #FFFFFF;
}

/* active item — the one place the accent appears in the rail */
.sidebar > ul.nav > li.active > a:first-child {
    background: var(--rc-blue);
    border: 1px solid var(--rc-blue);
    border-radius: var(--rc-radius-sm);
    box-shadow: none;
    color: #FFFFFF;
}

.sidebar > ul.nav > li.active > a:first-child i.menu-icon,
.sidebar > ul.nav > li.active > a:first-child .arrow {
    color: #FFFFFF;
}

/* second level */
.sidebar ul.nav li .nav-second-level {
    margin: 2px 0 6px;
    border-left: 1px solid var(--rc-side-line);
    margin-left: 22px;
    padding-left: 0;
}

[dir="rtl"] .sidebar ul.nav li .nav-second-level {
    border-left: 0;
    border-right: 1px solid var(--rc-side-line);
    margin-left: 0;
    margin-right: 22px;
}

.sidebar ul.nav li .nav-second-level li a {
    color: var(--rc-side-text);
    padding: 6px 12px 6px 22px;
    font-size: 13px;
    font-weight: 500;
}

/* Core sets `color:#111827` on sub-menu hover — written for the stock light
   rail, near-invisible on Midnight Ink. Its selector scores higher than a
   plain `.sidebar ...` one, so these have to outrank it explicitly. */
.sidebar ul.nav li .nav-second-level li a:hover,
.sidebar ul.nav li .nav-second-level li a:focus,
.sidebar ul.nav li .nav-second-level li.active a,
body.app.admin .sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover,
body.app.admin .sidebar ul.nav > li .nav-second-level > li:not(.active) > a:focus,
body.app.admin .sidebar ul.nav > li .nav-second-level > li.active > a {
    color: #FFFFFF;
    font-weight: 600;
}

body.app.admin .sidebar ul.nav li .nav-second-level a:hover .menu-icon,
body.app.admin .sidebar ul.nav li .nav-second-level a:focus .menu-icon {
    color: #FFFFFF;
}

.sidebar .arrow { color: var(--rc-side-dim); }

/* badges on menu items (unread counts) */
.sidebar .nav .badge,
.sidebar .nav .label {
    background: var(--rc-amber);
    color: var(--rc-ink);
    font-weight: 800;
    border-radius: 999px;
}

/* ============================================================================
   4 · TOPBAR
   ========================================================================= */

#header {
    background: var(--rc-paper);
    box-shadow: none;
    border-bottom: 1px solid var(--rc-hairline);
}

#header #logo a.logo {
    font-family: var(--rc-font-display);
    font-weight: 800;
    color: var(--rc-ink);
    letter-spacing: -.02em;
}

#header #search_input {
    background: var(--rc-mist);
    border: 1px solid var(--rc-hairline);
    border-radius: 10px;
    height: 36px;
    font-family: var(--rc-font-text);
    font-size: 13px;
    color: var(--rc-ink);
    box-shadow: none;
}

#header #search_input::placeholder { color: #8195B7; }

#header #search_input:focus {
    border-color: var(--rc-blue);
    box-shadow: var(--rc-ring);
    background: var(--rc-paper);
}

#header li > a.active {
    background: var(--rc-mist);
}

#header .nav.navbar-nav > li > a {
    color: var(--rc-slate);
}

#header .nav.navbar-nav > li > a:hover,
#header .nav.navbar-nav > li > a:focus {
    color: var(--rc-ink);
}

/* the round "+ New" trigger */
#header .tw-bg-primary-600 {
    background-color: var(--rc-blue) !important;
}

.hide-menu { color: var(--rc-slate) !important; }

/* ============================================================================
   5 · PANELS / CARDS
   ========================================================================= */

.panel_s,
.panel-default,
.widget .panel_s {
    background: var(--rc-paper);
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius);
    box-shadow: var(--rc-shadow);
}

/* Horizontal padding here is NOT free. Perfex bleeds `.table-responsive` out
   of the panel with `margin: 0 -24px` so a data table sits flush with the card
   edge — that only lines up while the panel's side padding is exactly 24px.
   At 20px every table in the CRM overhung its card by 4px a side, and where
   the padding was zeroed it overhung by 24px. Tune the vertical padding
   freely; leave the horizontal alone. */
.panel_s .panel-body {
    padding: 18px 24px;
}

.panel_s .panel-heading,
.panel-default > .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius) var(--rc-radius) 0 0;
    font-family: var(--rc-font-display);
    font-weight: 700;
    color: var(--rc-ink);
    padding: 14px 20px;
}

.panel_s .panel-heading + .panel-body { padding-top: 16px; }

/* the dashboard widget chrome Perfex draws around each widget */
.widget .panel_s { margin-bottom: 18px; }

.widget-dragger { color: var(--rc-slate); }

/* ============================================================================
   6 · BUTTONS
   ========================================================================= */

.btn {
    font-family: var(--rc-font-text);
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--rc-radius-sm);
    padding: 7px 14px;
    border-width: 1px;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-sm, .btn-xs {
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 7px;
}

.btn-lg { font-size: 14.5px; padding: 10px 20px; }

.btn-primary,
.btn-info {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #FFFFFF;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open > .dropdown-toggle.btn-primary,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--rc-blue-600);
    border-color: var(--rc-blue-600);
    color: #FFFFFF;
}

.btn-default {
    background-color: var(--rc-paper);
    border-color: var(--rc-hairline);
    color: var(--rc-navy);
}

.btn-default:hover, .btn-default:focus, .btn-default:active,
.btn-default.active, .open > .dropdown-toggle.btn-default {
    background-color: var(--rc-mist);
    border-color: #C7D4EA;
    color: var(--rc-navy);
}

.btn-success {
    background-color: var(--rc-good);
    border-color: var(--rc-good);
    color: #FFFFFF;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--rc-good-ink);
    border-color: var(--rc-good-ink);
    color: #FFFFFF;
}

.btn-danger {
    background-color: var(--rc-bad);
    border-color: var(--rc-bad);
    color: #FFFFFF;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: var(--rc-bad-ink);
    border-color: var(--rc-bad-ink);
    color: #FFFFFF;
}

.btn-warning {
    background-color: var(--rc-warn);
    border-color: var(--rc-warn);
    color: #FFFFFF;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: var(--rc-warn-ink);
    border-color: var(--rc-warn-ink);
    color: #FFFFFF;
}

.btn-link { color: var(--rc-blue); font-weight: 700; }

.btn-bottom-toolbar {
    background: var(--rc-paper);
    border-top: 1px solid var(--rc-hairline);
    box-shadow: 0 -8px 24px -18px rgba(6, 18, 41, .5);
}

/* ============================================================================
   7 · FORMS
   ========================================================================= */

.form-control,
.select2-container--bootstrap .select2-selection,
.bootstrap-select > .btn.dropdown-toggle {
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius-sm);
    box-shadow: none;
    font-family: var(--rc-font-text);
    font-size: 13.5px;
    color: var(--rc-ink);
    background-color: var(--rc-paper);
    height: auto;
    padding: 8px 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.bootstrap-select > .btn.dropdown-toggle:focus {
    border-color: var(--rc-blue);
    box-shadow: var(--rc-ring);
    outline: none;
}

.form-control::placeholder { color: #8195B7; }

.form-control[disabled],
.form-control[readonly] {
    background-color: var(--rc-mist);
    color: var(--rc-slate);
}

.form-group > label,
.control-label {
    font-family: var(--rc-font-text);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--rc-body);
    margin-bottom: 6px;
}

.input-group-addon {
    background: var(--rc-mist);
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius-sm);
    color: var(--rc-slate);
    font-size: 13px;
}

.has-error .form-control { border-color: var(--rc-bad); }
.has-error .help-block, .has-error .control-label { color: var(--rc-bad-ink); }

/* checkbox / radio — Perfex's own custom controls */
.checkbox-primary input[type="checkbox"]:checked + label::before,
.radio-primary input[type="radio"]:checked + label::before {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
}

.checkbox-danger input[type="checkbox"]:checked + label::before {
    background-color: var(--rc-bad);
    border-color: var(--rc-bad);
}

.checkbox label::before,
.radio label::before {
    border-color: #C7D4EA;
    border-radius: 5px;
}

.radio label::before { border-radius: 50%; }

/* select2 */
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--rc-blue);
    color: #FFFFFF;
}

.select2-dropdown {
    border-color: var(--rc-hairline);
    border-radius: var(--rc-radius-sm);
    box-shadow: var(--rc-shadow-md);
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    background: var(--rc-info-soft);
    border-color: #C7D8F8;
    color: var(--rc-blue-600);
    border-radius: 6px;
    font-weight: 600;
}

/* ============================================================================
   8 · TABLES & DATATABLES
   ========================================================================= */

.table {
    font-size: 13px;
    color: var(--rc-body);
}

.table > thead > tr > th,
table.dataTable thead th {
    background: var(--rc-mist);
    border-bottom: 1px solid var(--rc-hairline) !important;
    border-top: 0;
    font-family: var(--rc-font-text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rc-slate);
    padding: 11px 12px;
    vertical-align: middle;
}

.table > tbody > tr > td {
    border-top: 1px solid #EEF3FC;
    padding: 11px 12px;
    vertical-align: middle;
}

.table > tbody > tr:hover > td,
table.dataTable tbody tr:hover > td {
    background: var(--rc-mist);
}

.table > tbody > tr > td a { font-weight: 600; }

.table.items thead {
    background: var(--rc-mist);
    color: var(--rc-ink);
}

.table.items thead th,
.table.items thead th:first-child,
.table.items > thead:first-child > tr:first-child > th {
    border-color: var(--rc-hairline);
}

.table.items .main {
    background-color: var(--rc-mist);
    border-color: var(--rc-hairline);
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    background: var(--rc-paper);
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--rc-blue);
    box-shadow: var(--rc-ring);
    outline: none;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--rc-slate);
    font-size: 12.5px;
}

.pagination > li > a,
.pagination > li > span,
body.app.admin #wrapper .pagination > li > a:not(.btn) {
    color: var(--rc-navy);
    border-color: var(--rc-hairline);
    font-weight: 600;
    font-size: 12.5px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span { border-radius: var(--rc-radius-sm) 0 0 var(--rc-radius-sm); }

.pagination > li:last-child > a,
.pagination > li:last-child > span { border-radius: 0 var(--rc-radius-sm) var(--rc-radius-sm) 0; }

/* The #wrapper-scoped duplicate is required: without it the accent link rule
   (which carries an id) repaints this blue-on-blue and the page number
   disappears entirely. */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
body.app.admin #wrapper .pagination > .active > a:not(.btn),
body.app.admin #wrapper .pagination > .active > a:not(.btn):hover,
body.app.admin #wrapper .pagination > .active > a:not(.btn):focus {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #FFFFFF;
}

.pagination > li > a:hover { background-color: var(--rc-mist); }

.dt-table-loading { color: var(--rc-slate); }

/* ============================================================================
   9 · TABS
   ========================================================================= */

.nav-tabs {
    border-bottom: 1px solid var(--rc-hairline);
}

.nav-tabs > li > a,
body.app.admin #wrapper .nav-tabs > li > a:not(.btn) {
    font-family: var(--rc-font-text);
    font-weight: 600;
    font-size: 13px;
    color: var(--rc-slate);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-right: 4px;
    padding: 10px 13px;
    background: transparent;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
body.app.admin #wrapper .nav-tabs > li > a:not(.btn):hover,
body.app.admin #wrapper .nav-tabs > li > a:not(.btn):focus {
    background: transparent;
    border-color: transparent transparent var(--rc-hairline);
    color: var(--rc-ink);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
body.app.admin #wrapper .nav-tabs > li.active > a:not(.btn),
body.app.admin #wrapper .nav-tabs > li.active > a:not(.btn):hover,
body.app.admin #wrapper .nav-tabs > li.active > a:not(.btn):focus {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--rc-blue);
    color: var(--rc-blue);
    font-weight: 700;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
body.app.admin #wrapper .nav-pills > li.active > a:not(.btn),
body.app.admin #wrapper .nav-pills > li.active > a:not(.btn):hover {
    background-color: var(--rc-blue);
    border-radius: var(--rc-radius-sm);
    color: #FFFFFF;
}

.tab-content { padding-top: 16px; }

/* Segmented tabs are a different component from underline tabs: core renders a
   pill track with a white "chip" marking the active tab. The generic .nav-tabs
   rules above were flattening it — removing the chip and repainting the labels
   slate on core's grey track at 3.45:1 — so this variant keeps its own shape
   and only moves onto the brand palette. */
body.app.admin .nav-tabs.nav-tabs-segmented {
    background: var(--rc-mist);
    border-radius: 10px;
    border-bottom: 0;
}

body.app.admin .nav-tabs.nav-tabs-segmented > li > a,
body.app.admin #wrapper .nav-tabs.nav-tabs-segmented > li > a:not(.btn) {
    color: var(--rc-body);
    border: 0;
    border-radius: 7px;
}

body.app.admin .nav-tabs.nav-tabs-segmented > li > a:hover,
body.app.admin #wrapper .nav-tabs.nav-tabs-segmented > li > a:not(.btn):hover {
    color: var(--rc-ink);
    border: 0;
}

body.app.admin .nav-tabs.nav-tabs-segmented > li.active > a,
body.app.admin .nav-tabs.nav-tabs-segmented > li.active > a:hover,
body.app.admin #wrapper .nav-tabs.nav-tabs-segmented > li.active > a:not(.btn) {
    background: var(--rc-paper);
    color: var(--rc-blue);
    border: 0;
    border-radius: 7px;
    box-shadow: var(--rc-shadow);
    font-weight: 700;
}

/* Core de-emphasises some figures with Tailwind neutral-400, which is 2.54:1
   on white — below AA even for large text. Slate keeps the "muted" intent and
   is readable. Scoped to the content area so the dark rail is untouched. */
body.app.admin #wrapper .tw-text-neutral-400 {
    color: var(--rc-slate);
}

/* Same colour, same problem, harder to reach: core paints EVERY calendar day
   number #9CA3AF with !important — 2.43:1, and not just the greyed-out
   neighbouring-month days. Days in the current month get body ink; the ones
   outside it stay quieter but still readable. */
body.app.admin .fc .fc-day:not(.fc-day-today) .fc-daygrid-day-number {
    color: var(--rc-body) !important;
}

/* Today is a filled accent circle with white text — core gets that right, so
   it must be excluded above rather than repainted. */
body.app.admin .fc .fc-day.fc-day-today .fc-daygrid-day-number {
    background: var(--rc-blue) !important;
    color: #FFFFFF !important;
}

body.app.admin .fc .fc-day-other .fc-daygrid-day-number,
body.app.admin .fc .fc-day-disabled .fc-daygrid-day-number {
    color: var(--rc-slate) !important;
}

/* ============================================================================
   10 · LABELS, BADGES, ALERTS
   ========================================================================= */

.label,
.badge {
    font-family: var(--rc-font-text);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .01em;
    border-radius: 999px;
    padding: 3px 9px;
}

.label-primary, .label-info   { background-color: var(--rc-info-soft);  color: var(--rc-blue-600); }
.label-success                { background-color: var(--rc-good-soft);  color: var(--rc-good-ink); }
.label-danger                 { background-color: var(--rc-bad-soft);   color: var(--rc-bad-ink); }
.label-warning                { background-color: var(--rc-warn-soft);  color: var(--rc-warn-ink); }
.label-default                { background-color: #EEF2F9;              color: var(--rc-slate); }

.badge { background-color: var(--rc-blue); color: #FFFFFF; }

.alert {
    border: 1px solid transparent;
    border-radius: var(--rc-radius);
    padding: 13px 16px;
    font-size: 13.5px;
    box-shadow: none;
}

.alert-success { background: var(--rc-good-soft); border-color: #BFE9D8; color: var(--rc-good-ink); }
.alert-danger  { background: var(--rc-bad-soft);  border-color: #F3C8C5; color: var(--rc-bad-ink); }
.alert-warning { background: var(--rc-warn-soft); border-color: #F3E3C4; color: var(--rc-warn-ink); }
.alert-info    { background: var(--rc-info-soft); border-color: #C7D8F8; color: var(--rc-blue-600); }

.alert a { font-weight: 700; text-decoration: underline; }

/* ============================================================================
   11 · DROPDOWNS & MODALS
   ========================================================================= */

.dropdown-menu {
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius);
    box-shadow: var(--rc-shadow-md);
    padding: 6px;
    font-size: 13px;
}

/* Menu items are choices, not links out. These need the #wrapper-scoped
   duplicate: inside the content area the accent link rule carries an id and
   would otherwise paint every dropdown option blue. */
.dropdown-menu > li > a,
body.app.admin #wrapper .dropdown-menu > li > a:not(.btn) {
    border-radius: 7px;
    padding: 7px 11px;
    color: var(--rc-body);
    font-weight: 600;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
body.app.admin #wrapper .dropdown-menu > li > a:not(.btn):hover,
body.app.admin #wrapper .dropdown-menu > li > a:not(.btn):focus {
    background: var(--rc-mist);
    color: var(--rc-ink);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
body.app.admin #wrapper .dropdown-menu > .active > a:not(.btn),
body.app.admin #wrapper .dropdown-menu > .active > a:not(.btn):hover {
    background: var(--rc-blue);
    color: #FFFFFF;
}

.dropdown-header {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rc-slate);
    padding: 8px 11px 4px;
}

.dropdown-menu .divider { background-color: var(--rc-hairline); }

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px -20px rgba(6, 18, 41, .45);
}

.modal-header {
    border-bottom: 1px solid var(--rc-hairline);
    padding: 18px 22px;
}

.modal-title {
    font-family: var(--rc-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--rc-ink);
}

.modal-body   { padding: 20px 22px; }

.modal-footer {
    border-top: 1px solid var(--rc-hairline);
    padding: 14px 22px;
    background: var(--rc-mist);
    border-radius: 0 0 14px 14px;
}

.modal-backdrop.in { opacity: .45; background: var(--rc-ink); }

/* ============================================================================
   12 · ODDS AND ENDS
   ========================================================================= */

/* Height must stay elastic: Perfex prints the percentage INSIDE the bar on
   some screens, and a fixed 8px clips it. min-height keeps thin bars thin. */
.progress {
    background-color: var(--rc-hairline);
    border-radius: 999px;
    box-shadow: none;
    height: auto;
    min-height: 8px;
}

.progress-bar {
    background-color: var(--rc-blue);
    border-radius: 999px;
    box-shadow: none;
}

.progress-bar-success { background-color: var(--rc-good); }
.progress-bar-danger  { background-color: var(--rc-bad); }
.progress-bar-warning { background-color: var(--rc-warn); }

.well {
    background: var(--rc-mist);
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius);
    box-shadow: none;
}

hr { border-top-color: var(--rc-hairline); }

.tooltip-inner {
    background: var(--rc-ink);
    border-radius: 7px;
    font-family: var(--rc-font-text);
    font-size: 12px;
    padding: 6px 10px;
}

.tooltip.top .tooltip-arrow     { border-top-color: var(--rc-ink); }
.tooltip.bottom .tooltip-arrow  { border-bottom-color: var(--rc-ink); }
.tooltip.left .tooltip-arrow    { border-left-color: var(--rc-ink); }
.tooltip.right .tooltip-arrow   { border-right-color: var(--rc-ink); }

/* kanban columns (leads, tasks) */
.kan-ban-col-wrapper .panel_s {
    background: var(--rc-paper);
    border-radius: var(--rc-radius);
}

.kan-ban-body { background: transparent; }

/* activity feed */
.feed-item { border-color: var(--rc-hairline); }

/* Tailwind primary steps used inline in core views, snapped to Reborn Blue */
.tw-bg-primary-600  { background-color: var(--rc-blue) !important; }
.tw-bg-primary-700  { background-color: var(--rc-blue-600) !important; }
.tw-text-primary-600{ color: var(--rc-blue) !important; }
.tw-text-primary-700{ color: var(--rc-blue-600) !important; }
.tw-border-primary-600 { border-color: var(--rc-blue) !important; }

/* ============================================================================
   13 · LOGIN (group admin-auth — see init_admin_auth_assets)
   ========================================================================= */

/* The login view carries `login_admin` on <body> and paints its own ground with
   an inline Tailwind utility, so the background has to be answered directly. */
body.login_admin {
    background: var(--rc-mist) !important;
    font-family: var(--rc-font-text);
    color: var(--rc-body);
}

body.login_admin h1,
body.login_admin h2,
body.login_admin h3 {
    font-family: var(--rc-font-display);
    color: var(--rc-ink);
    letter-spacing: -.02em;
}

/* One card, not two. Perfex draws its own white panel around the form
   (`.tw-bg-white` inside the wrapper); the wrapper becomes the single card and
   that inner panel goes transparent, so the logo and heading sit inside it. */
body.login_admin .authentication-form-wrapper {
    background: var(--rc-paper);
    border: 1px solid var(--rc-hairline);
    border-radius: 16px;
    box-shadow: var(--rc-shadow-md);
    padding: 34px 30px 30px;
    margin-top: 72px;
}

body.login_admin .authentication-form-wrapper .tw-bg-white {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 18px !important;
}

body.login_admin .company-logo {
    font-family: var(--rc-font-display);
    font-weight: 800;
    color: var(--rc-ink);
}

body.login_admin .form-control {
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius-sm);
    padding: 10px 12px;
}

body.login_admin .form-control:focus {
    border-color: var(--rc-blue);
    box-shadow: var(--rc-ring);
}

body.login_admin .control-label {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--rc-body);
}

body.login_admin .btn-primary {
    width: 100%;
    padding: 11px 16px;
    font-size: 14px;
}

body.login_admin a:not(.btn) { color: var(--rc-blue); font-weight: 600; }

/* ============================================================================
   14 · DASHBOARD DECK  (greeting · KPI row · action queue)
   ========================================================================= */

.rc-deck {
    margin-bottom: 22px;
    font-family: var(--rc-font-text);
    color: var(--rc-body);
}

.rc-deck * { box-sizing: border-box; }

.rc-deck h2,
.rc-deck h4,
.rc-deck h5 {
    font-family: var(--rc-font-display);
    color: var(--rc-ink);
    margin: 0;
    line-height: 1.2;
}

.rc-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--rc-slate);
}

.rc-big {
    font-family: var(--rc-font-display);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--rc-ink);
    font-variant-numeric: tabular-nums;
    font-size: 25px;
    line-height: 1.1;
}

.rc-big-risk { color: var(--rc-bad-ink); }

.rc-deck .rc-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rc-chip.rc-up   { background: var(--rc-good-soft); color: var(--rc-good-ink); }
.rc-chip.rc-down { background: var(--rc-bad-soft);  color: var(--rc-bad-ink); }
.rc-chip.rc-warn { background: var(--rc-warn-soft); color: var(--rc-warn-ink); }
.rc-chip.rc-info { background: var(--rc-info-soft); color: var(--rc-blue-600); }
.rc-chip.rc-idle { background: #EEF2F9;             color: var(--rc-slate); }

/* greeting */
.rc-hello {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 4px 2px 20px;
}

.rc-date { font-size: 12px; font-weight: 600; color: var(--rc-slate); }

.rc-hello h2 {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 4px 0 7px;
}

.rc-state { font-size: 14px; color: var(--rc-body); margin: 0; max-width: 62ch; }
.rc-state b { color: var(--rc-ink); font-weight: 700; }

.rc-progress { min-width: 240px; }

.rc-bar {
    height: 7px;
    border-radius: 99px;
    background: var(--rc-hairline);
    overflow: hidden;
    margin-top: 8px;
}

.rc-bar > i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--rc-teal);
}

.rc-progress-note {
    font-size: 12px;
    color: var(--rc-slate);
    margin-top: 7px;
    font-variant-numeric: tabular-nums;
}

/* KPI row */
.rc-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.rc-kpi {
    background: var(--rc-paper);
    border: 1px solid var(--rc-hairline);
    border-radius: 13px;
    padding: 15px 16px 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: var(--rc-shadow);
    min-width: 0;
}

.rc-kpi-lead { background: var(--rc-ink); border-color: var(--rc-ink); }
.rc-kpi-lead .rc-label,
.rc-kpi-lead .rc-kpi-foot { color: #8FA4C8; }
.rc-kpi-lead .rc-big      { color: #FFFFFF; }

.rc-kpi-alert { background: #FFFCF6; border-color: #F3E3C4; }

.rc-kpi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.rc-kpi-foot { font-size: 11.5px; color: var(--rc-slate); line-height: 1.35; }

.rc-spark { display: block; width: 100%; height: 34px; }

.rc-split {
    height: 8px;
    border-radius: 99px;
    background: var(--rc-info-soft);
    overflow: hidden;
}

.rc-split-late {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--rc-bad);
}

/* action queue */
.rc-queue-card {
    background: var(--rc-paper);
    border: 1px solid var(--rc-hairline);
    border-radius: 13px;
    box-shadow: var(--rc-shadow);
    overflow: hidden;
}

.rc-queue-head { padding: 16px 18px 13px; border-bottom: 1px solid #EEF3FC; }
.rc-queue-head h4 { font-size: 15px; font-weight: 700; }

.rc-queue-sub {
    display: block;
    font-size: 12px;
    color: var(--rc-slate);
    margin-top: 3px;
}

.rc-deck ul.rc-queue { list-style: none; margin: 0; padding: 0; }

.rc-q {
    display: grid;
    grid-template-columns: 4px 30px 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid #EEF3FC;
}

.rc-q:last-child { border-bottom: none; }

.rc-stripe {
    width: 4px;
    height: 32px;
    border-radius: 99px;
    background: var(--rc-hairline);
}

.rc-q-crit .rc-stripe { background: var(--rc-bad); }
.rc-q-warn .rc-stripe { background: var(--rc-amber); }
.rc-q-info .rc-stripe { background: var(--rc-blue); }
.rc-q-calm .rc-stripe { background: var(--rc-slate); }

.rc-glyph {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rc-info-soft);
    color: var(--rc-navy);
}

.rc-glyph svg { width: 15px; height: 15px; }

.rc-q-crit .rc-glyph { background: var(--rc-bad-soft);  color: var(--rc-bad-ink); }
.rc-q-warn .rc-glyph { background: var(--rc-warn-soft); color: var(--rc-warn-ink); }

.rc-q-body { min-width: 0; }
.rc-q-body h5 { font-size: 13.5px; font-weight: 700; margin: 0; }

.rc-q-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
    color: var(--rc-slate);
}

.rc-deck a.rc-btn {
    display: inline-block;
    border: 1px solid var(--rc-blue);
    border-radius: var(--rc-radius-sm);
    padding: 7px 13px;
    font-family: var(--rc-font-text);
    font-size: 12.5px;
    font-weight: 700;
    background: var(--rc-blue);
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.rc-deck a.rc-btn:hover,
.rc-deck a.rc-btn:focus {
    background: var(--rc-blue-600);
    border-color: var(--rc-blue-600);
    color: #FFFFFF;
    text-decoration: none;
}

.rc-deck a.rc-btn-quiet {
    background: var(--rc-paper);
    border-color: var(--rc-hairline);
    color: var(--rc-navy);
}

.rc-deck a.rc-btn-quiet:hover,
.rc-deck a.rc-btn-quiet:focus {
    background: var(--rc-mist);
    border-color: #C7D4EA;
    color: var(--rc-navy);
}

.rc-empty { display: flex; align-items: center; gap: 15px; padding: 26px 18px 30px; }

.rc-empty-mark {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--rc-good-soft);
    color: var(--rc-good-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rc-empty-mark svg { width: 20px; height: 20px; }
.rc-empty h5 { font-size: 14.5px; font-weight: 700; margin: 0 0 4px; }
.rc-empty p  { margin: 0; font-size: 13px; color: var(--rc-slate); max-width: 58ch; }

/* ============================================================================
   14b · LAYOUT FIXES CARRIED OVER FROM CORE
   ========================================================================= */

/* The financial-stat strips above list tables (Paid / Past Due / Outstanding,
   Draft / Sent / Expired …) are Tailwind flex rows with no wrap, so below about
   1000px they push the whole document sideways and the table's right-hand
   columns fall off the screen. Stock Perfex overflows by 68px here before this
   theme is loaded at all — letting the chips wrap fixes it for both. */
body.app.admin [class*="md:tw-flex"][class*="md:tw-gap-1"] {
    flex-wrap: wrap;
}

/* Same story for the action toolbar above a list (Create… / view toggles /
   Filters): a nowrap flex row with an auto margin on the last item, which
   pushes Filters off the right edge instead of dropping to a second line. */
body.app.admin ._buttons [class*="md:tw-flex"] {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ============================================================================
   15 · RESPONSIVE
   ========================================================================= */

@media (max-width: 1199px) {
    .rc-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .content { padding: 16px 14px 24px; }
}

@media (max-width: 767px) {
    .rc-kpis { grid-template-columns: 1fr; }

    .rc-hello { padding-bottom: 16px; }
    .rc-hello h2 { font-size: 21px; }
    .rc-progress { min-width: 100%; }

    .rc-q {
        grid-template-columns: 4px 30px 1fr;
        row-gap: 11px;
    }

    .rc-q > a.rc-btn {
        grid-column: 1 / -1;
        text-align: center;
    }

    .table > thead > tr > th { font-size: 10px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
    body.app.admin *,
    .rc-deck * { transition: none !important; animation: none !important; }
}