:root {
    --navy-950: #071b2d;
    --navy-900: #0b2942;
    --navy-800: #123c5b;
    --teal-600: #0a8fa5;
    --teal-500: #14a3ba;
    --teal-300: #7edbdc;
    --ink: #102f4c;
    --muted: #667e90;
    --line: #dfe7ed;
    --surface: #fff;
    --canvas: #f3f6fa;
    --success: #2aa77f;
    --danger: #ce4556;
    --shadow-sm: 0 4px 18px rgba(13,44,67,.06);
    --shadow-md: 0 16px 45px rgba(13,44,67,.10);
}

html, body { min-height: 100%; font-family: Inter,Aptos,"Segoe UI Variable","Segoe UI",sans-serif; color: var(--ink); background: var(--canvas); }
body { margin: 0; }
a,.btn-link { color: #087f93; }
h1,h2,h3,h4,h5,h6 { color: var(--ink); font-weight: 720; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem,3vw,2.75rem); }
h1:focus { outline: none; }
p { color: var(--muted); }
.eyebrow,.customer-kicker { color: var(--teal-600); font-size: .72rem; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.page-heading { margin-bottom: 1.6rem; }
.page-heading h1,.page-heading h2 { margin: .35rem 0 .55rem; }
.page-heading p { margin: 0; font-size: 1rem; }

.home-heading { text-align: center; }
.portal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.portal-card { min-height: 118px; padding: 1.35rem; display: flex; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: white; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.portal-card:hover { color: var(--ink); border-color: #b8dadd; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.portal-card.featured { color: white; border-color: transparent; background: linear-gradient(130deg,#0d3652,#0b2942); }
.portal-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--teal-600); background: #e9f7f8; font-size: 1.2rem; font-weight: 750; }
.portal-content { min-width: 0; flex: 1; }
.portal-content strong,.portal-content small { display: block; }
.portal-content strong { font-size: .93rem; }
.portal-content small { margin-top: .35rem; color: #788d9b; font-size: .75rem; line-height: 1.4; }
.portal-card.featured .portal-content small { color: #a9c7d4; }
.portal-arrow { color: #86a0ae; font-size: 1.25rem; transition: transform .18s ease; }
.portal-card:hover .portal-arrow { transform: translateX(4px); }
.portal-loading { padding: 3rem; color: #708794; text-align: center; }

.card,.detail-card { border: 1px solid var(--line) !important; border-radius: 18px !important; background: white; box-shadow: var(--shadow-sm) !important; }
.card-body { padding: 1.5rem; }
.btn { border-radius: 11px; font-weight: 680; letter-spacing: -.01em; transition: transform .15s ease,box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary,.btn-success { color: white; border-color: transparent; background: linear-gradient(135deg,var(--teal-600),#08778f); box-shadow: 0 8px 20px rgba(10,143,165,.18); }
.btn-primary:hover,.btn-primary:focus,.btn-success:hover,.btn-success:focus { color: white; border-color: transparent; background: linear-gradient(135deg,#087f93,#06677d); }
.btn-outline-primary { color: #087f93; border-color: #8bcbd1; }
.btn-outline-primary:hover { color: white; border-color: var(--teal-600); background: var(--teal-600); }
.btn-outline-secondary { color: #3c6074; border-color: var(--line); background: white; }
.btn-danger { border-color: var(--danger); background: var(--danger); }
.btn-lg { padding: .85rem 1.35rem; font-size: .9rem; }
.btn:focus,.btn:active:focus,.btn-link.nav-link:focus,.form-control:focus,.form-select:focus,.form-check-input:focus { box-shadow: 0 0 0 .22rem rgba(20,163,186,.16); }

.form-control,.form-select { min-height: 44px; border-color: #d8e2e8; border-radius: 10px; color: var(--ink); background-color: white; }
.form-control:focus,.form-select:focus { border-color: #60c2c8; }
.form-label,label { color: #36556b; font-size: .82rem; font-weight: 650; }
.form-check-input:checked { border-color: var(--teal-600); background-color: var(--teal-600); }
.form-check.border { border-color: #d8e7e9 !important; border-radius: 13px !important; background: #eff9f9; }

.table-responsive { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow-sm); }
.table { margin-bottom: 0; color: #294a61; }
.table > :not(caption) > * > * { padding: .9rem 1rem; border-bottom-color: #e7edf1; vertical-align: middle; }
.table thead th { color: #6c8291; background: #f7f9fb; font-size: .68rem; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr { transition: background .15s ease; }
.table tbody tr:hover { background: #f3fafa; }
.table a { color: #187f91; font-weight: 680; text-decoration: none; }
.icom-table-primary-link { background: transparent; border: 0; color: #187f91; cursor: pointer; font: inherit; font-weight: 680; padding: 0; text-align: left; text-decoration: none; }
.icom-table-primary-link:hover,.icom-table-primary-link:focus { color: #0a6675; text-decoration: underline; }
.icom-table-primary-link:focus-visible { border-radius: .2rem; outline: .18rem solid rgba(20,163,186,.22); outline-offset: .12rem; }
.badge { border-radius: 999px; padding: .45rem .65rem; font-weight: 700; }
.text-bg-primary { background-color: #087f93 !important; }
.text-bg-info { color: #075467 !important; background-color: #cceff1 !important; }
.text-bg-success { background-color: #2a9b7b !important; }
.alert { padding: 1rem 1.1rem; border: 0; border-radius: 14px; }
.alert-info { color: #176074; background: #e1f5f7; }
.alert-success { color: #176348; background: #dff3e9; }
.alert-warning { color: #775613; background: #fff3d6; }
.alert-danger { color: #8b2935; background: #fbe1e4; }
.text-muted { color: var(--muted) !important; }

.customer-filter { background: white !important; border-color: var(--line) !important; border-radius: 16px !important; box-shadow: var(--shadow-sm); }
.customer-table-wrap { border-color: var(--line) !important; border-radius: 16px !important; }
.customer-table-wrap thead th { color: #6c8291 !important; background: #f7f9fb !important; }
.customer-heading h1,.customer-detail-heading h1 { color: var(--ink) !important; }
.detail-card h2 { color: var(--ink) !important; }
.detail-card dt { color: var(--muted) !important; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--success); }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); }
.blazor-error-boundary { padding: 1rem; border-radius: 12px; color: white; background: var(--danger); }

@media (max-width: 700px) {
    .portal-grid { grid-template-columns: 1fr; }
    .table-responsive { overflow-x: auto; }
}

/* Global, because Blazor input components do not reliably inherit scoped descendant selectors. */
.icom-important-field {
    background-color: #fff3b8 !important;
    border-color: #e0a000 !important;
    box-shadow: inset .22rem 0 0 #e0a000, 0 0 0 .15rem rgba(224, 160, 0, .12) !important;
}

.icom-inactive-employee {
    color: #c62828 !important;
    font-weight: 700;
}

select option.icom-inactive-employee {
    background-color: #fff0f0 !important;
    color: #c62828 !important;
    font-weight: 700;
}

select.icom-inactive-employee {
    background-color: #fff7f7;
    border-color: #c62828;
}

th.icom-sortable-header {
    cursor: pointer;
    padding-right: 1.45rem;
    position: relative;
    user-select: none;
}

th.icom-sortable-header::after {
    color: #7890a5;
    content: "↕";
    font-size: .72rem;
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
}

th.icom-sortable-header[aria-sort="ascending"]::after { color: #008ca3; content: "▲"; }
th.icom-sortable-header[aria-sort="descending"]::after { color: #008ca3; content: "▼"; }
th.icom-sortable-header:focus-visible { outline: 2px solid #57b9c8; outline-offset: -2px; }

.table thead th > button:not(.btn) {
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    padding: 0;
    text-align: inherit;
}

.table thead th > button:not(.btn):focus-visible {
    outline: 2px solid #57b9c8;
    outline-offset: 2px;
}

.icom-rich-editor { overflow: hidden; border: 1px solid #d8e2e8; border-radius: 10px; background: #fff; }
.icom-rich-editor:focus-within { border-color: #60c2c8; box-shadow: 0 0 0 .22rem rgba(20,163,186,.16); }
.icom-rich-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem; border-bottom: 1px solid #e1e8ec; background: #f7fafb; }
.icom-rich-toolbar button { min-height: 30px; padding: .25rem .55rem; border: 1px solid #cbd9df; border-radius: 7px; color: #294a61; background: #fff; font-size: .76rem; }
.icom-rich-toolbar button:hover { border-color: #60c2c8; background: #f0fbfc; }
.icom-rich-toolbar .highlight-yellow { background: #fff3a3; }
.icom-rich-toolbar .highlight-red { background: #ffc7ce; color: #8b1e2c; }
.icom-rich-input { overflow-y: auto; padding: .7rem .8rem; outline: none; color: var(--ink); line-height: 1.5; white-space: normal; }
.icom-rich-input.invalid { box-shadow: inset 0 0 0 1px var(--danger); }
.icom-rich-content { line-height: 1.5; white-space: normal; }
.icom-rich-content mark { padding: .04em .12em; border-radius: .18em; background: #fff3a3; color: inherit; }
.icom-rich-content mark[data-highlight="red"] { background: #ffc7ce; color: #8b1e2c; }