/* =========================================================================
   Thálassa "modernist" theme — warm editorial palette applied over Bootstrap.
   Fonts (Newsreader + Hanken Grotesk) are loaded via <link> in App.razor.
   ========================================================================= */

:root {
    --rm-bg: #F7F3EC;
    --rm-sidebar: #FCF8F1;
    --rm-card: #FFFDF9;
    --rm-accent: #B25B36;
    --rm-accent-hover: #9c4c2b;
    --rm-accent-soft: #F3E8DC;
    --rm-green: #3E6B44;
    --rm-ink: #2B2622;
    --rm-muted: #9c917f;
    --rm-muted-2: #8A8073;
    --rm-faint: #B7AC95;
    --rm-border: #E9E0CF;
    --rm-border-2: #EFE7D8;
    --rm-border-input: #E6DDCC;

    /* Bootstrap variable remaps */
    --bs-primary: #B25B36;
    --bs-primary-rgb: 178, 91, 54;
    --bs-body-bg: #F7F3EC;
    --bs-body-color: #2B2622;
    --bs-emphasis-color: #2B2622;
    --bs-secondary-color: #8A8073;
    --bs-border-color: #E9E0CF;
    --bs-link-color: #B25B36;
    --bs-link-color-rgb: 178, 91, 54;
    --bs-link-hover-color: #9c4c2b;
    --bs-font-sans-serif: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

html, body {
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--rm-bg);
    color: var(--rm-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------------- Typography ---------------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    color: var(--rm-ink);
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: 2.05rem; }

a, .btn-link { color: var(--rm-accent); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--rm-accent-hover); }
.text-secondary { color: var(--rm-muted) !important; }

/* ---------------- Buttons ---------------- */
.btn {
    --bs-btn-border-radius: 11px;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: 0.55rem;
}
.btn-sm { --bs-btn-border-radius: 8px; }
.btn-primary {
    --bs-btn-color: #FBF3EC;
    --bs-btn-bg: #B25B36;
    --bs-btn-border-color: #B25B36;
    --bs-btn-hover-color: #FBF3EC;
    --bs-btn-hover-bg: #9c4c2b;
    --bs-btn-hover-border-color: #9c4c2b;
    --bs-btn-active-bg: #9c4c2b;
    --bs-btn-active-border-color: #9c4c2b;
    --bs-btn-disabled-bg: #B25B36;
    --bs-btn-disabled-border-color: #B25B36;
    box-shadow: 0 6px 14px -7px rgba(178, 91, 54, .75);
}
.btn-success {
    --bs-btn-color: #F3F8F1;
    --bs-btn-bg: #3E6B44;
    --bs-btn-border-color: #3E6B44;
    --bs-btn-hover-color: #F3F8F1;
    --bs-btn-hover-bg: #345c3a;
    --bs-btn-hover-border-color: #345c3a;
    --bs-btn-active-bg: #345c3a;
    --bs-btn-disabled-bg: #3E6B44;
    --bs-btn-disabled-border-color: #3E6B44;
    box-shadow: 0 6px 14px -8px rgba(62, 107, 68, .8);
}
.btn-outline-primary {
    --bs-btn-color: #B25B36;
    --bs-btn-border-color: #E0C4B7;
    --bs-btn-hover-color: #FBF3EC;
    --bs-btn-hover-bg: #B25B36;
    --bs-btn-hover-border-color: #B25B36;
    --bs-btn-active-bg: #B25B36;
    --bs-btn-active-border-color: #B25B36;
}
.btn-outline-secondary {
    --bs-btn-color: #8A8073;
    --bs-btn-border-color: #E2DACB;
    --bs-btn-hover-color: #2B2622;
    --bs-btn-hover-bg: #EFE7D8;
    --bs-btn-hover-border-color: #E2DACB;
    --bs-btn-active-bg: #EFE7D8;
}
.btn-outline-success {
    --bs-btn-color: #3E6B44;
    --bs-btn-border-color: #CFE0CF;
    --bs-btn-hover-color: #F3F8F1;
    --bs-btn-hover-bg: #3E6B44;
    --bs-btn-hover-border-color: #3E6B44;
}
.btn-outline-danger {
    --bs-btn-color: #A0574A;
    --bs-btn-border-color: #E7C9C0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #A0574A;
    --bs-btn-hover-border-color: #A0574A;
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(178, 91, 54, 0.18);
}

/* ---------------- Cards / surfaces ---------------- */
.card {
    --bs-card-bg: var(--rm-card);
    --bs-card-border-color: var(--rm-border-2);
    --bs-card-border-radius: 16px;
    --bs-card-inner-border-radius: 15px;
    --bs-card-cap-bg: transparent;
}

/* ---------------- Forms ---------------- */
.form-control, .form-select {
    border-color: var(--rm-border-input);
    border-radius: 10px;
    background-color: #fff;
    color: var(--rm-ink);
}
.form-control:focus, .form-select:focus { border-color: var(--rm-accent); background-color: #fff; }
.form-control::placeholder { color: var(--rm-faint); }
.form-label { font-weight: 600; color: var(--rm-muted-2); font-size: 0.9rem; }
.form-check-input:checked { background-color: var(--rm-accent); border-color: var(--rm-accent); }

/* Range sliders */
.form-range { accent-color: var(--rm-accent); }
.form-range::-webkit-slider-thumb { background-color: var(--rm-accent); }
.form-range::-webkit-slider-thumb:active { background-color: #d99b82; }
.form-range::-moz-range-thumb { background-color: var(--rm-accent); border: none; }
.form-range::-webkit-slider-runnable-track { background-color: #E6DDCC; }
.form-range::-moz-range-track { background-color: #E6DDCC; }

/* Slider "setting" helper: label row + serif value readout + end ticks */
.rng-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rng-head label { font-size: 14px; font-weight: 600; color: var(--rm-ink); margin: 0; }
.rng-val { font-family: 'Newsreader', Georgia, serif; font-size: 1.45rem; color: var(--rm-accent); line-height: 1; }
.rng-val .unit { font-family: var(--bs-font-sans-serif); font-size: 12px; font-weight: 400; color: var(--rm-muted); }
.rng-ticks { display: flex; justify-content: space-between; font-size: .7rem; color: var(--rm-faint); margin-top: 4px; }

/* Toggle switch (Bootstrap form-switch, enlarged + themed) */
.form-switch .form-check-input { width: 2.6em; height: 1.4em; }

/* ---------------- Badges / status pills ---------------- */
.badge { font-weight: 600; border-radius: 8px; padding: 0.42em 0.72em; }
.text-bg-primary   { background-color: #E7EEF6 !important; color: #3B5B8C !important; }  /* Booked */
.text-bg-success   { background-color: #E4EFE4 !important; color: #3E6B44 !important; }  /* Seated */
.text-bg-secondary { background-color: #ECE7DE !important; color: #8A8073 !important; }  /* Completed */
.text-bg-dark      { background-color: #F1E7E4 !important; color: #A0574A !important; }  /* Cancelled */
.text-bg-warning   { background-color: #F7E9D8 !important; color: #B26B2E !important; }  /* No-show */
.text-bg-danger    { background-color: #C0653F !important; color: #fff !important; }     /* overdue */

/* ---------------- Tables ---------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--rm-border-2);
    border-color: var(--rm-border-2);
    vertical-align: middle;
}
.table > thead th {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rm-faint);
    font-weight: 700;
    border-bottom-color: var(--rm-border);
}
.table > tbody > tr > td { border-bottom-color: var(--rm-border-2); }
.table-warning { --bs-table-bg: #FBEFE0; --bs-table-color: var(--rm-ink); }

/* ---------------- Alerts ---------------- */
.alert { border-radius: 12px; }
.alert-success { --bs-alert-bg: #E4EFE4; --bs-alert-color: #3E6B44; --bs-alert-border-color: #D3E5D3; }
.alert-warning { --bs-alert-bg: #F7E9D8; --bs-alert-color: #8A5A1F; --bs-alert-border-color: #EAD3B2; }
.alert-danger  { --bs-alert-bg: #F5E6E1; --bs-alert-color: #A0574A; --bs-alert-border-color: #E7C9C0; }

/* ---------------- Validation (functional) ---------------- */
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #3E6B44; }
.invalid { outline: 1px solid #A0574A; }
.validation-message { color: #A0574A; }

.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."
    }

.darker-border-checkbox.form-check-input { border-color: #b9ac95; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---------------- Collapsible sidebar (CSS-only toggle) ---------------- */
.sidebar { transition: width 0.15s ease; }
#sidebarCollapse { display: none; }

.sidebar-toggle {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: auto;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid transparent;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8073' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4 6h16M4 12h16M4 18h16'/%3e%3c/svg%3e") no-repeat center / 1.2rem;
}
.sidebar-toggle:hover { background-color: rgba(178, 91, 54, 0.08); }

@media (min-width: 641px) {
    .sidebar-toggle { display: inline-block; }
    #sidebarCollapse:checked ~ .sidebar { width: 4.5rem; }
    #sidebarCollapse:checked ~ .sidebar .nav-text { display: none; }
    #sidebarCollapse:checked ~ .sidebar .nav-link { justify-content: center; }
    #sidebarCollapse:checked ~ .sidebar .nav-section { display: none; }
    #sidebarCollapse:checked ~ .sidebar .nav-icon { margin-right: 0; }
    #sidebarCollapse:checked ~ .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
    #sidebarCollapse:checked ~ .sidebar .brand-logo { margin: 0 auto; }
    #sidebarCollapse:checked ~ .sidebar .user-block { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* ---------------- Sidebar: brand / nav / user block ---------------- */
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 24px 22px 20px;
    border-bottom: 1px solid #EDE4D3;
}
.sidebar .brand-logo {
    position: relative;
    overflow: hidden;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--rm-accent);
    color: #FBF3EC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Newsreader', serif;
    font-size: 20px;
    font-weight: 600;
}
.sidebar .brand-logo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .15s ease;
}
.sidebar .brand-logo-img.loaded { opacity: 1; }
.sidebar .brand-name { font-family: 'Newsreader', serif; font-size: 18px; color: var(--rm-ink); line-height: 1.1; }
.sidebar .brand-sub { font-size: 12px; color: var(--rm-muted); margin-top: 1px; }

.sidebar .nav-scrollable { padding: 14px 12px; display: none; }
.sidebar .nav.flex-column { gap: 2px; }

.sidebar .nav-section {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rm-faint);
    padding: 16px 12px 7px;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 14.5px;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    color: #6E6455;
    background: none;
    transition: all .13s;
}
.sidebar .nav-link:hover { background: #F3ECE0; color: var(--rm-ink); }
.sidebar .nav-link.active { background: var(--rm-accent-soft); color: var(--rm-accent); border-left-color: var(--rm-accent); }
.sidebar .nav-icon {
    width: 18px;
    height: 18px;
    margin-right: 11px;
    flex-shrink: 0;
    color: #A9997F;
}
.sidebar .nav-link:hover .nav-icon { color: #6E6455; }
.sidebar .nav-link.active .nav-icon { color: var(--rm-accent); }

.sidebar .user-block {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-top: 1px solid #EDE4D3;
}
.sidebar .user-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #F0E0D6;
    color: var(--rm-accent);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar .user-meta { flex: 1; min-width: 0; }
.sidebar .user-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rm-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar .user-name:hover { color: var(--rm-accent); }
.sidebar .user-role { font-size: 12px; color: var(--rm-muted); }
.sidebar .user-logout-form { margin: 0; }
.sidebar .user-logout { border: none; background: none; cursor: pointer; font-size: 12.5px; color: var(--rm-muted); padding: 0; }
.sidebar .user-logout:hover { color: var(--rm-accent); }
.sidebar .user-login { font-size: 13.5px; font-weight: 600; }

.sidebar .lang-switch {
    display: flex;
    gap: 6px;
    padding: 0 18px 16px;
}
.sidebar .lang-switch a {
    font-size: 12px;
    font-weight: 700;
    color: var(--rm-muted);
    text-decoration: none;
    padding: 2px 9px;
    border-radius: 7px;
    border: 1px solid var(--rm-border);
}
.sidebar .lang-switch a:hover { color: var(--rm-ink); }
.sidebar .lang-switch a.active {
    color: #FBF3EC;
    background: var(--rm-accent);
    border-color: var(--rm-accent);
}

.sidebar .navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3rem;
    height: 2.25rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: 1px solid var(--rm-border);
    border-radius: 8px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238A8073' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem;
}
.sidebar .navbar-toggler:checked ~ .nav-scrollable { display: block; }

@media (min-width: 641px) {
    .sidebar .navbar-toggler { display: none; }
    .sidebar .nav-scrollable { display: block; flex: 1; overflow-y: auto; }
}

.logo-preview {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--rm-accent);
    color: #FBF3EC;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-family: 'Newsreader', serif;
    font-size: 26px;
    font-weight: 600;
}
.logo-preview img { width: 100%; height: 100%; object-fit: cover; }

.logo-cell {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--rm-accent);
    color: #FBF3EC;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Newsreader', serif;
    font-size: 17px;
    font-weight: 600;
}
.logo-cell img { width: 100%; height: 100%; object-fit: cover; }
.store-logo-input { font-size: 11px; max-width: 190px; margin-top: 4px; }

/* ── Show/hide password toggle ─────────────────────────────── */
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 2.75rem; }
.pw-reveal {
    position: absolute;
    top: 0;
    right: 0.5rem;
    height: 100%;
    width: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rm-muted);
    cursor: pointer;
    z-index: 5;
}
.pw-reveal:hover { color: var(--rm-accent); }
.pw-reveal:focus-visible {
    outline: 2px solid var(--rm-accent);
    outline-offset: 2px;
    border-radius: 6px;
}
.pw-reveal[aria-pressed="false"] .pw-eye-off { display: none; }
.pw-reveal[aria-pressed="true"]  .pw-eye     { display: none; }