/* ================================================================
   TallyFlow ERP - Tally Prime Inspired Dark Theme
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-tertiary: #1a2035;
    --bg-card: #151b2e;
    --bg-input: #0d1224;
    --bg-hover: #1e2a4a;
    --bg-active: #233056;
    --bg-modal: #0f1525;
    --border: #1e2d4a;
    --border-focus: #3b82f6;
    --text-primary: #e8ecf4;
    --text-secondary: #8b95a8;
    --text-muted: #5a6478;
    --text-heading: #f1f5f9;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-glow: rgba(59,130,246,0.15);
    --gold: #f59e0b;
    --gold-hover: #d97706;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #06b6d4;
    --debit: #f87171;
    --credit: #34d399;
    --sidebar-width: 260px;
    --header-height: 56px;
    --radius: 8px;
    --radius-sm: 4px;
    --shadow: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
    --transition: all 0.2s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body {
    font-family:'Inter',sans-serif;
    background:var(--bg-primary);
    color:var(--text-primary);
    min-height:100vh;
    overflow-x:hidden;
}
a { color:var(--accent); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--accent-hover); }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-primary); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ========== LOGIN PAGE ========== */
.login-wrapper {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0a0e1a 0%,#111827 50%,#0f1d3d 100%);
    position:relative;
    overflow:hidden;
}
.login-wrapper::before {
    content:'';
    position:absolute;
    width:600px; height:600px;
    background:radial-gradient(circle,rgba(59,130,246,0.08) 0%,transparent 70%);
    top:-200px; right:-200px;
    border-radius:50%;
}
.login-wrapper::after {
    content:'';
    position:absolute;
    width:400px; height:400px;
    background:radial-gradient(circle,rgba(245,158,11,0.06) 0%,transparent 70%);
    bottom:-100px; left:-100px;
    border-radius:50%;
}
.login-box {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:48px 40px;
    width:420px;
    max-width:95%;
    box-shadow:var(--shadow-lg);
    position:relative;
    z-index:1;
    animation:fadeInUp 0.5s ease;
}
.login-box .logo { text-align:center; margin-bottom:32px; }
.login-box .logo h1 {
    font-size:28px;
    font-weight:700;
    background:linear-gradient(135deg,var(--accent),var(--gold));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing:-0.5px;
}
.login-box .logo p { color:var(--text-secondary); font-size:13px; margin-top:4px; }

/* ========== LAYOUT ========== */
.app-layout { display:flex; min-height:100vh; }

/* ========== SIDEBAR ========== */
.sidebar {
    width:var(--sidebar-width);
    background:var(--bg-secondary);
    border-right:1px solid var(--border);
    height:100vh;
    position:fixed;
    top:0; left:0;
    display:flex;
    flex-direction:column;
    z-index:100;
    transition:var(--transition);
}
.sidebar-brand {
    padding:16px 20px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:12px;
}
.sidebar-brand h2 {
    font-size:18px;
    font-weight:700;
    background:linear-gradient(135deg,var(--accent),var(--gold));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.sidebar-brand small { color:var(--text-muted); font-size:10px; display:block; }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.nav-section { padding:8px 20px 4px; }
.nav-section-title {
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:var(--text-muted);
    margin-bottom:8px;
}
.nav-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 20px;
    color:var(--text-secondary);
    font-size:13px;
    transition:var(--transition);
    cursor:pointer;
    border-left:3px solid transparent;
}
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); border-left-color:var(--accent); }
.nav-item.active { background:var(--bg-active); color:var(--accent); border-left-color:var(--accent); font-weight:500; }
.nav-item .icon { width:18px; text-align:center; font-size:15px; }
.nav-item .shortcut {
    margin-left:auto;
    font-size:10px;
    font-family:'JetBrains Mono',monospace;
    background:var(--bg-primary);
    padding:2px 6px;
    border-radius:3px;
    color:var(--text-muted);
    border:1px solid var(--border);
}
.nav-submenu { display:none; }
.nav-submenu.open { display:block; }
.nav-submenu .nav-item { padding-left:48px; font-size:12.5px; }

/* ========== HEADER ========== */
.main-content { margin-left:var(--sidebar-width); flex:1; min-height:100vh; display:flex; flex-direction:column; }
.top-header {
    height:var(--header-height);
    background:var(--bg-secondary);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    padding:0 24px;
    position:sticky;
    top:0;
    z-index:50;
    gap:16px;
}
.top-header .page-title { font-size:16px; font-weight:600; color:var(--text-heading); }
.top-header .breadcrumb { display:flex; gap:6px; font-size:12px; color:var(--text-muted); }
.top-header .breadcrumb a { color:var(--text-secondary); }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:12px; }
.company-badge {
    background:var(--accent-glow);
    border:1px solid rgba(59,130,246,0.3);
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    color:var(--accent);
    font-weight:500;
}
.user-menu { display:flex; align-items:center; gap:8px; cursor:pointer; padding:6px 12px; border-radius:var(--radius); }
.user-menu:hover { background:var(--bg-hover); }
.user-avatar {
    width:32px; height:32px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--gold));
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:600; color:#fff;
}

/* ========== PAGE CONTENT ========== */
.page-content { padding:24px; flex:1; }

/* ========== CARDS ========== */
.card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
}
.card-header {
    padding:16px 20px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.card-header h3 { font-size:15px; font-weight:600; color:var(--text-heading); }
.card-body { padding:20px; }
.card-footer { padding:16px 20px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:flex-end; gap:10px; }

/* ========== FORMS ========== */
.form-group { margin-bottom:16px; }
.form-label {
    display:block;
    font-size:12px;
    font-weight:500;
    color:var(--text-secondary);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.form-control {
    width:100%;
    padding:10px 14px;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    font-size:13px;
    font-family:'Inter',sans-serif;
    transition:var(--transition);
    outline:none;
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-control::placeholder { color:var(--text-muted); }
select.form-control { cursor:pointer; }
textarea.form-control { min-height:80px; resize:vertical; }
.form-row { display:flex; gap:16px; }
.form-row .form-group { flex:1; }
.form-inline { display:flex; align-items:center; gap:8px; }
.form-check { display:flex; align-items:center; gap:8px; cursor:pointer; }
.form-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent); }
.form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }
.form-error { font-size:11px; color:var(--danger); margin-top:4px; }

/* ========== BUTTONS ========== */
.btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 18px;
    border:none;
    border-radius:var(--radius-sm);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:var(--transition);
    font-family:'Inter',sans-serif;
    outline:none;
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); box-shadow:0 4px 12px rgba(59,130,246,0.3); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#059669; }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-warning { background:var(--warning); color:#000; }
.btn-outline {
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-secondary);
}
.btn-outline:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow); }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-lg { padding:12px 24px; font-size:15px; }
.btn-block { width:100%; justify-content:center; }
.btn-group { display:flex; gap:8px; }

/* ========== TABLES ========== */
.table-wrapper { overflow-x:auto; }
table.data-table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
table.data-table thead th {
    padding:10px 14px;
    text-align:left;
    font-weight:600;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
    background:var(--bg-tertiary);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
    position:sticky;
    top:0;
}
table.data-table tbody td {
    padding:10px 14px;
    border-bottom:1px solid rgba(30,45,74,0.5);
    color:var(--text-primary);
    vertical-align:middle;
}
table.data-table tbody tr { transition:var(--transition); }
table.data-table tbody tr:hover { background:var(--bg-hover); }
table.data-table tbody tr.selected { background:var(--bg-active); }
table.data-table .amount { text-align:right; font-family:'JetBrains Mono',monospace; font-size:13px; }
table.data-table .amount.debit { color:var(--debit); }
table.data-table .amount.credit { color:var(--credit); }
table.data-table tfoot td {
    padding:10px 14px;
    font-weight:600;
    background:var(--bg-tertiary);
    border-top:2px solid var(--border);
}

/* ========== VOUCHER ENTRY ========== */
.voucher-container { max-width:1000px; }
.voucher-header { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.voucher-header .form-group { flex:1; min-width:150px; }
.voucher-grid {
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:16px;
}
.voucher-grid table { width:100%; border-collapse:collapse; }
.voucher-grid th {
    padding:8px 12px;
    background:var(--bg-tertiary);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--text-muted);
    text-align:left;
    border-bottom:1px solid var(--border);
}
.voucher-grid td { padding:4px 8px; border-bottom:1px solid rgba(30,45,74,0.3); }
.voucher-grid input {
    width:100%;
    padding:8px;
    background:transparent;
    border:none;
    color:var(--text-primary);
    font-size:13px;
    outline:none;
    font-family:'Inter',sans-serif;
}
.voucher-grid input:focus { background:var(--bg-active); }
.voucher-grid .row-active { background:var(--bg-active); }
.voucher-totals {
    display:flex;
    justify-content:flex-end;
    gap:40px;
    padding:16px 20px;
    background:var(--bg-tertiary);
    border-radius:var(--radius);
    margin-bottom:16px;
}
.voucher-totals .total-item label { font-size:11px; color:var(--text-muted); text-transform:uppercase; }
.voucher-totals .total-item .value {
    font-size:18px;
    font-weight:600;
    font-family:'JetBrains Mono',monospace;
}
.voucher-totals .total-item .value.balanced { color:var(--success); }
.voucher-totals .total-item .value.unbalanced { color:var(--danger); }

/* ========== GATEWAY (Main Menu) ========== */
.gateway-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:16px;
}
.gateway-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px 20px;
    cursor:pointer;
    transition:var(--transition);
    text-align:center;
    position:relative;
    overflow:hidden;
}
.gateway-card::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg,var(--accent),var(--gold));
    opacity:0;
    transition:var(--transition);
}
.gateway-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.gateway-card:hover::before { opacity:1; }
.gateway-card .icon { font-size:32px; margin-bottom:12px; }
.gateway-card h4 { font-size:14px; font-weight:600; color:var(--text-heading); margin-bottom:4px; }
.gateway-card p { font-size:11px; color:var(--text-muted); }
.gateway-card .shortcut-hint {
    position:absolute;
    top:10px; right:10px;
    font-size:10px;
    font-family:'JetBrains Mono',monospace;
    background:var(--bg-primary);
    padding:2px 6px;
    border-radius:3px;
    color:var(--text-muted);
    border:1px solid var(--border);
}

/* ========== STATS/DASHBOARD ========== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:20px;
    position:relative;
    overflow:hidden;
}
.stat-card::after {
    content:'';
    position:absolute;
    top:0; right:0;
    width:80px; height:80px;
    border-radius:50%;
    opacity:0.05;
}
.stat-card.blue::after { background:var(--accent); }
.stat-card.green::after { background:var(--success); }
.stat-card.gold::after { background:var(--gold); }
.stat-card.red::after { background:var(--danger); }
.stat-card .stat-label { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.stat-card .stat-value { font-size:24px; font-weight:700; font-family:'JetBrains Mono',monospace; margin:8px 0 4px; }
.stat-card .stat-sub { font-size:11px; color:var(--text-secondary); }

/* ========== MODAL ========== */
.modal-overlay {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(4px);
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
}
.modal-overlay.active { display:flex; }
.modal {
    background:var(--bg-modal);
    border:1px solid var(--border);
    border-radius:12px;
    width:560px;
    max-width:95%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:var(--shadow-lg);
    animation:fadeInUp 0.3s ease;
}
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-close { background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; padding:4px; }
.modal-close:hover { color:var(--text-primary); }
.modal-body { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* ========== ALERTS & TOAST ========== */
.alert {
    padding:12px 16px;
    border-radius:var(--radius-sm);
    font-size:13px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid;
}
.alert-success { background:rgba(16,185,129,0.1); border-color:rgba(16,185,129,0.3); color:var(--success); }
.alert-danger { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.3); color:var(--danger); }
.alert-warning { background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.3); color:var(--warning); }
.alert-info { background:rgba(6,182,212,0.1); border-color:rgba(6,182,212,0.3); color:var(--info); }
.toast-container { position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast {
    padding:12px 20px;
    border-radius:var(--radius);
    font-size:13px;
    box-shadow:var(--shadow);
    animation:slideInRight 0.3s ease;
    min-width:280px;
}

/* ========== BADGES ========== */
.badge {
    display:inline-flex;
    padding:3px 10px;
    border-radius:12px;
    font-size:11px;
    font-weight:500;
}
.badge-blue { background:rgba(59,130,246,0.15); color:var(--accent); }
.badge-green { background:rgba(16,185,129,0.15); color:var(--success); }
.badge-red { background:rgba(239,68,68,0.15); color:var(--danger); }
.badge-gold { background:rgba(245,158,11,0.15); color:var(--gold); }

/* ========== SEARCH BOX (Go To) ========== */
.search-overlay {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(8px);
    z-index:2000;
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding-top:15vh;
}
.search-overlay.active { display:flex; }
.search-box {
    width:580px;
    background:var(--bg-modal);
    border:1px solid var(--accent);
    border-radius:12px;
    box-shadow:0 0 40px rgba(59,130,246,0.2);
    overflow:hidden;
}
.search-box input {
    width:100%;
    padding:18px 24px;
    background:transparent;
    border:none;
    font-size:16px;
    color:var(--text-primary);
    outline:none;
}
.search-results { max-height:400px; overflow-y:auto; border-top:1px solid var(--border); }
.search-result-item {
    padding:12px 24px;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    transition:var(--transition);
}
.search-result-item:hover { background:var(--bg-hover); }
.search-result-item .type { font-size:10px; color:var(--text-muted); text-transform:uppercase; min-width:60px; }

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(100px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* ========== PRINT ========== */
@media print {
    .sidebar, .top-header, .btn, .no-print { display:none !important; }
    .main-content { margin-left:0 !important; }
    body { background:#fff; color:#000; font-size:12px; }
    .card { border:1px solid #ddd; box-shadow:none; }
    table.data-table th { background:#f0f0f0; color:#333; }
    table.data-table td { color:#000; border-color:#ddd; }
    .amount.debit, .amount.credit { color:#000 !important; }
}

/* ========== RESPONSIVE ========== */
@media(max-width:768px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
    .main-content { margin-left:0; }
    .form-row { flex-direction:column; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .gateway-grid { grid-template-columns:1fr 1fr; }
    .voucher-header { flex-direction:column; }
}

/* ========== LOADING ========== */
.loading { display:flex; align-items:center; justify-content:center; padding:40px; }
.spinner {
    width:32px; height:32px;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ========== TAB NAVIGATION ========== */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:20px; }
.tab {
    padding:10px 20px;
    font-size:13px;
    color:var(--text-secondary);
    cursor:pointer;
    border-bottom:2px solid transparent;
    transition:var(--transition);
}
.tab:hover { color:var(--text-primary); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:500; }

/* ========== EMPTY STATE ========== */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state .icon { font-size:48px; margin-bottom:16px; opacity:0.3; }
.empty-state h4 { font-size:16px; color:var(--text-secondary); margin-bottom:8px; }
.empty-state p { font-size:13px; color:var(--text-muted); }