/* ===== DataForger brand layer: applied over the forked workbench stylesheet (app.css).
   Light sheet, IBM Plex, near-black ink, amber accent - the look of the mockups. ===== */
:root, :root[data-theme="light"] {
    --wds-accent: #B45309;
    --wds-accent-light: #D97706;
    --wds-accent-ink: #7C2D12;
    --wds-accent-soft: #FFF7ED;
    --wds-ink: #14181F;
    --wds-charcoal: #1F2937;
    --wds-muted: #6B7280;
    --wds-bg: #FFFFFF;
    --wds-border: #E5E7EB;
    --wds-gold: #F59E0B;
    --wds-gold-light: #FBBF24;
    --wds-radius: 10px;
    --wds-shadow: 0 1px 2px rgba(20,24,31,.04), 0 1px 3px rgba(20,24,31,.06);

    --wds-shell: #FFFFFF;
    --wds-panel: #FFFFFF;
    --wds-panel-alt: #FAFAFA;
    --wds-panel-deep: #F3F4F6;
    --wds-raised: #F3F4F6;
    --wds-raised-alt: #E5E7EB;
    --wds-hover: #F9FAFB;
    --wds-hover-alt: #F3F4F6;
    --wds-hover-overlay: rgba(20,24,31,.05);
    --wds-sunken: #F3F4F6;
    --wds-selected: #FFF7ED;
    --wds-line: #E5E7EB;
    --wds-line-strong: #D1D5DB;
    --wds-line-hover: #9CA3AF;
    --wds-line-control: #D1D5DB;
    --wds-fg: #14181F;
    --wds-fg-strong: #0B0E13;
    --wds-fg-1: #1F2937;
    --wds-fg-2: #374151;
    --wds-fg-3: #4B5563;
    --wds-fg-4: #6B7280;
    --wds-fg-5: #6B7280;
    --wds-fg-6: #9CA3AF;
    --wds-ok: #15803D;
    --wds-ok-text: #15803D;
    --wds-ok-line: #BBF7D0;
    --wds-ok-bg: #F0FDF4;
    --wds-alert: #B91C1C;
    --wds-alert-line: #FECACA;
    --wds-hot: #B45309;
    --wds-warn-text: #92400E;
    --wds-warn-line: #FCD34D;
    --wds-info-bg: #FFF7ED; --wds-info-line: #FED7AA; --wds-info-fg: #7C2D12;
    --wds-danger-bg: #FEF2F2; --wds-danger-fg: #991B1B;
    --wds-theme-accent: #B45309;
    --wds-theme-accent-light: #D97706;
    --wds-theme-accent-text: #9A4A0A;
    --wds-num-bg: rgba(180,83,9,.12);
    --wds-card-shadow: 0 1px 3px rgba(20,24,31,.08);
    --wds-nav-bg: #FFFFFF;
    --wds-nav-line: #E5E7EB;
    --wds-nav-fg: #4B5563;
    --wds-nav-fg-strong: #14181F;

    --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: #14181F;
    --bs-body-bg: #FFFFFF;
    --bs-link-color: #9A4A0A;
    --bs-link-hover-color: #6B3306;
    --bs-primary: #B45309;
    --bs-primary-rgb: 180, 83, 9;
    --bs-font-monospace: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body { font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #14181F; background: #FFFFFF; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.4px; }
h2 { font-size: 20px; font-weight: 600; }
a { color: #9A4A0A; } a:hover { color: #6B3306; }

.btn-primary { --bs-btn-bg: #B45309; --bs-btn-border-color: #B45309; --bs-btn-hover-bg: #92400E; --bs-btn-hover-border-color: #92400E;
    --bs-btn-active-bg: #7C2D12; --bs-btn-active-border-color: #7C2D12; --bs-btn-disabled-bg: #D1D5DB; --bs-btn-disabled-border-color: #D1D5DB; font-weight: 600; }
.btn-success { --bs-btn-bg: #15803D; --bs-btn-border-color: #15803D; --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; font-weight: 600; }
.btn-dark { --bs-btn-bg: #14181F; --bs-btn-border-color: #14181F; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; font-weight: 600; }
.btn-outline-secondary { --bs-btn-color: #14181F; --bs-btn-border-color: #D1D5DB; --bs-btn-hover-bg: #F3F4F6; --bs-btn-hover-color: #14181F; --bs-btn-hover-border-color: #9CA3AF; font-weight: 600; }
.form-control:focus, .form-select:focus { border-color: #D97706; box-shadow: 0 0 0 .2rem rgba(180,83,9,.15); }
.form-check-input:checked { background-color: #B45309; border-color: #B45309; }
.badge.text-bg-info { background: #FFF7ED !important; color: #7C2D12 !important; }
.badge.text-bg-warning { background: #FEF3C7 !important; color: #92400E !important; }
.badge.text-bg-success { background: #DCFCE7 !important; color: #15803D !important; }
.table { --bs-table-hover-bg: #FAFAFA; }
.wds-stat-value { font-family: 'IBM Plex Mono', monospace; }

/* --- the shell --- */
.df-page { min-height: 100vh; display: flex; flex-direction: column; }
.df-header { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid #E5E7EB; background: #FFFFFF; position: sticky; top: 0; z-index: 20; }
.df-header-left { display: flex; align-items: center; gap: 28px; min-width: 0; }
.df-header-right { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.df-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #14181F; }
.df-brand-mark { width: 30px; height: 30px; border-radius: 8px; background: #14181F; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.df-brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.3px; }
.df-nav { display: flex; gap: 20px; overflow-x: auto; }
.df-nav-link { text-decoration: none; color: #4B5563; padding: 4px 0 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.df-nav-link:hover { color: #14181F; }
.df-nav-link.active { color: #14181F; font-weight: 600; border-bottom-color: #B45309; }
.df-main { max-width: 1216px; width: 100%; margin: 0 auto; padding: 24px 32px 48px; box-sizing: border-box; flex: 1; }
.df-linkbar { background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 8px; padding: 10px 16px; font-size: 13px; color: #7C2D12; }
.df-send-panel { border-color: #FDBA74 !important; background: #FFFBF5 !important; }
.df-receipt { border-color: #BBF7D0 !important; background: #F0FDF4 !important; }

.df-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F9FAFB; padding: 16px; }
.df-login-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 32px; width: 100%; max-width: 440px; }

@media (max-width: 720px) {
    .df-header { padding: 10px 16px; height: auto; flex-wrap: wrap; gap: 8px; }
    .df-main { padding: 16px; }
}