/* =========================================================
   Calendar V3 Core
   Base tokens, controls, tables, cards, badges
========================================================= */
:root{
    --tu-v3-sidebar:208px;
    --tu-v3-bg:#f4f9ff;
    --tu-v3-surface:rgba(255,255,255,.84);
    --tu-v3-surface-strong:rgba(255,255,255,.94);
    --tu-v3-line:#c7d7eb;
    --tu-v3-ink:#071a33;
    --tu-v3-muted:#64748b;
    --tu-v3-blue:#1f5f99;
    --tu-v3-blue-dark:#174a7c;
    --tu-v3-purple:#7c3aed;
    --tu-v3-green:#0f766e;
    --tu-v3-orange:#ea580c;
    --tu-v3-red:#dc2626;
    --tu-v3-radius:18px;
    --tu-v3-shadow:0 14px 34px rgba(15,40,70,.08);
    --tu-v3-shadow-lg:0 22px 60px rgba(15,40,70,.14);
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:var(--tu-v3-ink);
    background:
        radial-gradient(circle at 6% 7%,rgba(47,106,167,.12),transparent 30%),
        radial-gradient(circle at 94% 0%,rgba(124,58,237,.08),transparent 24%),
        linear-gradient(135deg,#f8fbff,#eaf5ff);
}

a{color:#174a7c}
a:hover{color:#0f355f}

button,
input,
select,
textarea{
    font-family:inherit;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea{
    width:100%;
    min-height:38px;
    border:1px solid #b8cee6;
    border-radius:12px;
    background:rgba(255,255,255,.90);
    color:#0f2744;
    padding:7px 10px;
    font-size:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

textarea{min-height:110px}

label{
    display:block;
    color:#173454;
    font-size:12px;
    font-weight:950;
    margin:0 0 6px;
}

.tu-btn,
.tu-page button:not(.fc-button),
.tu-page input[type="submit"],
button.tu-btn,
a.tu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:38px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,var(--tu-v3-blue),var(--tu-v3-blue-dark));
    color:white;
    padding:8px 14px;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 10px 22px rgba(31,79,130,.16);
    cursor:pointer;
}

.tu-btn--light,
a.tu-btn--light,
button.tu-btn--light{
    background:rgba(255,255,255,.92);
    color:#173454;
    border:1px solid rgba(188,207,229,.88);
    box-shadow:0 8px 18px rgba(15,40,70,.06);
}

.tu-card,
.tu-kpi-card,
.tu-mini-card,
.tu-document-card,
.tu-store-card,
.tu-status-tile,
.card,
.dashboard-card,
.employees-card,
.tu-admin-card{
    border:1px solid rgba(188,207,229,.88);
    border-radius:var(--tu-v3-radius);
    background:var(--tu-v3-surface);
    box-shadow:var(--tu-v3-shadow);
    backdrop-filter:blur(14px);
}

.tu-card{
    width:100%;
    margin:0 0 14px;
    padding:15px;
}

.tu-card__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(199,215,235,.76);
}

.tu-card__eyebrow,
.tu-page-header__eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:21px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(177,204,232,.75);
    background:rgba(239,247,255,.72);
    color:#4d6b8b;
    font-size:9.5px;
    line-height:1;
    font-weight:950;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.tu-card h2{
    margin:6px 0 0;
    font-size:20px;
    line-height:1.1;
    letter-spacing:-.035em;
}

.tu-table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid rgba(188,207,229,.88);
    border-radius:18px;
    background:rgba(255,255,255,.78);
}

.tu-table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
}

.tu-table th{
    padding:10px 12px;
    color:#163a60;
    font-size:11px;
    font-weight:950;
    letter-spacing:.09em;
    text-transform:uppercase;
    text-align:left;
    background:rgba(248,251,255,.92);
    border-bottom:1px solid rgba(199,215,235,.84);
    white-space:nowrap;
}

.tu-table td{
    padding:10px 12px;
    border-bottom:1px solid rgba(199,215,235,.66);
    vertical-align:top;
    font-size:13px;
}

.tu-table tr:hover td{background:rgba(255,255,255,.48)}

.tu-badge{
    display:inline-flex;
    align-items:center;
    min-height:23px;
    padding:0 9px;
    border-radius:999px;
    background:#eaf2ff;
    color:#174a7c;
    font-size:11.5px;
    font-weight:900;
    white-space:nowrap;
}

.tu-badge--success{background:#dcfce7;color:#047857}
.tu-badge--warning{background:#fff7ed;color:#c2410c}
.tu-badge--danger{background:#fee2e2;color:#b91c1c}
.tu-badge--info{background:#dbeafe;color:#1d4ed8}
.tu-badge--purple{background:#ede9fe;color:#6d28d9}
.tu-badge--muted{background:#e2e8f0;color:#475569}

.tu-empty{
    padding:28px;
    border:1px dashed rgba(148,163,184,.65);
    border-radius:16px;
    color:var(--tu-v3-muted);
    text-align:center;
    background:rgba(255,255,255,.50);
    font-weight:800;
}


/* =========================================================
   Calendar V3 Layout
========================================================= */
body:has(.tu-side-nav){
    padding-left:var(--tu-v3-sidebar);
}

body:has(.tu-side-nav) main,
body:has(.tu-side-nav) .container,
body:has(.tu-side-nav) .dashboard-shell,
body:has(.tu-side-nav) .employees-shell,
body:has(.tu-side-nav) .tu-admin-page,
body:has(.tu-side-nav) .tu-page,
body:has(.tu-side-nav) .calendar-page,
body:has(.tu-side-nav) .calendar-shell{
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:clamp(16px,1.6vw,26px) !important;
    padding-right:clamp(16px,1.6vw,26px) !important;
}

.tu-page{
    width:100%;
    max-width:none;
    padding:16px clamp(16px,1.6vw,26px) 42px;
}

.tu-page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    margin:0 0 14px;
    padding:14px 20px;
    border-radius:18px;
    background:linear-gradient(135deg,#2f6da5,#174a7c);
    color:white;
    box-shadow:0 16px 38px rgba(31,79,130,.17);
}

.tu-page-header__eyebrow{
    border-color:rgba(255,255,255,.36);
    background:rgba(255,255,255,.16);
    color:white;
}

.tu-page-header h1{
    margin:4px 0 0;
    font-size:clamp(26px,1.9vw,36px);
    line-height:1.02;
    letter-spacing:-.055em;
}

.tu-page-header p{
    margin:5px 0 0;
    max-width:820px;
    color:rgba(255,255,255,.92);
    font-size:13px;
    line-height:1.35;
}

.tu-page-header__actions{
    display:flex;
    gap:9px;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.tu-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(145px,1fr));
    gap:12px;
    margin:0 0 14px;
}

.tu-kpi-card{
    padding:14px;
}

.tu-kpi-card strong{
    display:block;
    color:var(--tu-v3-ink);
    font-size:31px;
    line-height:1;
    letter-spacing:-.05em;
}

.tu-kpi-card span{
    display:block;
    margin-top:6px;
    color:#4d6681;
    font-size:12px;
    font-weight:900;
}

.tu-kpi-card small{
    display:block;
    margin-top:4px;
    color:var(--tu-v3-muted);
    font-size:11px;
    font-weight:700;
}

.tu-filter-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(150px,1fr));
    gap:10px;
    align-items:end;
}

.tu-action-row{
    display:flex;
    gap:9px;
    align-items:center;
    flex-wrap:wrap;
}

.tu-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:14px;
}

.tu-list-stack{
    display:grid;
    gap:10px;
}

.tu-list-item{
    display:grid;
    grid-template-columns:42px 1fr auto;
    gap:12px;
    align-items:center;
    border:1px solid rgba(188,207,229,.88);
    border-radius:16px;
    background:rgba(255,255,255,.82);
    padding:12px 14px;
}

.tu-list-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(135deg,#2f6da5,#174a7c);
    color:white;
    font-weight:950;
}

@media(max-width:980px){
    body:has(.tu-side-nav){
        padding-left:0;
        padding-top:60px;
    }

    .tu-page-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .tu-page-header__actions{
        justify-content:flex-start;
    }

    .tu-kpi-grid,
    .tu-filter-grid,
    .tu-list-item{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   Calendar V3 Navigation
========================================================= */
.tu-side-nav{
    position:fixed;
    inset:0 auto 0 0;
    z-index:3000;
    width:var(--tu-v3-sidebar);
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at 0% 0%,rgba(47,106,167,.13),transparent 28%),
        linear-gradient(180deg,rgba(255,255,255,.95),rgba(239,247,255,.91));
    border-right:1px solid rgba(191,211,232,.86);
    box-shadow:12px 0 30px rgba(15,40,70,.08);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
}

.tu-side-nav__brand{
    padding:12px 10px 10px;
    border-bottom:1px solid rgba(191,211,232,.62);
}

.tu-side-nav__brand-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    border-radius:14px;
    background:rgba(255,255,255,.60);
    border:1px solid rgba(191,211,232,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}

.tu-side-nav__brand img{
    width:154px;
    max-width:calc(100% - 18px);
    height:auto;
    object-fit:contain;
}

.tu-side-nav__scroll{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:9px 8px 8px;
}

.tu-side-nav__section{margin-bottom:9px}

.tu-side-nav__label{
    margin:10px 8px 5px;
    color:#7187a2;
    font-size:9.5px;
    line-height:1;
    font-weight:950;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.tu-side-nav__item{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:33px;
    padding:0 8px;
    border-radius:11px;
    color:#223b56;
    text-decoration:none;
    font-size:12.5px;
    font-weight:760;
    letter-spacing:-.01em;
    transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.tu-side-nav__item:hover,
.tu-side-nav__item.is-active{
    color:#123e6b;
    background:rgba(31,79,130,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
    text-decoration:none;
}

.tu-side-nav__item:hover{transform:translateX(2px)}

.tu-side-nav__icon{
    width:18px;
    flex:0 0 18px;
    text-align:center;
    font-size:14px;
}

.tu-side-nav__text{
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.tu-side-nav__account{
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px;
    border-top:1px solid rgba(191,211,232,.62);
    background:rgba(255,255,255,.45);
}

.tu-side-nav__avatar{
    width:32px;
    height:32px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#dcecff,#eff7ff);
    color:#174a7c;
    font-weight:950;
}

.tu-side-nav__account-copy{
    min-width:0;
    flex:1;
}

.tu-side-nav__username{
    color:#0f2744;
    font-weight:950;
    font-size:12.5px;
    margin-bottom:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.tu-side-nav__account-links{
    display:flex;
    gap:8px;
    margin-top:5px;
    font-size:10.5px;
    font-weight:850;
}

.tu-side-nav__account-links a{
    color:#174a7c;
    text-decoration:none;
}

.tu-side-nav-toggle{
    display:none;
    position:fixed;
    top:10px;
    left:10px;
    z-index:3200;
    width:42px;
    height:42px;
    border-radius:15px;
    border:1px solid rgba(191,211,232,.82);
    background:rgba(255,255,255,.93);
    box-shadow:0 12px 26px rgba(15,40,70,.18);
    cursor:pointer;
}

.tu-side-nav-toggle span{
    display:block;
    width:19px;
    height:2px;
    margin:5px auto;
    background:#174a7c;
    border-radius:999px;
}

.tu-side-nav-backdrop{display:none}

@media(max-width:980px){
    .tu-side-nav{
        transform:translateX(-105%);
        transition:transform .22s ease;
        width:min(292px,calc(100vw - 42px));
        box-shadow:24px 0 60px rgba(15,40,70,.24);
    }

    body.tu-side-nav-open .tu-side-nav{transform:translateX(0)}

    .tu-side-nav-toggle{display:block}

    .tu-side-nav-backdrop{
        position:fixed;
        inset:0;
        z-index:2999;
        background:rgba(15,23,42,.40);
        backdrop-filter:blur(5px);
    }

    body.tu-side-nav-open .tu-side-nav-backdrop{display:block}
}


/* =========================================================
   Calendar V3 Dashboard
========================================================= */
.dashboard-shell{
    padding-top:16px !important;
}

.dashboard-hero,
.dashboard-shell .tu-admin-hero{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    padding:14px 20px !important;
    margin-bottom:14px !important;
    border-radius:18px !important;
}

.dashboard-grid,
.widgets-grid{
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    gap:14px !important;
}

.dashboard-calendar-widget,
.widget-calendar,
.planner-widget,
.calendar-widget{
    grid-column:1 / -1 !important;
}

.dashboard-widget:not(.dashboard-calendar-widget),
.widget-card:not(.widget-calendar){
    grid-column:span 4 !important;
    min-width:0 !important;
}

#dashboardCalendar .fc-daygrid-day-frame{
    min-height:100px !important;
}

@media(max-width:1200px){
    .dashboard-widget:not(.dashboard-calendar-widget),
    .widget-card:not(.widget-calendar){
        grid-column:span 6 !important;
    }
}
@media(max-width:800px){
    .dashboard-widget:not(.dashboard-calendar-widget),
    .widget-card:not(.widget-calendar){
        grid-column:1 / -1 !important;
    }
}


/* =========================================================
   Calendar V3 Calendars / FullCalendar
========================================================= */
.calendar-page,
.calendar-shell{
    padding-top:16px !important;
}

.calendar-card,
.calendar-panel{
    width:100% !important;
    max-width:none !important;
    padding:14px !important;
    border-radius:18px !important;
}

.calendar-card .filters,
.calendar-panel .filters,
.calendar-controls{
    display:grid !important;
    grid-template-columns:minmax(170px,.9fr) minmax(220px,1.1fr) minmax(160px,.75fr) auto !important;
    gap:10px !important;
    align-items:end !important;
    position:sticky;
    top:8px;
    z-index:10;
    padding:10px;
    border:1px solid rgba(199,215,235,.72);
    border-radius:16px;
    background:rgba(255,255,255,.84);
    backdrop-filter:blur(12px);
}

.fc{
    width:100% !important;
    border-radius:18px !important;
}

.fc .fc-toolbar{
    gap:10px !important;
    margin-bottom:12px !important;
}

.fc .fc-toolbar-title{
    font-size:22px !important;
    letter-spacing:-.04em !important;
    color:#071a33 !important;
}

.fc .fc-button{
    border-radius:12px !important;
    min-height:34px !important;
    padding:6px 11px !important;
    font-size:12px !important;
    font-weight:800 !important;
}

#employeeCalendar .fc-daygrid-day-frame,
#classesEventsCalendar .fc-daygrid-day-frame,
#dashboardCalendar .fc-daygrid-day-frame{
    min-height:96px !important;
}

.fc .fc-daygrid-day-number{
    font-size:12px !important;
    font-weight:800 !important;
}

.fc .fc-col-header-cell-cushion{
    font-size:11px !important;
    letter-spacing:.08em !important;
}

.fc .fc-event,
.fc .fc-event *{
    font-weight:600 !important;
}

.calendar-legend,
.legend-row{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    padding:10px !important;
    border:1px solid rgba(199,215,235,.72) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.68) !important;
}

.fc-event.employee-entry-medical-leave,
.fc-event.employee-entry-medical-leave-doctor,
.fc-event.employee-entry-doctor{
    background-color:#7c3aed !important;
    border-color:#7c3aed !important;
}

.fc-event.employee-entry-vacation{
    background-color:#2563eb !important;
    border-color:#2563eb !important;
}

.fc-event.employee-entry-personal,
.fc-event.employee-entry-personal-leave{
    background-color:#ea580c !important;
    border-color:#ea580c !important;
}

.fc-event.employee-entry-other,
.fc-event.employee-entry-other-see-notes{
    background-color:#64748b !important;
    border-color:#64748b !important;
}

@media(max-width:900px){
    .calendar-card .filters,
    .calendar-panel .filters,
    .calendar-controls{
        position:static;
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   Calendar V3 Forms
========================================================= */
.form-shell,
.entry-form-shell,
.tu-form-page{
    max-width:none !important;
    width:100% !important;
    padding-top:16px !important;
}

.form-card,
.entry-form-card,
.tu-form-card{
    max-width:1280px !important;
    margin-left:0 !important;
    border-radius:18px !important;
}

.form-grid,
.entry-form-grid,
.tu-form-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(180px,1fr)) !important;
    gap:12px !important;
}

.employees-shell,
.tu-admin-page{
    padding-top:16px !important;
}

.employees-import-card,
.employees-card,
.tu-admin-card{
    padding:14px !important;
    border-radius:18px !important;
}

.employees-filter-grid,
.tu-admin-filter-grid,
.employees-import-grid{
    display:grid !important;
    grid-template-columns:minmax(260px,1.4fr) minmax(160px,.75fr) minmax(160px,.75fr) auto !important;
    gap:10px !important;
    align-items:end !important;
}

.employees-table th,
.tu-admin-table th{
    font-size:11px !important;
}

.employees-table td,
.tu-admin-table td{
    font-size:13px !important;
}

@media(max-width:1000px){
    .form-grid,
    .entry-form-grid,
    .tu-form-grid,
    .employees-filter-grid,
    .tu-admin-filter-grid,
    .employees-import-grid{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   Calendar V3 Operations
========================================================= */
.tu-document-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:14px;
}

.tu-document-card,
.tu-store-card,
.tu-status-tile,
.tu-mini-card{
    padding:15px;
}

.tu-document-card__top,
.tu-store-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.tu-document-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(135deg,#2f6da5,#174a7c);
    color:white;
    font-size:12px;
    font-weight:950;
    letter-spacing:.08em;
}

.tu-document-card h3,
.tu-store-card h3,
.tu-status-tile h3,
.tu-mini-card h3{
    margin:0 0 8px;
    font-size:17px;
    line-height:1.25;
    letter-spacing:-.025em;
}

.tu-document-card p,
.tu-store-card p,
.tu-mini-card p{
    margin:0 0 10px;
    color:var(--tu-v3-muted);
    line-height:1.42;
}

.tu-document-meta{
    display:grid;
    gap:3px;
    margin:12px 0 14px;
}

.tu-document-meta span{
    color:var(--tu-v3-muted);
    font-size:10.5px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.tu-document-meta strong{
    color:var(--tu-v3-ink);
    font-size:13px;
}

.tu-notification-board{
    display:grid;
    gap:14px;
}

.tu-notification-column{
    border:1px solid rgba(188,207,229,.88);
    border-radius:18px;
    background:rgba(255,255,255,.78);
    padding:15px;
    box-shadow:var(--tu-v3-shadow);
}

.tu-store-card-grid,
.tu-status-board-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(275px,1fr));
    gap:14px;
}

.tu-progress{
    height:9px;
    border-radius:999px;
    background:#e2e8f0;
    overflow:hidden;
    margin:12px 0;
}

.tu-progress span{
    display:block;
    height:100%;
    background:linear-gradient(135deg,#16a34a,#22c55e);
    border-radius:999px;
}

.tu-store-card:has(.tu-badge--warning) .tu-progress span{
    background:linear-gradient(135deg,#f59e0b,#f97316);
}

.tu-store-card:has(.tu-badge--danger) .tu-progress span{
    background:linear-gradient(135deg,#dc2626,#ef4444);
}

.tu-store-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.tu-store-metrics div{
    border:1px solid rgba(199,215,235,.84);
    border-radius:14px;
    padding:10px;
    background:rgba(248,251,255,.76);
}

.tu-store-metrics strong{
    display:block;
    font-size:20px;
    line-height:1;
    color:var(--tu-v3-ink);
}

.tu-store-metrics span{
    display:block;
    margin-top:4px;
    color:var(--tu-v3-muted);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}

.tu-status-tile__main{
    margin:12px 0;
    color:#174a7c;
    font-size:40px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.05em;
}

.tu-status-tile__main span{
    display:block;
    margin-top:5px;
    color:var(--tu-v3-muted);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0;
}

.tu-log-table-wrap{
    max-height:640px;
}

.tu-log-table thead th{
    position:sticky;
    top:0;
    z-index:2;
}

.tu-log-table code{
    white-space:pre-wrap;
    color:#334155;
    font-size:12px;
}

.tu-two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.tu-debug-pre{
    max-height:520px;
    overflow:auto;
    padding:14px;
    border-radius:14px;
    background:#0f172a;
    color:#e2e8f0;
    font-size:12px;
    line-height:1.5;
}

@media(max-width:980px){
    .tu-two-column{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   Calendar V3 Utilities
========================================================= */
.tu-hide{display:none !important}
.tu-muted{color:var(--tu-v3-muted)}
.tu-text-right{text-align:right}
.tu-text-center{text-align:center}
.tu-mt-0{margin-top:0 !important}
.tu-mb-0{margin-bottom:0 !important}
.tu-w-full{width:100% !important}
@media print{
    body:has(.tu-side-nav){padding-left:0 !important}
    .tu-side-nav,
    .tu-side-nav-toggle,
    .tu-side-nav-backdrop{display:none !important}
}


/* =========================================================
   V3 Legacy UI Cleanup / Duplicate Menu Removal
========================================================= */

/* Old app-shell/header sidebar should never appear beside V3 nav. */
body:has(.tu-side-nav) .app-shell > .sidebar,
body:has(.tu-side-nav) aside.sidebar,
body:has(.tu-side-nav) .sidebar .brand,
body:has(.tu-side-nav) .sidebar .nav {
    display: none !important;
}

/* If old header wrapper is still used, collapse it into the V3 workspace. */
body:has(.tu-side-nav) .app-shell {
    display: block !important;
    min-height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.tu-side-nav) .main-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px clamp(16px, 1.6vw, 26px) 42px !important;
}

/* Defensive removal of old bottom/inline menu blocks. */
body:has(.tu-side-nav) .calendar-menu,
body:has(.tu-side-nav) .calendar-menu-card,
body:has(.tu-side-nav) .legacy-calendar-menu,
body:has(.tu-side-nav) .menu-card,
body:has(.tu-side-nav) .old-menu,
body:has(.tu-side-nav) nav.nav:not(.tu-side-nav__scroll),
body:has(.tu-side-nav) .nav-card,
body:has(.tu-side-nav) .page-menu,
body:has(.tu-side-nav) .mobile-menu-force,
body:has(.tu-side-nav) .tu-nav-clean,
body:has(.tu-side-nav) .tu-nav-clean__menu {
    display: none !important;
}

/* Legacy centered containers should use full workspace. */
body:has(.tu-side-nav) .container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: clamp(16px, 1.6vw, 26px) !important;
    padding-right: clamp(16px, 1.6vw, 26px) !important;
}

/* Calendar pages from the old markup. */
body:has(.tu-side-nav) .page-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 16px 0 14px !important;
    padding: 14px 20px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #2f6da5, #174a7c) !important;
    color: white !important;
    box-shadow: 0 16px 38px rgba(31,79,130,.17) !important;
}

body:has(.tu-side-nav) .page-head h1 {
    color: white !important;
    margin: 0 0 5px !important;
    font-size: clamp(26px,1.9vw,36px) !important;
    letter-spacing: -.055em !important;
}

body:has(.tu-side-nav) .page-head p {
    color: rgba(255,255,255,.92) !important;
    margin: 0 !important;
    font-size: 13px !important;
}

body:has(.tu-side-nav) .calendar-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.84) !important;
    border: 1px solid rgba(188,207,229,.88) !important;
    box-shadow: 0 14px 34px rgba(15,40,70,.08) !important;
}

body:has(.tu-side-nav) .calendar-controlbar {
    display: grid !important;
    grid-template-columns: minmax(170px,.9fr) minmax(220px,1.1fr) minmax(160px,.75fr) auto !important;
    gap: 10px !important;
    align-items: end !important;
    margin-bottom: 12px !important;
    padding: 10px !important;
    border: 1px solid rgba(199,215,235,.72) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.84) !important;
}

@media(max-width:900px) {
    body:has(.tu-side-nav) .calendar-controlbar {
        grid-template-columns: 1fr !important;
    }
    body:has(.tu-side-nav) .page-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}


/* =========================================================
   V3 Nuclear Legacy Override
========================================================= */
html body {
    background:
        radial-gradient(circle at 6% 7%,rgba(47,106,167,.12),transparent 30%),
        radial-gradient(circle at 94% 0%,rgba(124,58,237,.08),transparent 24%),
        linear-gradient(135deg,#f8fbff,#eaf5ff) !important;
}

body .sidebar:not(.tu-side-nav),
body aside.sidebar:not(.tu-side-nav),
body .app-shell > .sidebar,
body .brand,
body .user-meta,
body nav.nav,
body .calendar-menu,
body .calendar-menu-card,
body .legacy-calendar-menu,
body .menu-card,
body .old-menu,
body .page-menu,
body .mobile-menu,
body .mobile-menu-force,
body .tu-nav-clean,
body .tu-nav-clean__menu,
body .top-nav,
body .main-nav,
body .nav-restore,
body .nav-overrides,
body .calendar-sidebar,
body .calendar-bottom-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

body .tu-side-nav,
body .tu-side-nav *,
body .tu-side-nav-toggle,
body .tu-side-nav-backdrop {
    visibility: visible !important;
}

body:has(.tu-side-nav),
body.tu-v3-body {
    padding-left: 208px !important;
    padding-top: 0 !important;
}

body:has(.tu-side-nav) .app-shell,
body:has(.tu-side-nav) .main-content,
body:has(.tu-side-nav) main,
body:has(.tu-side-nav) .container,
body:has(.tu-side-nav) .dashboard-shell,
body:has(.tu-side-nav) .employees-shell,
body:has(.tu-side-nav) .tu-admin-page,
body:has(.tu-side-nav) .tu-page,
body:has(.tu-side-nav) .calendar-page,
body:has(.tu-side-nav) .calendar-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: clamp(16px,1.6vw,26px) !important;
    padding-right: clamp(16px,1.6vw,26px) !important;
}

body:has(.tu-side-nav) .container { padding-top: 16px !important; }

body:has(.tu-side-nav) .page-head,
body:has(.tu-side-nav) .hero,
body:has(.tu-side-nav) .dashboard-hero,
body:has(.tu-side-nav) .employees-hero,
body:has(.tu-side-nav) .tu-admin-hero,
body:has(.tu-side-nav) .page-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 14px 20px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg,#2f6da5,#174a7c) !important;
    color: #fff !important;
    box-shadow: 0 16px 38px rgba(31,79,130,.17) !important;
}

body:has(.tu-side-nav) .page-head h1,
body:has(.tu-side-nav) .hero h1,
body:has(.tu-side-nav) .dashboard-hero h1,
body:has(.tu-side-nav) .employees-hero h1,
body:has(.tu-side-nav) .tu-admin-hero h1,
body:has(.tu-side-nav) .page-hero h1 {
    color: #fff !important;
    margin: 0 0 5px !important;
    font-size: clamp(26px,1.9vw,36px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em !important;
}

body:has(.tu-side-nav) .page-head p,
body:has(.tu-side-nav) .hero p,
body:has(.tu-side-nav) .dashboard-hero p,
body:has(.tu-side-nav) .employees-hero p,
body:has(.tu-side-nav) .tu-admin-hero p,
body:has(.tu-side-nav) .page-hero p {
    color: rgba(255,255,255,.92) !important;
    margin: 0 !important;
    font-size: 13px !important;
}

body:has(.tu-side-nav) .calendar-controlbar,
body:has(.tu-side-nav) .filters,
body:has(.tu-side-nav) .employees-filter-grid,
body:has(.tu-side-nav) .tu-admin-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(150px,1fr)) !important;
    gap: 10px !important;
    align-items: end !important;
}

@media (max-width: 980px) {
    body:has(.tu-side-nav),
    body.tu-v3-body {
        padding-left: 0 !important;
        padding-top: 60px !important;
    }

    body:has(.tu-side-nav) .calendar-controlbar,
    body:has(.tu-side-nav) .filters,
    body:has(.tu-side-nav) .employees-filter-grid,
    body:has(.tu-side-nav) .tu-admin-filter-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V3 Full PHP Conversion Support
   Added for dashboard, calendars, employees, users, reminders, forms.
========================================================= */

/* One source of truth: old page classes are mapped to V3 behavior. */
body.tu-v3-body,
body:has(.tu-side-nav) {
    background:
        radial-gradient(circle at 6% 7%, rgba(47,106,167,.12), transparent 30%),
        radial-gradient(circle at 94% 0%, rgba(124,58,237,.08), transparent 24%),
        linear-gradient(135deg, #f8fbff, #eaf5ff) !important;
}

body:has(.tu-side-nav) .tu-page,
body.tu-v3-body .tu-page {
    max-width: none !important;
    width: 100% !important;
    padding: 16px clamp(16px, 1.6vw, 26px) 42px !important;
    margin: 0 !important;
}

/* Old containers that still exist inside converted PHP. */
body:has(.tu-side-nav) .dashboard-shell,
body:has(.tu-side-nav) .calendar-shell,
body:has(.tu-side-nav) .employees-shell,
body:has(.tu-side-nav) .tu-admin-page,
body:has(.tu-side-nav) .form-shell,
body:has(.tu-side-nav) .entry-form-shell {
    max-width: none !important;
    width: 100% !important;
}

/* Headers: old and new. */
body:has(.tu-side-nav) .page-head,
body:has(.tu-side-nav) .dashboard-hero,
body:has(.tu-side-nav) .employees-hero,
body:has(.tu-side-nav) .tu-admin-hero,
body:has(.tu-side-nav) .page-hero,
body:has(.tu-side-nav) .form-hero,
body:has(.tu-side-nav) .entry-form-hero {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    width:100% !important;
    margin:0 0 14px !important;
    padding:14px 20px !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,#2f6da5,#174a7c) !important;
    color:#fff !important;
    box-shadow:0 16px 38px rgba(31,79,130,.17) !important;
}

body:has(.tu-side-nav) .page-head h1,
body:has(.tu-side-nav) .dashboard-hero h1,
body:has(.tu-side-nav) .employees-hero h1,
body:has(.tu-side-nav) .tu-admin-hero h1,
body:has(.tu-side-nav) .page-hero h1,
body:has(.tu-side-nav) .form-hero h1,
body:has(.tu-side-nav) .entry-form-hero h1 {
    color:#fff !important;
    margin:0 0 5px !important;
    font-size:clamp(26px,1.9vw,36px) !important;
    line-height:1.02 !important;
    letter-spacing:-.055em !important;
}

body:has(.tu-side-nav) .page-head p,
body:has(.tu-side-nav) .dashboard-hero p,
body:has(.tu-side-nav) .employees-hero p,
body:has(.tu-side-nav) .tu-admin-hero p,
body:has(.tu-side-nav) .page-hero p,
body:has(.tu-side-nav) .form-hero p,
body:has(.tu-side-nav) .entry-form-hero p {
    color:rgba(255,255,255,.92) !important;
    margin:0 !important;
    font-size:13px !important;
}

/* Calendar shell/components. */
.calendar-shell,
.dashboard-card,
.widget-card,
.dashboard-widget,
.employees-card,
.employees-import-card,
.tu-admin-card,
.tu-admin-help-card,
.form-card,
.entry-form-card,
.card {
    border:1px solid rgba(188,207,229,.88) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.84) !important;
    box-shadow:0 14px 34px rgba(15,40,70,.08) !important;
    backdrop-filter:blur(14px) !important;
}

.calendar-shell {
    padding:14px !important;
    margin:0 !important;
}

.calendar-shell__header,
.employees-card__head,
.tu-admin-card__head {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    margin-bottom:12px !important;
    padding-bottom:10px !important;
    border-bottom:1px solid rgba(199,215,235,.76) !important;
}

.calendar-shell__eyebrow,
.dashboard-hero__eyebrow,
.tu-admin-eyebrow,
.tu-admin-kicker,
.employees-kicker {
    display:inline-flex !important;
    align-items:center !important;
    min-height:21px !important;
    padding:0 8px !important;
    border-radius:999px !important;
    border:1px solid rgba(177,204,232,.75) !important;
    background:rgba(239,247,255,.72) !important;
    color:#4d6b8b !important;
    font-size:9.5px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
}

.dashboard-hero .dashboard-hero__eyebrow,
.tu-admin-hero .tu-admin-eyebrow,
.page-hero .tu-admin-eyebrow {
    border-color:rgba(255,255,255,.36) !important;
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
}

.calendar-controlbar,
.calendar-card .filters,
.calendar-panel .filters,
.employees-filter-grid,
.employees-import-grid,
.tu-admin-filter-grid,
.tu-form-grid,
.form-grid,
.entry-form-grid {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(150px,1fr)) !important;
    gap:10px !important;
    align-items:end !important;
}

.calendar-controlbar {
    position:sticky !important;
    top:8px !important;
    z-index:10 !important;
    padding:10px !important;
    margin-bottom:12px !important;
    border:1px solid rgba(199,215,235,.72) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.84) !important;
    backdrop-filter:blur(12px) !important;
}

.calendar-legend,
.legend-row {
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    padding:10px !important;
    border:1px solid rgba(199,215,235,.72) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.68) !important;
}

.legend-pill,
.tu-type-pill,
.status-pill,
.employee-status-pill,
.tu-admin-count {
    display:inline-flex !important;
    align-items:center !important;
    min-height:23px !important;
    padding:0 9px !important;
    border-radius:999px !important;
    background:#eaf2ff !important;
    color:#174a7c !important;
    font-size:11.5px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
}

/* Dashboard. */
.dashboard-grid,
.widgets-grid {
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    gap:14px !important;
}

.dashboard-calendar-widget,
.widget-calendar,
.planner-widget,
.calendar-widget {
    grid-column:1 / -1 !important;
}

.dashboard-widget:not(.dashboard-calendar-widget),
.widget-card:not(.widget-calendar) {
    grid-column:span 4 !important;
    min-width:0 !important;
}

.dashboard-card,
.dashboard-widget,
.widget-card {
    padding:15px !important;
}

/* Tables. */
.tu-admin-table,
.employees-table,
table:not(.fc-scrollgrid):not(.fc-col-header):not(.fc-daygrid-body table) {
    width:100% !important;
    border-collapse:collapse !important;
}

.tu-admin-table th,
.employees-table th,
table:not(.fc-scrollgrid):not(.fc-col-header):not(.fc-daygrid-body table) th {
    padding:10px 12px !important;
    color:#163a60 !important;
    font-size:11px !important;
    font-weight:950 !important;
    letter-spacing:.09em !important;
    text-transform:uppercase !important;
    text-align:left !important;
    background:rgba(248,251,255,.92) !important;
    border-bottom:1px solid rgba(199,215,235,.84) !important;
    white-space:nowrap !important;
}

.tu-admin-table td,
.employees-table td,
table:not(.fc-scrollgrid):not(.fc-col-header):not(.fc-daygrid-body table) td {
    padding:10px 12px !important;
    border-bottom:1px solid rgba(199,215,235,.66) !important;
    vertical-align:top !important;
    font-size:13px !important;
}

/* Forms. */
.form-group,
.field,
.tu-form-field,
.mu-user-field {
    display:grid !important;
    gap:6px !important;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
    min-height:38px !important;
    border:1px solid #b8cee6 !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.90) !important;
    color:#0f2744 !important;
    padding:7px 10px !important;
    font-size:13px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
}

label {
    color:#173454 !important;
    font-size:12px !important;
    font-weight:950 !important;
}

.btn,
.tu-admin-hero-btn,
.tu-admin-button,
button:not(.fc-button):not(.tu-side-nav-toggle),
input[type="submit"],
a.btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:38px !important;
    border:0 !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,#1f5f99,#174a7c) !important;
    color:white !important;
    padding:8px 14px !important;
    font-size:13px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    box-shadow:0 10px 22px rgba(31,79,130,.16) !important;
    cursor:pointer !important;
}

.btn-secondary,
.tu-btn--light,
button.btn-secondary,
a.btn-secondary {
    background:rgba(255,255,255,.92) !important;
    color:#173454 !important;
    border:1px solid rgba(188,207,229,.88) !important;
    box-shadow:0 8px 18px rgba(15,40,70,.06) !important;
}

/* Manage Users modal should stay usable. */
#userModal .mu-user-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(240px,1fr)) !important;
    gap:16px 20px !important;
}

#userModal .mu-modal-actions,
#userModal .mu-user-actions,
#userModal .modal-actions {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    padding:18px 0 24px !important;
    margin-top:12px !important;
    position:sticky !important;
    bottom:0 !important;
    background:linear-gradient(180deg,rgba(232,244,255,.05),rgba(232,244,255,.96) 35%,rgba(232,244,255,.99)) !important;
}

/* FullCalendar. */
.fc .fc-toolbar-title {
    font-size:22px !important;
    letter-spacing:-.04em !important;
    color:#071a33 !important;
}

.fc .fc-button {
    border-radius:12px !important;
    min-height:34px !important;
    padding:6px 11px !important;
    font-size:12px !important;
    font-weight:800 !important;
}

.fc .fc-event,
.fc .fc-event * {
    font-weight:600 !important;
}

#employeeCalendar .fc-daygrid-day-frame,
#classesEventsCalendar .fc-daygrid-day-frame,
#dashboardCalendar .fc-daygrid-day-frame,
#calendar .fc-daygrid-day-frame {
    min-height:96px !important;
}

/* Event colors */
.fc-event.employee-entry-medical-leave,
.fc-event.employee-entry-medical-leave-doctor,
.fc-event.employee-entry-doctor,
.fc-event[data-type*="Medical"],
.fc-event[data-type*="Doctor"] {
    background-color:#7c3aed !important;
    border-color:#7c3aed !important;
}
.fc-event.employee-entry-vacation,
.fc-event[data-type*="Vacation"] {
    background-color:#2563eb !important;
    border-color:#2563eb !important;
}
.fc-event.employee-entry-personal,
.fc-event.employee-entry-personal-leave,
.fc-event[data-type*="Personal"] {
    background-color:#ea580c !important;
    border-color:#ea580c !important;
}
.fc-event.employee-entry-other,
.fc-event.employee-entry-other-see-notes,
.fc-event[data-type*="Other"] {
    background-color:#64748b !important;
    border-color:#64748b !important;
}

/* Kill duplicate/legacy menus. */
body .sidebar:not(.tu-side-nav),
body aside.sidebar:not(.tu-side-nav),
body .app-shell > .sidebar,
body .calendar-menu,
body .calendar-menu-card,
body .legacy-calendar-menu,
body .menu-card,
body .old-menu,
body .page-menu,
body .mobile-menu,
body .mobile-menu-force,
body .tu-nav-clean,
body .tu-nav-clean__menu,
body .top-nav,
body .main-nav,
body .calendar-bottom-menu,
body nav.nav:not(.tu-side-nav__scroll) {
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    overflow:hidden !important;
}

@media(max-width:1200px){
    .dashboard-widget:not(.dashboard-calendar-widget),
    .widget-card:not(.widget-calendar){
        grid-column:span 6 !important;
    }
}
@media(max-width:980px){
    .page-head,
    .dashboard-hero,
    .employees-hero,
    .tu-admin-hero,
    .page-hero,
    .form-hero,
    .entry-form-hero{
        flex-direction:column !important;
        align-items:flex-start !important;
    }
    .calendar-controlbar,
    .employees-filter-grid,
    .employees-import-grid,
    .tu-admin-filter-grid,
    .tu-form-grid,
    .form-grid,
    .entry-form-grid,
    #userModal .mu-user-grid {
        grid-template-columns:1fr !important;
    }
    .dashboard-widget:not(.dashboard-calendar-widget),
    .widget-card:not(.widget-calendar){
        grid-column:1 / -1 !important;
    }
}


/* =========================================================
   V3 Page Template Rebuild CSS
========================================================= */
.tu-kpi-grid--six {
    grid-template-columns: repeat(6, minmax(130px, 1fr)) !important;
}

.tu-command-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 0 0 14px;
}

.tu-command-card {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 132px;
    padding: 18px;
    border: 1px solid rgba(188,207,229,.88);
    border-radius: 18px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 34px rgba(15,40,70,.08);
    color: #071a33;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.tu-command-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(15,40,70,.12);
    text-decoration: none;
}

.tu-command-card span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(135deg,#2f6da5,#174a7c);
    color: white;
    font-size: 20px;
}

.tu-command-card strong {
    font-size: 18px;
    letter-spacing: -.025em;
}

.tu-command-card small {
    color: #64748b;
    font-weight: 750;
}

.tu-notification-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 14px;
}

.tu-notification-group {
    padding: 15px;
    border: 1px solid rgba(188,207,229,.88);
    border-radius: 18px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 34px rgba(15,40,70,.08);
}

.tu-store-compact-list {
    display: grid;
    gap: 10px;
}

.tu-store-compact-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 220px) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(199,215,235,.72);
    border-radius: 16px;
    background: rgba(255,255,255,.70);
}

.tu-store-compact-row strong {
    display: block;
    color: #071a33;
}

.tu-store-compact-row span {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-top: 2px;
}

.tu-progress--mini {
    margin: 0 !important;
}

.tu-field {
    display: grid;
    gap: 6px;
}

.tu-page .tu-list-item span,
.tu-page .tu-list-item small {
    color: #64748b;
}

.tu-page .tu-list-item strong {
    color: #071a33;
}

@media(max-width:1300px) {
    .tu-kpi-grid--six {
        grid-template-columns: repeat(3, minmax(145px, 1fr)) !important;
    }
}
@media(max-width:900px) {
    .tu-kpi-grid--six,
    .tu-notification-group-grid,
    .tu-store-compact-row {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V3 Menu + Form Final Fix
========================================================= */
.mobile-menu-panel,
.mobile-menu-toggle,
.mobile-menu-backdrop,
.calendar-menu,
.calendar-menu-card,
.legacy-calendar-menu,
.tu-nav-clean,
.tu-nav-clean__menu,
.old-menu,
.page-menu,
.calendar-bottom-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Hide text-only old menu blocks that land after main content. */
body > main ~ details,
body > main ~ summary,
body > main ~ nav:not(.tu-side-nav__scroll),
body > main ~ ul,
body > main ~ h3,
body > main ~ div:not(.modal):not(.modal-backdrop):not(.tu-side-nav-backdrop) {
    display: none !important;
}

/* Employee/Class form pages: make them look like real V3 cards instead of stretched rows. */
.employee-entry-form-page,
.class-event-form-page,
body:has(form[action="save_entry.php"]),
body:has(form[action="save_event.php"]) {
    --tu-form-max: 1240px;
}

body:has(.tu-side-nav) .employee-entry-form-page,
body:has(.tu-side-nav) .class-event-form-page,
body:has(.tu-side-nav) main.employee-entry-form-page,
body:has(.tu-side-nav) main.class-event-form-page {
    padding-top: 16px !important;
}

body:has(.tu-side-nav) form[action="save_entry.php"],
body:has(.tu-side-nav) form[action="save_event.php"],
body:has(.tu-side-nav) form[action="save_class_event.php"],
body:has(.tu-side-nav) form[action="class_event_form.php"],
body:has(.tu-side-nav) .entry-form-card form,
body:has(.tu-side-nav) .form-card form {
    max-width: var(--tu-form-max) !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(188,207,229,.88) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: 0 14px 34px rgba(15,40,70,.08) !important;
}

body:has(.tu-side-nav) .entry-form-card,
body:has(.tu-side-nav) .form-card,
body:has(.tu-side-nav) .tu-form-card {
    max-width: var(--tu-form-max) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:has(.tu-side-nav) form[action="save_entry.php"] > .form-grid,
body:has(.tu-side-nav) form[action="save_event.php"] > .form-grid,
body:has(.tu-side-nav) form[action="save_class_event.php"] > .form-grid,
body:has(.tu-side-nav) .entry-form-grid,
body:has(.tu-side-nav) .tu-form-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(190px, 1fr)) !important;
    gap: 14px !important;
    align-items: end !important;
}

body:has(.tu-side-nav) form[action="save_entry.php"] label,
body:has(.tu-side-nav) form[action="save_event.php"] label,
body:has(.tu-side-nav) form[action="save_class_event.php"] label {
    margin-top: 10px !important;
}

body:has(.tu-side-nav) form[action="save_entry.php"] textarea,
body:has(.tu-side-nav) form[action="save_event.php"] textarea,
body:has(.tu-side-nav) form[action="save_class_event.php"] textarea {
    min-height: 130px !important;
}

body:has(.tu-side-nav) .form-actions,
body:has(.tu-side-nav) .tu-form-actions,
body:has(.tu-side-nav) .entry-form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(199,215,235,.76) !important;
}

/* Old simple H1 form headers get a compact V3 hero if no explicit hero exists. */
body:has(.tu-side-nav) main.employee-entry-form-page > h1:first-child,
body:has(.tu-side-nav) main.class-event-form-page > h1:first-child {
    max-width: var(--tu-form-max) !important;
    margin: 0 0 14px !important;
    padding: 14px 20px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg,#2f6da5,#174a7c) !important;
    color: #fff !important;
    box-shadow: 0 16px 38px rgba(31,79,130,.17) !important;
    font-size: clamp(26px,1.9vw,36px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em !important;
}

@media(max-width: 1000px) {
    body:has(.tu-side-nav) form[action="save_entry.php"] > .form-grid,
    body:has(.tu-side-nav) form[action="save_event.php"] > .form-grid,
    body:has(.tu-side-nav) form[action="save_class_event.php"] > .form-grid,
    body:has(.tu-side-nav) .entry-form-grid,
    body:has(.tu-side-nav) .tu-form-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V3 Dashboard + Form Layout Fix
   Fixes dash-widget grid spans and old form shells.
========================================================= */

/* Dashboard widget grid uses dash-widget classes, not dashboard-widget. */
body:has(.tu-side-nav) .dashboard-shell,
body.tu-v3-body .dashboard-shell {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:16px clamp(16px,1.6vw,26px) 42px !important;
}

body:has(.tu-side-nav) .dashboard-grid,
body.tu-v3-body .dashboard-grid {
    display:grid !important;
    grid-template-columns:repeat(12,minmax(0,1fr)) !important;
    gap:16px !important;
    align-items:start !important;
    width:100% !important;
    max-width:none !important;
}

body:has(.tu-side-nav) .dash-widget,
body.tu-v3-body .dash-widget {
    grid-column:span 4 !important;
    min-width:0 !important;
    padding:16px !important;
    border:1px solid rgba(188,207,229,.88) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.84) !important;
    box-shadow:0 14px 34px rgba(15,40,70,.08) !important;
    backdrop-filter:blur(14px) !important;
}

body:has(.tu-side-nav) .dash-widget--stat,
body.tu-v3-body .dash-widget--stat {
    min-height:126px !important;
}

body:has(.tu-side-nav) .dash-widget--wide,
body.tu-v3-body .dash-widget--wide {
    grid-column:span 6 !important;
}

body:has(.tu-side-nav) .dash-widget--full,
body.tu-v3-body .dash-widget--full {
    grid-column:1 / -1 !important;
}

body:has(.tu-side-nav) .dash-widget__head,
body.tu-v3-body .dash-widget__head {
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin:0 0 12px !important;
    padding-bottom:10px !important;
    border-bottom:1px solid rgba(199,215,235,.72) !important;
}

body:has(.tu-side-nav) .dash-widget__title-group,
body.tu-v3-body .dash-widget__title-group {
    flex:1 1 auto !important;
    min-width:0 !important;
}

body:has(.tu-side-nav) .dash-widget__kicker,
body.tu-v3-body .dash-widget__kicker {
    color:#4d6b8b !important;
    font-size:10px !important;
    font-weight:950 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
}

body:has(.tu-side-nav) .dash-widget h2,
body.tu-v3-body .dash-widget h2 {
    margin:4px 0 0 !important;
    color:#071a33 !important;
    font-size:20px !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
}

body:has(.tu-side-nav) .dash-widget__controls,
body.tu-v3-body .dash-widget__controls {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
}

body:has(.tu-side-nav) .dash-widget__controls button,
body.tu-v3-body .dash-widget__controls button {
    width:34px !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 !important;
    border-radius:12px !important;
}

body:has(.tu-side-nav) .stat-value,
body.tu-v3-body .stat-value {
    color:#071a33 !important;
    font-size:34px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:-.055em !important;
}

body:has(.tu-side-nav) .quick-links,
body.tu-v3-body .quick-links {
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;
    gap:10px !important;
}

body:has(.tu-side-nav) .quick-link,
body.tu-v3-body .quick-link {
    display:flex !important;
    align-items:center !important;
    min-height:42px !important;
    padding:10px 12px !important;
    border:1px solid rgba(188,207,229,.88) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.72) !important;
    color:#174a7c !important;
    font-weight:850 !important;
    text-decoration:none !important;
}

/* Dashboard calendar must fill the full-width widget. */
body:has(.tu-side-nav) .dash-widget--full .dash-widget__body,
body.tu-v3-body .dash-widget--full .dash-widget__body,
body:has(.tu-side-nav) .calendar-stage,
body.tu-v3-body .calendar-stage,
body:has(.tu-side-nav) #dashboardCalendar,
body.tu-v3-body #dashboardCalendar {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}

body:has(.tu-side-nav) .dash-widget--full .calendar-controlbar,
body.tu-v3-body .dash-widget--full .calendar-controlbar {
    grid-template-columns:minmax(220px,.8fr) minmax(260px,1fr) auto !important;
    max-width:none !important;
}

body:has(.tu-side-nav) .dash-widget--full .calendar-legend,
body.tu-v3-body .dash-widget--full .calendar-legend {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin:0 0 12px !important;
}

body:has(.tu-side-nav) #dashboardCalendar .fc-view-harness,
body.tu-v3-body #dashboardCalendar .fc-view-harness {
    min-height:760px !important;
}

body:has(.tu-side-nav) #dashboardCalendar .fc-daygrid-day-frame,
body.tu-v3-body #dashboardCalendar .fc-daygrid-day-frame {
    min-height:118px !important;
}

/* Forms still using tu-page-shell / tu-form-hero. */
body:has(.tu-side-nav) .tu-page-shell,
body.tu-v3-body .tu-page-shell {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:16px clamp(16px,1.6vw,26px) 42px !important;
}

body:has(.tu-side-nav) .tu-form-hero,
body.tu-v3-body .tu-form-hero,
body:has(.tu-side-nav) .container > h1:first-child,
body.tu-v3-body .container > h1:first-child {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    width:100% !important;
    margin:0 0 14px !important;
    padding:14px 20px !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,#2f6da5,#174a7c) !important;
    color:#fff !important;
    box-shadow:0 16px 38px rgba(31,79,130,.17) !important;
}

body:has(.tu-side-nav) .tu-form-hero h1,
body.tu-v3-body .tu-form-hero h1 {
    color:#fff !important;
    margin:4px 0 0 !important;
    font-size:clamp(26px,1.9vw,36px) !important;
    letter-spacing:-.055em !important;
}

body:has(.tu-side-nav) .tu-form-hero p,
body.tu-v3-body .tu-form-hero p {
    color:rgba(255,255,255,.92) !important;
    margin:4px 0 0 !important;
}

body:has(.tu-side-nav) .tu-form-hero .eyebrow,
body.tu-v3-body .tu-form-hero .eyebrow {
    display:inline-flex !important;
    align-items:center !important;
    min-height:21px !important;
    padding:0 8px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.36) !important;
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
    font-size:9.5px !important;
    font-weight:950 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
}

body:has(.tu-side-nav) .tu-form-card,
body.tu-v3-body .tu-form-card,
body:has(.tu-side-nav) .employee-leave-form-final,
body.tu-v3-body .employee-leave-form-final,
body:has(.tu-side-nav) .container > .card,
body.tu-v3-body .container > .card {
    width:min(100%,1280px) !important;
    max-width:1280px !important;
    margin:0 !important;
    padding:18px !important;
    border:1px solid rgba(188,207,229,.88) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.84) !important;
    box-shadow:0 14px 34px rgba(15,40,70,.08) !important;
}

body:has(.tu-side-nav) .tu-event-form,
body.tu-v3-body .tu-event-form,
body:has(.tu-side-nav) .employee-leave-form-final,
body.tu-v3-body .employee-leave-form-final {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(220px,1fr)) !important;
    gap:14px !important;
}

body:has(.tu-side-nav) .tu-event-form > .form-group:has(textarea),
body.tu-v3-body .tu-event-form > .form-group:has(textarea),
body:has(.tu-side-nav) .tu-event-form > .form-group:has(input[type="file"]),
body.tu-v3-body .tu-event-form > .form-group:has(input[type="file"]),
body:has(.tu-side-nav) .tu-event-form > .form-actions,
body.tu-v3-body .tu-event-form > .form-actions,
body:has(.tu-side-nav) .employee-leave-form-final > textarea,
body.tu-v3-body .employee-leave-form-final > textarea,
body:has(.tu-side-nav) .employee-leave-form-final > .elf-all-day-row,
body.tu-v3-body .employee-leave-form-final > .elf-all-day-row,
body:has(.tu-side-nav) .employee-leave-form-final > .cards,
body.tu-v3-body .employee-leave-form-final > .cards {
    grid-column:1 / -1 !important;
}

body:has(.tu-side-nav) .tu-event-form .full,
body.tu-v3-body .tu-event-form .full {
    grid-column:1 / -1 !important;
}

body:has(.tu-side-nav) .employee-leave-form-final label,
body.tu-v3-body .employee-leave-form-final label {
    margin-top:0 !important;
}

@media(max-width:1200px) {
    body:has(.tu-side-nav) .dash-widget,
    body.tu-v3-body .dash-widget,
    body:has(.tu-side-nav) .dash-widget--wide,
    body.tu-v3-body .dash-widget--wide {
        grid-column:span 6 !important;
    }
    body:has(.tu-side-nav) .dash-widget--full,
    body.tu-v3-body .dash-widget--full {
        grid-column:1 / -1 !important;
    }
}
@media(max-width:900px) {
    body:has(.tu-side-nav) .dashboard-grid,
    body.tu-v3-body .dashboard-grid,
    body:has(.tu-side-nav) .tu-event-form,
    body.tu-v3-body .tu-event-form,
    body:has(.tu-side-nav) .employee-leave-form-final,
    body.tu-v3-body .employee-leave-form-final {
        grid-template-columns:1fr !important;
    }
    body:has(.tu-side-nav) .dash-widget,
    body.tu-v3-body .dash-widget,
    body:has(.tu-side-nav) .dash-widget--wide,
    body.tu-v3-body .dash-widget--wide,
    body:has(.tu-side-nav) .dash-widget--full,
    body.tu-v3-body .dash-widget--full {
        grid-column:1 / -1 !important;
    }
}


/* =========================================================
   V3 Calendar Modal + Render Fix
   Fixes visible modal markup and blank calendar stage on calendar pages.
========================================================= */
body.tu-v3-body .modal-backdrop,
body:has(.tu-side-nav) .modal-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(15, 23, 42, .42) !important;
    backdrop-filter: blur(8px) !important;
}

body.tu-v3-body .modal-backdrop.show,
body.tu-v3-body .modal-backdrop.active,
body.tu-v3-body .modal-backdrop.is-open,
body:has(.tu-side-nav) .modal-backdrop.show,
body:has(.tu-side-nav) .modal-backdrop.active,
body:has(.tu-side-nav) .modal-backdrop.is-open {
    display: flex !important;
    visibility: visible !important;
    height: auto !important;
    overflow: auto !important;
}

body.tu-v3-body .modal-card,
body:has(.tu-side-nav) .modal-card {
    width: min(860px, calc(100vw - 48px)) !important;
    max-height: min(860px, calc(100vh - 48px)) !important;
    overflow: auto !important;
    border: 1px solid rgba(188,207,229,.92) !important;
    border-radius: 22px !important;
    background: rgba(242, 248, 255, .98) !important;
    box-shadow: 0 28px 90px rgba(15,40,70,.28) !important;
    padding: 20px !important;
}

body.tu-v3-body .modal-header,
body:has(.tu-side-nav) .modal-header {
    padding: 0 0 12px !important;
    margin: 0 0 12px !important;
    border-bottom: 1px solid rgba(199,215,235,.80) !important;
}

body.tu-v3-body .modal-header h3,
body:has(.tu-side-nav) .modal-header h3 {
    margin: 6px 0 0 !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
}

body.tu-v3-body .modal-actions,
body:has(.tu-side-nav) .modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    border-top: 1px solid rgba(199,215,235,.80) !important;
}

/* Calendar stage must have real space even before FullCalendar finishes rendering. */
body.tu-v3-body .calendar-stage,
body:has(.tu-side-nav) .calendar-stage {
    min-height: 680px !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(199,215,235,.72) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.70) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
}

body.tu-v3-body #employeeCalendar,
body.tu-v3-body #classesEventsCalendar,
body.tu-v3-body #dashboardCalendar,
body:has(.tu-side-nav) #employeeCalendar,
body:has(.tu-side-nav) #classesEventsCalendar,
body:has(.tu-side-nav) #dashboardCalendar {
    min-height: 640px !important;
    width: 100% !important;
}

body.tu-v3-body .fc,
body:has(.tu-side-nav) .fc {
    min-height: 620px !important;
}

body.tu-v3-body .fc .fc-view-harness,
body:has(.tu-side-nav) .fc .fc-view-harness {
    min-height: 560px !important;
}

body.tu-v3-body .calendar-shell__body,
body:has(.tu-side-nav) .calendar-shell__body {
    display: block !important;
}

/* Better legend pills for old span markup. */
body.tu-v3-body .calendar-legend span,
body:has(.tu-side-nav) .calendar-legend span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 25px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(188,207,229,.88) !important;
    color: #173454 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

body.tu-v3-body .calendar-legend i,
body:has(.tu-side-nav) .calendar-legend i {
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
}

/* Hide uninitialized FullCalendar fallback glitches but keep the actual calendar visible. */
body.tu-v3-body .calendar-stage > .fc,
body:has(.tu-side-nav) .calendar-stage > .fc {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}


/* =========================================================
   V3 Visual Polish Pass - 20260604
   Login, calendar, employees, operations, tables
========================================================= */

/* Login page: keep the form card centered and prevent the right panel from looking squeezed. */
.login-page,
body:has(.login-shell) {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: 28px !important;
}

.login-shell {
    width: min(980px, calc(100vw - 56px)) !important;
    min-height: 520px !important;
    display: grid !important;
    grid-template-columns: minmax(380px, 1.05fr) minmax(360px, .95fr) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 80px rgba(15,40,70,.18) !important;
}

.login-panel,
.login-form-panel,
.login-card {
    width: 100% !important;
}

.login-card,
.login-form-card {
    max-width: 370px !important;
    margin: 0 auto !important;
}

/* The sign-in form should not collapse into a narrow strip. */
.login-shell input,
.login-shell button {
    width: 100% !important;
}

/* Calendar pages: use page width better, but keep the calendar readable. */
.employee-calendar-page .calendar-shell,
.classes-events-calendar-page .calendar-shell,
.calendar-page .calendar-shell {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.employee-calendar-page .page-head,
.classes-events-calendar-page .page-head,
.calendar-page .page-head {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fc .fc-daygrid-event,
.fc .fc-daygrid-event .fc-event-title,
.fc .fc-event-main {
    font-size: 11px !important;
    line-height: 1.22 !important;
}

.fc .fc-daygrid-event {
    border-radius: 6px !important;
    padding: 2px 5px !important;
    margin-top: 2px !important;
}

/* Make single short class/event items show more title/time when there is room. */
.classes-events-calendar-page .fc-daygrid-day-events .fc-event:only-child,
#classesEventsCalendar .fc-daygrid-day-events .fc-event:only-child {
    min-height: 22px !important;
}

.classes-events-calendar-page .fc-daygrid-event .fc-event-title,
#classesEventsCalendar .fc-daygrid-event .fc-event-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Employees/manage users: action buttons should be compact and aligned, not stacked awkwardly. */
.employees-table td:last-child,
.tu-admin-table td:last-child,
table td.actions,
table .actions-cell {
    white-space: nowrap !important;
}

.employees-table .actions,
.tu-admin-table .actions,
.employee-actions,
.user-actions,
.row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.employees-table .actions button,
.employees-table .actions a,
.tu-admin-table .actions button,
.tu-admin-table .actions a,
.employee-actions button,
.employee-actions a,
.user-actions button,
.user-actions a,
.row-actions button,
.row-actions a {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 11px !important;
}

/* Operations pages: give tables/cards breathing room and keep top areas compact. */
.store-coverage-page .tu-store-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
}

.activity-log-page .tu-log-table-wrap {
    max-height: 68vh !important;
}

.activity-log-page .tu-table td code {
    display: block !important;
    max-width: 100% !important;
}

/* Role permissions page: make the role summary cards more dashboard-like. */
.role-permissions-page .tu-card-grid,
.role-permission-page .tu-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

/* Prevent old plain tables from stretching text to full browser width. */
.tu-page .tu-table-wrap,
.tu-page table:not(.fc-scrollgrid):not(.fc-col-header):not(.fc-daygrid-body table) {
    font-size: 13px !important;
}

/* Sidebar account block should stay readable at bottom. */
.tu-side-nav__account {
    min-height: 76px !important;
}

.tu-side-nav__account-links {
    line-height: 1.15 !important;
}

/* Better empty states and warning cards. */
.tu-empty {
    max-width: 520px !important;
    margin: 18px auto !important;
}

/* Wider app pages should not begin too high under the browser chrome. */
body:has(.tu-side-nav) .tu-page,
body:has(.tu-side-nav) .dashboard-shell,
body:has(.tu-side-nav) .employees-shell {
    padding-top: 22px !important;
}

@media (max-width: 1100px) {
    .login-shell {
        grid-template-columns: 1fr !important;
        max-width: 540px !important;
    }

    .login-hero,
    .login-brand-panel {
        min-height: 360px !important;
    }
}

@media (max-width: 760px) {
    .login-page,
    body:has(.login-shell) {
        padding: 16px !important;
    }

    .login-shell {
        width: 100% !important;
        border-radius: 20px !important;
    }

    .employee-calendar-page .calendar-shell,
    .classes-events-calendar-page .calendar-shell,
    .calendar-page .calendar-shell {
        max-width: none !important;
    }

    .fc .fc-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .fc .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;
    }
}


/* =========================================================
   V3 Final UI Cleanup Pass - 20260604
========================================================= */

/* Login/index.php final layout */
.login-page {
    min-height: 100vh !important;
    padding: clamp(18px, 4vw, 56px) !important;
    display: grid !important;
    place-items: center !important;
}

.login-shell--v3 {
    width: min(1040px, calc(100vw - 48px)) !important;
    min-height: 540px !important;
    display: grid !important;
    grid-template-columns: minmax(430px, 1.08fr) minmax(390px, .92fr) !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.90) !important;
    box-shadow: 0 30px 90px rgba(15,40,70,.18) !important;
}

.login-brand-panel {
    padding: 34px 38px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    color: white !important;
    background:
        radial-gradient(circle at 16% 10%, rgba(255,255,255,.20), transparent 28%),
        linear-gradient(135deg, #174a7c, #2f6da5) !important;
}

.login-brand-mark img {
    max-width: 260px !important;
    height: auto !important;
    margin-bottom: 16px !important;
    filter: brightness(0) invert(1) !important;
}

.login-kicker {
    width: fit-content !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    background: rgba(255,255,255,.16) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.login-brand-panel h1 {
    margin: 20px 0 14px !important;
    color: white !important;
    font-size: clamp(38px, 3.1vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.06em !important;
}

.login-brand-panel p {
    max-width: 520px !important;
    margin: 0 0 24px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

.login-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
}

.login-stat-grid div {
    min-height: 94px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
}

.login-stat-grid strong {
    display: block !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: white !important;
}

.login-stat-grid span {
    display: block !important;
    margin-top: 8px !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.login-brand-panel small {
    color: rgba(255,255,255,.86) !important;
}

.login-form-panel {
    display: grid !important;
    place-items: center !important;
    padding: 34px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(47,106,167,.07), transparent 30%),
        rgba(255,255,255,.92) !important;
}

.login-card {
    width: min(390px, 100%) !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.login-card h2 {
    margin: 0 0 8px !important;
    font-size: 34px !important;
    letter-spacing: -.045em !important;
    color: #071a33 !important;
}

.login-card p {
    margin: 0 0 20px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
}

.login-card form {
    display: grid !important;
    gap: 14px !important;
}

.login-submit {
    width: 100% !important;
    margin-top: 4px !important;
}

.login-help {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(199,215,235,.72) !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.login-footnote {
    margin-top: 14px !important;
    color: #64748b !important;
    font-size: 11px !important;
}

/* Calendar card header alignment: title belongs left, controls right. */
.calendar-shell__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.calendar-shell__header > div:first-child {
    display: grid !important;
    gap: 6px !important;
}

.calendar-shell__header h2,
.calendar-shell__header h3 {
    text-align: left !important;
    margin: 0 !important;
}

/* Employee action icon visibility */
.employees-table .actions button,
.employees-table .actions a,
.tu-admin-table .actions button,
.tu-admin-table .actions a,
.employee-actions button,
.employee-actions a,
.user-actions button,
.user-actions a,
.row-actions button,
.row-actions a {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.employees-table .actions button svg,
.employees-table .actions a svg,
.tu-admin-table .actions button svg,
.tu-admin-table .actions a svg,
.employee-actions svg,
.user-actions svg,
.row-actions svg {
    color: #fff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Notification cards should not look stranded on very wide pages. */
.notification-center-page .tu-notification-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 520px)) !important;
    align-items: start !important;
}

/* Activity log: reduce stale noise visually, but keep it readable. */
.activity-log-page .tu-table td code {
    font-size: 11.5px !important;
}

@media (max-width: 1050px) {
    .login-shell--v3 {
        grid-template-columns: 1fr !important;
        width: min(560px, calc(100vw - 32px)) !important;
    }

    .login-brand-panel {
        min-height: 390px !important;
    }

    .login-brand-panel h1 {
        font-size: 40px !important;
    }

    .login-stat-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V3 Full Page Redesign - 20260604
========================================================= */
.tu-kpi-grid--six {
    grid-template-columns: repeat(6, minmax(130px, 1fr)) !important;
}
.tu-command-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:14px;
    margin:0 0 14px;
}
.tu-command-card {
    display:grid;
    gap:8px;
    align-content:start;
    min-height:132px;
    padding:18px;
    border:1px solid rgba(188,207,229,.88);
    border-radius:18px;
    background:rgba(255,255,255,.84);
    box-shadow:0 14px 34px rgba(15,40,70,.08);
    color:#071a33;
    text-decoration:none;
    transition:transform .16s ease, box-shadow .16s ease;
}
.tu-command-card:hover { transform:translateY(-2px); box-shadow:0 18px 44px rgba(15,40,70,.12); text-decoration:none; }
.tu-command-card span {
    width:44px;height:44px;display:grid;place-items:center;border-radius:15px;
    background:linear-gradient(135deg,#2f6da5,#174a7c);color:white;font-size:20px;
}
.tu-command-card strong { font-size:18px;letter-spacing:-.025em; }
.tu-command-card small { color:#64748b;font-weight:750; }
.tu-store-compact-list { display:grid; gap:10px; }
.tu-store-compact-row {
    display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,220px) auto;
    gap:12px;align-items:center;padding:12px;border:1px solid rgba(199,215,235,.72);
    border-radius:16px;background:rgba(255,255,255,.70);
}
.tu-store-compact-row strong { display:block;color:#071a33; }
.tu-store-compact-row span { display:block;color:#64748b;font-size:12px;margin-top:2px; }
.tu-progress--mini { margin:0 !important; }
.tu-field { display:grid; gap:6px; }
.tu-notification-group-grid {
    display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px;
}
.tu-notification-group {
    padding:15px;border:1px solid rgba(188,207,229,.88);border-radius:18px;
    background:rgba(255,255,255,.84);box-shadow:0 14px 34px rgba(15,40,70,.08);
}
.tu-mini-card {
    padding:16px;
}
.tu-mini-card h3 {
    margin:0 0 8px;
}
.tu-mini-card p {
    color:#64748b;
}
.tu-page code {
    font-size:12px;
    background:rgba(15,23,42,.06);
    border-radius:8px;
    padding:2px 5px;
}
.store-status-board-page .tu-status-board-grid {
    grid-template-columns:repeat(4,minmax(220px,1fr));
}
.store-status-board-page .tu-status-tile p {
    padding:10px 0;
    margin:0;
    border-top:1px solid rgba(199,215,235,.58);
    color:#475569;
}
.activity-log-page .tu-log-table-wrap {
    max-height:68vh;
}
.activity-log-page .tu-log-table code {
    white-space:pre-wrap;
    display:block;
    max-width:100%;
}
.attachment-library-page .tu-document-card h3 {
    min-height:44px;
    word-break:break-word;
}
@media(max-width:1300px) {
    .tu-kpi-grid--six { grid-template-columns:repeat(3,minmax(145px,1fr)) !important; }
    .store-status-board-page .tu-status-board-grid { grid-template-columns:repeat(2,minmax(220px,1fr)); }
}
@media(max-width:900px) {
    .tu-kpi-grid--six,
    .tu-store-compact-row,
    .tu-notification-group-grid,
    .store-status-board-page .tu-status-board-grid { grid-template-columns:1fr !important; }
}

/* Operations Shared Data Layer - 20260605 */


/* =========================================================
   Operations Combined Page - 20260605
========================================================= */
.operations-hub-page .tu-ops-hub-filters {
    position: sticky;
    top: 10px;
    z-index: 20;
    backdrop-filter: blur(18px);
}

.tu-ops-tabs {
    position: sticky;
    top: 104px;
    z-index: 19;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px;
    border: 1px solid rgba(188,207,229,.86);
    border-radius: 18px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 12px 30px rgba(15,40,70,.07);
}

.tu-ops-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    color: #12314f;
    text-decoration: none;
    font-weight: 900;
    font-size: 13px;
    border: 1px solid rgba(188,207,229,.86);
    background: rgba(255,255,255,.76);
}

.tu-ops-tabs a:hover {
    background: linear-gradient(135deg,#2f6da5,#174a7c);
    color: #fff;
}

.tu-ops-section {
    scroll-margin-top: 180px;
    margin-bottom: 28px;
}

.tu-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 18px 0 12px;
}

.tu-section-heading h2 {
    margin: 4px 0 0;
    font-size: 26px;
    letter-spacing: -.04em;
}

@media(max-width:900px){
    .operations-hub-page .tu-ops-hub-filters,
    .tu-ops-tabs {
        position: static;
    }
}

/* Permission Perspective Debug - 20260605 */
.permission-perspective-debug-page .tu-debug-pre{max-height:420px;overflow:auto;padding:14px;border-radius:14px;background:#0f172a;color:#dbeafe;font-size:12px;line-height:1.45}.permission-perspective-debug-page code{font-size:12px;background:rgba(15,23,42,.06);padding:2px 6px;border-radius:8px}