/* Stafferi Combined CSS - Generated automatically */
/* This file combines all CSS files with duplicates removed */
/* Last modified: 2025 */

@charset "UTF-8";

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* Ensure datepicker appears above all other elements */
#ui-datepicker-div {
    z-index: 10000 !important;
}

.topnav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(135deg, var(--header-bg-primary) 0%, var(--header-bg-secondary) 100%);
    position: relative;
    z-index: 1001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: var(--header-height);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--header-border);
}

/* When .topnav is combined with .header2, inherit fixed positioning */
.header2.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: var(--header-height);
    height: auto;
}

@media screen and (min-width: 901px) {
    .header2.topnav {
        height: var(--header-height);
    }
}

.topnav a:not(.mobile-menu-toggle), .topnav .dropbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--header-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-align: center;
    border-right: 1px solid var(--header-border);
    height: var(--header-height);
    line-height: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.topnav .active {
    background: var(--dropdown-active);
    color: white;
    font-weight: 600;
}

.topnav .active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 12px);
    height: 3px;
    background: linear-gradient(90deg, var(--header-accent), var(--header-accent-hover));
    border-radius: 3px 3px 0 0;
}

.topnav a:not(.mobile-menu-toggle):hover, .topnav .dropbtn:hover {
    background: var(--dropdown-hover);
    color: var(--header-accent-hover);
}

.topnav a:not(.mobile-menu-toggle):focus-visible, .topnav .dropbtn:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: -2px;
    background: var(--dropdown-hover);
}

.dropdown {
position: relative;
    z-index: 1002;
}

.dropdown .dropbtn {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    margin: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    gap: 3px;
}

.dropdown .dropbtn::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 2px;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.dropdown:hover .dropbtn::after {
    opacity: 1;
    transform: rotate(180deg);
}

.dropdown-content {
    display: none;
    position: absolute;
    background: var(--dropdown-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    min-width: 190px;
    box-shadow: var(--dropdown-shadow);
    z-index: 10002;
    top: calc(100% + 4px);
    left: 0;
    font-size: 13px;
    border-radius: var(--dropdown-radius);
    border: 1px solid var(--header-border);
    padding: 4px 0;
    overflow: visible;
}

/* Prevent hover "gap" between top-level menu item and its dropdown
   (otherwise the menu closes when moving mouse into the dropdown). */
.dropdown-content::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
    background: transparent;
    pointer-events: auto;
}

/* Dropdown animation */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown:hover > .dropdown-content,
.dropdown.active > .dropdown-content {
    animation: dropdownFadeIn 0.2s ease forwards;
}

.dropdown-content a {
    white-space: nowrap;
    word-break: break-word;
    height: var(--dropdown-item-height);
    min-height: var(--dropdown-item-height);
    line-height: 1.4;
    padding: 7px 12px;
    margin: 1px 4px;
    text-align: left;
    font-size: 13px;
    font-weight: 450;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    color: var(--header-text);
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

/* Compact dropdowns on short viewports so items fit without getting "stuck" */
@media (max-height: 800px) {
    :root {
        --dropdown-item-height: 34px;
    }

    .dropdown-content {
        max-height: calc(100vh - var(--header-height) - 16px);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    .dropdown-content a {
        padding: 6px 12px;
        margin: 1px 6px;
        font-size: 12px;
        line-height: 1.25;
    }
}

.dropdown-content a:hover {
    background: var(--dropdown-hover);
    color: var(--header-accent-hover);
    border-left-color: var(--header-accent);
}

.dropdown-content a:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: -2px;
    background: var(--dropdown-hover);
}

/* Dropdown section labels for grouped menu items */
.dropdown-section-label {
    display: block;
    padding: 6px 14px 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    user-select: none;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dropdown-section-label:first-child {
    margin-top: 0;
    border-top: none;
}

/* ─── Nested flyout submenus inside dropdowns ─────────────────────────────── */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px 7px 14px;
    color: var(--header-text, #fff);
    font-size: 13px;
    font-weight: 500;
    cursor: default;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    transition: background 0.15s;
}

.dropdown-submenu-trigger:hover {
    background: var(--dropdown-hover, rgba(255, 255, 255, 0.12));
}

.submenu-arrow {
    margin-left: 10px;
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.dropdown-submenu-trigger:hover .submenu-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.dropdown-submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: -4px;
    min-width: 210px;
    background: var(--header-bg, #2c3e50);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 6px 16px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    z-index: 9999;
    padding: 4px 0;
}

.dropdown-submenu:hover > .dropdown-submenu-content {
    display: block;
}

/* Bridge gap between trigger and submenu so hover doesn't drop */
.dropdown-submenu-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 8px;
    height: 100%;
}

/* Flyout direction is handled by JS (see menu-search.js) which detects viewport
   overflow on hover and flips the panel to the left when needed. */

/* On mobile (hamburger mode), nested submenus expand inline instead of flying out */
@media screen and (max-width: 900px) {
    .topnav.responsive .dropdown-submenu {
        width: 100%;
    }

    .topnav.responsive .dropdown-submenu-trigger {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 20px 14px 40px;
        font-size: 14px;
        font-weight: 500;
        min-height: 48px;
        cursor: pointer;
        white-space: normal;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        border-left: 3px solid rgba(255, 255, 255, 0.15);
        background: rgba(0, 0, 0, 0.1);
    }

    .topnav.responsive .dropdown-submenu-trigger:hover,
    .topnav.responsive .dropdown-submenu.open > .dropdown-submenu-trigger {
        background: var(--dropdown-hover);
        border-left-color: var(--header-accent);
    }

    .topnav.responsive .dropdown-submenu-content {
        position: static !important;
        display: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        background: rgba(0, 0, 0, 0.18);
        width: 100%;
        min-width: 0;
    }

    .topnav.responsive .dropdown-submenu.open > .dropdown-submenu-content {
        display: block;
    }

    /* Deeper indent for links inside open submenus */
    .topnav.responsive .dropdown-submenu-content a {
        padding-left: 56px !important;
        min-height: 46px;
        font-size: 13px;
    }

    /* Show arrow rotated to indicate open/closed state */
    .topnav.responsive .dropdown-submenu-trigger .submenu-arrow {
        display: inline-block;
        opacity: 0.65;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .topnav.responsive .dropdown-submenu.open > .dropdown-submenu-trigger .submenu-arrow {
        transform: rotate(90deg);
        opacity: 1;
    }
}

/* Menu search trigger in header */
.menu-search-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--header-text);
    cursor: pointer;
    border: none;
    background: transparent;
    height: var(--header-height);
    transition: all 0.2s ease;
    gap: 6px;
    font-size: 12px;
    font-family: inherit;
    border-right: 1px solid var(--header-border);
}

.menu-search-trigger:hover {
    background: var(--dropdown-hover);
    color: var(--header-accent-hover);
}

.menu-search-trigger kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* Command palette / menu search overlay */
.menu-search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    justify-content: center;
    padding-top: 15vh;
}

.menu-search-overlay.active {
    display: flex;
}

.menu-search-dialog {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    color: #f1f5f9;
    animation: menuSearchSlideIn 0.15s ease-out;
}

@keyframes menuSearchSlideIn {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

.menu-search-input-wrapper {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 10px;
}

.menu-search-input-wrapper i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    flex-shrink: 0;
}

.menu-search-input,
.menu-search-input:hover,
.menu-search-input:focus {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #f1f5f9 !important;
    font-size: 15px;
    font-family: inherit;
    padding: 4px 0;
    width: auto;
    max-width: none;
}

.menu-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.menu-search-results {
    overflow-y: auto;
    padding: 6px;
    max-height: calc(60vh - 60px);
}

.menu-search-results:empty::after {
    content: attr(data-empty-text);
    display: block;
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}

.menu-search-result {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: #f1f5f9;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.1s ease;
    gap: 10px;
}

.menu-search-result:hover,
.menu-search-result.active {
    background: rgba(255, 255, 255, 0.08);
}

.menu-search-result-label {
    flex: 1;
    font-size: 14px;
    font-weight: 450;
}

.menu-search-result-section {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.menu-search-result-icon {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    flex-shrink: 0;
}

/* Unified search section headers */
.menu-search-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2px;
}

.menu-search-section-header:first-child {
    border-top: none;
    margin-top: 0;
}

.menu-search-section-header i {
    font-size: 12px;
}

.menu-search-no-results {
    padding: 20px 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

/* Mobile adjustments for menu search */
@media (max-width: 900px) {
    .menu-search-trigger kbd {
        display: none;
    }

    .menu-search-overlay {
        padding-top: 5vh;
    }

    .menu-search-dialog {
        max-width: 95%;
        max-height: 70vh;
    }

    .menu-search-result {
        padding: 12px 14px;
        min-height: 48px;
    }
}

.dropdown-content .dropdown {
position: relative;
}

.dropdown-content .dropdown > a {
position: relative;
}

.dropdown-content .dropdown > a:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    margin-left: auto;
    padding-left: 8px;
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.dropdown-content .dropdown:hover > a:after {
    opacity: 1;
    transform: translateX(2px);
}

.dropdown-content .dropdown-content {
    top: -6px;
    left: calc(100% + 4px);
    min-width: 200px;
    z-index: 10003;
}

/* Prevent hover "gap" between submenu parent item and submenu */
.dropdown-content .dropdown-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 8px;
    background: transparent;
    pointer-events: auto;
}

.dropdown-content .dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover > .dropdown-content {
display: block;
}

.topnav .dropdown:hover > .dropdown-content {
display: block;
}

.spacer {
flex: 1;
}

.topnav .icon {
display: none;
}

/* Mobile menu toggle - hidden on desktop, shown on mobile via media query */
.topnav .mobile-menu-toggle,
.topnav .icon.mobile-menu-toggle,
a.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-right: none;
}

.topnav .spacer {
flex: 1;
    min-width: 20px;
}

@media screen and (max-width: 900px) {
.fieldset-row {
        flex-direction: column;
    }

    .perusfieldset {
        flex: 2 1 100%;
    }

    .stafferi-small-stack {
        display: flex;
        flex-direction: column;
        flex: 2 1 100%;
        align-self: flex-end;
    }
}

.shift-section {
min-width: auto;
    max-width: 95vw;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin: 0 auto 15px;
    border: 1px solid #d4d4d4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    transition: box-shadow 0.3s, background-color 0.3s;
}

.shift-header {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    letter-spacing: 0.3px;
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.shift-header::before {
content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.shift-header:hover::before {
left: 100%;
}

.shift-header:hover {
transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
    border-color: #adb5bd;
}

.shift-header a {
color: #0066cc !important;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.shift-header a:hover {
color: #004499 !important;
    background-color: rgba(0, 102, 204, 0.1);
    text-decoration: underline;
}

.shift-header a:visited {
color: #663399 !important;
}

.planner_fieldset {
min-width: auto;
    max-width: 95vw;
    background-color: #f9f9f9; 
    border-radius: 8px;        
    margin: 0 auto 15px;       
    border: 1px solid #d4d4d4; 
    padding: 15px 20px;        
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    text-align: left;
    transition: box-shadow 0.3s, background-color 0.3s;
}

.planner_fieldset legend, .perusfieldset legend, .innerfieldset legend, .holiday-fieldset legend {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    letter-spacing: 0.3px;
    
    
    margin-top: 12px;
    margin-bottom: 8px;
    padding: 8px 20px;
    
    
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.planner_fieldset legend::before, .perusfieldset legend::before, .innerfieldset legend::before, .holiday-fieldset legend::before {
content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.planner_fieldset legend:hover::before, .perusfieldset legend:hover::before, .innerfieldset legend:hover::before, .holiday-fieldset legend:hover::before {
left: 100%;
}

.planner_fieldset legend:hover, .perusfieldset legend:hover, .innerfieldset legend:hover, .holiday-fieldset legend:hover {
transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
    border-color: #adb5bd;
}

.planner_fieldset legend a, .perusfieldset legend a, .innerfieldset legend a, .holiday-fieldset legend a {
    color: #1a5fb4;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.planner_fieldset legend a:hover, .perusfieldset legend a:hover, .innerfieldset legend a:hover, .holiday-fieldset legend a:hover {
    color: #0d47a1 !important;
    background-color: rgba(26, 95, 180, 0.12);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .planner-nav-text {
        display: none;
    }
}

.perusfieldset, .innerfieldset {
width: 98%;
    min-width: auto;
    max-width: 95vw;
    box-sizing: border-box;
    background-color: #f9f9f9; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    border: 1px solid #d4d4d4; 
    padding: 15px 20px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    text-align: left;
    transition: box-shadow 0.3s, background-color 0.3s; 
    overflow-x: auto;
    margin-left: auto;
    margin-right: auto;
}

.innerfieldset {
border-radius: 0px;
    display: block;
    float: left;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 1px solid #bababa;
    text-align: left;
    margin-left: 5px;
}

@media screen and (max-width: 600px) {
body {
        font-size: 12px; 
    }
}

.help-fieldsets-grid {
display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 20px;
    justify-content: flex-start;
    align-items: flex-start;
}

.help-fieldsets-grid .perusfieldset {
flex: 1 1 100%; 
    min-width: 300px; 
    margin-bottom: 0; 
    margin-left: 0;
    margin-right: 0;
}

/* Mobile: prevent grid min-width from forcing page-level overflow */
@media screen and (max-width: 480px) {
    .help-fieldsets-grid {
        margin: 12px 10px;
        gap: 12px;
    }

    .help-fieldsets-grid .perusfieldset {
        min-width: 0;
        width: 100%;
    }
}

@media screen and (min-width: 1921px) {
.help-fieldsets-grid .perusfieldset {
        flex: 1 1 calc(50% - 10px); 
    }
}

@media screen and (max-width: 768px) {
.alert-box {
        padding: 15px;
        margin: 15px 10px;
    }
    
    .alert-box-content {
        gap: 10px;
    }
    
    .alert-box-icon {
        font-size: 20px;
    }
    
    .alert-box-title {
        font-size: 14px;
    }
    
    .alert-box-text,
    .alert-box-list {
        font-size: 13px;
    }
    
    .alert-box-section {
        padding: 15px;
    }
}

@media screen and (max-width: 480px) {
.alert-box {
        padding: 12px;
        margin: 10px 5px;
    }
    
    .alert-box-title {
        font-size: 13px;
    }
    
    .alert-box-text,
    .alert-box-list {
        font-size: 12px;
        line-height: 1.5;
    }
}

input[type=submit], .submitbutton {
padding:5px 15px; 
	margin-top: 2px;
    background:#CCDAFF; 
    border:0 none;
    cursor:pointer;
	color: black;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

:root {
    /* Modernized Header Variables */
    --header-height: 52px;
    --header-bg-primary: #1a1f2e;
    --header-bg-secondary: #252d3d;
    --header-accent: #3b82f6;
    --header-accent-hover: #60a5fa;
    --header-text: #f1f5f9;
    --header-text-muted: #94a3b8;
    --header-border: rgba(255, 255, 255, 0.08);
    
    /* Dropdown Variables */
    --dropdown-bg: rgba(26, 31, 46, 0.98);
    --dropdown-hover: rgba(59, 130, 246, 0.12);
    --dropdown-active: rgba(59, 130, 246, 0.2);
    --dropdown-radius: 10px;
    --dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.2);
    --dropdown-item-height: 34px;
    
    /* Legacy variables (kept for compatibility) */
    --header-bg: #1a1f2e;
    --header-shadow: rgba(0, 0, 0, 0.15);
    --highlight-red: #ff4d4f;
    --nav-link-color: #f1f5f9;
    --nav-link-hover: #60a5fa;
    --person-search-bg: #252d3d;
    --person-search-border: #3d4a5f;
    --person-search-text: #f1f5f9;
    --person-search-placeholder: #94a3b8;
    --person-search-focus: #3b82f6;
    --person-search-hover: #2d3748;
    --person-search-selected: #3d5a7a;
    --person-search-shadow: rgba(0, 0, 0, 0.25);
    --person-search-error: #ef4444;
}

.no-print {
display: block !important;
}

.yes-print {
display: none !important;
}

@media print {
.no-print, .no-print * {
        display: none !important;
    }
}

.header2 {
    /* Positioning properties - width/left handled by .topnav */
    position: fixed;
    top: 0;
    z-index: 1000;
    transform: translateZ(0);
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    height: var(--header-height);
}

.dropdown li {
display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 599px) {
#header .container {
        width: 95%;
    }
    #header h1 {
        padding-left: 1rem;
    }
    #nav {
        position: absolute;
        top: 60px;
        width: 100%;
        background: var(--header-bg);
    }
    #nav::before {
        content: '\2630';
        position: absolute;
        right: 1rem;
        top: -50px;
        line-height: 40px;
        cursor: pointer;
    }
    #nav ul {
        display: flex;
        flex-direction: column;
        margin: 0;
        background: #222;
    }
    #nav ul li {
        width: 100%;
    }
    #nav ul li a {
        display: block;
        padding: 0.5rem 1rem;
        line-height: 1.5;
        border-top: 1px solid #333;
        color: #fff;
        text-decoration: none;
    }
}

#develop {
margin: 0.5rem auto;
    max-width: 25%;
    background-color: var(--highlight-red);
    color: #fff;
    border: 1px dashed #fff;
    padding: 0.5rem;
    text-align: center;
    font-weight: bold;
}

.filters-wrapper {
background: #fafbfc !important;
    border: 1px solid #e1e5e9 !important;
    padding: 12px !important;
    margin: 8px 0 !important;
}

.filters-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e1e5e9;
}

.filters-title {
font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin: 0;
    padding: 0;
}

.filters-toggle-btn {
padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: #6b7280;
    transition: all 0.15s ease;
    z-index: 10;
    position: relative;
}

.filters-toggle-btn:hover {
background: #f9fafb;
    color: #374151;
    border-color: #9ca3af;
}

.filters-toggle-btn:active {
background: #e5e7eb;
    transform: translateY(1px);
}

#filters_form {
margin: 0;
    padding: 0;
}

.filters-container {
display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    width: 100%;
}

.filter-item {
display: inline-flex !important;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    white-space: nowrap;
    flex-direction: row;
}

.filter-item input[type="text"] {
padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    color: #374151;
    width: 90px;
    height: 28px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.filter-item input[type="text"]:focus {
outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.filter-item select {
padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    color: #374151;
    min-width: 120px;
    max-width: 180px;
    height: 28px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.filter-item select:focus {
outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

#pvmdash {
margin: 0 4px;
    color: #6b7280;
    font-weight: 500;
    font-size: 14px;
}

.filter-item button {
padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    height: 28px;
    box-sizing: border-box;
}

.filter-item button.btn-primary {
background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.filter-item button.btn-primary:hover {
background: #2563eb;
    border-color: #2563eb;
}

.filter-item button.btn-secondary {
background: #fff;
    color: #6b7280;
    border-color: #d1d5db;
}

.filter-item button.btn-secondary:hover {
background: #f9fafb;
    color: #374151;
    border-color: #9ca3af;
}

@media (max-width: 1024px) {
    .header-section {
        padding: 0 10px;
    }
    
    .header-search {
        min-width: 180px;
        padding: 0 10px;
    }
    
    .header-link {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .topnav a, .topnav .dropbtn {
        padding: 0 10px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
.filters-container {
        flex-direction: column !important;
        align-items: stretch;
        gap: 6px;
    }
    
    .filter-item {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
    }
    
    .filter-item input[type="text"],
    .filter-item select {
        width: 100%;
        max-width: none;
    }
    
    .filter-item button {
        width: auto;
        min-width: 80px;
    }
}

.perusfieldset * {
box-sizing: border-box;
}

.filter-item + .filter-item {
margin-left: 0;
}

.header-section {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    height: var(--header-height);
    border-right: 1px solid var(--header-border);
    line-height: 1;
    gap: 6px;
}

.header-section.header-utilities {
    gap: 6px;
}

/* Layout toggle button in classic header */
.header-section .layout-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--header-text);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--header-border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: inherit;
}

.header-section .layout-toggle-btn:hover {
    background: var(--dropdown-hover);
    border-color: rgba(59, 130, 246, 0.35);
    color: var(--header-accent-hover);
}

.header-section:first-child {
    border-left: 1px solid var(--header-border);
}

.header-section:last-of-type {
    border-right: none;
}

.header-search {
    padding: 0 12px;
    min-width: 200px;
}

.header-link {
    color: var(--header-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    line-height: 1;
    vertical-align: middle;
    border-radius: 6px;
}

.header-link:hover {
    color: var(--header-accent-hover);
    text-decoration: none;
    background-color: var(--dropdown-hover);
}

.header-link:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
}

.info-icon {
    cursor: pointer;
    font-size: 18px;
    margin-left: 8px;
    color: var(--header-text);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--header-border);
}

.info-icon:hover {
    color: var(--header-accent-hover);
    background-color: var(--dropdown-hover);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

.info-icon i {
    font-size: 1.1rem;
}

.animate-pulse {
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Mobile menu toggle base styles (hidden on desktop) */
.mobile-menu-toggle {
    font-size: 1.4rem;
    padding: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--header-text);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--header-border);
    border-radius: 8px;
    cursor: pointer;
    margin-left: 8px;
    margin-right: auto;
    height: 44px;
    width: 44px;
    line-height: 1;
    text-decoration: none;
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    order: -1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mobile-menu-toggle:hover {
    color: var(--header-accent-hover);
    background: var(--dropdown-hover);
    border-color: rgba(59, 130, 246, 0.3);
    transform: scale(1.02);
}

.mobile-menu-toggle i {
    font-size: 1.5rem;
    vertical-align: middle;
    color: inherit;
    display: inline-block;
    line-height: 1;
}

.mobile-menu-toggle:hover i {
    color: inherit;
}

.mobile-menu-toggle.active {
    background: var(--dropdown-active);
    border-color: var(--header-accent);
    color: #ffffff;
}

/* Show text hamburger if icon font fails */
@supports not (font-family: "bootstrap-icons") {
    .mobile-menu-toggle i {
        display: none !important;
    }
    .mobile-menu-toggle::after {
        content: "☰";
        font-size: 1.6rem;
        color: inherit;
        font-family: Arial, sans-serif;
        line-height: 1;
    }
}

.topnav.responsive {
flex-wrap: wrap;
}

.header-section .dropdown {
    display: inline-block;
}

.header-section .dropbtn {
    border: none;
    background: transparent;
    color: var(--header-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    line-height: 1;
    height: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-section .dropbtn:hover {
    background-color: var(--dropdown-hover);
    color: var(--header-accent-hover);
}

.header-section .dropbtn:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
.calendar-button-grid {
        gap: 4px;
        padding: 6px;
    }

    .calendar-event-grid {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 6px;
    }

    .responsive-time-input {
        width: 80px;
        font-size: 14px;
        padding: 6px;
    }
}

@media (max-width: 480px) {
#henkilohaku,
    .person-search-input {
        width: 120px;
        font-size: 12px;
        margin-left: 12px;
    }

    .person-search-wrapper {
        padding-left: 12px;
    }

    .person-search-results {
        /* Avoid pushing dropdown outside viewport (can create horizontal scrolling) */
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        transform: none;
        box-sizing: border-box;
    }
}

/* Mobile Navigation Responsive Styles */
@media screen and (max-width: 900px) {
    /* Force hamburger menu to show */
    .topnav .mobile-menu-toggle,
    .topnav .icon.mobile-menu-toggle,
    a.icon.mobile-menu-toggle,
    a.mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1010;
        order: -1;
        margin-left: 12px;
        margin-right: auto;
        padding: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--header-border);
        border-radius: 10px;
        color: var(--header-text);
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    .topnav .mobile-menu-toggle:hover {
        background: var(--dropdown-hover);
        border-color: rgba(59, 130, 246, 0.3);
        color: var(--header-accent-hover);
        transform: scale(1.02);
    }

    .topnav .mobile-menu-toggle.active {
        background: var(--dropdown-active);
        border-color: var(--header-accent);
        color: white;
    }

    /* Hide menu items on mobile (except hamburger) */
    .topnav .dropdown,
    .topnav .header-section {
        display: none;
    }

    .topnav.responsive {
        align-items: stretch;
        padding-bottom: 16px;
        max-height: 100vh;
        overflow-y: auto;
        background: linear-gradient(180deg, var(--header-bg-primary) 0%, var(--header-bg-secondary) 100%);
    }

    .topnav.responsive .mobile-menu-toggle {
        display: inline-flex !important;
        align-self: flex-start;
        margin-left: 12px;
        margin-right: auto;
        margin-top: 6px;
        margin-bottom: 6px;
        visibility: visible !important;
        opacity: 1 !important;
        order: -1;
    }

    .topnav.responsive .dropdown,
    .topnav.responsive .header-section {
        display: flex !important;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--header-border);
        padding: 0;
        justify-content: flex-start;
    }

    .topnav.responsive .dropdown {
        flex-direction: column;
    }

    .topnav.responsive .dropdown .dropbtn,
    .topnav.responsive .header-link {
        width: 100%;
        text-align: left;
        padding: 16px 20px;
        border-radius: 0;
        height: auto;
        min-height: 52px;
        line-height: 1.5;
        font-size: 15px;
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    .topnav.responsive .dropdown .dropbtn::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid currentColor;
        margin-left: auto;
        opacity: 0.6;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    .topnav.responsive .dropdown.active .dropbtn::after {
        transform: rotate(-180deg);
        opacity: 1;
    }

    .topnav.responsive .dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.25);
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
        border: none;
        padding: 0;
    }

    .topnav.responsive .dropdown.active .dropdown-content {
        display: block;
        max-height: 1200px;
        padding: 8px 0;
    }

    .topnav.responsive .dropdown-content a {
        padding: 14px 28px;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        border-left: 3px solid transparent;
        border-radius: 0;
        font-size: 14px;
        min-height: 48px;
        transition: all 0.2s ease;
    }

    .topnav.responsive .dropdown-content a:hover {
        background: var(--dropdown-hover);
        border-left-color: var(--header-accent);
    }

    .topnav.responsive .dropdown-content a:last-child {
        border-bottom: none;
    }

    /* Mobile section labels - larger touch targets */
    .topnav.responsive .dropdown-section-label {
        padding: 10px 28px 4px;
        font-size: 11px;
        margin-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .topnav.responsive .dropdown-section-label:first-child {
        margin-top: 0;
        border-top: none;
    }

    /* ── Search trigger: full-width row, left-aligned, hide kbd shortcut ── */
    .topnav.responsive .menu-search-trigger {
        border-right: none;
        border-radius: 0;
        width: 100%;
        min-height: 52px;
        padding: 14px 20px;
        font-size: 14px;
        justify-content: flex-start;
        gap: 10px;
    }

    .topnav.responsive .menu-search-trigger kbd {
        display: none;
    }

    /* ── header-utilities: stack items vertically as full-width rows ────── */
    .topnav.responsive .header-utilities {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    .topnav.responsive .header-utilities .header-link,
    .topnav.responsive .header-utilities .info-icon,
    .topnav.responsive .header-utilities .layout-toggle-btn {
        width: 100%;
        box-sizing: border-box;
        min-height: 52px;
        height: auto;
        padding: 14px 20px;
        font-size: 14px;
        font-weight: 500;
        justify-content: flex-start;
        text-align: left;
        border-right: none;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        background: transparent;
        gap: 10px;
    }

    .topnav.responsive .header-utilities .header-link:last-child,
    .topnav.responsive .header-utilities .info-icon:last-child,
    .topnav.responsive .header-utilities .layout-toggle-btn:last-child {
        border-bottom: none;
    }

    .topnav.responsive .header-utilities .header-link:hover,
    .topnav.responsive .header-utilities .info-icon:hover,
    .topnav.responsive .header-utilities .layout-toggle-btn:hover {
        background: var(--dropdown-hover);
    }

    .topnav.responsive .dropdown-content .dropdown {
        border-bottom: none;
    }

    .topnav.responsive .dropdown-content .dropdown-content {
        padding-left: 20px;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .topnav.responsive .header-search {
        width: 100%;
        padding: 16px 20px;
    }

    .topnav.responsive #henkilohaku,
    .topnav.responsive .person-search-input {
        width: 100%;
        max-width: none;
        margin-left: 0;
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 10px;
    }

    .topnav.responsive .header-section:first-child {
        border-left: none;
    }

    .topnav.responsive .header-section:last-of-type {
        border-bottom: 1px solid var(--header-border);
    }

    .topnav.responsive .spacer {
        display: none;
    }

    /* ── Ensure submenu last-item border doesn't double-up ─────────────── */
    .topnav.responsive .dropdown-submenu-content a:last-child {
        border-bottom: none;
    }
}

.header-link:focus, .info-icon:focus, .mobile-menu-toggle:focus, .header-section .dropbtn:focus {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
    background-color: var(--dropdown-hover);
}

.header-link:focus-visible, .info-icon:focus-visible, .mobile-menu-toggle:focus-visible, .header-section .dropbtn:focus-visible {
    outline: 2px solid var(--header-accent);
    outline-offset: 2px;
    background-color: var(--dropdown-hover);
}

.person-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    background: var(--person-search-bg);
    border: 1px solid var(--person-search-border);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--dropdown-shadow);
    z-index: 1000;
    animation: dropdownFadeIn 0.2s ease forwards;
}

.header-section, .header-link, .info-icon, .mobile-menu-toggle, .header-section .dropbtn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.checklist {
list-style: none;
	width: 100%;
	text-align: left;
}

.nodrag {
background-color: #ccdaff;
}

:root {
--dev-primary: #2563eb;
    --dev-primary-hover: #1d4ed8;
    --dev-secondary: #64748b;
    --dev-success: #10b981;
    --dev-warning: #f59e0b;
    --dev-danger: #ef4444;
    --dev-info: #06b6d4;
    --dev-bg: #f8fafc;
    --dev-surface: #ffffff;
    --dev-border: #e2e8f0;
    --dev-text: #1e293b;
    --dev-text-light: #64748b;
    --dev-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --dev-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --dev-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --dev-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --dev-transition: all 0.2s ease;

    /* z-index scale — keep stack ordering predictable across the app */
    --z-content: 1;
    --z-header: 1001;
    --z-dropdown: 2000;
    --z-modal-backdrop: 9000;
    --z-modal: 9100;
    --z-tooltip: 9500;
    --z-toast: 9999;
    --z-debug-overlay: 99998;

    /* Toast colors — themeable per module via accent overrides */
    --toast-radius: 12px;
    --toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    --toast-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.2);
    --toast-padding: 16px 20px;

    --toast-success-bg-start: #d4edda;
    --toast-success-bg-end: #c3e6cb;
    --toast-success-border: #28a745;
    --toast-success-fg: #155724;

    --toast-error-bg-start: #f8d7da;
    --toast-error-bg-end: #f5c6cb;
    --toast-error-border: #dc3545;
    --toast-error-fg: #721c24;

    --toast-warning-bg-start: #fff3cd;
    --toast-warning-bg-end: #ffeaa7;
    --toast-warning-border: #ffc107;
    --toast-warning-fg: #856404;

    --toast-info-bg-start: #d1ecf1;
    --toast-info-bg-end: #bee5eb;
    --toast-info-border: #17a2b8;
    --toast-info-fg: #0c5460;
}

.person-search-wrapper {
position: relative;
    display: inline-block;
    width: 100%;
}

#henkilohaku, .person-search-input {
width: 200px;
    height: 32px;
    padding: 6px 32px 6px 12px;
    border: 1px solid var(--person-search-border);
    border-radius: 4px;
    background-color: var(--person-search-bg);
    color: var(--person-search-text);
    font-size: 14px;
    font-family: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

#henkilohaku::placeholder {
color: var(--person-search-placeholder);
    opacity: 0.7;
}

#henkilohaku:focus, #henkilohaku.person-search-focused {
border-color: var(--person-search-focus);
    box-shadow: 0 0 0 3px rgba(38, 121, 255, 0.1);
    opacity: 1 !important;
}

#henkilohaku.person-search-loading {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'%3E%3Cpath fill='%232679ff' d='M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px 18px;
    padding-right: 32px;
}

#henkilohaku.person-search-error {
border-color: var(--person-search-error);
}

@keyframes slideDown {
from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.person-search-results::-webkit-scrollbar {
width: 8px;
}

.person-search-results::-webkit-scrollbar-track {
background: #f1f1f1;
    border-radius: 4px;
}

.person-search-results::-webkit-scrollbar-thumb {
background: #c1c1c1;
    border-radius: 4px;
}

.person-search-results::-webkit-scrollbar-thumb:hover {
background: #a1a1a1;
}

.person-search-result-item {
padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
}

.person-search-result-item:last-child {
border-bottom: none;
}

.person-search-result-item:hover {
background-color: var(--person-search-hover);
}

.person-search-result-item-selected {
background-color: var(--person-search-selected);
}

.person-search-result-name {
font-size: 14px;
    font-weight: 500;
    color: var(--person-search-text);
    margin-bottom: 4px;
}

.person-search-result-details {
font-size: 12px;
    color: #666666;
}

.person-search-empty {
padding: 32px 16px;
    text-align: center;
    color: #999999;
}

.person-search-empty i {
font-size: 32px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.5;
}

.person-search-empty p {
margin: 0;
    font-size: 14px;
}

.person-search-error {
padding: 24px 16px;
    text-align: center;
    color: var(--person-search-error);
}

.person-search-error i {
font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.person-search-error p {
margin: 0;
    font-size: 13px;
}

@media (prefers-color-scheme: dark) {
:root {
        --person-search-bg: #2c3e50;
        --person-search-border: #34495e;
        --person-search-text: #ecf0f1;
        --person-search-placeholder: #95a5a6;
        --person-search-hover: #34495e;
        --person-search-selected: #3d5a7a;
        --person-search-shadow: rgba(0, 0, 0, 0.3);
    }

    .person-search-result-details {
        color: #bdc3c7;
    }

    .person-search-empty,
    .person-search-error {
        color: #95a5a6;
    }
}

.person-search-result-item:focus {
outline: 2px solid var(--person-search-focus);
    outline-offset: -2px;
}

@keyframes spin {
to {
        transform: rotate(360deg);
    }
}

@media (prefers-contrast: high) {
#henkilohaku {
        border-width: 2px;
    }

    .person-search-results {
        border-width: 2px;
    }

    .person-search-result-item-selected {
        border: 2px solid var(--person-search-focus);
    }
}

@media (prefers-reduced-motion: reduce) {
#henkilohaku,
    .person-search-result-item,
    .person-search-results {
        transition: none;
        animation: none;
    }
}

.vuorohuomio {
width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.planner_machine_div {
margin: 5px 0 10px 5px; 
    padding: 10px; 
    border: 1px solid #a0a0ff; 
    border-radius: 8px; 
    min-height: 100px;
    background-color: #f5f7ff; 
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); 
    transition: box-shadow 0.3s, border-color 0.3s, background-color 0.3s;
}

.planner_view {
width: 99%;
}

.normal_planner_person {
float: left;
    width: 95%; 
    text-align: left;
    margin-left: 3px;
    font-size: 12px; 
    padding: 4px 6px; 
    display: table-row;
    line-height: 1.4; 
    cursor: pointer;
    color: #000; 
    transition: background-color 0.3s, color 0.3s;
}

.normal_planner_person:hover {
background-color: #e0f7fa; 
    color: #00796b;
}

.normal_planner_person_box {
width: 90%;
    padding: 6px 8px; 
    min-height: 40px;
    border: 1px solid #0040FF; 
    border-radius: 4px; 
    margin: 5px 0; 
    text-align: left;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 
    list-style: none;
    transition: box-shadow 0.3s, border-color 0.3s; 
    box-sizing: border-box;
    overflow: hidden;
}

.normal_planner_person_box:hover {
border-color: #00796b; 
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}

.planner-badge-plus {
background-color: #007bff !important;
    color: white !important;
    border-radius: 3px !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    cursor: help !important;
    border: 1px solid #0056b3 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    margin-right: 2px !important;
}

.planner-badge-plus:hover {
background-color: #0056b3 !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.person-context-menu {
font-family: Arial, sans-serif;
    font-size: 14px;
    user-select: none;
}

.context-menu-header {
font-size: 13px;
    text-align: center;
}

.context-menu-item {
padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.context-menu-item:last-child {
border-bottom: none;
}

.context-menu-item:hover {
background-color: #f5f5f5;
}

.context-menu-item i {
margin-right: 8px;
    width: 16px;
    text-align: center;
    color: #666;
}

.context-menu-item:hover i {
color: #333;
}

.context-menu-separator {
height: 1px;
    background-color: #e0e0e0;
    margin: 4px 0;
}

.context-menu-item.disabled {
color: #999;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
background-color: transparent;
}

.context-menu-item.disabled i {
color: #ccc;
}

.person-context-menu.show {
animation: contextMenuFadeIn 0.15s ease-out;
}

@keyframes contextMenuFadeIn {
from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.normal_planner_person_box.context-menu-active {
box-shadow: 0 0 0 2px #007bff;
    border-radius: 4px;
}

.plan_day {
border: 1px solid black;
    width: 10%;
    height: 50px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

table {
border-collapse: collapse;
}

.oletuskonelistaus {
line-height: 100%;
}

.oletuskonelistaus td {
padding: 0;
    margin: 0;
}

.selectedShifts td {
border: 1px solid black;
    line-height: 26px;
}

.dashboard_table td {
vertical-align: top;
}

.dashboard {
overflow: auto;
    max-height: 250px;
    float: left;
}

.groupcalendar {
font-size: 1em;
    margin-top: 15px;
    
    margin-left: 5px;
    width: 100%;
    font-size: 10px;
    text-align: center;
    float: left;
}

.groupcalendar, .createShift select {
min-width: 50px;
}

.nodraggi {
font-weight: normal;
    background-color: #ccc;
    color: #000;
    font-size: 11px;
}

.groupcalendar th {
background-color: #FFCCCC;
    font-weight: normal;
    font-size: 11px;
    text-align: center;
    color: #000;
}

.groupcalendar select {
min-width: 50px;
    font-size: 10px;
}

.vuorolista {
font-size: 1em;
    border: 1px solid black;
    margin-left: 10px;
    width: 90%;
    text-align: center;
    float: left;
}

.vuorolista th {
background-color: #1048D0;
    font-weight: normal;
    text-align: center;
    color: #FFFFFF;
}

.personsDashboard th {
background-color: #1048D0;
    font-weight: normal;
    text-align: center;
    color: #FFFFFF;
}

.personslist {
font-size: 1em;
    border: 1px solid black;
    margin-left: 10px;
    width: 90%;
    text-align: center;
}

.personslist th {
background-color: #1048D0;
    font-weight: normal;
    text-align: center;
    color: #FFFFFF;
}

.shiftTypes {
font-size: 1em;
    border: 1px solid black;
    margin-left: 10px;
    width: 90%;
    margin-top: 5px;
    text-align: center;
}

.shiftTypes th {
background-color: #1048D0;
    font-weight: normal;
    text-align: center;
    color: #FFFFFF;
}

.selected {
background-color: #C4E5F4;
}

.personCalendar {
border: 1px solid black;
    width: 100%;
    float: left;
    text-align: center;
}

.personCalendar th {
font-size: 14px;
}

.personCalendar .daycell {
height: 65px;
    vertical-align: top;
    text-align: center;
    width: 12%;
}

.personCalendar .not_cur_month {
background-color: #E6E6E6;
    color: #FFFFFF;
    max-width: 67px;
    height: 65px;
    vertical-align: top;
    text-align: center;
    width: 13%;
}

.personCalendar .cur_month {
background-color: #fff;
    max-width: 67px;
    height: 65px;
    vertical-align: top;
    text-align: center;
    width: 13%;
}

.personCalendar .daybox {
float: right;
    top: 8px;
    right: 8px;
    font-size: 14px;
    color: #2563eb; 
    padding: 5px;
    border-radius: 4px; 
    border: 1px solid #d1d5db; 
    background-color: #e0f2fe; 
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
    z-index: 100;
}

.personCalendar .daybox:hover {
background-color: #2563eb; 
    color: #ffffff; 
    transform: scale(1.05);
}

.personCalendar .cur_day {
background-color: #9EB6FF;
    height: 65px;
    vertical-align: top;
    text-align: center;
    width: 12%;
}

.personCalendar .day_events {
font-size: 12px;
    display: block;
    float: left;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.personCalendar .day_events .nodec {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    padding: 2px 4px;
}

.table_fixed {
table-layout: fixed;
}

.displaygroup_print {
border: 0px solid black;
    text-align: center;
    background-color: #fff;
    font-size: 12px;
    border-collapse: collapse;
    font-family: Roboto, sans-serif !important;
    letter-spacing: 0.25px;
}

.displaygroup_print tr:nth-child(even) {
background: #e0e8ff;
}

.displaygroup_print tr:nth-child(odd) {
background: #f9fbff;
}

.displaygroup_print tr th:nth-child(1) {
width: 175px;
}

.displaygroup_print td {
vertical-align: text-top;

    padding-bottom: 3px;
    padding-top: 3px;
    max-width: 170px;
}

#displaygroup_print > tbody > tr td:nth-child(1) {
vertical-align: middle;
}

.displaygroup_print th {
font-weight: normal;
    background-color: #ccc;
    color: #000;
    font-size: 12px;
}

.userinfo th {
font-weight: normal;
    background-color: #ccc;
    color: #000;
    font-size: 14px;
}

.eventtype_list {
float: left;
    text-align: center;
    font-size: 12px;
}

.eventtype_list th {
font-weight: normal;
    background-color: #ccc;
    color: #000;
    font-size: 14px;
}

.yleistaulu {
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 13px;
    margin-top: 20px;
    line-height: 1.6;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
}

.yleistaulu.center-align td {
text-align: center;
}

.shiftTypes tr:hover {
font-weight: normal;
    background-color: #99B3FF;
    color: #000;
}

.personYearCalendar {
    animation: calendarFadeIn 0.6s ease-out;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    position: relative;
}

.personYearCalendar th {
    font-weight: 600;
    background: #4a6fa5;
    color: #fff;
    font-size: 11px;
    padding: 10px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 2px solid #3a5a8a;
}

/* Week group separators */
.personYearCalendar th:nth-child(7),
.personYearCalendar td:nth-child(7) {
    border-right: 3px solid #4a6fa5;
}

.personYearCalendar th:nth-child(14),
.personYearCalendar td:nth-child(14) {
    border-right: 3px solid #4a6fa5;
}

.personYearCalendar td {
    height: 48px;
    vertical-align: top;
    text-align: center;
    border: 1px solid #eaedf2;
    background: #fff;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    cursor: pointer;
    padding: 1px;
}

.personYearCalendar tr:nth-child(even) td {
    background: #f8f9fb;
}

.personYearCalendar td:hover {
    background: #eef3ff !important;
    box-shadow: inset 0 0 0 2px #667eea;
    z-index: 10;
}

.personYearCalendar .daybox {
    display: block;
    font-size: 10px;
    color: #4a6fa5;
    padding: 2px 3px;
    cursor: pointer;
    background: #eef2f8;
    border-radius: 3px;
    font-weight: 700;
    transition: all 0.2s ease;
    margin: 1px 1px 0 auto;
    text-align: right;
    float: right;
}

.personYearCalendar .daybox:hover {
    background: #4a6fa5;
    color: #fff;
}

.personYearCalendar .day_events {
    position: relative;
    font-size: 10px;
}

.personYearCalendar .day_events:hover {
    background: none;
}

/* Day type backgrounds */
.personYearCalendar td[style*="background-color: #ffebee"] {
    background: #fff0f0 !important;
    border-color: #f5c6cb !important;
}

.personYearCalendar td[style*="background-color: #F2F2F2"] {
    background: #f5f6f8 !important;
}

.personYearCalendar td[style*="background-color: #FFFFB8"] {
    background: #fef9e7 !important;
}

.personYearCalendar .cur_day {
    background: #e8f4fd !important;
    box-shadow: inset 0 0 0 2px #2196f3 !important;
}

@keyframes calendarFadeIn {
from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.year-report-tables-container {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-top: 8px;
}

.year-report-tables-container .year-report-table {
    flex: 1;
    min-width: 0;
}

.year-report-tables-container .yleistaulu {
    width: 100%;
    margin-top: 8px;
}

.shift-tooltip, .event-tooltip {
cursor: help;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    border-radius: 3px;
    padding: 1px 3px;
    margin: 1px;
}

.shift-tooltip:hover, .event-tooltip:hover {
background: rgba(102, 126, 234, 0.1);
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.holiday-text {
display: inline-block;
    font-size: 8px;
    font-weight: bold;
    color: #d32f2f;
    cursor: help;
    margin-right: 2px;
    padding: 1px 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    border: 1px solid rgba(211, 47, 47, 0.3);
    position: relative;
}

.holiday-text:hover {
background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(211, 47, 47, 0.3);
}

.holiday-text:hover::after {
content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: pre-line;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 200px;
    text-align: center;
    line-height: 1.4;
    font-weight: normal;
}

.holiday-text:hover::before {
content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

.personYearCalendar .day_events .shift-tooltip {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e40af;
    font-weight: 600;
    font-size: 9px;
}

.personYearCalendar .day_events .event-tooltip {
    background: #f3e8ff;
    border: 1px solid #c4b5fd;
    color: #6b21a8;
    font-weight: 600;
    font-size: 9px;
}

.personYearCalendar .day_events .shift-tooltip:hover::after, .personYearCalendar .day_events .event-tooltip:hover::after {
content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    white-space: pre-line;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 200px;
    text-align: center;
    line-height: 1.4;
}

.personYearCalendar .day_events .shift-tooltip:hover::before, .personYearCalendar .day_events .event-tooltip:hover::before {
content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

.taitotaulu {
float: left;
    text-align: center;
    font-size: 12px;
    min-width: 400px;
    border-collapse: collapse;
}

/* Mobile: skill tables must not force horizontal page scrolling */
@media (max-width: 480px) {
    .taitotaulu {
        float: none;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .taitotaulu th,
    .taitotaulu td {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .taitotaulu .name {
        min-width: 0;
        width: auto;
        max-width: none;
    }

    /* Other known wide tables: keep page from scrolling horizontally */
    .plannertable,
    .plannerprinttable,
    .weekplanner,
    .plannertable_21,
    .plannertable_25 {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.taitotaulu th {
font-weight: normal;
    background-color: #ccc;
    color: #000;
    font-size: 11px;
    width: 30px;
    min-width: 25px;
}

.taitotaulu td {
border: 1px solid grey;
    padding: 2px;
}

.taitotaulu .none {
cursor: pointer;
    width: 100%;
    float: left;
    background-color: #E0E0E0;
}

.trainee {
cursor: pointer;
    width: 100%;
    float: left;
    background-color: #ffff00;
}

.wskilled, .licensed {
cursor: pointer;
    width: 100%;
    float: left;
    background-color: #1AFF47;
}

.skillhuom {
width: 5px;
    height: 5px;
    border-top: 10px solid rgb(246, 85, 85);
    border-left: 10px solid transparent;
    float: right;
}

.taitotaulu td:hover {
font-weight: normal;
    background-color: #99B3FF;
    color: #000;
}

.taitotaulu .name {
max-width: 200px;
    min-width: 80px;
    width: 25%;
}

.taitotaulu .sorting {
background: none;
}

.plannertable {
max-width: 1200px;
    font-size: 12px;
}

.plannerprinttable {
max-width: 1200px;
    font-size: 16px;
    margin-top: 5px;
    padding: 5px;
}

.plannertable_21 {
width: 100%;
}

.plannertable th {
font-weight: normal;
}

.plannertable_25 {
width: 100%;
}

.plannertable_25 td {
width: 400px;
}

.weekplanner {
font-size: 12px;
    text-align: center;
}

.weekplanner td {
vertical-align: middle;
}

.weekplanner td a {
text-decoration: none;
}

.weekplanner td div {
height: 20px;
    line-height: 20px;
    width: 100%;
}

.weekplanner th {
font-weight: normal;
    min-width: 22px;
    max-width: 200px;
    background-color: #3366FF;
    color: #fff;
}

.personCalendar .cw {
width: 20px;
    text-align: center;
    vertical-align: middle;
}

.personCalendar .not_cur_cw {
width: 20px;
    text-align: center;
    vertical-align: middle;
    background-color: #E6E6E6;
}

.factoryYearCalendar {
border: 1px solid black;
    width: 100%;
    float: left;
    text-align: center;
    background-color: #C2C2C2;
}

.factoryYearCalendar th {
font-weight: normal;
    background-color: #0000CC;
    color: #FFFFFF;
}

.factoryYearCalendar td {
height: 40px;
    vertical-align: top;
    text-align: center;
    width: 50px;
    border: 1px solid #C2C2C2;
}

.factoryYearCalendar .daybox {
float: right;
    font-size: 11px;
    color: #002EB8;
    padding: 1px;
    cursor: pointer;
}

.factory_day_events {
width: 100%;
    font-size: 11px;
    float: left;
    text-align: center;
}

.factory_no_production {
width: 100%;
    background-color: #fff
}

.factory_date {
font-size: 11px;
}

/* .table_header — legacy class, now unified in UX section at end of file */

#miehitystarvetaulu td, #miehitystarvetaulu th {
min-width: 35px;
    padding-left: 3px;
    padding-right: 3px;
}

#miehitystarvetaulu th {
background: #CCDAFF;
}

.etusivun_huom {
text-align: center;
    line-height: 20px;
}

.etusivun_huom tr {
background-color: white;
}

.henkilolista {
line-height: 20px;
}

.henkilolista tr:nth-child(even) {
background: #f7faff;
}

.henkilolista tr:nth-child(odd) {
background: #FFF;
}

.henkilolista a {
text-decoration: none;
}

.eventdata_table {
float: left;
    text-align: center;
    font-size: 12px;
}

.eventdata_table th {
font-weight: normal;
    background-color: #ccc;
    color: #000;
    font-size: 14px;
}

.eventdata_table td:hover {
font-weight: normal;
    background-color: #99B3FF;
    color: #000;
}

table.display {
table-layout: fixed;
}

table.display td {
padding: 0px;
    text-align: center;
}

.lomataulu {
font-size: 11px;
}

.lomataulu input[type=text] {
padding: 0;
    margin: 0;
    padding-left: 2px;
}

.koulutustaulu {
text-align: center;
}

.tes_plus {
background-color: #c2f442;
}

.tes_minus {
background-color: #ffc2b3;
}

.displaygroup_by_planner_machinename {
width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 5px;
}

.lomataulu_25 {
text-align: center;
    width: 100%;
}

.lomataulu_25 th {
background-color: #3187b9;
    color: white;
}

.lomataulu_25 td {
width: 10%;
}

#plannerin_logitaulu {
text-align: center;
    line-height: 20px;
}

.tyoaikapankkitaulu {
table-layout: fixed;
    text-align: center;
    line-height: 25px;
    border-collapse: collapse;
}

.tyoaikapankkitaulu td {
border: 1px solid grey;
}

.displaygroup {
border: 1px solid #ccc; 
    float: left;
    font-size: 12px;
    background-color: #f9f9f9;
    width: 98%; 
    overflow-x: auto; 
    overflow-y: hidden; 
    white-space: nowrap;
}

.displaygroup tr th {
font-weight: bold;
    background-color: #0073e6; 
    color: #fff; 
    font-size: 11px; 
    text-align: center;
    padding: 5px;
    border: 1px solid #ccc;
}

.displaygroup tr th.saturday {
background-color: #cce7ff; 
    color: #003366;
}

.displaygroup tr th.today {
background-color: #ffcccc; 
    color: #660000;
}

.displaygroup tr:nth-child(even) {
background-color: #f5f5f5;
}

.displaygroup tr:hover {
background-color: #e6f7ff; 
    color: #000;
}

.displaygroup td {
padding: 8px; 
    text-align: center; 
    border: 1px solid #ddd; 
    vertical-align: middle;
}

.displaygroup td:hover {
background-color: #e6f7ff;
}

.displaygroup_shift {
font-weight: bold;
    background-color: #f4cccc; 
    color: #000;
}

.displaygroup, .displaygroup th, .displaygroup td {
border: 1px solid #bbb;
}

.displaygroup td.daybox {
font-size: 11px;
    /* prevent cell text from spilling over adjacent day cells */
    min-width: 20px;
    height: auto;
    padding: 1px;
    white-space: normal; /* override .displaygroup { white-space: nowrap; } */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.displaygroup td.daybox .dg-shift-overwritten {
font-size: 9px;
    font-style: italic;
    padding-right: 2px;
    opacity: 0.75;
}

.displaygroup tr th:nth-child(1) {
width: 150px;
}

.displaygroup_longterm {
border-collapse: collapse !important;
    text-align: center;
}

.displaygroup_longterm tr th:nth-child(1) {
min-width: 150px !important;
    width: 150px;
    height: 20px;
}

.displaygroup_longterm td, .displaygroup_longterm th {
padding: 0px !important;
    border: 1px solid #6E6E6E;
    text-align: center !important;
}

.displaygroup_longterm .daybox {
font-size: 8px !important;
    width: 20px;
    height: 12px;
    padding: 0px;
}

.yhtrivi {
background-color: #CCD9FF !important;
}

.obs-table {
width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    font-size: 13px;
    overflow: hidden;
}

.obs-table thead th {
background-color: #f8f9fa;
    color: #495057;
    padding: 8px 10px;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.obs-table tbody td {
padding: 6px 10px;
    border-bottom: 1px solid #dee2e6;
    color: #212529;
    vertical-align: top;
}

.obs-table tbody tr:hover {
background-color: #e3f2fd !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.obs-table tbody tr:last-child td {
border-bottom: none;
}

.obs-table .date-separator td {
padding: 0;
    border-bottom: none;
}

.obs-table .date-divider {
height: 2px;
    background: linear-gradient(90deg, transparent, #dee2e6 20%, #dee2e6 80%, transparent);
    margin: 4px 0;
}

.obs-table .obs-text {
display: block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.obs-table a {
color: #0d6efd;
    text-decoration: none;
}

.obs-table a:hover {
text-decoration: underline;
}

.obs-table tbody tr {
transition: background-color 0.2s ease;
}

.obs-table tbody tr:nth-child(even) {
background-color: #fafbfc;
}

.no-observations {
text-align: center;
    padding: 2rem;
    color: #6c757d;
    font-style: italic;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px dashed #dee2e6;
}

.pakkauskoneet-table {
width: 100%;
    margin-top: 20px;
    border: 1px solid lightgrey;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pakkauskoneet-table-production {
background-color: #ffcccc;
    font-size: 16px;
    line-height: 20px;
}

.pakkauskoneet-table-packaging {
background-color: yellow;
    font-size: 16px;
    line-height: 20px;
}

.pakkauskoneet-table-active {
background-color: #6ef442;
    font-size: 16px;
    line-height: 20px;
}

.pakkauskoneet-table-expired {
font-size: 14px;
    line-height: 16px;
    font-style: italic;
}

.pakkauskoneet-table-default {
font-size: 14px;
    line-height: 16px;
}

.pakkauskoneet-table th {
font-weight: bold;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}

.pakkauskoneet-table td {
padding: 5px;
    border-bottom: 1px solid #eee;
}

.pakkauskoneet-table tr:last-child td {
border-bottom: none;
}

.pakkauskoneet-header {
font-size: 20px;
    width: 19%;
    height: 30px;
    border-bottom: 1px dashed black;
    text-align: center;
    line-height: 30px;
    background-color: lightblue;
}

.pakkauskoneet-header a {
font-weight: bold;
    text-decoration: none;
    color: #333;
}

.pakkauskoneet-header a:hover {
text-decoration: underline;
}

.pakkauskoneet-row {
text-align: center;
}

.pakkauskoneet-cell {
vertical-align: top;
    padding: 10px;
}

.pakkausbutton {
display: inline-block;
    padding: 4px 8px;
    margin: 5px 2px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pakkausbutton:hover {
background-color: #e0e0e0;
}

.perusfieldset {
flex: 2 1 auto;
    box-sizing: border-box;
}

.perusfieldset legend {
background: linear-gradient(135deg, var(--dev-primary) 0%, #3b82f6 100%) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: var(--dev-shadow) !important;
    border: none !important;
}

.perusfieldset legend a {
    color: #fff !important;
    text-decoration: none;
    opacity: 0.9;
}

.perusfieldset legend a:hover {
    color: #fff !important;
    opacity: 1;
    text-decoration: underline;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.perusfieldset legend select {
background: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    padding: 3px 6px !important;
    margin-left: 8px !important;
    color: var(--dev-text) !important;
    font-weight: 500 !important;
    transition: var(--dev-transition) !important;
}

.perusfieldset legend select:hover {
border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* staffeributton !important override removed — consolidated at line ~4133 */

div[style*="background-color: #d4edda"] {
background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
    padding: 10px 14px !important;
    margin: 10px 0 !important;
    border-radius: 6px !important;
    box-shadow: var(--dev-shadow) !important;
    border-left: 4px solid var(--dev-success) !important;
}

#suunnittelutaulu {
border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--dev-surface) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: var(--dev-shadow-lg) !important;
    border: 1px solid var(--dev-border) !important;
    animation: fadeIn 0.5s ease-in !important;
}

#suunnittelutaulu thead tr:first-child th {
background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
    color: white !important;
    padding: 6px 5px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    border-bottom: 2px solid var(--dev-border) !important;
}

#suunnittelutaulu thead tr:first-child th a {
color: #93c5fd !important;
    text-decoration: none !important;
    transition: var(--dev-transition) !important;
    font-weight: 500 !important;
}

#suunnittelutaulu thead tr:first-child th a:hover {
color: #dbeafe !important;
    text-decoration: underline !important;
}

#suunnittelutaulu thead th {
background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    color: var(--dev-text) !important;
    padding: 6px 5px !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--dev-border) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

#suunnittelutaulu thead th a {
color: var(--dev-primary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

#suunnittelutaulu thead th a:hover {
text-decoration: underline !important;
}

#suunnittelutaulu thead th textarea {
background: white !important;
    border: 1px solid var(--dev-border) !important;
    border-radius: 4px !important;
    padding: 4px !important;
    font-size: 12px !important;
    transition: var(--dev-transition) !important;
    margin-top: 4px !important;
}

#suunnittelutaulu thead th textarea:focus {
outline: none !important;
    border-color: var(--dev-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

#suunnittelutaulu tbody tr {
transition: var(--dev-transition) !important;
}

#suunnittelutaulu tbody tr:hover {
background: #f8fafc !important;
    box-shadow: inset 0 0 0 1px var(--dev-border) !important;
}

#suunnittelutaulu tbody tr.even {
background: #ffffff !important;
}

#suunnittelutaulu tbody tr.odd {
background: #f9fafb !important;
}

#suunnittelutaulu td,
#suunnittelutaulu th {
    border: 1px solid var(--dev-border) !important;
}

#suunnittelutaulu td {
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    position: relative;
}

#suunnittelutaulu td[contenteditable="true"] {
cursor: text !important;
    position: relative !important;
}

#suunnittelutaulu td[contenteditable="true"]:not([data-setpriority="1"]):hover {
background: #fef3c7 !important;
    box-shadow: inset 0 0 0 2px #fbbf24 !important;
}

/* Priority cells: keep priority color visible on hover, subtle ring only */
#suunnittelutaulu td[data-setpriority="1"]:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}
#suunnittelutaulu td[data-setpriority="1"]:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

#suunnittelutaulu td[contenteditable="true"]:not([data-setpriority="1"]):focus {
background: #fef9c3 !important;
    outline: none !important;
    box-shadow: inset 0 0 0 2px var(--dev-primary) !important;
}

#machine_row_header {
font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--dev-transition) !important;
    border-left: 3px solid transparent !important;
}

#machine_row_header:hover {
border-left-color: var(--dev-primary) !important;
    background-blend-mode: overlay !important;
    filter: brightness(0.95) !important;
}

/* Production planning priority colors – light borders so fill is clearly visible */
td[style*="background-color: #00FF00"] {
    background: linear-gradient(135deg, #86efac 0%, #4ade80 100%) !important;
    font-weight: 600 !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    box-shadow: none !important;
}

td[style*="background-color: #FF0000"] {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%) !important;
    font-weight: 600 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    box-shadow: none !important;
}

td[style*="background-color: #41A8FF"],
td[style*="background-color: #0066FF"] {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%) !important;
    font-weight: 600 !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: none !important;
}

td[onclick*="planManned"] {
cursor: pointer !important;
    font-weight: bold !important;
    transition: var(--dev-transition) !important;
    text-align: center !important;
}

td[onclick*="planManned"]:hover {
background: #dbeafe !important;
    transform: scale(1.05) !important;
}

tr[style*="background-color: lightyellow"] {
background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%) !important;
    font-weight: 500 !important;
}

tr[style*="background-color: lightyellow"] td {
border-color: #fde047 !important;
}

.tusu_footer_greyed {
background-color: lightgray;
}

#suunnittelutaulu tbody tr:has(td[style*="font-size: 12px"]), #suunnittelutaulu tbody tr:has(td[style*="font-size: 14px"]) {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    font-weight: 600 !important;
    border-top: 2px solid var(--dev-border) !important;
}

td[style*="background-color: white"] {
background: #fafafa !important;
    text-align: center !important;
}

td[style*="background-color: white"] a {
display: inline-block !important;
    transition: var(--dev-transition) !important;
}

td[style*="background-color: white"] a:hover {
transform: scale(1.2) !important;
}

.ui-icon {
opacity: 0.7 !important;
    transition: var(--dev-transition) !important;
}

.ui-icon:hover {
opacity: 1 !important;
}

.ui-icon-info {
filter: hue-rotate(200deg) !important;
}

.ui-icon-notice {
animation: pulse 2s ease-in-out infinite !important;
}

/* Shift note indicators (employee_notes / supervisor_notes tooltips) */
.shift-note-indicator {
display: inline-block !important;
    vertical-align: middle !important;
    cursor: help !important;
    line-height: 16px !important;
}

.shift-note-indicator.ui-icon {
    padding: 0 !important;
}

/* Employee note indicator should be red */
.shift-note-indicator.employee-note {
color: #cc0000 !important;
}

.shift-note-indicator.employee-note.ui-icon {
background-image: url("../jquery/plugins/jquery-ui-1.12/images/ui-icons_cc0000_256x240.png") !important;
}

.infotip {
position: relative !important;
}

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

.tuotannonsuunnittelu {
position: relative !important;
    line-height: 1.2 !important;
}

.tuotannonsuunnittelu::-webkit-scrollbar {
width: 12px !important;
    height: 12px !important;
}

.tuotannonsuunnittelu::-webkit-scrollbar-track {
background: #f1f5f9 !important;
    border-radius: 6px !important;
}

.tuotannonsuunnittelu::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%) !important;
    border-radius: 6px !important;
    border: 2px solid #f1f5f9 !important;
}

.tuotannonsuunnittelu::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
}

.ts_input:focus {
outline: 2px solid var(--dev-primary) !important;
    outline-offset: 2px !important;
}

tr[style*="background-color: lightgray"] {
background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
}

tr[style*="background-color: lightgray"] td {
border-color: #7dd3fc !important;
}

th a[href*="#"] {
padding: 2px 8px !important;
    border-radius: 4px !important;
    transition: var(--dev-transition) !important;
    display: inline-block !important;
}

th a[href*="#"]:hover {
background: rgba(255, 255, 255, 0.2) !important;
}

td[style*="font-size: 11px"][style*="text-align: center"] {
font-weight: 600 !important;
    color: #92400e !important;
    font-size: 10px !important;
    padding: 4px 3px !important;
}

span[style*="font-size: 8px"] {
background: rgba(255, 255, 255, 0.5) !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    font-size: 9px !important;
}

#dialog-container {
border-radius: 8px !important;
    box-shadow: var(--dev-shadow-lg) !important;
}

.ui-dialog {
background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    font-family: 'Arial', sans-serif; 
    font-size: 14px; 
    color: #333;
}

.ui-dialog-titlebar {
background-color: #0040FF; 
    color: #fff; 
    border: none; 
    padding: 10px 15px; 
    font-size: 16px; 
    font-weight: bold; 
    border-radius: 8px 8px 0 0;
}

@media (max-width: 1400px) {
#suunnittelutaulu {
        font-size: 10px !important;
    }
    
    /* staffeributton responsive override removed — base sizes are reasonable */
    
    #suunnittelutaulu td {
        padding: 3px 2px !important;
    }
}

*:focus-visible {
outline: 2px solid var(--dev-primary) !important;
    outline-offset: 2px !important;
}

a, button, input, select, textarea, td[contenteditable], td[onclick] {
transition: var(--dev-transition) !important;
}

.header2.hidden {
top: -100px;
}

.navbar-nav .nav-link {
color: var(--nav-link-color);
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
color: var(--nav-link-hover);
}

@media (max-width: 767px) {
    .navbar-brand {
        font-size: 1.25rem;
        padding-left: 1rem;
    }
    .form-inline .form-control {
        width: 100%;
        margin: 0.5rem 0;
    }
    .navbar-nav {
        text-align: center;
    }
    .navbar-nav .nav-item {
        width: 100%;
    }
    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        margin-top: 0.5rem;
    }
    .navbar-nav .dropdown-menu .dropdown-item {
        width: 100%;
    }
}

.holiday-management-container {
max-width: 800px;
    margin: 20px auto;
    padding: 0 20px;
}

.holiday-fieldset {
border: 2px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    background-color: #fafafa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.error-message {
background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.success-message {
background-color: #efe;
    border: 1px solid #cfc;
    color: #363;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.holiday-form {
margin: 20px 0;
}

.form-group {
margin-bottom: 15px;
}

.form-label {
display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.form-input {
width: 350px;
    margin-left: 5px;
    padding: 8px 12px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus {
outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.form-input.error {
border-color: #c33;
}

.form-help {
display: block;
    color: #666;
    font-size: 12px;
    margin-top: 5px;
}

.form-actions {
display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Generic .btn/.btn-primary/.btn-secondary removed — use staffeributton app-wide.
   Login-specific .btn styles are defined in the login section below (~line 4783). */

.info-section {
margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.person-details-table {
width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0;
}

.input-small {
width: 50px;
}

.input-medium {
width: 75px;
}

.full-width-container {
float: left;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}

.highlight-box {
padding: 10px;
    font-size: 20px;
}

.centered-heading {
width: 95%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    float: left;
}

.bordered-table {
border: 1px solid grey;
    margin-top: 10px;
    max-width: 600px;
}

.full-width-table {
width: 100%;
    text-align: center;
    float: left;
    margin-top: 10px;
    border: 1px solid grey;
}

.simple-full-width-table {
width: 100%;
    text-align: center;
}

.cell-left {
text-align: left;
}

.cell-left-padded {
text-align: left;
    padding-left: 10px;
}

.cell-left-small-padding {
text-align: left;
    padding-left: 5px;
}

.clickable {
cursor: pointer;
}

.bg-light-blue {
background-color: #CCDAFF;
    margin: 0;
    padding: 4px;
}

.width-95 {
width: 95%;
}

.employment-permanent {
background-color: lightgreen !important;
}

.employment-fixed-term {
background-color: yellow !important;
}

.employment-temporary {
background-color: orange !important;
}

.employment-long_leave {
background-color: #ffffe6 !important;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #002f7c;
}

.ui-widget-content {
background: #fff;
    min-height: 100px;
}

ul.dropdown li {
margin-left: 0px;
    font-size: 12px;
}

table.dataTable thead th, table.dataTable thead td {
padding: 2px 2px;
    border-bottom: 1px solid #111;
}

.vuoronvaihtolisa {
background-color: #62f442;
}

.krumo-root {
float: left;
    width: 100%;
}

.printtihuomio_32, .vuorohuomio_32, .printtihuomio_21, .vuorohuomio_21, .vuorohuomio_36, .printtihuomio_36, .printtihuomio_28 {
background-color: yellow;
    font-style: italic;
    border: 1px dashed black;
    padding: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.komennustaulukko th {
font-size: 16px;
    color: white;
    background-color: blue;
}

div, .content, .body, .ui-widget {
letter-spacing: 0.25px;
}

.isa_info {
color: #00529B;
    background-color: #BDE5F8;
}

.isa_success {
color: #4F8A10;
    background-color: #DFF2BF;
}

.isa_warning {
color: #9F6000;
    background-color: #FEEFB3;
}

.isa_error {
color: #D8000C;
    background-color: #FFD2D2;
}

.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
margin: 10px 22px;

    vertical-align: middle;
}

.ui-tooltip {
white-space: pre-line;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-family: Roboto, sans-serif !important;
}

.ui-multiselect {
line-height: 20px;
}

.frontpage_error {
border: 1px solid #d9534f; 
    background: #f2dede; 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); 
    padding: 5px;
    margin-bottom: 5px;
}

div .approved_vacations {
float: left;
    width: 30%;
    vertical-align: center;
    text-align: center;
    background-color: #ABEBC6;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid grey;
    display: table;
    border-collapse: collapse
}

div .requested_vacations {
float: left;
    width: 30%;
    vertical-align: center;
    text-align: center;
    background-color: yellow;
    font-size: 14px;
    color: black;
    cursor: pointer;
    border: 1px solid grey;
    display: table;
    border-collapse: collapse
}

div .disapproved_vacations {
float: left;
    width: 30%;
    vertical-align: center;
    text-align: center;
    background-color: #EC7063;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid grey;
    display: table;
    border-collapse: collapse
}

div .no_vacations {
float: left;
    width: 30%;
    vertical-align: center;
    text-align: center;
    font-size: 14px;
    border: 1px solid grey;
    display: table;
    border-collapse: collapse
}

/* ===== Absence/vacation numbers table ===== */
.vac_number_table {
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
    width: 100%;
    table-layout: fixed;
}
.vac_number_table thead th:first-child,
.vac_number_table tbody td:first-child {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    text-align: center;
    padding: 8px 2px;
    font-size: 13px;
    color: #6b7280;
}
.vac_number_table thead th {
    background: #f3f4f6;
    padding: 10px 6px;
    border: 1px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
    text-align: center;
    font-size: 13px;
}
.vac_number_table tbody td {
    border: 1px solid #e5e7eb;
    padding: 8px;
    vertical-align: top;
    background: #fff;
    font-size: 14px;
}
.vac_day_cell.vac_day_blocked { background: #f3f4f6 !important; }
.vac_day_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #e5e7eb;
}
.vac_day_lock {
    cursor: pointer;
    color: #9ca3af;
    font-size: 15px;
}
.vac_day_lock:hover { color: #374151; }

/* Shift rows inside a day cell — compact list, only non-empty rows render */
.vac_shifts { display: flex; flex-direction: column; gap: 5px; }
.vac_shift_row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.vac_shift_empty { font-size: 12px; color: #d1d5db; text-align: center; padding: 4px 0; }
.vac_shift_label {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 30px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 2px 7px;
    text-align: center;
    line-height: 18px;
}

/* Combined chip: segments of approved/requested/disapproved next to each other */
.vac_combo {
    display: inline-flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.1);
    transition: filter 0.15s ease, transform 0.1s ease;
    line-height: 18px;
}
.vac_combo:hover { filter: brightness(0.95); transform: translateY(-1px); }
.vac_combo { line-height: 22px; }
.vac_seg {
    font-size: 13px;
    font-weight: 600;
    padding: 0 9px;
    min-width: 20px;
    text-align: center;
}
.vac_seg + .vac_seg { border-left: 1px solid rgba(0,0,0,0.12); }
.seg_approved    { background: #ABEBC6; color: #14532d; }
.seg_requested   { background: #fde68a; color: #713f12; }
.seg_disapproved { background: #EC7063; color: #fff; }
.seg_absences    { background: #7e57c2; color: #fff; }

/* Keep legacy usage elsewhere from breaking, but cells inside grid don't use them */
.vac_cell { display: none; }

/* ===== Legend ===== */
.vac_legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 13px;
    color: #374151;
    margin: 0 0 10px 0;
    padding: 9px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}
.vac_legend_item { display: inline-flex; align-items: center; gap: 6px; }
.vac_legend_swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.12);
    float: none !important;
}

/* ===== Pagination / navigation ===== */
.vac_nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.vac_nav_btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.vac_nav_btn:hover { background: #eff6ff; border-color: #93c5fd; }
.vac_nav_today { margin-left: auto; background: #1e40af; color: #fff; border-color: #1e40af; }
.vac_nav_today:hover { background: #1d3a8a; color: #fff; }
.vac_nav_range {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    padding: 0 8px;
}

/* Hyväksymättömien vapaapyyntöjen korostustyylit */
.non_approved_vacation {
    background-color: #fff3cd !important;
    color: #856404 !important;
    padding: 2px 6px !important;
    border: 1px solid #ffc107 !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin: 1px !important;
    font-size: 0.9em !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.disapproved_vacation {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    padding: 2px 6px !important;
    border: 1px solid #dc3545 !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin: 1px !important;
    font-size: 0.9em !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.logitaulu {
line-height: 20px;
}

.logitaulu tr:nth-child(even) {
background: #e0e8ff;
}

.logitaulu tr:nth-child(odd) {
background: #f9fbff;
}

.excelplanner td {
vertical-align: top;
    font-size: 10px;
    padding-top: 5px;
    padding-right: 5px;
}

.excelplanner_td {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    text-align: left;
    width: auto;
    cursor: grab;
    line-height: 1.3;
    font-weight: 500;
    list-style: none;
    letter-spacing: 0.2px;
    touch-action: manipulation;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-left: 3px solid #2c7be5;
    border-radius: 4px;
    margin: 3px 4px;
    padding: 3px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background-color .12s, box-shadow .12s, transform .05s;
}
.excelplanner_td:hover {
    background: #f3f8ff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.excelplanner_td:active { cursor: grabbing; transform: translateY(1px); }
.ui-sortable-helper.excelplanner_td {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    background: #fff;
    transform: rotate(-1deg);
    opacity: .95;
}

.excelplanner_td_not_present {
    background-color: #f1aeb5;
    border-left-color: #c0392b;
    opacity: .90;
}
.excelplanner_td_not_present .excelplanner_person strong {
    text-decoration: line-through;
    text-decoration-color: #c0392b;
}

.excelplanner_td_partly_present {
    background-color: #FFFBEA;
    border-left-color: #E0B000;
}

.excelplanner_person {
    text-align: left;
    font-size: 11px;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.excelplanner_info {
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    text-align: left;
    padding: 1px 4px;
    background: #eef2f7;
    color: #475569;
    border-radius: 3px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.excelplanner_sortable {
    min-height: 32px !important;
    padding: 2px !important;
}
.excelplanner_sortable:empty::before {
    content: '';
    display: block;
    height: 28px;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    margin: 2px;
}

.displaygroup_by_planner {
border: 1px solid black;
    background-color: #fff;
}

.resurssitaulu td:first-child {
width: 20%;
    min-width: 80px;
}

.resurssitaulu td:nth-child(2) {
width: 150px;
}

#miehitysnayton_tila {
width: 75%;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border: 1px solid black;
    float: left;
    font-size: 12px;
}

.excelplanner_sortable, li {
list-style: none;
}

/* Required-personnel badge rendered inline in planner views.
 * Excludes .planned-personnel-multi (the stacked multi-shift badge in
 * planner_view_normal) which manages its own layout via planner-view.css. */
[id^="planned_personnel_"]:not(.planned-personnel-multi) {
    display: inline-block !important;
    width: auto !important;
    min-width: 22px;
    padding: 1px 6px !important;
    margin: 2px 0 2px 2px !important;
    font-size: 10px !important;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 10px !important;
    background: #fff;
}

.planner_target_highlighter {
    background-color: rgba(44, 123, 229, 0.12);
    border: 2px dashed #2c7be5;
    height: 26px;
    margin: 3px 4px;
    border-radius: 4px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dataTable td {
border: 1px solid grey;
    margin-left: 1px;
}

.personCalendar, .displaygroup td {
border: 1px solid grey;
    margin-left: 1px;
}

td.displaygroup_subheader {
background-color: #fcfce3 !important;
}

.planner_koontilista, .hkscan_displaygroup_by_planner th {
    border: 1px solid grey;
    padding: 2px !important;
    vertical-align: middle !important;
}

.planner_koontilista, .hkscan_displaygroup_by_planner td {

    vertical-align: top !important;
}


.calendarbox {
border: 1px solid #ddd; 
    border-radius: 8px; 
    background-color: #f9f9f9; 
    text-align: center; 
    vertical-align: top; 
    padding: 10px; 
    transition: all 0.2s ease-in-out; 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.calendarbox:hover {
background-color: #f1f1f1; 
    transform: scale(1.05); 
    cursor: pointer; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
}

.calendarbox.cur_day {
border: 2px solid #007bff; 
    background-color: #eaf4ff;
}

.calendarbox.not_cur_month {
background-color: #f5f5f5; 
    color: #aaa;
}

.nodec {
text-decoration: none; 
    color: #0040FF; 
    font-weight: 500; 
    display: inline-block; 
    padding: 4px 4px; 
    border-radius: 4px; 
    transition: all 0.2s ease-in-out;
}

.nodec:visited {
color: #0040FF;
}

.nodec:hover {
background-color: #eaf4ff; 
    color: #0036cc; 
    text-decoration: underline;
}

.nodec:active {
color: #002a99; 
    background-color: #d8e7ff; 
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.cloned_person {
border: 1px dashed black;
    border-left: 3px solid;
}

td[contenteditable="true"] {
background-color: transparent;
}

td[contenteditable="true"]:focus {
background-color: #fff;
    border: 3pt solid black;
}

.ts_input {
width: 20px;
}

div .noskill {
background-color: #ffd7d4;
}

button {
padding: 5px;
    background-color: #eaecee;
    border-radius: 5px;
    border: 1px solid grey;
}

body {
font-family: 'Roboto', sans-serif;
    background-color: #ededed; 
    margin: 0; 
    padding: 0; 
    font-size: 14px; 
    color: #333; 
    line-height: 1.6; 
    display: flex; 
    flex-direction: column;
}

table .noborder td {
border: 0px;
    word-wrap: break-word;
    background-color: none;
}

.ui-autocomplete {
z-index: 20000;
}

/* ============================================
   staffeributton — Standard button system
   ============================================ */
.staffeributton, input[type=submit], .submitbutton, .personcalendar_buttons, .personcalendar_buttons_overtime {
    display: inline-block;
    width: auto;
    white-space: nowrap;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--dev-primary);
    border: 1px solid var(--dev-primary);
    border-radius: 6px;
    transition: var(--dev-transition);
    cursor: pointer;
    user-select: none;
    margin: 3px;
    box-shadow: var(--dev-shadow-sm);
}

.staffeributton:hover, input[type=submit]:hover, .submitbutton:hover {
    background: var(--dev-primary-hover);
    border-color: var(--dev-primary-hover);
    box-shadow: var(--dev-shadow);
    transform: translateY(-1px);
    text-decoration: none;
    color: #fff;
}

.staffeributton:focus-visible, input[type=submit]:focus-visible, .submitbutton:focus-visible {
    outline: 2px solid var(--dev-primary);
    outline-offset: 2px;
}

.staffeributton:active, input[type=submit]:active, .submitbutton:active {
    transform: translateY(0);
    box-shadow: var(--dev-shadow-sm);
}

.staffeributton:disabled, input[type=submit]:disabled, .submitbutton:disabled {
    background: #e9ecef;
    border-color: #dee2e6;
    color: #6c757d;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Variant: secondary — gray, for cancel/back actions */
.staffeributton.secondary {
    background: var(--dev-surface);
    color: var(--dev-text);
    border-color: var(--dev-border);
}
.staffeributton.secondary:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--dev-text);
}

/* Variant: danger — red, for delete/destructive actions */
.staffeributton.danger {
    background: var(--dev-danger);
    border-color: var(--dev-danger);
}
.staffeributton.danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* Variant: success — green, for confirm/approve actions */
.staffeributton.success {
    background: var(--dev-success);
    border-color: var(--dev-success);
}
.staffeributton.success:hover {
    background: #059669;
    border-color: #059669;
}

/* Variant: warning — amber, for caution actions */
.staffeributton.warning {
    background: var(--dev-warning);
    border-color: var(--dev-warning);
    color: #1e293b;
}
.staffeributton.warning:hover {
    background: #d97706;
    border-color: #d97706;
    color: #1e293b;
}

/* Size: small */
.staffeributton.small, .submitbutton.small {
    padding: 4px 10px;
    font-size: 12px;
}

/* Size: icon-only or compact */
.staffeributton.icon-btn {
    padding: 6px 8px;
}

.personcalendar_buttons, .personcalendar_buttons_overtime {
font-size: 12px;
    padding: 6px 10px;
    margin: 2px;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.personcalendar_buttons:hover, .personcalendar_buttons_overtime:hover {
transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.personcalendar_buttons:active, .personcalendar_buttons_overtime:active {
transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.personcalendar_buttons::before, .personcalendar_buttons_overtime::before {
content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.3s ease;
}

.personcalendar_buttons:hover::before, .personcalendar_buttons_overtime:hover::before {
left: 100%;
}

.personcalendar_buttons:focus, .personcalendar_buttons_overtime:focus {
outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}

.personcalendar_buttons.compact {
padding: 4px 8px;
    font-size: 10px;
    min-width: 50px;
    max-width: 100px;
}

.calendar-button-grid .personcalendar_buttons, .calendar-event-grid .personcalendar_buttons {
margin: 2px;
}

.perusfieldset .calendar-button-grid, .perusfieldset .calendar-event-grid {
margin-top: 8px;
}

.responsive-select {
min-width: 60px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    font-size: 12px;
    margin: 2px 0;
}

.responsive-time-input {
width: 60px;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 12px;
}

.calendar-button-grid {
width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}

.calendar-event-grid {
width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    padding: 8px;
}

.perusfieldset .person-details-table {
margin-top: 0;
    margin-bottom: 0;
}

.perusfieldset:has(.person-details-table) {
background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.perusfieldset:has(.person-details-table) legend {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 25px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.perusfieldset:has(.person-details-table) legend:hover {
transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #f1f3f4 100%);
    border-color: #adb5bd;
}

.perusfieldset:has(.person-details-table) legend a {
color: #0066cc !important;
    text-decoration: none;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.perusfieldset:has(.person-details-table) legend a:hover {
color: #004499 !important;
    background-color: rgba(0, 102, 204, 0.1);
    text-decoration: underline;
}

.perusfieldset:has(.person-details-table) legend a:visited {
color: #663399 !important;
}

.person-details-table th {
background-color: #f8f9fa;
    padding: 6px 12px;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-size: 14px;
    height: 32px;
    min-height: 32px;
}

.person-details-table td {
padding: 6px 12px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
    height: 36px;
    min-height: 36px;
}

.person-details-table tr:hover {
background-color: #f8f9fa;
}

.person-details-table input[type="text"], .person-details-table input[type="email"], .person-details-table select {
width: 100%;
    max-width: 280px;
    padding: 4px 8px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.person-details-table input[type="text"]:hover, .person-details-table input[type="email"]:hover, .person-details-table select:hover {
border-color: #adb5bd;
    background-color: #f8f9fa;
}

.person-details-table input[type="text"]:focus, .person-details-table input[type="email"]:focus, .person-details-table select:focus {
outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    background-color: #fff;
}

.person-details-table input[type="checkbox"] {
width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: #007bff;
    transform: scale(1.0);
}

.person-details-table input[type="checkbox"]:hover {
transform: scale(1.15);
}

.person-details-table label {
font-weight: 500;
    color: #495057;
    margin-bottom: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.person-details-table select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23666' d='m2 0-2 2h4zm0 5 2-2h-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.person-details-table input[type="submit"] {
background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.person-details-table input[type="submit"]:hover {
background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.person-details-table input[type="submit"]:active {
transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.person-details-table tr {
transition: background-color 0.2s ease;
}

.person-details-table tr:last-child td {
border-bottom: none;
}

.person-details-table a {
color: #007bff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.person-details-table a:hover {
color: #0056b3;
    text-decoration: underline;
}

.person-details-table td:first-child {
font-weight: 600;
    color: #495057;
    min-width: 160px;
    width: 160px;
    text-align: right;
    padding-right: 16px;
    vertical-align: middle;
}

.person-details-table td:last-child {
padding-left: 16px;
    vertical-align: middle;
}

.person-details-table td:first-child label {
text-align: right;
    display: block;
    font-weight: 600;
    color: #495057;
    margin: 0;
    padding: 0;
}

.person-details-table td:first-child:not(:has(label)) {
text-align: right;
}

.person-details-table .ui-state-highlight {
background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 5px 0;
    font-size: 13px;
}

.person-details-table .ui-state-error {
background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 5px 0;
    font-size: 13px;
}

.form-buttons {
margin-top: 20px;
    width: 100%;
    text-align: center;
}

#licence_link {
color: black;
}

.vuorohuomio {
margin-top: 2px;
    margin-bottom: 2px;
}

.reunataulu, .reunataulu td, .reunataulu th {
border: 1px solid grey;
min-width: 80%;
margin-left: auto;
margin-right: auto;
}

.custom-info-box {
background-color: #e9f7fc; 
    border-left: 5px solid #17a2b8; 
    color: #0c5460; 
    padding: 10px; 
    margin-top: 20px; 
    margin-bottom: 10px; 
    border-radius: 0.25rem; 
    font-size: 14px; 
    line-height: 1.5; 
    display: inline-block; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-info-box .ui-icon {
float: left;
    margin-right: 10px;
    transform: scale(1.5);
    color: #17a2b8;
}

.custom-info-box > .bi {
    float: left;
    margin-right: 8px;
    font-size: 16px;
    color: #17a2b8;
    line-height: 1.5;
}

.custom-info-box p {
margin: 0; 
    padding: 0; 
    display: inline-block;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100vw;

    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('/img/staffer_2000x1200_background.jpg') center/cover;
    opacity: 0.15;
    z-index: 1;
}

.login-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.3);
    padding: 40px 50px;
    text-align: center;
    max-width: 450px;
    width: 90%;
    position: relative;
    z-index: 2;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 35px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px;
    line-height: 1.3;
}

.login-subtitle {
    margin-top: -10px;
    margin-bottom: 28px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.login-form label {
    font-weight: 700;
    color: #475569;
    font-size: 12px;
    text-align: left;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    padding-left: 16px;
    transition: all 0.3s ease;
    line-height: 1.4;
}

.field-hint {
    font-size: 12px;
    color: #94a3b8;
    margin-top: -2px;
}

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field .form-input {
    padding-right: 76px;
}

.btn-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-password-toggle:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-password-toggle:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.login-form label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 2px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.login-form input:focus ~ label,
.login-form label:has(+ input:focus),
.login-form label.input-focused {
    color: #2563eb;
}

.login-form input:focus ~ label::before,
.login-form label:has(+ input:focus)::before,
.login-form label.input-focused::before {
    opacity: 1;
    height: 20px;
    width: 4px;
}

.login-form input:not(:placeholder-shown) ~ label::before,
.login-form label:has(+ input:not(:placeholder-shown))::before,
.login-form label.input-filled::before {
    opacity: 0.7;
}

.form-input {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    background: #ffffff;
    color: #1e293b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
}

.form-input:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.form-input:focus {
    outline: none;
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1), 0 4px 12px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
    border-width: 2px;
}

.form-input:focus::placeholder {
    color: #94a3b8;
    opacity: 0.7;
}

.form-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.form-input:not(:placeholder-shown) {
    border-color: #cbd5e1;
    background: #ffffff;
}

.form-input:not(:placeholder-shown):not(:focus) {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn {
    padding: 15px 25px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover::before {
    left: 100%;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    padding: 16px 28px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-login::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.btn-login:hover::after {
    left: 100%;
}

.btn-login .login-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.btn-login:hover .login-icon {
    transform: translateX(3px);
}

.btn-login span {
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-login-loading {
    display: none;
}

.btn-login.is-loading {
    cursor: wait;
}

.btn-login.is-loading .btn-login-text {
    display: none;
}

.btn-login.is-loading .btn-login-loading {
    display: inline;
}

.btn-login:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-login:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(72, 187, 120, 0.4);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(72, 187, 120, 0.6);
}

.btn-o365 {
    background: #ffffff;
    color: #323130;
    border: 2px solid #d2d0ce;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-o365 .o365-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.btn-o365 span {
    flex: 1;
}

.btn-o365:hover {
    background: #faf9f8;
    border-color: #0078d4;
    color: #0078d4;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 120, 212, 0.3);
}

.btn-o365:hover .o365-icon {
    transform: scale(1.1);
}

.btn-o365:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.2);
}

.btn-o365:disabled {
    background: #f5f5f5;
    border-color: #d4d4d4;
    color: #a0a0a0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-o365:disabled .o365-icon {
    opacity: 0.5;
    transform: none;
}

.btn-link {
    background: none;
    color: #2563eb;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-link:hover {
    color: #1d4ed8;
    text-decoration: none;
    transform: translateY(-1px);
}

.login-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 25px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 8px 0 16px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.login-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.btn-action {
    background: rgba(255, 255, 255, 0.95);
    color: #475569;
    border: 2px solid #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 12px 16px;
}

.btn-action .action-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.btn-action span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-action:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: #2563eb;
    color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-action:hover .action-icon {
    transform: scale(1.1);
}

.btn-action:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.15);
}

.btn-action:disabled {
    background: #f5f5f5;
    border-color: #d4d4d4;
    color: #a0a0a0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-action:disabled .action-icon {
    opacity: 0.5;
    transform: none;
}

.alert {
    padding: 15px 20px;
    border-radius: 12px;
    margin: 20px 0;
    font-weight: 500;
    animation: slideIn 0.3s ease-out;
}

.alert-danger {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
    border: 1px solid #fc8181;
    color: #c53030;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .login-box {
        padding: 30px 25px;
        margin: 20px;
        max-width: none;
        width: calc(100% - 40px);
    }
    
    .login-title {
        font-size: 24px;
    }

    .login-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
    }

    .password-field .form-input {
        padding-right: 68px;
    }

    .btn-password-toggle {
        font-size: 11px;
        padding: 5px 8px;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .login-actions-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .btn-action {
        padding: 10px 14px;
        font-size: 13px;
    }
    
    .btn-o365 {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn-o365 span {
        font-size: 14px;
    }
    
    .btn-login {
        padding: 14px 24px;
        font-size: 16px;
    }
    
    .btn-login .login-icon {
        width: 18px;
        height: 18px;
    }
}

.yleistaulu th {
background: linear-gradient(135deg, #7db4ea 0%, #6fa0d5 100%);
    color: #000000;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    text-align: center;
    z-index: 10;
}

.yleistaulu th:first-child {
border-top-left-radius: 8px;
}

.yleistaulu th:last-child {
border-top-right-radius: 8px;
}

.yleistaulu td {
padding: 5px 8px;
    border-bottom: 1px solid #e8eaed;
    color: #333;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.yleistaulu tbody tr {
transition: all 0.2s ease;
    background-color: #ffffff;
    border-left: 3px solid transparent;
}

.yleistaulu tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

.yleistaulu tbody tr:hover {
    background-color: #eef2ff;
    border-left: 3px solid var(--dev-primary, #2563eb);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.yleistaulu tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}

.yleistaulu tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}

.yleistaulu tbody tr:last-child td {
border-bottom: none;
}

.yleistaulu td a {
color: #2c5aa0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.yleistaulu td a:hover {
color: #1a3d6d;
    text-decoration: underline;
}

.yleistaulu th a {
color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.yleistaulu th a:hover {
color: #ffeb3b;
    text-decoration: underline;
}

.yleistaulu .ui-icon {
display: inline-block;
    vertical-align: middle;
}

.yleistaulu select {
min-width: 50px;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.yleistaulu select:focus {
outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.yleistaulu td:first-child {
white-space: normal;
    font-weight: 500;
    color: #666;
}

/* TES (adjustment leave) table styles */
.tes-summary-row td,
.tes-balance-row td,
.tes-total-row td {
    font-weight: 600;
}

.tes-summary-row {
    background-color: #f0f4ff !important;
    border-left: 3px solid #3b82f6 !important;
}

.tes-balance-row {
    background-color: #f8fafc !important;
    border-left: 3px solid #93c5fd !important;
}

.tes-total-row {
    background-color: #e0f2fe !important;
    border-left: 3px solid var(--dev-primary, #2563eb) !important;
    border-top: 2px solid #93c5fd;
}

.tes-total-row td {
    font-size: 14px;
}

.tes-saldo-input {
    width: 100px;
    text-align: center;
    font-weight: 600;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tes-saldo-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.tes-fieldsets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.tes-fieldsets-grid > .perusfieldset {
    flex: 1 1 400px;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.tes-fieldsets-grid .yleistaulu {
    width: 100%;
}

@media screen and (max-width: 900px) {
    .tes-fieldsets-grid > .perusfieldset {
        flex: 1 1 100%;
    }
}

/* Settings table - enhanced styling */
.settingstable {
    width: 98%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 13px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.6;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
}

.settingstable.center-align td {
text-align: center;
}

.settingstable th {
background: linear-gradient(135deg, #7db4ea 0%, #6fa0d5 100%);
    color: #000000;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    text-align: center;
    z-index: 10;
}

.settingstable th:first-child {
border-top-left-radius: 8px;
}

.settingstable th:last-child {
border-top-right-radius: 8px;
}

.settingstable td {
padding: 5px 8px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.settingstable tbody tr {
transition: all 0.2s ease;
    background-color: #ffffff;
}

.settingstable tbody tr:nth-child(even) {
background-color: #f9fafb;
}

.settingstable tbody tr:hover {
background-color: #e3f2fd;
    transform: scale(1.001);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.settingstable tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}

.settingstable tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}

.settingstable tbody tr:last-child td {
border-bottom: none;
}

.settingstable td a {
color: #2c5aa0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.settingstable td a:hover {
color: #1a3d6d;
    text-decoration: underline;
}

.settingstable th a {
color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.settingstable th a:hover {
color: #ffeb3b;
    text-decoration: underline;
}

.settingstable .ui-icon {
display: inline-block;
    vertical-align: middle;
}

.settingstable select {
min-width: 50px;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.settingstable select:focus {
outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.settingstable td:first-child {
white-space: normal;
    font-weight: 500;
    color: #666;
}

/* Enhanced input styling for settings tables */
.settingstable input.setting {
    padding: 6px 10px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.3s ease;
    background-color: #ffffff;
    max-width: 150px;
}

.settingstable input.setting:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
    background-color: #f8f9fa;
}

.settingstable input.setting:hover {
    border-color: #adb5bd;
}

/* Machine display table for TV planner - miehitysnaytto */
.miehitysnaytto-taulu {
width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    font-size: 13px;
    margin: 0;
    line-height: 1.6;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
}

/* Flex container for machine cards */
.miehitysnaytto-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* Individual machine card wrapper */
.miehitysnaytto-card {
    flex: 1 1 300px;
    min-width: 250px;
    max-width: 400px;
    box-sizing: border-box;
}

.miehitysnaytto-taulu.center-align td {
text-align: center;
}

.miehitysnaytto-taulu th {
background: linear-gradient(135deg, #7db4ea 0%, #6fa0d5 100%);
    color: #000000;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    text-align: center;
    z-index: 10;
}

.miehitysnaytto-taulu th:first-child {
border-top-left-radius: 8px;
}

.miehitysnaytto-taulu th:last-child {
border-top-right-radius: 8px;
}

.miehitysnaytto-taulu td {
padding: 5px 8px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.miehitysnaytto-taulu tbody tr {
transition: all 0.2s ease;
    background-color: #ffffff;
}

.miehitysnaytto-taulu tbody tr:nth-child(even) {
background-color: #f9fafb;
}

.miehitysnaytto-taulu tbody tr:hover {
background-color: #e3f2fd;
    transform: scale(1.001);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.miehitysnaytto-taulu tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}

.miehitysnaytto-taulu tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}

.miehitysnaytto-taulu tbody tr:last-child td {
border-bottom: none;
}

.miehitysnaytto-taulu td a {
color: #2c5aa0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.miehitysnaytto-taulu td a:hover {
color: #1a3d6d;
    text-decoration: underline;
}

.miehitysnaytto-taulu th a {
color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.miehitysnaytto-taulu th a:hover {
color: #ffeb3b;
    text-decoration: underline;
}

.miehitysnaytto-taulu .ui-icon {
display: inline-block;
    vertical-align: middle;
}

.miehitysnaytto-taulu select {
min-width: 50px;
    font-size: 12px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.2s ease;
}

.miehitysnaytto-taulu select:focus {
outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.miehitysnaytto-taulu td:first-child {
white-space: normal;
    font-weight: 500;
    color: #666;
}

.info-box-container {
display: flex;
    float: left;
    margin-right: 5px;
    flex-wrap: wrap;
}

.info-box {
border: 1px solid #dcdcdc;
    background: #f9f9f9;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.info-box-header {
display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
}

.info-box-header i {
font-size: 18px;
    color: #007bff; 
    margin-right: 8px;
}

.info-box-message {
font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.frontpage_error span {
font-size: 12px;
    line-height: 1.5;
}

.frontpage_error i {
flex-shrink: 0;
}

/* Stafferi Tabs — lightweight replacement for jQuery UI tabs */
.stafferi-tabs {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    margin: 5px auto;
    width: 95%;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
}

.stafferi-tabs-nav {
    margin: 0;
    padding: 4px 4px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    list-style: none;
}

.stafferi-tabs-nav li {
    margin: 0;
    padding: 0;
}

.stafferi-tabs-nav a {
    display: block;
    padding: 9px 16px;
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    border-radius: 6px 6px 0 0;
    transition: background-color 0.15s, color 0.15s;
    cursor: pointer;
    white-space: nowrap;
}

.stafferi-tabs-nav li:last-child a {
    border-right: none;
}

.stafferi-tab-active a {
    background-color: #fff;
    color: #1e293b;
    font-weight: 600;
    box-shadow: 0 -2px 0 0 #2563eb inset, 0 1px 2px rgba(0, 0, 0, 0.04);
}

.stafferi-tabs-nav a:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

.stafferi-tab-active a:hover {
    background-color: #fff;
}

.stafferi-tab-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.stafferi-tab-disabled a {
    cursor: default;
    color: #999;
}

.stafferi-tabs-panel {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    min-height: 200px;
    overflow-x: auto;
}

.stafferi-tabs-panel > .perusfieldset {
    margin-left: auto;
    margin-right: auto;
}

.stafferi-tab-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.stafferi-tabs-nav a i {
    margin-right: 8px;
    color: #007bff;
}

/* Keep jQuery UI .ui-tabs styles for any other pages still using them */
.ui-tabs { font-size: 12px; margin: 5px; width: 95% !important; border: 1px solid #ddd; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 5px; background-color: #f8f9fa; }
.ui-tabs-nav { margin: 0; padding: 0; display: flex; background-color: #e9ecef; border-bottom: 1px solid #ddd; border-radius: 5px 5px 0 0; list-style: none; }
.ui-tabs-tab { margin: 0; padding: 0; }
.ui-tabs-anchor { display: block; padding: 10px 15px; color: #007bff; text-decoration: none; font-weight: bold; border-right: 1px solid #ddd; transition: background-color 0.3s, color 0.3s; }
.ui-tabs-nav li:last-child .ui-tabs-anchor { border-right: none; }
.ui-tabs-active .ui-tabs-anchor { background-color: #fff; color: #000; border-bottom: 2px solid #007bff; }
.ui-tabs-anchor:hover { background-color: #dfe3e6; color: #0056b3; }
.ui-tabs-panel { padding: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 0 0 5px 5px; }
.ui-tabs-anchor i { margin-right: 8px; color: #007bff; }

.content {
margin-left: auto;
    margin-right: auto;
    padding: 1vm;
    
    min-width: 95vw;
    min-height: 1px;
}

.daybox_2 {
display: inline-block;
    padding: 8px 12px;
    margin: 4px;
    background-color: #f0f4fa; 
    border: 1px solid #d1d9e6; 
    border-radius: 6px; 
    font-size: 14px;
    font-weight: bold;
    color: #2c3e50; 
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.shift-list {
list-style-type: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-left: 10px;
}

.shift-list li {
background-color: #f0f4fa; 
    border: 1px solid #d1d9e6; 
    border-radius: 6px; 
    padding: 3px 6px; 
    font-size: 14px; 
    font-weight: 500; 
    color: #2c3e50; 
    text-align: center; 
    transition: all 0.3s ease-in-out; 
    cursor: default;
}

.shift-list li:hover {
background-color: #1abc9c; 
    color: #ffffff; 
    border-color: #16a085; 
    transform: translateY(-2px);
}

input[type="text"]:not(.person-details-table input[type="text"]) {
width: 96%; 
    max-width: 400px; 
    padding: 2px 4px; 
    margin: 8px 0; 
    font-size: 16px; 
    font-family: Arial, sans-serif; 
    border: 2px solid #ddd; 
    border-radius: 6px; 
    outline: none; 
    background-color: #f9f9f9; 
    transition: all 0.3s ease-in-out;
}

input[type="text"]:not(.person-details-table input[type="text"]):hover {
border-color: #aaa; 
    background-color: #fff;
}

input[type="text"]:not(.person-details-table input[type="text"]):focus {
border-color: #007BFF; 
    background-color: #fff; 
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="text"]::placeholder {
color: #aaa; 
    font-style: italic;
}

.datepicker, .hasDatepicker, #startdate, #enddate {
width: 125px !important;
    box-sizing: border-box;
}

.person-details-table .form-input {
width: 100% !important;
    max-width: 300px !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    border: 2px solid #e9ecef !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    transition: all 0.3s ease !important;
}

.person-details-table .form-input:hover {
border-color: #adb5bd !important;
    background-color: #f8f9fa !important;
}

.person-details-table .form-input:focus {
border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important;
    background-color: #fff !important;
}

.form-input:not(.person-details-table .form-input) {
padding: 5px !important;
    font-size: 16px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    width: 100% !important;
    max-width: 98% !important;
    box-sizing: border-box !important;
}

.ui-dialog-titlebar-close {
color: #fff; 
    text-shadow: none; 
    border: none; 
    background: transparent;
}

.ui-dialog-titlebar-close:hover {
background-color: rgba(255, 255, 255, 0.2); 
    border-radius: 50%;
}

.ui-dialog-content {
padding: 20px; 
    line-height: 1.6; 
    color: #555; 
    background-color: #fff;
}

.ui-dialog-buttonpane {
background-color: #f9f9f9; 
    border-top: 1px solid #ccc; 
    text-align: right; 
    padding: 10px;
}

.ui-dialog-buttonpane button {
background-color: #0040FF; 
    color: #fff; 
    border: none; 
    padding: 8px 15px; 
    font-size: 14px; 
    border-radius: 5px; 
    cursor: pointer;
}

.ui-dialog-buttonpane button:hover {
background-color: #0033CC;
}

.planner_koontilista th {
color: black;
    font-weight: bold;
    background-color: #AAD5FF;
}

.hkscan_displaygroup_by_planner td, .planner_koontilista td {
vertical-align: top;
    border-bottom: 1px solid black;
    border-right: 1px solid grey;
}

.hkscan_grouptable tr {
background: transparent !important;
}

.hkscan_grouptable {
text-align: left;
    width: 100%;
}

.hkscan_grouptable td {
white-space: nowrap;
    height: 1px;
    border: 0px;
    padding: 0px;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    white-space: normal;
}

#gantt-container {
display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #ccc;
}

.gantt-row {
display: flex;
    width: 100%;
    border-bottom: 1px solid black;
}

.gantt-cell {
border-right: 1px solid black;
    
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    position: relative;
}

.header-cell {
font-weight: bold;
    background-color: #f7f7f7;
}

.time-cell {
font-weight: bold;
    background-color: #f0f0f0;
    text-align: left;
}

.machine-cell {
background-color: #ffffff;
    min-height: 50px;
    position: relative;
}

.job-bar {
background: linear-gradient(to bottom, #90ee90, #32cd32); 
    border: 1px solid #006400; 
    border-radius: 5px; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
    color: #fff; 
    font-size: 11px; 
    text-align: center;
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    line-height: 1.5em; 
    cursor: grab; 
    position: absolute;
}

.checklist {
list-style-type: none;
    padding: 0;
}

.checklist li {
margin-bottom: 15px;
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.checklist li i {
font-size: 1.75rem;
    margin-right: 15px;
}

.checklist li span {
font-size: 1.25rem;
    color: #212529;
}

.checklist li a {
color: #007bff;
    text-decoration: none;
    margin-left: 10px;
}

.checklist li a:hover {
text-decoration: underline;
}

.modal {
display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
background: white;
    margin: 10% auto;
    padding: 20px;
    width: 50%;
    border-radius: 8px;
}

.close {
float: right;
    font-size: 24px;
    cursor: pointer;
}

a {
color: #0066cc; 
    text-decoration: none; 
    transition: all 0.3s ease; 
    position: relative;
}

a::after {
content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #3399ff; 
    transition: width 0.3s ease;
}

a:hover::after {
width: 100%;
}

#suunnittelutaulu td:hover {
background-color: rgba(0, 123, 255, 0.25); 
    box-shadow: inset 0 0 10px rgba(0, 123, 255, 0.7), 0 0 10px rgba(0, 123, 255, 0.5);
    transform: scale(1.05); 
    border-radius: 6px; 
    cursor: pointer;
}

h1, h2, h3, h4, h5 {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 5px;
    margin: 2px;
}

h1 {
font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    border-bottom: 2px solid #3399ff;
    padding-bottom: 0.2em;
}

h2 {
font-size: clamp(1.2rem, 3vw, 1.6rem);
    border-left: 4px solid #3399ff;
    padding-left: 0.5em;
}

h3 {
font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    color: #1a73e8;
}

h4 {
font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 500;
    text-transform: uppercase;
    color: #555;
}

h5 {
font-size: clamp(0.95rem, 2.5vw, 1.2rem);
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0;
    margin: 0;
}

.planner_personinfo_box {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    color: #2c3e50;
    background-color: #fff;
    border: 1px solid grey !important;
    border-radius: 0px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    outline: none;
}

.planner_personinfo_box:hover {
border-color: #3399ff;
    box-shadow: 0 0 4px rgba(51, 153, 255, 0.25);
}

.planner_personinfo_box:focus {
border-color: #2679ff;
    box-shadow: 0 0 6px rgba(38, 121, 255, 0.4);
    background-color: #f9fbff;
}

#pop-up {
display: none; 
    position: absolute;
    background-color: #fff;
    color: #222;
    border: 1px solid #aaa;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    max-width: 250px;
    pointer-events: none;
}

.dt-length {
float: right;
    position: relative;
    z-index: 1000;
    margin-left: 10px;
}

.dt-search {
float: right;
    z-index: 1000;
    position: relative;
}

.table-scroll {
overflow-x: auto;
    scrollbar-width: auto; 
    scrollbar-color: #007bff #f1f1f1;
}

table.dataTable > tbody > tr > th, table.dataTable > tbody > tr > td {
padding: 4px 5px;
}

/* ==========================================================================
   AJAX Loader - Modern CSS Spinner
   ========================================================================== */

/* Main loader overlay - transparent, no dimming */
.ajax-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Visible state */
.ajax-loader.visible,
#ajax_loader[style*="display: block"],
#ajax_loader[style*="display:block"] {
    display: flex !important;
}

/* Loader content - transparent, no box */
.ajax-loader-content {
    background: transparent;
    padding: 0;
    text-align: center;
}

/* Bouncing dots loader - scales with viewport */
.ajax-spinner {
    display: flex;
    gap: clamp(8px, 1.2vw, 14px);
    justify-content: center;
    align-items: flex-end;
    margin: 0 auto;
}
.ajax-spinner span {
    width: clamp(10px, 2vw, 18px);
    height: clamp(10px, 2vw, 18px);
    border-radius: 50%;
    background: #007bff;
    animation: ajax-bounce 0.6s ease-in-out infinite both;
}
.ajax-spinner span:nth-child(1) { animation-delay: 0s; }
.ajax-spinner span:nth-child(2) { animation-delay: 0.1s; }
.ajax-spinner span:nth-child(3) { animation-delay: 0.2s; }

@keyframes ajax-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-100%); }
}

/* Legacy spinner animation (used by .spinner-sm, .spinner-md, .btn-loading, etc.) */
@keyframes ajax-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loader with message */
.ajax-loader-message:not(:empty) ~ .ajax-spinner,
.ajax-spinner:has(~ .ajax-loader-message:not(:empty)) {
    margin-bottom: 8px;
}

.ajax-loader-message:not(:empty) {
    margin-top: 8px;
}

/* Loading message text */
.ajax-loader-message {
    display: block;
    font-size: 12px;
    color: #555;
    font-weight: 500;
}

/* Legacy support: fade animations */
#ajax_loader {
    transition: opacity 0.2s ease;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Legacy #ajax-loader-img support (if still used elsewhere) */
#ajax-loader-img {
    transition: opacity 0.3s ease;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* ==========================================================================
   Inline Loading Indicators
   ========================================================================== */

/* Inline loading container */
.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

/* Small inline spinner */
.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: ajax-spin 0.8s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* Medium spinner variant */
.spinner-md {
    width: 24px;
    height: 24px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: ajax-spin 0.8s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* Large spinner variant */
.spinner-lg {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: ajax-spin 0.8s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* Spinner color variants */
.spinner-white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

.spinner-dark {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #333;
}

.spinner-success {
    border-color: rgba(40, 167, 69, 0.2);
    border-top-color: #28a745;
}

.spinner-danger {
    border-color: rgba(220, 53, 69, 0.2);
    border-top-color: #dc3545;
}

/* ==========================================================================
   Skeleton Loading Placeholders
   ========================================================================== */

/* Base skeleton placeholder */
.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* Skeleton animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Text placeholder (single line) */
.placeholder-text {
    height: 1em;
    width: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.placeholder-text:last-child {
    width: 60%;
}

/* Paragraph placeholder */
.placeholder-paragraph {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.placeholder-paragraph .placeholder-text:nth-child(1) { width: 100%; }
.placeholder-paragraph .placeholder-text:nth-child(2) { width: 90%; }
.placeholder-paragraph .placeholder-text:nth-child(3) { width: 75%; }

/* Avatar/image placeholder */
.placeholder-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    flex-shrink: 0;
}

.placeholder-avatar-lg {
    width: 64px;
    height: 64px;
}

/* Card/block placeholder */
.placeholder-card {
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.placeholder-card .placeholder-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.placeholder-card .placeholder-title {
    height: 1.2em;
    width: 50%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* Table row placeholder */
.placeholder-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.placeholder-row .placeholder-cell {
    height: 1em;
    flex: 1;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ==========================================================================
   Button Loading States
   ========================================================================== */

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading .fa-spinner {
    margin-right: 6px;
}

/* Button loading with overlay (for text preservation) */
.btn-loading-overlay {
    position: relative;
    color: transparent !important;
}

.btn-loading-overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ajax-spin 0.8s linear infinite;
}

/* Dark button loading overlay */
.btn-loading-overlay.btn-light::after,
.btn-loading-overlay.btn-outline-dark::after {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #333;
}

/* ==========================================================================
   Content Area Loading States
   ========================================================================== */

/* Loading overlay for content areas */
.content-loading {
    position: relative;
    min-height: 100px;
}

.content-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.content-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    border: 3px solid #f3f3f3;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: ajax-spin 0.8s linear infinite;
    z-index: 11;
}

.fieldset-row {
display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 6px;
}

.stafferi-small-stack {
gap: 6px;
    flex: 1 1 auto;
    align-self: flex-start;
    margin-left: 5px;
}

/* Half-width fieldset layout for wide screens */
.fieldset-row-half > .perusfieldset,
.fieldset-row-half > .stafferi-small-stack {
    max-width: 49%;
}

@media screen and (max-width: 900px) {
    .fieldset-row-half > .perusfieldset,
    .fieldset-row-half > .stafferi-small-stack {
        max-width: 100%;
    }
}

.calendar-left, .calendar-right {
flex: 1 1 50%;
    min-width: 300px;
}

#calendar {
display: flex;
    flex-wrap: nowrap !important;
    gap: 16px;
}

.calendar_huom_row {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 6px;
    font-size: 14px;
}

.calendar_huom_note {
flex: 1;
    word-break: break-word;
}

.calendar_huom_meta {
display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.calendar_huom_meta .ui-icon-trash {
cursor: pointer;
}

form#addevents_form {
max-width: 100%;
}

.form-group label {
display: block;
    font-weight: 500;
    margin-bottom: 5px;
}

.form-select, #alkupvm, #loppupvm {
width: 100%;
    max-width: 200px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.date-range {
display: flex;
    gap: 8px;
    align-items: center;
}

.action-link {
display: inline-block;
    padding: 4px 8px;
    margin: 2px 4px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.action-link:hover {
text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.action-link i {
margin-right: 4px;
}

.edit-link {
color: #007bff;
    background-color: #e7f3ff;
    border-color: #b3d9ff;
}

.edit-link:hover {
color: #0056b3;
    background-color: #d1ecf1;
    border-color: #007bff;
}

.delete-link {
color: #dc3545;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.delete-link:hover {
color: #721c24;
    background-color: #f1b0b7;
    border-color: #dc3545;
}

.planner-badge {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 9px;
    line-height: 1.1;
    padding: 1px 1px;
    margin: 1px 1px 1px 1px;
    border-radius: 1px;
    display: inline-block;
    border: 1px solid transparent;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2);
    white-space: nowrap;
    vertical-align: baseline;
}

.planner-badge-skill {
color: #000;
}

.planner-badge-license {
background-color: #e3f2fd;
    color: #1976d2;
}

.planner-badges-container {
font-size: 9px;
    line-height: 1.1;
    margin-top: 0.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    width: 100%;
    box-sizing: border-box;
}

.vuorokesto {
width: 50px !important;
}

.alert-box {
padding: 20px;
    margin: 20px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.alert-box-content {
display: flex;
    align-items: start;
    gap: 15px;
}

.alert-box-icon {
font-size: 24px;
    flex-shrink: 0;
    margin-top: 5px;
}

.alert-box-body {
flex: 1;
}

.alert-box-title {
font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.alert-box-text {
margin: 5px 0;
    line-height: 1.6;
}

.alert-box-section {
background-color: white;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
}

.alert-box-list {
margin: 5px 0 0 20px;
    line-height: 1.8;
}

.alert-box-list li {
margin-bottom: 8px;
}

.alert-box-list strong {
display: block;
    margin-bottom: 4px;
}

.alert-box-list .helper-text {
color: #666;
    font-size: 14px;
    display: block;
    margin-top: 2px;
}

.alert-box-actions {
margin-top: 15px;
    text-align: center;
}

.alert-box-actions a, .alert-box-actions button {
display: inline-block;
    text-decoration: none;
    margin: 0 5px;
}

.alert-box.alert-info {
background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.alert-box.alert-info .alert-box-icon {
color: #0c5460;
}

.alert-box.alert-info .alert-box-section {
border-left: 4px solid #17a2b8;
}

.alert-box.alert-warning {
background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.alert-box.alert-warning .alert-box-icon {
color: #856404;
}

.alert-box.alert-warning .alert-box-title {
color: #856404;
}

.alert-box.alert-warning .alert-box-section {
border-left: 4px solid #ffc107;
}

.alert-box.alert-danger {
background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-box.alert-danger .alert-box-icon {
color: #721c24;
}

.alert-box.alert-danger .alert-box-section {
border-left: 4px solid #dc3545;
}

.alert-box.alert-success {
background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-box.alert-success .alert-box-icon {
color: #155724;
}

.alert-box.alert-success .alert-box-section {
border-left: 4px solid #28a745;
}

.alert-box-tip {
padding: 15px;
    background-color: #e3f2fd;
    border-radius: 6px;
    border-left: 4px solid #2196F3;
    margin-top: 25px;
}

.alert-box-tip p {
margin: 0;
    font-size: 13px;
    color: #1565C0;
    line-height: 1.6;
}

.alert-box-tip i {
margin-right: 8px;
}

/* ========================================
   Shift Form Styling - Modern UI Enhancement
   ======================================== */

/* Shift form fieldset enhancement */
.shift-form-fieldset {
    max-width: 1000px;
    margin: 20px auto;
    padding: 25px;
}

/* Shift form table */
.shift-form-table {
    max-width: 100%;
    margin-bottom: 0;
}

.shift-form-table td {
    padding: 12px 16px !important;
    vertical-align: middle;
}

.shift-form-table td:first-child {
    font-weight: 600;
    color: #495057;
    min-width: 180px;
}

.shift-form-table td:nth-child(2) {
    min-width: 200px;
}

.shift-form-table td:nth-child(3) {
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
}

/* Form inputs */
.shift-form-input {
    width: 100%;
    max-width: 300px;
    padding: 8px 12px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.shift-form-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
    background-color: #f8f9fa;
}

.shift-form-input:hover {
    border-color: #adb5bd;
}

.shift-form-input-small {
    max-width: 100px;
}

/* Form selects */
.shift-form-select {
    padding: 8px 12px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.shift-form-select:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
    background-color: #f8f9fa;
}

.shift-form-select:hover {
    border-color: #adb5bd;
    background-color: #f8f9fa;
}

/* Time separator styling */
.time-separator {
    display: inline-block;
    font-weight: 600;
    color: #495057;
    margin: 0 4px;
    font-size: 16px;
}

/* Duration and unit labels */
.duration-label,
.unit-label {
    display: inline-block;
    font-weight: 600;
    color: #6c757d;
    margin: 0 4px;
    font-size: 14px;
}

/* Checkboxes */
.shift-form-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #4a90e2;
}

.shift-form-checkbox:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* Submit button container */
.shift-form-submit {
    text-align: center;
    padding: 20px 0;
    margin-top: 10px;
    border-top: 2px solid #dee2e6;
}

/* Submit button */
.shift-form-button {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: #ffffff;
    border: none;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    text-transform: none;
    letter-spacing: 0.5px;
}

.shift-form-button:hover {
    background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
}

.shift-form-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.shift-form-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.4), 0 4px 12px rgba(74, 144, 226, 0.3);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .shift-form-fieldset {
        padding: 15px;
        margin: 10px;
    }

    .shift-form-table td {
        display: block;
        width: 100%;
        padding: 8px 10px !important;
    }

    .shift-form-table td:first-child {
        font-weight: 700;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        min-width: auto;
    }

    .shift-form-table td:nth-child(2) {
        padding-top: 12px !important;
        min-width: auto;
    }

    .shift-form-table td:nth-child(3) {
        padding-bottom: 12px !important;
        border-bottom: 2px solid #dee2e6;
        margin-bottom: 10px;
    }

    .shift-form-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: hidden;
    }

    .shift-form-input {
        max-width: 100%;
    }

    .shift-form-select {
        max-width: 100%;
        width: 100%;
    }

    .shift-form-button {
        width: 100%;
        padding: 16px 20px;
    }
}

/* Color picker field adjustment */
#colorselector {
    max-width: 200px;
}

/* Improve form layout spacing */
.shift-form-table tbody tr {
    transition: background-color 0.2s ease;
}

.shift-form-table tbody tr:hover {
    background-color: #f1f3f5 !important;
}

/* ==========================================================================
   Toast Notifications
   Rendered by public/js/errors.js. See showToast() / showSuccess() etc.
   Container: #toast-container with .toast-position-{position} modifier
   Toast: .toast-notification.toast-{success|error|warning|info}
   ========================================================================== */

#toast-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: var(--z-toast);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}

.toast-position-top-right    { top: 20px; right: 20px; align-items: flex-end; }
.toast-position-top-left     { top: 20px; left: 20px; align-items: flex-start; }
.toast-position-top-center   { top: 20px; left: 50%; transform: translateX(-50%); align-items: center; }
.toast-position-bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }
.toast-position-bottom-left  { bottom: 20px; left: 20px; align-items: flex-start; }
.toast-position-bottom-center{ bottom: 20px; left: 50%; transform: translateX(-50%); align-items: center; }

.toast-notification {
    pointer-events: auto;
    min-width: 320px;
    max-width: 600px;
    width: 100%;
    border-radius: var(--toast-radius);
    box-shadow: var(--toast-shadow);
    padding: var(--toast-padding);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.toast-notification:hover {
    transform: translateY(-2px);
    box-shadow: var(--toast-shadow-hover);
}

.toast-notification:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.toast-notification.toast-success {
    background: linear-gradient(135deg, var(--toast-success-bg-start) 0%, var(--toast-success-bg-end) 100%);
    border: 2px solid var(--toast-success-border);
    color: var(--toast-success-fg);
}

.toast-notification.toast-error {
    background: linear-gradient(135deg, var(--toast-error-bg-start) 0%, var(--toast-error-bg-end) 100%);
    border: 2px solid var(--toast-error-border);
    color: var(--toast-error-fg);
}

.toast-notification.toast-warning {
    background: linear-gradient(135deg, var(--toast-warning-bg-start) 0%, var(--toast-warning-bg-end) 100%);
    border: 2px solid var(--toast-warning-border);
    color: var(--toast-warning-fg);
}

.toast-notification.toast-info {
    background: linear-gradient(135deg, var(--toast-info-bg-start) 0%, var(--toast-info-bg-end) 100%);
    border: 2px solid var(--toast-info-border);
    color: var(--toast-info-fg);
}

.toast-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}

.toast-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.toast-icon .bi {
    font-size: 20px;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast-counter {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.75;
    margin-left: 4px;
}

.toast-message {
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.toast-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    flex-wrap: wrap;
}

.toast-actions {
    display: flex;
    gap: 8px;
}

.toast-action {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: inherit;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.toast-action:hover {
    background: rgba(0, 0, 0, 0.16);
}

.toast-action:active {
    transform: scale(0.97);
}

.toast-hide-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.toast-hide-option input[type="checkbox"] {
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.toast-hide-option label {
    cursor: pointer;
    margin: 0;
}

.toast-timestamp {
    font-size: 11px;
    opacity: 0.7;
    margin-left: auto;
}

.toast-close {
    position: absolute;
    right: 12px;
    top: 12px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.6);
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    padding: 0;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.toast-close:active {
    transform: scale(0.95);
}

/* ---- Entry/exit animations (position-aware) ---- */
@keyframes toastSlideInFromTop {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)     scale(1); }
}

@keyframes toastSlideInFromBottom {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes toastSlideOutToTop {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-20px) scale(0.95); }
}

@keyframes toastSlideOutToRight {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(20px) scale(0.95); }
}

@keyframes toastSlideOutToLeft {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(-20px) scale(0.95); }
}

@keyframes toastPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.toast-position-top-right .toast-notification,
.toast-position-top-left .toast-notification,
.toast-position-top-center .toast-notification {
    animation: toastSlideInFromTop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-position-bottom-right .toast-notification,
.toast-position-bottom-left .toast-notification,
.toast-position-bottom-center .toast-notification {
    animation: toastSlideInFromBottom 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-position-top-right    .toast-notification.closing { animation: toastSlideOutToRight 0.2s ease forwards; }
.toast-position-top-left     .toast-notification.closing { animation: toastSlideOutToLeft  0.2s ease forwards; }
.toast-position-top-center   .toast-notification.closing,
.toast-position-bottom-center .toast-notification.closing { animation: toastSlideOutToTop 0.2s ease forwards; }
.toast-position-bottom-right .toast-notification.closing { animation: toastSlideOutToRight 0.2s ease forwards; }
.toast-position-bottom-left  .toast-notification.closing { animation: toastSlideOutToLeft  0.2s ease forwards; }

.toast-notification.toast-pulse {
    animation: toastPulse 0.3s ease;
}

/* ---- Reduced motion: respect user preference ---- */
@media (prefers-reduced-motion: reduce) {
    .toast-notification,
    .toast-notification.closing,
    .toast-notification.toast-pulse {
        animation: none !important;
        transition: opacity 0.1s linear !important;
    }
    .toast-notification.closing {
        opacity: 0;
    }
}

/* ---- Mobile layout ---- */
@media (max-width: 768px) {
    #toast-container {
        max-width: calc(100vw - 20px);
    }

    .toast-position-top-right,
    .toast-position-top-left,
    .toast-position-bottom-right,
    .toast-position-bottom-left,
    .toast-position-top-center,
    .toast-position-bottom-center {
        left: 10px;
        right: 10px;
        transform: none;
        align-items: stretch;
    }

    .toast-notification {
        min-width: 0;
        max-width: 100%;
    }
}

/* ---- Debug overlay (?toastdebug=1) ---- */
#toast-debug-overlay {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: 380px;
    max-height: 50vh;
    overflow: auto;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font: 11px monospace;
    padding: 8px;
    border-radius: 6px;
    z-index: var(--z-debug-overlay);
    pointer-events: auto;
}

#toast-debug-overlay .tdo-header {
    font-weight: 700;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 4px;
}

#toast-debug-overlay .tdo-row {
    display: grid;
    grid-template-columns: 60px 60px 1fr;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

#toast-debug-overlay .tdo-error   { color: #ff8a8a; }
#toast-debug-overlay .tdo-warning { color: #ffe28a; }
#toast-debug-overlay .tdo-success { color: #8aff9c; }
#toast-debug-overlay .tdo-info    { color: #8ad0ff; }

/* ==========================================
   Person Page - Modern Form Layout
   ========================================== */

.person-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    padding: 4px 0;
}

.person-form-grid .form-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.person-form-grid .form-field:nth-child(4n+3),
.person-form-grid .form-field:nth-child(4n+4) {
    background-color: #f1f5f9;
}

.person-form-grid .form-field:hover {
    background-color: #e8eef6;
}

.person-form-grid .form-field.full-width {
    grid-column: 1 / -1;
}

.person-form-grid .form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dev-text-light, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.person-form-grid .form-field input[type="text"],
.person-form-grid .form-field input[type="email"],
.person-form-grid .form-field select {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--dev-border, #e2e8f0);
    border-radius: 4px;
    font-size: 13px;
    background-color: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.person-form-grid .form-field input[type="text"]:hover,
.person-form-grid .form-field input[type="email"]:hover,
.person-form-grid .form-field select:hover {
    border-color: #94a3b8;
}

.person-form-grid .form-field input[type="text"]:focus,
.person-form-grid .form-field input[type="email"]:focus,
.person-form-grid .form-field select:focus {
    outline: none;
    border-color: var(--dev-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Section dividers within form */
.person-form-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--dev-border, #e2e8f0);
}

.person-form-section i {
    color: var(--dev-primary, #2563eb);
    font-size: 14px;
}

.person-form-section span {
    font-size: 13px;
    font-weight: 600;
    color: var(--dev-text, #1e293b);
}

/* Toggle switch for checkboxes */
.toggle-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #f8fafc;
    border: 1px solid var(--dev-border, #e2e8f0);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.toggle-field:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.toggle-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dev-text, #1e293b);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.toggle-field label i {
    color: var(--dev-text-light, #64748b);
    font-size: 14px;
}

.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.2s;
    border-radius: 22px;
}

.toggle-switch .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .slider {
    background-color: var(--dev-primary, #2563eb);
}

.toggle-switch input:checked + .slider:before {
    transform: translateX(18px);
}

/* Toggles grid */
.person-toggles-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/* Danger fieldset (terminate section) */
.perusfieldset.danger-zone {
    border-color: #fecaca;
    background-color: #fef2f2;
}

.perusfieldset.danger-zone legend {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}

.perusfieldset.danger-zone .danger-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.perusfieldset.danger-zone .danger-actions input[type="submit"],
.perusfieldset.danger-zone .danger-actions .btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

.perusfieldset.danger-zone .danger-actions input[type="submit"]:hover,
.perusfieldset.danger-zone .danger-actions .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.perusfieldset.danger-zone .danger-actions .btn-cancel-termination {
    background: linear-gradient(135deg, var(--dev-success, #10b981) 0%, #34d399 100%);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.perusfieldset.danger-zone .danger-actions .btn-cancel-termination:hover {
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.perusfieldset.danger-zone .btn-delete {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
}

.termination-status {
    grid-column: 1 / -1;
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.termination-status.terminated {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.termination-status.pending-termination {
    background: #fffbeb;
    border: 1px solid #fed7aa;
    color: #92400e;
}

/* Inline form row (for add shifts, group transfer, etc.) */
.inline-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.inline-form-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dev-text, #1e293b);
    white-space: nowrap;
}

.inline-form-row input[type="text"] {
    padding: 4px 8px;
    border: 1px solid var(--dev-border, #e2e8f0);
    border-radius: 4px;
    font-size: 13px;
    width: 120px;
}

.inline-form-row .date-separator {
    color: var(--dev-text-light, #64748b);
    font-weight: 500;
}

/* Form actions bar */
.form-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px solid var(--dev-border, #e2e8f0);
}

/* Employee account badge */
.employee-account-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    font-size: 13px;
    color: #1e40af;
    font-weight: 500;
}

.employee-account-badge i {
    font-size: 12px;
}

/* Primary group highlight */
.primary-group-info {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    font-size: 13px;
    color: #1e40af;
    font-weight: 500;
    margin-bottom: 8px;
}

.primary-group-info i {
    font-size: 16px;
}

/* Group transfer form */
.group-transfer-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    align-items: center;
    padding: 4px 0;
}

.group-transfer-grid label {
    font-size: 13px;
    font-weight: 500;
    color: var(--dev-text, #1e293b);
    white-space: nowrap;
}

/* Workstation form */
.workstation-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

/* Responsive person page */
@media (max-width: 768px) {
    .person-form-grid {
        grid-template-columns: 1fr;
    }

    .person-toggles-grid {
        grid-template-columns: 1fr;
    }

    .inline-form-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .danger-actions {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .group-transfer-grid {
        grid-template-columns: 1fr;
    }

    .workstation-form-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   Edit Shifts - Person Calendar Components
   ======================================== */

.editshifts-person-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    margin: 0 5px;
    background: linear-gradient(135deg, #e8edff 0%, #dce3ff 100%);
    border: 1px solid #b8c5e6;
    border-radius: 6px;
    font-size: 14px;
}

.editshifts-person-name {
    font-weight: 600;
    color: #1e3a5f;
}

.editshifts-person-nav {
    font-size: 14px;
}

.editshifts-person-nav a {
    color: #2563eb;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.editshifts-person-nav a:hover {
    background-color: #dbeafe;
}

.editshifts-expires {
    color: #dc2626;
    font-size: 12px;
    font-weight: 500;
}

.editshifts-warning {
    font-size: 13px;
    line-height: 1.6;
}

.editshifts-empty-state {
    text-align: center;
    padding: 20px;
    color: #64748b;
    font-style: italic;
}

.editshifts-timebank-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    font-size: 14px;
}

/* ========================================
   Lomatoiveet (Vacation Wishes) Form
   ======================================== */

.lomatoive-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 4px 0;
}

.lomatoive-form-grid .form-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lomatoive-form-grid .form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dev-text-light, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lomatoive-form-grid .form-field input[type="text"],
.lomatoive-form-grid .form-field textarea {
    padding: 6px 10px;
    border: 1px solid var(--dev-border, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.lomatoive-form-grid .form-field input[type="text"]:focus,
.lomatoive-form-grid .form-field textarea:focus {
    outline: none;
    border-color: var(--dev-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

@media (max-width: 768px) {
    .lomatoive-form-grid {
        grid-template-columns: 1fr;
    }
}

/* TES table improvements */
.tes-fieldsets-grid .yleistaulu .tes-balance-row td {
    font-size: 12px;
    color: #64748b;
}

.tes-fieldsets-grid .yleistaulu .tes-summary-row td {
    font-weight: 600;
    background: #eff6ff;
}

.tes-fieldsets-grid .yleistaulu .tes-total-row td {
    font-weight: 700;
    background: #e0f2fe;
    border-top: 2px solid #3b82f6;
}

.tes-saldo-input {
    width: 70px !important;
    padding: 2px 6px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    text-align: right;
    transition: border-color 0.2s;
}

.tes-saldo-input:focus {
    outline: none;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.tes-fieldsets-grid .staffeributton.small {
    font-size: 11px;
    padding: 4px 10px !important;
    margin: 2px 4px 2px 0;
}

.tes-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}

.tes-table {
    font-size: 13px;
}

/* ========================================
   Collapsible Fieldsets
   ======================================== */

.perusfieldset.collapsible > legend {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 36px !important;
}

.perusfieldset.collapsible > legend::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: transform 0.3s ease;
    opacity: 0.8;
}

.perusfieldset.collapsible.collapsed > legend::after {
    transform: translateY(-50%) rotate(-90deg);
}

.perusfieldset.collapsible > .collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    max-height: 1000px;
    opacity: 1;
    padding: 4px 0;
}

.perusfieldset.collapsible.collapsed > .collapsible-content {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

/* ========================================
   Person Page - Right Column Modernization
   ======================================== */

.person-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.person-section-badge.badge-info {
    background: #dbeafe;
    color: #1e40af;
}

.person-section-badge.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.person-section-badge.badge-danger {
    background: #fecaca;
    color: #991b1b;
}

/* Compact info box for person page */
.person-info-compact {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    border-left: 3px solid;
}

.person-info-compact.info-blue {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

.person-info-compact.info-amber {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}

.person-info-compact.info-red {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

/* Compact terminate section */
.terminate-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.terminate-compact .terminate-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.terminate-compact .terminate-form-row label {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.terminate-compact .terminate-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.terminate-compact .terminate-buttons input[type="submit"],
.terminate-compact .terminate-buttons .btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

.terminate-compact .terminate-buttons input[type="submit"]:hover,
.terminate-compact .terminate-buttons .btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.terminate-compact .terminate-buttons .btn-cancel-termination {
    background: linear-gradient(135deg, var(--dev-success, #10b981) 0%, #34d399 100%);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

/* Transfer history compact */
.transfer-history-empty {
    text-align: center;
    padding: 12px;
    color: #94a3b8;
    font-size: 13px;
    font-style: italic;
}

/* ============================================================
   UX Improvements — 2026-03-31
   ============================================================ */

/* --- U10: App Footer ---------------------------------------- */
.app-footer {
    width: 95%;
    text-align: left;
    margin: 30px auto 0;
    padding-bottom: 50px;
}

.app-footer-org {
    padding: 6px 12px;
    font-size: 13px;
    background: #f1f5f9;
    color: #475569;
    border-left: 3px solid #94a3b8;
    border-radius: 4px;
}

.app-footer-org.app-footer-expiry-critical {
    background: #fef2f2;
    color: #991b1b;
    border-left-color: #dc2626;
    font-weight: 600;
}

.app-footer-org.app-footer-expiry-warning {
    background: #fffbeb;
    color: #92400e;
    border-left-color: #f59e0b;
}

.app-footer-info {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
}

.app-footer-stats {
    font-size: 11px;
    margin-top: 5px;
    padding: 3px 8px;
    background-color: #f8fafc;
    border-left: 3px solid #2679ff;
    color: #64748b;
    border-radius: 2px;
}

/* --- U11: Unified table_header to match yleistaulu th ------- */
.table_header {
    background: linear-gradient(135deg, #7db4ea 0%, #6fa0d5 100%) !important;
    color: #000000 !important;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    text-align: center;
    line-height: 20px;
}

/* --- U12: Navigation spacing improvements ------------------- */
.topnav .dropdown > a,
.topnav .nav-item > a {
    padding: 6px 8px;
    font-size: 13px;
    white-space: nowrap;
}

.topnav {
    gap: 2px;
}

/* --- U14: Color swatch preview ------------------------------ */
.color-swatch-preview {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    vertical-align: middle;
    margin-left: 6px;
    cursor: pointer;
}

/* --- U15: Empty state component ----------------------------- */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state-message {
    font-size: 15px;
    margin-bottom: 16px;
    color: #64748b;
}

.empty-state .staffeributton {
    margin-top: 8px;
}

/* --- U1: Breadcrumb navigation ------------------------------ */
.app-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.app-breadcrumb a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.15s;
}

.app-breadcrumb a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.app-breadcrumb .breadcrumb-separator {
    color: #cbd5e1;
    font-size: 11px;
}

.app-breadcrumb .breadcrumb-current {
    color: #1e293b;
    font-weight: 500;
}

@media print {
    .app-breadcrumb { display: none; }
}

/* --- U5: Styled confirm modal ------------------------------- */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: confirmFadeIn 0.15s ease;
}

@keyframes confirmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.confirm-dialog {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 28px 32px 24px;
    max-width: 420px;
    width: 90%;
    animation: confirmSlideIn 0.2s ease;
}

@keyframes confirmSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.confirm-dialog-icon {
    text-align: center;
    margin-bottom: 12px;
    font-size: 36px;
    color: #f59e0b;
}

.confirm-dialog-message {
    font-size: 15px;
    color: #1e293b;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 24px;
    word-wrap: break-word;
}

.confirm-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.confirm-btn-cancel {
    padding: 8px 20px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.confirm-btn-cancel:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.confirm-btn-confirm {
    padding: 8px 20px;
    border: none;
    background: #dc2626;
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.confirm-btn-confirm:hover {
    background: #b91c1c;
}

/* ---------------------------------------------------------------------
 * Module system (MES / HR / HSE)
 *
 * The module sidebar replaces the main Stafferi sidebar when a level-99
 * user enters a module from the dashboard launcher. It's rendered by
 * generateModuleSidebar() in headers/common.php.
 * ------------------------------------------------------------------ */
.sidebar-module .sidebar-module-header {
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
}
.sidebar-module .sidebar-logo i { margin-right: 8px; }

/* High-contrast "Back to Stafferi" button inside module sidebars.
   Dark, filled, with a light hover — always legible regardless of module color. */
.sidebar-module-exit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 12px 10px 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #111827;       /* near-black */
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    transition: background .12s ease, transform .06s ease, box-shadow .12s ease;
}
.sidebar-module-exit i {
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
}
.sidebar-module-exit:hover,
.sidebar-module-exit:focus {
    background: #1f2937;
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}
.sidebar-module-exit:active { transform: translateX(-1px); }

/* Per-module color accents on the sidebar header border — kept subtle;
   the main branding lives in the logo + exit button. */
.sidebar-module-mes .sidebar-module-header { border-top-color: #0b6bcb !important; }
.sidebar-module-hr  .sidebar-module-header { border-top-color: #6b4fbb !important; }
.sidebar-module-hse .sidebar-module-header { border-top-color: #157a3c !important; }

/* Classic-layout "Back to Stafferi" exit button.
   Pushed to the right side of the header, pill-shaped, dark-on-white with
   a visible border — readable on the dark Stafferi navbar and on any
   light-bg theme. Overrides .header2_link's default text color. */
a.header2_link.module-exit-classic,
a.header2_link.module-exit-classic:link,
a.header2_link.module-exit-classic:visited {
    margin-left: auto;
    padding: 6px 14px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: 1px solid #111827 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    text-decoration: none !important;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
a.header2_link.module-exit-classic i {
    color: #111827 !important;
    font-size: 17px;
    line-height: 1;
}
a.header2_link.module-exit-classic:hover,
a.header2_link.module-exit-classic:focus {
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.28);
}
a.header2_link.module-exit-classic:hover i,
a.header2_link.module-exit-classic:focus i {
    color: #ffffff !important;
}

/* Module landing tiles (shared by /mes/landing.php, /hr/index.php,
   /safety/landing.php and the HR sub-landings). */
.module-landing-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 4px;
}
.module-landing-tile {
    display: block;
    padding: 16px 16px 18px 16px;
    background: #fff;
    border: 1px solid var(--dev-border, #e5e7eb);
    border-radius: 10px;
    color: #111827;
    text-decoration: none;
    min-height: 120px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.module-landing-tile:hover {
    text-decoration: none;
    border-color: #9ca3af;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.module-landing-tile .mlt-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
    color: #374151;
}
.module-landing-tile .mlt-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}
.module-landing-tile .mlt-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}



/* ---------------------------------------------------------------
   Adaptive shift-name display for displaygroup-style calendars.
   See includes/shift_display.php for the PHP-side helper.
   Long shift names ("Aamuvuoro 12h") are kept verbatim but rendered
   at a smaller font so day-column cells stay scannable. Short codes
   ("AV", "IV12") never hit these classes.
   --------------------------------------------------------------- */
.dg-shift-mid { font-size: 11px; }
.dg-shift-sm  { font-size: 10px; }

/* Per-page abbreviation toggle in the displaygroup fieldset toolbar.
   Rendered only when at least one visible shifttype name is >10 chars.
   Two label spans live inside the button; CSS swaps which one is
   visible based on the .is-active flag set by the JS handler. */
.dg-abbrev-toggle .dg-abbrev-off { display: none; }
.dg-abbrev-toggle.is-active { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.dg-abbrev-toggle.is-active .dg-abbrev-on  { display: none; }
.dg-abbrev-toggle.is-active .dg-abbrev-off { display: inline; }