/* ============================================================ SKAS Portal — Shell v2 styles Injected header menus + fixed collapsible sidebar. Everything is sk- prefixed and only applies when has .sk-active, so the legacy UI is untouched when the shell is off. ============================================================ */ :root { --sk-sidebar-w: 210px; --sk-sidebar-w-collapsed: 54px; --sk-top: 88px; /* overwritten by shell.js with measured nav height */ --sk-accent: #4f46e5; --sk-accent-soft: #eef2ff; --sk-text: #1e293b; --sk-text-muted: #64748b; --sk-border: #e2e8f0; } /* ---------- Top-bar grouped menus (inserted into existing nav) ---------- */ #skTopMenus { display: flex; align-items: center; gap: 4px; } .sk-menu { position: relative; } .sk-menu > button { border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sk-text-muted); padding: 9px 14px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; } .sk-menu > button:hover, .sk-menu.open > button { background: #f1f5f9; color: var(--sk-text); } .sk-menu .sk-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; background: #ffffff; border: 1px solid var(--sk-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); padding: 6px; z-index: 400; } .sk-menu.open .sk-dropdown { display: block; } .sk-dropdown button { display: block; width: 100%; text-align: left; border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--sk-text); padding: 10px 14px; border-radius: 9px; cursor: pointer; } .sk-dropdown button:hover { background: var(--sk-accent-soft); color: var(--sk-accent); } .sk-logout-btn { border: 1px solid var(--sk-border); background: transparent; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sk-text-muted); padding: 9px 14px; border-radius: 10px; cursor: pointer; margin-left: 6px; } .sk-logout-btn:hover { color: #dc2626; border-color: #fecaca; } /* ---------- Sidebar ---------- */ #skSidebar { position: fixed; left: 0; top: var(--sk-top); bottom: 0; width: var(--sk-sidebar-w); background: #f8fafc; border-right: 1px solid var(--sk-border); padding: 12px 8px 8px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; z-index: 40; transition: width 0.18s ease; } body.sk-collapsed #skSidebar { width: var(--sk-sidebar-w-collapsed); padding-left: 6px; padding-right: 6px; } /* Push the dashboard content right of the rail */ body.sk-active #reportSection { padding-left: var(--sk-sidebar-w); transition: padding-left 0.18s ease; } body.sk-active.sk-collapsed #reportSection { padding-left: var(--sk-sidebar-w-collapsed); } /* Keep the sticky header full-bleed above the rail */ body.sk-active #reportSection > nav { margin-left: calc(-1 * var(--sk-sidebar-w)); padding-left: calc(1.5rem + var(--sk-sidebar-w)); } body.sk-active.sk-collapsed #reportSection > nav { margin-left: calc(-1 * var(--sk-sidebar-w-collapsed)); padding-left: calc(1.5rem + var(--sk-sidebar-w-collapsed)); } .sk-group-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; margin: 14px 10px 6px; white-space: nowrap; } .sk-group-label:first-child { margin-top: 2px; } body.sk-collapsed .sk-group-label { visibility: hidden; height: 6px; margin: 8px 0 2px; } .sk-item { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--sk-text-muted); padding: 9px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; overflow: visible; position: relative; } .sk-item svg { width: 18px; height: 18px; flex-shrink: 0; } .sk-item:hover { background: #eef2f7; color: var(--sk-text); } .sk-item.active { background: var(--sk-accent-soft); color: var(--sk-accent); font-weight: 700; } /* Collapsible sub-group (e.g. Outreach -> Mothership IN/OUT) */ .sk-caret { margin-left: auto; font-size: 9px; opacity: .65; transition: transform .15s ease; } .sk-parent.open .sk-caret { transform: rotate(180deg); } .sk-subitems { display: none; } .sk-parent.open + .sk-subitems { display: block; } .sk-subitem { padding-left: 34px; font-size: 12.5px; } body.sk-collapsed .sk-caret { display: none; } body.sk-collapsed .sk-subitems { display: none !important; } /* Redundant homepage buttons — these actions now live under the Actions menu. !important overrides the inline display set by index.html's hideButtonIf(). */ body.sk-active button[onclick="openAddClient()"], body.sk-active button[onclick="openSignup()"], body.sk-active #logHoursBodyWrap { display: none !important; } /* Data / Reports / Billing now open as Insights sidebar tabs, so hide the old top-bar dropdown buttons. !important beats hideDropdownIfEmpty()'s inline style. */ body.sk-active #dataDropdownWrap, body.sk-active #reportsDropdownWrap, body.sk-active #billingDropdownWrap { display: none !important; } body.sk-collapsed .sk-item { justify-content: center; padding: 10px 0; } body.sk-collapsed .sk-item .sk-item-label { display: none; } body.sk-collapsed .sk-item:hover::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #1e293b; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px; white-space: nowrap; z-index: 500; pointer-events: none; } /* ---------- Collapse toggle ---------- */ .sk-collapse-btn { margin-top: auto; border: none; background: transparent; color: var(--sk-text-muted); font: inherit; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; } .sk-collapse-btn:hover { background: #eef2f7; color: var(--sk-text); } .sk-collapse-btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.18s ease; } body.sk-collapsed .sk-collapse-btn { justify-content: center; } body.sk-collapsed .sk-collapse-btn svg { transform: rotate(180deg); } body.sk-collapsed .sk-collapse-btn .sk-item-label { display: none; } /* ---------- Small screens: force icon rail ---------- */ @media (max-width: 900px) { body.sk-active #skSidebar { width: var(--sk-sidebar-w-collapsed); } body.sk-active #reportSection { padding-left: var(--sk-sidebar-w-collapsed); } body.sk-active #reportSection > nav { margin-left: calc(-1 * var(--sk-sidebar-w-collapsed)); padding-left: calc(1.5rem + var(--sk-sidebar-w-collapsed)); } body.sk-active .sk-group-label { visibility: hidden; height: 6px; margin: 8px 0 2px; } body.sk-active .sk-item { justify-content: center; padding: 10px 0; } body.sk-active .sk-item .sk-item-label { display: none; } }