/* test01 */
        :root {
            --font-family-base: Arial, sans-serif;

            --color-white: #fff;
            --color-gray-light: #e2e8f0;
            --color-gray-medium: #64748b;
            --color-gray-dark: #1f2937;
            --color-table-row-light: var(--color-white);
            --color-table-row-muted: #f8fafc;

            --color-primary: #2563eb;
            --color-primary-hover: #1d4ed8;
            --color-primary-soft: #dbeafe;
            --color-primary-text: #1d4ed8;
            --color-primary-muted: rgba(37, 99, 235, 0.16);

            --color-danger: #dc2626;
            --color-danger-hover: #b91c1c;
            --color-danger-soft: #fee2e2;
            --color-danger-text: #991b1b;
            --color-danger-sidebar: rgba(239, 68, 68, 0.12);
            --color-danger-sidebar-hover: rgba(239, 68, 68, 0.2);
            --color-danger-sidebar-text: #fecaca;

            --color-success-soft: #dcfce7;
            --color-success-text: #166534;
            --color-warning-soft: #fef3c7;
            --color-warning-text: #92400e;
            --color-attendance-early-soft: #ede9fe;
            --color-attendance-suspension-soft: #e5e7eb;

            --color-sidebar-text: var(--color-gray-light);
            --color-sidebar-link: var(--color-gray-light);
            --color-sidebar-border: rgba(255, 255, 255, 0.12);
            --color-sidebar-icon: rgba(255, 255, 255, 0.1);
            --color-overlay: rgba(15, 23, 42, 0.45);

            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-pill: 999px;

            --shadow-card: 0 12px 30px rgba(15, 23, 42, 0.08);
            --shadow-menu-button: 0 8px 24px rgba(15, 23, 42, 0.12);
            --shadow-sidebar: 18px 0 35px rgba(15, 23, 42, 0.2);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            font-family: var(--font-family-base);
            background: var(--color-gray-light);
            color: var(--color-gray-dark);
        }

        .login {
            width: min(100% - 32px, 380px);
            padding: 28px;
            background: var(--color-white);
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-card);
        }

        .login-brand {
            margin-bottom: 24px;
            text-align: center;
        }

        .login-brand__logo {
            display: grid;
            width: 140px;
            height: 140px;
            margin: 0 auto 16px;
            place-items: center;
            overflow: hidden;
            border: 1px solid var(--color-gray-light);
            border-radius: 50%;
            background: var(--color-table-row-muted);
            color: var(--color-primary-text);
            font-size: 18px;
            font-weight: 700;
        }

        .login-brand__logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .login-brand h1 {
            margin-bottom: 6px;
            font-size: 23px;
            line-height: 1.2;
        }

        .login-brand p {
            margin: 0;
            color: var(--color-primary-text);
            font-size: 23px;
            font-weight: 700;
        }

        .login-title {
            margin: 0 0 18px;
            font-size: 18px;
            text-align: left;
        }

        h1 {
            margin: 0 0 22px;
            font-size: 26px;
            text-align: center;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
        }

        input {
            width: 100%;
            margin-bottom: 16px;
            padding-block: 12px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-sm);
            font-size: 16px;
        }

        input:focus {
            border-color: var(--color-primary);
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-muted);
        }

        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-sm);
            font-family: var(--font-family-base);
            font-size: 16px;
            resize: vertical;
        }

        textarea:focus {
            border-color: var(--color-primary);
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-muted);
        }

        select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-sm);
            background: var(--color-white);
            color: var(--color-gray-dark);
            font-size: 16px;
        }

        select:focus {
            border-color: var(--color-primary);
            outline: none;
            box-shadow: 0 0 0 3px var(--color-primary-muted);
        }

        button {
            width: 100%;
            padding: 12px;
            border: 0;
            border-radius: var(--radius-sm);
            background: var(--color-primary);
            color: var(--color-white);
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
        }

        button:hover {
            background: var(--color-primary-hover);
        }

        .error {
            margin-bottom: 16px;
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
            font-size: 14px;
        }

        .login-note {
            margin: 0 0 16px;
            color: var(--color-gray-medium);
            line-height: 1.5;
        }

        .login-note a {
            color: var(--color-primary-text);
            font-weight: 700;
        }

        .app-body {
            display: flex;
            place-items: initial;
            background: var(--color-gray-light);
        }

        .modal-open {
            overflow: hidden;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .menu-toggle,
        .sidebar-overlay {
            display: none;
        }

        .sidebar-overlay[hidden] {
            display: none;
        }

        .sidebar {
            width: 260px;
            height: 100vh;
            height: 100dvh;
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 18px 16px;
            background: var(--color-gray-dark);
            color: var(--color-sidebar-text);
            transition: width .2s ease, padding .2s ease;
        }

        .sidebar__brand {
            position: relative;
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 0 32px 18px 0;
            border-bottom: 1px solid var(--color-sidebar-border);
        }

        .sidebar__collapse {
            position: absolute;
            top: 4px;
            right: 0;
            width: 28px;
            height: 28px;
            display: grid;
            place-items: center;
            padding: 0;
            border: 1px solid var(--color-sidebar-border);
            border-radius: 7px;
            background: transparent;
            color: var(--color-gray-light);
            font-size: 12px;
        }

        .sidebar__collapse:hover,
        .sidebar__collapse:focus-visible {
            border-color: rgba(255, 255, 255, .35);
            outline: none;
            background: rgba(255, 255, 255, .1);
            color: var(--color-white);
        }

        .sidebar__brand-mark {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            background: var(--color-primary);
            color: var(--color-white);
            font-size: 22px;
            font-weight: 700;
        }

        .sidebar__brand strong,
        .sidebar__brand span {
            display: block;
        }

        .sidebar__brand span {
            margin-top: 3px;
            color: var(--color-gray-light);
            font-size: 13px;
            text-transform: capitalize;
        }

        .sidebar__nav {
            display: grid;
            gap: 8px;
            margin-top: 14px;
        }

        .sidebar__section {
            min-width: 0;
        }

        .sidebar__section-title {
            display: flex;
            min-height: 30px;
            align-items: center;
            justify-content: space-between;
            padding: 7px 9px 5px 12px;
            list-style: none;
            color: #94a3b8;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
            cursor: pointer;
        }

        .sidebar__section-title::-webkit-details-marker { display: none; }

        .sidebar__section-title i {
            font-size: 9px;
            transition: transform .18s ease;
        }

        .sidebar__section[open] .sidebar__section-title i { transform: rotate(180deg); }

        .sidebar__section-title:hover,
        .sidebar__section-title:focus-visible {
            outline: none;
            color: var(--color-white);
        }

        .sidebar__section-links {
            display: grid;
            gap: 3px;
        }

        .sidebar__system-switcher {
            display: grid;
            gap: 7px;
            margin-top: 18px;
        }

        .sidebar__system-switcher>span {
            color: var(--color-gray-light);
            font-size: 12px;
            font-weight: 700;
        }

        .sidebar__system-switcher select {
            width: 100%;
            min-width: 0;
            height: 40px;
            padding: 0 34px 0 10px;
            border: 1px solid var(--color-sidebar-border);
            border-radius: var(--radius-md);
            background-color: rgba(255, 255, 255, 0.08);
            color: var(--color-white);
            font: inherit;
            font-size: 14px;
            cursor: pointer;
        }

        .sidebar__system-switcher select:focus {
            border-color: var(--color-primary);
            outline: 3px solid var(--color-primary-muted);
        }

        .sidebar__system-switcher option {
            background: var(--color-gray-dark);
            color: var(--color-white);
        }

        .sidebar__link,
        .sidebar__logout {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 42px;
            padding: 7px 10px;
            border-radius: var(--radius-md);
            color: var(--color-sidebar-link);
            text-decoration: none;
        }

        .sidebar__link:hover,
        .sidebar__link:focus-visible {
            outline: none;
            background: rgba(255, 255, 255, .08);
            color: var(--color-white);
        }

        .sidebar__link.is-active {
            background: var(--color-primary-muted);
            color: var(--color-white);
            font-weight: 700;
        }

        .sidebar__link.is-active::before {
            content: '';
            position: absolute;
            inset: 7px auto 7px -16px;
            width: 4px;
            border-radius: 0 4px 4px 0;
            background: #60a5fa;
        }

        .sidebar__icon {
            width: 28px;
            height: 28px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border-radius: 7px;
            background: transparent;
            font-size: 17px;
            font-weight: 700;
        }

        .sidebar__link.is-active .sidebar__icon,
        .sidebar__link:hover .sidebar__icon {
            background: var(--color-primary);
            color: var(--color-white);
        }

        .sidebar__link.sidebar__link--new-feature,
        .sidebar__link.sidebar__link--new-feature.is-active {
            background: #fbbf24;
            color: #422006;
            box-shadow: inset 4px 0 #f97316, 0 0 0 2px rgba(251, 191, 36, .32);
            animation: sidebar-new-feature-pulse 1.8s ease-in-out infinite;
        }

        .sidebar__link.sidebar__link--new-feature:hover {
            background: #f59e0b;
            color: #422006;
        }

        .sidebar__link.sidebar__link--new-feature .sidebar__icon {
            background: #fff7d6;
            color: #92400e;
        }

        .sidebar__new-badge {
            margin-left: auto;
            border-radius: 999px;
            background: #facc15;
            color: #422006;
            font-size: .62rem;
            font-weight: 900;
            letter-spacing: .04em;
            line-height: 1;
            padding: 5px 7px;
            text-transform: uppercase;
        }

        @keyframes sidebar-new-feature-pulse {
            0%, 100% { box-shadow: inset 4px 0 #f97316, 0 0 0 2px rgba(251, 191, 36, .22); }
            50% { box-shadow: inset 4px 0 #f97316, 0 0 0 5px rgba(251, 191, 36, .42); }
        }

        @media (prefers-reduced-motion: reduce) {
            .sidebar__link.sidebar__link--new-feature { animation: none; }
        }

        .sidebar__logout {
            background: var(--color-danger-sidebar);
            color: var(--color-danger-sidebar-text);
        }

        .sidebar__logout:hover {
            background: var(--color-danger-sidebar-hover);
        }

        .sidebar__system-time {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: auto;
            padding: 11px 10px 7px;
            border-top: 1px solid var(--color-sidebar-border);
            color: var(--color-sidebar-text);
        }

        .sidebar__system-time > i {
            width: 20px;
            text-align: center;
            font-size: 17px;
        }

        .sidebar__system-time span,
        .sidebar__system-time small {
            display: none;
            color: var(--color-gray-light);
            font-size: 11px;
        }

        .sidebar__system-time strong {
            display: block;
            margin: 2px 0;
            font-size: 13px;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .sidebar-collapsed .sidebar {
            width: 72px;
            padding-inline: 12px;
            overflow-x: hidden;
        }

        .sidebar-collapsed .app-main {
            width: calc(100% - 72px);
            margin-left: 72px;
        }

        .sidebar-collapsed .sidebar__brand {
            justify-content: center;
            padding: 0 0 52px;
        }

        .sidebar-collapsed .sidebar__brand > div,
        .sidebar-collapsed .sidebar__system-switcher,
        .sidebar-collapsed .sidebar__section-title,
        .sidebar-collapsed .sidebar__link > span:not(.sidebar__icon),
        .sidebar-collapsed .sidebar__logout > span:not(.sidebar__icon),
        .sidebar-collapsed .sidebar__system-time > div {
            display: none;
        }

        .sidebar-collapsed .sidebar__collapse {
            top: 52px;
            right: 10px;
        }

        .sidebar-collapsed .sidebar__nav { margin-top: 12px; }
        .sidebar-collapsed .sidebar__section:not([open]) .sidebar__section-links { display: grid; }

        .sidebar-collapsed .sidebar__link,
        .sidebar-collapsed .sidebar__logout {
            justify-content: center;
            padding-inline: 6px;
        }

        .sidebar-collapsed .sidebar__link.is-active::before { left: -12px; }

        .sidebar-collapsed .sidebar__system-time {
            justify-content: center;
            padding-inline: 0;
        }

        .app-loading-overlay[hidden] {
            display: none;
        }

        .app-loading-overlay {
            position: fixed;
            inset: 0;
            z-index: 10000;
            display: grid;
            place-items: center;
            padding: 20px;
            background: rgba(15, 23, 42, 0.48);
            backdrop-filter: blur(2px);
        }

        .app-loading-overlay__panel {
            min-width: 190px;
            display: grid;
            justify-items: center;
            gap: 8px;
            padding: 24px 28px;
            border-radius: var(--radius-md);
            background: var(--color-white);
            color: var(--color-gray-dark);
            box-shadow: var(--shadow-card);
            text-align: center;
        }

        .app-loading-overlay__panel small {
            color: var(--color-gray-medium);
        }

        .app-loading-spinner {
            width: 34px;
            height: 34px;
            border: 4px solid var(--color-primary-soft);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: app-loading-spin 0.75s linear infinite;
        }

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

        @media (prefers-reduced-motion: reduce) {
            .app-loading-spinner {
                animation-duration: 1.5s;
            }
        }

        .sidebar__language {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 9px;
            padding: 0;
            color: var(--color-sidebar-link);
        }

        .sidebar__language>i {
            margin-right: 4px;
            font-size: 18px;
        }

        .sidebar__language a {
            padding: 5px 8px;
            border: 1px solid var(--color-sidebar-border);
            border-radius: var(--radius-sm);
            color: inherit;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
        }

        .sidebar__language a:hover,
        .sidebar__language a.is-active {
            border-color: var(--color-primary);
            background: var(--color-primary);
            color: var(--color-white);
        }

        .app-main {
            flex: 1;
            width: calc(100% - 260px);
            min-width: 0;
            margin-left: 260px;
            padding: 28px;
        }

        .page-header {
            position: static;
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: center;
            margin-bottom: 22px;
        }

        .page-header h1 {
            margin: 0;
            text-align: left;
        }

        .page-title-with-icon {
            display: flex;
            gap: 12px;
            align-items: center;
            min-width: 0;
        }

        .page-title-icon,
        .dashboard-panel-icon,
        .dashboard-card-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border-radius: var(--radius-md);
        }

        .page-title-icon {
            width: 42px;
            height: 42px;
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
            font-size: 23px;
        }

        .page-kicker {
            margin: 0 0 4px;
            color: var(--color-gray-medium);
            font-size: 14px;
        }

        .page-kicker i {
            color: var(--color-primary);
            vertical-align: -1px;
        }

        .user-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 9px 12px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-white);
            font-weight: 700;
        }

        .user-pill i {
            color: var(--color-primary);
            font-size: 18px;
        }

        .content-panel {
            padding: 22px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-white);
        }

        .content-panel h2 {
            margin: 0 0 8px;
        }

        .content-panel p {
            margin: 0;
            color: var(--color-gray-medium);
        }

        .dashboard-panel {
            margin-top: 18px;
        }

        .dashboard-body .app-main {
            background:
                linear-gradient(180deg, rgba(37, 99, 235, 0.055), rgba(37, 99, 235, 0) 240px),
                transparent;
        }

        .dashboard-hero-panel {
            display: flex;
            justify-content: space-between;
            gap: 22px;
            align-items: center;
            margin-bottom: 18px;
            padding: 22px;
            border: 1px solid rgba(37, 99, 235, 0.18);
            border-radius: var(--radius-md);
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 34%),
                linear-gradient(135deg, var(--color-white), #f8fafc);
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
        }

        .dashboard-hero-panel h2 {
            margin: 0 0 6px;
            font-size: clamp(1.6rem, 2.4vw, 2.35rem);
        }

        .dashboard-hero-panel p {
            margin: 0;
            color: var(--color-gray-medium);
        }

        .dashboard-hero-progress {
            display: grid;
            gap: 8px;
            min-width: min(100%, 260px);
            padding: 14px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.78);
        }

        .dashboard-hero-progress span:first-child {
            color: var(--color-gray-dark);
            font-size: 1.45rem;
            font-weight: 800;
        }

        .dashboard-hero-progress small {
            color: var(--color-gray-medium);
            font-weight: 700;
        }

        .dashboard-progress-track,
        .dashboard-mini-progress {
            height: 9px;
            overflow: hidden;
            border-radius: var(--radius-pill);
            background: #e5e7eb;
        }

        .dashboard-progress-track span,
        .dashboard-mini-progress span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--color-primary), var(--color-success-text));
        }

        .dashboard-welcome-panel {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .dashboard-panel-icon {
            width: 40px;
            height: 40px;
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
            font-size: 22px;
        }

        .dashboard-summary-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            overflow: hidden;
            min-height: 236px;
            border-color: rgba(148, 163, 184, 0.24);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        .dashboard-summary-card:hover {
            transform: translateY(-2px);
            border-color: rgba(37, 99, 235, 0.26);
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
        }

        .dashboard-summary-card::after {
            content: "";
            position: absolute;
            inset: auto -32px -44px auto;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: var(--color-primary-muted);
            pointer-events: none;
        }

        .dashboard-summary-card--success::after {
            background: rgba(22, 101, 52, 0.12);
        }

        .dashboard-summary-card--danger::after {
            background: rgba(220, 38, 38, 0.12);
        }

        .dashboard-summary-card--warning::after {
            background: rgba(245, 158, 11, 0.16);
        }

        .dashboard-card-icon {
            width: 38px;
            height: 38px;
            margin-bottom: 12px;
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
            font-size: 21px;
        }

        .dashboard-card-icon--success {
            background: var(--color-success-soft);
            color: var(--color-success-text);
        }

        .dashboard-card-icon--danger {
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }

        .dashboard-card-icon--warning {
            background: #fef3c7;
            color: #92400e;
        }

        .dashboard-summary-card__button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: auto;
        }

        .dashboard-attendance-list {
            display: grid;
            width: 100%;
            max-height: 112px;
            gap: 6px;
            margin: 8px 0 0;
            padding: 0 4px 0 0;
            overflow-y: auto;
            list-style: none;
        }

        .dashboard-attendance-list li {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
            padding: 6px 8px;
            border: 1px solid rgba(220, 38, 38, 0.14);
            border-radius: 7px;
            background: rgba(254, 242, 242, 0.72);
            font-size: 12px;
        }

        .dashboard-attendance-list li span {
            overflow: hidden;
            color: var(--color-gray-dark);
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dashboard-attendance-list li strong {
            flex: 0 0 auto;
            color: var(--color-danger-text);
            font-size: 10px;
            text-transform: uppercase;
        }

        .dashboard-mini-progress {
            width: 100%;
            margin: 14px 0 12px;
        }

        .dashboard-action-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
        }

        .button-link--secondary {
            border: 1px solid rgba(37, 99, 235, 0.18);
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
        }

        .button-link--secondary:hover {
            background: #bfdbfe;
            color: var(--color-primary-text);
        }

        .dashboard-work-panel {
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
        }

        .dashboard-modal-panel {
            width: min(100%, 1080px);
        }

        .dashboard-modal-panel .dashboard-panel {
            margin-top: 0;
        }

        .employee-attendance-modal-table-wrap {
            overflow-x: hidden;
        }

        .data-table.employee-attendance-modal-table {
            width: min(100%, 720px);
            min-width: 0;
            max-width: 720px;
            margin-inline: auto;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0 9px;
        }

        .employee-attendance-modal-table th,
        .employee-attendance-modal-table td {
            padding: 2px 0px;
            overflow-wrap: anywhere;
            white-space: normal;
        }

        .employee-attendance-modal-table th {
            padding: 9px 7px;
        }

        .employee-attendance-modal-table th:first-child,
        .employee-attendance-modal-table td:first-child {
            width: 45%;
        }

        .employee-attendance-modal-table th:nth-child(2),
        .employee-attendance-modal-table td:nth-child(2) {
            width: 22%;
            text-align: center;
        }

        .employee-attendance-modal-table th:last-child,
        .employee-attendance-modal-table td:last-child {
            width: 33%;
        }

        .employee-attendance-modal-table .employee-arrival-row td {
            transition: filter 140ms ease, box-shadow 140ms ease;
        }

        .employee-attendance-modal-table .employee-arrival-row.is-on-time td {
            background: var(--color-success-soft);
            color: var(--color-success-text);
        }

        .employee-attendance-modal-table .employee-arrival-row.is-late td {
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }

        .employee-attendance-modal-table .non-present-row--absent td {
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }

        .employee-attendance-modal-table tbody tr:hover td {
            filter: brightness(0.94);
            box-shadow: inset 0 1px 0 var(--color-gray-medium), inset 0 -1px 0 var(--color-gray-medium);
        }

        .employee-attendance-modal-table .employee-arrival-row small {
            display: block;
            margin-top: 2px;
            color: inherit;
        }

        button:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .notice {
            margin-bottom: 16px;
            padding: 12px 14px;
            border-radius: var(--radius-md);
            font-weight: 700;
        }

        .notice--success {
            background: var(--color-success-soft);
            color: var(--color-success-text);
        }

        .notice--error {
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }

        .user-admin-panel {
            margin-bottom: 18px;
        }

        .student-filter-panel {
            position: sticky;
            top: 12px;
            z-index: 15;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
        }

        .user-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            margin-top: 16px;
        }

        .section-heading {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: flex-start;
        }

        .section-heading h2 {
            margin-top: 0;
        }

        .page-subtitle {
            max-width: 720px;
            margin: 8px 0 0;
            color: var(--color-gray-medium);
            font-size: 0.98rem;
            line-height: 1.45;
        }

        .form-field label {
            margin-bottom: 8px;
        }

        .user-form input,
        .user-form select {
            margin-bottom: 0;
        }

        .check-field,
        .compact-check {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            font-weight: 700;
        }

        .check-field input,
        .compact-check input {
            width: auto;
            margin: 0;
        }

        .user-form .check-field {
            align-self: end;
            min-height: 44px;
        }

        .user-form button {
            align-self: end;
        }

        .table-wrap {
            width: 100%;
            margin-top: 16px;
            overflow-x: auto;
        }

        .data-table {
            /* width: 100%; */
            min-width: 1180px;
            border-collapse: collapse;
            font-size: 14px;
        }

        .compact-data-table {
            min-width: 820px;
        }

        .rubric-table {
            min-width: 680px;
        }

        .rubric-group-selects {
            display: grid;
            grid-template-columns: repeat(5, minmax(120px, 1fr));
            gap: 8px;
        }

        .rubric-group-select {
            min-height: 38px;
            padding: 7px 9px;
        }

        .rubric-color-control {
            display: grid;
            grid-template-columns: auto 44px;
            gap: 8px;
            align-items: center;
        }

        .rubric-color-toggle {
            display: inline-flex;
            gap: 5px;
            align-items: center;
            margin: 0;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .rubric-color-toggle input {
            width: auto;
        }

        .rubric-color-control input[type="color"] {
            min-height: 34px;
            padding: 2px;
        }

        .rubric-total--valid {
            color: var(--color-success-text);
        }

        .rubric-total--invalid {
            color: var(--color-danger-text);
        }

        .data-table th,
        .data-table td {
            /* padding-block: 0px; */
            border-bottom: 1px solid var(--color-gray-light);
            /* text-align: left; */
            vertical-align: middle;
            font-size: 18px;
        }

        .data-table th {
            background: var(--color-gray-light);
            color: var(--color-gray-medium);
            font-size: 13px;
            text-transform: uppercase;
        }

        .data-table tr.student-row--non-present>td {
            background-color: var(--color-danger-soft);
        }

        .data-table tr.student-row--non-present>td:first-child {
            border-left: 4px solid var(--color-danger);
        }

        .data-table .student-grade-separator th {
            padding: 10px 12px;
            border-top: 2px solid var(--color-primary);
            border-bottom-color: var(--color-primary);
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
            font-size: 14px;
            font-weight: 800;
        }

        .student-attendance-badge {
            width: fit-content;
            display: block;
            margin-top: 6px;
            padding: 5px 8px;
            border-radius: var(--radius-pill);
            background: var(--color-white);
            color: var(--color-danger-text);
            font-size: 12px;
            font-weight: 700;
        }

        .student-attendance-badge.attendance-history-row--absent {
            background: var(--color-danger-soft);
        }

        .student-attendance-badge.attendance-history-row--tardy {
            background: var(--color-warning-soft);
        }

        .student-attendance-badge.attendance-history-row--early-dismissal {
            background: var(--color-attendance-early-soft);
        }

        .student-attendance-badge.attendance-history-row--suspension {
            background: var(--color-attendance-suspension-soft);
        }

        .student-attendance-events {
            display: grid;
            gap: 8px;
            margin-bottom: 18px;
            padding: 12px;
            border: 1px solid var(--color-gray-light);
            background: var(--color-gray-light);
        }

        .student-attendance-events[hidden] {
            display: none;
        }

        .student-attendance-events h3 {
            margin: 0 0 2px;
            font-size: 0.95rem;
        }

        .student-attendance-event {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 10px;
            border: 1px solid var(--color-gray-border, var(--color-gray-light));
            background: var(--color-white);
        }

        .student-attendance-event.attendance-history-row--absent {
            background: var(--color-danger-soft);
        }

        .student-attendance-event.attendance-history-row--tardy {
            background: var(--color-warning-soft);
        }

        .student-attendance-event.attendance-history-row--early-dismissal {
            background: var(--color-attendance-early-soft);
        }

        .student-attendance-event.attendance-history-row--suspension {
            background: var(--color-attendance-suspension-soft);
        }

        .student-attendance-event>div {
            display: flex;
            gap: 8px;
            align-items: baseline;
            flex-wrap: wrap;
        }

        .student-attendance-event small {
            flex-basis: 100%;
        }

        .table-form {
            display: contents;
        }

        /* Ancho de la celda del gradesheet */
        .data-table input {
            /* min-width: 60px; */
            width: 100%;
            height: 100%;
            /* padding: 9px 10px; */
            font-size: 16px;
            font-weight: bold;
        }

        .data-table input[type="password"] {
            min-width: 135px;
        }

        .data-table select {
            /* min-width: 140px;
            padding: 0px; */
            font-size: 14px;
        }

        .modal-row td {
            padding: 0;
            border-bottom: 0;
        }

        .button-small {
            width: auto;
            padding: 9px 12px;
            font-size: 14px;
        }

        .button-secondary {
            border: 1px solid var(--color-gray-light);
            background: var(--color-white);
            color: var(--color-gray-dark);
        }

        .button-secondary:hover {
            background: var(--color-gray-light);
        }

        .button-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: auto;
            padding: 10px 12px;
            border-radius: var(--radius-sm);
            background: var(--color-primary);
            color: var(--color-white);
            font-weight: 700;
            text-decoration: none;
        }

        .button-link:hover {
            background: var(--color-primary-hover);
        }

        .button-danger {
            background: var(--color-danger);
        }

        .button-danger:hover {
            background: var(--color-danger-hover);
        }

        .action-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .button-link i,
        .button-small i {
            font-size: 1.05em;
            vertical-align: -2px;
        }

        .button-link:has(i),
        .button-small:has(i) {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            justify-content: center;
        }

        .teacher-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            margin-bottom: 18px;
        }

        .teacher-card {
            padding: 20px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-white);
        }

        .teacher-card__label {
            display: inline-block;
            margin-bottom: 12px;
            padding: 5px 8px;
            border-radius: var(--radius-sm);
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
            font-size: 13px;
            font-weight: 700;
        }

        .teacher-activity-label {
            display: grid;
            gap: 6px;
            width: 100%;
            margin-bottom: 0;
            padding: 8px;
            background: var(--color-gray-light);
            color: var(--color-gray-dark);
        }

        .teacher-activity-stack {
            display: grid;
            gap: 6px;
            margin-bottom: 14px;
        }

        .teacher-activity-label__text {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            font-size: 12px;
            line-height: 1;
        }

        .teacher-activity-battery {
            display: flex;
            flex-wrap: wrap;
            gap: 2px;
            align-items: center;
            min-height: 14px;
        }

        .teacher-activity-label__controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .teacher-activity-label__controls .teacher-activity-battery {
            flex: 1 1 auto;
        }

        .teacher-activity-settings {
            display: grid;
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            place-items: center;
            padding: 0;
            border: 1px solid var(--color-gray-light);
            border-radius: 6px;
            background: var(--color-white);
            color: var(--color-gray-medium);
            cursor: pointer;
            font-size: 11px;
        }

        .teacher-activity-settings:hover,
        .teacher-activity-settings:focus-visible {
            border-color: var(--color-primary);
            color: var(--color-primary);
        }

        .activity-settings-modal__body {
            min-height: 120px;
        }

        .activity-settings-status {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 14px 16px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-gray-light);
            color: var(--color-gray-dark);
        }

        .activity-settings-status > i {
            font-size: 20px;
        }

        .activity-settings-status div,
        .activity-settings-status span {
            display: block;
        }

        .activity-settings-status span {
            margin-top: 3px;
            color: var(--color-gray-medium);
            font-size: 13px;
        }

        .activity-settings-status.is-complete {
            border-color: var(--color-success-soft);
            background: var(--color-success-soft);
            color: var(--color-success-text);
        }

        .activity-settings-status.is-missing {
            border-color: var(--color-danger-soft);
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }

        .activity-settings-missing-list {
            display: grid;
            gap: 8px;
            margin: 14px 0 0;
            padding: 0;
            list-style: none;
        }

        .activity-settings-missing-list li {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding: 11px 13px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-sm);
            color: var(--color-gray-dark);
        }

        .activity-settings-missing-list .activity-settings-week {
            display: grid;
            justify-content: stretch;
            gap: 9px;
        }

        .activity-settings-week.is-ignored {
            border-color: #cbd5e1;
            background: #f3f4f6;
        }

        .activity-settings-week__heading {
            display: flex;
            justify-content: space-between;
            gap: 18px;
        }

        .activity-settings-week__badge {
            width: fit-content;
            padding: 3px 8px;
            border-radius: 999px;
            background: #d1d5db;
            color: #374151;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .activity-settings-week__reason {
            margin: 0;
            color: #374151;
            line-height: 1.45;
        }

        .activity-settings-week__audit {
            color: #6b7280;
        }

        .activity-settings-week__omit,
        .activity-settings-week__restore {
            width: fit-content;
        }

        .activity-settings-week__editor {
            display: grid;
            gap: 8px;
        }

        .activity-settings-week__editor textarea {
            width: 100%;
            min-height: 84px;
            resize: vertical;
        }

        .activity-settings-week__editor-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .activity-settings-missing-list strong {
            text-align: right;
        }

        .activity-settings-modal:not([hidden]) .modal__backdrop {
            animation: activity-settings-backdrop-in 360ms ease-out both;
        }

        .activity-settings-modal:not([hidden]) .modal__panel {
            animation: activity-settings-panel-in 360ms cubic-bezier(.2, .75, .25, 1) both;
        }

        .activity-settings-modal.is-closing .modal__backdrop {
            animation: activity-settings-backdrop-out 300ms ease-in both;
        }

        .activity-settings-modal.is-closing .modal__panel {
            animation: activity-settings-panel-out 300ms ease-in both;
        }

        @keyframes activity-settings-panel-in {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes activity-settings-panel-out {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(20px); }
        }

        @keyframes activity-settings-backdrop-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes activity-settings-backdrop-out {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .activity-settings-modal:not([hidden]) .modal__backdrop,
            .activity-settings-modal:not([hidden]) .modal__panel,
            .activity-settings-modal.is-closing .modal__backdrop,
            .activity-settings-modal.is-closing .modal__panel {
                animation-duration: 1ms;
            }
        }

        body.activity-settings-modal-open {
            overflow: hidden;
        }

        .teacher-activity-segment {
            width: 6px;
            height: 13px;
            border-radius: 2px;
            background: var(--color-gray-light);
        }

        .teacher-activity-label.is-empty .teacher-activity-segment {
            border: 1px solid var(--color-gray-medium);
            background: var(--color-gray-light);
        }

        .teacher-activity-label.is-empty .teacher-activity-segment.is-placeholder {
            opacity: 0.65;
        }

        .teacher-activity-segment.is-filled {
            background: var(--color-gray-medium);
        }

        .teacher-activity-label.is-current .teacher-activity-segment.is-filled {
            background: #52ed89;
        }

        .teacher-activity-label.is-warning .teacher-activity-segment.is-filled {
            background: #f59e0b;
        }

        .teacher-activity-label.is-late .teacher-activity-segment.is-filled,
        .teacher-activity-label.is-empty .teacher-activity-segment.is-filled {
            background: var(--color-danger);
        }

        .teacher-activity-label .teacher-activity-segment.is-ignored {
            border: 1px solid #8056c7;
            background: #b99ae9;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
        }

        .teacher-activity-label.is-current {
            border-color: var(--color-success-soft);
        }

        .teacher-activity-label.is-warning {
            border-color: #fde68a;
        }

        .teacher-activity-label.is-late,
        .teacher-activity-label.is-empty {
            border-color: var(--color-danger-soft);
        }

        .teacher-card h2 {
            margin: 0 0 8px;
            font-size: 20px;
        }

        .teacher-card p {
            margin: 0;
            color: var(--color-gray-medium);
            line-height: 1.5;
        }

        .gradesheet-card-grid {
            align-items: stretch;
        }

        .gradesheet-card {
            display: flex;
            flex-direction: column;
        }

        .gradesheet-card__title-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
        }

        .gradesheet-card__title-row h2 {
            min-width: 0;
            margin-bottom: 0;
        }

        .gradesheet-card__student-count {
            flex: 0 0 auto;
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .homeroom-gradesheet-card--attention {
            border-color: #dc2626;
            background: #fff7f7;
            box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
        }

        .homeroom-gradesheet-card--attention:hover {
            border-color: #b91c1c;
        }

        .homeroom-gradesheet-warning {
            margin: 14px 0 16px !important;
            padding: 10px 12px;
            border-left: 4px solid #dc2626;
            border-radius: 6px;
            background: #fee2e2;
            color: #b91c1c !important;
            font-size: 13px;
            font-weight: 650;
            line-height: 1.45;
        }

        body.homeroom-reminder-open {
            overflow: hidden;
        }

        .homeroom-reminder-modal {
            position: fixed;
            z-index: 10000;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 24px;
            background: rgba(15, 23, 42, 0.78);
            backdrop-filter: blur(5px);
        }

        .homeroom-reminder-modal__panel {
            width: min(100%, 480px);
            padding: 34px;
            border-top: 5px solid #dc2626;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
            color: var(--color-gray-dark);
            text-align: center;
        }

        .homeroom-reminder-modal__eyebrow {
            display: inline-block;
            margin-bottom: 16px;
            color: #b91c1c;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .homeroom-reminder-modal__icon {
            display: grid;
            place-items: center;
            width: 60px;
            height: 60px;
            margin: 0 auto 18px;
            border-radius: 50%;
            background: #fee2e2;
            color: #dc2626;
            font-size: 25px;
        }

        .homeroom-reminder-modal__panel h2 {
            margin: 0 0 12px;
            color: #172033;
            font-size: clamp(22px, 4vw, 28px);
            line-height: 1.15;
        }

        .homeroom-reminder-modal__panel p {
            margin: 0;
            color: #5b6474;
            line-height: 1.55;
        }

        .homeroom-reminder-modal__instruction {
            margin-top: 8px !important;
            color: #b91c1c !important;
            font-weight: 800;
        }

        .homeroom-reminder-modal__continue {
            min-width: 220px;
            margin-top: 24px;
            border: 0;
            cursor: pointer;
        }

        .homeroom-reminder-modal__continue:disabled {
            background: #d7dce4;
            color: #687386;
            cursor: not-allowed;
            opacity: 1;
        }

        @media (max-width: 520px) {
            .homeroom-reminder-modal {
                padding: 16px;
            }

            .homeroom-reminder-modal__panel {
                padding: 28px 20px;
            }
        }

        .teachers-card-grid {
            align-items: stretch;
        }

        .teachers-card {
            display: flex;
            flex-direction: column;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        .teachers-card:hover,
        .teachers-card.is-selected {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-soft);
            transform: translateY(-1px);
        }

        .teachers-card .button-link,
        .gradesheet-card .button-link {
            margin-top: auto;
        }

        .gradesheet-card.is-planbook-excluded {
            border-color: var(--color-gray-medium);
            background: var(--color-gray-light);
            filter: grayscale(1);
            opacity: 0.68;
        }

        .gradesheet-card.is-planbook-excluded:hover {
            opacity: 0.84;
        }

        .teacher-subject-exclusion-label {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            gap: 6px;
            margin: 2px 0 8px;
            padding: 4px 7px;
            border: 1px solid var(--color-gray-medium);
            border-radius: 4px;
            color: var(--color-gray-dark);
            font-size: 0.72rem;
            font-weight: 800;
        }

        .teachers-filter-form {
            grid-template-columns: minmax(220px, 420px) auto auto;
            margin-top: 16px;
        }

        .teachers-filter-status {
            margin: 10px 0 0;
            color: var(--color-gray-medium);
            font-size: 0.84rem;
            font-weight: 700;
        }

        [data-teacher-card][hidden],
        [data-teacher-filter-empty][hidden] {
            display: none;
        }

        .teachers-subject-panel {
            margin-top: 6px;
        }

        .teachers-return-toolbar {
            justify-content: flex-start;
            margin-bottom: 18px;
        }

        .gradesheet-progress-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin: 14px 0;
        }

        .gradesheet-progress-quarter {
            display: grid;
            gap: 3px;
            padding: 9px;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-sm);
            background: var(--color-gray-light);
            color: var(--color-gray-medium);
            font-size: 12px;
            line-height: 1.25;
        }

        .gradesheet-progress-quarter strong {
            color: var(--color-gray-strong);
            font-size: 13px;
        }

        .gradesheet-progress-quarter.has-progress {
            border-color: var(--color-primary-muted);
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
        }

        .gradesheet-progress-empty {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 14px 0;
            padding: 10px;
            border-radius: var(--radius-sm);
            background: var(--color-gray-light);
            color: var(--color-gray-medium);
            font-size: 13px;
            font-weight: 700;
        }

        .gradesheet-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin: 16px 0 0;
        }

        .gradesheet-meta div {
            min-width: 0;
            padding: 10px;
            border-radius: var(--radius-sm);
            background: var(--color-gray-light);
        }

        .gradesheet-meta dt {
            margin: 0 0 4px;
            color: var(--color-gray-medium);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .gradesheet-meta dd {
            margin: 0;
            color: var(--color-gray-dark);
            font-weight: 700;
            word-break: break-word;
        }

        .gradesheet-card__action {
            margin-top: auto;
            align-self: flex-start;
        }

        .gradesheet-card__footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: auto;
        }

        .gradesheet-card__footer .gradesheet-card__action {
            margin-top: 0;
        }

        .gradesheet-visibility-form {
            margin: 0;
        }

        .gradesheet-card__hide {
            border: 0;
            background: transparent;
            color: #64748b;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 800;
            text-decoration: underline;
            text-underline-offset: 3px;
            cursor: pointer;
        }

        .gradesheet-card__hide:hover,
        .gradesheet-card__hide:focus-visible {
            color: #b42318;
        }

        .gradesheet-card--hidden {
            min-height: 0;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 13px 15px;
            border-style: dashed;
            background: #f8fafc;
            box-shadow: none;
        }

        .gradesheet-card--hidden .teacher-card__label {
            margin-bottom: 5px;
            padding: 3px 6px;
            background: #e8edf3;
            color: #5f6f7f;
            font-size: 0.68rem;
        }

        .gradesheet-card--hidden h2 {
            margin: 0;
            color: #536476;
            font-size: 0.92rem;
        }

        .gradesheet-card__enable {
            white-space: nowrap;
        }

        .gradesheet-card-activity {
            display: grid;
            margin: 12px 0 16px;
        }

        .gradesheet-card-activity [data-quarter-activity][hidden] {
            display: none;
        }

        .gradesheet-card-activity [data-teacher-quarter-activity][hidden] {
            display: none;
        }

        .gradesheets-subheader {
            position: sticky;
            top: 8px;
            z-index: 12;
            display: flex;
            align-items: center;
            gap: 12px;
            margin: -8px 0 22px;
            padding: 10px 12px;
            border: 1px solid #dbe4ee;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 4px 14px rgba(15, 50, 80, 0.05);
        }

        .gradesheets-subheader__label {
            color: #52677a;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .gradesheets-quarter-selector {
            display: grid;
            grid-template-columns: repeat(4, 44px);
            gap: 5px;
            padding: 6px;
            border: 1px solid #dbe4ee;
            border-radius: 10px;
            background: #f4f7fa;
        }

        .gradesheets-quarter-selector__button {
            min-width: 0;
            min-height: 34px;
            border: 1px solid #cbd7e4;
            border-radius: 7px;
            background: #ffffff;
            color: #173b5c;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            cursor: pointer;
            transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
        }

        .gradesheets-quarter-selector__button:hover {
            border-color: #1f6eb3;
            background: #eaf4fd;
            color: #0f5795;
            transform: translateY(-1px);
        }

        .gradesheets-quarter-selector__button.is-active {
            border-color: #155f9d;
            background: #155f9d;
            color: #ffffff;
            box-shadow: 0 4px 9px rgba(21, 95, 157, 0.22);
        }

        .gradesheets-quarter-selector__button.is-active:hover {
            border-color: #104e82;
            background: #104e82;
            color: #ffffff;
        }

        .gradesheets-quarter-selector__button:focus-visible {
            outline: 3px solid rgba(31, 110, 179, 0.24);
            outline-offset: 2px;
        }

        .gradesheets-message-center {
            margin: 0 0 20px;
            padding: 16px;
            border: 1px solid #d8e2ec;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 6px 20px rgba(15, 50, 80, 0.06);
        }

        .gradesheets-message-center__heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 12px;
        }

        .gradesheets-message-center__heading h2 {
            margin: 2px 0 0;
            color: #173b5c;
            font-size: 1.05rem;
        }

        .gradesheets-message-center__heading > i {
            display: grid;
            width: 36px;
            height: 36px;
            place-items: center;
            border-radius: 50%;
            background: #edf5fc;
            color: #155f9d;
        }

        .gradesheets-message-center__quarter {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(240px, 0.48fr);
            gap: 10px;
            align-items: start;
        }

        .gradesheets-message-center__quarter[hidden] {
            display: none;
        }

        .gradesheets-message {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            min-width: 0;
            padding: 12px;
            border: 1px solid #dce6ef;
            border-radius: 10px;
            background: #f8fbfe;
        }

        .gradesheets-message__icon {
            display: grid;
            flex: 0 0 30px;
            width: 30px;
            height: 30px;
            place-items: center;
            border-radius: 8px;
            background: #e6f1fb;
            color: #155f9d;
        }

        .gradesheets-message > div {
            min-width: 0;
        }

        .gradesheets-message strong {
            color: #172b3d;
            font-size: 0.86rem;
        }

        .gradesheets-message p {
            margin: 3px 0 0;
            color: #5d7184;
            font-size: 0.78rem;
            line-height: 1.4;
        }

        .gradesheets-message--attention {
            grid-column: 1;
            border-color: #fecaca;
            background: #fff7f7;
        }

        .gradesheets-message--date {
            grid-column: 2;
            grid-row: 1;
        }

        .gradesheets-message--attention .gradesheets-message__icon {
            background: #fee2e2;
            color: #b42318;
        }

        .gradesheets-message--clear {
            grid-column: 1;
            border-color: #bbecd0;
            background: #f3fbf6;
        }

        .gradesheets-message--clear .gradesheets-message__icon {
            background: #dff7e8;
            color: #137a42;
        }

        .gradesheets-message details {
            margin-top: 8px;
            color: #8f241c;
            font-size: 0.76rem;
        }

        .gradesheets-message summary {
            width: fit-content;
            font-weight: 800;
            cursor: pointer;
        }

        .gradesheets-message ul {
            margin: 7px 0 0;
            padding-left: 18px;
        }

        .gradesheets-message li + li {
            margin-top: 3px;
        }

        @media (prefers-reduced-motion: reduce) {
            .gradesheets-quarter-selector__button {
                transition: none;
            }
        }

        .teacher-subject-actions {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: auto;
            padding-top: 14px;
        }

        .teacher-subject-actions .gradesheet-card__action {
            justify-content: center;
            min-width: 0;
            margin-top: 0;
            padding-inline: 10px;
            text-align: center;
            font-size: 10px;
        }

        .gradesheet-summary-panel {
            margin-bottom: 18px;
        }

        .gradesheet-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }

        .gradesheet-summary-grid div {
            min-width: 0;
        }

        .gradesheet-summary-grid span,
        .gradesheet-summary-grid small {
            display: block;
            color: var(--color-gray-medium);
            font-size: 13px;
            font-weight: 700;
        }

        .gradesheet-summary-grid strong {
            display: block;
            margin: 4px 0;
            color: var(--color-gray-dark);
            font-size: 20px;
            line-height: 1.25;
            word-break: break-word;
        }

        .settings-panel {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
            gap: 20px;
            align-items: end;
            margin-bottom: 18px;
        }

        .settings-form {
            display: grid;
            gap: 14px;
        }

        .settings-form select {
            margin-bottom: 0;
        }

        .settings-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .filter-form {
            display: grid;
            grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) auto;
            gap: 16px;
            align-items: end;
        }

        .filter-form--wide {
            grid-template-columns: minmax(260px, 1fr) minmax(160px, 200px) minmax(140px, 180px) auto;
        }

        .filter-form input,
        .filter-form select {
            margin-bottom: 0;
        }

        .settings-actions {
            margin-top: 16px;
        }

        .short-input {
            max-width: 70px;
            min-width: 70px;
            text-transform: uppercase;
        }

        .teacher-list {
            display: block;
            min-width: 260px;
            max-width: 420px;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

        .subjects-table {
            min-width: 980px;
        }

        .subjects-table tbody tr:nth-child(odd) {
            background: var(--color-table-row-light);
        }

        .subjects-table tbody tr:nth-child(even) {
            background: var(--color-table-row-muted);
        }

        .subjects-table tbody tr:nth-child(odd)>td {
            background: var(--color-table-row-light);
        }

        .subjects-table tbody tr:nth-child(even)>td {
            background: var(--color-table-row-muted);
        }

        .subjects-table .subject-name-input,
        .subjects-table .subject-teacher-select {
            width: 100%;
            max-width: 240px;
            min-height: 38px;
            height: 38px;
            margin-bottom: 0;
            padding: 7px 9px;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 1.2;
        }

        .subjects-table .subject-name-input {
            min-width: 180px;
        }

        .subjects-table .subject-teacher-select {
            min-width: 190px;
        }

        .homeroom-panel {
            margin-bottom: 18px;
        }

        .homeroom-header {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .attendance-status {
            flex: 0 0 auto;
            padding: 7px 10px;
            border-radius: var(--radius-pill);
            font-size: 13px;
            font-weight: 700;
        }

        .attendance-status--sent {
            background: var(--color-success-soft);
            color: var(--color-success-text);
        }

        .attendance-status--pending {
            background: var(--color-primary-soft);
            color: var(--color-primary-text);
        }

        .attendance-status--locked {
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }

        .locked-attendance {
            display: grid;
            gap: 6px;
            justify-items: start;
        }

        .locked-attendance p {
            margin: 0;
            color: var(--color-gray-medium);
            font-size: 13px;
            line-height: 1.35;
        }

        .locked-attendance--multiple {
            display: grid;
            gap: 7px;
        }

        .locked-attendance__event {
            padding: 7px 9px;
            border: 1px solid var(--color-gray-medium);
        }

        .locked-attendance__event .attendance-status--locked {
            background: transparent;
            color: inherit;
        }

        .locked-attendance__event--absent {
            background: var(--color-danger-soft);
        }

        .locked-attendance__event--tardy {
            background: var(--color-warning-soft);
        }

        .locked-attendance__event--early-dismissal {
            background: var(--color-attendance-early-soft);
        }

        .locked-attendance__event--suspension {
            background: var(--color-attendance-suspension-soft);
        }

        .homeroom-status-table {
            min-width: 700px;
        }

        .non-present-table {
            min-width: 980px;
        }

        .non-present-table th,
        .non-present-table td {
            padding: 10px 12px;
            line-height: 1.4;
        }

        .non-present-table tbody tr {
            height: 46px;
        }

        .non-present-table td strong,
        .non-present-table .attendance-status {
            line-height: 1.35;
        }

        .non-present-table .non-present-row--absent>td {
            background: var(--color-danger-soft);
        }

        .non-present-table .non-present-row--tardy>td {
            background: var(--color-warning-soft);
        }

        .non-present-table .non-present-row--early-dismissal>td {
            background: var(--color-attendance-early-soft);
        }

        .non-present-table .non-present-row--suspension>td {
            background: var(--color-attendance-suspension-soft);
        }

        .dashboard-attendance-summary {
            display: grid;
            gap: 6px;
            margin: 8px 0 12px;
        }

        .dashboard-attendance-summary__item {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin: 0;
            padding: 6px 9px;
            border-radius: 6px;
            font-size: 0.86rem;
        }

        .dashboard-attendance-summary__item--absent {
            background: var(--color-danger-soft);
        }

        .dashboard-attendance-summary__item--tardy {
            background: var(--color-warning-soft);
        }

        .dashboard-attendance-summary__item--early-dismissal {
            background: var(--color-attendance-early-soft);
        }

        .dashboard-attendance-summary__item--suspension {
            background: var(--color-attendance-suspension-soft);
        }

        .status-mark {
            width: 30px;
            height: 30px;
            display: inline-grid;
            place-items: center;
            border-radius: var(--radius-pill);
            font-size: 19px;
            font-weight: 800;
            line-height: 1;
        }

        .status-mark--sent {
            background: var(--color-success-soft);
            color: var(--color-success-text);
        }

        .status-mark--pending {
            background: var(--color-danger-soft);
            color: var(--color-danger-text);
        }

        .modal[hidden] {
            display: none;
        }

        .modal {
            position: fixed;
            inset: 0;
            z-index: 60;
            display: grid;
            place-items: center;
            padding: 20px;
        }

        .modal__backdrop {
            position: absolute;
            inset: 0;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: var(--color-overlay);
        }

        .modal__backdrop:hover,
        .modal__backdrop:focus,
        .modal__backdrop:focus-visible {
            background: var(--color-overlay);
            box-shadow: none;
            outline: none;
        }

        .modal__panel {
            position: relative;
            z-index: 1;
            width: min(100%, 720px);
            max-height: calc(100vh - 40px);
            overflow: auto;
            padding: 22px;
            border-radius: var(--radius-md);
            background: var(--color-white);
            box-shadow: var(--shadow-card);
        }

        .modal__panel--wide {
            width: min(100%, 980px);
        }

        .students-attendance-header-controls {
            display: flex;
            gap: 14px;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .students-attendance-header-controls label {
            margin: 0;
            font-weight: 700;
        }

        .students-attendance-header-controls label:first-of-type {
            display: grid;
            gap: 6px;
        }

        .students-attendance-header-controls input[type="date"] {
            width: auto;
            min-width: 180px;
            margin: 0;
        }

        .students-attendance-details-toggle {
            display: inline-flex;
            gap: 7px;
            align-items: center;
            min-height: 42px;
        }

        .students-attendance-details-toggle input {
            width: auto;
            margin: 0;
        }

        .data-table .student-attendance-row.attendance-history-row--absent>td {
            background: var(--color-danger-soft);
        }

        .data-table .student-attendance-row.attendance-history-row--tardy>td {
            background: var(--color-warning-soft);
        }

        .data-table .student-attendance-row.attendance-history-row--early-dismissal>td {
            background: var(--color-attendance-early-soft);
        }

        .data-table .student-attendance-row.attendance-history-row--suspension>td {
            background: var(--color-attendance-suspension-soft);
        }

        .data-table .student-attendance-row.student-attendance-row--multiple>td {
            background: var(--student-attendance-row-background);
        }

        .modal__header {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .modal__header h2 {
            margin: 0 0 6px;
            text-align: left;
        }

        .modal__header p {
            margin: 0;
            color: var(--color-gray-medium);
        }

        .modal__close {
            width: 36px;
            height: 36px;
            flex: 0 0 auto;
            padding: 0;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-white);
            color: var(--color-gray-dark);
            font-size: 24px;
            line-height: 1;
        }

        .modal__close:hover {
            background: var(--color-gray-light);
        }

        .modal__header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .student-attendance-history-placeholder {
            display: grid;
            place-items: center;
            min-height: 240px;
            margin-bottom: 18px;
            padding: 32px;
            border: 1px dashed var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-background-soft, #f7f9fc);
            color: var(--color-gray-medium);
            text-align: center;
        }

        .student-attendance-history-placeholder i {
            color: var(--color-primary);
            font-size: 2.4rem;
        }

        .student-attendance-history-placeholder p {
            margin: 12px 0 0;
        }

        .student-attendance-history-status {
            display: grid;
            place-items: center;
            min-height: 220px;
            padding: 28px;
            border: 1px dashed var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-background-soft, #f7f9fc);
            color: var(--color-gray-medium);
            text-align: center;
        }

        .student-attendance-history-status[hidden] {
            display: none;
        }

        .student-attendance-history-status i {
            color: var(--color-primary);
            font-size: 2rem;
        }

        .student-attendance-history-status.is-error i {
            color: var(--color-danger);
        }

        .student-attendance-history-status p {
            margin: 10px 0 0;
        }

        .student-attendance-calendar {
            margin-bottom: 18px;
            overflow: hidden;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
            background: var(--color-white);
        }

        .student-attendance-calendar[hidden] {
            display: none;
        }

        .student-attendance-calendar__toolbar {
            display: grid;
            grid-template-columns: 38px minmax(0, 1fr) 38px;
            gap: 10px;
            align-items: center;
            padding: 11px 14px;
            border-bottom: 1px solid var(--color-gray-light);
            background: #f5f8fb;
            text-align: center;
        }

        .student-attendance-calendar__toolbar button {
            width: 38px;
            height: 34px;
            min-height: 0;
            padding: 0;
            border: 1px solid #cbd8e4;
            border-radius: 8px;
            background: var(--color-white);
            color: var(--color-primary);
        }

        .student-attendance-calendar__toolbar button:hover {
            border-color: var(--color-primary);
            background: var(--color-primary-soft);
        }

        .student-attendance-calendar__toolbar strong {
            color: var(--color-gray-dark);
            font-size: 1.05rem;
            text-transform: capitalize;
        }

        .student-attendance-calendar__weekdays,
        .student-attendance-calendar__days {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
        }

        .student-attendance-calendar__weekdays span {
            padding: 8px 4px;
            border-bottom: 1px solid var(--color-gray-light);
            color: var(--color-gray-medium);
            background: #fbfcfd;
            font-size: .69rem;
            font-weight: 800;
            letter-spacing: .05em;
            text-align: center;
            text-transform: uppercase;
        }

        .student-attendance-calendar__weekdays span:first-child { color:#7a3440; background:#f8f1f3; }
        .student-attendance-calendar__weekdays span:last-child { color:#3f5f78; background:#edf3f7; }

        .student-attendance-calendar__day {
            min-height: 62px;
            padding: 7px;
            border-right: 1px solid #e2e9ef;
            border-bottom: 1px solid #e2e9ef;
            background: var(--color-white);
        }

        .student-attendance-calendar__day:nth-child(7n) {
            border-right: 0;
        }

        .student-attendance-calendar__day.is-empty {
            background: #f7f9fb;
        }

        .student-attendance-calendar__day.is-sunday { background:#fbf5f6; }
        .student-attendance-calendar__day.is-saturday { background:#f1f5f8; }

        .student-attendance-calendar__day.has-records {
            background: #fcfdff;
        }

        .student-attendance-calendar__day time {
            display: block;
            margin-bottom: 5px;
            color: #64778a;
            font-size: .72rem;
            font-weight: 800;
        }

        .student-attendance-calendar__code,
        .student-attendance-calendar__legend b {
            display: inline-grid;
            min-width: 28px;
            min-height: 24px;
            place-items: center;
            margin: 0 3px 3px 0;
            padding: 3px 6px;
            border-radius: 6px;
            font-size: .73rem;
            font-weight: 900;
            line-height: 1;
            white-space: nowrap;
        }

        .student-attendance-calendar__reason {
            display: -webkit-box;
            overflow: hidden;
            margin: 1px 0 2px;
            color: #8f1830;
            font-size: .58rem;
            font-weight: 700;
            line-height: 1.12;
            overflow-wrap: anywhere;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .student-attendance-calendar__code.is-a,
        .student-attendance-calendar__legend .is-a { color: #a61f36; background: #fde7eb; }
        .student-attendance-calendar__code.is-ae,
        .student-attendance-calendar__legend .is-ae { color: #8f1830; background: #f9d7df; }
        .student-attendance-calendar__code.is-t,
        .student-attendance-calendar__legend .is-t { color: #7a5700; background: #fff0bd; }
        .student-attendance-calendar__code.is-ed,
        .student-attendance-calendar__legend .is-ed { color: #68359a; background: #eee2fa; }

        .student-attendance-calendar__legend {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 18px;
            padding: 10px 14px;
            color: var(--color-gray-medium);
            background: #f5f8fb;
            font-size: .75rem;
        }

        .student-attendance-calendar__legend span {
            display: inline-flex;
            align-items: center;
        }

        .student-attendance-calendar__event {
            display: block;
            overflow: hidden;
            margin-top: 2px;
            padding: 3px 5px;
            border-left: 1px solid #111;
            border-radius: 3px;
            color: #111 !important;
            background: transparent !important;
            font-size: .64rem;
            font-weight: 300 !important;
            line-height: 1.15;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .student-attendance-calendar__event.is-holiday,
        .student-attendance-calendar__event.is-no-classes { border-left-color:#111 !important; color:#111 !important; background:transparent !important; }

        .student-attendance-print-root {
            display: none;
        }

        @media (max-width: 640px) {
            .student-attendance-calendar__day { min-height: 58px; padding: 4px; }
            .student-attendance-calendar__code { min-width: 23px; min-height: 21px; padding: 2px 4px; font-size: .65rem; }
            .student-attendance-calendar__weekdays span { overflow: hidden; font-size: .6rem; }
        }

        @media print {
            @page {
                size: 8.5in 13in;
                margin: .32in;
            }

            body.attendance-history-printing > :not(.student-attendance-print-root) {
                display: none !important;
            }

            body.attendance-history-printing .student-attendance-print-root {
                display: block !important;
                color: #13283b;
                background: #fff;
                font-family: Arial, Helvetica, sans-serif;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .student-attendance-print-page {
                box-sizing: border-box;
                width: 100%;
                min-height: 12.3in;
                break-after: page;
                page-break-after: always;
            }

            .student-attendance-print-page:last-child {
                break-after: auto;
                page-break-after: auto;
            }

            .student-attendance-print-month > header {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-areas: "brand brand" "identity facts";
                gap: 0;
                align-items: center;
                padding: 0;
                border-bottom: 1px solid #cbd7e1;
                background: #fff;
            }

            .student-attendance-print-brand {
                grid-area: brand;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: .075in .12in;
                color: #fff;
                background: #123b5a;
            }

            .student-attendance-print-brand strong { font-size: 9pt; letter-spacing: .015em; }
            .student-attendance-print-brand span { color: #c9deeb; font-size: 6.8pt; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
            .student-attendance-print-identity { grid-area: identity; padding: .09in .12in; }

            .student-attendance-print-identity small {
                color: #526b80;
                font-size: 6.5pt;
                font-weight: 800;
                letter-spacing: .09em;
                text-transform: uppercase;
            }

            .student-attendance-print-month h1 {
                margin: .018in 0 0;
                color: #102c44;
                font-size: 13pt;
                line-height: 1.1;
            }

            .student-attendance-print-month dl {
                grid-area: facts;
                display: flex;
                gap: .18in;
                margin: 0;
                padding: .09in .12in;
            }

            .student-attendance-print-month dl div { min-width: 1.05in; }
            .student-attendance-print-month dt { color: #617486; font-size: 7pt; font-weight: 700; text-transform: uppercase; }
            .student-attendance-print-month dd { margin: .02in 0 0; color: #13283b; font-size: 10pt; font-weight: 800; }

            .student-attendance-print-months {
                height: 12.3in;
                display: grid;
                grid-template-rows: repeat(2, minmax(0, 1fr));
                gap: .38in;
            }

            .student-attendance-print-month {
                min-height: 0;
                display: grid;
                grid-template-rows: auto auto auto 1fr auto;
                overflow: hidden;
                border: 1.5px solid #8fa5b7;
                border-radius: 10px;
            }

            .student-attendance-print-month-heading {
                display: flex;
                justify-content: space-between;
                gap: .12in;
                align-items: center;
                padding: .07in .12in;
                border-bottom: 1px solid #aebdca;
                background: #edf3f7;
            }

            .student-attendance-print-month h3 {
                margin: 0;
                padding: 0;
                color: #123b5a;
                background: transparent;
                font-size: 12pt;
                text-align: left;
            }

            .student-attendance-print-summary { display:flex; gap:.045in; align-items:center; }
            .student-attendance-print-summary span { display:inline-flex; gap:.025in; align-items:center; color:#53687a; font-size:6.5pt; font-weight:800; }
            .student-attendance-print-summary span b { display:inline-grid; min-width:.2in; min-height:.17in; place-items:center; margin:0; padding:.01in .025in; border-radius:4px; font-size:6.5pt; }
            .student-attendance-print-summary em { color:#18364e; font-style:normal; font-variant-numeric:tabular-nums; }
            .student-attendance-print-summary.is-empty { padding:.035in .08in; border:1px solid #aebdca; border-radius:999px; color:#4f6577; background:#fff; font-size:6.5pt; font-weight:700; }

            .student-attendance-print-weekdays,
            .student-attendance-print-days {
                display: grid;
                grid-template-columns: repeat(7, minmax(0, 1fr));
            }

            .student-attendance-print-days {
                position: relative;
                align-self: start;
                grid-auto-rows: .74in;
            }

            .student-attendance-print-weekdays span {
                padding: .03in .04in;
                border-right: 1px solid #c9d3dc;
                border-bottom: 1px solid #aebdca;
                color: #4c6275;
                background: #f7f9fb;
                font-size: 7pt;
                font-weight: 800;
                text-align: center;
            }

            .student-attendance-print-weekdays span:first-child { color:#643842; background:#f8f2f3; }
            .student-attendance-print-weekdays span:last-child { color:#3e5a70; background:#edf2f5; }

            .student-attendance-print-days > div {
                min-height: 0;
                overflow: hidden;
                padding: .045in;
                border-right: 1px solid #d3dce4;
                border-bottom: 1px solid #d3dce4;
                background: #fff;
            }

            .student-attendance-print-days > div:nth-child(7n),
            .student-attendance-print-weekdays span:nth-child(7n) { border-right: 0; }
            .student-attendance-print-days > div.is-empty { background: #f4f6f8; }
            .student-attendance-print-days > div.is-sunday { background:#fbf5f6; }
            .student-attendance-print-days > div.is-saturday { background:#f0f4f7; }
            .student-attendance-print-days > div.is-print-date {
                background: #edf5fb;
                box-shadow: inset 0 0 0 1.5px #3b739b;
            }
            .student-attendance-print-date {
                display: block;
                margin: .03in 0;
                color: #285b80;
                font-size: 6.5pt;
                font-weight: 800;
                line-height: 1.1;
            }
            .student-attendance-print-days time { display: block; width:.2in; height:.2in; margin-bottom:.025in; color:#40586c; font-size:7pt; font-weight:800; line-height:.2in; text-align:center; }
            .student-attendance-print-days b,
            .student-attendance-print-page footer b {
                display: inline-grid;
                min-width: .24in;
                min-height: .19in;
                place-items: center;
                margin-right: .025in;
                padding: .015in .035in;
                border-radius: 4px;
                font-size: 7.5pt;
                line-height: 1;
            }

            .student-attendance-print-event {
                display: -webkit-box;
                overflow: hidden;
                margin-top: .012in;
                padding: .014in .025in;
                border-left: .5pt solid #111;
                color: #111 !important;
                background: transparent !important;
                font-size: 5.4pt;
                font-weight: 300 !important;
                line-height: 1.12;
                white-space: normal;
                overflow-wrap: anywhere;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .student-attendance-print-event.is-holiday,
            .student-attendance-print-event.is-no-classes { border-left-color:#111 !important; color:#111 !important; background:transparent !important; }

            .student-attendance-print-empty {
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 2;
                margin: 0;
                padding: .09in .16in;
                border: 1px solid #bcc9d4;
                border-radius: 999px;
                color: #53687a;
                background: #fff;
                font-size: 8pt;
                font-weight: 700;
                transform: translate(-50%, -50%);
                white-space: nowrap;
            }

            .student-attendance-print-reason {
                display: -webkit-box;
                overflow: hidden;
                margin-top: .012in;
                color: #8f1830;
                font-size: 5.2pt;
                font-weight: 700;
                line-height: 1.1;
                overflow-wrap: anywhere;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .student-attendance-print-page .is-a { color: #9e1730; background: #fde3e8; }
            .student-attendance-print-page .is-ae { color: #8f1830; background: #f7ccd6; }
            .student-attendance-print-page .is-t { color: #725100; background: #ffefb8; }
            .student-attendance-print-page .is-ed { color: #633093; background: #eadcf7; }
            .student-attendance-print-page footer { display:flex; gap:.13in; align-items:center; padding:.055in .1in; border-top:1px solid #cbd5de; color:#40586c; background:#f8fafc; font-size:7pt; }
            .student-attendance-print-page footer span { display:inline-flex; align-items:center; }
            .student-attendance-print-calendar-key { margin-left:auto; color:#6a7d8d; font-size:6.3pt; font-style:italic; }
        }

        .student-attendance-history-table {
            margin-bottom: 18px;
            overflow-x: auto;
            border: 1px solid var(--color-gray-light);
            border-radius: var(--radius-md);
        }

        .student-attendance-history-table[hidden] {
            display: none;
        }

        .student-attendance-history-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .student-attendance-history-table th,
        .student-attendance-history-table td {
            padding: 11px 12px;
            border-bottom: 1px solid var(--color-gray-light);
            text-align: left;
            vertical-align: middle;
        }

        .student-attendance-history-table th {
            background: var(--color-background-soft, #f7f9fc);
            color: var(--color-gray-medium);
            font-size: 0.76rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .student-attendance-history-table tbody tr:last-child td {
            border-bottom: 0;
        }

        .student-attendance-history-badge {
            display: inline-flex;
            padding: 5px 8px;
            border-radius: 999px;
            background: var(--color-gray-light);
            font-size: 0.78rem;
            font-weight: 800;
            white-space: nowrap;
        }

        .student-attendance-history-badge.is-absent { background: var(--color-danger-soft); color: var(--color-danger); }
        .student-attendance-history-badge.is-tardy { background: var(--color-warning-soft); color: #765600; }
        .student-attendance-history-badge.is-early { background: var(--color-attendance-early-soft); color: #805000; }
        .student-attendance-history-badge.is-suspension { background: var(--color-attendance-suspension-soft); color: #713f12; }

        .modal-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .modal-form input,
        .modal-form select {
            margin-bottom: 0;
        }

        .modal-form__wide,
        .modal-actions {
            grid-column: 1 / -1;
        }

        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .attendance-table {
            min-width: 560px;
        }

        .homeroom-date-panel {
            display: flex;
            justify-content: flex-end;
        }

        .homeroom-date-form label {
            display: grid;
            gap: 6px;
            margin: 0;
            font-weight: 700;
        }

        .homeroom-date-form input {
            min-width: 180px;
            margin: 0;
        }

        .attendance-table select {
            min-width: 150px;
        }

        .homeroom-student-with-time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
        }

        .homeroom-arrival-time {
            display: none;
            align-items: center;
            gap: 8px;
            margin: 0;
            color: var(--color-gray-medium);
            font-size: 12px;
            font-weight: 700;
        }

        .homeroom-arrival-time.is-active {
            display: inline-flex;
        }

        .homeroom-arrival-time input {
            width: 120px;
            min-width: 0;
            margin: 0;
            padding: 7px 9px;
        }

        .attendance-table tbody .homeroom-attendance-row>td {
            padding-block: 8px;
        }

        .attendance-table tbody .homeroom-attendance-row--absent>td {
            background: var(--color-danger-soft);
        }

        .attendance-table tbody .homeroom-attendance-row--tardy>td {
            background: var(--color-warning-soft);
        }

        .attendance-table tbody .homeroom-attendance-row--early-dismissal>td {
            background: var(--color-attendance-early-soft);
        }

        .attendance-table tbody .homeroom-attendance-row--suspension>td {
            background: var(--color-attendance-suspension-soft);
        }

        .attendance-table tbody .homeroom-attendance-row:hover>td {
            background: var(--color-primary-soft);
        }

        .attendance-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 16px;
        }

        @media (min-width: 1200px) {
            .teacher-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 760px) {
            .student-filter-panel {
                top: 8px;
            }

            .app-body {
                display: flex;
            }

            .sidebar {
                width: min(82vw, 300px);
                height: 100vh;
                height: 100dvh;
                position: fixed;
                inset: 0 auto 0 0;
                z-index: 30;
                transform: translateX(-100%);
                transition: transform 0.22s ease;
                box-shadow: var(--shadow-sidebar);
            }

            .sidebar-collapsed .sidebar {
                width: min(82vw, 300px);
                padding: 18px 16px;
                overflow-y: auto;
            }

            .sidebar-collapsed .sidebar__brand {
                justify-content: flex-start;
                padding: 0 0 18px;
            }

            .sidebar-collapsed .sidebar__brand > div,
            .sidebar-collapsed .sidebar__system-time > div {
                display: block;
            }

            .sidebar-collapsed .sidebar__system-switcher { display: grid; }
            .sidebar-collapsed .sidebar__section-title { display: flex; }

            .sidebar-collapsed .sidebar__link > span:not(.sidebar__icon),
            .sidebar-collapsed .sidebar__logout > span:not(.sidebar__icon) { display: inline; }

            .sidebar__collapse { display: none; }

            .sidebar-open .sidebar {
                transform: translateX(0);
            }

            .menu-toggle {
                width: 42px;
                height: 42px;
                position: fixed;
                top: 14px;
                right: 14px;
                z-index: 40;
                display: grid;
                gap: 4px;
                place-content: center;
                padding: 0;
                border: 1px solid var(--color-gray-light);
                border-radius: var(--radius-md);
                background: var(--color-white);
                box-shadow: var(--shadow-menu-button);
            }

            .menu-toggle span {
                width: 20px;
                height: 2px;
                display: block;
                border-radius: var(--radius-pill);
                background: var(--color-gray-dark);
            }

            .sidebar-overlay {
                position: fixed;
                inset: 0;
                z-index: 20;
                display: none;
                background: var(--color-overlay);
            }

            .sidebar-open .sidebar-overlay {
                display: block;
            }

            .sidebar-open {
                overflow: hidden;
            }

            .app-main {
                width: 100%;
                margin-left: 0;
                padding: 74px 18px 18px;
            }

            .sidebar-collapsed .app-main {
                width: 100%;
                margin-left: 0;
            }

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

            .gradesheets-subheader {
                align-items: stretch;
                flex-direction: column;
                gap: 7px;
                margin-top: -8px;
            }

            .gradesheets-quarter-selector {
                grid-template-columns: repeat(4, minmax(42px, 1fr));
                width: 100%;
            }

            .gradesheets-message-center__quarter {
                grid-template-columns: minmax(0, 1fr);
            }

            .gradesheets-message--attention,
            .gradesheets-message--clear,
            .gradesheets-message--date {
                grid-column: 1;
            }

            .gradesheets-message--date {
                grid-row: auto;
                order: 2;
            }

            .user-pill {
                max-width: 100%;
                overflow-wrap: anywhere;
            }

            .teacher-grid {
                grid-template-columns: 1fr;
            }

            .teacher-subject-actions {
                grid-template-columns: 1fr;
            }

            .teacher-subject-actions .gradesheet-card__action {
                width: 100%;
            }

            .dashboard-hero-panel {
                align-items: stretch;
                flex-direction: column;
                padding: 18px;
            }

            .dashboard-hero-progress {
                min-width: 0;
            }

            .dashboard-summary-card {
                min-height: auto;
            }

            .dashboard-action-stack {
                width: 100%;
                justify-content: stretch;
            }

            .dashboard-action-stack .button-link {
                width: 100%;
            }

            .settings-panel,
            .settings-summary {
                grid-template-columns: 1fr;
            }

            .rubric-group-selects {
                grid-template-columns: repeat(2, minmax(150px, 1fr));
            }

            .filter-form,
            .filter-form--wide {
                grid-template-columns: 1fr;
            }

            .user-form {
                grid-template-columns: 1fr;
            }

            .gradesheet-summary-grid {
                grid-template-columns: 1fr;
            }

            .modal {
                padding: 12px;
                align-items: end;
            }

            .modal__panel {
                max-height: calc(100vh - 24px);
                padding: 18px;
            }

            .modal__header {
                align-items: flex-start;
            }

            .modal__header-actions {
                align-items: flex-end;
                flex-direction: column-reverse;
            }

            .modal-form {
                grid-template-columns: 1fr;
            }

            .modal-actions {
                flex-direction: column-reverse;
            }

            .modal-actions .button-small {
                width: 100%;
            }

            .homeroom-header {
                flex-direction: column;
            }

            .homeroom-panel {
                padding: 16px;
            }

            .homeroom-panel .table-wrap {
                overflow: visible;
            }

            .attendance-table {
                min-width: 0;
                border-collapse: separate;
                border-spacing: 0 10px;
            }

            .attendance-table thead {
                display: none;
            }

            .attendance-table,
            .attendance-table tbody,
            .attendance-table tr,
            .attendance-table td {
                display: block;
                width: 100%;
            }

            .attendance-table tr {
                padding: 12px;
                border: 1px solid var(--color-gray-light);
                border-radius: var(--radius-md);
                background: var(--color-white);
            }

            .attendance-table td {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                padding: 8px 0;
                border-bottom: 0;
            }

            .attendance-table td::before {
                content: attr(data-label);
                flex: 0 0 92px;
                color: var(--color-gray-medium);
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
            }

            .attendance-table td[data-label="Student"] {
                display: block;
                font-size: 16px;
                font-weight: 700;
                line-height: 1.35;
            }

            .attendance-table td[data-label="Student"]::before {
                display: block;
                margin-bottom: 4px;
            }

            .attendance-table td[data-label="Attendance"] {
                display: block;
            }

            .attendance-table td[data-label="Attendance"]::before {
                display: block;
                margin-bottom: 6px;
            }

            .attendance-table select {
                width: 100%;
                min-width: 0;
                min-height: 46px;
                font-size: 16px;
            }

            .attendance-actions {
                justify-content: stretch;
            }

            .attendance-actions .button-small {
                width: 100%;
            }
        }
.pass-request__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
}

.pass-request__toggle input {
    width: auto;
}

.family-attendance {
    overflow: hidden;
    border: 1px solid #f0c765;
    border-radius: 0.75rem;
    background: #fffaf0;
}

.family-attendance[hidden],
.family-attendance__person[hidden],
[data-family-pass-option][hidden] {
    display: none;
}

.family-attendance__heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f4ddb0;
}

.family-attendance__heading > div {
    display: grid;
    gap: 0.2rem;
}

.family-attendance__heading span {
    color: var(--color-gray-medium);
    font-size: 0.82rem;
}

.family-attendance__count {
    flex: 0 0 auto;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: #f4c95d;
    color: #4a3400 !important;
    font-weight: 800;
}

.family-attendance__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.75rem;
}

.family-attendance__person {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid #ead9b7;
    border-radius: 0.55rem;
    background: var(--color-white);
    cursor: pointer;
}

.family-attendance__person:has(input:checked) {
    border-color: #c69013;
    box-shadow: inset 4px 0 #d6a21d;
}

.family-attendance__person input {
    width: auto;
    flex: 0 0 auto;
}

.family-attendance__person span {
    display: grid;
    min-width: 0;
}

.family-attendance__person strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.family-attendance__person small {
    color: var(--color-gray-medium);
}

.pass-request__options {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    gap: 0.75rem 1.25rem;
    align-items: start;
    margin-top: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border, #d8dee8);
    border-radius: 0.65rem;
    background: var(--color-background-soft, #f7f9fc);
}

.pass-request__student-list {
    display: grid;
    gap: 0.45rem;
}

.pass-request__teacher {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding: 0.9rem;
    border: 1px solid var(--color-border, #d8dee8);
    border-radius: 0.65rem;
    background: var(--color-background-soft, #f7f9fc);
}

.pass-teacher-lookup {
    position: relative;
}

.pass-teacher-lookup > input[type="search"] {
    width: 100%;
}

.pass-teacher-suggestions {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.pass-teacher-suggestion {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--color-gray-light);
    border-radius: 0;
    background: var(--color-white);
    color: var(--color-gray-dark);
    text-align: left;
    cursor: pointer;
}

.pass-teacher-suggestion:last-child {
    border-bottom: 0;
}

.pass-teacher-suggestion:hover,
.pass-teacher-suggestion:focus-visible {
    background: var(--color-primary-soft);
}

.pass-teacher-suggestion strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pass-teacher-suggestion span {
    flex: 0 0 auto;
    color: var(--color-gray-medium);
    font-size: 0.75rem;
    font-weight: 700;
}

.pass-teacher-suggestion-empty {
    margin: 0;
    padding: 12px;
    color: var(--color-gray-medium);
    font-size: 0.82rem;
}

.pass-teacher-suggestions[hidden] {
    display: none;
}

.pass-request__teacher[hidden],
.pass-request[hidden] {
    display: none;
}

@media (max-width: 680px) {
    .family-attendance__list,
    .pass-request__options {
        grid-template-columns: 1fr;
    }

    .family-attendance__heading {
        align-items: flex-start;
    }
}