:root {
    --ink: #222222;
    --muted: #737373;
    --line: #dedede;
    --paper: #ffffff;
    --canvas: #f5f5f3;
    --navy: #222222;
    --teal: #ee6012;
    --lime: #ff7a2c;
    --amber: #f5a623;
    --red: #dd4d4d;
    --blue: #45636f;
    --violet: #6d586f;
    font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    background: var(--canvas);
    font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
h1, h2, h3, h4, h5, h6, .button, .nav-item, .section-kicker { font-family: Montserrat, Arial, sans-serif; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    color: #eef8f5;
    background: radial-gradient(circle at 20% 86%, rgba(238, 96, 18, .22), transparent 34%), var(--navy);
}
.brand { display: grid; gap: 9px; color: white; text-decoration: none; padding: 0 6px 28px; }
.brand-logo-panel { display: block; padding: 10px 11px; border-radius: 10px; background: white; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.brand-logo { display: block; width: 100%; height: auto; }
.brand small, .signed-in strong, .signed-in small { display: block; }
.brand small { padding-left: 2px; color: #d3d3d3; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.25px; }
.primary-nav { display: grid; gap: 5px; }
.nav-item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    color: #b8cecb;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s, color .15s;
}
.nav-item:hover, .nav-item.active { color: white; background: rgba(255,255,255,.09); }
.nav-item.active::before { content: ""; position: absolute; left: -18px; width: 3px; height: 24px; border-radius: 0 3px 3px 0; background: var(--teal); }
.nav-icon { width: 22px; text-align: center; font-size: 17px; }
.nav-count { margin-left: auto; min-width: 25px; padding: 2px 7px; border-radius: 999px; color: var(--navy); background: var(--lime); font-size: 11px; font-weight: 800; text-align: center; }
.sidebar-foot { margin-top: auto; display: grid; gap: 13px; }
.signed-in { display: flex; align-items: center; gap: 10px; padding: 15px 9px 2px; border-top: 1px solid rgba(255,255,255,.1); }
.signed-in strong { font-size: 12px; color: white; }
.signed-in small { font-size: 11px; margin-top: 2px; color: #8eaaa7; }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: white; background: var(--teal); font-size: 11px; font-weight: 800; }
.avatar.small { width: 32px; height: 32px; border-radius: 50%; }
.green-bg { background: #c6efe4; }
.blue-bg { background: #dbeaf9; }
.amber-bg { background: #f9e8c7; }

.main-content { min-width: 0; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(12px); }
.topbar strong { display: block; font-size: 16px; }
.topbar .eyebrow { color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-button { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; }
.notification-dot { position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--red); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; font-weight: 750; cursor: pointer; }
.button-primary { color: white; background: var(--teal); box-shadow: 0 7px 17px rgba(238,96,18,.2); }
.button-secondary { border: 1px solid var(--line); background: white; }
.full-width { width: 100%; }
.text-button { border: 0; background: transparent; color: #c94a06; font-weight: 750; cursor: pointer; }

.page-content { width: min(1500px, 100%); margin: auto; padding: 31px 34px 52px; }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.hero h1 { margin: 5px 0 8px; max-width: 800px; font-size: clamp(27px, 3vw, 43px); line-height: 1.05; letter-spacing: -1.6px; }
.hero p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.55; }
.section-kicker { color: #c94a06; font-size: 10px; font-weight: 850; letter-spacing: 1.5px; text-transform: uppercase; }
.live-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #f2c7ae; border-radius: 999px; color: #9e430f; background: #fff3ec; font-size: 11px; font-weight: 700; }
.live-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(238,96,18,.12); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 7px 24px rgba(20,49,53,.035); }
.metric-card { min-height: 145px; padding: 19px 20px; }
.metric-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 650; }
.metric-symbol { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; font-weight: 800; }
.metric-symbol.teal { color: #c94a06; background: #fff0e7; }
.metric-symbol.green { color: #25764b; background: #e2f2e7; }
.metric-symbol.amber { color: #956111; background: #fff1d7; }
.metric-symbol.violet { color: #5c4fac; background: #eae6fb; }
.metric-card > strong { display: block; margin: 11px 0 5px; font-size: 31px; line-height: 1; letter-spacing: -1px; }
.metric-card small { color: var(--muted); font-size: 11px; }
.metric-card small b { color: var(--ink); }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(285px, .75fr); gap: 16px; margin-bottom: 16px; }
.panel { overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; }
.panel-heading h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.35px; }
.exception-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 130px 28px; align-items: center; gap: 12px; padding: 16px 22px; border-top: 1px solid #edf1f0; }
.status-orb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 14px; font-weight: 900; }
.urgent .status-orb { color: #b33434; background: #fde7e7; }
.warning .status-orb { color: #97600d; background: #fff0d3; }
.info .status-orb { color: #2364a5; background: #e6f0fa; }
.exception-main > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.exception-main strong { font-size: 13px; }
.exception-main p { margin: 4px 0 2px; color: var(--ink); font-size: 12px; }
.exception-main small, .exception-meta span { color: var(--muted); font-size: 10px; }
.exception-meta { display: grid; gap: 4px; text-align: right; }
.exception-meta strong { font-size: 12px; }
.row-action { width: 28px; height: 32px; border: 0; border-radius: 8px; color: #6e817e; background: #f4f7f6; font-size: 22px; line-height: 1; cursor: pointer; }
.status-badge { display: inline-flex; align-items: center; width: max-content; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .4px; }
.status-badge.red { color: #a93333; background: #fde7e7; }
.status-badge.amber { color: #8a5708; background: #fff0d3; }
.status-badge.blue { color: #1d5f9f; background: #e5f0fb; }
.status-badge.green { color: #1c7045; background: #dff3e7; }

.activity-panel { display: flex; flex-direction: column; padding-bottom: 18px; }
.activity-feed { list-style: none; margin: 0; padding: 0 22px 8px; }
.activity-feed li { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 12px; padding: 0 0 19px; }
.activity-feed li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: var(--line); }
.feed-dot { z-index: 1; width: 11px; height: 11px; margin-top: 4px; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.feed-dot.green { background: var(--teal); }
.feed-dot.blue { background: var(--blue); }
.feed-dot.amber { background: var(--amber); }
.feed-dot.violet { background: var(--violet); }
.activity-feed strong { font-size: 12px; }
.activity-feed p { margin: 3px 0; color: var(--muted); font-size: 11px; }
.activity-feed small { color: #91a09e; font-size: 9px; }
.activity-panel .button { margin: auto 22px 0; }

.schedule-panel { overflow-x: auto; }
.segmented-control { display: flex; padding: 3px; border-radius: 9px; background: #edf2f0; }
.segmented-control button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.segmented-control button.selected { color: var(--ink); background: white; box-shadow: 0 2px 6px rgba(25,50,54,.08); }
.workstream-table { min-width: 850px; }
.table-header, .table-row { display: grid; grid-template-columns: 1.1fr 1.25fr .9fr 1.25fr .72fr 32px; align-items: center; gap: 16px; padding: 12px 22px; }
.table-header { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #80908e; background: #fafcfb; font-size: 9px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.table-row { min-height: 69px; border-bottom: 1px solid #edf1f0; }
.table-row:last-child { border-bottom: 0; }
.table-row > div { display: grid; gap: 4px; }
.table-row strong { font-size: 11px; }
.table-row small { color: var(--muted); font-size: 9px; }
.person-cell { display: flex !important; align-items: center; gap: 9px; }
.person-cell > span:last-child { display: grid; gap: 3px; }

#blazor-error-ui { display: none; position: fixed; z-index: 1000; bottom: 0; left: 0; right: 0; padding: 12px 18px; color: white; background: #b32121; }
#blazor-error-ui .dismiss { position: absolute; right: 14px; cursor: pointer; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }
h1:focus { outline: none; }

@media (max-width: 1050px) {
    .app-shell { grid-template-columns: 80px minmax(0, 1fr); }
    .sidebar { padding-inline: 12px; }
    .brand { padding-inline: 9px; }
    .brand > small, .nav-item > span:not(.nav-icon):not(.nav-count), .signed-in > span:last-child { display: none; }
    .brand-logo-panel { padding: 5px; }
    .nav-item { justify-content: center; }
    .nav-item.active::before { left: -12px; }
    .nav-count { position: absolute; right: 1px; top: 4px; min-width: 18px; padding: 1px 4px; }
    .signed-in { justify-content: center; padding-inline: 0; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .app-shell { display: block; padding-bottom: 74px; }
    .sidebar { position: fixed; z-index: 100; top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 68px; padding: 7px 10px; background: var(--navy); }
    .brand, .sidebar-foot, .primary-nav .nav-item:nth-child(n+6) { display: none; }
    .primary-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; height: 100%; }
    .nav-item { display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px 2px; font-size: 9px; }
    .nav-item > span:not(.nav-icon):not(.nav-count) { display: block; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-icon { font-size: 16px; }
    .nav-count { right: 17%; top: 2px; }
    .nav-item.active::before { top: -7px; left: 25%; width: 50%; height: 3px; border-radius: 0 0 3px 3px; }
    .topbar { height: 66px; padding: 0 16px; }
    .topbar > div:first-child { display: none; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .page-content { padding: 23px 15px 30px; }
    .hero { display: grid; margin-bottom: 20px; }
    .hero h1 { font-size: 30px; letter-spacing: -1px; }
    .hero p { font-size: 13px; }
    .live-pill { display: none; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .metric-card { min-height: 126px; padding: 15px; }
    .metric-card > strong { font-size: 27px; }
    .metric-head > span:first-child { max-width: 90px; }
    .workspace-grid { grid-template-columns: 1fr; }
    .activity-panel { display: none; }
    .panel-heading { align-items: flex-start; padding: 17px 16px 13px; }
    .exception-row { grid-template-columns: 34px minmax(0, 1fr) 24px; padding: 14px 15px; }
    .exception-meta { display: none; }
    .exception-main p { line-height: 1.35; }
    .schedule-panel .panel-heading { display: grid; }
    .segmented-control { width: 100%; overflow-x: auto; }
    .segmented-control button { flex: 1; }
}

@media (max-width: 410px) {
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: auto; }
    .topbar .button-primary { padding-inline: 12px; }
}

/* Management records and forms */
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-title-row h1 { margin: 5px 0 6px; font-size: clamp(28px, 3vw, 40px); letter-spacing: -1.3px; }
.page-title-row p { margin: 0; color: var(--muted); }
.page-title-row.compact { align-items: flex-start; }
.back-link, .mobile-back { display: inline-block; margin-bottom: 10px; color: #c94a06; text-decoration: none; font-size: 12px; font-weight: 750; }
.list-panel { min-height: 420px; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 20px; }
.search-box { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 220px; max-width: 520px; height: 41px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.admin-list .table-row, .admin-list .table-header { grid-template-columns: 1.15fr 1.3fr 1.2fr 1fr .8fr 30px; }
.linked-row { color: inherit; text-decoration: none; transition: background .15s; }
.linked-row:hover { background: #f7faf8; }
.empty-state { padding: 50px 24px; color: var(--muted); text-align: center; }
.settings-copy { display: grid; gap: 10px; padding: 0 22px 22px; }
.settings-copy p { margin: 0; color: var(--muted); line-height: 1.65; }
.settings-copy strong { font-size: 13px; }
.settings-copy small { color: var(--muted); }

.form-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) 300px; align-items: start; gap: 16px; }
.form-panel, .issue-summary, .side-card { padding: 22px; }
.form-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.form-section-heading > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--navy); background: var(--lime); font-weight: 900; }
.form-section-heading h2, .issue-summary h2 { margin: 0; font-size: 17px; }
.form-section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; color: #3f565a; font-size: 11px; font-weight: 750; }
.field.span-2, .span-2 { grid-column: span 2; }
.field input, .field select, .field textarea, .mobile-field input, .mobile-field textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #cad7d5;
    border-radius: 9px;
    outline: none;
    color: var(--ink);
    background: white;
    font-weight: 500;
    resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus, .mobile-field input:focus, .mobile-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(238,96,18,.12); }
.form-alert { grid-column: 1 / -1; margin: 0 0 14px; padding: 12px 16px; border: 1px solid #f2c5c5; border-radius: 10px; color: #9e3333; background: #fff0f0; }
.check-list { list-style: none; display: grid; gap: 12px; margin: 20px 0; padding: 0; }
.check-list li { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.check-list span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #16633d; background: #dff3e7; font-weight: 900; }
.muted-copy { color: var(--muted); font-size: 11px; line-height: 1.5; }
.issue-summary .button { margin-top: 8px; text-decoration: none; }

.detail-title { align-items: center; }
.title-with-status { display: flex; align-items: center; gap: 12px; }
.title-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.title-actions .button { text-decoration: none; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 305px; gap: 16px; align-items: start; }
.detail-main, .detail-side { display: grid; gap: 16px; }
.summary-band { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #f8fbfa; }
.summary-band > div { padding: 17px 19px; border-right: 1px solid var(--line); }
.summary-band > div:last-child { border-right: 0; }
.summary-band span, .summary-body .label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.summary-band strong { font-size: 12px; }
.summary-body { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 22px; }
.summary-body strong { font-size: 13px; }
.summary-body p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.hash-label { padding: 5px 8px; border: 1px solid #d5e3df; border-radius: 7px; color: #54716c; background: #f0f7f4; font-size: 9px; font-weight: 800; }
.audit-timeline { list-style: none; margin: 0; padding: 0 22px 10px; }
.audit-timeline li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; padding: 0 0 23px; }
.audit-timeline li:not(:last-child)::before { content: ""; position: absolute; top: 37px; bottom: 0; left: 18px; width: 1px; background: var(--line); }
.timeline-icon { z-index: 1; display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 11px; color: #c94a06; background: #fff3ec; font-weight: 900; }
.timeline-content { padding-top: 3px; }
.timeline-content > div:first-child { display: flex; justify-content: space-between; gap: 12px; }
.timeline-content strong { font-size: 12px; }
.timeline-content time, .timeline-content small { color: var(--muted); font-size: 9px; }
.timeline-content p { margin: 5px 0; color: #435a5e; font-size: 11px; line-height: 1.45; }
.location-proof { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.location-proof span { padding: 4px 7px; border-radius: 6px; color: #31665e; background: #eaf6f2; font-size: 9px; font-weight: 700; }
.data-list { margin: 15px 0 0; }
.data-list div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f0; }
.data-list div:last-child { border-bottom: 0; }
.data-list dt { color: var(--muted); font-size: 10px; }
.data-list dd { margin: 0; text-align: right; font-size: 10px; font-weight: 750; }
.approval-complete h3 { margin: 14px 0 2px; }
.approval-complete p { margin: 0 0 6px; color: var(--muted); font-size: 11px; }
.approval-complete small { color: var(--muted); }
.approval-complete code { display: block; margin-top: 12px; padding: 8px; overflow-wrap: anywhere; border-radius: 7px; color: #54716c; background: #f1f6f4; font-size: 8px; }

/* Operative mobile application */
.operative-app { min-height: 100vh; color: var(--ink); background: #f3f3f1; }
.operative-topbar { position: sticky; z-index: 50; top: 0; display: flex; justify-content: space-between; align-items: center; height: 65px; padding: 0 17px; border-bottom: 1px solid #dbe5e2; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.mobile-brand { display: flex; align-items: center; gap: 9px; color: var(--navy); text-decoration: none; }
.mobile-brand-logo { display: block; width: clamp(122px, 35vw, 158px); height: auto; }
.mobile-brand > span { padding-left: 9px; border-left: 1px solid #d3d3d3; color: #5d5d5d; font: 700 10px Montserrat, Arial, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.profile-chip { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--navy); background: var(--lime); text-decoration: none; font-size: 10px; font-weight: 850; }
.operative-content { width: min(560px, 100%); min-height: calc(100vh - 65px); margin: 0 auto; padding: 24px 15px 94px; }
.operative-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; height: 69px; margin: auto; border: 1px solid #d9e3e1; border-bottom: 0; border-radius: 17px 17px 0 0; background: rgba(255,255,255,.97); box-shadow: 0 -8px 30px rgba(22,51,54,.08); }
.operative-nav a { display: grid; place-items: center; align-content: center; gap: 2px; color: #788b88; text-decoration: none; }
.operative-nav a.active { color: var(--navy); }
.operative-nav a.active::before { content: ""; position: absolute; top: 0; width: 30px; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); }
.operative-nav span { font-size: 17px; }
.operative-nav small { font-size: 9px; font-weight: 750; }
.mobile-greeting > span { color: #607773; font-size: 11px; font-weight: 750; }
.mobile-greeting h1 { margin: 4px 0 5px; font-size: 29px; letter-spacing: -1px; }
.mobile-greeting p { margin: 0 0 22px; color: var(--muted); font-size: 12px; }
.active-work-card { display: block; margin-bottom: 25px; padding: 19px; border-radius: 17px; color: white; background: radial-gradient(circle at 90% 10%, rgba(201,242,75,.2), transparent 35%), var(--navy); text-decoration: none; box-shadow: 0 14px 30px rgba(9,47,54,.18); }
.active-card-top, .active-card-bottom { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.active-card-top > span:last-child { margin-left: auto; color: #b9cdca; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(201,242,75,.12); }
.active-work-card h2 { margin: 19px 0 4px; font-size: 20px; }
.active-work-card p { margin: 0 0 18px; color: #b8cecb; font-size: 11px; }
.active-card-bottom { justify-content: space-between; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); color: #b8cecb; }
.active-card-bottom strong { color: var(--lime); }
.mobile-section-title { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 10px; }
.mobile-section-title h2 { margin: 3px 0 0; font-size: 17px; }
.mobile-section-title > span { color: var(--muted); font-size: 10px; }
.mobile-work-list { display: grid; gap: 9px; }
.mobile-work-card, .mobile-card { border: 1px solid #d9e3e1; border-radius: 14px; background: white; box-shadow: 0 5px 20px rgba(30,56,58,.035); }
.mobile-work-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; align-items: center; gap: 12px; padding: 13px; color: inherit; text-decoration: none; }
.date-tile { display: grid; place-items: center; align-content: center; width: 46px; height: 51px; border-radius: 10px; color: var(--navy); background: #fff0e7; }
.date-tile strong { font-size: 18px; line-height: 1; }
.date-tile span { margin-top: 3px; color: #55706c; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.date-tile.large { width: 57px; height: 62px; }
.mobile-work-main > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mobile-work-main strong { font-size: 12px; }
.mobile-work-main p { margin: 4px 0; color: #40585b; font-size: 10px; }
.mobile-work-main small { color: var(--muted); font-size: 9px; }
.mobile-chevron { color: #81918f; font-size: 22px; }
.mobile-job-header { margin: 2px 2px 19px; }
.mobile-job-header h1 { margin: 8px 0 3px; font-size: 27px; letter-spacing: -.8px; }
.mobile-job-header p { margin: 0; color: var(--muted); font-size: 10px; }
.mobile-card { margin-bottom: 11px; padding: 16px; }
.job-when { display: flex; align-items: center; gap: 13px; }
.job-when > div:last-child, .job-place > div { display: grid; gap: 4px; }
.job-when span, .job-place span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.job-when strong, .job-place strong { font-size: 12px; }
.job-when small, .job-place small { color: var(--muted); font-size: 9px; }
.job-place { display: grid; grid-template-columns: 35px 1fr; gap: 10px; }
.card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #c94a06 !important; background: #fff0e7; font-size: 16px !important; }
.job-place p { margin: 0; color: #465d60; font-size: 10px; line-height: 1.45; }
.instruction-card > p { margin: 11px 0 16px; color: #40575a; font-size: 11px; line-height: 1.6; }
.competency-ready { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 10px; background: #ecf7f1; }
.competency-ready > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: white; background: #339463; font-weight: 900; }
.competency-ready div { display: grid; gap: 3px; }
.competency-ready strong { font-size: 10px; }
.competency-ready small { color: #5f7872; font-size: 8px; }
.mobile-action-panel { display: grid; gap: 9px; margin-top: 15px; padding: 16px; border-radius: 16px; background: white; box-shadow: 0 8px 28px rgba(24,51,54,.08); }
.mobile-action-panel > p { margin: 0 0 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.mobile-primary-action, .mobile-secondary-action { width: 100%; min-height: 52px; border: 0; border-radius: 12px; font-weight: 850; cursor: pointer; }
.mobile-primary-action { color: white; background: var(--navy); box-shadow: 0 8px 18px rgba(9,47,54,.18); }
.mobile-primary-action.start { color: var(--navy); background: var(--lime); }
.mobile-primary-action.finish { color: white; background: var(--teal); }
.mobile-secondary-action { color: var(--ink); background: #edf2f0; }
.mobile-secondary-action.danger { color: #a43b3b; background: #fff0f0; }
.mobile-primary-action:disabled, .mobile-secondary-action:disabled { opacity: .55; cursor: wait; }
.inline-form { display: grid; gap: 10px; padding-top: 9px; }
.inline-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.inline-form textarea { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.location-explainer { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 9px; color: #476863; background: #edf7f4; }
.location-explainer > span { font-size: 17px; }
.location-explainer p { margin: 0; font-size: 9px; line-height: 1.45; }
.active-timer { margin: 13px 0; padding: 22px; border-radius: 17px; color: white; background: var(--navy); text-align: center; }
.active-timer span, .active-timer small { display: block; color: #b8cecb; font-size: 10px; }
.active-timer strong { display: block; margin: 6px 0; color: var(--lime); font-size: 38px; letter-spacing: 2px; }
.mobile-field { display: grid; gap: 7px; margin: 12px 0; color: #435a5d; font-size: 10px; font-weight: 750; }
.completion-card { margin-top: 18px; }
.mobile-alert { margin-bottom: 11px; padding: 12px; border-radius: 10px; font-size: 10px; line-height: 1.45; }
.mobile-alert.error { color: #9b3333; background: #feecec; }
.mobile-alert.success { color: #1b6d45; background: #e4f5eb; }
.completion-waiting { padding: 30px 20px; border: 1px solid var(--line); border-radius: 17px; background: white; text-align: center; }
.completion-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 15px; border-radius: 50%; color: #176941; background: #ddf4e7; font-size: 25px; font-weight: 900; }
.completion-waiting h2 { margin: 0 0 7px; }
.completion-waiting p { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.completion-waiting .button { text-decoration: none; }

/* Public client approval */
.public-shell { min-height: 100vh; background: #f3f3f1; }
.public-header { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 0 20px; border-bottom: 1px solid var(--line); background: white; }
.public-header > span { color: var(--muted); font-size: 10px; font-weight: 750; }
.public-content { width: min(680px, 100%); margin: auto; padding: 28px 15px 55px; }
.approval-sheet, .approval-success { padding: clamp(20px, 5vw, 38px); border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 13px 40px rgba(26,53,55,.07); }
.approval-heading h1, .approval-success h1 { margin: 5px 0 7px; font-size: clamp(26px, 6vw, 36px); letter-spacing: -1px; }
.approval-heading p, .approval-success > p { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.approval-reference { display: grid; gap: 4px; padding: 14px; border-radius: 11px; background: #fff3ec; }
.approval-reference span { color: #52706b; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .7px; }
.approval-reference strong { font-size: 13px; }
.approval-details { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.approval-details div { padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.approval-details div:nth-child(even) { border-right: 0; }
.approval-details div:nth-last-child(-n+2) { border-bottom: 0; }
.approval-details dt { margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.approval-details dd { margin: 0; font-size: 11px; }
.approval-details small { color: var(--muted); font-size: 9px; }
.approval-instructions { padding: 14px; border-left: 3px solid var(--teal); background: #f3f8f6; }
.approval-instructions span { color: #456b65; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.approval-instructions p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; }
.approval-form { display: grid; gap: 14px; margin-top: 24px; }
.signature-field > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.signature-field label { color: #3f565a; font-size: 11px; font-weight: 750; }
.signature-field button { border: 0; color: #c94a06; background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
.signature-field canvas { display: block; width: 100%; height: 150px; border: 1px dashed #9eb4b0; border-radius: 10px; background: #fbfdfc; touch-action: none; }
.signature-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }
.approval-declaration { display: flex; align-items: flex-start; gap: 9px; padding: 13px; border-radius: 10px; background: #f1f6f4; color: #40575a; font-size: 10px; line-height: 1.5; }
.approval-declaration input { margin-top: 2px; accent-color: var(--teal); }
.approval-success { text-align: center; }
.approval-success .approval-reference { margin: 22px 0; text-align: left; }
.approval-success .button { text-decoration: none; }

@media (max-width: 1180px) {
    .form-layout { grid-template-columns: 1fr 1fr; }
    .issue-summary { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-side { grid-template-columns: 1fr 1fr; }
    .page-title-row { align-items: flex-start; }
    .title-actions { justify-content: flex-end; }
}

@media (max-width: 760px) {
    .page-title-row { display: grid; }
    .page-title-row > .button { width: 100%; }
    .list-toolbar { display: grid; }
    .search-box { width: 100%; max-width: none; }
    .form-layout { grid-template-columns: 1fr; }
    .issue-summary { grid-column: auto; }
    .field-grid { grid-template-columns: 1fr; }
    .field.span-2, .span-2 { grid-column: auto; }
    .summary-band { grid-template-columns: 1fr 1fr; }
    .summary-band > div:nth-child(2) { border-right: 0; }
    .summary-band > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .summary-body { grid-template-columns: 1fr; }
    .detail-side { grid-template-columns: 1fr; }
    .title-actions { justify-content: flex-start; }
}

@media (max-width: 520px) {
    .approval-details { grid-template-columns: 1fr; }
    .approval-details div { border-right: 0; }
    .approval-details div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

.account-shell { min-height: 100vh; background: radial-gradient(circle at 20% 0, #ffe1cf, transparent 34%), #f3f3f1; }
.account-header { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 5vw, 72px); color: #59706d; font-size: 12px; }
.account-content { display: grid; place-items: center; min-height: calc(100vh - 76px); padding: 28px 20px 80px; }
.account-card { width: min(100%, 460px); padding: clamp(24px, 5vw, 42px); border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 24px 80px rgba(20,49,53,.11); }
.account-card h1 { margin: 0 0 6px; font-size: 34px; letter-spacing: -1px; }
.account-card h2 { margin: 0 0 22px; color: var(--muted); font-size: 14px; font-weight: 500; }
.account-card h3, .account-card hr, .account-card .col-lg-4 { display: none; }
.account-card form { display: grid; gap: 14px; }
.account-card .form-floating { display: grid; gap: 6px; }
.account-card .form-control { width: 100%; padding: 13px 14px; border: 1px solid #c9d5d2; border-radius: 10px; background: white; font: inherit; }
.account-card .form-label { color: var(--ink); font-size: 12px; font-weight: 700; }
.account-card .checkbox label { display: flex; align-items: center; gap: 8px; }
.account-card .btn { display: inline-flex; justify-content: center; width: 100%; padding: 13px 18px; border: 0; border-radius: 10px; background: var(--teal); color: white; font: inherit; font-weight: 800; cursor: pointer; }
.account-card .btn-link { padding: 8px; background: transparent; color: var(--teal); }
.account-card a { color: var(--teal); }
.account-card p { margin: 8px 0; font-size: 12px; }
.text-danger { color: #a93333; font-size: 11px; }