/* Elena's Beauty Hall — web Palette lifted from the Android app so staff moving between the two do not feel they are in a different product. */ /* Every colour is a token, so the dark theme is this block and nothing else. The choice lives on the device (localStorage "bh-theme": light / dark / system) and is put on before the first paint by the inline script in App.razor; "system" follows the phone. Android's SettingsPage has the same switch. */ :root, :root[data-theme="light"] { --bh-purple: #5B21E8; /* header / primary actions */ --bh-purple-deep: #4415B5; --bh-accent: #5B21E8; /* purple as text: links, the active menu item, the default price */ --bh-brand: #4415B5; /* the drawer's brand line */ --bh-purple-soft: #EDE7FB; /* tile + chip backgrounds */ --bh-bg: #F8F5FF; /* page ground */ --bh-surface: #FFFFFF; --bh-surface-2: #F1EFF6; /* a step below the surface: search boxes, off badges */ --bh-ink: #1C1B1F; --bh-ink-muted: #5F5C66; --bh-ink-faint: #A5A1AE; --bh-on-primary: #FFFFFF; /* text on purple */ --bh-border: #E0DAF0; --bh-danger: #B3261E; --bh-danger-soft: #FCE8E6; --bh-ok: #1B5E20; --bh-ok-soft: #E3F6E5; --bh-warn-soft: #FFF4D6; --bh-warn-ink: #6B4E00; --bh-vip: #FFC93C; --bh-vip-ink: #4A3A00; --bh-shadow: rgba(28, 27, 31, .09); --bh-focus: rgba(91, 33, 232, .15); --bh-scrim: rgba(0, 0, 0, .42); --bh-tooltip: rgba(60, 60, 67, .94); --bh-shimmer-a: #EFEBF7; --bh-shimmer-b: #E3DCF3; --bh-radius: 14px; color-scheme: light; } :root[data-theme="dark"] { --bh-purple: #5B21E8; --bh-purple-deep: #3A1494; --bh-accent: #C4B1FF; --bh-brand: #FFFFFF; --bh-purple-soft: #2E2650; --bh-bg: #121214; --bh-surface: #1F1E24; --bh-surface-2: #2A2930; --bh-ink: #ECEAF2; --bh-ink-muted: #B4B0BF; --bh-ink-faint: #6F6B7A; --bh-on-primary: #FFFFFF; --bh-border: #3A3745; --bh-danger: #FF6B60; --bh-danger-soft: #3B1F1F; --bh-ok: #7ED492; --bh-ok-soft: #1E3A24; --bh-warn-soft: #3D3320; --bh-warn-ink: #FFD98A; --bh-vip: #FFC93C; --bh-vip-ink: #4A3A00; --bh-shadow: rgba(0, 0, 0, .5); --bh-focus: rgba(124, 77, 255, .35); --bh-scrim: rgba(0, 0, 0, .6); --bh-tooltip: rgba(40, 40, 46, .96); --bh-shimmer-a: #2A2930; --bh-shimmer-b: #35333D; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bh-purple: #5B21E8; --bh-purple-deep: #3A1494; --bh-accent: #C4B1FF; --bh-brand: #FFFFFF; --bh-purple-soft: #2E2650; --bh-bg: #121214; --bh-surface: #1F1E24; --bh-surface-2: #2A2930; --bh-ink: #ECEAF2; --bh-ink-muted: #B4B0BF; --bh-ink-faint: #6F6B7A; --bh-on-primary: #FFFFFF; --bh-border: #3A3745; --bh-danger: #FF6B60; --bh-danger-soft: #3B1F1F; --bh-ok: #7ED492; --bh-ok-soft: #1E3A24; --bh-warn-soft: #3D3320; --bh-warn-ink: #FFD98A; --bh-vip: #FFC93C; --bh-vip-ink: #4A3A00; --bh-shadow: rgba(0, 0, 0, .5); --bh-focus: rgba(124, 77, 255, .35); --bh-scrim: rgba(0, 0, 0, .6); --bh-tooltip: rgba(40, 40, 46, .96); --bh-shimmer-a: #2A2930; --bh-shimmer-b: #35333D; color-scheme: dark; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bh-bg); color: var(--bh-ink); font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; -webkit-text-size-adjust: 100%; } h1, h2, h3 { margin: 0; font-weight: 700; } a { color: inherit; text-decoration: none; } /* ── App shell ─────────────────────────────────────────────────────────── */ .app-shell { min-height: 100dvh; display: flex; flex-direction: column; } .app-header { background: var(--bh-purple); color: var(--bh-on-primary); padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 10; } .header-home { font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; } .header-right { display: flex; align-items: center; gap: .9rem; font-size: .9rem; } .header-user { opacity: .85; } .header-logout { text-decoration: underline; } .app-main { flex: 1; } .page-pad { padding: 1.25rem 1rem 2rem; max-width: 900px; margin: 0 auto; } .app-footer { text-align: center; color: var(--bh-ink-muted); font-size: .8rem; padding: 1rem 0 1.75rem; } .app-footer > span { display: block; } .app-footer-credit { margin-top: .2rem; font-size: .72rem; letter-spacing: .2px; } /* ── Home / dashboard ──────────────────────────────────────────────────── */ /* No top margin: that gap separated the greeting from the brand chip that used to sit above it. Without the chip it would only push the greeting below the top of the clock beside it. */ .greeting { font-size: 1.55rem; margin: 0 0 .35rem; } .clock { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; /* digits stop jittering each tick */ line-height: 1.1; } .today { color: var(--bh-ink-muted); margin-top: .15rem; } .rule { border: 0; border-top: 1px solid var(--bh-border); margin: 1.25rem 0; } .section-title { font-size: 1.05rem; margin-bottom: .85rem; } .tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; } @media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } } .tile { position: relative; background: var(--bh-purple-soft); border-radius: var(--bh-radius); min-height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: .9rem .5rem; text-align: center; transition: transform .08s ease, box-shadow .15s ease; } .tile:hover { box-shadow: 0 2px 10px var(--bh-focus); } .tile:active { transform: scale(.98); } .tile-icon { font-size: 1.7rem; line-height: 1; } .tile-label { font-weight: 700; font-size: .92rem; } .tile-pending { background: var(--bh-surface-2); color: var(--bh-ink-muted); cursor: not-allowed; } .tile-pending:hover { box-shadow: none; } .tile-badge { position: absolute; top: .45rem; right: .45rem; background: var(--bh-surface); border: 1px solid var(--bh-border); color: var(--bh-ink-muted); font-size: .65rem; padding: .1rem .4rem; border-radius: 999px; } /* ── Login ─────────────────────────────────────────────────────────────── */ .bare-layout { min-height: 100dvh; display: flex; } .login-shell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .login-card { background: var(--bh-surface); border-radius: 18px; padding: 2rem 1.5rem; width: 100%; max-width: 420px; box-shadow: 0 6px 26px var(--bh-shadow); text-align: center; } .brand-title { font-size: 1.35rem; letter-spacing: .3px; } .brand-subtitle { color: var(--bh-ink-muted); margin: .3rem 0 1.25rem; font-size: 1rem; } .brand-logo { width: 100%; max-width: 320px; border-radius: 10px; margin-bottom: 1.5rem; } .field { text-align: left; margin-bottom: 1rem; } .field label { display: block; font-size: .85rem; color: var(--bh-ink-muted); margin-bottom: .35rem; } .control { width: 100%; padding: .85rem .9rem; font-size: 1rem; /* 16px stops iOS Safari zooming on focus */ border: 1px solid var(--bh-border); border-radius: 10px; background: var(--bh-surface); color: var(--bh-ink); } .control:focus { outline: none; border-color: var(--bh-purple); box-shadow: 0 0 0 3px var(--bh-focus); } .field-error { color: var(--bh-danger); font-size: .8rem; display: block; margin-top: .3rem; } .alert-error { background: var(--bh-danger-soft); color: var(--bh-danger); border-radius: 10px; padding: .75rem .9rem; font-size: .9rem; margin-bottom: 1rem; text-align: left; } .btn-primary { width: 100%; background: var(--bh-purple); color: var(--bh-on-primary); border: 0; border-radius: 999px; padding: .95rem 1rem; font-size: 1rem; font-weight: 700; cursor: pointer; } .btn-primary:hover { background: var(--bh-purple-deep); } .btn-primary:active { transform: scale(.99); } /* Throttled: login.js disables the button and counts down inside its label. The hover and active rules are neutralised too, so the button stops pretending it can still be pressed. */ .btn-primary:disabled, .btn-primary:disabled:hover { background: var(--bh-purple); opacity: .45; cursor: not-allowed; } .btn-primary:disabled:active { transform: none; } /* ── Blazor framework bits ─────────────────────────────────────────────── */ .blazor-error-boundary { background: var(--bh-danger-soft); color: var(--bh-danger); padding: 1rem; border-radius: var(--bh-radius); margin: 1rem; } /* ── List pages (Πελάτες, and the list pages that follow) ──────────────── */ .list-head { background: var(--bh-surface); border-bottom: 1px solid var(--bh-border); padding: 1rem 1rem .75rem; position: sticky; top: 56px; /* sits directly under the app header */ z-index: 5; } .list-head-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; } .list-title { font-size: 1.45rem; } .list-count { color: var(--bh-ink-muted); font-size: 1.05rem; font-variant-numeric: tabular-nums; } .search { width: 100%; padding: .8rem 1rem; font-size: 1rem; /* 16px — stops iOS Safari zooming on focus */ border: 1px solid var(--bh-border); border-radius: 999px; background: var(--bh-surface); color: var(--bh-ink); } .search:focus { outline: none; border-color: var(--bh-purple); box-shadow: 0 0 0 3px var(--bh-focus); } .chips { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; border: 1px solid var(--bh-purple); background: var(--bh-surface); color: var(--bh-accent); border-radius: 999px; padding: .45rem .95rem; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .chip-on { background: var(--bh-purple); color: var(--bh-on-primary); } /* ── Client rows ───────────────────────────────────────────────────────── */ /* Room under the last row for the jump button (20px + 44px), so the last customer can be scrolled clear of it rather than sitting underneath. */ .client-list { padding-bottom: 5.5rem; } /* client-filter.js filters by setting the hidden attribute. A class that sets display — .client-main is flex, and any future rule on the row could be — would otherwise quietly beat the browser's own [hidden] { display: none }. */ .client-list[hidden], .client-row[hidden], .section-header[hidden], .empty[hidden] { display: none; } .section-header { padding: .85rem 1rem .3rem; color: var(--bh-accent); font-weight: 700; font-size: .95rem; } .client-row { padding: .7rem 1rem .85rem; border-bottom: 1px solid var(--bh-border); background: var(--bh-bg); } .client-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .client-name { font-weight: 700; font-size: 1rem; letter-spacing: .2px; } .badge { font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 6px; letter-spacing: .3px; } .badge-vip { background: var(--bh-vip); color: var(--bh-vip-ink); } .badge-new { background: var(--bh-ok-soft); color: var(--bh-ok); } .client-phone { font-weight: 600; font-size: .9rem; color: var(--bh-ink); margin-top: .15rem; } .client-sub { color: var(--bh-ink-muted); font-size: .82rem; margin-top: .2rem; } .client-sub .sep { margin: 0 .4rem; } /* ── Shared bits ───────────────────────────────────────────────────────── */ .muted { color: var(--bh-ink-muted); } .empty { text-align: center; padding-top: 3rem; } .empty-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; } /* ══════════════════════════════════════════════════════════════════════════ Navigation drawer / sidebar Mobile-first: the drawer is off-canvas and slides in. At >=1024px the same element becomes a permanent column and every drawer-specific rule is switched off. No JS measures the viewport; the breakpoint is the only source of truth. ══════════════════════════════════════════════════════════════════════════ */ .shell-body { display: flex; flex: 1; min-height: 0; position: relative; } .hamburger { background: transparent; border: 0; color: var(--bh-on-primary); font-size: 1.45rem; line-height: 1; padding: .15rem .35rem; margin-right: .25rem; cursor: pointer; user-select: none; } /* The checkbox is the drawer's state; it is never seen. */ .nav-toggle-input { display: none; } .app-header { gap: .6rem; } .app-header .header-home { flex: 1; } /* The title never wraps. On a 375px phone "Elena's Beauty Hall" needed 149px and was given 146, so it broke onto a second line and the header grew from 56px to 72px, taller than the drawer below assumes (top: 56px). */ .app-header .header-home { white-space: nowrap; } /* If something has to give way it is the username, with an ellipsis: never the title, and never the sign-out link. */ .header-right { min-width: 0; } .header-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-logout { flex: 0 0 auto; white-space: nowrap; } /* Phones. Measured at 375px the row was 3.6px too wide; at 360px, a width many Android phones report, about 18px. A smaller title alone would have fixed the first and not the second, so the gaps tighten as well. */ @media (max-width: 420px) { .app-header { gap: .5rem; } .app-header .header-home { font-size: .95rem; } .header-right { gap: .6rem; } } .drawer { position: fixed; top: 56px; /* below the header */ bottom: 0; left: 0; width: 82vw; max-width: 320px; background: var(--bh-surface); border-right: 1px solid var(--bh-border); overflow-y: auto; z-index: 30; transform: translateX(-100%); transition: transform .22s ease; -webkit-overflow-scrolling: touch; } #nav-toggle:checked ~ .app-shell .drawer { transform: translateX(0); } .scrim { position: fixed; inset: 56px 0 0 0; background: var(--bh-scrim); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 20; } #nav-toggle:checked ~ .app-shell .scrim { opacity: 1; pointer-events: auto; } .drawer-brand { font-size: .72rem; font-weight: 700; letter-spacing: .6px; color: var(--bh-brand); background: var(--bh-purple-soft); padding: .8rem 1.1rem; } .nav-list { padding: .4rem 0 2rem; } .nav-item { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.1rem; font-size: .96rem; color: var(--bh-ink); border-left: 3px solid transparent; } .nav-item:hover { background: var(--bh-purple-soft); } .nav-item.active { color: var(--bh-accent); font-weight: 700; border-left-color: var(--bh-purple); background: var(--bh-purple-soft); } .nav-icon { font-size: 1.15rem; width: 1.5rem; text-align: center; flex: 0 0 auto; } .nav-text { flex: 1; } .nav-item-pending { color: var(--bh-ink-faint); cursor: not-allowed; } .nav-item-pending:hover { background: transparent; } .nav-soon { font-size: .64rem; border: 1px solid var(--bh-border); border-radius: 999px; padding: .08rem .38rem; color: var(--bh-ink-muted); } .nav-sep { height: 1px; background: var(--bh-border); margin: .5rem 1.1rem; } .nav-item-logout { color: var(--bh-danger); } .nav-item-logout:hover { background: var(--bh-danger-soft); } .app-main { flex: 1; min-width: 0; } /* ── Desktop: pin the nav open ─────────────────────────────────────────── */ @media (min-width: 1024px) { .hamburger { display: none; } .drawer { position: sticky; top: 56px; height: calc(100dvh - 56px); transform: none; /* always visible */ transition: none; width: 260px; max-width: none; flex: 0 0 260px; z-index: 1; } /* The scrim only ever exists to dim content behind an overlay drawer. */ .scrim { display: none; } /* Header text sits above the pinned column, so keep the left padding aligned with the nav width for a single visual gutter. */ .app-main { padding-inline: .25rem; } } /* The sticky list header on list pages must clear the app header on mobile and, on desktop, sit at the same offset since the nav is beside it. */ @media (min-width: 1024px) { .list-head { top: 56px; } } /* ── Client detail ─────────────────────────────────────────────────────── */ /* Rows became links; keep them looking like rows, not blue text. */ a.client-row { display: block; color: inherit; } a.client-row:active { background: var(--bh-purple-soft); } .detail-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--bh-surface); border-bottom: 1px solid var(--bh-border); position: sticky; top: 56px; z-index: 5; } .detail-back { font-size: 1.4rem; line-height: 1; padding: .1rem .3rem; } .detail-bar-title { font-weight: 700; font-size: 1rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Edit and delete, top right of the bar: 40px targets, the pencil in the site's purple, the bin in the red that means "this cannot be undone". */ .detail-bar-tools { display: flex; gap: .25rem; flex: 0 0 auto; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--bh-accent); } .icon-btn:hover { background: var(--bh-purple-soft); } .icon-btn-danger { color: var(--bh-danger); } .icon-btn-danger:hover { background: var(--bh-danger-soft); } .btn-danger { background: var(--bh-danger); color: var(--bh-on-primary); border: 0; border-radius: 999px; padding: .8rem 1.6rem; font-size: 1rem; font-weight: 700; cursor: pointer; } .btn-danger:hover { filter: brightness(.92); } .badge-gender { background: var(--bh-purple-soft); color: var(--bh-accent); } /* ── Gender from history (one-off tool) ──────────────────────────────── */ .bf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: .88rem; border-bottom: 1px solid var(--bh-border); } .bf-row:last-child { border-bottom: 0; } .bf-row a { font-weight: 600; } .bf-row a:hover { text-decoration: underline; } .bf-note { color: var(--bh-ink-muted); font-size: .8rem; text-align: right; } .alert-ok { background: var(--bh-ok-soft); color: var(--bh-ok); border-radius: 10px; padding: .75rem .9rem; font-size: .9rem; margin-bottom: 1rem; } /* ── Customer statistics ─────────────────────────────────────────────── */ .stats-name { font-size: 1.3rem; margin: 0; } .stats-phone { margin: .15rem 0 .9rem; color: var(--bh-ink-muted); font-variant-numeric: tabular-nums; } .stats-range { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; } .stats-range .chip { text-decoration: none; } .stats-custom { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; font-size: .85rem; color: var(--bh-ink-muted); } .stats-custom input[type="date"] { margin-left: .3rem; padding: .4rem .55rem; border: 1px solid var(--bh-border); border-radius: 10px; font: inherit; color: var(--bh-ink); background: var(--bh-surface); } .stats-custom .btn-secondary { padding: .45rem .9rem; font-size: .85rem; } .stats-hero, .stats-card { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: 14px 16px; margin-bottom: 14px; } .stats-hero-label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bh-ink-muted); font-weight: 600; } .stats-hero-name { font-size: 1.15rem; font-weight: 700; margin: .2rem 0; } .stats-hero-sub { font-size: .85rem; color: var(--bh-ink-muted); } .stats-row { display: grid; grid-template-columns: 1fr auto 44px; gap: 4px 10px; align-items: center; padding: 6px 0; font-size: .88rem; } .stats-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats-row-count { color: var(--bh-ink-muted); font-size: .8rem; } .stats-row-amount { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .stats-row-pct { color: var(--bh-ink-muted); font-variant-numeric: tabular-nums; text-align: right; } .stats-bar { grid-column: 1 / -1; height: 6px; background: var(--bh-purple-soft); border-radius: 999px; overflow: hidden; } .stats-bar > span { display: block; height: 100%; background: var(--bh-purple); border-radius: 999px; } /* The pie: the Android page's, in SVG. Labels sit inside the slices in the ink colour, as there; the legend under it names each colour. */ .stats-pie-wrap { position: relative; max-width: 340px; margin: 2px auto 12px; } .stats-pie { display: block; width: 100%; overflow: visible; } .stats-pie text { font-size: 11px; font-weight: 600; fill: var(--bh-ink); font-variant-numeric: tabular-nums; pointer-events: none; } /* A selected slice pulls out along its own middle; --dx/--dy come from the server with the slice (wwwroot/pie.js chooses which one). */ .pie-slice { cursor: pointer; outline: none; transition: transform .18s ease; } .pie-slice.is-selected { transform: translate(var(--dx), var(--dy)); } .pie-slice:focus-visible path, .pie-slice:focus-visible circle { stroke: var(--bh-ink); stroke-width: 2.5; } .pie-tip { position: absolute; transform: translate(-50%, -140%); background: var(--bh-tooltip); color: var(--bh-on-primary); font-size: .78rem; padding: .35rem .6rem; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 2; } .pie-tip[hidden] { display: none; } .pie-tip-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; } .stats-legend.is-selected .stats-row-name { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .pie-slice { transition: none; } } .stats-legend { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 10px; align-items: center; padding: 4px 0; font-size: .88rem; } .stats-legend-dot { width: 12px; height: 12px; border-radius: 50%; } /* The months, a bar each, scrolling sideways when there are more than a phone's width holds; the newest month is the last one. */ .stats-months { display: flex; align-items: flex-end; gap: 6px; height: 170px; overflow-x: auto; padding: 0 2px 4px; } .stats-month { flex: 0 0 38px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .stats-month-total { font-size: .6rem; font-variant-numeric: tabular-nums; margin-bottom: 3px; white-space: nowrap; } .stats-month-bar { width: 22px; background: var(--bh-purple); border-radius: 6px 6px 2px 2px; } .stats-month-label { font-size: .62rem; color: var(--bh-ink-muted); margin-top: 4px; text-align: center; line-height: 1.15; } .detail { max-width: 640px; } .detail-head { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .75rem; } .avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--bh-purple-soft); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; } .qr { width: 96px; height: 96px; border-radius: 8px; background: #FFFFFF; /* the scanner needs the quiet zone white, in both themes */ } .detail-name { text-align: center; font-size: 1.4rem; letter-spacing: .3px; margin-bottom: 1rem; } .detail-actions { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1.25rem; } .action { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: 12px; padding: .6rem .9rem; min-width: 84px; display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--bh-accent); } .action-icon { font-size: 1.3rem; } .action-off { opacity: .38; pointer-events: none; } .card { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: .85rem 1rem; margin-bottom: .7rem; } .card-label { font-size: .78rem; color: var(--bh-ink-muted); font-weight: 600; } .card-value { font-size: 1rem; font-weight: 700; margin-top: .15rem; display: block; } .card-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .copy { background: var(--bh-purple-soft); border: 0; color: var(--bh-accent); border-radius: 8px; font-size: 1.05rem; padding: .35rem .6rem; cursor: pointer; flex: 0 0 auto; } .type-badge { background: var(--bh-purple); color: var(--bh-on-primary); border-radius: 8px; padding: .3rem .7rem; font-size: .8rem; font-weight: 700; flex: 0 0 auto; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .stat-grid .card { margin-bottom: 0; } /* VIP / ΝΕΟΣ beside the type, sized to match it. */ .type-badges { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; } .type-badges .badge { font-size: .8rem; padding: .3rem .6rem; border-radius: 8px; } /* ── Customer form (new / edit) ──────────────────────────────────────── */ .list-head-tools { display: flex; align-items: center; gap: .75rem; } .btn-add { background: var(--bh-purple); color: var(--bh-on-primary); border-radius: 999px; padding: .4rem .9rem; font-size: .85rem; font-weight: 700; white-space: nowrap; } .btn-add:hover { background: var(--bh-purple-deep); } .form-card { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: 1.1rem 1rem 1.25rem; max-width: 480px; } /* ── Τιμοκατάλογος ────────────────────────────────────────────────────── */ /* Four columns as on Android: the name takes what is left, the three prices 76px each — «Προτεινόμενη» just fits at 12px, and three-digit prices fit an input at that width. */ .price-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px 76px; gap: 6px; align-items: center; padding: .45rem .6rem; background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: 10px; margin-bottom: 4px; } .price-head { background: transparent; border: 0; padding: .2rem .6rem; font-size: .75rem; color: var(--bh-ink-muted); font-weight: 700; position: sticky; top: 112px; /* under the app bar and the detail bar */ z-index: 1; background: var(--bh-bg); } .price-group { background: var(--bh-purple); color: var(--bh-on-primary); font-size: .85rem; font-weight: 700; border-radius: 8px; padding: .4rem .75rem; margin: .8rem 0 .3rem; } .price-name { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; } .price-num { text-align: center; font-variant-numeric: tabular-nums; } .price-default { color: var(--bh-accent); font-weight: 700; } .price-note { font-size: .85rem; margin: 0 0 .5rem; } .price-input { padding: .55rem .3rem; text-align: center; font-size: 1rem; } .price-input-default { border-color: var(--bh-purple); } .price-row-bad { border-color: var(--bh-danger); } .price-error { grid-column: 1 / -1; color: var(--bh-danger); font-size: .8rem; } /* ── Τεχνίτες ──────────────────────────────────────────────────────────── */ .tech-line { display: flex; align-items: center; gap: .75rem; } .tech-text { min-width: 0; flex: 1; } /* Initials where Android shows a photo it does not have either. */ .tech-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--bh-purple-soft); color: var(--bh-accent); font-weight: 700; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; } .tech-avatar-big { font-size: 2rem; font-weight: 700; color: var(--bh-accent); } .badge-code { background: var(--bh-purple-soft); color: var(--bh-accent); font-variant-numeric: tabular-nums; } .badge-off { background: var(--bh-surface-2); color: var(--bh-ink-muted); } .tech-off .client-name { color: var(--bh-ink-muted); } .tech-off .tech-avatar { background: var(--bh-surface-2); color: var(--bh-ink-muted); } .tech-services-count { margin: .5rem 0 0; font-size: .85rem; } /* ── Υπηρεσίες Τεχνιτών ────────────────────────────────────────────────── */ .svc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .svc-head .hist-sub, .svc-head .hist-title { margin-bottom: .1rem; } .svc-tools { display: flex; gap: .4rem; flex: 0 0 auto; } .btn-mini { background: var(--bh-surface); color: var(--bh-accent); border: 1px solid var(--bh-purple); border-radius: 999px; padding: .35rem .7rem; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .btn-mini:hover { background: var(--bh-purple-soft); } .svc-group { color: var(--bh-accent); font-size: .8rem; font-weight: 700; letter-spacing: .4px; margin: 1rem 0 .3rem; padding-bottom: .2rem; border-bottom: 1px solid var(--bh-border); } .svc-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .25rem; border-bottom: 1px solid var(--bh-border); cursor: pointer; font-size: .95rem; } .svc-row:last-child { border-bottom: 0; } .svc-row input { width: 1.25rem; height: 1.25rem; accent-color: var(--bh-purple); flex: 0 0 auto; } /* The chips are links here, not buttons. */ a.chip { text-decoration: none; } .chip-off { opacity: .6; } /* The technicians under a service on the price list. */ .price-link { color: inherit; } .price-link:hover { text-decoration: underline; } .price-techs { display: block; font-size: .72rem; color: var(--bh-ink-muted); margin-top: .1rem; } .price-techs-none { color: var(--bh-danger); font-weight: 700; } /* ── Προϊόντα ──────────────────────────────────────────────────────────── */ .prod-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bh-surface-2); border: 1px solid var(--bh-border); } .prod-thumb-none { display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; } .prod-photo { width: 120px; height: 120px; border-radius: 12px; object-fit: cover; border: 1px solid var(--bh-border); background: var(--bh-surface); } .badge-low { background: var(--bh-danger-soft); color: var(--bh-danger); } /* The product form's three prices side by side; the stock movement page. */ .price-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .stock-now { display: flex; gap: 2rem; margin-bottom: 1rem; } .stock-quick { margin: -.4rem 0 1rem; } .stock-note { font-size: .85rem; margin: -.5rem 0 1rem; } /* «Ρυθμίσεις»: one fact per line, the label left and the value right. Three sections stacked — .hist's bottom padding is for the last one only. */ .settings .hist { padding-bottom: 0; } .settings .hist:last-child { padding-bottom: 5.5rem; } .set-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem .25rem; border-bottom: 1px solid var(--bh-border); font-size: .95rem; } .set-row:last-child { border-bottom: 0; } .set-row > b { text-align: right; } .set-host { font-size: .85rem; overflow-wrap: anywhere; } .set-note { font-size: .85rem; margin: .5rem .25rem 0; } .seg { display: inline-flex; border: 1px solid var(--bh-border); border-radius: 999px; overflow: hidden; background: var(--bh-surface-2); } .seg-btn { border: 0; background: transparent; color: var(--bh-ink); font: inherit; font-size: .85rem; padding: .4rem .8rem; cursor: pointer; } .seg-btn + .seg-btn { border-left: 1px solid var(--bh-border); } .seg-btn[aria-pressed="true"] { background: var(--bh-purple); color: var(--bh-on-primary); } .seg-btn:focus-visible { outline: 3px solid var(--bh-focus); outline-offset: -3px; } .set-ok { color: var(--bh-ok); } .set-bad { color: var(--bh-danger); } .set-install { flex-direction: column; align-items: flex-start; gap: .35rem; } .btn-passkey { display: block; width: 100%; margin-top: .75rem; padding: .8rem; border: 1px solid var(--bh-purple); border-radius: 999px; background: transparent; color: var(--bh-accent); font: inherit; font-weight: 600; cursor: pointer; } .btn-passkey:hover { background: var(--bh-purple-soft); } .pk-row { align-items: center; } .pk-remove { border: 0; background: transparent; font: inherit; cursor: pointer; color: var(--bh-danger); } .set-theme { flex-direction: column; align-items: stretch; gap: .5rem; } .set-theme .seg { display: flex; } .set-theme .seg-btn { flex: 1; text-align: center; white-space: nowrap; } .set-install > span:last-child { display: flex; align-items: center; gap: .6rem; } .ledger-row { padding: .5rem .25rem; border-bottom: 1px solid var(--bh-border); } .ledger-row:last-child { border-bottom: 0; } .ledger-main { display: flex; align-items: baseline; gap: .6rem; font-size: .95rem; } .ledger-qty { font-weight: 700; min-width: 3rem; font-variant-numeric: tabular-nums; } .ledger-in { color: var(--bh-ok); } .ledger-out { color: var(--bh-danger); } .ledger-after { font-weight: 600; } .ledger-sub { font-size: .82rem; margin-top: .1rem; } .prod-photo-big { width: 220px; height: 220px; } .photo-link { text-align: center; margin: -.5rem 0 1rem; font-size: .9rem; } .photo-note { font-size: .8rem; margin: .35rem 0 0; } input[type=file].control { padding: .6rem .9rem; } /* Stock at or under five reads red, as on the Android product list. */ .stock-low { color: var(--bh-danger); font-weight: 700; } /* "Παιδί": a tick beside the gender, not a third gender. */ .check { display: flex; align-items: center; gap: .6rem; margin: -.35rem 0 1rem; font-size: .95rem; cursor: pointer; } .check input { width: 1.2rem; height: 1.2rem; accent-color: var(--bh-purple); } /* "Τύπος · Πελάτης": said, not asked — see ClientEditPage. */ .field-static { display: flex; align-items: center; justify-content: space-between; margin: .25rem 0 1rem; font-size: .85rem; color: var(--bh-ink-muted); } .form-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: .5rem; } .form-actions .btn-primary { width: auto; padding: .8rem 1.6rem; } .btn-link { color: var(--bh-accent); font-weight: 600; } .btn-link:hover { text-decoration: underline; } /* "Άνοιγμα καρτέλας" under "this customer already exists". */ .alert-link { display: block; margin-top: .4rem; font-weight: 600; text-decoration: underline; } /* A shared phone: something to know, not something wrong — so amber, not the red that means a fault everywhere else on this site. */ .alert-warn { background: var(--bh-warn-soft); color: var(--bh-warn-ink); border-radius: 10px; padding: .75rem .9rem; font-size: .9rem; margin-bottom: 1rem; } .btn-secondary { background: var(--bh-surface); color: var(--bh-accent); border: 1px solid var(--bh-purple); border-radius: 999px; padding: .8rem 1.2rem; font-size: .95rem; font-weight: 700; cursor: pointer; } .btn-secondary:hover { background: var(--bh-purple-soft); } .form-actions { flex-wrap: wrap; } .btn-inline { display: inline-block; width: auto; padding: .7rem 1.4rem; text-align: center; } .toast { position: fixed; left: 50%; /* Above the jump button, which sits in the bottom 64px of the screen. */ bottom: 5.5rem; transform: translateX(-50%); background: var(--bh-ink); color: var(--bh-on-primary); padding: .6rem 1.1rem; border-radius: 999px; font-size: .85rem; z-index: 50; } /* ── Appointments board ────────────────────────────────────────────────── */ .daynav { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; } .daynav-arrow { background: var(--bh-purple-soft); color: var(--bh-accent); border: 0; border-radius: 8px; font-size: 1rem; padding: .4rem .7rem; cursor: pointer; } .daynav-date { flex: 1; font-weight: 700; font-size: .95rem; text-transform: capitalize; } .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .3rem; vertical-align: middle; } /* Status colours mirror the Android status dots. */ .st-scheduled .slot-time, .dot.st-scheduled { background: #3B82F6; } .st-progress .slot-time, .dot.st-progress { background: #F59E0B; } .st-done .slot-time, .dot.st-done { background: #22C55E; } .st-noshow .slot-time, .dot.st-noshow { background: #EF4444; } .st-cancelled .slot-time, .dot.st-cancelled { background: #6B7280; } /* The grid scrolls sideways on a phone so every technician keeps a readable column instead of being squeezed to nothing. */ .board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .board { min-width: max-content; padding-bottom: 1rem; } .board-row { display: grid; grid-template-columns: 3.6rem repeat(var(--cols), minmax(9.5rem, 1fr)); border-bottom: 1px solid var(--bh-border); } .board-head { position: sticky; top: 0; background: var(--bh-surface); z-index: 2; border-bottom: 2px solid var(--bh-purple); } .board-col-head { padding: .55rem .6rem; display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; } .head-code { background: var(--bh-purple); color: var(--bh-on-primary); border-radius: 999px; min-width: 1.35rem; text-align: center; padding: .05rem .35rem; font-size: .72rem; } .head-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-time-col { padding: .45rem .5rem; font-size: .72rem; color: var(--bh-ink-muted); border-right: 1px solid var(--bh-border); text-align: right; } .board-cell { min-height: 2.6rem; padding: .2rem; border-right: 1px solid var(--bh-border); } .slot { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: 8px; padding: .35rem .45rem; margin-bottom: .25rem; overflow: hidden; } .slot-time { display: inline-block; color: var(--bh-on-primary); font-size: .68rem; font-weight: 700; border-radius: 5px; padding: .05rem .35rem; margin-bottom: .2rem; } .slot-name { font-size: .8rem; font-weight: 700; line-height: 1.2; } .slot-svc { font-size: .72rem; color: var(--bh-ink-muted); line-height: 1.2; } .slot-wide { margin-bottom: .5rem; } /* ── Dashboard KPIs ────────────────────────────────────────────────────── */ .hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .hero-when { text-align: right; flex: 0 0 auto; } .hero-clock { display: block; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .hero-date { display: block; font-size: .78rem; color: var(--bh-ink-muted); text-transform: capitalize; } /* Phones: the greeting takes the full width, and the clock and date move to a line beneath it. Side by side it could not work. At 360px there are 328px of content; the date column is 167px on a Wednesday and 186px on "Παρασκευή 25 Σεπτεμβρίου 2026", which leaves the greeting 126px. "Armando Ferati!" alone is 190px at the desktop size and still 135px at 17.6px, so shrinking the text only moved the break around — the greeting ran to three lines, and how many it ran to would have changed with the day of the week. With the full width, the whole of "Καλωσόρισες, Armando Ferati!" is 292px at 20px: one line. */ @media (max-width: 420px) { .hero { flex-direction: column; gap: .3rem; } .greeting { font-size: 1.25rem; margin: 0; } .hero-when { text-align: left; display: flex; align-items: baseline; gap: .6rem; } .hero-clock { font-size: 1rem; } } .kpi { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .2rem; } /* Stands in for a .period row while the figures load: 62px is that row's rendered height, measured, so nothing moves when they arrive. */ .kpi-skeleton { min-height: 62px; justify-content: center; gap: .5rem; } .kpi-skeleton span { display: block; height: .7rem; border-radius: 4px; background: linear-gradient(90deg, var(--bh-shimmer-a) 25%, var(--bh-shimmer-b) 37%, var(--bh-shimmer-a) 63%); background-size: 400% 100%; animation: kpi-shimmer 1.3s ease infinite; } .kpi-skeleton span:first-child { width: 45%; } .kpi-skeleton span:last-child { width: 70%; height: 1.3rem; } @keyframes kpi-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .period-rows { display: grid; gap: .7rem; margin-bottom: .5rem; } @media (min-width: 720px) { .period-rows { grid-template-columns: 1fr 1fr; } } .period { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: .8rem 1rem; display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; } .period-label { font-size: .8rem; color: var(--bh-ink-muted); font-weight: 600; } .period-value { font-size: 1.15rem; font-weight: 700; grid-row: span 2; align-self: center; font-variant-numeric: tabular-nums; } .period-sub { font-size: .76rem; color: var(--bh-ink-muted); } .pay-split { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: .9rem 1rem; display: grid; gap: .6rem; margin-bottom: .5rem; } .pay-row { display: grid; grid-template-columns: 4.2rem 1fr auto 2.6rem; align-items: center; gap: .6rem; font-size: .85rem; } .pay-name { font-weight: 600; } .pay-amount { font-weight: 700; font-variant-numeric: tabular-nums; } .pay-pct { color: var(--bh-ink-muted); text-align: right; font-variant-numeric: tabular-nums; } /* Expenses sit under the payment methods but are not one of them. */ .pay-row-costs { border-top: 1px solid var(--bh-border); padding-top: .6rem; } .pay-bar { background: var(--bh-purple-soft); border-radius: 999px; height: .5rem; overflow: hidden; } .pay-bar > span { display: block; height: 100%; background: var(--bh-purple); border-radius: 999px; } /* ───────────────────────── Ιστορικό επισκέψεων ───────────────────────── The client detail page's visit history. Laid out for the screen it runs on, not the one the Android page runs on. There the six figures stack two-abreast and the list starts two screens down; here they sit in one row and the first visit is visible without scrolling. Same numbers, same words — only the arrangement differs, so nobody has to re-learn the page. */ /* Room under the last visit for the jump button (20px + 44px), as under the customer list, so the last visit can be scrolled clear of it. */ .hist { margin-top: 28px; padding-bottom: 5.5rem; } .hist-title { font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } /* Figures. Wraps to as many per row as fit — six on a desktop, two on a phone — without a media query per breakpoint. */ .hist-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; } .hist-stat { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } /* Turnover is the one figure people look for first. It gets the accent; the rest stay quiet so it can be found at a glance. */ .hist-stat-lead { background: var(--bh-purple); border-color: var(--bh-purple); } .hist-stat-lead .hist-stat-label { color: rgba(255, 255, 255, .78); } .hist-stat-lead .hist-stat-value { color: var(--bh-on-primary); } .hist-stat-label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bh-ink-muted); } .hist-stat-value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; } /* The best day is a button: same tile, plus a caret so it reads as somewhere to go, the caret the visit rows use. The date is a little smaller than a figure so "02/10/2025" fits a phone's half-width tile. */ .hist-stat-go { position: relative; font: inherit; color: inherit; text-align: left; cursor: pointer; padding-right: 28px; } .hist-stat-go:hover { background: var(--bh-bg); } .hist-stat-go:focus-visible { outline: 2px solid var(--bh-purple); outline-offset: 2px; } .hist-stat-go .hist-stat-value { font-size: 1.1rem; } .hist-stat-sub { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bh-ink-muted); } /* The caret on anything that goes to a visit: the best-day tile, the last-visit figure at the top of the card. */ .go-caret { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--bh-ink-muted); font-size: 1.1rem; } /* A figure card that is a button: same card, a caret, and the label and value stacked as in the plain cards beside it. */ .card-go { position: relative; display: block; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; padding-right: 28px; } .card-go:hover { background: var(--bh-bg); } .card-go:focus-visible { outline: 2px solid var(--bh-purple); outline-offset: 2px; } .card-go .card-label { display: block; } /* In the facts line the last visit reads like the facts around it and underlines on hover, so it is found as a link without shouting. */ .hist-fact-go { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .hist-fact-go:hover b { text-decoration: underline; } .hist-fact-go:focus-visible { outline: 2px solid var(--bh-purple); outline-offset: 2px; border-radius: 4px; } .hist-fact-caret { color: var(--bh-ink-muted); } .hist-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .85rem; color: var(--bh-ink-muted); margin-bottom: 18px; } .hist-facts b { color: var(--bh-ink); font-weight: 600; } /* ── payment split ── */ .hist-pay { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); padding: 14px 16px; margin-bottom: 22px; } .hist-sub { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--bh-ink-muted); font-weight: 600; margin: 0 0 10px; } .hist-pay-row { display: grid; grid-template-columns: 76px 1fr auto 44px; align-items: center; gap: 12px; margin-bottom: 8px; font-size: .9rem; } .hist-pay-row:last-child { margin-bottom: 0; } .hist-pay-track { background: var(--bh-purple-soft); border-radius: 999px; height: 8px; overflow: hidden; } .hist-pay-fill { display: block; height: 100%; background: var(--bh-purple); border-radius: 999px; } .hist-pay-amount { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .hist-pay-pct { color: var(--bh-ink-muted); font-variant-numeric: tabular-nums; text-align: right; } /* Products: set apart from the methods above, no bar, units where the bar would be. */ .hist-pay-row-products { border-top: 1px solid var(--bh-border); padding-top: 10px; margin-top: 10px; } .hist-pay-note { font-size: .8rem; color: var(--bh-ink-muted); } /* ── month heading ── */ .hist-month { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 2px 8px; border-bottom: 1px solid var(--bh-border); margin-bottom: 8px; /* The first heading is where the jump button's "⌃" lands (jump.js); clear of the two sticky bars, like the visits. */ scroll-margin-top: 120px; } .hist-month-label { font-weight: 600; font-size: .95rem; } .hist-month-total { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bh-ink-muted); } /* ── one visit ── */ .hist-visit { background: var(--bh-surface); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); margin-bottom: 8px; overflow: hidden; /* Room for the two sticky bars (header 56px + name bar) when the best day scrolls a visit into view, so it lands below them, not under. */ scroll-margin-top: 120px; } .hist-visit.is-open { border-color: var(--bh-purple); } .hist-visit-head { width: 100%; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 12px 14px; display: grid; grid-template-columns: 96px 1fr auto 72px 16px; align-items: center; gap: 12px; } .hist-visit-head:hover { background: var(--bh-bg); } .hist-visit-head:focus-visible { outline: 2px solid var(--bh-purple); outline-offset: -2px; } .hist-visit-date { display: flex; flex-direction: column; } .hist-visit-date b { font-size: .95rem; } .hist-visit-dow { font-size: .75rem; color: var(--bh-ink-muted); text-transform: capitalize; } .hist-visit-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* The only text on the row now that the technician has gone inside, so it is sized to be read, not to be a footnote. */ .hist-visit-meta { font-size: .85rem; color: var(--bh-ink); } .hist-visit-split { font-size: .78rem; color: var(--bh-ink-muted); font-variant-numeric: tabular-nums; } .hist-visit-amount { font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: right; } .hist-visit-id { font-size: .75rem; color: var(--bh-ink-muted); font-variant-numeric: tabular-nums; text-align: right; } .hist-visit-caret { color: var(--bh-ink-muted); transition: transform .15s ease; } [data-expandable].is-open .hist-visit-caret { transform: rotate(90deg); } /* client-card.js opens a visit by removing the hidden attribute. Nothing sets display on these today; this keeps it that way if something ever does. */ .hist-lines[hidden], .toast[hidden] { display: none; } /* ── expanded lines ── */ .hist-lines { border-top: 1px solid var(--bh-border); padding: 10px 14px 12px; background: var(--bh-bg); } .hist-line { display: grid; grid-template-columns: 1fr 92px 72px; gap: 12px; font-size: .85rem; padding: 4px 0; } .hist-line-code { text-align: center; color: var(--bh-ink-muted); font-variant-numeric: tabular-nums; } .hist-line-price { font-variant-numeric: tabular-nums; text-align: right; } /* The purchase date sits under the product name: beside it, "23/01/26 BLONDE ABSOLUDE SHAMPOO" ran to three lines in a phone's column. */ .hist-line-when { display: block; font-size: .75rem; color: var(--bh-ink-muted); font-variant-numeric: tabular-nums; } /* Only a quantity in the middle column here, so it needs no room for a "Κωδ. Τεχνίτη" heading; the name gets the width instead. */ .hist-pay-products .hist-line { grid-template-columns: 1fr 44px 64px; } /* Column headings, as the owner asked for on 17-09-2026: Υπηρεσίες · Κωδ. Τεχνίτη · Τιμή, and Προϊόντα · Τεμ. · Τιμή beneath when there are products. */ .hist-lines-head { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--bh-ink-muted); border-bottom: 1px solid var(--bh-border); padding: 6px 0 5px; margin-bottom: 2px; } .hist-line + .hist-lines-head { margin-top: 10px; } .hist-lines-head span:nth-child(2) { text-align: center; } .hist-lines-head span:nth-child(3) { text-align: right; } /* The footer the Android card has: subtotal and discount when there was one, the total, then each method's share. */ .hist-foot { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; padding: 3px 0; color: var(--bh-ink-muted); } .hist-foot span:last-child { font-variant-numeric: tabular-nums; } .hist-foot-total { color: var(--bh-ink); font-weight: 700; border-top: 1px solid var(--bh-border); margin-top: 6px; padding-top: 8px; } /* The products line in the payment card opens like a visit. */ .hist-pay-head { width: 100%; background: none; border: 0; border-top: 1px solid var(--bh-border); font: inherit; color: inherit; text-align: left; cursor: pointer; } .hist-pay-head:focus-visible { outline: 2px solid var(--bh-purple); outline-offset: -2px; } .hist-pay-head .hist-visit-caret { justify-self: end; } .hist-pay-products .hist-lines { margin-top: 10px; border-radius: 8px; padding: 6px 10px 10px; } .hist-line-notes { margin: 8px 0 0; font-size: .82rem; color: var(--bh-ink-muted); font-style: italic; } /* Phone: the id and the day name are the first things worth dropping — the date and the amount are what a visit is identified by. */ @media (max-width: 560px) { .hist-visit-head { grid-template-columns: 74px 1fr auto 14px; } .hist-visit-id { display: none; } .hist-visit-dow { display: none; } .hist-line { grid-template-columns: 1fr 76px 64px; gap: 8px; } .hist-pay-row { grid-template-columns: 64px 1fr auto 40px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .hist-visit-caret { transition: none; } } /* The jump button on long lists (wwwroot/jump.js). The Android app's, measure for measure: a 44px circle, 20px off the bottom, card background, separator border, primary-coloured bold arrow, a soft shadow (black at 20%, 8px blur, 2px down). Above the list and its sticky header; below the drawer's scrim (20) and the drawer (30), so an open menu covers it. */ .jump-btn { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--bh-surface); border: 1px solid var(--bh-border); color: var(--bh-accent); font: inherit; font-size: 18px; font-weight: 700; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); cursor: pointer; z-index: 15; display: flex; align-items: center; justify-content: center; } .jump-btn[hidden] { display: none; } .jump-btn:focus-visible { outline: 2px solid var(--bh-purple); outline-offset: 2px; } /* Routes.razor's FocusOnNavigate moves focus to each page's h1 so a screen reader announces where it landed. The heading is not something to act on, and the browser's ring around it read as a fault: on 17-09-2026 the owner saw "Πελάτες" boxed in orange after coming back to the list. Focus still moves; only the ring goes. The Blazor project template does the same. */ h1:focus { outline: none; }