/* LeadInvoice - Professional UI v2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --primary:#4f46e5;--primary-dark:#3730a3;--primary-light:#818cf8;
  --primary-50:#eef2ff;--primary-100:#e0e7ff;
  --success:#10b981;--success-light:#d1fae5;--success-dark:#047857;
  --warning:#f59e0b;--warning-light:#fef3c7;--warning-dark:#92400e;
  --danger:#ef4444;--danger-light:#fee2e2;--danger-dark:#991b1b;
  --info:#3b82f6;--info-light:#dbeafe;--info-dark:#1e40af;
  --gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;
  --gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;
  --gray-800:#1e293b;--gray-900:#0f172a;
  --sb-width:248px;--sb-bg:#0f172a;--sb-border:rgba(255,255,255,.06);
  --sb-text:#94a3b8;--sb-text-a:#e2e8f0;--sb-label:#475569;
  --sb-hover:rgba(255,255,255,.05);--sb-active-bg:rgba(79,70,229,.18);--sb-active:#a5b4fc;
  --topbar-h:64px;--topbar-bg:#fff;--topbar-border:#e2e8f0;
  --content-bg:#f1f5f9;--card-bg:#fff;--card-border:#e2e8f0;
  --card-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --card-shadow-hover:0 10px 30px rgba(15,23,42,.1),0 2px 6px rgba(15,23,42,.05);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --text:#0f172a;--text-2:#334155;--text-3:#64748b;--text-4:#94a3b8;
  --radius-xs:4px;--radius-sm:6px;--radius:10px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;
  --transition:all .18s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font);background:var(--content-bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-dark)}
img{max-width:100%;display:block}
button{font-family:inherit}
input,select,textarea{font-family:inherit}

/* App shell */
.app-shell{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:var(--sb-width);background:var(--sb-bg);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--sb-border);scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.sidebar-brand{display:flex;align-items:center;justify-content:flex-start;padding:0 22px;height:var(--topbar-h);border-bottom:1px solid var(--sb-border);flex-shrink:0;text-decoration:none}
.sidebar-brand img{height:34px;width:auto;max-width:180px}
.company-badge{display:flex;align-items:center;gap:12px;padding:13px 14px;margin:12px 12px 6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}
.company-badge:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.company-badge-avatar{width:34px;height:34px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(79,70,229,.35)}
.company-badge-name{font-size:13px;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.company-badge-sub{font-size:11px;color:var(--sb-text);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-section{padding:4px 0}
.nav-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-label);padding:14px 22px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:1px 10px;color:var(--sb-text);font-size:13.5px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);position:relative;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--sb-hover);color:var(--sb-text-a)}
.nav-item.active{background:var(--sb-active-bg);color:var(--sb-active)}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.7;transition:var(--transition)}
.nav-item:hover svg,.nav-item.active svg{opacity:1}
.nav-item.active svg{color:var(--sb-active)}
.nav-badge{margin-left:auto;background:var(--primary);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-full);line-height:1.4}
.sidebar-footer{margin-top:auto;padding:8px 10px 14px;border-top:1px solid var(--sb-border)}

/* Main wrapper / Topbar */
.main-wrapper{margin-left:var(--sb-width);display:flex;flex-direction:column;min-height:100vh;flex:1;width:calc(100% - var(--sb-width))}
.topbar{position:sticky;top:0;height:var(--topbar-h);background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);display:flex;align-items:center;padding:0 28px;gap:16px;z-index:50;backdrop-filter:saturate(180%) blur(8px)}
.topbar-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.topbar-title{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:var(--radius-sm);color:var(--text-3)}
.menu-toggle:hover{background:var(--gray-100)}
.menu-toggle span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;border-radius:2px;transition:var(--transition)}

/* Lang switcher */
.lang-switcher-form{display:flex;align-items:center}
.lang-switcher-select{background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--radius-sm);color:var(--text-2);font-size:13px;font-weight:600;padding:6px 24px 6px 10px;cursor:pointer;outline:none;transition:var(--transition);height:34px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
.lang-switcher-select:hover{background-color:var(--gray-200)}
.lang-switcher-select option{background:#1e293b;color:#fff}

/* Topbar user */
.topbar-user-menu{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 10px 5px 5px;border-radius:var(--radius);transition:var(--transition)}
.topbar-user-menu:hover{background:var(--gray-100)}
.topbar-avatar{width:34px;height:34px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0;box-shadow:0 2px 6px rgba(79,70,229,.3)}
.topbar-username{font-size:13.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
.topbar-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-md);box-shadow:0 12px 32px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.06);z-index:200;overflow:hidden;padding:6px 0;animation:dropIn .15s ease}
.topbar-user-menu.open .topbar-dropdown{display:block}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.topbar-dropdown-header{padding:12px 16px 10px;border-bottom:1px solid var(--gray-100)}
.topbar-dropdown-name{font-weight:700;font-size:14px;color:var(--gray-900)}
.topbar-dropdown-email{font-size:12px;color:var(--gray-500);margin-top:2px}
.topbar-dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:13.5px;font-weight:500;color:var(--text-2);text-decoration:none;transition:var(--transition)}
.topbar-dropdown-item:hover{background:var(--gray-50);color:var(--gray-900)}
.topbar-dropdown-divider{height:1px;background:var(--gray-100);margin:4px 0}
.topbar-dropdown-logout{color:var(--danger)!important}
.topbar-dropdown-logout:hover{background:var(--danger-light)!important}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 18px;height:38px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:var(--transition);text-decoration:none;white-space:nowrap;line-height:1;user-select:none}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 6px rgba(79,70,229,.28)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.4)}
.btn-secondary{background:#fff;color:var(--text-2);border-color:var(--gray-200)}
.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-300);color:var(--text)}
.btn-outline{background:transparent;color:var(--text-2);border:1.5px solid var(--gray-300)}
.btn-outline:hover{background:var(--gray-100);color:var(--text);border-color:var(--gray-400)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.btn-danger-outline{background:transparent;color:var(--danger);border:1.5px solid var(--danger)}
.btn-danger-outline:hover{background:var(--danger-light)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:var(--success-dark);border-color:var(--success-dark);color:#fff}
.btn-gold{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;box-shadow:0 2px 6px rgba(217,119,6,.3)}
.btn-gold:hover{background:linear-gradient(135deg,#d97706,#b45309);color:#fff}
.btn-ghost{background:transparent;color:var(--text-3);border-color:transparent}
.btn-ghost:hover{background:var(--gray-100);color:var(--text)}
.btn-sm{height:32px;padding:0 14px;font-size:12.5px}
.btn-lg{height:44px;padding:0 24px;font-size:15px}
.btn-icon{width:36px;height:36px;padding:0}

/* Content area */
.content{flex:1;padding:28px 32px;max-width:1600px;width:100%;margin:0 auto}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.4px;line-height:1.2}
.page-subtitle{font-size:13.5px;color:var(--text-3);margin-top:4px}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-header-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:20px 24px;margin-bottom:20px;box-shadow:var(--card-shadow);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Cards */
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;gap:12px;border-bottom:1px solid var(--gray-100)}
.card-title{font-size:15px;font-weight:700;color:var(--text)}
.card-subtitle{font-size:12.5px;color:var(--text-3);margin-top:2px}
.card-body{padding:20px 22px}
.card-footer{padding:14px 22px;border-top:1px solid var(--gray-100);background:var(--gray-50)}

/* KPI / Stats grid - responsive auto-fit for laptops */
.kpi-grid,.dash-stats-grid,.stats-row,.report-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}
.kpi-card,.stat-card,.report-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:20px 22px;box-shadow:var(--card-shadow);transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;min-width:0}
.kpi-card:hover,.stat-card:hover,.report-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px)}
.kpi-card::before,.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary)}
.kpi-card.blue::before,.stat-card.blue::before{background:linear-gradient(90deg,var(--primary),var(--primary-light))}
.kpi-card.green::before,.stat-card.green::before{background:linear-gradient(90deg,var(--success),#34d399)}
.kpi-card.orange::before,.stat-card.orange::before{background:linear-gradient(90deg,var(--warning),#fbbf24)}
.kpi-card.red::before,.stat-card.red::before{background:linear-gradient(90deg,var(--danger),#f87171)}
.kpi-icon,.stat-icon{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--primary-100);color:var(--primary)}
.kpi-icon.blue,.stat-icon.blue{background:var(--primary-100);color:var(--primary)}
.kpi-icon.green,.stat-icon.green{background:var(--success-light);color:var(--success-dark)}
.kpi-icon.orange,.stat-icon.orange{background:var(--warning-light);color:var(--warning-dark)}
.kpi-icon.red,.stat-icon.red{background:var(--danger-light);color:var(--danger-dark)}
.kpi-label,.stat-label,.report-card-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:6px}
.kpi-value,.stat-value,.report-card-value{font-size:26px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1.15;word-break:break-word}
.kpi-sub,.stat-delta{font-size:12px;color:var(--text-4);margin-top:6px}
.delta-up{color:var(--success)}
.delta-down{color:var(--danger)}
.pbar{background:var(--gray-100);border-radius:var(--radius-full);height:6px;margin-top:12px;overflow:hidden}
.pfill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:var(--radius-full);transition:width .6s ease}

/* Tables */
.table-wrapper,.table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--card-shadow)}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--gray-100);flex-wrap:wrap;gap:10px}
.table-title{font-size:15px;font-weight:700;color:var(--text)}
.data-table,.stats-table{width:100%;border-collapse:collapse;font-size:13.5px}
.data-table thead tr,.stats-table thead tr{border-bottom:1px solid var(--gray-200)}
.data-table th,.stats-table th{padding:12px 16px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);text-align:left;background:var(--gray-50);white-space:nowrap}
.data-table td,.stats-table td{padding:13px 16px;color:var(--text-2);border-bottom:1px solid var(--gray-100);vertical-align:middle}
.data-table tbody tr:last-child td,.stats-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr,.stats-table tbody tr{transition:background .12s}
.data-table tbody tr:hover,.stats-table tbody tr:hover{background:var(--gray-50)}
.data-table .td-actions{display:flex;align-items:center;gap:6px}
.td-num,.invoice-num{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.td-amount,.amount{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.client-name{font-weight:500;color:var(--text-2)}
.client-email{font-size:11.5px;color:var(--text-4)}

/* Status badges */
.badge,.status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap}
.badge::before,.status::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.badge-success,.status-paid,.status-betaald{background:var(--success-light);color:#065f46}
.badge-success::before,.status-paid::before,.status-betaald::before{background:var(--success)}
.badge-warning,.status-pending{background:var(--warning-light);color:#92400e}
.badge-warning::before,.status-pending::before{background:var(--warning)}
.badge-danger,.status-overdue,.status-vervallen{background:var(--danger-light);color:#991b1b}
.badge-danger::before,.status-overdue::before,.status-vervallen::before{background:var(--danger)}
.badge-info,.status-sent,.status-verzonden{background:var(--info-light);color:#1e40af}
.badge-info::before,.status-sent::before,.status-verzonden::before{background:var(--info)}
.badge-gray,.status-concept{background:var(--gray-100);color:var(--gray-600)}
.badge-gray::before,.status-concept::before{background:var(--gray-400)}
.badge-primary{background:var(--primary-100);color:var(--primary-dark)}
.badge-primary::before{background:var(--primary)}

/* Forms */
.form-group{margin-bottom:18px}
.form-label,.label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.form-label span{color:var(--danger);margin-left:2px}
.form-control,.form-input{display:block;width:100%;padding:9px 13px;font-size:14px;font-family:var(--font);color:var(--text);background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);transition:var(--transition);outline:none;line-height:1.5}
.form-control:hover,.form-input:hover{border-color:var(--gray-300)}
.form-control:focus,.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
.form-control::placeholder,.form-input::placeholder{color:var(--text-4)}
.form-control:disabled,.form-input:disabled{background:var(--gray-100);color:var(--text-3);cursor:not-allowed}
.form-select{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'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.form-hint{font-size:12px;color:var(--text-4);margin-top:5px}
.form-error{font-size:12px;color:var(--danger);margin-top:5px}
.form-row{display:grid;gap:18px}
.form-row-2{grid-template-columns:1fr 1fr}
.form-row-3{grid-template-columns:1fr 1fr 1fr}
.content input[type=text],.content input[type=email],.content input[type=tel],.content input[type=url],.content input[type=number],.content input[type=password],.content input[type=date],.content select,.content textarea{display:block;width:100%;padding:9px 13px;font-size:14px;font-family:var(--font);color:var(--text);background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);transition:var(--transition);outline:none}
.content input[type=text]:focus,.content input[type=email]:focus,.content input[type=tel]:focus,.content input[type=url]:focus,.content input[type=number]:focus,.content input[type=password]:focus,.content input[type=date]:focus,.content select:focus,.content textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}

/* Alerts & flash */
.alert{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;font-size:13.5px;font-weight:500;border:1px solid transparent}
.alert-success{background:var(--success-light);color:#065f46;border-color:#a7f3d0}
.alert-danger{background:var(--danger-light);color:#991b1b;border-color:#fca5a5}
.alert-warning{background:var(--warning-light);color:#92400e;border-color:#fde68a}
.alert-info{background:var(--info-light);color:#1e40af;border-color:#bfdbfe}
.flash-container{position:fixed;top:80px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.flash-msg,.flash-toast{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius);font-size:13.5px;font-weight:500;box-shadow:0 8px 24px rgba(15,23,42,.15);animation:slideIn .3s ease;pointer-events:all;max-width:420px}
.flash-success{background:var(--success);color:#fff}
.flash-error{background:var(--danger);color:#fff}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* Dashboard layout */
.dashboard-grid,.dash-bottom-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}
.dashboard-grid-wide{grid-column:span 2}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-title{font-size:15px;font-weight:700;color:var(--text)}
.section-link{font-size:13px;font-weight:600;color:var(--primary)}
.section-link:hover{color:var(--primary-dark)}
.invoice-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100)}
.invoice-row:last-child{border-bottom:none}
.inv-num{font-size:13px;font-weight:700;color:var(--text);min-width:100px}
.inv-client{flex:1;min-width:0}
.inv-client-name{font-size:13.5px;font-weight:500;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-client-email{font-size:11.5px;color:var(--text-4)}
.inv-amount{font-size:14px;font-weight:700;color:var(--text);min-width:100px;text-align:right}
.donut-wrapper{display:flex;align-items:center;justify-content:center;padding:20px 0}
.donut-chart{width:140px;height:140px}
.donut-segment{transition:stroke-dashoffset .6s ease}

/* Filter bar / tabs */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filter-tabs,.tab-bar{display:flex;gap:4px;background:var(--gray-100);padding:4px;border-radius:var(--radius-sm);flex-wrap:wrap}
.filter-tab,.tab{padding:6px 14px;border-radius:var(--radius-xs);font-size:13px;font-weight:500;color:var(--text-3);cursor:pointer;transition:var(--transition);border:none;background:transparent;font-family:var(--font);text-decoration:none;white-space:nowrap}
.filter-tab:hover,.tab:hover{color:var(--text);background:rgba(255,255,255,.5)}
.filter-tab.active,.tab.active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.search-box,.search-input{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);padding:0 12px;height:38px;transition:var(--transition)}
.search-box:focus-within,.search-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
.search-box input,.search-input input{border:none;outline:none;font-size:13.5px;font-family:var(--font);color:var(--text);background:transparent;width:220px;min-width:150px}
.search-box svg,.search-input svg{color:var(--text-4);flex-shrink:0}
.search-form{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.action-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);border:none;background:transparent;cursor:pointer;color:var(--text-3);transition:var(--transition)}
.action-btn:hover{background:var(--gray-100);color:var(--text)}
.action-btn.danger:hover{background:var(--danger-light);color:var(--danger)}

/* Invoice builder */
.invoice-builder,.invoice-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.invoice-form-section,.invoice-section,.form-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);overflow:hidden;margin-bottom:20px}
.invoice-section-head,.invoice-section-title,.form-card-header{padding:14px 20px;border-bottom:1px solid var(--gray-100);background:var(--gray-50);font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.invoice-section-body,.form-card-body{padding:20px 22px}
.invoice-sidebar-card,.sidebar-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);position:sticky;top:calc(var(--topbar-h) + 20px);overflow:hidden}
.sidebar-card-title{font-size:14px;font-weight:700;padding:14px 18px;border-bottom:1px solid var(--gray-100);background:var(--gray-50);color:var(--text)}
.sidebar-card-body{padding:16px 18px}
.line-item-table{width:100%;border-collapse:collapse}
.line-item-table th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:8px 10px;background:var(--gray-50);border-bottom:1px solid var(--gray-200);text-align:left}
.line-item-table td{padding:8px 10px;border-bottom:1px solid var(--gray-100);vertical-align:middle}
.line-item-table tfoot td{padding:10px;border-top:2px solid var(--gray-200);font-weight:600}
.totals-row,.total-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--gray-100)}
.totals-row:last-child,.total-row:last-child{border-bottom:none;font-weight:800;font-size:16px;color:var(--text);padding-top:12px}
.total-row-label{color:var(--text-3)}
.total-row-value{font-weight:600;color:var(--text)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* Settings */
.settings-grid{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.settings-nav{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);overflow:hidden;position:sticky;top:calc(var(--topbar-h) + 20px)}
.settings-nav-item{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:13.5px;font-weight:500;color:var(--text-3);cursor:pointer;border-bottom:1px solid var(--gray-100);transition:var(--transition);text-decoration:none}
.settings-nav-item:last-child{border-bottom:none}
.settings-nav-item:hover{background:var(--gray-50);color:var(--text)}
.settings-nav-item.active{background:var(--primary-50);color:var(--primary);font-weight:600;border-left:3px solid var(--primary)}
.settings-section,.admin-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);box-shadow:var(--card-shadow);overflow:hidden;margin-bottom:20px}
.settings-section-header,.admin-section-title{padding:16px 22px;border-bottom:1px solid var(--gray-100);background:var(--gray-50);font-size:15px;font-weight:700;color:var(--text)}
.settings-section-body{padding:22px}
.settings-section-title{font-size:15px;font-weight:700;color:var(--text)}

/* Admin tabs */
.admin-tabs{display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:24px;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-tab{padding:12px 20px;font-size:14px;font-weight:500;color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--transition);text-decoration:none;white-space:nowrap}
.admin-tab:hover{color:var(--text)}
.admin-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);animation:fadeIn .15s ease}
.modal{background:#fff;border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(15,23,42,.22);max-width:560px;width:100%;animation:scaleIn .2s ease}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--gray-200)}
.modal-title{font-size:17px;font-weight:700;color:var(--text)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--text-4);padding:4px;border-radius:var(--radius-sm);transition:var(--transition)}
.modal-close:hover{background:var(--gray-100);color:var(--text)}
.modal-body{padding:24px}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--gray-200);background:var(--gray-50);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center}
.empty-icon{width:64px;height:64px;border-radius:var(--radius-lg);background:var(--gray-100);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--text-4)}
.empty-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:8px}
.empty-desc{font-size:14px;color:var(--text-3);max-width:320px;line-height:1.6;margin-bottom:24px}

/* Dividers & utilities */
.divider{height:1px;background:var(--gray-200);margin:24px 0}
.divider-label{display:flex;align-items:center;gap:12px;color:var(--text-4);font-size:12.5px;margin:20px 0}
.divider-label::before,.divider-label::after{content:'';flex:1;height:1px;background:var(--gray-200)}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.text-warning{color:var(--warning)}
.text-muted{color:var(--text-3)}
.text-sm{font-size:12.5px}
.text-xs{font-size:11px}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.w-full{width:100%}
.rounded{border-radius:var(--radius)}.hidden{display:none!important}

/* Login page */
.login-page{min-height:100vh;display:flex;align-items:stretch;background:#fff}
.login-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:60px;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff}
.login-right{width:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;background:#fff;border-left:1px solid var(--gray-200)}
.login-brand{margin-bottom:40px;text-align:left}
.login-brand img{height:44px;margin-bottom:12px}
.login-brand-name{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px}
.login-brand-name span{color:rgba(255,255,255,.7)}
.login-brand-sub,.login-brand-tagline{font-size:11px;color:rgba(255,255,255,.65);letter-spacing:2px;font-weight:600;margin-top:4px;text-transform:uppercase}
.login-hero-title{font-size:36px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px;letter-spacing:-.5px}
.login-hero-sub{font-size:16px;color:rgba(255,255,255,.82);line-height:1.6;max-width:440px;margin-bottom:36px}
.login-features{display:flex;flex-direction:column;gap:20px;max-width:420px}
.login-feature{display:flex;align-items:flex-start;gap:16px}
.login-feature-icon{width:44px;height:44px;border-radius:var(--radius);background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.login-feature-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px}
.login-feature-desc{font-size:13px;color:rgba(255,255,255,.78);line-height:1.5}
.login-box,.login-form-wrap{width:100%;max-width:380px}
.login-title{font-size:26px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.4px}
.login-subtitle{font-size:14px;color:var(--text-3);margin-bottom:28px}
.login-form-group{margin-bottom:16px}
.login-label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.login-input{display:block;width:100%;padding:11px 14px;font-size:14px;font-family:var(--font);color:var(--text);background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);transition:var(--transition);outline:none}
.login-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-100)}
.login-input::placeholder{color:var(--text-4)}
.login-btn{width:100%;height:46px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;cursor:pointer;transition:var(--transition);margin-top:20px}
.login-btn:hover{background:var(--primary-dark)}
.login-footer{text-align:center;margin-top:20px;font-size:13.5px;color:var(--text-3)}
.login-footer a{color:var(--primary);font-weight:600}

/* Sidebar overlay for mobile */
.sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:99;display:none;backdrop-filter:blur(2px)}
.sidebar-overlay.active{display:block}

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

/* Large desktops (>= 1601px) - extra wide */
@media (min-width:1601px){
  .content{max-width:1600px;padding:32px 40px}
  .kpi-grid,.dash-stats-grid,.stats-row,.report-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Standard laptop (1281-1600px) - 4 cols, full sidebar */
@media (min-width:1281px) and (max-width:1600px){
  :root{--sb-width:240px}
  .content{padding:26px 28px;max-width:100%}
  .kpi-grid,.dash-stats-grid,.stats-row,.report-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .dashboard-grid,.dash-bottom-grid{grid-template-columns:2fr 1fr}
}

/* Smaller laptop (1025-1280px) - 4 cols, compact sidebar */
@media (min-width:1025px) and (max-width:1280px){
  :root{--sb-width:220px}
  .content{padding:22px 24px;max-width:100%}
  .kpi-grid,.dash-stats-grid,.stats-row,.report-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .kpi-card,.stat-card,.report-card{padding:16px 18px}
  .kpi-value,.stat-value,.report-card-value{font-size:22px}
  .dashboard-grid,.dash-bottom-grid{grid-template-columns:3fr 2fr}
  .invoice-builder,.invoice-form-grid{grid-template-columns:minmax(0,1fr) 340px;gap:18px}
  .settings-grid{grid-template-columns:220px 1fr;gap:20px}
}

/* Tablet / small laptop (769-1024px) - 2x2 grid */
@media (min-width:769px) and (max-width:1024px){
  :root{--sb-width:220px}
  .content{padding:20px}
  .kpi-grid,.dash-stats-grid,.stats-row,.report-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .dashboard-grid,.dash-bottom-grid{grid-template-columns:1fr}
  .dashboard-grid-wide{grid-column:span 1}
  .invoice-builder,.invoice-form-grid{grid-template-columns:1fr;gap:20px}
  .invoice-sidebar-card,.sidebar-card{position:static}
  .settings-grid{grid-template-columns:1fr;gap:18px}
  .settings-nav{position:static}
  .form-row-3{grid-template-columns:1fr 1fr}
  .three-col{grid-template-columns:1fr 1fr}
  .topbar{padding:0 20px}
}

/* Mobile landscape / large phone (<=768px) */
@media (max-width:768px){
  :root{--sb-width:260px}
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.18)}
  .sidebar.open{transform:translateX(0)}
  .main-wrapper{margin-left:0;width:100%}
  .menu-toggle{display:flex;flex-direction:column}
  .topbar{padding:0 16px;gap:10px}
  .topbar-title{font-size:15px}
  .content{padding:16px}
  .kpi-grid,.dash-stats-grid,.stats-row,.report-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kpi-card,.stat-card,.report-card{padding:14px 16px}
  .kpi-value,.stat-value,.report-card-value{font-size:20px}
  .kpi-icon,.stat-icon{width:34px;height:34px;margin-bottom:10px}
  .dashboard-grid,.dash-bottom-grid{grid-template-columns:1fr}
  .invoice-builder,.invoice-form-grid{grid-template-columns:1fr}
  .form-row-2,.form-row-3{grid-template-columns:1fr}
  .two-col,.three-col{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .settings-nav,.invoice-sidebar-card,.sidebar-card{position:static}
  .login-left{display:none}
  .login-right{width:100%;border-left:none;padding:40px 24px}
  .page-header{flex-direction:column;align-items:flex-start}
  .page-title{font-size:20px}
  .page-actions{width:100%}
  .topbar-username{display:none}
  .data-table th,.data-table td,.stats-table th,.stats-table td{padding:10px 12px}
  .btn{height:36px;padding:0 14px;font-size:13px}
  .btn-lg{height:42px}
  .flash-container{top:72px;right:12px;left:12px}
}

/* Small mobile (<=480px) */
@media (max-width:480px){
  .kpi-grid,.dash-stats-grid,.stats-row,.report-cards{grid-template-columns:1fr;gap:10px}
  .filter-tabs,.tab-bar{width:100%}
  .search-box input,.search-input input{width:100%;min-width:0}
  .page-header-card{flex-direction:column;align-items:stretch}
  .modal{max-width:100%;margin:0 8px}
  .content{padding:12px}
}

/* Print */
@media print{
  .sidebar,.topbar,.no-print,.menu-toggle,.btn{display:none!important}
  .main-wrapper{margin-left:0!important;width:100%!important}
  .content{padding:0!important;max-width:100%!important}
  .card,.kpi-card,.stat-card{box-shadow:none!important;border:1px solid #ddd}
  body{background:#fff}
}

/* Scrollbar styling */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--gray-100)}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:5px;border:2px solid var(--gray-100)}
::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}

/* Focus ring for accessibility */
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,var(--gray-100) 0%,var(--gray-200) 50%,var(--gray-100) 100%);background-size:200% 100%;animation:skeleton 1.4s infinite;border-radius:var(--radius-sm)}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================
   Professional UI v3 - Page-specific fixes and polish
   ============================================================ */

/* --- Pill Tabs (Invoice filters, Admin tabs) --- */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--surface-2, #f1f5f9); border-radius: 12px; margin-bottom: 16px; }
.pill-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-muted, #64748b); text-decoration: none; border: 0; background: transparent; cursor: pointer; transition: all .15s ease; }
.pill-tab:hover { background: rgba(255,255,255,.6); color: var(--text, #0f172a); }
.pill-tab.active { background: #fff; color: var(--primary, #4f46e5); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); font-weight: 600; }

/* --- Dashboard KPI / Stats --- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s; }
.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.stat-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(79,70,229,.1); color: var(--primary, #4f46e5); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; font-size: 20px; }
.stat-label { font-size: 13px; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--text, #0f172a); line-height: 1.1; }
.stat-delta { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.delta-up { color: #059669; }
.delta-dn { color: #dc2626; }

/* --- Dashboard Grid Fix --- */
.dash-bottom-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 20px; }
.dash-bottom-grid > .card { min-width: 0; }

/* --- Donut Chart --- */
.donut-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 10px; gap: 16px; }
.donut { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-pct { font-size: 28px; font-weight: 700; color: var(--text, #0f172a); line-height: 1; }
.donut-sub { font-size: 12px; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; font-weight: 600; }

/* --- Legend --- */
.legend { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; padding: 0 8px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text, #0f172a); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary, #4f46e5); display: inline-block; flex-shrink: 0; }

/* --- Bar Chart --- */
.bar-chart { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.bar-col { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; }
.bar-label { font-size: 13px; color: var(--text, #0f172a); font-weight: 500; }
.bar-wrap { position: relative; height: 10px; background: var(--surface-2, #f1f5f9); border-radius: 999px; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--primary, #4f46e5), var(--primary-2, #6366f1)); border-radius: 999px; transition: width .4s ease; }
.bar-val { font-size: 13px; font-weight: 600; color: var(--text, #0f172a); min-width: 60px; text-align: right; }

/* --- Progress bar (pbar/pfill) --- */
.pbar { height: 8px; background: var(--surface-2, #f1f5f9); border-radius: 999px; overflow: hidden; }
.pfill { height: 100%; background: linear-gradient(90deg, var(--primary, #4f46e5), #6366f1); border-radius: 999px; }

/* --- Tables (invoices, clients, products) --- */
.table-wrap { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; overflow: hidden; margin-top: 16px; }
.table-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border, #e2e8f0); background: #fafbfc; flex-wrap: wrap; }
.search-box { flex: 1; min-width: 220px; position: relative; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
.search-box:focus-within { border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.search-box input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--text, #0f172a); }
.search-box svg, .search-box .icon { color: var(--text-muted, #64748b); flex-shrink: 0; }

/* Standardize all tables inside .table-wrap */
.table-wrap table { width: 100%; border-collapse: collapse; }
.table-wrap thead th { background: #f8fafc; color: var(--text-muted, #64748b); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border, #e2e8f0); white-space: nowrap; }
.table-wrap tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border, #e2e8f0); font-size: 14px; color: var(--text, #0f172a); vertical-align: middle; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover { background: #f8fafc; }

/* Invoice number column */
.invoice-num { font-family: 'SF Mono', Menlo, Consolas, monospace; font-weight: 600; color: var(--text, #0f172a); font-size: 13px; }

/* Client name/email stacked */
.client-name { font-weight: 600; color: var(--text, #0f172a); display: block; }
.client-email { font-size: 12px; color: var(--text-muted, #64748b); display: block; margin-top: 2px; }

/* Status badges */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.status.draft, .status.concept { background: #f1f5f9; color: #475569; }
.status.sent, .status.verzonden { background: #dbeafe; color: #1e40af; }
.status.pending, .status.in_behandeling, .status.in-behandeling { background: #fef3c7; color: #92400e; }
.status.overdue, .status.vervallen { background: #fee2e2; color: #991b1b; }
.status.paid, .status.betaald { background: #d1fae5; color: #065f46; }

/* Row actions (icons in last column) */
.row-actions { display: inline-flex; gap: 4px; align-items: center; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-muted, #64748b); cursor: pointer; text-decoration: none; transition: all .15s; }
.icon-btn:hover { background: #f1f5f9; color: var(--primary, #4f46e5); border-color: var(--border, #e2e8f0); }
.icon-btn.dng:hover { color: #dc2626; background: #fee2e2; border-color: #fecaca; }
.icon-btn svg { width: 16px; height: 16px; }

/* --- Forms (clients, products, settings) --- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text, #0f172a); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; font-size: 14px; color: var(--text, #0f172a); background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 0; border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.form-group textarea { resize: vertical; min-height: 80px; }

/* Settings grid */
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.settings-grid .full { grid-column: 1 / -1; }

/* --- Page header (used on many pages) --- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.page-title { font-size: 24px; font-weight: 700; color: var(--text, #0f172a); margin: 0; line-height: 1.2; }
.page-subtitle { font-size: 14px; color: var(--text-muted, #64748b); margin: 4px 0 0; }
.page-sub { font-size: 14px; color: var(--text-muted, #64748b); margin: 4px 0 0; }
.page-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Cards --- */
.card { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 20px; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border, #e2e8f0); gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 16px; font-weight: 600; color: var(--text, #0f172a); margin: 0; }

/* Info cards */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.info-card { background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 12px 14px; }
.info-card-label { font-size: 12px; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: 4px; }
.info-card-value { font-size: 15px; font-weight: 600; color: var(--text, #0f172a); }
.info-row { display: flex; justify-content: space-between; padding: 8px 0; gap: 12px; }
.info-label { font-size: 13px; color: var(--text-muted, #64748b); }

/* --- Empty state --- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted, #64748b); }
.empty-state h3 { font-size: 18px; color: var(--text, #0f172a); margin: 12px 0 4px; }
.empty-state p { font-size: 14px; margin: 0 0 20px; }

/* Dividers */
.divider { height: 1px; background: var(--border, #e2e8f0); margin: 20px 0; border: 0; }
.section-divider { height: 1px; background: var(--border, #e2e8f0); margin: 24px 0; }
.section-rule { height: 1px; background: var(--border, #e2e8f0); margin: 16px 0; border: 0; }

/* --- Admin tabs --- */
.admin-tabs { display: flex; gap: 4px; padding: 6px; background: var(--surface-2, #f1f5f9); border-radius: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tab { padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--text-muted, #64748b); background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; transition: all .15s; }
.admin-tab:hover { color: var(--text, #0f172a); background: rgba(255,255,255,.6); }
.admin-tab.active { background: #fff; color: var(--primary, #4f46e5); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }
.admin-panel { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px; padding: 24px; }
.admin-body { padding: 0; }

/* --- Toggle switch (settings) --- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; border-bottom: 1px solid var(--border, #e2e8f0); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-info { flex: 1; min-width: 0; }
.toggle-name { font-size: 14px; font-weight: 600; color: var(--text, #0f172a); }
.toggle-desc { font-size: 13px; color: var(--text-muted, #64748b); margin-top: 2px; }
.toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-sw, .toggle-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background .2s; cursor: pointer; }
.toggle-sw::before, .toggle-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle input:checked ~ .toggle-sw, .toggle input:checked ~ .toggle-slider { background: var(--primary, #4f46e5); }
.toggle input:checked ~ .toggle-sw::before, .toggle input:checked ~ .toggle-slider::before { transform: translateX(20px); }

/* --- Timeline (activity page) --- */
.tl { position: relative; padding-left: 24px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border, #e2e8f0); }
.tl-item { position: relative; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary, #4f46e5); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border, #e2e8f0); }
.tl-body { display: flex; flex-direction: column; gap: 2px; }
.tl-title { font-size: 14px; font-weight: 600; color: var(--text, #0f172a); }
.tl-sub { font-size: 13px; color: var(--text-muted, #64748b); }
.tl-time { font-size: 12px; color: var(--text-muted, #64748b); }

/* --- Badges extra --- */
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-gold { background: #fef3c7; color: #92400e; }

/* --- Invoice builder: lines --- */
.items-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.lines-head { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr 40px; gap: 10px; padding: 10px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border, #e2e8f0); }
.line-row { display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr 40px; gap: 10px; padding: 10px 12px; align-items: center; border-bottom: 1px solid var(--border, #e2e8f0); }
.line-row:last-child { border-bottom: 0; }
.line-row input, .line-row select { width: 100%; padding: 8px 10px; font-size: 14px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff; }
.line-row input:focus, .line-row select:focus { outline: 0; border-color: var(--primary, #4f46e5); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.l-desc input { text-align: left; }
.l-qty input, .l-price input, .l-vat input, .l-total input { text-align: right; }
.rm-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid var(--border, #e2e8f0); color: #dc2626; cursor: pointer; transition: all .15s; }
.rm-btn:hover { background: #fee2e2; border-color: #fecaca; }

/* Totals block */
.totals-block { margin-top: 16px; padding: 16px 20px; background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; }
.total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.total-label { color: var(--text-muted, #64748b); }
.grand-total, .grand { border-top: 2px solid var(--border, #e2e8f0); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 700; color: var(--text, #0f172a); }

/* Two-col (party info in invoice) */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* --- PDF Preview / Signature (pdf.php) --- */
.prev-wrap { max-width: 820px; margin: 0 auto; padding: 40px 48px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.08); border-radius: 8px; position: relative; }
.prev-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--border, #e2e8f0); margin-bottom: 24px; }
.prev-logo { font-size: 24px; font-weight: 700; color: var(--primary, #4f46e5); }
.prev-title { font-size: 28px; font-weight: 700; color: var(--text, #0f172a); margin: 0; }
.prev-num { font-size: 14px; color: var(--text-muted, #64748b); font-family: 'SF Mono', Menlo, monospace; }
.prev-meta { font-size: 13px; color: var(--text-muted, #64748b); text-align: right; }
.prev-dates { display: flex; gap: 24px; font-size: 13px; color: var(--text-muted, #64748b); margin-bottom: 16px; }
.prev-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.party-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #64748b); font-weight: 600; margin-bottom: 6px; }
.party-name { font-size: 15px; font-weight: 600; color: var(--text, #0f172a); margin-bottom: 4px; }
.party-detail { font-size: 13px; color: var(--text, #0f172a); line-height: 1.5; }
.prev-items { margin: 20px 0; }
.prev-items table { width: 100%; border-collapse: collapse; }
.prev-items th { font-size: 12px; font-weight: 600; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border, #e2e8f0); }
.prev-items td { padding: 10px 8px; font-size: 13px; color: var(--text, #0f172a); border-bottom: 1px solid #f1f5f9; }
.prev-totals { display: flex; justify-content: flex-end; margin-top: 16px; }
.prev-totals > div { min-width: 280px; }
.prev-total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.prev-notes { margin-top: 24px; padding: 16px; background: #f8fafc; border-radius: 8px; font-size: 13px; color: var(--text, #0f172a); white-space: pre-wrap; }
.prev-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border, #e2e8f0); font-size: 11px; color: var(--text-muted, #64748b); text-align: center; }

/* Watermark */
.watermark-paid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-28deg); font-size: 120px; font-weight: 800; color: rgba(5, 150, 105, 0.12); letter-spacing: 8px; pointer-events: none; user-select: none; z-index: 1; }

/* Signature section */
.sig-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; padding-top: 24px; }
.sig-box { border-top: 1px solid var(--text, #0f172a); padding-top: 8px; }
.sig-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #64748b); font-weight: 600; }

/* --- Utility --- */
.no-print { }
.center { text-align: center; }
.right { text-align: right; }
.label { font-size: 13px; font-weight: 600; color: var(--text, #0f172a); }

/* --- RESPONSIVE: laptop and below --- */
@media (max-width: 1280px) {
  .dash-bottom-grid { grid-template-columns: 1fr; }
  .form-grid, .settings-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .prev-parties, .sig-section { grid-template-columns: 1fr; gap: 16px; }
  .prev-wrap { padding: 28px 24px; }
}
@media (max-width: 960px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .bar-col { grid-template-columns: 100px 1fr auto; gap: 8px; }
  .lines-head, .line-row { grid-template-columns: 2fr 1fr 1fr 1fr 40px; }
  .lines-head .l-vat, .line-row .l-vat { display: none; }
  .page-header { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
  .stats-row { grid-template-columns: 1fr; }
  .table-wrap thead { display: none; }
  .table-wrap tbody td { display: block; padding: 8px 16px; border-bottom: 0; }
  .table-wrap tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
  .table-wrap tbody tr:last-child { border-bottom: 0; }
  .lines-head { display: none; }
  .line-row { grid-template-columns: 1fr; gap: 8px; }
  .pill-tabs, .admin-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .donut { width: 140px; height: 140px; }
}

/* --- Unify btn-gold with primary theme (override legacy orange) --- */
.btn-gold { background: var(--primary, #4f46e5) !important; color: #fff !important; border: 1px solid var(--primary, #4f46e5) !important; box-shadow: 0 2px 6px rgba(79,70,229,.28) !important; }
.btn-gold:hover { background: var(--primary-dark, #4338ca) !important; border-color: var(--primary-dark, #4338ca) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(79,70,229,.4) !important; }

/* Ensure btn-sm in topbar is visually similar to btn-gold */
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ============================================================
   Professional UI v4 - Premium polish layer
   Focus: depth, micro-interactions, refined typography, 
          smooth transitions, laptop-first responsive
   ============================================================ */

/* --- Enhanced design tokens (augments existing :root) --- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-ring: 0 0 0 4px rgba(79, 70, 229, 0.12);
  --shadow-ring-danger: 0 0 0 4px rgba(239, 68, 68, 0.12);
  --shadow-ring-success: 0 0 0 4px rgba(16, 185, 129, 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: all 0.12s var(--ease-out);
  --transition-base: all 0.18s var(--ease-out);
  --transition-slow: all 0.28s var(--ease-out);

  --content-max: 1360px;
  --content-pad-x: 28px;
}

/* --- Base: smoother rendering, better font features --- */
html { font-size: 15px; scroll-behavior: smooth; }
body { 
  font-family: var(--font), 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03'; 
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

/* Better headings */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; color: var(--text); }
h1 { font-weight: 700; }
h2 { font-weight: 700; }

/* Selection */
::selection { background: rgba(79, 70, 229, 0.20); color: var(--text); }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }

/* --- Content container: prevent over-wide layouts on big laptops --- */
.main-wrapper > .content,
.main-wrapper > main,
.main-wrapper main.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--content-pad-x) 48px;
  width: 100%;
}

/* --- Refined Sidebar --- */
.sidebar { 
  box-shadow: 1px 0 0 rgba(255,255,255,0.04); 
  background: linear-gradient(180deg, #0f172a 0%, #131e36 100%) !important;
}
.sidebar-brand { 
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-item { 
  margin: 2px 10px !important; 
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500;
  border-radius: 8px !important;
  transition: var(--transition-fast) !important;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.06) !important; transform: translateX(2px); }
.nav-item.active { 
  background: rgba(79,70,229,0.16) !important; 
  color: #ffffff !important; 
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #6366f1, #a5b4fc);
}
.nav-label { 
  font-size: 10.5px !important; 
  letter-spacing: 0.12em !important; 
  text-transform: uppercase;
  opacity: 0.65;
  padding: 18px 22px 6px !important;
}

/* --- Refined Topbar (frosted) --- */
.topbar { 
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255,255,255,0.82) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-title { font-size: 14px; font-weight: 600; color: var(--text-2); }
.topbar-avatar { box-shadow: 0 2px 8px rgba(79,70,229,0.35); transition: var(--transition-fast); }
.topbar-user-menu:hover .topbar-avatar { transform: scale(1.05); }

/* --- Premium Cards --- */
.card { 
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  border-radius: 16px;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header { 
  padding: 18px 22px 14px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--gray-100) !important;
}
.card-body { padding: 22px !important; }
.card-title { font-size: 15px !important; font-weight: 650; letter-spacing: -0.01em; }

/* Accent cards (subtle color strip on left) */
.card.accent-primary { border-left: 3px solid var(--primary); }
.card.accent-success { border-left: 3px solid var(--success); }
.card.accent-warning { border-left: 3px solid var(--warning); }
.card.accent-danger { border-left: 3px solid var(--danger); }

/* --- Premium Buttons --- */
.btn {
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  transition: var(--transition-fast) !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 1px 2px rgba(79,70,229,0.20), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  border: 1px solid #4338ca !important;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #4f46e5, #4338ca) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(79,70,229,0.20) !important; }
.btn-gold {
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  box-shadow: 0 1px 2px rgba(79,70,229,0.20), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  border: 1px solid #4338ca !important;
  color: #fff !important;
}
.btn-gold:hover {
  background: linear-gradient(180deg, #4f46e5, #4338ca) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
}
.btn-outline, .btn-ghost {
  background: #fff !important;
  color: var(--text-2) !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn-outline:hover, .btn-ghost:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-300) !important;
  color: var(--text) !important;
}
.btn-danger {
  background: linear-gradient(180deg, #f87171, #ef4444) !important;
  border: 1px solid #dc2626 !important;
  color: #fff !important;
}
.btn-danger:hover { background: linear-gradient(180deg, #ef4444, #dc2626) !important; transform: translateY(-1px); }
.btn-success {
  background: linear-gradient(180deg, #34d399, #10b981) !important;
  border: 1px solid #059669 !important;
  color: #fff !important;
}

/* --- Premium Forms --- */
.form-control, 
.form-group input, .form-group select, .form-group textarea,
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 {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 14px;
  transition: var(--transition-fast);
  width: 100%;
  box-shadow: var(--shadow-xs);
}
.form-control::placeholder,
input::placeholder, textarea::placeholder {
  color: var(--text-4);
}
.form-control:hover,
.form-group input:hover, .form-group select:hover, .form-group textarea:hover {
  border-color: var(--gray-300);
}
.form-control:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-ring) !important;
}
.form-label, .form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
  display: block;
}
.form-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; font-weight: 500; }

/* --- Premium Tables --- */
.table-wrap { 
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
  overflow: hidden;
}
.table-wrap thead th {
  background: var(--gray-50) !important;
  color: var(--text-3) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--gray-200) !important;
}
.table-wrap tbody td {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--gray-100) !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
}
.table-wrap tbody tr { transition: background 0.12s; }
.table-wrap tbody tr:hover { background: #fafbff !important; }

/* --- Status badges with dots --- */
.status { position: relative; padding-left: 22px !important; }
.status::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}

/* --- Pill tabs: more refined --- */
.pill-tabs { 
  background: var(--gray-100) !important;
  padding: 5px !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
  display: inline-flex !important;
  gap: 2px !important;
}
.pill-tab { 
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-3) !important;
  border-radius: 8px !important;
  transition: var(--transition-fast) !important;
  background: transparent !important;
  border: none !important;
}
.pill-tab:hover:not(.active) { color: var(--text) !important; }
.pill-tab.active { 
  background: #fff !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08), 0 0 0 0.5px rgba(15,23,42,0.04) !important;
  font-weight: 600 !important;
}

/* --- Search box --- */
.search-box, .search-form {
  background: #fff !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: var(--transition-fast) !important;
}
.search-box:focus-within, .search-form:focus-within {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-ring) !important;
}
.search-box input, .search-form input {
  box-shadow: none !important;
  border: none !important;
  padding: 2px 4px !important;
  background: transparent !important;
}
.search-box input:focus, .search-form input:focus {
  box-shadow: none !important;
  border: none !important;
}

/* --- Icon buttons (table actions) --- */
.icon-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  color: var(--text-3) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: var(--transition-fast) !important;
}
.icon-btn:hover {
  background: var(--gray-100) !important;
  color: var(--primary) !important;
  border-color: var(--gray-200) !important;
}
.icon-btn.dng:hover, .icon-btn.danger:hover {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  border-color: #fecaca !important;
}

/* --- KPI & Stat cards premium --- */
.kpi-card, .stat-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}
.kpi-card::after, .stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(79,70,229,0.08), transparent 70%);
  pointer-events: none;
}
.kpi-card:hover, .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-200);
}
.kpi-icon, .stat-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(79,70,229,0.14), rgba(99,102,241,0.08)) !important;
  color: var(--primary) !important;
  font-size: 22px !important;
  box-shadow: inset 0 0 0 1px rgba(79,70,229,0.08);
}
.kpi-label, .stat-label { 
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kpi-value, .stat-value { 
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.kpi-sub { font-size: 13px; color: var(--text-3); }

/* --- Page header premium --- */
.page-header { 
  margin-bottom: 28px !important;
  padding-bottom: 4px;
}
.page-title { 
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--text) !important;
}
.page-subtitle, .page-sub { 
  font-size: 14px !important;
  color: var(--text-3) !important;
  margin-top: 4px !important;
}

/* --- Login page refinement --- */
.login-page { 
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.login-left {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%) !important;
  position: relative;
  overflow: hidden;
}
.login-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 45%);
  pointer-events: none;
}
.login-hero-title {
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  color: #fff !important;
  background: linear-gradient(180deg, #ffffff, #e0e7ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-hero-sub { font-size: 16px !important; color: rgba(255,255,255,0.85) !important; line-height: 1.55; }
.login-brand-name { font-size: 22px !important; font-weight: 700 !important; color: #fff !important; }
.login-brand-sub { font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: rgba(255,255,255,0.75) !important; }
.login-right { display: flex; align-items: center; justify-content: center; padding: 48px; }
.login-form-wrap { width: 100%; max-width: 400px; }
.login-title { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; margin-bottom: 6px !important; }
.login-subtitle { font-size: 14px !important; color: var(--text-3) !important; margin-bottom: 28px !important; }
.login-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.login-input {
  width: 100%;
  padding: 12px 14px !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  background: #fff !important;
  transition: var(--transition-fast) !important;
  box-shadow: var(--shadow-xs) !important;
}
.login-input:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-ring) !important;
}
.login-btn {
  width: 100%;
  padding: 12px 16px !important;
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  color: #fff !important;
  border: 1px solid #4338ca !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(79,70,229,0.2), 0 0 0 1px rgba(255,255,255,0.1) inset !important;
  transition: var(--transition-fast) !important;
}
.login-btn:hover {
  background: linear-gradient(180deg, #4f46e5, #4338ca) !important;
  box-shadow: 0 4px 14px rgba(79,70,229,0.35), 0 0 0 1px rgba(255,255,255,0.1) inset !important;
  transform: translateY(-1px);
}
.login-btn:active { transform: translateY(0); }
.login-form-group { margin-bottom: 18px; }
.login-footer { margin-top: 24px; font-size: 13px; color: var(--text-3); text-align: center; }

/* --- Donut chart polish --- */
.donut-wrap { padding: 24px 16px !important; }
.donut { filter: drop-shadow(0 4px 12px rgba(79,70,229,0.15)); }
.donut-pct { font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.025em; }

/* --- Bar chart polish --- */
.bar-fill { 
  background: linear-gradient(90deg, #6366f1, #8b5cf6) !important; 
  box-shadow: 0 0 8px rgba(99,102,241,0.35);
}
.bar-wrap { background: var(--gray-100) !important; height: 8px !important; }

/* --- Timeline polish --- */
.tl::before { background: linear-gradient(180deg, var(--primary), transparent) !important; opacity: 0.3; }
.tl-dot { 
  background: #fff !important;
  border: 2px solid var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12) !important;
}

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-header, .card, .kpi-card, .stat-card { animation: fadeInUp 0.4s var(--ease-out) both; }
.kpi-card:nth-child(1), .stat-card:nth-child(1) { animation-delay: 0.02s; }
.kpi-card:nth-child(2), .stat-card:nth-child(2) { animation-delay: 0.06s; }
.kpi-card:nth-child(3), .stat-card:nth-child(3) { animation-delay: 0.10s; }
.kpi-card:nth-child(4), .stat-card:nth-child(4) { animation-delay: 0.14s; }

/* --- Lang switcher --- */
.lang-switcher-select { 
  padding: 6px 28px 6px 12px !important;
  border: 1px solid var(--gray-200) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  box-shadow: var(--shadow-xs) !important;
}

/* --- Modal polish --- */
.modal { 
  border-radius: 16px !important;
  box-shadow: var(--shadow-xl) !important;
}
.modal-overlay { backdrop-filter: blur(4px); background: rgba(15,23,42,0.55) !important; }
.modal-header { padding: 20px 24px !important; border-bottom: 1px solid var(--gray-100) !important; }
.modal-title { font-size: 18px !important; font-weight: 650 !important; letter-spacing: -0.015em; }

/* --- Alert refinement --- */
.alert { 
  border-radius: 12px !important;
  border: 1px solid !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-xs);
}
.alert-success { background: var(--success-light) !important; border-color: #a7f3d0 !important; color: var(--success-dark) !important; }
.alert-danger { background: var(--danger-light) !important; border-color: #fecaca !important; color: var(--danger-dark) !important; }
.alert-warning { background: var(--warning-light) !important; border-color: #fde68a !important; color: var(--warning-dark) !important; }
.alert-info { background: var(--info-light) !important; border-color: #bfdbfe !important; color: var(--info-dark) !important; }

/* --- Badge refinement --- */
.badge { 
  padding: 3px 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em;
}

/* --- Empty state --- */
.empty-state {
  padding: 64px 24px !important;
  text-align: center;
  color: var(--text-3);
}
.empty-state h3 { font-size: 17px !important; color: var(--text) !important; margin: 12px 0 6px !important; }
.empty-state p { font-size: 14px !important; color: var(--text-3) !important; max-width: 380px; margin: 0 auto 20px !important; }

/* --- Toggle switch polish --- */
.toggle-sw, .toggle-slider { 
  background: var(--gray-300) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.1) !important;
}
.toggle-sw::before, .toggle-slider::before {
  box-shadow: 0 1px 3px rgba(15,23,42,0.25), 0 0 0 0.5px rgba(15,23,42,0.05) !important;
}
.toggle input:checked ~ .toggle-sw, .toggle input:checked ~ .toggle-slider { 
  background: linear-gradient(180deg, #6366f1, #4f46e5) !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.15), 0 0 0 1px rgba(79,70,229,0.3) !important;
}

/* --- Responsive: LAPTOP first (1440, 1280, 1024) --- */
@media (max-width: 1440px) {
  .main-wrapper > .content, .main-wrapper > main { padding: 24px 24px 40px; }
  .page-title { font-size: 24px !important; }
}
@media (max-width: 1280px) {
  :root { --sb-width: 220px; }
  .main-wrapper > .content, .main-wrapper > main { padding: 20px 20px 36px; }
  .page-title { font-size: 22px !important; }
  .kpi-value, .stat-value { font-size: 24px !important; }
  .login-hero-title { font-size: 36px !important; }
}
@media (max-width: 1024px) {
  .login-page { grid-template-columns: 1fr !important; }
  .login-left { display: none !important; }
  .login-right { padding: 24px !important; }
  .dash-bottom-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  :root { --sb-width: 0px; --content-pad-x: 16px; }
  .sidebar { transform: translateX(-100%); position: fixed; z-index: 100; height: 100vh; transition: transform 0.25s var(--ease-out); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .main-wrapper { margin-left: 0 !important; width: 100% !important; }
  .main-wrapper > .content, .main-wrapper > main { padding: 16px !important; }
  .topbar { padding: 0 16px !important; }
  .page-title { font-size: 20px !important; }
  .page-header { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .kpi-grid, .stats-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  .kpi-grid, .stats-row { grid-template-columns: 1fr !important; }
  .login-hero-title { font-size: 28px !important; }
  .btn { padding: 9px 14px !important; font-size: 13px !important; }
}

/* --- Print --- */
@media print {
  .sidebar, .topbar, .no-print, .page-actions { display: none !important; }
  .main-wrapper { margin: 0 !important; width: 100% !important; }
  .main-wrapper > .content, .main-wrapper > main { padding: 0 !important; max-width: none !important; }
  .card, .table-wrap { box-shadow: none !important; border: 1px solid var(--gray-200) !important; }
  body { background: #fff !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}