/* ==========================================================================
   PubManager — "The Curated Hearth" Global Styles
   ========================================================================== */

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

html, body {
    position: relative;
    overflow-x: hidden;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--hearth-primary-container);
    text-decoration: none;
    transition: color var(--hearth-transition);
}

a:hover, .btn-link:hover {
    color: var(--hearth-primary);
}

/* ---------- No-Line Rule — Strip MudBlazor default borders ---------- */

.mud-appbar {
    border-bottom: none !important;
    box-shadow: var(--hearth-shadow-ambient) !important;
}

.mud-drawer {
    border-right: none !important;
}


/* ---------- Tonal Surface Utilities ---------- */

.surface-lowest {
    background: var(--hearth-surface-container-lowest);
}

.surface-low {
    background: var(--hearth-surface-container-low);
}

.surface-base {
    background: var(--hearth-surface-container);
}

.surface-high {
    background: var(--hearth-surface-container-high);
}

.surface-highest {
    background: var(--hearth-surface-container-highest);
}

/* ---------- Gradient CTA Button ---------- */

/* grid.html: solid bg-primary, shadow-sm, hover:bg-opacity-90 */
.btn-gradient-primary {
    background: var(--hearth-primary) !important;
    color: var(--hearth-on-primary) !important;
    border-radius: var(--hearth-radius-lg) !important;
    border: none !important;
    box-shadow: var(--hearth-shadow-sm);
    transition: all var(--hearth-transition);
}

.btn-gradient-primary:hover {
    box-shadow: var(--hearth-shadow-ambient);
    opacity: 0.9;
}

/* ---------- Glassmorphism Shift Cards ---------- */

.glass-morning {
    background: var(--hearth-glass-morning);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-afternoon {
    background: var(--hearth-glass-afternoon);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-evening {
    background: var(--hearth-glass-evening);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ---------- Shift Cell Fill — card fills entire cell (matching prototype) ---------- */

.shift-cell-fill {
    border-radius: var(--hearth-radius-lg);
    padding: 12px 14px;
    color: white;
    transition: all var(--hearth-transition);
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    flex: 1;
    min-height: 60px;
    cursor: pointer;
}

.shift-cell-fill:hover {
    filter: brightness(1.1);
    box-shadow: var(--hearth-shadow-ambient);
}

/* Shift cards (grid.html: solid bg-shift-* colors, rounded-xl, p-3) */
.shift-cell-fill.shift-card-morning {
    background: var(--hearth-shift-morning);
}

.shift-cell-fill.shift-card-afternoon {
    background: var(--hearth-shift-afternoon);
}

.shift-cell-fill.shift-card-evening {
    background: var(--hearth-shift-evening);
}

/* Off state (grid.html: striped-bg border border-shift-off-border text-shift-off-text) */
.shift-cell-fill.shift-card-off {
    background: transparent;
    color: var(--hearth-shift-off-text);
    border: 1px solid var(--hearth-shift-off-border);
}

.shift-cell-fill .shift-label {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.80;
}

.shift-cell-fill .shift-time {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

/* grid.html: text-xs font-bold uppercase tracking-widest text-shift-off-text */
.shift-off-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hearth-shift-off-text);
    margin-top: 2px;
}

/* Legacy .shift-card kept for backwards compat */
.shift-card {
    border-radius: var(--hearth-radius-lg);
    padding: 8px 12px;
    color: white;
    transition: all var(--hearth-transition);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 56px;
    cursor: pointer;
}

.shift-card-off {
    background: transparent;
    color: var(--hearth-on-surface-variant);
}

/* ---------- Diagonal Hatch (Time-Off / PTO) ---------- */

/* grid.html: .striped-bg with #f5ece5 stripes at -45deg */
.diagonal-hatch {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        #f5ece5 10px,
        #f5ece5 20px
    );
}

/* ---------- MudBlazor Component Overrides ---------- */

/* Cards */
.mud-card {
    box-shadow: var(--hearth-shadow-ambient) !important;
}

/* Chips */
.mud-chip {
    border-radius: var(--hearth-radius-md) !important;
}

/* Dialogs */
.mud-dialog .mud-dialog-content {
    background: var(--hearth-surface-container-lowest);
}

.mud-dialog {
    box-shadow: var(--hearth-shadow-elevated) !important;
}

/* Menus & Popovers — floating overlays use hearth-tinted shadow */
.mud-popover.mud-popover-open {
    box-shadow: var(--hearth-shadow-elevated) !important;
}

/* Snackbars — toast notifications */
.mud-snackbar {
    box-shadow: var(--hearth-shadow-elevated) !important;
}

/* Tooltips — lightweight float */
.mud-tooltip {
    box-shadow: var(--hearth-shadow-ambient) !important;
}

/* Nav links */
.mud-nav-link {
    transition: all var(--hearth-transition) !important;
}

/* Buttons — filled primary gets custom shadow + transition */
.mud-button-filled.mud-button-filled-primary {
    box-shadow: var(--hearth-shadow-sm) !important;
    transition: all var(--hearth-transition) !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    box-shadow: var(--hearth-shadow-elevated) !important;
    filter: brightness(1.1);
}

/* Secondary/outline buttons — subtle lift on hover */
.mud-button-outlined:hover {
    box-shadow: var(--hearth-shadow-ambient);
    transition: all var(--hearth-transition);
}

/* Icon buttons — ambient on hover */
.mud-icon-button:hover {
    box-shadow: var(--hearth-shadow-ambient);
    transition: all var(--hearth-transition);
}

/* Input fields */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(193, 200, 194, 0.15) !important;
    border-radius: var(--hearth-radius-md) !important;
}

.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--hearth-outline) !important;
}

.mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--hearth-surface-tint) !important;
    box-shadow: 0 0 0 2px rgba(62, 102, 83, 0.15) !important;
}

/* Select / dropdown */
.mud-select .mud-input-outlined-border {
    border-color: rgba(193, 200, 194, 0.15) !important;
}

/* ---------- Validation & Error Styles ---------- */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(62, 102, 83, 0.2);
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 2px solid var(--hearth-primary-container);
    outline-offset: 2px;
}

.invalid {
    outline: 2px solid var(--hearth-error);
    outline-offset: 2px;
}

.validation-message {
    color: var(--hearth-error);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--hearth-error-container);
    border: 1px solid rgba(186, 26, 26, 0.3);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--hearth-on-error-container);
    border-radius: var(--hearth-radius-lg);
}

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

h1:focus {
    outline: none;
}

.content {
    padding-top: 2rem;
}

/* ---------- Error UI ---------- */

#blazor-error-ui {
    background: var(--hearth-error-container);
    border: 1px solid rgba(186, 26, 26, 0.3);
    border-left: 4px solid var(--hearth-error);
    color: var(--hearth-on-error-container);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(186, 26, 26, 0.1);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 1rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    border-radius: var(--hearth-radius-lg) var(--hearth-radius-lg) 0 0;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.5rem;
    opacity: 0.7;
    transition: all var(--hearth-transition);
    color: var(--hearth-on-error-container);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hearth-radius-md);
    background: rgba(186, 26, 26, 0.1);
}

#blazor-error-ui .dismiss:hover {
    opacity: 1;
    background: rgba(186, 26, 26, 0.2);
}

/* ---------- Subtle page entrance ---------- */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-content > * {
    animation: fadeIn 0.3s ease-out;
    animation-fill-mode: both;
}

.page-content > *:nth-child(1) { animation-delay: 0.05s; }
.page-content > *:nth-child(2) { animation-delay: 0.1s; }
.page-content > *:nth-child(3) { animation-delay: 0.15s; }

/* ---------- Form helpers ---------- */

.darker-border-checkbox.form-check-input {
    border-color: var(--hearth-outline-variant);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--hearth-outline);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}


/* ==========================================================================
   Mobile Rota — Card View (matching ui/grid.mobile.html prototype)
   ========================================================================== */

/* ---------- Day Selector ---------- */

.rota-day-selector {
    padding: 24px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.day-pills-scroll {
    display: flex;
    gap: 12px;
    min-width: max-content;
}

.day-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 80px;
    border-radius: var(--hearth-radius-lg);
    background: var(--hearth-surface-container-low);
    color: rgba(29, 28, 24, 0.60);
    border: none;
    cursor: pointer;
    transition: background var(--hearth-transition), color var(--hearth-transition);
}

.day-pill:hover:not(.day-pill--selected) {
    background: var(--hearth-surface-container-high);
}

.day-pill--selected {
    background: var(--hearth-primary-container);
    color: var(--hearth-surface-bright);
    box-shadow: 0 4px 12px rgba(1, 45, 29, 0.25);
}

.day-pill__name {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.day-pill__number {
    font-size: 18px;
    font-weight: 700;
}

.day-pill__dot {
    width: 4px;
    height: 4px;
    background: var(--hearth-surface-bright);
    border-radius: 50%;
    margin-top: 4px;
}

/* ---------- Mobile Summary Header ---------- */

.rota-mobile__summary {
    padding: 0 24px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.rota-mobile__date {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--hearth-on-surface);
    margin: 0;
    line-height: 1.2;
}

.rota-mobile__date sup {
    font-size: 0.5em;
}

.rota-mobile__stats {
    font-size: 14px;
    color: rgba(65, 72, 68, 0.70);
    margin: 0;
    margin-top: 2px;
    white-space: nowrap;
}

.rota-mobile__assign-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--hearth-primary);
    color: var(--hearth-on-primary);
    border-radius: var(--hearth-radius-lg);
    border: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(1, 45, 29, 0.15);
    cursor: pointer;
    transition: transform var(--hearth-transition);
    white-space: nowrap;
}

.rota-mobile__assign-btn:active {
    transform: scale(0.95);
}

/* ---------- Mobile Rota Container ---------- */

.rota-mobile {
    margin: 0 -24px;
}

/* ---------- Staff Cards Container ---------- */

.rota-mobile__cards {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 128px;
}

/* ---------- Staff Card ---------- */

.staff-card {
    background: var(--hearth-surface-container-lowest);
    border-radius: var(--hearth-radius-lg);
    padding: 20px;
    box-shadow: 0 4px 20px rgba(29, 28, 24, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.staff-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.staff-card__identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.staff-card__identity--off {
    opacity: 0.50;
}

/* Override avatar size in mobile cards — prototype uses 48px */
.staff-card .employee-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
}

.staff-card--off .staff-card .employee-avatar {
    filter: grayscale(1);
}

.staff-card__name {
    font-weight: 700;
    color: var(--hearth-on-surface);
    margin: 0;
    font-size: 16px;
}

.staff-card__toggle-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Toggle switch */
.staff-card__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.staff-card__toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.staff-card__toggle-track {
    width: 44px;
    height: 24px;
    background: var(--hearth-surface-variant);
    border-radius: 12px;
    position: relative;
    transition: background var(--hearth-transition);
}

.staff-card__toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    transition: transform var(--hearth-transition);
}

.staff-card__toggle input:checked + .staff-card__toggle-track::after {
    transform: translateX(20px);
    border-color: white;
}

.staff-card__toggle input:checked + .staff-card__toggle-track--morning {
    background: var(--hearth-primary-container);
}

.staff-card__toggle input:checked + .staff-card__toggle-track--afternoon {
    background: var(--hearth-secondary-container);
}

.staff-card__toggle input:checked + .staff-card__toggle-track--evening {
    background: var(--hearth-tertiary-container);
}

.staff-card__duty-label {
    font-size: 9px;
    font-weight: 700;
    margin-top: 4px;
    color: rgba(65, 72, 68, 0.40);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---------- Shift Bar (Glassmorphic) ---------- */

.staff-card__shift-bar {
    border-radius: var(--hearth-radius-md);
    padding: 12px;
    color: var(--hearth-surface-bright);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.staff-card__shift-bar--morning {
    background: rgba(1, 45, 29, 0.90);
}

.staff-card__shift-bar--afternoon {
    background: rgba(252, 107, 58, 0.90);
}

.staff-card__shift-bar--evening {
    background: rgba(26, 39, 55, 0.90);
}

.staff-card__shift-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shift-icon--morning {
    color: var(--hearth-primary-fixed);
}

.shift-icon--afternoon {
    color: var(--hearth-secondary-fixed);
}

.shift-icon--evening {
    color: var(--hearth-tertiary-fixed);
}

.staff-card__shift-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.staff-card__shift-time {
    font-size: 10px;
    opacity: 0.80;
    margin: 0;
    margin-top: 2px;
}

.staff-card__shift-hours {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
}

/* ---------- Time Off State ---------- */

.staff-card__time-off {
    border: 1px solid rgba(193, 200, 194, 0.20);
    border-radius: var(--hearth-radius-md);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(65, 72, 68, 0.50);
}

.staff-card__time-off-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
}


/* ==========================================================================
   Rota Grid Overrides (global, no scoped CSS rebuild needed)
   ========================================================================== */

/* Day column headers — rounded pill style matching prototype */
.rota-table .mud-table-root th.day-header {
    background: var(--hearth-surface-container-low) !important;
    border-radius: var(--hearth-radius-lg) !important;
    padding: 16px 12px !important;
}

.rota-table .mud-table-root th.day-header.today-header {
    background: var(--hearth-surface-container-lowest) !important;
    color: var(--hearth-on-surface) !important;
    border: 2px solid var(--hearth-primary) !important;
    box-shadow: 0 2px 8px rgba(1, 45, 29, 0.08) !important;
}

/* Today column — header only, no cell background */

/* Employee column — Level 2 card on Level 1 grid */
.rota-table .mud-table-root .employee-header,
.rota-table .mud-table-root td.employee-cell,
.rota-table .mud-table-root td.employee-cell .employee-info {
    background: var(--hearth-surface-container-lowest) !important;
}

/* Table headers — surface-container-low (Level 1, same as grid bg) */
.rota-table .mud-table-root thead th {
    background: var(--hearth-surface-container-low) !important;
    border-bottom: none !important;
}

/* Grid container — subtle */
.rota-grid {
    background: var(--hearth-surface-container-lowest) !important;
    border: none !important;
    border-radius: var(--hearth-radius-xl) !important;
    box-shadow: var(--hearth-shadow-ambient) !important;
}

/* Empty cell actions — always visible, stronger on hover */
.empty-cell-actions {
    opacity: 1;
    transition: opacity var(--hearth-transition);
}

.day-cell.empty-cell:hover .empty-cell-actions {
    opacity: 1;
}

/* Empty cell — cleaner dashed border */
.day-cell.empty-cell {
    border: 2px dashed rgba(193, 200, 194, 0.15) !important;
    background: transparent !important;
}

.day-cell.empty-cell:hover {
    border-color: var(--hearth-primary-container) !important;
    background: rgba(62, 102, 83, 0.04) !important;
}

/* Table row borders — ghost style */
.rota-table .mud-table-root td {
    border-bottom: none !important;
}

/* ==========================================================================
   Grid Cells — Distinct Rounded Cards with Gaps (matching prototype)
   ========================================================================== */

/* ==========================================================================
   Grid Cells — Tonal Layering (per DESIGN.md Section 4)
   Level 0 = surface (#FEF9F2) — page bg
   Level 1 = surface-container-low (#F8F3EC) — grid bg / sections
   Level 2 = surface-container-lowest (#FFFFFF) — active cards that pop
   ========================================================================== */

/* Spacing between cells — generous gaps for tiled layout */
.rota-table .mud-table-root {
    border-spacing: 16px 16px !important;
    border-collapse: separate !important;
}

/* Each td — transparent, no border */
.rota-table .mud-table-root td:not(.employee-cell) {
    border-radius: var(--hearth-radius-lg) !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* The day-cell — Level 2 card (surface-container-lowest) popping on Level 1 grid */
.day-cell {
    border-radius: var(--hearth-radius-lg) !important;
    min-height: 60px !important;
    padding: 0 !important;
    transition: all var(--hearth-transition) !important;
}

.day-cell:hover {
    box-shadow: var(--hearth-shadow-ambient) !important;
}

/* Make drop zone fill the cell */
.day-cell .mud-drop-zone {
    min-height: 60px !important;
}

/* Shift card fills entire cell — no wrapper padding */
.day-cell .mud-drop-item {
    width: 100% !important;
    height: 100% !important;
}

/* Empty cells — visible dashed border matching prototype */
.day-cell.empty-cell {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 2px dashed rgba(227, 223, 211, 0.6) !important;
    opacity: 1;
}

.day-cell.empty-cell:hover {
    border-color: var(--hearth-primary-container) !important;
    background: rgba(62, 102, 83, 0.04) !important;
}

/* Employee cell — Level 2 card with ambient shadow, wider */
.rota-table .mud-table-root td.employee-cell {
    border: 1px solid var(--hearth-border-light) !important;
    border-radius: var(--hearth-radius-2xl) !important;
    border: none !important;
    padding: 0 !important;
}

/* Table header cells */
.rota-table .mud-table-root th {
    border: none !important;
}

.rota-table .mud-table-root th.employee-header {
    border-radius: var(--hearth-radius-xl) !important;
}

/* Grid container — subtle surface for tonal contrast */
.rota-grid {
    background: var(--hearth-surface-container-low) !important;
    padding: 8px !important;
    border-radius: var(--hearth-radius-2xl) !important;
}

/* Today column — no cell tinting, only header is highlighted */