/* 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; --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:#10b981} .textDanger{color:#ef4444} .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} .flexWrap{flex-wrap:wrap} .itemsStart{align-items:flex-start} .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)} .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:#10b981;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)} .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:#10b981} .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} .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:#10b981;color:#10b981} .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} .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} .modalFooter{ padding:var(--sp4) var(--sp5);border-top:1px solid var(--cardBorder); display:flex;align-items:center;justify-content:flex-end;gap:var(--sp3); } .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)} /* ─── 10a. TABS ──────────────────────────────────────────────────────────── */ .tabBar{display:flex;gap:0;border-bottom:2px solid var(--cardBorder);margin-bottom:var(--sp4)} .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)} /* ─── 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:#10b981} .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}