/* ============================================================
   P2P Tracker — design tokens and base styles.
   Tailwind CDN handles utilities; this file owns the palette,
   typography defaults, and a handful of refined overrides.
   ============================================================ */

:root {
    --bg-page: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-subtle: #F1F5F9;
    --border-default: #E2E8F0;
    --border-strong: #CBD5E1;

    --text-primary: #0F172A;   /* slate-900 — main text, ratio 16.5:1 on white */
    --text-secondary: #334155; /* slate-700 — body, ratio 10.4:1 on white */
    --text-tertiary: #64748B;  /* slate-500 — labels/meta, ratio 4.78:1 on white (AA) */
    --text-muted: #94A3B8;     /* slate-400 — decoration only, never primary information */

    --profit: #059669;
    --profit-bg: #D1FAE5;
    --loss: #DC2626;
    --loss-bg: #FEE2E2;
    --info: #2563EB;

    /* Button palette — kept separate from --text-* so dark mode can flip
       button backgrounds independently from body text colour. */
    --btn-primary-bg: #0F172A;
    --btn-primary-bg-hover: #1E293B;
    --btn-primary-fg: #FFFFFF;
    --btn-secondary-bg: #FFFFFF;
    --btn-secondary-bg-hover: #F1F5F9;
    --btn-secondary-fg: #0F172A;
    --btn-secondary-border: #E2E8F0;
    --btn-danger-bg: #FFFFFF;
    --btn-danger-bg-hover: #FEF2F2;
    --btn-danger-fg: #B91C1C;
    --btn-danger-border: #FECACA;

    /* Sidebar palette — light mode keeps it white-on-white with a hairline border. */
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E2E8F0;
    --sidebar-link: #475569;
    --sidebar-link-hover-bg: #F8FAFC;
    --sidebar-link-hover-fg: #0F172A;
    --sidebar-link-active-bg: #F1F5F9;
    --sidebar-link-active-fg: #0F172A;
    --sidebar-link-active-accent: #0F172A;
}

html.dark {
    --bg-page: #020617;
    --bg-card: #0F172A;
    --bg-subtle: #1E293B;
    --border-default: #1E293B;
    --border-strong: #334155;

    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1; /* slate-300 — bumped for dark contrast */
    --text-tertiary: #94A3B8;  /* slate-400 — readable on dark */
    --text-muted: #64748B;     /* slate-500 — decoration */

    /* Dark-mode button palette — invert primary so it stays distinct from card bg. */
    --btn-primary-bg: #F1F5F9;
    --btn-primary-bg-hover: #E2E8F0;
    --btn-primary-fg: #0F172A;
    --btn-secondary-bg: #1E293B;
    --btn-secondary-bg-hover: #334155;
    --btn-secondary-fg: #F1F5F9;
    --btn-secondary-border: #334155;
    --btn-danger-bg: #1E293B;
    --btn-danger-bg-hover: #3F1414;
    --btn-danger-fg: #FCA5A5;
    --btn-danger-border: #7F1D1D;

    --sidebar-bg: #0F172A;
    --sidebar-border: #1E293B;
    --sidebar-link: #94A3B8;
    --sidebar-link-hover-bg: #1E293B;
    --sidebar-link-hover-fg: #F1F5F9;
    --sidebar-link-active-bg: #1E293B;
    --sidebar-link-active-fg: #F1F5F9;
    --sidebar-link-active-accent: #F1F5F9;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* tabular numbers — applied via class so any cell with money/coin gets aligned digits */
.tabular-nums, .tabular-nums input { font-variant-numeric: tabular-nums; }

/* page title scale per design system */
.page-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.section-title { font-size: 16px; font-weight: 500; color: var(--text-primary); }
.card-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.kpi-label { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); }
.kpi-value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* card primitive */
.app-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
}

/* sticky topbar uses backdrop blur */
.app-topbar {
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border-default);
}

/* sidebar */
.app-sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sidebar-link);
    transition: background-color 150ms, color 150ms;
}
.sidebar-link:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover-fg);
}
.sidebar-link.is-active {
    background-color: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-fg);
}
.sidebar-link-icon {
    color: currentColor;
    opacity: 0.85;
}
.sidebar-link.is-active .sidebar-link-icon { opacity: 1; }
.sidebar-link-label { flex: 1; }
.sidebar-link-accent {
    position: absolute;
    left: -3px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--sidebar-link-active-accent);
}

/* tables */
.app-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.app-table thead th {
    background: var(--bg-subtle);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-default);
}
.app-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: 14px;
}
.app-table tbody tr:first-child td { border-top: none; }
.app-table tbody tr:hover { background: color-mix(in srgb, var(--bg-subtle) 50%, transparent); }
.app-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* form inputs — slate focus ring, no blue glow.
   Note: -webkit-text-fill-color overrides Tailwind/preflight aggressively so
   typed text and placeholder always render in the intended color. */
.app-input, .app-select, .app-textarea,
input.app-input, input[type="text"].app-input, input[type="email"].app-input,
input[type="password"].app-input, input[type="number"].app-input,
input[type="date"].app-input, input[type="datetime-local"].app-input {
    width: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    transition: border-color 150ms, box-shadow 150ms;
    appearance: none;
    -webkit-appearance: none;
}
.app-input::placeholder, .app-textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
}
.app-input:focus, .app-select:focus, .app-textarea:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
/* Chrome/Edge autofill — keep our color/background instead of the yellow tint. */
.app-input:-webkit-autofill,
.app-input:-webkit-autofill:hover,
.app-input:-webkit-autofill:focus,
.app-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
    caret-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
}
.app-input.error, .app-select.error { border-color: #FCA5A5; }
.app-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.app-help { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.app-error { font-size: 12px; color: var(--loss); margin-top: 4px; }

/* buttons — explicit fg/bg on every state so hover/focus/active never collapse to white-on-white */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    border: 1px solid transparent;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.15); }

.btn-primary, .btn-primary:link, .btn-primary:visited {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg) !important;
    border-color: var(--btn-primary-bg);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--btn-primary-bg-hover);
    color: var(--btn-primary-fg) !important;
    border-color: var(--btn-primary-bg-hover);
}

.btn-secondary, .btn-secondary:link, .btn-secondary:visited {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg) !important;
    border-color: var(--btn-secondary-border);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background-color: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-fg) !important;
    border-color: var(--btn-secondary-border);
}

.btn-danger, .btn-danger:link, .btn-danger:visited {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-fg) !important;
    border-color: var(--btn-danger-border);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: var(--btn-danger-bg-hover);
    color: var(--btn-danger-fg) !important;
    border-color: var(--btn-danger-border);
}

.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* badge */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.badge-buy   { background: #F0F9FF; color: #0369A1; }
.badge-sell  { background: #FFFBEB; color: #B45309; }
.badge-maker { background: #F5F3FF; color: #6D28D9; }
.badge-taker { background: #F1F5F9; color: #475569; }
.badge-profit { background: var(--profit-bg); color: #047857; }
.badge-loss   { background: var(--loss-bg); color: #B91C1C; }
.badge-admin  { background: #EFF6FF; color: #1D4ED8; }

/* semantic text colors */
.text-profit { color: var(--profit); }
.text-loss   { color: var(--loss); }

/* skeleton */
.skeleton { background: var(--bg-subtle); border-radius: 6px; animation: skeleton 1.5s ease-in-out infinite; }
@keyframes skeleton {
    0%,100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* dropdown panel */
.app-dropdown { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06); }

/* flash toasts */
.toast-stack { position: fixed; top: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 8px; padding: 12px 14px; font-size: 14px; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06); transform: translateY(-8px); opacity: 0; transition: transform 200ms, opacity 200ms; display: flex; align-items: start; gap: 10px; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-left: 3px solid var(--profit); }
.toast-error   { border-left: 3px solid var(--loss); }
.toast-info    { border-left: 3px solid var(--info); }

/* tabs */
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); margin-bottom: 24px; flex-wrap: wrap; }
.tab-link { padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 150ms, border-color 150ms; }
.tab-link:hover { color: var(--text-primary); }
.tab-link.active { color: var(--text-primary); border-bottom-color: var(--text-primary); }

/* auth pages — subtle entrance */
.auth-stagger > * { opacity: 0; transform: translateY(6px); animation: authIn 520ms cubic-bezier(.2,.8,.2,1) forwards; }
.auth-stagger > *:nth-child(1) { animation-delay: 40ms; }
.auth-stagger > *:nth-child(2) { animation-delay: 110ms; }
.auth-stagger > *:nth-child(3) { animation-delay: 180ms; }
.auth-stagger > *:nth-child(4) { animation-delay: 250ms; }
.auth-stagger > *:nth-child(5) { animation-delay: 320ms; }
.auth-stagger > *:nth-child(6) { animation-delay: 390ms; }
.auth-stagger > *:nth-child(7) { animation-delay: 460ms; }
@keyframes authIn { to { opacity: 1; transform: none; } }

.auth-grid-bg {
    background-image: radial-gradient(circle at 1px 1px, #E2E8F0 1px, transparent 1px);
    background-size: 22px 22px;
}
.auth-fade-mask {
    -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 50%, transparent 90%);
            mask-image: radial-gradient(ellipse at 60% 50%, #000 50%, transparent 90%);
}
.auth-bigtitle {
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--text-primary);
}
.auth-eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* slightly taller inputs on auth pages — single field at a time deserves more presence */
.auth-form .app-input { padding: 11px 14px; font-size: 14px; }
.auth-form .app-label { font-size: 12px; letter-spacing: 0.04em; color: var(--text-secondary); }

/* ------------------------------------------------------------
   Dark-mode visibility overrides for hard-coded slate text/border
   utilities used throughout the views. Without these, slate-900
   text on slate-900 card backgrounds collapses into the surface.
   The fixed `bg-white` mobile sidebar trigger has its own variant
   below so its dark-text-on-white stays readable.
   ------------------------------------------------------------ */
html.dark .text-slate-900,
html.dark .hover\:text-slate-900:hover { color: var(--text-primary); }
html.dark .text-slate-800 { color: var(--text-primary); }
html.dark .text-slate-700,
html.dark .hover\:text-slate-700:hover { color: var(--text-secondary); }
html.dark .text-slate-600 { color: var(--text-secondary); }
html.dark .text-slate-500 { color: var(--text-tertiary); }
html.dark .text-slate-400 { color: var(--text-muted); }
html.dark .text-slate-300 { color: var(--text-muted); }
html.dark .border-slate-200,
html.dark .border-slate-100 { border-color: var(--border-default); }
html.dark .bg-slate-50,
html.dark .hover\:bg-slate-50:hover { background-color: var(--bg-subtle); }

/* The mobile sidebar trigger pins a fixed white pill at the corner;
   keep its surface and label readable in dark mode. */
html.dark .app-mobile-trigger {
    background-color: var(--bg-card);
    border-color: var(--border-default);
    color: var(--text-primary);
}
html.dark .app-mobile-trigger:hover { background-color: var(--bg-subtle); }

/* print */
@media print {
    .no-print { display: none !important; }
    .app-card { border-color: #ddd !important; box-shadow: none !important; }
    body { background: #fff !important; color: #000 !important; }
}