/* =========================================================
   AutoWorkshop — Complete Stylesheet
   Car Service & Billing System
   ========================================================= */

/* ---------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------- */
:root{
    --bg:#f4f6fb;
    --card:#ffffff;
    --ink:#0f172a;
    --ink-2:#334155;
    --muted:#64748b;
    --line:#e2e8f0;
    --line-2:#eef2f7;

    --primary:#4f46e5;
    --primary-600:#4338ca;
    --primary-soft:#eef2ff;

    --success:#10b981;
    --success-soft:#ecfdf5;
    --danger:#ef4444;
    --danger-soft:#fef2f2;
    --warn:#f59e0b;
    --warn-soft:#fffbeb;
    --info:#0ea5e9;
    --info-soft:#e0f2fe;

    --sidebar-w:260px;
    --radius:14px;
    --radius-sm:10px;
    --radius-xs:8px;

    --shadow-xs:0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:0 1px 3px rgba(15,23,42,.06);
    --shadow-md:0 8px 24px rgba(15,23,42,.08);
    --shadow-lg:0 20px 60px rgba(15,23,42,.14);

    --transition:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

body{
    margin:0;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    font-size:14.5px;
    line-height:1.55;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}

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

img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

/* selection */
::selection{background:rgba(79,70,229,.2);color:var(--ink)}

/* focus ring for keyboard users */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------
   3. APP SHELL
   --------------------------------------------------------- */
.app{
    display:flex;
    min-height:100vh;
    width:100%;
}

/* ---------------------------------------------------------
   4. SIDEBAR
   --------------------------------------------------------- */
.sidebar{
    width:var(--sidebar-w);
    flex-shrink:0;
    background:linear-gradient(180deg,#0b1220 0%,#111a2e 100%);
    color:#cbd5e1;
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;left:0;bottom:0;
    z-index:100;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#1e293b transparent;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:#1e293b;border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#334155}

/* brand block */
.sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px 20px;
    border-bottom:1px solid rgba(148,163,184,.1);
    position:relative;
}
.brand-logo{
    width:40px;height:40px;
    border-radius:12px;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;
    box-shadow:0 8px 20px rgba(79,70,229,.35);
    flex-shrink:0;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em}
.brand-text small{
    color:#94a3b8;font-size:10.5px;
    letter-spacing:.06em;text-transform:uppercase;
    font-weight:600;
}

.sidebar-close{
    display:none;
    margin-left:auto;
    background:rgba(255,255,255,.06);
    color:#e2e8f0;
    border:0;
    width:30px;height:30px;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    align-items:center;justify-content:center;
    transition:background var(--transition);
}
.sidebar-close:hover{background:rgba(255,255,255,.12)}

/* user block */
.sidebar-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 20px;
    border-bottom:1px solid rgba(148,163,184,.1);
}
.avatar{
    width:42px;height:42px;
    border-radius:12px;
    flex-shrink:0;
    background:linear-gradient(135deg,#0ea5e9,#6366f1);
    color:#fff;
    font-weight:700;
    font-size:16px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(14,165,233,.28);
}
.user-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.user-name{
    color:#f1f5f9;
    font-weight:600;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.role-pill{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    width:max-content;
}
.role-admin    {background:rgba(239,68,68,.15);  color:#fca5a5}
.role-manager  {background:rgba(245,158,11,.15); color:#fcd34d}
.role-sales    {background:rgba(16,185,129,.15); color:#6ee7b7}
.role-customer {background:rgba(99,102,241,.18); color:#a5b4fc}

/* nav */
.sidebar-nav{flex:1;padding:14px 12px}
.nav-section{margin-bottom:18px}
.nav-section-title{
    padding:8px 12px 6px;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#64748b;
}
.nav-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    border-radius:var(--radius-sm);
    color:#cbd5e1;
    font-weight:500;
    font-size:14px;
    transition:all var(--transition);
    margin-bottom:2px;
    position:relative;
}
.nav-link:hover{
    background:rgba(148,163,184,.08);
    color:#fff;
    text-decoration:none;
}
.nav-link.active{
    background:linear-gradient(90deg,rgba(79,70,229,.22),rgba(79,70,229,.05));
    color:#fff;
    font-weight:600;
}
.nav-link.active::before{
    content:"";
    position:absolute;
    left:-12px;top:8px;bottom:8px;
    width:3px;
    border-radius:0 3px 3px 0;
    background:linear-gradient(180deg,#6366f1,#a855f7);
    box-shadow:0 0 12px rgba(99,102,241,.7);
}
.nav-icon{
    width:18px;height:18px;
    flex-shrink:0;
    color:currentColor;
    opacity:.85;
}
.nav-link.active .nav-icon{opacity:1}

.sidebar-footer{
    padding:12px;
    border-top:1px solid rgba(148,163,184,.1);
}
.logout-link{color:#fca5a5}
.logout-link:hover{background:rgba(239,68,68,.12);color:#fff}


/* =========================================================
   TOPBAR SEARCH
   ========================================================= */
.topbar-search{
    position:relative;
    display:flex;
    align-items:center;
    width:360px;
    max-width:42vw;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:0 12px;
    height:42px;
    transition:border-color var(--transition), box-shadow var(--transition);
}
.topbar-search:hover{border-color:#cbd5e1}
.topbar-search:focus-within{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(79,70,229,.12);
}

.topbar-search-icon{
    width:16px;
    height:16px;
    color:var(--muted);
    flex-shrink:0;
    margin-right:8px;
}

.topbar-search-input{
    flex:1;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    padding:0 !important;
    height:100%;
    font-size:13.5px;
    color:var(--ink);
    box-shadow:none !important;
}
.topbar-search-input::placeholder{color:#94a3b8}

.topbar-search-kbd{
    font-family:inherit;
    font-size:10.5px;
    font-weight:600;
    color:var(--muted);
    background:#f1f5f9;
    border:1px solid var(--line);
    border-radius:5px;
    padding:2px 6px;
    letter-spacing:.02em;
    white-space:nowrap;
    margin-left:6px;
    user-select:none;
}

@media (max-width:820px){
    .topbar-search{width:100%;max-width:none}
    .topbar-search-kbd{display:none}
}

@media (max-width:560px){
    .topbar-search{height:38px;padding:0 10px}
    .topbar-search-input{font-size:13px}
}

/* ---------------------------------------------------------
   5. MAIN AREA
   --------------------------------------------------------- */
.main{
    flex:1;
    margin-left:var(--sidebar-w);
    min-width:0;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* topbar */
.topbar{
    background:rgba(255,255,255,.85);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
    padding:16px 28px;
    display:flex;
    align-items:center;
    gap:18px;
    position:sticky;
    top:0;
    z-index:50;
}

.menu-toggle{
    display:none;
    width:40px;height:40px;
    border-radius:10px;
    background:#fff;
    border:1px solid var(--line);
    cursor:pointer;
    padding:0;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    flex-shrink:0;
    transition:all var(--transition);
}
.menu-toggle:hover{background:#f8fafc;border-color:#cbd5e1}
.menu-toggle span{
    display:block;
    width:18px;height:2px;
    background:var(--ink);
    border-radius:2px;
}

.topbar-title{flex:1;min-width:0}
.topbar-title h1{
    font-size:20px;
    font-weight:700;
    letter-spacing:-.015em;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.topbar-date{
    margin:2px 0 0;
    font-size:12.5px;
    color:var(--muted);
    font-weight:500;
}

.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* content */
.content{
    flex:1;
    padding:26px 28px 40px;
    max-width:1400px;
    width:100%;
}

/* footer */
.footer{
    padding:16px 28px 24px;
    color:var(--muted);
    font-size:12.5px;
    display:flex;
    gap:8px;
    align-items:center;
    border-top:1px solid var(--line);
    background:#fff;
    flex-wrap:wrap;
}
.footer-dot{opacity:.4}

/* ---------------------------------------------------------
   6. PAGE HEAD
   --------------------------------------------------------- */
.page-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:22px;
}
.page-head h1{
    font-size:22px;
    font-weight:700;
    letter-spacing:-.02em;
}
.page-head .btn{margin:0}

/* ---------------------------------------------------------
   7. CARDS
   --------------------------------------------------------- */
.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    margin-bottom:22px;
    box-shadow:var(--shadow-xs);
    transition:box-shadow var(--transition);
}
.card:hover{box-shadow:var(--shadow-sm)}
.card h2{
    font-size:15.5px;
    font-weight:700;
    letter-spacing:-.01em;
    margin:0 0 16px;
    display:flex;
    align-items:center;
    gap:10px;
}
.card h2::before{
    content:"";
    width:3px;height:16px;
    border-radius:2px;
    background:linear-gradient(180deg,#6366f1,#a855f7);
    flex-shrink:0;
}

/* ---------------------------------------------------------
   8. GRID
   --------------------------------------------------------- */
.grid{display:grid;gap:18px}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* ---------------------------------------------------------
   9. STAT CARDS
   --------------------------------------------------------- */
.stat{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
    position:relative;
    overflow:hidden;
    transition:transform var(--transition), box-shadow var(--transition);
}
.stat::after{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899);
    opacity:.85;
}
.stat:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}
.stat .label{
    color:var(--muted);
    font-size:11.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.stat .value{
    font-size:28px;
    font-weight:800;
    letter-spacing:-.025em;
    margin-top:8px;
    color:var(--ink);
    line-height:1.15;
}

/* ---------------------------------------------------------
   10. FORMS
   --------------------------------------------------------- */
label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    margin-bottom:6px;
    color:var(--ink-2);
    letter-spacing:.005em;
}
label input[type=checkbox],
label input[type=radio]{
    width:auto;
    margin-right:6px;
    vertical-align:middle;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=tel],
input[type=search],
input[type=url],
select,
textarea{
    width:100%;
    padding:11px 13px;
    border:1px solid #d5dbe6;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-family:inherit;
    background:#fff;
    color:var(--ink);
    transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input::placeholder,
textarea::placeholder{color:#94a3b8}

input:hover,
select:hover,
textarea:hover{border-color:#b8c1d1}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(79,70,229,.12);
}

input:disabled,
select:disabled,
textarea:disabled{
    background:#f8fafc;
    color:var(--muted);
    cursor:not-allowed;
}

textarea{
    resize:vertical;
    min-height:80px;
    line-height:1.5;
}

select{
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:36px;
}

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

/* ---------------------------------------------------------
   11. BUTTONS
   --------------------------------------------------------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:var(--radius-sm);
    padding:10px 18px;
    background:var(--primary);
    color:#fff;
    font-size:14px;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    line-height:1.4;
    transition:all var(--transition);
    box-shadow:0 2px 8px rgba(79,70,229,.2);
    white-space:nowrap;
    text-decoration:none;
}
.btn:hover{
    background:var(--primary-600);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(79,70,229,.35);
    text-decoration:none;
}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex-shrink:0}

.btn.small{padding:7px 13px;font-size:13px}
.btn.small svg{width:13px;height:13px}

.btn.ghost{
    background:transparent;
    border:1px solid #475569;
    color:#e2e8f0;
    box-shadow:none;
}
.btn.ghost:hover{background:#1e293b;color:#fff}

.btn.secondary{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
    box-shadow:var(--shadow-xs);
}
.btn.secondary:hover{
    background:#f8fafc;
    color:var(--ink);
    border-color:#cbd5e1;
    box-shadow:var(--shadow-sm);
}

.btn.danger{
    background:var(--danger);
    box-shadow:0 2px 8px rgba(239,68,68,.25);
}
.btn.danger:hover{
    background:#dc2626;
    box-shadow:0 6px 18px rgba(239,68,68,.35);
}

.btn.success{
    background:var(--success);
    box-shadow:0 2px 8px rgba(16,185,129,.25);
}
.btn.success:hover{
    background:#059669;
    box-shadow:0 6px 18px rgba(16,185,129,.35);
}

.btn.primary{background:var(--primary)}
.btn.primary:hover{background:var(--primary-600)}

.btn:disabled,
.btn[disabled]{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* inline forms inside table cells */
table.data td form{display:inline}
table.data td .btn{margin:2px 1px}

/* ---------------------------------------------------------
   12. TABLES
   --------------------------------------------------------- */
.table-wrap{
    overflow-x:auto;
    border-radius:var(--radius-sm);
    border:1px solid var(--line);
    background:#fff;
}

table.data{
    width:100%;
    border-collapse:collapse;
    font-size:13.5px;
    background:#fff;
}
table.data th,
table.data td{
    padding:12px 14px;
    text-align:left;
    vertical-align:middle;
    border-bottom:1px solid var(--line-2);
}
table.data th{
    background:#f8fafc;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--muted);
    white-space:nowrap;
    position:sticky;
    top:0;
}
table.data tbody tr{transition:background var(--transition)}
table.data tbody tr:hover{background:#fafbff}
table.data tbody tr:last-child td{border-bottom:0}

table.data td.num,
table.data th.num{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

table.data tfoot th{
    background:#f8fafc;
    border-top:2px solid var(--line);
    font-size:12.5px;
    font-weight:700;
    text-transform:none;
    letter-spacing:0;
    color:var(--ink);
}

table.data a{font-weight:500}

/* ---------------------------------------------------------
   13. BADGES
   --------------------------------------------------------- */
.badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.01em;
    white-space:nowrap;
}
.badge::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:currentColor;
    opacity:.9;
    flex-shrink:0;
}
.badge.paid    {background:var(--success-soft); color:#047857}
.badge.unpaid  {background:var(--danger-soft);  color:#b91c1c}
.badge.partial {background:var(--warn-soft);    color:#b45309}
.badge.grey    {background:#f1f5f9;             color:#475569}
.badge.blue    {background:var(--primary-soft); color:#4338ca}

/* ---------------------------------------------------------
   14. ALERTS
   --------------------------------------------------------- */
.alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px 16px;
    border-radius:var(--radius-sm);
    margin-bottom:18px;
    font-size:13.5px;
    font-weight:500;
    animation:slideDown .3s ease;
    line-height:1.5;
}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alert.success{
    background:var(--success-soft);
    color:#065f46;
    border:1px solid #a7f3d0;
}
.alert.error{
    background:var(--danger-soft);
    color:#991b1b;
    border:1px solid #fecaca;
}
.alert.info{
    background:var(--info-soft);
    color:#075985;
    border:1px solid #bae6fd;
}
.alert.warning{
    background:var(--warn-soft);
    color:#92400e;
    border:1px solid #fde68a;
}

@keyframes slideDown{
    from{opacity:0;transform:translateY(-8px)}
    to  {opacity:1;transform:translateY(0)}
}

/* ---------------------------------------------------------
   15. LOGIN PAGE
   --------------------------------------------------------- */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
        radial-gradient(1200px 600px at 10% 10%, rgba(99,102,241,.18), transparent 60%),
        radial-gradient(1000px 600px at 90% 90%, rgba(168,85,247,.15), transparent 60%),
        #0b1220;
    position:relative;
    overflow:hidden;
}
.login-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events:none;
}

.login-card{
    position:relative;
    z-index:1;
    background:#fff;
    border-radius:20px;
    padding:40px 34px;
    width:100%;
    max-width:420px;
    box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.login-card h1{
    font-size:24px;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0 0 6px;
    background:linear-gradient(90deg,#4f46e5,#a855f7);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.login-card .sub{
    margin:0 0 26px;
    color:var(--muted);
    font-size:14px;
}
.login-card .btn{
    width:100%;
    padding:12px;
    font-size:14.5px;
}
.login-card .field:last-of-type{margin-bottom:22px}
.login-card code{
    background:#f1f5f9;
    padding:1px 6px;
    border-radius:4px;
    font-size:12.5px;
    color:#4338ca;
    font-family:ui-monospace,'SF Mono',Monaco,Consolas,monospace;
}

/* ---------------------------------------------------------
   16. INVOICE DOCUMENT
   --------------------------------------------------------- */
.invoice-doc{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:40px;
    box-shadow:var(--shadow-sm);
}
.invoice-head{
    display:flex;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    padding-bottom:22px;
    margin-bottom:24px;
    border-bottom:2px solid var(--ink);
}
.invoice-head h2{
    margin:0 0 6px;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.02em;
}
.invoice-head h2::before{content:none}
.invoice-meta{
    text-align:right;
    font-size:13.5px;
    color:var(--ink-2);
    line-height:1.7;
}
.invoice-meta strong{color:var(--ink);font-weight:700}
.invoice-meta .badge{margin-top:4px}

.invoice-doc h3{
    font-size:12.5px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin:0 0 8px;
}

.totals{
    margin-left:auto;
    width:100%;
    max-width:340px;
}
.totals .row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:14px;
}
.totals .row span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.totals .row.grand{
    border-bottom:0;
    border-top:2px solid var(--ink);
    margin-top:8px;
    padding-top:14px;
    font-size:19px;
    font-weight:800;
    letter-spacing:-.02em;
}
.totals .row.grand span:last-child{font-weight:800}

/* ---------------------------------------------------------
   17. SEARCH BAR
   --------------------------------------------------------- */
.searchbar{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
}
.searchbar .field{
    margin:0;
    flex:1;
    min-width:200px;
}
.searchbar .btn{align-self:flex-end}

/* ---------------------------------------------------------
   18. MODAL / OVERLAY (mobile sidebar)
   --------------------------------------------------------- */
.sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    z-index:99;
    opacity:0;
    transition:opacity .25s ease;
}
.sidebar-overlay.show{display:block;opacity:1}

/* ---------------------------------------------------------
   19. UTILITY CLASSES
   --------------------------------------------------------- */
.text-muted{color:var(--muted)}
.text-danger{color:var(--danger)}
.text-success{color:var(--success)}
.text-warn{color:var(--warn)}
.text-center{text-align:center}
.text-right{text-align:right}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.w-100{width:100%}
.nowrap{white-space:nowrap}
.hidden{display:none !important}

/* ---------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1024px){
    .content{padding:22px 20px 34px}
    .topbar{padding:14px 20px}
    .stat .value{font-size:25px}
}

@media (max-width:820px){
    .sidebar{
        transform:translateX(-100%);
        box-shadow:var(--shadow-lg);
    }
    .sidebar.open{transform:translateX(0)}
    .sidebar-close{display:inline-flex}
    .main{margin-left:0}
    .menu-toggle{display:flex}
    .topbar-title h1{font-size:17px}
    .topbar-date{display:none}
    .invoice-head{flex-direction:column}
    .invoice-meta{text-align:left}
}

@media (max-width:560px){
    body{font-size:14px}
    .content{padding:18px 14px 30px}
    .topbar{padding:12px 14px;gap:12px}
    .topbar-actions .btn span{display:none}
    .topbar-actions .btn{padding:8px 12px}
    .card{padding:16px}
    .stat{padding:16px}
    .stat .value{font-size:23px}
    .form-row{grid-template-columns:1fr}
    .searchbar{flex-direction:column;align-items:stretch}
    .searchbar .field{min-width:0}
    .searchbar .btn{width:100%}
    .invoice-doc{padding:22px}
    .invoice-head h2{font-size:19px}
    .page-head h1{font-size:18px}
    .page-head{flex-direction:column;align-items:flex-start}
    .page-head .btn{width:100%}
    .footer{justify-content:center;text-align:center}
    table.data th,table.data td{padding:10px}
    .login-card{padding:30px 22px}
    .login-card h1{font-size:20px}
}

/* ---------------------------------------------------------
   21. REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* ---------------------------------------------------------
   22. PRINT
   --------------------------------------------------------- */
@media print{
    .sidebar,
    .topbar,
    .footer,
    .no-print,
    .sidebar-overlay,
    .menu-toggle{display:none !important}

    .main{margin-left:0}
    .content{padding:0;max-width:none}

    body{
        background:#fff;
        font-size:12px;
    }
    .card,
    .invoice-doc{
        border:0;
        box-shadow:none;
        padding:0;
        margin:0;
    }
    .invoice-head{border-bottom:2px solid #000}
    table.data{border:1px solid #ccc}
    table.data th{background:#f5f5f5;color:#000}
    a{color:#000;text-decoration:none}
    .badge{border:1px solid #ccc}
}