/* backend/public/style/style.css — Bill·li "2030" design system (dark-first, glass, fluid) Every class name from the previous stylesheet is preserved so no template or page script needed to change. What changed is the system underneath: · fluid type + spacing (clamp), one radius scale, one shadow scale · glass surfaces with a hairline gradient border, ambient mesh background · shell that ADAPTS by width instead of squeezing: ≥ 1281px full sidebar 1001–1280 icon rail (labels hidden, tooltips on hover) 641–1000 off-canvas drawer ≤ 640 bottom tab bar + drawer for the rest · tables become stacked cards ≤ 900px (labels via data-label, stamped by utils/responsive_tables.js); modals become full-height sheets ≤ 640px · 44px targets on coarse pointers, 16px inputs on phones (no iOS zoom) · no horizontal page scroll at any width (overflow-x: clip + min-width:0) */ /* ============================================================ 1 · TOKENS ============================================================ */ :root{ /* palette — DARK is the default */ --bg:#070a12; --bg-2:#0b0f1a; --s1:#0f1422; --s2:#141a2b; --s3:#1b2235; --glass:color-mix(in srgb,#111828 78%,transparent); --bd:rgba(255,255,255,.075); --bd2:rgba(255,255,255,.14); --bd-hi:rgba(255,255,255,.22); --tx:#eef1f9; --mut:#9aa3ba; --fnt:#7c86a0; --accent:#6c79f6; --accent-2:#46d6c8; --green:#3ecf8e; --amber:#f4b740; --red:#f06a6a; /* radii */ --r-lg:22px; --r:16px; --r-sm:11px; --r-xs:8px; /* spacing scale (fluid) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:clamp(14px,1.4vw,18px); --sp-5:clamp(18px,2vw,26px); --sp-6:clamp(24px,3vw,40px); /* type scale (fluid) */ --fs-xs:11px; --fs-sm:12.5px; --fs-md:13.5px; --fs-lg:15px; --fs-xl:clamp(16px,1.1vw + 11px,19px); --fs-2xl:clamp(24px,1.6vw + 16px,32px); --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; /* shadows */ --sh-1:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6); --sh-2:0 20px 50px -24px rgba(0,0,0,.75); --glow:0 10px 30px -10px color-mix(in srgb,var(--accent) 55%,transparent); --soft-shadow:var(--sh-2); /* motion */ --ease:cubic-bezier(.2,.7,.2,1); --t:.16s; /* shell */ --side-w:256px; --rail-w:76px; --top-h:64px; --bnav-h:64px; /* legacy aliases (older templates use these names) */ --primary-bg:var(--bg); --card-bg:var(--s1); --card-bg-glass:var(--glass); --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); --ac:var(--accent); } html[data-theme=light]{ --bg:#eef1f8; --bg-2:#f6f7fb; --s1:#ffffff; --s2:#f7f8fc; --s3:#eef1f7; --glass:color-mix(in srgb,#ffffff 78%,transparent); --bd:rgba(15,20,35,.08); --bd2:rgba(15,20,35,.15); --bd-hi:rgba(15,20,35,.22); --tx:#111726; --mut:#5b6478; --fnt:#6b748c; --sh-1:0 1px 2px rgba(15,23,42,.06), 0 8px 24px -14px rgba(15,23,42,.18); --sh-2:0 24px 60px -30px rgba(15,23,42,.28); } /* accent options (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 · AMBIENT BACKGROUND · OVERFLOW GUARDS ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} html{overflow-x:clip; -webkit-text-size-adjust:100%} body{ font-family:var(--sans); background:var(--bg); color:var(--tx); line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:clip; font-size:14px; background-image: radial-gradient(900px 520px at 8% -10%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 60%), radial-gradient(760px 480px at 100% 0%, color-mix(in srgb,var(--accent-2) 16%,transparent), transparent 55%), radial-gradient(700px 600px at 50% 120%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 60%); background-attachment:fixed; background-repeat:no-repeat; } /* faint grid, fixed, cheap */ body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35; background-image:linear-gradient(color-mix(in srgb,var(--tx) 4%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--tx) 4%,transparent) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 30% 0%, #000 20%, transparent 70%); mask-image:radial-gradient(ellipse at 30% 0%, #000 20%, transparent 70%)} html[data-theme=light] body::before{opacity:.5} img,svg,video,canvas{max-width:100%} pre,code,kbd{font-family:var(--mono)} pre{white-space:pre-wrap; overflow-wrap:anywhere} .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} /* glass surface — one recipe, reused by cards, sidebar, topbar, modals */ .glass,.card,.content-card,.kpi,.modal,.palette,.drawer,.table-card,.m-card{ background:linear-gradient(var(--glass),var(--glass)) padding-box, linear-gradient(160deg,var(--bd-hi),var(--bd) 45%,transparent 90%) border-box; border:1px solid transparent; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); } /* ============================================================ 3 · APP SHELL ============================================================ */ .app{display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh} .side{ border-right:1px solid var(--bd); background:linear-gradient(180deg,color-mix(in srgb,var(--s1) 92%,transparent),color-mix(in srgb,var(--s1) 80%,transparent)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:14px 12px; display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh; height:100dvh; z-index:30; min-width:0; } .logo{display:flex; align-items:center; gap:11px; padding:6px 8px 16px; min-width:0} .mark{width:36px;height:36px;border-radius:12px; 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; box-shadow:var(--glow)} .logo-txt{min-width:0} .logo-txt b{display:block; font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:.2px; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .logo-txt small{display:block; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--fnt); white-space:nowrap} .side-nav{display:flex; flex-direction:column; gap:2px; overflow:auto; min-height:0; scrollbar-width:thin} .nav-h{font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fnt); padding:14px 10px 6px; font-weight:600; white-space:nowrap} .side-nav a{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-sm); color:var(--mut); text-decoration:none; font-size:13.5px; font-weight:500; transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease); position:relative; white-space:nowrap; min-height:42px} .side-nav a i{font-size:19px; flex:none; width:22px; text-align:center} .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); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)} .side-nav a.on i{color:var(--accent)} .side-nav a.on::before{content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:3px; background:linear-gradient(var(--accent),var(--accent-2))} .side-soon{display:flex; align-items:center; gap:11px; padding:9px 11px; color:var(--fnt); font-size:13.5px; cursor:default; white-space:nowrap} .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); min-width:0} .pwr small{display:block; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--fnt); white-space:nowrap} .pwr b{font-size:12px; font-weight:600; font-family:var(--disp); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent} .side-scrim{position:fixed; inset:0; background:rgba(4,7,14,.55); z-index:25; backdrop-filter:blur(2px)} .main{min-width:0; display:flex; flex-direction:column} .top{display:flex; align-items:center; gap:10px; padding:0 var(--sp-5); min-height:var(--top-h); border-bottom:1px solid var(--bd); position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2)} .top-title{flex:1 1 auto; min-width:0} .ptitle{font-family:var(--disp); font-weight:600; font-size:var(--fs-xl); color:var(--tx); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2} .psub{font-size:12.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .cmdk{display:flex; align-items:center; gap:9px; background:var(--s2); border:1px solid var(--bd); border-radius:var(--r-sm); padding:0 12px; height:40px; color:var(--mut); font-size:13px; cursor:pointer; min-width:220px; font-family:var(--sans); flex:none; transition:border-color var(--t) var(--ease)} .cmdk:hover{border-color:var(--bd2)} .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:40px;height:40px;border-radius:var(--r-sm); border:1px solid var(--bd); background:var(--s2); color:var(--mut); flex:none; cursor:pointer; display:grid; place-items:center; font-size:18px; position:relative; text-decoration:none; transition:all var(--t) var(--ease)} .tbtn:hover{color:var(--tx); border-color:var(--bd2); transform:translateY(-1px)} .tbtn .nb{position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red)} .side-toggle{display:none} .av-chip{display:grid; place-items:center; text-decoration:none; flex:none} .swatches{display:flex; gap:6px; flex:none} /* 22px dot inside a 32px hit area: a comfortable target on tablets without widening the bar */ .sw{width:22px;height:22px;border-radius:7px; cursor:pointer; border:2px solid transparent; padding:0; box-sizing:border-box; position:relative} .sw::before{content:""; position:absolute; inset:-5px} .sw[aria-pressed=true]{border-color:var(--tx)} .wrap{padding:var(--sp-5) var(--sp-5) calc(var(--sp-6) + 16px); max-width:1680px; width:100%; margin:0 auto; min-width:0; animation:rise .35s var(--ease) backwards} .wrap>*{min-width:0; max-width:100%} /* Opacity only. A transform here — even one that ends at none — makes .wrap the containing block for every position:fixed modal backdrop inside it, so modals centred in the content box below the top bar instead of in the viewport. Fill is 'backwards', not 'both': an animation still in effect keeps .wrap a stacking context, and the sticky top bar (z-index 20) then paints over the modal backdrop (z-index 50) that lives inside it. */ @keyframes rise{from{opacity:0} to{opacity:1}} /* Table pagination footer */ .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; flex-wrap:wrap} .tbl-pager .tp-page{font-size:12.5px; color:var(--mut); min-width:54px; text-align:center; font-family:var(--mono)} .tp-btn{height:36px; min-width:36px; padding:0 11px; border-radius:var(--r-xs); 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(6px); z-index:60; display:none; align-items:flex-start; justify-content:center; padding:12vh 12px 0} .overlay.on{display:flex} .palette{width:min(560px,100%); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-2)} .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); min-width:0} .palette .res{max-height:min(60vh,420px); overflow:auto} .palette .res a{display:flex; align-items:center; gap:13px; padding:11px 18px; color:var(--mut); text-decoration:none; font-size:13.5px; min-height:44px} .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; height:100dvh; width:min(360px,100vw); border-radius:0; border-left:1px solid var(--bd2); z-index:61; transform:translateX(100%); transition:transform .28s var(--ease); box-shadow:-30px 0 80px -40px rgba(0,0,0,.6); visibility:hidden} .drawer.on{transform:none; visibility:visible} .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)} /* bottom tab bar (phones) — rendered by the layouts, shown ≤ 640px */ .bnav{display:none} /* ============================================================ 4 · BUTTONS ============================================================ */ .btn,.btn-primary,.btn-login,.btn-ghost,.btn-mini,.tp-btn{ -webkit-tap-highlight-color:transparent; user-select:none; text-decoration:none} .btn{font-family:var(--sans); font-size:13px; font-weight:500; padding:0 15px; min-height:40px; 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:all var(--t) var(--ease)} .btn:hover{border-color:var(--bd2); transform:translateY(-1px)} .btn i{font-size:17px} .btn-primary,.btn-login{font-family:var(--sans); font-weight:600; font-size:13.5px; padding:0 18px; min-height:40px; border-radius:var(--r-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; color:#fff; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 62%,var(--accent-2))); box-shadow:var(--glow); transition:all var(--t) var(--ease)} .btn-primary::after,.btn-login::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%); pointer-events:none} .btn-primary:hover,.btn-login:hover{filter:brightness(1.07); transform:translateY(-1px)} .btn-primary:disabled{opacity:.45; cursor:not-allowed; filter:none; box-shadow:none; transform:none} .btn-login{width:100%; margin-top:10px; min-height:46px} .btn-ghost{min-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; justify-content:center; gap:8px; transition:all var(--t) var(--ease); font-family:var(--sans)} .btn-ghost:hover{background:var(--s3); border-color:var(--bd2); color:var(--tx); transform:translateY(-1px)} .btn-ghost:disabled{opacity:.5; cursor:not-allowed; transform:none} .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)} .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)} .btn-mini{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 12px; border-radius:var(--r-xs); border:1px solid var(--bd); background:var(--s2); color:var(--tx); font-size:12.5px; font-weight:600; cursor:pointer; font-family:var(--sans); transition:all var(--t) var(--ease)} .btn-mini:hover{border-color:var(--bd2); background:var(--s3)} /* ============================================================ 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); min-width:0; background:var(--s2); border:1px solid var(--bd); border-radius:var(--r-sm); padding:9px 12px; outline:none; transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease)} .app-input{height:42px; padding:0 12px} textarea.app-input{height:auto; padding:10px 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{border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1); position:relative; min-width:0} .card-head,.page-header,.card-header,.ch{padding:14px var(--sp-5); border-bottom:1px solid var(--bd); background:transparent} .ch{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap} .ch .grp{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0} .cp{padding:var(--sp-5)} .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; min-width:0} .ch .t{font-size:15px} .page-title i,.ch .t i{color:var(--accent); font-size:1em; flex:none} .page-subtitle{margin-top:6px; color:var(--mut); font-size:.9rem} .ch-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap} @media(max-width:640px){ .ch-row{flex-direction:column} .ch-row .btn-primary{width:100%; justify-content:center} } .note{display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:var(--r-sm); background:color-mix(in srgb,var(--accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); color:var(--mut); font-size:13px; line-height:1.5} .note i{color:var(--accent); font-size:17px; flex:none; margin-top:1px} .note b{color:var(--tx)} /* ============================================================ 7 · TABLES ============================================================ */ .table-wrap{overflow-x:auto; padding:12px var(--sp-5) var(--sp-5); max-width:100%; -webkit-overflow-scrolling:touch} .table-ui,.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; background:transparent} .table-ui{min-width:0} /* columns size to content; a truly wide table scrolls inside .table-wrap, never the page */ .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:color-mix(in srgb,var(--s1) 92%,transparent); backdrop-filter:blur(8px); 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; vertical-align:middle} .table-ui tbody tr{transition:background var(--t) var(--ease)} .table-ui tbody tr:hover,.tbl tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)} .table-ui tbody tr:last-child td{border-bottom:none} .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 (hand-built lists) */ .table-cards{display:grid; grid-template-columns:1fr; gap:12px} .table-card{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; min-width:0} .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,.62); display:none; align-items:center; justify-content:center; padding:20px; z-index:50; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)} .modal{width:100%; max-width:760px; border-radius:var(--r-lg); overflow:hidden; min-width:0; box-shadow:var(--sh-2); max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; animation:pop .22s var(--ease)} @keyframes pop{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}} .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-header>div:first-child{min-width:0} .modal-body{padding:18px; overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-height:0} .modal-footer{padding:14px 18px; border-top:1px solid var(--bd); display:flex; align-items:center; justify-content:space-between; gap:12px; background:color-mix(in srgb,var(--s2) 70%,transparent); flex-wrap:wrap} .modal-title{font-family:var(--disp); font-size:1.1rem; font-weight:600; color:var(--tx); display:flex; align-items:center; gap:9px; min-width:0} .modal-title i{color:var(--accent); flex:none} .modal-sub{margin-top:4px; color:var(--mut); font-size:.86rem} .modal .table-ui{min-width:0} .modal .table-wrap{padding:0} /* ============================================================ 9 · BADGES · CHIPS · PILLS · KPI ============================================================ */ .badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; border:1px solid transparent} .badge.green{color:var(--green); background:color-mix(in srgb,var(--green) 13%,transparent); border-color:color-mix(in srgb,var(--green) 22%,transparent)} .badge.amber{color:var(--amber); background:color-mix(in srgb,var(--amber) 15%,transparent); border-color:color-mix(in srgb,var(--amber) 24%,transparent)} .badge.red{color:var(--red); background:color-mix(in srgb,var(--red) 13%,transparent); border-color:color-mix(in srgb,var(--red) 22%,transparent)} .badge.acc{color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border-color:color-mix(in srgb,var(--accent) 24%,transparent)} .chip{font-family:var(--mono); font-weight:600; font-size:11px; padding:3px 9px; border-radius:999px; background:var(--s3); color:var(--mut); border:1px solid var(--bd); display:inline-flex; align-items:center; gap:5px; max-width:100%; overflow:hidden; text-overflow:ellipsis} .chip.g{color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent); border-color:transparent} .chip.a{color:var(--amber); background:color-mix(in srgb,var(--amber) 16%,transparent); border-color:transparent} .chip.r{color:var(--red); background:color-mix(in srgb,var(--red) 14%,transparent); border-color:transparent} .pill{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--mut); border:1px solid var(--bd); border-radius:999px; padding:5px 11px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px} .kpi{border-radius:var(--r); padding:18px 20px; position:relative; overflow:hidden; box-shadow:var(--sh-1); min-width:0} .kpi::after{content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent)} .kpi .l{display:flex; align-items:center; gap:8px; color:var(--mut); font-size:12.5px; position:relative} .kpi .l i{width:30px; height:30px; border-radius:9px; background:color-mix(in srgb,var(--accent) 14%,transparent); display:grid; place-items:center; font-size:16px; color:var(--accent); flex:none} .kpi .v{font-family:var(--disp); font-weight:700; font-size:var(--fs-2xl); margin-top:12px; line-height:1; color:var(--tx); position:relative; letter-spacing:-.02em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere} .kpi .d{margin-top:9px; font-size:12px; color:var(--mut); display:flex; align-items:center; gap:7px; position:relative; flex-wrap:wrap} .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} .breadcrumb .sep{margin:0 8px; color:var(--fnt)} .ti-spin{display:inline-block; animation:ti-spin 1s linear infinite} @keyframes ti-spin{to{transform:rotate(360deg)}} 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:var(--sp-5)} .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; min-height:44px; border:1px solid var(--bd); background:var(--s2); cursor:pointer; transition:border-color var(--t), transform var(--t)} .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); max-width:100%} .pf-seg button{padding:0 16px; min-height:40px; border:none; background:transparent; color:var(--mut); font-weight:600; font-size:13px; cursor:pointer; font-family:var(--sans)} .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:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform var(--t)} .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:13.5px} [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 ============================================================ */ 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 · MOTION · POINTER ============================================================ */ :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px} @media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}} /* coarse pointers: every control is a 44px target */ @media(pointer:coarse){ .btn,.btn-primary,.btn-ghost,.btn-mini,.tbtn,.tp-btn,.app-input,select,input:not([type=checkbox]):not([type=radio]){min-height:44px} .app-input{height:44px} select.app-input{line-height:44px} .side-nav a{min-height:46px} input[type=checkbox],input[type=radio]{width:20px; height:20px} } /* ============================================================ 14 · TOASTS · METERS ============================================================ */ .table-ui thead th.num,.tbl thead th.num{text-align:right} input:focus-visible,select:focus-visible,textarea:focus-visible,.app-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px} .toast-wrap{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:10px; max-width:min(380px,calc(100vw - 24px))} .toast{display:flex; align-items:flex-start; gap:11px; background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--bd2); border-left:3px solid var(--mut); border-radius:var(--r-sm); padding:12px 14px; box-shadow:var(--sh-2); color:var(--tx); transition:opacity .18s; animation:toast-in .22s var(--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; overflow-wrap:anywhere} .toast small{display:block; color:var(--mut); font-size:12px; margin-top:2px; overflow-wrap:anywhere} .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}} .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} .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)} .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 ============================================================ */ .hub{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:18px; align-items:start} @media(max-width:900px){.hub{grid-template-columns:1fr}} .hub-list{position:sticky; top:calc(var(--top-h) + 14px); align-self:start; max-height:calc(100vh - var(--top-h) - 36px); 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; min-height:46px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent; text-align:left; background:none; width:100%; font-family:var(--sans); transition:background var(--t)} .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)); box-shadow:var(--glow)} .hub-head .ht{flex:1; min-width:0} .hub-head .ht h2{font-family:var(--disp); font-weight:600; font-size:clamp(18px,1.4vw + 12px,22px); color:var(--tx); margin:0; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; overflow-wrap:anywhere} .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(auto-fit,minmax(180px,1fr)); gap:14px} .hub-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:18px} .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-row{display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--bd); flex-wrap:wrap} .bill-row:last-child{border-bottom:none} .bill-row .bm{flex:1; color:var(--tx); font-weight:500; font-size:13.5px; min-width:120px} .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} .off-row{display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--bd); flex-wrap:wrap} .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); flex-wrap:wrap} .hub-assign select{flex:1 1 200px} /* ============================================================ 16 · MOBILE (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) 80%,transparent); backdrop-filter:blur(14px); 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:44px; height:44px; 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; 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(--glass); backdrop-filter:blur(16px); 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 ============================================================ */ .skel{position:relative; overflow:hidden; display:inline-block; background:var(--s2); border-radius:6px; height:12px; vertical-align:middle; max-width:100%} .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} .table-ui tbody tr.skel-row td{padding:12px 14px} .skel-av{width:34px; height:34px; border-radius:9px; flex:none} /* ============================================================ 18 · NATIVE CONTROLS ============================================================ */ select,select.app-input{ appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; } html[data-theme=light] select,html[data-theme=light] select.app-input{ background-image:url("data:image/svg+xml;utf8,"); } select:disabled{opacity:.55; cursor:not-allowed} select option{background:var(--s1); color:var(--tx)} input[type=checkbox],input[type=radio]{width:17px; height:17px; accent-color:var(--accent); cursor:pointer; flex:none; vertical-align:middle} input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent); outline-offset:2px} input[type=date]::-webkit-calendar-picker-indicator, input[type=month]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator, input[type=week]::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.6; filter:invert(1) brightness(.85)} input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=month]::-webkit-calendar-picker-indicator:hover, input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1} html[data-theme=light] input[type=date]::-webkit-calendar-picker-indicator, html[data-theme=light] input[type=month]::-webkit-calendar-picker-indicator, html[data-theme=light] input[type=time]::-webkit-calendar-picker-indicator, html[data-theme=light] input[type=week]::-webkit-calendar-picker-indicator{filter:none} /* ============================================================ 19 · RESPONSIVE SHELL — four layouts by width ============================================================ */ /* ---- 1001–1280px: icon rail. Labels hide, icons centre, tooltip on hover ---- */ @media(max-width:1280px) and (min-width:1001px){ .app{grid-template-columns:var(--rail-w) minmax(0,1fr)} .side{padding:14px 10px} .logo{justify-content:center; padding:4px 0 14px} .logo-txt,.nav-h,.pwr small,.pwr b,.side-soon em{display:none} .side-nav a{justify-content:center; padding:11px 0; gap:0} .side-nav a i{width:auto} .side-nav a span,.side-nav a .lbl{display:none} .side-nav a{font-size:0} /* hides text nodes; icon keeps its own size */ .side-nav a i{font-size:20px} .side-nav a.on::before{left:-10px} .side-nav a::after{content:attr(data-label); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); background:var(--s3); color:var(--tx); border:1px solid var(--bd2); border-radius:8px; padding:6px 10px; font-size:12.5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--t); z-index:40; box-shadow:var(--sh-1)} .side-nav a:hover::after,.side-nav a:focus-visible::after{opacity:1} .pwr{padding:10px 0 0; text-align:center} } /* ---- ≤ 1000px: off-canvas drawer ---- */ @media(max-width:1000px){ .app{grid-template-columns:1fr} .side{position:fixed; top:0; left:0; width:min(var(--side-w),86vw); transform:translateX(-102%); transition:transform .26s var(--ease); box-shadow:var(--sh-2)} .side.open{transform:none} .side-toggle{display:grid} .cmdk-lbl{display:none} .cmdk{min-width:0; width:40px; padding:0; justify-content:center} .cmdk kbd{display:none} .side-nav a,.side-soon{padding:12px 11px} } @media(min-width:1001px){ .side-scrim{display:none!important} } /* ---- ≤ 900px: tables become stacked cards ---- */ @media(max-width:900px){ .table-wrap{padding:12px var(--sp-4); overflow-x:visible; max-height:none} .table-ui{min-width:0; display:block} .table-ui thead{display:none} .table-ui tbody{display:block} .table-ui tbody tr{display:block; background:color-mix(in srgb,var(--s2) 80%,transparent); border:1px solid var(--bd); border-radius:var(--r-sm); padding:10px 14px; margin-bottom:10px} .table-ui tbody tr:hover{background:color-mix(in srgb,var(--s2) 80%,transparent)} .table-ui tbody tr:last-child td{border-bottom:none} .table-ui tbody td{display:flex; align-items:center; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; padding:7px 0; border-bottom:1px dashed var(--bd); white-space:normal; text-align:right; overflow-wrap:anywhere; min-width:0} .table-ui tbody td>*{min-width:0; max-width:100%} .table-ui tbody td>.chip{white-space:normal; text-overflow:clip} .table-ui tbody td:last-child{border-bottom:none} .table-ui tbody td::before{content:attr(data-label); color:var(--fnt); font-size:10px; letter-spacing:.7px; text-transform:uppercase; font-weight:600; flex:none; text-align:left; max-width:45%} .table-ui tbody td:has(button),.table-ui tbody td:has(.btn),.table-ui tbody td:has(.btn-mini){justify-content:flex-end; flex-wrap:wrap; border-top:1px solid var(--bd); border-bottom:none; margin-top:6px; padding-top:11px} .table-ui tbody td:has(button)::before,.table-ui tbody td:has(.btn)::before,.table-ui tbody td:has(.btn-mini)::before{content:none} .table-ui tbody td[colspan]{display:block; text-align:center} .table-ui tbody td[colspan]::before{content:none} .modal .table-ui{display:table; min-width:0} .modal .table-ui thead{display:table-header-group} .modal .table-ui tbody{display:table-row-group} .modal .table-ui tbody tr{display:table-row; background:none; border:none; padding:0; margin:0} .modal .table-ui tbody td{display:table-cell; text-align:left; padding:9px 10px; white-space:normal} .modal .table-ui tbody td::before{content:none} .modal .table-wrap{overflow-x:auto} .tbl-pager{padding:11px 14px} .hub-list{position:static; max-height:none} } /* ---- ≤ 640px: phone. Bottom tab bar, compact topbar, sheets ---- */ @media(max-width:640px){ :root{--top-h:58px} .wrap{padding:14px 12px calc(var(--bnav-h) + 24px + env(safe-area-inset-bottom,0px))} .top{padding:0 12px; gap:8px} .swatches,#open-notifs,.psub{display:none} .ptitle{font-size:16px} .tbtn,.cmdk{width:44px; height:44px} .ch{padding:14px 14px} .cp,.card-head,.page-header,.card-header{padding:14px} /* header actions drop under the title and share the row */ .ch .grp,.ch>div:not(.t):not(.grp):has(.btn-primary),.ch>div:not(.t):not(.grp):has(.btn-ghost){width:100%} .ch .grp>.btn-primary,.ch .grp>.btn-ghost,.ch .grp>.btn,.ch>div>.btn-primary,.ch>div>.btn-ghost{flex:1 1 auto} .ch .grp>.app-input,.ch .grp>select,.ch .grp>input{flex:1 1 140px; width:auto} /* inputs: 16px stops iOS zooming, 44px targets */ 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{font-size:16px; min-height:44px} .app-input{height:44px} select.app-input{line-height:44px} .btn,.btn-primary,.btn-ghost,.btn-mini{min-height:44px} .kpi{padding:16px} .kpi .v{font-size:26px} /* modals become full-height sheets */ .modal-backdrop{padding:0; align-items:flex-end} .modal{max-width:none; max-height:100dvh; height:auto; border-radius:var(--r-lg) var(--r-lg) 0 0; animation:sheet .26s var(--ease)} .modal-body{padding:16px 14px} .modal-header,.modal-footer{padding:14px} .modal-footer{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))} .modal-footer>*{flex:1 1 auto} .modal-footer .btn-primary,.modal-footer .btn-ghost,.modal-footer .btn{width:100%} @keyframes sheet{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}} .toast-wrap{right:12px; left:12px; bottom:calc(var(--bnav-h) + 12px); max-width:none} .drawer{width:100vw} /* bottom tab bar */ .bnav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:35; background:var(--glass); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); border-top:1px solid var(--bd); padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); min-height:var(--bnav-h)} .bnav a,.bnav button{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 2px; min-height:52px; color:var(--mut); text-decoration:none; font-size:10.5px; font-weight:600; border-radius:12px; border:none; background:none; font-family:var(--sans); cursor:pointer; min-width:0} .bnav a span,.bnav button span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} .bnav i{font-size:22px} .bnav a.on{color:var(--accent)} .bnav a.on i{color:var(--accent); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 70%,transparent))} .side{padding-bottom:calc(var(--bnav-h) + 10px)} .m-app{padding-bottom:calc(var(--bnav-h) + 16px)} } @media(max-width:380px){ .wrap{padding-left:10px; padding-right:10px} .ch,.cp{padding-left:12px; padding-right:12px} .kpi .v{font-size:24px} } /* ---- ≥ 1800px: let content breathe, don't stretch lines forever ---- */ @media(min-width:1800px){ :root{--side-w:280px} .wrap{max-width:1760px} } /* ---- tenant hub drill-down on narrow screens ---- */ .hub-back{display:none} @media(max-width:900px){ .hub-back{display:inline-flex; margin-bottom:2px} .hub.show-detail .hub-list{display:none} .hub:not(.show-detail) .hub-detail{display:none} } /* ===== §20 Billing preview: tabs bar, meta line, demand (kVA) explainer ===== */ .bp-meta{display:flex; flex-wrap:wrap; gap:16px; padding:0 var(--sp-5) 8px; color:var(--mut); font-size:.85rem} .bp-meta b{color:var(--tx); font-weight:600; margin-right:4px} .bp-bar{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; padding:0 var(--sp-5) 12px} .bp-tabs{display:flex; flex-wrap:wrap; gap:6px} .bp-pct{display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:120px} .bp-pct .k{color:var(--mut); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em} .bp-pct .v{font-size:1.35rem; font-weight:700; color:var(--tx); font-family:var(--disp)} .bp-hint{color:var(--mut); font-size:.85rem; line-height:1.5; margin:0 0 10px} .bp-hint b{color:var(--tx)} .bp-kva{margin:20px var(--sp-5) 0; padding:16px 0 0; border-top:1px solid var(--bd)} .bp-kva h4{margin:0 0 6px; font-size:.95rem; font-weight:600; display:flex; align-items:center; gap:8px} .bp-kva h4 i{color:var(--accent)} .bp-kva .table-ui{min-width:0} @media (max-width:640px){ .bp-kva{margin:16px 12px 0} .bp-pct{align-items:flex-start} } /* warnings the engine attached to the run */ .bp-warn{margin:0 var(--sp-5) 14px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid color-mix(in srgb,var(--amber) 45%,var(--bd)); background:color-mix(in srgb,var(--amber) 10%,var(--s2))} .bp-warn h4{margin:0 0 6px; font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:8px; color:var(--amber)} .bp-warn ul{margin:0; padding-left:18px; font-size:.85rem; line-height:1.5; color:var(--tx)} .bp-warn li+li{margin-top:4px} /* the CEB check: supply meter vs invoice */ .bp-check{margin:0 var(--sp-5) 14px; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--bd); background:color-mix(in srgb,var(--s2) 80%,transparent)} .bp-check h4{margin:0 0 8px; font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:8px} .bp-check h4 i{font-size:18px; color:var(--mut)} .bp-check.ok{border-color:color-mix(in srgb,var(--green) 45%,var(--bd))} .bp-check.ok h4 i{color:var(--green)} .bp-check.warn{border-color:color-mix(in srgb,var(--red) 50%,var(--bd)); background:color-mix(in srgb,var(--red) 8%,var(--s2))} .bp-check.warn h4 i{color:var(--red)} .bp-check.partial{border-color:color-mix(in srgb,var(--amber) 45%,var(--bd))} .bp-check.partial h4 i{color:var(--amber)} .bp-check-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 16px; margin-bottom:6px} .bp-check-grid .k{display:block; color:var(--mut); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em} .bp-check-grid .v{display:block; font-size:.92rem; color:var(--tx); word-break:break-word} .bp-check .bp-hint{margin:0} @media (max-width:640px){ .bp-warn,.bp-check{margin-left:12px; margin-right:12px} } /* ===== §21 Shared tab bars (Billing, Meters) ===== */ .tabs{display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--bd); flex-wrap:wrap; overflow-x:auto; scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab-btn{position:relative; padding:10px 14px; min-height:44px; background:transparent; border:none; cursor:pointer; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--mut); white-space:nowrap; display:inline-flex; align-items:center; gap:8px; transition:color var(--t); flex:none} .tab-btn:hover{color:var(--tx)} .tab-btn i{font-size:16px} .tab-btn.is-active{color:var(--tx)} .tab-btn.is-active::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2))} @media(max-width:640px){ .tabs{flex-wrap:wrap; gap:2px 0; margin-bottom:16px; overflow:visible} .tab-btn{padding:10px 10px; font-size:13px; flex:1 1 45%; justify-content:center} } /* role matrix as per-role cards on phones (users.js renders this markup ≤ 640px) */ .mx-cards{display:grid; gap:12px} .mx-card{border:1px solid var(--bd); border-radius:var(--r-sm); background:color-mix(in srgb,var(--s2) 80%,transparent); padding:12px 14px} .mx-card h4{font-family:var(--disp); font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px} .mx-card h4 small{font-size:10.5px; color:var(--mut); font-weight:500} .mx-card .mx-grp{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fnt); font-weight:700; margin:10px 0 4px} .mx-card .mx-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px dashed var(--bd); font-size:13px} .mx-card .mx-row:last-child{border-bottom:none} .mx-card .mx-row .ve{display:inline-flex; gap:12px} .mx-card .mx-row .ve label{display:inline-flex; gap:5px; align-items:center; color:var(--mut); font-size:12px; min-height:32px} .mx-card .locked{color:var(--mut); font-size:12.5px} /* ===== §22 Auth shell: sign-in, 404 and error pages (no sidebar, no top bar) ===== */ .auth-body{min-height:100dvh; display:grid; place-items:center; padding:24px 16px} .auth{width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:18px; animation:rise .35s var(--ease) backwards} .auth-card{width:100%; padding:28px 26px 24px; border-radius:var(--r-lg)} .auth-center{text-align:center} .auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:22px} .auth-brand .mark{width:44px; height:44px; border-radius:14px; font-size:20px} .auth-brand-txt b{display:block; font-family:var(--disp); font-size:17px; letter-spacing:-.01em; color:var(--tx)} .auth-brand-txt small{display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--fnt); margin-top:2px} .auth-title{margin:0 0 6px; font-family:var(--disp); font-size:1.45rem; font-weight:600; letter-spacing:-.01em; color:var(--tx)} .auth-sub{margin:0 0 20px; color:var(--mut); font-size:.9rem; line-height:1.5} .auth-sub code{font-size:.85em} .auth-form{display:grid; gap:14px} .auth-form .field-err{min-height:18px; margin:0} .auth-submit{width:100%; justify-content:center; min-height:44px; font-size:14px} .auth-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px} .auth-actions .btn-primary,.auth-actions .btn-ghost{min-height:42px} .auth-foot{margin:18px 0 0; color:var(--fnt); font-size:12.5px; text-align:center} .auth-foot a{color:var(--accent); text-decoration:none} .auth-foot a:hover{text-decoration:underline} .auth-pwr{margin:0; color:var(--fnt); font-size:11px; letter-spacing:.4px; text-align:center} .auth-pwr small{display:block; font-size:9px; letter-spacing:2px; text-transform:uppercase} @media(max-width:640px){ .auth-card{padding:22px 18px 20px} .auth-actions{flex-direction:column} .auth-actions .btn-primary,.auth-actions .btn-ghost{width:100%; justify-content:center} } /* ===== §23 Print: the billing sheets and any table page, without the chrome ===== */ @media print{ :root{--bg:#fff; --bg-2:#fff; --s1:#fff; --s2:#fff; --s3:#f3f4f6; --glass:#fff; --bd:#d1d5db; --bd2:#9ca3af; --tx:#111; --mut:#444; --fnt:#666} html,body{background:#fff !important; color:#111} body::before{display:none} .side,.top,.bnav,.drawer,.overlay,.toast-wrap,.side-scrim,.tabs,.bp-bar,.bp-tabs,.fld-actions,.btn,.btn-primary,.btn-ghost,.btn-mini,button{display:none !important} .app{display:block} .main{display:block} .wrap{padding:0; max-width:none; animation:none} .card,.content-card,.kpi,.glass{box-shadow:none !important; border:1px solid #d1d5db; backdrop-filter:none; background:#fff !important; break-inside:avoid} [data-tab-panel]:not(.is-active){display:none !important} .table-wrap{overflow:visible !important} .table-ui{min-width:0 !important; width:100%; font-size:11px} .table-ui th,.table-ui td{padding:5px 6px} .bp-warn,.bp-check{border:1px solid #d1d5db} a{color:inherit; text-decoration:none} @page{margin:12mm} }