/* ===== Color palette (aligned with hafen-schleimuende.de) ===== */
:root {
    --blue: #2ea3f2;
    --blue-dark: #005497;
    --text: #333;
    --text-muted: #666;
    --bg: #ffffff;
    --bg-light: #f5f7fa;
    --border: #dde1e6;
    --eintrag-own: #005497;
    --eintrag-other: #a0cfee;
    --eintrag-placeholder: #f4e4a3;
    /* Today's cell: midpoint between the own (#005497) and other (#a0cfee)
       Eintrag-strip colors, so it reads as "today" without matching either. */
    --today: #5092c3;
    --bg-outside: #e6eaee;
    --weekend-bg: #f0f4f8;
    --weekend-outside-bg: #dfe5ec;
    --danger: #d9534f;

    /* Pico overrides */
    --pico-primary: var(--blue-dark);
    --pico-primary-hover: var(--blue);
    --pico-font-family: Verdana, Geneva, sans-serif;
    --pico-nav-element-spacing-horizontal: 0;
}

/* ===== Reset & base ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
    color: var(--text);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

/* ===== Header ===== */
.header-bar {
    background: var(--blue-dark);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    height: 3.5rem;
}

.logo {
    color: #fff;
    text-decoration: none;
    /*font-weight: bold;*/
    font-size: 1.1rem;
    white-space: nowrap;
}

.logo:hover {
    color: var(--blue);
}

/* Hamburger */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    margin: 5px 0;
    transition: transform 0.2s;
}

.header {
    padding: 0;
}

/* Nav */
.main-nav {
    display: flex;
    align-items: flex-start;
    margin-left: 2rem;
    flex: 1;
    padding-left: 1rem;
    padding-right: 1rem;
}

.main-nav ul {
    list-style: none;
    gap: 1.5rem;
}

/* Mobile profile links: hidden on desktop */
.mobile-profile-links {
    display: none;
}

.main-nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.main-nav a:hover,
.main-nav a.active {
    /*color: var(--text);*/
    background: rgba(255, 255, 255, 0.15);
}

/* Profile dropdown */
.nav-right {
    margin-left: auto;
}

.profile-menu {
    position: relative;
    margin-top: 0.5rem;
}

.profile-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    white-space: nowrap;
}

.profile-toggle:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.profile-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.35rem;
    background: var(--blue-dark);
    border: 1px solid var(--blue-dark);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    padding: 0.35rem 0;
    list-style: none;
    z-index: 200;
    overflow: hidden;
}

.profile-menu.open .profile-dropdown {
    display: block;
}

.profile-dropdown li {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.profile-dropdown li form {
    margin: 0;
    padding: 0;
}

/* Both the link items and the logout button share one style so all four
   dropdown rows align on a single grid. Pico CSS adds margin/font-weight/
   line-height defaults to <button> and <form>, so the rule re-zeroes them
   explicitly to keep the button row visually identical to the link rows. */
.profile-dropdown li a,
.profile-dropdown li .logout-button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 1rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.3;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.profile-dropdown li a:hover,
.profile-dropdown li .logout-button:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Fixed-width icon column keeps labels aligned across all rows. */
.profile-dropdown li a i,
.profile-dropdown li .logout-button i {
    flex: 0 0 1.25rem;
    text-align: center;
}

.main-nav .logout-button {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    /*padding: 0.5rem 0.75rem;*/
    border-radius: 4px;
    font-size: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.main-nav .logout-button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.main-nav .mobile-profile-links input {
    padding: 0;
    margin: 0;
}

.main-nav .mobile-profile-links .logout-button {
    text-align: left;
    padding: 0;
}

.dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0.35rem 0;
}

/* ===== Page wrapper ===== */
.page-wrapper {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    background-color: transparent;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    padding-top: 1rem;
}

/* ===== Embed (/embed): shell-less public calendar in an iframe =====
   No .page-wrapper/.main-content here — the calendar parts are flex children
   of <body> directly. body already supplies height:100dvh + flex column, so
   the month label / .kalender / legend lay out and scroll as on /kalender. */
body.embed {
    padding: 0.5rem;
    box-sizing: border-box;
}

body.embed .entry-bar {
    cursor: pointer;
}

/* Embed merges the "zusätzliche Helfer" placeholder bars into the regular
   "Helfer angemeldet" look — the public view doesn't distinguish the tiers. */
body.embed .entry-bar.placeholder.other {
    background: var(--eintrag-other);
    color: var(--blue-dark);
}

/* ===== Kalender header ===== */
.kalender-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: nowrap;
    gap: 0.75rem;
    flex-shrink: 0;
}

.kalender-header h1 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--blue-dark);
}

.btn-primary {
    background: var(--blue-dark);
    color: #fff;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-primary:hover {
    background: var(--blue);
}

.kalender-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

.btn-secondary {
    background: transparent;
    color: var(--blue-dark);
    border: 1px solid var(--blue-dark);
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.btn-secondary:hover {
    background: var(--blue-dark);
    color: #fff;
}

/* ===== Kalender grid =====
   Column template and the entry-row height are centralised on .kalender so
   both the .week-header grid and each week's bg/fg grids track together. */
.kalender {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    min-height: 0;
    --week-cols: 3rem repeat(7, 1fr);
    --entry-row-height: 1.4rem;
}

/* Pull-to-refresh indicator: sits above the sticky week-header inside
   .kalender. Collapsed to 0 by default; the touch handler grows it as
   the user drags down while scrollTop === 0, then triggers a reload
   past the threshold. */
.pull-indicator {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-dark);
    transition: height 0.2s ease;
}

.pull-indicator.no-transition {
    transition: none;
}

.pull-indicator i {
    padding: 0.4rem;
    font-size: 1.1rem;
}

.pull-indicator.refreshing i {
    animation: pull-spin 0.8s linear infinite;
}

@keyframes pull-spin {
    to { transform: rotate(360deg); }
}

/* Sticky top header row (KW + day names). */
.week-header {
    display: grid;
    grid-template-columns: var(--week-cols);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 2px solid var(--blue-dark);
    font-size: 0.85rem;
}

.week-header .kw-cell,
.week-header .day-header {
    background: var(--blue-dark);
    color: #fff;
    font-weight: normal;
    font-size: 0.8rem;
    padding: 0.5rem 0.2rem;
    text-align: center;
}

.week-header .kw-cell {
    padding-top: 0.65rem;
}

.week-header .kw-cell {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.6rem;
}

.day-header {
    text-align: center;
    padding: 0.5rem 0.2rem;
}

/* Week row: two superimposed grids.
   - .week-bg  (absolute, inset:0, z=0): calendar cells with day numbers;
     stretches to fill whatever height the row ends up with.
   - .week-fg  (in-flow, z=1):           entry bars positioned in grid cells;
     its grid-template-rows (inline) is "day-num-row + N entry rows", so the
     fg's height (and with it the whole week-row) grows as more entries stack. */
.week-row {
    position: relative;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.week-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: var(--week-cols);
    grid-template-rows: 1fr;
    z-index: 0;
}

.week-fg {
    position: relative;
    display: grid;
    grid-template-columns: var(--week-cols);
    grid-auto-rows: var(--entry-row-height);
    z-index: 1;
    pointer-events: none;
}

.week-fg > .entry-bar {
    pointer-events: auto;
}

/* Per-week KW cell (note: .week-header .kw-cell overrides this with higher
   specificity and the blue header styling). */
.kw-cell {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-light);
    text-align: center;
    padding: 0.2rem;
    border-right: 1px solid var(--border);
}

/* Day cell baselines (out of current month): weekdays use the standard
   light gray, weekends a slightly darker gray. Scroll handler writes
   data-current-month on .kalender to restore the in-month backgrounds
   for matching cells. Today always wins — the in-month overrides skip
   today via :not(.today). */
.day-cell {
    background: var(--bg-outside);
    text-align: center;
    padding: 0.2rem 0.1rem;
    border-right: 1px solid var(--border);
}

.day-cell.weekend {
    background: var(--weekend-outside-bg);
}

.kalender[data-current-month="4"]  .day-cell[data-month="4"]:not(.today),
.kalender[data-current-month="5"]  .day-cell[data-month="5"]:not(.today),
.kalender[data-current-month="6"]  .day-cell[data-month="6"]:not(.today),
.kalender[data-current-month="7"]  .day-cell[data-month="7"]:not(.today),
.kalender[data-current-month="8"]  .day-cell[data-month="8"]:not(.today),
.kalender[data-current-month="9"]  .day-cell[data-month="9"]:not(.today),
.kalender[data-current-month="10"] .day-cell[data-month="10"]:not(.today) {
    background: var(--bg);
}

.kalender[data-current-month="4"]  .day-cell[data-month="4"].weekend:not(.today),
.kalender[data-current-month="5"]  .day-cell[data-month="5"].weekend:not(.today),
.kalender[data-current-month="6"]  .day-cell[data-month="6"].weekend:not(.today),
.kalender[data-current-month="7"]  .day-cell[data-month="7"].weekend:not(.today),
.kalender[data-current-month="8"]  .day-cell[data-month="8"].weekend:not(.today),
.kalender[data-current-month="9"]  .day-cell[data-month="9"].weekend:not(.today),
.kalender[data-current-month="10"] .day-cell[data-month="10"].weekend:not(.today) {
    background: var(--weekend-bg);
}

.day-cell.today {
    background: var(--today);
}

/* Top/bottom buffer bands: plain "outside current month" gray so the first
   (April) and last (October) weeks can be scrolled to the viewport center.
   Height is set by index.html's script to half the kalender's inner height. */
.kalender-buffer {
    background: var(--bg-light);
}

.day-num {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1;
}

.day-cell.today .day-num {
    color: #fff;
}

/* Month label above the kalender scroll area. Updated by index.html's
   scroll handler so it always shows the month of the topmost week row. */
.kalender-current-month {
    flex-shrink: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--blue-dark);
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
}

/* ===== Entry bars (continuous, spanning grid columns) ===== */
.entry-bar {
    font-size: 0.65rem;
    line-height: 1.2rem;
    padding: 0 0.3rem;
    margin: 1px 0;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    z-index: 1;
    min-width: 0;
}

.entry-bar.own {
    background: var(--eintrag-own);
    color: #fff;
}

.entry-bar.other {
    background: var(--eintrag-other);
    color: var(--blue-dark);
}

/* Placeholder accounts (admin-created proxy with no e-mail). Pale yellow
   distinguishes them from regular helper bars at a glance. */
.entry-bar.placeholder.other {
    background: var(--eintrag-placeholder);
    color: var(--text);
}

/* Wrapping edges: flat corners + soft fade where the bar continues
   into the previous/next week (or month). */
.entry-bar.wrap-start {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0.5rem);
            mask-image: linear-gradient(to right, transparent 0, #000 0.5rem);
}

.entry-bar.wrap-end {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 0.5rem);
            mask-image: linear-gradient(to left, transparent 0, #000 0.5rem);
}

.entry-bar.wrap-start.wrap-end {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0.5rem, #000 calc(100% - 0.5rem), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 0.5rem, #000 calc(100% - 0.5rem), transparent 100%);
}

.entry-bar:hover {
    opacity: 0.85;
}

/* ===== Eintrag legend ===== */
.eintrag-legend {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.legend-swatch.own {
    background: var(--eintrag-own);
}

.legend-swatch.other {
    background: var(--eintrag-other);
}

.legend-swatch.placeholder {
    background: var(--eintrag-placeholder);
}

/* ===== Accountverwaltung (admin list) ===== */
.accounts-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.accounts-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.accounts-page-header h2 {
    font-size: 1.4rem;
    margin: 0;
    color: var(--blue-dark);
}

.accounts-page-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap;
}

.audit-log {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.audit-log th,
.audit-log td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    word-break: break-word;
}

.audit-log th {
    background: var(--bg-light);
    font-weight: 600;
    color: var(--blue-dark);
    position: sticky;
    top: 0;
}

.audit-log-footer {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin: 0;
}

.accounts-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    border-top: 1px solid var(--border);
}

.account-item {
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    /*border-bottom: 1px solid var(--border);*/
    cursor: pointer;
    transition: background 0.1s;
}

.account-item:hover,
.account-item:focus-visible {
    background: var(--bg-light);
    outline: none;
}

.account-main {
    min-width: 0;
    text-align: left;
}

.account-name {
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-email {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-meta {
    display: flex;
    flex-direction: row;
    /*align-items: flex-end;*/
    gap: 0.5rem;
    flex-shrink: 0;
    /*text-align: right;*/
}

.account-art {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.account-details-hint {
    color: var(--blue-dark);
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    line-height: 1.3;
    white-space: nowrap;
}

.tag-active      { background: #e5f2de; color: #3a6b1a; }
.tag-locked      { background: #fde9c8; color: #9b5a00; }
.tag-deleted     { background: #f3d6d5; color: #8a2a26; }
.tag-placeholder { background: #fff4c2; color: #6b5500; }

/* ===== Sidebar ===== */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 300;
}

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 100%;
    height: 100dvh;
    background: #fff;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.15);
    z-index: 310;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
}

body.sidebar-open .sidebar-overlay {
    display: block;
}

body.sidebar-open .sidebar {
    transform: translateX(0);
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--blue-dark);
}

.sidebar-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 0 0.25rem;
}

.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Sidebar forms: give the shared form controls consistent spacing. Pico
   already handles borders, padding, the select chevron and typography —
   we only tighten label-to-control layout and make sure the mobile
   viewport doesn't shrink form controls below 16px. */
.sidebar-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--text);
    margin: 0.75rem 0 0.25rem;
}

.sidebar-form input,
.sidebar-form select,
.sidebar-form textarea {
    width: 100%;
    margin: 0 0 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
}

/* Checkbox field: checkbox at natural size with its label text alongside,
   rather than the full-width control layout used by the other inputs. */
.sidebar-form label.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar-form label.checkbox-field input[type="checkbox"] {
    /* Pico renders checkboxes with appearance:none and an explicit 1.25em box,
       so restore that size — width:auto would collapse it to nothing. flex:0 0 auto
       keeps it from shrinking next to the label text. */
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    margin: 0;
}

/* Row of two side-by-side labels (e.g. date + time). */
.sidebar-form .form-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.sidebar-form .form-row > label {
    flex: 1;
    min-width: 0;
}

/* ===== Eintrag owner reassignment (admin only) =====
   The "Account" label in the Eintrag edit sidebar carries a small icon button,
   inline with the label text, that swaps the value below it for a select box of
   accounts (frag_eintrag_reassign). */
.eintrag-owner-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Nudge the swap icon down by ~half its height so it reads as centred on the
   lowercase label text rather than on the full line box (which sits high). */
.eintrag-owner-label .btn-icon {
    position: relative;
    top: 0.35rem;
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--blue-dark);
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.btn-icon:hover {
    background: var(--blue-dark);
    color: #fff;
}

.reassign-form select {
    width: 100%;
    margin: 0 0 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
}

.reassign-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ===== Password field with eye toggle =====
   Wrap any <input type="password"> in <div class="password-field">…</div>
   together with a .password-toggle button that carries both a show-icon
   (fa-eye) and a hide-icon (fa-eye-slash). A single delegated click
   handler in layout.html flips .revealed on the wrapper; this rule set
   picks which icon is visible. */
.password-field {
    position: relative;
    display: block;
    line-height: 0;
}

.password-field input {
    display: block;
    padding-right: 2.5rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #b0b4ba;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
}

.password-toggle:hover {
    color: var(--text-muted);
}

.password-toggle .hide-icon {
    display: none;
}

.password-field.revealed .password-toggle .show-icon {
    display: none;
}

.password-field.revealed .password-toggle .hide-icon {
    display: inline-block;
}

main {
    background: transparent;
}

/* ===== Login ===== */
.login-wrapper {
    flex: 1;
    display: flex;
    align-items: safe center;
    justify-content: center;
    overflow-y: auto;
    background-color: transparent;
}

.login-card {
    width: 100%;
    max-width: 480px;
    padding: 2rem;
}

.login-card h1 {
    font-size: 1.3rem;
    color: var(--blue-dark);
    margin: 0 0 0.25rem;
    text-align: center;
}

.login-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.login-card label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.login-card input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}

.login-card input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(46, 163, 242, 0.2);
}

.login-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}

/* Inline form error banner (e.g. the Eintrag capacity limit). Shared by every
   {{.Flash}} message; rendered red to read as an error. */
.banner-error {
    color: var(--danger);
}

.login-btn {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.95rem;
}

.login-links {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.75rem;
}

.login-links a {
    color: var(--blue-dark);
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-sep {
    color: var(--text-muted);
    margin: 0 0.4rem;
}

/* ===== Mobile (< 768px) ===== */
@media (max-width: 767px) {
    /* Show hamburger */
    .menu-toggle {
        display: block;
    }

    .login-card {
        width: 100%;
        max-width: 360px;
    }

    /* Slide-down nav */
    .main-nav {
        display: none;
        position: absolute;
        top: 3.5rem;
        right: 0.5rem;
        left: auto;
        width: max-content;
        min-width: 16rem;
        background: var(--blue-dark);
        flex-direction: column;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    body.nav-open .main-nav {
        display: flex;
    }

    .main-nav ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: calc(100% - 0.5rem);
        align-items: stretch;
        margin-left: 0.25rem;
    }

    .main-nav li {
        display: block;
        text-align: left;
        justify-content: flex-start;
    }

    .main-nav a {
        display: block;
        white-space: nowrap;
        text-align: left;
        justify-content: flex-start;
    }

    .main-nav a svg {
        display: inline-block;
        width: 1.25em;
        text-align: center;
        margin-right: 0.4rem;
    }

    /* Hide desktop profile dropdown, show flat links instead */
    .nav-right {
        display: none;
    }

    .mobile-profile-links {
        display: flex;
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Kalender: smaller text, scrollable */
    .kalender-header h1 {
        font-size: 1.1rem;
    }

    .kalender-header .btn-primary,
    .kalender-header .btn-secondary,
    .accounts-page-header .btn-primary {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .kalender-header-actions {
        gap: 0.35rem;
    }

    /* Accounts list: tap-to-open, drop the hint, drop the Art column */
    .accounts-page-header h2 {
        font-size: 1.1rem;
    }

    .account-item {
        padding: 0.55rem 0.6rem;
        gap: 0.5rem;
    }

    .account-name {
        font-size: 0.9rem;
    }

    .account-email {
        font-size: 0.75rem;
    }

    .account-meta {
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
    }

    .account-details-hint
    {
        display: none;
    }

    .kalender {
        --week-cols: 1.6rem repeat(7, 1fr);
        --entry-row-height: 1.2rem;
    }

    .week-header,
    .week-row {
        font-size: 0.75rem;
    }

    .kw-cell {
        font-size: 0.65rem;
    }

    .entry-bar {
        font-size: 0.55rem;
        line-height: 1rem;
    }

    /* Sidebar full-width on mobile */
    .sidebar {
        width: 100%;
    }

    /* Pico scales root font-size down on mobile; pin form controls to 16px
       so the Account-Typ select (and any input) doesn't render at a tiny
       size, and to prevent iOS Safari auto-zoom on focus. */
    .sidebar-form input,
    .sidebar-form select,
    .sidebar-form textarea {
        font-size: 16px;
    }
}

/* ===== Login screen background =====
   Lighthouse photo anchored to the right, scaled to fill viewport height,
   slightly blurred, with a semi-transparent white overlay so the login
   card keeps its contrast. Body pseudo-elements are used because CSS
   filters must be applied on a separate layer. */
body:has(.login-wrapper) {
    background: var(--bg-light);
}

body:has(.login-wrapper)::before,
body:has(.login-wrapper)::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body:has(.login-wrapper)::before {
    background-image: url("https://www.hafen-schleimuende.de/wp-content/uploads/leuchtturm-1.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    filter: blur(3px);
    z-index: 0;
}

body:has(.login-wrapper)::after {
    background: rgba(255, 255, 255, 0.55);
    z-index: 1;
}

body:has(.login-wrapper) .header,
body:has(.login-wrapper) .page-wrapper {
    position: relative;
    z-index: 2;
}

/* ===== Desktop tweaks (>= 768px) ===== */
@media (min-width: 768px) {
    .week-row {
        min-height: 2rem;
    }

    /* On wider viewports the natural image width no longer reaches across,
       so switch to cover (image fills the viewport, cropping as needed)
       while keeping the right-anchored focus on the lighthouse. */
    body:has(.login-wrapper)::before {
        background-size: cover;
    }
}