html, body {
    font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Fluent web components read their font from this token */
    --body-font: 'Nunito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
}

h1:focus {
    outline: none;
}

code {
    color: #c02d76;
}

/* Layout shell (app pages): header + main + footer as a full-height column
   so the tinted main area always reaches the footer on short pages. */
.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-area {
    flex: 1 0 auto;
    align-items: stretch;
    background-color: #f6f9fd;
    /* Very subtle festival tent anchored bottom-right of the viewport */
    background-image: url('../img/klub_festival_faint.png');
    background-repeat: no-repeat;
    background-position: right -30px bottom;
    background-size: 340px;
    background-attachment: fixed;
}

.body-content {
    flex: 1 1 auto;
    min-width: 0;
}

.content-padding {
    padding: 28px 32px 48px;
    max-width: 1100px;
}

/* App sidebar navigation */
.app-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: #ffffff;
    border-right: 1px solid #e7edf7;
    padding: 16px 12px 24px;
    box-sizing: border-box;
    align-self: stretch;
}

.app-nav {
    position: sticky;
    top: 74px;
    display: flex;
    flex-direction: column;
}

.app-nav-club {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f2f6ff;
    border: 1px solid #dbe7ff;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 14px;
    color: #12203f;
}

.app-nav-club svg {
    flex-shrink: 0;
}

.app-nav-club svg path {
    fill: #2b6bf3;
}

.app-nav-club-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-section {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa1c0;
    margin: 14px 12px 6px;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    margin-bottom: 2px;
    color: #33415e;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav-link svg {
    flex-shrink: 0;
}

.app-nav-link svg path {
    fill: #5a6a8a;
}

.app-nav-link:hover {
    background: #f2f6ff;
    color: #12203f;
}

.app-nav-link.active {
    background: #e8f0ff;
    color: #2b6bf3;
}

.app-nav-link.active svg path {
    fill: #2b6bf3;
}

.app-nav-divider {
    height: 1px;
    background: #e7edf7;
    margin: 12px 8px;
}

.app-nav-bottom {
    margin-top: 18px;
}

/* Page scaffolding (app pages) */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-title {
    font-size: 26px;
    font-weight: 800;
    color: #12203f;
    margin: 0;
    line-height: 1.2;
}

.page-sub {
    color: #5a6a8a;
    font-size: 14px;
    margin: 4px 0 0;
}

.page-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.panel {
    background: #ffffff;
    border: 1px solid #e6edf9;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(23, 43, 99, 0.05);
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.panel-title {
    font-size: 16px;
    font-weight: 800;
    color: #12203f;
    margin: 0 0 12px;
}

.panel-sub {
    color: #5a6a8a;
    font-size: 13.5px;
    margin: -6px 0 12px;
}

.plan-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.plan-feature-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #33415c;
}

.plan-feature-list li svg path {
    fill: #23b26d;
}

.admin-message-cell {
    max-width: 340px;
    white-space: pre-line;
    overflow-wrap: break-word;
}

/* Current plan display (club dashboard) */
.plan-current {
    margin: 2px 0 18px;
}

.plan-current-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8fa1c0;
    margin-bottom: 2px;
}

.plan-current-name {
    font-size: 28px;
    font-weight: 800;
    color: #2b6bf3;
    line-height: 1.1;
}

.page-sub-sep {
    margin: 0 6px;
    color: #b7c3d9;
}

/* Plan usage bars (club dashboard) */
.usage-list {
    max-width: 460px;
    margin-bottom: 16px;
}

.usage-row {
    margin-bottom: 12px;
}

.usage-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 600;
    color: #33415c;
    margin-bottom: 5px;
}

.usage-count {
    font-variant-numeric: tabular-nums;
    color: #5a6a8a;
}

.usage-bar {
    height: 8px;
    border-radius: 999px;
    background: #e8eef9;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    border-radius: 999px;
    min-width: 4px;
    transition: width 0.3s ease;
}

.usage-fill.usage-ok { background: #23b26d; }
.usage-fill.usage-warn { background: #f2a33c; }
.usage-fill.usage-full { background: #e5484d; }

.usage-note {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5a6a8a;
}

.panel-danger {
    border-color: #f3d4d4;
}

.panel-danger .panel-title {
    color: #b42318;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    align-items: start;
}

.panel-grid .panel {
    margin-bottom: 0;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.tile {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e6edf9;
    border-radius: 14px;
    padding: 16px;
    color: #12203f;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(23, 43, 99, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
    border-color: #b9d0fb;
    box-shadow: 0 8px 22px rgba(23, 43, 99, 0.1);
}

.tile-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.tile-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.tile .lp-icon-circle {
    width: 38px;
    height: 38px;
}

.empty-state {
    border: 1.5px dashed #ccd9f0;
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    color: #5a6a8a;
    font-size: 14.5px;
    margin-bottom: 20px;
}

.lp-stats-dashboard {
    max-width: 520px;
    margin-bottom: 20px;
}

.share-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}

.panel-subhead {
    font-size: 14px;
    font-weight: 800;
    color: #33415e;
    margin: 18px 0 6px;
}

.panel .panel-subhead:first-of-type {
    margin-top: 0;
}

/* Responsive two-column form layout */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    align-items: start;
}

.form-grid fluent-text-field,
.form-grid fluent-select,
.form-grid fluent-text-area {
    width: 100%;
}

/* Labels render as siblings of the Fluent field; each labeled field is wrapped
   in a plain <div> so label + input share one grid cell. */
.form-grid .fluent-input-label {
    display: block;
    margin-bottom: 4px;
}

.form-grid .native-input {
    width: 100%;
    box-sizing: border-box;
}

.form-span {
    grid-column: 1 / -1;
}

.form-buttons {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.form-switches {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.form-grid-1 {
    grid-template-columns: 1fr;
    max-width: 420px;
}

.auth-panel {
    max-width: 480px;
    margin: 24px auto 0;
}

.auth-panel .page-title {
    margin-bottom: 12px;
}

.auth-legal-note {
    display: block;
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.5;
}

.auth-legal-note a {
    color: #2b6bf3;
    text-decoration: underline;
}

/* Data tables: real table on desktop, stacked cards on small screens */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8fa1c0;
    padding: 10px 12px;
    border-bottom: 1px solid #e6edf9;
    white-space: nowrap;
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid #eef2fa;
    vertical-align: middle;
    font-size: 14px;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 760px) {
    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .data-table tr {
        border: 1px solid #e6edf9;
        border-radius: 12px;
        background: #ffffff;
        margin-bottom: 10px;
        padding: 8px 0;
    }

    .data-table td {
        border: none;
        padding: 6px 14px;
    }

    .data-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #8fa1c0;
        margin-bottom: 2px;
    }

    .data-table .actions {
        justify-content: flex-start;
        padding-top: 4px;
    }
}

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Data grid rows must not clip buttons */
fluent-data-grid-row {
    height: auto !important;
}

fluent-data-grid-cell {
    height: auto !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Share panel: clearly separated sub-boxes */
.share-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.share-box {
    border: 1px solid #e6edf9;
    border-radius: 12px;
    padding: 16px;
    background: #fbfcff;
    min-width: 0;
}

.share-box-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #12203f;
    margin: 0 0 10px;
}

.share-box-head svg path {
    fill: #2b6bf3;
}

.share-box code {
    display: block;
    font-size: 12px;
    word-break: break-all;
    background: #ffffff;
    border: 1px solid #e6edf9;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    color: #33415e;
}

/* Cards/table view switch on the board */
.view-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin-bottom: 14px;
    background: #eef3fb;
    border: 1px solid #e2e9f6;
    border-radius: 999px;
}

.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #5a6a8a;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
}

.view-toggle-btn.active {
    color: #ffffff;
    background: #2b6bf3;
}

/* Icons inherit the button's text colour → visible on both states */
.view-toggle-btn svg {
    fill: currentColor;
    flex: none;
}

/* Board as a table grouped by time slot (alternative to the area cards) */
.board-table th {
    white-space: nowrap;
}

.board-slot-time {
    white-space: nowrap;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

/* The areas that share one time slot, laid out side by side */
.slot-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot-area {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 260px;
    border-left: 3px solid #f2a33c;
    padding: 6px 10px;
    background: #fbfcfe;
    border-radius: 0 8px 8px 0;
}

.slot-area-selected {
    background: #eef4ff;
}

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

.slot-area-name {
    font-weight: 700;
    font-size: 13.5px;
}

.slot-area-select {
    margin-top: 4px;
}

.board-table-people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.board-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    background: #f1f5fc;
    border: 1px solid #e2e9f6;
    border-radius: 999px;
    padding: 2px 10px;
}

.board-person-chip.board-person-anon {
    color: #8a97b0;
    font-style: italic;
}

.board-person-empty {
    color: #b3bdd0;
}

.board-table-row-selected > td {
    background: #eef4ff;
}

/* Table view = matrix: areas across the top, time slots down the side */
.matrix-table {
    border-collapse: collapse;
    width: auto;
    min-width: 100%;
    font-size: 13px;
}

.matrix-table th,
.matrix-table td {
    border: 1px solid #eef2f9;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.matrix-table thead th {
    background: #f7faff;
    font-weight: 800;
    border-bottom-width: 2px;
    white-space: nowrap;
}

.matrix-time-h,
.matrix-time {
    position: sticky;
    left: 0;
    background: #ffffff;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

.matrix-table thead .matrix-time-h {
    background: #f7faff;
    z-index: 2;
}

.matrix-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.matrix-cell-selected {
    outline: 2px solid #2b6bf3;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Timeline view = Gantt: areas as fixed rows, time as a scrollable X axis */
.timeline {
    overflow-x: auto;
    border: 1px solid #e6edf9;
    border-radius: 12px;
    background: #ffffff;
}

.timeline-grid {
    display: inline-block;
    min-width: 100%;
}

.timeline-head,
.timeline-row {
    display: flex;
    align-items: stretch;
}

.timeline-corner,
.timeline-label {
    flex: 0 0 112px;
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
    box-sizing: border-box;
}

.timeline-corner {
    border-bottom: 1px solid #e6edf9;
    border-right: 1px solid #e6edf9;
}

.timeline-label {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 10px;
    border-left: 3px solid #f2a33c;
    border-right: 1px solid #e6edf9;
    border-top: 1px solid #eef2f9;
}

.timeline-axis {
    display: flex;
    border-bottom: 1px solid #e6edf9;
}

.timeline-hour {
    flex: none;
    box-sizing: border-box;
    border-left: 1px solid #eef2f9;
    font-size: 11px;
    color: #8a97b0;
    padding: 5px 0 5px 5px;
    font-variant-numeric: tabular-nums;
}

.timeline-track {
    position: relative;
    flex: none;
    border-top: 1px solid #eef2f9;
    background: repeating-linear-gradient(to right,
        transparent 0,
        transparent calc(var(--px-h) - 1px),
        #eef2f9 calc(var(--px-h) - 1px),
        #eef2f9 var(--px-h));
}

.timeline-bar {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid #f2a33c;
    border-left-width: 3px;
    border-radius: 6px;
    padding: 3px 7px;
    overflow: hidden;
}

.timeline-bar-selected {
    outline: 2px solid #2b6bf3;
    outline-offset: 1px;
}

.timeline-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.timeline-bar-time {
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.timeline-people {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: 4px;
}

/* Names keep their little pill, one per line so nothing is clipped */
.timeline-person {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: 12px;
    line-height: 16px;
    background: #f1f5fc;
    border: 1px solid #e2e9f6;
    border-radius: 999px;
    padding: 1px 9px;
}

.timeline-person-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-person-anon {
    color: #8a97b0;
    font-style: italic;
}

.timeline-person-free {
    background: transparent;
    border: none;
    padding: 1px 2px;
    color: #8a97b0;
    font-size: 11.5px;
}

.timeline-bar-select {
    margin-top: 3px;
}

.embed-view-select {
    max-width: 220px;
    margin-bottom: 10px;
}

/* Duty plan day view: tabs, day banner, area blocks, shift cards */
.day-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.day-tab {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #5a6a8a;
    background: #f1f5fc;
    border: 1px solid #e2e9f6;
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
    text-transform: capitalize;
}

.day-tab:hover {
    background: #e8f0ff;
}

.day-tab.active {
    background: #2b6bf3;
    border-color: #2b6bf3;
    color: #ffffff;
}

.day-banner {
    background: #2b6bf3;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    border-radius: 10px;
    padding: 10px 16px;
    margin: 4px 0 18px;
    text-transform: capitalize;
}

.area-block {
    border-left: 3px solid #f2a33c;
    padding-left: 14px;
    margin-bottom: 24px;
}

.area-title {
    color: #d97a08;
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 2px;
}

.time-head {
    font-size: 13.5px;
    font-weight: 800;
    color: #33415e;
    margin: 12px 0 8px;
}

.shift-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.shift-card {
    background: #ffffff;
    border: 1px solid #e6edf9;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 3px 10px rgba(23, 43, 99, 0.05);
}

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

.shift-card-title {
    font-size: 14px;
    font-weight: 800;
}

.shift-card-empty {
    color: #8fa1c0;
    font-style: italic;
    font-size: 13px;
    margin: 6px 0 0;
}

.shift-card-person {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px dashed #e7edf7;
    font-size: 13.5px;
}

.person-remove {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 6px;
    background: #fdecec;
    color: #d92d20;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.person-remove:hover {
    background: #d92d20;
    color: #ffffff;
}

/* Visual shift editor (same day/area/card structure as the overview) */
.area-edit-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.area-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shift-card-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shift-time-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-input {
    width: 104px;
    min-height: 30px;
    padding: 4px 6px;
    font-variant-numeric: tabular-nums;
}

/* Keep the value clear of the browser's clock-picker indicator */
.time-input::-webkit-calendar-picker-indicator {
    margin: 0 0 0 4px;
    padding: 0;
}

/* Stand-in for the end-time input when a shift has an open end */
.time-open-end {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    color: #5a6a8a;
}

.shift-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.shift-people {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shift-people svg path {
    fill: #5a6a8a;
}

.shift-card-actions {
    display: flex;
    gap: 6px;
    border-top: 1px dashed #e7edf7;
    padding-top: 8px;
}

.icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e0f0;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    padding: 0;
}

.icon-btn svg path {
    fill: #5a6a8a;
}

.icon-btn:hover {
    background: #f2f6ff;
    border-color: #b9d0fb;
}

.icon-btn-danger:hover {
    background: #fdecec;
    border-color: #f3d4d4;
}

.icon-btn-danger:hover svg path {
    fill: #d92d20;
}

.add-shift-tile {
    min-height: 88px;
    border: 1.5px dashed #ccd9f0;
    border-radius: 12px;
    background: transparent;
    color: #5a6a8a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.add-shift-tile:hover {
    border-color: #2b6bf3;
    color: #2b6bf3;
    background: #f6f9ff;
}

/* Fixed save button: always in view while editing, no scrolling needed */
.save-bar {
    position: fixed;
    right: 24px;
    bottom: 20px;
    z-index: 60;
    filter: drop-shadow(0 6px 16px rgba(23, 43, 99, 0.3));
}

.chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12.5px;
    font-weight: 700;
    background: #eef4ff;
    color: #2b6bf3;
    white-space: nowrap;
}

.chip-neutral {
    background: #f1f5fc;
    color: #5a6a8a;
}

.chip-green {
    background: #e8f7ee;
    color: #178743;
}

.chip-orange {
    background: #fff3e2;
    color: #d97a08;
}

.chip-red {
    background: #fdecec;
    color: #d92d20;
}

/* Fill-state colors: full = green (goal reached), partial = orange, empty = red */
.fill-full,
.lp-progress-fill.fill-full { background: #23b26d; }
.fill-partial,
.lp-progress-fill.fill-partial { background: #f2a33c; }
.fill-empty,
.lp-progress-fill.fill-empty { background: #e5484d; }

/* Tab bar for multi-view records (e.g. event overview/edit) */
.page-back {
    display: inline-block;
    color: #5a6a8a;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 6px;
}

.page-back:hover {
    color: #2b6bf3;
}

.tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e7edf7;
    margin-bottom: 20px;
}

.tab-bar a {
    padding: 8px 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: #5a6a8a;
    text-decoration: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
}

.tab-bar a:hover {
    color: #12203f;
}

.tab-bar a.active {
    color: #2b6bf3;
    border-bottom-color: #2b6bf3;
}

/* Mini fill bar inside tables (dashboard shift fill state) */
.fill-cell {
    min-width: 130px;
}

.fill-cell .lp-progress {
    margin-top: 0;
    height: 8px;
}

.fill-cell em {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: #5a6a8a;
    white-space: nowrap;
    margin-left: 8px;
}

.fill-cell-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fill-cell-inner .lp-progress {
    flex: 1;
    min-width: 70px;
}

/* Public pages: day-grouped shift / booking lists */
.ps-day-head {
    font-size: 16px;
    font-weight: 800;
    color: #12203f;
    margin: 0 0 10px;
    text-transform: capitalize;
}

.ps-shift {
    display: grid;
    grid-template-columns: 28px minmax(90px, auto) auto auto 1fr;
    gap: 12px;
    align-items: center;
    border: 1px solid #e6edf9;
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    background: #ffffff;
}

.ps-shift-selected {
    border-color: #2b6bf3;
    background: #f2f6ff;
}

.ps-shift-disabled {
    background: #fafbfe;
    color: #8fa1c0;
}

.ps-shift-area {
    font-weight: 700;
}

.ps-shift-time {
    color: #5a6a8a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ps-shift-names {
    color: #8fa1c0;
    font-size: 12.5px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed #e7edf7;
    font-size: 14px;
}

.pc-row:last-child {
    border-bottom: none;
}

.pc-row-title {
    font-weight: 700;
}

@media (max-width: 640px) {
    .ps-shift {
        grid-template-columns: 28px 1fr auto;
    }

    .ps-shift-time {
        grid-column: 2;
    }

    .ps-shift-names {
        display: none;
    }
}

@media (max-width: 900px) {
    .main-area {
        flex-direction: column !important;
    }

    .app-sidebar {
        width: 100%;
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid #e7edf7;
        padding: 10px 12px;
    }

    .app-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        gap: 4px;
    }

    .app-nav-link {
        flex-shrink: 0;
    }

    .app-nav-club {
        margin-bottom: 0;
        flex-shrink: 0;
        max-width: 160px;
    }

    .app-nav-section,
    .app-nav-divider {
        display: none;
    }

    .app-nav-bottom {
        margin-top: 0;
        display: flex;
        gap: 4px;
    }

    .content-padding {
        padding: 20px 16px 40px;
    }
}

/* Spacing utilities. !important is required: FluentLabel renders
   `.fluent-typography:not([default-margin])[b-xxx] { margin-block: 0 }`,
   a scoped rule with higher specificity than a plain utility class. */
.mt-8 { margin-top: 8px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-24 { margin-top: 24px !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-16 { margin-bottom: 16px !important; }

/* Marketing layout (public landing page) */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 1000;
    /* optional (not swap): avoid the mid-render font swap that reflows text. */
    font-display: optional;
    src: url('../fonts/nunito-var.woff2') format('woff2');
}

.marketing-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #12203f;
    background: #ffffff;
    overflow-x: clip;
}

.marketing-nav {
    border-bottom: 1px solid #e7edf7;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.marketing-nav-inner {
    max-width: 1208px;
    margin: 0 auto;
    padding: 12px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
}

.marketing-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 21px;
    font-weight: 800;
    color: #12203f;
    text-decoration: none;
}

.marketing-brand svg {
    fill: #2b6bf3;
}

.marketing-logo {
    height: 32px;
    width: auto;
    display: block;
}

.marketing-nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* App pages: header content aligns with the sidebar, not centered */
.app-topbar .marketing-nav-inner {
    max-width: none;
    padding: 12px 24px;
}

@media (max-width: 900px) {
    .marketing-nav-inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }
}

@media (max-width: 560px) {
    .marketing-nav-inner {
        gap: 12px;
        padding: 10px 14px;
    }

    .marketing-logo {
        height: 26px;
    }

    .marketing-nav-actions {
        gap: 10px;
    }
}

/* CSV import: file input styled as an outline button */
.csv-import-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.csv-import-label:hover {
    background: var(--neutral-fill-stealth-hover, #f5f5f5);
}

.csv-import-input {
    display: none;
}

/* Legal pages (Impressum / privacy) */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 64px;
    box-sizing: border-box;
}

.about-page h1 {
    font-size: clamp(28px, 4.5vw, 38px);
    font-weight: 800;
    margin: 0 0 8px;
}

.about-head {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 12px;
}

.about-illu {
    width: 180px;
    flex-shrink: 0;
}

.about-page h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 32px 0 8px;
}

.about-page p {
    line-height: 1.7;
    color: #33415c;
    margin: 10px 0 0;
}

.about-promises {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.about-promises li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-weight: 600;
}

.about-promises li svg path {
    fill: #23b26d;
}

.about-page .lp-cta-row {
    margin-top: 18px;
}

.contact-panel {
    max-width: 640px;
}

@media (max-width: 640px) {
    .about-head {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
}

.legal-page h1 {
    font-size: 34px;
    font-weight: 800;
    margin: 0 0 16px;
}

.legal-page h2 {
    font-size: 19px;
    font-weight: 800;
    margin: 28px 0 6px;
}

.legal-page p {
    margin: 8px 0 0;
    line-height: 1.6;
}

.legal-note {
    background: #eef4ff;
    border: 1px solid #dbe7ff;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: #33415e;
}

.legal-placeholder {
    white-space: pre-line;
    color: #5a6a8a;
}

/* Public signup: shift selection */
.signup-select-cell {
    width: 36px;
    text-align: center;
}

.selected-shift-list {
    margin: 4px 0 0;
    padding-left: 20px;
    color: var(--neutral-foreground-2, #605e5c);
}

/* QR code box: the generated SVG is scalable, cap it to a sensible size */
.qr-box {
    max-width: 160px;
}

.qr-box svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Public layout (embeddable signup/calendar pages) */
.public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid #e7edf7;
    background: #ffffff;
}

.public-brand img {
    height: 24px;
    width: auto;
    display: block;
}

.public-main {
    flex: 1 1 auto;
    padding: 20px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.public-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    text-align: center;
}

/* ============================================================
   Landing page (lp-*) — bright, rounded, illustrated design
   ============================================================ */
.lp {
    font-size: 15px;
    line-height: 1.5;
}

.lp section {
    max-width: 1208px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Full-bleed bands (hero + tinted sections) keep the same 1160px content gutter */
.lp .lp-hero,
.lp .lp-showcase,
.lp .lp-band {
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    padding-left: max(24px, calc(50vw - 580px));
    padding-right: max(24px, calc(50vw - 580px));
}

/* Buttons */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: #12203f;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.lp-btn-primary {
    background: #2b6bf3;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(43, 107, 243, 0.35);
}

.lp-btn-primary:hover {
    background: #1f56d6;
}

.lp-btn-outline {
    background: #ffffff;
    border: 1px solid #d7e0f0;
    font-weight: 700;
}

.lp-btn-outline:hover {
    background: #f6f9ff;
}

.lp-btn-sm {
    padding: 8px 14px;
    font-size: 13.5px;
    border-radius: 10px;
}

.lp-play svg,
.lp-wa svg,
.lp-checkbox svg,
.lp-phone-bubble svg,
.lp-icon-circle svg {
    fill: #ffffff;
}

.lp-wa {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1fb355;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Real product screenshots in a browser chrome frame */
.browser-frame {
    background: #ffffff;
    border: 1px solid #dce5f5;
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(23, 43, 99, 0.16);
    overflow: hidden;
    min-width: 0;
}

.browser-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px 7px;
    background: #e9eef6;
}

.browser-frame-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dbe4f5;
}

.browser-frame-bar span:nth-child(1) { background: #ffb3ad; }
.browser-frame-bar span:nth-child(2) { background: #ffe08a; }
.browser-frame-bar span:nth-child(3) { background: #a6e5b5; }

.browser-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.lp-hero-shot {
    justify-self: end;
    width: 100%;
    max-width: 540px;
}

/* Live demo content inside browser frames */
.lp-demo-body {
    padding: 14px;
    background: #f6f9fd;
}

/* Hero sits on a blue-tinted band — keep its demo on white so it stands out.
   The FIXED height lives on the frame (not the body) so the demo box reserves
   its full size before the WASM app hydrates — the tab bar that appears on load
   then adds no height, so the page doesn't jump. The body fills the remaining
   space and scrolls internally; switching tabs never resizes the frame. */
.lp-hero-shot.browser-frame {
    height: 540px;
    display: flex;
    flex-direction: column;
}
.lp-hero-shot .lp-demo-body {
    background: #ffffff;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Landing live-demo: "view plan" / "add a shift" tabs + the inline mini editor */
/* Browser-style tab strip: sits in the frame chrome; the active tab is white
   and merges seamlessly into the demo body below (like a real browser tab). */
.demo-tabbar {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 5px 8px 0;
    background: #e9eef6;
    overflow-x: auto;
    scrollbar-width: none;
}
.demo-tabbar::-webkit-scrollbar { display: none; }
.demo-tab {
    flex: none;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: #5a6a8a;
    font: inherit;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 15px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    top: 1px;                       /* overlap the body's top edge — no seam */
    transition: background 0.12s ease, color 0.12s ease;
}
.demo-tab:hover { background: rgba(255, 255, 255, 0.55); color: #33415e; }
.demo-tab.is-active {
    background: #ffffff;            /* same as the demo body → tab connects to it */
    color: #12203f;
    border-color: #dce5f5;
}

/* Clubhouse booking-calendar tab (interactive) */
.demo-cal-top {
    font-weight: 800;
    color: #12203f;
    font-size: 15px;
    text-transform: capitalize;
    margin-bottom: 8px;
}
.demo-cal-week,
.demo-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.demo-cal-week {
    margin-bottom: 5px;
}
.demo-cal-week span {
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8fa1c0;
}
.demo-cal-day {
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #f4f7fc;
    color: #33415e;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    padding: 0;
}
.demo-cal-day:hover { border-color: #b9d0fb; }
.demo-cal-day.is-pad,
.demo-cal-days .is-pad { background: none; border: none; cursor: default; }
.demo-cal-day.bk { color: #fff; font-weight: 700; }
.demo-cal-day.bk1 { background: #2b6bf3; }
.demo-cal-day.bk2 { background: #23b26d; }
.demo-cal-day.bk3 { background: #f0972e; }
.demo-cal-day.is-sel { outline: 2px solid #12203f; outline-offset: 1px; }
.demo-cal-detail {
    margin-top: 12px;
    border-top: 1px dashed #e7edf7;
    padding-top: 12px;
    display: grid;
    gap: 8px;
}
.demo-cal-empty {
    margin: 0;
    font-size: 12.5px;
    color: #8fa1c0;
}
.demo-cal-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.demo-cal-entry strong {
    display: block;
    color: #12203f;
    font-size: 13.5px;
}
.demo-cal-entry span {
    color: #5a6a8a;
    font-size: 12.5px;
}
.demo-cal-dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 3px;
    margin-top: 3px;
    flex: none;
}
.demo-cal-dot.bk1 { background: #2b6bf3; }
.demo-cal-dot.bk2 { background: #23b26d; }
.demo-cal-dot.bk3 { background: #f0972e; }
/* "Schicht anlegen" tab = a faithful mini of the real event editor's shift
   panel, so it reuses .day-tabs / .area-block / .shift-card-edit / .icon-btn /
   .add-shift-tile from above. Only the wrapper + the action icons are new. */
.demo-editor {
    display: block;
}
.demo-editor .day-banner {
    margin-top: 4px;
}
/* Editor action icons (CSS-masked Bootstrap Icons — matches the app's icon-btn) */
.ed-ic {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #5a6a8a;
    -webkit-mask: var(--i) center / contain no-repeat;
            mask: var(--i) center / contain no-repeat;
}
.ed-people { --i: url(/assets/icons/people.svg); }
.ed-copy { --i: url(/assets/icons/copy.svg); }
.ed-next { --i: url(/assets/icons/arrow-right.svg); }
.ed-del { --i: url(/assets/icons/trash3.svg); }
.icon-btn-danger:hover .ed-del { background: #d92d20; }

.lp-demo-body .panel {
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(23, 43, 99, 0.05);
}

.lp-demo-body .panel:last-child {
    margin-bottom: 0;
}

.lp-demo-body .day-banner {
    font-size: 13.5px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.lp-demo-body .day-tabs {
    margin-bottom: 10px;
}

.lp-demo-body .area-block {
    margin-bottom: 14px;
}

.lp-demo-body .area-block:last-child {
    margin-bottom: 0;
}

.lp-demo-body .shift-cards {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.lp-demo-body .ps-day-head {
    font-size: 14px;
}

.lp-demo-body .ps-shift {
    font-size: 13px;
    padding: 7px 10px;
}

.lp-demo-body .ps-shift-names {
    display: none;
}

.lp-muted-small {
    color: #5a6a8a;
    font-size: 12.5px;
}

.lp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.lp-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    border-radius: 12px;
    padding: 12px 6px;
}

.lp-stat-blue { background: #f2f6ff; border: 1px solid #dbe7ff; }
.lp-stat-green { background: #e8f7ee; border: 1px solid #cdeeda; }
.lp-stat-orange { background: #fff3e2; border: 1px solid #ffe3bd; }

.lp-stat-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.lp-stat-green .lp-stat-value { color: #178743; }
.lp-stat-orange .lp-stat-value { color: #d97a08; }
.lp-stat-red .lp-stat-value { color: #d92d20; }

.lp-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #5a6a8a;
}

.lp-icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lp-ic-green { background: #23b26d; }
.lp-ic-blue { background: #2b6bf3; }
.lp-ic-orange { background: #ff8a3c; }

.lp-bookings .lp-muted-small {
    display: block;
    text-align: center;
    margin: 14px 0 0;
}

.lp-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #e7edf7;
    font-size: 13.5px;
}

.lp-detail-row span {
    color: #5a6a8a;
}

.lp-detail-row strong {
    font-weight: 700;
    text-align: right;
}

.lp-private .lp-muted-small {
    margin: 12px 0 0;
}

/* Final CTA band */
/* Final CTA: full-bleed band sitting directly on the footer */
.lp .lp-final {
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    padding-left: max(24px, calc(50vw - 580px));
    padding-right: max(24px, calc(50vw - 580px));
    box-sizing: border-box;
}

/* Free-to-start claim band */
.lp .lp-claim {
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    padding: 56px max(24px, calc(50vw - 580px));
    box-sizing: border-box;
    background: linear-gradient(135deg, #2b6bf3 0%, #1d51c4 100%);
    text-align: center;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 980px) {
    .lp-hero-grid {
        grid-template-columns: 1fr;
    }

    .lp-hero-card {
        justify-self: stretch;
        max-width: none;
    }

    .lp-hero {
        background-size: auto 210px, auto;
        background-position: right -20px bottom, center top;
    }

    .lp-hero-grid {
        padding-bottom: 210px;
    }

    .lp-clubhouse-intro {
        background-size: min(340px, 92%);
        padding-bottom: min(52vw, 210px);
    }

    .lp-showcase {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lp-split {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .lp-split-reverse .lp-split-copy {
        order: 0;
    }

    .lp-hero-shot {
        justify-self: stretch;
        max-width: none;
    }

    .lp-clubhouse {
        grid-template-columns: 1fr;
    }

    .lp-features {
        grid-template-columns: 1fr;
    }

    .lp-final {
        grid-template-columns: 1fr;
    }

    .lp-final-art {
        margin: 0 auto;
    }

    .lp-overview-cols {
        grid-template-columns: 1fr;
    }
}

/* Footer (used on every page, marketing and dashboard alike) — always dark */
.app-footer {
    background: #0e1d3a;
    padding: 32px 24px 20px;
    font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.app-footer label,
.app-footer h6,
.app-footer p,
.app-footer .app-footer-heading {
    color: #ffffff !important;
}

.app-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
}

.app-footer-brand {
    max-width: 320px;
}

.app-footer-logo {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: 14px;
}

.app-footer-tagline {
    display: block;
    color: #9fb2d8 !important;
    margin-top: 8px;
}

.app-footer-columns {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
}

.app-footer-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-footer-heading {
    font-weight: 600;
    margin-bottom: 4px;
}

.app-footer-column a {
    color: #c3d2ef;
    text-decoration: none;
}

.app-footer-column a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.app-footer-bottom {
    max-width: 1100px;
    margin: 24px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.app-footer-copyright,
.app-footer-credit {
    font-size: 13px;
    color: #9fb2d8;
}

.app-footer-credit a {
    color: inherit;
    font-weight: 600;
}

.raykast-link img {
    height: 14px;
    width: auto;
    vertical-align: -2px;
    opacity: 0.9;
}

.raykast-link:hover img {
    opacity: 1;
}

.footer-sep {
    margin: 0 6px;
}

.footer-heart {
    color: #ff5f57;
}

/* Cards */
.form-card {
    max-width: 640px;
    padding: 28px;
    border-radius: 18px;
    border: 1px solid #e6edf9;
    box-shadow: 0 14px 34px rgba(23, 43, 99, 0.09);
}

.list-row {
    padding: 4px 8px;
}

.signup-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    gap: 12px;
}

.grid-scroll {
    overflow-x: auto;
}

/* Plain data tables that aren't FluentDataGrid (dynamic inline-edit rows) */
.fluent-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.fluent-table th,
.fluent-table td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    vertical-align: middle;
}

/* Native <input>/<select> used for datetime-local fields (no Fluent date+time
   equivalent), styled to sit visually close to Fluent's text field appearance. */
.fluent-native-label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--neutral-foreground-rest, #201f1e);
}

.native-input {
    font-family: inherit;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-rest, #8a8886);
    background: var(--neutral-fill-input-rest, #ffffff);
    color: inherit;
    min-height: 32px;
}

.text-muted {
    color: var(--neutral-foreground-2, #605e5c);
    font-size: 13px;
}

/* The board renders every day of the event; on screen only the day picked
   via the tabs is visible. Print shows them all, one page per day. */
.board-day-offscreen {
    display: none;
}

.d-print-only {
    display: none;
}

@media print {
    .d-print-none {
        display: none !important;
    }

    .board-day-offscreen {
        display: block;
    }

    .d-print-only {
        display: block;
    }

    .board-day-print-skip {
        display: none;
    }

    .board-day-print-break {
        break-before: page;
    }

    /* App/site chrome has no place on paper. */
    .app-topbar,
    .app-sidebar,
    .app-footer,
    .public-nav,
    .public-footer,
    .tab-bar,
    .page-actions,
    .page-back,
    .save-bar,
    .csv-import-label {
        display: none !important;
    }

    /* Flatten the layout: no tint, no fixed background, full page width. */
    .main-area {
        background: none !important;
    }

    .content-padding,
    .public-main {
        padding: 0 !important;
        max-width: none !important;
    }

    /* Nothing scrolls on paper — let content flow instead of clipping. */
    .app-nav,
    .grid-scroll {
        overflow: visible !important;
    }

    /* Panels flatten to plain sections. */
    .panel {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 14px;
    }

    /* Keep a shift card / table row together on one page, and make sure
       the area colors and status chips actually come out of the printer. */
    .shift-card,
    tr {
        break-inside: avoid;
    }

    .area-block,
    .chip {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Branded boot/loading screen (index.html, before Blazor starts) */
.app-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: linear-gradient(180deg, #e9f2ff 0%, #ffffff 100%);
}

.app-loading-logo {
    height: 44px;
    width: auto;
    animation: app-loading-pulse 1.6s ease-in-out infinite;
}

@keyframes app-loading-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.app-loading-bar {
    width: 220px;
    height: 8px;
    border-radius: 6px;
    background: #dbe7fa;
    overflow: hidden;
}

.app-loading-fill {
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: #2b6bf3;
    border-radius: 6px;
    transition: width 0.2s ease;
}

.app-loading-text {
    font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #5a6a8a;
}

.app-loading-text::after {
    content: var(--blazor-load-percentage-text, "…");
}

/* Public signup: hint for event days without any shifts */
.ps-day-empty {
    margin: 0;
    color: #8fa1c0;
    font-size: 14px;
}

/* Public signup board: selectable shift cards */
.shift-card-selected {
    border-color: #2b6bf3;
    box-shadow: 0 0 0 2px rgba(43, 107, 243, 0.25), 0 3px 10px rgba(23, 43, 99, 0.05);
}

.shift-card-muted {
    opacity: 0.65;
}

.shift-card-select {
    border-top: 1px dashed #e7edf7;
    padding-top: 8px;
    margin-top: 4px;
}

/* Unified board: compact time-led cards + editor color picker */
.shift-card-compact {
    padding: 8px 10px 8px 12px;
}

.shift-card-compact .shift-card-head {
    margin-bottom: 2px;
}

.shift-card-time {
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.shift-card-compact .shift-card-person {
    font-size: 13px;
    padding: 1px 0;
}

.shift-color-input {
    width: 28px;
    height: 26px;
    padding: 0;
    border: 1px solid #d7e0f0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}

/* The native inner swatch is a hard rectangle -- round it to match the input */
.shift-color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.shift-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}

.shift-color-input::-moz-color-swatch {
    border: none;
    border-radius: 5px;
}

/* Occupied-but-unnamed slots on the board */
.shift-card-person-anon span {
    color: #8fa1c0;
    font-style: italic;
}

/* Klubplan watermark on public/embeddable pages: subtle, always visible even
   when the page is cropped inside an iframe. */
.embed-watermark {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e6edf9;
    border-radius: 999px;
    padding: 4px 10px;
    line-height: 0;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.embed-watermark:hover {
    opacity: 1;
}

.embed-watermark img {
    height: 14px;
    width: auto;
}

@media print {
    .embed-watermark { display: none; }
}

/* Subtle jump of the fixed save button whenever something was edited */
@keyframes save-nudge {
    0% { transform: translateY(0); }
    30% { transform: translateY(-7px); }
    55% { transform: translateY(0); }
    75% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.save-bar-nudge {
    animation: save-nudge 0.45s ease;
}