:root {
    --primary: #2563eb;
    --success: #059669;
    --danger: #dc2626;
    --excel: #1d6f42;
    --gray: #64748b;
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --text: #1e293b;
    --border: #e2e8f0;
}

[data-theme="dark"] {
    --bg: #0f172a;
    --card-bg: #1e293b;
    --text: #f1f5f9;
    --border: #334155;
}

body { font-family: 'Inter', sans-serif; background: var(--bg); margin: 0; padding: 20px; color: var(--text); transition: background 0.3s; }
.app { max-width: 1350px; margin: 0 auto; background: var(--card-bg); border-radius: 12px; padding: 25px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.brand-logo { height: 75px; width: auto; object-fit: contain; }

.tools-top { display: flex; align-items: center; gap: 15px; }
.converter-mini { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; background: var(--bg); padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); }
.converter-mini input { width: 55px; padding: 3px; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 4px; }

.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 25px; }
.chart-container, .template-box, .sync-box { background: var(--card-bg); padding: 18px; border-radius: 10px; border: 1px solid var(--border); min-height: 250px; }

.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.template-box button { width: 100%; text-align: left; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); cursor: pointer; font-size: 0.72rem; font-weight: 600; }
.btn-ticket-special { background: #1e293b !important; color: #fff !important; grid-column: span 2; text-align: center !important; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 25px; }
.card { padding: 20px; border-radius: 10px; border: 1px solid var(--border); text-align: center; background: var(--card-bg); }
.card .label { color: var(--gray); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.card p:not(.label) { margin: 8px 0 0; font-size: 1.8rem; font-weight: 700; }

.in-text { color: var(--success); }
.out-text { color: var(--danger); }

/* Net Cash Highlight Logic */
.card.highlight { background: #1e293b !important; border: none; }
.card.highlight p { color: #ffffff !important; }
.card.highlight .label { color: #94a3b8 !important; }

[data-theme="dark"] .card.highlight { background: #2563eb !important; }

.card.negative-bal { background: var(--danger) !important; }
.card.negative-bal p, .card.negative-bal .label { color: #ffffff !important; }

table { width: auto; min-width: 100%; border-collapse: collapse; }
th { background: var(--bg); padding: 14px; font-size: 0.75rem; color: var(--gray); border-bottom: 2px solid var(--border); text-align: left; }
td { border-bottom: 1px solid var(--border); padding: 6px 4px; }

input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); box-sizing: border-box; }
.btn { cursor: pointer; border: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s; }
.btn-add { background: var(--primary); color: white; }
.btn-save { background: var(--success); color: white; }
.btn-excel { background: var(--excel); color: white; }
.btn-print { background: var(--gray); color: white; }
.btn-inv { color: var(--primary); background: none; font-size: 1.2rem; cursor: pointer; border: none; }
.btn-del { color: var(--danger); background: none; font-size: 1.2rem; cursor: pointer; border: none; }
.btn-icon { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; cursor: pointer; font-size: 1.2rem; }

.client-ledger-form { margin-bottom: 25px; }
.client-ledger-form h3 { margin-bottom: 15px; font-size: 1.5rem; font-weight: 600; color: var(--text); }
.client-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

.hidden-row { display: none !important; }
@media print { .no-print { display: none !important; } }