:root {
    color-scheme: light;
    --bg: #f5f7f6;
    --page-start: #fbfcfb;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --surface-wash: #fbfcfb;
    --surface-raised: #ffffff;
    --field-bg: #ffffff;
    --border: #d7dfda;
    --border-strong: #c2ccc6;
    --text: #111816;
    --text-soft: #2d3833;
    --muted: #66746d;
    --green: #15803d;
    --green-mid: #16a34a;
    --green-dark: #166534;
    --green-soft: #dcfce7;
    --green-rgb: 21, 128, 61;
    --good-green-yellow: #4d7c0f;
    --good-green-yellow-soft: #ecfccb;
    --primary-rgb: 200, 149, 32;
    --amber: #b86400;
    --amber-soft: #fff4da;
    --orange: #d75f16;
    --orange-soft: #fff0e4;
    --red: #c72f26;
    --red-soft: #fde8e6;
    --sidebar: #11100d;
    --sidebar-soft: #1b1710;
    --blue: #2850a7;
    --blue-soft: #eaf0ff;
    --shadow: 0 18px 42px rgba(16, 24, 20, 0.08);
    --shadow-soft: 0 1px 2px rgba(16, 24, 20, 0.05);
    --ring: 0 0 0 4px rgba(var(--primary-rgb), 0.2);
    --body-radial: rgba(var(--primary-rgb), 0.08);
}

    :root[data-theme="dark"] {
        color-scheme: dark;
        --bg: #050505;
        --page-start: #020202;
        --surface: #0b0b0a;
        --surface-soft: #11100e;
        --surface-wash: #14120e;
        --surface-raised: #12110f;
        --field-bg: #080807;
        --border: #302813;
        --border-strong: #6d5113;
        --text: #f8f3e8;
        --text-soft: #eadfca;
        --muted: #b7ac95;
        --green: #4ade80;
        --green-mid: #22c55e;
        --green-dark: #15803d;
        --green-soft: #12351f;
        --green-rgb: 74, 222, 128;
        --good-green-yellow: #bef264;
        --good-green-yellow-soft: #2d3512;
        --primary-rgb: 240, 196, 81;
        --amber: #f0b347;
        --amber-soft: #2f2110;
        --orange: #f68b3c;
        --orange-soft: #3a220e;
        --red: #ff6f61;
        --red-soft: #351816;
        --sidebar: #000000;
        --sidebar-soft: #050403;
        --blue: #8fb3ff;
        --blue-soft: #142039;
        --shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
        --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
        --body-radial: rgba(var(--primary-rgb), 0.1);
    }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top right, var(--body-radial), transparent 34rem),
        linear-gradient(180deg, var(--page-start) 0%, var(--bg) 22rem);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible {
    outline: 0;
    box-shadow: var(--ring);
    border-radius: 8px;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background:
        linear-gradient(180deg, rgba(var(--primary-rgb), 0.12), transparent 34%),
        linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-soft) 100%);
    color: #fff;
    padding: 22px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.28);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 0 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: 0;
    color: #fff;
}

.brand-logo {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #070604;
    border: 1px solid rgba(var(--primary-rgb), 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 24px rgba(0, 0, 0, 0.22);
    color: var(--green-mid);
}

.brand-logo svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-logo-shield {
    fill: rgba(var(--primary-rgb), 0.12);
    stroke-width: 1.7;
}

.brand-logo-gear {
    stroke-width: 2;
}

.brand-logo-center {
    fill: var(--green-mid);
    stroke-width: 0;
}

.brand-image {
    display: block;
    width: min(100%, 196px);
    max-height: 54px;
    object-fit: contain;
}

.brand-text {
    display: grid;
    gap: 2px;
    line-height: 1.05;
    text-transform: uppercase;
}

.brand-text small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.7rem;
    font-weight: 750;
    text-transform: none;
}

.sidebar nav {
    display: grid;
    gap: 6px;
}

.sidebar nav a,
.nav-group summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    color: #d6e0db;
    font-weight: 700;
    font-size: 0.93rem;
    border: 1px solid transparent;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

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

.nav-group summary {
    list-style: none;
    cursor: pointer;
    padding: 0;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.62;
    transition: transform 140ms ease;
}

.nav-group[open] summary::after {
    transform: rotate(45deg);
}

.nav-group summary > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.nav-children {
    display: grid;
    gap: 3px;
    padding: 2px 0 4px 31px;
}

.sidebar nav .nav-child {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.84rem;
    color: #b8c6bf;
}

.nav-icon,
.button-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.nav-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    opacity: 0.86;
}

.nav-icon svg,
.button-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-icon i {
    font-size: 0.96em;
    line-height: 1;
}

.button-icon {
    width: 17px;
    height: 17px;
}

.sidebar nav a.active,
.sidebar nav a:hover,
.nav-group summary:hover {
    background: rgba(var(--primary-rgb), 0.26);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
    transform: translateX(2px);
}

.sidebar nav a.active .nav-icon,
.sidebar nav a:hover .nav-icon,
.nav-group summary:hover .nav-icon {
    opacity: 1;
}

.main {
    min-width: 0;
    padding: 28px clamp(18px, 2.6vw, 36px);
}

.topbar,
.section-head,
.action-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.section-head,
.action-panel {
    align-items: flex-start;
}

.section-head {
    margin-bottom: 2px;
}

.section-head p {
    margin-bottom: 0;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(180px, 0.75fr) minmax(280px, 1.2fr) auto;
    align-items: center;
    margin: -4px 0 24px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--border);
}

.topbar-title {
    min-width: 0;
}

.global-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: min(100%, 680px);
    min-height: 46px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.global-search:focus-within {
    border-color: var(--green-mid);
    box-shadow: var(--ring);
}

.global-search-icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--muted);
}

.global-search-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.global-search input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    box-shadow: none;
}

.global-search input:focus {
    box-shadow: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-soft);
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.kicker {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

h1,
h2 {
    margin: 0;
    line-height: 1.15;
}

h1 {
    font-size: clamp(1.55rem, 2.1vw, 2rem);
    letter-spacing: 0;
    font-weight: 800;
}

h2 {
    font-size: 1.05rem;
    font-weight: 800;
}

.panel,
.stat-card,
.scan-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 34%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.panel {
    padding: 20px;
    margin-bottom: 18px;
}

.action-panel {
    background:
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.08), transparent 46%),
        var(--surface);
    border-color: #c8d9cf;
}

.action-panel .button {
    flex: 0 0 auto;
}

.quick-actions-panel {
    background:
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.08), transparent 46%),
        var(--surface);
    border-color: #c8d9cf;
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.quick-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    min-height: 94px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.quick-action-card:hover {
    transform: translateY(-1px);
    border-color: var(--green);
    box-shadow: var(--shadow);
}

.quick-action-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--green-soft);
    color: var(--green);
}

.quick-action-icon .nav-icon {
    width: 22px;
    height: 22px;
}

.quick-action-card strong {
    color: var(--text);
}

.quick-action-card small {
    grid-column: 2;
}

.user-home {
    display: grid;
    gap: 16px;
}

.user-home-hero {
    text-align: center;
}

.user-home-hero h2 {
    margin-bottom: 14px;
}

.user-search {
    display: grid;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 18px;
}

.user-home-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.user-home-action,
.user-summary-card,
.user-mini-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.user-home-action {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-height: 118px;
    padding: 16px 12px;
    text-align: center;
}

.user-home-action:hover,
.user-summary-card:hover,
.user-mini-row:hover {
    border-color: var(--green);
    box-shadow: var(--shadow);
}

.user-home-action > span {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--green-soft);
    color: var(--green);
}

.user-home-action small,
.user-mini-row span,
.user-mini-row small {
    color: var(--muted);
}

.user-card-grid {
    display: grid;
    gap: 12px;
}

.compact-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-summary-card {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 16px;
    text-align: center;
}

.user-summary-card span {
    color: var(--muted);
    font-weight: 750;
}

.user-summary-card strong {
    color: var(--text);
    font-size: 2rem;
}

.user-mini-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.user-mini-row {
    display: grid;
    gap: 3px;
    padding: 12px;
    text-align: center;
}

.employee-home {
    display: grid;
    gap: 16px;
}

.employee-search-hero {
    display: grid;
    gap: 16px;
    background:
        linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), transparent 48%),
        var(--surface);
}

.employee-search-copy {
    display: grid;
    gap: 6px;
}

.employee-search-copy h2 {
    font-size: 1.45rem;
}

.employee-search-copy p {
    max-width: 760px;
}

.employee-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.employee-search-form input {
    min-height: 54px;
    font-size: 1.02rem;
}

.employee-search-form .button {
    min-height: 54px;
    padding-inline: 22px;
}

.employee-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.employee-action-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 7px 12px;
    align-items: center;
    min-height: 118px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.employee-action-card:hover {
    transform: translateY(-1px);
    border-color: var(--green);
    box-shadow: var(--shadow);
}

.employee-action-card strong {
    color: var(--text);
    font-size: 1.02rem;
}

.employee-action-card small {
    grid-column: 2;
    color: var(--muted);
    line-height: 1.35;
}

.employee-action-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: var(--green-soft);
    color: var(--green);
}

.employee-action-icon .nav-icon {
    width: 26px;
    height: 26px;
}

.search-bucket {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.search-bucket:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.search-bucket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.search-bucket-head strong {
    font-size: 1rem;
}

.search-bucket-head span {
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 750;
}

.asset-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.asset-mini-card {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.asset-mini-card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow);
}

.asset-card-link {
    display: grid;
    justify-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}

.asset-mini-card img,
.asset-mini-card > span,
.asset-card-link > span {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    object-fit: contain;
}

.asset-mini-card > span,
.asset-card-link > span {
    color: var(--green);
}

.asset-mini-card > span .nav-icon,
.asset-card-link > span .nav-icon {
    width: 28px;
    height: 28px;
}

.asset-mini-card small {
    color: var(--muted);
}

.asset-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.asset-quick-actions .button {
    min-height: 38px;
    white-space: normal;
}

.asset-repair-action summary {
    cursor: pointer;
    list-style: none;
}

.asset-repair-action summary::-webkit-details-marker {
    display: none;
}

.asset-repair-action form {
    display: grid;
    gap: 8px;
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.job-service-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.job-service-summary div {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.job-service-summary span {
    color: var(--muted);
    font-weight: 750;
}

.job-service-summary strong {
    font-size: 1.8rem;
}

.job-cost-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.job-cost-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.job-cost-card h3,
.job-cost-card span,
.job-cost-card small {
    margin: 0;
}

.job-cost-card > div:first-child span,
.job-cost-total span,
.job-cost-breakdown span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.job-cost-card h3 {
    margin-top: 3px;
    font-size: 1.02rem;
}

.job-cost-total {
    display: grid;
    gap: 2px;
    padding: 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.08);
}

.job-cost-total strong {
    color: var(--green);
    font-size: 1.55rem;
}

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

.job-cost-breakdown div {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.job-cost-breakdown strong {
    color: var(--text);
}

.job-card-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.job-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.job-card:hover {
    border-color: var(--green);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.job-card-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--green-soft);
    color: var(--green);
}

.job-card-icon .nav-icon {
    width: 30px;
    height: 30px;
}

.job-card-main {
    display: grid;
    gap: 8px;
}

.job-card-title {
    display: grid;
    gap: 2px;
}

.job-card-title span {
    color: var(--muted);
    font-weight: 800;
    font-size: 0.82rem;
}

.job-card-title h3 {
    margin: 0;
    font-size: 1.08rem;
}

.job-card-main p {
    margin: 0;
    color: var(--muted);
}

.job-card-badges,
.job-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.job-card-actions {
    justify-content: flex-end;
}

.job-close-note {
    font-size: 0.88rem;
    font-weight: 750;
}

.panel > h2 + .muted,
.section-head .muted {
    margin-top: 6px;
}

.panel > .muted:first-child {
    margin-top: 0;
}

.panel > :last-child {
    margin-bottom: 0;
}

.stats-grid,
.two-column,
.detail-layout {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

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

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

.two-column {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.detail-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
}

.stat-card {
    position: relative;
    overflow: hidden;
    min-height: 130px;
    padding: 18px;
    display: block;
    box-shadow: var(--shadow-soft);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

a.stat-card {
    color: inherit;
    text-decoration: none;
}

.stat-card:hover {
    border-color: var(--green);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.stat-card span,
.stat-card small,
.muted,
small {
    color: var(--muted);
}

.stat-card strong {
    display: block;
    margin: 12px 0 7px;
    color: var(--green);
    font-size: 2.15rem;
    line-height: 1;
    font-weight: 850;
}

.stat-card small::after {
    content: " ->";
    color: var(--green-mid);
}

.stat-card-icon {
    padding-right: 72px;
}

.stat-icon {
    position: absolute;
    right: 18px;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--green-mid);
    opacity: 0.96;
}

.stat-icon .nav-icon {
    width: 44px;
    height: 44px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.95fr);
    gap: 18px;
    align-items: start;
}

.dashboard-main,
.dashboard-side {
    display: grid;
    gap: 18px;
}

.dashboard-side .quick-action-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.dashboard-panel {
    margin-bottom: 0;
}

.job-tabs {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.job-tabs a {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid rgba(var(--primary-rgb), 0.35);
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
}

.job-tabs a:hover,
.job-tabs a:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}

.undo-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--primary-rgb), 0.42);
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: var(--shadow-soft);
}

.undo-banner div {
    display: grid;
    gap: 2px;
}

.undo-banner span {
    color: var(--muted);
    font-size: 0.9rem;
}

.mobile-job-scan-panel {
    border-color: rgba(var(--primary-rgb), 0.42);
    background:
        linear-gradient(180deg, rgba(var(--primary-rgb), 0.07), transparent 12rem),
        var(--surface);
}

.big-scan-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 14px;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.56);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--primary-rgb), 0.06));
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.big-scan-button > span {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: rgb(var(--primary-rgb));
    color: #11100d;
}

.big-scan-button .nav-icon {
    width: 30px;
    height: 30px;
}

.big-scan-button strong {
    font-size: 1.15rem;
}

.big-scan-button small {
    color: var(--muted);
}

.job-scan-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.mobile-add-job-flow {
    scroll-margin-top: 18px;
}

.mobile-inline-add-panel {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.mobile-inline-add-panel h3,
.mobile-inline-add-panel p {
    margin: 0;
}

.mobile-consumable-add-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(90px, 0.5fr) minmax(150px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.mobile-consumable-add-form label {
    display: grid;
    gap: 7px;
    margin: 0;
    font-weight: 800;
}

.job-summary-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.job-summary-shortcuts a {
    display: grid;
    gap: 2px;
    min-height: 68px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.job-summary-shortcuts strong {
    color: rgb(var(--primary-rgb));
    font-size: 1.22rem;
}

.job-summary-shortcuts span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 750;
}

.consumable-review-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.consumable-review-summary span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--muted);
    font-size: 0.86rem;
}

.consumable-review-summary strong {
    color: var(--text);
}

.inline-form {
    margin: 0;
}

.job-note-form,
.closeout-checklist,
.job-note-list {
    display: grid;
    gap: 12px;
}

.job-note {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.job-note div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.job-note p {
    margin: 0;
    color: var(--text-soft);
}

.job-note small,
.closeout-summary span {
    color: var(--muted);
}

.checklist-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    font-weight: 720;
}

.checklist-row input {
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.closeout-summary {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(var(--green-rgb), 0.35);
    border-radius: 8px;
    background: rgba(var(--green-rgb), 0.08);
}

.closeout-summary p {
    margin: 0;
    color: var(--text-soft);
}

.mobile-bottom-actions {
    display: none;
}

.section-head.compact {
    align-items: center;
    margin-bottom: 12px;
}

.section-head.compact h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.section-head.compact .nav-icon {
    color: var(--green-mid);
}

.dashboard-table {
    margin-top: 0;
}

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

.permission-preview .table-wrap table {
    min-width: 520px;
}

.permission-preview td,
.permission-preview th {
    padding: 9px 10px;
    font-size: 0.85rem;
}

.permission-dot {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid currentColor;
    color: var(--red);
    font-size: 0;
}

.permission-dot::before {
    content: "x";
    font-size: 0.78rem;
    font-weight: 850;
}

.permission-dot.allowed {
    color: #74d45c;
}

.permission-dot.allowed::before {
    content: "\2713";
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.settings-link-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    min-height: 96px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.settings-link-card:hover {
    border-color: var(--green);
    transform: translateY(-1px);
}

.settings-link-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--green-mid);
}

.settings-link-icon .nav-icon {
    width: 26px;
    height: 26px;
}

.settings-link-card small {
    grid-column: 2;
}

.settings-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.inline-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin: 16px 0;
}

.settings-list {
    display: grid;
    gap: 10px;
}

.settings-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.settings-list-row > div {
    display: grid;
    gap: 7px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.settings-row-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    flex: 1 1 auto;
}

.settings-row-form-wide {
    grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr) auto auto;
}

.consumable-edit-form {
    grid-template-columns: 72px repeat(auto-fit, minmax(120px, 1fr));
    align-items: end;
}

.consumable-edit-photo {
    align-self: stretch;
    display: grid;
    place-items: center;
    width: 72px;
    min-height: 72px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--primary);
    overflow: hidden;
}

.consumable-edit-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consumable-edit-photo .nav-icon {
    width: 30px;
    height: 30px;
}

.compact-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.compact-field span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.compact-field.field-wide {
    grid-column: span 2;
}

.consumable-edit-form textarea {
    min-height: 42px;
}

.consumable-active-toggle {
    min-height: 42px;
    align-self: end;
}

.three-part-form {
    grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr) auto;
}

.sidebar-icon-form {
    display: grid;
    gap: 10px;
}

.sidebar-icon-form label {
    display: grid;
    grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.sidebar-icon-form label span {
    color: var(--muted);
    font-weight: 750;
}

.branding-form {
    display: grid;
    grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1fr) minmax(120px, 0.45fr) minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
}

.branding-form label,
.branding-preview {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

.branding-preview {
    align-self: stretch;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.branding-preview span {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.branding-preview img {
    width: 100%;
    max-height: 54px;
    object-fit: contain;
}

.compact-branding-preview img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.report-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
}

.report-filter-grid label {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

.report-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.availability-grid,
.employee-feed-summary,
.scan-feed-list,
.reorder-planning-list {
    display: grid;
    gap: 12px;
}

.availability-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.availability-card,
.employee-feed-card,
.scan-feed-row,
.reorder-plan-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.availability-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    text-align: center;
}

.availability-photo {
    display: grid;
    place-items: center;
    width: min(100%, 160px);
    aspect-ratio: 1;
    justify-self: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    overflow: hidden;
}

.availability-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.availability-photo .nav-icon {
    width: 54px;
    height: 54px;
    color: var(--primary);
}

.availability-body,
.employee-feed-card,
.reorder-plan-card {
    display: grid;
    gap: 7px;
}

.availability-body span,
.availability-body small,
.employee-feed-card small,
.scan-feed-row small,
.reorder-plan-card small {
    color: var(--muted);
}

.availability-badges,
.employee-feed-card div,
.reorder-plan-metrics,
.problem-signals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.availability-shop-toggle {
    min-height: 38px;
    align-items: center;
}

.employee-feed-summary {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.employee-feed-card {
    padding: 14px;
}

.employee-feed-card div {
    justify-content: flex-start;
}

.employee-feed-card span,
.reorder-plan-metrics span {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 0.8rem;
}

.employee-feed-card b,
.reorder-plan-metrics strong {
    color: var(--text);
}

.scan-feed-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
}

.scan-feed-photo,
.reorder-plan-title img,
.reorder-plan-title .nav-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    overflow: hidden;
}

.scan-feed-photo img,
.reorder-plan-title img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scan-feed-topline {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
}

.scan-feed-row p {
    margin: 6px 0 2px;
    font-weight: 800;
}

.reorder-plan-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
}

.reorder-plan-title {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: var(--text);
    text-decoration: none;
}

.reorder-plan-title span {
    display: grid;
    gap: 4px;
}

.reorder-plan-metrics {
    justify-content: flex-start;
}

.reorder-plan-form {
    grid-template-columns: minmax(90px, 0.45fr) minmax(140px, 0.7fr) minmax(160px, 1fr) auto;
}

.problem-item-list {
    display: grid;
    gap: 10px;
}

.problem-item-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.problem-item-card.high {
    border-color: var(--red);
}

.problem-item-card.medium {
    border-color: var(--amber);
}

.problem-score {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--primary);
    font-weight: 900;
}

.problem-item-card.high .problem-score {
    color: var(--red);
}

.problem-item-card.medium .problem-score {
    color: var(--amber);
}

.problem-item-card > div:nth-child(2) {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.problem-item-card strong,
.problem-item-card span,
.problem-item-card small {
    overflow-wrap: anywhere;
}

.problem-item-card span,
.problem-item-card small {
    color: var(--muted);
}

.problem-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.problem-signals span {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
}

.cleaning-queue {
    display: grid;
    gap: 16px;
}

.cleaning-job-group {
    display: grid;
    gap: 14px;
    margin-bottom: 0;
}

.cleaning-job-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.cleaning-job-head p {
    margin: 6px 0 0;
}

.cleaning-job-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cleaning-batch-form {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(160px, 0.8fr) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.cleaning-select-item {
    display: grid;
    gap: 4px;
    justify-items: center;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.cleaning-select-item input {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}

.cleaning-item-list {
    display: grid;
    gap: 10px;
}

.cleaning-item-row {
    display: grid;
    grid-template-columns: 42px 58px minmax(0, 1fr) minmax(190px, 230px);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.cleaning-row-media img,
.cleaning-row-media .empty-thumb {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    object-fit: contain;
}

.cleaning-row-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cleaning-row-main span,
.cleaning-row-main p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.cleaning-row-main strong {
    overflow-wrap: anywhere;
}

.cleaning-row-actions,
.repair-inline-form {
    display: grid;
    gap: 8px;
}

.repair-queue-list {
    display: grid;
    gap: 12px;
}

.repair-queue-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) minmax(300px, 0.9fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.repair-queue-card.repeat-problem {
    border-color: var(--red);
}

.repair-card-media {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--blue);
}

.repair-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.repair-card-media .nav-icon {
    width: 32px;
    height: 32px;
}

.repair-card-main,
.repair-card-actions,
.repair-stage-form {
    display: grid;
    gap: 8px;
}

.repair-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.repair-card-main p {
    margin: 0;
    color: var(--muted);
}

.repair-metrics,
.repair-card-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.repair-metrics span:not(.status) {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.repair-stage-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
}

.repair-stage-form .span-2 {
    grid-column: span 2;
}

.repair-summary-list {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.repair-summary-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.repair-summary-list span {
    color: var(--muted);
    font-weight: 750;
}

.app-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    margin: 26px calc(clamp(18px, 2.6vw, 36px) * -1) 0;
    padding: 18px clamp(18px, 2.6vw, 36px);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.88rem;
}

.app-footer span:nth-child(2) {
    color: var(--text-soft);
    font-weight: 700;
}

.app-footer span:last-child {
    text-align: right;
}

.stat-card strong.amber {
    color: var(--amber);
}

.stat-card strong.red,
.large-money {
    color: var(--red);
}

.large-money {
    margin: 22px 0;
    font-size: 2.2rem;
    font-weight: 800;
}

.large-money + .muted {
    margin-top: -12px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--green-mid), var(--green));
    color: #fff;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, var(--shadow-soft);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.segmented input:focus-visible + span,
.checkbox-label:focus-within {
    outline: 0;
    border-color: var(--green);
    box-shadow: var(--ring);
}

.button:active {
    transform: translateY(0);
}

.button.secondary {
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
}

.button.secondary:hover {
    border-color: var(--border-strong);
    background: var(--surface-wash);
}

.button.danger {
    background: linear-gradient(180deg, #d83a31, var(--red));
    color: #fff;
}

.button.small {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.9rem;
}

.button.full {
    width: 100%;
}

.theme-toggle {
    white-space: nowrap;
}

.notice {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 700;
}

.notice.success {
    background: var(--green-soft);
    border-color: var(--border-strong);
    color: var(--green);
}

.notice.error {
    background: var(--red-soft);
    border-color: var(--border-strong);
    color: var(--red);
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

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

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

th {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--muted);
    background: linear-gradient(180deg, var(--surface-wash), var(--surface-soft));
    white-space: nowrap;
}

tr:last-child td {
    border-bottom: 0;
}

tbody tr {
    transition: background 120ms ease;
}

tbody tr:hover {
    background: var(--surface-wash);
}

.item-thumb {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--border);
    background: var(--surface-soft);
}

.empty-thumb {
    display: inline-grid;
    place-items: center;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    text-align: center;
}

.user-result-panel {
    text-align: center;
}

.user-result-panel .section-head {
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.user-result-panel .filter-bar {
    justify-content: center;
    width: 100%;
}

.user-result-panel .filter-bar input,
.user-result-panel .filter-bar select,
.user-result-panel .filter-bar button,
.user-result-panel .filter-bar .button {
    width: min(100%, 520px);
}

.user-item-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.user-item-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.user-item-photo {
    display: grid;
    place-items: center;
    width: min(190px, 100%);
    max-width: 190px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    overflow: hidden;
}

.user-item-photo img {
    width: 100%;
    height: 100%;
    max-width: 190px;
    max-height: 190px;
    object-fit: contain;
}

.user-item-photo span {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background: var(--green-soft);
    color: var(--green);
}

.user-item-photo .nav-icon {
    width: 30px;
    height: 30px;
}

.user-item-card h3 {
    margin: 2px 0 0;
    font-size: 1.12rem;
}

.user-item-model {
    margin: 0;
    color: var(--text-soft);
    font-weight: 700;
}

.user-item-status {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-item-action {
    width: 100%;
}

.disabled-button {
    cursor: not-allowed;
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--muted);
    box-shadow: none;
}

.user-item-meta {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 0.92rem;
}

.centered-empty {
    grid-column: 1 / -1;
    text-align: center;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 700;
    border: 1px solid transparent;
    line-height: 1;
}

.condition {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1;
}

.condition-new {
    background: var(--green-soft);
    border-color: var(--border-strong);
    color: var(--green);
}

.condition-good {
    background: var(--good-green-yellow-soft);
    border-color: var(--border-strong);
    color: var(--good-green-yellow);
}

.condition-fair {
    background: var(--amber-soft);
    border-color: var(--border-strong);
    color: var(--amber);
}

.condition-damaged {
    background: var(--red-soft);
    border-color: var(--border-strong);
    color: var(--red);
}

.status-available,
.status-active {
    background: var(--green-soft);
    border-color: var(--border-strong);
    color: var(--green);
}

.status-checked-out {
    background: var(--red-soft);
    border-color: var(--border-strong);
    color: var(--red);
}

.status-needs-cleaning {
    background: var(--amber-soft);
    border-color: var(--border-strong);
    color: var(--amber);
}

.status-needs-repair {
    background: var(--blue-soft);
    border-color: var(--border-strong);
    color: var(--blue);
}

.status-diagnosing,
.status-in-house,
.status-in-progress,
.status-open,
.status-waiting-parts,
.status-sent-vendor,
.status-repaired-cleaning {
    background: var(--blue-soft);
    border-color: var(--border-strong);
    color: var(--blue);
}

.status-complete {
    background: var(--green-soft);
    border-color: var(--border-strong);
    color: var(--green);
}

.status-retired,
.status-archive,
.status-archived {
    background: var(--red-soft);
    border-color: var(--border-strong);
    color: var(--red);
}

.status-po-line-received {
    background: var(--green-soft);
    border-color: var(--border-strong);
    color: var(--green);
}

.status-po-line-pending,
.status-po-line-backordered {
    background: var(--amber-soft);
    border-color: var(--border-strong);
    color: var(--amber);
}

.status-po-line-damaged,
.status-po-line-wrong-item,
.status-po-line-cancelled {
    background: var(--red-soft);
    border-color: var(--border-strong);
    color: var(--red);
}

.status-low-stock {
    background: var(--amber-soft);
    border-color: var(--border-strong);
    color: var(--amber);
}

.status-role-admin {
    background: var(--blue-soft);
    border-color: var(--border-strong);
    color: var(--blue);
}

.status-role-manager {
    background: var(--amber-soft);
    border-color: var(--border-strong);
    color: var(--amber);
}

.status-role-accounting {
    background: var(--green-soft);
    border-color: var(--border-strong);
    color: var(--green);
}

.check-pending {
    background: var(--surface-soft);
    color: var(--muted);
}

.check-accounted {
    background: var(--green-soft);
    color: var(--green);
}

.check-missing,
.check-damaged {
    background: var(--red-soft);
    color: var(--red);
}

.check-needs-repair {
    background: var(--blue-soft);
    color: var(--blue);
}

.check-needs-cleaning {
    background: var(--amber-soft);
    color: var(--amber);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.form-grid.single {
    grid-template-columns: 1fr;
}

.form-grid label,
.scan-form label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-weight: 700;
}

.form-field-block {
    display: grid;
    gap: 8px;
}

.field-label {
    color: var(--text);
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

select {
    cursor: pointer;
}

input::placeholder,
textarea::placeholder {
    color: #98a39e;
}

textarea {
    resize: vertical;
}

.span-2,
.form-actions {
    grid-column: span 2;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-bar,
.row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-bar input {
    min-width: min(340px, 100%);
}

.filter-bar select {
    width: auto;
}

.checkbox-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-soft);
}

.checkbox-line input {
    width: auto;
    min-height: 0;
    accent-color: var(--green);
}

.money-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(245, 181, 46, 0.45);
    border-radius: 999px;
    background: rgba(245, 181, 46, 0.12);
    color: var(--gold);
    white-space: nowrap;
}

.alert-card {
    border-color: rgba(199, 47, 38, 0.55);
}

.low-stock-panel {
    border-color: rgba(184, 100, 0, 0.38);
}

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

.low-stock-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr);
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.low-stock-row:hover {
    border-color: var(--amber);
    box-shadow: var(--shadow);
}

.low-stock-row span {
    color: var(--muted);
}

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

.reorder-row > a {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr);
    gap: 10px;
    align-items: center;
}

.reorder-request-form,
.receive-reorder-form {
    display: grid;
    grid-template-columns: minmax(90px, 0.4fr) minmax(130px, 0.8fr) auto;
    gap: 8px;
    align-items: end;
}

.reorder-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.reorder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.reorder-card > div {
    display: grid;
    gap: 4px;
}

.reorder-card span,
.reorder-card small {
    color: var(--muted);
}

.category-chip-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-soft);
    font-weight: 750;
}

.category-chip:hover,
.category-chip.active {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green-dark);
}

.activity-list,
.timeline,
.cost-lines {
    display: grid;
    gap: 0;
    margin-top: 14px;
}

.activity-row,
.timeline-item,
.cost-lines div {
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}

.activity-row {
    display: grid;
    grid-template-columns: 150px 90px minmax(0, 1fr);
    gap: 12px;
}

.activity-row p,
.timeline-item p {
    margin: 0;
}

.activity-row span,
.timeline-item span {
    color: var(--muted);
    font-size: 0.9rem;
}

.cost-lines strong,
.activity-row strong,
.timeline-item strong {
    color: var(--text-soft);
}

.cost-lines div {
    display: flex;
    justify-content: space-between;
}

.scan-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px;
}

.recent-scan-card {
    margin-top: 18px;
}

.scanner-panel {
    background:
        linear-gradient(180deg, rgba(var(--primary-rgb), 0.06), transparent 13rem),
        var(--surface);
}

.scanner-panel .section-head {
    margin-bottom: 10px;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 22% 20%, rgba(var(--primary-rgb), 0.22), transparent 22rem),
        linear-gradient(135deg, var(--sidebar) 0%, var(--sidebar-soft) 58%, var(--bg) 58%);
}

.login-card {
    width: min(420px, 100%);
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.login-brand {
    color: var(--text);
    margin-bottom: 18px;
}

.scan-status {
    margin: -24px -24px 18px;
    padding: 15px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, var(--green-dark), var(--green-mid));
    color: #fff;
    text-align: center;
    font-weight: 800;
}

.item-summary {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 18px;
    background: var(--surface-raised);
}

.item-summary.wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 16px;
}

.item-summary div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-raised), var(--surface-wash));
}

.item-summary div:nth-last-child(-n + 1) {
    border-bottom: 0;
}

.item-summary span {
    color: var(--muted);
    font-weight: 700;
}

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

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

.segmented label {
    display: block;
}

.segmented input {
    position: absolute;
    opacity: 0;
}

.segmented span {
    display: grid;
    place-items: center;
    min-height: 50px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--field-bg);
    color: var(--muted);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}

.segmented input:checked + span {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
    font-weight: 800;
}

.photo-grid,
.label-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.photo-grid figure,
.qr-label {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-soft);
    box-shadow: var(--shadow-soft);
}

.photo-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
}

.featured-photo {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 14px 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-raised);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-soft);
}

.featured-photo img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}

.featured-photo span {
    padding: 0 12px 12px;
    color: var(--muted);
    font-weight: 700;
}

.photo-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.photo-viewer {
    width: min(900px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

.photo-viewer::backdrop {
    background: rgba(5, 12, 10, 0.72);
}

.photo-viewer img {
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    display: block;
    border-radius: 6px;
    background: var(--surface-soft);
}

.photo-viewer p {
    margin: 10px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.photo-viewer-close {
    float: right;
    margin-bottom: 10px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.action-confirm-dialog {
    width: min(420px, calc(100vw - 28px));
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow);
}

.action-confirm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.68);
}

.action-confirm-dialog form {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.action-confirm-dialog h2 {
    margin: 0;
}

.action-confirm-dialog p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.photo-grid figcaption,
.qr-label {
    padding: 10px;
}

.qr-label {
    display: grid;
    gap: 8px;
    break-inside: avoid;
}

.qr-label img {
    width: 150px;
    height: 150px;
    display: block;
    justify-self: center;
    object-fit: contain;
}

.qr-label strong {
    font-size: 1.25rem;
}

.break-word {
    word-break: break-word;
}

.check-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.inventory-printout {
    display: none;
}

.check-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) repeat(4, minmax(130px, 0.8fr)) minmax(160px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.check-row:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.check-item-title {
    display: grid;
    gap: 6px;
}

.check-item-title span,
.check-row small,
.check-row p {
    color: var(--muted);
}

.check-row p {
    margin: 6px 0 0;
}

.check-row label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.check-row-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.scanner-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}

.qr-reader {
    min-height: 280px;
    margin-bottom: 12px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgba(var(--primary-rgb), 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(var(--primary-rgb), 0.05) 25%, transparent 25%),
        var(--surface-soft);
    background-size: 18px 18px;
}

.qr-reader video {
    width: 100% !important;
}

.scanner-note {
    margin: 10px 0 0;
}

.form-help {
    margin: -4px 0 0;
}

.manual-scan-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.compact-activity {
    grid-template-columns: 110px 90px minmax(0, 1fr);
}

.danger-panel {
    border-color: #f0b8b4;
}

.attachment-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.attachment-row {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.attachment-row span,
.attachment-row small {
    color: var(--muted);
}

.sds-card-list {
    display: grid;
    gap: 12px;
}

.sds-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.sds-card-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.sds-icon,
.sds-product-photo {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--primary);
}

.sds-product-photo {
    overflow: hidden;
}

.sds-product-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sds-product-photo .nav-icon,
.sds-icon .nav-icon {
    width: 28px;
    height: 28px;
}

.sds-card h3 {
    margin: 0 0 8px;
    line-height: 1.2;
}

.sds-symbols,
.sds-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sds-symbols {
    align-items: center;
}

.ghs-pictogram {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 4px;
    background: #fff;
    color: #080808;
    border: 4px solid #d82020;
    transform: rotate(45deg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), var(--shadow-soft);
}

.ghs-pictogram i {
    transform: rotate(-45deg);
    font-size: 1rem;
}

.ghs-pictogram.image-pictogram {
    width: 46px;
    height: 46px;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.ghs-pictogram.image-pictogram img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ghs-pictogram.small {
    width: 34px;
    height: 34px;
    margin: 0;
    border-width: 3px;
    box-shadow: none;
}

.ghs-pictogram.small i {
    font-size: 0.82rem;
}

.ghs-pictogram.image-pictogram.small {
    width: 34px;
    height: 34px;
}

.sds-card-main {
    min-width: 0;
}

.sds-card-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
    gap: 12px;
    align-items: start;
}

.sds-card-title-block {
    min-width: 0;
}

.sds-ppe-summary,
.sds-first-aid-panel {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.sds-ppe-summary strong,
.sds-first-aid-panel > strong {
    display: block;
    margin-bottom: 7px;
}

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

.sds-detail-grid > div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.sds-detail-grid strong {
    display: block;
    margin-bottom: 6px;
}

.sds-detail-grid p {
    margin: 0;
    color: var(--text-soft);
}

.sds-form-subhead {
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

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

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

.sds-ghs-option,
.sds-ppe-option {
    display: grid;
    grid-template-columns: auto 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.2;
}

.sds-ghs-option {
    grid-template-columns: auto 42px minmax(0, 1fr);
    min-height: 56px;
}

.sds-ghs-option input,
.sds-ppe-option input {
    width: auto;
    min-height: 0;
    accent-color: var(--primary);
}

.sds-ppe-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--primary);
}

.sds-ppe-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sds-ppe-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--text-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

.sds-ppe-pill i {
    color: var(--primary);
}

.sds-first-aid-list {
    display: grid;
    gap: 8px;
}

.sds-first-aid-list section {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.sds-first-aid-list span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
}

.sds-first-aid-list p {
    margin: 0;
}

.sds-first-aid-legacy {
    border-style: dashed;
}

.sds-edit-details summary {
    width: fit-content;
    cursor: pointer;
    list-style: none;
}

.sds-edit-details summary::-webkit-details-marker {
    display: none;
}

.sds-edit-details form {
    margin-top: 12px;
}

.sds-icon-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.sds-icon-settings-form h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.sds-icon-setting-row {
    display: grid;
    grid-template-columns: 44px minmax(120px, 0.8fr) minmax(160px, 1fr) minmax(180px, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
}

.sds-icon-setting-row > span:nth-child(2) {
    color: var(--text);
    font-weight: 700;
}

.job-item-search {
    margin-top: 16px;
}

.select-item-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.consumable-actions {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.consumable-add-form {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.consumable-add-form h3 {
    margin: 0;
    color: var(--text);
}

.quantity-quick-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
}

.quantity-quick-buttons .button {
    min-height: 42px;
}

.consumable-workflow-panel .scanner-layout {
    align-items: start;
}

.stock-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 750;
    line-height: 1;
}

.stock-badge.stock-ok {
    background: var(--green-soft);
    color: var(--green-dark);
}

.stock-badge.stock-low {
    background: var(--amber-soft);
    color: var(--amber);
}

.bulk-checkout-form {
    display: grid;
    gap: 14px;
}

.bulk-checkout-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
}

.bulk-select-row {
    grid-template-columns: auto minmax(0, 1fr);
    cursor: pointer;
}

.job-add-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    cursor: default;
}

.bulk-select-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.job-row-add-form {
    margin: 0;
}

.bulk-select-checkbox {
    width: 22px;
    height: 22px;
    align-self: center;
    accent-color: var(--green);
}

.select-item-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) minmax(155px, 0.8fr) minmax(140px, 0.7fr) minmax(140px, 0.8fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.select-item-row:hover {
    border-color: var(--green);
    box-shadow: var(--shadow);
}

.select-item-row > div {
    display: grid;
    gap: 5px;
}

.select-item-row span {
    color: var(--muted);
}

.select-item-row label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.select-item-row.job-add-row {
    grid-template-columns: 68px auto minmax(0, 1fr) auto;
    align-items: center;
}

.job-add-media {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: rgb(var(--primary-rgb));
}

.job-add-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.job-add-media .nav-icon {
    width: 28px;
    height: 28px;
}

.select-item-row .bulk-select-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    white-space: nowrap;
}

.setup-check-list,
.smoke-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.setup-check-row,
.smoke-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.setup-check-row p,
.smoke-row span {
    margin: 4px 0 0;
}

.smoke-row input {
    width: auto;
    min-height: 0;
    margin-top: 3px;
}

.export-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.job-return-details {
    display: inline-block;
    margin-right: 6px;
}

.job-return-details summary {
    list-style: none;
}

.job-return-details summary::-webkit-details-marker {
    display: none;
}

.job-return-form {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 8px;
    width: min(320px, calc(100vw - 40px));
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

.job-return-form label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.user-list {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.user-admin-row {
    display: grid;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.user-admin-row:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.user-row-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background:
        linear-gradient(90deg, rgba(var(--primary-rgb), 0.08), transparent 34%),
        var(--surface-soft);
    border-bottom: 1px solid var(--border);
}

.user-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
    color: #fff;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.user-identity {
    display: grid;
    gap: 4px;
}

.user-identity span {
    color: var(--muted);
}

.user-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-row-body {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.compact-form {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(120px, 0.7fr) minmax(130px, 0.6fr) auto;
    margin-top: 0;
    align-items: end;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.checkbox-label input {
    width: auto;
    min-height: 0;
}

.permission-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    color: var(--muted);
    font-weight: 750;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.permission-toggle input {
    width: auto;
    min-height: 0;
    accent-color: var(--green);
}

.permission-toggle:has(input:checked) {
    border-color: var(--green);
    background: var(--green-soft);
    color: var(--green);
}

.permission-actions {
    margin-top: 16px;
}

.inline-actions {
    grid-column: auto;
    align-self: end;
}

.reset-form {
    display: grid;
    grid-template-columns: minmax(180px, 280px) auto;
    gap: 8px;
    align-items: end;
    max-width: 460px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.reset-form label {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

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

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

    .sidebar {
        position: static;
        height: auto;
        padding: 16px;
    }

    .brand {
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .sidebar nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sidebar nav a,
    .nav-group summary {
        min-height: 40px;
    }

    .nav-group {
        min-width: 0;
    }

    .main {
        padding: 18px;
    }

    .topbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .global-search {
        width: 100%;
    }

    .stats-grid,
    .stats-grid.compact,
    .two-column,
    .detail-layout,
    .dashboard-grid,
    .settings-two-column {
        grid-template-columns: 1fr;
    }

    .dashboard-side {
        grid-template-columns: 1fr;
    }

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

    .employee-action-grid {
        grid-template-columns: 1fr;
    }

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

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

    .report-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    body {
        font-size: 14px;
    }

    .topbar,
    .section-head,
    .action-panel,
    .topbar-actions,
    .filter-bar,
    .row-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .topbar {
        display: grid;
    }

    .topbar .button,
    .topbar-actions,
    .global-search,
    .user-chip,
    .filter-bar select,
    .filter-bar button {
        width: 100%;
    }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .brand {
        min-height: auto;
        margin-bottom: 10px;
        padding: 0 4px 10px;
    }

    .brand-logo {
        width: 34px;
        height: 34px;
    }

    .brand-logo svg {
        width: 27px;
        height: 27px;
    }

    .brand-image {
        max-width: 142px;
        max-height: 42px;
    }

    .brand-text small {
        display: none;
    }

    .sidebar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-height: 46vh;
        overflow-y: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .sidebar nav a,
    .nav-group summary {
        min-height: 38px;
        padding-inline: 10px;
        font-size: 0.88rem;
    }

    .nav-group {
        align-self: start;
    }

    .nav-group summary > a {
        padding-inline: 0;
    }

    .nav-children {
        padding-left: 10px;
    }

    .sidebar nav .nav-child {
        white-space: normal;
    }

    .nav-icon {
        width: 18px;
        height: 18px;
    }

    .main {
        padding: 14px;
    }

    .topbar {
        margin-bottom: 16px;
        padding-bottom: 14px;
    }

    .user-home-actions,
    .employee-search-form,
    .employee-action-grid,
    .job-cost-grid,
    .job-cost-breakdown,
    .compact-cards,
    .user-item-card-list,
    .asset-card-list,
    .job-card,
    .reorder-card,
    .reorder-row > a,
    .reorder-request-form,
    .receive-reorder-form {
        grid-template-columns: 1fr;
    }

    .employee-search-hero {
        padding: 16px;
    }

    .employee-search-copy {
        text-align: center;
    }

    .employee-search-copy h2 {
        font-size: 1.3rem;
    }

    .employee-search-form .button {
        width: 100%;
    }

    .employee-action-card {
        min-height: 104px;
        padding: 14px;
    }

    .search-bucket-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-item-card {
        padding: 14px;
    }

    .user-item-photo {
        width: min(148px, 58vw);
        max-width: 148px;
    }

    .user-item-photo img {
        max-width: 148px;
        max-height: 148px;
    }

    .user-item-photo span {
        width: 48px;
        height: 48px;
    }

    .user-item-photo .nav-icon {
        width: 26px;
        height: 26px;
    }

    .user-result-panel .filter-bar {
        align-items: center;
    }

    .job-card {
        justify-items: center;
        text-align: center;
    }

    .job-card-actions,
    .job-card-badges {
        justify-content: center;
    }

    .job-card-actions,
    .job-card-actions .button,
    .job-card-actions form,
    .job-card-actions form .button {
        width: 100%;
    }

    .topbar-title h1 {
        font-size: 1.35rem;
    }

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

    .global-search .button {
        grid-column: 1 / -1;
    }

    .topbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .topbar-actions .user-chip {
        grid-column: 1 / -1;
    }

    .panel {
        padding: 16px;
    }

    .undo-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .undo-banner .button {
        width: 100%;
    }

    .form-grid,
    .item-summary.wide,
    .segmented {
        grid-template-columns: 1fr;
    }

    .span-2,
    .form-actions {
        grid-column: span 1;
    }

    .activity-row {
        grid-template-columns: 1fr;
    }

    .scan-card {
        padding: 18px;
    }

    .scan-status {
        margin: -18px -18px 16px;
    }

    .scan-form input,
    .scan-form select,
    .scan-form textarea,
    .scan-form .button,
    .manual-scan-form input,
    .manual-scan-form select,
    .manual-scan-form textarea,
    .manual-scan-form .button {
        min-height: 52px;
        font-size: 1rem;
    }

    .scan-form > .button.full,
    .manual-scan-form .button.full {
        position: sticky;
        bottom: 12px;
        z-index: 4;
        min-height: 56px;
        box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.24);
    }

    .item-summary div {
        grid-template-columns: 1fr;
    }

    .check-row {
        grid-template-columns: 1fr;
    }

    .check-row-actions {
        justify-items: stretch;
    }

    .scanner-layout {
        grid-template-columns: 1fr;
    }

    .compact-form,
    .reset-form,
    .address-input-row,
    .select-item-row,
    .bulk-checkout-controls {
        grid-template-columns: 1fr;
    }

    .select-item-row.job-add-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .job-add-media {
        width: 64px;
        height: 64px;
        max-height: none;
        justify-self: center;
    }

    .select-item-row .bulk-select-pick {
        justify-content: flex-start;
        white-space: normal;
    }

    .job-row-add-form .button {
        width: 100%;
    }

    .mobile-bottom-actions {
        position: sticky;
        bottom: 10px;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        gap: 6px;
        margin: 18px 0 0;
        padding: 8px;
        border: 1px solid rgba(var(--primary-rgb), 0.4);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
        backdrop-filter: blur(16px);
    }

    .mobile-bottom-actions a {
        display: grid;
        justify-items: center;
        gap: 4px;
        min-height: 52px;
        padding: 7px 4px;
        border-radius: 7px;
        color: var(--text);
        text-decoration: none;
        font-size: 0.76rem;
        font-weight: 800;
    }

    .mobile-bottom-actions a:first-child {
        background: rgb(var(--primary-rgb));
        color: #11100d;
    }

    .mobile-bottom-actions .nav-icon {
        width: 21px;
        height: 21px;
    }

    .inline-actions {
        grid-column: span 1;
    }

    .user-row-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .user-badges {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

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

    .stat-card {
        min-height: 116px;
        padding: 14px;
        padding-right: 54px;
    }

    .stat-card strong {
        font-size: 1.85rem;
    }

    .stat-icon {
        right: 12px;
        bottom: 16px;
        width: 38px;
        height: 38px;
    }

    .stat-icon .nav-icon {
        width: 32px;
        height: 32px;
    }

    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-side .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .quick-action-card {
        min-height: 82px;
    }

    .job-tabs {
        margin-inline: -2px;
        padding-bottom: 6px;
    }

    .job-tabs a {
        padding: 9px 12px;
        font-size: 0.84rem;
    }

    .mobile-job-scan-panel .quick-action-card {
        grid-template-columns: 42px minmax(0, 1fr);
        min-height: 76px;
        padding: 12px;
    }

    .big-scan-button {
        padding: 14px;
    }

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

    .consumable-review-summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .job-note div {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-grid,
    .inline-create-form,
    .branding-form,
    .report-filter-grid,
    .settings-row-form,
    .settings-row-form-wide,
    .consumable-edit-form,
    .sidebar-icon-form label {
        grid-template-columns: 1fr;
    }

    .asset-quick-actions,
    .sds-card-title-row,
    .sds-detail-grid,
    .sds-ghs-grid,
    .sds-ppe-grid,
    .sds-icon-settings-form,
    .sds-icon-setting-row {
        grid-template-columns: 1fr;
    }

    .consumable-edit-photo {
        width: 86px;
        min-height: 86px;
    }

    .compact-field.field-wide {
        grid-column: 1;
    }

    .report-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .mobile-consumable-add-form,
    .reorder-plan-form,
    .scan-feed-row {
        grid-template-columns: 1fr;
    }

    .scan-feed-photo {
        justify-self: center;
        width: 86px;
        height: 86px;
    }

    .scan-feed-row .button {
        width: 100%;
    }

    .scan-feed-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .problem-item-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .problem-item-card .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .settings-list-row {
        align-items: stretch;
        flex-direction: column;
    }

    .cleaning-job-head {
        align-items: stretch;
        flex-direction: column;
    }

    .cleaning-job-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cleaning-batch-form,
    .repair-queue-card,
    .repair-stage-form {
        grid-template-columns: 1fr;
    }

    .cleaning-item-row {
        grid-template-columns: auto 54px minmax(0, 1fr);
        align-items: start;
    }

    .cleaning-row-media img,
    .cleaning-row-media .empty-thumb {
        width: 54px;
        height: 54px;
    }

    .cleaning-row-actions {
        grid-column: 1 / -1;
    }

    .repair-card-media {
        width: 64px;
        height: 64px;
    }

    .repair-card-actions .button,
    .repair-card-buttons .button {
        width: 100%;
    }

    .repair-card-buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .repair-inline-form select,
    .cleaning-row-actions .button {
        min-height: 52px;
        font-size: 1rem;
    }

    .app-footer {
        grid-template-columns: 1fr;
        margin-inline: -14px;
        padding: 16px 14px;
        text-align: left;
    }

    .app-footer span:last-child {
        text-align: left;
    }

    .photo-viewer {
        width: calc(100vw - 20px);
        padding: 10px;
    }

    .featured-photo img {
        max-height: 220px;
    }

    .photo-grid,
    .label-grid {
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        gap: 10px;
    }

    .photo-grid img {
        aspect-ratio: 1 / 1;
    }

.qr-label img {
    max-width: 112px;
    max-height: 112px;
    margin-inline: auto;
}

.po-create-panel,
.po-detail-panel,
.po-list-panel {
    scroll-margin-top: 18px;
}

.po-form {
    display: grid;
    gap: 18px;
}

.po-lines {
    display: grid;
    gap: 10px;
}

.po-line-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(86px, 0.5fr) minmax(110px, 0.6fr) minmax(140px, 1fr);
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.po-line-head {
    padding-block: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.po-line-row label {
    margin: 0;
}

.po-line-row label span {
    display: none;
}

.po-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.po-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.po-card-top,
.po-card-meta,
.po-detail-grid,
.po-meta-grid {
    display: grid;
    gap: 10px;
}

.po-card-top {
    grid-template-columns: 1fr auto;
    align-items: start;
}

.po-card-top div,
.po-card-meta {
    min-width: 0;
}

.po-card-top span,
.po-card p,
.po-card-meta span,
.po-meta-grid span {
    color: var(--muted);
}

.po-card h3,
.po-card p {
    margin: 0;
}

.po-void {
    opacity: 0.72;
}

.po-void .po-number,
.po-void-text {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--red);
}

.po-void .po-number {
    color: var(--muted);
}

.po-card-meta {
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
}

.po-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    align-items: start;
}

.po-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.po-meta-grid div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.po-notes {
    margin-top: 14px;
    padding: 12px;
    border-left: 3px solid var(--primary);
    background: var(--surface-muted);
}

.po-receipt {
    display: grid;
    gap: 8px;
    text-align: center;
}

.po-receipt img {
    width: 100%;
    max-height: 220px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.po-status-form {
    margin-top: 14px;
}

.po-line-table {
    margin-top: 16px;
}

.po-receive-form {
    margin: 0;
}

.po-line-status-form {
    display: grid;
    grid-template-columns: minmax(130px, 0.75fr) minmax(150px, 1fr) auto;
    gap: 8px;
    align-items: end;
    margin: 0;
    min-width: min(100%, 460px);
}

.po-line-status-form.compact {
    grid-template-columns: minmax(120px, 1fr);
    max-width: 260px;
}

.po-line-status-form label {
    display: grid;
    gap: 4px;
    margin: 0;
}

.po-line-status-form label span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.po-line-status-form select,
.po-line-status-form input {
    min-height: 38px;
}

.receive-toggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 36px;
    margin: 0;
    font-weight: 800;
    color: var(--text);
}

.receive-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

.po-received-meta {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    line-height: 1.25;
}

.po-filter-bar {
    margin-bottom: 16px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.vendor-followup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.vendor-followup-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.vendor-followup-card:hover,
.vendor-followup-card:focus-visible {
    border-color: var(--primary);
    box-shadow: var(--shadow-soft);
}

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

.vendor-followup-card em {
    color: var(--primary);
    font-style: normal;
    font-weight: 900;
}
}

@media print {
    @page {
        margin: 0.35in;
    }

    .sidebar,
    .topbar,
    .notice,
    .section-head .button,
    .app-footer,
    .no-print {
        display: none;
    }

    .app-shell {
        display: block;
    }

    .main {
        padding: 0;
    }

    .panel {
        box-shadow: none;
        border: 0;
        padding: 0;
        background: #fff;
        color: #000;
    }

    .label-grid {
        grid-template-columns: repeat(auto-fill, minmax(1.85in, 1fr));
        gap: 0.14in;
        align-items: start;
    }

    .qr-label {
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 0.05in;
        min-height: 2.35in;
        padding: 0.12in;
        overflow: visible;
        border: 1px solid #bbb;
        border-radius: 0;
        background: #fff;
        color: #000;
        box-shadow: none;
        text-align: center;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .qr-label img {
        width: 1.35in;
        height: 1.35in;
        max-width: 100%;
        display: block;
        object-fit: contain;
        justify-self: center;
    }

    .qr-label strong,
    .qr-label span,
    .qr-label small {
        width: 100%;
        color: #000;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .qr-label strong {
        font-size: 12pt;
    }

    .qr-label span {
        font-size: 8.5pt;
    }

    .qr-label small {
        font-size: 5.5pt;
    }

    .inventory-printout {
        display: block;
        color: #000;
    }

    .inventory-printout h1 {
        margin: 0 0 6px;
        font-size: 18pt;
    }

    .inventory-printout p {
        margin: 0 0 12px;
        color: #333;
    }

    .inventory-printout table {
        width: 100%;
        border-collapse: collapse;
        font-size: 8.5pt;
    }

    .inventory-printout th,
    .inventory-printout td {
        padding: 5px;
        border: 1px solid #999;
        color: #000;
        vertical-align: top;
    }

    .inventory-printout th {
        background: #eee;
    }

    .audit-check-box::before {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        margin: 0 auto;
        border: 1.5px solid #000;
    }
}

.po-create-panel,
.po-detail-panel,
.po-list-panel {
    scroll-margin-top: 18px;
}

.po-form {
    display: grid;
    gap: 18px;
}

.po-lines {
    display: grid;
    gap: 10px;
}

.po-line-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(86px, 0.5fr) minmax(110px, 0.6fr) minmax(140px, 1fr);
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.po-line-head {
    padding-block: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.po-line-row label {
    margin: 0;
}

.po-line-row label span {
    display: none;
}

.po-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.po-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.po-card-top,
.po-card-meta,
.po-detail-grid,
.po-meta-grid {
    display: grid;
    gap: 10px;
}

.po-card-top {
    grid-template-columns: 1fr auto;
    align-items: start;
}

.po-card-top div,
.po-card-meta {
    min-width: 0;
}

.po-card-top span,
.po-card p,
.po-card-meta span,
.po-meta-grid span {
    color: var(--muted);
}

.po-card h3,
.po-card p {
    margin: 0;
}

.po-card-meta {
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
}

.po-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    align-items: start;
}

.po-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.po-meta-grid div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.po-notes {
    margin-top: 14px;
    padding: 12px;
    border-left: 3px solid var(--primary);
    background: var(--surface-muted);
}

.po-receipt {
    display: grid;
    gap: 8px;
    text-align: center;
}

.po-receipt img {
    width: 100%;
    max-height: 220px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.po-status-form {
    margin-top: 14px;
}

.po-line-table {
    margin-top: 16px;
}

.po-filter-bar {
    margin-bottom: 16px;
}

.po-receiving-list {
    display: grid;
    gap: 14px;
}

.po-receiving-card {
    display: grid;
    gap: 14px;
}

.po-receiving-card .section-head {
    gap: 12px;
}

.po-receiving-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.po-receiving-meta span,
.po-receiving-meta strong {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text);
    overflow-wrap: anywhere;
}

.po-receiving-meta span {
    color: var(--muted);
}

.po-pending-lines {
    display: grid;
    gap: 10px;
}

.po-pending-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.po-pending-line > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.po-pending-line strong,
.po-pending-line span,
.po-pending-line small {
    overflow-wrap: anywhere;
}

.po-pending-line span,
.po-pending-line small {
    color: var(--muted);
}

.po-pending-line form {
    margin: 0;
}

@media (max-width: 680px) {
    .po-line-head {
        display: none;
    }

    .po-line-row,
    .po-detail-grid,
    .po-meta-grid,
    .po-card-meta,
    .po-receiving-meta,
    .po-line-status-form,
    .po-pending-line {
        grid-template-columns: 1fr;
    }

    .po-line-row label span {
        display: block;
    }

    .po-card-top {
        grid-template-columns: 1fr;
    }

    .po-receipt {
        max-width: 220px;
    }

    .po-receiving-card {
        padding: 14px;
    }

    .po-receiving-card .section-head {
        align-items: stretch;
    }

    .button-row {
        justify-content: stretch;
    }

    .button-row .button {
        flex: 1 1 140px;
    }

    .po-receiving-card .section-head .button,
    .po-line-status-form .button,
    .po-pending-line .button {
        width: 100%;
    }

    .po-pending-line {
        align-items: stretch;
    }
}