/* ============================================ DESIGN SYSTEM CSS Plastic Manufacturing SaaS Professional Blue-Based Industrial Theme ============================================ Usage: Link this file in your HTML Customize: Override any --variable in your own CSS */ /* ============================================ 1. CSS RESET (Minimal) ============================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 10; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } /* ============================================ 2. DESIGN TOKENS (CSS Custom Properties) ============================================ */ :root { /* === CORE COLORS (HSL) === */ --background: 210 20% 98%; --foreground: 215 25% 15%; --card: 0 0% 100%; --card-foreground: 215 25% 15%; --popover: 0 0% 100%; --popover-foreground: 215 25% 15%; /* Primary: Deep Industrial Blue */ --primary: 213 65% 35%; --primary-foreground: 210 40% 98%; /* Secondary: Slate/Steel Gray */ --secondary: 215 16% 90%; --secondary-foreground: 215 25% 25%; /* Muted: Subtle backgrounds */ --muted: 210 15% 95%; --muted-foreground: 215 16% 45%; /* Accent: Teal for CTAs */ --accent: 186 65% 40%; --accent-foreground: 0 0% 100%; /* Destructive/Error */ --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; /* Borders & Inputs */ --border: 214 20% 85%; --input: 214 20% 85%; --ring: 213 65% 35%; /* Border Radius */ --radius: 0.375rem; --radius-sm: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; /* === STATUS COLORS === */ --success: 142 72% 38%; --success-foreground: 0 0% 100%; --warning: 38 92% 50%; --warning-foreground: 38 92% 15%; --info: 199 89% 48%; --info-foreground: 0 0% 100%; --materia-prima: 30 72% 49%; --en-proceso: 285 72% 48.5%; --terminado: 199 89% 48%; /* === SIDEBAR === */ --sidebar-background: 215 25% 18%; --sidebar-foreground: 210 20% 92%; --sidebar-primary: 213 65% 50%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 215 25% 25%; --sidebar-accent-foreground: 210 20% 92%; --sidebar-border: 215 20% 28%; /* === SHADOWS (HSL base for alpha) === */ --shadow-color: 215 25% 15%; /* === TYPOGRAPHY === */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* === SPACING SCALE === */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* === TRANSITIONS === */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; } /* ============================================ 3. DARK MODE ============================================ */ .dark, [data-theme="dark"] { --background: 215 28% 10%; --foreground: 210 20% 95%; --card: 215 28% 14%; --card-foreground: 210 20% 95%; --popover: 215 28% 14%; --popover-foreground: 210 20% 95%; --primary: 213 70% 55%; --primary-foreground: 215 28% 10%; --secondary: 215 20% 22%; --secondary-foreground: 210 20% 90%; --muted: 215 20% 18%; --muted-foreground: 215 16% 60%; --accent: 186 70% 50%; --accent-foreground: 215 28% 10%; --destructive: 0 62% 55%; --destructive-foreground: 0 0% 100%; --border: 215 20% 25%; --input: 215 20% 25%; --ring: 213 70% 55%; --success: 142 62% 45%; --success-foreground: 142 72% 10%; --warning: 38 92% 55%; --warning-foreground: 38 92% 10%; --info: 199 89% 55%; --info-foreground: 199 89% 10%; --sidebar-background: 215 30% 8%; --sidebar-foreground: 210 20% 92%; --sidebar-primary: 213 70% 55%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 215 25% 15%; --sidebar-accent-foreground: 210 20% 92%; --sidebar-border: 215 20% 18%; --shadow-color: 215 30% 5%; } /* ============================================ 4. BASE STYLES ============================================ */ html { font-size: 16px; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: hsl(var(--foreground)); background-color: hsl(var(--background)); } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-semibold); line-height: var(--leading-tight); color: hsl(var(--foreground)); margin-bottom: var(--space-4); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); font-weight: var(--font-medium); } p { line-height: var(--leading-relaxed); margin-bottom: var(--space-4); } a { color: hsl(var(--primary)); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: hsl(var(--primary) / 0.8); text-decoration: underline; } code, pre { font-family: var(--font-mono); font-size: var(--text-sm); } code { background-color: hsl(var(--muted)); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } pre { background-color: hsl(var(--muted)); padding: var(--space-4); border-radius: var(--radius); overflow-x: auto; } pre code { background: none; padding: 0; } /* ============================================ 5. LAYOUT UTILITIES ============================================ */ .container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); } .container-sm { max-width: 640px; } .container-md { max-width: 768px; } .container-lg { max-width: 1024px; } .container-xl { max-width: 1280px; } /* Flexbox */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* Grid */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ============================================ 6. SPACING UTILITIES ============================================ */ /* Margin */ .m-0 { margin: var(--space-0); } .m-1 { margin: var(--space-1); } .m-2 { margin: var(--space-2); } .m-3 { margin: var(--space-3); } .m-4 { margin: var(--space-4); } .m-6 { margin: var(--space-6); } .m-8 { margin: var(--space-8); } .mt-0 { margin-top: var(--space-0); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: var(--space-0); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .ml-0 { margin-left: var(--space-0); } .ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); } .ml-4 { margin-left: var(--space-4); } .mr-0 { margin-right: var(--space-0); } .mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); } .mr-4 { margin-right: var(--space-4); } .mx-auto { margin-left: auto; margin-right: auto; } /* Padding */ .p-0 { padding: var(--space-0); } .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } .pt-0 { padding-top: var(--space-0); } .pt-2 { padding-top: var(--space-2); } .pt-4 { padding-top: var(--space-4); } .pt-6 { padding-top: var(--space-6); } .pt-8 { padding-top: var(--space-8); } .pb-0 { padding-bottom: var(--space-0); } .pb-2 { padding-bottom: var(--space-2); } .pb-4 { padding-bottom: var(--space-4); } .pb-6 { padding-bottom: var(--space-6); } .pb-8 { padding-bottom: var(--space-8); } .px-0 { padding-left: var(--space-0); padding-right: var(--space-0); } .px-2 { padding-left: var(--space-2); padding-right: var(--space-2); } .px-3 { padding-left: var(--space-3); padding-right: var(--space-3); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); } .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); } .py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); } .py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); } .py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); } .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); } /* ============================================ 7. TEXT UTILITIES ============================================ */ .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .text-4xl { font-size: var(--text-4xl); } .font-normal { font-weight: var(--font-normal); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .tracking-tight { letter-spacing: -0.025em; } .tracking-normal { letter-spacing: 0; } .tracking-wide { letter-spacing: 0.025em; } .tracking-wider { letter-spacing: 0.05em; } /* Text Colors */ .text-foreground { color: hsl(var(--foreground)); } .text-muted { color: hsl(var(--muted-foreground)); } .text-primary { color: hsl(var(--primary)); } .text-secondary { color: hsl(var(--secondary-foreground)); } .text-accent { color: hsl(var(--accent)); } .text-success { color: hsl(var(--success)); } .text-warning { color: hsl(var(--warning)); } .text-destructive { color: hsl(var(--destructive)); } .text-info { color: hsl(var(--info)); } .text-en-proceso { color: hsl(var(--en-proceso)); } .text-materia_prima { color: hsl(var(--materia-prima)); } .text-terminado { color: hsl(var(--terminado)); } /* ============================================ 8. BACKGROUND UTILITIES ============================================ */ .bg-background { background-color: hsl(var(--background)); } .bg-foreground { background-color: hsl(var(--foreground)); } .bg-card { background-color: hsl(var(--card)); } .bg-muted { background-color: hsl(var(--muted)); } .bg-primary { background-color: hsl(var(--primary)); } .bg-secondary { background-color: hsl(var(--secondary)); } .bg-accent { background-color: hsl(var(--accent)); } .bg-destructive { background-color: hsl(var(--destructive)); } .bg-success { background-color: hsl(var(--success)); } .bg-warning { background-color: hsl(var(--warning)); } .bg-info { background-color: hsl(var(--info)); } .bg-materia-prima { background-color: hsl(var(--materia-prima)); } .bg-en-proceso { background-color: hsl(var(--en-proceso)); } .bg-terminado { background-color: hsl(var(--terminado)); } /* ============================================ 9. BORDER UTILITIES ============================================ */ .border { border: 1px solid hsl(var(--border)); } .border-0 { border: none; } .border-t { border-top: 1px solid hsl(var(--border)); } .border-b { border-bottom: 1px solid hsl(var(--border)); } .border-l { border-left: 1px solid hsl(var(--border)); } .border-r { border-right: 1px solid hsl(var(--border)); } .border-primary { border-color: hsl(var(--primary)); } .border-muted { border-color: hsl(var(--muted)); } .rounded { border-radius: var(--radius); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: 9999px; } .rounded-none { border-radius: 0; } /* ============================================ 10. SHADOW UTILITIES ============================================ */ .shadow-none { box-shadow: none; } .shadow-xs { box-shadow: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05); } .shadow-sm { box-shadow: 0 1px 3px 0 hsl(var(--shadow-color) / 0.1), 0 1px 2px -1px hsl(var(--shadow-color) / 0.1); } .shadow-md { box-shadow: 0 4px 6px -1px hsl(var(--shadow-color) / 0.1), 0 2px 4px -2px hsl(var(--shadow-color) / 0.1); } .shadow-lg { box-shadow: 0 10px 15px -3px hsl(var(--shadow-color) / 0.1), 0 4px 6px -4px hsl(var(--shadow-color) / 0.1); } .shadow-xl { box-shadow: 0 20px 25px -5px hsl(var(--shadow-color) / 0.1), 0 8px 10px -6px hsl(var(--shadow-color) / 0.1); } /* ============================================ 11. BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; border-radius: var(--radius); font-size: var(--text-sm); font-weight: var(--font-medium); padding: var(--space-2) var(--space-4); height: 2.5rem; border: none; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Button Variants */ .btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover { background-color: hsl(var(--primary) / 0.9); } .btn-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .btn-secondary:hover { background-color: hsl(var(--secondary) / 0.8); } .btn-accent { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-accent:hover { background-color: hsl(var(--accent) / 0.9); } .btn-destructive { background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-destructive:hover { background-color: hsl(var(--destructive) / 0.9); } .btn-outline { background-color: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); } .btn-outline:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-ghost { background-color: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover { background-color: hsl(var(--accent) / 0.1); } .btn-link { background-color: transparent; color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 4px; } .btn-link:hover { text-decoration: underline; } /* Button Sizes */ .btn-sm { height: 2.25rem; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); } .btn-lg { height: 2.75rem; padding: var(--space-2) var(--space-8); font-size: var(--text-base); } .btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; } /* ============================================ 12. CARDS ============================================ */ .card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); } .card-elevated { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: 0 4px 6px -1px hsl(var(--shadow-color) / 0.1), 0 2px 4px -2px hsl(var(--shadow-color) / 0.1); } .card-interactive { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: 0 1px 3px 0 hsl(var(--shadow-color) / 0.1); transition: all var(--transition-base); cursor: pointer; } .card-interactive:hover { box-shadow: 0 10px 15px -3px hsl(var(--shadow-color) / 0.1), 0 4px 6px -4px hsl(var(--shadow-color) / 0.1); border-color: hsl(var(--primary) / 0.3); } .card-header { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); } .card-title { font-size: var(--text-2xl); font-weight: var(--font-semibold); line-height: var(--leading-tight); letter-spacing: -0.025em; margin: 0; } .card-description { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); margin: 0; } .card-content { padding: var(--space-6); padding-top: 0; } .card-footer { display: flex; align-items: center; padding: var(--space-6); padding-top: 0; } /* ============================================ 13. BADGES ============================================ */ .badge { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: 9999px; font-size: var(--text-xs); font-weight: var(--font-medium); } .badge-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .badge-secondary { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); } .badge-success { background-color: hsl(var(--success) / 0.1); color: hsl(var(--success)); } .badge-warning { background-color: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); } .badge-error { background-color: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); } .badge-info { background-color: hsl(var(--info) / 0.1); color: hsl(var(--info)); } .badge-outline { background-color: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); } /* ============================================ 14. ALERTS ============================================ */ .alert { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid; } .alert-title { font-weight: var(--font-semibold); margin-bottom: var(--space-1); } .alert-description { font-size: var(--text-sm); } .alert-success { background-color: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.3); color: hsl(var(--success)); } .alert-warning { background-color: hsl(var(--warning) / 0.1); border-color: hsl(var(--warning) / 0.3); color: hsl(var(--warning)); } .alert-error { background-color: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.3); color: hsl(var(--destructive)); } .alert-info { background-color: hsl(var(--info) / 0.1); border-color: hsl(var(--info) / 0.3); color: hsl(var(--info)); } /* ============================================ 15. FORM ELEMENTS ============================================ */ .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .label { font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--foreground)); } .input, .select, .textarea { display: flex; width: 100%; height: 2.5rem; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); background-color: hsl(var(--background)); border: 1px solid hsl(var(--input)); border-radius: var(--radius); color: hsl(var(--foreground)); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .input::placeholder, .textarea::placeholder { color: hsl(var(--muted-foreground)); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2); } .input:disabled, .select:disabled, .textarea:disabled { opacity: 0.5; cursor: not-allowed; } .textarea { height: auto; min-height: 5rem; resize: vertical; } .form-hint { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); } .form-error { font-size: var(--text-xs); color: hsl(var(--destructive)); } /* ============================================ 16. TABLES ============================================ */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table thead { background-color: hsl(var(--muted)); } .table th { padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--font-semibold); color: hsl(var(--muted-foreground)); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; } .table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid hsl(var(--border)); } .table tbody tr:hover { background-color: hsl(var(--muted) / 0.5); } /* Striped variant */ .table-striped tbody tr:nth-child(even) { background-color: hsl(var(--muted) / 0.3); } /* ============================================ 17. NAVIGATION ============================================ */ .nav-header { position: sticky; top: 0; z-index: 40; width: 100%; border-bottom: 1px solid hsl(var(--border)); background-color: hsl(var(--background) / 0.95); backdrop-filter: blur(8px); } .nav-container { display: flex; height: 3.5rem; align-items: center; padding: 0 var(--space-4); max-width: 1280px; margin: 0 auto; } .nav-brand { font-size: var(--text-lg); font-weight: var(--font-bold); color: hsl(var(--foreground)); text-decoration: none; } .nav-menu { display: flex; align-items: center; gap: var(--space-6); margin-left: var(--space-8); list-style: none; padding: 0; } .nav-link { font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); text-decoration: none; transition: color var(--transition-fast); } .nav-link:hover, .nav-link.active { color: hsl(var(--foreground)); } /* Sidebar Navigation */ .sidebar { width: 16rem; height: 100vh; background-color: hsl(var(--sidebar-background)); color: hsl(var(--sidebar-foreground)); border-right: 1px solid hsl(var(--sidebar-border)); padding: var(--space-4); position: fixed; left: 0; top: 0; } .sidebar-brand { font-size: var(--text-lg); font-weight: var(--font-bold); padding: var(--space-4); margin-bottom: var(--space-4); } .sidebar-nav { list-style: none; padding: 0; margin: 0; } .sidebar-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius); font-size: var(--text-sm); color: hsl(var(--sidebar-foreground)); text-decoration: none; transition: all var(--transition-fast); } .sidebar-link:hover { background-color: hsl(var(--sidebar-accent)); color: hsl(var(--sidebar-accent-foreground)); } .sidebar-link.active { background-color: hsl(var(--sidebar-primary)); color: hsl(var(--sidebar-primary-foreground)); } /* ============================================ 18. MISCELLANEOUS ============================================ */ .divider { height: 1px; background-color: hsl(var(--border)); margin: var(--space-4) 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hidden { display: none; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .w-full { width: 100%; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-scroll { overflow: scroll; } .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } .opacity-100 { opacity: 1; } .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .select-none { user-select: none; } /* Focus ring utility */ .focus-ring:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } /* Accent line decoration */ .accent-line { position: relative; padding-left: var(--space-4); } .accent-line::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; border-radius: 2px; background-color: hsl(var(--primary)); } /* ============================================ 19. RESPONSIVE UTILITIES ============================================ */ @media (min-width: 640px) { .sm\:flex { display: flex; } .sm\:hidden { display: none; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .md\:flex { display: flex; } .md\:hidden { display: none; } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:flex { display: flex; } } /* ============================================ ADMIN NAVBAR STYLES ============================================ */ /* Admin dropdown styling */ .navbar-nav .dropdown-menu { border: none; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); border-radius: 0.5rem; margin-top: 0.5rem; margin-left: 1rem; } .navbar-nav .dropdown-item { padding: 0.5rem 1rem; font-size: 0.875rem; transition: all 0.2s ease; } .navbar-nav .dropdown-item:hover { background-color: #f8f9fa; color: #0d6efd; transform: translateX(2px); } .navbar-nav .dropdown-item i { width: 16px; text-align: center; } /* Admin dropdown toggle styling */ .navbar-nav .dropdown-toggle { border-radius: 0.375rem; padding: 0.5rem 1rem; margin-left: 0.5rem; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); } .navbar-nav .dropdown-toggle:hover { transform: translateY(-1px); box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); border-color: rgba(255, 255, 255, 0.5); } /* User dropdown styling */ .navbar-nav .dropdown-menu.dropdown-menu-end { right: 0; left: auto; } /* Active state for admin items */ .navbar-nav .dropdown-item.active { background-color: #e7f1ff; color: #0d6efd; font-weight: 500; } /* Divider styling */ .dropdown-divider { margin: 0.5rem 0; border-color: #e9ecef; } /* Mobile responsiveness */ @media (max-width: 768px) { .navbar-nav .dropdown-toggle { width: 100%; margin-left: 0; margin-top: 0.5rem; } .navbar-nav .dropdown-menu { position: static !important; transform: none !important; border: none; box-shadow: none; background-color: rgba(255, 255, 255, 0.1); } .navbar-nav .dropdown-item { color: rgba(255, 255, 255, 0.8); padding-left: 2rem; } .navbar-nav .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.1); color: white; } } /* Admin badge indicator */ .navbar-nav .dropdown-toggle::after { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: linear-gradient(135deg, #28a745 0%, #20c997 100%); border-radius: 50%; border: 2px solid white; } /* Animation for dropdown */ .navbar-nav .dropdown-menu { animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 1024px) { .lg\:hidden { display: none; } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }