/* ============================================================
   SiLiGo 2.0 – Shared Stylesheet
   ============================================================ */

/* ── Titillium Web (self-hosted, latin subset) ── */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/titillium-300.1f99eee4cc0c.woff2") format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/titillium-400.ecc0a99f1958.woff2") format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/titillium-600.ebf116db5193.woff2") format('woff2');
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/titillium-700.8bdf6f4d57ea.woff2") format('woff2');
}

/* ── Design Tokens ── */
:root {
  /* Surface */
  --surface-base:       #ffffff;   /* card / modal backgrounds */
  --surface-page:       #fafaf9;   /* page background */
  --surface-raised:     #f5f5f4;   /* inputs, hover states, pills */
  /* Border */
  --border-subtle:      #f5f5f4;   /* hairline separators */
  --border-default:     #e7e5e4;   /* standard borders */
  --border-medium:      #d6d3d1;   /* stronger borders, dividers */
  /* Text */
  --text-1:  #1c1917;   /* primary — headings, labels */
  --text-2:  #57534e;   /* secondary — body, descriptions */
  --text-3:  #78716c;   /* tertiary — metadata, placeholders */
  --text-4:  #a8a29e;   /* muted — hints, timestamps */
  /* Brand (green) */
  --brand:              #3f7a2a;   /* primary green */
  --brand-mid:          #8cc14c;   /* accent green — focus rings, badges */
  --brand-bright:       #9fd85a;   /* bright green — dark mode accent */
  --brand-bg:           #eef6e3;   /* green tint — active states */
  --brand-bg-subtle:    #f7faee;   /* very faint tint */
  --brand-dark:         #3a6222;   /* deep green — hover states */
  /* CTA (orange — no dark mode variant, always orange) */
  --cta:        #f59e2b;
  --cta-dark:   #ea8f1e;
  --cta-mid:    #f5a63b;
  /* Fixed brand green — no dark mode variant, always the muted forest green */
  --brand-fixed: #3f7a2a;
  /* State */
  --error:        #b91c1c;
  --error-dark:   #dc2626;
  --error-bg:     #fef2f2;
  --error-border: #fca5a5;
  --warn-bg:      #fffbeb;
  --warn-text:    #92400e;
  --amber:        #f59e0b;
  /* Font-size scale */
  --fs-tiny: 12px;
  --fs-caps: 14px;
  --fs-xs:   14px;
  --fs-sm:   15px;
  --fs-base: 16px;
  --fs-body: 17px;
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
    font-family: 'Titillium Web', Arial, sans-serif;
    font-size: var(--fs-body);
    font-weight: 400;
    background: var(--surface-page);
    color: var(--text-2);
    line-height: 1.6;
}

.container { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }

/* ── Modern page layout ── */
.bk-outer { margin:-2rem auto 0; padding:0 2rem 4rem; position:relative; max-width:1200px; }
@media (max-width:640px) { .bk-outer { padding:0 1rem 3rem; } }
/* The -2rem above lets a white card overlap the banner. Where the first child
   is a bare heading instead (vehicle page with no own cars), that heading would
   land inside the green banner — start below it instead. */
.bk-outer.flush { margin-top:0; padding-top:1.75rem; }
.bk-card { background:var(--surface-base); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 32px rgba(0,0,0,0.06); outline:1px solid rgba(231,229,228,0.8); overflow:hidden; }
.bk-card h2 { color:var(--brand); }

/* ── Cards ── */
.card { background: var(--surface-base); border-radius: 10px; padding: 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.07); margin-bottom: 1.5rem; }
.card h2 { color: var(--brand); font-weight: 700; margin-bottom: 1rem; font-size: 1.3rem; }

/* ── Forms ── */
label { display: block; margin-top: 1rem; margin-bottom: 0.3rem; font-weight: 600; color: var(--text-2); font-size: var(--fs-body); }
input[type=text], input[type=password], input[type=email],
input[type=date], input[type=time], input[type=number],
select, textarea {
    width: 100%; padding: 0.6rem 0.8rem;
    border: 1.5px solid #d0d0d0; border-radius: 6px;
    font-size: var(--fs-body); font-family: inherit; color: var(--text-2);
    background: var(--surface-base);
    transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-mid); }
/* Form controls do not inherit the page font — browsers substitute their own UI
   font. The rule above enumerates types, so `type=search` slipped through and
   the help page's search box rendered in Arial. Catch every control here. */
input, select, textarea, button { font-family: inherit; }

/* ── Button system ── */
/* Base: cf-btn [primary|green|danger|ghost|outline-green|outline-red] [sm|lg] [block] */
.cf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem; height: 40px; padding: 0 1.1rem; border-radius: 10px;
    font-size: var(--fs-base); font-weight: 700; font-family: inherit;
    border: none; cursor: pointer; text-decoration: none;
    white-space: nowrap; margin: 0; flex-shrink: 0;
    transition: filter 0.15s, background 0.12s;
    box-sizing: border-box;
}
.cf-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none !important; }

/* Sizes */
.cf-btn.sm { height: 32px; padding: 0 10px; border-radius: 8px; font-size: var(--fs-sm); }
.cf-btn.lg { height: 44px; padding: 0 1.5rem; }
.cf-btn.block { display: flex; width: 100%; }

/* Variants */
.cf-btn.primary { background: linear-gradient(to bottom, var(--cta-mid), var(--cta-dark)); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.cf-btn.primary:hover { filter: brightness(1.06); }
.cf-btn.green   { background: linear-gradient(to bottom, #4a8a32, var(--brand-fixed)); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.cf-btn.green:hover   { filter: brightness(1.06); }
.cf-btn.danger  { background: linear-gradient(to bottom, var(--error-dark), var(--error-dark)); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.cf-btn.danger:hover  { filter: brightness(1.08); }
.cf-btn.ghost   { background: var(--surface-base); outline: 1px solid var(--border-medium); color: var(--text-2); }
.cf-btn.ghost:hover   { background: var(--surface-raised); }
.cf-btn.outline-green { background: var(--surface-base); outline: 1px solid var(--brand-mid); color: var(--brand); }
.cf-btn.outline-green:hover { background: var(--brand-bg); }
.cf-btn.outline-red   { background: var(--surface-base); border: 1px solid var(--error-border); color: var(--error); }
.cf-btn.outline-red:hover   { background: var(--error-bg); }

/* ── Modal backdrops & cards ── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30,40,20,0.45);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-card {
  background: var(--surface-base);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(30,40,20,0.12), 0 4px 12px rgba(30,40,20,0.06);
  outline: 1px solid rgba(231,229,228,0.7);
  width: 100%;
}

/* ── Test-phase banner (base.html, TEST_PHASE on) ── */
.test-phase-banner { background:var(--warn-bg); color:var(--warn-text); border-bottom:1px solid rgba(251,191,36,0.5); padding:0.5rem 1rem; text-align:center; font-size:var(--fs-sm); line-height:1.4; }
.test-phase-banner a { color:inherit; font-weight:700; text-decoration:underline; }

/* ── Alert boxes ── */
/* Usage: <div class="al al-warn">  or  al-error / al-ok / al-info / al-neutral */
.al { border-radius: 10px; padding: 0.75rem 0.875rem; font-size: var(--fs-base); line-height: 1.5; }
.al-warn    { background: var(--warn-bg); outline: 1px solid rgba(251,191,36,0.5);  color: var(--warn-text); }
.al-error   { background: var(--error-bg); outline: 1px solid rgba(252,165,165,0.5); color: var(--error); }
.al-ok      { background: var(--brand-bg); outline: 1px solid #cfe6a9;               color: #2d5a1c; }
.al-info    { background: #f0f9ff; outline: 1px solid rgba(125,211,252,0.5); color: #0c4a6e; }
.al-neutral { background: rgba(245,245,244,0.6); outline: 1px solid var(--border-default); color: var(--text-2); font-size: var(--fs-sm); }

/* ── Errors & Messages ── */
.error { color: var(--error); font-size: var(--fs-base); margin-top: 0.2rem; }

/* ── Flash toasts ── */
#flash-container, #flash-container-ajax { margin:0 auto 0.75rem; max-width:1200px; padding:0 2rem; display:flex; flex-direction:column; gap:0.4rem; }
@media (max-width:640px) { #flash-container, #flash-container-ajax { padding:0 1rem; } }
.container > #flash-container, .container > #flash-container-ajax { max-width:none; padding:0; }

/* A banner page pulls its first card 2rem up into the banner (.bk-outer). A
   flash message sits between the two, so the card was laid over it and clipped
   it. Let the message take the overlap instead and start the card normally —
   the layered look survives and nothing covers the text. */
#flash-container, #flash-container-ajax:not(:empty) { margin-top:-2rem; position:relative; z-index:2; }
#flash-container + #flash-container-ajax { margin-top:0; }
#flash-container ~ .bk-outer,
#flash-container-ajax:not(:empty) ~ .bk-outer { margin-top:0; }
.flash { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; border-radius:10px; font-size:var(--fs-base); font-weight:600; border-left:4px solid; box-shadow:0 1px 4px rgba(0,0,0,0.07); }
.flash span { flex:1; }
.flash-close { background:none; border:none; cursor:pointer; padding:0 0 0 0.5rem; color:inherit; opacity:0.4; font-size:1.3rem; line-height:1; font-family:inherit; flex-shrink:0; }
.flash-close:hover { opacity:0.8; }
.flash-success { background:var(--brand-bg);  color:var(--brand);     border-left-color:var(--brand-mid); }
.flash-error   { background:var(--error-bg);  color:var(--error);     border-left-color:var(--error); }
.flash-warning { background:var(--warn-bg);   color:var(--warn-text); border-left-color:var(--amber); }
.flash-info    { background:var(--brand-bg);  color:var(--brand);     border-left-color:var(--brand-mid); }

/* ── Utility ── */
.text-muted { color: var(--text-4); font-size: var(--fs-base); }

a { color: var(--brand); }
a:hover { color: var(--cta); }

/* ── Password toggle ── */
.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 3rem; }
.toggle-pw {
    position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: var(--text-4);
    padding: 0; margin: 0; line-height: 1; display: flex; align-items: center;
}
.toggle-pw:hover { color: var(--brand); }
.toggle-pw svg { width: 20px; height: 20px; }

/* ── Tabs ── */
.scope-tabs {
    display:flex; gap:0; border-bottom:1px solid var(--border-default);
    overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:0 0.5rem; background:var(--surface-base);
}
.scope-tabs::-webkit-scrollbar { display:none; }
.scope-tab {
    position:relative; padding:0.875rem 1rem; font-size:var(--fs-base); font-weight:600;
    color:var(--text-3); cursor:pointer; border-bottom:2px solid transparent;
    margin-bottom:-1px; text-decoration:none; white-space:nowrap; transition:color 0.15s;
}
.scope-tab:hover { color:var(--text-1); }
.scope-tab.active { color:var(--brand); border-bottom-color:var(--brand); }
/* Phone replacement for .scope-tabs (templates/bookings/_scope_nav.html).
   Styled like the burger drawer so both menus read as one family. */
.scope-menu { display:none; position:relative; margin:0.75rem 1rem; }
.scope-menu-current { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.65rem 0.875rem; border:1px solid var(--border-default); border-radius:10px; background:var(--surface-base); color:var(--text-1); font-size:var(--fs-base); font-weight:600; cursor:pointer; user-select:none; }
.scope-menu-current::-webkit-details-marker { display:none; }
.scope-menu-current svg { color:var(--text-3); flex-shrink:0; transition:transform 0.15s; }
.scope-menu[open] .scope-menu-current { border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.2); }
.scope-menu[open] .scope-menu-current svg { transform:rotate(180deg); }
.scope-menu-current:focus-visible { outline:2px solid var(--brand-mid); outline-offset:2px; }
.scope-menu-list { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; display:flex; flex-direction:column; padding:6px; background:var(--surface-base); border:1px solid var(--border-default); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.12); }
.scope-menu-link { padding:12px; border-radius:8px; color:var(--text-2); font-weight:600; font-size:var(--fs-base); text-decoration:none; }
.scope-menu-link:hover { background:var(--surface-raised); color:var(--text-1); }
.scope-menu-link.active { background:var(--brand-bg); color:var(--brand); }

/* ── User / car links & modals ── */
.user-link { color:inherit; cursor:pointer; border-bottom:1px dotted var(--text-4); transition:color 0.12s; }
.user-link:hover { color:var(--brand); border-bottom-color:var(--brand); }
/* Names and avatars carry onclick on a span or div, so the keyboard needs both
   a tab stop (set in base.html) and a visible ring once it lands there. */
.user-link:focus-visible, .avatar-clickable:focus-visible { outline:2px solid var(--brand-mid); outline-offset:2px; border-radius:4px; }
/* A photo enlarges, an initials avatar opens a card — hence two cursors. */
.avatar-clickable { cursor:pointer; transition:filter 0.12s, box-shadow 0.12s; }
img.avatar-clickable { cursor:zoom-in; }
.avatar-clickable:hover { filter:brightness(1.06); box-shadow:0 0 0 3px var(--brand-bg); }
.car-link  { color:inherit; cursor:pointer; border-bottom:1px dotted var(--text-4); transition:color 0.12s; }
.car-link:hover  { color:var(--brand); border-bottom-color:var(--brand); }
.car-card-modal { background:var(--surface-base); border-radius:16px; overflow:hidden; max-width:480px; width:90%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(30,40,20,0.12),0 4px 12px rgba(30,40,20,0.06); outline:1px solid rgba(231,229,228,0.7); }
.car-card-badge { display:inline-flex; align-items:center; gap:4px; padding:0 10px; height:22px; border-radius:6px; font-size:var(--fs-sm); font-weight:600; outline:1px solid var(--border-default); background:var(--surface-raised); color:var(--text-2); }
.car-size-tag { flex-shrink:0; background:var(--brand-bg); color:var(--brand); padding:2px 10px; border-radius:6px; font-size:var(--fs-caps); font-weight:700; outline:1px solid rgba(140,193,76,0.4); }
.cc-title    { color:var(--text-1); }
.cc-subtitle { color:var(--text-3); }
.cc-desc     { color:var(--text-2); }
.cc-label    { font-size:var(--fs-caps); color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
/* ── Per-car terms inside a booking modal (bookings/_terms_box.html) ── */
.bk-terms { margin-bottom:0.75rem; border:1px solid var(--border-default); border-radius:10px; background:var(--surface-raised); overflow:hidden; }
.bk-terms-head { display:flex; align-items:center; gap:0.5rem; width:100%; padding:0.6rem 0.75rem; border:none; background:none; cursor:pointer; font-family:inherit; text-align:left; color:var(--text-1); }
.bk-terms-head:hover { background:var(--border-subtle); }
.bk-terms-head:focus-visible { outline:2px solid var(--brand-mid); outline-offset:-2px; }
.bk-terms-title { font-size:var(--fs-sm); font-weight:700; }
.bk-terms-hint { margin-left:auto; font-size:var(--fs-tiny); color:var(--text-3); font-weight:600; }
/* The heading alone already wraps to two lines on a narrow phone; the hint
   beside it then has nowhere to sit. The chevron still says open or closed. */
@media (max-width:480px) { .bk-terms-hint { display:none; } }
.bk-terms-chev { color:var(--text-3); flex-shrink:0; transition:transform 0.15s; }
.bk-terms.is-open .bk-terms-chev { transform:rotate(90deg); }
.bk-terms-body { display:none; padding:0 0.75rem 0.7rem; }
.bk-terms.is-open .bk-terms-body { display:block; }
/* Plain text, so the breaks are the only structure. Not height-bounded: a
   scroll box inside the already scrolling modal was two scrollbars for one
   text. The long manuals (cargo bike, tandem) are kept short by the box
   collapsing after the first booking instead. */
.bk-terms-text.is-empty { color:var(--text-3); font-style:italic; }
.bk-terms-link { display:inline-block; margin:-0.4rem 0 0.75rem; font-size:var(--fs-tiny); color:var(--brand); font-weight:600; text-decoration:none; }
.bk-terms-link:hover { text-decoration:underline; }
.bk-terms-text { white-space:pre-wrap; font-size:var(--fs-sm); line-height:1.55; color:var(--text-2); background:var(--surface-base); border:1px solid var(--border-default); border-radius:8px; padding:0.6rem 0.7rem; }

/* Imported from the old system as plain text, so the line breaks carry the
   structure. No height bound of its own: the card modal already scrolls, and
   a second scroll box inside it was two scrollbars for one text (as in the
   booking modals, .bk-terms-text). */
.cc-terms { white-space:pre-wrap; font-size:var(--fs-sm); line-height:1.55; color:var(--text-2); background:var(--surface-raised); border:1px solid var(--border-default); border-radius:10px; padding:0.75rem 0.875rem; }
.cc-terms-link { display:inline-block; margin-top:0.4rem; font-size:var(--fs-tiny); color:var(--brand); font-weight:600; text-decoration:none; }
.cc-terms-link:hover { text-decoration:underline; }
.cc-value    { font-weight:600; color:var(--text-1); font-size:var(--fs-sm); }
.cc-inactive { margin-bottom:0.875rem; padding:0.65rem 0.875rem; background:var(--warn-bg); border-radius:10px; outline:1px solid rgba(251,191,36,0.5); font-size:var(--fs-sm); color:var(--warn-text); line-height:1.5; }
.cc-info-grid { border-top:1px solid var(--surface-raised); padding-top:1rem; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.cc-photo-placeholder { width:100%; height:110px; background:linear-gradient(135deg,var(--brand-bg),#d5ecc2); display:grid; place-items:center; color:var(--brand-mid); }

/* ── Navigation ── */
#siligo-nav-header {
    background: var(--surface-base); border-bottom: 1px solid rgba(214,211,209,0.8);
    position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
#siligo-nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 64px;
    display: flex; align-items: center; justify-content: space-between;
}
.siligo-nav-left { display: flex; align-items: center; gap: 2.5rem; }
.siligo-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; user-select: none; flex-shrink: 0; }
.siligo-logo-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-fixed); display: grid; place-items: center; flex-shrink: 0; }
.siligo-logo-text { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); line-height: 1; }
.siligo-logo-text .go { color: var(--brand-mid); }
/* Version marker: the name stays "SiLiGo", the 2 says which of the two
   systems you are looking at. On the baseline, not raised -- a superscript 2
   reads as "squared", and telling the two systems apart is the whole point. */
.siligo-logo-text .ver, .login-hero-logo-text .ver { font-size:0.85em; font-weight:700; margin-left:1px; letter-spacing:0; }

.siligo-nav-links { display: flex; align-items: center; gap: 4px; }
.siligo-nav-links a { padding: 8px 12px; border-radius: 8px; font-size: var(--fs-base); font-weight: 600; color: var(--text-1); text-decoration: none; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.siligo-nav-links a:hover { background: var(--border-subtle); color: var(--text-1); }
.siligo-nav-links a.active { background: var(--brand-bg); color: var(--brand); }
.siligo-nav-right { display: flex; align-items: center; gap: 8px; }
.siligo-nav-sep { width: 1px; height: 24px; background: var(--border-default); }
.siligo-user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 8px; cursor: pointer; transition: background 0.15s; text-decoration: none; }
.siligo-user-chip:hover { background: var(--surface-raised); }
.siligo-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-mid), var(--brand)); display: grid; place-items: center; color: white; font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; object-fit: cover; }
.siligo-avatar-name { font-size: var(--fs-base); font-weight: 500; color: var(--text-2); }
.siligo-logout-link { padding: 8px 12px; border-radius: 8px; font-size: var(--fs-base); font-weight: 600; color: var(--text-2); text-decoration: none; transition: background 0.15s; }
.siligo-logout-link:hover { background: var(--surface-raised); color: var(--text-1); }
#siligo-hamburger { display: none; width: 36px; height: 36px; border-radius: 8px; background: none; border: none; cursor: pointer; color: var(--text-2); align-items: center; justify-content: center; margin-top: 0; padding: 0; transition: background 0.15s; }
#siligo-hamburger:hover { background: var(--surface-raised); }
#siligo-mobile-drawer { display: none; border-top: 1px solid var(--surface-raised); padding: 8px; background: var(--surface-base); }
#siligo-mobile-drawer.open { display: block; }
.siligo-mobile-link { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 8px; text-decoration: none; color: var(--text-2); font-weight: 600; font-size: var(--fs-base); transition: background 0.15s; }
.siligo-mobile-link:hover { background: var(--surface-raised); color: var(--text-1); }
.siligo-mobile-link.active { background: var(--brand-bg); color: var(--brand); }
.siligo-mobile-user { margin-top: 8px; padding: 12px; border-top: 1px solid var(--surface-raised); display: flex; align-items: center; justify-content: space-between; }
.siligo-mobile-user-left { display: flex; align-items: center; gap: 10px; }
.siligo-mobile-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-mid), var(--brand)); display: grid; place-items: center; color: white; font-size: var(--fs-xs); font-weight: 700; flex-shrink: 0; object-fit: cover; }
.siligo-mobile-username { font-size: var(--fs-base); font-weight: 600; color: var(--text-1); }
.siligo-mobile-role { font-size: var(--fs-sm); color: var(--text-3); }
.siligo-nav-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--cta-dark); color: white; font-size: var(--fs-tiny); font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 1; }

/* The full bar (five links, avatar, name, Abmelden) needs about 900px; below
   that it ran off the right edge and the whole page scrolled sideways. So the
   hamburger takes over earlier than the rest of the mobile layout. */
@media (max-width: 960px) {
    .siligo-nav-links  { display: none !important; }
    .siligo-avatar-name { display: none !important; }
    #siligo-hamburger  { display: flex !important; }
    .siligo-user-chip  { display: none !important; }
    .siligo-nav-sep    { display: none !important; }
    .siligo-logout-link { display: none !important; }
}
.siligo-avatar-name { white-space: nowrap; }

@media (max-width: 768px) {
    .container { padding: 0 1rem; }
    .card { padding: 1.25rem; }
    .scope-tabs { display: none !important; }
    .scope-menu { display:block; }
}

/* ============================================================
   Car form stepper layout
   ============================================================ */
.cf-stepper-outer { max-width:1100px; }
.cf-stepper-grid { display:grid; grid-template-columns:260px minmax(0,1fr); gap:1.5rem; align-items:start; }
/* minmax(0,…), not 1fr: a 1fr track never shrinks below its widest content, and the iCal feed row pushed the settings page past a phone screen */
@media (max-width:900px) { .cf-stepper-grid { grid-template-columns:minmax(0,1fr); } }
.cf-stepper-sidebar { position:sticky; top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
@media (max-width:900px) { .cf-stepper-sidebar { display:none; } }
.cf-stepper-card { background:var(--surface-base); border-radius:16px; outline:1px solid var(--surface-raised); box-shadow:0 1px 2px rgba(0,0,0,0.04); padding:1rem; }
.cf-stepper-label { font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); margin-bottom:0.5rem; padding:0 0.25rem; }
.cf-stepper-list { list-style:none; }
.cf-stepper-item { position:relative; display:flex; align-items:flex-start; gap:0.75rem; padding:0.625rem 0.75rem; border-radius:10px; cursor:pointer; transition:background 0.12s; text-decoration:none; color:inherit; }
.cf-stepper-item.active { background:var(--brand-bg); }
.cf-stepper-item:hover:not(.active) { background:var(--surface-raised); }
.cf-stepper-dot { width:9px; height:9px; margin:7px 0 0 9px; border-radius:50%; flex-shrink:0; transition:background 0.15s; }
.cf-stepper-item.active .cf-stepper-dot { background:var(--brand); }
.cf-stepper-item:not(.active) .cf-stepper-dot { background:var(--border-medium); }
.cf-stepper-text { flex:1; min-width:0; padding-top:2px; }
.cf-stepper-name { font-size:var(--fs-base); font-weight:700; line-height:1.2; transition:color 0.15s; }
.cf-stepper-item.active .cf-stepper-name { color:var(--brand); }
.cf-stepper-item:not(.active) .cf-stepper-name { color:var(--text-3); }
.cf-stepper-sub { font-size:var(--fs-sm); color:var(--text-3); margin-top:2px; line-height:1.3; }
.cf-stepper-item:not(.active) .st-danger-name { color: var(--error); }

/* ============================================================
   Shared form components (car_form + settings)
   ============================================================ */
.cf-section { padding:1.5rem 1.75rem; border-bottom:1px solid var(--surface-raised); }
.cf-section-head { font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); margin-bottom:1.25rem; }
.cf-step-header { margin-bottom:1.25rem; }
.cf-step-title { font-size:18px; font-weight:700; color:var(--brand); line-height:1.2; }
.cf-step-sub { font-size:var(--fs-sm); color:var(--text-3); margin-top:2px; }
.cf-fields { display:flex; flex-direction:column; gap:1rem; }
.cf-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:480px) { .cf-grid-2 { grid-template-columns:1fr; } }
.cf-narrow { max-width:200px; }
.cf-label { display:block; font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); margin-bottom:0.4rem; }
.cf-req   { color:var(--error); margin-left:2px; }
.cf-error { font-size:var(--fs-sm); color:var(--error); margin-top:0.3rem; }
.cf-check-row { display:flex; align-items:center; gap:0.6rem; cursor:pointer; }
.cf-check-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--brand); cursor:pointer; flex-shrink:0; }
.cf-check-row span { font-size:var(--fs-base); color:var(--text-1); font-weight:500; user-select:none; }
.cf-footer { padding:1.25rem 1.75rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; border-bottom:1px solid var(--surface-raised); }
.site-footer { border-top: 1px solid var(--border-default); }
.cf-req-note { font-size:var(--fs-sm); color:var(--text-3); margin-right:auto; }
@media (max-width:480px) {
    /* Note on its own line, the two buttons side by side and equally wide below it */
    .cf-req-note { margin-right:0; flex-basis:100%; }
    .cf-footer .cf-btn { flex:1; }
}
.cf-danger { border-top:2px solid #fee2e2 !important; }
.cf-danger .cf-section-head { color:#f87171; }

/* car_form inputs */
.cf-form input[type=text]:not(.user-search-input),
.cf-form input[type=number],
.cf-form select {
    display:block; width:100%; height:44px; padding:0 0.75rem;
    border-radius:10px; border:1px solid var(--border-default);
    font-size:var(--fs-base); color:var(--text-1); font-family:'Titillium Web', sans-serif;
    outline:none; background:var(--surface-base); appearance:none; -webkit-appearance:none;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.cf-form select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 0.75rem center; padding-right:2.5rem;
}
.cf-form textarea {
    display:block; width:100%; padding:0.6rem 0.75rem;
    border-radius:10px; border:1px solid var(--border-default);
    font-size:var(--fs-base); color:var(--text-1); font-family:'Titillium Web', sans-serif;
    outline:none; background:var(--surface-base); resize:vertical; line-height:1.5;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.cf-form input:focus, .cf-form select:focus, .cf-form textarea:focus {
    border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.15);
}

/* settings inputs */
.st-form input[type=text],
.st-form input[type=email],
.st-form input[type=tel],
.st-form input[type=date],
.st-form input[type=number],
.st-form select {
    display:block; width:100%; height:44px; padding:0 0.75rem;
    border-radius:10px; border:1px solid var(--border-default);
    font-size:var(--fs-base); color:var(--text-1); font-family:'Titillium Web', sans-serif;
    outline:none; background:var(--surface-base); appearance:none; -webkit-appearance:none;
    transition:border-color 0.15s, box-shadow 0.15s; box-sizing:border-box;
}
.st-form input:focus, .st-form select:focus { border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.15); }
.st-form input[type=file] { display:block; font-size:var(--fs-base); color:var(--text-2); }

/* ============================================================
   User search / suggestions (car_form + account_delete)
   ============================================================ */
.user-search-wrap { position:relative; }
.user-chips-container { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.5rem; }
.user-chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.6rem; border-radius:20px; border:2px solid var(--brand); background:var(--brand-bg); font-size:var(--fs-base); color:#2d5a1a; font-weight:600; }
.user-initials { width:22px; height:22px; border-radius:50%; background:var(--brand); color: white; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; flex-shrink:0; }
.chip-remove { background:none; border:none; cursor:pointer; color:var(--brand); font-size:1rem; padding:0; margin:0; line-height:1; }
.chip-remove:hover { color:var(--error); }
.user-search-input { width:100% !important; height:44px !important; padding:0 0.75rem !important; border-radius:10px !important; border:1px solid var(--border-default) !important; font-size:var(--fs-base) !important; color:var(--text-1) !important; font-family:'Titillium Web', sans-serif !important; outline:none !important; background:var(--surface-base) !important; box-sizing:border-box !important; }
.user-search-input:focus { border-color:var(--brand-mid) !important; box-shadow:0 0 0 3px rgba(140,193,76,0.15) !important; }
.user-suggestions { display:none; position:absolute; left:0; right:0; z-index:100; background:var(--surface-base); border:1.5px solid var(--brand-mid); border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1); list-style:none; margin:4px 0 0; padding:0.25rem 0; max-height:220px; overflow-y:auto; }
.user-suggestions li { padding:0.5rem 0.75rem; cursor:pointer; font-size:var(--fs-base); display:flex; align-items:center; gap:0.5rem; }
.user-suggestions li:hover { background:var(--brand-bg); }
.sug-initials { width:28px; height:28px; border-radius:50%; background:var(--brand); color: white; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; flex-shrink:0; }
.sug-email { font-size:var(--fs-sm); color:var(--text-3); }

/* ============================================================
   Auth form errors
   The rest of the old .auth-card block was removed once every auth
   page moved to the split-screen shell (users/auth_base.html).
   These two rules are still used there.
   ============================================================ */
.auth-error-box { background:var(--error-bg); border:1px solid var(--error-border); border-radius:8px; padding:0.55rem 0.75rem; font-size:var(--fs-sm); color:var(--error); margin-bottom:1rem; }
.auth-field-error { font-size:var(--fs-sm); color:var(--error); margin-top:0.3rem; }

/* ============================================================
   Split-screen auth (redesign)
   Shared by every page that extends templates/users/auth_base.html:
   login, register, security question, and the four password-reset
   steps. The .login-* prefix is historical — login came first.
   ============================================================ */
body:has(.login-split) { background: var(--surface-base); margin:0; }
.login-split { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; min-height:100dvh; }

/* Brand panel */
.login-hero {
    position:relative; overflow:hidden; color:white;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:3rem;
    background:linear-gradient(135deg, #3f7a2a 0%, #4a8a32 50%, #6ba93d 100%);
}
.login-hero-logo { display:flex; align-items:center; gap:0.5rem; }
.login-hero-logo-icon { width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,0.15); display:grid; place-items:center; }
.login-hero-logo-text { font-size:20px; font-weight:700; letter-spacing:-0.02em; color:white; }
.login-hero-logo-text span { color:#cfe9a8; }
.login-hero-copy { max-width:460px; }
.login-hero-eyebrow { font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:0.2em; font-weight:600; color:rgba(255,255,255,0.85); }
.login-hero-title { margin:1rem 0 0; font-size:40px; font-weight:600; line-height:1.15; letter-spacing:-0.02em; color:white; text-wrap:pretty; }
.login-hero-foot { display:flex; align-items:center; gap:1rem; font-size:var(--fs-tiny); color:rgba(255,255,255,0.6); }
.login-hero-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.3); }

/* Form panel */
.login-panel { background:var(--surface-base); display:grid; place-items:center; padding:3rem; }
.login-form-wrap { width:100%; max-width:400px; }
.login-title { margin:0; font-size:28px; font-weight:700; line-height:1.2; letter-spacing:-0.02em; color:var(--text-1); }
.login-sub { margin:0.25rem 0 0; font-size:var(--fs-caps); color:var(--text-3); }
.login-form { margin-top:1.75rem; display:flex; flex-direction:column; gap:1rem; }
.login-field { display:block; }
.login-label-row { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:0.375rem; }
.login-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.14em; font-weight:700; color:var(--text-3); margin-bottom:0.375rem; }
.login-label-row .login-label { margin-bottom:0; }
.login-forgot { font-size:var(--fs-tiny); font-weight:600; color:var(--brand); text-decoration:none; }
.login-forgot-row { display:flex; justify-content:flex-end; margin-top:0.5rem; }
.login-hint { font-size:var(--fs-tiny); color:var(--text-4); margin-top:0.4rem; }
.cf-hint { font-size:var(--fs-tiny); color:var(--text-4); margin-top:0.35rem; }
.cf-hint a { color:var(--brand); font-weight:600; text-decoration:none; }
.cf-hint a:hover { text-decoration:underline; }
.login-forgot:hover { text-decoration:underline; }
.login-input-wrap { position:relative; }
.login-input-icon { position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); color:var(--text-4); display:flex; pointer-events:none; }
.login-input {
    display:block; width:100%; height:44px; padding:0 0.875rem;
    border-radius:12px; border:1px solid var(--border-default);
    background:var(--surface-base); color:var(--text-1);
    font-size:var(--fs-caps); font-family:inherit;
    box-sizing:border-box; outline:none; margin:0;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.login-input.has-icon   { padding-left:2.25rem; }
.login-input.has-toggle { padding-right:2.75rem; }
.login-input::placeholder { color:var(--text-4); }
.login-input:focus { border-color:var(--brand-mid); box-shadow:0 0 0 2px var(--brand-mid); }
.login-eye {
    position:absolute; right:0.375rem; top:50%; transform:translateY(-50%);
    width:32px; height:32px; display:grid; place-items:center;
    background:none; border:none; border-radius:8px; cursor:pointer;
    color:var(--text-4); padding:0;
}
.login-eye:hover { color:var(--text-2); background:var(--surface-raised); }

/* Checkbox */
.login-check { display:flex; align-items:center; gap:0.625rem; cursor:pointer; user-select:none; }
.login-check input { position:absolute; opacity:0; width:0; height:0; }
.login-check-box {
    width:18px; height:18px; border-radius:6px; flex-shrink:0;
    display:grid; place-items:center;
    background:var(--surface-base); border:1px solid var(--border-medium);
    transition:background 0.12s, border-color 0.12s;
}
.login-check-box svg { visibility:hidden; }
.login-check input:checked + .login-check-box { background:var(--brand); border-color:var(--brand); }
.login-check input:checked + .login-check-box svg { visibility:visible; }
.login-check input:focus-visible + .login-check-box { box-shadow:0 0 0 3px rgba(140,193,76,0.35); }
.login-check-label { font-size:var(--fs-caps); color:var(--text-2); font-weight:500; }

/* Buttons */
.login-submit {
    width:100%; height:48px; border:none; border-radius:12px; cursor:pointer;
    background:var(--brand); color:white;
    font-size:var(--fs-sm); font-weight:700; font-family:inherit;
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    box-shadow:0 1px 2px rgba(0,0,0,0.08); transition:background 0.15s;
}
.login-submit:hover { background:var(--brand-dark); }
.login-divider { display:flex; align-items:center; gap:0.75rem; margin:1.5rem 0; font-size:var(--fs-tiny); color:var(--text-4); }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:var(--border-default); }
.login-secondary {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:48px; border-radius:12px; box-sizing:border-box;
    background:var(--surface-base); border:1px solid var(--border-medium);
    color:var(--text-2); font-size:var(--fs-caps); font-weight:700; text-decoration:none;
    transition:background 0.15s;
}
.login-secondary:hover { background:var(--surface-raised); color:var(--text-2); }
.login-legal { margin:1.5rem 0 0; text-align:center; font-size:var(--fs-tiny); color:var(--text-3); line-height:1.5; }
.login-legal a { color:var(--text-2); font-weight:600; text-decoration:none; }
.login-legal a:hover { text-decoration:underline; }
.login-form .auth-error-box { margin-bottom:0; }
.login-flash { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.25rem; }

/* Register: two-up field row, optional marker */
.login-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.login-optional { font-size:11px; color:var(--text-4); }

/* Password reset: status circle + anchor styled as the primary button */
.login-status-icon {
    width:48px; height:48px; border-radius:50%; margin:0 0 1.25rem;
    display:grid; place-items:center; background:var(--brand-bg);
}
.login-status-icon.is-error { background:var(--error-bg); }
.login-submit-link { text-decoration:none; margin-top:1.75rem; }
.login-submit-link:hover { color:white; }
.login-sub a { color:var(--brand); font-weight:600; text-decoration:none; }
.login-sub a:hover { text-decoration:underline; }
.login-sub + .login-sub { margin-top:0.75rem; }

/* Mobile: hero collapses to a header band above the form */
@media (max-width:860px) {
    .login-split { grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:100dvh; }
    .login-hero { padding:2rem 1.5rem 2.5rem; }
    .login-hero-copy { max-width:none; }
    .login-hero-eyebrow { display:none; }
    .login-hero-title { margin-top:2rem; font-size:24px; }
    .login-hero-foot { display:none; }
    .login-panel { padding:2rem 1.5rem; place-items:start center; }
    .login-title { font-size:24px; }
    .login-row { grid-template-columns:1fr; }
}

/* ── Notification preferences (settings) ── */
.st-notify-row { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:0.75rem 0; border-top:1px solid var(--border-subtle); }
.st-notify-row:first-of-type { border-top:none; }
.st-notify-title { font-weight:600; color:var(--text-1); font-size:var(--fs-base); }
.st-notify-desc { font-size:var(--fs-sm); color:var(--text-3); margin-top:2px; line-height:1.45; }
.st-notify-always { margin:1rem 0 0; padding-top:0.85rem; border-top:1px solid var(--border-subtle); font-size:var(--fs-tiny); color:var(--text-4); line-height:1.5; }

/* ============================================================
   Nachrichten (messaging)
   ============================================================ */
.nc-grid { display:grid; grid-template-columns:320px 1fr; height:calc(100dvh - 250px); min-height:480px; }
.nc-sidebar { border-right:1px solid var(--surface-raised); display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.nc-threads { overflow-y:auto; flex:1; }
.nc-thread { display:flex; gap:0.75rem; align-items:flex-start; padding:0.875rem 1rem; cursor:pointer; width:100%; text-align:left; background:var(--surface-base); border:none; border-bottom:1px solid var(--surface-raised); transition:background 0.12s; }
.nc-thread:last-child { border-bottom:none; }
.nc-thread:hover { background:var(--surface-raised); }
.nc-thread.active { background:var(--brand-bg-subtle); }
.nc-thread-icon { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--brand-mid),var(--brand)); color: white; font-size:var(--fs-sm); font-weight:700; letter-spacing:0.02em; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nc-thread-body { flex:1; min-width:0; }
.nc-thread-name { font-size:var(--fs-base); font-weight:700; color:var(--text-3); overflow:hidden; white-space:nowrap; }
.nc-thread.active .nc-thread-name { color:var(--brand); }
.nc-thread-preview { font-size:var(--fs-sm); color:var(--text-3); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:2px; }
.nc-thread-preview.unread { font-weight:700; color:var(--text-1); }
.nc-thread-meta { font-size:var(--fs-sm); color:var(--text-3); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:2px; }
.nc-thread-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.nc-thread-time { font-size:var(--fs-sm); color:var(--text-3); white-space:nowrap; }
.nc-unread-badge { width:20px; height:20px; border-radius:50%; background:#f59e2b; color: white; font-size:var(--fs-tiny); font-weight:700; display:flex; align-items:center; justify-content:center; }
.nc-panel { display:flex; flex-direction:column; }
.nc-panel-header { padding:1rem 1.25rem; border-bottom:1px solid var(--surface-raised); display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.nc-panel-info { flex:1; min-width:0; }
.nc-panel-name { font-size:var(--fs-body); font-weight:700; color:var(--brand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-panel-meta { font-size:var(--fs-base); color:var(--text-3); margin-top:1px; }
.nc-mob-header { display:none; background:var(--surface-base); padding:0.5rem 0.75rem; align-items:center; gap:0.5rem; }
.nc-mob-back { width:36px; height:36px; border:none; background:transparent; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.12s; padding:0; }
.nc-mob-back:hover { background:var(--surface-raised); }
.nc-mob-info { flex:1; min-width:0; }
.nc-mob-name { font-size:var(--fs-body); font-weight:700; color:var(--brand); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-mob-meta { font-size:var(--fs-base); color:var(--text-3); }
.nc-pinned { display:none; background:var(--surface-base); border-bottom:1px solid var(--surface-raised); padding:0.625rem 1rem; align-items:center; gap:0.75rem; }
.nc-messages { flex:1; overflow-y:auto; padding:1.25rem; background:#fafaf7; display:flex; flex-direction:column; gap:0.75rem; }
.nc-date-divider { text-align:center; font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); margin:0.25rem 0; }
.nc-msg { display:flex; }
.nc-msg.me   { justify-content:flex-end; }
.nc-msg.them { justify-content:flex-start; }
.nc-msg-inner { max-width:68%; display:flex; flex-direction:column; }
.nc-msg.me   .nc-msg-inner { align-items:flex-end; }
.nc-msg.them .nc-msg-inner { align-items:flex-start; }
.nc-msg-author { font-size:var(--fs-sm); font-weight:700; color:var(--text-3); margin-left:0.75rem; margin-bottom:2px; cursor:pointer; border-bottom:none; }
.nc-msg-author:hover { color:var(--brand); text-decoration:underline; }
.nc-msg-bubble { padding:0.625rem 0.875rem; font-size:var(--fs-base); line-height:1.5; word-break:break-word; }
.nc-msg.me   .nc-msg-bubble { background:var(--brand-fixed); color: white; border-radius:18px 18px 4px 18px; }
.nc-msg.them .nc-msg-bubble { background:var(--surface-base); color:var(--text-1); border-radius:18px 18px 18px 4px; outline:1px solid var(--border-default); }
.nc-msg-time { font-size:var(--fs-sm); color:var(--text-3); margin-top:3px; align-self:flex-end; }
.nc-msg.me   .nc-msg-time { margin-right:4px; }
.nc-msg.them .nc-msg-time { margin-left:12px; }
.nc-input-footer { border-top:1px solid var(--surface-raised); padding:0.875rem; }
.nc-compose { display:flex; align-items:flex-end; gap:0.5rem; }
.nc-compose-field { flex:1; background:var(--surface-base); border-radius:14px; outline:1px solid var(--border-default); padding:0 0.75rem; display:flex; align-items:center; transition:outline-color 0.15s, background 0.15s; }
.nc-compose-field:focus-within { outline-color:var(--brand-mid); background:var(--surface-base); }
.nc-compose-field textarea { flex:1; background:transparent; border:none; outline:none; resize:none; font-size:var(--fs-base); font-family:inherit; color:var(--text-1); padding:0.625rem 0; line-height:1.45; max-height:120px; overflow-y:auto; }
.nc-compose-field textarea::placeholder { color:var(--text-3); }
.nc-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; color:var(--text-3); text-align:center; flex:1; }
.nc-empty-icon { width:52px; height:52px; border-radius:16px; background:var(--surface-raised); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.nc-empty-state p { font-size:var(--fs-base); color:var(--text-3); margin-top:0.5rem; }
.nc-action-confirm { height:28px; padding:0 10px; border-radius:6px; font-size:var(--fs-sm); font-weight:700; background:var(--brand-bg); border:1px solid var(--brand-mid); color:var(--brand); cursor:pointer; font-family:inherit; }
.nc-action-reject  { height:28px; padding:0 10px; border-radius:6px; font-size:var(--fs-sm); font-weight:700; background:var(--surface-base); border:1px solid var(--error-border); color:var(--error); cursor:pointer; font-family:inherit; }
.nc-tab-bar { display:flex; gap:.4rem; padding:.5rem .875rem; border-bottom:1px solid var(--surface-raised); }
.nc-tab-btn { flex:1; height:30px; border-radius:20px; border:none; background:var(--surface-raised); color:var(--text-3); font-family:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.3rem; transition:background .15s, color .15s; }
.nc-tab-btn.active { background:var(--brand-bg); color:var(--brand); }
.nc-tab-count { background:rgba(0,0,0,.07); border-radius:10px; padding:0 5px; font-size:11px; line-height:17px; }
.nc-tab-btn.active .nc-tab-count { background:rgba(63,122,42,.12); }
.nc-archive-panel { overflow-y:auto; flex:1; }
.nc-archive-empty { text-align:center; color:var(--text-4); font-size:var(--fs-sm); padding:2rem 1rem; }
.nc-archived-item { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-bottom:1px solid var(--surface-raised); }
.nc-archived-info { flex:1; min-width:0; }
.nc-restore-btn { background:none; border:1px solid var(--border-medium); border-radius:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--text-3); cursor:pointer; flex-shrink:0; padding:0; }
.nc-restore-btn:hover { background:var(--surface-raised); color:var(--brand); border-color:var(--brand-mid); }
@media (max-width:768px) {
  .nc-grid { grid-template-columns:1fr; height:auto; min-height:0; }
  .nc-grid.conv-open { height:calc(100dvh - 64px); overflow:hidden; }
  .nc-grid.conv-open .nc-panel { height:100%; overflow:hidden; }
  .nc-messages { min-height:0; }
  #panel-none { display:none; }
  .conv-open .nc-sidebar { display:none; }
  .nc-panel-header { display:none; }
  .nc-mob-header { display:flex; }
  .nc-pinned { display:flex; }
}
/* ============================================================
   My Bookings
   ============================================================ */
.bk-filters { padding:1.25rem 1.5rem 1rem; border-bottom:1px solid var(--surface-raised); }
.bk-filter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:0.875rem; }
@media (max-width:900px) { .bk-filter-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .bk-filter-grid { grid-template-columns:1fr; } }
.bk-field-label { display:block; font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); margin-bottom:5px; }
.bk-select { width:100%; height:42px; padding:0 2.25rem 0 0.75rem; border:1px solid var(--border-default); border-radius:10px; font-size:var(--fs-base); font-weight:500; color:var(--text-1); background-color: white; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.75rem center; appearance:none; -webkit-appearance:none; cursor:pointer; font-family:inherit; transition:border-color 0.15s; }
.bk-select:focus { outline:none; border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.15); }
.bk-input-date { height:42px; padding:0 0.75rem; border:1px solid var(--border-default); border-radius:10px; font-size:var(--fs-base); font-weight:500; color:var(--text-1); background:var(--surface-base); font-family:inherit; transition:border-color 0.15s; }
.bk-input-date:focus { outline:none; border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.15); }
.bk-filter-actions { display:flex; align-items:center; gap:1rem; font-size:var(--fs-sm); }
.bk-filter-link { display:inline-flex; align-items:center; gap:5px; font-weight:600; color:var(--text-3); text-decoration:none; background:none; border:none; cursor:pointer; padding:0; font-size:var(--fs-sm); font-family:inherit; transition:color 0.15s; }
.bk-filter-link:hover { color:var(--text-1); }
.bk-table { width:100%; border-collapse:collapse; }
.bk-table thead th { text-align:left; padding:0.65rem 1.5rem; font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); background:rgba(245,245,244,0.6); border-bottom:1px solid var(--surface-raised); }
.bk-table tbody td { padding:0.875rem 1.5rem; border-bottom:1px solid var(--surface-raised); vertical-align:middle; }
.bk-table tbody tr:last-child td { border-bottom:none; }
.bk-table tbody tr:hover td { background:rgba(245,245,244,0.5); }
.bk-table tbody tr.bk-series-row td { background:var(--brand-bg-subtle); cursor:pointer; }
.bk-table tbody tr.bk-series-row:hover td { background:#f0f7e0 !important; }
.bk-table tbody tr.bk-series-sub-row td { background:var(--surface-raised); font-size:var(--fs-sm); }
.bk-table tbody tr.bk-series-sub-row:hover td { background:var(--brand-bg) !important; }
.bk-result-count { font-weight:600; color:var(--text-2); margin-right:auto; font-variant-numeric:tabular-nums; }
/* "Benutzerdefiniert": a button that opens the calendar's day grid */
.bk-range-row { margin-bottom:0.875rem; }
.bk-range-btn { display:inline-flex; align-items:center; gap:0.5rem; height:40px; padding:0 0.9rem; border:1px solid var(--border-default); border-radius:10px; background:var(--surface-base); color:var(--text-1); font-family:inherit; font-size:var(--fs-sm); font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums; }
.bk-range-btn svg { color:var(--text-3); }
.bk-range-btn:hover, .bk-range-btn[aria-expanded="true"] { border-color:var(--brand-mid); }
/* List dims while a filter change loads. The delay keeps a fast answer from flickering. */
.bk-results { transition:opacity 0.15s; }
.bk-results.is-loading { opacity:0.4; pointer-events:none; transition-delay:0.15s; }
.bk-more { display:flex; justify-content:center; padding:0 1rem 1.5rem; }
.bk-more:empty { display:none; }
.bk-more .cf-btn.is-loading { opacity:0.6; cursor:progress; }
.bk-more-rest { font-weight:400; opacity:0.75; margin-left:0.25rem; }
.bk-series-more { padding:0.6rem 1rem 0.6rem 2.5rem; font-size:var(--fs-sm); }
.bk-series-more a { color:var(--brand); font-weight:600; text-decoration:none; }
.bk-series-more a:hover { text-decoration:underline; }
.bk-series-chip { display:inline-flex; align-items:center; gap:0.35rem; height:26px; padding:0 0.6rem; border-radius:999px; background:var(--brand-bg); color:var(--brand); font-weight:600; text-decoration:none; }
.bk-series-chip:hover { background:var(--brand); color:white; }
.bk-badge { display:inline-flex; align-items:center; gap:3px; padding:0 8px; height:20px; border-radius:5px; font-size:var(--fs-sm); font-weight:700; }
.bk-badge-blue  { background:#eff6ff; color:#1d4ed8; box-shadow:0 0 0 1px #bfdbfe inset; }
.bk-badge-amber { background:var(--warn-bg); color:#b45309; box-shadow:0 0 0 1px #fde68a inset; }
.comment-toggle { height:30px; padding:0 6px; border-radius:7px; font-size:var(--fs-sm); font-weight:600; background:none; border:none; color:var(--text-3); cursor:pointer; font-family:inherit; transition:color 0.15s; display:inline-flex; align-items:center; gap:4px; }
.comment-toggle:hover { color:var(--brand); }
.comment-toggle.has-comments { color:var(--brand); }
.comment-panel { display:none; background:#f9fdf5; border-top:1px solid var(--brand-bg); }
.comment-panel td { padding:1rem 1.5rem; }
/* Shared comment item styles (my_bookings + search) */
.comment-item { display:flex; gap:10px; padding:0.5rem 0; font-size:var(--fs-base); border-bottom:1px solid var(--surface-raised); }
.comment-item:last-of-type { border-bottom:none; }
.comment-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--brand-mid),var(--brand)); color: white; font-size:var(--fs-sm); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.comment-body   { flex:1; }
.comment-author { font-weight:700; font-size:var(--fs-sm); color:var(--brand); }
.comment-time   { font-size:var(--fs-sm); color:var(--text-3); margin-left:0.4rem; }
.comment-text   { color:var(--text-2); margin-top:2px; }
.series-chevron { transition:transform 0.2s; display:inline-block; line-height:0; vertical-align:middle; }
.series-card-occurrences { display:none; margin-top:0.75rem; border-top:1px solid #d5ecc2; padding-top:0.65rem; grid-column:1/-1; }
.bk-mobile-card, .bk-mobile-series-card, .series-occurrence-card { display:grid; grid-template-columns:1fr 36px; column-gap:8px; align-items:start; }
.bk-cards { display:none; padding:1rem; gap:0.75rem; flex-direction:column; }
.bk-mobile-card { border:1px solid var(--border-default); border-radius:12px; padding:1rem; background:var(--surface-base); }
.bk-mobile-series-card { border:1px solid #d5ecc2; border-radius:12px; padding:1rem; background:var(--brand-bg-subtle); }
.series-occurrence-card { border:1px solid var(--surface-raised); border-radius:8px; padding:0.75rem; margin-bottom:0.5rem; background:var(--surface-base); }
.series-occurrence-card:last-child { margin-bottom:0; }
.bk-card-side { display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:2px; }
.bk-mobile-car-name { font-weight:700; color:var(--brand); font-size:var(--fs-base); }
.bk-car-name { font-weight:700; color:var(--brand); font-size:var(--fs-base); }
.comment-input-wrap { flex:1; min-height:44px; display:flex; align-items:stretch; background:var(--surface-base); border-radius:12px; box-shadow:0 0 0 1px var(--border-default); }
/* Comment fields are two-line textareas so the placeholder ("… für alle Mitglieder sichtbar") wraps
   instead of being cut off in narrow places such as the calendar modal on a phone. field-sizing grows
   them to the placeholder (three lines on a 360px phone) and to what is typed; without it, rows="2". */
.comment-input-bare, .comment-input-pill, .comment-form textarea { field-sizing:content; min-height:2lh; max-height:8lh; }
.comment-input-bare { flex:1; width:100%; padding:10px 16px; background:transparent; font-size:var(--fs-base); color:var(--text-1); border:none; outline:none; border-radius:12px; font-family:inherit; line-height:1.4; resize:none; box-sizing:border-box; }
.comment-input-pill { flex:1; padding:8px 14px; line-height:1.4; resize:none; border:1px solid var(--border-default); border-radius:14px; font-size:var(--fs-base); background:var(--surface-base); color:var(--text-1); font-family:inherit; outline:none; transition:border-color 0.15s, box-shadow 0.15s; }
.comment-input-pill:focus { border-color:var(--brand-mid); box-shadow:0 0 0 2px rgba(140,193,76,0.2); }
.bk-mobile-dates { font-size:var(--fs-sm); color:var(--text-2); margin:5px 0; }
.bk-mobile-dest { font-size:var(--fs-sm); color:var(--text-3); margin:3px 0; display:flex; align-items:center; gap:5px; }
.bk-card-expand-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; background:none; border:1px solid var(--border-default); color:var(--text-2); cursor:pointer; padding:0; transition:background 0.12s; flex-shrink:0; }
.bk-card-expand-btn:hover { background:var(--surface-raised); }
.bk-card-expand-btn svg { width:16px; height:16px; display:block; transition:transform 0.2s; }
.bk-card-actions-panel { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-top:8px; width:100%; grid-column:1/-1; }
.booking-card-comment-panel { grid-column:1/-1; }
@media (max-width:640px) {
    .bk-table-wrap { display:none; }
    .bk-cards { display:flex; }
    .bk-filters { padding:1rem; }
    .bk-filter-grid { grid-template-columns:1fr 1fr; gap:0.75rem; }
    /* Zeitraum is the filter that matters most, and "Benutzerdefiniert" does not fit half a row */
    .bk-filter-grid > div:first-child { grid-column:1 / -1; }
}
.bk-modal-backdrop { display:none; position:fixed; inset:0; background:rgba(30,40,20,0.45); z-index:1000; align-items:center; justify-content:center; padding:1rem; }
.bk-modal { background:var(--surface-base); border-radius:16px; max-width:420px; width:100%; box-shadow:0 20px 60px rgba(30,40,20,0.12),0 4px 12px rgba(30,40,20,0.06); outline:1px solid rgba(231,229,228,0.7); overflow:hidden; }
.bk-modal-head { padding:1.25rem 1.25rem 1rem; }
.bk-modal-head-row { display:flex; align-items:flex-start; gap:0.75rem; }
.bk-modal-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bk-modal-icon.warn  { background:var(--warn-bg); color:#b45309; outline:1px solid rgba(251,191,36,0.4); }
.bk-modal-icon.error { background:var(--error-bg); color:var(--error); outline:1px solid rgba(252,165,165,0.4); }
.bk-modal-icon.green { background:var(--brand-bg); color:var(--brand); }
.bk-modal-title-wrap { flex:1; min-width:0; }
.bk-modal-title      { font-size:18px; font-weight:700; line-height:1.25; color:var(--brand); }
.bk-modal-title.warn { color:var(--warn-text); }
.bk-modal-title.error { color:var(--error); }
.bk-modal-desc  { font-size:var(--fs-base); color:var(--text-2); margin-top:0.4rem; line-height:1.5; }
.bk-modal-close { width:32px; height:32px; border-radius:8px; background:none; border:none; cursor:pointer; color:var(--text-3); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:-4px -4px 0 0; transition:background 0.12s; }
.bk-modal-close:hover { background:var(--surface-raised); }
.bk-modal-body   { padding:0 1.25rem 1rem; }
/* The two search booking modals: header and footer stay put, the body
   scrolls. Without a height bound a long terms text (the cargo bike's runs to
   3 KB) pushed the footer off screen with nothing to scroll. */
.bk-scroll-modal { display:flex; flex-direction:column; max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); }
.bk-scroll-modal > form { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.bk-scroll-modal .bk-modal-body { overflow-y:auto; min-height:0; }
/* The body is a flex column too; without this it squeezed the terms box (overflow:hidden) and cut the text off instead of scrolling. */
.bk-scroll-modal .bk-modal-body > * { flex-shrink:0; }
.bk-scroll-modal .bk-modal-footer { flex-shrink:0; }
/* Terms checkbox in the booking modal footers, right above the button it
   unlocks. Always its own row: sharing one with the buttons worked in the
   520px calendar modal but broke Buchen onto a line of its own in the 420px
   search modals, so the two looked different. */
.bk-footer-terms { flex:1 1 100%; }
.bk-footer-terms label { display:flex; align-items:flex-start; gap:0.5rem; margin:0; cursor:pointer; font-size:var(--fs-sm); font-weight:600; line-height:1.35; color:var(--text-1); }
.bk-footer-terms input { margin-top:0.15rem; flex-shrink:0; width:16px; height:16px; accent-color:var(--brand); }
.bk-footer-terms.is-missing label { color:var(--error); }
.bk-footer-terms.is-missing input { outline:2px solid var(--error); outline-offset:1px; }
.bk-modal-footer { padding:0.875rem 1.25rem; background:rgba(245,245,244,0.6); border-top:1px solid var(--surface-raised); display:flex; align-items:center; gap:0.5rem; justify-content:flex-end; flex-wrap:wrap; }
.bk-radio-group { display:flex; flex-direction:column; gap:0.5rem; }
.bk-radio-label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:normal; margin:0; padding:0.75rem; border-radius:10px; outline:1px solid var(--border-default); background:var(--surface-base); transition:background 0.12s, outline-color 0.12s; }
.bk-radio-label:has(input:checked) { outline-color:var(--brand-mid); background:var(--brand-bg-subtle); }
.bk-radio-label input { margin-top:2px; flex-shrink:0; accent-color:var(--brand); }
.bk-radio-text strong { font-size:var(--fs-base); color:var(--text-1); display:block; }
.bk-radio-text span   { font-size:var(--fs-sm); color:var(--text-3); display:block; margin-top:1px; }
.bk-empty { padding:3rem 1.5rem; text-align:center; color:var(--text-3); font-size:var(--fs-base); }
.bk-empty a { color:var(--brand); font-weight:600; text-decoration:underline; }

/* ============================================================
   Search
   ============================================================ */
.search-outer { max-width:1200px; margin:0 auto; padding:0 2rem 4rem; position:relative; margin-top:-2rem; }
@media (max-width:640px) { .search-outer { padding:0 1rem 3rem; } }
.search-card { background:var(--surface-base); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 32px rgba(0,0,0,0.06); outline:1px solid rgba(231,229,228,0.8); overflow:hidden; margin-bottom:1.25rem; }
.form-section-label { font-size:var(--fs-caps); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-2); margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
.form-section-label-icon { width:20px; height:20px; border-radius:6px; background:var(--brand-bg); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
.field-label { display:block; font-size:var(--fs-sm); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); margin-bottom:6px; margin-top:0; }
.search-form-inner input[type=date],
.search-form-inner input[type=time],
.search-form-inner input[type=text],
.search-form-inner input[type=number],
.search-form-inner select {
    height:44px; border-radius:12px; border:1px solid var(--border-default);
    font-size:var(--fs-base); color:var(--text-1); font-weight:500;
    padding:0 14px; width:100%; box-sizing:border-box;
    transition:border-color 0.15s, box-shadow 0.15s; background:var(--surface-base);
}
.search-form-inner input:focus, .search-form-inner select:focus { outline:none; border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.2); }
.time-pills { display:flex; flex-wrap:nowrap; gap:6px; margin-top:8px; align-items:center; }
@media (max-width:640px) { .time-pills { display:none; } }
.time-pill { min-width:36px; height:36px; border-radius:50%; border:none; background:var(--surface-raised); color:var(--text-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:background 0.12s, color 0.12s; display:grid; place-items:center; padding:0; margin:0; }
.time-pill:hover { background:var(--border-default); }
.time-pill.active { background:var(--brand); color: white; }
.date-pill { height:36px; padding:0 12px; border-radius:999px; border:none; background:var(--surface-raised); color:var(--text-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:background 0.12s, color 0.12s; display:inline-flex; align-items:center; white-space:nowrap; margin:0; }
.date-pill:hover { background:var(--border-default); }
.date-pill.active { background:var(--brand); color: white; }
.pills-divider { width:10px; flex-shrink:0; }
.type-pill { display:inline-flex; align-items:center; padding:0 14px; height:36px; border-radius:999px; border:none; font-size:var(--fs-sm); font-weight:600; color:var(--text-2); background:var(--surface-raised); cursor:pointer; user-select:none; transition:background 0.12s, color 0.12s; margin:0; }
.type-pill:hover { background:var(--border-default); }
.type-pill.selected { background:var(--brand); color: white; }
.preset-locations { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.preset-loc-btn { background:var(--surface-raised); border:none; color:var(--text-2); padding:0 14px; height:36px; border-radius:999px; font-size:var(--fs-sm); font-weight:600; font-family:inherit; cursor:pointer; margin:0; transition:background 0.12s, color 0.12s; }
.preset-loc-btn:hover { background:var(--border-default); }
.preset-loc-btn.active { background:var(--brand); color: white; }
#dest-fields { display:flex; flex-direction:column; gap:6px; }
.dest-row { display:flex; align-items:flex-start; gap:6px; }
.dest-add-btn, .dest-rm-btn { width:30px; height:30px; border-radius:50%; border:1px solid var(--border-medium); background:var(--surface-base); color:var(--text-2); cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background 0.12s, border-color 0.12s, color 0.12s; margin-top:5px; }
.dest-add-btn:hover { background:var(--surface-raised); border-color:var(--text-3); }
.dest-rm-btn:hover  { background:var(--error-bg); border-color:var(--error-border); color:var(--error-dark); }
.location-wrap { position:relative; flex:1; min-width:0; }
.location-wrap input { width:100%; }
.location-suggestions { display:none; position:absolute; left:0; right:0; z-index:100; background:var(--surface-base); border:1px solid var(--brand-mid); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.1); list-style:none; margin:4px 0 0; padding:4px 0; max-height:220px; overflow-y:auto; }
.location-suggestions li { padding:8px 14px; cursor:pointer; font-size:var(--fs-base); }
.location-suggestions li:hover,
.location-suggestions li.active { background:var(--brand-bg); }
.location-suggestions .loc-name   { font-weight:600; color:var(--text-1); }
.location-suggestions .loc-detail { font-size:var(--fs-sm); color:var(--text-3); }
.location-suggestions .loc-hint   { font-size:var(--fs-sm); color:var(--text-3); font-style:italic; cursor:default; }
.recurring-panel { margin-top:10px; padding:10px 0 0 0; font-size:var(--fs-base); color:var(--text-3); }
.recurring-panel label, .recurring-panel span { font-size:var(--fs-base); }
.recurring-panel input[type=number], .recurring-panel select { height:32px !important; border-radius:8px !important; font-size:var(--fs-base) !important; padding:0 8px !important; }
.recurring-panel input[type=date] { height:32px !important; border-radius:8px !important; font-size:var(--fs-base) !important; }
.recurring-error { margin-top:10px; padding:10px 14px; background:#fff8e1; border-radius:8px; border:1.5px solid var(--cta); font-size:var(--fs-sm); color:#7a5000; }
.result-card { background:var(--surface-base); border-radius:16px; padding:12px 16px; outline:1px solid rgba(231,229,228,0.7); margin-bottom:8px; transition:outline-color 0.15s, box-shadow 0.15s; }
.result-card:hover { outline-color:#d0d0d0; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.result-card.gap-fit   { border-left:3px solid var(--brand-mid); background:#f7fdf0; }
.result-card.gap-fit-2 { outline-color:rgba(140,193,76,0.6); border-left:3px solid #e67e22; background:#fff7e6; box-shadow:0 4px 20px rgba(140,193,76,0.12); }
.result-card.is-fav    { background:#f9fdf5; }
.result-row  { display:flex; align-items:center; gap:16px; }
.result-info { flex:1; min-width:0; }
.result-info-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.result-side { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.result-rate     { font-weight:700; color:var(--text-1); font-size:var(--fs-base); white-space:nowrap; }
.result-rate-sub { font-size:var(--fs-sm); color:var(--text-3); }
.result-badge { display:inline-flex; align-items:center; gap:4px; padding:0 10px; height:22px; border-radius:6px; font-size:var(--fs-sm); font-weight:600; outline:1px solid var(--border-default); background:var(--surface-raised); color:var(--text-2); }
.result-badge.green { background:var(--brand-bg); color:var(--brand); outline-color:rgba(140,193,76,0.5); }
.result-badge.amber { background:#fff8e1; color:#7a5000; outline-color:var(--cta); }

.fav-star { color:var(--cta); font-size:var(--fs-base); }
.gap-badge { display:inline-flex; align-items:center; font-size:var(--fs-sm); font-weight:700; padding:0 8px; height:22px; border-radius:6px; background:var(--cta); color: white; margin-left:4px; position:relative; cursor:pointer; }
.gap-badge.green    { background:var(--brand-mid); }
.gap-badge.conflict { background:#fff8e1; color:#7a5000; outline:1px solid var(--cta); }
.result-heading { font-size:18px; font-weight:700; color:var(--text-1); }
.gap-badge .gap-tooltip { display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--text-1); color:#fff; font-size:var(--fs-sm); font-weight:400; white-space:nowrap; padding:6px 10px; border-radius:8px; z-index:100; line-height:1.5; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.gap-badge .gap-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--text-1); }
.gap-badge:hover .gap-tooltip, .gap-badge.tooltip-open .gap-tooltip { display:block; }
@media (max-width:768px) {
    .search-form-two-col { grid-template-columns:1fr !important; gap:1.5rem !important; }
    .search-outer { padding:0 1rem 3rem; }
}
@media (max-width:640px) {
    .result-row  { flex-direction:column; align-items:stretch; gap:10px; }
    .result-side { width:100%; justify-content:space-between; }
    .result-info-name { flex-wrap:wrap; }
}
.merge-card { background:var(--surface-base); border-radius:16px; outline:1px solid rgba(231,229,228,0.7); box-shadow:0 1px 2px rgba(0,0,0,0.04),0 4px 16px rgba(0,0,0,0.05); border-left:3px solid var(--cta); margin-bottom:10px; overflow:hidden; }
.merge-comment-panel  { display:none; background:#f9fdf5; border-top:1px solid var(--brand-bg); padding:12px 16px; }
.merge-comment-toggle { height:30px; padding:0 6px; border-radius:7px; font-size:var(--fs-sm); font-weight:600; background:none; border:none; color:var(--text-3); cursor:pointer; font-family:inherit; transition:color 0.15s; display:inline-flex; align-items:center; gap:4px; margin:0; }
.merge-comment-toggle:hover, .merge-comment-toggle.has-comments { color:var(--brand); }
.comment-form { display:flex; gap:8px; margin-top:12px; align-items:center; }
.comment-form textarea { flex:1; padding:8px 14px; font-size:var(--fs-base); border:1px solid var(--border-default); border-radius:14px; height:auto; line-height:1.4; resize:none; font-family:inherit; }
.comment-form button { background:var(--brand); color: white; border:none; padding:8px 18px; border-radius:999px; cursor:pointer; font-size:var(--fs-base); font-weight:600; margin:0; }
.search-form-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:2.5rem; align-items:start; }
@media (max-width:768px) { .search-form-grid { grid-template-columns:1fr; } .search-form-grid > div + div { margin-top:1.5rem; } }
.btn-reset { background:none; border:none; color:var(--text-3); font-size:var(--fs-base); font-weight:600; cursor:pointer; margin:0; display:inline-flex; align-items:center; gap:6px; padding:0; transition:color 0.15s; }
.btn-reset:hover { color:#292524; }
.car-name-link { cursor:pointer; color:var(--text-1); }
.car-name-link:hover { color:var(--brand); }

/* ============================================================
   Home
   ============================================================ */
.home-outer { max-width:1200px; margin:-2rem auto 0; padding:0 2rem 4rem; position:relative; }
@media (max-width:640px) { .home-outer { padding:0 1rem 3rem; } }
.home-stack { display:flex; flex-direction:column; gap:1.25rem; }

.home-main-grid      { display:grid; grid-template-columns:2fr 1fr; gap:1.25rem; }
.home-main-grid--3   { grid-template-columns:2fr 1fr 1fr; }
@media (max-width:900px) { .home-main-grid, .home-main-grid--3 { grid-template-columns:1fr; } }
.home-card { background:var(--surface-base); border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,0.04); outline:1px solid rgba(245,245,244,0.9); overflow:hidden; }
.home-card-head  { display:flex; align-items:baseline; justify-content:space-between; padding:1.1rem 1.25rem 0.65rem; }
.home-card-title { font-size:var(--fs-base); font-weight:700; color:var(--text-1); }
.home-card-link  { font-size:var(--fs-sm); font-weight:600; color:var(--brand); text-decoration:none; }
.home-card-link:hover { color:#2d5a1a; }
.home-ride-row  { display:flex; align-items:center; gap:0.85rem; padding:0.7rem 1.25rem; border-top:1px solid var(--surface-raised); transition:background 0.1s; }
.home-ride-row:hover { background:var(--surface-page); }
.home-ride-icon { width:38px; height:38px; border-radius:10px; background:var(--brand-bg); color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.home-ride-name { font-size:var(--fs-base); font-weight:700; color:var(--text-1); }
.home-ride-meta { font-size:var(--fs-sm); color:var(--text-3); margin-top:1px; font-variant-numeric:tabular-nums; }
.home-empty { padding:1.5rem 1.25rem; font-size:var(--fs-base); color:var(--text-3); text-align:center; border-top:1px solid var(--surface-raised); }
.home-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; padding:0.85rem 1.25rem 1.1rem; }
.home-stat-num   { font-size:1.4rem; font-weight:700; color:var(--text-1); font-variant-numeric:tabular-nums; line-height:1.1; }
.home-stat-label { font-size:var(--fs-sm); color:var(--text-3); margin-top:1px; }
.home-ql-label { font-size:var(--fs-base); font-weight:700; color:var(--text-1); margin-bottom:0.6rem; padding:0 0.1rem; }
.home-ql-grid  { display:grid; grid-template-columns:repeat(4, 1fr); gap:0.65rem; }
.home-ql-tile  { display:flex; flex-direction:column; text-decoration:none; align-items:flex-start; background:var(--surface-base); border-radius:16px; outline:1px solid rgba(245,245,244,0.9); padding:1rem; transition:outline-color 0.15s, box-shadow 0.15s; }
.home-ql-tile:hover { outline-color:var(--border-medium); box-shadow:0 4px 12px rgba(0,0,0,0.07); }
.home-ql-tile.primary { outline-color:rgba(140,193,76,0.45); background:var(--brand-bg-subtle); }
.home-ql-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:0.6rem; transition:transform 0.15s; }
.home-ql-tile:hover .home-ql-icon { transform:scale(1.07); }
.home-ql-name { font-size:var(--fs-base); font-weight:700; color:var(--text-1); }
.home-ql-desc { font-size:var(--fs-sm); color:var(--text-3); margin-top:2px; line-height:1.35; }
@media (max-width:900px) { .home-ql-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px) { .home-ql-grid { grid-template-columns:1fr 1fr; } .home-ql-desc { display:none; } }

/* ============================================================
   Settings (page-specific additions)
   ============================================================ */

.fav-chips { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem; min-height:1rem; }
.fav-chip  { display:inline-flex; align-items:center; gap:0.35rem; background:var(--brand-bg); border:none; outline:1px solid rgba(140,193,76,0.35); border-radius:20px; padding:0.2rem 0.55rem 0.2rem 0.7rem; font-size:var(--fs-sm); font-weight:600; color:var(--brand); }
.fav-chip-remove { background:none; border:none; cursor:pointer; padding:0; color:var(--brand-mid); font-size:1.1rem; line-height:1; display:flex; align-items:center; margin-top:-2px; }
.fav-chip-remove:hover { color:var(--error); }
.fav-search-wrap { position:relative; max-width:340px; }
.fav-combobox { display:flex; align-items:center; border:1px solid var(--border-default); border-radius:10px; background:var(--surface-base); cursor:text; transition:border-color 0.15s, box-shadow 0.15s; height:44px; }
.fav-combobox:focus-within { border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.15); }
.fav-combobox input { flex:1; border:none; outline:none; background:transparent; padding:0 0.75rem; font-size:var(--fs-base); color:var(--text-1); font-family:'Titillium Web', sans-serif; margin:0; box-shadow:none !important; height:100%; width:100%; }
.fav-combobox-arrow { padding:0 0.75rem; color:var(--text-3); cursor:pointer; display:flex; align-items:center; flex-shrink:0; }
.fav-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface-base); border:1.5px solid var(--brand-mid); border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:50; max-height:200px; overflow-y:auto; }
.fav-dropdown-item { padding:0.5rem 0.75rem; cursor:pointer; font-size:var(--fs-base); color:var(--text-1); }
.fav-dropdown-item:hover { background:var(--brand-bg); color:var(--brand); }
.fav-dropdown-item.already-fav { color:var(--text-3); cursor:default; }
.fav-dropdown-item.already-fav:hover { background:none; }
.fav-hint { font-size:var(--fs-sm); color:var(--text-3); margin:0.6rem 0 0; }
.cal-feed-row { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.75rem; }
.cal-feed-url  { flex:1; min-width:0; height:40px; padding:0 0.75rem; font-size:var(--fs-sm); font-family:'Courier New', monospace; color:var(--text-2); background:var(--surface-base); border:1px solid var(--border-default); border-radius:10px; outline:none; cursor:text; box-sizing:border-box; }
.cal-copy-btn  { height:40px; padding:0 1rem; border-radius:10px; border:1px solid var(--border-default); background:var(--surface-base); color:var(--text-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background 0.12s; margin:0; }
.cal-copy-btn:hover { background:var(--surface-raised); }
.st-cal-link { color:var(--brand); }

/* ============================================================
   Calendar
   ============================================================ */
.car-picker-section { border-bottom:1px solid var(--surface-raised); }
.car-picker-toggle  { display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1.5rem; cursor:pointer; user-select:none; transition:background 0.1s; }
.car-picker-toggle:hover { background:var(--surface-base); }
.car-picker-toggle-label { font-size:var(--fs-sm); font-weight:600; color:var(--text-2); }
/* An active filter has to be legible while the panel is shut. */
.car-picker-toggle.is-filtered { background:var(--brand-bg-subtle); box-shadow:inset 3px 0 0 var(--brand); }
.car-picker-badge { margin-left:0.35rem; display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 4px 0 8px; border-radius:6px; background:var(--brand-bg); color:var(--brand); font-size:var(--fs-tiny); font-weight:600; white-space:nowrap; }
.car-picker-badge-clear { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:4px; color:var(--brand); text-decoration:none; font-size:0.95rem; line-height:1; }
.car-picker-badge-clear:hover { background:var(--brand); color:white; }
.car-picker-body { padding:0 1.5rem 1.25rem; }
.car-picker-body.collapsed { display:none; }
/* Two independent columns, not a grid: a grid row is as tall as its tallest
   cell, so an expanded group on the left pushed the right-hand one down. */
.car-picker-wrap { display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; align-items:start; }
.car-picker-col  { display:flex; flex-direction:column; gap:0.35rem; min-width:0; }
@media (max-width:900px) { .car-picker-wrap { grid-template-columns:1fr; gap:0.35rem 0; } }
.car-picker-cat-header { display:flex; align-items:center; gap:0.5rem; user-select:none; padding:0.25rem 0.5rem; border-radius:8px; cursor:pointer; transition:background 0.1s; }
.car-picker-cat-header:hover { background:var(--surface-raised); }
.cat-label { font-weight:700; font-size:var(--fs-sm); color:var(--brand); cursor:pointer; flex:1; }
.cat-collapse-arrow { font-size:0.65rem; color:var(--text-3); transition:transform 0.18s; display:inline-block; margin-left:3px; }
.cat-collapse-arrow.collapsed { transform:rotate(-90deg); }
.cat-checkbox { width:15px; height:15px; accent-color:var(--brand); cursor:pointer; flex-shrink:0; }
.car-picker-items { display:flex; flex-direction:column; gap:0.05rem; padding:0.15rem 0 0.2rem 1.6rem; overflow:hidden; transition:max-height 0.2s ease; }
.car-picker-items.collapsed { max-height:0 !important; }
.car-picker-item { display:flex; align-items:center; gap:0.45rem; cursor:pointer; margin:0; font-size:var(--fs-sm); font-weight:500; color:var(--text-2); padding:0.22rem 0.5rem; border-radius:6px; transition:background 0.1s, color 0.1s; }
.car-picker-item:hover { background:var(--brand-bg); color:var(--brand); }
.car-picker-item input[type=checkbox] { accent-color:var(--brand); cursor:pointer; margin:0; width:14px; height:14px; flex-shrink:0; }
.car-picker-actions { display:flex; gap:1rem; margin-top:0.75rem; }
.car-picker-link { background:none; border:none; font-size:var(--fs-sm); color:var(--text-3); cursor:pointer; padding:0; font-family:inherit; font-weight:600; transition:color 0.12s; }
.car-picker-link:hover { color:var(--brand); }
.cal-nav-bar { position:sticky; top:0; z-index:50; background:var(--surface-base); padding:0.6rem 1.5rem; display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap; row-gap:0.4rem; }
.cal-period-toggle { display:inline-flex; align-items:center; height:36px; border-radius:8px; box-shadow:0 0 0 1px var(--border-default); background:var(--surface-base); padding:3px; gap:1px; flex-shrink:0; box-sizing:border-box; }
.cal-period-btn { padding:0 10px; height:30px; line-height:30px; border-radius:5px; border:none; background:none; color:var(--text-3); cursor:pointer; font-size:var(--fs-sm); font-weight:600; font-family:inherit; white-space:nowrap; transition:background 0.12s, color 0.12s; box-sizing:border-box; margin:0; vertical-align:middle; }
.cal-period-btn.active { background:var(--brand); color: white; box-shadow:0 1px 2px rgba(0,0,0,0.12); }
.cal-nav-today { height:36px; padding:0 12px; border-radius:8px; background:var(--surface-base); box-shadow:0 0 0 1px var(--border-default); font-size:var(--fs-sm); font-weight:600; color:var(--text-1); text-decoration:none; display:inline-flex; align-items:center; white-space:nowrap; flex-shrink:0; transition:background 0.12s; }
.cal-nav-today:hover { background:var(--surface-raised); }
.cal-nav-date-group { display:inline-flex; align-items:center; height:36px; border-radius:8px; box-shadow:0 0 0 1px var(--border-default); background:var(--surface-base); overflow:hidden; font-size:var(--fs-sm); font-weight:600; color:var(--text-1); flex-shrink:0; }
.cal-nav-arrow { width:36px; height:36px; display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text-2); font-size:1.1rem; font-weight:600; transition:background 0.12s; flex-shrink:0; }
.cal-nav-arrow:hover { background:var(--surface-raised); }
.cal-nav-label  { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; border:none; border-left:1px solid var(--border-default); border-right:1px solid var(--border-default); background:transparent; white-space:nowrap; min-width:90px; text-align:center; font-variant-numeric:tabular-nums; font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--text-1); cursor:pointer; transition:background 0.12s; }
.cal-nav-label:hover { background:var(--surface-raised); }
.cal-nav-label:focus-visible { outline:2px solid var(--brand-mid); outline-offset:-2px; }
/* -- Date picker popover (desktop) / bottom sheet (mobile) -- */
.cal-dp-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:1190; }
.cal-dp-backdrop.open { display:block; }
@media (min-width:641px) { .cal-dp-backdrop.open { display:none; } }
.cal-dp { display:none; position:fixed; z-index:1200; width:286px; padding:0.85rem; background:var(--surface-base); border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,0.04),0 12px 40px rgba(0,0,0,0.18); outline:1px solid var(--border-default); }
.cal-dp.open { display:block; }
.cal-dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.6rem; }
.cal-dp-title { font-size:var(--fs-sm); font-weight:700; color:var(--text-1); }
.cal-dp-arrow { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:none; border-radius:8px; background:transparent; color:var(--text-2); font-size:1.1rem; font-weight:600; cursor:pointer; font-family:inherit; }
.cal-dp-arrow:hover { background:var(--surface-raised); }
.cal-dp-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.cal-dp-weekdays span { text-align:center; font-size:var(--fs-tiny); font-weight:600; color:var(--text-4); }
.cal-dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
/* Monat shows the twelve months of a year instead of days. */
.cal-dp-grid.months { grid-template-columns:repeat(4,1fr); gap:6px; }
.cal-dp-cell { height:34px; border:none; border-radius:8px; background:transparent; font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--text-1); cursor:pointer; font-variant-numeric:tabular-nums; }
.cal-dp-grid.months .cal-dp-cell { height:42px; }
.cal-dp-cell.outside { color:var(--text-4); font-weight:400; }
.cal-dp-cell.in-view { background:var(--brand-bg); color:var(--brand); }
.cal-dp-cell.today   { box-shadow:inset 0 0 0 1.5px var(--brand-mid); }
.cal-dp-cell.preview { background:var(--brand); color:white; }
.cal-dp-cell:hover   { background:var(--brand); color:white; }
.cal-dp-cell.range-end { background:var(--brand); color:white; }
.cal-dp-hint { margin-top:0.55rem; text-align:center; font-size:var(--fs-tiny); color:var(--text-3); }
@media (max-width:640px) {
    /* Bottom sheet: the popover cannot be anchored usefully on a narrow screen. */
    .cal-dp.open { left:0 !important; right:0; top:auto !important; bottom:0; width:auto; border-radius:18px 18px 0 0; padding:1rem 1rem 1.4rem; }
    .cal-dp-cell { height:44px; }
    .cal-dp-grid.months .cal-dp-cell { height:52px; }
}
.cal-legend { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; font-size:var(--fs-sm); color:var(--text-3); margin-left:auto; flex-shrink:0; }
.cal-legend-item { display:inline-flex; align-items:center; gap:5px; }
.cal-legend-dot  { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
@media (max-width:640px) {
    .cal-nav-bar { flex-wrap:wrap; gap:0.4rem; padding:0.5rem 1rem; }
    /* On a phone the bars lose their text, so colour is all there is — keep
       the legend, as one short line under the nav controls. */
    .cal-legend  { flex:1 0 100%; margin-left:0; gap:0.85rem; font-size:var(--fs-tiny); }
    .cal-legend-long { display:none; }
    .cal-period-toggle { flex:1; }
    .cal-nav-date-group { flex:1 0 100%; }
    .cal-nav-label { flex:1; }
}
.cal-scroll-top { overflow-x:auto; overflow-y:hidden; height:8px; margin-bottom:2px; }
.cal-scroll-top-inner { height:1px; }
.cal-wrap  { overflow-x:auto; }
/* Separate borders: collapsed ones belong to the table, not the cell, so they stayed
   behind when the header is moved on scroll and left see-through slits in it. */
.cal-table { border-collapse:separate; border-spacing:0; min-width:100%; font-size:var(--fs-sm); }
.cal-table th, .cal-table td { border:none; padding:0; white-space:nowrap; }
.cal-head-corner { background:var(--surface-raised); padding:6px 8px 6px 16px !important; font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); width:180px; min-width:180px; max-width:180px; border-right:1px solid var(--border-default) !important; border-bottom:1px solid var(--border-default) !important; position:sticky; left:0; z-index:15; }
.cal-day-header { text-align:center; padding:6px 8px; background:var(--surface-raised); font-size:var(--fs-sm); min-width:120px; border-right:1px solid var(--border-default) !important; border-bottom:1px solid var(--border-default) !important; cursor:pointer; z-index:4; }
.cal-day-header:last-child { border-right:none; }
.cal-table thead { position:relative; z-index:20; will-change:transform; background:var(--surface-raised); }
.cal-day-header.today { background:#fff4e0; }
.cal-day-header.today .cal-day-name, .cal-day-header.today .cal-day-date { color:var(--cta-dark); }
.cal-day-header.weekend-col { background:var(--surface-page); }
.cal-day-header.past-header { opacity:0.5; }
.cal-hour-axis td { height:22px; padding:0; border-bottom:1px solid var(--border-default) !important; }
.cal-hour-axis .cal-head-corner { background:var(--surface-raised); }
.cal-hour-axis-cell { position:relative; background:var(--surface-raised); }
.cal-hour-tick { position:absolute; top:0; line-height:22px; font-size:var(--fs-tiny); font-weight:600; color:var(--text-2); transform:translateX(-50%); pointer-events:none; user-select:none; }
.cal-hour-axis .cal-hour-unit { text-align:center; padding-top:0 !important; padding-bottom:0 !important; font-size:var(--fs-tiny); line-height:22px; }
/* Day view: a line per full hour under the bars, so a bar can be read against the axis. */
.cal-table-day .cal-day-cell::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right, var(--border-default) 1px, transparent 1px); background-size:calc(100% / 24) 100%; background-position:-1px 0; }
.cal-day-name { font-weight:700; display:block; color:var(--text-2); }
.cal-day-date { font-weight:600; font-size:var(--fs-sm); color:var(--text-2); display:block; }
.cal-car-cell { padding:5px 8px 5px 16px !important; font-size:var(--fs-sm); font-weight:600; color:var(--text-1); width:180px; min-width:180px; max-width:180px; background:var(--surface-base); border-right:1px solid var(--border-default) !important; border-bottom:1px solid var(--border-default) !important; position:sticky; left:0; z-index:12; overflow:hidden; text-overflow:ellipsis; }
.cal-car-fav  { color:var(--amber); margin-right:3px; font-size:var(--fs-sm); }
.cal-car-name-link { cursor:pointer; color:inherit; }
.cal-car-name-link:hover { color:var(--brand); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; }
.cal-day-cell { min-width:120px; height:44px; position:relative; vertical-align:middle; border-right:1px solid var(--border-default) !important; border-bottom:1px solid var(--border-default) !important; overflow:visible; }
.cal-day-cell:last-child { border-right:none; }
.cal-table tbody tr:last-child .cal-day-cell,
.cal-table tbody tr:last-child .cal-car-cell { border-bottom:none; }
.cal-day-cell.free    { background:var(--surface-base); cursor:crosshair; }
.cal-day-cell.partial { background:transparent; cursor:crosshair; }
.cal-day-cell.today-col  { background:rgba(255,244,224,0.35); }
.cal-day-cell.weekend-col { background:var(--surface-page); }
.cal-cell-inner { position:absolute; top:50%; transform:translateY(-50%); height:26px; border-radius:6px; display:flex; align-items:center; padding:0 8px; font-size:var(--fs-sm); font-weight:600; overflow:hidden; white-space:nowrap; cursor:default; min-width:6px; letter-spacing:0.01em; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.booked-other   { background:#4e6fb5; color:#fff; }
.booked-mine    { background:var(--brand); color:#fff; }
.booked-pending { background:var(--amber); color:#fff; }
.bar-seg-start  { border-radius:6px 0 0 6px; }
.cal-bar-tip { background:var(--surface-base); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,0.14); outline:1px solid var(--border-default); padding:10px 14px; font-size:var(--fs-sm); line-height:1.5; }
.cal-tip-user  { font-weight:700; color:var(--text-1); margin-bottom:2px; }
.cal-tip-dest  { color:var(--text-2); }
.cal-tip-dates { color:var(--text-4); font-size:var(--fs-sm); margin-top:4px; }
.cal-cell-inner[data-tip-user] { cursor:pointer; }
/* Calendar: someone else's booking (#cal-bk-info) */
.cbi-meta    { font-size:var(--fs-sm); color:var(--text-3); margin:0.2rem 0 0; }
.cbi-pending { display:inline-block; margin:0.5rem 0 0; padding:0 8px; height:22px; line-height:22px; border-radius:6px; font-size:var(--fs-tiny); font-weight:600; background:var(--warn-bg); color:var(--warn-text); }
#cbi-comments { overflow-y:auto; min-height:0; overscroll-behavior:contain; }
.cbi-compose { flex-shrink:0; padding:0.75rem 1.25rem 1rem; border-top:1px solid var(--border-subtle); }
.cbi-compose:empty { display:none; }
.cbi-compose form > div { margin-top:0 !important; }
.bar-seg-mid    { border-radius:0; }
.bar-seg-end    { border-radius:0 6px 6px 0; }
.cal-day-cell.sel-hover   { background:#d6eecc !important; cursor:crosshair; }
.cal-day-cell.sel-active  { background:#5a9e30 !important; }
.cal-day-cell.sel-blocked { background:#fee2e2 !important; outline:1.5px solid var(--error-dark); outline-offset:-1.5px; cursor:not-allowed !important; }
.cal-day-cell.past        { opacity:0.38; cursor:not-allowed !important; }
tr[data-restricted="1"] .cal-day-cell { background-image:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,0.06) 4px,rgba(0,0,0,0.06) 8px); cursor:not-allowed !important; }

@media (max-width:640px) {
    .cal-head-corner { width:80px; min-width:80px; max-width:80px; padding:5px 6px 5px 10px !important; font-size:var(--fs-tiny); }
    .cal-car-cell    { width:80px; min-width:80px; max-width:80px; padding:5px 6px 5px 10px !important; font-size:var(--fs-tiny); }
    .cal-day-header  { min-width:55px; padding:5px 4px; font-size:0.7rem; }
    .cal-day-cell    { min-width:55px; height:36px; }
    .cal-cell-inner  { font-size:var(--fs-tiny); padding:0 4px; height:22px; }
    .cal-table-day .cal-day-cell::before { background-size:calc(100% / 12) 100%; }
}
@media (max-width:359px) {
    .cal-hour-step-2 { display:none; }
}

/* ============================================================
   Car List
   ============================================================ */
.mc-head { display:grid; grid-template-columns:2fr 1.2fr 1.2fr 1fr 0.7fr 96px 44px; padding:0.6rem 1.5rem; background:var(--surface-raised); border-bottom:1px solid var(--border-default); font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); }
.mc-row  { display:grid; grid-template-columns:2fr 1.2fr 1.2fr 1fr 0.7fr 96px 44px; padding:0.75rem 1.5rem; border-bottom:1px solid var(--surface-raised); align-items:center; cursor:pointer; transition:background 0.1s; }
.mc-row:hover { background:var(--surface-page); }
.mc-row.inactive { opacity:0.55; }
.mc-expand { display:none; padding:0.65rem 1.5rem; background:#fafaf7; border-bottom:1px solid var(--surface-raised); align-items:center; gap:0.5rem; flex-wrap:wrap; }
.mc-expand.open { display:flex; }
.mc-name { font-size:var(--fs-base); font-weight:600; color:var(--text-1); }
.mc-cell { font-size:var(--fs-base); color:var(--text-2); }
.mc-chev { color:var(--text-3); transition:transform 0.2s; display:inline-flex; line-height:0; }
.mc-chev.open { transform:rotate(90deg); }
.mc-table { display:block; }
.mc-cards { display:none; }
.mc-card  { padding:0.9rem 1.25rem; border-bottom:1px solid var(--surface-raised); }
.mc-card:last-child { border-bottom:none; }
.mc-card-header  { display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:0.75rem; }
.mc-card-name    { font-size:var(--fs-base); font-weight:700; color:var(--text-1); flex:1; min-width:0; }
.mc-card-meta    { font-size:var(--fs-sm); color:var(--text-3); margin-top:0.2rem; }
.mc-card-actions { display:none; gap:0.4rem; flex-wrap:wrap; margin-top:0.65rem; }
.mc-card-actions.open { display:flex; }
@media (max-width:640px) { .mc-table { display:none; } .mc-cards { display:block; } }
.car-filter-seg { display:inline-flex; align-items:center; height:36px; background:var(--surface-raised); border-radius:10px; padding:3px; gap:2px; }
.car-filter-opt { height:100%; padding:0 0.75rem; border-radius:7px; border:none; background:none; color:var(--text-3); font-size:var(--fs-caps); font-weight:600; cursor:pointer; font-family:inherit; transition:background 0.12s, color 0.12s, box-shadow 0.12s; white-space:nowrap; }
.car-filter-opt:hover { color:var(--text-2); }
.car-filter-opt.active { background:var(--surface-base); color:var(--text-1); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.car-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.25rem; }
.car-card { background:var(--surface-base); border-radius:16px; outline:1px solid rgba(231,229,228,0.7); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:box-shadow 0.2s; }
.car-card:hover { box-shadow:0 4px 20px rgba(0,0,0,0.09); }
.car-card.is-fav { outline:1px solid rgba(245,158,11,0.35); box-shadow:0 2px 12px rgba(245,158,11,0.12); }
.car-card.is-fav:hover { box-shadow:0 4px 20px rgba(245,158,11,0.18); }
.car-photo-wrap { position:relative; flex-shrink:0; }
.car-photo { width:100%; height:160px; object-fit:cover; display:block; cursor:zoom-in; }
.car-photo:focus-visible, .cc-photo:focus-visible { outline:2px solid var(--brand-mid); outline-offset:-2px; }
/* The card modal's photo is cropped the same way and opens the same lightbox. */
.cc-photo { width:100%; height:180px; object-fit:cover; display:block; cursor:zoom-in; }
.car-photo-placeholder { width:100%; height:160px; background:linear-gradient(135deg, var(--surface-raised) 0%, var(--border-default) 100%); display:flex; align-items:center; justify-content:center; color:#d4d0cc; }
.car-photo-placeholder svg { width:56px; height:56px; }
.car-card.inactive .car-photo, .car-card.inactive .car-photo-placeholder { filter:grayscale(70%); opacity:0.75; }
.fav-btn { position:absolute; top:0.65rem; right:0.65rem; z-index:2; background:rgba(255,255,255,0.92); border:1px solid var(--border-default); border-radius:50%; width:32px; height:32px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,0.1); transition:transform 0.15s; padding:0; }
.fav-btn:hover { transform:scale(1.15); }
.fav-btn svg { width:14px; height:14px; display:block; }
.inactive-banner { position:absolute; bottom:0; left:0; right:0; background:rgba(180,83,9,0.72); backdrop-filter:blur(2px); padding:0.4rem 0.75rem; display:flex; align-items:flex-start; gap:0.4rem; font-size:var(--fs-sm); color:#fff; }
.inactive-banner-label { font-weight:700; display:block; margin-bottom:1px; }
.car-body { padding:1rem 1.1rem; flex:1; display:flex; flex-direction:column; }
.car-card.inactive .car-body { opacity:0.65; }
.car-title { font-size:var(--fs-base); font-weight:700; color:var(--brand); line-height:1.25; cursor:pointer; }
.car-title:hover { text-decoration:underline; text-underline-offset:2px; }
.car-card.inactive .car-title { color:var(--text-3); }
.car-subtitle { font-size:var(--fs-sm); color:var(--text-3); margin-top:2px; margin-bottom:0.75rem; }
.car-tags { display:flex; flex-wrap:wrap; gap:0.3rem; margin-bottom:0.85rem; }
.car-tag { display:inline-flex; align-items:center; gap:3px; background:var(--surface-raised); color:var(--text-2); font-size:var(--fs-sm); font-weight:600; padding:2px 8px; border-radius:6px; border:1px solid var(--border-default); }
.car-tag.green { background:var(--brand-bg); color:var(--brand); border-color:rgba(63,122,42,0.2); }
.car-tag.car-tag-access { background:#fef3c7; color:#92400e; border-color:#fde68a; }
/* Clickable: it opens the car card where the full text sits. */
.car-tag.car-tag-terms { background:var(--brand-bg); color:var(--brand); border-color:var(--brand-mid); cursor:pointer; }
.car-tag.car-tag-terms:hover { background:var(--brand); color:white; border-color:var(--brand); }
.color-dot { width:9px; height:9px; border-radius:50%; border:1px solid rgba(0,0,0,0.12); flex-shrink:0; }
.car-meta { margin-top:auto; padding-top:0.75rem; border-top:1px solid var(--surface-raised); display:flex; justify-content:space-between; align-items:baseline; }
.car-rate      { font-weight:700; color:var(--text-1); font-size:var(--fs-base); }
.car-rate-unit { font-weight:400; color:var(--text-3); font-size:var(--fs-sm); }
.car-card.inactive .car-rate { color:var(--text-3); }
.car-actions { display:flex; align-items:center; gap:1rem; margin-top:0.6rem; }

/* ============================================================
   Car Form (page-specific additions)
   ============================================================ */
.color-picker  { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.4rem; }
.color-swatch  { width:34px; height:34px; border-radius:50%; border:3px solid transparent; cursor:pointer; transition:transform 0.15s, border-color 0.15s; box-shadow:0 1px 4px rgba(0,0,0,0.2); }
.color-swatch:hover { transform:scale(1.15); }
.color-swatch.selected { border-color:var(--brand); transform:scale(1.15); }
.color-swatch.checkered { background-image:repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) !important; background-size:12px 12px !important; }

/* ── File picker (shared: car form, registration) ── */
.file-picker {
    display:flex; align-items:center; gap:0.625rem; cursor:pointer;
    width:100%; height:44px; padding:0 0.875rem; box-sizing:border-box;
    border-radius:12px; border:1px dashed var(--border-medium);
    background:var(--surface-raised); color:var(--text-3);
    font-size:var(--fs-caps); transition:border-color 0.15s, background 0.15s;
}
.file-picker:hover { border-color:var(--brand-mid); background:var(--brand-bg-subtle); }
.file-picker:focus-within { border-color:var(--brand-mid); box-shadow:0 0 0 2px var(--brand-mid); }
.file-picker input[type=file] { position:absolute; opacity:0; width:0; height:0; }
.file-picker-icon { display:flex; color:var(--text-4); flex-shrink:0; }
.file-picker-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-picker-text.has-file { color:var(--text-1); font-weight:600; }
.file-picker-clear { display:flex; align-items:center; gap:0.5rem; margin-top:0.625rem; cursor:pointer; font-size:var(--fs-sm); color:var(--text-3); }
.file-picker-clear input { margin:0; accent-color:var(--error); }

.cf-photo-preview { display:flex; align-items:center; gap:1rem; margin-bottom:0.75rem; }
.cf-photo-preview img { width:80px; height:80px; border-radius:10px; object-fit:cover; border:1px solid var(--border-default); }
.cf-photo-hint { font-size:var(--fs-sm); color:var(--text-3); margin-top:0.25rem; }

/* ============================================================
   Hilfe (FAQ)
   ============================================================ */
.hf-search-wrap { margin-bottom:0.25rem; }
.hf-search-input { width:100%; height:2.5rem; padding:0 0.875rem; border:1px solid var(--border-medium); border-radius:0.75rem; font-size:var(--fs-sm); background:var(--surface-base); color:var(--text-1); }
.hf-search-input:focus { outline:none; border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(140,193,76,0.2); }
.hf-section { display:flex; flex-direction:column; gap:0.5rem; }
.hf-section-head { font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--text-3); margin-bottom:0.25rem; }
.hf-section details { background:var(--surface-base); border-radius:12px; outline:1px solid var(--border-default); overflow:hidden; }
.hf-section details[open] { outline-color:#c3dfa8; }
.hf-section summary { padding:0.85rem 1rem; font-weight:600; font-size:var(--fs-base); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--text-1); user-select:none; }
.hf-section summary::-webkit-details-marker { display:none; }
.hf-section summary::after { content:'▾'; font-size:0.8rem; color:var(--text-3); transition:transform 0.2s; flex-shrink:0; }
.hf-section details[open] summary::after { transform:rotate(-180deg); }
.hf-section summary:hover { background:var(--brand-bg); }
.hf-body { padding:0 1rem 1rem; font-size:var(--fs-base); color:var(--text-2); line-height:1.65; }
.hf-body p  { margin:0.4rem 0; }
.hf-body ul { margin:0.4rem 0 0.4rem 1.25rem; }
.hf-body li { margin-bottom:0.25rem; }
.hf-body strong { color:var(--text-1); }
.hf-body a  { color:var(--brand); font-weight:600; text-decoration:none; }
.hf-body a:hover { text-decoration:underline; }
.hf-tip { margin:0.75rem 0 0.25rem; padding:0.6rem 0.9rem; background:var(--brand-bg); border-left:3px solid var(--brand); border-radius:6px; font-size:var(--fs-sm); color:var(--brand-dark); }
.hf-contact { padding:1.25rem; background:var(--surface-base); border-radius:12px; outline:1px solid var(--border-default); font-size:var(--fs-base); color:var(--text-2); }
.hf-contact strong { color:var(--text-1); }
.hf-contact a { color:var(--brand); font-weight:600; text-decoration:none; }
.hf-contact a:hover { text-decoration:underline; }

/* ============================================================
   Account Delete
   ============================================================ */
.ad-warn { background:#fff8e1; border:1px solid var(--cta); border-radius:12px; padding:1rem 1.25rem; }
.ad-warn-title { font-weight:700; color:#7a5000; margin-bottom:0.4rem; font-size:var(--fs-base); }
.ad-warn p { color:#7a5000; margin:0 0 0.75rem; font-size:var(--fs-base); line-height:1.5; }
.ad-warn-list { display:flex; flex-direction:column; gap:0.4rem; }
.ad-warn-booking { background:#fffbf0; border:1px solid #f0d080; border-radius:8px; padding:0.5rem 0.75rem; font-size:var(--fs-sm); }
.ad-transfer-card { border-radius:12px; padding:1rem 1.25rem; }
.ad-transfer-card.green  { background:#f7faf2; border:1px solid #d1e8c4; }
.ad-transfer-card.orange { background:#fff8f0; border:1px solid #fddcb5; }
.ad-transfer-label { font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); margin-bottom:0.75rem; }
.ad-car-name        { font-weight:700; font-size:var(--fs-base); }
.ad-car-name.green  { color:var(--brand); }
.ad-car-name.orange { color:#7a5000; }
.ad-successor { color:var(--brand); font-weight:600; font-size:var(--fs-base); }
.ad-arrow     { color:var(--text-3); font-size:var(--fs-sm); margin:0 0.35rem; }
.selected-user-badge { display:inline-flex; align-items:center; gap:0.45rem; margin-top:0.5rem; padding:0.3rem 0.65rem 0.3rem 0.4rem; background:var(--brand-bg); outline:1px solid rgba(140,193,76,0.35); border-radius:20px; font-size:var(--fs-sm); color:var(--brand); font-weight:600; }
.badge-remove { background:none; border:none; cursor:pointer; color:var(--brand-mid); font-size:1.1rem; padding:0; line-height:1; margin:0; }
.badge-remove:hover { color:var(--error); }
.ad-confirm p   { font-size:var(--fs-base); color:var(--text-2); line-height:1.55; margin:0; }
.ad-confirm-row { display:flex; align-items:center; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.ad-btn-cancel { font-size:var(--fs-base); color:var(--text-3); text-decoration:none; font-weight:600; }
.ad-btn-cancel:hover { color:var(--text-2); }
.ad-error { font-size:var(--fs-sm); color:var(--error); margin-top:0.3rem; }

/* ============================================================
   Dark Mode
   ============================================================ */

/* -- Dark mode token overrides -- */
[data-theme="dark"] {
  color-scheme: dark;
  --surface-base:      #1f2a1b;
  --surface-page:      #15201a;
  --surface-raised:    #2a3527;
  --border-subtle:     #384433;
  --border-default:    #384433;
  --border-medium:     #4a5543;
  --text-1:            #eef2e8;
  --text-2:            #c8d4bc;
  --text-3:            #9aaf8c;
  --text-4:            #6b7d62;
  --brand:             #9fd85a;
  --brand-mid:         #8cc14c;
  --brand-bg:          #354c2a;
  --brand-bg-subtle:   #2a3c21;
  --brand-dark:        #b5e870;
  --error:             #f5a3a3;
  --error-bg:          rgba(220,80,80,0.1);
  --error-border:      rgba(220,80,80,0.3);
  --warn-bg:           rgba(245,158,11,0.08);
  --warn-text:         #f5c478;
}

/* ── Body ── */
[data-theme="dark"] body { background: var(--surface-page); color: var(--text-2); }

/* ── Nav ── */
[data-theme="dark"] #siligo-nav-header { background: var(--surface-base); border-bottom-color: var(--border-default); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
[data-theme="dark"] .siligo-logo-text { color: var(--text-1); }
[data-theme="dark"] .siligo-avatar-name { color: var(--text-2); }
[data-theme="dark"] .siligo-user-chip:hover { background: var(--surface-raised); }
[data-theme="dark"] .siligo-logout-link { color: var(--text-3); }
[data-theme="dark"] .siligo-logout-link:hover { background: var(--surface-raised); color: var(--text-1); }
[data-theme="dark"] #siligo-mobile-drawer { background: var(--surface-base); border-top-color: var(--border-default); }
[data-theme="dark"] .siligo-mobile-link { color: var(--text-2); }
[data-theme="dark"] .siligo-mobile-link:hover { background: var(--surface-raised); color: var(--text-1); }
[data-theme="dark"] .siligo-mobile-link.active { background: rgba(140,193,76,0.15); color: var(--brand-bright); }
[data-theme="dark"] .siligo-mobile-user { border-top-color: var(--border-default); }
[data-theme="dark"] .siligo-mobile-username { color: var(--text-1); }
[data-theme="dark"] .siligo-mobile-role { color: var(--text-3); }
[data-theme="dark"] #siligo-hamburger { color: var(--text-3); }

/* ── Cards and panels ── */
[data-theme="dark"] .bk-card { background: var(--surface-base); outline: 1px solid var(--border-default) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.3); }
[data-theme="dark"] .bk-card h2 { color: var(--brand-bright); }

[data-theme="dark"] .card { background: var(--surface-base); }
[data-theme="dark"] .car-card-badge { background: var(--surface-raised); outline-color: var(--border-default); color: var(--text-2); }

/* ── Page banner (green gradient header) ── */
[data-theme="dark"] .page-banner { background: linear-gradient(135deg, #1e3a14 0%, #264c1b 50%, #2f5f24 100%) !important; }

/* ── Forms ── */
[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=date],
[data-theme="dark"] input[type=time],
[data-theme="dark"] input[type=number],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--surface-raised); color: var(--text-1); border-color: var(--border-default);
}

/* ── Modals ── */
[data-theme="dark"] .modal-card { background: var(--surface-base); outline-color: var(--border-default); }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.65); }
[data-theme="dark"] .uc-footer { background: rgba(0,0,0,0.2) !important; border-top-color: var(--border-default) !important; }
[data-theme="dark"] .uc-close-btn { background: var(--surface-raised) !important; outline-color: var(--border-medium) !important; color: var(--text-2) !important; }

/* ── Toggle switch (dark mode control in settings) ── */
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; position:absolute; }
.toggle-track {
  position:absolute; inset:0; border-radius:12px; background:var(--border-medium);
  transition:background 0.2s;
}
.toggle-track::before {
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:var(--surface-base); transition:transform 0.2s; box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-track { background:var(--brand); }
.toggle-switch input:checked + .toggle-track::before { transform:translateX(20px); }

/* ── Scope tabs ── */
[data-theme="dark"] .scope-tabs { background: var(--surface-base); border-bottom-color: var(--border-default); }
[data-theme="dark"] .scope-tab { color: var(--text-3); }
[data-theme="dark"] .scope-tab:hover { color: var(--text-1); }
[data-theme="dark"] .scope-tab.active { color: var(--brand-bright); border-bottom-color: var(--brand-bright); }

[data-theme="dark"] .cf-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b5bca9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }

/* ── Car form (cf-*) ── */
[data-theme="dark"] .cf-form input[type=text],
[data-theme="dark"] .cf-form input[type=number],
[data-theme="dark"] .cf-form select,
[data-theme="dark"] .cf-form textarea { background: var(--surface-raised); color: var(--text-1); border-color: var(--border-default); }
[data-theme="dark"] .cf-section { border-bottom-color: var(--surface-raised); }
[data-theme="dark"] .cf-section-head { color: var(--text-4); }
[data-theme="dark"] .cf-step-title { color: var(--brand-bright); }
[data-theme="dark"] .cf-step-sub { color: var(--text-4); }
[data-theme="dark"] .cf-label { color: var(--text-4); }
[data-theme="dark"] .cf-req-note { color: var(--text-4); }
[data-theme="dark"] .cf-footer { border-bottom-color: var(--surface-raised); }
[data-theme="dark"] .site-footer { border-top-color: var(--surface-raised); }
[data-theme="dark"] .cf-danger { border-top-color: rgba(220,80,80,0.25) !important; }
[data-theme="dark"] .cf-check-row span { color: var(--text-1); }
[data-theme="dark"] .cf-check-row input[type=checkbox] { accent-color: var(--brand-bright); }
[data-theme="dark"] .cf-photo-hint { color: var(--text-4); }
[data-theme="dark"] .cf-photo-preview img { border-color: var(--border-default); }
[data-theme="dark"] .cf-btn.outline-green { background: rgba(140,193,76,0.1); outline-color: rgba(140,193,76,0.4); color: var(--brand-bright); }
[data-theme="dark"] .cf-btn.outline-green:hover { background: rgba(140,193,76,0.18); }
[data-theme="dark"] .cf-btn.outline-red { background: rgba(220,80,80,0.08); border-color: rgba(220,80,80,0.3); color: var(--error-border); }
[data-theme="dark"] .color-swatch.selected { border-color: var(--brand-bright); }
[data-theme="dark"] .user-chip { background: rgba(140,193,76,0.12); border-color: rgba(140,193,76,0.4); color: var(--brand-bright); }
[data-theme="dark"] .user-search-input { background: var(--surface-raised) !important; color: var(--text-1) !important; border-color: var(--border-default) !important; }
[data-theme="dark"] .user-search-input:focus { border-color: var(--brand-bright) !important; box-shadow: 0 0 0 3px rgba(159,216,90,0.15) !important; }
[data-theme="dark"] .user-suggestions { background: var(--surface-base); border-color: var(--border-default); }
[data-theme="dark"] .user-suggestions li { color: var(--text-1); }
[data-theme="dark"] .user-suggestions li:hover { background: rgba(140,193,76,0.1); }

/* ── Settings stepper sidebar ── */
[data-theme="dark"] .cf-stepper-card { background: var(--surface-base); outline-color: var(--border-default); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
[data-theme="dark"] .cf-stepper-item.active { background: rgba(140,193,76,0.15); }
[data-theme="dark"] .cf-stepper-item:hover:not(.active) { background: var(--surface-raised); }
[data-theme="dark"] .cf-stepper-item.active .cf-stepper-dot { background: var(--brand-bright); }
[data-theme="dark"] .cf-stepper-item.active .cf-stepper-name { color: var(--brand-bright); }
[data-theme="dark"] .cf-stepper-item:not(.active) .cf-stepper-name { color: var(--text-3); }

/* ── Calendar nav bar ── */
[data-theme="dark"] .cal-nav-bar { background: var(--surface-base); }
[data-theme="dark"] .cal-period-toggle { background: var(--surface-raised); box-shadow: 0 0 0 1px var(--border-default); }
[data-theme="dark"] .cal-period-btn { color: var(--text-3); }
[data-theme="dark"] .cal-period-btn:hover { background: var(--border-default); color: var(--text-1); }
[data-theme="dark"] .cal-period-btn.active { background: var(--brand-bright); color: #1a2e10; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
[data-theme="dark"] .cal-legend { color: var(--text-3); }
[data-theme="dark"] .cal-nav-today { background: var(--surface-raised); box-shadow: 0 0 0 1px var(--border-default); color: var(--text-1); }
[data-theme="dark"] .cal-nav-today:hover { background: var(--border-default); }
[data-theme="dark"] .cal-nav-date-group { background: var(--surface-raised); box-shadow: 0 0 0 1px var(--border-default); color: var(--text-1); }
[data-theme="dark"] .cal-nav-arrow { color: var(--text-3); }
[data-theme="dark"] .cal-nav-arrow:hover { background: var(--border-default); }
[data-theme="dark"] .cal-nav-label { border-color: var(--border-default); }
[data-theme="dark"] .cal-dp { background: var(--surface-base); outline-color: var(--border-default); }

/* ── Calendar grid ── */
[data-theme="dark"] .cal-head-corner { background: var(--surface-raised); color: var(--text-4); border-color: var(--border-default) !important; }
[data-theme="dark"] .cal-day-header { background: var(--surface-raised); border-color: var(--border-default) !important; }
[data-theme="dark"] .cal-day-header.today { background: #2e2215; }
[data-theme="dark"] .cal-day-header.today .cal-day-name,
[data-theme="dark"] .cal-day-header.today .cal-day-date { color: #f5a84e; }
[data-theme="dark"] .cal-day-header.weekend-col { background: #1e2819; }
[data-theme="dark"] .cal-hour-axis td { border-bottom-color: var(--border-default) !important; }
[data-theme="dark"] .cal-hour-axis .cal-head-corner,
[data-theme="dark"] .cal-hour-axis-cell { background: var(--surface-raised); }
[data-theme="dark"] .cal-car-cell { background: var(--surface-base); color: var(--text-1); border-color: var(--border-default) !important; }
[data-theme="dark"] .cal-day-cell { border-color: var(--border-default) !important; }
[data-theme="dark"] .cal-day-cell.free    { background: var(--surface-base); }
[data-theme="dark"] .cal-day-cell.partial { background: transparent; }
[data-theme="dark"] .cal-day-cell.today-col  { background: rgba(234,143,30,0.08); }
[data-theme="dark"] .cal-day-cell.weekend-col { background: #1a2518; }
[data-theme="dark"] .cal-day-cell.sel-hover   { background: rgba(140,193,76,0.18) !important; }
[data-theme="dark"] .cal-day-cell.sel-active  { background: #7ab840 !important; }
[data-theme="dark"] .cal-day-cell.sel-blocked { background: rgba(220,80,80,0.15) !important; outline-color: var(--error-dark); }
[data-theme="dark"] tr[data-restricted="1"] .cal-day-cell { background-image: repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(255,255,255,0.04) 4px,rgba(255,255,255,0.04) 8px); }
[data-theme="dark"] .booked-mine { background:#4a8a32; }
[data-theme="dark"] .cal-dp-cell:hover,
[data-theme="dark"] .cal-dp-cell.range-end,
[data-theme="dark"] .cal-dp-cell.preview { background:var(--brand); color:#1a2e10; }
[data-theme="dark"] .cal-bar-tip  { background:var(--surface-raised); outline-color:var(--border-medium); box-shadow:0 4px 20px rgba(0,0,0,0.5); }
[data-theme="dark"] .cal-tip-user  { color:var(--text-1); }
[data-theme="dark"] .cal-tip-dest  { color:var(--text-2); }
[data-theme="dark"] .cal-tip-dates { color:var(--text-4); }
[data-theme="dark"] .cal-grid-wrap { outline-color: var(--border-default) !important; }

/* ── Car picker (calendar sidebar) ── */
[data-theme="dark"] .car-picker-toggle:hover { background: var(--surface-raised); }
[data-theme="dark"] .car-picker-toggle-label { color: var(--text-2); }
[data-theme="dark"] .car-picker-toggle.is-filtered { background: var(--surface-raised); }
[data-theme="dark"] .car-picker-section { border-bottom-color: var(--border-default); }
[data-theme="dark"] .car-picker-item { color: var(--text-2); }
[data-theme="dark"] .car-picker-item:hover { background: rgba(140,193,76,0.15); color: var(--brand-bright); }
[data-theme="dark"] .car-picker-link { color: var(--text-3); }
[data-theme="dark"] .car-picker-link:hover { color: var(--brand-bright); }

/* ── My-cars table ── */
/* ── Status badges (Aktiv / Inaktiv) ── */
.status-badge { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm); font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.status-dot   { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.status-badge--active   { background:var(--brand-bg); color:var(--brand); border:1px solid rgba(63,122,42,0.2); }
.status-badge--active   .status-dot { background:var(--brand); }
.status-badge--pending  { background:var(--warn-bg); color:var(--warn-text); border:1px solid rgba(245,158,11,0.3); font-size:var(--fs-tiny); padding:1px 8px; vertical-align:middle; }
.status-badge--pending  .status-dot { background:var(--amber); }
.status-badge--inactive { background:var(--surface-raised); color:var(--text-3); border:1px solid var(--border-default); }
.status-badge--inactive .status-dot { background:var(--text-4); }
[data-theme="dark"] .status-badge--active   { background:rgba(140,193,76,0.15); color:var(--brand-bright); border-color:rgba(140,193,76,0.25); }
[data-theme="dark"] .status-badge--active   .status-dot { background:var(--brand-bright); }
[data-theme="dark"] .status-badge--inactive { background:var(--surface-raised); color:var(--text-3); border-color:var(--border-default); }
[data-theme="dark"] .status-badge--inactive .status-dot { background:var(--border-medium); }

[data-theme="dark"] .card-title { color: var(--text-1) !important; }
[data-theme="dark"] .flash-success { background:#1e3318; color:var(--brand-bright); border-left-color:#7ab840; }
[data-theme="dark"] .flash-error   { background:rgba(220,80,80,0.12); color:var(--error-border); border-left-color:rgba(220,80,80,0.5); }
[data-theme="dark"] .flash-warning { background:rgba(245,158,11,0.08); color:var(--warn-text); border-left-color:rgba(245,158,11,0.4); }
[data-theme="dark"] .flash-info    { background:#1e3318; color:var(--brand-bright); border-left-color:#7ab840; }
[data-theme="dark"] .al-warn    { background:rgba(245,158,11,0.12);  outline-color:rgba(245,158,11,0.3);  color:var(--warn-text); }
[data-theme="dark"] .al-error   { background:rgba(220,80,80,0.12);   outline-color:rgba(220,80,80,0.3);   color:var(--error-border); }
[data-theme="dark"] .al-ok      { background:rgba(140,193,76,0.12);  outline-color:rgba(140,193,76,0.3);  color:var(--brand-bright); }
[data-theme="dark"] .al-ok label { color: var(--text-1) !important; }
[data-theme="dark"] .al-ok label a { color: var(--brand-bright) !important; }
[data-theme="dark"] .al-info    { background:rgba(56,150,220,0.12);  outline-color:rgba(56,150,220,0.3);  color:#90c7ea; }
[data-theme="dark"] .al-neutral { background:rgba(42,53,39,0.6);     outline-color:var(--border-default);               color:var(--text-2); }
[data-theme="dark"] .card-header-row { border-bottom-color: var(--surface-raised) !important; }

/* ── My-cars table ── */
[data-theme="dark"] .mc-head { background: var(--surface-raised); border-bottom-color: var(--border-default); color: var(--text-3); }
[data-theme="dark"] .mc-row { border-bottom-color: var(--surface-raised); }
[data-theme="dark"] .mc-row:hover { background: var(--surface-raised); }
[data-theme="dark"] .mc-name { color: var(--text-1); }
[data-theme="dark"] .mc-cell { color: var(--text-2); }
[data-theme="dark"] .mc-expand { background: #232f1f; border-bottom-color: var(--border-default); }
[data-theme="dark"] .mc-card { border-bottom-color: var(--surface-raised); }
[data-theme="dark"] .mc-card-name { color: var(--text-1); }
[data-theme="dark"] .mc-card-meta { color: var(--text-3); }
[data-theme="dark"] .mc-chev { color: var(--text-4); }

/* ── Car card modal ── */
[data-theme="dark"] .car-card-modal { background: var(--surface-base); outline-color: rgba(56,68,51,0.7); }

/* ── Car cards ── */
[data-theme="dark"] .car-card { background: var(--surface-base); outline-color: rgba(56,68,51,0.7); }
[data-theme="dark"] .car-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
[data-theme="dark"] .car-card.is-fav { outline-color: rgba(245,158,11,0.3); box-shadow: 0 2px 12px rgba(245,158,11,0.08); }
[data-theme="dark"] .car-photo-placeholder { background: linear-gradient(135deg, var(--surface-raised) 0%, var(--border-default) 100%); color: var(--border-medium); }
[data-theme="dark"] .car-title { color: var(--brand-bright); }
[data-theme="dark"] .car-card.inactive .car-title { color: var(--text-3); }
[data-theme="dark"] .car-subtitle { color: var(--text-3); }
[data-theme="dark"] .car-tag { background: var(--surface-raised); color: var(--text-2); border-color: var(--border-default); }
[data-theme="dark"] .car-tag.green { background: rgba(140,193,76,0.15); color: var(--brand-bright); border-color: rgba(140,193,76,0.25); }
[data-theme="dark"] .car-tag.car-tag-access { background: rgba(245,158,11,0.1); color: #f5c478; border-color: rgba(245,158,11,0.25); }
[data-theme="dark"] .fav-btn { background: rgba(31,42,27,0.88); border-color: var(--border-medium); }
[data-theme="dark"] .car-meta { border-top-color: var(--border-default); }
[data-theme="dark"] .car-rate { color: var(--text-1); }

/* ── Nachrichten ── */
[data-theme="dark"] .nc-sidebar { border-right-color: var(--border-default); }
[data-theme="dark"] .nc-thread { background: var(--surface-base); border-bottom-color: var(--border-default); }
[data-theme="dark"] .nc-thread:hover { background: var(--surface-raised); }
[data-theme="dark"] .nc-thread.active { background: rgba(140,193,76,0.1); }
[data-theme="dark"] .nc-thread-icon { background: linear-gradient(135deg, #8cc14c, var(--brand-fixed)); }
[data-theme="dark"] .nc-thread-name { color: var(--text-3); }
[data-theme="dark"] .nc-thread.active .nc-thread-name { color: var(--brand-bright); }
[data-theme="dark"] .nc-thread-preview { color: var(--text-4); }
[data-theme="dark"] .nc-thread-preview.unread { color: var(--text-1); }
[data-theme="dark"] .nc-thread-meta { color: var(--text-4); }
[data-theme="dark"] .nc-thread-time { color: var(--text-4); }
[data-theme="dark"] .nc-tab-bar { border-bottom-color: var(--border-default); }
[data-theme="dark"] .nc-tab-btn { background: var(--surface-raised); color: var(--text-3); }
[data-theme="dark"] .nc-tab-btn.active { background: var(--brand-bg); color: var(--brand-mid); }
[data-theme="dark"] .nc-tab-count { background: rgba(255,255,255,.08); }
[data-theme="dark"] .nc-tab-btn.active .nc-tab-count { background: rgba(140,193,76,.15); }
[data-theme="dark"] .nc-archived-item { background: var(--surface-base); border-bottom-color: var(--border-default); }
[data-theme="dark"] .nc-restore-btn { background: var(--surface-raised); border-color: var(--border-medium); color: var(--text-2); }
[data-theme="dark"] .nc-restore-btn:hover { background: var(--border-default); border-color: var(--brand-mid); color: var(--brand-mid); }
[data-theme="dark"] .nc-panel-header { border-bottom-color: var(--border-default); }
[data-theme="dark"] .nc-panel-name { color: var(--brand-bright); }
[data-theme="dark"] .nc-panel-meta { color: var(--text-3); }
[data-theme="dark"] .nc-mob-header { background: var(--surface-base); border-bottom-color: var(--border-default); }
[data-theme="dark"] .nc-mob-back:hover { background: var(--surface-raised); }
[data-theme="dark"] .nc-mob-back svg { stroke: var(--text-3); }
[data-theme="dark"] .nc-mob-name { color: var(--brand-bright); }
[data-theme="dark"] .nc-mob-meta { color: var(--text-3); }
[data-theme="dark"] .nc-pinned { background: var(--surface-base); border-bottom-color: var(--border-default); }
[data-theme="dark"] .nc-messages { background: var(--surface-page); }
[data-theme="dark"] .nc-date-divider { color: var(--text-4); }
[data-theme="dark"] .nc-msg.them .nc-msg-bubble { background: var(--surface-raised); color: var(--text-1); outline-color: var(--border-default); }
[data-theme="dark"] .nc-msg-author { color: var(--text-4); }
[data-theme="dark"] .nc-msg-time { color: var(--text-4); }
[data-theme="dark"] .nc-input-footer { border-top-color: var(--border-default); }
[data-theme="dark"] .nc-compose-field { background: var(--surface-raised); outline-color: var(--border-default); }
[data-theme="dark"] .nc-compose-field:focus-within { outline-color: var(--brand-bright); }
[data-theme="dark"] .nc-compose-field textarea { color: var(--text-1); }
[data-theme="dark"] .nc-compose-field textarea::placeholder { color: var(--text-4); }
[data-theme="dark"] .nc-empty-icon { background: var(--surface-raised); }
[data-theme="dark"] .nc-empty-icon svg { stroke: var(--border-medium); }
[data-theme="dark"] .nc-empty-state strong { color: var(--text-3) !important; }
[data-theme="dark"] .nc-empty-state p { color: var(--text-3); }
[data-theme="dark"] .nc-action-confirm { background: rgba(140,193,76,0.15); border-color: rgba(140,193,76,0.3); color: var(--brand-bright); }
[data-theme="dark"] .nc-action-reject { background: rgba(220,80,80,0.1); border-color: rgba(220,80,80,0.25); color: var(--error-border); }
[data-theme="dark"] .nc-pending-banner { background: rgba(245,158,11,0.1) !important; border-bottom-color: rgba(245,158,11,0.3) !important; }
[data-theme="dark"] .nc-pending-banner svg { stroke: var(--warn-text); }
[data-theme="dark"] .nc-pending-banner span { color: var(--warn-text) !important; }

/* ── Hilfe (FAQ) ── */
[data-theme="dark"] .hf-search-input { border-color: #3a4a35; }
[data-theme="dark"] .hf-section-head { color: var(--text-4); }
[data-theme="dark"] .hf-section details { background: var(--surface-base); outline-color: var(--border-default); }
[data-theme="dark"] .hf-section details[open] { outline-color: rgba(140,193,76,0.4); }
[data-theme="dark"] .hf-section summary { color: var(--text-1); }
[data-theme="dark"] .hf-section summary::after { color: var(--text-4); }
[data-theme="dark"] .hf-section summary:hover { background: rgba(140,193,76,0.08); }
[data-theme="dark"] .hf-body { color: var(--text-2); }
[data-theme="dark"] .hf-body strong { color: var(--text-1); }
[data-theme="dark"] .hf-body a { color: var(--brand-bright); }
[data-theme="dark"] .hf-tip { background: rgba(140,193,76,0.1); border-left-color: var(--brand-bright); color: var(--brand-bright); }
[data-theme="dark"] .hf-contact { background: var(--surface-raised); outline-color: var(--border-default); color: var(--text-2); }
[data-theme="dark"] .hf-contact strong { color: var(--text-1); }
[data-theme="dark"] .hf-contact a { color: var(--brand-bright); }

/* ── Settings ── */
[data-theme="dark"] .st-photo-edit-btn { background: var(--surface-raised) !important; box-shadow: 0 0 0 1px var(--border-default) !important; }
[data-theme="dark"] .st-avatar img,
[data-theme="dark"] .st-avatar-initials { box-shadow: 0 0 0 4px var(--surface-raised), 0 1px 4px rgba(0,0,0,0.3) !important; }
[data-theme="dark"] .st-cal-link { color: var(--brand-bright) !important; }
[data-theme="dark"] .fav-chip { background: rgba(140,193,76,0.12); outline-color: rgba(140,193,76,0.3); color: var(--brand-bright); }
[data-theme="dark"] .fav-chip-remove { color: #6aaf3a; }
[data-theme="dark"] .fav-combobox { background: var(--surface-raised); border-color: var(--border-default); }
[data-theme="dark"] .fav-combobox input { color: var(--text-1); }
[data-theme="dark"] .fav-combobox-arrow { color: var(--text-4); }
[data-theme="dark"] .fav-dropdown { background: var(--surface-base); border-color: var(--border-default); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
[data-theme="dark"] .fav-dropdown-item { color: var(--text-1); }
[data-theme="dark"] .fav-dropdown-item:hover { background: rgba(140,193,76,0.12); color: var(--brand-bright); }
[data-theme="dark"] .fav-dropdown-item.already-fav { color: var(--text-4); }
[data-theme="dark"] .cal-feed-url { background: var(--surface-raised); border-color: var(--border-default); color: var(--text-2); }
[data-theme="dark"] .cal-copy-btn { background: var(--surface-raised); border-color: var(--border-default); color: var(--text-2); }
[data-theme="dark"] .cal-copy-btn:hover { background: var(--border-default); }

/* ── Home page widgets ── */
[data-theme="dark"] .home-card { background: var(--surface-base); outline-color: rgba(56,68,51,0.9); }
[data-theme="dark"] .home-empty { border-top-color: var(--surface-raised) !important; color: var(--text-3); }
[data-theme="dark"] .home-card-title { color: var(--text-1); }
[data-theme="dark"] .home-card-link { color: var(--brand-bright); }
[data-theme="dark"] .home-card-link:hover { color: #b5e870; }
[data-theme="dark"] .home-ride-row { border-top-color: var(--surface-raised); }
[data-theme="dark"] .home-ride-row:hover { background: var(--surface-raised); }
[data-theme="dark"] .home-ride-name { color: var(--text-1); }
[data-theme="dark"] .home-ride-meta { color: var(--text-3); }
[data-theme="dark"] .home-stat-num { color: var(--text-1); }
[data-theme="dark"] .home-stat-label { color: var(--text-3); }
[data-theme="dark"] .home-ql-label { color: var(--text-1); }
[data-theme="dark"] .home-ql-tile { background: var(--surface-base); outline-color: rgba(56,68,51,0.9); }
[data-theme="dark"] .home-ql-tile:hover { outline-color: var(--border-medium); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
[data-theme="dark"] .home-ql-tile.primary { background: rgba(140,193,76,0.08); outline-color: rgba(140,193,76,0.3); }
[data-theme="dark"] .home-ql-name { color: var(--text-1); }
[data-theme="dark"] .home-ql-desc { color: var(--text-3); }
[data-theme="dark"] .ql-amber  { background: rgba(245,158,11,0.14) !important; color: var(--warn-text) !important; }
[data-theme="dark"] .ql-violet { background: rgba(160,120,220,0.14) !important; color: #c3a7f0 !important; }
[data-theme="dark"] .ql-purple { background: rgba(160,120,220,0.14) !important; color: #c3a7f0 !important; }
[data-theme="dark"] .ql-rose   { background: rgba(225,100,120,0.14) !important; color: #f09ab0 !important; }

/* ── Search page ── */
[data-theme="dark"] .search-card { background: var(--surface-base); outline: 1px solid var(--border-default) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.3); }
[data-theme="dark"] .form-section-label { color: var(--text-2); }
[data-theme="dark"] .form-section-label-icon { background: rgba(140,193,76,0.15); color: var(--brand-bright); }
[data-theme="dark"] .field-label { color: var(--text-3); }
[data-theme="dark"] .btn-reset { color: var(--text-3); }
[data-theme="dark"] .btn-reset:hover { color: var(--text-1); }
[data-theme="dark"] .search-reset-bar { border-top-color: var(--border-default) !important; }
[data-theme="dark"] .date-pill { background: var(--surface-raised); color: var(--text-2); }
[data-theme="dark"] .date-pill:hover { background: var(--border-default); }
[data-theme="dark"] .date-pill.active { background: var(--brand-bright); color: #1a2e10; }
[data-theme="dark"] .time-pill { background: var(--surface-raised); color: var(--text-2); }
[data-theme="dark"] .time-pill:hover { background: var(--border-default); }
[data-theme="dark"] .time-pill.active { background: var(--brand-bright); color: #1a2e10; }
[data-theme="dark"] .type-pill { background: var(--surface-raised); color: var(--text-2); }
[data-theme="dark"] .type-pill:hover { background: var(--border-default); }
[data-theme="dark"] .type-pill.selected { background: var(--brand-bright); color: #1a2e10; }
[data-theme="dark"] .preset-loc-btn { background: var(--surface-raised); color: var(--text-2); }
[data-theme="dark"] .preset-loc-btn:hover { background: var(--border-default); }
[data-theme="dark"] .preset-loc-btn.active { background: var(--brand-bright); color: #1a2e10; }
[data-theme="dark"] .dest-add-btn,
[data-theme="dark"] .dest-rm-btn { background: var(--surface-raised); border-color: var(--border-medium); color: var(--text-2); }
[data-theme="dark"] .dest-add-btn:hover { background: var(--border-default); }
[data-theme="dark"] .location-suggestions { background: var(--surface-base); }
[data-theme="dark"] .location-suggestions li:hover,
[data-theme="dark"] .location-suggestions li.active { background: rgba(140,193,76,0.15); }
[data-theme="dark"] .location-suggestions .loc-name { color: var(--text-1); }
[data-theme="dark"] .recurring-panel,
[data-theme="dark"] .recurring-panel label,
[data-theme="dark"] .recurring-panel span,
[data-theme="dark"] .recurring-panel div { color: var(--text-1) !important; }
[data-theme="dark"] .recurring-panel input[type=number],
[data-theme="dark"] .recurring-panel input[type=date],
[data-theme="dark"] .recurring-panel select { background: var(--surface-raised) !important; color: var(--text-1) !important; border-color: var(--border-default) !important; }
[data-theme="dark"] .recurring-panel input[type=radio] { accent-color: var(--brand-bright) !important; }
[data-theme="dark"] .recurring-error { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.4); color: var(--warn-text); }
[data-theme="dark"] .result-heading { color: var(--text-1); }
[data-theme="dark"] .car-name-link { color: var(--brand-bright); }
[data-theme="dark"] .car-name-link:hover { color: #b5e870; }
[data-theme="dark"] .result-card { background: var(--surface-base); outline-color: rgba(56,68,51,0.7); }
[data-theme="dark"] .result-card:hover { outline-color: var(--border-medium); }
[data-theme="dark"] .result-card.gap-fit   { background: rgba(140,193,76,0.08); }
[data-theme="dark"] .result-card.gap-fit-2 { background: rgba(230,126,34,0.10); }
[data-theme="dark"] .result-card.is-fav    { background: rgba(140,193,76,0.06); }
[data-theme="dark"] .result-badge { background: var(--surface-raised); color: var(--text-2); outline-color: var(--border-default); }
[data-theme="dark"] .result-rate { color: var(--text-1); }
[data-theme="dark"] .gap-badge.conflict { background: rgba(251,191,36,0.15); color: var(--warn-text); outline: 1px solid rgba(251,191,36,0.4); }
[data-theme="dark"] .merge-card { background: var(--surface-base); outline-color: rgba(56,68,51,0.7); }
[data-theme="dark"] .merge-card-header { border-bottom-color: var(--border-default) !important; }
[data-theme="dark"] .merge-item-row { border-bottom-color: var(--border-default) !important; }
[data-theme="dark"] .merge-comment-panel { background: rgba(140,193,76,0.06); border-top-color: var(--border-default); }
[data-theme="dark"] .bk-modal-footer { background: rgba(42,53,39,0.5); border-top-color: var(--border-default); }

/* ── Car card modal content ── */
[data-theme="dark"] .car-size-tag { background: rgba(140,193,76,0.15); color: var(--brand-bright); outline-color: rgba(140,193,76,0.3); }
[data-theme="dark"] .cc-title    { color: var(--text-1); }
[data-theme="dark"] .cc-subtitle { color: var(--text-3); }
[data-theme="dark"] .cc-desc     { color: var(--text-2); }
[data-theme="dark"] .cc-label    { color: var(--text-4); }
[data-theme="dark"] .cc-value    { color: var(--text-1); }
[data-theme="dark"] .cc-inactive { background: rgba(251,191,36,0.1); outline-color: rgba(251,191,36,0.3); color: var(--warn-text); }
[data-theme="dark"] .cc-info-grid { border-top-color: var(--border-default); }
[data-theme="dark"] .cc-photo-placeholder { background: linear-gradient(135deg,var(--surface-raised),var(--border-default)); color: var(--border-medium); }

/* ── bk-modal card + backdrop ── */
[data-theme="dark"] .bk-modal-backdrop { background: rgba(0,0,0,0.65); }
[data-theme="dark"] .bk-modal { background: var(--surface-base); outline-color: var(--border-default); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
[data-theme="dark"] .bk-modal-close { color: var(--text-4); }
[data-theme="dark"] .bk-modal-desc strong { color: var(--text-1); }

/* ── Modal header elements ── */
[data-theme="dark"] .bk-modal-icon.green { background: rgba(140,193,76,0.15); color: var(--brand-bright); }
[data-theme="dark"] .bk-modal-icon.warn  { background: rgba(251,191,36,0.12); color: var(--warn-text); }
[data-theme="dark"] .bk-modal-icon.error { background: rgba(220,80,80,0.12);  color: var(--error-border); }
[data-theme="dark"] .bk-modal-title      { color: var(--brand-bright); }
[data-theme="dark"] .bk-modal-title.warn { color: var(--warn-text); }
[data-theme="dark"] .bk-modal-title.error { color: var(--error-border); }
[data-theme="dark"] .bk-modal-desc  { color: var(--text-2); }
[data-theme="dark"] .bk-modal-close:hover { background: var(--surface-raised); }

/* ── Ghost button ── */
[data-theme="dark"] .cf-btn.ghost { background: var(--surface-raised); outline-color: var(--border-medium); color: var(--text-2); }
[data-theme="dark"] .cf-btn.ghost:hover { background: var(--border-default); }

/* ── Bookings table & cards ── */
[data-theme="dark"] .bk-select { background-color: var(--surface-raised); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b5bca9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }
[data-theme="dark"] .bk-filters { border-bottom-color: var(--border-default); }
[data-theme="dark"] .bk-field-label { color: var(--text-3); }
[data-theme="dark"] .bk-filter-link { color: var(--text-3); }
[data-theme="dark"] .bk-filter-link:hover { color: var(--text-1); }
[data-theme="dark"] .bk-table thead th { background: rgba(42,53,39,0.7); border-bottom-color: var(--border-default); color: var(--text-4); }
[data-theme="dark"] .bk-table tbody td { border-bottom-color: var(--surface-raised); }
[data-theme="dark"] .bk-table tbody tr:hover td { background: rgba(42,53,39,0.4); }
[data-theme="dark"] .bk-table tbody tr.bk-series-row td { background: rgba(140,193,76,0.07); }
[data-theme="dark"] .bk-table tbody tr.bk-series-row:hover td { background: rgba(140,193,76,0.12) !important; }
[data-theme="dark"] .bk-table tbody tr.bk-series-sub-row td { background: rgba(140,193,76,0.04); }
[data-theme="dark"] .bk-table tbody tr.bk-series-sub-row:hover td { background: rgba(140,193,76,0.1) !important; }
[data-theme="dark"] .bk-badge-blue  { background: rgba(59,130,246,0.12);  color: #93c5fd; box-shadow: 0 0 0 1px rgba(59,130,246,0.25) inset; }
[data-theme="dark"] .bk-badge-amber { background: rgba(245,158,11,0.12);  color: var(--warn-text); box-shadow: 0 0 0 1px rgba(245,158,11,0.3) inset; }
[data-theme="dark"] .bk-car-name    { color: var(--brand-bright); }
[data-theme="dark"] .comment-panel  { background: rgba(140,193,76,0.05); border-top-color: var(--border-default); }
[data-theme="dark"] .comment-item   { border-bottom-color: var(--surface-raised); }
[data-theme="dark"] .comment-toggle { color: var(--text-3); }
[data-theme="dark"] .series-chevron { color: var(--text-3); }
[data-theme="dark"] .comment-text   { color: var(--text-2); }
[data-theme="dark"] .comment-time   { color: var(--text-4); }
[data-theme="dark"] .comment-input-wrap { background: var(--surface-raised); box-shadow: 0 0 0 1px var(--border-medium); }
[data-theme="dark"] .comment-input-pill { background: var(--surface-raised); border-color: var(--border-medium); color: var(--text-1); }
[data-theme="dark"] .comment-input-pill:focus { border-color: var(--brand-bright); box-shadow: 0 0 0 2px rgba(159,216,90,0.2); }
[data-theme="dark"] .comment-form textarea { background: var(--surface-raised); border-color: var(--border-medium); color: var(--text-1); }
[data-theme="dark"] .bk-mobile-card { background: var(--surface-base); border-color: var(--border-default); }
[data-theme="dark"] .bk-mobile-series-card { background: rgba(140,193,76,0.07); border-color: rgba(140,193,76,0.25); }
[data-theme="dark"] .bk-mobile-car-name { color: var(--brand-bright); }
[data-theme="dark"] .bk-mobile-dates { color: var(--text-2); }
[data-theme="dark"] .bk-mobile-dest { color: var(--text-3); }
[data-theme="dark"] .bk-card-expand-btn { border-color:var(--border-default); color:var(--text-2); }
[data-theme="dark"] .bk-card-expand-btn:hover { background:var(--surface-raised); }
[data-theme="dark"] .series-card-occurrences { border-top-color: rgba(140,193,76,0.2); }
[data-theme="dark"] .series-occurrence-card { background: var(--surface-raised); border-color: var(--border-default); }
[data-theme="dark"] .booking-card-comment-panel { border-top-color: var(--border-default) !important; }
[data-theme="dark"] .bk-empty { color: var(--text-3); }
[data-theme="dark"] .bk-empty a { color: var(--brand-bright); }

/* ── Calendar booking modal ── */
.cbm-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--surface-raised); display:flex; align-items:flex-start; gap:0.875rem; flex-shrink:0; }
.cbm-header-icon { flex-shrink:0; width:40px; height:40px; border-radius:10px; background:var(--brand-bg); display:grid; place-items:center; color:var(--brand); }
.cbm-header-title { font-size:18px; font-weight:700; color:var(--brand); line-height:1.2; }
.cbm-header-sub { font-size:var(--fs-sm); color:var(--text-3); margin-top:3px; overflow-wrap:anywhere; hyphens:none; }
[data-theme="dark"] .cbm-header { border-bottom-color: var(--border-default); }
[data-theme="dark"] .cbm-header-icon { background: rgba(140,193,76,0.15); color: var(--brand-bright); }
[data-theme="dark"] .cbm-header-title { color: var(--brand-bright); }
[data-theme="dark"] .cbm-header-sub { color: var(--text-4); }
.cbm-dest-input { width:100%; height:44px; padding:0 0.75rem; font-size:var(--fs-body); outline:1px solid var(--border-default); border:none; border-radius:10px; box-sizing:border-box; font-family:inherit; transition:outline-color 0.15s,outline-width 0.15s; }
.cbm-time-input { width:100%; height:44px; padding:0 0.75rem; font-size:var(--fs-base); outline:1px solid var(--border-default); border:none; border-radius:10px; font-family:inherit; box-sizing:border-box; transition:outline-color 0.15s,outline-width 0.15s; }
.cbm-preset-btn { height:28px; padding:0 12px; background:var(--surface-base); outline:1px solid var(--border-default); border:none; color:var(--text-2); border-radius:20px; font-size:var(--fs-sm); cursor:pointer; font-weight:600; font-family:inherit; transition:background 0.12s,outline-color 0.12s,color 0.12s; }
.cbm-preset-btn:hover { background:var(--brand-bg-subtle); outline-color:var(--brand-mid); color:var(--brand); }
.cbm-dest-btn { width:28px; height:28px; border-radius:50%; border:1px solid var(--border-medium); background:var(--surface-base); color:var(--text-2); cursor:pointer; flex-shrink:0; padding:0; margin-top:8px; font-family:inherit; transition:background 0.12s,border-color 0.12s,color 0.12s; display:inline-flex; align-items:center; justify-content:center; }
.cbm-dest-btn:hover { background:var(--surface-raised); border-color:var(--text-4); }
.cbm-tl-bar { position:relative; height:36px; background:var(--surface-raised); border-radius:8px; outline:1px solid rgba(231,229,228,0.8); overflow:hidden; }
.cbm-tl-ticks { display:flex; justify-content:space-between; font-size:var(--fs-tiny); color:var(--text-4); margin-top:2px; }

[data-theme="dark"] .cbm-tl-bar { background:var(--surface-raised); outline-color:var(--border-default); }
[data-theme="dark"] .cbm-tl-ticks { color: var(--text-4); }
.cbm-dest-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-4); pointer-events:none; display:flex; }
[data-theme="dark"] .cbm-dest-icon { color: var(--text-4); }
[data-theme="dark"] .cbm-dest-input { background:var(--surface-raised); color:var(--text-1); outline-color:var(--border-default); }
[data-theme="dark"] .cbm-time-input { background:var(--surface-raised); color:var(--text-1); outline-color:var(--border-default); }
[data-theme="dark"] .cbm-preset-btn { background:var(--surface-raised); outline-color:var(--border-default); color:var(--text-2); }
[data-theme="dark"] .cbm-preset-btn:hover { background:var(--border-default); outline-color:var(--brand-bright); color:var(--brand-bright); }
[data-theme="dark"] .cbm-dest-btn { background:var(--surface-raised); border-color:var(--border-default); color:var(--text-2); }
[data-theme="dark"] .cbm-dest-btn:hover { background:var(--border-default); border-color:var(--border-medium); }
[data-theme="dark"] #cbm-terms-wrap a { color: var(--brand-bright); }

/* ── Auth pages (login, register, security question, password reset) ── */
[data-theme="dark"] .auth-error-box { background: rgba(220,80,80,0.12); border-color: rgba(220,80,80,0.3); color: var(--error-border); }
[data-theme="dark"] .auth-field-error { color: var(--error-border); }

/* Login (split-screen) */
[data-theme="dark"] body:has(.login-split) { background: var(--surface-base); }
[data-theme="dark"] .login-hero { background:linear-gradient(135deg, #1e3a14 0%, #2a5020 50%, #356a28 100%); }
[data-theme="dark"] .login-input:focus { border-color:var(--brand-bright); box-shadow:0 0 0 2px var(--brand-bright); }
[data-theme="dark"] .login-submit:hover { background:var(--brand-bright); color:#14210d; }