:root {
    --sidebar-width: 260px;
    --primary: #003882;
    --primary-light: #0b2545;
    --accent: #ffc800;
    --accent-hover: #e6b200;
    --surface: #09182a;
    --bg: #f4f6fa;
    --card-bg: #ffffff;
    --text-muted-custom: #5c6b8a;
}

* { 
    box-sizing: border-box; 
}

body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg); 
    margin: 0; 
}

/* ── Sidebar ── */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: linear-gradient(180deg, var(--surface) 0%, var(--primary-light) 50%, var(--primary) 100%);
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 1000;
    display: flex; 
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
    transition: transform .3s ease;
}

.sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand img.logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
}
.sidebar-brand h5 {
    color: var(--accent); 
    margin: 0; 
    font-weight: 700; 
    font-size: 15px; 
    letter-spacing: .5px;
}
.sidebar-brand small { 
    color: rgba(255,255,255,.45); 
    font-size: 11px; 
}

.sidebar-nav { 
    padding: 16px 0; 
    flex: 1; 
    overflow-y: auto; 
}
.sidebar-nav .nav-label {
    font-size: 10px; 
    font-weight: 600; 
    letter-spacing: 1.5px; 
    text-transform: uppercase;
    color: rgba(255,255,255,.3); 
    padding: 12px 20px 4px;
}
.sidebar-nav a {
    display: flex; 
    align-items: center; 
    gap: 12px;
    padding: 11px 20px; 
    color: rgba(255,255,255,.75);
    text-decoration: none; 
    font-size: 14px; 
    font-weight: 450;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
    color: #fff; 
    background: rgba(255, 200, 0, 0.14);
    border-left-color: var(--accent);
}
.sidebar-nav a i { 
    font-size: 16px; 
    width: 20px; 
    text-align: center; 
}

.sidebar-footer {
    padding: 16px 20px; 
    border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-footer .user-info small { 
    color: rgba(255,255,255,.5); 
    font-size: 11px; 
}
.sidebar-footer .user-info strong { 
    color: #fff; 
    font-size: 13px; 
    display: block; 
}

.btn-logout {
    margin-top: 10px; 
    width: 100%; 
    font-size: 12px;
    background: rgba(220,53,69,.15); 
    border: 1px solid rgba(220,53,69,.3);
    color: #f8d7da; 
    border-radius: 6px; 
    padding: 7px;
    transition: all .2s; 
    text-decoration: none; 
    display: block; 
    text-align: center;
}
.btn-logout:hover { 
    background: rgba(220,53,69,.3); 
    color: #fff; 
}

/* ── Main Layout ── */
#main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex; 
    flex-direction: column;
}
.topbar {
    background: var(--card-bg); 
    padding: 14px 28px;
    border-bottom: 1px solid #e9ecef;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    position: sticky; 
    top: 0; 
    z-index: 100;
}
.topbar h1 { 
    font-size: 18px; 
    font-weight: 600; 
    color: var(--primary); 
    margin: 0; 
}
.page-content { 
    padding: 28px; 
    flex: 1; 
}

/* ── Cards ── */
.stat-card {
    background: var(--card-bg); 
    border-radius: 14px;
    padding: 22px; 
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    border: 1px solid #edf0f7; 
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 6px 22px rgba(0,0,0,.11); 
}
.stat-card .stat-icon {
    width: 48px; 
    height: 48px; 
    border-radius: 12px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 22px; 
    margin-bottom: 14px;
}
.stat-card .stat-value { 
    font-size: 28px; 
    font-weight: 700; 
    color: var(--primary); 
}
.stat-card .stat-label { 
    font-size: 13px; 
    color: var(--text-muted-custom); 
    margin-top: 2px; 
}

/* ── Tables ── */
.table-card {
    background: var(--card-bg); 
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07); 
    border: 1px solid #edf0f7; 
    overflow: hidden;
}
.table-card-header {
    padding: 16px 22px; 
    border-bottom: 1px solid #edf0f7;
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}
.table-card-header h6 { 
    margin: 0; 
    font-weight: 600; 
    color: var(--primary); 
    font-size: 15px; 
}
.table th { 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: .5px; 
    text-transform: uppercase; 
    color: var(--text-muted-custom); 
}
.table td { 
    vertical-align: middle; 
    font-size: 14px; 
}

/* ── Badges ── */
.badge-draft        { background: #e9ecef; color: #495057; }
.badge-sending      { background: #fff3cd; color: #856404; }
.badge-sent         { background: #d1e7dd; color: #0a3622; }
.badge-pending      { background: #e9ecef; color: #495057; }
.badge-delivered    { background: #d1e7dd; color: #0a3622; }
.badge-opened       { background: #cfe2ff; color: #084298; }
.badge-bounced      { background: #f8d7da; color: #842029; }
.badge-failed       { background: #f8d7da; color: #842029; }
.badge-unsubscribed { background: #fff3cd; color: #856404; }

/* ── Progress bars ── */
.metric-bar { 
    height: 8px; 
    border-radius: 99px; 
    overflow: hidden; 
    background: #e9ecef; 
}
.metric-bar .fill { 
    height: 100%; 
    border-radius: 99px; 
    transition: width .6s ease; 
}

/* ── Alerts ── */
.alert { 
    border-radius: 10px; 
    font-size: 14px; 
    border: none; 
}

/* ── Buttons ── */
.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary), #0052bf);
    color: #fff; 
    border: none; 
    border-radius: 8px; 
    font-weight: 500;
    padding: 9px 20px; 
    font-size: 14px; 
    transition: all .2s;
}
.btn-primary-custom:hover { 
    opacity: .9; 
    transform: translateY(-1px); 
    color: #fff; 
    box-shadow: 0 4px 14px rgba(0, 56, 130, 0.35); 
}

/* ── Forms ── */
.form-control, .form-select {
    border-radius: 8px; 
    border-color: #dee2e6; 
    font-size: 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary); 
    box-shadow: 0 0 0 .2rem rgba(0, 56, 130, 0.15);
}
.form-label { 
    font-size: 13px; 
    font-weight: 500; 
    color: #495057; 
}

/* ── Quill editor ── */
.ql-container { 
    min-height: 300px; 
    font-family: 'Inter', sans-serif; 
    font-size: 14px; 
    border-radius: 0 0 8px 8px !important; 
}
.ql-toolbar { 
    border-radius: 8px 8px 0 0 !important; 
    border-color: #dee2e6 !important; 
}
.ql-container.ql-snow { 
    border-color: #dee2e6 !important; 
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.show { transform: translateX(0); }
    #main { margin-left: 0; }
}