/* OFES interface foundations. Shared by the Tailwind and student portals.
   Keep business state in PHP/API; these tokens and components only present it. */
:root {
    color-scheme: light;
    --ofes-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --ofes-bg: #f5f6f8;
    --ofes-surface: #fff;
    --ofes-subtle: #f8fafc;
    --ofes-text: #172334;
    --ofes-muted: #536174;
    --ofes-border: #dce2e9;
    --ofes-primary: #800000;
    --ofes-primary-hover: #620000;
    --ofes-primary-soft: #fbefef;
    --ofes-gold: #8a6214;
    --ofes-success: #166044;
    --ofes-success-soft: #edf8f2;
    --ofes-warning: #85500c;
    --ofes-warning-soft: #fff7e6;
    --ofes-danger: #b42332;
    --ofes-danger-soft: #fff1f2;
    --ofes-info: #24569a;
    --ofes-info-soft: #edf4fd;
    --ofes-radius-sm: 6px;
    --ofes-radius: 8px;
    --ofes-radius-lg: 12px;
    --ofes-control-height: 42px;
    --ofes-touch-target: 44px;
    --ofes-content-max: 1800px;
    --ofes-shadow: 0 1px 3px rgb(23 35 52 / 4%), 0 4px 14px rgb(23 35 52 / 3%);
    --ofes-shadow-dialog: 0 24px 70px rgb(23 35 52 / 20%);
    --ofes-space-1: 4px;
    --ofes-space-2: 8px;
    --ofes-space-3: 12px;
    --ofes-space-4: 16px;
    --ofes-space-5: 20px;
    --ofes-space-6: 24px;
    --ofes-duration: 150ms;
    --csu-maroon-700: #620000;
    --csu-maroon-600: var(--ofes-primary);
    --csu-maroon-500: #9c3030;
    --csu-gold-500: #e8c975;
    --csu-gold-400: var(--ofes-gold);
    --csu-gradient: linear-gradient(120deg, #720000, #8b1717);
    --ofes-primary-gradient: linear-gradient(135deg, #650000 0%, #800000 52%, #a31d1d 100%);
    --ofes-primary-gradient-hover: linear-gradient(135deg, #570000 0%, #720000 52%, #921616 100%);
    --csu-surface: var(--ofes-surface);
    --csu-surface-strong: var(--ofes-surface);
    --csu-border: var(--ofes-border);
    --csu-muted: var(--ofes-muted);
}

html { scrollbar-gutter: stable; }
.ofes-app { min-width: 0; background: var(--ofes-bg); color: var(--ofes-text); font-family: var(--ofes-font); font-size: 14px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.ofes-app ::selection { background: #ead0d0; color: #3d0707; }
.ofes-app :where(input, textarea) { caret-color: var(--ofes-primary); }
.ofes-app { scrollbar-color: #aeb9c6 #eef1f4; scrollbar-width: thin; }
.ofes-app *, .ofes-app *::before, .ofes-app *::after { box-sizing: border-box; }
.ofes-app :where(h1, h2, h3, p) { overflow-wrap: break-word; }
.ofes-app h1 { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.9rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.ofes-app :where(h2, h3) { letter-spacing: -.015em; }
.ofes-app .font-extrabold, .ofes-app .font-black { font-weight: 700; }
.ofes-app .shadow-soft { box-shadow: var(--ofes-shadow); }
.ofes-app .rounded-2xl { border-radius: var(--ofes-radius-lg); }
.ofes-app .rounded-xl { border-radius: var(--ofes-radius); }
.ofes-app :where(.text-slate-400, .text-slate-500) { color: var(--ofes-muted); }
.ofes-app :where(.text-slate-400, .text-slate-500).material-symbols-outlined { color: #6a7788; }
.ofes-app .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 24; vertical-align: middle; flex-shrink: 0; line-height: 1; }
.ofes-app :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #386cac !important; outline-offset: 3px; box-shadow: none;
}
.ofes-app :where(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
.ofes-app :where(button, [role="button"], a.inline-flex) { transition: background-color var(--ofes-duration), border-color var(--ofes-duration), box-shadow var(--ofes-duration), color var(--ofes-duration); }
.ofes-app :where(button, [role="button"]) { cursor: pointer; }
.ofes-app :where(button:disabled, input:disabled, select:disabled, textarea:disabled, [aria-disabled="true"]) { cursor: not-allowed; opacity: .6; }
.ofes-app :where(input:disabled, select:disabled, textarea:disabled) { background: #edf0f4; color: #344256; opacity: 1; }
.ofes-app [hidden] { display: none !important; }
/* Screen-reader-only text inside horizontally scrolling tables stays in flow: an absolute .sr-only span escapes the scroll box and widens the page. */
.ofes-app :where(.overflow-x-auto, .ofes-table-scroll, .sec-table-wrap) .sr-only { position: static; clip-path: inset(50%); }
/* Search and pagination strip: keep it clear of the card rule above and the table below. */
.ofes-app .ofes-table-toolbar { margin: .5rem 0 1.25rem; }
.ofes-app .ofes-table-search input, .ofes-app .ofes-table-toolbar select { min-height: var(--ofes-control-height); }
.ofes-app .ofes-table-search input:focus-visible, .ofes-app .ofes-table-toolbar select:focus-visible { border-color: rgba(128,0,0,.35); }

/* The mobile menu button is icon-only; keep a 44px touch target. */
.ofes-app #twOpen { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
.ofes-muted { color: var(--ofes-muted); }
.ofes-icon { font-size: 20px; }

/* Shell: one navigation system across authorized staff roles. */
.ofes-skip-link { position: fixed; left: 16px; top: 10px; z-index: 10001; transform: translateY(-160%); padding: 12px 18px; background: var(--ofes-primary); color: white; border-radius: var(--ofes-radius); font-weight: 600; }
.ofes-skip-link:focus { transform: translateY(0); }
.ofes-sidebar { background: #fff; box-shadow: none; }
.ofes-sidebar .twBrandText { min-width: 0; flex: 1; }
.ofes-sidebar .twBrandText > :last-child { font-size: 10px; letter-spacing: .035em; color: var(--ofes-muted) !important; line-height: 1.5; }
.ofes-sidebar nav { padding: 20px 14px; }
.ofes-sidebar .twNavSectionLabel { margin-bottom: 10px; font-size: 10px; letter-spacing: .12em; }
.ofes-nav-item { min-height: 42px; border-radius: var(--ofes-radius); border: 1px solid transparent; }
.ofes-nav-item[aria-current="page"] { background: var(--ofes-primary-soft); color: var(--ofes-primary); border-color: #efd5d5; font-weight: 650; }
.ofes-nav-item[aria-current="page"] .material-symbols-outlined { color: var(--ofes-primary); }
.ofes-topbar { background: #fff; backdrop-filter: none; }
.ofes-topbar-actions { gap: 8px; }
.ofes-topbar-actions > a { min-height: 38px; }
.ofes-main { min-width: 0; max-width: var(--ofes-content-max); margin-inline: auto; padding-top: 24px; padding-bottom: 36px; }
.ofes-main:focus { outline: none; }
.ofes-breadcrumbs { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; margin: -4px 0 18px; }
.ofes-breadcrumbs ol { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--ofes-muted); font-size: 13px; font-weight: 700; }
.ofes-breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.ofes-breadcrumbs li:last-child { overflow: hidden; color: var(--ofes-text); text-overflow: ellipsis; white-space: nowrap; }
.ofes-breadcrumbs li > .material-symbols-outlined { margin-inline: 3px; font-size: 17px; color: #94a3b8; }
.ofes-breadcrumbs a { color: var(--csu-maroon-700); text-decoration: none; text-underline-offset: 3px; }
.ofes-breadcrumbs a:hover { text-decoration: underline; }
.ofes-context-back { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--ofes-border); border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(15, 23, 42, .06); font-size: 13px; font-weight: 800; }
.ofes-context-back .material-symbols-outlined { font-size: 18px; }
.ofes-context-back:focus-visible, .ofes-breadcrumbs a:focus-visible { outline: 3px solid rgba(128, 0, 0, .18); outline-offset: 2px; }
.ofes-portal #layoutSidenav, .ofes-portal #layoutSidenav_content { display: block; min-width: 0; }
.ofes-portal #layoutSidenav_nav { display: none !important; }
.ofes-portal .container-xl { width: 100%; max-width: 1440px; margin-inline: auto; }
.ofes-portal .mt-n10 { margin-top: 0 !important; }
.ofes-portal .row { display: flex; flex-wrap: wrap; gap: 16px; }
.ofes-portal [class^="col-"], .ofes-portal [class*=" col-"] { flex: 1 1 260px; min-width: min(260px, 100%); }

/* Explicit header hook shared by management, report and overview templates. */
.ofes-app .ofes-page-header { background: #fff !important; color: var(--ofes-text); border: 1px solid var(--ofes-border); border-radius: var(--ofes-radius-lg); box-shadow: none; padding: 22px 24px; }
.ofes-page-header h1 { color: var(--ofes-text) !important; margin-top: 6px; }
.ofes-page-header :where(p, [class*="text-white/"]) { color: var(--ofes-muted); }
.ofes-page-header .text-white { color: var(--ofes-text); }
.ofes-page-header :where([class*="bg-white/"], [class*="border-white/"]) { background: var(--ofes-subtle); border-color: var(--ofes-border); color: var(--ofes-muted); }
.ofes-page-header :where(a, button)[style*="csu-gradient"] { color: white; }
.ofes-page-header :where(a, button)[style*="csu-gradient"] .text-white { color: white; }
.ofes-page-header > :where(.material-symbols-outlined) { color: var(--ofes-primary); }
.ofes-panel, .ofes-app .card { background: #fff; border: 1px solid var(--ofes-border); border-radius: var(--ofes-radius-lg); box-shadow: var(--ofes-shadow); min-width: 0; }
.ofes-section-heading, .ofes-app .card-header { padding: 16px 20px; border-bottom: 1px solid var(--ofes-border); font-size: 14px; font-weight: 650; }
.ofes-app .card-body { padding: 20px; }
.ofes-app .card-footer { padding: 14px 20px; border-top: 1px solid var(--ofes-border); background: var(--ofes-subtle); }
.ofes-app .page-header { background: var(--csu-gradient); color: white; border-radius: var(--ofes-radius-lg); overflow: hidden; }
.ofes-app .page-header-title { font-weight: 700; letter-spacing: -.025em; }
.ofes-app .page-header-subtitle { opacity: .9; }
.ofes-portal .page-header .page-header-content { padding-block: 20px !important; }

/* Action hierarchy. Legacy aliases share these definitions. */
.ofes-btn, .ofes-app .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--ofes-control-height); padding: 9px 14px; border: 1px solid var(--ofes-border);
    border-radius: var(--ofes-radius); background: white; color: var(--ofes-text);
    font: 600 13px/1.4 var(--ofes-font); text-decoration: none; text-align: center;
}
.ofes-btn:hover, .ofes-app .btn:hover { background: #f1f4f8; border-color: #b6c1ce; text-decoration: none; }
.ofes-btn--primary,
.ofes-app :is(.btn-primary, .ofes-primary-action, .sec-btn.is-primary, .dio-btn.primary, .mp-btn.is-primary, .dg-button.primary) {
    color: #fff;
    background: var(--ofes-primary-gradient);
    border-color: transparent;
    box-shadow: 0 6px 16px rgb(101 0 0 / 16%);
}
.ofes-btn--primary:hover,
.ofes-app :is(.btn-primary, .ofes-primary-action, .sec-btn.is-primary, .dio-btn.primary, .mp-btn.is-primary, .dg-button.primary):hover {
    color: #fff;
    background: var(--ofes-primary-gradient-hover);
    border-color: transparent;
    box-shadow: 0 8px 20px rgb(101 0 0 / 22%);
}
.ofes-btn--primary:active,
.ofes-app :is(.btn-primary, .ofes-primary-action, .sec-btn.is-primary, .dio-btn.primary, .mp-btn.is-primary, .dg-button.primary):active {
    color: #fff;
    background: #650000;
    box-shadow: 0 3px 9px rgb(101 0 0 / 18%);
}
.ofes-app .ofes-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--ofes-control-height);
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--ofes-radius);
    font: 650 13px/1.4 var(--ofes-font);
    text-decoration: none;
    white-space: nowrap;
}
.ofes-btn--secondary, .ofes-app :is(.btn-secondary, .btn-outline-primary, .btn-outline-secondary) { background: white; color: var(--ofes-text); border-color: #c6cfda; }
.ofes-btn--ghost, .ofes-app .btn-link { color: var(--ofes-primary); border-color: transparent; background: transparent; }
.ofes-btn--success, .ofes-app .btn-success { color: #fff; background: var(--ofes-success); border-color: var(--ofes-success); }
.ofes-btn--success:hover, .ofes-app .btn-success:hover { color: #fff; background: #0e4c34; }
.ofes-btn--warning, .ofes-app .btn-warning { color: var(--ofes-warning); background: var(--ofes-warning-soft); border-color: #e8c58a; }
.ofes-btn--danger, .ofes-app :is(.btn-danger, .btn-outline-danger) { color: var(--ofes-danger); background: var(--ofes-danger-soft); border-color: #eeb8bf; }
.ofes-btn--danger:hover, .ofes-app :is(.btn-danger, .btn-outline-danger):hover { color: #981b2a; background: #ffe2e5; border-color: #da929b; }
.ofes-btn--sm, .ofes-app .btn-sm { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.ofes-btn--icon, .ofes-app .btn-icon { width: 36px; min-width: 36px; min-height: 36px; padding: 7px; }
.ofes-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ofes-portal :where(button, a).inline-flex:where(.rounded-xl, .rounded-lg) { min-height: 36px; font-weight: 600; font-size: 13px; }
.ofes-portal :where(button, a).inline-flex:where(.py-2\.5, .py-3) { min-height: 40px; padding-block: 9px; }
.ofes-portal :where(a, button)[title^="Delete"], .ofes-portal :where(a, button)[data-tw-confirm-ok="Delete"] { color: var(--ofes-danger) !important; background: var(--ofes-danger-soft) !important; border: 1px solid #eeb8bf; }

/* Form controls: labels remain visible, native validation and submission remain intact. */
.ofes-app :where(.form-label, .ofes-field-label) { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ofes-text); }
.ofes-app :where(.form-control, .form-select) { width: 100%; min-height: var(--ofes-control-height); padding: 9px 12px; border: 1px solid #c6cfda; border-radius: var(--ofes-radius); background-color: white; color: var(--ofes-text); font-size: 14px; font-weight: 400; line-height: 1.4; }
.ofes-app select.form-select { padding-right: 28px; }
/* A filter fixed by the account (a Dean's own campus and college) reads as settled, not editable. */
.ofes-app :where(.form-control, .form-select):disabled { background-color: #edf0f4; color: #344256; cursor: not-allowed; }
.ofes-app :where(input, select, textarea).rounded-xl { border-radius: var(--ofes-radius); min-height: var(--ofes-control-height); font-weight: 400; }
.ofes-app :where(input, textarea)::placeholder { color: #687688; opacity: 1; }
.ofes-app textarea.form-control { min-height: 100px; resize: vertical; }
.ofes-app :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--ofes-primary); width: 17px; height: 17px; flex-shrink: 0; }
.ofes-app input[type="file"] { padding: 8px; }
.ofes-app input[type="file"]::file-selector-button { padding: 7px 12px; margin-right: 12px; border: 1px solid #c6cfda; border-radius: 5px; background: var(--ofes-subtle); color: var(--ofes-text); font: inherit; cursor: pointer; }
.ofes-app :where(input, select, textarea)[aria-invalid="true"], .ofes-app .is-invalid { border-color: var(--ofes-danger); }
.ofes-app .invalid-feedback { color: var(--ofes-danger); font-size: 12px; margin-top: 5px; }
.ofes-app .input-group { display: flex; align-items: stretch; width: 100%; gap: 8px; }
.ofes-app .input-group .btn { flex-shrink: 0; }
.ofes-app .input-group > :where(input, select) { min-width: 0; }
.ofes-app .form-text, .ofes-help { color: var(--ofes-muted); font-size: 12px; line-height: 1.6; margin-top: 6px; }
.ofes-required { color: var(--ofes-danger); }

/* Tables: retain column semantics and horizontal scrolling on small screens. */
.ofes-table-wrap, .ofes-app .table-responsive { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--ofes-radius); }
.ofes-app :where(.table, .ofes-table) { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ofes-border); border-radius: var(--ofes-radius); font-size: 13px; }
.ofes-app :where(.table, .ofes-table) :where(th, td) { padding: 12px 14px; border-bottom: 1px solid #e6ebf0; vertical-align: middle; text-align: left; }
.ofes-app :where(.table, .ofes-table) thead th { font-size: 11px; font-weight: 650; line-height: 1.45; letter-spacing: .035em; text-transform: uppercase; color: #4b5b70; background: #f5f7fa; }
.ofes-app :where(.table, .ofes-table) tr:last-child td { border-bottom: 0; }
.ofes-app :where(.table, .ofes-table) tbody tr { transition: background-color var(--ofes-duration); }
.ofes-app :where(.table, .ofes-table) tbody tr:hover { background: #fafbfd; }
.ofes-app :where(.table, .ofes-table) tbody tr:focus-within { background: #f5f8fc; }
.ofes-app :where(.table, .ofes-table) .text-right { text-align: right; }
.ofes-app :where(.table, .ofes-table) .text-center { text-align: center; }
.ofes-app :where(.table, .ofes-table) caption { text-align: left; font-weight: 600; padding: 12px 0; color: var(--ofes-muted); }
.ofes-table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; gap: 12px; flex-wrap: wrap; }
.ofes-table-toolbar input { min-width: 0; }
.ofes-table-search { flex: 1 1 16rem; max-width: 26rem; }
.ofes-table-search input { width: 100%; }
.ofes-table-summary { color: var(--ofes-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ofes-page-hidden { display: none !important; }
.ofes-table-empty, .ofes-empty { padding: 36px 20px; text-align: center; color: var(--ofes-muted); }
.ofes-empty { border: 1px dashed #cdd5e0; border-radius: var(--ofes-radius-lg); background: var(--ofes-subtle); }
.ofes-empty .material-symbols-outlined { display: block; width: fit-content; margin: 0 auto 12px; padding: 12px; border-radius: 50%; background: #eaf0f6; color: #52677f; font-size: 26px; }
.ofes-empty h3 { font-size: 15px; font-weight: 650; color: var(--ofes-text); }
.ofes-empty p { max-width: 480px; margin: 6px auto 0; font-size: 13px; }
.ofes-metric { padding: 18px; border: 1px solid var(--ofes-border); background: #fff; border-radius: var(--ofes-radius-lg); font-variant-numeric: tabular-nums; }

/* Status labels include text; color is supplemental. */
.ofes-badge, .ofes-app .badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border: 1px solid #d6dee8; border-radius: 6px; background: #f0f3f7; color: #47566a; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ofes-app :is(.badge-success, .ofes-badge[data-status="active"], .ofes-badge[data-status="submitted"], .ofes-badge[data-status="completed"], .ofes-badge[data-status="restored"]) { color: var(--ofes-success); background: var(--ofes-success-soft); border-color: #b5ddc8; }
.ofes-app :is(.badge-warn, .badge-warning, .ofes-badge[data-status="pending"], .ofes-badge[data-status="unclassified"]) { color: var(--ofes-warning); background: var(--ofes-warning-soft); border-color: #ebd29c; }
.ofes-app :is(.badge-danger, .ofes-badge[data-status="dropped"], .ofes-badge[data-status="excluded"]) { color: var(--ofes-danger); background: var(--ofes-danger-soft); border-color: #eeb8bf; }
.ofes-app :is(.badge-info, .ofes-badge[data-status="shared"]) { color: var(--ofes-info); background: var(--ofes-info-soft); border-color: #c4d8f2; }
.ofes-app :is(.ofes-badge[data-status="part-time"], .ofes-badge[data-status="part_time"]) { color: #6847a0; background: #f3effb; border-color: #dcd0ef; }
.ofes-app :is(.badge-muted, .ofes-badge[data-status="inactive"], .ofes-badge[data-status="locked"], .ofes-badge[data-status="regular"]) { color: #47566a; background: #f0f3f7; border-color: #d6dee8; }
.ofes-app .progress { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: #e6ebf0; }
.ofes-app .progress-bar { height: 100%; border-radius: inherit; background: var(--ofes-primary); color: transparent; }
.ofes-app .bg-primary, .ofes-app .bg-gradient-primary-to-secondary { background: var(--ofes-primary) !important; color: white !important; }

/* Legacy Bootstrap dialogs and native dialogs keep their existing controllers. */
.ofes-portal .modal { position: fixed; inset: 0; z-index: 100; display: none; padding: 16px; overflow: hidden; background: rgb(23 35 52 / 40%); }
.ofes-portal .modal.show { display: block; }
.ofes-portal .modal-dialog { width: 100%; max-width: 900px; margin: 16px auto; display: flex; align-items: center; min-height: calc(100% - 32px); pointer-events: none; }
.ofes-portal .modal-content { width: 100%; pointer-events: auto; background: #fff; border: 1px solid var(--ofes-border); border-radius: var(--ofes-radius-lg); box-shadow: var(--ofes-shadow-dialog); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100dvh - 64px); animation: ofes-enter 150ms ease-out; }
.ofes-app .modal-header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; color: var(--ofes-text); border-bottom: 1px solid var(--ofes-border); }
.ofes-app .modal-title { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.ofes-app .modal-body { padding: 20px; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
.ofes-app .modal-footer { padding: 14px 20px; border-top: 1px solid var(--ofes-border); background: var(--ofes-subtle); display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ofes-portal .btn-close { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--ofes-radius); border: 1px solid var(--ofes-border); background: #fff; opacity: 1; position: relative; }
.ofes-portal .btn-close::before, .ofes-portal .btn-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: #536174; }
.ofes-portal .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ofes-portal .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ofes-portal .modal-backdrop { position: fixed; inset: 0; background: rgb(23 35 52 / 40%); z-index: 99; opacity: 0; }
.ofes-portal .modal-backdrop.show { opacity: 1; }
.ofes-app dialog { background: #fff; color: var(--ofes-text); border: 1px solid var(--ofes-border); border-radius: var(--ofes-radius-lg); box-shadow: var(--ofes-shadow-dialog); max-height: calc(100dvh - 32px); }
.ofes-app dialog[open] { animation: ofes-enter 150ms ease-out; }
.ofes-app dialog::backdrop { background: rgb(23 35 52 / 45%); }
.ofes-confirm-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; }
.ofes-dialog-body { padding: 24px; }
.ofes-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 24px; background: var(--ofes-subtle); border-top: 1px solid var(--ofes-border); }
.ofes-toast-container { position: fixed; right: 20px; top: 80px; z-index: 9999; width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; }
.ofes-toast { --ofes-toast-accent: var(--ofes-info); border-radius: var(--ofes-radius-lg); background: white; border: 1px solid color-mix(in srgb, var(--ofes-toast-accent) 45%, var(--ofes-border)); box-shadow: var(--ofes-shadow-dialog); animation: ofes-enter 150ms ease-out; }
.ofes-toast[data-tone="success"] { --ofes-toast-accent: var(--ofes-success); }
.ofes-toast[data-tone="error"] { --ofes-toast-accent: var(--ofes-danger); }
.ofes-toast[data-tone="warning"] { --ofes-toast-accent: var(--ofes-warning); }
.ofes-tooltip {
    position: fixed;
    z-index: 10050;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    padding: 7px 10px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 6px;
    background: #172334;
    color: #fff;
    box-shadow: 0 10px 28px rgb(15 23 42 / 24%);
    font: 600 12px/1.4 var(--ofes-font);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity var(--ofes-duration), transform var(--ofes-duration);
}
.ofes-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.ofes-app .alert { padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--ofes-border); border-radius: var(--ofes-radius); background: var(--ofes-subtle); }
.ofes-app .alert-success { color: var(--ofes-success); border-color: #b5ddc8; background: var(--ofes-success-soft); }
.ofes-app .alert-warning { color: var(--ofes-warning); border-color: #ebd29c; background: var(--ofes-warning-soft); }
.ofes-app :is(.alert-danger, .alert-error) { color: var(--ofes-danger); border-color: #eeb8bf; background: var(--ofes-danger-soft); }
.ofes-app .alert-info { color: var(--ofes-info); border-color: #c4d8f2; background: var(--ofes-info-soft); }

@keyframes ofes-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 768px) {
    .ofes-table-toolbar > .flex:first-child { flex: 1 1 32rem; flex-wrap: nowrap; }
    .ofes-table-toolbar > .flex:first-child .ofes-table-search { flex: 1 1 18rem; max-width: 22rem; }
    .ofes-table-toolbar > .flex:first-child > label:last-child { flex: 0 0 auto; }
}
@media (max-width: 767px) {
    .ofes-main { padding: 16px 12px max(28px, calc(env(safe-area-inset-bottom) + 20px)); }
    .ofes-breadcrumbs { align-items: flex-start; flex-direction: column; gap: 9px; margin-bottom: 14px; }
    .ofes-breadcrumbs ol { width: 100%; }
    .ofes-context-back { width: 100%; justify-content: center; }
    .ofes-app .ofes-page-header { padding: 18px 16px; }
    .ofes-app :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
    .ofes-app :where(.form-control, .form-select, .ofes-btn, .btn) { min-height: var(--ofes-touch-target); }
    .ofes-portal :where(button, a).inline-flex:where(.rounded-xl, .rounded-lg) { min-height: var(--ofes-touch-target); }
    .ofes-table-toolbar { align-items: stretch; }
    .ofes-table-toolbar > *, .ofes-table-search { flex: 1 1 100%; max-width: none; }
    .ofes-table-toolbar :where(select, button, .ofes-btn) { width: 100%; }
    .ofes-app :where(.table, .ofes-table) :where(th, td) { padding: 10px 12px; }
    .ofes-topbar > div { gap: 8px; padding-inline: 12px; }
    .ofes-topbar-actions { gap: 4px; }
    .ofes-topbar-actions > a { padding-inline: 10px; }
    .ofes-portal .modal { padding: 8px; }
    .ofes-portal .modal-dialog { margin: 0 auto; min-height: 100%; }
    .ofes-portal .modal-content { max-height: calc(100dvh - 16px); }
    .ofes-app :where(.modal-header, .modal-body, .modal-footer) { padding: 16px; }
    .ofes-app .modal-footer, .ofes-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    .ofes-app .modal-footer > *, .ofes-dialog-actions > * { width: 100%; }
    .ofes-toast-container { top: 76px; right: 16px; }
}
@media (pointer: coarse) {
    .ofes-app :where(.ofes-btn, .btn, .sec-btn, .dio-btn, .mp-btn, .dg-button, .twNavItem) { min-height: var(--ofes-touch-target); }
    .ofes-app :where(.btn-icon, .ofes-btn--icon, .dg-copy) { min-width: var(--ofes-touch-target); min-height: var(--ofes-touch-target); }
}
@media (prefers-reduced-motion: reduce) {
    .ofes-app *, .ofes-app *::before, .ofes-app *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .ofes-btn, .ofes-badge, .ofes-nav-item[aria-current="page"] { border: 1px solid ButtonText; }
}
@media print {
    .ofes-sidebar, .ofes-topbar, .ofes-skip-link, .ofes-toast-container, .ofes-table-toolbar { display: none !important; }
    .ofes-app { background: white; }
    .ofes-app .twContentColumn { padding-left: 0 !important; }
    .ofes-main { padding: 0; }
    .ofes-panel, .ofes-app .card { box-shadow: none; }
    .ofes-table-wrap { overflow: visible; }
}