/* Apple clarity, enhanced with restrained Nothing-style interface details. */
:root {
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --blue: #0071e3;
    --blue-dark: #0066cc;
    --surface: #ffffff;
    --canvas: #f5f5f7;
    --line: #d2d2d7;
    --soft-line: #e8e8ed;
    --signal: #ff3b30;
    --shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
}

html { background: var(--canvas); }

body {
    color: var(--ink);
    font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.015em;
    background: var(--canvas);
}

body::before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    width: min(42vw, 540px);
    height: 230px;
    background: radial-gradient(circle at 90% 0%, rgba(0, 113, 227, 0.13), transparent 67%);
    pointer-events: none;
}

body::after {
    content: "● ● ●";
    position: fixed;
    z-index: -1;
    right: 24px;
    bottom: 16px;
    color: #b5b5bc;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 8px;
    letter-spacing: 4px;
}

.main-header {
    min-height: 76px;
    padding: 15px clamp(20px, 4vw, 52px);
    background: rgba(255, 255, 255, 0.84);
    border-bottom: 1px solid rgba(29, 29, 31, 0.1);
    box-shadow: none;
    backdrop-filter: blur(18px) saturate(150%);
}

.main-header h1 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.05em;
}

.main-header p { color: var(--muted); }

.notes-eyebrow,
.chat-members-label,
.countdown-label,
.planning-area-title {
    color: var(--muted);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dashboard {
    max-width: 1180px;
    margin: 38px auto 64px;
    padding: 0 clamp(18px, 3vw, 28px);
}

.cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.card,
.notes-layout {
    border: 1px solid var(--soft-line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: none;
}

.card { padding: 24px; }

.cards > .menu-card,
.cards > .menu-card:nth-child(1),
.cards > .menu-card:nth-child(2) {
    grid-column: auto;
    min-height: 178px;
    display: block;
}

.menu-card {
    position: relative;
    overflow: hidden;
    border-color: var(--soft-line);
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.cards > .menu-card:nth-child(n) { background: var(--surface); color: var(--ink); }
.cards > .menu-card:nth-child(n) p { color: var(--muted); }

.menu-card::before { display:none; }

.menu-card::after { display: none; }
.menu-card h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -0.035em; }
.menu-card p { color: var(--muted); margin: 0; }
.menu-card:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.11); }

.unread-indicator {
    width: 9px;
    height: 9px;
    background: var(--signal);
    box-shadow: 0 0 0 3px #fff;
}

.logout-button,
.back-button,
.button,
.chat-form button,
.countdown-form button,
.login-button {
    border: 1px solid transparent;
    border-radius: 980px;
    box-shadow: none;
    font-family: inherit;
    font-weight: 600;
}

.logout-button { background: var(--ink); color: #fff; }
.logout-button:hover { background: #424245; }
.back-button, .button { background: #f0f0f2; color: var(--ink); }
.back-button:hover, .button:hover { background: #e6e6eb; }
.delete-button { background: #fff0ef; color: #c3271f; }
.delete-button:hover { background: #ffe0dd; }

input, select, textarea,
.planning-form input, .planning-form select,
.countdown-form input, .countdown-form button {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    box-shadow: none;
}

input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(0, 113, 227, 0.18);
    border-color: var(--blue);
}

details { border-color: var(--soft-line); background: #fbfbfc; }
summary { color: var(--ink); font-weight: 650; }

.chat-container, .notes-page, .activity-card { border-radius: 20px; }
.chat-members, .chat-form { background: #fff; border-color: var(--soft-line); backdrop-filter: none; }
.chat-messages { background: #f6f6f7; }
.chat-message { border-color: #e6e6e9; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); backdrop-filter: none; }
.eigene-nachricht { border-color: #0071e3; background: var(--blue); box-shadow: 0 4px 12px rgba(0, 113, 227, 0.2); }
.presence-indicator.online { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.14); }
.presence-indicator.offline { background: #a1a1a6; }

.chart-card, .sport-ranking, .cloud-status, .planning-day, .countdown-card { background: #fff; }
.school-end-card { background: linear-gradient(145deg, #f1f8ff, #fff); }
.countdown-number { color: var(--ink); }
.planning-tab.active { background: var(--ink); color: #fff; }
.planning-overview-day.has-entries { border-color: #8fc4ff; background: #edf6ff; }
.planning-overview-day.has-entries i { background: var(--blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); }

.login-page { background: radial-gradient(circle at 50% 0%, #e7f2ff, transparent 30rem), var(--canvas); }
.login-page::after { content: "● ● ●"; color: #aaaab0; }
.login-card { border: 1px solid var(--soft-line); border-radius: 24px; background: #fff; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.1); }
.login-logo { background: var(--ink); color: #fff; }
.login-button { background: var(--blue); color: #fff; }
.login-button:hover { background: var(--blue-dark); }

table { border-collapse: separate; border-spacing: 0 8px; }
th { color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
td { background: #fff; }

@media (max-width: 760px) {
    body::after { display: none; }
    .main-header { min-height: 68px; }
    .main-header h1 { font-size: 21px; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cards > .menu-card, .cards > .menu-card:nth-child(1), .cards > .menu-card:nth-child(2) { grid-column: auto; min-height: 150px; padding: 19px; }
    .menu-card h2 { font-size: 18px; }
    .card { padding: 18px; border-radius: 18px; }
    .chat-container, .notes-page, .activity-card { border-radius: 18px; }
}

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

/* Dark mode: dieselbe Informationsarchitektur, mit schwarzer Nothing-Basis. */
.theme-switch {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 5px 8px 5px 12px;
    border: 1px solid rgba(29, 29, 31, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
    color: var(--ink);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
}

.theme-switch-button {
    position: relative;
    width: 42px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d1d1d6;
    cursor: pointer;
    transition: background 180ms ease;
}

.theme-switch-button::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 180ms ease;
}

[data-theme="dark"] {
    --ink: #f5f5f7;
    --muted: #a1a1a6;
    --blue: #2997ff;
    --blue-dark: #69b8ff;
    --surface: #1d1d1f;
    --canvas: #000;
    --line: #48484a;
    --soft-line: #323236;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

[data-theme="dark"] body {
    background: radial-gradient(circle at 90% -5%, rgba(41, 151, 255, 0.17), transparent 27rem), #000;
}

[data-theme="dark"] body::before {
    background: radial-gradient(circle at 90% 0%, rgba(41, 151, 255, 0.24), transparent 67%);
}

[data-theme="dark"] body::after { color: #67676d; }
[data-theme="dark"] .main-header { background: rgba(0, 0, 0, 0.82); border-color: #29292c; }
[data-theme="dark"] .card,
[data-theme="dark"] .notes-layout,
[data-theme="dark"] .cards > .menu-card:nth-child(n),
[data-theme="dark"] .chart-card,
[data-theme="dark"] .sport-ranking,
[data-theme="dark"] .cloud-status,
[data-theme="dark"] .planning-day,
[data-theme="dark"] .countdown-card { background: #242426; border-color: #3b3b3f; }
[data-theme="dark"] .menu-card:hover { background: #28282b; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .menu-card::before { color: #ff453a; }
[data-theme="dark"] .chat-members,
[data-theme="dark"] .chat-form { background: #1d1d1f; border-color: #323236; }
[data-theme="dark"] .chat-messages { background: #111113; }
[data-theme="dark"] .chat-message { background: #29292d; border-color: #3a3a3e; color: #f5f5f7; }
[data-theme="dark"] .eigene-nachricht { background: #0a84ff; border-color: #0a84ff; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .planning-form input,
[data-theme="dark"] .planning-form select,
[data-theme="dark"] .countdown-form input { background: #38383b; border-color: #525257; color: #f5f5f7; }
[data-theme="dark"] details { background: #2d2d30; border-color: #46464b; }
[data-theme="dark"] .back-button,
[data-theme="dark"] .button { background: #2c2c2e; color: #f5f5f7; }
[data-theme="dark"] .back-button:hover,
[data-theme="dark"] .button:hover { background: #3a3a3c; }
[data-theme="dark"] .delete-button { background: #4a1f20; color: #ff6961; }
[data-theme="dark"] .school-end-card { background: linear-gradient(145deg, #172433, #1d1d1f); }
[data-theme="dark"] .planning-overview-day.has-entries { background: #152b40; border-color: #287bc4; }
[data-theme="dark"] .logout-button,
[data-theme="dark"] .planning-tab.active {
    background: #f5f5f7;
    color: #1d1d1f;
}
[data-theme="dark"] .planning-tab:not(.active) {
    background: #38383b;
    border-color: #525257;
    color: #f5f5f7;
}
[data-theme="dark"] .permission-details {
    background: #2d2d30;
    border-color: #46464b;
}
[data-theme="dark"] .permission-details summary,
[data-theme="dark"] .permission-list label,
[data-theme="dark"] .permission-list span {
    color: #f5f5f7;
}
[data-theme="dark"] .main-header h1 { color: #fff; }
[data-theme="dark"] .login-card h1 { color: #fff; }
[data-theme="dark"] .login-card label { color: #f5f5f7; }
[data-theme="dark"] th { color: #d2d2d7; }
[data-theme="dark"] .note-title,
[data-theme="dark"] .note-text { color: #f5f5f7; }
[data-theme="dark"] .note-date { color: #c7c7cc; }
[data-theme="dark"] .countdown-form button {
    background: #38383b;
    border-color: #525257;
    color: #f5f5f7;
}
[data-theme="dark"] .note-card { background: #242426; border-color: #3b3b3f; }
[data-theme="dark"] .login-page { background: radial-gradient(circle at 50% 0%, #14283c, transparent 30rem), #000; }
[data-theme="dark"] .login-card { background: #1d1d1f; border-color: #353539; }
[data-theme="dark"] .login-subtitle,
[data-theme="dark"] .login-footer { color: #a1a1a6; }
[data-theme="dark"] td { background: #242427; }
[data-theme="dark"] .theme-switch { background: rgba(29, 29, 31, 0.9); border-color: #4a4a4d; }
[data-theme="dark"] .theme-switch-button { background: var(--blue); }
[data-theme="dark"] .theme-switch-button::after { transform: translateX(17px); }

@media (max-width: 600px) {
    .theme-switch { right: 14px; bottom: 14px; min-height: 38px; padding-left: 10px; }
    .theme-switch-label { display: none; }
}