/* DADCARE My Business — vendored stylesheet. No CDN and no build step: WhiteNoise compresses and fingerprints this file, so first paint needs one small CSS request and no framework download. */ /* ── Theme tokens ────────────────────────────────────────────────────────── LIGHT IS THE DEFAULT for every user. The device's dark-mode setting is deliberately NOT consulted: a new visitor starts light and only becomes dark by explicitly choosing it, which the server writes onto . Every colour below is a semantic token, so a component is themed once here rather than restated per page. */ /* ── DADCARE design tokens ───────────────────────────────────────────────── One palette for every surface — Stock, Sales, Expenses, Employees, Reports, Products, Marketplace and future Mini Apps all read these variables, so the visual language stays consistent without any page defining its own colours. LIGHT IS THE DEFAULT. The device's dark-mode setting is deliberately not consulted: a visitor starts light and becomes dark only by choosing it. Colour never carries meaning on its own. Status is always accompanied by a word ("Low", "Out of stock", "Active"), navigation by a label, and the current tab by aria-current, so the interface still reads without colour. */ :root { /* Surfaces: clean near-white page, white cards, subtle borders. */ --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eef0f4; --border: #e4e7ec; /* Type: dark navy primary, muted grey secondary. */ --text: #151a2d; --muted: #646d80; /* Primary accent: indigo/violet. Selected navigation, primary buttons, the Stock summary, active chips and report actions all use this. */ --brand: #4f46e5; --brand-dark: #4338ca; --brand-soft: #e8e9fd; --on-brand: #ffffff; /* text that sits on a filled brand surface */ /* Semantic status. Green means positive only, red means error or destructive only, amber means caution only. */ --ok: #047857; --ok-soft: #d9f3e6; --danger: #c11c1c; --danger-soft: #fde4e4; --warn: #a04a08; --warn-soft: #fdf0d5; /* Mini App identities. Visual identity only: these encode nothing about permission, availability or any other backend state. */ --a-business: #0f766e; --a-business-soft: #d9f2ee; --a-marketplace: #c2410c; --a-marketplace-soft: #fdeddc; --a-school: #4338ca; --a-school-soft: #e4e6fb; --a-pharmacy: #be123c; --a-pharmacy-soft: #fce7ef; --a-gym: #6d28d9; --a-gym-soft: #ece4fb; --a-app: #475467; --a-app-soft: #eceff3; /* My Business operation tiles: soft pastel container, saturated glyph. */ --o-sale: #047857; --o-sale-soft: #d9f3e6; --o-products: #4f46e5; --o-products-soft: #e6e7fd; --o-stock: #b45309; --o-stock-soft: #fdefd8; --o-alert: #b45309; --o-alert-soft: #fdf0d5; --o-purchasing: #0f766e; --o-purchasing-soft: #d9f2ee; --o-customers: #1d4ed8; --o-customers-soft: #dde8fe; --o-suppliers: #6d28d9; --o-suppliers-soft: #ece4fb; --o-expenses: #be123c; --o-expenses-soft: #fde6ec; --o-categories: #475467; --o-categories-soft: #eceff3; --o-reports: #0369a1; --o-reports-soft: #dbeefc; --o-online: #c2410c; --o-online-soft: #fdeddc; --overlay: rgba(0, 0, 0, .62); --on-overlay: #ffffff; /* Receipt paper. Deliberately identical in both themes: a receipt is a printed object, and dark-grey paper reads as a web card rather than something torn off a till. Declared here so the palette stays in one place, not so it can be themed. */ --paper: #ffffff; --paper-ink: #14161c; --paper-muted: #5b6270; --paper-rule: rgb(0 0 0 / .22); --paper-edge: rgb(0 0 0 / .08); --radius: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08); --tap: 44px; } /* Dark mode keeps the same identity and the same meanings; only the surfaces and the lightness of each hue change so contrast survives. */ :root[data-theme="dark"] { --bg: #10131c; --surface: #171b28; --surface-2: #1f2432; --border: #2a3040; --text: #e8eaf2; --muted: #98a1b8; --brand: #8b8cf7; --brand-dark: #a9aafb; --brand-soft: #23264a; --on-brand: #10131c; /* dark type on the lighter dark-mode brand */ --ok: #34d399; --ok-soft: #10291f; --danger: #f87171; --danger-soft: #2e1518; --warn: #fbbf24; --warn-soft: #2c2010; --a-business: #2dd4bf; --a-business-soft: #10302c; --a-marketplace: #fdb022; --a-marketplace-soft: #33240d; --a-school: #8098f9; --a-school-soft: #1b1f3d; --a-pharmacy: #fd6f8e; --a-pharmacy-soft: #3a1522; --a-gym: #b18cf5; --a-gym-soft: #271a3d; --a-app: #98a2b3; --a-app-soft: #242a32; --o-sale: #34d399; --o-sale-soft: #10291f; --o-products: #a5b4fc; --o-products-soft: #1e2143; --o-stock: #fbbf24; --o-stock-soft: #2c2010; --o-alert: #fbbf24; --o-alert-soft: #2c2010; --o-purchasing: #2dd4bf; --o-purchasing-soft: #10302c; --o-customers: #7fabfb; --o-customers-soft: #16223d; --o-suppliers: #b18cf5; --o-suppliers-soft: #271a3d; --o-expenses: #fb7185; --o-expenses-soft: #34141d; --o-categories: #98a2b3; --o-categories-soft: #242a32; --o-reports: #56b6ea; --o-reports-soft: #0d2733; --o-online: #fdb022; --o-online-soft: #33240d; /* Paper does not invert. Restated here so the two themes declare the same token names, and so the intent is explicit rather than an omission. */ --paper: #ffffff; --paper-ink: #14161c; --paper-muted: #5b6270; --paper-rule: rgb(0 0 0 / .22); --paper-edge: rgb(0 0 0 / .08); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding-bottom: 76px; /* room for the mobile tab bar */ } a { color: var(--brand); text-decoration: none; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar h1 { font-size: 17px; margin: 0; font-weight: 650; } .topbar .spacer { flex: 1; } .biz { display: flex; align-items: center; gap: 8px; max-width: 55%; } .biz select { max-width: 100%; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; padding: 7px 10px; font-size: 14px; min-height: 36px; } .wrap { padding: 16px; max-width: 1100px; margin: 0 auto; } /* ── Cards & grid ───────────────────────────────────────────────────────── */ .grid { display: grid; gap: 12px; } .grid.stats { grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .grid.stats { grid-template-columns: repeat(4, 1fr); } .grid.cols2 { grid-template-columns: repeat(2, 1fr); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); } .card h2 { font-size: 14px; margin: 0 0 10px; font-weight: 650; } .stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .stat .value { font-size: 24px; font-weight: 700; margin-top: 6px; line-height: 1.2; } .stat .value.small { font-size: 18px; } /* ── Lists ──────────────────────────────────────────────────────────────── */ .list { display: flex; flex-direction: column; gap: 8px; } .row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-height: var(--tap); } .row .grow { flex: 1; min-width: 0; } .row .name { font-weight: 600; } .row .meta { color: var(--muted); font-size: 13px; margin-top: 2px; } .row .amount { font-weight: 700; white-space: nowrap; } .thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--bg); border: 1px solid var(--border); flex: none; } /* ── Badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge.low { background: var(--warn-soft); color: var(--warn); } .badge.out { background: var(--danger-soft); color: var(--danger); } .badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.info { background: var(--brand-soft); color: var(--brand-dark); } /* ── Controls ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 10px 16px; border-radius: 10px; border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); font-size: 15px; font-weight: 600; cursor: pointer; } .btn:active { background: var(--brand-dark); } .btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .btn.danger { background: var(--danger); border-color: var(--danger); } .btn.block { width: 100%; } .btn[disabled] { opacity: .55; cursor: not-allowed; } .field { margin-bottom: 12px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; /* >=16px stops iOS zoom-on-focus */ } .field textarea { min-height: 88px; } .field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } .search { margin-bottom: 12px; } /* ── Feedback ───────────────────────────────────────────────────────────── */ .alert { padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; } .alert.error { background: var(--danger-soft); color: var(--danger); } .alert.ok { background: var(--ok-soft); color: var(--ok); } .empty { text-align: center; color: var(--muted); padding: 28px 12px; } .skeleton { height: 62px; border-radius: 10px; margin-bottom: 8px; background: linear-gradient(90deg, var(--border) 25%, var(--bg) 37%, var(--border) 63%); background-size: 400% 100%; animation: shimmer 1.2s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* ── Bottom navigation (mobile-first) ───────────────────────────────────── */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .tabbar a { flex: 1; text-align: center; color: var(--muted); font-size: 11px; padding: 6px 2px; border-radius: 8px; min-height: var(--tap); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .tabbar a.active { color: var(--brand); background: var(--brand-soft); font-weight: 650; } .more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 720px) { .more-grid { grid-template-columns: repeat(3, 1fr); } } .more-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-weight: 600; min-height: var(--tap); } /* ── POS ────────────────────────────────────────────────────────────────── */ .cart-total { position: sticky; bottom: 76px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); } .qty { display: flex; align-items: center; gap: 8px; } .qty button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 18px; cursor: pointer; } table.report { width: 100%; border-collapse: collapse; font-size: 14px; } table.report th, table.report td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); } table.report td.num, table.report th.num { text-align: right; } .scroll-x { overflow-x: auto; } /* Icons inside My Business menus and the tab bar (see templates/ui/_icon_sprite.html). */ .tabbar a .ic { width: 22px; height: 22px; } .more-grid a .ic { width: 26px; height: 26px; color: var(--brand); } /* ── My Business quick actions ───────────────────────────────────────────── A compact, highly tappable grid of shortcuts into operations that already exist. Colour is identity only; what a user may do is decided server-side. */ .ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; } @media (max-width: 359px) { .ops { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 720px) { .ops { grid-template-columns: repeat(6, 1fr); } } .op { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px 12px; border-radius: var(--radius); color: var(--text); text-align: center; min-height: 92px; } @media (hover: hover) { .op:hover { background: var(--surface-2); } } .op-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; flex: none; background: var(--a-app-soft); color: var(--a-app); } .op-ico .ic { width: 26px; height: 26px; } .op-lb { font-size: 12px; font-weight: 600; line-height: 1.25; } .o-sale { background: var(--o-sale-soft); color: var(--o-sale); } .o-products { background: var(--o-products-soft); color: var(--o-products); } .o-stock { background: var(--o-stock-soft); color: var(--o-stock); } .o-alert { background: var(--o-alert-soft); color: var(--o-alert); } .o-purchasing { background: var(--o-purchasing-soft); color: var(--o-purchasing); } .o-customers { background: var(--o-customers-soft); color: var(--o-customers); } .o-suppliers { background: var(--o-suppliers-soft); color: var(--o-suppliers); } .o-expenses { background: var(--o-expenses-soft); color: var(--o-expenses); } .o-categories { background: var(--o-categories-soft); color: var(--o-categories); } .o-reports { background: var(--o-reports-soft); color: var(--o-reports); } .o-online { background: var(--o-online-soft); color: var(--o-online); } /* ── Receipt sheet ───────────────────────────────────────────────────────── A narrow, thermal-style sheet that prints alone: the print rules below drop navigation, buttons and every other piece of application chrome. */ .receipt-sheet { /* Paper is white in both themes: a receipt is a printed object, and a dark-grey one reads as a web card rather than something torn off a till. */ background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-edge); border-radius: 4px; box-shadow: var(--shadow), 0 8px 24px rgb(0 0 0 / .10); padding: 20px 18px; max-width: 340px; margin: 0 auto; font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.45; position: relative; } /* A serrated edge top and bottom, the way till roll tears. */ .receipt-sheet::before, .receipt-sheet::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(135deg, var(--paper) 0 6px, transparent 6px 12px); } .receipt-sheet::before { top: -3px; } .receipt-sheet::after { bottom: -3px; } .rt-head { text-align: center; padding-bottom: 12px; border-bottom: 1px dashed var(--paper-rule); } .rt-logo { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 8px; display: block; } .rt-name { font-size: 16px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; } .rt-sub { font-size: 11.5px; color: var(--paper-muted); margin-top: 2px; } .rt-meta { padding: 10px 0; border-bottom: 1px dashed var(--paper-rule); } .rt-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; } .rt-line .l { color: var(--paper-muted); } .rt-line.strong { font-size: 16px; font-weight: 700; padding-top: 6px; } .rt-line.strong .l { color: var(--paper-ink); } .rt-items { padding: 10px 0; border-bottom: 1px dashed var(--paper-rule); } .rt-item { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 5px 0; break-inside: avoid; page-break-inside: avoid; } /* Placed explicitly: description on the left, amount on the right. */ .rt-item .n { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 14px; } .rt-item .q { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--paper-muted); } .rt-item .a { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; } .rt-totals { padding: 10px 0; } .rt-foot { text-align: center; font-size: 11.5px; color: var(--paper-muted); padding-top: 12px; border-top: 1px dashed var(--paper-rule); } .receipt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px auto 0; max-width: 340px; } .receipt-actions .btn { flex: 1 1 46%; min-height: 42px; font-size: 14px; } @media print { /* Only the receipt prints: no navigation, no buttons, no chrome. */ .topbar, .tabbar, .globalnav, .receipt-actions, .no-print, #flash, .biz, header, nav { display: none !important; } body { background: #fff; color: #000; padding: 0; margin: 0; } .wrap { padding: 0; max-width: none; } .receipt-sheet { border: 0; border-radius: 0; box-shadow: none; max-width: 80mm; width: 80mm; padding: 0; margin: 0; background: #fff; color: #000; } .receipt-sheet::before, .receipt-sheet::after { display: none; } .rt-sub, .rt-line .l, .rt-item .q, .rt-foot { color: #333; } .rt-head, .rt-meta, .rt-totals, .rt-foot { break-inside: avoid; page-break-inside: avoid; } .rt-items { orphans: 2; widows: 2; } @page { margin: 6mm; } } /* ── Stock overview ──────────────────────────────────────────────────────── Quantity is operational; value is commercially sensitive and the server decides whether it is sent at all. */ .stock-value { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 12px; } .sv-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .sv-amount { font-size: 24px; font-weight: 700; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; } .stock-value .btn { min-height: 38px; padding: 8px 12px; font-size: 13px; flex: none; } .scroll-x.chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .scroll-x.chips .chip { flex: none; } /* Bottom sheet for Generate report */ .sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(16, 24, 40, .45); } .sheet[hidden] { display: none; } .sheet-body { background: var(--surface); width: 100%; max-height: 82vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); } .sheet-body h2 { margin: 0 0 12px; font-size: 17px; } .sheet-body .row { width: 100%; cursor: pointer; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--border); } @media (min-width: 640px) { .sheet { align-items: center; justify-content: center; } .sheet-body { max-width: 420px; border-radius: 18px; } } /* Tablet and desktop widen the product grid; the data and rules are identical. */ @media (min-width: 900px) { .stock-value { max-width: 420px; } } /* ── Business identity ───────────────────────────────────────────────────── A cover sits above the identity bar so the page previews what a shopper sees on the storefront. Both are optional; neither leaves a gap when unset. */ .id-cover { height: 118px; margin: -16px -14px 0; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--border); } .id-cover:empty { height: 0; border: 0; } .id-bar { display: flex; align-items: center; gap: 12px; padding-top: 14px; } .id-media { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .btn.sm { min-height: 38px; padding: 8px 12px; font-size: 14px; cursor: pointer; } /* ── Add Business chooser ────────────────────────────────────────────────── Two routes into an existing flow: found a business, or accept an invitation to one. Neither changes what the destination does. */ .choice { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); } .choice .grow { display: flex; flex-direction: column; gap: 2px; } .choice .name { font-weight: 600; } .choice .meta { color: var(--muted); font-size: 13px; } /* ── Product photos ──────────────────────────────────────────────────────── Catalogue presentation for the product as it is now. A receipt already written is never rebuilt from these. */ .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (min-width: 640px) { .media-grid { grid-template-columns: repeat(4, 1fr); } } .media-cell { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); } .media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 999px; cursor: pointer; line-height: 1; background: var(--overlay); color: var(--on-overlay); font-size: 18px; } /* ── Invitation sharing ──────────────────────────────────────────────────── The code is issued and revocable server-side. Sharing hands a message to another app; DADCARE never holds anyone's account there. */ .code-box { margin-top: 10px; padding: 14px; text-align: center; background: var(--brand-soft); border-radius: var(--radius); } .code-box .code { font-size: 22px; font-weight: 700; letter-spacing: 2px; color: var(--brand-dark); font-variant-numeric: tabular-nums; user-select: all; word-break: break-all; } .share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .share-row .btn { flex: 1 1 130px; min-height: 40px; font-size: 14px; } /* A .choice rendered as a button must read like the anchor version: full width, left aligned, and dimmed rather than hidden when unavailable. */ button.choice { width: 100%; text-align: left; font: inherit; cursor: pointer; } button.choice:disabled { opacity: .55; cursor: default; } .invite-lead { font-size: 16px; line-height: 1.5; margin: 0 0 12px; } /* ── Quantity entry ──────────────────────────────────────────────────────── Typing a quantity beats tapping a stepper twenty times. The steppers stay for small nudges; the field is the primary control. */ .qty input { width: 64px; height: 36px; text-align: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Stock adjustment moves stock by an amount; a physical count sets a total. The two are different operations and this screen is the first one. */ .adjust-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; } .adjust-head .name { font-weight: 600; } .adjust-head .meta { color: var(--muted); font-size: 13px; margin-top: 2px; } .adjust-entry { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .adjust-entry input { flex: 1 1 80px; min-width: 0; height: 42px; text-align: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .adjust-entry input::-webkit-outer-spin-button, .adjust-entry input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .adjust-entry .btn { flex: 0 0 auto; min-height: 42px; padding: 8px 14px; font-size: 14px; } .adjust-preview { color: var(--muted); font-size: 13px; margin-top: 8px; } /* ── Grouped settings menu ───────────────────────────────────────────────── A settings list rather than an icon dashboard: one row per action, icon left, label, chevron right. Grouping and visibility both come from the declarative index in operations.py — the template renders what it is given and decides nothing about permissions. */ .menu-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .menu-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: var(--tap); color: var(--text); border-bottom: 1px solid var(--border); } .menu-row:last-child { border-bottom: 0; } @media (hover: hover) { .menu-row:hover { background: var(--surface-2); } } .menu-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--a-app-soft); color: var(--a-app); } .menu-ico .ic { width: 20px; height: 20px; } .menu-label { flex: 1; font-weight: 500; font-size: 15px; } .menu-chevron { width: 18px; height: 18px; flex: none; color: var(--muted); } /* ── Access control (Employee management) ────────────────────────────────── A permission is a decision, so it is drawn as a decision: a labelled switch with an unambiguous on and off, sized for a thumb. Colour never carries the state alone — the control is a real checkbox underneath, so assistive technology reads "on"/"off" without seeing the track at all. */ .perm-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); min-height: var(--tap); } .perm-row:last-child { border-bottom: 0; } .perm-text { flex: 1; min-width: 0; } .perm-text .name { font-weight: 500; font-size: 15px; } .perm-text .meta { color: var(--muted); font-size: 13px; margin-top: 2px; } .perm-text .src { color: var(--muted); font-size: 12px; margin-top: 3px; } .switch { position: relative; flex: none; width: 50px; height: 30px; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .switch .track { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: background .15s ease, border-color .15s ease; pointer-events: none; } .switch .track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); transition: transform .15s ease; } .switch input:checked + .track { background: var(--brand); border-color: var(--brand); } .switch input:checked + .track::after { transform: translateX(20px); } .switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; } .switch input:disabled { cursor: default; } .switch input:disabled + .track { opacity: .5; } .emp-head { display: flex; align-items: center; gap: 12px; } .emp-head .grow { flex: 1; min-width: 0; } .emp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; } .emp-count { color: var(--muted); font-size: 14px; margin-top: 2px; } .danger-zone { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }