/* Shared visual system for the HR host and its named frames only.
   Screen scope leaves existing print layouts and exported documents intact. */
@media screen {
    html:is(.hr-welfare-host, .hr-welfare-embedded) {
        --hr-ink: #2c4553; --hr-muted: #667d89; --hr-line: #dfe9ee;
        --hr-accent: #287d92; --hr-surface: #fff; --hr-wash: #f6f9fb;
        font-size: 16px; scrollbar-width: thin; scrollbar-color: #c8d9e1 #f6f9fb;
    }
    html.hr-welfare-embedded body { background: #fff; color: var(--hr-ink); padding: 0 !important; }
    html.hr-welfare-embedded body > :is(.container-xl, .container-fluid) { max-width: none; padding: 0; }
    html.hr-welfare-embedded body > header,
    html.hr-welfare-embedded body > footer { display: none !important; }
    html.hr-welfare-embedded body > div > main { padding-bottom: 0 !important; }
    html.hr-welfare-embedded :is(.alpha-page, .leave-maint-shell, .coc-batch-page, .tlc-page, .department-calendar-page, .ws-shell, .department-approvals, .awma-review-page) {
        background: #fff; color: var(--hr-ink); min-height: 0; margin: 0; padding: 24px;
        width: 100%; max-width: none; box-shadow: none;
    }
    html.hr-welfare-embedded :is(.alpha-shell, .leave-maint-page, .coc-batch-shell, .department-calendar-shell) { width: 100%; max-width: none; margin: 0; }
    html.hr-welfare-embedded :is(h1, .alpha-title, .department-calendar-title, .tlc-rail-head h1, .leave-maint-header h1) { color: var(--hr-ink); font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.25; }
    html.hr-welfare-embedded :is(h2, h3, h4, .leave-maint-panel-head h3, .tlc-section-head h2) { color: var(--hr-ink); font-weight: 500; letter-spacing: -.015em; }
    html.hr-welfare-embedded :is(.alpha-subtitle, .leave-maint-muted, .awma-review-muted, .department-calendar-meta, .coc-batch-hero p) { color: var(--hr-muted); font-size: .84rem; line-height: 1.6; }
    html.hr-welfare-embedded :is(.alpha-kicker, .coc-batch-kicker, .department-calendar-kicker, .awma-review-kicker) { color: #648793; font-size: .65rem; font-weight: 500; letter-spacing: .12em; }

    /* Panels retain their content and semantic status colors, with quieter chrome. */
    html.hr-welfare-embedded :is(.card, .approval-surface, .dashboard-panel, .alpha-search-panel, .alpha-results-panel, .alpha-employee-card,
        .leave-maint-panel, .leave-maint-search, .leave-type-summary-card, .coc-batch-hero, .coc-batch-panel, .coc-batch-stat,
        .tlc-panel, .ws-card, .ws-assignment-panel, .department-calendar-card, .awma-review-card, .awma-review-stat, .awma-review-empty) {
        background: #fff; border: 1px solid var(--hr-line); border-radius: 10px; box-shadow: 0 2px 10px #263f5003;
    }
    html.hr-welfare-embedded :is(.alpha-search-panel, .leave-maint-search) { background: var(--hr-wash); box-shadow: none; padding: 12px; }
    html.hr-welfare-embedded .alpha-search-panel::before { height: 1px; background: linear-gradient(90deg, #7dafbe, #dcecee, transparent); }
    html.hr-welfare-embedded :is(.alpha-back-link, .alpha-scope-pill, .coc-batch-back, .coc-batch-button, .department-calendar-link) { border: 1px solid var(--hr-line); border-radius: 7px; box-shadow: none; background: #fff; color: #496775; font-weight: 400; }
    html.hr-welfare-embedded :is(.leave-maint-header, .alpha-topbar, .department-calendar-toolbar, .awma-review-card-head, .tlc-action-bar) { gap: 16px; flex-wrap: wrap; }
    html.hr-welfare-embedded :is(.leave-maint-hero, .ws-hero, .awma-review-hero) { background: #f4f9fa; border: 1px solid #deebef; border-radius: 10px; color: var(--hr-ink); box-shadow: none; padding: 20px; }
    html.hr-welfare-embedded .leave-maint-pill { background: #e8f1f4; color: #466976; border: 1px solid #d7e7ec; }
    html.hr-welfare-embedded .leave-maint-person h2 { font-weight: 400; }
    html.hr-welfare-embedded .leave-maint-avatar { background: #fff; color: #487687; border: 1px solid #dce9ee; font-weight: 400; }
    html.hr-welfare-embedded .coc-batch-hero { padding: 20px; background: #f6fafb; }
    html.hr-welfare-embedded .coc-batch-grid { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 18px; }
    html.hr-welfare-embedded .coc-batch-panel { padding: 20px; min-width: 0; }
    html.hr-welfare-embedded .coc-batch-panel-title { flex-wrap: wrap; }
    html.hr-welfare-embedded .approval-dashboard-modern {
        --approval-blue: #287d92; --approval-blue-soft: #edf5f7; --approval-blue-track: #dfedf1;
        --approval-text: #2c4553; --approval-border: #dfe9ee;
        margin: 0; padding: 24px; background: #fff; color: var(--hr-ink);
    }
    html.hr-welfare-embedded :is(.approval-metric-card, .approval-chart-card, .approval-queue-card) { border: 1px solid var(--hr-line); border-radius: 10px; box-shadow: none; background: #fff; }
    html.hr-welfare-embedded .approval-dashboard-modern :is(.approval-profile-card, .approval-surface, .approval-metric-card, .dashboard-panel) { border-color: var(--hr-line); border-radius: 10px; box-shadow: none; }
    html.hr-welfare-embedded .approval-dashboard-modern :is(h1, h2, h3, .approval-metric-value) { color: var(--hr-ink); font-weight: 400; }
    html.hr-welfare-embedded .approval-dashboard-modern .approval-profile-card .approval-avatar { background: #eaf3f6; border: 1px solid #d4e7ed; color: #387a8d; border-radius: 9px; box-shadow: none; }
    html.hr-welfare-embedded .department-calendar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    html.hr-welfare-embedded .department-calendar-period-form { display: flex; min-width: 0; gap: 8px; }

    /* Controls and dialogs, including employee filing and follow-on workflow pages. */
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.form-control, .form-select, .leave-admin-filter-select, .approval-search-input, .coc-batch-field input, .coc-batch-field select, .coc-batch-field textarea) {
        border-color: #d7e3e9; border-radius: 7px; background-color: #fff; color: #304d5c;
        font-size: .84rem; font-weight: 400; box-shadow: none; min-height: 38px;
    }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.form-control, .form-select):disabled { background-color: #f0f3f5; color: #74858f; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) .form-control[readonly] { background-color: #f6f9fb; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.form-control, .form-select):focus { border-color: #7caebb; box-shadow: 0 0 0 3px #287d9212; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.form-label, .coc-batch-field label, .tlc-field > span) { color: #58707e; font-size: .76rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) .btn { border-radius: 7px; font-weight: 400; font-size: .8rem; box-shadow: none; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.btn-primary, .alpha-search-button, .coc-batch-button-primary, .employee-search-submit) { background: #287d92; border-color: #287d92; color: #fff; box-shadow: none; font-weight: 400; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.btn-primary, .alpha-search-button, .coc-batch-button-primary, .employee-search-submit):hover { background: #226c7e; border-color: #226c7e; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #398a9f; outline-offset: 2px; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) .modal-content { border: 1px solid #dbe6ec; border-radius: 12px; box-shadow: 0 20px 80px #1e3c5020; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.modal-header, .modal-footer) { background: #f8fbfc; border-color: #e3ebef; padding: 18px 22px; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) .modal-title { color: #304c5b; font-weight: 400; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) .alert { border-radius: 8px; font-size: .84rem; box-shadow: none; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.table-responsive, .coc-batch-table-wrap) { max-width: 100%; scrollbar-width: thin; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.table, .leave-maint-table, .tlc-balance-table, .approval-table, .coc-batch-table) { color: #3b5260; font-size: .8rem; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.table, .leave-maint-table, .tlc-balance-table, .approval-table, .coc-batch-table) thead th { background: #f5f8fa; color: #647d8b; border-color: #e3ebef; font-weight: 500; font-size: .7rem; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.table, .leave-maint-table, .tlc-balance-table, .approval-table, .coc-batch-table) td { border-color: #e8eff2; }

    /* Transfer credits: a compact horizontal guide replaces the second sidebar. */
    html.hr-welfare-embedded .tlc-body { display: block; min-height: 0; }
    html.hr-welfare-embedded .tlc-rail { padding: 0 0 20px; border: 0; background: transparent; }
    html.hr-welfare-embedded .tlc-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 20px 0 0; }
    html.hr-welfare-embedded .tlc-steps::before { display: none; }
    html.hr-welfare-embedded .tlc-step { display: flex; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px; border: 1px solid #e1eaee; border-radius: 8px; background: #f8fbfc; }
    html.hr-welfare-embedded .tlc-step-no { flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid #ccdde5; font-size: .72rem; font-weight: 400; }
    html.hr-welfare-embedded .tlc-step-card,
    html.hr-welfare-embedded .tlc-step.active .tlc-step-card { display: block; padding: 2px 0; min-height: 0; border: 0; background: transparent; box-shadow: none; }
    html.hr-welfare-embedded .tlc-step-icon { display: none; }
    html.hr-welfare-embedded .tlc-step-card strong { font-size: .76rem; font-weight: 500; }
    html.hr-welfare-embedded .tlc-step-card small { font-size: .7rem; color: #6c818e; }
    html.hr-welfare-embedded .tlc-main { padding: 0; overflow: visible; }
    html.hr-welfare-embedded .tlc-form { gap: 16px; padding-bottom: 0; min-width: 0; }
    html.hr-welfare-embedded .tlc-section-head { padding: 16px 18px; border-color: #e5edf1; background: #fbfdfe; }
    html.hr-welfare-embedded .tlc-section-head h2 { font-size: .95rem; }
    html.hr-welfare-embedded .tlc-upload-card { background: #f9fcfd; border: 1px dashed #cbdfe7; box-shadow: none; border-radius: 8px; }
    html.hr-welfare-embedded .tlc-action-bar { position: static; inset: auto; width: auto; margin: 0; padding: 16px 0; background: #fff; box-shadow: none; border-color: #e1eaee; }
}
@media screen and (max-width: 950px) {
    html.hr-welfare-embedded .coc-batch-grid { grid-template-columns: minmax(0, 1fr); }
    html.hr-welfare-embedded .tlc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.hr-welfare-embedded :is(.department-calendar-toolbar, .leave-maint-hero, .ws-hero) { flex-wrap: wrap; }
}
@media screen and (max-width: 600px) {
    html.hr-welfare-embedded :is(.alpha-page, .leave-maint-shell, .coc-batch-page, .tlc-page, .department-calendar-page, .ws-shell, .department-approvals, .approval-dashboard-modern, .awma-review-page) { padding: 16px 12px; }
    html:is(.hr-welfare-host, .hr-welfare-embedded) :is(.form-control, .form-select, .employee-search input, .employee-search select, .coc-batch-field input, .coc-batch-field select, .coc-batch-field textarea) { font-size: 16px; }
    html.hr-welfare-embedded .department-calendar-period-form { flex: 1 1 180px; }
    html.hr-welfare-embedded .department-calendar-period { min-width: 0; width: 100%; }
    html.hr-welfare-embedded :is(.alpha-topbar, .coc-batch-hero, .coc-batch-form-grid, .tlc-field-grid, .tlc-attachment-grid) { grid-template-columns: minmax(0, 1fr); }
    html.hr-welfare-embedded .coc-batch-panel { padding: 14px; }
    html.hr-welfare-embedded .tlc-action-right { display: flex; flex-wrap: wrap; gap: 8px; }
    html.hr-welfare-embedded .tlc-step { padding: 9px; }
    html.hr-welfare-embedded .tlc-step-card small { line-height: 1.4; }
    html.hr-welfare-embedded .coc-batch-field-wide { grid-column: auto; }
}