/* assets/css/style.css */

/* Brändifontit (Kortteli-ääni): Anton = juliste/katu-display, Oswald = kondensoitu otsikko.
   Latautuu kävijän selaimessa; leipäteksti & taulukot pysyvät system-ui:ssa luettavuuden vuoksi. */

/* ══════════════════════════════════════════════════════════
   TEEMAMUUTTUJAT  (CSS custom properties)
   ══════════════════════════════════════════════════════════ */

/* ── 1. Vaalea (oletus) ──────────────────────────────────── */
:root {
  --font-display:   'Anton', 'Arial Narrow', system-ui, sans-serif;
  --font-head:      'Oswald', system-ui, sans-serif;
  --bg:             #f5f5f4;
  --surface:        #ffffff;
  --surface-alt:    #f1efe8;
  --surface-hover:  #f9f8f5;
  --border:         #e0dfd8;
  --border-strong:  #d3d1c7;
  --text:           #1c1c1a;
  --text-muted:     #5f5e5a;
  --text-subtle:    #888780;
  --accent:         #185fa5;
  --accent-hover:   #0c447c;
  --accent-muted:   #e6f1fb;
  --accent-muted-t: #0c447c;
  --btn-bg:         #e8e7e0;
  --btn-text:       #1c1c1a;
  --btn-hover:      #d3d1c7;
  --danger:         #e24b4a;
  --danger-hover:   #a32d2d;
  --danger-muted:   #fde8e8;
  --danger-muted-t: #a32d2d;
  --ok-bg:          #eaf3de;
  --ok-text:        #27500a;
  --ok-border:      #97c459;
  --err-bg:         #fcebeb;
  --err-text:       #791f1f;
  --err-border:     #f09595;
  --info-bg:        #e6f1fb;
  --info-text:      #0c447c;
  --info-border:    #85b7eb;
  --shadow:         0 6px 24px rgba(0,0,0,.12);
  --shadow-sm:      0 2px 8px  rgba(0,0,0,.08);
  --avatar-bg:      #185fa5;
  --focus-ring:     rgba(24, 95, 165, .18);
  --radius:         10px;
  --radius-sm:      6px;
}

/* ── 2. Tumma ────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:             #111110;
  --surface:        #1d1d1b;
  --surface-alt:    #252522;
  --surface-hover:  #2a2a27;
  --border:         #2e2e2b;
  --border-strong:  #3a3a36;
  --text:           #e8e7df;
  --text-muted:     #a09f98;
  --text-subtle:    #6e6d67;
  --accent:         #60a5fa;
  --accent-hover:   #93c5fd;
  --accent-muted:   #172036;
  --accent-muted-t: #93c5fd;
  --btn-bg:         #2e2e2b;
  --btn-text:       #e8e7df;
  --btn-hover:      #3a3a36;
  --danger:         #f87171;
  --danger-hover:   #fca5a5;
  --danger-muted:   #2d1818;
  --danger-muted-t: #fca5a5;
  --ok-bg:          #0d2a10;
  --ok-text:        #86efac;
  --ok-border:      #166534;
  --err-bg:         #2d1010;
  --err-text:       #fca5a5;
  --err-border:     #7f1d1d;
  --info-bg:        #0c1e3a;
  --info-text:      #93c5fd;
  --info-border:    #1e40af;
  --shadow:         0 6px 24px rgba(0,0,0,.45);
  --shadow-sm:      0 2px 8px  rgba(0,0,0,.3);
  --avatar-bg:      #3b82f6;
  --focus-ring:     rgba(96, 165, 250, .25);
}

/* ── 3. Nurmi (kenttävihreä) ─────────────────────────────── */
[data-theme="nurmi"] {
  --bg:             #091f12;
  --surface:        #102a1a;
  --surface-alt:    #163523;
  --surface-hover:  #1c4230;
  --border:         #1d4528;
  --border-strong:  #275c38;
  --text:           #d1edd9;
  --text-muted:     #79ad8a;
  --text-subtle:    #4a7a5a;
  --accent:         #34d399;
  --accent-hover:   #6ee7b7;
  --accent-muted:   #0c2f1a;
  --accent-muted-t: #6ee7b7;
  --btn-bg:         #1d4528;
  --btn-text:       #d1edd9;
  --btn-hover:      #275c38;
  --danger:         #f87171;
  --danger-hover:   #fca5a5;
  --danger-muted:   #2d0c0c;
  --danger-muted-t: #fca5a5;
  --ok-bg:          #0a2c14;
  --ok-text:        #86efac;
  --ok-border:      #166534;
  --err-bg:         #2d0c0c;
  --err-text:       #fca5a5;
  --err-border:     #7f1d1d;
  --info-bg:        #091c2d;
  --info-text:      #67e8f9;
  --info-border:    #0e7490;
  --shadow:         0 6px 24px rgba(0,0,0,.55);
  --shadow-sm:      0 2px 8px  rgba(0,0,0,.35);
  --avatar-bg:      #22c55e;
  --focus-ring:     rgba(52, 211, 153, .25);
}

/* ── 4. Yö (sinimusta) ───────────────────────────────────── */
[data-theme="yo"] {
  --bg:             #07080f;
  --surface:        #0d0f20;
  --surface-alt:    #141630;
  --surface-hover:  #1a1c3e;
  --border:         #1c1f4a;
  --border-strong:  #272b60;
  --text:           #dddff8;
  --text-muted:     #8284c4;
  --text-subtle:    #4e5098;
  --accent:         #818cf8;
  --accent-hover:   #a5b4fc;
  --accent-muted:   #15173a;
  --accent-muted-t: #a5b4fc;
  --btn-bg:         #1c1f4a;
  --btn-text:       #dddff8;
  --btn-hover:      #272b60;
  --danger:         #f87171;
  --danger-hover:   #fca5a5;
  --danger-muted:   #2a0c18;
  --danger-muted-t: #fca5a5;
  --ok-bg:          #091f12;
  --ok-text:        #86efac;
  --ok-border:      #166534;
  --err-bg:         #2a0c18;
  --err-text:       #fca5a5;
  --err-border:     #7f1d1d;
  --info-bg:        #0e0f2c;
  --info-text:      #a5b4fc;
  --info-border:    #3730a3;
  --shadow:         0 6px 24px rgba(0,0,0,.65);
  --shadow-sm:      0 2px 8px  rgba(0,0,0,.4);
  --avatar-bg:      #6366f1;
  --focus-ring:     rgba(129, 140, 248, .28);
}

/* ── 5. Aurinko (kultainen) ──────────────────────────────── */
[data-theme="aurinko"] {
  --bg:             #fffbf0;
  --surface:        #ffffff;
  --surface-alt:    #fef3d0;
  --surface-hover:  #fef8e7;
  --border:         #f5dfa0;
  --border-strong:  #e8c870;
  --text:           #1a1206;
  --text-muted:     #6b5528;
  --text-subtle:    #9c7c48;
  --accent:         #d97706;
  --accent-hover:   #b45309;
  --accent-muted:   #fef3d0;
  --accent-muted-t: #92400e;
  --btn-bg:         #fde68a;
  --btn-text:       #1a1206;
  --btn-hover:      #fcd34d;
  --danger:         #dc2626;
  --danger-hover:   #b91c1c;
  --danger-muted:   #fee2e2;
  --danger-muted-t: #991b1b;
  --ok-bg:          #f0fdf4;
  --ok-text:        #166534;
  --ok-border:      #86efac;
  --err-bg:         #fef2f2;
  --err-text:       #991b1b;
  --err-border:     #fca5a5;
  --info-bg:        #eff6ff;
  --info-text:      #1e40af;
  --info-border:    #93c5fd;
  --shadow:         0 6px 24px rgba(0,0,0,.10);
  --shadow-sm:      0 2px 8px  rgba(0,0,0,.06);
  --avatar-bg:      #d97706;
  --focus-ring:     rgba(217, 119, 6, .2);
}

/* ── 6. Neon (logon mukaan) ──────────────────────────────── */
[data-theme="neon"] {
  --bg:             #050719;
  --surface:        #0e1330;
  --surface-alt:    #151b40;
  --surface-hover:  #1c2350;
  --border:         #222a5c;
  --border-strong:  #313b7e;
  --text:           #e7eaff;
  --text-muted:     #9aa1dc;
  --text-subtle:    #5f66a2;
  --accent:         #22d3ee;
  --accent-hover:   #67e8f9;
  --accent-muted:   #082b3a;
  --accent-muted-t: #67e8f9;
  --btn-bg:         #222a5c;
  --btn-text:       #e7eaff;
  --btn-hover:      #313b7e;
  --danger:         #f472b6;
  --danger-hover:   #f9a8d4;
  --danger-muted:   #3a0f2a;
  --danger-muted-t: #f9a8d4;
  --ok-bg:          #0a2f2c;
  --ok-text:        #5eead4;
  --ok-border:      #0d9488;
  --err-bg:         #3a0f2a;
  --err-text:       #f9a8d4;
  --err-border:     #be185d;
  --info-bg:        #082b3a;
  --info-text:      #67e8f9;
  --info-border:    #0e7490;
  --shadow:         0 6px 24px rgba(0,0,0,.6);
  --shadow-sm:      0 2px 8px  rgba(0,0,0,.4);
  --avatar-bg:      #22d3ee;
  --focus-ring:     rgba(34, 211, 238, .3);
}
/* Neon-korostukset: hehkuva logo ja aktiiviset linkit */
[data-theme="neon"] .site-logo span { text-shadow: 0 0 8px rgba(34,211,238,.55); }
[data-theme="neon"] .site-nav > a.active { text-shadow: 0 0 8px rgba(34,211,238,.45); }
[data-theme="neon"] .btn-primary { box-shadow: 0 0 12px rgba(34,211,238,.35); }
[data-theme="neon"] .user-avatar { color: #050719; }

/* ══════════════════════════════════════════════════════════
   YLEISET TYYLIT
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

/* ── Yläpalkki ─────────────────────────────────────────────── */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .03em;
}
.site-logo:hover { text-decoration: none; }
.site-logo-mark {
    height: 38px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

.site-nav {
    display: flex;
    gap: 1.25rem;
    flex: 1;
    align-items: center;
}

.site-nav > a {
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}

.site-nav > a:hover,
.site-nav > a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-decoration: none;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.user-name { font-size: 0.875rem; color: var(--text-muted); }

/* ── Dropdown-navigaatio ───────────────────────────────────── */
.nav-dropdown { position: relative; }

.nav-dropdown-btn {
    background: none;
    border: none;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    padding: .35rem .5rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.nav-dropdown-btn:hover,
.nav-dropdown-btn.active {
    color: var(--accent);
    background: var(--accent-muted);
}
.nav-dropdown-btn.active { font-weight: 600; }

.dropdown-arrow {
    font-size: .65rem;
    opacity: .6;
    transition: transform .2s;
}
.nav-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 500;
    overflow: hidden;
}
.nav-dropdown-menu--right { left: auto; right: 0; }
.nav-dropdown.open .nav-dropdown-menu { display: block; }

.dropdown-header {
    padding: .6rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-alt);
}
.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: .2rem 0;
}
.dropdown-item {
    display: block;
    padding: .5rem 1rem;
    font-size: .875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background .1s, color .1s;
}
.dropdown-item:hover,
.dropdown-item.active {
    background: var(--surface-alt);
    color: var(--accent);
    text-decoration: none;
}
.dropdown-item--danger { color: var(--danger); }
.dropdown-item--danger:hover {
    background: var(--danger-muted);
    color: var(--danger);
}

/* Käyttäjä-avatar */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Teemavalitsin ─────────────────────────────────────────── */
.theme-toggle-btn {
    background: none;
    border: none;
    font-size: 1.05rem;
    cursor: pointer;
    padding: .3rem .4rem;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: background .15s, transform .15s;
    color: var(--text-muted);
}
.theme-toggle-btn:hover {
    background: var(--surface-alt);
    transform: rotate(20deg);
}

.theme-picker-menu { min-width: 230px; }

.theme-picker-label {
    padding: .5rem 1rem .3rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-subtle);
    background: var(--surface-alt);
}

.theme-list { padding: .4rem 0 .5rem; }

.theme-btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .45rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    transition: background .1s;
}
.theme-btn:hover { background: var(--surface-alt); }
.theme-btn.is-active { background: var(--accent-muted); }

.theme-swatches {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    width: 38px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.12);
}
.theme-swatches span { flex: 1; }

.theme-btn-name {
    flex: 1;
    font-size: .875rem;
    color: var(--text);
    text-align: left;
    font-weight: 500;
}
.theme-btn.is-active .theme-btn-name { color: var(--accent); font-weight: 600; }

.theme-check {
    font-size: .8rem;
    color: var(--accent);
    visibility: hidden;
}
.theme-btn.is-active .theme-check { visibility: visible; }

/* ── Napit ─────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-text);
    transition: background .15s, border-color .15s;
    text-decoration: none;
}
.btn:hover { background: var(--btn-hover); text-decoration: none; }

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-muted);
}
.btn-outline:hover { background: var(--surface-alt); }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

/* ── Pääsisältö ────────────────────────────────────────────── */
main {
    flex: 1;
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1rem;
    width: 100%;
}

h1 { font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; letter-spacing: .005em; margin-bottom: 1.25rem; color: var(--text); }
h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--text); }
h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text); }

/* ── Autentikointisivut ────────────────────────────────────── */
.auth-container {
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}
.auth-container h1 { margin-bottom: 1.5rem; }
.auth-link { margin-top: 1.25rem; font-size: 0.9rem; color: var(--text-muted); }

/* ── Lomake ────────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1rem;
}
.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-group small { font-size: 0.8rem; color: var(--text-subtle); }

/* ── Ilmoitukset ───────────────────────────────────────────── */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.alert ul { margin: 0; padding-left: 1.25rem; }
.alert-error   { background: var(--err-bg);  color: var(--err-text);  border: 1px solid var(--err-border);  }
.alert-success { background: var(--ok-bg);   color: var(--ok-text);   border: 1px solid var(--ok-border);   }
.alert-info    { background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border); }

/* ── Taulukko ──────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
thead th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    background: var(--surface-alt);
    border-bottom: 2px solid var(--border-strong);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-subtle);
}
tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: none; }

/* ── Kortti ────────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

/* ── Alapalkki ─────────────────────────────────────────────── */
.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    margin-top: auto;
}
.footer-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    font-size: 0.8rem;
    color: var(--text-subtle);
}

/* ── Mobiili ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .header-inner { gap: 0.75rem; }
    .site-nav { gap: 0.75rem; }
    .header-user .user-name { display: none; }
    .auth-container { border: none; padding: 1rem; }
    .nav-dropdown-menu { min-width: 160px; }
}