/* =========================================================================== NeoTrader Sales Portal — design system (on top of Bootstrap 5) Brand: navy ink #131623 + rainbow gradient accent (from the logo). =========================================================================== */ :root { --nt-ink: #131623; --nt-ink-2: #1b1f31; --nt-ink-3: #262c42; --nt-grad: linear-gradient(115deg, #2fd97a 0%, #1fc8db 22%, #3b82f6 44%, #8b5cf6 64%, #ec4899 82%, #fb923c 100%); --nt-primary: #3b82f6; --nt-primary-600: #2f6fe0; --nt-primary-700: #2861c9; --nt-surface: #f4f6fb; --nt-card: #ffffff; --nt-border: #e7eaf1; --nt-border-2: #eef1f6; --nt-text: #1b2231; --nt-muted: #6a7488; --nt-muted-2: #97a0b2; --nt-success: #16a34a; --nt-success-bg: #e7f6ec; --nt-warning: #b45309; --nt-warning-bg: #fdf1de; --nt-danger: #dc2626; --nt-danger-bg: #fdecec; --nt-info-bg: #e8f0fe; --nt-shadow-sm: 0 1px 2px rgba(19, 22, 35, 0.06), 0 1px 3px rgba(19, 22, 35, 0.05); --nt-shadow: 0 6px 24px -12px rgba(19, 22, 35, 0.18); --nt-shadow-lg: 0 24px 60px -28px rgba(19, 22, 35, 0.32); --nt-radius: 14px; --nt-radius-sm: 10px; --sidebar-w: 256px; --topbar-h: 64px; /* Themeable aliases (dark mode overrides these) */ --nt-heading: var(--nt-ink); --nt-topbar-bg: rgba(255, 255, 255, 0.82); --nt-thead-bg: #fbfcfe; --nt-row-hover: #f7f9fd; --nt-code-color: #b5389a; --nt-code-bg: #faf2f8; --bs-primary-rgb: 59, 130, 246; --bs-link-color: var(--nt-primary-600); --bs-link-hover-color: var(--nt-primary-700); color-scheme: light; } /* =========================================================================== Dark theme — override the design tokens; component rules follow via tokens, plus a few targeted overrides for values that can't be a single token. Applied when (set by the no-flash loader in ). =========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --nt-ink: #181b25; /* sidebar panel */ --nt-ink-2: #242836; --nt-ink-3: #2d3242; --nt-surface: #13151d; /* app background (soft dark base) */ --nt-card: #1c1f2a; /* cards (elevated) */ --nt-border: #2d3242; --nt-border-2: #242836; --nt-text: #e7eaf2; --nt-heading: #f5f7fc; --nt-muted: #9aa4b8; --nt-muted-2: #6c7589; --nt-primary: #3b82f6; --nt-primary-600: #60a5fa; --nt-primary-700: #93c5fd; --nt-success: #4ade80; --nt-success-bg: rgba(34, 197, 94, 0.15); --nt-warning: #fbbf24; --nt-warning-bg: rgba(245, 158, 11, 0.15); --nt-danger: #f87171; --nt-danger-bg: rgba(239, 68, 68, 0.15); --nt-info-bg: rgba(59, 130, 246, 0.16); --nt-topbar-bg: rgba(19, 21, 29, 0.82); --nt-thead-bg: #242836; --nt-row-hover: rgba(255, 255, 255, 0.03); --nt-code-color: #f4a9db; --nt-code-bg: rgba(244, 169, 219, 0.1); --nt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --nt-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.7); --nt-shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.8); } /* No-JS fallback: honour the OS preference when no explicit choice was made. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --nt-ink: #10131f; --nt-ink-2: #171b29; --nt-ink-3: #212637; --nt-surface: #0b0d15; --nt-card: #161a28; --nt-border: #272c3c; --nt-border-2: #1f2432; --nt-text: #e6e9f2; --nt-heading: #f3f5fb; --nt-muted: #9aa3b8; --nt-muted-2: #6b7488; --nt-primary-600: #60a5fa; --nt-primary-700: #93c5fd; --nt-success: #4ade80; --nt-success-bg: rgba(34, 197, 94, 0.15); --nt-warning: #fbbf24; --nt-warning-bg: rgba(245, 158, 11, 0.15); --nt-danger: #f87171; --nt-danger-bg: rgba(239, 68, 68, 0.15); --nt-info-bg: rgba(59, 130, 246, 0.16); --nt-topbar-bg: rgba(11, 13, 21, 0.82); --nt-thead-bg: #1b2030; --nt-row-hover: #1c2231; --nt-code-color: #f4a9db; --nt-code-bg: rgba(244, 169, 219, 0.1); --nt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --nt-shadow: 0 8px 28px -14px rgba(0, 0, 0, 0.7); --nt-shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, 0.8); } } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--nt-text); background: var(--nt-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Smooth the light/dark switch on the main surfaces (no flash on load: the theme attribute is set before first paint, so these only animate on toggle). */ body, .app-sidebar, .app-topbar, .card, .stat-tile, .table-card, .btn-signout, .topbar-icon-btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .grad { background: var(--nt-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* =========================================================================== App shell =========================================================================== */ .app-shell { min-height: 100vh; } .app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--nt-ink); color: rgba(255, 255, 255, 0.72); display: flex; flex-direction: column; z-index: 1040; overflow-y: auto; border-right: 1px solid rgba(255, 255, 255, 0.06); } .sidebar-brand { display: flex; align-items: center; gap: 0.7rem; padding: 1.15rem 1.25rem; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .sidebar-brand img { height: 30px; width: auto; } .sidebar-brand-text { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: #fff; } .sidebar-nav { padding: 0.75rem 0.75rem 1rem; flex: 1; } .sidebar-section { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; color: rgba(255, 255, 255, 0.34); padding: 0.9rem 0.75rem 0.4rem; } .sidebar-section:first-child { padding-top: 0.35rem; } .side-link { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.62rem 0.8rem; margin: 0.12rem 0; border-radius: var(--nt-radius-sm); color: rgba(255, 255, 255, 0.74); text-decoration: none; font-weight: 500; font-size: 0.925rem; transition: background 0.15s ease, color 0.15s ease; } .side-link svg { width: 20px; height: 20px; fill: currentColor; opacity: 0.85; flex: 0 0 20px; } .side-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .side-link.active { background: rgba(255, 255, 255, 0.1); color: #fff; } .side-link.active::before { content: ""; position: absolute; left: -0.75rem; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--nt-grad); } .side-link.active svg { opacity: 1; } .sidebar-foot { padding: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.07); } .side-user { display: flex; align-items: center; gap: 0.65rem; padding: 0.35rem; } .side-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 0.95rem; background: var(--nt-grad); } .side-user-meta { display: flex; flex-direction: column; min-width: 0; } .side-user-name { color: #fff; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-user-role { font-size: 0.76rem; color: rgba(255, 255, 255, 0.5); } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(19, 22, 35, 0.45); z-index: 1035; backdrop-filter: blur(1px); } /* Main column */ .app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } .app-topbar { position: sticky; top: 0; z-index: 1020; height: var(--topbar-h); display: flex; align-items: center; gap: 0.85rem; padding: 0 1.5rem; background: var(--nt-topbar-bg); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--nt-border); } .topbar-toggle { display: none; border: none; background: transparent; padding: 0.35rem; border-radius: 8px; color: var(--nt-text); cursor: pointer; } .topbar-toggle svg { width: 24px; height: 24px; fill: currentColor; display: block; } .topbar-toggle:hover { background: var(--nt-border-2); } .topbar-brand { display: none; } .topbar-brand img { height: 26px; } .topbar-spacer { flex: 1; } .topbar-user { display: flex; align-items: center; gap: 0.85rem; } .topbar-user-info { display: flex; flex-direction: column; line-height: 1.2; text-align: right; } .topbar-user-name { font-weight: 600; font-size: 0.9rem; } .topbar-user-email { font-size: 0.76rem; color: var(--nt-muted); } .role-badge { font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.6rem; border-radius: 999px; letter-spacing: 0.01em; background: var(--nt-info-bg); color: var(--nt-primary-700); white-space: nowrap; } .role-badge--super_admin { background: #f1eafe; color: #7c3aed; } .role-badge--sales_support { background: #e8f0fe; color: #2563eb; } .role-badge--finance { background: #e7f6ec; color: #15803d; } .role-badge--tech_admin { background: #fdf1de; color: #b45309; } .btn-signout { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 9px; border: 1px solid var(--nt-border); background: var(--nt-card); color: var(--nt-text); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .btn-signout svg { width: 17px; height: 17px; fill: currentColor; } .btn-signout:hover { border-color: var(--nt-danger); color: var(--nt-danger); box-shadow: var(--nt-shadow-sm); } /* Theme toggle (and other topbar icon buttons) */ .topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; border: 1px solid var(--nt-border); background: var(--nt-card); color: var(--nt-muted); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease; } .topbar-icon-btn svg { width: 19px; height: 19px; fill: currentColor; display: block; } .topbar-icon-btn:hover { color: var(--nt-text); border-color: var(--nt-muted-2); } .auth-theme-toggle { position: fixed; top: 1.1rem; right: 1.1rem; z-index: 5; } /* Show the correct glyph for the active theme (both are in the button) */ .topbar-icon-btn .icon-moon { display: none; } .topbar-icon-btn .icon-sun { display: block; } :root[data-theme="dark"] .topbar-icon-btn .icon-moon { display: block; } :root[data-theme="dark"] .topbar-icon-btn .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .topbar-icon-btn .icon-moon { display: block; } :root:not([data-theme="light"]):not([data-theme="dark"]) .topbar-icon-btn .icon-sun { display: none; } } .app-content { padding: 1.75rem 1.75rem 3rem; flex: 1; max-width: 1320px; width: 100%; } .message-stack { margin-bottom: 1.25rem; } /* =========================================================================== Page header (works with existing .d-flex ... .border-bottom pattern too) =========================================================================== */ .app-content h1.h3, .page-title { font-weight: 700; letter-spacing: -0.02em; color: var(--nt-heading); } .app-content > .d-flex.border-bottom { border-bottom: 1px solid var(--nt-border) !important; padding-bottom: 1rem !important; margin-bottom: 1.5rem !important; } /* =========================================================================== Cards =========================================================================== */ .card { border: 1px solid var(--nt-border); border-radius: var(--nt-radius); box-shadow: var(--nt-shadow-sm); background: var(--nt-card); } .card .card-body { padding: 1.25rem 1.35rem; } .card.text-bg-light { background: var(--nt-card) !important; color: var(--nt-text) !important; } .card-header { background: transparent; border-bottom: 1px solid var(--nt-border); font-weight: 600; padding: 1rem 1.35rem; } /* =========================================================================== Stat tiles (dashboard) =========================================================================== */ .stat-tile { position: relative; background: var(--nt-card); border: 1px solid var(--nt-border); border-radius: var(--nt-radius); padding: 1.25rem 1.35rem; box-shadow: var(--nt-shadow-sm); height: 100%; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } .stat-tile:hover { transform: translateY(-2px); box-shadow: var(--nt-shadow); } .stat-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .stat-label { font-size: 0.82rem; color: var(--nt-muted); font-weight: 500; } .stat-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; } .stat-icon svg { width: 21px; height: 21px; fill: currentColor; } .stat-icon--blue { background: linear-gradient(135deg, #3b82f6, #2563eb); } .stat-icon--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); } .stat-icon--green { background: linear-gradient(135deg, #22c55e, #15803d); } .stat-icon--amber { background: linear-gradient(135deg, #fbbf24, #d97706); } .stat-value { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--nt-ink); line-height: 1.1; } /* =========================================================================== Tables =========================================================================== */ .card > .table-responsive, .card > .table { margin-bottom: 0; } .table { --bs-table-hover-bg: var(--nt-row-hover); --bs-table-color: var(--nt-text); color: var(--nt-text); margin-bottom: 0; } .table thead th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; color: var(--nt-muted); font-weight: 700; border-bottom: 1px solid var(--nt-border); padding: 0.85rem 0.9rem; background: var(--nt-thead-bg); white-space: nowrap; } .table tbody td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--nt-border-2); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } /* Wrap a table in .table-card for a clean framed look */ .table-card { background: var(--nt-card); border: 1px solid var(--nt-border); border-radius: var(--nt-radius); box-shadow: var(--nt-shadow-sm); overflow: hidden; } .table-card .table-responsive { border-radius: var(--nt-radius); } /* =========================================================================== Buttons =========================================================================== */ .btn { border-radius: 10px; font-weight: 600; } .btn-sm { border-radius: 8px; } .btn-primary { --bs-btn-bg: var(--nt-primary); --bs-btn-border-color: var(--nt-primary); --bs-btn-hover-bg: var(--nt-primary-600); --bs-btn-hover-border-color: var(--nt-primary-600); --bs-btn-active-bg: var(--nt-primary-700); --bs-btn-active-border-color: var(--nt-primary-700); box-shadow: 0 6px 16px -8px rgba(59, 130, 246, 0.7); } .btn-outline-primary { --bs-btn-color: var(--nt-primary-600); --bs-btn-border-color: #b9d0fb; --bs-btn-hover-bg: var(--nt-primary); --bs-btn-hover-border-color: var(--nt-primary); --bs-btn-active-bg: var(--nt-primary-600); } .btn-outline-secondary { --bs-btn-color: var(--nt-text); --bs-btn-border-color: var(--nt-border); --bs-btn-hover-bg: var(--nt-surface); --bs-btn-hover-border-color: var(--nt-muted-2); --bs-btn-hover-color: var(--nt-text); --bs-btn-active-bg: var(--nt-border-2); --bs-btn-active-color: var(--nt-text); } /* =========================================================================== Badges (semantic pills) =========================================================================== */ .badge { font-weight: 600; padding: 0.4em 0.7em; border-radius: 999px; letter-spacing: 0.01em; } .badge.bg-success { background: var(--nt-success-bg) !important; color: var(--nt-success) !important; } .badge.bg-primary { background: var(--nt-info-bg) !important; color: var(--nt-primary-700) !important; } .badge.bg-secondary { background: #eef1f6 !important; color: var(--nt-muted) !important; } .badge.bg-warning { background: var(--nt-warning-bg) !important; color: var(--nt-warning) !important; } .badge.bg-danger { background: var(--nt-danger-bg) !important; color: var(--nt-danger) !important; } /* =========================================================================== Forms =========================================================================== */ .form-control, .form-select { border-radius: 10px; border-color: var(--nt-border); padding: 0.55rem 0.8rem; color: var(--nt-text); } .form-control::placeholder { color: var(--nt-muted-2); } .form-control:focus, .form-select:focus { border-color: var(--nt-primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } .form-label { font-weight: 600; font-size: 0.85rem; color: var(--nt-text); margin-bottom: 0.35rem; } .form-text { color: var(--nt-muted); } /* =========================================================================== Alerts =========================================================================== */ .alert { border-radius: var(--nt-radius-sm); border: 1px solid transparent; padding: 0.9rem 1.1rem; } .alert-success { background: var(--nt-success-bg); border-color: #bfe7cb; color: #12692f; } .alert-warning { background: var(--nt-warning-bg); border-color: #f6dca8; color: #8a4a06; } .alert-danger, .alert-error { background: var(--nt-danger-bg); border-color: #f6c4c4; color: #b21f1f; } .alert-info { background: var(--nt-info-bg); border-color: #c6dcfd; color: #1e4fa3; } .alert-light { background: #fff; border-color: var(--nt-border); color: var(--nt-text); } /* =========================================================================== Empty state helper =========================================================================== */ .empty-state { text-align: center; padding: 3rem 1.5rem; background: var(--nt-card); border: 1px dashed var(--nt-border); border-radius: var(--nt-radius); color: var(--nt-muted); } .empty-state svg { width: 42px; height: 42px; fill: var(--nt-muted-2); margin-bottom: 0.75rem; } .text-muted { color: var(--nt-muted) !important; } code { color: var(--nt-code-color); background: var(--nt-code-bg); padding: 0.1em 0.35em; border-radius: 5px; font-size: 0.86em; } /* =========================================================================== Responsive — collapse the sidebar under lg =========================================================================== */ @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); } body.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: var(--nt-shadow-lg); } .app-main { margin-left: 0; } .topbar-toggle { display: inline-flex; } .topbar-brand { display: inline-flex; align-items: center; } .app-content { padding: 1.25rem 1.1rem 2.5rem; } } @media (min-width: 992px) { .sidebar-backdrop { display: none !important; } } @media (max-width: 575.98px) { .topbar-user-info { display: none; } .app-topbar { padding: 0 1rem; } } /* =========================================================================== Unauthenticated pages (login / access-denied) Brand palette pulled from the NeoTrader logo (rainbow mark on navy #131623). =========================================================================== */ .auth-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem; overflow: hidden; /* soft branded "aurora" so the page doesn't feel empty around the card */ background: radial-gradient(58% 50% at 12% 16%, rgba(31, 200, 219, 0.18), transparent 70%), radial-gradient(55% 52% at 88% 84%, rgba(139, 92, 246, 0.20), transparent 70%), radial-gradient(42% 42% at 80% 10%, rgba(236, 72, 153, 0.14), transparent 70%), radial-gradient(46% 46% at 16% 88%, rgba(47, 217, 122, 0.12), transparent 70%), linear-gradient(135deg, #eef1f6 0%, #e7ecf5 100%); } /* faint dot texture, faded toward the edges */ .auth-shell::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(19, 22, 35, 0.06) 1px, transparent 1.6px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 25%, transparent 82%); mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 25%, transparent 82%); pointer-events: none; } .auth-shell > * { position: relative; z-index: 1; } /* ---- access-denied keeps the simple narrow card ---- */ .login-card { width: 100%; max-width: 400px; border: none; border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(19, 22, 35, 0.4); } /* ---- split-screen login ---- */ .auth-split { width: 100%; max-width: 1040px; min-height: 620px; display: grid; grid-template-columns: 1.05fr 0.95fr; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(19, 22, 35, 0.55); animation: auth-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes auth-rise { from { opacity: 0; transform: translateY(18px) scale(0.99); } to { opacity: 1; transform: none; } } /* ---- brand (left) panel ---- */ .auth-brand { position: relative; background: var(--nt-ink); color: #fff; padding: 3rem 2.75rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; } /* animated gradient blobs — kept toward the edges, away from the logo */ .auth-brand-blobs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; z-index: -1; animation: blob-float 14s ease-in-out infinite; } .auth-brand-blobs span:nth-child(1) { width: 260px; height: 260px; top: -70px; right: -60px; background: #8b5cf6; } .auth-brand-blobs span:nth-child(2) { width: 240px; height: 240px; bottom: -80px; left: -50px; background: #1fc8db; animation-delay: -4s; } .auth-brand-blobs span:nth-child(3) { width: 200px; height: 200px; bottom: -40px; right: -30px; background: #ec4899; animation-delay: -8s; } @keyframes blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(14px, -18px) scale(1.08); } 66% { transform: translate(-12px, 12px) scale(0.95); } } .brand-logo { width: 232px; max-width: 70%; height: auto; margin-bottom: 2rem; } .brand-title { font-size: 2.35rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.75rem; line-height: 1.05; } .brand-title .grad { color: #3b82f6; -webkit-text-fill-color: currentColor; background: none; } .brand-sub { color: rgba(255, 255, 255, 0.72); font-size: 1.02rem; line-height: 1.55; max-width: 34ch; margin: 0 0 2rem; } .brand-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; } .brand-points li { display: flex; align-items: center; gap: 0.7rem; color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; } .brand-points li::before { content: ""; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; background: var(--nt-grad); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 15px no-repeat; } /* ---- form (right) panel ---- */ .auth-form { display: flex; align-items: center; justify-content: center; padding: 3rem 2.75rem; } .auth-form-inner { width: 100%; max-width: 360px; } .auth-welcome { font-size: 1.6rem; font-weight: 700; color: #0f1320; margin: 0 0 0.4rem; } .auth-welcome-sub { color: #5b6577; font-size: 0.95rem; margin: 0 0 1.75rem; line-height: 1.5; } /* Microsoft button */ .ms-btn { display: flex; align-items: center; justify-content: center; gap: 0.7rem; width: 100%; padding: 0.85rem 1rem; border: 1px solid #d7dce5; border-radius: 12px; background: #fff; color: #1b1f2b; font-weight: 600; font-size: 0.98rem; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .ms-btn:hover { transform: translateY(-2px); border-color: #b9c2d0; box-shadow: 0 12px 24px -12px rgba(19, 22, 35, 0.35); color: #1b1f2b; } .ms-btn:active { transform: translateY(0); } .ms-btn:disabled, .ms-btn.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .ms-btn svg { flex: 0 0 auto; } /* developer sign-in section */ .dev-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.75rem 0 1.1rem; color: #98a2b3; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } .dev-divider::before, .dev-divider::after { content: ""; flex: 1; height: 1px; background: #e6e9f0; } .dev-grid { display: flex; flex-direction: column; gap: 0.55rem; } .dev-chip { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border: 1px solid #e6e9f0; border-radius: 10px; background: #fbfcfe; text-decoration: none; color: #2b3445; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .dev-chip:hover { transform: translateX(2px); border-color: #cfd6e2; box-shadow: 0 8px 18px -12px rgba(19, 22, 35, 0.3); color: #2b3445; } .dev-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .dev-dot--super_admin { background: #8b5cf6; } .dev-dot--sales_support { background: #3b82f6; } .dev-dot--finance { background: #2fd97a; } .dev-dot--tech_admin { background: #f59e0b; } .dev-dot--customer { background: #94a3b8; } .dev-chip-name { font-weight: 600; font-size: 0.9rem; } .dev-chip-role { margin-left: auto; font-size: 0.72rem; color: #8a93a6; } .auth-foot { margin: 1.75rem 0 0; text-align: center; font-size: 0.76rem; color: #98a2b3; } /* ---- responsive: stack on small screens, hide heavy brand copy ---- */ @media (max-width: 820px) { .auth-split { grid-template-columns: 1fr; max-width: 440px; min-height: 0; } .auth-brand { padding: 2.25rem 2rem; text-align: center; align-items: center; } .brand-logo { margin: 0 auto 1.25rem; } .brand-sub { margin-left: auto; margin-right: auto; } .brand-points { display: none; } .auth-form { padding: 2.25rem 2rem; } } @media (prefers-reduced-motion: reduce) { .auth-split { animation: none; } .auth-brand-blobs span { animation: none; } .stat-tile { transition: none; } } /* =========================================================================== Dark theme — component overrides for colors that can't reduce to one token. =========================================================================== */ /* Alerts */ :root[data-theme="dark"] .alert-success { border-color: rgba(74, 222, 128, 0.35); color: #86efac; } :root[data-theme="dark"] .alert-warning { border-color: rgba(251, 191, 36, 0.35); color: #fcd34d; } :root[data-theme="dark"] .alert-danger, :root[data-theme="dark"] .alert-error { border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; } :root[data-theme="dark"] .alert-info { border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; } :root[data-theme="dark"] .alert-light { background: var(--nt-card); border-color: var(--nt-border); color: var(--nt-text); } /* Role badges + secondary badge -> translucent tints on dark */ :root[data-theme="dark"] .role-badge { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; } :root[data-theme="dark"] .role-badge--super_admin { background: rgba(139, 92, 246, 0.20); color: #c4b5fd; } :root[data-theme="dark"] .role-badge--sales_support { background: rgba(59, 130, 246, 0.20); color: #93c5fd; } :root[data-theme="dark"] .role-badge--finance { background: rgba(34, 197, 94, 0.20); color: #86efac; } :root[data-theme="dark"] .role-badge--tech_admin { background: rgba(245, 158, 11, 0.20); color: #fcd34d; } :root[data-theme="dark"] .badge.bg-secondary { background: rgba(148, 163, 184, 0.18) !important; color: #cbd5e1 !important; } /* Form controls */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--nt-ink-2); color: var(--nt-text); border-color: var(--nt-border); } :root[data-theme="dark"] .form-control::placeholder { color: var(--nt-muted-2); } /* Auth (login / access-denied) pages */ :root[data-theme="dark"] .auth-shell { background: radial-gradient(58% 50% at 12% 16%, rgba(31, 200, 219, 0.14), transparent 70%), radial-gradient(55% 52% at 88% 84%, rgba(139, 92, 246, 0.18), transparent 70%), radial-gradient(42% 42% at 80% 10%, rgba(236, 72, 153, 0.12), transparent 70%), radial-gradient(46% 46% at 16% 88%, rgba(47, 217, 122, 0.10), transparent 70%), linear-gradient(135deg, #0b0d15 0%, #10131f 100%); } :root[data-theme="dark"] .auth-shell::before { background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.6px); } :root[data-theme="dark"] .auth-split, :root[data-theme="dark"] .login-card { background: var(--nt-card); } :root[data-theme="dark"] .auth-welcome { color: var(--nt-heading); } :root[data-theme="dark"] .auth-welcome-sub { color: var(--nt-muted); } :root[data-theme="dark"] .ms-btn, :root[data-theme="dark"] .dev-chip { background: var(--nt-ink-2); border-color: var(--nt-border); color: var(--nt-text); } :root[data-theme="dark"] .ms-btn:hover, :root[data-theme="dark"] .dev-chip:hover { border-color: var(--nt-muted-2); color: var(--nt-text); } :root[data-theme="dark"] .dev-chip-name { color: var(--nt-text); } :root[data-theme="dark"] .dev-divider::before, :root[data-theme="dark"] .dev-divider::after { background: var(--nt-border); }