/* =========================================================
   TRENDS UNLIMITED - SOLID GLASS UI
   Inspired by the provided Employee panel reference.
========================================================= */

/* ---------- PAGE ---------- */

body{
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.14), transparent 28%),
        radial-gradient(circle at top right, rgba(168,85,247,.10), transparent 24%),
        #eef3f9 !important;
}

/* ---------- NAV ---------- */

.tu-nav-clean{
    background:rgba(255,255,255,.78)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
    border-bottom:1px solid rgba(203,213,225,.85)!important;
}

.tu-nav-clean__pill,
.tu-nav-clean__user-button{
    border-radius:16px!important;
    background:linear-gradient(
        180deg,
        rgba(255,255,255,.92),
        rgba(226,232,240,.92)
    )!important;
    border:1px solid rgba(203,213,225,.95)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 2px 4px rgba(15,23,42,.05)!important;

    color:#17314f!important;
    font-weight:700!important;
}

.tu-nav-clean__pill.is-active{
    background:
        radial-gradient(circle at top left,
            rgba(255,255,255,.22),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #24538a,
            #1d4675
        )!important;

    border-color:rgba(255,255,255,.28)!important;

    color:#ffffff!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -10px 22px rgba(0,0,0,.14),
        0 8px 20px rgba(37,99,235,.18)!important;
}

/* ---------- HERO / TOP PANELS ---------- */

.dashboard-hero,
.page-header,
.tu-form-hero{
    border-radius:28px!important;

    background:
        radial-gradient(circle at top left,
            rgba(255,255,255,.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #2f5f97,
            #224d80
        )!important;

    border:1px solid rgba(255,255,255,.14)!important;

    color:#ffffff!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -18px 28px rgba(0,0,0,.12),
        0 18px 40px rgba(30,64,175,.14)!important;
}

.dashboard-hero *,
.page-header *,
.tu-form-hero *{
    color:#ffffff!important;
}

/* ---------- WIDGETS ---------- */

.dash-widget,
.card,
.modal-card,
.modal-panel,
.calendar-stage{
    border-radius:24px!important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.92),
            rgba(248,250,252,.92)
        )!important;

    border:1px solid rgba(226,232,240,.95)!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 10px 30px rgba(15,23,42,.06)!important;
}

/* ---------- CALENDAR BUTTONS ---------- */

.fc .fc-button,
.fc .fc-button-primary,
.fc-toolbar button,
.fc-button-group .fc-button,
#dashReload,
.calendar-controlbar button,
.calendar-nav button,
.calendar-view-buttons button{
    position:relative!important;
    overflow:hidden!important;

    min-height:40px!important;
    padding:0 16px!important;

    border-radius:14px!important;

    background:
        radial-gradient(circle at top left,
            rgba(255,255,255,.24),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #3f6da3,
            #2d588d
        )!important;

    border:1px solid rgba(255,255,255,.16)!important;

    color:#ffffff!important;
    font-size:14px!important;
    font-weight:600!important;
    text-shadow:none!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -8px 18px rgba(0,0,0,.12),
        0 6px 14px rgba(37,99,235,.12)!important;

    transition:.18s ease!important;
}

.fc .fc-button:hover,
.fc-toolbar button:hover,
.fc-button-group .fc-button:hover{
    transform:translateY(-1px)!important;

    background:
        radial-gradient(circle at top left,
            rgba(255,255,255,.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #4978b0,
            #34669f
        )!important;
}

.fc .fc-button-active,
.fc-button-primary:not(:disabled).fc-button-active{
    background:
        radial-gradient(circle at top left,
            rgba(255,255,255,.14),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #173a63,
            #1c4b7e
        )!important;

    box-shadow:
        inset 0 2px 8px rgba(0,0,0,.18),
        0 4px 12px rgba(30,64,175,.10)!important;
}

/* ---------- LEGEND PILLS ---------- */

.calendar-legend span,
.calendar-filter-legend span{
    border-radius:999px!important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98),
            rgba(241,245,249,.94)
        )!important;

    border:1px solid rgba(203,213,225,.95)!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 2px 6px rgba(15,23,42,.04)!important;
}

/* ---------- TABLES ---------- */

table{
    background:transparent!important;
}

th{
    color:#38506d!important;
    font-weight:700!important;
}

/* ---------- INPUTS ---------- */

input,
select,
textarea{
    border-radius:14px!important;

    background:rgba(255,255,255,.94)!important;

    border:1px solid rgba(203,213,225,.95)!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95)!important;
}

/* ---------- CALENDAR GRID ---------- */

.fc .fc-scrollgrid,
.fc .fc-daygrid,
.fc .fc-timegrid{
    background:#ffffff!important;
}

.fc .fc-daygrid-day{
    background:#ffffff!important;
}

.fc .fc-day-today{
    background:#fef3c7!important;
}


/* =========================================================
   DASHBOARD HERO ACTION BUTTONS - BLUE GLASS
   Save Layout / Reset Layout / Hard Reset
========================================================= */

.dashboard-hero__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.dashboard-hero__actions .btn,
.dashboard-hero__actions button,
.dashboard-hero__actions a {
    min-width: 142px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;

    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.46) 0%, rgba(255,255,255,.18) 28%, transparent 48%),
        linear-gradient(145deg, rgba(110,172,232,.70), rgba(57,112,170,.48) 58%, rgba(36,82,132,.38)) !important;

    backdrop-filter: blur(20px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(175%) !important;

    border-top: 1px solid rgba(255,255,255,.72) !important;
    border-left: 1px solid rgba(255,255,255,.58) !important;
    border-right: 1px solid rgba(63,105,150,.38) !important;
    border-bottom: 1px solid rgba(35,76,122,.46) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 2px 2px 8px rgba(255,255,255,.20),
        inset -5px -7px 14px rgba(13,45,82,.18),
        0 1px 1px rgba(255,255,255,.36) !important;

    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(8,28,55,.45) !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    position: relative !important;
}

.dashboard-hero__actions .btn::before,
.dashboard-hero__actions button::before,
.dashboard-hero__actions a::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: 16px !important;
    pointer-events: none !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.34), transparent 42%, rgba(255,255,255,.10)) !important;
}

.dashboard-hero__actions .btn:hover,
.dashboard-hero__actions button:hover,
.dashboard-hero__actions a:hover {
    transform: translateY(-1px) !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.54) 0%, rgba(255,255,255,.22) 28%, transparent 48%),
        linear-gradient(145deg, rgba(129,190,245,.76), rgba(69,129,190,.54) 58%, rgba(44,93,145,.44)) !important;
    color: #ffffff !important;
}

.dashboard-hero__actions .btn:active,
.dashboard-hero__actions button:active,
.dashboard-hero__actions a:active {
    transform: translateY(0) !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 28%, transparent 48%),
        linear-gradient(145deg, rgba(48,109,174,.78), rgba(34,81,136,.62) 58%, rgba(22,58,96,.52)) !important;
    box-shadow:
        inset 0 2px 8px rgba(10,35,70,.20),
        inset 0 1px 0 rgba(255,255,255,.28) !important;
}


/* =========================================================
   DASHBOARD HERO LAYOUT FIX
   Keeps wording inside the blue area and centers action buttons.
========================================================= */

.dashboard-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;

    min-height: 164px !important;
    padding: 24px 26px !important;
    overflow: hidden !important;
}

.dashboard-hero__copy {
    min-width: 0 !important;
    max-width: 760px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.dashboard-hero__copy h1 {
    max-width: 100% !important;
    margin: 12px 0 14px !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.dashboard-hero__copy p {
    max-width: 680px !important;
    margin: 0 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.dashboard-hero__actions {
    align-self: center !important;
    justify-self: end !important;

    min-width: max-content !important;
    max-width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
}

.dashboard-hero__actions .btn,
.dashboard-hero__actions button,
.dashboard-hero__actions a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Medium screens: allow the buttons to sit below, still inside the hero. */
@media (max-width: 1180px) {
    .dashboard-hero {
        grid-template-columns: 1fr !important;
        align-items: start !important;
        gap: 22px !important;
        min-height: auto !important;
    }

    .dashboard-hero__copy {
        max-width: 100% !important;
    }

    .dashboard-hero__copy p {
        max-width: 100% !important;
    }

    .dashboard-hero__actions {
        justify-self: start !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
}

/* Small screens: make buttons fit without overflow. */
@media (max-width: 680px) {
    .dashboard-hero {
        padding: 22px 18px !important;
        border-radius: 22px !important;
    }

    .dashboard-hero__actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .dashboard-hero__actions .btn,
    .dashboard-hero__actions button,
    .dashboard-hero__actions a {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================================================
   BLUE 3D GLASS UI THEME
   Inspired by raised 3D glass components, kept in blue.
========================================================= */

:root {
    --tu-blue-glass-dark: #1f4f82;
    --tu-blue-glass-mid: #2f6fa8;
    --tu-blue-glass-light: #a9d8ff;
    --tu-blue-glass-rim: rgba(186, 225, 255, .72);
    --tu-blue-glass-text: #ffffff;
}

/* Raised blue hero panel */
.dashboard-hero,
.page-header,
.tu-form-hero {
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(125, 196, 255, .20), transparent 32%),
        linear-gradient(145deg, #326fa6 0%, #245b90 48%, #1b4776 100%) !important;

    border-top: 1px solid rgba(218, 240, 255, .55) !important;
    border-left: 1px solid rgba(186, 225, 255, .38) !important;
    border-right: 1px solid rgba(11, 43, 76, .35) !important;
    border-bottom: 1px solid rgba(8, 33, 62, .48) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 9px 9px 22px rgba(255,255,255,.055),
        inset -14px -18px 32px rgba(4, 25, 48, .22),
        0 20px 44px rgba(23, 74, 125, .18) !important;

    color: #ffffff !important;
}

/* Raised white glass widgets */
.dash-widget,
.card,
.calendar-stage,
.modal-card,
.modal-panel,
.tu-form-card {
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,241,251,.86) 55%, rgba(215,229,244,.78)) !important;

    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158, 181, 207, .38) !important;
    border-bottom: 1px solid rgba(137, 164, 195, .46) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 8px 8px 22px rgba(255,255,255,.45),
        inset -10px -14px 24px rgba(81,116,154,.08),
        0 12px 28px rgba(15, 40, 70, .07) !important;
}

/* 3D blue glass action buttons inside hero */
.dashboard-hero__actions .btn,
.dashboard-hero__actions button,
.dashboard-hero__actions a {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        radial-gradient(circle at 86% 88%, rgba(11, 51, 92, .25), transparent 30%),
        linear-gradient(145deg, rgba(130, 197, 250, .86), rgba(55, 121, 184, .70) 52%, rgba(28, 78, 130, .68)) !important;

    border-top: 1px solid rgba(238, 249, 255, .84) !important;
    border-left: 1px solid rgba(218, 240, 255, .68) !important;
    border-right: 1px solid rgba(20, 71, 120, .42) !important;
    border-bottom: 1px solid rgba(8, 45, 85, .55) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 4px 5px 14px rgba(255,255,255,.20),
        inset -8px -10px 18px rgba(7, 42, 82, .24),
        0 3px 0 rgba(18, 65, 112, .36) !important;

    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(4, 25, 48, .55) !important;
    font-weight: 700 !important;
}

/* 3D calendar control buttons */
.fc .fc-button,
.fc .fc-button-primary,
.fc-toolbar button,
.fc-button-group .fc-button,
#dashReload,
.calendar-controlbar button,
.calendar-nav button,
.calendar-view-buttons button {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.58), transparent 25%),
        radial-gradient(circle at 86% 88%, rgba(11, 51, 92, .20), transparent 30%),
        linear-gradient(145deg, rgba(226, 244, 255, .92), rgba(161, 197, 229, .76) 48%, rgba(110, 151, 194, .66)) !important;

    border-top: 1px solid rgba(255,255,255,.96) !important;
    border-left: 1px solid rgba(255,255,255,.82) !important;
    border-right: 1px solid rgba(80, 115, 153, .45) !important;
    border-bottom: 1px solid rgba(55, 87, 125, .55) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 4px 5px 12px rgba(255,255,255,.34),
        inset -7px -9px 16px rgba(45, 84, 126, .18),
        0 2px 0 rgba(84, 120, 160, .22) !important;

    color: #163b61 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.75) !important;
    font-weight: 600 !important;
}

/* Active calendar view = deep blue 3D glass */
.fc .fc-button-active,
.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.30), transparent 25%),
        radial-gradient(circle at 88% 90%, rgba(1, 20, 43, .30), transparent 30%),
        linear-gradient(145deg, #3d7fba, #245b90 52%, #163d68) !important;

    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(4, 25, 48, .55) !important;

    border-top-color: rgba(218,240,255,.68) !important;
    border-left-color: rgba(186,225,255,.50) !important;
    border-right-color: rgba(12,48,84,.52) !important;
    border-bottom-color: rgba(6,30,57,.65) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        inset 4px 5px 12px rgba(255,255,255,.10),
        inset -8px -10px 18px rgba(4,25,48,.24),
        0 2px 0 rgba(15,58,102,.28) !important;
}

/* Hover lift */
.dashboard-hero__actions .btn:hover,
.dashboard-hero__actions button:hover,
.dashboard-hero__actions a:hover,
.fc .fc-button:hover,
.fc-toolbar button:hover,
#dashReload:hover,
.calendar-controlbar button:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) saturate(1.05) !important;
}

/* Nav active button gets same blue-glass language */
.tu-nav-clean__pill.is-active {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.30), transparent 25%),
        linear-gradient(145deg, #3d7fba, #245b90 52%, #163d68) !important;

    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(4,25,48,.45) !important;
    border-top: 1px solid rgba(218,240,255,.68) !important;
    border-left: 1px solid rgba(186,225,255,.50) !important;
    border-right: 1px solid rgba(12,48,84,.52) !important;
    border-bottom: 1px solid rgba(6,30,57,.65) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        inset -8px -10px 18px rgba(4,25,48,.22),
        0 2px 0 rgba(15,58,102,.22) !important;
}


/* =========================================================
   FORM PAGE THEME ALIGNMENT
   class_event_form.php / employee_entry_form.php / change_password.php
========================================================= */

/* Generic form page card/shell alignment */
.tu-page-shell,
.container,
.password-page,
.change-password-page {
    max-width: 1180px !important;
}

/* Form heroes: make right-side action buttons readable and not blank */
.tu-form-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    min-height: 170px !important;
    padding: 26px 28px !important;
    overflow: hidden !important;
}

.tu-form-hero > div {
    min-width: 0 !important;
    max-width: 760px !important;
}

.tu-form-hero h1,
.tu-form-hero p,
.tu-form-hero .eyebrow,
.tu-form-hero span {
    color: #ffffff !important;
}

.tu-form-hero p {
    max-width: 720px !important;
    line-height: 1.45 !important;
    overflow-wrap: break-word !important;
}

/* Form hero action buttons */
.tu-form-hero .btn,
.tu-form-hero a.btn,
.tu-form-hero button {
    min-width: 210px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        radial-gradient(circle at 86% 88%, rgba(11, 51, 92, .25), transparent 30%),
        linear-gradient(145deg, rgba(130, 197, 250, .86), rgba(55, 121, 184, .70) 52%, rgba(28, 78, 130, .68)) !important;

    border-top: 1px solid rgba(238, 249, 255, .84) !important;
    border-left: 1px solid rgba(218, 240, 255, .68) !important;
    border-right: 1px solid rgba(20, 71, 120, .42) !important;
    border-bottom: 1px solid rgba(8, 45, 85, .55) !important;

    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(4, 25, 48, .55) !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 4px 5px 14px rgba(255,255,255,.20),
        inset -8px -10px 18px rgba(7, 42, 82, .24),
        0 3px 0 rgba(18, 65, 112, .36) !important;
}

/* Employee entry page: make old plain H1/card flow match the system */
body:has(form[action*="employee_entry"]) h1,
body:has(.employee-entry-form) h1 {
    color: #ffffff !important;
}

/* Fallback for employee_entry_form.php old structure */
body > h1:first-of-type,
.container > h1:first-child {
    margin: 24px auto 0 !important;
    max-width: 1180px !important;
    padding: 28px 30px 18px !important;
    border-radius: 28px 28px 0 0 !important;

    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(125, 196, 255, .20), transparent 32%),
        linear-gradient(145deg, #326fa6 0%, #245b90 48%, #1b4776 100%) !important;

    color: #ffffff !important;
    border-top: 1px solid rgba(218, 240, 255, .55) !important;
    border-left: 1px solid rgba(186, 225, 255, .38) !important;
    border-right: 1px solid rgba(11, 43, 76, .35) !important;
    border-bottom: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset -14px -18px 32px rgba(4, 25, 48, .18),
        0 14px 35px rgba(23, 74, 125, .12) !important;
}

/* File input consistency */
input[type="file"] {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    padding: 8px 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.94)) !important;
    border: 1px solid rgba(203,213,225,.95) !important;
    color: #0f2540 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 2px 6px rgba(15,23,42,.04) !important;
}

input[type="file"]::file-selector-button {
    min-height: 32px !important;
    margin-right: 12px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.58), transparent 25%),
        linear-gradient(145deg, #3d7fba, #245b90 52%, #163d68) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Primary submit buttons must always be readable */
button[type="submit"],
input[type="submit"],
.tu-form-actions .btn-primary,
.tu-form-actions button.btn-primary,
form .btn-primary {
    min-height: 48px !important;
    border-radius: 16px !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.30), transparent 25%),
        linear-gradient(145deg, #3d7fba, #245b90 52%, #163d68) !important;

    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(4,25,48,.55) !important;
    font-weight: 750 !important;
    border-top: 1px solid rgba(218,240,255,.68) !important;
    border-left: 1px solid rgba(186,225,255,.50) !important;
    border-right: 1px solid rgba(12,48,84,.52) !important;
    border-bottom: 1px solid rgba(6,30,57,.65) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.36),
        inset -8px -10px 18px rgba(4,25,48,.22),
        0 2px 0 rgba(15,58,102,.22) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

button[type="submit"]:disabled,
input[type="submit"]:disabled,
form .btn-primary:disabled {
    opacity: .65 !important;
    color: rgba(255,255,255,.92) !important;
    background:
        linear-gradient(145deg, rgba(98,140,184,.70), rgba(65,101,142,.62)) !important;
    cursor: not-allowed !important;
}

/* Change password: keep the current hero, but match form card buttons */
.password-shell,
.change-password-card {
    border-radius: 24px !important;
}

/* Small screens */
@media (max-width: 900px) {
    .tu-form-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .tu-form-hero .btn,
    .tu-form-hero a.btn,
    .tu-form-hero button {
        width: 100% !important;
        min-width: 0 !important;
    }

    body > h1:first-of-type,
    .container > h1:first-child {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}


/* =========================================================
   ADMIN TABLE PAGES THEME
   manage_users.php / reminders.php
========================================================= */

.tu-admin-page {
    max-width: 1240px !important;
    margin: 30px auto 80px !important;
    padding: 0 22px !important;
}

.tu-admin-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    min-height: 170px !important;
    padding: 26px 28px !important;
    border-radius: 28px !important;

    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(125,196,255,.20), transparent 32%),
        linear-gradient(145deg, #326fa6 0%, #245b90 48%, #1b4776 100%) !important;

    color: #ffffff !important;
    border-top: 1px solid rgba(218,240,255,.55) !important;
    border-left: 1px solid rgba(186,225,255,.38) !important;
    border-right: 1px solid rgba(11,43,76,.35) !important;
    border-bottom: 1px solid rgba(8,33,62,.48) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset -14px -18px 32px rgba(4,25,48,.22),
        0 18px 40px rgba(30,64,175,.14) !important;
}

.tu-admin-hero h1 {
    margin: 12px 0 10px !important;
    color: #ffffff !important;
    font-size: 38px !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
}

.tu-admin-hero p,
.tu-admin-hero .page-subtitle {
    color: rgba(255,255,255,.92) !important;
    max-width: 760px !important;
    margin: 0 !important;
    line-height: 1.48 !important;
}

.tu-admin-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.tu-admin-hero-btn,
.tu-admin-hero .btn,
.tu-admin-hero button,
.tu-admin-hero a.btn {
    min-width: 190px !important;
    min-height: 48px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        radial-gradient(circle at 86% 88%, rgba(11,51,92,.25), transparent 30%),
        linear-gradient(145deg, rgba(130,197,250,.86), rgba(55,121,184,.70) 52%, rgba(28,78,130,.68)) !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(238,249,255,.84) !important;
    border-left: 1px solid rgba(218,240,255,.68) !important;
    border-right: 1px solid rgba(20,71,120,.42) !important;
    border-bottom: 1px solid rgba(8,45,85,.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset -8px -10px 18px rgba(7,42,82,.24),
        0 3px 0 rgba(18,65,112,.36) !important;
    text-shadow: 0 1px 2px rgba(4,25,48,.55) !important;
    font-weight: 750 !important;
}

.tu-admin-card,
.tu-admin-help-card {
    margin-top: 22px !important;
    padding: 22px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,241,251,.86) 55%, rgba(215,229,244,.78)) !important;
    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158,181,207,.38) !important;
    border-bottom: 1px solid rgba(137,164,195,.46) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset -10px -14px 24px rgba(81,116,154,.08),
        0 12px 28px rgba(15,40,70,.07) !important;
}

.tu-admin-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.tu-admin-card__head h2,
.tu-admin-help-card h2 {
    margin: 4px 0 0 !important;
    color: #0f172a !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
}

.tu-admin-kicker {
    color: #64748b !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

.tu-admin-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.76) !important;
    border: 1px solid rgba(203,213,225,.86) !important;
    color: #173a5e !important;
    font-weight: 850 !important;
}

.tu-table-wrap {
    overflow-x: auto !important;
}

.tu-admin-table,
.list-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.tu-admin-table th,
.tu-admin-table td,
.list-table th,
.list-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(203,213,225,.78) !important;
    color: #0f172a !important;
    vertical-align: middle !important;
}

.tu-admin-table th,
.list-table th {
    background: rgba(248,250,252,.72) !important;
    color: #38506d !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
}

.tu-admin-table tr:hover td,
.list-table tr:hover td {
    background: rgba(239,246,255,.42) !important;
}

.tu-email-cell {
    max-width: 520px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 76px !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.status-pill--active {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.status-pill--inactive {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.tu-type-pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(239,246,255,.80) !important;
    border: 1px solid rgba(191,219,254,.90) !important;
    color: #173a5e !important;
    font-weight: 850 !important;
}

.tu-admin-modal {
    max-width: 760px !important;
}

.tu-admin-modal h2 {
    margin-top: 0 !important;
}

@media (max-width: 900px) {
    .tu-admin-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .tu-admin-hero-btn,
    .tu-admin-hero .btn,
    .tu-admin-hero button,
    .tu-admin-hero a.btn {
        width: 100% !important;
    }
}


/* =========================================================
   FORM PAGE FINAL POLISH
   - Employee page hero matches Class/Event
   - Employee save button aligns with action row
   - Blank hero pill is hidden
========================================================= */

/* Hide any accidental blank hero pills/badges */
.tu-form-hero .eyebrow:empty,
.tu-form-hero .eyebrow:has(:empty):not(:has(*:not(:empty))),
.tu-form-hero span:empty,
.dashboard-hero span:empty,
.page-header span:empty {
    display: none !important;
}

/* If an empty white pill was created as first child, remove the visual shell */
.tu-form-hero > div > :first-child:empty {
    display: none !important;
}

/* Employee Entry: make the old bare H1 behave like the themed hero */
body > h1:first-of-type,
.container > h1:first-child {
    max-width: 1180px !important;
    margin: 26px auto 0 !important;
    padding: 34px 32px 28px !important;

    border-radius: 28px 28px 0 0 !important;

    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(125,196,255,.20), transparent 32%),
        linear-gradient(145deg, #326fa6 0%, #245b90 48%, #1b4776 100%) !important;

    color: #ffffff !important;
    font-size: 38px !important;
    line-height: 1.05 !important;
    letter-spacing: -.04em !important;

    border-top: 1px solid rgba(218,240,255,.55) !important;
    border-left: 1px solid rgba(186,225,255,.38) !important;
    border-right: 1px solid rgba(11,43,76,.35) !important;
    border-bottom: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset -14px -18px 32px rgba(4,25,48,.22),
        0 18px 40px rgba(30,64,175,.14) !important;
}

/* Employee Entry card directly below H1 should connect visually to the hero */
body > h1:first-of-type + .card,
.container > h1:first-child + .card,
body > h1:first-of-type + form,
.container > h1:first-child + form {
    max-width: 1180px !important;
    margin: 0 auto 70px !important;

    border-radius: 0 0 24px 24px !important;
    border-top: 0 !important;
}

/* Employee Entry form card width if card wraps the form */
body > .card,
.container > .card {
    max-width: 1180px !important;
}

/* Employee Entry: align final submit button like Class/Event */
.card form > button[type="submit"]:last-child,
.card form > input[type="submit"]:last-child,
form > button[type="submit"]:last-child,
form > input[type="submit"]:last-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 190px !important;
    min-height: 48px !important;

    margin-top: 18px !important;
}

/* If the form has only a submit at the bottom, push it to the right cleanly */
.card form {
    position: relative !important;
}

.card form > button[type="submit"]:last-child,
.card form > input[type="submit"]:last-child {
    float: right !important;
    clear: both !important;
}

/* Add a clearfix so floated save button does not collapse spacing */
.card form::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

/* Employee Entry file input should align full-width like Class/Event */
.card input[type="file"],
form input[type="file"] {
    width: 100% !important;
}

/* Make Employee page and Class/Event form cards consistent */
.tu-form-card,
.card {
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,241,251,.86) 55%, rgba(215,229,244,.78)) !important;

    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158,181,207,.38) !important;
    border-bottom: 1px solid rgba(137,164,195,.46) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 8px 8px 22px rgba(255,255,255,.45),
        inset -10px -14px 24px rgba(81,116,154,.08),
        0 12px 28px rgba(15,40,70,.07) !important;
}

/* Keep Class/Event hero button visually aligned */
.tu-form-hero {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.tu-form-hero > a.btn,
.tu-form-hero > button,
.tu-form-hero .btn {
    justify-self: end !important;
    align-self: center !important;
}

/* Mobile fallback */
@media (max-width: 900px) {
    body > h1:first-of-type,
    .container > h1:first-child {
        margin-left: 12px !important;
        margin-right: 12px !important;
        font-size: 32px !important;
        border-radius: 24px 24px 0 0 !important;
    }

    body > h1:first-of-type + .card,
    .container > h1:first-child + .card,
    body > h1:first-of-type + form,
    .container > h1:first-child + form {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .card form > button[type="submit"]:last-child,
    .card form > input[type="submit"]:last-child,
    form > button[type="submit"]:last-child,
    form > input[type="submit"]:last-child {
        float: none !important;
        width: 100% !important;
    }
}


/* =========================================================
   CLASS / EVENT HERO EYEBROW FIX
   Makes "Calendar Management" visible instead of a blank white pill.
========================================================= */

.tu-form-hero .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    min-height: 30px !important;

    padding: 0 14px !important;
    border-radius: 999px !important;

    background:
        linear-gradient(145deg, rgba(98, 166, 229, .46), rgba(31, 79, 130, .34)) !important;

    border-top: 1px solid rgba(255,255,255,.62) !important;
    border-left: 1px solid rgba(255,255,255,.46) !important;
    border-right: 1px solid rgba(18,58,96,.32) !important;
    border-bottom: 1px solid rgba(18,58,96,.40) !important;

    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(4,25,48,.48) !important;

    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;

    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        inset -5px -6px 12px rgba(4,25,48,.16) !important;
}

/* Do not hide non-empty eyebrow labels. */
.tu-form-hero .eyebrow:not(:empty) {
    display: inline-flex !important;
}

/* Hide only genuinely empty accidental pills. */
.tu-form-hero .eyebrow:empty {
    display: none !important;
}


/* =========================================================
   EMPLOYEE ENTRY FORM MATCHES CLASS/EVENT FORM
========================================================= */

.tu-employee-entry-form .tu-form-actions {
    justify-content: flex-end !important;
}

.tu-employee-entry-form .btn-primary,
.tu-employee-entry-form button[type="submit"] {
    min-width: 190px !important;
}

.tu-employee-entry-form textarea {
    min-height: 145px !important;
}

.tu-form-hero .eyebrow:not(:empty) {
    color: #ffffff !important;
}


/* =========================================================
   ADMIN MANAGEMENT PAGES - TOP NAV BLUE GLASS LAYOUT
   manage_users.php / reminders.php
========================================================= */

.tu-admin-page {
    max-width: 1180px !important;
    margin: 34px auto 80px !important;
    padding: 0 22px !important;
}

.tu-admin-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;

    min-height: 170px !important;
    padding: 26px 28px !important;
    margin-bottom: 20px !important;

    border-radius: 28px !important;

    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(125,196,255,.20), transparent 32%),
        linear-gradient(145deg, #326fa6 0%, #245b90 48%, #1b4776 100%) !important;

    color: #ffffff !important;

    border-top: 1px solid rgba(218,240,255,.55) !important;
    border-left: 1px solid rgba(186,225,255,.38) !important;
    border-right: 1px solid rgba(11,43,76,.35) !important;
    border-bottom: 1px solid rgba(8,33,62,.48) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 9px 9px 22px rgba(255,255,255,.055),
        inset -14px -18px 32px rgba(4,25,48,.22),
        0 20px 44px rgba(23,74,125,.18) !important;
}

.tu-admin-hero h1 {
    margin: 10px 0 10px !important;
    color: #ffffff !important;
    font-size: 38px !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
}

.tu-admin-hero p {
    max-width: 760px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.93) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.tu-admin-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: max-content !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, rgba(98,166,229,.46), rgba(31,79,130,.34)) !important;
    border-top: 1px solid rgba(255,255,255,.62) !important;
    border-left: 1px solid rgba(255,255,255,.46) !important;
    border-right: 1px solid rgba(18,58,96,.32) !important;
    border-bottom: 1px solid rgba(18,58,96,.40) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(4,25,48,.48) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.tu-admin-hero-btn,
.tu-admin-hero .btn,
.tu-admin-hero button,
.tu-admin-hero a.btn {
    min-width: 190px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 22px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        radial-gradient(circle at 86% 88%, rgba(11,51,92,.25), transparent 30%),
        linear-gradient(145deg, rgba(130,197,250,.86), rgba(55,121,184,.70) 52%, rgba(28,78,130,.68)) !important;
    border-top: 1px solid rgba(238,249,255,.84) !important;
    border-left: 1px solid rgba(218,240,255,.68) !important;
    border-right: 1px solid rgba(20,71,120,.42) !important;
    border-bottom: 1px solid rgba(8,45,85,.55) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(4,25,48,.55) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 4px 5px 14px rgba(255,255,255,.20),
        inset -8px -10px 18px rgba(7,42,82,.24),
        0 3px 0 rgba(18,65,112,.36) !important;
}

.tu-admin-card,
.tu-admin-help-card {
    margin-top: 20px !important;
    padding: 26px !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,241,251,.86) 55%, rgba(215,229,244,.78)) !important;
    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158,181,207,.38) !important;
    border-bottom: 1px solid rgba(137,164,195,.46) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 8px 8px 22px rgba(255,255,255,.45),
        inset -10px -14px 24px rgba(81,116,154,.08),
        0 12px 28px rgba(15,40,70,.07) !important;
}

.tu-admin-card__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.tu-admin-card__head h2,
.tu-admin-help-card h2 {
    margin: 4px 0 0 !important;
    color: #0f172a !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
}

.tu-admin-kicker {
    color: #64748b !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

.tu-admin-count {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.76) !important;
    border: 1px solid rgba(203,213,225,.86) !important;
    color: #173a5e !important;
    font-weight: 850 !important;
}

.tu-table-wrap {
    overflow-x: auto !important;
}

.tu-admin-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.tu-admin-table th,
.tu-admin-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(203,213,225,.78) !important;
    color: #0f172a !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.tu-admin-table th {
    background: rgba(248,250,252,.72) !important;
    color: #38506d !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
}

.tu-admin-table tr:hover td {
    background: rgba(239,246,255,.42) !important;
}

.tu-email-cell {
    max-width: 520px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 76px !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.status-pill--active {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.status-pill--inactive {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.tu-type-pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: rgba(239,246,255,.80) !important;
    border: 1px solid rgba(191,219,254,.90) !important;
    color: #173a5e !important;
    font-weight: 850 !important;
}

.tu-admin-modal {
    max-width: 760px !important;
}

.tu-admin-modal h2 {
    margin-top: 0 !important;
}

.notice {
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin: 0 0 18px !important;
    font-weight: 800 !important;
}

.notice.success {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

.notice.error {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

@media (max-width: 900px) {
    .tu-admin-page {
        padding: 0 14px !important;
        margin-top: 22px !important;
    }

    .tu-admin-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        padding: 24px 20px !important;
    }

    .tu-admin-hero-btn,
    .tu-admin-hero .btn,
    .tu-admin-hero button,
    .tu-admin-hero a.btn {
        width: 100% !important;
    }
}


/* =========================================================
   REMINDER MODAL CENTERING FIX
   Ensures Add/Edit Reminder Rule opens as centered overlay.
========================================================= */

#reminderModal.modal,
#userModal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;

    padding: 24px !important;

    background: rgba(15, 23, 42, .38) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;

    overflow-y: auto !important;
}

#reminderModal.modal.active,
#userModal.modal.active {
    display: flex !important;
}

#reminderModal .modal-panel,
#userModal .modal-panel,
#reminderModal .tu-admin-modal,
#userModal .tu-admin-modal {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: min(760px, calc(100vw - 48px)) !important;
    max-width: 760px !important;
    max-height: calc(100vh - 48px) !important;

    margin: auto !important;
    padding: 28px !important;

    overflow-y: auto !important;

    border-radius: 24px !important;

    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(232,241,251,.90) 55%, rgba(215,229,244,.84)) !important;

    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158,181,207,.42) !important;
    border-bottom: 1px solid rgba(137,164,195,.50) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 8px 8px 22px rgba(255,255,255,.45),
        inset -10px -14px 24px rgba(81,116,154,.10),
        0 26px 70px rgba(15,40,70,.24) !important;
}

#reminderModal .modal-panel h2,
#userModal .modal-panel h2 {
    margin: 0 0 20px !important;
    color: #0f172a !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
}

#reminderModal .modal-actions,
#userModal .modal-actions {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 22px !important;
}

#reminderModal .modal-actions .btn,
#reminderModal .modal-actions button,
#userModal .modal-actions .btn,
#userModal .modal-actions button {
    min-width: 150px !important;
    min-height: 46px !important;
    border-radius: 16px !important;
}

@media (max-width: 720px) {
    #reminderModal.modal,
    #userModal.modal {
        padding: 14px !important;
        align-items: flex-start !important;
    }

    #reminderModal .modal-panel,
    #userModal .modal-panel {
        width: calc(100vw - 28px) !important;
        max-height: calc(100vh - 28px) !important;
        padding: 22px !important;
    }

    #reminderModal .modal-actions,
    #userModal .modal-actions {
        flex-direction: column-reverse !important;
    }

    #reminderModal .modal-actions .btn,
    #reminderModal .modal-actions button,
    #userModal .modal-actions .btn,
    #userModal .modal-actions button {
        width: 100% !important;
    }
}


/* =========================================================
   USER ACTIVITY MODAL
========================================================= */

.tu-row-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.tu-row-actions .btn {
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
}

.tu-activity-modal {
    width: min(860px, calc(100vw - 48px)) !important;
    max-width: 860px !important;
}

.tu-activity-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
}

.tu-activity-header h2 {
    margin: 4px 0 0 !important;
}

.tu-activity-status {
    margin-bottom: 14px !important;
    color: #38506d !important;
    font-weight: 800 !important;
}

.tu-activity-list {
    display: grid !important;
    gap: 12px !important;
    max-height: 58vh !important;
    overflow: auto !important;
    padding-right: 4px !important;
}

.tu-activity-item {
    padding: 14px 16px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,241,251,.86) 55%, rgba(215,229,244,.78)) !important;
    border: 1px solid rgba(203,213,225,.86) !important;
}

.tu-activity-item__top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.tu-activity-level {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(239,246,255,.85) !important;
    border: 1px solid rgba(191,219,254,.95) !important;
    color: #173a5e !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.tu-activity-level--error {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.tu-activity-level--warning {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.tu-activity-time {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.tu-activity-message {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.tu-activity-item pre {
    margin: 10px 0 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(15,23,42,.05) !important;
    color: #0f172a !important;
    font-size: 12px !important;
    overflow: auto !important;
    white-space: pre-wrap !important;
}


/* =========================================================
   MANAGE USERS COMPACT ACTIONS + CENTERED ACTIVITY MODAL
========================================================= */

/* Actions column should use compact icon buttons */
.tu-admin-table th:last-child,
.tu-admin-table td:last-child {
    width: 112px !important;
    min-width: 112px !important;
    text-align: center !important;
}

.tu-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.tu-icon-action {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.58), transparent 25%),
        linear-gradient(145deg, rgba(226,244,255,.92), rgba(161,197,229,.76) 48%, rgba(110,151,194,.66)) !important;

    border-top: 1px solid rgba(255,255,255,.96) !important;
    border-left: 1px solid rgba(255,255,255,.82) !important;
    border-right: 1px solid rgba(80,115,153,.45) !important;
    border-bottom: 1px solid rgba(55,87,125,.55) !important;

    color: #163b61 !important;
    font-size: 18px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.70) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 4px 5px 12px rgba(255,255,255,.34),
        inset -7px -9px 16px rgba(45,84,126,.18),
        0 2px 0 rgba(84,120,160,.22) !important;

    cursor: pointer !important;
}

.tu-icon-action:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) saturate(1.05) !important;
}

/* Created field in edit modal is read-only/info style */
#created_at_display[readonly] {
    background: rgba(226,232,240,.72) !important;
    color: #475569 !important;
    cursor: not-allowed !important;
}

/* Force activity modal to center, regardless of older modal CSS */
#activityModal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;

    padding: 24px !important;
    margin: 0 !important;

    background: rgba(15,23,42,.38) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;

    overflow-y: auto !important;
}

#activityModal.modal.active {
    display: flex !important;
}

#activityModal .modal-panel,
#activityModal .tu-admin-modal,
#activityModal .tu-activity-modal {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: min(900px, calc(100vw - 48px)) !important;
    max-width: 900px !important;
    max-height: calc(100vh - 48px) !important;
    margin: auto !important;
    padding: 28px !important;
    overflow-y: auto !important;

    border-radius: 24px !important;

    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(232,241,251,.90) 55%, rgba(215,229,244,.84)) !important;

    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158,181,207,.42) !important;
    border-bottom: 1px solid rgba(137,164,195,.50) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset 8px 8px 22px rgba(255,255,255,.45),
        inset -10px -14px 24px rgba(81,116,154,.10),
        0 26px 70px rgba(15,40,70,.24) !important;
}

#activityModal .tu-activity-list {
    max-height: 58vh !important;
}

@media (max-width: 720px) {
    .tu-admin-table th:last-child,
    .tu-admin-table td:last-child {
        width: 92px !important;
        min-width: 92px !important;
    }

    .tu-icon-action {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    #activityModal.modal {
        padding: 14px !important;
        align-items: flex-start !important;
    }

    #activityModal .modal-panel,
    #activityModal .tu-admin-modal,
    #activityModal .tu-activity-modal {
        width: calc(100vw - 28px) !important;
        max-height: calc(100vh - 28px) !important;
        padding: 22px !important;
    }
}


/* =========================================================
   CONSISTENT BLUE-GLASS PAGE HEADERS
   employee_calendar.php / classes_events_calendar.php / employees.php / change_password.php
========================================================= */

.container > .tu-admin-hero,
.employees-hero,
.password-hero {
    margin-bottom: 20px !important;
    border-radius: 28px !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(125,196,255,.20), transparent 32%),
        linear-gradient(145deg, #326fa6 0%, #245b90 48%, #1b4776 100%) !important;

    color: #ffffff !important;

    border-top: 1px solid rgba(218,240,255,.55) !important;
    border-left: 1px solid rgba(186,225,255,.38) !important;
    border-right: 1px solid rgba(11,43,76,.35) !important;
    border-bottom: 1px solid rgba(8,33,62,.48) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 9px 9px 22px rgba(255,255,255,.055),
        inset -14px -18px 32px rgba(4,25,48,.22),
        0 20px 44px rgba(23,74,125,.18) !important;
}

.container > .tu-admin-hero,
.tu-admin-hero--compact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 24px !important;
    min-height: 160px !important;
    padding: 26px 28px !important;
}

.container > .tu-admin-hero h1,
.employees-hero h1,
.password-hero h1 {
    color: #ffffff !important;
    font-size: 38px !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    margin: 10px 0 10px !important;
}

.container > .tu-admin-hero p,
.employees-hero p,
.password-hero p {
    color: rgba(255,255,255,.93) !important;
    max-width: 760px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

.employees-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
    gap: 28px !important;
}

.employees-hero__left,
.employees-hero__right,
.password-hero__left,
.password-hero__right {
    background: transparent !important;
}

.employees-eyebrow,
.password-eyebrow,
.tu-admin-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: max-content !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, rgba(98,166,229,.46), rgba(31,79,130,.34)) !important;
    border-top: 1px solid rgba(255,255,255,.62) !important;
    border-left: 1px solid rgba(255,255,255,.46) !important;
    border-right: 1px solid rgba(18,58,96,.32) !important;
    border-bottom: 1px solid rgba(18,58,96,.40) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(4,25,48,.48) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.employees-summary,
.password-summary,
.employees-summary-card,
.password-summary-card {
    background: rgba(255,255,255,.92) !important;
    color: #0f172a !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.94),
        0 12px 28px rgba(15,40,70,.08) !important;
}

.employees-summary *,
.password-summary *,
.employees-summary-card *,
.password-summary-card * {
    color: #0f172a !important;
}

.employees-stat {
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 18px !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset -8px -10px 18px rgba(4,25,48,.12) !important;
}

.employees-stat * {
    color: #ffffff !important;
}

.password-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
    gap: 28px !important;
}

.password-hero__left,
.password-hero__right {
    padding: 34px 34px !important;
}

@media (max-width: 900px) {
    .container > .tu-admin-hero,
    .employees-hero,
    .password-hero {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        padding: 24px 20px !important;
    }

    .container > .tu-admin-hero .tu-admin-hero-btn {
        width: 100% !important;
    }
}


/* =========================================================
   EMPLOYEES PAGE POLISH
   Match blue glass theme and compact actions.
========================================================= */

/* Keep Employee Management panel readable inside hero */
.employees-hero__right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.employees-summary {
    width: min(420px, 100%) !important;
    padding: 24px !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(232,241,251,.90) 55%, rgba(215,229,244,.84)) !important;
    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158,181,207,.42) !important;
    border-bottom: 1px solid rgba(137,164,195,.50) !important;
    border-radius: 24px !important;
    color: #0f172a !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset -8px -10px 18px rgba(81,116,154,.08),
        0 16px 36px rgba(15,40,70,.14) !important;
}

.employees-summary h2,
.employees-summary p,
.employees-summary * {
    color: #0f172a !important;
    text-shadow: none !important;
}

.employees-summary p {
    color: #38506d !important;
}

.employees-summary-card {
    margin-top: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(203,213,225,.86) !important;
    border-radius: 18px !important;
    padding: 16px 18px !important;
}

/* Make employee form/list cards match the rest better */
.employees-panel {
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.98), transparent 26%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,241,251,.86) 55%, rgba(215,229,244,.78)) !important;
    border-top: 1px solid rgba(255,255,255,.95) !important;
    border-left: 1px solid rgba(255,255,255,.90) !important;
    border-right: 1px solid rgba(158,181,207,.38) !important;
    border-bottom: 1px solid rgba(137,164,195,.46) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        inset -10px -14px 24px rgba(81,116,154,.08),
        0 12px 28px rgba(15,40,70,.07) !important;
}

/* Employee table compact icon actions */
.employees-table th:last-child,
.employees-table td:last-child {
    width: 118px !important;
    min-width: 118px !important;
    text-align: center !important;
}

.employees-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.employees-inline-form {
    display: inline-flex !important;
    margin: 0 !important;
}

.employees-table .tu-icon-action,
.employees-row-actions .tu-icon-action {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.58), transparent 25%),
        linear-gradient(145deg, rgba(226,244,255,.92), rgba(161,197,229,.76) 48%, rgba(110,151,194,.66)) !important;

    border-top: 1px solid rgba(255,255,255,.96) !important;
    border-left: 1px solid rgba(255,255,255,.82) !important;
    border-right: 1px solid rgba(80,115,153,.45) !important;
    border-bottom: 1px solid rgba(55,87,125,.55) !important;

    color: #163b61 !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.70) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 4px 5px 12px rgba(255,255,255,.34),
        inset -7px -9px 16px rgba(45,84,126,.18),
        0 2px 0 rgba(84,120,160,.22) !important;

    cursor: pointer !important;
}

.employees-table .tu-icon-action:hover,
.employees-row-actions .tu-icon-action:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) saturate(1.05) !important;
}

.employees-table .tu-icon-action--danger,
.employees-row-actions .tu-icon-action--danger {
    color: #991b1b !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        linear-gradient(145deg, rgba(254,226,226,.96), rgba(252,165,165,.70) 52%, rgba(239,68,68,.52)) !important;
    border-right-color: rgba(153,27,27,.35) !important;
    border-bottom-color: rgba(153,27,27,.45) !important;
}

/* Neutralize old huge action buttons if any remain */
.employees-row-actions .employees-link-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
}

.employees-row-actions .employees-link-btn::before {
    content: "✎" !important;
    color: #163b61 !important;
    font-size: 17px !important;
}

@media (max-width: 1000px) {
    .employees-hero {
        grid-template-columns: 1fr !important;
    }

    .employees-hero__right {
        justify-content: flex-start !important;
    }

    .employees-summary {
        width: 100% !important;
    }
}


/* =========================================================
   EMPLOYEES PAGE SIMPLIFICATION
   Removes right notes panel visually and uses compact row actions.
========================================================= */

.employees-hero {
    grid-template-columns: 1fr !important;
}

.employees-hero__right,
.employees-side,
.employees-notes {
    display: none !important;
}

.employees-hero__left {
    max-width: 760px !important;
}

.employees-layout {
    display: block !important;
}

.employees-panel--form,
.employees-panel--list,
.employees-panel {
    width: 100% !important;
}

.employees-panel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.employees-list-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.employees-list-actions .employees-btn {
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
}

.employees-table th:last-child,
.employees-table td:last-child {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    text-align: center !important;
}

.employees-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.employees-inline-form {
    display: inline-flex !important;
    margin: 0 !important;
}

.employees-table .tu-icon-action,
.employees-row-actions .tu-icon-action {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;

    padding: 0 !important;
    border-radius: 13px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.58), transparent 25%),
        linear-gradient(145deg, rgba(226,244,255,.92), rgba(161,197,229,.76) 48%, rgba(110,151,194,.66)) !important;

    border-top: 1px solid rgba(255,255,255,.96) !important;
    border-left: 1px solid rgba(255,255,255,.82) !important;
    border-right: 1px solid rgba(80,115,153,.45) !important;
    border-bottom: 1px solid rgba(55,87,125,.55) !important;

    color: #163b61 !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.70) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 4px 5px 12px rgba(255,255,255,.34),
        inset -7px -9px 16px rgba(45,84,126,.18),
        0 2px 0 rgba(84,120,160,.22) !important;

    cursor: pointer !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.employees-table .tu-icon-action:hover,
.employees-row-actions .tu-icon-action:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) saturate(1.05) !important;
}

.employees-table .tu-icon-action--danger,
.employees-row-actions .tu-icon-action--danger {
    color: #991b1b !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        linear-gradient(145deg, rgba(254,226,226,.96), rgba(252,165,165,.70) 52%, rgba(239,68,68,.52)) !important;
    border-right-color: rgba(153,27,27,.35) !important;
    border-bottom-color: rgba(153,27,27,.45) !important;
}

/* Strong fallback: if old text buttons remain, compress them into icons. */
.employees-row-actions .employees-link-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
}

.employees-row-actions .employees-link-btn::before {
    content: "✎" !important;
    color: #163b61 !important;
    font-size: 16px !important;
}

.employees-row-actions form:nth-of-type(1) .employees-link-btn::before {
    content: "Ⅱ" !important;
}

.employees-row-actions form:nth-of-type(2) .employees-link-btn::before {
    content: "🗑" !important;
    color: #991b1b !important;
}

@media (max-width: 780px) {
    .employees-panel__head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .employees-list-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .employees-list-actions .employees-btn {
        width: 100% !important;
    }
}


/* =========================================================
   EMPLOYEES FINAL LAYOUT FIX
   Hide Add Employee until requested, remove Quick Notes,
   constrain list width, compact actions.
========================================================= */

.employees-shell,
.container.employees-shell {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.employees-hero {
    grid-template-columns: 1fr !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.employees-hero__right,
.employees-side,
.employees-notes {
    display: none !important;
}

.employees-layout {
    display: block !important;
}

#employeeFormPanel[hidden] {
    display: none !important;
}

#employeeFormPanel.is-open {
    display: block !important;
}

.employees-panel,
.employees-panel--form,
.employees-panel--list {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.employees-panel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.employees-list-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.employees-list-actions .employees-btn,
.employees-list-actions .employees-pill {
    min-height: 42px !important;
}

.employees-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.employees-table {
    width: 100% !important;
    min-width: 980px !important;
    table-layout: fixed !important;
}

.employees-table th,
.employees-table td {
    vertical-align: middle !important;
}

.employees-table th:nth-child(1),
.employees-table td:nth-child(1) {
    width: 44px !important;
}

.employees-table th:nth-child(2),
.employees-table td:nth-child(2) {
    width: 170px !important;
}

.employees-table th:nth-child(3),
.employees-table td:nth-child(3) {
    width: 130px !important;
}

.employees-table th:nth-child(4),
.employees-table td:nth-child(4) {
    width: 96px !important;
}

.employees-table th:nth-child(5),
.employees-table td:nth-child(5) {
    width: 220px !important;
    overflow-wrap: anywhere !important;
}

.employees-table th:nth-child(6),
.employees-table td:nth-child(6) {
    width: 130px !important;
}

.employees-table th:nth-child(7),
.employees-table td:nth-child(7) {
    width: 145px !important;
}

.employees-table th:last-child,
.employees-table td:last-child {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    text-align: center !important;
}

.employees-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.employees-inline-form {
    display: inline-flex !important;
    margin: 0 !important;
}

.employees-table .tu-icon-action,
.employees-row-actions .tu-icon-action {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;

    padding: 0 !important;
    border-radius: 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.58), transparent 25%),
        linear-gradient(145deg, rgba(226,244,255,.92), rgba(161,197,229,.76) 48%, rgba(110,151,194,.66)) !important;

    border-top: 1px solid rgba(255,255,255,.96) !important;
    border-left: 1px solid rgba(255,255,255,.82) !important;
    border-right: 1px solid rgba(80,115,153,.45) !important;
    border-bottom: 1px solid rgba(55,87,125,.55) !important;

    color: #163b61 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 4px 5px 12px rgba(255,255,255,.34),
        inset -7px -9px 16px rgba(45,84,126,.18),
        0 2px 0 rgba(84,120,160,.22) !important;

    cursor: pointer !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.employees-table .tu-icon-action--danger,
.employees-row-actions .tu-icon-action--danger {
    color: #991b1b !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        linear-gradient(145deg, rgba(254,226,226,.96), rgba(252,165,165,.70) 52%, rgba(239,68,68,.52)) !important;
}

/* Fallback: compress any remaining old text buttons */
.employees-row-actions .employees-link-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
    color: transparent !important;
    border-radius: 12px !important;
}

.employees-row-actions .employees-link-btn::before {
    content: "✎" !important;
    color: #163b61 !important;
    font-size: 15px !important;
}

.employees-row-actions form:nth-of-type(1) .employees-link-btn::before {
    content: "Ⅱ" !important;
}

.employees-row-actions form:nth-of-type(2) .employees-link-btn::before {
    content: "🗑" !important;
    color: #991b1b !important;
}

@media (max-width: 780px) {
    .employees-shell,
    .container.employees-shell {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .employees-panel__head {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .employees-list-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .employees-list-actions .employees-btn {
        width: 100% !important;
    }
}


/* =========================================================
   EMPLOYEES QUICK NOTES / ADD FORM BEHAVIOR FIX
========================================================= */

.is-force-hidden,
[hidden] {
    display: none !important;
}

#employeeFormPanel[hidden] {
    display: none !important;
}

#employeeFormPanel.is-open {
    display: block !important;
}

/* Hide common Quick Notes containers if old markup remains */
.employees-side,
.employees-notes,
.quick-notes,
#quickNotes,
[data-widget="quick-notes"] {
    display: none !important;
}

/* Normal page width */
.employees-shell,
.container.employees-shell {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.employees-panel,
.employees-panel--list,
.employees-panel--form {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Compact actions - prevents the wide blue/red blocks */
.employees-table th:last-child,
.employees-table td:last-child {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    text-align: center !important;
    overflow: hidden !important;
}

.employees-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: 128px !important;
}

.employees-inline-form {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

.employees-row-actions button,
.employees-row-actions a,
.employees-row-actions .employees-link-btn,
.employees-row-actions .tu-icon-action {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.employees-row-actions a.edit-employee::before,
.employees-row-actions .edit-employee::before {
    content: "✎" !important;
    font-size: 15px !important;
    color: #163b61 !important;
}

.employees-row-actions form:nth-of-type(1) button::before {
    content: "Ⅱ" !important;
    font-size: 15px !important;
    color: #163b61 !important;
}

.employees-row-actions form:nth-of-type(2) button::before {
    content: "🗑" !important;
    font-size: 15px !important;
    color: #991b1b !important;
}

.employees-list-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

@media (max-width: 780px) {
    .employees-shell,
    .container.employees-shell {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}


/* =========================================================
   EMPLOYEES MODAL CLEAN REBUILD
========================================================= */

.employees-shell,
.container.employees-shell {
    max-width: 1180px !important;
    width: 100% !important;
    margin: 34px auto 80px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.employees-hero {
    grid-template-columns: 1fr !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.employees-hero__right,
.employees-side,
.employees-notes,
.quick-notes,
#quickNotes,
[data-widget="quick-notes"] {
    display: none !important;
}

.employees-panel--list,
.employees-panel {
    max-width: 1180px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.employees-panel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.employees-list-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.employees-filter-grid {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr auto !important;
    gap: 14px !important;
    align-items: end !important;
}

.employees-bulk {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

.employees-bulk .employees-select {
    max-width: 220px !important;
}

.employees-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.employees-table {
    width: 100% !important;
    min-width: 880px !important;
    table-layout: fixed !important;
}

.employees-table th,
.employees-table td {
    vertical-align: middle !important;
}

.employees-table th:nth-child(1),
.employees-table td:nth-child(1) {
    width: 44px !important;
}

.employees-table th:nth-child(2),
.employees-table td:nth-child(2) {
    width: 190px !important;
}

.employees-table th:nth-child(3),
.employees-table td:nth-child(3) {
    width: 140px !important;
}

.employees-table th:nth-child(4),
.employees-table td:nth-child(4) {
    width: 100px !important;
}

.employees-table th:nth-child(5),
.employees-table td:nth-child(5) {
    width: 260px !important;
    overflow-wrap: anywhere !important;
}

.employees-table th:nth-child(6),
.employees-table td:nth-child(6) {
    width: 150px !important;
}

.employees-table th:last-child,
.employees-table td:last-child {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    text-align: center !important;
}

.employees-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
}

.employees-inline-form {
    display: inline-flex !important;
    margin: 0 !important;
    width: auto !important;
}

.employees-row-actions .tu-icon-action {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    border-radius: 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.58), transparent 25%),
        linear-gradient(145deg, rgba(226,244,255,.92), rgba(161,197,229,.76) 48%, rgba(110,151,194,.66)) !important;

    border-top: 1px solid rgba(255,255,255,.96) !important;
    border-left: 1px solid rgba(255,255,255,.82) !important;
    border-right: 1px solid rgba(80,115,153,.45) !important;
    border-bottom: 1px solid rgba(55,87,125,.55) !important;

    color: #163b61 !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 4px 5px 12px rgba(255,255,255,.34),
        inset -7px -9px 16px rgba(45,84,126,.18),
        0 2px 0 rgba(84,120,160,.22) !important;

    cursor: pointer !important;
    overflow: hidden !important;
}

.employees-row-actions .tu-icon-action--danger {
    color: #991b1b !important;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.62), transparent 25%),
        linear-gradient(145deg, rgba(254,226,226,.96), rgba(252,165,165,.70) 52%, rgba(239,68,68,.52)) !important;
}

/* Employee add/edit modal */
#employeeModal.modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 24px !important;
    background: rgba(15,23,42,.38) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    overflow-y: auto !important;
}

#employeeModal.modal.active {
    display: flex !important;
}

#employeeModal .employees-modal-panel {
    width: min(780px, calc(100vw - 48px)) !important;
    max-width: 780px !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
    margin: auto !important;
    padding: 28px !important;
    border-radius: 24px !important;
}

.employees-modal-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.employees-modal-head h2 {
    margin: 4px 0 0 !important;
    font-size: 28px !important;
    line-height: 1.08 !important;
}

#employeeModal .tu-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

#employeeModal .employees-field {
    margin-bottom: 16px !important;
}

.employees-updated-field input[readonly] {
    background: rgba(226,232,240,.72) !important;
    color: #475569 !important;
    cursor: not-allowed !important;
}

.employees-checkbox--modal {
    min-height: 48px !important;
}

@media (max-width: 820px) {
    .employees-filter-grid,
    #employeeModal .tu-form-grid {
        grid-template-columns: 1fr !important;
    }

    .employees-panel__head,
    .employees-modal-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .employees-list-actions {
        justify-content: flex-start !important;
    }

    #employeeModal.modal {
        align-items: flex-start !important;
        padding: 14px !important;
    }

    #employeeModal .employees-modal-panel {
        width: calc(100vw - 28px) !important;
        max-height: calc(100vh - 28px) !important;
    }
}


/* =========================================================
   EMPLOYEES ACTION BUTTONS - MATCH MANAGE USERS
   Strong page-specific override to prevent oversized generic buttons.
========================================================= */

.employees-table th:last-child,
.employees-table td:last-child {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    text-align: center !important;
    overflow: visible !important;
}

.employees-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

.employees-row-actions .employees-inline-form {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* New simple icon buttons */
.employees-row-actions .employees-action-icon,
.employees-row-actions a.employees-action-icon,
.employees-row-actions button.employees-action-icon,
.employees-table .employees-action-icon,
.employees-table button.employees-action-icon,
.employees-table a.employees-action-icon {
    all: unset !important;

    box-sizing: border-box !important;

    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    cursor: pointer !important;

    background: #ffffff !important;
    border: 1px solid #d6e0ed !important;

    color: #173a5e !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;

    box-shadow:
        0 8px 18px rgba(15, 40, 70, .08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.employees-row-actions .employees-action-icon:hover,
.employees-table .employees-action-icon:hover {
    transform: translateY(-1px) !important;
    background: #f8fbff !important;
    border-color: #b9cbe0 !important;
}

.employees-row-actions .employees-action-icon--danger,
.employees-row-actions button.employees-action-icon--danger,
.employees-table .employees-action-icon--danger,
.employees-table button.employees-action-icon--danger {
    color: #b91c1c !important;
    background: #ffffff !important;
    border-color: #f1c6c6 !important;
}

.employees-row-actions .employees-action-icon--danger:hover,
.employees-table .employees-action-icon--danger:hover {
    background: #fff7f7 !important;
    border-color: #efaaaa !important;
}

/* Stop earlier/fallback CSS from making old buttons huge if any remain. */
.employees-row-actions .tu-icon-action,
.employees-row-actions .employees-link-btn,
.employees-row-actions button[type="submit"],
.employees-row-actions a {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    text-indent: 0 !important;
    overflow: hidden !important;
}

/* Only action buttons inside row actions should not use the big primary submit style. */
.employees-row-actions button[type="submit"] {
    background: #ffffff !important;
    border: 1px solid #d6e0ed !important;
    color: #173a5e !important;
    box-shadow:
        0 8px 18px rgba(15, 40, 70, .08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Delete button remains red text but same size/style. */
.employees-row-actions form:last-child button[type="submit"] {
    color: #b91c1c !important;
    border-color: #f1c6c6 !important;
    background: #ffffff !important;
}

.employees-row-actions form:last-child button[type="submit"]:hover {
    background: #fff7f7 !important;
    border-color: #efaaaa !important;
}


/* =========================================================
   EMPLOYEE LIST ACTION BUTTON HARD RESET
   Uses simple fixed buttons, same visual size, no stretched forms.
========================================================= */

.employees-table th:last-child,
.employees-table td:last-child {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    text-align: center !important;
    overflow: visible !important;
}

.employees-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.employees-row-actions form,
.employees-inline-form {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.employees-row-btn,
button.employees-row-btn,
a.employees-row-btn,
.employees-table button.employees-row-btn,
.employees-table a.employees-row-btn {
    all: unset !important;
    box-sizing: border-box !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    flex: 0 0 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 12px !important;
    border: 1px solid #d6e0ed !important;
    background: #ffffff !important;

    color: #173a5e !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;

    box-shadow:
        0 8px 18px rgba(15, 40, 70, .08),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.employees-row-btn:hover,
button.employees-row-btn:hover,
a.employees-row-btn:hover {
    transform: translateY(-1px) !important;
    background: #f8fbff !important;
    border-color: #b9cbe0 !important;
}

.employees-row-btn--danger,
button.employees-row-btn--danger,
a.employees-row-btn--danger {
    color: #b91c1c !important;
    border-color: #f1c6c6 !important;
}

.employees-row-btn--danger:hover,
button.employees-row-btn--danger:hover,
a.employees-row-btn--danger:hover {
    background: #fff7f7 !important;
    border-color: #efaaaa !important;
}

/* Override every older action selector that was making these buttons wide. */
.employees-row-actions button,
.employees-row-actions a,
.employees-row-actions .tu-icon-action,
.employees-row-actions .employees-action-icon,
.employees-row-actions .employees-link-btn,
.employees-row-actions button[type="submit"] {
    all: unset !important;
    box-sizing: border-box !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #d6e0ed !important;
    background: #ffffff !important;
    color: #173a5e !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

.employees-row-actions .employees-row-btn--danger,
.employees-row-actions button.employees-row-btn--danger {
    color: #b91c1c !important;
    border-color: #f1c6c6 !important;
}


/* =========================================================
   EMPLOYEES FUNCTIONALITY / VISIBILITY FIX
========================================================= */

.employees-status-links {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    flex-wrap: wrap !important;
}

.employees-status-links a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid rgba(203,213,225,.92) !important;
    color: #173a5e !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.employees-status-links a.is-active {
    background: #1f4f82 !important;
    border-color: #1f4f82 !important;
    color: #ffffff !important;
}

.employees-row--inactive {
    opacity: .72 !important;
}

.employees-status--inactive {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

#employeeModal.modal.active {
    display: flex !important;
}


/* =========================================================
   EMPLOYEE ACTION ICON DEDUPE
   Prevents edit buttons from showing a double pencil.
========================================================= */

.employees-row-actions .edit-employee {
    font-size: 0 !important;
}

.employees-row-actions .edit-employee::before {
    content: "✎" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #173a5e !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

/* Do not add generic fallback icons to already-fixed action buttons. */
.employees-row-actions .employees-row-btn.edit-employee::after,
.employees-row-actions .employees-row-btn.edit-employee > * {
    display: none !important;
}