/* =========================================================
   G-VOLT ERP v3.1 ENTERPRISE UI
   PART 1: LAYOUT, SIDEBAR, HEADER & NAVIGATION
   ========================================================= */

:root{
    --primary:#006b3f;
    --primary-dark:#004d2e;
    --primary-light:#eaf5ef;
    --primary-soft:#f3faf6;

    --secondary:#1f6fb2;
    --warning:#d68910;
    --danger:#b03a2e;
    --success:#00804b;
    --purple:#6f42c1;

    --page-bg:#f4f7f6;
    --card-bg:#ffffff;
    --border:#dfe7e2;

    --text:#17211c;
    --muted:#68756e;

    --shadow-sm:0 2px 8px rgba(0,0,0,.06);
    --shadow-md:0 7px 22px rgba(0,0,0,.08);
    --shadow-lg:0 14px 35px rgba(0,0,0,.12);

    --radius-sm:7px;
    --radius-md:12px;
    --radius-lg:16px;

    --sidebar-width:270px;
    --transition:.22s ease;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--page-bg);
    color:var(--text);
    font-size:14px;
    line-height:1.45;
}

a{
    color:var(--primary);
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    color:var(--primary-dark);
}

img{
    max-width:100%;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--text);
    line-height:1.2;
}

h1{
    margin:0 0 20px;
    font-size:29px;
    font-weight:700;
}

h2{
    font-size:24px;
}

h3{
    font-size:18px;
}

small{
    font-size:12px;
    color:var(--muted);
}

/* =========================
   SIDEBAR
   ========================= */

.sidebar{
    position:fixed;
    left:0;
    top:0;
    width:var(--sidebar-width);
    height:100vh;
    z-index:1000;

    padding:24px 18px 65px;

    background:
        linear-gradient(
            180deg,
            #006b3f 0%,
            #005b36 58%,
            #004d2e 100%
        );

    color:#fff;

    overflow-y:auto;
    overflow-x:hidden;

    box-shadow:5px 0 22px rgba(0,0,0,.12);

    scrollbar-width:thin;
    scrollbar-color:#71c39a #004d2e;
}

.sidebar::-webkit-scrollbar{
    width:7px;
}

.sidebar::-webkit-scrollbar-track{
    background:#004d2e;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#71c39a;
    border-radius:20px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
    background:#94d8b4;
}

.sidebar h2{
    margin:0 0 25px;
    padding:0 7px 20px;

    color:#fff;
    font-size:24px;
    font-weight:700;
    line-height:1.1;

    border-bottom:1px solid rgba(255,255,255,.18);
}

.sidebar h2 small{
    display:inline-block;
    margin-top:5px;
    color:#cce8d9;
    font-size:12px;
    font-weight:400;
}

.sidebar p{
    margin:0 5px 18px;
    color:#d9efe3;
    font-size:12px;
    line-height:1.45;
}

.sidebar a{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;

    margin:3px 0;
    padding:11px 12px;

    color:#f7fffa;
    font-size:14px;
    font-weight:500;

    border-radius:9px;
    transition:var(--transition);
}

.sidebar a:hover{
    color:#fff;
    background:rgba(255,255,255,.14);
    transform:translateX(3px);
}

.sidebar a.active-link,
.sidebar a.active{
    color:var(--primary-dark);
    background:#fff;
    font-weight:700;
    box-shadow:0 5px 16px rgba(0,0,0,.14);
}

.sidebar a:last-child{
    margin-top:16px;
    color:#fff5f3;
    background:rgba(176,58,46,.28);
}

.sidebar a:last-child:hover{
    background:rgba(176,58,46,.55);
}

/* =========================
   MAIN CONTENT AREA
   ========================= */

.main{
    min-height:100vh;
    margin-left:var(--sidebar-width);
    padding:30px;
}

.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:22px;
}

.page-header-title h1{
    margin-bottom:5px;
}

.page-header-title p{
    margin:0;
    color:var(--muted);
}

.page-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.content-container{
    width:100%;
    max-width:1600px;
    margin:0 auto;
}

/* =========================
   TOP NAVIGATION / TOOLBAR
   ========================= */

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    min-height:62px;
    margin-bottom:22px;
    padding:12px 18px;

    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.topbar-title{
    font-size:17px;
    font-weight:700;
}

.user-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 12px;

    background:var(--primary-light);
    border-radius:20px;

    color:var(--primary-dark);
    font-weight:600;
}

/* =========================
   BREADCRUMB
   ========================= */

.breadcrumb{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;

    margin-bottom:18px;

    color:var(--muted);
    font-size:12px;
}

.breadcrumb a{
    color:var(--primary);
}

.breadcrumb span{
    color:#9aa59f;
}

/* =========================
   GENERAL LAYOUT HELPERS
   ========================= */

.row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
}

.row-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.row-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.row-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.flex{
    display:flex;
}

.flex-wrap{
    flex-wrap:wrap;
}

.items-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.gap-5{
    gap:5px;
}

.gap-10{
    gap:10px;
}

.gap-15{
    gap:15px;
}

.mt-0{margin-top:0!important;}
.mt-10{margin-top:10px!important;}
.mt-20{margin-top:20px!important;}
.mb-0{margin-bottom:0!important;}
.mb-10{margin-bottom:10px!important;}
.mb-20{margin-bottom:20px!important;}

.text-center{text-align:center!important;}
.text-right{text-align:right!important;}
.text-muted{color:var(--muted)!important;}
.text-success{color:var(--success)!important;}
.text-danger{color:var(--danger)!important;}
.text-warning{color:var(--warning)!important;}
/* =========================================================
   PART 2: CARDS, TABLES, DASHBOARDS & CRM
   ========================================================= */

/* =========================
   CARDS
   ========================= */

.card{
    position:relative;

    margin-bottom:22px;
    padding:22px;

    background:var(--card-bg);

    border:1px solid var(--border);
    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);
}

.card:hover{
    box-shadow:0 10px 28px rgba(0,0,0,.09);
}

.card h2,
.card h3{
    margin-top:0;
}

.card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    margin:-22px -22px 20px;
    padding:17px 22px;

    border-bottom:1px solid var(--border);
}

.card-title{
    margin:0;
    font-size:18px;
    font-weight:700;
}

.card-subtitle{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
}

.card-footer{
    margin:20px -22px -22px;
    padding:16px 22px;

    background:#fafcfb;
    border-top:1px solid var(--border);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

/* =========================
   DASHBOARD STAT CARDS
   ========================= */

.stats,
.dash-grid,
.marketing-stats,
.campaign-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
    gap:17px;
    margin-bottom:24px;
}

.stat,
.dash-card,
.marketing-stat,
.campaign-stat{
    position:relative;

    min-height:118px;
    padding:20px;

    overflow:hidden;

    background:#fff;
    border:1px solid var(--border);
    border-left:5px solid var(--primary);
    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    transition:var(--transition);
}

.stat:hover,
.dash-card:hover,
.marketing-stat:hover,
.campaign-stat:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
}

.stat h2,
.dash-card h2,
.marketing-stat h2,
.campaign-stat h2{
    margin:0;

    color:var(--primary);
    font-size:28px;
    font-weight:700;
    line-height:1.15;
}

.stat p,
.dash-card p,
.marketing-stat p,
.campaign-stat p{
    margin:7px 0 0;

    color:var(--muted);
    font-size:13px;
    font-weight:500;
}

.stat.blue,
.dash-card.blue,
.marketing-stat.blue,
.campaign-stat.blue{
    border-left-color:var(--secondary);
}

.stat.blue h2,
.dash-card.blue h2,
.marketing-stat.blue h2,
.campaign-stat.blue h2{
    color:var(--secondary);
}

.stat.warning,
.dash-card.warning,
.marketing-stat.warning,
.campaign-stat.warning,
.campaign-stat.orange{
    border-left-color:var(--warning);
}

.stat.warning h2,
.dash-card.warning h2,
.marketing-stat.warning h2,
.campaign-stat.warning h2,
.campaign-stat.orange h2{
    color:var(--warning);
}

.stat.danger,
.dash-card.danger,
.marketing-stat.danger,
.campaign-stat.danger,
.campaign-stat.red{
    border-left-color:var(--danger);
}

.stat.danger h2,
.dash-card.danger h2,
.marketing-stat.danger h2,
.campaign-stat.danger h2,
.campaign-stat.red h2{
    color:var(--danger);
}

.stat.purple,
.dash-card.purple,
.marketing-stat.purple,
.campaign-stat.purple{
    border-left-color:var(--purple);
}

.stat.purple h2,
.dash-card.purple h2,
.marketing-stat.purple h2,
.campaign-stat.purple h2{
    color:var(--purple);
}

/* =========================
   TABLES
   ========================= */

.table-wrap,
.dashboard-table-wrap{
    width:100%;
    overflow-x:auto;

    border:1px solid var(--border);
    border-radius:var(--radius-md);
}

table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

th{
    padding:13px 12px;

    background:var(--primary-light);
    color:var(--primary-dark);

    border-bottom:2px solid #cfe3d7;

    text-align:left;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.25px;
    white-space:nowrap;
}

td{
    padding:12px;

    border-bottom:1px solid #e7ede9;

    vertical-align:top;
    color:#26312b;
}

tbody tr{
    transition:var(--transition);
}

tbody tr:hover{
    background:#f7fbf9;
}

tbody tr:last-child td{
    border-bottom:0;
}

.table-striped tbody tr:nth-child(even){
    background:#fbfcfc;
}

.table-compact th,
.table-compact td{
    padding:8px 9px;
}

.table-actions{
    white-space:nowrap;
}

.table-actions a{
    display:inline-block;
    margin-right:6px;
    font-size:12px;
}

.table-empty,
.empty-state{
    padding:30px!important;

    color:var(--muted);
    text-align:center!important;
}

.right{
    text-align:right!important;
}

.center{
    text-align:center!important;
}

.nowrap{
    white-space:nowrap!important;
}

/* =========================
   CRM
   ========================= */

.crm-small{
    margin-top:-12px;
    margin-bottom:20px;

    color:var(--muted);
    font-size:13px;
}

.crm-section-title,
.form-section-title{
    margin:24px 0 16px;
    padding-bottom:8px;

    color:var(--primary);
    font-size:17px;

    border-bottom:1px solid #d5e5dc;
}

.crm-table small{
    color:var(--muted);
}

.crm-customer-name{
    font-weight:700;
    color:var(--text);
}

.crm-location,
.crm-executive{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}

.crm-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;

    margin-bottom:18px;
}

.crm-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
}

/* =========================
   STATUS COLORS
   ========================= */

.priority-high{
    color:#c0392b;
    font-weight:700;
}

.priority-medium{
    color:#b9770e;
    font-weight:700;
}

.priority-low{
    color:#6c7771;
    font-weight:700;
}

.status-new{
    background:#2471a3!important;
}

.status-follow,
.status-follow-up{
    background:#e67e22!important;
}

.status-survey{
    background:#6f42c1!important;
}

.status-quotation{
    background:#008c8c!important;
}

.status-negotiation{
    background:#b7950b!important;
}

.status-won{
    background:#00804b!important;
}

.status-lost{
    background:#777!important;
}

/* =========================
   ACTIVITY / TIMELINE
   ========================= */

.timeline{
    position:relative;
    padding-left:26px;
}

.timeline::before{
    content:"";
    position:absolute;
    top:4px;
    bottom:4px;
    left:8px;
    width:2px;
    background:#d5e6dc;
}

.timeline-item{
    position:relative;
    margin-bottom:20px;
    padding:0 0 5px 10px;
}

.timeline-item::before{
    content:"";
    position:absolute;
    left:-23px;
    top:3px;

    width:12px;
    height:12px;

    background:var(--primary);
    border:3px solid #dff1e7;
    border-radius:50%;
}

.timeline-title{
    margin:0 0 3px;
    font-weight:700;
}

.timeline-meta{
    margin-bottom:5px;
    color:var(--muted);
    font-size:11px;
}

.activity-item{
    padding:12px 0;
    border-bottom:1px solid #e6ece9;
}

.activity-item:last-child{
    border-bottom:0;
}

.activity-time{
    display:block;
    margin-top:3px;

    color:#7b8781;
    font-size:11px;
}
/* =========================================================
   PART 3: FORMS, BUTTONS, BADGES, ALERTS & MODALS
   ========================================================= */

/* =========================
   FORMS
   ========================= */

form{
    margin:0;
}

label{
    display:block;
    margin:0 0 5px;

    color:#29342e;
    font-size:13px;
    font-weight:600;
}

input,
select,
textarea{
    width:100%;
    min-height:42px;

    margin:0 0 14px;
    padding:10px 12px;

    background:#fff;
    color:var(--text);

    border:1px solid #cfd9d3;
    border-radius:var(--radius-sm);

    font-family:inherit;
    font-size:14px;

    outline:none;
    transition:var(--transition);
}

textarea{
    min-height:95px;
    resize:vertical;
    line-height:1.45;
}

input:hover,
select:hover,
textarea:hover{
    border-color:#9fb9aa;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(0,107,63,.12);
}

input:disabled,
select:disabled,
textarea:disabled{
    background:#edf1ef;
    color:#77837d;
    cursor:not-allowed;
}

input[type="checkbox"],
input[type="radio"]{
    width:auto;
    min-height:auto;
    margin:0 6px 0 0;
    accent-color:var(--primary);
}

input[type="file"]{
    padding:8px;
    background:#fafcfb;
}

input::placeholder,
textarea::placeholder{
    color:#9aa59f;
}

.form-help{
    display:block;
    margin-top:-9px;
    margin-bottom:12px;

    color:var(--muted);
    font-size:11px;
}

.form-group{
    margin-bottom:15px;
}

.required::after{
    content:" *";
    color:var(--danger);
}

.input-error{
    border-color:var(--danger)!important;
}

.error-text{
    display:block;
    margin-top:-9px;
    margin-bottom:10px;

    color:var(--danger);
    font-size:11px;
}

/* =========================
   BUTTONS
   ========================= */

button,
.btn,
input[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-height:40px;

    padding:9px 16px;

    background:var(--primary);
    color:#fff;

    border:1px solid var(--primary);
    border-radius:var(--radius-sm);

    font-family:inherit;
    font-size:13px;
    font-weight:600;

    cursor:pointer;
    text-decoration:none;

    transition:var(--transition);
}

button:hover,
.btn:hover,
input[type="submit"]:hover{
    color:#fff;
    background:var(--primary-dark);
    border-color:var(--primary-dark);

    transform:translateY(-1px);
    box-shadow:0 5px 12px rgba(0,107,63,.18);
}

button:active,
.btn:active{
    transform:translateY(0);
}

.btn-secondary,
.secondary{
    color:var(--primary)!important;
    background:#fff!important;
    border-color:#b8cec1!important;
}

.btn-secondary:hover,
.secondary:hover{
    color:var(--primary-dark)!important;
    background:var(--primary-light)!important;
}

.btn-danger{
    background:var(--danger)!important;
    border-color:var(--danger)!important;
}

.btn-danger:hover{
    background:#8f2f25!important;
}

.btn-warning{
    background:var(--warning)!important;
    border-color:var(--warning)!important;
}

.btn-info{
    background:var(--secondary)!important;
    border-color:var(--secondary)!important;
}

.btn-light{
    color:var(--text)!important;
    background:#f4f7f6!important;
    border-color:#d9e1dc!important;
}

.btn-sm{
    min-height:32px;
    padding:6px 10px;
    font-size:11px;
}

.btn-lg{
    min-height:48px;
    padding:12px 20px;
    font-size:15px;
}

.btn-block{
    width:100%;
}

/* =========================
   BADGES
   ========================= */

.badge,
.crm-badge,
.campaign-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:25px;

    padding:4px 9px;

    color:#fff;

    border-radius:20px;

    font-size:11px;
    font-weight:700;
    line-height:1;

    white-space:nowrap;
}

.active,
.badge-active{
    background:var(--success);
}

.inactive,
.badge-draft{
    background:#7d8782;
}

.badge-paused{
    background:var(--warning);
}

.badge-completed{
    background:var(--secondary);
}

.badge-cancelled{
    background:var(--danger);
}

.badge-pending{
    background:#d68910;
}

.badge-approved{
    background:#2471a3;
}

.badge-paid{
    background:#00804b;
}

.badge-soft{
    color:var(--primary-dark);
    background:var(--primary-light);
}

/* =========================
   ALERTS / MESSAGES
   ========================= */

.alert,
.message-success,
.message-error,
.message-warning,
.message-info{
    margin-bottom:16px;
    padding:12px 14px;

    border:1px solid transparent;
    border-radius:var(--radius-sm);

    font-size:13px;
    line-height:1.4;
}

.alert-success,
.message-success{
    color:#176b3a;
    background:#eaf8ef;
    border-color:#b9e0c7;
}

.alert-danger,
.message-error{
    color:#9f2f24;
    background:#fff0ee;
    border-color:#efc0ba;
}

.alert-warning,
.message-warning{
    color:#8a5b00;
    background:#fff8e6;
    border-color:#efd69d;
}

.alert-info,
.message-info{
    color:#205f8e;
    background:#edf7ff;
    border-color:#bcdaf0;
}

/* =========================
   MODALS
   ========================= */

.modal-overlay{
    position:fixed;
    inset:0;
    z-index:9998;

    display:none;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(11,22,16,.58);
    backdrop-filter:blur(2px);
}

.modal-overlay.show{
    display:flex;
}

.modal{
    width:100%;
    max-width:650px;
    max-height:90vh;

    overflow-y:auto;

    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:17px 20px;

    border-bottom:1px solid var(--border);
}

.modal-title{
    margin:0;
    font-size:18px;
}

.modal-close{
    width:34px;
    height:34px;
    min-height:auto;
    padding:0;

    color:#56635c;
    background:#f1f4f2;
    border:0;
    border-radius:50%;
}

.modal-body{
    padding:20px;
}

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;

    padding:15px 20px;

    background:#fafcfb;
    border-top:1px solid var(--border);
}

/* =========================
   DROPDOWNS / TOOLTIP
   ========================= */

.dropdown{
    position:relative;
    display:inline-block;
}

.dropdown-menu{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    z-index:100;

    display:none;

    min-width:180px;
    padding:7px;

    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);

    box-shadow:var(--shadow-lg);
}

.dropdown.open .dropdown-menu{
    display:block;
}

.dropdown-menu a{
    display:block;
    padding:8px 10px;
    border-radius:6px;
}

.dropdown-menu a:hover{
    background:var(--primary-light);
}

.tooltip{
    position:relative;
}

.tooltip:hover::after{
    content:attr(data-tooltip);

    position:absolute;
    left:50%;
    bottom:calc(100% + 8px);
    z-index:200;

    transform:translateX(-50%);

    min-width:120px;
    padding:7px 9px;

    color:#fff;
    background:#1f2b25;

    border-radius:6px;

    font-size:11px;
    text-align:center;
    white-space:nowrap;
}
/* =========================================================
   PART 4: MARKETING, CAMPAIGN MANAGER, RESPONSIVE & PRINT
   ========================================================= */

/* =========================
   MARKETING DASHBOARD
   ========================= */

.marketing-head,
.campaign-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:22px;
}

.marketing-head h1,
.campaign-heading h1{
    margin-bottom:5px;
}

.marketing-subtitle,
.campaign-subtitle{
    margin:0;
    color:var(--muted);
}

.quick-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.dashboard-two-column{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-bottom:20px;
}

.source-name{
    font-weight:700;
}

.followup-overdue{
    color:var(--danger);
    font-weight:700;
}

.followup-today{
    color:var(--warning);
    font-weight:700;
}

/* =========================
   CAMPAIGN MANAGER
   ========================= */

.campaign-table{
    min-width:1150px;
}

.metric-small{
    color:var(--muted);
    font-size:11px;
}

.action-links{
    white-space:nowrap;
}

.roi-positive{
    color:var(--success);
    font-weight:700;
}

.roi-negative{
    color:var(--danger);
    font-weight:700;
}

.campaign-performance{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:18px;
}

.campaign-progress{
    width:100%;
    height:8px;

    overflow:hidden;

    background:#e8eeea;
    border-radius:10px;
}

.campaign-progress span{
    display:block;
    height:100%;
    background:var(--primary);
    border-radius:10px;
}

/* =========================
   CUSTOMER PROFILE
   ========================= */

.profile-header{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:18px;
    align-items:center;

    margin-bottom:22px;
    padding:22px;

    background:linear-gradient(135deg,#fff,#f1f8f4);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
}

.profile-avatar{
    display:flex;
    align-items:center;
    justify-content:center;

    width:72px;
    height:72px;

    color:#fff;
    background:var(--primary);

    border-radius:50%;

    font-size:26px;
    font-weight:700;
}

.profile-name{
    margin:0 0 6px;
    font-size:24px;
}

.profile-meta{
    color:var(--muted);
}

.profile-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* =========================
   MOBILE SIDEBAR BUTTON
   ========================= */

.mobile-menu-button{
    display:none;

    position:fixed;
    top:12px;
    left:12px;
    z-index:1200;

    width:42px;
    height:42px;
    min-height:auto;
    padding:0;

    border-radius:50%;
}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:1200px){

    .main{
        padding:24px;
    }

    .row-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-two-column{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){

    :root{
        --sidebar-width:250px;
    }

    .sidebar{
        transform:translateX(-100%);
        transition:transform .25s ease;
    }

    body.sidebar-open .sidebar{
        transform:translateX(0);
    }

    .main{
        margin-left:0;
        padding:68px 18px 24px;
    }

    .mobile-menu-button{
        display:flex;
    }

    .marketing-head,
    .campaign-heading,
    .page-header{
        display:block;
    }

    .quick-actions,
    .page-actions{
        margin-top:14px;
    }

    .row-2,
    .row-3,
    .row-4{
        grid-template-columns:1fr;
    }

    .profile-header{
        grid-template-columns:1fr;
        text-align:center;
    }

    .profile-avatar{
        margin:0 auto;
    }

    .profile-actions{
        justify-content:center;
    }
}

@media(max-width:650px){

    body{
        font-size:13px;
    }

    .main{
        padding-left:12px;
        padding-right:12px;
    }

    h1{
        font-size:23px;
    }

    .card{
        padding:16px;
        border-radius:12px;
    }

    .card-header{
        margin:-16px -16px 16px;
        padding:14px 16px;
    }

    .card-footer{
        margin:16px -16px -16px;
        padding:14px 16px;
    }

    .row{
        grid-template-columns:1fr;
        gap:10px;
    }

    .stats,
    .dash-grid,
    .marketing-stats,
    .campaign-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .stat,
    .dash-card,
    .marketing-stat,
    .campaign-stat{
        min-height:100px;
        padding:14px;
    }

    .stat h2,
    .dash-card h2,
    .marketing-stat h2,
    .campaign-stat h2{
        font-size:22px;
    }

    .quick-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .quick-actions a{
        text-align:center;
    }

    button,
    .btn,
    input[type="submit"]{
        min-height:42px;
    }

    .modal{
        border-radius:12px;
    }
}

@media(max-width:420px){

    .stats,
    .dash-grid,
    .marketing-stats,
    .campaign-grid{
        grid-template-columns:1fr;
    }

    .quick-actions{
        grid-template-columns:1fr;
    }

    .sidebar{
        width:88%;
    }
}

/* =========================
   PRINT STYLES
   ========================= */

@media print{

    body{
        background:#fff!important;
        color:#000!important;
        font-size:11px;
    }

    .sidebar,
    .topbar,
    .actions,
    .quick-actions,
    .page-actions,
    .mobile-menu-button,
    button,
    .btn,
    input[type="submit"],
    .no-print{
        display:none!important;
    }

    .main{
        margin:0!important;
        padding:0!important;
    }

    .card{
        break-inside:avoid;

        margin-bottom:12px;
        padding:12px;

        border:1px solid #ccc;
        border-radius:0;

        box-shadow:none;
    }

    table{
        page-break-inside:auto;
    }

    tr{
        page-break-inside:avoid;
        page-break-after:auto;
    }

    thead{
        display:table-header-group;
    }

    th{
        color:#000!important;
        background:#e8e8e8!important;
    }

    a{
        color:#000!important;
        text-decoration:none!important;
    }

    @page{
        size:A4;
        margin:10mm;
    }
}
.page-label{
    display:inline-block;
    margin:0 0 7px;
    padding:5px 10px;

    color:#006b3f;
    background:#eaf5ef;

    border:1px solid #cfe3d7;
    border-radius:20px;

    font-size:11px;
    font-weight:700;
    letter-spacing:.7px;
}

.page-header-title h1{
    margin:0 0 7px;
    color:#17211c;
}

.page-header-title > p:last-child{
    margin:0;
    color:#68756e;
}