/** * ADMIN PANEL - CSS VARIABLES & UTILITIES * * Comprehensive styling system for all pages * Includes: spacing, colors, typography, shadows, transitions * * Usage: * - Include in before other stylesheets * - Use CSS custom properties: var(--spacing-md) * - Combine classes for consistent styling */ /* ============================================ */ /* CSS CUSTOM PROPERTIES (VARIABLES) */ /* ============================================ */ :root { /* ========== SPACING SCALE ========== */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-xxl: 32px; /* ========== COLORS - LIGHT MODE ========== */ --color-bg-primary: #f8fafc; /* Page background (Slate-50) */ --color-bg-secondary: #ffffff; /* Cards, containers */ --color-bg-tertiary: #f1f5f9; /* Hover backgrounds (Slate-100) */ --color-text-primary: #0f172a; /* Main text (Slate-900) */ --color-text-secondary: #475569; /* Secondary text (Slate-600) */ --color-text-tertiary: #94a3b8; /* Muted, captions (Slate-400) */ --color-text-inverse: #ffffff; /* Text on dark backgrounds */ --color-border: #e2e8f0; /* Borders (Slate-200) */ --color-border-light: #f1f5f9; /* Light borders (Slate-100) */ /* Brand Colors (Emerald & Slate theme for Mosque) */ --color-primary: #10b981; /* Emerald-500 */ --color-primary-dark: #059669; /* Emerald-600 */ --color-primary-light: #d1fae5; /* Emerald-100 */ --color-accent: #3b82f6; /* Blue-500 for secondary actions */ --color-success: #10b981; /* Emerald-500 */ --color-danger: #ef4444; /* Red-500 */ --color-warning: #f59e0b; /* Amber-500 */ --color-info: #3b82f6; /* Blue-500 */ /* Card Colors (Softer pastels) */ --color-card-kas: #10b981; --color-card-announcements: #3b82f6; --color-card-pengajian: #f59e0b; --color-card-ayat: #8b5cf6; /* ========== COLORS - DARK MODE ========== */ --color-dark-bg-primary: #0f172a; /* Slate-900 */ --color-dark-bg-secondary: #1e293b; /* Slate-800 */ --color-dark-bg-tertiary: #334155; /* Slate-700 */ --color-dark-text-primary: #f8fafc; --color-dark-text-secondary: #cbd5e1; --color-dark-text-tertiary: #94a3b8; --color-dark-border: #334155; --color-dark-border-light: #1e293b; /* ========== TYPOGRAPHY ========== */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-arabic: 'Scheherazade New', serif; --font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* Font Sizes */ --font-size-display: 32px; --font-size-h2: 24px; --font-size-h3: 18px; --font-size-body: 15px; --font-size-body-small: 13px; --font-size-label: 14px; --font-size-caption: 12px; --font-size-number: 36px; /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ========== SHADOWS (Softer, diffused) ========== */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Dark mode shadows */ --shadow-dark-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-dark-md: 0 4px 6px -1px rgb(0 0 0 / 0.3); --shadow-dark-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3); --shadow-dark-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4); /* ========== BORDER RADIUS ========== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ========== TRANSITIONS ========== */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* ========== Z-INDEX SCALE ========== */ --z-dropdown: 100; --z-modal: 500; --z-loading: 1000; --z-notification: 1100; } /* ============================================ */ /* DARK MODE */ /* ============================================ */ @media (prefers-color-scheme: dark) { :root { --color-bg-primary: var(--color-dark-bg-primary); --color-bg-secondary: var(--color-dark-bg-secondary); --color-bg-tertiary: var(--color-dark-bg-tertiary); --color-text-primary: var(--color-dark-text-primary); --color-text-secondary: var(--color-dark-text-secondary); --color-text-tertiary: var(--color-dark-text-tertiary); --color-border: var(--color-dark-border); --color-border-light: var(--color-dark-border-light); } } /* ============================================ */ /* BASE STYLES */ /* ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family-base); font-size: var(--font-size-body); line-height: var(--line-height-relaxed); color: var(--color-text-primary); background-color: var(--color-bg-primary); transition: background-color var(--transition-normal); } /* ============================================ */ /* TYPOGRAPHY UTILITIES */ /* ============================================ */ .text-display { font-size: var(--font-size-display); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: -0.5px; } .text-h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: var(--line-height-normal); } .text-h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); } .text-body { font-size: var(--font-size-body); font-weight: var(--font-weight-normal); line-height: var(--line-height-relaxed); } .text-body-small { font-size: var(--font-size-body-small); font-weight: var(--font-weight-normal); line-height: var(--line-height-relaxed); } .text-label { font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); } .text-caption { font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); line-height: var(--line-height-normal); letter-spacing: 0.5px; } .text-number { font-size: var(--font-size-number); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); } .text-arabic { font-family: var(--font-family-arabic); direction: rtl; text-align: right; } /* ============================================ */ /* SPACING UTILITIES */ /* ============================================ */ .mt-xs { margin-top: var(--spacing-xs); } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mt-xl { margin-top: var(--spacing-xl); } .mt-xxl { margin-top: var(--spacing-xxl); } .mb-xs { margin-bottom: var(--spacing-xs); } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } .mb-xl { margin-bottom: var(--spacing-xl); } .mb-xxl { margin-bottom: var(--spacing-xxl); } .p-xs { padding: var(--spacing-xs); } .p-sm { padding: var(--spacing-sm); } .p-md { padding: var(--spacing-md); } .p-lg { padding: var(--spacing-lg); } .p-xl { padding: var(--spacing-xl); } .p-xxl { padding: var(--spacing-xxl); } .gap-xs { gap: var(--spacing-xs); } .gap-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } .gap-lg { gap: var(--spacing-lg); } .gap-xl { gap: var(--spacing-xl); } .gap-xxl { gap: var(--spacing-xxl); } /* ============================================ */ /* BUTTON STYLES */ /* ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: 14px 24px; font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); text-decoration: none; white-space: nowrap; user-select: none; } .btn:hover:not(:disabled) { transform: translateY(-2px); } .btn:active:not(:disabled) { transform: translateY(0); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* Button Variants */ .btn-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-text-inverse); box-shadow: var(--shadow-md); } .btn-primary:hover:not(:disabled) { box-shadow: var(--shadow-lg); } .btn-secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-secondary:hover:not(:disabled) { background: var(--color-primary-light); } .btn-danger { background: var(--color-danger); color: var(--color-text-inverse); box-shadow: var(--shadow-md); } .btn-danger:hover:not(:disabled) { background: #d64839; box-shadow: var(--shadow-lg); } .btn-ghost { background: transparent; color: var(--color-text-secondary); padding: 12px 16px; } .btn-ghost:hover:not(:disabled) { background: var(--color-bg-tertiary); } /* Button Sizes */ .btn-sm { padding: 10px 16px; font-size: var(--font-size-label); } .btn-lg { padding: 16px 32px; font-size: 16px; } .btn-block { width: 100%; } .btn-group { display: flex; gap: var(--spacing-md); flex-wrap: wrap; } /* ============================================ */ /* FORM STYLES */ /* ============================================ */ .form-group { margin-bottom: var(--spacing-lg); } .form-group label { display: block; font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-md); } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 15px; font-size: var(--font-size-body); font-family: inherit; border: 2px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-secondary); color: var(--color-text-primary); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); } .form-group input:disabled, .form-group textarea:disabled, .form-group select:disabled { background-color: var(--color-bg-tertiary); cursor: not-allowed; opacity: 0.6; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-lg); } .form-help { font-size: var(--font-size-caption); color: var(--color-text-tertiary); margin-top: var(--spacing-sm); } .form-error { font-size: var(--font-size-caption); color: var(--color-danger); margin-top: var(--spacing-sm); } /* ============================================ */ /* CARD & CONTAINER STYLES */ /* ============================================ */ .card, .container-box { background: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-md); transition: all var(--transition-normal); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card-header { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-border); } .card-body { margin-bottom: 0; } .card-footer { margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); font-size: var(--font-size-caption); color: var(--color-text-tertiary); } /* Card with left border accent */ .card-accent { border-left: 4px solid var(--color-primary); } .card-accent.card-success { border-left-color: var(--color-success); } .card-accent.card-danger { border-left-color: var(--color-danger); } .card-accent.card-warning { border-left-color: var(--color-warning); } .card-accent.card-info { border-left-color: var(--color-info); } /* ============================================ */ /* ALERT & MESSAGE STYLES */ /* ============================================ */ .alert { padding: 15px 20px; border-radius: var(--radius-md); display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); animation: slideDown var(--transition-slow); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .alert-success { background-color: #e8f5e9; border: 2px solid #c8e6c9; color: #2e7d32; } .alert-danger, .alert-error { background-color: #fee; border: 2px solid #fcc; color: var(--color-danger); } .alert-warning { background-color: #fff3cd; border: 2px solid #ffe69c; color: #856404; } .alert-info { background-color: #d1ecf1; border: 2px solid #bee5eb; color: #0c5460; } .alert-dismiss { margin-left: auto; cursor: pointer; opacity: 0.7; transition: opacity var(--transition-fast); } .alert-dismiss:hover { opacity: 1; } /* ============================================ */ /* BADGE & LABEL STYLES */ /* ============================================ */ .badge { display: inline-block; padding: 6px 12px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.5px; } .badge-primary { background: var(--color-primary); color: var(--color-text-inverse); } .badge-success { background: var(--color-success); color: var(--color-text-inverse); } .badge-danger { background: var(--color-danger); color: var(--color-text-inverse); } .badge-warning { background: var(--color-warning); color: #fff; } .badge-light { background: var(--color-bg-tertiary); color: var(--color-text-primary); } .badge-outline { background: transparent; border: 1px solid currentColor; } /* ============================================ */ /* UTILITY CLASSES */ /* ============================================ */ /* Display */ .hidden { display: none !important; } .visible { display: block !important; } /* Text utilities */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } .text-justify { text-align: justify; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-bold { font-weight: var(--font-weight-bold); } .text-semibold { font-weight: var(--font-weight-semibold); } .text-normal { font-weight: var(--font-weight-normal); } .text-muted { color: var(--color-text-tertiary); } .text-primary { color: var(--color-primary); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } /* Flexbox utilities */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } /* Grid utilities */ .grid { display: grid; gap: var(--spacing-lg); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Opacity utilities */ .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } /* Cursor utilities */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } /* Width utilities */ .w-100 { width: 100%; } .w-50 { width: 50%; } .max-w-lg { max-width: 500px; } .max-w-md { max-width: 400px; } /* ============================================ */ /* LOADING INDICATOR */ /* ============================================ */ .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner-lg { width: 50px; height: 50px; border-width: 4px; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================ */ /* RESPONSIVE UTILITIES */ /* ============================================ */ @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .btn-group { flex-direction: column; } .btn-block { width: 100%; } /* Hide on mobile */ .hide-mobile { display: none !important; } } @media (max-width: 480px) { :root { --spacing-xxl: 24px; /* Reduce large spacing on mobile */ } .text-display { font-size: 24px; } .text-h2 { font-size: 18px; } .card, .container-box { padding: var(--spacing-lg); } } /* ============================================ */ /* REDUCED MOTION */ /* ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================ */ /* PRINT STYLES */ /* ============================================ */ @media print { body { background: white; color: black; } .no-print { display: none !important; } .btn { box-shadow: none; border: 1px solid #333; } } /* ============================================ */ /* MOBILE NAVIGATION ADDITIONS */ /* ============================================ */ /* Sidebar Toggle Button - Visible only on mobile */ .sidebar-toggle-btn { display: none; background: transparent; border: none; color: var(--color-text-primary); font-size: 24px; cursor: pointer; margin-right: 16px; padding: 4px; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); } .sidebar-toggle-btn:hover { background-color: var(--color-bg-tertiary); color: var(--color-primary); } /* Overlay for Mobile Sidebar */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99; display: none; opacity: 0; transition: opacity var(--transition-normal); backdrop-filter: blur(2px); } .sidebar-overlay.show { display: block; opacity: 1; } /* Mobile responsive adjustments */ @media (max-width: 992px) { .sidebar-toggle-btn { display: flex; align-items: center; justify-content: center; } }