:root {
    --bg: #f8f9ff;
    --surface: #ffffff;
    --ink: #111827;
    --muted: #9ca3af;
    --accent: #ffb600;
    --accent-dark: #ffb700f4;
    --nav-bg: #011530;
    --nav-ink: #eef3fc;
    --nav-muted: #d2d5da;
    --line: #d2d5da;
    --radius: 4px;
    --shadow: 0 1px 6px rgba(24, 33, 56, 0.06);
    --danger: #c62828;
    --warning: #f57c00;
    --success: #1f8f4b;
}

.dark-mode {
    --bg: #131b29;
    --surface: #1a2536;
    --ink: #edf3fc;
    --muted: #9eb1c8;
    --accent: #ffb600;
    --accent-dark: #ffb700f4;
    --nav-bg: #011530;
    --nav-ink: #eef3fc;
    --nav-muted: #8da2bf;
    --line: #2b3a52;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Nunito Sans", "Segoe UI", Tahoma, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
}

.auth-reference-mode body {
    background: #011530;
}

.layout {
    min-height: calc(100vh - 5.563rem);
    display: grid;
    grid-template-columns: 250px 1fr;
    align-items: stretch;
}

.sidebar {
    background: var(--nav-bg);
    color: var(--nav-ink);
    display: grid;
    grid-template-rows: auto 1fr;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    position: sticky;
    top: 5.563rem;
    height: calc(100vh - 5.563rem);
    min-height: calc(100vh - 5.563rem);
    align-self: start;
}

.sidebar-brand {
    background: #ffffff;
    color: #1f2b3c;
    min-height: 5.563rem;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
}

.dark-mode .sidebar-brand {
    background: #152235;
    color: #eef3fc;
    border-bottom-color: #26364f;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4a78ff, #00b8ff);
    color: #fff;
    display: grid;
    place-items: center;
}

.sidebar-brand h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1.1;
}

.sidebar-brand p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #6f7888;
}

.dark-mode .sidebar-brand p {
    color: #9fb3cb;
}

.sidebar-links,
.nav-section {
    display: grid;
    gap: 6px;
    padding: 10px 8px;
}

.nav-section {
    border-top: 0;
}

.nav-heading {
    margin: 8px 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--nav-muted);
    font-weight: 400;
    opacity: 0.4;
}

.nav-link {
    text-decoration: none;
    color: var(--nav-ink);
    min-height: 48px;
    padding: 0 12px 0 16px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    border-right: 4px solid transparent;
}

.nav-link i {
    width: 18px;
    text-align: center;
}

.nav-link:hover,
.nav-link.active {
    background: var(--accent);
    color: var(--nav-bg);
    border-radius: 10px 0 0 10px;
    border-right-color: #ffffff;
}

.main-content {
    padding: 0 0 18px;
    min-width: 0;
    min-height: calc(100vh - 5.563rem);
}

.main-content.full {
    max-width: 560px;
    margin: 50px auto;
}

.auth-reference-mode .main-content.full {
    max-width: none;
    margin: 0;
    padding: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 5.563rem;
    padding: 0 3.188rem;
    margin: 0;
}

.auth-reference-mode .content-wrap {
    max-width: none;
    margin: 0;
    padding: 0;
}

.auth-reference-mode .page-footer {
    display: none;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.crumb strong {
    font-size: 20px;
    line-height: 1.7;
}

.topbar-pos {
    background: var(--nav-bg);
    color: var(--accent);
    border-radius: 4px;
    width: 115px;
    height: 48px;
    justify-content: center;
    padding: 0 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

.topbar-pos:hover {
    filter: brightness(1.04);
}

.icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.dark-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.dark-switch input {
    width: 13px;
    height: 13px;
}

.mobile-only {
    display: none;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 2.063rem 3.563rem 8px;
}

.page-header h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.page-subtitle {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.subtle,
.hint {
    color: var(--muted);
    font-size: 12px;
    margin: 0;
}

.content-wrap {
    display: grid;
    gap: 12px;
    margin: 0 3.563rem;
}

.module-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
}

.module-tabs a,
.module-tabs button {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}

.module-tabs a.active,
.module-tabs button.active,
.module-tabs a:hover,
.module-tabs button:hover {
    color: var(--ink);
    box-shadow: inset 0 -3px 0 var(--accent);
}

.card,
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px;
}

.card.narrow {
    max-width: 430px;
    margin: 0 auto;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.panel-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
}

.panel-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

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

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

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

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

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

.metric-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px;
    display: grid;
    gap: 8px;
    background: #fff;
}

.dark-mode .metric-card {
    background: #1e2b40;
}

.metric-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #1f2e45;
    font-size: 16px;
}

.metric-icon.sales {
    background: #dcfbff;
}

.metric-icon.invoice {
    background: #fff8cc;
}

.metric-icon.payments {
    background: #d9fff1;
}

.metric-icon.net {
    background: #ffe1ec;
}

.metric-icon.returns {
    background: #ffe4d1;
}

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

.metric-card h3 {
    font-size: 33px;
    line-height: 1.06;
}

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

.toolbar,
.datatable-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.datatable-toolbar {
    justify-content: space-between;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 9px 0;
    margin-bottom: 8px;
}

.toolbar.wrap {
    flex-wrap: wrap;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.export-icons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.export-icons button {
    border: 1px solid var(--line);
    background: var(--surface);
    width: 30px;
    height: 30px;
    border-radius: 4px;
    color: var(--ink);
    cursor: pointer;
}

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 13px;
}

.table th {
    background: #edf0f8;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 11px;
}

.dark-mode .table th {
    background: #22324a;
}

.table.compact th,
.table.compact td {
    padding: 8px 7px;
}

.stack {
    display: grid;
    gap: 10px;
}

.small-gap {
    gap: 6px;
}

label {
    display: grid;
    gap: 4px;
    font-size: 12px;
}

input,
select,
textarea,
summary {
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    color: var(--ink);
    padding: 7px 9px;
    font-size: 13px;
}

textarea {
    min-height: 72px;
}

.button {
    background: var(--accent);
    border: 1px solid var(--accent-dark);
    border-radius: 3px;
    color: #011530;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.button:hover {
    filter: brightness(0.98);
}

.button.secondary {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.button.danger {
    background: #ffebe8;
    border-color: #ffc8bf;
    color: var(--danger);
}

.profile-menu,
.quick-actions-menu,
.notification-menu {
    position: relative;
}

.profile-menu summary,
.quick-actions-menu summary,
.notification-menu summary {
    list-style: none;
    padding: 0;
}

.profile-menu summary::-webkit-details-marker,
.quick-actions-menu summary::-webkit-details-marker,
.notification-menu summary::-webkit-details-marker {
    display: none;
}

.profile-dropdown,
.quick-actions-dropdown {
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 30;
    width: 250px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
    padding: 8px;
}

.quick-actions-dropdown {
    width: 285px;
}

.notification-dropdown {
    position: absolute;
    top: 64px;
    right: -44px;
    z-index: 32;
    width: min(380px, calc(100vw - 24px));
    max-height: 520px;
    display: grid;
    grid-template-rows: auto minmax(80px, 1fr) auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.16);
    overflow: hidden;
}

.notification-head,
.notification-footer {
    padding: 14px 16px;
    background: #ffffff;
}

.notification-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}

.notification-head strong,
.notification-head small {
    display: block;
}

.notification-head small {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}

.notification-head button {
    border: 0;
    background: #fff2cc;
    color: #7a4a00;
    border-radius: 999px;
    padding: 7px 11px;
    font-weight: 700;
    cursor: pointer;
}

.notification-list {
    max-height: 390px;
    overflow-y: auto;
    background: #f8fafc;
}

.notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

.notification-item.unread::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00bcd4;
}

.notification-item a {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 13px 12px 13px 22px;
    color: var(--ink);
    text-decoration: none;
}

.notification-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eaf7ff;
    color: #0b7cb5;
}

.notification-item.warning .notification-icon {
    background: #fff4d6;
    color: #af6a00;
}

.notification-item.danger .notification-icon {
    background: #ffe7e7;
    color: #cf2637;
}

.notification-item strong,
.notification-item em,
.notification-item small {
    display: block;
}

.notification-item strong {
    font-size: 13px;
    margin-bottom: 2px;
}

.notification-item em {
    color: #4b5563;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

.notification-item small {
    margin-top: 4px;
    color: #8a94a6;
    font-size: 11px;
}

.notification-item form {
    display: flex;
    align-items: center;
    padding-right: 12px;
}

.notification-item form button {
    width: 30px;
    height: 30px;
    border: 1px solid #cfe7ef;
    border-radius: 50%;
    background: #eefbff;
    color: #007b92;
    cursor: pointer;
}

.notification-empty {
    min-height: 185px;
    display: grid;
    place-items: center;
    gap: 6px;
    text-align: center;
    padding: 28px;
    color: var(--muted);
}

.notification-empty i {
    font-size: 30px;
    color: #c8d0dc;
}

.notification-footer {
    border-top: 1px solid var(--line);
    color: #011530;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.profile-dropdown a,
.profile-dropdown button,
.quick-actions-dropdown a {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.profile-dropdown a:hover,
.profile-dropdown button:hover,
.quick-actions-dropdown a:hover {
    background: var(--nav-bg);
    color: #ffffff;
}

/* Top-nav store switcher (super-admin) */
.store-switcher {
    position: relative;
    margin-inline-start: 10px;
}

.store-switcher > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 182, 0, 0.16);
    color: #a76b00;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.store-switcher > summary::-webkit-details-marker {
    display: none;
}

.store-switcher[open] > summary {
    background: rgba(255, 182, 0, 0.28);
}

.store-switcher-caret {
    font-size: 0.65rem;
    opacity: 0.8;
    transition: transform 0.15s ease;
}

.store-switcher[open] .store-switcher-caret {
    transform: rotate(180deg);
}

.store-switcher-menu {
    position: absolute;
    top: 38px;
    inset-inline-start: 0;
    z-index: 30;
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14);
    padding: 6px;
}

.store-switcher-menu form {
    margin: 0;
}

.store-switcher-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 6px;
    text-align: left;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.store-switcher-item:hover {
    background: var(--nav-bg);
    color: #ffffff;
}

.store-switcher-item.is-active {
    background: rgba(255, 182, 0, 0.16);
    color: #a76b00;
    font-weight: 700;
}

.store-switcher-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-switcher-check {
    font-size: 0.75rem;
}

.store-switcher-divider {
    height: 1px;
    background: var(--line);
    margin: 5px 4px;
}

/* Dashboard: top-selling product highlight */
.dashboard-top-product .metric-icon { background: rgba(255, 182, 0, 0.16); color: #a76b00; }
.dashboard-top-product-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-top-product-meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted, #6b7280);
}

/* Per-store "top selling product" pill in the grouped Product Sales report */
.store-top-product {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 182, 0, 0.16);
    color: #a76b00;
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
}

.invoice-print-store {
    margin: 4px 0 0;
    font-size: 0.95em;
    font-weight: 700;
    color: #001a3a;
}
.invoice-print-store strong { font-weight: 800; }

.products-pager-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.products-pager-row .pager { display: inline-flex; align-items: center; gap: 10px; }
.products-pager-row .pager-status { font-size: 0.85rem; color: var(--muted, #6b7280); font-weight: 600; }
.products-pager-row .pager button[disabled] { opacity: 0.45; cursor: not-allowed; }

.app-version {
    display: inline-block;
    margin: 0 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.14);
    color: #16a34a;
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.02em;
}

/* ---- Login: install-as-app (PWA) button ---- */
.auth-install-btn {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, transform 0.15s ease;
}
.auth-install-btn:hover { background: var(--accent, #ffb600); color: #001a3a; border-color: transparent; transform: translateY(-1px); }
.auth-install-btn i { font-size: 0.9rem; }

/* Dashboard / in-app install button */
.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 0;
    background: var(--accent, #ffb600);
    color: #001a3a;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.pwa-install-btn:hover { filter: brightness(0.94); transform: translateY(-1px); }
.pwa-install-btn i { font-size: 0.9rem; }

/* ---- Dashboard offline-sync indicator ---- */
.offline-sync-card {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #d7e6d9;
    background: #f2faf3;
}
.offline-sync-card .osc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #14532d;
}
.offline-sync-card .osc-title { margin-inline-start: auto; font-size: 0.78rem; font-weight: 600; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.03em; }
.offline-sync-card .osc-dot { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.offline-sync-card .osc-stats { display: flex; gap: 26px; margin-top: 10px; flex-wrap: wrap; }
.offline-sync-card .osc-item { display: flex; flex-direction: column; }
.offline-sync-card .osc-num { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.offline-sync-card .osc-num.osc-small { font-size: 1rem; }
.offline-sync-card .osc-item span:last-child { font-size: 0.75rem; color: var(--muted, #6b7280); margin-top: 3px; }
.offline-sync-card .osc-item.osc-warn .osc-num { color: #dc2626; }
.offline-sync-card.is-offline { background: #fef2f2; border-color: #f3c7c7; }
.offline-sync-card.is-offline .osc-head { color: #991b1b; }
.offline-sync-card.is-offline .osc-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.offline-sync-card.is-syncing { background: #fffbeb; border-color: #f2e2b6; }
.offline-sync-card.is-syncing .osc-head { color: #92400e; }
.offline-sync-card.is-syncing .osc-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.2); animation: osc-pulse 1.2s ease-in-out infinite; }
.offline-sync-card.is-failed { background: #fef2f2; border-color: #f3c7c7; }
.offline-sync-card.is-failed .osc-head { color: #991b1b; }
.offline-sync-card.is-failed .osc-dot { background: #dc2626; }
@keyframes osc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-color-scheme: dark) {
    .offline-sync-card { background: rgba(22,163,74,0.1); border-color: rgba(22,163,74,0.35); }
    .offline-sync-card .osc-head { color: #86efac; }
    .offline-sync-card.is-offline, .offline-sync-card.is-failed { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.35); }
    .offline-sync-card.is-offline .osc-head, .offline-sync-card.is-failed .osc-head { color: #fca5a5; }
    .offline-sync-card.is-syncing { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
    .offline-sync-card.is-syncing .osc-head { color: #fcd34d; }
}

/* ---- View-only (auditor) account banner ---- */
.view-only-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(2, 132, 199, 0.12);
    border: 1px solid rgba(2, 132, 199, 0.35);
    color: #075985;
    font-weight: 600;
    font-size: 0.9rem;
}
.view-only-banner i { font-size: 1rem; }
@media (prefers-color-scheme: dark) {
    .view-only-banner { background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.35); color: #7dd3fc; }
}

/* ---- Super-admin dashboard: product coverage across stores ---- */
.dashboard-coverage { margin: 6px 0 14px; }
.dashboard-coverage-metrics { margin-bottom: 10px; }
.dashboard-metric.coverage-good { border-inline-start: 3px solid #16a34a; }
.dashboard-metric.coverage-warn { border-inline-start: 3px solid #f59e0b; }
.coverage-missing-callout {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
}
.coverage-missing-callout h4 {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.98rem;
    color: #b45309;
}
.coverage-missing-list { display: flex; flex-wrap: wrap; gap: 8px; }
.coverage-missing-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(180, 83, 9, 0.35);
    color: #92400e;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.coverage-missing-pill:hover { background: #fff7ed; }
.coverage-missing-code {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.7;
    letter-spacing: 0.02em;
}
.coverage-all-good {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #16a34a;
    font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .coverage-missing-pill { background: #1f2937; color: #fcd34d; border-color: rgba(252, 211, 77, 0.35); }
    .coverage-missing-pill:hover { background: #374151; }
    .coverage-missing-callout h4 { color: #fcd34d; }
}

/* ---- Consolidated report (super-admin): charts ---- */
.consolidated-summary { margin: 14px 0 6px; }
.consolidated-charts {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 18px;
    margin: 8px 0 22px;
}
@media (max-width: 960px) { .consolidated-charts { grid-template-columns: 1fr; } }
.consolidated-chart-panel { padding: 18px 20px; }
.consolidated-chart-panel h3 { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.consolidated-chart-panel h3 i { color: #ffb600; }
.consolidated-table-title { margin: 6px 0 10px; }

.hbar-chart { display: flex; flex-direction: column; gap: 10px; }
.hbar-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 10px; }
.hbar-label { font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 16px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.hbar-fill {
    display: block; height: 100%; min-width: 3px; border-radius: 999px;
    background: linear-gradient(90deg, #0b1f3a, #2b4b7e);
}
.hbar-value { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }

.podium-chart { display: flex; flex-direction: column; gap: 14px; }
.podium-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; }
.podium-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #fff;
    background: #9aa3b2;
}
.podium-1 .podium-rank { background: linear-gradient(135deg, #f9c22e, #d99a00); }
.podium-2 .podium-rank { background: linear-gradient(135deg, #c9ced8, #9aa3b2); }
.podium-3 .podium-rank { background: linear-gradient(135deg, #e0a878, #b9793f); }
.podium-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.podium-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-track { height: 10px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.podium-fill { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: #ffb600; }
.podium-1 .podium-fill { background: linear-gradient(90deg, #f9c22e, #d99a00); }
.podium-meta { font-size: 0.8rem; color: var(--muted, #6b7280); }

.button.warning {
    background: #fff3e0;
    border-color: #ffd8a8;
    color: var(--warning);
}

.button.tiny {
    font-size: 11px;
    padding: 5px 7px;
}

.settings-table-actions {
    min-width: 220px;
}

.settings-table-actions,
.settings-table-actions form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.table-action-button.icon-only {
    width: 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
}

.table-action-button.danger {
    border-color: #ffc8bf;
    color: var(--danger);
}

.modal-helper {
    margin: -4px 0 18px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.purchase-import-modal {
    max-width: 760px;
}

.alert {
    border-radius: 4px;
    padding: 10px;
    font-size: 13px;
}

.alert.error {
    background: #fdecea;
    color: #912018;
    border: 1px solid #f8c4be;
}

.alert.success {
    background: #e8f8ee;
    color: #115e39;
    border: 1px solid #b8e3c7;
}

.alert.warning {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.hidden {
    display: none;
}

.danger-text {
    color: var(--danger);
    font-weight: 600;
}

.list-box {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px;
    min-height: 120px;
    max-height: 280px;
    overflow: auto;
    display: grid;
    gap: 8px;
}

.list-item,
.saved-cart-item {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.saved-cart-item {
    align-items: flex-start;
}

.saved-cart-item .meta {
    display: grid;
    gap: 2px;
}

.totals {
    display: grid;
    gap: 8px;
    margin: 10px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    padding: 10px 0;
}

.totals p {
    margin: 0;
}

.pos-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-footer {
    color: var(--muted);
    font-size: 12px;
    margin-top: 8px;
    padding-top: 10px;
}

.receipt-body {
    background: #fff;
}

.receipt {
    max-width: 400px;
    margin: 0 auto;
    padding: 10px;
    font-family: "Courier New", monospace;
}

.drawer {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
}

.drawer:not([open]) {
    border: 0;
    background: transparent;
    margin: 0;
}

.drawer summary {
    display: none;
}

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

.drawer-content {
    padding: 10px;
    border-top: 1px solid var(--line);
}

.section-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

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

.muted-panel {
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    padding: 10px;
}

.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

/* Screenshot parity layer for the Eventro reference UI. */
body {
    background: #f5f6fb;
}

.topbar {
    min-height: 90px;
    width: 100%;
    padding: 0 60px;
    background: #ffffff;
    border-bottom: 1px solid #d6dae2;
    position: sticky;
    top: 0;
    z-index: 50;
}

.layout {
    grid-template-columns: 260px 1fr;
    min-height: calc(100vh - 90px);
}

.sidebar {
    height: calc(100vh - 90px);
    position: sticky;
    top: 90px;
    display: block;
    padding-top: 18px;
    background: #011530;
    border-right: 0;
}

.sidebar-links,
.nav-section {
    padding: 0 0 12px;
    gap: 0;
}

.nav-section {
    margin-top: 2px;
}

.nav-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 16px;
    color: #d2d5da;
    opacity: 0.45;
    font-size: 12px;
}

.nav-heading::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #6b7280;
    opacity: 0.65;
}

.nav-link {
    min-height: 50px;
    margin: 0 12px 2px 6px;
    padding-left: 18px;
    gap: 14px;
    color: #ffffff;
    font-size: 14px;
    border-right: 4px solid transparent;
}

.nav-link i {
    width: 20px;
    color: #b9c1d1;
}

.nav-link.active,
.nav-link:hover {
    background: #ffb600;
    color: #011530;
    border-radius: 10px 0 0 10px;
    border-right-color: #ffffff;
}

.nav-link.active i,
.nav-link:hover i {
    color: #011530;
}

.nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-right-color: transparent;
    border-radius: 0;
}

.nav-link:hover:not(.active) i {
    color: #b9c1d1;
}

.nav-group {
    margin: 0 0 2px;
}

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

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

.nav-submenu {
    display: grid;
    gap: 2px;
    margin: 0 12px 8px 42px;
    padding: 4px 0 4px 12px;
    border-left: 1px solid rgba(185, 193, 209, 0.25);
}

.nav-sublink {
    color: #b9c1d1;
    text-decoration: none;
    min-height: 30px;
    display: flex;
    align-items: center;
    font-size: 13px;
    border-radius: 7px;
    padding: 0 10px;
    outline: none;
}

.nav-sublink:hover,
.nav-sublink.active {
    background: rgba(255, 182, 0, 0.12);
    color: #ffffff;
}

.nav-sublink.active {
    color: #ffb600;
    font-weight: 800;
}

.nav-sublink:focus,
.nav-sublink:focus-visible {
    outline: none;
    box-shadow: none;
}

.nav-group-shortcut {
    min-height: 42px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.topbar-left {
    gap: 18px;
}

.topbar-right {
    gap: 34px;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #4b5563;
    text-decoration: none;
}

.brand-logo strong {
    display: block;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 700;
}

.brand-logo small {
    display: block;
    color: #9ca3af;
    font-size: 7px;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.logo-mark {
    width: 22px;
    height: 22px;
    display: grid;
    grid-template-columns: repeat(2, 8px);
    grid-auto-rows: 8px;
    gap: 2px;
    transform: rotate(45deg);
}

.logo-mark span {
    border-radius: 1px;
}

.logo-mark span:nth-child(1) { background: #3a4756; }
.logo-mark span:nth-child(2) { background: #f26b2e; }
.logo-mark span:nth-child(3) { background: #d1d5db; }
.logo-mark span:nth-child(4) { background: #8b96a6; }

.dark-switch input {
    position: absolute;
    opacity: 0;
}

.switch-track {
    width: 64px;
    height: 36px;
    border-radius: 999px;
    background: #d1d5db;
    display: flex;
    align-items: center;
    padding: 3px;
    cursor: pointer;
}

.switch-knob {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    color: #ffb600;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.2);
    transition: transform 0.2s ease;
}

.dark-switch input:checked + .switch-track .switch-knob {
    transform: translateX(28px);
}

.topbar-pos {
    width: 122px;
    height: 50px;
    border-radius: 4px;
    background: #011530;
    color: #ffb600;
    font-size: 15px;
    font-weight: 600;
}

.top-icon {
    position: relative;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #011530;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 22px;
}

.top-icon.plus,
.top-icon.profile {
    background: #000000;
    color: #ffffff;
}

.top-icon.notify span {
    position: absolute;
    top: -10px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #f59aae;
    color: #d92342;
    font-size: 10px;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.profile-menu summary.top-icon {
    list-style: none;
}

.profile-dropdown {
    top: 64px;
    right: -24px;
    width: 240px;
    border: 0;
    border-radius: 2px;
    padding: 18px 0;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.12);
}

.profile-dropdown a,
.profile-dropdown button {
    padding: 13px 20px;
    font-size: 15px;
    color: #374151;
}

.profile-dropdown i {
    width: 18px;
    color: #111827;
}

.main-content {
    padding-bottom: 0;
    background: #f5f6fb;
}

.page-header {
    margin: 42px 70px 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid #d6dae2;
}

.page-header h2 {
    font-size: 31px;
    line-height: 1.2;
    color: #111827;
}

.page-subtitle {
    margin-top: 8px;
    color: #4b5563;
    font-size: 18px;
}

.content-wrap {
    margin: 34px 60px 58px;
    gap: 16px;
}

.panel,
.card,
.module-tabs {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
}

.panel {
    padding: 26px;
}

.panel-title {
    font-size: 34px;
    line-height: 1.2;
}

.panel-subtitle {
    font-size: 20px;
    color: #4b5563;
}

.button {
    min-width: 120px;
    height: 50px;
    justify-content: center;
    border-radius: 4px;
    font-size: 18px;
}

.button.secondary {
    min-width: auto;
    height: auto;
    font-size: 13px;
}

.module-tabs {
    min-height: 45px;
    align-items: center;
    padding: 0;
}

.module-tabs a,
.module-tabs button {
    padding: 13px 24px;
    font-size: 16px;
}

.module-tabs a.active,
.module-tabs button.active,
.module-tabs a:hover,
.module-tabs button:hover {
    box-shadow: inset 0 -3px 0 #ffb600;
}

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
    padding: 34px 26px;
    overflow: hidden;
}

.dashboard-metrics[data-zreport-cards] {
    margin-top: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .dashboard-metrics[data-zreport-cards] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-returns-metrics {
    margin-top: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-bottom: 18px;
}

@media (max-width: 900px) {
    .dashboard-returns-metrics {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.dashboard-returns-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 4px 26px 0;
    color: #6b5330;
    font-size: 13px;
    line-height: 1.5;
}

.dashboard-returns-note i {
    color: #d97706;
    margin-inline-end: 6px;
}

.metric-returns strong {
    color: #b45309;
}

.dashboard-panel-show {
    font-size: 13px;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-end: 10px;
}

.dashboard-panel-show select {
    padding: 4px 8px;
    border: 1px solid #d6dae2;
    border-radius: 6px;
}

.pos-offline-indicator {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.28);
}

.pos-offline-indicator.is-offline {
    background: #b42318;
}

.pos-offline-indicator.is-syncing {
    background: #b45309;
}

.pos-offline-indicator.is-failed {
    background: #7c2d12;
}

.settings-store-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #f4f6f8;
    border: 1px solid #e5e8ec;
    border-radius: 10px;
}

.settings-store-picker label {
    display: grid;
    gap: 6px;
    font-weight: 600;
    color: #374151;
}

.settings-store-picker select {
    min-width: 260px;
    padding: 8px 10px;
}

.settings-store-picker-hint {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.dark-mode .settings-store-picker {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
}

.dark-mode .settings-store-picker label {
    color: #c7ced8;
}

.dashboard-export-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.dashboard-export-label {
    font-weight: 600;
    color: #4b5563;
    margin-right: 4px;
}

.dark-mode .dashboard-export-label {
    color: #9aa4b2;
}

.dashboard-metric {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 92px;
    padding: 0 26px;
    border-left: 1px solid #d6dae2;
}

.dashboard-metric:first-child {
    border-left: 0;
}

.dashboard-metric .metric-icon {
    width: 42px;
    height: 42px;
}

.dashboard-metric .metric-day {
    color: #4b5563;
    align-self: start;
}

.dashboard-metric p {
    margin: 0 0 4px;
    font-weight: 700;
}

.dashboard-metric strong {
    display: block;
    font-size: 22px;
    white-space: nowrap;
}

.dashboard-count-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.dashboard-count-strip span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}

.dashboard-count-strip strong {
    color: #071326;
}

.performance-title {
    margin: 26px 0 16px;
    font-size: 20px;
    font-weight: 800;
}

.performance-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 325px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
    min-height: 360px;
}

.sales-chart {
    padding: 30px 36px;
}

.sales-chart h3 {
    margin: 0;
    font-size: 18px;
}

.chart-line {
    position: relative;
    margin: 130px 48px 0;
    height: 80px;
    background:
        linear-gradient(to bottom, transparent 0, transparent 23%, #e5e7eb 23.5%, transparent 24%),
        linear-gradient(to bottom, transparent 0, transparent 48%, #e5e7eb 48.5%, transparent 49%),
        linear-gradient(to bottom, transparent 0, transparent 73%, #e5e7eb 73.5%, transparent 74%);
}

.chart-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    height: 5px;
    background: #50acec;
    border-radius: 999px;
}

.chart-line > span {
    position: absolute;
    top: 32px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #50acec;
    box-shadow: 0 0 0 3px #e8f4fe;
}

.chart-line > span:nth-child(1) { left: 0%; }
.chart-line > span:nth-child(2) { left: 3.45%; }
.chart-line > span:nth-child(3) { left: 6.9%; }
.chart-line > span:nth-child(4) { left: 10.35%; }
.chart-line > span:nth-child(5) { left: 13.8%; }
.chart-line > span:nth-child(6) { left: 17.25%; }
.chart-line > span:nth-child(7) { left: 20.7%; }
.chart-line > span:nth-child(8) { left: 24.15%; }
.chart-line > span:nth-child(9) { left: 27.6%; }
.chart-line > span:nth-child(10) { left: 31.05%; }
.chart-line > span:nth-child(11) { left: 34.5%; }
.chart-line > span:nth-child(12) { left: 37.95%; }
.chart-line > span:nth-child(13) { left: 41.4%; }
.chart-line > span:nth-child(14) { left: 44.85%; }
.chart-line > span:nth-child(15) { left: 48.3%; }
.chart-line > span:nth-child(16) { left: 51.75%; }
.chart-line > span:nth-child(17) { left: 55.2%; }
.chart-line > span:nth-child(18) { left: 58.65%; }
.chart-line > span:nth-child(19) { left: 62.1%; }
.chart-line > span:nth-child(20) { left: 65.55%; }
.chart-line > span:nth-child(21) { left: 69%; }
.chart-line > span:nth-child(22) { left: 72.45%; }
.chart-line > span:nth-child(23) { left: 75.9%; }
.chart-line > span:nth-child(24) { left: 79.35%; }
.chart-line > span:nth-child(25) { left: 82.8%; }
.chart-line > span:nth-child(26) { left: 86.25%; }
.chart-line > span:nth-child(27) { left: 89.7%; }
.chart-line > span:nth-child(28) { left: 93.15%; }
.chart-line > span:nth-child(29) { left: 96.6%; }
.chart-line > span:nth-child(30) { left: 100%; }

.dynamic-sales-chart {
    height: 190px;
    margin-top: 74px;
}

.dynamic-sales-chart::before {
    top: auto;
    bottom: 16%;
    height: 2px;
    background: #e5e7eb;
}

.dynamic-sales-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dashboard-chart-fill {
    fill: rgba(80, 172, 236, 0.24);
    stroke: none;
}

.dashboard-chart-line {
    fill: none;
    stroke: #50acec;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.chart-line .dashboard-chart-point {
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%);
    background: #50acec;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 3px #d9efff;
    z-index: 3;
    cursor: pointer;
    outline: none;
}

.chart-line .dashboard-chart-point:hover,
.chart-line .dashboard-chart-point:focus,
.chart-line .dashboard-chart-point:focus-visible {
    box-shadow: 0 0 0 5px rgba(80, 172, 236, 0.24);
    z-index: 8;
}

.dashboard-chart-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(6px);
    width: max-content;
    min-width: 190px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #011530;
    color: #ffffff;
    box-shadow: 0 16px 36px rgba(1, 21, 48, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.dashboard-chart-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #011530;
}

.dashboard-chart-tooltip strong,
.dashboard-chart-tooltip span {
    position: static;
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    transform: none;
}

.dashboard-chart-tooltip strong {
    margin-bottom: 5px;
    font-size: 13px;
}

.dashboard-chart-tooltip span {
    font-size: 12px;
    line-height: 1.5;
}

.dashboard-chart-point:hover .dashboard-chart-tooltip,
.dashboard-chart-point.show-tooltip .dashboard-chart-tooltip,
.dashboard-chart-point:focus .dashboard-chart-tooltip,
.dashboard-chart-point:focus-visible .dashboard-chart-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dynamic-chart-labels {
    margin-top: 10px;
}

.chart-labels {
    margin: -2px 48px 0;
    display: flex;
    justify-content: space-between;
    color: #6b7280;
    font-size: 13px;
}

.chart-labels span {
    transform: rotate(-45deg);
    transform-origin: top left;
    white-space: nowrap;
}

.chart-menu {
    position: relative;
    z-index: 10;
    float: right;
    margin-top: 42px;
}

.chart-menu-button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #6b7280;
    display: grid;
    place-items: center;
    font-size: 22px;
    cursor: pointer;
}

.chart-menu-button:hover,
.chart-menu-button[aria-expanded="true"] {
    background: #eef0f4;
    color: #111827;
}

.chart-export-menu {
    position: absolute;
    right: 0;
    top: 32px;
    width: 178px;
    padding: 8px 0;
    border: 1px solid #9ca3af;
    background: #ffffff;
    color: #4b5563;
    box-shadow: 0 10px 26px rgba(17, 24, 39, 0.18);
}

.chart-export-menu[hidden] {
    display: none !important;
}

.chart-export-menu button {
    width: 100%;
    min-height: 28px;
    border: 0;
    background: transparent;
    color: #4b5563;
    display: block;
    padding: 5px 13px;
    text-align: left;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.chart-export-menu button:hover,
.chart-export-menu button:focus-visible {
    background: #f3f4f6;
    color: #111827;
    outline: none;
}

.chart-export-menu hr {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid #6b7280;
}

.dashboard-header-filter {
    min-width: 142px;
    min-height: 60px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
}

.dashboard-header-controls {
    display: grid;
    gap: 14px;
    min-width: min(300px, 28vw);
}

.dashboard-location-form {
    margin: 0;
}

.dashboard-location-form select {
    width: 100%;
    min-height: 48px;
    border: 1px solid #e1e5ee;
    border-radius: 8px;
    background: #ffffff;
    color: #4b5563;
    font: inherit;
    padding: 0 18px;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.06);
}

.dashboard-header-controls .dashboard-header-filter {
    width: 100%;
}

.dashboard-filter-drawer {
    margin-bottom: 18px;
}

.dashboard-filter-drawer:not([open]) {
    display: none;
}

.performance-side {
    border-left: 1px solid #e5e7eb;
    display: grid;
    align-content: start;
}

.side-stat {
    padding: 34px 34px 42px;
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 16px;
    align-items: start;
}

.side-stat p,
.side-stat strong {
    grid-column: 2 / span 2;
    margin: 0;
}

.side-stat p {
    font-weight: 800;
}

.side-stat strong {
    font-size: 25px;
}

.dashboard-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    margin-top: 24px;
    /* Each panel takes its natural height so a hidden (collapsed) panel shrinks to
       just its header instead of stretching to match a tall neighbour. */
    align-items: start;
}

.dashboard-data-panel {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
    overflow: visible;
    min-width: 0;
}

.dashboard-data-panel:not(.dashboard-snapshot-panel) {
    min-height: 330px;
}

/* Hidden (collapsed) panels reclaim their space instead of leaving an empty box. */
.dashboard-data-panel.is-collapsed {
    min-height: 0;
}

.dashboard-data-panel.is-collapsed > header {
    border-bottom: none;
}

.dashboard-data-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 0 32px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    user-select: none;
}

.dashboard-data-panel > header h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
}

.dashboard-data-panel .dashboard-collapse-icon {
    transition: transform .18s ease;
}

.dashboard-data-panel.is-collapsed .dashboard-collapse-icon {
    transform: rotate(180deg);
}

.dashboard-data-panel.is-collapsed .dashboard-panel-body {
    display: none;
}

.dashboard-data-panel > header h3 i {
    color: #20c8d8;
    font-size: 15px;
    margin-left: 5px;
}

.dashboard-info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #20c8d8;
    padding: 0;
    font-size: 14px;
    vertical-align: middle;
    cursor: help;
}

.dashboard-info-tip i {
    margin-left: 0 !important;
}

.dashboard-info-tip span {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    width: 282px;
    padding: 12px 14px;
    border: 1px solid #c8ccd4;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.18);
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 20;
}

.dashboard-info-tip span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #c8ccd4;
    border-bottom: 1px solid #c8ccd4;
    background: #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

.dashboard-info-tip span strong,
.dashboard-info-tip span em {
    display: block;
    font-style: normal;
}

.dashboard-info-tip span strong {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.dashboard-info-tip span em {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.6;
}

.dashboard-info-tip:hover span,
.dashboard-info-tip.show-tooltip span,
.dashboard-info-tip:focus span,
.dashboard-info-tip:focus-visible span {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dashboard-panel-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, 170px) minmax(150px, 1fr) minmax(120px, 150px);
    align-items: center;
    gap: 10px;
    padding: 18px 28px 16px;
}

.dashboard-page-size,
.dashboard-widget-location-select,
.dashboard-panel-search {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d8dde6;
    border-radius: 8px;
    background: #ffffff;
    color: #4b5563;
    font: inherit;
    font-size: 13px;
    padding: 0 12px;
}

.dashboard-page-size {
    min-width: 178px;
    text-overflow: clip;
}

.dashboard-widget-location-select {
    min-width: 160px;
    padding-right: 34px;
}

.dashboard-panel-search {
    justify-self: end;
}

.dashboard-panel-tools {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    min-width: 0;
}

.dashboard-panel-tools button {
    border: 0;
    background: transparent;
    color: #111827;
    cursor: pointer;
    font-size: 21px;
    width: 25px;
    height: 28px;
    display: inline-grid;
    place-items: center;
}

@media (max-width: 1180px) {
    .dashboard-panel-toolbar {
        grid-template-columns: minmax(150px, 1fr) auto;
    }

    .dashboard-panel-search {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

.dashboard-data-panel .table-wrap {
    padding: 0 32px;
    overflow-x: hidden;
}

.dashboard-data-panel .reference-table {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}

.dashboard-data-panel .reference-table th,
.dashboard-data-panel .reference-table td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: middle;
}

.dashboard-data-panel .reference-table th {
    font-size: 12px;
    padding: 10px 8px;
    line-height: 1.15;
}

.dashboard-data-panel .reference-table td {
    font-size: 13px;
    padding: 9px 8px;
    line-height: 1.25;
}

.dashboard-sales-order-table th,
.dashboard-sales-order-table td {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.dashboard-sales-order-table th {
    font-size: 9.75px !important;
    line-height: 1.12;
    overflow-wrap: normal;
    word-break: normal;
}

.dashboard-sales-order-table td {
    font-size: 12px !important;
    overflow-wrap: anywhere;
}

.dashboard-sales-order-table th:nth-child(1),
.dashboard-sales-order-table td:nth-child(1) {
    width: 13%;
}

.dashboard-sales-order-table th:nth-child(2),
.dashboard-sales-order-table td:nth-child(2) {
    width: 11%;
}

.dashboard-sales-order-table th:nth-child(3),
.dashboard-sales-order-table td:nth-child(3) {
    width: 12%;
}

.dashboard-sales-order-table th:nth-child(4),
.dashboard-sales-order-table td:nth-child(4) {
    width: 17%;
}

.dashboard-sales-order-table th:nth-child(5),
.dashboard-sales-order-table td:nth-child(5) {
    width: 12%;
}

.dashboard-sales-order-table th:nth-child(6),
.dashboard-sales-order-table td:nth-child(6) {
    width: 17%;
}

.dashboard-sales-order-table th:nth-child(7),
.dashboard-sales-order-table td:nth-child(7) {
    width: 18%;
}

.dashboard-data-panel .reference-empty {
    text-align: left;
}

.dashboard-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 32px 24px;
    color: #4b5563;
}

.dashboard-table-footer button {
    min-width: 68px;
    min-height: 32px;
    border: 1px solid #d8dde6;
    border-radius: 4px;
    background: #ffffff;
    color: #9ca3af;
}

.dashboard-snapshot-panel {
    /* Full-width summary: the 7 tiles flow in one tidy row on desktop instead
       of leaving an orphaned tile in a 3-column half-width grid. */
    grid-column: 1 / -1;
    min-height: 0;
}

.dashboard-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    padding: 30px 32px 34px;
}

.dashboard-snapshot-grid a {
    display: grid;
    gap: 8px;
    min-height: 92px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827;
    text-decoration: none;
    background: #fbfcff;
}

.dashboard-snapshot-grid strong {
    font-size: 22px;
}

.dashboard-snapshot-grid span {
    color: #6b7280;
    font-weight: 700;
}

.pos-location select {
    min-height: 32px;
    border: 1px solid rgba(1, 21, 48, 0.16);
    border-radius: 6px;
    background: #ffffff;
    color: #011530;
    padding: 0 28px 0 10px;
    font: inherit;
    max-width: 260px;
}

/* Reference auth screens from the Eventro POS opening flow. */
.auth-shell {
    position: relative;
    min-height: 100vh;
    background: #011530;
    color: #011530;
    padding: 112px 24px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-register-shell {
    min-height: 100vh;
    padding-bottom: 120px;
}

.auth-language {
    position: absolute;
    left: 38px;
    top: 48px;
    color: #ffffff;
    font-size: 20px;
    z-index: 3;
    border: 0;
    background: transparent;
    padding: 0;
}

.auth-language summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #ffffff;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    list-style: none;
}

.auth-language summary::-webkit-details-marker {
    display: none;
}

.auth-language-menu {
    width: 176px;
    max-height: calc(100vh - 110px);
    margin-top: 18px;
    padding: 12px 0;
    overflow: auto;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.auth-language-menu button {
    width: 100%;
    min-height: 40px;
    border: 0;
    background: transparent;
    color: #000000;
    display: flex;
    align-items: center;
    padding: 0 18px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.auth-language-menu button:hover,
.auth-language-menu button:focus-visible {
    background: #f5f6fb;
    outline: none;
}

[dir="rtl"] .auth-language-menu button {
    text-align: right;
}

.auth-signin-button {
    position: absolute;
    right: 32px;
    top: 26px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    min-width: 102px;
    min-height: 52px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
}

.auth-logo-card {
    min-width: 250px;
    min-height: 50px;
    padding: 8px 16px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}

.auth-logo-card .logo-mark {
    width: 38px;
    height: 32px;
}

.auth-logo-card .auth-uploaded-logo {
    max-width: 130px;
    max-height: 48px;
    object-fit: contain;
}

.auth-logo-card strong {
    display: block;
    color: #666666;
    font-size: 22px;
    line-height: 1.1;
}

.auth-logo-card small {
    display: block;
    color: #8b8b8b;
    font-size: 10px;
    letter-spacing: .02em;
    text-align: center;
}

.auth-card {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

.auth-login-card {
    width: 600px;
    max-width: min(600px, calc(100vw - 32px));
    padding: 54px 50px 64px;
}

.auth-login-card h1 {
    margin: 0 0 44px;
    color: #011530;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
}

.auth-form {
    display: grid;
    gap: 34px;
}

.auth-input,
.auth-password-field input,
.auth-icon-input input,
.auth-icon-input select {
    width: 100%;
    min-height: 82px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background: #ffffff;
    color: #011530;
    font-size: 20px;
    padding: 0 20px;
}

.auth-input::placeholder,
.auth-icon-input input::placeholder {
    color: #9aa1ac;
}

.auth-password-field {
    position: relative;
}

.auth-password-field input {
    padding-right: 64px;
}

.auth-password-field button {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 24px;
    cursor: pointer;
}

.auth-forgot {
    margin-top: -4px;
    color: #26364f;
    justify-self: end;
    text-decoration: none;
    font-size: 17px;
}

.auth-primary {
    min-height: 76px;
    border: 0;
    border-radius: 6px;
    background: #ffb600;
    color: #1f2937;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
}

.auth-bottom-link {
    margin: 28px 0 0;
    text-align: center;
    color: #1f2937;
    font-size: 17px;
}

.auth-bottom-link a {
    color: #011530;
    font-weight: 800;
    text-decoration: none;
}

.auth-help {
    margin: -26px 0 28px;
    text-align: center;
    color: #4b5563;
}

.auth-alert {
    border-radius: 6px;
    margin-bottom: 22px;
    padding: 12px 14px;
    font-size: 15px;
}

.auth-alert.error {
    background: #fee2e2;
    color: #991b1b;
}

.auth-alert.success {
    background: #dcfce7;
    color: #166534;
}

.auth-register-card {
    width: 1000px;
    max-width: min(1000px, calc(100vw - 32px));
    padding: 90px 70px 66px;
}

.auth-register-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 38px;
}

.auth-register-form h2 {
    grid-column: 1 / -1;
    margin: 0 0 -10px;
    color: #011530;
    font-size: 25px;
    font-weight: 800;
}

.auth-register-form label {
    display: grid;
    gap: 10px;
    color: #111827;
    font-size: 20px;
}

.auth-register-form .wide {
    grid-column: 1 / -1;
}

.auth-icon-input {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 62px;
}

.auth-icon-input i {
    border: 1px solid #d8d8d8;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    color: #555555;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.auth-icon-input input,
.auth-icon-input select {
    min-height: 62px;
    border-radius: 0 6px 6px 0;
}

.auth-native-file {
    min-height: 42px;
    color: #111827;
    font-size: 18px;
}

.auth-register-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding-top: 22px;
}

.auth-register-actions .auth-primary {
    min-width: 260px;
}

@media (max-width: 900px) {
    .auth-shell {
        padding-top: 90px;
    }

    .auth-language,
    .auth-signin-button {
        position: static;
        align-self: flex-start;
        margin-bottom: 18px;
    }

    .auth-signin-button {
        align-self: flex-end;
        margin-top: -70px;
    }

    .auth-login-card,
    .auth-register-card {
        padding: 34px 24px;
    }

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

@media (min-width: 901px) and (max-height: 820px) {
    .auth-shell {
        padding-top: 96px;
        padding-bottom: 16px;
    }

    .auth-logo-card {
        margin-bottom: 30px;
    }
}

.users-shell {
    display: grid;
    gap: 16px;
}

.users-panel {
    padding: 22px;
}

.role-edit-panel {
    padding: 42px 26px 26px;
}

.users-panel .panel-header {
    align-items: flex-start;
    border-bottom: 1px solid #d6dae2;
    margin-bottom: 26px;
    padding-bottom: 27px;
}

.users-panel .panel-title {
    font-size: 34px;
    line-height: 1.2;
}

.users-panel .panel-subtitle {
    margin-top: 2px;
    font-size: 20px;
}

.users-panel .panel-actions .button {
    min-width: 120px;
    height: 50px;
    font-weight: 800;
}

.users-panel .panel-actions {
    padding-top: 18px;
}

.role-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 285px);
    gap: 18px;
    margin-top: 0;
}

.role-card {
    min-height: 96px;
    border: 1px solid #d6dae2;
    border-radius: 7px;
    padding: 21px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-weight: 800;
}

.role-actions {
    display: flex;
    gap: 20px;
    font-size: 18px;
}

.role-actions a {
    color: #111827;
}

.role-action-button,
.table-actions button {
    border: 0;
    background: transparent;
    color: #111827;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    font: inherit;
}

.role-actions .danger,
.table-actions .danger {
    color: #e33d52;
}

.role-edit-form {
    display: grid;
    gap: 20px;
}

.role-edit-form h3 {
    margin: 0;
    font-size: 38px;
}

.role-edit-form > p,
.role-edit-form h4 {
    margin: 0;
    color: #4b5563;
    font-size: 23px;
}

.role-name-field {
    max-width: 445px;
    margin: 18px 0 2px;
    font-size: 20px;
}

.role-name-field input {
    min-height: 60px;
    font-size: 20px;
    padding: 0 30px;
    border-radius: 8px;
}

.permission-row {
    display: grid;
    grid-template-columns: 125px 230px minmax(0, 1fr);
    gap: 20px;
    padding: 30px 0;
    border-top: 1px solid #111827;
}

.permission-group-name {
    font-weight: 800;
    font-size: 20px;
}

.permission-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.permission-check {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 16px;
    color: #374151;
    font-size: 20px;
}

.permission-check input {
    accent-color: #ffb600;
    width: 28px;
    height: 28px;
}

.role-edit-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 18px;
    border-top: 1px solid #d6dae2;
}

.role-edit-actions .button {
    background: #ffb600;
    border-color: #ffb600;
    min-width: 112px;
    height: 42px;
    font-size: 17px;
}

.settings-return-bar {
    /* Slim floating back control instead of an empty full-width white bar. */
    display: flex;
    align-items: center;
    padding: 0;
    margin-bottom: 2px;
}

.settings-return-bar a {
    width: 50px;
    height: 50px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #6b7280;
    text-decoration: none;
    font-size: 20px;
    margin-left: 0;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.14);
}

.dark-mode .settings-return-bar {
    background: transparent;
    box-shadow: none;
}

.settings-panel {
    padding: 26px;
}

.settings-title {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 26px;
    margin-bottom: 38px;
}

.settings-title h3 {
    margin: 0;
    font-size: 38px;
    line-height: 1.2;
}

.settings-title p {
    margin: 10px 0 0;
    color: #4b5563;
    font-size: 23px;
}

.settings-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.settings-tile {
    min-height: 62px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 19px;
    font-weight: 700;
}

.settings-tile:hover {
    border-color: #ffb600;
    box-shadow: inset 0 -2px 0 #ffb600;
}

.business-settings-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 36px;
}

.business-settings-form label {
    display: block;
    color: #111827;
    font-size: 20px;
}

.settings-info {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: #25d6d2;
    color: #ffffff;
    vertical-align: middle;
    margin-left: 5px;
    cursor: help;
}

.settings-info::before {
    content: "i";
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.business-settings-form input,
.business-settings-form select,
.business-settings-form textarea {
    width: 100%;
    margin-top: 8px;
    min-height: 63px;
    border-color: #e5e7eb;
    background: #ffffff;
    font-size: 20px;
    padding: 0 30px;
    border-radius: 8px;
}

.business-settings-form textarea {
    min-height: 122px;
    padding-top: 18px;
    resize: vertical;
}

.business-settings-form small {
    color: #9ca3af;
    font-size: 17px;
    font-style: italic;
}

.settings-checkbox-label {
    display: grid !important;
    align-content: start;
}

.settings-toggle-row {
    min-height: 63px;
    margin-top: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 30px;
    background: #ffffff;
}

.settings-toggle-row input {
    width: 24px;
    min-height: auto;
    height: 24px;
    margin: 0;
    padding: 0;
    accent-color: #ffb600;
}

.settings-assumption-note {
    grid-column: 1 / -1;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.5;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    padding: 14px 18px;
}

.file-control {
    position: relative;
    width: 100%;
    min-height: 63px;
    display: flex;
    align-items: center;
}

.file-control input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-control span {
    width: 122px;
    height: 36px;
    background: #ffb600;
    color: #111827;
    border: 1px solid #e8a900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
}

.settings-submit-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 10px;
}

.settings-update-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #e33d52;
    color: #ffffff;
    min-width: 156px;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 2px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.settings-reference-mode .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

.settings-reference-mode .topbar {
    justify-content: normal;
    padding: 0 3.188rem;
}

.settings-reference-mode .topbar-right {
    margin-left: auto;
}

.settings-reference-mode .main-content {
    background: #f5f6fb;
}

.settings-reference-mode .content-wrap {
    margin: 34px 60px 58px;
}

.pos-terminal-mode .topbar,
.pos-terminal-mode .sidebar {
    display: none;
}

.pos-terminal-mode .layout {
    display: block;
    min-height: 100vh;
}

.pos-terminal-mode .main-content {
    min-height: 100vh;
    padding: 0;
    background: #ffffff;
}

.pos-terminal-mode .content-wrap {
    display: block;
    margin: 0;
}

.pos-terminal-shell {
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    padding-bottom: 118px;
    background: #ffffff;
    color: #0f172a;
    font-family: "Nunito Sans", "Segoe UI", Tahoma, Arial, sans-serif;
}

.pos-terminal-header {
    min-height: 74px;
    border-bottom: 1px solid #d8dce4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 24px;
}

.pos-terminal-title,
.pos-terminal-tools {
    display: flex;
    align-items: center;
}

.pos-terminal-title {
    flex: 1 1 auto;
    min-width: 0;
    gap: 16px;
}

.pos-back-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #011530;
    background: #ffffff;
    border: 1px solid #e5eaf3;
    box-shadow: 0 2px 10px rgba(31, 41, 55, 0.12);
    font-size: 18px;
}

.pos-terminal-title h1 {
    margin: 0;
    color: #011530;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
}

.pos-location {
    display: inline-flex;
    align-items: baseline;
    min-width: 0;
    gap: 8px;
    color: #1f2937;
    font-size: 17px;
}

.pos-location strong {
    font-weight: 800;
}

.pos-location select {
    max-width: min(300px, 24vw);
    min-height: 38px;
    padding: 4px 12px;
    font-size: 17px;
}

.pos-clock {
    color: #1f2937;
    font-size: 17px;
    white-space: nowrap;
}

.pos-calendar-icon {
    color: #6b7280;
    font-size: 18px;
}

.pos-terminal-tools {
    flex: 0 1 auto;
    gap: clamp(16px, 2.2vw, 38px);
}

.pos-terminal-tools button {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #111827;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 22px;
    padding: 0;
}

.pos-terminal-tools button:hover,
.pos-terminal-tools button:focus-visible {
    color: #ffb600;
    outline: none;
}

.pos-terminal-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 37vw);
    min-height: calc(100vh - 192px);
}

.pos-terminal-left {
    min-width: 0;
    padding: 14px 20px 0 28px;
}

.pos-entry-row {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 40px minmax(280px, 1fr);
    align-items: center;
    gap: 10px;
}

.pos-customer-field,
.pos-product-search {
    display: grid;
    align-items: center;
    gap: 12px;
}

.pos-customer-field {
    grid-template-columns: minmax(0, 1fr) 30px;
}

.pos-product-search {
    grid-template-columns: minmax(0, 1fr) 30px;
}

.pos-customer-field select,
.pos-product-search input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #ffffff;
    color: #111827;
    font-size: 18px;
    padding: 0 12px;
}

.pos-customer-field select {
    border-radius: 7px;
}

.pos-search-icon,
.pos-blue-add {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: none;
    cursor: pointer;
    font-size: 18px;
}

.pos-blue-add {
    color: #1778dc;
    font-size: 22px;
}

.pos-cart-wrap {
    margin-top: 22px;
}

.pos-cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.pos-cart-table th,
.pos-cart-table td {
    border-bottom: 1px solid #eef0f4;
    color: #111827;
    padding: 13px 12px;
    font-size: 18px;
    text-align: left;
    vertical-align: middle;
}

.pos-cart-table th {
    font-weight: 800;
    background: #ffffff;
}

.pos-cart-table .pos-image-cell,
.pos-cart-table .pos-remove-head {
    width: 58px;
    text-align: center;
}

.pos-cart-table input {
    width: 100px;
    min-height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
}

.pos-cart-product {
    display: grid;
    gap: 4px;
}

.pos-cart-product small {
    color: #6b7280;
    font-size: 13px;
}

.pos-quantity-control {
    display: inline-grid;
    grid-template-columns: 34px 104px 34px;
    align-items: center;
    gap: 6px;
}

.pos-quantity-control button {
    border: 0;
    background: transparent;
    color: #1fce91;
    cursor: pointer;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.pos-quantity-control button:first-child {
    color: #d73665;
}

.pos-quantity-unit {
    display: block;
    margin-top: 6px;
    color: #6b7280;
    font-size: 14px;
}

.pos-item-discount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.pos-item-discount input {
    width: 92px;
    min-height: 32px;
    font-size: 13px;
}

.pos-cart-remove {
    min-width: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
}

.pos-info-dot {
    position: relative;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #34d5df;
    color: #ffffff;
    display: inline-grid;
    place-items: center;
    font-size: 14px;
    margin-left: 5px;
    cursor: help;
    border: 0;
    font-weight: 900;
}

.pos-info-dot .help-tip,
.settings-info .help-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    width: min(280px, 82vw);
    padding: 10px 12px;
    border: 1px solid #c8ccd4;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.18);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
    z-index: 50;
}

.pos-info-dot .help-tip::after,
.settings-info .help-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #c8ccd4;
    border-bottom: 1px solid #c8ccd4;
    background: #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

.pos-info-dot:hover .help-tip,
.pos-info-dot.show-tooltip .help-tip,
.pos-info-dot:focus-visible .help-tip,
.settings-info:hover .help-tip,
.settings-info.show-tooltip .help-tip,
.settings-info:focus-visible .help-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pos-brand-panel {
    border-left: 1px solid #d6dae2;
    min-width: 0;
    padding: 24px 16px 18px;
    min-height: 100%;
    overflow-y: auto;
}

.pos-products-panel-title {
    margin: 0 0 18px;
    padding: 13px 16px;
    border-radius: 5px;
    background: #f8fafc;
    color: #001a3d;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.pos-product-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 14px 20px;
    align-items: start;
    max-width: none;
}

.pos-product-results .list-item {
    grid-column: 1 / -1;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 8px rgba(17, 24, 39, 0.06);
}

.pos-product-results .button {
    min-width: 70px;
    height: 34px;
    font-size: 13px;
}

.pos-empty-products {
    grid-column: 1 / -1;
    max-width: 190px;
    margin: 0;
    color: #111827;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
    text-align: center;
}

.pos-product-card {
    min-height: 130px;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    background: #ffffff;
    color: #4b5563;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(17, 24, 39, 0.08);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pos-product-card:hover,
.pos-product-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(17, 24, 39, 0.14);
    outline: none;
}

.pos-product-card-image {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: #eef1f6;
    color: #b7bec9;
    font-size: 25px;
    position: relative;
}

.pos-stock-badge {
    position: absolute;
    top: -8px;
    right: -14px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(17, 24, 39, 0.18);
}

.pos-stock-badge.low {
    background: #fff4e5;
    color: #ad5b00;
    border: 1px solid #ffd8a8;
}

.pos-stock-badge.out {
    background: #fdecec;
    color: #b42318;
    border: 1px solid #f5c2c0;
}

.pos-product-card.is-low-stock {
    border-color: #ffd8a8;
}

.pos-product-card.is-out-of-stock {
    border-color: #f5c2c0;
    opacity: 0.85;
}

.pos-product-card.is-out-of-stock .pos-product-card-image {
    background: #fdecec;
}

.pos-product-card strong {
    color: #4b5563;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.pos-product-card span:last-child {
    font-size: 17px;
    font-weight: 800;
}

.pos-terminal-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 118px;
    background: #f8f9fc;
    border-top: 1px solid #eef0f4;
    z-index: 25;
    padding: 10px 28px;
}

.pos-footer-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 18px;
    font-size: 18px;
}

.pos-footer-summary strong {
    font-weight: 400;
}

.pos-payable {
    justify-self: end;
    font-size: 34px;
    font-weight: 800;
}

.pos-payable strong {
    font-weight: 800;
}

.pos-footer-actions {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.pos-adjustments,
.pos-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pos-adjustments label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 800;
}

.pos-adjustments button {
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #111827;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 19px;
    padding: 0;
}

.pos-adjustments strong {
    color: #6b7280;
    font-size: 15px;
}

.pos-action-buttons button {
    height: 34px;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    padding: 0 22px;
}

.pos-cancel-button {
    background: #d20b28;
}

.pos-quotation-button {
    background: #5945a5;
}

.pos-pay-button {
    background: #011530;
}

.pos-hidden-totals {
    display: none;
}

.pos-toast {
    position: fixed;
    right: 28px;
    bottom: 136px;
    min-width: 320px;
    max-width: 460px;
    border-radius: 4px;
    padding: 14px 18px;
    background: #ffb600;
    color: #111827;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.18);
    font-size: 15px;
    z-index: 50;
}

.pos-toast.error {
    background: #fdecea;
    color: #912018;
    border: 1px solid #f8c4be;
}

.pos-toast.success {
    background: #ffb600;
    color: #111827;
}

.pos-toast.warning {
    background: #fff7df;
    color: #7c4a03;
    border: 1px solid #ffd56a;
}

@media (max-width: 1500px) {
    .pos-terminal-header {
        padding-inline: 18px;
    }

    .pos-terminal-tools {
        gap: 18px;
    }

    .pos-terminal-main {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 35vw);
    }

    .pos-entry-row {
        grid-template-columns: minmax(230px, 330px) 36px minmax(250px, 1fr);
    }

    .pos-location select {
        max-width: 245px;
    }

    .pos-product-results {
        gap: 12px 14px;
    }
}

.pos-floating-panel {
    position: fixed;
    right: 28px;
    top: 104px;
    z-index: 45;
    width: 420px;
    background: transparent;
    border: 0;
    padding: 0;
}

.pos-scanner-panel {
    top: 96px;
    width: min(480px, calc(100vw - 36px));
}

.pos-scanner-help {
    margin: 0 0 14px;
    color: #4b5563;
    line-height: 1.45;
    font-size: 14px;
}

.pos-scanner-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.pos-scanner-actions .reference-yellow-action,
.pos-scanner-actions .reference-filter-button {
    min-height: 42px;
    border-radius: 6px;
    padding: 0 18px;
    text-decoration: none;
}

.pos-scanner-video-wrap {
    position: relative;
    min-height: 220px;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 182, 0, .12) 1px, transparent 1px),
        linear-gradient(rgba(255, 182, 0, .12) 1px, transparent 1px),
        #0f172a;
    background-size: 24px 24px;
}

.pos-scanner-video-wrap::after {
    content: "";
    position: absolute;
    inset: 22%;
    border: 3px solid #ffb600;
    border-radius: 16px;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, .32);
    pointer-events: none;
}

.pos-scanner-video-wrap video {
    width: 100%;
    height: 260px;
    display: block;
    object-fit: cover;
}

.pos-scanner-status {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 7px;
    background: #eff6ff;
    color: #001a3a;
    font-size: 14px;
    line-height: 1.4;
}

.pos-scanner-status.error {
    background: #fdecea;
    color: #912018;
    border: 1px solid #f8c4be;
}

.pos-scanner-status.success {
    background: #ecfdf3;
    color: #087443;
    border: 1px solid #b7ebc6;
}

.pos-scanner-manual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 10px;
}

.pos-scanner-manual input {
    min-height: 42px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 15px;
}

.pos-scanner-manual button {
    border: 0;
    border-radius: 6px;
    background: #011530;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.pos-payment-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.pos-payment-backdrop.show {
    opacity: 1;
}

.pos-payment-modal {
    position: relative;
    width: min(1000px, calc(100vw - 48px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    padding: 32px 38px 0;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
    transform: translateY(12px);
    transition: transform 0.16s ease;
}

.pos-payment-backdrop.show .pos-payment-modal {
    transform: translateY(0);
}

.pos-payment-close {
    position: absolute;
    top: 32px;
    right: 34px;
    border: 0;
    background: transparent;
    color: #b7bcc7;
    cursor: pointer;
    font-size: 20px;
}

.pos-payment-modal h2 {
    margin: 0;
    color: #111827;
    font-size: 36px;
    line-height: 1;
}

.pos-payment-divider {
    height: 1px;
    margin: 24px 0 16px;
    background: #edf0f5;
}

.pos-payment-advance {
    margin: 0 0 14px;
    color: #111827;
    font-size: 18px;
}

.pos-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 30px;
    align-items: start;
}

.pos-payment-main {
    display: grid;
    gap: 18px;
}

.pos-payment-rows {
    display: grid;
    gap: 14px;
}

.pos-payment-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
    background: #f1efef;
    padding: 14px 12px 16px;
}

.pos-payment-row label,
.pos-payment-notes label {
    display: grid;
    gap: 6px;
    color: #111827;
    font-size: 18px;
}

.pos-payment-row input,
.pos-payment-row select,
.pos-payment-row textarea,
.pos-payment-notes textarea {
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: #ffffff;
    color: #111827;
    font-size: 17px;
    padding: 9px 11px;
}

.pos-payment-row input,
.pos-payment-row select {
    min-height: 44px;
}

.pos-payment-row textarea {
    min-height: 92px;
    resize: vertical;
}

.pos-payment-row .wide {
    grid-column: 1 / -1;
}

.pos-payment-method-fields {
    display: grid;
    gap: 18px 36px;
}

.pos-payment-method-fields.empty-fields {
    display: none;
}

.pos-payment-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.pos-payment-notes textarea {
    min-height: 72px;
    border: 1px solid #e5e7eb;
    resize: vertical;
}

.pos-payment-summary {
    display: grid;
    gap: 0;
    background: #ff8418;
    color: #ffffff;
    padding: 10px 26px;
}

.pos-payment-summary div {
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 5px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.45);
}

.pos-payment-summary div:last-child {
    border-bottom: 0;
}

.pos-payment-summary span {
    font-size: 16px;
    font-weight: 800;
}

.pos-payment-summary strong {
    font-size: 22px;
    line-height: 1.15;
}

.pos-payment-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    margin: 24px -38px 0;
    padding: 16px 38px;
    border-top: 1px solid #edf0f5;
    background: #ffffff;
}

.pos-payment-link-button {
    border: 0;
    background: transparent;
    color: #111827;
    cursor: pointer;
    font-size: 18px;
}

.pos-payment-finalize {
    min-width: 200px;
    height: 50px;
    border: 0;
    border-radius: 5px;
    background: #ffb600;
    color: #111827;
    cursor: pointer;
    font-size: 19px;
}

.pos-floating-panel:not([open]) {
    display: none;
}

.pos-floating-panel > summary {
    display: none;
}

.pos-floating-panel > summary::-webkit-details-marker {
    display: none;
}

.pos-floating-content {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(17, 24, 39, 0.18);
}

.pos-floating-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pos-floating-header strong {
    font-size: 20px;
}

.pos-floating-header button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #111827;
    cursor: pointer;
}

.pos-payment-panel label,
.pos-floating-panel label {
    display: grid;
    gap: 6px;
    font-size: 14px;
    color: #374151;
}

.pos-payment-panel input,
.pos-floating-panel select {
    min-height: 42px;
    font-size: 15px;
}

.datatable-toolbar {
    border-top: 1px solid #d6dae2;
    border-bottom: 0;
    padding: 24px 0 20px;
}

.export-icons {
    gap: 22px;
    margin-left: 52px;
}

.export-icons button {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 21px;
}

.table th {
    background: #eaf3ff;
    color: #111827;
    padding: 14px 12px;
}

.table td {
    padding: 20px 12px;
}

.table-actions {
    display: flex;
    gap: 20px;
    font-size: 18px;
}

.table-footer-note {
    margin: 16px 0 6px;
    color: #4b5563;
    font-size: 16px;
}

.pager {
    display: flex;
    gap: 8px;
}

.pager button {
    border: 1px solid #d6dae2;
    background: #ffffff;
    color: #9ca3af;
    padding: 7px 10px;
    border-radius: 3px;
}

.users-panel .datatable-toolbar {
    border-top: 0;
    margin-bottom: 39px;
    padding: 0 15px 0 28px;
}

.users-panel .toolbar-left,
.users-panel .toolbar-right {
    gap: 0;
}

.users-panel .datatable-toolbar label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #111827;
    font-size: 16px;
}

.users-panel .datatable-toolbar select {
    width: 80px;
    height: 32px;
    padding: 5px 10px;
    font-size: 14px;
}

.users-panel .export-icons {
    gap: 24px;
    margin-left: 62px;
}

.users-panel .export-icons button {
    width: 28px;
    height: 32px;
    font-size: 22px;
}

.users-panel .toolbar-right input {
    width: 162px;
    height: 32px;
    border-radius: 2px;
    font-size: 14px;
}

.users-panel .table-wrap {
    overflow: visible;
}

.users-panel .table {
    table-layout: fixed;
}

.users-panel .table.compact th {
    background: #eaf3ff;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 12px;
}

.users-panel .table.compact td {
    color: #4b5563;
    font-size: 16px;
    padding: 20px 12px;
    vertical-align: middle;
}

.users-panel .table-actions {
    gap: 20px;
    font-size: 19px;
}

.sortable-th {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    font: inherit;
    text-align: left;
    text-transform: uppercase;
}

.sort-glyph {
    color: #9ca3af;
    font-size: 14px;
}

.column-menu {
    position: absolute;
    z-index: 20;
    margin: -22px 0 12px 360px;
    width: 220px;
    background: #ffffff;
    border: 1px solid #d6dae2;
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14);
    padding: 10px;
}

.column-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    font-size: 14px;
}

.datatable-loader {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 18px 0 8px;
}

.datatable-loader span {
    width: 12px;
    height: 28px;
    border-radius: 2px;
    animation: loader-rise 0.8s ease-in-out infinite alternate;
}

.datatable-loader span:nth-child(1) { background: #fff0b8; animation-delay: 0s; }
.datatable-loader span:nth-child(2) { background: #ffe46d; animation-delay: 0.08s; }
.datatable-loader span:nth-child(3) { background: #ffb600; animation-delay: 0.16s; }
.datatable-loader span:nth-child(4) { background: #011530; animation-delay: 0.24s; }

@keyframes loader-rise {
    from { transform: scaleY(0.65); opacity: 0.65; }
    to { transform: scaleY(1); opacity: 1; }
}

body.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(1, 21, 48, 0.42);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.modal-backdrop.show {
    opacity: 1;
}

.ui-modal {
    position: relative;
    width: min(760px, calc(100vw - 40px));
    max-height: calc(100vh - 80px);
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(17, 24, 39, 0.28);
    padding: 28px;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.16s ease;
}

.modal-backdrop.show .ui-modal {
    transform: translateY(0) scale(1);
}

.ui-modal.narrow {
    width: min(470px, calc(100vw - 40px));
}

.ui-modal h3 {
    margin: 0 0 20px;
    font-size: 28px;
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
}

.modal-form {
    gap: 16px;
}

.modal-form label {
    color: #111827;
    font-size: 15px;
}

.modal-form input,
.modal-form select {
    min-height: 42px;
    font-size: 15px;
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-line input {
    width: 18px;
    height: 18px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    margin-top: 8px;
}

.danger-button {
    background: #e33d52;
    border-color: #e33d52;
    color: #ffffff;
}

.detail-list {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px 16px;
    margin: 0;
}

.detail-list dt {
    color: #6b7280;
    font-weight: 700;
}

.detail-list dd {
    margin: 0;
    color: #111827;
}

.users-panel .table-footer-note {
    margin: 16px 0 8px;
    color: #4b5563;
    font-size: 16px;
}

.users-panel .pager {
    gap: 8px;
}

.users-panel .pager button {
    padding: 7px 10px;
    font-size: 14px;
}

.page-footer {
    display: none;
}

@media (max-width: 1200px) {
    .grid.metrics,
    .grid.three-columns,
    .pos-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pos-terminal-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 24px;
    }

    .pos-terminal-tools {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
    }

    .pos-terminal-main {
        grid-template-columns: 1fr;
    }

    .pos-brand-panel {
        border-left: 0;
        border-top: 1px solid #d6dae2;
        padding-left: 38px;
    }

    .pos-entry-row {
        grid-template-columns: 1fr 44px;
    }

    .pos-product-search {
        grid-column: 1 / -1;
    }
}

.invoice-detail-backdrop {
    align-items: start;
    overflow: auto;
    padding: 18px 0;
}

.invoice-detail-modal {
    width: min(1500px, calc(100vw - 72px));
    max-height: none;
    margin: 0 auto;
    padding: 44px 48px 28px;
    border-radius: 4px;
    color: #1f2933;
    box-shadow: 0 28px 90px rgba(3, 12, 27, 0.34);
}

.invoice-detail-modal .modal-close {
    color: #111827;
    opacity: 0.55;
}

.invoice-detail-topline {
    display: grid;
    grid-template-columns: 1.15fr 1.25fr 1fr auto;
    gap: 42px;
    align-items: start;
    margin-bottom: 20px;
    padding-right: 14px;
    font-size: 14px;
    line-height: 1.45;
}

.invoice-detail-topline p {
    margin: 0 0 4px;
}

.invoice-detail-date {
    min-width: 160px;
    text-align: right;
}

.invoice-detail-section h4,
.invoice-activity-section h4 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

.invoice-detail-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.invoice-detail-table,
.invoice-activity-table,
.print-document-table {
    width: 100%;
    border-collapse: collapse;
    color: #334155;
    font-size: 13px;
}

.invoice-detail-table th,
.invoice-activity-table th {
    background: #eaf3ff;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    text-transform: none;
}

.invoice-detail-table td,
.invoice-detail-table th,
.invoice-activity-table td,
.invoice-activity-table th {
    border: 0;
    border-bottom: 1px solid #edf1f7;
    padding: 8px 8px;
    text-align: left;
    vertical-align: top;
}

.invoice-detail-table tbody tr:nth-child(even),
.payment-info-table tbody tr:nth-child(even) {
    background: #fbfcfe;
}

.invoice-detail-midgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr);
    gap: 30px;
    align-items: start;
    margin-top: 20px;
}

.invoice-detail-summary {
    margin-top: 0;
    border-top: 1px solid #edf1f7;
}

.invoice-detail-summary div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    min-height: 30px;
    align-items: center;
    border-bottom: 1px solid #edf1f7;
    color: #111827;
    font-size: 13px;
}

.invoice-detail-summary strong {
    font-weight: 800;
}

.invoice-detail-summary span {
    text-align: right;
    color: #4b5563;
}

.invoice-detail-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 18px 0 12px;
}

.invoice-detail-notes label {
    display: grid;
    gap: 6px;
    color: #111827;
    font-size: 14px;
}

.invoice-detail-notes span {
    display: block;
    min-height: 32px;
    border: 1px solid #dfe5ed;
    background: #fafafa;
    padding: 8px 10px;
    color: #4b5563;
}

.invoice-detail-qr-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fbfcff;
}

.invoice-detail-qr-card h4 {
    margin: 0 0 4px;
    font-size: 15px;
}

.invoice-detail-qr-card p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
}

.invoice-detail-qr-card img {
    width: 112px;
    height: 112px;
    image-rendering: pixelated;
    border: 1px solid #111827;
    background: #ffffff;
}

.invoice-activity-section {
    padding-bottom: 16px;
    border-bottom: 1px solid #edf1f7;
}

.invoice-activity-table th,
.invoice-activity-table td {
    background: #ffffff;
}

.activity-note-line {
    display: grid;
    grid-template-columns: 150px auto;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.activity-note-line span {
    justify-self: start;
    border-radius: 2px;
    background: #011530;
    color: #ffffff;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1;
}

.invoice-detail-footer {
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 24px 20px 0;
}

.invoice-footer-link,
.invoice-close-button {
    border: 0;
    background: transparent;
    color: #1f2937;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

.invoice-kot-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 138px;
    min-height: 42px;
    border: 0;
    border-radius: 4px;
    background: #ffad3b;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(255, 173, 59, 0.28);
}

.invoice-action-popover {
    width: 210px;
    max-height: 360px;
    overflow-y: auto;
}

.invoice-shipping-modal,
.invoice-notification-modal {
    max-width: 760px;
}

.invoice-shipping-modal h3,
.invoice-notification-modal h3 {
    font-size: 30px;
    margin-bottom: 18px;
}

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

.invoice-shipping-note,
.invoice-shipping-document {
    display: grid;
    gap: 12px;
}

.invoice-shipping-note textarea,
.invoice-shipping-form textarea {
    min-height: 120px;
    resize: vertical;
}

.invoice-shipping-dropzone {
    position: relative;
    min-height: 160px;
    border: 2px solid #d1d5db;
    display: grid;
    place-items: center;
    color: #4b5563;
    background: #ffffff;
}

.invoice-shipping-dropzone input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.invoice-shipping-document small {
    text-align: center;
    color: #6b7280;
}

.invoice-shipping-actions,
.invoice-notification-actions {
    justify-content: center;
}

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

.invoice-notification-form textarea {
    min-height: 330px;
}

.inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sell-return-form-panel {
    max-width: 1560px;
    margin-inline: auto;
}

.sell-return-form {
    display: grid;
    gap: 28px;
}

.sell-return-parent h4 {
    margin-bottom: 18px;
    font-size: 20px;
}

.sell-return-parent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    font-size: 18px;
}

.reference-input-icon {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.reference-input-icon i {
    display: grid;
    place-items: center;
    height: 54px;
    border-right: 1px solid #d8dee8;
    color: #4b5563;
}

.reference-input-icon input {
    border: 0;
}

.sell-return-items-table input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #e5e7eb;
    padding: 8px 12px;
}

.sell-return-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 28px;
}

.sell-return-summary {
    align-self: end;
    display: grid;
    gap: 8px;
    font-size: 18px;
    text-align: right;
}

.sell-return-summary p {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
}

.sell-return-save {
    justify-self: end;
    min-width: 220px;
    margin-top: 24px;
}

.print-document-body {
    color: #111827;
    font-family: "Segoe UI", Arial, sans-serif;
}

.print-document {
    width: min(960px, calc(100vw - 40px));
    margin: 0 auto;
    padding: 28px;
    background: #ffffff;
}

.print-document-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 2px solid #111827;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.print-document-header.centered {
    justify-content: center;
    text-align: center;
}

.print-document-header h1 {
    margin: 0;
    font-size: 26px;
}

.print-document-header p,
.print-document-header span {
    display: block;
    margin: 4px 0 0;
    color: #4b5563;
}

.print-document-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.print-document-meta div,
.kot-meta div {
    border: 1px solid #d8dee8;
    padding: 10px;
}

.print-document-meta strong,
.print-document-meta span,
.print-document-meta small {
    display: block;
}

.print-document-table th {
    background: #eaf3ff;
    color: #111827;
}

.print-document-table td,
.print-document-table th {
    border: 1px solid #d8dee8;
    padding: 10px;
    text-align: left;
}

.print-check-cell::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #111827;
}

.print-note {
    margin-top: 22px;
    border: 1px solid #d8dee8;
    padding: 12px;
}

.print-note p {
    margin: 6px 0 0;
}

.kot-document {
    max-width: 520px;
}

.kot-meta {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.kot-items-table {
    font-size: 16px;
}

.reference-invoice-print-body {
    background: #ffffff;
    color: #111827;
    font-family: Arial, "Segoe UI", sans-serif;
}

/* Force the invoice's accent colours (header band, grand-total bar, row shading)
   to print even when the browser's "Print backgrounds" option is off. */
.reference-invoice-print-body .reference-invoice-print,
.reference-invoice-print-body .reference-invoice-print * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.reference-invoice-print {
    width: 720px;
    min-height: 920px;
    margin: 0 auto;
    padding: 26px 34px;
    background: #ffffff;
    font-size: 12px;
}

.receipt-screen-actions {
    width: 720px;
    margin: 18px auto 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.receipt-screen-actions a,
.receipt-screen-actions button {
    border: 0;
    border-radius: 8px;
    background: #011530;
    color: #ffffff;
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 800;
}

.receipt-paper-badge {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #d9dee8;
    border-radius: 8px;
    background: #f8fafc;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
}

.reference-invoice-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    align-items: start;
    gap: 20px;
}

.invoice-print-business {
    text-align: center;
}

.invoice-print-business h1 {
    margin: 6px 0 4px;
    font-size: 20px;
}

.invoice-print-business p {
    margin: 0 0 10px;
}

.invoice-print-number,
.invoice-print-date-right {
    text-align: right;
}

.invoice-print-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 24px 0 18px;
}

.invoice-print-meta p {
    margin: 3px 0;
}

.reference-invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.reference-invoice-table thead th {
    font-weight: 800;
}

.reference-invoice-table th,
.reference-invoice-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 6px 4px;
    text-align: left;
}

.reference-invoice-table th:nth-child(n+2),
.reference-invoice-table td:nth-child(n+2) {
    text-align: right;
}

/* --- Full-page (A4/Letter) invoice: styled, more appealing --- */
.paper-sheet .reference-invoice-table {
    border: 1px solid #e2e7f0;
    border-radius: 8px;
    overflow: hidden;
}

.paper-sheet .reference-invoice-table thead th {
    background: #0b1f3a;
    color: #ffffff;
    letter-spacing: 0.2px;
    border-bottom: 2px solid #ffc107;
}

.paper-sheet .reference-invoice-table th,
.paper-sheet .reference-invoice-table td {
    padding: 8px 10px;
    font-size: 14px;
}

/* Semibold amount cells (Qty/Unit/Tax/Total) so figures read clearly */
.paper-sheet .reference-invoice-table tbody td:not(:first-child) {
    font-size: 14px;
    font-weight: 600;
}

.paper-sheet .reference-invoice-table tbody tr:nth-child(even) td {
    background: #f6f8fc;
}

.paper-sheet .reference-invoice-table tbody tr:last-child td {
    border-bottom: 0;
}

.invoice-print-totals {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 28px;
    margin-top: 24px;
}

.invoice-print-totals p {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin: 4px 0;
    padding: 3px 2px;
    border-bottom: 1px solid #edf0f5;
}

/* Amounts must never break across lines (keep the number + riyal symbol together) */
.invoice-print-totals .ip-amount {
    white-space: nowrap;
    flex: 0 0 auto;
}

.invoice-print-totals p strong { min-width: 0; }

/* Make the totals ("final figures") stand out: bold on A4 */
.paper-sheet .invoice-print-totals p {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 2px;
}

/* The bilingual labels are long — keep them a touch smaller than the figure so
   they fit on one line, while the amount stays prominent. */
.paper-sheet .invoice-print-totals p strong {
    font-size: 0.86em;
    line-height: 1.25;
}

/* Highlight the payable grand total — navy bar on A4 */
.paper-sheet .invoice-print-totals p.invoice-print-grand-total {
    margin-top: 8px;
    padding: 10px 12px;
    background: #0b1f3a;
    color: #ffffff;
    border: 0;
    border-radius: 8px;
    border-inline-start: 4px solid #ffc107;
    font-size: 1.15em;
    font-weight: 800;
}

.paper-sheet .invoice-print-totals p.invoice-print-grand-total strong { color: #ffffff; }

/* ... and a simple bold rule on the thermal receipt (monochrome, no ink-heavy band) */
.paper-thermal .invoice-print-totals p.invoice-print-grand-total {
    border-top: 1px solid #111827;
    border-bottom: 1px solid #111827;
    font-weight: 800;
}

.invoice-print-small {
    color: #6b7280;
    font-size: 11px;
}

.invoice-print-qr {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: max-content;
    margin: 28px auto 0;
    padding: 8px;
    color: #4b5563;
    font-size: 10px;
    text-align: center;
}

.invoice-print-qr img {
    width: 132px;
    height: 132px;
    image-rendering: pixelated;
    border: 1px solid #111827;
    background: #ffffff;
}

.invoice-print-notes {
    margin-top: 20px;
    border-top: 1px solid #edf0f5;
    padding-top: 10px;
}

.invoice-print-notes p {
    margin: 4px 0;
}

.invoice-print-footer {
    display: grid;
    justify-items: center;
    gap: 4px;
    margin-top: 46px;
    color: #6b7280;
    font-size: 11px;
    text-align: center;
    overflow-wrap: anywhere;
}

.invoice-print-footer small {
    display: block;
    color: #4b5563;
    font-size: 10px;
}

@media (max-width: 900px) {
    .pos-terminal-main,
    .pos-entry-row,
    .pos-payment-layout,
    .pos-payment-row,
    .pos-payment-notes {
        grid-template-columns: 1fr;
    }

    .pos-product-results {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }

    .pos-payment-modal {
        width: min(100%, calc(100vw - 22px));
        padding: 30px 20px 0;
    }

    .pos-payment-actions {
        margin-left: -20px;
        margin-right: -20px;
        padding: 18px 20px;
    }

    .invoice-detail-modal {
        width: min(100%, calc(100vw - 24px));
        padding: 44px 20px 24px;
    }

    .invoice-detail-topline,
    .invoice-detail-midgrid,
    .invoice-detail-notes,
    .dashboard-metrics,
    .performance-panel,
    .dashboard-panels-grid,
    .print-document-meta {
        grid-template-columns: 1fr;
    }

    .dashboard-data-panel .table-wrap {
        overflow-x: auto;
    }

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

    .invoice-detail-qr-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .invoice-detail-date {
        text-align: left;
    }

    .invoice-detail-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding-left: 0;
    }
}

@media print {
    .receipt-screen-actions {
        display: none;
    }

    .print-document {
        width: 100%;
        padding: 0;
    }

    .print-document-body {
        margin: 0;
    }
}

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

    .sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        width: 250px;
        height: 100vh;
        z-index: 40;
        transition: left 0.25s ease;
    }

    .sidebar.show {
        left: 0;
    }

    .mobile-only {
        display: inline-grid;
    }

    .topbar {
        margin-left: 0;
        margin-right: 0;
        position: static;
        padding: 0 1rem;
    }

    .grid.metrics,
    .grid.two-columns,
    .grid.three-columns,
    .pos-layout,
    .section-grid.three {
        grid-template-columns: 1fr;
    }

    .topbar-right {
        justify-content: flex-start;
        margin-left: 0;
    }

    .page-header,
    .content-wrap {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .module-tabs a,
    .module-tabs button {
        width: 50%;
        text-align: center;
    }

    .dashboard-metrics,
    .performance-panel,
    .role-card-grid,
    .permission-row,
    .permission-options,
    .settings-tile-grid,
    .business-settings-form {
        grid-template-columns: 1fr;
    }

    .topbar {
        gap: 12px;
    }

    .topbar-right {
        gap: 14px;
    }

    .pos-terminal-shell {
        padding-bottom: 230px;
    }

    .pos-terminal-title {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .pos-terminal-title h1 {
        font-size: 32px;
    }

    .pos-terminal-left,
    .pos-brand-panel {
        padding-left: 16px;
        padding-right: 16px;
    }

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

    .pos-search-icon {
        justify-self: start;
    }

    .pos-cart-wrap {
        overflow-x: auto;
    }

    .pos-cart-table {
        min-width: 720px;
    }

    .pos-terminal-footer {
        padding: 12px 16px;
    }

    .pos-footer-summary {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pos-payable {
        justify-self: start;
        font-size: 28px;
    }

    .pos-floating-panel {
        left: 16px;
        right: 16px;
        width: auto;
    }
}

/* Reference Products/Purchases module screens from the Eventro videos. */
.reference-module-tabs {
    min-height: 54px;
    margin-bottom: 18px;
    border-radius: 8px;
    padding: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.reference-module-tabs a {
    min-width: 126px;
    padding: 16px 26px;
    white-space: nowrap;
    font-size: 18px;
}

.report-module-tabs {
    scrollbar-width: thin;
}

.report-module-tabs a {
    min-width: max-content;
    flex: 0 0 auto;
}

.purchase-tabs a {
    min-width: 180px;
}

.reference-panel {
    padding: 26px;
    border-radius: 8px;
}

.reference-notice {
    margin-bottom: 18px;
}

.reference-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.reference-page-header.left-only {
    justify-content: flex-start;
}

.reference-title {
    margin: 0;
    color: #011530;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
}

.reference-subtitle {
    margin: 6px 0 0;
    color: #111827;
    font-size: 23px;
}

.reference-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}

.report-mode-selector {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #111827;
    font-size: 0;
}

.report-mode-selector select {
    min-width: 250px;
    min-height: 62px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    padding: 0 24px;
    font-size: 20px;
}

.reference-icon-link,
.reference-filter-button,
.reference-yellow-action {
    border: 0;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 58px;
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
}

.reference-icon-link i,
.reference-filter-button i {
    font-size: 25px;
}

.reference-yellow-action {
    min-width: 200px;
    padding: 0 30px;
    border-radius: 4px;
    background: #ffb600;
    color: #111827;
    font-weight: 600;
}

.reference-yellow-action:hover,
.reference-filter-button:hover,
.reference-icon-link:hover {
    filter: brightness(0.98);
}

.reference-divider {
    height: 1px;
    background: #d6dae2;
    margin: 32px 0 30px;
}

.reference-drawer {
    margin-top: 18px;
    border: 0;
    background: #ffffff;
}

.reference-drawer[open] {
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
}

.reference-form-grid,
.purchase-form-grid {
    display: grid;
    gap: 24px 44px;
}

.reference-form-grid.three,
.purchase-form-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.reference-form-grid label,
.purchase-form-grid label {
    display: grid;
    gap: 10px;
    color: #111827;
    font-size: 20px;
}

.reference-form-grid input,
.reference-form-grid select,
.reference-form-grid textarea,
.purchase-form-grid input,
.purchase-form-grid select,
.purchase-form-grid textarea,
.reference-wide-input {
    width: 100%;
    min-height: 62px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    padding: 0 30px;
    font-size: 20px;
}

.reference-form-grid select[multiple],
.purchase-form-grid select[multiple],
.modal-form select[multiple] {
    min-height: 132px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.modal-form label.wide,
.reference-form-grid label.wide {
    grid-column: 1 / -1;
}

.reference-form-grid textarea,
.purchase-form-grid textarea {
    min-height: 120px;
    padding-top: 18px;
}

.reference-save-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.reference-save-row.inline {
    grid-column: auto;
    align-self: end;
}

.reference-save-row.centered {
    justify-content: center;
    margin-top: 28px;
}

.reference-datatable-toolbar {
    padding: 0 0 34px;
}

.reference-datatable-toolbar .toolbar-left,
.reference-datatable-toolbar .toolbar-right {
    align-items: center;
}

.reference-datatable-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #111827;
    font-size: 20px;
}

.reference-datatable-toolbar select {
    min-width: 94px;
    min-height: 40px;
    font-size: 16px;
}

.reference-datatable-toolbar .export-icons {
    gap: 22px;
    margin-left: 42px;
}

.reference-datatable-toolbar .export-icons button {
    width: 34px;
    height: 34px;
    font-size: 25px;
}

.reference-datatable-toolbar .toolbar-right input {
    width: 190px;
    min-height: 40px;
    border-color: #e5e7eb;
}

.reference-table {
    min-width: 1120px;
}

.reference-table th {
    background: #eef4ff;
    color: #111827;
    font-size: 15px;
    font-weight: 800;
    padding: 18px 14px;
    white-space: nowrap;
}

.reference-table td {
    color: #111827;
    font-size: 16px;
    padding: 14px;
    white-space: nowrap;
}

.reference-table.compact-columns th:nth-child(n+6),
.reference-table.compact-columns td:nth-child(n+6) {
    display: none;
}

/* The totals / "final figures" row stands out from the data rows. */
.reference-table tfoot .reference-total-row td {
    background: #0b1f3a;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    border-top: 3px solid #ffc107;
}

.reference-table tfoot .reference-total-row td:first-child {
    border-bottom-left-radius: 6px;
}

.reference-table tfoot .reference-total-row td:last-child {
    border-bottom-right-radius: 6px;
}

/* Per-store grouped report (super-admin) — one block per store, each on its own
   printed page, with a per-store subtotal row and a grand total at the end. */
.report-store-group {
    margin: 26px 0;
}

.report-store-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 800;
    color: #0b1f3a;
}

.report-store-heading .store-badge {
    background: #eef4ff;
    color: #0b1f3a;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
}

.report-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 22px;
    background: #0b1f3a;
    color: #ffffff;
    border-inline-start: 5px solid #ffc107;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 800;
}

.report-grand-total .grand-figures {
    display: flex;
    gap: 26px;
}

@media print {
    .report-store-group {
        page-break-before: always;
    }

    .report-store-group:first-of-type {
        page-break-before: avoid;
    }
}

.sort-button {
    border: 0;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    padding: 0 0 0 6px;
}

.reference-empty {
    height: 48px;
    text-align: center;
    /* Neutral "empty state" grey — the old maroon read like an error. */
    color: #8a8f98 !important;
    font-size: 18px !important;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 18px;
    margin: -6px 0 30px;
}

.report-summary-card {
    min-height: 118px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 6px 14px;
    align-items: center;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(1, 21, 48, 0.06);
}

.report-summary-card p,
.report-summary-card em {
    margin: 0;
}

.report-summary-card p {
    color: #667085;
    font-size: 14px;
    font-weight: 800;
}

.report-summary-card strong {
    color: #011530;
    font-size: 22px;
    font-weight: 900;
}

.report-summary-card em {
    grid-column: 2;
    color: #8a94a6;
    font-size: 12px;
    font-style: normal;
}

.report-summary-icon {
    grid-row: span 3;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8fbff;
    color: #0891b2;
    font-size: 20px;
}

.report-summary-card.success .report-summary-icon {
    background: #e7f9ed;
    color: #16803c;
}

.report-summary-card.warning .report-summary-icon {
    background: #fff5d7;
    color: #b76a00;
}

.report-summary-card.danger .report-summary-icon {
    background: #ffe7ec;
    color: #be123c;
}

.report-chart-card {
    margin: 0 0 30px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(1, 21, 48, 0.05);
}

.report-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.report-chart-head h4 {
    margin: 0;
    color: #011530;
    font-size: 24px;
}

.report-chart-head span {
    color: #667085;
    font-size: 14px;
    font-weight: 700;
}

.report-bar-chart {
    display: grid;
    gap: 14px;
}

.report-bar-row {
    display: grid;
    grid-template-columns: minmax(150px, 230px) minmax(180px, 1fr) minmax(72px, auto);
    gap: 14px;
    align-items: center;
}

.report-bar-row span {
    color: #011530;
    font-size: 15px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-bar-row div {
    height: 18px;
    border-radius: 999px;
    background: #eef4ff;
    overflow: hidden;
}

.report-bar-row b {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb600, #ff7a00);
}

.report-bar-row strong {
    color: #011530;
    font-size: 15px;
    text-align: right;
}

.export-columns-backdrop {
    z-index: 80;
}

.export-columns-modal {
    width: min(760px, calc(100vw - 34px));
}

.export-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
}

.export-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-column-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.export-column-actions button {
    min-height: 36px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    background: #ffffff;
    color: #011530;
    padding: 0 12px;
    font-weight: 800;
    cursor: pointer;
}

.export-column-list {
    max-height: 245px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.export-column-list label,
.export-toggle-row label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #011530;
    font-size: 14px;
    font-weight: 800;
}

.export-column-list label {
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
}

.export-column-list label.disabled {
    opacity: 0.58;
}

.export-column-list em {
    margin-left: auto;
    color: #8a94a6;
    font-size: 11px;
    font-style: normal;
}

.export-options-grid {
    margin-top: 16px;
    gap: 16px;
}

.export-options-grid label {
    font-size: 14px;
}

.export-options-grid select {
    min-height: 42px;
    padding: 0 12px;
    font-size: 15px;
}

.export-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 14px 0 6px;
}

.product-bulk-delete-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.product-bulk-delete-bar[hidden],
.reference-bulk-actions[hidden] {
    display: none !important;
}

.product-bulk-toolbar.has-selection {
    border-color: #b9c9df;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: inset 4px 0 0 #011530;
}

.product-selection-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-size: 15px;
    flex-wrap: wrap;
}

.product-selection-status strong {
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #011530;
    color: #ffffff;
    font-weight: 800;
}

.product-selection-status small {
    width: 100%;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.bulk-delete-action {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    gap: 8px;
    box-shadow: 0 8px 18px rgba(211, 61, 82, 0.18);
}

.reference-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #e5e7eb;
    padding: 12px 22px;
}

.product-bulk-extra-actions {
    margin-top: -8px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
}

.reference-bulk-actions > div {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.reference-mini-button,
.table-action-button {
    border: 0;
    border-radius: 4px;
    min-height: 30px;
    padding: 0 10px;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.reference-mini-button.warning { background: #c98206; }
.reference-mini-button.danger { background: #d33d52; }
.reference-mini-button.navy { background: #011530; }
.table-action-button { background: #ffffff; color: #111827; }

.reference-mini-button:disabled,
.reference-mini-button[aria-disabled="true"] {
    opacity: 0.48;
    cursor: not-allowed;
    filter: grayscale(0.15);
}

.inline-bulk-form.is-loading .reference-mini-button {
    pointer-events: none;
    opacity: 0.7;
}

.inline-action-menu {
    position: relative;
    width: 36px;
}

.inline-action-menu summary {
    list-style: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

.inline-action-menu summary::-webkit-details-marker {
    display: none;
}

.inline-edit-form {
    position: absolute;
    left: 0;
    top: 32px;
    z-index: 20;
    width: 360px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
    padding: 14px;
    display: grid;
    gap: 8px;
}

.inline-edit-form input,
.inline-edit-form select {
    min-height: 38px;
}

.reference-row-menu summary {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: #111827;
}

.reference-action-popover {
    position: absolute;
    left: 0;
    top: 32px;
    z-index: 25;
    width: 148px;
    padding: 8px 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.16);
}

.reference-action-popover.is-floating {
    min-width: 168px;
    max-width: min(260px, calc(100vw - 24px));
}

.reference-action-popover button,
.reference-action-popover a {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    font-family: inherit;
}

.reference-action-popover button:hover,
.reference-action-popover a:hover {
    background: #f3f4f6;
}

.reference-action-popover form {
    margin: 0;
}

.reference-action-popover button.danger,
.reference-action-popover a.danger {
    color: #d33d52;
}

.reference-action-popover button[disabled] {
    color: #64748b;
    cursor: default;
    opacity: .75;
}

.reference-action-popover button[disabled]:hover {
    background: transparent;
}

.export-error {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff1f2;
    color: #b91c1c;
    font-weight: 700;
}

.column-visibility-popover {
    width: min(360px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 24px));
    overflow: auto;
    padding: 14px;
    border: 1px solid #d7dde7;
    border-radius: 12px;
    background: #ffffff;
    color: #011530;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.column-visibility-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.column-visibility-head strong {
    font-size: 16px;
    font-weight: 900;
}

.column-visibility-head button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #011530;
    cursor: pointer;
}

.column-visibility-popover p {
    margin: 8px 0 12px;
    color: #64748b;
    font-size: 13px;
}

.column-visibility-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.column-visibility-actions button {
    min-height: 34px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    background: #ffffff;
    color: #011530;
    padding: 0 10px;
    font-weight: 800;
    cursor: pointer;
}

.column-visibility-list {
    display: grid;
    gap: 8px;
}

.column-visibility-list label {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8fafc;
    color: #011530;
    font-weight: 800;
}

.import-required-box {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #001a3a;
    line-height: 1.7;
}

.reference-detail-list {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px 18px;
    margin: 18px 0 0;
}

.reference-detail-list dt {
    color: #64748b;
    font-weight: 700;
}

.reference-detail-list dd {
    margin: 0;
    color: #001a3a;
}

.reference-inline-actions {
    align-items: center;
}

.reference-inline-actions form {
    margin: 0;
}

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

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-left: 8px;
    border-radius: 999px;
    padding: 0 8px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
}

.product-modal {
    width: min(940px, calc(100vw - 40px));
}

.product-form-panel {
    position: relative;
    padding: 18px 20px 22px;
}

.product-form-panel .reference-title.compact {
    font-size: 24px;
}

.product-form-panel .reference-subtitle {
    font-size: 14px;
}

.product-form-panel .reference-divider {
    margin: 14px 0;
}

.reference-product-form {
    position: relative;
    display: grid;
    gap: 18px;
}

.reference-product-toggles {
    position: absolute;
    right: 0;
    top: -70px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.reference-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 13px;
}

.reference-product-section {
    display: grid;
    gap: 0;
}

.reference-product-section > header {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f1f4;
    color: #111827;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 700;
}

.reference-product-grid {
    display: grid;
    gap: 14px 20px;
    padding: 18px 16px 8px;
}

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

.reference-product-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reference-product-grid .wide,
.quick-product-form .wide {
    grid-column: 1 / -1;
}

.reference-product-form label {
    display: grid;
    gap: 7px;
    color: #111827;
    font-size: 12px;
}

.reference-product-form input,
.reference-product-form select,
.reference-product-form textarea {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d8dee8;
    border-radius: 4px;
    background: #ffffff;
    color: #111827;
    padding: 6px 12px;
    font-size: 12px;
}

.reference-product-form select[multiple] {
    min-height: 68px;
    padding: 8px 12px;
}

.reference-product-form small {
    color: #6b7280;
    font-size: 11px;
}

.reference-select-with-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 6px;
}

.reference-select-with-add a {
    color: #2276ff;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
}

.reference-product-section.pricing {
    margin-top: 2px;
}

.reference-toggle-label.taxable {
    justify-self: start;
    margin: 16px 0 10px 14px;
}

.reference-pricing-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr 1.15fr 1fr;
    border-left: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.product-tax-grid {
    padding-bottom: 16px;
}

.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: -2px;
}

.rich-text-toolbar button {
    min-height: 28px;
    border: 1px solid #d8dee8;
    border-radius: 4px;
    background: #ffffff;
    color: #011530;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.inline-check {
    display: inline-flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px !important;
    margin-top: 8px;
}

.variation-section[hidden],
[data-stock-field][hidden] {
    display: none !important;
}

.reference-pricing-head {
    min-height: 25px;
    background: #59b657;
    color: #ffffff;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 800;
}

.reference-pricing-grid label {
    min-height: 78px;
    border-right: 1px solid #e5e7eb;
    padding: 8px 10px 10px;
}

.reference-pricing-grid small {
    color: #9ca3af;
    font-size: 10px;
    line-height: 1.25;
}

.reference-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.reference-navy-action {
    min-height: 30px;
    border: 0;
    border-radius: 2px;
    background: #011530;
    color: #ffffff;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.product-detail-modal {
    width: min(1540px, calc(100vw - 190px));
    padding: 0;
}

.product-detail-modal h3 {
    margin: 0;
    padding: 48px 34px 22px;
    border-bottom: 1px solid #eef0f4;
    font-size: 26px;
}

.product-detail-body {
    padding: 18px 34px 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 350px;
    gap: 36px;
    align-items: start;
}

.product-detail-grid p {
    margin: 0 0 7px;
    color: #1f2937;
    font-size: 16px;
}

.product-detail-image {
    min-height: 340px;
    border: 1px solid #d8dee8;
    background: #e9edf3;
    color: #aeb6c2;
    display: grid;
    place-items: center;
    font-size: 94px;
}

.product-detail-note {
    margin: 26px 0 190px;
    color: #374151;
    font-size: 15px;
}

.product-detail-price-table {
    min-width: 1120px;
}

.product-detail-price-table th {
    font-size: 12px;
    padding: 10px 8px;
}

.product-detail-price-table td {
    background: #d1d5df;
    font-size: 16px;
    padding: 10px 8px;
}

.product-detail-stock-title {
    margin: 18px 0;
    color: #111827;
    font-size: 16px;
}

.product-detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 34px 38px;
    border-top: 1px solid #eef0f4;
}

.reference-filter-button.muted {
    min-width: 160px;
    background: #d1d1d1;
    color: #374151;
    justify-content: center;
}

.opening-stock-modal {
    width: min(1548px, calc(100vw - 190px));
    padding: 0;
}

.opening-stock-modal h3 {
    margin: 0;
    padding: 48px 34px 22px;
    border-bottom: 1px solid #eef0f4;
    font-size: 30px;
}

.opening-stock-form {
    padding: 26px 44px 38px;
}

.opening-stock-location {
    margin: 0 0 20px;
    color: #374151;
    font-size: 16px;
}

.opening-stock-table {
    min-width: 1180px;
}

.opening-stock-table th {
    font-size: 14px;
    text-transform: none;
    text-align: center;
}

.opening-stock-table td {
    background: #fafafa;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
}

.opening-stock-table input,
.opening-stock-table textarea {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d8dee8;
    border-radius: 2px;
    padding: 6px 10px;
    font-size: 13px;
}

.opening-stock-quantity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: stretch;
}

.opening-stock-quantity span {
    display: grid;
    place-items: center;
    border: 1px solid #d8dee8;
    border-left: 0;
    background: #ffffff;
}

.opening-stock-add-row {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background: #ffb600;
    color: #ffffff;
    cursor: pointer;
}

.opening-stock-total-row td {
    background: #ffffff;
    font-size: 16px;
}

.opening-stock-footer {
    display: flex;
    justify-content: flex-end;
    gap: 56px;
    margin-top: 74px;
    padding-top: 18px;
    border-top: 1px solid #eef0f4;
}

.modal-form textarea {
    width: 100%;
    min-height: 112px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
}

.modal-form .wide {
    grid-column: 1 / -1;
}

.modal-help-text {
    margin-top: -8px;
    color: #6b7280;
}

.import-products-form {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(230px, 0.8fr) minmax(260px, 1fr) minmax(180px, auto);
    align-items: end;
    gap: 18px;
    margin: 0 0 28px;
}

.plain-file-label {
    display: grid;
    gap: 12px;
    color: #111827;
    font-size: 20px;
}

.plain-select-label,
.plain-check-label {
    display: grid;
    gap: 10px;
    color: #111827;
    font-size: 16px;
    font-weight: 700;
}

.plain-select-label select {
    min-height: 48px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 14px;
    color: #001a3a;
    font-size: 15px;
}

.plain-check-label {
    min-height: 48px;
    grid-template-columns: auto 1fr;
    align-items: center;
    align-self: end;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    padding: 0 14px;
    background: #f8fafc;
}

.plain-file-label input,
.selling-price-import input[type="file"] {
    min-height: 34px;
    font-size: 18px;
}

.import-submit-button {
    min-width: 200px;
}

.download-template-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    border-radius: 4px;
    background: #36d676;
    color: #ffffff;
    padding: 0 18px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
}

.download-template-button.csv {
    background: #ffb300;
    color: #001a3a;
}

.download-template-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 36px;
}

.import-required-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 22px;
}

.import-summary-card {
    display: grid;
    gap: 8px;
    border-radius: 12px;
    padding: 16px 18px;
    border: 1px solid #d7dde7;
}

.import-summary-card strong {
    color: #001a3a;
    font-size: 18px;
}

.import-summary-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.import-summary-card.required {
    border-left: 5px solid #f97316;
    background: #fff7ed;
}

.import-summary-card.conditional {
    border-left: 5px solid #facc15;
    background: #fefce8;
}

.import-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.import-badge.required {
    background: #fed7aa;
    color: #9a3412;
}

.import-badge.conditional {
    background: #fef08a;
    color: #854d0e;
}

.import-badge.optional {
    background: #e2e8f0;
    color: #334155;
}

.import-report-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.import-report-alert a {
    color: #9a3412;
    font-weight: 800;
}

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

.import-preview-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #6b7280;
}

.import-preview-banner {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 600;
    border: 1px solid #c7d2fe;
}

.dark-mode .import-preview-banner {
    background: rgba(79, 70, 229, 0.16);
    color: #c7d2fe;
    border-color: rgba(99, 102, 241, 0.4);
}

.import-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}

.import-summary-grid span {
    display: grid;
    gap: 6px;
    border: 1px solid #d7dde7;
    border-radius: 10px;
    background: #f8fafc;
    padding: 12px 14px;
}

.import-summary-grid strong {
    color: #001a3a;
    font-size: 22px;
}

.import-summary-grid small {
    color: #64748b;
    font-weight: 800;
}

.import-instructions {
    margin-left: 0;
}

.import-instructions h4,
.selling-price-instructions h4,
.tax-rate-section h4 {
    margin: 0 0 26px;
    color: #111827;
    font-size: 23px;
    font-weight: 800;
}

.import-instructions p,
.selling-price-instructions p {
    color: #111827;
    font-size: 20px;
    line-height: 1.45;
}

.import-safety-list {
    display: grid;
    gap: 8px;
    margin: 0 0 24px 20px;
    color: #334155;
    font-size: 16px;
}

.import-safety-list code {
    color: #001a3a;
    font-weight: 800;
}

.import-instructions-table {
    min-width: 900px;
    width: 100%;
}

.import-instruction-section {
    border: 1px solid #d7dde7;
    border-radius: 12px;
    margin: 0 0 22px;
    overflow: hidden;
    background: #ffffff;
}

.import-instruction-section.required {
    border-left: 5px solid #f97316;
}

.import-instruction-section.conditional {
    border-left: 5px solid #facc15;
}

.import-instruction-section.optional {
    border-left: 5px solid #cbd5e1;
}

.import-instruction-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.import-instruction-section-header h5 {
    margin: 0;
    color: #001a3a;
    font-size: 18px;
    font-weight: 900;
}

.import-instructions-table th {
    background: #f8f8f8;
    color: #111827;
    font-size: 15px;
    text-align: left;
}

.import-instructions-table.required th {
    background: #fff7ed;
}

.import-instructions-table.conditional th {
    background: #fefce8;
}

.import-instructions-table td {
    font-size: 15px;
    vertical-align: top;
    white-space: normal;
    line-height: 1.45;
}

.import-instructions-table tbody tr:nth-child(odd) {
    background: #fafafa;
}

.optional-note {
    color: #9ca3af;
    font-size: 14px;
}

.selling-price-tools {
    display: grid;
    grid-template-columns: minmax(360px, 720px) minmax(260px, 420px);
    gap: 36px;
    align-items: start;
    margin-bottom: 42px;
}

.wide-export-button {
    width: 100%;
}

.selling-price-import {
    display: grid;
    gap: 18px;
}

.selling-price-import label {
    display: grid;
    gap: 12px;
    color: #111827;
    font-size: 20px;
}

.selling-price-instructions {
    margin-bottom: 28px;
}

.selling-add-button {
    margin-bottom: 40px;
}

.tax-rate-section {
    margin-top: 24px;
}

.tax-group-section {
    margin-top: 60px;
}

.compact-heading {
    margin-bottom: 18px;
}

.compact-heading h4 {
    margin: 0;
}

.compact-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label-search-row {
    margin-bottom: 16px;
}

.label-search-box {
    width: 330px;
    min-height: 62px;
    border: 1px solid #d6dae2;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 58px;
    align-items: center;
}

.label-search-box input {
    border: 0;
    min-height: 60px;
    font-size: 20px;
}

.label-search-box button {
    border: 0;
    background: transparent;
    font-size: 28px;
    color: #011530;
}

.label-table input {
    min-height: 38px;
}

.reference-accordion {
    border: 0;
    margin-top: 24px;
}

.reference-accordion header {
    min-height: 61px;
    background: #f2f2f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    color: #111827;
    font-size: 21px;
}

.label-option-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 20px;
    padding: 40px 30px 0;
}

.label-option-grid label {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 20px;
    color: #9ca3af;
    font-size: 20px;
}

.label-option-grid input,
.label-option-grid select {
    grid-column: 1 / -1;
    min-height: 62px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 18px;
    padding: 0 30px;
}

.reference-switch {
    width: 72px;
    height: 36px;
    border-radius: 999px;
    background: #d1d5db;
    border: 1px solid #d1d5db;
    display: inline-flex;
    align-items: center;
    padding: 3px;
}

.reference-switch input {
    display: none;
}

.reference-switch span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    margin-left: 0;
}

.reference-switch.on,
.reference-switch:has(input:checked) {
    background: #fff9c4;
    border-color: #b9a72c;
}

.reference-switch.on span,
.reference-switch:has(input:checked) span {
    background: #ffdc00;
    margin-left: auto;
}

.reference-file-control {
    position: relative;
    min-height: 62px;
    display: grid;
    grid-template-columns: 1fr 200px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.reference-file-control input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.reference-file-control span {
    grid-column: 2;
    background: #ffb600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 20px;
}

.purchase-select-plus {
    display: grid;
    grid-template-columns: 1fr 32px;
    align-items: center;
    gap: 14px;
}

.purchase-select-plus a,
.purchase-select-plus .inline-icon-button {
    color: #1778dc;
    font-size: 24px;
}

.inline-icon-button,
.button-reset {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.purchase-product-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 220px;
    align-items: center;
    gap: 32px;
    padding: 40px 30px 20px;
}

.purchase-product-search {
    min-height: 62px;
    display: grid;
    grid-template-columns: 58px 1fr;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    align-items: center;
}

.purchase-product-search i {
    text-align: center;
    font-size: 22px;
    color: #6b7280;
}

.purchase-product-search select {
    border: 0;
    min-height: 60px;
    font-size: 20px;
}

.purchase-product-table input {
    width: 96px;
    min-height: 38px;
}

.purchase-total-box {
    width: 530px;
    margin: 30px 50px 20px auto;
    background: #d1d5db;
    color: #111827;
    padding: 8px 26px;
    text-align: center;
    font-size: 20px;
}

.purchase-side-total {
    align-self: center;
    justify-self: end;
    color: #111827;
    font-size: 20px;
    line-height: 1.35;
}

.reference-form-grid .wide,
.purchase-form-grid .wide {
    grid-column: 1 / -1;
}

.expense-tabs a,
.stock-tabs a,
.sales-tabs a {
    min-width: 180px;
}

.single-reference-tab a {
    min-width: 148px;
}

.purchase-expense-button {
    margin: 34px 0;
}

.purchase-final-total,
.payment-due-text {
    text-align: right;
    color: #111827;
    font-size: 20px;
    margin-top: 16px;
}

.save-purchase-button {
    min-width: 200px;
}

.reference-total-row td {
    background: #d1d5db;
    color: #111827;
    font-size: 20px;
}

.invoice-payment-tabs a {
    min-width: 118px;
}

.all-invoices-panel .reference-title {
    font-size: 38px;
}

.create-invoice-action {
    min-width: 220px;
}

.invoice-reference-table th,
.invoice-reference-table td {
    font-size: 18px;
}

.invoice-reference-table th:first-child,
.invoice-reference-table td:first-child {
    width: 82px;
    text-align: center;
}

.reference-kebab-button {
    color: #011530;
    font-size: 19px;
}

.payment-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 22px;
    border-radius: 4px;
    padding: 2px 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.payment-status-badge.paid {
    background: #8bd16b;
}

.payment-status-badge.partial {
    background: #f59e0b;
}

.payment-status-badge.due {
    background: #ef4444;
}

.payment-status-badge.refunded,
.payment-status-badge.voided {
    background: #64748b;
}

.invoice-total-row td {
    color: #011530;
    font-size: 22px;
    font-weight: 500;
}

@media (max-width: 1200px) {
    .reference-page-header,
    .reference-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .reference-form-grid.three,
    .purchase-form-grid.three,
    .purchase-form-grid.two,
    .label-option-grid,
    .purchase-product-row {
        grid-template-columns: 1fr;
    }

    .purchase-total-box {
        width: 100%;
        margin-right: 0;
    }

    .reference-product-toggles {
        position: static;
        justify-content: flex-start;
        margin-bottom: 8px;
    }

    .reference-product-grid.two,
    .reference-pricing-grid,
    .product-detail-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-modal,
    .opening-stock-modal {
        width: min(100%, calc(100vw - 32px));
    }

    .product-detail-note {
        margin-bottom: 36px;
    }
}

/* Final sidebar active-state guard: only the current route should use the yellow active treatment. */
.sidebar .nav-link:not(.active) {
    background: transparent !important;
    color: #ffffff;
    border-right-color: transparent !important;
    border-radius: 0 !important;
}

.sidebar .nav-link:not(.active) i {
    color: #b9c1d1;
}

.sidebar .nav-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff;
}

.sidebar .nav-link.active {
    background: #ffb600 !important;
    color: #011530 !important;
    border-radius: 10px 0 0 10px !important;
    border-right-color: #ffffff !important;
}

.sidebar .nav-link.active i {
    color: #011530 !important;
}

/* 100% zoom normalization: keeps every module usable without browser zoom-out. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.layout,
.main-content,
.content-wrap,
.panel,
.reference-panel,
.table-wrap,
.module-tabs {
    min-width: 0;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.topbar {
    min-height: 89px;
    padding: 0 clamp(42px, 3.8vw, 58px);
}

.layout {
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: calc(100vh - 89px);
}

.sidebar {
    top: 89px;
    height: calc(100vh - 89px);
    padding-top: 14px;
}

.nav-link {
    min-height: 48px;
    margin-right: 10px;
    font-size: 14px;
}

.sidebar .nav-link:focus,
.sidebar .nav-link:focus-visible,
.sidebar .nav-group summary:focus,
.sidebar .nav-group summary:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.sidebar .nav-group:not([open]) .report-nav-summary:not(.active) {
    background: transparent !important;
    color: #ffffff !important;
    border-color: transparent !important;
    border-radius: 0 !important;
}

.sidebar .nav-group:not([open]) .report-nav-summary:not(.active) i {
    color: #b9c1d1 !important;
}

.topbar-left {
    gap: 14px;
}

.topbar-right {
    gap: clamp(18px, 2.2vw, 30px);
}

.brand-uploaded-logo {
    max-width: 128px;
    max-height: 42px;
    object-fit: contain;
}

.brand-logo strong {
    font-size: 15px;
}

.switch-track {
    width: 56px;
    height: 32px;
}

.switch-knob {
    width: 26px;
    height: 26px;
}

.dark-switch input:checked + .switch-track .switch-knob {
    transform: translateX(24px);
}

.topbar-pos {
    width: 112px;
    height: 44px;
    font-size: 14px;
}

.top-icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
}

.page-header {
    margin: 42px clamp(46px, 4vw, 70px) 26px;
    padding-bottom: 26px;
}

.page-header h2 {
    font-size: 31px;
}

.page-subtitle {
    font-size: 17px;
}

.content-wrap {
    margin: 28px clamp(46px, 3.8vw, 60px) 50px;
    gap: 16px;
}

.panel,
.reference-panel {
    padding: clamp(18px, 1.7vw, 24px);
}

.reference-module-tabs {
    min-height: 48px;
    margin-bottom: 16px;
}

.reference-module-tabs a {
    min-width: 110px;
    padding: 13px 20px;
    font-size: 15px;
}

.purchase-tabs a {
    min-width: 150px;
}

.reference-title,
.all-invoices-panel .reference-title {
    font-size: clamp(28px, 2.1vw, 34px);
}

.reference-subtitle {
    font-size: 18px;
}

.reference-actions {
    gap: 20px;
}

.reference-icon-link,
.reference-filter-button,
.reference-yellow-action {
    min-height: 46px;
    gap: 10px;
    font-size: 17px;
}

.reference-icon-link i,
.reference-filter-button i {
    font-size: 21px;
}

.reference-yellow-action {
    min-width: 166px;
    padding: 0 22px;
}

.create-invoice-action {
    min-width: 190px;
}

.reference-divider {
    margin: 24px 0 22px;
}

.reference-form-grid,
.purchase-form-grid {
    gap: 18px 28px;
}

.reference-form-grid label,
.purchase-form-grid label {
    gap: 7px;
    font-size: 15px;
}

.reference-form-grid input,
.reference-form-grid select,
.reference-form-grid textarea,
.purchase-form-grid input,
.purchase-form-grid select,
.purchase-form-grid textarea,
.reference-wide-input {
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
}

.reference-form-grid select[multiple],
.purchase-form-grid select[multiple],
.modal-form select[multiple] {
    min-height: 96px;
}

.reference-form-grid textarea,
.purchase-form-grid textarea {
    min-height: 92px;
    padding-top: 12px;
}

.reference-datatable-toolbar {
    padding-bottom: 24px;
}

.reference-datatable-toolbar label {
    gap: 10px;
    font-size: 16px;
}

.reference-datatable-toolbar select {
    min-height: 38px;
    font-size: 14px;
}

.reference-datatable-toolbar .export-icons {
    gap: 22px;
    margin-left: 38px;
}

.reference-datatable-toolbar .export-icons button {
    width: 30px;
    height: 30px;
    font-size: 21px;
}

.reference-datatable-toolbar .toolbar-right input {
    min-height: 38px;
}

.reference-table {
    min-width: min(1120px, 100%);
}

.reference-table th {
    font-size: 13px;
    padding: 12px 10px;
}

.reference-table td {
    font-size: 14px;
    padding: 10px;
}

.invoice-reference-table th,
.invoice-reference-table td {
    font-size: 14px;
}

.reference-total-row td,
.invoice-total-row td {
    font-size: 18px;
}

.reference-empty {
    height: 42px;
    font-size: 15px !important;
}

.button {
    min-width: 104px;
    height: 42px;
}

.settings-reference-mode .topbar {
    min-height: 89px;
    padding: 0 clamp(42px, 3.8vw, 58px);
}

.settings-reference-mode .content-wrap {
    margin: 28px clamp(28px, 4vw, 62px) 44px;
}

.product-image-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
}

.product-image-preview img,
.pos-product-image,
.pos-cart-image {
    display: block;
    object-fit: cover;
}

.product-image-preview img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: contain;
}

.pos-product-image {
    width: 64px;
    height: 64px;
}

.pos-cart-image {
    width: 42px;
    height: 42px;
    border-radius: 6px;
}

.invoice-print-logo {
    display: block;
    max-width: var(--receipt-logo-width, 34mm);
    max-height: var(--receipt-logo-height, 18mm);
    margin: 0 auto 6px;
    object-fit: contain;
}

.profile-reference-panel {
    padding: 24px 28px;
}

.profile-form {
    display: grid;
    gap: 22px;
}

.profile-section {
    display: grid;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-section:last-of-type {
    border-bottom: 0;
}

.profile-section h3 {
    margin: 0;
    color: #011530;
    font-size: 22px;
    font-weight: 800;
}

.profile-section h4 {
    margin: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.profile-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-upload-row input {
    min-height: 38px;
    padding: 7px 10px;
}

.profile-upload-row img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.profile-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding-top: 4px;
}

.profile-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 10px;
    color: #111827;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.settings-logo-preview {
    display: block;
    max-width: 150px;
    max-height: 70px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 6px;
    background: #ffffff;
}

.reference-invoice-print-body .receipt-screen-actions,
.reference-invoice-print-body .reference-invoice-print {
    width: min(var(--receipt-paper-width, 80mm), calc(100vw - 20px));
}

.reference-invoice-print-body .receipt-screen-actions {
    justify-content: center;
}

.reference-invoice-print-body .reference-invoice-print {
    min-height: auto;
    padding: var(--receipt-screen-padding, 4mm);
    font-size: var(--receipt-screen-font, 10px);
    line-height: 1.3;
}

.reference-invoice-print-body .reference-invoice-header,
.reference-invoice-print-body .invoice-print-meta,
.reference-invoice-print-body .invoice-print-totals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.reference-invoice-print-body .invoice-print-date,
.reference-invoice-print-body .invoice-print-number,
.reference-invoice-print-body .invoice-print-date-right {
    text-align: center;
}

.reference-invoice-print-body .reference-invoice-table {
    table-layout: fixed;
    font-size: 9px;
}

.reference-invoice-print-body .reference-invoice-table th,
.reference-invoice-print-body .reference-invoice-table td {
    padding: 5px 3px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.reference-invoice-print-body .invoice-print-qr img {
    width: var(--receipt-qr-size, 34mm);
    height: var(--receipt-qr-size, 34mm);
}

.reference-invoice-print-body.paper-sheet .reference-invoice-header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 20px;
}

.reference-invoice-print-body.paper-sheet .invoice-print-meta,
.reference-invoice-print-body.paper-sheet .invoice-print-totals {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1500px) {
    .topbar {
        min-height: 89px;
        padding: 0 52px;
    }

    .layout {
        grid-template-columns: 250px minmax(0, 1fr);
        min-height: calc(100vh - 89px);
    }

    .sidebar {
        top: 89px;
        height: calc(100vh - 89px);
    }

    .nav-link {
        min-height: 48px;
        padding-left: 16px;
        gap: 12px;
        font-size: 14px;
    }

    .content-wrap {
        margin: 28px 56px 50px;
    }

    .page-header {
        margin: 42px 56px 26px;
    }

    .reference-module-tabs a {
        min-width: 100px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .reference-actions {
        gap: 16px;
    }

    .reference-yellow-action {
        min-width: 150px;
    }

    .reference-datatable-toolbar .export-icons {
        margin-left: 28px;
    }

    .pos-terminal-header {
        min-height: 66px;
        padding: 0 18px;
        gap: 12px;
    }

    .pos-terminal-title {
        gap: 12px;
    }

    .pos-terminal-title h1 {
        font-size: 30px;
    }

    .pos-location,
    .pos-clock,
    .pos-location select {
        font-size: 15px;
    }

    .pos-location select {
        max-width: min(250px, 22vw);
        min-height: 36px;
    }

    .pos-terminal-tools {
        gap: clamp(12px, 1.7vw, 26px);
    }

    .pos-terminal-tools button {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }

    .pos-terminal-main {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 36vw);
        min-height: calc(100vh - 174px);
    }

    .pos-terminal-left {
        padding: 12px 16px 0 20px;
    }

    .pos-entry-row {
        grid-template-columns: minmax(220px, 330px) 34px minmax(250px, 1fr);
        gap: 8px;
    }

    .pos-customer-field select,
    .pos-product-search input {
        min-height: 40px;
        font-size: 15px;
    }

    .pos-cart-table th,
    .pos-cart-table td {
        padding: 10px;
        font-size: 15px;
    }

    .pos-brand-panel {
        padding: 18px 14px;
    }

    .pos-product-results {
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
        gap: 12px 16px;
    }

    .pos-product-card {
        min-height: 118px;
    }

    .pos-product-card strong {
        font-size: 14px;
    }

    .pos-product-card span:last-child {
        font-size: 15px;
    }

    .pos-terminal-footer {
        min-height: 108px;
        padding: 9px 22px;
    }

    .pos-payable {
        font-size: 30px;
    }
}

@media (max-width: 1366px) {
    .topbar {
        min-height: 89px;
        padding: 0 52px;
    }

    .layout {
        grid-template-columns: 250px minmax(0, 1fr);
        min-height: calc(100vh - 89px);
    }

    .sidebar {
        top: 89px;
        height: calc(100vh - 89px);
    }

    .content-wrap {
        margin: 24px 52px 42px;
    }

    .reference-panel,
    .panel {
        padding: 18px;
    }

    .reference-title,
    .all-invoices-panel .reference-title {
        font-size: 30px;
    }

    .reference-subtitle {
        font-size: 16px;
    }

    .reference-yellow-action {
        min-width: 138px;
        padding: 0 18px;
    }

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

    .reference-table th {
        font-size: 12px;
        padding: 10px 8px;
    }

    .reference-table td {
        font-size: 13px;
        padding: 9px 8px;
    }

    .pos-terminal-main {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 34vw);
    }

    .pos-terminal-tools {
        gap: 12px;
    }

    .pos-entry-row {
        grid-template-columns: minmax(190px, 280px) 30px minmax(220px, 1fr);
    }

    .pos-product-results {
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    }
}

@media print {
    @page {
        margin: 0;
    }

    html,
    body.reference-invoice-print-body {
        width: var(--receipt-paper-width, 80mm);
        min-width: var(--receipt-paper-width, 80mm);
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    .reference-invoice-print {
        width: var(--receipt-paper-width, 80mm);
        min-height: auto;
        margin: 0;
        padding: var(--receipt-print-padding, 4mm);
        box-shadow: none;
        font-size: var(--receipt-print-font, 9px);
        line-height: 1.25;
    }

    .reference-invoice-header {
        display: block;
        text-align: center;
    }

    .invoice-print-date,
    .invoice-print-number,
    .invoice-print-date-right {
        text-align: center;
        margin-bottom: 2mm;
    }

    .invoice-print-logo {
        max-width: var(--receipt-logo-width, 34mm);
        max-height: var(--receipt-logo-height, 18mm);
        margin-bottom: 2mm;
    }

    .invoice-print-business h1 {
        font-size: 15px;
        margin: 2mm 0 1mm;
    }

    .invoice-print-business p {
        margin-bottom: 2mm;
    }

    .invoice-print-meta,
    .invoice-print-totals {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2mm;
        margin: 4mm 0 3mm;
    }

    .reference-invoice-table {
        table-layout: fixed;
        font-size: calc(var(--receipt-print-font, 9px) - 1px);
    }

    .reference-invoice-table th,
    .reference-invoice-table td {
        padding: 1.4mm 0.8mm;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .reference-invoice-table th:nth-child(1),
    .reference-invoice-table td:nth-child(1) {
        width: 42%;
        text-align: left;
    }

    .reference-invoice-table th:nth-child(2),
    .reference-invoice-table td:nth-child(2) {
        width: 18%;
    }

    .reference-invoice-table th:nth-child(3),
    .reference-invoice-table td:nth-child(3),
    .reference-invoice-table th:nth-child(4),
    .reference-invoice-table td:nth-child(4) {
        width: 20%;
    }

    .invoice-print-totals p {
        gap: 2mm;
        margin: 1mm 0;
    }

    .invoice-print-qr {
        margin: 5mm auto 0;
        padding: 0;
        font-size: 8px;
    }

    .invoice-print-qr img {
        width: var(--receipt-qr-size, 34mm);
        height: var(--receipt-qr-size, 34mm);
        border: 0;
    }

    .invoice-print-notes {
        margin-top: 4mm;
        padding-top: 2mm;
    }

    .invoice-print-footer {
        margin-top: 5mm;
        text-align: center;
        font-size: 8px;
    }

    body.reference-invoice-print-body.paper-sheet {
        min-width: var(--receipt-paper-width, 210mm);
    }

    body.reference-invoice-print-body.paper-sheet .reference-invoice-print {
        padding: var(--receipt-print-padding, 12mm);
    }

    body.reference-invoice-print-body.paper-sheet .reference-invoice-header {
        display: grid;
        grid-template-columns: 1fr 1.5fr 1fr;
        text-align: initial;
    }

    body.reference-invoice-print-body.paper-sheet .invoice-print-date {
        text-align: left;
    }

    body.reference-invoice-print-body.paper-sheet .invoice-print-number,
    body.reference-invoice-print-body.paper-sheet .invoice-print-date-right {
        text-align: right;
    }

    body.reference-invoice-print-body.paper-sheet .invoice-print-meta,
    body.reference-invoice-print-body.paper-sheet .invoice-print-totals {
        grid-template-columns: 1fr 1fr;
        gap: 8mm;
    }

    body.reference-invoice-print-body.paper-sheet .reference-invoice-table th,
    body.reference-invoice-print-body.paper-sheet .reference-invoice-table td {
        padding: 2mm 1.5mm;
    }
}

.settings-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    padding: 8px;
    margin: 6px 0 0;
    border: 1px solid #d9dee8;
    border-bottom: 0;
    background: #f8fafc;
}
.settings-editor-toolbar button {
    border: 1px solid #d9dee8;
    border-radius: 4px;
    background: #fff;
    color: #1f2937;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
}
.settings-section-form textarea[name="template_data[send_ledger][body]"] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    min-height: 180px;
}
.settings-reference-action-row + .settings-submit-row {
    margin-top: 12px;
}

.pos-settings-panel {
    padding: 24px 28px 30px;
}

.pos-settings-form {
    display: grid;
    gap: 26px;
}

.pos-settings-section {
    display: grid;
    gap: 14px;
}

.pos-settings-section h4 {
    margin: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.pos-settings-section .reference-helper-text {
    margin: 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

.pos-shortcut-grid,
.pos-control-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 26px;
}

.pos-control-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pos-settings-field {
    display: grid;
    gap: 7px;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
}

.pos-settings-field.wide {
    grid-column: 1 / -1;
}

.pos-settings-field input,
.pos-settings-field select {
    width: 100%;
    min-height: 39px;
    border: 1px solid #d8dde6;
    border-radius: 4px;
    background: #ffffff;
    color: #111827;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.pos-settings-field small {
    color: #9ca3af;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.pos-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 28px;
    padding-top: 2px;
}

.pos-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
}

.pos-toggle-label .reference-switch {
    flex: 0 0 auto;
    width: 42px;
    height: 22px;
    padding: 2px;
    border-color: #d1d5db;
    background: #d7d9de;
}

.pos-toggle-label .reference-switch span {
    width: 16px;
    height: 16px;
}

.pos-toggle-label em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 50%;
    background: #2dd4bf;
    color: #ffffff;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
}

.pos-update-row {
    justify-content: flex-end;
    margin-top: 0;
}

.pos-shortcut-table {
    max-width: 100%;
}

@media (max-width: 1100px) {
    .pos-shortcut-grid,
    .pos-control-grid,
    .pos-control-grid.four,
    .pos-toggle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .pos-shortcut-grid,
    .pos-control-grid,
    .pos-control-grid.four,
    .pos-toggle-grid {
        grid-template-columns: 1fr;
    }
}

.invoice-design-mode .content-wrap {
    margin: 32px 46px 58px;
}

.invoice-design-mode .page-footer {
    margin-left: 46px;
}

.invoice-design-panel,
.invoice-layout-edit-panel {
    padding: 28px;
}

.invoice-design-title {
    margin-bottom: 14px;
    padding-bottom: 24px;
}

.invoice-design-title h3 {
    font-size: 34px;
}

.invoice-design-title p {
    font-size: 18px;
}

.invoice-design-tabs {
    display: flex;
    gap: 0;
    min-height: 48px;
    align-items: center;
    margin-bottom: 12px;
}

.invoice-design-tabs a {
    min-width: 142px;
    padding: 13px 12px;
    color: #111827;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    border-bottom: 3px solid transparent;
}

.invoice-design-tabs a.active,
.invoice-design-tabs a:hover {
    border-bottom-color: #ffb600;
}

.invoice-design-section-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.invoice-design-section-header strong {
    font-size: 15px;
}

.invoice-design-add {
    min-width: 116px;
    height: 42px;
    font-size: 15px;
}

.invoice-design-toolbar {
    justify-content: flex-end;
    padding: 0 10px 18px;
}

.invoice-design-toolbar .toolbar-right input {
    width: 132px;
    height: 32px;
}

.invoice-scheme-table th,
.invoice-scheme-table td {
    font-size: 13px;
    white-space: nowrap;
}

.reference-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.reference-badge.yellow {
    background: #ffd02c;
    color: #8a6900;
}

.invoice-design-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoice-design-actions form {
    margin: 0;
}

.invoice-design-actions button {
    border: 0;
    background: transparent;
    color: #011530;
    cursor: pointer;
    font-size: 15px;
    padding: 0;
}

.invoice-design-actions button[disabled] {
    color: #d7a0aa;
    cursor: not-allowed;
}

.invoice-layout-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    min-height: 150px;
    padding: 18px 0 10px;
}

.invoice-layout-card {
    width: 170px;
    min-height: 120px;
    color: #4b5563;
    text-decoration: none;
    text-align: center;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 5px;
    position: relative;
    padding: 12px 10px 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
}

.invoice-layout-card:hover strong {
    color: #011530;
}

.invoice-layout-icon {
    position: relative;
    width: 44px;
    height: 56px;
    display: grid;
    place-items: center;
    color: #1f4d73;
    font-size: 38px;
}

.invoice-layout-icon b {
    position: absolute;
    right: -16px;
    top: 24px;
    background: #011530;
    color: #ffffff;
    font-size: 7px;
    padding: 1px 3px;
}

.invoice-layout-card strong {
    color: #4b5563;
    font-size: 14px;
}

.invoice-layout-card small,
.invoice-layout-card em {
    color: #6b7280;
    font-size: 12px;
    font-style: normal;
}

.invoice-card-action-menu {
    position: absolute;
    right: 8px;
    bottom: 8px;
    text-align: left;
}

.invoice-card-action-menu > summary {
    list-style: none;
    width: 34px;
    height: 30px;
    border: 1px solid #d8dde6;
    border-radius: 7px;
    background: #ffffff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.invoice-card-action-menu > summary::-webkit-details-marker {
    display: none;
}

.invoice-card-action-menu[open] > summary,
.invoice-card-action-menu > summary:hover {
    border-color: #ffb600;
    color: #011530;
}

.invoice-card-action-menu .reference-action-popover {
    right: 0;
    left: auto;
    bottom: calc(100% + 6px);
    top: auto;
    min-width: 220px;
    z-index: 30;
}

.invoice-card-action-menu .reference-action-popover a,
.invoice-card-action-menu .reference-action-popover button {
    width: 100%;
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.invoice-card-action-menu .reference-action-popover button.danger,
.invoice-card-action-menu .reference-action-popover a.danger {
    color: #c62828;
}

.invoice-card-action-menu .reference-action-popover a:hover,
.invoice-card-action-menu .reference-action-popover button:hover {
    background: #f5f7fb;
}

.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 28px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: #011530;
    color: #ffb600;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 28px rgba(1, 21, 48, 0.24);
    cursor: pointer;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: #ffb600;
    color: #011530;
    outline: none;
}

.reference-settings-modal .invoice-scheme-modal-card {
    width: min(520px, calc(100vw - 42px));
    border-radius: 4px;
}

.invoice-scheme-modal-card h3 {
    font-size: 24px;
}

.invoice-scheme-form {
    display: grid;
    gap: 20px;
}

.invoice-scheme-form label {
    display: grid;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.invoice-scheme-form input[type="text"] {
    min-height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 14px;
}

.invoice-format-row {
    display: grid;
    grid-template-columns: 110px 110px 1fr;
    gap: 16px;
    align-items: start;
}

.invoice-format-card input {
    position: absolute;
    opacity: 0;
}

.invoice-format-card span {
    display: grid;
    gap: 3px;
    min-height: 62px;
    padding: 12px;
    background: #d8dde7;
    color: #111827;
    cursor: pointer;
}

.invoice-format-card input:checked + span {
    outline: 2px solid #ffb600;
}

.invoice-format-card small,
.invoice-format-preview strong {
    font-size: 10px;
    font-weight: 800;
}

.invoice-format-card strong,
.invoice-format-preview span {
    font-size: 11px;
}

.invoice-format-preview {
    display: grid;
    gap: 4px;
    color: #4b5563;
    padding-top: 5px;
}

.invoice-layout-edit-form {
    display: grid;
    gap: 22px;
}

.invoice-layout-grid {
    display: grid;
    gap: 18px 28px;
    align-items: start;
}

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

.invoice-layout-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.invoice-layout-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.invoice-layout-label,
.invoice-layout-switch-label {
    display: grid;
    gap: 7px;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

.invoice-layout-label.wide {
    grid-column: 1 / -1;
}

.invoice-layout-label input,
.invoice-layout-label select,
.invoice-layout-label textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    padding: 0 14px;
}

.invoice-layout-label textarea {
    min-height: 146px;
    padding: 12px 14px;
    resize: vertical;
}

.invoice-layout-label small,
.invoice-layout-help {
    margin: 0;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.45;
}

.invoice-layout-edit-form h4 {
    margin: 4px 0 -6px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.invoice-layout-edit-form .reference-switch {
    width: 42px;
    height: 22px;
    padding: 2px;
}

.invoice-layout-edit-form .reference-switch span {
    width: 17px;
    height: 17px;
}

.invoice-layout-switch-label {
    grid-template-columns: auto 1fr;
    align-items: center;
    color: #6b7280;
    font-weight: 500;
}

.invoice-layout-switch-label em {
    font-style: normal;
}

.invoice-layout-toolbar {
    margin-top: 0;
}

.invoice-layout-toolbar button {
    padding: 4px 7px;
    font-size: 11px;
}

.editor-field small {
    justify-self: end;
    margin-top: -22px;
    padding-right: 8px;
    background: transparent;
}

.invoice-layout-update-row {
    padding-top: 6px;
}

.invoice-layout-update-row .reference-yellow-action {
    min-width: 112px;
    height: 42px;
    justify-content: center;
}

@media (max-width: 1200px) {
    .invoice-layout-grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .invoice-design-mode .content-wrap {
        margin: 18px 16px 40px;
    }

    .invoice-layout-grid.two,
    .invoice-layout-grid.three,
    .invoice-layout-grid.four,
    .invoice-format-row {
        grid-template-columns: 1fr;
    }
}

.settings-flash {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 14px;
    padding: 0 16px;
    border: 1px solid #b7ebc6;
    border-radius: 6px;
    background: #e9fbef;
    color: #087f3d;
    font-weight: 700;
}

.settings-flash-error {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b91c1c;
}

.data-reset-panel {
    max-width: 1180px;
    margin: 0 auto;
}

.data-reset-warning {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid #fed7aa;
    border-left: 6px solid #f97316;
    border-radius: 10px;
    background: #fff7ed;
    color: #7c2d12;
}

.data-reset-warning i {
    margin-top: 3px;
    color: #ea580c;
    font-size: 22px;
}

.data-reset-warning strong {
    display: block;
    margin-bottom: 6px;
    font-size: 19px;
}

.data-reset-warning p {
    margin: 0;
    line-height: 1.55;
}

.data-reset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.data-reset-card {
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
}

.data-reset-card h4 {
    margin: 0 0 12px;
    font-size: 20px;
}

.data-reset-card ul {
    margin: 0;
    padding-left: 20px;
    color: #374151;
    line-height: 1.65;
}

.data-reset-counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.data-reset-counts div {
    padding: 15px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.data-reset-counts span {
    display: block;
    color: #6b7280;
    font-size: 13px;
    text-transform: capitalize;
}

.data-reset-counts strong {
    display: block;
    margin-top: 5px;
    color: #001a3d;
    font-size: 26px;
}

.data-reset-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.data-reset-form label {
    display: grid;
    gap: 8px;
    font-weight: 700;
    color: #111827;
}

.data-reset-form input {
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 14px;
    font: inherit;
}

.data-reset-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
}

.data-reset-actions a {
    color: #001a3d;
    text-decoration: none;
    font-weight: 700;
}

.data-reset-actions button {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    cursor: pointer;
}

.compact-tables .reference-table th,
.compact-tables .reference-table td,
.compact-tables .table th,
.compact-tables .table td {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
}

.hide-help-text .reference-helper-text,
.hide-help-text .settings-assumption-note,
.hide-help-text .invoice-layout-help,
.hide-help-text .pos-scanner-help,
.hide-help-text .modal-help-text,
.hide-help-text .auth-help {
    display: none !important;
}

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

.dashboard-sidebar-hidden .sidebar {
    display: none;
}

.dashboard-sidebar-hidden .topbar-left .brand-logo {
    visibility: visible;
}

.dark-mode body {
    background: #0f1724;
    color: #e8eef8;
}

.dark-mode .topbar,
.dark-mode .panel,
.dark-mode .reference-panel,
.dark-mode .card,
.dark-mode .settings-panel,
.dark-mode .dashboard-metric,
.dark-mode .performance-panel,
.dark-mode .sales-chart,
.dark-mode .performance-side,
.dark-mode .side-stat,
.dark-mode .dashboard-data-panel,
.dark-mode .dashboard-snapshot-grid a,
.dark-mode .module-tabs,
.dark-mode .reference-module-tabs,
.dark-mode .drawer,
.dark-mode .ui-modal,
.dark-mode .modal-form,
.dark-mode .profile-dropdown,
.dark-mode .invoice-detail-modal,
.dark-mode .invoice-shipping-modal,
.dark-mode .invoice-notification-modal,
.dark-mode .settings-editor-toolbar,
.dark-mode .receipt-paper-badge,
.dark-mode .reference-drawer {
    background: #172235;
    border-color: #2a3a54;
    color: #e8eef8;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
}

.dark-mode .topbar {
    border-bottom-color: #2a3a54;
}

.dark-mode .sidebar {
    background: #071426;
    border-right-color: #26364f;
}

.dark-mode .nav-link,
.dark-mode .nav-sublink,
.dark-mode .profile-dropdown a,
.dark-mode .profile-dropdown button,
.dark-mode .reference-title,
.dark-mode .all-invoices-panel .reference-title,
.dark-mode .settings-title h3,
.dark-mode .invoice-design-title h3,
.dark-mode .panel-title,
.dark-mode .dashboard-data-panel > header h3,
.dark-mode .performance-title,
.dark-mode .sales-chart h3,
.dark-mode .side-stat p,
.dark-mode .invoice-detail-section h4,
.dark-mode .invoice-activity-section h4,
.dark-mode .invoice-layout-edit-form h4,
.dark-mode .profile-section h3,
.dark-mode .profile-section h4 {
    color: #f7fbff;
}

.dark-mode .nav-link.active,
.dark-mode .nav-link:hover,
.dark-mode .nav-group[open] > summary {
    color: #071426;
}

.dark-mode .page-subtitle,
.dark-mode .reference-subtitle,
.dark-mode .subtle,
.dark-mode .hint,
.dark-mode .invoice-layout-switch-label,
.dark-mode .invoice-print-small,
.dark-mode .invoice-detail-summary span,
.dark-mode .invoice-detail-qr-card p,
.dark-mode .invoice-footer-link,
.dark-mode .invoice-close-button,
.dark-mode .settings-info,
.dark-mode .profile-cancel {
    color: #a8b8ce;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode summary,
.dark-mode .dashboard-page-size,
.dark-mode .dashboard-widget-location-select,
.dark-mode .dashboard-panel-search,
.dark-mode .reference-wide-input,
.dark-mode .reference-input-icon,
.dark-mode .reference-file-control,
.dark-mode .settings-logo-preview,
.dark-mode .invoice-detail-notes span,
.dark-mode .invoice-detail-qr-card,
.dark-mode .invoice-shipping-dropzone,
.dark-mode .reference-datatable-toolbar .toolbar-right input {
    background: #111b2b;
    border-color: #33445f;
    color: #e8eef8;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder,
.dark-mode .dashboard-panel-search::placeholder,
.dark-mode .reference-datatable-toolbar .toolbar-right input::placeholder {
    color: #7f91aa;
}

.dark-mode .reference-table th,
.dark-mode .table th,
.dark-mode .invoice-detail-table th,
.dark-mode .invoice-activity-table th,
.dark-mode .print-document-table th,
.dark-mode .dashboard-data-panel .reference-table th {
    background: #22324a;
    color: #f7fbff;
}

.dark-mode .reference-table td,
.dark-mode .table td,
.dark-mode .invoice-detail-table td,
.dark-mode .invoice-activity-table td,
.dark-mode .dashboard-data-panel .reference-table td {
    border-bottom-color: #2a3a54;
    color: #d7e2f2;
}

.dark-mode .report-summary-card,
.dark-mode .report-chart-card,
.dark-mode .export-column-list,
.dark-mode .export-column-actions button {
    background: #111b2b;
    border-color: #33445f;
    color: #e8eef8;
}

.dark-mode .report-summary-card strong,
.dark-mode .report-chart-head h4,
.dark-mode .report-bar-row span,
.dark-mode .report-bar-row strong,
.dark-mode .export-column-list label,
.dark-mode .export-toggle-row label,
.dark-mode .export-column-actions button {
    color: #f7fbff;
}

.dark-mode .report-summary-card p,
.dark-mode .report-summary-card em,
.dark-mode .report-chart-head span {
    color: #a8b8ce;
}

.dark-mode .report-bar-row div,
.dark-mode .export-preview,
.dark-mode .export-column-list label {
    background: #172235;
    border-color: #33445f;
    color: #d7e2f2;
}

.dark-mode .export-column-list em {
    color: #9fb0c8;
}

.dark-mode .invoice-detail-table tbody tr:nth-child(even),
.dark-mode .payment-info-table tbody tr:nth-child(even),
.dark-mode .import-instructions-table tbody tr:nth-child(odd) {
    background: #132033;
}

.dark-mode .plain-file-label,
.dark-mode .plain-select-label,
.dark-mode .plain-check-label,
.dark-mode .import-instructions h4,
.dark-mode .import-instructions p,
.dark-mode .import-summary-grid strong,
.dark-mode .import-safety-list code {
    color: #f7fbff;
}

.dark-mode .plain-select-label select,
.dark-mode .plain-check-label,
.dark-mode .import-summary-grid span,
.dark-mode .import-required-box {
    background: #172235;
    border-color: #33445f;
    color: #d7e2f2;
}

.dark-mode .import-summary-card,
.dark-mode .import-instruction-section {
    background: #172235;
    border-color: #33445f;
    color: #d7e2f2;
}

.dark-mode .import-summary-card.required,
.dark-mode .import-instruction-section.required {
    background: #2a1e15;
    border-left-color: #fb923c;
}

.dark-mode .import-summary-card.conditional,
.dark-mode .import-instruction-section.conditional {
    background: #28240f;
    border-left-color: #facc15;
}

.dark-mode .import-summary-card strong,
.dark-mode .import-instruction-section-header h5 {
    color: #f7fbff;
}

.dark-mode .import-instruction-section-header,
.dark-mode .import-instructions-table th {
    background: #101b2c;
    border-color: #33445f;
    color: #f7fbff;
}

.dark-mode .import-instructions-table.required th {
    background: #3a2518;
}

.dark-mode .import-instructions-table.conditional th {
    background: #342f13;
}

.dark-mode .import-badge.optional {
    background: #33445f;
    color: #d7e2f2;
}

.dark-mode .import-summary-grid small,
.dark-mode .import-safety-list {
    color: #a8b8ce;
}

.dark-mode .reference-empty {
    color: #8b98ab !important;
}

.dark-mode .dashboard-panel-tools button,
.dark-mode .export-icons button,
.dark-mode .top-icon,
.dark-mode .icon-circle,
.dark-mode .chart-menu-button,
.dark-mode .table-action-button,
.dark-mode .sortable-th {
    background: transparent;
    color: #f7fbff;
    border-color: #33445f;
}

.dark-mode .chart-export-menu,
.dark-mode .invoice-action-popover,
.dark-mode .notification-dropdown {
    background: #111b2b;
    border-color: #33445f;
    color: #e8eef8;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.dark-mode .chart-export-menu button,
.dark-mode .invoice-action-popover button,
.dark-mode .invoice-action-popover a {
    color: #e8eef8;
}

.dark-mode .notification-head,
.dark-mode .notification-footer,
.dark-mode .notification-item {
    background: #111b2b;
    border-color: #2a3a54;
}

.dark-mode .notification-list {
    background: #0f1724;
}

.dark-mode .notification-head small,
.dark-mode .notification-item em,
.dark-mode .notification-item small,
.dark-mode .notification-empty {
    color: #aab8cc;
}

.dark-mode .notification-item a,
.dark-mode .notification-footer {
    color: #f7fbff;
}

.dark-mode .notification-head button {
    background: #3a2b0d;
    color: #ffd16b;
}

.dark-mode .notification-item form button {
    background: #102d39;
    border-color: #235164;
    color: #8be7ff;
}

.dark-mode .chart-export-menu button:hover,
.dark-mode .invoice-action-popover button:hover,
.dark-mode .invoice-action-popover a:hover {
    background: #22324a;
}

.dark-mode .reference-divider,
.dark-mode .dashboard-data-panel > header,
.dark-mode .invoice-detail-summary,
.dark-mode .invoice-detail-summary div,
.dark-mode .invoice-activity-section,
.dark-mode .invoice-detail-notes span,
.dark-mode .profile-section,
.dark-mode .settings-editor-toolbar {
    border-color: #2a3a54;
}

.dark-mode .dashboard-chart-tooltip,
.dark-mode .dashboard-info-tip span {
    background: #111b2b;
    border-color: #3d506e;
    color: #f7fbff;
}

.dark-mode .dashboard-info-tip span::after {
    background: #111b2b;
    border-color: #3d506e;
}

.dark-mode .settings-flash {
    background: #0f3d2a;
    border-color: #1f8f4b;
    color: #c9f7d7;
}

.dark-mode .settings-flash-error {
    background: #3f1720;
    border-color: #7f1d1d;
    color: #fecaca;
}

.dark-mode .data-reset-warning {
    background: #2b1d12;
    border-color: #9a4a13;
    border-left-color: #f97316;
    color: #fed7aa;
}

.dark-mode .data-reset-card,
.dark-mode .data-reset-counts div {
    background: #172235;
    border-color: #2a3a54;
}

.dark-mode .data-reset-card ul,
.dark-mode .data-reset-form label {
    color: #dbe7f7;
}

.dark-mode .data-reset-counts strong,
.dark-mode .data-reset-actions a {
    color: #f7fbff;
}

.dark-mode .data-reset-form {
    border-top-color: #2a3a54;
}

.dark-mode .data-reset-form input {
    background: #111b2b;
    border-color: #33445f;
    color: #f7fbff;
}

.dark-mode .main-content,
.dark-mode .content-wrap,
.dark-mode .app-main,
.dark-mode .page-shell {
    background: #0f1724;
}

.dark-mode .page-header,
.dark-mode .settings-page,
.dark-mode .dashboard-page,
.dark-mode .reference-page {
    background: transparent;
}

.dark-mode label,
.dark-mode .settings-checkbox-label,
.dark-mode .settings-section-form label,
.dark-mode .business-settings-form label,
.dark-mode .reference-form-grid label,
.dark-mode .purchase-form-grid label,
.dark-mode .pos-settings-field,
.dark-mode .pos-toggle-label,
.dark-mode .reference-toggle-label,
.dark-mode .invoice-layout-label,
.dark-mode .invoice-layout-switch-label {
    color: #dbe7f7;
}

.dark-mode .settings-checkbox-label .settings-toggle-row,
.dark-mode .pos-toggle-label,
.dark-mode .reference-toggle-label,
.dark-mode .invoice-layout-switch-label {
    background: #111b2b;
    border-color: #33445f;
}

.dark-mode .settings-section-form,
.dark-mode .business-settings-form,
.dark-mode .invoice-layout-edit-form,
.dark-mode .profile-form,
.dark-mode .modal-body,
.dark-mode .drawer-body {
    color: #dbe7f7;
}

.dark-mode .dashboard-metrics,
.dark-mode .dashboard-snapshot-grid,
.dark-mode .metric-card,
.dark-mode .metric-card-link {
    background: #172235;
    border-color: #2a3a54;
}

.dark-mode .dashboard-metric p,
.dark-mode .dashboard-metric strong,
.dark-mode .dashboard-snapshot-grid strong,
.dark-mode .metric-card strong,
.dark-mode .side-stat strong {
    color: #f7fbff;
}

.dark-mode .metric-day,
.dark-mode .dashboard-table-footer,
.dark-mode .dashboard-table-footer button[disabled],
.dark-mode .dashboard-panel-tools,
.dark-mode .reference-table-count {
    color: #8fa4bf;
}

.dark-mode .dashboard-table-footer button,
.dark-mode .invoice-detail-footer button,
.dark-mode .invoice-close-button,
.dark-mode .profile-cancel {
    background: #111b2b;
    border-color: #33445f;
    color: #dbe7f7;
}

.dark-mode .dashboard-table-footer button:not([disabled]):hover,
.dark-mode .invoice-detail-footer button:hover,
.dark-mode .invoice-close-button:hover,
.dark-mode .profile-cancel:hover {
    background: #22324a;
    color: #ffffff;
}

.dark-mode body.reference-invoice-print-body,
.dark-mode .reference-invoice-print-body,
.dark-mode .reference-invoice-print-body .reference-invoice-print {
    background: #ffffff !important;
    color: #111827 !important;
}

.dark-mode .reference-invoice-print-body .reference-invoice-table th,
.dark-mode .reference-invoice-print-body .reference-invoice-table td {
    color: #111827 !important;
    border-color: #d1d5db !important;
}

.settings-section-form input[type="range"],
.business-settings-form input[type="range"] {
    accent-color: var(--accent, #ffb600);
    cursor: pointer;
}

.settings-range-value {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: max-content;
    margin-top: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff7df;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
}

.dark-mode .settings-range-value {
    background: #2a210d;
    color: #ffe8a3;
}

.dark-mode .settings-tile,
.dark-mode .invoice-layout-card,
.dark-mode .invoice-format-card,
.dark-mode .settings-return-bar,
.dark-mode .product-bulk-extra-actions,
.dark-mode .product-bulk-delete-bar,
.dark-mode .datatable-toolbar,
.dark-mode .reference-datatable-toolbar,
.dark-mode .reference-table,
.dark-mode .table-wrap,
.dark-mode .settings-reference-action-row,
.dark-mode .invoice-design-section-header,
.dark-mode .invoice-layout-upload-box,
.dark-mode .pos-settings-section,
.dark-mode .pos-settings-field,
.dark-mode .purchase-summary-card,
.dark-mode .purchase-form-section,
.dark-mode .receipt-screen-actions {
    background: #172235;
    border-color: #2a3a54;
    color: #e8eef8;
}

.dark-mode .product-bulk-toolbar.has-selection {
    background: linear-gradient(135deg, #172235 0%, #13243a 100%);
    border-color: #3d506e;
    box-shadow: inset 4px 0 0 #ffb600;
}

.dark-mode .product-selection-status {
    color: #e8eef8;
}

.dark-mode .product-selection-status strong {
    background: #ffb600;
    color: #071426;
}

.dark-mode .product-selection-status small,
.dark-mode .settings-helper-text,
.dark-mode .reference-helper-text,
.dark-mode .modal-help-text,
.dark-mode .settings-range-value + small,
.dark-mode .business-settings-form small,
.dark-mode .reference-form-grid small,
.dark-mode .purchase-create-form small {
    color: #a8b8ce;
}

.dark-mode .settings-tile:hover,
.dark-mode .invoice-layout-card:hover,
.dark-mode .invoice-format-card:hover {
    border-color: #ffb600;
    box-shadow: inset 0 -2px 0 #ffb600, 0 12px 30px rgba(0, 0, 0, 0.28);
}

.dark-mode .settings-return-bar a {
    background: #111b2b;
    border-color: #33445f;
    color: #dbe7f7;
}

.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.25);
}

.dark-mode .settings-update-button,
.dark-mode .reference-yellow-action,
.dark-mode .topbar-pos {
    color: #071426;
}

.dark-mode .reference-mini-button.navy {
    background: #22324a;
    border: 1px solid #3d506e;
}

.dark-mode .reference-mini-button.danger {
    background: #e24d62;
}

.dark-mode .reference-mini-button.warning {
    background: #d99b24;
    color: #071426;
}

.dark-mode .reference-mini-button:disabled,
.dark-mode .reference-mini-button[aria-disabled="true"] {
    background: #33445f;
    color: #8fa4bf;
    opacity: 0.7;
}

.dark-mode .pos-info-dot,
.dark-mode .settings-info {
    background: #22c8d8;
    color: #071426;
}

.dark-mode .pos-info-dot .help-tip,
.dark-mode .settings-info .help-tip {
    background: #111b2b;
    border-color: #3d506e;
    color: #f7fbff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.dark-mode .pos-info-dot .help-tip::after,
.dark-mode .settings-info .help-tip::after {
    background: #111b2b;
    border-color: #3d506e;
}

.dark-mode .settings-toggle-row input,
.dark-mode .reference-switch input {
    accent-color: #ffb600;
}

.dark-mode .modal-backdrop {
    background: rgba(2, 6, 23, 0.68);
}

.dark-mode .modal-close,
.dark-mode .invoice-design-actions button,
.dark-mode .reference-action-popover button,
.dark-mode .reference-action-popover a {
    color: #e8eef8;
}

.dark-mode .reference-action-popover,
.dark-mode .reference-row-menu[open] .reference-action-popover,
.dark-mode .profile-dropdown {
    background: #111b2b;
    border-color: #33445f;
}

.dark-mode .reference-action-popover button:hover,
.dark-mode .reference-action-popover a:hover,
.dark-mode .profile-dropdown a:hover,
.dark-mode .profile-dropdown button:hover {
    background: #22324a;
}

.dark-mode .export-error {
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(127, 29, 29, 0.32);
    color: #fecaca;
}

.dark-mode .column-visibility-popover {
    border-color: #33445f;
    background: #111b2b;
    color: #e8eef8;
}

.dark-mode .column-visibility-head button,
.dark-mode .column-visibility-actions button,
.dark-mode .column-visibility-list label {
    border-color: #33445f;
    background: #172235;
    color: #e8eef8;
}

.dark-mode .column-visibility-popover p {
    color: #9fb0c8;
}

.dark-mode .reference-table tbody tr:hover,
.dark-mode .table tbody tr:hover {
    background: #13243a;
}

.dark-mode .reference-icon-link,
.dark-mode .reference-filter-button {
    color: #e8eef8;
}

.dark-mode .reference-icon-link:hover,
.dark-mode .reference-filter-button:hover {
    color: #ffffff;
}

.dark-mode .topbar-pos {
    color: #ffb600;
}

.calendar-panel {
    padding: 28px;
}

.calendar-page-header {
    margin-bottom: 18px;
}

.calendar-actions,
.calendar-toolbar,
.calendar-toolbar > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-toolbar {
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 12px 0;
    border-top: 1px solid #d7dde7;
    border-bottom: 1px solid #d7dde7;
}

.calendar-toolbar strong {
    font-size: 22px;
    font-weight: 800;
    color: #011530;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid #d7dde7;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.calendar-weekday {
    min-height: 42px;
    display: grid;
    place-items: center;
    border-right: 1px solid #d7dde7;
    border-bottom: 1px solid #d7dde7;
    background: #eef4ff;
    color: #011530;
    font-weight: 900;
}

.calendar-weekday:nth-child(7) {
    border-right: 0;
}

.calendar-day {
    min-height: 112px;
    padding: 8px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-day.muted {
    background: #f8fafc;
    color: #94a3b8;
}

.calendar-day.today {
    box-shadow: inset 0 0 0 2px #ffb600;
}

.calendar-day-number {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-weight: 800;
}

.calendar-day.today .calendar-day-number {
    background: #ffb600;
    color: #011530;
}

.calendar-event {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: #fff5d6;
    color: #011530;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.calendar-reminder {
    background: #eef8ff;
    border: 1px solid #bfdbfe;
    grid-template-columns: 1fr auto;
    align-items: start;
}

.calendar-reminder.priority-high {
    background: #fff1f2;
    border-color: #fecdd3;
}

.calendar-reminder.priority-low {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.calendar-reminder small,
.calendar-reminder em {
    display: block;
    margin-top: 3px;
    color: #536174;
    font-style: normal;
    font-weight: 700;
}

.calendar-event-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-event-actions form {
    margin: 0;
}

.calendar-agenda {
    margin-top: 24px;
}

.calendar-event-modal {
    max-width: 720px;
}

.calendar-completed-toggle {
    align-self: end;
}

.reference-yellow-action.compact {
    min-height: 40px;
    padding: 0 18px;
}

.calendar-event i {
    color: #ffb600;
}

.calendar-event strong {
    font-size: 11px;
}

.dark-mode .calendar-panel,
.dark-mode .calendar-grid,
.dark-mode .calendar-day {
    background: #172235;
    border-color: #2a3a54;
    color: #e8eef8;
}

.dark-mode .calendar-toolbar {
    border-color: #2a3a54;
}

.dark-mode .calendar-toolbar strong,
.dark-mode .calendar-weekday {
    color: #f7fbff;
}

.dark-mode .calendar-weekday {
    background: #22324a;
    border-color: #2a3a54;
}

.dark-mode .calendar-day {
    border-color: #2a3a54;
}

.dark-mode .calendar-day.muted {
    background: #111b2b;
    color: #74849b;
}

.dark-mode .calendar-event {
    background: #2a210d;
    color: #ffe8a3;
}

.dark-mode .calendar-reminder {
    background: #102a43;
    border-color: #27496d;
    color: #e8eef8;
}

.dark-mode .calendar-reminder.priority-high {
    background: #3b1520;
    border-color: #783241;
}

.dark-mode .calendar-reminder.priority-low {
    background: #123322;
    border-color: #236244;
}

.dark-mode .calendar-reminder small,
.dark-mode .calendar-reminder em {
    color: #b5c2d3;
}

@media (max-width: 900px) {
    .calendar-grid {
        min-width: 820px;
    }

    .calendar-panel {
        overflow-x: auto;
    }

    .calendar-toolbar,
    .calendar-page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* POS productivity tools */
.topbar-clock {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #011530;
    font-size: 13px;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
    white-space: nowrap;
}

.topbar-clock i {
    color: #ffb600;
}

.topbar-clock strong {
    font-size: 14px;
    font-weight: 900;
}

.topbar-tool-button {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: 18px;
}

.topbar-low-stock {
    text-decoration: none;
    background: #fff6db;
    border: 1px solid #ffd166;
    color: #7a4a00;
    font-size: 18px;
}

.topbar-low-stock span {
    position: absolute;
    top: -10px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #d20b28;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
}

.calculator-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.calculator-backdrop.show {
    opacity: 1;
}

.calculator-modal {
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    border-radius: 16px;
    background: #ffffff;
    color: #011530;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
    transform: translateY(12px);
    transition: transform 0.16s ease;
}

.calculator-backdrop.show .calculator-modal {
    transform: translateY(0);
}

.calculator-close {
    float: right;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #011530;
    cursor: pointer;
}

.calculator-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.calculator-header h3 {
    margin: 0;
    font-size: 24px;
}

.calculator-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.calculator-copy {
    border: 1px solid #d7dde7;
    border-radius: 999px;
    background: #ffffff;
    color: #011530;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 800;
}

.calculator-display {
    display: block;
    min-height: 64px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 12px;
    background: #011530;
    color: #ffffff;
    font-size: 32px;
    font-weight: 900;
    text-align: right;
    overflow-x: auto;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.calculator-grid button {
    min-height: 54px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #011530;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
}

.calculator-grid button:hover {
    background: #e2e8f0;
}

.calculator-grid .danger {
    background: #ffe4e8;
    color: #b00020;
}

.calculator-grid .equals {
    background: #ffb600;
}

.calculator-grid .wide {
    grid-column: span 2;
}

.pos-hold-button {
    background: #0f766e;
}

.pos-floating-help {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.recent-sale-item .toolbar {
    flex-wrap: wrap;
}

.pos-shift-summary {
    display: grid;
    gap: 8px;
}

.pos-shift-summary div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    color: #011530;
}

.pos-shift-summary span {
    color: #64748b;
    font-weight: 800;
}

.pos-shift-summary strong {
    font-weight: 900;
}

.pos-notes-modal {
    position: relative;
    width: min(620px, calc(100vw - 42px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    display: grid;
    gap: 16px;
    padding: 34px;
    border-radius: 12px;
    background: #ffffff;
    color: #011530;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
    transform: translateY(12px);
    transition: transform 0.16s ease;
}

.pos-payment-backdrop.show .pos-notes-modal {
    transform: translateY(0);
}

.pos-notes-modal h2 {
    margin: 0;
    font-size: 32px;
}

.pos-notes-modal label {
    display: grid;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
}

.pos-notes-modal textarea {
    min-height: 110px;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    padding: 12px;
    font: inherit;
    resize: vertical;
}

.pos-adjustment-modal input,
.pos-adjustment-modal select {
    min-height: 46px;
    width: 100%;
    border: 1px solid #d7dde7;
    border-radius: 8px;
    padding: 0 13px;
    background: #ffffff;
    color: #011530;
    font: inherit;
}

.pos-adjustment-preview {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid #ffe08a;
    border-radius: 8px;
    background: #fff8df;
    color: #011530;
    font-size: 16px;
    font-weight: 900;
}

.pos-payment-link-button.danger {
    color: #be123c;
    font-weight: 900;
}

.pos-payment-actions.compact {
    margin: 8px -34px -34px;
    padding: 18px 34px;
    gap: 20px;
}

.pos-shortcut-grid {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
}

.pos-shortcut-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    border-radius: 8px;
    background: #011530;
    color: #ffffff;
    font-weight: 900;
}

.pos-shortcut-grid strong {
    display: flex;
    align-items: center;
}

.pos-change-calculator input {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 18px;
    font-weight: 800;
}

.quick-product-modal {
    width: min(980px, calc(100vw - 34px));
    max-height: calc(100vh - 48px);
    overflow: auto;
}

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

.quick-product-form label {
    display: grid;
    gap: 7px;
    color: #011530;
    font-size: 13px;
    font-weight: 800;
}

.quick-product-form input,
.quick-product-form select,
.quick-product-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    background: #ffffff;
    color: #011530;
    padding: 8px 12px;
    font: inherit;
}

.quick-product-form select[multiple] {
    min-height: 86px;
}

.quick-product-check {
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: start;
}

.quick-product-check input {
    width: auto;
    min-height: auto;
}

.quick-product-errors {
    grid-column: 1 / -1;
    border: 1px solid #f8c4be;
    border-radius: 8px;
    background: #fdecea;
    color: #912018;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 800;
}

.dark-mode .topbar-clock,
.dark-mode .topbar-tool-button,
.dark-mode .calculator-modal,
.dark-mode .calculator-copy,
.dark-mode .pos-notes-modal {
    background: #111b2b;
    border-color: #33445f;
    color: #e8eef8;
}

.dark-mode .quick-product-form label,
.dark-mode .reference-product-form label,
.dark-mode .reference-product-section > header,
.dark-mode .rich-text-toolbar button {
    color: #e8eef8;
}

.dark-mode .quick-product-form input,
.dark-mode .quick-product-form select,
.dark-mode .quick-product-form textarea,
.dark-mode .reference-product-form input,
.dark-mode .reference-product-form select,
.dark-mode .reference-product-form textarea,
.dark-mode .rich-text-toolbar button {
    background: #172235;
    border-color: #33445f;
    color: #f7fbff;
}

.dark-mode .reference-product-section > header {
    background: #172235;
}

.dark-mode .topbar-low-stock {
    background: #2a210d;
    border-color: #5d4711;
    color: #ffe8a3;
}

.dark-mode .calculator-close,
.dark-mode .pos-floating-header button {
    background: #22324a;
    color: #e8eef8;
}

.dark-mode .calculator-header p,
.dark-mode .pos-floating-help,
.dark-mode .pos-shift-summary span {
    color: #9fb0c8;
}

.dark-mode .calculator-display,
.dark-mode .pos-shortcut-grid span {
    background: #071426;
}

.dark-mode .calculator-grid button {
    background: #22324a;
    color: #f7fbff;
}

.dark-mode .calculator-grid button:hover {
    background: #2e405e;
}

.dark-mode .calculator-grid .danger {
    background: #4b1823;
    color: #ffd6de;
}

.dark-mode .calculator-grid .equals {
    background: #ffb600;
    color: #071426;
}

.dark-mode .pos-shift-summary div,
.dark-mode .pos-notes-modal textarea,
.dark-mode .pos-adjustment-modal input,
.dark-mode .pos-adjustment-modal select,
.dark-mode .pos-change-calculator input {
    background: #172235;
    border-color: #33445f;
    color: #e8eef8;
}

.dark-mode .pos-adjustment-preview {
    border-color: #7a5d05;
    background: rgba(255, 182, 0, 0.12);
    color: #f7fbff;
}

.dark-mode .pos-floating-content {
    background: #111b2b;
    border-color: #33445f;
    color: #e8eef8;
}

@media (max-width: 1200px) {
    .topbar-clock {
        display: none;
    }

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

    .report-bar-row {
        grid-template-columns: minmax(120px, 180px) minmax(140px, 1fr) minmax(58px, auto);
    }
}

@media (max-width: 760px) {
    .calculator-modal,
    .pos-notes-modal {
        padding: 22px;
    }

    .report-summary-grid,
    .export-preview,
    .export-column-list,
    .import-products-form,
    .import-summary-grid,
    .import-required-summary-grid,
    .reference-product-grid.two,
    .reference-product-grid.three,
    .quick-product-form {
        grid-template-columns: 1fr;
    }

    .reference-product-toggles {
        position: static;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .reference-pricing-grid {
        grid-template-columns: 1fr;
    }

    .import-submit-button {
        width: 100%;
    }

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

    .pos-shortcut-grid {
        grid-template-columns: 88px minmax(0, 1fr);
    }
}

/* Global top-header search */
.topbar-search-button {
    width: auto;
    min-width: 46px;
    height: 42px;
    grid-auto-flow: column;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #011530;
    font-size: 15px;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
}

.topbar-search-button span {
    color: #6b7280;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.global-search-open {
    overflow: hidden;
}

.global-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 7vh 18px 28px;
    background: rgba(1, 21, 48, 0.58);
    backdrop-filter: blur(8px);
}

.global-search-modal {
    width: min(880px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 52px));
    display: grid;
    grid-template-rows: auto auto auto minmax(180px, 1fr) auto;
    overflow: hidden;
    border: 1px solid rgba(210, 213, 218, 0.9);
    border-radius: 18px;
    background: #ffffff;
    color: #011530;
    box-shadow: 0 32px 95px rgba(0, 0, 0, 0.35);
}

.global-search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 14px;
}

.global-search-header h2 {
    margin: 0;
    color: #011530;
    font-size: 30px;
    font-weight: 900;
}

.global-search-header p {
    margin: 5px 0 0;
    color: #7a8494;
    font-size: 14px;
}

.global-search-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #5b6472;
    cursor: pointer;
    font-size: 18px;
}

.global-search-input-wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    margin: 0 24px 14px;
    padding: 0 16px;
    border: 2px solid #d7dde7;
    border-radius: 14px;
    background: #ffffff;
}

.global-search-input-wrap:focus-within {
    border-color: #ffb600;
    box-shadow: 0 0 0 4px rgba(255, 182, 0, 0.16);
}

.global-search-input-wrap i {
    color: #ffb600;
}

.global-search-input-wrap input {
    width: 100%;
    min-height: 56px;
    border: 0;
    outline: none;
    background: transparent;
    color: #011530;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
}

.global-search-clear {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    color: #6b7280;
    cursor: pointer;
}

.global-search-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 24px 16px;
    border-bottom: 1px solid #e8edf5;
}

.global-search-filters button,
.global-search-footer button {
    border: 1px solid #d7dde7;
    border-radius: 999px;
    background: #ffffff;
    color: #011530;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    padding: 8px 13px;
    white-space: nowrap;
}

.global-search-filters button.active {
    border-color: #ffb600;
    background: #ffb600;
    color: #011530;
}

.global-search-body {
    min-height: 0;
    overflow-y: auto;
    background: #f8fafc;
}

.global-search-recent {
    display: grid;
    gap: 12px;
    padding: 16px 24px 0;
}

.global-search-recent:empty {
    display: none;
}

.global-search-recent strong {
    display: block;
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.global-search-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.global-search-chip-row button,
.global-search-chip-row a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid #d7dde7;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    padding: 7px 11px;
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.global-search-results {
    display: grid;
    gap: 14px;
    padding: 16px 24px 24px;
}

.global-search-group h3 {
    margin: 0 0 8px;
    color: #718096;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.global-search-group > div {
    display: grid;
    gap: 7px;
}

.global-search-result {
    width: 100%;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #ffffff;
    color: #011530;
    cursor: pointer;
    padding: 10px 12px;
    text-align: left;
}

.global-search-result:hover,
.global-search-result.active {
    border-color: #ffb600;
    background: #fff9e8;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
}

.global-search-result-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #eef5ff;
    color: #011530;
    font-size: 17px;
}

.global-search-result-main {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.global-search-result-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #011530;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.global-search-result-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #657184;
    font-size: 12px;
    white-space: nowrap;
}

.global-search-result-type {
    border-radius: 999px;
    background: #edf2f7;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
    padding: 5px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.global-search-result mark {
    border-radius: 4px;
    background: rgba(255, 182, 0, 0.36);
    color: inherit;
    padding: 0 2px;
}

.global-search-empty,
.global-search-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: #64748b;
    text-align: center;
}

.global-search-empty i {
    color: #cbd5e1;
    font-size: 34px;
}

.global-search-empty strong,
.global-search-loading strong {
    color: #011530;
    font-size: 18px;
}

.global-search-empty span {
    max-width: 390px;
    font-size: 13px;
}

.global-search-loading span {
    width: 34px;
    height: 34px;
    border: 4px solid #dbe3ef;
    border-top-color: #ffb600;
    border-radius: 999px;
    animation: global-search-spin 0.75s linear infinite;
}

@keyframes global-search-spin {
    to {
        transform: rotate(360deg);
    }
}

.global-search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px;
    border-top: 1px solid #e8edf5;
    background: #ffffff;
    color: #7a8494;
    font-size: 12px;
}

.global-search-footer span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.global-search-footer kbd {
    min-width: 22px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #d7dde7;
    border-radius: 6px;
    background: #f8fafc;
    color: #011530;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 6px;
}

.dark-mode .topbar-search-button,
.dark-mode .global-search-modal,
.dark-mode .global-search-input-wrap,
.dark-mode .global-search-close,
.dark-mode .global-search-clear,
.dark-mode .global-search-filters button,
.dark-mode .global-search-footer button,
.dark-mode .global-search-chip-row button,
.dark-mode .global-search-chip-row a,
.dark-mode .global-search-result,
.dark-mode .global-search-footer kbd {
    background: #111b2b;
    border-color: #33445f;
    color: #e8eef8;
}

.dark-mode .global-search-backdrop {
    background: rgba(0, 6, 18, 0.72);
}

.dark-mode .global-search-header h2,
.dark-mode .global-search-input-wrap input,
.dark-mode .global-search-result-main strong,
.dark-mode .global-search-empty strong,
.dark-mode .global-search-loading strong {
    color: #f7fbff;
}

.dark-mode .global-search-header p,
.dark-mode .topbar-search-button span,
.dark-mode .global-search-result-main small,
.dark-mode .global-search-empty,
.dark-mode .global-search-footer,
.dark-mode .global-search-recent strong {
    color: #9fb0c8;
}

.dark-mode .global-search-body {
    background: #0f1724;
}

.dark-mode .global-search-footer {
    background: #111b2b;
    border-color: #2a3a54;
}

.dark-mode .global-search-filters,
.dark-mode .global-search-modal {
    border-color: #2a3a54;
}

.dark-mode .global-search-filters button.active {
    background: #ffb600;
    color: #071426;
}

.dark-mode .global-search-result:hover,
.dark-mode .global-search-result.active {
    background: #1d2a3e;
    border-color: #ffb600;
}

.dark-mode .global-search-result-icon,
.dark-mode .global-search-result-type {
    background: #22324a;
    color: #e8eef8;
}

@media (max-width: 1320px) {
    .topbar-search-button span {
        display: none;
    }

    .topbar-search-button {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }
}

@media (max-width: 760px) {
    .global-search-backdrop {
        padding: 10px;
    }

    .global-search-modal {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        border-radius: 14px;
    }

    .global-search-header,
    .global-search-results,
    .global-search-recent,
    .global-search-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .global-search-input-wrap {
        margin-left: 16px;
        margin-right: 16px;
    }

    .global-search-filters {
        padding-left: 16px;
        padding-right: 16px;
    }

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

    .global-search-result-type {
        grid-column: 2;
        justify-self: start;
    }

    .global-search-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .data-reset-grid,
    .data-reset-form {
        grid-template-columns: 1fr;
    }

    .data-reset-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .data-reset-actions button,
    .data-reset-actions a {
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   Internationalization: language switch + RTL (Arabic) support
   ========================================================================== */

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    padding: 2px;
    background: rgba(148, 163, 184, 0.12);
}

.lang-switch a {
    min-width: 30px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: inherit;
    opacity: 0.72;
}

.lang-switch a.active {
    background: var(--accent, #ffb600);
    color: #001a3a;
    opacity: 1;
}

.lang-switch a:hover {
    opacity: 1;
}

/* Login / auth screen: compact EN / AR toggle replacing the old dropdown */
.auth-language-toggle {
    display: inline-flex;
    gap: 14px;
    font-size: 16px;
}

.auth-language-toggle a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 700;
}

.auth-language-toggle a.active {
    color: #ffffff;
    text-decoration: underline;
}

/* --- Right-to-left layout adjustments (applied when <html dir="rtl">) --- */
[dir="rtl"] body {
    text-align: right;
}

[dir="rtl"] .nav-heading,
[dir="rtl"] .page-header,
[dir="rtl"] .page-subtitle {
    text-align: right;
}

/* Mirror sidebar edge treatment */
[dir="rtl"] .sidebar {
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    border-right: 0;
}

/* Tables read right-to-left */
[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: right;
}

/* Keep numeric / money cells and inputs visually consistent */
[dir="rtl"] .money,
[dir="rtl"] .amount,
[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Flip dropdown menus that are pinned to a physical edge */
[dir="rtl"] .quick-actions-dropdown,
[dir="rtl"] .notification-dropdown,
[dir="rtl"] .profile-dropdown {
    left: 0;
    right: auto;
}

/* Icon+label rows: preserve icon-first reading order in RTL */
[dir="rtl"] .nav-link,
[dir="rtl"] .quick-actions-dropdown a,
[dir="rtl"] .profile-dropdown a {
    flex-direction: row-reverse;
    text-align: right;
}

/* Font Awesome directional chevrons should point the RTL way */
[dir="rtl"] .fa-chevron-right:before {
    content: "\f053"; /* becomes chevron-left */
}