@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

/* =========================================================
   VARIABLES — warm cream / naturalistic
   ========================================================= */
:root {
    /* Backgrounds */
    --bg-primary:    #ebe6dc;
    --bg-secondary:  #fcfbf9;
    --bg-tertiary:   #f3ede2;
    --bg-elevated:   #f7f2ea;

    /* Borders */
    --border-subtle: rgba(97, 70, 50, 0.13);
    --border-active: #c1754a;

    /* Text */
    --text-primary:  #2a2420;
    --text-secondary:#594942;
    --text-muted:    #7d6f66;

    /* Brand accent — terracotta */
    --accent:        #c1754a;
    --accent-light:  rgba(193, 117, 74, 0.12);

    /* Projection band palette — distinct from each other */
    --band-2:   #9e9589;   /* stone grey  — quiet/mediocre */
    --band-3:   #c1754a;   /* terracotta  — decent */
    --band-4:   #7952c0;   /* violet      — ambitious */
    --band-cus: #b83a5c;   /* deep rose   — exotic/exciting */

    /* Status */
    --status-good: #5a8a5a;
    --status-bad:  #a84040;

    --radius:      4px;
    --font-serif:  'Crimson Pro', Georgia, serif;
    --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    background: var(--bg-primary);
}

/* Subtle dot-grid grain — same technique as labs.ardwell.co.za */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(97, 70, 50, 0.045) 1px, transparent 0);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

a { color: var(--accent); text-decoration: none; }

/* =========================================================
   TYPOGRAPHY UTILITIES
   ========================================================= */
.label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.muted { color: var(--text-muted); }
/* .mono must never render as monospace — lock it to Inter */
.mono { font-family: var(--font-sans); }

/* =========================================================
   LAYOUT
   ========================================================= */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

main {
    flex: 1;
    padding: 28px 32px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(235, 230, 220, 0.97);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(12px);
    padding: 0 32px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-diamond {
    color: var(--accent);
    font-size: 0.7rem;
}

.header-brand {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.header-divider {
    width: 1px;
    height: 18px;
    background: var(--border-subtle);
}

.header-system {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-good);
    animation: pulse-dot 3s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.header-timestamp {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 24px;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 8px 28px rgba(97, 70, 50, 0.07);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0;
}

/* =========================================================
   METRIC CARDS
   ========================================================= */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 24px 20px 20px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.metric-card:hover {
    box-shadow: 0 8px 28px rgba(97, 70, 50, 0.08);
}

/* Slim top accent bar */
.metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
}
.metric-card.gross::before { background: var(--accent); }
.metric-card.net::before   { background: rgba(193, 117, 74, 0.35); }
.metric-card.hours::before { background: rgba(97, 70, 50, 0.25); }
.metric-card.tax::before   { background: rgba(168, 64, 64, 0.5); }

.metric-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.metric-value {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 6px;
}

.metric-value.gross { color: var(--accent); }
.metric-value.net   { color: rgba(193, 117, 74, 0.6); }
.metric-value.hours { color: var(--text-primary); }
.metric-value.tax   { color: #a84040; }

.metric-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* =========================================================
   CHARTS ROW
   ========================================================= */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    margin-bottom: 24px;
}

.chart-container {
    position: relative;
    height: 280px;
}

/* =========================================================
   PROJECTIONS SECTION
   ========================================================= */
.projections-section {
    margin-bottom: 24px;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.slider-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.slider-wrapper {
    flex: 1;
    position: relative;
}

input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(97, 70, 50, 0.18);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--band-cus);
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 2px 8px rgba(184, 58, 92, 0.35);
    cursor: pointer;
    transition: box-shadow 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 14px rgba(184, 58, 92, 0.55);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--band-cus);
    border: 2px solid var(--bg-secondary);
    cursor: pointer;
}

.slider-value {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--band-cus);
    min-width: 80px;
    text-align: right;
}

.projection-chart-container {
    height: 280px;
    margin-bottom: 20px;
}

/* ---- Projection band table ---- */
.projection-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.projection-table th {
    padding: 8px 14px;
    text-align: left;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.projection-table td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(97, 70, 50, 0.08);
    color: var(--text-primary);
}

/* Band swatch column */
.projection-table .band-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.band-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.band-label {
    font-weight: 500;
    color: var(--text-primary);
}

.band-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 4px;
}

.projection-table .amount {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
}

.projection-table .amount-net {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.projection-table tr.slider-row-highlight td {
    background: rgba(184, 58, 92, 0.05);
}

.projection-table tr.slider-row-highlight .band-label {
    color: var(--band-cus);
}

.projection-table tr:last-child td {
    border-bottom: none;
}

/* =========================================================
   TAX PROFILE CARD
   ========================================================= */
.tax-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    align-items: start;
}

/* ---- Salary breakdown column ---- */
.tax-salary {
    border-right: 1px solid var(--border-subtle);
    padding-right: 32px;
}

.tax-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    font-size: 0.82rem;
}

.tax-row.deduction .tax-row-val { color: var(--status-bad); }
.tax-row.deduction .tax-row-label { color: var(--text-secondary); }

.tax-row.divider-row {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 8px;
}

.tax-row-label {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.tax-row-label.bold,
.tax-row .bold { font-weight: 600; color: var(--text-primary); }

.tax-row-val {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--text-primary);
    text-align: right;
}

.tax-row-val.muted { color: var(--text-muted); font-size: 0.82rem; }
.tax-row-val.bold  { font-weight: 600; }

/* ---- Bracket position column ---- */
.tax-bracket-col {
    border-right: 1px solid var(--border-subtle);
    padding-right: 32px;
}

.bracket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}

.bracket-rate {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

.bracket-rate.next {
    font-size: 1.4rem;
    color: var(--status-bad);
    opacity: 0.7;
}

.bracket-rate-label {
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.bracket-bar-wrap { margin-bottom: 14px; }

.bracket-bar-track {
    position: relative;
    height: 8px;
    background: rgba(97, 70, 50, 0.1);
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 6px;
}

.bracket-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.bracket-bar-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 14px;
    background: var(--status-bad);
    border-radius: 2px;
    opacity: 0;
    transition: left 0.6s ease, opacity 0.3s ease;
}

.bracket-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    color: var(--text-muted);
}

.bracket-room-line {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    padding: 8px 12px;
}

.bracket-room-line strong { color: var(--text-primary); }

/* ---- Side income column ---- */
.tax-side-col {}

.side-income-title {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.side-income-rows { margin-bottom: 14px; }

.side-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid rgba(97, 70, 50, 0.07);
}

.side-row:last-child { border-bottom: none; }

.side-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.side-val {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.side-val.accent { color: var(--accent); font-weight: 600; }
.side-val.bold   { font-weight: 600; }
.side-val.muted  { color: var(--text-muted); }

.tax-insight {
    font-size: 0.76rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 10px 12px;
    line-height: 1.5;
}

.tax-insight strong { color: var(--text-primary); }

@media (max-width: 1100px) {
    .tax-layout {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .tax-salary    { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border-subtle); padding-bottom: 20px; }
    .tax-bracket-col { border-right: none; padding-right: 0; }
}

@media (max-width: 640px) {
    .tax-layout { grid-template-columns: 1fr; }
    .tax-bracket-col { border-right: none; }
}

/* =========================================================
   DROP ZONE
   ========================================================= */
.upload-section {
    margin-bottom: 24px;
}

.drop-zone {
    border: 1.5px dashed rgba(97, 70, 50, 0.25);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
    background: transparent;
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--accent);
    border-style: solid;
    background: var(--accent-light);
}

.drop-zone-icon {
    font-size: 1.8rem;
    color: rgba(97, 70, 50, 0.3);
    margin-bottom: 10px;
    transition: color 0.2s;
}

.drop-zone:hover .drop-zone-icon,
.drop-zone.dragover .drop-zone-icon {
    color: var(--accent);
}

.drop-zone-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.drop-zone-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

#file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Upload progress */
.upload-progress {
    margin-top: 14px;
    display: none;
}

.progress-bar-track {
    height: 2px;
    background: rgba(97, 70, 50, 0.15);
    border-radius: 1px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--accent);
    animation: progress-sweep 1.2s ease-in-out infinite;
}

@keyframes progress-sweep {
    0%   { width: 0%;   margin-left: 0%; }
    50%  { width: 60%;  margin-left: 20%; }
    100% { width: 0%;   margin-left: 100%; }
}

.upload-status-text {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* =========================================================
   INVOICE LEDGER
   ========================================================= */
.ledger-section {
    margin-bottom: 24px;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.ledger-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.ledger-table td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(97, 70, 50, 0.08);
    vertical-align: middle;
}

.ledger-table tbody tr.invoice-row {
    cursor: pointer;
    transition: background 0.15s;
}

.ledger-table tbody tr.invoice-row:hover td {
    background: var(--bg-tertiary);
}

.ledger-table tbody tr:nth-child(4n+1) td,
.ledger-table tbody tr:nth-child(4n+2) td {
    background: rgba(97, 70, 50, 0.025);
}

.ledger-table tbody tr.invoice-row:hover td {
    background: var(--bg-tertiary) !important;
}

.expand-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.72rem;
    padding: 0 4px;
    transition: color 0.15s;
}

.expand-btn:hover { color: var(--accent); }

.line-items-row { display: none; }
.line-items-row.expanded { display: table-row; }

.line-items-inner {
    padding: 4px 14px 14px 48px;
    background: var(--bg-tertiary);
}

.line-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.line-items-table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.line-items-table td {
    padding: 7px 10px;
    color: var(--text-secondary);
}

.delete-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 4px 9px;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    letter-spacing: 0.04em;
    transition: all 0.15s;
}

.delete-btn:hover {
    color: var(--status-bad);
    border-color: rgba(168, 64, 64, 0.4);
    background: rgba(168, 64, 64, 0.06);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 50px 20px;
}

.empty-state-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.empty-state-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* =========================================================
   TOAST NOTIFICATIONS
   ========================================================= */
#toast-container {
    position: fixed;
    top: 72px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 12px 16px;
    min-width: 260px;
    max-width: 360px;
    pointer-events: all;
    cursor: pointer;
    animation: toast-in 0.25s ease forwards;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(97, 70, 50, 0.1);
}

.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}

.toast.success::before { background: var(--status-good); }
.toast.warning::before { background: var(--accent); }
.toast.error::before   { background: var(--status-bad); }

.toast.fade-out {
    animation: toast-out 0.3s ease forwards;
}

.toast-title {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.toast-body {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); max-height: 100px; }
    to   { opacity: 0; transform: translateX(20px); max-height: 0; padding: 0; }
}

/* =========================================================
   FOOTER
   ========================================================= */
footer {
    background: #2a2420;
    border-top: 1px solid rgba(97, 70, 50, 0.25);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    color: rgba(230, 225, 214, 0.55);
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

footer .footer-brand {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: rgba(230, 225, 214, 0.75);
    font-style: italic;
}

footer .footer-sync { color: rgba(230, 225, 214, 0.4); }

/* =========================================================
   SECTION SEPARATORS
   ========================================================= */
hr.section-rule {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 24px 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-row   { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    main               { padding: 16px; }
    .header            { padding: 0 16px; }
    .metrics-grid      { grid-template-columns: 1fr 1fr; }
    .metric-value      { font-size: 1.5rem; }
    footer             { padding: 14px 16px; }
}

@media (max-width: 400px) {
    .metrics-grid { grid-template-columns: 1fr; }
}