/* assets/css/app.css — Behavior Lens v5 */ /* ═══════════════════════════════════════════════════════════════ THEMES — applied via [data-theme] on ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="default"] { --primary: #4f46e5; --primary-dark: #3730a3; --bg-body: #f8f9ff; --bg-card: #ffffff; --text-main: #1e293b; --text-muted: #6b7280; --navbar-bg: #4f46e5; --radius: 10px; } [data-theme="ocean"] { --primary: #0891b2; --primary-dark: #0e7490; --bg-body: #f0f9ff; --bg-card: #ffffff; --text-main: #0c4a6e; --text-muted: #64748b; --navbar-bg: #0891b2; --radius: 10px; } [data-theme="forest"] { --primary: #16a34a; --primary-dark: #15803d; --bg-body: #f0fdf4; --bg-card: #ffffff; --text-main: #14532d; --text-muted: #6b7280; --navbar-bg: #16a34a; --radius: 10px; } [data-theme="sunset"] { --primary: #ea580c; --primary-dark: #c2410c; --bg-body: #fff7ed; --bg-card: #ffffff; --text-main: #431407; --text-muted: #78716c; --navbar-bg: #ea580c; --radius: 10px; } [data-theme="rose"] { --primary: #e11d48; --primary-dark: #be123c; --bg-body: #fff1f2; --bg-card: #ffffff; --text-main: #4c0519; --text-muted: #9ca3af; --navbar-bg: #e11d48; --radius: 10px; } [data-theme="slate"] { --primary: #475569; --primary-dark: #334155; --bg-body: #f1f5f9; --bg-card: #ffffff; --text-main: #0f172a; --text-muted: #64748b; --navbar-bg: #334155; --radius: 10px; } [data-theme="behavlens"] { --primary: #1a3a6b; --primary-dark: #122952; --bg-body: #f0f7ff; --bg-card: #ffffff; --text-main: #0f1e3a; --text-muted: #4a6080; --navbar-bg: #1a3a6b; --radius: 10px; } /* Behaviour Lens brand accent — green on navy */ [data-theme="behavlens"] a { color: #1a7a3a; } [data-theme="behavlens"] .text-primary { color: #1a3a6b !important; } [data-theme="behavlens"] .btn-primary, [data-theme="behavlens"] .navbar.bg-primary { background-color: #1a3a6b !important; } [data-theme="behavlens"] .btn-primary:hover { background-color: #122952 !important; } [data-theme="behavlens"] .cal-today { box-shadow: 0 0 0 3px #2db84b; } [data-theme="behavlens"] :focus-visible { outline-color: #2db84b; } [data-theme="behavlens"] .insight-summary-box { border-left-color: #2db84b; } /* ═══════════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════════ */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-body); color: var(--text-main); transition: background 0.3s ease, color 0.3s ease; } /* Apply theme primary colour to Bootstrap's .bg-primary, .btn-primary etc. */ .navbar.bg-primary, .btn-primary, .badge.bg-primary { background-color: var(--primary) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-dark) !important; } .navbar.bg-primary { border-color: var(--primary) !important; } .text-primary { color: var(--primary) !important; } .border-primary { border-color: var(--primary) !important; } a { color: var(--primary); } .btn-outline-primary { color: var(--primary) !important; border-color: var(--primary) !important; } .btn-outline-primary:hover { background: var(--primary) !important; color: #fff !important; } /* ── Cards ── */ .card { border-radius: var(--radius); background: var(--bg-card); } .card-header { border-radius: var(--radius) var(--radius) 0 0 !important; } /* ═══════════════════════════════════════════════════════════════ CALENDAR GRID ═══════════════════════════════════════════════════════════════ */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-header { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); padding: 4px 0; text-transform: uppercase; } .cal-day { aspect-ratio: 1; border-radius: var(--radius); border: 1px solid #000; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; position: relative; min-height: 44px; user-select: none; -webkit-tap-highlight-color: transparent; } .cal-day:active { transform: scale(0.93); } .cal-day:not(.cal-empty):hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,0.18); z-index: 2; } .cal-empty { cursor: default; background: transparent !important; border: none !important; } .cal-today { box-shadow: 0 0 0 3px var(--primary); } .cal-missing { border: 1.5px dashed #d1d5db !important; } .cal-future { opacity: 0.6; } .day-num { font-size: 0.8rem; font-weight: 600; line-height: 1; } .mood-icon { font-size: 0.9rem; line-height: 1; } .school-dot { position: absolute; bottom: 2px; right: 16px; font-size: 0.65rem; line-height: 1; pointer-events: none; } .meltdown-dot { position: absolute; top: 2px; right: 3px; font-size: 0.55rem; } /* ═══════════════════════════════════════════════════════════════ MOOD SUMMARY CHIPS (calendar) ═══════════════════════════════════════════════════════════════ */ .mood-summary-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: transform 0.1s; } .mood-summary-chip:hover { transform: scale(1.08); } .legend-item { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ FAB ═══════════════════════════════════════════════════════════════ */ .btn-fab { position: fixed; bottom: 24px; right: 20px; width: 56px; height: 56px; border-radius: 50%; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; z-index: 1000; background: var(--primary) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3); color: #fff !important; border: none; } /* ═══════════════════════════════════════════════════════════════ MOOD SELECTOR (entry form) ═══════════════════════════════════════════════════════════════ */ .mood-selector input[type="radio"] { display: none; } .mood-btn { display: block; border: 2px solid #e2e8f0; border-radius: 12px; padding: 8px 4px; cursor: pointer; transition: all 0.15s ease; background: #fff; } .mood-emoji { font-size: 1.6rem; display: block; } .mood-option input:checked ~ .mood-btn { background: var(--mood-bg); color: var(--mood-fg); border-color: var(--mood-bg); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .mood-btn:hover { border-color: var(--primary); transform: scale(1.04); } /* ═══════════════════════════════════════════════════════════════ TAG CATEGORY SECTIONS (colour-coded) ═══════════════════════════════════════════════════════════════ */ .tag-section { border-radius: var(--radius); overflow: hidden; margin-bottom: 0.75rem; } .tag-section-header { padding: 6px 12px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; } .tag-section-body { padding: 8px 10px; } /* Trigger section (danger-themed) */ .trigger-section-header { background: #dc3545; color: #fff; } .trigger-section-body { background: #fff5f5; } /* Food */ .food-section-header { background: #198754; color: #fff; } .food-section-body { background: #f0faf4; } /* Medication */ .medication-section-header { background: #0891b2; color: #fff; } .medication-section-body { background: #f0fbff; } /* Activity */ .activity-section-header { background: #d97706; color: #fff; } .activity-section-body { background: #fffdf0; } /* Behaviour */ .behaviour-section-header { background: #6f42c1; color: #fff; } .behaviour-section-body { background: #f9f5ff; } /* ═══════════════════════════════════════════════════════════════ CHARTS ═══════════════════════════════════════════════════════════════ */ .chart-container { position: relative; min-height: 200px; max-height: 340px; } /* ═══════════════════════════════════════════════════════════════ RECORDING BLINK ═══════════════════════════════════════════════════════════════ */ @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.2; } } .blink { animation: blink 1s infinite; } /* ═══════════════════════════════════════════════════════════════ JQUERY UI AUTOCOMPLETE ═══════════════════════════════════════════════════════════════ */ .ui-autocomplete { max-height: 200px; overflow-y: auto; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid #e2e8f0; font-size: 0.9rem; z-index: 9999 !important; } .ui-menu-item-wrapper { padding: 8px 12px; } .ui-menu-item-wrapper.ui-state-active { background: var(--primary); color: white; border-radius: 0; } /* ═══════════════════════════════════════════════════════════════ INSIGHT ENGINE TABLES ═══════════════════════════════════════════════════════════════ */ .insight-table th { cursor: pointer; user-select: none; white-space: nowrap; } .insight-table th:hover { background: rgba(0,0,0,0.04); } .insight-table th .sort-icon { font-size: 0.65rem; opacity: 0.5; margin-left: 3px; } .insight-table th.sort-asc .sort-icon::after { content: ' ▲'; opacity: 1; } .insight-table th.sort-desc .sort-icon::after { content: ' ▼'; opacity: 1; } .impact-bar { display: inline-block; height: 8px; border-radius: 4px; min-width: 4px; vertical-align: middle; margin-right: 5px; } .insight-summary-box { border-left: 4px solid var(--primary); padding: 10px 14px; border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--primary) 8%, white); font-size: 0.9rem; margin-bottom: 1rem; } /* Theme preview swatches in settings */ .theme-swatch { width: 28px; height: 28px; border-radius: 50%; display: inline-block; border: 2px solid transparent; cursor: pointer; margin-right: 4px; transition: transform 0.15s, border-color 0.15s; } .theme-swatch:hover { transform: scale(1.2); } .theme-swatch.active { border-color: #1e293b; transform: scale(1.15); } /* ═══════════════════════════════════════════════════════════════ MISC ═══════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; } :focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .navbar-brand { letter-spacing: -0.3px; } .selected-tag { font-size: 0.8rem; } @media (max-width: 400px) { .cal-day { min-height: 38px; border-radius: 6px; } .day-num { font-size: 0.7rem; } .mood-icon { font-size: 0.75rem; } .cal-header { font-size: 0.62rem; } .calendar-grid { gap: 2px; } } @media (max-width: 576px) { .btn-fab { bottom: 16px; right: 14px; width: 50px; height: 50px; font-size: 1.3rem; } }