/* =====================================================================
 * Modern Pages — fuller module-style layout for the whole CRM
 * Builds on glass-theme.css + modern-ui.css. Pushes the bigger structural
 * pieces (sidebar nav, KPI stat tiles, dataTables toolbar, page sections)
 * into the staff_dashboard module look — applied globally via scoped CSS,
 * plus targeted polish for high-traffic pages (dashboard, invoices,
 * customer profile). No view markup is rewritten.
 * ===================================================================== */

:root {
    --mp-accent:   var(--gt-accent, #0A84FF);
    --mp-accent-2: var(--gt-accent-2, #5E5CE6);
    --mp-grad:     linear-gradient(135deg, var(--mp-accent), var(--mp-accent-2));
    --mp-muted:    var(--gt-muted, rgba(60, 60, 67, 0.62));
    --mp-radius:   14px;
}

/* ---------------------------------------------------------------------
 * 1. SIDEBAR — gradient-pill active item, spaced rounded rows (module nav)
 * ------------------------------------------------------------------- */
#side-menu > li > a {
    margin: 2px 10px;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-weight: 600;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
#side-menu > li > a .menu-icon {
    transition: color .15s ease;
}
#side-menu > li > a:hover {
    background: rgba(10, 132, 255, .08) !important;
    color: var(--mp-accent) !important;
}
#side-menu > li.active > a,
#side-menu > li.active > a:hover,
#side-menu > li.active > a:focus {
    background: var(--mp-grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(10, 132, 255, .28) !important;
}
#side-menu > li.active > a .menu-icon,
#side-menu > li.active > a .menu-text,
#side-menu > li.active > a .fa {
    color: #fff !important;
}
/* Sub-menu items */
#side-menu ul.nav-second-level a,
#side-menu .sub-menu a {
    border-radius: 10px !important;
    margin: 1px 10px;
}
#side-menu li.active ul a.active,
#side-menu .sub-menu li.active > a {
    color: var(--mp-accent) !important;
    background: rgba(10, 132, 255, .10) !important;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
 * 2. KPI / QUICK-STAT TILES — modern glass cards (sales lists CRM-wide)
 *    .quick-top-stats is shared by invoices, estimates, proposals,
 *    credit notes, expenses, subscriptions, etc.
 * ------------------------------------------------------------------- */
.quick-top-stats button,
.quick-top-stats .quick-stat {
    background: rgba(var(--gt-glass-rgb, 255, 255, 255), .60) !important;
    border: 1px solid rgba(255, 255, 255, var(--gt-border, .35)) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: 0 6px 18px rgba(17, 24, 59, .06) !important;
    padding: 14px 16px !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
    -webkit-backdrop-filter: blur(var(--gt-blur, 22px)) saturate(var(--gt-sat, 180%));
    backdrop-filter: blur(var(--gt-blur, 22px)) saturate(var(--gt-sat, 180%));
}
.quick-top-stats button:hover,
.quick-top-stats .quick-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(17, 24, 59, .12) !important;
}

/* ---------------------------------------------------------------------
 * 3. DATATABLES TOOLBAR — refined buttons + search field
 * ------------------------------------------------------------------- */
.dataTables_wrapper .dt-buttons .btn,
.dt-buttons .dt-button {
    border-radius: 10px !important;
    margin-right: 4px;
}
.dataTables_filter input {
    border-radius: 999px !important;
    padding: 6px 14px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--mp-accent) !important;
    border-color: var(--mp-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* ---------------------------------------------------------------------
 * 4. CARD HEADINGS — overline section labels (module .card h3 look)
 *    Applied to panel headings / widget titles across all sections.
 * ------------------------------------------------------------------- */
.panel_s .panel-heading .panel-title,
.widget .panel_s > .panel-body > h4.no-margin,
.widget-title {
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------
 * 5. DASHBOARD — widget polish + chart panels
 * ------------------------------------------------------------------- */
.admin .widget .panel_s {
    border-radius: var(--mp-radius) !important;
}
.admin .top_stats_wrapper .progress {
    margin-top: 14px !important;
}

/* ---------------------------------------------------------------------
 * 6. CUSTOMER PROFILE (.customer_profile) — glassy cards + modern tabs
 * ------------------------------------------------------------------- */
.customer_profile .tw-bg-white,
.customer_profile [class*="tw-bg-white"] {
    background: rgba(var(--gt-glass-rgb, 255, 255, 255), .62) !important;
    border: 1px solid rgba(255, 255, 255, var(--gt-border, .35)) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: 0 6px 20px rgba(17, 24, 59, .06) !important;
    -webkit-backdrop-filter: blur(var(--gt-blur, 22px)) saturate(var(--gt-sat, 180%));
    backdrop-filter: blur(var(--gt-blur, 22px)) saturate(var(--gt-sat, 180%));
}
.customer_profile .nav-tabs > li.active > a {
    color: var(--mp-accent) !important;
    border-bottom: 2px solid var(--mp-accent) !important;
}

/* ---------------------------------------------------------------------
 * 7. PROFILE / SUMMARY AVATARS & ICON TILES (where present)
 * ------------------------------------------------------------------- */
.customer_profile .client-menu .nav-pills > li.active > a {
    background: var(--mp-grad) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* ---------------------------------------------------------------------
 * 8. INVOICES / SALES LIST — total badge + header spacing
 * ------------------------------------------------------------------- */
.invoices #invoices_total .label,
.estimates #estimates_total .label,
.proposals #proposals_total .label {
    font-size: 90% !important;
}

/* ---------------------------------------------------------------------
 * 9. GENERIC PAGE HEADER — give list-page titles room to breathe
 * ------------------------------------------------------------------- */
.content .md\:tw-flex h4.tw-font-bold {
    letter-spacing: -.02em;
}

/* ---------------------------------------------------------------------
 * 10. WORKSPACE-ONLY LOCK (non-admin staff) — hide sidebar + its toggle.
 *     The `hide-sidebar` body class (added alongside) reclaims content width.
 * ------------------------------------------------------------------- */
body.workspace-locked #menu {
    display: none !important;
}
body.workspace-locked .mobile-menu-toggle,
body.workspace-locked #setup-menu-item {
    display: none !important;
}