:root, [data-bs-theme="light"] {
    --ew-primary: #1d3a6e;
    --ew-primary-hover: #15294f;
    --ew-accent: #1d3a6e;
    --ew-divider: #dfe6f1;
    --ew-primary-soft: #e1e8f5;
    --ew-surface: #ffffff;
    --ew-success: #2fb170;
    --ew-success-text: #17794a;
    --ew-success-soft: #dcf3e6;
    --ew-danger: #d64550;
    --ew-danger-soft: #fdeaec;
    --ew-warning: #9a6200;
    --ew-warning-soft: #fdf0d5;
    --ew-neutral-soft: #e9eef6;
    --ew-shadow: 0 1px 2px rgba(15, 27, 51, .05), 0 6px 20px rgba(15, 27, 51, .06);
    --bs-primary: #1d3a6e;
    --bs-primary-rgb: 29, 58, 110;
    --bs-link-color: #1d3a6e;
    --bs-link-color-rgb: 29, 58, 110;
    --bs-link-hover-color: #15294f;
    --bs-body-bg: #f2f5fa;
    --bs-body-color: #0f1b33;
    --bs-body-color-rgb: 15, 27, 51;
    --bs-secondary-color: #667799;
    --bs-tertiary-bg: #e9eef6;
    --bs-border-color: #dfe6f1;
    --bs-success: #2fb170;
    --bs-danger: #d64550;
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: 1rem;
}
[data-bs-theme="dark"] {
    --ew-primary: #2f4061;
    --ew-primary-hover: #3b5078;
    --ew-accent: #9fb6e6;
    --ew-primary-soft: #1b2433;
    --ew-surface: #060911;
    --ew-divider: #1b1e28;
    --ew-success: #2fb170;
    --ew-success-text: #7fe0b0;
    --ew-success-soft: #0f2a20;
    --ew-danger: #ff8a90;
    --ew-danger-soft: #33181d;
    --ew-warning: #e8b95a;
    --ew-warning-soft: #2b2410;
    --ew-neutral-soft: #1b1e28;
    --ew-shadow: 0 0 0 1px rgba(255, 255, 255, .04);
    --bs-primary: #2f4061;
    --bs-primary-rgb: 47, 64, 97;
    --bs-link-color: #9fb6e6;
    --bs-link-color-rgb: 159, 182, 230;
    --bs-link-hover-color: #c0d0f2;
    --bs-body-bg: #000002;
    --bs-body-color: #e8eaf2;
    --bs-body-color-rgb: 232, 234, 242;
    --bs-secondary-color: #b9bfd0;
    --bs-tertiary-bg: #060911;
    --bs-border-color: #3d4048;
    --bs-success: #2fb170;
    --bs-danger: #ff8a90;
}

body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
main { padding-top: 1.25rem; padding-bottom: 1.25rem; }
a { text-decoration: none; }

.card {
    --bs-card-bg: var(--ew-surface);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-bg: transparent;
    box-shadow: var(--ew-shadow);
}
.card-header, .card-footer { border-color: var(--ew-divider); }
.table { --bs-table-border-color: var(--ew-divider); }
.list-group { --bs-list-group-border-color: var(--ew-divider); }
.dropdown-menu { --bs-dropdown-bg: var(--ew-surface); --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-link-hover-bg: var(--ew-neutral-soft); --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-color: var(--bs-body-color); }
.modal-content { --bs-modal-bg: var(--ew-surface); --bs-modal-border-color: var(--bs-border-color); }
.shadow-sm { box-shadow: var(--ew-shadow) !important; }
.table { --bs-table-bg: transparent; }
.table > thead.table-light {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-secondary-color);
    --bs-table-border-color: var(--bs-border-color);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.table > thead th { white-space: nowrap; font-weight: 600; }
.form-label { font-size: .8rem; color: var(--bs-secondary-color); margin-bottom: .2rem; }
.form-control, .form-select { background-color: var(--ew-surface); border-color: var(--bs-border-color); border-radius: .75rem; }
.form-control:focus, .form-select:focus { border-color: var(--ew-accent); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }
.input-group-text { background-color: var(--ew-surface); border-color: var(--bs-border-color); }

.btn { border-radius: .75rem; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--ew-primary);
    --bs-btn-border-color: var(--ew-primary);
    --bs-btn-hover-bg: var(--ew-primary-hover);
    --bs-btn-hover-border-color: var(--ew-primary-hover);
    --bs-btn-active-bg: var(--ew-primary-hover);
    --bs-btn-active-border-color: var(--ew-primary-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-bg: var(--ew-neutral-soft);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--ew-neutral-soft);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-border-color: var(--bs-border-color);
}
.btn-outline-primary { --bs-btn-color: var(--ew-accent); --bs-btn-border-color: var(--ew-accent); --bs-btn-hover-bg: var(--ew-primary); --bs-btn-hover-border-color: var(--ew-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ew-primary); --bs-btn-active-color: #fff; }
.btn-success { --bs-btn-bg: var(--ew-success); --bs-btn-border-color: var(--ew-success); --bs-btn-hover-bg: var(--ew-success); --bs-btn-hover-border-color: var(--ew-success); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.text-bg-primary { background-color: var(--ew-primary-soft) !important; color: var(--ew-accent) !important; }
.text-bg-success { background-color: var(--ew-success-soft) !important; color: var(--ew-success-text) !important; }
.text-bg-danger { background-color: var(--ew-danger-soft) !important; color: var(--ew-danger) !important; }
.text-bg-warning { background-color: var(--ew-warning-soft) !important; color: var(--ew-warning) !important; }
.text-bg-secondary { background-color: var(--ew-neutral-soft) !important; color: var(--bs-secondary-color) !important; }
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }

.topbar { background: var(--ew-surface); box-shadow: var(--ew-shadow); }
.topbar .brand { color: var(--ew-accent); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.topbar .nav-link { color: var(--bs-secondary-color); font-weight: 500; border-radius: 999px; padding: .4rem .9rem; }
.topbar .nav-link:hover { color: var(--bs-body-color); background: var(--ew-neutral-soft); }
.topbar .nav-link.active { color: var(--ew-accent); background: var(--ew-primary-soft); }
.topbar .dropdown-menu { border: 0; border-radius: 1rem; box-shadow: var(--ew-shadow); background: var(--ew-surface); }
.topbar .navbar-text { color: var(--bs-secondary-color); }

.stat {
    background: var(--ew-surface);
    border-radius: 1rem;
    box-shadow: var(--ew-shadow);
    padding: .65rem .9rem;
    color: var(--bs-body-color);
    display: block;
    border: 2px solid transparent;
    transition: transform .08s;
}
.stat:hover { transform: translateY(-1px); }
.stat.on { border-color: var(--ew-accent); }
.stat .n { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.stat .l { font-size: .75rem; color: var(--bs-secondary-color); }

.joblist { min-height: 120px; }
.jobrow {
    display: block;
    padding: .7rem .9rem;
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--ew-divider);
    cursor: pointer;
}
.jobrow:hover { background: var(--ew-neutral-soft); }
.jobrow.on { background: var(--ew-primary-soft); box-shadow: inset 3px 0 0 var(--ew-accent); }
.jobrow .nm { font-weight: 600; }
.jobrow .sub { font-size: .8rem; color: var(--bs-secondary-color); }
.jobrow .amt { font-weight: 700; }
.avatar {
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ew-primary-soft); color: var(--ew-accent); font-weight: 700; font-size: .85rem; flex: none;
}
.detail { position: static; }
.detail iframe { width: 100%; height: 900px; border: 0; border-radius: 1rem; background: var(--bs-body-bg); display: block; }
.detail .empty { height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--bs-secondary-color); }
.embedded main { padding: 1rem; }
.alert.validation-summary-valid { display: none; }

.card .dt-container .dt-layout-row { padding: .5rem .75rem; margin: 0; }
.card .dt-container .dt-layout-row:has(table) { padding: 0; }
table.grid tbody tr:hover { cursor: pointer; }
.savebar { position: sticky; bottom: 0; z-index: 10; background: var(--bs-body-bg); }

@media print {
    .dt-search, .dt-length, .dt-paging, .dt-info { display: none !important; }
    body { background: #fff !important; }
    .no-print { display: none !important; }
    main { padding: 0 !important; }
}

.pagebar { position: sticky; top: 0; z-index: 20; background: var(--bs-body-bg); padding: .5rem 0; margin-bottom: .5rem; }

.shell { display: block; }
.pane-right { display: none; }
.splitter { display: none; }
@media (min-width: 992px) {
    .app-fixed, .app-fixed body { height: 100%; overflow: hidden; }
    .app-fixed body { display: flex; flex-direction: column; }
    .app-fixed main { flex: 1 1 auto; min-height: 0; padding-bottom: .75rem; overflow: hidden; display: flex; flex-direction: column; }
    .shell { display: flex; flex: 1 1 auto; min-height: 0; }
    .pane-left { flex: 0 0 420px; min-width: 0; overflow-y: auto; padding: 0 .25rem 1rem 0; }
    .splitter { display: block; flex: 0 0 10px; cursor: col-resize; margin: 0 2px; position: relative; }
    .splitter::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--bs-border-color); border-radius: 2px; }
    .splitter:hover::after, .shell.dragging .splitter::after { background: var(--ew-accent); }
    .pane-right { display: block; flex: 1 1 0; min-width: 0; }
    .pane-right iframe { width: 100%; height: 100%; border: 0; border-radius: 1rem; background: var(--bs-body-bg); display: block; }
    .shell.dragging { user-select: none; }
    .shell.dragging iframe { pointer-events: none; }
}

.thumb { width: 72px; height: 72px; border-radius: .75rem; overflow: hidden; padding: 0; border: 0; background: var(--ew-neutral-soft); display: block; cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { box-shadow: 0 0 0 2px var(--ew-accent); }
.thumb.add { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--bs-border-color); background: transparent; color: var(--bs-secondary-color); }
.thumb.add:hover { color: var(--ew-accent); border-color: var(--ew-accent); }