/* Karban CX Theme - Matching ERP Core Style */

/* ==================== FONT FACES ==================== */
@font-face {
    font-family: 'KarbanType';
    src: url("../fonts/KarbanType-Regular.960b504319d2.woff2") format('woff2'),
         url("../fonts/KarbanType-Regular.22386c0fec0d.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KarbanType';
    src: url("../fonts/KarbanType-Medium.0618d643ca6a.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KarbanType';
    src: url("../fonts/KarbanType-SemiBold.dda6aaee9497.woff2") format('woff2'),
         url("../fonts/KarbanType-SemiBold.ca3da02eb0ae.ttf") format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KarbanType';
    src: url("../fonts/KarbanType-Bold.8e9f3a7b7080.woff2") format('woff2'),
         url("../fonts/KarbanType-Bold.c6afd9bb571a.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==================== CSS VARIABLES ==================== */
:root {
    --primary-green: #1F321F;
    --primary-green-dark: #193c2b;
    --accent-cream: #F6F4E7;
    --success-green: #079455;
    --success-light: #E7F5EE;
    --success-tint: #F6FBF8;
    --warning-orange: #DC6803;
    --warning-light: #FCF0E6;
    --warning-tint: #FFFBF6;
    --progress-track: #EFF3F0;
    --danger-red: #dc3545;
    --border-color: #F4F4F5;
    --border-medium: #E5E7EB;
    --text-dark: #000;
    --text-muted: #8790A1;
    --bg-light: #f5f7fb;
    --bg-page: #ececec;
    --sidebar-width: 220px;
    --card-radius: 8px;
    --sidebar-radius: 18px;
}

/* ==================== BASE STYLES ==================== */
body {
    font-family: 'KarbanType', Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-page);
    color: var(--text-dark);
}

/* ==================== SIDEBAR ==================== */
.left-sidebar {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    background: #fff !important;
    border: 2px solid var(--border-color);
    border-radius: var(--sidebar-radius);
    margin: 18px;
    padding: 18px;
    position: fixed;
    height: calc(100vh - 36px);
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.left-sidebar:hover {
    width: var(--sidebar-width) !important;
}

.sidebar-brand {
    flex-shrink: 0;
    padding: 0 0 18px 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-brand i {
    color: var(--primary-green);
    font-size: 1.5rem;
}

.sidebar-brand .sidebar-logo {
    width: 100%;
    max-width: 140px;
    height: auto;
}

.sidebar-brand span {
    opacity: 1 !important;
    font-weight: 600;
    font-size: 18px;
    color: var(--text-dark);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-nav > * {
    flex-shrink: 0;
}

.sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: 12px 0;
}

.sidebar-item {
    padding: 12px 18px !important;
    border-radius: 12px;
    color: var(--text-dark) !important;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s;
}

.sidebar-item:hover {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
}

.sidebar-item.active {
    background: var(--accent-cream) !important;
    font-weight: 600;
}

.sidebar-item i {
    min-width: 20px;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.sidebar-item img.nav-icon {
    width: 20px;
    height: 20px;
}

.sidebar-item span {
    opacity: 1 !important;
    /* The sidebar is a fixed 220px, so a label longer than roughly twenty
       characters used to push past its edge. Truncating instead of overflowing
       keeps any future label contained; the full text stays on the title
       attribute for hover. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==================== CONTENT WRAPPER ==================== */
.content-wrapper {
    margin-left: calc(var(--sidebar-width) + 36px) !important;
    padding: 18px;
    padding-left: 0;
}

/* ==================== NAVBAR ==================== */
.navbar {
    background: #fff !important;
    border: 2px solid var(--border-color);
    border-radius: var(--sidebar-radius);
    padding: 16px 24px !important;
    margin-bottom: 12px;
}

.navbar h4 {
    font-weight: 600;
    font-size: 18px;
    margin: 0;
}

/* ==================== MAIN CONTENT AREA ==================== */
.main-content-area {
    display: flex;
    gap: 18px;
}

.middle-panel {
    flex: 1;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.right-panel {
    width: 280px;
    min-width: 280px;
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: var(--sidebar-radius);
    padding: 18px;
    height: fit-content;
}

/* ==================== CARDS ==================== */
.card {
    background: #fff;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: none !important;
}

.card-header {
    background: #fff !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-weight: 600;
}

.metric-card {
    border-left: 4px solid var(--primary-green) !important;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ==================== BUTTONS ==================== */
.btn-primary {
    background: var(--primary-green-dark) !important;
    border-color: var(--primary-green-dark) !important;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-green) !important;
    border-color: var(--primary-green) !important;
}

.btn-outline-primary {
    color: var(--primary-green-dark) !important;
    border-color: var(--primary-green-dark) !important;
    border-radius: 10px;
}

.btn-outline-primary:hover {
    background: var(--primary-green-dark) !important;
    border-color: var(--primary-green-dark) !important;
    color: #fff !important;
}

.btn-success {
    background: var(--success-green) !important;
    border-color: var(--success-green) !important;
    border-radius: 10px;
}

.btn-outline-success {
    color: var(--success-green) !important;
    border-color: var(--success-green) !important;
    border-radius: 10px;
}

.btn-outline-success:hover {
    background: var(--success-green) !important;
    color: #fff !important;
}

/* ==================== BADGES ==================== */
.badge {
    border-radius: 20px;
    padding: 6px 14px;
    font-weight: 500;
    font-size: 12px;
}

.badge.bg-success,
.badge-success {
    background: var(--success-light) !important;
    color: #1f8f4a !important;
}

.badge.bg-warning,
.badge-warning {
    background: var(--warning-light) !important;
    color: var(--warning-orange) !important;
}

.badge.bg-primary {
    background: var(--accent-cream) !important;
    color: var(--primary-green) !important;
}

.badge.bg-info {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.badge.bg-danger {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

.badge.bg-secondary {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}

/* ==================== TABLES ==================== */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-medium);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
}

.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.table-hover tbody tr:hover {
    background: var(--bg-light) !important;
}

/* ==================== FORMS ==================== */
.form-control,
.form-select {
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(31, 50, 31, 0.1);
}

.form-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--text-dark);
    margin-bottom: 6px;
}

/* ==================== INPUT GROUP ==================== */
.input-group {
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    overflow: hidden;
}

.input-group .form-control {
    border: none;
}

.input-group .btn {
    border: none;
}

/* ==================== TABS ==================== */
.nav-tabs {
    border-bottom: none;
    gap: 8px;
}

.nav-tabs .nav-link {
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: #fff;
}

.nav-tabs .nav-link:hover {
    background: #fff;
    color: var(--text-dark);
}

.nav-tabs .nav-link.active {
    background: var(--text-dark);
    color: #fff;
    border-color: var(--text-dark);
    font-weight: 600;
}

.nav-tabs .nav-link.active .badge {
    background: #fff !important;
    color: var(--text-dark) !important;
}
.nav-tabs .nav-link .badge {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
}

/* ==================== ALERTS ==================== */
.alert-success {
    background: var(--success-light);
    border-color: var(--success-green);
    color: #1f8f4a;
    border-radius: var(--card-radius);
}

.alert-warning {
    background: var(--warning-light);
    border-color: var(--warning-orange);
    color: var(--warning-orange);
    border-radius: var(--card-radius);
}

.alert-danger {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
    border-radius: var(--card-radius);
}

/* ==================== TIMELINE ==================== */
.timeline-item {
    border-left: 2px solid var(--border-medium);
}

.timeline-item:before {
    background: var(--primary-green);
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #C1C1C1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ==================== DROPDOWN ==================== */
.dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
}

.dropdown-item:hover {
    background: var(--bg-light);
}

/* ==================== TOAST ==================== */
.toast {
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
}

/* ==================== PAGINATION ==================== */
.pagination .page-link {
    border-radius: 8px;
    margin: 0 2px;
    border: 1px solid var(--border-medium);
    color: var(--text-dark);
}

.pagination .page-item.active .page-link {
    background: var(--primary-green-dark);
    border-color: var(--primary-green-dark);
}

/* ==================== UTILITIES ==================== */
.text-primary {
    color: var(--primary-green) !important;
}

.bg-primary {
    background: var(--primary-green) !important;
}

.border-primary {
    border-color: var(--primary-green) !important;
}

/* Filter section in right panel */
.filter-section h6 {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 12px;
}

/* Status colors */
.status-pending { color: var(--warning-orange); }
.status-completed { color: var(--success-green); }
.status-cancelled { color: var(--danger-red); }


/* ==================== PHOTO THUMBNAILS ====================
   Return evidence, shown wherever it is read: the complaint page's returns and
   replacements cards and the Resolution Form stepper. */
.photo-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    background: var(--bg-light);
}
.photo-thumb:hover { border-color: var(--primary-green); }
.photo-thumb-lg { width: 64px; height: 64px; border-radius: 8px; }


/* ==================== LIST FILTER CONTROLS ====================
   Shared by the Installations and Complaints registers: quick-view pills, one
   chip per applied filter, and sortable column headers. */
.quick-view {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    text-decoration: none;
    color: var(--text-dark);
    white-space: nowrap;
}
.quick-view:hover { border-color: var(--primary-green); color: var(--text-dark); }
.quick-view.is-active {
    border-color: var(--primary-green);
    box-shadow: inset 0 0 0 1px var(--primary-green);
    font-weight: 600;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border-medium);
    border-radius: 999px;
    background: var(--accent-cream);
    font-size: .8rem;
}
.filter-chip-remove {
    display: inline-flex;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1;
}
.filter-chip-remove:hover { color: var(--danger-red); }

.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.sort-link:hover { color: var(--primary-green); }
.sort-link.is-sorted { color: var(--primary-green); font-weight: 600; }
/* The hint only appears on hover, so an unsorted header stays quiet. */
.sort-hint { opacity: 0; transition: opacity .15s; }
.sortable-header:hover .sort-hint { opacity: .5; }


/* ==================== FOCUS STAT CARDS ====================
   One component for every count on the Focus page and the Follow-ups stage
   strip. Tone modifiers only change the accent, so the cards stay a set. */
.focus-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border-medium);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.focus-stat:hover {
    color: inherit;
    border-color: var(--primary-green);
    box-shadow: 0 6px 18px rgba(31, 50, 31, .08);
    transform: translateY(-2px);
}

.focus-stat-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--bg-light);
    color: var(--primary-green);
}

.focus-stat-body { min-width: 0; }

.focus-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--primary-green);
}

.focus-stat-label {
    font-size: .8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tones */
.focus-stat.tone-danger .focus-stat-icon { background: #fdecee; color: var(--danger-red); }
.focus-stat.tone-danger .focus-stat-value { color: var(--danger-red); }
.focus-stat.tone-warning .focus-stat-icon { background: var(--warning-light); color: var(--warning-orange); }
.focus-stat.tone-warning .focus-stat-value { color: var(--warning-orange); }
.focus-stat.tone-success .focus-stat-icon { background: var(--success-light); color: var(--success-green); }
.focus-stat.tone-success .focus-stat-value { color: var(--success-green); }
.focus-stat.tone-info .focus-stat-icon { background: #e8f6fb; color: #0b7285; }
.focus-stat.tone-info .focus-stat-value { color: #0b7285; }

/* A zero count is not work, so it recedes rather than shouting. */
.focus-stat.is-empty .focus-stat-value,
.focus-stat.is-empty .focus-stat-icon {
    color: var(--text-muted);
}
.focus-stat.is-empty .focus-stat-icon { background: var(--bg-light); }

/* Active state for the Follow-ups stage strip. The card stays white and gains a
   ring, so the selected stage reads without tinting the strip. */
.focus-stat.is-active {
    border-color: var(--primary-green);
    box-shadow: inset 0 0 0 1px var(--primary-green);
}

/* ==================== FOCUS SECTIONS ==================== */
.focus-panel {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.focus-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 0;
}

.focus-panel-title {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.focus-panel-body { padding: 14px 18px 18px; }

.focus-panel-link {
    font-size: .82rem;
    text-decoration: none;
    color: var(--primary-green);
    font-weight: 500;
}
.focus-panel-link:hover { text-decoration: underline; }

/* A register's second tab row, shared by Installations and Complaints. One row
   slices a population and adds up to it; the other cuts across and is not meant
   to. Labelling the rows is what keeps that distinction readable.

   The pills are deliberately smaller than the shared .quick-view: they sit
   under the real tabs, so they should read as a refinement of the tab above
   rather than compete with it. Scoped to this row so the Complaints register's
   pills keep their own size. */
.register-subtabs .subtab-group-label {
    font-size: .69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* These name the two kinds of row - one adds up to its tab, the other cuts
       across it - so they have to be readable, not decorative. */
    color: var(--primary-green);
    background: var(--accent-cream);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    padding: 3px 7px;
    min-width: 5rem;
    text-align: center;
}
.register-subtabs .quick-view {
    padding: 4px 10px;
    font-size: .77rem;
}
.register-subtabs .quick-view .badge {
    padding: .2em .45em;
    font-size: .66rem;
    font-weight: 600;
}

/* Complaint attachments. Every type is wrapped in the same link, so the video
   thumbnail must not swallow the click: without controls a <video> still
   handles pointer events itself, which is why clicking one used to start
   playing instead of opening the file. */
.attachment-thumb { text-decoration: none; color: inherit; }
.attachment-thumb video,
.attachment-thumb img { pointer-events: none; }
.attachment-video { line-height: 0; }
.attachment-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1rem;
    pointer-events: none;
}
.attachment-thumb:hover .attachment-play { background: rgba(0, 0, 0, .75); }

/* ==================== COMPLAINT WORKFLOW TREE ====================
   One row per piece of linked work. A row with a live step is tinted and opens
   expanded, so what is outstanding reads without clicking while finished work
   stays a single line. */
.workflow-tree .wt-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.workflow-tree .wt-lifecycle {
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border-color);
}
/* The left edge carries the colour; the fill is only a whisper of it, so ten
   stacked rows stay readable instead of becoming ten blocks of colour. */
.workflow-tree .wt-item {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--success-green);
    border-radius: 6px;
    padding: .5rem .6rem;
    margin-bottom: .4rem;
    background: var(--success-tint);
}
.workflow-tree .wt-item.is-live {
    border-left-color: var(--warning-orange);
    background: var(--warning-tint);
}
.workflow-tree .wt-toggle,
.workflow-tree .wt-leaf {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: 0;
    padding: 0;
    font-size: .85rem;
    color: inherit;
    text-decoration: none;
    text-align: left;
}
.workflow-tree .wt-toggle:hover,
.workflow-tree .wt-leaf:hover { color: var(--primary-green); }
/* The chevron points down once its own panel is open. */
.workflow-tree .wt-chevron { transition: transform .15s; font-size: .7rem; }
.workflow-tree .wt-toggle[aria-expanded="true"] .wt-chevron {
    transform: rotate(90deg);
}
/* The progress bar takes the theme's own greens rather than Bootstrap's blue:
   forest green while work is outstanding, and the brighter success green once
   the chain is complete, on a cream track so an empty bar still reads. */
.workflow-tree .wt-progress {
    height: 6px;
    border-radius: 999px;
    /* A cool, near-white track rather than the warm cream: it sits under a deep
       green fill, and the cream fought it. */
    background-color: var(--progress-track);
    overflow: hidden;
}
.workflow-tree .wt-progress .progress-bar {
    background-color: var(--primary-green);
    border-radius: 999px;
}
.workflow-tree .wt-progress .progress-bar.bg-success {
    background-color: var(--success-green) !important;
}
.workflow-tree .wt-steps {
    list-style: none;
    margin: .5rem 0 0;
    padding-left: .35rem;
    border-left: 1px dashed var(--border-color);
}
.workflow-tree .wt-step {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    font-size: .78rem;
    padding: .12rem 0 .12rem .5rem;
    color: var(--text-muted);
}
.workflow-tree .wt-step.is-done { color: var(--text-dark); }
.workflow-tree .wt-step.is-done .wt-step-icon { color: var(--success-green); }
.workflow-tree .wt-step.is-current {
    color: var(--text-dark);
    font-weight: 600;
}
.workflow-tree .wt-step.is-current .wt-step-icon { color: var(--warning-orange); }
.workflow-tree .wt-step.is-void { text-decoration: line-through; opacity: .55; }
.workflow-tree .wt-step-icon { font-size: .72rem; }
.workflow-tree .wt-next {
    color: var(--warning-orange);
    text-decoration: none;
    font-weight: 700;
}
.workflow-tree .wt-next:hover { text-decoration: underline; }

/* ==================== FEEDBACK CALL STEPS ==================== */
/* The two calls in a feedback order section read as a sequence, so each one
   carries its own state in the same near-white tints the workflow panel uses:
   done is settled, open is where the work is, locked is not yours yet. */
.call-step {
    border: 1px solid var(--border-medium);
    border-left-width: 3px;
    border-radius: var(--card-radius);
    padding: .9rem 1rem;
}
.call-step-title {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.call-step-done {
    background: var(--success-tint);
    border-left-color: var(--success-green);
}
.call-step-open {
    background: var(--warning-tint);
    border-left-color: var(--warning-orange);
}
.call-step-locked {
    background: var(--progress-track);
    border-left-color: var(--border-medium);
}
.call-step-locked .call-step-title { color: var(--text-muted); }
.feedback-attempts {
    border-left: 2px solid var(--border-medium);
    padding-left: .6rem;
}

/* ==================== UNANSWERED QUESTION FLAG ==================== */
/* A Yes/No question with nothing picked yet reads exactly like an answered
   one, so the wrapper carries the state: amber field, amber label and a
   "Not asked" chip that the answered state hides outright. */
.answer-check .answer-flag { display: none; }
.answer-check.needs-answer .answer-flag {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: .35rem;
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--warning-light);
    color: var(--warning-orange);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
}
.answer-check.needs-answer > .form-label { color: var(--warning-orange); }
.answer-check.needs-answer .form-select {
    border-color: var(--warning-orange);
    background-color: var(--warning-tint);
}
.answer-check.needs-answer .form-select:focus {
    border-color: var(--warning-orange);
    box-shadow: 0 0 0 .2rem rgba(220, 104, 3, .15);
}

/* ==================== REGISTER TAB ROWS ==================== */
/* The operational registers use the same quiet tab language as Orders: white
   tabs by default and one dark active tab. Their badges still hold the count,
   but a tab's colour no longer tries to communicate a second meaning. */
.register-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    overflow-x: auto;
    padding-bottom: .2rem;
}
.register-tabs .btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .875rem;
    height: 2.25rem;
    justify-content: center;
    line-height: 1.25;
    padding: .25rem .75rem;
    white-space: nowrap;
}
.register-tabs .btn[class*="btn-outline"],
.register-states .btn[class*="btn-outline"] {
    background: #fff !important;
    border-color: var(--border-medium) !important;
    color: var(--text-muted) !important;
}
.register-tabs .btn:not([class*="btn-outline"]),
.register-states .btn:not([class*="btn-outline"]) {
    background: var(--text-dark) !important;
    border-color: var(--text-dark) !important;
    color: #fff !important;
}
.register-tabs .btn:hover,
.register-states .btn:hover {
    color: var(--text-dark) !important;
}
.register-tabs .btn:not([class*="btn-outline"]):hover,
.register-states .btn:not([class*="btn-outline"]):hover {
    background: #101828 !important;
    color: #fff !important;
}
.register-tabs .btn .badge {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
    font-size: .72rem;
    line-height: 1;
    padding: .3rem .55rem;
}
.register-states {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .2rem;
}
.register-states .btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .765rem;
    height: 1.85rem;
    padding: 0 .7rem;
    white-space: nowrap;
}
.register-states .btn .badge {
    background: var(--bg-light) !important;
    color: var(--text-dark) !important;
    font-size: .65rem;
    font-weight: 600;
    padding: .18em .42em;
}
/* A hairline label instead of a boxed chip: it names the row without looking
   like another thing you can click. */
.register-states .state-label {
    align-items: center;
    border-right: 1px solid var(--border-medium);
    color: var(--text-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    gap: .3rem;
    letter-spacing: .08em;
    margin-right: .3rem;
    padding-right: .6rem;
    text-transform: uppercase;
}
.register-states .state-label i { font-size: .8rem; }

/* Compact calling action beside the existing customer phone. */
.outbound-call-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary-green);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.outbound-call-button:hover:not(:disabled) {
    background: var(--success-green);
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 3px 8px rgba(31, 50, 31, .18);
}
.outbound-call-button:active:not(:disabled) {
    transform: scale(.96);
    box-shadow: none;
}
.outbound-call-button:focus-visible { outline: 2px solid var(--primary-green); outline-offset: 2px; }
.outbound-call-button:disabled { background: #8790A1; color: #fff; cursor: not-allowed; opacity: .65; }
.outbound-call-control .outbound-call-button i {
    color: inherit;
    font-size: inherit;
    line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
    .outbound-call-button { transition: none; }
    .outbound-call-button:hover:not(:disabled),
    .outbound-call-button:active:not(:disabled) { transform: none; }
}
.outbound-call-warning {
    display: block;
    margin: 2px 0 4px;
    color: #946200;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.4;
}