/* ============================================================ shared.css — Tx2Day shared styles Linked before any role-specific stylesheet on every page. ============================================================ */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Inter:wght@400;600&display=swap'); /* ── Status chips ── */ .th-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .2px; white-space: nowrap; } .th-chip.ok { background: rgba(108,191,132,.14); color: #248a47; } .th-chip.warn { background: rgba(255,215,79,.18); color: #946c00; } .th-chip.over { background: rgba(239,68,68,.14); color: #b42323; } .th-chip.exact { background: rgba(108,191,132,.30); color: #1a6e38; } /* ── Student-row tinting (minutes used vs. allowed) ── */ tr.th-row-over { background-color: rgba(239,68,68,.08) !important; } tr.th-row-warn { background-color: rgba(255,215,79,.13) !important; } tr.th-row-exact { background-color: rgba(108,191,132,.18) !important; } /* ── Shared utilities ── */ .th-muted { color: #6b7f88; } /* Sticky modal footer with frosted-glass look */ .th-sticky-actions { position: sticky; bottom: 0; backdrop-filter: blur(6px); background: rgba(255,255,255,.8); } /* Assistant-session row highlight */ .th-assistant-session { background: linear-gradient(90deg, rgba(169,208,223,.18), rgba(169,208,223,.06) 60%, transparent); } /* ============================================================ Navigation bar ------------------------------------------------------------ Lives in shared.css because every page loads this file, and the bar must look identical on all of them. It used to be styled by each ROLE stylesheet, via `.navbar.navbar-dark.bg-dark`. That had two consequences: • userStyles.css never defines the --tx-* palette, so on the dashboard the gradient underline resolved to `linear-gradient( 90deg, , )` — nothing. The dashboard was the one page the navbar styling did not reach. • The selector required the .navbar-dark and .bg-dark classes, which are deprecated in Bootstrap 5.3 and pull their colours from theme variables the role stylesheets also redefine. The palette below is the same one those stylesheets used, hoisted here so it exists everywhere, and keyed to the SECTION of the site rather than to the current page's role stylesheet — so the Therapist menu is green whether you are looking at it from an admin page or a therapist one. ============================================================ */ :root { /* Bar itself — from the old .navbar.navbar-dark.bg-dark rule. */ --tx-nav-from: #243444; --tx-nav-mid: #2d3e50; --tx-nav-to: #1e2a36; /* Section accents. Admin pair is adminStyles.css's --tx-secondary → --tx-accent; therapist pair is therapistStyles.css's. */ --tx-admin-from: #e4e9eb; --tx-admin-to: #4ba2a1; --tx-therapist-from: #a9d0df; --tx-therapist-to: #6cbf84; /* Whichever section is in play; set per-dropdown below. */ --tx-section-from: var(--tx-therapist-from); --tx-section-to: var(--tx-therapist-to); } .tx-navbar { background: linear-gradient(90deg, var(--tx-nav-from), var(--tx-nav-mid) 45%, var(--tx-nav-to)); box-shadow: 0 6px 18px rgba(45, 62, 80, .08); } /* Each dropdown declares which half of the site it belongs to, so the underline and menu tint follow the section rather than the page. */ .tx-nav-section--admin { --tx-section-from: var(--tx-admin-from); --tx-section-to: var(--tx-admin-to); } .tx-nav-section--therapist { --tx-section-from: var(--tx-therapist-from); --tx-section-to: var(--tx-therapist-to); } /* ── Bar links ─────────────────────────────────────────────── */ /* Stated explicitly so userStyles.css's blanket `a { color: … }` cannot recolour them on the dashboard. */ .tx-navbar .navbar-brand, .tx-navbar .nav-link { color: rgba(255, 255, 255, .85); text-decoration: none; } .tx-navbar .navbar-brand { font-family: 'Playfair Display', serif; font-weight: 500; color: #fff; } .tx-navbar .nav-link { position: relative; /* Room for the underline to sit clear of the text at bottom: 6px. */ padding-bottom: .8rem; } .tx-navbar .nav-link:hover, .tx-navbar .nav-link:focus, .tx-navbar .navbar-brand:hover { color: #fff; text-decoration: none; } /* The gradient underline, carried over from the old role stylesheets and now coloured by section. */ .tx-navbar .nav-link.active { color: #fff; font-weight: 700; } /* ::before, NOT ::after. Bootstrap uses .dropdown-toggle::after to draw the caret triangle, and a dropdown toggle is also a .nav-link — one element has only one ::after, so the two rules collided: the underline inherited the caret's transparent side-borders (rendering as a white trapezoid) and the caret vanished from whichever menu was active. */ .tx-navbar .nav-link.active::before { content: ""; position: absolute; /* The original slot, from the role stylesheets: inset 8px, 6px off the bottom, 3px tall. */ left: 8px; right: 8px; bottom: 6px; height: 3px; border-radius: 3px; /* Accent first. The original ran secondary → accent, but both secondaries are pale (#e4e9eb admin, #a9d0df therapist), so against the dark bar the two underlines read as the same white line. Leading with the accent keeps both colours and makes the section obvious at a glance. */ /* The accent holds the first half rather than being a single stop. A toggle is only ~55px wide, so a plain two-stop gradient left the accent as a sliver and both sections read as the same white line. */ background: linear-gradient(90deg, var(--tx-section-to) 0%, var(--tx-section-to) 45%, var(--tx-section-from) 100%); opacity: .95; } /* ── Dropdown menus ────────────────────────────────────────── */ /* The menu is a LIGHT surface. The