/* umd03.css — SELF-CONTAINED. The umd02 design system (tokens / utilities / components / chrome) is INLINED below VERBATIM (no cross-template import) — so umd03 no longer depends on umd02's umd.css. umd02 can be deleted without affecting umd03. (umd02 still links its own umd.css directly; that file is untouched and stays until umd02 itself is removed.) Cascade order: (1) this note, (2) the entire umd02 umd.css inlined byte-for- byte, (3) umd03's OWN rules AFTER it — so umd03's overrides still win exactly as they did before, when umd.css was pulled in from the umd02 template. The chrome (topbar / sidebar / overlay / backdrops / content) is rendered by umd03's client JS using the umd02 design-system classes VERBATIM. Those rules are descendant selectors off `body` (e.g. `body.sidebarPinned .shellContent`) and the chrome elements are position:fixed. To let the JS-built chrome live inside #umd03Root while still matching those body-child selectors, #umd03Root is `display: contents` — it is removed from the box tree, so its children participate as if they were direct children of . The sidebar-state class + the active applet's accent class go on , and the theme goes on as data-theme — exactly as umd02 does. */ /* ═══════════════════════════════════════════════════════════════════════════ INLINED umd02 design system — source of truth: the umd02 template's umd.css (VERBATIM; do not edit here — edit the source umd.css until umd02 is deleted) ═══════════════════════════════════════════════════════════════════════════ */ /* UMD Engine — umd02 | Single file ≤550 lines | --moduleAccent drives all per-module color */ /* ─── 1. CUSTOM PROPERTIES ──────────────────────────────────────────────── */ :root { --umdBlue:#0066cc; --umdBlueLight:#3399ff; --umdBlueDark:#0052a3; --accentCrm:#0066cc; --accentSales:#00b4d8; --accentMarketing:#f59e0b; --accentProjects:#6c5ce7; --accentAppointments:#00b894; --accentAccounting:#10b981; --accentReporting:#64748b; --accentHr:#ec4899; --accentSecurity:#ef4444; --accentAdmin:#475569; --accentAccount:#3399ff; --moduleAccent:#0066cc; --shellBg:#0a1628; --shellBorder:#1a2f50; --shellText:#e2e8f0; --shellTextMuted:#94a3b8; --topbarBg:#0a1628; --sidebarBg:#0a1628; --sidebarActiveBg:rgba(255,255,255,.07); --sidebarActiveText:#fff; --pageBg:#0d1b2e; --cardBg:#0f1f3d; --cardBorder:#1a3358; --textPrimary:#f1f5f9; --textSecondary:#94a3b8; --textMuted:#64748b; --success:#10b981; --inputBg:#0f1f3d; --inputBorder:#1e3a5f; --inputFocus:var(--moduleAccent); --sp1:.25rem; --sp2:.5rem; --sp3:.75rem; --sp4:1rem; --sp5:1.5rem; --sp6:2rem; --sp8:3rem; --sp10:4rem; --fontBase:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --fontMono:'SF Mono',Consolas,'Liberation Mono',monospace; --txs:.75rem; --tsm:.875rem; --tbase:1rem; --tlg:1.125rem; --txl:1.25rem; --t2xl:1.5rem; --t3xl:1.875rem; --fw4:400; --fw5:500; --fw6:600; --fw7:700; --rSm:.375rem; --rMd:.5rem; --rLg:.75rem; --rXl:1rem; --rFull:9999px; --shSm:0 1px 3px rgba(0,0,0,.4); --shMd:0 4px 12px rgba(0,0,0,.5); --shLg:0 8px 24px rgba(0,0,0,.6); --shTile:0 2px 8px rgba(0,0,0,.4); --shTileHover:0 6px 20px rgba(0,0,0,.6); --ease:cubic-bezier(.4,0,.2,1); --fast:100ms; --base:150ms; --slow:250ms; --theme:200ms; --topbarH:56px; --sidebarW:240px; --sidebarRailW:48px; --tileColW:160px; --tileGap:var(--sp4); --overlayDim:rgba(0,0,0,.5); --overlayBlur:blur(2px); } /* ─── 1b. MODULE ACCENT CLASSES ─────────────────────────────────────────── */ /* Store the class name in modules.accentClass and apply it to . */ /* Each class overrides --moduleAccent so every accent consumer updates. */ body.accentBlue{--moduleAccent:var(--accentCrm)} body.accentTeal{--moduleAccent:var(--accentSales)} body.accentAmber{--moduleAccent:var(--accentMarketing)} body.accentPurple{--moduleAccent:var(--accentProjects)} body.accentGreen{--moduleAccent:var(--accentAppointments)} body.accentEmerald{--moduleAccent:var(--accentAccounting)} body.accentSlate{--moduleAccent:var(--accentReporting)} body.accentPink{--moduleAccent:var(--accentHr)} body.accentRed{--moduleAccent:var(--accentSecurity)} body.accentGray{--moduleAccent:var(--accentAdmin)} body.accentSky{--moduleAccent:var(--accentAccount)} /* ─── 2. RESET & BASE ────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;-webkit-text-size-adjust:100%} body{ font-family:var(--fontBase);font-size:var(--tbase);line-height:1.5; color:var(--textPrimary);background:var(--pageBg); transition:background-color var(--theme) var(--ease),color var(--theme) var(--ease); } img,svg{display:block;max-width:100%} a{color:var(--moduleAccent);text-decoration:none} a:hover{text-decoration:underline} button{font-family:inherit;cursor:pointer;border:none;background:none} input,select,textarea{font-family:inherit;font-size:inherit} ul,ol{list-style:none} /* ─── 3. SHELL LAYOUT ────────────────────────────────────────────────────── */ body{padding-top:var(--topbarH)} .shellContent{ padding:var(--sp5); min-height:calc(100vh - var(--topbarH)); transition:margin-left var(--base) var(--ease); } body.sidebarPinned .shellContent{margin-left:var(--sidebarW)} body.sidebarRail .shellContent{margin-left:var(--sidebarRailW)} body.sidebarHidden .shellContent{margin-left:0} /* Dim content when drawer is open over it */ .shellContent.drawerDim{opacity:.4;pointer-events:none;transition:opacity var(--base) var(--ease)} /* Home screen — no sidebar */ /* ─── 4. TOP BAR ─────────────────────────────────────────────────────────── */ .topbar{ position:fixed;top:0;left:0;right:0;height:var(--topbarH); background:var(--topbarBg);border-bottom:2px solid var(--moduleAccent); display:flex;align-items:center;gap:var(--sp3);padding:0 var(--sp4); z-index:100;transition:border-color var(--base) var(--ease); } .topbarLeft{display:flex;align-items:center;gap:var(--sp2);flex:1} .topbarRight{display:flex;align-items:center;gap:var(--sp3)} .topbarModuleName{font-size:var(--tsm);font-weight:var(--fw6);color:var(--shellText);white-space:nowrap} .topbarHome{border-bottom-color:var(--shellBorder);justify-content:space-between} .topbarGreeting{font-size:var(--tlg);font-weight:var(--fw5);color:var(--shellText)} .iconBtn{ width:36px;height:36px;display:flex;align-items:center;justify-content:center; border-radius:var(--rMd);color:var(--shellTextMuted); transition:background var(--fast) var(--ease),color var(--fast) var(--ease); } .iconBtn:hover{background:rgba(255,255,255,.08);color:var(--shellText)} .iconBtn:active{transform:scale(.95)} .iconBtn svg{width:20px;height:20px} .avatar{ width:32px;height:32px;border-radius:var(--rFull);background:var(--moduleAccent); display:flex;align-items:center;justify-content:center; font-size:var(--txs);font-weight:var(--fw7);color:#fff; cursor:pointer;overflow:hidden;transition:box-shadow var(--base) var(--ease); } .avatar:hover{box-shadow:0 0 0 2px var(--moduleAccent)} /* ─── 5. MODULE OVERLAY PANEL ────────────────────────────────────────────── */ .moduleOverlay{ position:fixed;top:var(--topbarH);left:0;right:0; background:var(--shellBg);border-bottom:1px solid var(--shellBorder); padding:var(--sp5);z-index:90; transform:translateY(-110%);transition:transform var(--slow) var(--ease); box-shadow:var(--shLg); max-height:calc(100dvh - var(--topbarH));overflow-y:auto;overscroll-behavior:contain; scrollbar-width:none; } .moduleOverlay::-webkit-scrollbar{display:none} .moduleOverlay.open{transform:translateY(0)} .overlayScrollHint{ position:sticky;left:0;right:0;height:28px; display:flex;align-items:center;justify-content:center; color:var(--shellTextMuted);pointer-events:none; opacity:0;transition:opacity var(--base) var(--ease);z-index:2; } .overlayScrollHint.visible{opacity:1} .overlayScrollUp{top:0;background:linear-gradient(to bottom,var(--shellBg) 40%,transparent);margin-bottom:calc(-1 * var(--sp3))} .overlayScrollDown{bottom:0;background:linear-gradient(to top,var(--shellBg) 40%,transparent);margin-top:calc(-1 * var(--sp3))} .overlayBackdrop{ display:none;position:fixed;inset:0; background:var(--overlayDim);backdrop-filter:var(--overlayBlur);z-index:89; } .overlayBackdrop.open{display:block} /* ─── 6. TILES ───────────────────────────────────────────────────────────── */ .tileGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--tileColW),1fr)); gap:var(--tileGap); } .tile{ background:var(--moduleAccent);border-radius:var(--rLg);padding:var(--sp4); display:flex;flex-direction:column;justify-content:space-between; cursor:pointer;box-shadow:var(--shTile);position:relative;overflow:hidden;min-height:80px; transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease); } .tile:hover{transform:translateY(-2px);box-shadow:var(--shTileHover)} .tile:active{transform:translateY(0);box-shadow:var(--shTile)} .tile2x2{grid-column:span 2;grid-row:span 2;min-height:160px} .tile2x1{grid-column:span 2} .tile1x1{grid-column:span 1} .tileIcon{position:absolute;top:var(--sp3);right:var(--sp3);opacity:.9} .tileIcon svg{width:24px;height:24px;color:#fff} .tileLabel{font-size:var(--tsm);font-weight:var(--fw6);color:#fff;margin-top:auto} .tileStat{text-align:right} .tileStatNum{font-size:var(--t2xl);font-weight:var(--fw7);color:#fff;line-height:1} .tileStatLabel{font-size:var(--txs);color:rgba(255,255,255,.75)} .tile.tileActive{box-shadow:0 0 0 3px #fff,var(--shTileHover)} .tile.tileGhost{opacity:.25;border:2px dashed rgba(255,255,255,.3);background:transparent} /* Per-tile accent — data-accent overrides --moduleAccent scoped to that tile only */ [data-accent="accentBlue"]{--moduleAccent:var(--accentCrm)} [data-accent="accentTeal"]{--moduleAccent:var(--accentSales)} [data-accent="accentAmber"]{--moduleAccent:var(--accentMarketing)} [data-accent="accentPurple"]{--moduleAccent:var(--accentProjects)} [data-accent="accentGreen"]{--moduleAccent:var(--accentAppointments)} [data-accent="accentEmerald"]{--moduleAccent:var(--accentAccounting)} [data-accent="accentSlate"]{--moduleAccent:var(--accentReporting)} [data-accent="accentPink"]{--moduleAccent:var(--accentHr)} [data-accent="accentRed"]{--moduleAccent:var(--accentSecurity)} [data-accent="accentGray"]{--moduleAccent:var(--accentAdmin)} [data-accent="accentSky"]{--moduleAccent:var(--accentAccount)} /* ─── 7. LEFT SIDEBAR ────────────────────────────────────────────────────── */ .sidebar{ position:fixed;top:var(--topbarH);left:0;bottom:0; background:var(--sidebarBg);border-right:1px solid var(--shellBorder); overflow:hidden;z-index:80;display:flex;flex-direction:column; transition:width var(--base) var(--ease),transform var(--base) var(--ease); } body.sidebarPinned .sidebar{width:var(--sidebarW);transform:translateX(0)} body.sidebarRail .sidebar{width:var(--sidebarRailW);transform:translateX(0)} body.sidebarRail .sidebarLabel{display:none} body.sidebarRail .sidebarItem{justify-content:center} body.sidebarHidden .sidebar{width:var(--sidebarW);transform:translateX(-100%)} body.sidebarHidden .sidebar.drawerOpen{transform:translateX(0)} .sidebarNavWrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:0} .sidebarNav{flex:1;padding:var(--sp3) 0;overflow-y:auto;scrollbar-width:none} .sidebarNav::-webkit-scrollbar{display:none} .sidebarScrollHint{ position:absolute;left:0;right:0;height:28px; display:flex;align-items:center;justify-content:center; color:var(--shellTextMuted);pointer-events:none; opacity:0;transition:opacity var(--base) var(--ease);z-index:2; } .sidebarScrollHint.visible{opacity:1} .sidebarScrollUp{top:0;background:linear-gradient(to bottom,var(--sidebarBg) 40%,transparent)} .sidebarScrollDown{bottom:0;background:linear-gradient(to top,var(--sidebarBg) 40%,transparent)} .sidebarBrand{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--shellBorder);flex-shrink:0} .sidebarBrandLink{display:flex;align-items:center;text-decoration:none;overflow:hidden} .sidebarLogo{height:24px;width:auto;object-fit:contain;max-width:100%} .sidebarBrandName{font-size:var(--tsm);font-weight:var(--fw7);color:var(--shellText);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.sidebarRail .sidebarBrand{display:none} .sidebarItem{ display:flex;align-items:center;gap:var(--sp3); padding:var(--sp2) var(--sp4);font-size:var(--tsm);font-weight:var(--fw5); color:var(--shellTextMuted);border-left:3px solid transparent; cursor:pointer;white-space:nowrap; transition:background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .sidebarItem:hover{background:var(--sidebarActiveBg);color:var(--shellText)} .sidebarItem.active{ background:var(--sidebarActiveBg); color:var(--sidebarActiveText); border-left-color:var(--moduleAccent); } .sidebarItem svg{width:20px;height:20px;flex-shrink:0} .sidebarDivider{height:1px;background:var(--shellBorder);margin:var(--sp2) var(--sp4)} .sidebarToggle{ padding:var(--sp3) var(--sp4);border-top:1px solid var(--shellBorder); display:flex;align-items:center;gap:var(--sp3); font-size:var(--txs);color:var(--shellTextMuted);cursor:pointer; transition:color var(--fast) var(--ease); } .sidebarToggle:hover{color:var(--shellText)} .sidebarToggle svg{width:16px;height:16px} .sidebarBackdrop{display:none;position:fixed;inset:0;background:var(--overlayDim);z-index:79} .sidebarBackdrop.open{display:block} @media(max-width:768px){ .sidebar{width:var(--sidebarW)!important;transform:translateX(-100%)!important} .sidebar.drawerOpen{transform:translateX(0)!important} .sidebarLabel{display:block!important} .sidebarItem{justify-content:flex-start!important} .shellContent{margin-left:0!important;grid-column:1/-1!important} } /* ─── 8. UTILITIES ───────────────────────────────────────────────────────── */ .flex{display:flex} .flexCol{display:flex;flex-direction:column} .flexCenter{display:flex;align-items:center;justify-content:center} .flexBetween{display:flex;align-items:center;justify-content:space-between} .flexEnd{display:flex;align-items:center;justify-content:flex-end} .itemsCenter{align-items:center} .gap1{gap:var(--sp1)} .gap2{gap:var(--sp2)} .gap3{gap:var(--sp3)} .gap4{gap:var(--sp4)} .gap5{gap:var(--sp5)} .p2{padding:var(--sp2)} .p3{padding:var(--sp3)} .p4{padding:var(--sp4)} .p5{padding:var(--sp5)} .mt1{margin-top:var(--sp1)} .mt2{margin-top:var(--sp2)} .mt3{margin-top:var(--sp3)} .mt4{margin-top:var(--sp4)} .mt5{margin-top:var(--sp5)} .mb2{margin-bottom:var(--sp2)} .mb3{margin-bottom:var(--sp3)} .mb4{margin-bottom:var(--sp4)} .mb5{margin-bottom:var(--sp5)} .pt4{padding-top:var(--sp4)} .borderTop{border-top:1px solid var(--cardBorder)} .textXs{font-size:var(--txs)} .textSm{font-size:var(--tsm)} .textLg{font-size:var(--tlg)} .textXl{font-size:var(--txl)} .textPrimary{color:var(--textPrimary)} .textSecondary{color:var(--textSecondary)} .textMuted{color:var(--textMuted)} .textAccent{color:var(--moduleAccent)} .textWhite{color:#fff} .textSuccess{color:var(--success)} .textDanger{color:#ef4444} .successCheckLg{font-size:3rem;color:var(--success)} .fw5{font-weight:var(--fw5)} .fw6{font-weight:var(--fw6)} .fw7{font-weight:var(--fw7)} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hidden{display:none!important} .flex1{flex:1} .cursorPointer{cursor:pointer} .inputW100{width:100px} .flexWrap{flex-wrap:wrap} .itemsStart{align-items:flex-start} .itemsEnd{align-items:flex-end} .pt0{padding-top:0} .overflowXAuto{overflow-x:auto} .textRight{text-align:right} .wFull{width:100%} .statCard{flex:1;min-width:120px} .gridCols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)} .gridCols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp4)} .gridCols4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:var(--sp4)} @media (max-width:900px){ .gridCols2{grid-template-columns:1fr} .gridCols3{grid-template-columns:1fr} .gridCols4{grid-template-columns:1fr 1fr} } .statsRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp3)} .contentNarrow{max-width:800px} .srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .logDetailsToggle{cursor:pointer} .logDetailsToggle summary{list-style:none;color:var(--textMuted)} .logDetailsToggle summary::-webkit-details-marker{display:none} .logDetailsPre{white-space:pre-wrap;word-break:break-all;font-size:var(--txs);color:var(--textPrimary);margin-top:var(--sp2);padding:var(--sp2);background:var(--inputBg);border-radius:var(--rSm)} .textCenter{text-align:center} .textXxl{font-size:var(--t2xl)} .textWarning{color:#f59e0b} /* ─── 9. COMPONENTS ──────────────────────────────────────────────────────── */ .card{background:var(--cardBg);border:1px solid var(--cardBorder);border-radius:var(--rLg);box-shadow:var(--shSm)} .cardHeader{ padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--cardBorder); display:flex;align-items:center;justify-content:space-between; } .cardBody{padding:var(--sp5)} .cardFooter{ padding:var(--sp4) var(--sp5);border-top:1px solid var(--cardBorder); display:flex;align-items:center;justify-content:flex-end;gap:var(--sp3); } .btn{ display:inline-flex;align-items:center;gap:var(--sp2); padding:var(--sp2) var(--sp4);border-radius:var(--rMd); font-size:var(--tsm);font-weight:var(--fw5);line-height:1.5;white-space:nowrap; transition:background var(--fast) var(--ease),opacity var(--fast) var(--ease),transform var(--fast) var(--ease); } .btn:active{transform:scale(.97)} .btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .btnPrimary{background:var(--moduleAccent);color:#fff} .btnPrimary:hover{opacity:.88} .btnSecondary{background:transparent;color:var(--moduleAccent);box-shadow:inset 0 0 0 1px var(--moduleAccent)} .btnSecondary:hover{background:rgba(0,102,204,.1)} .btnGhost{background:transparent;color:var(--textSecondary)} .btnGhost:hover{background:var(--sidebarActiveBg);color:var(--textPrimary)} .btnOutline{background:transparent;color:var(--moduleAccent);box-shadow:inset 0 0 0 1px var(--moduleAccent)} .btnOutline:hover{background:rgba(0,102,204,.1)} .btnDanger{background:var(--accentSecurity);color:#fff} .btnDanger:hover{opacity:.88} .btnWarning{background:rgba(245,158,11,.15);color:#f59e0b;box-shadow:inset 0 0 0 1px #f59e0b}.btnWarning:hover{background:rgba(245,158,11,.25)} .btnSuccess{background:var(--success);color:#fff}.btnSuccess:hover{opacity:.88} .btnSm{padding:var(--sp1) var(--sp3);font-size:var(--txs)} .btnLg{padding:var(--sp3) var(--sp5);font-size:var(--tbase)} .formGroup{display:flex;flex-direction:column;gap:var(--sp2)} .formLabel{font-size:var(--tsm);font-weight:var(--fw5);color:var(--textSecondary)} .formInput,.formSelect,.formTextarea{ width:100%;background:var(--inputBg);border:1px solid var(--inputBorder); border-radius:var(--rMd);color:var(--textPrimary);padding:var(--sp2) var(--sp3); font-size:var(--tsm);outline:none; transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease); } .formInput:focus,.formSelect:focus,.formTextarea:focus{ border-color:var(--inputFocus);box-shadow:0 0 0 3px rgba(0,102,204,.2); } .formTextarea{resize:vertical;min-height:80px} .formError{font-size:var(--txs);color:var(--accentSecurity)} .inputNum{width:6.5rem;max-width:100%} .passwordField{position:relative} .passwordField .formInput{padding-right:var(--sp8)} .passwordToggle{ position:absolute;right:var(--sp2);top:50%;transform:translateY(-50%); display:flex;align-items:center;padding:var(--sp1); background:none;border:0;border-radius:var(--rSm);cursor:pointer; color:var(--textMuted); transition:color var(--fast) var(--ease),box-shadow var(--fast) var(--ease); } .passwordToggle:hover{color:var(--textPrimary)} .passwordToggle:focus-visible{outline:none;color:var(--textPrimary);box-shadow:0 0 0 2px var(--moduleAccent)} .badge{ display:inline-flex;align-items:center;padding:2px var(--sp2); border-radius:var(--rFull);font-size:var(--txs);font-weight:var(--fw6);white-space:nowrap; } .badgeSuccess{background:rgba(16,185,129,.15);color:var(--success)} .badgeWarning{background:rgba(245,158,11,.15);color:#f59e0b} .badgeDanger{background:rgba(239,68,68,.15);color:#ef4444} .badgeInfo{background:rgba(0,180,216,.15);color:#00b4d8} .badgeAccent{background:rgba(0,102,204,.15);color:var(--moduleAccent)} .badgePrimary{background:rgba(0,102,204,.15);color:var(--umdBlue)} .badgeSecondary{background:rgba(71,85,105,.15);color:#64748b} .badgeDefault{background:rgba(100,116,139,.15);color:#94a3b8} /* Cancelled-with-retention subscription pill — reuses badgeDanger's color; adds tabular numerals so the grace-days countdown ("Cancelled · Nd left") doesn't jitter as it ticks. */ .badgeGraceCountdown{font-variant-numeric:tabular-nums;letter-spacing:.01em} .alert{ display:flex;align-items:flex-start;gap:var(--sp3); padding:var(--sp3) var(--sp4);border-radius:var(--rMd);font-size:var(--tsm);border-left:3px solid; } .alertSuccess{background:rgba(16,185,129,.08);border-color:var(--success);color:var(--success)} .alertWarning{background:rgba(245,158,11,.08);border-color:#f59e0b;color:#f59e0b} .alertDanger{background:rgba(239,68,68,.08);border-color:#ef4444;color:#ef4444} .alertInfo{background:rgba(0,102,204,.08);border-color:var(--umdBlue);color:var(--umdBlueLight)} .table{width:100%;border-collapse:collapse;font-size:var(--tsm)} .table th{ text-align:left;padding:var(--sp3) var(--sp4);font-weight:var(--fw6); color:var(--textMuted);border-bottom:1px solid var(--cardBorder);white-space:nowrap; } .table td{padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--cardBorder);color:var(--textPrimary)} .table tbody tr:hover{background:var(--sidebarActiveBg)} .table tbody tr:last-child td{border-bottom:none} .tableLink{background:none;border:none;padding:0;font:inherit;font-weight:var(--fw6);color:var(--moduleAccent);cursor:pointer;text-align:left} .tableLink:hover{text-decoration:underline} /* TableSorter — applied by tableSorter.js to sortable elements */ .thSortable{cursor:pointer;user-select:none} .thSortable:hover{color:var(--textPrimary)} .thSortAsc::after{content:' \25b2';font-size:.65em;opacity:.6;vertical-align:.1em} .thSortDesc::after{content:' \25bc';font-size:.65em;opacity:.6;vertical-align:.1em} /* SessionIdleWatcher — idle-timeout warning modal */ .sessionIdleOverlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);align-items:center;justify-content:center} .sessionIdleOverlay.open{display:flex} .sessionIdleCountdown{font-size:3rem;font-weight:700;line-height:1;color:var(--textPrimary);min-width:4rem;text-align:center;transition:color .3s} .sessionIdleUrgent{color:#ef4444!important} .modalOverlay{ display:none;position:fixed;inset:0; background:var(--overlayDim);backdrop-filter:var(--overlayBlur); z-index:200;align-items:center;justify-content:center;padding:var(--sp4); } .modalOverlay.open{display:flex} .modal{ background:var(--cardBg);border:1px solid var(--cardBorder);border-radius:var(--rXl); box-shadow:var(--shLg);width:100%;max-width:540px;max-height:90vh; display:flex;flex-direction:column;animation:modalIn var(--base) var(--ease); } .modalHeader{ padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--cardBorder); display:flex;align-items:center;justify-content:space-between; } .modalBody{padding:var(--sp5);overflow-y:auto;flex:1;min-height:0} .modalFooter{ padding:var(--sp4) var(--sp5);border-top:1px solid var(--cardBorder); display:flex;align-items:center;justify-content:flex-end;gap:var(--sp3);flex-shrink:0; } .modalClose{background:none;border:none;color:var(--textMuted);font-size:1.25rem;line-height:1;cursor:pointer;padding:var(--sp1);border-radius:var(--rMd)} .modalClose:hover{color:var(--textPrimary)} .badgeCaution{background:rgba(234,88,12,.15);color:#ea580c} .freeTldTableWrap{max-height:40vh;overflow:auto;border:1px solid var(--cardBorder);border-radius:var(--rMd)} .freeTldPopular{display:flex;flex-wrap:wrap;gap:var(--sp2)} .freeTldPopularRow{display:flex;align-items:center;gap:var(--sp2);padding:var(--sp1) var(--sp2);border:1px solid var(--cardBorder);border-radius:var(--rMd)} /* ─── 10a. TABS ──────────────────────────────────────────────────────────── */ .tabBar{display:flex;gap:0;border-bottom:2px solid var(--cardBorder);margin-bottom:var(--sp4);flex-wrap:wrap} .tabBtn{ background:none;border:none;padding:var(--sp3) var(--sp4);font-size:var(--tsm);font-weight:var(--fw6); color:var(--textMuted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px; display:flex;align-items:center;gap:var(--sp2);transition:color var(--base) var(--ease),border-color var(--base) var(--ease); } .tabBtn:hover{color:var(--textPrimary)} .tabBtn.active{color:var(--moduleAccent);border-bottom-color:var(--moduleAccent)} .tabLink{padding:var(--sp3) var(--sp4);font-size:var(--tsm);font-weight:var(--fw6);color:var(--textMuted);display:inline-flex;align-items:center;gap:var(--sp2);border-bottom:2px solid transparent;margin-bottom:-2px} /* ─── 10. ANIMATIONS ─────────────────────────────────────────────────────── */ @keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}} @keyframes pageEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .pageEnter{animation:pageEnter var(--slow) var(--ease)} .fadeIn{animation:fadeIn var(--base) var(--ease)} /* ─── 11. WIDGET DASHBOARD ───────────────────────────────────────────────── */ /* UMD Grid — widget canvas */ .umdGrid{width:100%;padding:var(--sp5)} .umdGridItem{position:relative;min-height:0;min-width:0} .umdGridItem>.umdGridItemContent{position:absolute;inset:4px;overflow:hidden} .umdGridItemDragging{opacity:.35;pointer-events:none} .umdGridPlaceholder{ border:2px dashed var(--umdBlue); border-radius:var(--rLg); background:rgba(0,102,204,.08); pointer-events:none; } /* Base widget card */ .widget{ background:var(--cardBg);border:1px solid var(--cardBorder);border-radius:var(--rLg); box-shadow:var(--shSm);display:flex;flex-direction:column;overflow:hidden; transition:box-shadow var(--base) var(--ease);position:relative;height:100%; } .widget:hover{box-shadow:var(--shMd)} /* Widget header */ .widgetHeader{ display:flex;align-items:center;justify-content:space-between; padding:var(--sp3) var(--sp4);border-bottom:1px solid var(--cardBorder); font-size:var(--txs);font-weight:var(--fw6);color:var(--textMuted); text-transform:uppercase;letter-spacing:.04em; } .widgetHeaderAccent{border-bottom-color:var(--moduleAccent);color:var(--moduleAccent)} .widgetBody{flex:1;padding:var(--sp4);overflow:hidden} /* Stat widget */ .wStat{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%} .wStatNum{font-size:var(--t3xl);font-weight:var(--fw7);color:var(--textPrimary);line-height:1} .wStatLabel{font-size:var(--txs);color:var(--textMuted);margin-top:var(--sp1)} .wStatTrend{ display:inline-flex;align-items:center;gap:2px; font-size:var(--txs);font-weight:var(--fw6);margin-top:var(--sp2); } .wStatTrendUp{color:var(--success)} .wStatTrendDown{color:#ef4444} .wStatTrendFlat{color:var(--textMuted)} /* Feed widget */ .wFeed{display:flex;flex-direction:column;gap:var(--sp2);overflow-y:auto;height:100%} .wFeedItem{ display:flex;align-items:flex-start;gap:var(--sp3); padding:var(--sp2) 0;border-bottom:1px solid var(--cardBorder); font-size:var(--txs); } .wFeedItem:last-child{border-bottom:none} .wFeedDot{width:8px;height:8px;border-radius:var(--rFull);background:var(--moduleAccent);flex-shrink:0;margin-top:3px} .wFeedText{color:var(--textSecondary);flex:1} .wFeedTime{color:var(--textMuted);white-space:nowrap} /* Calendar widget */ .wCalendar{display:flex;flex-direction:column;gap:var(--sp2);height:100%} .wCalItem{ display:flex;align-items:center;gap:var(--sp3); padding:var(--sp2) var(--sp3);border-radius:var(--rMd); background:var(--sidebarActiveBg);font-size:var(--txs); } .wCalTime{color:var(--moduleAccent);font-weight:var(--fw6);white-space:nowrap;min-width:48px} .wCalTitle{color:var(--textPrimary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Tasks widget */ .wTaskList{display:flex;flex-direction:column;gap:var(--sp2);overflow-y:auto;height:100%} .wTaskItem{display:flex;align-items:center;gap:var(--sp3);font-size:var(--txs);color:var(--textSecondary)} .wTaskCheck{width:16px;height:16px;border-radius:var(--rSm);border:1px solid var(--cardBorder);flex-shrink:0} .wTaskItem.done .wTaskCheck{background:var(--moduleAccent);border-color:var(--moduleAccent)} .wTaskItem.done .wTaskText{text-decoration:line-through;color:var(--textMuted)} /* Chart widget placeholder */ .wChart{display:flex;align-items:flex-end;gap:4px;height:100%;padding-bottom:var(--sp2)} .wChartBar{flex:1;background:var(--moduleAccent);border-radius:var(--rSm) var(--rSm) 0 0;opacity:.8;transition:opacity var(--fast) var(--ease)} .wChartBar:hover{opacity:1} /* Action widget */ .wActions{display:flex;flex-wrap:wrap;gap:var(--sp2);padding:var(--sp2)} .wActionBtn{ flex:1 1 calc(50% - var(--sp2)); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp1); padding:var(--sp3);border-radius:var(--rMd); background:var(--sidebarActiveBg);color:var(--textSecondary);font-size:var(--txs); text-align:center;cursor:pointer;transition:background var(--fast) var(--ease),color var(--fast) var(--ease); } .wActionBtn:hover{background:rgba(0,102,204,.15);color:var(--moduleAccent)} /* Leaderboard widget */ .wLeader{display:flex;flex-direction:column;gap:var(--sp2);height:100%} .wLeaderRow{display:flex;align-items:center;gap:var(--sp3);font-size:var(--txs)} .wLeaderRank{color:var(--textMuted);min-width:20px;text-align:right;font-weight:var(--fw6)} .wLeaderName{flex:1;color:var(--textPrimary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wLeaderBar{height:4px;border-radius:var(--rFull);background:var(--moduleAccent);transition:width var(--slow) var(--ease)} .wLeaderVal{color:var(--textMuted);min-width:32px;text-align:right} /* Edit mode */ .dashEditMode .widget{outline:2px dashed var(--shellBorder)} .dashEditMode .widget:hover{outline-color:var(--moduleAccent)} .widgetDragHandle{ position:absolute;top:var(--sp2);left:var(--sp2); color:var(--textMuted);cursor:grab;opacity:0;transition:opacity var(--fast) var(--ease); } .dashEditMode .widgetDragHandle{opacity:1} .widgetRemoveBtn{ position:absolute;top:var(--sp2);right:var(--sp2); width:20px;height:20px;border-radius:var(--rFull); background:var(--accentSecurity);color:#fff; display:flex;align-items:center;justify-content:center; font-size:10px;cursor:pointer;opacity:0;transition:opacity var(--fast) var(--ease); } .dashEditMode .widgetRemoveBtn{opacity:1} /* Resize handle — bottom-right corner of each widget */ .umdGridResizeHandle{ position:absolute;bottom:0;right:0; width:18px;height:18px; cursor:se-resize;opacity:0; transition:opacity var(--fast) var(--ease); background:linear-gradient(135deg,transparent 50%,var(--moduleAccent) 50%); border-bottom-right-radius:var(--rLg); } .dashEditMode .umdGridResizeHandle{opacity:.7} .dashEditMode .umdGridResizeHandle:hover{opacity:1} /* Widget catalog panel (slides in from right) */ .widgetCatalog{ position:fixed;top:var(--topbarH);right:0;bottom:0; width:280px;background:var(--shellBg);border-left:1px solid var(--shellBorder); z-index:85;display:flex;flex-direction:column; transform:translateX(100%);transition:transform var(--slow) var(--ease); box-shadow:var(--shLg); } .widgetCatalog.open{transform:translateX(0)} .widgetCatalogHeader{ padding:var(--sp4);border-bottom:1px solid var(--shellBorder); display:flex;align-items:center;justify-content:space-between; font-size:var(--tsm);font-weight:var(--fw6);color:var(--shellText); } .widgetCatalogBody{flex:1;overflow-y:auto;padding:var(--sp3)} .catalogGroup{margin-bottom:var(--sp4)} .catalogGroupLabel{font-size:var(--txs);font-weight:var(--fw6);color:var(--textMuted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--sp2)} .catalogItem{ display:flex;align-items:center;gap:var(--sp3); padding:var(--sp3);border-radius:var(--rMd); border:1px solid var(--cardBorder);background:var(--cardBg); margin-bottom:var(--sp2);cursor:grab; transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease); } .catalogItem:hover{background:var(--sidebarActiveBg);border-color:var(--moduleAccent)} .catalogItemIcon{width:32px;height:32px;border-radius:var(--rMd);background:var(--moduleAccent);display:flex;align-items:center;justify-content:center;flex-shrink:0} .catalogItemName{font-size:var(--txs);font-weight:var(--fw5);color:var(--textPrimary)} .catalogItemDesc{font-size:10px;color:var(--textMuted)} .catalogItemPlaced{opacity:.4;pointer-events:none;cursor:default} .catalogDragGhost{position:fixed;pointer-events:none;z-index:9999;display:flex;align-items:center;gap:var(--sp2);padding:var(--sp2) var(--sp3);border-radius:var(--rMd);background:var(--moduleAccent);color:#fff;font-size:var(--txs);font-weight:var(--fw5);box-shadow:0 4px 20px rgba(0,0,0,.45);white-space:nowrap} @media(max-width:768px){ .widgetCatalog{width:100%;border-left:none;border-top:1px solid var(--shellBorder);top:auto;bottom:0;height:60vh;transform:translateY(100%)} .widgetCatalog.open{transform:translateY(0)} } /* ─── THEME OVERRIDES ────────────────────────────────────────────────────── */ /* Auth pages (login, logout) */ body.authMode{padding-top:0} .authPage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp5)} .authCard{width:100%;max-width:420px} .authCardLg{width:100%;max-width:560px} /* User menu dropdown */ .userMenuWrap{position:relative} .userMenu{ position:absolute;top:calc(100% + var(--sp2));right:0; min-width:200px;background:var(--shellBg);border:1px solid var(--shellBorder); border-radius:var(--rLg);box-shadow:var(--shLg);z-index:110; display:none;flex-direction:column;overflow:hidden; animation:fadeIn var(--fast) var(--ease); } .userMenu.open{display:flex} .userMenuHeader{padding:var(--sp3) var(--sp4)} .userMenuDivider{height:1px;background:var(--shellBorder)} .userMenuItem{ display:flex;align-items:center;gap:var(--sp3); padding:var(--sp3) var(--sp4);font-size:var(--tsm);color:var(--shellTextMuted); cursor:pointer;text-decoration:none; transition:background var(--fast) var(--ease),color var(--fast) var(--ease); } .userMenuItem:hover{background:var(--sidebarActiveBg);color:var(--shellText);text-decoration:none} .userMenuItemDanger{color:var(--accentSecurity)} .userMenuItemDanger:hover{background:rgba(239,68,68,.1);color:var(--accentSecurity)} .userMenuOrg{display:flex;flex-direction:column;gap:var(--sp1);padding:var(--sp3) var(--sp4)} .userMenuOrgLabel{font-size:var(--txs);text-transform:uppercase;letter-spacing:.04em;color:var(--shellTextMuted)} .userMenuOrgSelect{ width:100%;padding:var(--sp2) var(--sp3);border:1px solid var(--shellBorder);border-radius:6px; background:var(--shellBg);color:var(--shellText);font-size:var(--tsm);cursor:pointer; } .userMenuOrgSelect:focus-visible{outline:none;border-color:var(--shellText)} .userMenuOrgSelect:disabled{opacity:.6;cursor:progress} [data-theme='dark-light']{ --pageBg:#f8fafc; --cardBg:#fff; --cardBorder:#e2e8f0; --textPrimary:#0f172a; --textSecondary:#475569; --textMuted:#94a3b8; --inputBg:#fff; --inputBorder:#cbd5e1; --shSm:0 1px 3px rgba(0,0,0,.08); --shMd:0 4px 12px rgba(0,0,0,.10); --shLg:0 8px 24px rgba(0,0,0,.12); --shTile:0 2px 8px rgba(0,0,0,.10); --shTileHover:0 6px 20px rgba(0,0,0,.18); } [data-theme='light']{ --shellBg:#fff; --shellBorder:#e2e8f0; --shellText:#0f172a; --shellTextMuted:#64748b; --topbarBg:#fff; --sidebarBg:#f8fafc; --sidebarActiveBg:rgba(0,102,204,.08); --sidebarActiveText:var(--moduleAccent); --pageBg:#f1f5f9; --cardBg:#fff; --cardBorder:#e2e8f0; --textPrimary:#0f172a; --textSecondary:#475569; --textMuted:#94a3b8; --inputBg:#fff; --inputBorder:#cbd5e1; --shTile:0 2px 8px rgba(0,0,0,.08); --shTileHover:0 6px 20px rgba(0,0,0,.15); } /* ─── Role Hierarchy Tree ────────────────────────────────────────────────── */ .rhChildren>.rhNode{padding-left:var(--sp5)} .rhCard{display:flex;align-items:center;gap:var(--sp3);padding:var(--sp3) var(--sp4);border-radius:var(--rMd);background:var(--sidebarActiveBg);border:1px solid var(--cardBorder);margin-bottom:var(--sp2);cursor:default;transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease)} .rhCard:hover{border-color:var(--moduleAccent)} .rhDragHandle{color:var(--textMuted);cursor:grab;flex-shrink:0} .rhDragHandle:active{cursor:grabbing} .rhDragging{opacity:.35;pointer-events:none} .rhGhost{position:fixed;pointer-events:none;z-index:9999;opacity:.9;box-shadow:0 8px 32px rgba(0,0,0,.45);transform:rotate(1.5deg) scale(1.03);transition:none} .rhGroupName{flex:1;font-size:var(--tsm);font-weight:var(--fw5);color:var(--textPrimary)} .rhMeta{flex-shrink:0} .rhChildren{border-left:2px solid var(--shellBorder);margin-left:var(--sp4)} .rhDropZone{display:flex;align-items:center;gap:var(--sp2);padding:var(--sp2) var(--sp3);border-radius:var(--rMd);border:1px dashed var(--cardBorder);color:var(--textMuted);font-size:var(--txs);cursor:default;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)} .rhChildZone{margin-top:var(--sp1);margin-left:var(--sp4)} .rhSiblingZone{padding:var(--sp1) var(--sp3);margin:var(--sp1) 0;opacity:.5} .rhSiblingZone:hover,.rhSiblingZone.rhDropOver{opacity:1} .rhDropOver{background:rgba(0,102,204,.1);border-color:var(--moduleAccent);color:var(--moduleAccent)} #rootDropZone{margin-bottom:var(--sp3)} .rhStatusError{color:var(--accentSecurity)} .permColHeader{display:flex;align-items:center;gap:var(--sp3);padding-bottom:var(--sp2);border-bottom:1px solid var(--cardBorder);margin-bottom:var(--sp1)} .permCheckCol{min-width:72px;text-align:center} .permFeatureRow{display:flex;align-items:center;gap:var(--sp3);padding:var(--sp2) 0;border-bottom:1px solid var(--cardBorder)} .permFeatureRow:last-child{border-bottom:none} .permCheckLabel{display:flex;align-items:center;justify-content:center;min-width:72px;cursor:pointer} .permModuleLayout{display:flex;overflow:hidden}.permModulePanel{flex:1;padding:var(--sp4) var(--sp5)} .permModuleNav{display:flex;flex-direction:column;min-width:190px;border-right:1px solid var(--cardBorder)} .permModuleNavItem{display:block;width:100%;padding:var(--sp3) var(--sp4);text-align:left;font-size:var(--tsm);color:var(--textMuted);cursor:pointer;background:none;border:none}.permModuleNavItem:hover{color:var(--textPrimary);background:var(--sidebarActiveBg)}.permModuleNavItem.active{color:var(--umdBlue);font-weight:var(--fw6);background:var(--sidebarActiveBg);border-left:2px solid var(--moduleAccent)} /* ── My Availability — view tabs + calendar ───────────────────────────────── */ .availTabBar{display:flex;gap:var(--sp2);flex-wrap:wrap} .availCal__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3)} .availCal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .availCal__dow{text-align:center;font-weight:var(--fw6);color:var(--textMuted);font-size:.72rem;padding:4px 0} .availCal__cell{min-height:84px;border:1px solid var(--cardBorder);border-radius:var(--rSm);background:var(--inputBg);padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:4px;user-select:none;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)} .availCal__cell:hover{border-color:var(--moduleAccent)} .availCal__cell--muted{background:transparent;border-color:transparent;cursor:default} .availCal__cell--today .availCal__num{color:var(--moduleAccent);font-weight:var(--fw7)} .availCal__cell--sel{border-color:var(--moduleAccent);background:color-mix(in srgb,var(--moduleAccent) 18%,var(--inputBg))} .availCal__num{font-size:.8rem;font-weight:var(--fw6);color:var(--textMuted)} .availCal__chips{display:flex;flex-direction:column;gap:2px;overflow:hidden} .availCal__chip{font-size:.66rem;line-height:1.3;padding:1px 5px;border-radius:var(--rSm);background:color-mix(in srgb,var(--moduleAccent) 24%,transparent);color:var(--textPrimary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .availCal__chip--wk{opacity:.55} .availCal__chip--off{background:rgba(229,72,77,.25);text-decoration:line-through} .availDayEditor{border-color:var(--moduleAccent)} @media (max-width:640px){.availCal__cell{min-height:62px}.availCal__chip{font-size:.58rem}} /* ─── 12. MARKETPLACE THEMES (~40 lines) ──────────────────────────────── */ /* Store theme overrides — data-store-theme on drives --moduleAccent */ [data-store-theme="blue"] { --moduleAccent:#0066cc; } [data-store-theme="teal"] { --moduleAccent:#0d9488; } [data-store-theme="amber"] { --moduleAccent:#d97706; } [data-store-theme="emerald"] { --moduleAccent:#059669; } [data-store-theme="purple"] { --moduleAccent:#7c3aed; } [data-store-theme="slate"] { --moduleAccent:#475569; } /* Marketplace lead card grid */ .marketplaceGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp4)} /* Lead score badge color driven by JS class assignment */ .badgeScore{background:var(--moduleAccent);color:#fff} .storeTopbarBrand{display:flex;align-items:center;gap:var(--sp3);font-weight:var(--fw6);color:var(--textPrimary)} .topbarLogo{height:28px;width:auto} .btnLoading{opacity:.6;pointer-events:none;cursor:wait} /* ─── MFA — setup + challenge ────────────────────────────────────────────── */ /* Enroll step: QR on the left, manual key on the right, stacks on narrow viewports */ .mfaEnrollGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp5);align-items:start} .mfaQrBox{background:#fff;border-radius:var(--rMd);padding:var(--sp3);box-shadow:var(--shSm);width:200px;max-width:100%} .mfaQrImage{display:block;width:100%;height:auto;image-rendering:pixelated} /* Manual setup key — monospace, selectable block */ .mfaSecretBlock{display:block;font-family:var(--fontMono);font-size:var(--tsm);letter-spacing:.08em;word-break:break-all;background:var(--inputBg);border:1px solid var(--inputBorder);border-radius:var(--rMd);color:var(--textPrimary);padding:var(--sp3);user-select:all} /* 6-digit verification / challenge code input */ .mfaCodeInput{font-family:var(--fontMono);font-size:var(--tlg);letter-spacing:.4em;text-align:center;max-width:200px} .mfaRecoveryInput{font-family:var(--fontMono);letter-spacing:.08em;max-width:280px} /* Recovery-code grid — one-time codes shown after verify */ .mfaRecoveryGrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp2)} .mfaRecoveryCode{font-family:var(--fontMono);font-size:var(--tsm);letter-spacing:.06em;background:var(--inputBg);border:1px solid var(--inputBorder);border-radius:var(--rSm);color:var(--textPrimary);padding:var(--sp2) var(--sp3);text-align:center;user-select:all} /* Copy/download confirmation state */ .btnCopied{color:var(--success);border-color:var(--success)} /* Toggle switch — boolean on/off control (security policy mfaRequired, etc.) */ .toggleSwitch{position:relative;display:inline-flex;align-items:center;cursor:pointer} .toggleSwitchInput{position:absolute;opacity:0;width:0;height:0} .toggleSwitchTrack{display:inline-block;width:38px;height:20px;border-radius:var(--rFull);background:var(--inputBorder);transition:background var(--base) var(--ease)} .toggleSwitchTrack::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--rFull);background:#fff;transition:transform var(--base) var(--ease)} .toggleSwitchInput:checked + .toggleSwitchTrack{background:var(--moduleAccent)} .toggleSwitchInput:checked + .toggleSwitchTrack::after{transform:translateX(18px)} .toggleSwitchInput:focus-visible + .toggleSwitchTrack{box-shadow:0 0 0 2px var(--moduleAccent)} .toggleSwitchInput:disabled + .toggleSwitchTrack{opacity:.4;cursor:not-allowed} /* ─── Locked / teaser nav affordance (per-org entitlement) ────────────────── */ .navLock{display:inline-flex;align-items:center;color:var(--textMuted)} .sidebarItem .navLock{margin-left:auto} .tileLocked,.sidebarItemLocked{opacity:.55} .tileLocked:hover,.sidebarItemLocked:hover{opacity:.85} .navTabLocked{opacity:.55;text-decoration:none} .navTabLocked:hover{opacity:.85} .entIndent{padding-left:var(--sp5)} /* Google Places autocomplete — host + injected gmp element matches umd02 dark form inputs */ .pac-container-wrapper{display:block;width:100%} .pac-container-wrapper gmp-place-autocomplete{ display:block;width:100%;background:var(--inputBg);border:1px solid var(--inputBorder); border-radius:var(--rMd); transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease); } .pac-container-wrapper gmp-place-autocomplete:focus-within{ border-color:var(--inputFocus);box-shadow:0 0 0 3px rgba(0,102,204,.2); } .pac-container-wrapper gmp-place-autocomplete input{ width:100%;background:transparent;border:0;color:var(--textPrimary); padding:var(--sp2) var(--sp3);font-size:var(--tsm);outline:none; } .pac-container-wrapper gmp-place-autocomplete input::placeholder{color:var(--textMuted)} /* ─── 20. SOLAR SYSTEM RECORD (partner integrations) ─────────────────────── */ /* One record surfacing inbound + outbound + SSO client + agent account. */ .solarRecord{display:block} .solarRecordHead{align-items:flex-start} /* Inline dot separator between org path and vertical in the header subtitle. */ .solarDot{display:inline-block;width:3px;height:3px;border-radius:var(--rFull);background:var(--textMuted);vertical-align:middle;margin:0 var(--sp2)} /* Sectioned blocks — INBOUND / OUTBOUND / SSO CLIENT / AGENT ACCOUNT */ .solarSection{border:1px solid var(--cardBorder);border-radius:var(--rMd);background:var(--inputBg);padding:var(--sp4)} .solarSectionHead{ display:flex;align-items:center;gap:var(--sp2); font-size:var(--txs);font-weight:var(--fw7);letter-spacing:.04em; color:var(--textSecondary);text-transform:uppercase;margin-bottom:var(--sp3); } .solarFlow{ font-weight:var(--fw6);letter-spacing:0;text-transform:none;color:var(--moduleAccent); background:var(--badgeAccentBg,rgba(0,102,204,.15));border-radius:var(--rFull); padding:0 var(--sp2);font-size:var(--txs); } /* Key/value grid inside each section */ .solarKv{display:flex;flex-direction:column;gap:var(--sp2);margin:0} .solarKvRow{display:grid;grid-template-columns:140px 1fr;gap:var(--sp3);align-items:baseline} .solarKv dt{font-size:var(--txs);color:var(--textMuted);font-weight:var(--fw6);margin:0} .solarKv dd{margin:0;font-size:var(--tsm);color:var(--textPrimary);word-break:break-all} .solarKv dd code{font-family:var(--fontMono);font-size:var(--txs)} /* Masked secret indicators — API never returns secret values */ .solarMask{font-family:var(--fontMono);font-size:var(--txs)} .solarMaskSet{color:var(--textSuccess,#10b981)} .solarMaskUnset{color:var(--textMuted)} /* Copy-once secrets panel rows */ .solarSecretRow{display:flex;flex-direction:column;gap:var(--sp1)} .solarSecretLabel{display:flex;align-items:center;gap:var(--sp2);font-size:var(--tsm);color:var(--textPrimary)} .solarSecretLabel code{font-family:var(--fontMono);font-size:var(--txs);color:var(--moduleAccent)} .solarSecretInput{flex:1;font-family:var(--fontMono);font-size:var(--txs)} @media (max-width:640px){ .solarKvRow{grid-template-columns:1fr;gap:var(--sp1)} } /* ═══════════════════════════════════════════════════════════════════════════ umd03's OWN rules — layered AFTER the inlined umd02 system so umd03 overrides still win (the exact cascade umd03 had before umd.css was inlined). ═══════════════════════════════════════════════════════════════════════════ */ /* Layout shim: drop #umd03Root from the box tree so the chrome it contains acts as direct body children and umd02's `body.sidebar* .shellContent`/`.sidebar` descendant selectors apply unchanged. */ #umd03Root { display: contents; } /* ─── Content-pane helpers (the part umd03 renders into umd02's .shellContent) ─ */ .featurePane { display: flex; flex-direction: column; flex: 1; } .featurePaneBody { display: flex; flex-direction: column; gap: var(--sp2); } .featurePaneCrumb { font-size: var(--txs); color: var(--textMuted); } .featurePaneTitle { font-size: var(--tlg); font-weight: var(--fw6); color: var(--textPrimary); } .featurePaneEmpty { padding: var(--sp5); font-size: var(--tsm); color: var(--textMuted); text-align: center; } .featurePaneNote { margin-top: var(--sp2); max-width: 60ch; font-size: var(--tsm); line-height: 1.5; } /* Alias so umd03 surfaces can use the semantic name `alertError`; the umd02 design system ships the visually-identical `.alert.alertDanger`. No new colors — reuses the imported umd02 danger palette. */ .alertError { background: rgba(239, 68, 68, .08); border-color: #ef4444; color: #ef4444; } /* ─── My Account (section-aware module-level native umd03 surface) ────────── Layout/spacing only — cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. ONE applet handles two sections (account_accountManagement | account_accountSecurity); each section owns its own in-page .tabBar (also umd02's). These rules only stack the surface, each section, and each tab. The Security tabs add three small layout pieces umd.css does not ship: the 2FA QR frame, the recovery-code list, and the active-session row. */ .accountSurface { display: flex; flex-direction: column; gap: var(--sp5); } .accountSection { display: flex; flex-direction: column; gap: var(--sp5); } .accountTab { display: flex; flex-direction: column; gap: var(--sp5); } /* 2FA QR — a bounded square frame for the server-supplied data: URI image. */ .accountMfaQr { display: block; width: 200px; height: 200px; padding: var(--sp2); background: #ffffff; border: 1px solid var(--cardBorder); border-radius: var(--rMd); } /* 2FA secret — monospace so the manual-entry key is unambiguous. */ .accountMfaSecret { font-family: monospace; letter-spacing: .05em; word-break: break-all; } /* Recovery codes — a compact monospace grid of display-once codes. */ .accountRecoveryList { display: flex; flex-wrap: wrap; gap: var(--sp2); margin: 0; padding: var(--sp3); list-style: none; background: var(--inputBg); border: 1px solid var(--cardBorder); border-radius: var(--rMd); } .accountRecoveryCode { font-family: monospace; font-size: var(--tsm); color: var(--textPrimary); } /* Active-session row — the current device gets an inline "This device" badge. */ .accountSessionBadge { margin-left: var(--sp2); } .homeSurface { display: flex; flex-direction: column; gap: var(--sp5); max-width: 720px; } /* ─── Your Data (GDPR Art.15 self-service) ────────────────────────────────── Layout/grouping only — cards, badges, alerts, buttons and modal all reuse umd02's umd.css design system verbatim. The consent CHIPS are the one piece umd.css does not ship: compact on/off channel pills built from existing palette variables (no new colors). */ .yourDataSurface { display: flex; flex-direction: column; gap: var(--sp5); max-width: 760px; } .yourDataGroup { display: flex; flex-direction: column; gap: var(--sp3); } .yourDataGroupTitle { font-size: var(--tsm); font-weight: var(--fw6); color: var(--textSecondary); } .yourDataDetail { display: flex; flex-direction: column; gap: var(--sp3); padding: var(--sp4); border-radius: var(--rMd); background: var(--sidebarActiveBg); } .yourDataChipRow { align-items: center; } .yourDataChip { display: inline-flex; align-items: center; padding: 2px var(--sp2); border: 1px solid transparent; border-radius: var(--rFull); font-family: inherit; font-size: var(--txs); font-weight: var(--fw6); line-height: 1.4; white-space: nowrap; cursor: pointer; transition: filter .12s ease, border-color .12s ease; } .yourDataChip:hover { filter: brightness(1.12); } .yourDataChip:focus-visible { outline: none; border-color: var(--moduleAccent); } .yourDataChip:disabled { cursor: not-allowed; opacity: .5; filter: none; } .yourDataChipOn { background: rgba(16, 185, 129, .15); color: #10b981; } .yourDataChipOff { background: rgba(100, 116, 139, .15); color: #94a3b8; } /* ─── My Inventory (My Things + Categories + Locations) ───────────────────── Layout/spacing only — cards, tables, badges, alerts, buttons, forms and modals all reuse umd02's umd.css design system verbatim. The two pieces umd.css does not ship are the category color SWATCH and the native color INPUT sizing. The swatch carries an ARBITRARY user-chosen hex, so it is an SVG whose `fill` is a presentation ATTRIBUTE (set in JS via setAttribute) — never a `style=""` attribute and never el.style — keeping the no-inline-style commandment intact. */ .myInventorySurface { display: flex; flex-direction: column; gap: var(--sp5); max-width: 920px; } /* Each section root stacks the same way the surface does. */ .myInventorySection { display: flex; flex-direction: column; gap: var(--sp5); } /* Category color swatch — fixed square, rounded; color comes from the SVG rect fill. */ .myInventorySwatch { width: 16px; height: 16px; flex: 0 0 auto; border-radius: var(--rSm); display: inline-block; vertical-align: middle; } /* The category/location cell on a unit row — swatch + label, kept inline. */ .myInventoryTagCell { align-items: center; } /* Native color picker, sized to sit beside the hex text field. */ .myInventoryColorInput { width: 44px; height: 38px; flex: 0 0 auto; padding: 2px; border: 1px solid var(--inputBorder); border-radius: var(--rSm); background: var(--inputBg); cursor: pointer; } /* ─── User Management (first native umd03 admin surface) ──────────────────── Layout/spacing only — stat tiles, cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .userManagementSurface { display: flex; flex-direction: column; gap: var(--sp5); } .userManagementTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── API Integrations (native umd03 admin surface) ───────────────────────── Layout/spacing only — cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .apiIntegrationsSurface { display: flex; flex-direction: column; gap: var(--sp5); } .apiIntegrationsTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Inventory Management (FIRST module-level native umd03 surface) ───────── Layout/spacing only — cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .inventorySurface { display: flex; flex-direction: column; gap: var(--sp5); } .inventoryTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Logistics (module-level native umd03 surface) ───────────────────────── Layout/spacing only — cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .logisticsSurface { display: flex; flex-direction: column; gap: var(--sp5); } .logisticsTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Marketplace (module-level native umd03 surface) ─────────────────────── Layout/spacing only — cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .marketplaceSurface { display: flex; flex-direction: column; gap: var(--sp5); } .marketplaceTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── CRM / Leads (section-aware module-level native umd03 surface) ────────── Layout/spacing only — stat tiles, cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. ONE applet handles five sections; each section owns its own in-page .tabBar (also umd02's). These rules only stack the surface, each section, and each tab. */ .crmSurface { display: flex; flex-direction: column; gap: var(--sp5); } .crmSection { display: flex; flex-direction: column; gap: var(--sp5); } .crmTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Appointments (section-aware module-level native umd03 surface) ───────── Layout/spacing only — the dashboard widget grid, cards, tables, badges, alerts, forms, the calendar month grid (reuses .table) and the confirm modal all reuse the umd02/umd03 design system verbatim. ONE applet handles the four sections; the My Availability section owns its own in-page .tabBar (calendar | manual). These rules only stack the surface and each feature tab. */ .appointmentsSurface { display: flex; flex-direction: column; gap: var(--sp5); } .appointmentsTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Accounting (section-aware module-level native umd03 surface) ─────────── Layout/spacing only — the dashboard widget grid, cards, stat tiles, the transaction table, badges and alerts all reuse the umd02/umd03 design system verbatim. ONE applet handles the two sections (widget dashboard + read-only Credit Management); neither section has feature tabs, so there is no .accountingTab. This rule only stacks the surface. */ .accountingSurface { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── HR (section-aware module-level native umd03 surface) ─────────────────── Layout/spacing only — the dashboard widget grid, stat cards, tables, badges, alerts, forms and the Promote/Transfer/Roles/Terminate + catalog modals all reuse the umd02/umd03 design system verbatim. ONE applet handles the four sections (widget dashboard + employee roster + job-title catalog + department catalog); the sections are list+modals with no in-page sub-tabs, so there is no .hrTab. This rule only stacks the surface. */ .hrSurface { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── eMail (section-aware module-level native umd03 surface) ──────────────── Layout/spacing only — the mailbox rail (.tabBar/.tabBtn), message table, badges, alerts, compose form and the Add-Mailbox / Assign-Access modals all reuse the umd02/umd03 design system verbatim. ONE applet handles the three sections (Inbox + Compose + Mailbox Access). The Inbox needs a two-pane list+read layout and a sandboxed reading-pane iframe umd.css does not ship, so those small pieces live here; this rule only stacks the surface. */ .emailSurface { display: flex; flex-direction: column; gap: var(--sp5); } /* Inbox two-pane layout: message list beside the reading pane, collapsing to a single column on narrow viewports. */ .emailInboxLayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp4); align-items: start; } @media (max-width: 900px) { .emailInboxLayout { grid-template-columns: 1fr; } } .emailReadPane { min-height: 240px; } /* Highlight the message row whose body is open in the reading pane. */ .emailRowActive { background: var(--cardBorder); } /* Plain-text (non-HTML) message body — wraps + preserves newlines; rendered via textContent only (never parsed as HTML). */ .emailReadText { white-space: pre-wrap; word-break: break-word; line-height: 1.5; } /* The reading-pane isolation boundary: untrusted, server-sanitized email HTML is rendered ONLY as the srcdoc of this SANDBOXED iframe (empty sandbox attribute — no scripts, no same-origin). White canvas so dark-styled inbound HTML stays legible. */ .emailReadFrame { width: 100%; min-height: 320px; border: 1px solid var(--cardBorder); border-radius: var(--rMd); background: #ffffff; } /* ─── Security (section-aware module-level native umd03 surface) ───────────── Layout/spacing only — the dashboard widget grid, RBAC hierarchy tree (.rh*), permission matrix (.perm*), policy/IP tables, toggle switches, badges, alerts, forms and the lockout-confirm modal all reuse the umd02/umd03 design system verbatim. ONE applet handles the ten sections; each section owns its own in-page .tabBar where it needs sub-tabs (Authorization / Policies). This rule only stacks the surface. */ .securitySurface { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── SEO Intelligence (section-aware module-level native umd03 surface) ───── Layout/spacing only — stat tiles, cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. ONE applet handles the Wave A sections; each section owns its own in-page .tabBar (also umd02's). These rules only stack the surface, each section, and each tab (no charts in Wave A). */ .seoSurface { display: flex; flex-direction: column; gap: var(--sp5); } .seoSection { display: flex; flex-direction: column; gap: var(--sp5); } .seoTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Sage Galaxy (section-aware module-level native umd03 surface) ────────── Layout/spacing only — stat tiles, cards, tables, badges, alerts and forms all reuse umd02's umd.css design system verbatim. ONE applet owns its own in-page .tabBar PLUS a per-applet Sage-site selector ABOVE the bar (a second scoping axis distinct from the global org switcher). These rules only stack the surface, each tab, and the stat grid. */ .sageGalaxySurface { display: flex; flex-direction: column; gap: var(--sp5); } .sageGalaxyTab { display: flex; flex-direction: column; gap: var(--sp5); } .sageGalaxyStatGrid { align-items: stretch; } .sageGalaxyStatGrid > .statCard { min-width: 140px; flex: 1 1 140px; } /* ─── SEO Wave B — dashboard / pages / health layout + the trend line chart ── Layout only; all colours reuse umd02's umd.css tokens. The chart is SVG built ONLY via createElementNS; stroke/fill are SVG ATTRIBUTES on the nodes, and the per-series colour comes from these CSS classes on the — never el.style. */ .seoStatGrid { align-items: stretch; } .seoStatGrid > .statCard { min-width: 140px; flex: 1 1 140px; } .seoRecLine { padding: var(--sp2) 0; border-bottom: 1px solid var(--cardBorder); } .seoRecLine:last-child { border-bottom: 0; } .seoChart { width: 100%; } .seoLineChart { display: block; width: 100%; height: auto; max-height: 240px; } /* Baseline axis + series strokes — colours straight from umd02 tokens. */ .seoAxis { stroke: var(--cardBorder); stroke-width: 1; } .seoSeriesLine { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .seoSeriesSessions { stroke: var(--moduleAccent); } .seoSeriesLeads { stroke: var(--success); } .seoChartLegend { margin-top: var(--sp3); } .seoLegendSwatch { width: 12px; height: 12px; border-radius: var(--sp1); display: inline-block; } /* The legend swatch shares the series colour; here it is a BACKGROUND fill (a div, not SVG) so it uses the same token as the matching polyline stroke. */ .seoLegendSwatch.seoSeriesSessions { background: var(--moduleAccent); } .seoLegendSwatch.seoSeriesLeads { background: var(--success); } /* ─── SEO Wave C — bar chart + a third trend series (sold) ─────────────────── The bar chart is SVG built ONLY via createElementNS; geometry is set as SVG ATTRIBUTES on the nodes, and the bar fill / track / text colours come from these CSS classes — never el.style. Reuses umd02's umd.css design tokens. */ .seoBarChart { display: block; width: 100%; height: auto; } .seoBarTrack { fill: var(--cardBorder); opacity: 0.4; } .seoBarFill { fill: var(--moduleAccent); } .seoBarLabel { fill: var(--textSecondary); font-size: 12px; } .seoBarValue { fill: var(--textPrimary); font-size: 12px; font-weight: 600; } /* Third trend series (sold) — used by the acquisition trend line + its legend. */ .seoSeriesSold { stroke: var(--accentMarketing); } .seoLegendSwatch.seoSeriesSold { background: var(--accentMarketing); } /* ─── SEO Wave D — Realtime (the live view) ────────────────────────────────── Layout only; all colours reuse umd02's umd.css tokens. The sparkline is the shared SVG line chart (.seoLineChart, built ONLY via createElementNS). These rules just stack the recent-activity feed and keep its long URL cell from pushing the row — no colours, no inline styles. */ .seoLiveBadge { align-self: center; } .seoRealtimeFeed { max-height: 360px; overflow-y: auto; } .seoRealtimeFeedLine { padding: var(--sp1) 0; border-bottom: 1px solid var(--cardBorder); } .seoRealtimeFeedLine:last-child { border-bottom: 0; } .seoRealtimeFeedTime { flex: 0 0 auto; font-variant-numeric: tabular-nums; } /* The URL is the flexible cell — it takes the slack and truncates rather than wrap. */ .seoRealtimeFeedUrl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seoRealtimeFeedSession { flex: 0 0 auto; } /* ─── Product Passport (native umd03 module surface) ──────────────────────── Layout/spacing only — the cards, tables, alerts and forms all reuse umd02's umd.css design system verbatim. A SMALL, READ-ONLY surface; the applet owns its single in-page .tabBar (also umd02's); these rules only stack the surface and the tab. */ .passportSurface { display: flex; flex-direction: column; gap: var(--sp5); } .passportTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── API Key Management (native umd03 admin surface) ─────────────────────── Layout/spacing only — stat tiles, cards, tables, badges, alerts, forms and the modals (including the reveal-once modal) all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .apiKeyManagementSurface { display: flex; flex-direction: column; gap: var(--sp5); } .apiKeyManagementTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── cPanel Server Management (native umd03 admin surface) ───────────────── Layout/spacing only — cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .cpanelServerManagementSurface { display: flex; flex-direction: column; gap: var(--sp5); } .cpanelServerManagementTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Menu Management (native umd03 admin surface) ────────────────────────── Layout/spacing only — cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .menuManagementSurface { display: flex; flex-direction: column; gap: var(--sp5); } .menuManagementTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Group Management (native umd03 admin surface) ───────────────────────── Layout/spacing only — stat tiles, cards, tables, badges, alerts, forms and the modals all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .groupManagementSurface { display: flex; flex-direction: column; gap: var(--sp5); } .groupManagementTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Hosting Account Management (native umd03 admin surface) ──────────────── Layout/spacing only — stat tiles, cards, tables, badges and alerts all reuse umd02's umd.css design system verbatim. READ-ONLY surface: no modals/forms. The applet owns its own in-page .tabBar (also umd02's); these rules only stack the surface and each tab. */ .hostingAccountManagementSurface { display: flex; flex-direction: column; gap: var(--sp5); } .hostingAccountManagementTab { display: flex; flex-direction: column; gap: var(--sp5); } /* ─── Hosting Products (native umd03 admin surface — the SELLER product-definition surface; a provider agency defines the cPanel hosting products it sells and UMD proxies each to marzuni's catalog). Layout/spacing only — cards, table, badges, alerts and the create/edit modal all reuse umd02's umd.css design system verbatim. The applet owns its own in-page .tabBar; these rules only stack the surface and each tab (mirrors the hostingAccountManagement surface above). */ .hostingProductManagementSurface { display: flex; flex-direction: column; gap: var(--sp5); } .hostingProductManagementTab { display: flex; flex-direction: column; gap: var(--sp5); } /* Per-term pricing overlay rows in the hosting product modal — lay the term