/* ============================================================
   Mockarty License Center — Design System v2
   Sidebar layout, full dark/light theme support
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }

/* Design tokens loaded from tokens.css (internal/designsystem) */
/* App-specific extensions */
html.light { --sidebar-bg:#ffffff; --sidebar-hover:#f4f7fb; }
html.dark { --sidebar-bg:#080d18; --sidebar-hover:#0e1524; }
html { --sidebar-bg:#080d18; --sidebar-hover:#0e1524; }

body {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,'Segoe UI',sans-serif;
    background:var(--bg-secondary);
    color:var(--text-primary);
    line-height:1.6;
    min-height:100vh;
    font-size:var(--font-base);
    -webkit-font-smoothing:antialiased;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    width:270px;
    min-width:270px;
    background:var(--sidebar-bg);
    border-right:1px solid var(--border-color);
    display:flex;
    flex-direction:column;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    overflow:hidden;
    transition:width .3s ease, min-width .3s ease;
    z-index:900;
}
.sidebar-collapsed .sidebar { width:60px; min-width:60px; }
.sidebar-collapsed .sidebar .sidebar-brand span { display:none; }
.sidebar-collapsed .sidebar .nav-section-label { display:none; }
.sidebar-collapsed .sidebar .nav-link { justify-content:center; padding:0.5rem; }
.sidebar-collapsed .sidebar .nav-link span { opacity:0; width:0; overflow:hidden; display:none; }
.sidebar-collapsed .sidebar .nav-link i { margin:0; }
.sidebar-collapsed .sidebar .sidebar-footer span { display:none; }
.sidebar-collapsed .sidebar .sidebar-logout { justify-content:center; }
.sidebar-collapsed .sidebar .sidebar-toggle-btn { margin:0 auto; }
.sidebar-collapsed .sidebar .sidebar-header {
    flex-direction:column; justify-content:center; gap:0.5rem; padding:0.75rem 0.5rem;
}
.sidebar-collapsed .sidebar .sidebar-brand { justify-content:center; }
.sidebar-logo-svg { height:32px; width:auto; overflow:visible; flex-shrink:0; transition:height .3s ease, width .3s ease; }
.sidebar-collapsed .sidebar .sidebar-logo-svg { height:38px; width:38px; }

.sidebar-header {
    padding:0.875rem 1rem;
    border:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.5rem;
    min-height:52px;
}
.sidebar-brand {
    display:flex; align-items:center; gap:0.5rem;
    text-decoration:none; color:var(--text-primary);
    font-weight:700; font-size:var(--font-md);
    white-space:nowrap; overflow:hidden;
}
.sidebar-logo { width:28px; height:28px; border-radius:var(--radius-sm); object-fit:contain; flex-shrink:0; }
.sidebar-brand-text { display:flex; flex-direction:column; line-height:1.2; overflow:hidden; }
.version-badge { font-size:10px; font-weight:500; color:var(--text-muted); opacity:0.7; }
.sidebar-collapsed .sidebar .sidebar-brand-text { display:none; }
.sidebar-toggle-btn {
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    background:var(--bg-tertiary); border:1px solid var(--border-color);
    color:var(--text-muted); cursor:pointer; border-radius:var(--radius-sm);
    font-size:var(--font-xs); transition:all .15s; flex-shrink:0;
}
.sidebar-toggle-btn:hover { color:var(--accent-color); background:var(--accent-light); }

.sidebar-nav { flex:1; overflow-y:auto; padding:0.5rem; }
.nav-list { list-style:none; display:flex; flex-direction:column; gap:1px; }
.nav-section-label {
    padding:0.75rem 0.75rem 0.25rem;
    font-size:var(--font-xs); font-weight:600;
    text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-muted);
}
.nav-link {
    display:flex; align-items:center; gap:0.625rem;
    padding:0.5rem 0.75rem; color:var(--text-secondary);
    text-decoration:none; border-radius:var(--radius-md);
    transition:all .15s; font-size:var(--font-base); font-weight:500;
    white-space:nowrap;
}
.nav-link:hover { background:var(--sidebar-hover); color:var(--text-primary); }
.nav-item.active .nav-link { background:var(--accent-light); color:var(--accent-color); font-weight:600; }
.nav-link i { width:16px; text-align:center; font-size:0.875rem; flex-shrink:0; }

.sidebar-footer {
    padding:0.75rem; border-top:1px solid var(--border-color);
}
.sidebar-logout {
    display:flex; align-items:center; gap:0.625rem;
    width:100%; padding:0.5rem 0.75rem;
    background:none; border:1px solid var(--border-color);
    color:var(--text-secondary); cursor:pointer;
    border-radius:var(--radius-md); font-size:var(--font-base);
    transition:all .15s; font-weight:500;
}
.sidebar-logout:hover { background:rgba(239,68,68,.1); color:var(--danger-color); border-color:rgba(239,68,68,.3); }

/* ── Header Bar ──────────────────────────────────────────── */
.header {
    background:var(--bg-primary);
    border-bottom:1px solid var(--border-color);
    box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 1.5rem;
    position:fixed; top:0; left:270px; right:0;
    height:52px; z-index:800;
    transition:left .3s ease;
}
.sidebar-collapsed .header { left:60px; }
.header-left { display:flex; align-items:center; gap:0.75rem; min-width:0; }
.header-title {
    font-size:var(--font-md); font-weight:700; color:var(--text-primary);
    display:flex; align-items:center; gap:0.5rem; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
}
.header-title i { color:var(--accent-color); font-size:var(--font-base); }
.header-actions { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.header-select {
    padding:0.3rem 0.5rem; background:var(--bg-secondary);
    border:1px solid var(--border-color); border-radius:var(--radius-sm);
    color:var(--text-primary); font-size:var(--font-xs); font-weight:600;
    cursor:pointer; font-family:inherit; transition:border-color .15s;
}
.header-select:focus { outline:none; border-color:var(--accent-color); }
.header-btn {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    background:var(--bg-secondary); border:1px solid var(--border-color);
    border-radius:var(--radius-sm); color:var(--text-secondary);
    cursor:pointer; transition:all .15s; font-size:var(--font-sm);
}
.header-btn:hover { color:var(--accent-color); border-color:var(--accent-color); background:var(--accent-light); }
.header-btn-logout:hover { color:var(--danger-color); border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.1); }

/* ── Main Content ─────────────────────────────────────────── */
.main-content {
    margin-left:270px; padding-top:52px;
    display:flex; flex-direction:column; min-height:100vh; min-width:0;
    transition:margin-left .3s ease;
}
.sidebar-collapsed .main-content { margin-left:60px; }
.content-header {
    background:var(--bg-primary);
    border-bottom:1px solid var(--border-color);
    padding:0.75rem 1.5rem;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0; gap:1rem;
}
.content-title {
    font-size:var(--font-lg); font-weight:700; color:var(--text-primary);
    display:flex; align-items:center; gap:0.5rem;
}
.content-title i { color:var(--accent-color); }
.content-area { flex:1; overflow-y:auto; padding:1.5rem; }

/* ── KPI Cards ────────────────────────────────────────────── */
.kpi-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1rem; margin-bottom:1.5rem;
}
.kpi-card {
    background:var(--bg-primary); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); padding:1.25rem;
    display:flex; align-items:center; gap:1rem;
    box-shadow:var(--shadow-sm); transition:box-shadow .15s;
}
.kpi-card:hover { box-shadow:var(--shadow); }
.kpi-icon {
    width:48px; height:48px; border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; flex-shrink:0;
}
.kpi-icon-primary { background:rgba(45,140,240,.1); color:var(--accent-color); }
.kpi-icon-success { background:rgba(16,185,129,.1); color:var(--success-color); }
.kpi-icon-warning { background:rgba(245,158,11,.1); color:var(--warning-color); }
.kpi-icon-danger { background:rgba(239,68,68,.1); color:var(--danger-color); }
.kpi-icon-info { background:rgba(6,182,212,.1); color:var(--info-color); }
.kpi-body { min-width:0; }
.kpi-value { font-size:1.5rem; font-weight:700; color:var(--text-primary); line-height:1.2; }
.kpi-label { font-size:var(--font-sm); color:var(--text-secondary); font-weight:500; }

/* ── Dashboard Row ────────────────────────────────────────── */
.dashboard-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }
.dashboard-card { min-height:0; }

/* ── Quick Actions ────────────────────────────────────────── */
.quick-actions-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem;
}
.quick-action-btn {
    display:flex; flex-direction:column; align-items:center; gap:0.5rem;
    padding:1rem 0.75rem; background:var(--bg-secondary);
    border:1px solid var(--border-color); border-radius:var(--radius-md);
    color:var(--text-secondary); text-decoration:none;
    font-size:var(--font-sm); font-weight:500;
    transition:all .15s; cursor:pointer;
}
.quick-action-btn:hover { background:var(--accent-light); color:var(--accent-color); border-color:var(--accent-color); }
.quick-action-btn i { font-size:1.25rem; }

/* ── Activity List ────────────────────────────────────────── */
.activity-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.activity-item { display:flex; align-items:flex-start; gap:0.75rem; padding:0.5rem 0; }
.activity-icon {
    width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:var(--font-sm); flex-shrink:0;
}
.activity-icon-success { background:rgba(16,185,129,.1); color:var(--success-color); }
.activity-icon-danger { background:rgba(239,68,68,.1); color:var(--danger-color); }
.activity-icon-warning { background:rgba(245,158,11,.1); color:var(--warning-color); }
.activity-icon-info { background:rgba(6,182,212,.1); color:var(--info-color); }
.activity-icon-secondary { background:var(--bg-tertiary); color:var(--text-muted); }
.activity-body { flex:1; min-width:0; }
.activity-text { font-size:var(--font-sm); color:var(--text-primary); display:block; }
.activity-time { font-size:var(--font-xs); color:var(--text-muted); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background:var(--bg-primary); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-sm);
}
.card-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.875rem 1.25rem;
    border-bottom:1px solid var(--border-color);
}
.card-title {
    font-size:var(--font-md); font-weight:600; color:var(--text-primary);
    display:flex; align-items:center; gap:0.5rem;
}
.card-title i { color:var(--accent-color); font-size:var(--font-base); }
.card-body { padding:1.25rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:0.375rem;
    padding:0.5rem 1rem; border:1px solid transparent;
    border-radius:var(--radius-sm); font-size:var(--font-sm);
    font-weight:500; cursor:pointer; transition:all .15s;
    text-decoration:none; white-space:nowrap; font-family:inherit;
}
.btn-primary { background:var(--accent-color); color:var(--accent-contrast); border-color:var(--accent-color); }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-secondary { background:var(--bg-tertiary); color:var(--text-primary); border-color:var(--border-color); }
.btn-secondary:hover { background:var(--border-color); }
.btn-danger { background:var(--danger-color); color:var(--on-bright-fill); border-color:var(--danger-color); }
.btn-danger:hover { background:var(--severity-critical); color:var(--on-critical-fill); border-color:var(--severity-critical); opacity:1; }
.btn-success { background:var(--success-color); color:var(--on-bright-fill); border-color:var(--success-color); }
.btn-success:hover { opacity:.9; }
.btn-warning { background:var(--warning-color); color:var(--on-bright-fill); border-color:var(--warning-color); }
.btn-warning:hover { opacity:.9; }
.btn-info { background:var(--info-color); color:var(--on-bright-fill); border-color:var(--info-color); }
.btn-info:hover { opacity:.9; }
.btn-sm { padding:0.3rem 0.625rem; font-size:var(--font-xs); }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:0.375rem; margin-bottom:1rem; }
.form-group label { font-size:var(--font-sm); font-weight:500; color:var(--text-secondary); }
.form-input, .form-group input, .form-group select, .form-group textarea {
    padding:0.5rem 0.75rem; background:var(--bg-secondary);
    border:1px solid var(--border-color); border-radius:var(--radius-sm);
    color:var(--text-primary); font-size:var(--font-base);
    font-family:inherit; transition:border-color .15s,box-shadow .15s;
    width:100%;
}
.form-input:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline:none; border-color:var(--accent-color);
    box-shadow:0 0 0 3px rgba(45,140,240,.15);
}
.form-group small { font-size:var(--font-xs); color:var(--text-muted); }
.form-textarea, .form-group textarea {
    resize:vertical; min-height:80px;
    font-family:'SFMono-Regular','Cascadia Code',monospace;
    font-size:var(--font-sm);
}
/* Checkbox inside form-group: horizontal layout, no full-width input styling */
.form-group-checkbox {
    display:flex; flex-direction:row; align-items:center; gap:0.5rem;
    margin-bottom:1rem; cursor:pointer;
}
.form-group-checkbox label {
    display:flex; align-items:center; gap:0.5rem;
    font-size:var(--font-sm); font-weight:500; color:var(--text-secondary);
    cursor:pointer; margin:0;
}
.form-group-checkbox input[type="checkbox"] {
    width:auto; padding:0; flex-shrink:0;
    accent-color:var(--accent-color);
}
/* Fix form-group checkbox override — bare checkbox inside form-group should not get full-width styling */
.form-group input[type="checkbox"] {
    width:auto; padding:0;
    accent-color:var(--accent-color);
}
/* Form rows: align items to end so fields line up even when labels wrap */
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; align-items:end; margin-bottom:1rem; }
.form-row .form-group { margin-bottom:0; }
.filter-checkbox {
    display:flex; align-items:center; gap:0.375rem;
    font-size:var(--font-sm); color:var(--text-secondary);
    white-space:nowrap; cursor:pointer;
}
.features-checkboxes { display:flex; flex-wrap:wrap; gap:0.5rem; }
.feature-checkbox {
    display:flex; align-items:center; gap:0.25rem;
    padding:0.25rem 0.5rem; background:var(--bg-secondary);
    border:1px solid var(--border-color); border-radius:var(--radius-sm);
    font-size:var(--font-sm); cursor:pointer; transition:all .15s;
}
.feature-checkbox:hover { border-color:var(--accent-color); }
.feature-checkbox input:checked + .feature-name { color:var(--accent-color); font-weight:600; }

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar {
    display:flex; align-items:center; gap:0.75rem;
    padding:0.875rem 1.25rem; background:var(--bg-primary);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    flex-wrap:wrap;
}
.toolbar-search { flex:1; min-width:180px; }

/* ── Table ────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:var(--font-sm); }
thead th {
    padding:0.625rem 1rem; text-align:left; font-weight:600;
    color:var(--text-secondary); background:var(--bg-secondary);
    border-bottom:1px solid var(--border-color); white-space:nowrap;
}
tbody td {
    padding:0.75rem 1rem; border-bottom:1px solid var(--border-color);
    color:var(--text-primary); vertical-align:middle;
}
tbody tr:hover td { background:var(--bg-secondary); }
tbody tr:last-child td { border-bottom:none; }
.actions-cell { white-space:nowrap; }
.loading { text-align:center; color:var(--text-muted); padding:2rem; }
.detail-table { width:100%; }
.detail-table th { width:160px; padding:0.5rem 0.75rem; color:var(--text-secondary); font-weight:500; font-size:var(--font-sm); text-align:left; vertical-align:top; }
.detail-table td { padding:0.5rem 0.75rem; }

/* ── Badges ───────────────────────────────────────────────── */
.badge {
    display:inline-flex; align-items:center; gap:0.25rem;
    padding:0.2rem 0.5rem; border-radius:var(--radius-sm);
    font-size:var(--font-xs); font-weight:600; white-space:nowrap;
}
.badge-success { background:rgba(16,185,129,.15); color:var(--success-color); }
.badge-danger { background:rgba(239,68,68,.15); color:var(--danger-color); }
.badge-warning { background:rgba(245,158,11,.15); color:var(--warning-color); }
.badge-info { background:rgba(6,182,212,.15); color:var(--info-color); }
.badge-primary { background:var(--accent-light); color:var(--accent-color); }
.badge-secondary { background:var(--bg-tertiary); color:var(--text-secondary); }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    padding:0.75rem 1rem; border-radius:var(--radius-md);
    font-size:var(--font-sm); display:flex; align-items:center; gap:0.5rem;
}
.alert-success { background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2); color:var(--success-color); }
.alert-danger { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:var(--danger-color); }
.alert-warning { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); color:var(--warning-color); }
.alert-info { background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.2); color:var(--info-color); }

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.5); z-index:1000;
    align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.show { display:flex; }
.modal-dialog {
    background:var(--bg-primary); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); max-width:640px; width:100%;
    max-height:90vh; overflow-y:auto;
    box-shadow:var(--shadow-lg);
}
.modal-header-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.25rem; border-bottom:1px solid var(--border-color);
}
.modal-header-bar h2 {
    font-size:var(--font-md); font-weight:700; color:var(--text-primary);
    display:flex; align-items:center; gap:0.5rem;
}
.modal-header-bar h2 i { color:var(--accent-color); }
.modal-close-btn {
    background:none; border:none; font-size:1.25rem;
    color:var(--text-muted); cursor:pointer; padding:0;
    transition:color .15s; line-height:1;
}
.modal-close-btn:hover { color:var(--text-primary); }
.modal-body-content { padding:1.25rem; }
.modal-footer-bar {
    display:flex; align-items:center; justify-content:flex-end;
    gap:0.75rem; padding:1rem 1.25rem;
    border-top:1px solid var(--border-color);
}

/* ── Split Layout ─────────────────────────────────────────── */
.split-layout { display:grid; grid-template-columns:1fr 360px; gap:1.5rem; }
.split-main { min-width:0; }
.split-side { min-width:0; }

/* ── Detail Grid ──────────────────────────────────────────── */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ── Mini Stats ───────────────────────────────────────────── */
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.mini-stat { text-align:center; padding:1rem; background:var(--bg-secondary); border-radius:var(--radius-md); }
.mini-stat-value { font-size:1.25rem; font-weight:700; color:var(--accent-color); }
.mini-stat-label { font-size:var(--font-xs); color:var(--text-secondary); margin-top:0.25rem; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { padding:1rem; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.pagination-controls { display:flex; align-items:center; gap:0.375rem; }
.pagination-info { font-size:var(--font-sm); color:var(--text-muted); margin-left:0.75rem; }

/* ── Links ────────────────────────────────────────────────── */
.link-primary { color:var(--accent-color); text-decoration:none; }
.link-primary:hover { text-decoration:underline; }
.text-muted { color:var(--text-muted); }
code { background:var(--bg-tertiary); padding:2px 6px; border-radius:3px; font-size:var(--font-xs); color:var(--text-primary); }
.code-block {
    background:var(--bg-secondary); padding:1rem; border-radius:var(--radius-sm);
    overflow-x:auto; font-size:var(--font-sm); font-family:'SFMono-Regular','Cascadia Code',monospace;
    color:var(--text-primary); border:1px solid var(--border-color);
}

/* ── Line Items (Invoice) ─────────────────────────────────── */
.line-item-row { display:flex; gap:0.5rem; margin-bottom:0.5rem; align-items:center; }
.line-item-row .form-input { width:auto; min-width:0; }

/* ── Invoice Preview ──────────────────────────────────────── */
.invoice-preview { font-size:var(--font-sm); }
.inv-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px solid var(--accent-color); }
.inv-header h3 { font-size:var(--font-lg); font-weight:700; margin-bottom:0.25rem; }
.inv-date { color:var(--text-secondary); font-size:var(--font-sm); }
.inv-parties { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-bottom:1.5rem; }
.inv-party h4 { font-size:var(--font-sm); font-weight:600; color:var(--text-secondary); margin-bottom:0.5rem; text-transform:uppercase; letter-spacing:.05em; }
.inv-party p { font-size:var(--font-sm); color:var(--text-primary); margin-bottom:0.25rem; }
.inv-table { margin-bottom:1.5rem; }
.inv-table thead th { background:var(--bg-tertiary); }
.inv-totals { display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; margin-bottom:1rem; }
.inv-total-row { display:flex; gap:2rem; font-size:var(--font-sm); }
.inv-total-row span:first-child { color:var(--text-secondary); min-width:100px; text-align:right; }
.inv-total-grand { font-weight:700; font-size:var(--font-md); padding-top:0.5rem; border-top:2px solid var(--border-color); }
.inv-notes { padding:0.75rem; background:var(--bg-secondary); border-radius:var(--radius-sm); font-size:var(--font-sm); color:var(--text-secondary); }

/* ── Notifications ────────────────────────────────────────── */
.notification-container {
    position:fixed; top:1rem; right:1rem; z-index:2000;
    display:flex; flex-direction:column; gap:0.625rem;
    pointer-events:none;
}
.notification {
    display:flex; align-items:flex-start; gap:0.625rem;
    padding:0.75rem 1rem; border-radius:var(--radius-md);
    background:var(--bg-primary); border:1px solid var(--border-color);
    box-shadow:var(--shadow-lg); min-width:260px; max-width:360px;
    font-size:var(--font-sm); pointer-events:all;
    animation:slideInRight .25s ease-out;
}
.notification.notification-success { border-left:3px solid var(--success-color); }
.notification.notification-error { border-left:3px solid var(--danger-color); }
.notification.notification-warning { border-left:3px solid var(--warning-color); }
.notification.notification-info { border-left:3px solid var(--info-color); }
.notification-icon { margin-top:1px; flex-shrink:0; }
.notification.notification-success .notification-icon { color:var(--success-color); }
.notification.notification-error .notification-icon { color:var(--danger-color); }
.notification.notification-warning .notification-icon { color:var(--warning-color); }
.notification.notification-info .notification-icon { color:var(--info-color); }
.notification-content { flex:1; min-width:0; overflow-wrap:anywhere; }
.notification:has(.notification-actions) { flex-wrap:wrap; }
.notification:has(.notification-actions) .notification-content { flex-basis:100%; }
.notification-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.notification-message { font-weight:600; color:var(--text-primary); margin-bottom:2px; }
.notification-details { font-size:var(--font-xs); color:var(--text-secondary); }
.notification-close {
    background:none; border:none; color:var(--text-muted);
    cursor:pointer; font-size:1rem; padding:0; margin-left:4px;
    flex-shrink:0; transition:color .15s;
}
.notification-close:hover { color:var(--text-primary); }

/* ── Empty State ──────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state i { font-size:2.5rem; margin-bottom:0.875rem; opacity:.5; display:block; }
.empty-state p { font-size:var(--font-md); margin-bottom:0.5rem; color:var(--text-secondary); }
.empty-state-sm { text-align:center; padding:1.5rem; color:var(--text-muted); }
.empty-state-sm i { font-size:1.5rem; margin-bottom:0.5rem; opacity:.5; display:block; }
.empty-state-sm p { font-size:var(--font-sm); color:var(--text-secondary); }

/* ── Login Page ───────────────────────────────────────────── */
.login-page-wrapper {
    min-height:100vh; display:flex; align-items:center;
    justify-content:center; padding:2rem 1rem; background:var(--bg-secondary);
    width:100%;
}
.login-container {
    width:100%; max-width:400px; background:var(--bg-primary);
    border:1px solid var(--border-color); border-radius:var(--radius-lg);
    padding:2.5rem 2rem; box-shadow:var(--shadow-lg);
}
.login-title { display:flex; flex-direction:column; align-items:center; gap:0.75rem; margin-bottom:2rem; text-align:center; }
.login-title-logo { width:56px; height:56px; border-radius:var(--radius-md); object-fit:contain; }
.login-title h1 { font-size:var(--font-lg); font-weight:700; color:var(--text-primary); margin:0; }
.login-title p { font-size:var(--font-sm); color:var(--text-secondary); margin:0; }
.login-form { display:flex; flex-direction:column; gap:1.25rem; }
.btn-login {
    padding:0.625rem; background:var(--accent-color); color:#fff;
    border:none; border-radius:var(--radius-sm); font-size:var(--font-md);
    font-weight:600; cursor:pointer; transition:background .15s; width:100%;
}
.btn-login:hover { background:var(--accent-hover); }
.btn-login:disabled { opacity:.55; cursor:not-allowed; }
.error-message {
    padding:0.75rem; background:rgba(239,68,68,.1);
    border:1px solid rgba(239,68,68,.3); border-radius:var(--radius-sm);
    color:var(--danger-color); font-size:var(--font-sm); display:none;
}
.error-message.show { display:block; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes slideInRight { from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);} }
@keyframes slideOutRight { from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(10px);} }

/* ── Mockarty Ring Loader ────────────────────────────────── */
.mk-loader-ring{display:inline-block;line-height:0;vertical-align:middle}
.mk-loader-ring svg{animation:mk-ring-spin 1.2s linear infinite;display:block}
@keyframes mk-ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Print ────────────────────────────────────────────────── */
@media print {
    .sidebar, .content-header, .notification-container, .modal-overlay { display:none!important; }
    .main-content { margin:0; }
    .content-area { padding:0; }
    body { background:#fff; color:#000; }
}

/* ── Report Tabs ──────────────────────────────────────────── */
.report-tabs { display:flex; gap:2px; margin-bottom:1rem; background:var(--bg-tertiary); border-radius:var(--radius-md); padding:3px; }
.report-tab { padding:8px 16px; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; border-radius:var(--radius-sm); font-size:var(--font-sm); font-weight:500; transition:all .15s; white-space:nowrap; }
.report-tab:hover { color:var(--text-primary); background:var(--bg-secondary); }
.report-tab.active { background:var(--accent-color); color:#fff; }

/* ── Period Picker ───────────────────────────────────────── */
.period-picker { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.period-picker select, .period-picker input[type="date"] { padding:6px 10px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-primary); color:var(--text-primary); font-size:var(--font-sm); }

/* ── Report Results ──────────────────────────────────────── */
.report-results { margin-top:1rem; }
.report-table { width:100%; border-collapse:collapse; font-size:var(--font-sm); }
.report-table th, .report-table td { padding:8px 10px; border:1px solid var(--border-color); text-align:left; }
.report-table th { background:var(--bg-tertiary); font-weight:600; color:var(--text-primary); }
.report-table tr:hover { background:var(--bg-secondary); }
.report-table .text-right { text-align:right; }
.report-table tfoot td { font-weight:bold; background:var(--bg-tertiary); }

/* ── Doc Preview ─────────────────────────────────────────── */
.doc-preview-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; display:flex; align-items:center; justify-content:center; }
.doc-preview-modal { background:var(--bg-primary); border-radius:var(--radius-lg); width:90%; max-width:900px; max-height:90vh; overflow:auto; box-shadow:var(--shadow-lg); }
.doc-preview-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-color); }
.doc-preview-body { padding:16px; }
.doc-preview-body iframe { width:100%; min-height:600px; border:none; }

/* ── Seller Form ─────────────────────────────────────────── */
.seller-form { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.seller-form .form-section { background:var(--bg-secondary); padding:1rem; border-radius:var(--radius-md); border:1px solid var(--border-color); }
.seller-form .form-section h3 { font-size:var(--font-md); margin-bottom:0.75rem; color:var(--accent-color); }
.seller-form .form-section.full-width { grid-column:1/-1; }

/* ── Refund Status Badges ────────────────────────────────── */
.refund-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:12px; font-size:var(--font-xs); font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.refund-badge.pending { background:var(--bg-tertiary); color:var(--text-secondary); }
.refund-badge.approved { background:rgba(59,130,246,.15); color:#3b82f6; }
.refund-badge.processing { background:rgba(245,158,11,.15); color:var(--warning-color); }
.refund-badge.completed { background:rgba(16,185,129,.15); color:var(--success-color); }
.refund-badge.failed { background:rgba(239,68,68,.15); color:var(--danger-color); }
.refund-badge.rejected { background:var(--bg-tertiary); color:var(--text-muted); text-decoration:line-through; }

/* ── Transaction Log ─────────────────────────────────────── */
.transaction-log { font-size:var(--font-sm); }
.transaction-log .txn-row { display:flex; align-items:center; gap:0.75rem; padding:8px 0; border-bottom:1px solid var(--border-color); }
.transaction-log .txn-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--font-xs); }
.transaction-log .txn-icon.inflow { background:rgba(16,185,129,.15); color:var(--success-color); }
.transaction-log .txn-icon.outflow { background:rgba(239,68,68,.15); color:var(--danger-color); }
.transaction-log .txn-amount { margin-left:auto; font-weight:600; }
.transaction-log .txn-amount.inflow { color:var(--success-color); }
.transaction-log .txn-amount.outflow { color:var(--danger-color); }

/* ── Balance Card ────────────────────────────────────────── */
.balance-card { background:linear-gradient(135deg, var(--accent-color), var(--accent-hover)); color:#fff; padding:1.25rem; border-radius:var(--radius-lg); }
.balance-card .balance-label { font-size:var(--font-sm); opacity:.8; }
.balance-card .balance-value { font-size:1.75rem; font-weight:700; margin-top:4px; }

/* ── Tax Calendar ────────────────────────────────────────── */
.cal-deadline { padding:6px 10px; border-left:3px solid transparent; margin-bottom:4px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:var(--font-sm); }
.cal-deadline.past { border-left-color:var(--danger-color); background:rgba(239,68,68,.08); }
.cal-deadline.upcoming { border-left-color:var(--warning-color); background:rgba(245,158,11,.08); }
.cal-deadline.future { border-left-color:var(--success-color); background:rgba(16,185,129,.08); }
.cal-deadline .cal-date { font-weight:600; min-width:90px; display:inline-block; }

/* ── Wizard Steps ────────────────────────────────────────── */
.wizard-steps { display:flex; gap:0; margin-bottom:1.5rem; }
.wizard-step { flex:1; padding:10px; text-align:center; font-size:var(--font-sm); color:var(--text-muted); border-bottom:2px solid var(--border-color); }
.wizard-step.active { color:var(--accent-color); border-bottom-color:var(--accent-color); font-weight:600; }
.wizard-step.done { color:var(--success-color); border-bottom-color:var(--success-color); }

/* ── Doc Type Badges ─────────────────────────────────────── */
.doc-type-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:var(--font-xs); font-weight:600; text-transform:uppercase; }
.doc-type-badge.schet { background:rgba(59,130,246,.15); color:#3b82f6; }
.doc-type-badge.act { background:rgba(16,185,129,.15); color:var(--success-color); }
.doc-type-badge.sf { background:rgba(168,85,247,.15); color:#a855f7; }
.doc-type-badge.upd { background:rgba(245,158,11,.15); color:var(--warning-color); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1024px) {
    .split-layout { grid-template-columns:1fr; }
    .dashboard-row { grid-template-columns:1fr; }
    .detail-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .sidebar { left:-240px; }
    .sidebar.mobile-open { left:0; }
    .header { left:0; }
    .main-content { margin-left:0; }
    .content-header { padding:0.75rem 1rem; }
    .content-area { padding:1rem; }
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .quick-actions-grid { grid-template-columns:1fr 1fr; }
    .toolbar { flex-direction:column; gap:0.5rem; }
    .toolbar-search { min-width:100%; }
    .form-row { grid-template-columns:1fr; }
}