/* =========================================================
   DSR CRM - PREMIUM LOOK (v8)
   Changes the design only; behaviour and logic are unchanged.
   Loaded after style.css + theme.css.
========================================================= */

:root{
    /* DSR logo colours */
    --brand-blue:#4880d8;      /* "DSR" letters */
    --brand-deep:#0048a8;      /* "DIGITAL MARKETING" text */
    --brand-red:#e4302a;       /* swoosh */
    --navy-1:#00204d;
    --navy-2:#00357d;
    --blue:#0048a8;
    --blue-d:#00357d;
    --accent:#e4302a;
    --font-head:"Barlow Condensed","Oswald","Arial Narrow",Arial,sans-serif;
    --page:#eef2f8;
    --ink:#0f1a33;
    --muted:#667085;
    --line:#e4e9f2;
    --card-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
}

body{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--ink);
    background:
        radial-gradient(1100px 420px at 85% -120px,rgba(72,128,216,.14),transparent 70%),
        var(--page);
    letter-spacing:-.005em;
}

h1,h2,h3{font-family:var(--font-head);letter-spacing:.01em;font-weight:700;}
h2{font-size:1.45em;}
.section-title h2,.panel-head h2{font-size:24px;text-transform:uppercase;letter-spacing:.03em;}
.panel h1,.panel h2,.panel h3,.premium-panel h2,.section-title h2{color:var(--ink);}
::selection{background:rgba(0,72,168,.18);}

/* ---------- cards / panels ---------- */
.panel,
.premium-panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--card-shadow);
}
.panel-head,.section-title{border-bottom:0;}
.section-title h2,.panel-head h2{font-size:20px;margin:0;}
.section-title p,.panel-head p{color:var(--muted);margin:4px 0 0;font-size:13.5px;}

/* ---------- stat cards ---------- */
.stat{
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--card-shadow);
    overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease;
}
.stat::before{
    content:"";
    position:absolute;left:0;top:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--brand-deep),var(--brand-blue) 62%,var(--brand-red));
}
.stat:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,24,40,.05),0 16px 34px rgba(16,24,40,.10);}

/* ---------- buttons ---------- */
.btn,
button.btn,
a.btn{
    background:linear-gradient(135deg,#1a5fc4,var(--blue-d));
    color:#fff;
    border:0;
    border-radius:11px;
    font-weight:700;
    letter-spacing:.01em;
    box-shadow:0 6px 16px rgba(0,72,168,.28),inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 22px rgba(0,72,168,.34);}
.btn:active{transform:translateY(0);}
.btn:disabled,button:disabled{opacity:.7;cursor:not-allowed;transform:none;}

/* ---------- forms ---------- */
label{font-weight:600;font-size:13px;color:#344054;}
input,select,textarea{
    font-family:inherit;
    border:1px solid #d5dbe7;
    border-radius:11px;
    background:#fff;
    transition:border-color .15s ease,box-shadow .15s ease;
}
input:hover,select:hover,textarea:hover{border-color:#b8c3d9;}
input:focus,select:focus,textarea:focus{
    border-color:var(--blue) !important;
    box-shadow:0 0 0 4px rgba(0,72,168,.13) !important;
}
::placeholder{color:#98a2b3;}

/* ---------- tables ---------- */
.table-wrap{
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
}
table{border-collapse:separate;border-spacing:0;}
th{
    background:#f7f9fc;
    color:#475467;
    font-size:11.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    font-weight:800;
    border-bottom:1px solid var(--line);
}
td{border-bottom:1px solid #eef1f6;}
tr:last-child td{border-bottom:0;}
tr:hover td{background:#f9fbff;}

/* ---------- alerts ---------- */
.error,.success{border-radius:12px;font-weight:600;border:1px solid transparent;}
.error{background:#fff1f0;color:#b42318;border-color:#fecdca;}
.success{background:#ecfdf3;color:#067647;border-color:#abefc6;}

/* ---------- quick actions ---------- */
.quick-action-btn{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.quick-action-btn:hover{
    transform:translateY(-3px);
    border-color:#c7d6f5;
    box-shadow:0 14px 28px rgba(0,72,168,.13);
}
.quick-action-btn.primary-action{
    background:linear-gradient(135deg,#1a5fc4,var(--blue-d));
    border-color:transparent;
    color:#fff;
}
.quick-action-btn.primary-action small{color:rgba(255,255,255,.8);}

/* ---------- login / installer ---------- */
.login-body{
    background:
        radial-gradient(900px 500px at 15% 10%,rgba(0,72,168,.28),transparent 65%),
        radial-gradient(800px 500px at 90% 95%,rgba(228,48,42,.22),transparent 60%),
        linear-gradient(160deg,var(--navy-1),var(--navy-2));
}
.login-card{
    border:1px solid rgba(255,255,255,.6);
    border-radius:24px;
    padding:36px 34px;
    box-shadow:0 30px 70px rgba(5,12,40,.45);
}
.login-card h1{font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-deep);}
.login-card .muted{margin:0 0 4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
.login-card .small{font-size:12px;}

/* ---------- desktop sidebar refinement ---------- */
@media (min-width:992px){
    .topbar{
        background:
            radial-gradient(260px 200px at 0% 0%,rgba(72,128,216,.30),transparent 70%),
            linear-gradient(180deg,var(--navy-1),var(--navy-2)) !important;
        border-right:1px solid rgba(255,255,255,.06) !important;
    }
    .topbar .brand{box-shadow:0 8px 22px rgba(0,0,0,.25);}
    .brand-text strong{font-family:var(--font-head);font-size:24px;letter-spacing:.04em;color:var(--brand-deep);}
    .brand-text small{color:var(--brand-red);letter-spacing:.06em;text-transform:uppercase;}
    .nav-label{color:#8fb0ee;letter-spacing:.14em;font-family:var(--font-head);font-size:13px;}
    .topbar nav a{font-weight:600;transition:background .15s ease,color .15s ease,transform .15s ease;}
    .topbar nav a:hover{transform:translateX(2px);}
    .topbar nav a.active{
        background:linear-gradient(135deg,#3b79d6,var(--blue));
        box-shadow:0 8px 20px rgba(0,72,168,.45),inset 3px 0 0 var(--brand-red);
    }
    .side-user{border:1px solid rgba(255,255,255,.08);}
    .side-avatar{background:linear-gradient(135deg,var(--brand-blue),var(--brand-red));color:#fff;}
}

/* ---------- brand details ---------- */
.brand-text strong{font-family:var(--font-head);}
th{font-family:var(--font-head);font-size:13.5px;letter-spacing:.08em;}
.stat strong,.stat .value,.stat h3{font-family:var(--font-head);}
a{color:var(--brand-deep);}
.btn.danger,.delete-btn,.delete-link{--x:0;}

/* ---------- mobile refinement ---------- */
@media (max-width:600px){
    .topbar{background:linear-gradient(135deg,#1a5fc4,var(--navy-2)) !important;}
    .brand-text strong{color:#fff;font-family:var(--font-head);font-size:21px;letter-spacing:.04em;}
    .brand-text small{color:#ffd0cd;}
    .panel,.premium-panel,.stat{border-radius:16px;}
}

/* ---------- print: invoices clean rahein ---------- */
@media print{
    .topbar,.mobile-bottom-bar,.desktop-footer{display:none !important;}
    body{padding-left:0 !important;background:#fff !important;}
    .panel,.stat{box-shadow:none;border-color:#ddd;}
}

/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important;}
}