/* ============================================================
   app.css – ForedragsHub
   Alle farvekoder er flyttet til theme.css – ret farver DER, ikke
   her. Denne fil er layout/komponent-styling, som bruger de
   variabler theme.css definerer.
   ============================================================ */

body {
    background-color: var(--brand-background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Navbar ---- */
.main-navbar { background-color: var(--brand-navy); }

.main-navbar .nav-link {
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    padding: .5rem .75rem;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    color: #fff;
    background-color: rgba(255,255,255,.1);
}
.main-navbar .navbar-brand { color: #fff; font-size: 1rem; }

/* Initialer navbar */
.initialer-lille {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Initialer tabel */
.initialer {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- Kort ---- */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid #f0f0ee;
    border-radius: 12px 12px 0 0 !important;
}

/* ---- Primær knap ---- */
.btn-primary { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--brand-navy-hover); border-color: var(--brand-navy-hover); }

/* ---- Web-footer (CMS-tekst, samme layout som mail-footeren) ---- */
.web-footer-tabel,
.web-footer-tabel table,
.web-footer-tabel td,
.web-footer-tekst {
    background-color: #fff;
}

/* ---- Farvede kort med lys tekst (dashboard-oversigtskort m.fl.) ---- */
.card-tekst-lys-70 {
    color: rgba(255, 255, 255, .75);
}
.card-tekst-moerk-60 {
    color: rgba(0, 0, 0, .6);
}

/* ---- Post-it ---- */
.postit-card {
    background: #f0f62a;
    color: #3a2e00;
}

/* ---- Post-it-noter, faste kategorier (postit.php) ---- */
.postit-note-gul    { background: #fff9c4 !important; border-left-color: #f9a825 !important; }
.postit-note-groen  { background: #c8e6c9 !important; border-left-color: #388e3c !important; }
.postit-note-orange { background: #ffe0b2 !important; border-left-color: #ef6c00 !important; }
.postit-note-blaa   { background: #e3f2fd !important; border-left-color: #1976d2 !important; }
.postit-note-roed   { background: #ffcdd2 !important; border-left-color: #c62828 !important; }
.postit-note-lilla  { background: #e1bee7 !important; border-left-color: #8e24aa !important; }

.postit-note-gul    .postit-note-label { color: #f9a825; }
.postit-note-groen  .postit-note-label { color: #388e3c; }
.postit-note-orange .postit-note-label { color: #ef6c00; }
.postit-note-blaa   .postit-note-label { color: #1976d2; }
.postit-note-roed   .postit-note-label { color: #c62828; }
.postit-note-lilla  .postit-note-label { color: #8e24aa; }

/* ---- Status-badge (person/dato) på post-it-noter - meget lys grå ---- */
.postit-status-badge {
    background: #f5f5f5;
    color: #495057;
    border: 1px solid #e0e0e0;
    font-weight: 500;
}

/* ---- Footer ---- */
.main-footer {
    background-color: #fff;
    border-top: 1px solid var(--status-ledig);
    margin-top: auto;
}

/* ---- Tabel ---- */
tr.fortid { font-style: italic; }
tr.uge-idag { font-variant-caps: all-small-caps; }
tr.dato-ledig td:nth-child(-n+2) { background-color: var(--response-ledig, #fffbea) !important; }

/* ---- Udtrækspanel ---- */
.panel { display: none; background: #f8f9fa; border-top: 1px solid #dee2e6; }
.panel.åben { display: table-row; }
.panel > td { padding: 1.25rem 1.5rem; }

/* ---- Chips ---- */
.num-chip {
    display: inline-block;
    background: var(--status-ledig);
    border-radius: 4px;
    font-size: .78rem;
    padding: 2px 7px;
    margin: 2px;
}
.num-chip.rød  { background: var(--response-kan-ikke); }
.num-chip.gul  { background: var(--response-advarsel); }
.num-chip.grøn { background: var(--response-kan); }

.dato-chip {
    display: inline-block;
    background: var(--status-ledig);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: .8rem;
    margin: 2px;
    cursor: pointer;
    user-select: none;
    transition: background .1s, color .1s;
}
.dato-chip.valgt { background: var(--brand-navy); color: #fff; }
.dato-chip.afvist {
    background: var(--response-kan-ikke);
    color: #842029;
    text-decoration: line-through;
    border-left-color: var(--status-afvist) !important;
}
.dato-chip.dato-advarsel { background: var(--response-advarsel); }

.outline-liste-tabel {
    max-height: 140px;
    overflow-y: auto;
}
.outline-linje {
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background .1s, color .1s;
}
.outline-linje:hover { background: var(--status-ledig); }
.outline-linje.valgt { background: var(--brand-navy); color: #fff; }
.outline-linje.valgt .outline-linje-sidst { color: #cfd8e3 !important; }

.dato-prik {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
}

/* ---- Svar-matrix ---- */
.possible { background-color: var(--response-kan) !important; }
.declined { background-color: var(--response-kan-ikke) !important; }

/* ---- Dato-rækker (guest.php, og includes/inc_taler_side.php delt med
   mine_aftaler.php/taler_side.php) - lå oprindeligt kun i guest.php's
   egen inline <style>, så de to sidstnævnte sider manglede den. ---- */
.dato-row { border-bottom: 1px solid #f0f0ee; padding: .6rem 0; }
.dato-row:last-child { border-bottom: none; }

/* ---- Sticky "Hurtig genvej"-boks (guest.php) - samme runde hjørner
   som .card ovenfor, men med synlig navy-kant i stedet for skygge, så
   den skiller sig ud fra det almindelige kortudseende når den flyder
   oven på indholdet. ---- */
.hurtig-menu-boks {
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--brand-navy);
    border-radius: 12px;
}

/* Alle steder man kan hoppe hen til fra "Hurtig genvej"-boksen - #top-,
   sektions- og talerkort-anchors. --sticky-menu-h sættes af JS ud fra
   boksens FAKTISKE, aktuelle højde (den varierer med antal talere og
   med om boksen er foldet sammen på mobil), så det hoppede-til indhold
   aldrig gemmer sig halvt bag den. 100px er kun et fallback, indtil JS
   har målt en gang. */
:root { --sticky-menu-h: 100px; }
.jump-target { scroll-margin-top: calc(var(--sticky-menu-h) + 10px); }

/* ---- Nav-tabs ---- */
.nav-tabs .nav-link {
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .5rem .75rem;
}
.nav-tabs .nav-link.active {
    color: var(--brand-navy);
    border-bottom-color: var(--brand-navy);
    background: none;
    font-weight: 500;
}
.nav-tabs { border-bottom: 1px solid #dee2e6; margin-bottom: 1.5rem; }

/* Opacity hjælper */
.opacity-60 { opacity: .6; }

/* ============================================================
   Farvekonventioner
   Inde  = blå   (var(--status-bekraeftet) / Bootstrap primary)
   Ude   = lilla (#6f42c1)
   Bekræftet = Bootstrap primary blå
   Afventer  = gul (Bootstrap warning)
   Afvist    = rød (Bootstrap danger)
   Ledig     = grå
   ============================================================ */

/* Boks-kort */
.boks-inde {
    border-top: 3px solid var(--status-bekraeftet) !important;
}
.boks-ude {
    border-top: 3px solid var(--direction-ude) !important;
}

/* Info-boks indeni kortet */
.info-boks-inde {
    background: #e8f0fe;
    border-left: 3px solid var(--status-bekraeftet);
}
.info-boks-ude {
    background: #fff3e0;
    border-left: 3px solid var(--direction-ude);
}

/* Inde/ude ikoner i navbar og tabeller */
.farve-inde { color: var(--direction-inde); }
.farve-ude  { color: var(--direction-ude); }

/* Inde/ude badges (fx "Åben anmodning") – samme farvekode som ovenfor */
.bg-inde { background-color: var(--direction-inde) !important; color: #fff; }
.bg-ude  { background-color: var(--direction-ude) !important; color: #fff; }

/* Baggrundsfarve ved 2+ talere ude samme søndag er fjernet efter ønske
   - klassen "flere-ude" ligger stadig i markup'et til evt. fremtidig
   brug, men udløser ikke længere nogen visuel ændring. */

/* ---- Ind/ude-baggrund på tabelrækker (bookings.php m.fl.) - genbruger
   samme farvevariabler som dashboard.php's oversigtskort ---- */
tr.row-ude-svag > td { background-color: var(--direction-ude-svag); }
tr.row-inde-svag > td { background-color: var(--direction-inde-svag); }

/* Inde/ude knapper */
.btn-inde {
    background-color: var(--direction-inde) !important;
    border-color: var(--direction-inde) !important;
    color: #fff !important;
}
.btn-inde:hover { background-color: var(--brand-navy-hover) !important; border-color: var(--brand-navy-hover) !important; color: #fff !important; }

.btn-ude {
    background-color: var(--direction-ude) !important;
    border-color: var(--direction-ude) !important;
    color: #fff !important;
}
.btn-ude:hover { background-color: var(--direction-ude-hover) !important; border-color: var(--direction-ude-hover) !important; color: #fff !important; }

/* Dashboard mobil-kort */
.mobil-inde {
    background: #e8f0fe;
    border-left: 3px solid var(--status-bekraeftet);
    border-radius: 6px;
    padding: .5rem .75rem;
}
.mobil-ude {
    background: #fff3e0;
    border-left: 3px solid var(--direction-ude);
    border-radius: 6px;
    padding: .5rem .75rem;
}

/* Label-tekst */
.label-inde {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--status-bekraeftet);
    text-transform: uppercase;
}
.label-ude {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--direction-ude);
    text-transform: uppercase;
}

/* Status-badges override (sikrer konsistens) */
.badge-bekræftet { background-color: var(--status-bekraeftet) !important; color: #fff; }
.badge-afventer  { background-color: var(--status-afventer) !important; color: #000; }
.badge-afvist    { background-color: var(--status-afvist) !important; color: #fff; }
.badge-ledig     { background-color: var(--status-ledig) !important; color: #212529 !important;
                   border: 1px solid #adb5bd !important; }

/* Dashboard tabel inde/ude kolonner */
.col-inde { border-left: 2px solid #e8f0fe; }
.col-ude  { border-left: 2px solid #fff3e0; }

/* ---- Logo i navbar ---- */
.navbar-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}
/* Vis tekst som fallback hvis logo ikke loader */
.navbar-logo-tekst {
    color: #fff;
    font-size: 1rem;
}
/* Skjul tekst-fallback som standard (vises via JS/onerror) */
.navbar-logo ~ .navbar-logo-tekst {
    display: none;
}

/* Sikrer farve-klasser virker i table headers (table-light overskriver ellers) */
thead th.farve-inde,
thead .farve-inde { color: var(--direction-inde) !important; background: var(--direction-inde-svag) !important; }
thead th.farve-ude,
thead .farve-ude  { color: var(--direction-ude) !important; background: var(--direction-ude-svag) !important; }

/* Knap-farver: alle primære knapper bruger header-farven (var(--brand-navy))
   Foredrag INDE bruger var(--direction-inde) (samme hex som brand-navy, men egen
   variabel) KUN til farvekodning i tabeller
   ALDRIG til knapper – blå ville ligne et tekstlink */
.btn-primary,
.btn-primary:focus { background-color: var(--brand-navy) !important; border-color: var(--brand-navy) !important; }
.btn-primary:hover  { background-color: var(--brand-navy-hover) !important; border-color: var(--brand-navy-hover) !important; }

/* Blokerede datoer i dashboard */
tr.dato-blokeret td { background-color: var(--response-blokeret) !important; }
tr.dato-blokeret td:first-child { border-left: 3px solid var(--status-afvist); }

.dato-klik:hover { background-color: #f0f4fa !important; text-decoration: underline; }

/* Ordstyrer-farve, samme mønster som farve-inde/farve-ude */
.farve-ordstyrer { color: var(--direction-inde); }

/* Svar-matrix (request.php) - tabindex="0" gør boksen tastatur-navigerbar
   (venstre/højre-piletaster ruller), så man ikke skal markere tekst for at
   "låne" browserens scroll, når tabellen bliver bredere end skærmen. */
#matrix-scroll:focus { outline: 2px solid var(--brand-navy); outline-offset: -2px; }

/* Flydende venstre/højre-pile oven på svar-matrixens kanter (kun vist når
   der reelt er noget at rulle til, se JS i request.php) */
.matrix-scroll-pil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    background: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    color: var(--brand-navy);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}
.matrix-scroll-pil.vis { opacity: 1; pointer-events: auto; }
.matrix-scroll-pil:hover { background: #fff; }
.matrix-scroll-pil-venstre { left: 4px; }
.matrix-scroll-pil-hoejre { right: 4px; }

/* Intern note - post-it-grøn baggrund (se --note-intern-bg i theme.css),
   fast konvention der bruges alle steder i systemet, hvor en note KUN er
   synlig internt hos egen menighed (aldrig eksternt/den anden menighed). */
.note-intern-kort { background: var(--note-intern-bg) !important; }
.note-intern-kort .card-header { background: var(--note-intern-bg) !important; border-bottom-color: rgba(0,0,0,.1) !important; }
.note-intern-tekst { color: #1a3a1a; }