/* ========================================================================== Iris Design System — CSS Custom Properties + Component Classes Tailwind v4 compatible: uses CSS-first token approach ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design Tokens -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Colour palette */ --color-brand-50: #eff6ff; --color-brand-100: #dbeafe; --color-brand-200: #bfdbfe; --color-brand-400: #60a5fa; --color-brand-500: #3b82f6; --color-brand-600: #2563eb; --color-brand-700: #1d4ed8; --color-brand-900: #1e3a8a; --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; --color-success-500: #22c55e; --color-warning-500: #f59e0b; --color-danger-500: #ef4444; --color-danger-600: #dc2626; /* Semantic aliases — page & content */ --bg-page: var(--color-neutral-50); --bg-card: #ffffff; --bg-input: #ffffff; --border-color: var(--color-neutral-200); --text-primary: var(--color-neutral-900); --text-muted: var(--color-neutral-500); --text-inverse: #ffffff; --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4); /* Semantic aliases — sidebar (white in light mode, matches reference app) */ --bg-sidebar: #ffffff; --sidebar-border: #e5e7eb; --sidebar-text: #111827; --sidebar-text-muted: #6b7280; --sidebar-nav-hover: #f9fafb; --sidebar-nav-active: #f9fafb; --sidebar-nav-active-text: var(--color-brand-600); --sidebar-divider: #e5e7eb; --sidebar-icon-color: #9ca3af; --sidebar-env-bg: var(--color-brand-50); --sidebar-env-border: var(--color-brand-200); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; /* Radii */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* Shell dimensions */ --sidebar-width: 288px; --sidebar-app-strip-width: 56px; } /* -------------------------------------------------------------------------- 2. Dark Mode Token Overrides Apply to — only the semantic aliases need changing. All component classes pick up the new values automatically. -------------------------------------------------------------------------- */ .dark { color-scheme: dark; --bg-page: #111827; --bg-card: #1f2937; --bg-input: #1f2937; --border-color: #374151; --text-primary: #f9fafb; --text-muted: #9ca3af; --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.4); --bg-sidebar: #1f2937; --sidebar-border: #374151; --sidebar-text: #f3f4f6; --sidebar-text-muted: #9ca3af; --sidebar-nav-hover: #374151; --sidebar-nav-active: #374151; --sidebar-nav-active-text: #93c5fd; --sidebar-divider: #374151; --sidebar-icon-color: #6b7280; --sidebar-env-bg: rgba(30,58,138,0.3); --sidebar-env-border: #1d4ed8; } .dark body { background: var(--bg-page); color: var(--text-primary); } .dark .card { background: var(--bg-card); border-color: var(--border-color); } .dark .form-input { background: var(--bg-input); border-color: #475569; color: var(--text-primary); } .dark .data-table th { color: var(--text-muted); border-color: var(--border-color); } .dark .data-table td { border-color: #1e293b; color: var(--text-primary); } .dark .data-table tr:hover td { background: #1e293b; } .dark .auth-body { background: #0f172a; } .dark .auth-card { background: var(--bg-card); } .dark .btn-secondary { background: #1e293b; color: var(--text-primary); border-color: #475569; } .dark .btn-secondary:hover { background: #334155; } .dark .form-error-summary { background: #450a0a; border-color: #991b1b; } .dark .form-success { background: #052e16; border-color: #166534; color: #86efac; } .dark .badge-muted { background: #334155; color: var(--text-muted); } .dark .badge-brand { background: #1e3a8a; color: #93c5fd; } .dark .notification-panel { background: var(--bg-card); border-color: var(--border-color); } /* Material Symbols base */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; display: inline-flex; align-items: center; justify-content: center; user-select: none; } .nav-icon-active { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Statusbar icon button (dark toggle, notifications, etc.) */ .statusbar-icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; color: var(--color-neutral-400); cursor: pointer; border-radius: var(--radius-sm); padding: 0; transition: color 0.15s, background 0.15s; position: relative; } .statusbar-icon-btn .material-symbols-outlined { font-size: 20px; } .statusbar-icon-btn:hover { color: var(--text-inverse); background: rgba(255,255,255,0.08); } /* Notification bell in statusbar */ .statusbar-notif-btn .notif-badge { position: absolute; top: 2px; right: 1px; min-width: 14px; height: 14px; font-size: 9px; padding: 0 2px; border: 1.5px solid var(--color-neutral-900); } /* -------------------------------------------------------------------------- 3. Reset & Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.6; color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; } a { color: var(--color-brand-600); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 var(--space-4); font-weight: 600; line-height: 1.3; } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-neutral-100); color: var(--color-neutral-800); padding: 0.1em 0.4em; border-radius: var(--radius-sm); } .dark code { background: var(--color-neutral-700); color: var(--color-neutral-100); } /* -------------------------------------------------------------------------- 4. Shell Layout -------------------------------------------------------------------------- */ .shell-body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg-page); } .shell-content-area { display: flex; flex: 1; overflow: hidden; } .shell-sidebar { display: flex; flex-direction: column; width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--sidebar-border); color: var(--sidebar-text); height: 100%; overflow-y: auto; } .shell-main { flex: 1; overflow-y: auto; padding: var(--space-8); scrollbar-width: none; } .shell-main::-webkit-scrollbar { display: none; } /* Status bar */ .shell-statusbar { display: flex; align-items: center; justify-content: space-between; height: 36px; flex-shrink: 0; background: var(--color-neutral-900); border-top: 1px solid rgba(255,255,255,0.06); padding: 0 var(--space-4); z-index: 10; } .statusbar-left, .statusbar-center, .statusbar-right { display: flex; align-items: center; gap: var(--space-3); } .statusbar-center { flex: 1; justify-content: center; } .statusbar-text { font-size: var(--text-xs); color: var(--color-neutral-500); } .statusbar-link { font-size: var(--text-xs); color: var(--color-neutral-400); text-decoration: none; padding: 2px var(--space-2); border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; } .statusbar-link:hover { color: var(--text-inverse); background: rgba(255,255,255,0.08); text-decoration: none; } .statusbar-indicator { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-success-500); box-shadow: 0 0 4px var(--color-success-500); } /* Sidebar sections */ .sidebar-section { padding: var(--space-2) var(--space-3); } .sidebar-env-switcher { padding: var(--space-3) var(--space-4) var(--space-4); } /* Environment switcher — blue-tinted pill, matches reference app */ .env-switcher-btn { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-2) var(--space-3); background: var(--sidebar-env-bg); border: 1px solid var(--sidebar-env-border); border-radius: var(--radius-lg); color: var(--sidebar-text); cursor: pointer; font-size: var(--text-sm); font-weight: 600; text-align: left; transition: background 0.15s; } .env-switcher-btn:hover { background: var(--color-brand-100); } .dark .env-switcher-btn:hover { background: rgba(30,58,138,0.45); } .env-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .env-chevron { color: var(--color-brand-600); flex-shrink: 0; font-size: 18px; } /* Sidebar nav list */ .sidebar-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); } .sidebar-nav-label { padding: var(--space-4) var(--space-6) var(--space-1); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-icon-color); opacity: 0.6; } /* Sidebar nav items */ .sidebar-nav a { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2); border-radius: var(--radius-md); color: var(--sidebar-text); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; transition: background 0.15s, color 0.15s; } .sidebar-nav a:hover { background: var(--sidebar-nav-hover); color: var(--sidebar-nav-active-text); text-decoration: none; } .sidebar-nav a:hover .sidebar-nav-icon { color: var(--sidebar-nav-active-text); } .sidebar-nav a.active { background: var(--sidebar-nav-active); color: var(--sidebar-nav-active-text); text-decoration: none; } .sidebar-nav a.active .sidebar-nav-icon { color: var(--sidebar-nav-active-text); } /* Collapsible nav group toggle button — same visual weight as a nav link */ .sidebar-nav-btn { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2); border-radius: var(--radius-md); color: var(--sidebar-text); font-family: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1.5; width: 100%; background: none; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; text-align: left; } .sidebar-nav-btn:hover { background: var(--sidebar-nav-hover); color: var(--sidebar-nav-active-text); } .sidebar-nav-btn:hover .sidebar-nav-icon { color: var(--sidebar-nav-active-text); } .sidebar-nav-btn--active { background: var(--sidebar-nav-active); color: var(--sidebar-nav-active-text); } .sidebar-nav-btn--active .sidebar-nav-icon { color: var(--sidebar-nav-active-text); } .nav-group-chevron { margin-left: auto; color: var(--sidebar-icon-color); font-size: 18px !important; flex-shrink: 0; transition: transform 0.2s ease; } .nav-group-chevron--open { transform: rotate(90deg); } /* Sub-items — indented beneath the group header */ .nav-sub-items { list-style: none; margin: var(--space-1) 0 0; padding: 0 0 0 36px; display: flex; flex-direction: column; gap: var(--space-1); } .nav-sub-items a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); color: var(--sidebar-text-muted); font-size: var(--text-sm); font-weight: 500; transition: background 0.15s, color 0.15s; } .nav-sub-items a:hover { background: var(--sidebar-nav-hover); color: var(--sidebar-nav-active-text); text-decoration: none; } .nav-sub-items a.active { background: var(--sidebar-nav-active); color: var(--sidebar-nav-active-text); } /* Nav icon helper */ .sidebar-nav-icon { flex-shrink: 0; color: var(--sidebar-icon-color); font-size: 22px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .nav-sub-icon { flex-shrink: 0; color: var(--sidebar-icon-color); font-size: 20px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .nav-sub-items a:hover .nav-sub-icon, .nav-sub-items a.active .nav-sub-icon { color: var(--sidebar-nav-active-text); } /* Sidebar logo/header area */ .sidebar-header { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-3) var(--space-3); } .sidebar-logo-link { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; } .sidebar-logo-link:hover { text-decoration: none; } .sidebar-logo-img { height: 28px; width: auto; object-fit: contain; filter: brightness(0); } .dark .sidebar-logo-img { filter: brightness(0) invert(1); } .sidebar-logo-text { font-size: var(--text-xl); font-weight: 700; color: var(--sidebar-text); letter-spacing: -0.02em; } .sidebar-logo-dot { color: var(--color-brand-600); } /* Groups the app strip + profile at the bottom of the sidebar */ .sidebar-bottom-group { margin-top: auto; display: flex; flex-direction: column; } /* ── App switcher strip (horizontal tabs in sidebar) ── */ .sidebar-app-strip { display: flex; flex-direction: row; align-items: stretch; gap: var(--space-1); padding: var(--space-2) var(--space-2); border-top: 1px solid var(--sidebar-divider); border-bottom: 1px solid var(--sidebar-divider); overflow-x: auto; scrollbar-width: none; } .sidebar-app-strip::-webkit-scrollbar { display: none; } .app-strip-tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; min-width: 44px; padding: var(--space-1) var(--space-1); border-radius: var(--radius-md); color: var(--sidebar-icon-color); font-size: 10px; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; border-bottom: 2px solid transparent; } .app-strip-tab:hover { background: var(--sidebar-nav-hover); color: var(--sidebar-nav-active-text); text-decoration: none; } .app-strip-tab--active { color: var(--color-brand-400); background: var(--sidebar-nav-active); } .app-strip-tab .material-symbols-outlined { font-size: 20px; flex-shrink: 0; } .app-strip-tab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; } /* Bottom: profile + sign-out */ .sidebar-bottom { border-top: 1px solid var(--sidebar-divider); } .sidebar-profile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); color: var(--sidebar-text); font-size: var(--text-sm); font-weight: 600; min-width: 0; transition: background 0.15s; } .sidebar-profile:hover { background: var(--sidebar-nav-hover); text-decoration: none; color: var(--sidebar-text); } .sidebar-profile-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sidebar-profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-signout { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); color: var(--sidebar-text); font-size: var(--text-sm); font-weight: 600; transition: background 0.15s; width: 100%; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; } .sidebar-signout .material-symbols-outlined { color: var(--sidebar-icon-color); flex-shrink: 0; } .sidebar-signout:hover { background: var(--sidebar-nav-hover); text-decoration: none; color: var(--sidebar-text); } .sidebar-signout:hover .material-symbols-outlined { color: var(--sidebar-nav-active-text); } .notif-badge { background: var(--color-danger-500); color: white; font-size: 10px; font-weight: 700; border-radius: var(--radius-full); min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* Notification panel */ .notification-panel { position: fixed; top: 0; right: 0; width: 380px; height: 100vh; background: var(--bg-card); border-left: 1px solid var(--border-color); box-shadow: var(--shadow-lg); z-index: 50; overflow-y: auto; padding: var(--space-6); } /* -------------------------------------------------------------------------- 4. Auth Layout -------------------------------------------------------------------------- */ .auth-body { background: var(--color-neutral-100); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-6); } .auth-container { width: 100%; max-width: 420px; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); } .auth-brand-logo { height: 64px; width: auto; filter: brightness(0); } .auth-brand-name { font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.18em; color: var(--text-primary); } .auth-card { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-8); } .auth-card--wide { max-width: 520px; } .auth-title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-2); text-align: center; } .auth-subtitle { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); text-align: center; } .auth-footer { margin-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--text-muted); } /* -------------------------------------------------------------------------- 5. Form Controls -------------------------------------------------------------------------- */ .form-group { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .form-group label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; } .label-link { font-weight: 400; font-size: var(--text-xs); } .form-input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); background-color: var(--bg-input); font-size: var(--text-sm); color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s; outline: none; } .form-input:focus { border-color: var(--color-brand-500); box-shadow: var(--focus-ring); } .form-input::placeholder { color: var(--color-neutral-400); } select.form-input { -webkit-appearance: none; appearance: none; color-scheme: light; background-color: var(--bg-input); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: calc(var(--space-3) * 2 + 16px); transform: translateZ(0); } .dark select.form-input { color-scheme: dark; } select.form-input option { background-color: #ffffff; color: #0f172a; } .dark select.form-input option { background-color: #1f2937; color: #f9fafb; } /* Custom select — replaces native