/* CAFELINO foundation palette: black, graphite, warm orange. */
:root { color-scheme: light; --ink:#171717; --graphite:#292929; --muted:#737373; --paper:#f5f5f4; --orange:#d97706; --orange-dark:#9a4f08; }
:root[data-theme="dark"] { color-scheme:dark; --ink:#f5f5f4; --graphite:#e7e5e4; --muted:#a8a29e; --paper:#111315; --orange:#e27b0a; --orange-dark:#f59e0b; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
.auth-page { position:relative; isolation:isolate; min-height:100vh; overflow:hidden; background:#17110d; color:var(--ink); }
.auth-page::before { content:""; position:fixed; z-index:-2; inset:-18px; background:url('/images/auth/cafelino-store.jpg') center/cover no-repeat; filter:blur(6px) saturate(.9) brightness(.84); transform:scale(1.035); }
.auth-page::after { content:""; position:fixed; z-index:-1; inset:0; background:linear-gradient(135deg,#08060452 0%,#17100b3d 48%,#2a170b61 100%); }
.auth-shell { position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:2rem 1rem; }
.auth-card { width:min(100%,430px); background:#fffffff5; border:1px solid #ffffff9c; border-radius:18px; padding:2.25rem; box-shadow:0 24px 70px #0009; backdrop-filter:blur(16px); }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:13px; background:var(--orange); color:#fff; font-size:1.5rem; font-weight:800; }
.auth-card > .brand-mark { margin-inline:auto; }
.brand-mark.has-image { overflow:hidden; background:transparent; }
.brand-mark.has-image img { width:100%; height:100%; object-fit:contain; }
.eyebrow { margin:1.3rem 0 .35rem; color:var(--orange-dark); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-align:center; }
.auth-card h1 { margin:.2rem 0 1.5rem; font-size:2rem; text-align:center; }
.auth-form { display:grid; gap:1rem; }
.auth-form label:not(.check) { display:grid; gap:.45rem; font-size:.85rem; font-weight:700; }
.auth-form input[type=email], .auth-form input[type=password] { width:100%; padding:.8rem .9rem; border:1px solid #d6d3d1; border-radius:9px; background:#fafaf9; }
.auth-form input:focus { outline:3px solid #fed7aa; border-color:var(--orange); }
.auth-form button { border:0; border-radius:9px; padding:.85rem 1rem; background:var(--orange); color:#fff; font-weight:800; cursor:pointer; }
.auth-form button:hover { background:var(--orange-dark); }
.auth-form a { color:var(--orange-dark); font-size:.88rem; text-align:center; }
.check { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:var(--muted); }
.muted { color:var(--muted); line-height:1.55; }
.notice { margin:0 0 1rem; padding:.8rem; border-radius:8px; font-size:.86rem; }
.notice.error { background:#fef2f2; color:#991b1b; }
.notice.success { background:#f0fdf4; color:#166534; }

/* Authenticated CAFELINO Business OS shell. */
.app-page { min-height:100vh; background:#f2f2f0; color:var(--ink); }
.app-frame { min-height:100vh; display:flex; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:30; width:252px; display:flex; flex-direction:column; background:#151515; color:#d4d4d4; border-right:1px solid #2d2d2d; }
.sidebar-brand { min-height:76px; display:flex; align-items:center; gap:.75rem; padding:0 1.25rem; border-bottom:1px solid #303030; }
.sidebar-brand > span { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--orange); color:#fff; font-weight:900; font-size:1.15rem; }
.sidebar-brand .brand-logo-mark { overflow:hidden; }
.sidebar-brand .brand-logo-mark.has-image { padding:0; background:transparent; }
.sidebar-brand .brand-logo-mark img { width:100%; height:100%; object-fit:contain; }
.sidebar-brand div { display:grid; gap:.1rem; }
.sidebar-brand strong { color:#fff; font-size:.95rem; letter-spacing:.1em; }
.sidebar-brand small { color:#8f8f8f; font-size:.61rem; letter-spacing:.18em; }
.sidebar-close { display:none; margin-left:auto; border:0; background:none; color:#fff; font-size:1.7rem; }
.main-nav { flex:1; overflow-y:auto; padding:1rem .7rem; }
.main-nav p { margin:1.2rem .75rem .45rem; color:#676767; font-size:.61rem; font-weight:800; letter-spacing:.14em; }
.main-nav p:first-child { margin-top:.3rem; }
.main-nav a { min-height:43px; display:flex; align-items:center; gap:.8rem; margin:.15rem 0; padding:0 .75rem; border-radius:8px; color:#a8a8a8; text-decoration:none; font-size:.85rem; font-weight:650; }
.main-nav a > span { width:20px; color:#8a8a8a; text-align:center; font-size:1rem; }
.main-nav a small { margin-left:auto; color:#555; font-size:.52rem; letter-spacing:.08em; }
.main-nav a.active { background:linear-gradient(90deg,#a9550b,#d97706); color:#fff; box-shadow:0 5px 18px #0005; }
.main-nav a.active > span { color:#fff; }
.main-nav a.disabled { cursor:not-allowed; }
.main-nav a.disabled:hover { background:#202020; }
.nav-disclosure { margin:.15rem 0; }
.nav-disclosure > summary { min-height:43px; display:flex; align-items:center; gap:.8rem; padding:0 .75rem; border-radius:8px; color:#a8a8a8; font-size:.85rem; font-weight:650; cursor:pointer; list-style:none; }
.nav-disclosure > summary::-webkit-details-marker { display:none; }
.nav-disclosure > summary > span { width:20px; color:#8a8a8a; text-align:center; font-size:1rem; }
.nav-disclosure > summary > strong { font:inherit; }
.nav-disclosure > summary > i { margin-left:auto; color:#6f6f6f; font-style:normal; transition:transform .15s ease; }
.nav-disclosure[open] > summary > i { transform:rotate(180deg); }
.nav-disclosure > summary:hover, .nav-disclosure > summary:focus-visible, .nav-disclosure.is-active > summary { background:#202020; color:#fff; outline:none; }
.nav-disclosure.is-active > summary > span { color:#fff; }
.nav-submenu { display:grid; gap:.1rem; margin:.15rem 0 .35rem 1.25rem; padding-left:.6rem; border-left:1px solid #373737; }
.main-nav .nav-submenu a { min-height:36px; margin:0; padding:0 .65rem; font-size:.75rem; }
.main-nav .nav-submenu a > span { width:10px; color:#5f5f5f; font-size:.42rem; }
.sidebar-footer { padding:1rem; border-top:1px solid #303030; }
.foundation-dot { display:flex; align-items:center; gap:.7rem; padding:.8rem; border-radius:9px; background:#1d1d1d; }
.foundation-dot > span { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px #22c55e18; }
.foundation-dot p { display:grid; gap:.1rem; margin:0; }
.foundation-dot strong { color:#d4d4d4; font-size:.72rem; }
.foundation-dot small { color:#737373; font-size:.62rem; }
.main-area { min-width:0; flex:1; margin-left:252px; }
.topbar { position:sticky; top:0; z-index:20; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 2rem; background:#fffefdf2; border-bottom:1px solid #dfdfdc; backdrop-filter:blur(12px); }
.topbar-title { display:flex; align-items:center; gap:.7rem; }
.topbar-title > div { display:grid; }
.topbar-title small { color:#999; font-size:.63rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.topbar-title strong { font-size:1rem; }
.menu-button { display:none; border:0; background:none; font-size:1.25rem; }
.topbar-actions { display:flex; align-items:center; gap:.8rem; }
.theme-toggle { min-height:39px; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:0 .7rem; border:1px solid #e3e1de; border-radius:9px; background:#fafaf9; color:#555; font-size:.7rem; font-weight:800; cursor:pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color:#f0b477; background:#fff7ed; color:var(--orange-dark); outline:3px solid #ffedd5; }
.theme-toggle > span { width:17px; font-size:.94rem; line-height:1; }
.theme-toggle strong { font:inherit; }
.icon-button { position:relative; width:39px; height:39px; border:1px solid #e3e1de; border-radius:9px; background:#fafaf9; color:#555; cursor:pointer; }
.icon-button span { position:absolute; right:-4px; top:-5px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:var(--orange); color:#fff; font-size:.58rem; font-weight:800; }
.profile-chip { display:flex; align-items:center; gap:.65rem; padding:.35rem .55rem .35rem .35rem; border-radius:10px; color:inherit; text-decoration:none; }
.profile-chip:hover { background:#f2f2f0; }
.profile-chip > span { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#292929; color:#fff; font-size:.8rem; font-weight:800; }
.profile-chip .profile-avatar { overflow:hidden; }
.profile-chip .profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-chip div { display:grid; min-width:115px; }
.profile-chip strong { overflow:hidden; max-width:160px; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.profile-chip small { color:#888; font-size:.65rem; }
.profile-chip i { color:#aaa; font-style:normal; }
.logout-form { margin:0; }
.logout-button { min-height:39px; display:flex; align-items:center; justify-content:center; gap:.45rem; padding:0 .75rem; border:1px solid #e3e1de; border-radius:9px; background:#fafaf9; color:#555; font-size:.72rem; font-weight:750; cursor:pointer; }
.logout-button:hover { border-color:#f0c7c7; background:#fff1f1; color:#a92727; }
.logout-button span { font-size:1rem; line-height:1; }
.logout-button strong { font:inherit; }
.page-content { max-width:1540px; margin:0 auto; padding:2rem; }
.flash-message { margin-bottom:1rem; padding:.9rem 1rem; border:1px solid #bbf7d0; border-radius:9px; background:#f0fdf4; color:#166534; font-size:.85rem; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; margin-bottom:1.4rem; }
.page-heading.compact { margin-bottom:1.8rem; }
.page-heading h1 { margin:.15rem 0 .35rem; font-size:clamp(1.65rem,3vw,2.2rem); letter-spacing:-.035em; }
.page-heading > div > p:last-child { margin:0; color:#777; font-size:.88rem; }
.page-kicker { margin:0; color:var(--orange-dark); font-size:.65rem; font-weight:850; letter-spacing:.13em; }
.live-badge { display:flex; align-items:center; gap:.5rem; margin-top:.4rem; padding:.45rem .7rem; border:1px solid #d7eadd; border-radius:999px; background:#f5fff8; color:#287342; font-size:.69rem; font-weight:750; white-space:nowrap; }
.live-badge i { width:7px; height:7px; border-radius:50%; background:#22c55e; }
.context-bar { display:flex; align-items:end; gap:.75rem; margin-bottom:1.7rem; padding:1rem; border:1px solid #deddd9; border-radius:12px; background:#fff; box-shadow:0 3px 12px #2220000a; }
.context-bar label, .settings-form label { display:grid; gap:.38rem; }
.context-bar label > span, .settings-form label > span { color:#656565; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.context-bar select, .context-bar input, .settings-form input { min-height:40px; padding:.55rem .75rem; border:1px solid #d7d5d1; border-radius:8px; background:#fafaf9; color:#222; }
.context-bar select { min-width:165px; }
.date-pair { display:flex; gap:.65rem; }
.date-pair[hidden] { display:none; }
.filter-button, .primary-button { min-height:40px; padding:.6rem 1rem; border:0; border-radius:8px; background:#222; color:#fff; font-weight:750; cursor:pointer; }
.filter-button:hover, .primary-button:hover { background:var(--orange-dark); }
.callout { display:flex; align-items:center; gap:.8rem; margin:-.5rem 0 1.5rem; padding:.8rem 1rem; border-left:3px solid var(--orange); background:#fff7ed; color:#7c3c09; font-size:.78rem; }
.callout span { color:#995a28; }
.section-heading, .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.section-heading { margin-bottom:.8rem; }
.section-heading p, .panel-heading p { margin:0 0 .15rem; color:#a06025; font-size:.59rem; font-weight:850; letter-spacing:.13em; }
.section-heading h2, .panel-heading h2 { margin:0; font-size:1rem; letter-spacing:-.01em; }
.section-heading > span { color:#9a9a9a; font-size:.67rem; }
.metric-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.8rem; margin-bottom:1.6rem; }
.metric-card { min-width:0; padding:1rem; border:1px solid #deddd9; border-radius:11px; background:#fff; box-shadow:0 3px 12px #2220000a; }
.metric-card.accent { border-top:3px solid var(--orange); padding-top:calc(1rem - 2px); }
.metric-top { display:flex; align-items:center; justify-content:space-between; gap:.4rem; color:#777; font-size:.68rem; font-weight:700; }
.metric-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:#f5f5f3; color:#bbb; }
.metric-info { position:relative; display:grid; place-items:center; width:23px; height:23px; flex:0 0 auto; padding:0; border:1px solid #e7e5e4; border-radius:50%; background:#fafaf9; color:#8a8580; font-family:Georgia,serif; font-size:.68rem; font-weight:800; line-height:1; cursor:help; }
.metric-info:hover, .metric-info:focus-visible { border-color:#f0b477; background:#fff7ed; color:var(--orange-dark); outline:none; }
.metric-info:focus-visible { box-shadow:0 0 0 3px #f6d5b4; }
.metric-info-tooltip { position:absolute; z-index:30; top:calc(100% + .5rem); right:0; width:230px; padding:.65rem .72rem; border:1px solid #e7e5e4; border-radius:8px; background:#242424; box-shadow:0 10px 28px #18130e30; color:#fff; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:.62rem; font-weight:500; line-height:1.45; text-align:left; visibility:hidden; opacity:0; transform:translateY(-3px); transition:opacity .15s ease,transform .15s ease,visibility .15s ease; pointer-events:none; }
.metric-info:hover .metric-info-tooltip, .metric-info:focus .metric-info-tooltip { visibility:visible; opacity:1; transform:translateY(0); }
.metric-card > strong { display:block; margin:.75rem 0 .2rem; font-size:1.38rem; letter-spacing:-.03em; }
.metric-card > small { display:block; overflow:hidden; color:#aaa; font-size:.61rem; text-overflow:ellipsis; white-space:nowrap; }
.staff-roster-section { margin-bottom:1.6rem; }
.staff-roster-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
.staff-roster-card { display:grid; grid-template-columns:54px minmax(0,1fr) auto; align-items:center; gap:.75rem; min-width:0; padding:.85rem; border:1px solid #deddd9; border-radius:11px; background:#fff; color:inherit; text-decoration:none; box-shadow:0 3px 12px #2220000a; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.staff-roster-card:hover, .staff-roster-card:focus-visible { border-color:#e4a96d; outline:none; box-shadow:0 8px 22px #6b3b1118; transform:translateY(-2px); }
.staff-roster-avatar { display:grid; place-items:center; overflow:hidden; width:54px; height:54px; border-radius:16px; background:#252525; color:#fff; font-size:.88rem; font-weight:900; letter-spacing:.02em; }
.staff-roster-avatar img { width:100%; height:100%; object-fit:cover; }
.staff-roster-copy { display:grid; gap:.14rem; min-width:0; }
.staff-roster-copy strong, .staff-roster-copy span, .staff-roster-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-roster-copy strong { font-size:.76rem; }
.staff-roster-copy span { color:#57534e; font-size:.66rem; font-weight:700; }
.staff-roster-copy small { color:#9a9590; font-size:.55rem; }
.staff-roster-card > .status-badge { align-self:start; padding:.3rem .48rem; font-size:.52rem; }
.staff-roster-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.7rem; color:#96918c; font-size:.59rem; }
.staff-roster-footer a { color:#9a4f08; font-weight:800; text-decoration:none; }
.staff-roster-footer a:hover { color:#6f3605; }
.staff-roster-empty { display:flex; align-items:center; gap:.75rem; min-height:92px; }
.staff-roster-empty > span { display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border-radius:11px; background:#fff3e7; color:#9a4f08; }
.staff-roster-empty > div { display:grid; gap:.18rem; margin-right:auto; }
.staff-roster-empty strong { font-size:.72rem; }
.staff-roster-empty small { color:#96918c; font-size:.61rem; }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr); gap:1rem; margin-bottom:1rem; }
.panel { padding:1.15rem; border:1px solid #deddd9; border-radius:11px; background:#fff; box-shadow:0 3px 12px #2220000a; }
.placeholder-tag, .ready-pill { padding:.35rem .55rem; border-radius:999px; background:#f4f4f2; color:#929292; font-size:.59rem; font-weight:750; text-transform:uppercase; }
.empty-chart { position:relative; min-height:238px; display:grid; place-items:center; overflow:hidden; margin-top:1rem; border:1px dashed #deddd9; border-radius:9px; background:linear-gradient(180deg,#fcfcfb,#f8f8f6); }
.chart-lines { position:absolute; inset:12% 5%; display:flex; flex-direction:column; justify-content:space-between; }
.chart-lines i { display:block; border-top:1px solid #eeeeec; }
.empty-copy, .empty-list { position:relative; z-index:1; display:grid; justify-items:center; gap:.35rem; text-align:center; }
.empty-copy strong, .empty-list strong { font-size:.8rem; }
.empty-copy small, .empty-list small { color:#999; font-size:.66rem; }
.empty-symbol, .empty-list > span { display:grid; place-items:center; width:36px; height:36px; margin-bottom:.2rem; border-radius:10px; background:#f2e8de; color:var(--orange-dark); }
.trend-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin-top:1rem; }
.trend-summary > div { display:grid; gap:.2rem; padding:.65rem .75rem; border:1px solid #eceae7; border-radius:8px; background:#fafaf9; }
.trend-summary span { overflow:hidden; color:#858585; font-size:.59rem; font-weight:750; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.trend-summary strong { font-size:.82rem; font-variant-numeric:tabular-nums; }
.trend-summary strong.positive { color:#267345; }
.trend-summary strong.negative { color:#b42318; }
.trend-chart { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem; height:172px; margin-top:.8rem; }
.trend-scale { display:flex; flex-direction:column; justify-content:space-between; padding:0 0 1.6rem; color:#999; font-size:.54rem; font-variant-numeric:tabular-nums; text-align:right; }
.trend-plot { position:relative; min-width:0; overflow-x:auto; }
.trend-grid-lines { position:absolute; inset:0 0 1.6rem; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.trend-grid-lines i { display:block; border-top:1px solid #ececea; }
.trend-bars { --trend-points:1; position:relative; z-index:1; display:grid; grid-template-columns:repeat(var(--trend-points),minmax(44px,1fr)); align-items:stretch; gap:.35rem; width:100%; min-width:calc(var(--trend-points) * 50px); height:100%; }
.trend-day { display:grid; grid-template-rows:minmax(0,1fr) 1.6rem; min-width:0; }
.trend-bar-group { display:flex; align-items:flex-end; justify-content:center; gap:4px; min-height:0; padding:0 .2rem; }
.trend-bar { display:block; width:min(18px,35%); min-height:0; border-radius:5px 5px 2px 2px; box-shadow:inset 0 1px 0 #ffffff55; transition:filter .15s ease, transform .15s ease; }
.trend-bar.zero { visibility:hidden; }
.trend-bar:hover { filter:brightness(.9); transform:translateY(-1px); }
.trend-bar.sales, .trend-legend i.sales { background:linear-gradient(180deg,#e98b20,#c96708); }
.trend-bar.expenses, .trend-legend i.expenses { background:linear-gradient(180deg,#4b5563,#25282d); }
.trend-day > span { align-self:end; overflow:hidden; color:#858585; font-size:.55rem; font-weight:650; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.trend-legend { display:flex; align-items:center; gap:1rem; margin-top:.45rem; color:#767676; font-size:.58rem; }
.trend-legend > span { display:flex; align-items:center; gap:.35rem; }
.trend-legend i { width:8px; height:8px; border-radius:2px; }
.trend-legend small { margin-left:auto; color:#aaa; font-size:.55rem; }
.dashboard-queue-list { display:grid; gap:.45rem; margin-top:1rem; }
.dashboard-queue-item { display:grid; grid-template-columns:31px minmax(0,1fr) auto; align-items:center; gap:.55rem; padding:.58rem; border:1px solid #eceae7; border-radius:8px; color:inherit; text-decoration:none; transition:.15s ease; }
.dashboard-queue-item:hover, .dashboard-queue-item:focus-visible { border-color:#f0bf82; background:#fffaf4; outline:none; transform:translateY(-1px); }
.dashboard-queue-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; background:#f3e9de; color:#9a4f08; font-size:.72rem; font-weight:850; }
.dashboard-queue-item > div { display:grid; gap:.08rem; min-width:0; }
.dashboard-queue-item strong, .dashboard-queue-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-queue-item strong { font-size:.65rem; }
.dashboard-queue-item small { color:#96918c; font-size:.54rem; }
.dashboard-queue-age { padding:.28rem .35rem; border-radius:6px; background:#ecfdf3; color:#267345; font-size:.53rem; font-weight:800; }
.dashboard-queue-age.aging { background:#fff7ed; color:#9a4f08; }
.dashboard-queue-age.critical { background:#fef2f2; color:#b42318; }
.dashboard-queue-footer { display:flex; align-items:center; justify-content:space-between; margin-top:.65rem; padding:.6rem .15rem .1rem; color:#9a4f08; font-size:.62rem; font-weight:800; text-decoration:none; }
.dashboard-queue-footer:hover { color:#6f3605; }
.count-badge { display:grid; place-items:center; min-width:25px; height:25px; border-radius:8px; background:#f4f4f2; color:#888; font-size:.67rem; font-weight:800; }
.empty-list { min-height:238px; margin-top:1rem; border:1px dashed #deddd9; border-radius:9px; }
.setup-panel { margin-bottom:1rem; }
.ready-pill { background:#fff3e7; color:var(--orange-dark); }
.setup-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:1rem; }
.setup-grid > div { display:flex; gap:.65rem; align-items:flex-start; padding:.8rem; border-radius:8px; background:#f8f8f6; }
.setup-grid > div > span { display:grid; place-items:center; width:21px; height:21px; flex:0 0 auto; border-radius:50%; background:#e5f7eb; color:#218243; font-size:.67rem; font-weight:900; }
.setup-grid p { display:grid; gap:.15rem; margin:0; }
.setup-grid strong { font-size:.72rem; }
.setup-grid small { color:#969696; font-size:.6rem; line-height:1.4; }
.form-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.form-panel { align-self:start; }
.settings-form { display:grid; gap:1rem; margin-top:1.2rem; }
.settings-form label > small { color:#999; font-size:.67rem; }
.settings-form .field-error { color:#b91c1c; }
.settings-form .primary-button { justify-self:start; margin-top:.25rem; background:var(--orange); }
.profile-photo-panel { margin-bottom:1rem; border-top:3px solid var(--orange); }
.profile-photo-panel > .panel-heading > span { color:#8a8580; font-size:.62rem; }
.profile-photo-content { display:grid; grid-template-columns:130px minmax(0,1fr); align-items:center; gap:1.25rem; margin-top:1rem; }
.profile-photo-preview { display:grid; place-items:center; overflow:hidden; width:130px; height:130px; border:1px solid #deddd9; border-radius:24px; background:#292524; color:#fff; box-shadow:0 8px 24px #00000018; }
.profile-photo-preview img { width:100%; height:100%; object-fit:cover; }
.profile-photo-preview > span { font-size:2.4rem; font-weight:900; }
.profile-photo-preview [hidden] { display:none !important; }
.profile-photo-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; min-width:0; }
.profile-photo-controls > p { width:100%; margin:0; color:#78716c; font-size:.72rem; line-height:1.5; }
.profile-photo-form { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; }
.profile-photo-picker { display:grid; gap:.35rem; min-width:min(100%,340px); color:#57534e; font-size:.67rem; font-weight:800; }
.profile-photo-picker > span { letter-spacing:.04em; text-transform:uppercase; }
.profile-photo-picker input { min-height:42px; padding:.5rem; border:1px solid #d7d5d1; border-radius:8px; background:#fafaf9; color:#292524; font-size:.68rem; }
.profile-photo-picker small { color:#999; font-size:.59rem; font-weight:500; }
.profile-photo-picker .field-error { color:#b91c1c; }
.profile-photo-remove-form { margin:0; }
.business-logo-panel { margin-bottom:1rem; border-top:3px solid var(--orange); }
.business-logo-panel > .panel-heading > span { color:#8a8580; font-size:.62rem; }
.business-logo-content { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:center; gap:1.25rem; margin-top:1rem; }
.business-logo-preview { display:grid; place-items:center; overflow:hidden; width:140px; height:140px; padding:8px; border:1px solid #deddd9; border-radius:24px; background:#fff; color:#fff; box-shadow:0 8px 24px #00000018; }
.business-logo-preview img { width:100%; height:100%; object-fit:contain; }
.business-logo-preview > span { display:grid; place-items:center; width:100%; height:100%; border-radius:18px; background:var(--orange); font-size:2.6rem; font-weight:900; }
.business-logo-preview [hidden] { display:none !important; }
.business-logo-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; min-width:0; }
.business-logo-controls > p { width:100%; margin:0; color:#78716c; font-size:.72rem; line-height:1.5; }
.business-logo-form { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; }
.business-logo-picker { display:grid; gap:.35rem; min-width:min(100%,380px); color:#57534e; font-size:.67rem; font-weight:800; }
.business-logo-picker > span { letter-spacing:.04em; text-transform:uppercase; }
.business-logo-picker input { min-height:42px; padding:.5rem; border:1px solid #d7d5d1; border-radius:8px; background:#fafaf9; color:#292524; font-size:.68rem; }
.business-logo-picker small { color:#999; font-size:.59rem; font-weight:500; }
.business-logo-picker .field-error { color:#b91c1c; }
.business-logo-remove-form { margin:0; }
.sidebar-scrim { display:none; }

/* Step 3 — Daily Closing and cash reconciliation. */
.primary-button, .secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:.65rem 1rem; border-radius:8px; font-size:.78rem; font-weight:800; text-decoration:none; transition:.15s ease; }
.primary-button { background:var(--orange); color:#fff; }
.primary-button:hover, .primary-button:focus-visible { background:var(--orange-dark); outline:3px solid #fed7aa; }
.primary-button:disabled, .approve-button:disabled, .return-button:disabled, .filter-button:disabled { cursor:wait; opacity:.65; }
.secondary-button { border:1px solid #d6d3d1; background:#fff; color:#393939; }
.secondary-button:hover, .secondary-button:focus-visible { border-color:#a8a29e; background:#fafaf9; outline:3px solid #e7e5e4; }
.metric-grid-wide { grid-template-columns:repeat(4,minmax(0,1fr)); }
.metric-card.status-card > strong { color:var(--orange-dark); font-size:1.12rem; }
.status-badge { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:.36rem .62rem; border-radius:999px; font-size:.61rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.status-badge.draft { background:#f1f5f9; color:#475569; }
.status-badge.submitted { background:#fff7ed; color:#a04b06; }
.status-badge.returned { background:#fef2f2; color:#b42318; }
.status-badge.approved { background:#ecfdf3; color:#187343; }
.status-badge.reconciliation.balanced { background:#ecfdf3; color:#187343; }
.status-badge.reconciliation.shortage { background:#fef2f2; color:#b42318; }
.status-badge.reconciliation.overage { background:#eff6ff; color:#1d5dac; }
.status-badge.reconciliation.pending { background:#f5f5f4; color:#78716c; }
.badge-stack { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.validation-summary { margin-bottom:1rem; padding:1rem 1.1rem; border:1px solid #fecaca; border-left:4px solid #dc2626; border-radius:9px; background:#fff7f7; color:#991b1b; font-size:.78rem; }
.validation-summary strong { display:block; margin-bottom:.4rem; }
.validation-summary ul { margin:.25rem 0 0; padding-left:1.2rem; }
.closing-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.full-span { grid-column:1/-1; }
.form-section { padding:1.25rem; }
.required-note, .manual-badge { padding:.35rem .55rem; border-radius:999px; background:#fff7ed; color:#9a4f08; font-size:.58rem; font-weight:800; text-transform:uppercase; }
.field-grid { display:grid; gap:.9rem; margin-top:1.1rem; }
.field-grid.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.field-grid.three-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field-grid label, .notes-field, .decision-grid label { display:grid; align-content:start; gap:.4rem; min-width:0; }
.field-grid label > span, .notes-field > span, .decision-grid label > span { color:#57534e; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.closing-form .field-control, .inventory-form .field-control { display:grid; align-content:start; gap:.4rem; min-width:0; }
.closing-form .field-label-row, .inventory-form .field-label-row, .formula-title { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-width:0; }
.closing-form .field-label-row label, .inventory-form .field-label-row label { display:block; min-width:0; color:#57534e; font-size:.66rem; font-weight:800; letter-spacing:.04em; line-height:1.25; text-transform:uppercase; }
.field-info { width:19px; height:19px; font-size:.58rem; }
.field-info .metric-info-tooltip { width:min(210px,calc(100vw - 2rem)); text-transform:none; letter-spacing:normal; }
.field-grid input, .field-grid select, .notes-field textarea, .decision-grid textarea { width:100%; min-height:42px; padding:.62rem .72rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; color:#292524; }
.field-grid input:focus, .field-grid select:focus, .notes-field textarea:focus, .decision-grid textarea:focus { outline:3px solid #fed7aa; border-color:var(--orange); background:#fff; }
.field-error { color:#b91c1c!important; font-size:.66rem!important; line-height:1.35; }
.wide-field { grid-column:1/-1; }
.money-input { position:relative; }
.money-input b { position:absolute; left:.72rem; top:50%; transform:translateY(-50%); color:#78716c; font-size:.78rem; }
.money-input input { padding-left:1.75rem; font-variant-numeric:tabular-nums; }
.form-help { margin:.65rem 0 0; color:#8a8580; font-size:.67rem; line-height:1.5; }
.formula-card { display:grid; gap:.28rem; margin-top:1rem; padding:.85rem; border:1px solid #fed7aa; border-radius:9px; background:#fffbf5; }
.formula-card strong { color:#9a4f08; font-size:.7rem; }
.formula-card code { color:#57534e; font-family:inherit; font-size:.66rem; line-height:1.45; }
.formula-card small { color:#a8a29e; font-size:.58rem; }
.reconciliation-preview { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:.7rem; margin-top:.9rem; padding:.8rem; border-radius:9px; background:#222; color:#fff; }
.reconciliation-preview div { display:grid; gap:.15rem; }
.reconciliation-preview div span { color:#a3a3a3; font-size:.59rem; text-transform:uppercase; }
.reconciliation-preview div strong { font-size:.88rem; font-variant-numeric:tabular-nums; }
.notes-field { margin-top:1rem; }
.notes-field textarea { resize:vertical; }
.return-callout { margin:1rem 0; padding:1rem; border-left:4px solid #dc2626; border-radius:8px; background:#fef2f2; color:#991b1b; }
.return-callout p { margin:.35rem 0; font-size:.8rem; line-height:1.5; }
.return-callout small { color:#b86b6b; font-size:.62rem; }
.form-actions, .review-actions, .confirmation-actions { display:flex; align-items:center; justify-content:flex-end; gap:.7rem; margin-top:1rem; }
.next-step { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:1rem 1.2rem; border-radius:11px; background:#242424; color:#fff; }
.next-step div { display:grid; gap:.2rem; }
.next-step strong { font-size:.82rem; }
.next-step span { color:#a3a3a3; font-size:.67rem; }
.permission-state, .zero-state { min-height:310px; display:grid; place-items:center; align-content:center; gap:.45rem; padding:2rem; text-align:center; }
.permission-state > span, .zero-state > span { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#fff3e7; color:var(--orange-dark); font-weight:900; }
.permission-state p, .zero-state p { max-width:410px; margin:.1rem 0 .7rem; color:#8a8580; font-size:.75rem; line-height:1.5; }
.list-panel { padding:0; overflow:hidden; }
.table-scroll { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:.74rem; }
.data-table th { padding:.85rem 1rem; background:#f8f8f6; color:#78716c; font-size:.59rem; letter-spacing:.06em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.data-table td { padding:.9rem 1rem; border-top:1px solid #eceae7; color:#44403c; white-space:nowrap; }
.data-table td:first-child { display:grid; gap:.2rem; }
.data-table td small { color:#a8a29e; font-size:.59rem; }
.data-table tr:hover td { background:#fffdf9; }
.cafelino-pagination { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.15rem; border-top:1px solid #eceae7; background:#fff; }
.pagination-summary { margin:0; color:#78716c; font-size:.64rem; }
.pagination-summary strong { color:#44403c; font-variant-numeric:tabular-nums; }
.pagination-links { display:flex; align-items:center; gap:.3rem; }
.pagination-link { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:34px; padding:.45rem .6rem; border:1px solid #deddd9; border-radius:8px; background:#fff; color:#57534e; font-size:.65rem; font-weight:800; line-height:1; text-decoration:none; }
.pagination-link:hover, .pagination-link:focus-visible { border-color:#fdba74; background:#fff7ed; color:#9a4f08; outline:2px solid #ffedd5; }
.pagination-link.active { border-color:#292524; background:#292524; color:#fff; }
.pagination-link.disabled { border-color:#eceae7; background:#fafaf9; color:#b8b4af; cursor:not-allowed; }
.pagination-step { gap:.28rem; padding-inline:.72rem; }
.pagination-step > span { font-size:.9rem; line-height:.7; }
.pagination-ellipsis { min-width:22px; color:#a8a29e; font-size:.68rem; text-align:center; }
.money-value { font-variant-numeric:tabular-nums; font-weight:750; }
.money-value.negative { color:#b42318; }
.money-value.positive { color:#1d5dac; }
.row-link { color:var(--orange-dark); font-weight:800; text-decoration:none; }
.review-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr); gap:1rem; }
.reconciliation-hero { background:#202020; color:#fff; border-color:#202020; }
.reconciliation-hero .panel-heading p { color:#f0a35c; }
.hero-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:1.2rem; }
.hero-metrics > div { display:grid; gap:.25rem; padding:1rem; border-radius:9px; background:#2c2c2c; }
.hero-metrics span { color:#a3a3a3; font-size:.61rem; text-transform:uppercase; }
.hero-metrics strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.hero-metrics .difference { background:#6e380d; }
.formula-line { margin:1rem 0 0; color:#929292; font-size:.63rem; }
.record-meta dl, .amount-list { margin:1rem 0 0; }
.record-meta dl div, .amount-list div { display:flex; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid #eceae7; }
.record-meta dt, .amount-list dt { color:#78716c; font-size:.69rem; }
.record-meta dd, .amount-list dd { margin:0; font-size:.7rem; font-weight:750; text-align:right; font-variant-numeric:tabular-nums; }
.detail-section { margin-top:1rem; }
.amount-list .total-row { margin-top:.3rem; padding:.8rem; border:0; border-radius:8px; background:#f5f5f3; }
.amount-list .total-row dt, .amount-list .total-row dd { color:#292524; font-weight:850; }
.notes-panel, .approval-panel, .activity-panel { margin-top:1rem; }
.notes-panel > p, .approval-panel > p { color:#68635f; font-size:.76rem; line-height:1.6; white-space:pre-line; }
.approval-panel { border-top:3px solid var(--orange); }
.decision-grid { display:grid; grid-template-columns:minmax(180px,.45fr) minmax(300px,1fr); gap:1rem; margin-top:1rem; }
.decision-grid form { display:grid; align-content:start; gap:.6rem; }
.approve-button, .return-button { min-height:43px; border:0; border-radius:8px; color:#fff; font-weight:800; cursor:pointer; }
.approve-button { background:#177245; }
.approve-button:hover, .approve-button:focus-visible { background:#105b35; outline:3px solid #bbf7d0; }
.return-button { justify-self:start; padding:0 1rem; background:#b42318; }
.return-button:hover, .return-button:focus-visible { background:#8f1b13; outline:3px solid #fecaca; }
.activity-list { display:grid; gap:.8rem; margin:1rem 0 0; padding:0; list-style:none; }
.activity-list li { display:flex; gap:.7rem; align-items:flex-start; }
.activity-list li > span { width:9px; height:9px; margin-top:.25rem; flex:0 0 auto; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px #ffedd5; }
.activity-list li div { display:grid; gap:.15rem; }
.activity-list strong { font-size:.7rem; }
.activity-list small { color:#999; font-size:.62rem; }
.confirmation-shell { width:min(100%,760px); margin:2rem auto; padding:2rem; border:1px solid #deddd9; border-radius:14px; background:#fff; text-align:center; box-shadow:0 15px 40px #29252410; }
.confirmation-icon { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 1rem; border-radius:15px; background:#fff3e7; color:var(--orange-dark); font-size:1.4rem; font-weight:900; }
.confirmation-shell h1 { margin:.3rem 0 .5rem; font-size:1.8rem; }
.confirmation-shell > p:not(.page-kicker) { margin:0 auto 1.3rem; max-width:540px; color:#78716c; font-size:.78rem; line-height:1.55; }
.confirmation-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; margin:1.2rem 0; border:1px solid #e7e5e4; border-radius:10px; background:#e7e5e4; text-align:left; }
.confirmation-summary div { display:grid; gap:.3rem; padding:1rem; background:#fafaf9; }
.confirmation-summary span { color:#8a8580; font-size:.59rem; text-transform:uppercase; }
.confirmation-summary strong { font-size:.75rem; font-variant-numeric:tabular-nums; }
.warning-callout { padding:.85rem; border:1px solid #fed7aa; border-radius:8px; background:#fff7ed; color:#9a4f08; font-size:.72rem; }

/* Step 4 — Read-only sales workspace derived from Daily Closing. */
.source-badge { display:inline-flex; align-items:center; margin-top:.35rem; padding:.45rem .72rem; border:1px solid #fed7aa; border-radius:999px; background:#fff7ed; color:#9a4f08; font-size:.63rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.source-callout { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; padding:.85rem 1rem; border:1px solid #e7e5e4; border-radius:10px; background:#fafaf9; }
.source-callout > span { display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border-radius:8px; background:#292929; color:#fff; font-family:Georgia,serif; font-size:.75rem; font-weight:800; }
.source-callout p { display:grid; gap:.18rem; margin:0; }
.source-callout strong { font-size:.72rem; }
.source-callout small { color:#8a8580; font-size:.64rem; line-height:1.45; }
.sales-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.sales-columns { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:1rem; margin-bottom:1rem; }
.channel-list { display:grid; gap:.95rem; margin-top:1.1rem; }
.channel-row { display:grid; grid-template-columns:minmax(110px,.75fr) minmax(80px,1.25fr) minmax(90px,.55fr); align-items:center; gap:.75rem; min-width:0; }
.channel-row > * { min-width:0; }
.channel-row > div:first-child, .channel-row > p { display:grid; gap:.18rem; margin:0; }
.channel-row > div:first-child strong, .channel-row > p strong { font-size:.7rem; }
.channel-row small { color:#9a9590; font-size:.59rem; }
.channel-row > p { justify-items:end; font-variant-numeric:tabular-nums; }
.channel-row > p strong, .channel-row > p small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-track { height:8px; overflow:hidden; border-radius:999px; background:#eeeae6; }
.channel-track i { display:block; height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#a9550b,#e78a21); }
.mini-zero-state { min-height:190px; display:grid; place-items:center; align-content:center; gap:.35rem; text-align:center; }
.mini-zero-state > span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#fff3e7; color:#9a4f08; }
.mini-zero-state strong { font-size:.72rem; }
.mini-zero-state small { color:#9a9590; font-size:.61rem; }
.sales-integrity-panel { align-self:stretch; }
.sales-checks { margin:1rem 0 0; }
.sales-checks > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid #eceae7; }
.sales-checks > div:last-child { border:0; }
.sales-checks dt { color:#78716c; font-size:.67rem; }
.sales-checks dt small { display:block; margin-top:.15rem; color:#aaa49e; font-size:.55rem; }
.sales-checks dd { margin:0; color:#292524; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
.sales-checks .gap-row { margin-top:.35rem; padding:.75rem; border:0; border-radius:8px; background:#f8f8f6; }
.sales-ledger { margin-bottom:1rem; }
.ledger-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; border-bottom:1px solid #eceae7; }
.ledger-heading p { margin:0 0 .15rem; color:#a06025; font-size:.59rem; font-weight:850; letter-spacing:.13em; }
.ledger-heading h2 { margin:0; font-size:1rem; }
.ledger-heading > span { color:#96918c; font-size:.63rem; }

/* Step 5 — Branch expense ledger and approval workflow. */
.expense-source-callout { margin-bottom:1rem; }
.expense-context-bar { flex-wrap:wrap; }
.expense-context-bar select { min-width:145px; }
.expense-metric-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.expense-columns { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:1rem; margin-bottom:1rem; }
.expense-category-list { display:grid; gap:1rem; margin-top:1.1rem; }
.expense-category-row { display:grid; grid-template-columns:minmax(110px,.8fr) minmax(80px,1.2fr) minmax(90px,.55fr); align-items:center; gap:.75rem; min-width:0; }
.expense-category-row > * { min-width:0; }
.expense-category-row > div:first-child { display:grid; gap:.18rem; }
.expense-category-row > div:first-child strong, .expense-category-row > strong { font-size:.7rem; }
.expense-category-row > div:first-child small { color:#9a9590; font-size:.59rem; }
.expense-category-row > strong { overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.comparison-note { margin:.8rem 0 0; color:#96918c; font-size:.59rem; line-height:1.5; }
.expense-ledger { margin-bottom:1rem; }
.expense-payee-cell { display:grid; gap:.2rem; }
.expense-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.expense-form .field-grid textarea { width:100%; min-height:42px; padding:.62rem .72rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; color:#292524; resize:vertical; }
.expense-form .field-grid textarea:focus { outline:3px solid #fed7aa; border-color:var(--orange); background:#fff; }
.expense-amount-hero { display:grid; align-content:start; min-height:220px; border-top:3px solid var(--orange); }
.expense-amount-hero > strong { margin-top:2rem; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.expense-amount-hero > small { margin-top:.35rem; color:#8a8580; font-size:.67rem; }
.expense-detail-panel, .expense-closing-check { margin-top:0; }
.expense-review-grid { align-items:stretch; }

/* Step 6 — Branch inventory item master and permanent movement ledger. */
.inventory-source-callout { margin-bottom:1rem; }
.heading-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.65rem; }
.inventory-context-bar { flex-wrap:wrap; }
.inventory-search { flex:1 1 220px; }
.inventory-search input { width:100%; }
.inventory-metric-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.inventory-columns { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:1rem; margin-bottom:1rem; }
.inventory-columns > .panel { min-width:0; }
.inventory-category-list { display:grid; gap:1rem; margin-top:1.1rem; }
.inventory-category-row { display:grid; grid-template-columns:minmax(0,.75fr) minmax(56px,1fr) max-content; align-items:center; gap:.65rem; }
.inventory-category-row > div:first-child, .inventory-category-row > p { display:grid; gap:.15rem; margin:0; }
.inventory-category-row > div:first-child { min-width:0; }
.inventory-category-row > div:first-child strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inventory-category-row strong { font-size:.69rem; }
.inventory-category-row small { color:#9a9590; font-size:.58rem; }
.inventory-category-row > p { min-width:max-content; justify-items:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.inventory-movement-list { display:grid; gap:.3rem; margin:.8rem 0 0; padding:0; list-style:none; }
.inventory-movement-list li { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.65rem; border-bottom:1px solid #efedea; }
.inventory-movement-list li:last-child { border:0; }
.inventory-movement-list li > div { display:grid; gap:.15rem; min-width:0; }
.inventory-movement-list li strong { overflow:hidden; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.inventory-movement-list li small { color:#999; font-size:.57rem; }
.inventory-movement-list li > b { font-size:.67rem; font-variant-numeric:tabular-nums; }
.movement-direction { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; font-size:.75rem; font-weight:900; }
.movement-direction.in { background:#ecfdf3; color:#187343; }
.movement-direction.out { background:#fef2f2; color:#b42318; }
.inventory-ledger { margin-bottom:1rem; }
.stock-badge, .movement-badge { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:.36rem .62rem; border-radius:999px; font-size:.59rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.stock-badge.in_stock { background:#ecfdf3; color:#187343; }
.stock-badge.low_stock { background:#fff7ed; color:#a04b06; }
.stock-badge.out_of_stock { background:#fef2f2; color:#b42318; }
.stock-badge.inactive { background:#f1f5f9; color:#64748b; }
.movement-badge.in { background:#ecfdf3; color:#187343; }
.movement-badge.out { background:#fef2f2; color:#b42318; }
.quantity-value { font-variant-numeric:tabular-nums; font-weight:800; }
.quantity-value.negative { color:#b42318; }
.quantity-value.positive { color:#187343; }
.inventory-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.toggle-field { min-height:42px; display:flex; align-items:center; gap:.55rem; padding:.62rem .72rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; }
.toggle-field input { width:16px!important; min-height:16px!important; }
.toggle-field b { color:#57534e; font-size:.68rem; }
.inventory-custom-category { display:grid; gap:.35rem; margin-top:.25rem; padding:.7rem; border:1px solid #fed7aa; border-radius:8px; background:#fffaf5; }
.inventory-custom-category[hidden] { display:none; }
.inventory-custom-category label { color:#8a4b12; font-size:.63rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.inventory-custom-category small { color:#8a8580; font-size:.61rem; line-height:1.4; }
.inventory-category-manager { margin-top:1rem; }
.inventory-category-manager-list { display:grid; gap:.6rem; margin-top:1rem; }
.inventory-category-manager-list > article { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem .85rem; border:1px solid #e7e5e4; border-radius:9px; background:#fafaf9; }
.inventory-category-manager-list > article > div:first-child { display:grid; gap:.15rem; }
.inventory-category-manager-list strong { font-size:.75rem; }
.inventory-category-manager-list small { color:#8a8580; font-size:.62rem; }
.category-remove-locked { display:flex; align-items:center; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; }
.category-remove-locked button, .category-remove-button { min-height:34px; padding:.45rem .7rem; border:1px solid #fecaca; border-radius:7px; background:#fff7f7; color:#b91c1c; font-size:.66rem; font-weight:800; }
.category-remove-locked button { border-color:#deddd9; background:#f1f1ef; color:#aaa; cursor:not-allowed; }
.category-remove-button { cursor:pointer; }
.category-remove-button:hover, .category-remove-button:focus-visible { border-color:#dc2626; background:#fee2e2; outline:3px solid #fecaca; }
.inventory-review-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:1rem; }
.inventory-stock-hero { border-top:3px solid var(--orange); }
.inventory-stock-hero > strong { display:block; margin:1.5rem 0 1rem; font-size:clamp(2.2rem,5vw,3.8rem); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.inventory-stock-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.inventory-stock-stats > div { display:grid; gap:.2rem; padding:.85rem; border-radius:8px; background:#f8f8f6; }
.inventory-stock-stats span { color:#8a8580; font-size:.58rem; text-transform:uppercase; }
.inventory-stock-stats b { font-size:.73rem; font-variant-numeric:tabular-nums; }
.inventory-item-meta dl { margin-top:.8rem; }
.inventory-movement-ledger { margin-top:1rem; }
.inventory-warning { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; }
.inventory-warning span { color:#a45a19; line-height:1.45; }
.movement-page-grid { display:grid; grid-template-columns:minmax(280px,.6fr) minmax(0,1.4fr); gap:1rem; align-items:start; }
.movement-balance-card > strong { display:block; margin:1.5rem 0 .5rem; font-size:2.4rem; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.movement-form { padding:1.25rem; }
.stock-deduction-branch { margin-bottom:1rem; }
.stock-deduction-context { margin-bottom:1rem; }
.field-grid.four-columns { grid-template-columns:repeat(4,minmax(0,1fr)); }
.stock-deduction-form { margin-bottom:1rem; }
.stock-deduction-panel { margin-bottom:1rem; }
.stock-deduction-error { padding:.75rem 1rem; border-top:1px solid #fecaca; background:#fef2f2; color:#991b1b; font-size:.67rem; font-weight:750; }
.stock-deduction-table td { vertical-align:middle; }
.stock-deduction-table td:nth-child(3) { min-width:190px; }
.stock-deduction-table tr.out-of-stock td { background:#fafafa; color:#999; }
.deduction-quantity-input { position:relative; width:170px; }
.deduction-quantity-input input { width:100%; min-height:40px; padding:.55rem 3.2rem .55rem .65rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; color:#292524; font:inherit; font-variant-numeric:tabular-nums; }
.deduction-quantity-input input:focus { outline:3px solid #fed7aa; border-color:var(--orange); background:#fff; }
.deduction-quantity-input input:disabled { background:#f1f1ef; color:#aaa; cursor:not-allowed; }
.deduction-quantity-input span { position:absolute; top:50%; right:.65rem; transform:translateY(-50%); color:#8a8580; font-size:.61rem; font-weight:800; }
.deduction-remaining { font-variant-numeric:tabular-nums; }
.deduction-remaining.negative { color:#b42318; }
.stock-deduction-warning { margin-top:0; }

/* Step 7 — Purchase orders, approval, and one-time inventory receiving. */
.purchasing-source-callout { margin-bottom:1rem; }
.purchasing-context-bar { flex-wrap:wrap; }
.purchasing-search { flex:1 1 250px; }
.purchasing-search input { width:100%; }
.purchasing-metric-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.purchasing-columns { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:1rem; margin-bottom:1rem; }
.purchasing-supplier-list { display:grid; gap:1rem; margin-top:1.1rem; }
.purchasing-supplier-row { display:grid; grid-template-columns:minmax(150px,.75fr) minmax(130px,1fr) minmax(100px,.55fr); align-items:center; gap:.85rem; }
.purchasing-supplier-row > div:first-child { display:grid; gap:.15rem; }
.purchasing-supplier-row strong { font-size:.69rem; }
.purchasing-supplier-row small { color:#9a9590; font-size:.58rem; }
.purchasing-supplier-row > strong { text-align:right; font-variant-numeric:tabular-nums; }
.purchasing-pipeline { margin:.8rem 0 0; }
.purchasing-pipeline > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid #efedea; }
.purchasing-pipeline > div:last-child { border:0; }
.purchasing-pipeline dt { display:flex; align-items:center; gap:.65rem; }
.purchasing-pipeline dt small { color:#9a9590; font-size:.6rem; }
.purchasing-pipeline dd { margin:0; font-size:.7rem; font-weight:800; font-variant-numeric:tabular-nums; }
.purchasing-ledger { margin-bottom:1rem; }
.purchasing-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.purchasing-total-panel { align-content:start; }
.purchase-preview { margin:1rem 0 0; }
.purchase-preview > div, .purchase-total-breakdown > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid #eceae7; }
.purchase-preview dt, .purchase-total-breakdown dt { color:#78716c; font-size:.66rem; }
.purchase-preview dd, .purchase-total-breakdown dd { margin:0; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; }
.purchase-preview .total-row { margin-top:.35rem; padding:.75rem; border:0; border-radius:8px; background:#222; color:#fff; }
.purchase-preview .total-row dt { color:#d6d3d1; }
.purchase-preview .total-row dd { font-size:.9rem; }
.compact-button { min-height:34px; padding:.45rem .75rem; font-size:.67rem; }
.purchase-line-head, .purchase-line-row { display:grid; grid-template-columns:minmax(260px,1.5fr) minmax(130px,.55fr) minmax(130px,.55fr) minmax(105px,.45fr) 34px; align-items:start; gap:.7rem; }
.purchase-line-head { margin-top:1rem; padding:0 .7rem .45rem; color:#7c756f; font-size:.58rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.purchase-lines { display:grid; gap:.65rem; }
.purchase-line-row { padding:.8rem .7rem; border:1px solid #e2dfdb; border-radius:9px; background:#fafaf9; }
.purchase-line-row label { display:grid; gap:.3rem; min-width:0; }
.purchase-line-row select, .purchase-line-row input { width:100%; min-height:40px; padding:.55rem .68rem; border:1px solid #d6d3d1; border-radius:8px; background:#fff; color:#292524; }
.purchase-line-row .money-input input { padding-left:1.75rem; }
.purchase-line-row select:focus, .purchase-line-row input:focus { outline:3px solid #fed7aa; border-color:var(--orange); }
.purchase-line-row > strong { align-self:center; text-align:right; font-size:.72rem; font-variant-numeric:tabular-nums; }
.quantity-input { position:relative; }
.quantity-input input { padding-right:3.2rem; }
.quantity-input small { position:absolute; right:.65rem; top:50%; transform:translateY(-50%); color:#8a8580; font-size:.6rem; }
.line-remove { display:grid; place-items:center; width:32px; height:32px; margin-top:4px; border:0; border-radius:8px; background:#fef2f2; color:#b42318; font-size:1rem; cursor:pointer; }
.line-remove:disabled { cursor:not-allowed; opacity:.35; }
.mobile-field-label { position:absolute; width:1px; height:1px; overflow:hidden; margin:-1px; padding:0; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.purchasing-item-callout { margin:0 0 1rem; }
.purchase-review-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:1rem; align-items:stretch; }
.purchase-total-hero { border-top:3px solid var(--orange); }
.purchase-total-hero > strong { display:block; margin:1.5rem 0 1rem; font-size:clamp(2.1rem,4vw,3.4rem); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.purchase-total-breakdown { margin:0; }
.purchasing-boundary-panel { align-self:stretch; }
.purchase-lines-review { margin-top:1rem; }
.purchase-received-callout { margin-bottom:1rem; border-color:#bbf7d0; background:#f0fdf4; }
.purchase-received-callout > span { background:#187343; }
.purchase-receive-panel { margin-top:1rem; border-top:3px solid var(--orange); }
.purchase-receive-panel > p { color:#777; font-size:.72rem; line-height:1.55; }
.purchase-receive-form { display:grid; grid-template-columns:minmax(180px,.45fr) minmax(260px,1fr) auto; align-items:end; gap:1rem; margin-top:1rem; }
.purchase-receive-form > label { display:grid; gap:.4rem; }
.purchase-receive-form > label > span { color:#57534e; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.purchase-receive-form input { min-height:42px; padding:.62rem .72rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; }
.purchase-receive-form .formula-card { margin:0; }
.status-badge.received { background:#ecfdf3; color:#187343; }

/* Step 8 — Manual GrabFood statement and bank-payout reconciliation. */
.grabfood-source-callout, .grabfood-boundary-callout { margin-bottom:1rem; }
.grabfood-context-bar { flex-wrap:wrap; }
.grabfood-search { flex:1 1 250px; }
.grabfood-search input { width:100%; }
.grabfood-metric-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.grabfood-columns { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:1rem; margin-bottom:1rem; }
.grabfood-deduction-list { display:grid; gap:1rem; margin-top:1.1rem; }
.grabfood-deduction-row { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(130px,1fr) minmax(100px,.55fr); align-items:center; gap:.85rem; }
.grabfood-deduction-row > div:first-child { display:grid; gap:.15rem; }
.grabfood-deduction-row strong { font-size:.69rem; }
.grabfood-deduction-row small { color:#9a9590; font-size:.58rem; }
.grabfood-deduction-row > strong { text-align:right; font-variant-numeric:tabular-nums; }
.grabfood-pipeline { margin:.8rem 0 0; }
.grabfood-pipeline > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid #efedea; }
.grabfood-pipeline > div:last-child { border:0; }
.grabfood-pipeline dt { display:flex; align-items:center; gap:.65rem; }
.grabfood-pipeline dt small { color:#9a9590; font-size:.6rem; }
.grabfood-pipeline dd { margin:0; font-size:.7rem; font-weight:800; font-variant-numeric:tabular-nums; }
.grabfood-ledger { margin-bottom:1rem; }
.grabfood-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.grabfood-form-grid > *, .grabfood-review-grid > *, .grabfood-notes-grid > * { min-width:0; }
.grabfood-form .field-grid textarea, .grabfood-form-grid textarea { width:100%; min-height:108px; padding:.7rem .75rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; color:#292524; font:inherit; font-size:.72rem; resize:vertical; }
.grabfood-form .field-grid textarea:focus, .grabfood-form-grid textarea:focus { outline:3px solid #fed7aa; border-color:var(--orange); }
.grabfood-gross-panel { border-top:3px solid var(--orange); }
.grabfood-hero-input { display:grid; gap:.55rem; margin-top:1.2rem; color:#57534e; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.grabfood-hero-input .money-input input { min-height:60px; padding-left:2.25rem; font-size:1.55rem; font-weight:850; letter-spacing:-.03em; }
.grabfood-preview-panel { align-content:start; }
.grabfood-preview { margin:1rem 0 0; }
.grabfood-preview > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid #eceae7; }
.grabfood-preview dt { color:#78716c; font-size:.66rem; }
.grabfood-preview dd { margin:0; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; }
.grabfood-preview .total-row { margin-top:.35rem; padding:.75rem; border:0; border-radius:8px; background:#222; color:#fff; }
.grabfood-preview .total-row dt { color:#d6d3d1; }
.grabfood-preview .total-row dd { font-size:.9rem; }
.grabfood-money-grid { margin-top:1rem; }
.grabfood-review-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:1rem; align-items:stretch; }
.grabfood-payout-hero { border-top:3px solid var(--orange); }
.grabfood-payout-hero > strong { display:block; margin:1.5rem 0 1rem; font-size:clamp(2.1rem,4vw,3.4rem); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.grabfood-payout-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.grabfood-payout-stats > div { display:grid; gap:.2rem; padding:.85rem; border-radius:8px; background:#f8f8f6; }
.grabfood-payout-stats span { color:#8a8580; font-size:.58rem; text-transform:uppercase; }
.grabfood-payout-stats b { font-size:.73rem; font-variant-numeric:tabular-nums; }
.grabfood-closing-panel { align-self:stretch; }
.comparison-note { margin:.85rem 0 0; color:#8a8580; font-size:.63rem; line-height:1.5; }
.grabfood-deductions-review { margin-top:1rem; }
.grabfood-calculation { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:1rem 0 0; }
.grabfood-calculation > div { display:grid; gap:.25rem; padding:.8rem; border-radius:8px; background:#f8f8f6; }
.grabfood-calculation dt { color:#8a8580; font-size:.58rem; text-transform:uppercase; }
.grabfood-calculation dd { margin:0; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; }
.grabfood-calculation .total-row { background:#222; color:#fff; }
.grabfood-calculation .total-row dt { color:#d6d3d1; }
.grabfood-calculation .total-row dd { font-size:.82rem; }
.grabfood-notes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }

/* Step 9 — Employee master, manual attendance, and controlled payroll. */
.people-source-callout, .attendance-source-callout { margin-bottom:1rem; }
.people-context-bar, .attendance-context-bar { flex-wrap:wrap; }
.people-search { flex:1 1 250px; }
.people-search input { width:100%; }
.people-metric-grid, .attendance-metric-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.payroll-estimate-panel { margin-bottom:1rem; border-top:3px solid var(--orange); }
.payroll-estimate-summary { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:1rem; margin-top:1rem; }
.payroll-estimate-total { display:grid; align-content:center; gap:.25rem; padding:1rem; border-radius:10px; background:#222; color:#fff; }
.payroll-estimate-label { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.payroll-estimate-label > span { color:#d6d3d1; font-size:.59rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.payroll-estimate-label .metric-info { border-color:#57534e; background:#333; color:#d6d3d1; }
.payroll-estimate-label .metric-info:hover, .payroll-estimate-label .metric-info:focus-visible { border-color:#f0b477; background:#3f352b; color:#fed7aa; }
.payroll-estimate-total strong { font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.payroll-estimate-total small { color:#a8a29e; font-size:.59rem; }
.payroll-estimate-summary dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:0; }
.payroll-estimate-summary dl > div { display:grid; align-content:center; gap:.25rem; min-height:72px; padding:.8rem; border-radius:9px; background:#f8f8f6; }
.payroll-estimate-summary dt { display:flex; align-items:center; justify-content:space-between; gap:.4rem; color:#8a8580; font-size:.57rem; font-weight:800; text-transform:uppercase; }
.payroll-estimate-summary dd { margin:0; font-size:.82rem; font-weight:850; font-variant-numeric:tabular-nums; }
.payroll-estimate-note { display:flex; align-items:flex-start; gap:.7rem; margin-top:1rem; padding:.8rem; border:1px solid #fed7aa; border-radius:9px; background:#fffaf4; }
.payroll-estimate-note > span { display:grid; flex:0 0 25px; place-items:center; width:25px; height:25px; border-radius:7px; background:#fff0df; color:#a04b06; font-size:.68rem; font-weight:900; }
.payroll-estimate-note p { display:grid; gap:.2rem; margin:0; }
.payroll-estimate-note strong { font-size:.66rem; }
.payroll-estimate-note small { color:#78716c; font-size:.58rem; line-height:1.55; }
.payroll-estimate-table { margin-top:1rem; }
.payroll-estimate-table td small { display:block; margin-top:.18rem; color:#999; font-size:.54rem; }
.payroll-estimate-updated { margin:.7rem 0 0; color:#8a8580; font-size:.57rem; text-align:right; }
.people-columns { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:1rem; margin-bottom:1rem; }
.people-activity-list { display:grid; gap:.25rem; margin:1rem 0 0; padding:0; list-style:none; }
.people-activity-list li { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.65rem 0; border-bottom:1px solid #efedea; }
.people-activity-list li:last-child { border:0; }
.people-activity-list li > div { display:grid; gap:.15rem; min-width:0; }
.people-activity-list li strong { overflow:hidden; font-size:.69rem; text-overflow:ellipsis; white-space:nowrap; }
.people-activity-list li small { color:#999; font-size:.58rem; }
.people-activity-list li > b { color:#8a8580; font-size:.61rem; }
.attendance-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; font-size:.68rem; font-weight:900; }
.attendance-mark.present, .attendance-status.present { background:#ecfdf3; color:#187343; }
.attendance-mark.paid_leave, .attendance-status.paid_leave { background:#eff6ff; color:#1d5dac; }
.attendance-mark.unpaid_leave, .attendance-status.unpaid_leave { background:#fff7ed; color:#a04b06; }
.attendance-mark.absent, .attendance-status.absent { background:#fef2f2; color:#b42318; }
.attendance-mark.rest_day, .attendance-status.rest_day { background:#f1f5f9; color:#64748b; }
.attendance-status { display:inline-flex; width:max-content; padding:.35rem .58rem; border-radius:999px; font-size:.59rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.payroll-pipeline { margin:.8rem 0 0; }
.payroll-pipeline > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid #efedea; }
.payroll-pipeline > div:last-child { border:0; }
.payroll-pipeline dt, .payroll-pipeline dd { display:grid; gap:.18rem; margin:0; }
.payroll-pipeline dt a { color:#292524; font-size:.69rem; font-weight:800; text-decoration:none; }
.payroll-pipeline dt small { color:#999; font-size:.58rem; }
.payroll-pipeline dd { justify-items:end; }
.payroll-pipeline dd b { font-size:.66rem; font-variant-numeric:tabular-nums; }
.people-ledger, .payroll-ledger, .attendance-ledger { margin-bottom:1rem; }
.status-badge.active { background:#ecfdf3; color:#187343; }
.status-badge.inactive { background:#f1f5f9; color:#64748b; }
.status-badge.released { background:#e9f7f4; color:#08705f; }
.people-form-grid, .attendance-form-grid, .payroll-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.people-form-grid > *, .attendance-form-grid > *, .payroll-form-grid > *, .employee-review-grid > *, .payroll-review-grid > * { min-width:0; }
.people-form .field-grid textarea, .payroll-form .field-grid textarea { width:100%; min-height:88px; padding:.7rem .75rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; color:#292524; font:inherit; font-size:.72rem; resize:vertical; }
.people-form .field-grid textarea:focus, .payroll-form .field-grid textarea:focus { outline:3px solid #fed7aa; border-color:var(--orange); }
.employee-clearance-grid, .employee-clearance-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:.75rem; margin-top:1rem; }
.employee-clearance-card { display:flex; align-items:flex-start; gap:.7rem; min-width:0; padding:.9rem; border:1px solid #deddd9; border-radius:10px; background:#fafaf9; cursor:pointer; }
.employee-clearance-card:has(input[type="checkbox"]:checked) { border-color:#86c89f; background:#f2fbf5; }
.employee-clearance-card input[type="checkbox"] { width:18px; height:18px; margin:.1rem 0 0; flex:0 0 auto; accent-color:#177245; }
.employee-clearance-card span { display:grid; gap:.18rem; min-width:0; }
.employee-clearance-card strong { color:#292524; font-size:.72rem; }
.employee-clearance-card small { color:#8a8580; font-size:.6rem; line-height:1.4; }
.employee-personal-record dl div { align-items:flex-start; }
.employee-personal-record dl dd { max-width:65%; line-height:1.45; white-space:pre-line; }
.employee-clearance-status-grid > div { display:grid; gap:.25rem; padding:.8rem; border:1px solid #e2dfdb; border-radius:9px; background:#fafaf9; }
.employee-clearance-status-grid span { color:#78716c; font-size:.61rem; text-transform:uppercase; }
.employee-clearance-status-grid strong { color:#9b4c0d; font-size:.7rem; }
.employee-clearance-status-grid .verified { border-color:#b9dfc6; background:#f2fbf5; }
.employee-clearance-status-grid .verified strong { color:#177245; }
.compensation-panel, .attendance-time-panel { border-top:3px solid var(--orange); }
.employee-review-grid { display:grid; grid-template-columns:minmax(260px,.55fr) minmax(0,1.45fr); gap:1rem; }
.employee-identity-card { display:grid; place-items:center; align-content:center; gap:.4rem; min-height:245px; text-align:center; }
.employee-avatar { display:grid; place-items:center; width:68px; height:68px; margin-bottom:.35rem; overflow:hidden; border-radius:20px; background:#222; color:#fff; font-size:1.25rem; font-weight:900; }
.employee-avatar img { width:100%; height:100%; object-fit:cover; }
.employee-identity-card > strong { font-size:1rem; }
.employee-identity-card > span, .employee-identity-card > small { color:#8a8580; font-size:.67rem; }
.compensation-summary { border-top:3px solid var(--orange); }
.compensation-summary > strong { display:block; margin:1.7rem 0 .3rem; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.compensation-summary > small { color:#8a8580; font-size:.67rem; }
.employee-payroll-history { margin-top:1rem; }
.attendance-time-preview { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:.8rem; border-radius:8px; background:#222; color:#fff; }
.attendance-time-preview span { color:#aaa; font-size:.62rem; text-transform:uppercase; }
.attendance-time-preview strong { font-size:.86rem; font-variant-numeric:tabular-nums; }
.payroll-total-panel { border-top:3px solid var(--orange); }
.payroll-attendance-loader { display:grid; align-content:end; gap:.35rem; }
.payroll-attendance-loader > span { color:#656565; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.payroll-attendance-loader .secondary-button { width:max-content; min-height:40px; }
.payroll-attendance-loader small { max-width:310px; color:#8a8580; font-size:.58rem; line-height:1.4; }
.payroll-attendance-policy { display:flex; align-items:flex-start; gap:.7rem; margin-top:1rem; padding:.8rem; border:1px solid #fed7aa; border-radius:9px; background:#fffaf4; }
.payroll-attendance-policy > span { display:grid; place-items:center; width:25px; height:25px; flex:0 0 auto; border-radius:7px; background:#fff0df; color:#a04b06; font-size:.68rem; font-weight:900; }
.payroll-attendance-policy p { display:grid; gap:.18rem; margin:0; }
.payroll-attendance-policy strong { font-size:.67rem; }
.payroll-attendance-policy small { color:#78716c; font-size:.59rem; line-height:1.5; }
.payroll-total-panel > strong { display:block; margin:1.6rem 0 .7rem; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.payroll-preview { margin:0; }
.payroll-preview > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid #eceae7; }
.payroll-preview dt { color:#78716c; font-size:.66rem; }
.payroll-preview dd { margin:0; font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums; }
.payroll-branch-empty { min-height:220px; }
.payroll-branch-empty[hidden], .payroll-lines[hidden], .payroll-line-card[hidden] { display:none; }
.payroll-lines { display:grid; gap:1rem; margin-top:1rem; }
.payroll-line-card { overflow:hidden; border:1px solid #e2dfdb; border-radius:10px; background:#fafaf9; opacity:.72; }
.payroll-line-card.selected { border-color:#edb479; background:#fffdfa; opacity:1; box-shadow:0 0 0 2px #ffedd5; }
.payroll-line-card > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:.85rem 1rem; background:#f4f3f1; }
.payroll-line-card.selected > header { background:#fff7ed; }
.payroll-line-card header > div { display:grid; gap:.15rem; min-width:0; }
.payroll-line-card header strong { overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.payroll-line-card header small { color:#8a8580; font-size:.59rem; }
.payroll-line-card header > b { font-size:.8rem; font-variant-numeric:tabular-nums; }
.payroll-line-card.manually-adjusted { border-color:#d97706; }
.payroll-select { display:flex; align-items:center; gap:.35rem; color:#57534e; font-size:.62rem; font-weight:800; text-transform:uppercase; }
.payroll-select input { width:17px; height:17px; accent-color:var(--orange); }
.payroll-attendance-card { display:grid; gap:.75rem; padding:1rem; border-top:1px solid #e5e2de; border-bottom:1px solid #e5e2de; background:#fff; }
.payroll-attendance-card-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.payroll-attendance-card-heading > div { display:grid; gap:.15rem; }
.payroll-attendance-card-heading p { margin:0; color:#a06025; font-size:.57rem; font-weight:850; letter-spacing:.12em; }
.payroll-attendance-card-heading strong { font-size:.7rem; }
.attendance-review-badge { display:inline-flex; align-items:center; min-height:26px; padding:.3rem .55rem; border-radius:999px; background:#eef8f1; color:#267345; font-size:.54rem; font-weight:850; text-transform:uppercase; white-space:nowrap; }
.attendance-review-badge::before { width:6px; height:6px; margin-right:.35rem; border-radius:50%; background:currentColor; content:""; }
.attendance-review-badge.not_loaded, .attendance-review-badge.ineligible { background:#f4f4f2; color:#858585; }
.attendance-review-badge.no_attendance, .attendance-review-badge.zero_regular_time { background:#fff7ed; color:#a04b06; }
.attendance-review-badge.open_shift { background:#fef2f2; color:#b42318; }
.payroll-attendance-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.55rem; }
.payroll-attendance-stats > div { display:grid; gap:.22rem; min-width:0; padding:.62rem .7rem; border:1px solid #ece9e5; border-radius:8px; background:#fafaf9; }
.payroll-attendance-stats span { overflow:hidden; color:#8a8580; font-size:.53rem; font-weight:800; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.payroll-attendance-stats strong { font-size:.68rem; font-variant-numeric:tabular-nums; }
.payroll-attendance-message { padding:.62rem .7rem; border-left:3px solid #5d9e72; border-radius:6px; background:#f4fbf6; color:#386248; font-size:.6rem; line-height:1.45; }
.payroll-attendance-message.not_loaded, .payroll-attendance-message.ineligible { border-left-color:#aaa49e; background:#f5f5f4; color:#78716c; }
.payroll-attendance-message.no_attendance, .payroll-attendance-message.zero_regular_time { border-left-color:#d97706; background:#fff7ed; color:#9a4f08; }
.payroll-attendance-message.open_shift { border-left-color:#dc2626; background:#fef2f2; color:#991b1b; }
.payroll-suggestion-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.payroll-suggestion-grid > div { display:grid; gap:.25rem; min-width:0; padding:.75rem; border:1px solid #ead9c7; border-radius:9px; background:#fffaf4; }
.payroll-suggestion-grid span { color:#995a28; font-size:.56rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.payroll-suggestion-grid strong { overflow:hidden; font-size:.84rem; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.payroll-suggestion-grid small { color:#8a8580; font-size:.56rem; line-height:1.4; }
.payroll-line-body { display:grid; grid-template-columns:1fr 1.15fr; gap:1rem; padding:1rem; }
.payroll-line-body > div > p { margin:0 0 .65rem; color:#a06025; font-size:.58rem; font-weight:850; letter-spacing:.12em; }
.payroll-money-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.payroll-money-grid label { display:grid; gap:.3rem; min-width:0; }
.payroll-money-grid label > span { color:#57534e; font-size:.58rem; font-weight:800; text-transform:uppercase; }
.payroll-money-grid input { width:100%; min-width:0; min-height:39px; padding:.55rem .55rem .55rem 1.55rem; border:1px solid #d6d3d1; border-radius:8px; background:#fff; font-size:clamp(.72rem,1vw,.8rem); font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.payroll-money-grid .money-input b { left:.62rem; font-size:.66rem; }
.payroll-line-body > .notes-field { grid-column:1/-1; margin:0; }
.payroll-adjustment-fields, .payroll-manual-exception { display:grid; align-content:start; gap:.35rem; min-width:0; padding:.75rem; border:1px solid #e7e5e4; border-radius:9px; background:#f8f8f6; }
.payroll-adjustment-fields label { display:grid; gap:.3rem; }
.payroll-adjustment-fields label > span { color:#57534e; font-size:.58rem; font-weight:800; text-transform:uppercase; }
.payroll-adjustment-fields > small, .payroll-manual-exception > small { color:#8a8580; font-size:.56rem; line-height:1.4; }
.payroll-line-card.manually-adjusted .payroll-adjustment-fields { border-color:#f0b477; background:#fff7ed; }
.payroll-manual-exception { display:none; }
.payroll-manual-exception.required, .payroll-manual-exception.active { display:grid; }
.payroll-manual-exception.required { border-color:#f0b477; background:#fffaf4; }
.payroll-manual-exception .check { align-items:flex-start; color:#7c3c09; font-size:.64rem; font-weight:750; line-height:1.4; }
.payroll-manual-exception textarea { min-height:58px; }
.payroll-line-body textarea { width:100%; min-height:60px; padding:.65rem; border:1px solid #d6d3d1; border-radius:8px; background:#fff; resize:vertical; }
.payroll-review-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:1rem; }
.payroll-net-hero { border-top:3px solid var(--orange); }
.payroll-net-hero > strong { display:block; margin:1.5rem 0 1rem; font-size:clamp(2.2rem,5vw,3.7rem); letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.payroll-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; }
.payroll-hero-stats > div { display:grid; gap:.2rem; padding:.85rem; border-radius:8px; background:#f8f8f6; }
.payroll-hero-stats span { color:#8a8580; font-size:.58rem; text-transform:uppercase; }
.payroll-hero-stats b { font-size:.74rem; font-variant-numeric:tabular-nums; }
.payroll-lines-review, .payroll-boundary-review, .payroll-release-panel { margin-top:1rem; }
.payroll-boundary-review > p, .payroll-release-panel > p { color:#68635f; font-size:.72rem; line-height:1.6; }
.payroll-attendance-warning { margin-bottom:1rem; }
.payroll-released-callout { border-color:#bbf7d0; background:#f0fdf4; }
.payroll-released-callout > span { background:#187343; }
.payroll-release-panel { border-top:3px solid var(--orange); }
.payroll-release-form { display:grid; grid-template-columns:minmax(160px,.5fr) minmax(180px,.55fr) minmax(220px,1fr) auto; align-items:end; gap:.8rem; margin-top:1rem; }
.payroll-release-form label { display:grid; gap:.4rem; }
.payroll-release-form label > span { color:#57534e; font-size:.61rem; font-weight:800; text-transform:uppercase; }
.payroll-release-form input, .payroll-release-form select { width:100%; min-height:42px; padding:.62rem .72rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; }

/* Step 10 — Controlled, read-only cross-module management reports. */
.reports-source-callout { margin-bottom:1rem; }
.reports-context-bar { flex-wrap:wrap; }
.reports-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.reports-insight-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr); gap:1rem; margin-bottom:1rem; }
.report-result-panel { border-top:3px solid var(--orange); }
.report-result-value { display:block; margin:1.5rem 0 .45rem; font-size:clamp(2.4rem,5vw,4rem); letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.report-result-value.negative { color:#b42318; }
.report-formula { margin:0 0 1rem; color:#78716c; font-size:.69rem; }
.report-comparison { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:1rem; padding:.85rem; border-radius:9px; background:#f8f8f6; }
.report-comparison span { display:grid; gap:.15rem; color:#57534e; font-size:.66rem; font-weight:750; }
.report-comparison span small { color:#a8a29e; font-size:.59rem; font-weight:500; }
.report-comparison strong, .report-comparison b { font-size:.74rem; font-variant-numeric:tabular-nums; }
.report-comparison b { padding:.35rem .5rem; border-radius:999px; background:#ecfdf3; color:#187343; }
.report-comparison b.negative { background:#fef2f2; color:#b42318; }
.report-boundary-copy, .report-coverage-note { margin:1rem 0 0; color:#8a8580; font-size:.62rem; line-height:1.55; }
.report-mini-zero { min-height:150px; margin-top:1rem; }
.report-coverage-list { display:grid; gap:.2rem; margin-top:1rem; }
.report-coverage-list > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.2rem 1rem; padding:.62rem 0; border-bottom:1px solid #efedea; }
.report-coverage-list > div:last-child { border:0; }
.report-coverage-list strong { font-size:.69rem; }
.report-coverage-list span { font-size:.65rem; font-weight:800; }
.report-coverage-list small { grid-column:1/-1; color:#a8a29e; font-size:.57rem; }
.reports-mix-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.report-mix-list { display:grid; gap:.15rem; margin-top:1rem; }
.report-mix-row { display:grid; grid-template-columns:minmax(125px,.9fr) minmax(100px,1.1fr) auto; align-items:center; gap:.8rem; padding:.65rem 0; border-bottom:1px solid #efedea; }
.report-mix-row > div:first-child { display:grid; gap:.14rem; min-width:0; }
.report-mix-row > div:first-child strong { overflow:hidden; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.report-mix-row > div:first-child small { color:#999; font-size:.56rem; }
.report-mix-row > p { display:grid; justify-items:end; gap:.12rem; margin:0; }
.report-mix-row > p strong { font-size:.67rem; font-variant-numeric:tabular-nums; }
.report-mix-row > p small { color:#999; font-size:.57rem; }
.channel-track.cost i { background:#292524; }
.report-gap-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.45rem; padding:.7rem .8rem; border-radius:8px; background:#f8f8f6; }
.report-gap-row span, .report-gap-row strong { font-size:.65rem; }
.reports-ledger { margin-bottom:1rem; }
.reports-operations-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.report-operation-panel { display:flex; flex-direction:column; min-width:0; }
.report-stat-list { margin:1rem 0 .7rem; }
.report-stat-list > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.58rem 0; border-bottom:1px solid #efedea; }
.report-stat-list dt { color:#78716c; font-size:.65rem; }
.report-stat-list dd { margin:0; font-size:.68rem; font-weight:800; font-variant-numeric:tabular-nums; }
.report-operation-panel > p { flex:1; margin:.2rem 0 .8rem; color:#8a8580; font-size:.62rem; line-height:1.5; }
.report-operation-panel > .row-link { align-self:flex-start; }
.report-boundary-panel { margin-bottom:1rem; }
.report-basis-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-top:1rem; }
.report-basis-grid > div { display:grid; gap:.2rem; padding:.8rem; border-radius:8px; background:#f8f8f6; }
.report-basis-grid strong { font-size:.68rem; }
.report-basis-grid small { color:#8a8580; font-size:.58rem; line-height:1.4; }

/* Step 11 — Permission-aware cross-module approval and release triage. */
.approvals-source-callout { margin-bottom:1rem; }
.approvals-context-bar { flex-wrap:wrap; }
.approval-search { flex:1 1 250px; }
.approval-search input { width:100%; }
.approvals-metric-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.approvals-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); gap:1rem; margin-bottom:1rem; }
.approval-queue-panel { padding:0; overflow:hidden; }
.approval-queue-list { display:grid; }
.approval-queue-row { display:grid; grid-template-columns:38px minmax(190px,1fr) minmax(125px,.55fr) minmax(90px,.4fr) auto auto; align-items:center; gap:.75rem; padding:1rem 1.15rem; border-top:1px solid #eceae7; }
.approval-queue-row:hover { background:#fffdf9; }
.approval-source-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#f4f4f2; color:#57534e; font-size:.72rem; font-weight:900; }
.approval-source-icon.daily_closing { background:#eff6ff; color:#1d5dac; }
.approval-source-icon.expense { background:#fff7ed; color:#a04b06; }
.approval-source-icon.purchasing { background:#f5f3ff; color:#6d4bc3; }
.approval-source-icon.grabfood { background:#ecfdf3; color:#187343; }
.approval-source-icon.payroll, .approval-source-icon.payroll_release { background:#fff1f2; color:#b4234a; }
.approval-record-copy, .approval-record-copy > div, .approval-submission-copy, .approval-amount { display:grid; gap:.15rem; min-width:0; }
.approval-record-copy > div { display:flex; align-items:center; gap:.45rem; }
.approval-record-copy strong, .approval-submission-copy strong { overflow:hidden; font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.approval-record-copy p { overflow:hidden; margin:0; color:#57534e; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.approval-record-copy small, .approval-submission-copy small { color:#a8a29e; font-size:.56rem; }
.approval-type { padding:.27rem .4rem; border-radius:999px; background:#f4f4f2; color:#78716c; font-size:.53rem; font-weight:850; text-transform:uppercase; white-space:nowrap; }
.approval-submission-copy > span, .approval-amount > span { color:#8a8580; font-size:.55rem; text-transform:uppercase; }
.approval-amount { justify-items:end; }
.approval-amount strong { font-size:.69rem; font-variant-numeric:tabular-nums; }
.approval-age { min-width:38px; padding:.36rem .45rem; border-radius:999px; text-align:center; font-size:.58rem; font-weight:850; }
.approval-age.new { background:#ecfdf3; color:#187343; }
.approval-age.aging { background:#fff7ed; color:#a04b06; }
.approval-age.critical { background:#fef2f2; color:#b42318; }
.approval-review-link { min-height:36px; padding:.5rem .7rem; font-size:.63rem; white-space:nowrap; }
.approval-side-stack { display:grid; align-content:start; gap:1rem; }
.approval-source-list { display:grid; gap:.2rem; margin-top:1rem; }
.approval-source-list a { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.62rem 0; border-bottom:1px solid #efedea; color:#292524; text-decoration:none; }
.approval-source-list a:last-child { border:0; }
.approval-source-list a > span { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#f4f4f2; color:#78716c; font-size:.62rem; }
.approval-source-list a > div { display:grid; gap:.12rem; }
.approval-source-list strong { font-size:.67rem; }
.approval-source-list small { color:#999; font-size:.56rem; }
.approval-source-list b { display:grid; place-items:center; min-width:24px; height:24px; border-radius:8px; background:#fff3e7; color:#9a4f08; font-size:.64rem; }
.approval-boundary-panel { border-top:3px solid var(--orange); }
.approval-safeguards { display:grid; gap:.7rem; margin:1rem 0 0; padding:0; list-style:none; }
.approval-safeguards li { display:flex; gap:.65rem; align-items:flex-start; }
.approval-safeguards li > span { display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto; border-radius:8px; background:#292524; color:#fff; font-size:.59rem; font-weight:900; }
.approval-safeguards p { display:grid; gap:.14rem; margin:0; }
.approval-safeguards strong { font-size:.66rem; }
.approval-safeguards small { color:#999; font-size:.57rem; line-height:1.4; }
.approval-history-panel { margin-bottom:1rem; }
.approval-history-list { display:grid; gap:0; margin:1rem 0 0; padding:0; list-style:none; }
.approval-history-list li { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.65rem 0; border-bottom:1px solid #efedea; }
.approval-history-list li:last-child { border:0; }
.decision-dot { width:8px; height:8px; border-radius:50%; background:#187343; box-shadow:0 0 0 4px #ecfdf3; }
.decision-dot.returned { background:#b42318; box-shadow:0 0 0 4px #fef2f2; }
.approval-history-list li > div { display:grid; gap:.15rem; min-width:0; }
.approval-history-list strong { overflow:hidden; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.approval-history-list small { color:#999; font-size:.58rem; }
.approval-history-list li > b { color:#78716c; font-size:.57rem; text-transform:uppercase; }

/* Step 12 — Owner-controlled users, branches, roles, settings, and audit. */
.admin-lock-badge, .admin-protected-badge { display:inline-flex; align-items:center; width:max-content; padding:.46rem .7rem; border:1px solid #fed7aa; border-radius:999px; background:#fff7ed; color:#9a4f08; font-size:.62rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.admin-tabs { display:flex; gap:.35rem; overflow-x:auto; margin:-.55rem 0 1rem; padding:.35rem; border:1px solid #deddd9; border-radius:10px; background:#fff; scrollbar-width:thin; }
.admin-tabs a { flex:0 0 auto; padding:.6rem .78rem; border-radius:7px; color:#78716c; font-size:.67rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.admin-tabs a:hover { background:#f5f5f3; color:#292524; }
.admin-tabs a.active { background:#292524; color:#fff; }
.admin-source-callout { margin-bottom:1rem; }
.admin-metric-grid, .admin-user-metric-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.admin-branch-metric-grid, .admin-audit-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:1rem; margin-bottom:1rem; }
.admin-control-list { display:grid; gap:.2rem; margin-top:1rem; }
.admin-control-list a { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:.78rem .2rem; border-bottom:1px solid #efedea; color:#292524; text-decoration:none; }
.admin-control-list a:last-child { border:0; }
.admin-control-list a > span { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#f5f5f3; color:#78716c; font-size:.7rem; }
.admin-control-list a > div { display:grid; gap:.15rem; min-width:0; }
.admin-control-list strong { font-size:.69rem; }
.admin-control-list small { color:#999; font-size:.58rem; }
.admin-control-list b { color:#9a4f08; font-size:.62rem; white-space:nowrap; }
.admin-recent-list { display:grid; gap:0; margin:1rem 0 0; padding:0; list-style:none; }
.admin-recent-list li { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.65rem 0; border-bottom:1px solid #efedea; }
.admin-recent-list li:last-child { border:0; }
.admin-recent-list li > span { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px #fff3e7; }
.admin-recent-list li > div { display:grid; gap:.15rem; min-width:0; }
.admin-recent-list strong { overflow:hidden; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.admin-recent-list small { color:#999; font-size:.56rem; }
.admin-recent-list b { color:#78716c; font-size:.55rem; text-transform:uppercase; }
.admin-context-bar { flex-wrap:wrap; }
.admin-search { flex:1 1 240px; }
.admin-search input { width:100%; }
.admin-ledger { margin-bottom:1rem; }
.admin-chip-stack { display:flex; flex-wrap:wrap; gap:.3rem; }
.admin-chip-stack span { padding:.3rem .45rem; border-radius:999px; background:#f5f5f3; color:#57534e; font-size:.56rem; font-weight:800; }
.admin-chip-stack em { color:#b42318; font-size:.6rem; font-style:normal; }
.admin-error-summary { margin-bottom:1rem; padding:.9rem 1rem; border:1px solid #fecaca; border-radius:9px; background:#fef2f2; color:#991b1b; }
.admin-error-summary strong { font-size:.72rem; }
.admin-error-summary ul { margin:.45rem 0 0; padding-left:1.1rem; font-size:.65rem; line-height:1.5; }
.admin-form { margin-bottom:1rem; }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start; }
.admin-fields textarea { width:100%; min-height:96px; padding:.65rem .75rem; border:1px solid #d7d5d1; border-radius:8px; background:#fafaf9; color:#222; resize:vertical; }
.admin-fields input:focus, .admin-fields textarea:focus, .admin-default-field select:focus { outline:3px solid #fed7aa; border-color:var(--orange); background:#fff; }
.admin-toggle { display:flex!important; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.65rem!important; padding:.75rem; border:1px solid #e2dfdb; border-radius:9px; background:#fafaf9; }
.admin-toggle input { width:18px; min-height:18px; margin:0; }
.admin-toggle > span { display:grid; gap:.13rem; color:#292524!important; text-transform:none!important; }
.admin-toggle strong { font-size:.69rem; }
.admin-toggle small { color:#999; font-size:.58rem; font-weight:500; letter-spacing:0; text-transform:none; }
.admin-check-list { display:grid; gap:.5rem; margin-top:1rem; }
.admin-check-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.65rem; min-width:0; padding:.7rem; border:1px solid #e2dfdb; border-radius:9px; background:#fafaf9; cursor:pointer; }
.admin-check-card:has(input:checked) { border-color:#fdba74; background:#fff7ed; }
.admin-check-card.protected { border-style:dashed; }
.admin-check-card input { width:16px; height:16px; margin:0; accent-color:var(--orange); }
.admin-check-card > span { display:grid; gap:.14rem; min-width:0; }
.admin-check-card strong { font-size:.68rem; }
.admin-check-card small { overflow:hidden; color:#999; font-size:.57rem; text-overflow:ellipsis; white-space:nowrap; }
.admin-branch-assignment { margin-top:1rem; }
.admin-inactive-assignments { margin:.9rem 0 0; }
.admin-branch-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin-top:1rem; }
.admin-default-field { display:grid; gap:.4rem; width:min(100%,420px); margin-top:1rem; }
.admin-default-field > span { color:#57534e; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.admin-default-field select { min-height:42px; padding:.6rem .7rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; }
.admin-default-field small { color:#999; font-size:.6rem; }
.admin-fixed-settings { border-top:3px solid var(--orange); }
.admin-branch-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem; margin-top:1rem; }
.admin-branch-stats > div { display:grid; gap:.2rem; padding:.8rem; border-radius:8px; background:#f8f8f6; }
.admin-branch-stats span { color:#8a8580; font-size:.57rem; text-transform:uppercase; }
.admin-branch-stats strong { font-size:.9rem; }
.admin-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.admin-role-card { display:flex; flex-direction:column; min-width:0; }
.admin-role-card.protected { border-top:3px solid var(--orange); }
.admin-role-card > p { flex:1; margin:.75rem 0; color:#78716c; font-size:.65rem; line-height:1.5; }
.admin-role-summary { display:flex; flex-wrap:wrap; gap:.6rem; padding:.65rem; border-radius:8px; background:#f8f8f6; }
.admin-role-summary span, .admin-role-summary b { color:#78716c; font-size:.58rem; }
.admin-role-summary b { margin-left:auto; color:#9a4f08; text-transform:uppercase; }
.admin-role-preview { display:flex; flex-wrap:wrap; align-content:flex-start; gap:.3rem; min-height:70px; margin:.8rem 0; }
.admin-role-preview span { padding:.28rem .4rem; border-radius:6px; background:#f5f5f3; color:#57534e; font-family:ui-monospace,monospace; font-size:.52rem; }
.admin-role-preview em { color:#999; font-size:.57rem; font-style:normal; }
.admin-role-card > .secondary-button { align-self:flex-start; }
.role-form-grid { grid-template-columns:minmax(280px,.55fr) minmax(0,1.45fr); }
.permission-groups { display:grid; gap:.8rem; margin-top:1rem; }
.permission-groups fieldset { margin:0; padding:.8rem; border:1px solid #e4e1dd; border-radius:9px; }
.permission-groups legend { padding:0 .35rem; color:#9a4f08; font-size:.59rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.permission-groups fieldset > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
.permission-check { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.55rem; padding:.55rem; border-radius:7px; cursor:pointer; }
.permission-check:hover { background:#f8f8f6; }
.permission-check input { width:16px; height:16px; margin:0; accent-color:var(--orange); }
.permission-check > span { display:grid; gap:.1rem; min-width:0; }
.permission-check strong { overflow:hidden; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.permission-check small { color:#999; font-family:ui-monospace,monospace; font-size:.51rem; }
.admin-settings-note { margin-top:1rem; }
.admin-audit-filters input[type=date] { min-width:145px; }
.audit-list { display:grid; }
.audit-row { display:grid; grid-template-columns:10px minmax(220px,1.2fr) minmax(120px,.55fr) minmax(110px,.5fr) auto; align-items:center; gap:.75rem; padding:.85rem 1.15rem; border-top:1px solid #eceae7; }
.audit-event-dot { width:8px; height:8px; border-radius:50%; background:#78716c; box-shadow:0 0 0 4px #f5f5f3; }
.audit-event-dot.admin { background:#d97706; box-shadow:0 0 0 4px #fff3e7; }
.audit-event-dot.auth { background:#1d5dac; box-shadow:0 0 0 4px #eff6ff; }
.audit-event-dot.workflow { background:#187343; box-shadow:0 0 0 4px #ecfdf3; }
.audit-main, .audit-row > div:not(.audit-main) { display:grid; gap:.13rem; min-width:0; }
.audit-main strong { overflow:hidden; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.audit-main small { color:#999; font-family:ui-monospace,monospace; font-size:.52rem; }
.audit-row > div:not(.audit-main) span { color:#999; font-size:.52rem; text-transform:uppercase; }
.audit-row > div:not(.audit-main) strong { overflow:hidden; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.audit-row time { color:#78716c; font-size:.58rem; white-space:nowrap; }

/* Personal attendance portal — intentionally isolated from operational workspaces. */
.staff-attendance-heading { align-items:flex-end; }
.staff-live-time { display:grid; justify-items:end; gap:.12rem; min-width:190px; padding:.75rem .9rem; border:1px solid #deddd9; border-radius:10px; background:#fff; }
.staff-live-time span, .staff-live-time small { color:#8a8580; font-size:.57rem; font-weight:700; }
.staff-live-time strong { font-size:1rem; font-variant-numeric:tabular-nums; }
.staff-attendance-error { margin-bottom:1rem; padding:.9rem 1rem; border:1px solid #fecaca; border-radius:9px; background:#fef2f2; color:#991b1b; }
.staff-attendance-error strong { font-size:.72rem; }
.staff-attendance-error ul { margin:.35rem 0 0; padding-left:1.1rem; font-size:.65rem; }
.staff-setup-panel { min-height:360px; }
.staff-attendance-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:1rem; margin-bottom:1rem; }
.staff-clock-panel { display:flex; flex-direction:column; min-height:430px; border-top:3px solid var(--orange); }
.staff-identity { display:grid; grid-template-columns:46px minmax(0,1fr); align-items:center; gap:.75rem; padding-bottom:1rem; border-bottom:1px solid #efedea; }
.staff-identity > span { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:#292524; color:#fff; font-size:1rem; font-weight:900; }
.staff-identity > span { overflow:hidden; }
.staff-identity > span img { width:100%; height:100%; object-fit:cover; }
.staff-identity > div { display:grid; gap:.12rem; min-width:0; }
.staff-identity small { color:#a04b06; font-size:.55rem; font-weight:850; letter-spacing:.09em; }
.staff-identity strong { overflow:hidden; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }
.staff-identity p { overflow:hidden; margin:0; color:#8a8580; font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }
.staff-clock-state { display:flex; align-items:center; justify-content:center; gap:.65rem; margin:2rem auto .7rem; padding:.55rem .8rem; border-radius:999px; }
.staff-clock-state > span { font-size:.65rem; }
.staff-clock-state > p { display:grid; gap:.05rem; margin:0; }
.staff-clock-state small { font-size:.48rem; font-weight:800; letter-spacing:.07em; }
.staff-clock-state strong { font-size:.72rem; }
.staff-clock-state.ready { background:#fff7ed; color:#9a4f08; }
.staff-clock-state.working { background:#ecfdf3; color:#187343; }
.staff-clock-state.complete { background:#eff6ff; color:#1d5dac; }
.staff-clock-time { display:grid; justify-items:center; gap:.1rem; margin:.2rem auto 1rem; }
.staff-clock-time small { color:#8a8580; font-size:.58rem; font-weight:800; text-transform:uppercase; }
.staff-clock-time strong { font-size:2.25rem; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.staff-clock-time span { color:#999; font-size:.61rem; }
.staff-clock-note { max-width:540px; margin:.65rem auto 1.2rem; color:#78716c; font-size:.67rem; line-height:1.55; text-align:center; }
.staff-clock-form { display:grid; justify-items:center; gap:.55rem; width:min(100%,420px); margin:auto auto 0; }
.staff-clock-form small { color:#999; font-size:.56rem; text-align:center; }
.staff-clock-button { width:100%; min-height:58px; border:0; border-radius:11px; color:#fff; font:inherit; font-size:.83rem; font-weight:900; cursor:pointer; box-shadow:0 10px 25px #00000012; }
.staff-clock-button:hover { transform:translateY(-1px); }
.staff-clock-button:disabled { opacity:.65; cursor:wait; transform:none; }
.staff-clock-button.clock-in { background:#187343; }
.staff-clock-button.clock-out { background:#292524; }
.staff-shift-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin:1.2rem auto .4rem; width:min(100%,520px); }
.staff-shift-summary > div { display:grid; justify-items:center; gap:.2rem; padding:.85rem .5rem; border-radius:9px; background:#f8f8f6; }
.staff-shift-summary small { color:#8a8580; font-size:.54rem; font-weight:800; text-transform:uppercase; }
.staff-shift-summary strong { font-size:.8rem; font-variant-numeric:tabular-nums; }
.staff-clock-rules ol { display:grid; gap:0; margin:1rem 0 0; padding:0; list-style:none; }
.staff-clock-rules li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:.7rem; padding:.8rem 0; border-bottom:1px solid #efedea; }
.staff-clock-rules li:last-child { border:0; }
.staff-clock-rules li > span { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:#fff3e7; color:#a04b06; font-size:.62rem; font-weight:900; }
.staff-clock-rules li p { display:grid; gap:.18rem; margin:0; }
.staff-clock-rules li strong { font-size:.67rem; }
.staff-clock-rules li small { color:#8a8580; font-size:.58rem; line-height:1.5; }
.staff-history-panel { margin-bottom:1rem; }
.staff-payslip-heading { align-items:flex-end; }
.staff-payslip-identity { display:flex; align-items:center; gap:.65rem; min-width:270px; padding:.72rem .8rem; border:1px solid #deddd9; border-radius:10px; background:#fff; }
.staff-payslip-identity > span { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:11px; background:#292524; color:#fff; font-size:.9rem; font-weight:900; }
.staff-payslip-identity p { display:grid; gap:.08rem; min-width:0; margin:0; }
.staff-payslip-identity small { color:#a04b06; font-size:.5rem; font-style:normal; font-weight:850; letter-spacing:.08em; }
.staff-payslip-identity strong, .staff-payslip-identity em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-payslip-identity strong { font-size:.74rem; }
.staff-payslip-identity em { color:#8a8580; font-size:.57rem; font-style:normal; }
.staff-payslip-notice { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; padding:.8rem 1rem; }
.staff-payslip-notice > span { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:8px; background:#292524; color:#fff; font-size:.65rem; font-weight:900; }
.staff-payslip-notice p { display:grid; gap:.12rem; margin:0; }
.staff-payslip-notice strong { font-size:.66rem; }
.staff-payslip-notice small { color:#7c7772; font-size:.57rem; line-height:1.45; }
.staff-payslip-cards { display:grid; gap:.65rem; padding:1rem; }
.staff-payslip-card { display:grid; grid-template-columns:minmax(220px,1fr) minmax(100px,.3fr) minmax(390px,1.1fr) auto; align-items:center; gap:1rem; padding:.85rem; border:1px solid #e7e4e0; border-radius:11px; background:#fff; }
.staff-payslip-card-main { display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:.65rem; min-width:0; }
.staff-payslip-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#fff3e7; color:#a04b06; font-size:.85rem; }
.staff-payslip-card-main > div, .staff-payslip-release { display:grid; gap:.1rem; min-width:0; }
.staff-payslip-card-main small, .staff-payslip-release small, .staff-payslip-totals small { color:#a04b06; font-size:.47rem; font-weight:850; letter-spacing:.06em; }
.staff-payslip-card-main strong { overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.staff-payslip-card-main p { overflow:hidden; margin:0; color:#8a8580; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }
.staff-payslip-release strong { font-size:.66rem; }
.staff-payslip-release span { color:#8a8580; font-size:.55rem; }
.staff-payslip-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-width:0; border:1px solid #efedea; border-radius:9px; }
.staff-payslip-totals p { display:grid; gap:.08rem; min-width:0; margin:0; padding:.52rem .6rem; border-right:1px solid #efedea; }
.staff-payslip-totals p:last-child { border:0; }
.staff-payslip-totals strong { overflow:hidden; font-size:.7rem; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.staff-payslip-totals .net { background:#fff8f1; }
.staff-payslip-actions { display:grid; gap:.42rem; min-width:150px; }
.staff-payslip-actions > a { width:100%; white-space:nowrap; }
.staff-payslip-download, .staff-payslip-view { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:38px; padding:.65rem .75rem; }
.staff-payslip-empty { min-height:330px; }
.digital-payslip-heading { align-items:flex-end; }
.digital-payslip-heading-actions { flex-wrap:wrap; }
.digital-payslip-document { overflow:hidden; margin-bottom:1rem; border-top:3px solid var(--orange); }
.digital-payslip-document-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.3rem 1.4rem; border-bottom:1px solid #e8e5e1; }
.digital-payslip-document-header > div { display:grid; gap:.16rem; }
.digital-payslip-document-header > div:last-child { justify-items:end; text-align:right; }
.digital-payslip-document-header p { margin:0; color:#a04b06; font-size:.56rem; font-weight:850; letter-spacing:.12em; }
.digital-payslip-document-header h2 { margin:0; font-size:1.2rem; letter-spacing:.06em; }
.digital-payslip-document-header div:first-child span { color:#8a8580; font-size:.6rem; }
.digital-payslip-document-header div:last-child strong { font-size:1.15rem; letter-spacing:.03em; }
.digital-payslip-document-header div:last-child span { width:max-content; padding:.28rem .48rem; border-radius:999px; background:#fff3e7; color:#a04b06; font-size:.48rem; font-weight:850; letter-spacing:.08em; }
.digital-payslip-summary, .digital-payslip-money-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; padding:1rem 1.4rem 0; }
.digital-payslip-summary > section, .digital-payslip-money-grid > section, .digital-payslip-attendance { overflow:hidden; border:1px solid #e5e2de; border-radius:11px; background:#fff; }
.digital-payslip-summary > section > p { margin:0; padding:.7rem .85rem; border-bottom:1px solid #ece9e5; color:#a04b06; font-size:.54rem; font-weight:850; letter-spacing:.1em; }
.digital-payslip-summary dl, .digital-payslip-money-list { margin:0; }
.digital-payslip-summary dl > div, .digital-payslip-money-list > div { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr); gap:1rem; padding:.62rem .85rem; border-bottom:1px solid #efedea; }
.digital-payslip-summary dl > div:last-child, .digital-payslip-money-list > div:last-child { border-bottom:0; }
.digital-payslip-summary dt, .digital-payslip-money-list dt { color:#7c7772; font-size:.62rem; }
.digital-payslip-summary dd, .digital-payslip-money-list dd { min-width:0; margin:0; font-size:.66rem; font-weight:800; text-align:right; overflow-wrap:anywhere; }
.digital-payslip-section-title { padding:.72rem .85rem; border-bottom:1px solid #ece9e5; }
.digital-payslip-section-title p { margin:0 0 .13rem; color:#a04b06; font-size:.52rem; font-weight:850; letter-spacing:.1em; }
.digital-payslip-section-title h3 { margin:0; font-size:.8rem; }
.digital-payslip-money-list > div { grid-template-columns:minmax(0,1fr) auto; }
.digital-payslip-money-list dd { font-variant-numeric:tabular-nums; white-space:nowrap; }
.digital-payslip-money-list .total { background:#fff8f1; }
.digital-payslip-money-list .total dt, .digital-payslip-money-list .total dd { color:#8f460a; font-weight:900; }
.digital-payslip-attendance { margin:1rem 1.4rem 0; }
.digital-payslip-attendance > div:last-child { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.digital-payslip-attendance > div:last-child p { display:grid; justify-items:center; gap:.22rem; min-width:0; margin:0; padding:.85rem .45rem; border-right:1px solid #efedea; text-align:center; }
.digital-payslip-attendance > div:last-child p:last-child { border-right:0; }
.digital-payslip-attendance small { color:#8a8580; font-size:.5rem; font-weight:800; letter-spacing:.04em; }
.digital-payslip-attendance strong { font-size:.78rem; font-variant-numeric:tabular-nums; }
.digital-payslip-net { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 1.4rem 0; padding:1rem 1.1rem; border-radius:11px; background:#292524; color:#fff; }
.digital-payslip-net > div { display:grid; gap:.14rem; }
.digital-payslip-net small { color:#fdba74; font-size:.55rem; font-weight:850; letter-spacing:.1em; }
.digital-payslip-net span { color:#d6d3d1; font-size:.6rem; }
.digital-payslip-net > strong { font-size:1.65rem; font-variant-numeric:tabular-nums; letter-spacing:-.03em; white-space:nowrap; }
.digital-payslip-footer { display:grid; gap:.2rem; margin:1rem 1.4rem 1.3rem; padding-top:.8rem; border-top:1px solid #e5e2de; color:#7c7772; font-size:.57rem; line-height:1.5; }
.digital-payslip-footer strong { color:#57534e; }
.admin-employee-link { width:100%; padding-top:1rem; border-top:1px solid #efedea; }
.admin-geofence-panel { margin-top:1rem; border-top:3px solid var(--orange); }
.admin-geofence-callout { margin:.9rem 0 1rem; }
.admin-geofence-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.admin-geofence-fields > label { display:grid; gap:.4rem; min-width:0; color:#57534e; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.admin-geofence-fields input { width:100%; min-height:42px; padding:.6rem .7rem; border:1px solid #d6d3d1; border-radius:8px; background:#fafaf9; color:#292524; font:inherit; }
.admin-geofence-fields input:focus { outline:3px solid #fed7aa; border-color:var(--orange); background:#fff; }
.admin-geofence-actions { display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.admin-geofence-actions p { margin:0; color:#8a8580; font-size:.61rem; }
.staff-proof-form { width:100%; max-width:720px; margin:1rem auto 0; }
.staff-proof-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; width:100%; }
.staff-proof-step { display:flex; flex-direction:column; min-width:0; padding:.75rem; border:1px solid #e5e2de; border-radius:10px; background:#fafaf9; }
.staff-proof-step-heading { display:grid; grid-template-columns:27px minmax(0,1fr); align-items:start; gap:.6rem; margin-bottom:.65rem; }
.staff-proof-step-heading > span { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; background:#fff3e7; color:#a04b06; font-size:.61rem; font-weight:900; }
.staff-proof-step-heading p { display:grid; gap:.13rem; margin:0; }
.staff-proof-step-heading strong { font-size:.65rem; }
.staff-proof-step-heading small { color:#8a8580; font-size:.54rem; line-height:1.4; text-align:left; }
.staff-camera-frame { position:relative; display:grid; place-items:center; overflow:hidden; width:100%; min-height:165px; border:1px dashed #d6d3d1; border-radius:9px; background:#222; color:#aaa; }
.staff-camera-frame video, .staff-camera-frame img { width:100%; height:165px; object-fit:cover; transform:scaleX(-1); }
.staff-camera-frame > div { display:grid; justify-items:center; gap:.3rem; }
.staff-camera-frame > div span { font-size:1.15rem; }
.staff-camera-frame > div strong { font-size:.6rem; }
.staff-proof-actions { display:flex; gap:.45rem; width:100%; margin-top:.55rem; }
.staff-proof-actions > * { flex:1; }
.staff-proof-actions [hidden] { display:none !important; }
.staff-camera-file-input { display:none !important; }
.staff-location-state { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:.65rem; min-height:88px; margin:auto 0 .55rem; padding:.75rem; border:1px dashed #d6d3d1; border-radius:9px; background:#fff; }
.staff-location-state > span { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#f5f5f3; color:#78716c; }
.staff-location-state p { display:grid; gap:.12rem; margin:0; }
.staff-location-state strong { font-size:.64rem; }
.staff-location-state small { color:#8a8580; font-size:.55rem; text-align:left; }
.staff-location-state.verified { border-color:#bbf7d0; background:#f0fdf4; }
.staff-location-state.verified > span { background:#dcfce7; color:#187343; }
.staff-location-button { width:100%; }
.staff-proof-badge { display:inline-flex; width:max-content; padding:.28rem .45rem; border-radius:999px; background:#f5f5f3; color:#78716c; font-size:.54rem; font-weight:850; text-transform:uppercase; white-space:nowrap; }
.staff-proof-badge.verified { background:#ecfdf3; color:#187343; }
.attendance-proof-links { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; }
.attendance-proof-links a { width:max-content; padding:.25rem .4rem; border-radius:6px; background:#eff6ff; color:#1d5dac; font-size:.52rem; font-weight:800; text-decoration:none; white-space:nowrap; }
.attendance-proof-review { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:1rem; }
.attendance-proof-photo-panel { min-width:0; }
.attendance-proof-photo { display:block; width:100%; max-height:620px; margin-top:1rem; border-radius:10px; background:#222; object-fit:contain; }
.attendance-proof-details .amount-list { margin-top:1rem; }
.attendance-proof-boundary { display:grid; gap:.25rem; margin-top:1rem; }
.attendance-proof-boundary small { color:#8a8580; font-size:.59rem; line-height:1.5; }

/* User-selectable authenticated light and dark appearance. */
html[data-theme="dark"] .app-page { background:#101214; color:#f5f5f4; }
html[data-theme="dark"] .topbar { border-color:#30343a; background:#17191cf2; }
html[data-theme="dark"] .topbar-title small,
html[data-theme="dark"] .profile-chip small,
html[data-theme="dark"] .page-heading > div > p:last-child,
html[data-theme="dark"] .section-heading > span,
html[data-theme="dark"] .metric-top,
html[data-theme="dark"] .panel-heading > span,
html[data-theme="dark"] .ledger-heading > span,
html[data-theme="dark"] .form-help,
html[data-theme="dark"] .payroll-estimate-updated { color:#a8a29e; }
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .logout-button { border-color:#3b4047; background:#202328; color:#d6d3d1; }
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible { border-color:#c76d12; background:#33261a; color:#fdba74; outline-color:#5a3a20; }
html[data-theme="dark"] .profile-chip:hover { background:#22262b; }
html[data-theme="dark"] .logout-button:hover { border-color:#7f3b3b; background:#321e21; color:#fca5a5; }
html[data-theme="dark"] .menu-button { color:#f5f5f4; }
html[data-theme="dark"] .context-bar,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .staff-roster-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .confirmation-shell,
html[data-theme="dark"] .admin-tabs,
html[data-theme="dark"] .staff-live-time { border-color:#34383e; background:#1a1d21; box-shadow:0 4px 18px #00000030; }
html[data-theme="dark"] .staff-roster-card:hover,
html[data-theme="dark"] .staff-roster-card:focus-visible { border-color:#a96525; background:#202328; box-shadow:0 8px 22px #0008; }
html[data-theme="dark"] .staff-payslip-identity,
html[data-theme="dark"] .staff-payslip-card { border-color:#3b4047; background:#202328; }
html[data-theme="dark"] .staff-payslip-totals,
html[data-theme="dark"] .staff-payslip-totals p { border-color:#3b4047; }
html[data-theme="dark"] .staff-payslip-totals .net { background:#33261a; }
html[data-theme="dark"] .digital-payslip-document-header,
html[data-theme="dark"] .digital-payslip-footer { border-color:#3b4047; }
html[data-theme="dark"] .digital-payslip-summary > section,
html[data-theme="dark"] .digital-payslip-money-grid > section,
html[data-theme="dark"] .digital-payslip-attendance { border-color:#3b4047; background:#202328; }
html[data-theme="dark"] .digital-payslip-summary > section > p,
html[data-theme="dark"] .digital-payslip-summary dl > div,
html[data-theme="dark"] .digital-payslip-section-title,
html[data-theme="dark"] .digital-payslip-money-list > div,
html[data-theme="dark"] .digital-payslip-attendance > div:last-child p { border-color:#3b4047; }
html[data-theme="dark"] .digital-payslip-money-list .total { background:#33261a; }
html[data-theme="dark"] .digital-payslip-summary dt,
html[data-theme="dark"] .digital-payslip-money-list dt,
html[data-theme="dark"] .digital-payslip-attendance small,
html[data-theme="dark"] .digital-payslip-footer { color:#a8a29e; }
html[data-theme="dark"] .digital-payslip-footer strong { color:#e7e5e4; }
html[data-theme="dark"] .staff-payslip-notice small,
html[data-theme="dark"] .staff-payslip-card-main p,
html[data-theme="dark"] .staff-payslip-release span,
html[data-theme="dark"] .staff-payslip-identity em { color:#a8a29e; }
html[data-theme="dark"] .staff-payslip-icon { background:#3a291b; color:#fdba74; }
html[data-theme="dark"] .staff-roster-copy span { color:#d6d3d1; }
html[data-theme="dark"] .staff-roster-copy small,
html[data-theme="dark"] .staff-roster-footer { color:#9299a3; }
html[data-theme="dark"] .staff-roster-footer a { color:#fdba74; }
html[data-theme="dark"] .app-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="dark"] .app-page select,
html[data-theme="dark"] .app-page textarea { border-color:#3b4047; background:#13161a; color:#f5f5f4; }
html[data-theme="dark"] .app-page input::placeholder,
html[data-theme="dark"] .app-page textarea::placeholder { color:#737a83; }
html[data-theme="dark"] .app-page input:focus,
html[data-theme="dark"] .app-page select:focus,
html[data-theme="dark"] .app-page textarea:focus { border-color:#d97706; background:#181b20; outline-color:#5a3a20; }
html[data-theme="dark"] .employee-clearance-card,
html[data-theme="dark"] .employee-clearance-status-grid > div { border-color:#3b4047; background:#202328; }
html[data-theme="dark"] .employee-clearance-card:has(input[type="checkbox"]:checked),
html[data-theme="dark"] .employee-clearance-status-grid .verified { border-color:#315f43; background:#1b2b22; }
html[data-theme="dark"] .employee-clearance-card strong { color:#f5f5f4; }
html[data-theme="dark"] .employee-clearance-card small,
html[data-theme="dark"] .employee-clearance-status-grid span { color:#a8a29e; }
html[data-theme="dark"] .context-bar label > span,
html[data-theme="dark"] .settings-form label > span,
html[data-theme="dark"] .field-grid label > span,
html[data-theme="dark"] .notes-field > span,
html[data-theme="dark"] .decision-grid label > span,
html[data-theme="dark"] .closing-form .field-label-row label,
html[data-theme="dark"] .inventory-form .field-label-row label,
html[data-theme="dark"] .payroll-money-grid label > span,
html[data-theme="dark"] .admin-geofence-fields > label { color:#c0bbb5; }
html[data-theme="dark"] .secondary-button { border-color:#444950; background:#202328; color:#eceae7; }
html[data-theme="dark"] .inventory-custom-category { border-color:#7c4a1e; background:#2b2118; }
html[data-theme="dark"] .inventory-custom-category label { color:#fdba74; }
html[data-theme="dark"] .inventory-category-manager-list > article { border-color:#3f444b; background:#202328; }
html[data-theme="dark"] .category-remove-locked button { border-color:#444950; background:#292d33; color:#747b85; }
html[data-theme="dark"] .category-remove-button { border-color:#7f1d1d; background:#321b1e; color:#fca5a5; }
html[data-theme="dark"] .secondary-button:hover,
html[data-theme="dark"] .secondary-button:focus-visible { border-color:#6b717a; background:#292d33; outline-color:#3b4047; }
html[data-theme="dark"] .filter-button,
html[data-theme="dark"] .primary-button { background:#d97706; color:#fff; }
html[data-theme="dark"] .filter-button:hover,
html[data-theme="dark"] .primary-button:hover { background:#b85f08; }
html[data-theme="dark"] .source-callout { border-color:#34383e; background:#181b1f; }
html[data-theme="dark"] .source-callout small,
html[data-theme="dark"] .mini-zero-state small,
html[data-theme="dark"] .zero-state p,
html[data-theme="dark"] .record-meta dt,
html[data-theme="dark"] .amount-list dt { color:#a8a29e; }
html[data-theme="dark"] .callout,
html[data-theme="dark"] .formula-card,
html[data-theme="dark"] .warning-callout,
html[data-theme="dark"] .payroll-estimate-note,
html[data-theme="dark"] .payroll-attendance-policy { border-color:#68451f; background:#2a2119; color:#fdba74; }
html[data-theme="dark"] .callout span,
html[data-theme="dark"] .formula-card code,
html[data-theme="dark"] .payroll-estimate-note small { color:#d6c4b2; }
html[data-theme="dark"] .payroll-attendance-policy small,
html[data-theme="dark"] .payroll-attendance-loader small { color:#c7b9aa; }
html[data-theme="dark"] .required-note,
html[data-theme="dark"] .manual-badge,
html[data-theme="dark"] .ready-pill,
html[data-theme="dark"] .source-badge,
html[data-theme="dark"] .admin-lock-badge,
html[data-theme="dark"] .admin-protected-badge { border-color:#68451f; background:#3a291b; color:#fdba74; }
html[data-theme="dark"] .metric-info { border-color:#454a51; background:#24282d; color:#c4c0bb; }
html[data-theme="dark"] .metric-info:hover,
html[data-theme="dark"] .metric-info:focus-visible { border-color:#c76d12; background:#33261a; color:#fdba74; box-shadow:0 0 0 3px #5a3a20; }
html[data-theme="dark"] .metric-info-tooltip { border-color:#4b5058; background:#070809; color:#f5f5f4; box-shadow:0 12px 30px #000b; }
html[data-theme="dark"] .empty-chart { border-color:#3b4047; background:linear-gradient(180deg,#1a1d21,#15181c); }
html[data-theme="dark"] .empty-list { border-color:#3b4047; }
html[data-theme="dark"] .chart-lines i,
html[data-theme="dark"] .trend-grid-lines i { border-color:#34383e; }
html[data-theme="dark"] .trend-summary > div,
html[data-theme="dark"] .setup-grid > div,
html[data-theme="dark"] .sales-checks .gap-row,
html[data-theme="dark"] .inventory-stock-stats > div,
html[data-theme="dark"] .grabfood-payout-stats > div,
html[data-theme="dark"] .grabfood-calculation > div,
html[data-theme="dark"] .payroll-estimate-summary dl > div,
html[data-theme="dark"] .payroll-hero-stats > div,
html[data-theme="dark"] .report-comparison,
html[data-theme="dark"] .report-gap-row,
html[data-theme="dark"] .report-basis-grid > div,
html[data-theme="dark"] .admin-branch-stats > div,
html[data-theme="dark"] .admin-role-summary,
html[data-theme="dark"] .staff-shift-summary > div { border-color:#34383e; background:#202328; }
html[data-theme="dark"] .dashboard-queue-item { border-color:#34383e; }
html[data-theme="dark"] .dashboard-queue-item:hover,
html[data-theme="dark"] .dashboard-queue-item:focus-visible { border-color:#8a5a2b; background:#282018; }
html[data-theme="dark"] .data-table th { background:#15181c; color:#aaa49e; }
html[data-theme="dark"] .data-table td { border-color:#30343a; color:#e7e5e4; }
html[data-theme="dark"] .data-table tr:hover td,
html[data-theme="dark"] .approval-queue-row:hover { background:#22262b; }
html[data-theme="dark"] .cafelino-pagination { border-color:#30343a; background:#1a1d21; }
html[data-theme="dark"] .pagination-summary,
html[data-theme="dark"] .pagination-link,
html[data-theme="dark"] .pagination-ellipsis { color:#b8b4af; }
html[data-theme="dark"] .pagination-summary strong { color:#f5f5f4; }
html[data-theme="dark"] .pagination-link { border-color:#3b4047; background:#202328; }
html[data-theme="dark"] .pagination-link:hover,
html[data-theme="dark"] .pagination-link:focus-visible { border-color:#a96525; background:#33261a; color:#fdba74; outline-color:#5a3a20; }
html[data-theme="dark"] .pagination-link.active { border-color:#d97706; background:#d97706; color:#fff; }
html[data-theme="dark"] .pagination-link.disabled { border-color:#30343a; background:#17191d; color:#676d75; }
html[data-theme="dark"] .ledger-heading,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .record-meta dl div,
html[data-theme="dark"] .amount-list div,
html[data-theme="dark"] .sales-checks > div,
html[data-theme="dark"] .inventory-movement-list li,
html[data-theme="dark"] .purchasing-pipeline > div,
html[data-theme="dark"] .purchase-preview > div,
html[data-theme="dark"] .purchase-total-breakdown > div,
html[data-theme="dark"] .grabfood-pipeline > div,
html[data-theme="dark"] .grabfood-preview > div,
html[data-theme="dark"] .people-activity-list li,
html[data-theme="dark"] .payroll-pipeline > div,
html[data-theme="dark"] .payroll-preview > div,
html[data-theme="dark"] .report-coverage-list > div,
html[data-theme="dark"] .report-mix-row,
html[data-theme="dark"] .report-stat-list > div,
html[data-theme="dark"] .approval-queue-row,
html[data-theme="dark"] .approval-source-list a,
html[data-theme="dark"] .approval-history-list li,
html[data-theme="dark"] .admin-control-list a,
html[data-theme="dark"] .admin-recent-list li,
html[data-theme="dark"] .audit-row,
html[data-theme="dark"] .staff-identity,
html[data-theme="dark"] .staff-clock-rules li { border-color:#30343a; }
html[data-theme="dark"] .amount-list .total-row { background:#24282d; }
html[data-theme="dark"] .amount-list .total-row dt,
html[data-theme="dark"] .amount-list .total-row dd,
html[data-theme="dark"] .sales-checks dd,
html[data-theme="dark"] .payroll-pipeline dt a,
html[data-theme="dark"] .approval-source-list a,
html[data-theme="dark"] .admin-control-list a { color:#f5f5f4; }
html[data-theme="dark"] .purchase-line-row,
html[data-theme="dark"] .payroll-line-card,
html[data-theme="dark"] .staff-proof-step,
html[data-theme="dark"] .admin-toggle,
html[data-theme="dark"] .admin-check-card { border-color:#3b4047; background:#171a1e; }
html[data-theme="dark"] .payroll-line-card > header { background:#202328; }
html[data-theme="dark"] .payroll-attendance-card { border-color:#34383e; background:#1b1e22; }
html[data-theme="dark"] .payroll-attendance-stats > div,
html[data-theme="dark"] .payroll-adjustment-fields { border-color:#34383e; background:#202328; }
html[data-theme="dark"] .payroll-suggestion-grid > div,
html[data-theme="dark"] .payroll-manual-exception.required,
html[data-theme="dark"] .payroll-line-card.manually-adjusted .payroll-adjustment-fields { border-color:#68451f; background:#2a2119; }
html[data-theme="dark"] .payroll-attendance-message { background:#173526; color:#bbf7d0; }
html[data-theme="dark"] .payroll-attendance-message.not_loaded,
html[data-theme="dark"] .payroll-attendance-message.ineligible { background:#24282d; color:#c4c0bb; }
html[data-theme="dark"] .payroll-attendance-message.no_attendance,
html[data-theme="dark"] .payroll-attendance-message.zero_regular_time { background:#3a291b; color:#fdba74; }
html[data-theme="dark"] .payroll-attendance-message.open_shift { background:#3a2023; color:#fca5a5; }
html[data-theme="dark"] .payroll-line-card.selected,
html[data-theme="dark"] .payroll-line-card.selected > header,
html[data-theme="dark"] .admin-check-card:has(input:checked) { border-color:#a96525; background:#2a2119; box-shadow:0 0 0 2px #5a3a20; }
html[data-theme="dark"] .admin-toggle > span { color:#f5f5f4!important; }
html[data-theme="dark"] .payroll-estimate-total { background:#0c0e10; }
html[data-theme="dark"] .payroll-estimate-label .metric-info { border-color:#4b5058; background:#202328; color:#d6d3d1; }
html[data-theme="dark"] .status-badge.draft,
html[data-theme="dark"] .status-badge.inactive { background:#29313a; color:#cbd5e1; }
html[data-theme="dark"] .status-badge.submitted,
html[data-theme="dark"] .attendance-mark.unpaid_leave,
html[data-theme="dark"] .attendance-status.unpaid_leave { background:#3a291b; color:#fdba74; }
html[data-theme="dark"] .status-badge.approved,
html[data-theme="dark"] .status-badge.active,
html[data-theme="dark"] .status-badge.received,
html[data-theme="dark"] .attendance-mark.present,
html[data-theme="dark"] .attendance-status.present { background:#173526; color:#86efac; }
html[data-theme="dark"] .status-badge.returned,
html[data-theme="dark"] .attendance-mark.absent,
html[data-theme="dark"] .attendance-status.absent { background:#3a2023; color:#fca5a5; }
html[data-theme="dark"] .flash-message { border-color:#245c3d; background:#173526; color:#bbf7d0; }
html[data-theme="dark"] .validation-summary,
html[data-theme="dark"] .return-callout { border-color:#7f3b3b; background:#321e21; color:#fecaca; }
html[data-theme="dark"] .permission-state > span,
html[data-theme="dark"] .zero-state > span,
html[data-theme="dark"] .mini-zero-state > span,
html[data-theme="dark"] .staff-clock-rules li > span { background:#3a291b; color:#fdba74; }
html[data-theme="dark"] .staff-location-state { border-color:#3b4047; background:#171a1e; }
html[data-theme="dark"] .staff-location-state.verified { border-color:#245c3d; background:#173526; }

@media (max-width:1180px) {
    .metric-grid { grid-template-columns:repeat(3,1fr); }
    .staff-roster-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .sales-metric-grid { grid-template-columns:repeat(3,1fr); }
    .sales-columns { grid-template-columns:1fr; }
    .expense-metric-grid { grid-template-columns:repeat(3,1fr); }
    .expense-columns { grid-template-columns:1fr; }
    .inventory-metric-grid { grid-template-columns:repeat(3,1fr); }
    .grabfood-metric-grid { grid-template-columns:repeat(3,1fr); }
    .people-metric-grid, .attendance-metric-grid { grid-template-columns:repeat(3,1fr); }
    .approvals-metric-grid { grid-template-columns:repeat(3,1fr); }
    .approvals-layout { grid-template-columns:1fr; }
    .approval-side-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .admin-metric-grid, .admin-user-metric-grid, .admin-branch-metric-grid, .admin-audit-metric-grid { grid-template-columns:repeat(3,1fr); }
    .admin-dashboard-grid { grid-template-columns:1fr; }
    .admin-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .staff-attendance-grid { grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); }
    .staff-payslip-card { grid-template-columns:minmax(0,1fr) auto; }
    .staff-payslip-card-main { grid-column:1/-1; }
    .staff-payslip-actions { grid-column:1/-1; }
    .payroll-attendance-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .payroll-line-body { grid-template-columns:1fr; }
    .setup-grid { grid-template-columns:repeat(2,1fr); }
}

/* POS daily-closing import boundary */
.pos-closing-import-callout{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.pos-closing-import-callout h2{margin:3px 0 6px}.pos-closing-import-callout p{margin:0;max-width:820px}.pos-closing-import-callout .primary-button{flex:0 0 auto}.pos-closing-review-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:18px}.pos-import-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}.pos-import-metrics>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px;border:1px solid #deddd9;border-radius:12px;background:#faf8f5}.pos-import-metrics span{color:var(--muted);font-size:.9rem}.pos-import-metrics strong{white-space:nowrap}.pos-preserved-fields{display:grid;gap:9px;margin:14px 0 20px;padding-left:20px;color:var(--muted)}.wide-button{width:100%;justify-content:center}html[data-theme="dark"] .pos-import-metrics>div{border-color:#3b4047;background:#202328}@media(max-width:850px){.pos-closing-review-grid{grid-template-columns:1fr}.pos-closing-import-callout{align-items:flex-start;flex-direction:column}.pos-import-metrics{grid-template-columns:1fr}}
.closing-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1040px}.closing-source-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;min-height:260px;padding:26px;border:1px solid #deddd9;border-radius:18px;background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:0 14px 38px rgba(54,42,30,.07);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.closing-source-card:hover,.closing-source-card:focus-visible{transform:translateY(-3px);border-color:var(--brand);box-shadow:0 18px 46px rgba(145,76,20,.14);outline:0}.closing-source-card.pos{background:linear-gradient(145deg,#fff8f0,#fff)}.closing-source-card.manual{background:linear-gradient(145deg,#f8f7f5,#fff)}.closing-source-card.unavailable{opacity:.66;cursor:not-allowed}.closing-source-card.unavailable:hover{transform:none;border-color:#deddd9;box-shadow:0 14px 38px rgba(54,42,30,.07)}.closing-source-icon{display:grid;width:54px;height:54px;place-items:center;border-radius:14px;background:var(--brand);color:#fff;font-size:25px;font-weight:850}.closing-source-card.manual .closing-source-icon{background:#272522}.closing-source-card small,.closing-source-card strong,.closing-source-card p{display:block}.closing-source-card small{margin-bottom:7px;color:var(--brand-dark);font-size:.72rem;font-weight:850;letter-spacing:.13em}.closing-source-card strong{font-size:1.35rem}.closing-source-card p{margin:10px 0 0;color:var(--muted);line-height:1.55}.closing-source-card>b{grid-column:1/-1;align-self:end;color:var(--brand-dark)}.pos-create-source-actions{display:grid;justify-items:end;gap:10px;flex:0 0 auto}.pos-create-source-actions .secondary-button{white-space:nowrap}html[data-theme="dark"] .closing-source-card.pos,html[data-theme="dark"] .closing-source-card.manual{border-color:#3b4047;background:#202328}@media(max-width:760px){.closing-source-grid{grid-template-columns:1fr}.closing-source-card{min-height:220px;padding:20px}.pos-create-source-actions{justify-items:start}}
@media (max-width:820px) {
    .sidebar { transform:translateX(-100%); transition:transform .2s ease; }
    .sidebar-open .sidebar { transform:translateX(0); }
    .sidebar-open .sidebar-scrim { position:fixed; inset:0; z-index:25; display:block; background:#0008; }
    .sidebar-close, .menu-button { display:block; }
    .main-area { margin-left:0; }
    .topbar { height:66px; padding:0 1rem; }
    .topbar-title, .topbar-title > div { min-width:0; }
    .topbar-title strong { display:block; overflow:hidden; max-width:calc(100vw - 155px); text-overflow:ellipsis; white-space:nowrap; }
    .page-content { padding:1.25rem; }
    .dashboard-columns, .form-columns { grid-template-columns:1fr; }
    .staff-roster-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .profile-chip div, .profile-chip i, .logout-button strong { display:none; }
    .theme-toggle { width:39px; padding:0; }
    .theme-toggle strong { display:none; }
    .topbar-actions { gap:.45rem; }
    .logout-button { width:39px; padding:0; }
    .closing-form-grid, .review-grid { grid-template-columns:1fr; }
    .expense-form-grid { grid-template-columns:1fr; }
    .inventory-columns, .inventory-form-grid, .inventory-review-grid, .movement-page-grid { grid-template-columns:1fr; }
    .field-grid.four-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .purchasing-columns, .purchasing-form-grid, .purchase-review-grid { grid-template-columns:1fr; }
    .grabfood-columns, .grabfood-form-grid, .grabfood-review-grid, .grabfood-notes-grid { grid-template-columns:1fr; }
    .people-columns, .people-form-grid, .attendance-form-grid, .employee-review-grid, .payroll-form-grid, .payroll-review-grid { grid-template-columns:1fr; }
    .payroll-estimate-summary { grid-template-columns:1fr; }
    .reports-insight-grid, .reports-mix-grid, .reports-operations-grid { grid-template-columns:1fr; }
    .approval-side-stack { grid-template-columns:1fr 1fr; }
    .admin-form-grid, .role-form-grid { grid-template-columns:1fr; }
    .admin-branch-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .audit-row { grid-template-columns:10px minmax(180px,1fr) minmax(110px,.5fr) auto; }
    .audit-row > div:nth-of-type(3) { display:none; }
    .report-basis-grid { grid-template-columns:1fr 1fr; }
    .payroll-line-body { grid-template-columns:1fr; }
    .payroll-release-form { grid-template-columns:1fr 1fr; align-items:stretch; }
    .grabfood-calculation { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .purchase-receive-form { grid-template-columns:1fr; align-items:stretch; }
    .field-grid.three-columns { grid-template-columns:1fr 1fr; }
    .metric-grid-wide { grid-template-columns:repeat(2,1fr); }
    .staff-attendance-grid { grid-template-columns:1fr; }
    .staff-clock-panel { min-height:400px; }
    .staff-payslip-card { grid-template-columns:minmax(0,1fr) auto; }
    .staff-payslip-card-main { grid-column:1/-1; }
    .staff-payslip-actions { grid-column:1/-1; }
    .attendance-proof-review { grid-template-columns:1fr; }
}
@media (max-width:620px) {
    .page-heading { display:block; }
    .heading-actions { justify-content:stretch; margin-top:1rem; }
    .heading-actions > * { flex:1 1 100%; width:100%; }
    .profile-photo-content { grid-template-columns:1fr; justify-items:center; }
    .profile-photo-controls { width:100%; }
    .profile-photo-form, .profile-photo-picker, .profile-photo-form .primary-button, .profile-photo-remove-form, .profile-photo-remove-form .secondary-button { width:100%; }
    .business-logo-content { grid-template-columns:1fr; justify-items:center; }
    .business-logo-controls { width:100%; }
    .business-logo-form, .business-logo-picker, .business-logo-form .primary-button, .business-logo-remove-form, .business-logo-remove-form .secondary-button { width:100%; }
    .live-badge { width:max-content; margin-top:1rem; }
    .context-bar { align-items:stretch; flex-direction:column; }
    .trend-summary { grid-template-columns:1fr; }
    .trend-chart { height:190px; }
    .context-bar select { width:100%; }
    .inventory-search { flex:none; width:100%; }
    .purchasing-search { flex:none; width:100%; }
    .grabfood-search { flex:none; width:100%; }
    .people-search { flex:none; width:100%; }
    .payroll-estimate-summary dl { grid-template-columns:1fr 1fr; }
    .reports-context-bar { align-items:stretch; flex-direction:column; }
    .approvals-context-bar { align-items:stretch; flex-direction:column; }
    .approval-search { flex:none; width:100%; }
    .admin-search { flex:none; width:100%; }
    .date-pair { display:grid; grid-template-columns:1fr 1fr; }
    .metric-grid { grid-template-columns:repeat(2,1fr); }
    .staff-roster-grid { grid-template-columns:1fr; }
    .staff-roster-footer, .staff-roster-empty { align-items:stretch; flex-direction:column; }
    .staff-roster-empty > div { margin-right:0; }
    .staff-roster-empty .secondary-button { width:100%; }
    .setup-grid { grid-template-columns:1fr; }
    .section-heading > span { display:none; }
    .field-grid.two-columns, .field-grid.three-columns { grid-template-columns:1fr; }
    .field-grid.four-columns { grid-template-columns:1fr; }
    .hero-metrics, .confirmation-summary { grid-template-columns:1fr; }
    .decision-grid { grid-template-columns:1fr; }
    .review-actions, .form-actions, .confirmation-actions { align-items:stretch; flex-direction:column-reverse; }
    .review-actions > *, .form-actions > *, .confirmation-actions > * { width:100%; }
    .confirmation-actions form button { width:100%; }
    .next-step { align-items:stretch; flex-direction:column; }
    .page-heading.compact > .primary-button, .page-heading.compact > .secondary-button { width:100%; margin-top:1rem; }
    .source-badge { margin-top:1rem; }
    .source-callout { align-items:flex-start; }
    .channel-row { grid-template-columns:minmax(100px,.8fr) 1.2fr; gap:.7rem; }
    .channel-row > p { grid-column:1/-1; grid-row:2; display:flex; justify-content:space-between; }
    .expense-category-row { grid-template-columns:minmax(115px,.85fr) 1.15fr; gap:.7rem; }
    .expense-category-row > strong { grid-column:1/-1; text-align:left; }
    .inventory-category-row { grid-template-columns:minmax(0,.75fr) minmax(70px,1.25fr); }
    .inventory-category-row > p { width:100%; min-width:0; grid-column:1/-1; display:flex; justify-content:space-between; }
    .inventory-stock-stats { grid-template-columns:1fr; }
    .inventory-warning { align-items:flex-start; flex-direction:column; }
    .stock-deduction-table thead { display:none; }
    .stock-deduction-table, .stock-deduction-table tbody, .stock-deduction-table tr, .stock-deduction-table td { display:block; width:100%; }
    .stock-deduction-table tr { padding:.65rem .8rem; border-top:1px solid #eceae7; }
    .stock-deduction-table td, .stock-deduction-table td:first-child { display:grid; grid-template-columns:minmax(105px,.75fr) minmax(0,1.25fr); gap:.2rem .65rem; padding:.38rem 0; border:0; white-space:normal; }
    .stock-deduction-table td::before { content:attr(data-label); grid-column:1; grid-row:1 / span 2; align-self:center; color:#8a8580; font-size:.56rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
    .stock-deduction-table td > * { grid-column:2; }
    .deduction-quantity-input { width:100%; max-width:220px; }
    .purchasing-supplier-row { grid-template-columns:minmax(115px,.8fr) 1.2fr; }
    .purchasing-supplier-row > strong { grid-column:1/-1; text-align:left; }
    .grabfood-deduction-row { grid-template-columns:minmax(115px,.8fr) 1.2fr; }
    .grabfood-deduction-row > strong { grid-column:1/-1; text-align:left; }
    .grabfood-payout-stats, .grabfood-calculation { grid-template-columns:1fr; }
    .payroll-money-grid { grid-template-columns:1fr 1fr; }
    .payroll-attendance-loader .secondary-button { width:100%; }
    .payroll-attendance-card-heading { align-items:flex-start; flex-direction:column; }
    .payroll-attendance-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .payroll-suggestion-grid { grid-template-columns:1fr; }
    .payroll-line-card > header { grid-template-columns:auto minmax(0,1fr); }
    .payroll-line-card header > b { grid-column:1/-1; text-align:right; }
    .payroll-hero-stats, .payroll-release-form { grid-template-columns:1fr; }
    .report-comparison { grid-template-columns:1fr auto; }
    .report-comparison b { grid-column:1/-1; justify-self:start; }
    .report-mix-row { grid-template-columns:minmax(100px,1fr) auto; }
    .report-mix-row .channel-track { grid-column:1/-1; grid-row:2; }
    .report-basis-grid { grid-template-columns:1fr; }
    .approval-queue-row { grid-template-columns:38px minmax(0,1fr); gap:.65rem; padding:1rem; }
    .approval-record-copy, .approval-submission-copy, .approval-amount, .approval-age, .approval-review-link { grid-column:2; }
    .approval-submission-copy { margin-top:.2rem; }
    .approval-amount { justify-items:start; }
    .approval-age { justify-self:start; }
    .approval-review-link { width:100%; margin-top:.2rem; }
    .approval-side-stack { grid-template-columns:1fr; }
    .approval-history-list li { grid-template-columns:10px minmax(0,1fr); }
    .approval-history-list li > b { grid-column:2; justify-self:start; }
    .admin-lock-badge, .admin-protected-badge { margin-top:1rem; }
    .admin-tabs { margin-top:-.4rem; }
    .admin-role-grid { grid-template-columns:1fr; }
    .admin-branch-picker, .permission-groups fieldset > div { grid-template-columns:1fr; }
    .admin-role-card > .secondary-button { width:100%; }
    .audit-row { grid-template-columns:10px minmax(0,1fr); align-items:start; padding:1rem; }
    .audit-main, .audit-row > div:not(.audit-main), .audit-row time { grid-column:2; }
    .audit-row > div:nth-of-type(3) { display:grid; }
    .audit-row time { margin-top:.15rem; }
    .cafelino-pagination { align-items:stretch; flex-direction:column; }
    .pagination-summary { order:2; text-align:center; }
    .pagination-links { flex-wrap:wrap; justify-content:center; }
    .purchase-line-head { display:none; }
    .purchase-line-row { position:relative; grid-template-columns:1fr 1fr; padding:1rem; }
    .purchase-line-row > label:first-child { grid-column:1/-1; }
    .purchase-line-row > strong { align-self:end; min-height:40px; display:flex; align-items:center; justify-content:flex-end; padding-right:2.5rem; }
    .purchase-line-row .line-remove { position:absolute; right:1rem; bottom:1rem; }
    .mobile-field-label { position:static; width:auto; height:auto; overflow:visible; margin:0; clip:auto; white-space:normal; color:#57534e; font-size:.58rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .staff-live-time { justify-items:start; width:100%; margin-top:1rem; }
    .staff-payslip-identity { width:100%; min-width:0; margin-top:1rem; }
    .staff-payslip-cards { padding:.7rem; }
    .staff-payslip-card { grid-template-columns:1fr; align-items:start; gap:.7rem; }
    .staff-payslip-card-main, .staff-payslip-actions { grid-column:1; }
    .staff-payslip-release, .staff-payslip-totals { margin-left:47px; }
    .staff-payslip-totals { grid-template-columns:1fr; width:calc(100% - 47px); }
    .staff-payslip-totals p { border-right:0; border-bottom:1px solid #efedea; }
    .staff-payslip-actions { width:100%; }
    .digital-payslip-summary, .digital-payslip-money-grid { grid-template-columns:1fr; padding-right:.8rem; padding-left:.8rem; }
    .digital-payslip-attendance, .digital-payslip-net, .digital-payslip-footer { margin-right:.8rem; margin-left:.8rem; }
    .digital-payslip-attendance > div:last-child { grid-template-columns:1fr 1fr; }
    .digital-payslip-attendance > div:last-child p { border-right:0; border-bottom:1px solid #efedea; }
    .digital-payslip-attendance > div:last-child p:last-child { grid-column:1/-1; border-bottom:0; }
    .digital-payslip-net { align-items:flex-start; flex-direction:column; }
    .digital-payslip-net > strong { font-size:1.45rem; }
    .staff-clock-panel { min-height:0; }
    .staff-clock-time strong { font-size:1.8rem; }
    .staff-shift-summary { grid-template-columns:1fr; }
    .staff-proof-grid, .admin-geofence-fields { grid-template-columns:1fr; }
    .staff-camera-frame, .staff-camera-frame video, .staff-camera-frame img { min-height:210px; height:210px; }
    .admin-geofence-actions { align-items:stretch; flex-direction:column; }
    .admin-geofence-actions > * { width:100%; }
}

/* System-wide typography: regular interface copy, bold headings only. */
:where(.app-page, .auth-page) { font-weight:400; }
:where(.app-page, .auth-page) :where(p, span, small, a, button, input, select, textarea, label, dt, dd, td, li, strong, b, code) { font-weight:400!important; }
:where(.app-page, .auth-page) :where(h1, h2, h3, h4, h5, h6, th, legend, summary),
:where(.app-page, .auth-page) :where(h1, h2, h3, h4, h5, h6, th, legend, summary) :where(span, strong, b, small) { font-weight:700!important; }
.app-page .sidebar-brand strong,
.app-page .topbar-title strong,
.app-page .main-nav > p,
.app-page .page-kicker,
.app-page .panel-heading p,
.app-page .ledger-heading p,
.app-page .section-heading p,
.app-page .cpos-ticket-head > span > strong,
.app-page .cpos-checkout-ticket-head > strong,
.auth-page .eyebrow { font-weight:700!important; }