/* ============================================================
   ispravi.me — Skins (selectable appearance themes)
   ------------------------------------------------------------
   Loaded AFTER ispravime-v3.css. Each skin redefines the design
   tokens consumed across the UI, so switching `data-skin` on
   <html> reskins the whole interface. Dark skins also carry the
   legacy `body.theme-dark` class (toggled in JS) for the handful
   of structural rules that key off it.

   Design language refined from the (retired) React prototype:
   calm cool-neutral product surfaces, one confident accent per
   skin, soft low-spread shadows, and a tokenized error palette
   (spelling / grammar / info) with wavy underlines.
   ============================================================ */

/* ---- Refined default (light) — also the "Svijetlo" skin ---- */
:root,
html[data-skin="svjetlo"] {
    color-scheme: light;
    /* Neutral cool greys with a near-black accent: hue is reserved for meaning
       (the three error categories and status), never for chrome. */
    --primary-color: #1b1f27;
    --primary-hover: #343a46;
    --primary-light: #e9ecf1;
    --primary-ink: #ffffff;
    --bg-white: #ffffff;
    --bg-gray: #f6f8fb;
    --bg-hover: #eef1f5;
    --bg-secondary: #f2f4f7;
    --text-primary: #181c24;
    --text-secondary: #4e5664;
    --text-muted: #5f6673;
    --border-color: #e4e8ee;
    --border-hover: #cdd5df;
    --error-color: #c62828;
    --error-bg: #fce9e9;
    --success-color: #13784a;
    --success-bg: #e0f6ec;
    --warning-color: #8f5c06;
    --warning-bg: #fbf2dd;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.09), 0 2px 4px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
    --err-spelling: #d93636;
    --err-spelling-soft: rgba(217, 54, 54, 0.12);
    --err-spelling-text: #b42222;
    --err-grammar: #c27d18;
    --err-grammar-soft: rgba(194, 125, 24, 0.13);
    --err-grammar-text: #8a5600;
    --err-info: #2f7ae8;
    --err-info-soft: rgba(47, 122, 232, 0.12);
    --err-info-text: #1d5fc6;
    --err-current: #ffd27a;
    --err-current-ink: #4a3300;
}

/* ---- Tamno (refined dark slate) ---- */
html[data-skin="tamno"] {
    color-scheme: dark;
    /* Dark slate with a near-white accent (the mirror of Svijetlo). */
    --primary-color: #e6e9ef;
    --primary-hover: #ffffff;
    --primary-light: #2a3340;
    --primary-ink: #0f131a;
    --bg-white: #161b22;
    --bg-gray: #0f131a;
    --bg-hover: #232b36;
    --bg-secondary: #1b212a;
    --text-primary: #e6e9ef;
    --text-secondary: #a6afbd;
    --text-muted: #8f99a8;
    --border-color: #2a3340;
    --border-hover: #3a4658;
    --error-color: #f06a6a;
    --error-bg: #341f1f;
    --success-color: #3ec087;
    --success-bg: #143626;
    --warning-color: #e2a84e;
    --warning-bg: #322712;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 34px rgba(0, 0, 0, 0.58);
    --err-spelling: #f06a6a;
    --err-spelling-soft: rgba(240, 106, 106, 0.2);
    --err-spelling-text: #f58b8b;
    --err-grammar: #e2a84e;
    --err-grammar-soft: rgba(226, 168, 78, 0.2);
    --err-grammar-text: #e7b462;
    --err-info: #7aa5ff;
    --err-info-soft: rgba(122, 165, 255, 0.2);
    --err-info-text: #8db3ff;
    --err-current: #5a4a22;
    --err-current-ink: #ffe6a8;
}

/* ---- Visoki kontrast (accessibility, light, strong borders) ---- */
html[data-skin="kontrast"] {
    color-scheme: light;
    --primary-color: #0b50d0;
    --primary-hover: #073aa0;
    --primary-light: #dde8ff;
    --primary-ink: #ffffff;
    --bg-white: #ffffff;
    --bg-gray: #ffffff;
    --bg-hover: #eef1f6;
    --bg-secondary: #f0f0f0;
    --text-primary: #000000;
    --text-secondary: #1c1c1c;
    --text-muted: #383838;
    --border-color: #1c1c1c;
    --border-hover: #000000;
    --error-color: #c40000;
    --error-bg: #ffe5e5;
    --success-color: #0a6b34;
    --success-bg: #e0f4e6;
    --warning-color: #8a5a00;
    --warning-bg: #fff0d4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 8px 18px rgba(0, 0, 0, 0.32);
    --err-spelling: #c40000;
    --err-spelling-soft: rgba(196, 0, 0, 0.12);
    --err-spelling-text: #c40000;
    --err-grammar: #8a5a00;
    --err-grammar-soft: rgba(138, 90, 0, 0.13);
    --err-grammar-text: #8a5a00;
    --err-info: #0b50d0;
    --err-info-soft: rgba(11, 80, 208, 0.12);
    --err-info-text: #0b50d0;
    --err-current: #ffdf66;
    --err-current-ink: #332600;
}

/* ---- Izvorno (classic ispravi.me — dark navbar, teal accent, flat white sheet) ---- */
html[data-skin="izvorno"] {
    color-scheme: light;
    /* Teal one shade darker than the classic #198db3, so white button text
       reaches 4.5:1 (5.5:1); #198db3 stays as the info underline. */
    --primary-color: #157291;
    --primary-hover: #0f5c76;
    --primary-light: #dcf1f6;
    --primary-ink: #ffffff;
    --bg-white: #ffffff;
    --bg-gray: #f2f2f2;
    --bg-hover: #e8e8e8;
    --bg-secondary: #f5f5f5;
    --text-primary: #2f3b45;
    --text-secondary: #57646d;
    --text-muted: #5a666f;
    --border-color: #dcdcdc;
    --border-hover: #c2c2c2;
    --error-color: #c9372d;
    --error-bg: #fbe4e2;
    --success-color: #3d7d3f;
    --success-bg: #e9f5ea;
    --warning-color: #8f5c06;
    --warning-bg: #faf0dc;
    --shadow-sm: 0 1px 2px rgba(15, 23, 30, 0.08);
    --shadow-md: 0 2px 6px rgba(15, 23, 30, 0.1), 0 1px 2px rgba(15, 23, 30, 0.06);
    --shadow-lg: 0 8px 20px rgba(15, 23, 30, 0.14);
    --err-spelling: #ec4545;
    --err-spelling-soft: rgba(236, 69, 69, 0.15);
    --err-spelling-text: #b8302a;
    --err-grammar: #c0801a;
    --err-grammar-soft: rgba(192, 128, 26, 0.16);
    --err-grammar-text: #8a5600;
    --err-info: #198db3;
    --err-info-soft: rgba(25, 141, 179, 0.12);
    --err-info-text: #11698a;
    --err-current: #ffd27a;
    --err-current-ink: #4a3300;
}

/* Error decorations (span + overlay) live in ispravime-v3.css §9 and read
   the --err-* tokens defined per skin above. */

/* ============================================================
   Tasteful global refinements (additive, from the prototype)
   ============================================================ */

.editor {
    border-radius: 14px;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.editor:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

/* ============================================================
   Skin gallery (sidebar selector)
   ============================================================ */

.skin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 4 skins → 2 × 2 */
    gap: 10px;
}

.skin-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-white);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.skin-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}
.skin-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.skin-card.active,
.skin-card[aria-checked="true"] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.skin-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.skin-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.skin-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Per-skin preview swatches (d1 surface · d2 accent · d3 error) */
.skin-preview[data-skin="svjetlo"] { background: #f6f8fb; }
.skin-preview[data-skin="svjetlo"] .d1 { background: #ffffff; }
.skin-preview[data-skin="svjetlo"] .d2 { background: #1b1f27; }
.skin-preview[data-skin="svjetlo"] .d3 { background: #d93636; }

.skin-preview[data-skin="tamno"] { background: #0f131a; }
.skin-preview[data-skin="tamno"] .d1 { background: #161b22; }
.skin-preview[data-skin="tamno"] .d2 { background: #e6e9ef; }
.skin-preview[data-skin="tamno"] .d3 { background: #f06a6a; }

.skin-preview[data-skin="kontrast"] { background: #ffffff; }
.skin-preview[data-skin="kontrast"] .d1 { background: #ffffff; box-shadow: 0 0 0 1px #1c1c1c; }
.skin-preview[data-skin="kontrast"] .d2 { background: #0b50d0; }
.skin-preview[data-skin="kontrast"] .d3 { background: #c40000; }

.skin-preview[data-skin="izvorno"] { background: #f2f2f2; }
.skin-preview[data-skin="izvorno"] .d1 { background: #2f3b45; }
.skin-preview[data-skin="izvorno"] .d2 { background: #198db3; }
.skin-preview[data-skin="izvorno"] .d3 { background: #e7544a; }

@media (prefers-reduced-motion: reduce) {
    .skin-card,
    .editor {
        transition: none;
    }
    .skin-card:hover {
        transform: none;
    }
}

/* ============================================================
   Layout restructure
   Settings gear → header · history → toolbar · right-side drawers
   ============================================================ */

/* Stacking: header above toolbar above drawers above backdrop */
.app-header { z-index: 1070; }
.toolbar { z-index: 1060; }

/* Settings gear relocated into the header (between theme toggle and user) */
.app-header .sidebar-toggle {
    position: static;
    top: auto;
    left: auto;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 10px;
    color: var(--text-secondary);
    z-index: auto;
}
.app-header .sidebar-toggle:hover {
    background: var(--bg-hover);
    box-shadow: none;
    color: var(--text-primary);
}
.app-header .sidebar-toggle::after { display: none; }
body.sidebar-open .app-header .sidebar-toggle {
    left: auto;
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: transparent;
    box-shadow: none;
}

/* Vertical divider before the history toggle */
.toolbar-right .toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    margin: 0 4px;
}

/* Right-side drawers (settings + history). Their offset below the toolbar
   lives in ispravime-v3.css §7 (one rule for all three drawers). */
.sidebar,
.history-panel {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-color);
    transform: translateX(100%);
    z-index: 1040;
    border-top-left-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar.open,
.history-panel.open { transform: translateX(0); }

.sidebar-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.history-panel-inner {
    flex: 1;
    min-height: 0;
    height: auto;
    overflow: hidden;
    padding: 16px;
}
.history-panel .history-arrow { display: none; }

/* Backdrop appears for either drawer */
.sidebar-overlay {
    z-index: 1030;
    background: rgba(10, 15, 25, 0.34);
}
body.sidebar-open .sidebar-overlay,
body.history-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}

/* Drawer header (title + close) */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.drawer-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .app-header .header-separator { display: none; }
    .sidebar,
    .history-panel,
    .user-dropdown {
        width: min(340px, 92vw);
    }
}

/* ============================================================
   Izvorno — structural chrome
   Dark slate navbar + flat solid toolbar + square-cornered sheet,
   echoing the original ispravi.me (Hašek) look.
   ============================================================ */

html[data-skin="izvorno"] .app-header {
    background: #2f3b45;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #232b33;
}

/* Dark-header themes: the negativ wordmark (light ink) instead
   of the pozitiv one. Also used by the /info/ site header. */
html[data-skin="tamno"] .logo-image-light,
html[data-skin="izvorno"] .logo-image-light {
    display: none;
}

html[data-skin="tamno"] .logo-image-dark,
html[data-skin="izvorno"] .logo-image-dark {
    display: block;
}

html[data-skin="izvorno"] .site-name { color: #ffffff; }
html[data-skin="izvorno"] .site-tagline { color: #a1b2c1; border-left-color: rgba(255, 255, 255, 0.16); }
html[data-skin="izvorno"] .header-links a { color: #a1b2c1; }
html[data-skin="izvorno"] .header-links a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
html[data-skin="izvorno"] .app-header .header-separator { background: rgba(255, 255, 255, 0.16); }
html[data-skin="izvorno"] .theme-toggle-group { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
html[data-skin="izvorno"] .theme-toggle-btn { color: #a1b2c1; }
html[data-skin="izvorno"] .theme-toggle-btn:hover { color: #ffffff; }
html[data-skin="izvorno"] .theme-toggle-btn.active { background: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: none; }
html[data-skin="izvorno"] .app-header .focus-btn,
html[data-skin="izvorno"] .app-header .menu-toggle,
html[data-skin="izvorno"] .app-header .tour-btn,
html[data-skin="izvorno"] .app-header .sidebar-toggle,
html[data-skin="izvorno"] .app-header .user-info {
    color: #a1b2c1;
}
html[data-skin="izvorno"] .app-header .focus-btn:hover,
html[data-skin="izvorno"] .app-header .menu-toggle:hover,
html[data-skin="izvorno"] .app-header .menu-toggle[aria-expanded="true"],
html[data-skin="izvorno"] .app-header .tour-btn:hover,
html[data-skin="izvorno"] .app-header .sidebar-toggle:hover,
html[data-skin="izvorno"] .app-header .user-info:hover,
html[data-skin="izvorno"] .app-header .user-info.is-open {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: transparent;
}
@media (min-width: 481px) { /* phones hide the tier label, and with it the pill */
    html[data-skin="izvorno"] .app-header .user-info:has(> .user-info-label:not(:empty)) {
        border-color: rgba(255, 255, 255, 0.22);
    }
}
html[data-skin="izvorno"] .app-header .focus-btn.active,
html[data-skin="izvorno"] body.sidebar-open .app-header .sidebar-toggle {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Flatten the toolbar into a solid bar, like the classic button row */
html[data-skin="izvorno"] .toolbar {
    background: var(--bg-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
}
html[data-skin="izvorno"] .toolbar-btn {
    border-radius: 4px;
}
html[data-skin="izvorno"] .toolbar-btn-primary {
    box-shadow: none;
}

/* Flat, square-cornered editor sheet with a teal focus ring */
html[data-skin="izvorno"] .editor {
    border-radius: 2px !important;
    box-shadow: none !important;
}
html[data-skin="izvorno"] .editor:focus,
html[data-skin="izvorno"] .editor:focus-visible {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
}