:root {
    --brand-primary: #111111;
    --brand-secondary: #f4f4f4;
    --app-border: #e5e5e5;
    --app-sidebar-width: 240px;
}

body {
    background: #ffffff;
    color: #1a1a1a;
	font-family: "Montserrat", sans-serif;
	
	/*
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	*/
}

/* --- App shell (sidebar + topbar), jf. _mockups/ --- */

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

.app-sidebar {
    width: var(--app-sidebar-width);
    flex-shrink: 0;
    border-right: 1px solid var(--app-border);
    padding: 13px 20px;
    display: flex;
    flex-direction: column;
}

.app-sidebar-brand {
    margin-bottom: 24px;
}

.app-sidebar-logo {
    max-height: 100px;
	max-width:198px;
}

.app-sidebar-wordmark {
    font-weight: 600;
    font-size: 1.1rem;
}

.app-sidebar-tenant-brand {
    margin-top: auto;
    padding-top: 24px;
}

.app-sidebar-tenant-logo {
    max-height: 60px;
    max-width: 160px;
}

.app-sidebar-section-label {
    margin-top: 24px;
    padding: 0 12px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8a8a;
}

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

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0px;
    border-radius: 6px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.1rem;
}

.menuicons {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}

.app-nav-link:hover {
    background: var(--brand-secondary);
}

.app-nav-link.active {
    background: var(--brand-secondary);
    font-weight: 600;
}

.app-nav-link.disabled {
    color: #b5b5b5;
    cursor: default;
}

.app-nav-sublink {
    padding-left: 28px;
    font-size: 0.95rem;
    color: #5a5a5a;
}

.app-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 1px solid var(--app-border);
}

.app-breadcrumb {
    font-size: 0.85rem;
    color: #6a6a6a;
}

.app-breadcrumb a {
    color: #6a6a6a;
    text-decoration: none;
}

.app-breadcrumb-sep {
    margin: 0 6px;
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-saved-meta {
    display: block;
    text-align: right;
    font-size: 11px;
    color: #888;
    margin-bottom: 12px;
}

.app-topbar-dropdown {
    color: #1a1a1a;
    text-decoration: none;
}

.app-content {
    padding: 32px;
}

.app-page-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.app-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.app-narrow-form {
    max-width: 360px;
}

/* Bredere formular (fx Brugere): to felter ved siden af hinanden skal have plads */
.app-medium-form {
    max-width: 640px;
}

.app-summary-card {
    display: block;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.app-summary-card:hover {
    background: var(--brand-secondary);
}

.app-summary-card-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.app-summary-card-stat {
    font-size: 0.9rem;
    color: #6a6a6a;
}

.app-empty-state {
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 32px;
}

.app-table {
    border-top: 1px solid var(--app-border);
}

/* Trafiklys-prik for datakomplethed (fx "Eventdata"/"Driftdata" i eventoversigten). */
.app-traffic-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.app-traffic-dot.red    { background: #c0392b; }
.app-traffic-dot.orange { background: #e67e22; }
.app-traffic-dot.green  { background: #27ae60; }

.app-table th {
    font-weight: 600;
    font-size: 0.8rem;
    color: #6a6a6a;
    border-bottom: 1px solid var(--app-border);
}

.app-table td,
.app-table th {
    padding: 12px 8px;
    vertical-align: middle;
}

.app-table tbody tr {
    border-bottom: 1px solid var(--app-border);
}

.app-btn-primary {
    background: var(--brand-primary);
    color: #ffffff;
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 600;
    border: none;
}

.app-btn-primary:hover {
    background: #1a1a1a;
    color: #ffffff;
}

.app-btn-secondary {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 600;
}

.app-btn-secondary:hover {
    background: var(--brand-secondary);
    color: #1a1a1a;
}

.app-module-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--app-border);
}

.app-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

/* Generel markering af påkrævede felter: rød stjerne efter enhver .form-label der er
   direkte efterfulgt af et [required]-felt - virker automatisk på alle formularer uden
   at hvert enkelt template skal markere det selv. */
.form-label:has(+ [required])::after {
    content: " *";
    color: #c0392b;
}

/* Feltnavn øverst i selve feltet, ovenpå kant-linjen (jf. _mockups/eksempel1.jpg) i
   stedet for som en separat linje over feltet. Virker automatisk på det gennemgående
   mønster <label class="form-label"> direkte efterfulgt af .form-control/.form-select,
   uden at hvert enkelt template skal opdateres. */
div:has(> .form-label:first-child + .form-control),
div:has(> .form-label:first-child + .form-select) {
    position: relative;
    padding-top: 9px;
}

div:has(> .form-label:first-child + .form-control) > .form-label,
div:has(> .form-label:first-child + .form-select) > .form-label {
    position: absolute;
    top: 0;
    left: 12px;
    z-index: 1;
    margin: 0;
    padding: 0 4px;
    background: #fff;
    font-size: 0.7rem;
    line-height: 1.3;
    color: #6a6a6a;
    pointer-events: none;
    /* Uden dette ombrydes lange labels til 2 linjer og overlapper/skjuler feltets eget
       indhold, fordi label'en er absolut positioneret og derfor ikke skubber noget ned. */
    white-space: nowrap;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Marketing / roddomæne --- */

.marketing-body {
    display: flex;
	margin-top: 10%;
    justify-content: center;
    min-height: 100vh;
}

/* Footer på roddomænets forside og privatlivsside: link til venstre, firmadata til højre. */
.marketing-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 16px 32px;
    font-size: 0.8rem;
    color: #6a6a6a;
    background: rgba(250, 250, 250, 0.92);
    z-index: 2;
}
.marketing-footer a { color: inherit; }
.marketing-footer-company { margin: 0; text-align: right; font-style: normal; }

/* Privatlivssiden: læsevenlig tekstside i stedet for forsidens centrerede hero. */
.marketing-doc {
    display: block;
    margin-top: 0;
    padding: 48px 24px 120px;
}
.marketing-doc-inner { max-width: 760px; margin: 0 auto; }
.marketing-doc h2 { font-size: 1.15rem; margin-top: 2rem; }

.marketing-hero {
    max-width: 660px;
    text-align: center;
    padding: 32px;
}

.marketing-wordmark {
    display: block;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #6a6a6a;
    margin-bottom: 16px;
}

.marketing-headline {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.marketing-lead {
    color: #4a4a4a;
    margin-bottom: 32px;
}

.bg-logo-fixed {
  position: fixed;
  bottom: -25vh;
  left: 17%;
  width: 300vw;
  opacity: 0.05; /* Juster gennemsigtigheden her (fx 0.05 til 0.15) */
  pointer-events: none;
  z-index: -1;
}

/* --- Login / glemt adgangskode / nulstil adgangskode --- */

.auth-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #fafafa;
    /* Plads til den faste marketing-footer, så den ikke dækker login-kortet på lave skærme. */
    padding-bottom: 96px;
}
@media (max-width: 576px) {
    .marketing-footer { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 16px; }
    .marketing-footer-company { text-align: left; }
    .auth-body { padding-bottom: 130px; }
}

/* Tydeligt visuelt skel mellem admin.ac og kunde-flader, jf. Morten - vises øverst på
   superadmin-siderne (login, glemt/nulstil adgangskode, hele shell'et). */
.admin-bar {
    width: 100%;
    background: #c0392b;
    color: #ffffff;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
}

.auth-card {
    width: 100%;
    max-width: 360px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 32px;
    background: #ffffff;
}

.auth-card-brand {
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #6a6a6a;
    margin-bottom: 16px;
}

.auth-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.auth-error {
    background: #fdeeee;
    color: #a12622;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.auth-card-footer {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* Farvet prik foran en eventstatus (Eventflow) - bruges i lister, menuer og indstillinger. */
.app-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Forslagsliste under tag-felter (design/assets/js/tag-input.js). */
.app-tag-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1060;
    max-height: 220px;
    overflow-y: auto;
}

/* Profilbillede (partials/_avatar.twig): initialer bagved, billedet ovenpå. */
/* Klikbart profilbillede på Min profil (upload/udskift/fjern) med et lille kamera-mærke. */
.app-avatar-button {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 50%;
    cursor: pointer;
}
.app-avatar-button:hover .app-avatar,
.app-avatar-button:focus-visible .app-avatar { box-shadow: 0 0 0 3px rgba(0, 0, 0, .15); }
.app-avatar-button-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--app-border);
    font-size: 13px;
    line-height: 24px;
    text-align: center;
}

.app-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e5e5;
    color: #555;
    font-weight: 600;
    vertical-align: middle;
    flex-shrink: 0;
}
.app-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Beskedcenter: messenger-opdeling (personer 1/3, kommunikation 2/3) --- */
.msg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    height: calc(100vh - 210px);
    min-height: 440px;
    border: 1px solid var(--app-border);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.msg-list { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--app-border); }
.msg-list-search { padding: 10px; border-bottom: 1px solid var(--app-border); }
.msg-list-items { overflow-y: auto; flex: 1; }
.msg-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--app-border);
}
.msg-item[hidden] { display: none; }
.msg-item:hover { background: #f6f6f6; color: inherit; }
.msg-item.active { background: #eeeeee; }
.msg-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msg-item-top { display: flex; justify-content: space-between; gap: 8px; }
.msg-item-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item-preview { font-size: .82rem; color: #6a6a6a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-item-icon {
    width: 40px; height: 40px; border-radius: 50%; background: #222; color: #fff; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.msg-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.msg-pane-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--app-border); }
.msg-back { display: none; text-decoration: none; font-size: 1.3rem; color: inherit; }
.msg-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fafafa; }
.msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; }
.msg-row.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble { background: #fff; border: 1px solid var(--app-border); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.msg-row.mine .msg-bubble { background: #222; border-color: #222; color: #fff; }
.msg-author { font-size: .75rem; font-weight: 600; color: #6a6a6a; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-time { font-size: .7rem; opacity: .6; text-align: right; margin-top: 2px; }
.msg-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--app-border); }
.msg-compose textarea { resize: none; }
.msg-tag { background: #fff; border: 1px solid var(--app-border); border-radius: 8px; padding: 12px; }
.msg-empty { margin: auto; text-align: center; padding: 24px; }

/* Mobil: enten listen eller samtalen (samtalen når der er valgt noget). */
@media (max-width: 991.98px) {
    .msg-layout { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 190px); }
    .msg-layout .msg-pane { display: none; }
    .msg-layout.msg-has-active .msg-list { display: none; }
    .msg-layout.msg-has-active .msg-pane { display: flex; }
    .msg-back { display: inline; }
}

/* --- Brugerpopup (user-card.js) --- */
.app-user-link { color: inherit; text-decoration: none; border-bottom: 1px dotted #999; cursor: pointer; }
.app-user-link:hover { color: inherit; border-bottom-style: solid; }
.app-user-card {
    position: absolute; z-index: 2000; min-width: 160px; max-width: 260px;
    background: #fff; border: 1px solid var(--app-border); border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12); padding: 10px 14px;
}
.app-user-card-name { font-weight: 600; }
.app-user-card-role { font-size: .85rem; color: #6a6a6a; }

/* Godkend/Afslå-knapper i en besked (beskedcentret) */
.msg-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* Beskedcenter: afsendere med ulæste beskeder fremhæves */
.msg-item.unread .msg-item-top strong { font-weight: 700; }
.msg-item.unread .msg-item-preview { color: #1a1a1a; font-weight: 600; }
.msg-item.unread { background: #f6f6f6; }

/* Hjælp-link i topbaren og hjælpeartikler */
.app-topbar-help { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; font-weight: 600; font-size: .9rem; text-decoration: none; color: inherit; opacity: .7; }
.app-topbar-help:hover { opacity: 1; }
.help-article h2, .help-article h3 { margin-top: 1.5rem; font-size: 1.15rem; }
.help-article h3 { font-size: 1rem; }
.help-article li { margin-bottom: .25rem; }