/* =====================================================================
 * Modern UI — CRM-wide design-system overlay
 * Brings the "Staff Dashboard" module's modern look to the whole CRM by
 * restyling Perfex's existing Bootstrap components: gradient pill buttons,
 * soft status pills, modern tables, KPI stat tiles, refined inputs, tabs,
 * progress bars and typography.
 *
 * Loads AFTER glass-theme.css and reuses its palette (--gt-accent etc.).
 * No markup is changed — these rules map onto classes already in the views,
 * so every admin and client-portal screen inherits the look.
 * ===================================================================== */

:root {
    /* Reuse the glass palette, with sensible fallbacks */
    --mu-accent:   var(--gt-accent, #0A84FF);
    --mu-accent-2: var(--gt-accent-2, #5E5CE6);
    --mu-text:     var(--gt-text, #1d1d1f);
    --mu-muted:    var(--gt-muted, rgba(60, 60, 67, 0.62));
    --mu-radius:   14px;

    /* Status palette (matches the module) */
    --mu-gray:   #94a3b8;
    --mu-green:  #22c55e;
    --mu-amber:  #f59e0b;
    --mu-blue:   #3b82f6;
    --mu-red:    #ef4444;

    --mu-grad:   linear-gradient(135deg, var(--mu-accent), var(--mu-accent-2));
}

/* ---------------------------------------------------------------------
 * 1. TYPOGRAPHY — modern system font stack + smoothing
 * ------------------------------------------------------------------- */
body,
.customers,
.btn,
input,
select,
textarea,
.form-control {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
 * 2. BUTTONS — gradient pill primary, refined secondary, hover lift
 * ------------------------------------------------------------------- */
.btn {
    border-radius: var(--mu-radius) !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease,
        background-color .15s ease !important;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}

/* Primary action (Perfex uses btn-info and btn-primary interchangeably) */
.btn-info,
.btn-primary {
    background: var(--mu-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, .18) !important;
}
.btn-info:hover,
.btn-primary:hover,
.btn-info:focus,
.btn-primary:focus {
    filter: brightness(1.06);
    color: #fff !important;
}

/* Neutral / secondary buttons */
.btn-default {
    background: rgba(120, 120, 128, .10) !important;
    border: 1px solid rgba(120, 120, 128, .18) !important;
    color: var(--mu-text) !important;
}
.btn-default:hover {
    background: rgba(120, 120, 128, .16) !important;
}

/* Semantic buttons keep their meaning but gain the modern shell */
.btn-success { background: var(--mu-green) !important; border-color: var(--mu-green) !important; }
.btn-danger  { background: var(--mu-red) !important;   border-color: var(--mu-red) !important; }
.btn-warning { background: var(--mu-amber) !important; border-color: var(--mu-amber) !important; color: #fff !important; }

.btn-success:hover, .btn-danger:hover, .btn-warning:hover { filter: brightness(1.06); }

/* Outline buttons */
.btn[class*="btn-outline"] {
    background: transparent !important;
    border: 1px solid var(--mu-accent) !important;
    color: var(--mu-accent) !important;
}

/* ---------------------------------------------------------------------
 * 3. STATUS PILLS — soft tinted, fully rounded (Bootstrap .label/.badge)
 * ------------------------------------------------------------------- */
.label,
.badge {
    display: inline-block;
    border-radius: 999px !important;
    padding: .32em .85em !important;
    font-size: 85% !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    line-height: 1.4;
}

.label-default,
.badge-default { background: rgba(148, 163, 184, .16) !important; color: #475569 !important; }
.label-success,
.badge-success { background: rgba(34, 197, 94, .15) !important;  color: #15803d !important; }
.label-info,
.badge-info    { background: rgba(59, 130, 246, .15) !important; color: #1d4ed8 !important; }
.label-warning,
.badge-warning { background: rgba(245, 158, 11, .16) !important; color: #b45309 !important; }
.label-danger,
.badge-danger  { background: rgba(239, 68, 68, .15) !important;  color: #b91c1c !important; }
.label-primary { background: rgba(10, 132, 255, .15) !important; color: #0a6fd6 !important; }

/* ---------------------------------------------------------------------
 * 4. TABLES — clean header, comfortable rows, subtle hover
 * ------------------------------------------------------------------- */
.table > thead > tr > th {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700 !important;
    color: var(--mu-muted) !important;
    border-bottom: 1px solid rgba(120, 120, 128, .18) !important;
    padding: 12px 10px !important;
}
.table > tbody > tr > td {
    padding: 12px 10px !important;
    vertical-align: middle;
    border-top: 1px solid rgba(120, 120, 128, .10) !important;
}
.table-hover > tbody > tr:hover {
    background: rgba(10, 132, 255, .05) !important;
}

/* ---------------------------------------------------------------------
 * 5. STAT / KPI TILES — dashboard "quick stats" become modern cards
 * ------------------------------------------------------------------- */
.top_stats_wrapper {
    background: rgba(var(--gt-glass-rgb, 255, 255, 255), .55) !important;
    border: 1px solid rgba(255, 255, 255, var(--gt-border, .35)) !important;
    border-radius: var(--mu-radius) !important;
    padding: 18px !important;
    box-shadow: 0 6px 20px rgba(17, 24, 59, .06) !important;
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}
.top_stats_wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(17, 24, 59, .10) !important;
}

/* ---------------------------------------------------------------------
 * 6. PROGRESS BARS — slim, fully rounded, gradient default
 * ------------------------------------------------------------------- */
.progress {
    border-radius: 999px !important;
    background: rgba(120, 120, 128, .14) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.progress-bar {
    border-radius: 999px !important;
}
.progress-bar:not([class*="progress-bar-"]),
.progress-bar-default {
    background: var(--mu-grad) !important;
}
.progress-bar-success { background: var(--mu-green) !important; }
.progress-bar-info    { background: var(--mu-blue) !important; }
.progress-bar-warning { background: var(--mu-amber) !important; }
.progress-bar-danger  { background: var(--mu-red) !important; }

/* ---------------------------------------------------------------------
 * 7. PANELS / CARD HEADINGS — refined section headers
 * ------------------------------------------------------------------- */
.panel-title {
    font-weight: 700 !important;
    letter-spacing: -.01em;
    color: var(--mu-text);
}
.panel_s .panel-heading,
.panel-default > .panel-heading {
    border-bottom: 1px solid rgba(120, 120, 128, .14) !important;
}

/* ---------------------------------------------------------------------
 * 8. TABS — modern underline/pill tabs with accent
 * ------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid rgba(120, 120, 128, .18) !important;
}
.nav-tabs > li > a {
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--mu-muted) !important;
    font-weight: 600;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--mu-accent) !important;
    border-bottom: 2px solid var(--mu-accent) !important;
    background: transparent !important;
}
.nav-tabs > li > a:hover {
    color: var(--mu-text) !important;
    border-bottom-color: rgba(120, 120, 128, .35) !important;
}

/* ---------------------------------------------------------------------
 * 9. PILLS / NAV-PILLS
 * ------------------------------------------------------------------- */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background: var(--mu-accent) !important;
    border-radius: 999px !important;
}
.nav-pills > li > a {
    border-radius: 999px !important;
}

/* ---------------------------------------------------------------------
 * 10. INPUTS — refined radius + accent focus ring
 * ------------------------------------------------------------------- */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 10px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--mu-accent) !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, .15) !important;
}

/* ---------------------------------------------------------------------
 * 11. PAGINATION — rounded, accent active
 * ------------------------------------------------------------------- */
.pagination > li:first-child > a,
.pagination > li:first-child > span { border-radius: 10px 0 0 10px !important; }
.pagination > li:last-child > a,
.pagination > li:last-child > span { border-radius: 0 10px 10px 0 !important; }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--mu-accent) !important;
    border-color: var(--mu-accent) !important;
}
.pagination > li > a { color: var(--mu-accent); }

/* ---------------------------------------------------------------------
 * 12. WELLS / LIST GROUPS / ALERTS — softer, rounded
 * ------------------------------------------------------------------- */
.well {
    border-radius: var(--mu-radius) !important;
    border: 1px solid rgba(120, 120, 128, .14) !important;
}
.list-group-item:first-child { border-top-left-radius: var(--mu-radius); border-top-right-radius: var(--mu-radius); }
.list-group-item:last-child  { border-bottom-left-radius: var(--mu-radius); border-bottom-right-radius: var(--mu-radius); }
.alert {
    border-radius: var(--mu-radius) !important;
    border: 0 !important;
}

/* ---------------------------------------------------------------------
 * 13. MODERN SCROLLBARS (webkit) — subtle, unobtrusive
 * ------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, .35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, .55); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
 * 14. CUSTOMER PORTAL — share the same component upgrades
 *     (component classes above already apply; this anchors the accent)
 * ------------------------------------------------------------------- */
.customers .btn-primary,
.customers .btn-info {
    background: var(--mu-grad) !important;
    border: 0 !important;
}