/* ============================================================= site.css — HURE ERP | Main stylesheet Sections (Ctrl+F to jump): 1. CSS Variables & Tokens 2. Dark Theme Overrides 3. Global Reset & Base Elements 4. Topbar 5. Search Box 6. Icon Buttons 7. Dropdown System 8. Notification Items 9. User Profile (topbar avatar) 10. Sidebar 11. Main Content Area 12. Dashboard KPI Cards 13. Dashboard Chart Cards 14. Stat Cards (legacy sys-card) 15. Employee Profile Card 16. Page Header Banner 17. Activity & Event Lists 18. Forms & Switches 19. Tables 20. Utility / Helper Classes 21. Scrollbar 22. Dashboard Tab Bar 23. Dashboard Section Panels 24. Dashboard Stat Cards (panel cards) 25. KPI Section Headers 26. Responsive Breakpoints ============================================================= */ /* ───────────────────────────────────────────────────────────── 1. CSS Variables & Tokens ───────────────────────────────────────────────────────────── */ :root { /* Brand */ --primary: #4F46E5; --primary-dark: #4338CA; --secondary: #10B981; --danger: #EF4444; --warning: #F59E0B; --info: #3B82F6; --purple: #8B5CF6; /* Backgrounds */ --bg-page: #F9FAFB; --bg-surface: #FFFFFF; --bg-subtle: #F3F4F6; /* Text */ --text-base: #111827; --text-muted: #6B7280; --text-hint: #9CA3AF; /* Borders & Shadows */ --border: #E5E7EB; --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.10); /* Layout */ --sidebar-w: 280px; --sidebar-w-sm: 80px; --topbar-h: 70px; --speed: 0.3s; /* Radius */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; /* Motion */ --ease: cubic-bezier(.22,1,.36,1); /* Chart / icon badge gradients */ --grad-blue: linear-gradient(135deg, #4f46e5, #3b82f6); --grad-green: linear-gradient(135deg, #10b981, #22c55e); --grad-amber: linear-gradient(135deg, #f59e0b, #f97316); --grad-red: linear-gradient(135deg, #ef4444, #f43f5e); --grad-purple: linear-gradient(135deg, #8b5cf6, #a855f7); --grad-dark: linear-gradient(135deg, #111827, #374151); } /* ───────────────────────────────────────────────────────────── 2. Dark Theme Overrides Applied when is present. ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg-page: #111827; --bg-surface: #1F2937; --bg-subtle: #374151; --text-base: #F9FAFB; --text-muted: #D1D5DB; --text-hint: #9CA3AF; --border: #374151; } [data-theme="dark"] .card, [data-theme="dark"] .card-body, [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: var(--bg-surface) !important; color: var(--text-base) !important; border-color: var(--border) !important; } [data-theme="dark"] .bg-light { background-color: var(--bg-subtle) !important; } [data-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; } [data-theme="dark"] .text-muted { color: var(--text-hint) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg-subtle) !important; color: var(--text-base) !important; border-color: var(--border) !important; } [data-theme="dark"] .input-group-text { background-color: var(--bg-surface) !important; color: var(--text-muted) !important; border-color: var(--border) !important; } [data-theme="dark"] .btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--primary) !important; color: #fff !important; } [data-theme="dark"] .btn-warning { background-color: var(--warning) !important; color: #000 !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--bg-subtle) !important; color: var(--primary) !important; border-color: var(--border) !important; } [data-theme="dark"] .border-light { border-color: var(--border) !important; } [data-theme="dark"] .bg-light.border-top { background-color: var(--bg-subtle) !important; } [data-theme="dark"] .collapse .card { background-color: var(--bg-subtle) !important; } [data-theme="dark"] i { color: var(--text-muted) !important; } [data-theme="dark"] ::placeholder { color: var(--text-hint) !important; } [data-theme="dark"] input[type="checkbox"] { accent-color: var(--primary); } [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-md) !important; } /* ───────────────────────────────────────────────────────────── 3. Global Reset & Base Elements ───────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--bg-page); color: var(--text-base); line-height: 1.6; transition: background-color var(--speed), color var(--speed); } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; } img { max-width: 100%; height: auto; } /* ───────────────────────────────────────────────────────────── 4. Topbar ───────────────────────────────────────────────────────────── */ .topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); background-color: var(--bg-surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 1000; box-shadow: var(--shadow-sm); transition: all var(--speed); } .topbar-left, .topbar-right { display: flex; align-items: center; } .topbar-left { gap: 24px; } .topbar-right { gap: 16px; } .sidebar-toggle { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-base); font-size: 20px; transition: background-color .2s; } .sidebar-toggle:hover { background-color: var(--bg-subtle); } .breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; } .breadcrumb i { color: var(--primary); } .breadcrumb-separator { color: var(--text-hint); } .breadcrumb-item.active { color: var(--text-base); font-weight: 500; } /* ───────────────────────────────────────────────────────────── 5. Search Box ───────────────────────────────────────────────────────────── */ .search-box { position: relative; display: flex; align-items: center; } .search-box i { position: absolute; left: 12px; color: var(--text-hint); font-size: 14px; } .search-box input { width: 300px; height: 40px; padding: 0 16px 0 40px; border: 1px solid var(--border); border-radius: 10px; background-color: var(--bg-page); color: var(--text-base); font-size: 14px; transition: border-color .2s, box-shadow .2s; } .search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.10); } /* ───────────────────────────────────────────────────────────── 6. Icon Buttons ───────────────────────────────────────────────────────────── */ .icon-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--text-base); font-size: 18px; transition: background-color .2s; } .icon-btn:hover { background-color: var(--bg-subtle); } .icon-btn .badge { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; background-color: var(--danger); color: #fff; border-radius: 50%; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; } /* ───────────────────────────────────────────────────────────── 7. Dropdown System ───────────────────────────────────────────────────────────── */ .dropdown { position: relative; } .notification-dropdown, .user-dropdown { position: relative; z-index: 4000; } .dropdown-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 320px; background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 5000; overflow: hidden; pointer-events: none; } .dropdown-menu.active, .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .user-dropdown .dropdown-menu { width: 240px; } .dropdown-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .dropdown-header h3 { font-size: 16px; font-weight: 600; color: var(--text-base); } .dropdown-header .badge { padding: 4px 10px; background-color: var(--primary); color: #fff; border-radius: 20px; font-size: 12px; font-weight: 600; } .dropdown-body { max-height: 400px; overflow-y: auto; } .dropdown-footer { padding: 12px 20px; border-top: 1px solid var(--border); text-align: center; } .dropdown-footer a { color: var(--primary); font-size: 14px; font-weight: 500; transition: color .2s; } .dropdown-footer a:hover { color: var(--primary-dark); } .dropdown-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: var(--text-base); transition: background-color .2s; } .dropdown-item:hover { background-color: var(--bg-subtle); } .dropdown-item i { width: 20px; font-size: 16px; color: var(--text-muted); } .dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--danger); } .dropdown-divider { height: 1px; background-color: var(--border); margin: 8px 0; } /* ───────────────────────────────────────────────────────────── 8. Notification Items ───────────────────────────────────────────────────────────── */ .notification-item { display: flex; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background-color .2s; } .notification-item:last-child { border-bottom: none; } .notification-item:hover { background-color: var(--bg-subtle); } .notification-item.unread { background-color: rgba(79,70,229,.05); } .notification-icon { width: 40px; height: 40px; border-radius: 10px; background-color: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .notification-title { font-size: 14px; font-weight: 600; color: var(--text-base); margin-bottom: 4px; } .notification-text { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .notification-time { font-size: 12px; color: var(--text-hint); } /* ───────────────────────────────────────────────────────────── 9. User Profile (topbar) ───────────────────────────────────────────────────────────── */ .user-profile { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 12px; cursor: pointer; transition: background-color .2s; } .user-profile:hover { background-color: var(--bg-subtle); } .user-profile img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } .user-info { display: flex; flex-direction: column; align-items: flex-start; } .user-name { font-size: 14px; font-weight: 600; color: var(--text-base); line-height: 1.2; } .user-role { font-size: 12px; color: var(--text-muted); line-height: 1.2; } .user-dropdown .dropdown-header { display: flex; align-items: center; gap: 12px; } .user-dropdown .dropdown-header img { width: 50px; height: 50px; border-radius: 10px; } .user-email { font-size: 13px; color: var(--text-muted); } /* ───────────────────────────────────────────────────────────── 10. Sidebar ───────────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--sidebar-w); background-color: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-x: hidden; transition: width var(--speed); z-index: 999; } .sidebar.collapsed { width: var(--sidebar-w-sm); } .sidebar-header { padding: 5px 0 5px 24px; border-bottom: 1px solid var(--border); } .logo { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; color: var(--primary); } .logo i { font-size: 32px; } .sidebar.collapsed .logo-text { display: none; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 0; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 3px; } .nav-list { padding: 0 12px; } .nav-item { margin-bottom: 4px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; color: var(--text-muted); font-size: 15px; font-weight: 500; transition: background-color .2s, color .2s; position: relative; } .nav-link:hover { background-color: var(--bg-subtle); color: var(--text-base); } .nav-item.active > .nav-link { background-color: var(--primary); color: #fff; } .nav-link i { width: 24px; font-size: 20px; flex-shrink: 0; } .sidebar.collapsed .nav-text { display: none; } .submenu-arrow { margin-left: auto; font-size: 14px; transition: transform .2s; } .nav-item.active > .nav-link .submenu-arrow { transform: rotate(90deg); } .sidebar.collapsed .submenu-arrow { display: none; } .submenu { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .nav-item.active .submenu { max-height: 300px; } .submenu li { padding-left: 52px; } .submenu a { display: block; padding: 10px 16px; border-radius: 8px; color: var(--text-muted); font-size: 14px; transition: background-color .2s, color .2s; } .submenu a:hover { background-color: var(--bg-subtle); color: var(--text-base); } .sidebar.collapsed .submenu { display: none; } .sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border); } .user-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background-color: var(--bg-subtle); cursor: pointer; transition: background-color .2s; } .user-card:hover { background-color: rgba(0,0,0,.08); } .user-card img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; } .user-details { display: flex; flex-direction: column; } .user-status { font-size: 12px; color: var(--secondary); line-height: 1.2; } .sidebar.collapsed .user-details { display: none; } /* ───────────────────────────────────────────────────────────── 11. Main Content Area ───────────────────────────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-w); margin-top: var(--topbar-h); padding-left: 32px; padding-bottom: 32px; padding-right: 32px; min-height: calc(100vh - var(--topbar-h)); transition: margin-left var(--speed); } .sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-w-sm); } .content-wrapper { max-width: 1400px; } /* ───────────────────────────────────────────────────────────── 12. Dashboard KPI Cards ───────────────────────────────────────────────────────────── */ .dash-page { max-width: 1400px; } .dash-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; } .dash-title { font-size: 26px; font-weight: 700; color: var(--text-base); margin-bottom: 4px; } .dash-subtitle { font-size: 14px; color: var(--text-muted); } .dash-role-pill { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; letter-spacing: .02em; } .dash-role-sadmin { background: rgba(239,68,68,.12); color: #B91C1C; } .dash-role-owner { background: rgba(245,158,11,.12); color: #B45309; } .dash-role-admin { background: rgba(20,184,166,.12); color: #0F766E; } .dash-role-employee { background: rgba(79,70,229,.12); color: #3730A3; } .dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .kpi-card { display: flex; align-items: center; gap: 16px; padding: 20px; background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s; } .kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .kpi-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; flex-shrink: 0; } .kpi-blue .kpi-icon { background: var(--grad-blue); } .kpi-green .kpi-icon { background: var(--grad-green); } .kpi-amber .kpi-icon { background: var(--grad-amber); } .kpi-red .kpi-icon { background: var(--grad-red); } .kpi-purple .kpi-icon { background: var(--grad-purple); } .kpi-body { display: flex; flex-direction: column; } .kpi-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .kpi-value { font-size: 26px; font-weight: 700; color: var(--text-base); line-height: 1; } /* ───────────────────────────────────────────────────────────── 13. Dashboard Chart Cards ───────────────────────────────────────────────────────────── */ .dash-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .dash-chart-row--single { grid-template-columns: 1fr; } .chart-card { background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .chart-card-header { padding: 16px 20px 0; display: flex; align-items: center; justify-content: space-between; } .chart-title { font-size: 15px; font-weight: 600; color: var(--text-base); display: flex; align-items: center; gap: 8px; } .chart-title i { color: var(--primary); font-size: 16px; } .chart-card-body { padding: 16px 20px 20px; position: relative; } .chart-card-body canvas { max-height: 280px; } .chartSetting { width: 100%; height: 400px; } /* ───────────────────────────────────────────────────────────── 14. Stat Cards (legacy sys-card) ───────────────────────────────────────────────────────────── */ .sys-card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background-color: var(--bg-surface); transition: transform .25s, box-shadow .25s; height: 100%; } .sys-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .sys-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; } .bg1 { background: var(--grad-blue); } .bg2 { background: var(--grad-green); } .bg3 { background: var(--grad-amber); } .bg4 { background: var(--grad-red); } .bg5 { background: var(--grad-purple); } .bg6 { background: var(--grad-dark); } .sys-title { font-size: 13px; color: var(--text-muted); } .sys-value { font-size: 16px; font-weight: 700; color: var(--text-base); margin: 0; } .sys-footer { font-size: 12px; color: var(--text-hint); } /* ───────────────────────────────────────────────────────────── 15. Employee Profile Card ───────────────────────────────────────────────────────────── */ .emp-profile-wrap { display: flex; justify-content: center; padding: 20px 0; } .emp-profile-card { width: 100%; max-width: 520px; background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px; text-align: center; box-shadow: var(--shadow-md); } .emp-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--grad-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; margin: 0 auto 16px; } .emp-name { font-size: 20px; font-weight: 700; color: var(--text-base); margin-bottom: 8px; } .emp-badge { display: inline-block; padding: 4px 14px; background: rgba(79,70,229,.10); color: var(--primary); border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 24px; } .emp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; } .emp-detail-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background-color: var(--bg-subtle); border-radius: 10px; } .emp-detail-item i { font-size: 18px; color: var(--primary); flex-shrink: 0; margin-top: 2px; } .emp-detail-label { display: block; font-size: 11px; color: var(--text-hint); margin-bottom: 2px; } .emp-detail-val { display: block; font-size: 14px; font-weight: 500; color: var(--text-base); } /* ───────────────────────────────────────────────────────────── 16. Page Header Banner ───────────────────────────────────────────────────────────── */ .page-header { background: linear-gradient(135deg, #1f2937, #374151); color: #facc15; border-radius: 1rem; padding: 24px 28px; } .page-header h1 i { color: #facc15; } .page-header .btn-outline-light:hover { background-color: #facc15; color: #000; border-color: #facc15; } .page-header2 { margin-bottom: 32px; } .page-header2 h1 { font-size: 32px; font-weight: 700; color: var(--text-base); margin-bottom: 8px; } .page-header2 p { font-size: 16px; color: var(--text-muted); } /* ───────────────────────────────────────────────────────────── 17. Activity & Event Lists ───────────────────────────────────────────────────────────── */ .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px,1fr)); gap: 24px; } .activity-list, .event-list { display: flex; flex-direction: column; gap: 16px; } .activity-item { display: flex; gap: 12px; } .activity-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .activity-content p { font-size: 14px; color: var(--text-base); margin-bottom: 4px; } .activity-time { font-size: 12px; color: var(--text-hint); } .event-item { display: flex; gap: 16px; padding: 16px; border-radius: 12px; background-color: var(--bg-subtle); transition: transform .2s, box-shadow .2s; } .event-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .event-date { width: 60px; height: 60px; border-radius: 12px; background: var(--grad-blue); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .event-date .day { font-size: 24px; font-weight: 700; line-height: 1; } .event-date .month { font-size: 12px; font-weight: 600; text-transform: uppercase; } .event-details h4 { font-size: 15px; font-weight: 600; color: var(--text-base); margin-bottom: 4px; } .event-details p { font-size: 13px; color: var(--text-muted); } /* ───────────────────────────────────────────────────────────── 18. Forms & Switches ───────────────────────────────────────────────────────────── */ .form-switch .form-check-input { width: 2.2em; height: 1.2em; cursor: pointer; background-color: #ccc; transition: background-color .3s ease; } .form-switch .form-check-input:checked { background-color: var(--primary); } #helpSection .card { border-radius: 10px; } #helpSection .alert { border-radius: 10px; font-size: .9rem; } #helpSection { transition: all .4s ease-in-out; } /* ───────────────────────────────────────────────────────────── 19. Tables (dark mode) ───────────────────────────────────────────────────────────── */ [data-theme="dark"] .table { background-color: var(--bg-surface); color: var(--text-base); border-color: var(--border); } [data-theme="dark"] .table th, [data-theme="dark"] .table td { color: var(--text-base); border-color: var(--border); } [data-theme="dark"] .table thead th { background-color: var(--bg-subtle); color: var(--text-muted); border-bottom: 2px solid var(--border); } [data-theme="dark"] .table tbody td { background-color: transparent; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,.06); } [data-theme="dark"] .table-responsive { background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; } /* ───────────────────────────────────────────────────────────── 20. Utility / Helper Classes ───────────────────────────────────────────────────────────── */ .user-card-hover { transition: transform .3s ease, box-shadow .3s ease; } .user-card-hover:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .feature-card { transition: transform .2s ease, box-shadow .2s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); } .icon-box { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .Orgnation-img-container { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: var(--bg-subtle); } .Orgnation-img-container img { height: 100%; width: auto; object-fit: contain; } #MyImg { vertical-align: middle; border-radius: 10%; border: 1px solid var(--border); } .fit-image { width: 100%; height: 100%; object-fit: fill; } .section-tab { color: var(--text-hint); border-radius: 8px; cursor: pointer; transition: background-color .2s, color .2s; } .section-tab:hover { background-color: var(--bg-subtle); color: var(--text-base); } .section-tab.active { background-color: var(--text-base); border-bottom: 3px solid var(--primary); color: #fff; } .view-all { font-size: 14px; color: var(--primary); font-weight: 500; transition: color .2s; } .view-all:hover { color: var(--primary-dark); } .btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-danger:hover { color: #fff !important; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; margin-bottom: 32px; } /* ───────────────────────────────────────────────────────────── 21. Scrollbar ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-page); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-hint); } /* ───────────────────────────────────────────────────────────── 22. Dashboard Tab Bar Pill-style navigation tabs used on Owner / Admin dashboards. ───────────────────────────────────────────────────────────── */ .dash-tabs-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; padding: 6px; background-color: var(--bg-subtle); border-radius: var(--radius-xl); border: 1px solid var(--border); } .dash-tab-btn { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 120px; padding: 12px 16px; border-radius: var(--radius-md); border: none; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .25s var(--ease); justify-content: center; white-space: nowrap; } .dash-tab-btn i { font-size: 18px; flex-shrink: 0; } .dash-tab-btn:hover { background-color: var(--bg-surface); color: var(--text-base); box-shadow: var(--shadow-sm); } .dash-tab-btn.active { transform: translateY(-2px); } /* Per-tab active gradient — each section has its own identity colour */ .dash-tab-btn.active[data-tab="company"] { background: linear-gradient(135deg,#36d1dc,#5b86e5); color: #fff; box-shadow: 0 4px 14px rgba(91,134,229,.35); } .dash-tab-btn.active[data-tab="users"] { background: linear-gradient(135deg,#f7971e,#ffd200); color: #fff; box-shadow: 0 4px 14px rgba(247,151,30,.35); } .dash-tab-btn.active[data-tab="employee"] { background: linear-gradient(135deg,#1d976c,#93f9b9); color: #fff; box-shadow: 0 4px 14px rgba(29,151,108,.35); } .dash-tab-btn.active[data-tab="finance"] { background: linear-gradient(135deg,#283c86,#45a247); color: #fff; box-shadow: 0 4px 14px rgba(40,60,134,.35); } .dash-tab-btn.active[data-tab="settings"] { background: linear-gradient(135deg,#8360c3,#2ebf91); color: #fff; box-shadow: 0 4px 14px rgba(131,96,195,.35); } /* ───────────────────────────────────────────────────────────── 23. Dashboard Section Panels Each tab maps to a collapsible panel below the tab bar. The .active class is toggled by JavaScript. ───────────────────────────────────────────────────────────── */ @keyframes dashPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .section-panel { display: none; } .section-panel.active { display: block; animation: dashPanelIn .28s var(--ease); } /* Coloured header strip at the top of each panel */ .section-panel-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--radius-md) var(--radius-md) 0 0; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: .01em; } .section-panel-header i { font-size: 20px; } /* Per-panel header gradients */ .panel-P1,.panel-company .section-panel-header { background: linear-gradient(135deg,#36d1dc,#5b86e5); } .panel-P2, .panel-users .section-panel-header { background: linear-gradient(135deg,#f7971e,#ffd200); } .panel-P3, .panel-fee, .panel-myclass, .panel-today, .panel-teachers, .panel-employee .section-panel-header { background: linear-gradient(135deg,#1d976c,#93f9b9); } .panel-P4, .panel-progress, .panel-mystudents, .panel-training, .panel-finance .section-panel-header { background: linear-gradient(135deg,#283c86,#45a247); } .panel-P5, .panel-support, .panel-demos, .panel-performance, .panel-settings .section-panel-header { background: linear-gradient(135deg,#8360c3,#2ebf91); } .panel-P6, .panel-salary, .panel-hiring, .panel-hr .section-panel-header { background: linear-gradient(135deg,#a9c859, #c2e58e,#36d1dc ); } .panel-classes, .panel-P7, .panel-admins, .panel-academic .section-panel-header { background: linear-gradient(135deg, #4776E6, #8E54E9); } .panel-fees, .panel-P8, .panel-leave, .panel-people .section-panel-header { background: linear-gradient(135deg, #ff9966, #ff5e62); } .panel-P9, .panel-overview, .panel-general .section-panel-header { background: linear-gradient(135deg, #56ab2f, #a8e063); } /* Panel body */ .section-panel-body { padding: 20px; background-color: var(--bg-surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom: 28px; } /* ───────────────────────────────────────────────────────────── 24. Dashboard Stat Cards (inside panels) Horizontal icon + text cards used in each section panel. ───────────────────────────────────────────────────────────── */ .stat-card-link { text-decoration: none; display: block; height: 100%; } .stat-card-item { display: flex; align-items: center; gap: 14px; background-color: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; height: 100%; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; cursor: pointer; } .stat-card-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); background-color: var(--bg-surface); } .stat-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex-shrink: 0; } .stat-card-text h5 { font-size: 14px; font-weight: 600; color: var(--text-base); margin-bottom: 4px; line-height: 1.2; } .stat-card-text p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.3; } /* Status pills */ .stat-pill { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .pill-positive { background: rgba(16,185,129,.12); color: #065f46; } .pill-neutral { background: rgba(79,70,229,.10); color: #3730a3; } .pill-negative { background: rgba(239,68,68,.10); color: #991b1b; } [data-theme="dark"] .pill-positive { background: rgba(16,185,129,.20); color: #6ee7b7; } [data-theme="dark"] .pill-neutral { background: rgba(79,70,229,.22); color: #a5b4fc; } [data-theme="dark"] .pill-negative { background: rgba(239,68,68,.20); color: #fca5a5; } /* ───────────────────────────────────────────────────────────── 25. KPI Section Headers Dividers that group KPI cards by time period or category. ───────────────────────────────────────────────────────────── */ .kpi-section-header { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--border); } .kpi-section-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; } .kpi-section-header h6 { font-size: 13px; font-weight: 700; color: var(--text-base); margin: 0; text-transform: uppercase; letter-spacing: .06em; } .kpi-section-header span { font-size: 12px; color: var(--text-muted); margin-left: auto; } /* ───────────────────────────────────────────────────────────── 26. Responsive Breakpoints ───────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .search-box input { width: 200px; } .content-grid { grid-template-columns: 1fr; } .dash-chart-row { grid-template-columns: 1fr; } } @media (max-width: 768px) { .topbar { padding: 0 16px; } .breadcrumb, .search-box, .user-info { display: none; } .sidebar { transform: translateX(-100%); } .sidebar.active { transform: translateX(0); } .main-content { margin-left: 0; padding: 16px; } .dashboard-grid, .dash-kpi-grid { grid-template-columns: 1fr 1fr; } .emp-detail-grid { grid-template-columns: 1fr; } /* Tab bar — icon-only on small screens */ .dash-tabs-bar { gap: 4px; padding: 4px; } .dash-tab-btn { min-width: 56px; padding: 10px 8px; font-size: 12px; } .dash-tab-btn .tab-label { display: none; } .dash-tab-btn i { font-size: 20px; } /* Hide the right-side hint text in KPI section headers */ .kpi-section-header span { display: none; } } @media (max-width: 480px) { .dash-kpi-grid { grid-template-columns: 1fr; } .emp-profile-card { padding: 24px 20px; } } /* ============================================================= Employee Profile — Responsive (mobile-first additions) ============================================================= */ /* --- Tablet: 576px–991px --- */ @media (max-width: 991px) { /* Left panel becomes a narrower column, right fills remaining */ .col-md-3 { flex: 0 0 200px !important; max-width: 200px !important; } .col-md-9 { flex: 1 1 0 !important; max-width: none !important; } } /* --- Mobile: ≤576px --- */ @media (max-width: 576px) { /* Stack left + right panels vertically */ .col-md-3, .col-md-9 { flex: 0 0 100% !important; max-width: 100% !important; } /* Tighten outer padding */ .main-content { padding: 12px !important; } .card-body .row.m-1.p-2 { margin: 0 !important; padding: 0 !important; } /* Left profile panel: horizontal layout on mobile */ .col-md-3.p-3 { display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px; text-align: left !important; padding: 12px !important; } .col-md-3 .d-flex.justify-content-center { height: 80px !important; width: 80px; flex-shrink: 0; } .col-md-3 h5, .col-md-3 small, .col-md-3 hr, .col-md-3 a.btn { flex: 1 1 100%; } /* Form rows: 2 cols on mobile where possible */ #employeeInfoForm .row .col-md-6, #employeeInfoForm .row .col-md-8, #employeeInfoForm .row .col-md-4 { flex: 0 0 50% !important; max-width: 50% !important; } /* Professional summary always full width */ #employeeInfoForm .col-md-12 { flex: 0 0 100% !important; max-width: 100% !important; } /* Tabs: wrap and scroll if needed */ #employeeTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } #employeeTabs .nav-link { white-space: nowrap; font-size: 13px; padding: 8px 10px; } /* Fieldset legend: stack save button below title on very small screens */ fieldset legend { flex-wrap: wrap; gap: 8px; } } /* --- Very small phones: ≤400px --- */ @media (max-width: 400px) { #employeeInfoForm .row .col-md-6, #employeeInfoForm .row .col-md-8, #employeeInfoForm .row .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; } } .cm-page { padding: 0 8px; } @media (min-width:768px) { .cm-page { padding: 0 16px; } } /* ── Read-only banner ─────────────────────────────────────────────── */ .cm-readonly-banner { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: #e8f4fd; border-left: 4px solid #2193b0; border-radius: 10px; margin-bottom: 20px; font-size: 13px; color: #012a38; } .cm-readonly-banner i { font-size: 17px; color: #2193b0; flex-shrink: 0; } /* ── Action buttons ───────────────────────────────────────────────── */ .cm-action-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; align-items: center; } .btn-cm-primary { border-radius: 99px; padding: 8px 16px; font-size: 12px; font-weight: 700; border: none; color: #fff; background: linear-gradient(135deg,#43cea2,#185a9d); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .btn-cm-primary:hover { color: #fff; opacity: .9; } .btn-cm-secondary { border-radius: 99px; padding: 8px 16px; font-size: 12px; font-weight: 700; border: 1px solid #dbe3ea; color: #4b5563; background: #fff; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .btn-cm-secondary:hover { border-color: #2193b0; color: #2193b0; } .btn-cm-transfer { margin-left: auto; } @media(max-width:576px) { .btn-cm-transfer { margin-left: 0; } } /* ── KPI strip ────────────────────────────────────────────────────── */ .cm-kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-bottom: 24px; } @media(max-width:1200px) { .cm-kpi-grid { grid-template-columns: repeat(3,1fr); } } @media(max-width:768px) { .cm-kpi-grid { grid-template-columns: repeat(2,1fr); } } .cm-kpi-card { background: #fff; border-radius: 14px; border: 1px solid #e3e8ef; box-shadow: 0 2px 12px rgba(0,0,0,.04); padding: 16px; display: flex; align-items: center; gap: 12px; min-height: 82px; } .cm-kpi-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; } .cm-kpi-value { font-size: 20px; font-weight: 700; color: #1f2937; line-height: 1.1; } .cm-kpi-value small { font-size: 11px; font-weight: 600; color: #9ca3af; } .cm-kpi-label { font-size: 11px; color: #9ca3af; font-weight: 600; margin-top: 4px; line-height: 1.25; } /* ── Sections ─────────────────────────────────────────────────────── */ .cm-section-header { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; } .cm-section-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; } .cm-section-title { font-size: 14px; font-weight: 700; color: #1f2937; margin: 0; } .cm-section-desc { font-size: 11px; color: #9ca3af; margin-top: 1px; } .cm-section-link { margin-left: auto; font-size: 12px; font-weight: 700; color: #2193b0; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; } .cm-section-link:hover { color: #185a9d; } /* ── Table ────────────────────────────────────────────────────────── */ .cm-table-wrap { background: #fff; border-radius: 16px; border: 1px solid #e3e8ef; box-shadow: 0 2px 16px rgba(0,0,0,.05); overflow: hidden; margin-bottom: 20px; } .cm-table-scroll { overflow-x: auto; } .cm-table { width: 100%; border-collapse: collapse; } .cm-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #9ca3af; font-weight: 700; text-align: left; padding: 12px 14px; background: #fafbfc; border-bottom: 1px solid #eef0f3; white-space: nowrap; } .cm-table tbody tr { border-bottom: 1px solid #f5f6f8; transition: background .12s; } .cm-table tbody tr:last-child { border-bottom: none; } .cm-table tbody tr:hover { background: #f8fafc; } .cm-table tbody td { padding: 12px 14px; font-size: 13px; color: #1f2937; vertical-align: middle; } .cm-student-name, .cm-group-name { font-weight: 700; color: #1f2937; } .cm-subtext { font-size: 11px; color: #9ca3af; margin-top: 2px; } .cm-teacher { display: flex; align-items: center; gap: 8px; } .cm-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#2193b0,#6dd5ed); color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; } .cm-group-code { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 7px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 700; font-family: monospace; } .cm-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 700; } .cm-status-active { background: #dcfce7; color: #166534; } .cm-status-inactive { background: #fee2e2; color: #991b1b; } .cm-fee { font-size: 12px; font-weight: 700; color: #166534; white-space: nowrap; } .cm-time { font-size: 12px; font-weight: 600; color: #374151; } .cm-capacity { font-size: 12px; font-weight: 700; color: #374151; } .btn-cm-view { width: 32px; height: 32px; border-radius: 9px; border: 1px solid #dbeafe; background: #eff6ff; color: #2563eb; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .btn-cm-view:hover { background: #2563eb; color: #fff; } .cm-empty { text-align: center; padding: 40px 16px; color: #9ca3af; } .cm-empty i { font-size: 30px; display: block; margin-bottom: 10px; color: #d1d5db; } /* ── Mobile cards ─────────────────────────────────────────────────── */ .cm-mobile-list { display: none; } .cm-mcard { padding: 14px 16px; border-bottom: 1px solid #f0f2f5; } .cm-mcard:last-child { border-bottom: none; } .cm-mcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .cm-mcard-name { font-size: 14px; font-weight: 700; color: #1f2937; } .cm-mcard-meta { font-size: 11px; color: #9ca3af; margin-top: 3px; } .cm-mcard-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 9px; font-size: 12px; } .cm-mcard-label { font-size: 11px; font-weight: 700; color: #6b7280; } @media(max-width:767px) { .cm-table-scroll { display: none; } .cm-mobile-list { display: block; } } /* ========================================================== COURSE MANAGEMENT - DARK MODE ========================================================== */ [data-theme="dark"] .cm-readonly-banner { background: rgba(33,147,176,.15); border-left-color: #2193b0; color: var(--text-base); } [data-theme="dark"] .cm-readonly-banner i { color: #6dd5ed !important; } /* Buttons */ [data-theme="dark"] .btn-cm-secondary { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .btn-cm-secondary:hover { background: var(--bg-surface); border-color: #2193b0; color: #6dd5ed; } /* KPI */ [data-theme="dark"] .cm-kpi-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .cm-kpi-value { color: var(--text-base); } [data-theme="dark"] .cm-kpi-value small, [data-theme="dark"] .cm-kpi-label, [data-theme="dark"] .cm-section-desc, [data-theme="dark"] .cm-subtext, [data-theme="dark"] .cm-mcard-meta { color: var(--text-hint); } /* Section */ [data-theme="dark"] .cm-section-title { color: var(--text-base); } [data-theme="dark"] .cm-section-link { color: #6dd5ed; } [data-theme="dark"] .cm-section-link:hover { color: #8be4ff; } /* Table */ [data-theme="dark"] .cm-table-wrap { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .cm-table thead th { background: var(--bg-subtle); color: var(--text-muted); border-bottom-color: var(--border); } [data-theme="dark"] .cm-table tbody tr { border-bottom-color: var(--border); } [data-theme="dark"] .cm-table tbody tr:hover { background: rgba(255,255,255,.04); } [data-theme="dark"] .cm-table tbody td { color: var(--text-base); } /* Text */ [data-theme="dark"] .cm-student-name, [data-theme="dark"] .cm-group-name, [data-theme="dark"] .cm-mcard-name { color: var(--text-base); } [data-theme="dark"] .cm-time, [data-theme="dark"] .cm-capacity { color: var(--text-muted); } [data-theme="dark"] .cm-fee { color: #4ade80; } /* Group code */ [data-theme="dark"] .cm-group-code { background: rgba(37,99,235,.18); color: #93c5fd; } /* Status */ [data-theme="dark"] .cm-status-active { background: rgba(34,197,94,.18); color: #86efac; } [data-theme="dark"] .cm-status-inactive { background: rgba(239,68,68,.18); color: #fca5a5; } /* View button */ [data-theme="dark"] .btn-cm-view { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.35); color: #93c5fd; } [data-theme="dark"] .btn-cm-view:hover { background: #2563eb; color: #fff; } /* Empty */ [data-theme="dark"] .cm-empty { color: var(--text-hint); } [data-theme="dark"] .cm-empty i { color: var(--text-hint) !important; } /* Mobile */ [data-theme="dark"] .cm-mcard { background: var(--bg-surface); border-bottom-color: var(--border); } [data-theme="dark"] .cm-mcard-label { color: var(--text-muted); } .pa-page { padding: 0 8px; } @media (min-width:768px) { .pa-page { padding: 0 16px; } } /* KPI */ .pa-kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; } @media (max-width:900px) { .pa-kpi-grid { grid-template-columns: 1fr; } } .pa-kpi-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .pa-kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; } .pa-kpi-value { font-size: 20px; font-weight: 700; } .pa-kpi-label { font-size: 11px; color: #9ca3af; } /* Table */ .pa-table-wrap { background: #fff; border-radius: 16px; border: 1px solid #e3e8ef; box-shadow: 0 2px 14px rgba(0,0,0,.05); overflow: hidden; } .pa-table th { font-size: 11px; text-transform: uppercase; color: #9ca3af; background: #fafbfc; padding: 12px; } .pa-table td { padding: 12px; font-size: 13px; vertical-align: middle; } .pa-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .pa-filter-btn { border: 1px solid #e3e8ef; background: #fff; border-radius: 99px; padding: 6px 12px; font-size: 12px; cursor: pointer; } .pa-filter-btn.active { background: #2193b0; color: #fff; border-color: #2193b0; } .pa-badge { font-size: 11px; padding: 4px 10px; border-radius: 99px; font-weight: 600; } .pa-badge-success { background: #d1fae5; color: #065f46; } .pa-badge-warning { background: #fef3c7; color: #92400e; } /* ========================================================== PAYMENT ANALYTICS - DARK MODE ========================================================== */ [data-theme="dark"] .pa-kpi-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .pa-kpi-value { color: var(--text-base); } [data-theme="dark"] .pa-kpi-label { color: var(--text-hint); } /* Table */ [data-theme="dark"] .pa-table-wrap { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .pa-table th { background: var(--bg-subtle); color: var(--text-muted); border-color: var(--border); } [data-theme="dark"] .pa-table td { color: var(--text-base); border-color: var(--border); } [data-theme="dark"] .pa-table tbody tr { border-color: var(--border); } [data-theme="dark"] .pa-table tbody tr:hover { background: rgba(255,255,255,.04); } /* Filters */ [data-theme="dark"] .pa-filter-btn { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .pa-filter-btn:hover { background: var(--bg-surface); } [data-theme="dark"] .pa-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Badges */ [data-theme="dark"] .pa-badge-success { background: rgba(34,197,94,.18); color: #86efac; } [data-theme="dark"] .pa-badge-warning { background: rgba(245,158,11,.18); color: #fcd34d; } /* ========================================================== COPY CLASS - DARK MODE ========================================================== */ [data-theme="dark"] .cpc-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .cpc-body { background: var(--bg-surface); color: var(--text-base); } [data-theme="dark"] .cpc-label { color: var(--text-muted); } /* Day Chips */ [data-theme="dark"] .cpc-day-chip { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .cpc-day-chip:hover { background: var(--bg-surface); } [data-theme="dark"] .cpc-day-chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; } /* Footer */ [data-theme="dark"] .cpc-footer { background: var(--bg-subtle); border-top-color: var(--border); } /* Buttons */ [data-theme="dark"] .btn-cpc-cancel { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .btn-cpc-cancel:hover { background: var(--bg-surface); } [data-theme="dark"] .btn-cpc-save { color: #fff; } /* ========================================================== PERSON COURSE - DARK MODE ========================================================== */ [data-theme="dark"] .pc-readonly-banner { background: rgba(33,147,176,.15); border-left-color: #2193b0; color: var(--text-base); } [data-theme="dark"] .pc-readonly-banner i { color: #6dd5ed !important; } /* KPI */ [data-theme="dark"] .pc-kpi-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .pc-kpi-value { color: var(--text-base); } [data-theme="dark"] .pc-kpi-label { color: var(--text-hint); } /* Buttons */ [data-theme="dark"] .btn-pc-secondary { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .btn-pc-secondary:hover { background: var(--bg-surface); border-color: #2193b0; color: #6dd5ed; } /* Filters */ [data-theme="dark"] .pc-filter-btn { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .pc-filter-btn:hover { background: var(--bg-surface); border-color: #2193b0; color: #6dd5ed; } [data-theme="dark"] .pc-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="dark"] .pc-filter-btn .count { background: rgba(255,255,255,.12); } [data-theme="dark"] .pc-filter-btn.active .count { background: rgba(255,255,255,.25); } /* Table */ [data-theme="dark"] .pc-table-wrap { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .pc-table thead th { background: var(--bg-subtle); color: var(--text-muted); border-bottom-color: var(--border); } [data-theme="dark"] .pc-table tbody tr { border-bottom-color: var(--border); } [data-theme="dark"] .pc-table tbody tr:hover { background: rgba(255,255,255,.04); } [data-theme="dark"] .pc-table tbody tr.pc-row-inactive { background: rgba(255,255,255,.03); } [data-theme="dark"] .pc-table tbody td { color: var(--text-base); } /* Person */ [data-theme="dark"] .pc-person-name, [data-theme="dark"] .pc-mcard-name { color: var(--text-base); } [data-theme="dark"] .pc-person-sub, [data-theme="dark"] .pc-mcard-meta { color: var(--text-hint); } /* Course Badge */ [data-theme="dark"] .pc-course-badge { background: var(--bg-subtle); color: var(--text-base); } /* Text */ [data-theme="dark"] .pc-days, [data-theme="dark"] .pc-time, [data-theme="dark"] .pc-mcard-label { color: var(--text-muted); } [data-theme="dark"] .pc-fee { color: #4ade80; } /* Status */ [data-theme="dark"] .pc-status-active { background: rgba(34,197,94,.18); color: #86efac; } [data-theme="dark"] .pc-status-inactive { background: rgba(239,68,68,.18); color: #fca5a5; } /* Deactivate Button */ [data-theme="dark"] .btn-pc-deactivate { background: var(--bg-subtle); border-color: rgba(239,68,68,.35); color: #f87171; } [data-theme="dark"] .btn-pc-deactivate:hover { background: #dc2626; border-color: #dc2626; color: #fff; } /* Empty */ [data-theme="dark"] .pc-empty { color: var(--text-hint); } [data-theme="dark"] .pc-empty i { color: var(--text-hint) !important; } /* Mobile */ [data-theme="dark"] .pc-mcard { background: var(--bg-surface); border-bottom-color: var(--border); } [data-theme="dark"] .pc-mcard.pc-row-inactive { background: rgba(255,255,255,.03); } /* ========================================================== COPY GROUP - DARK MODE ========================================================== */ [data-theme="dark"] .cg-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .cg-body { background: var(--bg-surface); color: var(--text-base); } [data-theme="dark"] .cg-label { color: var(--text-muted); } [data-theme="dark"] .cg-capacity-hint { color: var(--text-hint); } /* Day Chips */ [data-theme="dark"] .cpc-day-chip { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .cpc-day-chip:hover { background: var(--bg-surface); } [data-theme="dark"] .cpc-day-chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; } /* Footer */ [data-theme="dark"] .cg-footer { background: var(--bg-subtle); border-top-color: var(--border); } /* Buttons */ [data-theme="dark"] .btn-cg-cancel { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .btn-cg-cancel:hover { background: var(--bg-surface); } [data-theme="dark"] .btn-cg-save { color: #4a2a00; } /* ========================================================== GROUP REPORT - DARK MODE ========================================================== */ [data-theme="dark"] .gr-readonly-banner { background: rgba(33,147,176,.15); border-left-color: #2193b0; color: var(--text-base); } [data-theme="dark"] .gr-readonly-banner i { color: #6dd5ed !important; } /* Action Buttons */ [data-theme="dark"] .btn-gr-back { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .btn-gr-back:hover { background: var(--bg-surface); border-color: #2193b0; color: #6dd5ed; } /* KPI */ [data-theme="dark"] .gr-kpi-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .gr-kpi-value { color: var(--text-base); } [data-theme="dark"] .gr-kpi-label { color: var(--text-hint); } /* Filters */ [data-theme="dark"] .gr-filter-btn { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .gr-filter-btn:hover { background: var(--bg-surface); border-color: #2193b0; color: #6dd5ed; } [data-theme="dark"] .gr-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="dark"] .gr-filter-btn .count { background: rgba(255,255,255,.12); } [data-theme="dark"] .gr-filter-btn.active .count { background: rgba(255,255,255,.25); } /* Table */ [data-theme="dark"] .gr-table-wrap { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .gr-table thead th { background: var(--bg-subtle); color: var(--text-muted); border-bottom-color: var(--border); } [data-theme="dark"] .gr-table tbody tr { border-bottom-color: var(--border); } [data-theme="dark"] .gr-table tbody tr:hover { background: rgba(255,255,255,.04); } [data-theme="dark"] .gr-table tbody tr.gr-row-inactive { background: rgba(239,68,68,.08); } [data-theme="dark"] .gr-table tbody tr.gr-row-full { background: rgba(245,158,11,.08); } [data-theme="dark"] .gr-table tbody td { color: var(--text-base); } /* Text */ [data-theme="dark"] .gr-name, [data-theme="dark"] .gr-mcard-name { color: var(--text-base); } [data-theme="dark"] .gr-subtext, [data-theme="dark"] .gr-mcard-meta { color: var(--text-hint); } [data-theme="dark"] .gr-schedule, [data-theme="dark"] .gr-mcard-label, [data-theme="dark"] .gr-capacity-text { color: var(--text-muted); } /* Code */ [data-theme="dark"] .gr-code { background: rgba(37,99,235,.18); color: #93c5fd; } /* Capacity */ [data-theme="dark"] .gr-cap-bar { background: var(--bg-subtle); } /* Status */ [data-theme="dark"] .gr-status-active { background: rgba(34,197,94,.18); color: #86efac; } [data-theme="dark"] .gr-status-inactive { background: rgba(239,68,68,.18); color: #fca5a5; } /* View Button */ [data-theme="dark"] .btn-gr-view { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.35); color: #93c5fd; } [data-theme="dark"] .btn-gr-view:hover { background: #2563eb; color: #fff; } /* Empty */ [data-theme="dark"] .gr-empty { color: var(--text-hint); } [data-theme="dark"] .gr-empty i { color: var(--text-hint) !important; } /* Mobile */ [data-theme="dark"] .gr-mcard { background: var(--bg-surface); border-bottom-color: var(--border); } [data-theme="dark"] .gr-mcard.gr-row-inactive { background: rgba(239,68,68,.08); } [data-theme="dark"] .gr-mcard.gr-row-full { background: rgba(245,158,11,.08); } /* ========================================================== TEACHER HISTORY - DARK MODE ========================================================== */ [data-theme="dark"] .th-filter-bar { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .th-filter-group label { color: var(--text-muted); } [data-theme="dark"] .btn-th-clear { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .btn-th-clear:hover { background: var(--bg-surface); border-color: #2193b0; color: #6dd5ed; } /* Filter Chips */ [data-theme="dark"] .th-type-chip { background: var(--bg-subtle); border-color: var(--border); color: var(--text-base); } [data-theme="dark"] .th-type-chip:hover { background: var(--bg-surface); border-color: #2193b0; color: #6dd5ed; } [data-theme="dark"] .th-type-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="dark"] .th-type-chip .count { background: rgba(255,255,255,.12); } [data-theme="dark"] .th-type-chip.active .count { background: rgba(255,255,255,.25); } /* Timeline */ [data-theme="dark"] .th-timeline-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } [data-theme="dark"] .th-timeline::before { background: var(--border); } [data-theme="dark"] .th-tl-dot { box-shadow: 0 0 0 4px var(--bg-surface); } [data-theme="dark"] .th-tl-content { background: var(--bg-subtle); border-color: var(--border); } [data-theme="dark"] .th-tl-type { color: var(--text-base); } [data-theme="dark"] .th-tl-time, [data-theme="dark"] .th-tl-meta, [data-theme="dark"] .th-tl-arrow { color: var(--text-hint); } [data-theme="dark"] .th-tl-reason { color: var(--text-muted); } [data-theme="dark"] .th-tl-impact { background: var(--bg-surface); color: var(--text-muted); border-left-color: var(--border); } /* Empty */ [data-theme="dark"] .th-empty { color: var(--text-hint); } [data-theme="dark"] .th-empty i { color: var(--text-hint) !important; } /* ── Mobile Bottom Navigation ── */ .bottom-nav2 { position: fixed !important; /* Force it to stay fixed to the screen */ bottom: 0 !important; /* Force it to the very bottom */ left: 0 !important; width: 100% !important; background: white; box-shadow: 0 -4px 15px rgba(0,0,0,0.08); /* Stronger shadow to pop over content */ display: flex; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; /* env(safe-area-inset-bottom) pushes it above the iPhone home bar */ padding: 10px 15px calc(10px + env(safe-area-inset-bottom)) 15px; gap: 20px; z-index: 9999 !important; /* Ensures NOTHING overlaps it */ -webkit-overflow-scrolling: touch; /* Smooth horizontal swipe */ transform: translateZ(0); /* Hardware acceleration fix for older mobile browsers */ } .bottom-nav2::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */ .nav-item2 { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #9e9e9e; font-size: 11px; gap: 4px; cursor: pointer; background: transparent; border: none; min-width: 55px; /* Ensures buttons don't shrink too small when there are 7 items */ } .nav-item2 i { font-size: 20px; } .nav-item2.active { color: var(--primary-green); font-weight: 600; } /* ── Floating Action Button (FAB) Container ── */ .fab-container { position: fixed; top: 80px; right: 20px; z-index: 1050; } @media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } .bottom-nav2 { display: none !important; } .dashboard-wrapper { padding-bottom: 40px; } } @media (max-width: 767px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .dash-chart-row { grid-template-columns: 1fr; } .dash-tabs-bar { display: none !important; } /* Forces the page to have empty space at the bottom so the sticky menu doesn't hide text */ body { padding-bottom: 100px !important; } .fab-container { bottom: 95px !important; top: auto; right: 20px; } .fab-container { bottom: 85px; top: auto; right: 20px; } /* Move plus button to bottom right on mobile */ }