diff --git a/frontend/src/styles.css b/frontend/src/styles.css index a74b096..5e2e621 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,7001 +1,12 @@ -/* biome-ignore-all lint/style/noDescendingSpecificity: legacy shared stylesheet relies on intentional cascade ordering across base and contextual selectors */ -@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"); - -:root { - --bg-primary: #0b1220; - --bg-secondary: #111827; - --bg-tertiary: #0d1424; - --bg-input: #0a1018; - --bg-gradient: radial-gradient(circle at 20% 20%, #1a2440, #0b1220 40%), #0b1220; - --border-primary: #1f2a3d; - --border-secondary: #2a3a4d; - --text-primary: #e5e7eb; - --text-secondary: #a3adc2; - --text-muted: #cbd5f5; - --accent: #2f86f6; - --accent-light: #7ca7ff; - --accent-bg: rgba(47, 134, 246, 0.1); - --success: #6ee7b7; - --success-bg: rgba(57, 217, 138, 0.12); - --danger: #fca5a5; - --danger-bg: rgba(255, 94, 94, 0.12); - --warning: #fcd34d; - --warning-bg: rgba(252, 211, 77, 0.12); - --info: #93c5fd; - --shadow: rgba(0, 0, 0, 0.25); - /* Button Design System */ - --btn-radius: 10px; - --input-radius: 10px; - --btn-radius-round: 50%; - --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); - --btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2); - --btn-primary-bg: var(--accent); - --btn-primary-hover: #3d94ff; - --btn-ghost-hover: rgba(255, 255, 255, 0.08); - --btn-danger-text: #2f0a0a; - --btn-success-text: #0a2b1f; - --btn-obsolete-bg: linear-gradient(135deg, #f7d14a 0%, #f2b91a 100%); - --btn-obsolete-hover: linear-gradient(135deg, #f9db72 0%, #f5c73c 100%); - --btn-obsolete-text: #2b2205; - --btn-obsolete-border: #f8e38a; - --btn-obsolete-shadow: 0 6px 14px rgba(252, 211, 77, 0.28); -} - -[data-theme="light"] { - --bg-primary: #f8fafc; - --bg-secondary: #ffffff; - --bg-tertiary: #f1f5f9; - --bg-input: #ffffff; - --bg-gradient: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%); - --border-primary: #e2e8f0; - --border-secondary: #cbd5e1; - --text-primary: #1e293b; - --text-secondary: #64748b; - --text-muted: #475569; - --accent: #2563eb; - --accent-light: #3b82f6; - --accent-bg: rgba(37, 99, 235, 0.1); - --success: #10b981; - --success-bg: rgba(16, 185, 129, 0.1); - --danger: #ef4444; - --danger-bg: rgba(239, 68, 68, 0.1); - --warning: #f59e0b; - --warning-bg: rgba(245, 158, 11, 0.1); - --info: #3b82f6; - --shadow: rgba(0, 0, 0, 0.08); - /* Button Design System */ - --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - --btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12); - --btn-primary-bg: var(--accent); - --btn-primary-hover: #1d4ed8; - --btn-ghost-hover: rgba(0, 0, 0, 0.06); - --btn-danger-text: #ffffff; - --btn-success-text: #ffffff; - --btn-obsolete-bg: linear-gradient(135deg, #f5b52c 0%, #f59e0b 100%); - --btn-obsolete-hover: linear-gradient(135deg, #f8c85b 0%, #f7ad2d 100%); - --btn-obsolete-text: #ffffff; - --btn-obsolete-border: #d48806; - --btn-obsolete-shadow: 0 6px 14px rgba(245, 158, 11, 0.22); -} - -* { - box-sizing: border-box; -} -html { - overflow-x: hidden; - background: var(--bg-primary); -} -body { - margin: 0; - font-family: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; - background: var(--bg-gradient); - color: var(--text-primary); - min-height: 100vh; - overflow-x: hidden; - transition: - background 200ms ease, - color 200ms ease; -} - -html.modal-open, -body.modal-open { - overflow: hidden !important; -} - -.page { - max-width: 1200px; - margin: 0 auto; - padding: 2.5rem 1.5rem 1.5rem; - overflow-x: hidden; -} - -.route-transition-mask { - position: fixed; - inset: 0; - background: var(--bg-primary); - opacity: 0; - pointer-events: none; - transition: opacity 140ms ease-out; - z-index: 1500; -} - -.route-transition-mask.active { - transition: none; - opacity: 1; - pointer-events: none; -} - -.hero { - background: linear-gradient(135deg, rgba(67, 106, 255, 0.08), rgba(115, 195, 255, 0.06)); - border: 1px solid var(--border-primary); - border-radius: 16px; - padding: 1.25rem 1.5rem; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1.5rem; - box-shadow: 0 8px 32px var(--shadow); - margin-bottom: 1.5rem; - transition: - background 200ms ease, - border-color 200ms ease; -} - -[data-theme='"light"'] .hero { - background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(59, 130, 246, 0.04)); -} - -.header-actions { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.icon-btn { - width: 40px; - height: 40px; - border-radius: var(--btn-radius-round); - background: transparent; - border: none; - cursor: pointer; - font-size: 1.2rem; - display: flex; - align-items: center; - justify-content: center; - transition: - background 150ms ease, - opacity 150ms ease; - padding: 0; - opacity: 0.7; - box-shadow: none; -} -.icon-btn:hover { - background: var(--btn-ghost-hover); - opacity: 1; -} -.icon-btn.active { - opacity: 1; - background: rgba(47, 134, 246, 0.15); -} -[data-theme="light"] .icon-btn:hover { - background: var(--btn-ghost-hover); -} -[data-theme="light"] .icon-btn.active { - background: rgba(47, 134, 246, 0.12); -} - +/* biome-ignore-all lint/style/noDescendingSpecificity: shared stylesheet is intentionally composed from legacy cascade-ordered partials */ /* ============================================================================= - Theme Dropdown Menu - ============================================================================= */ -.theme-menu { - position: relative; -} - -.theme-dropdown { - position: absolute; - top: calc(100% + 0.5rem); - right: 0; - min-width: 160px; - background: rgba(15, 23, 42, 0.85); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 12px; - box-shadow: - 0 12px 32px rgba(0, 0, 0, 0.4), - inset 0 0 0 1px rgba(255, 255, 255, 0.05); - opacity: 0; - visibility: hidden; - transform: translateY(-6px) scale(0.95); - transition: all 0.2s ease; - z-index: 1000; - overflow: hidden; - padding: 0.375rem; -} - -[data-theme="light"] .theme-dropdown { - background: rgba(255, 255, 255, 0.85); - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); -} - -.theme-menu.open .theme-dropdown { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); -} - -.theme-dropdown-item { - display: flex; - align-items: center; - gap: 0.75rem; - width: 100%; - padding: 0.625rem 0.75rem; - border: none; - background: none; - color: var(--text-primary); - font-size: 0.875rem; - cursor: pointer; - border-radius: 8px; - transition: background 0.15s ease; - text-align: left; - box-shadow: none; -} - -.theme-dropdown-item:hover { - background: rgba(59, 130, 246, 0.15); -} - -.theme-dropdown-item.active { - color: var(--accent-primary); -} - -.theme-dropdown-item svg { - width: 18px; - height: 18px; - flex-shrink: 0; - opacity: 0.7; -} - -.theme-dropdown-item.active svg { - opacity: 1; - color: var(--accent-primary); -} - -.theme-check { - margin-left: auto; - font-size: 0.8rem; - opacity: 0.8; -} - -.hero-title { - display: flex; - align-items: center; - gap: 1rem; -} -.hero-logo { - width: 48px; - height: 48px; -} -.hero h1 { - margin: 0.15rem 0 0; - font-size: 1.6rem; - font-weight: 600; -} -.sub { - color: var(--text-secondary); - margin: 0; -} -.eyebrow { - letter-spacing: 0.06em; - text-transform: uppercase; - color: #7ca7ff; - font-size: 0.75rem; - margin: 0; - font-weight: 500; -} - -/* Reminder status bar */ -.reminder-status-bar { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 0.875rem 1rem; - background: var(--accent-bg); - border: 1px solid var(--border-primary); - border-radius: 10px; - margin-bottom: 1rem; - font-size: 0.85rem; -} - -.reminder-status-header { - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; -} - -.reminder-status-icon { - color: var(--accent); - display: flex; - align-items: center; - flex-shrink: 0; -} - -.reminder-status-title { - color: var(--text-primary); - font-weight: 500; -} - -.reminder-status-badge { - padding: 0.25rem 0.6rem; - border-radius: 6px; - font-size: 0.75rem; - font-weight: 500; -} - -.reminder-status-badge.success { - background: var(--success-bg); - color: var(--success); -} - -.reminder-status-badge.warning { - background: var(--warning-bg); - color: var(--warning); -} - -.reminder-status-badge.danger { - background: var(--danger-bg); - color: var(--danger); -} - -.reminder-status-details { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding-left: 1.75rem; -} - -.reminder-status-row { - display: flex; - align-items: baseline; - gap: 0.5rem; - color: var(--text-secondary); - font-size: 0.8rem; -} - -.reminder-status-label { - color: var(--text-muted); - flex-shrink: 0; -} - -.reminder-status-value { - color: var(--text-primary); -} - -.reminder-status-meta { - color: var(--text-muted); - font-size: 0.75rem; - padding: 0.1rem 0.4rem; - background: var(--bg-tertiary); - border-radius: 4px; -} - -.reminder-med-name { - font-weight: 500; - color: var(--text-primary); -} - -.reminder-taken-by { - color: var(--text-muted); - font-size: 0.85rem; - margin-left: 0.25rem; - margin-right: 0.4rem; -} - -.reminder-date { - color: var(--text-secondary); -} - -.reminder-days-left { - color: var(--warning); - font-size: 0.8rem; -} - -.critical .reminder-days-left { - color: var(--danger); -} - -.reminder-send-row { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.35rem; - padding-left: 1.75rem; - padding-top: 0.25rem; -} - -.reminder-send-row .ghost { - font-size: 0.8rem; - padding: 0.25rem 0.75rem; -} - -.reminder-send-result { - font-size: 0.8rem; -} - -.reminder-send-result.success { - color: var(--success); -} - -.reminder-send-result.error { - color: var(--danger); -} - -.reminder-status-skeleton .reminder-status-title { - color: var(--text-secondary); -} - -.reminder-status-skeleton-lines { - gap: 0.45rem; -} - -.skeleton-line { - display: block; - height: 0.75rem; - border-radius: 999px; - position: relative; - overflow: hidden; - background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent); - max-width: 100%; -} - -.skeleton-line::after { - content: ""; - position: absolute; - inset: 0; - transform: translateX(-100%); - background: linear-gradient( - 90deg, - transparent 0%, - color-mix(in srgb, var(--text-muted) 30%, transparent) 45%, - transparent 100% - ); - animation: reminderSkeletonSweep 1.1s linear infinite; -} - -.skeleton-line-long { - width: min(540px, 96%); -} - -.skeleton-line-medium { - width: min(420px, 82%); -} - -.skeleton-line-short { - width: min(300px, 68%); -} - -.skeleton-pill { - width: 110px; - height: 2.25rem; - border-radius: 10px; -} - -.dashboard-card-skeleton { - display: flex; - flex-direction: column; - gap: 0.55rem; - padding: 0.35rem 0; -} - -.dashboard-actions-skeleton { - align-items: center; -} - -.page-loading-skeleton { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.skeleton-card { - display: flex; - flex-direction: column; - gap: 0.65rem; - padding: 0.25rem 0; -} - -.shared-schedule-loading-skeleton .skeleton-card { - max-width: 540px; - margin: 0.75rem auto 0; -} - -.screen-reader-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -@keyframes reminderSkeletonSweep { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -.med-link { - font-weight: 600; - text-decoration: underline; - text-decoration-style: dotted; - text-underline-offset: 2px; -} - -.med-link.clickable { - cursor: pointer; -} - -.med-link.clickable:hover { - color: var(--accent); - text-decoration-style: solid; -} - -@media (max-width: 600px) { - .reminder-status-bar { - padding: 0.75rem; - } - .reminder-status-header { - flex-wrap: wrap; - } - .reminder-status-badge { - margin-left: 0; - margin-top: 0.25rem; - } - .reminder-status-details { - padding-left: 0; - } - .reminder-status-row { - flex-direction: column; - gap: 0.15rem; - } - .reminder-low-stock-list { - padding-left: 0; - } - .reminder-send-row { - padding-left: 0; - } -} - -.tabs { - display: flex; - gap: 0.5rem; -} - -.stats { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.75rem; - align-items: center; -} -.stat { - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 14px; - padding: 0.9rem; -} -.stat .label { - margin: 0; - color: #b7c2e5; - font-size: 0.9rem; -} -.stat .value { - margin: 0.25rem 0 0; - font-size: 1.4rem; - font-weight: 700; -} - -.grid { - display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); - margin-bottom: 1rem; - max-width: 100%; - overflow: hidden; -} - -.card { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: 14px; - padding: 1.25rem; - box-shadow: 0 14px 36px var(--shadow); - transition: - background 200ms ease, - border-color 200ms ease; -} - -.card-head { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; - margin-bottom: 1rem; -} -.card h2 { - margin: 0; - font-size: 1.2rem; -} -.card h2.clickable { - cursor: pointer; - transition: color 0.15s; -} -.card h2.clickable:hover { - color: var(--accent-light); -} - -.edit-header { - display: flex; - align-items: center; - gap: 0.75rem; -} -.edit-header h2 { - margin: 0; - font-size: 1.1rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.schedule-full { - max-width: 100%; -} - -.select-field.schedule-days-select, -.schedule-days-select { - background-color: var(--accent-bg); - border: 1px solid var(--accent); - color: var(--text-muted); - padding: 0.25rem 2rem 0.25rem 0.5rem; - border-radius: 6px; - font-size: 0.75rem; - cursor: pointer; - outline: none; - transition: all 150ms ease; - width: auto; - max-width: 100px; - flex-shrink: 0; - background-position: right 0.6rem center; -} -.select-field.schedule-days-select:hover, -.schedule-days-select:hover { - filter: brightness(1.15); -} -.select-field.schedule-days-select:focus, -.schedule-days-select:focus { - border-color: var(--accent-light); -} - -.pill { - border: 1px solid var(--accent); - color: var(--text-muted); - background: var(--accent-bg); - padding: 0.35rem 0.7rem; - border-radius: 999px; - font-size: 0.85rem; - transition: - background 150ms ease, - border-color 150ms ease; -} -.pill.clickable { - cursor: pointer; -} -.pill.clickable:hover { - filter: brightness(1.1); -} -.pill.success { - border-color: var(--success); - background: var(--success-bg); - color: var(--success); -} -.pill.neutral { - border-color: var(--border-secondary); - background: rgba(255, 255, 255, 0.04); - color: var(--text-muted); -} -[data-theme='"light"'] .pill.neutral { - background: rgba(0, 0, 0, 0.04); -} - -.tabs .pill { - cursor: pointer; - transition: - background 150ms ease, - border-color 150ms ease; - background: transparent; - border: 1px solid var(--border-secondary); - color: var(--text-muted); - box-shadow: none; -} -.tabs .pill:hover { - background: var(--btn-ghost-hover); - border-color: var(--accent); -} -.tabs .pill.primary { - background: var(--accent-bg); - border-color: var(--accent); - color: var(--text-primary); -} - -.badges { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-top: 0.6rem; -} - -.meds .med-list { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -/* Grid view for medications page */ -.med-grid-wrapper { - max-width: 1200px; - margin: 0 auto; - width: 100%; -} - -.med-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-auto-rows: auto; - gap: 1rem; -} - -.med-groups { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.med-group { - border: 1px solid var(--border-primary); - border-radius: 12px; - padding: 0.9rem; - background: color-mix(in srgb, var(--bg-secondary) 75%, var(--bg-tertiary)); -} - -.med-grid-wrapper.is-empty .med-group-active { - padding: 0.7rem 0.85rem; -} - -.med-empty-state { - color: var(--text-secondary); - font-size: 0.92rem; - padding: 0.35rem 0.1rem; -} - -.med-group-head { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 0.8rem; -} - -.med-group-head-toggle { - cursor: pointer; - user-select: none; - border-radius: 8px; - padding: 0.1rem 0.25rem; - margin: -0.1rem -0.25rem 0.8rem; - background: none; - box-shadow: none; - color: inherit; -} - -.med-group-head-toggle:hover { - background: var(--bg-tertiary); -} - -.med-group-title { - margin: 0; - font-size: 0.92rem; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-muted); -} - -.med-group-head-toggle:hover .med-group-title { - color: var(--text-primary); -} - -.med-group-obsolete { - border-color: var(--border-primary); - background: var(--bg-secondary); - opacity: 1; -} - -.med-grid-obsolete { - grid-template-columns: repeat(2, 1fr); - grid-auto-rows: auto; -} - -.obsolete-row { - border-color: var(--border-primary); -} - -@media (max-width: 768px) { - .med-grid { - grid-template-columns: 1fr; - } - - /* Flatten nested boxes on mobile to reclaim horizontal space */ - .med-grid-wrapper > .card { - background: transparent !important; - border: none !important; - box-shadow: none !important; - padding: 0 !important; - border-radius: 0 !important; - } - - .med-grid-wrapper .card-head { - padding: 0 0.25rem; - } - - .med-group, - .med-groups { - border: none !important; - background: transparent !important; - padding: 0 !important; - border-radius: 0 !important; - } - - .med-group-head { - padding: 0 0.25rem; - } - - .med-row { - padding: 0.65rem; - border-radius: 8px; - } - - .blister-row-simple { - padding: 0.45rem 0.5rem 0.45rem 0.65rem; - font-size: 0.82rem; - } - - .med-details { - gap: 0.2rem 0.75rem; - font-size: 0.82rem; - } -} - -.med-row { - display: grid; - grid-template-rows: subgrid; - grid-row: span 2; - gap: 0; - border: 1px solid var(--border-primary); - padding: 1rem; - border-radius: 10px; - background: var(--bg-tertiary); - position: relative; - transition: - background 200ms ease, - border-color 200ms ease; -} -.med-row.editing { - border-color: var(--accent); - background: color-mix(in srgb, var(--accent) 8%, var(--bg-tertiary)); - box-shadow: 0 0 0 1px var(--accent); -} -.med-header { - display: flex; - flex-direction: column; - gap: 0.5rem; -} -.med-info { - flex: 1; - min-width: 0; -} -.med-name { - font-weight: 600; - font-size: 1.1rem; - margin-bottom: 0.4rem; -} -.med-details { - display: grid; - grid-template-columns: max-content max-content; - gap: 0.25rem 1.5rem; - color: var(--text-secondary); - font-size: 0.9rem; - margin-bottom: 0.5rem; -} -.med-details strong { - color: var(--text-primary); - font-weight: 600; - margin-left: 0.25rem; -} -.med-total { - color: var(--text-primary); - font-weight: 600; - font-size: 0.95rem; - margin-bottom: 0.5rem; -} -.muted { - color: var(--text-secondary); - font-size: 0.95rem; -} -.small { - font-size: 0.9rem; -} - -.blister-list { - display: flex; - flex-direction: column; - gap: 0.4rem; - padding-top: 0.5rem; - width: 100%; - align-self: start; -} -.blister-row-simple { - color: var(--text-muted); - font-size: 0.9rem; - padding: 0.6rem 0.75rem 0.6rem 1rem; - background: linear-gradient(90deg, var(--accent-bg) 0%, var(--bg-input) 100%); - border: 1px solid var(--border-secondary); - border-left: 3px solid var(--accent); - border-radius: 6px; - width: 100%; - transition: - background 200ms ease, - border-color 200ms ease; -} -.blister-row-simple:hover { - background: linear-gradient(90deg, rgba(47, 134, 246, 0.18) 0%, var(--bg-input) 100%); - border-left-color: var(--accent-light); -} - -.tag { - display: inline-flex; - align-items: center; - gap: 0.3rem; - background: rgba(255, 255, 255, 0.06); - border-radius: 6px; - padding: 0.3rem 0.6rem; - color: var(--text-muted); - font-size: 0.8rem; - font-weight: 500; -} -[data-theme='"light"'] .tag { - background: rgba(0, 0, 0, 0.06); -} -.tag.subtle { - background: rgba(255, 255, 255, 0.04); - color: var(--text-secondary); - font-size: 0.85rem; -} -[data-theme='"light"'] .tag.subtle { - background: rgba(0, 0, 0, 0.04); -} -.tag.success { - background: var(--success-bg); - color: var(--success); - border: 1px solid rgba(57, 217, 138, 0.25); -} -.tag.warning { - background: var(--warning-bg); - color: var(--warning); - border: 1px solid rgba(252, 211, 77, 0.3); -} -.tag.danger { - background: var(--danger-bg); - color: var(--danger); - border: 1px solid rgba(255, 94, 94, 0.3); -} -.tag.high { - background: var(--success-bg); - color: var(--success); - border: 1px solid rgba(57, 217, 138, 0.25); -} -.tag-row { - display: flex; - gap: 0.5rem; - align-items: center; - flex-wrap: wrap; - margin-top: 0.25rem; -} - -.timeline-obsolete-row { - margin-top: 0.15rem; - display: flex; - justify-content: flex-start; -} - -.timeline-obsolete-btn { - display: inline-flex; - align-items: center; - gap: 0.45rem; - padding: 0.55rem 0.9rem; - min-height: 2.5rem; - font-size: 0.85rem; - line-height: 1; - background: transparent; - border: 1px solid #f8e38a; - color: #ffd54a; - box-shadow: none; -} - -.timeline-obsolete-btn:hover { - background: color-mix(in srgb, #facc15 12%, transparent); - border-color: #ffe27c; - color: #ffe27c; - box-shadow: none; -} - -.timeline-obsolete-btn svg { - width: 1rem; - height: 1rem; - flex-shrink: 0; -} - -[data-theme="light"] .timeline-obsolete-btn { - background: transparent; - border-color: #d97706; - color: #b45309; -} - -[data-theme="light"] .timeline-obsolete-btn:hover { - background: color-mix(in srgb, #f59e0b 10%, transparent); - border-color: #b45309; - color: #92400e; -} -.danger-text { - color: var(--danger); - font-weight: 700; -} -.warning-text { - color: var(--warning); - font-weight: 700; -} -.info-text { - color: var(--info, #60a5fa); - font-weight: 500; -} -.success-text { - color: var(--success); - font-weight: 700; -} - -.optional-label { - font-size: 0.75rem; - color: var(--text-secondary); - font-weight: 400; -} - -button { - padding: 0.7rem 1.25rem; - border-radius: var(--btn-radius); - border: none; - background: var(--btn-primary-bg); - color: white; - cursor: pointer; - font-weight: 600; - font-size: 0.9rem; - box-shadow: var(--btn-shadow); - transition: - background 150ms ease, - box-shadow 150ms ease, - opacity 150ms ease; -} -button:hover { - background: var(--btn-primary-hover); -} -button:active { - box-shadow: var(--btn-shadow); -} - -button:focus-visible { - outline: 2px solid var(--accent-light); - outline-offset: 2px; -} - -button.icon-only { - min-width: 2.75rem; - min-height: 2.75rem; - padding: 0.5rem; - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 1; -} - -button.icon-only svg, -.modal-close svg, -.btn-copy svg, -.share-btn svg { - width: 1.1rem; - height: 1.1rem; - stroke-width: 2; - flex-shrink: 0; -} - -/* Secondary button (Edit, etc.) */ -button.secondary { - background: var(--bg-tertiary); - color: var(--text-primary); - border: 1px solid var(--border-secondary); -} -button.secondary:hover { - background: var(--bg-secondary); - border-color: var(--accent); -} -[data-theme="light"] button.secondary { - background: var(--bg-tertiary); -} -[data-theme="light"] button.secondary:hover { - background: var(--bg-secondary); -} - -/* Success button (Refill, etc.) */ -button.success { - background: var(--success); - color: var(--btn-success-text); - border: none; -} -button.success:hover { - filter: brightness(1.1); -} -button.success:disabled { - background: var(--bg-tertiary); - color: var(--text-tertiary); - cursor: not-allowed; -} - -/* Primary/Accent button (New entry, Add intake, etc.) */ -button.primary { - background: var(--accent); - color: white; - border: none; -} -button.primary:hover { - background: var(--accent-light); -} -button.primary:disabled { - background: var(--bg-tertiary); - color: var(--text-tertiary); - cursor: not-allowed; -} - -/* Info button (Edit, secondary actions) */ -button.info { - background: #3b82f6; - color: white; - border: none; -} -button.info:hover { - background: #60a5fa; -} - -/* Ghost button (Cancel, etc.) */ -button.ghost { - background: transparent; - border: 1px solid var(--border-secondary); - color: var(--text-muted); - box-shadow: none; -} -button.ghost:hover { - background: var(--btn-ghost-hover); -} -[data-theme="light"] button.ghost:hover { - background: var(--btn-ghost-hover); -} - -/* Navigation button (Back): neutral and low visual urgency */ -button.btn-nav { - background: var(--bg-secondary); - border: 1px solid var(--border-secondary); - color: var(--text-primary); - box-shadow: none; -} -button.btn-nav:hover { - background: var(--btn-ghost-hover); - border-color: var(--accent); -} - -/* Reversible status-change button (Mark obsolete): warning, not destructive */ -button.btn-obsolete { - background: var(--btn-obsolete-bg); - border: 1px solid var(--btn-obsolete-border); - color: var(--btn-obsolete-text); - box-shadow: none; - font-weight: 700; -} -button.btn-obsolete:hover { - background: var(--btn-obsolete-hover); - transform: none; - box-shadow: none; -} -button.btn-obsolete:active { - transform: none; -} - -.med-actions { - display: flex; - align-items: center; - gap: 0.4rem; - flex-shrink: 0; - margin-bottom: 0.6rem; - flex-wrap: wrap; -} -.med-actions button { - padding: 0.42rem 0.78rem; - height: 2.75rem; - min-height: 2.75rem; - font-size: 0.9rem; - font-weight: 600; - line-height: 1.2; - display: inline-flex; - align-items: center; - justify-content: center; - background: var(--bg-input); - border: 1px solid var(--border-secondary); - box-shadow: none; - transition: - background 160ms ease, - border-color 160ms ease, - box-shadow 160ms ease, - color 160ms ease, - filter 160ms ease; -} - -.med-actions button.icon-only { - width: 2.75rem; - min-width: 2.75rem; - height: 2.75rem; - min-height: 2.75rem; - padding: 0.5rem; -} - -.med-actions button.info { - color: var(--accent-light); - background: var(--bg-input); - border: 1px solid var(--border-secondary); -} - -.med-actions button.info:hover { - border-color: color-mix(in srgb, var(--accent) 55%, var(--border-secondary)); - background: color-mix(in srgb, var(--bg-input) 82%, var(--accent) 18%); - box-shadow: - 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), - 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent); -} - -.med-actions button.btn-obsolete { - color: #ffd54a; - background: var(--bg-input); - border: 1px solid var(--border-secondary); - gap: 0.45rem; - white-space: nowrap; -} - -.med-actions button.btn-obsolete:hover { - color: #ffe27c; - border-color: color-mix(in srgb, #facc15 45%, var(--border-secondary)); - background: color-mix(in srgb, var(--bg-input) 86%, #facc15 14%); - box-shadow: - 0 0 0 1px color-mix(in srgb, #facc15 32%, transparent), - 0 0 14px color-mix(in srgb, #facc15 28%, transparent); -} - -.med-actions button.success { - color: var(--success); - background: var(--bg-input); - border: 1px solid var(--border-secondary); -} - -.med-actions button.success:hover { - border-color: color-mix(in srgb, var(--success) 45%, var(--border-secondary)); - background: color-mix(in srgb, var(--bg-input) 84%, var(--success) 16%); - box-shadow: - 0 0 0 1px color-mix(in srgb, var(--success) 32%, transparent), - 0 0 14px color-mix(in srgb, var(--success) 28%, transparent); -} - -.med-actions button.danger, -.med-actions button.ghost.danger { - color: #fda4af; - background: var(--bg-input); - border: 1px solid var(--border-secondary); -} - -.med-actions button.danger:hover, -.med-actions button.ghost.danger:hover { - border-color: color-mix(in srgb, var(--danger) 55%, var(--border-secondary)); - background: color-mix(in srgb, var(--bg-input) 84%, var(--danger) 16%); - box-shadow: - 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent), - 0 0 14px color-mix(in srgb, var(--danger) 28%, transparent); -} - -.med-actions button:hover { - filter: brightness(1.05); - transform: none; -} - -[data-theme="light"] .med-row { - background: #f8fafc; - border-color: #cbd5e1; -} - -[data-theme="light"] .med-name { - color: #1e293b; -} - -[data-theme="light"] .med-generic-name { - color: #475569; -} - -[data-theme="light"] .med-actions button { - background: #ffffff; - border-color: #cbd5e1; -} - -[data-theme="light"] .med-actions button.info { - color: #1d4ed8; -} - -[data-theme="light"] .med-actions button.btn-obsolete { - color: #b45309; -} - -[data-theme="light"] .med-actions button.success { - color: #047857; -} - -[data-theme="light"] .med-actions button.danger, -[data-theme="light"] .med-actions button.ghost.danger { - color: #b91c1c; - background: #ffffff; - border-color: #cbd5e1; -} - -[data-theme="light"] .med-actions button.info:hover { - border-color: color-mix(in srgb, #2563eb 44%, #cbd5e1); - background: color-mix(in srgb, #ffffff 86%, #2563eb 14%); - box-shadow: - 0 0 0 1px color-mix(in srgb, #2563eb 24%, transparent), - 0 0 10px color-mix(in srgb, #2563eb 16%, transparent); -} - -[data-theme="light"] .med-actions button.btn-obsolete:hover { - border-color: color-mix(in srgb, #d97706 42%, #cbd5e1); - background: color-mix(in srgb, #ffffff 88%, #f59e0b 12%); - box-shadow: - 0 0 0 1px color-mix(in srgb, #d97706 22%, transparent), - 0 0 10px color-mix(in srgb, #d97706 15%, transparent); -} - -[data-theme="light"] .med-actions button.success:hover { - border-color: color-mix(in srgb, #059669 42%, #cbd5e1); - background: color-mix(in srgb, #ffffff 88%, #10b981 12%); - box-shadow: - 0 0 0 1px color-mix(in srgb, #059669 22%, transparent), - 0 0 10px color-mix(in srgb, #059669 15%, transparent); -} - -[data-theme="light"] .med-actions button.danger:hover, -[data-theme="light"] .med-actions button.ghost.danger:hover { - border-color: color-mix(in srgb, #dc2626 44%, #cbd5e1); - background: color-mix(in srgb, #ffffff 86%, #ef4444 14%); - box-shadow: - 0 0 0 1px color-mix(in srgb, #dc2626 24%, transparent), - 0 0 10px color-mix(in srgb, #dc2626 16%, transparent); -} - -@media (max-width: 600px) { - .med-header { - flex-direction: column; - } - .med-actions { - align-self: flex-start; - } - .med-details { - grid-template-columns: repeat(2, 1fr); - } -} -.blister-list { - display: flex; - flex-wrap: wrap; - gap: 0.35rem; - margin-top: 0.6rem; -} -.blister-pill { - display: flex; - gap: 0.4rem; - flex-wrap: wrap; -} -.blister-row { - display: flex; - flex-direction: column; - gap: 0.75rem; - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - padding: 1rem; - border-radius: 8px; - margin-bottom: 0.65rem; - transition: background 200ms ease; -} -[data-theme='"light"'] .blister-row { - background: var(--bg-tertiary); -} -.blister-row .blister-inputs { - display: grid; - grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(10.75rem, 1fr) minmax(7.25rem, 0.8fr); - gap: 0.75rem; - align-items: end; -} - -.blister-row .blister-inputs > label { - min-width: 0; -} - -.blister-row .blister-inputs label.taken-by-field { - grid-column: span 2; -} -.blister-row button { - align-self: flex-end; - width: auto; -} -.blister-row:last-child { - margin-bottom: 0; -} - -@media (max-width: 600px) { - .blister-row .blister-inputs { - grid-template-columns: 1fr 1fr; - gap: 0.75rem; - } - - .blister-row .blister-inputs label.taken-by-field { - grid-column: 1 / -1; - } -} - -/* Desktop edit sidebar can be narrow; avoid clipping right-side controls. */ -@media (min-width: 769px) { - .edit-sidebar .blister-row .blister-inputs { - grid-template-columns: 1fr 1fr; - } - - .edit-sidebar .blister-row .blister-inputs label.taken-by-field { - grid-column: 1 / -1; - } -} - -.gap { - gap: 0.6rem; -} - -.stock-total-row { - display: flex; - align-items: flex-end; - justify-content: space-between; - gap: 0.75rem; - flex-wrap: wrap; -} - -.stock-total-field { - flex: 1 1 220px; - min-width: 180px; -} - -/* Inline checkbox for compact layout */ -.inline-checkbox { - display: flex !important; - flex-direction: row !important; - align-items: center; - gap: 0.4rem; - cursor: pointer; - font-size: 0.8rem; - color: var(--text-secondary); - padding: 0.35rem 0.6rem; - border-radius: 6px; - transition: - background 0.15s, - color 0.15s; - text-transform: none; - font-weight: 500; - letter-spacing: 0; - white-space: nowrap; -} - -.inline-checkbox:hover { - background: var(--accent-bg); - color: var(--text-primary); -} - -.inline-checkbox:has(input:checked) { - background: var(--accent-bg); - color: var(--accent); -} - -.inline-checkbox input[type="checkbox"] { - width: 14px; - height: 14px; - accent-color: var(--accent); - cursor: pointer; - margin: 0; -} - -.obsolete-row .med-actions button { - opacity: 0.72; - filter: saturate(0.72); - box-shadow: none; -} - -.obsolete-row .med-actions button:hover { - opacity: 0.9; - filter: saturate(0.85); -} - -button.timeline-obsolete-btn.btn-obsolete { - background: transparent; - border: 1px solid #f8e38a; - color: #ffd54a; - box-shadow: none; -} - -button.timeline-obsolete-btn.btn-obsolete:hover { - background: color-mix(in srgb, #facc15 12%, transparent); - border-color: #ffe27c; - color: #ffe27c; - box-shadow: none; -} - -[data-theme="light"] button.timeline-obsolete-btn.btn-obsolete { - background: transparent; - border-color: #d97706; - color: #b45309; -} - -[data-theme="light"] button.timeline-obsolete-btn.btn-obsolete:hover { - background: color-mix(in srgb, #f59e0b 10%, transparent); - border-color: #b45309; - color: #92400e; - box-shadow: none; -} - -/* Danger button (Delete, etc.) */ -button.danger { - background: var(--danger); - color: var(--btn-danger-text); - border: none; -} -button.danger:hover { - background: #dc2626; -} -[data-theme="light"] button.danger { - background: var(--danger); -} -[data-theme="light"] button.danger:hover { - background: #dc2626; -} - -/* Warning button (Mark Obsolete, reversible actions) */ -button.warning { - background: var(--btn-obsolete-bg); - border: 1px solid var(--btn-obsolete-border); - color: var(--btn-obsolete-text); - box-shadow: none; - font-weight: 700; -} -button.warning:hover { - background: var(--btn-obsolete-hover); - transform: none; - box-shadow: none; -} -[data-theme="light"] button.warning { - background: var(--btn-obsolete-bg); - color: var(--btn-obsolete-text); -} - -/* Legacy ghost danger (keep for compatibility) */ -button.ghost.danger { - background: transparent; - border: 1px solid rgba(239, 68, 68, 0.4); - color: var(--danger); - box-shadow: none; -} -button.ghost.danger:hover { - background: var(--danger-bg); -} - -input, -select, -textarea { - width: 100%; - padding: 0.7rem 0.85rem; - border-radius: var(--btn-radius); - border: 1px solid var(--border-secondary); - background: var(--bg-input); - color: var(--text-primary); - font-size: 0.95rem; - font-family: inherit; - transition: - border-color 150ms ease, - box-shadow 150ms ease, - background 200ms ease; -} - -select { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - padding-right: 2.25rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-size: 12px 12px; - background-position: right 0.9rem center; -} -input:focus, -select:focus, -textarea:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(47, 134, 246, 0.15); -} -textarea { - resize: vertical; - min-height: 60px; -} - -/* Override browser autofill yellow/orange highlight */ -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover, -textarea:-webkit-autofill:focus, -select:-webkit-autofill, -select:-webkit-autofill:hover, -select:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0 1000px #0a1018 inset !important; - box-shadow: 0 0 0 1000px #0a1018 inset !important; - -webkit-text-fill-color: #e2e8f0 !important; - caret-color: #e2e8f0; - background-color: #0a1018 !important; - background-image: none !important; - border-color: var(--border-secondary); - transition: background-color 600000s ease-in-out 0s; -} - -[data-theme="light"] input:-webkit-autofill, -[data-theme="light"] input:-webkit-autofill:hover, -[data-theme="light"] input:-webkit-autofill:focus, -[data-theme="light"] textarea:-webkit-autofill, -[data-theme="light"] textarea:-webkit-autofill:hover, -[data-theme="light"] textarea:-webkit-autofill:focus, -[data-theme="light"] select:-webkit-autofill, -[data-theme="light"] select:-webkit-autofill:hover, -[data-theme="light"] select:-webkit-autofill:focus { - -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; - box-shadow: 0 0 0 1000px #ffffff inset !important; - -webkit-text-fill-color: #0f172a !important; - caret-color: #0f172a; - background-color: #ffffff !important; - background-image: none !important; -} - -/* Auto-resize textarea */ -textarea.auto-resize { - resize: none; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - min-height: 100px; - max-height: 400px; -} - -/* Mobile textarea improvements */ -@media (max-width: 600px) { - textarea.auto-resize { - min-height: 120px; - font-size: 16px; /* Prevents iOS zoom on focus */ - } -} - -.static-value { - padding: 0.7rem 0.85rem; - border-radius: var(--btn-radius); - background: var(--accent-bg); - border: 1px solid var(--accent); - color: var(--text-primary); - font-weight: 600; - font-size: 1rem; - text-align: right; -} - -.form-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem 1.25rem; -} -.form-grid label { - display: flex; - flex-direction: column; - gap: 0.4rem; - color: var(--text-secondary); - font-size: 0.85rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.03em; -} -.form-grid .full { - grid-column: 1 / -1; -} - -.date-pair-group { - display: grid; - gap: 0.9rem; -} - -.date-pair-field { - min-width: 0; -} - -.date-pair-stack, -.date-pair-stack-header { - display: grid; - gap: 0.45rem; - min-width: 0; -} - -.date-pair-entry { - display: flex; - flex-direction: column; - gap: 0.15rem; - min-width: 0; -} - -.date-pair-label { - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-secondary); - line-height: 1.2; -} - -.date-pair-value { - font-size: 0.9rem; - font-weight: 600; - color: var(--text-primary); - line-height: 1.3; - word-break: break-word; -} - -.form-category { - grid-column: 1 / -1; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 1rem 1.25rem; - padding: 0.95rem; - border: 1px solid var(--border-secondary); - border-radius: 12px; - background: var(--bg-tertiary); -} - -.form-category-title { - grid-column: 1 / -1; - margin: 0; - color: var(--accent-light); - font-size: 0.78rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; -} - -.form-category .full { - grid-column: 1 / -1; -} - -.form-category > label:not(.full) { - align-self: end; -} - -.form-category-header { - grid-column: 1 / -1; - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.75rem; -} - -.form-category-header .form-category-title { - margin: 0; -} - -/* Intake section */ -.intake-section .blister-row { - grid-column: 1 / -1; -} - -/* Image section */ -.image-section { - grid-template-columns: 1fr; -} - -.image-section .image-preview { - grid-column: 1 / -1; -} - -.image-section input[type="file"] { - grid-column: 1 / -1; - font-size: 0.9rem; -} - -.image-section input[type="file"]::file-selector-button { - background: var(--accent); - color: white; - border: none; - padding: 0.5rem 1rem; - border-radius: 6px; - cursor: pointer; - margin-right: 0.75rem; - font-weight: 500; -} - -.image-section input[type="file"]::file-selector-button:hover { - background: var(--accent-light); -} - -/* ── Form Tabs ── */ -.form-tabs { - display: flex; - padding: 3px; - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - border-radius: 10px; - gap: 2px; - margin-bottom: 0; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; -} -.form-tabs::-webkit-scrollbar { - display: none; -} -.form-tab { - flex: 1; - padding: 0.5rem 0.75rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--text-muted); - background: transparent; - border: none; - border-radius: 8px; - cursor: pointer; - white-space: nowrap; - text-align: center; - text-decoration: none; - user-select: none; - transition: - color 0.15s ease, - background 0.15s ease, - box-shadow 0.15s ease; -} -.form-tab:hover { - color: var(--text-primary); - background: color-mix(in srgb, var(--bg-secondary) 60%, transparent); -} -.form-tab.active { - color: #fff; - background: color-mix(in srgb, var(--accent) 55%, var(--bg-tertiary)); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -} -.form-tab-panel { - display: none; -} -.form-tab-panel.active { - display: contents; -} - -.form-grid .optional-label { - text-transform: none; - font-weight: 400; - font-size: 0.75rem; -} -.align-end { - display: flex; - justify-content: flex-end; - gap: 0.75rem; -} - -/* Generic select variant used by multiple form contexts */ -.select-field, -.package-type-select { - width: 100%; - padding: 0.6rem 2rem 0.6rem 0.75rem; - font-size: 0.9rem; - background-color: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: 8px; - color: var(--text-primary); - cursor: pointer; - background-position: right 0.9rem center; -} - -.select-field:hover, -.package-type-select:hover { - border-color: var(--accent); -} - -.select-field:focus, -.package-type-select:focus { - outline: none; - border-color: var(--accent); -} - -/* Form field validation */ -.form-grid label.has-error input, -.form-grid label.has-error textarea { - border-color: var(--danger) !important; - background-color: rgba(239, 68, 68, 0.05); -} - -.form-grid label.has-error input:focus, -.form-grid label.has-error textarea:focus { - box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); -} - -.field-error { - color: var(--danger); - font-size: 0.75rem; - font-weight: 500; - text-transform: none; - letter-spacing: normal; - margin-top: 0.25rem; -} - -.field-error.error-pulse { - animation: error-pulse-anim 1.5s ease; -} - -@keyframes error-pulse-anim { - 0%, - 100% { - background: transparent; - } - 15% { - background: rgba(239, 68, 68, 0.18); - border-radius: 4px; - padding: 2px 6px; - } - 85% { - background: rgba(239, 68, 68, 0.18); - border-radius: 4px; - padding: 2px 6px; - } -} - -button.has-validation-error { - opacity: 0.65; - cursor: not-allowed; -} - -.readonly-fieldset { - display: contents; -} - -/* Subtle read-only styling for disabled fieldset inputs */ -.readonly-fieldset:disabled input, -.readonly-fieldset:disabled select, -.readonly-fieldset:disabled textarea, -.readonly-fieldset:disabled .date-input-wrapper { - opacity: 0.55; - cursor: default; - border-color: transparent; - background: var(--bg-input); - pointer-events: none; -} - -.readonly-fieldset:disabled .date-input-display { - opacity: 0.55; -} - -.readonly-fieldset:disabled .tag { - opacity: 0.55; - pointer-events: none; -} - -.readonly-fieldset:disabled .static-value { - opacity: 0.55; - border-color: transparent; -} - -.readonly-fieldset:disabled .tag-input-container { - border-color: transparent; -} - -.readonly-fieldset:disabled label { - opacity: 0.7; -} - -/* Dose input with unit selector */ -.dose-input-group { - display: flex; - gap: 0.5rem; - align-items: stretch; -} - -.dose-input-group input { - flex: 1; - min-width: 100px; -} - -.select-field.dose-unit-select, -.dose-unit-select { - width: auto; - min-width: unset; - max-width: 120px; - flex-shrink: 0; - padding: 0.5rem 2rem 0.5rem 0.75rem; - background-color: var(--bg-primary); - border: 1px solid var(--border-primary); - border-radius: var(--input-radius); - color: var(--text-primary); - font-size: 0.9rem; - cursor: pointer; - transition: border-color 150ms ease; - background-position: right 0.6rem center; -} - -.select-field.dose-unit-select:focus, -.dose-unit-select:focus { - outline: none; - border-color: var(--accent); -} - -.medication-enrichment-section { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.medication-enrichment-body { - display: flex; - flex-direction: column; - gap: 0.75rem; - padding: 0.85rem; - border: 1px solid var(--border-primary); - border-radius: 12px; - background: color-mix(in srgb, var(--bg-secondary) 62%, var(--bg-tertiary)); -} - -.medication-enrichment-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 0.75rem; -} - -.medication-enrichment-title { - margin-bottom: 0.2rem; -} - -.medication-enrichment-collapsed-hint, -.medication-enrichment-description, -.medication-enrichment-manual-hint { - margin: 0; -} - -.medication-enrichment-helper-row { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 0.5rem; -} - -.medication-enrichment-info { - display: flex; - flex-direction: column; - gap: 0.35rem; - padding: 0.75rem; - border: 1px solid color-mix(in srgb, var(--info) 28%, var(--border-primary)); - border-radius: 10px; - background: color-mix(in srgb, var(--accent-bg) 55%, transparent); -} - -.medication-enrichment-info-title { - margin: 0; - font-size: 0.85rem; - font-weight: 600; - color: var(--text-primary); -} - -.medication-enrichment-search-row { - display: flex; - align-items: stretch; - gap: 0.75rem; -} - -.medication-enrichment-spinner { - width: 0.9rem; - height: 0.9rem; - border-radius: 999px; - border: 2px solid color-mix(in srgb, var(--accent) 24%, transparent); - border-top-color: var(--accent-light); - animation: medication-enrichment-spin 0.8s linear infinite; - flex-shrink: 0; -} - -.medication-enrichment-search-row button { - flex-shrink: 0; - white-space: nowrap; -} - -.medication-enrichment-action-button { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.65rem; - transition: - transform 160ms ease, - box-shadow 160ms ease, - border-color 160ms ease, - background 160ms ease, - opacity 160ms ease; -} - -.medication-enrichment-action-button.is-loading { - opacity: 1; - border-color: color-mix(in srgb, var(--accent) 34%, var(--border-primary)); - background: color-mix(in srgb, var(--accent-bg) 44%, var(--bg-secondary)); - box-shadow: - 0 10px 24px rgba(47, 134, 246, 0.16), - inset 0 1px 0 rgba(255, 255, 255, 0.04); -} - -.medication-enrichment-action-button.is-loading:hover { - transform: none; -} - -.medication-enrichment-results { - display: grid; - gap: 0.75rem; -} - -.medication-enrichment-toggle-button { - min-width: 11rem; - justify-self: flex-end; - transition: - transform 160ms ease, - box-shadow 160ms ease, - border-color 160ms ease, - background 160ms ease; -} - -.medication-enrichment-toggle-button.primary { - box-shadow: - 0 10px 24px rgba(47, 134, 246, 0.22), - inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.medication-enrichment-toggle-button.primary:hover { - transform: translateY(-1px); - box-shadow: - 0 14px 28px rgba(47, 134, 246, 0.28), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -@keyframes medication-enrichment-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -.medication-enrichment-results-footer { - display: flex; - justify-content: flex-start; -} - -.medication-enrichment-load-more-button.is-loading { - opacity: 1; - border-color: color-mix(in srgb, var(--accent) 30%, var(--border-primary)); - background: color-mix(in srgb, var(--accent-bg) 38%, var(--bg-secondary)); -} - -.medication-enrichment-result { - display: grid; - gap: 0.6rem; - padding: 0.85rem; - border: 1px solid var(--border-primary); - border-radius: 10px; - background: color-mix(in srgb, var(--bg-secondary) 68%, var(--bg-tertiary)); -} - -.medication-enrichment-result.active { - border-color: color-mix(in srgb, var(--accent) 55%, var(--border-primary)); - box-shadow: inset 0 0 0 1px rgba(47, 134, 246, 0.18); -} - -.medication-enrichment-result-header { - display: flex; - flex-direction: column; - align-items: stretch; - gap: 0.75rem; -} - -.medication-enrichment-result-names { - display: flex; - flex-direction: column; - gap: 0.15rem; - min-width: 0; -} - -.medication-enrichment-result-names strong { - font-size: 0.95rem; - word-break: break-word; -} - -.medication-enrichment-result-generic { - font-size: 0.85rem; - color: var(--text-secondary); - word-break: break-word; -} - -.medication-enrichment-result-package { - font-size: 0.8rem; - color: var(--text-secondary); - word-break: break-word; -} - -.medication-enrichment-result-actions { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: flex-start; - gap: 0.5rem; - width: 100%; -} - -.medication-enrichment-result-meta { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); - gap: 0.9rem 1.15rem; - margin: 0; - padding-top: 0.35rem; -} - -.medication-enrichment-result-meta div { - min-width: 0; -} - -.medication-enrichment-result-meta-full { - grid-column: 1 / -1; -} - -.medication-enrichment-result-meta dt { - margin-bottom: 0.35rem; - font-size: 0.72rem; - font-weight: 600; - letter-spacing: 0.05em; - text-transform: uppercase; - color: var(--text-secondary); -} - -.medication-enrichment-result-meta dd { - margin: 0; - font-size: 0.85rem; - color: var(--text-primary); - word-break: break-word; -} - -.medication-enrichment-detail-stack { - display: grid; - gap: 0.8rem; -} - -.medication-enrichment-package-details { - margin: 0; - padding-left: 1rem; - display: grid; - gap: 0.45rem; -} - -.medication-enrichment-strengths { - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -.medication-enrichment-strength-title { - margin: 0; - font-size: 0.85rem; - font-weight: 600; - color: var(--text-primary); -} - -.medication-enrichment-strength-list { - display: flex; - flex-wrap: wrap; - gap: 0.65rem; -} - -.medication-enrichment-strength-list button { - white-space: nowrap; -} - -.medication-enrichment-detail-hint { - margin: 0; - max-width: 44rem; - line-height: 1.5; -} - -.medication-enrichment-applied-note { - margin: 0; - padding: 0.7rem 0.9rem; - border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); - border-radius: 12px; - background: color-mix(in srgb, var(--success-bg) 75%, transparent); - line-height: 1.45; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); -} - -.medication-enrichment-inline-action { - justify-self: flex-start; -} - -.medication-enrichment-package-choice-list { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 0.75rem; -} - -.medication-enrichment-package-choice-list button.medication-enrichment-package-choice-button { - width: 100%; - display: inline-flex; - align-items: center; - justify-content: flex-start; - gap: 0.65rem; - text-align: left; - white-space: normal; - overflow-wrap: anywhere; - word-break: break-word; - line-height: 1.35; -} - -.medication-enrichment-package-choice-list button.medication-enrichment-package-choice-button.is-loading { - box-shadow: - 0 10px 24px rgba(47, 134, 246, 0.16), - inset 0 1px 0 rgba(255, 255, 255, 0.08); -} - -.medication-enrichment-pending-panel { - display: inline-flex; - align-items: center; - gap: 0.65rem; - min-height: 3.25rem; - padding: 0.8rem 0.95rem; - border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-primary)); - border-radius: 12px; - background: color-mix(in srgb, var(--accent-bg) 54%, var(--bg-secondary)); - color: var(--text-secondary); - line-height: 1.45; -} - -@media (max-width: 760px) { - .medication-enrichment-header, - .medication-enrichment-result-header, - .medication-enrichment-search-row, - .medication-enrichment-helper-row { - flex-direction: column; - align-items: stretch; - } - - .medication-enrichment-result-actions { - justify-content: flex-start; - } - - .medication-enrichment-search-row button { - width: 100%; - } -} - -.select-field.dose-unit-select:hover, -.dose-unit-select:hover { - border-color: var(--accent); -} - -/* Tag input for multi-value fields (e.g., Taken By) */ -.tag-input-container { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; - padding: 0.5rem; - min-height: 44px; - background: var(--bg-primary); - border: 1px solid var(--border-primary); - border-radius: var(--input-radius); - transition: - border-color 150ms ease, - box-shadow 150ms ease; -} - -.tag-input-container:focus-within { - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59, 130, 246), 0.15); -} - -.tag-input-container input { - flex: 1; - min-width: 100px; - border: none !important; - background: transparent !important; - padding: 0.25rem !important; - box-shadow: none !important; - font-size: 0.95rem; -} - -.tag-input-container input:focus { - outline: none; - box-shadow: none !important; -} - -.tag { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.25rem 0.5rem; - background: var(--accent); - color: white; - border-radius: 4px; - font-size: 0.85rem; - font-weight: 500; - text-transform: none; - letter-spacing: normal; - white-space: nowrap; -} - -.tag-remove { - display: flex; - align-items: center; - justify-content: center; - width: 16px; - height: 16px; - padding: 0; - background: rgba(255, 255, 255, 0.2); - border: none; - border-radius: 50%; - color: white; - font-size: 14px; - line-height: 1; - cursor: pointer; - transition: background 150ms ease; -} - -.tag-remove:hover { - background: rgba(255, 255, 255, 0.35); -} - -.char-count { - color: var(--text-secondary); - font-size: 0.7rem; - font-weight: 400; - text-transform: none; - letter-spacing: normal; - text-align: right; - margin-top: 0.25rem; -} - -.char-count.warning { - color: var(--warning); -} - -.timeline { - display: flex; - flex-direction: column; - gap: 1rem; -} - -/* Past days toggle button */ -.past-days-toggle { - display: flex; - align-items: center; - flex-wrap: nowrap; - gap: 0.5rem; - padding: 0.75rem 1rem; - background: var(--bg-tertiary); - border: 1px dashed var(--border-primary); - border-radius: var(--btn-radius); - cursor: pointer; - user-select: none; - color: var(--text-secondary); - font-size: 0.9rem; - transition: - background 150ms ease, - border-color 150ms ease, - color 150ms ease; - box-shadow: none; -} -.past-days-toggle:hover { - background: var(--bg-secondary); - border-color: var(--accent); - color: var(--text-primary); -} -.past-days-toggle.expanded { - border-style: solid; - border-color: var(--accent); - background: rgba(47, 134, 246, 0.05); -} -.past-days-icon { - font-size: 0.7rem; - opacity: 0.6; - flex-shrink: 0; -} -.past-days-label { - font-weight: 500; -} -.past-days-count { - opacity: 0.6; - font-size: 0.85rem; - white-space: nowrap; - flex-shrink: 0; -} -.past-days-warning { - margin-left: auto; - color: var(--warning); - font-size: 0.9rem; - font-weight: 600; - display: flex; - align-items: center; - gap: 0.25rem; -} -.past-days-complete { - margin-left: auto; - color: var(--success); - font-size: 1rem; - font-weight: 700; -} -.past-days-toggle.has-missed { - border-color: var(--warning); - background: rgba(234, 179, 8, 0.08); -} - -/* Past days header container - toggle + clear button */ -.past-days-header { - display: flex; - align-items: center; - gap: 0.75rem; -} -.past-days-header .past-days-toggle { - flex: 1; -} - -/* Future days toggle button */ -.future-days-header { - display: flex; - align-items: center; - gap: 0.75rem; -} -.future-days-toggle { - display: flex; - align-items: center; - flex-wrap: nowrap; - flex: 1; - gap: 0.5rem; - padding: 0.75rem 1rem; - background: var(--bg-tertiary); - border: 1px dashed var(--border-primary); - border-radius: var(--btn-radius); - cursor: pointer; - user-select: none; - color: var(--text-secondary); - font-size: 0.9rem; - transition: - background 150ms ease, - border-color 150ms ease, - color 150ms ease; - box-shadow: none; -} -.future-days-toggle:hover { - background: var(--bg-secondary); - border-color: var(--accent); - color: var(--text-primary); -} -.future-days-toggle.expanded { - border-style: solid; - border-color: var(--accent); - background: rgba(47, 134, 246, 0.05); -} -.future-days-icon { - font-size: 0.7rem; - opacity: 0.6; - flex-shrink: 0; -} -.future-days-label { - font-weight: 500; -} -.future-days-count { - opacity: 0.6; - font-size: 0.85rem; - white-space: nowrap; - flex-shrink: 0; -} -.future-days-progress { - margin-left: auto; - color: var(--success); - font-size: 0.9rem; - font-weight: 600; -} -.clear-missed-btn { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - font-weight: 500; - background: rgba(234, 179, 8, 0.15); - color: var(--warning); - border: 1px solid var(--warning); - border-radius: var(--btn-radius); - cursor: pointer; - white-space: nowrap; - transition: - background 150ms ease, - transform 100ms ease; -} -.clear-missed-btn:hover { - background: rgba(234, 179, 8, 0.25); - transform: translateY(-1px); -} -.clear-missed-btn:active { - transform: translateY(0); -} - -/* Past day blocks styling */ -.day-block.past { - opacity: 0.7; - border-style: dashed; -} -.day-block.past .day-divider { - color: var(--text-secondary); -} -.dose-item.past { - opacity: 0.8; -} - -.day-block { - border: 1px solid var(--border-primary); - border-radius: 16px; - padding: 1rem 1.25rem; - background: var(--bg-secondary); - box-shadow: 0 8px 32px var(--shadow); - transition: - background 200ms ease, - border-color 200ms ease; -} -.day-block.collapsed { - padding-bottom: 0.75rem; -} -.day-block.today { - border-color: var(--accent); - border-width: 2px; - background: linear-gradient(135deg, rgba(47, 134, 246, 0.08) 0%, rgba(47, 134, 246, 0.02) 100%); - box-shadow: - 0 8px 32px var(--shadow), - 0 0 0 1px rgba(47, 134, 246, 0.1); -} -.day-block.today .day-divider { - color: var(--accent); -} -.day-block.all-taken { - border-color: rgba(57, 217, 138, 0.3); - background: linear-gradient(135deg, rgba(57, 217, 138, 0.06) 0%, rgba(57, 217, 138, 0.015) 100%); -} -.day-block.all-taken .day-divider, -.day-block.all-taken.stock-warning .day-divider, -.day-block.all-taken.stock-danger .day-divider { - color: var(--success); - opacity: 0.8; -} -.day-block.past-missed { - border-color: rgba(252, 211, 77, 0.35); -} -.day-block.past-missed .day-divider { - color: var(--warning); - opacity: 0.8; -} -.day-block.today.all-taken { - border-color: var(--success); - background: linear-gradient(135deg, rgba(57, 217, 138, 0.08) 0%, rgba(57, 217, 138, 0.02) 100%); -} - -/* Stock status colors for day blocks */ -.day-block.stock-success { - border-color: rgba(57, 217, 138, 0.3); -} -.day-block.stock-success .day-divider { - color: var(--success); - opacity: 0.8; -} -.day-block.stock-warning { - border-color: rgba(252, 211, 77, 0.35); -} -.day-block.stock-warning .day-divider { - color: var(--warning); - opacity: 0.8; -} -.day-block.stock-danger { - border-color: rgba(255, 94, 94, 0.35); -} -.day-block.stock-danger .day-divider { - color: var(--danger); - opacity: 0.8; -} - -.day-divider { - margin: 0 0 0.75rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid rgba(47, 134, 246, 0.2); - color: var(--accent-light); - font-weight: 700; - font-size: 0.95rem; - letter-spacing: 0.02em; - display: flex; - align-items: center; - gap: 0.5rem; -} -.day-divider.clickable { - cursor: pointer; - user-select: none; -} -.day-divider.clickable:hover { - opacity: 0.8; -} -/* Keep warning/danger colors on hover */ -.day-block.stock-warning .day-divider.clickable:hover { - color: var(--warning); -} -.day-block.stock-danger .day-divider.clickable:hover { - color: var(--danger); -} -.day-collapse-icon { - font-size: 0.7rem; - opacity: 0.6; - transition: transform 0.2s ease; - width: 1rem; - text-align: center; -} -.day-date { - flex: 1; -} -.day-summary { - font-size: 0.8rem; - font-weight: 500; - opacity: 0.7; -} -.day-complete { - color: var(--success); -} -.day-progress { - color: var(--text-secondary); -} -.day-warning { - margin-right: 0.35rem; -} -.day-block.collapsed .day-divider { - margin-bottom: 0; - padding-bottom: 0; - border-bottom: none; -} -.time-row { - display: grid; - grid-template-columns: minmax(120px, 190px) 1fr; - align-items: start; - gap: 0.5rem; - padding: 0.75rem 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.05); - transition: opacity 0.2s ease; -} -[data-theme='"light"'] .time-row { - border-bottom-color: rgba(0, 0, 0, 0.06); -} -.time-row:last-child { - border-bottom: none; - padding-bottom: 0; -} - -.time-row.med-empty { - border-left: 3px solid var(--danger); - padding-left: 0.6rem; - background: color-mix(in srgb, var(--danger) 8%, transparent); - border-radius: 8px; -} - -.time-row.med-low { - border-left: 3px solid var(--warning); - padding-left: 0.6rem; - background: color-mix(in srgb, var(--warning) 10%, transparent); - border-radius: 8px; -} - -.time-row.med-low .med-name-text { - color: color-mix(in srgb, var(--warning) 88%, white 12%); -} - -.time-row.med-low .tag.subtle { - background: color-mix(in srgb, var(--warning) 16%, transparent); - border-color: color-mix(in srgb, var(--warning) 42%, transparent); - color: color-mix(in srgb, var(--warning) 82%, white 18%); -} - -.time-row.med-empty .med-name-text { - color: var(--danger); - text-decoration: line-through; - text-decoration-thickness: 2px; -} - -.time-row.med-empty .tag.subtle { - background: color-mix(in srgb, var(--danger) 16%, transparent); - border-color: color-mix(in srgb, var(--danger) 42%, transparent); - color: color-mix(in srgb, var(--danger) 82%, white 18%); -} -.time-main { - display: flex; - flex-direction: column; - gap: 0.4rem; -} -.time-main .med-name { - font-size: 1rem; - font-weight: 600; - color: var(--text-primary); - margin: 0; -} -.time-main .med-name span.clickable { - cursor: pointer; -} -.time-main .med-name .med-name-stack.clickable { - cursor: pointer; -} -.time-main .med-name span.clickable:hover .med-avatar { - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); -} -.time-col { - display: flex; - align-items: center; - justify-content: flex-start; -} -.time-chip { - display: inline-flex; - align-items: center; - gap: 0.5rem; - border: 1px solid rgba(47, 134, 246, 0.4); - border-radius: 8px; - padding: 0.5rem 0.75rem; - background: var(--accent-bg); - color: var(--accent-light); - font-weight: 600; - font-size: 0.9rem; - font-variant-numeric: tabular-nums; -} -.times-chip { - white-space: nowrap; -} - -/* Dose tracking */ -.doses-col { - display: flex; - flex-direction: column; - gap: 0.4rem; -} - -.dose-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.4rem 0.4rem; - background: var(--accent-bg); - border: 1px solid rgba(47, 134, 246, 0.3); - border-radius: 6px; - font-size: 0.85rem; - transition: all 0.2s ease; -} - -.dose-item.taken { - background: var(--success-bg); - border-color: rgba(57, 217, 138, 0.3); - opacity: 0.7; -} - -.dose-item.taken .dose-time, -.dose-item.taken .dose-usage { - text-decoration: line-through; - color: var(--text-secondary); -} - -/* All persons have taken this dose */ -.dose-item.all-taken { - background: var(--success-bg); - border-color: rgba(57, 217, 138, 0.3); - opacity: 0.7; -} - -.dose-item.all-taken .dose-time, -.dose-item.all-taken .dose-usage { - text-decoration: line-through; - color: var(--text-secondary); -} - -/* Overdue (past, not taken) doses */ -.dose-item.overdue { - background: var(--warning-bg); - border-color: rgba(252, 211, 77, 0.4); -} - -.dose-item.overdue .dose-time { - color: var(--warning); -} - -.dose-item.overdue .dose-btn.take { - box-shadow: 0 0 0 2px var(--warning); - animation: overduePulse 1.5s ease-in-out infinite; -} - -.dose-item.overdue .dose-btn.take:hover { - filter: brightness(0.87); -} - -@keyframes overduePulse { - 0%, - 100% { - box-shadow: 0 0 0 2px var(--warning); - } - 50% { - box-shadow: 0 0 0 0 var(--warning); - } -} - -/* Overdue AND taken = show it was late */ -.dose-item.overdue.taken { - background: rgba(252, 211, 77, 0.08); - border-color: rgba(252, 211, 77, 0.2); - opacity: 0.6; -} - -.dose-item.overdue.taken .dose-time, -.dose-item.overdue.taken .dose-usage { - text-decoration: line-through; - color: var(--text-secondary); -} - -.dose-item.med-low, -.dose-item.med-low.all-taken, -.dose-item.med-low.taken, -.dose-item.med-low.future, -.dose-item.med-low.overdue, -.dose-item.med-low.overdue.taken { - border-color: rgba(252, 211, 77, 0.5); - box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 88%, black 12%); -} - -.dose-item.med-low:not(.all-taken):not(.taken):not(.overdue):not(.med-empty) { - background: color-mix(in srgb, var(--warning) 9%, var(--accent-bg)); -} - -.dose-item.med-empty, -.dose-item.med-empty.all-taken, -.dose-item.med-empty.taken, -.dose-item.med-empty.future, -.dose-item.med-empty.overdue, -.dose-item.med-empty.overdue.taken { - background: color-mix(in srgb, var(--danger) 13%, transparent); - border-color: color-mix(in srgb, var(--danger) 46%, transparent); - opacity: 1; -} - -.dose-item.med-empty .dose-time, -.dose-item.med-empty .dose-usage { - color: color-mix(in srgb, var(--danger) 82%, white 18%); - text-decoration: line-through; - text-decoration-thickness: 2px; -} - -.dose-item.med-empty .dose-person { - background: color-mix(in srgb, var(--danger) 18%, transparent); -} - -.dose-item.med-empty .dose-person .person-name, -.dose-item.med-empty .dose-person.taken .person-name { - color: color-mix(in srgb, var(--danger) 80%, white 20%); -} - -.dose-time { - font-weight: 600; - color: var(--accent-light); - min-width: 50px; -} - -.dose-usage { - color: var(--text-secondary); - font-size: 0.8rem; - display: flex; - flex-direction: column; - gap: 0.05rem; - flex: 1; - min-width: 0; -} - -.dose-usage-main { - line-height: 1.15; -} - -.dose-usage-weight { - font-size: 0.78rem; - line-height: 1.15; - color: var(--text-secondary); -} - -.dose-btn { - margin-left: auto; - height: 28px; - min-height: 28px; - padding: 0 10px; - border-radius: var(--btn-radius); - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - font-size: 0.8rem; - font-weight: 500; - white-space: nowrap; - cursor: pointer; - transition: - background 150ms ease, - border-color 150ms ease, - color 150ms ease, - filter 150ms ease; - flex-shrink: 0; - box-shadow: none; -} - -.dose-btn .dose-btn-label { - display: none; -} - -.dose-btn.take { - background: var(--success); - border: 1px solid var(--success); - color: white; -} - -/* Main app upcoming schedule: improve contrast on bright success button */ -.dashboard-schedules-section .dose-btn.take { - background: #1f8a70; - border-color: #1f8a70; - color: #f3fffb; - font-weight: 600; -} - -.dashboard-schedules-section .dose-btn.take:hover:not(:disabled) { - background: #19745f; - border-color: #19745f; - filter: none; -} - -[data-theme="light"] .dashboard-schedules-section .dose-btn.take { - background: #67d9b8; - border-color: #3fbf9b; - color: #08352b; -} - -[data-theme="light"] .dashboard-schedules-section .dose-btn.take:hover:not(:disabled) { - background: #55cfac; - border-color: #37b691; -} - -.dose-btn.take:hover:not(:disabled) { - filter: brightness(0.87); -} - -.dose-btn.take:disabled { - opacity: 0.35; - cursor: not-allowed; - background: var(--bg-tertiary); - border-color: var(--border-primary); - color: var(--text-secondary); - filter: none; -} - -.dose-btn.take.out-of-stock, -.dose-btn.take.out-of-stock:disabled, -.dashboard-schedules-section .dose-btn.take.out-of-stock, -.dashboard-schedules-section .dose-btn.take.out-of-stock:disabled, -[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock, -[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock:disabled, -[data-theme="light"] .dose-btn.take.out-of-stock, -[data-theme="light"] .dose-btn.take.out-of-stock:disabled { - opacity: 1; - background: var(--danger); - border-color: var(--danger); - color: white; - box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); - filter: none; -} - -.dose-item.future { - opacity: 0.5; -} - -.dose-btn.undo { - background: var(--warning); - border: 1px solid var(--warning); - color: #1a1a2e; -} - -.dose-btn.undo:hover { - filter: brightness(0.9); -} - -/* Per-person dose tracking */ -.dose-checks { - display: flex; - flex-direction: column; - gap: 4px; - margin-left: auto; -} - -.dose-person { - display: flex; - align-items: center; - gap: 6px; - padding: 2px 6px; - border-radius: 4px; - background: rgba(255, 255, 255, 0.03); -} - -.dose-person.taken { - background: var(--success-bg); -} - -.dose-person.overdue { - background: var(--warning-bg); -} - -.dose-person .person-name { - font-size: 0.75rem; - color: var(--text-secondary); - min-width: 60px; - margin-right: 0.45rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.dose-person .person-name.clickable { - cursor: pointer; -} - -.dose-person .person-name.clickable:hover { - color: var(--primary); - text-decoration: underline; -} - -.dose-person.taken .person-name { - color: var(--success); -} - -.dose-person .dose-btn { - margin-left: 0; - height: 24px; - min-height: 24px; - padding: 0 6px; - font-size: 0.75rem; -} - -@media (min-width: 769px) { - .time-row { - grid-template-columns: minmax(170px, 230px) 1fr; - gap: 0.85rem; - } - - .doses-col { - gap: 0.5rem; - } - - .dose-item { - display: grid; - grid-template-columns: 5rem minmax(12rem, 1fr) auto auto; - align-items: center; - column-gap: 0.8rem; - padding: 0.45rem 0.7rem; - } - - .dose-time { - min-width: 0; - } - - .dose-usage { - min-width: 0; - flex-direction: row; - align-items: baseline; - gap: 0.45rem; - white-space: nowrap; - } - - .dose-usage-main, - .dose-usage-weight { - white-space: nowrap; - } - - .dose-item .reminder-icon { - margin: 0; - justify-self: center; - } - - .dose-item .dose-checks { - grid-column: 4; - margin-left: 0; - align-items: flex-end; - } - - .dose-person { - padding: 3px 8px; - gap: 8px; - } - - .dose-person .person-name { - min-width: 80px; - max-width: 16rem; - } -} - -[data-theme="light"] .dose-btn.take { - color: #0f172a; -} - -.highlights { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.card p { - margin: 0; -} - -.table { - width: 100%; - display: flex; - flex-direction: column; - gap: 0; - margin-top: 0.5rem; -} -.table-head, -.table-row { - display: grid; - grid-template-columns: minmax(180px, 2fr) 100px 140px 140px 120px; - align-items: center; - gap: 1rem; - padding: 0.75rem 1rem; -} -.table-head { - color: #7ca7ff; - font-weight: 600; - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 0.04em; - background: rgba(47, 134, 246, 0.06); - border-radius: 8px; - margin-bottom: 0.5rem; -} -.table-row { - background: rgba(255, 255, 255, 0.02); - border-radius: 8px; - margin-bottom: 0.35rem; - transition: background 150ms ease; -} -.table-row:hover { - background: rgba(255, 255, 255, 0.04); -} -.table-row:last-child { - margin-bottom: 0; -} -.table-4 .table-head, -.table-4 .table-row { - grid-template-columns: minmax(200px, 2.2fr) 150px 130px 170px; -} -.table-5 .table-head, -.table-5 .table-row { - grid-template-columns: minmax(180px, 2fr) 120px 100px 130px 130px; -} -.table-6 .table-head, -.table-6 .table-row { - grid-template-columns: minmax(160px, 2fr) 100px 80px 110px 110px 110px; -} -.table-7 .table-head, -.table-7 .table-row { - grid-template-columns: minmax(140px, 1.5fr) 90px 70px 100px 100px 90px 90px; -} - -.table-8 .table-head, -.table-8 .table-row { - grid-template-columns: minmax(130px, 1.4fr) 90px 130px 70px 95px minmax(130px, 1.15fr) 95px; -} - -.email-sent-status { - font-size: 0.8rem; - color: var(--success); -} - -.next-reminder-date { - font-size: 0.8rem; - color: var(--accent-light); -} - -.status-chip { - display: inline-flex; - align-items: center; - gap: 0.4rem; - padding: 0.4rem 0.75rem; - border-radius: 6px; - font-size: 0.8rem; - font-weight: 600; - white-space: nowrap; -} -.status-chip.success { - background: rgba(57, 217, 138, 0.15); - color: #6ee7b7; - border: 1px solid rgba(57, 217, 138, 0.3); -} -.status-chip.success::before { - content: "✓"; - font-size: 0.75rem; -} -.status-chip.danger { - background: rgba(255, 94, 94, 0.15); - color: #fca5a5; - border: 1px solid rgba(255, 94, 94, 0.3); -} -.status-chip.danger::before { - content: "!"; - font-weight: 700; -} -.status-chip.warning { - background: rgba(252, 211, 77, 0.15); - color: #fcd34d; - border: 1px solid rgba(252, 211, 77, 0.3); -} -.status-chip.warning::before { - content: "!"; - font-weight: 700; -} -.status-chip.high { - background: rgba(57, 217, 138, 0.15); - color: #6ee7b7; - border: 1px solid rgba(57, 217, 138, 0.3); -} -.status-chip.high::before { - content: "★"; -} -.status-chip.small { - font-size: 0.7rem; - padding: 0.2rem 0.5rem; - word-spacing: 0.1rem; -} - -@media (max-width: 760px) { - .table-head, - .table-row { - grid-template-columns: 1fr; - gap: 0.25rem; - } - .table-head { - display: none; - } - .table-row .hide-on-card { - display: none; - } - .table-row { - padding: 0.75rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - align-items: stretch; - } - .table-row > span { - display: flex; - justify-content: space-between; - align-items: center; - text-align: left; - } - .table-row > span::before { - content: attr(data-label); - font-weight: 600; - color: var(--accent-light); - font-size: 0.75rem; - text-transform: uppercase; - margin-right: 1rem; - flex-shrink: 0; - text-align: left; - } - .table-row > .date-pair-stack { - gap: 0.45rem; - } - .table-row > .date-pair-stack::before { - display: none; - content: none; - } - .table-row > .date-pair-stack .date-pair-entry { - flex-direction: row; - justify-content: space-between; - align-items: flex-start; - gap: 0.75rem; - } - .table-row > .date-pair-stack .date-pair-label { - margin-right: 0.75rem; - flex-shrink: 0; - } - .table-row > .date-pair-stack .date-pair-value { - text-align: right; - } - /* First span (name cell) - centered horizontal layout */ - .table-row > span:first-child { - justify-content: flex-start; - padding-bottom: 0.15rem; - margin-bottom: 0; - } - .table-row > span:first-child::before { - display: none; /* Hide "NAME" label on mobile */ - } - /* Status chip in table row - left aligned */ - .table-row > span.status-chip { - align-self: flex-start; - justify-content: flex-start; - gap: 0.4rem; - } - .table-row > span.status-chip::before { - margin-right: 0; - } - /* Avatar + name layout - left aligned */ - .table-row .cell-with-avatar { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - .table-row .cell-with-avatar .med-name-line { - display: flex; - align-items: flex-start; - justify-content: flex-start; - gap: 0.4rem; - } - .table-row .cell-with-avatar .med-avatar { - flex-shrink: 0; - } - /* Icons on separate line on mobile - left aligned */ - .table-row .cell-with-avatar .med-icons { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 0.5rem; - width: 100%; - } - /* Badges and icons wrap to next line if needed but stay together */ - .table-row .taken-by-badge, - .table-row .reminder-icon, - .table-row .notes-icon { - flex-shrink: 0; - } - - /* Prevent data-label ::before on nested spans inside name cell */ - .table-row .cell-with-avatar span::before { - display: none; - } - .table-row .cell-with-avatar .taken-by-badge, - .table-row .cell-with-avatar .med-name-text { - display: inline !important; - justify-content: initial; - } - .table-row .med-taken-by-line { - display: flex !important; - align-items: center; - flex-wrap: wrap; - row-gap: 0.2rem; - column-gap: 0.5rem; - justify-content: flex-start; - } - .table-row .cell-with-avatar .taken-by-badge { - display: inline-flex !important; - align-items: center; - line-height: 1; - margin-left: 0; - } - .table-4 .table-head, - .table-4 .table-row, - .table-5 .table-head, - .table-5 .table-row, - .table-6 .table-head, - .table-6 .table-row, - .table-7 .table-head, - .table-7 .table-row { - grid-template-columns: 1fr; - } -} - -@media (max-width: 600px) { - .page { - padding: 0.75rem 0.4rem 1rem; - } - - .grid { - grid-template-columns: 1fr; - } - - .card { - padding: 0.65rem; - overflow: hidden; - max-width: 100%; - } - - .hero { - flex-direction: column; - align-items: flex-start; - padding: 1rem; - gap: 1rem; - } - - .hero h1 { - font-size: 1.3rem; - } - - .header-actions { - width: 100%; - justify-content: space-between; - } - - .tabs { - flex-wrap: wrap; - gap: 0.4rem; - } - - .tabs .pill { - font-size: 0.75rem; - padding: 0.3rem 0.6rem; - } - - .card { - padding: 1rem; - border-radius: 10px; - } - - .card-head { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .card h2 { - font-size: 1.05rem; - } - - .grid { - grid-template-columns: 1fr; - } - - .time-row { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .doses-col { - flex-direction: row; - flex-wrap: wrap; - } - - .dose-item { - flex: 1 1 auto; - min-width: 140px; - gap: 0.35rem; - padding: 0.35rem 0.3rem; - } - - .dose-time { - min-width: 42px; - padding-left: 0.2rem; - } - - .dose-usage { - line-height: 1.15; - } - - .dose-checks { - gap: 2px; - } - - .dose-person { - gap: 4px; - padding: 1px 4px; - } - - .dose-person .person-name { - min-width: 0; - max-width: 5.6rem; - margin-right: 0.35rem; - } - - .dose-person .dose-btn { - height: 22px; - min-height: 22px; - padding: 0 5px; - font-size: 0.72rem; - } - - .dose-btn .dose-btn-label { - display: inline; - } - - .time-chip { - font-size: 0.8rem; - padding: 0.4rem 0.6rem; - } - - .day-block { - padding: 0.75rem; - } - - /* Use more horizontal space for schedule cards on phones */ - .dashboard-schedules-section > .card { - padding-inline: 0.35rem; - overflow: visible; - } - - /* Keep header controls aligned like other dashboard cards */ - .dashboard-schedules-section .card-head { - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: 0.6rem; - padding-inline: 0.65rem; - } - - .dashboard-schedules-section .card-head-actions { - margin-left: auto; - gap: 0.5rem; - flex-shrink: 0; - } - - .dashboard-schedules-section .day-block { - margin-inline: -0.1rem; - } - - .status-chip { - font-size: 0.7rem; - padding: 0.3rem 0.5rem; - } - - .med-details { - grid-template-columns: 1fr; - gap: 0.2rem; - } - - button { - padding: 0.6rem 1rem; - font-size: 0.85rem; - } - - .planner-email-action, - .email-send-action { - flex-direction: column; - align-items: stretch; - gap: 0.5rem; - } - - .planner-email-action button, - .email-send-action button { - width: 100%; - } -} - -@media (max-width: 900px) { - .hero { - grid-template-columns: 1fr; - } - .stats { - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - } -} - -.planner { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; - padding: 1rem; - background: linear-gradient(135deg, rgba(47, 134, 246, 0.04), rgba(115, 195, 255, 0.02)); - border: 1px solid rgba(47, 134, 246, 0.15); - border-radius: 12px; - margin-bottom: 1rem; -} -.planner label { - display: flex; - flex-direction: column; - gap: 0.5rem; - color: #93a3b8; - font-size: 0.8rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.04em; -} -.planner .planner-checkbox-row { - grid-column: 1 / -1; - display: flex; - flex-direction: row; - align-items: center; - gap: 0.5rem; -} -.planner label.planner-checkbox { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: nowrap; - gap: 0.75rem; - color: var(--text-secondary); - font-size: 0.875rem; - font-weight: 400; - text-transform: none; - letter-spacing: normal; - cursor: pointer; -} -.planner-checkbox input[type="checkbox"] { - width: 1.125rem; - height: 1.125rem; - cursor: pointer; - accent-color: var(--accent-primary); -} -.planner-actions { - grid-column: 1 / -1; - display: flex; - justify-content: flex-end; - gap: 0.75rem; - padding-top: 0.5rem; - border-top: 1px solid rgba(255, 255, 255, 0.06); - margin-top: 0.5rem; -} - -.planner-email-action { - display: flex; - align-items: center; - gap: 1rem; - padding-top: 1rem; - margin-top: 0.5rem; - border-top: 1px solid var(--border-primary); -} - -.email-send-action { - display: flex; - align-items: center; - gap: 1rem; - padding-top: 1rem; - margin-top: 0.5rem; - border-top: 1px solid var(--border-primary); -} - -@media (max-width: 600px) { - .planner { - grid-template-columns: 1fr; - } -} - -/* Settings styles */ -.settings-form { - display: flex; - flex-direction: column; - gap: 1.5rem; - max-width: 100%; - overflow: hidden; -} - -.setting-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem; - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - border-radius: 12px; - gap: 1rem; -} - -@media (max-width: 480px) { - .setting-row { - padding: 0.75rem; - gap: 0.75rem; - } -} - -.setting-row.inline { - padding: 0; - background: transparent; - border: none; - justify-content: flex-start; - gap: 0.75rem; -} - -.setting-row.language-row { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: flex-start; - gap: 1rem; -} - -.setting-row.language-row .setting-label { - flex: 0 0 auto; - min-width: 100px; -} - -.select-field.language-select, -.language-select { - flex: 1 1 auto; - min-width: 140px; - max-width: 200px; - padding: 0.6rem 2rem 0.6rem 0.75rem; - font-size: 1rem; - background-color: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: 8px; - color: var(--text-primary); - cursor: pointer; - background-position: right 0.9rem center; -} - -.select-field.language-select:hover, -.language-select:hover { - border-color: var(--accent); -} - -.select-field.language-select:focus, -.language-select:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); -} - -.language-select option { - padding: 0.5rem; -} - -.setting-info { - flex: 1; -} - -.setting-label { - font-weight: 600; - color: var(--text-primary); - font-size: 1rem; -} - -.setting-desc { - margin: 0.25rem 0 0; - color: var(--text-secondary); - font-size: 0.9rem; -} - -.setting-group { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.setting-group label { - display: flex; - flex-direction: column; - gap: 0.5rem; - color: var(--text-secondary); - font-size: 0.85rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.03em; -} - -/* Stock calculation mode radio cards */ -.calculation-mode-group { - grid-template-columns: 1fr 1fr; -} - -.calculation-mode-group label { - text-transform: none; - letter-spacing: normal; -} - -.radio-card { - cursor: pointer; - padding: 1rem; - background: var(--bg-secondary); - border: 2px solid var(--border-primary); - border-radius: 10px; - transition: all 0.2s ease; -} - -.radio-card:hover { - border-color: var(--accent-light); - background: var(--bg-tertiary); -} - -.radio-card.selected { - border-color: var(--accent); - background: var(--bg-tertiary); - box-shadow: 0 0 0 1px var(--accent); -} - -.radio-card input[type="radio"] { - display: none; -} - -.radio-card-content { - display: flex; - align-items: flex-start; - gap: 0.75rem; -} - -.radio-card-icon { - font-size: 1.5rem; - line-height: 1; -} - -.radio-card-text { - display: flex; - flex-direction: column; - gap: 0.25rem; -} - -.radio-card-title { - font-size: 0.95rem; - font-weight: 600; - color: var(--text-primary); -} - -.radio-card-desc { - font-size: 0.8rem; - color: var(--text-secondary); - line-height: 1.4; -} - -.setting-section { - padding: 1.25rem; - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - border-radius: 12px; -} - -.setting-section h3 { - margin: 0 0 0.5rem; - font-size: 0.85rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--accent-light); -} - -.setting-section .setting-desc { - margin: 0 0 1rem; - font-size: 0.8rem; - color: var(--text-secondary); -} - -.setting-section .setting-hint { - margin: 0 0 1rem; - font-size: 0.8rem; - color: var(--text-secondary); - background: var(--accent-bg); - padding: 0.5rem 0.75rem; - border-radius: 6px; - border-left: 3px solid var(--accent); -} - -.setting-section .setting-hint code { - background: var(--bg-input); - padding: 0.1rem 0.4rem; - border-radius: 4px; - font-size: 0.85em; -} - -.input-hint { - font-size: 0.75rem; - color: var(--text-secondary); - margin-top: 0.25rem; -} - -.setting-info-box { - background: var(--accent-bg); - border: 1px solid var(--border-secondary); - border-left: 3px solid var(--accent); - border-radius: 8px; - padding: 0.75rem 1rem; - margin-bottom: 1rem; -} - -.setting-info-box p { - margin: 0; - font-size: 0.85rem; - color: var(--text-secondary); - line-height: 1.5; -} - -.setting-info-box strong { - color: var(--text-primary); -} - -.setting-info-box.success { - background: var(--success-bg); - border-left-color: var(--success); -} - -.setting-info-box.success p { - color: var(--success); -} - -/* Info Tooltips */ -.info-tooltip { - display: inline-flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; - font-size: 0.85rem; - color: var(--text-secondary); - cursor: help; - transition: color 0.15s; - position: relative; -} - -.info-tooltip:hover { - color: var(--accent); -} - -.info-tooltip.small { - width: 1rem; - height: 1rem; - font-size: 0.75rem; -} - -.info-tooltip[title] { - position: relative; -} - -.tooltip-trigger { - position: relative; -} - -.info-tooltip::after, -.tooltip-trigger[data-tooltip]::after { - content: attr(data-tooltip); - position: absolute; - bottom: calc(100% + 8px); - left: 50%; - transform: translateX(-50%); - background: var(--bg-tertiary); - color: var(--text-primary); - padding: 0.5rem 0.75rem; - border-radius: 8px; - font-size: 0.8rem; - font-weight: 400; - line-height: 1.4; - white-space: pre-line; - text-transform: none; - letter-spacing: normal; - width: max-content; - max-width: 300px; - text-align: left; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); - border: 1px solid var(--border-primary); - opacity: 0; - visibility: hidden; - transition: - opacity 0.15s, - visibility 0.15s; - z-index: 1100; - pointer-events: none; -} - -.info-tooltip::before, -.tooltip-trigger[data-tooltip]::before { - content: ""; - position: absolute; - bottom: calc(100% + 4px); - left: 50%; - transform: translateX(-50%); - border: 5px solid transparent; - border-top-color: var(--border-primary); - opacity: 0; - visibility: hidden; - transition: - opacity 0.15s, - visibility 0.15s; - z-index: 1101; -} - -/* Tooltip aligned to left edge of icon (prevents clipping inside modals) */ -.info-tooltip.tooltip-align-left::after { - left: 0; - transform: none; -} -.info-tooltip.tooltip-align-left::before { - left: 50%; - transform: translateX(-50%); -} - -/* Tooltip aligned to right edge of icon (for right-most action buttons) */ -.tooltip-trigger.tooltip-align-right[data-tooltip]::after { - left: auto; - right: 0; - transform: none; -} - -.tooltip-trigger.tooltip-align-right[data-tooltip]::before { - left: auto; - right: 12px; - transform: none; -} - -.tooltip-trigger[data-tooltip]::after { - text-align: center; -} - -.info-tooltip:hover::after, -.info-tooltip:hover::before, -.info-tooltip:focus::after, -.info-tooltip:focus::before, -.tooltip-trigger[data-tooltip]:hover::after, -.tooltip-trigger[data-tooltip]:hover::before, -.tooltip-trigger[data-tooltip]:focus::after, -.tooltip-trigger[data-tooltip]:focus::before, -.tooltip-trigger[data-tooltip]:focus-visible::after, -.tooltip-trigger[data-tooltip]:focus-visible::before, -.info-tooltip.tooltip-active::after, -.info-tooltip.tooltip-active::before, -.tooltip-trigger.tooltip-active::after, -.tooltip-trigger.tooltip-active::before { - opacity: 1; - visibility: visible; -} - -/* Mobile tooltip - disable hover, use click only */ -@media (max-width: 640px) { - .info-tooltip:hover::after, - .info-tooltip:hover::before { - opacity: 0; - visibility: hidden; - } - - .info-tooltip.tooltip-active::after { - opacity: 1; - visibility: visible; - position: fixed; - top: auto; - bottom: var(--tooltip-bottom, 50%); - left: 16px !important; - right: 16px !important; - transform: none !important; - width: auto !important; - max-width: none !important; - z-index: 9999; - } - - .info-tooltip.tooltip-active::before { - display: none; - } - - /* Share button tooltip: compact bubble on mobile with safe layering */ - .dashboard-schedules-section .share-btn.tooltip-trigger[data-tooltip]::after { - left: auto; - right: 0; - transform: none; - max-width: 220px; - z-index: 10000; - } - - .dashboard-schedules-section .share-btn.tooltip-trigger[data-tooltip]::before { - left: auto; - right: 12px; - transform: none; - z-index: 10001; - } - - .info-tooltip::before { - display: none; - } -} - -/* Channels Overview */ -.channels-overview { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1.5rem; - padding: 1rem 1.25rem; - background: var(--bg-tertiary); - border: 1px solid var(--border-primary); - border-radius: 12px; -} - -.channels-status { - display: flex; - gap: 0.75rem; -} - -/* Notification Matrix */ -.notification-matrix { - background: var(--bg-input); - border-radius: 10px; - overflow: hidden; - border: 1px solid var(--border-primary); -} - -.matrix-header { - display: grid; - grid-template-columns: 1fr 80px 80px; - gap: 0.5rem; - padding: 0.75rem 1rem; - background: var(--bg-tertiary); - border-bottom: 1px solid var(--border-primary); -} - -.matrix-header .matrix-label { - font-size: 0.8rem; - color: var(--text-secondary); -} - -.matrix-channel { - text-align: center; - font-size: 0.8rem; - font-weight: 600; - color: var(--text-primary); -} - -.matrix-row { - display: grid; - grid-template-columns: 1fr 80px 80px; - gap: 0.5rem; - padding: 0.75rem 1rem; - align-items: center; -} - -.matrix-row:not(:last-child) { - border-bottom: 1px solid var(--border-primary); -} - -.matrix-row .matrix-label { - font-size: 0.9rem; - color: var(--text-primary); -} - -.matrix-cell { - display: flex; - justify-content: center; - align-items: center; -} - -.matrix-cell .toggle-switch.small input:disabled + .toggle-slider { - opacity: 0.4; - cursor: not-allowed; -} - -.hint-text { - font-size: 0.85rem; - color: var(--text-secondary); - margin-top: 0.75rem; - padding: 0.5rem 0.75rem; - background: var(--warning-bg); - border-radius: 6px; -} - -/* Notification Matrix Mobile */ -@media (max-width: 480px) { - .notification-matrix { - margin: 0 -0.5rem; - border-radius: 8px; - } - - .matrix-header, - .matrix-row { - grid-template-columns: 1fr 60px 60px; - padding: 0.6rem 0.75rem; - gap: 0.25rem; - } - - .matrix-channel, - .matrix-header .matrix-label { - font-size: 0.7rem; - } - - .matrix-row .matrix-label { - font-size: 0.8rem; - } -} - -/* Settings Grid - Two column layout */ -.settings-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1.5rem; - align-items: start; -} - -@media (max-width: 900px) { - .settings-grid { - grid-template-columns: 1fr; - } -} - -/* Notification Channels Grid */ -.notification-channels-grid { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 1.5rem; -} - -.notification-channel { - background: var(--bg-input); - border: 2px solid var(--border-primary); - border-radius: 12px; - overflow: hidden; - transition: border-color 0.2s; -} - -.notification-channel.enabled { - border-color: var(--accent); -} - -.channel-header { - padding: 0; -} - -.channel-toggle { - display: flex; - align-items: center; - gap: 0.75rem; - width: 100%; - padding: 1rem 1.25rem; - background: transparent; - border: none; - cursor: pointer; - transition: background 150ms ease; - border-radius: var(--btn-radius); - box-shadow: none; -} - -.channel-toggle:hover { - background: var(--accent-bg); -} - -.channel-toggle.active { - background: var(--accent-bg); -} - -.channel-icon { - font-size: 1.5rem; -} - -.channel-name { - font-size: 1rem; - font-weight: 600; - color: var(--text-primary); - flex: 1; - text-align: left; -} - -.channel-badge { - font-size: 0.7rem; - font-weight: 700; - padding: 0.25rem 0.6rem; - border-radius: 4px; - text-transform: uppercase; -} - -.channel-badge.on { - background: var(--success-bg); - color: var(--success); -} - -.channel-badge.off { - background: var(--bg-primary); - color: var(--text-secondary); -} - -.channel-content { - padding: 0 1.25rem 1.25rem; - border-top: 1px solid var(--border-primary); - background: var(--bg-secondary); -} - -@media (max-width: 480px) { - .channel-content { - padding: 0 0.75rem 1rem; - } - - .channel-toggle { - padding: 0.75rem 1rem; - } -} - -.channel-config { - padding-top: 1rem; -} - -.channel-config label { - display: block; -} - -.channel-config .smtp-info { - margin-top: 0.5rem; -} - -.channel-reminder-types { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.5rem 1rem; - padding: 1rem 0; - border-top: 1px solid var(--border-primary); - margin-top: 1rem; -} - -.reminder-types-label { - font-size: 0.85rem; - color: var(--text-secondary); - font-weight: 500; - width: 100%; - margin-bottom: 0.25rem; -} - -.reminder-type-option { - display: flex !important; - flex-direction: row !important; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 0.75rem; - background: var(--bg-input); - border-radius: 8px; - cursor: pointer; - transition: background 0.2s; - font-size: 0.9rem; -} - -.reminder-type-option:hover { - background: var(--accent-bg); -} - -.reminder-type-option input[type="checkbox"] { - width: 18px; - height: 18px; - margin: 0; - accent-color: var(--accent); -} - -.reminder-type-option span { - color: var(--text-primary); -} - -.channel-actions { - display: flex; - align-items: center; - gap: 1rem; - padding-top: 0.75rem; - border-top: 1px solid var(--border-primary); - margin-top: 1rem; -} - -/* Schedule Overview */ -.schedule-overview { - background: var(--bg-input); - border-radius: 8px; - padding: 1rem; - margin-bottom: 1.5rem; -} - -.schedule-header { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.75rem; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--border-primary); -} - -.schedule-title { - font-size: 0.8rem; - font-weight: 600; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.schedule-row { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 0.5rem; - padding: 0.35rem 0; - font-size: 0.85rem; -} - -.schedule-row:not(:last-child) { - border-bottom: 1px solid var(--border-primary); - padding-bottom: 0.5rem; - margin-bottom: 0.35rem; -} - -.schedule-label { - color: var(--text-secondary); - flex-shrink: 0; - min-width: 0; -} - -.schedule-value { - color: var(--text-primary); - font-weight: 500; - text-align: right; - word-break: break-word; -} - -/* Mobile: stack schedule rows vertically when text is long */ -@media (max-width: 400px) { - .schedule-row { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - .schedule-value { - text-align: left; - } -} - -/* Legacy support for old channel-btn (can remove later) */ -.channel-btn { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.25rem; - padding: 0.75rem 1.25rem; - background: var(--bg-input); - border: 2px solid var(--border-primary); - border-radius: 12px; - cursor: pointer; - transition: all 0.2s ease; - min-width: 80px; -} - -.channel-btn:hover { - border-color: var(--accent); - background: var(--accent-bg); -} - -.channel-btn.active { - border-color: var(--accent); - background: var(--accent-bg); -} - -.channel-status { - font-size: 0.65rem; - font-weight: 700; - padding: 0.15rem 0.5rem; - border-radius: 4px; -} - -.channel-status.on { - background: var(--success-bg); - color: var(--success); -} - -.channel-status.off { - background: var(--bg-primary); - color: var(--text-secondary); -} - -.schedule-info { - display: flex; - flex-direction: column; - gap: 0.35rem; - font-size: 0.8rem; -} - -/* Section Header with Tooltip */ -.section-header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.5rem; - margin-bottom: 1rem; -} - -.section-header h3 { - margin: 0; - font-size: 0.85rem; - text-transform: uppercase; - letter-spacing: 0.04em; - color: var(--accent-light); -} - -/* Threshold Input */ -.threshold-input { - margin-bottom: 1rem; -} - -.threshold-label { - display: block; - font-size: 0.9rem; - color: var(--text-primary); - margin-bottom: 0.5rem; -} - -.threshold-field { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.threshold-field input { - width: 80px; - text-align: center; -} - -.threshold-unit { - color: var(--text-secondary); - font-size: 0.9rem; -} - -/* Threshold Chips Group - 3-column grid for Critical/Low/High */ -.threshold-chips-group { - grid-template-columns: 1fr 1fr 1fr; -} - -.threshold-chips-group label { - text-transform: none; - letter-spacing: normal; -} - -.threshold-chip-label { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.threshold-chip-label .status-chip { - pointer-events: none; -} - -.threshold-invalid input { - border-color: var(--danger) !important; - box-shadow: 0 0 0 1px var(--danger); -} - -.threshold-validation-error { - margin: 0.75rem 0 0; - padding: 0.5rem 0.75rem; - background: rgba(255, 94, 94, 0.1); - border: 1px solid rgba(255, 94, 94, 0.3); - border-radius: 6px; - color: #fca5a5; - font-size: 0.8rem; - font-weight: 500; -} - -/* Stock Reminder Trigger in Notifications */ -.stock-reminder-trigger { - margin-bottom: 0.5rem; -} - -.stock-reminder-trigger .setting-desc { - display: flex; - align-items: center; - gap: 0.5rem; - flex-wrap: wrap; - margin: 0; - font-size: 0.9rem; - color: var(--text-secondary); -} - -.stock-reminder-trigger .status-chip { - pointer-events: none; -} - -/* Compact Setting Row - for inline toggles without card styling */ -.setting-row.compact { - padding: 0.75rem 0; - margin-top: 0.5rem; - background: transparent; - border: none; - border-radius: 0; -} - -.setting-row.compact .setting-label { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.9rem; -} - -/* Field Label with inline tooltip */ -.field-label { - display: flex; - align-items: center; - gap: 0.35rem; - font-size: 0.85rem; - font-weight: 600; - color: var(--text-secondary); - margin-bottom: 0.5rem; -} - -.field-examples { - display: block; - font-size: 0.75rem; - color: var(--text-secondary); - margin-top: 0.35rem; - font-family: "SF Mono", "Fira Code", monospace; -} - -/* Input with tooltip beside */ -.input-with-tooltip { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.input-with-tooltip input { - flex: 1; - min-width: 0; -} - -.input-with-tooltip .info-tooltip { - flex-shrink: 0; - cursor: pointer; - padding: 0.25rem; -} - -/* SMTP Info */ -.smtp-info { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 0.75rem; - background: var(--bg-input); - border-radius: 8px; - margin-top: 0.75rem; -} - -.smtp-summary { - font-size: 0.8rem; - color: var(--text-secondary); - font-family: "SF Mono", "Fira Code", monospace; -} - -@media (max-width: 500px) { - .channels-overview { - flex-direction: column; - gap: 1rem; - } - - .channels-status { - width: 100%; - justify-content: center; - } - - .schedule-info { - width: 100%; - align-items: center; - } -} - -.setting-actions { - display: flex; - align-items: center; - gap: 1rem; - padding-top: 0.5rem; -} - -.api-key-actions { - padding-top: 0.35rem; - align-items: stretch; -} - -.api-key-token-input { - flex: 1; - font-family: "SF Mono", "Fira Code", monospace; - font-size: 0.84rem; -} - -@media (max-width: 700px) { - .api-key-actions { - flex-direction: column; - align-items: stretch; - } -} - -.form-footer { - display: flex; - justify-content: flex-end; - padding-top: 1rem; - border-top: 1px solid var(--border-primary); -} - -/* Toggle switch */ -.toggle-switch { - position: relative; - width: 52px; - height: 28px; - flex-shrink: 0; -} - -.toggle-switch.small { - width: 44px; - height: 24px; -} - -.toggle-switch input { - opacity: 0; - width: 0; - height: 0; -} - -.toggle-slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: var(--border-secondary); - border-radius: 28px; - transition: background 200ms ease; -} - -.toggle-slider::before { - content: ""; - position: absolute; - height: 22px; - width: 22px; - left: 3px; - bottom: 3px; - background: white; - border-radius: 50%; - transition: transform 200ms ease; -} - -.toggle-switch.small .toggle-slider::before { - height: 18px; - width: 18px; -} - -.toggle-switch input:checked + .toggle-slider { - background: var(--accent); -} - -.toggle-switch input:checked + .toggle-slider::before { - transform: translateX(24px); -} - -.toggle-switch.small input:checked + .toggle-slider::before { - transform: translateX(20px); -} - -.toggle-switch.disabled .toggle-slider { - opacity: 0.4; - cursor: not-allowed; -} - -.toggle-switch.disabled input { - cursor: not-allowed; -} - -@media (max-width: 600px) { - .setting-group { - grid-template-columns: 1fr; - } - .threshold-chips-group { - grid-template-columns: 1fr 1fr 1fr; - } -} - -/* Medication Avatar */ -.med-avatar { - border-radius: 8px; - object-fit: cover; - flex-shrink: 0; -} -.med-avatar-sm { - width: 28px; - height: 28px; -} -.med-avatar-md { - width: 40px; - height: 40px; -} -.med-avatar-lg { - width: 56px; - height: 56px; -} - -.med-avatar-initials { - background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); - color: white; - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: 0.7em; -} -.med-avatar-sm.med-avatar-initials { - font-size: 0.65em; -} -.med-avatar-lg.med-avatar-initials { - font-size: 1.1em; -} - -.med-avatar.clickable { - cursor: pointer; - transition: - transform 0.15s, - box-shadow 0.15s; -} -.med-avatar.clickable:hover { - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); -} - -.med-avatar-clickable { - cursor: pointer; - display: inline-flex; -} -.med-avatar-clickable .med-avatar { - transition: - transform 0.15s, - box-shadow 0.15s; -} -.med-avatar-clickable:hover .med-avatar { - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); -} - -/* Table/Timeline cells with avatar */ -.cell-with-avatar { - display: flex; - flex-direction: row; - align-items: center; - gap: 0.5rem; -} - -.cell-with-avatar .med-name-line { - display: flex; - align-items: flex-start; - gap: 0.5rem; -} - -.med-taken-by-line { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 0.35rem; - justify-content: flex-start; -} - -.med-name-block-dash { - display: flex; - flex-direction: column; - gap: 0.2rem; - min-width: 0; -} - -.cell-with-avatar .med-icons { - display: flex; - align-items: center; - gap: 0.35rem; - font-size: 1rem; -} - -.cell-with-avatar .med-icons span { - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - width: 1.2em !important; - height: 1.2em !important; - line-height: 1 !important; - font-size: 1rem !important; - vertical-align: middle !important; -} - -.time-main .med-name { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.taken-by-inline { - color: var(--text-secondary); - font-weight: 400; -} - -.taken-by-name { - color: var(--accent-light); - font-weight: 600; -} - -/* Medication list name row with avatar */ -.med-name-row { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 0.75rem; -} -.med-name-block { - min-width: 0; -} -.med-generic-name { - color: var(--text-secondary); - font-size: 0.85rem; - font-weight: 400; - margin-top: 0.1rem; -} - -.image-preview { - display: flex; - align-items: center; - gap: 1rem; - margin-top: 0.5rem; - width: 100%; -} - -.image-preview button { - margin-left: auto; -} - -.image-preview img { - width: 80px; - height: 80px; - object-fit: cover; - border-radius: 8px; - border: 1px solid var(--border-primary); -} - -/* Modal base styles moved to styles/modals-base.css */ - -/* Medication Detail Modal */ -.modal-content.med-detail-modal { - padding: 0; - width: min(100vw - 1rem, 711px); - max-width: 711px; - max-height: 90vh; - background: var(--bg-primary); - overscroll-behavior: contain; - display: flex; - flex-direction: column; - overflow: visible; -} - -.med-detail-modal .med-detail-body { - flex: 1; - min-height: 0; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - overscroll-behavior: contain; -} - -.med-detail-header { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - padding: 2rem 2rem 2rem; - margin-bottom: 0.5rem; - background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); - color: white; - border-radius: 12px 12px 0 0; -} - -.med-detail-header h2 { - margin: 0; - font-size: 1.5rem; - text-align: center; -} - -.med-detail-titles { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.25rem; -} - -.med-generic-name { - font-size: 0.95rem; - color: rgba(255, 255, 255, 0.75); - font-weight: 400; -} - -.med-taken-by { - font-size: 1rem; - color: white; - font-weight: 600; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); - text-align: center; -} - -.taken-by-badge { - font-size: 0.75rem; - color: var(--accent); - font-weight: 500; - margin-left: 0.35rem; - opacity: 0.85; -} - -.taken-by-badge.clickable, -.taken-by-name.clickable { - cursor: pointer; - transition: opacity 0.15s; -} - -.taken-by-badge.clickable:hover, -.taken-by-name.clickable:hover { - opacity: 1; - text-decoration: underline; -} - -/* User Medications Modal */ -.modal-content.user-meds-modal { - max-width: 500px; - width: 95%; - padding: 0; - border-radius: 16px; - overflow: hidden; -} - -.user-meds-header { - display: flex; - align-items: center; - gap: 1rem; - padding: 1.5rem 2rem; - background: linear-gradient(135deg, var(--accent) 0%, #1e5bb8 100%); - border-radius: 16px 16px 0 0; -} - -.user-meds-header .user-avatar { - width: 50px; - min-width: 50px; - height: 50px; - min-height: 50px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.2); - display: flex; - align-items: center; - justify-content: center; - font-size: 1.5rem; - font-weight: 700; - color: white; - flex-shrink: 0; -} - -.user-meds-header h2 { - margin: 0; - color: white; - font-size: 1.3rem; -} - -.user-meds-list { - padding: 1rem; - max-height: 400px; - overflow-y: auto; -} - -.user-med-item { - display: flex; - align-items: center; - gap: 0.75rem; - padding: 0.75rem; - border-radius: 8px; - transition: background 0.15s; - flex-wrap: wrap; -} - -.user-med-item.clickable { - cursor: pointer; -} - -.user-med-item.clickable:hover { - background: var(--accent-bg); -} - -.user-med-info { - flex: 1; - min-width: 150px; -} - -.user-med-name { - display: block; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; -} - -.user-med-generic { - display: block; - font-size: 0.8rem; - color: var(--text-secondary); -} - -.user-med-stats { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - flex-shrink: 0; -} - -.user-med-pills { - font-size: 0.85rem; - color: var(--text-secondary); -} - -.user-med-intakes { - display: flex; - flex-direction: column; - gap: 0.15rem; - margin-top: 0.15rem; -} - -.user-med-intake-item { - font-size: 0.78rem; - color: var(--text-secondary); - line-height: 1.3; -} - -.user-meds-empty { - padding: 2rem; - text-align: center; - color: var(--text-secondary); -} - -.user-meds-footer { - padding: 1rem 1.5rem; - border-top: 1px solid var(--border-primary); - display: flex; - justify-content: flex-start; -} - -.med-detail-header .med-avatar-lg { - width: 100px; - height: 100px; - font-size: 2.5rem; - border: 3px solid rgba(255, 255, 255, 0.3); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); -} - -.med-detail-body { - padding: 1.5rem 2rem 2rem; - background: var(--bg-primary); -} - -.med-detail-section { - margin-bottom: 1.5rem; - padding-bottom: 1.5rem; - border-bottom: 1px solid var(--border-color); -} - -.med-detail-section:last-child { - margin-bottom: 0; - padding-bottom: 0; - border-bottom: none; -} - -/* Notes content in modal - auto-sizing box */ -.med-notes-content { - background: var(--bg-secondary); - padding: 0.75rem 1rem; - border-radius: 8px; - white-space: pre-wrap; - word-wrap: break-word; - line-height: 1.6; - max-height: 300px; - overflow-y: auto; - -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ - font-size: 1rem; -} - -/* Mobile: larger notes box with better touch scrolling */ -@media (max-width: 600px) { - .med-notes-content { - min-height: 80px; - max-height: 200px; - font-size: 1rem; - padding: 1rem; - touch-action: pan-y; /* Enable vertical touch scrolling */ - } -} - -.med-detail-section h3 { - font-size: 0.85rem; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--text-secondary); - margin: 0 0 0.75rem; -} - -.med-detail-section h3.section-header-with-badge { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.med-detail-section h3 .status-chip.small { - font-size: 0.7rem; - padding: 0.2rem 0.5rem; - text-transform: none; - letter-spacing: normal; -} - -.med-detail-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 0.75rem; -} - -.prescription-detail-grid .med-detail-item { - display: flex; - flex-direction: column; - align-items: start; -} - -.med-detail-item { - background: var(--bg-secondary); - padding: 0.75rem; - border-radius: 8px; -} - -.med-detail-item.full-width { - grid-column: 1 / -1; -} - -.med-detail-label { - display: block; - font-size: 0.75rem; - color: var(--text-secondary); - margin-bottom: 0; -} - -.med-detail-value { - font-size: 1.1rem; - font-weight: 600; - color: var(--text-primary); -} - -.med-detail-value.success-text { - color: var(--success); -} -.med-detail-value.warning-text { - color: var(--warning); -} -.med-detail-value.danger-text { - color: var(--danger); -} - -.med-detail-schedules { - display: grid; - grid-template-columns: auto auto 1fr auto auto auto; - gap: 0.45rem 0; -} - -.med-schedule-row { - display: grid; - grid-column: 1 / -1; - grid-template-columns: subgrid; - align-items: center; - column-gap: 0.75rem; -} - -.med-schedule-usage { - font-weight: 600; - color: var(--accent); - white-space: nowrap; - grid-column: 1; -} - -.med-schedule-freq { - color: var(--text-secondary); - white-space: nowrap; - grid-column: 2; -} - -.med-schedule-person { - color: var(--text-secondary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - grid-column: 4; -} - -.med-schedule-time { - font-weight: 700; - white-space: nowrap; - color: var(--text-primary); - text-align: right; - grid-column: 5; -} - -.med-schedule-bell { - color: var(--warning); - display: inline-flex; - align-items: center; - grid-column: 6; -} - -[data-theme="light"] .med-schedule-bell { - color: #b45309; -} - -@media (max-width: 700px) { - .med-detail-schedules { - grid-template-columns: 1fr; - } - - .med-schedule-row { - grid-template-columns: 1fr; - row-gap: 0.25rem; - } - - .med-schedule-usage, - .med-schedule-freq, - .med-schedule-person, - .med-schedule-time, - .med-schedule-bell { - grid-column: auto; - } -} - -.med-detail-footer { - padding: 1rem 2rem 1.5rem; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - border-top: 1px solid var(--border-primary); - background: var(--bg-primary); - border-radius: 0 0 12px 12px; - flex-shrink: 0; - overflow: visible; - position: relative; - z-index: 1; - padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); - margin: 0; -} - -/* Mobile devices can report wide CSS viewports (e.g., 768px in device emulation). - Use input modality instead of width-only breakpoints so the modal still fills the handset viewport. */ -@media (hover: none) and (pointer: coarse) and (max-width: 500px) { - .med-detail-overlay { - padding: 0.4rem; - align-items: stretch; - } - - .modal-content.med-detail-modal { - width: calc(100vw - 0.8rem); - max-width: none; - max-height: calc(100dvh - 0.8rem); - margin: auto; - border-radius: 12px; - } -} - -.med-detail-footer::before { - content: none; -} - -.med-detail-footer::after { - content: none; -} - -.med-detail-footer .footer-actions { - display: flex; - gap: 0.5rem; - margin-left: auto; - overflow: visible; - position: relative; -} - -.med-detail-footer .tooltip-trigger { - position: relative; - z-index: 1; -} - -.med-detail-footer button.icon-only { - padding: 0.5rem; - min-width: 2.75rem; - min-height: 2.75rem; -} - -.med-detail-footer button.icon-stock-correction { - background: color-mix(in srgb, var(--warning) 26%, var(--bg-tertiary)); - border: 1px solid color-mix(in srgb, var(--warning) 62%, var(--border-secondary)); - color: #fef3c7; - box-shadow: none; -} - -.med-detail-footer button.icon-stock-correction:hover { - background: color-mix(in srgb, var(--warning) 36%, var(--bg-tertiary)); - border-color: color-mix(in srgb, var(--warning) 76%, var(--border-secondary)); - box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 32%, transparent); -} - -[data-theme="light"] .med-detail-footer button.icon-stock-correction { - background: color-mix(in srgb, var(--warning) 22%, white); - border-color: color-mix(in srgb, var(--warning) 70%, var(--border-secondary)); - color: #92400e; -} - -[data-theme="light"] .med-detail-footer button.icon-stock-correction:hover { - background: color-mix(in srgb, var(--warning) 32%, white); - border-color: color-mix(in srgb, var(--warning) 82%, var(--border-secondary)); -} - -/* Clickable avatar wrapper */ -.med-detail-avatar-wrapper { - position: relative; - display: inline-block; -} - -.med-detail-avatar-wrapper.clickable { - cursor: pointer; -} - -.med-detail-avatar-wrapper.clickable:hover .med-avatar-lg { - transform: scale(1.05); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); -} - -.med-detail-avatar-wrapper .expand-icon { - position: absolute; - bottom: -4px; - right: -4px; - background: rgba(0, 0, 0, 0.6); - color: white; - font-size: 0.9rem; - width: 1.5rem; - height: 1.5rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.2s; -} - -.med-detail-avatar-wrapper.clickable:hover .expand-icon { - opacity: 1; -} - -/* Image Lightbox */ -.lightbox-overlay { - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.9); - display: flex; - align-items: center; - justify-content: center; - z-index: 2000; - padding: 2rem; - animation: fadeIn 0.2s ease; -} - -.lightbox-container { - position: relative; - display: inline-flex; -} - -.lightbox-close { - position: absolute; - top: -0.5rem; - right: -0.5rem; - background: rgba(255, 255, 255, 0.15); - border: none; - color: white; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - border-radius: var(--btn-radius-round); - transition: background 150ms ease; - box-shadow: none; - padding: 0; - z-index: 1; -} - -.lightbox-close:hover { - background: rgba(255, 255, 255, 0.35); -} - -.lightbox-image { - max-width: 50vw; - max-height: 50vh; - object-fit: contain; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); - animation: zoomIn 0.3s ease; -} - -/* Mobile: larger lightbox image */ -@media (max-width: 768px) { - .lightbox-image { - max-width: 90vw; - max-height: 70vh; - } -} - -@keyframes zoomIn { - from { - opacity: 0; - transform: scale(0.8); - } - to { - opacity: 1; - transform: scale(1); - } -} - -/* Clickable rows */ -.table-row.clickable { - cursor: pointer; - transition: background 0.15s; -} - -.table-row.clickable:hover { - background: var(--bg-secondary); -} - -/* Mobile adjustments for modal */ -@media (max-width: 500px) { - .med-detail-overlay { - padding: 0.4rem; - align-items: stretch; - } - - .modal-content { - max-height: 85vh; - border-radius: 12px 12px 0 0; - margin-top: auto; - } - - .modal-content.med-detail-modal { - width: calc(100vw - 0.8rem); - max-width: none; - max-height: calc(100dvh - 0.8rem); - border-radius: 12px; - margin: auto; - } - - .med-detail-header { - padding: 1.5rem 1.5rem 1rem; - } - - .med-detail-header .med-avatar-lg { - width: 80px; - height: 80px; - font-size: 2rem; - } - - .med-detail-body { - padding: 1rem 1.5rem 0; - } - - .med-detail-footer { - padding: 1rem 1.5rem; - padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); - flex-direction: column; - align-items: center; - justify-content: center; - flex-wrap: wrap; - gap: 0.75rem; - margin: 0; - } - - .med-detail-footer > button { - flex: 0 0 auto; - width: min(100%, 560px); - } - - .med-detail-footer .footer-actions { - flex: 0 0 auto; - width: 100%; - justify-content: center; - margin-left: 0; - } - - .med-detail-footer button { - padding: 0.6rem 0.8rem; - font-size: 0.9rem; - } - - .med-detail-grid { - gap: 0.5rem; - } -} - -/* Hard mobile override for MedDetailModal: remove side frame and use full handset viewport. */ -@media (max-width: 500px) { - .modal-overlay.med-detail-overlay { - padding: 0 !important; - align-items: stretch; - } - - .modal-overlay.med-detail-overlay > .modal-content.med-detail-modal { - width: 100vw !important; - max-width: 100vw !important; - max-height: 100dvh !important; - height: 100dvh; - margin: 0 !important; - border-radius: 0 !important; - border-left: none; - border-right: none; - } - - .modal-overlay.med-detail-overlay .med-detail-header { - padding-left: 1rem; - padding-right: 1rem; - } - - .modal-overlay.med-detail-overlay .med-detail-body { - padding-left: 1rem; - padding-right: 1rem; - } - - .modal-overlay.med-detail-overlay .med-detail-footer { - margin: 0; - padding-left: 1rem; - padding-right: 1rem; - position: relative; - z-index: 1; - } -} - -/* Reminder icon indicator */ -.reminder-icon.info-tooltip, -.notes-icon.info-tooltip, -.prescription-icon.info-tooltip { - width: auto; - height: auto; - margin: 0 !important; - padding: 0 !important; - font-size: 1em; - opacity: 0.9; - color: var(--info); - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 1; - vertical-align: baseline; -} - -.prescription-icon.info-tooltip { - color: var(--success); -} - -.reminder-icon.info-tooltip, -.blister-reminder-icon { - color: var(--warning); -} - -[data-theme="light"] .reminder-icon.info-tooltip, -[data-theme="light"] .blister-reminder-icon { - color: #b45309; /* dark amber — ~4.5:1 on light backgrounds */ -} - -[data-theme="light"] .notes-icon.info-tooltip { - color: #1d4ed8; /* darker blue — strong contrast on light backgrounds */ -} - -[data-theme="light"] .prescription-icon.info-tooltip { - color: #047857; /* dark emerald — strong contrast on light backgrounds */ -} - -.reminder-icon.info-tooltip:hover, -.notes-icon.info-tooltip:hover, -.prescription-icon.info-tooltip:hover { - opacity: 1; -} - -h3 .reminder-icon.info-tooltip { - font-size: 0.75em; - vertical-align: middle; -} - -h3 .notes-icon.info-tooltip { - font-size: 0.8em; - vertical-align: middle; -} - -h3 .notes-icon.notes-icon-static { - font-size: 0.8em; - vertical-align: middle; - color: var(--info); - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 1; -} - -[data-theme="light"] h3 .notes-icon.notes-icon-static { - color: #1d4ed8; -} - -/* ============================================================================= - Auth Components - ============================================================================= */ - -.auth-container { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background: var(--bg-gradient); - padding: 1rem; -} - -.auth-card { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: 16px; - padding: 2.5rem; - width: 100%; - max-width: 420px; - box-shadow: 0 10px 40px var(--shadow); -} - -.auth-title { - font-size: 2rem; - font-weight: 700; - text-align: center; - margin: 0 0 0.5rem 0; - color: var(--text-primary); -} - -.auth-subtitle { - font-size: 1.25rem; - font-weight: 500; - text-align: center; - margin: 0 0 1.5rem 0; - color: var(--text-secondary); -} - -.auth-info { - text-align: center; - color: var(--text-secondary); - margin-bottom: 1.5rem; - padding: 1rem; - background: var(--accent-bg); - border-radius: 8px; - font-size: 0.9rem; -} - -.auth-form { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.auth-error { - background: var(--danger-bg); - color: var(--danger); - padding: 0.75rem 1rem; - border-radius: 8px; - font-size: 0.9rem; - text-align: center; -} - -.auth-success { - background: var(--success-bg); - color: var(--success); - padding: 0.75rem 1rem; - border-radius: 8px; - font-size: 0.9rem; - text-align: center; -} - -.auth-submit { - margin-top: 0.5rem; - padding: 0.875rem; - font-size: 1rem; - font-weight: 600; -} - -/* SSO Login Button */ -.auth-sso { - margin-bottom: 1rem; -} - -.sso-btn { - display: flex; - align-items: center; - justify-content: center; - gap: 0.75rem; - width: 100%; - background: var(--card-bg); - border: 1px solid var(--border-primary); - color: var(--text-primary); - transition: all 0.2s ease; -} - -.sso-btn:hover { - background: var(--hover-bg); - border-color: var(--accent); - color: var(--accent); -} - -.sso-icon { - width: 1.25rem; - height: 1.25rem; - flex-shrink: 0; -} - -.auth-divider { - display: flex; - align-items: center; - gap: 1rem; - margin: 1.25rem 0; - color: var(--text-muted); - font-size: 0.85rem; - text-transform: uppercase; - letter-spacing: 0.05em; -} - -.auth-divider::before, -.auth-divider::after { - content: ""; - flex: 1; - height: 1px; - background: var(--border-primary); -} - -.auth-form .checkbox-group { - margin-bottom: 0.5rem; -} - -.auth-form .checkbox-label { - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; - font-size: 0.9rem; - color: var(--text-secondary); -} - -.auth-form .checkbox-label input[type="checkbox"] { - width: 1rem; - height: 1rem; - accent-color: var(--accent); - cursor: pointer; -} - -/* Password Input with Toggle */ -.password-input-wrapper { - position: relative; - display: flex; - align-items: center; -} - -.password-input-wrapper input { - width: 100%; - padding-right: 2.5rem; -} - -.password-toggle-btn { - position: absolute; - right: 0.5rem; - background: none; - border: none; - padding: 0.25rem; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - color: var(--text-tertiary); - transition: color 0.15s ease; -} - -.password-toggle-btn:hover { - color: var(--text-secondary); -} - -.password-toggle-btn svg { - width: 1.25rem; - height: 1.25rem; -} - -.auth-links { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.75rem; - margin-top: 1.5rem; - padding-top: 1.5rem; - border-top: 1px solid var(--border-primary); -} - -.auth-link, -.auth-link-btn { - color: var(--accent); - text-decoration: none; - font-size: 0.9rem; - background: none; - border: none; - cursor: pointer; - padding: 0; -} - -.auth-link:hover, -.auth-link-btn:hover { - text-decoration: underline; - color: var(--accent-light); -} - -/* Profile Component */ -.profile-container { - padding: 0; -} - -.profile-header { - display: flex; - align-items: center; - gap: 0.75rem; - margin-bottom: 1.5rem; - padding-right: 2.5rem; /* Space for modal close button */ -} - -.profile-header h2 { - margin: 0; - font-size: 1.25rem; -} - -.profile-role { - background: var(--accent-bg); - color: var(--accent); - padding: 0.25rem 0.75rem; - border-radius: 100px; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; -} - -.profile-info { - margin-bottom: 1.5rem; - padding: 1rem; - background: var(--bg-tertiary); - border-radius: 8px; -} - -.profile-info p { - margin: 0; - color: var(--text-secondary); -} - -.profile-form { - display: flex; - flex-direction: column; - gap: 1rem; -} - -.profile-form h3 { - margin: 0.5rem 0 0 0; - font-size: 1rem; - color: var(--text-secondary); -} - -.profile-divider { - border: none; - border-top: 1px solid var(--border-primary); - margin: 0.5rem 0; -} - -.profile-actions { - display: flex; - gap: 1rem; - margin-top: 0.5rem; -} - -.profile-actions .btn { - flex: 1; -} - -/* User Menu Dropdown in Header */ -.user-menu { - position: relative; -} - -.user-menu-btn { - display: flex; - align-items: center; - justify-content: center; - background: transparent; - border: none; - padding: 0; - cursor: pointer; - border-radius: 50%; - box-shadow: none; -} - -.user-menu-btn:hover { - background: transparent; -} - -.user-menu-btn .user-avatar { - width: 36px; - height: 36px; - background: var(--accent); - color: white; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; - font-size: 0.9rem; - border: 2px solid transparent; - transition: border-color 150ms ease; -} - -.user-menu-btn .user-avatar-img { - width: 36px; - height: 36px; - border-radius: 50%; - object-fit: cover; - border: 2px solid transparent; - transition: border-color 150ms ease; -} - -.user-menu:hover .user-menu-btn .user-avatar, -.user-menu:hover .user-menu-btn .user-avatar-img { - border-color: var(--accent); -} - -.user-dropdown { - position: absolute; - top: calc(100% + 0.75rem); - right: 0; - width: 260px; - background: rgba(15, 23, 42, 0.75); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 16px; - box-shadow: - 0 16px 48px rgba(0, 0, 0, 0.5), - inset 0 0 0 1px rgba(255, 255, 255, 0.05); - opacity: 0; - visibility: hidden; - transform: translateY(-8px) scale(0.95); - transition: all 0.2s ease; - z-index: 1000; - overflow: hidden; -} - -[data-theme="light"] .user-dropdown { - background: rgba(255, 255, 255, 0.75); - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); -} - -/* Only use hover on devices that support it (not touch) */ -@media (hover: hover) and (pointer: fine) { - .user-menu:hover .user-dropdown { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); - } -} - -/* Click-based open for all devices */ -.user-menu.open .user-dropdown { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); -} - -.dropdown-header { - display: flex; - align-items: center; - gap: 1rem; - padding: 1.25rem; - background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%); - border-bottom: 1px solid var(--border-primary); -} - -.dropdown-avatar { - width: 48px; - height: 48px; - background: var(--accent); - color: white; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; - font-size: 1.25rem; - flex-shrink: 0; -} - -.dropdown-avatar-img { - width: 48px; - height: 48px; - border-radius: 50%; - object-fit: cover; - flex-shrink: 0; -} - -.dropdown-user-info { - display: flex; - flex-direction: column; - gap: 0.125rem; - min-width: 0; -} - -.dropdown-username { - font-size: 1rem; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.dropdown-role { - font-size: 0.75rem; - color: var(--text-secondary); -} - -.dropdown-menu { - padding: 0.5rem; -} - -.dropdown-item { - display: flex; - align-items: center; - gap: 0.875rem; - width: 100%; - padding: 0.75rem 1rem; - border: none; - background: none; - color: var(--text-primary); - font-size: 0.9rem; - cursor: pointer; - border-radius: 10px; - transition: - background 0.15s ease, - color 0.15s ease; - text-align: left; -} - -.dropdown-item:hover { - background: rgba(59, 130, 246, 0.15); - color: var(--text-primary); -} - -.dropdown-item:hover svg { - opacity: 1; - color: var(--accent); -} - -/* Override danger button styles for dropdown items */ -.dropdown-item.danger, -[data-theme="light"] .dropdown-item.danger { - background: none !important; - color: var(--text-primary); - border: none; - box-shadow: none; -} - -.dropdown-item.danger:hover, -[data-theme="light"] .dropdown-item.danger:hover { - background: rgba(239, 68, 68, 0.15) !important; - color: var(--danger); -} - -.dropdown-item svg { - width: 20px; - height: 20px; - flex-shrink: 0; - opacity: 0.7; -} - -@media (max-width: 600px) { - .auth-card { - padding: 1.5rem; - } - - .auth-title { - font-size: 1.75rem; - } -} - -/* Profile Modal */ -.profile-modal { - max-width: 420px; - padding: 0; - overflow-y: auto; - max-height: 90vh; -} - -.profile-container { - padding: 0; -} - -.profile-user-section { - display: flex; - align-items: center; - gap: 1rem; - padding: 1.5rem; - background: var(--bg-tertiary); - border-bottom: 1px solid var(--border-primary); -} - -.profile-avatar-wrapper { - position: relative; -} - -.profile-avatar { - width: 64px; - height: 64px; - background: var(--text-tertiary); - color: white; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-weight: 700; - font-size: 1.75rem; - flex-shrink: 0; -} - -.profile-avatar-img { - width: 64px; - height: 64px; - border-radius: 50%; - object-fit: cover; -} - -.profile-avatar-actions { - position: absolute; - bottom: -4px; - right: -4px; - display: flex; - gap: 0.25rem; -} - -.avatar-btn { - width: 28px; - height: 28px; - min-width: 28px; - min-height: 28px; - border-radius: var(--btn-radius-round); - border: 2px solid var(--bg-secondary); - background: var(--bg-tertiary); - color: var(--text-primary); - font-size: 0.75rem; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - transition: - background 150ms ease, - color 150ms ease; - box-shadow: none; -} - -.avatar-btn:hover { - background: var(--accent); - color: white; -} - -.avatar-btn.danger:hover { - background: var(--danger); -} - -.avatar-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -.profile-username { - font-size: 1.25rem; - font-weight: 600; - color: var(--text-primary); -} - -.profile-form { - padding: 1.5rem; -} - -.profile-section { - margin-bottom: 1.5rem; -} - -.profile-section-title { - font-size: 0.8rem; - font-weight: 600; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.5px; - margin: 0 0 1rem 0; - padding-bottom: 0; -} - -.profile-form .form-group { - margin-bottom: 1rem; -} - -.profile-form .form-group label { - display: block; - font-size: 0.85rem; - font-weight: 500; - margin-bottom: 0.375rem; - color: var(--text-primary); -} - -.profile-form .form-group input { - width: 100%; - padding: 0.625rem 0.875rem; - border: 1px solid var(--border-primary); - border-radius: 8px; - background: var(--bg-input); - color: var(--text-primary); - font-size: 0.9rem; - transition: border-color 0.2s ease; -} - -.profile-form .form-group input:focus { - outline: none; - border-color: var(--accent); -} - -.profile-form .form-group input::placeholder { - color: var(--text-tertiary); -} - -.profile-actions { - display: flex; - gap: 0.75rem; - justify-content: flex-end; - padding-top: 0; - margin-top: 0.5rem; -} - -.profile-actions .btn { - padding: 0.5rem 1rem; - font-size: 0.875rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; -} - -.profile-actions .btn-ghost { - background: none; - border: 1px solid var(--border-primary); - color: var(--text-secondary); -} - -.profile-actions .btn-ghost:hover { - background: var(--bg-tertiary); - color: var(--text-primary); -} - -.profile-actions .btn-primary { - background: var(--accent); - border: none; - color: white; -} - -.profile-actions .btn-primary:hover:not(:disabled) { - background: var(--accent-hover); -} - -.profile-actions .btn-primary:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Profile danger zone */ -.profile-danger-zone { - margin: 0 1.5rem 1.5rem; - padding-top: 1rem; -} - -.profile-danger-zone .profile-section-title { - margin-bottom: 0.75rem; -} - -.btn-danger { - background: #dc2626; - color: white; - border: none; - padding: 0.5rem 1rem; - border-radius: 6px; - font-weight: 500; - cursor: pointer; - transition: background 0.15s ease; -} - -.btn-danger:hover:not(:disabled) { - background: #b91c1c; -} - -.btn-danger:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* ============================================================================= - About Modal - ============================================================================= */ -.about-modal { - max-width: 380px; - padding: 0; - overflow-y: auto; - text-align: center; -} - -.about-header { - padding: 2rem 1.5rem 1.5rem; - background: var(--bg-tertiary); - border-bottom: 1px solid var(--border-primary); -} - -.about-logo { - width: 64px; - height: 64px; - margin: 0 auto 1rem; -} - -.about-logo img { - width: 64px; - height: 64px; - border-radius: 16px; -} - -.about-header h2 { - font-size: 1.5rem; - font-weight: 700; - margin: 0 0 0.5rem; - color: var(--text-primary); -} - -.about-tagline { - font-size: 0.875rem; - color: var(--text-secondary); - margin: 0; - line-height: 1.4; -} - -.about-versions { - padding: 1.25rem 1.5rem; - border-bottom: 1px solid var(--border-primary); -} - -.about-version-row { - display: flex; - justify-content: center; - align-items: center; - gap: 0.75rem; - padding: 0.5rem 0; -} - -.about-version-label { - font-size: 0.875rem; - color: var(--text-secondary); -} - -.about-version-value { - font-size: 0.875rem; - font-weight: 600; - color: var(--text-primary); - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - background: var(--bg-tertiary); - padding: 0.25rem 0.5rem; - border-radius: 4px; -} - -a.about-version-link { - color: var(--accent-primary); - text-decoration: none; - transition: text-decoration 0.15s ease; -} - -a.about-version-link:hover { - text-decoration: underline; -} - -.about-update-section { - padding: 1.25rem 1.5rem; - border-bottom: 1px solid var(--border-primary); -} - -.about-update-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 0.625rem 1.25rem; - font-size: 0.875rem; - font-weight: 500; - border: 1px solid var(--border-primary); - border-radius: 8px; - background: var(--bg-secondary); - color: var(--text-primary); - cursor: pointer; - transition: all 0.2s ease; - width: 100%; -} - -.about-update-btn:hover:not(:disabled) { - background: var(--bg-tertiary); - border-color: var(--accent); - color: var(--accent); -} - -.about-update-btn:disabled { - opacity: 0.7; - cursor: not-allowed; -} - -.about-update-btn svg { - width: 16px; - height: 16px; -} - -.spinner-small { - width: 16px; - height: 16px; - border: 2px solid var(--border-primary); - border-top-color: var(--accent); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.about-update-result { - margin-top: 1rem; - padding: 0.75rem; - border-radius: 8px; - font-size: 0.875rem; -} - -.about-update-result.up-to-date { - background: rgba(34, 197, 94, 0.1); - color: var(--success); -} - -.about-update-result.update-available { - background: rgba(59, 130, 246, 0.1); - color: var(--accent); -} - -.about-update-result.error { - background: rgba(239, 68, 68, 0.1); - color: var(--error); -} - -.update-status-text { - display: block; - font-weight: 500; -} - -.update-status-text strong { - font-weight: 700; -} - -.update-download-link { - display: inline-block; - margin-left: 0.5rem; - padding: 0.25rem 0.5rem; - font-size: 0.75rem; - font-weight: 600; - background: var(--accent); - color: white; - border-radius: 4px; - text-decoration: none; - transition: background 0.2s ease; -} - -.update-download-link:hover { - background: var(--accent-hover); -} - -.about-links { - padding: 1.25rem 1.5rem; - border-bottom: 1px solid var(--border-primary); -} - -.about-link { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 0.625rem 1.25rem; - font-size: 0.875rem; - font-weight: 500; - border: 1px solid var(--border-primary); - border-radius: 8px; - background: var(--bg-secondary); - color: var(--text-primary); - text-decoration: none; - transition: all 0.2s ease; -} - -.about-link:hover { - background: var(--bg-tertiary); - border-color: var(--text-secondary); -} - -.about-link svg { - width: 18px; - height: 18px; -} - -.about-footer { - padding: 1.25rem 1.5rem; - background: var(--bg-tertiary); -} - -.about-copyright { - font-size: 0.75rem; - color: var(--text-secondary); - margin: 0 0 0.25rem; -} - -.about-license { - font-size: 0.75rem; - color: var(--text-tertiary); - margin: 0; -} - -/* Share dialog styles moved to styles/share-dialog.css */ - -.card-head-actions { - display: flex; - gap: 0.75rem; - align-items: center; -} - -.dashboard-main-sections { - display: flex; - flex-direction: column; -} - -.dashboard-schedules-section { - overflow: visible; -} - -.dashboard-main-sections-swapped .dashboard-schedules-section { - order: 1; -} - -.dashboard-main-sections-swapped .dashboard-overview-section { - order: 2; -} - -.card-head-actions > button, -.edit-header > button.btn-nav { - min-height: 3rem; - padding: 0 1.15rem; - display: inline-flex; - align-items: center; - justify-content: center; -} - -/* Shared schedule + mobile edit styles moved to styles/schedule-mobile-edit.css */ -/* ============================================================================= - Report Modal - ============================================================================= */ -.report-modal { - max-width: 520px; - padding: 1.5rem; -} - -.report-modal-title { - font-size: 1.25rem; - margin: 0 0 0.25rem; - padding-right: 2rem; -} - -.report-modal-desc { - color: var(--text-secondary); - font-size: 0.875rem; - margin: 0 0 1.25rem; -} - -/* Person filter */ -.report-person-filter { - margin-bottom: 1.25rem; -} - -.report-person-filter .report-format-options { - min-height: 4.5rem; - align-content: flex-start; -} - -.report-person-filter h4 { - font-size: 0.85rem; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-muted); - margin: 0 0 0.5rem; -} - -.report-person-filter .report-format-option input[type="checkbox"] { - display: none; -} - -/* Medication selection area */ -.report-selection { - height: 280px; - overflow-y: auto; - border: 1px solid var(--border-primary); - border-radius: 10px; - padding: 0.75rem; - margin-bottom: 1.25rem; - background: color-mix(in srgb, var(--bg-secondary) 75%, var(--bg-tertiary)); -} - -.report-selection-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 0.5rem; -} - -.report-selection-count { - font-size: 0.8rem; - color: var(--text-secondary); - font-weight: 500; -} - -.report-group { - margin-bottom: 0.5rem; -} - -.report-group-title { - font-size: 0.78rem; - font-weight: 700; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.04em; - margin: 0.5rem 0 0.35rem; -} - -.report-med-list { - display: flex; - flex-direction: column; - gap: 0.2rem; -} - -.report-med-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.4rem 0.5rem; - border-radius: 8px; - cursor: pointer; - transition: background 0.15s ease; -} - -.report-med-item:hover { - background: var(--accent-bg); -} - -.report-med-item input[type="checkbox"] { - width: 16px; - height: 16px; - margin: 0; - padding: 0; - flex-shrink: 0; - accent-color: var(--accent); - cursor: pointer; -} - -.report-med-name { - flex: 1; - min-width: 0; - font-size: 0.9rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.report-med-name.obsolete-name { - color: var(--text-secondary); - font-style: italic; -} - -.report-med-generic { - color: var(--text-secondary); - font-size: 0.8rem; -} - -/* Format selection */ -.report-format { - margin-bottom: 1.25rem; -} - -.report-format h4 { - font-size: 0.85rem; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-muted); - margin: 0 0 0.5rem; -} - -.report-format-options { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; -} - -.report-format-option { - display: flex; - align-items: center; - gap: 0.35rem; - padding: 0.45rem 0.85rem; - border: 1px solid var(--border-secondary); - border-radius: 8px; - cursor: pointer; - font-size: 0.85rem; - font-weight: 500; - color: var(--text-secondary); - background: transparent; - transition: - border-color 0.15s ease, - background 0.15s ease, - color 0.15s ease; -} - -.report-format-option:hover { - border-color: var(--accent); - color: var(--text-primary); - background: var(--accent-bg); -} - -.report-format-option.selected { - border-color: var(--accent); - background: var(--accent-bg); - color: var(--accent-light); - font-weight: 600; -} - -.report-format-option input[type="radio"] { - display: none; -} - -/* Actions */ -.report-actions { - display: flex; - justify-content: flex-end; - gap: 0.75rem; - padding-top: 0.75rem; - border-top: 1px solid var(--border-primary); -} + Global Stylesheet Entrypoint + Loads layered partials in the order required by the existing MedAssist cascade. + Add new shared styles to the focused partial that owns the relevant domain. + ============================================================================= */ +@import url("./styles/foundation.css"); +@import url("./styles/app-surfaces.css"); +@import url("./styles/settings-surfaces.css"); +@import url("./styles/modal-detail.css"); +@import url("./styles/auth-profile.css"); +@import url("./styles/about-report.css"); diff --git a/frontend/src/styles/about-report.css b/frontend/src/styles/about-report.css new file mode 100644 index 0000000..92969ca --- /dev/null +++ b/frontend/src/styles/about-report.css @@ -0,0 +1,458 @@ +/* biome-ignore-all lint/style/noDescendingSpecificity: extracted brownfield layer preserves intentional selector ordering while the CSS split remains behavior-compatible */ +/* ============================================================================= + About And Report Layer + Owns about modal, report, and adjacent informational overlay presentation. + ============================================================================= */ +.about-modal { + max-width: 380px; + padding: 0; + overflow-y: auto; + text-align: center; +} + +.about-header { + padding: 2rem 1.5rem 1.5rem; + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-primary); +} + +.about-logo { + width: 64px; + height: 64px; + margin: 0 auto 1rem; +} + +.about-logo img { + width: 64px; + height: 64px; + border-radius: 16px; +} + +.about-header h2 { + font-size: 1.5rem; + font-weight: 700; + margin: 0 0 0.5rem; + color: var(--text-primary); +} + +.about-tagline { + font-size: 0.875rem; + color: var(--text-secondary); + margin: 0; + line-height: 1.4; +} + +.about-versions { + padding: 1.25rem 1.5rem; + border-bottom: 1px solid var(--border-primary); +} + +.about-version-row { + display: flex; + justify-content: center; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 0; +} + +.about-version-label { + font-size: 0.875rem; + color: var(--text-secondary); +} + +.about-version-value { + font-size: 0.875rem; + font-weight: 600; + color: var(--text-primary); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + background: var(--bg-tertiary); + padding: 0.25rem 0.5rem; + border-radius: 4px; +} + +a.about-version-link { + color: var(--accent-primary); + text-decoration: none; + transition: text-decoration 0.15s ease; +} + +a.about-version-link:hover { + text-decoration: underline; +} + +.about-update-section { + padding: 1.25rem 1.5rem; + border-bottom: 1px solid var(--border-primary); +} + +.about-update-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.625rem 1.25rem; + font-size: 0.875rem; + font-weight: 500; + border: 1px solid var(--border-primary); + border-radius: 8px; + background: var(--bg-secondary); + color: var(--text-primary); + cursor: pointer; + transition: all 0.2s ease; + width: 100%; +} + +.about-update-btn:hover:not(:disabled) { + background: var(--bg-tertiary); + border-color: var(--accent); + color: var(--accent); +} + +.about-update-btn:disabled { + opacity: 0.7; + cursor: not-allowed; +} + +.about-update-btn svg { + width: 16px; + height: 16px; +} + +.spinner-small { + width: 16px; + height: 16px; + border: 2px solid var(--border-primary); + border-top-color: var(--accent); + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.about-update-result { + margin-top: 1rem; + padding: 0.75rem; + border-radius: 8px; + font-size: 0.875rem; +} + +.about-update-result.up-to-date { + background: rgba(34, 197, 94, 0.1); + color: var(--success); +} + +.about-update-result.update-available { + background: rgba(59, 130, 246, 0.1); + color: var(--accent); +} + +.about-update-result.error { + background: rgba(239, 68, 68, 0.1); + color: var(--error); +} + +.update-status-text { + display: block; + font-weight: 500; +} + +.update-status-text strong { + font-weight: 700; +} + +.update-download-link { + display: inline-block; + margin-left: 0.5rem; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + font-weight: 600; + background: var(--accent); + color: white; + border-radius: 4px; + text-decoration: none; + transition: background 0.2s ease; +} + +.update-download-link:hover { + background: var(--accent-hover); +} + +.about-links { + padding: 1.25rem 1.5rem; + border-bottom: 1px solid var(--border-primary); +} + +.about-link { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.625rem 1.25rem; + font-size: 0.875rem; + font-weight: 500; + border: 1px solid var(--border-primary); + border-radius: 8px; + background: var(--bg-secondary); + color: var(--text-primary); + text-decoration: none; + transition: all 0.2s ease; +} + +.about-link:hover { + background: var(--bg-tertiary); + border-color: var(--text-secondary); +} + +.about-link svg { + width: 18px; + height: 18px; +} + +.about-footer { + padding: 1.25rem 1.5rem; + background: var(--bg-tertiary); +} + +.about-copyright { + font-size: 0.75rem; + color: var(--text-secondary); + margin: 0 0 0.25rem; +} + +.about-license { + font-size: 0.75rem; + color: var(--text-tertiary); + margin: 0; +} + +/* Share dialog styles moved to styles/share-dialog.css */ + +.card-head-actions { + display: flex; + gap: 0.75rem; + align-items: center; +} + +.dashboard-main-sections { + display: flex; + flex-direction: column; +} + +.dashboard-schedules-section { + overflow: visible; +} + +.dashboard-main-sections-swapped .dashboard-schedules-section { + order: 1; +} + +.dashboard-main-sections-swapped .dashboard-overview-section { + order: 2; +} + +.card-head-actions > button, +.edit-header > button.btn-nav { + min-height: 3rem; + padding: 0 1.15rem; + display: inline-flex; + align-items: center; + justify-content: center; +} + +/* Shared schedule + mobile edit styles moved to styles/schedule-mobile-edit.css */ +/* ============================================================================= + Report Modal + ============================================================================= */ +.report-modal { + max-width: 520px; + padding: 1.5rem; +} + +.report-modal-title { + font-size: 1.25rem; + margin: 0 0 0.25rem; + padding-right: 2rem; +} + +.report-modal-desc { + color: var(--text-secondary); + font-size: 0.875rem; + margin: 0 0 1.25rem; +} + +/* Person filter */ +.report-person-filter { + margin-bottom: 1.25rem; +} + +.report-person-filter .report-format-options { + min-height: 4.5rem; + align-content: flex-start; +} + +.report-person-filter h4 { + font-size: 0.85rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-muted); + margin: 0 0 0.5rem; +} + +.report-person-filter .report-format-option input[type="checkbox"] { + display: none; +} + +/* Medication selection area */ +.report-selection { + height: 280px; + overflow-y: auto; + border: 1px solid var(--border-primary); + border-radius: 10px; + padding: 0.75rem; + margin-bottom: 1.25rem; + background: color-mix(in srgb, var(--bg-secondary) 75%, var(--bg-tertiary)); +} + +.report-selection-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.5rem; +} + +.report-selection-count { + font-size: 0.8rem; + color: var(--text-secondary); + font-weight: 500; +} + +.report-group { + margin-bottom: 0.5rem; +} + +.report-group-title { + font-size: 0.78rem; + font-weight: 700; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.04em; + margin: 0.5rem 0 0.35rem; +} + +.report-med-list { + display: flex; + flex-direction: column; + gap: 0.2rem; +} + +.report-med-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.5rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.15s ease; +} + +.report-med-item:hover { + background: var(--accent-bg); +} + +.report-med-item input[type="checkbox"] { + width: 16px; + height: 16px; + margin: 0; + padding: 0; + flex-shrink: 0; + accent-color: var(--accent); + cursor: pointer; +} + +.report-med-name { + flex: 1; + min-width: 0; + font-size: 0.9rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.report-med-name.obsolete-name { + color: var(--text-secondary); + font-style: italic; +} + +.report-med-generic { + color: var(--text-secondary); + font-size: 0.8rem; +} + +/* Format selection */ +.report-format { + margin-bottom: 1.25rem; +} + +.report-format h4 { + font-size: 0.85rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-muted); + margin: 0 0 0.5rem; +} + +.report-format-options { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.report-format-option { + display: flex; + align-items: center; + gap: 0.35rem; + padding: 0.45rem 0.85rem; + border: 1px solid var(--border-secondary); + border-radius: 8px; + cursor: pointer; + font-size: 0.85rem; + font-weight: 500; + color: var(--text-secondary); + background: transparent; + transition: + border-color 0.15s ease, + background 0.15s ease, + color 0.15s ease; +} + +.report-format-option:hover { + border-color: var(--accent); + color: var(--text-primary); + background: var(--accent-bg); +} + +.report-format-option.selected { + border-color: var(--accent); + background: var(--accent-bg); + color: var(--accent-light); + font-weight: 600; +} + +.report-format-option input[type="radio"] { + display: none; +} + +/* Actions */ +.report-actions { + display: flex; + justify-content: flex-end; + gap: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid var(--border-primary); +} diff --git a/frontend/src/styles/app-surfaces.css b/frontend/src/styles/app-surfaces.css new file mode 100644 index 0000000..f31e16a --- /dev/null +++ b/frontend/src/styles/app-surfaces.css @@ -0,0 +1,3060 @@ +/* biome-ignore-all lint/style/noDescendingSpecificity: extracted brownfield layer preserves intentional selector ordering while the CSS split remains behavior-compatible */ +/* ============================================================================= + App Surfaces Layer + Owns shared product shells and broad cross-page surfaces such as dashboard, + medications, planner, and other multi-screen layout structures. + ============================================================================= */ + +/* Grid view for medications page */ +.med-grid-wrapper { + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +.med-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: auto; + gap: 1rem; +} + +.med-groups { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.med-group { + border: 1px solid var(--border-primary); + border-radius: 12px; + padding: 0.9rem; + background: color-mix(in srgb, var(--bg-secondary) 75%, var(--bg-tertiary)); +} + +.med-grid-wrapper.is-empty .med-group-active { + padding: 0.7rem 0.85rem; +} + +.med-empty-state { + color: var(--text-secondary); + font-size: 0.92rem; + padding: 0.35rem 0.1rem; +} + +.med-group-head { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.8rem; +} + +.med-group-head-toggle { + cursor: pointer; + user-select: none; + border-radius: 8px; + padding: 0.1rem 0.25rem; + margin: -0.1rem -0.25rem 0.8rem; + background: none; + box-shadow: none; + color: inherit; +} + +.med-group-head-toggle:hover { + background: var(--bg-tertiary); +} + +.med-group-title { + margin: 0; + font-size: 0.92rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-muted); +} + +.med-group-head-toggle:hover .med-group-title { + color: var(--text-primary); +} + +.med-group-obsolete { + border-color: var(--border-primary); + background: var(--bg-secondary); + opacity: 1; +} + +.med-grid-obsolete { + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: auto; +} + +.obsolete-row { + border-color: var(--border-primary); +} + +@media (max-width: 768px) { + .med-grid { + grid-template-columns: 1fr; + } + + /* Flatten nested boxes on mobile to reclaim horizontal space */ + .med-grid-wrapper > .card { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + border-radius: 0 !important; + } + + .med-grid-wrapper .card-head { + padding: 0 0.25rem; + } + + .med-group, + .med-groups { + border: none !important; + background: transparent !important; + padding: 0 !important; + border-radius: 0 !important; + } + + .med-group-head { + padding: 0 0.25rem; + } + + .med-row { + padding: 0.65rem; + border-radius: 8px; + } + + .blister-row-simple { + padding: 0.45rem 0.5rem 0.45rem 0.65rem; + font-size: 0.82rem; + } + + .med-details { + gap: 0.2rem 0.75rem; + font-size: 0.82rem; + } +} + +.med-row { + display: grid; + grid-template-rows: subgrid; + grid-row: span 2; + gap: 0; + border: 1px solid var(--border-primary); + padding: 1rem; + border-radius: 10px; + background: var(--bg-tertiary); + position: relative; + transition: + background 200ms ease, + border-color 200ms ease; +} +.med-row.editing { + border-color: var(--accent); + background: color-mix(in srgb, var(--accent) 8%, var(--bg-tertiary)); + box-shadow: 0 0 0 1px var(--accent); +} +.med-header { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.med-info { + flex: 1; + min-width: 0; +} +.med-name { + font-weight: 600; + font-size: 1.1rem; + margin-bottom: 0.4rem; +} +.med-details { + display: grid; + grid-template-columns: max-content max-content; + gap: 0.25rem 1.5rem; + color: var(--text-secondary); + font-size: 0.9rem; + margin-bottom: 0.5rem; +} +.med-details strong { + color: var(--text-primary); + font-weight: 600; + margin-left: 0.25rem; +} +.med-total { + color: var(--text-primary); + font-weight: 600; + font-size: 0.95rem; + margin-bottom: 0.5rem; +} +.muted { + color: var(--text-secondary); + font-size: 0.95rem; +} +.small { + font-size: 0.9rem; +} + +.blister-list { + display: flex; + flex-direction: column; + gap: 0.4rem; + padding-top: 0.5rem; + width: 100%; + align-self: start; +} +.blister-row-simple { + color: var(--text-muted); + font-size: 0.9rem; + padding: 0.6rem 0.75rem 0.6rem 1rem; + background: linear-gradient(90deg, var(--accent-bg) 0%, var(--bg-input) 100%); + border: 1px solid var(--border-secondary); + border-left: 3px solid var(--accent); + border-radius: 6px; + width: 100%; + transition: + background 200ms ease, + border-color 200ms ease; +} +.blister-row-simple:hover { + background: linear-gradient(90deg, rgba(47, 134, 246, 0.18) 0%, var(--bg-input) 100%); + border-left-color: var(--accent-light); +} + +.tag { + display: inline-flex; + align-items: center; + gap: 0.3rem; + background: rgba(255, 255, 255, 0.06); + border-radius: 6px; + padding: 0.3rem 0.6rem; + color: var(--text-muted); + font-size: 0.8rem; + font-weight: 500; +} +[data-theme='"light"'] .tag { + background: rgba(0, 0, 0, 0.06); +} +.tag.subtle { + background: rgba(255, 255, 255, 0.04); + color: var(--text-secondary); + font-size: 0.85rem; +} +[data-theme='"light"'] .tag.subtle { + background: rgba(0, 0, 0, 0.04); +} +.tag.success { + background: var(--success-bg); + color: var(--success); + border: 1px solid rgba(57, 217, 138, 0.25); +} +.tag.warning { + background: var(--warning-bg); + color: var(--warning); + border: 1px solid rgba(252, 211, 77, 0.3); +} +.tag.danger { + background: var(--danger-bg); + color: var(--danger); + border: 1px solid rgba(255, 94, 94, 0.3); +} +.tag.high { + background: var(--success-bg); + color: var(--success); + border: 1px solid rgba(57, 217, 138, 0.25); +} +.tag-row { + display: flex; + gap: 0.5rem; + align-items: center; + flex-wrap: wrap; + margin-top: 0.25rem; +} + +.timeline-obsolete-row { + margin-top: 0.15rem; + display: flex; + justify-content: flex-start; +} + +.timeline-obsolete-btn { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.55rem 0.9rem; + min-height: 2.5rem; + font-size: 0.85rem; + line-height: 1; + background: transparent; + border: 1px solid #f8e38a; + color: #ffd54a; + box-shadow: none; +} + +.timeline-obsolete-btn:hover { + background: color-mix(in srgb, #facc15 12%, transparent); + border-color: #ffe27c; + color: #ffe27c; + box-shadow: none; +} + +.timeline-obsolete-btn svg { + width: 1rem; + height: 1rem; + flex-shrink: 0; +} + +[data-theme="light"] .timeline-obsolete-btn { + background: transparent; + border-color: #d97706; + color: #b45309; +} + +[data-theme="light"] .timeline-obsolete-btn:hover { + background: color-mix(in srgb, #f59e0b 10%, transparent); + border-color: #b45309; + color: #92400e; +} +.danger-text { + color: var(--danger); + font-weight: 700; +} +.warning-text { + color: var(--warning); + font-weight: 700; +} +.info-text { + color: var(--info, #60a5fa); + font-weight: 500; +} +.success-text { + color: var(--success); + font-weight: 700; +} + +.optional-label { + font-size: 0.75rem; + color: var(--text-secondary); + font-weight: 400; +} + +button { + padding: 0.7rem 1.25rem; + border-radius: var(--btn-radius); + border: none; + background: var(--btn-primary-bg); + color: white; + cursor: pointer; + font-weight: 600; + font-size: 0.9rem; + box-shadow: var(--btn-shadow); + transition: + background 150ms ease, + box-shadow 150ms ease, + opacity 150ms ease; +} +button:hover { + background: var(--btn-primary-hover); +} +button:active { + box-shadow: var(--btn-shadow); +} + +button:focus-visible { + outline: 2px solid var(--accent-light); + outline-offset: 2px; +} + +button.icon-only { + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; +} + +button.icon-only svg, +.modal-close svg, +.btn-copy svg, +.share-btn svg { + width: 1.1rem; + height: 1.1rem; + stroke-width: 2; + flex-shrink: 0; +} + +/* Secondary button (Edit, etc.) */ +button.secondary { + background: var(--bg-tertiary); + color: var(--text-primary); + border: 1px solid var(--border-secondary); +} +button.secondary:hover { + background: var(--bg-secondary); + border-color: var(--accent); +} +[data-theme="light"] button.secondary { + background: var(--bg-tertiary); +} +[data-theme="light"] button.secondary:hover { + background: var(--bg-secondary); +} + +/* Success button (Refill, etc.) */ +button.success { + background: var(--success); + color: var(--btn-success-text); + border: none; +} +button.success:hover { + filter: brightness(1.1); +} +button.success:disabled { + background: var(--bg-tertiary); + color: var(--text-tertiary); + cursor: not-allowed; +} + +/* Primary/Accent button (New entry, Add intake, etc.) */ +button.primary { + background: var(--accent); + color: white; + border: none; +} +button.primary:hover { + background: var(--accent-light); +} +button.primary:disabled { + background: var(--bg-tertiary); + color: var(--text-tertiary); + cursor: not-allowed; +} + +/* Info button (Edit, secondary actions) */ +button.info { + background: #3b82f6; + color: white; + border: none; +} +button.info:hover { + background: #60a5fa; +} + +/* Ghost button (Cancel, etc.) */ +button.ghost { + background: transparent; + border: 1px solid var(--border-secondary); + color: var(--text-muted); + box-shadow: none; +} +button.ghost:hover { + background: var(--btn-ghost-hover); +} +[data-theme="light"] button.ghost:hover { + background: var(--btn-ghost-hover); +} + +/* Navigation button (Back): neutral and low visual urgency */ +button.btn-nav { + background: var(--bg-secondary); + border: 1px solid var(--border-secondary); + color: var(--text-primary); + box-shadow: none; +} +button.btn-nav:hover { + background: var(--btn-ghost-hover); + border-color: var(--accent); +} + +/* Reversible status-change button (Mark obsolete): warning, not destructive */ +button.btn-obsolete { + background: var(--btn-obsolete-bg); + border: 1px solid var(--btn-obsolete-border); + color: var(--btn-obsolete-text); + box-shadow: none; + font-weight: 700; +} +button.btn-obsolete:hover { + background: var(--btn-obsolete-hover); + transform: none; + box-shadow: none; +} +button.btn-obsolete:active { + transform: none; +} + +.med-actions { + display: flex; + align-items: center; + gap: 0.4rem; + flex-shrink: 0; + margin-bottom: 0.6rem; + flex-wrap: wrap; +} +.med-actions button { + padding: 0.42rem 0.78rem; + height: 2.75rem; + min-height: 2.75rem; + font-size: 0.9rem; + font-weight: 600; + line-height: 1.2; + display: inline-flex; + align-items: center; + justify-content: center; + background: var(--bg-input); + border: 1px solid var(--border-secondary); + box-shadow: none; + transition: + background 160ms ease, + border-color 160ms ease, + box-shadow 160ms ease, + color 160ms ease, + filter 160ms ease; +} + +.med-actions button.icon-only { + width: 2.75rem; + min-width: 2.75rem; + height: 2.75rem; + min-height: 2.75rem; + padding: 0.5rem; +} + +.med-actions button.info { + color: var(--accent-light); + background: var(--bg-input); + border: 1px solid var(--border-secondary); +} + +.med-actions button.info:hover { + border-color: color-mix(in srgb, var(--accent) 55%, var(--border-secondary)); + background: color-mix(in srgb, var(--bg-input) 82%, var(--accent) 18%); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), + 0 0 14px color-mix(in srgb, var(--accent) 28%, transparent); +} + +.med-actions button.btn-obsolete { + color: #ffd54a; + background: var(--bg-input); + border: 1px solid var(--border-secondary); + gap: 0.45rem; + white-space: nowrap; +} + +.med-actions button.btn-obsolete:hover { + color: #ffe27c; + border-color: color-mix(in srgb, #facc15 45%, var(--border-secondary)); + background: color-mix(in srgb, var(--bg-input) 86%, #facc15 14%); + box-shadow: + 0 0 0 1px color-mix(in srgb, #facc15 32%, transparent), + 0 0 14px color-mix(in srgb, #facc15 28%, transparent); +} + +.med-actions button.success { + color: var(--success); + background: var(--bg-input); + border: 1px solid var(--border-secondary); +} + +.med-actions button.success:hover { + border-color: color-mix(in srgb, var(--success) 45%, var(--border-secondary)); + background: color-mix(in srgb, var(--bg-input) 84%, var(--success) 16%); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--success) 32%, transparent), + 0 0 14px color-mix(in srgb, var(--success) 28%, transparent); +} + +.med-actions button.danger, +.med-actions button.ghost.danger { + color: #fda4af; + background: var(--bg-input); + border: 1px solid var(--border-secondary); +} + +.med-actions button.danger:hover, +.med-actions button.ghost.danger:hover { + border-color: color-mix(in srgb, var(--danger) 55%, var(--border-secondary)); + background: color-mix(in srgb, var(--bg-input) 84%, var(--danger) 16%); + box-shadow: + 0 0 0 1px color-mix(in srgb, var(--danger) 32%, transparent), + 0 0 14px color-mix(in srgb, var(--danger) 28%, transparent); +} + +.med-actions button:hover { + filter: brightness(1.05); + transform: none; +} + +[data-theme="light"] .med-row { + background: #f8fafc; + border-color: #cbd5e1; +} + +[data-theme="light"] .med-name { + color: #1e293b; +} + +[data-theme="light"] .med-generic-name { + color: #475569; +} + +[data-theme="light"] .med-actions button { + background: #ffffff; + border-color: #cbd5e1; +} + +[data-theme="light"] .med-actions button.info { + color: #1d4ed8; +} + +[data-theme="light"] .med-actions button.btn-obsolete { + color: #b45309; +} + +[data-theme="light"] .med-actions button.success { + color: #047857; +} + +[data-theme="light"] .med-actions button.danger, +[data-theme="light"] .med-actions button.ghost.danger { + color: #b91c1c; + background: #ffffff; + border-color: #cbd5e1; +} + +[data-theme="light"] .med-actions button.info:hover { + border-color: color-mix(in srgb, #2563eb 44%, #cbd5e1); + background: color-mix(in srgb, #ffffff 86%, #2563eb 14%); + box-shadow: + 0 0 0 1px color-mix(in srgb, #2563eb 24%, transparent), + 0 0 10px color-mix(in srgb, #2563eb 16%, transparent); +} + +[data-theme="light"] .med-actions button.btn-obsolete:hover { + border-color: color-mix(in srgb, #d97706 42%, #cbd5e1); + background: color-mix(in srgb, #ffffff 88%, #f59e0b 12%); + box-shadow: + 0 0 0 1px color-mix(in srgb, #d97706 22%, transparent), + 0 0 10px color-mix(in srgb, #d97706 15%, transparent); +} + +[data-theme="light"] .med-actions button.success:hover { + border-color: color-mix(in srgb, #059669 42%, #cbd5e1); + background: color-mix(in srgb, #ffffff 88%, #10b981 12%); + box-shadow: + 0 0 0 1px color-mix(in srgb, #059669 22%, transparent), + 0 0 10px color-mix(in srgb, #059669 15%, transparent); +} + +[data-theme="light"] .med-actions button.danger:hover, +[data-theme="light"] .med-actions button.ghost.danger:hover { + border-color: color-mix(in srgb, #dc2626 44%, #cbd5e1); + background: color-mix(in srgb, #ffffff 86%, #ef4444 14%); + box-shadow: + 0 0 0 1px color-mix(in srgb, #dc2626 24%, transparent), + 0 0 10px color-mix(in srgb, #dc2626 16%, transparent); +} + +@media (max-width: 600px) { + .med-header { + flex-direction: column; + } + .med-actions { + align-self: flex-start; + } + .med-details { + grid-template-columns: repeat(2, 1fr); + } +} +.blister-list { + display: flex; + flex-wrap: wrap; + gap: 0.35rem; + margin-top: 0.6rem; +} +.blister-pill { + display: flex; + gap: 0.4rem; + flex-wrap: wrap; +} +.blister-row { + display: flex; + flex-direction: column; + gap: 0.75rem; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + padding: 1rem; + border-radius: 8px; + margin-bottom: 0.65rem; + transition: background 200ms ease; +} +[data-theme='"light"'] .blister-row { + background: var(--bg-tertiary); +} +.blister-row .blister-inputs { + display: grid; + grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(10.75rem, 1fr) minmax(7.25rem, 0.8fr); + gap: 0.75rem; + align-items: end; +} + +.blister-row .blister-inputs > label { + min-width: 0; +} + +.blister-row .blister-inputs label.taken-by-field { + grid-column: span 2; +} +.blister-row button { + align-self: flex-end; + width: auto; +} +.blister-row:last-child { + margin-bottom: 0; +} + +@media (max-width: 600px) { + .blister-row .blister-inputs { + grid-template-columns: 1fr 1fr; + gap: 0.75rem; + } + + .blister-row .blister-inputs label.taken-by-field { + grid-column: 1 / -1; + } +} + +/* Desktop edit sidebar can be narrow; avoid clipping right-side controls. */ +@media (min-width: 769px) { + .edit-sidebar .blister-row .blister-inputs { + grid-template-columns: 1fr 1fr; + } + + .edit-sidebar .blister-row .blister-inputs label.taken-by-field { + grid-column: 1 / -1; + } +} + +.gap { + gap: 0.6rem; +} + +.stock-total-row { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 0.75rem; + flex-wrap: wrap; +} + +.stock-total-field { + flex: 1 1 220px; + min-width: 180px; +} + +/* Inline checkbox for compact layout */ +.inline-checkbox { + display: flex !important; + flex-direction: row !important; + align-items: center; + gap: 0.4rem; + cursor: pointer; + font-size: 0.8rem; + color: var(--text-secondary); + padding: 0.35rem 0.6rem; + border-radius: 6px; + transition: + background 0.15s, + color 0.15s; + text-transform: none; + font-weight: 500; + letter-spacing: 0; + white-space: nowrap; +} + +.inline-checkbox:hover { + background: var(--accent-bg); + color: var(--text-primary); +} + +.inline-checkbox:has(input:checked) { + background: var(--accent-bg); + color: var(--accent); +} + +.inline-checkbox input[type="checkbox"] { + width: 14px; + height: 14px; + accent-color: var(--accent); + cursor: pointer; + margin: 0; +} + +.obsolete-row .med-actions button { + opacity: 0.72; + filter: saturate(0.72); + box-shadow: none; +} + +.obsolete-row .med-actions button:hover { + opacity: 0.9; + filter: saturate(0.85); +} + +button.timeline-obsolete-btn.btn-obsolete { + background: transparent; + border: 1px solid #f8e38a; + color: #ffd54a; + box-shadow: none; +} + +button.timeline-obsolete-btn.btn-obsolete:hover { + background: color-mix(in srgb, #facc15 12%, transparent); + border-color: #ffe27c; + color: #ffe27c; + box-shadow: none; +} + +[data-theme="light"] button.timeline-obsolete-btn.btn-obsolete { + background: transparent; + border-color: #d97706; + color: #b45309; +} + +[data-theme="light"] button.timeline-obsolete-btn.btn-obsolete:hover { + background: color-mix(in srgb, #f59e0b 10%, transparent); + border-color: #b45309; + color: #92400e; + box-shadow: none; +} + +/* Danger button (Delete, etc.) */ +button.danger { + background: var(--danger); + color: var(--btn-danger-text); + border: none; +} +button.danger:hover { + background: #dc2626; +} +[data-theme="light"] button.danger { + background: var(--danger); +} +[data-theme="light"] button.danger:hover { + background: #dc2626; +} + +/* Warning button (Mark Obsolete, reversible actions) */ +button.warning { + background: var(--btn-obsolete-bg); + border: 1px solid var(--btn-obsolete-border); + color: var(--btn-obsolete-text); + box-shadow: none; + font-weight: 700; +} +button.warning:hover { + background: var(--btn-obsolete-hover); + transform: none; + box-shadow: none; +} +[data-theme="light"] button.warning { + background: var(--btn-obsolete-bg); + color: var(--btn-obsolete-text); +} + +/* Legacy ghost danger (keep for compatibility) */ +button.ghost.danger { + background: transparent; + border: 1px solid rgba(239, 68, 68, 0.4); + color: var(--danger); + box-shadow: none; +} +button.ghost.danger:hover { + background: var(--danger-bg); +} + +input, +select, +textarea { + width: 100%; + padding: 0.7rem 0.85rem; + border-radius: var(--btn-radius); + border: 1px solid var(--border-secondary); + background: var(--bg-input); + color: var(--text-primary); + font-size: 0.95rem; + font-family: inherit; + transition: + border-color 150ms ease, + box-shadow 150ms ease, + background 200ms ease; +} + +select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + padding-right: 2.25rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-size: 12px 12px; + background-position: right 0.9rem center; +} +input:focus, +select:focus, +textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(47, 134, 246, 0.15); +} +textarea { + resize: vertical; + min-height: 60px; +} + +/* Override browser autofill yellow/orange highlight */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px #0a1018 inset !important; + box-shadow: 0 0 0 1000px #0a1018 inset !important; + -webkit-text-fill-color: #e2e8f0 !important; + caret-color: #e2e8f0; + background-color: #0a1018 !important; + background-image: none !important; + border-color: var(--border-secondary); + transition: background-color 600000s ease-in-out 0s; +} + +[data-theme="light"] input:-webkit-autofill, +[data-theme="light"] input:-webkit-autofill:hover, +[data-theme="light"] input:-webkit-autofill:focus, +[data-theme="light"] textarea:-webkit-autofill, +[data-theme="light"] textarea:-webkit-autofill:hover, +[data-theme="light"] textarea:-webkit-autofill:focus, +[data-theme="light"] select:-webkit-autofill, +[data-theme="light"] select:-webkit-autofill:hover, +[data-theme="light"] select:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important; + box-shadow: 0 0 0 1000px #ffffff inset !important; + -webkit-text-fill-color: #0f172a !important; + caret-color: #0f172a; + background-color: #ffffff !important; + background-image: none !important; +} + +/* Auto-resize textarea */ +textarea.auto-resize { + resize: none; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + min-height: 100px; + max-height: 400px; +} + +/* Mobile textarea improvements */ +@media (max-width: 600px) { + textarea.auto-resize { + min-height: 120px; + font-size: 16px; /* Prevents iOS zoom on focus */ + } +} + +.static-value { + padding: 0.7rem 0.85rem; + border-radius: var(--btn-radius); + background: var(--accent-bg); + border: 1px solid var(--accent); + color: var(--text-primary); + font-weight: 600; + font-size: 1rem; + text-align: right; +} + +.form-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem 1.25rem; +} +.form-grid label { + display: flex; + flex-direction: column; + gap: 0.4rem; + color: var(--text-secondary); + font-size: 0.85rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.03em; +} +.form-grid .full { + grid-column: 1 / -1; +} + +.date-pair-group { + display: grid; + gap: 0.9rem; +} + +.date-pair-field { + min-width: 0; +} + +.date-pair-stack, +.date-pair-stack-header { + display: grid; + gap: 0.45rem; + min-width: 0; +} + +.date-pair-entry { + display: flex; + flex-direction: column; + gap: 0.15rem; + min-width: 0; +} + +.date-pair-label { + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-secondary); + line-height: 1.2; +} + +.date-pair-value { + font-size: 0.9rem; + font-weight: 600; + color: var(--text-primary); + line-height: 1.3; + word-break: break-word; +} + +.form-category { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem 1.25rem; + padding: 0.95rem; + border: 1px solid var(--border-secondary); + border-radius: 12px; + background: var(--bg-tertiary); +} + +.form-category-title { + grid-column: 1 / -1; + margin: 0; + color: var(--accent-light); + font-size: 0.78rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +.form-category .full { + grid-column: 1 / -1; +} + +.form-category > label:not(.full) { + align-self: end; +} + +.form-category-header { + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; +} + +.form-category-header .form-category-title { + margin: 0; +} + +/* Intake section */ +.intake-section .blister-row { + grid-column: 1 / -1; +} + +/* Image section */ +.image-section { + grid-template-columns: 1fr; +} + +.image-section .image-preview { + grid-column: 1 / -1; +} + +.image-section input[type="file"] { + grid-column: 1 / -1; + font-size: 0.9rem; +} + +.image-section input[type="file"]::file-selector-button { + background: var(--accent); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 6px; + cursor: pointer; + margin-right: 0.75rem; + font-weight: 500; +} + +.image-section input[type="file"]::file-selector-button:hover { + background: var(--accent-light); +} + +/* ── Form Tabs ── */ +.form-tabs { + display: flex; + padding: 3px; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: 10px; + gap: 2px; + margin-bottom: 0; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: none; +} +.form-tabs::-webkit-scrollbar { + display: none; +} +.form-tab { + flex: 1; + padding: 0.5rem 0.75rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--text-muted); + background: transparent; + border: none; + border-radius: 8px; + cursor: pointer; + white-space: nowrap; + text-align: center; + text-decoration: none; + user-select: none; + transition: + color 0.15s ease, + background 0.15s ease, + box-shadow 0.15s ease; +} +.form-tab:hover { + color: var(--text-primary); + background: color-mix(in srgb, var(--bg-secondary) 60%, transparent); +} +.form-tab.active { + color: #fff; + background: color-mix(in srgb, var(--accent) 55%, var(--bg-tertiary)); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); +} +.form-tab-panel { + display: none; +} +.form-tab-panel.active { + display: contents; +} + +.form-grid .optional-label { + text-transform: none; + font-weight: 400; + font-size: 0.75rem; +} +.align-end { + display: flex; + justify-content: flex-end; + gap: 0.75rem; +} + +/* Generic select variant used by multiple form contexts */ +.select-field, +.package-type-select { + width: 100%; + padding: 0.6rem 2rem 0.6rem 0.75rem; + font-size: 0.9rem; + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: 8px; + color: var(--text-primary); + cursor: pointer; + background-position: right 0.9rem center; +} + +.select-field:hover, +.package-type-select:hover { + border-color: var(--accent); +} + +.select-field:focus, +.package-type-select:focus { + outline: none; + border-color: var(--accent); +} + +/* Form field validation */ +.form-grid label.has-error input, +.form-grid label.has-error textarea { + border-color: var(--danger) !important; + background-color: rgba(239, 68, 68, 0.05); +} + +.form-grid label.has-error input:focus, +.form-grid label.has-error textarea:focus { + box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); +} + +.field-error { + color: var(--danger); + font-size: 0.75rem; + font-weight: 500; + text-transform: none; + letter-spacing: normal; + margin-top: 0.25rem; +} + +.field-error.error-pulse { + animation: error-pulse-anim 1.5s ease; +} + +@keyframes error-pulse-anim { + 0%, + 100% { + background: transparent; + } + 15% { + background: rgba(239, 68, 68, 0.18); + border-radius: 4px; + padding: 2px 6px; + } + 85% { + background: rgba(239, 68, 68, 0.18); + border-radius: 4px; + padding: 2px 6px; + } +} + +button.has-validation-error { + opacity: 0.65; + cursor: not-allowed; +} + +.readonly-fieldset { + display: contents; +} + +/* Subtle read-only styling for disabled fieldset inputs */ +.readonly-fieldset:disabled input, +.readonly-fieldset:disabled select, +.readonly-fieldset:disabled textarea, +.readonly-fieldset:disabled .date-input-wrapper { + opacity: 0.55; + cursor: default; + border-color: transparent; + background: var(--bg-input); + pointer-events: none; +} + +.readonly-fieldset:disabled .date-input-display { + opacity: 0.55; +} + +.readonly-fieldset:disabled .tag { + opacity: 0.55; + pointer-events: none; +} + +.readonly-fieldset:disabled .static-value { + opacity: 0.55; + border-color: transparent; +} + +.readonly-fieldset:disabled .tag-input-container { + border-color: transparent; +} + +.readonly-fieldset:disabled label { + opacity: 0.7; +} + +/* Dose input with unit selector */ +.dose-input-group { + display: flex; + gap: 0.5rem; + align-items: stretch; +} + +.dose-input-group input { + flex: 1; + min-width: 100px; +} + +.select-field.dose-unit-select, +.dose-unit-select { + width: auto; + min-width: unset; + max-width: 120px; + flex-shrink: 0; + padding: 0.5rem 2rem 0.5rem 0.75rem; + background-color: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: var(--input-radius); + color: var(--text-primary); + font-size: 0.9rem; + cursor: pointer; + transition: border-color 150ms ease; + background-position: right 0.6rem center; +} + +.select-field.dose-unit-select:focus, +.dose-unit-select:focus { + outline: none; + border-color: var(--accent); +} + +.medication-enrichment-section { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.medication-enrichment-body { + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 0.85rem; + border: 1px solid var(--border-primary); + border-radius: 12px; + background: color-mix(in srgb, var(--bg-secondary) 62%, var(--bg-tertiary)); +} + +.medication-enrichment-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 0.75rem; +} + +.medication-enrichment-title { + margin-bottom: 0.2rem; +} + +.medication-enrichment-collapsed-hint, +.medication-enrichment-description, +.medication-enrichment-manual-hint { + margin: 0; +} + +.medication-enrichment-helper-row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 0.5rem; +} + +.medication-enrichment-info { + display: flex; + flex-direction: column; + gap: 0.35rem; + padding: 0.75rem; + border: 1px solid color-mix(in srgb, var(--info) 28%, var(--border-primary)); + border-radius: 10px; + background: color-mix(in srgb, var(--accent-bg) 55%, transparent); +} + +.medication-enrichment-info-title { + margin: 0; + font-size: 0.85rem; + font-weight: 600; + color: var(--text-primary); +} + +.medication-enrichment-search-row { + display: flex; + align-items: stretch; + gap: 0.75rem; +} + +.medication-enrichment-spinner { + width: 0.9rem; + height: 0.9rem; + border-radius: 999px; + border: 2px solid color-mix(in srgb, var(--accent) 24%, transparent); + border-top-color: var(--accent-light); + animation: medication-enrichment-spin 0.8s linear infinite; + flex-shrink: 0; +} + +.medication-enrichment-search-row button { + flex-shrink: 0; + white-space: nowrap; +} + +.medication-enrichment-action-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.65rem; + transition: + transform 160ms ease, + box-shadow 160ms ease, + border-color 160ms ease, + background 160ms ease, + opacity 160ms ease; +} + +.medication-enrichment-action-button.is-loading { + opacity: 1; + border-color: color-mix(in srgb, var(--accent) 34%, var(--border-primary)); + background: color-mix(in srgb, var(--accent-bg) 44%, var(--bg-secondary)); + box-shadow: + 0 10px 24px rgba(47, 134, 246, 0.16), + inset 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.medication-enrichment-action-button.is-loading:hover { + transform: none; +} + +.medication-enrichment-results { + display: grid; + gap: 0.75rem; +} + +.medication-enrichment-toggle-button { + min-width: 11rem; + justify-self: flex-end; + transition: + transform 160ms ease, + box-shadow 160ms ease, + border-color 160ms ease, + background 160ms ease; +} + +.medication-enrichment-toggle-button.primary { + box-shadow: + 0 10px 24px rgba(47, 134, 246, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.medication-enrichment-toggle-button.primary:hover { + transform: translateY(-1px); + box-shadow: + 0 14px 28px rgba(47, 134, 246, 0.28), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +@keyframes medication-enrichment-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.medication-enrichment-results-footer { + display: flex; + justify-content: flex-start; +} + +.medication-enrichment-load-more-button.is-loading { + opacity: 1; + border-color: color-mix(in srgb, var(--accent) 30%, var(--border-primary)); + background: color-mix(in srgb, var(--accent-bg) 38%, var(--bg-secondary)); +} + +.medication-enrichment-result { + display: grid; + gap: 0.6rem; + padding: 0.85rem; + border: 1px solid var(--border-primary); + border-radius: 10px; + background: color-mix(in srgb, var(--bg-secondary) 68%, var(--bg-tertiary)); +} + +.medication-enrichment-result.active { + border-color: color-mix(in srgb, var(--accent) 55%, var(--border-primary)); + box-shadow: inset 0 0 0 1px rgba(47, 134, 246, 0.18); +} + +.medication-enrichment-result-header { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0.75rem; +} + +.medication-enrichment-result-names { + display: flex; + flex-direction: column; + gap: 0.15rem; + min-width: 0; +} + +.medication-enrichment-result-names strong { + font-size: 0.95rem; + word-break: break-word; +} + +.medication-enrichment-result-generic { + font-size: 0.85rem; + color: var(--text-secondary); + word-break: break-word; +} + +.medication-enrichment-result-package { + font-size: 0.8rem; + color: var(--text-secondary); + word-break: break-word; +} + +.medication-enrichment-result-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 0.5rem; + width: 100%; +} + +.medication-enrichment-result-meta { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 0.9rem 1.15rem; + margin: 0; + padding-top: 0.35rem; +} + +.medication-enrichment-result-meta div { + min-width: 0; +} + +.medication-enrichment-result-meta-full { + grid-column: 1 / -1; +} + +.medication-enrichment-result-meta dt { + margin-bottom: 0.35rem; + font-size: 0.72rem; + font-weight: 600; + letter-spacing: 0.05em; + text-transform: uppercase; + color: var(--text-secondary); +} + +.medication-enrichment-result-meta dd { + margin: 0; + font-size: 0.85rem; + color: var(--text-primary); + word-break: break-word; +} + +.medication-enrichment-detail-stack { + display: grid; + gap: 0.8rem; +} + +.medication-enrichment-package-details { + margin: 0; + padding-left: 1rem; + display: grid; + gap: 0.45rem; +} + +.medication-enrichment-strengths { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.medication-enrichment-strength-title { + margin: 0; + font-size: 0.85rem; + font-weight: 600; + color: var(--text-primary); +} + +.medication-enrichment-strength-list { + display: flex; + flex-wrap: wrap; + gap: 0.65rem; +} + +.medication-enrichment-strength-list button { + white-space: nowrap; +} + +.medication-enrichment-detail-hint { + margin: 0; + max-width: 44rem; + line-height: 1.5; +} + +.medication-enrichment-applied-note { + margin: 0; + padding: 0.7rem 0.9rem; + border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); + border-radius: 12px; + background: color-mix(in srgb, var(--success-bg) 75%, transparent); + line-height: 1.45; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); +} + +.medication-enrichment-inline-action { + justify-self: flex-start; +} + +.medication-enrichment-package-choice-list { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 0.75rem; +} + +.medication-enrichment-package-choice-list button.medication-enrichment-package-choice-button { + width: 100%; + display: inline-flex; + align-items: center; + justify-content: flex-start; + gap: 0.65rem; + text-align: left; + white-space: normal; + overflow-wrap: anywhere; + word-break: break-word; + line-height: 1.35; +} + +.medication-enrichment-package-choice-list button.medication-enrichment-package-choice-button.is-loading { + box-shadow: + 0 10px 24px rgba(47, 134, 246, 0.16), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.medication-enrichment-pending-panel { + display: inline-flex; + align-items: center; + gap: 0.65rem; + min-height: 3.25rem; + padding: 0.8rem 0.95rem; + border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-primary)); + border-radius: 12px; + background: color-mix(in srgb, var(--accent-bg) 54%, var(--bg-secondary)); + color: var(--text-secondary); + line-height: 1.45; +} + +@media (max-width: 760px) { + .medication-enrichment-header, + .medication-enrichment-result-header, + .medication-enrichment-search-row, + .medication-enrichment-helper-row { + flex-direction: column; + align-items: stretch; + } + + .medication-enrichment-result-actions { + justify-content: flex-start; + } + + .medication-enrichment-search-row button { + width: 100%; + } +} + +.select-field.dose-unit-select:hover, +.dose-unit-select:hover { + border-color: var(--accent); +} + +/* Tag input for multi-value fields (e.g., Taken By) */ +.tag-input-container { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + padding: 0.5rem; + min-height: 44px; + background: var(--bg-primary); + border: 1px solid var(--border-primary); + border-radius: var(--input-radius); + transition: + border-color 150ms ease, + box-shadow 150ms ease; +} + +.tag-input-container:focus-within { + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 59, 130, 246), 0.15); +} + +.tag-input-container input { + flex: 1; + min-width: 100px; + border: none !important; + background: transparent !important; + padding: 0.25rem !important; + box-shadow: none !important; + font-size: 0.95rem; +} + +.tag-input-container input:focus { + outline: none; + box-shadow: none !important; +} + +.tag { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.25rem 0.5rem; + background: var(--accent); + color: white; + border-radius: 4px; + font-size: 0.85rem; + font-weight: 500; + text-transform: none; + letter-spacing: normal; + white-space: nowrap; +} + +.tag-remove { + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + padding: 0; + background: rgba(255, 255, 255, 0.2); + border: none; + border-radius: 50%; + color: white; + font-size: 14px; + line-height: 1; + cursor: pointer; + transition: background 150ms ease; +} + +.tag-remove:hover { + background: rgba(255, 255, 255, 0.35); +} + +.char-count { + color: var(--text-secondary); + font-size: 0.7rem; + font-weight: 400; + text-transform: none; + letter-spacing: normal; + text-align: right; + margin-top: 0.25rem; +} + +.char-count.warning { + color: var(--warning); +} + +.timeline { + display: flex; + flex-direction: column; + gap: 1rem; +} + +/* Past days toggle button */ +.past-days-toggle { + display: flex; + align-items: center; + flex-wrap: nowrap; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: var(--bg-tertiary); + border: 1px dashed var(--border-primary); + border-radius: var(--btn-radius); + cursor: pointer; + user-select: none; + color: var(--text-secondary); + font-size: 0.9rem; + transition: + background 150ms ease, + border-color 150ms ease, + color 150ms ease; + box-shadow: none; +} +.past-days-toggle:hover { + background: var(--bg-secondary); + border-color: var(--accent); + color: var(--text-primary); +} +.past-days-toggle.expanded { + border-style: solid; + border-color: var(--accent); + background: rgba(47, 134, 246, 0.05); +} +.past-days-icon { + font-size: 0.7rem; + opacity: 0.6; + flex-shrink: 0; +} +.past-days-label { + font-weight: 500; +} +.past-days-count { + opacity: 0.6; + font-size: 0.85rem; + white-space: nowrap; + flex-shrink: 0; +} +.past-days-warning { + margin-left: auto; + color: var(--warning); + font-size: 0.9rem; + font-weight: 600; + display: flex; + align-items: center; + gap: 0.25rem; +} +.past-days-complete { + margin-left: auto; + color: var(--success); + font-size: 1rem; + font-weight: 700; +} +.past-days-toggle.has-missed { + border-color: var(--warning); + background: rgba(234, 179, 8, 0.08); +} + +/* Past days header container - toggle + clear button */ +.past-days-header { + display: flex; + align-items: center; + gap: 0.75rem; +} +.past-days-header .past-days-toggle { + flex: 1; +} + +/* Future days toggle button */ +.future-days-header { + display: flex; + align-items: center; + gap: 0.75rem; +} +.future-days-toggle { + display: flex; + align-items: center; + flex-wrap: nowrap; + flex: 1; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: var(--bg-tertiary); + border: 1px dashed var(--border-primary); + border-radius: var(--btn-radius); + cursor: pointer; + user-select: none; + color: var(--text-secondary); + font-size: 0.9rem; + transition: + background 150ms ease, + border-color 150ms ease, + color 150ms ease; + box-shadow: none; +} +.future-days-toggle:hover { + background: var(--bg-secondary); + border-color: var(--accent); + color: var(--text-primary); +} +.future-days-toggle.expanded { + border-style: solid; + border-color: var(--accent); + background: rgba(47, 134, 246, 0.05); +} +.future-days-icon { + font-size: 0.7rem; + opacity: 0.6; + flex-shrink: 0; +} +.future-days-label { + font-weight: 500; +} +.future-days-count { + opacity: 0.6; + font-size: 0.85rem; + white-space: nowrap; + flex-shrink: 0; +} +.future-days-progress { + margin-left: auto; + color: var(--success); + font-size: 0.9rem; + font-weight: 600; +} +.clear-missed-btn { + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + font-weight: 500; + background: rgba(234, 179, 8, 0.15); + color: var(--warning); + border: 1px solid var(--warning); + border-radius: var(--btn-radius); + cursor: pointer; + white-space: nowrap; + transition: + background 150ms ease, + transform 100ms ease; +} +.clear-missed-btn:hover { + background: rgba(234, 179, 8, 0.25); + transform: translateY(-1px); +} +.clear-missed-btn:active { + transform: translateY(0); +} + +/* Past day blocks styling */ +.day-block.past { + opacity: 0.7; + border-style: dashed; +} +.day-block.past .day-divider { + color: var(--text-secondary); +} +.dose-item.past { + opacity: 0.8; +} + +.day-block { + border: 1px solid var(--border-primary); + border-radius: 16px; + padding: 1rem 1.25rem; + background: var(--bg-secondary); + box-shadow: 0 8px 32px var(--shadow); + transition: + background 200ms ease, + border-color 200ms ease; +} +.day-block.collapsed { + padding-bottom: 0.75rem; +} +.day-block.today { + border-color: var(--accent); + border-width: 2px; + background: linear-gradient(135deg, rgba(47, 134, 246, 0.08) 0%, rgba(47, 134, 246, 0.02) 100%); + box-shadow: + 0 8px 32px var(--shadow), + 0 0 0 1px rgba(47, 134, 246, 0.1); +} +.day-block.today .day-divider { + color: var(--accent); +} +.day-block.all-taken { + border-color: rgba(57, 217, 138, 0.3); + background: linear-gradient(135deg, rgba(57, 217, 138, 0.06) 0%, rgba(57, 217, 138, 0.015) 100%); +} +.day-block.all-taken .day-divider, +.day-block.all-taken.stock-warning .day-divider, +.day-block.all-taken.stock-danger .day-divider { + color: var(--success); + opacity: 0.8; +} +.day-block.past-missed { + border-color: rgba(252, 211, 77, 0.35); +} +.day-block.past-missed .day-divider { + color: var(--warning); + opacity: 0.8; +} +.day-block.today.all-taken { + border-color: var(--success); + background: linear-gradient(135deg, rgba(57, 217, 138, 0.08) 0%, rgba(57, 217, 138, 0.02) 100%); +} + +/* Stock status colors for day blocks */ +.day-block.stock-success { + border-color: rgba(57, 217, 138, 0.3); +} +.day-block.stock-success .day-divider { + color: var(--success); + opacity: 0.8; +} +.day-block.stock-warning { + border-color: rgba(252, 211, 77, 0.35); +} +.day-block.stock-warning .day-divider { + color: var(--warning); + opacity: 0.8; +} +.day-block.stock-danger { + border-color: rgba(255, 94, 94, 0.35); +} +.day-block.stock-danger .day-divider { + color: var(--danger); + opacity: 0.8; +} + +.day-divider { + margin: 0 0 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid rgba(47, 134, 246, 0.2); + color: var(--accent-light); + font-weight: 700; + font-size: 0.95rem; + letter-spacing: 0.02em; + display: flex; + align-items: center; + gap: 0.5rem; +} +.day-divider.clickable { + cursor: pointer; + user-select: none; +} +.day-divider.clickable:hover { + opacity: 0.8; +} +/* Keep warning/danger colors on hover */ +.day-block.stock-warning .day-divider.clickable:hover { + color: var(--warning); +} +.day-block.stock-danger .day-divider.clickable:hover { + color: var(--danger); +} +.day-collapse-icon { + font-size: 0.7rem; + opacity: 0.6; + transition: transform 0.2s ease; + width: 1rem; + text-align: center; +} +.day-date { + flex: 1; +} +.day-summary { + font-size: 0.8rem; + font-weight: 500; + opacity: 0.7; +} +.day-complete { + color: var(--success); +} +.day-progress { + color: var(--text-secondary); +} +.day-warning { + margin-right: 0.35rem; +} +.day-block.collapsed .day-divider { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} +.time-row { + display: grid; + grid-template-columns: minmax(120px, 190px) 1fr; + align-items: start; + gap: 0.5rem; + padding: 0.75rem 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + transition: opacity 0.2s ease; +} +[data-theme='"light"'] .time-row { + border-bottom-color: rgba(0, 0, 0, 0.06); +} +.time-row:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.time-row.med-empty { + border-left: 3px solid var(--danger); + padding-left: 0.6rem; + background: color-mix(in srgb, var(--danger) 8%, transparent); + border-radius: 8px; +} + +.time-row.med-low { + border-left: 3px solid var(--warning); + padding-left: 0.6rem; + background: color-mix(in srgb, var(--warning) 10%, transparent); + border-radius: 8px; +} + +.time-row.med-low .med-name-text { + color: color-mix(in srgb, var(--warning) 88%, white 12%); +} + +.time-row.med-low .tag.subtle { + background: color-mix(in srgb, var(--warning) 16%, transparent); + border-color: color-mix(in srgb, var(--warning) 42%, transparent); + color: color-mix(in srgb, var(--warning) 82%, white 18%); +} + +.time-row.med-empty .med-name-text { + color: var(--danger); + text-decoration: line-through; + text-decoration-thickness: 2px; +} + +.time-row.med-empty .tag.subtle { + background: color-mix(in srgb, var(--danger) 16%, transparent); + border-color: color-mix(in srgb, var(--danger) 42%, transparent); + color: color-mix(in srgb, var(--danger) 82%, white 18%); +} +.time-main { + display: flex; + flex-direction: column; + gap: 0.4rem; +} +.time-main .med-name { + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + margin: 0; +} +.time-main .med-name span.clickable { + cursor: pointer; +} +.time-main .med-name .med-name-stack.clickable { + cursor: pointer; +} +.time-main .med-name span.clickable:hover .med-avatar { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} +.time-col { + display: flex; + align-items: center; + justify-content: flex-start; +} +.time-chip { + display: inline-flex; + align-items: center; + gap: 0.5rem; + border: 1px solid rgba(47, 134, 246, 0.4); + border-radius: 8px; + padding: 0.5rem 0.75rem; + background: var(--accent-bg); + color: var(--accent-light); + font-weight: 600; + font-size: 0.9rem; + font-variant-numeric: tabular-nums; +} +.times-chip { + white-space: nowrap; +} + +/* Dose tracking */ +.doses-col { + display: flex; + flex-direction: column; + gap: 0.4rem; +} + +.dose-item { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.4rem; + background: var(--accent-bg); + border: 1px solid rgba(47, 134, 246, 0.3); + border-radius: 6px; + font-size: 0.85rem; + transition: all 0.2s ease; +} + +.dose-item.taken { + background: var(--success-bg); + border-color: rgba(57, 217, 138, 0.3); + opacity: 0.7; +} + +.dose-item.taken .dose-time, +.dose-item.taken .dose-usage { + text-decoration: line-through; + color: var(--text-secondary); +} + +/* All persons have taken this dose */ +.dose-item.all-taken { + background: var(--success-bg); + border-color: rgba(57, 217, 138, 0.3); + opacity: 0.7; +} + +.dose-item.all-taken .dose-time, +.dose-item.all-taken .dose-usage { + text-decoration: line-through; + color: var(--text-secondary); +} + +/* Overdue (past, not taken) doses */ +.dose-item.overdue { + background: var(--warning-bg); + border-color: rgba(252, 211, 77, 0.4); +} + +.dose-item.overdue .dose-time { + color: var(--warning); +} + +.dose-item.overdue .dose-btn.take { + box-shadow: 0 0 0 2px var(--warning); + animation: overduePulse 1.5s ease-in-out infinite; +} + +.dose-item.overdue .dose-btn.take:hover { + filter: brightness(0.87); +} + +@keyframes overduePulse { + 0%, + 100% { + box-shadow: 0 0 0 2px var(--warning); + } + 50% { + box-shadow: 0 0 0 0 var(--warning); + } +} + +/* Overdue AND taken = show it was late */ +.dose-item.overdue.taken { + background: rgba(252, 211, 77, 0.08); + border-color: rgba(252, 211, 77, 0.2); + opacity: 0.6; +} + +.dose-item.overdue.taken .dose-time, +.dose-item.overdue.taken .dose-usage { + text-decoration: line-through; + color: var(--text-secondary); +} + +.dose-item.med-low, +.dose-item.med-low.all-taken, +.dose-item.med-low.taken, +.dose-item.med-low.future, +.dose-item.med-low.overdue, +.dose-item.med-low.overdue.taken { + border-color: rgba(252, 211, 77, 0.5); + box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 88%, black 12%); +} + +.dose-item.med-low:not(.all-taken):not(.taken):not(.overdue):not(.med-empty) { + background: color-mix(in srgb, var(--warning) 9%, var(--accent-bg)); +} + +.dose-item.med-empty, +.dose-item.med-empty.all-taken, +.dose-item.med-empty.taken, +.dose-item.med-empty.future, +.dose-item.med-empty.overdue, +.dose-item.med-empty.overdue.taken { + background: color-mix(in srgb, var(--danger) 13%, transparent); + border-color: color-mix(in srgb, var(--danger) 46%, transparent); + opacity: 1; +} + +.dose-item.med-empty .dose-time, +.dose-item.med-empty .dose-usage { + color: color-mix(in srgb, var(--danger) 82%, white 18%); + text-decoration: line-through; + text-decoration-thickness: 2px; +} + +.dose-item.med-empty .dose-person { + background: color-mix(in srgb, var(--danger) 18%, transparent); +} + +.dose-item.med-empty .dose-person .person-name, +.dose-item.med-empty .dose-person.taken .person-name { + color: color-mix(in srgb, var(--danger) 80%, white 20%); +} + +.dose-time { + font-weight: 600; + color: var(--accent-light); + min-width: 50px; +} + +.dose-usage { + color: var(--text-secondary); + font-size: 0.8rem; + display: flex; + flex-direction: column; + gap: 0.05rem; + flex: 1; + min-width: 0; +} + +.dose-usage-main { + line-height: 1.15; +} + +.dose-usage-weight { + font-size: 0.78rem; + line-height: 1.15; + color: var(--text-secondary); +} + +.dose-btn { + margin-left: auto; + height: 28px; + min-height: 28px; + padding: 0 10px; + border-radius: var(--btn-radius); + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + font-size: 0.8rem; + font-weight: 500; + white-space: nowrap; + cursor: pointer; + transition: + background 150ms ease, + border-color 150ms ease, + color 150ms ease, + filter 150ms ease; + flex-shrink: 0; + box-shadow: none; +} + +.dose-btn .dose-btn-label { + display: none; +} + +.dose-btn.take { + background: var(--success); + border: 1px solid var(--success); + color: white; +} + +/* Main app upcoming schedule: improve contrast on bright success button */ +.dashboard-schedules-section .dose-btn.take { + background: #1f8a70; + border-color: #1f8a70; + color: #f3fffb; + font-weight: 600; +} + +.dashboard-schedules-section .dose-btn.take:hover:not(:disabled) { + background: #19745f; + border-color: #19745f; + filter: none; +} + +[data-theme="light"] .dashboard-schedules-section .dose-btn.take { + background: #67d9b8; + border-color: #3fbf9b; + color: #08352b; +} + +[data-theme="light"] .dashboard-schedules-section .dose-btn.take:hover:not(:disabled) { + background: #55cfac; + border-color: #37b691; +} + +.dose-btn.take:hover:not(:disabled) { + filter: brightness(0.87); +} + +.dose-btn.take:disabled { + opacity: 0.35; + cursor: not-allowed; + background: var(--bg-tertiary); + border-color: var(--border-primary); + color: var(--text-secondary); + filter: none; +} + +.dose-btn.take.out-of-stock, +.dose-btn.take.out-of-stock:disabled, +.dashboard-schedules-section .dose-btn.take.out-of-stock, +.dashboard-schedules-section .dose-btn.take.out-of-stock:disabled, +[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock, +[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock:disabled, +[data-theme="light"] .dose-btn.take.out-of-stock, +[data-theme="light"] .dose-btn.take.out-of-stock:disabled { + opacity: 1; + background: var(--danger); + border-color: var(--danger); + color: white; + box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); + filter: none; +} + +.dose-item.future { + opacity: 0.5; +} + +.dose-btn.undo { + background: var(--warning); + border: 1px solid var(--warning); + color: #1a1a2e; +} + +.dose-btn.undo:hover { + filter: brightness(0.9); +} + +/* Per-person dose tracking */ +.dose-checks { + display: flex; + flex-direction: column; + gap: 4px; + margin-left: auto; +} + +.dose-person { + display: flex; + align-items: center; + gap: 6px; + padding: 2px 6px; + border-radius: 4px; + background: rgba(255, 255, 255, 0.03); +} + +.dose-person.taken { + background: var(--success-bg); +} + +.dose-person.overdue { + background: var(--warning-bg); +} + +.dose-person .person-name { + font-size: 0.75rem; + color: var(--text-secondary); + min-width: 60px; + margin-right: 0.45rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.dose-person .person-name.clickable { + cursor: pointer; +} + +.dose-person .person-name.clickable:hover { + color: var(--primary); + text-decoration: underline; +} + +.dose-person.taken .person-name { + color: var(--success); +} + +.dose-person .dose-btn { + margin-left: 0; + height: 24px; + min-height: 24px; + padding: 0 6px; + font-size: 0.75rem; +} + +@media (min-width: 769px) { + .time-row { + grid-template-columns: minmax(170px, 230px) 1fr; + gap: 0.85rem; + } + + .doses-col { + gap: 0.5rem; + } + + .dose-item { + display: grid; + grid-template-columns: 5rem minmax(12rem, 1fr) auto auto; + align-items: center; + column-gap: 0.8rem; + padding: 0.45rem 0.7rem; + } + + .dose-time { + min-width: 0; + } + + .dose-usage { + min-width: 0; + flex-direction: row; + align-items: baseline; + gap: 0.45rem; + white-space: nowrap; + } + + .dose-usage-main, + .dose-usage-weight { + white-space: nowrap; + } + + .dose-item .reminder-icon { + margin: 0; + justify-self: center; + } + + .dose-item .dose-checks { + grid-column: 4; + margin-left: 0; + align-items: flex-end; + } + + .dose-person { + padding: 3px 8px; + gap: 8px; + } + + .dose-person .person-name { + min-width: 80px; + max-width: 16rem; + } +} + +[data-theme="light"] .dose-btn.take { + color: #0f172a; +} + +.highlights { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.card p { + margin: 0; +} + +.table { + width: 100%; + display: flex; + flex-direction: column; + gap: 0; + margin-top: 0.5rem; +} +.table-head, +.table-row { + display: grid; + grid-template-columns: minmax(180px, 2fr) 100px 140px 140px 120px; + align-items: center; + gap: 1rem; + padding: 0.75rem 1rem; +} +.table-head { + color: #7ca7ff; + font-weight: 600; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.04em; + background: rgba(47, 134, 246, 0.06); + border-radius: 8px; + margin-bottom: 0.5rem; +} +.table-row { + background: rgba(255, 255, 255, 0.02); + border-radius: 8px; + margin-bottom: 0.35rem; + transition: background 150ms ease; +} +.table-row:hover { + background: rgba(255, 255, 255, 0.04); +} +.table-row:last-child { + margin-bottom: 0; +} +.table-4 .table-head, +.table-4 .table-row { + grid-template-columns: minmax(200px, 2.2fr) 150px 130px 170px; +} +.table-5 .table-head, +.table-5 .table-row { + grid-template-columns: minmax(180px, 2fr) 120px 100px 130px 130px; +} +.table-6 .table-head, +.table-6 .table-row { + grid-template-columns: minmax(160px, 2fr) 100px 80px 110px 110px 110px; +} +.table-7 .table-head, +.table-7 .table-row { + grid-template-columns: minmax(140px, 1.5fr) 90px 70px 100px 100px 90px 90px; +} + +.table-8 .table-head, +.table-8 .table-row { + grid-template-columns: minmax(130px, 1.4fr) 90px 130px 70px 95px minmax(130px, 1.15fr) 95px; +} + +.email-sent-status { + font-size: 0.8rem; + color: var(--success); +} + +.next-reminder-date { + font-size: 0.8rem; + color: var(--accent-light); +} + +.status-chip { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.4rem 0.75rem; + border-radius: 6px; + font-size: 0.8rem; + font-weight: 600; + white-space: nowrap; +} +.status-chip.success { + background: rgba(57, 217, 138, 0.15); + color: #6ee7b7; + border: 1px solid rgba(57, 217, 138, 0.3); +} +.status-chip.success::before { + content: "✓"; + font-size: 0.75rem; +} +.status-chip.danger { + background: rgba(255, 94, 94, 0.15); + color: #fca5a5; + border: 1px solid rgba(255, 94, 94, 0.3); +} +.status-chip.danger::before { + content: "!"; + font-weight: 700; +} +.status-chip.warning { + background: rgba(252, 211, 77, 0.15); + color: #fcd34d; + border: 1px solid rgba(252, 211, 77, 0.3); +} +.status-chip.warning::before { + content: "!"; + font-weight: 700; +} +.status-chip.high { + background: rgba(57, 217, 138, 0.15); + color: #6ee7b7; + border: 1px solid rgba(57, 217, 138, 0.3); +} +.status-chip.high::before { + content: "★"; +} +.status-chip.small { + font-size: 0.7rem; + padding: 0.2rem 0.5rem; + word-spacing: 0.1rem; +} + +@media (max-width: 760px) { + .table-head, + .table-row { + grid-template-columns: 1fr; + gap: 0.25rem; + } + .table-head { + display: none; + } + .table-row .hide-on-card { + display: none; + } + .table-row { + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + align-items: stretch; + } + .table-row > span { + display: flex; + justify-content: space-between; + align-items: center; + text-align: left; + } + .table-row > span::before { + content: attr(data-label); + font-weight: 600; + color: var(--accent-light); + font-size: 0.75rem; + text-transform: uppercase; + margin-right: 1rem; + flex-shrink: 0; + text-align: left; + } + .table-row > .date-pair-stack { + gap: 0.45rem; + } + .table-row > .date-pair-stack::before { + display: none; + content: none; + } + .table-row > .date-pair-stack .date-pair-entry { + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + gap: 0.75rem; + } + .table-row > .date-pair-stack .date-pair-label { + margin-right: 0.75rem; + flex-shrink: 0; + } + .table-row > .date-pair-stack .date-pair-value { + text-align: right; + } + /* First span (name cell) - centered horizontal layout */ + .table-row > span:first-child { + justify-content: flex-start; + padding-bottom: 0.15rem; + margin-bottom: 0; + } + .table-row > span:first-child::before { + display: none; /* Hide "NAME" label on mobile */ + } + /* Status chip in table row - left aligned */ + .table-row > span.status-chip { + align-self: flex-start; + justify-content: flex-start; + gap: 0.4rem; + } + .table-row > span.status-chip::before { + margin-right: 0; + } + /* Avatar + name layout - left aligned */ + .table-row .cell-with-avatar { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.25rem; + } + .table-row .cell-with-avatar .med-name-line { + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: 0.4rem; + } + .table-row .cell-with-avatar .med-avatar { + flex-shrink: 0; + } + /* Icons on separate line on mobile - left aligned */ + .table-row .cell-with-avatar .med-icons { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.5rem; + width: 100%; + } + /* Badges and icons wrap to next line if needed but stay together */ + .table-row .taken-by-badge, + .table-row .reminder-icon, + .table-row .notes-icon { + flex-shrink: 0; + } + + /* Prevent data-label ::before on nested spans inside name cell */ + .table-row .cell-with-avatar span::before { + display: none; + } + .table-row .cell-with-avatar .taken-by-badge, + .table-row .cell-with-avatar .med-name-text { + display: inline !important; + justify-content: initial; + } + .table-row .med-taken-by-line { + display: flex !important; + align-items: center; + flex-wrap: wrap; + row-gap: 0.2rem; + column-gap: 0.5rem; + justify-content: flex-start; + } + .table-row .cell-with-avatar .taken-by-badge { + display: inline-flex !important; + align-items: center; + line-height: 1; + margin-left: 0; + } + .table-4 .table-head, + .table-4 .table-row, + .table-5 .table-head, + .table-5 .table-row, + .table-6 .table-head, + .table-6 .table-row, + .table-7 .table-head, + .table-7 .table-row { + grid-template-columns: 1fr; + } +} + +@media (max-width: 600px) { + .page { + padding: 0.75rem 0.4rem 1rem; + } + + .grid { + grid-template-columns: 1fr; + } + + .card { + padding: 0.65rem; + overflow: hidden; + max-width: 100%; + } + + .hero { + flex-direction: column; + align-items: flex-start; + padding: 1rem; + gap: 1rem; + } + + .hero h1 { + font-size: 1.3rem; + } + + .header-actions { + width: 100%; + justify-content: space-between; + } + + .tabs { + flex-wrap: wrap; + gap: 0.4rem; + } + + .tabs .pill { + font-size: 0.75rem; + padding: 0.3rem 0.6rem; + } + + .card { + padding: 1rem; + border-radius: 10px; + } + + .card-head { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .card h2 { + font-size: 1.05rem; + } + + .grid { + grid-template-columns: 1fr; + } + + .time-row { + grid-template-columns: 1fr; + gap: 0.5rem; + } + + .doses-col { + flex-direction: row; + flex-wrap: wrap; + } + + .dose-item { + flex: 1 1 auto; + min-width: 140px; + gap: 0.35rem; + padding: 0.35rem 0.3rem; + } + + .dose-time { + min-width: 42px; + padding-left: 0.2rem; + } + + .dose-usage { + line-height: 1.15; + } + + .dose-checks { + gap: 2px; + } + + .dose-person { + gap: 4px; + padding: 1px 4px; + } + + .dose-person .person-name { + min-width: 0; + max-width: 5.6rem; + margin-right: 0.35rem; + } + + .dose-person .dose-btn { + height: 22px; + min-height: 22px; + padding: 0 5px; + font-size: 0.72rem; + } + + .dose-btn .dose-btn-label { + display: inline; + } + + .time-chip { + font-size: 0.8rem; + padding: 0.4rem 0.6rem; + } + + .day-block { + padding: 0.75rem; + } + + /* Use more horizontal space for schedule cards on phones */ + .dashboard-schedules-section > .card { + padding-inline: 0.35rem; + overflow: visible; + } + + /* Keep header controls aligned like other dashboard cards */ + .dashboard-schedules-section .card-head { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 0.6rem; + padding-inline: 0.65rem; + } + + .dashboard-schedules-section .card-head-actions { + margin-left: auto; + gap: 0.5rem; + flex-shrink: 0; + } + + .dashboard-schedules-section .day-block { + margin-inline: -0.1rem; + } + + .status-chip { + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + } + + .med-details { + grid-template-columns: 1fr; + gap: 0.2rem; + } + + button { + padding: 0.6rem 1rem; + font-size: 0.85rem; + } + + .planner-email-action, + .email-send-action { + flex-direction: column; + align-items: stretch; + gap: 0.5rem; + } + + .planner-email-action button, + .email-send-action button { + width: 100%; + } +} + +@media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + } + .stats { + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + } +} + +.planner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + padding: 1rem; + background: linear-gradient(135deg, rgba(47, 134, 246, 0.04), rgba(115, 195, 255, 0.02)); + border: 1px solid rgba(47, 134, 246, 0.15); + border-radius: 12px; + margin-bottom: 1rem; +} +.planner label { + display: flex; + flex-direction: column; + gap: 0.5rem; + color: #93a3b8; + font-size: 0.8rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.04em; +} +.planner .planner-checkbox-row { + grid-column: 1 / -1; + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; +} +.planner label.planner-checkbox { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + gap: 0.75rem; + color: var(--text-secondary); + font-size: 0.875rem; + font-weight: 400; + text-transform: none; + letter-spacing: normal; + cursor: pointer; +} +.planner-checkbox input[type="checkbox"] { + width: 1.125rem; + height: 1.125rem; + cursor: pointer; + accent-color: var(--accent-primary); +} +.planner-actions { + grid-column: 1 / -1; + display: flex; + justify-content: flex-end; + gap: 0.75rem; + padding-top: 0.5rem; + border-top: 1px solid rgba(255, 255, 255, 0.06); + margin-top: 0.5rem; +} + +.planner-email-action { + display: flex; + align-items: center; + gap: 1rem; + padding-top: 1rem; + margin-top: 0.5rem; + border-top: 1px solid var(--border-primary); +} + +.email-send-action { + display: flex; + align-items: center; + gap: 1rem; + padding-top: 1rem; + margin-top: 0.5rem; + border-top: 1px solid var(--border-primary); +} + +@media (max-width: 600px) { + .planner { + grid-template-columns: 1fr; + } +} diff --git a/frontend/src/styles/auth-profile.css b/frontend/src/styles/auth-profile.css new file mode 100644 index 0000000..bbf0dd1 --- /dev/null +++ b/frontend/src/styles/auth-profile.css @@ -0,0 +1,704 @@ +/* ============================================================================= + Auth And Profile Layer + Owns authentication, password reset, and profile/account presentation. + ============================================================================= */ + +.auth-container { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg-gradient); + padding: 1rem; +} + +.auth-card { + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: 16px; + padding: 2.5rem; + width: 100%; + max-width: 420px; + box-shadow: 0 10px 40px var(--shadow); +} + +.auth-title { + font-size: 2rem; + font-weight: 700; + text-align: center; + margin: 0 0 0.5rem 0; + color: var(--text-primary); +} + +.auth-subtitle { + font-size: 1.25rem; + font-weight: 500; + text-align: center; + margin: 0 0 1.5rem 0; + color: var(--text-secondary); +} + +.auth-info { + text-align: center; + color: var(--text-secondary); + margin-bottom: 1.5rem; + padding: 1rem; + background: var(--accent-bg); + border-radius: 8px; + font-size: 0.9rem; +} + +.auth-form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.auth-error { + background: var(--danger-bg); + color: var(--danger); + padding: 0.75rem 1rem; + border-radius: 8px; + font-size: 0.9rem; + text-align: center; +} + +.auth-success { + background: var(--success-bg); + color: var(--success); + padding: 0.75rem 1rem; + border-radius: 8px; + font-size: 0.9rem; + text-align: center; +} + +.auth-submit { + margin-top: 0.5rem; + padding: 0.875rem; + font-size: 1rem; + font-weight: 600; +} + +/* SSO Login Button */ +.auth-sso { + margin-bottom: 1rem; +} + +.sso-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + width: 100%; + background: var(--card-bg); + border: 1px solid var(--border-primary); + color: var(--text-primary); + transition: all 0.2s ease; +} + +.sso-btn:hover { + background: var(--hover-bg); + border-color: var(--accent); + color: var(--accent); +} + +.sso-icon { + width: 1.25rem; + height: 1.25rem; + flex-shrink: 0; +} + +.auth-divider { + display: flex; + align-items: center; + gap: 1rem; + margin: 1.25rem 0; + color: var(--text-muted); + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.auth-divider::before, +.auth-divider::after { + content: ""; + flex: 1; + height: 1px; + background: var(--border-primary); +} + +.auth-form .checkbox-group { + margin-bottom: 0.5rem; +} + +.auth-form .checkbox-label { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + font-size: 0.9rem; + color: var(--text-secondary); +} + +.auth-form .checkbox-label input[type="checkbox"] { + width: 1rem; + height: 1rem; + accent-color: var(--accent); + cursor: pointer; +} + +/* Password Input with Toggle */ +.password-input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.password-input-wrapper input { + width: 100%; + padding-right: 2.5rem; +} + +.password-toggle-btn { + position: absolute; + right: 0.5rem; + background: none; + border: none; + padding: 0.25rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-tertiary); + transition: color 0.15s ease; +} + +.password-toggle-btn:hover { + color: var(--text-secondary); +} + +.password-toggle-btn svg { + width: 1.25rem; + height: 1.25rem; +} + +.auth-links { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + margin-top: 1.5rem; + padding-top: 1.5rem; + border-top: 1px solid var(--border-primary); +} + +.auth-link, +.auth-link-btn { + color: var(--accent); + text-decoration: none; + font-size: 0.9rem; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.auth-link:hover, +.auth-link-btn:hover { + text-decoration: underline; + color: var(--accent-light); +} + +/* Profile Component */ +.profile-container { + padding: 0; +} + +.profile-header { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1.5rem; + padding-right: 2.5rem; /* Space for modal close button */ +} + +.profile-header h2 { + margin: 0; + font-size: 1.25rem; +} + +.profile-role { + background: var(--accent-bg); + color: var(--accent); + padding: 0.25rem 0.75rem; + border-radius: 100px; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; +} + +.profile-info { + margin-bottom: 1.5rem; + padding: 1rem; + background: var(--bg-tertiary); + border-radius: 8px; +} + +.profile-info p { + margin: 0; + color: var(--text-secondary); +} + +.profile-form { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.profile-form h3 { + margin: 0.5rem 0 0 0; + font-size: 1rem; + color: var(--text-secondary); +} + +.profile-divider { + border: none; + border-top: 1px solid var(--border-primary); + margin: 0.5rem 0; +} + +.profile-actions { + display: flex; + gap: 1rem; + margin-top: 0.5rem; +} + +.profile-actions .btn { + flex: 1; +} + +/* User Menu Dropdown in Header */ +.user-menu { + position: relative; +} + +.user-menu-btn { + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + padding: 0; + cursor: pointer; + border-radius: 50%; + box-shadow: none; +} + +.user-menu-btn:hover { + background: transparent; +} + +.user-menu-btn .user-avatar { + width: 36px; + height: 36px; + background: var(--accent); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 0.9rem; + border: 2px solid transparent; + transition: border-color 150ms ease; +} + +.user-menu-btn .user-avatar-img { + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + border: 2px solid transparent; + transition: border-color 150ms ease; +} + +.user-menu:hover .user-menu-btn .user-avatar, +.user-menu:hover .user-menu-btn .user-avatar-img { + border-color: var(--accent); +} + +.user-dropdown { + position: absolute; + top: calc(100% + 0.75rem); + right: 0; + width: 260px; + background: rgba(15, 23, 42, 0.75); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 16px; + box-shadow: + 0 16px 48px rgba(0, 0, 0, 0.5), + inset 0 0 0 1px rgba(255, 255, 255, 0.05); + opacity: 0; + visibility: hidden; + transform: translateY(-8px) scale(0.95); + transition: all 0.2s ease; + z-index: 1000; + overflow: hidden; +} + +[data-theme="light"] .user-dropdown { + background: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); +} + +/* Only use hover on devices that support it (not touch) */ +@media (hover: hover) and (pointer: fine) { + .user-menu:hover .user-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); + } +} + +/* Click-based open for all devices */ +.user-menu.open .user-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); +} + +.dropdown-header { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.25rem; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%); + border-bottom: 1px solid var(--border-primary); +} + +.dropdown-avatar { + width: 48px; + height: 48px; + background: var(--accent); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.25rem; + flex-shrink: 0; +} + +.dropdown-avatar-img { + width: 48px; + height: 48px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +.dropdown-user-info { + display: flex; + flex-direction: column; + gap: 0.125rem; + min-width: 0; +} + +.dropdown-username { + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.dropdown-role { + font-size: 0.75rem; + color: var(--text-secondary); +} + +.dropdown-menu { + padding: 0.5rem; +} + +.dropdown-item { + display: flex; + align-items: center; + gap: 0.875rem; + width: 100%; + padding: 0.75rem 1rem; + border: none; + background: none; + color: var(--text-primary); + font-size: 0.9rem; + cursor: pointer; + border-radius: 10px; + transition: + background 0.15s ease, + color 0.15s ease; + text-align: left; +} + +.dropdown-item:hover { + background: rgba(59, 130, 246, 0.15); + color: var(--text-primary); +} + +.dropdown-item:hover svg { + opacity: 1; + color: var(--accent); +} + +/* Override danger button styles for dropdown items */ +.dropdown-item.danger, +[data-theme="light"] .dropdown-item.danger { + background: none !important; + color: var(--text-primary); + border: none; + box-shadow: none; +} + +.dropdown-item.danger:hover, +[data-theme="light"] .dropdown-item.danger:hover { + background: rgba(239, 68, 68, 0.15) !important; + color: var(--danger); +} + +.dropdown-item svg { + width: 20px; + height: 20px; + flex-shrink: 0; + opacity: 0.7; +} + +@media (max-width: 600px) { + .auth-card { + padding: 1.5rem; + } + + .auth-title { + font-size: 1.75rem; + } +} + +/* Profile Modal */ +.profile-modal { + max-width: 420px; + padding: 0; + overflow-y: auto; + max-height: 90vh; +} + +.profile-container { + padding: 0; +} + +.profile-user-section { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.5rem; + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-primary); +} + +.profile-avatar-wrapper { + position: relative; +} + +.profile-avatar { + width: 64px; + height: 64px; + background: var(--text-tertiary); + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.75rem; + flex-shrink: 0; +} + +.profile-avatar-img { + width: 64px; + height: 64px; + border-radius: 50%; + object-fit: cover; +} + +.profile-avatar-actions { + position: absolute; + bottom: -4px; + right: -4px; + display: flex; + gap: 0.25rem; +} + +.avatar-btn { + width: 28px; + height: 28px; + min-width: 28px; + min-height: 28px; + border-radius: var(--btn-radius-round); + border: 2px solid var(--bg-secondary); + background: var(--bg-tertiary); + color: var(--text-primary); + font-size: 0.75rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + transition: + background 150ms ease, + color 150ms ease; + box-shadow: none; +} + +.avatar-btn:hover { + background: var(--accent); + color: white; +} + +.avatar-btn.danger:hover { + background: var(--danger); +} + +.avatar-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.profile-username { + font-size: 1.25rem; + font-weight: 600; + color: var(--text-primary); +} + +.profile-form { + padding: 1.5rem; +} + +.profile-section { + margin-bottom: 1.5rem; +} + +.profile-section-title { + font-size: 0.8rem; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; + margin: 0 0 1rem 0; + padding-bottom: 0; +} + +.profile-form .form-group { + margin-bottom: 1rem; +} + +.profile-form .form-group label { + display: block; + font-size: 0.85rem; + font-weight: 500; + margin-bottom: 0.375rem; + color: var(--text-primary); +} + +.profile-form .form-group input { + width: 100%; + padding: 0.625rem 0.875rem; + border: 1px solid var(--border-primary); + border-radius: 8px; + background: var(--bg-input); + color: var(--text-primary); + font-size: 0.9rem; + transition: border-color 0.2s ease; +} + +.profile-form .form-group input:focus { + outline: none; + border-color: var(--accent); +} + +.profile-form .form-group input::placeholder { + color: var(--text-tertiary); +} + +.profile-actions { + display: flex; + gap: 0.75rem; + justify-content: flex-end; + padding-top: 0; + margin-top: 0.5rem; +} + +.profile-actions .btn { + padding: 0.5rem 1rem; + font-size: 0.875rem; + border-radius: 8px; + cursor: pointer; + transition: all 0.2s ease; +} + +.profile-actions .btn-ghost { + background: none; + border: 1px solid var(--border-primary); + color: var(--text-secondary); +} + +.profile-actions .btn-ghost:hover { + background: var(--bg-tertiary); + color: var(--text-primary); +} + +.profile-actions .btn-primary { + background: var(--accent); + border: none; + color: white; +} + +.profile-actions .btn-primary:hover:not(:disabled) { + background: var(--accent-hover); +} + +.profile-actions .btn-primary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Profile danger zone */ +.profile-danger-zone { + margin: 0 1.5rem 1.5rem; + padding-top: 1rem; +} + +.profile-danger-zone .profile-section-title { + margin-bottom: 0.75rem; +} + +.btn-danger { + background: #dc2626; + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 6px; + font-weight: 500; + cursor: pointer; + transition: background 0.15s ease; +} + +.btn-danger:hover:not(:disabled) { + background: #b91c1c; +} + +.btn-danger:disabled { + opacity: 0.5; + cursor: not-allowed; +} diff --git a/frontend/src/styles/foundation.css b/frontend/src/styles/foundation.css new file mode 100644 index 0000000..5e379d1 --- /dev/null +++ b/frontend/src/styles/foundation.css @@ -0,0 +1,753 @@ +/* biome-ignore-all lint/style/noDescendingSpecificity: legacy shared stylesheet relies on intentional cascade ordering across base and contextual selectors */ +/* ============================================================================= + Foundation Layer + Owns theme tokens, global element defaults, and app-wide primitives reused + across every MedAssist product surface. + ============================================================================= */ +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"); + +:root { + --bg-primary: #0b1220; + --bg-secondary: #111827; + --bg-tertiary: #0d1424; + --bg-input: #0a1018; + --bg-gradient: radial-gradient(circle at 20% 20%, #1a2440, #0b1220 40%), #0b1220; + --border-primary: #1f2a3d; + --border-secondary: #2a3a4d; + --text-primary: #e5e7eb; + --text-secondary: #a3adc2; + --text-muted: #cbd5f5; + --accent: #2f86f6; + --accent-light: #7ca7ff; + --accent-bg: rgba(47, 134, 246, 0.1); + --success: #6ee7b7; + --success-bg: rgba(57, 217, 138, 0.12); + --danger: #fca5a5; + --danger-bg: rgba(255, 94, 94, 0.12); + --warning: #fcd34d; + --warning-bg: rgba(252, 211, 77, 0.12); + --info: #93c5fd; + --shadow: rgba(0, 0, 0, 0.25); + /* Button Design System */ + --btn-radius: 10px; + --input-radius: 10px; + --btn-radius-round: 50%; + --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + --btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2); + --btn-primary-bg: var(--accent); + --btn-primary-hover: #3d94ff; + --btn-ghost-hover: rgba(255, 255, 255, 0.08); + --btn-danger-text: #2f0a0a; + --btn-success-text: #0a2b1f; + --btn-obsolete-bg: linear-gradient(135deg, #f7d14a 0%, #f2b91a 100%); + --btn-obsolete-hover: linear-gradient(135deg, #f9db72 0%, #f5c73c 100%); + --btn-obsolete-text: #2b2205; + --btn-obsolete-border: #f8e38a; + --btn-obsolete-shadow: 0 6px 14px rgba(252, 211, 77, 0.28); +} + +[data-theme="light"] { + --bg-primary: #f8fafc; + --bg-secondary: #ffffff; + --bg-tertiary: #f1f5f9; + --bg-input: #ffffff; + --bg-gradient: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%); + --border-primary: #e2e8f0; + --border-secondary: #cbd5e1; + --text-primary: #1e293b; + --text-secondary: #64748b; + --text-muted: #475569; + --accent: #2563eb; + --accent-light: #3b82f6; + --accent-bg: rgba(37, 99, 235, 0.1); + --success: #10b981; + --success-bg: rgba(16, 185, 129, 0.1); + --danger: #ef4444; + --danger-bg: rgba(239, 68, 68, 0.1); + --warning: #f59e0b; + --warning-bg: rgba(245, 158, 11, 0.1); + --info: #3b82f6; + --shadow: rgba(0, 0, 0, 0.08); + /* Button Design System */ + --btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + --btn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12); + --btn-primary-bg: var(--accent); + --btn-primary-hover: #1d4ed8; + --btn-ghost-hover: rgba(0, 0, 0, 0.06); + --btn-danger-text: #ffffff; + --btn-success-text: #ffffff; + --btn-obsolete-bg: linear-gradient(135deg, #f5b52c 0%, #f59e0b 100%); + --btn-obsolete-hover: linear-gradient(135deg, #f8c85b 0%, #f7ad2d 100%); + --btn-obsolete-text: #ffffff; + --btn-obsolete-border: #d48806; + --btn-obsolete-shadow: 0 6px 14px rgba(245, 158, 11, 0.22); +} + +* { + box-sizing: border-box; +} +html { + overflow-x: hidden; + background: var(--bg-primary); +} +body { + margin: 0; + font-family: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; + background: var(--bg-gradient); + color: var(--text-primary); + min-height: 100vh; + overflow-x: hidden; + transition: + background 200ms ease, + color 200ms ease; +} + +html.modal-open, +body.modal-open { + overflow: hidden !important; +} + +.page { + max-width: 1200px; + margin: 0 auto; + padding: 2.5rem 1.5rem 1.5rem; + overflow-x: hidden; +} + +.route-transition-mask { + position: fixed; + inset: 0; + background: var(--bg-primary); + opacity: 0; + pointer-events: none; + transition: opacity 140ms ease-out; + z-index: 1500; +} + +.route-transition-mask.active { + transition: none; + opacity: 1; + pointer-events: none; +} + +.hero { + background: linear-gradient(135deg, rgba(67, 106, 255, 0.08), rgba(115, 195, 255, 0.06)); + border: 1px solid var(--border-primary); + border-radius: 16px; + padding: 1.25rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + gap: 1.5rem; + box-shadow: 0 8px 32px var(--shadow); + margin-bottom: 1.5rem; + transition: + background 200ms ease, + border-color 200ms ease; +} + +[data-theme='"light"'] .hero { + background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(59, 130, 246, 0.04)); +} + +.header-actions { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.icon-btn { + width: 40px; + height: 40px; + border-radius: var(--btn-radius-round); + background: transparent; + border: none; + cursor: pointer; + font-size: 1.2rem; + display: flex; + align-items: center; + justify-content: center; + transition: + background 150ms ease, + opacity 150ms ease; + padding: 0; + opacity: 0.7; + box-shadow: none; +} +.icon-btn:hover { + background: var(--btn-ghost-hover); + opacity: 1; +} +.icon-btn.active { + opacity: 1; + background: rgba(47, 134, 246, 0.15); +} +[data-theme="light"] .icon-btn:hover { + background: var(--btn-ghost-hover); +} +[data-theme="light"] .icon-btn.active { + background: rgba(47, 134, 246, 0.12); +} + +/* ============================================================================= + Theme Dropdown Menu + ============================================================================= */ +.theme-menu { + position: relative; +} + +.theme-dropdown { + position: absolute; + top: calc(100% + 0.5rem); + right: 0; + min-width: 160px; + background: rgba(15, 23, 42, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 12px; + box-shadow: + 0 12px 32px rgba(0, 0, 0, 0.4), + inset 0 0 0 1px rgba(255, 255, 255, 0.05); + opacity: 0; + visibility: hidden; + transform: translateY(-6px) scale(0.95); + transition: all 0.2s ease; + z-index: 1000; + overflow: hidden; + padding: 0.375rem; +} + +[data-theme="light"] .theme-dropdown { + background: rgba(255, 255, 255, 0.85); + border: 1px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); +} + +.theme-menu.open .theme-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); +} + +.theme-dropdown-item { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; + padding: 0.625rem 0.75rem; + border: none; + background: none; + color: var(--text-primary); + font-size: 0.875rem; + cursor: pointer; + border-radius: 8px; + transition: background 0.15s ease; + text-align: left; + box-shadow: none; +} + +.theme-dropdown-item:hover { + background: rgba(59, 130, 246, 0.15); +} + +.theme-dropdown-item.active { + color: var(--accent-primary); +} + +.theme-dropdown-item svg { + width: 18px; + height: 18px; + flex-shrink: 0; + opacity: 0.7; +} + +.theme-dropdown-item.active svg { + opacity: 1; + color: var(--accent-primary); +} + +.theme-check { + margin-left: auto; + font-size: 0.8rem; + opacity: 0.8; +} + +.hero-title { + display: flex; + align-items: center; + gap: 1rem; +} +.hero-logo { + width: 48px; + height: 48px; +} +.hero h1 { + margin: 0.15rem 0 0; + font-size: 1.6rem; + font-weight: 600; +} +.sub { + color: var(--text-secondary); + margin: 0; +} +.eyebrow { + letter-spacing: 0.06em; + text-transform: uppercase; + color: #7ca7ff; + font-size: 0.75rem; + margin: 0; + font-weight: 500; +} + +/* Reminder status bar */ +.reminder-status-bar { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0.875rem 1rem; + background: var(--accent-bg); + border: 1px solid var(--border-primary); + border-radius: 10px; + margin-bottom: 1rem; + font-size: 0.85rem; +} + +.reminder-status-header { + display: flex; + align-items: center; + gap: 0.75rem; + flex-wrap: wrap; +} + +.reminder-status-icon { + color: var(--accent); + display: flex; + align-items: center; + flex-shrink: 0; +} + +.reminder-status-title { + color: var(--text-primary); + font-weight: 500; +} + +.reminder-status-badge { + padding: 0.25rem 0.6rem; + border-radius: 6px; + font-size: 0.75rem; + font-weight: 500; +} + +.reminder-status-badge.success { + background: var(--success-bg); + color: var(--success); +} + +.reminder-status-badge.warning { + background: var(--warning-bg); + color: var(--warning); +} + +.reminder-status-badge.danger { + background: var(--danger-bg); + color: var(--danger); +} + +.reminder-status-details { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding-left: 1.75rem; +} + +.reminder-status-row { + display: flex; + align-items: baseline; + gap: 0.5rem; + color: var(--text-secondary); + font-size: 0.8rem; +} + +.reminder-status-label { + color: var(--text-muted); + flex-shrink: 0; +} + +.reminder-status-value { + color: var(--text-primary); +} + +.reminder-status-meta { + color: var(--text-muted); + font-size: 0.75rem; + padding: 0.1rem 0.4rem; + background: var(--bg-tertiary); + border-radius: 4px; +} + +.reminder-med-name { + font-weight: 500; + color: var(--text-primary); +} + +.reminder-taken-by { + color: var(--text-muted); + font-size: 0.85rem; + margin-left: 0.25rem; + margin-right: 0.4rem; +} + +.reminder-date { + color: var(--text-secondary); +} + +.reminder-days-left { + color: var(--warning); + font-size: 0.8rem; +} + +.critical .reminder-days-left { + color: var(--danger); +} + +.reminder-send-row { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.35rem; + padding-left: 1.75rem; + padding-top: 0.25rem; +} + +.reminder-send-row .ghost { + font-size: 0.8rem; + padding: 0.25rem 0.75rem; +} + +.reminder-send-result { + font-size: 0.8rem; +} + +.reminder-send-result.success { + color: var(--success); +} + +.reminder-send-result.error { + color: var(--danger); +} + +.reminder-status-skeleton .reminder-status-title { + color: var(--text-secondary); +} + +.reminder-status-skeleton-lines { + gap: 0.45rem; +} + +.skeleton-line { + display: block; + height: 0.75rem; + border-radius: 999px; + position: relative; + overflow: hidden; + background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent); + max-width: 100%; +} + +.skeleton-line::after { + content: ""; + position: absolute; + inset: 0; + transform: translateX(-100%); + background: linear-gradient( + 90deg, + transparent 0%, + color-mix(in srgb, var(--text-muted) 30%, transparent) 45%, + transparent 100% + ); + animation: reminderSkeletonSweep 1.1s linear infinite; +} + +.skeleton-line-long { + width: min(540px, 96%); +} + +.skeleton-line-medium { + width: min(420px, 82%); +} + +.skeleton-line-short { + width: min(300px, 68%); +} + +.skeleton-pill { + width: 110px; + height: 2.25rem; + border-radius: 10px; +} + +.dashboard-card-skeleton { + display: flex; + flex-direction: column; + gap: 0.55rem; + padding: 0.35rem 0; +} + +.dashboard-actions-skeleton { + align-items: center; +} + +.page-loading-skeleton { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.skeleton-card { + display: flex; + flex-direction: column; + gap: 0.65rem; + padding: 0.25rem 0; +} + +.shared-schedule-loading-skeleton .skeleton-card { + max-width: 540px; + margin: 0.75rem auto 0; +} + +.screen-reader-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +@keyframes reminderSkeletonSweep { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +.med-link { + font-weight: 600; + text-decoration: underline; + text-decoration-style: dotted; + text-underline-offset: 2px; +} + +.med-link.clickable { + cursor: pointer; +} + +.med-link.clickable:hover { + color: var(--accent); + text-decoration-style: solid; +} + +@media (max-width: 600px) { + .reminder-status-bar { + padding: 0.75rem; + } + .reminder-status-header { + flex-wrap: wrap; + } + .reminder-status-badge { + margin-left: 0; + margin-top: 0.25rem; + } + .reminder-status-details { + padding-left: 0; + } + .reminder-status-row { + flex-direction: column; + gap: 0.15rem; + } + .reminder-low-stock-list { + padding-left: 0; + } + .reminder-send-row { + padding-left: 0; + } +} + +.tabs { + display: flex; + gap: 0.5rem; +} + +.stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.75rem; + align-items: center; +} +.stat { + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 14px; + padding: 0.9rem; +} +.stat .label { + margin: 0; + color: #b7c2e5; + font-size: 0.9rem; +} +.stat .value { + margin: 0.25rem 0 0; + font-size: 1.4rem; + font-weight: 700; +} + +.grid { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); + margin-bottom: 1rem; + max-width: 100%; + overflow: hidden; +} + +.card { + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: 14px; + padding: 1.25rem; + box-shadow: 0 14px 36px var(--shadow); + transition: + background 200ms ease, + border-color 200ms ease; +} + +.card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + margin-bottom: 1rem; +} +.card h2 { + margin: 0; + font-size: 1.2rem; +} +.card h2.clickable { + cursor: pointer; + transition: color 0.15s; +} +.card h2.clickable:hover { + color: var(--accent-light); +} + +.edit-header { + display: flex; + align-items: center; + gap: 0.75rem; +} +.edit-header h2 { + margin: 0; + font-size: 1.1rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.schedule-full { + max-width: 100%; +} + +.select-field.schedule-days-select, +.schedule-days-select { + background-color: var(--accent-bg); + border: 1px solid var(--accent); + color: var(--text-muted); + padding: 0.25rem 2rem 0.25rem 0.5rem; + border-radius: 6px; + font-size: 0.75rem; + cursor: pointer; + outline: none; + transition: all 150ms ease; + width: auto; + max-width: 100px; + flex-shrink: 0; + background-position: right 0.6rem center; +} +.select-field.schedule-days-select:hover, +.schedule-days-select:hover { + filter: brightness(1.15); +} +.select-field.schedule-days-select:focus, +.schedule-days-select:focus { + border-color: var(--accent-light); +} + +.pill { + border: 1px solid var(--accent); + color: var(--text-muted); + background: var(--accent-bg); + padding: 0.35rem 0.7rem; + border-radius: 999px; + font-size: 0.85rem; + transition: + background 150ms ease, + border-color 150ms ease; +} +.pill.clickable { + cursor: pointer; +} +.pill.clickable:hover { + filter: brightness(1.1); +} +.pill.success { + border-color: var(--success); + background: var(--success-bg); + color: var(--success); +} +.pill.neutral { + border-color: var(--border-secondary); + background: rgba(255, 255, 255, 0.04); + color: var(--text-muted); +} +[data-theme='"light"'] .pill.neutral { + background: rgba(0, 0, 0, 0.04); +} + +.tabs .pill { + cursor: pointer; + transition: + background 150ms ease, + border-color 150ms ease; + background: transparent; + border: 1px solid var(--border-secondary); + color: var(--text-muted); + box-shadow: none; +} +.tabs .pill:hover { + background: var(--btn-ghost-hover); + border-color: var(--accent); +} +.tabs .pill.primary { + background: var(--accent-bg); + border-color: var(--accent); + color: var(--text-primary); +} + +.badges { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + margin-top: 0.6rem; +} + +.meds .med-list { + display: flex; + flex-direction: column; + gap: 0.75rem; +} diff --git a/frontend/src/styles/medication-workflows.css b/frontend/src/styles/medication-workflows.css index 555fe12..9bce9da 100644 --- a/frontend/src/styles/medication-workflows.css +++ b/frontend/src/styles/medication-workflows.css @@ -1,5 +1,7 @@ /* ============================================================================= Refill Modal & History + Owns medication workflow overlays and history views that are intentionally + kept separate from broader app-surface styling. ============================================================================= */ .refill-modal { max-width: 500px; diff --git a/frontend/src/styles/modal-detail.css b/frontend/src/styles/modal-detail.css new file mode 100644 index 0000000..d87b0a0 --- /dev/null +++ b/frontend/src/styles/modal-detail.css @@ -0,0 +1,770 @@ +/* biome-ignore-all lint/style/noDescendingSpecificity: extracted brownfield layer preserves intentional selector ordering while the CSS split remains behavior-compatible */ +/* ============================================================================= + Modal And Detail Layer + Owns medication detail and other modal-heavy detail flows that compose on top + of the shared modal base styles. + ============================================================================= */ + +/* Medication Detail Modal */ +.modal-content.med-detail-modal { + padding: 0; + width: min(100vw - 1rem, 711px); + max-width: 711px; + max-height: 90vh; + background: var(--bg-primary); + overscroll-behavior: contain; + display: flex; + flex-direction: column; + overflow: visible; +} + +.med-detail-modal .med-detail-body { + flex: 1; + min-height: 0; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + overscroll-behavior: contain; +} + +.med-detail-header { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + padding: 2rem 2rem 2rem; + margin-bottom: 0.5rem; + background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); + color: white; + border-radius: 12px 12px 0 0; +} + +.med-detail-header h2 { + margin: 0; + font-size: 1.5rem; + text-align: center; +} + +.med-detail-titles { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; +} + +.med-generic-name { + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.75); + font-weight: 400; +} + +.med-taken-by { + font-size: 1rem; + color: white; + font-weight: 600; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + text-align: center; +} + +.taken-by-badge { + font-size: 0.75rem; + color: var(--accent); + font-weight: 500; + margin-left: 0.35rem; + opacity: 0.85; +} + +.taken-by-badge.clickable, +.taken-by-name.clickable { + cursor: pointer; + transition: opacity 0.15s; +} + +.taken-by-badge.clickable:hover, +.taken-by-name.clickable:hover { + opacity: 1; + text-decoration: underline; +} + +/* User Medications Modal */ +.modal-content.user-meds-modal { + max-width: 500px; + width: 95%; + padding: 0; + border-radius: 16px; + overflow: hidden; +} + +.user-meds-header { + display: flex; + align-items: center; + gap: 1rem; + padding: 1.5rem 2rem; + background: linear-gradient(135deg, var(--accent) 0%, #1e5bb8 100%); + border-radius: 16px 16px 0 0; +} + +.user-meds-header .user-avatar { + width: 50px; + min-width: 50px; + height: 50px; + min-height: 50px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 700; + color: white; + flex-shrink: 0; +} + +.user-meds-header h2 { + margin: 0; + color: white; + font-size: 1.3rem; +} + +.user-meds-list { + padding: 1rem; + max-height: 400px; + overflow-y: auto; +} + +.user-med-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + border-radius: 8px; + transition: background 0.15s; + flex-wrap: wrap; +} + +.user-med-item.clickable { + cursor: pointer; +} + +.user-med-item.clickable:hover { + background: var(--accent-bg); +} + +.user-med-info { + flex: 1; + min-width: 150px; +} + +.user-med-name { + display: block; + font-weight: 600; + color: var(--text-primary); + white-space: nowrap; +} + +.user-med-generic { + display: block; + font-size: 0.8rem; + color: var(--text-secondary); +} + +.user-med-stats { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.25rem; + flex-shrink: 0; +} + +.user-med-pills { + font-size: 0.85rem; + color: var(--text-secondary); +} + +.user-med-intakes { + display: flex; + flex-direction: column; + gap: 0.15rem; + margin-top: 0.15rem; +} + +.user-med-intake-item { + font-size: 0.78rem; + color: var(--text-secondary); + line-height: 1.3; +} + +.user-meds-empty { + padding: 2rem; + text-align: center; + color: var(--text-secondary); +} + +.user-meds-footer { + padding: 1rem 1.5rem; + border-top: 1px solid var(--border-primary); + display: flex; + justify-content: flex-start; +} + +.med-detail-header .med-avatar-lg { + width: 100px; + height: 100px; + font-size: 2.5rem; + border: 3px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); +} + +.med-detail-body { + padding: 1.5rem 2rem 2rem; + background: var(--bg-primary); +} + +.med-detail-section { + margin-bottom: 1.5rem; + padding-bottom: 1.5rem; + border-bottom: 1px solid var(--border-color); +} + +.med-detail-section:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} + +/* Notes content in modal - auto-sizing box */ +.med-notes-content { + background: var(--bg-secondary); + padding: 0.75rem 1rem; + border-radius: 8px; + white-space: pre-wrap; + word-wrap: break-word; + line-height: 1.6; + max-height: 300px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ + font-size: 1rem; +} + +/* Mobile: larger notes box with better touch scrolling */ +@media (max-width: 600px) { + .med-notes-content { + min-height: 80px; + max-height: 200px; + font-size: 1rem; + padding: 1rem; + touch-action: pan-y; /* Enable vertical touch scrolling */ + } +} + +.med-detail-section h3 { + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); + margin: 0 0 0.75rem; +} + +.med-detail-section h3.section-header-with-badge { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.med-detail-section h3 .status-chip.small { + font-size: 0.7rem; + padding: 0.2rem 0.5rem; + text-transform: none; + letter-spacing: normal; +} + +.med-detail-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; +} + +.prescription-detail-grid .med-detail-item { + display: flex; + flex-direction: column; + align-items: start; +} + +.med-detail-item { + background: var(--bg-secondary); + padding: 0.75rem; + border-radius: 8px; +} + +.med-detail-item.full-width { + grid-column: 1 / -1; +} + +.med-detail-label { + display: block; + font-size: 0.75rem; + color: var(--text-secondary); + margin-bottom: 0; +} + +.med-detail-value { + font-size: 1.1rem; + font-weight: 600; + color: var(--text-primary); +} + +.med-detail-value.success-text { + color: var(--success); +} +.med-detail-value.warning-text { + color: var(--warning); +} +.med-detail-value.danger-text { + color: var(--danger); +} + +.med-detail-schedules { + display: grid; + grid-template-columns: auto auto 1fr auto auto auto; + gap: 0.45rem 0; +} + +.med-schedule-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + align-items: center; + column-gap: 0.75rem; +} + +.med-schedule-usage { + font-weight: 600; + color: var(--accent); + white-space: nowrap; + grid-column: 1; +} + +.med-schedule-freq { + color: var(--text-secondary); + white-space: nowrap; + grid-column: 2; +} + +.med-schedule-person { + color: var(--text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + grid-column: 4; +} + +.med-schedule-time { + font-weight: 700; + white-space: nowrap; + color: var(--text-primary); + text-align: right; + grid-column: 5; +} + +.med-schedule-bell { + color: var(--warning); + display: inline-flex; + align-items: center; + grid-column: 6; +} + +[data-theme="light"] .med-schedule-bell { + color: #b45309; +} + +@media (max-width: 700px) { + .med-detail-schedules { + grid-template-columns: 1fr; + } + + .med-schedule-row { + grid-template-columns: 1fr; + row-gap: 0.25rem; + } + + .med-schedule-usage, + .med-schedule-freq, + .med-schedule-person, + .med-schedule-time, + .med-schedule-bell { + grid-column: auto; + } +} + +.med-detail-footer { + padding: 1rem 2rem 1.5rem; + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + border-top: 1px solid var(--border-primary); + background: var(--bg-primary); + border-radius: 0 0 12px 12px; + flex-shrink: 0; + overflow: visible; + position: relative; + z-index: 1; + padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); + margin: 0; +} + +/* Mobile devices can report wide CSS viewports (e.g., 768px in device emulation). + Use input modality instead of width-only breakpoints so the modal still fills the handset viewport. */ +@media (hover: none) and (pointer: coarse) and (max-width: 500px) { + .med-detail-overlay { + padding: 0.4rem; + align-items: stretch; + } + + .modal-content.med-detail-modal { + width: calc(100vw - 0.8rem); + max-width: none; + max-height: calc(100dvh - 0.8rem); + margin: auto; + border-radius: 12px; + } +} + +.med-detail-footer::before { + content: none; +} + +.med-detail-footer::after { + content: none; +} + +.med-detail-footer .footer-actions { + display: flex; + gap: 0.5rem; + margin-left: auto; + overflow: visible; + position: relative; +} + +.med-detail-footer .tooltip-trigger { + position: relative; + z-index: 1; +} + +.med-detail-footer button.icon-only { + padding: 0.5rem; + min-width: 2.75rem; + min-height: 2.75rem; +} + +.med-detail-footer button.icon-stock-correction { + background: color-mix(in srgb, var(--warning) 26%, var(--bg-tertiary)); + border: 1px solid color-mix(in srgb, var(--warning) 62%, var(--border-secondary)); + color: #fef3c7; + box-shadow: none; +} + +.med-detail-footer button.icon-stock-correction:hover { + background: color-mix(in srgb, var(--warning) 36%, var(--bg-tertiary)); + border-color: color-mix(in srgb, var(--warning) 76%, var(--border-secondary)); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 32%, transparent); +} + +[data-theme="light"] .med-detail-footer button.icon-stock-correction { + background: color-mix(in srgb, var(--warning) 22%, white); + border-color: color-mix(in srgb, var(--warning) 70%, var(--border-secondary)); + color: #92400e; +} + +[data-theme="light"] .med-detail-footer button.icon-stock-correction:hover { + background: color-mix(in srgb, var(--warning) 32%, white); + border-color: color-mix(in srgb, var(--warning) 82%, var(--border-secondary)); +} + +/* Clickable avatar wrapper */ +.med-detail-avatar-wrapper { + position: relative; + display: inline-block; +} + +.med-detail-avatar-wrapper.clickable { + cursor: pointer; +} + +.med-detail-avatar-wrapper.clickable:hover .med-avatar-lg { + transform: scale(1.05); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); +} + +.med-detail-avatar-wrapper .expand-icon { + position: absolute; + bottom: -4px; + right: -4px; + background: rgba(0, 0, 0, 0.6); + color: white; + font-size: 0.9rem; + width: 1.5rem; + height: 1.5rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.2s; +} + +.med-detail-avatar-wrapper.clickable:hover .expand-icon { + opacity: 1; +} + +/* Image Lightbox */ +.lightbox-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.9); + display: flex; + align-items: center; + justify-content: center; + z-index: 2000; + padding: 2rem; + animation: fadeIn 0.2s ease; +} + +.lightbox-container { + position: relative; + display: inline-flex; +} + +.lightbox-close { + position: absolute; + top: -0.5rem; + right: -0.5rem; + background: rgba(255, 255, 255, 0.15); + border: none; + color: white; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--btn-radius-round); + transition: background 150ms ease; + box-shadow: none; + padding: 0; + z-index: 1; +} + +.lightbox-close:hover { + background: rgba(255, 255, 255, 0.35); +} + +.lightbox-image { + max-width: 50vw; + max-height: 50vh; + object-fit: contain; + border-radius: 12px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + animation: zoomIn 0.3s ease; +} + +/* Mobile: larger lightbox image */ +@media (max-width: 768px) { + .lightbox-image { + max-width: 90vw; + max-height: 70vh; + } +} + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale(0.8); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* Clickable rows */ +.table-row.clickable { + cursor: pointer; + transition: background 0.15s; +} + +.table-row.clickable:hover { + background: var(--bg-secondary); +} + +/* Mobile adjustments for modal */ +@media (max-width: 500px) { + .med-detail-overlay { + padding: 0.4rem; + align-items: stretch; + } + + .modal-content { + max-height: 85vh; + border-radius: 12px 12px 0 0; + margin-top: auto; + } + + .modal-content.med-detail-modal { + width: calc(100vw - 0.8rem); + max-width: none; + max-height: calc(100dvh - 0.8rem); + border-radius: 12px; + margin: auto; + } + + .med-detail-header { + padding: 1.5rem 1.5rem 1rem; + } + + .med-detail-header .med-avatar-lg { + width: 80px; + height: 80px; + font-size: 2rem; + } + + .med-detail-body { + padding: 1rem 1.5rem 0; + } + + .med-detail-footer { + padding: 1rem 1.5rem; + padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); + flex-direction: column; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 0.75rem; + margin: 0; + } + + .med-detail-footer > button { + flex: 0 0 auto; + width: min(100%, 560px); + } + + .med-detail-footer .footer-actions { + flex: 0 0 auto; + width: 100%; + justify-content: center; + margin-left: 0; + } + + .med-detail-footer button { + padding: 0.6rem 0.8rem; + font-size: 0.9rem; + } + + .med-detail-grid { + gap: 0.5rem; + } +} + +/* Hard mobile override for MedDetailModal: remove side frame and use full handset viewport. */ +@media (max-width: 500px) { + .modal-overlay.med-detail-overlay { + padding: 0 !important; + align-items: stretch; + } + + .modal-overlay.med-detail-overlay > .modal-content.med-detail-modal { + width: 100vw !important; + max-width: 100vw !important; + max-height: 100dvh !important; + height: 100dvh; + margin: 0 !important; + border-radius: 0 !important; + border-left: none; + border-right: none; + } + + .modal-overlay.med-detail-overlay .med-detail-header { + padding-left: 1rem; + padding-right: 1rem; + } + + .modal-overlay.med-detail-overlay .med-detail-body { + padding-left: 1rem; + padding-right: 1rem; + } + + .modal-overlay.med-detail-overlay .med-detail-footer { + margin: 0; + padding-left: 1rem; + padding-right: 1rem; + position: relative; + z-index: 1; + } +} + +/* Reminder icon indicator */ +.reminder-icon.info-tooltip, +.notes-icon.info-tooltip, +.prescription-icon.info-tooltip { + width: auto; + height: auto; + margin: 0 !important; + padding: 0 !important; + font-size: 1em; + opacity: 0.9; + color: var(--info); + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + vertical-align: baseline; +} + +.prescription-icon.info-tooltip { + color: var(--success); +} + +.reminder-icon.info-tooltip, +.blister-reminder-icon { + color: var(--warning); +} + +[data-theme="light"] .reminder-icon.info-tooltip, +[data-theme="light"] .blister-reminder-icon { + color: #b45309; /* dark amber — ~4.5:1 on light backgrounds */ +} + +[data-theme="light"] .notes-icon.info-tooltip { + color: #1d4ed8; /* darker blue — strong contrast on light backgrounds */ +} + +[data-theme="light"] .prescription-icon.info-tooltip { + color: #047857; /* dark emerald — strong contrast on light backgrounds */ +} + +.reminder-icon.info-tooltip:hover, +.notes-icon.info-tooltip:hover, +.prescription-icon.info-tooltip:hover { + opacity: 1; +} + +h3 .reminder-icon.info-tooltip { + font-size: 0.75em; + vertical-align: middle; +} + +h3 .notes-icon.info-tooltip { + font-size: 0.8em; + vertical-align: middle; +} + +h3 .notes-icon.notes-icon-static { + font-size: 0.8em; + vertical-align: middle; + color: var(--info); + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; +} + +[data-theme="light"] h3 .notes-icon.notes-icon-static { + color: #1d4ed8; +} diff --git a/frontend/src/styles/modals-base.css b/frontend/src/styles/modals-base.css index d9d260e..a25aab8 100644 --- a/frontend/src/styles/modals-base.css +++ b/frontend/src/styles/modals-base.css @@ -1,5 +1,7 @@ /* ============================================================================= - Modal Base Styles + Modal Base Styles + Owns reusable overlay, container, animation, and shared modal primitives used + by the focused modal/domain layers. ============================================================================= */ .modal-overlay { diff --git a/frontend/src/styles/schedule-mobile-edit.css b/frontend/src/styles/schedule-mobile-edit.css index 915f03a..6d0693b 100644 --- a/frontend/src/styles/schedule-mobile-edit.css +++ b/frontend/src/styles/schedule-mobile-edit.css @@ -1,5 +1,7 @@ /* ============================================================================= Shared Schedule Page (Public) + Owns the shared schedule experience and the mobile-first public edit flow + outside the authenticated app-shell surface styles. ============================================================================= */ .shared-schedule-page { min-height: 100vh; diff --git a/frontend/src/styles/settings-surfaces.css b/frontend/src/styles/settings-surfaces.css new file mode 100644 index 0000000..9c38e2e --- /dev/null +++ b/frontend/src/styles/settings-surfaces.css @@ -0,0 +1,1279 @@ +/* biome-ignore-all lint/style/noDescendingSpecificity: extracted brownfield layer preserves intentional selector ordering while the CSS split remains behavior-compatible */ +/* ============================================================================= + Settings Surfaces Layer + Owns settings-only layout, controls, sections, and state presentation. + ============================================================================= */ + +/* Settings styles */ +.settings-form { + display: flex; + flex-direction: column; + gap: 1.5rem; + max-width: 100%; + overflow: hidden; +} + +.setting-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: 12px; + gap: 1rem; +} + +@media (max-width: 480px) { + .setting-row { + padding: 0.75rem; + gap: 0.75rem; + } +} + +.setting-row.inline { + padding: 0; + background: transparent; + border: none; + justify-content: flex-start; + gap: 0.75rem; +} + +.setting-row.language-row { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + gap: 1rem; +} + +.setting-row.language-row .setting-label { + flex: 0 0 auto; + min-width: 100px; +} + +.select-field.language-select, +.language-select { + flex: 1 1 auto; + min-width: 140px; + max-width: 200px; + padding: 0.6rem 2rem 0.6rem 0.75rem; + font-size: 1rem; + background-color: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: 8px; + color: var(--text-primary); + cursor: pointer; + background-position: right 0.9rem center; +} + +.select-field.language-select:hover, +.language-select:hover { + border-color: var(--accent); +} + +.select-field.language-select:focus, +.language-select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); +} + +.language-select option { + padding: 0.5rem; +} + +.setting-info { + flex: 1; +} + +.setting-label { + font-weight: 600; + color: var(--text-primary); + font-size: 1rem; +} + +.setting-desc { + margin: 0.25rem 0 0; + color: var(--text-secondary); + font-size: 0.9rem; +} + +.setting-group { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +.setting-group label { + display: flex; + flex-direction: column; + gap: 0.5rem; + color: var(--text-secondary); + font-size: 0.85rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +/* Stock calculation mode radio cards */ +.calculation-mode-group { + grid-template-columns: 1fr 1fr; +} + +.calculation-mode-group label { + text-transform: none; + letter-spacing: normal; +} + +.radio-card { + cursor: pointer; + padding: 1rem; + background: var(--bg-secondary); + border: 2px solid var(--border-primary); + border-radius: 10px; + transition: all 0.2s ease; +} + +.radio-card:hover { + border-color: var(--accent-light); + background: var(--bg-tertiary); +} + +.radio-card.selected { + border-color: var(--accent); + background: var(--bg-tertiary); + box-shadow: 0 0 0 1px var(--accent); +} + +.radio-card input[type="radio"] { + display: none; +} + +.radio-card-content { + display: flex; + align-items: flex-start; + gap: 0.75rem; +} + +.radio-card-icon { + font-size: 1.5rem; + line-height: 1; +} + +.radio-card-text { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.radio-card-title { + font-size: 0.95rem; + font-weight: 600; + color: var(--text-primary); +} + +.radio-card-desc { + font-size: 0.8rem; + color: var(--text-secondary); + line-height: 1.4; +} + +.setting-section { + padding: 1.25rem; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: 12px; +} + +.setting-section h3 { + margin: 0 0 0.5rem; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--accent-light); +} + +.setting-section .setting-desc { + margin: 0 0 1rem; + font-size: 0.8rem; + color: var(--text-secondary); +} + +.setting-section .setting-hint { + margin: 0 0 1rem; + font-size: 0.8rem; + color: var(--text-secondary); + background: var(--accent-bg); + padding: 0.5rem 0.75rem; + border-radius: 6px; + border-left: 3px solid var(--accent); +} + +.setting-section .setting-hint code { + background: var(--bg-input); + padding: 0.1rem 0.4rem; + border-radius: 4px; + font-size: 0.85em; +} + +.input-hint { + font-size: 0.75rem; + color: var(--text-secondary); + margin-top: 0.25rem; +} + +.setting-info-box { + background: var(--accent-bg); + border: 1px solid var(--border-secondary); + border-left: 3px solid var(--accent); + border-radius: 8px; + padding: 0.75rem 1rem; + margin-bottom: 1rem; +} + +.setting-info-box p { + margin: 0; + font-size: 0.85rem; + color: var(--text-secondary); + line-height: 1.5; +} + +.setting-info-box strong { + color: var(--text-primary); +} + +.setting-info-box.success { + background: var(--success-bg); + border-left-color: var(--success); +} + +.setting-info-box.success p { + color: var(--success); +} + +/* Info Tooltips */ +.info-tooltip { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + font-size: 0.85rem; + color: var(--text-secondary); + cursor: help; + transition: color 0.15s; + position: relative; +} + +.info-tooltip:hover { + color: var(--accent); +} + +.info-tooltip.small { + width: 1rem; + height: 1rem; + font-size: 0.75rem; +} + +.info-tooltip[title] { + position: relative; +} + +.tooltip-trigger { + position: relative; +} + +.info-tooltip::after, +.tooltip-trigger[data-tooltip]::after { + content: attr(data-tooltip); + position: absolute; + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background: var(--bg-tertiary); + color: var(--text-primary); + padding: 0.5rem 0.75rem; + border-radius: 8px; + font-size: 0.8rem; + font-weight: 400; + line-height: 1.4; + white-space: pre-line; + text-transform: none; + letter-spacing: normal; + width: max-content; + max-width: 300px; + text-align: left; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + border: 1px solid var(--border-primary); + opacity: 0; + visibility: hidden; + transition: + opacity 0.15s, + visibility 0.15s; + z-index: 1100; + pointer-events: none; +} + +.info-tooltip::before, +.tooltip-trigger[data-tooltip]::before { + content: ""; + position: absolute; + bottom: calc(100% + 4px); + left: 50%; + transform: translateX(-50%); + border: 5px solid transparent; + border-top-color: var(--border-primary); + opacity: 0; + visibility: hidden; + transition: + opacity 0.15s, + visibility 0.15s; + z-index: 1101; +} + +/* Tooltip aligned to left edge of icon (prevents clipping inside modals) */ +.info-tooltip.tooltip-align-left::after { + left: 0; + transform: none; +} +.info-tooltip.tooltip-align-left::before { + left: 50%; + transform: translateX(-50%); +} + +/* Tooltip aligned to right edge of icon (for right-most action buttons) */ +.tooltip-trigger.tooltip-align-right[data-tooltip]::after { + left: auto; + right: 0; + transform: none; +} + +.tooltip-trigger.tooltip-align-right[data-tooltip]::before { + left: auto; + right: 12px; + transform: none; +} + +.tooltip-trigger[data-tooltip]::after { + text-align: center; +} + +.info-tooltip:hover::after, +.info-tooltip:hover::before, +.info-tooltip:focus::after, +.info-tooltip:focus::before, +.tooltip-trigger[data-tooltip]:hover::after, +.tooltip-trigger[data-tooltip]:hover::before, +.tooltip-trigger[data-tooltip]:focus::after, +.tooltip-trigger[data-tooltip]:focus::before, +.tooltip-trigger[data-tooltip]:focus-visible::after, +.tooltip-trigger[data-tooltip]:focus-visible::before, +.info-tooltip.tooltip-active::after, +.info-tooltip.tooltip-active::before, +.tooltip-trigger.tooltip-active::after, +.tooltip-trigger.tooltip-active::before { + opacity: 1; + visibility: visible; +} + +/* Mobile tooltip - disable hover, use click only */ +@media (max-width: 640px) { + .info-tooltip:hover::after, + .info-tooltip:hover::before { + opacity: 0; + visibility: hidden; + } + + .info-tooltip.tooltip-active::after { + opacity: 1; + visibility: visible; + position: fixed; + top: auto; + bottom: var(--tooltip-bottom, 50%); + left: 16px !important; + right: 16px !important; + transform: none !important; + width: auto !important; + max-width: none !important; + z-index: 9999; + } + + .info-tooltip.tooltip-active::before { + display: none; + } + + /* Share button tooltip: compact bubble on mobile with safe layering */ + .dashboard-schedules-section .share-btn.tooltip-trigger[data-tooltip]::after { + left: auto; + right: 0; + transform: none; + max-width: 220px; + z-index: 10000; + } + + .dashboard-schedules-section .share-btn.tooltip-trigger[data-tooltip]::before { + left: auto; + right: 12px; + transform: none; + z-index: 10001; + } + + .info-tooltip::before { + display: none; + } +} + +/* Channels Overview */ +.channels-overview { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1.5rem; + padding: 1rem 1.25rem; + background: var(--bg-tertiary); + border: 1px solid var(--border-primary); + border-radius: 12px; +} + +.channels-status { + display: flex; + gap: 0.75rem; +} + +/* Notification Matrix */ +.notification-matrix { + background: var(--bg-input); + border-radius: 10px; + overflow: hidden; + border: 1px solid var(--border-primary); +} + +.matrix-header { + display: grid; + grid-template-columns: 1fr 80px 80px; + gap: 0.5rem; + padding: 0.75rem 1rem; + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-primary); +} + +.matrix-header .matrix-label { + font-size: 0.8rem; + color: var(--text-secondary); +} + +.matrix-channel { + text-align: center; + font-size: 0.8rem; + font-weight: 600; + color: var(--text-primary); +} + +.matrix-row { + display: grid; + grid-template-columns: 1fr 80px 80px; + gap: 0.5rem; + padding: 0.75rem 1rem; + align-items: center; +} + +.matrix-row:not(:last-child) { + border-bottom: 1px solid var(--border-primary); +} + +.matrix-row .matrix-label { + font-size: 0.9rem; + color: var(--text-primary); +} + +.matrix-cell { + display: flex; + justify-content: center; + align-items: center; +} + +.matrix-cell .toggle-switch.small input:disabled + .toggle-slider { + opacity: 0.4; + cursor: not-allowed; +} + +.hint-text { + font-size: 0.85rem; + color: var(--text-secondary); + margin-top: 0.75rem; + padding: 0.5rem 0.75rem; + background: var(--warning-bg); + border-radius: 6px; +} + +/* Notification Matrix Mobile */ +@media (max-width: 480px) { + .notification-matrix { + margin: 0 -0.5rem; + border-radius: 8px; + } + + .matrix-header, + .matrix-row { + grid-template-columns: 1fr 60px 60px; + padding: 0.6rem 0.75rem; + gap: 0.25rem; + } + + .matrix-channel, + .matrix-header .matrix-label { + font-size: 0.7rem; + } + + .matrix-row .matrix-label { + font-size: 0.8rem; + } +} + +/* Settings Grid - Two column layout */ +.settings-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + align-items: start; +} + +@media (max-width: 900px) { + .settings-grid { + grid-template-columns: 1fr; + } +} + +/* Notification Channels Grid */ +.notification-channels-grid { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.notification-channel { + background: var(--bg-input); + border: 2px solid var(--border-primary); + border-radius: 12px; + overflow: hidden; + transition: border-color 0.2s; +} + +.notification-channel.enabled { + border-color: var(--accent); +} + +.channel-header { + padding: 0; +} + +.channel-toggle { + display: flex; + align-items: center; + gap: 0.75rem; + width: 100%; + padding: 1rem 1.25rem; + background: transparent; + border: none; + cursor: pointer; + transition: background 150ms ease; + border-radius: var(--btn-radius); + box-shadow: none; +} + +.channel-toggle:hover { + background: var(--accent-bg); +} + +.channel-toggle.active { + background: var(--accent-bg); +} + +.channel-icon { + font-size: 1.5rem; +} + +.channel-name { + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + flex: 1; + text-align: left; +} + +.channel-badge { + font-size: 0.7rem; + font-weight: 700; + padding: 0.25rem 0.6rem; + border-radius: 4px; + text-transform: uppercase; +} + +.channel-badge.on { + background: var(--success-bg); + color: var(--success); +} + +.channel-badge.off { + background: var(--bg-primary); + color: var(--text-secondary); +} + +.channel-content { + padding: 0 1.25rem 1.25rem; + border-top: 1px solid var(--border-primary); + background: var(--bg-secondary); +} + +@media (max-width: 480px) { + .channel-content { + padding: 0 0.75rem 1rem; + } + + .channel-toggle { + padding: 0.75rem 1rem; + } +} + +.channel-config { + padding-top: 1rem; +} + +.channel-config label { + display: block; +} + +.channel-config .smtp-info { + margin-top: 0.5rem; +} + +.channel-reminder-types { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem 1rem; + padding: 1rem 0; + border-top: 1px solid var(--border-primary); + margin-top: 1rem; +} + +.reminder-types-label { + font-size: 0.85rem; + color: var(--text-secondary); + font-weight: 500; + width: 100%; + margin-bottom: 0.25rem; +} + +.reminder-type-option { + display: flex !important; + flex-direction: row !important; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + background: var(--bg-input); + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + font-size: 0.9rem; +} + +.reminder-type-option:hover { + background: var(--accent-bg); +} + +.reminder-type-option input[type="checkbox"] { + width: 18px; + height: 18px; + margin: 0; + accent-color: var(--accent); +} + +.reminder-type-option span { + color: var(--text-primary); +} + +.channel-actions { + display: flex; + align-items: center; + gap: 1rem; + padding-top: 0.75rem; + border-top: 1px solid var(--border-primary); + margin-top: 1rem; +} + +/* Schedule Overview */ +.schedule-overview { + background: var(--bg-input); + border-radius: 8px; + padding: 1rem; + margin-bottom: 1.5rem; +} + +.schedule-header { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.75rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid var(--border-primary); +} + +.schedule-title { + font-size: 0.8rem; + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.schedule-row { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 0.5rem; + padding: 0.35rem 0; + font-size: 0.85rem; +} + +.schedule-row:not(:last-child) { + border-bottom: 1px solid var(--border-primary); + padding-bottom: 0.5rem; + margin-bottom: 0.35rem; +} + +.schedule-label { + color: var(--text-secondary); + flex-shrink: 0; + min-width: 0; +} + +.schedule-value { + color: var(--text-primary); + font-weight: 500; + text-align: right; + word-break: break-word; +} + +/* Mobile: stack schedule rows vertically when text is long */ +@media (max-width: 400px) { + .schedule-row { + flex-direction: column; + align-items: flex-start; + gap: 0.25rem; + } + .schedule-value { + text-align: left; + } +} + +/* Legacy support for old channel-btn (can remove later) */ +.channel-btn { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + padding: 0.75rem 1.25rem; + background: var(--bg-input); + border: 2px solid var(--border-primary); + border-radius: 12px; + cursor: pointer; + transition: all 0.2s ease; + min-width: 80px; +} + +.channel-btn:hover { + border-color: var(--accent); + background: var(--accent-bg); +} + +.channel-btn.active { + border-color: var(--accent); + background: var(--accent-bg); +} + +.channel-status { + font-size: 0.65rem; + font-weight: 700; + padding: 0.15rem 0.5rem; + border-radius: 4px; +} + +.channel-status.on { + background: var(--success-bg); + color: var(--success); +} + +.channel-status.off { + background: var(--bg-primary); + color: var(--text-secondary); +} + +.schedule-info { + display: flex; + flex-direction: column; + gap: 0.35rem; + font-size: 0.8rem; +} + +/* Section Header with Tooltip */ +.section-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.section-header h3 { + margin: 0; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 0.04em; + color: var(--accent-light); +} + +/* Threshold Input */ +.threshold-input { + margin-bottom: 1rem; +} + +.threshold-label { + display: block; + font-size: 0.9rem; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.threshold-field { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.threshold-field input { + width: 80px; + text-align: center; +} + +.threshold-unit { + color: var(--text-secondary); + font-size: 0.9rem; +} + +/* Threshold Chips Group - 3-column grid for Critical/Low/High */ +.threshold-chips-group { + grid-template-columns: 1fr 1fr 1fr; +} + +.threshold-chips-group label { + text-transform: none; + letter-spacing: normal; +} + +.threshold-chip-label { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; +} + +.threshold-chip-label .status-chip { + pointer-events: none; +} + +.threshold-invalid input { + border-color: var(--danger) !important; + box-shadow: 0 0 0 1px var(--danger); +} + +.threshold-validation-error { + margin: 0.75rem 0 0; + padding: 0.5rem 0.75rem; + background: rgba(255, 94, 94, 0.1); + border: 1px solid rgba(255, 94, 94, 0.3); + border-radius: 6px; + color: #fca5a5; + font-size: 0.8rem; + font-weight: 500; +} + +/* Stock Reminder Trigger in Notifications */ +.stock-reminder-trigger { + margin-bottom: 0.5rem; +} + +.stock-reminder-trigger .setting-desc { + display: flex; + align-items: center; + gap: 0.5rem; + flex-wrap: wrap; + margin: 0; + font-size: 0.9rem; + color: var(--text-secondary); +} + +.stock-reminder-trigger .status-chip { + pointer-events: none; +} + +/* Compact Setting Row - for inline toggles without card styling */ +.setting-row.compact { + padding: 0.75rem 0; + margin-top: 0.5rem; + background: transparent; + border: none; + border-radius: 0; +} + +.setting-row.compact .setting-label { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; +} + +/* Field Label with inline tooltip */ +.field-label { + display: flex; + align-items: center; + gap: 0.35rem; + font-size: 0.85rem; + font-weight: 600; + color: var(--text-secondary); + margin-bottom: 0.5rem; +} + +.field-examples { + display: block; + font-size: 0.75rem; + color: var(--text-secondary); + margin-top: 0.35rem; + font-family: "SF Mono", "Fira Code", monospace; +} + +/* Input with tooltip beside */ +.input-with-tooltip { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.input-with-tooltip input { + flex: 1; + min-width: 0; +} + +.input-with-tooltip .info-tooltip { + flex-shrink: 0; + cursor: pointer; + padding: 0.25rem; +} + +/* SMTP Info */ +.smtp-info { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + background: var(--bg-input); + border-radius: 8px; + margin-top: 0.75rem; +} + +.smtp-summary { + font-size: 0.8rem; + color: var(--text-secondary); + font-family: "SF Mono", "Fira Code", monospace; +} + +@media (max-width: 500px) { + .channels-overview { + flex-direction: column; + gap: 1rem; + } + + .channels-status { + width: 100%; + justify-content: center; + } + + .schedule-info { + width: 100%; + align-items: center; + } +} + +.setting-actions { + display: flex; + align-items: center; + gap: 1rem; + padding-top: 0.5rem; +} + +.api-key-actions { + padding-top: 0.35rem; + align-items: stretch; +} + +.api-key-token-input { + flex: 1; + font-family: "SF Mono", "Fira Code", monospace; + font-size: 0.84rem; +} + +@media (max-width: 700px) { + .api-key-actions { + flex-direction: column; + align-items: stretch; + } +} + +.form-footer { + display: flex; + justify-content: flex-end; + padding-top: 1rem; + border-top: 1px solid var(--border-primary); +} + +/* Toggle switch */ +.toggle-switch { + position: relative; + width: 52px; + height: 28px; + flex-shrink: 0; +} + +.toggle-switch.small { + width: 44px; + height: 24px; +} + +.toggle-switch input { + opacity: 0; + width: 0; + height: 0; +} + +.toggle-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--border-secondary); + border-radius: 28px; + transition: background 200ms ease; +} + +.toggle-slider::before { + content: ""; + position: absolute; + height: 22px; + width: 22px; + left: 3px; + bottom: 3px; + background: white; + border-radius: 50%; + transition: transform 200ms ease; +} + +.toggle-switch.small .toggle-slider::before { + height: 18px; + width: 18px; +} + +.toggle-switch input:checked + .toggle-slider { + background: var(--accent); +} + +.toggle-switch input:checked + .toggle-slider::before { + transform: translateX(24px); +} + +.toggle-switch.small input:checked + .toggle-slider::before { + transform: translateX(20px); +} + +.toggle-switch.disabled .toggle-slider { + opacity: 0.4; + cursor: not-allowed; +} + +.toggle-switch.disabled input { + cursor: not-allowed; +} + +@media (max-width: 600px) { + .setting-group { + grid-template-columns: 1fr; + } + .threshold-chips-group { + grid-template-columns: 1fr 1fr 1fr; + } +} + +/* Medication Avatar */ +.med-avatar { + border-radius: 8px; + object-fit: cover; + flex-shrink: 0; +} +.med-avatar-sm { + width: 28px; + height: 28px; +} +.med-avatar-md { + width: 40px; + height: 40px; +} +.med-avatar-lg { + width: 56px; + height: 56px; +} + +.med-avatar-initials { + background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 0.7em; +} +.med-avatar-sm.med-avatar-initials { + font-size: 0.65em; +} +.med-avatar-lg.med-avatar-initials { + font-size: 1.1em; +} + +.med-avatar.clickable { + cursor: pointer; + transition: + transform 0.15s, + box-shadow 0.15s; +} +.med-avatar.clickable:hover { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.med-avatar-clickable { + cursor: pointer; + display: inline-flex; +} +.med-avatar-clickable .med-avatar { + transition: + transform 0.15s, + box-shadow 0.15s; +} +.med-avatar-clickable:hover .med-avatar { + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +/* Table/Timeline cells with avatar */ +.cell-with-avatar { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.5rem; +} + +.cell-with-avatar .med-name-line { + display: flex; + align-items: flex-start; + gap: 0.5rem; +} + +.med-taken-by-line { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.35rem; + justify-content: flex-start; +} + +.med-name-block-dash { + display: flex; + flex-direction: column; + gap: 0.2rem; + min-width: 0; +} + +.cell-with-avatar .med-icons { + display: flex; + align-items: center; + gap: 0.35rem; + font-size: 1rem; +} + +.cell-with-avatar .med-icons span { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 1.2em !important; + height: 1.2em !important; + line-height: 1 !important; + font-size: 1rem !important; + vertical-align: middle !important; +} + +.time-main .med-name { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.taken-by-inline { + color: var(--text-secondary); + font-weight: 400; +} + +.taken-by-name { + color: var(--accent-light); + font-weight: 600; +} + +/* Medication list name row with avatar */ +.med-name-row { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; +} +.med-name-block { + min-width: 0; +} +.med-generic-name { + color: var(--text-secondary); + font-size: 0.85rem; + font-weight: 400; + margin-top: 0.1rem; +} + +.image-preview { + display: flex; + align-items: center; + gap: 1rem; + margin-top: 0.5rem; + width: 100%; +} + +.image-preview button { + margin-left: auto; +} + +.image-preview img { + width: 80px; + height: 80px; + object-fit: cover; + border-radius: 8px; + border: 1px solid var(--border-primary); +} + +/* Modal base styles moved to styles/modals-base.css */ diff --git a/frontend/src/styles/share-dialog.css b/frontend/src/styles/share-dialog.css index cb0a98b..f9295e4 100644 --- a/frontend/src/styles/share-dialog.css +++ b/frontend/src/styles/share-dialog.css @@ -1,5 +1,6 @@ /* ============================================================================= Share Dialog + Owns the focused sharing dialog flow and related share-specific form states. ============================================================================= */ .share-dialog-modal { max-width: 480px;