` in SalesPerBranche.razor) is the nearest scrolling ancestor, so `position: sticky` on this one column anchors correctly with no markup restructuring. BRANCH only, not CODE+BRANCH: `inset-inline-start: 0` lets CODE (not sticky) simply scroll out of view normally -- a sticky element only clamps once its own natural position would otherwise cross the 0 offset, so at scrollLeft=0 Branch sits at its normal post-Code position (unchanged), and only clamps to the leading edge once scrolled past Code's width; there is no point at any scroll offset where CODE and BRANCH would visually overlap. `inset-inline-start` (a logical property) resolves to the visually-correct leading edge automatically in both directions -- left in LTR, right in RTL (this table already flips to `direction: rtl` as a whole -- see the dir="rtl" rule further below -- so no separate RTL positioning override is needed here). box-shadow (not border/border-right) provides both the crisp frozen- boundary divider (inset) and the soft "content scrolling beneath" cue (drop shadow) -- box-shadow avoids a known Safari rendering bug where a `border-collapse: collapse` table (this one) combined with a bordered sticky cell can misrender the border at the sticky boundary. Because box-shadow's offset is a physical (not logical) value, it needs an explicit RTL-mirrored override (see the [dir="rtl"] rule below) -- the same reason .bt-num/.bt-amt already have their own RTL overrides in this file. */ .branch-table th.bt-name, .branch-table td.bt-name-val { position: sticky; inset-inline-start: 0; z-index: 1; } .branch-table th.bt-name { /* Frozen corner cell (2026-09-04) -- this is both column-sticky (inset-inline-start, from the shared rule above) AND row-sticky (top, inherited from .branch-table thead th's own sticky rule), so it must out-rank BOTH the plain sticky header cells (z-index:2) and the frozen column's body cells (td.bt-name-val, z-index:1) -- otherwise the header row's other cells would paint over this corner as it scrolls, or this corner would paint over its OWN column's body cells incorrectly. z-index:3 is the top of the stack. */ z-index: 3; background: #f8fafc; /* matches .branch-table thead tr's own background */ } .branch-table td.bt-name-val { background: var(--surface); box-shadow: inset -1px 0 0 var(--border), 4px 0 6px -4px rgba(0,0,0,.15); } html[dir="rtl"] .branch-table td.bt-name-val { box-shadow: inset 1px 0 0 var(--border), -4px 0 6px -4px rgba(0,0,0,.15); } .branch-table tbody .bt-row:hover td.bt-name-val { background: #f8fafc; } html[data-theme="dark"] .branch-table th.bt-name { background: #243044; } html[data-theme="dark"] .branch-table tbody .bt-row:hover td.bt-name-val { background: #243044; } /* Sales by Branch -- Last Seen two-line display (2026-08-03). Display layer only: splits the already-correctly-converted "yyyy-MM-dd HH:mm" string onto two lines (date, then time) for readability. Centered to match this column's existing convention (.bt-code-val is centered the same way); .last-seen-time is visually secondary (smaller, muted), same relationship .bt-seen-val already has to the row's primary data. */ .last-seen-value { display: flex; flex-direction: column; align-items: center; line-height: 1.35; } .last-seen-date { font-weight: 600; color: var(--text-2, #475569); } .last-seen-time { font-size: .72rem; color: var(--text-3); } .branch-table .bt-num-val { padding: 10px; text-align: right; font-variant-numeric: tabular-nums; } .branch-table .bt-amt-val { padding: 10px; text-align: right; font-variant-numeric: tabular-nums; } .branch-table .bt-actions-val { padding: 10px; text-align: center; } .bt-branch-name { font-weight: 600; color: var(--text-1); font-size: .82rem; } /* Branch status badges */ .bt-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 600; white-space: nowrap; } .bt-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .status-online { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .status-online .bt-status-dot { background: #22c55e; animation: pulse-dot 2s ease-in-out infinite; } .status-delayed { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .status-delayed .bt-status-dot { background: #f59e0b; } .status-offline { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .status-offline .bt-status-dot { background: #ef4444; } .status-unknown { background: #f8fafc; color: var(--text-3); border: 1px solid var(--border); } .status-unknown .bt-status-dot { background: var(--text-3); } /* View Details button (placeholder for Phase 3B) */ .btn-branch-detail { display: inline-flex; align-items: center; gap: 5px; background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 6px; padding: 4px 10px; font-size: .73rem; font-weight: 600; cursor: pointer; opacity: 1; transition: all .15s ease; white-space: nowrap; } .btn-branch-detail:hover { background: var(--navy-hover); } .btn-branch-detail:disabled { background: var(--border-light); color: var(--text-3); border-color: var(--border); cursor: not-allowed; opacity: .6; } /* ─── Premium card shell ──────────────────────────────────────── */ .ds-card { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .ds-card-header { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; background: var(--surface); border-radius: var(--radius-md) var(--radius-md) 0 0; } .ds-card-title { font-size: .88rem; font-weight: 600; color: var(--text-1); margin: 0; display: flex; align-items: center; gap: 7px; } .ds-card-title i { font-size: .82rem; opacity: .85; } .ds-card-body { padding: 1rem; } /* ─── Live badge ─────────────────────────────────────────────── */ .live-badge { display: inline-flex; align-items: center; gap: 6px; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; border-radius: 999px; padding: 4px 11px; font-size: .73rem; font-weight: 600; white-space: nowrap; letter-spacing: .01em; } .live-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,.4); } 50% { opacity: .8; transform: scale(1.25); box-shadow: 0 0 0 4px rgba(34,197,94,0); } } /* Branch health badges */ .health-badge-ok { display:inline-flex;align-items:center;gap:5px;background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:600; } .health-badge-warn { display:inline-flex;align-items:center;gap:5px;background:#fffbeb;color:#b45309;border:1px solid #fde68a;border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:600; } .health-badge-err { display:inline-flex;align-items:center;gap:5px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:999px;padding:3px 10px;font-size:.7rem;font-weight:600; } /* ─── Filter bar ──────────────────────────────────────────────── */ .ds-filter-bar { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); padding: .85rem 1.1rem; margin-bottom: 1.15rem; } .ds-filter-bar .form-select-sm { height: 34px; font-size: .82rem; border-color: var(--border); color: var(--text-1); background-color: var(--bg); } .ds-filter-bar .form-select-sm:focus { border-color: var(--blue); box-shadow: 0 0 0 .15rem rgba(37,99,235,.15); } /* ─── Export button ───────────────────────────────────────────── */ .btn-export { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; border: none; border-radius: 8px; padding: 7px 15px; font-size: .8rem; font-weight: 600; cursor: pointer; letter-spacing: .01em; transition: background .15s ease; white-space: nowrap; opacity: .75; } .btn-export:hover { background: var(--navy-hover); opacity: 1; color: #fff; } .btn-export:disabled { cursor: not-allowed; } /* ─── Syncfusion grid polish ──────────────────────────────────── */ .e-grid { border: none !important; } .e-grid .e-headercell { background: #f8fafc !important; color: var(--text-1) !important; font-weight: 700 !important; font-size: .76rem !important; letter-spacing: .04em !important; border-color: var(--border) !important; text-transform: uppercase; } .e-grid .e-rowcell { font-size: .82rem !important; color: var(--text-2) !important; border-color: var(--border-light) !important; } .e-grid .e-row:hover .e-rowcell { background: #f8fafc !important; color: var(--text-1) !important; } .e-grid .e-alt-row .e-rowcell { background: #fafbfc !important; } .e-pager { background: var(--surface) !important; border-color: var(--border) !important; font-size: .78rem !important; color: var(--text-2) !important; } .e-pager .e-currentitem { background: var(--blue) !important; color: #fff !important; border-radius: 6px !important; } .e-pager .e-numericitem:hover { background: var(--border-light) !important; border-radius: 6px !important; } /* ─── Chart card sizing ───────────────────────────────────────── */ .chart-canvas-wrap { width: 100%; overflow: hidden; } /* ─── Form select global ──────────────────────────────────────── */ .form-select:focus, .form-select-sm:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 .15rem rgba(37,99,235,.15) !important; } /* ─── Misc utility ────────────────────────────────────────────── */ .gap-2 { gap: .5rem !important; } /* ─── Branch Details Drawer (Phase 3B) ─────────────────────── */ .drawer-overlay { position: fixed; inset: 0; background: rgba(15,39,66,.40); /* z-index (2026-08-19 fix) — was 900, below AdminLTE's own .main-header (wwwroot/dist/css/adminlte.css: z-index 1034, unconditional -- applies on every layout, not just layout-boxed). On narrow/mobile widths the top navbar can render above the drawer, covering the Help drawer's own header/close button whenever the drawer is opened while the navbar occupies that same screen position -- reproducible specifically via the global top-bar Help button (reachable mid-scroll) and not via an inline (opened near the top of the page, before the conflict is visible). Raised well above every real z-index in this app (main-header 1034, Bootstrap tooltip/popover ~1060-1070, SweetAlert2 ~1060) so the drawer -- and BranchDetailsDrawer, which shares this same class -- always renders as the true top-most layer, matching its own role="dialog" aria-modal="true" semantics. Deliberately NOT jumping to AdminLTE's unused 9999/10000/100000 values, which only ever apply under layout classes (.layout-boxed, .maximized-card) this app never sets. */ z-index: 1200; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .drawer-overlay.open { opacity: 1; pointer-events: all; } .drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); box-shadow: -4px 0 32px rgba(15,39,66,.16); z-index: 1201; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); overflow: hidden; } .drawer-panel.open { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.14); flex-shrink: 0; gap: .75rem; } .drawer-title { font-size: .95rem; font-weight: 700; color: #fff; margin: 0; font-family: 'Outfit', sans-serif; } .drawer-close { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; background: rgba(255,255,255,.12); border: none; border-radius: 7px; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s ease; } .drawer-close:hover { background: rgba(255,255,255,.22); } .drawer-branch-strip { padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); background: #f8fafc; flex-shrink: 0; } .drawer-kpi-pill { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 12px; display: inline-block; } .drawer-kpi-pill strong { display: block; font-size: .92rem; font-weight: 700; font-family: 'Outfit', sans-serif; color: var(--text-1); line-height: 1.1; } .drawer-kpi-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 600; } .drawer-body { flex: 1; overflow-y: auto; } .drawer-section { padding: 1rem 1.1rem; border-bottom: 1px solid var(--border-light); } .drawer-section-title { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .7rem 0; } .drawer-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; } /* 2026-07-15: "Fees & Open Checks" pill row (5 pills) — Wide: balanced single row. Medium (<=576px, the drawer's own existing full-width breakpoint below): 3+2. Narrow (<=380px, small phones): 2+2+1, via grid auto-flow — no explicit row-splitting needed, just column count. */ .drawer-fees-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .3rem; } @media (max-width: 576px) { .drawer-fees-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 380px) { .drawer-fees-grid { grid-template-columns: repeat(2, 1fr); } } .drawer-kpi-card { background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .85rem; } .drawer-kpi-card .dkc-label { font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin: 0 0 4px 0; } .drawer-kpi-card .dkc-value { font-size: 1.15rem; font-weight: 700; color: var(--text-1); font-family: 'Outfit', sans-serif; margin: 0; } .drawer-empty { padding: 3rem 1.5rem; text-align: center; color: var(--text-3); } .drawer-empty i { font-size: 2.5rem; opacity: .18; display: block; margin-bottom: .75rem; } .phase3c-placeholder { display: flex; align-items: flex-start; gap: 10px; background: #fffbeb; border: 1px dashed #fde68a; border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .78rem; color: #b45309; } .phase3c-placeholder i { margin-top: 2px; flex-shrink: 0; } @media (max-width: 576px) { .drawer-panel { width: 100vw; } .drawer-kpi-grid { grid-template-columns: 1fr; } } /* ── Interactive Customer Manual — Phase 1 (2026-08-04) ────────────────── Help drawer (.help-drawer-panel) reuses .drawer-overlay/.drawer-panel/ .drawer-header/.drawer-close/.drawer-body as-is (already RTL + mobile aware — see the html[dir="rtl"] and @media rules for those classes). Everything below is new, help-specific, and uses CSS logical properties (inline-start/end) throughout instead of left/right so it follows the page's dir attribute automatically, without a duplicate RTL block. */ .help-drawer-panel { width: min(520px, 100vw); } .help-icon-btn { /* Root cause (2026-08-05, mobile audit): adminlte.css (loaded after this file) sets `button { ... } button, [type="button"], ... { -webkit-appearance: button; }` as part of its Bootstrap Reboot normalization -- confirmed by direct inspection of wwwroot/dist/css/adminlte.css, which is loaded later in _Host.cshtml than this file, so it wins the cascade for any property this class doesn't itself set. This file never reset `appearance` anywhere (verified: zero prior occurrences), so every custom