:root { /* ========================================================================== ECVALLA Helpdesk — "Command Deck" theme A deep-space, glass-and-gold visual language: MODAD/ECVALLA's own dark- charcoal + champagne-gold identity (sampled from the real ecvalla.com site — see the brand-accent note below) pushed further into a premium, futuristic "mission control" feel, plus the existing violet→blue→teal AI gradient (--ai-grad, already used for AI-assisted UI) now used more broadly as the system's "intelligence" signature glow. Two accents, one story: gold = the brand's real-estate heritage, the cool gradient glow = the AI layer running underneath it. Nothing here is an invented third identity — it's the two colors already established in this codebase, used with more conviction. ========================================================================== */ /* ---- categorical palette (dataviz skill reference) — same hues, lifted a touch in lightness so they still read clearly on a near-black ground instead of the previous warm-ivory one ---- */ --cat-1: #3a8ee6; --cat-2: #ef7c46; --cat-3: #2cc48d; --cat-4: #f0ac1f; --cat-5: #ef8fb6; --cat-6: #2ecc71; --cat-7: #8f7de8; --cat-8: #f0605f; --status-good: #2ecc71; --status-warning: #fbbf3d; --status-serious: #ff9466; --status-critical: #ff5c5c; /* ---- deep space ground ---- */ --void: #05060a; --page-plane: #0a0c14; --surface: rgba(255,255,255,.035); --surface-solid: #12141f; --surface-2: rgba(255,255,255,.06); --ink-primary: #f4f1ea; --ink-secondary: #a9acbb; --ink-muted: #6d7185; --gridline: rgba(255,255,255,.09); --baseline: rgba(255,255,255,.16); --border: rgba(255,255,255,.10); --border-soft: rgba(255,255,255,.08); --glass-highlight: rgba(255,255,255,.06); /* ---- ECVALLA/MODAD brand gold — the same hue already sourced from the real ecvalla.com site, brightened slightly so it reads as a glow against near-black rather than just a dark-mode text color ---- */ --brand-dark: #05060a; --brand-primary: #0d0f1a; --brand-accent: #d8b370; --brand-accent-strong: #e8c988; --brand-accent-soft: rgba(216,179,112,.14); --brand-glow: rgba(216,179,112,.40); /* Gold used as FOREGROUND text/icon color (links, outline buttons, the topbar notification bell) — same light gold as --brand-accent-strong in dark mode, redefined to a much deeper bronze under the light theme below so it stays readable on a white page. Gold used as a BACKGROUND (buttons, "mine" chat bubbles, the sidebar, which always carries its own dark text) never uses this token — it's unaffected by the toggle on purpose. */ --brand-accent-ink: var(--brand-accent-strong); --status-warning-ink: var(--status-warning); /* ---- AI signature glow — the same gradient already reserved for AI-assisted UI, now the system's ambient "intelligence" accent ---- */ --ai-grad: linear-gradient(120deg, #6a5bd6, #2a78d6 55%, #17b3a3); --ai-glow: rgba(106,91,214,.35); --ai-glow-2: rgba(23,179,163,.30); } /* --------------------------------------------------------------------- Light theme — same component structure and the same two brand accents (gold + the AI gradient); only the "ground" (page background, glass surfaces, borders, ink) flips from near-black to near-white. Toggled from the topbar sun/moon button (base.html), remembered per-browser in localStorage — see the inline script in base.html's that sets this attribute before first paint so a saved choice never flashes dark first. Deliberately does NOT touch the sidebar, the login screen or the public landing page — those keep the dark "Command Deck" look in both modes (no toggle is offered on any of them), so only the tokens the authenticated content area actually renders with are redefined here. --------------------------------------------------------------------- */ :root[data-bs-theme="light"] { --void: #eef0f5; --page-plane: #f2f3f7; --surface: rgba(20,24,42,.035); --surface-solid: #ffffff; --surface-2: rgba(20,24,42,.055); --ink-primary: #1b1d2a; --ink-secondary: #565a70; --ink-muted: #8a8fa3; --gridline: rgba(20,24,42,.10); --baseline: rgba(20,24,42,.16); --border: rgba(20,24,42,.12); --border-soft: rgba(20,24,42,.08); --glass-highlight: rgba(20,24,42,.04); --brand-accent-ink: #7a5710; --status-warning-ink: #a1690a; } /* The ambient gold/AI "nebula" glow behind every page reads as a rich accent against near-black; against a light page it just looks like a muddy stain, so light mode drops it and relies on the flat --page-plane color instead. */ :root[data-bs-theme="light"] body { background-image: none; } /* Every font-size, padding and gap in this file is written in rem, so this one line re-scales the whole app at once — every element's size RELATIVE to every other stays exactly as tuned, just ~12% smaller overall. That's the fix for "the tools/fonts feel too big" everywhere at once (dense tables, form fields, badges, buttons, the icon picker grid) instead of hand-tuning dozens of components out of sync with each other. 16px (browser default) was simply too loose for a dense admin tool; 14px is the same convention GitHub/Linear-style dashboards use. */ html { font-size: 14px; } * { font-family: 'Cairo', 'Segoe UI', sans-serif; } html, body { background: var(--page-plane); } body { color: var(--ink-primary); min-height: 100vh; /* Ambient nebula — three soft, fixed glow blobs (gold + the two AI gradient hues) behind everything. Pure CSS, no image/canvas, so it costs nothing on pages that render a lot of data (the tickets table, reports). The literal motion/starfield lives only on the login screen (see login.html) — a daily-use work tool should not have something drifting behind a table someone is trying to read all day. */ background-image: radial-gradient(ellipse 900px 600px at 85% -10%, var(--brand-glow) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at -10% 15%, var(--ai-glow) 0%, transparent 55%), radial-gradient(ellipse 800px 700px at 100% 100%, var(--ai-glow-2) 0%, transparent 55%); background-repeat: no-repeat; background-attachment: fixed; } ::selection { background: var(--brand-accent); color: var(--brand-dark); } /* Thin, dark scrollbars — a default light scrollbar track is the one thing that visibly breaks a dark UI on Windows/Chrome if left alone. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--border); } /* ---------------------------------------------------------------- login */ .login-wrapper { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(ellipse 1200px 800px at 50% 0%, #12142280, transparent 65%), var(--brand-dark); } .login-wrapper canvas#loginBg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .login-wrapper::after { /* soft vignette so the card always stays readable over the animation */ content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(10,10,16,.10), rgba(5,6,10,.82) 72%); z-index: 1; pointer-events: none; } .login-wordmark { position: relative; z-index: 2; text-align: center; margin-bottom: 1.75rem; } .login-wordmark .mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--brand-accent); color: var(--brand-accent); font-size: 1.4rem; margin-bottom: 1rem; box-shadow: 0 0 28px var(--brand-glow), inset 0 0 14px rgba(216,179,112,.12); background: rgba(216,179,112,.05); } .login-wordmark .name { color: #fff; font-weight: 800; font-size: 1.8rem; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 0 24px rgba(255,255,255,.15); } .login-wordmark .tagline { color: var(--brand-accent-strong); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .4rem; opacity: .95; } /* A clear, visible (not tiny) look at the AI assistant right at the door — the one AI-forward literal image on the whole site outside the chat widget itself, placed here deliberately: this renders once per session (login), so it costs nothing on the pages people actually work in all day, unlike a per-page hero image would. Real copy only (the same strings the chat widget itself uses) — no invented claim about what it can do. */ .login-ai-intro { position: relative; z-index: 2; display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; padding: .55rem 1.1rem .55rem .55rem; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid rgba(216,179,112,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgba(0,0,0,.35); } .login-ai-avatar { width: 72px; height: 72px; flex-shrink: 0; } .login-ai-intro-title { color: #fff; font-weight: 700; font-size: .92rem; } .login-ai-intro-sub { color: var(--brand-accent-strong); font-size: .74rem; opacity: .9; } .login-card { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 2.5rem; border-radius: 18px; width: 100%; max-width: 400px; border: 1px solid var(--border); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 60px rgba(216,179,112,.08), inset 0 1px 0 rgba(255,255,255,.06); border-top: 2px solid var(--brand-accent); } /* "Sign in with Microsoft" — sits above the plain email/password form (see login.html) as the primary path once 365 SSO is configured (config.MS_LOGIN_ENABLED). Deliberately its own look, not the gold btn-outline-primary used elsewhere: this button identifies a specific external identity provider, not an in-app action, so it keeps a neutral white surface (matching how Microsoft's own sign-in buttons read everywhere else) rather than borrowing the brand's gold. The 4-square mark is drawn in plain CSS, not an imported logo asset. */ .btn-ms-login { display: flex; align-items: center; justify-content: center; gap: .6rem; background: #fff; color: #1b1b1b; font-weight: 600; font-size: .92rem; padding: .62rem 1rem; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; } .btn-ms-login:hover { background: #f4f4f4; color: #1b1b1b; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .btn-ms-login:active { transform: translateY(1px); } .btn-ms-login-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 17px; height: 17px; flex-shrink: 0; } .btn-ms-login-logo span:nth-child(1) { background: #f25022; } .btn-ms-login-logo span:nth-child(2) { background: #7fba00; } .btn-ms-login-logo span:nth-child(3) { background: #00a4ef; } .btn-ms-login-logo span:nth-child(4) { background: #ffb900; } .login-divider { display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.45); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.16); } /* --------------------------------------------------------------- layout */ .sidebar { width: 240px; flex-shrink: 0; height: 100vh; /* 100dvh ("dynamic" viewport height) tracks the ACTUAL visible area on phones, where 100vh is measured against the browser chrome fully collapsed — so as the URL bar/toolbar shows or hides while scrolling, a plain 100vh sidebar visibly grows/shrinks/jumps under it. Every modern mobile browser supports dvh; this line simply wins the cascade over the 100vh above wherever it's understood, and is silently ignored (falling back to the line above) anywhere it isn't — so desktop is completely unaffected either way. */ height: 100dvh; background: linear-gradient(180deg, #0b0d16, #05060a 85%); color: #dbe4f5; display: flex; flex-direction: column; border-inline-end: 1px solid var(--border-soft); /* The sidebar itself never scrolls with the page — its box is pinned at exactly one viewport tall (see body.app-shell-active below, which stops the page/document from scrolling at all). If the nav list itself ever grows taller than the screen, IT scrolls internally rather than pushing the layout or disappearing off-screen. */ overflow-y: auto; } /* Stacked, not a single squeezed row: the wordmark gets its own full-width line (so the brand name itself is NEVER the thing that gets truncated — it used to be, when it shared one row with the eyebrow text and the admin alerts bell and lost the fight for space), with the eyebrow text and, for admins, the alerts bell on a second row underneath. */ .sidebar-brand { padding: 1.1rem 1rem; color: #fff; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: .3rem; } .sidebar-brand-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .sidebar-brand i { color: var(--brand-accent); filter: drop-shadow(0 0 6px var(--brand-glow)); } .sidebar-brand-eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The real ECVALLA wordmark, reproduced as styled text — not the flat PNG the brand file was sent as, which carried its own dark backing rectangle and looked like a patch against any other background. Same thin high-contrast serif, same wide tracking, same small ™ — just rendered natively (now in a real bold cut, not a browser-faked one) so it sits flush on our own dark surface instead of showing a second, mismatched black box. */ .brand-wordmark { font-family: 'Playfair Display', 'Cairo', serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; font-size: 1.18rem; white-space: nowrap; text-shadow: 0 0 22px var(--brand-glow); } .brand-wordmark-lg { font-size: 1.3rem; letter-spacing: .18em; } .brand-tm { font-size: .5em; letter-spacing: 0; vertical-align: super; margin-inline-start: .15em; opacity: .85; font-family: 'Cairo', sans-serif; text-shadow: none; } .sidebar-brand-sep { color: var(--border); font-weight: 400; } .sidebar-brand-sub { color: var(--ink-muted); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; } /* ------------------------------------------------------------ alerts bell */ /* A round chip the same height/shape as the .topbar-user pill next to it (was a bare icon glyph with no container at all — noticeably smaller and a different shape than its neighbor, which read as inconsistent). */ .alerts-bell { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: #8b8fa3; border: 1px solid var(--border-soft); border-radius: 50%; background: var(--surface-2); padding: 0; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .alerts-bell i { font-size: .95rem; } .alerts-bell:hover { color: #fff; } .alerts-bell.has-alerts { color: var(--brand-accent); filter: drop-shadow(0 0 5px var(--brand-glow)); } /* Same near-black gradient chip as .topbar-user in dark mode, so the two sit as a matched pair instead of two different button styles. */ [data-bs-theme="dark"] .alerts-bell { background: linear-gradient(180deg, rgba(9,10,17,.94), rgba(3,4,7,.97)); border-color: rgba(216,179,112,.22); box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04); } [data-bs-theme="dark"] .alerts-bell:hover { background: linear-gradient(180deg, rgba(13,15,25,.96), rgba(4,5,9,.98)); border-color: rgba(216,179,112,.4); box-shadow: 0 4px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(216,179,112,.1), inset 0 1px 0 rgba(255,255,255,.05); } /* The topbar's personal notification bell sits over the (theme-aware) content area, unlike the admin system-alerts bell above it which lives in the permanently-dark sidebar — so only this one needs to darken in light mode. Wins on specificity over the rule above. */ .topbar .alerts-bell.has-alerts { color: var(--brand-accent-ink); } /* The personal topbar bell reads as gold at all times (not just when there are unread alerts) — a soft, muted gold at rest, full brand gold + glow on hover, so it always matches the rest of the gold accent language instead of defaulting to plain grey when the inbox is empty. */ .topbar .alerts-bell { color: var(--brand-accent-ink); opacity: .68; } .topbar .alerts-bell:hover { opacity: 1; color: var(--brand-accent-ink); filter: drop-shadow(0 0 5px var(--brand-glow)); } .topbar .alerts-bell.has-alerts { opacity: 1; } .alerts-badge { position: absolute; top: -2px; inset-inline-end: -2px; background: var(--status-critical); color: #fff; font-size: .62rem; font-weight: 700; line-height: 1; border-radius: 999px; padding: .15rem .35rem; min-width: 16px; text-align: center; box-shadow: 0 0 8px rgba(255,92,92,.6); } .alerts-menu { width: 340px; max-height: 420px; overflow-y: auto; } .alert-row { display: flex; align-items: flex-start; gap: .5rem; padding: .3rem 0; } .alert-row.alert-critical { color: var(--status-critical); } .alert-row.alert-warning { color: var(--status-warning-ink); } .alert-row i { margin-top: .15rem; flex-shrink: 0; } .alert-row .small { color: var(--ink-primary); white-space: normal; line-height: 1.4; } /* Alerts that link somewhere (see integrations/health.py's "link" key) get a trailing chevron and behave like any other clickable dropdown-item; ones with no sensible destination (a stale poller, low disk) stay plain text so nothing here promises an action that doesn't exist. */ .alert-row-item { white-space: normal; } .alert-row-chevron { margin-inline-start: auto; align-self: center; font-size: .7rem; opacity: .55; } [dir="rtl"] .alert-row-chevron { transform: scaleX(-1); } /* Personal notification bell (topbar, every signed-in user) — reuses the admin system-alerts bell's look (.alerts-bell/.alerts-badge/.alerts-menu above) so the two read as one family, but each row here is a real link to the ticket it's about, not plain informational text. */ .notif-menu { width: 400px; isolation: isolate; } .notif-markall { color: var(--brand-accent-ink); font-size: .76rem; text-decoration: none; } .notif-markall:hover { color: var(--brand-accent-ink); text-decoration: underline; } .notif-item { white-space: normal; padding: .55rem .9rem; border-bottom: 1px solid var(--border-soft); } .notif-item:last-child { border-bottom: none; } .notif-item.unread { background: var(--brand-accent-soft); } .notif-item-text { color: var(--ink-primary); font-size: .84rem; line-height: 1.4; } .notif-item-time { color: var(--ink-muted); font-size: .72rem; margin-top: .15rem; } .sidebar .nav-link { color: #8b8fa3; padding: .7rem 1.25rem; border-radius: 0; border-inline-start: 3px solid transparent; display: flex; align-items: center; gap: .6rem; transition: color .15s ease, background-color .15s ease; } .sidebar .nav-link:hover { background: rgba(255,255,255,.04); color: #fff; } .sidebar .nav-link.active { background: var(--brand-accent-soft); color: var(--brand-accent-strong); border-inline-start-color: var(--brand-accent); font-weight: 700; box-shadow: inset 0 0 20px rgba(216,179,112,.06); } .sidebar .nav-link.active i { filter: drop-shadow(0 0 5px var(--brand-glow)); } .sidebar .nav-link i { flex-shrink: 0; } /* Collapsible "Administration" group (admin-only) — a labeled header row that toggles a nested