/* ═══════════════════════════════════════════════════════════════════ TARLY — Liquid Glass design system ═══════════════════════════════════════════════════════════════════ Extracted VERBATIM from pages/portal/_layout.php in the legacy PHP app — the 2026-06-02 "Tarly: liquid-glass redesign" commit plus the polish that followed it through 2026-07-09. The Workers rebuild originally shipped a flat 199-line admin.css and silently dropped this. Do not "simplify" what's below: the layering is deliberate. Four glass tiers, separate top/bottom edge colours (the top edge catches light, the bottom reads as shadow — that pair is what makes a flat rectangle look refractive), and four blur tiers that pair blur with saturate() and brightness() so surfaces pick up the ambient colour behind them instead of going grey. Now shared by all four panels — Portal, Tarly Admin, Hub and Site Admin — so the whole estate reads as one product. Requires: rendered server-side from the swva_theme cookie. Setting it client-side lets Safari paint dark tokens first; that race was fixed on 2026-06-03 and must stay fixed. ═══════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} /* ═══════════════════════════════════════════════════════════════════ TARLY — Liquid Glass design system ═══════════════════════════════════════════════════════════════════ */ /* ── Dark theme (default) ── */ :root{ /* Base palette */ --bg:#08080d; --bg-ambient-1:rgba(217,119,6,.07); /* warm amber glow */ --bg-ambient-2:rgba(79,110,247,.05); /* cool indigo glow */ --bg-ambient-3:rgba(168,85,247,.03); /* faint violet */ --text:#f1f5f9;--subtle:#cbd5e1;--muted:#7d8a9e; /* Glass surfaces — translucent, layered */ --glass-1:rgba(255,255,255,.04); /* base panel */ --glass-2:rgba(255,255,255,.06); /* slight elevation */ --glass-3:rgba(255,255,255,.09); /* hover */ --glass-4:rgba(255,255,255,.13); /* active / elevated */ --glass-deep:rgba(8,8,13,.6); /* dark glass over light bg moments */ /* Hairline edges (refractive border) */ --edge:rgba(255,255,255,.10); --edge-strong:rgba(255,255,255,.16); --edge-top:rgba(255,255,255,.22); /* catches light, used on top */ --edge-bottom:rgba(0,0,0,.25); /* shadow under edge */ /* Compat aliases — preserve existing class behaviour */ --surface:var(--glass-1); --border:var(--edge); --border2:var(--edge-strong); --thead-bg:rgba(255,255,255,.025); --row-border:rgba(255,255,255,.05); --input-bg:rgba(255,255,255,.04); --hover-bg:rgba(255,255,255,.04); --sb-hover:rgba(255,255,255,.06); --btn-ghost-bg:rgba(255,255,255,.06); --btn-ghost-hover:rgba(255,255,255,.12); /* Accents */ --amber:#fbbf24; --amber-strong:#f59e0b; --amber-dim:rgba(251,191,36,.16); --amber-border:rgba(251,191,36,.35); --green:#34d399;--green-dim:rgba(52,211,153,.15); --red:#f87171;--red-dim:rgba(248,113,113,.14); --blue:#60a5fa;--blue-dim:rgba(96,165,250,.14); --yellow:#fbbf24;--yellow-dim:rgba(251,191,36,.14); --flash-success-text:#86efac;--flash-error-text:#fca5a5; /* Blur tiers */ --blur-sm:blur(12px) saturate(140%); --blur-md:blur(28px) saturate(180%); --blur-lg:blur(48px) saturate(200%) brightness(1.05); --blur-xl:blur(72px) saturate(220%) brightness(1.08); /* Multi-layer shadows */ --shadow-1:0 1px 1px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.22); --shadow-2:0 1px 1px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.38); --shadow-3:0 1px 2px rgba(0,0,0,.55),0 24px 56px rgba(0,0,0,.5); --shadow-glow-amber:0 0 0 1px rgba(251,191,36,.18),0 12px 32px rgba(251,191,36,.18); /* Generous Tahoe radii */ --radius-xs:6px; --radius-sm:10px; --radius:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px; /* Motion */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-fast:140ms; --dur-base:220ms; --dur-slow:380ms; } /* ── Light theme ── */ html.light{ --bg:#eef2f7; --bg-ambient-1:rgba(251,191,36,.12); --bg-ambient-2:rgba(99,102,241,.07); --bg-ambient-3:rgba(244,114,182,.05); --text:#0f172a;--subtle:#334155;--muted:#64748b; --glass-1:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.72); --glass-3:rgba(255,255,255,.85); --glass-4:rgba(255,255,255,.95); --glass-deep:rgba(255,255,255,.7); --edge:rgba(15,23,42,.08); --edge-strong:rgba(15,23,42,.14); --edge-top:rgba(255,255,255,.9); --edge-bottom:rgba(15,23,42,.04); --surface:var(--glass-1); --border:var(--edge); --border2:var(--edge-strong); --thead-bg:rgba(15,23,42,.025); --row-border:rgba(15,23,42,.05); --input-bg:rgba(255,255,255,.7); --hover-bg:rgba(15,23,42,.03); --sb-hover:rgba(15,23,42,.05); --btn-ghost-bg:rgba(15,23,42,.05); --btn-ghost-hover:rgba(15,23,42,.09); --amber:#c96e05; --amber-strong:#b45309; --amber-dim:rgba(201,110,5,.13); --amber-border:rgba(201,110,5,.3); --green:#16a34a;--green-dim:rgba(22,163,74,.12); --red:#dc2626;--red-dim:rgba(220,38,38,.1); --blue:#2563eb;--blue-dim:rgba(37,99,235,.1); --yellow:#b45309;--yellow-dim:rgba(180,83,9,.12); --flash-success-text:#166534;--flash-error-text:#991b1b; --shadow-1:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06); --shadow-2:0 2px 4px rgba(15,23,42,.05),0 16px 40px rgba(15,23,42,.1); --shadow-3:0 4px 8px rgba(15,23,42,.06),0 24px 56px rgba(15,23,42,.14); --shadow-glow-amber:0 0 0 1px rgba(201,110,5,.2),0 12px 32px rgba(201,110,5,.14); } html{font-size:15px;} body{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro',system-ui,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; position:relative; transition:background var(--dur-base),color var(--dur-base); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Ambient light layer — gives blur something to refract */ body::before{ content:""; position:fixed;inset:0; z-index:-1; pointer-events:none; background: radial-gradient(900px 700px at 12% 8%, var(--bg-ambient-1), transparent 60%), radial-gradient(1100px 800px at 88% 92%, var(--bg-ambient-2), transparent 65%), radial-gradient(800px 600px at 55% 45%, var(--bg-ambient-3), transparent 70%); transition:opacity var(--dur-slow); } a{color:inherit;text-decoration:none;} input,select,textarea{font-family:inherit;font-size:inherit;} ::selection{background:var(--amber-dim);color:var(--amber);} /* ═══════════════════════════════════════════════════════════════════ CHROME — sidebar + topbar ═══════════════════════════════════════════════════════════════════ */ .sidebar{ width:232px;min-height:100vh;flex-shrink:0; position:sticky;top:0;height:100vh;overflow-y:auto; display:flex;flex-direction:column; padding:14px 12px 14px 14px; background:transparent; border:none; z-index:5; } /* Inner glass shell — gives the sidebar its substance */ .sidebar::before{ content:"";position:absolute;inset:14px 0 14px 12px; background:var(--glass-1); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius-lg); backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); box-shadow:var(--shadow-2),inset 0 1px 0 var(--edge-top); z-index:-1; } .sidebar>*{position:relative;z-index:1;} .sb-brand{padding:18px 16px 14px;display:flex;flex-direction:column;gap:2px;} .sb-brand a{display:flex;flex-direction:column;gap:2px;text-decoration:none;} .sb-brand .logo{ display:inline-flex;align-items:center;gap:8px; font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--text); } .sb-brand .logo::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber),0 0 0 2px rgba(251,191,36,.12); flex-shrink:0; } .sb-brand .sub{font-size:.7rem;color:var(--muted);letter-spacing:.04em;padding-left:15px;} .sb-nav{padding:6px 6px;flex:1;} .sb-section{ font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);padding:14px 10px 6px;margin-top:6px; font-weight:600; } .sb-link{ display:flex;align-items:center;gap:11px; padding:9px 11px; border-radius:var(--radius-sm); font-size:.875rem;font-weight:500; color:var(--subtle); cursor:pointer;margin-bottom:2px; position:relative; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .sb-link svg{width:17px;height:17px;flex-shrink:0;opacity:.7;transition:opacity var(--dur-fast),transform var(--dur-base) var(--ease-spring);} .sb-link:hover{background:var(--glass-2);color:var(--text);} .sb-link:hover svg{opacity:1;} .sb-link:active{transform:scale(.985);} .sb-link.active{ background:linear-gradient(180deg, var(--glass-4), var(--glass-3)); color:var(--amber); box-shadow: inset 0 1px 0 var(--edge-top), inset 0 -1px 0 var(--edge-bottom), 0 1px 0 var(--edge); border:1px solid transparent; } .sb-link.active::before{ content:"";position:absolute;left:-3px;top:9px;bottom:9px;width:3px; background:var(--amber);border-radius:0 3px 3px 0; box-shadow:0 0 14px var(--amber); } .sb-link.active svg{opacity:1;stroke:var(--amber);} .sb-footer{ padding:10px 12px; margin-top:6px; display:flex; flex-direction:column; gap:6px; } .sb-user{ display:flex;align-items:center;justify-content:space-between;gap:8px; font-size:.8rem;color:var(--subtle); padding:8px 10px; border-radius:var(--radius-sm); background:var(--glass-1); border:1px solid var(--edge); text-decoration:none; transition:background var(--dur-fast),border-color var(--dur-fast); } .sb-user:hover{background:var(--glass-2);border-color:var(--edge-strong);} .sb-user-text{display:flex;flex-direction:column;min-width:0;flex:1;} .sb-user strong{ display:block; color:var(--text); font-size:.85rem;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .sb-user-sub{ font-size:.7rem;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .sb-logout{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px; font-size:.85rem;color:var(--muted); opacity:.7; border-radius:50%; background:transparent; flex-shrink:0; transition:opacity var(--dur-fast),color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast); } .sb-logout:hover{opacity:1;color:var(--red);background:rgba(248,113,113,.12);} .sb-logout:active{transform:scale(.92);} /* Theme toggle — glass pill */ .theme-toggle{ display:flex;align-items:center;gap:8px; background:var(--glass-2); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius-pill); padding:7px 12px; cursor:pointer; color:var(--muted); font-size:.75rem;font-weight:500; width:100%;margin-bottom:10px; transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast); } .theme-toggle:hover{background:var(--glass-3);color:var(--text);} .theme-toggle:active{transform:scale(.97);} .theme-toggle svg{width:14px;height:14px;flex-shrink:0;} /* ═══════════════════════════════════════════════════════════════════ MAIN + TOPBAR ═══════════════════════════════════════════════════════════════════ */ .main{flex:1;display:flex;flex-direction:column;min-height:100vh;} .topbar{ padding:18px 32px; display:flex;align-items:center;justify-content:space-between; background:transparent; border:none; position:sticky;top:0;z-index:4; } /* Glass under the topbar — only when scrolled */ .topbar::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, var(--bg) 0%, transparent 100%); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); opacity:0; transition:opacity var(--dur-base); z-index:-1; } .topbar.is-scrolled::before{opacity:1;} .topbar h1{ font-size:1.35rem;font-weight:700;color:var(--text); letter-spacing:-.015em; position:relative; z-index:2; } .topbar>*{position:relative;z-index:2;} .page-content{padding:18px 32px 32px;flex:1;} /* ═══════════════════════════════════════════════════════════════════ COMPONENTS — buttons, cards, stats, tables, badges ═══════════════════════════════════════════════════════════════════ */ /* ── Buttons — pill-shaped, glass for ghost, gradient + inner glow for primary ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:9px 18px; border-radius:var(--radius-pill); font-size:.86rem;font-weight:600; letter-spacing:-.005em; border:1px solid transparent; cursor:pointer; text-decoration:none; position:relative; transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); user-select:none; } .btn:active{transform:scale(.97);} .btn-primary{ background:linear-gradient(180deg, var(--amber) 0%, var(--amber-strong) 100%); color:#1a0d00; border-color:var(--amber-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(251,191,36,.28); } .btn-primary:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2), 0 12px 32px rgba(251,191,36,.4); } html.light .btn-primary{color:#fff;} .btn-ghost{ background:var(--glass-2); color:var(--subtle); border:1px solid var(--edge); border-top-color:var(--edge-top); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); } .btn-ghost:hover{background:var(--glass-3);color:var(--text);} .btn-danger{ background:var(--red-dim);color:var(--red); border:1px solid rgba(248,113,113,.3); border-top-color:rgba(248,113,113,.45); } .btn-danger:hover{background:rgba(248,113,113,.22);} .btn-sm{padding:6px 14px;font-size:.8rem;} .btn-xs{padding:4px 11px;font-size:.74rem;} /* ── Cards — glass surface with refractive top edge ── */ .card{ background:var(--glass-1); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius); padding:22px; backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); box-shadow:var(--shadow-1),inset 0 1px 0 var(--edge-top); transition:background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out); position:relative; } .card:hover{box-shadow:var(--shadow-2),inset 0 1px 0 var(--edge-top);} .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .card-title{font-size:1rem;font-weight:700;color:var(--text);letter-spacing:-.01em;} /* ── Stats row — glass cards with elevated hover ── */ .stats-row{display:grid;gap:14px;margin-bottom:24px;} .stats-row.cols-4{grid-template-columns:repeat(4,1fr);} .stats-row.cols-3{grid-template-columns:repeat(3,1fr);} .stats-row.cols-2{grid-template-columns:repeat(2,1fr);} .stat-card{ background:var(--glass-1); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius); padding:18px 22px; backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); box-shadow:var(--shadow-1),inset 0 1px 0 var(--edge-top); transition:background var(--dur-base),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); position:relative; overflow:hidden; } .stat-card:hover{ background:var(--glass-2); box-shadow:var(--shadow-2),inset 0 1px 0 var(--edge-top); transform:translateY(-1px); } .stat-label{ font-size:.7rem;text-transform:uppercase;letter-spacing:.1em; color:var(--muted);margin-bottom:8px;font-weight:600; } .stat-value{font-size:2.1rem;font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.05;} .stat-sub{font-size:.78rem;color:var(--muted);margin-top:6px;} .stat-card.green .stat-value{color:var(--green);} .stat-card.amber .stat-value{color:var(--amber);} .stat-card.red .stat-value{color:var(--red);} .stat-card.blue .stat-value{color:var(--blue);} /* ── Tables — glass wrap, ultra-subtle row separators ── */ .table-wrap{ background:var(--glass-1); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius); overflow:hidden; backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); box-shadow:var(--shadow-1),inset 0 1px 0 var(--edge-top); transition:background var(--dur-base); } table{width:100%;border-collapse:collapse;} thead{background:var(--thead-bg);border-bottom:1px solid var(--edge);} th{ padding:12px 16px;text-align:left; font-size:.7rem;text-transform:uppercase;letter-spacing:.09em; color:var(--muted);font-weight:600; } td{ padding:12px 16px; border-bottom:1px solid var(--row-border); font-size:.88rem;color:var(--subtle); transition:background var(--dur-fast); } tr:last-child td{border-bottom:none;} tr:hover td{background:var(--hover-bg);} td.strong{color:var(--text);font-weight:500;} .td-actions{display:flex;gap:6px;} /* ── Badges — glass pills ── */ .badge{ display:inline-flex;align-items:center;gap:5px; padding:3px 10px; border-radius:var(--radius-pill); font-size:.7rem;font-weight:700;letter-spacing:.04em; border:1px solid transparent; white-space:nowrap; } .badge-lead{background:var(--blue-dim);color:var(--blue);border-color:rgba(96,165,250,.25);} .badge-active{background:var(--green-dim);color:var(--green);border-color:rgba(52,211,153,.28);} .badge-paused{background:var(--yellow-dim);color:var(--yellow);border-color:rgba(251,191,36,.28);} .badge-churned{background:var(--red-dim);color:var(--red);border-color:rgba(248,113,113,.28);} .badge-todo{background:rgba(125,138,158,.18);color:var(--muted);border-color:rgba(125,138,158,.3);} .badge-in_progress{background:var(--blue-dim);color:var(--blue);border-color:rgba(96,165,250,.25);} .badge-review{background:var(--yellow-dim);color:var(--yellow);border-color:rgba(251,191,36,.28);} .badge-done{background:var(--green-dim);color:var(--green);border-color:rgba(52,211,153,.28);} .badge-draft{background:rgba(125,138,158,.18);color:var(--muted);border-color:rgba(125,138,158,.3);} .badge-sent{background:var(--blue-dim);color:var(--blue);border-color:rgba(96,165,250,.25);} .badge-paid{background:var(--green-dim);color:var(--green);border-color:rgba(52,211,153,.28);} .badge-overdue{background:var(--red-dim);color:var(--red);border-color:rgba(248,113,113,.28);} .badge-high{background:var(--red-dim);color:var(--red);border-color:rgba(248,113,113,.28);} .badge-medium{background:var(--yellow-dim);color:var(--yellow);border-color:rgba(251,191,36,.28);} .badge-low{background:rgba(125,138,158,.18);color:var(--muted);border-color:rgba(125,138,158,.3);} /* ═══════════════════════════════════════════════════════════════════ FORMS — glass inputs with focus ring (no hard borders) ═══════════════════════════════════════════════════════════════════ */ .form-grid{display:grid;gap:16px;} .form-grid.cols-2{grid-template-columns:1fr 1fr;} .form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;} .field{display:flex;flex-direction:column;gap:6px;} label.lbl{ font-size:.72rem;font-weight:600; text-transform:uppercase;letter-spacing:.07em; color:var(--muted); } input[type=text],input[type=email],input[type=number],input[type=date],input[type=time],input[type=password],select,textarea{ width:100%; padding:10px 14px; background:var(--input-bg); border:1px solid var(--edge); border-top-color:var(--edge-strong); border-radius:var(--radius-sm); color:var(--text); font-size:.88rem; outline:none; transition:border-color var(--dur-fast),background var(--dur-base),box-shadow var(--dur-fast) var(--ease-out); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); } input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7;} input:focus,select:focus,textarea:focus{ border-color:var(--amber-border); box-shadow:0 0 0 3px var(--amber-dim); background:var(--glass-2); } select option{background:var(--bg);color:var(--text);} textarea{resize:vertical;min-height:90px;line-height:1.55;} /* ═══════════════════════════════════════════════════════════════════ FLASH messages, empty state, modal scaffold, toast scaffold ═══════════════════════════════════════════════════════════════════ */ .flash{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--radius-pill); font-size:.84rem;font-weight:500; margin-bottom:16px; border:1px solid transparent; border-top-color:var(--edge-top); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); width:auto; max-width:100%; } .flash.success{background:var(--green-dim);border-color:rgba(52,211,153,.3);color:var(--flash-success-text);} .flash.error{background:var(--red-dim);border-color:rgba(248,113,113,.3);color:var(--flash-error-text);} .flash::before{ content:""; width:6px;height:6px;border-radius:50%; flex-shrink:0; background:currentColor; box-shadow:0 0 10px currentColor; opacity:.9; } .empty-state{ text-align:center; padding:60px 28px; color:var(--muted); background:var(--glass-1); border:1px dashed var(--edge); border-radius:var(--radius); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); } .empty-state p{margin-bottom:16px;font-size:.92rem;} /* Glass modal — opt-in by adding .glass-modal to your overlay */ .glass-modal{ position:fixed;inset:0;z-index:1000; display:flex;align-items:center;justify-content:center; padding:20px; background:rgba(8,8,13,.55); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); animation:glassModalIn var(--dur-base) var(--ease-out); } html.light .glass-modal{background:rgba(241,245,249,.7);} .glass-modal-panel{ background:var(--glass-3); border:1px solid var(--edge-strong); border-top-color:var(--edge-top); border-radius:var(--radius-lg); padding:28px; width:100%;max-width:540px;max-height:90vh;overflow-y:auto; box-shadow:var(--shadow-3),inset 0 1px 0 var(--edge-top); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); animation:glassPanelIn var(--dur-slow) var(--ease-spring); } @keyframes glassModalIn{from{opacity:0;}to{opacity:1;}} @keyframes glassPanelIn{from{opacity:0;transform:translateY(20px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}} /* Glass toast — opt-in via .glass-toast */ .glass-toast{ position:fixed;bottom:24px;right:24px;z-index:9999; padding:12px 20px; border-radius:var(--radius-pill); background:var(--glass-3); border:1px solid var(--edge-strong); border-top-color:var(--edge-top); color:var(--text); font-size:.85rem;font-weight:600; box-shadow:var(--shadow-2),inset 0 1px 0 var(--edge-top); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); animation:glassToastIn var(--dur-slow) var(--ease-spring); } @keyframes glassToastIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}} /* Generic glass utility classes for opt-in elevation moments */ .glass-panel{ background:var(--glass-2); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius); backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); box-shadow:var(--shadow-1),inset 0 1px 0 var(--edge-top); } .glass-pill{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px; background:var(--glass-2); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius-pill); backdrop-filter:var(--blur-sm); -webkit-backdrop-filter:var(--blur-sm); font-size:.78rem;font-weight:500;color:var(--subtle); } /* ═══════════════════════════════════════════════════════════════ MOBILE RESPONSIVE ═══════════════════════════════════════════════════════════════ */ /* ── Tablet ≤900px ── */ @media(max-width:900px){ .sidebar{width:190px;} .page-content{padding:20px;} } /* ── Mobile ≤768px ── */ @media(max-width:768px){ body{display:block;padding-bottom:68px;} .sidebar{display:none;} /* Main fills screen */ .main{min-height:auto;} .topbar{padding:12px 16px;} .topbar h1{font-size:1rem;} .page-content{padding:14px 14px 20px;} /* Stats */ .stats-row.cols-4{grid-template-columns:1fr 1fr;} .stats-row.cols-3{grid-template-columns:1fr 1fr;} .stat-card{padding:14px 14px;} .stat-value{font-size:1.6rem;} /* Cards */ .card{padding:14px;} /* Tables — horizontal scroll */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} table{min-width:520px;} /* Forms */ .form-grid.cols-2,.form-grid.cols-3{grid-template-columns:1fr;} /* Grid helpers */ [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;} [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;} } /* ── Small mobile ≤480px ── */ @media(max-width:480px){ .page-content{padding:12px 12px 18px;} .stats-row.cols-4,.stats-row.cols-3,.stats-row.cols-2{grid-template-columns:1fr 1fr;} .topbar{padding:10px 14px;} .empty-state{padding:32px 16px;} } /* ── Inline grid overrides for mobile ── */ /* These catch the common inline style patterns used in portal pages */ @media(max-width:768px){ div[style*="grid-template-columns:1fr 1fr"], div[style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr!important; } div[style*="grid-template-columns:repeat(4"], div[style*="grid-template-columns: repeat(4"]{ grid-template-columns:1fr 1fr!important; } div[style*="grid-template-columns:repeat(3"], div[style*="grid-template-columns: repeat(3"]{ grid-template-columns:1fr 1fr!important; } /* Topbar actions — stack on mobile */ .topbar{flex-wrap:wrap;gap:8px;} .topbar h1{font-size:.95rem;} /* Wide filter bars */ div[style*="display:flex"][style*="gap"]{flex-wrap:wrap;} /* Tables on mobile */ td,th{padding:8px 10px;} } /* ═══════════════════════════════════════════════════════════════════ MOBILE bottom nav — floating glass pill ═══════════════════════════════════════════════════════════════════ */ #mobile-nav{ display:none; position:fixed;bottom:14px;left:14px;right:14px;z-index:1000; height:64px; background:var(--glass-3); border:1px solid var(--edge); border-top-color:var(--edge-top); border-radius:var(--radius-lg); align-items:stretch; box-shadow:var(--shadow-3),inset 0 1px 0 var(--edge-top); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); padding:6px; gap:2px; } @media(max-width:768px){#mobile-nav{display:flex;}body{padding-bottom:84px;}} .mn-item{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;cursor:pointer; color:var(--muted); font-size:.62rem;font-weight:600;letter-spacing:.04em; text-decoration:none; transition:color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast) var(--ease-out); padding:6px 2px; border:none;background:none; border-radius:var(--radius-sm); -webkit-tap-highlight-color:transparent; } .mn-item svg{width:22px;height:22px;stroke-width:2;flex-shrink:0;transition:stroke var(--dur-fast),transform var(--dur-fast) var(--ease-spring);} .mn-item:hover{color:var(--text);} .mn-item:active{transform:scale(.94);} .mn-item.active{ color:var(--amber); background:var(--glass-2); } .mn-item.active svg{stroke:var(--amber);} /* Drawer overlay — deeper blur */ #mob-drawer-overlay{ display:none;position:fixed;inset:0;z-index:1001; background:rgba(8,8,13,.45); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); opacity:0;transition:opacity var(--dur-base) var(--ease-out); } html.light #mob-drawer-overlay{background:rgba(241,245,249,.55);} #mob-drawer-overlay.open{opacity:1;} /* Slide-up drawer — full glass surface */ #mob-drawer{ position:fixed;bottom:0;left:0;right:0;z-index:1002; background:var(--glass-4); border-radius:var(--radius-xl) var(--radius-xl) 0 0; border:1px solid var(--edge-strong); border-top-color:var(--edge-top); border-bottom:none; max-height:82vh;overflow-y:auto; transform:translateY(100%); transition:transform var(--dur-slow) var(--ease-out); padding-bottom:env(safe-area-inset-bottom,0px); backdrop-filter:var(--blur-xl); -webkit-backdrop-filter:var(--blur-xl); box-shadow:0 -16px 60px rgba(0,0,0,.5),inset 0 1px 0 var(--edge-top); } #mob-drawer.open{transform:translateY(0);} .drawer-handle{ width:38px;height:5px;border-radius:3px; background:var(--edge-strong); margin:12px auto 8px; } .drawer-section{ font-size:.62rem;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);padding:14px 22px 6px;margin-top:4px; font-weight:600; } .drawer-link{ display:flex;align-items:center;gap:12px; padding:12px 22px; font-size:.92rem;font-weight:500;color:var(--subtle); text-decoration:none; transition:background var(--dur-fast),color var(--dur-fast); border-radius:0; } .drawer-link svg{width:19px;height:19px;flex-shrink:0;opacity:.7;} .drawer-link:hover{background:var(--glass-2);color:var(--text);} .drawer-link.active{background:var(--glass-3);color:var(--amber);} .drawer-link.active svg{opacity:1;stroke:var(--amber);} .drawer-footer{ padding:16px 22px; border-top:1px solid var(--edge); margin-top:6px; display:flex;flex-direction:column;gap:10px; } .drawer-user{font-size:.88rem;color:var(--text);font-weight:600;} .drawer-user small{display:block;font-size:.72rem;color:var(--muted);font-weight:400;} .drawer-signout{font-size:.8rem;color:var(--red);opacity:.8;text-decoration:none;} .drawer-signout:hover{opacity:1;}