:root {
    --hrms-ink: #0b1739;
    --hrms-muted: #64748b;
    --hrms-bg: #f3f6fb;
    --hrms-surface: #ffffff;
    --hrms-border: #dce4ef;
    --hrms-navy: #071936;
    --hrms-navy-soft: #10294f;
    --hrms-primary: #1769aa;
    --hrms-primary-dark: #0f4f82;
    --hrms-accent: #0891b2;
    --hrms-success: #15803d;
    --hrms-warning: #b45309;
    --hrms-danger: #b42318;
    --hrms-radius: 18px;
    --hrms-shadow: 0 14px 36px rgba(15, 35, 65, .08);
}

html { scroll-behavior: smooth; }

body.hrms-auth-page,
body.hrms-app-page,
body.hrms-simple-page {
    margin: 0;
    color: var(--hrms-ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.hrms-auth-page {
    background:
        radial-gradient(circle at 4% 0%, rgba(8, 126, 164, .13), transparent 27%),
        radial-gradient(circle at 95% 5%, rgba(20, 184, 166, .12), transparent 28%),
        #f5f8fc;
    color: var(--hrms-ink);
}

.hrms-auth-page .page-shell::before {
    background-image: linear-gradient(rgba(8, 126, 164, .035) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(8, 126, 164, .035) 1px, transparent 1px);
    opacity: .65;
}

.hrms-auth-page .container { width: min(1220px, calc(100% - 40px)); }
.hrms-auth-page .top-nav { padding: 22px 0; }
.hrms-auth-page .brand-logo {
    background: linear-gradient(135deg, var(--hrms-primary), var(--hrms-accent));
    color: #fff;
    box-shadow: 0 12px 30px rgba(8, 126, 164, .24);
}
.hrms-auth-page .brand-name strong { color: var(--hrms-ink); }
.hrms-auth-page .brand-name span,
.hrms-auth-page .nav-link,
.hrms-auth-page .hero-subtitle,
.hrms-auth-page .secure-note,
.hrms-auth-page .login-divider,
.hrms-auth-page .proof-card span,
.hrms-auth-page .preview-card p,
.hrms-auth-page .feature-card p,
.hrms-auth-page .workflow-card p,
.hrms-auth-page .footer { color: var(--hrms-muted); }
.hrms-auth-page .nav-link:hover { color: var(--hrms-primary-dark); background: #e8f4f7; }
.hrms-auth-page .hero-grid { grid-template-columns: 1.06fr .94fr; gap: 56px; padding-top: 48px; }
.hrms-auth-page .hero-title {
    color: var(--hrms-ink);
    font-size: clamp(2.7rem, 5vw, 4.7rem);
    line-height: 1.01;
    letter-spacing: -.06em;
}
.hrms-auth-page .gradient-text { color: var(--hrms-primary); text-shadow: none; }
.hrms-auth-page .eyebrow,
.hrms-auth-page .login-badge {
    color: #075f7c;
    background: #e6f4f8;
    border-color: #b9dce7;
}
.hrms-auth-page .pulse-dot { background: var(--hrms-accent); box-shadow: 0 0 0 7px rgba(20, 184, 166, .13); }
.hrms-auth-page .btn,
.hrms-auth-page .btn-primary {
    background: linear-gradient(135deg, var(--hrms-primary), #0b6f94);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 26px rgba(8, 126, 164, .22);
}
.hrms-auth-page .btn-outline,
.hrms-auth-page .btn-ghost {
    background: #fff;
    color: var(--hrms-ink);
    border: 1px solid var(--hrms-border);
    border-radius: 12px;
}
.hrms-auth-page .btn-outline:hover,
.hrms-auth-page .btn-ghost:hover { color: var(--hrms-primary-dark); background: #eff8fa; }
.hrms-auth-page .proof-card,
.hrms-auth-page .feature-card,
.hrms-auth-page .workflow-card,
.hrms-auth-page .preview-card,
.hrms-auth-page .usp-panel {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--hrms-border);
    color: var(--hrms-ink);
    box-shadow: var(--hrms-shadow);
    backdrop-filter: blur(18px);
}
.hrms-auth-page .login-card {
    background: rgba(255, 255, 255, .96);
    border: 1px solid #d6e1ee;
    color: var(--hrms-ink);
    box-shadow: 0 25px 65px rgba(15, 35, 65, .15);
}
.hrms-auth-page .login-card::before { background: rgba(8, 126, 164, .12); }
.hrms-auth-page .login-card h2,
.hrms-auth-page .form-group label,
.hrms-auth-page .modal-content h2 { color: var(--hrms-ink); }
.hrms-auth-page .login-card p,
.hrms-auth-page .modal-subtitle { color: var(--hrms-muted); }
.hrms-auth-page .input-control,
.hrms-auth-page .form-group input,
.hrms-auth-page .modal-form input,
.hrms-auth-page .modal-form select,
.hrms-auth-page .modal-form textarea {
    background: #fff;
    border: 1px solid #cdd8e6;
    color: var(--hrms-ink);
    border-radius: 12px;
}
.hrms-auth-page .input-control:focus,
.hrms-auth-page .form-group input:focus,
.hrms-auth-page .modal-form input:focus,
.hrms-auth-page .modal-form select:focus,
.hrms-auth-page .modal-form textarea:focus {
    border-color: var(--hrms-primary);
    box-shadow: 0 0 0 4px rgba(8, 126, 164, .12);
}
.hrms-auth-page .modal { background: rgba(7, 25, 54, .58); backdrop-filter: blur(6px); }
.hrms-auth-page .modal-content {
    background: #fff;
    color: var(--hrms-ink);
    border: 1px solid var(--hrms-border);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(7, 25, 54, .24);
}
.hrms-auth-page .modal-kicker { color: var(--hrms-primary-dark); }
.hrms-auth-page .close { color: #475569; }
.hrms-auth-page .section-heading h2,
.hrms-auth-page .preview-title,
.hrms-auth-page .feature-card h3,
.hrms-auth-page .workflow-card h3,
.hrms-auth-page .final-cta h2 { color: var(--hrms-ink); }
.hrms-auth-page .final-cta {
    background: linear-gradient(135deg, #071936, #0b365d);
    border: 1px solid rgba(255,255,255,.12);
}
.hrms-auth-page .final-cta h2,
.hrms-auth-page .final-cta p { color: #fff; }

body.hrms-app-page { background: var(--hrms-bg); }
.hrms-app-page .app-layout { background: var(--hrms-bg); }
.hrms-app-page .sidebar {
    width: 276px;
    padding: 22px 16px;
    background: linear-gradient(180deg, #071936 0%, #0a2447 100%);
    border: 0;
    box-shadow: 8px 0 30px rgba(7, 25, 54, .13);
    overflow-y: auto;
    scrollbar-width: thin;
}
.hrms-app-page .brand { padding: 6px 8px 22px; }
.hrms-app-page .brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 23px;
    background: linear-gradient(135deg, var(--hrms-primary), var(--hrms-accent));
    color: #fff;
}
.hrms-app-page .brand h2 { color: #fff; font-size: 23px; letter-spacing: -.03em; }
.hrms-app-page .brand p { color: #a9bad2; font-size: 12px; }
.hrms-app-page .sidebar-link {
    color: #cfdaea;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 13px 14px;
    margin: 3px 0;
    font-size: 14px;
}
.hrms-app-page .sidebar-link:hover,
.hrms-app-page .sidebar-link.active {
    color: #fff;
    background: rgba(38, 153, 196, .2);
    border-color: rgba(113, 204, 229, .2);
}
.hrms-app-page .sidebar-user {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
    color: #fff;
}
.hrms-app-page .sidebar-user-text,
.hrms-app-page .sidebar-user-text span { color: #fff; }
.hrms-app-page .sidebar-user-text small { color: #9cd9e8; }
.hrms-app-page .sidebar-signout { color: #ffd6d2; background: rgba(255,255,255,.06); }
.hrms-app-page .sidebar-signout:hover { color: #fff; background: rgba(180,35,24,.3); }
.hrms-app-page .avatar { background: #dff5f7; color: var(--hrms-primary-dark); overflow: hidden; }
.hrms-app-page .main-content {
    margin-left: 276px;
    width: calc(100% - 276px);
    padding: 30px clamp(18px, 3vw, 44px) 54px;
}
.hrms-app-page .content-section { width: min(1500px, 100%); margin: 0 auto; }
.hrms-app-page .section-panel,
.hrms-app-page .dashboard-section,
.hrms-app-page .section-top,
.hrms-app-page .billing-detail-card,
.hrms-app-page .report-filter-card {
    background: var(--hrms-surface);
    border: 1px solid var(--hrms-border);
    border-radius: var(--hrms-radius);
    box-shadow: var(--hrms-shadow);
}
.hrms-app-page .section-panel,
.hrms-app-page .dashboard-section { padding: clamp(20px, 2.4vw, 32px); }
.hrms-app-page .section-top { padding: 22px 24px; }
.hrms-app-page .page-header { border-bottom: 1px solid var(--hrms-border); padding-bottom: 22px; }
.hrms-app-page .page-header h1,
.hrms-app-page .section-top h2,
.hrms-app-page .billing-header h2,
.hrms-app-page h1,
.hrms-app-page h2,
.hrms-app-page h3 { color: var(--hrms-ink); }
.hrms-app-page .page-header p,
.hrms-app-page .section-top p,
.hrms-app-page .billing-header p { color: var(--hrms-muted); }
.hrms-app-page .avatar-lg { background: #dff5f7; color: var(--hrms-primary-dark); }
.hrms-app-page .top-signout,
.hrms-app-page .btn-modern,
.hrms-app-page .btn-green,
.hrms-app-page .btn-blue,
.hrms-app-page .btn-dark,
.hrms-app-page input[type="submit"]:not(.sidebar-signout):not(.card-overlay-btn) {
    background: var(--hrms-primary);
    border: 1px solid var(--hrms-primary);
    color: #fff;
    border-radius: 10px;
    min-height: 42px;
    padding: 10px 18px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(8, 126, 164, .16);
    cursor: pointer;
}
.hrms-app-page input[type="submit"]:not(.sidebar-signout):not(.card-overlay-btn):hover,
.hrms-app-page .btn-modern:hover { background: var(--hrms-primary-dark); transform: translateY(-1px); }
.hrms-app-page .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hrms-app-page .kpi-card,
.hrms-app-page .quick-card,
.hrms-app-page .billing-card,
.hrms-app-page .billing-detail-item,
.hrms-app-page .wide-action {
    background: #fff;
    border: 1px solid var(--hrms-border);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(15, 35, 65, .065);
}
.hrms-app-page .kpi-card { border-top: 4px solid var(--hrms-primary); }
.hrms-app-page .kpi-card.orange { border-top-color: #f59e0b; }
.hrms-app-page .kpi-card.blue { border-top-color: #2563eb; }
.hrms-app-page .kpi-card strong { color: var(--hrms-primary); }
.hrms-app-page .kpi-icon { background: #e6f4f8; }
.hrms-app-page .section-heading { border-left-color: var(--hrms-primary); color: var(--hrms-ink); }
.hrms-app-page .quick-action-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
.hrms-app-page .quick-card { min-height: 160px; padding: 22px; text-align: left; align-items: flex-start; }
.hrms-app-page .quick-card:hover,
.hrms-app-page .wide-action:hover { border-color: #a9cfdb; transform: translateY(-3px); }
.hrms-app-page .quick-card b { color: var(--hrms-primary); }
.hrms-app-page .wide-action { max-width: none; }
.hrms-app-page .wide-action span { background: #e6f4f8; }
.hrms-app-page input[type="text"],
.hrms-app-page input[type="password"],
.hrms-app-page input[type="email"],
.hrms-app-page input[type="number"],
.hrms-app-page input[type="date"],
.hrms-app-page input[type="time"],
.hrms-app-page textarea,
.hrms-app-page select,
.hrms-app-page .input-box,
.hrms-app-page .roster-input {
    min-height: 42px;
    max-width: 100%;
    padding: 10px 12px;
    color: var(--hrms-ink);
    background: #fff;
    border: 1px solid #cbd7e5;
    border-radius: 10px;
    font: inherit;
}
.hrms-app-page textarea { min-height: 96px; resize: vertical; }
.hrms-app-page input:focus,
.hrms-app-page textarea:focus,
.hrms-app-page select:focus {
    outline: none;
    border-color: var(--hrms-primary);
    box-shadow: 0 0 0 4px rgba(8, 126, 164, .1);
}
.hrms-app-page input[type="checkbox"],
.hrms-app-page input[type="radio"] { accent-color: var(--hrms-primary); }
.hrms-app-page table,
.hrms-app-page .billing-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.hrms-app-page th,
.hrms-app-page .billing-table th {
    background: #edf4f8;
    color: #28445f;
    border-bottom: 1px solid #cfdae6;
    padding: 12px 14px;
    font-size: 12px;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hrms-app-page td,
.hrms-app-page .billing-table td {
    background: #fff;
    color: #334155;
    border-bottom: 1px solid #e5ebf2;
    padding: 12px 14px;
    vertical-align: top;
}
.hrms-app-page tr:hover td { background: #f5fafb; }
.hrms-app-page .billing-action-panel {
    background: linear-gradient(135deg, #eaf7fa, #edf4ff);
    border-color: #c9dfea;
}
.hrms-app-page .plan-card,
.hrms-app-page .status-card,
.hrms-app-page .trial-card,
.hrms-app-page .amount-card { background: #fff; border-left-color: var(--hrms-primary); }
.hrms-app-page .mobile-menu-btn { background: var(--hrms-primary); }
.hrms-app-page .message-label,
.hrms-app-page .msg-success { color: var(--hrms-success); }
.hrms-app-page .msg-error,
.hrms-app-page .error-message { color: var(--hrms-danger); }
.hrms-app-page .modal-content,
.hrms-app-page .modal-content1,
.hrms-app-page .modal-content2,
.hrms-app-page .roster-modal { color: var(--hrms-ink); }

body.hrms-simple-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 0% 0%, rgba(8,126,164,.12), transparent 28%),
        var(--hrms-bg);
}
.hrms-simple-page .topbar { background: linear-gradient(135deg, var(--hrms-navy), var(--hrms-navy-soft)); }
.hrms-simple-page .card,
.hrms-simple-page .change-card {
    background: #fff;
    border: 1px solid var(--hrms-border);
    border-radius: 20px;
    box-shadow: var(--hrms-shadow);
}
.hrms-simple-page .effective { background: #eaf7fa; border-color: #c7e3ea; color: var(--hrms-primary-dark); }
.hrms-simple-page h1,
.hrms-simple-page .change-card h2 { color: var(--hrms-ink); }
.hrms-simple-page h2 { color: var(--hrms-primary-dark); }
.hrms-simple-page .input-box {
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid #cbd7e5;
    border-radius: 10px;
}
.hrms-simple-page .btn-main { background: var(--hrms-primary); color: #fff; border-radius: 10px; }
.hrms-simple-page .back-link { color: var(--hrms-primary-dark); }
.hrms-simple-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    box-sizing: border-box;
}
.hrms-simple-card {
    width: min(620px, 100%);
    padding: clamp(28px, 6vw, 52px);
    background: #fff;
    border: 1px solid var(--hrms-border);
    border-radius: 24px;
    box-shadow: var(--hrms-shadow);
}
.hrms-simple-card h1 {
    margin: 12px 0 14px;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.04em;
}
.hrms-simple-card p { color: var(--hrms-muted); line-height: 1.7; }
.hrms-eyebrow {
    display: inline-flex;
    padding: 7px 10px;
    color: var(--hrms-primary-dark);
    background: #e6f4f8;
    border: 1px solid #b9dce7;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
}
.hrms-action-row { display: flex; gap: 12px; margin-top: 24px; }
.hrms-action-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    color: #fff;
    background: var(--hrms-primary);
    border-radius: 11px;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .hrms-auth-page .hero-grid { grid-template-columns: 1fr; }
    .hrms-auth-page .login-card { max-width: 640px; }
    .hrms-app-page .kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .hrms-app-page .sidebar { transform: translateX(-105%); }
    .hrms-app-page .sidebar.sidebar-open { transform: translateX(0); }
    .hrms-app-page .main-content { margin-left: 0; width: 100%; padding: 18px; }
    .hrms-app-page .mobile-menu-btn { display: inline-flex; }
    .hrms-app-page .quick-action-grid,
    .hrms-app-page .quick-action-grid.two-col,
    .hrms-app-page .ess-card-container { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .hrms-auth-page .container { width: min(100% - 24px, 1220px); }
    .hrms-auth-page .top-nav { align-items: flex-start; }
    .hrms-auth-page .nav-link { display: none; }
    .hrms-auth-page .hero-grid { padding-top: 20px; }
    .hrms-auth-page .proof-row { grid-template-columns: 1fr; }
    .hrms-auth-page .hero-title { font-size: 2.55rem; }
    .hrms-app-page .kpi-grid { grid-template-columns: 1fr; }
    .hrms-app-page .section-panel,
    .hrms-app-page .dashboard-section { padding: 18px; }
    .hrms-simple-page .card { padding: 22px; }
}

/* Unified product styling: these rules intentionally override the legacy
   green presentation layer that remains in StyleSheet1.css. Green is retained
   only for semantic success states. */
.hrms-app-page .dash-hero {
    min-height: 118px;
    padding: 28px 32px;
    background: radial-gradient(circle at 92% 15%, rgba(56,189,248,.22), transparent 28%),
                linear-gradient(135deg, #101828 0%, #164e73 58%, #1769aa 100%);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 40px rgba(16,24,40,.2);
}
.hrms-app-page .dash-hero h1 { color: #fff; letter-spacing: -.035em; }
.hrms-app-page .dash-hero p { color: #d7eaf5; opacity: 1; }
.hrms-app-page .dash-hero-actions { align-self: center; }
.hrms-app-page .dash-hero-badge {
    color: #eefaff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.3);
}
.hrms-app-page .notif-bell:hover { border-color: #8dc4df; background: #f0f8fc; }

.hrms-app-page .dash-tag {
    color: var(--hrms-primary-dark);
    background: #e7f1f8;
    border: 1px solid #c6ddeb;
}
.hrms-app-page .dash-health-value { color: var(--hrms-primary-dark); }
.hrms-app-page .dash-health-fill { background: linear-gradient(90deg, var(--hrms-primary), var(--hrms-accent)); }
.hrms-app-page .dash-action-item b,
.hrms-app-page .notif-read-link { background: var(--hrms-primary); }
.hrms-app-page .dash-table td:last-child { color: var(--hrms-primary-dark); }
.hrms-app-page .dash-insight-item.highlight {
    background: linear-gradient(135deg, #edf6fb, #f8fbff);
    border-color: #c4ddeb;
}
.hrms-app-page .dash-insight-item.highlight b { color: var(--hrms-primary-dark); }
.hrms-app-page .dash-action-item.dash-clickable:hover,
.hrms-app-page .dash-clickable:hover { border-color: #9bc6dc; }

.hrms-app-page .roster-grid th,
.hrms-app-page .policy-grid th,
.hrms-app-page .leave-request-grid th,
.hrms-app-page .reim-grid th,
.hrms-app-page .dash-table th,
.hrms-app-page .billing-table th,
.hrms-app-page .roster-grid th:first-child,
.hrms-app-page .roster-grid th:nth-child(2),
.hrms-app-page .roster-grid-header-cell {
    background: #e8f1f8 !important;
    color: #244764 !important;
    border-color: #ccdae7 !important;
}
.hrms-app-page .roster-grid tr:nth-child(even) td,
.hrms-app-page .leave-request-grid tr:nth-child(even) td,
.hrms-app-page .reim-grid tr:nth-child(even) td,
.hrms-app-page .dash-table tr:nth-child(even) td { background: #f7fafc !important; }

.hrms-app-page .roster-main-btn,
.hrms-app-page .roster-apply-btn,
.hrms-app-page .emp-search-btn,
.hrms-app-page .approve-leave-btn,
.hrms-app-page .reim-submit-btn,
.hrms-app-page .reim-approve-btn,
.hrms-app-page .reim-filter-btn,
.hrms-app-page .notif-action-btn,
.hrms-app-page .roster-unlock-btn,
.hrms-app-page .btn-green,
.hrms-app-page .punch-in-btn {
    background: var(--hrms-primary) !important;
    border-color: var(--hrms-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(23,105,170,.18) !important;
}
.hrms-app-page .roster-main-btn:hover,
.hrms-app-page .roster-apply-btn:hover,
.hrms-app-page .emp-search-btn:hover,
.hrms-app-page .approve-leave-btn:hover,
.hrms-app-page .reim-submit-btn:hover,
.hrms-app-page .reim-approve-btn:hover,
.hrms-app-page .reim-filter-btn:hover,
.hrms-app-page .notif-action-btn:hover,
.hrms-app-page .roster-unlock-btn:hover,
.hrms-app-page .btn-green:hover,
.hrms-app-page .punch-in-btn:hover {
    background: var(--hrms-primary-dark) !important;
    border-color: var(--hrms-primary-dark) !important;
}
.hrms-app-page .emp-clear-btn,
.hrms-app-page .edit-profile-pic-link,
.hrms-app-page .change-photo-btn {
    color: var(--hrms-primary) !important;
    border-color: var(--hrms-primary) !important;
}
.hrms-app-page .emp-clear-btn:hover,
.hrms-app-page .edit-profile-pic-link:hover,
.hrms-app-page .change-photo-btn:hover {
    color: var(--hrms-primary-dark) !important;
    background: #e7f1f8 !important;
}
.hrms-app-page .change-photo-btn { background: #f2f8fc !important; }
.hrms-app-page .profile-edit-badge {
    background: var(--hrms-primary) !important;
    color: #fff !important;
}
.hrms-app-page .action-card:hover { border-color: #9bc6dc; background: #f4f9fc; }
.hrms-app-page .ess-card { border-left-color: var(--hrms-primary); }
.hrms-app-page .ess-card h3,
.hrms-app-page .emp-form-card h3,
.hrms-app-page .emp-search-tip strong { color: var(--hrms-primary-dark); }
.hrms-app-page .reim-card .form-control:focus,
.hrms-app-page .reim-control:focus,
.hrms-app-page .roster-lock-control:focus {
    border-color: var(--hrms-primary);
    box-shadow: 0 0 0 3px rgba(23,105,170,.13);
}
.hrms-app-page .notif-item.unread {
    background: linear-gradient(135deg, #edf6fb, #fff);
    border-left-color: var(--hrms-primary);
}
.hrms-app-page .plan-card {
    background: linear-gradient(135deg, #edf6fb, #fff);
    border-left-color: var(--hrms-primary);
}
.hrms-app-page input[type="checkbox"],
.hrms-app-page input[type="radio"] { accent-color: var(--hrms-primary) !important; }

.hrms-auth-page .usp-item,
.hrms-auth-page .usp-item span { color: #334155; }
.hrms-auth-page .usp-panel h2 { color: var(--hrms-ink); }
.hrms-auth-page .check {
    color: var(--hrms-primary-dark);
    background: #dceef8;
}
.hrms-auth-page .feature-card:hover { border-color: #a9cfe3; }
.hrms-auth-page .terms-visual-box.checked {
    background: var(--hrms-primary) !important;
    border-color: var(--hrms-primary) !important;
}

/* Compact product density: equivalent to the clearer 90% browser view while
   preserving normal browser zoom and accessible responsive breakpoints. */
body.hrms-auth-page,
body.hrms-app-page,
body.hrms-simple-page { font-size: 14px; }

@media (min-width: 901px) {
    .hrms-app-page .sidebar { width: 250px; padding: 20px 14px; }
    .hrms-app-page .main-content {
        margin-left: 250px;
        width: calc(100% - 250px);
        padding: 27px clamp(16px, 2.7vw, 40px) 48px;
    }
}

.hrms-app-page .brand { padding: 5px 7px 19px; }
.hrms-app-page .brand-icon { width: 40px; height: 40px; font-size: 21px; }
.hrms-app-page .brand h2 { font-size: 21px; }
.hrms-app-page .sidebar-link { padding: 11px 13px; font-size: 13px; }
.hrms-app-page .section-panel,
.hrms-app-page .dashboard-section { padding: clamp(18px, 2.15vw, 29px); }
.hrms-app-page .section-top { padding: 20px 22px; }
.hrms-app-page .dash-hero { min-height: 106px; padding: 25px 29px; margin-bottom: 21px; }
.hrms-app-page .dash-hero h1 { font-size: 27px; }
.hrms-app-page .dash-hero p { font-size: 14px; }
.hrms-app-page .dash-kpi-grid { gap: 16px; margin-bottom: 21px; }
.hrms-app-page .dash-kpi-card { padding: 16px; gap: 12px; border-radius: 16px; }
.hrms-app-page .dash-kpi-icon { width: 40px; height: 40px; font-size: 20px; }
.hrms-app-page .dash-kpi-card h2 { font-size: 25px; }
.hrms-app-page .dash-panel { padding: 20px; border-radius: 18px; }
.hrms-app-page .dash-health-value { font-size: 47px; }
.hrms-app-page .kpi-card { padding: 20px; gap: 16px; }
.hrms-app-page .kpi-icon { width: 59px; height: 59px; font-size: 29px; }
.hrms-app-page .kpi-card strong { font-size: 27px; }
.hrms-app-page .quick-card { min-height: 144px; padding: 20px; }
.hrms-app-page input[type="text"],
.hrms-app-page input[type="password"],
.hrms-app-page input[type="email"],
.hrms-app-page input[type="number"],
.hrms-app-page input[type="date"],
.hrms-app-page input[type="time"],
.hrms-app-page select,
.hrms-app-page .input-box,
.hrms-app-page .roster-input { min-height: 38px; padding: 9px 11px; }
.hrms-app-page .top-signout,
.hrms-app-page .btn-modern,
.hrms-app-page .btn-green,
.hrms-app-page .btn-blue,
.hrms-app-page .btn-dark,
.hrms-app-page input[type="submit"]:not(.sidebar-signout):not(.card-overlay-btn) {
    min-height: 38px;
    padding: 9px 16px;
}
.hrms-app-page th,
.hrms-app-page .billing-table th,
.hrms-app-page td,
.hrms-app-page .billing-table td { padding: 10px 12px; }

.hrms-auth-page .container { width: min(1320px, calc(100% - 36px)); }
.hrms-auth-page .top-nav { padding: 20px 0; }
.hrms-auth-page .hero-grid { gap: 50px; padding-top: 42px; }
.hrms-auth-page .hero-title { font-size: clamp(2.45rem, 4.5vw, 4.25rem); }
.hrms-auth-page .login-card { padding: 32px !important; }
.hrms-auth-page .btn,
.hrms-auth-page .btn-primary,
.hrms-auth-page .btn-outline,
.hrms-auth-page .btn-ghost { min-height: 40px; padding: 10px 16px; }

/* Subscription experience */
.hrms-app-page #billingSubscriptionSection { position: relative; padding-bottom: 92px; }
.subscription-eyebrow {
    display: inline-block;
    color: #1769aa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.subscription-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 18px;
    padding: 28px 30px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 91% 10%, rgba(56,189,248,.24), transparent 29%),
                linear-gradient(135deg, #071936 0%, #0f4f82 60%, #1769aa 100%);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(7,25,54,.19);
}
.subscription-page-hero .subscription-eyebrow { color: #9edcf1; }
.subscription-page-hero h2 {
    margin: 6px 0 8px;
    max-width: 760px;
    color: #fff !important;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.subscription-page-hero p { max-width: 850px; margin: 0; color: #d8eaf5; line-height: 1.6; }
.subscription-trial-pill {
    min-width: 190px;
    padding: 16px 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 14px;
    text-align: center;
    backdrop-filter: blur(8px);
}
.subscription-trial-pill strong,
.subscription-trial-pill span { display: block; color: #fff; }
.subscription-trial-pill strong { font-size: 20px; }
.subscription-trial-pill span { margin-top: 4px; color: #d8eaf5; font-size: 11px; }

.hrms-app-page .billing-summary-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.hrms-app-page .billing-card { padding: 16px 18px; border-radius: 15px; }
.hrms-app-page .billing-card strong { font-size: 21px; margin-bottom: 5px; }
.hrms-app-page .billing-card small { font-size: 11px; }
.hrms-app-page .billing-label { margin-bottom: 7px; font-size: 10px; }

.subscription-currency-context {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 16px;
    padding: 11px 14px;
    color: #244764;
    background: #edf6fb;
    border: 1px solid #c9dfeb;
    border-radius: 11px;
    font-size: 12px;
}
.subscription-currency-mark {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #fff;
    background: #1769aa;
    border-radius: 50%;
    font-weight: 900;
}
.subscription-currency-toggle {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    min-height: 40px;
    padding: 10px 16px;
    color: #fff;
    background: #0f4f82;
    border: 1px solid #0f4f82;
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(15,79,130,.3);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
}
.subscription-currency-toggle:hover,
.subscription-currency-toggle:focus { background: #0b3e66; transform: translateY(-2px); }

.subscription-value-banner,
.subscription-trial-banner {
    display: grid;
    align-items: center;
    gap: 18px;
    margin: 16px 0;
    padding: 20px 22px;
    border-radius: 16px;
}
.subscription-value-banner {
    grid-template-columns: auto 1fr auto;
    background: linear-gradient(135deg, #edf6fb, #f8fbff);
    border: 1px solid #c9dfeb;
}
.subscription-value-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #fff;
    background: #1769aa;
    border-radius: 14px;
    font-size: 21px;
    font-weight: 900;
}
.subscription-value-banner h3,
.subscription-trial-banner h3,
.subscription-section-heading h3 { margin: 4px 0 6px; font-size: 21px; }
.subscription-value-banner p,
.subscription-trial-banner p,
.subscription-section-heading p { margin: 0; color: #64748b; line-height: 1.55; }
.subscription-value-stat { max-width: 150px; text-align: right; }
.subscription-value-stat strong,
.subscription-value-stat span { display: block; }
.subscription-value-stat strong { color: #0f4f82; font-size: 27px; }
.subscription-value-stat span { color: #64748b; font-size: 10px; line-height: 1.35; }

.subscription-trial-banner {
    grid-template-columns: 1fr auto;
    background: linear-gradient(135deg, #f0fdf4, #fff);
    border: 1px solid #bbf7d0;
}
.subscription-trial-facts { display: flex; gap: 10px; }
.subscription-trial-facts span {
    min-width: 92px;
    padding: 10px 12px;
    color: #475569;
    background: #fff;
    border: 1px solid #dbe7df;
    border-radius: 11px;
    text-align: center;
    font-size: 10px;
}
.subscription-trial-facts strong { display: block; color: #166534; font-size: 17px; }

.subscription-pricing-section,
.subscription-included-section { margin: 22px 0; }
.subscription-section-heading { display: flex; justify-content: space-between; margin-bottom: 14px; }
.subscription-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.subscription-pricing-card {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 15px;
    box-shadow: 0 7px 22px rgba(15,35,65,.06);
}
.subscription-pricing-card.featured {
    border: 2px solid #1769aa;
    box-shadow: 0 15px 32px rgba(23,105,170,.14);
}
.subscription-tier-ribbon {
    position: absolute;
    top: 14px;
    right: -34px;
    width: 132px;
    padding: 6px;
    color: #fff;
    background: #1769aa;
    transform: rotate(38deg);
    text-align: center;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 900;
}
.subscription-pricing-kicker { color: #1769aa; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.subscription-pricing-card h3 { margin: 6px 0 12px; padding-right: 25px; font-size: 20px; }
.subscription-price-line { min-height: 58px; }
.subscription-price-line strong { display: block; color: #0b1739; font-size: 28px; line-height: 1.08; letter-spacing: -.03em; }
.subscription-price-line span { color: #64748b; font-size: 10px; }
.subscription-tier-audience { min-height: 66px; margin: 10px 0; color: #64748b; font-size: 11px; line-height: 1.5; }
.subscription-saving-strip { margin-bottom: 8px; padding: 7px 8px; color: #0f4f82; background: #e7f1f8; border-radius: 8px; text-align: center; font-size: 9px; font-weight: 800; }
.subscription-pricing-card ul { flex: 1; margin: 4px 0 16px; padding: 0; list-style: none; }
.subscription-pricing-card li { position: relative; padding: 6px 0 6px 18px; border-bottom: 1px solid #eef2f6; color: #334155; font-size: 10px; line-height: 1.4; }
.subscription-pricing-card li::before { position: absolute; left: 0; content: "\2713"; color: #15803d; font-weight: 900; }
.subscription-tier-button {
    width: 100%;
    min-height: 38px;
    color: #fff;
    background: #1769aa;
    border: 1px solid #1769aa;
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}
.subscription-tier-button:hover { background: #0f4f82; }

.subscription-included-section {
    padding: 22px;
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15,35,65,.055);
}
.subscription-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.subscription-feature-grid > div { padding: 14px; background: #f7fafc; border: 1px solid #e3eaf2; border-radius: 11px; }
.subscription-feature-grid span,
.subscription-feature-grid strong { display: block; }
.subscription-feature-grid span { margin-bottom: 7px; font-size: 20px; }
.subscription-feature-grid strong { margin-bottom: 5px; color: #0b1739; font-size: 12px; }
.subscription-feature-grid p { margin: 0; color: #64748b; font-size: 10px; line-height: 1.5; }
.hrms-app-page #subscriptionContactActions { margin: 22px 0; padding: 22px; }
.hrms-app-page .billing-detail-card { padding: 20px; }

@media (max-width: 1250px) {
    .subscription-pricing-grid,
    .subscription-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hrms-app-page .billing-summary-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}

@media (max-width: 760px) {
    .subscription-page-hero,
    .subscription-value-banner,
    .subscription-trial-banner { grid-template-columns: 1fr; }
    .subscription-page-hero { align-items: flex-start; padding: 22px; }
    .subscription-trial-pill { min-width: 0; width: 100%; box-sizing: border-box; }
    .subscription-value-stat { max-width: none; text-align: left; }
    .subscription-trial-facts { flex-wrap: wrap; }
    .subscription-trial-facts span { flex: 1 1 90px; }
    .subscription-pricing-grid,
    .subscription-feature-grid,
    .hrms-app-page .billing-summary-grid { grid-template-columns: 1fr; }
    .subscription-tier-audience { min-height: 0; }
    .subscription-currency-toggle { right: 14px; bottom: 14px; }
}

@media (max-width: 700px) {
    .hrms-app-page .dash-hero { min-height: 0; padding: 24px; }
}

/* Attendance filters use an explicit grid so the scope guidance never
   competes for horizontal space with either date field. */
.hrms-app-page #attendanceSection .attendance-filter-row {
    display: grid;
    grid-template-columns: minmax(250px, 1.15fr) repeat(2, minmax(210px, 1fr));
    gap: 18px 22px;
    align-items: end;
}

.hrms-app-page #attendanceSection .attendance-filter-row .field-group {
    display: flex;
    float: none;
    width: auto !important;
    min-width: 0;
    margin: 0;
}

.hrms-app-page #attendanceSection .attendance-mode-group {
    align-items: flex-start;
}

.hrms-app-page #attendanceSection .attendance-mode-options {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.hrms-app-page #attendanceSection .attendance-mode-options table {
    width: auto !important;
    margin: 0;
}

.hrms-app-page #attendanceSection .attendance-scope-hint {
    display: block;
    max-width: 210px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.35;
}

.hrms-app-page #attendanceSection .attendance-date-group .roster-input {
    width: 100%;
    min-width: 0;
}

.hrms-app-page #attendanceSection .attendance-employee-group {
    grid-column: 1 / span 2;
}

.hrms-app-page #attendanceSection .attendance-employee-group .roster-input {
    width: 100%;
    min-width: 0;
}

.hrms-app-page #attendanceSection .attendance-get-button {
    justify-self: end;
}

@media (max-width: 980px) {
    .hrms-app-page #attendanceSection .attendance-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hrms-app-page #attendanceSection .attendance-mode-group,
    .hrms-app-page #attendanceSection .attendance-employee-group {
        grid-column: 1 / -1;
    }

    .hrms-app-page #attendanceSection .attendance-filter-row .field-group {
        display: flex;
    }

    .hrms-app-page #attendanceSection .attendance-mode-options table td {
        display: table-cell;
        width: auto !important;
    }
}

@media (max-width: 620px) {
    .hrms-app-page #attendanceSection .attendance-filter-row {
        grid-template-columns: 1fr;
    }

    .hrms-app-page #attendanceSection .attendance-mode-group,
    .hrms-app-page #attendanceSection .attendance-employee-group {
        grid-column: auto;
    }

    .hrms-app-page #attendanceSection .attendance-filter-row .field-group {
        align-items: flex-start;
        flex-direction: column;
    }

    .hrms-app-page #attendanceSection .attendance-get-button {
        width: 100%;
        justify-self: stretch;
    }
}