/* public\assets\css\style.css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --border: #dbe3ee;
    --text: #0f172a;
    --text-muted: #64748b;
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --sidebar-width: 285px;
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 18px 36px rgba(15, 23, 42, 0.12);
    --hrms-btn-bg: var(--blue-dark);
    --hrms-btn-border: var(--blue-dark);
    --hrms-btn-color: #ffffff;
}

.btn-outline-primary {
    --hrms-btn-bg: transparent;
    --hrms-btn-border: var(--blue);
    --hrms-btn-color: var(--blue-dark);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    --hrms-btn-bg: var(--blue);
    --hrms-btn-border: var(--blue);
    --hrms-btn-color: #ffffff;
}

.btn-outline-secondary {
    --hrms-btn-bg: #ffffff;
    --hrms-btn-border: #cbd5e1;
    --hrms-btn-color: #475569;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    --hrms-btn-bg: #f8fafc;
    --hrms-btn-border: #94a3b8;
    --hrms-btn-color: #0f172a;
}

.btn-warning {
    --hrms-btn-bg: #f59e0b;
    --hrms-btn-border: #f59e0b;
    --hrms-btn-color: #ffffff;
}

.btn-info {
    --hrms-btn-bg: #0891b2;
    --hrms-btn-border: #0891b2;
    --hrms-btn-color: #ffffff;
}

.btn-danger {
    --hrms-btn-bg: #dc2626;
    --hrms-btn-border: #dc2626;
    --hrms-btn-color: #ffffff;
}

.btn-success {
    --hrms-btn-bg: #16a34a;
    --hrms-btn-border: #16a34a;
    --hrms-btn-color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
    --hrms-btn-bg: #15803d;
    --hrms-btn-border: #15803d;
    --hrms-btn-color: #ffffff;
}

.btn-light {
    --hrms-btn-bg: #ffffff;
    --hrms-btn-border: #dbe3ee;
    --hrms-btn-color: #0f172a;
}

.btn-outline-light {
    --hrms-btn-bg: transparent;
    --hrms-btn-border: #cbd5e1;
    --hrms-btn-color: #334155;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    --hrms-btn-bg: #f8fafc;
    --hrms-btn-border: #94a3b8;
    --hrms-btn-color: #0f172a;
}

.superadmin-audit-btn {
    --hrms-btn-bg: #ffffff;
    --hrms-btn-border: #94a3b8;
    --hrms-btn-color: #334155;
}

.superadmin-audit-btn:hover,
.superadmin-audit-btn:focus {
    --hrms-btn-bg: #f8fafc;
    --hrms-btn-border: #64748b;
    --hrms-btn-color: #0f172a;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 0.625rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.65rem;
    background: #ffffff;
    color: #0f172a;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-control::placeholder,
.form-select::placeholder {
    color: #94a3b8;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
}

.form-control[readonly] {
    background: #f8fafc;
}

.form-control[type="file"] {
    padding: 0.35rem 0.5rem;
    overflow: hidden;
    cursor: pointer;
}

.form-control[type="file"]::file-selector-button {
    margin: -0.35rem 0.75rem -0.35rem -0.5rem;
    padding: 0.6rem 1rem;
    border: 0;
    border-right: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.form-control[type="file"]:hover::file-selector-button {
    background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%);
}

.form-control[type="file"]::-webkit-file-upload-button {
    margin: -0.35rem 0.75rem -0.35rem -0.5rem;
    padding: 0.6rem 1rem;
    border: 0;
    border-right: 1px solid #cbd5e1;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
}

.form-label {
    display: inline-block;
    margin-bottom: 0.375rem;
    font-weight: 600;
    color: #334155;
}

.card {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.card-body {
    padding: 1rem 1.25rem;
}

.alert {
    position: relative;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
}

.alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.alert-warning {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.alert-light {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #334155;
}

html.theme-dark .alert-success {
    background: #064e3b;
    border-color: #10b981;
    color: #d1fae5;
}

html.theme-dark .alert-danger {
    background: #7f1d1d;
    border-color: #f87171;
    color: #fee2e2;
}

html.theme-dark .alert-warning {
    background: #78350f;
    border-color: #fbbf24;
    color: #fef3c7;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.rounded-pill {
    border-radius: 999px !important;
}

.text-bg-primary,
.bg-primary-subtle {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.bg-warning-subtle {
    background: #fef3c7 !important;
}

.text-warning-emphasis {
    color: #92400e !important;
}

.text-primary-emphasis {
    color: #1d4ed8 !important;
}

.border-primary-subtle {
    border-color: #bfdbfe !important;
}

.border-warning-subtle {
    border-color: #fcd34d !important;
}

.shadow-sm {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.border-0 {
    border: 0 !important;
}

.w-100 {
    width: 100% !important;
}

.text-secondary,
.text-muted {
    color: #64748b !important;
}

.text-white {
    color: #ffffff !important;
}

/* Global theme toggle */
.theme-toggle-btn {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 100050;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.top-nav-theme-toggle {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
    margin-left: 10px;
    width: 38px;
    height: 38px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
    flex: 0 0 auto;
}

.theme-toggle-btn .theme-icon-sun,
.theme-toggle-btn .theme-icon-moon {
    position: absolute;
    font-size: 1rem;
    line-height: 1;
    transition: transform 1.05s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.85s ease;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

.theme-toggle-btn .theme-icon-sun {
    transform: translateY(0) rotateY(0deg);
    opacity: 1;
}

.theme-toggle-btn .theme-icon-moon {
    transform: translateY(-155%) rotateY(-180deg);
    opacity: 0;
}

html.theme-dark .theme-toggle-btn {
    background: rgba(15, 23, 42, 0.95);
    border-color: #334155;
    color: #f8fafc;
}

html.theme-dark .theme-toggle-btn .theme-icon-sun {
    transform: translateY(155%) rotateY(180deg);
    opacity: 0;
}

html.theme-dark .theme-toggle-btn .theme-icon-moon {
    transform: translateY(0) rotateY(0deg);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle-btn .theme-icon-sun,
    .theme-toggle-btn .theme-icon-moon {
        transition: none;
    }
}

/* Dark mode foundation */
html.theme-dark {
    color-scheme: dark;
}

html.theme-dark body:not(.login-body) {
    background: #0b1220;
    color: #e5e7eb;
}

html.theme-dark .login-body {
    background: #0f172a;
}

html.theme-dark .login-panel-bg {
    filter: brightness(0.85);
}

html.theme-dark .login-panel-form {
    background: #0b1220;
}

html.theme-dark .login-card {
    background: linear-gradient(145deg, #0c4a6e 0%, #0f172a 50%, #020617 100%);
    border-color: #1e293b;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.theme-dark .login-title {
    color: #f1f5f9;
}

html.theme-dark .login-powered {
    color: #475569;
}

html.theme-dark .login-divider {
    border-top-color: #1e293b;
}

html.theme-dark .login-field-wrap input {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

html.theme-dark .login-field-wrap input::placeholder {
    color: #475569;
}

html.theme-dark .login-field-wrap input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    background: #1e293b;
}

html.theme-dark .login-field-icon {
    color: #475569;
}

html.theme-dark .login-eye-btn {
    color: #475569;
}

html.theme-dark .login-eye-btn:hover,
html.theme-dark .login-eye-btn:focus {
    color: #93c5fd;
    background: #1e293b;
}

html.theme-dark .login-link {
    color: #475569;
}

html.theme-dark .login-link:hover {
    color: #93c5fd;
}

html.theme-dark .login-card .alert-danger {
    background: #450a0a;
    border-color: #7f1d1d;
    color: #fecaca;
}

html.theme-dark .login-card .alert-warning {
    background: #44300a;
    border-color: #92400e;
    color: #fde68a;
}

html.theme-dark .login-card .alert-info {
    background: #0c1a3a;
    border-color: #1e3a5f;
    color: #93c5fd;
}

html.theme-dark .main-content,
html.theme-dark .top-nav,
html.theme-dark .site-footer,
html.theme-dark .card,
html.theme-dark .mobile-navbar,
html.theme-dark .mobile-nav-menu,
html.theme-dark .im-f8604dab,
html.theme-dark .im-efcf1ac5,
html.theme-dark .im-b3f4b7de {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

html.theme-dark .table,
html.theme-dark .table td,
html.theme-dark .table th {
    color: #e5e7eb;
    border-color: #374151;
}

html.theme-dark .table-light,
html.theme-dark .table-light > tr > th,
html.theme-dark .table-light > tr > td,
html.theme-dark .table-light th,
html.theme-dark .table-light td {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
}

html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark input,
html.theme-dark textarea,
html.theme-dark select {
    background: #0f172a;
    color: #f8fafc;
    border-color: #334155;
}

html.theme-dark .form-label {
    color: #cbd5e1;
}

html.theme-dark .form-text,
html.theme-dark .text-secondary,
html.theme-dark .text-muted {
    color: #94a3b8 !important;
}

html.theme-dark .form-check-input[type="checkbox"] {
    background-color: #020617;
    border-color: #94a3b8;
}

html.theme-dark .form-check-input[type="checkbox"]:checked {
    background-color: #38bdf8;
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

html.theme-dark .form-check-input[type="checkbox"]:focus {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

html.theme-dark .form-check-label {
    color: #e2e8f0;
}

html.theme-dark .form-control[type="file"] {
    background: #0b1730;
    border-color: #1e3a5f;
}

html.theme-dark .form-control[type="file"]::file-selector-button,
html.theme-dark .form-control[type="file"]::-webkit-file-upload-button {
    border-right-color: #1e3a5f;
    background: linear-gradient(180deg, #1e293b 0%, #334155 100%);
    color: #f8fafc;
}

html.theme-dark .form-control[type="file"]:hover::file-selector-button,
html.theme-dark .form-control[type="file"]:hover::-webkit-file-upload-button {
    background: linear-gradient(180deg, #334155 0%, #475569 100%);
}

html.theme-dark .btn-outline-light {
    --hrms-btn-bg: #0f172a;
    --hrms-btn-border: #475569;
    --hrms-btn-color: #e2e8f0;
}

html.theme-dark .btn-outline-light:hover,
html.theme-dark .btn-outline-light:focus {
    --hrms-btn-bg: #1e293b;
    --hrms-btn-border: #64748b;
    --hrms-btn-color: #ffffff;
}

html.theme-dark #registerUserForm .btn-outline-light.active,
html.theme-dark #registerUserForm .btn-outline-light:active {
    --hrms-btn-bg: #e5e7eb;
    --hrms-btn-border: #cbd5e1;
    --hrms-btn-color: #0f172a;
}

html.theme-dark .btn-outline-secondary {
    color: #cbd5e1;
    border-color: #64748b;
}

html.theme-dark .btn-outline-danger {
    color: #fca5a5;
    border-color: #ef4444;
}

html.theme-dark .superadmin-audit-btn {
    --hrms-btn-bg: transparent;
    --hrms-btn-border: #64748b;
    --hrms-btn-color: #e5e7eb;
}

html.theme-dark .superadmin-audit-btn:hover,
html.theme-dark .superadmin-audit-btn:focus {
    --hrms-btn-bg: #1f2937;
    --hrms-btn-border: #94a3b8;
    --hrms-btn-color: #ffffff;
}

html.theme-dark .user-name-link {
    color: #93c5fd;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

/* Login */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #fff;
}

.login-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.login-panel-bg {
    flex: 0 0 58%;
    background: url('../images/bg_login1.jpg') center/cover no-repeat;
    position: relative;
}

.login-panel-form {
    flex: 0 0 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    padding: 48px 44px;
    transition: background 0.35s ease;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: linear-gradient(145deg, #bae6fd 0%, #e0f2fe 50%, #ffffff 100%);
    border-radius: 18px;
    padding: 40px 36px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
    border: 1px solid #e8edf3;
}

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

.login-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.login-powered {
    font-size: 0.88rem;
    color: #0369a1;
    margin: 0 0 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

.login-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.login-field-wrap {
    position: relative;
}

.login-field-wrap input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 48px 14px 16px;
    min-height: 52px;
    line-height: normal;
    font-size: 1rem;
    outline: none;
    background: #f8fafc;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.login-field-wrap input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    background: #fff;
}

.login-field-wrap input::placeholder {
    color: #94a3b8;
}

.login-field-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.login-eye-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.login-field-wrap input[type="password"],
.login-field-wrap input[type="text"] {
    height: 52px;
}

.login-eye-btn:hover,
.login-eye-btn:focus {
    color: #2563eb;
    background: #eff6ff;
    outline: none;
}

/* Suppress browser-native password reveal icons */
.login-field-wrap input::-ms-reveal,
.login-field-wrap input::-ms-clear {
    display: none;
}

.login-field-wrap input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

.login-field-wrap input::-webkit-password-toggle-button {
    -webkit-appearance: none;
    appearance: none;
    display: none !important;
}

.login-submit-btn {
    width: 100%;
    background: #1a65d6;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    margin-top: 4px;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.login-submit-btn:hover {
    background: #1354b8;
}

.login-submit-btn:active {
    transform: scale(0.99);
}

.login-submit-btn:disabled {
    background: #93c5fd;
    cursor: not-allowed;
}

.login-links {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}

.login-link {
    font-size: 0.88rem;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-link:hover {
    color: #1a65d6;
    text-decoration: underline;
}

.login-btn,
.btn-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.login-btn:hover,
.btn-blue:hover {
    background: var(--blue-dark);
}

/* Shared shell */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: #267a52;
    color: #fff;
    overflow-y: auto;
    z-index: 1000;
}

.sidebar-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 16px;
    min-height: 92px;
}

.sidebar-brand-logo {
    width: auto;
    max-width: 120px;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

.mobile-brand-logo {
    width: auto;
    max-width: 110px;
    max-height: 46px;
    object-fit: contain;
    display: block;
}

.sidebar-self-service .sidebar-title {
    min-height: 52px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-self-service .sidebar-menu {
    padding-top: 0;
}

.sidebar-self-service .sidebar-menu a {
    color: #eafaf2;
    border-left: 3px solid transparent;
    padding: 12px 22px;
    font-size: 1.02rem;
}

.sidebar-self-service .sidebar-menu a:hover,
.sidebar-self-service .sidebar-menu a:focus {
    background: rgba(0, 0, 0, 0.16);
    color: #ffffff;
}

.sidebar-self-service .sidebar-menu a.active {
    background: rgba(0, 0, 0, 0.24);
    color: #ffffff;
    border-left-color: #ffffff;
}

.sidebar-menu {
    list-style: none;
    padding: 14px 0;
}

.sidebar-menu li + li {
    margin-top: 2px;
}

.sidebar-menu a,
.menu-item {
    display: block;
    padding: 13px 26px;
    text-decoration: none;
    color: #eefcf5;
    border-left: 0;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-link-content {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.nav-link-icon {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
}

.sidebar-menu a:hover,
.sidebar-menu a:focus,
.sidebar-menu a.active,
.menu-item:hover,
.menu-item:focus,
.menu-item.active {
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    outline: none;
}

.sidebar-menu a.logout-link,
.mobile-nav-menu .menu-item.logout-link {
    background: #b91c1c !important;
    color: #ffffff !important;
    border-left: 3px solid #fecaca !important;
    font-weight: 700;
}

.sidebar-menu a.logout-link:hover,
.sidebar-menu a.logout-link:focus,
.mobile-nav-menu .menu-item.logout-link:hover,
.mobile-nav-menu .menu-item.logout-link:focus {
    background: #991b1b !important;
    color: #fff !important;
}

.mobile-navbar {
    display: none;
}

.mobile-navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #267a52;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.mobile-navbar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 clamp(170px, 56vw, 340px);
    min-height: 48px;
    margin: 0 auto;
}

.mobile-brand-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
}

.mobile-navbar-spacer {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: linear-gradient(155deg, rgba(11, 18, 32, 0.94) 0%, rgba(15, 23, 42, 0.92) 52%, rgba(8, 18, 43, 0.94) 100%);
    border: 1px solid #334155;
}

.mobile-nav-backdrop.open {
    display: block;
}

.mobile-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: min(82vw, 320px);
    height: 100vh;
    height: 100dvh;
    padding-top: 72px;
    padding-bottom: max(80px, env(safe-area-inset-bottom, 80px));
    background: #1f6a46;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 1100;
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    box-sizing: border-box;
}

.mobile-nav-menu.open {
    transform: translateX(0);
}

.mobile-nav-menu .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-navbar-self-service .mobile-navbar-header {
    background: #071538;
}

.mobile-nav-menu-self-service {
    background: #071538;
}

.mobile-nav-menu-self-service .menu-item {
    color: #9db1d1;
    border-left: 3px solid transparent;
}

.mobile-nav-menu-self-service .menu-item.active {
    background: #1f2f4b;
    color: #ffffff;
    border-left-color: #3b82f6;
}

.main-content {
    margin-left: var(--sidebar-width);
    margin-top: 0;
    padding-top: 0;
    min-height: calc(100vh - 62px);
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    margin-top: 0;
    padding: 16px 40px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.admin-hello-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    color: #1d4ed8;
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
}

.admin-hello-link:hover,
.admin-hello-link:focus {
    color: #1e40af;
    background: #dbeafe;
}

.admin-analytics-top-nav {
    gap: 14px;
}

.admin-analytics-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
}

.admin-analytics-top-actions .top-nav-theme-toggle {
    margin-left: 0;
}

.admin-analytics-top-actions .hrms-session-lock-btn i,
.admin-analytics-top-actions .hrms-notification-bell i {
    font-size: 1rem;
    line-height: 1;
}

.admin-analytics-search-wrap {
    flex: 1;
    max-width: 520px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #dbe3f3;
    background: #f8fafc;
    border-radius: 999px;
    padding: 10px 16px;
    color: #64748b;
}

.admin-analytics-search-wrap input {
    border: none;
    background: transparent;
    width: 100%;
    color: #0f172a;
}

.admin-analytics-search-wrap input:focus {
    outline: none;
}

.admin-analytics-page {
    background: #f4f7fc;
}

.admin-analytics-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
}

.admin-breadcrumb {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.admin-breadcrumb span {
    color: #94a3b8;
}

.admin-heading-actions {
    display: flex;
    gap: 10px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.admin-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.admin-stat-card-link {
    display: block;
    color: inherit;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transform: translateY(0) scale(1);
    transform-origin: center;
    will-change: transform, box-shadow;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.admin-stat-card-link * {
    text-decoration: none !important;
}

.admin-stat-card-link:hover,
.admin-stat-card-link:focus,
.admin-stat-card-link:focus-visible {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.22);
    border-color: #93c5fd;
    z-index: 4;
}

.admin-stat-label {
    color: #64748b;
    font-size: 0.82rem;
    margin: 0 0 4px;
}

.admin-stat-card h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #0f172a;
}

.admin-stat-meta {
    color: #475569;
    margin: 8px 0 0;
    font-size: 0.88rem;
}

.admin-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
}

.admin-panel-large {
    grid-column: 1 / -1;
    width: 100%;
}

.admin-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 16px;
}

.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
}

.admin-panel h2,
.admin-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.admin-country-table {
    width: 100%;
    table-layout: fixed;
}

.admin-country-table th {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-country-table th:nth-child(1),
.admin-country-table td:nth-child(1) {
    width: 30%;
}

.admin-country-table th:nth-child(2),
.admin-country-table td:nth-child(2) {
    width: 16%;
}

.admin-country-table th:nth-child(3),
.admin-country-table td:nth-child(3) {
    width: 54%;
}

.performance-view-page .performance-table-wrap {
    overflow-x: auto;
}

.performance-view-page .performance-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 18px;
    flex-wrap: wrap;
}

.performance-view-page .performance-company-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.performance-view-page .performance-company-filter {
    min-width: 240px;
    max-width: 360px;
}

.performance-view-page .performance-view-table {
    min-width: 780px;
    table-layout: fixed;
}

@media (max-width: 991px) {
    .performance-view-page .performance-table-wrap {
        overflow: visible;
    }

    .performance-view-page .performance-view-table {
        min-width: 0;
        width: 100%;
        display: block;
        border-collapse: separate;
        border-spacing: 0 12px;
    }

    .performance-view-page .performance-view-table thead {
        display: none;
    }

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

    .performance-view-page .performance-view-table tr {
        background: #fff;
        border: 1px solid #dbe4ef;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
        overflow: hidden;
    }

    .performance-view-page .performance-view-table .performance-company-row td {
        border-radius: 12px 12px 0 0;
        margin-bottom: 0;
    }

    .performance-view-page .performance-view-table td {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 10px;
        align-items: start;
        padding: 10px 12px;
        border: 0;
        border-top: 1px solid #edf2f7;
    }

    .performance-view-page .performance-view-table td:first-child {
        border-top: 0;
    }

    .performance-view-page .performance-view-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #44607d;
        white-space: nowrap;
    }

    .performance-view-page .performance-view-table .performance-leave-cell {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
}

.performance-view-page .performance-view-table th,
.performance-view-page .performance-view-table td {
    padding: 10px 12px;
    font-size: 0.92rem;
    vertical-align: middle;
}

.performance-view-page .performance-view-table .performance-company-row td {
    background: #f4f8fc;
    color: #1f3550;
    font-weight: 700;
    border-top: 1px solid #d8e3ef;
}

.performance-view-page .performance-view-table th:nth-child(1),
.performance-view-page .performance-view-table td:nth-child(1) {
    width: 14%;
}

.performance-view-page .performance-view-table th:nth-child(2),
.performance-view-page .performance-view-table td:nth-child(2),
.performance-view-page .performance-view-table th:nth-child(3),
.performance-view-page .performance-view-table td:nth-child(3),
.performance-view-page .performance-view-table th:nth-child(4),
.performance-view-page .performance-view-table td:nth-child(4),
.performance-view-page .performance-view-table th:nth-child(5),
.performance-view-page .performance-view-table td:nth-child(5) {
    width: 16%;
}

.performance-view-page .performance-view-table th:nth-child(6),
.performance-view-page .performance-view-table td:nth-child(6) {
    width: 8%;
}

.performance-view-page .performance-view-table th:nth-child(7),
.performance-view-page .performance-view-table td:nth-child(7) {
    width: 14%;
}

.performance-leave-cell {
    min-width: 0;
}

.performance-leave-detail {
    display: grid;
    gap: 10px;
}

.performance-leave-summary {
    line-height: 1.4;
    color: #0f172a;
}

.performance-leave-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.performance-leave-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.performance-leave-chip-approved {
    background: #dcfce7;
    color: #166534;
}

.performance-leave-chip-pending {
    background: #fef3c7;
    color: #92400e;
}

.performance-leave-chip-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.performance-leave-link {
    align-self: flex-start;
}

.admin-country-meter {
    width: 100%;
    max-width: none;
    min-width: 220px;
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.admin-country-meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #5b67dc, #7c8bf9);
}

.admin-quick-links {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.admin-quick-link {
    text-decoration: none;
    border: 1px solid #d9e1f1;
    border-radius: 10px;
    padding: 10px 12px;
    color: #1e293b;
    background: #f8fafc;
    font-weight: 600;
}

.admin-quick-link:hover,
.admin-quick-link:focus {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.admin-readonly-note {
    margin-top: 10px;
    margin-bottom: 0;
    color: #64748b;
    font-size: 0.84rem;
}

.admin-mini-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.admin-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.admin-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
}

.admin-pill-blue {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-pill-green {
    background: #dcfce7;
    color: #15803d;
}

.admin-pill-red {
    background: #fee2e2;
    color: #b91c1c;
}

.admin-pill-amber {
    background: #fef3c7;
    color: #78350f;
}

.password-strength-wrap {
    margin-top: 10px;
}

.password-strength-track {
    width: 100%;
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.password-strength-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.2s ease, background-color 0.2s ease;
    background: #94a3b8;
}

.password-strength-caption {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.password-rule-hint {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.82rem;
}

html.theme-dark .password-strength-track {
    background: #1e293b;
    border-color: #334155;
}

html.theme-dark .password-strength-caption {
    color: #cbd5e1;
}

html.theme-dark .password-rule-hint {
    color: #94a3b8;
}

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

.password-wrapper .form-control {
    padding-right: 2.5rem;
    color: #0f172a;
    caret-color: #0f172a;
    -webkit-text-fill-color: #0f172a;
}

html.theme-dark .password-wrapper .form-control,
[data-theme='dark'] .password-wrapper .form-control,
.dark-mode .password-wrapper .form-control,
body.dark .password-wrapper .form-control {
    color: #f8fafc !important;
    caret-color: #f8fafc;
    -webkit-text-fill-color: #f8fafc;
}

/* Suppress browser-native password reveal icons in profile forms */
.password-wrapper input::-ms-reveal,
.password-wrapper input::-ms-clear {
    display: none;
}

.password-wrapper input::-webkit-credentials-auto-fill-button,
.password-wrapper input::-webkit-textfield-decoration-container {
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

.password-wrapper input::-webkit-password-toggle-button {
    -webkit-appearance: none;
    appearance: none;
    display: none !important;
}

.password-eye-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #64748b;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 0.4rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.password-eye-btn:hover {
    background-color: #f1f5f9;
    color: #334155;
}

.password-eye-btn:focus {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
    color: #0f172a;
}

html.theme-dark .password-eye-btn {
    color: #94a3b8;
}

html.theme-dark .password-eye-btn:hover {
    background-color: #1f2937;
    color: #e2e8f0;
}

html.theme-dark .password-eye-btn:focus {
    outline: 2px solid #7dd3fc;
    outline-offset: 2px;
    color: #f8fafc;
}

.form-section-divider {
    border-top: 2px solid #e2e8f0;
    padding-top: 1rem;
}

html.theme-dark .form-section-divider {
    border-top-color: #334155;
}

.p-40 {
    padding: 40px;
}

.card-grid,
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.stat-card h3 {
    margin-bottom: 8px;
    color: var(--text);
}

.stat-card p {
    color: var(--text-muted);
}

.input-group {
    display: block;
    margin-bottom: 16px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 1rem;
    background: var(--surface);
    color: var(--text);
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

.responsive-table {
    width: 100%;
    overflow-x: auto;
}

.responsive-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.main-content table {
    width: 100%;
    border-collapse: collapse;
    min-width: 0;
}

.main-content th,
.main-content td {
    vertical-align: top;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.82rem;
    font-weight: 700;
}

.announcement-slider {
    margin-top: 20px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    padding: 18px;
    width: 100%;
    max-width: 100%;
    box-shadow: var(--shadow-sm);
}

.announcement-slider-inner {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    gap: 12px;
    align-items: stretch;
}

.announcement-nav-btn {
    border: 1px solid #93c5fd;
    background: #fff;
    color: #1d4ed8;
    border-radius: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
}

.announcement-slide-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.announcement-slide-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #c7d2fe;
    border-radius: 14px;
    padding: 14px 16px;
    min-height: 122px;
}

.announcement-slide-meta {
    color: #475569;
    font-size: 0.86rem;
    margin-bottom: 6px;
}

.announcement-slide-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: #0f172a;
}

.announcement-slide-desc {
    color: #334155;
}

.announcement-slider-dots {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    justify-content: center;
}

.announcement-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #93c5fd;
}

.announcement-slider-dot.active {
    background: #2563eb;
}

.announcement-list {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.announcement-item {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.announcement-item.highlight {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.announcement-detail-media {
    margin-top: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.announcement-compact-wrap {
    margin-top: 22px;
}

.announcement-compact {
    display: block;
    border: 2px solid #1e293b;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 45%, #f0f9ff 100%);
    padding: 12px;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 12px 28px rgba(30, 41, 59, 0.12);
}

.announcement-compact-top {
    display: grid;
    grid-template-columns: 54px 1fr 54px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.announcement-compact-label {
    border: 1px solid #94a3b8;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    font-weight: 800;
    color: #0f172a;
}

.announcement-compact-nav {
    border: 1px solid #94a3b8;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.announcement-compact-nav:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(30, 64, 175, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
}

.announcement-compact-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 2px solid #bfdbfe;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    padding: 12px 14px;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}

.announcement-compact-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.announcement-compact-link.slide-enter {
    animation: announcementFadeIn 0.45s ease;
}

.announcement-compact-link.slide-enter::after {
    animation: announcementShine 0.6s ease;
}

.announcement-compact-meta {
    color: #64748b;
    font-size: 0.86rem;
    margin-bottom: 6px;
}

.announcement-compact-title {
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 6px;
}

.announcement-compact-desc {
    color: #334155;
    font-size: 0.98rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.announcement-compact-progress {
    margin-top: 8px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
    overflow: hidden;
}

.announcement-compact-progress-bar {
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.announcement-compact-progress-bar.is-running {
    animation-name: announcementProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

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

@keyframes announcementShine {
    from {
        left: -120%;
    }
    to {
        left: 140%;
    }
}

@keyframes announcementProgress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

.site-footer {
    margin-left: var(--sidebar-width);
    padding: 18px 40px 28px;
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: left;
}

#editUserModal {
    z-index: 3000 !important;
}

#editUserModal > div {
    position: relative;
    z-index: 3001 !important;
}

@media (max-width: 1023px) {
    .sidebar {
        display: none;
    }

    .mobile-navbar {
        display: block;
        position: sticky;
        top: 0;
        z-index: 1080;
    }

    /* Ensure Bootstrap modals always appear above the sticky mobile navbar */
    .modal-backdrop {
        z-index: 1085;
    }
    .modal {
        z-index: 1090;
    }

    .main-content {
        margin-left: 0;
        min-height: 0;
    }

    .top-nav {
        padding: 16px 20px;
    }

    .site-footer {
        margin-left: 0;
        padding: 18px 20px 28px;
    }
}

@media (max-width: 900px) and (min-width: 701px) {
    .login-panel-bg {
        flex: 0 0 45%;
    }

    .login-panel-form {
        flex: 0 0 55%;
        padding: 40px 32px;
    }
}

@media (max-width: 700px) {
    .login-panel-bg {
        display: none;
    }

    .login-body,
    .login-split {
        background: url('../images/bg_login1.jpg') center/cover no-repeat;
    }

    .login-panel-form {
        flex: 1;
        padding: 40px 28px;
        background: transparent;
    }

    html.theme-dark .login-body,
    html.theme-dark .login-split {
        background: url('../images/bg_login1.jpg') center/cover no-repeat;
    }

    html.theme-dark .login-panel-form {
        background: transparent;
    }

    .login-card {
        max-width: 100%;
    }

    .login-field-wrap input {
        height: 56px;
        min-height: 56px;
        padding-top: 14px;
        padding-bottom: 14px;
        font-size: 1rem;
        line-height: normal;
    }

    .login-eye-btn,
    .login-field-icon {
        top: 28px;
    }

    .top-nav {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding: 14px 16px;
    }

    .admin-analytics-top-nav {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .admin-analytics-top-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .admin-panel {
        padding: 12px;
    }

    .admin-country-table {
        min-width: 0 !important;
        table-layout: fixed;
    }

    .admin-country-table th,
    .admin-country-table td {
        padding: 8px 6px !important;
        font-size: 0.78rem;
    }

    .admin-country-table th:nth-child(1),
    .admin-country-table td:nth-child(1) {
        width: 30%;
    }

    .admin-country-table th:nth-child(2),
    .admin-country-table td:nth-child(2) {
        width: 16%;
    }

    .admin-country-table th:nth-child(3),
    .admin-country-table td:nth-child(3) {
        width: 54%;
    }

    .admin-country-meter {
        min-width: 0;
        height: 8px;
    }

    .p-40 {
        padding: 18px 16px;
    }

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

    .main-content table {
        min-width: 0;
        table-layout: auto;
    }

    .main-content th,
    .main-content td {
        padding: 10px 8px !important;
        font-size: 0.92rem;
    }

    #editUserModal > div {
        width: calc(100vw - 24px) !important;
        max-width: 520px !important;
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .announcement-slider-inner {
        grid-template-columns: 44px 1fr 44px;
    }

    .announcement-slide-card {
        min-height: 108px;
        padding: 12px;
    }

    .announcement-compact {
        padding: 10px;
    }

    .announcement-compact-top {
        grid-template-columns: 42px 1fr 42px;
    }

    .announcement-compact-title {
        font-size: 1.22rem;
    }

    .announcement-compact-label {
        min-height: 46px;
        font-size: 1.35rem;
    }

    .manage-users-filters {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .manage-users-filters > div {
        flex: 1 1 100% !important;
    }

    .manage-users-filters select,
    .manage-users-filters input {
        width: 100%;
    }

    .manage-users-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .manage-users-actions > * {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }

    .manage-users-row-actions {
        flex-wrap: wrap;
        min-width: 140px;
    }

    .manage-users-edit-actions,
    .manage-users-delete-actions,
    .org-structure-modal-actions {
        flex-direction: column;
    }

    .org-structure-grid {
        grid-template-columns: 1fr !important;
    }

    .org-structure-add-form {
        flex-direction: column;
    }

    .org-structure-add-form button {
        width: 100%;
    }

    .profile-panel {
        padding: 18px !important;
        border-radius: 12px !important;
    }

    .profile-overview {
        gap: 16px !important;
    }

    .profile-avatar-col {
        min-width: 100% !important;
    }

    .profile-details-col {
        min-width: 100% !important;
    }

    .profile-details-grid {
        grid-template-columns: 1fr !important;
        row-gap: 8px !important;
        column-gap: 0 !important;
    }

    .profile-action-btn {
        width: 100%;
    }

    .admin-analytics-search-wrap {
        max-width: none;
    }

    .admin-analytics-heading-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-heading-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-heading-actions .btn {
        flex: 1 1 100%;
    }

    .admin-stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-content-grid,
    .admin-mini-charts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1360px) {
    .manage-users-filters {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .manage-users-filter-search {
        flex: 1 1 320px !important;
        min-width: 240px;
    }

    .manage-users-filter-field {
        flex: 1 1 180px;
        min-width: 170px;
    }

    .manage-users-filter-field select,
    .manage-users-filter-search input {
        width: 100%;
    }

    .manage-users-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .admin-content-grid {
        grid-template-columns: 1fr;
    }

    .manage-users-actions > * {
        white-space: nowrap;
    }
}

@media (min-width: 1361px) {
    .manage-users-actions {
        flex-shrink: 0;
    }
}

@media (max-width: 520px) {
    .mobile-navbar-header {
        padding: 12px 14px;
    }

    .mobile-navbar-title {
        flex-basis: clamp(150px, 56vw, 260px);
        min-height: 44px;
    }

    .mobile-brand-logo {
        max-height: 42px;
    }

    .mobile-nav-menu {
        width: 88vw;
    }

    .login-title {
        font-size: 1.6rem;
    }

    .login-panel-form {
        padding: 32px 20px;
    }

    .btn-blue,
    .login-btn {
        width: 100%;
    }

    .manage-users-actions > * {
        flex: 1 1 100%;
    }

    #deleteUserModal > div,
    #infoModal > div,
    #deleteEntityModal > div,
    #regErrorModal > div,
    #regConfirmModal > div,
    #credModal > div,
    #deleteModal > div {
        width: calc(100vw - 20px) !important;
        padding: 20px 16px !important;
    }
}

/* Mail configuration diagnostics page */
.mail-config-check-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mail-config-check-page * {
    box-sizing: border-box;
}

.mail-config-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 100%;
    padding: 40px;
}

.mail-config-check-page .header {
    margin-bottom: 30px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 20px;
}

.mail-config-check-page .header h1 {
    font-size: 1.8rem;
    color: #1f2937;
    margin-bottom: 8px;
}

.mail-config-check-page .header p {
    color: #6b7280;
    font-size: 0.95rem;
}

.mail-config-check-page .status-card {
    background: #f9fafb;
    border-left: 4px solid #667eea;
    padding: 16px;
    margin: 20px 0;
    border-radius: 8px;
}

.mail-config-check-page .status-card.success {
    background: #f0fdf4;
    border-left-color: #059669;
}

.mail-config-check-page .status-card.warning {
    background: #fffbeb;
    border-left-color: #d97706;
}

.mail-config-check-page .status-card.error {
    background: #fef2f2;
    border-left-color: #dc2626;
}

.mail-config-check-page .status-card h3 {
    color: #1f2937;
    margin-bottom: 8px;
    font-size: 1rem;
}

.mail-config-check-page .status-card p {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
}

.mail-config-check-page .config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.mail-config-check-page .config-row:last-child {
    border-bottom: none;
}

.mail-config-check-page .config-label {
    color: #4b5563;
    font-weight: 500;
    font-size: 0.9rem;
}

.mail-config-check-page .config-value {
    color: #1f2937;
    font-family: "Courier New", monospace;
    font-size: 0.85rem;
    word-break: break-all;
    max-width: 50%;
}

.mail-config-check-page .config-value.hidden {
    color: #9ca3af;
    font-style: italic;
}

.mail-config-check-page .progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}

.mail-config-check-page .progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.mail-config-check-page .button-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.mail-config-check-page .alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin: 16px 0;
    font-size: 0.9rem;
}

.mail-config-check-page .alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.mail-config-check-page .alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.mail-config-check-page .section {
    margin: 28px 0;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
}

.mail-config-check-page .section h2 {
    font-size: 1.1rem;
    color: #1f2937;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mail-config-check-page .help-text {
    font-size: 0.8rem;
    color: #6b7280;
}

.mail-config-check-page .breadcrumb {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 20px;
}

.mail-config-check-page .breadcrumb a {
    color: #667eea;
    text-decoration: none;
    padding: 0;
}

.mail-config-check-page .breadcrumb a:hover {
    text-decoration: underline;
}

.mail-config-check-page .section-warning {
    background: #fffbeb;
    border-left: 4px solid #d97706;
}

.mail-config-check-page .warning-text {
    color: #92400e;
    margin-bottom: 12px;
}

.mail-config-check-page .method-title {
    font-size: 0.95rem;
    color: #1f2937;
    margin: 16px 0 8px;
}

.mail-config-check-page .method-list {
    margin-left: 20px;
    color: #4b5563;
    font-size: 0.9rem;
}

.mail-config-check-page .inline-code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 3px;
}

.mail-config-check-page .env-snippet {
    background: #1f2937;
    color: #d1d5db;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    overflow-x: auto;
    margin: 8px 0;
}

.mail-config-check-page .mail-test-form {
    display: flex;
    gap: 8px;
}

.mail-config-check-page .mail-config-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.85rem;
}

.mail-config-check-page .mtop-12 {
    margin-top: 12px;
}

.mail-config-check-page .mtop-8 {
    margin-top: 8px;
}

/* Shared modal/keyframe animations extracted from page-level styles */
@keyframes modalPop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes regPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.15);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

@keyframes regSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Shared utility for top-nav user labels */
.user-id-badge {
    color: #3b82f6;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Superadmin leave history page */
.leave-history-page {
    background: #f8fafc;
    min-height: 100vh;
}

.leave-history-user-id {
    color: #3b82f6;
}

.leave-history-filter-summary {
    color: #64748b;
    margin-bottom: 20px;
}

.leave-history-card-pad {
    padding: 20px;
}

.leave-history-toolbar-card {
    margin-bottom: 20px;
}

.leave-history-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: end;
}

.leave-history-filter-field {
    display: grid;
    gap: 6px;
    min-width: 180px;
    flex: 1 1 220px;
}

.leave-history-filter-field label {
    font-size: 0.86rem;
    font-weight: 700;
    color: #334155;
}

.leave-history-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.leave-history-helper-note {
    margin: 12px 0 0;
    color: #64748b;
    font-size: 0.88rem;
}

.leave-history-summary-card {
    margin-bottom: 20px;
}

.leave-history-summary-title {
    margin-bottom: 12px;
}

.leave-history-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.leave-history-table-head {
    background: #f1f5f9;
}

.leave-history-cell {
    padding: 12px;
}

.leave-history-secondary {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.84rem;
}

.leave-history-row-divider {
    border-top: 1px solid #f1f5f9;
}

.leave-history-dept-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #2563eb;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.leave-history-dept-btn:hover,
.leave-history-dept-btn:focus {
    color: #1d4ed8;
}

.leave-history-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Mobile stacked card view for leave history table */
@media (max-width: 1023px) {
    .leave-history-table thead {
        display: none;
    }

    .responsive-table .leave-history-table,
    .leave-history-table,
    .leave-history-table tbody,
    .leave-history-table tr,
    .leave-history-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .leave-history-table tr {
        margin-bottom: 1.25rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 0 !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
        overflow: hidden !important;
    }

    .leave-history-row-divider {
        border-top: none !important;
    }

    .responsive-table .leave-history-table td,
    .leave-history-table td {
        display: block !important;
        text-align: left !important;
        padding: 12px 16px 12px 45% !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        position: relative !important;
        min-height: 44px;
    }

    .responsive-table .leave-history-table td:last-child,
    .leave-history-table td:last-child {
        border-bottom: none !important;
    }

    .responsive-table .leave-history-table td::before,
    .leave-history-table td::before {
        content: attr(data-label);
        position: absolute !important;
        left: 16px !important;
        top: 12px !important;
        width: 38% !important;
        padding-right: 10px !important;
        white-space: normal !important;
        font-weight: 700 !important;
        color: #334155 !important;
        text-align: left !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

    html.theme-dark .leave-history-table tr {
        background: #0f172a;
        border-color: #334155;
    }

    html.theme-dark .leave-history-table td::before {
        color: #94a3b8;
    }
}

.leave-history-status-approved {
    background: #dcfce7;
    color: #166534;
}

.leave-history-status-pending {
    background: #fef3c7;
    color: #92400e;
}

.leave-history-status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.leave-history-status-on-hold {
    background: #e2e8f0;
    color: #334155;
}

.leave-history-detail-wrap {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.leave-history-modal[hidden] {
    display: none;
}

dialog.leave-history-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 0;
    border: none;
    padding: 0;
    background: transparent;
    overflow: visible;
}

dialog.leave-history-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.leave-history-modal-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.25);
    padding: 20px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
}

.leave-history-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.leave-history-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.leave-history-modal-grid div {
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.leave-history-modal-grid dt {
    margin: 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.leave-history-modal-grid dd {
    margin: 6px 0 0;
    color: #0f172a;
    font-weight: 600;
}

.leave-history-back-wrap {
    margin-top: 20px;
}

.leave-history-back-btn {
    display: inline-block;
}

@media (max-width: 768px) {
    .leave-history-filter-actions {
        width: 100%;
    }

    .manage-users-page .responsive-table {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .manage-users-table {
        min-width: 920px;
    }

    .manage-users-table th,
    .manage-users-table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    .manage-users-table .user-name-cell,
    .manage-users-table .user-email-cell {
        min-width: 180px;
        white-space: normal;
        word-break: break-word;
    }

    .manage-users-table .manage-users-row-actions {
        min-width: 170px;
    }

    .leave-history-filter-actions > * {
        flex: 1 1 100%;
    }

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

/* Final inline-style migration helpers */
.profile-avatar-70 {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
}

.profile-avatar-72 {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e5e7eb;
}

.profile-avatar-140 {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.year-nav-link {
    text-decoration: none;
    background: #f3f4f6;
    color: #111827;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600;
}

.holiday-type-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.holiday-type-public {
    background: #dcfce7;
    color: #166534;
}

.holiday-type-company {
    background: #dbeafe;
    color: #1d4ed8;
}

.holiday-calendar-day {
    min-height: 48px;
    border-radius: 10px;
    background: #f9fafb;
    color: #111827;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.holiday-calendar-day-public {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

.holiday-calendar-day-company {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.holiday-legend-chip {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.holiday-legend-public {
    background: #dcfce7;
    border: 1px solid #86efac;
}

.holiday-legend-company {
    background: #dbeafe;
    border: 1px solid #93c5fd;
}

.holiday-legend-approved-leave {
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

.timesheet-status-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.timesheet-status-pending {
    background: #fffbeb;
    color: #92400e;
}

.timesheet-status-approved {
    background: #dcfce7;
    color: #166534;
}

.timesheet-status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.payslip-file-link {
    text-decoration: none;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

.announcement-cta-link {
    margin-top: 12px;
}

.announcement-media-list {
    max-height: 240px;
    object-fit: cover;
    margin-bottom: 12px;
}

.announcement-media-detail {
    max-height: 360px;
    object-fit: cover;
}

.no-text-decoration {
    text-decoration: none;
}

.holiday-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    box-sizing: border-box;
}

.holiday-management-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding-bottom: 28px;
}

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

.holiday-primary-btn {
    background: #1f7a4c;
    color: #ffffff;
    border: 1px solid #1f7a4c;
}

.holiday-primary-btn:hover,
.holiday-primary-btn:focus {
    background: #17623d;
    color: #ffffff;
    border-color: #17623d;
}

.holiday-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.holiday-form-card,
.holiday-table-card {
    padding: 22px;
}

.holiday-form-intro {
    margin: 6px 0 18px;
    color: #64748b;
    font-size: 0.95rem;
}

.holiday-mode-switcher {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.holiday-mode-btn {
    min-width: 170px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.holiday-form-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.holiday-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px 16px;
    align-items: start;
}

.holiday-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.holiday-field-wide {
    grid-column: 1 / -1;
}

.holiday-form-card .holiday-form-input,
.holiday-form-card .im-a7e96385,
.holiday-form-card .im-6d531e1a {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.holiday-form-card .im-6d531e1a {
    min-height: 110px;
    resize: vertical;
}

.holiday-form-card .holiday-form-input:focus,
.holiday-form-card .im-a7e96385:focus,
.holiday-form-card .im-6d531e1a:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
    background: #ffffff;
}

.holiday-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.holiday-table-card .im-2d9a9584 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.holiday-table-card .im-2d9a9584 th,
.holiday-table-card .im-2d9a9584 td {
    padding: 14px 12px;
    vertical-align: top;
}

.holiday-table-card .im-2d9a9584 tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.05);
}

@media (max-width: 900px) {
    .holiday-form-card,
    .holiday-table-card {
        padding: 16px;
    }

    .holiday-mode-btn {
        width: 100%;
    }

    .holiday-table-card .im-2d9a9584 {
        table-layout: auto;
    }
}

.holiday-edit-link {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.org-remove-btn {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: #dc2626;
    color: #fff;
    cursor: pointer;
}

.org-structure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 24px;
    align-items: start;
}

.org-structure-card--role {
    grid-column: 1;
    grid-row: 1;
}

.org-structure-card--department {
    grid-column: 2;
    grid-row: 1;
}

.org-structure-card--country {
    grid-column: 1;
    grid-row: 2;
}

.org-structure-card--company {
    grid-column: 2;
    grid-row: 2;
}

.leave-types-link {
    color: #ef4444;
    font-weight: 600;
    text-decoration: none;
}

.manage-users-row {
    border-top: 1px solid #f1f5f9;
}

.announcement-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
}

.announcement-card-image {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.announcement-delete-btn {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

.progress-fill-dynamic {
    transition: width 0.25s ease;
}

/* Dark mode fixes for analytics/dashboard surfaces */
html.theme-dark .admin-analytics-page {
    background: #0b1220 !important;
}

html.theme-dark .admin-breadcrumb,
html.theme-dark .admin-breadcrumb span,
html.theme-dark .admin-stat-label,
html.theme-dark .admin-stat-meta,
html.theme-dark .admin-country-table th,
html.theme-dark .text-secondary {
    color: #9ca3af !important;
}

html.theme-dark .admin-stat-card,
html.theme-dark .admin-panel,
html.theme-dark .announcement-item,
html.theme-dark .announcement-slide-card,
html.theme-dark .stat-card {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.theme-dark .admin-stat-card h3,
html.theme-dark .admin-panel h2,
html.theme-dark .admin-panel-title,
html.theme-dark .announcement-slide-title,
html.theme-dark .main-content h1,
html.theme-dark .main-content h2,
html.theme-dark .main-content h3,
html.theme-dark .main-content p,
html.theme-dark .main-content td,
html.theme-dark .main-content th {
    color: #e5e7eb !important;
}

html.theme-dark .admin-country-meter {
    background: #1f2937 !important;
}

html.theme-dark .performance-leave-summary {
    color: #e5e7eb !important;
}

html.theme-dark .performance-view-page .performance-view-table .performance-company-row td {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border-top: 1px solid #334155 !important;
}

html.theme-dark .performance-view-page .performance-view-table tr {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.45) !important;
}

html.theme-dark .performance-view-page .performance-view-table td {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-top-color: #1f2937 !important;
}

html.theme-dark .performance-view-page .performance-view-table td::before {
    color: #cbd5e1 !important;
}

html.theme-dark .performance-leave-chip-approved {
    background: #14532d !important;
    color: #dcfce7 !important;
}

html.theme-dark .performance-leave-chip-pending {
    background: #78350f !important;
    color: #fef3c7 !important;
}

html.theme-dark .performance-leave-chip-rejected {
    background: #7f1d1d !important;
    color: #fee2e2 !important;
}

html.theme-dark .btn-outline-primary,
html.theme-dark .btn-outline-secondary {
    color: #cbd5e1 !important;
    border-color: #64748b !important;
    background: fill !important;
}

html.theme-dark .btn-outline-primary:hover,
html.theme-dark .btn-outline-secondary:hover {
    background: #1e293b !important;
}

html.theme-dark .admin-hello-link {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #93c5fd !important;
}

html.theme-dark .top-nav {
    background: #0f172a !important;
    border-bottom-color: #1f2937 !important;
}

/* Dark mode consistency across all modules */
html.theme-dark .table {
    --bs-table-bg: #111827;
    --bs-table-striped-bg: #0f172a;
    --bs-table-hover-bg: #1f2937;
    --bs-table-color: #e5e7eb;
    --bs-table-border-color: #334155;
    color: #e5e7eb !important;
    background-color: #111827 !important;
}

html.theme-dark .table > :not(caption) > * > * {
    color: #e5e7eb !important;
    background-color: #111827 !important;
    border-bottom-color: #334155 !important;
}

html.theme-dark .table thead th,
html.theme-dark .table-light thead th,
html.theme-dark .admin-country-table thead th {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border-bottom-color: #334155 !important;
}

html.theme-dark .table tbody tr:hover > * {
    background: #1f2937 !important;
}

html.theme-dark .table-responsive,
html.theme-dark .responsive-table,
html.theme-dark .card,
html.theme-dark .modal-content,
html.theme-dark .im-a22b34a7,
html.theme-dark .im-6599cf44 {
    background-color: #111827 !important;
    border-color: #334155 !important;
}

html.theme-dark .main-content,
html.theme-dark .p-40,
html.theme-dark .container-fluid,
html.theme-dark .admin-content-grid,
html.theme-dark .admin-mini-charts {
    background: transparent !important;
}

html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark textarea,
html.theme-dark input[type='text'],
html.theme-dark input[type='email'],
html.theme-dark input[type='search'],
html.theme-dark input[type='password'],
html.theme-dark input[type='date'],
html.theme-dark input[type='time'],
html.theme-dark input[type='number'] {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.theme-dark .form-control::placeholder,
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
    color: #9ca3af !important;
}

html.theme-dark .alert-light,
html.theme-dark .bg-light,
html.theme-dark .badge.bg-light,
html.theme-dark .text-bg-light,
html.theme-dark .badge.text-bg-light {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #475569 !important;
}

html.theme-dark .btn-primary {
    background: #3bb87e !important;
    border-color: #3bb87e !important;
}

html.theme-dark .btn-primary:hover {
    background: #2f9a68 !important;
    border-color: #2f9a68 !important;
}

.org-structure-add-btn {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

.org-structure-add-btn:hover,
.org-structure-add-btn:focus {
    background: #166534 !important;
    border-color: #166534 !important;
    color: #ffffff !important;
}

.manage-users-apply-btn {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

.manage-users-apply-btn:hover,
.manage-users-apply-btn:focus {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

html.theme-dark .btn-success {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

html.theme-dark .btn-success:hover,
html.theme-dark .btn-success:focus {
    background: #166534 !important;
    border-color: #166534 !important;
    color: #ffffff !important;
}

html.theme-dark .site-footer {
    background: #0f172a !important;
    color: #9ca3af !important;
    border-top: 1px solid #1f2937;
}

html.theme-dark .profile-gradient-btn,
html.theme-dark .repo-upload-btn {
    filter: saturate(0.95) brightness(0.92);
}

html.theme-dark .sidebar {
    background: #1f4d37;
}

html.theme-dark .mobile-navbar-header {
    background: #1f4d37 !important;
}

html.theme-dark .mobile-nav-menu {
    background: #24563d !important;
}

html.theme-dark .sidebar-menu a,
html.theme-dark .menu-item {
    color: #cbd5e1;
}

/* Targeted dark-mode fixes for manage holidays, performance view, and leave history */
html.theme-dark .im-5b4bce01,
html.theme-dark .leave-history-page {
    background: #0b1220 !important;
}

html.theme-dark .im-730b4e2f,
html.theme-dark .im-1170377c,
html.theme-dark .im-f9602604,
html.theme-dark .im-e9a7a798,
html.theme-dark .leave-history-detail-wrap,
html.theme-dark .leave-history-summary-card {
    background: #111827 !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.45) !important;
}

html.theme-dark .im-1c32ff78,
html.theme-dark .im-be848b8d,
html.theme-dark .im-6c8a3d9c,
html.theme-dark .leave-history-filter-summary,
html.theme-dark .leave-history-helper-note,
html.theme-dark .leave-history-secondary,
html.theme-dark .leave-history-filter-field label,
html.theme-dark .im-39f71aec,
html.theme-dark .im-7cea3395 {
    color: #94a3b8 !important;
}

html.theme-dark .im-90f60979,
html.theme-dark .im-e3d62fe3,
html.theme-dark .im-55483d59,
html.theme-dark .im-8bbc2e7c,
html.theme-dark .im-bbd33531,
html.theme-dark .im-e09ae6de,
html.theme-dark .leave-history-user-id,
html.theme-dark .leave-history-summary-title,
html.theme-dark .leave-history-dept-btn {
    color: #e2e8f0 !important;
}

html.theme-dark .holiday-form-input,
html.theme-dark .im-a7e96385,
html.theme-dark .im-6d531e1a,
html.theme-dark .im-a7e96385 option {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.theme-dark .im-30e8982d {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

html.theme-dark .im-0127e42d {
    box-shadow: 0 0 0 1px #1d4ed8 inset;
}

html.theme-dark .im-88ea4f87,
html.theme-dark .im-6155e24a,
html.theme-dark .leave-history-table-head {
    background: #1f2937 !important;
}

html.theme-dark .im-2d9a9584,
html.theme-dark .leave-history-table {
    color: #e5e7eb !important;
}

html.theme-dark .im-bcd4daa7,
html.theme-dark .im-05b2f6fc,
html.theme-dark .im-ccabc303,
html.theme-dark .im-2c9e984f,
html.theme-dark .leave-history-cell {
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.theme-dark .im-9cd16d9f,
html.theme-dark .im-fd780465,
html.theme-dark .leave-history-row-divider {
    border-color: #334155 !important;
}

html.theme-dark .leave-history-modal-dialog {
    background: #111827 !important;
    border: 1px solid #334155 !important;
}

html.theme-dark .leave-history-modal-grid div {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.theme-dark .leave-history-modal-grid dd,
html.theme-dark .leave-history-modal-close {
    color: #e5e7eb !important;
}

html.theme-dark .im-112ef4ed {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}

html.theme-dark .holiday-calendar-day {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.theme-dark .holiday-calendar-day-public {
    background: #14532d !important;
    color: #dcfce7 !important;
    border-color: #22c55e !important;
}

html.theme-dark .holiday-calendar-day-company {
    background: #1e3a8a !important;
    color: #dbeafe !important;
    border-color: #3b82f6 !important;
}

html.theme-dark .holiday-type-public {
    background: #14532d !important;
    color: #dcfce7 !important;
}

html.theme-dark .holiday-type-company {
    background: #1e3a8a !important;
    color: #dbeafe !important;
}

html.theme-dark .holiday-edit-link {
    background: #1d4ed8 !important;
    color: #eff6ff !important;
}

html.theme-dark .im-de4981d8 {
    background: #b91c1c !important;
    color: #fee2e2 !important;
}

html.theme-dark .leave-types-link {
    color: #93c5fd !important;
}

html.theme-dark .im-26ebfbe1,
html.theme-dark .leave-history-table td[colspan] {
    color: #94a3b8 !important;
}

/* Department-manager announcement slider dark mode */
html.theme-dark .announcement-compact {
    border-color: #334155;
    background: linear-gradient(135deg, #111827 0%, #0f172a 45%, #111827 100%);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.42);
}

html.theme-dark .announcement-compact-label {
    border-color: #334155;
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    color: #f8fafc;
}

html.theme-dark .announcement-compact-nav {
    border-color: #334155;
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    color: #e5e7eb;
}

html.theme-dark .announcement-compact-nav:hover {
    background: linear-gradient(180deg, #1f2937 0%, #334155 100%);
    box-shadow: 0 8px 20px rgba(2, 6, 23, 0.45);
}

html.theme-dark .announcement-compact-link {
    border-color: #334155;
    background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

html.theme-dark .announcement-compact-link::after {
    background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0));
}

html.theme-dark .announcement-compact-meta {
    color: #94a3b8;
}

html.theme-dark .announcement-compact-title {
    color: #f8fafc;
}

html.theme-dark .announcement-compact-desc {
    color: #cbd5e1;
}

html.theme-dark .announcement-compact-progress {
    background: rgba(51, 65, 85, 0.65);
}

/* Employee module dark-mode fixes */
html.theme-dark .im-9f90b5d9,
html.theme-dark .im-0e45a4f8,
html.theme-dark .im-ae9f7b4b,
html.theme-dark .im-27f549f7,
html.theme-dark .im-a9ffac12,
html.theme-dark .im-cb7d900c,
html.theme-dark .im-7c27baeb,
html.theme-dark .im-8b5d0e62 {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.42) !important;
}

html.theme-dark .year-nav-link {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border: 1px solid #334155;
}

html.theme-dark .im-60698394 {
    background: #14532d !important;
    color: #dcfce7 !important;
}

html.theme-dark .im-5e9b57d4,
html.theme-dark .im-e4c99d74,
html.theme-dark .im-4181b00a,
html.theme-dark .im-5b70604b,
html.theme-dark .im-0c85d0da,
html.theme-dark .im-7b9a7cf1,
html.theme-dark .im-83c690bd,
html.theme-dark .im-ce9b8c92,
html.theme-dark .im-adb1a48e,
html.theme-dark .im-06fc4ed6 {
    color: #f8fafc !important;
}

html.theme-dark .im-2e14d7e2,
html.theme-dark .im-e26706b4,
html.theme-dark .im-0fb5faa1,
html.theme-dark .im-30b8fe26,
html.theme-dark .im-1b676a7e,
html.theme-dark .im-dab0cd5c,
html.theme-dark .im-666c4d63 {
    color: #94a3b8 !important;
}

html.theme-dark .im-67d81f34,
html.theme-dark .im-de3f5142 {
    background: #1f2937 !important;
}

html.theme-dark .im-5d2ba265,
html.theme-dark .im-ca406d16 {
    color: #cbd5e1 !important;
}

html.theme-dark .im-9cd16d9f,
html.theme-dark .im-148b18fb,
html.theme-dark .im-fd780465 {
    border-color: #334155 !important;
}

html.theme-dark .badge.text-bg-primary {
    background: #2563eb !important;
    color: #eff6ff !important;
}

/* Organization Setup dark-mode fixes */
html.theme-dark .org-structure-page .im-3b491c4b {
    background: #111827 !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.42) !important;
}

html.theme-dark .org-structure-add-btn {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
}

html.theme-dark .org-structure-add-btn:hover,
html.theme-dark .org-structure-add-btn:focus {
    background: #166534 !important;
    border-color: #166534 !important;
    color: #ffffff !important;
}

html.theme-dark .manage-users-apply-btn {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

html.theme-dark .manage-users-apply-btn:hover,
html.theme-dark .manage-users-apply-btn:focus {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

html.theme-dark .org-structure-page .im-57b24dd9,
html.theme-dark .org-structure-page .im-87b33975 {
    color: #e5e7eb !important;
}

html.theme-dark .org-structure-page .im-41ecd98c {
    border-color: #334155 !important;
    background: #0f172a !important;
}

.attendance-manual-entry-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.attendance-manual-entry-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 20px;
    align-items: start;
}

.attendance-manual-entry-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.attendance-manual-entry-action {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@media (max-width: 768px) {
    .attendance-manual-entry-row {
        grid-template-columns: 1fr;
    }
}

.attendance-manual-entry-btn {
    min-width: 180px;
    color: #ffffff !important;
}

.attendance-manual-entry-help {
    margin-top: 6px;
    min-height: 1.5rem;
}

.attendance-manual-entry-spacer {
    visibility: hidden;
}

html.theme-dark .attendance-manual-entry-field .form-label,
html.theme-dark .attendance-manual-entry-help {
    color: #cbd5e1 !important;
}

html.theme-dark .attendance-manual-entry-btn {
    color: #ffffff !important;
}

html.theme-dark .org-structure-page .im-de3f5142 {
    background: #1f2937 !important;
}

html.theme-dark .org-structure-page .im-ca406d16,
html.theme-dark .org-structure-page .im-2add8d2d,
html.theme-dark .org-structure-page .im-7fd0fd36,
html.theme-dark .org-structure-page .im-a9c5936e,
html.theme-dark .org-structure-page .im-b96df375 {
    color: #e5e7eb !important;
}

html.theme-dark .org-structure-page .im-fd780465 {
    border-top-color: #334155 !important;
}

html.theme-dark .org-structure-page .im-8602dba0 {
    background: #0b1220 !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

html.theme-dark .org-structure-page .im-8602dba0::placeholder {
    color: #94a3b8 !important;
}

/* Merged from style_aachal.css: leave & holiday management UI */
.leave-management-page {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
}

.leave-hub-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    padding: 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #dceeff 0%, #f8fbff 100%);
    border: 1px solid #d7e8fb;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.leave-hub-hero-profile {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.leave-hub-eyebrow {
    margin: 0 0 6px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #2563eb;
}

.leave-hub-title {
    margin: 0;
    font-size: clamp(1.75rem, 2.8vw, 2.7rem);
    line-height: 1.05;
    color: #0f172a;
}

.leave-hub-subtitle {
    margin: 10px 0 0;
    max-width: 680px;
    color: #475569;
    font-size: 1rem;
}

.leave-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.leave-hub-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.leave-hub-action:hover,
.leave-hub-action:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.leave-hub-action-primary {
    background: var(--blue, #2563eb);
    color: #fff;
}

.leave-hub-action-secondary {
    background: #fff;
    color: var(--blue-dark, #1e40af);
    border: 1px solid var(--blue, #cbd5e1);
}

.leave-hub-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.leave-summary-card,
.leave-panel,
.leave-type-card,
.leave-tip-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.leave-summary-card {
    padding: 22px;
}

.leave-summary-label {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.leave-summary-value {
    display: block;
    font-size: 2rem;
    line-height: 1;
    color: #0f172a;
    margin-bottom: 10px;
}

.leave-summary-value-smaller {
    font-size: 1.15rem;
    line-height: 1.3;
}

.leave-summary-meta {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.leave-section-heading,
.leave-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.leave-section-title {
    margin: 0;
    font-size: 1.35rem;
    color: #0f172a;
}

.leave-section-copy {
    margin: 0;
    max-width: 420px;
    color: #64748b;
}

.leave-type-section {
    margin-bottom: 28px;
}

.leave-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.leave-type-card {
    padding: 20px;
    position: relative;
    overflow: hidden;
    --leave-accent: #2563eb;
}

.leave-type-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: currentColor;
    opacity: 0.9;
}

.leave-type-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.leave-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.leave-type-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
}

.leave-type-card h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    color: #0f172a;
}

.leave-type-card p {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 0.92rem;
}

.leave-balance-visual {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.leave-balance-ring {
    width: 142px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--leave-accent) var(--leave-progress, 0%), #dbe7f7 0);
    display: grid;
    place-items: center;
}

.leave-balance-ring-inner {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #e8f0f8;
    display: grid;
    place-items: center;
    text-align: center;
}

.leave-balance-ring-inner strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    color: #0f234a;
}

.leave-balance-ring-inner span {
    display: block;
    margin-top: 4px;
    color: #4b6282;
}

.leave-type-breakdown {
    margin: 0 0 14px;
    text-align: center;
    font-size: 1rem;
    color: #41536f;
}

.leave-type-breakdown strong {
    color: #14305f;
}

.leave-type-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.leave-usage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--leave-accent);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.leave-usage-pill-countup {
    background: #1d4ed8;
}

.leave-type-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.leave-type-metrics span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    margin-bottom: 4px;
}

.leave-type-metrics strong {
    color: #0f172a;
    font-size: 1.05rem;
}

.leave-type-link,
.leave-panel-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.leave-type-link:hover,
.leave-type-link:focus,
.leave-panel-link:hover,
.leave-panel-link:focus {
    text-decoration: underline;
}

.leave-type-casual {
    color: #0f766e;
}

.leave-type-casual .leave-type-icon {
    background: #ccfbf1;
}

.leave-type-earned {
    color: #7c3aed;
}

.leave-type-earned .leave-type-icon {
    background: #ede9fe;
}

.leave-type-sick {
    --leave-accent: #dc2626;
    color: #dc2626;
}

.leave-type-sick .leave-type-icon {
    background: #fee2e2;
    color: #b91c1c;
}

.leave-type-maternity {
    --leave-accent: #db2777;
    color: #db2777;
}

.leave-type-maternity .leave-type-icon {
    background: #fce7f3;
    color: #be185d;
}

.leave-type-paternity {
    color: #2563eb;
}

.leave-type-paternity .leave-type-icon {
    background: #dbeafe;
}

.leave-type-generic {
    color: #475569;
}

.leave-type-generic .leave-type-icon {
    background: #e2e8f0;
}

.leave-type-annual {
    --leave-accent: #2563eb;
}

.leave-type-annual .leave-type-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.leave-type-unpaid {
    --leave-accent: #7c3aed;
}

.leave-type-unpaid .leave-type-icon {
    background: #ede9fe;
    color: #6d28d9;
}

.leave-type-birthday {
    --leave-accent: #0ea5e9;
}

.leave-type-birthday .leave-type-icon {
    background: #dff4ff;
    color: #0369a1;
}

.leave-type-study {
    --leave-accent: #0f766e;
}

.leave-type-study .leave-type-icon {
    background: #ccfbf1;
    color: #0f766e;
}

.leave-type-bereavement {
    --leave-accent: #475569;
}

.leave-type-bereavement .leave-type-icon {
    background: #e2e8f0;
    color: #334155;
}

.leave-type-custom {
    --leave-accent: #0f172a;
}

.leave-type-custom .leave-type-icon {
    background: #e2e8f0;
    color: #1e293b;
}

.leave-hub-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 18px;
    align-items: start;
}

.leave-panel {
    padding: 22px;
}

.leave-panel-stack {
    display: grid;
    gap: 18px;
}

.leave-hub-table-wrap table {
    min-width: 640px;
}

.leave-status-chip,
.leave-holiday-type {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.leave-chip-pending {
    background: #fef3c7;
    color: #92400e;
}

.leave-chip-approved {
    background: #dcfce7;
    color: #166534;
}

.leave-chip-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.leave-empty-state {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #475569;
}

.leave-empty-state i {
    font-size: 1.5rem;
    color: #2563eb;
}

.leave-empty-state h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #0f172a;
}

.leave-empty-state p {
    margin: 0;
}

.leave-empty-state-compact {
    padding: 16px;
}

.leave-holiday-list {
    display: grid;
    gap: 12px;
}

.leave-holiday-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.leave-holiday-item h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #0f172a;
}

.leave-holiday-item p {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
}

.leave-holiday-type {
    background: #eff6ff;
    color: #1d4ed8;
    white-space: nowrap;
}

.leave-tip-card {
    padding: 18px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.leave-tip-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: #0f172a;
}

.leave-tip-card ul {
    margin: 0;
    padding-left: 18px;
    color: #475569;
}

.leave-tip-card li + li {
    margin-top: 8px;
}

@media (max-width: 1023px) {
    .leave-hub-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    .leave-hub-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .leave-hub-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .leave-hub-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .leave-hub-summary-grid {
        grid-template-columns: 1fr;
    }

    .leave-hub-hero-profile {
        align-items: flex-start;
    }

    .leave-hub-title {
        font-size: clamp(1.45rem, 7vw, 1.9rem);
    }

    .leave-hub-subtitle {
        font-size: 0.92rem;
    }

    .leave-hub-action {
        width: 100%;
        justify-content: center;
    }

    .leave-hub-table-wrap table {
        min-width: 0;
    }

    .leave-type-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.leave-kpi-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.leave-kpi-title {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 2.2rem);
    color: #1f2937;
}

.leave-kpi-subtitle {
    margin: 6px 0 0;
    color: #64748b;
}

.leave-kpi-strip-wrap {
    background: #dcebfa;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #c4dbf5;
    margin-bottom: 16px;
}

.leave-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
}

.leave-kpi-card {
    background: #fff;
    border: 1px solid #dbe5f2;
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}

.leave-kpi-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: #1f2937;
}

.leave-kpi-ring {
    --leave-progress: 0%;
    --leave-kpi-color: #0b3b8c;
    width: 92px;
    aspect-ratio: 1;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: conic-gradient(var(--leave-kpi-color) var(--leave-progress), #d7dce4 0);
    display: grid;
    place-items: center;
}

.leave-kpi-ring-inner {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
}

.leave-kpi-ring-inner strong {
    font-size: 1.7rem;
    line-height: 1;
    color: #1f2937;
}

.leave-kpi-ring-inner span {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
}

.leave-kpi-card p {
    margin: 0;
    color: #334155;
    font-size: 0.94rem;
}

.leave-kpi-bottom {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 14px;
}

.leave-kpi-panel {
    background: #dcebfa;
    border-radius: 14px;
    border: 1px solid #c4dbf5;
    padding: 14px;
}

.leave-kpi-panel h2 {
    margin: 0 0 10px;
    font-size: 1.08rem;
    color: #1f2937;
}

.leave-kpi-table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.leave-kpi-table thead th {
    background: #eef5ff;
    color: #1e3a8a;
    font-size: 0.86rem;
}

.leave-kpi-empty {
    margin: 0;
    background: #fff;
    padding: 14px;
    border-radius: 10px;
    color: #64748b;
}

.leave-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.leave-status-dot-approved {
    background: #22c55e;
}

.leave-status-dot-pending {
    background: #eab308;
}

.leave-status-dot-rejected {
    background: #ef4444;
}

.leave-annual-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 12px;
    align-items: center;
}

.leave-annual-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.leave-annual-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.92rem;
}

.leave-annual-legend strong {
    margin-left: auto;
    color: #0f172a;
}

.leave-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.leave-annual-ring {
    --annual-chart: conic-gradient(#dbe7fb 0% 100%);
    width: 210px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--annual-chart);
    display: grid;
    place-items: center;
}

.leave-annual-ring-inner {
    width: 142px;
    height: 142px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
}

.leave-annual-ring-inner strong,
.leave-annual-ring-inner span {
    display: block;
    color: #0f172a;
    line-height: 1.1;
}

@media (max-width: 1200px) {
    .leave-kpi-strip {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 1023px) {
    .leave-kpi-head,
    .leave-kpi-bottom {
        grid-template-columns: 1fr;
        display: grid;
    }

    .leave-kpi-strip {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .leave-annual-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .leave-annual-legend {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .leave-kpi-strip {
        grid-template-columns: 1fr;
    }

    .leave-annual-ring {
        width: 180px;
    }

    .leave-annual-ring-inner {
        width: 120px;
        height: 120px;
    }
}

/* Employee leave KPI redesign */
.employee-leave-kpi-page {
    background: #eef3f9;
    overflow-x: hidden;
}

.employee-leave-kpi-page .el-kpi-head {
    display: none;
}

.employee-leave-kpi-page .p-40 {
    overflow-x: hidden;
}

.el-kpi-head h1 {
    margin: 0;
    color: #1f2937;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
}

.el-kpi-head p {
    margin: 8px 0 14px;
    color: #6b7280;
    max-width: 960px;
    font-size: 0.95rem;
}

.el-kpi-top-wrap {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    background: #dcecff;
    border-radius: 16px;
    padding: 12px;
    border: 1px solid #c6dbf7;
    width: 100%;
    max-width: 100%;
}

.el-kpi-top-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #dce3ef;
    padding: 12px 10px;
    text-align: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.el-kpi-top-card h3 {
    margin: 0 0 10px;
    color: #1f2937;
    font-size: 0.98rem;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-kpi-circle {
    --el-progress: 0%;
    --el-color: #1d4ed8;
    width: 104px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin: 0 auto 8px;
    background: conic-gradient(var(--el-color) var(--el-progress), #d1d5db 0);
    display: grid;
    place-items: center;
}

.el-kpi-circle-inner {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
}

.el-kpi-circle-inner strong {
    display: block;
    color: #1f2937;
    font-size: clamp(1.2rem, 1.7vw, 1.7rem);
    line-height: 1;
}

.el-kpi-circle-inner span {
    display: block;
    color: #6b7280;
    font-size: 0.7rem;
}

.el-kpi-top-card p {
    margin: auto 0 0;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.35;
}

.el-kpi-bottom-wrap {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    max-width: 100%;
}

.el-kpi-panel {
    background: #dcecff;
    border-radius: 16px;
    border: 1px solid #c6dbf7;
    padding: 14px;
    min-width: 0;
}

.el-kpi-panel h2 {
    margin: 0 0 10px;
    color: #1f2937;
    font-size: 1.08rem;
}

.el-kpi-table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    table-layout: auto;
    font-size: 0.9rem;
}

.el-kpi-table th {
    background: #edf4ff;
    color: #1e3a8a;
    font-size: 0.84rem;
}

.employee-leave-kpi-page .responsive-table {
    overflow-x: visible;
}

.el-kpi-table th,
.el-kpi-table td {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    padding: 8px 6px !important;
    vertical-align: top;
    line-height: 1.25;
}

.el-kpi-table td {
    font-size: 0.84rem;
}

.el-leave-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.el-leave-type-card {
    background: #dce8f4;
    border: 1px solid #c7d9ea;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    color: #1f2937;
    --el-type-color: #2c6be4;
}

.el-leave-type-card h3 {
    margin: 0 0 12px;
    font-size: 1.12rem;
    font-weight: 800;
}

.el-leave-type-ring {
    --el-type-progress: 0%;
    width: 126px;
    aspect-ratio: 1;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: conic-gradient(var(--el-type-color) var(--el-type-progress), #cfd8e3 0);
    display: grid;
    place-items: center;
}

.el-leave-type-ring-inner {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #dce8f4;
    display: grid;
    place-items: center;
    text-align: center;
}

.el-leave-type-ring-inner strong {
    display: block;
    font-size: 2rem;
    line-height: 1;
    color: #1f2937;
}

.el-leave-type-ring-inner span {
    display: block;
    font-size: 0.74rem;
    color: #64748b;
}

.el-leave-type-meta {
    margin: 0 0 10px;
    color: #546b89;
    font-size: 1rem;
}

.el-leave-type-meta strong {
    color: #1f2937;
}

.el-leave-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--el-type-color);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
}

.el-leave-type-card.leave-type-annual {
    --el-type-color: #2f6bea;
}

.el-leave-type-card.leave-type-sick {
    --el-type-color: #7a44dc;
}

.el-leave-type-card.leave-type-unpaid {
    --el-type-color: #64748b;
}

.el-leave-type-card.leave-type-birthday {
    --el-type-color: #e54a9e;
}

.el-leave-type-card.leave-type-study {
    --el-type-color: #f2a400;
}

.el-leave-type-card.leave-type-bereavement {
    --el-type-color: #5d64df;
}

.el-leave-type-card.leave-type-maternity {
    --el-type-color: #17b890;
}

.el-leave-type-card.leave-type-custom {
    --el-type-color: #13857b;
}

.el-kpi-table th:nth-child(1),
.el-kpi-table td:nth-child(1) {
    width: 22%;
}

.el-kpi-table th:nth-child(2),
.el-kpi-table td:nth-child(2) {
    width: 22%;
}

.el-kpi-table th:nth-child(3),
.el-kpi-table td:nth-child(3),
.el-kpi-table th:nth-child(4),
.el-kpi-table td:nth-child(4) {
    width: 9%;
}

.el-kpi-table th:nth-child(5),
.el-kpi-table td:nth-child(5) {
    width: 16%;
}

.el-kpi-table th:nth-child(6),
.el-kpi-table td:nth-child(6) {
    width: 22%;
}

.el-kpi-annual-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 210px);
    gap: 14px;
    align-items: center;
}

.el-kpi-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.el-kpi-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.92rem;
}

.el-kpi-legend strong {
    margin-left: auto;
    color: #0f172a;
}

.el-kpi-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.el-kpi-annual-donut {
    --el-annual-chart: conic-gradient(#dbe7fb 0% 100%);
    width: 100%;
    max-width: 210px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--el-annual-chart);
    display: grid;
    place-items: center;
}

.el-kpi-annual-donut-inner {
    width: 146px;
    height: 146px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
}

.el-kpi-annual-donut-inner strong,
.el-kpi-annual-donut-inner span {
    display: block;
    color: #111827;
    line-height: 1.1;
}

.el-kpi-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 1023px) {
    .el-kpi-top-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .el-kpi-bottom-wrap {
        grid-template-columns: 1fr;
    }

    .el-kpi-annual-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .el-kpi-legend {
        width: 100%;
    }

    .el-kpi-table {
        table-layout: auto;
    }

    .el-kpi-table th,
    .el-kpi-table td {
        font-size: 0.8rem;
        padding: 7px 5px !important;
    }

    .el-leave-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .el-kpi-top-wrap {
        grid-template-columns: 1fr;
    }

    .el-leave-type-grid {
        grid-template-columns: 1fr;
    }
}

/* Leave management page actions */
.leave-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 16px;
    padding-left: 0;
}

.holiday-page-actions-bar {
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: 16px;
}

.leave-page-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--blue, #1d4ed8);
    background: var(--blue, #1d4ed8);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
}

.leave-page-action:hover {
    background: var(--blue-dark, #1e40af);
    border-color: var(--blue-dark, #1e40af);
    color: #ffffff;
    text-decoration: none;
}

.leave-page-action.active {
    background: var(--blue-dark, #1e3a8a);
    border-color: var(--blue-dark, #1e3a8a);
    color: #ffffff;
}

.leave-request-reference-page .leave-page-actions {
    justify-content: flex-end;
    margin-bottom: 16px;
}

/* Employee holidays planner/calendar */
.holiday-reference-page {
    min-height: 100%;
}

.holiday-page-shell {
    display: grid;
    gap: 18px;
}

.holiday-page-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.holiday-calendar-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.9fr);
    gap: 18px;
}

.holiday-year-switcher-card,
.holiday-calendar-view-card,
.holiday-year-calendar,
.holiday-planner-card {
    background: #ffffff;
    border: 1px solid #dbe5f2;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.holiday-year-switcher-card,
.holiday-calendar-view-card,
.holiday-planner-card {
    padding: 20px;
}

.holiday-year-switcher-form,
.holiday-plan-form {
    display: grid;
    gap: 14px;
}

.holiday-switcher-label {
    display: inline-block;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.holiday-year-checklist {
    display: grid;
    gap: 10px;
}

.holiday-year-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #dbe5f2;
    background: #f8fbff;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.holiday-year-option:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.holiday-year-option.is-selected {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.holiday-year-option input {
    margin: 0;
    accent-color: #2563eb;
}

.holiday-year-option-check {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.holiday-year-option-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.holiday-year-option-text strong {
    font-size: 1.05rem;
    color: #0f172a;
}

.holiday-year-option-text small {
    color: #64748b;
    font-size: 0.84rem;
}

.holiday-calendar-view-head {
    margin-bottom: 14px;
}

.holiday-calendar-view-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.holiday-legend-planned {
    background: #ede9fe;
    border: 1px solid #c4b5fd;
}

.holiday-calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #dbe5f2;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.holiday-calendar-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.holiday-calendar-nav-btn:hover,
.holiday-calendar-nav-btn:focus {
    color: #1e3a8a;
    background: #dbeafe;
    text-decoration: none;
}

.holiday-calendar-toolbar-current {
    display: grid;
    gap: 2px;
    text-align: center;
    color: #0f172a;
}

.holiday-calendar-toolbar-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.holiday-year-calendar {
    padding: 18px;
    overflow-x: hidden;
}

.holiday-month-board {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.holiday-month-board-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.holiday-month-title {
    margin: 0;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    color: #0f172a;
}

.holiday-month-caption {
    margin: 8px 0 0;
    color: #64748b;
}

.holiday-calendar-weekdays,
.holiday-calendar-grid-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.holiday-calendar-weekdays div {
    text-align: center;
    padding: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.holiday-day-card {
    min-height: 132px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.holiday-day-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.holiday-calendar-day-empty {
    opacity: 0;
    pointer-events: none;
    background: transparent;
    border-style: dashed;
}

.holiday-day-number-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.holiday-calendar-date-number {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.holiday-calendar-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.holiday-day-content {
    display: grid;
    gap: 6px;
    align-content: start;
}

.holiday-plan-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holiday-entry {
    display: block;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
}

.holiday-entry-public {
    background: #dcfce7;
    color: #166534;
}

.holiday-entry-company {
    background: #dbeafe;
    color: #1d4ed8;
}

.holiday-entry-approved-leave {
    background: #fee2e2;
    color: #b91c1c;
}

.holiday-entry-note {
    background: #ede9fe;
    color: #6d28d9;
}

.holiday-entry-more {
    background: #f1f5f9;
    color: #475569;
}

.holiday-day-note {
    font-size: 0.72rem;
    line-height: 1.3;
    color: #475569;
}

.holiday-calendar-day-approved-leave {
    border-color: #fca5a5;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.18);
}

.holiday-calendar-marker-leave {
    background: #fee2e2;
    color: #b91c1c;
}

.holiday-calendar-marker-note {
    background: #ede9fe;
    color: #6d28d9;
}

.holiday-calendar-day-planned {
    border-color: #c4b5fd;
    box-shadow: inset 0 0 0 1px #ddd6fe;
    background: #f5f3ff;
}

.holiday-calendar-day.holiday-calendar-day-planned,
.holiday-calendar-day.holiday-calendar-day-public.holiday-calendar-day-planned,
.holiday-calendar-day.holiday-calendar-day-company.holiday-calendar-day-planned {
    background: #ede9fe !important;
    border-color: #b7a4f6 !important;
    color: #5b21b6;
}

.holiday-calendar-day-selected {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.holiday-calendar-day-selected .holiday-calendar-date-number {
    color: #1d4ed8;
}

.holiday-calendar-day-today {
    background: #fff3e0 !important;
    border: 2px solid #ea580c !important;
    box-shadow: 0 2px 14px rgba(234, 88, 12, 0.22), 0 0 0 3px rgba(249, 115, 22, 0.14) !important;
}

.holiday-calendar-day-today .holiday-calendar-date-number {
    color: #7c2d12;
    font-weight: 900;
    background: #fed7aa;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.holiday-planner-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.holiday-planner-layout-single {
    grid-template-columns: 1fr;
}

.holiday-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.holiday-plan-actions,
.holiday-note-modal-actions,
.holiday-delete-confirm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.holiday-plan-reset-btn {
    background: #ffffff;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.holiday-inline-summary {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
}

body.holiday-note-modal-open {
    overflow: hidden;
}

.holiday-note-modal {
    padding: 0;
    border: 0;
    background: transparent;
    width: min(92vw, 560px);
    max-width: 560px;
    margin: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
}

.holiday-note-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.holiday-note-modal[open] {
    display: block;
}

.holiday-note-modal-backdrop {
    position: fixed;
    inset: 0;
}

.holiday-note-modal-dialog {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid #dbe5f2;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    padding: 22px;
}

.holiday-delete-confirm-dialog {
    max-width: 440px;
}

.holiday-note-modal-content {
    display: grid;
    gap: 14px;
}

.holiday-note-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.holiday-note-modal-date {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.holiday-note-modal-title {
    margin: 0;
    color: #0f172a;
    font-size: 1.25rem;
}

.holiday-note-modal-notes {
    margin: 0;
    color: #475569;
    line-height: 1.5;
    white-space: pre-wrap;
}

.holiday-note-modal-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.holiday-note-modal-meta div {
    padding: 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.holiday-note-modal-meta dt {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.holiday-note-modal-meta dd {
    margin: 0;
    color: #0f172a;
    font-weight: 600;
}

.holiday-note-delete-form {
    margin: 0;
}

.holiday-plan-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #93c5fd;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    cursor: pointer;
}

.holiday-plan-inline-btn-delete {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #b91c1c;
}

@media (max-width: 1023px) {
    .holiday-calendar-overview,
    .holiday-plan-grid {
        grid-template-columns: 1fr;
    }

    .holiday-year-switcher-card,
    .holiday-calendar-view-card,
    .holiday-planner-card {
        padding: 16px;
    }

    .holiday-calendar-toolbar {
        align-items: stretch;
    }

    .holiday-calendar-nav-btn {
        width: 100%;
    }

    .holiday-note-modal-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .holiday-page-titlebar {
        flex-direction: column;
    }

    .holiday-year-calendar {
        padding: 12px;
    }

    .holiday-month-board {
        min-width: 0;
    }

    .holiday-month-title {
        font-size: 1.35rem;
    }

    .holiday-calendar-weekdays,
    .holiday-calendar-grid-board {
        gap: 4px;
    }

    .holiday-calendar-weekdays div {
        font-size: 0.62rem;
        padding-bottom: 2px;
    }

    .holiday-day-card {
        min-height: 88px;
        padding: 6px;
        gap: 4px;
    }

    .holiday-calendar-date-number {
        font-size: 0.88rem;
    }

    .holiday-calendar-marker {
        padding: 2px 6px;
        font-size: 0.6rem;
    }

    .holiday-day-content {
        gap: 3px;
        max-height: 46px;
        overflow: hidden;
    }

    .holiday-entry {
        padding: 3px 5px;
        font-size: 0.62rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .holiday-day-note {
        display: none;
    }
}

.leave-request-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 0 14px;
    margin-bottom: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.leave-request-hero-compact {
    justify-content: flex-start;
}

.leave-request-hero-main {
    display: block;
    min-width: 0;
}

.leave-request-title {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: #0f172a;
}

.leave-request-subtitle {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.95rem;
}

.leave-request-form-card,
.leave-request-history-card {
    background: #ffffff;
    border: 1px solid #d9dfe7;
    border-radius: 8px;
    box-shadow: none;
}

.leave-request-layout {
    display: block;
    max-width: 100%;
}

.leave-request-layout-single {
    display: block;
    max-width: none;
    margin: 0;
}

.leave-request-form-card {
    overflow: visible;
    background: transparent;
    border: none;
}

.leave-request-form-head {
    display: none;
}

.leave-request-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    width: 100%;
}

.leave-request-form > .leave-info-card:first-of-type {
    grid-column: 1 / -1;
}

.leave-request-panel-primary {
    grid-column: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.leave-request-panel-secondary {
    grid-column: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.leave-request-declaration-card {
    grid-column: 1 / -1;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.leave-form-section {
    padding: 0;
    border-top: none;
}

.leave-info-card {
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #d9dfe7;
    border-radius: 8px;
    overflow: hidden;
}

.leave-form-section-header {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.leave-form-section-header.compact {
    margin-bottom: 0;
}

.leave-form-section-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f172a;
}

.leave-request-section-body {
    padding: 14px 16px 16px;
}

.leave-request-form .form-label {
    font-size: 0.82rem;
    margin-bottom: 6px;
    color: #334155;
    font-weight: 700;
}

.leave-request-form .form-control,
.leave-request-form .form-select {
    min-height: 42px;
    border-radius: 6px;
    border-color: #d4dbe4;
    box-shadow: none;
    padding: 9px 12px;
    background: #ffffff;
}

.leave-request-form .form-control:focus,
.leave-request-form .form-select:focus {
    border-color: #4f8df6;
    box-shadow: 0 0 0 0.18rem rgba(79, 141, 246, 0.14);
}

.leave-request-form textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.leave-request-form .form-control[readonly] {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
}

.leave-request-upload-wrap {
    margin-top: 4px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.leave-request-declaration-card .leave-form-section-header {
    display: block;
}

.leave-request-declaration-card .leave-request-section-body {
    padding: 0;
}

.leave-request-check {
    padding: 14px 16px 14px 2rem;
    background: #ffffff;
    border: 1px solid #d9dfe7;
    border-radius: 8px;
    color: #475569;
}

.leave-request-check .form-check-input {
    margin-top: 0.25rem;
}

.leave-request-check .form-check-label {
    line-height: 1.5;
}

.leave-request-panel-primary .leave-request-section-body,
.leave-request-panel-secondary .leave-request-section-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.leave-request-panel-primary textarea.form-control,
.leave-request-panel-secondary textarea.form-control {
    min-height: 160px;
}

.leave-request-submit-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    align-self: end;
    width: 100%;
    margin-top: 8px;
    padding: 0;
    border-top: 0;
    background: transparent;
}

.leave-request-submit {
    min-width: 220px;
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.leave-request-history-card {
    margin-top: 10px;
}

.leave-request-history-card .card-body {
    padding: 18px 20px;
}

.leave-request-progress-card {
    margin-bottom: 18px;
    padding: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.leave-request-progress-head h3 {
    margin: 0;
    font-size: 1rem;
    color: #0f172a;
}

.leave-request-progress-head p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 0.92rem;
}

.leave-request-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.leave-progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.leave-progress-item:hover,
.leave-progress-item:focus-visible {
    opacity: 0.92;
    transform: translateY(-2px);
    outline: none;
}

.leave-progress-icon,
.leave-progress-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border: 5px solid currentColor;
    border-radius: 50%;
    background: #ffffff;
    font-size: 1.95rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.05em;
}

.leave-progress-label {
    font-size: 0.98rem;
    font-weight: 700;
    color: #111827;
}

.progress-in-progress {
    color: #1565c0;
}

.progress-on-hold {
    color: #f59e0b;
}

.progress-rejected {
    color: #ef4444;
}

.progress-executed {
    color: #8cb53f;
}

.leave-progress-item.is-active .leave-progress-icon {
    box-shadow: 0 0 0 7px rgba(148, 163, 184, 0.16);
}

.leave-progress-current-note {
    margin-top: 16px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    color: #334155;
}

body.leave-progress-modal-open {
    overflow: hidden;
}

.leave-progress-modal[hidden] {
    display: none !important;
}

dialog.leave-progress-modal {
    position: fixed;
    inset: 0;
    z-index: 1080;
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

dialog.leave-progress-modal[open] {
    opacity: 1;
    pointer-events: auto;
}

dialog.leave-progress-modal::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.leave-progress-modal-backdrop {
    display: none;
}

.leave-progress-modal-dialog {
    position: relative;
    width: min(460px, calc(100vw - 32px));
    margin: 0;
    padding: 22px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
    text-align: center;
    transform: translate3d(0, 26px, 0) scale(0.96);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

dialog.leave-progress-modal[open]:not(.is-closing) .leave-progress-modal-dialog,
dialog.leave-progress-modal.is-opening .leave-progress-modal-dialog {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

dialog.leave-progress-modal.is-closing .leave-progress-modal-dialog {
    transform: translate3d(0, 16px, 0) scale(0.97);
    opacity: 0;
}

.leave-progress-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1.8rem;
    line-height: 1;
}

.leave-progress-modal-icon {
    margin: 0 auto 14px;
}

.leave-progress-modal-dialog h3 {
    margin-bottom: 8px;
    color: #0f172a;
}

.leave-progress-modal-dialog p {
    color: #475569;
}

/* Employee leave & holiday pages - dark mode */
html.theme-dark .leave-management-page,
html.theme-dark .employee-leave-kpi-page,
html.theme-dark .holiday-reference-page,
html.theme-dark .leave-request-reference-page {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 28%),
        linear-gradient(180deg, #020817 0%, #0b1220 100%) !important;
}

html.theme-dark .el-kpi-top-wrap,
html.theme-dark .el-kpi-panel,
html.theme-dark .holiday-calendar-toolbar,
html.theme-dark .holiday-year-switcher-card,
html.theme-dark .holiday-calendar-view-card,
html.theme-dark .holiday-year-calendar,
html.theme-dark .holiday-planner-card,
html.theme-dark .leave-request-progress-card,
html.theme-dark .leave-progress-current-note {
    background: linear-gradient(180deg, #0f1b2d 0%, #0b1626 100%) !important;
    border-color: #28415e !important;
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.42) !important;
}

html.theme-dark .el-kpi-top-card,
html.theme-dark .el-leave-type-card,
html.theme-dark .leave-hub-hero,
html.theme-dark .leave-summary-card,
html.theme-dark .leave-panel,
html.theme-dark .leave-type-card,
html.theme-dark .leave-tip-card,
html.theme-dark .leave-holiday-item,
html.theme-dark .leave-empty-state,
html.theme-dark .holiday-year-option,
html.theme-dark .holiday-note-modal-dialog,
html.theme-dark .holiday-note-modal-meta div,
html.theme-dark .leave-info-card,
html.theme-dark .leave-request-check,
html.theme-dark .leave-request-history-card,
html.theme-dark .leave-progress-modal-dialog {
    background: #111827 !important;
    border-color: #334155 !important;
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.34) !important;
}

html.theme-dark .leave-form-section-header,
html.theme-dark .leave-request-form-head,
html.theme-dark .leave-request-progress-head,
html.theme-dark .leave-request-upload-wrap,
html.theme-dark .leave-progress-icon,
html.theme-dark .leave-progress-modal-icon {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.theme-dark .leave-management-page h1,
html.theme-dark .leave-management-page h2,
html.theme-dark .leave-management-page h3,
html.theme-dark .leave-hub-title,
html.theme-dark .leave-section-title,
html.theme-dark .leave-summary-value,
html.theme-dark .leave-type-card h3,
html.theme-dark .leave-tip-card h3,
html.theme-dark .leave-holiday-item h3,
html.theme-dark .leave-empty-state h3,
html.theme-dark .leave-request-title,
html.theme-dark .leave-form-section-header h3,
html.theme-dark .leave-progress-label,
html.theme-dark .leave-progress-modal-dialog h3,
html.theme-dark .holiday-year-option-text strong,
html.theme-dark .holiday-calendar-toolbar-current,
html.theme-dark .holiday-month-title,
html.theme-dark .holiday-calendar-date-number,
html.theme-dark .holiday-note-modal-title,
html.theme-dark .holiday-note-modal-meta dd,
html.theme-dark .el-kpi-top-card h3,
html.theme-dark .el-kpi-panel h2,
html.theme-dark .el-kpi-circle-inner strong,
html.theme-dark .el-leave-type-ring-inner strong,
html.theme-dark .el-leave-type-meta strong {
    color: #f8fafc !important;
}

html.theme-dark .leave-management-page p,
html.theme-dark .leave-summary-label,
html.theme-dark .leave-summary-meta,
html.theme-dark .leave-section-copy,
html.theme-dark .leave-type-card p,
html.theme-dark .leave-request-subtitle,
html.theme-dark .leave-request-form .form-label,
html.theme-dark .leave-request-check,
html.theme-dark .leave-progress-modal-dialog p,
html.theme-dark .leave-progress-current-note,
html.theme-dark .holiday-switcher-label,
html.theme-dark .holiday-year-option-text small,
html.theme-dark .holiday-calendar-toolbar-label,
html.theme-dark .holiday-month-caption,
html.theme-dark .holiday-day-note,
html.theme-dark .holiday-inline-summary,
html.theme-dark .holiday-note-modal-date,
html.theme-dark .holiday-note-modal-notes,
html.theme-dark .holiday-note-modal-meta dt,
html.theme-dark .el-kpi-top-card p,
html.theme-dark .el-kpi-circle-inner span,
html.theme-dark .el-leave-type-ring-inner span,
html.theme-dark .el-leave-type-meta {
    color: #94a3b8 !important;
}

html.theme-dark .leave-form-section-header h3,
html.theme-dark .leave-request-progress-head h3,
html.theme-dark .leave-request-upload-wrap .form-label {
    color: #f8fafc !important;
}

html.theme-dark .leave-hub-action-secondary {
    background: #0f172a !important;
    color: #e5edf8 !important;
    border-color: var(--blue, #334155) !important;
}

html.theme-dark .leave-hub-action-secondary:hover,
html.theme-dark .leave-hub-action-secondary:focus {
    background: #1e293b !important;
    color: #f8fafc !important;
}

html.theme-dark .el-kpi-circle {
    background: conic-gradient(var(--el-color) var(--el-progress), #334155 0) !important;
}

html.theme-dark .el-kpi-circle-inner,
html.theme-dark .el-kpi-annual-donut-inner,
html.theme-dark .el-leave-type-ring-inner {
    background: #0f172a !important;
}

html.theme-dark .el-leave-type-ring {
    background: conic-gradient(var(--el-type-color) var(--el-type-progress), #334155 0) !important;
}

html.theme-dark .el-kpi-table,
html.theme-dark .holiday-form-input,
html.theme-dark .leave-request-form .form-control,
html.theme-dark .leave-request-form .form-select,
html.theme-dark .leave-request-upload-wrap,
html.theme-dark .leave-request-form .form-control[readonly] {
    background: #0f172a !important;
    color: #e5edf8 !important;
    border-color: #334155 !important;
}

html.theme-dark .el-kpi-table th,
html.theme-dark .holiday-calendar-weekdays div,
html.theme-dark .leave-request-progress-head p {
    color: #cbd5e1 !important;
}

html.theme-dark .holiday-calendar-nav-btn,
html.theme-dark .holiday-plan-inline-btn,
html.theme-dark .holiday-plan-reset-btn {
    background: #1e3a8a !important;
    color: #eff6ff !important;
    border-color: #3b82f6 !important;
}

html.theme-dark .holiday-calendar-nav-btn:hover,
html.theme-dark .holiday-calendar-nav-btn:focus,
html.theme-dark .holiday-plan-inline-btn:hover,
html.theme-dark .holiday-plan-inline-btn:focus,
html.theme-dark .holiday-plan-reset-btn:hover,
html.theme-dark .holiday-plan-reset-btn:focus {
    background: #2563eb !important;
    color: #ffffff !important;
}

html.theme-dark .holiday-plan-inline-btn-delete {
    background: #7f1d1d !important;
    color: #fee2e2 !important;
    border-color: #ef4444 !important;
}

html.theme-dark .holiday-year-option.is-selected,
html.theme-dark .holiday-calendar-day-selected {
    border-color: #60a5fa !important;
    box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.35) !important;
}

html.theme-dark .holiday-calendar-day-today {
    background: #431407 !important;
    border: 2px solid #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.35), 0 4px 18px rgba(249, 115, 22, 0.28) !important;
}

html.theme-dark .holiday-calendar-day-today .holiday-calendar-date-number {
    color: #fed7aa !important;
    background: rgba(234, 88, 12, 0.55) !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.theme-dark .holiday-year-option-check,
html.theme-dark .holiday-calendar-marker {
    background: rgba(30, 58, 138, 0.35) !important;
    color: #dbeafe !important;
}

html.theme-dark .holiday-entry-more {
    background: #1e293b !important;
    color: #cbd5e1 !important;
}

html.theme-dark .holiday-calendar-day-empty {
    background: transparent !important;
    border-color: transparent !important;
}

/* Employee holiday page (eh-*) dark mode */
html.theme-dark .eh-holiday-panel,
html.theme-dark .eh-month-nav-row,
html.theme-dark .eh-note-panel,
html.theme-dark .eh-holiday-list-panel,
html.theme-dark .eh-holiday-shell .holiday-year-calendar {
    background: linear-gradient(180deg, #0f1b2d 0%, #0b1626 100%) !important;
    border-color: #1e3a5a !important;
}

html.theme-dark .eh-holiday-panel h2,
html.theme-dark .eh-note-panel h2,
html.theme-dark .eh-holiday-list-panel h2,
html.theme-dark .eh-holiday-shell .holiday-month-title,
html.theme-dark .eh-month-nav-current strong,
html.theme-dark .eh-year-text strong,
html.theme-dark .eh-holiday-table .eh-holiday-name {
    color: #e2e8f0 !important;
}

html.theme-dark .eh-panel-eyebrow,
html.theme-dark .eh-year-text small,
html.theme-dark .eh-note-panel p,
html.theme-dark .eh-holiday-shell .holiday-month-caption,
html.theme-dark .eh-holiday-shell .holiday-calendar-weekdays div,
html.theme-dark .eh-month-nav-current span,
html.theme-dark .eh-holiday-table tbody td {
    color: #94a3b8 !important;
}

html.theme-dark .eh-year-item {
    background: #0f172a !important;
    border-color: #1e3a5a !important;
    color: #e2e8f0 !important;
}

html.theme-dark .eh-year-item.is-selected {
    border-color: #3b82f6 !important;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22) !important;
}

html.theme-dark .eh-year-dot {
    background: #1e3a8a !important;
    color: #93c5fd !important;
}

html.theme-dark .eh-legend-item {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

html.theme-dark .eh-month-nav-btn {
    background: #1e3a8a !important;
    color: #eff6ff !important;
    border-color: #3b82f6 !important;
}

html.theme-dark .eh-month-nav-btn:hover,
html.theme-dark .eh-month-nav-btn:focus {
    background: #2563eb !important;
    color: #ffffff !important;
}

html.theme-dark .eh-month-jump-select {
    background: #0f172a !important;
    color: #93c5fd !important;
    border-color: #1e3a5a !important;
}

html.theme-dark .eh-note-form .holiday-form-input,
html.theme-dark .eh-note-form textarea.holiday-form-input {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.theme-dark .eh-note-form .form-label {
    color: #94a3b8 !important;
}

html.theme-dark .eh-note-clear-btn {
    background: #0f172a !important;
    color: #93c5fd !important;
    border-color: #334155 !important;
}

html.theme-dark .eh-holiday-table thead th {
    background: #0b1626 !important;
    color: #94a3b8 !important;
}

html.theme-dark .eh-holiday-table tbody td {
    border-color: #1e3a5a !important;
}

html.theme-dark .eh-holiday-month-pill {
    background: #14532d !important;
    color: #86efac !important;
}

html.theme-dark .eh-holiday-shell .holiday-day-card {
    background: #0f172a !important;
    border-color: #1e3a5a !important;
}

html.theme-dark .eh-holiday-shell .holiday-entry-public {
    color: #86efac !important;
}

html.theme-dark .eh-holiday-shell .holiday-entry-company {
    color: #93c5fd !important;
}

html.theme-dark .eh-holiday-shell .holiday-entry-note {
    background: rgba(109, 40, 217, 0.25) !important;
    color: #c4b5fd !important;
}

html.theme-dark .eh-holiday-shell .holiday-plan-chip {
    background: rgba(109, 40, 217, 0.25) !important;
    color: #c4b5fd !important;
}

html.theme-dark .eh-holiday-shell .holiday-calendar-marker {
    background: #14532d !important;
    color: #86efac !important;
}

@media (max-width: 992px) {
    .leave-request-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .leave-request-panel-primary,
    .leave-request-panel-secondary,
    .leave-request-declaration-card,
    .leave-request-submit-row {
        grid-column: 1 / -1;
        width: 100% !important;
    }
}

@media (max-width: 700px) {
    .leave-request-reference-page .leave-page-actions {
        justify-content: flex-start;
    }

    .leave-request-title {
        font-size: 1.8rem;
    }

    .leave-request-section-body {
        padding: 12px;
    }

    .leave-request-progress-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leave-progress-icon,
    .leave-progress-modal-icon {
        width: 74px;
        height: 74px;
        font-size: 1.65rem;
    }

    .leave-request-submit-row {
        justify-content: stretch;
        gap: 16px;
    }

    .leave-request-submit {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .leave-request-progress-grid {
        grid-template-columns: 1fr;
    }
}

.manager-leave-row {
    cursor: pointer;
}

.manager-leave-row:hover {
    background: #f8fbff;
}

.manager-leave-row:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: -2px;
}

dialog.manager-review-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 24px));
    max-width: 760px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    margin: 0;
    border: 0;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

.manager-review-dialog::backdrop {
    background: rgba(15, 23, 42, 0.58);
}

.manager-review-form {
    padding: 20px;
}

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

.manager-review-kicker {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.manager-review-title {
    color: #0f172a;
}

.manager-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.manager-review-item {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

.manager-review-item span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.manager-review-item strong {
    color: #0f172a;
}

.manager-review-block {
    margin-top: 16px;
}

.manager-review-value {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    line-height: 1.55;
    white-space: pre-wrap;
}

.manager-review-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.manager-review-actions-primary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .manager-review-grid {
        grid-template-columns: 1fr;
    }

    .manager-review-actions,
    .manager-review-actions-primary {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Employee leave + holiday screenshot-aligned layout */
.eh-leave-shell {
    background: #c9d9eb;
    border: 1px solid #b8cce3;
    border-radius: 24px;
    padding: 16px;
    display: grid;
    gap: 18px;
}

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

.eh-kpi-card {
    background: #f7fafc;
    border: 1px solid #bfd1e8;
    border-radius: 20px;
    padding: 18px 16px 16px;
    text-align: center;
}

.eh-kpi-card h3 {
    margin: 0;
    font-size: 2rem;
    font-size: clamp(1.45rem, 1.2vw, 2rem);
    font-weight: 700;
    color: #0f172a;
}

.eh-kpi-card p {
    margin: 12px 0 0;
    color: #334f70;
    font-size: 0.94rem;
    line-height: 1.4;
}

.eh-ring {
    --ring-progress: 0%;
    --ring-color: #2450d1;
    width: 146px;
    height: 146px;
    margin: 14px auto 0;
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) var(--ring-progress), #c7ced8 0);
    display: grid;
    place-items: center;
}

.eh-ring-inner {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: #edf3fa;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
}

.eh-ring-inner strong {
    font-size: 2.8rem;
    font-size: clamp(1.65rem, 1.8vw, 2.8rem);
    line-height: 1;
    color: #0f294a;
}

.eh-ring-inner span {
    color: #516c8d;
    font-size: 0.9rem;
    font-weight: 500;
}

.eh-ring-full {
    background: conic-gradient(var(--ring-color) 100%, var(--ring-color) 100%);
}

.eh-leave-types-wrap {
    background: #c2d1e4;
    border: 1px solid #b4c7df;
    border-radius: 22px;
    padding: 14px;
}

.eh-leave-types-wrap h2 {
    margin: 2px 4px 10px;
    font-size: 2.4rem;
    font-size: clamp(1.7rem, 1.8vw, 2.4rem);
    color: #0f294a;
}

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

.eh-leave-type-card {
    background: #d5dfec;
    border: 1px solid #b6c8de;
    border-radius: 22px;
    padding: 16px;
    text-align: center;
}

.eh-leave-type-card h3 {
    margin: 2px 0 10px;
    font-size: 2rem;
    font-size: clamp(1.25rem, 1.4vw, 2rem);
    font-weight: 800;
    color: #102642;
}

.eh-type-ring {
    width: 162px;
    height: 162px;
    max-width: 100%;
}

.eh-type-ring .eh-ring-inner {
    width: 108px;
    height: 108px;
}

.eh-leave-type-meta {
    margin: 12px 0 10px;
    color: #314f70;
    font-size: 2rem;
    font-size: clamp(1.2rem, 1.1vw, 2rem);
    line-height: 1.4;
}

.eh-leave-type-meta strong {
    color: #0c2340;
}

.eh-leave-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 1.55rem;
    font-size: clamp(1rem, 0.95vw, 1.55rem);
    font-weight: 700;
}

.eh-leave-type-badge.is-ratio {
    background: linear-gradient(90deg, #2d73df, #5f59dc);
}

.eh-leave-type-badge.is-count-up {
    background: linear-gradient(90deg, #f3a100, #ecbb00);
}

.eh-leave-type-card:nth-child(3n) .eh-leave-type-badge.is-count-up {
    background: linear-gradient(90deg, #1185a6, #178a79);
}

.eh-holiday-shell {
    display: grid;
    gap: 16px;
}

.eh-holiday-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.eh-holiday-head h1 {
    margin: 0;
    color: #071b3f;
    font-size: clamp(1.25rem, 1.6vw, 1.8rem);
}

.eh-holiday-month-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #d6f0e2;
    color: #067269;
    font-size: clamp(0.95rem, 1.05vw, 1.2rem);
    font-weight: 700;
}

.eh-holiday-overview-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
}

.eh-holiday-panel {
    background: #ffffff;
    border: 1px solid #bfd2e8;
    border-radius: 20px;
    padding: 16px;
}

.eh-holiday-panel h2 {
    margin: 0;
    color: #071b3f;
    font-size: clamp(1.05rem, 1.2vw, 1.4rem);
}

.eh-panel-eyebrow {
    margin: 6px 0 12px;
    color: #4e6886;
    font-size: clamp(0.72rem, 0.85vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.eh-year-list {
    display: grid;
    gap: 14px;
}

.eh-year-item {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #bfd1e8;
    background: #f5f8fc;
    border-radius: 14px;
    min-height: 54px;
    padding: 8px 12px;
    cursor: pointer;
}

.eh-year-item input {
    margin: 0;
    accent-color: #2563eb;
}

.eh-year-item.is-selected {
    border-color: #89b7ff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.eh-year-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #d3e2f5;
    color: #2450d1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.eh-year-text {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}

.eh-year-text strong {
    color: #071b3f;
    font-size: clamp(0.95rem, 1vw, 1.15rem);
}

.eh-year-text small {
    color: #4e6886;
    font-size: clamp(0.72rem, 0.8vw, 0.88rem);
}

.eh-legend-list {
    margin-top: 18px;
    display: grid;
    gap: 16px;
}

.eh-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    min-height: 36px;
    border-radius: 999px;
    padding: 6px 12px;
    background: #f8fafc;
    color: #243f63;
    font-size: clamp(0.78rem, 0.9vw, 0.95rem);
}

.eh-legend-item i {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #99b5d8;
    background: #dbeafe;
}

.eh-legend-item.is-public i {
    background: #d1fae5;
    border-color: #86efac;
}

.eh-legend-item.is-company i {
    background: #dbeafe;
    border-color: #93c5fd;
}

.eh-legend-item.is-note i {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.eh-month-nav-row {
    background: #ffffff;
    border: 1px solid #bfd2e8;
    border-radius: 24px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.eh-month-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 64px;
    border-radius: 18px;
    border: 1px solid #b7cff0;
    background: #d5e1ef;
    color: #2450d1;
    font-size: clamp(1.2rem, 1.3vw, 2rem);
    font-weight: 700;
    text-decoration: none;
}

.eh-month-nav-btn:hover {
    text-decoration: none;
    color: #173a9c;
    background: #c8d8ea;
}

.eh-month-nav-current {
    text-align: center;
}

.eh-month-nav-current span {
    display: block;
    color: #637b97;
    font-weight: 700;
    font-size: clamp(0.85rem, 1vw, 1.4rem);
    letter-spacing: 0.03em;
}

.eh-month-nav-current strong {
    color: #071b3f;
    font-size: clamp(1rem, 1.2vw, 1.35rem);
}

.eh-month-jump-form {
    margin-top: 8px;
}

.eh-month-jump-select {
    min-width: 170px;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid #b7cff0;
    background: #f8fbff;
    color: #173a9c;
    font-size: clamp(0.82rem, 0.9vw, 0.95rem);
    font-weight: 700;
    padding: 6px 10px;
    cursor: pointer;
}

.eh-month-jump-select:focus {
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

.eh-holiday-shell .holiday-year-calendar {
    background: #ffffff;
    border: 1px solid #bfd2e8;
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: none;
}

.eh-holiday-shell .holiday-month-title {
    font-size: clamp(1.05rem, 1.2vw, 1.35rem);
}

.eh-holiday-shell .holiday-month-caption {
    color: #526f90;
    font-size: clamp(0.78rem, 0.85vw, 0.95rem);
}

.eh-holiday-shell .holiday-calendar-weekdays div {
    color: #526f90;
    font-size: clamp(0.72rem, 0.8vw, 0.84rem);
}

.eh-holiday-shell .holiday-calendar-grid-board {
    gap: 8px;
}

.eh-holiday-shell .holiday-day-card {
    min-height: 118px;
    min-width: 0;
    border-radius: 12px;
    border: 1px solid #d8e0ec;
    background: #f8fafc;
    box-shadow: none;
    padding: 8px;
    gap: 5px;
}

.eh-holiday-shell .holiday-calendar-day-empty {
    opacity: 1;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
}

.eh-holiday-shell .holiday-calendar-date-number {
    font-size: clamp(0.86rem, 0.95vw, 1rem);
}

.eh-holiday-shell .holiday-entry {
    display: block;
    max-width: 100%;
    min-width: 0;
    background: transparent;
    font-size: clamp(0.68rem, 0.78vw, 0.8rem);
    padding: 0;
    border-radius: 0;
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eh-holiday-shell .holiday-entry-public {
    color: #056739;
}

.eh-holiday-shell .holiday-entry-company {
    color: #1662ce;
}
.eh-holiday-shell .holiday-entry-note {
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ede9fe;
    color: #6d28d9;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eh-holiday-shell .holiday-calendar-marker {
    background: #eef2f7;
    color: #1f7a42;
    font-size: clamp(0.58rem, 0.65vw, 0.7rem);
    font-weight: 700;
    padding: 2px 6px;
}

.eh-holiday-shell .holiday-day-content {
    min-width: 0;
    gap: 3px;
    max-height: 58px;
    overflow: hidden;
}

.eh-holiday-shell .holiday-plan-chip {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(0.58rem, 0.66vw, 0.72rem);
    padding: 2px 7px;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eh-note-panel,
.eh-holiday-list-panel {
    background: #ffffff;
    border: 1px solid #bfd2e8;
    border-radius: 18px;
    padding: 16px;
}

.eh-note-panel h2,
.eh-holiday-list-panel h2 {
    margin: 0;
    color: #071b3f;
    font-size: clamp(1.05rem, 1.2vw, 1.35rem);
}

.eh-note-panel p {
    margin: 8px 0 0;
    color: #526f90;
    font-size: clamp(0.8rem, 0.88vw, 0.95rem);
}

.eh-note-form {
    margin-top: 12px;
    display: grid;
    gap: 14px;
}

.eh-note-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.eh-note-form .form-label {
    color: #071b3f;
    font-size: clamp(0.78rem, 0.9vw, 0.92rem);
    font-weight: 700;
}

.eh-note-form .holiday-form-input {
    min-height: 42px;
    border-radius: 16px;
    border: 1px solid #bdc9d8;
    background: #f8fafc;
    color: #071b3f;
    font-size: clamp(0.8rem, 0.88vw, 0.95rem);
}

.eh-holiday-shell .holiday-calendar-day.holiday-calendar-day-planned {
    background: #ede9fe !important;
    border-color: #b7a4f6 !important;
}

/* Leave & holiday content scaling */
.holiday-reference-page .p-40,
.employee-leave-kpi-page .p-40 {
    zoom: 0.8;
    width: 100%;
}

/* Keep leave request form full-width in the content area */
.leave-request-reference-page .p-40 {
    zoom: 1;
    width: 100%;
}

@supports not (zoom: 1) {
    .holiday-reference-page .eh-holiday-shell {
        transform: scale(0.8);
        transform-origin: top left;
        width: 125%;
    }
}

.eh-note-form textarea.holiday-form-input {
    min-height: 140px;
}

.eh-note-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eh-note-save-btn,
.eh-note-clear-btn {
    min-height: 40px;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: clamp(0.82rem, 0.9vw, 0.95rem);
    font-weight: 700;
    border: 1px solid transparent;
}

.eh-note-save-btn {
    background: #1f6f47;
    color: #ffffff;
}

.eh-note-clear-btn {
    background: #eef4fa;
    color: #2450d1;
    border-color: #9dc0f0;
}

.eh-holiday-table {
    width: 100%;
    border-collapse: collapse;
}

.eh-holiday-table thead th {
    background: #f2f5f9;
    color: #071b3f;
    font-size: clamp(0.78rem, 0.85vw, 0.92rem);
    font-weight: 700;
    padding: 14px 16px;
}

.eh-holiday-table tbody td {
    border-top: 1px solid #e4ebf3;
    color: #334f70;
    font-size: clamp(0.76rem, 0.84vw, 0.9rem);
    padding: 16px;
    vertical-align: top;
}

.eh-holiday-table .eh-holiday-name {
    color: #071b3f;
    font-weight: 700;
}

/* Employee leave hub (eh-*) dark mode overrides */
html.theme-dark .leave-request-reference-page .eh-leave-shell {
    background: #122640;
    border-color: rgba(148, 163, 184, 0.2);
}

html.theme-dark .leave-request-reference-page .eh-kpi-card,
html.theme-dark .leave-request-reference-page .eh-leave-type-card,
html.theme-dark .leave-request-reference-page .eh-leave-types-wrap {
    background: #1b365e;
    border-color: rgba(148, 163, 184, 0.2);
}

html.theme-dark .leave-request-reference-page .eh-kpi-card h3,
html.theme-dark .leave-request-reference-page .eh-leave-types-wrap h2,
html.theme-dark .leave-request-reference-page .eh-leave-type-card h3,
html.theme-dark .leave-request-reference-page .eh-ring-inner strong,
html.theme-dark .leave-request-reference-page .eh-leave-type-meta strong {
    color: #eaf2ff;
}

html.theme-dark .leave-request-reference-page .eh-kpi-card p,
html.theme-dark .leave-request-reference-page .eh-ring-inner span,
html.theme-dark .leave-request-reference-page .eh-leave-type-meta {
    color: #a8bad6;
}

html.theme-dark .leave-request-reference-page .eh-ring {
    background: conic-gradient(var(--ring-color) var(--ring-progress), #3b4f6c 0);
}

html.theme-dark .leave-request-reference-page .eh-ring-inner {
    background: #142b4b;
}

html.theme-dark .leave-request-reference-page .eh-ring-full {
    background: conic-gradient(var(--ring-color) 100%, var(--ring-color) 100%);
}

html.theme-dark .leave-request-reference-page .eh-kpi-card-link:focus-visible {
    outline-color: #7eb8ff;
}

@media (max-width: 1200px) {
    .eh-kpi-grid,
    .eh-leave-types-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .eh-holiday-overview-grid,
    .eh-note-grid-2 {
        grid-template-columns: 1fr;
    }

    .eh-month-nav-row {
        flex-direction: column;
        align-items: stretch;
    }

    .eh-month-nav-btn {
        width: 100%;
        min-width: 0;
    }

    .eh-month-jump-form {
        margin-top: 10px;
    }

    .eh-month-jump-select {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .eh-kpi-grid,
    .eh-leave-types-grid {
        grid-template-columns: 1fr;
    }

    .eh-leave-shell,
    .eh-leave-types-wrap,
    .eh-holiday-panel,
    .eh-holiday-shell .holiday-year-calendar,
    .eh-note-panel,
    .eh-holiday-list-panel {
        padding: 14px;
    }

    .eh-ring {
        width: 128px;
        height: 128px;
    }

    .eh-ring-inner {
        width: 84px;
        height: 84px;
    }

    .eh-type-ring {
        width: 142px;
        height: 142px;
    }

    .eh-type-ring .eh-ring-inner {
        width: 96px;
        height: 96px;
    }

    .eh-holiday-shell .holiday-day-card {
        min-height: 108px;
        padding: 8px;
    }

    .eh-holiday-shell .holiday-entry,
    .eh-holiday-shell .holiday-entry-note,
    .eh-holiday-shell .holiday-plan-chip {
        font-size: 0.62rem;
        line-height: 1.15;
    }
}

@media (max-width: 1023px) {
    .main-content .table-responsive,
    .main-content .responsive-table,
    .main-content [class$="-table-wrap"],
    .main-content [class*=" table-wrap"] {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .main-content table {
        min-width: 100%;
    }

    .main-content th,
    .main-content td {
        padding: 0.75rem 0.75rem;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .top-nav,
    .main-content .btn-toolbar,
    .main-content .btn-group,
    .main-content .input-group,
    .main-content [class*="-actions"],
    .main-content [class*="-toolbar"],
    .main-content [class*="-filter"] {
        flex-wrap: wrap;
    }

    .top-nav,
    .main-content .card-header,
    .main-content .card-body,
    .main-content [class*="-actions"],
    .main-content [class*="-toolbar"],
    .main-content [class*="-filter"] {
        min-width: 0;
    }

    .main-content .btn,
    .main-content .input-group > .form-control,
    .main-content .input-group > .form-select,
    .main-content [class*="-actions"] > *,
    .main-content [class*="-toolbar"] > *,
    .main-content [class*="-filter"] > * {
        min-width: 0;
    }
}

@media (max-width: 767px) {
    .top-nav {
        padding: 12px 16px;
        gap: 12px;
    }

    .main-content th,
    .main-content td {
        padding: 0.65rem 0.55rem;
        font-size: 0.92rem;
    }

    .main-content .card-body {
        padding: 0.875rem 1rem;
    }
}