/* ============================================ INSITE - MAIN STYLESHEET shadcn/ui visual design system ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ============================================================= Design tokens — single source of truth ------------------------------------------------------------- Light (warm white) is the default; .dark on switches to navy. Every colour in this file, in ui.css and in the portal chrome resolves through these, so a palette change happens here and nowhere else. These used to be declared three times over (two near the top, one near the bottom). The copies had drifted apart, and because the last one wins, the values at the top were not the ones the app actually rendered. They are now stated once. ============================================================= */ :root { --background: 36 33% 97%; --foreground: 240 28% 14%; --card: 0 0% 100%; --card-foreground: 240 28% 14%; --popover: 0 0% 100%; --popover-foreground: 240 28% 14%; --primary: 219 100% 66%; --primary-foreground: 0 0% 98%; --secondary: 30 33% 94%; --secondary-foreground: 240 28% 14%; --muted: 35 23% 90%; --muted-foreground: 220 9% 46%; --accent: 30 33% 94%; --accent-foreground: 240 28% 14%; --success: 160 84% 39%; --success-foreground: 0 0% 98%; --warning: 38 92% 50%; --warning-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --info: 189 94% 43%; --info-foreground: 0 0% 98%; --border: 37 20% 87%; --input: 38 21% 93%; --ring: 219 100% 66%; --radius: 0.5rem; --radius-sm: calc(var(--radius) - 2px); --radius-lg: calc(var(--radius) + 4px); --background-color: hsl(var(--background)); --card-background: hsl(var(--card)); --text-primary: hsl(var(--foreground)); --text-secondary: hsl(var(--muted-foreground)); --border-color: hsl(var(--border)); --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .06); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 6px -2px rgba(15, 23, 42, .06); --shadow-lg: 0 10px 24px -6px rgba(15, 23, 42, .10), 0 4px 12px -4px rgba(15, 23, 42, .06); --shadow-soft: 0 16px 40px -16px rgba(15, 23, 42, .14); --ease-spring: cubic-bezier(.16, 1, .3, 1); --ft-nav-width: 260px; --ft-nav-rail-width: 70px; --ft-nav-gap: 0; --ft-nav-radius: 0; --ft-nav-border: hsl(37 20% 87% / .9); --ft-nav-highlight: hsl(0 0% 100% / .7); --ft-nav-ink: hsl(240 28% 14%); --ft-nav-ink-soft: hsl(220 9% 46% / .85); --ft-nav-ink-faint: hsl(220 9% 46% / .55); --ft-nav-accent: 219 100% 66%; --ft-nav-glow: hsl(219 100% 66% / .35); } .dark { --background: 232 59% 10%; --foreground: 0 0% 96%; --card: 231 49% 13%; --card-foreground: 0 0% 96%; --popover: 231 49% 13%; --popover-foreground: 0 0% 96%; --primary: 219 100% 66%; --primary-foreground: 0 0% 98%; --secondary: 232 39% 19%; --secondary-foreground: 0 0% 96%; --muted: 232 39% 19%; --muted-foreground: 218 11% 65%; --accent: 232 39% 19%; --accent-foreground: 0 0% 98%; --success: 160 84% 39%; --success-foreground: 0 0% 98%; --warning: 38 92% 50%; --warning-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --info: 189 94% 43%; --info-foreground: 0 0% 98%; --border: 232 39% 19%; --input: 231 40% 17%; --ring: 219 100% 66%; --background-color: hsl(var(--background)); --card-background: hsl(var(--card)); --text-primary: hsl(var(--foreground)); --text-secondary: hsl(var(--muted-foreground)); --border-color: hsl(var(--border)); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 2px 8px rgba(0,0,0,.4); --shadow-lg: 0 4px 16px rgba(0,0,0,.5); --ft-nav-border: hsl(0 0% 100% / .1); --ft-nav-highlight: hsl(0 0% 100% / .06); --ft-nav-ink: hsl(220 60% 97%); --ft-nav-ink-soft: hsl(219 40% 82% / .78); --ft-nav-ink-faint: hsl(219 35% 78% / .55); } /* ============================================================= Sidebar — Dual-Mode, token-driven Light: warm cream (sidebar.DEFAULT #fdf9f4) · Dark: navy #0d1225 Palette/width live in the "Portal Sidebar Solid Flush" block near the end of this file; this block styles the nav items only. No !important — selectors are ID-scoped, so they already beat Tailwind utility classes without escalating. ============================================================= */ #portal-sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; transition: width 300ms ease; overflow: visible; } /* Group headers — quiet, uppercase, not competing with nav items */ #portal-sidebar .ft-nav-group-toggle { color: hsl(var(--muted-foreground)); } #portal-sidebar .ft-nav-group-toggle:hover { color: hsl(var(--foreground)); } #portal-sidebar .ft-nav-group-label span { color: hsl(var(--muted-foreground)); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } /* User card — warm raised surface, matches app chrome */ #portal-sidebar .ft-nav-user-card { background-color: hsl(var(--muted) / .55); border: 1px solid hsl(var(--border)); } #portal-sidebar .ft-nav-user-card strong { color: hsl(var(--foreground)); } #portal-sidebar .ft-nav-user-card .inline-flex { background-color: hsl(var(--primary) / .12); border-color: hsl(var(--primary) / .22); color: hsl(var(--primary)); } .dark #portal-sidebar .ft-nav-user-card { background-color: hsl(0 0% 100% / .04); border-color: hsl(var(--border)); } /* Nav items — regular weight at rest, brand tint when active. Weight carries the active state, so colour does not have to shout. */ #portal-sidebar nav a .ft-nav-text { color: hsl(var(--foreground) / .78); font-weight: 500; } #portal-sidebar nav a:hover .ft-nav-text { color: hsl(var(--foreground)); } #portal-sidebar nav a:hover { background-color: hsl(var(--muted) / .6); } .dark #portal-sidebar nav a:hover { background-color: hsl(0 0% 100% / .04); } #portal-sidebar nav a.is-active { background-color: hsl(var(--primary) / .10); box-shadow: inset 3px 0 0 0 hsl(var(--primary)); } #portal-sidebar nav a.is-active .ft-nav-text { color: hsl(var(--primary)); font-weight: 600; } .dark #portal-sidebar nav a .ft-nav-text { color: hsl(var(--foreground) / .82); } .dark #portal-sidebar nav a:hover .ft-nav-text { color: hsl(var(--foreground)); } .dark #portal-sidebar nav a.is-active { background-color: hsl(var(--primary) / .16); } .dark #portal-sidebar nav a.is-active .ft-nav-text { color: hsl(219 100% 74%); } /* Sign out — quiet at rest, destructive only on intent. A permanently red block trains people to ignore red. */ #portal-sidebar a[data-ft-tip="Sign Out"] { background-color: transparent; border: 1px solid transparent; color: hsl(var(--muted-foreground)); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } #portal-sidebar a[data-ft-tip="Sign Out"] .ft-nav-text { color: inherit; font-weight: 500; } #portal-sidebar a[data-ft-tip="Sign Out"]:hover { background-color: hsl(var(--destructive) / .10); border-color: hsl(var(--destructive) / .22); color: hsl(var(--destructive)); } .dark #portal-sidebar a[data-ft-tip="Sign Out"]:hover { background-color: hsl(var(--destructive) / .16); color: hsl(0 90% 76%); } /* Brand-coloured chrome bits. Defined here rather than through the Tailwind CDN palette so they still render when the CDN is slow, blocked or unavailable — the same reason the sidebar keeps a layout fallback. */ #portal-sidebar .ft-nav-avatar-circle { background-color: hsl(var(--primary)); color: #fff; } #portal-sidebar .ft-nav-count { background-color: hsl(var(--primary)); color: #fff; } #portal-sidebar .ft-nav-collapse-dot { background-color: hsl(var(--primary)); color: #fff; } #portal-sidebar .ft-nav-collapse-dot:hover { background-color: hsl(219 100% 74%); } /* Nav icon tiles — a soft tint of the tone in light, a deeper one in dark. Tones come from portalSidebarIconStyles() in includes/nav/portal_sidebar.php. */ #portal-sidebar .ft-nav-icon, .ft-sidebar .ft-nav-icon { transition: background-color .15s ease, color .15s ease; } .ft-nav-icon--blue { background-color: hsl(219 100% 66% / .12); color: hsl(219 75% 52%); } .ft-nav-icon--purple { background-color: hsl(258 90% 66% / .12); color: hsl(258 70% 56%); } .ft-nav-icon--teal { background-color: hsl(173 80% 40% / .14); color: hsl(174 72% 32%); } .ft-nav-icon--amber { background-color: hsl(38 92% 50% / .14); color: hsl(30 85% 40%); } .ft-nav-icon--sky { background-color: hsl(199 89% 48% / .13); color: hsl(200 80% 38%); } .ft-nav-icon--green { background-color: hsl(160 84% 39% / .13); color: hsl(160 75% 30%); } .ft-nav-icon--indigo { background-color: hsl(239 84% 67% / .12); color: hsl(239 65% 56%); } .ft-nav-icon--orange { background-color: hsl(25 95% 53% / .13); color: hsl(22 85% 44%); } .dark .ft-nav-icon--blue { background-color: #1a2544; color: #60a5fa; } .dark .ft-nav-icon--purple { background-color: #241738; color: #c084fc; } .dark .ft-nav-icon--teal { background-color: #0d2d34; color: #2dd4bf; } .dark .ft-nav-icon--amber { background-color: #2b240f; color: #fbbf24; } .dark .ft-nav-icon--sky { background-color: #0c2b38; color: #38bdf8; } .dark .ft-nav-icon--green { background-color: #0f2e28; color: #34d399; } .dark .ft-nav-icon--indigo { background-color: #1a1f3e; color: #818cf8; } .dark .ft-nav-icon--orange { background-color: #2b1f0f; color: #f97316; } /* Sub-menu group toggle */ #portal-sidebar .ft-nav-subtoggle { color: hsl(var(--foreground) / .78); font-weight: 500; } #portal-sidebar .ft-nav-subtoggle:hover { color: hsl(var(--foreground)); background-color: hsl(var(--muted) / .6); } .dark #portal-sidebar .ft-nav-subtoggle:hover { background-color: hsl(0 0% 100% / .04); } /* Sub-menu items — one step quieter than their parent */ #portal-sidebar .ft-nav-subitem { color: hsl(var(--foreground) / .66); font-weight: 500; } #portal-sidebar .ft-nav-subitem:hover { color: hsl(var(--foreground)); background-color: hsl(var(--muted) / .5); } .dark #portal-sidebar .ft-nav-subitem:hover { background-color: hsl(0 0% 100% / .04); } #portal-sidebar .ft-nav-subitem.is-active { color: hsl(var(--primary)); font-weight: 600; background-color: hsl(var(--primary) / .08); } .dark #portal-sidebar .ft-nav-subitem.is-active { color: hsl(219 100% 74%); background-color: hsl(var(--primary) / .14); } #portal-sidebar .ft-nav-subdot { background-color: currentColor; opacity: .4; } #portal-sidebar .ft-nav-subitem.is-active .ft-nav-subdot { opacity: 1; } /* Presence dot — ring follows the sidebar surface in both themes */ #portal-sidebar .ft-nav-presence { background-color: hsl(var(--success)) !important; border: 2px solid #fdf9f4; box-shadow: 0 0 0 2px #fdf9f4; } .dark #portal-sidebar .ft-nav-presence { background-color: hsl(var(--success)) !important; border-color: #0d1225; box-shadow: 0 0 0 2px #0d1225; } body.ft-nav-collapsed #portal-sidebar { width: 70px !important; } body.ft-nav-collapsed #portal-sidebar .ft-nav-brand-text, body.ft-nav-collapsed #portal-sidebar .ft-nav-user-meta, body.ft-nav-collapsed #portal-sidebar .ft-nav-group-label, body.ft-nav-collapsed #portal-sidebar .ft-nav-text, body.ft-nav-collapsed #portal-sidebar .ft-nav-chevron, body.ft-nav-collapsed #portal-sidebar .ft-nav-group-toggle { display: none !important; } .ft-nav-chevron { transition: transform 200ms ease; } .ft-nav-group.is-open .ft-nav-chevron { transform: rotate(180deg); } body.ft-nav-collapsed #portal-sidebar .px-4.py-3 { padding: 12px 0 !important; justify-content: center !important; } #portal-sidebar { overflow: visible !important; } .ft-nav-collapse-btn { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } body.ft-nav-collapsed #portal-sidebar .ft-nav-user-card { margin: 12px 8px !important; padding: 10px 0 !important; background: transparent !important; border-left: none !important; border-right: none !important; border-top: 1px solid rgba(255,255,255,0.1) !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; border-radius: 0 !important; display: flex !important; justify-content: center !important; cursor: pointer !important; } body.ft-nav-collapsed #portal-sidebar nav { padding-left: 6px !important; padding-right: 6px !important; } body.ft-nav-collapsed #portal-sidebar .ft-nav-panel { display: block !important; } body.ft-nav-collapsed #portal-sidebar .ft-nav-panel-inner { border-left: none !important; margin-left: 0 !important; padding-left: 0 !important; margin-top: 4px !important; margin-bottom: 4px !important; } body.ft-nav-collapsed #portal-sidebar nav a { justify-content: center !important; padding: 6px 0 !important; margin-bottom: 4px !important; border-radius: 12px !important; } body.ft-nav-collapsed #portal-sidebar nav a.is-active { border-left: none !important; background: rgba(59, 130, 246, 0.25) !important; border: 1px solid rgba(59, 130, 246, 0.5) !important; box-shadow: 0 0 12px rgba(59, 130, 246, 0.35) !important; } body.ft-nav-collapsed #portal-sidebar nav a.is-active > span { background: #3b82f6 !important; color: #ffffff !important; } .main-content { margin-left: 275px; transition: margin-left 300ms ease; min-height: 100vh; } body.ft-nav-collapsed .main-content { margin-left: 70px; } @media (max-width: 900px) { .main-content { margin-left: 0 !important; } } /* Typographic hierarchy — not generic, editorial but restrained */ h1, h2, h3, h4 { letter-spacing: -.022em; line-height: 1.2; font-feature-settings: "ss01" 1, "cv01" 1; } p, li { line-height: 1.6; } /* Eyebrow / kicker utility — used for section labels, auth headers */ .eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } /* Premium hairline + inner highlight for cards */ .card { box-shadow: var(--shadow-sm); position: relative; } .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 hsl(0 0% 100% / .7); opacity: .6; } .dark .card::before { box-shadow: inset 0 1px 0 hsl(0 0% 100% / .06); } /* Subtle focus ring — accessible, not harsh */ *:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: 2px; } /* Smooth scroll + reduced motion respect */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* -- Reset & Base ----------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: hsl(var(--background)); color: hsl(var(--foreground)); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* -- Login Page ------------------------------- */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: hsl(240 4.8% 97%); } .login-container { width: 100%; max-width: 400px; padding: 24px 20px; } .login-box { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; } .login-header { padding: 36px 32px 24px; text-align: center; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--card-foreground)); } .login-header .logo { margin-bottom: 16px; } .login-header .logo svg { width: 48px; height: 48px; color: hsl(var(--primary)); } .login-header h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.025em; color: hsl(var(--foreground)); margin-bottom: 4px; } .login-header p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .login-form { padding: 28px 32px; } .login-footer { padding: 16px 32px 24px; background-color: hsl(var(--muted)); border-top: 1px solid hsl(var(--border)); } .demo-accounts h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; color: hsl(var(--muted-foreground)); } .demo-list { font-size: 0.8125rem; } .demo-item { padding: 3px 0; color: hsl(var(--muted-foreground)); } /* -- Form Elements ------------------------------ */ .form-group { margin-bottom: 18px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: hsl(var(--foreground)); font-size: 0.875rem; } .form-control { display: flex; width: 100%; padding: 8px 12px; height: 36px; border: 1px solid hsl(var(--input)); border-radius: var(--radius-sm); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.875rem; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .form-control:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15); } .form-control::placeholder { color: hsl(var(--muted-foreground)); } .form-control:disabled { background-color: hsl(var(--muted)); opacity: .6; cursor: not-allowed; } select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } textarea.form-control { height: auto; min-height: 100px; resize: vertical; padding-top: 8px; padding-bottom: 8px; } .form-text { display: block; margin-top: 5px; font-size: 0.75rem; color: hsl(var(--muted-foreground)); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .form-actions { margin-top: 22px; display: flex; gap: 8px; } /* -- Buttons ------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; height: 36px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; font-family: inherit; text-align: center; text-decoration: none; cursor: pointer; transition: opacity .15s, background-color .15s, border-color .15s; white-space: nowrap; user-select: none; line-height: 1; } .btn:disabled, .btn[disabled] { opacity: .5; pointer-events: none; } .btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .btn-primary:hover { background-color: hsl(var(--primary) / .9); border-color: hsl(var(--primary) / .9); } .btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--border)); } .btn-secondary:hover { background-color: hsl(var(--muted-foreground) / .08); } .btn-success { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)); border-color: hsl(var(--success)); } .btn-success:hover { background-color: hsl(var(--success) / .9); } .btn-danger { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); } .btn-danger:hover { background-color: hsl(var(--destructive) / .9); } .btn-warning { background-color: hsl(var(--warning)); color: hsl(0 0% 10%); border-color: hsl(var(--warning)); } .btn-warning:hover { background-color: hsl(var(--warning) / .9); } .btn-outline { background-color: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); } .btn-outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-ghost { background-color: transparent; color: hsl(var(--foreground)); border-color: transparent; } .btn-ghost:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-block { display: flex; width: 100%; } .btn-sm { height: 30px; padding: 0 12px; font-size: 0.8125rem; border-radius: var(--radius-sm); } .btn-lg { height: 42px; padding: 0 20px; font-size: 1rem; } .btn svg { flex-shrink: 0; } /* -- Alerts ------------------------------------ */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border-width: 1px; border-style: solid; margin-bottom: 16px; font-size: 0.875rem; line-height: 1.5; width: 100%; } .alert-success { background-color: hsl(142 76% 36% / .08); color: hsl(142 72% 29%); border-color: hsl(142 76% 36% / .25); border-left: 3px solid hsl(var(--success)); } .alert-error { background-color: hsl(var(--destructive) / .08); color: hsl(0 72% 35%); border-color: hsl(var(--destructive) / .25); border-left: 3px solid hsl(var(--destructive)); } .alert-warning { background-color: hsl(var(--warning) / .08); color: hsl(38 92% 30%); border-color: hsl(var(--warning) / .25); border-left: 3px solid hsl(var(--warning)); } .alert-info { background-color: hsl(var(--info) / .08); color: hsl(217 91% 35%); border-color: hsl(var(--info) / .25); border-left: 3px solid hsl(var(--info)); } /* -- Dark Mode Alert overrides ------------ */ .dark .alert-success { color: hsl(142 71% 68%); background-color: hsl(142 71% 45% / .12); } .dark .alert-error { color: hsl(0 90% 72%); background-color: hsl(0 62.8% 50% / .12); } .dark .alert-warning { color: hsl(38 92% 72%); background-color: hsl(38 92% 50% / .12); } .dark .alert-info { color: hsl(217 91% 75%); background-color: hsl(217 91% 60% / .12); } /* -- Dark Mode Badge overrides ------------ */ .dark .badge-pending { color: hsl(38 92% 72%); } .dark .badge-approved, .dark .badge-complete, .dark .badge-active { color: hsl(142 71% 68%); } .dark .badge-rejected, .dark .badge-incomplete { color: hsl(0 90% 72%); } .dark .badge-student { color: hsl(217 91% 75%); } .dark .badge-adviser { color: hsl(38 92% 72%); } .dark .badge-admin { color: hsl(0 90% 72%); } /* -- Dark Mode � login page bg ------------ */ .dark .login-page { background-color: hsl(240 10% 5%); } .dark .login-header { background: hsl(var(--card)); border-color: hsl(var(--border)); } .dark .login-footer { background-color: hsl(var(--muted)); border-color: hsl(var(--border)); } /* -- Theme Toggle Switch ----------------------- */ .theme-switch-wrap { display: inline-flex; align-items: center; gap: 8px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 999px; padding: 5px 12px 5px 10px; box-shadow: var(--shadow-sm); transition: box-shadow .15s; flex-shrink: 0; } .theme-switch-wrap:hover { box-shadow: var(--shadow-md); } /* Fixed variant � pages with no header-actions */ .theme-switch-wrap--fixed { position: fixed; top: 14px; right: 20px; z-index: 4000; box-shadow: var(--shadow-md); } /* Compact mobile header variant */ .theme-switch-wrap--mobile { padding: 4px 8px 4px 6px; gap: 5px; background: transparent; border: 1px solid hsl(var(--border)); box-shadow: none; } .theme-switch-wrap--mobile .theme-switch-track { width: 32px; height: 18px; } .theme-switch-wrap--mobile .theme-switch-thumb { width: 12px; height: 12px; top: 2px; left: 2px; } .theme-switch-wrap--mobile .theme-switch input:checked + .theme-switch-track .theme-switch-thumb { transform: translateX(14px); } .theme-switch-wrap--mobile .theme-switch-icon { font-size: 0.8125rem; } .theme-switch-icon { font-size: 0.875rem; line-height: 1; user-select: none; transition: transform .2s; } .theme-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .theme-switch-track { width: 40px; height: 22px; background-color: hsl(var(--muted-foreground) / .25); border-radius: 999px; border: 1px solid hsl(var(--border)); position: relative; transition: background-color .2s, border-color .2s; } .theme-switch input:checked + .theme-switch-track { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s cubic-bezier(.4,0,.2,1); } .theme-switch input:checked + .theme-switch-track .theme-switch-thumb { transform: translateX(18px); } /* -- FT-Nav Sidebar (glass) — Admin / Adviser / Linkage / Student -- */ /* Floating translucent glass rail: pinned brand header, scrollable nav, pinned account footer. Desktop icon-rail mode is driven by body.ft-nav-collapsed (desktop only); the mobile drawer by .is-open on the sidebar plus body.ft-nav-open. Visual tokens live in :root / .dark. */ .ft-sidebar { position: fixed; left: var(--ft-nav-gap); top: var(--ft-nav-gap); bottom: var(--ft-nav-gap); width: var(--ft-nav-width); display: flex; flex-direction: column; z-index: 1000; color: var(--ft-nav-ink); border-radius: var(--ft-nav-radius); /* --ft-nav-glass-* and --ft-nav-blur were dropped when the glassmorphism pass was reverted, but these declarations still referenced them. An undefined custom property with no fallback invalidates the whole declaration, so the student sidebar was rendering with no background at all. Uses the same warm cream / navy surfaces as the other portals now. */ background-color: #fdf9f4; border-right: 1px solid var(--ft-nav-border); box-shadow: var(--shadow-sm); overflow: hidden; /* header + footer stay pinned; only .ft-nav-body scrolls */ } .dark .ft-sidebar { background-color: #0d1225; border-right-color: #1e2345; } /* The ambient glow blobs belonged to the glass treatment. On a solid surface they only tint the cream indigo, and the student sidebar would no longer match the other portals, so they are off. */ .ft-sidebar::before { content: none; } .ft-nav-head, .ft-nav-body, .ft-nav-foot { position: relative; z-index: 1; } /* -- Brand header ------------------------------- */ .ft-nav-head { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 16px 60px 14px 16px; border-bottom: 1px solid var(--ft-nav-border); flex-shrink: 0; } .ft-nav-logo { width: 38px; height: 38px; border-radius: 12px; object-fit: contain; background: hsl(0 0% 100% / .92); padding: 3px; box-shadow: 0 6px 16px -4px rgba(4, 8, 32, .5); flex-shrink: 0; } .ft-nav-brand { min-width: 0; } .ft-nav-brand h2 { font-size: 0.9375rem; font-weight: 700; letter-spacing: -.01em; color: var(--ft-nav-ink); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ft-nav-brand p { font-size: 0.6875rem; font-weight: 600; color: var(--ft-nav-ink-faint); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Header controls (collapse on desktop, close on mobile) */ .ft-nav-head-actions { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .ft-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 10px; background: hsl(0 0% 100% / .06); color: var(--ft-nav-ink-soft); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, color .15s ease; } .ft-nav-btn:hover { background: hsl(0 0% 100% / .12); color: var(--ft-nav-ink); } .ft-nav-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; } .ft-nav-btn svg { flex-shrink: 0; } /* Collapse control: desktop only */ .ft-nav-collapse-btn { display: inline-flex; } /* Drawer close control: mobile only */ .ft-nav-close-btn { display: none; } /* -- Scrollable nav ------------------------------ */ .ft-nav-body { flex: 1; min-height: 0; padding: 14px 12px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsl(0 0% 100% / .22) transparent; } .ft-nav-body::-webkit-scrollbar { width: 6px; } .ft-nav-body::-webkit-scrollbar-track { background: transparent; } .ft-nav-body::-webkit-scrollbar-thumb { background: hsl(0 0% 100% / .2); border-radius: 999px; } .ft-nav-body::-webkit-scrollbar-thumb:hover { background: hsl(0 0% 100% / .34); } /* -- Accordion category groups (Admin / Adviser / Linkage) -- */ .ft-nav-group + .ft-nav-group { margin-top: 8px; } .ft-nav-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; margin: 0; padding: 4px 8px; background: none; border: none; border-radius: 9px; box-shadow: none; outline: none; /* custom ring provided by :focus-visible below */ -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; font-size: inherit; line-height: 1.2; text-align: left; color: var(--ft-nav-ink-faint); -webkit-tap-highlight-color: transparent; transition: color .15s ease; } .ft-nav-group-toggle:hover { color: var(--ft-nav-ink); } .ft-nav-group-toggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; } .ft-nav-group-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ft-nav-chevron { flex-shrink: 0; display: block; transition: transform .2s ease; } .ft-nav-group.is-open > .ft-nav-group-toggle .ft-nav-chevron { transform: rotate(90deg); } .ft-nav-panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .22s ease, opacity .18s ease, visibility 0s linear .22s; } .ft-nav-group.is-open > .ft-nav-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .22s ease, opacity .18s ease .05s, visibility 0s; } .ft-nav-panel-inner { overflow: hidden; min-height: 0; position: relative; } /* -- Menu items (used flat by the student sidebar too) -- */ .ft-nav-item { display: flex; align-items: center; gap: 12px; min-height: 42px; margin-top: 3px; padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; color: var(--ft-nav-ink-soft); text-decoration: none; font-size: 0.875rem; font-weight: 500; line-height: 1.35; position: relative; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .ft-nav-item:first-child { margin-top: 0; } .ft-nav-item svg { flex-shrink: 0; opacity: .8; transition: opacity .15s ease; } .ft-nav-item:hover { background: hsl(0 0% 100% / .07); color: var(--ft-nav-ink); transform: translateX(2px); } .ft-nav-item:hover svg { opacity: 1; } .ft-nav-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; } /* Active destination — glowing glass pill */ .ft-nav-item.is-active { background: linear-gradient(120deg, hsl(213 94% 62% / .34), hsl(239 84% 67% / .26)); border-color: hsl(213 94% 74% / .4); color: #fff; font-weight: 600; box-shadow: 0 10px 24px -10px var(--ft-nav-glow), inset 0 1px 0 hsl(0 0% 100% / .22); } .ft-nav-item.is-active svg { opacity: 1; } .ft-nav-item.is-active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: hsl(var(--ft-nav-accent)); box-shadow: 0 0 12px 1px var(--ft-nav-glow); } /* Multi-line labels: wrap within the flex item and stay aligned with the first text line, never pushing the row wider than the sidebar. */ .ft-nav-text { min-width: 0; overflow-wrap: break-word; } /* Notification badge inside nav items */ .ft-nav-badge { margin-left: auto; flex-shrink: 0; min-width: 20px; padding: 1px 7px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; line-height: 1.5; text-align: center; color: #fff; background: linear-gradient(120deg, hsl(0 72% 56%), hsl(0 72% 44%)); box-shadow: 0 4px 10px -2px hsl(0 72% 50% / .55); } /* Badge variants for distinct alert kinds on one link (e.g. attendance) */ .ft-nav-badge--warn { background: linear-gradient(120deg, hsl(38 92% 55%), hsl(28 90% 48%)); box-shadow: 0 4px 10px -2px hsl(38 92% 50% / .55); } /* -- Account footer ------------------------------ */ .ft-nav-foot { padding: 12px 12px 14px; border-top: 1px solid var(--ft-nav-border); background: hsl(0 0% 100% / .03); flex-shrink: 0; } .ft-nav-user { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 10px; } .ft-nav-avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--ft-nav-accent)); background: linear-gradient(140deg, hsl(var(--ft-nav-accent) / .3), hsl(239 84% 67% / .22)); border: 1px solid hsl(var(--ft-nav-accent) / .4); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .2); } .ft-nav-user-meta { min-width: 0; } .ft-nav-user-meta strong { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ft-nav-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ft-nav-user-meta span { display: block; font-size: 0.6875rem; color: var(--ft-nav-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Glass logout control */ .ft-nav-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 12px; text-decoration: none; font-size: 0.875rem; font-weight: 600; color: var(--ft-nav-ink-soft); background: hsl(0 0% 100% / .05); border: 1px solid var(--ft-nav-border); transition: background-color .15s ease, color .15s ease; } .ft-nav-logout:hover { background: hsl(0 0% 100% / .11); color: var(--ft-nav-ink); } .ft-nav-logout:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .ft-sidebar, .ft-nav-chevron, .ft-nav-panel, .ft-nav-group.is-open > .ft-nav-panel, .ft-nav-item, .ft-nav-btn, .ft-nav-veil, .ft-nav-toggle { transition: none !important; } } /* -- Collapsed Icon Rail (desktop only) ---------- */ /* Driven by body.ft-nav-collapsed, set from localStorage pre-paint and toggled by the header collapse button. */ @media (min-width: 769px) { .ft-sidebar { transition: width .2s ease; } body.ft-nav-collapsed .ft-sidebar { width: var(--ft-nav-rail-width); } /* Brand: logo + expand control stacked */ body.ft-nav-collapsed .ft-nav-head { flex-direction: column; gap: 8px; padding: 14px 0 12px; } body.ft-nav-collapsed .ft-nav-brand { display: none; } body.ft-nav-collapsed .ft-nav-head-actions { position: static; transform: none; justify-content: center; margin-top: 2px; } /* Nav: icon buttons with tooltips; group headers hidden (removed from the accessibility tree), all leaf links shown grouped by spacing */ body.ft-nav-collapsed .ft-nav-group-toggle, body.ft-nav-collapsed .ft-nav-chevron { display: none; } body.ft-nav-collapsed .ft-nav-panel, body.ft-nav-collapsed .ft-nav-group.is-open > .ft-nav-panel { display: block; grid-template-rows: none; opacity: 1; visibility: visible; transition: none; } body.ft-nav-collapsed .ft-nav-panel-inner { overflow: visible; } /* Vertical rhythm between icon groups */ body.ft-nav-collapsed .ft-nav-group + .ft-nav-group { margin-top: 14px; } body.ft-nav-collapsed .ft-nav-item { justify-content: center; width: 46px; margin: 6px auto 0; padding: 9px 0; } body.ft-nav-collapsed .ft-nav-item.is-active::before { left: -15px; } body.ft-nav-collapsed .ft-nav-text, body.ft-nav-collapsed .ft-nav-badge { display: none; } /* Badge becomes a small status dot on the icon */ body.ft-nav-collapsed .ft-nav-item[data-ft-has-badge]::after { content: ''; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(120deg, hsl(0 72% 56%), hsl(0 72% 44%)); box-shadow: 0 0 0 2px hsl(229 42% 14% / .9); } /* Footer: avatar only, logout as square icon button */ body.ft-nav-collapsed .ft-nav-user { flex-direction: column; justify-content: center; gap: 8px; } body.ft-nav-collapsed .ft-nav-user-meta { display: none; } body.ft-nav-collapsed .ft-nav-logout { width: 46px; min-height: 40px; padding: 0; margin: 0 auto; overflow: hidden; } /* Rail tooltips — .ft-nav-tip elements are appended to by FtNav so scroll containers cannot clip them; shown only while collapsed, on hover or keyboard focus. */ .ft-nav-tip { position: absolute; z-index: 1300; background: hsl(231 45% 14% / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ft-nav-ink); border: 1px solid var(--ft-nav-border); box-shadow: 0 10px 24px -8px rgba(8, 12, 40, .6); padding: 5px 10px; border-radius: 10px; font-size: 0.75rem; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; } } /* -- Mobile Drawer (≤ 768px) ---------------------- */ .ft-nav-veil { display: none; position: fixed; inset: 0; background: rgba(6, 10, 30, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 999; transition: opacity .2s ease; } .ft-nav-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 1100; width: 42px; height: 42px; padding: 0; border-radius: 12px; background: hsl(231 44% 20% / .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--ft-nav-border); color: var(--ft-nav-ink); box-shadow: 0 8px 20px -6px rgba(8, 12, 40, .5); cursor: pointer; align-items: center; justify-content: center; } .ft-nav-toggle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } @media (max-width: 768px) { .ft-sidebar { left: 8px; top: 8px; bottom: 8px; width: min(17.5rem, calc(100vw - 56px)); transform: translateX(calc(-100% - 24px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } .ft-sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform .25s ease; } /* Student portals swap the drawer for the bottom tab bar */ .ft-sidebar--student { display: none !important; } .ft-nav-collapse-btn { display: none !important; } .ft-nav-close-btn { display: inline-flex; } .ft-nav-item { min-height: 44px; } body.ft-nav-open .ft-nav-veil { display: block; } body.ft-nav-open { overflow: hidden; } .ft-nav-toggle { display: flex; } /* Content flows full-width once the sidebar becomes a drawer */ .main-content { margin-left: 0; padding: 20px 16px; } } @media (prefers-reduced-motion: reduce) { .ft-sidebar, .ft-sidebar.is-open { transition: none !important; } } @media print { .ft-sidebar, .ft-nav-veil, .ft-nav-toggle, .ft-nav-tip { display: none !important; } } /* -- Main Content ------------------------------- */ .main-content { margin-left: calc(var(--ft-nav-width) + (var(--ft-nav-gap) * 2) + 8px); padding: 28px 32px; min-height: 100vh; } @media (min-width: 769px) { body.ft-nav-collapsed .main-content { margin-left: calc(var(--ft-nav-rail-width) + (var(--ft-nav-gap) * 2) + 8px); } } .content-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid hsl(var(--border)); } .content-header h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: hsl(var(--foreground)); } .content-header .dash-header-meta { margin-top: 6px; font-size: .84rem; color: hsl(var(--muted-foreground)); font-weight: 500; line-height: 1.5; } .header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } /* -- Notification Bell --------------------------- */ .notification-bell { position: relative; cursor: pointer; padding: 6px; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); transition: background-color .15s, color .15s; border: 1px solid transparent; } .notification-bell:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } /* Unread count bubble on the header notification bell */ .bell-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; padding: 1px 5px; border-radius: 999px; font-size: 0.625rem; font-weight: 700; line-height: 1.4; text-align: center; color: hsl(var(--destructive-foreground)); background-color: hsl(var(--destructive)); box-shadow: 0 2px 6px -1px hsl(0 72% 50% / .5); } .notification-panel { position: fixed; right: -400px; top: 0; bottom: 0; width: 380px; background: hsl(var(--card)); border-left: 1px solid hsl(var(--border)); box-shadow: -4px 0 24px rgba(0,0,0,.06); transition: right .25s cubic-bezier(.4,0,.2,1); z-index: 2000; } .notification-panel.active { right: 0; } .notification-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); } .notification-header h3 { font-size: 1rem; font-weight: 600; } .notification-header button { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: hsl(var(--muted-foreground)); line-height: 1; padding: 2px; border-radius: var(--radius-sm); transition: color .15s; } .notification-header button:hover { color: hsl(var(--foreground)); } .notification-list { overflow-y: auto; max-height: calc(100vh - 64px); } .notification-item { padding: 14px 20px; border-bottom: 1px solid hsl(var(--border)); transition: background-color .15s; } .notification-item:hover { background-color: hsl(var(--muted)); } .notification-item.unread { background-color: hsl(var(--primary) / .05); border-left: 3px solid hsl(var(--primary)); } .notification-item h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; } .notification-item p { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin-bottom: 4px; } .notification-item small { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* -- Cards --------------------------------------- */ .card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow-xs); transition: box-shadow .2s var(--ease-spring), transform .2s var(--ease-spring), border-color .2s; } .card:hover { box-shadow: var(--shadow-sm); } .card--lift:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid hsl(var(--border)); background: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--muted) / .35)); } .card-header h3 { font-size: .95rem; font-weight: 650; letter-spacing: -.015em; color: hsl(var(--foreground)); display: inline-flex; align-items: center; gap: 8px; } .card > .form-group, .card > form { padding: 22px; } /* Section eyebrow + description inside cards */ .card-kicker { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 6px; } .card-desc { font-size: .82rem; color: hsl(var(--muted-foreground)); line-height: 1.5; } /* -- Statistics Cards ------------------------------ */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: hsl(var(--card)); padding: 20px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); display: flex; align-items: center; gap: 16px; transition: box-shadow .15s; } .stat-card:hover { box-shadow: var(--shadow-md); } .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .stat-icon.blue { background-color: hsl(var(--info)); } .stat-icon.green { background-color: hsl(var(--success)); } .stat-icon.orange { background-color: hsl(var(--warning)); } .stat-icon.purple { background-color: hsl(271 91% 65%); } .stat-icon.teal { background-color: hsl(172 66% 50%); } .stat-icon.red { background-color: hsl(var(--destructive)); } .stat-icon.indigo { background-color: hsl(var(--primary)); } .stat-info h3 { font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; margin-bottom: 2px; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; } .stat-info p { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } /* -- Tables --------------------------------------- */ .table-responsive { overflow-x: auto; border-radius: var(--radius); } .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .table thead { background-color: hsl(var(--muted)); } .table th { padding: 11px 16px; text-align: left; font-size: .68rem; font-weight: 700; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .07em; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; background: hsl(var(--muted) / .5); } .table td { padding: 13px 16px; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); vertical-align: middle; font-size: .875rem; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background-color: hsl(var(--muted) / .55); } .text-center { text-align: center; } .text-right { text-align: right; } .text-muted { color: hsl(var(--muted-foreground)); } .text-success { color: hsl(var(--success)); } .text-warning { color: hsl(var(--warning)); } .text-danger { color: hsl(var(--destructive)); } /* -- Badges --------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; } .badge-pending { background-color: hsl(var(--warning) / .1); color: hsl(38 92% 30%); border-color: hsl(var(--warning) / .3); } .badge-approved, .badge-complete, .badge-active { background-color: hsl(var(--success) / .1); color: hsl(142 72% 29%); border-color: hsl(var(--success) / .3); } .badge-rejected, .badge-incomplete { background-color: hsl(var(--destructive) / .1); color: hsl(0 72% 35%); border-color: hsl(var(--destructive) / .3); } .badge-inactive { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); } .badge-student { background-color: hsl(var(--info) / .1); color: hsl(217 91% 35%); border-color: hsl(var(--info) / .3); } .badge-adviser { background-color: hsl(var(--warning) / .1); color: hsl(38 92% 30%); border-color: hsl(var(--warning) / .3); } .badge-admin { background-color: hsl(var(--destructive) / .1); color: hsl(0 72% 35%); border-color: hsl(var(--destructive) / .3); } /* -- Filter Tabs ---------------------------------- */ .filter-tabs { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; padding: 4px; background: hsl(var(--muted)); border-radius: var(--radius); width: fit-content; } .filter-tab { padding: 6px 14px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; transition: all .15s; } .filter-tab:hover { color: hsl(var(--foreground)); background: hsl(var(--background)); } .filter-tab.active { background-color: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; } .filter-tab .badge { margin-left: 6px; font-size: 0.625rem; } /* -- Task Monitor Inline Filters ----------------- */ .task-filter-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .task-filter-inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .task-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 170px; } .task-filter-field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .task-filter-inline-form .form-control { height: 34px; padding-top: 6px; padding-bottom: 6px; } .task-filter-inline-form .btn { height: 34px; } @media (max-width: 1100px) { .task-filter-toolbar { align-items: stretch; } .task-filter-inline-form { width: 100%; } } /* -- Modals --------------------------------------- */ .modal { position: fixed; inset: 0; background-color: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 3000; padding: 20px; } .modal.active { display: flex; } .modal-content { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: 0 16px 48px rgba(0,0,0,.12); animation: modal-in .15s ease-out; } @keyframes modal-in { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-content.large { max-width: 860px; } .modal-content.wide { max-width: 920px; width: 96vw; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid hsl(var(--border)); } .modal-header h2 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; } .modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: hsl(var(--muted-foreground)); padding: 2px 6px; border-radius: var(--radius-sm); text-decoration: none; transition: color .15s, background-color .15s; } .modal-close:hover { color: hsl(var(--foreground)); background-color: hsl(var(--accent)); } .modal-body { padding: 20px; } /* -- Progress Bar --------------------------------- */ .progress-bar { width: 100%; height: 8px; background-color: hsl(var(--muted)); border-radius: 999px; overflow: hidden; margin: 8px 0; } .progress-fill { height: 100%; background: hsl(var(--primary)); border-radius: 999px; transition: width .4s ease; } .progress-bar-mini { width: 100%; height: 5px; background-color: hsl(var(--muted)); border-radius: 999px; overflow: hidden; display: inline-block; margin-right: 8px; vertical-align: middle; } .progress-text-mini { font-size: 0.75rem; color: hsl(var(--muted-foreground)); } /* -- Quick Actions --------------------------------- */ .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding: 20px; } .action-card { padding: 24px 16px; text-align: center; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); text-decoration: none; color: hsl(var(--foreground)); transition: all .15s; } .action-card:hover { border-color: hsl(var(--primary)); border-style: solid; background-color: hsl(var(--primary) / .04); } .action-card svg { color: hsl(var(--primary)); margin-bottom: 12px; } .action-card h4 { font-size: 0.9375rem; font-weight: 600; } /* -- Info Grid ------------------------------------- */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 20px; padding: 20px; } .info-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); gap: 12px; } .info-item strong { color: hsl(var(--muted-foreground)); font-size: 0.875rem; font-weight: 500; flex-shrink: 0; } .info-item span { font-size: 0.875rem; font-weight: 500; text-align: right; } /* -- Action Buttons -------------------------------- */ .action-buttons { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* -- Filter Form ---------------------------------- */ .filter-form { padding: 20px; } /* -- No Data -------------------------------------- */ .no-data { text-align: center; padding: 48px 20px; color: hsl(var(--muted-foreground)); font-size: 0.875rem; } /* -- Task Details --------------------------------- */ .task-details-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; } .task-main { padding: 20px; } .task-sidebar { padding: 20px; background-color: hsl(var(--muted)); border-left: 1px solid hsl(var(--border)); } .detail-section { margin-bottom: 24px; } .detail-section h4 { font-size: 0.6875rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .detail-section p { margin-bottom: 6px; font-size: 0.875rem; } .photo-proof { margin-bottom: 20px; } .task-photo { width: 100%; border-radius: var(--radius); margin-top: 8px; border: 1px solid hsl(var(--border)); } .action-section h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 12px; } /* -- Responsive ------------------------------------ */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform .25s ease; } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; padding: 20px 16px; } .stats-grid { grid-template-columns: 1fr; } .task-details-grid { grid-template-columns: 1fr; } .notification-panel { width: 100%; right: -100%; } .content-header { flex-direction: column; align-items: flex-start; gap: 12px; } } /* -- Geolocation Badges ------------------------------ */ .geo-badge-valid { display: inline-flex; align-items: center; gap: 4px; background: hsl(var(--success) / .1); color: hsl(142 72% 29%); border: 1px solid hsl(var(--success) / .3); padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .geo-badge-out_of_range { background: hsl(var(--destructive) / .1); color: hsl(0 72% 35%); border: 1px solid hsl(var(--destructive) / .3); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .geo-badge-approved { background: hsl(var(--success) / .1); color: hsl(142 72% 29%); border: 1px solid hsl(var(--success) / .3); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .geo-badge-rejected { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .geo-badge-none { background: hsl(var(--info) / .1); color: hsl(217 91% 35%); border: 1px solid hsl(var(--info) / .3); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .est-geo-set { display: inline-flex; align-items: center; gap: 4px; background: hsl(var(--success) / .08); color: hsl(142 72% 29%); border: 1px solid hsl(var(--success) / .25); padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; } .est-geo-none { background: hsl(var(--warning) / .1); color: hsl(38 92% 30%); border: 1px solid hsl(var(--warning) / .3); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; } .radius-badge { background: hsl(var(--info) / .1); color: hsl(217 91% 35%); border: 1px solid hsl(var(--info) / .3); padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; display: inline-block; } .oor-alert-banner { background: hsl(var(--destructive) / .06); border: 1px solid hsl(var(--destructive) / .2); border-left: 3px solid hsl(var(--destructive)); color: hsl(0 72% 35%); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 0.875rem; } /* Floating OOR Popup Toast */ .oor-toast-popup { position: fixed; top: 68px; right: 24px; z-index: 9999; max-width: 460px; width: calc(100vw - 48px); background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--destructive) / 0.3); border-left: 4px solid hsl(var(--destructive)); border-radius: var(--radius-lg); box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; animation: oorToastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; transition: opacity 0.4s ease, transform 0.4s ease; } .oor-toast-popup.hiding { opacity: 0; transform: translateX(40px) scale(0.95); pointer-events: none; } @keyframes oorToastSlideIn { from { opacity: 0; transform: translateX(40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } } .oor-toast-content { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; line-height: 1.4; } .oor-toast-icon { width: 20px; height: 20px; color: hsl(var(--destructive)); flex-shrink: 0; } .oor-toast-close { background: transparent; border: none; color: hsl(var(--muted-foreground)); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.15s, background 0.15s; display: flex; align-items: center; justify-content: center; } .oor-toast-close:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.5); } /* Wide modal for map picker */ .modal-content.wide { max-width: 920px; width: 96vw; } .leaflet-map-container { height: 360px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); } .geo-coord-text { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); margin-top: 2px; } /* -- Toast Notifications ------------------------------ */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 360px; } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.1); font-size: 0.875rem; animation: toast-in .2s ease-out; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .toast.toast-success { border-left: 3px solid hsl(var(--success)); } .toast.toast-error { border-left: 3px solid hsl(var(--destructive)); } .toast.toast-warning { border-left: 3px solid hsl(var(--warning)); } .toast.toast-info { border-left: 3px solid hsl(var(--primary)); } /* ============================================================= INSITE — Dark Navy Dashboard Redesign (2026) Reference-matched overrides: deep navy, fixed sidebar, modern dark cards This block intentionally overrides earlier tokens & components with high-specificity rules so all portals share the same polished look without touching backend logic. ============================================================= */ /* -- Dual-Mode Tokens — Light warm is default, Dark navy via .dark (Phase 1) -- */ /* -- Global Base — uses CSS variables so light/dark switch correctly -- */ html { scroll-behavior: smooth; } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; } .dark body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } a { color: hsl(var(--primary)); } ::selection { background: hsl(var(--primary) / .3); color: #fff; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: hsl(222 47% 11%); } ::-webkit-scrollbar-thumb { background: hsl(217 19% 27%); border-radius: 999px; border: 1px solid hsl(222 47% 11%); } ::-webkit-scrollbar-thumb:hover { background: hsl(215 16% 47%); } /* ============================================================= Fixed Left Sidebar — solid dark navy, collapsible rail ============================================================= */ .ft-sidebar { left: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--ft-nav-width) !important; border-radius: 0 !important; background: hsl(222 47% 9%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; border-right: 1px solid hsl(217 19% 27% / .6) !important; box-shadow: none !important; overflow: hidden; } .ft-sidebar::before { display: none !important; } .ft-nav-head, .ft-nav-body, .ft-nav-foot { position: relative; z-index: 1; } /* Brand header — gradient indigo as reference */ .ft-nav-head { min-height: 64px !important; padding: 12px 48px 12px 14px !important; background: linear-gradient(135deg, hsl(239 84% 67%) 0%, hsl(221 83% 53%) 100%) !important; border-bottom: 1px solid hsl(0 0% 100% / .12) !important; flex-shrink: 0; gap: 10px !important; } .ft-nav-logo { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: #fff !important; padding: 3px !important; box-shadow: 0 4px 12px rgba(0,0,0,.25) !important; } .ft-nav-brand h2 { font-size: 0.9375rem !important; font-weight: 800 !important; letter-spacing: -.02em !important; color: #fff !important; line-height: 1.1 !important; } .ft-nav-brand p { font-size: 0.66rem !important; font-weight: 600 !important; color: hsl(0 0% 100% / .78) !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .ft-nav-head-actions { right: 8px !important; gap: 4px !important; } .ft-nav-btn { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: hsl(0 0% 100% / .14) !important; color: #fff !important; border: 1px solid hsl(0 0% 100% / .16) !important; } .ft-nav-btn:hover { background: hsl(0 0% 100% / .22) !important; } /* Sidebar body — grouped nav */ .ft-nav-body { padding: 12px 10px !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: hsl(217 19% 27%) transparent; } .ft-nav-group + .ft-nav-group { margin-top: 14px !important; } .ft-nav-group-toggle { min-height: 26px !important; padding: 4px 8px !important; color: hsl(215 16% 47%) !important; } .ft-nav-group-toggle:hover { color: hsl(215 20% 75%) !important; } .ft-nav-group-label { font-size: 0.64rem !important; font-weight: 700 !important; letter-spacing: .08em !important; } .ft-nav-chevron { opacity: .6; } .ft-nav-item { min-height: 40px !important; margin-top: 2px !important; padding: 8px 10px !important; border-radius: 8px !important; color: hsl(215 20% 75%) !important; font-size: 0.84rem !important; font-weight: 500 !important; gap: 10px !important; border: 1px solid transparent !important; line-height: 1.35 !important; } .ft-nav-item:first-child { margin-top: 2px !important; } .ft-nav-item svg { opacity: .85 !important; width: 18px !important; height: 18px !important; } .ft-nav-item:hover { background: hsl(217 32% 17%) !important; color: #fff !important; transform: none !important; border-color: hsl(217 19% 27% / .5) !important; } .ft-nav-item.is-active { background: hsl(217 91% 60% / .14) !important; border-color: hsl(217 91% 60% / .28) !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; } .ft-nav-item.is-active svg { opacity: 1 !important; color: #60a5fa !important; } .ft-nav-item.is-active::before { content: ''; position: absolute; left: -10px !important; top: 6px !important; bottom: 6px !important; width: 3px !important; border-radius: 99px !important; background: hsl(217 91% 60%) !important; box-shadow: 0 0 10px hsl(217 91% 60% / .5) !important; } .ft-nav-text { font-size: .84rem; } .ft-nav-badge { min-width: 20px !important; padding: 2px 7px !important; font-size: 0.68rem !important; font-weight: 700 !important; border-radius: 99px !important; background: hsl(0 84% 60%) !important; box-shadow: none !important; } /* Sidebar footer */ .ft-nav-foot { padding: 12px 10px 14px !important; background: hsl(222 47% 9%) !important; border-top: 1px solid hsl(217 19% 27% / .5) !important; } .ft-nav-user { gap: 10px !important; margin-bottom: 10px !important; } .ft-nav-avatar { width: 36px !important; height: 36px !important; font-size: 0.78rem !important; font-weight: 700 !important; color: #fff !important; background: hsl(217 91% 60%) !important; border: 1px solid hsl(217 91% 60% / .4) !important; box-shadow: none !important; } .ft-nav-user-meta strong { font-size: 0.84rem !important; color: #f1f5f9 !important; } .ft-nav-user-meta span { font-size: 0.68rem !important; color: hsl(215 20% 65%) !important; } .ft-nav-logout { min-height: 38px !important; border-radius: 8px !important; background: hsl(0 84% 60% / .1) !important; border: 1px solid hsl(0 84% 60% / .18) !important; color: #fca5a5 !important; font-size: 0.84rem !important; font-weight: 600 !important; } .ft-nav-logout:hover { background: hsl(0 84% 60% / .18) !important; color: #fecaca !important; } /* Collapsed rail overrides */ @media (min-width: 769px) { body.ft-nav-collapsed .ft-sidebar { width: var(--ft-nav-rail-width) !important; } body.ft-nav-collapsed .ft-nav-head { flex-direction: column !important; padding: 12px 0 10px !important; gap: 8px !important; align-items: center !important; } body.ft-nav-collapsed .ft-nav-brand { display: none !important; } body.ft-nav-collapsed .ft-nav-head-actions { position: static !important; transform: none !important; } body.ft-nav-collapsed .ft-nav-group-toggle, body.ft-nav-collapsed .ft-nav-chevron { display: none !important; } body.ft-nav-collapsed .ft-nav-group + .ft-nav-group { margin-top: 10px !important; } body.ft-nav-collapsed .ft-nav-item { width: 44px !important; margin: 4px auto 0 !important; padding: 8px 0 !important; justify-content: center !important; } body.ft-nav-collapsed .ft-nav-text, body.ft-nav-collapsed .ft-nav-badge { display: none !important; } body.ft-nav-collapsed .ft-nav-user { justify-content: center !important; flex-direction: column !important; } body.ft-nav-collapsed .ft-nav-user-meta { display: none !important; } body.ft-nav-collapsed .ft-nav-logout { width: 44px !important; padding: 0 !important; margin: 0 auto !important; } .ft-nav-tip { background: hsl(222 47% 9%) !important; border: 1px solid hsl(217 19% 27%) !important; color: #f1f5f9 !important; } } /* Mobile drawer */ .ft-nav-veil { background: rgba(2,6,23,.6) !important; backdrop-filter: blur(4px) !important; } .ft-nav-toggle { background: hsl(222 47% 9% / .9) !important; border: 1px solid hsl(217 19% 27%) !important; color: #f1f5f9 !important; box-shadow: 0 4px 12px rgba(0,0,0,.3) !important; } /* ============================================================= Main Content & Top Header (breadcrumb / meta bar) ============================================================= */ .main-content { margin-left: var(--ft-nav-width) !important; padding: 0 !important; background: hsl(222 47% 11%) !important; min-height: 100vh; } @media (min-width: 769px) { body.ft-nav-collapsed .main-content { margin-left: var(--ft-nav-rail-width) !important; } } @media (max-width: 768px) { .main-content { margin-left: 0 !important; padding: 0 !important; } } /* Content header becomes the sticky top bar */ .content-header { position: sticky !important; top: 0 !important; z-index: 40 !important; margin-bottom: 0 !important; padding: 14px 24px !important; background: hsl(217 32% 17% / .92) !important; backdrop-filter: blur(10px) saturated(140%) !important; -webkit-backdrop-filter: blur(10px) saturated(140%) !important; border-bottom: 1px solid hsl(217 19% 27% / .6) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; flex-wrap: wrap !important; } .content-header h1 { font-size: 1.15rem !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #f8fafc !important; line-height: 1.2 !important; } .content-header .dash-header-meta { margin-top: 2px !important; font-size: 0.78rem !important; color: hsl(215 20% 65%) !important; font-weight: 400 !important; } /* Breadcrumb-like prefix if page injects it — style any small text */ .content-header h1 + p, .content-header .eyebrow { color: hsl(215 20% 65%) !important; } .header-actions { gap: 10px !important; align-items: center !important; } /* Notification bell — dark pill */ .notification-bell { width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; background: hsl(217 19% 27% / .6) !important; border: 1px solid hsl(217 19% 27%) !important; color: hsl(215 20% 65%) !important; } .notification-bell:hover { background: hsl(217 19% 27%) !important; color: #f1f5f9 !important; } .bell-badge { background: hsl(0 84% 60%) !important; color: #fff !important; box-shadow: none !important; } /* Notification panel — dark */ .notification-panel { background: hsl(217 32% 17%) !important; border-left: 1px solid hsl(217 19% 27%) !important; box-shadow: -8px 0 32px rgba(0,0,0,.4) !important; } .notification-header { border-bottom: 1px solid hsl(217 19% 27%) !important; } .notification-header h3 { color: #f1f5f9 !important; } .notification-header button { color: hsl(215 20% 65%) !important; } .notification-item { border-bottom: 1px solid hsl(217 19% 27% / .5) !important; } .notification-item:hover { background: hsl(217 32% 22% / .5) !important; } .notification-item.unread { background: hsl(217 91% 60% / .08) !important; border-left: 3px solid hsl(217 91% 60%) !important; } /* Theme toggle — dark track */ .theme-switch-wrap { background: hsl(217 19% 27% / .6) !important; border: 1px solid hsl(217 19% 27%) !important; } .theme-switch-track { background: hsl(215 16% 47% / .35) !important; border-color: hsl(217 19% 27%) !important; } .theme-switch input:checked + .theme-switch-track { background: hsl(217 91% 60%) !important; border-color: hsl(217 91% 60%) !important; } /* Inner page padding wrapper — add gutters for content below header */ .main-content > *:not(.content-header):not(#notificationPanel):not(script):not(style) { margin-left: 24px !important; margin-right: 24px !important; } .main-content > *:not(.content-header):not(#notificationPanel):first-of-type { margin-top: 16px !important; } .main-content > .card:first-of-type, .main-content > .stats-grid:first-of-type { margin-top: 16px !important; } /* Evaluation period banner — amber dark as reference */ .alert { border-radius: 8px !important; font-size: 0.84rem !important; line-height: 1.5 !important; border-width: 1px !important; border-left-width: 3px !important; } .alert-success { background: hsl(142 71% 45% / .12) !important; color: #86efac !important; border-color: hsl(142 71% 45% / .25) !important; border-left-color: hsl(142 71% 45%) !important; } .alert-error, .alert-danger { background: hsl(0 84% 60% / .1) !important; color: #fca5a5 !important; border-color: hsl(0 84% 60% / .22) !important; border-left-color: hsl(0 84% 60%) !important; } .alert-warning { background: hsl(38 92% 50% / .12) !important; color: #fcd34d !important; border-color: hsl(38 92% 50% / .22) !important; border-left-color: hsl(38 92% 50%) !important; } .alert-info, .alert.info { background: hsl(217 91% 60% / .1) !important; color: #93c5fd !important; border-color: hsl(217 91% 60% / .22) !important; border-left-color: hsl(217 91% 60%) !important; } /* Special top banner (Evaluation period is completed) — match Image 1 */ .main-content > .alert:first-of-type, .card + .alert { margin-left: 24px !important; margin-right: 24px !important; } /* ============================================================= Cards — Dual-Mode (Light #ffffff default / Dark #111631 toggle) ============================================================= */ .card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.03) !important; overflow: hidden !important; color: #0f172a !important; } .dark .card { background: hsl(217 32% 17%) !important; border: 1px solid hsl(217 19% 27% / .7) !important; box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.15) !important; color: #f8fafc !important; } .card::before { display: none !important; } .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; } .dark .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; } .card-header { background: transparent !important; border-bottom: 1px solid #e2e8f0 !important; padding: 14px 18px !important; } .dark .card-header { border-bottom: 1px solid hsl(217 19% 27% / .6) !important; } .card-header h3 { color: #0f172a !important; font-weight: 600 !important; font-size: 0.92rem !important; } .dark .card-header h3 { color: #f8fafc !important; } .card-header p, .card-desc, .card-kicker { color: #64748b !important; } .dark .card-header p, .dark .card-desc, .dark .card-kicker { color: hsl(215 20% 65%) !important; } .card > .form-group, .card > form { padding: 20px !important; } .card > .table-responsive { border-radius: 0 !important; } .card .no-data { color: #64748b !important; padding: 40px 20px !important; } .dark .card .no-data { color: hsl(215 20% 65%) !important; } /* ============================================================= Stat Cards — Dual-Mode (Light #ffffff default / Dark #141832) ============================================================= */ .stats-grid { gap: 14px !important; margin-bottom: 16px !important; } .stat-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 16px 18px !important; gap: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; position: relative !important; overflow: hidden !important; color: #0f172a !important; } .dark .stat-card { background: hsl(217 32% 17%) !important; border: 1px solid hsl(217 19% 27% / .7) !important; box-shadow: 0 1px 3px rgba(0,0,0,.2) !important; color: #f8fafc !important; } .stat-card::before { display: none !important; } .stat-card::after { display: none !important; } .stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; transform: translateY(-1px) !important; } .dark .stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25) !important; } .stat-icon { width: 44px !important; height: 44px !important; border-radius: 10px !important; border: 1px solid transparent !important; flex-shrink: 0 !important; } .stat-icon.blue { background: rgba(59, 130, 246, 0.12) !important; color: #2563eb !important; border-color: rgba(59, 130, 246, 0.2) !important; } .dark .stat-icon.blue { background: hsl(217 91% 60% / .14) !important; color: #60a5fa !important; border-color: hsl(217 91% 60% / .18) !important; } .stat-icon.green { background: rgba(16, 185, 129, 0.12) !important; color: #059669 !important; border-color: rgba(16, 185, 129, 0.2) !important; } .dark .stat-icon.green { background: hsl(142 71% 45% / .14) !important; color: #4ade80 !important; border-color: hsl(142 71% 45% / .2) !important; } .stat-icon.orange { background: rgba(245, 158, 11, 0.12) !important; color: #d97706 !important; border-color: rgba(245, 158, 11, 0.2) !important; } .dark .stat-icon.orange { background: hsl(38 92% 50% / .14) !important; color: #fbbf24 !important; border-color: hsl(38 92% 50% / .2) !important; } .stat-icon.purple { background: rgba(139, 92, 246, 0.12) !important; color: #7c3aed !important; border-color: rgba(139, 92, 246, 0.2) !important; } .dark .stat-icon.purple { background: hsl(262 83% 58% / .14) !important; color: #a78bfa !important; border-color: hsl(262 83% 58% / .2) !important; } .stat-icon.teal { background: rgba(20, 184, 166, 0.12) !important; color: #0d9488 !important; border-color: rgba(20, 184, 166, 0.2) !important; } .dark .stat-icon.teal { background: hsl(173 58% 39% / .14) !important; color: #2dd4bf !important; border-color: hsl(173 58% 39% / .2) !important; } .stat-icon.red { background: rgba(239, 68, 68, 0.12) !important; color: #dc2626 !important; border-color: rgba(239, 68, 68, 0.2) !important; } .dark .stat-icon.red { background: hsl(0 84% 60% / .14) !important; color: #f87171 !important; border-color: hsl(0 84% 60% / .18) !important; } .stat-icon.indigo { background: rgba(99, 102, 241, 0.12) !important; color: #4f46e5 !important; border-color: rgba(99, 102, 241, 0.2) !important; } .dark .stat-icon.indigo { background: hsl(239 84% 67% / .14) !important; color: #818cf8 !important; border-color: hsl(239 84% 67% / .18) !important; } .sc-green { --sc-accent: hsl(142 71% 45%) !important; --sc-bg: rgba(16, 185, 129, 0.12) !important; } .sc-amber { --sc-accent: hsl(38 92% 50%) !important; --sc-bg: rgba(245, 158, 11, 0.12) !important; } .sc-blue { --sc-accent: hsl(217 91% 60%) !important; --sc-bg: rgba(59, 130, 246, 0.12) !important; } .sc-teal { --sc-accent: hsl(173 58% 39%) !important; --sc-bg: rgba(20, 184, 166, 0.12) !important; } .stat-info h3 { font-size: 1.45rem !important; font-weight: 700 !important; color: #0f172a !important; letter-spacing: -.02em !important; } .dark .stat-info h3 { color: #f8fafc !important; } .stat-info p { font-size: 0.72rem !important; font-weight: 600 !important; color: #64748b !important; letter-spacing: .04em !important; } .dark .stat-info p { color: hsl(215 20% 65%) !important; } /* ============================================================= Tables — Dual-Mode (Light #ffffff default / Dark navy toggle) ============================================================= */ .table-responsive { border: 1px solid #e2e8f0 !important; border-radius: 10px !important; background: #ffffff !important; overflow: hidden !important; } .dark .table-responsive { border: 1px solid hsl(217 19% 27% / .6) !important; background: hsl(217 32% 17%) !important; } .table { background: transparent !important; color: #0f172a !important; } .dark .table { color: #f8fafc !important; } .table thead { background: #f8fafc !important; } .dark .table thead { background: hsl(222 47% 11% / .6) !important; } .table th { background: transparent !important; color: #475569 !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: .07em !important; padding: 11px 16px !important; border-bottom: 1px solid #e2e8f0 !important; } .dark .table th { color: hsl(215 16% 47%) !important; border-bottom: 1px solid hsl(217 19% 27% / .6) !important; } .table td { color: #0f172a !important; padding: 12px 16px !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 0.85rem !important; } .dark .table td { color: hsl(210 20% 88%) !important; border-bottom: 1px solid hsl(217 19% 27% / .35) !important; } .table tbody tr:last-child td { border-bottom: none !important; } .table tbody tr:hover { background: #f8fafc !important; } .dark .table tbody tr:hover { background: hsl(217 19% 27% / .22) !important; } /* ============================================================= Badges — Dual-Mode Semantic Badges ============================================================= */ .badge { border-radius: 999px !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: .02em !important; padding: 3px 10px !important; border: 1px solid transparent !important; line-height: 1.4 !important; } .badge-pending { background: #fef3c7 !important; color: #b45309 !important; border-color: #fde68a !important; } .dark .badge-pending { background: hsl(38 92% 50% / .14) !important; color: #fcd34d !important; border-color: hsl(38 92% 50% / .28) !important; } .badge-approved, .badge-complete, .badge-active { background: #dcfce7 !important; color: #15803d !important; border-color: #bbf7d0 !important; } .dark .badge-approved, .dark .badge-complete, .dark .badge-active { background: hsl(142 71% 45% / .14) !important; color: #86efac !important; border-color: hsl(142 71% 45% / .28) !important; } .badge-rejected, .badge-incomplete { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; } .dark .badge-rejected, .dark .badge-incomplete { background: hsl(0 84% 60% / .14) !important; color: #fca5a5 !important; border-color: hsl(0 84% 60% / .28) !important; } .badge-inactive { background: #f1f5f9 !important; color: #64748b !important; border-color: #cbd5e1 !important; } .dark .badge-inactive { background: hsl(217 19% 27% / .8) !important; color: hsl(215 20% 65%) !important; border-color: hsl(217 19% 27%) !important; } .badge-student { background: #dbeafe !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; } .dark .badge-student { background: hsl(217 91% 60% / .14) !important; color: #93c5fd !important; border-color: hsl(217 91% 60% / .28) !important; } .badge-adviser { background: #f3e8ff !important; color: #6d28d9 !important; border-color: #e9d5ff !important; } .dark .badge-adviser { background: hsl(262 83% 58% / .14) !important; color: #c4b5fd !important; border-color: hsl(262 83% 58% / .28) !important; } .badge-admin { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; } .dark .badge-admin { background: hsl(0 84% 60% / .14) !important; color: #fca5a5 !important; border-color: hsl(0 84% 60% / .28) !important; } /* Department-style pills if rendered as .badge inside tables */ .table td .badge { white-space: nowrap; } /* Generic geo / establishment badges */ .geo-badge-valid, .est-geo-set { background: #dcfce7 !important; color: #15803d !important; border-color: #bbf7d0 !important; } .dark .geo-badge-valid, .dark .est-geo-set { background: hsl(142 71% 45% / .12) !important; color: #86efac !important; border-color: hsl(142 71% 45% / .25) !important; } .geo-badge-out_of_range { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fca5a5 !important; } .dark .geo-badge-out_of_range { background: hsl(0 84% 60% / .12) !important; color: #fca5a5 !important; border-color: hsl(0 84% 60% / .22) !important; } /* ============================================================= Forms — Dual-Mode (Light #ffffff default / Dark navy inputs) ============================================================= */ .form-group label { color: #334155 !important; font-weight: 600 !important; font-size: 0.84rem !important; } .dark .form-group label { color: hsl(210 20% 88%) !important; } .form-control { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; height: 40px !important; border-radius: 8px !important; font-size: 0.86rem !important; } .dark .form-control { background: hsl(222 47% 11%) !important; border: 1px solid hsl(217 19% 27%) !important; color: #f1f5f9 !important; } .form-control::placeholder { color: #94a3b8 !important; } .dark .form-control::placeholder { color: hsl(215 16% 47%) !important; } .form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important; background: #ffffff !important; } .dark .form-control:focus { border-color: hsl(217 91% 60%) !important; box-shadow: 0 0 0 3px hsl(217 91% 60% / .15) !important; background: hsl(222 47% 11%) !important; } .form-control:disabled { background: #f1f5f9 !important; color: #94a3b8 !important; opacity: .8 !important; } .dark .form-control:disabled { background: hsl(217 19% 27% / .4) !important; color: hsl(215 20% 65%) !important; } select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; } .dark select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; } textarea.form-control { min-height: 90px !important; padding-top: 10px !important; } .form-text { color: #64748b !important; } .dark .form-text { color: hsl(215 20% 65%) !important; } .filter-form { padding: 16px !important; } /* Filter tabs — pill group */ .filter-tabs { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; padding: 4px !important; gap: 4px !important; } .dark .filter-tabs { background: hsl(222 47% 11%) !important; border: 1px solid hsl(217 19% 27%) !important; } .filter-tab { color: #475569 !important; border-radius: 6px !important; font-weight: 600 !important; } .dark .filter-tab { color: hsl(215 20% 65%) !important; } .filter-tab:hover { color: #0f172a !important; background: #e2e8f0 !important; } .dark .filter-tab:hover { color: #f1f5f9 !important; background: hsl(217 19% 27% / .5) !important; } .filter-tab.active { background: #2563eb !important; color: #fff !important; box-shadow: none !important; } .dark .filter-tab.active { background: hsl(217 91% 60%) !important; } /* Search bar inside cards */ .card .form-control, .table-responsive + .form-control { background: #ffffff !important; } .dark .card .form-control, .dark .table-responsive + .form-control { background: hsl(222 47% 11%) !important; } /* ============================================================= Buttons — Dual-Mode Buttons ============================================================= */ .btn { border-radius: 8px !important; font-weight: 600 !important; letter-spacing: -.01em !important; transition: all .15s !important; } .btn-primary { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; box-shadow: 0 1px 3px rgba(0,0,0,.1) !important; } .btn-primary:hover { background: #1d4ed8 !important; border-color: #1d4ed8 !important; } .btn-secondary { background: #f1f5f9 !important; color: #1e293b !important; border-color: #cbd5e1 !important; } .dark .btn-secondary { background: hsl(217 19% 27%) !important; color: #f1f5f9 !important; border-color: hsl(217 19% 27%) !important; } .btn-secondary:hover { background: #e2e8f0 !important; } .dark .btn-secondary:hover { background: hsl(215 16% 47% / .35) !important; } /* Modals */ .modal { background: rgba(15, 23, 42, 0.5) !important; backdrop-filter: blur(6px) !important; padding: 16px !important; } .dark .modal { background: rgba(2,6,23,.68) !important; } .modal-content { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 14px !important; box-shadow: 0 20px 50px rgba(0,0,0,.15) !important; color: #0f172a !important; } .dark .modal-content { background: hsl(217 32% 17%) !important; border: 1px solid hsl(217 19% 27%) !important; color: #f8fafc !important; } .modal-header { border-bottom: 1px solid #e2e8f0 !important; padding: 16px 20px !important; } .dark .modal-header { border-bottom: 1px solid hsl(217 19% 27% / .6) !important; } .modal-header h2 { color: #0f172a !important; } .dark .modal-header h2 { color: #f8fafc !important; } .modal-body { color: #334155 !important; } .dark .modal-body { color: hsl(210 20% 88%) !important; } /* Dashboard Editorial Hero */ .dash-hero { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; } .dark .dash-hero { background: hsl(217 32% 17% / .6) !important; border: 1px solid hsl(217 19% 27% / .5) !important; color: hsl(215 20% 65%) !important; } .dash-hero strong { color: #0f172a !important; } .dark .dash-hero strong { color: #f8fafc !important; } .deployment-count-value span { background: #e2e8f0 !important; border-color: #cbd5e1 !important; color: #0f172a !important; } .dark .deployment-count-value span { background: hsl(217 19% 27%) !important; border-color: hsl(217 19% 27%) !important; color: #f1f5f9 !important; } .partner-row-icon { background: #f1f5f9 !important; border-color: #e2e8f0 !important; } .dark .partner-row-icon { background: hsl(217 19% 27% / .5) !important; border-color: hsl(217 19% 27%) !important; } /* ============================================================= Public auth pages — intentionally NOT restyled (remain unchanged per spec). No navy overrides here. ============================================================= */ /* ============================================================= Student / Linkage / Supervisor shared — reuse same tokens ============================================================= */ .student-dashboard { background: hsl(222 47% 11%) !important; color: hsl(210 40% 98%) !important; } .student-dashboard .welcome-section { background: hsl(217 32% 17%) !important; border-color: hsl(217 19% 27%) !important; } .student-dashboard .progress-card, .student-dashboard .quick-actions, .student-dashboard .today-status, .student-dashboard .recent-tasks, .student-dashboard .recent-attendance { background: hsl(217 32% 17%) !important; border-color: hsl(217 19% 27% / .6) !important; } .student-dashboard .top-bar { background: hsl(217 32% 17% / .92) !important; border-color: hsl(217 19% 27% / .6) !important; } /* Student mobile header — dark */ .mobile-header, .ft-mobile-head { background: hsl(217 32% 17% / .92) !important; border-color: hsl(217 19% 27% / .6) !important; backdrop-filter: blur(12px) !important; } .ft-bottom-nav { background: hsl(222 47% 9% / .88) !important; border-color: hsl(217 19% 27% / .6) !important; } /* Linkage dashboard specific */ .linkage-dashboard .card { background: hsl(217 32% 17%) !important; } /* Student page-wrapper — align with fixed sidebar */ .page-wrapper { margin-left: var(--ft-nav-width) !important; } @media (min-width: 769px) { body.ft-nav-collapsed .page-wrapper { margin-left: var(--ft-nav-rail-width) !important; } } @media (max-width: 768px) { .page-wrapper { margin-left: 0 !important; } } /* ============================================================= Responsive — keep sidebar collapsible, tables scroll, filters wrap ============================================================= */ @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } .main-content > *:not(.content-header):not(#notificationPanel) { margin-left: 16px !important; margin-right: 16px !important; } .content-header { padding: 12px 16px !important; } } @media (max-width: 768px) { .ft-sidebar { transform: translateX(calc(-100% - 16px)) !important; visibility: hidden !important; } .ft-sidebar.is-open { transform: translateX(0) !important; visibility: visible !important; } .ft-sidebar--student { display: none !important; } .main-content > *:not(.content-header):not(#notificationPanel) { margin-left: 12px !important; margin-right: 12px !important; } .content-header { flex-direction: column !important; align-items: flex-start !important; } .stats-grid { grid-template-columns: 1fr !important; } .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } @media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr 1fr !important; } } @media print { .ft-sidebar, .ft-nav-veil, .ft-nav-toggle, .ft-nav-tip { display: none !important; } } /* Utility — text colors on dark */ .text-muted { color: hsl(215 20% 65%) !important; } .text-success { color: #86efac !important; } .text-warning { color: #fcd34d !important; } .text-danger { color: #fca5a5 !important; } /* — Inline-style light banners → dark equivalents (student assignment info, etc.) — */ div[style*="background:#f0f9ff"], div[style*="background: #f0f9ff"] { background: hsl(217 91% 60% / .12) !important; border-color: hsl(217 91% 60% / .25) !important; color: #93c5fd !important; } div[style*="background:#fff7ed"] { background: hsl(38 92% 50% / .14) !important; color: #fcd34d !important; } div[style*="background:#dcfce7"] { background: hsl(142 71% 45% / .14) !important; color: #86efac !important; } div[style*="background:#fce4ec"] { background: hsl(0 84% 60% / .12) !important; color: #fca5a5 !important; border-color: hsl(0 84% 60% / .22) !important; } /* Department & status pills — light inline backgrounds → dark */ span[style*="background:#fef3c7"], span[style*="background: #fef3c7"], span[style*="background:#dbeafe"], span[style*="background: #dbeafe"], span[style*="background:#fee2e2"], span[style*="background: #fee2e2"], span[style*="background:#ede9fe"], span[style*="background: #ede9fe"], span[style*="background:#e0e7ff"], span[style*="background: #e0e7ff"] { border: 1px solid hsl(217 19% 27% / .5) !important; } /* Evaluation report / analytics cards with inline grid styles */ .card[style], .card-header[style] { border-color: hsl(217 19% 27% / .6) !important; } /* Ensure any hardcoded #fff text on dark becomes readable */ span[style*="color:#1a237e"], h1[style*="color:#1a237e"] { color: #f8fafc !important; } /* ============================================================= Phase 1 — Light Mode Corrections (IntellEvalPro warm white) Overrides the Dark Navy hard-coded !important rules above when html is NOT .dark. Later order + higher specificity (html:not(.dark) ...) ensures light wins in default mode. ============================================================= */ html:not(.dark) body { background-color: #faf8f5 !important; color: #1a1a2e !important; } html:not(.dark) .main-content { background: #faf8f5 !important; } html:not(.dark) .content-header { background: rgba(255,255,255,.92) !important; border-color: #e5e0d8 !important; } html:not(.dark) .content-header h1 { color: #1a1a2e !important; } html:not(.dark) .content-header .dash-header-meta, html:not(.dark) .content-header p { color: #6b7280 !important; } html:not(.dark) .card { background: #ffffff !important; border-color: #e5e0d8 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important; } html:not(.dark) .card::before { display: block !important; box-shadow: inset 0 1px 0 hsl(0 0% 100% / .7) !important; } html:not(.dark) .card-header { background: linear-gradient(to bottom, hsl(0 0% 100%), hsl(35 23% 90% / .35)) !important; border-color: #e5e0d8 !important; } html:not(.dark) .card-header h3 { color: #1a1a2e !important; } html:not(.dark) .stat-card { background: #ffffff !important; border-color: #e5e0d8 !important; } html:not(.dark) .stat-card::before { display: block !important; } html:not(.dark) .stat-card::after { display: block !important; } html:not(.dark) .stat-info h3 { color: #1a1a2e !important; } html:not(.dark) .stat-info p { color: #6b7280 !important; } html:not(.dark) .table th { background: #f5f0eb !important; color: #6b7280 !important; border-color: #e5e0d8 !important; } html:not(.dark) .table td { border-color: #e5e0d8 !important; color: #1a1a2e !important; } html:not(.dark) .table tbody tr:hover { background: #f5f0eb !important; } html:not(.dark) .ft-sidebar { background: #fdf9f4 !important; border-right: 1px solid #e8e0d4 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important; } html:not(.dark) .ft-sidebar::before { display: none !important; } html:not(.dark) .ft-nav-head { background: linear-gradient(135deg, #4f8cff 0%, #3b6fcc 100%) !important; border-color: rgba(255,255,255,.2) !important; } html:not(.dark) .ft-nav-item { color: #6b7280 !important; } html:not(.dark) .ft-nav-item:hover { background: #f5efe7 !important; color: #1a1a2e !important; } html:not(.dark) .ft-nav-item.is-active { background: #eef0ff !important; border-color: rgba(79,140,255,.25) !important; color: #1a1a2e !important; } html:not(.dark) .ft-nav-group-toggle { color: #9ca3af !important; } /* The dark-era block above forces white text and a navy footer on the shared .ft-nav-* classes. Those rules were never given a light counterpart, so in light mode the signed-in name rendered slate-100 on cream — effectively invisible. These complete that layer. */ html:not(.dark) .ft-nav-foot { background: transparent !important; border-top: 1px solid #e8e0d4 !important; } html:not(.dark) .ft-nav-user-meta strong { color: #1a1a2e !important; } html:not(.dark) .ft-nav-user-meta span { color: #6b7280 !important; } html:not(.dark) #portal-sidebar .ft-nav-user-card strong { color: #1a1a2e !important; } html:not(.dark) .ft-nav-avatar { background: #4f8cff !important; border-color: rgba(79,140,255,.4) !important; } /* Sign out reads as an ordinary item until the pointer is on it. */ html:not(.dark) .ft-nav-logout { background: transparent !important; border-color: transparent !important; color: #6b7280 !important; } html:not(.dark) .ft-nav-logout:hover { background: rgba(239,68,68,.1) !important; border-color: rgba(239,68,68,.22) !important; color: #dc2626 !important; } html:not(.dark) .ft-nav-toggle { background: rgba(255,255,255,.92) !important; border-color: #e5e0d8 !important; color: #1a1a2e !important; } html:not(.dark) .ft-nav-tip { background: #1a1a2e !important; border-color: #2a2f4d !important; color: #f5f5f5 !important; } html:not(.dark) ::-webkit-scrollbar-track { background: #faf8f5 !important; } html:not(.dark) ::-webkit-scrollbar-thumb { background: #e5e0d8 !important; border-color: #faf8f5 !important; } /* ============================================================= Phase 2 — Portal Sidebar Solid Flush (IntellEvalPro) Light: warm cream #fdf9f4 / Dark: navy #0d1225 Collapsed 70px rail + main-content offset 260px/70px ============================================================= */ #portal-sidebar { /* Fallback layout if Tailwind CDN is slow — mirrors w-[260px] fixed etc */ position: fixed; top: 0; left: 0; height: 100vh; width: 260px; z-index: 50; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; transition: all 300ms ease-out; background-color: #fdf9f4; border-right: 1px solid #e8e0d4; } .dark #portal-sidebar { background-color: #0d1225; border-color: #1e2345; border-right-color: #1e2345; } /* Collapsed rail — spec: 70px, hide texts */ body.ft-nav-collapsed #portal-sidebar { width: 70px !important; } body.ft-nav-collapsed .ft-nav-text, body.ft-nav-collapsed .ft-nav-brand-text, body.ft-nav-collapsed .ft-nav-user-meta, body.ft-nav-collapsed .ft-nav-group-label { display: none !important; } /* Center icons when collapsed */ body.ft-nav-collapsed #portal-sidebar .ft-nav-body a, body.ft-nav-collapsed #portal-sidebar .ft-nav-foot a { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; } body.ft-nav-collapsed #portal-sidebar .ft-nav-body a .ft-nav-text, body.ft-nav-collapsed #portal-sidebar .ft-nav-foot a .ft-nav-text { display: none !important; } /* Main content offset — flush sidebar, no gap (overrides old var-based offsets) */ .main-content { margin-left: 260px !important; transition: margin-left 300ms ease !important; } body.ft-nav-collapsed .main-content { margin-left: 70px !important; } /* Mobile drawer for #portal-sidebar (mirrors .ft-sidebar drawer, Phase 2 spec keeps behavior) */ @media (max-width: 768px) { #portal-sidebar { left: 0 !important; top: 0 !important; bottom: 0 !important; height: 100vh !important; width: min(260px, calc(100vw - 56px)) !important; border-radius: 0 !important; transform: translateX(calc(-100% - 24px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; overflow-y: auto !important; overflow-x: hidden !important; } #portal-sidebar.is-open { transform: translateX(0) !important; visibility: visible !important; transition: transform .25s ease !important; } .main-content { margin-left: 0 !important; } /* When drawer open, veil logic handled by Js; sidebar head actions keep close btn */ } /* ── Clean Dropdown Select Controls ──────────────────────────── */ select, select.form-control { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important; padding-right: 38px !important; } html.dark select, html.dark select.form-control, body.dark select, body.dark select.form-control { 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='%23cbd5e1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important; } /* ── Statistics Cards ─────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-card { background: hsl(var(--card)); padding: 20px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); display: flex; align-items: center; gap: 16px; transition: box-shadow .15s; } .stat-card:hover { box-shadow: var(--shadow-md); } .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0; } .stat-info h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 2px; color: hsl(var(--foreground)); white-space: nowrap; } .stat-info p { font-size: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.3; } /* -- sc-* color variant cards ---- */ .stat-card.sc-green, .stat-card.sc-amber, .stat-card.sc-blue, .stat-card.sc-teal, .stat-card.sc-red, .stat-card.sc-indigo, .stat-card.sc-purple { position: relative; overflow: hidden; border-radius: var(--radius-lg); transition: box-shadow .2s, transform .2s; min-width: 0; } .stat-card.sc-green:hover, .stat-card.sc-amber:hover, .stat-card.sc-blue:hover, .stat-card.sc-teal:hover, .stat-card.sc-red:hover, .stat-card.sc-indigo:hover, .stat-card.sc-purple:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .stat-card.sc-green .stat-icon, .stat-card.sc-amber .stat-icon, .stat-card.sc-blue .stat-icon, .stat-card.sc-teal .stat-icon, .stat-card.sc-red .stat-icon, .stat-card.sc-indigo .stat-icon, .stat-card.sc-purple .stat-icon { background: var(--sc-bg, hsl(var(--primary) / .1)) !important; color: var(--sc-accent, hsl(var(--primary))) !important; } .stat-card.sc-green .stat-info, .stat-card.sc-amber .stat-info, .stat-card.sc-blue .stat-info, .stat-card.sc-teal .stat-info, .stat-card.sc-red .stat-info, .stat-card.sc-indigo .stat-info, .stat-card.sc-purple .stat-info { min-width: 0; overflow: hidden; } .stat-card.sc-green .stat-info h3, .stat-card.sc-amber .stat-info h3, .stat-card.sc-blue .stat-info h3, .stat-card.sc-teal .stat-info h3, .stat-card.sc-red .stat-info h3, .stat-card.sc-indigo .stat-info h3, .stat-card.sc-purple .stat-info h3 { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: hsl(var(--foreground)); } .stat-card.sc-green .stat-info p, .stat-card.sc-amber .stat-info p, .stat-card.sc-blue .stat-info p, .stat-card.sc-teal .stat-info p, .stat-card.sc-red .stat-info p, .stat-card.sc-indigo .stat-info p, .stat-card.sc-purple .stat-info p { font-size: 0.73rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--muted-foreground)); } /* Color tokens */ .sc-green { --sc-accent: hsl(var(--success)); --sc-bg: hsl(var(--success) / .1); } .sc-amber { --sc-accent: hsl(38 80% 36%); --sc-bg: hsl(var(--warning) / .12); } .sc-blue { --sc-accent: hsl(var(--info)); --sc-bg: hsl(var(--info) / .1); } .sc-teal { --sc-accent: hsl(172 60% 40%); --sc-bg: hsl(172 60% 40% / .12); } .sc-red { --sc-accent: hsl(var(--destructive)); --sc-bg: hsl(var(--destructive) / .1); } .sc-indigo { --sc-accent: hsl(var(--primary)); --sc-bg: hsl(var(--primary) / .12); } .sc-purple { --sc-accent: hsl(271 72% 52%); --sc-bg: hsl(271 72% 52% / .12); } /* Dark mode adjustments for sc-amber text */ html.dark .sc-amber { --sc-accent: hsl(38 92% 72%); } /* -- Panel / Page Toolbar --------------------------------- */ .panel-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .panel-toolbar-meta { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } /* Responsive: stack cards on small screens */ @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } } /* ── Notification Bell ─────────────────────────────────────────── */ .notification-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; color: hsl(var(--foreground)); background: transparent; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; flex-shrink: 0; } .notification-bell:hover { background: hsl(var(--muted)); border-color: hsl(var(--border)); } .notification-bell svg { width: 20px; height: 20px; stroke: currentColor; display: block; } /* Dark mode — ensure icon is visible */ html.dark .notification-bell, body.dark .notification-bell { color: hsl(215 20% 75%); } html.dark .notification-bell:hover, body.dark .notification-bell:hover { color: hsl(0 0% 95%); background: hsl(var(--muted)); } /* Unread count badge */ .bell-badge, .badge-notif { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; background: hsl(var(--destructive)); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; border-radius: 999px; text-align: center; pointer-events: none; } /* Admin Settings navigation: shared renderer, existing drawer and icon rail. Light (warm cream) is the default; .dark overrides restore the original navy skin. These used to be hardcoded to the navy palette with !important, so this sidebar stayed dark even with the theme toggle off. */ #portal-sidebar[data-admin-settings-nav]{background:#fdf9f4!important;color:#3a3f52} #portal-sidebar[data-admin-settings-nav] .ft-nav-group-toggle{color:#6b7280!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-group-label span{color:#6b7280!important} #portal-sidebar[data-admin-settings-nav] nav a .ft-nav-text{color:#3a3f52!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-group>.ft-nav-group-toggle{padding:10px 8px;text-transform:none;letter-spacing:0} #portal-sidebar[data-admin-settings-nav] .ft-nav-group-label{flex:1;min-width:0;white-space:normal;text-align:left;gap:10px} #portal-sidebar[data-admin-settings-nav] .ft-nav-group>.ft-nav-group-toggle>.ft-nav-chevron{margin-left:8px} #portal-sidebar[data-admin-settings-nav] .ft-nav-group-label>span:last-child{font-size:14px;text-transform:none;letter-spacing:0;font-weight:600!important;color:#1a1a2e!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-group-icon{width:34px;height:34px;border-radius:10px;background:hsl(173 80% 40% / .14);color:hsl(174 72% 32%)!important;display:flex;align-items:center;justify-content:center;flex-shrink:0} #portal-sidebar[data-admin-settings-nav] .ft-nav-group-icon svg{width:18px;height:18px} #portal-sidebar[data-admin-settings-nav] .ft-nav-group-label .ft-nav-group-icon{color:hsl(174 72% 32%)!important} #portal-sidebar[data-admin-settings-nav] [data-group-key="overview"] .ft-nav-group-icon{background:hsl(219 100% 66% / .12);color:hsl(219 75% 52%)!important} #portal-sidebar[data-admin-settings-nav] [data-group-key="academic"] .ft-nav-group-icon{background:hsl(258 90% 66% / .12);color:hsl(258 70% 56%)!important} #portal-sidebar[data-admin-settings-nav] [data-group-key="partners"] .ft-nav-group-icon{background:hsl(199 89% 48% / .13);color:hsl(200 80% 38%)!important} #portal-sidebar[data-admin-settings-nav] [data-group-key="compliance"] .ft-nav-group-icon{background:hsl(25 95% 53% / .13);color:hsl(22 85% 44%)!important} #portal-sidebar[data-admin-settings-nav] [data-group-key="monitoring"] .ft-nav-group-icon{background:rgba(244,114,182,.14);color:#be185d!important} #portal-sidebar[data-admin-settings-nav] [data-group-key="settings"] .ft-nav-group-icon{background:hsl(173 80% 40% / .14);color:hsl(174 72% 32%)!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-group .ft-nav-chevron svg{transform:none!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-panel-inner{margin-left:34px;padding-left:14px;border-color:#e5e0d8} #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a{padding:10px 9px;gap:10px;border-radius:7px;border-left:0!important;box-shadow:none} #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a>span:first-child{width:18px;height:18px;border-radius:0;background:transparent!important;color:#6b7280!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a .ft-nav-text{font-size:13px;font-weight:500!important;color:#3a3f52!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a:hover{background:#f0ede8!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a[aria-current="page"]{background:hsl(173 80% 40% / .16)!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a[aria-current="page"] .ft-nav-text{color:hsl(174 80% 26%)!important} #portal-sidebar[data-admin-settings-nav] :focus-visible{outline:2px solid #0d9488;outline-offset:3px} @media(max-width:768px){#portal-sidebar[data-admin-settings-nav]{z-index:1050!important}} .dark #portal-sidebar[data-admin-settings-nav]{background:#0d1629!important;color:#cbd5e1} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-group-toggle{color:#b8c2d2!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-group-label span{color:#b8c2d2!important} .dark #portal-sidebar[data-admin-settings-nav] nav a .ft-nav-text{color:#cbd5e1!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-group-label>span:last-child{color:#e2e8f0!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-group-icon{background:#123b41;color:#2dd4bf!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-group-label .ft-nav-group-icon{color:#2dd4bf!important} .dark #portal-sidebar[data-admin-settings-nav] [data-group-key="overview"] .ft-nav-group-icon{background:#172554;color:#60a5fa!important} .dark #portal-sidebar[data-admin-settings-nav] [data-group-key="academic"] .ft-nav-group-icon{background:#2e1f47;color:#c084fc!important} .dark #portal-sidebar[data-admin-settings-nav] [data-group-key="partners"] .ft-nav-group-icon{background:#0c2b38;color:#38bdf8!important} .dark #portal-sidebar[data-admin-settings-nav] [data-group-key="compliance"] .ft-nav-group-icon{background:#3a2415;color:#fb923c!important} .dark #portal-sidebar[data-admin-settings-nav] [data-group-key="monitoring"] .ft-nav-group-icon{background:#351c36;color:#f472b6!important} .dark #portal-sidebar[data-admin-settings-nav] [data-group-key="settings"] .ft-nav-group-icon{background:#123b41;color:#2dd4bf!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-panel-inner{border-color:#435066} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a>span:first-child{color:#94a3b8!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a .ft-nav-text{color:#b8c2d2!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a:hover{background:#1d2b42!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a[aria-current="page"]{background:#163b43!important} .dark #portal-sidebar[data-admin-settings-nav] .ft-nav-panel a[aria-current="page"] .ft-nav-text{color:#5eead4!important} .dark #portal-sidebar[data-admin-settings-nav] :focus-visible{outline:2px solid #5eead4;outline-offset:3px} /* Flat section hierarchy shared by Admin and Dean sidebars. */ #portal-sidebar[data-admin-settings-nav] .ft-nav-section{margin:0 0 10px} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-label{display:flex;align-items:center;gap:9px;min-height:30px;padding:8px 4px 6px;color:#9ca5b5;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-label>span:first-child{width:3px;height:13px;flex:0 0 3px;border-radius:2px;background:#647cff} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>.ft-nav-subtoggle, #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>a{min-height:52px;padding:6px 10px;border-radius:11px} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>.ft-nav-subtoggle .ft-nav-text, #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>a .ft-nav-text{color:#c4cbd7!important;font-size:14px;font-weight:600!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>.ft-nav-subtoggle>span:first-child, #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>a>span:first-child{width:40px;height:40px;border-radius:10px} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div{margin:0 0 2px 13px;padding:2px 0 2px 24px;border-left:2px solid #3b4659} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div>a{min-height:44px;padding:7px 10px;border-radius:6px} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div>a .ft-nav-subicon{display:inline-flex;width:19px;height:19px;align-items:center;justify-content:center;color:#778294} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div>a .ft-nav-subicon svg{width:17px;height:17px} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div>a .ft-nav-text{color:#aeb7c6!important;font-size:13.5px;font-weight:600!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div>a.is-active .ft-nav-text, #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div>a.is-active .ft-nav-subicon{color:#90aaff!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>.ft-nav-subtoggle:hover, #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>a:hover{background:#ffffff0d!important} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>.ft-nav-subtoggle.is-active{background:#1d3b72!important;box-shadow:0 5px 14px rgba(0,0,0,.14)} #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>.ft-nav-subtoggle.is-active .ft-nav-text{color:#d4deff!important} html:not(.dark) #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div{border-color:#d7dde5} html:not(.dark) #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>div>a .ft-nav-text{color:#566174!important} html:not(.dark) #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>.ft-nav-subgroup>.ft-nav-subtoggle .ft-nav-text, html:not(.dark) #portal-sidebar[data-admin-settings-nav] .ft-nav-section-items>a .ft-nav-text{color:#3a3f52!important} /* Sidebar sizing — slightly wider rail and roomier top-level menu buttons (desktop, expanded only) */ @media (min-width: 769px) { body:not(.ft-nav-collapsed) #portal-sidebar { width: 296px !important; } body:not(.ft-nav-collapsed) .main-content { margin-left: 296px !important; } body:not(.ft-nav-collapsed) #portal-sidebar [data-admin-flowbite-nav] > ul > li > a, body:not(.ft-nav-collapsed) #portal-sidebar [data-admin-flowbite-nav] > ul > li > button { padding-top: 14px; padding-bottom: 14px; } body:not(.ft-nav-collapsed) #portal-sidebar [data-admin-flowbite-nav] > ul > li > a > span:not(.grid):not(.absolute):not(.w-1), body:not(.ft-nav-collapsed) #portal-sidebar [data-admin-flowbite-nav] > ul > li > button > span:not(.grid):not(.absolute):not(.w-1) { font-size: 15px; } body:not(.ft-nav-collapsed) #portal-sidebar [data-admin-flowbite-nav] > ul > li > a > .grid.h-9.w-9, body:not(.ft-nav-collapsed) #portal-sidebar [data-admin-flowbite-nav] > ul > li > button > .grid.h-9.w-9 { width: 44px; height: 44px; } }