/* backend/public/style/style.css — "Utility billing OS" theme (dark-first) */ /* ============================================================ 1 · TOKENS ============================================================ */ :root{ /* concept palette — DARK is the default (no data-theme needed) */ --bg:#0a0d15; --s1:#11151f; --s2:#161b27; --s3:#1d2433; --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.14); --tx:#e9edf7; --mut:#929bb3; --fnt:#868fa3; --accent:#6c79f6; --accent-2:#46d6c8; --green:#3ecf8e; --amber:#f4b740; --red:#f06a6a; --r:14px; --r-sm:10px; --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --disp:"Space Grotesk",var(--sans); --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* legacy aliases → new tokens (so existing components adopt the palette) */ --primary-bg:var(--bg); --card-bg:var(--s1); --card-bg-glass:var(--s1); --card-border:var(--bd); --dark-overlay:rgba(2,4,10,.7); --text-primary:var(--tx); --text-secondary:var(--mut); --border-color:var(--bd); --accent-color:var(--accent); --accent-color-light:var(--accent-2); --accent-color-dark:#5563e6; --success-color:var(--green); --warning-color:var(--amber); --danger-color:var(--red); --hover-bg:var(--s3); --soft-shadow:0 12px 34px rgba(0,0,0,.35); } html[data-theme=light]{ --bg:#f5f6fb; --s1:#ffffff; --s2:#ffffff; --s3:#f1f3f9; --bd:rgba(15,20,35,.09); --bd2:rgba(15,20,35,.16); --tx:#111726; --mut:#5b6478; --fnt:#67708a; --soft-shadow:0 12px 30px rgba(15,23,42,.10); } /* accent options (set both accent + companion) */ [data-accent=indigo]{ --accent:#6c79f6; --accent-2:#46d6c8; } [data-accent=sky]{ --accent:#38bdf8; --accent-2:#22d3ee; } [data-accent=teal]{ --accent:#2dd4bf; --accent-2:#5eead4; } [data-accent=emerald]{ --accent:#10b981; --accent-2:#34d399; } [data-accent=amber]{ --accent:#f59e0b; --accent-2:#fb7185; } [data-accent=rose]{ --accent:#f43f5e; --accent-2:#fb7185; } [data-accent=violet]{ --accent:#a855f7; --accent-2:#ec4899; } /* ============================================================ 2 · BASE ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} body{ font-family:var(--sans); background:var(--bg); color:var(--tx); line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased; } .app-bg{background:var(--bg)} .disp{font-family:var(--disp)} .mono{font-family:var(--mono); font-variant-numeric:tabular-nums} .eyebrow{font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--fnt); font-weight:600} a{color:var(--accent)} .container{max-width:1600px; margin:0 auto; padding:0 4px} /* ============================================================ 3 · APP SHELL ============================================================ */ .app{display:grid; grid-template-columns:236px 1fr; min-height:100vh} .side{ border-right:1px solid var(--bd); background:var(--s1); padding:16px 14px; display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh; z-index:30; } .logo{display:flex; align-items:center; gap:11px; padding:6px 8px 16px} .mark{width:34px;height:34px;border-radius:10px; flex:none; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; color:#fff; font-family:var(--disp); font-weight:700; font-size:17px} .logo-txt b{display:block; font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:.3px; color:var(--tx)} .logo-txt small{display:block; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--fnt)} .side-nav{display:flex; flex-direction:column; gap:2px; overflow:auto} .nav-h{font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fnt); padding:14px 10px 6px; font-weight:600} .side-nav a{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px; color:var(--mut); text-decoration:none; font-size:13.5px; transition:.13s} .side-nav a i{font-size:18px} .side-nav a:hover{background:var(--s3); color:var(--tx)} .side-nav a.on{background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--tx)} .side-nav a.on i{color:var(--accent)} .side-soon{display:flex; align-items:center; gap:11px; padding:9px 11px; color:var(--fnt); font-size:13.5px; cursor:default} .side-soon i{font-size:18px} .side-soon em{margin-left:auto; font-style:normal; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--fnt); border:1px solid var(--bd); border-radius:8px; padding:1px 6px} .pwr{margin-top:auto; padding:12px 8px 2px; border-top:1px solid var(--bd)} .pwr small{display:block; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--fnt)} .pwr b{font-size:12px; font-weight:600; font-family:var(--disp); background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent} .pwr-brand{display:flex; align-items:center; gap:9px; margin-top:6px} .pwr-logo{height:22px; width:auto; flex:none; background:#fff; border-radius:6px; padding:3px 5px; box-shadow:0 1px 2px rgba(0,0,0,.18)} .side-scrim{position:fixed; inset:0; background:rgba(4,7,14,.5); z-index:25} .main{min-width:0; display:flex; flex-direction:column} .top{display:flex; align-items:center; gap:12px; padding:12px 22px; border-bottom:1px solid var(--bd); position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(10px)} .top-title{flex:1; min-width:0} .ptitle{font-family:var(--disp); font-weight:600; font-size:18px; color:var(--tx)} .psub{font-size:12.5px; color:var(--mut)} .cmdk{display:flex; align-items:center; gap:9px; background:var(--s2); border:1px solid var(--bd); border-radius:10px; padding:8px 12px; color:var(--mut); font-size:13px; cursor:pointer; min-width:200px; font-family:var(--sans)} .cmdk i{font-size:16px} .cmdk kbd{margin-left:auto; font-family:var(--mono); font-size:10.5px; background:var(--s3); border:1px solid var(--bd); border-radius:5px; padding:2px 6px} .tbtn{width:38px;height:38px;border-radius:10px; border:1px solid var(--bd); background:var(--s2); color:var(--mut); cursor:pointer; display:grid; place-items:center; font-size:18px; position:relative; text-decoration:none} .tbtn:hover{color:var(--tx); border-color:var(--bd2)} .tbtn .nb{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--red)} .side-toggle{display:none} .av-chip{display:grid; place-items:center; text-decoration:none} .swatches{display:flex; gap:5px} .sw{width:18px;height:18px;border-radius:6px; cursor:pointer; border:2px solid transparent; padding:0} .sw[aria-pressed=true]{border-color:var(--tx)} .wrap{padding:22px clamp(18px,2.4vw,34px) 64px; max-width:none; width:100%} /* Table pagination footer (progressive enhancement — see utils/paginate.js) */ .tbl-pager{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 20px; border-top:1px solid var(--bd)} .tbl-pager .tp-info{font-size:12px; color:var(--mut); font-family:var(--mono)} .tbl-pager .tp-ctrls{display:flex; align-items:center; gap:8px} .tbl-pager .tp-page{font-size:12.5px; color:var(--mut); min-width:54px; text-align:center; font-family:var(--mono)} .tp-btn{height:32px; min-width:32px; padding:0 11px; border-radius:8px; border:1px solid var(--bd); background:var(--s2); color:var(--tx); font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px} .tp-btn:hover:not(:disabled){border-color:var(--bd2); background:var(--s3)} .tp-btn:disabled{opacity:.4; cursor:not-allowed} .tp-btn.tp-all{color:var(--accent)} .tp-btn i{font-size:16px} /* command palette + notifications */ .overlay{position:fixed; inset:0; background:rgba(4,7,14,.55); backdrop-filter:blur(4px); z-index:60; display:none; align-items:flex-start; justify-content:center; padding-top:12vh} .overlay.on{display:flex} .palette{width:min(560px,92vw); background:var(--s1); border:1px solid var(--bd2); border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.7)} .palette .pi{display:flex; align-items:center; gap:13px; padding:12px 18px; border-bottom:1px solid var(--bd)} .palette .pi i{font-size:18px; color:var(--mut)} .palette input{flex:1; background:none; border:none; outline:none; color:var(--tx); font-size:15px; font-family:var(--sans)} .palette .res a{display:flex; align-items:center; gap:13px; padding:11px 18px; color:var(--mut); text-decoration:none; font-size:13.5px} .palette .res a i{font-size:18px; color:var(--accent)} .palette .res a:hover,.palette .res a.active{background:var(--s3); color:var(--tx)} .cmdk-empty{padding:14px 18px; color:var(--fnt); font-size:13px} .drawer{position:fixed; top:0; right:0; height:100vh; width:min(360px,92vw); background:var(--s1); border-left:1px solid var(--bd2); z-index:61; transform:translateX(100%); transition:.25s; box-shadow:-30px 0 80px -40px rgba(0,0,0,.6)} .drawer.on{transform:none} .drawer-h{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--bd)} .drawer-h b{font-family:var(--disp); font-weight:600; font-size:15px; display:flex; align-items:center; gap:9px} .drawer-b{padding:14px 16px} .notif{display:flex; align-items:flex-start; gap:12px; padding:12px 0} .notif .nic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px; flex:none; background:var(--s3); color:var(--mut)} .notif b{font-size:13px; font-weight:600} .notif small{display:block; font-size:12px; color:var(--mut)} /* ============================================================ 4 · BUTTONS ============================================================ */ .btn{font-family:var(--sans); font-size:13px; font-weight:500; padding:9px 15px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--bd); background:var(--s2); color:var(--tx); transition:.13s} .btn:hover{border-color:var(--bd2)} .btn i{font-size:17px} .btn-primary,.btn-login{font-family:var(--sans); font-weight:600; font-size:13.5px; padding:0 16px; height:40px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; color:#fff; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,var(--accent-2))); box-shadow:0 8px 20px -6px color-mix(in srgb,var(--accent) 60%,transparent)} .btn-primary:hover,.btn-login:hover{filter:brightness(1.06)} .btn-primary:disabled{opacity:.45; cursor:not-allowed; filter:none; box-shadow:none} .btn-login{width:100%; margin-top:10px} .btn-ghost{height:40px; padding:0 14px; border-radius:var(--r-sm); background:var(--s2); color:var(--mut); border:1px solid var(--bd); font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:.13s; font-family:var(--sans)} .btn-ghost:hover{background:var(--s3); border-color:var(--bd2); color:var(--tx)} .btn-danger{color:var(--red); border-color:color-mix(in srgb,var(--red) 45%,transparent)} .btn-danger:hover{background:color-mix(in srgb,var(--red) 14%,transparent); color:var(--red)} /* selected tab in a .btn group (billing sheet tabs) — mirrors .side-nav a.on */ .btn.tab-on{background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:color-mix(in srgb,var(--accent) 34%,transparent); color:var(--tx)} /* ============================================================ 5 · INPUTS ============================================================ */ input[type=text],input[type=password],input[type=number],input[type=date],input[type=month], input[type=search],input[type=email],select,textarea,.app-input,.input{ width:100%; font-family:var(--sans); font-size:14px; color:var(--tx); background:var(--s2); border:1px solid var(--bd); border-radius:var(--r-sm); padding:9px 12px; outline:none; transition:border-color .15s, box-shadow .15s} .app-input{height:42px; padding:0 12px} input::placeholder,textarea::placeholder{color:var(--fnt)} input:focus,select:focus,textarea:focus,.app-input:focus,.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} select.app-input{line-height:42px; padding-top:0; padding-bottom:0} .fl,.pf-label{font-size:12px; color:var(--mut); margin-bottom:6px; display:block; font-weight:600} .fl .req{color:var(--red); margin-left:3px; font-weight:700} .field-err{min-height:15px; font-size:11.5px; line-height:1.3; color:var(--red); font-weight:600; margin-top:5px} .app-input[aria-invalid="true"],select.app-input[aria-invalid="true"],input[aria-invalid="true"]{border-color:var(--red)} /* ============================================================ 6 · CARDS ============================================================ */ .content-card,.card{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); overflow:hidden} .card-head,.page-header,.card-header,.ch{padding:15px 20px; border-bottom:1px solid var(--bd); background:transparent} .ch{display:flex; align-items:center; justify-content:space-between} .cp{padding:18px 20px} .page-title,.ch .t{margin:0; font-family:var(--disp); font-weight:600; letter-spacing:-.01em; color:var(--tx); display:flex; align-items:center; gap:10px; font-size:1.05rem} .ch .t{font-size:15px} .page-title i,.ch .t i{color:var(--accent); font-size:1em} .page-subtitle{margin-top:6px; color:var(--mut); font-size:.9rem} /* ============================================================ 7 · TABLES ============================================================ */ .table-wrap{overflow-x:auto; padding:16px 20px 20px} .table-ui,.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; background:transparent} .table-ui{min-width:820px} .table-ui thead th,.tbl thead th{position:sticky; top:0; z-index:2; text-align:left; color:var(--fnt); font-weight:600; font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; padding:11px 14px; background:var(--s1); border-bottom:1px solid var(--bd); white-space:nowrap} .table-ui tbody td,.tbl tbody td{padding:12px 14px; border-bottom:1px solid var(--bd); color:var(--tx); white-space:nowrap} .table-ui tbody tr:hover,.tbl tbody tr:hover{background:var(--s2)} .tbl .num,.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums} .dot{width:8px; height:8px; border-radius:50%; display:inline-block; box-shadow:0 0 7px currentColor} .tag{font-size:10px; text-transform:uppercase; letter-spacing:.5px; padding:2px 7px; border-radius:6px; border:1px solid var(--bd); color:var(--mut)} /* mobile card view */ .table-cards{display:grid; grid-template-columns:1fr; gap:12px} .table-card{border:1px solid var(--bd); background:var(--s1); border-radius:var(--r); padding:14px} .table-card-title{font-family:var(--disp); font-weight:600; color:var(--tx); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:10px} .table-card-grid{display:grid; grid-template-columns:1fr; gap:8px} .kv{display:flex; align-items:baseline; justify-content:space-between; gap:10px} .kv .k{color:var(--mut); font-size:.85rem; font-weight:600} .kv .v{color:var(--tx); font-weight:600; text-align:right; word-break:break-word} /* ============================================================ 8 · MODALS ============================================================ */ .modal-backdrop{position:fixed; inset:0; background:rgba(4,7,14,.6); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; backdrop-filter:blur(3px)} .modal{width:100%; max-width:760px; border-radius:16px; background:var(--s1); border:1px solid var(--bd2); overflow:hidden; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); max-height:calc(100vh - 40px); display:flex; flex-direction:column} .modal-header{padding:16px 18px; border-bottom:1px solid var(--bd); display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex:none} .modal-body{padding:18px; overflow-y:auto; flex:1 1 auto; min-height:0} .modal-footer{padding:16px 18px; border-top:1px solid var(--bd); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--s2)} .modal-title{font-family:var(--disp); font-size:1.1rem; font-weight:600; color:var(--tx); display:flex; align-items:center; gap:9px} .modal-title i{color:var(--accent)} .modal-sub{margin-top:4px; color:var(--mut); font-size:.86rem} /* ============================================================ 9 · BADGES · CHIPS · PILLS · KPI ============================================================ */ .badge{font-size:11px; font-weight:500; padding:3px 9px; border-radius:7px; display:inline-flex; align-items:center; gap:5px} .badge.green{color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent)} .badge.amber{color:var(--amber); background:color-mix(in srgb,var(--amber) 16%,transparent)} .badge.red{color:var(--red); background:color-mix(in srgb,var(--red) 14%,transparent)} .badge.acc{color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent)} .chip{font-family:var(--mono); font-weight:600; font-size:11px; padding:2px 8px; border-radius:7px} .chip.g{color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent)} .chip.a{color:var(--amber); background:color-mix(in srgb,var(--amber) 16%,transparent)} .chip.r{color:var(--red); background:color-mix(in srgb,var(--red) 14%,transparent)} .pill{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--mut); border:1px solid var(--bd); border-radius:16px; padding:4px 11px} .kpi{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:16px 18px} .kpi .l{display:flex; align-items:center; gap:8px; color:var(--mut); font-size:12.5px} .kpi .l i{width:28px; height:28px; border-radius:8px; background:var(--s3); display:grid; place-items:center; font-size:15px; color:var(--accent)} .kpi .v{font-family:var(--disp); font-weight:700; font-size:28px; margin-top:12px; line-height:1; color:var(--tx)} .kpi .d{margin-top:9px; font-size:12px; color:var(--mut); display:flex; align-items:center; gap:7px} .up{color:var(--green)} .down{color:var(--red)} /* ============================================================ 10 · BREADCRUMB · ICONS ============================================================ */ .breadcrumb{margin-top:12px; color:var(--mut); padding-left:2px; font-size:14px} .breadcrumb a{color:var(--accent); text-decoration:none} .breadcrumb a:hover{text-decoration:underline} i.fa-solid,i.fa-regular,i.fa-brands{display:inline-block; width:1.1em; text-align:center} /* ============================================================ 11 · AVATARS · PROFILE PAGE ============================================================ */ .avatar{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; flex:none; color:var(--accent); background:color-mix(in srgb,var(--accent) 16%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)} .avatar svg{width:60%; height:60%} .avatar-sm{width:30px; height:30px} .avatar-lg{width:72px; height:72px} .pf-grid{display:grid; gap:24px; padding:22px} .pf-section-title{font-family:var(--disp); font-weight:600; color:var(--tx); font-size:1.02rem} .pf-section-sub{color:var(--mut); font-size:.9rem; margin:4px 0 14px} .pf-fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} @media(max-width:640px){.pf-fields{grid-template-columns:1fr}} .pf-avatars{display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:12px} .pf-avatar-btn{display:flex; align-items:center; justify-content:center; padding:8px; border-radius:14px; border:1px solid var(--bd); background:var(--s2); cursor:pointer; transition:border-color .15s, transform .1s} .pf-avatar-btn:hover{transform:translateY(-1px); border-color:var(--accent)} .pf-avatar-btn[aria-pressed=true]{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)} .pf-seg{display:inline-flex; border:1px solid var(--bd); border-radius:var(--r-sm); overflow:hidden; background:var(--s2)} .pf-seg button{padding:8px 16px; border:none; background:transparent; color:var(--mut); font-weight:600; font-size:13px; cursor:pointer} .pf-seg button+button{border-left:1px solid var(--bd)} .pf-seg button[aria-pressed=true]{background:var(--accent); color:#fff} .pf-swatches{display:flex; flex-wrap:wrap; gap:12px} .accent-swatch{width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .1s} .accent-swatch:hover{transform:scale(1.06)} .accent-swatch[aria-pressed=true]{border-color:var(--tx); transform:scale(1.08)} .sw-sky{background:#38bdf8}.sw-indigo{background:#6c79f6}.sw-teal{background:#2dd4bf} .sw-emerald{background:#10b981}.sw-amber{background:#f59e0b}.sw-rose{background:#f43f5e}.sw-violet{background:#a855f7} .pf-status{font-weight:600; min-height:1.2em} .pf-status.ok{color:var(--green)} .pf-status.err{color:var(--red)} /* density */ [data-density=compact] body{font-size:14px} [data-density=compact] .table-ui thead th,[data-density=compact] .table-ui tbody td{padding:8px 10px} [data-density=compact] .card-head,[data-density=compact] .cp{padding:12px 16px} /* ============================================================ 12 · DARK BRIDGE — neutralise legacy Tailwind light utilities (applies in dark = default + explicit dark, NOT in light) ============================================================ */ html:not([data-theme=light]) .text-slate-800, html:not([data-theme=light]) .text-slate-700{color:var(--tx)} html:not([data-theme=light]) .text-slate-600, html:not([data-theme=light]) .text-slate-500{color:var(--mut)} html:not([data-theme=light]) .text-slate-400, html:not([data-theme=light]) .text-slate-300{color:var(--fnt)} html:not([data-theme=light]) .border-slate-200{border-color:var(--bd)} html:not([data-theme=light]) .bg-white, html:not([data-theme=light]) .bg-white\/70, html:not([data-theme=light]) .bg-white\/90{background:var(--s1)!important} html:not([data-theme=light]) .bg-slate-50{background:var(--s2)!important} html:not([data-theme=light]) .bg-slate-100, html:not([data-theme=light]) .bg-slate-200{background:var(--s3)!important} /* ============================================================ 13 · A11Y · RESPONSIVE ============================================================ */ :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px} @media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}} @media(max-width:1000px){ .app{grid-template-columns:1fr} .side{position:fixed; top:0; left:0; width:236px; transform:translateX(-100%); transition:.22s} .side.open{transform:none} .side-toggle{display:grid} .cmdk-lbl{display:none} .cmdk{min-width:0} } @media(min-width:1001px){ .side-scrim{display:none!important} } /* ============================================================ 14 · SCALE TOKENS · TOASTS · METERS (Tranche 1) ============================================================ */ :root{ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px; --fs-xs:11px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px; --fs-xl:18px; --fs-2xl:28px; } /* numeric column headers align with their right-aligned digits */ .table-ui thead th.num,.tbl thead th.num{text-align:right} /* explicit focus ring on inputs (they set outline:none; restore for keyboard) */ input:focus-visible,select:focus-visible,textarea:focus-visible,.app-input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px} /* ---- toasts ---- */ .toast-wrap{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:10px; max-width:min(380px,92vw)} .toast{display:flex; align-items:flex-start; gap:11px; background:var(--s2); border:1px solid var(--bd2); border-left:3px solid var(--mut); border-radius:var(--r-sm); padding:12px 14px; box-shadow:var(--soft-shadow); color:var(--tx); transition:opacity .18s; animation:toast-in .22s ease} .toast.ok{border-left-color:var(--green)} .toast.ok>.ti{color:var(--green)} .toast.err{border-left-color:var(--red)} .toast.err>.ti{color:var(--red)} .toast.info{border-left-color:var(--accent)} .toast.info>.ti{color:var(--accent)} .toast>.ti{font-size:18px; flex:none; margin-top:1px} .toast b{display:block; font-weight:600; font-size:13px} .toast small{display:block; color:var(--mut); font-size:12px; margin-top:2px} .toast .tx-close{margin-left:auto; background:none; border:none; color:var(--mut); cursor:pointer; font-size:17px; line-height:1; padding:0 2px; flex:none} .toast .tx-close:hover{color:var(--tx)} @keyframes toast-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} /* ---- meters: office·tenant cell ---- */ .ot{display:flex; align-items:center; gap:7px; min-width:0} .ot .ot-o{color:var(--tx); font-weight:600; white-space:nowrap} .ot .ot-sep{color:var(--fnt)} .ot .ot-t{color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .ot .ot-more{font-size:10.5px; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border-radius:6px; padding:1px 6px; font-weight:600; white-space:nowrap} .ot-none{color:var(--fnt); font-style:italic} /* ---- meters: sparkline ---- */ .spark{display:block; width:88px; height:26px} .spark.up{color:var(--accent)} .spark.down{color:var(--red)} .spark.flat{color:var(--mut)} .spark-empty{color:var(--fnt); font-family:var(--mono)} /* ---- meters: status pills ---- */ .mstatus{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; border:1px solid transparent; white-space:nowrap} .mstatus .d{width:7px; height:7px; border-radius:50%; box-shadow:0 0 6px currentColor} .mstatus i{font-size:14px} .mstatus.live{color:var(--green); background:color-mix(in srgb,var(--green) 12%,transparent); border-color:color-mix(in srgb,var(--green) 22%,transparent)} .mstatus.silent{color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent); border-color:color-mix(in srgb,var(--red) 22%,transparent)} .mstatus.derived{color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent); border-color:color-mix(in srgb,var(--accent) 24%,transparent)} /* ============================================================ 15 · TENANT HUB (Tranche 2) ============================================================ */ .hub{display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start} @media(max-width:900px){.hub{grid-template-columns:1fr}} .hub-list{position:sticky; top:78px; align-self:start; max-height:calc(100vh - 100px); display:flex; flex-direction:column; overflow:hidden; padding:0} .hub-list .hub-search-wrap{padding:12px; border-bottom:1px solid var(--bd)} .hub-tenants{overflow-y:auto; flex:1 1 auto; padding:8px; display:flex; flex-direction:column; gap:2px; min-height:0} .hub-newbar{padding:12px; border-top:1px solid var(--bd)} .hub-t{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent; text-align:left; background:none; width:100%; font-family:var(--sans)} .hub-t:hover{background:var(--s2)} .hub-t.on{background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 22%,transparent)} .hub-av{width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:12px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2))} .hub-t .nm{min-width:0; flex:1} .hub-t .nm b{display:block; font-size:13.5px; color:var(--tx); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .hub-t .nm small{display:block; font-size:11.5px; color:var(--mut)} .hub-detail{display:flex; flex-direction:column; gap:18px; min-width:0} .hub-empty{padding:64px 20px; text-align:center; color:var(--mut)} .hub-empty i{font-size:34px; color:var(--fnt); display:block; margin-bottom:10px} .hub-head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap} .hub-head .av-lg{width:56px; height:56px; border-radius:14px; flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:18px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2))} .hub-head .ht{flex:1; min-width:0} .hub-head .ht h2{font-family:var(--disp); font-weight:600; font-size:22px; color:var(--tx); margin:0; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap} .hub-head .ht .sub{color:var(--mut); font-size:13px; margin-top:4px} .hub-actions{display:flex; gap:9px; flex-wrap:wrap} .hub-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px} @media(max-width:720px){.hub-kpis{grid-template-columns:1fr}} .hub-2{display:grid; grid-template-columns:1fr 1fr; gap:18px} @media(max-width:900px){.hub-2{grid-template-columns:1fr}} /* inline SVG line chart */ .linechart{width:100%; height:184px; display:block} .lc-area{fill:color-mix(in srgb,var(--accent) 15%,transparent); stroke:none} .lc-line{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round} .lc-lbl{fill:var(--fnt); font-size:10px; font-family:var(--mono)} /* bill history rows */ .bill-row{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--bd)} .bill-row:last-child{border-bottom:none} .bill-row .bm{flex:1; color:var(--tx); font-weight:500; font-size:13.5px} .bill-row .bk{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--tx); font-weight:600; font-size:13.5px} .bill-row .bk small{color:var(--mut); font-weight:500; font-size:11px; margin-left:3px} /* office sub-panel rows */ .off-row{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--bd)} .off-row:last-child{border-bottom:none} .off-row .oinfo{flex:1; min-width:0} .off-row .oinfo b{color:var(--tx); font-weight:600; font-size:13.5px} .off-row .oinfo small{display:block; color:var(--mut); font-size:11.5px} .hub-assign{display:flex; gap:9px; margin-top:14px; padding-top:14px; border-top:1px solid var(--bd)} .hub-assign select{flex:1} /* ============================================================ 16 · MOBILE (Tranche 3 — dedicated /m screens) ============================================================ */ .m-app{min-height:100vh; padding-bottom:74px; background:var(--bg)} .m-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:14px 16px; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--bd)} .m-top .mt-title{font-family:var(--disp); font-weight:600; font-size:18px; color:var(--tx); flex:1; min-width:0} .m-top .mt-sub{font-size:11.5px; color:var(--mut)} .m-top .mt-btn{width:42px; height:42px; border-radius:12px; border:1px solid var(--bd); background:var(--s2); color:var(--tx); display:grid; place-items:center; font-size:20px; text-decoration:none; flex:none} .m-main{padding:16px} .m-search{margin-bottom:14px} .m-card{display:block; width:100%; text-align:left; background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:14px; margin-bottom:12px; font-family:var(--sans); color:var(--tx)} .m-card:active{background:var(--s2)} .m-card-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px} .m-card-sub{color:var(--mut); font-size:13px; margin-bottom:10px} .m-card-foot{display:flex; align-items:baseline; gap:8px} .m-card-foot .mv{font-size:19px; font-weight:700; font-family:var(--disp); color:var(--tx); font-variant-numeric:tabular-nums} .m-empty{padding:44px 16px; text-align:center; color:var(--mut)} .m-empty i{display:block; font-size:32px; color:var(--fnt); margin-bottom:10px} .m-tabbar{position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; background:var(--s1); border-top:1px solid var(--bd); padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))} .m-tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; min-height:54px; color:var(--mut); text-decoration:none; font-size:10.5px; font-weight:600; border-radius:12px} .m-tab:active{background:var(--s2)} .m-tab i{font-size:22px} .m-tab.on{color:var(--accent)} .m-tab.on i{color:var(--accent)} /* ============================================================ 17 · SKELETONS (Tranche 4 — stable-dimension loading, no CLS) ============================================================ */ .skel{position:relative; overflow:hidden; display:inline-block; background:var(--s2); border-radius:6px; height:12px; vertical-align:middle} .skel::after{content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--tx) 7%,transparent), transparent); animation:skel 1.3s infinite} @keyframes skel{100%{transform:translateX(100%)}} .skel-line{display:block; height:12px; margin:4px 0} /* skeleton table rows keep the real row height so nothing jumps on load */ .table-ui tbody tr.skel-row td{padding:12px 14px} .skel-av{width:34px; height:34px; border-radius:9px; flex:none} /* ============================================================ 18 · NATIVE CONTROLS (Tranche 4 — selects, checkboxes, date/month) ============================================================ */ /* custom