/* Shared application presentation, based on Payroll Items. Business widgets
   keep their layout and behaviour; the shell supplies typography and surfaces. */
:root {
    --sky-ui-page:#f3f6fa;
    --sky-ui-surface:#fff;
    --sky-ui-soft:#f5f8fc;
    --sky-ui-heading:#203e60;
    --sky-ui-text:#334f69;
    --sky-ui-muted:#718499;
    --sky-ui-line:#dce6f1;
    --sky-ui-accent:#286dbb;
    --sky-ui-radius:13px;
    --sky-ui-shadow:0 8px 24px rgba(28,62,98,.055);
    --sky-control-height:38px;
    --sky-control-radius:7px;
}
html.sky-presentation body.sky-dark {
    --sky-ui-page:#091321;
    --sky-ui-surface:#101e30;
    --sky-ui-soft:#16273c;
    --sky-ui-heading:#edf4fc;
    --sky-ui-text:#d3e1ef;
    --sky-ui-muted:#a2b7cb;
    --sky-ui-line:#2d435c;
    --sky-ui-accent:#8dbfff;
    --sky-ui-shadow:0 8px 24px rgba(0,0,0,.16);
}
@media screen {
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) {
        font-size:13px;
        line-height:1.5;
        -webkit-font-smoothing:antialiased;
    }
    html.sky-presentation .dash-content>.row {min-width:0}
    html.sky-presentation .dash-content>.row>* {min-width:0}
    html.sky-presentation body .dash-content small {font-size:11px!important;line-height:1.5}
    html.sky-presentation body .dash-content :is(h4,h5) {font-size:14px!important;font-weight:700;line-height:1.4}
    html.sky-presentation body .dash-content h6 {font-size:12px!important;font-weight:650;line-height:1.4}

    /* Existing module banners and the fallback for older pages. */
    html.sky-presentation body .dash-content :is([class$="-hero"],[class*="-hero "],.sky-page-heading) {
        position:relative;
        isolation:isolate;
        overflow:hidden;
        min-height:144px;
        padding:26px 30px!important;
        border:1px solid rgba(106,159,211,.26)!important;
        border-radius:18px!important;
        background:linear-gradient(118deg,#102c50,#1b4e87 60%,#23659d)!important;
        color:#fff!important;
        box-shadow:0 14px 32px rgba(25,67,109,.14)!important;
    }
    html.sky-presentation body .dash-content :is([class$="-hero"],[class*="-hero "],.sky-page-heading)::after {
        content:"";
        display:block!important;
        position:absolute;
        z-index:-1;
        inset:auto -34px -90px auto;
        width:300px;
        height:300px;
        border:38px solid rgba(194,227,255,.08);
        border-radius:48px;
        background:transparent;
        box-shadow:0 0 0 38px rgba(194,227,255,.035);
        transform:rotate(35deg);
        pointer-events:none;
    }
    html.sky-presentation body .dash-content :is([class$="-hero"],[class*="-hero "],.sky-page-heading) :is(h1,h2,h3,h4) {
        margin-top:0;
        color:#fff!important;
        font-size:26px!important;
        font-weight:750!important;
        line-height:1.2!important;
        letter-spacing:-.45px;
    }
    html.sky-presentation body .dash-content :is([class$="-hero"],[class*="-hero "],.sky-page-heading) p {
        max-width:760px;
        margin-bottom:0;
        color:#fff!important;
        font-size:12px!important;
        line-height:1.65!important;
    }
    html.sky-presentation body .dash-content :is([class$="-kicker"],[class*="-kicker "],[class$="-eyebrow"],[class*="-eyebrow "]) {
        font-size:10px!important;
        font-weight:700!important;
        letter-spacing:1.2px;
        line-height:1.5;
    }
    html.sky-presentation body .dash-content :is([class$="-hero"],[class*="-hero "],.sky-page-heading) :is([class$="-eyebrow"],[class*="-eyebrow "],[class$="-kicker"],[class*="-kicker "]) {
        color:#fff!important;
    }

    /* These controls sit on dark cards, including rows added after page load.
       Keep their labels readable without changing printed documents. */
    html.sky-presentation body.sky-dark .dash-content :is(
        .eaw-detail-toggle,.raw-column-head>span,.raw-column-toggle,
        .roster-day-card strong,.roster-day-card span,.slot-name,.slot-source,.slot-time,
        .ws-day span,.ws-day strong,.ws-day b,.ws-day em,.gw-btn-soft,
        .pacc-company-line,.pr-service-scan-card .pr-lookup-status,
        .rq-section-heading span,.rq-question-preview span,.rq-template p,.rq-template small
    ) {
        color:#fff!important;
    }
    html.sky-presentation body.sky-dark .dash-content :is(.gw-pill,.lvc-status) {
        background:var(--sky-ui-soft)!important;
        color:#fff!important;
    }
    .sky-page-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
    .sky-page-heading h1 {margin-bottom:8px}
    .sky-page-heading .breadcrumb {margin:0;padding:0;background:transparent;font-size:11px}
    .sky-page-heading .breadcrumb :is(a,li,li::before) {color:#c7def5!important}
    .sky-page-heading-actions {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}

    /* Cards retain their grids, overflow rules, and status colours. */
    html.sky-presentation body .dash-content :is(.card,[class$="-card"],[class*="-card "],[class$="-panel"],[class*="-panel "]) {
        border-color:var(--sky-ui-line)!important;
        border-radius:var(--sky-ui-radius)!important;
        box-shadow:var(--sky-ui-shadow)!important;
    }
    html.sky-presentation body.sky-light .dash-content :is(.card,.table-responsive) {
        background:var(--sky-ui-surface)!important;
        box-shadow:var(--sky-ui-shadow)!important;
    }
    html.sky-presentation body .dash-content .table-responsive {border-radius:8px;box-shadow:none!important}
    /* Keep the screen-reader action heading inside the scrolling goal table. */
    html.sky-presentation body .dash-content .goal-table-wrap {position:relative}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.card-header,[class$="-card-head"],[class*="-card-head "]) {
        padding:16px 20px;
        border-color:var(--sky-ui-line)!important;
        border-radius:var(--sky-ui-radius) var(--sky-ui-radius) 0 0!important;
        background:linear-gradient(110deg,var(--sky-ui-soft),var(--sky-ui-surface))!important;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.card-header,[class$="-card-head"],[class*="-card-head "]) :is(h3,h4,h5,h6) {
        margin-bottom:0;
        font-size:14px!important;
        font-weight:700!important;
        line-height:1.4;
        color:var(--sky-ui-heading)!important;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.card-header,[class$="-card-head"],[class*="-card-head "]) :is(p,small) {
        font-size:11px!important;
        line-height:1.55;
        color:var(--sky-ui-muted)!important;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.card-body,[class$="-card-body"],[class*="-card-body "]) {padding:20px}

    /* A single compact form scale; native date/select icons stay functional. */
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.form-label,.col-form-label,[class$="-field"]>label,[class*="-field "]>label) {
        margin-bottom:6px;
        color:var(--sky-ui-text)!important;
        font-size:11px!important;
        font-weight:650!important;
        line-height:1.5;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(input,select,textarea):is(.form-control,.form-select,[class$="-input"],[class*="-input "],[class$="-select"],[class*="-select "],[class$="-textarea"],[class*="-textarea "]):not(:where([type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="hidden"])) {
        min-height:38px!important;
        border-width:1px!important;
        border-color:var(--sky-ui-line)!important;
        border-radius:7px!important;
        background-color:var(--sky-ui-soft)!important;
        color:var(--sky-ui-text)!important;
        font-size:12px!important;
        line-height:1.5;
        box-shadow:none!important;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) textarea:is(.form-control,[class$="-textarea"]) {min-height:96px!important;resize:vertical}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(input,select,textarea):focus-visible {
        border-color:#4488cb!important;
        outline:2px solid rgba(62,137,211,.24);
        outline-offset:2px;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(input,select,textarea):disabled {opacity:.65;cursor:not-allowed}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.form-text,.help-block,[class$="-help"],[class*="-help "]) {
        color:var(--sky-ui-muted)!important;
        font-size:11px!important;
        line-height:1.6;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.is-invalid,[aria-invalid="true"]) {border-color:#c84c62!important}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) .invalid-feedback {font-size:11px}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) .btn {
        border-radius:7px!important;
        font-size:12px!important;
        font-weight:650;
        line-height:1.5;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) .btn:not(.btn-sm):not(.btn-icon) {padding:9px 14px}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) .btn-sm {padding:6px 10px;font-size:11px!important}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.btn-primary,[class$="-btn-primary"],[class*="-btn-primary "]) {
        background:linear-gradient(135deg,#286dbb,#205a9e)!important;
        border-color:#2a6cb7!important;
        color:#fff!important;
        box-shadow:0 4px 10px rgba(36,101,176,.12)!important;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(a,button,input,select,textarea):focus-visible {outline:2px solid #5799dc;outline-offset:3px}

    /* Data lists use a quiet header, consistent row density, and small paging. */
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.table,[class$="-table"],[class*="-table "]):not(.fc-scrollgrid):not(.fc-col-header) {
        color:var(--sky-ui-text);
        font-variant-numeric:tabular-nums;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.table,[class$="-table"],[class*="-table "])>thead>tr>th {
        padding:10px 12px!important;
        border-color:var(--sky-ui-line)!important;
        background:var(--sky-ui-soft)!important;
        color:var(--sky-ui-text)!important;
        font-size:10px!important;
        font-weight:750!important;
        letter-spacing:.045em;
        line-height:1.45;
        text-transform:uppercase;
        vertical-align:middle;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.table,[class$="-table"],[class*="-table "])>tbody>tr>td {
        padding:11px 12px!important;
        border-color:var(--sky-ui-line)!important;
        font-size:12px!important;
        line-height:1.5;
        vertical-align:middle;
    }
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.table,[class$="-table"],[class*="-table "])>tbody>tr:hover>td {background-color:var(--sky-ui-soft)!important}
    html.sky-presentation body :is(.dash-content,.modal) :is(.pagination,.dataTable-pagination ul) {display:flex;flex-wrap:wrap;gap:5px;padding:0;list-style:none}
    html.sky-presentation body :is(.dash-content,.modal) :is(.page-link,.dataTable-pagination a) {
        display:inline-flex;align-items:center;justify-content:center;
        min-width:32px;height:32px;margin:0;padding:5px 9px;
        border:1px solid var(--sky-ui-line);border-radius:6px!important;
        background:var(--sky-ui-surface);font-size:11px;line-height:1;color:var(--sky-ui-accent);
    }
    html.sky-presentation body :is(.dash-content,.modal) nav[role="navigation"] svg {width:16px!important;height:16px!important;flex-shrink:0}
    html.sky-presentation body :is(.dash-content,.modal) .pagination svg {width:16px!important;height:16px!important}

    html.sky-presentation body .modal-content {border:1px solid var(--sky-ui-line)!important;border-radius:16px!important;box-shadow:0 24px 64px rgba(16,42,72,.2)!important}
    html.sky-presentation body .modal :is(.modal-header,.modal-footer) {padding:16px 20px;border-color:var(--sky-ui-line)!important;background:var(--sky-ui-soft)!important}
    html.sky-presentation body .modal-title {font-size:17px!important;font-weight:700;color:var(--sky-ui-heading)!important}
    html.sky-presentation body .modal-body {padding:20px}
    html.sky-presentation body :is(.dropdown-menu,.select2-dropdown,.choices__list--dropdown,.flatpickr-calendar) {border-color:var(--sky-ui-line);border-radius:9px;font-size:12px}

    /* The reference form uses numbered sections; carry its spacing to the
       shared payroll family without altering employee filter mechanics. */
    html.sky-presentation body .dash-content .pr-reference .pr-card {margin-bottom:18px;border:1px solid var(--sky-ui-line)!important;border-radius:13px!important}
    html.sky-presentation body .dash-content .pr-reference .pr-card-head {padding:14px 18px}
    html.sky-presentation body .dash-content .pr-reference .pr-card-body {padding:18px}
    html.sky-presentation body .dash-content :is(.pr-workbench,.pr-item-columns) {gap:16px}
    html.sky-presentation body .dash-content :is(.pr-main-panel,.pr-side-panel) {border-color:var(--sky-ui-line)!important}
    html.sky-presentation body .dash-content .pr-reference .pr-hero p {display:block}
    html.sky-presentation body .dash-content .pr-reference .pr-hero :is(.pr-eyebrow,.pi-kicker) {display:block;color:#b9d9f8!important}
    html.sky-presentation body .dash-content .pr-sticky-actions {border-color:var(--sky-ui-line)!important;border-radius:10px;background:var(--sky-ui-surface)!important}
    html.sky-presentation body .dash-content .pr-sticky-actions>span {color:var(--sky-ui-muted)!important}

    /* Display options remain previews of their own font and theme. */
    html.sky-presentation #skyDisplaySettings :is(.dsp-preview,.dsp-logo,.dsp-bar,.dsp-feature,.dsp-canvas) {display:block}
    html.sky-presentation #skyDisplaySettings .dsp-preview.light {background:#f5f8fc!important}
    html.sky-presentation #skyDisplaySettings .dsp-preview.light .dsp-canvas {background:#f5f8fc!important}
    html.sky-presentation #skyDisplaySettings .dsp-preview.light :is(.dsp-bar,.dsp-blocks i,.dsp-option-copy) {background:#fff!important;border-color:#dce6ef!important}
    html.sky-presentation #skyDisplaySettings .dsp-preview.light .dsp-option-copy strong {color:#24435d!important}
    html.sky-presentation #skyDisplaySettings .dsp-preview.light .dsp-option-copy small {color:#718499!important}
    html.sky-presentation #skyDisplaySettings .dsp-preview.light .dsp-sidebar {background:linear-gradient(180deg,#effbfc,#ccebef 58%,#a8d8df)!important}
    html.sky-presentation #skyDisplaySettings .dsp-preview.light .dsp-sidebar i {background:#79b9c6!important}
    html.sky-presentation #skyDisplaySettings .dsp-preview .dsp-feature {background:linear-gradient(120deg,#245fa5,#4b91d1)!important}
    html.sky-presentation #skyDisplaySettings .dsp-font-card :is(.dsp-font-sample,strong,small) {font-family:var(--dsp-font-family)!important}
    html.sky-presentation #skyDisplaySettings .dsp-font-card .ti {font-family:tabler-icons!important}
    html.sky-presentation .dsp-font-card strong {font-size:12px!important}
    html.sky-presentation .dsp-font-card small {font-size:11px!important}
    html.sky-presentation :is(.dsp-card-head small,.dsp-font-heading small,.dsp-note,.dsp-option-copy small) {font-size:11px!important;line-height:1.6}
    html.sky-presentation :is(.dsp-option-copy strong,.dsp-save) {font-size:12px!important}
    html.sky-presentation .dsp-option>input:focus-visible+.dsp-preview,
    html.sky-presentation .dsp-font-option>input:focus-visible+.dsp-font-card {outline:3px solid #5799dc;outline-offset:3px}
}
@media screen and (max-width:1024px) {
    html.sky-presentation[data-sky-font] body.sky-icon-navigation .dash-container {width:100%!important;margin-left:0!important;margin-right:0!important;transition:none!important}
    html.sky-presentation[data-sky-font] body.sky-icon-navigation .dash-footer {margin-left:0!important;margin-right:0!important}
    /* Mobile dock geometry belongs to skyhr-mobile-app.css. Do not reserve a
       side gutter here: quick actions sit below the full-width page canvas. */
}
@media screen and (max-width:767px) {
    html.sky-presentation body .dash-content :is([class$="-hero"],[class*="-hero "],.sky-page-heading) {min-height:124px;padding:22px 20px!important;gap:16px;border-radius:14px!important}
    html.sky-presentation body .dash-content :is([class$="-hero"],[class*="-hero "],.sky-page-heading) :is(h1,h2,h3,h4) {font-size:22px!important}
    .sky-page-heading {align-items:flex-start;flex-direction:column}
    .sky-page-heading-actions {justify-content:flex-start;width:100%}
    html.sky-presentation body :is(.dash-content,.modal,.offcanvas) :is(.card-body,[class$="-card-body"],[class*="-card-body "]) {padding:16px}
    html.sky-presentation body .dash-content .pr-reference .pr-card-body {padding:14px}
    html.sky-presentation body .modal-dialog {margin:12px}
}
@media (prefers-reduced-motion:reduce) {
    html.sky-presentation body :is(.dash-content,.modal) * {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}