/* * MyPhysioDesk brand theme * Overrides Tabler's Bootstrap 5 CSS variables with brand tokens. * Loaded after the Tabler CDN stylesheet in layouts/app.blade.php and * layouts/auth.blade.php, so these declarations win the cascade. */ :root, [data-bs-theme="light"] { /* Brand */ --mpd-primary: #0891b2; --mpd-primary-dark: #0e7490; --mpd-dark: #0f172a; --bs-primary: #0891b2; --bs-primary-rgb: 8, 145, 178; --primary-color: #0891b2; --primary-light: #67c8df; --primary-dark: #0e7490; /* Semantic */ --success-color: #10B981; --warning-color: #F59E0B; --danger-color: #EF4444; --info-color: #3B82F6; --bs-success: #10B981; --bs-success-rgb: 16, 185, 129; --bs-warning: #F59E0B; --bs-warning-rgb: 245, 158, 11; --bs-danger: #EF4444; --bs-danger-rgb: 239, 68, 68; --bs-info: #3B82F6; --bs-info-rgb: 59, 130, 246; /* Neutral */ --bg-primary: #FFFFFF; --bg-secondary: #F9FAFB; --bg-tertiary: #F3F4F6; --text-primary: #111827; --text-secondary: #6B7280; --border-color: #E5E7EB; --bs-body-bg: var(--bg-secondary); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); --bs-secondary-color: var(--text-secondary); /* Sidebar */ --sidebar-bg: #FFFFFF; --sidebar-text: #111827; --sidebar-border: #E5E7EB; --sidebar-width: 15rem; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); --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); /* 8px grid spacing scale, used by the .mpd-gap-* / .mpd-p-* utilities below */ --mpd-space-1: 0.5rem; /* 8px */ --mpd-space-2: 1rem; /* 16px */ --mpd-space-3: 1.5rem; /* 24px */ --mpd-space-4: 2rem; /* 32px */ --mpd-space-5: 3rem; /* 48px */ } /* * Dark mode structure only, per Phase 8 scope ("support future Dark Mode: * structure only, implementation later"). Tabler toggles dark mode via * data-bs-theme="dark" on ; these tokens are ready for that switch * but nothing in this phase sets the attribute or renders a toggle control. */ [data-bs-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #111827; --bg-tertiary: #1f2937; --text-primary: #F9FAFB; --text-secondary: #9CA3AF; --border-color: #1f2937; --bs-body-bg: var(--bg-secondary); --bs-body-color: var(--text-primary); --bs-border-color: var(--border-color); --sidebar-bg: #0f172a; --sidebar-text: #F9FAFB; --sidebar-border: #1f2937; } body { background-color: var(--bg-secondary); color: var(--text-primary); } /* ---------- Layout shell ---------- */ .mpd-sidebar { width: var(--sidebar-width); background-color: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); color: var(--sidebar-text); } .mpd-sidebar-brand { /* min-height, not height: gives the two-line title/subtitle stack room to grow instead of clipping if it ever needs more vertical space. */ min-height: 3.75rem; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; } .mpd-sidebar-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; } .mpd-sidebar-brand-logo { max-width: 100%; max-height: 100%; /* contain, not cover: preserves the whole logo without cropping, regardless of its native aspect ratio. */ object-fit: contain; } .mpd-auth-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin: 0 auto 0.5rem; } .mpd-auth-brand-logo { max-width: 100%; max-height: 100%; object-fit: contain; } .mpd-sidebar-brand-text { /* Flex items default to min-width: auto, which blocks text-overflow from working and can cause silent clipping instead of a clean ellipsis -- min-width: 0 is required for the overflow rules below to actually take effect. */ min-width: 0; } .mpd-sidebar-brand-title { font-size: 1rem; font-weight: 700; /* 1.2, not Bootstrap's lh-1 (line-height: 1): equal to font-size leaves no room for descenders (the "y" in "MyPhysioDesk"), which is what read as clipped/compressed text. */ line-height: 1.2; color: var(--mpd-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mpd-sidebar-brand-subtitle { font-size: 0.75rem; line-height: 1.3; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mpd-sidebar .nav-link { color: var(--text-secondary); border-radius: 0.5rem; margin-bottom: 0.25rem; font-weight: 500; } .mpd-sidebar .nav-link.active, .mpd-sidebar .nav-link:hover { color: var(--mpd-primary); background-color: rgba(8, 145, 178, 0.08); } .mpd-sidebar .nav-link i { width: 1.25rem; } @media (max-width: 991.98px) { .mpd-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1045; transform: translateX(-100%); transition: transform 0.2s ease-in-out; } .mpd-sidebar.show { transform: translateX(0); box-shadow: var(--shadow-xl); } } .mpd-navbar { background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); /* Must outrank .mpd-page-header's stacking context (below), or an open dropdown here gets painted over by the page header despite being later in the DOM -- the navbar is persistent global chrome and should always sit above in-page content, sticky or not. */ z-index: 1030; } .mpd-page-header { background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); z-index: 1015; } .mpd-sticky-header { position: sticky; top: 0; } /* ---------- Cards ---------- */ .mpd-card, .card { border: 1px solid var(--border-color); border-radius: 0.75rem; box-shadow: var(--shadow-sm); } .mpd-card-hover:hover { box-shadow: var(--shadow-md); transition: box-shadow 0.15s ease-in-out; } /* ---------- KPI tiles ---------- */ .mpd-kpi-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; } /* ---------- Badges ---------- */ .mpd-badge { font-weight: 500; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; } .mpd-badge-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; display: inline-block; } /* ---------- Empty states ---------- */ .mpd-empty-state { padding: var(--mpd-space-5) var(--mpd-space-3); text-align: center; color: var(--text-secondary); } .mpd-empty-state i { font-size: 2.5rem; color: var(--border-color); } /* ---------- Skeleton loading ---------- */ .mpd-skeleton { background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 37%, var(--bg-tertiary) 63%); background-size: 400% 100%; animation: mpd-skeleton-loading 1.4s ease infinite; border-radius: 0.375rem; } @keyframes mpd-skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------- Timeline ---------- */ .mpd-timeline { position: relative; padding-left: 2.25rem; } .mpd-timeline::before { content: ""; position: absolute; left: 0.6rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background-color: var(--border-color); } .mpd-timeline-item { position: relative; padding-bottom: var(--mpd-space-3); } .mpd-timeline-item:last-child { padding-bottom: 0; } .mpd-timeline-dot { position: absolute; left: -2.25rem; top: 0.15rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #fff; background-color: var(--mpd-primary); border: 2px solid var(--bg-primary); } /* ---------- Pipeline / Kanban ---------- */ .mpd-pipeline-board { display: flex; gap: var(--mpd-space-2); overflow-x: auto; padding-bottom: var(--mpd-space-2); } .mpd-pipeline-column { flex: 0 0 18rem; background-color: var(--bg-tertiary); border-radius: 0.75rem; padding: var(--mpd-space-2); max-height: calc(100vh - 16rem); display: flex; flex-direction: column; } .mpd-pipeline-column-body { overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; } /* ---------- Responsive table -> card stacking ---------- */ @media (max-width: 767.98px) { .mpd-table-responsive-stack thead { display: none; } .mpd-table-responsive-stack tbody tr { display: block; border: 1px solid var(--border-color); border-radius: 0.75rem; margin-bottom: 0.75rem; padding: 0.75rem 1rem; box-shadow: var(--shadow-sm); } .mpd-table-responsive-stack tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; border: 0 !important; padding: 0.4rem 0 !important; } .mpd-table-responsive-stack tbody td::before { content: attr(data-label); font-weight: 600; color: var(--text-secondary); text-align: left; } } /* No horizontal scrolling anywhere except explicitly-scrollable regions */ body { overflow-x: hidden; } .mpd-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Touch-friendly controls */ @media (max-width: 767.98px) { .btn, .form-control, .form-select { min-height: 2.75rem; } } /* ---------- Sortable table headers ---------- */ .mpd-th-sort { user-select: none; } .mpd-th-sort-link { display: inline-flex; align-items: center; gap: 0.35rem; color: inherit; text-decoration: none; } .mpd-th-sort-link:hover { color: var(--mpd-primary); } .mpd-th-sort-link i { font-size: 0.8rem; color: var(--text-secondary); } .mpd-th-sort-active, .mpd-th-sort-active .mpd-th-sort-link { color: var(--mpd-primary); } .mpd-th-sort-active .mpd-th-sort-link i { color: var(--mpd-primary); } /* ---------- Bulk action toolbar ---------- */ .mpd-bulk-toolbar { position: sticky; bottom: 0; z-index: 1020; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0.75rem; box-shadow: var(--shadow-md); padding: var(--mpd-space-2); padding-bottom: calc(var(--mpd-space-2) + env(safe-area-inset-bottom)); margin: var(--mpd-space-2) 0; } /* ---------- PWA / standalone safe areas ---------- Padding for the notch/home-indicator on devices with rounded corners or a gesture bar, active once installed and running in `display: standalone` (env() resolves to 0 in a normal browser tab, so this is a no-op there). */ .mpd-navbar { min-height: 3.75rem; padding-top: env(safe-area-inset-top); } @media (max-width: 991.98px) { .mpd-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } main.flex-fill > .container-xl { padding-bottom: calc(var(--mpd-space-3) + env(safe-area-inset-bottom)); } .mpd-sticky-header.mpd-page-header { top: env(safe-area-inset-top); }