/* --- GRUNDINSTÄLLNINGAR & VARIABLER --- */
:root { 
    --primary: #003366; 
    --accent: #3b82f6; 
    --bg: #f4f7f6; 
    --white: #ffffff; 
    --text: #1e293b; 
    --border: #cbd5e1; 
    --home-bg: #f0f9ff; 
}

body { 
    font-family: "Helvetica Neue", Arial, sans-serif; 
    background: var(--bg); 
    padding: 0; /* Ändrat från 20px för att naven ska gå ända ut */
    color: var(--text); 
    margin: 0; 
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    background: var(--white); 
    padding: 30px; 
    border-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    border-top: 6px solid var(--primary); 
}

/* --- RUBRIKER & TITLAR (DESKTOP) --- */
h1 {
    font-size: 2.2rem;       /* Skön basstorlek på stor skärm */
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em; /* Gör texten lite tajtare och modernare */
    margin-top: 0;
}

/* Siktar specifikt in oss på undertitlarna (datum/år) i toppsektionerna */
.container > div[style*="text-align: center"] strong {
    font-size: 1.1rem;       /* Ökar storleken något för läsbarhet */
    color: #475569;          /* En snygg, lite mjukare mörkgrå färg */
    letter-spacing: 0.01em;
}

/* --- GEMENSAM NAVBAR (RESPONSIV) --- */
.main-nav {
    background: #1e293b;
    color: white;
    padding: 0;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}

.nav-logo {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
}

.nav-links a {
    color: #94a3b8;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-links a:hover {
    color: white;
    background: #334155;
}

.nav-links a.active {
    color: white;
    background: var(--primary);
    font-weight: bold;
}

.nav-info {
    display: flex;
    align-items: center;
}

.view-count {
    font-size: 0.85rem;
    color: #94a3b8;
    background: #334155;
    padding: 4px 10px;
    border-radius: 4px;
}

/* --- TABELLER & FILTRERING (DESKTOP) --- */
.filter-section { 
    margin-bottom: 25px; 
    padding: 20px; 
    background: #fff; 
    border: 1px solid var(--border); 
    border-radius: 4px; 
    display: flex; 
    gap: 15px; 
    align-items: center; 
    flex-wrap: wrap; 
}

select, button { padding: 10px; border-radius: 4px; border: 1px solid var(--border); }
button { background: var(--primary); color: white; border: none; cursor: pointer; font-weight: bold; }
.btn-clear { text-decoration: none; color: #64748b; padding: 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9em; }
.count-badge { margin-left: auto; font-weight: bold; color: var(--primary); background: #e0f2fe; padding: 5px 15px; border-radius: 20px; }

/* FIX: Mappa stilarna mot den faktiska tabellstrukturen i index.php */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 15px;
}

th { 
    background: var(--primary); 
    color: white; 
    text-align: left; 
    padding: 14px 16px; 
    font-size: 0.85em; 
    text-transform: uppercase; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}

td { 
    padding: 16px; 
    border-bottom: 1px solid #e2e8f0; 
    vertical-align: top; 
    color: var(--text);
    line-height: 1.5;
}

/* Varannan-rad-färgning för vanliga rader så att skärmen blir lättläst */
tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Särskild toning för hemmamatcher (överskriver varannan-rad-färgningen) */
tr.Hemma { 
    background-color: var(--home-bg) !important; 
}

tr:hover {
    background-color: #f1f5f9 !important;
}

/* --- BADGES & STATUSAR --- */
.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.badge.Hemma { background: #dbeafe; color: #1e40af; }
.badge.Borta { background: #f1f5f9; color: #475569; }

.conflict-domare, .conflict-active { border-left: 6px solid #ef4444 !important; background-color: #fee2e2 !important; }
.conflict-plan { border-left: 6px solid #f59e0b !important; background-color: #fef3c7 !important; }

.alert { font-size: 0.85em; display: block; margin-top: 8px; padding: 8px 12px; border-radius: 4px; font-weight: 600; }
.alert-domare { color: #991b1b; background: #fecaca; border: 1px solid #f87171; }
.alert-plan { color: #92400e; background: #fde68a; border: 1px solid #fbbf24; }

.domar-tag { background: #000; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 0.65em; font-weight: bold; margin-bottom: 5px; display: inline-block; }

/* Ändra runt rad 133 till detta: */
.ansvar-text { 
    color: var(--primary); 
}

/* Siktar specifikt på dömande lag/bollkallar på datorn */
.ansvar-text strong {
    font-size: 0.85rem;       /* Sänker storleken så det blir diskretare än spelande lag */
    font-weight: 600;        /* Gör texten aningen tunnare (inte lika vräkigt fet) */
    letter-spacing: 0.02em;  /* Glesar ut bokstäverna lite för bättre läsbarhet */
}
.text-conflict { color: #b91c1c !important; }

/* Justera domarkolumnen vid krock */
tr.conflict-domare .ansvar-text strong {
    color: #b91c1c;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.domare-namn {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85em;
    color: #475569;
    font-weight: normal;
}

.btn-avbytare {
    text-decoration: none;
    color: #64748b;
    font-size: 0.85em;
    padding: 5px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    transition: all 0.2s;
}
.btn-avbytare:hover {
    background: #f8fafc;
    color: #1e293b;
}

/* --- MOBILANPASSNING (S22 ULTRA-FIX) --- */
@media (max-width: 768px) {
    body { padding: 0 0 20px 0; }
    .container { padding: 15px; border-radius: 0; }

    /* Responsiva rubriker på mobilen */
    h1 {
        font-size: 1.6rem;
        margin-top: 5px;
    }
    
    .container > div[style*="text-align: center"] strong {
        font-size: 0.95rem;
        display: block;
        margin-top: 4px;
    }

    /* Navbaren på mobilen */
    .nav-container { flex-direction: column; gap: 15px; padding: 15px 10px; height: auto; }
    .nav-logo { font-size: 1.1rem; }
    .nav-links { width: 100%; justify-content: center; gap: 5px; }
    .nav-links a { flex: 1; text-align: center; font-size: 0.8rem; padding: 12px 5px; }
    .view-count { display: none; }

    /* Tabellen på mobilen (Gör om rader till separata kort) */
    thead { display: none; } 
    tr { border: 1px solid var(--border); margin-bottom: 20px; display: block; background: white; border-radius: 6px; padding: 5px; } 
    tr:nth-child(even) { background-color: white; } /* Nollställ varannan-rad-färg på mobil */
    td { display: block; padding: 12px 15px; border-bottom: 1px solid #eee; text-align: left; } 
    td:last-child { border-bottom: none; }
    td::before { content: attr(data-label); display: block; font-weight: bold; font-size: 0.7em; color: var(--primary); margin-bottom: 2px; } 
}