/* ============================================================= 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: 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-company .section-panel-header { background: linear-gradient(135deg,#36d1dc,#5b86e5); } .panel-users .section-panel-header { background: linear-gradient(135deg,#f7971e,#ffd200); } .panel-employee .section-panel-header { background: linear-gradient(135deg,#1d976c,#93f9b9); } .panel-finance .section-panel-header { background: linear-gradient(135deg,#283c86,#45a247); } .panel-settings .section-panel-header { background: linear-gradient(135deg,#8360c3,#2ebf91); } /* 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; } }