:root {
  --ink: #22201d; --muted: #817b72; --line: #e9e3da; --canvas: #f7f5f0; --panel: #fffdfa;
  --gold: #c79527; --gold-dark: #8f641e; --gold-soft: #fbf1d9; --red: #ae7b17; --red-dark: #77500b;
  --green: #27755b; --green-soft: #e6f5ed; --blue: #386d9d; --blue-soft: #e8f1fa; --shadow: 0 12px 32px rgba(42,34,25,.07);
}
* { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; opacity: .5; } h1, h2, h3, p { margin-top: 0; } h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; letter-spacing: -.03em; } h2 { margin-bottom: 7px; font-size: 30px; } h3 { margin-bottom: 3px; font-size: 20px; }.eyebrow { margin: 0 0 7px; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .15em; }.app-shell { min-height: 100vh; display: flex; }.sidebar { width: 245px; flex: none; display: flex; flex-direction: column; padding: 22px 13px 15px; color: #fbf4e8; background: linear-gradient(180deg, #171513 0%, #28231e 100%); position: sticky; top: 0; height: 100vh; z-index: 20; }.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 24px; border-bottom: 1px solid rgba(244,221,180,.13); }.sidebar-brand img { width: 42px; height: 42px; object-fit: cover; object-position: left; border-radius: 50%; border: 1px solid #c49a4b; }.sidebar-brand strong, .sidebar-brand span { display: block; }.sidebar-brand strong { color: #f6d681; font-family: Georgia, serif; font-size: 19px; letter-spacing: -.03em; }.sidebar-brand span { color: #d4c6ad; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; } nav { display: grid; gap: 3px; padding: 19px 0; }.nav-item { min-height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 11px; color: #c4bbae; background: transparent; border: 0; border-radius: 7px; text-align: left; font-size: 13px; font-weight: 650; transition: .18s; }.nav-item i { width: 18px; color: #bda476; font-size: 16px; font-style: normal; text-align: center; }.nav-item:hover { color: white; background: rgba(255,255,255,.06); }.nav-item.active { color: #fff; background: linear-gradient(90deg, #a6151b, #bd3b27); box-shadow: 0 7px 18px rgba(0,0,0,.25); }.nav-item.active i { color: #f5d37c; }.sidebar-footer { margin-top: auto; padding: 13px 9px 3px; color: #aaa093; border-top: 1px solid rgba(244,221,180,.13); font-size: 10px; }.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #6bc39e; box-shadow: 0 0 0 3px rgba(107,195,158,.14); }.workspace { min-width: 0; flex: 1; }.topbar { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px min(4.2vw, 62px); background: rgba(255,253,250,.9); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }.topbar-title span { display: block; margin-bottom: 2px; color: var(--red); font-size: 9px; font-weight: 800; letter-spacing: .15em; }.topbar-title h1 { margin: 0; font-family: Georgia, serif; font-size: 21px; letter-spacing: -.025em; }.topbar-actions { display: flex; align-items: center; gap: 13px; }.today-label { color: var(--muted); font-size: 12px; }.quick-bill, .button { min-height: 39px; padding: 9px 13px; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 800; transition: .18s; }.quick-bill, .button-primary { color: white; background: linear-gradient(120deg, var(--red), #c23b27); box-shadow: 0 7px 14px rgba(164,24,28,.16); }.quick-bill:hover, .button-primary:hover { background: var(--red-dark); transform: translateY(-1px); }.button-gold { color: #39270d; background: linear-gradient(120deg, #e5bd64, #f7d98b); }.button-gold:hover { background: #e4b451; }.button-outline { color: #6b5a46; background: #fff; border-color: #d8cec2; }.button-outline:hover { color: var(--red); border-color: #be8d89; }.button-export { color: #fff; background: #2b765c; box-shadow: 0 7px 14px rgba(43,118,92,.15); }.button-export:hover { background: #1e5e48; transform: translateY(-1px); }.button-full { width: 100%; min-height: 46px; }.button.small { min-height: 34px; padding: 7px 10px; font-size: 11px; }.icon-button { background: transparent; border: 0; color: var(--ink); font-size: 22px; }.mobile-only { display: none; }.content { width: min(1410px, 100%); margin: 0 auto; padding: 34px min(4.2vw, 62px) 65px; }.app-section { display: none; animation: fade .18s ease; }.app-section.active { display: block; } @keyframes fade { from { opacity: .45; transform: translateY(5px); } to { opacity: 1; transform: none; } }.section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 23px; }.section-header p:not(.eyebrow) { max-width: 700px; margin-bottom: 0; color: var(--muted); font-size: 13px; }.header-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }.dashboard-welcome { min-height: 145px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 25px 31px; overflow: hidden; background: radial-gradient(circle at 89% 24%, rgba(196,147,48,.2), transparent 25%), linear-gradient(110deg, #171513, #342920); border-radius: 16px; color: white; }.dashboard-welcome h2 { margin-bottom: 8px; color: #f6d887; font-size: clamp(29px, 3vw, 39px); }.dashboard-welcome p:not(.eyebrow) { max-width: 550px; margin: 0; color: #d5cbc0; }.dashboard-welcome .eyebrow { color: #e7c16a; }.dashboard-welcome img, .billing-logo { object-fit: cover; object-position: left center; background: white; }.dashboard-welcome img { width: 235px; height: 91px; border: 1px solid rgba(255,222,148,.5); border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,.27); }.stat-grid, .report-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }.stat-card { min-height: 108px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 20px rgba(48,38,29,.035); }.stat-card .stat-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 13px; border-radius: 8px; color: var(--red); background: #f9e8e5; font-weight: 900; }.stat-card.gold .stat-icon { color: #8c621f; background: var(--gold-soft); }.stat-card.green .stat-icon { color: var(--green); background: var(--green-soft); }.stat-card.blue .stat-icon { color: var(--blue); background: var(--blue-soft); }.stat-card p { margin-bottom: 4px; color: var(--muted); font-size: 11px; }.stat-card strong { color: #292421; font-size: 21px; letter-spacing: -.04em; white-space: nowrap; }.stat-card small { display: block; margin-top: 3px; color: #9a9186; font-size: 10px; }.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.panel-heading h3 { margin-bottom: 0; }.chart-panel, .split-panel, .low-stock-panel, .activity-panel, .report-subpanel, .analytics-table { padding: 22px; }.heading-total { color: var(--red); font-size: 17px; font-weight: 850; }.bar-chart { display: flex; align-items: flex-end; min-height: 195px; gap: 11px; padding-top: 24px; }.chart-bar { min-width: 0; flex: 1; display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 9px; text-align: center; }.chart-bar .bar { min-height: 4px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #c53a30, #89141b); }.chart-bar strong { color: #9a251e; font-size: 10px; }.chart-bar span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.payment-summary { display: grid; gap: 9px; margin-top: 21px; }.payment-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }.payment-row label { color: #625b53; }.payment-track { height: 8px; overflow: hidden; background: #eee9df; border-radius: 50px; }.payment-track i { display: block; height: 100%; border-radius: inherit; background: #b0832d; }.payment-row strong { min-width: 66px; color: #37302b; text-align: right; }.compact-list { display: grid; gap: 2px; margin-top: 17px; }.compact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee8e0; }.compact-row:last-child { border-bottom: 0; }.compact-row strong { display: block; color: #443b35; font-size: 12px; }.compact-row small { display: block; margin-top: 2px; color: #958c82; font-size: 10px; }.warning-label, .status-badge, .gender-badge { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }.warning-label.low { color: #9a6820; background: #fff0ce; }.warning-label.out { color: #a4181c; background: #fbe4e3; }.status-active { color: #26745a; background: #e5f4ed; }.status-inactive { color: #7c7770; background: #edeae5; }.status-paid { color: #27755b; background: #e5f4ed; }.status-due { color: #a56d17; background: #fff0cf; }.billing-header { align-items: center; }.billing-logo { width: 180px; height: 64px; border: 1px solid #e3d5bc; border-radius: 8px; }.billing-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(345px, .65fr); gap: 18px; align-items: start; }.billing-form { padding: 25px; }.form-section-title { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 12px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }.form-section-title.product-title { margin-top: 25px; }.form-section-title > span { display: grid; place-items: center; width: 23px; height: 23px; flex: none; border-radius: 50%; color: white; background: var(--red); font-size: 11px; font-weight: 850; }.form-section-title h3 { margin: 0 0 1px; font-size: 17px; }.form-section-title p { margin: 0; color: var(--muted); font-size: 11px; }.form-grid { display: grid; gap: 13px; }.customer-grid { grid-template-columns: 1fr 1fr .75fr; }.line-adder { display: flex; align-items: end; gap: 10px; }.line-adder label { width: 145px; }.line-adder .grow-label { flex: 1; min-width: 155px; }.line-adder button { flex: none; }.form-message { min-height: 18px; margin: 14px 0 0; color: #a4181c; font-size: 12px; }.form-message.success { color: var(--green); } label { display: grid; gap: 6px; color: #5d554d; font-size: 11px; font-weight: 750; } input, select, textarea { width: 100%; min-height: 40px; padding: 8px 10px; color: var(--ink); background: #fffefa; border: 1px solid #dcd4ca; border-radius: 7px; outline: none; font-size: 13px; transition: .15s; } textarea { min-height: 89px; resize: vertical; } input::placeholder { color: #b4aba0; } input:focus, select:focus, textarea:focus { border-color: #b57a61; box-shadow: 0 0 0 3px rgba(180,122,97,.13); }.lookup-results { overflow: hidden; margin-top: 8px; border: 1px solid #e4d8c8; border-radius: 8px; background: #fffcf6; box-shadow: 0 10px 23px rgba(80,55,31,.1); }.lookup-option { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #3d342d; background: transparent; border: 0; text-align: left; }.lookup-option:hover { background: #fbf1de; }.lookup-option small { color: var(--muted); }.customer-lookup-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding: 10px 12px; color: #4d443c; background: #f8f3e9; border-left: 3px solid var(--gold); border-radius: 5px; font-size: 11px; }.customer-lookup-info strong { color: #725117; }.invoice-panel { position: sticky; top: 94px; padding: 22px; }.invoice-panel-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }.invoice-badge { padding: 4px 7px; color: var(--red); background: #fae8e6; border-radius: 4px; font-size: 9px; font-weight: 850; letter-spacing: .08em; }.invoice-lines { min-height: 138px; margin: 12px 0; }.empty-lines { display: grid; place-items: center; color: #a49c92; text-align: center; font-size: 12px; }.line-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px dashed #e5ddd2; }.line-item .line-name { font-weight: 800; font-size: 12px; }.line-item small { display: block; margin-top: 2px; color: #958a7e; font-size: 10px; }.line-item strong { font-size: 12px; }.remove-line { width: 20px; height: 20px; padding: 0; color: #b03737; background: #fae7e6; border: 0; border-radius: 50%; line-height: 1; }.invoice-adjustments { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 14px 0; border-top: 1px solid var(--line); }.invoice-adjustments > label:last-child { grid-column: 1 / -1; }.discount-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.discount-fields label { font-size: 10px; }.invoice-totals { display: grid; gap: 8px; padding: 13px 0 17px; border-top: 1px solid var(--line); }.invoice-totals > div { display: flex; justify-content: space-between; font-size: 12px; }.invoice-totals span { color: var(--muted); }.discount-row strong { color: var(--red); }.invoice-totals .final-row { align-items: baseline; padding-top: 8px; border-top: 1px solid #eadcca; color: #2b241e; font-size: 14px; font-weight: 800; }.final-row span { color: #403630; }.final-row strong { color: var(--red); font-size: 24px; letter-spacing: -.04em; }.text-button { padding: 0; color: var(--red); background: transparent; border: 0; font-size: 11px; font-weight: 850; }.text-button:hover { color: var(--red-dark); text-decoration: underline; }.text-button.wide { display: block; width: 100%; margin-top: 12px; text-align: center; }.filters-panel { padding: 15px; margin-bottom: 13px; }.filter-toolbar { display: flex; align-items: end; gap: 12px; }.search-input { width: min(375px, 100%); position: relative; display: block; color: #9a8e80; font-size: 19px; }.search-input input { padding-left: 29px; }.search-input::first-letter { position: absolute; }.filter-count { margin-left: auto; color: var(--muted); font-size: 11px; }.filter-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }.filter-chip { padding: 6px 9px; color: #70665d; background: #fffdfa; border: 1px solid #dfd6cc; border-radius: 999px; font-size: 10px; font-weight: 800; }.filter-chip:hover { color: var(--red); border-color: #d5a8a3; }.filter-chip.active { color: white; background: var(--red); border-color: var(--red); }.table-panel { overflow: hidden; }.table-scroll { overflow-x: auto; } table { width: 100%; min-width: 880px; border-collapse: collapse; text-align: left; } th { padding: 12px 15px; color: #897e72; background: #fcf9f5; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; } td { padding: 13px 15px; color: #5c534b; border-bottom: 1px solid #efe9e1; font-size: 12px; vertical-align: top; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #fffaf5; }.cell-title { display: block; color: #302924; font-weight: 850; }.cell-note { display: block; max-width: 240px; margin-top: 2px; overflow: hidden; color: #988f84; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.table-actions { display: flex; justify-content: flex-end; gap: 7px; }.table-action { padding: 4px 6px; color: #6c6055; background: #fff; border: 1px solid #dfd5ca; border-radius: 5px; font-size: 10px; font-weight: 750; }.table-action:hover { color: var(--red); border-color: #ceaaa2; }.table-action.danger { color: #b12b2e; }.gender-male { color: #386d9d; background: #e8f1fa; }.gender-female { color: #a52b52; background: #f9e8ef; }.gender-other { color: #7556a4; background: #eeeafa; }.empty-state { padding: 50px 20px; text-align: center; }.empty-state span { display: inline-grid; place-items: center; width: 37px; height: 37px; color: var(--red); background: #fae7e5; border-radius: 50%; font-size: 16px; }.empty-state h3 { margin: 9px 0 4px; font-size: 17px; }.empty-state p { margin: 0; color: var(--muted); font-size: 12px; }.inventory-stats, .expense-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }.mini-stat { padding: 13px 15px; background: #fffdfa; border: 1px solid var(--line); border-radius: 9px; }.mini-stat span { display: block; color: var(--muted); font-size: 10px; }.mini-stat strong { display: block; margin-top: 4px; font-size: 19px; letter-spacing: -.04em; }.report-subpanel { margin-top: 18px; }.report-list { display: grid; gap: 0; margin-top: 13px; }.report-list-row { display: grid; grid-template-columns: 1fr auto auto; gap: 15px; align-items: center; padding: 11px 0; border-bottom: 1px solid #eee8df; }.report-list-row:last-child { border-bottom: 0; }.report-list-row span { color: #474038; font-weight: 750; }.report-list-row small { color: var(--muted); }.expense-summary { grid-template-columns: repeat(3, minmax(0,1fr)); }.bill-filters label:not(.search-input) { width: 155px; }.report-controls { padding: 17px; margin-bottom: 17px; }.report-controls .filter-chips { margin-top: 0; }.custom-dates { display: flex; align-items: end; gap: 10px; margin-top: 14px; }.custom-dates label { width: 170px; }.range-label { margin: 12px 0 0; color: var(--muted); font-size: 11px; }.report-metric-grid { grid-template-columns: repeat(5, minmax(0,1fr)); margin-top: 0; }.reports-grid { margin-bottom: 17px; }.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }.setting-card { min-height: 190px; padding: 25px; }.setting-card p { max-width: 470px; color: var(--muted); font-size: 13px; line-height: 1.6; }.local-note { display: inline-block; margin-top: 8px; padding: 7px 10px; color: #27755b; background: #e5f4ed; border-radius: 6px; font-size: 11px; font-weight: 800; }.modal[hidden] { display: none; }.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(22,18,14,.54); backdrop-filter: blur(3px); }.modal-card { position: relative; width: min(600px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; padding: 27px; background: #fffdfa; border-radius: 14px; box-shadow: 0 22px 65px rgba(0,0,0,.27); }.modal-close { position: absolute; top: 9px; right: 11px; width: 28px; height: 28px; color: #776d64; background: #f4eee8; border: 0; border-radius: 50%; font-size: 20px; line-height: 1; }.modal-title { padding-right: 35px; }.modal-title h2 { margin-bottom: 5px; font-size: 25px; }.modal-title p { color: var(--muted); font-size: 12px; }.modal-form { display: grid; gap: 13px; margin-top: 19px; }.modal-form .modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.modal-form .form-full { grid-column: 1 / -1; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 7px; }.customer-profile { display: grid; gap: 14px; }.profile-head { padding: 16px; background: #f7f1e7; border-left: 4px solid var(--gold); border-radius: 7px; }.profile-head h3 { margin-bottom: 3px; }.profile-head p { margin: 0; color: var(--muted); font-size: 12px; }.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.profile-stats div { padding: 10px; background: #fcf9f5; border: 1px solid var(--line); border-radius: 7px; }.profile-stats span { display:block; color: var(--muted); font-size: 9px; text-transform: uppercase; }.profile-stats strong { display:block; margin-top: 3px; font-size: 15px; }.profile-history { display: grid; gap: 6px; }.history-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eee8df; font-size: 12px; }.history-row:last-child { border-bottom: 0; }.history-row small { color: var(--muted); }.bill-view { display: grid; gap: 14px; }.bill-print-brand { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 2px solid var(--gold); }.bill-print-brand img { width: 66px; height: 55px; object-fit: cover; object-position: left; border-radius: 5px; }.bill-print-brand h3 { margin-bottom: 1px; }.bill-view-lines { display: grid; gap: 5px; }.bill-view-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #ded5ca; font-size: 12px; }.bill-view-line small { color: var(--muted); }.bill-summary { padding: 12px; background: #f8f1e6; border-radius: 7px; }.bill-summary div { display:flex; justify-content:space-between; margin: 5px 0; font-size: 12px; }.bill-summary .bill-final { padding-top: 7px; border-top: 1px solid #e5d3b5; color: var(--red); font-size: 17px; font-weight: 850; }.bill-modal-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.toast { position: fixed; right: 22px; bottom: 22px; z-index: 70; max-width: min(380px, calc(100vw - 44px)); padding: 12px 15px; color: white; background: #27755b; border-radius: 8px; box-shadow: 0 13px 28px rgba(28,76,58,.23); font-size: 12px; transform: translateY(150px); opacity: 0; transition: .25s ease; }.toast.show { transform: none; opacity: 1; }.toast.error { background: #a4181c; }
@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(3,1fr); }.report-metric-grid { grid-template-columns: repeat(3,1fr); }.billing-layout { grid-template-columns: minmax(0,1fr) 355px; }.sidebar { width: 223px; }.content, .topbar { padding-left: 30px; padding-right: 30px; } }
@media (max-width: 980px) { .sidebar { width: 64px; padding: 16px 8px; }.sidebar-brand { justify-content:center; padding: 0 0 18px; }.sidebar-brand div, .sidebar-footer, .nav-item:not(.active)::after { display:none; }.nav-item { justify-content:center; padding:0; }.nav-item i { width:auto; }.nav-item.active { background: #a4181c; }.topbar { padding-left: 24px; padding-right:24px; }.content { padding-left:24px; padding-right:24px; }.billing-layout { grid-template-columns: 1fr; }.invoice-panel { position: static; }.dashboard-welcome img { width: 190px; }.line-adder { flex-wrap: wrap; }.line-adder .grow-label { flex: 1 1 245px; }.dashboard-grid { gap: 13px; } }
@media (max-width: 700px) { body { font-size:13px; }.sidebar { width: min(280px, 82vw); padding: 20px 13px; transform: translateX(-102%); transition:.22s ease; position:fixed; }.sidebar.open { transform:none; }.sidebar-brand { justify-content:flex-start; padding:0 8px 20px; }.sidebar-brand div, .sidebar-footer { display:block; }.nav-item { justify-content:flex-start; padding:0 11px; }.nav-item i { width:18px; }.mobile-only { display:block; }.topbar { min-height:68px; padding:10px 16px; }.topbar-title span { display:none; }.topbar-title h1 { font-size:18px; }.today-label { display:none; }.quick-bill { min-height:36px; padding:7px 10px; }.content { padding:23px 15px 50px; }.section-header { align-items:flex-start; flex-direction:column; gap:13px; margin-bottom:17px; }.section-header h2 { font-size:27px; }.header-buttons, .section-header > .button { width:100%; justify-content:flex-start; }.dashboard-welcome { min-height:0; padding:22px; }.dashboard-welcome h2 { font-size:30px; }.dashboard-welcome img { display:none; }.stat-grid, .report-metric-grid { grid-template-columns: repeat(2,1fr); gap:9px; margin:14px 0; }.stat-card { min-height:95px; padding:13px; }.stat-card .stat-icon { margin-bottom:8px; }.stat-card strong { font-size:18px; }.dashboard-grid, .settings-grid { grid-template-columns:1fr; }.chart-panel, .split-panel, .low-stock-panel, .activity-panel, .report-subpanel, .analytics-table { padding:17px; }.customer-grid { grid-template-columns:1fr; }.line-adder { display:grid; grid-template-columns:1fr 1fr; }.line-adder .grow-label { grid-column:1/-1; min-width:0; }.line-adder button { width:100%; }.billing-form, .invoice-panel { padding:18px; }.billing-logo { width:135px; height:51px; }.filter-toolbar { align-items:stretch; flex-wrap:wrap; }.filter-count { width:100%; margin-left:0; }.search-input { width:100%; }.bill-filters label:not(.search-input) { width: calc(50% - 6px); }.filter-chips { gap:6px; }.filter-chip { font-size:9px; }.inventory-stats, .expense-summary { grid-template-columns: repeat(2,1fr); gap:8px; }.custom-dates { align-items:stretch; flex-wrap:wrap; }.custom-dates label { flex:1; width:auto; }.custom-dates .button { width:100%; }.bill-modal-actions { grid-template-columns:1fr; }.modal-card { padding:21px 17px; }.profile-stats { grid-template-columns:1fr 1fr; }.toast { right:15px; bottom:15px; }.report-list-row { grid-template-columns:1fr auto; }.report-list-row small { grid-column:1/-1; } }
@media (max-width: 410px) { .line-adder { grid-template-columns:1fr; }.line-adder .grow-label, .line-adder button { grid-column:auto; }.invoice-adjustments { grid-template-columns:1fr; }.invoice-adjustments > label:last-child { grid-column:auto; }.discount-fields { grid-column:auto; }.topbar-title h1 { font-size:16px; } }

/* NGA Solutions authentication, branches, attendance and roles */
.pwa-install-button { white-space: nowrap; }
/* The supplied NGA mark is square; contain it instead of cropping it in compact brand areas. */
.sidebar-brand img { object-fit: contain; object-position: center; background: #111; }
.dashboard-welcome img, .billing-logo { object-fit: contain; object-position: center; background: #111; }
.bill-print-brand img { object-fit: contain; object-position: center; background: #111; }
.nav-item.active { background: linear-gradient(90deg, #8b6414, #c79527); }
.quick-bill, .button-primary { background: linear-gradient(120deg, #8b6414, #c79527); box-shadow: 0 7px 14px rgba(139,100,20,.2); }
.chart-bar .bar { background: linear-gradient(180deg, #d7aa42, #8b6414); }
.chart-bar strong { color: #8b6414; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:30px 18px; color:#fff; background:radial-gradient(circle at 70% 20%, rgba(185,135,39,.28), transparent 26%), linear-gradient(135deg,#0f0d0b,#34211d 56%,#14110e); }.login-card { width:min(430px,100%); padding:32px; text-align:center; background:rgba(255,253,250,.98); border:1px solid rgba(233,202,124,.45); border-radius:18px; box-shadow:0 25px 75px rgba(0,0,0,.35); color:var(--ink); }.login-logo { width:126px; height:126px; margin-bottom:15px; object-fit:contain; border-radius:50%; box-shadow:0 10px 25px rgba(122,24,29,.23); }.login-card h1 { margin:0 0 9px; color:#7a171d; font-family:Georgia,serif; font-size:32px; line-height:1.02; letter-spacing:-.045em; }.login-copy { margin:0 auto 22px; color:var(--muted); font-size:13px; }.login-form { display:grid; gap:13px; text-align:left; }.login-form .form-message { margin:0; }.login-help { display:grid; gap:4px; margin-top:20px; padding:12px; color:#65584e; background:#fbf4e7; border:1px solid #eedec2; border-radius:8px; text-align:left; font-size:11px; }.login-help strong { color:#7d5718; }.login-help code { padding:1px 4px; color:#7d171d; background:#fff; border-radius:3px; }.login-help small { color:#8e8175; }.branch-switcher { min-width:160px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:5px; color:#786d61; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }.branch-switcher select { min-height:33px; padding:5px 21px 5px 7px; font-size:11px; font-weight:700; }.user-pill { display:flex; align-items:center; gap:7px; min-height:35px; max-width:170px; padding:4px 9px 4px 4px; overflow:hidden; color:#4b4037; background:#fbf5ec; border:1px solid #ebdabe; border-radius:99px; }.user-pill span { display:grid; place-items:center; width:26px; height:26px; flex:none; color:#fff; background:#8b1a1f; border-radius:50%; font-size:11px; }.user-pill b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.logout-button { padding:5px 0; color:#8b1a1f; background:transparent; border:0; font-size:11px; font-weight:800; }.logout-button:hover { text-decoration:underline; }.nav-item[hidden], [data-permission-action][hidden] { display:none!important; }.attendance-layout, .profile-page-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; margin-bottom:17px; }.attendance-card,.location-card { min-height:180px; padding:22px; }.attendance-card h3,.location-card h3 { margin-bottom:7px; }.attendance-card p:not(.eyebrow),.location-card p:not(.eyebrow) { color:var(--muted); font-size:12px; line-height:1.55; }.attendance-time-card { display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; }.attendance-time-card span { padding:6px 8px; color:#5b4f43; background:#f9f2e8; border-radius:5px; font-size:11px; }.attendance-filters label { width:175px; }.attendance-filters .filter-toolbar { flex-wrap:wrap; }.user-security-note { display:flex; align-items:flex-start; gap:9px; margin-bottom:13px; padding:12px 14px; background:#fffbf2; box-shadow:none; }.user-security-note > span { color:#9b691a; }.user-security-note p { margin:0; color:#716556; font-size:11px; line-height:1.5; }.profile-card { min-height:185px; padding:23px; }.profile-card h3 { margin-bottom:7px; }.profile-card p { color:var(--muted); font-size:12px; line-height:1.55; }.profile-role { display:inline-block; padding:4px 7px; color:#fff; background:#8b1a1f; border-radius:4px; font-size:10px; font-weight:800; letter-spacing:.06em; }.profile-access { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }.profile-access span { padding:5px 7px; color:#685945; background:#faf1df; border-radius:4px; font-size:10px; font-weight:750; }.settings-logo { width:90px; height:90px; float:right; margin:-6px 0 12px 16px; object-fit:contain; border-radius:50%; }.role-owner { color:#7b5413; background:#fff1cf; }.role-manager { color:#2d6291; background:#e6f1fa; }.role-staff { color:#277259; background:#e4f3ea; }.permission-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:10px; background:#faf7f2; border:1px solid var(--line); border-radius:7px; }.permission-grid label { display:flex; align-items:center; gap:5px; color:#60564d; font-size:10px; }.permission-grid input { width:auto; min-height:auto; accent-color:#a4181c; }.form-note { margin:-6px 0 0; color:#8a7e71; font-size:10px; }
.button-whatsapp { color:#fff; background:linear-gradient(120deg,#128c5b,#25d366); box-shadow:0 7px 14px rgba(18,140,91,.18); }.button-whatsapp:hover { background:#0b774b; transform:translateY(-1px); }.customer-select { width:16px; min-height:auto; accent-color:#128c5b; }.whatsapp-action { color:#12734b; border-color:#a8ddbe; }.whatsapp-customer-actions { display:flex; flex-wrap:wrap; gap:8px; }.compact-form { display:grid; gap:10px; margin-top:14px; }.whatsapp-template-card { grid-column:span 2; }.whatsapp-template-card textarea { line-height:1.45; }.whatsapp-setting-card .button { justify-self:start; }.form-note { line-height:1.45; }
.membership-bill-panel { margin:18px 0 24px; padding:17px; background:#f8f3e9; border:1px solid #e4d8c8; border-radius:10px; }.membership-bill-panel h3 { margin:0 0 4px; }.membership-bill-panel > p { margin:0 0 12px; color:var(--muted); font-size:11px; }.membership-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.membership-summary { margin-top:11px; padding:10px; color:#4d443c; background:#fffdfa; border-radius:7px; font-size:11px; }.membership-entitlements { display:grid; gap:8px; margin-top:12px; }.membership-entitlement { display:grid; grid-template-columns:1fr 1.25fr 86px; gap:8px; align-items:end; padding:9px; background:#fffdfa; border:1px solid #eadfce; border-radius:7px; }.membership-management-card { padding:24px; }.membership-management-card h3 { margin-bottom:4px; }.membership-management-card > p { color:var(--muted); font-size:12px; }.membership-management-card .compact-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.membership-management-card .compact-form .wide { grid-column:1/-1; }.membership-list { display:grid; gap:7px; margin-top:14px; }.membership-list .compact-row { padding:9px 0; }.membership-list small { color:var(--muted); }.membership-status { color:#27755b; font-size:10px; font-weight:800; }.membership-note { color:var(--muted); font-size:11px; line-height:1.5; }
@media (max-width:700px){.membership-fields,.membership-management-card .compact-form{grid-template-columns:1fr;}.membership-entitlement{grid-template-columns:1fr;}}
.cloud-login-card { margin-top:15px; padding:14px; background:#f5f8fb; border:1px solid #cfe0ee; border-radius:9px; text-align:left; }.cloud-login-card > strong { color:#2c5b7d; font-size:12px; }.cloud-login-card > p:not(.eyebrow) { margin:4px 0 10px; color:#687b89; font-size:11px; line-height:1.45; }.cloud-setting-card { border-color:#bdd7e9; background:linear-gradient(155deg,#fffefd 0%,#f3f9fd 100%); }.cloud-setting-card .header-buttons { justify-content:flex-start; margin-top:12px; }
.cloud-staff-register { margin-top:12px; padding-top:10px; border-top:1px dashed #b9ccda; }.cloud-staff-register summary { color:#416b89; font-size:11px; font-weight:800; cursor:pointer; }.cloud-staff-register p { margin:8px 0 10px; color:#6e7e89; font-size:10px; line-height:1.45; }
.password-field { position:relative; display:block; }.password-field input { padding-right:46px; }.password-toggle { position:absolute; top:50%; right:7px; display:grid; place-items:center; width:33px; min-height:30px; padding:0; transform:translateY(-50%); color:#7c6254; background:transparent; border:0; border-radius:5px; font-size:16px; line-height:1; }.password-toggle:hover,.password-toggle:focus-visible { color:#9d171d; background:#f8eee8; outline:none; }.password-toggle[aria-pressed="true"] { color:#9d171d; }
@media (max-width:980px) { .branch-switcher span,.today-label,.user-pill b { display:none; }.branch-switcher { min-width:118px; }.permission-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .login-card { padding:26px 20px; }.login-card h1 { font-size:29px; }.topbar-actions { gap:8px; }.branch-switcher { min-width:105px; }.branch-switcher select { font-size:10px; }.user-pill { padding:3px; }.logout-button { font-size:10px; }.attendance-layout,.profile-page-grid { grid-template-columns:1fr; }.attendance-filters label { width:calc(50% - 6px); }.attendance-filters label:first-child { width:100%; }.permission-grid { grid-template-columns:1fr 1fr; } }
.attendance-qr-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:start; margin-bottom:17px; padding:22px; }.attendance-qr-panel h3 { margin:3px 0 7px; }.attendance-qr-panel p:not(.eyebrow) { max-width:570px; color:var(--muted); font-size:12px; line-height:1.55; }.attendance-qr-controls { display:grid; gap:9px; min-width:225px; }.attendance-qr-controls label { color:#5e5145; font-size:11px; font-weight:800; }.attendance-qr-preview { grid-column:1 / -1; display:flex; align-items:center; gap:18px; min-height:88px; padding:14px; color:#77695d; background:#fbf7f0; border:1px dashed #d9c9b1; border-radius:10px; font-size:12px; }.attendance-qr-preview img { width:180px; height:180px; padding:8px; background:#fff; border:1px solid #e4d7c4; border-radius:8px; }.attendance-qr-preview div { display:grid; gap:7px; }.attendance-qr-preview strong { color:#332820; font-size:14px; }.attendance-qr-preview span { color:var(--muted); }.attendance-qr-loading { color:#7d171d; font-weight:750; }.attendance-qr-reader { width:100%; min-height:230px; overflow:hidden; background:#111; border-radius:9px; }.attendance-qr-reader video { width:100%!important; border-radius:9px; } @media (max-width:700px) { .attendance-qr-panel { grid-template-columns:1fr; }.attendance-qr-controls { min-width:0; }.attendance-qr-preview { flex-direction:column; align-items:flex-start; }.attendance-qr-preview img { width:160px; height:160px; } }
.staff-work-filters { display:grid; gap:12px; margin-top:13px; padding:12px; background:#fbf7f0; border:1px solid #e5d7c5; border-radius:10px; }.staff-work-mode { display:flex; gap:7px; flex-wrap:wrap; }.staff-work-mode button { min-height:36px; padding:7px 12px; color:#6b5d50; background:#fffdfa; border:1px solid #d8c8b4; border-radius:7px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; }.staff-work-mode button.is-active { color:#fff; background:#8e6515; border-color:#8e6515; box-shadow:0 3px 8px rgba(142,101,21,.18); }.staff-work-picker { display:flex; align-items:end; gap:10px; }.staff-work-picker label { display:grid; gap:5px; min-width:180px; color:#655a50; font-size:11px; font-weight:800; }.staff-work-picker input { min-height:39px; padding:8px 9px; font-size:13px; }.staff-work-filters + .range-label { margin:10px 0 3px; } @media (max-width:700px) { .staff-work-mode { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }.staff-work-mode button { padding:7px 5px; font-size:11px; }.staff-work-picker { display:grid; grid-template-columns:1fr; }.staff-work-range-pickers { grid-template-columns:1fr 1fr; }.staff-work-picker label { min-width:0; } }

.unified-catalog > label {display:grid;gap:7px;font-size:12px;font-weight:750}.unified-catalog > label input{width:100%;min-height:46px}.bill-item-hint{margin:9px 0 16px;color:var(--muted);font-size:12px;min-height:18px}.unified-adder .grow-label{flex:1}@media(max-width:700px){.unified-adder{grid-template-columns:minmax(0,1fr) 80px}.unified-adder .grow-label{grid-column:auto}.unified-adder button{grid-column:1/-1;min-height:44px}}

/* Bride & Groom supplied brand asset: preserve the entire logo. */
.login-logo,.sidebar-brand img,.billing-logo,.dashboard-welcome img,.bill-print-brand img{object-fit:contain;object-position:center;background:transparent;border-radius:0;border:0;box-shadow:none}
.login-logo{width:146px;height:160px}.login-card h1 small{display:block;font-size:.57em;line-height:1.6;letter-spacing:.06em;font-family:Arial,sans-serif;font-weight:500}
.sidebar-brand strong{font-size:16px;line-height:1.2}.sidebar-brand span{font-size:9px}.sidebar-brand img{flex-shrink:0}
.billing-logo{width:104px;height:114px}.dashboard-welcome img{width:160px;height:176px}.bill-print-brand img{width:76px;height:84px}
@media(max-width:700px){.login-card h1{font-size:29px}.billing-logo{width:80px;height:88px}.sidebar-brand strong{font-size:16px}}

.development-note{padding:12px 15px;border:1px solid #dfcc9d;background:#fff8e6;color:#725825;border-radius:8px;font-size:12px;line-height:1.5;margin:0 0 20px}

/* Colour-only theme. Legacy variable names remain aliases for existing components. */
:root {
 --sidebar-bg:#14102B; --sidebar-active:#EC3B99; --primary:#7C3AED; --primary-hover:#6D28D9;
 --revenue:#10B981; --cashflow:#3B82F6; --appointment:#8B5CF6; --average-bill:#F59E0B;
 --ink:#1F2937; --muted:#6B7280; --line:#E5E7EB; --canvas:#F8F8FA; --panel:#FFFFFF;
 --gold:var(--primary); --gold-dark:var(--primary-hover); --gold-soft:#F3E8FF;
 --red:var(--primary); --red-dark:var(--primary-hover);
 --green:#047857; --green-soft:#ECFDF5; --blue:#1D4ED8; --blue-soft:#EFF6FF;
 --violet-soft:#F5F3FF; --orange-soft:#FFFBEB; --orange-text:#92400E;
 --danger:#B91C1C; --danger-soft:#FEF2F2; --pink-text:#9D174D; --pink-soft:#FDF2F8;
 --on-dark:#FFFFFF; --sidebar-text:#D1D5DB; --shadow:0 12px 32px rgba(20,16,43,.07);
}
.sidebar {color:var(--on-dark);background:var(--sidebar-bg)}
.sidebar-brand,.sidebar-footer {border-color:rgba(255,255,255,.15)}
.sidebar-brand strong {color:var(--on-dark)}
.sidebar-brand span,.sidebar-footer,.nav-item,.nav-item i {color:var(--sidebar-text)}
.nav-item.active,.nav-item.active:hover {background:var(--sidebar-active);color:var(--sidebar-bg)}
.nav-item.active i {color:var(--sidebar-bg)}
.topbar {background:rgba(255,255,255,.9)}
.quick-bill,.button-primary,.button-gold {background:var(--primary);color:var(--on-dark);box-shadow:0 7px 14px rgba(124,58,237,.2)}
.quick-bill:hover,.button-primary:hover,.button-gold:hover {background:var(--primary-hover)}
.button-outline,.table-action,.filter-chip,.staff-work-mode button {color:var(--ink);background:var(--panel);border-color:var(--line)}
.button-outline:hover,.table-action:hover,.filter-chip:hover {color:var(--primary);border-color:var(--primary)}
.button-export,.button-whatsapp {background:var(--green);color:var(--on-dark);box-shadow:0 7px 14px rgba(16,185,129,.15)}
.button-export:hover,.button-whatsapp:hover {background:#065F46}
.dashboard-welcome {background:radial-gradient(circle at 89% 24%,rgba(139,92,246,.2),transparent 25%),linear-gradient(110deg,var(--sidebar-bg),#29204D)}
.dashboard-welcome h2 {color:var(--on-dark)}
.dashboard-welcome p:not(.eyebrow) {color:var(--sidebar-text)}
.dashboard-welcome .eyebrow {color:#E9D5FF}
.dashboard-welcome img {border-color:var(--line)}
.stat-card {--metric:var(--appointment);--metric-soft:var(--violet-soft);--metric-text:var(--primary-hover);border-color:var(--metric)}
.stat-card.gold,.stat-card.green {--metric:var(--revenue);--metric-soft:var(--green-soft);--metric-text:var(--green)}
.stat-card.blue {--metric:var(--cashflow);--metric-soft:var(--blue-soft);--metric-text:var(--blue)}
.stat-card .stat-icon,.stat-card.gold .stat-icon,.stat-card.green .stat-icon,.stat-card.blue .stat-icon {background:var(--metric-soft);color:var(--metric-text)}
#dashboardStats:has(> :nth-child(6)) > :nth-child(2) {--metric:var(--cashflow);--metric-soft:var(--blue-soft);--metric-text:var(--blue)}
#reportMetrics > :nth-child(-n+3),#reportMetrics > :nth-child(9) {--metric:var(--revenue)}
#reportMetrics > :nth-child(4),#reportMetrics > :nth-child(5),#reportMetrics > :nth-child(6) {--metric:var(--cashflow)}
.stat-card.appointment {--metric:var(--appointment)}
.stat-card.average-bill {--metric:var(--average-bill);--metric-soft:var(--orange-soft);--metric-text:var(--orange-text)}
.stat-card strong,.payment-row strong,.compact-row strong,.cell-title,.report-list-row span,.attendance-qr-preview strong,.invoice-totals .final-row,.final-row span {color:var(--ink)}
.stat-card small,.compact-row small,.line-item small,.cell-note,.empty-lines,.search-input,.branch-switcher,.form-note,.login-help small,.cloud-login-card > p:not(.eyebrow),.cloud-staff-register p {color:var(--muted)}
.chart-bar .bar {background:var(--revenue)}
.chart-bar strong {color:var(--green)}
.payment-track {background:var(--line)}
.payment-track i {background:var(--cashflow)}
.payment-row label,label,td,.permission-grid label,.staff-work-picker label,.attendance-qr-controls label {color:var(--ink)}
.compact-row,td,.billing-logo,.invoice-totals .final-row,.bill-summary .bill-final {border-color:var(--line)}
.warning-label.low,.status-due,.development-note {color:var(--orange-text);background:var(--orange-soft);border-color:var(--average-bill)}
.warning-label.out,.remove-line {color:var(--danger);background:var(--danger-soft)}
.form-message,.table-action.danger {color:var(--danger)}
.status-active,.status-paid,.local-note,.role-staff {color:var(--green);background:var(--green-soft)}
.status-inactive {color:var(--muted);background:var(--canvas)}
input,select,textarea {background:var(--panel);border-color:var(--line)}
input::placeholder {color:var(--muted)}
input:focus,select:focus,textarea:focus {border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.13)}
.lookup-results {background:var(--panel);border-color:var(--line);box-shadow:0 10px 23px rgba(20,16,43,.1)}
.lookup-option {color:var(--ink)}
.lookup-option:hover,.password-toggle:hover,.password-toggle:focus-visible {background:var(--violet-soft)}
.customer-lookup-info,.profile-head,.profile-access span,.invoice-badge,.empty-state span,.role-owner {background:var(--violet-soft);color:var(--primary-hover)}
.customer-lookup-info strong,.login-help strong,.login-help code,.login-card h1,.logout-button,.password-toggle[aria-pressed="true"],.password-toggle:hover,.password-toggle:focus-visible,.attendance-qr-loading {color:var(--primary-hover)}
.filter-chip.active,.staff-work-mode button.is-active {color:var(--on-dark);background:var(--primary);border-color:var(--primary)}
.staff-work-mode button.is-active {box-shadow:0 3px 8px rgba(124,58,237,.18)}
th {color:var(--muted);background:var(--canvas)}
tbody tr:hover {background:var(--violet-soft)}
.gender-male,.role-manager {color:var(--blue);background:var(--blue-soft)}
.gender-female {color:var(--pink-text);background:var(--pink-soft)}
.gender-other {color:var(--primary-hover);background:var(--violet-soft)}
.mini-stat,.modal-card {background:var(--panel)}
.modal-backdrop {background:rgba(20,16,43,.54)}
.modal-close,.password-toggle {color:var(--muted)}
.modal-close,.profile-stats div,.bill-summary,.permission-grid,.staff-work-filters,.attendance-qr-preview,.login-help,.attendance-time-card span {background:var(--canvas);border-color:var(--line);color:var(--ink)}
.toast {background:var(--green);box-shadow:0 13px 28px rgba(16,185,129,.23)}
.toast.error {background:var(--danger)}
.login-screen {background:radial-gradient(circle at 70% 20%,rgba(139,92,246,.28),transparent 26%),linear-gradient(135deg,var(--sidebar-bg),#29204D 56%,var(--sidebar-bg))}
.login-card {background:var(--panel);border-color:var(--line)}
.user-pill {color:var(--ink);background:var(--violet-soft);border-color:var(--line)}
.user-pill span,.profile-role {background:var(--primary)}
.user-security-note {background:var(--orange-soft)}
.user-security-note > span {color:var(--orange-text)}
.user-security-note p {color:var(--ink)}
.permission-grid input {accent-color:var(--primary)}
.customer-select {accent-color:var(--green)}
.whatsapp-action {color:var(--green);border-color:var(--revenue)}
.cloud-login-card,.cloud-setting-card {background:var(--panel);border-color:var(--line)}
.cloud-login-card > strong,.cloud-staff-register summary {color:var(--blue)}
.cloud-staff-register,.attendance-qr-preview img {border-color:var(--line)}
.status-dot {background:var(--revenue);box-shadow:0 0 0 3px rgba(16,185,129,.14)}

/* Keep every navigation option reachable on short screens. */
.sidebar { height:100dvh; overflow:hidden; }
.sidebar-brand,.sidebar-footer { flex-shrink:0; }
.sidebar > nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; align-content:start; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--sidebar-text) var(--sidebar-bg); }

.staff-share-row{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:center}.staff-share-row input[type=checkbox]{width:auto;min-height:auto}.staff-share-row>label:first-child{display:flex;align-items:center;gap:8px}