:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-soft: #f9fafb;
    --border: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --primary: #1f4f46;
    --primary-soft: #e7f4ef;
    --danger: #b42318;
    --success: #027a48;
    --shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
.skip-link {
    position: absolute;
    left: -999px;
    top: 1rem;
    background: var(--primary);
    color: white;
    padding: .75rem 1rem;
    border-radius: .75rem;
    z-index: 20;
}
.skip-link:focus { left: 1rem; }
.app-frame { display: flex; min-height: 100vh; }
.sidebar {
    width: 260px;
    background: #10231f;
    color: #f8fafc;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .75rem; font-weight: 800; }
.brand-mark {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: .75rem;
    background: var(--primary-soft);
    color: var(--primary);
}
.sidebar-nav { display: grid; gap: .35rem; }
.nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .72rem .8rem;
    border-radius: .8rem;
    color: #d1d5db;
}
.nav-link.active,
.nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-icon { width: .55rem; height: .55rem; border-radius: 999px; background: currentColor; opacity: .65; }
.page-frame { flex: 1; min-width: 0; }
.topbar {
    min-height: 64px;
    padding: .85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.topbar-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.eyebrow { margin: 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.content { padding: 1.25rem; }
.page-heading { margin-bottom: 1rem; }
.page-heading h1 { margin: .2rem 0; font-size: clamp(1.5rem, 2vw, 2rem); }
.page-heading p { margin: 0; color: var(--muted); }
.breadcrumbs { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.compact-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card,
.panel,
.guest-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    box-shadow: var(--shadow);
}
.card { padding: 1rem; }
.panel { padding: 1.1rem; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel h2,
.card h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.panel p,
.card p { margin: 0; }
.stat-label { color: var(--muted); font-size: .9rem; }
.stat-value { display: block; margin: .35rem 0; font-size: 1.55rem; }
.muted { color: var(--muted); }
.mt-4 { margin-top: 1rem; }
.check-list { margin: 1rem 0 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.alert { border-radius: .85rem; padding: .8rem 1rem; margin-bottom: 1rem; }
.alert-success { background: #ecfdf3; color: var(--success); border: 1px solid #abefc6; }
.alert-danger { background: #fef3f2; color: var(--danger); border: 1px solid #fecdca; }
.button {
    border: 1px solid transparent;
    border-radius: .8rem;
    padding: .65rem .9rem;
    font-weight: 700;
    cursor: pointer;
}
.button-primary { background: var(--primary); color: white; }
.button-secondary { background: var(--surface-soft); color: var(--text); border-color: var(--border); }
.full-width { width: 100%; }
.language-switcher { display: inline-flex; border: 1px solid var(--border); border-radius: .8rem; overflow: hidden; background: var(--surface); }
.language-link { padding: .45rem .65rem; font-size: .82rem; color: var(--muted); }
.language-link.active { background: var(--primary); color: white; }
.guest-body { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.guest-shell { width: min(100%, 440px); }
.guest-card { padding: 1.25rem; }
.guest-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.guest-card h1 { margin: 0 0 .35rem; }
.form-stack { display: grid; gap: .9rem; margin-top: 1.2rem; }
.field { display: grid; gap: .35rem; font-weight: 700; }
.field input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .85rem;
    padding: .75rem .85rem;
    font: inherit;
}
.checkbox-field { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.definition-list { display: grid; gap: .7rem; margin: .75rem 0 0; }
.definition-list div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; }
.definition-list dt { color: var(--muted); }
.definition-list dd { margin: 0; font-weight: 700; }
@media (max-width: 860px) {
    .app-frame { display: block; }
    .sidebar { width: 100%; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .definition-list div { grid-template-columns: 1fr; gap: .2rem; }
}


.stack { display: grid; gap: 1rem; }
.nav-group { display: grid; gap: .35rem; margin-top: .35rem; }
.nav-group-title { margin: .75rem .5rem .25rem; color: #9ca3af; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.nav-group-links { display: grid; gap: .25rem; }
.nav-child { padding-left: 1.05rem; }
.toolbar { margin-top: 1rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.search-field { max-width: 380px; width: 100%; }
.inline-form { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface-soft); }
.compact-form { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: .85rem; align-items: start; }
.field-wide { grid-column: span 2; }
.form-checkbox { align-self: end; min-height: 42px; }
.form-actions { display: flex; align-items: center; gap: .6rem; }
.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .85rem;
    padding: .68rem .78rem;
    font: inherit;
    background: #fff;
}
.field textarea { min-height: 88px; resize: vertical; }
.field-error { color: var(--danger); font-weight: 700; }
.table-wrapper { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th,
.data-table td { padding: .72rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table th { background: var(--surface-soft); color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.table-actions { width: 1%; white-space: nowrap; }
.table-actions .button { margin: .1rem; }
.button-small { padding: .42rem .62rem; border-radius: .65rem; font-size: .82rem; }
.button-danger { background: #fef3f2; color: var(--danger); border-color: #fecdca; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .55rem; font-weight: 800; font-size: .78rem; }
.badge-success { background: #ecfdf3; color: var(--success); }
.badge-muted { background: #f3f4f6; color: var(--muted); }
.empty-state { text-align: center; color: var(--muted); padding: 1.5rem !important; }
/* POS v2 pagination: Laravel/Livewire render Bootstrap pagination, but this
   project intentionally ships without Bootstrap CSS. Keep controls compact,
   horizontal, touch-friendly, and free from raw list bullets. */
.pagination-row {
    margin-top: 1rem;
    width: 100%;
}

.pagination-row nav,
.table-panel > nav,
.panel > nav[aria-label*="Pagination"],
.panel > nav[role="navigation"] {
    width: 100%;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination .page-item,
.pagination li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination .page-link,
.pagination .page-item > span,
.pagination .page-item > button,
.pagination .page-item > a {
    display: inline-flex;
    min-width: 2.25rem;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: .45rem .65rem;
    border: 1px solid var(--border);
    border-radius: .72rem;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
    cursor: pointer;
}

.pagination .page-link:hover,
.pagination .page-item > button:hover,
.pagination .page-item > a:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

.pagination .page-item.active .page-link,
.pagination .active > .page-link,
.pagination .active > span {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.pagination .page-item.disabled .page-link,
.pagination .disabled > .page-link,
.pagination .disabled > span {
    background: var(--surface-soft);
    color: var(--muted);
    cursor: not-allowed;
    opacity: .68;
}

.pagination-row p,
.table-panel > nav p,
.panel > nav[aria-label*="Pagination"] p,
.panel > nav[role="navigation"] p {
    margin: 0 0 .65rem;
    color: var(--muted);
    font-size: .88rem;
}

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

@media (max-width: 720px) {
    .pagination {
        justify-content: flex-start;
    }

    .pagination .page-link,
    .pagination .page-item > span,
    .pagination .page-item > button,
    .pagination .page-item > a {
        min-width: 2.4rem;
        min-height: 2.4rem;
    }
}

.text-center { text-align: center; }
@media (max-width: 1180px) {
    .compact-form { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 720px) {
    .compact-form { grid-template-columns: 1fr; }
    .field-wide { grid-column: span 1; }
    .panel-header { flex-direction: column; }
}

.nested-panel { margin-top: 1rem; box-shadow: none; background: var(--surface-soft); }
.panel h3 { margin: 0 0 .25rem; font-size: 1rem; }
.badge-warning { background: #fffaeb; color: #b54708; }
.badge-danger { background: #fef3f2; color: var(--danger); }
.data-table input,
.data-table select {
    width: 100%;
    min-width: 150px;
    border: 1px solid var(--border);
    border-radius: .7rem;
    padding: .55rem .65rem;
    font: inherit;
    background: #fff;
}

/* Phase 19/Audit patch: nested sidebar dropdowns */
.sidebar-nav {
    display: grid;
    gap: .35rem;
}

.nav-dropdown {
    display: grid;
    gap: .25rem;
}

.nav-dropdown summary {
    list-style: none;
}

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

.nav-dropdown-summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .72rem .8rem;
    border-radius: .8rem;
    color: #d1d5db;
    cursor: pointer;
    user-select: none;
}

.nav-dropdown-summary:hover,
.nav-dropdown.active > .nav-dropdown-summary {
    background: rgba(255,255,255,.1);
    color: #fff;
}

.nav-dropdown-content {
    display: grid;
    gap: .2rem;
    margin: .2rem 0 .35rem;
    padding-left: .65rem;
    border-left: 1px solid rgba(255,255,255,.12);
}

.nav-chevron {
    margin-left: auto;
    font-weight: 900;
    transition: transform .15s ease;
}

.nav-dropdown[open] > .nav-dropdown-summary .nav-chevron {
    transform: rotate(90deg);
}

.nav-depth-1.nav-link,
.nav-depth-1 > .nav-dropdown-summary {
    padding-left: 1rem;
    font-size: .94rem;
}

.nav-depth-2.nav-link,
.nav-depth-2 > .nav-dropdown-summary {
    padding-left: 1.2rem;
    font-size: .9rem;
}

.nav-depth-3.nav-link,
.nav-depth-3 > .nav-dropdown-summary {
    padding-left: 1.4rem;
    font-size: .86rem;
}

.nav-link.nav-depth-1,
.nav-link.nav-depth-2,
.nav-link.nav-depth-3 {
    color: #cbd5e1;
}

@media (max-width: 860px) {
    .nav-dropdown-content {
        padding-left: .45rem;
    }
}

/* Phase 20 inventory count/transfer helpers */
.nested-card {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
    padding: .75rem;
}

.compact-table th,
.compact-table td {
    padding: .55rem;
}

.compact-actions {
    margin-top: .75rem;
    justify-content: flex-start;
}

/* POS v2 stabilization settings, changelog, and monitoring helpers */
.page-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

.app-footer {
    margin: 0 1.25rem 1.25rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--muted);
    font-size: .88rem;
    text-align: center;
}

.settings-tabs {
    display: flex;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .35rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    overflow-x: auto;
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .55rem .8rem;
    border-radius: .75rem;
    color: var(--muted);
    font-weight: 800;
    font-size: .88rem;
}

.settings-tab.active,
.settings-tab:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.footer-preview {
    min-height: 52px;
    padding: .8rem 1rem;
    border: 1px dashed var(--border);
    border-radius: .9rem;
    background: var(--surface);
    color: var(--muted);
}

.filters-grid,
.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: .85rem;
    align-items: end;
    margin-top: 1rem;
}

.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(160px, 1fr)); }

.stacked-page,
.stacked-form {
    display: grid;
    gap: 1rem;
}

.filters-grid label,
.form-grid label,
.stacked-form label {
    display: grid;
    gap: .35rem;
    font-weight: 700;
}

.filters-grid input,
.filters-grid select,
.form-grid input,
.form-grid select,
.form-grid textarea,
.stacked-form input,
.stacked-form select,
.stacked-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .85rem;
    padding: .68rem .78rem;
    font: inherit;
    background: #fff;
}

.checkbox-card {
    min-height: 43px;
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding: .68rem .78rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface);
}

.checkbox-card input {
    width: auto;
}

.timeline-list {
    display: grid;
    gap: 1rem;
}

.timeline-item {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
}

.timeline-item h2 {
    margin: .55rem 0 .35rem;
    font-size: 1.05rem;
}

.timeline-item p {
    margin: 0;
    color: var(--muted);
}

.timeline-meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .filters-grid,
    .form-grid,
    .form-grid.cols-3,
    .form-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}

@media (max-width: 720px) {
    .filters-grid,
    .form-grid,
    .form-grid.cols-2,
    .form-grid.cols-3,
    .form-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .app-footer {
        margin: 0 .75rem .75rem;
    }
}

/* Phase 34: compact import center summaries */
.dashboard-grid,
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
    margin-top: 1rem;
}

.metric-card,
.info-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
    padding: .9rem 1rem;
}

.metric-card span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}

.metric-card strong {
    display: block;
    margin-top: .3rem;
    font-size: 1.45rem;
}

.info-card h3 {
    margin: 0 0 .35rem;
    font-size: .98rem;
}

.info-card p {
    color: var(--muted);
}

.compact-list {
    margin: 0;
    padding-left: 1rem;
}

.alert-warning {
    background: #fffaeb;
    color: #b54708;
    border: 1px solid #fedf89;
}

/* Phase 35: operational dashboard, readiness audit, and compact UX refinements */
.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem;
    border: 1px solid var(--border);
    border-radius: .9rem;
    background: var(--surface-soft);
    font-size: .88rem;
    font-weight: 700;
}

.topbar-user span {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: .55rem;
}

.dashboard-metric-card {
    position: relative;
    min-height: 132px;
}

.mini-link {
    display: inline-flex;
    margin-top: .65rem;
    color: var(--primary);
    font-size: .82rem;
    font-weight: 800;
}

.warning-panel {
    border-color: #fedf89;
    background: #fffcf5;
}

.readiness-dashboard-panel,
.readiness-hero {
    background: linear-gradient(135deg, var(--surface), #f3fbf8);
}

.readiness-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.readiness-hero h2 {
    margin: .25rem 0;
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.readiness-score-large,
.readiness-score-card {
    display: grid;
    gap: .25rem;
    min-width: 150px;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    text-align: center;
}

.readiness-score-large span,
.readiness-score-card span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.readiness-score-large strong {
    font-size: 2.25rem;
    line-height: 1;
}

.readiness-score-card strong {
    font-size: 1.55rem;
}

.readiness-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: .85rem;
}

.readiness-table .table-note {
    margin-top: .25rem;
    max-width: 340px;
}

.readiness-cell {
    min-width: 150px;
}

.readiness-meter {
    width: 100%;
    height: .55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e5e7eb;
}

.readiness-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.compact-info-card {
    display: grid;
    gap: .55rem;
}

.shortcut-card {
    transition: transform .15s ease, border-color .15s ease;
}

.shortcut-card:hover {
    transform: translateY(-1px);
    border-color: #b7d8cf;
}

.receipt-logo-preview {
    display: grid;
    place-items: center;
    min-height: 48px;
    margin-bottom: .45rem;
}

.receipt-logo-preview img {
    max-height: 56px;
    max-width: 140px;
    object-fit: contain;
}

code {
    display: inline-block;
    padding: .2rem .4rem;
    border-radius: .5rem;
    background: #f3f4f6;
    color: #374151;
    font-size: .82rem;
}

@media (max-width: 860px) {
    .readiness-hero {
        flex-direction: column;
        align-items: stretch;
    }

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

    .topbar-user {
        width: 100%;
        justify-content: space-between;
    }
}

/* Phase 38: standalone foundation CRUD control center */
.foundation-definition-list {
    grid-template-columns: 1fr;
}

.permission-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .85rem;
}

.permission-group-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    padding: .85rem;
}

.permission-group-card h3 {
    margin: 0 0 .55rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primary);
}

.permission-checkbox-grid {
    display: grid;
    gap: .35rem;
    max-height: 260px;
    overflow: auto;
}

.permission-checkbox {
    align-items: flex-start;
    font-size: .85rem;
    color: var(--text);
}

.retention-settings-card {
    background: #fbfcfd;
}

/* POS shell patch: ERP-like topbar, active sidebar submenu, theme builder */
body {
    background: var(--content-bg, var(--bg));
    color: var(--text);
    font-family: var(--app-font-family, Inter, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--app-font-size, 14px);
}

.with-erp-shell .sidebar {
    width: 280px;
    background: var(--sidebar-bg, #f8fafc);
    color: var(--sidebar-text, #0f172a);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    align-self: flex-start;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

.with-erp-shell .brand {
    color: var(--sidebar-text, #0f172a);
}

.with-erp-shell .brand-mark {
    background: var(--primary);
    color: #fff;
}

.sidebar-section-card {
    display: grid;
    gap: .2rem;
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    border-radius: .95rem;
    background: rgba(255,255,255,.72);
}

.sidebar-section-card span {
    color: var(--muted);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar-section-card strong {
    font-size: .92rem;
}

.sidebar-empty {
    padding: .85rem;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: .9rem;
    background: rgba(255,255,255,.6);
}

.with-erp-shell .nav-link,
.with-erp-shell .nav-dropdown-summary {
    color: var(--sidebar-text, #0f172a);
    background: rgba(226,232,240,.85);
    border: 1px solid rgba(148,163,184,.55);
    border-radius: .72rem;
    min-height: 38px;
    padding: .52rem .7rem;
}

.with-erp-shell .nav-link:hover,
.with-erp-shell .nav-link.active,
.with-erp-shell .nav-dropdown.active > .nav-dropdown-summary,
.with-erp-shell .nav-dropdown-summary:hover {
    background: color-mix(in srgb, var(--primary) 15%, white);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 40%, white);
}

.with-erp-shell .nav-dropdown-content {
    border-left-color: rgba(148,163,184,.42);
}

.app-navbar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 0;
    padding: 0;
    background: var(--navbar-bg, #fff);
    color: var(--navbar-text, #0f172a);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

.navbar-primary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem 1.25rem;
    max-height: 92px;
    overflow: visible;
    transition: max-height .18s ease, opacity .18s ease, padding .18s ease, transform .18s ease;
}

.navbar-context-row {
    min-height: 58px;
    padding-top: .55rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(148,163,184,.18);
}

.navbar-context-left {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.navbar-utility-actions {
    margin-left: auto;
    flex-wrap: nowrap;
}

.company-context-control {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, #fff);
}

.company-context-control span {
    color: color-mix(in srgb, var(--navbar-text, #0f172a) 78%, var(--muted));
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.app-navbar.is-condensed .navbar-primary-row:not(.navbar-context-row) {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    transform: translateY(-8px);
    overflow: hidden;
}

.navbar-title {
    display: grid;
    gap: .15rem;
    min-width: 180px;
}

.navbar-title strong {
    font-size: 1rem;
}

.navbar-title small {
    color: var(--muted);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.navbar-button,
.navbar-chip,
.company-switcher,
.role-switcher {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .42rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--navbar-text, #0f172a);
    font-weight: 800;
    font-size: .84rem;
}

.company-switcher select,
.role-switcher select {
    min-width: 160px;
    max-width: 260px;
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: .35rem .55rem;
    font: inherit;
    background: var(--surface-soft);
}

.company-context-control select {
    min-width: min(260px, 52vw);
}

.navbar-dropdown {
    position: relative;
}

.navbar-dropdown summary {
    list-style: none;
    cursor: pointer;
}

.navbar-dropdown summary::-webkit-details-marker { display: none; }

.navbar-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    width: min(360px, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(15,23,42,.16);
    padding: .8rem;
    z-index: 40;
}

.navbar-menu-head,
.profile-menu-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .6rem;
}

.navbar-menu-head small,
.profile-menu-head small {
    display: block;
    color: var(--muted);
    font-size: .8rem;
}

.notification-list {
    display: grid;
    gap: .55rem;
    max-height: 340px;
    overflow-y: auto;
}

.notification-item {
    border: 1px solid var(--border);
    border-radius: .9rem;
    background: var(--surface-soft);
}

.notification-main-link {
    display: grid;
    gap: .18rem;
    padding: .65rem .75rem;
}

.notification-main-link small,
.notification-main-link em,
.notification-empty {
    color: var(--muted);
    font-size: .82rem;
}

.notification-read-all,
.profile-logout-form button {
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.profile-button .profile-initial {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: var(--primary);
    color: white;
}

.profile-menu {
    width: 260px;
}

.profile-menu a,
.profile-logout-form button {
    display: flex;
    width: 100%;
    padding: .55rem .35rem;
    text-align: left;
}

.navbar-module-row {
    padding: .45rem 1.25rem;
    background: color-mix(in srgb, var(--navbar-bg) 94%, var(--primary));
    border-top: 1px solid rgba(148,163,184,.2);
}

.module-head-menu {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    overflow-x: visible;
    scrollbar-width: none;
}

.module-head-menu a {
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: .45rem .8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--navbar-text);
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
}

.module-head-menu a.active,
.module-head-menu a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.module-overflow-dropdown {
    flex: 0 0 auto;
}

.module-overflow-button {
    min-height: 34px;
    padding: .38rem .72rem;
    background: color-mix(in srgb, var(--primary) 7%, #fff);
}

.module-overflow-menu {
    display: grid;
    gap: .35rem;
    width: min(290px, calc(100vw - 2rem));
    right: 0;
}

.module-overflow-menu a {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: .5rem .65rem;
    border: 1px solid transparent;
    border-radius: .85rem;
    color: var(--navbar-text);
    font-size: .84rem;
    font-weight: 900;
}

.module-overflow-menu a.active,
.module-overflow-menu a:hover {
    background: color-mix(in srgb, var(--primary) 13%, white);
    border-color: color-mix(in srgb, var(--primary) 32%, white);
    color: var(--primary);
}

.content {
    background: var(--content-bg, var(--bg));
}

.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    flex-wrap: wrap;
    background: var(--footer-bg, #fff);
    color: var(--footer-text, var(--muted));
}

.app-footer a {
    color: var(--primary);
    font-weight: 900;
}

.settings-builder-form {
    grid-template-columns: repeat(4, minmax(160px, 1fr));
}

.settings-builder-section {
    grid-column: 1 / -1;
}

.field input[type="color"],
.form-grid input[type="color"] {
    min-height: 42px;
    padding: .2rem;
}

.theme-preview-card {
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--theme-preview-content, #fff);
}

.theme-preview-navbar {
    padding: .7rem .9rem;
    background: var(--theme-preview-navbar, #f8fafc);
    border-bottom: 1px solid var(--border);
    font-weight: 900;
}

.theme-preview-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    min-height: 110px;
}

.theme-preview-body aside {
    padding: .85rem;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--border);
    font-weight: 900;
}

.theme-preview-body main {
    padding: .85rem;
    background: var(--content-bg);
}

.theme-preview-card footer {
    padding: .65rem .9rem;
    background: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--border);
}

.guide-hero-panel,
.guide-detail-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.guide-hero-panel h2,
.guide-card h2,
.guide-detail-panel h2 {
    margin: .25rem 0;
}

.guide-category-tabs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
}

.guide-category-tabs a {
    padding: .45rem .75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-weight: 900;
    white-space: nowrap;
}

.guide-category-tabs a.active,
.guide-category-tabs a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.guide-card {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.guide-card img,
.guide-detail-illustration {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: .9rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.guide-detail-panel {
    align-items: flex-start;
}

.guide-detail-illustration {
    width: min(360px, 40%);
    flex: 0 0 auto;
}

.guide-detail-content {
    display: grid;
    gap: .8rem;
    min-width: 0;
}

.lead-text {
    font-size: 1.05rem;
    color: var(--muted);
}

.guide-body {
    white-space: normal;
    line-height: 1.7;
}

.notification-detail-body pre {
    max-height: 360px;
    overflow: auto;
    padding: .9rem;
    border-radius: .8rem;
    background: #0f172a;
    color: #e2e8f0;
}

@media (max-width: 980px) {
    .with-erp-shell .sidebar {
        position: static;
        width: 100%;
        min-height: 0;
        max-height: none;
    }

    .navbar-primary-row,
    .navbar-context-left,
    .navbar-actions,
    .guide-hero-panel,
    .guide-detail-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .navbar-utility-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .module-head-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .company-switcher,
    .role-switcher,
    .navbar-button,
    .navbar-chip {
        justify-content: space-between;
        width: 100%;
    }

    .navbar-menu {
        left: 0;
        right: auto;
    }

    .guide-detail-illustration {
        width: 100%;
    }
}

/* Phase v3: compact foundation CRUD and translation audit workbench */
.page-heading {
    margin-bottom: .9rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: rgba(255,255,255,.82);
    box-shadow: 0 8px 18px rgba(15,23,42,.035);
}

.page-heading h1 {
    font-size: clamp(1.25rem, 1.6vw, 1.65rem);
    line-height: 1.15;
}

.page-heading p {
    max-width: 1100px;
    font-size: .92rem;
}

.breadcrumbs a,
.breadcrumbs span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.foundation-definition-list {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.foundation-definition-list div {
    grid-template-columns: 1fr;
    gap: .2rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface-soft);
}

.foundation-definition-list dt {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.foundation-definition-list dd {
    word-break: break-word;
}

.table-panel .data-table th {
    color: #475569;
    background: #f8fafc;
}

.translation-summary-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.translation-toolbar {
    justify-content: flex-start;
}

.translation-toolbar .field:first-child {
    max-width: 160px;
}

.compact-checkbox {
    align-self: end;
    min-height: 42px;
    padding: .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--surface-soft);
}

.two-column-workbench {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr);
    gap: 1rem;
    align-items: start;
}

.translation-key-list {
    display: grid;
    gap: .45rem;
    max-height: 560px;
    overflow: auto;
    padding-right: .2rem;
}

.translation-key-row {
    display: grid;
    gap: .18rem;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: .8rem;
    background: var(--surface-soft);
    color: var(--text);
    padding: .62rem .75rem;
    text-align: left;
    cursor: pointer;
}

.translation-key-row:hover,
.translation-key-row.active {
    border-color: color-mix(in srgb, var(--primary) 45%, white);
    background: var(--primary-soft);
}

.translation-key-row span {
    font-size: .86rem;
    font-weight: 800;
    word-break: break-all;
}

.translation-key-row small {
    color: var(--muted);
}

.translation-editor-panel textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .88rem;
}

.translation-warning-list {
    display: grid;
    gap: .45rem;
    max-height: 360px;
    overflow: auto;
}

.translation-warning-list code {
    display: block;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    background: #0f172a;
    color: #e2e8f0;
    white-space: normal;
    word-break: break-word;
}

@media (max-width: 1180px) {
    .two-column-workbench,
    .translation-summary-grid,
    .foundation-definition-list {
        grid-template-columns: 1fr;
    }
}

.module-config-page .compact-hero h2,
.module-config-card h3 {
    margin: .15rem 0 .25rem;
}

.dense-info-grid,
.module-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: .75rem;
}

.module-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.module-tab,
.segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    padding: .52rem .85rem;
    font-weight: 800;
    cursor: pointer;
}

.module-tab.is-active,
.segment.is-active {
    border-color: color-mix(in srgb, var(--primary) 55%, white);
    background: var(--primary);
    color: white;
}

.module-tab small {
    display: inline-flex;
    min-width: 1.35rem;
    min-height: 1.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    font-size: .76rem;
}

.module-tab.is-active small {
    background: rgba(255, 255, 255, .2);
}

.module-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 1rem;
}

.module-code-row,
.label-options-row,
.toolbar-actions,
.compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.tiny-label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.code-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .82rem;
    min-height: 190px;
}

.stock-entry-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) auto minmax(280px, 1fr) auto;
    gap: .75rem;
    align-items: end;
    margin-bottom: .85rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: .95rem;
    background: var(--surface-soft);
}

.segmented-control {
    display: inline-flex;
    gap: .35rem;
    padding: .25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.scanner-field {
    min-width: 280px;
}

.label-filter-form {
    margin-top: 1rem;
}

.product-checklist {
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface-soft);
}

.product-checklist summary {
    cursor: pointer;
    font-weight: 800;
}

.product-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: .5rem;
    margin-top: .75rem;
    max-height: 300px;
    overflow: auto;
}

.check-card {
    display: flex;
    gap: .45rem;
    align-items: flex-start;
    padding: .55rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: var(--surface);
}

.check-card small {
    display: block;
    color: var(--muted);
}

.label-sheet {
    display: grid;
    grid-template-columns: repeat(var(--label-columns, 4), minmax(0, 1fr));
    gap: .5rem;
}

.product-label-card {
    display: grid;
    gap: .16rem;
    break-inside: avoid;
    min-height: 150px;
    padding: .55rem;
    border: 1px dashed #94a3b8;
    border-radius: .45rem;
    background: white;
    color: #0f172a;
    text-align: center;
}

.label-size-medium .product-label-card { min-height: 180px; padding: .75rem; }
.label-size-large .product-label-card { min-height: 220px; padding: .95rem; }
.label-product-name { line-height: 1.15; }
.label-sku,
.label-barcode-text,
.label-qr-payload,
.label-company { color: #475569; font-size: .74rem; }
.label-price { font-size: .9rem; }
.label-barcode { color: #111827; height: 42px; }
.label-qr { display: inline-flex; justify-content: center; margin: .1rem auto 0; width: 42px; height: 42px; }
.label-size-medium .label-barcode { height: 52px; }
.label-size-medium .label-qr { width: 50px; height: 50px; }
.label-size-large .label-barcode { height: 66px; }
.label-size-large .label-qr { width: 62px; height: 62px; }
.barcode-svg,
.qr-svg { display: block; width: 100%; height: 100%; }
.qr-svg { color: #111827; }

@media print {
    .app-sidebar,
    .app-topbar,
    .app-footer,
    .no-print,
    .breadcrumb,
    .page-header {
        display: none !important;
    }

    .app-shell,
    .app-main,
    .content-wrap {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .label-sheet {
        gap: 4mm;
    }

    .product-label-card {
        page-break-inside: avoid;
    }
}

@media (max-width: 1180px) {
    .module-config-grid,
    .dense-info-grid,
    .module-meta-grid,
    .product-check-grid {
        grid-template-columns: 1fr;
    }

    .stock-entry-toolbar {
        grid-template-columns: 1fr;
    }
}

.inline-select-field { min-width: 220px; }
.inline-select-field select { min-width: 180px; }

/* 20260623 company customization shell fixes */
.app-footer.app-footer-split {
    justify-content: space-between;
    text-align: left;
    gap: 1rem;
}
.app-footer-left,
.app-footer-right {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}
.app-footer-left {
    min-width: 0;
    flex: 1 1 45%;
}
.app-footer-right {
    flex: 0 1 auto;
    justify-content: flex-end;
    text-align: right;
}
.company-policy-template-page textarea,
.translation-audit-page textarea {
    font-family: var(--app-font-family);
}
@media (max-width: 760px) {
    .app-footer.app-footer-split,
    .app-footer-left,
    .app-footer-right {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
    }
    .app-footer.app-footer-split {
        flex-direction: column;
    }
}

/* 20260624 theme preset builder */
.theme-preset-panel {
    display: grid;
    gap: .75rem;
    margin-bottom: 1rem;
}

.theme-preset-panel .muted {
    margin: .15rem 0 0;
}

.theme-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .7rem;
}

.theme-preset-card {
    display: grid;
    gap: .45rem;
    padding: .8rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.theme-preset-card:hover:not(:disabled),
.theme-preset-card.is-active {
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.theme-preset-card:disabled {
    cursor: not-allowed;
    opacity: .72;
}

.theme-preset-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-weight: 900;
}

.theme-preset-card-title small {
    padding: .16rem .45rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .7rem;
    font-weight: 900;
}

.theme-preset-card-description {
    min-height: 2.4em;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
}

.theme-preset-swatches {
    display: flex;
    gap: .35rem;
    align-items: center;
}

.theme-preset-swatches span {
    width: 2rem;
    height: 1.05rem;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.theme-preview-card {
    color: var(--theme-preview-text, var(--text));
}

.theme-preview-navbar {
    background: var(--theme-preview-navbar, #f8fafc);
    color: var(--theme-preview-navbar-text, var(--text));
}

.theme-preview-body aside {
    background: var(--theme-preview-sidebar, var(--sidebar-bg));
    color: var(--theme-preview-sidebar-text, var(--sidebar-text));
}

.theme-preview-body main {
    background: var(--theme-preview-content, var(--content-bg));
    color: var(--theme-preview-text, var(--text));
}

.theme-preview-body main::after {
    display: inline-flex;
    margin-left: .5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--theme-preview-primary, var(--primary));
    color: #fff;
    content: 'Primary';
    font-size: .72rem;
    font-weight: 900;
}

.theme-preview-card footer {
    background: var(--theme-preview-footer, var(--footer-bg));
    color: var(--theme-preview-footer-text, var(--footer-text));
}

/* POS context switcher and print-template polish added in 2026-06-24 patch. */
.store-switcher {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .42rem .65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--navbar-text, #0f172a);
    font-weight: 800;
    font-size: .84rem;
}

.store-context-control {
    border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.store-context-control span {
    color: color-mix(in srgb, var(--navbar-text, #0f172a) 78%, var(--muted));
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.store-switcher select {
    min-width: 160px;
    max-width: 260px;
    border: 1px solid var(--border);
    border-radius: .75rem;
    padding: .35rem .55rem;
    font: inherit;
    background: var(--surface-soft);
}

.print-template-form .field-wide {
    grid-column: 1 / -1;
}

.checkbox-grid,
.print-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: .65rem;
    align-items: stretch;
    margin-top: .6rem;
}

.checkbox-grid .checkbox-field,
.print-options-grid .checkbox-field {
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
    padding: .62rem .72rem;
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface-soft);
    color: var(--text);
    font-weight: 800;
    line-height: 1.25;
}

.checkbox-grid .checkbox-field input,
.print-options-grid .checkbox-field input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.checkbox-grid .checkbox-field span,
.print-options-grid .checkbox-field span {
    min-width: 0;
}

@media (max-width: 1180px) {
    .checkbox-grid,
    .print-options-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 720px) {
    .store-switcher,
    .company-switcher,
    .role-switcher,
    .navbar-button,
    .navbar-chip {
        justify-content: space-between;
        width: 100%;
    }

    .checkbox-grid,
    .print-options-grid {
        grid-template-columns: 1fr;
    }
}


/* Theme surface token polish: dark/mixed presets now affect cards, borders, muted text and previews. */
.theme-preview-card {
    border-color: var(--theme-preview-border, var(--border));
    background: var(--theme-preview-surface, var(--surface));
    color: var(--theme-preview-text, var(--text));
}

.theme-preview-body main {
    background: var(--theme-preview-surface, var(--surface));
    border-color: var(--theme-preview-border, var(--border));
    color: var(--theme-preview-text, var(--text));
}

.theme-preview-body main::after {
    color: var(--theme-preview-muted, var(--muted));
}

.theme-preview-body aside {
    border-color: var(--theme-preview-border, var(--border));
}

.theme-preset-swatches span {
    border-color: var(--border);
}

/* Access scope / RBAC helper UI */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
    align-items: stretch;
}

.hint-card {
    border: 1px solid var(--border-color, #d8dde8);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-muted, #f8fafc);
    padding: .75rem .85rem;
}

.hint-card p {
    margin: .25rem 0 0;
}

/* Shared operational UI helpers: simple tabs, sortable headers, readable filters, and toast placement. */
.filter-toolbar {
    align-items: end;
    justify-content: flex-start;
}

.sort-direction-field {
    min-width: 150px;
}

.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 900;
    text-align: left;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.table-sort-button:hover {
    color: var(--primary);
}

.simple-tabs {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.simple-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: .55rem;
}

.simple-tabs-nav button {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    padding: .5rem .8rem;
}

.simple-tabs-nav button.active,
.simple-tabs-nav button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.simple-tab-panel {
    min-width: 0;
}

.rich-textarea {
    min-height: 120px;
    line-height: 1.55;
}

.code-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: .86rem;
}

.toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: grid;
    gap: .65rem;
    width: min(380px, calc(100vw - 2rem));
}

.toast-message {
    border: 1px solid var(--border);
    border-left-width: 5px;
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: .85rem 1rem;
}

.toast-message strong {
    display: block;
    margin-bottom: .15rem;
}

.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-warning { border-left-color: #b54708; }
.toast-info { border-left-color: var(--primary); }

@media (max-width: 640px) {
    .simple-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .65rem;
    }

    .simple-tabs-nav button {
        flex: 0 0 auto;
    }

    .toast-stack {
        right: .75rem;
        bottom: .75rem;
        width: calc(100vw - 1.5rem);
    }
}

/* BNM outlet PO forms keep item entry compact without showing another table above the index table. */
.line-card-list {
    display: grid;
    gap: .75rem;
}

.line-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
    padding: .85rem;
}

.compact-actions {
    margin-top: .5rem;
}

.select-search-input {
    margin-bottom: .35rem;
}

.detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.detail-list div {
    border: 1px solid var(--border);
    border-radius: .85rem;
    background: var(--surface-soft);
    padding: .75rem;
}

.detail-list dt {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    margin-bottom: .2rem;
}

.detail-list dd {
    margin: 0;
    font-weight: 700;
}

/* Marketplace form tabs: keep only one line-table visible while editing a large order. */
.compact-header {
    align-items: center;
    margin-bottom: .75rem;
}

.compact-stack {
    gap: .45rem;
}

.badge-info {
    background: #eff8ff;
    color: #175cd3;
    border: 1px solid #b2ddff;
}