/*
* responsive_override.css v3
* Psyclinic AI — Mobile/Tablet layer (max-width: 1023px only)
* Desktop 1024px+ → zero changes, original code untouched.
*
* Place in: Psyclinic_App/static/responsive_override.css
* Link in every template after existing styles:
* dropdowns are rendered by the OS; they always
break out of clip regions by default. The only thing that can
clip them is overflow:hidden on a direct ancestor.
Fix: let glass-panel overflow:visible everywhere. */
.glass-panel {
overflow: visible !important;
}
/* ── SELECT: constrain width so OS dropdown renders within viewport ── */
@media (max-width: 1023px) {
select {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Ensure every select's parent doesn't clip it */
#session-form > div,
#session-form .combo-field,
.input-group {
overflow: visible !important;
position: relative !important;
}
}
/* ═══════════════════════════════════════════════════════════════
1. SHARED NAVBAR (index + my_profile, max-width 1023px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
/* ── Logo bar stretches full width ── */
.logo-container {
position: fixed !important;
inset: 0 0 auto 0 !important;
width: 100% !important;
height: 54px !important;
z-index: 300 !important;
display: flex !important;
align-items: center !important;
padding: 0 12px !important;
background: rgba(10, 1, 24, 0.97) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border-bottom: 1px solid rgba(0, 212, 255, 0.18) !important;
border-radius: 0 !important;
box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
/* overflow visible so child links render cleanly */
overflow: visible !important;
}
.logo-container img {
width: 120px !important;
height: 36px !important;
object-fit: contain !important;
}
/* ── my_profile nav-buttons → right side of same bar ── */
.nav-buttons {
position: fixed !important;
top: 0 !important;
right: 0 !important;
height: 54px !important;
z-index: 301 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 10px !important;
background: transparent !important;
}
.nav-btn {
padding: 0.42rem 0.8rem !important;
font-size: 0.76rem !important;
border-radius: 0.6rem !important;
white-space: nowrap !important;
line-height: 1.2 !important;
}
/* ── Push page content below fixed bar ── */
body {
padding-top: 54px !important;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.logo-container img { width: 150px !important; height: 44px !important; }
.nav-btn { padding: 0.55rem 1rem !important; font-size: 0.83rem !important; }
}
@media (max-width: 390px) {
.logo-container img { width: 100px !important; }
.nav-btn { padding: 0.38rem 0.6rem !important; font-size: 0.7rem !important; }
}
/* ═══════════════════════════════════════════════════════════════
2. index.html — SETUP PAGE (form, inputs, button)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
/* App container: push below navbar */
#app-container {
padding-top: 8px !important;
padding-left: 0.875rem !important;
padding-right: 0.875rem !important;
min-height: calc(100svh - 54px) !important;
align-items: flex-start !important;
}
/* Hero */
.hero-title {
font-size: clamp(1.8rem, 7vw, 3rem) !important;
line-height: 1.15 !important;
}
.hero-tagline { font-size: clamp(0.9rem, 2.6vw, 1.15rem) !important; }
/* Setup glass panel */
.glass-panel.p-12 {
padding: 1.25rem !important;
border-radius: 1.25rem !important;
}
/* ── Form: single column, comfortable spacing ── */
#session-form {
grid-template-columns: 1fr !important;
gap: 0 !important; /* gap controlled per-field below */
}
#session-form > div {
margin-bottom: 1.1rem !important;
}
#session-form .md\:col-span-2 {
grid-column: span 1 !important;
}
/* ── All form labels ── */
#session-form label {
font-size: 0.78rem !important;
letter-spacing: 0.06em !important;
margin-bottom: 0.45rem !important;
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
}
/* ── All inputs and selects: proper height + font ── */
#session-form input[type="text"],
#session-form input[type="number"],
#session-form select,
#session-form textarea,
#diseases-input {
width: 100% !important;
padding: 0.85rem 1rem !important;
font-size: 0.95rem !important;
border-radius: 0.875rem !important;
line-height: 1.4 !important;
min-height: 50px !important;
box-sizing: border-box !important;
}
/* Select arrow breathing room */
#session-form select {
padding-right: 2.5rem !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer !important;
}
/* ── Start Simulation button: full width, legible ── */
#start-btn {
width: 100% !important;
padding: 1rem 1.5rem !important;
font-size: 1.05rem !important;
border-radius: 1rem !important;
margin-top: 0.5rem !important;
min-height: 54px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
}
/* ── Diseases autocomplete suggestions ──
position:fixed so it escapes glass-panel stacking context */
#diseases-field {
position: relative !important;
overflow: visible !important;
}
#diseases-suggestions {
position: fixed !important;
left: 0.875rem !important;
right: 0.875rem !important;
/* top injected by JS helper */
z-index: 9999 !important;
max-height: 45svh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
border-radius: 0.875rem !important;
}
/* Diseases tags */
#diseases-tags {
margin-top: 0.5rem !important;
flex-wrap: wrap !important;
gap: 0.3rem !important;
}
/* ── Modals (persona confirm) ── */
.modal-overlay { padding: 0.75rem !important; }
.modal-content {
padding: 1.25rem !important;
border-radius: 1.25rem !important;
max-height: 92svh !important;
overflow-y: auto !important;
max-width: 96vw !important;
}
.modal-header h2 { font-size: 1.25rem !important; }
.modal-persona-prompt {
padding: 1rem !important;
font-size: 0.82rem !important;
max-height: 48svh !important;
overflow-y: auto !important;
border-radius: 0.75rem !important;
}
.modal-footer { gap: 0.5rem !important; }
.modal-footer button {
flex: 1 !important;
padding: 0.75rem !important;
font-size: 0.9rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
3. index.html — SESSION VIEW
Mobile: full-screen video call layout (like reference images 4 & 5)
- Avatar fills entire screen behind everything
- Chat messages appear as translucent bottom sheet OVER the avatar
- Navbar shows timer + mic + history button
- Input bar pinned at very bottom
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Session container: fill whole viewport below navbar */
#session-container {
position: fixed !important;
inset: 54px 0 0 0 !important;
overflow: hidden !important;
z-index: 1 !important;
}
#session-view {
height: 100% !important;
width: 100% !important;
position: relative !important;
}
/* Grid → single stacking context */
#session-view-updated {
display: block !important;
position: relative !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
/* ── AVATAR: fills 100% of screen, behind everything ── */
.info-panel-updated {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
border-radius: 0 !important;
background: #000 !important;
z-index: 1 !important;
overflow: hidden !important;
/* glass-panel glass effect removed for full bleed */
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
#avatar-container {
width: 100% !important;
height: 100% !important;
border-radius: 0 !important;
box-shadow: none !important;
background: #0a0118 !important;
overflow: hidden !important;
}
#patient-video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: top center !important;
display: block !important;
}
/* Dark gradient at bottom so chat text is readable over video */
.info-panel-updated::after {
content: '' !important;
position: absolute !important;
inset: 50% 0 0 0 !important;
background: linear-gradient(to bottom, transparent, rgba(10,1,24,0.85)) !important;
z-index: 2 !important;
pointer-events: none !important;
}
/* ── CHAT PANEL: float above avatar as a bottom sheet ── */
.chat-panel-updated {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
height: auto !important;
max-height: 62% !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
/* translucent glass over video */
background: rgba(10, 1, 24, 0.82) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
border-radius: 1.25rem 1.25rem 0 0 !important;
padding: 0.75rem 0.875rem 0.5rem !important;
/* Remove glass-panel decorative border/shadow */
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
box-shadow: 0 -8px 32px rgba(0,0,0,0.5) !important;
overflow: hidden !important;
}
/* Hide the "Therapy Session" header row on mobile
— timer and mic live in the top navbar instead */
.chat-panel-updated > .flex.justify-between.items-center {
display: none !important;
}
/* ── CHAT WINDOW — scrollable messages area ── */
.chat-window-updated {
flex: 1 1 0 !important;
min-height: 80px !important;
max-height: none !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.5rem 0.25rem !important;
border-radius: 0 !important;
margin-bottom: 0.5rem !important;
/* transparent bg — the glass panel behind shows */
background: transparent !important;
border: none !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
/* Chat bubbles: clean white-card style like reference images 4 & 5 */
.chat-bubble {
font-size: 0.875rem !important;
line-height: 1.5 !important;
padding: 0.7rem 0.9rem !important;
border-radius: 1.1rem !important;
max-width: 88% !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
/* Patient (assistant) bubble: light card */
.chat-bubble.self-start,
.chat-window-updated > div:not(.self-end):not(.self-center) {
background: rgba(255,255,255,0.96) !important;
color: #1a1a2e !important;
border: none !important;
border-bottom-left-radius: 0.2rem !important;
}
/* Therapist (user) bubble: cyan gradient */
.chat-bubble.self-end {
background: linear-gradient(135deg, #0891b2, #2563eb) !important;
color: #fff !important;
border-bottom-right-radius: 0.2rem !important;
}
/* ── INPUT AREA: pinned at bottom of panel ── */
.input-area-updated {
flex-shrink: 0 !important;
padding: 0.5rem 0.625rem !important;
gap: 8px !important;
border-radius: 1.375rem !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(0,212,255,0.2) !important;
align-items: center !important;
margin-bottom: 0.375rem !important;
}
.input-area-updated textarea {
font-size: 0.9rem !important;
padding: 0.5rem 0.5rem !important;
min-height: 36px !important;
max-height: 72px !important;
color: #e5e7eb !important;
background: transparent !important;
border: none !important;
}
.input-area-updated textarea::placeholder { color: rgba(255,255,255,0.45) !important; }
#mic-btn {
width: 40px !important; height: 40px !important;
border-radius: 50% !important; flex-shrink: 0 !important;
}
#send-btn {
width: 40px !important; height: 40px !important;
border-radius: 0.875rem !important; flex-shrink: 0 !important;
font-size: 0.875rem !important;
}
/* ── NAVBAR: timer + mic pills — styled here, VISIBILITY CONTROLLED BY JS ──
JS calls showMobileSessionControls(true/false):
true → setup & assessment pages (hidden)
false → live chat session only (visible)
We must NOT set display:flex here — that would override JS's display:none
and make pills appear on setup/report pages too. */
#mobile-timer-pill {
/* display: intentionally omitted — JS sets flex or none */
align-items: center;
gap: 6px;
font-family: monospace;
font-size: 0.9rem;
font-weight: 700;
color: #00fff2;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(0,212,255,0.3);
border-radius: 0.6rem;
padding: 0.3rem 0.6rem;
letter-spacing: 0.05em;
}
/* Mic pill in navbar — visibility also JS-controlled */
#mobile-mic-pill {
/* display: intentionally omitted — JS sets flex or none */
align-items: center;
justify-content: center;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
}
/* Continuation banner: compact inside panel */
#continuation-banner {
font-size: 0.78rem !important;
padding: 0.5rem 0.625rem !important;
margin-bottom: 0.5rem !important;
flex-shrink: 0 !important;
border-width: 1px !important;
}
/* ── ASSESSMENT / SUPERVISION REPORT VIEW ──
Full-width scrollable page on mobile, readable typography */
#assessment-view {
position: absolute !important;
inset: 0 !important;
z-index: 20 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 1rem 0.875rem 2rem !important;
border-radius: 0 !important;
background: rgba(10, 1, 24, 0.97) !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#assessment-view h2 {
font-size: 1.3rem !important;
line-height: 1.3 !important;
}
/* Report loading: centered */
#report-content {
font-size: 0.875rem !important;
}
#report-content > p.text-center {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 50svh !important;
gap: 1rem !important;
padding: 2rem 1rem !important;
}
/* Report section headings */
#report-content h3 {
font-size: 1rem !important;
margin-top: 1.25rem !important;
margin-bottom: 0.625rem !important;
line-height: 1.3 !important;
}
#report-content h4 {
font-size: 0.875rem !important;
margin-top: 0.875rem !important;
margin-bottom: 0.4rem !important;
}
#report-content p, #report-content li {
font-size: 0.82rem !important;
line-height: 1.6 !important;
}
/* Report table: horizontal scroll wrapper */
#report-content table {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
border-collapse: collapse !important;
font-size: 0.75rem !important;
white-space: normal !important;
}
#report-content table thead { position: sticky; top: 0; z-index: 2; }
#report-content table th {
font-size: 0.7rem !important;
padding: 0.45rem 0.5rem !important;
background: rgba(0,212,255,0.12) !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
white-space: nowrap !important;
border: 1px solid rgba(0,212,255,0.2) !important;
}
#report-content table td {
font-size: 0.75rem !important;
padding: 0.45rem 0.5rem !important;
vertical-align: top !important;
border: 1px solid rgba(0,212,255,0.12) !important;
min-width: 70px !important;
line-height: 1.45 !important;
word-break: break-word !important;
}
/* Competency col */
#report-content table td:first-child, #report-content table th:first-child {
min-width: 90px !important; max-width: 110px !important;
}
/* Rating col */
#report-content table td:nth-child(2), #report-content table th:nth-child(2) {
min-width: 50px !important; text-align: center !important;
}
/* Justification col */
#report-content table td:nth-child(3) {
min-width: 130px !important; max-width: 200px !important;
}
/* Chat analysis section (side-by-side on desktop) → stack on mobile */
.chat-analysis-container,
.chat-analysis-grid {
flex-direction: column !important;
grid-template-columns: 1fr !important;
}
.chat-analysis-suggestion {
max-width: 100% !important;
border-radius: 0.875rem !important;
}
/* Rating badges */
#report-content .inline-block {
font-size: 0.7rem !important;
padding: 0.18rem 0.5rem !important;
}
}
/* ── SESSION TABLET 768-1023px: side-by-side ── */
@media (min-width: 768px) and (max-width: 1023px) {
#session-container {
position: relative !important;
height: calc(100svh - 54px) !important;
overflow: hidden !important;
}
#session-view { height: 100% !important; }
#session-view-updated {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
height: 100% !important;
gap: 0.75rem !important;
padding: 0.75rem !important;
max-width: 100% !important;
}
.info-panel-updated {
position: relative !important;
inset: auto !important;
height: 100% !important;
border-radius: 1.25rem !important;
overflow: hidden !important;
background: transparent !important;
}
.info-panel-updated::after { display: none !important; }
#avatar-container { border-radius: 1.25rem !important; background: #0a0118 !important; }
#patient-video { object-position: center !important; }
.chat-panel-updated {
position: relative !important;
inset: auto !important;
height: 100% !important;
max-height: none !important;
border-radius: 1.25rem !important;
background: rgba(10, 1, 24, 0.85) !important;
backdrop-filter: blur(16px) !important;
border: 1px solid rgba(0,212,255,0.2) !important;
padding: 1.125rem !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* Show header row on tablet */
.chat-panel-updated > .flex.justify-between.items-center { display: flex !important; }
.chat-window-updated {
flex: 1 1 0 !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
background: rgba(10,1,24,0.4) !important;
border: 1px solid rgba(0,212,255,0.2) !important;
}
.chat-bubble { font-size: 0.875rem !important; }
#mic-toggle-btn { width: 44px !important; height: 44px !important; }
#mic-btn { width: 46px !important; height: 46px !important; }
#send-btn { width: 46px !important; height: 46px !important; }
#timer { font-size: 1.1rem !important; padding: 0.35rem 0.75rem !important; }
.input-area-updated { padding: 0.875rem !important; gap: 8px !important; }
#assessment-view {
position: relative !important;
inset: auto !important;
overflow-y: auto !important;
padding: 1.25rem !important;
border-radius: 1.25rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
4. index.html — CHAT HISTORY DRAWER
(injected into session header by JS — see index.html patch)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
/* History button in header — visible on mobile only */
#history-toggle-btn {
display: flex !important;
width: 36px !important;
height: 36px !important;
border-radius: 0.6rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(0, 212, 255, 0.12) !important;
border: 1px solid rgba(0, 212, 255, 0.3) !important;
color: #00d4ff !important;
cursor: pointer !important;
flex-shrink: 0 !important;
transition: background 0.2s !important;
}
#history-toggle-btn:active {
background: rgba(0, 212, 255, 0.25) !important;
}
/* Slide-in drawer from bottom */
#chat-history-drawer {
position: fixed !important;
inset: auto 0 0 0 !important;
z-index: 500 !important;
height: 70svh !important;
background: rgba(10, 1, 24, 0.97) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border-top: 1px solid rgba(0, 212, 255, 0.25) !important;
border-radius: 1.5rem 1.5rem 0 0 !important;
display: flex !important;
flex-direction: column !important;
transform: translateY(100%) !important;
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 -8px 40px rgba(0,0,0,0.6) !important;
}
#chat-history-drawer.open {
transform: translateY(0) !important;
}
/* Drawer header */
#chat-history-drawer .drawer-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0.875rem 1.125rem !important;
border-bottom: 1px solid rgba(0, 212, 255, 0.15) !important;
flex-shrink: 0 !important;
}
#chat-history-drawer .drawer-title {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #00fff2 !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
#chat-history-drawer .drawer-close {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
border: 1px solid rgba(0,212,255,0.3) !important;
background: transparent !important;
color: #94a3b8 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 0.85rem !important;
}
/* Drawer body: scrollable chat replay */
#chat-history-drawer .drawer-body {
flex: 1 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.875rem 1rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.625rem !important;
}
/* Mimic the same bubble styles as chat-window */
#chat-history-drawer .history-bubble {
padding: 0.65rem 0.875rem !important;
border-radius: 1rem !important;
font-size: 0.85rem !important;
line-height: 1.45 !important;
max-width: 88% !important;
}
#chat-history-drawer .history-bubble.user {
background: linear-gradient(135deg, #0891b2, #2563eb) !important;
color: white !important;
align-self: flex-end !important;
border-bottom-right-radius: 0.25rem !important;
}
#chat-history-drawer .history-bubble.assistant {
background: rgba(30, 20, 60, 0.9) !important;
border: 1px solid rgba(0,212,255,0.2) !important;
color: #d1d5db !important;
align-self: flex-start !important;
border-bottom-left-radius: 0.25rem !important;
}
/* Dim overlay behind drawer */
#chat-history-overlay {
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,0.55) !important;
z-index: 499 !important;
display: none !important;
backdrop-filter: blur(2px) !important;
}
#chat-history-overlay.open { display: block !important; }
}
/* ═══════════════════════════════════════════════════════════════
5. my_profile.html — DASHBOARD
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
.max-w-7xl {
padding-top: 8px !important;
padding-left: 0.875rem !important;
padding-right: 0.875rem !important;
}
/* Profile glass panel */
.glass-panel.p-10,
.glass-panel.p-16 {
padding: 1.25rem !important;
border-radius: 1.25rem !important;
}
h1.hero-title {
font-size: clamp(1.5rem, 5vw, 2.4rem) !important;
}
/* Stat cards: 2-col */
.grid.grid-cols-2.md\:grid-cols-4 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
}
.stat-card { padding: 1rem !important; border-radius: 1rem !important; }
.stat-card h2 { font-size: 1.7rem !important; }
/* Charts */
.chart-container { height: 200px !important; }
.section-header {
font-size: clamp(1.15rem, 4vw, 1.6rem) !important;
margin: 1.5rem 0 0.875rem !important;
}
/* Session cards */
.session-card { padding: 1rem !important; border-radius: 1rem !important; }
.session-card .grid.grid-cols-2.md\:grid-cols-5 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem !important;
}
.session-follow-up { margin-left: 0 !important; padding-left: 0.75rem !important; }
/* Limit card */
#limitCard > div:last-child {
flex-direction: column !important;
align-items: flex-start !important;
gap: 0.875rem !important;
}
#limitCard button { width: 100% !important; }
/* PDF Modal */
.pdf-modal { padding: 0 !important; align-items: stretch !important; }
.pdf-modal.active { display: flex !important; flex-direction: column !important; }
.pdf-modal-header {
flex-shrink: 0 !important;
flex-direction: column !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.75rem 1rem !important;
text-align: center !important;
}
.pdf-modal-title { font-size: 0.9rem !important; }
.pdf-modal-close { width: 100% !important; justify-content: center !important; }
.pdf-viewer-container {
flex: 1 !important;
height: calc(100svh - 110px) !important;
min-height: 280px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
border-radius: 0 !important;
}
.pdf-viewer-container iframe {
width: 100% !important;
height: 100% !important;
min-height: calc(100svh - 110px) !important;
display: block !important;
border: none !important;
}
/* Continue Session Modal */
.continue-modal-content {
padding: 1.125rem !important;
border-radius: 1.25rem !important;
max-width: 96vw !important;
max-height: 90svh !important;
overflow-y: auto !important;
}
.continue-modal-body { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
.session-info-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem !important; }
.continue-modal-actions { flex-direction: column !important; gap: 0.5rem !important; }
.continue-modal-title { font-size: 1.1rem !important; }
/* Touch targets */
.pdf-icon-btn { width: 44px !important; height: 44px !important; }
.bundle-toggle-btn { width: 40px !important; height: 40px !important; }
/* Pagination */
.pagination button { padding: 0.45rem 0.65rem !important; font-size: 0.8rem !important; }
/* Badges */
.difficulty-badge { font-size: 0.7rem !important; padding: 0.2rem 0.5rem !important; }
/* Insight cards */
.insight-card { padding: 1rem !important; border-radius: 1rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.session-card .grid.grid-cols-2.md\:grid-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
.session-follow-up { margin-left: 1.25rem !important; }
.continue-modal-body { grid-template-columns: 1fr 1fr !important; }
.session-info-grid { grid-template-columns: repeat(4, 1fr) !important; }
.continue-modal-actions { flex-direction: row !important; }
.stat-card { padding: 1.25rem !important; }
}
/* ═══════════════════════════════════════════════════════════════
6. logsign.html — already a centered card, minimal overrides
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
.form-container { padding: 0 1rem 1.25rem !important; }
.tab-container { padding: 0.3rem !important; }
.tab { padding: 0.6rem 0.75rem !important; font-size: 0.875rem !important; }
.input-group { margin-bottom: 0.875rem !important; }
.input-group label { font-size: 0.75rem !important; margin-bottom: 0.4rem !important; }
.input-group input,
.input-group select {
padding: 0.8rem 1rem !important;
font-size: 0.95rem !important;
border-radius: 0.875rem !important;
min-height: 48px !important;
}
.submit-btn {
padding: 0.9rem !important;
font-size: 1rem !important;
border-radius: 0.875rem !important;
min-height: 50px !important;
}
}
@media (max-width: 380px) {
.hero-title { font-size: 1.55rem !important; }
}
/* ------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════
7. admin_login.html — MOBILE REWRITE
Requires: on that page
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
/* ── Body: full-height scroll, safe padding for logo above panel ── */
body.admin-login {
align-items: flex-start !important;
justify-content: center !important;
padding: 5rem 1rem 2.5rem !important; /* top gap clears the absolute logo */
min-height: 100vh !important;
}
/* ── Logo: fixed to top-left, smaller but crisp ── */
body.admin-login .logo-container {
position: fixed !important;
top: 14px !important;
left: 16px !important;
z-index: 200 !important;
}
body.admin-login .logo-container img {
width: 130px !important;
height: 40px !important;
}
/* ── Glass panel: full-width, breathing room ── */
body.admin-login .glass-panel {
max-width: 100% !important;
width: 100% !important;
border-radius: 1.75rem !important;
margin: 0 auto !important;
/* subtle glow border on mobile for premium feel */
box-shadow:
0 0 0 1px rgba(255, 71, 87, 0.25),
0 20px 60px rgba(139, 92, 246, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
/* ── Header block inside panel: tighten top padding ── */
body.admin-login .glass-panel .text-center.pt-12 {
padding-top: 2rem !important;
padding-bottom: 0.75rem !important;
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
/* ── Title: fluid scale so it never overflows ── */
body.admin-login .hero-title {
font-size: clamp(1.75rem, 9vw, 2.75rem) !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
}
/* ── Subtitle: readable, slightly smaller ── */
body.admin-login .hero-subtitle {
font-size: 0.875rem !important;
margin-top: 0.5rem !important;
letter-spacing: 0.01em !important;
}
/* ── Admin badge: compact pill, don't let it wrap ── */
body.admin-login .admin-badge {
font-size: 0.72rem !important;
padding: 0.5rem 1rem !important;
margin: 1rem auto 0.25rem !important;
letter-spacing: 0.08em !important;
white-space: nowrap !important;
box-shadow: 0 6px 20px rgba(255, 71, 87, 0.35) !important;
}
/* ── Form container: comfortable horizontal padding ── */
body.admin-login .form-container {
padding: 1.25rem 1.25rem 1.5rem !important;
}
/* ── Input groups: tighter vertical rhythm ── */
body.admin-login .input-group {
margin-bottom: 1rem !important;
}
body.admin-login .input-group label {
font-size: 0.72rem !important;
margin-bottom: 0.4rem !important;
letter-spacing: 0.06em !important;
}
body.admin-login .input-group input {
padding: 0.9rem 1rem !important;
font-size: 1rem !important; /* keep readable on mobile */
border-radius: 0.875rem !important;
min-height: 52px !important; /* meets 44px touch target */
}
/* ── Error message ── */
body.admin-login .message {
font-size: 0.875rem !important;
padding: 0.875rem 1rem !important;
border-radius: 0.875rem !important;
margin-bottom: 1rem !important;
}
/* ── Submit button: full width, prominent touch target ── */
body.admin-login .submit-btn {
padding: 1rem !important;
font-size: 1rem !important;
border-radius: 0.875rem !important;
min-height: 54px !important;
margin-top: 0.5rem !important;
letter-spacing: 0.02em !important;
}
/* ── Footer: compact, centered ── */
body.admin-login .footer {
padding: 1rem 1.25rem 1.5rem !important;
font-size: 0.78rem !important;
line-height: 1.7 !important;
}
}
/* ── Tiny phones (≤380px): extra title squeeze ── */
@media (max-width: 380px) {
body.admin-login .hero-title {
font-size: 1.55rem !important;
}
body.admin-login .admin-badge {
font-size: 0.65rem !important;
padding: 0.45rem 0.875rem !important;
}
body.admin-login .form-container {
padding: 1rem !important;
}
}
/* ═══════════════════════════════════════════════════════════════
8. college_dashboard.html — MOBILE/TABLET OVERRIDES
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
/* Logout button: right side of fixed nav bar */
/* Logout nav-buttons: tuck into right side of fixed nav bar */
.nav-buttons {
position: fixed !important;
top: 0 !important;
right: 0 !important;
height: 54px !important;
z-index: 302 !important;
display: flex !important;
align-items: center !important;
padding: 0 10px !important;
gap: 6px !important;
background: transparent !important;
}
.nav-btn {
padding: 0.42rem 0.8rem !important;
font-size: 0.76rem !important;
border-radius: 0.6rem !important;
white-space: nowrap !important;
line-height: 1.2 !important;
box-shadow: none !important;
}
/* Page content below fixed navbar */
.max-w-7xl.mx-auto {
padding-top: 74px !important;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
/* Glass panel inner padding on mobile */
.glass-panel {
padding: 1.25rem !important;
}
/* Glass panel padding */
.glass-panel.p-10 {
padding: 1.25rem !important;
border-radius: 1.5rem !important;
}
/* Hero title */
.text-center .hero-title {
font-size: clamp(1.6rem, 8vw, 3rem) !important;
line-height: 1.15 !important;
}
/* Stat cards: 2 columns */
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.75rem !important;
margin-bottom: 1.5rem !important;
}
/* Tailwind generates separate classes — target all combinations */
.grid-cols-1.md\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr) !important;
}
.stat-card {
padding: 1rem 0.875rem !important;
min-width: unset !important;
}
.stat-card h2 { font-size: 2rem !important; }
.stat-card h3 { font-size: 0.72rem !important; }
.stat-card p { font-size: 0.72rem !important; }
.stat-card .icon-wrapper {
width: 48px !important;
height: 48px !important;
font-size: 1.3rem !important;
}
/* Charts: single column, shorter height */
.grid-2 {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.chart-canvas-wrapper { height: 220px !important; }
.chart-canvas-wrapper.tall { height: 260px !important; }
/* CTA button: full width */
.btn-primary {
width: 100% !important;
max-width: 100% !important;
margin: 2rem 0 !important;
padding: 1.1rem 1.5rem !important;
font-size: 1.05rem !important;
border-radius: 1.1rem !important;
box-sizing: border-box !important;
}
}
/* Hide logout text on tiny phones — icon only */
/* Hide logout text on tiny phones — icon only */
@media (max-width: 390px) {
.nav-buttons .nav-btn span,
.nav-buttons .nav-btn i ~ * { display: none !important; }
.nav-buttons .nav-btn { padding: 0 12px !important; min-width: 40px !important; justify-content: center !important; }
}
/* Slightly taller charts on larger phones */
@media (min-width: 480px) and (max-width: 1023px) {
.chart-canvas-wrapper { height: 260px !important; }
.chart-canvas-wrapper.tall { height: 300px !important; }
}
/* Very small phones: single column stat cards */
@media (max-width: 380px) {
.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
grid-template-columns: 1fr !important;
}
.stat-card h2 { font-size: 1.75rem !important; }
}
/* ═══════════════════════════════════════════════════════════════
9. TARGETED FIXES (v3.1 additions)
─ "Start First Session" button
─ "My Training Profile" title position
─ Nav buttons not overlapping logo on mobile
═══════════════════════════════════════════════════════════════ */
/* ── Fix: "Start First Session" & any nav-btn inside .empty-state ──
The button was stretching full-width because .nav-btn defaults to
display:flex which fills its block container. Force inline sizing
on both mobile AND desktop so it centres as a pill, not a bar. */
.empty-state .nav-btn {
display: inline-flex !important;
width: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── Fix: "My Training Profile" title — reduce top gap on mobile ──
The .max-w-7xl wrapper has Tailwind's mt-20 (5rem = 80px) but the
fixed navbar is only 54px tall, so the gap looks too large.
We target the wrapper that immediately follows the nav elements. */
@media (max-width: 1023px) {
/* my_profile.html main content wrapper */
.max-w-7xl.mx-auto.px-6 {
padding-top: 4px !important; /* body already has padding-top:54px from section 1 */
margin-top: 0 !important; /* remove Tailwind mt-20 */
}
}
/* ── Fix: nav-buttons not clashing with logo on narrow phones ──
On screens ≤ 480px the logo (120px) + nav buttons can overlap.
Solution: hide button TEXT, show icon only — already done in
section 1 for ≤390px. Extend the text-hide to ≤480px and
also reduce box-shadow that made buttons look "heavy". */
@media (max-width: 480px) {
.nav-btn {
box-shadow: none !important;
}
}
@media (max-width: 430px) {
/* Hide text nodes inside nav buttons, keep icons */
.nav-buttons .nav-btn {
font-size: 0 !important; /* hides text; icon size set below */
padding: 0 !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 50% !important;
justify-content: center !important;
gap: 0 !important;
}
.nav-buttons .nav-btn i {
font-size: 1.7rem !important; /* icon visible at normal size */
}
/* Tighten the gap between buttons */
.nav-buttons {
gap: 5px !important;
padding: 0 8px !important;
}
}
/* my_profile.html specific fixes */
.empty-state-btn,
.empty-state .empty-state-btn {
display: inline-flex !important;
width: fit-content !important;
max-width: calc(100vw - 3rem) !important;
min-width: 0 !important;
align-self: center !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
}
/* Fix horizontal scroll on my_profile mobile */
@media (max-width: 1023px) {
.max-w-7xl.mx-auto.px-6.py-12 {
overflow-x: hidden !important;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
.glass-panel.p-10,
.glass-panel.p-10.md\:p-16 {
padding: 1.25rem !important;
border-radius: 1.25rem !important;
overflow-x: hidden !important;
}
.empty-state {
padding: 3rem 1rem !important;
}
}