/* ============================================================================ MODERN DASHBOARD DESIGN SYSTEM Enhanced UI for SaaS Admin Portal and Tenant Dashboard ============================================================================ */ /* Fonts are loaded from layout to avoid @import waterfalls. */ :root { /* Modern Color Palette */ --primary-brand: #3b82f6; --primary-brand-dark: #2563eb; --primary-brand-light: #60a5fa; --secondary-brand: #8b5cf6; --accent-color: #10b981; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #06b6d4; /* Neutral Colors */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* Surface Colors */ --surface-primary: #ffffff; --surface-secondary: #f8fafc; --surface-tertiary: #f1f5f9; /* Text Colors */ --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #94a3b8; --text-inverse: #ffffff; /* Border Colors */ --border-light: #e2e8f0; --border-medium: #cbd5e1; --border-dark: #94a3b8; /* Shadow Styles */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================================ GLOBAL BASE STYLES ============================================================================ */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--surface-tertiary); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================================ HEADER & TOPBAR MODERNIZATION ============================================================================ */ .header { background: var(--surface-primary); border-bottom: 1px solid var(--border-light); box-shadow: var(--shadow-sm); } .navbar { background: var(--surface-primary); border: none; margin-bottom: 0; } .navbar-brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 1.25rem; color: var(--text-primary) !important; } .navbar-brand img { width: 40px; height: 40px; border-radius: var(--radius-md); object-fit: cover; } .navbar-nav > li > a { color: var(--text-secondary) !important; font-weight: 500; transition: color var(--transition-fast); } .navbar-nav > li > a:hover, .navbar-nav > li > a:focus { color: var(--text-primary) !important; background: transparent !important; } /* ============================================================================ SIDEBAR MODERNIZATION ============================================================================ */ .left-side { background: var(--surface-primary); border-right: 1px solid var(--border-light); box-shadow: var(--shadow-sm); } .sidebar-menu { list-style: none; padding: var(--spacing-md); margin: 0; } .sidebar-menu > li { margin-bottom: var(--spacing-xs); } .sidebar-menu > li > a { display: flex; align-items: center; padding: 0.75rem var(--spacing-md); border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 500; transition: all var(--transition-base); text-decoration: none; } .sidebar-menu > li > a:hover { background: var(--surface-secondary); color: var(--text-primary); } .sidebar-menu > li.active > a { background: linear-gradient(135deg, var(--primary-brand), var(--primary-brand-light)); color: var(--text-inverse); box-shadow: var(--shadow-md); } .sidebar-menu > li > a > i { margin-right: 0.75rem; width: 1.25rem; text-align: center; font-size: 1.125rem; } /* ============================================================================ MAIN CONTENT AREA ============================================================================ */ .right-side { background: var(--surface-tertiary); margin-left: 220px; min-height: 100vh; } .content { padding: var(--spacing-xl); } /* ============================================================================ BOX & CARD COMPONENTS ============================================================================ */ .box { background: var(--surface-primary); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--spacing-lg); transition: box-shadow var(--transition-base); } .box:hover { box-shadow: var(--shadow-md); } .box-header { padding: var(--spacing-lg); border-bottom: 1px solid var(--border-light); background: var(--surface-secondary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .box-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 0.5rem; } .box-body { padding: var(--spacing-lg); } .box-footer { padding: var(--spacing-md) var(--spacing-lg); background: var(--surface-secondary); border-top: 1px solid var(--border-light); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* ============================================================================ SMALL BOX STATS (Dashboard Cards) ============================================================================ */ .small-box { position: relative; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: var(--spacing-lg); transition: transform var(--transition-base), box-shadow var(--transition-base); box-shadow: var(--shadow-md); } .small-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .small-box .small-box-footer { display: block; padding: var(--spacing-lg); color: var(--text-inverse); text-decoration: none; position: relative; background: linear-gradient(135deg, var(--primary-brand), var(--primary-brand-dark)); } .small-box .inner { padding: var(--spacing-lg); color: var(--text-inverse); } .small-box .inner h3 { font-size: 2.5rem; font-weight: 800; margin: 0 0 var(--spacing-sm) 0; line-height: 1; } .small-box .inner p { font-size: 1rem; font-weight: 500; margin: 0; opacity: 0.95; } .small-box .icon { position: absolute; top: 50%; right: var(--spacing-lg); transform: translateY(-50%); font-size: 4rem; opacity: 0.3; } /* Color Variants for Small Boxes */ .bg-teal-light .small-box-footer, .bg-teal-light { background: linear-gradient(135deg, #14b8a6, #0d9488); } .bg-purple-light .small-box-footer, .bg-purple-light { background: linear-gradient(135deg, #a855f7, #9333ea); } .bg-orange-dark .small-box-footer, .bg-orange-dark { background: linear-gradient(135deg, #f97316, #ea580c); } .bg-pink .small-box-footer, .bg-pink { background: linear-gradient(135deg, #ec4899, #db2777); } .bg-blue .small-box-footer, .bg-blue { background: linear-gradient(135deg, #3b82f6, #2563eb); } .bg-green .small-box-footer, .bg-green { background: linear-gradient(135deg, #10b981, #059669); } /* ============================================================================ BUTTONS MODERNIZATION ============================================================================ */ .btn { border-radius: var(--radius-md); font-weight: 600; padding: 0.625rem 1.25rem; transition: all var(--transition-base); border: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary { background: linear-gradient(135deg, var(--primary-brand), var(--primary-brand-dark)); color: var(--text-inverse); box-shadow: var(--shadow-md); } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-brand-dark), var(--primary-brand)); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-success { background: linear-gradient(135deg, #10b981, #059669); color: var(--text-inverse); } .btn-info { background: linear-gradient(135deg, #06b6d4, #0891b2); color: var(--text-inverse); } .btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: var(--text-inverse); } .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: var(--text-inverse); } .btn-default { background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-medium); } .btn-default:hover { background: var(--surface-secondary); border-color: var(--border-dark); } /* ============================================================================ TABLES MODERNIZATION ============================================================================ */ .table { background: var(--surface-primary); border-radius: var(--radius-lg); overflow: hidden; } .table thead { background: var(--surface-secondary); } .table thead th { font-weight: 700; color: var(--text-primary); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; padding: var(--spacing-md); border-bottom: 2px solid var(--border-medium); } .table tbody td { padding: var(--spacing-md); vertical-align: middle; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); } .table tbody tr:hover { background: var(--surface-secondary); } .table tbody tr:last-child td { border-bottom: none; } /* ============================================================================ FORMS MODERNIZATION ============================================================================ */ .form-control { border: 1px solid var(--border-medium); border-radius: var(--radius-md); padding: 0.625rem var(--spacing-md); font-size: 1rem; transition: all var(--transition-fast); background: var(--surface-primary); color: var(--text-primary); } .form-control:focus { border-color: var(--primary-brand); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } .form-group { margin-bottom: var(--spacing-lg); } .form-group label { font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-sm); display: block; } /* ============================================================================ FOOTER MODERNIZATION ============================================================================ */ .main-footer { background: var(--surface-primary); border-top: 1px solid var(--border-light); padding: var(--spacing-lg); margin-top: auto; } .footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); } .footer-col { color: var(--text-secondary); font-size: 0.875rem; } .footer-academic-line { display: flex; align-items: center; gap: var(--spacing-md); font-weight: 500; } .footer-academic-days { padding: var(--spacing-xs) var(--spacing-sm); background: var(--accent-color); color: var(--text-inverse); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; } /* ============================================================================ ALERTS & NOTIFICATIONS ============================================================================ */ .alert { border-radius: var(--radius-md); border: none; padding: var(--spacing-md) var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--shadow-sm); } .alert-success { background: #d1fae5; color: #065f46; } .alert-info { background: #dbeafe; color: #1e40af; } .alert-warning { background: #fef3c7; color: #92400e; } .alert-danger { background: #fee2e2; color: #991b1b; } /* ============================================================================ BADGES & LABELS ============================================================================ */ .badge, .label { border-radius: var(--radius-full); padding: 0.25rem 0.75rem; font-weight: 600; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem; } .badge-primary, .label-primary { background: var(--primary-brand); color: var(--text-inverse); } .badge-success, .label-success { background: var(--accent-color); color: var(--text-inverse); } .badge-warning, .label-warning { background: var(--warning-color); color: var(--text-inverse); } .badge-danger, .label-danger { background: var(--danger-color); color: var(--text-inverse); } .badge-info, .label-info { background: var(--info-color); color: var(--text-inverse); } /* ============================================================================ PAGINATION ============================================================================ */ .pagination { display: flex; gap: var(--spacing-xs); } .pagination > li > a { border-radius: var(--radius-md); padding: 0.5rem 0.75rem; color: var(--text-secondary); border: 1px solid var(--border-light); transition: all var(--transition-fast); } .pagination > li > a:hover { background: var(--primary-brand); color: var(--text-inverse); border-color: var(--primary-brand); } .pagination > .active > a { background: var(--primary-brand); color: var(--text-inverse); border-color: var(--primary-brand); } /* ============================================================================ RESPONSIVE DESIGN ============================================================================ */ @media (max-width: 992px) { .right-side { margin-left: 0; } .left-side { transform: translateX(-100%); transition: transform var(--transition-base); } .left-side.open { transform: translateX(0); } .content { padding: var(--spacing-md); } .footer-row { flex-direction: column; text-align: center; } } @media (max-width: 768px) { .small-box .inner h3 { font-size: 2rem; } .small-box .icon { font-size: 3rem; } .box-header { padding: var(--spacing-md); } .box-body { padding: var(--spacing-md); } } /* ============================================================================ UTILITY CLASSES ============================================================================ */ .text-white { color: var(--text-inverse) !important; } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--spacing-xs) !important; } .mt-2 { margin-top: var(--spacing-sm) !important; } .mt-3 { margin-top: var(--spacing-md) !important; } .mt-4 { margin-top: var(--spacing-lg) !important; } .mt-5 { margin-top: var(--spacing-xl) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--spacing-xs) !important; } .mb-2 { margin-bottom: var(--spacing-sm) !important; } .mb-3 { margin-bottom: var(--spacing-md) !important; } .mb-4 { margin-bottom: var(--spacing-lg) !important; } .mb-5 { margin-bottom: var(--spacing-xl) !important; } .p-0 { padding: 0 !important; } .p-1 { padding: var(--spacing-xs) !important; } .p-2 { padding: var(--spacing-sm) !important; } .p-3 { padding: var(--spacing-md) !important; } .p-4 { padding: var(--spacing-lg) !important; } .p-5 { padding: var(--spacing-xl) !important; } .rounded { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-full { border-radius: var(--radius-full) !important; } .shadow { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } .shadow-xl { box-shadow: var(--shadow-xl) !important; }