/* PRISM ONE shared UI kit (ported from CashFlow's shared polish)
   - modal forms
   - Bootstrap-style autocomplete over jQuery UI
   - table pager toolbar + cookie page-size
   - mobile card tables
*/

/* ---- Autocomplete: jQuery UI rendered like a Bootstrap dropdown ---- */
.cf-autocomplete + .ui-autocomplete, .ui-autocomplete {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .15) !important;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .15);
    font-size: .9rem;
    z-index: 9999;
    padding: .35rem 0;
    max-height: 320px;
    overflow-y: auto;
}
.ui-autocomplete .ui-menu-item { border: 0; padding: 0; }
.ui-autocomplete .ui-menu-item-wrapper { padding: .45rem .9rem !important; color: #1E293B; }
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: #2563EB !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 0;
}
.cf-tt-label { font-weight: 600; }
.cf-tt-sub { color: #64748B; font-size: .78rem; }

/* ---- Form controls: consistent, PRISM focus ring ---- */
.form-control, .custom-select, .form-select {
    border-radius: .5rem;
    border-color: #CBD5E1;
    min-height: 38px;
}
.form-control:focus, .custom-select:focus, .form-select:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15);
}
.input-group-text { border-radius: .5rem; background: #F1F5F9; border-color: #CBD5E1; color: #64748B; }

/* ---- Buttons: make every action read as a button ---- */
.btn { border-radius: .5rem; font-weight: 600; }
.btn-prism { color: #fff; background: #2563EB; border-color: #2563EB; }
.btn-prism:hover, .btn-prism:focus { color: #fff; background: #1D4ED8; border-color: #1D4ED8; }
.btn-success { background: #22C55E; border-color: #22C55E; }
.btn-success:hover, .btn-success:focus { background: #16A34A; border-color: #16A34A; }
.btn-warning { background: #F59E0B; border-color: #F59E0B; color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #D97706; border-color: #D97706; color: #fff; }
.btn-xs { padding: .1rem .5rem; font-size: .78rem; }

/* ---- Modal polish ---- */
.modal-content { border: 0; border-radius: .75rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .2); }
.modal-header { border-radius: .75rem .75rem 0 0; }
.modal-title { font-weight: 700; }

/* ---- Table pager toolbar ---- */
.cf-table-wrap .cf-table-toolbar {
    display: flex; flex-wrap: wrap; gap: .5rem;
    justify-content: space-between; align-items: center;
    padding: .5rem .1rem; font-size: .85rem;
}
.cf-table-toolbar .cf-search { min-width: 220px; max-width: 320px; }
.cf-table-toolbar .cf-pagesize { width: auto; display: inline-block; }
.cf-table-pager { display: flex; align-items: center; gap: .25rem; justify-content: space-between; padding: .5rem .1rem; font-size: .85rem; }
.cf-table-pager .btn { padding: .15rem .55rem; }
.cf-table-pager .cf-pageinfo { color: #64748B; white-space: nowrap; }

/* ---- Responsive tables ---- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 767.98px) {
    .content { padding: 0 .5rem .75rem; }
    .card-body { padding: .75rem; }
    .form-control, .custom-select { font-size: .9rem; }
    .btn { white-space: nowrap; }
    .modal-dialog { margin: .5rem; }
    .main-footer { font-size: .72rem; text-align: center; }
    .main-footer .float-right { float: none !important; }
}

/* ---- Mobile card tables ---- */
@media (max-width: 767.98px) {
    .cf-card-table { border: 0; background: transparent; }
    .cf-card-table > thead { display: none; }
    .cf-card-table > tbody > tr {
        display: flex; flex-direction: column;
        border: 1px solid #e3e6ea; border-radius: .5rem;
        margin: 0 0 .65rem; padding: .1rem .8rem .6rem;
        background: #fff !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
    }
    .cf-card-table > tbody > tr > td {
        display: block; width: auto !important; max-width: none !important;
        border: 0; border-top: 1px solid #f0f2f4; padding: .42rem 0;
        white-space: normal !important; text-align: left !important; background: transparent !important;
    }
    .cf-card-table > tbody > tr > td::before {
        content: attr(data-label); display: block;
        font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
        font-weight: 700; color: #98a2b3; margin-bottom: .12rem;
    }
    .cf-card-table > tbody > tr > td.cf-hide-mobile { display: none; }
    .cf-card-table > tbody > tr > td.cf-actions::before { display: none; }
    .cf-card-table > tbody > tr > td.cf-actions .btn { width: 100%; margin-top: .35rem; padding: .45rem; }
}

/* ==========================================================================
   COMPACT MODE: smaller typography and forms (PRISM ONE)
   ========================================================================== */
body, .content-wrapper { font-size: .82rem; }

.content-header h1 { font-size: 1.15rem; }
.content-header { padding-top: .75rem; }

.card-body { padding: .75rem; }
.card-header { padding: .5rem .75rem; }
.card-footer { padding: .5rem .75rem; }

.form-group { margin-bottom: .55rem; }
label { font-size: .78rem; margin-bottom: .2rem; }
.form-control, .custom-select, .form-select {
    font-size: .82rem;
    min-height: 30px;
    height: auto;
    padding: .28rem .5rem;
    border-radius: .375rem;
}
.form-control-sm, .custom-select-sm {
    font-size: .78rem;
    min-height: 26px;
    padding: .15rem .4rem;
}
textarea.form-control { min-height: 60px; }
.input-group-text { font-size: .78rem; padding: .28rem .5rem; }

/* Buttons: default to a compact size */
.btn { font-size: .8rem; padding: .3rem .65rem; line-height: 1.25; }
.btn-prism, .btn-success, .btn-warning, .btn-danger, .btn-default, .btn-primary { font-size: .8rem; padding: .3rem .7rem; }
.btn-xs { font-size: .72rem; padding: .1rem .45rem; }
.btn .fas, .btn .far { font-size: .9em; }

/* Tables: denser rows */
.table { font-size: .8rem; }
.table td, .table th { padding: .4rem .5rem; }
.table-sm td, .table-sm th { padding: .3rem .4rem; }
.table thead th { font-size: .72rem; }

/* Badges, alerts, pagination */
.badge { font-size: .72rem; }
.alert { padding: .55rem .75rem; font-size: .82rem; margin-bottom: .75rem; }
.pagination { margin-top: .5rem; }
.page-link { padding: .28rem .55rem; font-size: .8rem; }

/* Navbar + sidebar */
.main-header .nav-link { font-size: .82rem; padding: .35rem .55rem; }
.nav-sidebar .nav-link { font-size: .82rem; padding: .4rem .75rem; }
.nav-sidebar .nav-link p { margin: 0; }
.nav-sidebar .nav-header { font-size: .66rem; }
.brand-text { font-size: .95rem; }
.user-panel .info span { font-size: .78rem; }

/* ==========================================================================
   SOFTER TEXT: lighter dark tones for readability
   ========================================================================== */
:root {
    --prism-navy: #3B4757;   /* headings (was #0F172A) */
    --prism-text: #55606E;   /* body text (was #1E293B) */
    --prism-text-muted: #7B8794;
}
html, body, .content-wrapper { color: var(--prism-text); }
h1, h2, h3, h4, h5, h6,
.content-header h1, .card-title, .card-header {
    color: var(--prism-navy);
}
label { color: var(--prism-text); }
.table { color: var(--prism-text); }
.table thead th { color: var(--prism-navy); }
a { color: #2563EB; }

/* ==========================================================================
   LIQUID "LAKE" THEME  —  lake-blue gradient sidebar + lake-blue gradient header
   ========================================================================== */
:root {
    --prism-lake-deep: #052A47;
    --prism-lake-mid: #0A4E7C;
    --prism-lake-bright: #0E6BA8;
    --prism-lake-cyan: #0E5E96;
    /* sidebar: deep lake -> darker blue */
    --prism-header-1: var(--prism-lake-deep);
    --prism-header-2: var(--prism-lake-mid);
    --prism-header-3: var(--prism-lake-cyan);
    /* topbar: complementary amber/gold (opposite the lake-blue) */
    --prism-topbar-1: #92400E;
    --prism-topbar-2: #D97706;
    --prism-topbar-3: #FBBF24;
}

/* ---- Sidebar: lake-blue gradient ---- */
.main-sidebar {
    background: linear-gradient(180deg, var(--prism-lake-deep) 0%, var(--prism-lake-mid) 50%, var(--prism-lake-cyan) 100%) !important;
}
.main-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 55% at 12% 0%, rgba(18, 127, 187, .32), transparent 60%),
        radial-gradient(90% 45% at 100% 100%, rgba(14, 94, 150, .30), transparent 65%);
}
.sidebar { position: relative; z-index: 2; }
.brand-link {
    position: relative;
    z-index: 3;
    background: linear-gradient(90deg, rgba(18, 127, 187, .28), rgba(18, 127, 187, 0)) !important;
    border-bottom: 1px solid rgba(18, 127, 187, .42) !important;
    color: #fff !important;
}
.brand-link .brand-text { color: #fff !important; }
.nav-sidebar .nav-header { color: rgba(186, 223, 245, .78) !important; }
.nav-sidebar .nav-link { color: #E3F2FB !important; }
.nav-sidebar .nav-link .nav-icon { color: #9CC9E8 !important; }
.nav-sidebar .nav-link:hover { background: rgba(18, 127, 187, .25) !important; color: #fff !important; }
.nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--prism-lake-mid), var(--prism-lake-bright)) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(18, 127, 187, .40);
}
.nav-sidebar .nav-link.active .nav-icon { color: #fff !important; }
.sidebar .user-panel .info .text-white { color: #EAF6FF !important; }
.sidebar .user-panel .text-muted { color: rgba(200, 228, 245, .75) !important; }

/* ---- Topbar: neutral light gray (#eee) ---- */
.main-header.navbar {
    background: #EEEEEE !important;
    border-bottom: 1px solid #D5D5D5 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
}
.main-header .navbar-nav .nav-link,
.main-header .navbar-nav .nav-link i { color: #333333 !important; }
.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:focus,
.main-header .navbar-nav .nav-link.active { color: #000000 !important; background: rgba(0, 0, 0, .10); border-radius: .4rem; }
.main-header .nav-link.btn-link { color: #333333 !important; }
.main-header .form-control { background: #fff; border-color: #D5D5D5; color: #333333; }
.main-header .navbar-badge { background: #B91C1C !important; color: #fff !important; border: 2px solid #EEEEEE; }

/* ---- Modal titles: white on the colored modal header ---- */
.modal-header .modal-title { color: #FFFFFF !important; }

/* ==========================================================================
   Sidebar: light, readability-first theme with Prism-blue accents
   ========================================================================== */
:root {
    --prism-nav-blue: #0E6BA8;
    --prism-nav-blue-dark: #052A47;
    --prism-nav-blue-soft: #E4F0F8;
    --prism-nav-line: #EDF0F4;
    --prism-nav-text: #374151;
}

.main-sidebar {
    background: linear-gradient(90deg, #DCF3E4 0%, #EEF9F2 28%, #FFFFFF 62%) !important;
    border-right: 1px solid #E6E9EE;
    box-shadow: 0 0 20px rgba(15, 23, 42, .06) !important;
}
.main-sidebar::before { display: none !important; }

/* Brand bar: lake-blue header with white text */
.main-sidebar .brand-link {
    background: linear-gradient(135deg, #0E5E96 0%, #052A47 100%) !important;
    border-bottom: 0 !important;
}
.brand-link .brand-text { color: #ffffff !important; }
.brand-link .brand-image { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }

/* User panel: white row with a light divider */
.sidebar { padding-top: 0 !important; }
.sidebar .user-panel {
    margin: 0 !important;
    padding: .85rem 1rem !important;
    background: rgba(255, 255, 255, .55) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(22, 163, 74, .16) !important;
}
.sidebar .user-panel .info .text-white { color: #1F2937 !important; font-weight: 700; }
.sidebar .user-panel .info .text-muted { color: var(--prism-nav-blue) !important; font-weight: 600; }
/* blue status dot before the role (mimics "Online") */
.sidebar .user-panel .info .text-muted::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--prism-nav-blue);
    margin-right: 6px;
    vertical-align: middle;
}
/* Avatar */
.sidebar .user-panel .image .img-circle {
    background: var(--prism-nav-blue-soft) !important;
    color: var(--prism-nav-blue-dark) !important;
    border: 1px solid #C2DBEA;
    box-shadow: none;
}

/* Nav rows: full-width, thin dividers, dark text, blue icons */
.nav-sidebar .nav-link {
    color: var(--prism-nav-text) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: .72rem 1rem !important;
    border-bottom: 1px solid var(--prism-nav-line);
}
.nav-sidebar .nav-link p { color: var(--prism-nav-text) !important; }
.nav-sidebar .nav-link .nav-icon { color: var(--prism-nav-blue) !important; }
.nav-sidebar .nav-link .right { color: #9AA4B2 !important; }
.nav-sidebar .nav-link:hover { background: #F4F7FA !important; }
.nav-sidebar .nav-link:hover p { color: #111827 !important; }
.nav-sidebar .nav-item.menu-open > .nav-link { font-weight: 700; }
.nav-sidebar .nav-link.active {
    background: var(--prism-nav-blue-soft) !important;
    box-shadow: inset 3px 0 0 var(--prism-nav-blue);
}
.nav-sidebar .nav-link.active p,
.nav-sidebar .nav-link.active .nav-icon { color: var(--prism-nav-blue-dark) !important; }
.nav-sidebar .nav-header { color: #94A3B8 !important; }
/* submenu rows sit slightly indented */
.nav-sidebar .nav-treeview > .nav-item > .nav-link { padding-left: 2.1rem !important; }

/* ---- Dashboard accent: softer coral in place of the harsh AdminLTE red ---- */
.small-box.bg-prism-coral {
    background: linear-gradient(135deg, #f0876f 0%, #df5f55 100%) !important;
    color: #fff;
}
.small-box.bg-prism-coral .icon { color: rgba(255, 255, 255, .22); }
.small-box.bg-prism-coral .small-box-footer { color: rgba(255, 255, 255, .85); }
.card.card-prism-coral { border-top: 3px solid #e26d5c; }
.card.card-prism-coral > .card-header {
    background: linear-gradient(135deg, #f0876f 0%, #df5f55 100%);
    color: #fff;
    border-bottom: 0;
}
.card.card-prism-coral > .card-header .card-title,
.card.card-prism-coral > .card-header .card-tools { color: #fff; }
.badge.badge-prism-coral { background: #e26d5c; color: #fff; }