/* ==========================================================================
   FLAT APP THEME — global override
   Loaded AFTER every page's own <style> block, so these rules re-skin the
   existing CRM UI (same class names, same layout) into a flat, app-like
   look: solid colors, no gradients, no floating shadows, no hover "lift".
   Safe to include on every page — it does not touch HTML/PHP structure.
   ========================================================================== */

:root{
    /* Brand */
    --flat-primary:      #1E8E5A;   /* flat, slightly muted green (was #28a745) */
    --flat-primary-dark: #166E45;
    --flat-primary-light:#E6F4EC;   /* tint for active/hover states */

    /* Neutrals */
    --flat-bg:        #F2F4F7;      /* app background */
    --flat-surface:   #FFFFFF;      /* cards, panels */
    --flat-sidebar:   #24303B;      /* flat dark slate sidebar (was #384959) */
    --flat-border:    #E3E7EC;
    --flat-text:      #1F2937;
    --flat-text-soft: #6B7280;

    /* Status flats (solid, not pastel-glow) */
    --flat-success:   #1E8E5A;
    --flat-warning:   #B7791F;
    --flat-danger:    #C0392B;
    --flat-info:      #2563EB;

    --flat-radius:      10px;
    --flat-radius-sm:   6px;
    --flat-border-w:    1px;
}

/* ---------- base ---------- */
body{
    background:var(--flat-bg) !important;
    color:var(--flat-text);
}

/* Kill every drop-shadow / glow / gradient / hover-lift the old theme used,
   no matter which page defined it. */
.sidebar,
.sidebar-header,
.header,
.main,
.stat-card,
.chart-box,
.table-box,
.card,
.customer-card,
.quick-card,
.status-strip,
.modal-box,
.login-wrapper,
.dashboard-footer,
.toolbar-buttons,
table,
.table-responsive,
button,
.btn,
.action-btn,
.badge,
input,
select,
textarea,
.form-control{
    box-shadow:none !important;
    background-image:none !important;
}

.stat-card:hover,
.chart-box:hover,
.table-box:hover,
.card:hover,
.quick-card:hover,
.customer-card:hover{
    transform:none !important;
    box-shadow:none !important;
}

/* ---------- sidebar ---------- */
.sidebar{
    background:var(--flat-sidebar) !important;
}

.sidebar-header{
    border-bottom:var(--flat-border-w) solid rgba(255,255,255,.08) !important;
}

.menu a{
    border-radius:var(--flat-radius-sm) !important;
    border-left:3px solid transparent;
    color:rgba(255,255,255,.78) !important;
}

.menu a:hover{
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
}

.menu a.active{
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
    font-weight:600;
    border-left:3px solid var(--flat-primary);
}

.submenu a{
    color:rgba(255,255,255,.65) !important;
    border-left:3px solid transparent;
}

.submenu a.active,
.submenu a:hover{
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
    border-left:3px solid var(--flat-primary);
}

/* ---------- top header / toolbar ---------- */
.header{
    background:var(--flat-surface) !important;
    border-bottom:var(--flat-border-w) solid var(--flat-border) !important;
}

.mobile-toggle,
.user-box i{
    color:var(--flat-primary) !important;
}

/* ---------- cards / panels ---------- */
.stat-card,
.chart-box,
.table-box,
.card,
.customer-card,
.quick-card,
.status-strip,
.info-table{
    background:var(--flat-surface) !important;
    border:var(--flat-border-w) solid var(--flat-border) !important;
    border-radius:var(--flat-radius) !important;
}

.stat-card i{
    color:var(--flat-primary);
}

/* ---------- tables ---------- */
table thead th{
    background:var(--flat-sidebar) !important;
    color:#fff !important;
    font-weight:600 !important;
    border-radius:0 !important;
}

table td{
    border-bottom:var(--flat-border-w) solid var(--flat-border) !important;
}

table tbody tr:hover{
    background:var(--flat-primary-light) !important;
}

.table-box,
.customer-table,
.contract-table{
    border-radius:var(--flat-radius) !important;
    overflow:hidden;
}

/* ---------- badges / status pills : solid flat chips ---------- */
.badge,
.status{
    border-radius:var(--flat-radius-sm) !important;
    font-weight:600 !important;
    border:none !important;
}

.badge-active{ background:var(--flat-success) !important; color:#fff !important; }
.badge-pending{ background:var(--flat-warning) !important; color:#fff !important; }
.badge-call{ background:var(--flat-info) !important; color:#fff !important; }
.badge-expired{ background:var(--flat-danger) !important; color:#fff !important; }

.status-strip{
    display:flex;
}

.status-pill{
    border-radius:var(--flat-radius-sm) !important;
}

.count-badge{
    background:rgba(255,255,255,.3) !important;
    border-radius:var(--flat-radius-sm) !important;
}

/* ---------- buttons : flat, solid, no gradient / glow ---------- */
button,
.btn,
.action-btn,
.btn-add,
.btn-print,
.btn-search,
.save-btn,
.master-btn,
input[type="submit"]{
    border-radius:var(--flat-radius-sm) !important;
    border:var(--flat-border-w) solid transparent !important;
    font-weight:600 !important;
    transition:background-color .15s ease, border-color .15s ease !important;
}

.btn-primary,
.btn-add,
.save-btn,
.master-btn,
button[type="submit"]{
    background:var(--flat-primary) !important;
    color:#fff !important;
}

.btn-primary:hover,
.btn-add:hover,
.save-btn:hover,
.master-btn:hover,
button[type="submit"]:hover{
    background:var(--flat-primary-dark) !important;
}

.btn-delete{
    background:#fff !important;
    color:var(--flat-danger) !important;
    border:var(--flat-border-w) solid var(--flat-danger) !important;
}

.btn-delete:hover{
    background:var(--flat-danger) !important;
    color:#fff !important;
}

.btn-print,
.btn-search{
    background:var(--flat-surface) !important;
    color:var(--flat-text) !important;
    border:var(--flat-border-w) solid var(--flat-border) !important;
}

.btn-print:hover,
.btn-search:hover{
    background:var(--flat-bg) !important;
}

.whatsapp-btn{
    background:#25D366 !important;
    color:#fff !important;
    border-radius:var(--flat-radius-sm) !important;
}

.close-btn{
    background:transparent !important;
    color:var(--flat-text-soft) !important;
}

/* ---------- forms / inputs : flat bordered, no inner glow ---------- */
input,
select,
textarea,
.form-control{
    border:var(--flat-border-w) solid var(--flat-border) !important;
    border-radius:var(--flat-radius-sm) !important;
    background:var(--flat-surface) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus{
    outline:none !important;
    border-color:var(--flat-primary) !important;
    box-shadow:0 0 0 3px var(--flat-primary-light) !important;
}

/* ---------- modals : flat, sharp-edged panel ---------- */
.modal-overlay{
    background:rgba(15,23,32,.55) !important;
}

.modal-box{
    background:var(--flat-surface) !important;
    border-radius:var(--flat-radius) !important;
    border:var(--flat-border-w) solid var(--flat-border) !important;
}

.modal-header{
    border-bottom:var(--flat-border-w) solid var(--flat-border) !important;
    background:var(--flat-surface) !important;
    color:var(--flat-text) !important;
}

/* ---------- pagination ---------- */
.pagination a,
.page-link{
    border-radius:var(--flat-radius-sm) !important;
    border:var(--flat-border-w) solid var(--flat-border) !important;
}

.pagination a.active,
.page-link.active{
    background:var(--flat-primary) !important;
    border-color:var(--flat-primary) !important;
    color:#fff !important;
}

/* ---------- login screen ---------- */
.login-wrapper{
    border-radius:var(--flat-radius) !important;
    border:var(--flat-border-w) solid var(--flat-border) !important;
    background:var(--flat-surface) !important;
}

.login-title h2{
    color:var(--flat-primary) !important;
}

/* ---------- footer ---------- */
.dashboard-footer,
.footer-content{
    color:var(--flat-text-soft);
    border-top:var(--flat-border-w) solid var(--flat-border) !important;
    background:var(--flat-surface) !important;
}

/* ---------- misc app-like touches ---------- */
.page-title{
    font-weight:700;
    color:var(--flat-text);
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#C7CDD4; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }