/* ============================================================================ JaiPar Worksheet — Design System (theme.css) ---------------------------------------------------------------------------- Single source of truth for colour, typography, spacing, elevation and the core reusable components. Loaded LAST in so it refines the Material Dashboard / Bootstrap base without forking the template. Brand anchor: #180858 (sampled from the JaiPar wordmark). Neutral ramp: matches the slate values already used across pages, so migrating hard-coded hex to tokens is visually lossless. Conventions: --brand-* brand indigo ramp (50 lightest → 900 = logo) --ink-* neutral text / border / surface ramp --success/-danger/-warning/-info semantic ramps Component classes are namespaced `.jp-` to avoid clashing with the template. ============================================================================ */ :root { /* ---- Brand (indigo, anchored on logo #180858) ---------------------- */ --brand-50: #f1effb; --brand-100: #e3ddf7; --brand-200: #c7bcef; --brand-300: #a495e2; --brand-400: #7e6bd0; --brand-500: #5c47ba; /* links, accents on light surfaces */ --brand-600: #47349a; /* primary action fill */ --brand-700: #362879; /* primary hover / pressed */ --brand-800: #261a5c; --brand-900: #180858; /* logo — deepest anchor */ --brand-rgb: 71, 52, 154; /* = --brand-600, for translucency */ /* ---- Neutral ink ramp (== existing slate palette) ------------------ */ --ink-900: #0f172a; --ink-800: #1e293b; --ink-700: #334155; --ink-600: #475569; --ink-500: #64748b; --ink-400: #94a3b8; --ink-300: #cbd5e1; --ink-200: #e2e8f0; --ink-100: #f1f5f9; --ink-50: #f8fafc; /* ---- Surfaces ------------------------------------------------------ */ --surface: #ffffff; --surface-subtle: #f8fafc; --canvas: #f3f5fb; /* app background behind cards */ --border: #e2e8f0; --border-strong: #cbd5e1; /* ---- Semantic ------------------------------------------------------ */ --success-700: #047857; --success-600: #059669; --success-500: #10b981; --success-50: #d1fae5; --success-text:#065f46; --danger-700: #b91c1c; --danger-600: #dc2626; --danger-500: #ef4444; --danger-50: #fee2e2; --danger-text: #991b1b; --warning-600: #d97706; --warning-500: #f59e0b; --warning-50: #fef3c7; --warning-text:#92400e; --info-600: #0277bd; --info-500: #03a9f4; --info-50: #e1f5fe; --info-text: #075985; /* Text roles */ --text-strong: var(--ink-900); --text: var(--ink-800); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-on-brand: #ffffff; /* ---- Typography ---------------------------------------------------- */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal:1.6; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---- Spacing (4px base) ------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; /* ---- Radius -------------------------------------------------------- */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ---- Elevation (soft, low-alpha) ---------------------------------- */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.16), 0 6px 12px -6px rgba(15, 23, 42, 0.08); /* ---- Focus / interaction ------------------------------------------ */ --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.35); --t-fast: 0.15s ease; --t: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Bootstrap variable bridges so template components inherit the brand */ --bs-primary: var(--brand-600); --bs-primary-rgb: var(--brand-rgb); --bs-body-font-family: var(--font-sans); --bs-body-color: var(--ink-800); --bs-border-radius: var(--radius-sm); } /* ============================================================================ Base ============================================================================ */ body.g-sidenav-show, body { font-family: var(--font-sans); color: var(--text); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-strong); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.015em; } a { color: var(--brand-600); } a:hover { color: var(--brand-700); } hr { color: var(--border); opacity: 1; } ::selection { background: var(--brand-200); color: var(--brand-900); } /* ---- Accessible focus: visible ring for keyboard users ---------------- */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-link:focus-visible, .page-link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Don't double-draw the mouse-focus ring the template adds */ .btn:focus:not(:focus-visible) { box-shadow: none; } /* Screen-reader only helper (if template's is absent) */ .jp-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Subtle, consistent scrollbars ------------------------------------ */ * { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; } /* ============================================================================ App chrome — sidebar, navbar, footer (brand-aligned) ============================================================================ */ body { background-color: var(--canvas) !important; } .sidenav .navbar-nav .nav-link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); border-radius: var(--radius-sm); transition: background-color var(--t), color var(--t); } .sidenav .navbar-nav > .nav-item > .nav-link:hover { background-color: var(--brand-50); color: var(--brand-700); } /* Active top-level item → brand gradient (replaces template's dark gradient) */ .sidenav .navbar-nav .nav-link.active.bg-gradient-dark { background-image: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%) !important; color: var(--text-on-brand) !important; box-shadow: var(--shadow-sm); } .sidenav .navbar-nav .nav-link.active.bg-gradient-dark .material-symbols-rounded { opacity: 1 !important; } /* Active sub-item */ .sidenav .navbar-nav .nav-link.active.text-primary { color: var(--brand-700) !important; } .sidenav .nav-link .material-symbols-rounded { font-size: 20px; } .navbar-main .breadcrumb-item, .navbar-main .breadcrumb-item a { font-weight: var(--fw-medium); } .navbar-main .breadcrumb-item.active { color: var(--text-strong); } .footer .copyright { font-size: var(--fs-sm); color: var(--text-muted) !important; } .footer a { color: var(--brand-700) !important; } .footer .fa-heart { color: var(--danger-500); } /* ============================================================================ Buttons ============================================================================ */ .btn { font-weight: var(--fw-semibold); letter-spacing: 0; border-radius: var(--radius-sm); transition: transform var(--t-fast), box-shadow var(--t), background-color var(--t), border-color var(--t); } .btn:active { transform: translateY(1px); } /* Brand button reusable class */ .jp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.55rem 1.1rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform var(--t-fast), box-shadow var(--t), background-color var(--t), border-color var(--t), color var(--t); } .jp-btn:active { transform: translateY(1px); } .jp-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; } .jp-btn .material-symbols-rounded { font-size: 18px; } .jp-btn-primary { background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%); color: var(--text-on-brand) !important; box-shadow: var(--shadow-sm); } .jp-btn-primary:hover { background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%); box-shadow: var(--shadow-md); color: #fff !important; } .jp-btn-secondary { background: var(--surface); color: var(--brand-700) !important; border-color: var(--border-strong); } .jp-btn-secondary:hover { border-color: var(--brand-400); background: var(--brand-50); } .jp-btn-ghost { background: transparent; color: var(--ink-600) !important; border-color: transparent; } .jp-btn-ghost:hover { background: var(--ink-100); color: var(--ink-800) !important; } .jp-btn-danger { background: var(--danger-600); color: #fff !important; } .jp-btn-danger:hover { background: var(--danger-700); } /* Bridge Bootstrap primary buttons onto the brand */ .btn-primary, .bg-gradient-primary, .btn.bg-gradient-primary { background-image: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%) !important; border-color: transparent !important; color: #fff !important; } .btn-primary:hover { background-image: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%) !important; } .btn-outline-primary { color: var(--brand-700) !important; border-color: var(--brand-400) !important; } .btn-outline-primary:hover { background-color: var(--brand-600) !important; border-color: var(--brand-600) !important; color: #fff !important; } .text-primary { color: var(--brand-600) !important; } .bg-primary { background-color: var(--brand-600) !important; } /* ============================================================================ Cards & surfaces ============================================================================ */ .jp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .jp-card-pad { padding: var(--sp-6); } /* Gentle refinement of template cards */ .card { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } /* ============================================================================ Page header band (dark brand gradient) — reusable across list/detail pages ============================================================================ */ .jp-page-header { background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-900) 100%); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6); box-shadow: var(--shadow-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); color: #fff; } .jp-page-header__title h1, .jp-page-header__title h2, .jp-page-header__title h3, .jp-page-header__title h4 { color: #fff; font-weight: var(--fw-extrabold); margin: 0 0 2px; font-size: var(--fs-xl); } .jp-page-header__title p { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-sm); margin: 0; } .jp-page-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* ============================================================================ Badges & status pills ============================================================================ */ .jp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.4; } .jp-badge--success { background: var(--success-50); color: var(--success-text); } .jp-badge--danger { background: var(--danger-50); color: var(--danger-text); } .jp-badge--warning { background: var(--warning-50); color: var(--warning-text); } .jp-badge--info { background: var(--info-50); color: var(--info-text); } .jp-badge--neutral { background: var(--ink-100); color: var(--ink-600); } .jp-badge--brand { background: var(--brand-50); color: var(--brand-700); } .jp-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } .jp-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .jp-status--success { background: var(--success-50); color: var(--success-text); } .jp-status--warning { background: var(--warning-50); color: var(--warning-text); } .jp-status--info { background: var(--info-50); color: var(--info-text); } .jp-status--neutral { background: var(--ink-100); color: var(--ink-600); } /* ============================================================================ Forms ============================================================================ */ .form-control, .form-select { font-size: var(--fs-base); color: var(--text); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--t), box-shadow var(--t); } .form-control::placeholder { color: var(--text-faint); } .form-control:focus, .form-select:focus { border-color: var(--brand-400); box-shadow: var(--focus-ring); } .form-label, label.form-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-700); margin-bottom: 0.35rem; } .jp-required::after { content: ' *'; color: var(--danger-600); font-weight: var(--fw-bold); } /* Select2 alignment with the token system */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { border: 1.5px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important; min-height: 2.7rem; } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--brand-400) !important; box-shadow: var(--focus-ring); } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--brand-600) !important; border-color: var(--brand-700) !important; color: #fff !important; border-radius: var(--radius-sm) !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--brand-600) !important; } input[type="file"]::file-selector-button { background-color: var(--ink-100); color: var(--ink-700); border: 1px solid var(--border-strong); padding: 6px 14px; margin-right: 10px; cursor: pointer; border-radius: var(--radius-sm); font-weight: var(--fw-semibold); transition: background-color var(--t); } input[type="file"]::file-selector-button:hover { background-color: var(--ink-200); } /* Collapsible form section header (used by add_* forms) */ .btn-collapse-header { background-color: var(--brand-800) !important; color: #fff !important; border-radius: var(--radius-sm) !important; } .btn-collapse-header:hover, .btn-collapse-header:focus { background-color: var(--brand-900) !important; color: #fff !important; } /* ============================================================================ Tables (reusable .jp-table + gentle refinement of DataTables) ============================================================================ */ .jp-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .jp-table-scroll { overflow-x: auto; } .jp-table { width: 100%; border-collapse: collapse; margin: 0; } .jp-table thead th { background: var(--surface-subtle); color: var(--ink-600); font-size: var(--fs-xs); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: 0.03em; padding: 14px 16px; text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; } .jp-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--ink-100); font-size: var(--fs-sm); color: var(--ink-700); vertical-align: middle; } .jp-table tbody tr:last-child td { border-bottom: none; } .jp-table tbody tr { transition: background var(--t-fast); } .jp-table tbody tr:hover { background: var(--surface-subtle); } /* DataTables base refinement */ table.dataTable thead th { color: var(--ink-600); font-weight: var(--fw-bold); border-bottom: 2px solid var(--border) !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.35rem 0.6rem; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--brand-600) !important; border-color: var(--brand-600) !important; color: #fff !important; border-radius: var(--radius-sm); } /* ============================================================================ Avatars (initials / photos) — used by task & employee views ============================================================================ */ .jp-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); object-fit: cover; box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: var(--fw-extrabold); color: #fff; text-transform: uppercase; letter-spacing: -0.5px; } /* ============================================================================ Empty states ============================================================================ */ .jp-empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-faint); } .jp-empty .material-symbols-rounded { font-size: 2.5rem; color: var(--border-strong); display: block; margin-bottom: var(--sp-2); } /* ============================================================================ Stat tiles (dashboards) ============================================================================ */ .jp-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); } .jp-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .jp-stat__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); } .jp-stat__value { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); color: var(--text-strong); line-height: 1.1; } .jp-stat__icon { width: 48px; height: 48px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: #fff; } /* ============================================================================ Utilities ============================================================================ */ .jp-text-muted { color: var(--text-muted) !important; } .jp-text-strong { color: var(--text-strong) !important; } .jp-surface { background: var(--surface); } .jp-shadow-sm { box-shadow: var(--shadow-sm); } .jp-shadow-md { box-shadow: var(--shadow-md); } .jp-rounded { border-radius: var(--radius-lg); } /* ============================================================================ Responsive ============================================================================ */ @media (max-width: 991.98px) { .jp-page-header { padding: var(--sp-4) var(--sp-5); } .jp-page-header__actions { width: 100%; } .jp-stat__value { font-size: var(--fs-2xl); } } @media (max-width: 575.98px) { .jp-page-header { flex-direction: column; align-items: flex-start; } .jp-btn, .btn { width: auto; } .jp-table thead th, .jp-table tbody td { padding: 11px 12px; } } /* ============================================================================ Motion preferences (accessibility) ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }