@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ================================================================ dTech Smart Attendance — Modern theme system (light + dark) Uses data-bs-theme on so Bootstrap 5.3 dark mode works alongside our custom variables. No JS-only colors; everything flows through CSS vars so the theme switch is instant. ================================================================ */ :root, [data-bs-theme="light"] { /* Minimal (minimals.cc) — primary is green */ --brand-1: #00AB55; --brand-2: #007B55; --brand-grad: linear-gradient(135deg, #00AB55 0%, #007B55 100%); --brand-lighter: #C8FACD; --c-success: #36B37E; --c-warning: #FFAB00; --c-danger: #FF5630; --c-info: #00B8D9; --c-purple: #3366FF; --c-pink: #FF5630; --page-bg: #FFFFFF; --page-bg-deep: #F4F6F8; --card-bg: #FFFFFF; --card-bg-soft: #F4F6F8; --card-border: #DFE3E8; --card-border-soft:rgba(145,158,171,0.16); --hover-bg: rgba(145,158,171,0.08); --sidebar-bg: #FFFFFF; --sidebar-border: rgba(145,158,171,0.12); --sidebar-text: #637381; --sidebar-muted: #919EAB; --sidebar-hover-bg: rgba(145,158,171,0.08); --sidebar-active-bg: rgba(0,171,85,0.08); --sidebar-active-text:#007B55; --topbar-bg: rgba(255,255,255,0.80); --topbar-border:rgba(145,158,171,0.12); --text-primary: #212B36; --text-secondary:#637381; --text-muted: #919EAB; --input-bg: #FFFFFF; --input-border: rgba(145,158,171,0.32); --input-focus: #212B36; --input-focus-glow: rgba(145,158,171,0.16); --shadow-sm: 0 1px 2px 0 rgba(145,158,171,0.16); --shadow-md: 0 0 2px 0 rgba(145,158,171,0.20), 0 12px 24px -4px rgba(145,158,171,0.12); --shadow-lg: 0 0 2px 0 rgba(145,158,171,0.24), -20px 20px 40px -4px rgba(145,158,171,0.24); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; } [data-bs-theme="dark"] { --brand-1: #5BE584; --brand-2: #00AB55; --brand-grad: linear-gradient(135deg, #00AB55 0%, #007B55 100%); --brand-lighter: #C8FACD; --c-success: #86E8AB; --c-warning: #FFD666; --c-danger: #FFAC82; --c-info: #61F3F3; --c-purple: #84A9FF; --c-pink: #FFAC82; --page-bg: #161C24; --page-bg-deep: #0F131A; --card-bg: #212B36; --card-bg-soft: rgba(145,158,171,0.12); --card-border: rgba(145,158,171,0.16); --card-border-soft:rgba(145,158,171,0.10); --hover-bg: rgba(145,158,171,0.08); --sidebar-bg: #212B36; --sidebar-border: rgba(145,158,171,0.12); --sidebar-text: #919EAB; --sidebar-muted: #637381; --sidebar-hover-bg: rgba(145,158,171,0.08); --sidebar-active-bg: rgba(0,171,85,0.16); --sidebar-active-text:#5BE584; --topbar-bg: rgba(33,43,54,0.80); --topbar-border:rgba(145,158,171,0.12); --text-primary: #FFFFFF; --text-secondary:#919EAB; --text-muted: #637381; --input-bg: rgba(145,158,171,0.08); --input-border: rgba(145,158,171,0.32); --input-focus: #FFFFFF; --input-focus-glow: rgba(145,158,171,0.16); --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.24); --shadow-md: 0 0 2px 0 rgba(0,0,0,0.24), 0 12px 24px -4px rgba(0,0,0,0.24); --shadow-lg: 0 0 2px 0 rgba(0,0,0,0.24), -20px 20px 40px -4px rgba(0,0,0,0.24); } /* ============================================================ Theme system — accent colours + special modes. `data-accent` recolours the brand (buttons, links, active nav, outlines) on top of the light/dark base. Placed after the base blocks so it wins on equal specificity. ============================================================ */ /* Each accent also sets --hero-1/--hero-2: a saturated pair that stays readable with white text (used by the hero banner, which must never go as light as --brand-1 does in dark mode). */ [data-accent="green"] { --brand-1:#00AB55; --brand-2:#007B55; --brand-grad:linear-gradient(135deg,#00AB55 0%,#007B55 100%); --sidebar-active-bg:rgba(0,171,85,0.10); --sidebar-active-text:#007B55; --hero-1:#00AB55; --hero-2:#007B55; } [data-accent="blue"] { --brand-1:#2065D1; --brand-2:#103996; --brand-grad:linear-gradient(135deg,#2065D1 0%,#103996 100%); --sidebar-active-bg:rgba(32,101,209,0.10); --sidebar-active-text:#103996; --hero-1:#2065D1; --hero-2:#103996; } [data-accent="violet"] { --brand-1:#7635DC; --brand-2:#5119B7; --brand-grad:linear-gradient(135deg,#7635DC 0%,#5119B7 100%); --sidebar-active-bg:rgba(118,53,220,0.10);--sidebar-active-text:#5119B7; --hero-1:#7635DC; --hero-2:#5119B7; } [data-accent="orange"] { --brand-1:#FF7A00; --brand-2:#B76E00; --brand-grad:linear-gradient(135deg,#FF7A00 0%,#B76E00 100%); --sidebar-active-bg:rgba(255,122,0,0.10); --sidebar-active-text:#B76E00; --hero-1:#FF7A00; --hero-2:#B76E00; } [data-accent="cyan"] { --brand-1:#00B8D9; --brand-2:#006C9C; --brand-grad:linear-gradient(135deg,#00B8D9 0%,#006C9C 100%); --sidebar-active-bg:rgba(0,184,217,0.10); --sidebar-active-text:#006C9C; --hero-1:#00B8D9; --hero-2:#006C9C; } [data-accent="red"] { --brand-1:#FF4842; --brand-2:#B71D18; --brand-grad:linear-gradient(135deg,#FF4842 0%,#B71D18 100%); --sidebar-active-bg:rgba(255,72,66,0.10); --sidebar-active-text:#B71D18; --hero-1:#FF4842; --hero-2:#B71D18; } [data-accent="teal"] { --brand-1:#00A76F; --brand-2:#007867; --brand-grad:linear-gradient(135deg,#00A76F 0%,#007867 100%); --sidebar-active-bg:rgba(0,167,111,0.10); --sidebar-active-text:#007867; --hero-1:#00A76F; --hero-2:#007867; } [data-accent="indigo"] { --brand-1:#3D5AFE; --brand-2:#2C3E9E; --brand-grad:linear-gradient(135deg,#3D5AFE 0%,#2C3E9E 100%); --sidebar-active-bg:rgba(61,90,254,0.10); --sidebar-active-text:#2C3E9E; --hero-1:#3D5AFE; --hero-2:#2C3E9E; } [data-accent="navy"] { --brand-1:#2F5785; --brand-2:#22415F; --brand-grad:linear-gradient(135deg,#2F5785 0%,#22415F 100%); --sidebar-active-bg:rgba(47,87,133,0.10); --sidebar-active-text:#22415F; --hero-1:#2F5785; --hero-2:#22415F; } [data-accent="mono"] { --brand-1:#212B36; --brand-2:#454F5B; --brand-grad:linear-gradient(135deg,#454F5B 0%,#212B36 100%); --sidebar-active-bg:rgba(33,43,54,0.08); --sidebar-active-text:#212B36; --hero-1:#454F5B; --hero-2:#212B36; } [data-accent="purple"] { --brand-1:#8C57FF; --brand-2:#7E4EE6; --brand-grad:linear-gradient(135deg,#8C57FF 0%,#7E4EE6 100%); --sidebar-active-bg:rgba(140,87,255,0.12);--sidebar-active-text:#7E4EE6; --hero-1:#8C57FF; --hero-2:#7E4EE6; } /* In dark/obsidian bases, brighten the accent text so it stays legible */ [data-bs-theme="dark"][data-accent="green"] { --sidebar-active-text:#5BE584; --sidebar-active-bg:rgba(0,171,85,0.18); } [data-bs-theme="dark"][data-accent="blue"] { --brand-1:#84A9FF; --sidebar-active-text:#84A9FF; --sidebar-active-bg:rgba(32,101,209,0.22); } [data-bs-theme="dark"][data-accent="violet"] { --brand-1:#B985F4; --sidebar-active-text:#B985F4; --sidebar-active-bg:rgba(118,53,220,0.24); } [data-bs-theme="dark"][data-accent="orange"] { --brand-1:#FFB44D; --sidebar-active-text:#FFB44D; --sidebar-active-bg:rgba(255,122,0,0.22); } [data-bs-theme="dark"][data-accent="cyan"] { --brand-1:#61F3F3; --sidebar-active-text:#61F3F3; --sidebar-active-bg:rgba(0,184,217,0.22); } [data-bs-theme="dark"][data-accent="red"] { --brand-1:#FFA48D; --sidebar-active-text:#FFA48D; --sidebar-active-bg:rgba(255,72,66,0.22); } [data-bs-theme="dark"][data-accent="teal"] { --brand-1:#5BE49B; --sidebar-active-text:#5BE49B; --sidebar-active-bg:rgba(0,167,111,0.22); } [data-bs-theme="dark"][data-accent="indigo"] { --brand-1:#8C9EFF; --sidebar-active-text:#8C9EFF; --sidebar-active-bg:rgba(61,90,254,0.22); } [data-bs-theme="dark"][data-accent="purple"] { --brand-1:#A98BFF; --sidebar-active-text:#A98BFF; --sidebar-active-bg:rgba(140,87,255,0.24); } [data-bs-theme="dark"][data-accent="navy"] { --brand-1:#8CB0DC; --sidebar-active-text:#8CB0DC; --sidebar-active-bg:rgba(47,87,133,0.28); --hero-1:#2F5785; --hero-2:#1A3049; } [data-bs-theme="dark"][data-accent="mono"] { --brand-1:#F4F6F8; --brand-2:#C4CDD5; --sidebar-active-text:#FFFFFF; --sidebar-active-bg:rgba(255,255,255,0.12); --hero-1:#454F5B; --hero-2:#212B36; } /* ============================================================ Design layout — a higher-level look applied to the whole UI. default = untouched · glass = frosted glassmorphism · standard = flat/simple ============================================================ */ /* ---- GLASSMORPHISM: frost every surface ---- */ [data-layout="glass"] .card, [data-layout="glass"] .chart-card, [data-layout="glass"] .role-card, [data-layout="glass"] .modal-content, [data-layout="glass"] .cselect-menu, [data-layout="glass"] .dropdown-menu, [data-layout="glass"] .theme-menu { background: color-mix(in srgb, var(--card-bg) 62%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid color-mix(in srgb, var(--text-muted) 24%, transparent); box-shadow: 0 8px 32px -12px rgba(31,38,53,0.28); } [data-layout="glass"] .sidebar { background: color-mix(in srgb, var(--sidebar-bg) 60%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } [data-layout="glass"] .topbar { background: color-mix(in srgb, var(--topbar-bg) 55%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } [data-layout="glass"] .kpi-card, [data-layout="glass"] .total-tile { background: color-mix(in srgb, var(--c1) 16%, transparent) !important; color: var(--ct) !important; border: 1px solid color-mix(in srgb, var(--c1) 34%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; } [data-layout="glass"] .kpi-card .kpi-icon { background: color-mix(in srgb, var(--c1) 24%, transparent) !important; color: var(--ct) !important; } [data-layout="glass"] .kpi-card::after, [data-layout="glass"] .total-tile::after { background: color-mix(in srgb, var(--c1) 16%, transparent); } [data-layout="glass"] a.kpi-card, [data-layout="glass"] a.kpi-card:hover, [data-layout="glass"] .total-tile, [data-layout="glass"] .total-tile:hover, [data-layout="glass"] .kpi-go { color: var(--ct) !important; } /* ============================================================ Premium motion — subtle entrance + reveal. Utility classes you can add anywhere: .anim-fade-up / .anim-fade / .anim-pop (+ .anim-delay-N), and .reveal (scroll-reveal, toggled by the observer in the layout). All disabled under prefers-reduced-motion. ============================================================ */ @keyframes appFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes appFade { from { opacity: 0; } to { opacity: 1; } } @keyframes appPop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .anim-fade-up { animation: appFadeUp .5s cubic-bezier(.22,1,.36,1) both; } .anim-fade { animation: appFade .5s ease both; } .anim-pop { animation: appPop .42s cubic-bezier(.22,1,.36,1) both; } .anim-delay-1 { animation-delay: .06s; } .anim-delay-2 { animation-delay: .12s; } .anim-delay-3 { animation-delay: .18s; } .anim-delay-4 { animation-delay: .24s; } .anim-delay-5 { animation-delay: .30s; } /* Gentle page-load entrance for the main feature surfaces. */ .card, .kpi-card, .total-tile, .role-card, .chart-card, .dash-hero { animation: appFadeUp .45s cubic-bezier(.22,1,.36,1) both; } /* Scroll-reveal: add class="reveal"; the layout's observer adds .is-in. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); } .reveal.is-in { opacity: 1; transform: none; } /* Premium press feedback on buttons and clickable tiles. */ .btn:active, a.kpi-card:active, .total-tile:active, .mini-stat:active { transform: translateY(0) scale(.985); } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ---- STANDARD: flat, simple, minimal colour, near-black text ---- */ [data-layout="standard"] { --shadow-sm: none; --shadow-md: 0 0 0 1px var(--card-border); --shadow-lg: 0 1px 3px rgba(0,0,0,0.10); } [data-bs-theme="light"][data-layout="standard"] { --text-primary: #111418; } [data-layout="standard"] .card, [data-layout="standard"] .chart-card, [data-layout="standard"] .role-card { box-shadow: none; border: 1px solid var(--card-border); } /* hero → clean panel, dark text, simple controls */ [data-layout="standard"] .dash-hero { background: var(--card-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--card-border); box-shadow: none; } [data-layout="standard"] .dash-hero::after { display: none; } [data-layout="standard"] .dash-hero .hero-sub { color: var(--text-secondary); opacity: 1; } [data-layout="standard"] .hero-top-row { border-bottom-color: var(--card-border); } [data-layout="standard"] .hero-bottom-row .hero-rate, [data-layout="standard"] .range-selector { background: var(--card-bg-soft); border-color: var(--card-border); } [data-layout="standard"] .range-selector a { color: var(--text-secondary); } [data-layout="standard"] .range-selector a.active { background: var(--brand-1); color: #fff; } [data-layout="standard"] .hero-rate { background: var(--card-bg-soft); border-color: var(--card-border); color: var(--text-primary); backdrop-filter: none; } [data-layout="standard"] .hero-rate .rate-label { color: var(--text-muted); opacity: 1; } [data-layout="standard"] .hero-rate iconify-icon { color: var(--text-muted); } /* feature cards → clean white card, dark text, a soft COLOURED icon disc (matches the teacher-portal stat cards). */ [data-layout="standard"] .kpi-card, [data-layout="standard"] .total-tile { background: var(--card-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--card-border); box-shadow: 0 1px 3px rgba(145,158,171,0.18); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-layout="standard"] .kpi-card::after, [data-layout="standard"] .total-tile::after { display: none; } [data-layout="standard"] .kpi-card .kpi-icon { background: color-mix(in srgb, var(--c1) 14%, transparent) !important; color: var(--ct) !important; border-radius: 12px; } [data-layout="standard"] .kpi-card .kpi-label, [data-layout="standard"] .total-tile .tile-label { opacity: 1; color: var(--text-muted) !important; } [data-layout="standard"] .kpi-card .kpi-foot { opacity: 1; color: var(--text-muted) !important; } [data-layout="standard"] a.kpi-card, [data-layout="standard"] a.kpi-card:hover, [data-layout="standard"] .total-tile, [data-layout="standard"] .total-tile:hover, [data-layout="standard"] .kpi-go, [data-layout="standard"] .tile-icon { color: var(--text-primary) !important; } /* role banners → simple neutral headers */ [data-layout="standard"] .role-banner { background: var(--card-bg-soft) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--card-border); } [data-layout="standard"] .role-banner::after { display: none; } [data-layout="standard"] .role-banner .role-total { background: var(--card-bg); border-color: var(--card-border); color: var(--text-primary); } /* ============================================================ MATERIAL — a faithful Materio (Vuetify) skin. Self-contained: it sets its own purple accent + Inter font regardless of the accent pick, mirroring themeselection's Materio template. ============================================================ */ [data-layout="material"] { /* Materio semantic palette. The PRIMARY (--brand-1/2, --hero-1/2) is left to the accent picker so it can be recoloured — it defaults to Materio purple via the default accent. */ --c-success: #56CA00; --c-warning: #FFB400; --c-danger: #FF4C51; --c-info: #16B1FF; --c-pink: #FF4C51; /* Surfaces (light Materio) */ --page-bg: #f4f5fa; --page-bg-deep: #f4f5fa; --card-bg: #ffffff; --card-bg-soft: #F6F7FB; --card-border: rgba(46,38,61,0.12); --card-border-soft: rgba(46,38,61,0.08); --hover-bg: rgba(46,38,61,0.06); --text-primary: rgba(46,38,61,0.90); --text-secondary: rgba(46,38,61,0.68); --text-muted: rgba(46,38,61,0.42); --sidebar-bg: #ffffff; --sidebar-border: rgba(46,38,61,0.08); --sidebar-text: rgba(46,38,61,0.78); --sidebar-muted: rgba(46,38,61,0.42); --sidebar-hover-bg: rgba(46,38,61,0.06); --topbar-bg: rgba(244,245,250,0.86); --topbar-border: transparent; --input-bg: #ffffff; --input-border: rgba(46,38,61,0.22); --input-focus: #8C57FF; --input-focus-glow: rgba(140,87,255,0.16); /* Materio radii + soft purple-grey shadows */ --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --shadow-sm: 0 2px 4px 0 rgba(47,43,61,0.10); --shadow-md: 0 4px 18px 0 rgba(47,43,61,0.10), 0 2px 6px 0 rgba(47,43,61,0.06); --shadow-lg: 0 8px 26px -6px rgba(47,43,61,0.16); } [data-bs-theme="dark"][data-layout="material"] { --page-bg: #28243D; --page-bg-deep: #28243D; --card-bg: #312d4b; --card-bg-soft: rgba(231,227,252,0.06); --card-border: rgba(231,227,252,0.12); --card-border-soft: rgba(231,227,252,0.08); --hover-bg: rgba(231,227,252,0.06); --text-primary: rgba(231,227,252,0.90); --text-secondary: rgba(231,227,252,0.68); --text-muted: rgba(231,227,252,0.42); --sidebar-bg: #312d4b; --sidebar-border: rgba(231,227,252,0.08); --sidebar-text: rgba(231,227,252,0.78); --sidebar-muted: rgba(231,227,252,0.42); --sidebar-hover-bg: rgba(231,227,252,0.06); --topbar-bg: rgba(40,36,61,0.86); --input-bg: rgba(231,227,252,0.06); --input-border: rgba(231,227,252,0.22); --shadow-sm: 0 2px 4px 0 rgba(19,17,32,0.20); --shadow-md: 0 4px 18px 0 rgba(19,17,32,0.24), 0 2px 6px 0 rgba(19,17,32,0.18); --shadow-lg: 0 8px 26px -6px rgba(19,17,32,0.30); } /* Inter everywhere in Material mode */ [data-layout="material"] body, [data-layout="material"] .sidebar, [data-layout="material"] .topbar, [data-layout="material"] .btn, [data-layout="material"] .form-control, [data-layout="material"] .form-select { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-layout="material"] body { background: var(--page-bg); } /* Sidebar: Materio's solid active pill with a soft glow (follows the accent) */ [data-layout="material"] .sidebar-link.active { background: linear-gradient(72.47deg, var(--brand-1) 22.16%, color-mix(in srgb, var(--brand-1) 78%, #fff) 76.47%) !important; color: #fff !important; box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--brand-1) 48%, transparent); } [data-layout="material"] .sidebar-link.active iconify-icon { color: #fff !important; } [data-layout="material"] .sidebar-link { border-radius: 6px; } /* Buttons: solid accent, soft shadow, no shout-caps */ [data-layout="material"] .btn { border-radius: 6px; text-transform: none; font-weight: 500; } [data-layout="material"] .btn-primary { box-shadow: 0 2px 6px 0 color-mix(in srgb, var(--brand-1) 40%, transparent); } /* Feature cards → white card + tonal COLOURED icon tile (Materio mini-stats) */ [data-layout="material"] .dash-hero { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--hero-1) 42%, transparent); } [data-layout="material"] .kpi-card, [data-layout="material"] .total-tile { background: var(--card-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--card-border-soft); box-shadow: var(--shadow-sm); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-layout="material"] .kpi-card::after, [data-layout="material"] .total-tile::after { display: none; } [data-layout="material"] .kpi-card .kpi-icon { background: color-mix(in srgb, var(--c1) 16%, transparent) !important; color: var(--ct) !important; border-radius: 8px; } [data-layout="material"] .kpi-card .kpi-label, [data-layout="material"] .kpi-card .kpi-foot, [data-layout="material"] .total-tile .tile-label { opacity: 1; color: var(--text-muted) !important; } [data-layout="material"] a.kpi-card, [data-layout="material"] a.kpi-card:hover, [data-layout="material"] .total-tile, [data-layout="material"] .total-tile:hover, [data-layout="material"] .kpi-go, [data-layout="material"] .tile-icon { color: var(--text-primary) !important; } [data-layout="material"] .total-tile .tile-icon { color: var(--brand-1) !important; } /* Cards a touch tighter-cornered like Materio */ [data-layout="material"] .card, [data-layout="material"] .chart-card, [data-layout="material"] .role-card { border: 1px solid var(--card-border-soft); } /* Role-section banners retinted to Materio's palette. Students follows the accent. */ [data-layout="material"] .role-banner-students { background: linear-gradient(120deg,var(--hero-1) 0%,var(--hero-2) 100%); } [data-layout="material"] .role-banner-teachers { background: linear-gradient(120deg,#FFB400 0%,#E6A200 100%); } [data-layout="material"] .role-banner-staff { background: linear-gradient(120deg,#56CA00 0%,#4DB600 100%); } [data-layout="material"] .role-banner-devices { background: linear-gradient(120deg,#16B1FF 0%,#149FE6 100%); } /* mini-stat tiles pick up Materio semantic hues via the vars already */ /* Obsidian — a deeper, near-black dark base (rides on data-bs-theme="dark") */ [data-bs-theme="dark"][data-mode="obsidian"] { --page-bg: #0A0C10; --page-bg-deep: #05070A; --card-bg: #12161C; --card-bg-soft: rgba(145,158,171,0.08); --card-border: rgba(145,158,171,0.12); --sidebar-bg: #0C0F14; --sidebar-border: rgba(145,158,171,0.10); --topbar-bg: rgba(12,15,20,0.85); --topbar-border: rgba(145,158,171,0.10); --input-bg: rgba(145,158,171,0.06); } [data-mode="obsidian"] body { background: var(--page-bg) !important; } /* Gradient — light base with a softly tinted sidebar + topbar */ [data-mode="gradient"] .sidebar { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%), linear-gradient(200deg, color-mix(in srgb, var(--brand-1) 12%, var(--sidebar-bg)) 0%, var(--sidebar-bg) 55%); } [data-mode="gradient"] body { background: radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--brand-1) 14%, transparent), transparent 60%), radial-gradient(1000px 500px at 110% 0%, color-mix(in srgb, var(--brand-2) 12%, transparent), transparent 55%), var(--page-bg); background-attachment: fixed; } /* ===== Base ===== */ * { box-sizing: border-box; } html, body { background: var(--page-bg); color: var(--text-primary); transition: background-color 0.25s ease, color 0.25s ease; } body { font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 0; font-size: 14px; line-height: 1.6; background: radial-gradient(1200px 600px at -10% -20%, rgba(0,171,85,0.06), transparent 60%), radial-gradient(1000px 500px at 110% 0%, rgba(0,123,85,0.05), transparent 55%), var(--page-bg); background-attachment: fixed; } [data-bs-theme="dark"] body { background: radial-gradient(1200px 600px at -10% -20%, rgba(0,171,85,0.10), transparent 60%), radial-gradient(1000px 500px at 110% 0%, rgba(134,232,171,0.06), transparent 55%), var(--page-bg); background-attachment: fixed; } .bangla { font-family: 'Hind Siliguri', 'Inter', sans-serif; } a { color: var(--brand-1); } a:hover { color: var(--brand-2); } /* ===== Sidebar ===== */ .sidebar { width: 248px; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); flex-shrink: 0; overflow-y: auto; position: sticky; top: 0; height: 100vh; transition: background 0.25s ease, border-color 0.25s ease; } /* Scrollbar keeps a constant width so hovering never shifts the content. The track/thumb are transparent until you hover the sidebar. */ .sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; } .sidebar:hover { scrollbar-color: var(--card-border) transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; } .sidebar:hover::-webkit-scrollbar-thumb { background: var(--card-border); } .sidebar .brand, .sidebar-brand { padding: 18px 16px; border-bottom: 1px solid var(--sidebar-border); display: flex; align-items: center; gap: 10px; } .sidebar .brand iconify-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-grad); color: #fff !important; font-size: 20px !important; box-shadow: 0 4px 10px -2px rgba(0,171,85,0.4); } .sidebar .brand .fw-bold { color: var(--text-primary); font-size: 14px; } .sidebar .brand small, .sidebar .brand .text-secondary { color: var(--text-muted) !important; font-size: 11px; } .sidebar-heading { padding: 20px 20px 8px; font-size: 11px; letter-spacing: 0.5px; color: var(--sidebar-muted); text-transform: uppercase; font-weight: 700; } .sidebar-link { color: var(--sidebar-text) !important; border-radius: 8px; padding: 0 12px 0 16px !important; min-height: 44px; display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; text-transform: capitalize; transition: background 0.15s, color 0.15s; text-decoration: none; margin: 4px 12px; position: relative; } .sidebar-link iconify-icon { font-size: 24px; flex-shrink: 0; transition: color 0.15s; } .sidebar-link:hover { background: var(--sidebar-hover-bg); color: var(--text-primary) !important; } .sidebar-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text) !important; font-weight: 600; } .sidebar-link.active iconify-icon { color: var(--sidebar-active-text); } .sidebar-link.sub-link { font-size: 13px; padding: 7px 12px !important; margin: 1px 8px 1px 18px; } /* ===== Topbar ===== */ .topbar { background: var(--topbar-bg); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--topbar-border); padding: 12px 24px; z-index: 10; display: flex; align-items: center; justify-content: space-between; transition: background 0.25s ease; position: sticky; top: 0; } .topbar-title, .topbar h5 { font-size: 17px; font-weight: 600; color: var(--text-primary); background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .topbar-right { display: flex; align-items: center; gap: 10px; } .connected-badge, .topbar .badge.bg-success-subtle { display: inline-flex !important; align-items: center; gap: 6px; background: rgba(54,179,126,0.12) !important; color: var(--c-success) !important; font-size: 12px !important; font-weight: 500; padding: 5px 11px !important; border-radius: 9999px !important; border: 1px solid rgba(54,179,126,0.25); } .connected-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); display: inline-block; box-shadow: 0 0 8px rgba(54,179,126,0.6); animation: pulse-dot 1.6s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .avatar { width: 34px; height: 34px; font-size: 13px; border-radius: 50%; background: var(--brand-grad); color: #fff !important; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px -2px rgba(0,171,85,0.5); } /* Theme switch button */ .theme-toggle { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all 0.18s ease; } .theme-toggle:hover { color: var(--brand-1); border-color: var(--brand-1); transform: translateY(-1px); box-shadow: 0 4px 10px -4px var(--input-focus-glow); } /* ===== Theme picker menu ===== */ /* Bootstrap-free toggle so the picker also works on the portal layouts (which don't load Bootstrap's JS). */ .theme-picker { position: relative; } .theme-menu.show-menu { display: block; } .theme-menu { position: absolute; right: 0; left: auto; top: calc(100% + 8px); display: none; min-width: 244px; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); box-shadow: var(--shadow-lg); } .theme-menu-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; } .theme-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .theme-mode { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card-bg-soft); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .theme-mode:hover { border-color: var(--brand-1); color: var(--text-primary); } .theme-mode.active { border-color: var(--brand-1); color: var(--brand-1); background: var(--sidebar-active-bg); } .tm-swatch { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(145,158,171,0.30); } .tm-light { background: #FFFFFF; } .tm-dark { background: #212B36; } .tm-gradient { background: linear-gradient(135deg, #00AB55 0%, #7635DC 100%); } .tm-obsidian { background: #0A0C10; } .theme-card-grid { grid-template-columns: 1fr 1fr 1fr; } .theme-card { padding: 8px 6px; font-size: 12px; justify-content: center; } .tc-gradient { background: linear-gradient(135deg, #00AB55 0%, #5BE584 100%); } .tc-solid { background: #00AB55; } .tc-soft { background: #D8FBDE; } .tc-outline { background: transparent; border: 2px solid #00AB55; } .tc-glass { background: rgba(0,171,85,0.28); border: 1px solid rgba(0,171,85,0.5); } /* Black & white accent swatch: a half-black / half-white chip */ .theme-accent-mono { background: linear-gradient(135deg, #212B36 0 50%, #FFFFFF 50% 100%) !important; } .theme-layout-grid { grid-template-columns: 1fr 1fr; } .theme-layout { padding: 8px 6px; font-size: 12px; justify-content: center; } .tl-default { background: linear-gradient(135deg, #00AB55 0%, #5BE584 100%); } .tl-glass { background: rgba(0,184,217,0.28); border: 1px solid rgba(0,184,217,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .tl-standard { background: #FFFFFF; border: 1px solid #C4CDD5; } .tl-material { background: linear-gradient(135deg, #8C57FF 0%, #7E4EE6 100%); } .theme-accent-row { display: flex; flex-wrap: wrap; gap: 10px; } .theme-accent { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--card-border); cursor: pointer; padding: 0; transition: transform 0.12s ease, box-shadow 0.12s ease; } .theme-accent:hover { transform: scale(1.12); } .theme-accent.active { border-color: var(--card-bg); box-shadow: 0 0 0 2px var(--sw); } /* ===== Main area ===== */ .main-area { background: transparent; min-width: 0; } main.p-4 { padding: 24px !important; } /* ===== Section bar (replaces gradient banners but keeps the class names) ===== */ .section-bar { background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--brand-1); border-radius: var(--radius); padding: 12px 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-primary); display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-sm); transition: background 0.25s, border-color 0.25s; } .section-bar i { font-size: 16px; color: var(--brand-1); } .gradient-students { border-left-color: #00AB55; } .gradient-students i { color: #00AB55; } .gradient-teachers { border-left-color: #FFAB00; } .gradient-teachers i { color: #FFAB00; } .gradient-staff { border-left-color: #36B37E; } .gradient-staff i { color: #36B37E; } .gradient-totals { border-left-color: #007B55; } .gradient-totals i { color: #007B55; } .gradient-sms { border-left-color: #007B55; } .gradient-sms i { color: #007B55; } .gradient-lang { border-left-color: #00B8D9; } .gradient-lang i { color: #00B8D9; } .gradient-template { border-left-color: #FFAB00; } .gradient-template i { color: #FFAB00; } [data-bs-theme="dark"] .gradient-students i { color: #5BE584; } [data-bs-theme="dark"] .gradient-teachers i { color: #FFD666; } [data-bs-theme="dark"] .gradient-staff i { color: #86E8AB; } [data-bs-theme="dark"] .gradient-totals i { color: #86E8AB; } [data-bs-theme="dark"] .gradient-sms i { color: #5BE584; } [data-bs-theme="dark"] .gradient-lang i { color: #61F3F3; } [data-bs-theme="dark"] .gradient-template i { color: #FFD666; } /* ===== Stat cards ===== */ .stat-card { background: var(--card-bg); border: 1px solid var(--card-border) !important; border-radius: var(--radius) !important; padding: 4px; box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-grad); opacity: 0; transition: opacity 0.25s; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-1) !important; } .stat-card:hover::after { opacity: 0.9; } .stat-card .stat-circle { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: transform 0.18s ease; } .stat-card:hover .stat-circle { transform: scale(1.05); } .stat-circle.bg-success-subtle { background: rgba(54,179,126,0.12) !important; color: var(--c-success) !important; } .stat-circle.bg-warning-subtle { background: rgba(255,171,0,0.12) !important; color: var(--c-warning) !important; } .stat-circle.bg-danger-subtle { background: rgba(255,86,48,0.12) !important; color: var(--c-danger) !important; } .stat-circle.bg-info-subtle { background: rgba(0,184,217,0.12) !important; color: var(--c-info) !important; } .stat-circle.bg-secondary-subtle { background: rgba(107,114,128,0.12) !important; color: var(--text-secondary) !important; } .stat-circle.bg-primary-subtle { background: rgba(0,171,85,0.12) !important; color: var(--brand-1) !important; } [data-bs-theme="dark"] .stat-circle.bg-success-subtle { background: rgba(52,211,153,0.16) !important; } [data-bs-theme="dark"] .stat-circle.bg-warning-subtle { background: rgba(251,191,36,0.16) !important; } [data-bs-theme="dark"] .stat-circle.bg-danger-subtle { background: rgba(248,113,113,0.16) !important; } [data-bs-theme="dark"] .stat-circle.bg-info-subtle { background: rgba(34,211,238,0.16) !important; } [data-bs-theme="dark"] .stat-circle.bg-primary-subtle { background: rgba(91,229,132,0.18) !important; } .stat-card .text-muted { color: var(--text-muted) !important; } .stat-card .fs-3 { color: var(--text-primary); font-weight: 700; } .stat-card .card-footer { background: transparent; border-top: 1px solid var(--card-border-soft); padding: 10px 16px; color: var(--brand-1); font-weight: 500; transition: background 0.15s; } .stat-card .card-footer:hover { background: var(--hover-bg); color: var(--brand-2); } /* ===== Cards general ===== */ .card { border: 0 !important; border-radius: var(--radius-lg) !important; background: var(--card-bg); color: var(--text-primary); box-shadow: var(--shadow-md); transition: background 0.25s, box-shadow 0.18s; } .card.shadow-sm { box-shadow: var(--shadow-md) !important; } .card.shadow { box-shadow: var(--shadow-md) !important; } .card-header, .card-footer { background: var(--card-bg-soft); border-color: var(--card-border-soft); color: var(--text-primary); } /* ===== Tables ===== */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); color: var(--text-primary); font-size: 14px; margin-bottom: 0; } .table thead th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); background: var(--card-bg-soft) !important; padding: 13px 16px; border-bottom: 1px solid var(--card-border) !important; } .table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--card-border-soft) !important; color: var(--text-primary); vertical-align: middle; background: var(--card-bg); } .table tbody tr { transition: background 0.12s; } .table tbody tr:hover td { background: var(--hover-bg); } .table tbody tr:last-child td { border-bottom: none !important; } .table-light, .table-light th { background: var(--card-bg-soft) !important; color: var(--text-secondary) !important; } .table-responsive { border-radius: var(--radius); } /* ===== Buttons ===== */ .btn { font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); padding: 8px 16px; transition: all 0.15s ease; } .btn-primary { background: var(--brand-1); border: none; color: #fff; box-shadow: 0 8px 16px 0 rgba(0,171,85,0.24); } .btn-primary:hover, .btn-primary:focus { background: var(--brand-2); color: #fff; box-shadow: 0 8px 16px 0 rgba(0,171,85,0.24); } .btn-success { background: var(--c-success); border-color: var(--c-success); color:#fff; } .btn-success:hover { background: #1B806A; border-color:#1B806A; } .btn-danger { background: var(--c-danger); border-color: var(--c-danger); color:#fff; } .btn-danger:hover { background: #B71D18; border-color:#B71D18; } .btn-warning{ background: var(--c-warning); border-color: var(--c-warning); color:#fff; } .btn-warning:hover { background:#B76E00; border-color:#B76E00; color:#fff; } .btn-info { background: var(--c-info); border-color: var(--c-info); color:#fff; } .btn-outline-primary { color: var(--brand-1); border-color: var(--brand-1); background: transparent; } .btn-outline-primary:hover { background: var(--brand-1); color: #fff; border-color: var(--brand-1); } .btn-outline-secondary { border-color: var(--card-border); color: var(--text-secondary); background: var(--card-bg); } .btn-outline-secondary:hover { background: var(--hover-bg); color: var(--text-primary); border-color: var(--text-secondary); } .btn-outline-danger { color: var(--c-danger); border-color: var(--c-danger); } .btn-outline-danger:hover { background: var(--c-danger); color:#fff; } .btn-link { color: var(--brand-1); text-decoration: none; } .btn-link:hover { color: var(--brand-2); text-decoration: underline; } .btn-sm { padding: 6px 12px; font-size: 12.5px; } /* ===== Phosphor icons: align with adjacent text baseline ===== */ .ph, .ph-fill, .ph-bold, .ph-duotone { vertical-align: -0.15em; line-height: 1; } /* Iconify (Solar) icons: size via font-size, align with text */ iconify-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; } /* ===== Forms ===== */ .form-control, .form-select { border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 14px; color: var(--text-primary); /* background-color, NOT the `background` shorthand: the shorthand reset Bootstrap's dropdown-caret background-image to none, so every