/*
 * Hypnose Administration — Frontend CSS v1.1.0
 * Design tokens fra DESIGN.md (Hypnose Odense NV)
 *
 * Fonte loadet af temaet: Playfair Display (headings) + DM Sans (body)
 * Alt her bruger inherit så temaets fonte automatisk slår igennem.
 */

/* =========================================================================
   Design tokens — matcher DESIGN.md præcist
   ========================================================================= */
:root {
    --ha-bg:           #F3F7F5;
    --ha-surface:      #FAFCFB;
    --ha-ink:          #1C3028;
    --ha-ink-mid:      #3D5448;
    --ha-ink-soft:     #6B7F74;
    --ha-accent:       #2C4A3E;
    --ha-accent-light: #7A9E8E;
    --ha-border:       #D4E2DA;
    --ha-sand:         #EAE3D6;
    --ha-radius:       2px;
    --ha-transition:   .16s ease;
}

/* =========================================================================
   Delt basis — begge shortcodes
   ========================================================================= */
.ha-booking-wrap,
.ha-portal-wrap {
    font-family: inherit;
    color: var(--ha-ink);
    line-height: 1.75;
}

/* Labels */
.ha-booking-wrap .ha-field label,
.ha-booking-wrap .ha-field > span {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ha-ink-mid);
    margin-bottom: 5px;
    letter-spacing: .01em;
}

.ha-muted-label { color: var(--ha-ink-soft); font-weight: 300; }
.ha-required    { color: #a05040; }

/* Felter */
.ha-booking-wrap .ha-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

/* Inputfelter, selects, textarea */
.ha-booking-wrap input[type="text"],
.ha-booking-wrap input[type="email"],
.ha-booking-wrap input[type="tel"],
.ha-booking-wrap input[type="date"],
.ha-booking-wrap select,
.ha-booking-wrap textarea {
    font-family:   inherit;
    font-size:     15px;
    font-weight:   300;
    color:         var(--ha-ink);
    background:    var(--ha-surface);
    border:        1px solid var(--ha-border);
    border-radius: var(--ha-radius);
    padding:       10px 13px;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color var(--ha-transition);
    appearance:    none;
    -webkit-appearance: none;
}

.ha-booking-wrap input::placeholder,
.ha-booking-wrap textarea::placeholder {
    color:      var(--ha-ink-soft);
    font-style: italic;
    font-weight: 300;
}

.ha-booking-wrap input:focus,
.ha-booking-wrap select:focus,
.ha-booking-wrap textarea:focus {
    outline:       none;
    border-color:  var(--ha-accent);
}

/* Select-pil */
.ha-booking-wrap select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%232C4A3E' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 13px center;
    padding-right:       36px;
    cursor:              pointer;
}

.ha-field-hint {
    font-size:   12.5px;
    color:       var(--ha-ink-soft);
    font-style:  italic;
    font-weight: 300;
    margin-top:  5px;
}

/* Grid */
.ha-form-row       { display: grid; gap: 16px; }
.ha-form-row--2    { grid-template-columns: 1fr 1fr; }

/* "Hurtigst mulig"-checkbox */
.ha-urgent-label {
    display:     flex;
    align-items: center;
    gap:         9px;
    font-size:   15px;
    font-weight: 300;
    color:       var(--ha-ink);
    cursor:      pointer;
}
.ha-urgent-label input[type="checkbox"] {
    width:   15px;
    height:  15px;
    accent-color: var(--ha-accent);
    flex-shrink: 0;
    cursor:  pointer;
}

/* Samtykke */
.ha-consent-box { margin-bottom: 20px; }
.ha-consent-label {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   13px;
    font-weight: 300;
    line-height: 1.6;
    color:       var(--ha-ink-soft);
    cursor:      pointer;
}
.ha-consent-label input[type="checkbox"] {
    margin-top:   2px;
    accent-color: var(--ha-accent);
    flex-shrink:  0;
    width: 14px; height: 14px;
}
.ha-consent-label a { color: var(--ha-accent); }

/* Knapper — DESIGN.md: solid accent, 2px radius, hvid tekst */
.ha-booking-wrap .ha-btn--primary,
.ha-portal-wrap  .ha-btn--primary {
    display:        inline-block;
    font-family:    inherit;
    font-size:      14px;
    font-weight:    500;
    letter-spacing: .03em;
    padding:        12px 28px;
    background:     var(--ha-accent);
    color:          #fff;
    border:         none;
    border-radius:  var(--ha-radius);
    cursor:         pointer;
    transition:     background var(--ha-transition);
    text-decoration: none;
}
.ha-booking-wrap .ha-btn--primary:hover,
.ha-portal-wrap  .ha-btn--primary:hover {
    background: var(--ha-ink);
}

/* Sekundær knap — transparent med kant */
.ha-portal-wrap .ha-btn--ghost {
    display:        inline-block;
    font-family:    inherit;
    font-size:      13px;
    font-weight:    500;
    padding:        8px 18px;
    background:     transparent;
    color:          var(--ha-accent);
    border:         1px solid var(--ha-accent);
    border-radius:  var(--ha-radius);
    cursor:         pointer;
    transition:     all var(--ha-transition);
    text-decoration: none;
}
.ha-portal-wrap .ha-btn--ghost:hover {
    background: var(--ha-accent);
    color: #fff;
}

/* Fejlbesked */
.ha-error-msg {
    padding:        10px 14px;
    margin-bottom:  14px;
    font-size:      13.5px;
    font-weight:    300;
    color:          #6b2a20;
    border-left:    3px solid #a05040;
    background:     #fdf0ee;
}

/* Bekræftelse */
.ha-confirm-box { padding: 8px 0 24px; }
.ha-confirm-box p {
    font-size:   16px;
    font-weight: 300;
    color:       var(--ha-ink);
    line-height: 1.75;
}

/* =========================================================================
   [ha_portal] — klientportal
   Shortcoden renderer kun den dynamiske del.
   Alt redaktionelt (velkomst, instruktioner) redigeres i Gutenberg.
   ========================================================================= */
.ha-portal-wrap { max-width: 100%; }

/* Wrapperen må aldrig klippes af temaets padding — sæt til fuld bredde */
.ha-portal-wrap {
    width:      100%;
    box-sizing: border-box;
}

/* Log ud-linje øverst */
.ha-portal-topbar {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   24px;
}

/* Afventer-besked */
.ha-portal-pending {
    padding:       20px 24px;
    background:    var(--ha-sand);
    border-left:   3px solid var(--ha-accent-light);
    border-radius: var(--ha-radius);
    font-size:     15px;
    font-weight:   300;
    color:         var(--ha-ink-mid);
}

/* Login-formular — stylet som wp_login_form */
.ha-portal-wrap .login { max-width: 400px; }
.ha-portal-wrap .login label {
    display:     block;
    font-size:   13px;
    font-weight: 500;
    color:       var(--ha-ink-mid);
    margin-bottom: 5px;
    margin-top:  14px;
}
.ha-portal-wrap .login input[type="text"],
.ha-portal-wrap .login input[type="password"] {
    font-family:   inherit;
    font-size:     15px;
    font-weight:   300;
    color:         var(--ha-ink);
    background:    var(--ha-surface);
    border:        1px solid var(--ha-border);
    border-radius: var(--ha-radius);
    padding:       10px 13px;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color var(--ha-transition);
}
.ha-portal-wrap .login input:focus {
    outline:      none;
    border-color: var(--ha-accent);
}
.ha-portal-wrap .login input[type="submit"] {
    font-family:    inherit;
    font-size:      14px;
    font-weight:    500;
    padding:        12px 28px;
    background:     var(--ha-accent);
    color:          #fff;
    border:         none;
    border-radius:  var(--ha-radius);
    cursor:         pointer;
    margin-top:     18px;
    transition:     background var(--ha-transition);
    width:          100%;
}
.ha-portal-wrap .login input[type="submit"]:hover { background: var(--ha-ink); }

.ha-portal-wrap .login .forgetmenot { margin-top: 10px; font-size: 13px; color: var(--ha-ink-soft); }
.ha-portal-wrap p.ha-login-lost { margin-top: 12px; font-size: 13px; }
.ha-portal-wrap p.ha-login-lost a { color: var(--ha-accent); }

/* Journalnotater
   Høj specificitet (!important kun på reset-regler) for at slå
   temaets generiske artikel/kort-stilarter ud */
.ha-portal-col { min-width: 0; }

.ha-portal-journals { width: 100%; min-width: 0; }

.ha-portal-journal,
.ha-portal-journals .ha-portal-journal {
    /* Nulstil alt hvad temaet måtte sætte på indholdselementer */
    background:    transparent !important;
    box-shadow:    none        !important;
    border:        none        !important;
    border-radius: 0           !important;
    padding:       0           !important;
    margin:        0           !important;

    /* Vores egne regler */
    border-top:    1px solid var(--ha-border) !important;
    padding-top:   22px !important;
    padding-bottom:22px !important;
    min-width:     0;
    width:         100%;
    box-sizing:    border-box;
}
.ha-portal-journals .ha-portal-journal:first-child {
    border-top:  none  !important;
    padding-top: 0     !important;
}
.ha-portal-journals .ha-portal-journal:last-child {
    padding-bottom: 0  !important;
}

.ha-portal-journal-head {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  8px;
    flex-wrap:      wrap;
    width:          100%;
}
.ha-portal-journal-head strong {
    font-size:   16px;
    font-weight: 400;
    color:       var(--ha-ink);
    font-family: inherit;
    flex:        1;              /* Titel fylder mellemrummet */
    min-width:   0;
}
.ha-portal-journal-head small {
    font-size:   12.5px;
    color:       var(--ha-ink-soft);
    font-weight: 300;
    white-space: nowrap;
    flex-shrink: 0;
}
.ha-journal-cat {
    font-size:      11px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--ha-accent);
    background:     transparent;
    border:         1px solid var(--ha-border) !important;
    padding:        2px 8px !important;
    border-radius:  var(--ha-radius) !important;
    white-space:    nowrap;
    flex-shrink:    0;
}
.ha-portal-journal-body {
    font-size:   15px;
    font-weight: 300;
    line-height: 1.75;
    color:       var(--ha-ink-mid);
    width:       100%;
}

/* Ingen notater / sessioner endnu */
.ha-portal-empty {
    font-size:   15px;
    font-weight: 300;
    color:       var(--ha-ink-soft);
    font-style:  italic;
}

/* -------------------------------------------------------------------------
   Fane-navigation
   ------------------------------------------------------------------------- */
.ha-portal-tabs { width: 100%; margin-top: 8px; }

.ha-tab-nav {
    display:       flex;
    gap:           0;
    border-bottom: 2px solid var(--ha-border);
    margin-bottom: 28px;
}

.ha-tab-btn {
    font-family:    inherit;
    font-size:      15px;
    font-weight:    400;
    color:          var(--ha-ink-soft);
    background:     transparent;
    border:         none;
    padding:        10px 24px 12px;
    cursor:         pointer;
    position:       relative;
    transition:     color var(--ha-transition);
    letter-spacing: .01em;
}
.ha-tab-btn::after {
    content:    '';
    position:   absolute;
    bottom:     -2px; left: 0; right: 0;
    height:     2px;
    background: transparent;
    transition: background var(--ha-transition);
}
.ha-tab-btn:hover { color: var(--ha-ink); }
.ha-tab-btn--active {
    color: var(--ha-ink);
    font-weight: 500;
}
.ha-tab-btn--active::after { background: var(--ha-accent); }

.ha-tab-panel { width: 100%; }
.ha-tab-panel--hidden { display: none; }

/* -------------------------------------------------------------------------
   Sessioner (højre kolonne)
   ------------------------------------------------------------------------- */
.ha-portal-sessions { display: flex; flex-direction: column; }

.ha-portal-session {
    padding:    16px 0;
    border-bottom: 1px solid var(--ha-border);
}
.ha-portal-session:first-child { padding-top: 0; }
.ha-portal-session:last-child  { border-bottom: none; }

.ha-portal-session-head {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   4px;
    gap:             8px;
}

.ha-session-date {
    font-size:   14px;
    font-weight: 400;
    color:       var(--ha-ink);
}

.ha-portal-session-body {
    font-size:   13.5px;
    font-weight: 300;
    color:       var(--ha-ink-soft);
}

/* Status-badges — samme form som journal-kategori, men farvedifferentieret */
.ha-session-status {
    font-size:      11px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding:        2px 8px;
    border-radius:  var(--ha-radius);
    border:         1px solid;
    white-space:    nowrap;
    flex-shrink:    0;
}
.ha-session-status--confirmed {
    color:            var(--ha-accent);
    border-color:     var(--ha-border);
    background:       transparent;
}
.ha-session-status--completed {
    color:        var(--ha-ink-mid);
    border-color: var(--ha-border);
    background:   var(--ha-bg);
}
.ha-session-status--pending {
    color:        var(--ha-ink-soft);
    border-color: var(--ha-border);
    background:   transparent;
    font-style:   italic;
}

.ha-portal-session-note {
    margin-top:  20px;
    font-size:   12.5px;
    font-weight: 300;
    color:       var(--ha-ink-soft);
    line-height: 1.6;
}
.ha-portal-session-note a { color: var(--ha-accent); }

/* =========================================================================
   Cookie-banner — matcher temaets mørkegrønne stil
   ========================================================================= */
#ha-cookie-banner {
    position:   fixed;
    bottom:     0; left: 0; right: 0;
    background: var(--ha-ink);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -4px 24px rgba(0,0,0,.18);
    z-index:    999999;
}
.ha-cookie-inner {
    max-width:  1100px;
    margin:     0 auto;
    padding:    16px 28px;
    display:    flex;
    align-items: center;
    gap:        24px;
    flex-wrap:  wrap;
}
.ha-cookie-header { flex: 1; min-width: 260px; }
.ha-cookie-header h2 {
    margin:     0 0 3px;
    font-size:  14px;
    font-weight: 500;
    color:      #fff;
    font-family: inherit;
    font-style: normal;
}
.ha-cookie-header p {
    margin:     0;
    font-size:  12.5px;
    font-weight: 300;
    line-height: 1.55;
    color:      rgba(255,255,255,.72);
}
.ha-cookie-header a { color: var(--ha-accent-light); text-decoration: underline; }

.ha-cookie-categories { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ha-cookie-cat {
    display:    flex;
    align-items: center;
    gap:        8px;
    padding:    6px 12px;
    border:     1px solid rgba(255,255,255,.18);
    border-radius: var(--ha-radius);
    cursor:     pointer;
    background: rgba(255,255,255,.05);
    transition: border-color .15s, background .15s;
}
.ha-cookie-cat:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.1); }
.ha-cookie-cat input[type="checkbox"] { display: none; }
.ha-cookie-cat-info strong { display: block; font-size: 12px; font-weight: 500; color: #fff; }
.ha-cookie-cat-info span   { display: none; }

.ha-toggle {
    position:      relative;
    width:         34px; height: 20px;
    flex-shrink:   0;
    background:    rgba(255,255,255,.22);
    border-radius: 10px;
    transition:    background .2s;
    cursor:        pointer;
}
.ha-toggle::after {
    content:       '';
    position:      absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background:    #fff;
    border-radius: 50%;
    transition:    transform .2s;
    box-shadow:    0 1px 3px rgba(0,0,0,.25);
}
.ha-cookie-cat:has(input:checked) .ha-toggle { background: var(--ha-accent-light); }
.ha-cookie-cat:has(input:checked) .ha-toggle::after { transform: translateX(14px); }
.ha-toggle--locked { background: var(--ha-accent-light); opacity: .65; cursor: not-allowed; }
.ha-toggle--locked::after { transform: translateX(14px); }

.ha-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#ha-cookie-banner .ha-btn {
    font-family:    inherit;
    font-size:      12.5px;
    font-weight:    500;
    padding:        8px 18px;
    border-radius:  var(--ha-radius);
    border:         none;
    cursor:         pointer;
    transition:     background .15s, color .15s;
    white-space:    nowrap;
    letter-spacing: .02em;
}
#ha-cookie-accept-all { background: #fff; color: var(--ha-ink); }
#ha-cookie-accept-all:hover { background: var(--ha-bg); }
#ha-cookie-accept-selected {
    background: transparent;
    color:      rgba(255,255,255,.85);
    border:     1px solid rgba(255,255,255,.32);
}
#ha-cookie-accept-selected:hover { background: rgba(255,255,255,.1); }
#ha-cookie-reject-all {
    background: transparent;
    color:      rgba(255,255,255,.5);
    border:     none;
    font-size:  12px;
    padding:    8px 10px;
}
#ha-cookie-reject-all:hover { color: rgba(255,255,255,.85); }
.ha-cookie-footnote { display: none; }

#ha-cookie-reopen {
    position:      fixed;
    bottom:        16px; left: 16px;
    width: 40px; height: 40px;
    border-radius: var(--ha-radius);
    background:    var(--ha-ink);
    border:        1px solid rgba(255,255,255,.18);
    box-shadow:    0 2px 10px rgba(0,0,0,.2);
    font-size:     18px;
    cursor:        pointer;
    z-index:       999998;
    transition:    background .15s;
    color:         #fff;
}
#ha-cookie-reopen:hover { background: var(--ha-accent); }

/* =========================================================================
   Responsivt
   ========================================================================= */
@media (max-width: 600px) {
    .ha-form-row--2             { grid-template-columns: 1fr; }
    .ha-cookie-actions          { flex-direction: column; }
    .ha-portal-journal-head     { flex-direction: column; gap: 4px; }
    .ha-portal-journal-head small { margin-left: 0; }
    .ha-portal-session-head     { flex-wrap: wrap; }
    .ha-tab-btn                 { padding: 10px 16px 12px; font-size: 14px; }
}