/* CrewPlanner - CARJOY Dark Style */

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

:root {
    /* Dark theme - improved contrast */
    --bg-base: #0d0d12;
    --bg-sidebar: #111118;
    --bg-surface: #15151e;
    --bg-card: #1a1a25;
    --bg-card-hover: #22222f;
    --bg-elevated: #2a2a3a;
    
    --border-color: #363650;
    --border-subtle: #2a2a3e;
    
    --text-primary: #f0f0f5;
    --text-secondary: #b8b8cc;
    --text-muted: #8e8ea8;
    
    --accent: #e8634e;
    --accent-hover: #d95540;
    --accent-muted: rgba(232, 99, 78, 0.14);
    /* Auditointi 22.9. FU-9c: korostusväri tekstinä (vaalea teema tummentaa, ks. alla) */
    --accent-text: var(--accent);
    
    --success: #34d399;
    --success-muted: rgba(52, 211, 153, 0.14);
    --warning: #f5c842;
    --warning-muted: rgba(245, 200, 66, 0.14);
    --error: #f87171;
    --error-muted: rgba(248, 113, 113, 0.14);
    --info: #60a5fa;
    --info-muted: rgba(96, 165, 250, 0.14);
    
    /* Diagonal stripes pattern */
    --stripe-pattern: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.015) 8px,
        rgba(255, 255, 255, 0.015) 9px
    );
    
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 60px;
}

/* Font size variations */
html.font-small { font-size: 14px; }
html.font-default { font-size: 16px; }
html.font-large { font-size: 18px; }

[data-theme="light"] {
    --bg-base: #f0f0f3;
    --bg-sidebar: #ffffff;
    --bg-surface: #ffffff;
    --bg-card: #f5f5f8;
    --bg-card-hover: #ededf0;
    --bg-elevated: #e4e4e8;
    --border-color: #d0d0d8;
    --border-subtle: #e0e0e8;
    --text-primary: #1a1a1f;
    --text-secondary: #555560;
    /* Auditointi 22.9. FU-9c: tekstitokenit ≥ 4.5:1 korttipintaa (#f5f5f8) vasten. Aiemmin
       --warning 2.7:1, --success 3.0:1, --accent 3.1:1, --info 3.7:1 ja --text-muted 4.0:1
       10–13 px:n teksteissä. Sävyt tummennettu samasta väristä; läpikuultavat *-muted-pohjat
       ennallaan. Korostusvärin taustat ja reunat (painikkeet) säilyvät brändivärissä. */
    --text-muted: #6c6c7c;
    --accent-text: #b54d3d;
    
    --success: #117f51;
    --success-muted: rgba(22, 163, 104, 0.1);
    --warning: #936606;
    --warning-muted: rgba(198, 138, 8, 0.1);
    --error: #cf3241;
    --error-muted: rgba(220, 53, 69, 0.1);
    --info: #266ecd;
    --info-muted: rgba(43, 125, 233, 0.1);
    
    --stripe-pattern: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.02) 8px,
        rgba(0, 0, 0, 0.02) 9px
    );
}

[data-theme="midnight"] {
    --bg-base: #101010;
    --bg-sidebar: #141414;
    --bg-surface: #181818;
    --bg-card: #1c1c1c;
    --bg-card-hover: #242424;
    --bg-elevated: #2c2c2c;

    --border-color: #444444;
    --border-subtle: #363636;

    --text-primary: #ececec;
    --text-secondary: #b0b0b0;
    /* Auditointi 22.9. FU-9c: ≥ 4.5:1 korttipintaa (#1c1c1c) vasten — aiemmin #808080 4.3:1
       ja harmaa korostusväri tekstinä 3.9:1. Painikkeiden tausta (--accent) ennallaan. */
    --text-muted: #858585;

    --accent: #787878;
    --accent-hover: #8a8a8a;
    --accent-muted: rgba(160, 160, 160, 0.12);
    --accent-text: #8a8a8a;

    --success: #2ec98a;
    --success-muted: rgba(46, 201, 138, 0.1);
    --warning: #d4a832;
    --warning-muted: rgba(212, 168, 50, 0.1);
    --error: #e85555;
    --error-muted: rgba(232, 85, 85, 0.1);
    --info: #5090d0;
    --info-muted: rgba(80, 144, 208, 0.1);

    --stripe-pattern: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 8px,
        rgba(255, 255, 255, 0.012) 8px,
        rgba(255, 255, 255, 0.012) 9px
    );
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: clip; scroll-padding-top: calc(72px + var(--sim-banner-h, 0px)); }

/* Custom scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

body {
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: var(--bg-base);
    min-height: 100vh;
    overflow-x: clip;
}

/* === LAYOUT === */
.app-container { display: flex; min-height: 100vh; }

/* === SIDEBAR === */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    /* Auditointi 22.9. FU-9d: simulaatiobannerin alle (0 ilman banneria) */
    top: var(--sim-banner-h, 0px);
    bottom: 0;
    z-index: 100;
    transition: width 0.2s ease;
}

/* Collapsed sidebar */
.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    overflow: visible;
}

.sidebar.collapsed .sidebar-title,
.sidebar.collapsed .nav-item-text,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .user-details,
.sidebar.collapsed .version-info {
    display: none;
}

.sidebar.collapsed .sidebar-logo {
    justify-content: center;
}

.sidebar.collapsed .sidebar-nav {
    overflow: visible;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 10px;
    position: relative;
}

/* Tooltip for collapsed sidebar */
.sidebar.collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    margin-left: 8px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sidebar.collapsed .nav-item:hover::after {
    opacity: 1;
    visibility: visible;
}

.sidebar.collapsed .nav-item-icon {
    margin-right: 0;
}

.sidebar.collapsed .user-info {
    justify-content: center;
    padding: 8px 0;
}

.sidebar.collapsed .user-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.sidebar.collapsed .sidebar-footer {
    padding: 12px 8px;
}

.sidebar.collapsed .sidebar-actions {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.sidebar.collapsed .sidebar-action-btn {
    margin: 0;
}

.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}

/* Collapse button */
.sidebar-collapse-btn {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    transition: all 0.2s;
}

.sidebar-collapse-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.sidebar-collapse-btn svg {
    transition: transform 0.2s;
}

/* Main content adjusts when sidebar collapses */
.app-container.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

.sidebar-header {
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar-logo-icon img {
    width: 100%;
    height: 100%;
}

.sidebar-logo h1 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.sidebar-nav {
    flex: 1;
    padding: 0 0 0 8px;
    overflow-y: auto;
}

.nav-section {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 20px 12px 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none; /* FU-10a: linkkinä (href) ilman alleviivausta */
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 2px;
    position: relative;
}

.nav-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--accent-muted);
    color: var(--text-primary);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
}

.nav-item-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.8;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
}

.nav-item.active .nav-item-icon {
    opacity: 1;
}

/* Action button icons */
.action-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.75;
    image-rendering: -webkit-optimize-contrast;
}

.sidebar-action-btn:hover .action-icon {
    opacity: 1;
}

/* Light theme icons */
[data-theme="light"] .nav-item-icon,
[data-theme="light"] .action-icon,
[data-theme="light"] .icon-inline {
    filter: brightness(0);
}

/* Inline icons for text, headings, buttons */
.icon-inline {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    vertical-align: -2px;
    opacity: 0.85;
    flex-shrink: 0;
}
.icon-inline.icon-sm {
    width: 13px;
    height: 13px;
    vertical-align: -1px;
}
.icon-inline.icon-lg {
    width: 20px;
    height: 20px;
    vertical-align: -3px;
}
.icon-inline.icon-warning { filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(10deg); }
.icon-inline.icon-error { filter: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(340deg); }
.icon-inline.icon-success { filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(90deg); }
.icon-inline.icon-info { filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(190deg); }
[data-theme="light"] .icon-inline.icon-warning { filter: brightness(0) sepia(1) saturate(5) hue-rotate(10deg); }
[data-theme="light"] .icon-inline.icon-error { filter: brightness(0) sepia(1) saturate(10) hue-rotate(340deg); }
[data-theme="light"] .icon-inline.icon-success { filter: brightness(0) sepia(1) saturate(5) hue-rotate(90deg); }
[data-theme="light"] .icon-inline.icon-info { filter: brightness(0) sepia(1) saturate(5) hue-rotate(190deg); }

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}
.user-info:hover { background: var(--bg-card); }

.user-avatar {
    width: 36px;
    height: 36px;
    background: var(--bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-details { flex: 0 1 auto; min-width: 0; }
.user-name { font-size: 0.8125rem; font-weight: 500; color: var(--text-primary); }
.user-role { font-size: 0.6875rem; color: var(--text-muted); }

.version-info { 
    font-size: 0.6875rem; 
    color: var(--text-muted); 
    margin-top: 12px;
    text-align: center;
    transition: color 0.15s;
}

.version-info:hover {
    color: var(--accent-text);
}

.sidebar-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}

.sidebar-action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.sidebar-action-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.sidebar-action-btn svg {
    flex-shrink: 0;
}

/* === MAIN CONTENT === */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-base);
    overflow-x: clip;
    /* Auditointi 22.9. FU-3: flex-alkio kasvoi sisällön min-content-leveyteen (max-width:
       100vw ei huomioinut sivupalkin marginaalia), ja clip leikkasi ylimenevän osan
       näkymättömiin 769–1360 px:llä (teemanappi, työntekijäpaneeli, Toiminnot-sarake).
       Nyt pääsisältö on aina näkymän levyinen; leveä sisältö vierii omassa säiliössään. */
    min-width: 0;
}

.header {
    height: 64px;
    padding: 0 24px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: var(--sim-banner-h, 0px);
    z-index: 50;
}

/* Auditointi 22.9. FU-9d / FU-13: käyttäjäsimulaation banneri. Peittävä tausta kaikissa
   teemoissa (valkoinen teksti ≥ 5:1), modaalien ja valikon alla mutta yläpalkin päällä.
   Yläpalkki ja sivupalkki siirtyvät sen alle (--sim-banner-h, naytaSimulaatioBanneri). */
#simulationBanner {
    position: sticky;
    top: 0;
    z-index: 150;
    background: #b54d3d;
    color: #fff;
    border-bottom: 2px solid #e8634e;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#simulationBanner .sim-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: space-between;
}
#simulationBanner .sim-banner-exit {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
#simulationBanner .sim-banner-exit:hover { background: rgba(255, 255, 255, 0.28); }

.header-left { display: flex; align-items: center; gap: 24px; }

/* Auditointi 22.9. FK-3: julkaisun ajastinpalkki otsakkeen alla kaikissa näkymissä */
.publish-timer-bar {
    position: sticky;
    top: 64px;
    z-index: 49;
    padding: 0 24px;
    background: var(--bg-base);
}

.header-day-today {
    display: none;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--accent);
    background: var(--accent-muted);
    color: var(--accent-text);
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
}

.header-day-today.is-visible {
    display: none;
}

.header-day-today:hover {
    background: var(--accent);
    color: white;
}

[data-theme="midnight"] .header-day-today {
    border-color: var(--error);
}

.header-sunday-toggle,
.header-all-weeks-toggle {
    display: none;
    align-items: center;
    height: 32px;
    padding: 0 8px;
    gap: 0.35rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: var(--radius-md);
}

.header-sunday-toggle.is-visible,
.header-all-weeks-toggle.is-visible {
    display: none;
}

.header-sunday-toggle .toggle-track,
.header-all-weeks-toggle .toggle-track {
    width: 36px;
    height: 20px;
}

.header-sunday-toggle .toggle-track::after,
.header-all-weeks-toggle .toggle-track::after {
    width: 14px;
    height: 14px;
}

.header-sunday-toggle input:checked + .toggle-track::after,
.header-all-weeks-toggle input:checked + .toggle-track::after {
    transform: translateX(16px);
}

.header-sunday-toggle .toggle-text,
.header-all-weeks-toggle .toggle-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.header-title { 
    font-size: 0.75rem; 
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.header-right { display: flex; align-items: center; gap: 12px; }

/* Font size controls */
.font-size-controls {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.font-size-btn {
    padding: 0.375rem 0.625rem;
    background: var(--bg-card);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
}

.font-size-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.font-size-btn:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

/* Toggle Switch - Login style */
.toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.toggle-switch.header-sunday-toggle,
.toggle-switch.header-sunday-toggle.is-visible,
.toggle-switch.header-all-weeks-toggle,
.toggle-switch.header-all-weeks-toggle.is-visible {
    display: none;
}

/* Auditointi 22.9. FU-10a: valintaruutu piilotetaan vain näkyvistä (ei display: none), jotta
   kytkin on näppäimistöllä kohdistettavissa (Tab + välilyönti) ja ruudunlukija kertoo sen
   tilan. Koskee kaikkia kytkimiä: Su/Kaikki viikot, kuukauden lukitus, velhon "Säilytä
   olemassa olevat", asetukset. Näkyvä kohdistus raidassa. */
.toggle-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}
.toggle-switch input:focus-visible + .toggle-track,
.store-prio-toggle input:focus-visible + .store-prio-toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.toggle-track {
    width: 44px;
    height: 24px;
    background: var(--bg-elevated);
    border-radius: 12px;
    position: relative;
    transition: background 0.2s;
    border: 1px solid var(--border-color);
}

.toggle-switch input:checked + .toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}

.toggle-track::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle-switch input:checked + .toggle-track::after {
    transform: translateX(20px);
}

.toggle-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.toggle-switch input:checked ~ .toggle-text {
    color: var(--text-primary);
}

/* Theme toggle - single button style like login page */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Auditointi 22.9. FU-10a: näkyvä näppäimistökohdistus painikkeen roolissa oleville
   elementeille ja navigaatiolinkeille (hiiriklikkaus ei näytä rengasta: :focus-visible) */
[role="button"]:focus-visible,
.nav-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Dialogi itse saa kohdistuksen avautuessa (showModal) — ei rengasta koko dialogin ympärille */
.modal:focus { outline: none; }

.theme-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
    border-color: var(--text-muted);
}

.content {
    flex: 1;
    padding: 24px;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

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

.btn-primary {
    background: var(--accent);
    color: white;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-card-hover); }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-card); color: var(--text-primary); }

.btn-today {
    background: var(--accent-muted);
    color: var(--accent-text);
    border: 1px solid var(--accent);
    font-weight: 600;
}
.btn-today:hover:not(:disabled) { background: var(--accent); color: white; }
.btn-today:disabled { background: var(--bg-card); color: var(--text-muted); border-color: var(--border-color); opacity: 0.6; cursor: default; }

.btn-danger {
    background: var(--error-muted);
    color: var(--error);
}
.btn-danger:hover:not(:disabled) { background: var(--error); color: white; }

.btn-warning {
    background: var(--warning-muted);
    color: var(--warning);
    border: 1px solid var(--warning);
}
.btn-warning:hover:not(:disabled) { background: var(--warning); color: white; }

.btn-sm { height: 32px; padding: 0 12px; font-size: 0.75rem; }
.btn-lg { height: 44px; padding: 0 24px; font-size: 0.875rem; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 32px; height: 32px; }

/* Button image icons */
.btn .btn-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.btn-primary .btn-icon {
    filter: brightness(0) invert(1);
}

.btn-secondary .btn-icon {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

[data-theme="light"] .btn-secondary .btn-icon {
    filter: brightness(0);
}

/* === FORMS === */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: all 0.15s;
}

.form-control:hover { border-color: var(--text-muted); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.form-control::placeholder { color: var(--text-muted); }

select.form-control {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237e7e95' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
}

/* === CARDS === */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title { font-size: 0.9375rem; font-weight: 600; }
.card-subtitle { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }
.card-body { padding: 20px; }

/* === DESKTOP/MOBILE LAYOUT TOGGLE === */
.mobile-cards { display: none; }
/* Auditointi 22.9. FU-3: leveät taulukot vierivät kortin sisällä (kortti on overflow:
   hidden, joten esim. Työntekijät-taulukon Toiminnot-sarake leikkautui 769–1180 px:llä) */
.desktop-only,
#weekHoursTable,
#hoursTable { overflow-x: auto; }

/* Auditointi 22.9. FU-3: viikkonäkymän ruudukko ja lomarivi vierivät yhdessä omassa
   säiliössään, kun tila ei riitä (769–1000 px työntekijäpaneelin vieressä). Sisäkääre on
   vähintään ruudukon min-content-levyinen, jotta lomarivin päivät pysyvät sarakkeiden
   kohdalla. Mobiilissa (≤768 px) ruudukon tilalla on haitarinäkymä. */
.week-scroll { min-width: 0; overflow-x: auto; }
@media (min-width: 769px) {
    .week-scroll-inner { min-width: min-content; }
    /* Päiväsarakkeen alaraja = vuorokortin kellonaika (09:00-15:00) kokonaan näkyvissä;
       sama sarakejako ruudukolle ja lomariville, jotta päivät pysyvät kohdakkain */
    .week-scroll-inner .week-grid,
    .week-scroll-inner .vacation-row-wrapper.vacation-gantt {
        grid-template-columns: minmax(140px, 180px) repeat(7, minmax(5.625rem, 1fr));
    }
    .week-scroll-inner .week-grid.hide-sunday,
    .week-scroll-inner .vacation-row-wrapper.vacation-gantt.hide-sunday {
        grid-template-columns: minmax(140px, 180px) repeat(5, minmax(5.625rem, 1fr)) 32px minmax(5.625rem, 1fr);
    }
}

/* === TABLES === */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.table th {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-card);
}
.table td { font-size: 0.8125rem; color: var(--text-primary); }
.table tbody tr:hover { background: var(--bg-card); }

/* Status */
.text-error { color: var(--error) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--error) !important; }
.text-warning { color: var(--warning) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Auditointi 22.9. FU-10: vain ruudunlukijalle tarkoitettu teksti (esim. värillä kerrottu tila) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Auditointi 22.9. FU-9a: käyttäjän valitsema väri tekstinä teeman mukaan luettavana
   (variTekstina asettaa --tv-d/--tv-l; midnight käyttää tumman teeman sävyä) */
.vari-teksti { color: var(--tv-d); }
[data-theme="light"] .vari-teksti { color: var(--tv-l); }

/* Auditointi 22.9. FU-9c: Työntekijät-näkymän "Vain hallinto" -merkki. Vaalean teeman
   --warning tummennettiin tekstiväriksi, jolloin musta teksti sen päällä jäi 4.1:1:een
   (ennen 7.0:1) — vaaleassa teemassa valkoinen teksti (5.1:1), tummissa musta ennallaan. */
.vain-hallinto-merkki {
    display: inline-block;
    background: var(--warning);
    color: #000;
    font-size: 0.625rem;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}
[data-theme="light"] .vain-hallinto-merkki { color: #fff; }

/* === MODAL === */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    padding: 24px;
}
.modal-overlay.show { opacity: 1; visibility: visible; }

.modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    /* Auditointi 22.9. FU-7e: iOS:n dynaaminen työkalupalkki — vh laskee palkin alle */
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.2s;
}
.modal.modal-wide { max-width: 780px; }
.modal-overlay.show .modal { transform: scale(1); }

/* Employee shifts popup - 2 column layout */
.emp-popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}
.emp-popup-grid .table { font-size: 0.75rem; table-layout: fixed; width: 100%; }
.emp-popup-grid .table th { font-size: 0.6875rem; padding: 6px 4px; }
.emp-popup-grid .table td { padding: 5px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-header {
    padding: 20px 24px 16px;
    /* Auditointi 22.9. FU-7e: pitkä otsikko ei mene ✕-napin alle (nappi on absoluuttinen) */
    padding-right: 56px;
}
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}
.modal-close:hover { background: var(--bg-card); color: var(--text-primary); }
.modal-body { padding: 0 24px 24px; overflow-y: auto; flex: 1; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* === TOAST === */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    pointer-events: auto;
    animation: toastIn 0.25s ease;
}
.toast.hiding,
.toast.removing { animation: toastOut 0.2s ease forwards; }

/* Toast type borders */
.toast-success { border-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--error); }
.toast-warning { border-left: 4px solid var(--warning); }
.toast-info { border-left: 4px solid var(--info); }

@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes publishSpin { to { transform: rotate(360deg); } }
@keyframes publishSendPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Shift Trash Zone */
.shift-trash-zone {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    background: var(--error);
    color: white;
    padding: 12px 32px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4);
    transition: all 0.2s ease;
    min-width: 200px;
    justify-content: center;
}
.shift-trash-zone.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-20px);
}
.shift-trash-zone.drag-over {
    background: #dc2626;
    transform: translateX(-50%) scale(1.05);
}
.shift-trash-icon {
    font-size: 1.5rem;
}
.shift-trash-icon .icon-inline {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}
.shift-trash-text {
    font-weight: 600;
    font-size: 0.9375rem;
}

.toast-icon { width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.toast-icon .icon-inline { width: 18px; height: 18px; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--error); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--info); }

.toast-content { flex: 1; }
.toast-title { font-size: 0.9375rem; font-weight: 600; margin-bottom: 4px; }
.toast-message { font-size: 0.8125rem; color: var(--text-secondary); }
.toast-close {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text-muted); cursor: pointer;
    border-radius: var(--radius-sm);
}
.toast-close:hover { background: var(--bg-elevated); }

/* ============================================ */
/* CALENDAR - MONTH VIEW (CARJOY STYLE) */
/* ============================================ */
.calendar-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calendar-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}
/* Auditointi 22.9. FU-3: viikkonäkymän työkalurivi (ei rivity itsestään) siirtyy kapealla
   työpöytäleveydellä otsikon alle — aiemmin nowrap-rivi levitti koko näkymää.
   Kuukausinäkymän ja Omat vuoroni -näkymän työkalut rivittyvät sisäisesti, mutta eivät
   kapeammiksi kuin leveimmän ryhmänsä verran: kuukausinäkymässä Poista vuorot ja julkaisutila
   jäivät kortin reunan yli 769–~820 px:llä (suurella fontilla leveämmälläkin), Omat vuoroni
   -näkymässä ylläpidon työntekijävalinnan kanssa Excel 1180 px:iin asti. Työkalut siirtyvät
   otsikon alle vasta, kun ne eivät muuten mahdu (kanta 0 + min-content); kun ne mahtuvat,
   ne vievät saman tilan kuin ennen (enintään max-content, oikeaan reunaan).
   Mobiilissa (≤768 px) otsakkeilla on oma asettelunsa. */
@media (min-width: 769px) {
    .week-calendar-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    .month-calendar-header,
    .myshifts-calendar-header {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .month-calendar-header > .calendar-header-tools,
    .myshifts-calendar-header > .calendar-header-tools {
        flex: 1 1 0;
        min-width: min-content;
        max-width: max-content;
        margin-left: auto;
    }
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s;
}
.calendar-nav-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.calendar-title {
    font-size: 0.9375rem;
    font-weight: 600;
    width: 260px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.week-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    background: #fff;
    color: #111;
    flex-shrink: 0;
}
[data-theme="light"] .week-num-badge { background: #222; color: #fff; }

.calendar-grid {
    display: grid;
    grid-template-columns: 48px repeat(7, 1fr);
}

/* Calendar grid with hidden Sunday (6 days + spacer) */
.calendar-grid.hide-sunday {
    grid-template-columns: 48px repeat(5, 1fr) 16px 1fr;
}

.calendar-day-header.spacer,
.calendar-day.spacer {
    background: transparent;
    border: none;
    min-width: 16px;
    min-height: auto;
}

.calendar-day-header {
    padding: 12px 8px;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}
.calendar-day-header.sunday { color: var(--text-muted); }
.calendar-grid.hide-sunday .calendar-day-header.saturday {
    border-left: 1px solid var(--border-color);
}

.week-number {
    padding: 12px 8px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s;
}
.week-number:hover { background: var(--bg-card-hover); color: var(--accent-text); }

.calendar-day {
    position: relative;
    min-height: 100px;
    padding: 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: background 0.15s;
}
.calendar-day:hover { background: var(--bg-card); }

.week-number.last-row,
.calendar-day.last-row {
    border-bottom: none;
}

.calendar-grid > :nth-child(8n) {
    border-right: none;
}

.calendar-day.empty,
.calendar-day.sunday {
    background: var(--stripe-pattern), var(--bg-card);
}
.calendar-grid.hide-sunday .calendar-day.saturday {
    border-left: 1px solid var(--border-color);
}

.calendar-day.today {
    background: var(--info-muted);
    box-shadow: inset 0 0 0 2px var(--info);
}

.calendar-day.holiday {
    background: var(--error-muted);
    box-shadow: inset 4px 0 0 var(--error);
}

.calendar-day.today.holiday {
    background: linear-gradient(135deg, var(--info-muted) 0 48%, var(--error-muted) 48% 100%);
    box-shadow: inset 0 0 0 2px var(--info), inset 4px 0 0 var(--error);
}

.calendar-day-number {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.calendar-day.sunday .calendar-day-number { color: var(--text-muted); }
.calendar-day.today .calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--info);
    color: #fff;
}

.holiday-name {
    font-size: 0.75rem;
    line-height: 1.15;
    font-weight: 600;
    color: var(--error);
    margin-bottom: 4px;
    margin-left: 0.35rem;
}

.coverage-indicator {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.coverage-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.coverage-dot.filled { background: var(--success); }
.coverage-dot.partial { background: var(--warning); }
.coverage-dot.missing { background: var(--error); }

/* ============================================ */
/* WEEK VIEW - CARJOY STYLE */
/* ============================================ */

.week-grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px) repeat(7, 1fr);
    background: var(--bg-surface);
}

/* Week grid with hidden Sunday (6 days + spacer) */
.week-grid.hide-sunday {
    grid-template-columns: minmax(140px, 180px) repeat(5, 1fr) 32px 1fr;
}

.week-header-cell.spacer,
.week-cell.spacer {
    background: transparent;
    border: none;
    min-width: 32px;
}

/* Saturday styling when Sunday is hidden */
.week-grid.hide-sunday .week-header-cell.saturday,
.week-grid.hide-sunday .week-cell.saturday {
    border-left: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.week-header-cell.saturday {
    background: rgba(255, 255, 255, 0.02);
}

.week-header-cell {
    padding: 14px 8px;
    text-align: center;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
.week-header-cell.corner { 
    font-weight: 500; 
    font-size: 0.6875rem; 
    color: var(--text-muted); 
    text-transform: uppercase;
}
.week-header-cell.sunday { }
.week-header-cell.today { background: var(--accent-muted); }
.week-header-cell.holiday { background: var(--error-muted); }

.week-header-day {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
}
.week-header-date {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 2px;
}

.week-store-name {
    padding: 10px 12px;
    background: var(--bg-card);
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    min-width: 0;
}
.store-name { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    flex: 1;
}

.week-cell {
    min-height: 64px;
    padding: 6px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    transition: background 0.15s;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-content: stretch;
    overflow: hidden;
}

.week-grid > :nth-child(8n) {
    border-right: none;
}
.week-cell.sunday { background: var(--stripe-pattern), var(--bg-card); }
.week-cell.saturday { background: rgba(255, 255, 255, 0.02); }
.week-cell-shift::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.12);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
[data-theme="light"] .week-cell-shift::after { background: rgba(0, 0, 0, 0.1); }
.week-cell.drop-target .week-cell-shift::after,
.week-cell.drop-target-single .week-cell-shift::after { opacity: 1; }
.week-cell.holiday-locked { background: var(--bg-card); pointer-events: none; }
.week-cell.holiday-locked .week-cell-shift.missing { background: var(--bg-elevated); border-color: transparent; color: var(--text-muted); opacity: 0.5; }
.week-cell.holiday-locked .coverage-timeline { opacity: 0.3; }

.week-header-cell.holiday-locked { background: var(--bg-elevated); position: relative; }
.week-header-cell.holiday-locked .holiday-name { font-size: 0.75rem; color: var(--error); font-weight: 700; }

.holiday-lock-overlay {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 6px; margin: 2px 0; border-radius: var(--radius-md);
    background: var(--bg-elevated); border: 1.5px dashed var(--border-color);
    color: var(--text-muted); font-size: 0.75rem; font-weight: 600;
    cursor: pointer; pointer-events: auto; transition: all 0.15s;
    flex: 0 0 100%;
}
.holiday-lock-overlay:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--text-muted); }

.holiday-lock-btn-sm { 
    display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 1px 6px; 
    border-radius: var(--radius-sm); background: var(--accent-muted); border: 1px solid var(--accent); 
    color: var(--accent-text); font-size: 0.575rem; font-weight: 600; cursor: pointer; pointer-events: auto; 
}
.holiday-lock-btn-sm:hover { opacity: 0.8; }

/* ---- Devin-mode ---- */
.devin-container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.devin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.devin-current-day { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.devin-day-name { font-size: 1.25rem; color: var(--text-secondary); font-weight: 500; }
.devin-day-num { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.devin-day-month { font-size: 1.25rem; color: var(--text-secondary); font-weight: 500; }
.devin-holiday-tag { background: var(--error-muted); color: var(--error); padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }

.devin-days-bar { display: flex; gap: 3px; margin-bottom: 1rem; overflow-x: auto; padding-bottom: 4px; }
.devin-day-dot { flex: 1; min-width: 36px; padding: 5px 2px; border-radius: var(--radius-md); text-align: center; cursor: pointer; transition: all 0.15s; border: 2px solid transparent; background: var(--bg-elevated); }
.devin-day-dot.current { border-color: var(--accent); background: var(--accent-muted); }
.devin-day-dot.complete { background: #16a34a22; border-color: #16a34a; }
.devin-day-dot.partial { background: #eab30822; border-color: #eab308; }
.devin-day-dot.unfilled { background: var(--error-muted); border-color: var(--error); }
.devin-day-dot.future { background: var(--bg-elevated); opacity: 0.5; }
.devin-day-dot.sunday, .devin-day-dot.holiday { opacity: 0.4; }
.devin-day-dot:hover { opacity: 1; transform: translateY(-1px); }
.devin-day-label { font-size: 0.65rem; font-weight: 600; color: var(--text-secondary); }

.devin-store-cards { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.devin-sc { background: var(--bg-card); border-radius: var(--radius-md); border: 2px solid var(--border-color); padding: 8px 12px; min-width: 140px; flex: 1 1 auto; max-width: 220px; transition: all 0.15s; border-left: 4px solid var(--sc-color); }
.devin-sc.current { border-color: var(--sc-color); box-shadow: 0 2px 10px rgba(0,0,0,0.12); transform: scale(1.02); }
.devin-sc.done { opacity: 0.5; }
.devin-sc-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.devin-sc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.devin-sc-name { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.devin-sc-time { font-size: 0.65rem; color: var(--text-muted); margin-left: auto; flex-shrink: 0; }
.devin-sc-emp { font-size: 0.7rem; color: var(--text-secondary); padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.devin-sc-emp-empty { color: var(--text-muted); letter-spacing: 3px; }

.devin-fill-area { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; align-items: start; }
.devin-store-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }
.devin-store-card { text-align: center; padding: 1.25rem; background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-color); }
.devin-store-big { font-size: 1.5rem; font-weight: 800; }
.devin-store-time { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.2rem; }
.devin-store-slot { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }

.devin-emp-list { display: flex; flex-wrap: wrap; gap: 6px; }
.devin-emp-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; transition: all 0.1s; border-radius: var(--radius-md); background: var(--bg-card); border: 2px solid var(--border-subtle); flex: 1 1 calc(50% - 6px); min-width: 220px; }
.devin-emp-item:hover { border-color: var(--text-muted); }
.devin-emp-item.selected { background: var(--accent-muted); border-color: var(--accent); }
.devin-emp-item.unavailable { opacity: 0.5; }
.devin-emp-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.7rem; flex-shrink: 0; }
.devin-emp-info { flex: 1; min-width: 0; }
.devin-emp-name { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.devin-emp-hours-bar { height: 4px; border-radius: 2px; background: var(--bg-elevated); margin-top: 4px; overflow: hidden; }
.devin-emp-hours-fill { height: 100%; border-radius: 2px; transition: width 0.2s; }
.devin-emp-hours-label { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }
.devin-emp-badge { margin-left: auto; font-size: 0.7rem; padding: 2px 6px; border-radius: 999px; background: var(--error-muted); color: var(--error); font-weight: 500; flex-shrink: 0; }

.devin-hint { text-align: center; padding: 0.5rem; color: var(--text-muted); font-size: 0.75rem; margin-top: 0.5rem; }

.devin-mini-cal { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 0.5rem; }
.devin-mini-cal-title { font-weight: 600; font-size: 0.8rem; text-align: center; padding: 0.25rem 0 0.5rem; color: var(--text-primary); font-style: italic; }
.devin-mini-cal .vac-day { font-size: 0.7rem; padding: 4px 1px; }
.devin-mini-cal .vac-hdr { font-size: 0.55rem; padding: 2px 0; }
.devin-cal-current { background: var(--accent) !important; color: #fff !important; font-weight: 700; border-radius: var(--radius-sm); }
.devin-cal-partial { background: #eab30833; }
.devin-cal-out { opacity: 0.25; }

.devin-special-day, .devin-day-complete { text-align: center; padding: 3rem 2rem; }
.devin-special-icon { font-size: 3.5rem; }
.devin-special-title { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin-top: 0.5rem; }
.devin-special-sub { font-size: 1rem; color: var(--text-secondary); margin-top: 0.5rem; }

.devin-half-choice { text-align: center; padding: 1.5rem; }
.devin-half-option { padding: 1.25rem 2rem; border-radius: var(--radius-lg); border: 2px solid var(--border-color); background: var(--bg-card); cursor: pointer; transition: all 0.15s; min-width: 140px; }
.devin-half-option.selected { border-color: var(--accent); background: var(--accent-muted); transform: scale(1.05); }
.devin-half-option:hover { border-color: var(--text-muted); }
.devin-half-time { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

/* Devin start screen */
.devin-start { text-align: center; padding: 3rem 1rem; max-width: 600px; margin: 0 auto; }
.devin-start-icon { font-size: 4rem; margin-bottom: 0.5rem; }
.devin-start-title { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.devin-start-sub { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.5rem; }
.devin-start-cards { display: flex; gap: 1.5rem; justify-content: center; margin-top: 2.5rem; }
.devin-start-card { padding: 2rem 2.5rem; border-radius: var(--radius-lg); border: 2px solid var(--border-color); background: var(--bg-card); cursor: pointer; transition: all 0.2s; min-width: 180px; }
.devin-start-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.devin-start-card-icon { font-size: 3rem; }
.devin-start-card-title { font-size: 1.5rem; font-weight: 700; margin-top: 0.5rem; color: var(--text-primary); }
.devin-start-card-sub { font-size: 0.9rem; color: var(--text-muted); }

/* Week dots */
.devin-emp-week { display: flex; gap: 3px; margin-top: 2px; }
.devin-wd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.devin-wd-off { background: var(--border-color); }
.devin-wd-on { background: #16a34a; }
.devin-wd-today { box-shadow: 0 0 0 2px var(--accent); }
.devin-emp-badges { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; margin-left: auto; flex-shrink: 0; }

/* Toggles */
.devin-toggles { display: flex; align-items: center; gap: 0.75rem; }
.devin-toggle { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; }
.devin-toggle input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

/* Summary */
.devin-summary { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.devin-sum-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.devin-sum-table-wrap { overflow-x: auto; }
.devin-sum-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.devin-sum-table th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border-color); color: var(--text-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.devin-sum-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border-subtle); }
.devin-sum-table tr:hover { background: var(--bg-surface); }
.devin-sum-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.devin-sum-hours { display: flex; flex-direction: column; gap: 3px; }
.devin-sum-bar { width: 80px; height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; }
.devin-sum-bar > div { height: 100%; border-radius: 2px; }
.devin-sum-red { color: #dc2626; font-weight: 700; }
.devin-sum-orange { color: #d97706; font-weight: 600; }
.devin-sum-warn { background: #fee2e2 !important; }
.devin-sum-caution { background: #fef3c7 !important; }
.devin-sum-warnings { background: var(--bg-card); border: 1px solid #fbbf24; border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.devin-sum-warn-title { font-weight: 700; font-size: 0.8rem; margin-bottom: 0.4rem; color: #d97706; }
.devin-sum-warn-item { font-size: 0.8rem; color: var(--text-secondary); padding: 2px 0; }
.devin-sum-unassigned { background: var(--bg-surface); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }

.week-shifts-stacked {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 100%;
    min-width: 0;
}
.week-shifts-stacked > .week-cell-shift {
    flex: 1;
    width: 100%;
    padding: 2px 8px;
    display: flex;
    align-items: center;
}

.week-cell-shift {
    padding: 6px 8px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.week-cell-shift.filled { }
.week-cell-shift.missing {
    background: var(--error-muted);
    border-color: transparent;
    color: var(--error);
    text-align: center;
    font-weight: 500;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.week-cell-shift.missing.slot-hover::after {
    background: rgba(255, 255, 255, 0.25) !important;
    opacity: 1 !important;
}
[data-theme="light"] .week-cell-shift.missing.slot-hover::after {
    background: rgba(0, 0, 0, 0.18) !important;
}

.shift-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.week-shifts-stacked .shift-content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    justify-content: space-between;
}
.shift-employee-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.shift-employee-name.absence-name { color: var(--error); }
.shift-time { font-size: 0.6875rem; color: var(--text-secondary); white-space: nowrap; }
.week-cell-shift.absence + .week-cell-add-btn { border-color: var(--error); color: var(--error); }

/* Absence styling */
.week-cell-shift.absence {
    padding: 3px 8px;
    border: 2px solid transparent !important;
    background:
        linear-gradient(var(--warning-muted), var(--warning-muted)) padding-box,
        linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
        repeating-linear-gradient(
            45deg,
            var(--error) 0px, var(--error) 5px,
            var(--user-color, #888) 5px, var(--user-color, #888) 10px
        ) border-box;
}

/* ============================================ */
/* EMPLOYEE PANEL */
/* ============================================ */
.employee-panel-wrap {
    min-height: 0;
}
.employee-panel {
    width: 220px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    flex-shrink: 0;
    /* Auditointi 22.9. FK-3: julkaisun ajastinpalkin (--publish-bar-h) alle, ei sen taakse */
    max-height: calc(100vh - 80px - var(--publish-bar-h, 0px));
    overflow-y: auto;
    position: sticky;
    top: calc(76px + var(--publish-bar-h, 0px));
}

.employee-panel h4 {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.employee-panel > p {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.employee-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: grab;
    text-align: left;
    font-family: var(--font);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.15s;
}
.emp-btn-name {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.emp-btn-hours {
    position: relative;
    z-index: 1;
    font-size: 0.625rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.employee-btn:hover { background: var(--bg-card-hover); border-color: var(--text-muted); }
.employee-btn:active { cursor: grabbing; }
.employee-btn.selected { 
    background: var(--accent-muted); 
    border-color: var(--accent); 
    box-shadow: 0 0 0 2px var(--accent-muted);
}

/* Add-shift "+" button in week/month cells */
.week-cell-add-btn {
    flex-basis: 100%;
    height: 22px;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}
.week-cell-add-btn.inline {
    flex-basis: auto;
    flex: 0 0 28px;
    min-width: 28px;
    height: auto;
    align-self: stretch;
    font-size: 1.125rem;
    border-style: dashed;
}
.week-cell-add-btn:hover {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent-text);
}

/* Add-shift employee buttons */
.add-shift-emp-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s;
    border-radius: var(--radius-md);
}
.add-shift-emp-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}
.add-shift-emp-btn.selected {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    /* Auditointi 22.9. FU-9g: korostusväri (ei vanhan indigo-teeman jäänne) */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
    transform: scale(1.05);
    font-weight: 600;
}

/* Outside month styling (greyed out) */
.week-header-cell.outside-month,
.week-cell.outside-month {
    opacity: 0.4;
    background: var(--bg-elevated) !important;
}

.week-cell.outside-month .week-cell-shift {
    opacity: 0.5;
}

/* ============================================ */
/* PREFERENCES CALENDAR */
/* ============================================ */
.pref-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.pref-day-header {
    padding: 8px;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pref-day {
    min-height: 64px;
    padding: 10px;
    background: var(--success-muted);
    border: 2px solid var(--success);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.pref-day:hover { opacity: 0.85; }

.pref-day.unavailable {
    background: var(--error-muted);
    border-color: var(--error);
}
.pref-day.partial {
    background: var(--warning-muted);
    border-color: var(--warning);
}
.pref-day.empty {
    background: var(--bg-card);
    border-color: var(--border-color);
}

.pref-day-num { font-size: 0.9375rem; font-weight: 600; margin-bottom: 2px; }
/* Auditointi 22.9. FU-9b: teeman tekstiväri (valkoinen oli vaaleassa teemassa 1.1:1 näkymätön) */
.pref-day-time { font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); margin-top: 6px; }

/* === CONFIRM DIALOG === */
.confirm-dialog { text-align: center; padding: 12px 0; }
.confirm-icon { margin-bottom: 12px; display: flex; justify-content: center; }
.confirm-icon .icon-inline { width: 36px; height: 36px; }
.confirm-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.confirm-message { font-size: 0.8125rem; color: var(--text-secondary); white-space: pre-line; }

/* === ALERT === */
.alert {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
.alert-icon { font-size: 1rem; }

/* Auditointi 22.9. FU-12: JS käytti luokkia, joilla ei ollut tyylejä — tilapiste oli 0×0
   (Työntekijät-taulukon Tila-sarake) ja latausspinneri näkymätön */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    background: var(--text-muted);
    flex-shrink: 0;
}
.account-status { display: inline-flex; align-items: center; }
.status-dot.success { background: var(--success); }
.status-dot.warning { background: var(--warning); }
.status-dot.danger { background: var(--error); }
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: publishSpin 0.8s linear infinite;
}
.alert-info { background: var(--info-muted); border: 1px solid rgba(74, 158, 255, 0.2); color: var(--info); }
.alert-success { background: var(--success-muted); border: 1px solid rgba(62, 207, 142, 0.2); color: var(--success); }
.alert-warning { background: var(--warning-muted); border: 1px solid rgba(245, 165, 36, 0.2); color: var(--warning); }
/* Auditointi 22.9. FU-9e: .alert-error (dashboardin, viikkonäkymän ja sähköpostibannerin
   failed-tila) oli tyylittä — vakavin tila näkyi ilman punaista taustaa */
.alert-danger,
.alert-error { background: var(--error-muted); border: 1px solid rgba(232, 92, 74, 0.2); color: var(--error); }

/* === UTILITIES === */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mt-4 { margin-top: 16px; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* ============================================ */
/* v1.4.0: PREFERENCE OVERLAY                  */
/* ============================================ */

/* Preference header indicator (summary dot count) */
.pref-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.875rem;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: 4px;
}

.pref-header-badge.has-unavailable {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.pref-header-badge.has-partial {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

/* ============================================ */
/* v1.4.0: COVERAGE TIMELINE                   */
/* ============================================ */
.coverage-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 100%;
}
.coverage-timeline {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--border-color);
    flex: 1;
    min-width: 0;
}

.coverage-segment {
    height: 100%;
    min-width: 2px;
}

.coverage-segment.covered { background: var(--success); }
.coverage-segment.uncovered { background: var(--error); }
.coverage-segment.closed { background: var(--border-color); }

.coverage-gap-badge {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--error);
    text-align: right;
    line-height: 1;
    margin-top: 1px;
    flex-shrink: 0;
}

/* ============================================ */
/* v1.4.0: MONTH DASHBOARD                     */
/* ============================================ */
.dashboard-section {
    padding: 0.875rem 1rem;
    margin-bottom: 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.dashboard-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
}

.dashboard-card-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.dashboard-card-value {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.dashboard-card-value.danger { color: var(--error); }
.dashboard-card-value.warning { color: var(--warning); }
.dashboard-card-value.success { color: var(--success); }

.dashboard-card-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.125rem;
}

.dashboard-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
    cursor: pointer;
    transition: opacity 0.15s;
    font-weight: 500;
}

.dashboard-alert:last-child { margin-bottom: 0; }

.dashboard-alert:hover { opacity: 0.85; }

.dashboard-alert.alert-danger {
    background: rgba(248, 113, 113, 0.12);
    border-left: 3px solid var(--error);
    color: var(--error);
}

.dashboard-alert.alert-warning {
    background: rgba(251, 191, 36, 0.12);
    border-left: 3px solid var(--warning);
    color: var(--warning);
}

.dashboard-alert.alert-success {
    background: rgba(52, 211, 153, 0.12);
    border-left: 3px solid var(--success);
    color: var(--success);
}

/* ============================================ */
/* ============================================ */
/* v1.6.0: TOOLBAR ACTIONS                     */
/* ============================================ */
.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 3px;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.toolbar-btn.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Auditointi 22.9. PA-24 (katselmointi): pois käytöstä oleva työkalunappi (esim. Omat
   vuoroni -näkymän Excel julkaisemattomalle kuulle) näytti toimivalta napilta */
.toolbar-btn:disabled,
.toolbar-btn:disabled:hover {
    opacity: 0.45;
    cursor: not-allowed;
    background: transparent;
    color: var(--text-secondary);
}

.toolbar-btn:disabled:hover .toolbar-btn-icon {
    opacity: 0.8;
}

.toolbar-btn-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    image-rendering: -webkit-optimize-contrast;
}

.toolbar-btn:hover .toolbar-btn-icon {
    opacity: 1;
}

.toolbar-btn.active .toolbar-btn-icon {
    opacity: 1;
}

.toolbar-btn.accent {
    color: var(--accent-text);
}

.toolbar-btn.accent .toolbar-btn-icon {
    filter: brightness(0) invert(58%) sepia(60%) saturate(3000%) hue-rotate(215deg);
    opacity: 0.85;
}

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

.toolbar-btn.danger .toolbar-btn-icon {
    filter: brightness(0) invert(27%) sepia(95%) saturate(5000%) hue-rotate(355deg) brightness(100%);
    opacity: 0.75;
}

.toolbar-btn.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.toolbar-btn.danger:hover .toolbar-btn-icon {
    opacity: 1;
}

[data-theme="light"] .toolbar-btn.danger .toolbar-btn-icon {
    filter: brightness(0) invert(27%) sepia(95%) saturate(5000%) hue-rotate(355deg) brightness(100%);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 2px;
    flex-shrink: 0;
}

[data-theme="light"] .toolbar-btn-icon {
    filter: brightness(0);
}

[data-theme="light"] .toolbar-btn.accent .toolbar-btn-icon {
    filter: none;
}

/* ============================================ */
/* v1.5.2: STORE PRIORITY                      */
/* ============================================ */
.store-prio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: grab;
    transition: border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}
.store-prio-item:hover { border-color: var(--text-muted); }
.store-prio-item:active { cursor: grabbing; }

.store-prio-handle {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: grab;
}

.store-prio-rank {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 18px;
}

.store-prio-disabled {
    cursor: default;
    opacity: 0.6;
    border-style: dashed;
}
.store-prio-disabled:hover { border-color: var(--border-color); }

.store-prio-toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}
.store-prio-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.store-prio-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--bg-elevated);
    border-radius: 8px;
    transition: background 0.2s;
}
.store-prio-toggle-track::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.store-prio-toggle input:checked + .store-prio-toggle-track {
    background: var(--success-muted);
}
.store-prio-toggle input:checked + .store-prio-toggle-track::after {
    transform: translateX(12px);
    background: var(--success);
}

/* ============================================ */
/* v1.5.0: WIZARD                              */
/* ============================================ */
.wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s;
    padding: 10px;
}
.wizard-overlay.show { opacity: 1; visibility: visible; }

.wizard-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.25s;
}
.wizard-overlay.show .wizard-container { transform: scale(1); }

.wizard-header {
    padding: 16px 24px 0;
    position: relative;
}

.wizard-preview-mode .wizard-header {
    padding: 12px 20px 0;
}

.wizard-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.wizard-steps {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.wizard-step-tab {
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wizard-step-tab:hover { color: var(--text-secondary); }
.wizard-step-tab.active { color: var(--accent-text); border-bottom-color: var(--accent); }
.wizard-step-tab.completed { color: var(--success); }
.wizard-step-tab .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 0.625rem;
    font-weight: 700;
}
.wizard-step-tab.active .step-num { background: var(--accent); color: white; border-color: var(--accent); }
.wizard-step-tab.completed .step-num { background: var(--success); color: white; border-color: var(--success); }

.wizard-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.wizard-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.wizard-preview-mode .wizard-footer {
    padding: 10px 20px;
}

/* Wizard specific components */
.wiz-emp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.wiz-emp-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}
.wiz-emp-card:hover { border-color: var(--text-muted); }
.wiz-emp-card.selected { border-color: var(--accent); background: var(--accent-muted); }
.wiz-emp-card.excluded { opacity: 0.4; }

.wiz-emp-color {
    width: 8px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

.wiz-emp-info { flex: 1; min-width: 0; }
.wiz-emp-name { font-size: 0.8125rem; font-weight: 600; }
.wiz-emp-hours { font-size: 0.6875rem; color: var(--text-muted); }

.wiz-pin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}
.wiz-pin-table th {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    z-index: 5;
}
.wiz-pin-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.wiz-pin-table tr:hover td { background: var(--bg-card); }

.wiz-pin-select {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.6875rem;
}

.wiz-recurring-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
}

.wiz-priority-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.wiz-priority-label {
    flex: 0 0 180px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.wiz-priority-desc {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.wiz-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    outline: none;
}
.wiz-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

/* Preview table */
.wiz-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.625rem;
}
.wiz-preview-table th {
    padding: 4px 3px;
    text-align: center;
    font-weight: 600;
    font-size: 0.5625rem;
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-card);
    position: sticky;
    top: 0;
    z-index: 5;
}
.wiz-preview-table td {
    padding: 1px 2px;
    border: 1px solid var(--border-color);
    vertical-align: top;
    min-width: 70px;
}

.wiz-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.5625rem;
    margin: 0;
    white-space: nowrap;
    line-height: 1.4;
}
.wiz-preview-chip.suggested { background: rgba(16, 185, 129, 0.15); border: 1px solid var(--success); }
.wiz-preview-chip.pinned { background: rgba(59, 130, 246, 0.15); border: 1px solid var(--accent); }
.wiz-preview-chip.conflict { background: rgba(245, 158, 11, 0.15); border: 1px solid var(--warning); }
/* Auditointi 22.9. FU-9g: vanhan indigo-/violettiteeman sävyt korostusvärillä */
.wiz-preview-chip.vacation-conflict { background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--accent); }
.wiz-preview-chip.existing { background: var(--bg-card); border: 1px solid var(--border-color); opacity: 0.6; }
.wiz-preview-chip.unfilled { background: rgba(239, 68, 68, 0.1); border: 1px dashed var(--error); color: var(--error); }
.wiz-preview-chip.half { background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px dashed var(--accent); font-style: italic; }
/* Auditointi 22.9. EV-2: poissaolo esikatselussa (ei miehitä) */
.wiz-preview-chip.absence { background: transparent; border: 1px dashed var(--text-muted); color: var(--text-muted); text-decoration: line-through; }
.wizard-step-tab:focus-visible, .wiz-emp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-hour-adj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 18px;
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.15s;
}
.btn-hour-adj:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent-text); }
.btn-hour-adj.active { background: var(--accent-muted); border-color: var(--accent); color: var(--accent-text); }

/* v1.6.3: Wide wizard for preview step */
.wizard-container.wizard-preview-mode {
    max-width: 1400px;
    max-height: 96vh;
}

.wizard-preview-mode .wizard-body {
    padding: 12px 20px;
}

.wiz-preview-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 0.75rem;
    height: 100%;
    min-height: 0;
}

.wiz-preview-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wiz-preview-table-wrap {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.wiz-preview-right {
    border-left: 1px solid var(--border-color);
    padding-left: 0.75rem;
    overflow-y: auto;
    min-height: 0;
}

.wiz-hour-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.6875rem;
}

.wiz-hour-card {
    padding: 4px 6px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.wiz-stats-inline {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.wiz-stat-sep {
    color: var(--text-muted);
    opacity: 0.5;
}

.wiz-stat-inline {
    white-space: nowrap;
}

.wiz-conflicts-bar {
    padding: 0.375rem 0.625rem;
    background: rgba(245,158,11,0.1);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--warning);
    font-size: 0.6875rem;
    margin-bottom: 0.5rem;
}

/* ============================================ */
/* VACATION / KESÄLOMA                          */
/* ============================================ */
.vacation-months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.vacation-month {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    border: 1px solid var(--border-subtle);
    position: relative;
}

.vac-month-lock { width: 16px; height: 16px; cursor: pointer; opacity: 0.4; position: absolute; top: 6px; right: 6px; z-index: 2; transition: opacity 0.15s; filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(5000%) hue-rotate(350deg) brightness(95%); }
.vac-month-lock:hover { opacity: 1; }
.vac-month-lock.locked { opacity: 1; }
.vac-month-lock.past { cursor: default; opacity: 0.25; }
.vacation-month.month-locked .vac-day:not(.vac-day-empty) { opacity: 0.4; pointer-events: none; }
.vacation-month.month-locked .vac-day-selected { opacity: 0.6; }

.vacation-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.vac-hdr {
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
    text-transform: uppercase;
}

.vac-day {
    text-align: center;
    font-size: 0.75rem;
    padding: 6px 2px;
    border-radius: var(--radius-sm);
    cursor: default;
    transition: background 0.15s, color 0.15s;
    user-select: none;
    position: relative;
}

.vac-day-empty {
    cursor: default;
}

.vac-selecting .vac-day:not(.vac-day-empty):not(.vac-day-selected) {
    cursor: pointer;
}
.vac-selecting .vac-day:not(.vac-day-empty):not(.vac-day-selected):hover {
    background: var(--info-muted);
    color: var(--info);
}

.vac-day-sunday {
    color: var(--error);
}
.vac-day-saturday {
    color: var(--text-muted);
}

.vac-day-today {
    font-weight: 700;
    box-shadow: inset 0 0 0 2px var(--accent);
    border-radius: var(--radius-sm);
}

.vac-day-selected {
    background: rgba(245, 158, 66, 0.14);
    color: #f59e42;
    font-weight: 600;
}
.vac-day-start {
    border-radius: var(--radius-sm) 2px 2px var(--radius-sm);
    background: linear-gradient(135deg, #f59e42, #e8634e);
    color: #fff;
}
.vac-day-end {
    border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
    background: linear-gradient(135deg, #f59e42, #e8634e);
    color: #fff;
}
.vac-day-start.vac-day-end {
    border-radius: var(--radius-sm);
}

/* Selection mode temp highlights */
.vac-day-temp-start {
    background: var(--info) !important;
    color: #fff !important;
    font-weight: 700;
}
.vac-day-temp-range {
    background: var(--info-muted) !important;
    color: var(--info) !important;
}

/* Other vacation periods (gray) in modal calendar */
.vac-day-other {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-radius: 2px;
}

/* Auditointi 22.9. LO-16 / LO-18: näppäimistöfokus näkyviin lomakalentereissa ja palkeissa */
.vac-day[role="button"]:focus-visible,
.vac-month-lock[role="button"]:focus-visible,
.vacation-gantt-bar:focus-visible,
.devin-day-dot:focus-visible,
.devin-half-option:focus-visible,
.devin-start-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Auditointi 22.9. LO-13: vahvistettu loma vs. lomatoive (selite, yhteenveto, viikkoikkuna) */
.vac-legend-swatch {
    display: inline-block;
    width: 18px;
    height: 10px;
    border-radius: 3px;
}
.vac-legend-swatch.confirmed { background: var(--accent); }
.vac-legend-swatch.wish { background: transparent; border: 1.5px dashed var(--accent); }

.vac-summary-bar {
    position: absolute;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    overflow: hidden;
    cursor: default;
    min-width: 2px;
}
.vac-summary-bar span {
    font-size: 0.625rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vac-summary-bar.wish {
    top: 3px;
    bottom: calc(50% + 1px);
    border: 1.5px dashed var(--bar-color);
    background: color-mix(in srgb, var(--bar-color) 15%, transparent);
    color: var(--text-primary);
}
/* Auditointi 22.9. LO-13b (katselmointi): toivepalkki avaa esihenkilölle tiedot ja poiston */
.vac-summary-bar.wish[role="button"] { cursor: pointer; }
.vac-summary-bar.wish[role="button"]:hover { background: color-mix(in srgb, var(--bar-color) 30%, transparent); }
.vac-summary-bar.wish[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vac-summary-bar.confirmed {
    top: calc(50% + 1px);
    bottom: 3px;
    background: var(--bar-color);
    color: var(--bar-text, #fff);
}
.vac-summary-bar.confirmed span { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* Auditointi 22.9. LO-11 / LO-18: lomaviikon ikkuna (dialogi, mahtuu puhelimeen) */
.vac-week-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.vac-week-dialog {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.vac-week-head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}
.vac-week-nav {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vac-week-nav:hover { background: var(--accent-muted); color: var(--accent-text); }
.vac-week-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.vac-week-nav:focus-visible, .vac-week-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vac-week-scroll { overflow-x: auto; }
.vac-week-grid {
    --vac-name-col: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 300px;
}
.vac-week-row {
    display: grid;
    grid-template-columns: var(--vac-name-col) repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.vac-week-row:last-child { border-bottom: none; }
.vac-week-header { background: var(--bg-surface); border-bottom: 2px solid var(--border-color); }
.vac-week-day {
    padding: 0.5rem 0.125rem;
    text-align: center;
    border-left: 1px solid var(--border-color);
    min-width: 0;
}
.vac-week-day.weekend { background: rgba(0,0,0,0.04); }
.vac-week-day.today { background: var(--accent-muted); color: var(--accent-text); }
.vac-week-dayname { font-size: 0.6875rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.vac-week-date { font-size: 1rem; font-weight: 700; margin-top: 2px; }
.vac-week-name {
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}
.vac-week-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vac-week-cell { border-left: 1px solid var(--border-color); min-width: 0; }
.vac-week-cell.weekend { background: rgba(0,0,0,0.03); }
.vac-week-bar {
    position: absolute;
    height: 22px;
    left: calc(var(--vac-name-col) + (100% - var(--vac-name-col)) * var(--first) / 7 + 2px);
    width: calc((100% - var(--vac-name-col)) * var(--span) / 7 - 4px);
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    box-sizing: border-box;
}
.vac-week-bar span { font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vac-week-bar.confirmed { background: var(--bar-color); color: var(--bar-text, #fff); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.vac-week-bar.confirmed span { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
/* Auditointi 22.9. FU-9a: tumma teksti vaalealla palkilla ilman varjoa (--bar-text, tekstiVariTaustalle) */
.vac-week-bar.confirmed.vaalea-palkki span,
.vac-summary-bar.confirmed.vaalea-palkki span { text-shadow: none; }
.vac-week-bar.wish { border: 1.5px dashed var(--bar-color); background: color-mix(in srgb, var(--bar-color) 15%, var(--bg-card)); color: var(--text-primary); }

@media (max-width: 480px) {
    .vac-week-overlay { padding: 0.5rem; }
    .vac-week-head { padding: 0.75rem; gap: 0.375rem; }
    .vac-week-grid { --vac-name-col: 64px; }
    .vac-week-name { padding: 0 0.375rem; font-size: 0.75rem; gap: 4px; }
    .vac-week-date { font-size: 0.8125rem; }
    .vac-week-dayname { font-size: 0.625rem; letter-spacing: 0; }
    .vac-week-bar { padding: 0 4px; }
}

/* === RESPONSIVE === */

/* Sidebar backdrop overlay */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.2s;
}
.sidebar-backdrop.show {
    display: block;
    opacity: 1;
}

/* Calendar grid scroll wrapper */
.calendar-grid-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== MY SHIFTS: VACATION CELL (Tropiikki) ===== */
.myshift-vacation {
    background: linear-gradient(160deg, #0a2a2e 0%, #0d3538 40%, #0a2228 100%) !important;
    border-color: transparent !important;
    overflow: hidden;
    cursor: default !important;
}
.myshift-vacation::before {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0,18 Q15,8 30,15 Q45,22 60,12 Q75,2 90,14 Q105,22 120,10 L120,20 L0,20Z' fill='%230a484d33'/%3E%3Cpath d='M0,20 Q20,12 40,17 Q60,22 80,14 Q100,6 120,16 L120,20 L0,20Z' fill='%230a585d44'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
    pointer-events: none;
}
.myshift-vacation .vac-icon { font-size: 1.1rem; line-height: 1; margin-top: 0.6rem; }
.myshift-vacation .vac-text { font-size: 0.6875rem; color: #2dd4bf; font-weight: 600; margin-top: 2px; }

[data-theme="light"] .myshift-vacation {
    background: linear-gradient(160deg, #e0faf6 0%, #c8f5ed 40%, #d5f7f0 100%) !important;
}
[data-theme="light"] .myshift-vacation::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M0,18 Q15,8 30,15 Q45,22 60,12 Q75,2 90,14 Q105,22 120,10 L120,20 L0,20Z' fill='%2380d6c822'/%3E%3Cpath d='M0,20 Q20,12 40,17 Q60,22 80,14 Q100,6 120,16 L120,20 L0,20Z' fill='%2360c8b833'/%3E%3C/svg%3E") no-repeat bottom center;
    background-size: 100% 100%;
}
[data-theme="light"] .myshift-vacation .myshift-cell-day { color: #0f766e !important; }
[data-theme="light"] .myshift-vacation .vac-text { color: #0d9488; }

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
    .sidebar.open { transform: translateX(0); width: var(--sidebar-width); }
    .sidebar.open.collapsed .sidebar-title,
    .sidebar.open.collapsed .nav-item-text,
    .sidebar.open.collapsed .nav-section,
    .sidebar.open.collapsed .user-details,
    .sidebar.open.collapsed .version-info { display: block; }
    .sidebar.open.collapsed .sidebar-logo { justify-content: flex-start; }
    .sidebar.open.collapsed .sidebar-nav { padding: 0 12px; }
    .sidebar.open.collapsed .nav-item { padding: 10px 14px; justify-content: flex-start; }
    .sidebar.open.collapsed .nav-item-icon { font-size: 1.125rem; margin: 0; }
    .sidebar.open.collapsed .user-info { flex-direction: row; }
    .sidebar.open.collapsed .user-avatar { width: 34px; height: 34px; font-size: 0.8rem; }
    .sidebar.open.collapsed .sidebar-footer { padding: 12px; }
    .sidebar.open.collapsed .sidebar-actions { flex-direction: row; }
    .sidebar.open.collapsed .sidebar-action-btn { width: auto; height: auto; }
    .sidebar-collapse-btn { display: none; }
    .main-content { margin-left: 0 !important; }
    #mobileMenuBtn { display: flex !important; }
    
    /* Hide sidebar tooltips on mobile to prevent bleed-through */
    .sidebar .nav-item::after { display: none !important; }
    
    /* Wizard preview */
    .wizard-container.wizard-preview-mode { max-width: 960px; }
    .wiz-preview-layout { grid-template-columns: 1fr; }
    .wiz-preview-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 0.75rem;
    }
    .wiz-hour-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Auditointi 22.9. FU-3: Omat vuoroni -solun kellonaika rivittyy myymälän alle, kun solu on
   kapea (sisältö alle 6.5rem: esim. 820, 900, 1100 ja 1180 px); aiemmin se leikkautui solun
   reunaan ("09:0").
   Leveämmissä soluissa asettelu ennallaan. Vain riviasettelussa: mobiilissa ja vaakapuhelimessa
   solu on sarakeasettelu, jossa wrap jakaisi sisällön rinnakkaisiin sarakkeisiin. */
.myshift-cell { container-type: inline-size; }
@media (min-width: 769px) and (min-height: 501px) {
    @container (max-width: 6.5rem) {
        .myshift-cell-info { flex-wrap: wrap; column-gap: 4px; min-width: 0; }
        .myshift-cell-info > div { min-width: 0; }
    }
}

/* My Shifts: hide mobile "Tänään" on desktop */
.myshifts-today-mobile { display: none; }

/* Week mobile view - hidden on desktop */
.week-mobile-view { display: none; }

.myshifts-stats .card {
    display: flex; flex-direction: column; justify-content: center;
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {
    /* Global overflow prevention — estää kaiken horisontaalisen ylivuodon.
       Auditointi 22.9. FU-5: clip eikä hidden. overflow-x: hidden tekee bodysta
       vierityssäiliön, jolloin sticky yläpalkki (Tänään ja Su/Kaikki) vierittyi pois
       näkyvistä. hidden jää varaksi selaimille, jotka eivät tunne clipiä (iOS < 16). */
    html { overflow-x: hidden; overflow-x: clip; scroll-padding-top: calc(56px + var(--sim-banner-h, 0px)); }
    body { overflow-x: hidden; overflow-x: clip; max-width: 100vw; width: 100%; }

    /* General layout — contain everything */
    .content { padding: 8px; overflow-x: hidden; overflow-x: clip; max-width: 100%; box-sizing: border-box; }
    .header { padding: 0 10px; height: 52px; }
    /* Auditointi 22.9. FK-3: html/body overflow-x: hidden estää stickyn mobiilissa (otsakekaan
       ei pysy ylhäällä), joten sticky palkki vierittyi pois näkyvistä. Mobiilissa palkki on
       kiinteä alapalkki, ja sisällön alle varataan sen korkeus (--publish-bar-h). */
    .publish-timer-bar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 10px env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
    }
    .content { padding-bottom: calc(8px + var(--publish-bar-h, 0px)); }
    .header-left { gap: 8px; min-width: 0; flex: 1; overflow: hidden; }
    .header-right { gap: 6px; flex-shrink: 0; }
    /* Auditointi 22.9. FU-7d: valikkonappi ei kutistu kapealla puhelimella (≤360 px 18–22 px) */
    #mobileMenuBtn { flex-shrink: 0; }
    .header-title { font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .header-day-today {
        height: 30px;
        padding: 0 8px;
    }
    .header-sunday-toggle,
    .header-all-weeks-toggle {
        height: 30px;
        padding: 0 6px;
    }
    .header-sunday-toggle .toggle-track,
    .header-all-weeks-toggle .toggle-track {
        width: 32px;
        height: 18px;
    }
    .header-sunday-toggle .toggle-track::after,
    .header-all-weeks-toggle .toggle-track::after {
        width: 12px;
        height: 12px;
    }
    .header-sunday-toggle input:checked + .toggle-track::after,
    .header-all-weeks-toggle input:checked + .toggle-track::after {
        transform: translateX(14px);
    }
    .header-sunday-toggle .toggle-text,
    .header-all-weeks-toggle .toggle-text {
        font-size: 0.6875rem;
    }
    .header-day-today.is-visible,
    .toggle-switch.header-sunday-toggle.is-visible,
    .toggle-switch.header-all-weeks-toggle.is-visible {
        display: flex;
    }
    .header-day-today:disabled {
        opacity: 0.45;
        cursor: default;
    }
    /* Auditointi 22.9. FU-4: vain yläpalkkiin siirretyt Su/Kaikki-kytkimet piilotetaan.
       Vapaatoiveiden kuukausilukitusta ei ole yläpalkissa, joten sen piilottaminen esti
       ownerilta/adminilta kuukauden lukitsemisen ja avaamisen puhelimella. */
    .calendar-header .view-header-today,
    .calendar-header-tools .toggle-switch:not(.pref-lock-toggle),
    .calendar-header-tools > .toolbar-divider {
        display: none !important;
    }
    .font-size-controls { display: none; }
    #themeToggleBtn { display: none; }

    /* Cards — ei saa venyttää viewportia */
    .card { max-width: 100%; overflow: hidden; box-sizing: border-box; }

    /* Calendar header: stack vertically, full width */
    .calendar-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 6px;
        padding: 8px 10px;
        margin-bottom: 0.5rem !important;
    }
    .calendar-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        flex-wrap: nowrap;
    }
    .calendar-title {
        width: auto;
        min-width: 0;
        font-size: 0.9375rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .calendar-header-tools {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
    }
    .week-calendar-header {
        flex-direction: row;
        align-items: center !important;
        justify-content: space-between;
        padding-left: 8px;
        padding-right: 8px;
    }
    .week-calendar-header .calendar-nav {
        flex: 1;
        min-width: 0;
        justify-content: flex-start;
        gap: 0.55rem;
    }
    .week-calendar-header .calendar-title {
        flex: 0 0 clamp(170px, 46vw, 186px);
        width: clamp(170px, 46vw, 186px);
        gap: 0.3rem;
        justify-content: center;
        text-align: center;
        font-size: 0.78rem;
    }
    .week-calendar-header .calendar-header-tools {
        flex: 0 0 auto;
        justify-content: flex-end;
    }
    .week-calendar-header .toolbar-actions {
        flex-wrap: nowrap;
        gap: 0.125rem;
        padding: 2px;
    }
    .week-calendar-header .toolbar-btn {
        width: 30px;
        min-width: 30px;
        height: 30px;
        padding: 0;
        justify-content: center;
    }
    .btn-today { font-size: 0.6875rem; padding: 0 8px; height: 26px; }
    .month-calendar-header .calendar-header-tools {
        width: 100%;
        flex-wrap: nowrap !important;
        justify-content: center;
        gap: 0.35rem !important;
    }
    .month-calendar-header .calendar-nav {
        gap: 0.65rem;
        justify-content: center;
    }
    .month-calendar-header .calendar-title {
        flex: 0 0 156px;
        width: 156px;
        justify-content: center;
        text-align: center;
    }
    .month-calendar-header .toolbar-actions {
        flex-wrap: nowrap;
        gap: 0.125rem;
        padding: 2px;
    }
    .month-calendar-header .toolbar-actions .toggle-switch + .toolbar-divider {
        display: none;
    }
    .month-calendar-header .toolbar-btn {
        min-width: 30px;
        height: 30px;
        padding: 0 0.4rem;
        justify-content: center;
    }
    .myshifts-calendar-header .calendar-nav {
        gap: 0.65rem;
        justify-content: center;
    }
    .myshifts-calendar-header .calendar-title {
        flex: 0 0 156px;
        width: 156px;
        justify-content: center;
        text-align: center;
    }

    /* Päivänäkymä: Tänään siirtyy mobiilissa yläpalkkiin. */
    .day-nav-today {
        display: none !important;
    }
    .day-nav {
        min-height: 48px;
        padding: 0.35rem 0.45rem;
        gap: 0.35rem;
    }
    .day-nav-btn {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-sm);
    }
    .day-nav-dayname {
        font-size: 1.26rem;
        line-height: 1;
    }
    .day-nav-date {
        font-size: 1.26rem;
        line-height: 1;
        font-weight: 700;
    }

    /* ===== WEEK MOBILE VIEW (Accordion) ===== */
    .week-grid { display: none !important; }
    .week-mobile-view {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        overflow-x: hidden;
    }
    .calendar-container {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Kompakti viikkonäkymä — kaikki päivät kerralla */
    .week-mob-compact { display: flex; flex-direction: column; }

    .week-mob-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-bottom: none;
        overflow: hidden;
    }
    .week-mob-card.first { border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .week-mob-card.last {
        border-bottom: 1px solid var(--border-color);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }
    .week-mob-card.first.last { border-radius: var(--radius-md); border-bottom: 1px solid var(--border-color); }
    .week-mob-card.today { background: var(--accent-muted); }
    .week-mob-card.locked { opacity: 0.5; }

    .week-mob-card-hdr {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
        font-weight: 700;
        font-size: 0.8125rem;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .week-mob-card-hdr:active { opacity: 0.7; }

    .week-mob-dname { flex-shrink: 0; min-width: 1.5rem; }
    .week-mob-ddate { flex-shrink: 0; color: var(--text-muted); font-weight: 500; }
    .week-mob-hol { font-size: 0.6875rem; color: var(--error); flex-shrink: 0; }
    .week-mob-lock { font-size: 0.75rem; flex-shrink: 0; }
    .week-mob-spacer { flex: 1; }
    .week-mob-ok {
        flex-shrink: 0;
        font-size: 0.625rem;
        font-weight: 700;
        color: var(--success, #22c55e);
        background: rgba(34, 197, 94, 0.12);
        padding: 0.1rem 0.4rem;
        border-radius: 999px;
        letter-spacing: 0.03em;
    }

    .week-mob-card-body { padding: 0.25rem 0.5rem; }

    .week-mob-store-row {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        padding: 0.2rem 0;
        font-size: 0.8125rem;
    }

    .week-mob-store-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 2px;
        align-self: flex-start;
    }

    .week-mob-store-name {
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-secondary);
        flex-shrink: 0;
        min-width: 0;
    }

    .week-mob-shifts {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        flex: 1;
        min-width: 0;
    }

    .week-mob-shift {
        font-size: 0.75rem;
        white-space: nowrap;
    }
    .week-mob-shift.absence { opacity: 0.6; }
    .week-mob-shift-name { font-weight: 600; }
    .week-mob-shift-time { color: var(--text-muted); font-size: 0.6875rem; }

    .week-mob-empty {
        font-size: 0.75rem;
        color: var(--text-muted);
        opacity: 0.5;
        padding: 0.125rem 0;
    }

    /* Hours table: hide bonus columns on mobile */
    .hours-bonus-col { display: none; }

    /* Hours table: scrollable within card (card has overflow:hidden) */
    #weekHoursTable, #hoursTable {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    #weekHoursTable .table,
    #hoursTable .table {
        font-size: 0.75rem;
        min-width: 420px;
    }
    #weekHoursTable .table th,
    #weekHoursTable .table td,
    #hoursTable .table th,
    #hoursTable .table td {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }
    /* Sopimus-solun peruste ("30 h/vko, 26 työpäivää, …") rivittyy, jotta taulukko ei
       levene ja Erotus-sarake pysyy näkyvissä (auditointi 22.9. PA-2b) */
    #weekHoursTable .table td .contract-basis,
    #hoursTable .table td .contract-basis {
        white-space: normal;
    }

    /* My Shifts: show mobile "Tänään" between dropdown and toolbar */
    .myshifts-today-desktop { display: none !important; }
    .myshifts-today-mobile { display: inline-flex !important; }
    .myshifts-excel-btn { display: none !important; }
    
    /* Toolbar buttons: icon-only on mobile */
    .toolbar-btn-label { display: none; }
    .month-calendar-header .month-wizard-label { display: inline !important; }
    .toolbar-btn { padding: 0.375rem 0.5rem; min-width: 36px; }
    .toolbar-actions { flex-wrap: wrap; gap: 0.25rem; }
    
    /* ===== MY SHIFTS (Omat vuorot) ===== */

    /* Mobiilissa: stats kalenterin alle */
    .myshifts-layout {
        display: flex;
        flex-direction: column;
    }
    .myshifts-order-header  { order: 1; }
    .myshifts-order-calendar { order: 2; }
    .myshifts-order-stats   { order: 3; margin-top: 1rem; }

    /* Stats grid: 2x2, compact */
    .myshifts-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        margin-bottom: 1rem !important;
    }
    .myshifts-stats .card {
        padding: 0.5rem !important;
    }
    .myshifts-stats .card > div:first-child {
        font-size: 1.125rem !important;
    }
    .myshifts-stats .card .text-muted {
        font-size: 0.625rem !important;
    }
    
    /* Calendar grid: compact, no overflow */
    .myshifts-calendar-grid {
        gap: 3px !important;
    }
    .myshifts-calendar-grid .card,
    .myshifts-cal-card {
        padding: 4px !important;
    }
    .myshift-header {
        padding: 2px !important;
        font-size: 0.5625rem !important;
    }
    
    /* Calendar cells: small on mobile */
    .myshift-cell {
        min-height: 52px !important;
        padding: 3px !important;
    }
    .myshift-cell-empty {
        min-height: 52px !important;
    }
    .myshift-cell-day {
        font-size: 0.75rem !important;
    }
    
    /* Hide duration on mobile — time is enough */
    .myshift-cell-duration { display: none; }

    /* Shift info: centered on mobile, kellonaika keskelle, myymälä pohjalle */
    .myshift-cell-info {
        flex-direction: column !important;
        align-items: center !important;
        flex: 1;
        justify-content: center !important;
    }
    /* Auditointi 22.9. FU-7d: kellonaika saa rivittyä viivan kohdalta (<wbr>) eikä leikkaudu
       kapeassa solussa (fontti vähintään 10 px, aiemmin 7 px). Myymälän nimen koko ennallaan
       (suurempana lyhytkin nimi katkesi kesken sanan); pitkä sana rivittyy solun levyiseksi. */
    .myshift-cell-time {
        font-size: 0.625rem !important;
        white-space: normal;
        text-align: center !important;
        order: -1;
    }
    .myshift-cell-info > div { min-width: 0; max-width: 100%; }
    .myshift-cell-detail {
        font-size: 0.5rem !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }
    .myshift-cell-absence {
        font-size: 0.5rem !important;
    }
    /* 6-sarakkeen layout (su piilotettu): isommat fontit */
    .myshifts-cal-6col .myshift-cell-time {
        font-size: 0.75rem !important;
    }
    .myshifts-cal-6col .myshift-cell-detail {
        font-size: 0.625rem !important;
    }
    .myshifts-cal-6col .myshift-cell-absence {
        font-size: 0.5625rem !important;
    }
    .myshift-cell-absence img {
        width: 10px !important;
        height: 10px !important;
    }
    .myshift-cell-absence-label {
        display: none;
    }
    .myshift-vacation .vac-icon { font-size: 0.85rem !important; }
    .myshift-vacation .vac-text { font-size: 0.5rem !important; }
    
    /* My shifts table */
    .myshifts-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .myshifts-table-card .table { font-size: 0.8125rem; }
    .myshifts-table-card .table th,
    .myshifts-table-card .table td { padding: 0.5rem 0.375rem; white-space: nowrap; }
    
    /* ===== ADMIN MONTH VIEW ===== */
    
    /* Dashboard cards */
    .dashboard-section { padding: 0.5rem; overflow: hidden; }
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }
    .dashboard-card { padding: 0.5rem 0.625rem; }
    .dashboard-card-label { font-size: 0.5625rem; }
    .dashboard-card-value { font-size: 1.125rem; }
    .dashboard-card-sub { font-size: 0.625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    
    /* Dashboard alerts: prevent overflow */
    .dashboard-alert {
        overflow: hidden;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
    .dashboard-alert div {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    /* Admin calendar grid */
    .calendar-grid {
        grid-template-columns: 30px repeat(7, 1fr) !important;
    }
    .calendar-grid.hide-sunday {
        grid-template-columns: 30px repeat(5, 1fr) 6px 1fr !important;
    }
    .calendar-day { min-height: 56px; padding: 3px; }
    .calendar-day-number { font-size: 0.6875rem; margin-bottom: 1px; }
    .calendar-day.holiday {
        box-shadow: none;
    }
    .calendar-day.today {
        box-shadow: inset 0 0 0 2px var(--info);
    }
    .calendar-day.today.holiday {
        box-shadow: inset 0 0 0 2px var(--info);
    }
    .calendar-day.today .calendar-day-number {
        display: block;
        min-width: 0;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text-primary);
        margin-bottom: 1px;
    }
    .calendar-day.today .coverage-indicator {
        margin-top: 6px;
    }
    .calendar-day .coverage-indicator {
        justify-content: center;
        width: 100%;
        margin-top: 6px;
    }
    .calendar-day.holiday .holiday-name {
        margin-top: 0.45rem;
        margin-left: 0.35rem;
        font-size: 0.625rem;
        line-height: 1.15;
    }
    .calendar-day-header { padding: 6px 2px; font-size: 0.5625rem; }
    .week-number { padding: 6px 2px; font-size: 0.5625rem; }
    .coverage-dot { width: 7px; height: 7px; }
    
    /* ===== PREFERENCES ===== */
    .pref-calendar {
        gap: 3px !important;
        grid-template-columns: repeat(5, 1fr) 6px repeat(1, 1fr) !important;
    }
    .pref-day { min-height: 52px; padding: 4px; }
    .pref-day-num { font-size: 0.8125rem; }
    .pref-day-time { font-size: 0.5625rem; }
    .pref-day-header { padding: 4px 2px; }
    /* Give the prefs card inner padding on mobile */
    .prefs-card {
        padding: 6px;
    }
    
    /* ===== WEEK VIEW ===== */
    .employee-panel-wrap, .employee-panel { display: none !important; }
    .week-view-layout {
        display: block !important;
    }
    
    /* ===== MODALS ===== */
    .modal { width: 95vw; max-width: 95vw; max-height: 90vh; max-height: 90dvh; }
    .modal-header { padding-right: 60px; }
    .modal.modal-wide { max-width: 95vw; }
    .modal-body { padding: 0 14px 14px; }
    .modal-close { width: 36px; height: 36px; font-size: 1.125rem; }
    /* Employee edit modal: stack columns vertically on mobile */
    .edit-emp-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    /* Employee shifts popup: single column on mobile */
    .emp-popup-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    /* Auditointi 22.9. FU-6: työntekijän tietoikkuna yhteen sarakkeeseen (inline-tyyli 1fr 1fr) */
    .emp-details-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* ===== MISC ===== */
    .toast-container { left: 10px; right: 10px; }
    
    /* Vacation calendar mobile */
    .vacation-months-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0.5rem;
    }
    .vacation-month { padding: 0.375rem; }
    .vac-day { padding: 5px 1px; font-size: 0.6875rem; }
    .vac-hdr { font-size: 0.5625rem; padding: 2px 0; }
    .vacation-calendar-card { padding: 0.5rem !important; }
    .toast { min-width: auto; }
    .toggle-text { font-size: 0.75rem; }
    .btn-sm { height: 28px; font-size: 0.6875rem; padding: 0 8px; }
    
    /* Selects */
    .calendar-header-tools select.form-control {
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
        max-width: 140px;
    }

    /* Desktop table hidden, mobile cards shown */
    .desktop-only { display: none !important; }
    .mobile-cards { display: flex !important; flex-direction: column; gap: 10px; padding: 12px; }

    .emp-card, .store-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .emp-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .emp-card-color {
        width: 6px;
        height: 36px;
        border-radius: 3px;
        flex-shrink: 0;
    }
    .emp-card-name {
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-primary);
        text-decoration: none;
    }
    .emp-card-name:hover { color: var(--accent-text); }
    .emp-card-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 14px;
        font-size: 0.8125rem;
    }
    .emp-card-detail {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .emp-card-label {
        font-size: 0.6875rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    .emp-card-value {
        color: var(--text-secondary);
    }
    .emp-card-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding-top: 4px;
        border-top: 1px solid var(--border-subtle);
    }
    .emp-card-actions .btn-sm {
        flex: 1;
        min-width: 0;
        height: 32px;
        font-size: 0.75rem;
    }

    .store-card-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .store-card-color {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        flex-shrink: 0;
    }
    .store-card-name {
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--text-primary);
    }
    .store-card-code {
        font-size: 0.8125rem;
        color: var(--text-muted);
        margin-left: auto;
    }
    .store-card-actions {
        display: flex;
        gap: 8px;
        padding-top: 4px;
        border-top: 1px solid var(--border-subtle);
    }
    .store-card-actions .btn-sm {
        flex: 1;
        height: 32px;
        font-size: 0.75rem;
    }

    .card-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .card-header .btn { font-size: 0.75rem; height: 32px; }
}

/* Landscape-mobiili: column-layout kuten portrait */
@media (max-height: 500px) and (orientation: landscape) {
    .myshift-cell-info {
        flex-direction: column !important;
        align-items: center !important;
        flex: 1;
        justify-content: center !important;
    }
    .myshift-cell-time {
        font-size: 0.75rem !important;
        white-space: nowrap;
        text-align: center !important;
        order: -1;
    }
    .myshift-cell-detail {
        font-size: 0.5625rem !important;
        text-align: center !important;
    }
    .myshift-cell-duration { display: none; }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px) {
    html { scroll-padding-top: calc(50px + var(--sim-banner-h, 0px)); }
    .content { padding: 6px; padding-bottom: calc(6px + var(--publish-bar-h, 0px)); }
    .header { padding: 0 8px; height: 46px; }
    .publish-timer-bar { padding: 0 8px env(safe-area-inset-bottom, 0px); }
    .header-title { font-size: 0.625rem; letter-spacing: 0; }
    .header-day-today {
        height: 30px;
        padding: 0 10px;
        font-size: 0.6875rem;
    }
    .day-nav-dayname { font-size: 1.18rem; }
    .day-nav-date { font-size: 0.95rem; }
    
    /* Calendar header */
    .calendar-header { padding: 8px; gap: 6px; }
    .calendar-nav-btn { width: 28px; height: 28px; font-size: 0.625rem; }
    .calendar-title { font-size: 0.875rem; }
    
    /* My shifts stats: even smaller */
    .myshifts-stats .card > div:first-child {
        font-size: 1rem !important;
    }
    
    /* My shifts calendar: minimal */
    .myshifts-calendar-grid {
        gap: 2px !important;
    }
    .myshift-cell {
        min-height: 42px !important;
        padding: 2px !important;
        border-width: 1.5px !important;
    }
    .myshift-cell-empty {
        min-height: 42px !important;
    }
    .myshift-cell-day {
        font-size: 0.6875rem !important;
    }
    .myshift-cell-time {
        font-size: 0.625rem !important;
    }
    .myshifts-cal-6col .myshift-cell-time {
        font-size: 0.625rem !important;
    }
    .myshifts-cal-6col .myshift-cell-detail {
        font-size: 0.5rem !important;
    }
    .myshift-header {
        padding: 1px !important;
        font-size: 0.5rem !important;
    }
    .myshifts-cal-card { padding: 3px !important; }
    
    /* My shifts table */
    .myshifts-table-card .table { font-size: 0.75rem; }
    .myshifts-table-card .table th,
    .myshifts-table-card .table td { padding: 0.375rem 0.25rem; }
    
    /* Admin dashboard */
    .dashboard-card { padding: 0.375rem 0.5rem; }
    .dashboard-card-label { font-size: 0.5rem; }
    .dashboard-card-value { font-size: 1rem; }
    .dashboard-card-sub { font-size: 0.5625rem; }
    .dashboard-alert { font-size: 0.6875rem; padding: 0.25rem 0.375rem; }
    
    /* Admin calendar */
    .calendar-grid {
        grid-template-columns: 26px repeat(7, 1fr) !important;
    }
    .calendar-grid.hide-sunday {
        grid-template-columns: 26px repeat(5, 1fr) 4px 1fr !important;
    }
    .calendar-day { min-height: 46px; padding: 2px; }
    .calendar-day-number { font-size: 0.625rem; }
    .calendar-day.holiday {
        box-shadow: none;
    }
    .calendar-day.today {
        box-shadow: inset 0 0 0 2px var(--info);
    }
    .calendar-day.today.holiday {
        box-shadow: inset 0 0 0 2px var(--info);
    }
    .calendar-day.today .calendar-day-number {
        display: block;
        min-width: 0;
        height: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text-primary);
        margin-bottom: 1px;
    }
    .calendar-day.today .coverage-indicator {
        margin-top: 5px;
    }
    .calendar-day .coverage-indicator {
        justify-content: center;
        width: 100%;
        margin-top: 5px;
    }
    .calendar-day-header { padding: 4px 1px; font-size: 0.5rem; }
    .week-number { padding: 4px 1px; font-size: 0.5rem; }
    .coverage-dot { width: 6px; height: 6px; }
    .holiday-name {
        font-size: 0.5625rem;
        margin-top: 0.4rem;
        margin-left: 0.35rem;
        line-height: 1.1;
    }
    
    /* Preferences */
    .pref-calendar {
        grid-template-columns: repeat(5, 1fr) 4px repeat(1, 1fr) !important;
        gap: 2px !important;
    }
    .pref-day { min-height: 44px; padding: 3px; }
    .pref-day-header { font-size: 0.5625rem; padding: 4px 2px; }
    .pref-day-num { font-size: 0.75rem; }
    .pref-day-time { font-size: 0.5rem; }
    .prefs-card { padding: 4px; }
    
    /* Cards & alerts */
    .card { border-radius: var(--radius-md); }
    .alert { font-size: 0.8125rem; padding: 0.5rem; }
    
    /* Vacation */
    .vacation-months-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
    .vacation-month { padding: 3px; }
    .vac-day { padding: 4px 0; font-size: 0.625rem; }
    .vac-hdr { font-size: 0.5rem; }
    
    /* Modals */
    .modal { width: 98vw; max-width: 98vw; max-height: 94vh; max-height: 94dvh; }
    .modal-overlay { padding: 4px; align-items: flex-start; padding-top: 3vh; }
    .modal-header { padding: 16px 52px 10px 12px; min-height: 52px; }
    .modal-body { padding: 0 10px 10px; font-size: 0.8125rem; }
    .modal-body .form-group { margin-bottom: 0.5rem; }
    .modal-body .form-label { margin-bottom: 0.125rem; font-size: 0.75rem; }
    .modal-body .form-control { padding: 6px 8px; font-size: 0.8125rem; }
    .modal-body .alert { padding: 0.375rem 0.5rem; margin-bottom: 0.5rem; font-size: 0.75rem; }
    .modal-footer { padding: 8px 12px; }
    .modal-title { font-size: 0.9375rem; }
    .modal-close { width: 44px; height: 44px; top: 4px; right: 4px; font-size: 1.5rem; border-radius: var(--radius-md); }
    .theme-toggle-btn { width: 32px; height: 32px; }
}

/* === LOMA-RIVI (Vacation Row) — Gantt === */
.vacation-row-wrapper.vacation-gantt {
    display: grid;
    grid-template-columns: minmax(140px, 180px) repeat(7, 1fr);
    margin-top: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.vacation-row-wrapper.vacation-gantt.hide-sunday {
    grid-template-columns: minmax(140px, 180px) repeat(5, 1fr) 32px 1fr;
}
.vacation-gantt-label {
    grid-column: 1;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 121, 107, 0.08);
    border-right: 1px solid var(--border-color);
    border-left: 4px solid #00796B;
    font-weight: 700;
    font-size: 0.9375rem;
    color: #00796B;
    white-space: nowrap;
}
[data-theme="dark"] .vacation-gantt-label {
    background: rgba(0, 121, 107, 0.06);
}
.vacation-gantt-area {
    grid-column: 2 / -1;
    position: relative;
    min-height: 38px;
    overflow: hidden;
}
.vacation-gantt-area.drag-over {
    background: var(--accent-muted);
}
.vacation-gantt-dayline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}
.vacation-gantt-bar {
    position: absolute;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 1;
    transition: opacity 0.15s ease;
    user-select: none;
    overflow: visible;
}
.vacation-gantt-bar:hover {
    filter: brightness(1.1);
}
/* Auditointi 22.9. FU-9a: vaalealla palkilla (keltainen, valkoinen) valkoinen nimi tummalla
   läpikuultavalla pohjalla jäi alle 3:1 — tumma nimi vaalealla pohjalla */
.vacation-gantt-bar.vaalea-palkki .vacation-gantt-name {
    color: #111111;
    background: rgba(255, 255, 255, 0.5);
    text-shadow: none;
}
.vacation-gantt-name {
    font-size: 0.625rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 6px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.35);
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 6px;
    flex: 0 1 auto;
    text-align: center;
    pointer-events: none;
}
.vacation-gantt-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.vacation-gantt-handle.handle-left { left: -5px; }
.vacation-gantt-handle.handle-right { right: -5px; }
.vacation-gantt-bar:hover .vacation-gantt-handle {
    opacity: 0.7;
}
.vacation-gantt-handle::after {
    content: '';
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background: rgba(255,255,255,0.7);
}
.vacation-gantt-bar.vacation-wish-bar {
    opacity: 0.7;
    border: 1px dashed currentColor;
    background: transparent !important;
    cursor: pointer;
}
.vacation-gantt-bar.vacation-wish-bar:hover {
    opacity: 1;
    background: rgba(255,255,255,0.08) !important;
    filter: none;
}
/* Auditointi 22.9. FU-9a: toivepalkki on läpinäkyvä, joten vaaleassa teemassa valkoinen nimi
   tummalla läpikuultavalla pohjalla jäi 1.9:1:een — teeman tekstiväri vaalealla pohjalla */
[data-theme="light"] .vacation-gantt-bar.vacation-wish-bar .vacation-gantt-name {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.6);
    text-shadow: none;
}
@media (max-width: 768px) {
    .vacation-row-wrapper.vacation-gantt {
        display: none !important;
    }
}

.day-swipe-preview {
    min-height: 60vh;
}

.day-swipe-loading {
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-muted);
    text-align: center;
    font-size: 0.875rem;
}

.period-swipe-preview {
    min-height: 55vh;
}

.period-swipe-loading {
    margin: 0.75rem;
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-muted);
    text-align: center;
    font-size: 0.875rem;
}

.content.is-period-swiping {
    position: relative;
}

.period-swipe-adjacent {
    position: absolute;
    z-index: 40;
    background: var(--bg-base);
    pointer-events: none;
    will-change: transform;
}

.period-swipe-adjacent.is-committing {
    z-index: 60;
}

.period-swipe-current {
    position: relative;
    z-index: 41;
    will-change: transform;
}

.period-swipe-adjacent.is-settling,
.period-swipe-current.is-settling {
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =============================================
   Day View (v1.9.5.1)
   ============================================= */
.day-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    touch-action: pan-y manipulation;
}

.content.is-day-swiping {
    position: relative;
}

.day-swipe-adjacent {
    position: absolute;
    z-index: 40;
    background: var(--bg-base);
    pointer-events: none;
    will-change: transform;
}

.day-swipe-adjacent.is-committing {
    z-index: 60;
}

.day-view.is-day-swipe-current {
    position: relative;
    z-index: 41;
    will-change: transform;
}

.day-swipe-adjacent.is-settling,
.day-view.is-day-swipe-current.is-settling {
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.day-main {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

/* Navigaatio-otsikko */
.day-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    gap: 0.5rem;
    user-select: none;
}
.day-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
    z-index: 1;
}
.day-nav-btn:hover { background: var(--accent-muted); }
.day-nav-btn:active { background: var(--accent); color: white; }
.day-nav-relock {
    width: 36px;
    height: 32px;
    border: 1px solid var(--error);
    background: rgba(239, 68, 68, 0.08);
    color: var(--error);
}
.day-nav-relock:hover { background: rgba(239, 68, 68, 0.18); }
/* .icon-inline hoitaa teeman: tummassa valkoinen, vaaleassa musta */
.day-nav-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 0;
}
.day-nav-dayname {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    text-align: center;
}
.day-nav-date {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Myöhäinen mobiiliohitus: päivävalinnan perustyyli on määritelty media-osioiden jälkeen. */
@media (max-width: 768px) {
    .day-nav-title {
        flex-direction: row;
        gap: 1.1rem;
        white-space: nowrap;
    }

    .day-nav-dayname {
        font-size: 1.26rem;
        line-height: 1;
    }

    .day-nav-date {
        font-size: 1.26rem;
        line-height: 1;
        font-weight: 700;
    }
}

@media (max-width: 480px) {
    .day-nav-title { gap: 0.9rem; }
    .day-nav-dayname { font-size: 1.16rem; }
    .day-nav-date { font-size: 1.16rem; }
}

/* Info-badge */
.day-info-badge {
    text-align: center;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
}
.day-info-badge.holiday {
    background: rgba(255, 152, 0, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(255, 152, 0, 0.25);
}
.day-info-badge.closed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Myymälä-osiot */
.day-stores {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.day-store {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.day-store.swipe-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-muted), inset 0 0 12px color-mix(in srgb, var(--accent) 6%, transparent);
}
.day-store.drop-target {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-muted);
}

/* Myymälän otsikko */
.day-store-hdr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}
.day-store-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.day-store-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
    flex: 1;
}
.day-store-ok {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    border-radius: 10px;
    padding: 0.125rem 0.5rem;
    letter-spacing: 0.03em;
}
.day-store-add {
    width: 28px;
    height: 28px;
    border: 1.5px dashed var(--border-color);
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.day-store-add:hover {
    border-color: var(--accent);
    color: var(--accent-text);
    background: var(--accent-muted);
}
.day-store-add:disabled {
    cursor: default;
    pointer-events: none;
    opacity: 1;
}

/* Vuorokortit */
.day-store-shifts {
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 2.5rem;
}

.day-shift-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    cursor: grab;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.15s;
    position: relative;
    overflow: hidden;
}
.day-shift-card:active { cursor: grabbing; }
.day-shift-card.dragging { opacity: 0.3; transform: scale(0.97); }
.day-drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    border-radius: var(--radius-md);
    transform: scale(1.04);
}
.day-shift-card.absence {
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        repeating-linear-gradient(
            45deg,
            var(--error) 0px, var(--error) 4px,
            var(--user-color, #888) 4px, var(--user-color, #888) 8px
        ) border-box;
}
.day-shift-card.loma { border-color: rgba(255, 152, 0, 0.3); background: rgba(255, 152, 0, 0.05); }
.day-shift-card.shift-swap-target {
    border-color: var(--accent);
    background: var(--accent-muted);
    box-shadow: 0 0 0 2px var(--accent-muted);
}

.day-shift-color {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
}
.day-shift-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    overflow: hidden;
}
.day-shift-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
}
.day-shift-time {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.day-shift-empty {
    text-align: center;
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Template-slot (täyttämätön vuoropohja, raahauksen kohde + klikkaus) */
.day-shift-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 4px;
    background: var(--bg-surface);
    border: 1.5px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-user-select: none;
    user-select: none;
}
.day-shift-slot:first-child { margin-top: 0; }
.day-shift-slot:hover {
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--text-primary);
}
.day-shift-slot.slot-drop-target {
    background: var(--accent-muted);
    border-color: var(--accent);
    border-style: solid;
    color: var(--accent-text);
}
.day-slot-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.day-shift-slot:hover .day-slot-plus {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.day-slot-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-primary);
}
.day-slot-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Loma-osio */
.day-loma-section {
    background: var(--bg-card);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.day-store-hdr.loma {
    background: rgba(255, 152, 0, 0.06);
    border-bottom-color: rgba(255, 152, 0, 0.15);
}

/* Desktop-only elementit — piilotettu mobiilissa */
.day-sidebar { display: none; }

/* Oikean puolen nappiryhmä */
.day-nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}
.day-nav-today {
    height: 36px;
    padding: 0 0.85rem;
    flex-shrink: 0;
}

/* Arkipyhän punainen reunus koko päiväalueelle */
.day-view.is-holiday .day-main {
    border: 2px solid var(--error);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    background: rgba(239, 68, 68, 0.03);
}

/* Iso lukko-overlay sulkee päivän */
.day-lock-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.day-lock-overlay:hover {
    background: var(--bg-surface);
    border-color: var(--accent);
    color: var(--text-primary);
}
.day-lock-icon {
    width: 64px;
    height: 64px;
    opacity: 0.5;
}
.day-lock-overlay:hover .day-lock-icon { opacity: 0.85; }
.day-lock-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}
.day-lock-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Desktop-grid: päänäkymä + sivupalkki */
@media (min-width: 1024px) {
    .day-shift-card { cursor: grab; }

    .day-desktop-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 1rem;
        align-items: start;
    }
    /* Sivupalkki */
    .day-sidebar {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        position: sticky;
        /* Auditointi 22.9. FK-3: julkaisun ajastinpalkin (--publish-bar-h) alle */
        top: calc(76px + var(--publish-bar-h, 0px));
        max-height: calc(100vh - 90px - var(--publish-bar-h, 0px));
        overflow-y: auto;
    }
    .day-sidebar-section {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 0.75rem;
    }
    .day-sidebar-section h4 {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
    }
    .day-sidebar-section .sidebar-hint {
        font-size: 0.6875rem;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }
    .day-sidebar-empty {
        font-size: 0.75rem;
        color: var(--text-muted);
        font-style: italic;
        text-align: center;
        padding: 0.5rem 0;
    }
    .day-emp-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 6px 10px;
        margin-bottom: 4px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        cursor: grab;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-primary);
        position: relative;
        border-left-width: 3px;
    }
    .day-emp-btn:hover { background: var(--bg-card-hover); }
    .day-emp-btn:active { cursor: grabbing; }
    .day-emp-btn.dragging { opacity: 0.4; }
    .day-emp-btn .emp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .day-emp-btn .emp-limit {
        font-size: 0.625rem;
        color: var(--text-muted);
        white-space: nowrap;
    }
    .day-emp-btn.has-limit { border-color: rgba(245, 158, 11, 0.3); }
    .day-emp-btn.has-limit .emp-limit { color: #f59e0b; }

    /* Tilastot */
    .day-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .day-stat {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: 0.5rem;
        text-align: center;
    }
    .day-stat-val {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.1;
    }
    .day-stat-lbl {
        font-size: 0.625rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-top: 2px;
    }

    .day-nav { max-width: 100%; }
}

/* Muutosloki */
.day-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.day-log-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.day-log-icon { font-size: 0.875rem; flex-shrink: 0; width: 1.25rem; text-align: center; }
.day-log-text { flex: 1; font-size: 0.875rem; color: var(--text-primary); }
.day-log-time { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
/* Auditointi 22.9. DE-2: rivi, johon Kumoa viimeisin kohdistuu */
.day-log-entry.undo-target { background: var(--warning-muted); box-shadow: inset 3px 0 0 var(--warning); }
.day-log-undo-hint { display: inline-block; margin-left: 0.35rem; font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.day-log-date { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }

/* Auditointi 22.9. FU-9i: vähemmän liikettä pyytäneille ei animaatioita eikä siirtymiä
   (pyyhkäisy, toastit, modaalin skaalaus, kortit). Latausosoittimet pyörivät yhä, koska ne
   kertovat, että jotain on kesken. Koodi ei odota transitionend/animationend-tapahtumia. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .spinner, .publish-spinner {
        animation-duration: 1.2s !important;
        animation-iteration-count: infinite !important;
    }
}

/* Auditointi 22.9. FU-9i: tulostus (Ctrl+P) ilman sivupalkkia ja yläpalkkia koko sivun
   levyisenä. Aiemmin sivupalkki tulostui ja sisällön oikea reuna leikkautui. */
@media print {
    .sidebar, .sidebar-backdrop, .header, .publish-timer-bar, #simulationBanner,
    .toast-container, .shift-trash-zone, .employee-panel-wrap, .wizard-overlay {
        display: none !important;
    }
    html, body, .main-content, .content { overflow: visible !important; }
    .main-content { margin-left: 0 !important; min-height: 0; }
    .content { padding: 0; }
    .week-view-layout { display: block !important; }
    .week-scroll, .desktop-only, #hoursTable, #weekHoursTable { overflow: visible !important; }
    .card, .calendar-container { break-inside: avoid-page; }
}