:root {
    /* Färgpalett */
    --header-bg: #050505;
    --footer-bg: #050505;
    --content-bg: #ffffff;
    
    --text-on-dark: #e0e0e0;
    --text-on-light: #111111;
    --text-muted: #666;
    
    --border-dark: #333;
    --border-light: #ddd;
    
    --font-serif: 'Crimson Text', serif;
    --font-sans: 'Inter', sans-serif;
}

/* --- Global Layout --- */
body {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    font-family: var(--font-serif); /* Fallback font */
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 18px;
    line-height: 1.6;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

a { color: inherit; text-decoration: underline; }
a:hover { opacity: 0.7; }

/* --- Header --- */
header {
    background-color: var(--header-bg);
    color: var(--text-on-dark);
    padding: 20px 0;
    border-bottom: 1px solid var(--border-dark);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1 {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5rem;
    font-family: var(--font-serif);
}

nav a {
    color: #888;
    text-decoration: none;
    margin-left: 20px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
}
nav a:hover { color: #fff; }

/* --- Main Content --- */
main {
    background-color: var(--content-bg);
    color: var(--text-on-light);
    flex: 1; 
    padding: 40px 0;
    /* Tvinga fonten här om inheritance är trasig */
    font-family: var(--font-serif); 
}

/* Typografi för Main */
main h2 {
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #000;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    line-height: 1.2;
    font-family: var(--font-serif);
}

main h3 {
    font-size: 1.4rem;
    margin-top: 30px;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    color: #000;
    font-family: var(--font-serif);
}

main b, main strong { color: #000; font-weight: 700; }
main a { color: #000; }
main .subtitle { color: #666; font-style: italic; display: block; margin-top: 5px; }

/* --- Controls & Breadcrumbs --- */
.content-header { margin-bottom: 30px; }

.breadcrumbs {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.breadcrumbs a { color: #666; text-decoration: none; border-bottom: 1px dotted #999; }
.breadcrumbs .current { color: #000; font-weight: 700; }

.page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
    padding: 10px 15px;
    border: 1px solid #ddd;
    font-family: var(--font-sans);
    font-size: 0.9rem;
}

/* --- Tables --- */
.sd-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 0.95rem;
    border: 1px solid #000;
    font-family: var(--font-sans); /* Tabeller är oftast snyggare i Sans */
}

.sd-table th {
    background-color: #eee;
    color: #000;
    font-weight: 700;
    border-bottom: 1px solid #000;
    padding: 8px 12px;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.sd-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #ccc;
    color: #000;
}

.sd-table tr:nth-child(even) { background-color: #f9f9f9; }
.sd-table tr.clickable { cursor: pointer; }
.sd-table tr.clickable:hover { background-color: #f0f0f0; }

.center-first-col th:first-child, .center-first-col td:first-child { text-align: center; }
.center-all th, .center-all td { text-align: center; }

/* --- Stats & Abilities Styles --- */
.stat-line { margin-bottom: 5px; font-size: 1rem; }
.description-text { margin-bottom: 25px; color: #333; }
.ability-entry { margin-bottom: 15px; }
.divider { border: 0; border-top: 1px solid #ccc; margin: 40px 0; }

/* --- Footer --- */
footer {
    background-color: var(--footer-bg);
    color: #666;
    padding: 30px 0;
    text-align: center;
    font-size: 0.8rem;
    border-top: 1px solid var(--border-dark);
    margin-top: auto;
}

/* --- Components: Switch --- */
.switch { position: relative; display: inline-block; width: 34px; height: 20px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 2px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: #fff; transition: .4s; border-radius: 1px; }
input:checked + .slider { background-color: #000; }
input:checked + .slider:before { transform: translateX(14px); }

/* --- Login Page --- */
body.login-page { background-color: #000; justify-content: center; align-items: center; }
.login-container { background: #111; color: #fff; padding: 40px; border: 1px solid #333; width: 100%; max-width: 400px; text-align: center; }
.login-container h1 { color: #fff; margin-top: 0; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; color: #888; font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; }
.form-group input { width: 100%; padding: 10px; background: #000; border: 1px solid #444; color: #fff; box-sizing: border-box; }
.login-container button { width: 100%; padding: 12px; background: #eee; color: #000; border: none; font-weight: 700; text-transform: uppercase; cursor: pointer; margin-top: 10px; }
.error-message { background: #300; color: #f88; padding: 10px; margin-bottom: 20px; border: 1px solid #500; }

/* --- Source Footer (Detail View) --- */
.source-footer {
    margin-top: 40px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    text-align: right;
    color: #999;
    font-size: 0.85rem;
    font-style: italic;
    font-family: var(--font-sans);
}

/* --- Sortable & Filterable Tables --- */
.table-controls {
    margin-bottom: 15px;
}

.search-input {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-family: var(--font-sans);
    width: 100%;
    max-width: 300px;
    background-color: #fff;
    color: #000;
}

th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}

th.sortable:hover {
    background-color: #ddd; /* Tydlig hover-effekt */
}

th.sortable::after {
    content: '↕';
    font-size: 0.7em;
    margin-left: 5px;
    opacity: 0.3;
}

th.sort-asc::after {
    content: '▲';
    opacity: 1;
}

th.sort-desc::after {
    content: '▼';
    opacity: 1;
}

/* -------------------------------------------------------------------------- */
/* 10. MONSTER STAT BLOCKS                                                    */
/* -------------------------------------------------------------------------- */
.monster-stat-block {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.8; /* Lite extra luft för läsbarhet */
    color: #000;
}

.monster-stat-block strong {
    color: #000;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-left: 5px;
}

/* Ta bort vänstermarginal på den allra första */
.monster-stat-block strong:first-child {
    margin-left: 0;
}

.monster-tag-link {
    color: #444;
    text-decoration: none;
    border-bottom: 1px dotted #888;
}
.monster-tag-link:hover {
    color: #000;
    border-bottom: 1px solid #000;
}

/* --- Filter Chips (Active Filters) --- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    min-height: 10px; /* Så den inte kollapsar helt */
}

.chip {
    display: inline-flex;
    align-items: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px; /* Lite rundade hörn */
    padding: 5px 10px;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    color: #000;
}

.chip strong {
    margin-right: 5px;
    color: #444;
}

.chip-remove {
    margin-left: 8px;
    cursor: pointer;
    color: #999;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
}

.chip-remove:hover {
    color: #d44; /* Röd vid hover */
}

/* --- Result Count --- */
.result-count {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
    text-align: right;
    font-style: italic;
}

/* --- Sub Navigation (Tabs) --- */
.sub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-dark);
}

.sub-nav a {
    text-decoration: none;
    color: #666;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 600;
}

.sub-nav a:hover {
    color: #000;
    background-color: #eee;
}

.sub-nav a.active {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

/* --- Text Formattering --- */

/* Ersätter dubbla <br><br> */
.text-spacer {
    display: block;
    height: 0.8em; /* Justera detta värde: 0.5em = litet gap, 1.5em = stort gap */
    content: "";
    margin: 0;
}

/* --- Role Based UI --- */

/* Om man är vanlig user: Gör toggles inaktiva visuellt */
body.role-user .switch {
    pointer-events: none; /* Går ej att klicka */
    opacity: 0.4;         /* Ser inaktiva ut */
    filter: grayscale(100%);
}

/* Dölj Admin-länken i menyn om man skulle råka rendera den */
body.role-user nav a[href="/admin"],
body.role-guest nav a[href="/admin"] {
    display: none !important;
}

/* --- Admin Forms Typography --- */
.form-label { 
    display: block; 
    font-size: 0.75rem; 
    color: #666; 
    text-transform: uppercase; 
    font-weight: bold; 
    margin-bottom: 3px; 
}

.center-label { 
    display: block; 
    font-size: 0.75rem; 
    color: #666; 
    text-transform: uppercase; 
    font-weight: bold; 
    text-align: center; 
    margin-bottom: 3px; 
}