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

/* ============================================================================
   REBORN CRM — customer portal theme
   ----------------------------------------------------------------------------
   Loaded last by the perfex theme (see themes/perfex/functions.php), so it
   layers over the theme's own style.css without replacing it. Same brand tokens
   as the admin theme; this is the surface a customer sees, so it stays quieter
   than the admin app — fewer dark fills, more white.
   ========================================================================= */

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

    --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;

    --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;
}

/* ── type & ground ───────────────────────────────────────────────────── */

body {
    font-family: var(--rc-font-text);
    color: var(--rc-body);
    background: var(--rc-mist);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--rc-font-display);
    color: var(--rc-ink);
    letter-spacing: -.015em;
}

a { color: var(--rc-blue); }
a:hover, a:focus { color: var(--rc-blue-600); }
a.btn, a.btn:hover, a.btn:focus { color: inherit; }

.text-muted { color: var(--rc-slate); }
.text-success { color: var(--rc-good-ink); }
.text-danger  { color: var(--rc-bad-ink); }
.text-warning { color: var(--rc-warn-ink); }

:focus-visible { outline: 2px solid var(--rc-blue); outline-offset: 2px; }

/* ── top navigation ──────────────────────────────────────────────────── */

.navbar-default {
    background: var(--rc-paper);
    border: 0;
    border-bottom: 1px solid var(--rc-hairline);
    box-shadow: none;
}

.navbar-default .navbar-brand,
.navbar-default .logo-text {
    font-family: var(--rc-font-display);
    font-weight: 800;
    color: var(--rc-ink);
    letter-spacing: -.02em;
}

.navbar-default .navbar-nav > li > a {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--rc-body);
    border-radius: var(--rc-radius-sm);
}

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

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: var(--rc-blue);
    background: var(--rc-info-soft);
}

.customers-nav-item-login > a {
    background: var(--rc-blue) !important;
    color: #FFFFFF !important;
    border-radius: var(--rc-radius-sm);
    font-weight: 700;
}

.customers-nav-item-login > a:hover {
    background: var(--rc-blue-600) !important;
}

.navbar-toggle { border-color: var(--rc-hairline); }

/* the customer-area second-level menu */
.submenu > li > a { color: var(--rc-body); font-weight: 600; }
.submenu > li.active > a { color: var(--rc-blue); }

/* ── panels ──────────────────────────────────────────────────────────── */

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

.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-body { padding: 18px 20px; }

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
    font-family: var(--rc-font-text);
    font-weight: 700;
    font-size: 13px;
    border-radius: var(--rc-radius-sm);
    padding: 8px 15px;
    box-shadow: none;
}

.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-info:hover, .btn-info:focus {
    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 {
    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 { background-color: var(--rc-good-ink); border-color: var(--rc-good-ink); }

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

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

/* ── forms ───────────────────────────────────────────────────────────── */

.form-control {
    border: 1px solid var(--rc-hairline);
    border-radius: var(--rc-radius-sm);
    box-shadow: none;
    font-size: 13.5px;
    color: var(--rc-ink);
    padding: 9px 12px;
    height: auto;
}

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

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

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

.input-group-addon {
    background: var(--rc-mist);
    border-color: var(--rc-hairline);
    color: var(--rc-slate);
    border-radius: var(--rc-radius-sm);
}

/* ── tables ──────────────────────────────────────────────────────────── */

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

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

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

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

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

.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;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--rc-navy);
    border-color: var(--rc-hairline);
    font-weight: 600;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background-color: var(--rc-blue);
    border-color: var(--rc-blue);
    color: #FFFFFF;
}

/* ── labels, alerts, tabs ────────────────────────────────────────────── */

.label, .badge {
    font-weight: 700;
    font-size: 11px;
    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;
}

.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); }

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

.nav-tabs > li > a {
    font-weight: 600;
    font-size: 13px;
    color: var(--rc-slate);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 13px;
}

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

/* ── dropdowns, modals, misc ─────────────────────────────────────────── */

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

.dropdown-menu > li > a {
    border-radius: 7px;
    padding: 7px 11px;
    color: var(--rc-body);
    font-weight: 600;
}

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

.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-footer { border-top: 1px solid var(--rc-hairline); padding: 14px 22px; background: var(--rc-mist); border-radius: 0 0 14px 14px; }

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

/* 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; }

.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); }

/* login card */
.panel.login-panel,
.login-form .panel {
    border-radius: 14px;
    box-shadow: var(--rc-shadow-md);
}

/* footer */
footer, .footer {
    background: var(--rc-paper);
    border-top: 1px solid var(--rc-hairline);
    color: var(--rc-slate);
    font-size: 12.5px;
}

/* Core dims some text with Tailwind neutral-400 (2.54:1 on white). Disabled
   controls are exempt from the contrast rule, but this is also used on live
   text, and slate keeps the "quiet" intent while staying legible. */
body .tw-text-neutral-400 {
    color: var(--rc-slate);
}

/* Tailwind primary steps used inline in theme views */
.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; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}