/* ============================================================
   Notlarım — Core stylesheet
   Design tokens, themes, typography, layout.
   ============================================================ */

/* ---------- Reset ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar-h) + 48px); }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
ul[class], ol[class] { list-style: none; padding: 0; margin: 0; }
img, picture, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- Design tokens ----------------------------------- */
:root {
    /* Scale (4px base) */
    --sp-0: 0;
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --sp-8: 2.5rem;
    --sp-9: 3rem;
    --sp-10: 4rem;

    /* Type */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Source Serif Pro', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    --font-ui: var(--font-sans);

    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-md: .9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;

    --lh-tight: 1.25;
    --lh-snug: 1.4;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    /* Radii */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-full: 9999px;

    /* Motion */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --dur-fast: 120ms;
    --dur: 200ms;
    --dur-slow: 320ms;

    /* Layout */
    --sidebar-w: 264px;
    --topbar-h: 52px;
    --editor-max: 1500px;

    /* Z-index scale */
    --z-sidebar: 10;
    --z-dropdown: 50;
    --z-modal: 100;
    --z-toast: 200;
}

/* ---------- Font families per user choice -------------------- */
html[data-font="inter"]       { --font-ui: 'Inter', system-ui, sans-serif; }
html[data-font="jakarta"]     { --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif; }
html[data-font="geist"]       { --font-ui: 'Geist', system-ui, sans-serif; }
html[data-font="system"]      { --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
html[data-font="serif"]       { --font-ui: 'Source Serif Pro', Georgia, serif; }

/* ============================================================
   Themes — colour palettes only.
   Structural colours reference these semantic tokens.
   ============================================================ */

/* Light (default) */
:root,
html[data-theme="light"] {
    --bg: #fbfbfa;
    --bg-elev: #ffffff;
    --bg-subtle: #f4f4f2;
    --bg-hover: #eeeeec;
    --bg-active: #e6e6e4;

    --text: #2f2f2e;
    --text-muted: #6b6b68;
    --text-subtle: #9a9a96;
    --text-inverse: #ffffff;

    --border: #e8e8e4;
    --border-strong: #d4d4cf;

    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-soft: #eef2ff;
    --accent-text: #4338ca;

    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --success: #059669;
    --success-soft: #d1fae5;
    --warn: #d97706;
    --warn-soft: #fef3c7;

    --shadow-sm: 0 1px 2px rgba(15, 15, 15, .04), 0 1px 3px rgba(15, 15, 15, .06);
    --shadow-md: 0 4px 8px rgba(15, 15, 15, .06), 0 2px 4px rgba(15, 15, 15, .04);
    --shadow-lg: 0 12px 24px rgba(15, 15, 15, .08), 0 4px 8px rgba(15, 15, 15, .04);
    --shadow-xl: 0 24px 48px rgba(15, 15, 15, .12), 0 8px 16px rgba(15, 15, 15, .06);

    --overlay: rgba(15, 15, 15, .32);
    color-scheme: light;
}

/* Dark */
html[data-theme="dark"] {
    --bg: #191919;
    --bg-elev: #202020;
    --bg-subtle: #252525;
    --bg-hover: #2c2c2c;
    --bg-active: #343434;

    --text: #e7e7e5;
    --text-muted: #a0a09c;
    --text-subtle: #6b6b68;
    --text-inverse: #191919;

    --border: #2f2f2f;
    --border-strong: #3d3d3d;

    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-soft: #1e1b4b;
    --accent-text: #c7d2fe;

    --danger: #f87171;
    --danger-soft: #450a0a;
    --success: #34d399;
    --success-soft: #064e3b;
    --warn: #fbbf24;
    --warn-soft: #451a03;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .4);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .5);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, .6);

    --overlay: rgba(0, 0, 0, .6);
    color-scheme: dark;
}

/* Solarized Light */
html[data-theme="solarized-light"] {
    --bg: #fdf6e3;
    --bg-elev: #fffbea;
    --bg-subtle: #f5eed0;
    --bg-hover: #eee8d5;
    --bg-active: #e5dec5;

    --text: #586e75;
    --text-muted: #93a1a1;
    --text-subtle: #b4bfbf;
    --text-inverse: #fdf6e3;

    --border: #eee8d5;
    --border-strong: #d6cfb3;

    --accent: #268bd2;
    --accent-hover: #1e6fa6;
    --accent-soft: #e5f1fb;
    --accent-text: #1e6fa6;

    --danger: #dc322f;
    --danger-soft: #fbe5e4;
    --success: #859900;
    --success-soft: #eef3cf;
    --warn: #b58900;
    --warn-soft: #fbf1d2;

    --shadow-sm: 0 1px 2px rgba(88, 110, 117, .08);
    --shadow-md: 0 4px 12px rgba(88, 110, 117, .12);
    --shadow-lg: 0 16px 32px rgba(88, 110, 117, .16);
    --shadow-xl: 0 24px 48px rgba(88, 110, 117, .22);

    --overlay: rgba(88, 110, 117, .35);
    color-scheme: light;
}

/* Solarized Dark */
html[data-theme="solarized-dark"] {
    --bg: #002b36;
    --bg-elev: #073642;
    --bg-subtle: #0a4352;
    --bg-hover: #0d4d5e;
    --bg-active: #10576b;

    --text: #eee8d5;
    --text-muted: #93a1a1;
    --text-subtle: #657b83;
    --text-inverse: #002b36;

    --border: #0a4352;
    --border-strong: #14627a;

    --accent: #2aa198;
    --accent-hover: #4dc6bc;
    --accent-soft: #073642;
    --accent-text: #4dc6bc;

    --danger: #dc322f;
    --danger-soft: #3a0f0e;
    --success: #859900;
    --success-soft: #2a2f00;
    --warn: #b58900;
    --warn-soft: #3a2d00;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .6);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, .7);

    --overlay: rgba(0, 0, 0, .6);
    color-scheme: dark;
}

/* Midnight — Pure black / blue accent */
html[data-theme="midnight"] {
    --bg: #0a0a0f;
    --bg-elev: #12121a;
    --bg-subtle: #181823;
    --bg-hover: #1f1f2c;
    --bg-active: #272736;

    --text: #e8e8f0;
    --text-muted: #9898a8;
    --text-subtle: #606075;
    --text-inverse: #0a0a0f;

    --border: #22222e;
    --border-strong: #333345;

    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-soft: #0f1e3a;
    --accent-text: #93c5fd;

    --danger: #f87171;
    --danger-soft: #450a0a;
    --success: #4ade80;
    --success-soft: #064e3b;
    --warn: #fbbf24;
    --warn-soft: #451a03;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .7);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, .8);

    --overlay: rgba(0, 0, 0, .7);
    color-scheme: dark;
}

/* Nord */
html[data-theme="nord"] {
    --bg: #2e3440;
    --bg-elev: #3b4252;
    --bg-subtle: #434c5e;
    --bg-hover: #4c566a;
    --bg-active: #5e6779;

    --text: #eceff4;
    --text-muted: #d8dee9;
    --text-subtle: #81889a;
    --text-inverse: #2e3440;

    --border: #434c5e;
    --border-strong: #4c566a;

    --accent: #88c0d0;
    --accent-hover: #a3d2dd;
    --accent-soft: #3b4252;
    --accent-text: #a3d2dd;

    --danger: #bf616a;
    --danger-soft: #4a2329;
    --success: #a3be8c;
    --success-soft: #39432c;
    --warn: #ebcb8b;
    --warn-soft: #4a3f1c;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .6);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, .7);

    --overlay: rgba(46, 52, 64, .7);
    color-scheme: dark;
}

/* Paper — Kağıt & Seri (warm off-white, serif, reading-first) */
html[data-theme="paper"] {
    --bg: #faf7f2;
    --bg-elev: #fffdf8;
    --bg-subtle: #f2eee6;
    --bg-hover: #ece7db;
    --bg-active: #e3ddce;

    --text: #2c2419;
    --text-muted: #6b6456;
    --text-subtle: #9a9486;
    --text-inverse: #faf7f2;

    --border: #e8e2d3;
    --border-strong: #d4ccba;

    --accent: #7a5c3a;
    --accent-hover: #5f4629;
    --accent-soft: #f0e8d8;
    --accent-text: #5f4629;

    --danger: #a83232;
    --danger-soft: #f6e4e0;
    --success: #5d7a2e;
    --success-soft: #eaf0d4;
    --warn: #b5792a;
    --warn-soft: #f6ead1;

    --shadow-sm: 0 1px 2px rgba(80, 62, 32, .06);
    --shadow-md: 0 4px 14px rgba(80, 62, 32, .08);
    --shadow-lg: 0 16px 36px rgba(80, 62, 32, .12);
    --shadow-xl: 0 24px 56px rgba(80, 62, 32, .18);

    --overlay: rgba(44, 36, 25, .35);
    color-scheme: light;
}
html[data-theme="paper"] {
    --font-ui: 'Source Serif Pro', 'Charter', 'Iowan Old Style', Georgia, serif;
}
html[data-theme="paper"] .editor-content,
html[data-theme="paper"] .note-title {
    font-family: 'Source Serif Pro', 'Charter', Georgia, serif;
    letter-spacing: .005em;
}
html[data-theme="paper"] .sidebar { background: #f5f1e6; }
html[data-theme="paper"] .topbar,
html[data-theme="paper"] .toolbar { background: var(--bg-elev); }

/* Mission — Mission Control (dark-first, neon-violet, dense tech) */
html[data-theme="mission"] {
    --bg: #0b0d12;
    --bg-elev: #12151d;
    --bg-subtle: #171b24;
    --bg-hover: #1f2430;
    --bg-active: #262d3c;

    --text: #e6e8ee;
    --text-muted: #8b92a5;
    --text-subtle: #5c6478;
    --text-inverse: #0b0d12;

    --border: #1e2433;
    --border-strong: #2c3447;

    --accent: #8b7fff;
    --accent-hover: #a99fff;
    --accent-soft: #1a1740;
    --accent-text: #b4aaff;

    --danger: #ff5577;
    --danger-soft: #3a0f1a;
    --success: #4ade80;
    --success-soft: #0c3a23;
    --warn: #fbbf24;
    --warn-soft: #3a2a07;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .6);
    --shadow-md: 0 4px 16px rgba(10, 8, 40, .55);
    --shadow-lg: 0 20px 44px rgba(10, 8, 40, .7), 0 0 0 1px rgba(139, 127, 255, .08);
    --shadow-xl: 0 32px 64px rgba(10, 8, 40, .8), 0 0 0 1px rgba(139, 127, 255, .12);

    --overlay: rgba(0, 0, 0, .72);
    color-scheme: dark;
}
html[data-theme="mission"] .tx-value,
html[data-theme="mission"] .finans-table td.num,
html[data-theme="mission"] code,
html[data-theme="mission"] kbd {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
html[data-theme="mission"] .btn:hover,
html[data-theme="mission"] .icon-btn:hover {
    box-shadow: 0 0 0 1px rgba(139, 127, 255, .35), 0 0 20px rgba(139, 127, 255, .15);
}
html[data-theme="mission"] .sidebar { background: #0d1018; }
html[data-theme="mission"] kbd {
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ---------- Base ------------------------------------------- */
html, body {
    height: 100%;
}

body {
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--text);
    background: var(--bg);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

::selection {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::-webkit-scrollbar          { width: 10px; height: 10px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ---------- App layout ------------------------------------- */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    transition: grid-template-columns var(--dur) var(--ease);
}

.app.sidebar-collapsed { grid-template-columns: 0 1fr; }

.app.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.sidebar-restore {
    position: fixed;
    top: var(--sp-3);
    left: var(--sp-3);
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-sidebar) + 10);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidebar-restore:hover { background: var(--bg-hover); color: var(--text); }
.app.sidebar-collapsed .sidebar-restore,
.app.focus-mode .sidebar-restore { display: inline-flex; }

/* On narrow viewports, the sidebar slides off automatically — show the
   restore button so the user can bring it back without resizing. */
@media (max-width: 840px) {
    .app:not(.sidebar-open) .sidebar-restore { display: inline-flex; }
}

.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--bg-subtle);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: var(--z-sidebar);
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    overflow: hidden;
}

.main-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    background: var(--bg);
    position: relative;
}

@keyframes view-spin {
    to { transform: rotate(360deg); }
}
@keyframes view-loading-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.view-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-10);
    color: var(--text-subtle);
    font-size: var(--fs-sm);
    /* Delay reveal so flashes on fast loads don't strobe */
    animation: view-loading-fade .25s ease-out .2s both;
}
.view-loading::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    animation: view-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .view-loading { animation: none; }
    .view-loading::before { animation-duration: 2s; }
}

/* ---------- Mobile ----------------------------------------- */
@media (max-width: 840px) {
    .app {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        width: min(86vw, 320px);
        box-shadow: var(--shadow-xl);
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }
    .app.sidebar-open .sidebar {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---------- Focus mode -------------------------------------- */
.app.focus-mode .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.app.focus-mode          { grid-template-columns: 0 1fr; }

/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}