/* AgendaCue base styles: calm, clear, touch friendly. No framework. */

:root {
    --color-bg: #f4f5f7;
    --color-surface: #ffffff;
    --color-text: #1b1f24;
    --color-muted: #5b6470;
    --color-border: #d5d9df;
    --color-primary: #1f5fbf;
    --color-primary-contrast: #ffffff;
    --color-danger: #b3261e;
    --color-success: #1e7a3c;
    --color-focus: #f2a900;

    /* Timer levels (always combined with a text label, never colour alone) */
    --color-warning-bg: #fff1c2;
    --color-warning-fg: #6b4a00;
    --color-critical-bg: #ffd9d4;
    --color-critical-fg: #8c1d13;
    --color-overtime-bg: #b3261e;
    --color-overtime-fg: #ffffff;

    --radius: 10px;
    --space: 1rem;
    --touch-target: 48px;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #121417;
        --color-surface: #1c1f24;
        --color-text: #eef1f4;
        --color-muted: #a6aeb8;
        --color-border: #353a42;
        --color-primary: #5b9bff;
        --color-primary-contrast: #0b1320;
        --color-danger: #ff8a80;
        --color-success: #7fd79b;
        --color-warning-bg: #4a3800;
        --color-warning-fg: #ffe08a;
        --color-critical-bg: #5c1610;
        --color-critical-fg: #ffc4bc;
        --color-overtime-bg: #d93a2f;
        --color-overtime-fg: #ffffff;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* The hidden attribute must win over component display rules (live updates toggle it). */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    min-height: 100dvh;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1rem;
}

a {
    color: var(--color-primary);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 var(--space);
}

/* Layout */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    padding: 0.75rem var(--space);
    /* Safe areas (notch, rounded corners, home indicator) with viewport-fit=cover; 0 elsewhere. */
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(var(--space), env(safe-area-inset-left));
    padding-right: max(var(--space), env(safe-area-inset-right));
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
    text-decoration: none;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.user-menu form {
    margin: 0;
}

.user-name {
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-main {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space);
    padding-left: max(var(--space), env(safe-area-inset-left));
    padding-right: max(var(--space), env(safe-area-inset-right));
    padding-bottom: max(var(--space), env(safe-area-inset-bottom));
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: calc(var(--space) * 1.5);
}

.card-narrow {
    max-width: 420px;
    margin: 2rem auto;
}

.hint {
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* Forms */

.form {
    display: grid;
    gap: var(--space);
}

.field {
    display: grid;
    gap: 0.35rem;
}

.field-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.field-inline input {
    width: 1.25rem;
    height: 1.25rem;
}

label {
    font-weight: 600;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
input:not([type]), textarea {
    min-height: var(--touch-target);
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.field-error, .form-errors {
    color: var(--color-danger);
    font-size: 0.9rem;
}

.form-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

.validation-summary-valid {
    display: none;
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    padding: 0.5rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    color: var(--color-primary-contrast);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-small {
    min-height: 36px;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
}

.btn-block {
    width: 100%;
}

.btn-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-large {
    width: 100%;
    min-height: 60px;
    font-size: 1.15rem;
}

.btn-icon {
    min-width: var(--touch-target);
    padding: 0.5rem;
    font-size: 1.2rem;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.inline-form {
    display: inline;
    margin: 0;
}

/* Navigation */

.app-header {
    flex-wrap: wrap;
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

.app-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
}

.app-nav a:hover {
    text-decoration: underline;
}

/* Page structure */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    margin-bottom: var(--space);
}

.page-header h1 {
    margin: 0;
}

.card + .card,
.card + .actions,
.actions + .card {
    margin-top: var(--space);
}

.card h2 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

.card-form {
    max-width: 560px;
    margin: 0 auto;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space);
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.25rem 0;
    color: var(--color-muted);
}

.description {
    white-space: pre-line;
}

.summary {
    color: var(--color-muted);
}

.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
}

.facts dt {
    color: var(--color-muted);
}

.facts dd {
    margin: 0;
    font-weight: 600;
}

.danger-zone h1,
.danger-zone h2 {
    color: var(--color-danger);
}

.status {
    padding: 0.75rem var(--space);
    border-radius: var(--radius);
    border: 1px solid currentColor;
    font-weight: 600;
}

.status-success {
    color: var(--color-success);
}

.status-error {
    color: var(--color-danger);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Lists */

.meeting-list,
.agenda-list,
.user-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space);
}

.meeting-list .card + .card,
.agenda-list .card + .card,
.user-list .card + .card {
    margin-top: 0;
}

.meeting-card h2 a {
    color: var(--color-text);
}

.agenda-item {
    display: grid;
    gap: 0.5rem;
}

.agenda-item h2 {
    margin: 0;
}

.agenda-position {
    color: var(--color-muted);
}

.agenda-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 720px) {
    .agenda-item {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

.user-card .status-badge {
    font-weight: 600;
}

.status-locked,
.status-temporarilylocked {
    color: var(--color-danger);
}

/* Forms */

.duration-field {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.duration-field legend {
    font-weight: 600;
    padding: 0;
    margin-bottom: 0.35rem;
}

.duration-field label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400;
}

.duration-field input {
    width: 6rem;
}

fieldset.field {
    border: 0;
    padding: 0;
    margin: 0;
}

.copy-field {
    display: flex;
    gap: 0.5rem;
}

.copy-field input {
    flex: 1;
    min-width: 0;
}

/* Controller */

.control {
    max-width: 640px;
    margin: 0 auto;
}

.control-header h1 {
    margin: 0;
}

.control-timer {
    margin-top: var(--space);
    text-align: center;
}

.timer-position {
    margin: 0;
    color: var(--color-muted);
    font-weight: 600;
}

.timer-title {
    margin: 0.25rem 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.timer-value {
    margin: 0.25rem 0;
    font-size: clamp(3.5rem, 18vw, 6rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.timer-state {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.state-badge,
.level-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Timer levels: colour plus a text badge, so colour is never the only signal. */
.level-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-fg);
}

.level-critical {
    background: var(--color-critical-bg);
    color: var(--color-critical-fg);
}

.level-overtime {
    background: var(--color-overtime-bg);
    color: var(--color-overtime-fg);
}

.level-warning .hint, .level-warning a, .level-warning .timer-position,
.level-critical .hint, .level-critical a, .level-critical .timer-position,
.level-overtime .hint, .level-overtime a, .level-overtime .timer-position {
    color: inherit;
}

.snapshot-hint {
    margin: 0.5rem 0 0;
}

/* Live connection indicator (text, not only colour) */
.connection-status {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-success);
}

.connection-status.is-offline {
    color: var(--color-danger);
}

.control-buttons {
    display: grid;
    gap: 0.5rem;
    margin: var(--space) 0;
}

.button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.button-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.button-row form {
    margin: 0;
}

.preset-messages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.active-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.active-message p {
    margin: 0;
}

.control-agenda {
    list-style: none;
    margin: 0;
    padding: 0;
}

.control-agenda li {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.control-agenda li.is-current {
    font-weight: 700;
}

.control-agenda li.is-done {
    color: var(--color-muted);
}

.agenda-duration {
    font-variant-numeric: tabular-nums;
}

/* Presenter QR code (inline SVG, always black on white for reliable scanning) */

.qr-code {
    margin-top: var(--space);
}

.qr-code summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-weight: 600;
    cursor: pointer;
}

.qr-code-image {
    width: min(280px, 100%);
    margin: 0.5rem 0;
    background: #ffffff;
    border-radius: var(--radius);
}

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

/* Controller on short landscape screens (phones turned sideways): timer and controls side by side,
   so the current item, the timer and the primary actions are visible without scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
    .app-header {
        padding-top: max(0.25rem, env(safe-area-inset-top));
        padding-bottom: 0.25rem;
    }

    .control {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--space);
        align-items: start;
    }

    .control > * {
        grid-column: 1 / -1;
    }

    .control-header {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0 var(--space);
    }

    .control-header h1 {
        font-size: 1.2rem;
    }

    .control-header .meta,
    .control-header .connection-status {
        margin: 0;
    }

    .control > .control-timer {
        grid-column: 1;
        margin-top: 0.5rem;
        padding: 0.75rem;
    }

    .control > .control-buttons {
        grid-column: 2;
        margin: 0.5rem 0 0;
    }

    .timer-title {
        font-size: 1.15rem;
    }

    .timer-value {
        font-size: clamp(2.5rem, 20vh, 4.5rem);
    }

    .control > .card:not(.control-timer) {
        margin-top: var(--space);
    }
}

/* Install guidance on "Meine Meetings" (unobtrusive, dismissible) */

.install-hint {
    margin-top: var(--space);
}

.install-hint p {
    margin-top: 0;
}

.install-hint ol {
    margin: 0 0 var(--space);
    padding-left: 1.4rem;
}

.install-hint [data-install-action="dismiss"] {
    margin-top: 0.75rem;
}