html{--bg-base:#0f1117;--bg-surface:#161822;--bg-elevated:#1e2030;--bg-hover:#252840;--border:#2a2d3e;--border-light:#353851;--text-primary:#e4e7f0;--text-secondary:#9ca3b8;--text-muted:#636980;--accent:#6ee7b7;--accent-dim:#2d6a52;--accent-bg:rgba(110,231,183,0.08);--danger:#f87171;--danger-bg:rgba(248,113,113,0.1);--warning:#fbbf24;--info:#60a5fa;--success:#34d399;--radius-sm:6px;--radius:10px;--radius-lg:14px;--shadow:0 4px 24px rgba(0,0,0,0.25);--font:'DM Sans',system-ui,-apple-system,sans-serif;--font-mono:'JetBrains Mono',monospace;--sidebar-w:240px;--sidebar-collapsed-w:70px;--topbar-h:64px}

/* Light theme — same specificity as html, comes after so it wins */
html[data-theme="light"]{--bg-base:#f0f2f7;--bg-surface:#ffffff;--bg-elevated:#f5f6fa;--bg-hover:#e8eaf2;--border:#d8dce8;--border-light:#c5cbda;--text-primary:#1a1d2e;--text-secondary:#4b5275;--text-muted:#8890aa;--accent:#059669;--accent-dim:#a7f3d0;--accent-bg:rgba(5,150,105,0.08);--danger:#dc2626;--danger-bg:rgba(220,38,38,0.08);--warning:#d97706;--info:#2563eb;--success:#059669;--shadow:0 4px 24px rgba(0,0,0,0.08)}
html[data-theme="light"] select.form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234b5275'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E")}
html[data-theme="light"] .btn-primary{color:#fff}
html[data-theme="light"] .invoice-doc{background:#fff;color:#1a1a2e}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:var(--font);background:var(--bg-base);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.app-layout{display:flex;min-height:100vh}

.sidebar{
    width:var(--sidebar-w);
    background:var(--bg-surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:100;
    overflow:hidden;
    transition:width .25s ease,transform .25s ease;
}

.sidebar-header{padding:20px 20px 16px;border-bottom:1px solid var(--border)}

.logo{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:1.1rem;
    font-weight:700;
    color:var(--text-primary);
    letter-spacing:-.02em;
    overflow:hidden;
}

.sidebar-nav{
    flex:1;
    padding:12px 10px;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:var(--radius-sm);
    color:var(--text-secondary);
    font-weight:500;
    font-size:.93rem;
    text-decoration:none;
    transition:all .15s;
    white-space:nowrap;
    overflow:hidden;
}

.nav-item:hover{background:var(--bg-hover);color:var(--text-primary);text-decoration:none}
.nav-item.active{background:var(--accent-bg);color:var(--accent)}
.nav-logout{color:var(--danger)}
.nav-logout:hover{background:var(--danger-bg)}

.sidebar-footer{
    padding:10px;
    border-top:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:2px;
}

.main-content{
    flex:1;
    margin-left:var(--sidebar-w);
    min-height:100vh;
    transition:margin-left .25s ease;
}

.top-bar{
    height:var(--topbar-h);
    padding:0 32px;
    display:flex;
    align-items:center;
    gap:12px;
    border-bottom:1px solid var(--border);
    background:var(--bg-surface);
    position:sticky;
    top:0;
    z-index:50;
}

.page-title{
    font-size:1.15rem;
    font-weight:600;
    letter-spacing:-.01em;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.top-bar-spacer{flex:1}

.menu-toggle{
    background:none;
    border:none;
    color:var(--text-primary);
    cursor:pointer;
    padding:4px;
    flex-shrink:0;
}

.mobile-only{display:none}

.sidebar-collapse-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    cursor:pointer;
    flex-shrink:0;
    transition:all .15s ease;
}

.sidebar-collapse-btn:hover{
    background:var(--bg-hover);
    color:var(--accent);
    border-color:var(--accent);
}

.sidebar-collapse-btn svg{
    transition:transform .25s ease;
}

.sidebar.collapsed + .sidebar-overlay + .main-content .sidebar-collapse-btn svg{
    transform:rotate(180deg);
}

.top-bar-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    z-index:99;
    backdrop-filter:blur(2px);
}

.content-area{padding:28px 32px 60px;max-width:1400px}

/* COLLAPSED SIDEBAR */
.sidebar.collapsed{
    width:var(--sidebar-collapsed-w);
}

.sidebar.collapsed .logo{
    justify-content:center;
}

.sidebar.collapsed .logo span{
    display:none;
}

.sidebar.collapsed .sidebar-header{
    padding-left:12px;
    padding-right:12px;
}

.sidebar.collapsed .sidebar-nav,
.sidebar.collapsed .sidebar-footer{
    padding-left:8px;
    padding-right:8px;
}

.sidebar.collapsed .nav-item{
    justify-content:center;
    gap:0;
    padding:12px 0;
}

.sidebar.collapsed .nav-item svg{
    margin:0;
    flex-shrink:0;
}

.sidebar.collapsed .nav-item span{
    display:none;
}

.sidebar.collapsed ~ .main-content{
    margin-left:var(--sidebar-collapsed-w);
}

.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.card-title{font-size:1.05rem;font-weight:600}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px}
.stat-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.stat-label{font-size:.82rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.stat-value{font-size:1.8rem;font-weight:700;letter-spacing:-.03em;font-family:var(--font-mono)}
.stat-value.accent{color:var(--accent)}
.stat-value.warning{color:var(--warning)}
.stat-value.danger{color:var(--danger)}
.stat-value.info{color:var(--info)}
.stat-sub{font-size:.82rem;color:var(--text-muted)}

.table-wrapper{overflow-x:auto;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
th{font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;background:var(--bg-elevated)}
td{font-size:.92rem}
tr:hover td{background:var(--bg-hover)}
.text-right{text-align:right}
.text-center{text-align:center}
.text-mono{font-family:var(--font-mono);font-size:.88rem}

.status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600;background:color-mix(in srgb,var(--badge-color) 15%,transparent);color:var(--badge-color);text-transform:uppercase;letter-spacing:.04em}

.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:#0f1117}
.btn-primary:hover{background:#86efcb;text-decoration:none}
.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--bg-hover);text-decoration:none}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(248,113,113,0.2)}
.btn-danger:hover{background:rgba(248,113,113,0.2);text-decoration:none}
.btn-sm{padding:6px 12px;font-size:.82rem}
.btn-group{display:flex;gap:8px;align-items:center}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full-width{grid-column:1/-1}
.form-label{font-size:.82rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.form-control{padding:10px 14px;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font);font-size:.92rem;transition:border-color .15s}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3b8'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
textarea.form-control{min-height:100px;resize:vertical}
.form-actions{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}

.flash-message{padding:14px 20px;border-radius:var(--radius);margin-bottom:20px;font-weight:500;font-size:.92rem}
.flash-success{background:rgba(52,211,153,0.1);color:var(--success);border:1px solid rgba(52,211,153,0.2)}
.flash-error{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(248,113,113,0.2)}
.flash-info{background:rgba(96,165,250,0.1);color:var(--info);border:1px solid rgba(96,165,250,0.2)}

.pagination{display:flex;gap:4px;margin-top:20px;justify-content:center}
.pagination a,.pagination span{padding:8px 14px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:500;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border);text-decoration:none}
.pagination a:hover{background:var(--bg-hover);text-decoration:none}
.pagination .active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-dim)}

.login-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-base);padding:20px}
.login-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.login-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:32px;font-size:1.5rem;font-weight:700}
.login-card .form-group{margin-bottom:18px}
.login-card .btn{width:100%;justify-content:center;padding:12px;font-size:1rem}
.login-error{background:var(--danger-bg);color:var(--danger);padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:.9rem;border:1px solid rgba(248,113,113,0.2)}

.twofa-qr{text-align:center;margin:20px 0}
.twofa-qr img{border-radius:var(--radius);border:4px solid #fff}
.twofa-secret{font-family:var(--font-mono);background:var(--bg-base);padding:10px 16px;border-radius:var(--radius-sm);font-size:1rem;letter-spacing:.15em;text-align:center;margin:12px 0;word-break:break-all}

.line-items-table td.col-desc{width:34%}
.line-items-table th.col-qty,
.line-items-table td.col-qty{width:8%}
.line-items-table th.col-price,
.line-items-table td.col-price{width:14%}
.line-items-table th.col-total,
.line-items-table td.col-total{width:10%}
.line-items-table th.col-action,
.line-items-table td.col-action{width:6%}

.line-items-table .col-product .form-control,
.line-items-table .col-desc .form-control,
.line-items-table .col-qty .form-control,
.line-items-table .col-price .form-control{
    width:100%;
    min-width:0;
}

/* Product thumbnail styles */
.product-thumb-wrapper{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.product-thumb{
    width:44px;
    height:44px;
    object-fit:cover;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    cursor:pointer;
    transition:all .2s ease;
}
.product-thumb:hover{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-bg);
    transform:scale(1.05);
}

/* Image preview modal */
.image-preview-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(8px);
    align-items:center;
    justify-content:center;
    padding:20px;
}
.image-preview-modal.open{display:flex}
.image-preview-content{
    position:relative;
    max-width:90vw;
    max-height:90vh;
    animation:modalFadeIn .2s ease;
}
@keyframes modalFadeIn{
    from{opacity:0;transform:scale(0.95)}
    to{opacity:1;transform:scale(1)}
}
.image-preview-content img{
    max-width:100%;
    max-height:85vh;
    border-radius:var(--radius-lg);
    box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.image-preview-close{
    position:absolute;
    top:-12px;
    right:-12px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--bg-surface);
    border:1px solid var(--border);
    color:var(--text-primary);
    font-size:1.4rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .15s;
    line-height:1;
}
.image-preview-close:hover{
    background:var(--danger);
    border-color:var(--danger);
    color:#fff;
}

.add-line-btn{background:none;border:1px dashed var(--border-light);color:var(--accent);padding:10px;width:100%;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font);font-weight:500;font-size:.9rem;transition:all .15s}
.add-line-btn:hover{border-color:var(--accent);background:var(--accent-bg)}
.invoice-totals{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.invoice-totals .row{display:flex;gap:24px;align-items:center}
.invoice-totals .label{color:var(--text-muted);font-size:.9rem;min-width:120px;text-align:right}
.invoice-totals .value{font-family:var(--font-mono);font-weight:600;min-width:100px;text-align:right}
.invoice-totals .grand-total .value{font-size:1.3rem;color:var(--accent)}
.invoice-totals .grand-total .label{font-weight:600;color:var(--text-primary)}

.invoice-doc{background:#fff;color:#1a1a2e;border-radius:var(--radius-lg);padding:48px;max-width:900px}
.invoice-doc h2{color:#1a1a2e;font-size:2rem;font-weight:700;margin-bottom:4px}
.invoice-doc .inv-number{color:#6b7280;font-size:1.1rem}
.invoice-doc table th{background:#f3f4f6;color:#4b5563}
.invoice-doc table td{color:#1a1a2e;border-color:#e5e7eb}
.invoice-doc table tr:hover td{background:#f9fafb}

.report-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:24px}
.report-filters .form-group{margin-bottom:0}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state p{font-size:1rem;margin-bottom:16px}

.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--bg-base);border:1px solid var(--border-light);border-radius:24px;transition:all .2s}
.toggle-slider::before{content:"";position:absolute;height:18px;width:18px;left:2px;bottom:2px;background:var(--text-muted);border-radius:50%;transition:all .2s}
.toggle-switch input:checked+.toggle-slider{background:var(--accent-dim);border-color:var(--accent)}
.toggle-switch input:checked+.toggle-slider::before{background:var(--accent);transform:translateX(20px)}

.lang-toggle{display:inline-flex;align-items:center;justify-content:center;padding:5px 12px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:700;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);text-decoration:none;letter-spacing:.05em;transition:all .15s}
.lang-toggle:hover{background:var(--bg-hover);color:var(--accent);text-decoration:none;border-color:var(--accent)}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;color:var(--text-muted);background:var(--bg-elevated);border:1px solid var(--border);text-decoration:none;transition:all .15s;white-space:nowrap}
.theme-toggle:hover{background:var(--bg-hover);color:var(--accent);text-decoration:none;border-color:var(--accent)}
.theme-toggle-label{display:inline}

@media(max-width:900px){
  .theme-toggle-label{display:none}
  .theme-toggle{padding:5px 8px}
}

@media(max-width:768px){
  .sidebar{
    transform:translateX(-100%);
    z-index:100;
    width:var(--sidebar-w);
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar.collapsed{
    width:var(--sidebar-w);
  }
  .sidebar.collapsed .logo span,
  .sidebar.collapsed .nav-item span{
    display:inline;
  }
  .sidebar.collapsed .nav-item{
    justify-content:flex-start;
    gap:10px;
    padding:10px 14px;
  }
  .sidebar-overlay.open{display:block}
  .main-content{margin-left:0}
  .mobile-only{display:block}
  .sidebar-collapse-btn{display:none}
  .content-area{padding:16px 14px 48px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .report-filters{flex-direction:column;align-items:stretch}
  .top-bar{padding:0 14px;gap:8px}
  .card{padding:16px}
  th,td{padding:10px 12px}
  .stat-value{font-size:1.4rem}
  div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .line-items-table .col-image{display:none}
  .line-items-table .col-product{width:30%}
  .line-items-table .col-desc{width:30%}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .page-title{font-size:1rem}
  .btn-group{flex-wrap:wrap}
  .card-header{flex-wrap:wrap;gap:10px}
  th,td{padding:8px 10px;font-size:.82rem}
}

@media print{
  .sidebar,.top-bar,.btn,.flash-message,.sidebar-overlay,.image-preview-modal{display:none!important}
  .main-content{margin-left:0}
  .content-area{padding:0}
  .invoice-doc{box-shadow:none;padding:0}
  body{background:#fff}
}

/* Toggle container */
.remember-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

/* Hide default checkbox */
.remember-toggle input {
    display: none;
}

/* Toggle background */
.remember-slider {
    width: 42px;
    height: 22px;
    background: #2a2d3e;
    border-radius: 999px;
    position: relative;
    transition: all 0.25s ease;
}

/* Toggle circle */
.remember-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.25s ease;
}

/* Active state */
.remember-toggle input:checked + .remember-slider {
    background: linear-gradient(135deg, #6ee7b7, #34d399);
}

/* Move circle */
.remember-toggle input:checked + .remember-slider::before {
    transform: translateX(20px);
}

/* Label */
.toggle-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.remember-slider {
    box-shadow: inset 0 0 0 1px var(--border-light);
}

.remember-toggle input:checked + .remember-slider {
    box-shadow: 0 0 8px rgba(110, 231, 183, 0.4);
}