/* Shared type scale for the application, employee portal and warehouse scanner.
   rem keeps text responsive to the user's browser font and zoom preferences. */
:root {
    --sp-text-xs: .875rem;
    --sp-text-sm: .9375rem;
    --sp-text-base: 1rem;
    --sp-text-lg: 1.125rem;
    --sp-muted: #536278;
    --sp-ink: #17243b;
    --sp-line: #dce3ed;
    --sp-sidebar-width: 240px;
}

html { font-size: 100%; }
body { font-size: var(--sp-text-base); line-height: 1.6; }
button, input, select, textarea { font-family: inherit; }
small, .small { font-size: var(--sp-text-xs); }
.text-muted { color: var(--sp-muted) !important; }

/* A single outer gutter leaves more room for the actual work area. */
body.app-shell #content { padding: 28px !important; }
body.app-shell #content :is(.audit-workspace, .cp-shell, .de-shell, .employee-editor, .rec-shell, .report-shell, .ic, .ra, .sp-admin) {
    padding: 0 0 40px;
    min-height: 0;
    background: transparent;
}
.app-shell #content > .container { width: 100%; }
.app-shell :is(.g-color-black, .g-color-black p, .g-color-black li, .modal-body) {
    font-size: var(--sp-text-base);
    line-height: 1.6;
}
.app-shell :is(h1, h2, h3, legend) { text-wrap: balance; }

body.app-shell #sidebar { min-width: var(--sp-sidebar-width) !important; max-width: var(--sp-sidebar-width) !important; }
body.app-shell.sidebar-collapsed #sidebar { margin-left: calc(-1 * var(--sp-sidebar-width)) !important; }
#sidebar ul li > a { font-size: var(--sp-text-base) !important; line-height: 1.45 !important; }
#sidebar ul li .collapse a { font-size: var(--sp-text-sm) !important; color: #c5cfe0 !important; }
#sidebar li.sidebar-section-label { font-size: var(--sp-text-xs) !important; letter-spacing: .035em; }
.sidebar-home strong { font-size: var(--sp-text-base) !important; }
.sidebar-home small { font-size: var(--sp-text-xs) !important; color: #b9c5d8; }
.app-navbar .nav-link, .dropdown-item { font-size: var(--sp-text-sm); }
.app-navbar .brand-copy small { font-size: .625rem; }

/* Forms: full-size entered values, clear labels and visible focus states. */
label { font-size: var(--sp-text-sm); line-height: 1.5; }
.app-shell :is(.form-control, .custom-select),
.app-shell #content :is(input, select, textarea):where(:not([type=checkbox], [type=radio], [type=hidden], [type=range], [type=color], [type=submit], [type=button])) {
    font-size: var(--sp-text-base) !important;
    min-height: 2.875rem;
    line-height: 1.5;
}
.app-shell #content :is(input, select, textarea)::placeholder { color: #65748b; opacity: 1; }
.app-shell :is(.form-text, .helptext) { font-size: var(--sp-text-xs); line-height: 1.6; }
.app-shell .btn { font-size: var(--sp-text-sm) !important; line-height: 1.45 !important; padding: 10px 14px !important; }
.app-shell .btn-success { background: #16775f !important; color: #fff !important; }
.app-shell .modal-title { font-size: var(--sp-text-lg) !important; }
.app-shell .modal-body :is(.table th, .table td) { font-size: var(--sp-text-sm) !important; }
:is(.app-shell, .sp-portal, .wh-mobile) :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #8574dd;
    outline-offset: 3px;
}

/* Tables keep the compact icon actions while making the content readable. */
.app-shell .table { font-size: var(--sp-text-sm) !important; font-weight: 500; }
.app-shell .table thead th,
#content .lw-table > thead > tr > th {
    font-size: var(--sp-text-xs) !important;
    color: #4b5c75 !important;
    letter-spacing: .015em;
    text-transform: none;
    line-height: 1.5 !important;
    background: #f0f3f8 !important;
}
.app-shell .table tbody td,
#content .lw-table > tbody > tr > td {
    font-size: var(--sp-text-sm) !important;
    line-height: 1.55 !important;
    color: #34445c;
}
.app-shell .table a, .app-shell .dark_column { font-size: var(--sp-text-sm) !important; }
#content .lw-table .lw-primary { font-size: var(--sp-text-base) !important; }
.lw-secondary, .lw-description, .lw-footer, .lw-eyebrow { color: var(--sp-muted); }
#content .lw-table > tbody > tr:nth-child(even) { background: #f9fbfd !important; }
#content .lw-table > tbody > tr:hover { background: #f0edff !important; }
#content .lw-table > tbody > tr:focus-within { background: #f0edff !important; }
.app-shell .table .badge { font-size: var(--sp-text-xs) !important; }
#content .list-icon-action,
#content .lw-table .list-icon-action {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
}
#content .lw-table .list-icon-action:is(.list-count-action, .order-plan-action) {
    width: auto !important;
    min-width: 64px !important;
    gap: 7px !important;
    padding: 0 8px !important;
}
#content .lw-table :is(.list-action-count, .order-plan-count) { font-size: var(--sp-text-xs) !important; }
.lw-filter { min-height: 40px; }
.lw-group { flex-wrap: wrap; }
.lw-header-actions { flex-wrap: wrap; }
.lw-description { max-width: 75ch; }
.lw-footer .dataTables_length select { min-height: 38px !important; }
.lw-status { color: #526176; }
.lw-status:is([data-status=open], [data-status=pending], [data-status=uploaded], [data-status=review], [data-status=in_repair], [data-status=missing], [data-status=expiring]) { color: #82520c; }
.lw-status:is([data-status=confirmed], [data-status=completed], [data-status=approved], [data-status=available], [data-status=closed], [data-status=remaining], [data-status=valid]) { color: #21674d; }
.lw-status:is([data-status=declined], [data-status=rejected], [data-status=not_available], [data-status=exhausted], [data-status=expired]) { color: #a13644; }

/* Section titles, field groups and tabs provide a consistent reading order. */
#order-editor .oe-section-heading h3, .pr-card h2, .pr-section-heading h2,
.employee-section legend, .de-card h2 { font-size: 1.25rem; line-height: 1.4; }
#order-editor .oe-section-heading, .pr-section-heading { padding-bottom: 14px; border-bottom: 1px solid var(--sp-line); }
#order-editor .oe-fields, .employee-fields, .de-fields { row-gap: 22px; }
.pr-tabs button { min-height: 48px; }
.pr-hint { white-space: normal; }
.app-shell #content :is(.li-stat, .mtw-stat, .qw-stat) { gap: 6px 14px; padding: 20px; }
.app-shell #content :is(.li-stat, .mtw-stat, .qw-stat) > small { color: var(--sp-muted); }
.cp-hero h1, .audit-hero h1 { color: #fff; }
.cp-filters label { text-transform: none; letter-spacing: 0; }
.cp-level-card { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.cp-search i, .cp-editor-search i { top: 16px; }
.cp-filter-submit { height: 46px; }

/* The audit page should remain legible at ordinary laptop widths. */
.audit-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); }
.audit-metric { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 42px auto 1fr; align-content: start; align-items: start; gap: 8px 12px; padding: 20px; }
.audit-metric strong, .audit-live-dot { align-self: center; }
.audit-metric > i, .audit-live-dot { grid-column: 1; grid-row: 1; }
.audit-live-dot { justify-self: center; }
.audit-metric div { display: contents; }
.audit-metric strong { grid-column: 2; grid-row: 1; }
.audit-metric div > span, .audit-metric small { grid-column: 1 / -1; margin-top: 0; }
.audit-metric small { line-height: 1.5; }
.audit-panel-heading { flex-wrap: wrap; align-items: flex-start; }
.audit-panel-heading p { max-width: 78ch; }
.audit-session { grid-template-columns: 44px minmax(140px, 1.1fr) repeat(3, minmax(115px, 1fr)) minmax(150px, 1fr) auto; }
.audit-session div strong { overflow-wrap: anywhere; }
.audit-data-label { letter-spacing: .015em; text-transform: none; }
.audit-workspace :is(.audit-metric small, .audit-updated, .audit-data-label, .audit-session-person small, .audit-event-time span, .audit-event-context small, .audit-event-main code, .audit-recent-grid small, .audit-recent-grid span) { color: var(--sp-muted); }
.audit-panel-heading h2 { font-weight: 750; }
.audit-refresh { font-size: var(--sp-text-sm); }
.audit-recent-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.audit-recent-grid article { flex-wrap: wrap; }
.audit-filters { flex-wrap: wrap; gap: 14px; }
.audit-search { min-width: min(100%, 280px); }
.audit-filters :is(button, a) { min-height: 46px; }
.audit-search i { bottom: 16px; }
.audit-event { grid-template-columns: 100px 40px minmax(0, 1fr) minmax(150px, .35fr) 110px; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.audit-event-main > div { flex-wrap: wrap; }
.audit-event-main p { line-height: 1.65; }
.audit-event-context small, .audit-session code, .audit-event-main code { white-space: normal; overflow-wrap: anywhere; }
.audit-event-result details div { max-width: calc(100vw - 72px); }

/* More legible calendar labels without enlarging the calendar header. */
.oc-workspace .fc .fc-timegrid-slot { height: 26px; }
.oc-workspace .oc-button { min-height: 42px; white-space: normal; }
.oc-workspace .oc-icon-button { min-width: 42px; }
.oc-toolbar-tools, .oc-page-actions { flex-wrap: wrap; }
.pt-row .pt-track { min-height: 90px; }
.pt-bar { height: 78px; line-height: 1.4; }
.pt-options :is(select, input) { height: auto; }
.dd-panel .dd-icon { width: 40px; height: 40px; }
.dd-select-row select { height: 44px; font-size: var(--sp-text-base); }
.sp-portal, .sp { font-size: var(--sp-text-base); }
.sp-portal .sp-bottom a { min-width: 0; }
.sp-portal .sp-bottom span { text-align: center; line-height: 1.3; }

@media (max-width: 1450px) {
    .audit-session { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
    .audit-session .audit-session-path, .audit-session > div:nth-of-type(3) { display: none; }
    .audit-event { grid-template-columns: 100px 36px minmax(0, 1fr) 100px; }
    .audit-event-context { display: none; }
}
@media (max-width: 1100px) {
    .lw-header { align-items: flex-start; }
    .cp-hero { flex-wrap: wrap; }
}
@media (max-width: 767px) {
    body.app-shell #content { padding: 18px 14px !important; }
    .audit-panel-heading, .audit-filters { padding-left: 18px; padding-right: 18px; }
    .audit-session { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .audit-session > div:not(.audit-session-person) { display: none; }
    .audit-event { grid-template-columns: 92px minmax(0, 1fr); padding: 18px 14px; gap: 10px; }
    .audit-event-icon { display: none; }
    .audit-event-main { grid-column: 2; }
    .audit-event-result { display: block; grid-column: 2; text-align: left; }
    .audit-event-result details div { left: 0; right: auto; max-width: calc(100vw - 180px); }
    .audit-event-type { display: inline-flex; }
    .audit-recent-details summary { padding: 16px 18px; }
    .audit-pagination { flex-wrap: wrap; gap: 12px; padding: 18px; }
    .app-shell #content :is(.li-stat, .mtw-stat, .qw-stat) { padding: 14px; }
    .oc-page-header { flex-wrap: wrap; }
    .report-tabs { flex-wrap: wrap; gap: 6px 18px; }
}
@media (max-width: 480px) {
    .li-summary, .mtw-summary, .qw-summary { grid-template-columns: minmax(0, 1fr); }
    .lw-header { flex-wrap: wrap; }
    .lw-header-actions { margin-left: auto; }
    .sp-portal .sp-bottom a { flex: 1; padding-left: 4px; padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .app-shell .btn { transition: none; }
}