:root {
    --blue: #0d6efd;
    --red: #dc3545;
    --yellow: #ffc107;
    --green: #198754;
    --ink: #212529;
    --muted: #6c757d;
    --line: #dee2e6;
    --soft: #f8f9fa;
    --panel: #ffffff;
    --shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
    --radius: .5rem;
    --sidebar: 260px;
    --bs-primary: var(--blue);
    --bs-danger: var(--red);
    --bs-warning: var(--yellow);
    --bs-success: var(--green);
    --google-blue: #4285f4;
    --google-red: #ea4335;
    --google-yellow: #fbbc04;
    --google-green: #34a853;
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* Operational navigation, quick search, profile, shelf allocation, and print refinements. */
.nav-group {
    display: block;
}

.nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    color: #5f6368;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    list-style: none;
    text-transform: uppercase;
}

.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary svg { width: 14px; height: 14px; transition: transform .16s ease; }
.nav-group[open] summary svg { transform: rotate(180deg); }
.nav-group-links { display: grid; gap: 2px; padding-bottom: 4px; }

.topbar-search {
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(560px, 48vw);
    min-width: 220px;
    padding: 4px 6px 4px 10px;
    border: 1px solid #dadce0;
    background: #fff;
}

.topbar-search > svg { color: #5f6368; width: 17px; height: 17px; }
.topbar-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.topbar-search .icon-button { width: 30px; height: 30px; }

.account-menu { position: relative; margin-left: auto; }
.account-menu summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary > svg { width: 15px; height: 15px; color: #5f6368; }
.topbar-user { margin-left: 0; min-width: 138px; }
.topbar-user strong { color: #202124; font-size: 12px; font-weight: 800; }
.topbar-user small { font-size: 10px; font-weight: 500; }

.profile-avatar {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #d2e3fc;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    font-weight: 800;
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 40;
    display: grid;
    min-width: 210px;
    padding: 6px;
    border: 1px solid #dadce0;
    background: #fff;
    box-shadow: 0 8px 20px rgb(60 64 67 / 20%);
}

.account-dropdown a,
.account-dropdown button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 0;
    background: transparent;
    color: #3c4043;
    font-size: 12px;
    text-align: left;
}

.account-dropdown button { width: 100%; cursor: pointer; }
.account-dropdown a:hover, .account-dropdown button:hover { background: #f1f3f4; }
.account-dropdown hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid #dadce0; }

.inventory-fallback-thumb {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    border: 1px solid #d2e3fc;
    background: #e8f0fe;
    color: #1a73e8;
}

.inventory-fallback-thumb.aircon { border-color: #ceead6; background: #e6f4ea; color: #188038; }
.inventory-fallback-thumb.cctv { border-color: #fdd663; background: #fef7e0; color: #b06000; }
.inventory-fallback-thumb.solar { border-color: #f9ab00; background: #fef7e0; color: #b06000; }
.inventory-fallback-thumb svg { width: 20px; height: 20px; }
.delivery-entry, .profile-divider { display: grid; gap: 3px; padding-top: 9px; border-top: 1px solid #dadce0; }
.delivery-entry span, .profile-divider span { color: #5f6368; font-size: 11px; }

.stock-location-line { grid-template-columns: minmax(270px, 1fr) minmax(150px, .45fr) 36px; }
.table-focus-row > td { background: #fff8d6 !important; box-shadow: inset 0 2px 0 #fbbc04, inset 0 -2px 0 #fbbc04; }
.dashboard-view-all { display: flex; gap: 12px; padding: 9px 2px 0; font-size: 11px; font-weight: 700; }

.quick-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 900px;
    padding: 10px;
    border: 1px solid #d2e3fc;
    background: #f8fbff;
}

.quick-search-form > svg { width: 22px; height: 22px; color: #1a73e8; }
.quick-search-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.quick-result-list { display: grid; gap: 7px; }
.quick-result {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid #dadce0;
    background: #fff;
    color: #202124;
}

.quick-result:hover { border-color: #1a73e8; background: #f8fbff; }
.quick-result-icon { display: grid; width: 38px; height: 38px; place-items: center; background: #e8f0fe; color: #1a73e8; }
.quick-result > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.quick-result small { color: #5f6368; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.quick-result strong, .quick-result em { overflow-wrap: anywhere; }
.quick-result strong { font-size: 13px; }
.quick-result em { color: #5f6368; font-size: 11px; font-style: normal; }
mark { padding: 0 2px; background: #fdd663; color: inherit; }

.profile-layout { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 18px; align-items: start; }
.profile-summary { display: grid; gap: 12px; justify-items: center; text-align: center; }
.profile-summary h2 { margin: 0; font-size: 16px; }.profile-summary p { margin: 3px 0 0; color: #5f6368; }
.profile-avatar-large { width: 104px; height: 104px; font-size: 36px; border-width: 4px; }
.profile-qr { display: grid; gap: 8px; justify-items: center; padding-top: 12px; border-top: 1px solid #dadce0; }
.profile-qr img { width: 170px; height: 170px; border: 1px solid #dadce0; }
.profile-qr small { color: #5f6368; }

.inline-form { display: inline-flex; margin: 0; }
.inline-filter { display: flex; align-items: center; gap: 10px; max-width: 760px; }
.inline-filter select { min-width: min(100%, 520px); }
.checkbox-field { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.checkbox-field input { width: 16px; height: 16px; }
.checkbox-field span { color: #3c4043; font-size: 12px; }
.status-pill.verified_paid, .status-pill.signed, .status-pill.completed { background: #e6f4ea; color: #137333; }
.status-pill.remitted, .status-pill.in_progress, .status-pill.partial { background: #e8f0fe; color: #185abc; }
.status-pill.required, .status-pill.ready_for_signature { background: #fef7e0; color: #b06000; }
.status-pill.overridden, .status-pill.void, .status-pill.superseded { background: #fce8e6; color: #b3261e; }

.rja-print-document-header { grid-template-columns: 58px minmax(0, 1fr); align-items: start; padding-bottom: 8px; border-bottom: 2px solid #1a73e8; }
.rja-print-document-header img { width: 56px; height: 56px; }
.rja-print-company strong { font-size: 16px; line-height: 1.12; }
.rja-print-company span { color: #202124; font-size: 9px; }.rja-print-company b { font-weight: 800; }
.rja-print-title-block h1 { font-size: 17px; text-transform: uppercase; }

@media (max-width: 760px) {
    .topbar-search { width: auto; flex: 1; min-width: 0; }
    .topbar-search input { min-width: 55px; }
    .account-menu .topbar-user, .account-menu summary > svg { display: none; }
    .profile-layout { grid-template-columns: 1fr; }
    .quick-search-form { align-items: stretch; flex-wrap: wrap; }
    .quick-search-form input { min-height: 34px; }
    .stock-location-line { grid-template-columns: 1fr; }
    .inline-filter { align-items: stretch; flex-direction: column; }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: #edf1f5;
    font-size: 13px;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: var(--blue);
    text-decoration: none;
}

.app-frame {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 10px;
    background: #fbfcfe;
    border-right: 3px solid var(--blue);
    z-index: 20;
}

.brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 8px 10px;
    color: var(--ink);
}

.brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.guest-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.brand span,
.guest-brand div {
    display: grid;
    gap: 2px;
}

.brand small,
.guest-brand span,
.topbar span,
.topbar small,
small,
.muted {
    color: var(--muted);
}

.sidebar-nav {
    display: grid;
    gap: 7px;
}

.nav-group {
    display: grid;
    gap: 2px;
}

.nav-group-title {
    padding: 4px 10px 2px;
    color: #80868b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.sidebar-nav a,
.sidebar-logout button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: #3c4043;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}

.sidebar-nav a.active {
    color: var(--blue);
    background: #e8edf6;
    font-weight: 700;
}

.sidebar-nav a:hover,
.sidebar-logout button:hover {
    background: #f1f3f4;
}

.sidebar-logout {
    margin-top: auto;
}

.main-panel {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 24px;
    background: rgba(251, 252, 254, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.topbar > div:not(.topbar-user) {
    display: grid;
    gap: 2px;
}

.topbar-user {
    margin-left: auto;
    display: grid;
    gap: 2px;
    text-align: right;
}

.sidebar-toggle {
    display: none;
}

.content-panel {
    display: grid;
    gap: 20px;
    padding: 20px 24px 34px;
}

.page-heading,
.panel-title,
.modal-header,
.repeater-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page-heading p,
.panel-title span,
.modal-header p,
.auth-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.page-heading h1,
.panel-title h2,
.modal-header h2,
.auth-heading h1 {
    margin: 0;
    letter-spacing: 0;
}

.page-heading h1 {
    font-size: 20px;
    font-weight: 850;
    line-height: 1.12;
}

.panel-title h2,
.modal-header h2 {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.auth-heading h1 {
    font-size: 22px;
}

.button-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.button,
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.button {
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
}

.button.primary {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

.button.ghost {
    background: #fff;
}

.button.small {
    min-height: 34px;
    padding-inline: 10px;
}

.button.wide {
    width: 100%;
}

.icon-button {
    width: 40px;
    height: 40px;
    padding: 0;
}

.icon-button.danger {
    color: var(--red);
}

.icon-button.success {
    color: #137333;
    border-color: #81c995;
    background: #e6f4ea;
}

svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.metric-card,
.panel,
.modal-card,
.guest-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
}

.metric-card {
    display: grid;
    gap: 10px;
    min-height: 98px;
    padding: 14px;
    border-left-width: 6px;
}

.metric-card span {
    color: var(--muted);
}

.metric-card strong {
    font-size: 28px;
    letter-spacing: 0;
}

.google-blue { border-left-color: var(--google-blue); }
.google-red { border-left-color: var(--google-red); }
.google-yellow { border-left-color: var(--google-yellow); }
.google-green { border-left-color: var(--google-green); }

.split-grid,
.report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.8fr);
    gap: 20px;
}

.panel {
    padding: 18px;
    min-width: 0;
}

.map-canvas {
    height: 420px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #eef3fb;
}

.map-canvas-large {
    height: calc(100vh - 210px);
    min-height: 520px;
}

.status-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dashboard-focus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-table {
    min-width: 680px;
}

.dashboard-table th,
.dashboard-table td {
    font-size: 11px;
}

.compact-status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-activity {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.compact-activity > div {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.compact-activity strong {
    font-size: 12px;
}

.compact-activity span {
    color: var(--muted);
    font-size: 11px;
}

.status-list > div {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--soft);
    border-radius: var(--radius);
}

.status-list em {
    font-style: normal;
    font-weight: 800;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue);
}

.status-pill,
.pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e8f0fe;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

.date-stack {
    display: grid;
    gap: 4px;
}

.date-stack strong {
    font-size: .8rem;
}

.date-marker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 650;
}

.date-marker svg {
    width: 13px;
    height: 13px;
}

.date-marker.green {
    background: #e6f4ea;
    color: #137333;
}

.date-marker.blue {
    background: #e8f0fe;
    color: #174ea6;
}

.date-marker.yellow {
    background: #fef7e0;
    color: #9a6700;
}

.date-marker.red {
    background: #fce8e6;
    color: #a50e0e;
}

.date-marker.empty {
    background: #f1f3f4;
    color: var(--muted);
}

.lead,
.prospect,
.draft,
.scheduled,
.available { background: #e8f0fe; color: var(--blue); }
.client_approval_recorded,
.accepted,
.paid,
.completed,
.installed { background: #e6f4ea; color: #137333; }
.for_client_approval,
.for_installation,
.equipment_on_order,
.queued,
.job_order_ready,
.job_order_created,
.in_progress,
.for_acceptance,
.ongoing,
.reserved,
.sent,
.submitted,
.admin_review,
.transferred { background: #fef7e0; color: #9a6700; }
.for_warranty,
.for_repair,
.expired,
.not_remitted { background: #fce8e6; color: #a50e0e; }
.for_replacement { background: #fef7e0; color: #9a6700; }
.cancelled,
.declined,
.defective,
.sold { background: #f1f3f4; color: #3c4043; }
.cctv { background: #e8f0fe; color: var(--blue); }
.aircon { background: #e6f4ea; color: #137333; }
.solar { background: #fef7e0; color: #b06000; }

.project-map-marker {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(32, 33, 36, 0.28);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
}
.combined,
.general,
.project_created,
.approved { background: #e6f4ea; color: #137333; }

.table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 12px;
}

.data-table-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.data-table-toolbar label {
    width: min(320px, 100%);
}

.data-table-toolbar input {
    min-height: 34px;
}

.data-table-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
}

.data-table-pager .icon-button {
    width: 34px;
    height: 34px;
}

.data-table-pager .icon-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.subnav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.subnav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: #3c4043;
    font-size: 12px;
    font-weight: 500;
    border-left-width: 4px;
}

.subnav a.active {
    border-color: #c6dafc;
    background: #e8f0fe;
    color: var(--blue);
}

.report-subnav a:nth-child(1) { border-left-color: var(--blue); }
.report-subnav a:nth-child(2) { border-left-color: var(--red); }
.report-subnav a:nth-child(3) { border-left-color: var(--yellow); }
.report-subnav a:nth-child(4) { border-left-color: var(--green); }
.report-subnav a:nth-child(5) { border-left-color: var(--blue); }
.report-subnav a:nth-child(6) { border-left-color: var(--green); }

.report-subnav a:nth-child(1).active { color: var(--blue); background: #e8f0fe; border-color: #c6dafc; border-left-color: var(--blue); }
.report-subnav a:nth-child(2).active { color: var(--red); background: #fce8e6; border-color: #f4c7c3; border-left-color: var(--red); }
.report-subnav a:nth-child(3).active { color: var(--yellow); background: #fef7e0; border-color: #fdd663; border-left-color: var(--yellow); }
.report-subnav a:nth-child(4).active { color: var(--green); background: #e6f4ea; border-color: #b7dfc1; border-left-color: var(--green); }
.report-subnav a:nth-child(5).active { color: var(--blue); background: #e8f0fe; border-color: #c6dafc; border-left-color: var(--blue); }
.report-subnav a:nth-child(6).active { color: var(--green); background: #e6f4ea; border-color: #b7dfc1; border-left-color: var(--green); }

.subnav small {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f3f4;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}

.subnav a.active small {
    background: #fff;
    color: var(--blue);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 840px;
}

.job-orders-table {
    min-width: 1180px;
}

.job-orders-table .jo-col-no { width: 12%; }
.job-orders-table .jo-col-project { width: 20%; }
.job-orders-table .jo-col-type { width: 11%; }
.job-orders-table .jo-col-tech { width: 15%; }
.job-orders-table .jo-col-date { width: 9%; }
.job-orders-table .jo-col-payment { width: 12%; }
.job-orders-table .jo-col-status { width: 9%; }
.job-orders-table .jo-col-files { width: 8%; }
.job-orders-table .jo-col-actions { width: 220px; }

th,
td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

th {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0;
    background: #fafafa;
}

/* Keep every data-table heading easy to scan while preserving cell alignment. */
table > thead > tr > th,
table > thead > tr > th.money-cell {
    text-align: center !important;
    vertical-align: middle;
}

/* Status and flag cells are compact visual indicators, so they read best centered. */
table > tbody > tr > td.status-cell,
table > tbody > tr > td.flag-cell,
table > tbody > tr > td:has(> .status-pill),
table > tbody > tr > td:has(> .date-marker) {
    text-align: center;
    vertical-align: middle;
}

table > tbody > tr > td.status-cell > small,
table > tbody > tr > td.flag-cell > small,
table > tbody > tr > td:has(> .status-pill) > small,
table > tbody > tr > td:has(> .date-marker) > small {
    display: block;
    margin-top: 3px;
}

td strong,
td span,
td small {
    display: block;
    max-width: 420px;
    overflow-wrap: anywhere;
}

td,
td strong {
    font-size: 12px;
}

td small {
    font-size: 11px;
}

.actions {
    width: 1%;
    white-space: nowrap;
}

.actions .icon-button {
    margin-right: 4px;
}

.item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-cell img,
.thumb-placeholder {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--radius);
    object-fit: cover;
    background: #f1f3f4;
    border: 1px solid var(--line);
}

.thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.center {
    text-align: center;
}

.empty-state {
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 28px;
    color: var(--muted);
}

.empty-state.compact {
    padding: 16px;
}

.guest-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(90deg, rgba(26,115,232,0.08), rgba(52,168,83,0.08)),
        #f8fafd;
}

.guest-card {
    width: min(440px, 100%);
    display: grid;
    gap: 22px;
    padding: 26px;
    box-shadow: var(--shadow);
}

.guest-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-heading {
    display: grid;
    gap: 6px;
}

.guest-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.setup-grid {
    display: grid;
    gap: 10px;
}

.setup-grid div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}

.setup-grid span {
    color: var(--muted);
    font-size: 12px;
}

.form-stack,
.form-grid {
    display: grid;
    gap: 14px;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.field-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #3c4043;
}

.field-label b {
    color: var(--red);
    font-size: 14px;
    line-height: 1;
}

.field-label svg {
    width: 14px;
    height: 14px;
    color: var(--muted);
}

input,
textarea,
select {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--ink);
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
}

.chip-field,
.coordinate-field {
    display: grid;
    gap: 6px;
}

.chip-input-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 40px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.chip-list {
    display: contents;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 3px 7px 3px 9px;
    border: 1px solid #d7dde7;
    border-radius: 999px;
    background: #eef2f7;
    color: #2f3a4a;
    cursor: pointer;
}

.chip svg {
    width: 13px;
    height: 13px;
}

.chip-input-box input {
    flex: 1 1 180px;
    min-width: 160px;
    min-height: 28px;
    padding: 2px;
    border: 0;
    box-shadow: none;
}

.technician-assignment-field {
    position: relative;
    display: grid;
    gap: 6px;
}

.technician-assignment-results {
    position: absolute;
    z-index: 95;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
}

.technician-assignment-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.technician-assignment-option:hover,
.technician-assignment-option:focus {
    background: #e8f0fe;
    color: #174ea6;
    outline: 0;
}

.technician-assignment-hint {
    padding: 8px 10px;
    color: var(--muted);
    font-size: 12px;
}

.coordinate-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.coordinate-control input[readonly] {
    background: #fff;
    color: var(--muted);
}

.map-picker-canvas {
    height: min(62vh, 560px);
    min-height: 380px;
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.coordinate-picked {
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px;
}

.span-2 {
    grid-column: 1 / -1;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(32, 33, 36, 0.38);
    z-index: 50;
}

.modal-backdrop.open {
    display: block;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal.open {
    display: flex;
}

.modal-card {
    width: min(980px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 20px;
    box-shadow: var(--shadow);
}

.wide-modal {
    width: min(1380px, 100%);
}

.modal-card.printable-form {
    width: min(1280px, 100%);
}

.modal-card.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wide-modal.form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modal-card .table-wrap {
    overflow-x: visible;
}

.modal-card table,
.modal-card .job-orders-table,
.modal-card .dashboard-table {
    min-width: 0;
    table-layout: fixed;
}

.modal-card th,
.modal-card td {
    overflow-wrap: anywhere;
}

.modal-header {
    grid-column: 1 / -1;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}

.repeater {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}

.estimate-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fafd;
}

.estimate-summary div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--line);
}

.estimate-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.estimate-summary strong {
    font-size: 16px;
}

.inline-row,
.project-line-row {
    display: grid;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.inline-row {
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 0.8fr) 42px;
}

.project-line-row {
    grid-template-columns: 130px 180px minmax(220px, 1fr) 130px 90px 120px 42px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.checkbox-grid label,
.toggle-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.checkbox-grid input,
.toggle-line input[type="checkbox"] {
    width: 18px;
    min-height: 18px;
}

.detail-list,
[data-project-detail-body],
[data-quote-print-body],
[data-sale-print-body],
[data-job-order-print-body],
[data-service-print-body] {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.detail-row,
.print-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-row div {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}

.print-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ink);
}

.print-head img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.print-head div {
    display: grid;
    gap: 2px;
}

.print-head em {
    font-style: normal;
    color: var(--muted);
}

.signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px;
    margin-top: 38px;
}

.signature-grid span {
    display: grid;
    align-content: end;
    min-height: 86px;
    padding-top: 32px;
    border-top: 1px solid var(--ink);
    text-align: center;
}

.signature-grid .captured-signature {
    gap: 3px;
    padding-top: 0;
    border-top: 0;
}

.captured-signature img {
    width: 100%;
    max-height: 72px;
    object-fit: contain;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ink);
}

.captured-signature b,
.captured-signature small,
.captured-signature em {
    display: block;
    font-style: normal;
}

.captured-signature em {
    color: var(--muted);
}

.form-table {
    min-width: 0;
    border: 1px solid var(--line);
}

.form-table .form-col-group { width: 120px; }
.form-table .form-col-desc { width: 34%; }
.form-table .form-col-serial { width: 170px; }
.form-table .form-col-qty { width: 70px; }
.form-table .form-col-money { width: 130px; }

.form-table th,
.form-table td {
    height: 34px;
    border: 1px solid var(--line);
}

.technical-table th:first-child,
.technical-table td:first-child {
    width: 30%;
}

.signature-pad {
    display: grid;
    gap: 8px;
}

.signature-pad-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.signature-pad canvas {
    width: 100%;
    height: 300px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff1bf;
    touch-action: none;
    cursor: crosshair;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.checklist-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.checklist-grid span,
.warranty-box {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--soft);
}

.checklist-grid span::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 1px solid var(--muted);
    background: #fff;
    vertical-align: -1px;
}

.warranty-box {
    display: grid;
    gap: 8px;
}

.warranty-box p,
.warranty-box ul,
.print-subtitle {
    margin: 0;
}

.blank-lines {
    min-height: 90px;
    border-bottom: 1px solid var(--line);
    background-image: linear-gradient(to bottom, transparent 31px, var(--line) 32px);
    background-size: 100% 32px;
}

.print-subtitle {
    color: var(--muted);
    font-style: italic;
}

/* Shared document treatment for every print action. */
.print-body {
    margin: 0;
    background: #f4f7fb;
    color: #202124;
    font-family: Arial, Helvetica, sans-serif;
}

.rja-print-document {
    box-sizing: border-box;
    width: min(210mm, calc(100% - 32px));
    min-height: 297mm;
    margin: 16px auto;
    padding: 16mm 14mm 25mm;
    background: #fff;
    box-shadow: 0 1px 6px rgb(60 64 67 / 20%);
}

.print-landscape .rja-print-document,
.rja-print-document.rja-print-landscape {
    width: min(297mm, calc(100% - 32px));
    min-height: 210mm;
    padding: 13mm 13mm 24mm;
}

.rja-print-document-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) minmax(190px, .9fr);
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 3px solid #1a73e8;
}

.rja-print-document-header img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.rja-print-company,
.rja-print-doc-meta,
.rja-print-preparer,
.rja-print-generated-info {
    display: grid;
    gap: 2px;
}

.rja-print-company strong {
    color: #174ea6;
    font-size: 14px;
    letter-spacing: 0;
}

.rja-print-company span,
.rja-print-doc-meta span,
.rja-print-doc-meta small,
.rja-print-company small,
.rja-print-generated-info span,
.rja-print-generated-info small,
.rja-print-preparer span,
.rja-print-preparer small {
    color: #5f6368;
    font-size: 9px;
}

.rja-print-doc-meta {
    padding-left: 12px;
    border-left: 1px solid #dadce0;
    text-align: right;
}

.rja-print-doc-meta strong {
    font-size: 10px;
}

.rja-print-title-block {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0 10px;
    border-bottom: 1px solid #dadce0;
}

.rja-print-title-block h1 {
    margin: 0;
    color: #202124;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.rja-print-title-block span {
    color: #1a73e8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rja-print-content {
    display: grid;
    gap: 10px;
    padding-top: 12px;
}

.rja-print-content h1,
.rja-print-content h2,
.rja-print-content h3,
.rja-print-content h4 {
    margin: 8px 0 2px;
    color: #174ea6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}

.rja-print-content p {
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
}

.rja-print-content .detail-row {
    gap: 5px;
}

.rja-print-content .detail-row div {
    display: grid;
    gap: 3px;
    min-height: 42px;
    padding: 6px 7px;
    border: 1px solid #dadce0;
    border-left: 3px solid #1a73e8;
    border-radius: 0;
    background: #fff;
}

.rja-print-content .detail-row div > strong {
    color: #5f6368;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rja-print-content .detail-row div > small {
    color: #202124;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.rja-print-content .rja-print-details-table,
.rja-print-content .rja-print-checklist-table,
.rja-print-content .rja-print-signature-table,
.rja-print-content .rja-print-list-table,
.rja-print-content .rja-print-project-evidence-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #9aa0a6;
    background: #fff;
}

.rja-print-content .rja-print-details-table th,
.rja-print-content .rja-print-details-table td,
.rja-print-content .rja-print-checklist-table td,
.rja-print-content .rja-print-signature-table td,
.rja-print-content .rja-print-list-table td,
.rja-print-content .rja-print-project-evidence-table th,
.rja-print-content .rja-print-project-evidence-table td {
    padding: 5px 6px;
    border: 1px solid #bdc1c6;
    vertical-align: top;
}

.rja-print-content .rja-print-details-table th {
    width: 18%;
    color: #202124;
    background: #f1f3f4;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.rja-print-content .rja-print-details-table td {
    width: 32%;
    color: #202124;
    font-size: 9px;
    font-weight: 600;
}

.rja-print-content .rja-print-details-table .rja-print-field-value {
    min-height: 0;
    padding: 0;
    border: 0;
    font-size: 9px;
}

.rja-print-content .rja-print-checklist-table td {
    font-size: 9px;
}

.rja-print-content .rja-print-checklist-table .rja-print-check-cell {
    width: 4%;
    padding: 0;
    background: #fff;
}

.rja-print-content .rja-print-checklist-table .rja-print-check-cell::after {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    margin: auto;
    border: 1px solid #5f6368;
}

.rja-print-content .rja-print-list-table td,
.rja-print-content .rja-print-project-evidence-table td {
    color: #202124;
    font-size: 9px;
}

.rja-print-content .rja-print-project-evidence-table th {
    color: #202124;
    background: #f1f3f4;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.rja-print-content .rja-print-project-evidence-table th:first-child,
.rja-print-content .rja-print-project-evidence-table td:first-child {
    width: 17%;
}

.rja-print-content .rja-print-project-evidence-table th:nth-child(2),
.rja-print-content .rja-print-project-evidence-table td:nth-child(2) {
    width: 25%;
}

.rja-print-content .rja-print-project-evidence-table .project-evidence-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
}

.rja-print-content .rja-print-project-evidence-table .project-evidence-links a {
    display: inline-grid;
    grid-template-columns: 28px minmax(70px, 1fr);
    align-items: center;
    gap: 4px;
    max-width: 190px;
    padding: 0;
    border: 0;
    color: #202124;
    font-size: 8px;
}

.rja-print-content .rja-print-project-evidence-table .project-evidence-links img {
    width: 28px;
    height: 28px;
    object-fit: cover;
}

.rja-print-content .rja-print-signature-table {
    margin-top: 26px;
    border: 0;
    break-inside: avoid;
    page-break-inside: avoid;
}

.rja-print-content .rja-print-signature-table td {
    width: 33.333%;
    min-height: 88px;
    border: 0;
    text-align: center;
    vertical-align: bottom;
}

.rja-print-signature-line,
.rja-print-captured-signature {
    min-height: 55px;
    border-bottom: 1px solid #202124;
}

.rja-print-captured-signature img {
    display: block;
    width: 100%;
    max-height: 55px;
    object-fit: contain;
}

.rja-print-content .rja-print-signature-table strong,
.rja-print-content .rja-print-signature-table small,
.rja-print-content .rja-print-signature-table span {
    display: block;
    margin-top: 3px;
    font-size: 8px;
}

.rja-print-content .rja-print-signature-table strong {
    color: #202124;
    font-size: 9px;
}

.rja-print-content .rja-print-signature-table span {
    color: #5f6368;
    text-transform: uppercase;
}

.rja-print-content .money-cell,
.rja-print-content th.money-cell {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.rja-print-content .money-detail > .money-value,
.rja-print-content .money-detail > small,
.rja-print-content .money-detail > strong:not(:first-child) {
    justify-self: end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rja-print-content .table-wrap {
    overflow: visible;
}

.rja-print-content table,
.rja-print-content .form-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid #bdc1c6;
    font-size: 9px;
}

.rja-print-content th,
.rja-print-content td,
.rja-print-content .form-table th,
.rja-print-content .form-table td {
    height: auto;
    padding: 5px 6px;
    border: 1px solid #dadce0;
    vertical-align: top;
    line-height: 1.32;
}

.rja-print-content th,
.rja-print-content .form-table th {
    color: #174ea6;
    background: #e8f0fe;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.rja-print-content td small,
.rja-print-content td span:not(.date-marker) {
    display: block;
    margin-top: 2px;
    font-size: 8px;
}

.rja-print-content .print-fields {
    gap: 6px;
}

.rja-print-content .print-fields label {
    display: grid;
    gap: 4px;
    color: #5f6368;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.rja-print-field-value {
    display: block;
    min-height: 18px;
    padding: 3px 0;
    color: #202124;
    border-bottom: 1px solid #5f6368;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.rja-print-field-value.empty {
    min-height: 24px;
}

.rja-print-field-value.multiline {
    min-height: 46px;
    white-space: pre-wrap;
}

.rja-print-field-value.rja-print-money-field {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rja-print-check {
    display: inline-block;
    min-width: 34px;
    padding: 2px 5px;
    border: 1px solid #9aa0a6;
    border-radius: 2px;
    color: #5f6368;
    font-size: 8px;
    text-align: center;
}

.rja-print-check.checked {
    border-color: #34a853;
    color: #137333;
}

.rja-print-content .signature-grid {
    gap: 18px;
    margin-top: 28px;
}

.rja-print-content .signature-grid span {
    min-height: 65px;
    padding-top: 26px;
    font-size: 9px;
}

.rja-print-prepared {
    display: grid;
    grid-template-columns: 1fr minmax(230px, .85fr);
    align-items: end;
    gap: 28px;
    margin-top: 34px;
    padding-top: 12px;
    border-top: 1px solid #dadce0;
}

.rja-print-generated-info {
    align-self: start;
}

.rja-print-generated-info strong {
    color: #202124;
    font-size: 10px;
}

.rja-print-preparer {
    text-align: center;
}

.rja-print-preparer > span:first-child {
    justify-self: start;
    color: #202124;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.rja-print-signature-space {
    width: 100%;
    min-height: 54px;
    border-bottom: 1px solid #202124;
}

.rja-print-preparer > strong {
    margin-top: 4px;
    color: #202124;
    font-size: 10px;
}

.rja-print-preparer > small {
    font-size: 8px;
}

.rja-print-footer {
    position: fixed;
    right: 0;
    bottom: 7mm;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid #9aa0a6;
    color: #5f6368;
    font-size: 7.5px;
}

.rja-print-footer > span:nth-child(2) {
    text-align: center;
}

.rja-print-page-number {
    white-space: nowrap;
    text-align: right;
}

.rja-print-page-number::after {
    content: "Page " counter(page);
}

.leaflet-popup-content {
    min-width: 220px;
}

/* Bootstrap theme pass for the whole Core PHP application. */
body {
    background: #f6f7fb;
    color: var(--bs-body-color);
    font-size: .875rem;
}

.app-frame {
    background: #f6f7fb;
}

.sidebar {
    background: #fff;
    border-right: 3px solid var(--bs-primary);
    box-shadow: var(--bs-box-shadow-sm);
}

.brand {
    margin-bottom: 4px;
    padding: 8px 10px 14px;
    border-bottom: 1px solid var(--bs-border-color);
}

.brand strong {
    font-size: .86rem;
    font-weight: 700;
    line-height: 1.16;
    text-transform: none;
}

.brand small {
    font-size: .74rem;
    line-height: 1.2;
}

.brand small,
.nav-group-title {
    color: var(--bs-secondary-color);
}

.sidebar-nav {
    gap: .35rem;
}

.nav-group {
    gap: .15rem;
}

.sidebar-nav a,
.sidebar-logout button {
    min-height: 34px;
    padding: .45rem .65rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    font-size: .82rem;
    font-weight: 500;
}

.sidebar-nav a.active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 600;
}

.sidebar-nav a:hover,
.sidebar-logout button:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-primary);
}

.topbar {
    min-height: 62px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-sm);
}

.topbar strong {
    font-size: .95rem;
    font-weight: 700;
}

.content-panel {
    gap: 1rem;
    padding: 1.25rem 1.5rem 2rem;
}

.page-heading {
    padding-bottom: .25rem;
}

.page-heading h1 {
    color: var(--bs-emphasis-color);
    font-size: 1.35rem;
    font-weight: 700;
}

.panel,
.metric-card,
.modal-card,
.guest-card {
    background: var(--bs-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--bs-box-shadow-sm);
}

.panel {
    padding: 1rem;
}

.panel-title {
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.panel-title h2,
.modal-header h2 {
    font-size: 1rem;
    font-weight: 650;
}

.metric-card {
    min-height: 104px;
    padding: 1rem;
    border-left-width: .35rem;
}

.metric-card span {
    color: var(--bs-secondary-color);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.metric-card strong {
    font-size: 1.85rem;
    font-weight: 700;
}

.metric-card.google-blue {
    border-left-color: var(--google-blue);
    background: linear-gradient(90deg, rgba(66, 133, 244, .18), #fff 64%);
}

.metric-card.google-red {
    border-left-color: var(--google-red);
    background: linear-gradient(90deg, rgba(234, 67, 53, .16), #fff 64%);
}

.metric-card.google-yellow {
    border-left-color: var(--google-yellow);
    background: linear-gradient(90deg, rgba(251, 188, 4, .22), #fff 64%);
}

.metric-card.google-green {
    border-left-color: var(--google-green);
    background: linear-gradient(90deg, rgba(52, 168, 83, .18), #fff 64%);
}

.metric-card.google-blue span,
.metric-card.google-blue strong { color: #174ea6; }

.metric-card.google-red span,
.metric-card.google-red strong { color: #a50e0e; }

.metric-card.google-yellow span,
.metric-card.google-yellow strong { color: #9a6700; }

.metric-card.google-green span,
.metric-card.google-green strong { color: #137333; }

.button {
    min-height: 38px;
    padding: .45rem .75rem;
    border-radius: var(--bs-border-radius);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.2;
}

.button.primary {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

.button.ghost {
    border-color: var(--bs-border-color);
    background: #fff;
    color: var(--bs-body-color);
}

.button.ghost:hover {
    background: var(--bs-tertiary-bg);
}

.icon-button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: var(--bs-border-radius);
}

.table-wrap {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #fff;
    box-shadow: var(--bs-box-shadow-sm);
}

.table-wrap table {
    margin-bottom: 0;
}

table {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #f8f9fa;
    --bs-table-hover-bg: #f1f6ff;
    border-color: var(--bs-border-color);
}

th {
    background: var(--bs-light);
    color: var(--bs-secondary-color);
    font-size: .7rem;
    font-weight: 700;
}

td,
td strong {
    font-size: .8rem;
}

td small {
    color: var(--bs-secondary-color);
    font-size: .74rem;
}

label {
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 600;
}

input,
textarea,
select {
    min-height: 38px;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: .85rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}

.modal-card {
    border-radius: var(--bs-modal-border-radius, var(--bs-border-radius-lg));
}

.modal-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.modal-actions {
    border-top: 1px solid var(--bs-border-color);
}

.status-pill,
.pill {
    min-height: 24px;
    padding: .35em .65em;
    font-size: .72rem;
    font-weight: 600;
}

.subnav {
    gap: .5rem;
}

.subnav a {
    border-radius: var(--bs-border-radius-pill);
    font-size: .82rem;
    font-weight: 400;
}

.subnav a.active {
    font-weight: 500;
}

.data-table-toolbar {
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #fff;
    box-shadow: var(--bs-box-shadow-sm);
}

.detail-list,
[data-project-detail-body],
[data-quote-print-body],
[data-sale-print-body],
[data-job-order-print-body],
[data-service-print-body],
[data-report-detail-body],
[data-client-project-list] {
    gap: 1rem;
}

.detail-row div {
    display: grid;
    gap: .35rem;
    align-content: start;
    border-left: .25rem solid var(--google-blue);
    background: #fff;
}

.detail-row div:nth-child(4n+2) {
    border-left-color: var(--google-green);
}

.detail-row div:nth-child(4n+3) {
    border-left-color: var(--google-yellow);
}

.detail-row div:nth-child(4n+4) {
    border-left-color: var(--google-red);
}

.detail-row div > strong {
    color: var(--bs-secondary-color);
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}

.detail-row div > small {
    color: var(--bs-emphasis-color);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Monetary values follow an accounting-style right edge throughout the system. */
.money-cell {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

th.money-cell {
    text-align: right !important;
}

.money-cell > .money-value,
.money-cell > strong,
.money-cell > small,
.money-cell > span {
    text-align: inherit;
}

.money-detail {
    text-align: right;
}

.money-detail > :first-child {
    justify-self: start;
    text-align: left;
}

.money-detail > .money-value,
.money-detail > small,
.money-detail > strong:not(:first-child) {
    justify-self: end;
    min-width: 8ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.money-value {
    font-variant-numeric: tabular-nums;
}

.money-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.estimate-summary .money-detail > .money-value {
    display: block;
    min-width: 12ch;
}

.client-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #c6dafc;
    border-left: .35rem solid var(--google-blue);
    border-radius: var(--bs-border-radius-lg);
    background: linear-gradient(90deg, rgba(66, 133, 244, .14), #fff 70%);
}

.client-detail-hero span,
.client-stat-grid span {
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
}

.client-detail-hero strong {
    display: block;
    margin-top: .2rem;
    color: var(--bs-emphasis-color);
    font-size: 1.25rem;
    font-weight: 750;
}

.client-detail-hero small {
    display: block;
    margin-top: .25rem;
    color: var(--bs-secondary-color);
}

.client-contact-chips {
    display: flex;
    align-content: start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
}

.client-contact-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #e8f0fe;
    color: #174ea6;
    font-size: .78rem;
    font-weight: 650;
    text-transform: none;
}

.client-contact-chips span:nth-child(4n+2) {
    background: #e6f4ea;
    color: #137333;
}

.client-contact-chips span:nth-child(4n+3) {
    background: #fef7e0;
    color: #9a6700;
}

.client-contact-chips span:nth-child(4n+4) {
    background: #fce8e6;
    color: #a50e0e;
}

.client-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.client-stat-grid div {
    display: grid;
    gap: .2rem;
    padding: .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #fff;
}

.client-stat-grid strong {
    color: var(--bs-emphasis-color);
    font-size: 1.05rem;
    font-weight: 750;
}

.action-button {
    border-color: transparent !important;
    color: #fff !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .18);
}

.action-button > svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
}

.action-button:hover,
.action-button:focus {
    color: #fff !important;
    filter: brightness(.96);
    transform: translateY(-1px);
}

.action-blue {
    background: var(--google-blue) !important;
}

.action-green {
    background: var(--google-green) !important;
}

.action-yellow {
    background: var(--google-yellow) !important;
    color: #202124 !important;
}

.action-yellow:hover,
.action-yellow:focus {
    color: #202124 !important;
}

.action-red {
    background: var(--google-red) !important;
}

.action-form {
    display: inline-flex;
    margin: 0;
}

.page-actions,
.operation-lines {
    display: flex;
    gap: 8px;
    align-items: center;
}

.operation-lines {
    flex-direction: column;
    align-items: stretch;
}

.operation-line {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(150px, .7fr) minmax(190px, 1fr) 36px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #d2e3fc;
    background: #f8fbff;
}

.operation-line label,
.operation-item-summary {
    min-width: 0;
    margin: 0;
}

.operation-item-summary {
    display: grid;
    gap: 4px;
    align-self: center;
}

.operation-item-summary strong,
.operation-item-summary small {
    overflow-wrap: anywhere;
}

.operation-line-static {
    grid-template-columns: minmax(280px, 1fr) minmax(170px, .55fr);
}

.operation-remove {
    width: 36px;
    height: 36px;
    margin-bottom: 1px;
}

/* The inventory picker is searchable and must overlay the loading form. */
#jobOrderLoadModal .modal-card {
    overflow: visible;
}

#jobOrderLoadModal .operation-line {
    position: relative;
    z-index: 1;
}

#jobOrderLoadModal .search-select.open {
    z-index: 130;
}

#jobOrderLoadModal .search-select-menu {
    z-index: 140;
    max-height: min(340px, calc(100vh - 120px));
}

.signature-modal {
    max-width: 1380px;
}

.signature-capture-area canvas {
    min-height: 380px;
}

.is-disabled {
    opacity: .62;
}

@media (max-width: 760px) {
    .page-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .operation-line,
    .operation-line-static {
        grid-template-columns: 1fr;
    }

    .operation-remove {
        justify-self: end;
    }
}

.search-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.search-select-native {
    position: absolute !important;
    left: 0;
    bottom: 0;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.search-select-input {
    padding-right: 2rem;
    background-image:
        linear-gradient(45deg, transparent 50%, #5f6368 50%),
        linear-gradient(135deg, #5f6368 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 55%,
        calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.search-select-menu {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 90;
    display: none;
    max-height: 260px;
    overflow: auto;
    padding: .35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #fff;
    box-shadow: var(--bs-box-shadow);
}

.search-select.open .search-select-menu {
    display: grid;
    gap: .2rem;
}

.search-select-hint,
.search-select-empty {
    padding: .35rem .45rem;
    color: var(--bs-secondary-color);
    font-size: .74rem;
}

.search-select-option {
    width: 100%;
    padding: .45rem .55rem;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}

.search-select-option:hover,
.search-select-option:focus,
.search-select-option.selected {
    background: #e8f0fe;
    color: #174ea6;
    outline: 0;
}

.guest-body {
    background: #f6f7fb;
}

.guest-card {
    border-top: .35rem solid var(--bs-primary);
}

.development-login-panel {
    display: grid;
    gap: 8px;
    padding: 11px;
    border: 1px solid #c6dafc;
    background: #f8fbff;
}

.development-login-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: #174ea6;
    font-size: 11px;
}

.development-login-heading strong { font-size: 12px; }
.development-login-heading code { color: #a50e0e; font-weight: 800; }
.development-login-table-wrap { max-height: 230px; overflow: auto; border: 1px solid #d2e3fc; background: #fff; }
.development-login-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.development-login-table th, .development-login-table td { padding: 6px 7px; border-bottom: 1px solid #edf1f5; text-align: left; vertical-align: top; }
.development-login-table th { position: sticky; top: 0; background: #e8f0fe; color: #174ea6; font-size: 9px; text-transform: uppercase; }
.development-login-table tr:last-child td { border-bottom: 0; }
.development-login-table code { font-size: 10px; color: #202124; white-space: nowrap; }

@media (max-width: 1080px) {
    .metric-grid,
    .split-grid,
    .report-grid,
    .dashboard-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-line-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) 42px;
    }
}

@media (max-width: 820px) {
    .app-frame {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .topbar {
        padding: 12px 16px;
    }

    .content-panel {
        padding: 18px 14px 30px;
    }

    .metric-grid,
    .split-grid,
    .report-grid,
    .dashboard-focus-grid,
    .form-grid,
    .detail-row,
    .print-fields,
    .checkbox-grid,
    .estimate-summary,
    .coordinate-control {
        grid-template-columns: 1fr;
    }

    .data-table-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .inline-row,
    .project-line-row {
        grid-template-columns: 1fr 42px;
    }

    .checklist-grid,
    .checklist-grid.two,
    .compact-status-list,
    .client-detail-hero,
    .client-stat-grid {
        grid-template-columns: 1fr;
    }

    .client-contact-chips {
        justify-content: flex-start;
    }

    .inline-row select,
    .inline-row .search-select,
    .inline-row input,
    .project-line-row select,
    .project-line-row .search-select,
    .project-line-row input {
        grid-column: 1;
    }

    .inline-row button,
    .project-line-row button {
        grid-column: 2;
        grid-row: 1;
    }

    .page-heading,
    .panel-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar-user {
        display: none;
    }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 14mm 11mm 24mm;
    }

    html,
    body {
        margin: 0;
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sidebar,
    .topbar,
    .no-print,
    .modal-backdrop,
    .page-heading .button,
    .icon-button,
    .modal-actions {
        display: none !important;
    }

    .app-frame,
    .content-panel,
    .report-grid,
    .split-grid {
        display: block;
        padding: 0;
    }

    .panel,
    .modal-card,
    .printable-form {
        border: 0;
        box-shadow: none;
        max-height: none;
        overflow: visible;
    }

    table {
        min-width: 0;
        font-size: 11px;
    }

    .print-body {
        background: #fff;
    }

    .rja-print-document {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0 0 18mm;
        box-shadow: none;
    }

    .rja-print-document.rja-print-landscape {
        width: auto;
        min-height: 0;
        padding: 0 0 18mm;
    }

    .rja-print-document-header {
        break-inside: avoid;
    }

    .rja-print-content h1,
    .rja-print-content h2,
    .rja-print-content h3,
    .rja-print-content h4,
    .rja-print-prepared,
    .rja-print-content .warranty-box,
    .rja-print-content .signature-grid {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rja-print-content .rja-print-details-table,
    .rja-print-content .rja-print-checklist-table,
    .rja-print-content .rja-print-signature-table {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rja-print-content table {
        break-inside: auto;
        page-break-inside: auto;
    }

    .rja-print-content thead {
        display: table-header-group;
    }

    .rja-print-content tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .rja-print-footer {
        bottom: 7mm;
    }
}

/* Final layout overrides after legacy and print rules. */
.nav-group { display: block; }
.nav-group summary { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; color:#5f6368; cursor:pointer; font-size:10px; font-weight:800; list-style:none; text-transform:uppercase; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary svg { width:14px; height:14px; transition:transform .16s ease; }
.nav-group[open] summary svg { transform:rotate(180deg); }
.nav-group-links { display:grid; gap:2px; padding-bottom:4px; }
.topbar-search { display:flex; align-items:center; gap:7px; width:min(560px,48vw); min-width:220px; padding:4px 6px 4px 10px; border:1px solid #dadce0; background:#fff; }
.topbar-search > svg { width:17px; height:17px; color:#5f6368; }.topbar-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; }.topbar-search .icon-button { width:30px; height:30px; }
.account-menu { position:relative; margin-left:auto; }.account-menu summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; }.account-menu summary::-webkit-details-marker { display:none; }.account-menu summary > svg { width:15px; height:15px; color:#5f6368; }
.topbar-user { margin-left:0; min-width:138px; }.topbar-user strong { color:#202124; font-size:12px; font-weight:800; }.topbar-user small { font-size:10px; font-weight:500; }
.profile-avatar { display:inline-grid; width:34px; height:34px; place-items:center; overflow:hidden; border:2px solid #d2e3fc; border-radius:50%; background:#1a73e8; color:#fff; font-weight:800; }.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.account-dropdown { position:absolute; top:calc(100% + 10px); right:0; z-index:40; display:grid; min-width:210px; padding:6px; border:1px solid #dadce0; background:#fff; box-shadow:0 8px 20px rgb(60 64 67 / 20%); }.account-dropdown a,.account-dropdown button { display:flex; align-items:center; gap:9px; padding:9px 10px; border:0; background:transparent; color:#3c4043; font-size:12px; text-align:left; }.account-dropdown button { width:100%; cursor:pointer; }.account-dropdown a:hover,.account-dropdown button:hover { background:#f1f3f4; }.account-dropdown hr { width:100%; margin:4px 0; border:0; border-top:1px solid #dadce0; }
.inventory-fallback-thumb { display:inline-grid; width:38px; height:38px; place-items:center; flex:0 0 38px; border:1px solid #d2e3fc; background:#e8f0fe; color:#1a73e8; }.inventory-fallback-thumb.aircon { border-color:#ceead6; background:#e6f4ea; color:#188038; }.inventory-fallback-thumb.cctv { border-color:#fdd663; background:#fef7e0; color:#b06000; }.inventory-fallback-thumb.solar { border-color:#f9ab00; background:#fef7e0; color:#b06000; }.inventory-fallback-thumb svg { width:20px; height:20px; }
.delivery-entry,.profile-divider { display:grid; gap:3px; padding-top:9px; border-top:1px solid #dadce0; }.delivery-entry span,.profile-divider span { color:#5f6368; font-size:11px; }.stock-location-line { grid-template-columns:minmax(270px,1fr) minmax(150px,.45fr) 36px; }.table-focus-row > td { background:#fff8d6 !important; box-shadow:inset 0 2px 0 #fbbc04,inset 0 -2px 0 #fbbc04; }.dashboard-view-all { display:flex; gap:12px; padding:9px 2px 0; font-size:11px; font-weight:700; }
.quick-search-form { display:flex; align-items:center; gap:10px; max-width:900px; padding:10px; border:1px solid #d2e3fc; background:#f8fbff; }.quick-search-form > svg { width:22px; height:22px; color:#1a73e8; }.quick-search-form input { flex:1; min-width:0; border:0; outline:0; background:transparent; }.quick-result-list { display:grid; gap:7px; }.quick-result { display:grid; grid-template-columns:38px minmax(0,1fr) 22px; align-items:center; gap:11px; padding:10px; border:1px solid #dadce0; background:#fff; color:#202124; }.quick-result:hover { border-color:#1a73e8; background:#f8fbff; }.quick-result-icon { display:grid; width:38px; height:38px; place-items:center; background:#e8f0fe; color:#1a73e8; }.quick-result > span:nth-child(2) { display:grid; gap:3px; min-width:0; }.quick-result small { color:#5f6368; font-size:10px; font-weight:700; text-transform:uppercase; }.quick-result strong,.quick-result em { overflow-wrap:anywhere; }.quick-result strong { font-size:13px; }.quick-result em { color:#5f6368; font-size:11px; font-style:normal; }mark { padding:0 2px; background:#fdd663; color:inherit; }
.profile-layout { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:18px; align-items:start; }.profile-summary { display:grid; gap:12px; justify-items:center; text-align:center; }.profile-summary h2 { margin:0; font-size:16px; }.profile-summary p { margin:3px 0 0; color:#5f6368; }.profile-avatar-large { width:104px; height:104px; font-size:36px; border-width:4px; }.profile-qr { display:grid; gap:8px; justify-items:center; padding-top:12px; border-top:1px solid #dadce0; }.profile-qr img { width:170px; height:170px; border:1px solid #dadce0; }.profile-qr small { color:#5f6368; }
.rja-print-document-header { grid-template-columns:58px minmax(0,1fr); align-items:start; padding-bottom:8px; border-bottom:2px solid #1a73e8; }.rja-print-document-header img { width:56px; height:56px; }.rja-print-company strong { font-size:16px; line-height:1.12; }.rja-print-company span { color:#202124; font-size:9px; }.rja-print-company b { font-weight:800; }.rja-print-title-block h1 { font-size:17px; text-transform:uppercase; }
/* Formal document output and roomy working dialogs. */
.rja-print-document-header { grid-template-columns:58px minmax(0,1fr) 94px; }
.rja-print-no-qr { align-self:center; padding-left:8px; border-left:1px solid #dadce0; text-align:right; }
.rja-print-no-qr strong { color:#174ea6; font-size:8px; text-transform:uppercase; }
.rja-print-no-qr small { display:block; max-width:94px; overflow-wrap:anywhere; color:#5f6368; font-size:7px; }
.rja-print-landscape .rja-print-content table { font-size:8px; }
.rja-print-landscape .rja-print-content th,.rja-print-landscape .rja-print-content td { padding:4px 5px; }
@media (max-width: 1100px) { .wide-modal.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:760px) { .topbar-search { width:auto; flex:1; min-width:0; }.topbar-search input { min-width:55px; }.account-menu .topbar-user,.account-menu summary > svg { display:none; }.profile-layout { grid-template-columns:1fr; }.quick-search-form { align-items:stretch; flex-wrap:wrap; }.quick-search-form input { min-height:34px; }.stock-location-line { grid-template-columns:1fr; } }

/* Usability refinements: the navigation stays fixed while its menu remains independently scrollable. */
.sidebar-nav { min-height: 0; flex: 1 1 auto; align-content: start; grid-auto-rows: max-content; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 8px; background: #bdc1c6; }
.nav-group { align-content: start; }.nav-group summary { margin: 0; }.nav-group-links { align-content: start; }
.sidebar-nav { gap: 2px; }.nav-group { margin: 0; }.nav-group summary { padding: 5px 8px 3px; line-height: 1.15; }.nav-group-links { gap: 1px; padding-bottom: 2px; }.sidebar-nav a { min-height: 31px; padding: 5px 8px; }
.account-identity { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }.account-menu summary { gap: 6px; }.topbar-user { min-width: 0; text-align: left; }.topbar-user strong,.topbar-user small { white-space: nowrap; }
.data-table-exports { display: inline-flex; gap: 5px; align-items: end; margin-left: auto; }.data-table-exports .button { min-height: 32px; }
.compact-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }.compact-detail-grid div { min-height: 0; padding: 7px 8px; }.compact-detail-grid div > small { font-size: .78rem; }.compact-print-actions { justify-content: flex-end; margin: 0 0 10px; }.project-job-evidence { display: grid; gap: 9px; }.project-job-evidence > section { border: 1px solid #dadce0; background: #fff; }.project-job-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; padding: 8px 10px; border-bottom: 1px solid #dadce0; background: #f8fbff; }.project-job-heading strong { color: #174ea6; font-size: 12px; }.project-job-heading span { color: #5f6368; font-size: 11px; }.project-evidence-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px; }.project-evidence-links a { display: grid; grid-template-columns: 42px minmax(120px, 1fr); align-items: center; gap: 7px; max-width: 250px; padding: 5px; border: 1px solid #dadce0; color: #202124; font-size: 10px; }.project-evidence-links img { width: 42px; height: 42px; object-fit: cover; }.project-file-link svg { width: 20px; height: 20px; color: #1a73e8; }.working { background: #e8f0fe; color: #174ea6; }.for_repair { background: #fce8e6; color: #a50e0e; }
@media (max-width: 760px) { .compact-detail-grid { grid-template-columns: 1fr; } }

/* Numbers use a stable mono-spaced face so monetary columns and record values scan cleanly. */
:root { --rja-number-font: "Courier New", Courier, monospace; }
td.money-cell, .money-value, .money-input, .rja-print-money-field { font-family: var(--rja-number-font); font-variant-numeric: tabular-nums; }
th.money-cell, td.money-cell, .money-value, .money-input, .rja-print-money-field { text-align: right; }

/* Client and project map. */
.map-legend-panel { padding-bottom: .85rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.map-legend-group { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: .45rem .85rem; min-width: min(100%, 430px); }
.map-legend-group > strong { grid-column: 1 / -1; color: #3c4043; font-size: .76rem; text-transform: uppercase; }
.map-legend-group span { display: inline-flex; align-items: center; gap: .45rem; color: #5f6368; font-size: .78rem; }
.legend-marker { display: inline-grid; width: 25px; height: 25px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; box-shadow: 0 1px 4px rgb(60 64 67 / 32%); }
.legend-marker.package { background: #1a73e8; }.legend-marker.itemized { background: #188038; }.legend-marker.service { background: #f9ab00; }.legend-marker.site { background: #5f6368; }
.legend-marker svg { width: 13px; height: 13px; }.legend-color { width: 13px; height: 13px; border-radius: 50%; }.legend-color.blue { background: #1a73e8; }.legend-color.yellow { background: #fbbc04; }.legend-color.green { background: #34a853; }.legend-color.red { background: #ea4335; }.legend-color.gray { background: #5f6368; }
.leaflet-marker-icon.project-map-icon-wrap { width: 38px !important; height: 38px !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.project-map-marker { display: grid; width: 38px; height: 38px; place-items: center; border: 3px solid #fff; border-radius: 50% 50% 50% 7px; background: var(--map-color) !important; color: #fff; box-shadow: 0 3px 8px rgb(32 33 36 / 36%); transform: rotate(-45deg); }
.project-map-marker .project-map-marker-icon, .project-map-marker .map-icon-fallback { width: 19px; height: 19px; stroke-width: 2.4; transform: rotate(45deg); }
.project-map-marker .map-icon-fallback { display: inline-grid; place-items: center; font-size: 13px; font-weight: 850; line-height: 1; }
.map-legend-fab .map-legend-fab-icon, .map-legend-fab .map-icon-fallback { width: 19px; height: 19px; stroke-width: 2.5; }.map-legend-fab .map-icon-fallback { display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-family: Arial, sans-serif; font-size: 12px; font-style: normal; font-weight: 800; line-height: 1; }
.legend-marker .map-icon-fallback { display: inline-grid; place-items: center; width: 13px; height: 13px; font-size: 9px; font-style: normal; font-weight: 850; line-height: 1; }
.map-detail-fallback .map-detail-fallback-icon, .map-detail-fallback .map-icon-fallback { width: 36px; height: 36px; stroke-width: 2.2; }.map-detail-fallback .map-icon-fallback { display: inline-grid; place-items: center; font-size: 22px; font-weight: 850; line-height: 1; }
.project-map-marker.client { border-radius: 50%; }
.project-map-tooltip { max-width: 370px; padding: 0 !important; border: 1px solid #1a73e8 !important; border-radius: 4px !important; background: #fff !important; box-shadow: 0 5px 18px rgb(60 64 67 / 32%) !important; }
.project-map-tooltip::before { border-top-color: #1a73e8 !important; }
.project-map-tooltip-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; color: #202124; }
.project-map-tooltip-photo { display: grid; width: 60px; height: 60px; place-items: center; overflow: hidden; border: 1px solid #d2e3fc; background: #e8f0fe; color: #1a73e8; object-fit: cover; }
.project-map-tooltip-card > div { display: grid; gap: 3px; min-width: 0; }.project-map-tooltip-card strong { color: #174ea6; font-size: 13px; line-height: 1.2; }.project-map-tooltip-card span { color: #3c4043; font-size: 11px; font-weight: 700; }.project-map-tooltip-card small { color: #5f6368; font-size: 10px; line-height: 1.25; }.project-map-tooltip-card em { color: #5f6368; font-size: 10px; font-style: normal; line-height: 1.3; }
.map-detail-modal { width: min(1240px, calc(100vw - 2rem)); max-width: 1240px; max-height: calc(100vh - 2rem); overflow-y: auto; }
.map-detail-hero { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; border: 1px solid #d2e3fc; background: #f8fbff; }
.map-detail-photo { display: grid; width: 148px; height: 112px; place-items: center; overflow: hidden; border: 1px solid #d2e3fc; background: #e8f0fe; color: #1a73e8; object-fit: cover; }.map-detail-photo svg { width: 38px; height: 38px; }.map-detail-hero h3 { margin: 7px 0 5px; color: #174ea6; font-size: 21px; font-weight: 800; }.map-detail-hero p { margin: 0; color: #5f6368; font-size: 12px; }.map-detail-project-name { display: grid; gap: 2px; margin-top: 7px !important; color: #202124 !important; font-weight: 750; }.map-detail-project-name span { color: #5f6368; font-size: 10px; font-weight: 600; text-transform: uppercase; }.map-detail-address { margin-top: 7px !important; }
.map-detail-tabs { display: flex; gap: 4px; margin-top: 15px; border-bottom: 1px solid #dadce0; }.map-detail-tabs button { padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #5f6368; font-size: 12px; font-weight: 700; }.map-detail-tabs button.active { border-bottom-color: #1a73e8; color: #174ea6; }.map-detail-tabs button:disabled { color: #9aa0a6; cursor: not-allowed; }
.map-detail-content { min-height: 0; padding-top: 15px; }.map-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.map-detail-field { display: grid; gap: 4px; min-height: 62px; padding: 10px 11px; border: 1px solid #dadce0; border-left: 3px solid #1a73e8; background: #fff; }.map-detail-field > span { color: #5f6368; font-size: 10px; font-weight: 500; text-transform: uppercase; }.map-detail-field > strong { color: #202124; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }.map-detail-field.money-value > strong { text-align: right; }.map-detail-field.map-detail-primary { grid-column: 1 / -1; border-left-color: #34a853; background: #f6fcf7; }.map-detail-field.map-detail-primary > strong { color: #137333; font-size: 16px; }.map-detail-field.map-detail-project { grid-column: span 2; }
.map-detail-notes { display: grid; gap: 5px; margin-top: 11px; padding: 11px; border: 1px solid #fdd663; background: #fef7e0; }.map-detail-notes span { color: #9a6700; font-size: 10px; font-weight: 700; text-transform: uppercase; }.map-detail-notes p { margin: 0; color: #3c4043; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }.map-detail-actions { justify-content: flex-end; }

/* Printed tables use a regular first column and keep all generated metadata in the page footer. */
.rja-print-content table td:first-child > strong, .rja-print-content .form-table td:first-child > strong { font-size: inherit; font-weight: 600; }
.rja-print-content table td:first-child, .rja-print-content .form-table td:first-child { font-size: 9px; }
.rja-print-content td.money-cell, .rja-print-content .money-value, .rja-print-content .rja-print-money-field { font-family: var(--rja-number-font); }

@media (max-width: 980px) { .map-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.map-detail-field.map-detail-project { grid-column: span 1; } }
@media (max-width: 760px) { .map-legend-group { grid-template-columns: 1fr; }.map-detail-hero, .map-detail-grid { grid-template-columns: 1fr; }.map-detail-photo { width: 100%; height: 150px; }.map-detail-field.map-detail-primary, .map-detail-field.map-detail-project { grid-column: span 1; }.map-detail-actions { justify-content: stretch; }.map-detail-actions .button { flex: 1 1 100%; } }

.audit-filter-row { display: flex; flex-wrap: wrap; gap: .65rem; padding: .75rem 0; }.audit-filter-row label { display: grid; gap: .25rem; min-width: 180px; margin: 0; }.audit-filter-row span { color: #5f6368; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.verification-record { display: grid; gap: 14px; margin-top: 18px; padding: 18px; border: 1px solid #d2e3fc; background: #f8fbff; }.verification-record h2 { margin: 0; color: #174ea6; font-size: 18px; }.verification-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.verification-grid > div { display: grid; gap: 4px; padding: 10px; border: 1px solid #dadce0; background: #fff; }.verification-grid span { color: #5f6368; font-size: 10px; text-transform: uppercase; }.verification-grid strong { color: #202124; font-size: 12px; overflow-wrap: anywhere; }
.rja-print-document-header { grid-template-columns: 58px minmax(0, 1fr) 94px; }.rja-print-verify { display: grid; justify-items: center; gap: 2px; text-align: center; }.rja-print-verify img { width: 72px !important; height: 72px !important; padding: 2px; border: 1px solid #dadce0; object-fit: contain; }.rja-print-verify span { color: #174ea6; font-size: 7px; font-weight: 800; text-transform: uppercase; }.rja-print-verify small { max-width: 94px; overflow-wrap: anywhere; color: #5f6368; font-size: 6.5px; line-height: 1.15; }.rja-print-prepared { display: flex; justify-content: flex-end; margin-top: 28px; }.rja-print-preparer { min-width: 245px; }.rja-print-footer { grid-template-columns: 1.2fr 1fr auto; }
@media (max-width: 760px) { .verification-grid { grid-template-columns: 1fr; }.audit-filter-row label { flex: 1 1 100%; }.rja-print-document-header { grid-template-columns: 48px minmax(0, 1fr) 72px; }.rja-print-verify img { width: 58px !important; height: 58px !important; } }
/* Inline notes stay compact beneath upload fields. */
.field-note { display: block; margin-top: 5px; color: #5f6368; font-size: 11px; line-height: 1.35; }
.compact-detail-grid div > small { color: #5f6368; font-size: 10px; font-weight: 500; text-transform: uppercase; }.compact-detail-grid div > strong { color: #202124; font-size: 12px; font-weight: 750; line-height: 1.32; overflow-wrap: anywhere; }
.button.blue { border-color: #1a73e8; background: #1a73e8; color: #fff; }.button.green { border-color: #188038; background: #188038; color: #fff; }.button.yellow { border-color: #f9ab00; background: #f9ab00; color: #202124; }.button.red { border-color: #d93025; background: #d93025; color: #fff; }
.quotation-client-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }.quotation-client-field .button { min-height: 38px; white-space: nowrap; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.quote-line-head,
.quote-line-row { grid-template-columns: minmax(230px, 1.45fr) minmax(180px, 1.1fr) 76px 116px 120px 76px; }
.quote-line-head { display: grid; gap: 8px; margin-top: 8px; color: #5f6368; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.quote-line-head span:nth-last-child(-n + 2) { text-align: right; }
.quote-line-row { align-items: start; }
.quote-line-actions { display: flex; justify-content: flex-end; gap: 5px; min-height: 38px; }
.quote-line-actions .icon-button { flex: 0 0 35px; }
.quote-inclusion-picker-modal { z-index: 80; background: rgba(32, 33, 36, .34); }
.quote-inclusion-picker { width: min(640px, calc(100vw - 32px)) !important; max-width: 640px; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; border: 2px solid #1a73e8 !important; border-radius: 8px !important; background: #fff; box-shadow: 0 20px 46px rgba(32, 33, 36, .34) !important; }
.quote-inclusion-picker .modal-header { padding-bottom: 10px; border-bottom-color: #d2e3fc; }
.quote-inclusion-picker .modal-header h2 { color: #174ea6; }
.quote-inclusion-picker .modal-header p { max-width: 510px; }
.quote-inclusion-picker .quote-picker-step { display: grid; gap: 7px; padding: 12px; border: 1px solid #d2e3fc; border-left: 4px solid #1a73e8; background: #f8fbff; }
.quote-picker-manual-choice { display: flex; justify-content: flex-end; margin-top: 8px; }
.quote-inclusion-picker [data-quote-picker-manual-field] { padding: 12px; border: 1px solid #fdd663; border-left: 4px solid #f9ab00; background: #fef7e0; }
.quote-inclusion-picker .field-note { min-height: 30px; margin: 0; padding: 7px 9px; border-left: 3px solid #5f6368; background: #f8f9fa; }
.quote-inclusion-picker .modal-actions { padding-top: 4px; border-top: 1px solid #e8eaed; }
.quote-inclusion-picker .search-select { z-index: 1; }
.quote-inclusion-picker .search-select.open { z-index: 90; }
.quote-inclusion-picker .search-select-menu { z-index: 100; max-height: min(680px, 72vh); }
.quotation-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 4px solid #1a73e8; background: #f8fbff; }
.quotation-summary > div:nth-child(2) { border-left: 1px solid #d2e3fc; border-right: 1px solid #d2e3fc; }
.quotation-summary > div:nth-child(2) strong { font-family: inherit; font-size: 13px; text-align: center; }
.compact-list { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid #dadce0; }
@media (max-width: 980px) { .quote-line-head { display: none; }.quote-line-row { grid-template-columns: repeat(2, minmax(0, 1fr)) 76px; }.quote-line-actions { grid-column: 3; grid-row: 1; } }
.app-frame { transition: grid-template-columns .2s ease; }.sidebar { transition: transform .2s ease, opacity .2s ease; }.sidebar-collapse { position: fixed; top: 13px; left: calc(var(--sidebar) - 15px); z-index: 35; width: 31px; height: 31px; min-height: 31px; padding: 0; border: 1px solid #1a73e8; border-radius: 50%; background: #fff; color: #1a73e8; box-shadow: 0 2px 7px rgb(60 64 67 / 24%); }.app-frame.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }.app-frame.sidebar-collapsed .sidebar { transform: translateX(-100%); pointer-events: none; }.app-frame.sidebar-collapsed .sidebar-collapse { left: 8px; }.sidebar-collapse.action-button { background: #fff !important; color: #1a73e8 !important; }
.map-workspace { position: relative; min-height: calc(100vh - 112px); overflow: hidden; border: 1px solid #dadce0; background: #fff; }.map-workspace .map-canvas { min-height: calc(100vh - 112px); height: calc(100vh - 112px); border: 0; }.map-legend-fab { position: absolute; top: 14px; right: 14px; z-index: 700; width: 40px; height: 40px; border-radius: 50%; background: #fff !important; color: #1a73e8 !important; box-shadow: 0 2px 9px rgb(60 64 67 / 28%); }.map-legend-modal { width: min(860px, calc(100vw - 2rem)); }.map-legend-modal .map-legend { padding: 4px 0 8px; }
@media (max-width: 820px) { .sidebar-collapse { top: 13px; left: 12px; }.app-frame.sidebar-collapsed { grid-template-columns: 1fr; }.app-frame.sidebar-collapsed .sidebar { transform: translateX(-100%); pointer-events: auto; }.app-frame.sidebar-collapsed .sidebar-collapse { left: 12px; }.map-workspace, .map-workspace .map-canvas { min-height: calc(100vh - 96px); height: calc(100vh - 96px); }.quotation-client-field { grid-template-columns: 1fr; }.quotation-client-field .button { justify-content: center; } }

/* Sales quota views keep targets, actual sales, and derived comparisons in one scan line. */
.quota-page { display: grid; gap: 14px; }.quota-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid #dadce0; background: #fff; }.quota-tabs button { padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #5f6368; font-size: 12px; font-weight: 700; }.quota-tabs button:hover { background: #f1f3f4; }.quota-tabs button.active { border-bottom-color: #1a73e8; background: #e8f0fe; color: #174ea6; }.quota-tab-panel { display: none; }.quota-tab-panel.active { display: grid; }.quota-panel { min-width: 0; }.quota-panel .panel-title > div { display: grid; gap: 2px; }.quota-panel .panel-title > div > span { color: #5f6368; font-size: 11px; }.quota-current-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }.quota-summary-card { display: grid; gap: 6px; min-height: 145px; padding: 13px; border: 1px solid #dadce0; background: #fff; }.quota-summary-card.company { border-left: 4px solid #1a73e8; background: #f8fbff; }.quota-summary-card.projects { border-left: 4px solid #34a853; background: #f6fcf7; }.quota-summary-card > span { color: #5f6368; font-size: 11px; font-weight: 700; text-transform: uppercase; }.quota-summary-card > strong { color: #202124; font-size: 20px; line-height: 1.1; }.quota-summary-card > small { color: #5f6368; font-size: 11px; }.quota-summary-card > em { color: #5f6368; font-size: 10px; font-style: normal; }.quota-progress-track { position: relative; height: 8px; overflow: hidden; background: #d2e3fc; }.quota-progress-track > i { display: block; height: 100%; max-width: 100%; background: #1a73e8; }.quota-progress-track > i.projects { background: #34a853; }.quota-table-wrap { overflow-x: auto; }.quota-percent { display: inline-flex; min-width: 48px; justify-content: center; padding: 3px 6px; border-radius: 99px; font-size: 10px; font-weight: 800; }.quota-percent.success { background: #e6f4ea; color: #137333; }.quota-percent.warning { background: #fef7e0; color: #9a6700; }.quota-percent.alert { background: #fce8e6; color: #a50e0e; }.quota-mini-compare { position: relative; width: min(150px, 100%); height: 13px; overflow: hidden; background: #d2e3fc; }.quota-mini-compare .target { position: absolute; inset: 0; border-right: 2px solid #174ea6; }.quota-mini-compare .actual { position: absolute; top: 2px; bottom: 2px; left: 0; max-width: 100%; background: #34a853; }.quota-annual-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }.quota-annual-controls label { display: grid; gap: 4px; min-width: 180px; }.quota-annual-controls span { color: #5f6368; font-size: 10px; font-weight: 700; text-transform: uppercase; }.quota-chart-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 6px; color: #5f6368; font-size: 11px; font-weight: 700; }.quota-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }.quota-chart-legend b { width: 18px; height: 3px; }.quota-chart-legend b.target { background: #1a73e8; }.quota-chart-legend b.actual { background: #34a853; }.quota-line-chart { min-width: 620px; padding: 10px 4px 4px; border: 1px solid #dadce0; background: #fff; }.quota-chart-title { display: grid; gap: 2px; padding: 0 10px 6px; }.quota-chart-title strong { color: #202124; font-size: 13px; }.quota-chart-title span { color: #5f6368; font-size: 10px; }.quota-line-chart svg { display: block; width: 100%; height: auto; min-height: 240px; }.quota-chart-grid line { stroke: #e8eaed; stroke-width: 1; }.quota-chart-grid text,.quota-chart-labels text { fill: #5f6368; font-size: 10px; }.quota-chart-target-line,.quota-chart-actual-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.quota-chart-target-line { stroke: #1a73e8; }.quota-chart-actual-line { stroke: #34a853; }.quota-chart-target-point { fill: #fff; stroke: #1a73e8; stroke-width: 2; }.quota-chart-actual-point { fill: #34a853; stroke: #fff; stroke-width: 1.5; }.quota-expand-modal { max-height: calc(100vh - 2rem); overflow: auto; }.quota-expand-body { min-width: 0; }.quota-expand-body .quota-line-chart { min-width: 760px; }.dashboard-quota-panel { margin-top: 16px; }.dashboard-quota-content { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: 14px; align-items: start; }
@media (max-width: 760px) { .quota-current-grid,.dashboard-quota-content { grid-template-columns: 1fr; }.quota-tabs { overflow-x: auto; flex-wrap: nowrap; }.quota-tabs button { white-space: nowrap; }.quota-line-chart { min-width: 690px; }.quota-expand-modal { width: calc(100vw - 1rem); }.quota-expand-body { overflow-x: auto; } }
.quota-annual-actions { display: inline-flex; align-items: end; gap: 5px; }
@media print {
    .quota-tabs { display: none !important; }
    .quota-tab-panel { display: block !important; break-before: page; page-break-before: always; }
    .quota-tab-panel:first-of-type { break-before: auto; page-break-before: auto; }
    .quota-tab-panel .panel { box-shadow: none; }
    .quota-tab-panel .quota-line-chart { min-width: 0; }
}

/* Map labels retain the interface font; only the peso figure uses the accounting face. */
.map-detail-field.map-money-field > strong { font-family: var(--rja-number-font); font-variant-numeric: tabular-nums; text-align: right; }

/* Sidebar navigation is compact, animated, and still comfortable for repeated daily use. */
.sidebar-nav a { position: relative; overflow: hidden; transform: translateX(0); transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.sidebar-nav a::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: #1a73e8; content: ""; transform: scaleY(0); transform-origin: center; transition: transform .18s ease; }
.sidebar-nav a > * { position: relative; z-index: 1; }
.sidebar-nav a:hover { transform: translateX(3px); box-shadow: 0 2px 7px rgb(60 64 67 / 14%); }
.sidebar-nav a:hover::before, .sidebar-nav a.active::before { transform: scaleY(1); }
.sidebar-nav a.active { animation: sidebar-active-link .32s ease-out; }
.nav-group-links { display: grid; max-height: 520px; overflow: hidden; opacity: 1; transform: translateY(0); transition: max-height .24s ease, opacity .18s ease, transform .24s ease, padding .24s ease; }
.nav-group:not([open]) > .nav-group-links { display: grid; max-height: 0; padding-bottom: 0; opacity: 0; transform: translateY(-5px); pointer-events: none; }
.nav-group summary { border-radius: 4px; transition: background-color .18s ease, color .18s ease; }
.nav-group summary:hover { background: #f1f3f4; color: #174ea6; }
.sidebar-developer { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; margin: 9px 6px 8px; padding: 9px; border: 1px solid #d2e3fc; border-left: 3px solid #1a73e8; background: #f8fbff; color: #3c4043; }
.sidebar-developer-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #e8f0fe; color: #1a73e8; }.sidebar-developer-mark svg { width: 15px; height: 15px; }
.sidebar-developer > div:last-child { display: grid; gap: 2px; min-width: 0; }.sidebar-developer span { color: #5f6368; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.sidebar-developer strong { color: #174ea6; font-size: 11px; line-height: 1.2; }.sidebar-developer small,.sidebar-developer a { color: #5f6368; font-size: 9px; line-height: 1.28; overflow-wrap: anywhere; }.sidebar-developer a:hover { color: #1a73e8; text-decoration: underline; }
@keyframes sidebar-active-link { from { transform: translateX(-6px); opacity: .55; } to { transform: translateX(0); opacity: 1; } }

/* Quota bars show their percentage in black on the remainder and white over the filled amount. */
.quota-progress-track { height: 20px; overflow: hidden; background: #e8eaed; }.quota-progress-track > i { position: absolute; inset: 0 auto 0 0; z-index: 1; }.quota-progress-label,.quota-mini-label { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; color: #202124; font-size: 10px; font-style: normal; font-weight: 800; line-height: 1; pointer-events: none; }.quota-progress-label.on-fill,.quota-mini-label.on-fill { z-index: 4; color: #fff; clip-path: inset(0 calc(100% - var(--quota-progress)) 0 0); }
.quota-mini-compare { height: 20px; overflow: hidden; background: #e8eaed; }.quota-mini-compare .target { z-index: 2; }.quota-mini-compare .actual { z-index: 1; top: 0; bottom: 0; }.quota-list-filter { display: flex; justify-content: flex-end; margin: 0 0 10px; }.quota-list-filter label { display: grid; gap: 4px; min-width: 180px; }.quota-list-filter span { color: #5f6368; font-size: 10px; font-weight: 700; text-transform: uppercase; }.quota-project-target-input { text-align: center; }

@media (prefers-reduced-motion: reduce) { .sidebar-nav a,.nav-group-links,.nav-group summary { transition: none; }.sidebar-nav a.active { animation: none; } }

/* Direct sales deliberately stays compact: it is used for counter transactions and standalone service billing. */
.direct-sale-guide { border-left: 4px solid #34a853; background: #fbfefc; }
.direct-sale-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.direct-sale-guide-grid > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; min-height: 86px; padding: 10px; border: 1px solid #d7e9db; background: #fff; }
.direct-sale-guide-grid svg { grid-row: 1 / span 2; width: 20px; height: 20px; color: #188038; }.direct-sale-guide-grid strong { color: #202124; font-size: 12px; }.direct-sale-guide-grid span { color: #5f6368; font-size: 10px; line-height: 1.38; }
@media (max-width: 820px) { .direct-sale-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .direct-sale-guide-grid { grid-template-columns: 1fr; } }

/* The quotation register uses workflow tabs so its primary document and client fields stay readable. */
.quotation-status-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 10px; padding: 4px; border: 1px solid #dadce0; background: #fff; }
.quotation-status-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #5f6368; font-size: 11px; font-weight: 700; line-height: 1.15; }
.quotation-status-tab:hover { background: #f1f3f4; color: #174ea6; }
.quotation-status-tab b { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: 10px; background: #f1f3f4; color: #5f6368; font-size: 10px; }
.quotation-status-tab > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.quotation-status-tab.active[data-status-tone="all"], .quotation-status-tab.active[data-status-tone="active"], .quotation-status-tab.active[data-status-tone="lead"], .quotation-status-tab.active[data-status-tone="project_estimate"] { border-bottom-color: #1a73e8; background: #e8f0fe; color: #174ea6; }
.quotation-status-tab.active[data-status-tone="awaiting_confirmation"], .quotation-status-tab.active[data-status-tone="for_client_approval"] { border-bottom-color: #f9ab00; background: #fef7e0; color: #9a6700; }
.quotation-status-tab.active[data-status-tone="confirmed"], .quotation-status-tab.active[data-status-tone="client_approval_recorded"] { border-bottom-color: #188038; background: #e6f4ea; color: #137333; }
.quotation-status-tab.active[data-status-tone="project_created"] { border-bottom-color: #00897b; background: #e0f2f1; color: #00695c; }
.quotation-status-tab.active[data-status-tone="expired"] { border-bottom-color: #5f6368; background: #f1f3f4; color: #3c4043; }
.quotation-status-tab.active b { background: rgb(255 255 255 / 76%); color: inherit; }
.quotation-status-tab[data-quotation-status="expired"] { margin-left: auto; }
.quotation-register-table { min-width: 860px; table-layout: fixed; }
.quotation-register-table .quotation-col-number { width: 19%; }
.quotation-register-table .quotation-col-client { width: 28%; }
.quotation-register-table .quotation-col-inclusions { width: 25%; }
.quotation-register-table .quotation-col-amount { width: 14%; }
.quotation-register-table .quotation-col-actions { width: 192px; }
.quotation-register-table td:first-child, .quotation-register-table td:nth-child(2) { font-size: 12px; }
.quotation-register-table th.actions,
.quotation-register-table td.actions { width: 192px; min-width: 192px; text-align: right; }
.quotation-register-table th.actions { padding-right: 12px; }
.quotation-register-table td.actions .icon-button:last-child { margin-right: 0; }
.sidebar-nav a > span { min-width: 0; line-height: 1.2; }

/* Modal documents stay compact on screen; the print builder turns each field group into a formal table. */
.document-section { display: grid; gap: 7px; padding: 10px 0 0; border-top: 1px solid #dadce0; }
.document-section:first-child { padding-top: 0; border-top: 0; }
.document-section > h3 { margin: 0; padding-left: 8px; border-left: 3px solid #1a73e8; color: #174ea6; font-size: 12px; font-weight: 700; }
.document-section .detail-row { gap: 6px; }
.document-section .detail-row > div { min-height: 50px; padding: 7px 8px; border: 1px solid #dadce0; background: #fff; }
.document-section .detail-row > div > strong { color: #5f6368; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.document-section .detail-row > div > small { color: #202124; font-size: 12px; font-weight: 700; line-height: 1.35; }
.document-section .detail-list { margin: 0; }
.compact-document-table-wrap { overflow-x: hidden; }
.compact-document-table { width: 100%; margin: 0; }
.compact-document-table th { width: 15%; background: #f8f9fa; color: #5f6368; font-size: 10px; font-weight: 500; }
.compact-document-table td { width: 35%; color: #202124; font-size: 12px; font-weight: 700; }
.compact-document-table th,
.compact-document-table td { padding: 7px 8px; vertical-align: top; }
.compact-document-table.columns-3 th { width: 12%; }
.compact-document-table.columns-3 td { width: 21.33%; }
.icon-button.blue { color: #174ea6; border-color: #8ab4f8; background: #e8f0fe; }
.icon-button.yellow { color: #b06000; border-color: #f9ab00; background: #fef7e0; }

.rja-print-verify { color: inherit; text-decoration: none; }
.rja-print-content .document-section { gap: 5px; padding: 7px 0 0; border-top: 1px solid #bdc1c6; break-inside: avoid; page-break-inside: avoid; }
.rja-print-content .document-section:first-child { padding-top: 0; border-top: 0; }
.rja-print-content .document-section > h3 { margin: 0; padding: 3px 5px; border: 1px solid #9aa0a6; border-left: 3px solid #1a73e8; background: #f8fbff; color: #174ea6; font-size: 9px; text-transform: uppercase; }
.rja-print-content .compact-document-table th { background: #f8f9fa !important; color: #5f6368 !important; font-weight: 500; }
.rja-print-content .compact-document-table td { color: #202124; font-weight: 700; }

/* A QR scan shows a read-only, print-ready verification view instead of a bare status response. */
.guest-card-wide { width: min(1120px, 100%); gap: 14px; }
.verification-heading { margin-bottom: 0; }
.verification-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 0; color: #5f6368; font-size: 12px; }
.verification-document-preview { display: grid; gap: 10px; padding: 22px; border: 1px solid #bdc1c6; background: #fff; color: #202124; }
.verification-document-header { display: grid; grid-template-columns: 62px minmax(0, 1fr) 86px; align-items: center; gap: 12px; padding-bottom: 9px; border-bottom: 3px solid #1a73e8; }
.verification-document-header > img { width: 58px; height: 58px; object-fit: contain; }
.verification-document-header > div { display: grid; gap: 2px; }
.verification-document-header strong { font-size: 17px; line-height: 1.15; }
.verification-document-header span { font-size: 10px; line-height: 1.3; }
.verification-qr-link { display: grid; justify-items: center; gap: 3px; color: #174ea6; font-size: 8px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.verification-qr-link img { width: 76px; height: 76px; padding: 2px; border: 1px solid #dadce0; object-fit: contain; }
.verification-document-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #dadce0; }
.verification-document-title h2 { margin: 0; color: #202124; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.verification-document-title span { color: #174ea6; font-size: 10px; font-weight: 700; }
.verification-document-content { display: grid; gap: 10px; }
.verification-document-section { display: grid; gap: 5px; padding-top: 7px; border-top: 1px solid #dadce0; }
.verification-document-section:first-child { padding-top: 0; border-top: 0; }
.verification-document-section h3 { margin: 0; padding: 3px 6px; border: 1px solid #9aa0a6; border-left: 3px solid #1a73e8; background: #f8fbff; color: #174ea6; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.verification-document-section p { margin: 0; font-size: 11px; line-height: 1.45; }
.verification-details-table, .verification-line-table { width: 100%; border-collapse: collapse; border: 1px solid #9aa0a6; }
.verification-details-table th, .verification-details-table td, .verification-line-table th, .verification-line-table td { padding: 5px 6px; border: 1px solid #bdc1c6; vertical-align: top; font-size: 10px; line-height: 1.3; }
.verification-details-table th { width: 17%; color: #5f6368; background: #f1f3f4; font-size: 8px; font-weight: 600; text-align: left; text-transform: uppercase; }
.verification-details-table td { width: 33%; font-weight: 700; }
.verification-line-table th { color: #174ea6; background: #e8f0fe; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.verification-line-table tfoot th { color: #202124; background: #f1f3f4; }
.verification-document-footer { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding-top: 8px; border-top: 1px solid #bdc1c6; color: #5f6368; font-size: 8px; }

@media print {
    body.verification-body { display: block; min-height: 0; padding: 0; background: #fff; }
    .guest-card.guest-card-wide { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .verification-document-preview { gap: 6px; padding: 0 0 14mm; border: 0; }
    .verification-document-header { grid-template-columns: 48px minmax(0, 1fr) 68px; gap: 8px; padding-bottom: 6px; border-bottom-width: 2px; }
    .verification-document-header > img { width: 44px; height: 44px; }
    .verification-document-header strong { font-size: 12px; }
    .verification-document-header span { font-size: 8px; line-height: 1.15; }
    .verification-qr-link img { width: 56px; height: 56px; }
    .verification-qr-link { font-size: 6px; }
    .verification-document-title { padding: 6px 0; }
    .verification-document-title h2 { font-size: 15px; }
    .verification-document-title span { font-size: 8px; }
    .verification-document-content { gap: 6px; }
    .verification-document-section { gap: 4px; padding-top: 5px; break-inside: avoid; page-break-inside: avoid; }
    .verification-document-section h3 { padding: 2px 4px; font-size: 8.5px; }
    .verification-document-section p { font-size: 9px; line-height: 1.3; }
    .verification-details-table, .verification-line-table { border-color: #5f6368; }
    .verification-details-table th, .verification-details-table td, .verification-line-table th, .verification-line-table td { padding: 3px 4px; border-color: #9aa0a6; font-size: 9px; line-height: 1.22; }
    .verification-details-table th, .verification-line-table th { font-size: 8px; }
    .verification-line-table thead { display: table-header-group; }
    .verification-line-table tr { break-inside: avoid; page-break-inside: avoid; }
    .verification-document-footer { font-size: 7px; }
}

@media (max-width: 760px) {
    .verification-preview-actions { align-items: stretch; flex-direction: column; }
    .verification-document-preview { padding: 14px; }
    .verification-document-header { grid-template-columns: 48px minmax(0, 1fr); }
    .verification-qr-link { grid-column: 1 / -1; justify-self: end; }
    .verification-document-title { align-items: start; flex-direction: column; }
    .verification-table-wrap { overflow-x: auto; }
}

/* Compact formal print output: preserves readable type while using the page efficiently. */
@media print {
    @page { margin: 10mm 9mm 18mm; }

    .rja-print-document,
    .rja-print-document.rja-print-landscape { padding: 0 0 14mm; }

    .rja-print-document-header { grid-template-columns: 46px minmax(0, 1fr) 76px; gap: 8px; padding-bottom: 6px; border-bottom-width: 2px; }
    .rja-print-document-header img { width: 44px; height: 44px; }
    .rja-print-company strong { font-size: 12px; }
    .rja-print-company span { font-size: 8.5px; line-height: 1.15; }
    .rja-print-verify img { width: 58px !important; height: 58px !important; }
    .rja-print-verify span { font-size: 6.5px; }
    .rja-print-verify small { font-size: 6px; }

    .rja-print-title-block { gap: 10px; padding: 7px 0 6px; }
    .rja-print-title-block h1 { font-size: 15px; }
    .rja-print-title-block span { font-size: 8px; }
    .rja-print-content { gap: 6px; padding-top: 7px; }
    .rja-print-content h1,
    .rja-print-content h2,
    .rja-print-content h3,
    .rja-print-content h4 { margin: 5px 0 1px; font-size: 10px; line-height: 1.2; }
    .rja-print-content p { font-size: 9.5px; line-height: 1.3; }
    .rja-print-content .document-section { gap: 4px; padding-top: 5px; }
    .rja-print-content .document-section > h3 { padding: 2px 4px; font-size: 8.5px; }

    .rja-print-content table:not(.rja-print-signature-table),
    .rja-print-content .form-table:not(.rja-print-signature-table) { border: 1px solid #5f6368 !important; border-collapse: collapse !important; }
    .rja-print-content table:not(.rja-print-signature-table) th,
    .rja-print-content table:not(.rja-print-signature-table) td,
    .rja-print-content .form-table:not(.rja-print-signature-table) th,
    .rja-print-content .form-table:not(.rja-print-signature-table) td { padding: 3px 4px; border: 1px solid #9aa0a6 !important; font-size: 9.25px; line-height: 1.22; }
    .rja-print-content table:not(.rja-print-signature-table) th,
    .rja-print-content .form-table:not(.rja-print-signature-table) th { background: #e8f0fe !important; color: #174ea6; font-size: 8px; }
    .rja-print-content table:not(.rja-print-signature-table) tbody tr + tr td,
    .rja-print-content .form-table:not(.rja-print-signature-table) tbody tr + tr td { border-top-color: #80868b !important; }
    .rja-print-content td small,
    .rja-print-content td span:not(.date-marker) { margin-top: 1px; font-size: 8px; line-height: 1.15; }
    .rja-print-content .rja-print-details-table th,
    .rja-print-content .rja-print-details-table td { padding: 3px 4px; }
    .rja-print-content .rja-print-details-table td { font-size: 9px; }

    .rja-print-content .rja-print-signature-table { margin-top: 14px; }
    .rja-print-content .rja-print-signature-table td { min-height: 64px; padding: 0 4px; }
    .rja-print-signature-line,
    .rja-print-captured-signature { min-height: 40px; }
    .rja-print-captured-signature img { max-height: 40px; }
    .rja-print-content .rja-print-signature-table strong,
    .rja-print-content .rja-print-signature-table small,
    .rja-print-content .rja-print-signature-table span { margin-top: 2px; font-size: 7.5px; line-height: 1.1; }
    .rja-print-content .rja-print-signature-table strong { font-size: 8.5px; }

    .rja-print-prepared { margin-top: 16px; padding-top: 7px; }
    .rja-print-signature-space { min-height: 40px; }
    .rja-print-preparer > strong,
    .rja-print-preparer > span:first-child { font-size: 9px; }
    .rja-print-preparer > small { font-size: 7.5px; }
    .rja-print-footer { bottom: 5mm; font-size: 7px; }
}

@media (max-width: 760px) {
    .quotation-status-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .quotation-status-tab { white-space: nowrap; }
    .quotation-status-tab[data-quotation-status="expired"] { margin-left: 0; }
}

/* ISP billing visual language: screen-only so formal print output remains unchanged. */
@media screen {
    :root {
        --rja-navy: #0f2233;
        --rja-navy-mid: #173349;
        --rja-workspace-top: #f8fbff;
        --rja-workspace: #eef4fb;
        --rja-text: #163047;
        --rja-muted: #5e7288;
        --rja-primary: #0f5ea8;
        --rja-primary-soft: #e6f0fb;
        --rja-border: #dbe3ef;
        --rja-success: #1c7c54;
        --rja-warning: #c88712;
        --rja-danger: #c0392b;
        --blue: var(--rja-primary);
        --green: var(--rja-success);
        --yellow: #d9a21c;
        --red: var(--rja-danger);
        --ink: var(--rja-text);
        --muted: var(--rja-muted);
        --line: var(--rja-border);
        --soft: #f8fbfe;
        --panel: #ffffff;
        --shadow: 0 14px 30px rgba(15, 35, 61, .08);
        --radius: 0;
        --sidebar: 292px;
        --google-blue: var(--rja-primary);
        --google-green: var(--rja-success);
        --google-yellow: #d99d18;
        --google-red: var(--rja-danger);
        --bs-primary: var(--rja-primary);
        --bs-success: var(--rja-success);
        --bs-warning: #d99d18;
        --bs-danger: var(--rja-danger);
        --bs-body-color: var(--rja-text);
        --bs-secondary-color: var(--rja-muted);
        --bs-border-color: var(--rja-border);
        --bs-font-sans-serif: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        --bs-border-radius: 0;
        --bs-border-radius-sm: 0;
        --bs-border-radius-lg: 0;
    }

    body.app-body,
    body.guest-body {
        color: var(--rja-text);
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    body.app-body {
        background: linear-gradient(180deg, var(--rja-workspace-top) 0%, var(--rja-workspace) 100%);
    }

    a { color: var(--rja-primary); }

    .app-frame {
        background: linear-gradient(180deg, var(--rja-workspace-top) 0%, var(--rja-workspace) 100%);
    }

    .sidebar {
        gap: 0;
        padding: 0;
        background: linear-gradient(180deg, var(--rja-navy) 0%, var(--rja-navy-mid) 100%);
        border-right: 0;
        box-shadow: 4px 0 20px rgba(15, 35, 61, .12);
    }

    .brand {
        display: grid;
        justify-items: center;
        gap: .45rem;
        min-height: 194px;
        margin: 0;
        padding: 1.35rem 1.35rem 1.15rem;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        color: #fff;
        text-align: center;
    }

    .brand img {
        width: min(100%, 168px);
        height: 84px;
        object-fit: contain;
    }

    .brand span { justify-items: center; gap: .25rem; }
    .brand strong { color: #fff; font-size: 1.02rem; font-weight: 700; line-height: 1.24; }
    .brand small { color: rgba(232, 238, 246, .76); font-size: .82rem; line-height: 1.3; }

    .sidebar-nav {
        gap: .05rem;
        padding: .75rem .9rem .95rem;
    }

    .nav-group { gap: 0; }
    .nav-group summary {
        margin: .4rem 0 .16rem;
        padding: .32rem .42rem;
        border-radius: 0;
        background: transparent;
        color: rgba(232, 238, 246, .56);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .08em;
    }

    .nav-group summary svg { color: rgba(232, 238, 246, .64); }
    .nav-group summary:hover { background: rgba(255, 255, 255, .07); color: #fff; }
    .nav-group-links { gap: 1px; padding-bottom: .18rem; }

    .sidebar-nav a,
    .sidebar-logout button {
        min-height: 35px;
        padding: .46rem .78rem;
        border-radius: 6px;
        color: #e8eef6;
        font-size: .82rem;
        font-weight: 500;
        line-height: 1.15;
    }

    .sidebar-nav a > svg { width: 17px; height: 17px; color: rgba(232, 238, 246, .88); }
    .sidebar-nav a::before { width: 0; background: transparent; }
    .sidebar-nav a:hover,
    .sidebar-nav a.active,
    .sidebar-logout button:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
        box-shadow: none;
        transform: translateX(2px);
    }

    .sidebar-nav a.active { font-weight: 700; }
    .sidebar-nav a.active > svg { color: #fff; }

    .sidebar-developer {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: .65rem;
        margin: auto 0 0;
        padding: 1.15rem 1.4rem 1.35rem;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .09);
        border-left: 0;
        background: transparent;
        color: rgba(232, 238, 246, .76);
    }

    .sidebar-developer-mark {
        border-radius: 50%;
        background: rgba(255, 255, 255, .1);
        color: #f8fbff;
    }

    .sidebar-developer span { color: rgba(232, 238, 246, .56); }
    .sidebar-developer strong { color: #fff; font-size: .79rem; }
    .sidebar-developer small,
    .sidebar-developer a { color: rgba(232, 238, 246, .76); font-size: .72rem; }
    .sidebar-developer a:hover { color: #fff; }

    .sidebar-collapse {
        border-color: var(--rja-primary);
        background: #fff !important;
        color: var(--rja-primary) !important;
        box-shadow: 0 4px 12px rgba(15, 35, 61, .22);
    }

    .topbar {
        min-height: 64px;
        padding: .75rem 1.5rem;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid var(--rja-border);
        box-shadow: 0 1px 6px rgba(15, 35, 61, .06);
        backdrop-filter: blur(12px);
    }

    .topbar-search {
        width: min(560px, 48vw);
        min-height: 38px;
        border-color: var(--rja-border);
        border-radius: 0;
        background: #fff;
    }

    .topbar-search > svg,
    .account-menu summary > svg { color: var(--rja-muted); }
    .topbar-user strong { color: var(--rja-text); font-size: .9rem; font-weight: 700; }
    .topbar-user small { color: var(--rja-muted); font-size: .72rem; }

    .profile-avatar {
        border-color: #fff;
        background: var(--rja-primary);
        box-shadow: 0 0 0 2px #cfe0f2;
    }

    .account-dropdown {
        border-color: var(--rja-border);
        border-radius: 0;
        box-shadow: 0 14px 28px rgba(15, 35, 61, .16);
    }

    .account-dropdown a,
    .account-dropdown button { color: var(--rja-text); }
    .account-dropdown a:hover,
    .account-dropdown button:hover { background: var(--rja-primary-soft); color: var(--rja-primary); }

    .content-panel { gap: 1.1rem; padding: 1.35rem 1.5rem 2rem; }
    .page-heading { padding-bottom: .15rem; }
    .page-heading h1 { color: var(--rja-text); font-size: 1.35rem; font-weight: 700; }
    .page-heading p,
    .panel-title span,
    .modal-header p { color: var(--rja-muted); font-weight: 500; }

    .panel,
    .metric-card,
    .modal-card,
    .data-table-toolbar,
    .guest-card:not(.guest-card-wide) {
        border-color: var(--rja-border);
        border-radius: 0;
        box-shadow: 0 6px 18px rgba(15, 35, 61, .055);
    }

    .panel { padding: 1rem; }
    .panel-title { padding-bottom: .7rem; border-bottom-color: var(--rja-border); }
    .panel-title h2,
    .modal-header h2 { color: var(--rja-text); font-size: 1rem; font-weight: 700; }

    .metric-card {
        min-height: 112px;
        border: 0;
        border-left-width: 0;
        color: #fff;
        box-shadow: 0 12px 24px rgba(15, 35, 61, .12);
    }

    .metric-card span,
    .metric-card strong,
    .metric-card.google-blue span,
    .metric-card.google-blue strong,
    .metric-card.google-green span,
    .metric-card.google-green strong,
    .metric-card.google-yellow span,
    .metric-card.google-yellow strong,
    .metric-card.google-red span,
    .metric-card.google-red strong { color: #fff; }

    .metric-card span { font-size: .76rem; font-weight: 600; letter-spacing: .03em; }
    .metric-card strong { font-size: 1.9rem; font-weight: 700; }
    .metric-card.google-blue { background: linear-gradient(45deg, #0f5ea8, #224a7a); }
    .metric-card.google-green { background: linear-gradient(45deg, #1c7c54, #14563b); }
    .metric-card.google-yellow { background: linear-gradient(45deg, #d7a01f, #a96f00); }
    .metric-card.google-red { background: linear-gradient(45deg, #c74a3e, #8f2a23); }

    .button,
    .icon-button,
    input,
    textarea,
    select,
    .form-control,
    .form-select,
    .search-select-input,
    .search-select-menu,
    .table-wrap,
    .data-table-toolbar,
    .swal2-popup {
        border-radius: 0 !important;
    }

    .button {
        min-height: 38px;
        border-color: var(--rja-border);
        font-size: .84rem;
        font-weight: 600;
    }

    .button.primary,
    .btn-primary {
        border-color: var(--rja-primary);
        background: var(--rja-primary);
        color: #fff;
    }

    .button.primary:hover,
    .btn-primary:hover { border-color: #0b4a84; background: #0b4a84; color: #fff; }
    .button.green { border-color: var(--rja-success); background: var(--rja-success); color: #fff; }
    .button.yellow { border-color: #d59c14; background: #e5ae2a; color: #1f2933; }
    .button.red { border-color: var(--rja-danger); background: var(--rja-danger); color: #fff; }
    .button.ghost { border-color: var(--rja-border); color: var(--rja-text); background: #fff; }
    .button.ghost:hover { background: #f3f7fb; border-color: #c9d7e6; }

    .icon-button {
        border-color: var(--rja-border);
        background: #fff;
        color: var(--rja-primary);
    }

    .icon-button:hover { border-color: #b9cfe3; background: var(--rja-primary-soft); color: var(--rja-primary); }
    .icon-button.success { border-color: #a8d8bd; background: #edf8f1; color: var(--rja-success); }
    .icon-button.danger { border-color: #efb9b2; background: #fff1ef; color: var(--rja-danger); }
    .icon-button.yellow { border-color: #f0d38c; background: #fff8e6; color: #9c6900; }
    .icon-button.blue { border-color: #b7d3ee; background: #edf5fc; color: var(--rja-primary); }

    label { color: var(--rja-muted); font-size: .8rem; font-weight: 600; }
    input,
    textarea,
    select,
    .form-control,
    .form-select {
        min-height: 38px;
        border-color: var(--rja-border);
        background: #fff;
        color: var(--rja-text);
        font-size: .85rem;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .form-control:focus,
    .form-select:focus {
        border-color: var(--rja-primary);
        box-shadow: 0 0 0 .2rem rgba(15, 94, 168, .14);
    }

    .search-select-menu {
        border-color: var(--rja-border);
        box-shadow: 0 12px 24px rgba(15, 35, 61, .16);
    }

    .search-select-option:hover,
    .search-select-option:focus,
    .search-select-option.selected { background: var(--rja-primary-soft); color: var(--rja-primary); }

    .table-wrap {
        border-color: var(--rja-border);
        background: #fff;
        box-shadow: 0 4px 12px rgba(15, 35, 61, .035);
    }

    table {
        --bs-table-bg: #fff;
        --bs-table-striped-bg: #f8fbfe;
        --bs-table-hover-bg: #f0f6fc;
        border-color: var(--rja-border);
    }

    th {
        background: #f1f5f9;
        color: #476177;
        font-size: .68rem;
        font-weight: 700;
    }

    td,
    td strong { color: var(--rja-text); font-size: .8rem; }
    td small { color: var(--rja-muted); font-size: .73rem; }
    tbody tr:hover > td { background: #f0f6fc !important; }

    .modal-card {
        border-top: 3px solid var(--rja-primary);
        box-shadow: 0 24px 48px rgba(15, 35, 61, .2);
    }

    .modal-header { border-bottom-color: var(--rja-border); }
    .modal-actions { border-top-color: var(--rja-border); }
    .subnav,
    .quotation-status-tabs,
    .quota-tabs { border-color: var(--rja-border); border-radius: 0; background: #fff; }
    .subnav a.active,
    .quotation-status-tab.active,
    .quota-tabs button.active { background: var(--rja-primary-soft); color: var(--rja-primary); }

    .swal2-popup {
        border: 1px solid var(--rja-border);
        box-shadow: 0 24px 52px rgba(15, 35, 61, .22);
    }

    .swal2-styled.swal2-confirm { border-radius: 0; background: var(--rja-primary); }

    .guest-body:not(.verification-body) {
        padding: 1.5rem;
        background: linear-gradient(160deg, var(--rja-navy) 0%, #1d5b45 100%);
    }

    .guest-login-card {
        width: min(1040px, 100%);
        max-height: calc(100vh - 3rem);
        display: grid;
        grid-template-columns: minmax(300px, 1.05fr) minmax(340px, .95fr);
        gap: 0;
        padding: 0;
        overflow: hidden;
        border: 0 !important;
        background: #fff;
        box-shadow: 0 25px 60px rgba(0, 0, 0, .24);
    }

    .guest-login-brand {
        display: grid;
        align-content: start;
        gap: 1.15rem;
        padding: 2.6rem;
        background: linear-gradient(180deg, var(--rja-navy) 0%, var(--rja-navy-mid) 100%);
        color: #e8eef6;
    }

    .guest-login-brand img {
        width: 100%;
        max-width: 270px;
        height: 190px;
        margin: 0;
        object-fit: contain;
    }

    .guest-login-brand div { display: grid; gap: .35rem; }
    .guest-login-brand strong { color: #fff; font-size: 1.28rem; font-weight: 700; line-height: 1.25; }
    .guest-login-brand span { color: rgba(232, 238, 246, .82); font-size: .92rem; line-height: 1.35; }

    .guest-login-content {
        display: grid;
        align-content: start;
        gap: 1.35rem;
        padding: 2.4rem;
        overflow-y: auto;
        background: #fff;
    }

    .guest-login-content .auth-heading h1 { color: var(--rja-text); font-size: 1.5rem; font-weight: 700; }
    .guest-login-content .auth-heading p { color: var(--rja-muted); font-size: .9rem; font-weight: 400; }
    .guest-login-content .guest-meta { color: var(--rja-muted); font-size: .78rem; }
    .guest-login-content .development-login-panel { border-color: #cfddea; background: #f8fbfe; }
    .guest-login-content .development-login-heading { color: var(--rja-primary); }
    .guest-login-content .development-login-table-wrap { overflow-x: hidden; border-color: var(--rja-border); }
    .guest-login-content .development-login-table { min-width: 0; table-layout: fixed; }
    .guest-login-content .development-login-table th:nth-child(1) { width: 42%; }
    .guest-login-content .development-login-table th:nth-child(2) { width: 22%; }
    .guest-login-content .development-login-table th:nth-child(3) { width: 36%; }
    .guest-login-content .development-login-table td,
    .guest-login-content .development-login-table code { overflow-wrap: anywhere; white-space: normal; }
    .guest-login-content .development-login-table th { background: #edf4fb; color: #476177; }
}

@media screen and (max-width: 900px) {
    .guest-body:not(.verification-body) { align-items: start; overflow-x: hidden; padding: 1rem; }
    .guest-login-card { width: calc(100vw - 2rem); max-width: 100%; min-width: 0; max-height: none; grid-template-columns: 1fr; }
    .guest-login-card > * { min-width: 0; }
    .guest-login-brand { padding: 1.7rem; }
    .guest-login-brand img { max-width: 190px; height: 110px; }
    .guest-login-content { min-width: 0; overflow: visible; padding: 1.7rem; }
    .guest-login-content > * { min-width: 0; }
}

@media screen and (max-width: 520px) {
    .guest-login-content { gap: 1.1rem; padding: 1.45rem; }
    .development-login-heading { align-items: flex-start; flex-direction: column; }
    .development-login-heading span { overflow-wrap: anywhere; text-align: left; }
}

@media screen and (max-width: 820px) {
    .sidebar { width: var(--sidebar); }
    .topbar { padding: .7rem 1rem; }
    .content-panel { padding: 1rem; }
}

/* Operational form controls are compact, but keep enough room for scope review. */
.operation-scope-fieldset { display: grid; gap: .72rem; min-width: 0; margin: 0; padding: .85rem; border: 1px solid var(--rja-border); background: #fbfdff; }
.operation-scope-fieldset legend { float: none; width: auto; margin: 0; padding: 0 .3rem; color: var(--rja-primary); font-size: .82rem; font-weight: 700; }
.scope-checks { display: flex; flex-wrap: wrap; gap: .48rem 1rem; }
.scope-checks .checkbox-field { display: inline-flex; align-items: center; gap: .42rem; margin: 0; font-size: .82rem; }
.service-report-unit-services .scope-checks > label { display: inline-flex; align-items: center; gap: .42rem; margin: 0; color: var(--bs-body-color); font-size: .82rem; line-height: 1.25; }
.service-report-unit-services .scope-checks .form-check-input { float: none; flex: 0 0 auto; width: 1em; min-width: 1em; height: 1em; min-height: 1em; margin: 0; padding: 0; cursor: pointer; }
.form-checklist-table { display: grid; border-top: 1px solid var(--rja-border); }
.form-checklist-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .58rem 0; border-bottom: 1px solid var(--rja-border); }
.form-checklist-item { color: var(--bs-body-color); font-size: .84rem; line-height: 1.35; }
.form-checklist-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem .72rem; }
.form-checklist-options .form-check { min-height: 1.15rem; margin: 0; padding-left: 1.32rem; }
.form-checklist-options .form-check-input { width: 1em; min-width: 1em; height: 1em; min-height: 1em; margin: .12rem 0 0 -1.32rem; padding: 0; border-radius: .25em; cursor: pointer; }
.form-checklist-options .form-check-label { display: inline-block; margin: 0; color: var(--bs-body-color); font-size: .78rem; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.scope-routing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem; }

/* Native Bootstrap controls for the controlled-form editor. Keep this scoped so
   existing operational forms retain their established compact layout. */
.form-template-modal { display: block; overflow-x: hidden; }
.form-template-modal .form-template-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0; padding-bottom: 1rem; }
.form-template-modal .form-template-modal-header > div { min-width: 0; }
.form-template-modal .form-template-modal-body { padding: .2rem 0 .15rem; }
.form-template-modal .form-template-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
.form-template-modal .form-label { display: block; margin: 0 0 .35rem; color: var(--bs-body-color); font-size: .82rem; font-weight: 600; line-height: 1.25; }
.form-template-modal .form-text { margin-top: .32rem; color: var(--bs-secondary-color); font-size: .74rem; line-height: 1.35; }
.form-template-modal .form-template-legend { float: none; width: auto; margin: 0 0 .35rem; padding: 0; color: var(--bs-body-color); font-size: .82rem; font-weight: 600; line-height: 1.25; }
.form-template-modal fieldset { min-width: 0; padding: 0; border: 0; }
.form-template-modal .form-check { display: block; min-height: 1.4rem; margin: 0; padding-left: 1.5rem; }
.form-template-modal .form-check-input { float: left; width: 1em; min-width: 1em; height: 1em; min-height: 1em; margin: .23em 0 0 -1.5rem; padding: 0; border-radius: .25em; }
.form-template-modal .form-check-label { display: block; margin: 0; color: var(--bs-body-color); font-size: .82rem; font-weight: 400; line-height: 1.35; cursor: pointer; }
.form-template-modal .form-control,
.form-template-modal .form-select { min-height: 38px; font-size: .85rem; }
@media (max-width: 760px) {
    .form-checklist-row { grid-template-columns: 1fr; gap: .46rem; }
    .form-checklist-options { justify-content: flex-start; }
}
.form-template-modal textarea.form-control { min-height: 146px; }
@media (max-width: 767.98px) {
    .form-template-modal .form-template-modal-header { gap: .7rem; }
    .form-template-modal .form-template-modal-actions { justify-content: stretch; }
    .form-template-modal .form-template-modal-actions .button { flex: 1 1 auto; }
}
.verification-signatures { margin-top: 1rem; border-top: 1px solid var(--rja-border); padding-top: .85rem; }
.verification-signatures h3 { margin: 0 0 .55rem; color: var(--rja-text); font-size: .9rem; font-weight: 700; }
.verification-signatures table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.verification-signatures th, .verification-signatures td { padding: .48rem .55rem; border: 1px solid var(--rja-border); text-align: left; }
.verification-signatures th { background: #f4f7fb; color: var(--rja-muted); font-size: .72rem; text-transform: uppercase; }
.verification-hash strong { font-family: "Courier New", monospace; font-size: .76rem; letter-spacing: 0; }
.mobile-sidebar-toggle { display: none; }

/* Structured Service Report unit records stay readable on a wide field-work modal. */
.service-report-assets { display: grid; gap: .75rem; min-width: 0; }
.service-report-assets .panel-title { margin: 0; }
.service-report-asset-row { display: grid; gap: .82rem; padding: .9rem; border: 1px solid var(--rja-border); background: #fff; }
.service-report-asset-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--rja-primary); }
.service-report-asset-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.service-reading-grid { display: grid; gap: .32rem; overflow-x: auto; }
.service-reading-head, .service-reading-line { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(80px, .65fr); gap: .45rem; align-items: center; min-width: 600px; }
.service-reading-head { padding: .35rem .45rem; background: #f4f7fb; color: var(--rja-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.service-reading-line { padding: .05rem .45rem; }
.service-reading-line strong { font-size: .78rem; font-weight: 600; color: var(--rja-text); }
.service-reading-line input { min-width: 0; }

@media screen and (min-width: 821px) {
    .app-frame { grid-template-columns: var(--sidebar) minmax(0, 1fr) !important; }
    .sidebar { transform: none !important; }
    .mobile-sidebar-toggle { display: none !important; }
}

@media screen and (max-width: 820px) {
    .mobile-sidebar-toggle { display: inline-flex; flex: 0 0 auto; }
    .topbar { gap: .6rem; }
    .scope-routing-grid { grid-template-columns: 1fr; }
    .service-report-asset-fields { grid-template-columns: 1fr; }
}

/* Bills design alignment and modal width safeguards. */
@media screen {
    .button,
    label {
        font-weight: 400;
    }

    .bills-sidebar {
        width: var(--sidebar);
        background: linear-gradient(180deg, #0f2233 0%, #173349 100%);
        color: #e8eef6;
        box-shadow: none;
    }

    .bills-sidebar .bills-brand {
        display: grid;
        justify-items: center;
        gap: 0;
        min-height: 0;
        margin: 0;
        padding: 1.4rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        color: #e8eef6;
        text-align: center;
    }

    .bills-sidebar .bills-brand-logo {
        display: block;
        width: 100%;
        max-width: 188px;
        height: auto;
        max-height: 98px;
        margin: 0 auto 1rem;
        padding: .2rem;
        object-fit: contain;
    }

    .bills-sidebar .bills-brand-copy {
        display: grid;
        gap: .25rem;
        justify-items: center;
    }

    .bills-sidebar .bills-company-name {
        color: #fff;
        font-size: 1.08rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .bills-sidebar .bills-brand-subtitle {
        color: rgba(232, 238, 246, .72);
        font-size: .84rem;
        font-weight: 400;
        line-height: 1.35;
    }

    .bills-sidebar .bills-nav {
        gap: .05rem;
        padding: .75rem .9rem .95rem;
    }

    .bills-sidebar .nav-group {
        gap: 0;
        margin: 0;
    }

    .bills-sidebar .bills-nav-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: .45rem 0 .18rem;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(232, 238, 246, .56);
        font-size: .76rem;
        font-weight: 400;
        letter-spacing: .08em;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .bills-sidebar .bills-nav-label svg {
        width: 14px;
        height: 14px;
        color: rgba(232, 238, 246, .64);
    }

    .bills-sidebar .bills-nav-label:hover {
        background: transparent;
        color: rgba(232, 238, 246, .82);
    }

    .bills-sidebar .nav-group-links {
        gap: .05rem;
        padding-bottom: .18rem;
    }

    .bills-sidebar .bills-nav-link {
        display: flex;
        align-items: center;
        gap: .58rem;
        min-height: 0;
        padding: .44rem .78rem;
        border-radius: 12px;
        background: transparent;
        color: #e8eef6;
        font-size: .82rem;
        font-weight: 400;
        line-height: 1.1;
        text-decoration: none;
        transition: background .18s ease, transform .18s ease;
    }

    .bills-sidebar .bills-nav-link > svg {
        width: 17px;
        height: 17px;
        color: inherit;
    }

    .bills-sidebar .bills-nav-link::before {
        display: none;
    }

    .bills-sidebar .bills-nav-link:hover,
    .bills-sidebar .bills-nav-link.active {
        background: rgba(255, 255, 255, .12);
        color: #fff;
        box-shadow: none;
        transform: translateX(2px);
    }

    .bills-sidebar .bills-nav-link.active {
        font-weight: 400;
    }

    .bills-sidebar .bills-nav-link.nav-child {
        min-height: 29px;
        padding-left: 2.2rem;
        font-size: .76rem;
    }

    .bills-sidebar .bills-nav-link.nav-child > svg {
        width: 14px;
        height: 14px;
    }

    .bills-sidebar .bills-sidebar-footer {
        display: block;
        margin: auto 0 0;
        padding: 1.2rem 1.5rem 1.5rem;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: transparent;
        color: rgba(232, 238, 246, .72);
    }

    .bills-sidebar .bills-sidebar-footer-copy {
        display: grid;
        gap: .22rem;
        min-width: 0;
    }

    .bills-sidebar .bills-sidebar-footer span {
        color: rgba(232, 238, 246, .72);
        font-size: .82rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }

    .bills-sidebar .bills-sidebar-footer strong {
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .bills-sidebar .bills-sidebar-footer small,
    .bills-sidebar .bills-sidebar-footer a {
        color: rgba(232, 238, 246, .72);
        font-size: .82rem;
        line-height: 1.35;
    }

    .bills-sidebar .bills-sidebar-footer a:hover {
        color: #fff;
    }

    .direct-sale-modal {
        width: min(1660px, calc(100vw - 32px));
        max-width: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow-x: hidden;
    }

    .direct-sale-modal .repeater {
        min-width: 0;
        overflow-x: hidden;
    }

    .direct-sale-items-table-wrap {
        overflow-x: auto !important;
    }

    .direct-sale-items-table {
        width: 100%;
        min-width: 1100px !important;
        table-layout: fixed !important;
    }

    .direct-sale-items-table th:nth-child(1) { width: 46px; }
    .direct-sale-items-table th:nth-child(2) { width: 88px; }
    .direct-sale-items-table th:nth-child(3) { width: 25%; }
    .direct-sale-items-table th:nth-child(4) { width: 135px; }
    .direct-sale-items-table th:nth-child(5) { width: 175px; }
    .direct-sale-items-table th:nth-child(6) { width: 56px; text-align: center; }
    .direct-sale-items-table th:nth-child(7) { width: 62px; }
    .direct-sale-items-table th:nth-child(8),
    .direct-sale-items-table th:nth-child(9) { width: 116px; }
    .direct-sale-items-table th:nth-child(10) { width: 84px; }

    .direct-sale-items-table td { vertical-align: middle; }
    .direct-sale-items-table td:nth-child(3) strong,
    .direct-sale-items-table td:nth-child(3) small { display: block; }
    .direct-sale-items-table td:nth-child(3) small { margin-top: 2px; }
    .direct-sale-items-table .actions { white-space: nowrap; }
    .direct-sale-items-table .icon-button + .icon-button { margin-left: 4px; }
    .direct-sale-sequence { color: var(--rja-muted); font-weight: 600; text-align: center; }

    .direct-sale-line-modal {
        width: min(1240px, calc(100vw - 32px));
        max-width: none;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        overflow-x: hidden;
    }

    .direct-sale-line-modal .search-select,
    .direct-sale-line-modal input,
    .direct-sale-line-modal select {
        min-width: 0;
        width: 100%;
    }

    .direct-sale-line-preview {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 64px;
        padding: 10px 12px;
        border: 1px solid var(--rja-border);
        background: #f8fbff;
    }

    .direct-sale-line-preview span { color: var(--rja-muted); font-size: .75rem; }
    .direct-sale-line-preview strong { color: var(--rja-primary); }

    .service-price-modal {
        width: min(1120px, calc(100vw - 32px));
        max-width: 1120px;
        overflow-x: hidden;
    }

    .service-price-modal .table-wrap {
        overflow-x: auto;
    }

    .service-price-table {
        min-width: 930px;
        table-layout: fixed;
    }

    .service-price-table th:last-child,
    .service-price-table td:last-child {
        width: 74px;
        text-align: center;
    }
}

@media screen and (max-width: 1280px) {
    .direct-sale-modal {
        width: min(1180px, calc(100vw - 24px));
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .direct-sale-line-modal {
        width: min(1080px, calc(100vw - 24px));
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media screen and (max-width: 700px) {
    .direct-sale-line-modal { grid-template-columns: 1fr !important; }
    .direct-sale-line-modal .span-2 { grid-column: 1 / -1; }
}

/* Grouped equipment keeps the inventory scan short while opening serial-level detail on demand. */
.table-item-link {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.table-item-link:hover strong,
.table-item-link:focus-visible strong {
    color: var(--rja-primary);
    text-decoration: underline;
}

.equipment-group-modal {
    width: min(1480px, calc(100vw - 32px));
    max-width: none;
}

.equipment-group-modal [data-equipment-group-summary] {
    margin-bottom: 12px;
}

.equipment-group-modal .compact-document-table-wrap {
    overflow-x: hidden;
}

/* A POS cart is wide by nature, but should fit a normal desktop work area before scrolling. */
.direct-sale-items-table {
    min-width: 980px !important;
}

.direct-sale-items-table th:nth-child(1) { width: 44px; }
.direct-sale-items-table th:nth-child(2) { width: 74px; }
.direct-sale-items-table th:nth-child(3) { width: 23%; }
.direct-sale-items-table th:nth-child(4) { width: 105px; }
.direct-sale-items-table th:nth-child(5) { width: 145px; }
.direct-sale-items-table th:nth-child(6) { width: 50px; }
.direct-sale-items-table th:nth-child(7) { width: 50px; }
.direct-sale-items-table th:nth-child(8),
.direct-sale-items-table th:nth-child(9) { width: 105px; }
.direct-sale-items-table th:nth-child(10) { width: 112px; }

/* Commission setup stays dense and readable while keeping the monthly review on one screen. */
.associate-link {
    display: block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0b57d0;
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.associate-link:hover,
.associate-link:focus-visible {
    color: #174ea6;
    text-decoration: underline;
}

.commission-associate-modal {
    width: min(1480px, calc(100vw - 28px));
    max-width: none;
}

.commission-summary-table {
    width: 100%;
    table-layout: auto;
}

.commission-summary-table th,
.commission-summary-table td {
    white-space: nowrap;
}

.commission-associate-modal .commission-line-table {
    overflow-x: auto;
}

.commission-line-table > table {
    min-width: 1240px;
    table-layout: auto;
}

.commission-line-table select,
.commission-value-input {
    width: 100%;
    min-width: 108px;
}

.commission-rule-inline {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(92px, .65fr) 34px;
    align-items: end;
    gap: .4rem;
    min-width: 330px;
}

.commission-rule-inline .icon-button {
    align-self: end;
}

.commission-value-input {
    text-align: right;
}

.commission-line-table td.actions {
    min-width: 64px;
}

@media screen and (max-width: 760px) {
    .commission-associate-modal {
        width: min(100vw - 12px, 1480px);
    }

    .commission-summary-table th,
    .commission-summary-table td {
        white-space: normal;
    }
}

/* Shared form alignment and browser-native checkbox sizing. */
.form-grid > label,
.form-grid > fieldset,
.form-grid > .attachment-upload-field,
.form-grid > .technician-assignment-field {
    min-width: 0;
    align-self: start;
}

.form-grid > label > span:first-child {
    display: flex;
    align-items: center;
    min-height: 19px;
}

input.form-check-input[type="checkbox"],
input.form-check-input[type="radio"],
.checkbox-field input[type="checkbox"],
.checkbox-field input[type="radio"] {
    flex: 0 0 auto;
    width: 1em;
    min-width: 1em;
    height: 1em;
    min-height: 1em;
    margin: 0;
    padding: 0;
    border-radius: .25em;
    vertical-align: middle;
}

.checkbox-field {
    min-height: 38px;
    margin: 0;
    padding: 0;
}

.attachment-upload-field {
    display: grid;
    gap: 6px;
}

.attachment-upload-dropdown {
    position: relative;
    justify-self: start;
}

.attachment-upload-dropdown > .button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.attachment-upload-dropdown > .button svg:last-child {
    width: 15px;
    height: 15px;
}

.attachment-upload-menu {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    left: 0;
    display: grid;
    min-width: 210px;
    padding: 4px;
    border: 1px solid var(--bs-border-color, var(--line));
    border-radius: var(--bs-border-radius, var(--radius));
    background: #fff;
    box-shadow: var(--shadow);
}

.attachment-upload-menu[hidden] {
    display: none;
}

.attachment-upload-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .82rem;
    text-align: left;
}

.attachment-upload-menu button:hover,
.attachment-upload-menu button:focus {
    background: #e8f0fe;
    color: #174ea6;
    outline: 0;
}

.attachment-upload-menu svg {
    width: 16px;
    height: 16px;
}

.job-order-camera-modal {
    width: min(860px, 100%);
}

.job-order-camera-stage {
    display: grid;
    min-height: 320px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--bs-border-color, var(--line));
    background: #111;
}

.job-order-camera-stage video,
.job-order-camera-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.job-order-camera-stage [hidden] {
    display: none;
}

@media (max-width: 760px) {
    .job-order-camera-stage {
        min-height: 250px;
    }

    .job-order-camera-modal .modal-actions {
        flex-wrap: wrap;
    }
}

.technician-assignment-chip {
    gap: 6px;
    border-color: transparent;
}

.technician-assignment-chip.is-head {
    border-color: #c6dafc;
    background: #e8f0fe;
    color: #174ea6;
}

.technician-assignment-chip.is-technician {
    border-color: #b7dfc1;
    background: #e6f4ea;
    color: #137333;
}

.technician-assignment-role,
.technician-role-flag {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.technician-assignment-chip.is-head .technician-assignment-role,
.technician-role-flag.head {
    background: #d2e3fc;
    color: #174ea6;
}

.technician-assignment-chip.is-technician .technician-assignment-role,
.technician-role-flag.technician {
    background: #ceead6;
    color: #137333;
}

.technician-role-flag {
    width: fit-content;
    margin-bottom: 3px;
}

.technician-role-flag svg {
    width: 13px;
    height: 13px;
}

/*
 * A2 Bills visual template
 *
 * This final screen-only layer is intentionally kept after the older RJA
 * component rules. It gives every existing RJA page the same shell, palette,
 * control density, and login treatment as the local A2 Bills subsystem while
 * leaving its workflows and printable documents untouched.
 */
@media screen {
    :root {
        --a2-sidebar-width: 292px;
        --a2-page-bg: #f5f7fb;
        --a2-workspace-top: #f8fbff;
        --a2-workspace-bottom: #eef4fb;
        --a2-text: #163047;
        --a2-muted: #5e7288;
        --a2-primary: #0f5ea8;
        --a2-primary-dark: #0b4a84;
        --a2-primary-soft: #e6f0fb;
        --a2-border: #dbe3ef;
        --a2-sidebar-start: #0f2233;
        --a2-sidebar-end: #173349;
        --a2-login-green: #1f5d3b;
        --a2-login-green-hover: #164a2f;
        --sidebar: var(--a2-sidebar-width);
        --rja-navy: var(--a2-sidebar-start);
        --rja-navy-mid: var(--a2-sidebar-end);
        --rja-workspace-top: var(--a2-workspace-top);
        --rja-workspace: var(--a2-workspace-bottom);
        --rja-text: var(--a2-text);
        --rja-muted: var(--a2-muted);
        --rja-primary: var(--a2-primary);
        --rja-primary-soft: var(--a2-primary-soft);
        --rja-border: var(--a2-border);
        --bs-primary: var(--a2-primary);
        --bs-primary-rgb: 15, 94, 168;
        --bs-body-color: var(--a2-text);
        --bs-secondary-color: var(--a2-muted);
        --bs-border-color: var(--a2-border);
        --bs-font-sans-serif: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    body.a2-bills-body {
        min-width: 0;
        background: linear-gradient(180deg, var(--a2-workspace-top) 0%, var(--a2-workspace-bottom) 100%);
        color: var(--a2-text);
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    .app-frame.bills-shell {
        display: flex;
        min-height: 100vh;
        grid-template-columns: none !important;
        background: linear-gradient(180deg, var(--a2-workspace-top) 0%, var(--a2-workspace-bottom) 100%);
    }

    .app-frame.bills-shell > .main-panel {
        flex: 1 1 auto;
        min-width: 0;
    }

    .app-frame.bills-shell > .bills-sidebar {
        position: sticky;
        top: 0;
        flex: 0 0 var(--a2-sidebar-width);
        width: var(--a2-sidebar-width);
        height: 100vh;
        min-height: 100vh;
        padding: 0;
        gap: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: linear-gradient(180deg, var(--a2-sidebar-start) 0%, var(--a2-sidebar-end) 100%);
        border: 0;
        box-shadow: none;
        color: #e8eef6;
        scrollbar-color: rgba(232, 238, 246, .35) transparent;
        scrollbar-width: thin;
    }

    .bills-sidebar::-webkit-scrollbar { width: 8px; }
    .bills-sidebar::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 10px; background: rgba(232, 238, 246, .35); background-clip: padding-box; }

    .bills-sidebar .bills-brand {
        flex: 0 0 auto;
        display: grid;
        justify-items: center;
        gap: 0;
        min-height: 0;
        margin: 0;
        padding: 1.4rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        color: #e8eef6;
        text-align: center;
    }

    .bills-sidebar .bills-brand-logo {
        display: block;
        width: 100%;
        max-width: 188px;
        height: auto;
        max-height: 98px;
        margin: 0 auto 1rem;
        padding: .2rem;
        object-fit: contain;
    }

    .bills-sidebar .bills-brand-copy { display: grid; gap: .25rem; justify-items: center; }
    .bills-sidebar .bills-company-name { color: #fff; font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
    .bills-sidebar .bills-brand-subtitle { color: rgba(232, 238, 246, .72); font-size: .84rem; font-weight: 400; line-height: 1.35; }

    .bills-sidebar .bills-nav {
        flex: 0 0 auto;
        display: grid;
        gap: .05rem;
        padding: .75rem .9rem .95rem;
    }

    .bills-sidebar .nav-group { display: grid; gap: 0; margin: 0; }
    .bills-sidebar .bills-nav-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: .45rem 0 .18rem;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(232, 238, 246, .56);
        font-size: .76rem;
        font-weight: 400;
        letter-spacing: .08em;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .bills-sidebar .bills-nav-label svg { width: 14px; height: 14px; color: rgba(232, 238, 246, .64); }
    .bills-sidebar .bills-nav-label:hover { background: transparent; color: rgba(232, 238, 246, .82); }
    .bills-sidebar .nav-group-links { display: grid; gap: .05rem; padding-bottom: .18rem; }

    .bills-sidebar .bills-nav-link {
        display: flex;
        align-items: center;
        gap: .58rem;
        min-height: 0;
        padding: .44rem .78rem;
        border-radius: 12px;
        background: transparent;
        color: #e8eef6;
        font-size: .82rem;
        font-weight: 400;
        line-height: 1.1;
        text-decoration: none;
        transition: background .18s ease, transform .18s ease;
    }

    .bills-sidebar .bills-nav-link > svg { width: 17px; height: 17px; color: inherit; }
    .bills-sidebar .bills-nav-link::before { display: none; }
    .bills-sidebar .bills-nav-link:hover,
    .bills-sidebar .bills-nav-link.active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; transform: translateX(2px); }
    .bills-sidebar .bills-nav-link.active { font-weight: 400; }

    .bills-sidebar .bills-sidebar-footer {
        flex: 0 0 auto;
        display: block;
        margin: auto 0 0;
        padding: 1.2rem 1.5rem 1.5rem;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
        background: transparent;
        color: rgba(232, 238, 246, .72);
    }

    .bills-sidebar .bills-sidebar-footer-copy { display: grid; gap: .22rem; min-width: 0; }
    .bills-sidebar .bills-sidebar-footer span { color: rgba(232, 238, 246, .72); font-size: .82rem; font-weight: 400; }
    .bills-sidebar .bills-sidebar-footer strong { color: #fff; font-size: .82rem; font-weight: 700; line-height: 1.25; }
    .bills-sidebar .bills-sidebar-footer small,
    .bills-sidebar .bills-sidebar-footer a { color: rgba(232, 238, 246, .72); font-size: .82rem; line-height: 1.35; }
    .bills-sidebar .bills-sidebar-footer a:hover { color: #fff; }

    .main-panel { background: transparent; }
    .topbar {
        min-height: 64px;
        padding: .75rem 1.5rem;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid var(--a2-border);
        box-shadow: 0 1px 6px rgba(15, 35, 61, .06);
        backdrop-filter: blur(12px);
    }

    .topbar-search {
        width: min(560px, 48vw);
        min-height: 38px;
        border-color: var(--a2-border);
        border-radius: 0;
        background: #fff;
    }

    .topbar-search > svg,
    .account-menu summary > svg { color: var(--a2-muted); }
    .topbar-user strong { color: var(--a2-text); font-size: .9rem; font-weight: 700; }
    .topbar-user small { color: var(--a2-muted); font-size: .72rem; }
    .profile-avatar { border-color: #fff; background: var(--a2-primary); box-shadow: 0 0 0 2px #cfe0f2; }
    .account-dropdown { border-color: var(--a2-border); border-radius: 0; box-shadow: 0 14px 28px rgba(15, 35, 61, .16); }
    .account-dropdown a,
    .account-dropdown button { color: var(--a2-text); }
    .account-dropdown a:hover,
    .account-dropdown button:hover { background: var(--a2-primary-soft); color: var(--a2-primary); }

    .content-panel { gap: 1.1rem; padding: 1.35rem 1.5rem 2rem; }
    .page-heading { padding-bottom: .15rem; }
    .page-heading h1 { color: var(--a2-text); font-size: 1.35rem; font-weight: 700; }
    .page-heading p,
    .panel-title span,
    .modal-header p { color: var(--a2-muted); font-weight: 400; }
    .panel,
    .metric-card,
    .modal-card,
    .data-table-toolbar,
    .guest-card:not(.guest-card-wide) { border-color: var(--a2-border); border-radius: 0; box-shadow: 0 6px 18px rgba(15, 35, 61, .055); }
    .panel { padding: 1rem; }
    .panel-title { padding-bottom: .7rem; border-bottom-color: var(--a2-border); }
    .panel-title h2,
    .modal-header h2 { color: var(--a2-text); font-size: 1rem; font-weight: 700; }

    .button,
    .icon-button,
    input,
    textarea,
    select,
    .form-control,
    .form-select,
    .search-select-input,
    .search-select-menu,
    .table-wrap,
    .data-table-toolbar,
    .swal2-popup { border-radius: 0 !important; }

    .button { min-height: 38px; border-color: var(--a2-border); font-size: .84rem; font-weight: 400; }
    .button.primary,
    .btn-primary { border-color: var(--a2-primary); background: var(--a2-primary); color: #fff; }
    .button.primary:hover,
    .btn-primary:hover { border-color: var(--a2-primary-dark); background: var(--a2-primary-dark); color: #fff; }
    .button.green { border-color: #1c7c54; background: #1c7c54; color: #fff; }
    .button.yellow { border-color: #d59c14; background: #e5ae2a; color: #1f2933; }
    .button.red { border-color: #c74a3e; background: #c74a3e; color: #fff; }
    .button.ghost { border-color: var(--a2-border); background: #fff; color: var(--a2-text); }
    .button.ghost:hover { border-color: #c9d7e6; background: #f3f7fb; }
    .icon-button { border-color: var(--a2-border); background: #fff; color: var(--a2-primary); }
    .icon-button:hover { border-color: #b9cfe3; background: var(--a2-primary-soft); color: var(--a2-primary); }

    label { color: var(--a2-muted); font-size: .8rem; font-weight: 400; }
    input,
    textarea,
    select,
    .form-control,
    .form-select { min-height: 38px; border-color: var(--a2-border); background: #fff; color: var(--a2-text); font-size: .85rem; }
    input:focus,
    textarea:focus,
    select:focus,
    .form-control:focus,
    .form-select:focus { border-color: var(--a2-primary); box-shadow: 0 0 0 .2rem rgba(15, 94, 168, .14); }
    input.form-check-input[type="checkbox"],
    input.form-check-input[type="radio"],
    .checkbox-field input[type="checkbox"],
    .checkbox-field input[type="radio"] { accent-color: var(--a2-primary); }
    .search-select-menu { border-color: var(--a2-border); box-shadow: 0 12px 24px rgba(15, 35, 61, .16); }
    .search-select-option:hover,
    .search-select-option:focus,
    .search-select-option.selected { background: var(--a2-primary-soft); color: var(--a2-primary); }

    .table-wrap { border-color: var(--a2-border); background: #fff; box-shadow: 0 4px 12px rgba(15, 35, 61, .035); }
    table { --bs-table-bg: #fff; --bs-table-striped-bg: #f8fbfe; --bs-table-hover-bg: #f0f6fc; border-color: var(--a2-border); }
    th { background: #f1f5f9; color: #476177; font-size: .68rem; font-weight: 700; }
    td,
    td strong { color: var(--a2-text); font-size: .8rem; }
    td small { color: var(--a2-muted); font-size: .73rem; }
    tbody tr:hover > td { background: #f0f6fc !important; }
    .modal-card { border-top: 3px solid var(--a2-primary); box-shadow: 0 24px 48px rgba(15, 35, 61, .2); }
    .modal-header { border-bottom-color: var(--a2-border); }
    .modal-actions { border-top-color: var(--a2-border); }
    .subnav,
    .quotation-status-tabs,
    .quota-tabs { border-color: var(--a2-border); border-radius: 0; background: #fff; }
    .subnav a.active,
    .quotation-status-tab.active,
    .quota-tabs button.active { background: var(--a2-primary-soft); color: var(--a2-primary); }
    .swal2-popup { border: 1px solid var(--a2-border); box-shadow: 0 24px 52px rgba(15, 35, 61, .22); }
    .swal2-styled.swal2-confirm { border-radius: 0; background: var(--a2-primary); }

    body.a2-login-body:not(.verification-body) {
        padding: 1.5rem;
        background: linear-gradient(160deg, var(--a2-sidebar-start) 0%, #1d5b45 100%);
    }

    .guest-login-card {
        width: min(1040px, 100%);
        max-height: calc(100vh - 3rem);
        display: grid;
        grid-template-columns: minmax(300px, 1.05fr) minmax(340px, .95fr);
        gap: 0;
        padding: 0;
        overflow: hidden;
        border: 0 !important;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 25px 60px rgba(0, 0, 0, .24);
    }

    .guest-login-brand {
        display: grid;
        align-content: start;
        gap: 1.15rem;
        padding: 2.6rem;
        background: linear-gradient(180deg, var(--a2-sidebar-start) 0%, var(--a2-sidebar-end) 100%);
        color: #e8eef6;
    }

    .guest-login-brand img { width: 100%; max-width: 100%; height: 220px; margin: 0; object-fit: contain; }
    .guest-login-brand div { display: grid; gap: .35rem; }
    .guest-login-brand strong { color: #fff; font-size: 1.28rem; font-weight: 700; line-height: 1.25; }
    .guest-login-brand span { color: rgba(232, 238, 246, .82); font-size: .92rem; line-height: 1.35; }
    .guest-login-content { display: grid; align-content: start; gap: 1.35rem; padding: 2.4rem; overflow-y: auto; background: #fff; }
    .guest-login-content .auth-heading h1 { color: var(--a2-text); font-size: 1.5rem; font-weight: 700; }
    .guest-login-content .auth-heading p { color: var(--a2-muted); font-size: .9rem; font-weight: 400; }
    .guest-login-content .form-stack .button.primary { border-color: var(--a2-login-green); background: var(--a2-login-green); }
    .guest-login-content .form-stack .button.primary:hover { border-color: var(--a2-login-green-hover); background: var(--a2-login-green-hover); box-shadow: 0 8px 16px rgba(31, 93, 59, .3); transform: translateY(-2px); }
    .guest-login-content .form-stack .button.primary:active { box-shadow: none; transform: translateY(0); }
    .guest-login-content .guest-meta { color: var(--a2-muted); font-size: .78rem; }
    .guest-login-content .development-login-panel { border-color: #dbe6f4; background: #f5f9ff; }
    .guest-login-content .development-login-heading { color: var(--a2-primary); }
    .guest-login-content .development-login-table-wrap { overflow-x: hidden; border-color: var(--a2-border); }
    .guest-login-content .development-login-table { min-width: 0; table-layout: fixed; }
    .guest-login-content .development-login-table th:nth-child(1) { width: 42%; }
    .guest-login-content .development-login-table th:nth-child(2) { width: 22%; }
    .guest-login-content .development-login-table th:nth-child(3) { width: 36%; }
    .guest-login-content .development-login-table td,
    .guest-login-content .development-login-table code { overflow-wrap: anywhere; white-space: normal; }
    .guest-login-content .development-login-table th { background: #edf4fb; color: #476177; }
}

@media screen and (max-width: 820px) {
    .app-frame.bills-shell { display: block; }
    .app-frame.bills-shell > .bills-sidebar { position: fixed; width: min(var(--a2-sidebar-width), calc(100vw - 2.5rem)); height: 100dvh; transform: translateX(-105%); transition: transform .2s ease; }
    .app-frame.bills-shell > .bills-sidebar.open { transform: translateX(0); }
    .topbar { padding: .7rem 1rem; }
    .content-panel { padding: 1rem; }
}

@media screen and (max-width: 900px) {
    body.a2-login-body:not(.verification-body) { align-items: flex-start; overflow-x: hidden; padding: 1rem; }
    .guest-login-card { width: calc(100vw - 2rem); max-width: 100%; min-width: 0; max-height: none; grid-template-columns: 1fr; }
    .guest-login-card > * { min-width: 0; }
    .guest-login-brand { padding: 1.75rem; }
    .guest-login-brand img { max-height: 168px; }
    .guest-login-content { min-width: 0; overflow: visible; padding: 1.75rem; }
    .guest-login-content > * { min-width: 0; }
}

@media screen and (max-width: 520px) {
    .guest-login-brand,
    .guest-login-content { padding: 1.25rem; }
    .guest-login-content { gap: 1.1rem; }
}