/* Väripaletti lainattu joku-repon frontend/tailwind.config.ts:stä (ks.
   /Users/ilkka/work/git/github/joku) - sama tumma navy + korostusvärit,
   plain CSS koska tässä ei ole build-pipelinea (ei Tailwind/Node). */
:root {
    --navy: #111d33;
    --navy-hover: #1c2c4a;
    --accent-blue: #2f5fb0;
    --accent-blue-dark: #274d8f;
    --accent-red: #d6604a;
    --accent-green: #2f9e6b;
    --accent-orange: #d6822f;
    --muted-grey: #8892a6;
    --muted-light: #cfd6e4;
    --card-border: #e2e5ea;
    --card-code: #f4f5f7;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: #1f2530;
    background: var(--card-code);
}

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

a:hover {
    text-decoration: underline;
}

h1 {
    color: var(--navy);
    font-size: 1.4rem;
    margin: 0 0 1.2rem;
}

h2 {
    color: var(--muted-grey);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.6rem;
}

/* Sidebar + sisältö */

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 200px;
    flex-shrink: 0;
    background: var(--navy);
    color: var(--muted-light);
    padding: 1.2rem 0;
}

.sidebar .brand {
    padding: 0 1.2rem 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
}

.sidebar nav a {
    display: block;
    padding: 0.5rem 1.2rem;
    color: var(--muted-light);
    font-size: 0.9rem;
}

.sidebar nav a:hover {
    background: var(--navy-hover);
    text-decoration: none;
}

.sidebar nav a.active {
    background: var(--navy-hover);
    color: #fff;
}

.sidebar .user {
    padding: 1rem 1.2rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--navy-hover);
    font-size: 0.8rem;
    color: var(--muted-grey);
}

.sidebar .user a {
    color: var(--muted-light);
}

.main {
    flex: 1;
    padding: 2rem;
    max-width: 1100px;
}

/* Kortit */

.card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
}

.card.muted {
    color: var(--muted-grey);
}

/* Napit ja lomakkeet */

.btn {
    display: inline-block;
    border: 1px solid var(--card-border);
    background: var(--card-code);
    color: var(--navy);
    border-radius: 5px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.btn:hover {
    background: var(--card-border);
}

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

.btn-primary:hover {
    background: var(--accent-blue-dark);
}

input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
    border: 1px solid var(--card-border);
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
}

.message-ok {
    color: var(--accent-green);
    font-weight: 500;
}

.message-error {
    color: var(--accent-red);
    font-weight: 500;
}

/* Taulukot */

table {
    border-collapse: collapse;
    width: 100%;
}

table th,
table td {
    border: 1px solid var(--card-border);
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.85rem;
}

table th {
    background: var(--card-code);
    color: var(--navy);
}

/* Värikoodatut merkinnät (esim. tili/lähde) */

.badge-blue { color: var(--accent-blue); }
.badge-red { color: var(--accent-red); }
.badge-green { color: var(--accent-green); }
.badge-orange { color: var(--accent-orange); }
.badge-grey { color: var(--muted-grey); }

.tab-filter {
    display: block;
    width: 100%;
    margin-bottom: 0.8rem;
}

/* CSS-only välilehdet - ei JS:ää. Rakenne (tässä järjestyksessä .tabs-diviä):
     N x <input type="radio" name="..."> (checked = oletusvälilehti)
     1 x <nav class="tab-labels"> jossa N x <label for="...">
     N x <div class="tab-panel">
   nth-of-type laskee vain samaa HTML-tagia olevat sisarukset, siksi label
   on omassa <nav>:ssa - eri tagi kuin panelien <div> ei sekoita laskentaa. */

.tabs input[type="radio"] {
    display: none;
}

.tabs .tab-labels {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 1rem;
}

.tabs .tab-labels label {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    color: var(--muted-grey);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tabs .tab-panel {
    display: none;
}

.tabs input:nth-of-type(1):checked ~ .tab-labels label:nth-of-type(1),
.tabs input:nth-of-type(2):checked ~ .tab-labels label:nth-of-type(2),
.tabs input:nth-of-type(3):checked ~ .tab-labels label:nth-of-type(3),
.tabs input:nth-of-type(4):checked ~ .tab-labels label:nth-of-type(4),
.tabs input:nth-of-type(5):checked ~ .tab-labels label:nth-of-type(5),
.tabs input:nth-of-type(6):checked ~ .tab-labels label:nth-of-type(6) {
    color: var(--navy);
    font-weight: 600;
    border-bottom-color: var(--accent-blue);
}

.tabs input:nth-of-type(1):checked ~ .tab-panel:nth-of-type(1),
.tabs input:nth-of-type(2):checked ~ .tab-panel:nth-of-type(2),
.tabs input:nth-of-type(3):checked ~ .tab-panel:nth-of-type(3),
.tabs input:nth-of-type(4):checked ~ .tab-panel:nth-of-type(4),
.tabs input:nth-of-type(5):checked ~ .tab-panel:nth-of-type(5),
.tabs input:nth-of-type(6):checked ~ .tab-panel:nth-of-type(6) {
    display: block;
}