:root {
    --bg: #f3f6f9;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --ink: #172033;
    --muted: #6b7688;
    --line: #e3e8ef;
    --line-strong: #d5dde7;
    --nav: #111827;
    --nav-soft: #1b2535;
    --nav-muted: #8f9aae;
    --accent: #1f78d1;
    --accent-dark: #145fa9;
    --accent-soft: #eaf3fd;
    --green: #23966f;
    --green-soft: #e9f7f2;
    --amber: #b47910;
    --amber-soft: #fff7e6;
    --danger: #b73a43;
    --danger-soft: #fff0f1;
    --shadow: 0 18px 50px rgba(19, 32, 51, .08);
    --shadow-sm: 0 8px 24px rgba(19, 32, 51, .06);
    --radius: 18px;
    --radius-sm: 12px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 18px;
    color: #fff;
    background:
        radial-gradient(circle at 15% 0%, rgba(43, 122, 189, .18), transparent 34%),
        linear-gradient(180deg, #101827 0%, #111827 100%);
    border-right: 1px solid rgba(255,255,255,.05);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; color: #fff; padding: 0 8px; }
.brand-lockup strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand-eyebrow { display: block; margin-bottom: 2px; color: #91a0b7; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.brand-mark {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
    border-radius: 11px; background: linear-gradient(145deg, #2e8fd9, #1768b4); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px rgba(8,83,148,.24);
}
.brand-mark svg { width: 24px; height: 24px; fill: white; }
.brand-lockup--large { padding: 0; }
.brand-lockup--large .brand-mark { width: 46px; height: 46px; flex-basis: 46px; border-radius: 14px; }
.brand-lockup--large strong { font-size: 17px; }

.side-nav { margin-top: 34px; display: flex; flex-direction: column; gap: 4px; }
.nav-label { padding: 0 12px 8px; color: #6f7d92; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-label--spaced { margin-top: 22px; }
.nav-item {
    min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border-radius: 11px;
    color: #c6cfdd; font-size: 13.5px; font-weight: 650; transition: .16s ease;
}
.nav-item:hover { background: rgba(255,255,255,.055); color: #fff; }
.nav-item.is-active { background: rgba(52, 130, 198, .18); color: #fff; box-shadow: inset 3px 0 0 #3e9ce3; }
.nav-item.is-disabled { opacity: .66; cursor: default; }
.nav-item.is-disabled:hover { background: transparent; color: #c6cfdd; }
.nav-item em { margin-left: auto; font-size: 9px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #738198; }
.nav-icon { width: 20px; text-align: center; color: #91a0b7; font-size: 16px; }
.nav-item.is-active .nav-icon { color: #65b5ef; }
.sidebar-footer { margin-top: auto; padding: 16px 7px 0; border-top: 1px solid rgba(255,255,255,.07); }
.version-pill { display: flex; align-items: center; gap: 8px; color: #8794a8; font-size: 10.5px; }
.version-pill > span { width: 7px; height: 7px; border-radius: 50%; background: #3bc28d; box-shadow: 0 0 0 4px rgba(59,194,141,.08); }

.app-main { min-width: 0; }
.topbar {
    min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 14px 30px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 2px 0 0; font-size: 23px; letter-spacing: -.035em; }
.topbar-context { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 9px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line); }
.user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #edf2f7; color: #435168; font-weight: 800; font-size: 13px; }
.user-chip strong, .user-chip span { display: block; }
.user-chip strong { font-size: 12px; }
.user-chip div > span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.icon-btn { border: 0; background: transparent; width: 34px; height: 34px; color: #7b8798; border-radius: 9px; }
.icon-btn:hover { background: #f1f4f7; color: var(--ink); }

.content-wrap { padding: 28px 30px 42px; }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.hero-row h2, .transaction-banner h2 { margin: 4px 0 5px; font-size: 28px; letter-spacing: -.045em; }
.hero-row p, .transaction-banner p { margin: 0; }
.kicker { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.muted { color: var(--muted); }

.btn {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent;
    border-radius: 10px; padding: 0 15px; font-weight: 750; font-size: 12.5px; transition: .15s ease; white-space: nowrap;
}
.btn-primary { color: #fff; background: linear-gradient(180deg, #2a83d4, #1f72bf); box-shadow: 0 7px 18px rgba(31,114,191,.2); }
.btn-primary:hover { transform: translateY(-1px); background: linear-gradient(180deg, #247bc7, #1a67ae); }
.btn-secondary { color: #31506c; background: #f2f6f9; border-color: #dfe7ef; }
.btn-secondary:hover { background: #eaf0f5; }
.btn-ghost { color: #607085; background: transparent; border-color: var(--line); }
.btn-ghost:hover { background: #f7f9fb; }
.btn-lg { min-height: 46px; padding: 0 19px; border-radius: 12px; }
.btn-sm { min-height: 36px; }
.btn-block { width: 100%; }
.btn-scan { color: #1765a7; background: var(--accent-soft); border-color: #d6e8fa; }
.btn-scan:hover { background: #dfeffc; }
.scan-icon { font-size: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.stat-card {
    display: grid; grid-template-columns: 42px 1fr; gap: 12px 14px; align-items: center; padding: 20px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-sm);
}
.stat-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #1a6bb1; background: var(--accent-soft); font-size: 17px; font-weight: 800; }
.stat-card div > span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.stat-card strong { display: block; margin-top: 3px; font-size: 25px; letter-spacing: -.045em; }
.stat-card small { grid-column: 2; color: #929baa; font-size: 10px; margin-top: -8px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr); gap: 18px; }
.panel, .workspace-card, .transaction-summary {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.panel { min-width: 0; }
.panel-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-header h3, .workspace-heading h3, .summary-head h3 { margin: 3px 0 0; font-size: 17px; letter-spacing: -.025em; }
.soft-badge, .status-pill, .optional-tag {
    display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 0 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.soft-badge { color: var(--green); background: var(--green-soft); }
.status-pill { color: #667386; background: #eef2f6; }
.status-draft { color: var(--amber); background: var(--amber-soft); }
.status-completed { color: var(--green); background: var(--green-soft); }
.status-void { color: var(--danger); background: var(--danger-soft); }
.empty-state { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px; }
.empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #f2f5f8; color: #728096; font-size: 21px; }
.empty-state h4 { margin: 13px 0 5px; }
.empty-state p { margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.health-list { padding: 10px 20px 6px; }
.health-list > div { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid #edf1f5; }
.health-list > div:last-child { border-bottom: 0; }
.health-list p { margin: 0; }
.health-list strong, .health-list small { display: block; }
.health-list strong { font-size: 12px; }
.health-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.health-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; }
.health-dot.good { background: #34b482; box-shadow: 0 0 0 4px rgba(52,180,130,.09); }
.health-dot.pending { background: #d8a236; box-shadow: 0 0 0 4px rgba(216,162,54,.10); }
.notice-card { display: flex; gap: 10px; margin: 7px 16px 16px; padding: 13px; border-radius: 12px; background: #f6f9fc; border: 1px solid #e7edf3; }
.notice-icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; background: #e6f1fc; color: #2678bd; font-size: 11px; font-weight: 800; }
.notice-card strong { display: block; font-size: 11px; }
.notice-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 11px 20px; color: #8a95a4; background: #fafbfd; border-bottom: 1px solid var(--line); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; text-align: left; }
.data-table td { padding: 15px 20px; border-bottom: 1px solid #edf1f4; font-size: 12px; }
.data-table td > span { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.align-right { text-align: right !important; }

.transaction-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 18px 21px;
    border-radius: 15px; color: #16334e; background: linear-gradient(120deg, #eef6fd, #f7fbff); border: 1px solid #dcecf9;
}
.transaction-banner h2 { font-size: 22px; }
.transaction-banner p { color: #678096; font-size: 11.5px; }
.draft-chip { display: flex; align-items: center; gap: 8px; color: #637388; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.draft-chip span { width: 8px; height: 8px; border-radius: 50%; background: #c5ced9; }

.workflow-shell { display: grid; grid-template-columns: 180px minmax(0, 1fr) 292px; gap: 16px; align-items: start; }
.workflow-steps {
    position: sticky; top: 100px; padding: 16px 0; border-radius: 15px; background: #f8fafc; border: 1px solid var(--line);
}
.workflow-label { display: block; padding: 0 15px 10px; color: #8792a1; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.workflow-step { width: 100%; display: flex; gap: 10px; align-items: center; padding: 11px 14px; border: 0; border-left: 3px solid transparent; background: transparent; color: #798598; text-align: left; }
.workflow-step.is-active { color: var(--ink); background: #fff; border-left-color: var(--accent); }
.workflow-step:disabled { cursor: default; opacity: .66; }
.step-number { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 50%; background: #e8edf2; color: #718095; font-size: 10px; font-weight: 800; }
.workflow-step.is-active .step-number { background: var(--accent); color: #fff; box-shadow: 0 5px 12px rgba(31,120,209,.22); }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { font-size: 11px; }
.workflow-step small { margin-top: 2px; font-size: 9px; font-weight: 500; color: #939eac; }
.workflow-tip { margin: 15px 12px 0; padding: 11px; border-radius: 10px; background: #fff; border: 1px solid #e9edf2; }
.workflow-tip > span { color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.workflow-tip p { margin: 4px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.45; }

.workspace-card { min-width: 0; overflow: hidden; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 22px; border-bottom: 1px solid var(--line); }
.workspace-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; }
.section-divider { display: flex; align-items: center; gap: 8px; padding: 18px 22px 10px; color: #536175; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-divider::after { content: ""; height: 1px; flex: 1; margin-left: 8px; background: #edf0f3; }
.optional-tag { min-height: 20px; color: #7b8796; background: #f2f5f8; padding: 0 7px; font-size: 8px; }
.form-grid { display: grid; gap: 12px; padding: 0 22px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.form-grid.nested-2 { grid-template-columns: 90px minmax(0,1fr); padding: 0; }
.span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: #5f6c7d; font-size: 10px; font-weight: 750; }
.field input, .field select, .field textarea {
    width: 100%; min-height: 41px; padding: 0 11px; color: var(--ink); background: #fbfcfd; border: 1px solid #dfe5eb; border-radius: 9px; outline: 0; transition: .15s ease;
}
.field input::placeholder { color: #a3adba; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: #82b8e6; box-shadow: 0 0 0 3px rgba(31,120,209,.08); }
.workspace-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 17px 22px; border-top: 1px solid var(--line); background: #fbfcfd; }

.transaction-summary { position: sticky; top: 100px; overflow: hidden; }
.summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 17px 14px; border-bottom: 1px solid var(--line); }
.summary-total { padding: 16px 17px; background: linear-gradient(140deg, #15263a, #1d334a); color: #fff; }
.summary-total span { display: block; color: #9fb0c3; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.summary-total strong { display: block; margin-top: 3px; font-size: 27px; letter-spacing: -.04em; }
.summary-section { padding: 15px 17px; border-bottom: 1px solid var(--line); }
.summary-label { display: block; margin-bottom: 9px; color: #8994a3; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.check-list > div { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.check-dot { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 50%; background: #eef2f6; color: #8b96a5; font-size: 8.5px; font-weight: 800; }
.check-dot.current { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px #d3e7f9; }
.check-list p { margin: 0; }
.check-list strong, .check-list small { display: block; }
.check-list strong { font-size: 10.5px; }
.check-list small { margin-top: 1px; color: var(--muted); font-size: 8.5px; }
.verification-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.verification-grid button { padding: 10px 8px; border: 1px solid #e5eaf0; border-radius: 10px; background: #fafbfd; text-align: left; }
.verification-grid button:hover { background: #f4f8fb; border-color: #d9e2ea; }
.verification-grid span, .verification-grid strong, .verification-grid small { display: block; }
.verification-grid span { color: #6d7c90; font-size: 15px; }
.verification-grid strong { margin-top: 5px; font-size: 9.5px; }
.verification-grid small { margin-top: 2px; color: #9ba4b0; font-size: 8px; }
.summary-note { margin: 13px; padding: 11px; border-radius: 10px; background: #f6f8fa; }
.summary-note span { color: #5e6c7c; font-size: 9px; font-weight: 800; }
.summary-note p { margin: 4px 0 0; color: #84909e; font-size: 8.5px; line-height: 1.45; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: 380px; transform: translateY(18px); opacity: 0; pointer-events: none; padding: 13px 15px; border-radius: 11px; color: #fff; background: #17263a; box-shadow: 0 14px 36px rgba(15,25,39,.22); font-size: 11px; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

.login-body { background: #eef3f7; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(460px, 1.1fr); }
.login-brand-panel {
    display: flex; flex-direction: column; min-height: 100vh; padding: 38px 46px; color: #fff;
    background:
        radial-gradient(circle at 12% 12%, rgba(50,148,220,.18), transparent 26%),
        radial-gradient(circle at 90% 78%, rgba(39,157,121,.13), transparent 25%),
        linear-gradient(145deg, #101a2a, #15273a 66%, #183149);
}
.login-brand-copy { max-width: 540px; margin: auto 0; padding: 60px 0; }
.login-brand-copy .kicker { color: #62afe9; }
.login-brand-copy h1 { max-width: 520px; margin: 8px 0 15px; font-size: clamp(38px, 4vw, 60px); line-height: 1.02; letter-spacing: -.055em; }
.login-brand-copy p { max-width: 510px; margin: 0; color: #aebdcd; font-size: 15px; line-height: 1.65; }
.login-brand-footer { color: #74869b; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.login-card-wrap { display: grid; place-items: center; padding: 40px; }
.login-card { width: min(100%, 420px); padding: 34px; background: #fff; border: 1px solid #e2e8ee; border-radius: 20px; box-shadow: var(--shadow); }
.login-card h2 { margin: 5px 0 4px; font-size: 26px; letter-spacing: -.04em; }
.login-card > p { margin: 0 0 22px; font-size: 11.5px; }
.login-mobile-brand { display: none; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.check-row { display: flex; align-items: center; gap: 8px; color: #667487; font-size: 10.5px; }
.check-row input { accent-color: var(--accent); }
.alert { margin: 0 0 16px; padding: 11px 12px; border-radius: 9px; font-size: 10.5px; }
.alert-danger { color: #a2323a; background: var(--danger-soft); border: 1px solid #f5d6d9; }

@media (max-width: 1250px) {
    .workflow-shell { grid-template-columns: 160px minmax(0,1fr); }
    .transaction-summary { position: static; grid-column: 2; }
    .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 78px minmax(0,1fr); }
    .app-sidebar { padding-left: 10px; padding-right: 10px; }
    .brand-lockup > div:last-child, .nav-label, .nav-item > span:not(.nav-icon), .nav-item em, .version-pill { display: none; }
    .brand-lockup { justify-content: center; padding: 0; }
    .nav-item { justify-content: center; padding: 0; }
    .nav-icon { width: auto; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .login-shell { grid-template-columns: 1fr; }
    .login-brand-panel { display: none; }
    .login-mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
    .login-mobile-brand strong { font-size: 14px; }
}

@media (max-width: 760px) {
    .app-shell { display: block; }
    .app-sidebar { display: none; }
    .topbar { padding: 12px 16px; }
    .topbar h1 { font-size: 19px; }
    .topbar .btn, .user-chip div { display: none; }
    .content-wrap { padding: 18px 14px 32px; }
    .hero-row, .transaction-banner { align-items: flex-start; flex-direction: column; }
    .hero-row h2 { font-size: 24px; }
    .stat-grid { grid-template-columns: 1fr; }
    .workflow-shell { display: block; }
    .workflow-steps { position: static; margin-bottom: 12px; }
    .workflow-step { display: inline-flex; width: auto; border-left: 0; }
    .workflow-step small, .workflow-tip, .workflow-label { display: none; }
    .workspace-heading { align-items: flex-start; flex-direction: column; }
    .transaction-summary { margin-top: 12px; }
    .form-grid.cols-2, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: 1fr; }
    .form-grid.nested-2 { grid-template-columns: 90px 1fr; }
    .span-2 { grid-column: span 1; }
    .login-card-wrap { padding: 18px; }
    .login-card { padding: 24px; }
}

/* --------------------------------------------------------------------------
   v4.0.1 Counter Simplification
   Keep the counter workflow intentionally obvious: one primary action, plain
   language, minimal navigation, and technology hidden unless it needs attention.
   -------------------------------------------------------------------------- */
.simple-shell { grid-template-columns: 224px minmax(0, 1fr); }
.simple-sidebar { padding-top: 22px; }
.simple-nav { margin-top: 42px; }
.simple-nav .nav-item { min-height: 48px; font-size: 14px; }
.simple-topbar { min-height: 78px; }
.simple-content { max-width: 1380px; margin: 0 auto; width: 100%; padding-top: 34px; }

.counter-home { max-width: 1160px; margin: 0 auto; }
.ready-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 54px 28px 48px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.ready-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #1f78d1, #3ca0e7);
}
.ready-mark {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #2e8fd9, #1768b4);
    box-shadow: 0 14px 30px rgba(31,120,209,.20);
    font-size: 34px;
    font-weight: 300;
}
.ready-card h2 { margin: 6px 0 8px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.ready-card p { max-width: 580px; margin: 0 0 25px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.btn-counter-primary { min-width: 230px; min-height: 54px; justify-content: center; font-size: 15px; border-radius: 13px; }

.counter-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.shortcut-card {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    text-align: left;
}
.shortcut-card.is-muted { cursor: default; opacity: .72; }
.shortcut-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-size: 18px; }
.shortcut-card strong, .shortcut-card small { display: block; }
.shortcut-card strong { font-size: 13px; }
.shortcut-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.shortcut-card em { margin-left: auto; color: #9aa4b1; font-size: 8.5px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.today-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    margin: 16px 0;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
    overflow: hidden;
}
.today-strip > div { padding: 17px 20px; border-right: 1px solid var(--line); }
.today-strip > div:last-child { border-right: 0; }
.today-strip span, .today-strip strong { display: block; }
.today-strip span { color: var(--muted); font-size: 10px; font-weight: 700; }
.today-strip strong { margin-top: 3px; font-size: 21px; letter-spacing: -.035em; }

.recent-simple-panel { overflow: hidden; }
.simple-section-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.simple-section-head h3 { margin: 2px 0 0; font-size: 17px; }
.simple-empty { min-height: 180px; display: grid; place-items: center; align-content: center; text-align: center; padding: 28px; }
.simple-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 9px; border-radius: 12px; color: #768398; background: #f1f4f7; }
.simple-empty strong { font-size: 13px; }
.simple-empty p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; }
.simple-ticket-table th, .simple-ticket-table td { padding-top: 14px; padding-bottom: 14px; }

.ticket-progress {
    max-width: 980px;
    display: grid;
    grid-template-columns: auto minmax(20px,1fr) auto minmax(20px,1fr) auto minmax(20px,1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 auto 18px;
    padding: 0 10px;
}
.ticket-progress-step { display: flex; align-items: center; gap: 8px; color: #8b96a5; }
.ticket-progress-step span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e7ecf1; font-size: 11px; font-weight: 800; }
.ticket-progress-step strong { font-size: 11px; white-space: nowrap; }
.ticket-progress-step.is-active { color: var(--ink); }
.ticket-progress-step.is-active span { color: #fff; background: var(--accent); box-shadow: 0 6px 14px rgba(31,120,209,.2); }
.ticket-progress-line { height: 2px; background: #e4e9ee; }

.simple-ticket-workspace {
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}
.simple-ticket-heading { padding: 27px 30px 20px; text-align: center; }
.simple-ticket-heading h2 { margin: 5px 0 7px; font-size: 28px; letter-spacing: -.04em; }
.simple-ticket-heading p { margin: 0; color: var(--muted); font-size: 12px; }

.license-scan-card {
    width: calc(100% - 60px);
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 30px;
    padding: 16px 20px;
    border: 1px solid #bfdcf5;
    border-radius: 15px;
    background: linear-gradient(135deg, #eff8ff, #f8fbff);
    color: var(--ink);
    text-align: left;
    transition: .15s ease;
}
.license-scan-card:hover { border-color: #8ec1ea; background: #edf7ff; transform: translateY(-1px); }
.license-scan-icon { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--accent); font-size: 23px; box-shadow: 0 8px 18px rgba(31,120,209,.18); }
.license-scan-copy { flex: 1; }
.license-scan-copy strong, .license-scan-copy small { display: block; }
.license-scan-copy strong { font-size: 16px; }
.license-scan-copy small { margin-top: 4px; color: #63758a; font-size: 11px; }
.license-scan-arrow { color: var(--accent); font-size: 30px; font-weight: 300; }

.manual-divider { display: flex; align-items: center; gap: 14px; margin: 22px 30px 6px; color: #8995a5; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.manual-divider::before, .manual-divider::after { content: ""; flex: 1; height: 1px; background: #e8edf1; }
.simple-form-section { padding: 17px 30px 4px; }
.simple-form-section + .simple-form-section { padding-top: 22px; }
.simple-form-section h3 { margin: 0 0 12px; font-size: 13px; }
.simple-form-grid { padding: 0; }
.simple-form-grid .field > span { font-size: 10.5px; }
.simple-form-grid .field input, .simple-form-grid .field select { min-height: 44px; background: #fff; }

.more-details { margin: 24px 30px 0; border: 1px solid var(--line); border-radius: 13px; background: #fafbfd; overflow: hidden; }
.more-details summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; cursor: pointer; color: #4f5d70; font-size: 11px; font-weight: 750; list-style: none; }
.more-details summary::-webkit-details-marker { display: none; }
.more-details summary::before { content: "+"; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #e9eef3; color: #657488; font-size: 15px; }
.more-details[open] summary::before { content: "−"; }
.more-details summary span { margin-left: auto; color: #98a2ae; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.more-details-body { padding: 0 0 18px; border-top: 1px solid var(--line); background: #fff; }
.simple-form-section--nested { padding-left: 16px; padding-right: 16px; }

.simple-ticket-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding: 18px 30px; border-top: 1px solid var(--line); background: #fafbfd; }
.btn-next-step { min-width: 170px; min-height: 46px; justify-content: center; font-size: 12px; }

@media (max-width: 980px) {
    .simple-shell { grid-template-columns: 78px minmax(0,1fr); }
    .counter-home { max-width: 100%; }
}

@media (max-width: 760px) {
    .simple-content { padding-top: 20px; }
    .ready-card { padding: 40px 18px 34px; }
    .counter-shortcuts, .today-strip { grid-template-columns: 1fr; }
    .today-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .today-strip > div:last-child { border-bottom: 0; }
    .ticket-progress { grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .ticket-progress-line { display: none; }
    .ticket-progress-step { justify-content: center; flex-direction: column; gap: 4px; text-align: center; }
    .ticket-progress-step strong { font-size: 9px; }
    .simple-ticket-heading { padding-left: 18px; padding-right: 18px; }
    .license-scan-card { width: calc(100% - 36px); margin-left: 18px; margin-right: 18px; }
    .manual-divider, .more-details { margin-left: 18px; margin-right: 18px; }
    .simple-form-section { padding-left: 18px; padding-right: 18px; }
    .simple-ticket-actions { padding-left: 18px; padding-right: 18px; }
}

/* --------------------------------------------------------------------------
   v4.0.2 Compact Customer Intake
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
    .simple-shell { grid-template-columns: 206px minmax(0, 1fr); }
    .simple-sidebar { padding: 18px 13px 14px; }
    .simple-nav { margin-top: 28px; }
    .simple-nav .nav-item { min-height: 42px; }
    .simple-topbar { min-height: 64px; padding-top: 9px; padding-bottom: 9px; }
    .simple-topbar h1 { font-size: 20px; }
    .simple-content { max-width: 1500px; padding: 14px 22px 22px; }
}
.ticket-progress--compact { max-width: 890px; margin-bottom: 10px; }
.ticket-progress--compact .ticket-progress-step span { width: 25px; height: 25px; font-size: 10px; }
.ticket-progress--compact .ticket-progress-step strong { font-size: 10.5px; }

.compact-ticket-workspace {
    width: 100%; max-width: 1320px; margin: 0 auto; overflow: hidden;
    border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm);
}
.compact-ticket-header {
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff, #fbfcfd);
}
.compact-ticket-header h2 { margin: 2px 0 2px; font-size: 20px; letter-spacing: -.035em; }
.compact-ticket-header p { margin: 0; color: var(--muted); font-size: 10.5px; }
.compact-scan-button {
    min-width: 270px; display: flex; align-items: center; gap: 10px; padding: 9px 13px;
    border: 1px solid #b8d9f4; border-radius: 11px; color: #16334e;
    background: #eff8ff; text-align: left; transition: .15s ease;
}
.compact-scan-button:hover { border-color: #80bce8; background: #e9f5ff; }
.compact-scan-button strong, .compact-scan-button small { display: block; }
.compact-scan-button strong { font-size: 11.5px; }
.compact-scan-button small { margin-top: 1px; color: #70849a; font-size: 8.5px; }
.compact-scan-icon {
    width: 33px; height: 33px; flex: 0 0 33px; display: grid; place-items: center;
    border-radius: 9px; color: #fff; background: var(--accent); font-size: 16px;
}
.compact-ticket-body { padding: 12px 16px 10px; }
.compact-section {
    min-width: 0; padding: 11px 12px 12px; border: 1px solid #e3e8ee;
    border-radius: 12px; background: #fff;
}
.compact-section + .compact-section { margin-top: 10px; }
.compact-section-title {
    display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding-bottom: 7px;
    border-bottom: 1px solid #edf1f4;
}
.compact-section-title h3 { margin: 0; font-size: 12px; letter-spacing: -.01em; }
.compact-section-title span {
    margin-left: auto; color: #8490a0; font-size: 7.5px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
}
.compact-grid { display: grid; gap: 7px 8px; }
.compact-grid--identity { grid-template-columns: 1.35fr 1.65fr .65fr 1.15fr 1.35fr 1fr 1fr; }
.compact-grid--identity .field--id-number { grid-column: span 2; }
.compact-grid--identity .field--phone { grid-column: span 2; }
.compact-grid--identity .field--first { grid-column: span 2; }
.compact-grid--identity .field--last { grid-column: span 2; }
.compact-grid--identity .field--address { grid-column: span 2; }
.compact-grid--identity .field--address2 { grid-column: span 2; }

.compact-two-column { display: grid; grid-template-columns: 1.12fr .88fr; gap: 10px; margin-top: 10px; }
.compact-two-column .compact-section + .compact-section { margin-top: 0; }
.compact-grid--physical { grid-template-columns: repeat(6, minmax(0,1fr)); }
.compact-grid--physical .field--comments { grid-column: 1 / -1; }
.compact-grid--vehicle { grid-template-columns: repeat(3, minmax(0,1fr)); }
.compact-grid--vehicle .field--plate { grid-column: span 2; }

.compact-ticket-workspace .field { gap: 3px; min-width: 0; }
.compact-ticket-workspace .field > span { color: #59677a; font-size: 9px; font-weight: 750; line-height: 1.1; }
.compact-ticket-workspace .field input,
.compact-ticket-workspace .field select {
    min-width: 0; min-height: 35px; height: 35px; padding: 0 9px;
    border-radius: 8px; background: #fbfcfd; font-size: 11px;
}
.compact-ticket-workspace .field input:focus,
.compact-ticket-workspace .field select:focus { background: #fff; }
.height-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.unit-input { position: relative; }
.unit-input input { padding-right: 31px !important; }
.unit-input small {
    position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
    color: #8792a2; font-size: 8px; pointer-events: none;
}
.compact-ticket-actions {
    min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 9px 16px;
    border-top: 1px solid var(--line); background: #fafbfd;
}
.compact-action-note { margin-left: auto; color: #7b8797; font-size: 9px; }
.compact-action-note span { color: #566477; font-weight: 800; }
.compact-ticket-actions .btn-next-step { min-height: 38px; min-width: 190px; }

@media (min-width: 981px) and (max-height: 850px) {
    .simple-topbar { min-height: 58px; }
    .simple-content { padding-top: 10px; }
    .ticket-progress--compact { margin-bottom: 7px; }
    .compact-ticket-header { padding-top: 10px; padding-bottom: 10px; }
    .compact-ticket-body { padding-top: 9px; padding-bottom: 8px; }
    .compact-section { padding-top: 8px; padding-bottom: 9px; }
    .compact-section-title { margin-bottom: 6px; padding-bottom: 5px; }
    .compact-ticket-workspace .field input,
    .compact-ticket-workspace .field select { min-height: 32px; height: 32px; }
    .compact-ticket-actions { min-height: 50px; padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 1100px) {
    .compact-grid--identity { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .compact-grid--identity .field--id-number,
    .compact-grid--identity .field--phone,
    .compact-grid--identity .field--first,
    .compact-grid--identity .field--last,
    .compact-grid--identity .field--address,
    .compact-grid--identity .field--address2 { grid-column: span 2; }
    .compact-two-column { grid-template-columns: 1fr; }
    .compact-grid--physical { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .compact-ticket-header { align-items: stretch; flex-direction: column; }
    .compact-scan-button { min-width: 0; width: 100%; }
    .compact-ticket-body { padding: 10px; }
    .compact-grid--identity, .compact-grid--physical, .compact-grid--vehicle { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .compact-grid--identity .field, .compact-grid--physical .field, .compact-grid--vehicle .field { grid-column: auto; }
    .compact-grid--identity .field--address, .compact-grid--identity .field--address2,
    .compact-grid--physical .field--comments, .compact-grid--vehicle .field--plate { grid-column: 1 / -1; }
    .compact-ticket-actions { flex-wrap: wrap; }
    .compact-action-note { display: none; }
    .compact-ticket-actions .btn-next-step { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   v4.0.3 Dense customer intake
   Horizontal label/input pairs intentionally mirror the efficient footprint
   of the legacy counter form while retaining the v4 visual system.
   -------------------------------------------------------------------------- */
.ticket-progress--dense { max-width: 760px; margin-bottom: 7px; }
.ticket-progress--dense .ticket-progress-step span { width: 23px; height: 23px; font-size: 10px; }
.ticket-progress--dense .ticket-progress-step strong { font-size: 11px; }

.dense-ticket-workspace {
    width: 100%; max-width: 1280px; margin: 0 auto; overflow: hidden;
    border: 1px solid #dce3ea; border-radius: 14px; background: #fff;
    box-shadow: 0 7px 24px rgba(27,45,70,.06);
}
.dense-ticket-header {
    min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 9px 14px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg,#fff,#fbfcfd);
}
.dense-title-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dense-ticket-header h2 { margin: 1px 0 0; font-size: 19px; letter-spacing: -.03em; }
.dense-help { color: #788699; font-size: 11.5px; }
.dense-scan-button {
    min-width: 244px; display: flex; align-items: center; gap: 9px; padding: 7px 11px;
    border: 1px solid #b8d9f4; border-radius: 10px; color: #16334e;
    background: #eff8ff; text-align: left; transition: .15s ease;
}
.dense-scan-button:hover { border-color: #80bce8; background: #e8f5ff; }
.dense-scan-button strong, .dense-scan-button small { display: block; }
.dense-scan-button strong { font-size: 12.5px; line-height: 1.15; }
.dense-scan-button small { margin-top: 1px; color: #70849a; font-size: 9px; }
.dense-scan-icon {
    width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center;
    border-radius: 8px; color: #fff; background: var(--accent); font-size: 14px;
}

.dense-ticket-body { padding: 9px 12px 8px; }
.dense-section {
    min-width: 0; padding: 8px 10px 9px; border: 1px solid #e2e8ee;
    border-radius: 10px; background: #fff;
}
.dense-section-title {
    display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding-bottom: 5px;
    border-bottom: 1px solid #e8edf2;
}
.dense-section-title h3 { margin: 0; color: #1a2636; font-size: 14px; letter-spacing: -.01em; }
.dense-section-title > span {
    margin-left: auto; color: #8793a3; font-size: 8px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
}
.dense-lower-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 9px; margin-top: 9px; }
.dense-form-rows { display: flex; flex-direction: column; gap: 6px; }
.dense-row { display: flex; align-items: center; gap: 13px; min-width: 0; flex-wrap: nowrap; }

.dense-field {
    --control-width: 130px;
    display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 0 0 auto;
}
.dense-field > span {
    flex: 0 0 auto; color: #334155; font-size: 12.5px; font-weight: 700; line-height: 1.15;
    white-space: nowrap;
}
.dense-field input,
.dense-field select,
.dense-field textarea {
    width: var(--control-width); min-width: 0; border: 1px solid #cfd7e0; border-radius: 6px;
    color: #152235; background: #fff; font-family: inherit; font-size: 14px; font-weight: 500;
    box-sizing: border-box;
}
.dense-field input,
.dense-field select { height: 33px; padding: 0 8px; }
.dense-field textarea { height: 44px; padding: 6px 8px; resize: none; line-height: 1.25; }
.dense-field input::placeholder { color: #9aa5b3; }
.dense-field input:focus,
.dense-field select:focus,
.dense-field textarea:focus {
    outline: none; border-color: #6dafe0; box-shadow: 0 0 0 2px rgba(31,120,209,.09);
}

.dense-field--id-type { --control-width: 175px; }
.dense-field--id-number { --control-width: 135px; }
.dense-field--state { --control-width: 74px; }
.dense-field--dob { --control-width: 132px; }
.dense-field--phone { --control-width: 150px; }
.dense-field--first { --control-width: 180px; }
.dense-field--last { --control-width: 205px; }
.dense-field--address { --control-width: 205px; }
.dense-field--address2 { --control-width: 190px; }
.dense-field--city { --control-width: 150px; }
.dense-field--zip { --control-width: 92px; }
.dense-field--phone-bottom { --control-width: 185px; }

.dense-field--race,
.dense-field--eye { --control-width: 125px; }
.dense-field--sex,
.dense-field--hair { --control-width: 125px; }
.dense-row--physical { justify-content: space-between; }
.dense-field--height { flex: 1 1 auto; }
.dense-height { display: flex; align-items: center; gap: 4px; }
.dense-height input { width: 50px; }
.dense-height small,
.dense-unit small { color: #475569; font-size: 11px; font-weight: 700; }
.dense-field--weight { --control-width: 72px; }
.dense-unit { display: flex; align-items: center; gap: 5px; }
.dense-field--comments { display: flex; align-items: flex-start; width: 100%; }
.dense-field--comments > span { padding-top: 7px; }
.dense-field--comments textarea { width: 100%; flex: 1 1 auto; }

.dense-row--vehicle { gap: 12px; }
.dense-field--make { --control-width: 112px; }
.dense-field--model { --control-width: 120px; }
.dense-field--color { --control-width: 145px; }
.dense-field--year { --control-width: 82px; }
.dense-field--plate-state { --control-width: 72px; }
.dense-field--plate { --control-width: 126px; }

.dense-ticket-actions {
    min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-top: 1px solid var(--line); background: #fafbfd;
}
.dense-ticket-actions .btn { min-height: 34px; padding-top: 7px; padding-bottom: 7px; font-size: 11.5px; }
.dense-action-note { margin-left: auto; color: #7b8797; font-size: 10px; }
.dense-next-button { min-width: 175px; }

@media (min-width: 981px) and (max-height: 850px) {
    .simple-content { padding-top: 8px; }
    .ticket-progress--dense { margin-bottom: 5px; }
    .dense-ticket-header { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
    .dense-ticket-body { padding-top: 7px; padding-bottom: 6px; }
    .dense-section { padding-top: 6px; padding-bottom: 7px; }
    .dense-section-title { margin-bottom: 5px; padding-bottom: 4px; }
    .dense-form-rows { gap: 5px; }
    .dense-field input, .dense-field select { height: 31px; }
    .dense-field textarea { height: 40px; }
    .dense-ticket-actions { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
}

@media (max-width: 1280px) {
    .dense-row { gap: 9px; }
    .dense-field > span { font-size: 12px; }
    .dense-field--id-type { --control-width: 155px; }
    .dense-field--phone { --control-width: 135px; }
    .dense-field--first { --control-width: 160px; }
    .dense-field--last { --control-width: 175px; }
    .dense-field--address { --control-width: 185px; }
    .dense-field--address2 { --control-width: 170px; }
}

@media (max-width: 1100px) {
    .dense-row { flex-wrap: wrap; }
    .dense-lower-grid { grid-template-columns: 1fr; }
    .dense-row--physical { justify-content: flex-start; }
}

@media (max-width: 760px) {
    .dense-ticket-header { align-items: stretch; flex-direction: column; }
    .dense-scan-button { min-width: 0; width: 100%; }
    .dense-title-line { display: block; }
    .dense-help { display: block; margin-top: 2px; }
    .dense-row { align-items: stretch; flex-direction: column; gap: 6px; }
    .dense-field { width: 100%; display: grid; grid-template-columns: 110px minmax(0,1fr); }
    .dense-field input, .dense-field select, .dense-field textarea { width: 100%; }
    .dense-field--comments { display: grid; }
    .dense-ticket-actions { flex-wrap: wrap; }
    .dense-action-note { display: none; }
    .dense-next-button { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   v4.0.4 Visual polish
   Preserve the dense one-screen workflow while giving the counter form a more
   finished, premium look through hierarchy, surface treatment and focus states.
   -------------------------------------------------------------------------- */

/* A quieter canvas makes the form itself feel intentional rather than floating. */
.app-main {
    background:
        radial-gradient(circle at 74% 8%, rgba(31,120,209,.045), transparent 24%),
        linear-gradient(180deg, #f5f8fb 0%, #f2f6f9 100%);
}
.simple-topbar {
    border-bottom-color: #dde6ee;
    box-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.simple-sidebar {
    background:
        radial-gradient(circle at 8% 0%, rgba(46,143,217,.20), transparent 31%),
        linear-gradient(180deg,#101b2b 0%,#0f1928 100%);
}
.simple-nav .nav-item.is-active {
    background: linear-gradient(90deg, rgba(47,134,207,.24), rgba(47,134,207,.14));
    box-shadow: inset 3px 0 0 #46a7ea, inset 0 1px 0 rgba(255,255,255,.025);
}

.ticket-progress--dense {
    position: relative;
    margin-bottom: 8px;
}
.ticket-progress--dense .ticket-progress-line {
    height: 1px;
    background: #dce5ed;
}
.ticket-progress--dense .ticket-progress-step span {
    border: 1px solid #dde5ed;
    color: #8190a2;
    background: #f0f4f7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.ticket-progress--dense .ticket-progress-step.is-active span {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(145deg,#3093dd,#1c70bf);
    box-shadow: 0 5px 13px rgba(31,120,209,.22), 0 0 0 3px rgba(31,120,209,.07);
}
.ticket-progress--dense .ticket-progress-step.is-active strong { color: #203147; }

.dense-ticket-workspace {
    position: relative;
    border-color: #d6e1ea;
    border-radius: 17px;
    box-shadow: 0 12px 38px rgba(25,47,73,.075), 0 2px 7px rgba(25,47,73,.035);
}
.dense-ticket-workspace::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,#2180cf 0%,#46a6e8 46%,#7bc0ef 100%);
}
.dense-ticket-header {
    position: relative;
    min-height: 58px;
    padding-top: 10px;
    background: linear-gradient(135deg,#ffffff 0%,#fbfdff 58%,#f4f9fd 100%);
    border-bottom-color: #e0e8ef;
}
.dense-ticket-heading .kicker {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 1px 7px;
    border: 1px solid #d8eafb;
    border-radius: 999px;
    color: #166db6;
    background: #edf7ff;
    font-size: 8px;
    letter-spacing: .09em;
}
.dense-ticket-header h2 {
    color: #17263a;
    font-size: 19.5px;
    font-weight: 780;
}
.dense-help { color: #748398; }

.dense-scan-button {
    border-color: #b9d9f1;
    color: #173552;
    background: linear-gradient(145deg,#f7fcff,#eaf6ff);
    box-shadow: 0 4px 12px rgba(31,120,209,.07), inset 0 1px 0 rgba(255,255,255,.85);
}
.dense-scan-button:hover {
    border-color: #7ebbe8;
    background: linear-gradient(145deg,#f5fbff,#e4f3ff);
    box-shadow: 0 7px 18px rgba(31,120,209,.11), inset 0 1px 0 #fff;
    transform: translateY(-1px);
}
.dense-scan-icon {
    background: linear-gradient(145deg,#2f91d9,#176bb9);
    box-shadow: 0 5px 12px rgba(31,120,209,.20), inset 0 1px 0 rgba(255,255,255,.2);
}

.dense-ticket-body {
    background: linear-gradient(180deg,#fbfcfe 0%,#f8fafc 100%);
}
.dense-section {
    position: relative;
    border-color: #dfe7ee;
    background: linear-gradient(180deg,#ffffff,#fdfefe);
    box-shadow: 0 2px 7px rgba(34,55,78,.035), inset 0 1px 0 #fff;
}
.dense-section::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg,#3599df,#1f78d1);
    opacity: .9;
}
.dense-section--physical::before { background: linear-gradient(180deg,#49a7c7,#2d819f); }
.dense-section--vehicle::before { background: linear-gradient(180deg,#5a8ab6,#3d6c98); }

.dense-section-title {
    margin-left: 1px;
    border-bottom-color: #e8eef3;
}
.dense-section-title h3 {
    color: #1b2d42;
    font-size: 13.5px;
    font-weight: 780;
}
.dense-section-title > span {
    padding: 2px 6px;
    border: 1px solid #e1e9f0;
    border-radius: 999px;
    color: #718196;
    background: #f5f8fa;
    font-size: 7.5px;
    letter-spacing: .06em;
}
.dense-section--personal .dense-section-title > span {
    border-color: #dbeaf8;
    color: #3674a9;
    background: #f1f8fe;
}

.dense-field > span {
    color: #2d3e52;
    font-size: 12.5px;
    font-weight: 730;
}
.dense-field input,
.dense-field select,
.dense-field textarea {
    border-color: #cdd8e2;
    color: #132338;
    background: #fcfdff;
    box-shadow: inset 0 1px 2px rgba(31,49,70,.025), 0 1px 0 rgba(255,255,255,.9);
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.dense-field input:hover,
.dense-field select:hover,
.dense-field textarea:hover {
    border-color: #b9c9d8;
    background: #fff;
}
.dense-field input:focus,
.dense-field select:focus,
.dense-field textarea:focus {
    border-color: #4d9bd5;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31,120,209,.09), inset 0 1px 1px rgba(31,49,70,.02);
}
.dense-field input::placeholder { color: #9aa7b6; }
.dense-height small,
.dense-unit small { color: #526277; }

.dense-ticket-actions {
    border-top-color: #dfe7ee;
    background: linear-gradient(180deg,#fbfcfd,#f7f9fb);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.dense-ticket-actions .btn-ghost {
    border-color: #d9e2ea;
    color: #53657a;
    background: #fff;
}
.dense-ticket-actions .btn-ghost:hover {
    border-color: #c8d5e0;
    background: #f7fafc;
}
.dense-action-note { color: #8290a1; }
.dense-next-button {
    border-color: #176bb7;
    background: linear-gradient(180deg,#2d8bd6,#1d73c1);
    box-shadow: 0 6px 16px rgba(31,120,209,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.dense-next-button:hover {
    background: linear-gradient(180deg,#2682ce,#1868b1);
    box-shadow: 0 8px 18px rgba(31,120,209,.22), inset 0 1px 0 rgba(255,255,255,.16);
}

@media (min-width: 981px) and (max-height: 850px) {
    .dense-ticket-header { padding-top: 7px; }
    .dense-ticket-heading .kicker { min-height: 16px; padding-top: 0; padding-bottom: 0; }
    .dense-section::before { top: 8px; height: 18px; }
}

/* --------------------------------------------------------------------------
   v4.0.5 Contrast polish
   Stronger surface separation for the counter form while preserving the
   dense one-screen layout and control dimensions.
   -------------------------------------------------------------------------- */

/* Create a visibly different canvas behind the ticket instead of letting the
   white form fade into a near-white page. */
.app-main {
    background:
        radial-gradient(circle at 76% 3%, rgba(40,126,196,.075), transparent 26%),
        linear-gradient(180deg,#eaf0f6 0%,#edf2f7 48%,#e9eff5 100%);
}
.simple-content { position: relative; }

/* The ticket becomes the unmistakable working surface. */
.dense-ticket-workspace {
    border: 1px solid #bdcad7;
    background: #ffffff;
    box-shadow:
        0 18px 42px rgba(24,45,70,.12),
        0 3px 9px rgba(24,45,70,.055),
        0 0 0 1px rgba(255,255,255,.78) inset;
}
.dense-ticket-workspace::before {
    height: 4px;
    background: linear-gradient(90deg,#1677c5 0%,#2994dc 45%,#70b9ea 100%);
}

.dense-ticket-header {
    background: linear-gradient(135deg,#ffffff 0%,#f8fbfe 62%,#edf6fd 100%);
    border-bottom: 1px solid #cedae5;
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
}
.dense-ticket-header h2 { color: #11243a; }
.dense-help { color: #63778d; }

/* A cool inner canvas separates the individual information cards from the
   outer ticket shell without costing any vertical space. */
.dense-ticket-body {
    background: #eef3f7;
    border-top: 1px solid rgba(255,255,255,.85);
}

/* Crisp white sub-cards with stronger edges. */
.dense-section {
    border-color: #c7d4df;
    background: #ffffff;
    box-shadow:
        0 3px 10px rgba(30,52,75,.065),
        0 1px 2px rgba(30,52,75,.035),
        inset 0 1px 0 rgba(255,255,255,.95);
}
.dense-section:hover {
    border-color: #b8c9d8;
}

/* Section headers get a gentle tint so the eye can find each area instantly.
   Negative margins reuse existing section padding, preserving form height. */
.dense-section-title {
    margin: -8px -10px 8px;
    padding: 7px 10px 6px 13px;
    border-bottom: 1px solid #d6e1ea;
    border-radius: 9px 9px 0 0;
    background: #f2f7fb;
}
.dense-section--personal .dense-section-title {
    background: linear-gradient(90deg,#edf6fd 0%,#f6faff 72%,#ffffff 100%);
    border-bottom-color: #cfe1ef;
}
.dense-section--physical .dense-section-title {
    background: linear-gradient(90deg,#eef8fa 0%,#f7fbfc 72%,#ffffff 100%);
    border-bottom-color: #d0e4e8;
}
.dense-section--vehicle .dense-section-title {
    background: linear-gradient(90deg,#f0f5fa 0%,#f8fafc 72%,#ffffff 100%);
    border-bottom-color: #d7e1ea;
}
.dense-section-title h3 {
    color: #142941;
    font-weight: 800;
}
.dense-section-title > span {
    border-color: #cedae4;
    color: #5d7187;
    background: rgba(255,255,255,.82);
    box-shadow: 0 1px 2px rgba(30,52,75,.035);
}
.dense-section--personal .dense-section-title > span {
    border-color: #c7deef;
    color: #266a9f;
    background: #ffffff;
}

/* Keep the compact measurements but make every editable area visually obvious. */
.dense-field > span {
    color: #26394f;
    font-weight: 760;
}
.dense-field input,
.dense-field select,
.dense-field textarea {
    border-color: #aebdcc;
    color: #10243a;
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(25,45,67,.035),
        inset 0 1px 1px rgba(25,45,67,.025);
}
.dense-field input:hover,
.dense-field select:hover,
.dense-field textarea:hover {
    border-color: #8fa6ba;
    background: #ffffff;
}
.dense-field input:focus,
.dense-field select:focus,
.dense-field textarea:focus {
    border-color: #2686ca;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(31,120,209,.13), 0 1px 2px rgba(25,45,67,.04);
}
.dense-field input::placeholder { color: #8292a4; }

/* The scan action should read as a purposeful tool, not another pale card. */
.dense-scan-button {
    border-color: #8fc0e4;
    background: linear-gradient(145deg,#f4fbff,#e5f3fd);
    box-shadow: 0 5px 13px rgba(31,120,209,.10), inset 0 1px 0 #fff;
}
.dense-scan-button strong { color: #153653; }
.dense-scan-button small { color: #5e7890; }

/* Anchor the controls to the ticket with a clearly separate footer surface. */
.dense-ticket-actions {
    border-top-color: #c9d6e1;
    background: linear-gradient(180deg,#f8fafc,#edf3f7);
    box-shadow: inset 0 1px 0 #ffffff;
}
.dense-ticket-actions .btn-ghost {
    border-color: #c2cfda;
    color: #435970;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(25,45,67,.035);
}
.dense-action-note { color: #6f8193; }

/* Keep the compact-height media query aligned with the negative title margins. */
@media (min-width: 981px) and (max-height: 850px) {
    .dense-section-title {
        margin-top: -6px;
        margin-bottom: 6px;
        padding-top: 6px;
        padding-bottom: 5px;
    }
}

/* --------------------------------------------------------------------------
   v4.0.7 Professional polish (previous layer)
   Pulls the interface back to a restrained county/industrial palette: one
   confident navy/steel-blue identity, neutral work surfaces and clear actions.
   No dimensions or field layout are changed.
   -------------------------------------------------------------------------- */

:root {
    --professional-navy: #18324b;
    --professional-navy-deep: #102438;
    --professional-blue: #247fbd;
    --professional-blue-dark: #1c679a;
    --professional-steel: #5d7890;
}

/* A composed application header: dark enough to frame the work area, but not
   bright or decorative. The slim blue rule supplies the only strong accent. */
.simple-topbar {
    min-height: 64px;
    color: #fff;
    background: linear-gradient(180deg, #1c3954 0%, #173149 100%);
    border-bottom: 0;
    box-shadow: 0 4px 16px rgba(16,36,56,.16);
}
.simple-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: #2f91cf;
}
.simple-topbar .topbar-context {
    color: #a9c2d6;
    font-weight: 800;
}
.simple-topbar h1 {
    color: #fff;
    text-shadow: none;
}
.simple-topbar .user-chip {
    border-left-color: rgba(255,255,255,.18);
}
.simple-topbar .user-chip strong { color: #fff; }
.simple-topbar .user-chip div > span { color: #b9cad8; }
.simple-topbar .user-avatar {
    color: #24445e;
    background: #edf4f8;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
}
.simple-topbar .icon-btn { color: #c4d4e0; }
.simple-topbar .icon-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

/* Keep branding consistent with the header instead of introducing more colors. */
.brand-mark {
    background: linear-gradient(145deg,#318ecb,#1c6fa9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 7px 18px rgba(11,72,113,.24);
}
.simple-sidebar {
    background:
        radial-gradient(circle at 8% 0%, rgba(47,145,207,.14), transparent 29%),
        linear-gradient(180deg,#102238 0%,#0d1929 100%);
}
.simple-nav .nav-item.is-active {
    background: rgba(45,128,187,.20);
    box-shadow: inset 3px 0 0 #43a2de;
}
.simple-nav .nav-item.is-active .nav-icon { color: #72b9e6; }

/* Neutral canvas: enough contrast to define the ticket without looking tinted. */
.app-main {
    background:
        radial-gradient(circle at 74% 5%, rgba(48,120,169,.045), transparent 24%),
        linear-gradient(180deg,#edf2f6 0%,#f2f5f8 100%);
}

/* Workflow progress is deliberately monochrome apart from the current step. */
.ticket-progress--dense .ticket-progress-line {
    height: 1px;
    background: #cfd9e2;
}
.ticket-progress--dense .ticket-progress-step span {
    border: 1px solid #d6e0e8;
    color: #7a8998;
    background: #edf1f4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
.ticket-progress--dense .ticket-progress-step strong { color: #7a8796; }
.ticket-progress--dense .ticket-progress-step.is-active span {
    border-color: #227db8;
    color: #fff;
    background: linear-gradient(180deg,#3295d3,#237db8);
    box-shadow: 0 4px 11px rgba(35,125,184,.20);
}
.ticket-progress--dense .ticket-progress-step.is-active strong { color: #203347; }

/* Strong, crisp ticket shell. One accent line is more polished than several
   competing color families. */
.dense-ticket-workspace {
    border-color: #c3d0db;
    box-shadow: 0 14px 38px rgba(24,50,75,.10), 0 2px 7px rgba(24,50,75,.04);
}
.dense-ticket-workspace::before {
    height: 4px;
    background: #2e8fca;
}
.dense-ticket-header {
    background: linear-gradient(180deg,#ffffff 0%,#f7fafc 100%);
    border-bottom-color: #d1dbe4;
}
.dense-ticket-heading .kicker {
    color: #246f9f;
    border-color: #c9dfed;
    background: #eef6fb;
}
.dense-ticket-header h2 { color: #172b3e; }
.dense-help { color: #718294; }

/* Scanner is a clear tool action, using the same single accent as the rest. */
.dense-scan-button {
    border-color: #9fc6df;
    color: #18344b;
    background: linear-gradient(180deg,#f8fcff,#edf6fb);
    box-shadow: 0 3px 9px rgba(31,103,151,.07), inset 0 1px 0 #fff;
}
.dense-scan-button:hover {
    border-color: #6caad0;
    background: linear-gradient(180deg,#f5fbff,#e8f3fa);
    box-shadow: 0 5px 12px rgba(31,103,151,.10), inset 0 1px 0 #fff;
}
.dense-scan-icon {
    background: linear-gradient(180deg,#348fca,#2479b0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}

/* The work surface remains separated, while all three information groups use
   one coherent visual language instead of blue/teal/gold color coding. */
.dense-ticket-body {
    background: #edf2f6;
}
.dense-section,
.dense-section--personal,
.dense-section--physical,
.dense-section--vehicle {
    border-color: #bdcad5;
    background: #fff;
    box-shadow: 0 3px 10px rgba(30,52,75,.055), inset 0 1px 0 #fff;
}
.dense-section:hover,
.dense-section--personal:hover,
.dense-section--physical:hover,
.dense-section--vehicle:hover { border-color: #aebfcd; }

.dense-section-title,
.dense-section--personal .dense-section-title,
.dense-section--physical .dense-section-title,
.dense-section--vehicle .dense-section-title {
    background: linear-gradient(180deg,#f6f9fb,#eef3f7);
    border-bottom-color: #cdd8e1;
}
.dense-section::before,
.dense-section--personal::before,
.dense-section--physical::before,
.dense-section--vehicle::before {
    background: #398fc5;
}
.dense-section-title h3,
.dense-section--personal .dense-section-title h3,
.dense-section--physical .dense-section-title h3,
.dense-section--vehicle .dense-section-title h3 {
    color: #20384e;
}
.dense-section-title > span,
.dense-section--personal .dense-section-title > span,
.dense-section--physical .dense-section-title > span,
.dense-section--vehicle .dense-section-title > span {
    color: #597086;
    border-color: #c8d5df;
    background: #fff;
}

/* Inputs get a little more definition without looking heavy. */
.dense-field > span { color: #263b50; }
.dense-field input,
.dense-field select,
.dense-field textarea {
    border-color: #a9b9c8;
    color: #14283b;
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(19,39,58,.025), 0 1px 1px rgba(19,39,58,.025);
}
.dense-field input:hover,
.dense-field select:hover,
.dense-field textarea:hover { border-color: #8fa5b7; }
.dense-field input:focus,
.dense-field select:focus,
.dense-field textarea:focus {
    border-color: #2f89c2;
    box-shadow: 0 0 0 3px rgba(47,137,194,.12);
}

/* Forward action returns to blue. Green is reserved for actual success/status. */
.dense-next-button {
    border-color: #1f6f9f;
    background: linear-gradient(180deg,#318fc8,#247cb5);
    box-shadow: 0 5px 13px rgba(36,124,181,.18), inset 0 1px 0 rgba(255,255,255,.16);
}
.dense-next-button:hover {
    background: linear-gradient(180deg,#2b84bb,#216fa3);
    box-shadow: 0 6px 15px rgba(36,124,181,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
.dense-ticket-actions {
    background: linear-gradient(180deg,#f8fafc,#eef3f6);
    border-top-color: #c5d2dc;
}

/* --------------------------------------------------------------------------
   v4.0.8 PhishGuard-inspired polish
   Borrow the strongest visual ideas from the Academy interface: a clean white
   application bar, a confident blue workflow banner, pale-blue canvas, crisp
   white work cards, and one saturated royal-blue action color. The dense
   one-screen counter layout and all field dimensions remain unchanged.
   -------------------------------------------------------------------------- */

:root {
    --academy-navy: #123f68;
    --academy-blue: #236fa8;
    --academy-cobalt: #2f6fdd;
    --academy-cobalt-dark: #245ec4;
    --academy-pale: #eef5fb;
    --academy-pale-2: #f6faff;
    --academy-line: #d4e0eb;
    --academy-ink: #153a5b;
}

/* The Academy works because the global chrome stays quiet while the current
   task gets the strong color. Bring that same hierarchy here. */
.simple-topbar {
    min-height: 62px;
    color: #17324a;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #d7e2ec;
    box-shadow: 0 3px 12px rgba(22,55,84,.055);
    backdrop-filter: blur(10px);
}
.simple-topbar::after {
    height: 2px;
    background: linear-gradient(90deg,#184f7c 0%,#2f7fbd 52%,#4c91c7 100%);
}
.simple-topbar .topbar-context {
    color: #6c7e91;
    font-weight: 800;
}
.simple-topbar h1 {
    color: #17324a;
    text-shadow: none;
}
.simple-topbar .user-chip { border-left-color: #dde6ee; }
.simple-topbar .user-chip strong { color: #17324a; }
.simple-topbar .user-chip div > span { color: #76869a; }
.simple-topbar .user-avatar {
    color: #204f76;
    background: #edf4fa;
    box-shadow: inset 0 0 0 1px #d8e5ef;
}
.simple-topbar .icon-btn { color: #72869a; }
.simple-topbar .icon-btn:hover {
    color: #174e78;
    background: #edf4fa;
}

/* Keep the sidebar grounded, but shift it toward the same blue family as the
   Academy header so the interface feels intentionally branded rather than gray. */
.simple-sidebar {
    background:
        radial-gradient(circle at 7% 0%, rgba(55,132,190,.18), transparent 30%),
        linear-gradient(180deg,#102d48 0%,#0c1d31 100%);
}
.brand-mark {
    background: linear-gradient(145deg,#2b84ca,#1c67a6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 7px 18px rgba(8,63,105,.24);
}
.simple-nav .nav-item.is-active {
    background: linear-gradient(90deg,rgba(47,111,221,.24),rgba(40,120,190,.16));
    box-shadow: inset 3px 0 0 #5ba8e3;
}
.simple-nav .nav-item.is-active .nav-icon { color: #86c3ed; }

/* Pale blue canvas mirrors the Academy lesson background and makes the white
   ticket surface read immediately without resorting to heavy borders. */
.app-main {
    background:
        radial-gradient(circle at 76% 5%, rgba(67,134,191,.06), transparent 25%),
        linear-gradient(180deg,#eaf2f9 0%,#f2f6fa 100%);
}

/* Turn the four-step path into a compact roadmap strip. It remains small enough
   for the one-screen requirement but now reads as part of the workflow. */
.ticket-progress--dense {
    margin-bottom: 8px;
    padding: 7px 15px;
    border: 1px solid #d6e2ed;
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 4px 15px rgba(25,65,100,.045);
}
.ticket-progress--dense .ticket-progress-line {
    height: 1px;
    background: #d2dee8;
}
.ticket-progress--dense .ticket-progress-step span {
    border: 1px solid #d5e0e9;
    color: #7e8d9d;
    background: #f0f4f7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}
.ticket-progress--dense .ticket-progress-step strong { color: #7b8998; }
.ticket-progress--dense .ticket-progress-step.is-active span {
    border-color: #2c6fd2;
    color: #fff;
    background: linear-gradient(180deg,#397fe6,#2e69cc);
    box-shadow: 0 4px 10px rgba(47,111,221,.22), 0 0 0 3px rgba(47,111,221,.07);
}
.ticket-progress--dense .ticket-progress-step.is-active strong { color: #173f63; }

/* The key move: give the current ticket the same confident blue hero treatment
   that makes the PhishGuard course pages feel polished. */
.dense-ticket-workspace {
    overflow: hidden;
    border-color: #cbd9e5;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 17px 42px rgba(19,58,91,.11), 0 2px 8px rgba(19,58,91,.035);
}
.dense-ticket-workspace::before { display: none; }
.dense-ticket-header {
    min-height: 62px;
    color: #fff;
    background: linear-gradient(104deg,#12466f 0%,#1b6092 48%,#287bb2 100%);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.dense-ticket-heading .kicker {
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #bcdaf0;
    background: transparent;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .11em;
}
.dense-ticket-header h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 790;
    letter-spacing: -.025em;
}
.dense-help { color: #d3e5f2; }

/* A white scan control on the blue banner is easier to spot than another pale
   blue panel and closely follows the Academy's navigation/button language. */
.dense-scan-button {
    border-color: rgba(255,255,255,.78);
    color: #173d5d;
    background: #fff;
    box-shadow: 0 6px 16px rgba(7,45,77,.17), inset 0 1px 0 #fff;
}
.dense-scan-button:hover {
    border-color: #fff;
    background: #f8fbfe;
    box-shadow: 0 8px 18px rgba(7,45,77,.22), inset 0 1px 0 #fff;
    transform: translateY(-1px);
}
.dense-scan-button strong { color: #173d5d; }
.dense-scan-button small { color: #6d8295; }
.dense-scan-icon {
    color: #fff;
    background: linear-gradient(180deg,#3a7fe1,#2d69c9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px rgba(47,111,221,.18);
}

/* White work cards on a pale-blue inner canvas, like the Academy lesson cards.
   Keep the section treatment neutral so color continues to mean navigation and
   action rather than arbitrary field categories. */
.dense-ticket-body {
    background: #eef4f9;
}
.dense-section,
.dense-section--personal,
.dense-section--physical,
.dense-section--vehicle {
    border-color: #d0dce7;
    background: #fff;
    box-shadow: 0 4px 12px rgba(24,63,96,.055), inset 0 1px 0 #fff;
}
.dense-section:hover,
.dense-section--personal:hover,
.dense-section--physical:hover,
.dense-section--vehicle:hover { border-color: #becedc; }

/* Section headers use the same pale supporting blue as PhishGuard's instructional
   panels. A tiny blue marker is enough; no separate teal/gold category colors. */
.dense-section-title,
.dense-section--personal .dense-section-title,
.dense-section--physical .dense-section-title,
.dense-section--vehicle .dense-section-title {
    background: linear-gradient(90deg,#edf5fc 0%,#f7fafe 72%,#ffffff 100%);
    border-bottom-color: #d6e2ec;
}
.dense-section::before,
.dense-section--personal::before,
.dense-section--physical::before,
.dense-section--vehicle::before {
    background: #3278d7;
}
.dense-section-title h3,
.dense-section--personal .dense-section-title h3,
.dense-section--physical .dense-section-title h3,
.dense-section--vehicle .dense-section-title h3 {
    color: #173d5f;
    font-weight: 800;
}
.dense-section-title > span,
.dense-section--personal .dense-section-title > span,
.dense-section--physical .dense-section-title > span,
.dense-section--vehicle .dense-section-title > span {
    color: #4f6e89;
    border-color: #c8dae8;
    background: #fff;
}

/* Inputs stay neutral and clear. The cobalt focus treatment echoes the selected
   roadmap item in the Academy and is deliberately the only strong field color. */
.dense-field > span {
    color: #243d54;
    font-weight: 760;
}
.dense-field input,
.dense-field select,
.dense-field textarea {
    border-color: #b7c8d8;
    color: #132c43;
    background: #fff;
    box-shadow: inset 0 1px 1px rgba(22,55,84,.025), 0 1px 1px rgba(22,55,84,.02);
}
.dense-field input:hover,
.dense-field select:hover,
.dense-field textarea:hover { border-color: #96aec2; }
.dense-field input:focus,
.dense-field select:focus,
.dense-field textarea:focus {
    border-color: #3978d5;
    box-shadow: 0 0 0 3px rgba(47,111,221,.12);
}

/* The footer is quiet; the single forward action gets the same saturated royal
   blue as PhishGuard's Begin/Next actions. */
.dense-ticket-actions {
    background: linear-gradient(180deg,#fbfdff,#f2f6fa);
    border-top-color: #d1dee9;
}
.dense-ticket-actions .btn-ghost {
    color: #4f667c;
    border-color: #cfdae4;
    background: #fff;
}
.dense-ticket-actions .btn-ghost:hover {
    color: #294d6d;
    border-color: #b8c9d7;
    background: #f8fbfd;
}
.dense-action-note { color: #75879a; }
.dense-next-button {
    border-color: #275fc3;
    background: linear-gradient(180deg,#3d7de2,#2f69d0);
    box-shadow: 0 6px 15px rgba(47,105,208,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.dense-next-button:hover {
    background: linear-gradient(180deg,#3574d7,#295fc4);
    box-shadow: 0 8px 18px rgba(47,105,208,.26), inset 0 1px 0 rgba(255,255,255,.16);
}

@media (min-width: 981px) and (max-height: 850px) {
    .ticket-progress--dense { padding-top: 5px; padding-bottom: 5px; }
    .dense-ticket-header { min-height: 56px; }
}

/* ================================================================
   v4.0.9 Header & Section Refinement
   Quiet the section chrome and move emphasis to the Customer & ID label.
   ================================================================ */

/* Replace the full-width blue workflow banner with a crisp white header and
   a single blue rule. This preserves hierarchy without washing the form in blue. */
.dense-ticket-workspace {
    border-color: #c8d7e4;
    box-shadow: 0 16px 38px rgba(21,56,86,.10), 0 2px 7px rgba(21,56,86,.035);
}
.dense-ticket-workspace::before {
    display: block;
    height: 3px;
    background: linear-gradient(90deg,#1e6092 0%,#2f76b2 55%,#3f86be 100%);
}
.dense-ticket-header {
    min-height: 60px;
    color: #17324a;
    background: linear-gradient(180deg,#ffffff 0%,#f8fbfe 100%);
    border-bottom: 1px solid #d2dee8;
    box-shadow: none;
}
.dense-ticket-heading .kicker {
    color: #5f7690;
    font-size: 8px;
    letter-spacing: .105em;
}
.dense-ticket-header h2 {
    display: inline-flex;
    align-items: center;
    margin-top: 3px;
    padding: 4px 10px 5px;
    color: #163f62;
    background: #f4f9fd;
    border: 1px solid #b8d2e6;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(23,63,98,.04);
    font-size: 19px;
    line-height: 1;
}
.dense-help {
    color: #687f93;
}

/* Keep the scanner obvious, but no longer make it compete with a blue banner. */
.dense-scan-button {
    border-color: #b8d2e6;
    color: #173d5d;
    background: #f7fbff;
    box-shadow: 0 2px 6px rgba(23,61,93,.055), inset 0 1px 0 #fff;
}
.dense-scan-button:hover {
    border-color: #8fb9d8;
    background: #eef7fd;
    box-shadow: 0 4px 10px rgba(23,61,93,.08), inset 0 1px 0 #fff;
}

/* Section headings should organize, not decorate. Remove the blue edge bars
   and use a neutral header strip with a precise divider instead. */
.dense-section::before,
.dense-section--personal::before,
.dense-section--physical::before,
.dense-section--vehicle::before {
    display: none !important;
}
.dense-section-title,
.dense-section--personal .dense-section-title,
.dense-section--physical .dense-section-title,
.dense-section--vehicle .dense-section-title {
    background: linear-gradient(180deg,#f8fafc 0%,#f4f7fa 100%);
    border-bottom: 1px solid #d7e0e8;
}
.dense-section-title h3,
.dense-section--personal .dense-section-title h3,
.dense-section--physical .dense-section-title h3,
.dense-section--vehicle .dense-section-title h3 {
    color: #20384d;
    font-weight: 800;
}

@media (min-width: 981px) and (max-height: 850px) {
    .dense-ticket-header { min-height: 55px; }
    .dense-ticket-header h2 { padding-top: 3px; padding-bottom: 4px; }
}

/* ================================================================
   v4.0.12 Real UI refinement
   Lighter form typography, wider navigation, and a cleaner workflow heading.
   ================================================================ */

/* Give plain-language counter navigation enough room to remain on one line. */
.simple-shell {
    grid-template-columns: 252px minmax(0, 1fr);
}
.simple-nav .nav-item {
    white-space: nowrap;
}
.simple-nav .nav-item > span:not(.nav-icon) {
    white-space: nowrap;
}
.simple-nav .nav-item em {
    flex: 0 0 auto;
}

/* The form should read quickly without looking typographically heavy. */
.dense-field > span {
    color: #31465a;
    font-weight: 600;
}
.dense-field input,
.dense-field select,
.dense-field textarea {
    color: #203246;
    font-weight: 400;
}
.dense-height small,
.dense-unit small {
    font-weight: 500;
}
.dense-section-title h3,
.dense-section--personal .dense-section-title h3,
.dense-section--physical .dense-section-title h3,
.dense-section--vehicle .dense-section-title h3 {
    color: #263d52;
    font-weight: 650;
}
.dense-section-title > span,
.dense-section--personal .dense-section-title > span,
.dense-section--physical .dense-section-title > span,
.dense-section--vehicle .dense-section-title > span {
    font-weight: 650;
}
.dense-ticket-actions .btn,
.dense-scan-button strong {
    font-weight: 650;
}

/* Replace the boxed Customer & ID label with the cleaner Academy-style
   hierarchy: short accent rule, small step label, plain title, quiet helper. */
.dense-ticket-header {
    min-height: 62px;
    padding: 8px 14px 9px;
    background: #ffffff;
    border-bottom: 1px solid #d4dfe8;
}
.dense-ticket-heading .kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #386d9d;
    background: transparent;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .105em;
    line-height: 1.2;
}
.dense-ticket-heading .kicker::before {
    content: "";
    width: 18px;
    height: 2px;
    flex: 0 0 18px;
    border-radius: 999px;
    background: #3b82c4;
}
.dense-title-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.dense-ticket-header h2 {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #173a58;
    background: transparent;
    box-shadow: none;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.08;
    letter-spacing: -.025em;
}
.dense-help {
    position: relative;
    padding-left: 12px;
    color: #74879a;
    font-size: 11.5px;
    font-weight: 400;
}
.dense-help::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: #d4dee7;
}

/* Keep the scanner prominent but lighter than the primary forward action. */
.dense-scan-button {
    min-width: 236px;
    border-color: #c4d5e3;
    background: #f8fbfd;
    box-shadow: 0 2px 5px rgba(23,61,93,.045), inset 0 1px 0 #fff;
}
.dense-scan-button:hover {
    border-color: #9fbfd6;
    background: #f1f7fb;
}

@media (min-width: 981px) and (max-height: 850px) {
    .dense-ticket-header {
        min-height: 56px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .dense-title-line { margin-top: 2px; }
}

@media (max-width: 980px) {
    .simple-shell { grid-template-columns: 78px minmax(0,1fr); }
}

/* ================================================================
   v4.0.14 Real Header Cleanup
   Remove redundant step text and give Customer & ID a cleaner,
   lighter workstation-style identity without adding vertical height.
   ================================================================ */

.dense-ticket-header {
    min-height: 60px;
    padding: 8px 14px;
    background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    border-bottom: 1px solid #d3dee8;
}

.dense-ticket-heading--clean {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dense-ticket-heading--clean .kicker,
.dense-ticket-heading--clean .kicker::before {
    display: none !important;
}

.dense-heading-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border: 1px solid #c5d7e6;
    border-radius: 9px;
    color: #2d6fa8;
    background: linear-gradient(180deg,#f7fbff 0%,#edf5fb 100%);
    box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(27,75,111,.05);
}
.dense-heading-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dense-heading-copy {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    flex-wrap: wrap;
}

.dense-ticket-header .dense-heading-copy h2 {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #193c59;
    background: transparent;
    box-shadow: none;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.dense-heading-copy .dense-help {
    position: relative;
    padding-left: 12px;
    color: #718597;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.25;
}
.dense-heading-copy .dense-help::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: #d4dee7;
}

@media (min-width: 981px) and (max-height: 850px) {
    .dense-ticket-header { min-height: 54px; padding-top: 6px; padding-bottom: 6px; }
    .dense-heading-icon { width: 31px; height: 31px; flex-basis: 31px; }
    .dense-heading-icon svg { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   v4.0.15 footer spacing refinement
   Give the action row more breathing room and a slightly stronger surface so
   the buttons no longer feel crowded against the ticket borders.
   -------------------------------------------------------------------------- */
.dense-ticket-actions {
    min-height: 58px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #f2f6f9 0%, #e8eef3 100%);
    border-top-color: #c6d3de;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

/* Keep the extra breathing room even on shorter workstation displays while
   preserving the compact one-screen workflow. */
@media (min-width: 981px) and (max-height: 850px) {
    .dense-ticket-actions {
        min-height: 54px;
        padding: 8px 14px;
    }
}

/* --------------------------------------------------------------------------
   v4.0.16 inner form contrast
   Darken only the working canvas inside Customer & ID so the white Personal,
   Physical Description, and Vehicle cards stand out more clearly.
   -------------------------------------------------------------------------- */
.dense-ticket-body {
    background: #e4ecf3;
    border-top-color: #c9d6e1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.dense-section {
    background: #ffffff;
    border-color: #becbd7;
    box-shadow:
        0 3px 9px rgba(24,48,72,.075),
        0 1px 2px rgba(24,48,72,.04),
        inset 0 1px 0 rgba(255,255,255,.96);
}

/* ========================================================================== 
   v4.1.0 CUSTOMER INTAKE + MATERIAL WORKFLOW
   ========================================================================== */

.license-scan-capture {
    position: fixed !important;
    left: -10000px !important;
    top: 0 !important;
    width: 2px !important;
    height: 2px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dense-scan-button.is-armed {
    border-color: #2d73d5;
    background: #edf5ff;
    box-shadow: 0 0 0 3px rgba(45,115,213,.12), inset 0 1px 0 #fff;
}

.form-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 0;
    padding: 8px 11px;
    border: 1px solid;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.3;
}
.form-alert strong { font-weight: 650; }
.form-alert--error {
    color: #8d2d2d;
    background: #fff4f3;
    border-color: #efc3bf;
}
.form-alert--success {
    color: #216249;
    background: #f0faf5;
    border-color: #bfe4d1;
}

.lookup-notice {
    margin: 8px 12px 0;
    padding: 7px 11px;
    color: #315b4a;
    background: #eef8f3;
    border: 1px solid #c5dfd2;
    border-radius: 8px;
    font-size: 11.5px;
    line-height: 1.35;
}
.lookup-notice strong { font-weight: 650; }

.dense-field input:invalid:not(:placeholder-shown),
.dense-field select:invalid {
    border-color: #c4ced8;
}

/* Step 2 - materials ------------------------------------------------------ */
.material-workspace {
    width: min(1220px, calc(100vw - 36px));
    margin: 8px auto 0;
    overflow: hidden;
    background: #f7fafc;
    border: 1px solid #bdccd9;
    border-top: 3px solid #2776b8;
    border-radius: 16px;
    box-shadow: 0 15px 32px rgba(32,59,84,.12);
}

.material-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #cad7e2;
}
.material-header > div:first-child { min-width: 0; }
.material-ticket-number {
    display: block;
    margin-bottom: 2px;
    color: #6f8395;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.material-header h2 {
    margin: 0;
    color: #193c59;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.material-header p {
    margin: 2px 0 0;
    color: #6b7f91;
    font-size: 12px;
}
.material-total-card {
    min-width: 158px;
    padding: 8px 13px;
    text-align: right;
    background: #eef5fb;
    border: 1px solid #c5d8e8;
    border-radius: 10px;
}
.material-total-card span {
    display: block;
    color: #6b8194;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.material-total-card strong {
    display: block;
    margin-top: 1px;
    color: #163d60;
    font-size: 23px;
    font-weight: 650;
}

.material-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    gap: 10px;
    padding: 10px;
    background: #e4ecf3;
}
.material-entry-card,
.ticket-items-card {
    min-width: 0;
    background: #fff;
    border: 1px solid #becbd7;
    border-radius: 11px;
    box-shadow: 0 3px 9px rgba(24,48,72,.06);
}
.material-entry-card { padding: 10px; }
.ticket-items-card { display: flex; flex-direction: column; overflow: hidden; }

.material-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    padding-bottom: 7px;
    border-bottom: 1px solid #d7e0e8;
}
.ticket-items-card > .material-card-title { padding: 9px 10px 7px; }
.material-card-title > div {
    display: flex;
    align-items: center;
    gap: 7px;
}
.material-card-title h3 {
    margin: 0;
    color: #29465f;
    font-size: 13px;
    font-weight: 600;
}
.material-card-title > span {
    color: #8292a1;
    font-size: 10.5px;
}
.material-step-dot {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: #347bd5;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 650;
}

.material-search-label {
    display: block;
    margin: 9px 0 4px;
    color: #526b80;
    font-size: 11px;
    font-weight: 550;
}
.material-search-wrap input {
    width: 100%;
    height: 36px;
    padding: 0 11px;
    color: #273e52;
    background: #fff;
    border: 1px solid #b7c8d8;
    border-radius: 8px;
    outline: none;
    font-size: 13px;
    font-weight: 400;
}
.material-search-wrap input:focus {
    border-color: #4b8bc4;
    box-shadow: 0 0 0 3px rgba(51,125,191,.11);
}

.material-picker {
    height: 238px;
    margin-top: 8px;
    overflow-y: auto;
    border: 1px solid #d3dee7;
    border-radius: 8px;
    background: #f8fafc;
}
.material-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 45px;
    padding: 6px 9px;
    cursor: pointer;
    background: #fff;
    border-bottom: 1px solid #e4eaf0;
}
.material-option:last-child { border-bottom: 0; }
.material-option:hover { background: #f4f8fc; }
.material-option:has(input:checked) {
    background: #edf5ff;
    box-shadow: inset 3px 0 0 #347bd5;
}
.material-option input { margin: 0; flex: 0 0 auto; }
.material-option-main { min-width: 0; flex: 1; }
.material-option-main strong {
    display: block;
    overflow: hidden;
    color: #263f54;
    font-size: 12.5px;
    font-weight: 550;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.material-option-main small {
    display: block;
    margin-top: 1px;
    color: #8696a4;
    font-size: 9.5px;
}
.material-price {
    flex: 0 0 auto;
    color: #1d527d;
    font-size: 13px;
    font-weight: 600;
}
.material-price small {
    margin-left: 2px;
    color: #8494a2;
    font-size: 9px;
    font-weight: 450;
}
.material-empty { padding: 18px; color: #7b8c9a; text-align: center; font-size: 12px; }

.material-measure-row {
    display: grid;
    grid-template-columns: 180px minmax(110px, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-top: 9px;
}
.material-measure-row > label > span,
.material-calc > span,
.material-more-details label > span {
    display: block;
    margin-bottom: 4px;
    color: #526b80;
    font-size: 10.5px;
    font-weight: 550;
}
.material-weight-input {
    display: flex;
    align-items: center;
    gap: 6px;
}
.material-weight-input input {
    width: 130px;
    height: 35px;
    padding: 0 9px;
    color: #233b50;
    border: 1px solid #b7c8d8;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 450;
}
.material-weight-input small { color: #667b8d; font-size: 11px; }
.material-calc {
    min-height: 55px;
    padding: 5px 10px;
    background: #f3f7fa;
    border: 1px solid #d1dce5;
    border-radius: 8px;
}
.material-calc strong {
    display: block;
    color: #1c4e76;
    font-size: 20px;
    font-weight: 600;
}
.material-add-btn { height: 37px; white-space: nowrap; }

.material-more-details { margin-top: 8px; }
.material-more-details summary {
    width: max-content;
    cursor: pointer;
    color: #668095;
    font-size: 10.5px;
}
.material-more-details > div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px;
    margin-top: 7px;
}
.material-more-details input {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #c2d0dc;
    border-radius: 7px;
    color: #2c4356;
    font-size: 12px;
    font-weight: 400;
}

.ticket-item-list {
    min-height: 334px;
    max-height: 334px;
    overflow-y: auto;
    background: #fff;
}
.ticket-item-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid #e1e8ee;
}
.ticket-item-copy { min-width: 0; }
.ticket-item-copy strong {
    display: block;
    color: #284156;
    font-size: 12px;
    font-weight: 550;
}
.ticket-item-copy span {
    display: block;
    margin-top: 2px;
    color: #788a99;
    font-size: 10.5px;
}
.ticket-item-amount { flex: 0 0 auto; text-align: right; }
.ticket-item-amount > strong {
    display: block;
    color: #1b4d74;
    font-size: 13px;
    font-weight: 600;
}
.ticket-item-amount button {
    padding: 0;
    border: 0;
    background: none;
    color: #a05a57;
    cursor: pointer;
    font-size: 9.5px;
}
.ticket-items-empty {
    min-height: 275px;
    display: grid;
    place-items: center;
    align-content: center;
    color: #8595a3;
    text-align: center;
}
.ticket-items-empty > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 7px;
    background: #f0f4f7;
    border-radius: 9px;
    font-size: 20px;
}
.ticket-items-empty strong { color: #526b80; font-size: 12px; font-weight: 550; }
.ticket-items-empty p { margin: 2px 0 0; font-size: 10.5px; }
.ticket-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 11px;
    background: #edf3f7;
    border-top: 1px solid #cbd8e2;
}
.ticket-total-row span { color: #536c80; font-size: 11px; font-weight: 550; }
.ticket-total-row strong { color: #163f60; font-size: 20px; font-weight: 650; }

.material-actions {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    background: linear-gradient(180deg,#f1f5f8 0%,#e7edf2 100%);
    border-top: 1px solid #c6d3de;
}
.material-actions-note {
    flex: 1;
    color: #748797;
    font-size: 10.5px;
    text-align: right;
}
.material-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }

.ticket-progress-step.is-complete span {
    color: #fff;
    background: #2b966f;
    border-color: #2b966f;
}
.ticket-progress-line.is-complete { background: #7fc1a6; }

@media (max-width: 1050px) {
    .material-grid { grid-template-columns: 1fr; }
    .ticket-item-list { min-height: 220px; max-height: 260px; }
}

@media (min-width: 981px) and (max-height: 850px) {
    .material-workspace { margin-top: 5px; }
    .material-header { min-height: 61px; padding-top: 7px; padding-bottom: 7px; }
    .material-picker { height: 196px; }
    .ticket-item-list { min-height: 292px; max-height: 292px; }
    .material-actions { min-height: 52px; padding-top: 7px; padding-bottom: 7px; }
}


/* v4.1.2 - required scale-camera photo for every material item ----------- */
.material-pick-camera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 9px;
    margin-top: 8px;
}
.material-pick-camera .material-picker { margin-top: 0; }
.item-camera-card {
    height: 238px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 7px;
    background: #f5f8fb;
    border: 1px solid #c8d5e0;
    border-radius: 8px;
}
.item-camera-title {
    min-height: 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    padding-bottom: 5px;
}
.item-camera-title strong {
    display: block;
    color: #29465f;
    font-size: 11.5px;
    font-weight: 600;
}
.item-camera-title > div > span {
    display: block;
    margin-top: 1px;
    color: #8292a1;
    font-size: 8.5px;
}
.item-camera-ready {
    flex: 0 0 auto;
    padding: 2px 6px;
    color: #6f8190;
    background: #e8eef3;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 600;
}
.item-camera-ready[data-state="ready"] { color: #24684f; background: #e5f3ed; }
.item-camera-ready[data-state="captured"] { color: #245f9a; background: #e5f0fb; }
.item-camera-ready[data-state="error"] { color: #934a47; background: #f7e8e7; }
.item-camera-preview {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #172632;
    border: 1px solid #9caebb;
    border-radius: 7px;
}
.item-camera-preview video,
.item-camera-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.item-camera-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    color: #dfe8ef;
    text-align: center;
    background: #263a49;
}
.item-camera-placeholder[hidden] { display: none; }
.item-camera-placeholder > span { font-size: 22px; opacity: .8; }
.item-camera-placeholder strong { font-size: 10.5px; font-weight: 550; }
.item-camera-placeholder small { color: #aec0cc; font-size: 8.5px; }
.item-camera-controls {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}
.btn-camera {
    min-height: 30px;
    flex: 1;
    padding: 5px 9px;
    color: #fff;
    background: #2e7bd0;
    border: 1px solid #246ab7;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
}
.btn-camera:hover:not(:disabled) { background: #286fbe; }
.btn-camera:disabled { opacity: .5; cursor: not-allowed; }
.btn-camera-retake { flex: 1; min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
.item-camera-status {
    min-height: 12px;
    margin: 4px 0 0;
    overflow: hidden;
    color: #728696;
    font-size: 8.5px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.material-add-btn:disabled { opacity: .45; cursor: not-allowed; }
.ticket-item-row { align-items: center; }
.ticket-item-photo {
    width: 46px;
    height: 38px;
    flex: 0 0 46px;
    object-fit: cover;
    background: #eef3f7;
    border: 1px solid #c7d3dd;
    border-radius: 6px;
}
.ticket-item-copy small {
    display: block;
    margin-top: 2px;
    color: #2c7b5d;
    font-size: 8.5px;
}

@media (min-width: 981px) and (max-height: 850px) {
    .item-camera-card { height: 196px; }
    .item-camera-title { min-height: 28px; }
    .item-camera-status { display: none; }
}
@media (max-width: 720px) {
    .material-pick-camera { grid-template-columns: 1fr; }
    .item-camera-card { height: 260px; }
}