/*
 * Albogasio Booking - plain CSS
 *
 * Colors and typography are driven by CSS custom properties. Each user
 * has a single base color; the shades used in the UI are derived from it
 * with relative color syntax (oklch(from ...)), so changing a user's
 * base color re-themes everything of theirs.
 */

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */

:root {
    /* typography */
    --font-sans:
        ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --tracking-wide: 0.025em;

    /* grays and accents */
    --color-white: #fff;
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-yellow-950: oklch(28.6% 0.066 53.813);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-blue-700: oklch(48.8% 0.243 264.376);

    /* range markers in the day column */
    --range-short: #00a259;
    --range-long: #a29700;

    /* points pool colors, by year */
    --pool-year-2023: #70a73b;
    --pool-year-2024: #4f7a28;
    --pool-year-2025: #436625;
    --pool-year-2026: #385222;
    --pool-year-2027: #314621;
    --pool-year-2028: #17260d;
    --pool-year-default: #000000;
    --pool-summer: rgb(230 230 0);

    /* user base colors (one per user; shades are derived) */
    --user-andi: #6e76ff;
    --user-anne: #76ede9;
    --user-annette: #f56fa6;
    --user-daniel: #f07729;
    --user-feia: #c687ed;
    --user-heike: #deb3ed;
    --user-katja: #4a7867;
    --user-lun: #e5bf2a;
    --user-markus: #44e496;
    --user-natalie: #35c4db;
    --user-pegah: #ed9f4a;
    --user-rebecca: #a4efa7;
    --user-robby: #7bda2f;
    --user-sabine: #c7e725;
    --user-silke: #c6e239;

    /* shades derived from the booked cell background */
    --cell-base: var(--color-slate-400);
    --cell-text: oklch(from var(--cell-base) calc(l - 0.27) c h);
    --cell-text-strong: oklch(from var(--cell-base) calc(l - 0.32) c h);

    /* shadows */
    --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    --drop-shadow-md: drop-shadow(0 3px 3px #0000001f);
    --drop-shadow-sm-30: drop-shadow(0 1px 2px oklab(0% 0 0 / 0.3));
    --drop-shadow-sm-50: drop-shadow(0 1px 2px oklab(0% 0 0 / 0.5));
}

/* per-user hooks: markup carries user-<id>, colors stay in CSS */
.user-andi    { --cell-base: var(--user-andi); }
.user-anne    { --cell-base: var(--user-anne); }
.user-annette { --cell-base: var(--user-annette); }
.user-daniel  { --cell-base: var(--user-daniel); }
.user-feia    { --cell-base: var(--user-feia); }
.user-heike   { --cell-base: var(--user-heike); }
.user-katja   { --cell-base: var(--user-katja); }
.user-lun     { --cell-base: var(--user-lun); }
.user-markus  { --cell-base: var(--user-markus); }
.user-natalie { --cell-base: var(--user-natalie); }
.user-pegah   { --cell-base: var(--user-pegah); }
.user-rebecca { --cell-base: var(--user-rebecca); }
.user-robby   { --cell-base: var(--user-robby); }
.user-sabine  { --cell-base: var(--user-sabine); }
.user-silke   { --cell-base: var(--user-silke); }

/* ------------------------------------------------------------------ */
/* Base                                                                */

*,
::before,
::after {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

html {
    font-size: 12pt;
    line-height: 1.5;
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

button,
input {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
}

button {
    appearance: button;
}

::placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentcolor 50%, transparent);
}

svg {
    display: block;
    vertical-align: middle;
}

th {
    font-weight: normal;
}

/* custom elements render into light DOM */
booking-app,
login-form,
pool-badge,
availability-cell {
    display: block;
}

.page-index {
    background-color: var(--color-slate-200);
}

/* responsive helpers: "narrow" is phone (< 40rem), "wide" is larger */
@media (min-width: 40rem) {
    .narrow-only {
        display: none !important;
    }
}
@media (max-width: 39.999rem) {
    .wide-only {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */

.btn {
    background-color: var(--color-yellow-500);
    color: var(--color-yellow-900);
    padding: 0.25rem 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    border-radius: 0.25rem;
    filter: var(--drop-shadow);
}

.btn:hover {
    background-color: var(--color-yellow-700);
}

.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Calendar page                                                       */

.calendar-container {
    margin-inline: auto;
    padding: 0;
    background-color: var(--color-slate-100);
}

@media (min-width: 96rem) {
    .calendar-container {
        width: 100%;
        max-width: 96rem;
    }
}

/* top bar with pools, greeting, logout and connectivity dot */
.topbar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    margin-inline: auto;
    padding: 0.5rem 1rem;
    background-color: var(--color-slate-200);
    height: 4rem;
    z-index: 10;
}

.topbar-right {
    flex-grow: 1;
    text-align: right;
}

.topbar-greeting {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    margin-right: 0.5rem;
}

.heartbeat {
    text-align: right;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-blue-700);
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0;
}

.heartbeat.is-error {
    background-color: var(--color-red-700);
}

@keyframes heartbeatFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.heartbeat-pulse {
    animation: heartbeatFade 5s linear;
}

/* points pool badges */
pool-badge {
    vertical-align: top;
}

.pool-dot {
    width: 1rem;
    height: 1rem;
    border-radius: calc(infinity * 1px);
    filter: var(--drop-shadow-md);
    vertical-align: middle;
    display: none;
}

@media (min-width: 40rem) {
    .pool-dot {
        display: inline-block;
    }
}

.pool-value {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    white-space: nowrap;
}

@media (min-width: 40rem) {
    .pool-value {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
    }
}

.pool-sun {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
}

.pool-meta {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-slate-500);
    white-space: nowrap;
}

/* the calendar table */
.cal-table {
    width: 100%;
    background-color: var(--color-slate-50);
    border-collapse: collapse;
}

.cal-head-row {
    background-color: var(--color-slate-50);
    position: sticky;
    top: 4rem;
    z-index: 10;
    filter: var(--drop-shadow-md);
}

.cal-head-corner {
    background-color: var(--color-slate-100);
    width: 12%;
}

.cal-head-room {
    width: 12%;
    overflow-x: clip;
    padding: 0.75rem;
    font-weight: normal;
    letter-spacing: var(--tracking-wide);
    text-align: center;
    vertical-align: middle;
    color: var(--color-yellow-950);
    background-color: var(--color-slate-100);
    border-bottom: 1px solid var(--color-slate-400);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.cal-head-room > div {
    overflow-x: clip;
    white-space: nowrap;
}

/* month separator */
.cal-month-head {
    background-color: var(--color-slate-300);
    position: sticky;
    top: 6.75rem;
    z-index: 9;
}

.cal-month-name {
    text-align: right;
    padding-inline: 0.75rem;
    padding-bottom: 0.3rem;
    vertical-align: bottom;
    font-weight: normal;
}

.cal-month-name .narrow-only {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.cal-month-year {
    padding: 0.25rem 0.5rem;
    text-align: left;
    vertical-align: bottom;
    font-weight: normal;
}

.cal-month-year span {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

@media (min-width: 40rem) {
    .cal-month-year span {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl--line-height);
    }
}

/* day rows */
.day-row {
    background-color: var(--color-slate-100);
    border-bottom: 1px solid var(--color-slate-300);
}

.day-row.is-today {
    border-bottom-color: var(--color-red-500);
}

.day-row.is-past {
    opacity: 0.5;
}

.day-label {
    padding: 0.25rem 0.75rem;
    background-color: var(--color-slate-100);
}

.day-row.is-weekend .day-label {
    background-color: var(--color-red-200);
}

/* short/long booking range markers: colored sliver on the left edge */
.day-label.range-short {
    background: linear-gradient(
        to right,
        var(--range-short),
        var(--color-slate-100) 0.5rem,
        var(--color-slate-100)
    );
}

.day-row.is-weekend .day-label.range-short {
    background: linear-gradient(
        to right,
        var(--range-short),
        var(--color-red-200) 0.5rem,
        var(--color-red-200)
    );
}

.day-label.range-long {
    background: linear-gradient(
        to right,
        var(--range-long),
        var(--color-slate-100) 0.5rem,
        var(--color-slate-100)
    );
}

.day-row.is-weekend .day-label.range-long {
    background: linear-gradient(
        to right,
        var(--range-long),
        var(--color-red-200) 0.5rem,
        var(--color-red-200)
    );
}

.day-label-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

.day-label-sun {
    filter: var(--drop-shadow-sm-30);
}

.day-label-sun svg {
    stroke-width: 2;
    stroke: var(--color-amber-500);
}

.day-label-spacer {
    flex: 1 1 0%;
}

.day-label-weekday {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    padding-top: 0.125rem;
    display: none;
}

@media (min-width: 40rem) {
    .day-label-weekday {
        display: inline;
    }
}

.day-label-day {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

@media (min-width: 40rem) {
    .day-label-day {
        font-size: var(--text-base);
        line-height: var(--text-base--line-height);
    }
}

/* availability cells */
.cell-td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell {
    width: 100%;
    height: 3rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.cell-available {
    background-color: var(--color-slate-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-available .cell-icon-wrap:hover,
.cell-available:hover .cell-icon-wrap {
    filter: var(--drop-shadow-sm-50);
}

.cell-available:active .cell-icon-wrap {
    filter: none;
}

.icon-plus {
    stroke-width: 3;
    stroke: var(--color-slate-400);
}

.cell-available:hover .icon-plus {
    stroke: var(--color-slate-950);
}

.icon-busy {
    stroke-width: 3;
    stroke: var(--color-slate-800);
}

.cell-empty {
    background-color: var(--color-slate-100);
    height: 3rem;
}

.cell-booked {
    background-color: var(--cell-base);
    color: var(--cell-text);
}

.cell-booked .cell-name {
    font-weight: normal;
}

.cell-booked:hover .cell-name {
    display: none !important;
}

.cell-booked .cell-action {
    filter: var(--drop-shadow-sm-50);
    display: none;
}

.cell-booked:hover .cell-action {
    display: inline-block;
}

.cell-booked:active .cell-action {
    filter: none;
}

.icon-trash {
    stroke-width: 3;
    stroke: var(--color-red-900);
}

.cell-booked-static {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cell-base);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--cell-text-strong);
}

.cell-booked-static .cell-name {
    flex: 1 1 auto;
}

.cell-unavailable {
    width: 100%;
    height: 3rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    background-color: var(--color-slate-800);
    color: var(--color-slate-400);
}

/* data integrity canary: booking without a matching room */
.cell-missing {
    padding: 0.75rem;
    background-color: var(--color-red-950);
    color: var(--color-red-200);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Login page                                                          */

.login-wrap {
    width: 100%;
}

.login-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--color-gray-200);
    padding-inline: 1rem;
}

.login-card {
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    border-radius: 0.25rem;
    padding: 1.5rem 2rem 2rem;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 28rem;
}

.login-error {
    border: 1px solid var(--color-red-600);
    background-color: var(--color-red-100);
    color: var(--color-red-900);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    position: relative;
}

.login-field {
    margin-bottom: 1rem;
}

.login-field-last {
    margin-bottom: 1.5rem;
}

.login-label {
    display: block;
    color: var(--color-gray-700);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    margin-bottom: 0.5rem;
}

.login-input {
    box-shadow: var(--shadow);
    appearance: none;
    border: 1px solid;
    border-radius: 0.25rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--color-gray-700);
    line-height: 1.25;
}

.login-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.login-input-password {
    margin-bottom: 0.75rem;
}

.login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ------------------------------------------------------------------ */
/* Profile page                                                        */

.page-profile {
    background-color: var(--color-slate-200);
}

.topbar-right form {
    display: inline;
}

.topbar-profile-link {
    text-decoration: none;
    margin-right: 0.5rem;
}

.profile-container {
    margin-inline: auto;
    min-height: 100vh;
    background-color: var(--color-slate-100);
}

@media (min-width: 96rem) {
    .profile-container {
        width: 100%;
        max-width: 96rem;
    }
}

.profile-content {
    max-width: 48rem;
    margin-inline: auto;
    padding: 1rem;
}

.profile-title {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: normal;
    margin: 0.5rem 0 1rem;
}

.profile-card {
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    border-radius: 0.25rem;
    padding: 1.5rem 2rem 2rem;
    margin-bottom: 1rem;
}

.profile-card-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: normal;
    letter-spacing: var(--tracking-wide);
    color: var(--color-yellow-950);
    margin-bottom: 1rem;
}

.profile-year {
    margin-bottom: 1.5rem;
}

.profile-year:last-child {
    margin-bottom: 0;
}

.profile-year-title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: normal;
    border-bottom: 1px solid var(--color-slate-300);
    margin-bottom: 0.5rem;
}

.pool-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.25rem;
}

.pool-dot-static {
    display: inline-block;
    flex: 0 0 auto;
}

.pool-row-name {
    flex: 0 0 11rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.pool-row-hint {
    display: block;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-slate-500);
}

.pool-bar {
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-slate-200);
    overflow: hidden;
}

.pool-bar-fill {
    height: 100%;
    border-radius: calc(infinity * 1px);
    background-color: var(--color-yellow-500);
}

.pool-row-numbers {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    text-align: right;
    min-width: 7rem;
}

.pool-row-numbers .pool-row-hint {
    display: inline;
}

.profile-year-stats {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-slate-500);
}

.profile-password-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-success {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--pool-year-2024);
}

/* calendar subscription */
.profile-text {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-slate-800);
    margin-bottom: 0.75rem;
}

.calendar-url-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0.75rem;
}

.calendar-url-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-slate-300);
    border-radius: 0.25rem;
    background-color: var(--color-slate-50);
    color: var(--color-slate-800);
}

.calendar-url-input:focus {
    outline: 2px solid var(--color-slate-400);
    outline-offset: -1px;
}

.calendar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.profile-hint {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--color-slate-500);
}

/* rules section */
.profile-rules h4 {
    font-weight: normal;
    letter-spacing: var(--tracking-wide);
    margin: 1.25rem 0 0.25rem;
}

.profile-rules h4:first-child {
    margin-top: 0;
}

.profile-rules p,
.profile-rules li {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-slate-800);
    margin-bottom: 0.5rem;
}

.profile-rules ul {
    padding-left: 1.25rem;
}

.rules-table {
    margin: 0.5rem 0 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

.rules-table td {
    padding: 0.125rem 0;
}

.rules-table-tokens {
    padding-left: 1.5rem !important;
    text-align: right;
    white-space: nowrap;
}

/* password dialog */
.pw-dialog {
    margin: auto;
    border: none;
    border-radius: 0.25rem;
    box-shadow: var(--shadow-md);
    padding: 1.5rem 2rem 2rem;
    width: calc(100% - 2rem);
    max-width: 28rem;
    background-color: var(--color-white);
}

.pw-dialog::backdrop {
    background-color: rgb(0 0 0 / 0.4);
}

.pw-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-secondary {
    background-color: var(--color-slate-200);
    color: var(--color-slate-800);
}

.btn-secondary:hover {
    background-color: var(--color-slate-300);
}

.btn[disabled] {
    opacity: 0.5;
}