/* ============================================================ CAREGIVER APP — RESPONSIVE FOUNDATION ============================================================ Replaces kiosk-locked 1024×600 layouts with a fluid system that adapts to any device. Kiosk becomes ONE breakpoint, not the entire design. BREAKPOINTS: --phone: < 576px (single column, large tap targets) --tablet: 576–1023px (2 columns, comfortable spacing) --kiosk: 1024px (the Pi kiosk @ 1024×600) --desktop: ≥ 1280px (wider panels, more data density) USAGE: 1. Add responsive.css AFTER your existing app CSS 2. Wrap page content in .page-container 3. Use .card-grid for auto-flowing card layouts 4. Use .sticky-actions for bottom-pinned buttons 5. Add .kiosk-mode class to when in kiosk ============================================================ */ /* ----- CSS Custom Properties (Design Tokens) --------------- Canonical token declaration per LAYOUT_CONTRACT.md (post-PR-52): responsive.css is the authoritative canonical CSS. Tokens live here. base.html and caregiver_base.html no longer declare their own :root blocks (consolidated by PR #53). Token taxonomy follows LAYOUT_CONTRACT §§2-6: §2 containers → --container-max §3 touch targets → --tap-min, --tap-comfortable, --tap-primary §4 spacing → --space-xs..2xl + --space-sm-md (PR 0 NEW) §5 typography → --text-xs..3xl + --line-tight/normal/loose §6 z-index → --z-base..tooltip Shadow tokens split into two forms per PR #53 Codex P2 fix: --shadow-sm/md/lg FULL box-shadow specs (offsets + blur + color). For bare consumers like `.card { box-shadow: var(--shadow-md) }` in this file and similar bare usages. --shadow-sm-color/md-color/lg-color COLOR-only rgba() values. For offset-prefixed consumers like `box-shadow: 0 2px 5px var(--shadow-md-color)` in templates. Until template migration (PR 1.6), the bare token names (without `-color` suffix) are used by offset- prefixed consumers in templates and produce broken composition — known pre-existing condition tracked separately. */ :root { /* Spacing — §4 */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-sm-md: 0.75rem; /* 12px — NEW per PR 0 §4 (compact card padding) */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* Typography — §5 */ --text-xs: 0.75rem; /* 12px — NEW per PR 0 §5 (badges, timestamps) */ --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 */ /* Line-height — NEW per PR 0 §5 */ --line-tight: 1.2; /* headings, badges, single-line labels */ --line-normal: 1.5; /* body text (default) */ --line-loose: 1.7; /* long-form prose */ /* Touch targets — §3 (operational kiosk safety) */ --tap-min: 44px; /* MUST tier — all interactive elements */ --tap-comfortable: 48px; /* NEW per PR 0 §3 — SHOULD tier, kiosk .btn */ --tap-primary: 56px; /* NEW per PR 0 §3 — kiosk primary actions */ /* Containers — §2 */ --container-max: 1200px; /* Z-index — §6 */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-header: 300; --z-dropdown: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows — split form per PR #53 Codex P2 fix (see header comment) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 2px 8px rgba(0,0,0,0.1); --shadow-lg: 0 4px 16px rgba(0,0,0,0.12); --shadow-sm-color: rgba(0,0,0,0.06); --shadow-md-color: rgba(0,0,0,0.1); --shadow-lg-color: rgba(0,0,0,0.12); /* Transition defaults */ --ease-default: 200ms ease; /* Surface — color tokens (light-mode defaults; dark-mode overrides below) */ --bg-primary: #f5f5f5; --bg-secondary: #ffffff; --bg-tertiary: #f8f9fa; --text-primary: #333; --text-secondary: #666; --text-tertiary: #888; --border-color: #e0e0e0; --border-light: #f0f0f0; --shadow: rgba(0,0,0,0.05); /* color-only; heavily used by offset-prefixed template consumers */ --accent-primary: #667eea; --accent-secondary: #764ba2; --hover-bg: #f8f9fa; /* Caregiver-surface extras */ --caregiver-accent: #20c997; --status-success-bg: #d4edda; --status-success-fg: #155724; --status-error-bg: #f8d7da; --status-error-fg: #721c24; --status-warning-bg: #fff3cd; --status-warning-fg: #856404; --status-danger: #dc3545; --status-danger-border: #dc3545; } /* Dark-mode overrides — applies when */ body.dark-mode { --bg-primary: #1a1a1a; --bg-secondary: #2d2d2d; --bg-tertiary: #3a3a3a; --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-tertiary: #888; --border-color: #404040; --border-light: #353535; --shadow: rgba(0,0,0,0.3); --accent-primary: #7b8ff5; --accent-secondary: #8b5fc7; --hover-bg: #3a3a3a; --caregiver-accent: #38d9a9; --status-success-bg: #1a3d2a; --status-success-fg: #a3e4bc; --status-error-bg: #3d1a1a; --status-error-fg: #f5c6cb; --status-warning-bg: #3d3520; --status-warning-fg: #f5e6a3; --status-danger: #f87171; --status-danger-border: #b91c1c; } /* ============================================================= PRIMITIVE 1: Page Container Fluid width with max constraint. Replaces fixed-width wrappers. ============================================================= */ .page-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-md); padding-block: var(--space-md); box-sizing: border-box; } /* Tighter padding on phones */ @media (max-width: 575px) { .page-container { padding-inline: var(--space-sm); padding-block: var(--space-sm); } } /* Kiosk: tighter padding, but let body handle the scroll. Constraining max-height HERE would create nested scroll containers and break sticky actions. Instead, the kiosk viewport is locked at the body/html level below. */ .kiosk-mode .page-container { max-width: 1024px; padding-block: var(--space-sm); } /* Kiosk viewport lock — single scroll region at the top level */ .kiosk-mode { max-width: 1024px; max-height: 600px; overflow-x: hidden; overflow-y: auto; margin: 0 auto; } /* ============================================================= PRIMITIVE 2: Card Grid Auto-flowing responsive grid. Cards fill available space. No media queries needed — CSS Grid handles it. ============================================================= */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } /* Denser grid for dashboard summary widgets */ .card-grid--dense { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); } /* Force single column (useful on phone or narrow contexts) */ .card-grid--single { grid-template-columns: 1fr; } /* Two-column max (good for forms, side-by-side comparisons) */ .card-grid--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 800px; } @media (max-width: 575px) { .card-grid { grid-template-columns: 1fr; } } /* ============================================================= PRIMITIVE 3: Card The basic content container. Replaces hardcoded panel divs. ============================================================= */ .card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-md); box-sizing: border-box; } .card--bordered { border: 1px solid #e2e8f0; box-shadow: none; } .card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); gap: var(--space-sm); flex-wrap: wrap; } .card__title { font-size: var(--text-lg); font-weight: 600; margin: 0; } .card__body { /* No special styling — just a semantic wrapper */ } /* Compact card for kiosk density */ .kiosk-mode .card { padding: var(--space-sm); } .kiosk-mode .card__title { font-size: var(--text-base); } /* ============================================================= PRIMITIVE 4: Sticky Footer Actions Bottom-pinned action bar for Save / Next / End Shift etc. Always accessible, never scrolled offscreen. ============================================================= */ .sticky-actions { position: sticky; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e2e8f0; padding: var(--space-sm) var(--space-md); display: flex; justify-content: flex-end; gap: var(--space-sm); flex-wrap: wrap; z-index: var(--z-sticky); box-shadow: 0 -2px 8px rgba(0,0,0,0.06); } /* On phone, stack buttons full-width */ @media (max-width: 575px) { .sticky-actions { flex-direction: column; padding: var(--space-sm); } .sticky-actions .btn { width: 100%; justify-content: center; } } /* Kiosk: bigger action buttons */ .kiosk-mode .sticky-actions .btn { min-height: 52px; font-size: var(--text-lg); padding-inline: var(--space-xl); } /* ============================================================= PRIMITIVE 5: Responsive Table Wrapper Tables scroll horizontally on small screens instead of breaking the layout. Optional card-style on mobile. ============================================================= */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive table { width: 100%; border-collapse: collapse; white-space: nowrap; } .table-responsive th, .table-responsive td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid #e2e8f0; } /* Kiosk: compact table rows */ .kiosk-mode .table-responsive th, .kiosk-mode .table-responsive td { padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); } /* ============================================================= BUTTONS — Responsive tap targets ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--space-sm) var(--space-md); border: none; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: background var(--ease-default), box-shadow var(--ease-default); text-decoration: none; line-height: 1.2; box-sizing: border-box; } .btn--primary { background: #2563eb; color: #fff; } .btn--primary:hover { background: #1d4ed8; } .btn--success { background: #16a34a; color: #fff; } .btn--success:hover { background: #15803d; } .btn--danger { background: #dc2626; color: #fff; } .btn--danger:hover { background: #b91c1c; } .btn--secondary { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; } .btn--secondary:hover { background: #e2e8f0; } .btn--lg { min-height: 52px; padding: var(--space-md) var(--space-lg); font-size: var(--text-lg); } /* Kiosk: all buttons get bigger tap targets */ .kiosk-mode .btn { min-height: 48px; font-size: var(--text-lg); } /* ============================================================= FORM CONTROLS — Responsive inputs ============================================================= */ .form-group { margin-bottom: var(--space-md); } .form-group label { display: block; margin-bottom: var(--space-xs); font-weight: 500; font-size: var(--text-sm); color: #475569; } .form-control { width: 100%; min-height: var(--tap-min); padding: var(--space-sm) var(--space-md); border: 1px solid #cbd5e1; border-radius: var(--radius-sm); font-size: var(--text-base); box-sizing: border-box; transition: border-color var(--ease-default); } .form-control:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } /* Kiosk: larger inputs */ .kiosk-mode .form-control { min-height: 48px; font-size: var(--text-lg); } /* Form row: side-by-side on tablet+, stacked on phone */ .form-row { display: flex; gap: var(--space-md); flex-wrap: wrap; } .form-row > .form-group { flex: 1; min-width: 200px; } @media (max-width: 575px) { .form-row > .form-group { min-width: 100%; } } /* ============================================================= LAYOUT HELPERS ============================================================= */ /* Flex row with wrap */ .flex-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; } /* Stack: vertical flex */ .stack { display: flex; flex-direction: column; gap: var(--space-md); } .stack--sm { gap: var(--space-sm); } .stack--lg { gap: var(--space-lg); } /* Split layout: sidebar + main (collapses on phone/tablet) */ .split-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-lg); } @media (max-width: 1023px) { .split-layout { grid-template-columns: 1fr; } } /* Hide/show per breakpoint */ .hide-phone { } .hide-tablet { } .hide-kiosk { } .show-phone-only { display: none; } .show-tablet-only { display: none; } .show-kiosk-only { display: none; } @media (max-width: 575px) { .hide-phone { display: none !important; } .show-phone-only { display: block !important; } } @media (min-width: 576px) and (max-width: 1023px) { .hide-tablet { display: none !important; } .show-tablet-only { display: block !important; } } /* Kiosk-only visibility is controlled by .kiosk-mode class */ .kiosk-mode .hide-kiosk { display: none !important; } .kiosk-mode .show-kiosk-only { display: block !important; } /* ============================================================= NAV — Responsive navigation pattern ============================================================= */ .app-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); background: #1e293b; color: #fff; flex-wrap: wrap; gap: var(--space-sm); } .app-nav__brand { font-weight: 700; font-size: var(--text-lg); white-space: nowrap; } .app-nav__links { display: flex; gap: var(--space-xs); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .app-nav__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--space-xs) var(--space-sm); color: #cbd5e1; text-decoration: none; border-radius: var(--radius-sm); font-size: var(--text-sm); transition: background var(--ease-default); } .app-nav__links a:hover, .app-nav__links a.active { background: rgba(255,255,255,0.1); color: #fff; } /* Phone: hamburger menu territory — hide links, show toggle */ @media (max-width: 575px) { .app-nav__links { display: none; width: 100%; flex-direction: column; } .app-nav__links.open { display: flex; } .app-nav__toggle { display: inline-flex; min-height: var(--tap-min); min-width: var(--tap-min); align-items: center; justify-content: center; background: none; border: none; color: #fff; font-size: var(--text-xl); cursor: pointer; } } @media (min-width: 576px) { .app-nav__toggle { display: none; } } /* Kiosk: bigger nav links */ .kiosk-mode .app-nav__links a { min-height: 48px; font-size: var(--text-base); padding: var(--space-sm) var(--space-md); } /* ============================================================= STATUS BADGES / PILLS ============================================================= */ .badge { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); font-weight: 500; border-radius: 9999px; white-space: nowrap; } .badge--green { background: #dcfce7; color: #166534; } .badge--yellow { background: #fef9c3; color: #854d0e; } .badge--red { background: #fecaca; color: #991b1b; } .badge--blue { background: #dbeafe; color: #1e40af; } .badge--gray { background: #f1f5f9; color: #475569; } /* ============================================================= QUICK-LOG BUTTONS (Health Tracker style) Large, easy-tap buttons for one-tap actions ============================================================= */ .quick-log-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-sm); } .quick-log-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 80px; padding: var(--space-md); border: 2px solid #e2e8f0; border-radius: var(--radius-lg); background: #fff; cursor: pointer; font-size: var(--text-base); font-weight: 500; transition: all var(--ease-default); } .quick-log-btn:hover { border-color: #2563eb; box-shadow: var(--shadow-md); } .quick-log-btn:active { transform: scale(0.97); } .quick-log-btn__icon { font-size: 1.5rem; } @media (max-width: 575px) { .quick-log-grid { grid-template-columns: repeat(2, 1fr); } } .kiosk-mode .quick-log-btn { min-height: 90px; font-size: var(--text-lg); } /* ============================================================= UTILITY CLASSES ============================================================= */ .text-center { text-align: center; } .text-right { text-align: right; } .text-sm { font-size: var(--text-sm); } .text-lg { font-size: var(--text-lg); } .text-muted { color: #64748b; } .text-bold { font-weight: 600; } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .p-0 { padding: 0; } .p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); } .w-full { width: 100%; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================= PRINT STYLES ============================================================= */ @media print { .sticky-actions, .app-nav, .app-nav__toggle { display: none !important; } .page-container { max-width: 100%; padding: 0; } .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } }