/* The White Orchid - Mobile-First Styles */
/* ═══ 0. BRAND FONTS ═══ */
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fira Sans';
src: url('/fonts/FiraSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
font-display: swap;
}
/* ═══ 1. RESET & BASE ═══ */
:root {
/* Drives the UA canvas/backdrop colour. Without this the browser's base
layer stays light, so iOS WebKit flashes a pale-cream backdrop during
cross-document navigation (dashboard ↔ messenger) before the new page's
dark body paints. [data-theme="dark"] flips it to dark below. */
color-scheme: light;
--color-primary: #254E48;
--color-primary-light: #48716b;
--color-primary-dark: #022b25;
--color-on-primary: #fff;
--color-accent: #DEC5D8;
--color-whatsapp: #25D366;
--color-bg: #F5F6E7;
--color-card: #FFFFFF;
--color-surface: #FFFFFF;
--color-text: #2D2D2D;
--color-text-light: #6B6B6B;
--color-muted: var(--color-text-light);
--color-bg-subtle: rgba(0, 0, 0, 0.03);
--color-border-subtle: rgba(0, 0, 0, 0.08);
--color-success: #1E6B3D;
--color-success-bg: #e8f7ee;
--color-error: #C0392B;
--color-error-bg: #fdecea;
--color-border: #e1e2d3;
--color-shadow: 0 2px 8px rgba(37, 78, 72, 0.1);
--color-danger: #C0392B;
--color-msgr-tick-read: #4fc3f7;
--color-primary-soft: rgba(37, 78, 72, 0.12);
--color-warning: #f59e0b;
--color-warning-bg: #fff8e1;
--font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--color-surface-alt: #EDEEE0;
--color-title-color: var(--color-primary);
--color-title-font: inherit;
/* Font size tokens - 5 categories, desktop defaults */
--font-size-heading: 1.25rem;
--font-size-subheading: 0.75rem;
--font-size-body: 0.88rem;
--font-size-label: 0.82rem;
--font-size-small: 0.72rem;
/* Messenger message body. Desktop matches --font-size-body (unchanged); the
mobile override below bumps it one step larger for comfortable phone reading. */
--font-size-msgr: var(--font-size-body);
/* Animation easing tokens */
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-keyboard: cubic-bezier(0.38, 0.7, 0.125, 1); /* approximates the iOS soft-keyboard slide curve */
/* Soft-keyboard inset (px). Runtime value driven by _wireKeyboardInset() in
js/shared.js from visualViewport — height of the on-screen keyboard, or 0
when hidden / on desktop. Consumed by .modal-overlay + .modal so a focused
field is always lifted clear of the keyboard. See js/shared.js for why. */
--kb-inset: 0px;
/* Animation duration tokens (orion_motion). The companion to the easing
tokens above; the Motion Library primitives reference these by name so
js/animations.js ANIMATION_REGISTRY durations stay parity-checkable. */
--dur-micro: 120ms; /* press / tactile give */
--dur-enter: 220ms; /* card / list entrance */
--dur-feedback: 250ms; /* pop / pulse / value bump */
--dur-transition: 300ms; /* tab / view swap */
--dur-celebrate: 450ms; /* success */
--dur-swipe: 500ms; /* full-panel push / pop (matches Telegram iOS) */
}
/* Font size tokens - mobile defaults */
@media (max-width: 767px) {
:root {
--font-size-heading: 1.1rem;
--font-size-subheading: 0.7rem;
--font-size-body: 0.85rem;
--font-size-label: 0.78rem;
--font-size-small: 0.68rem;
/* Messenger bubble text — half a step above mobile body (0.85rem) so chat
reads easier on a phone without making bubbles chunky or fitting less. */
--font-size-msgr: 0.9rem;
}
}
/* Prevent iOS Safari/Chrome auto-zoom on input focus (requires font-size ≥ 16px).
!important is needed because many module-scoped selectors (e.g.
#tab-settings .form-group input) have higher specificity and would otherwise
pull font-size back down to var(--font-size-body) ≈ 13.6px on mobile. */
@media (max-width: 767px) {
input, select, textarea {
font-size: 16px !important;
}
}
/* ═══ 2. TYPOGRAPHY & FONT SCALE ═══ */
/* Typography utility classes */
.text-heading { font-size: var(--font-size-heading) !important; }
.text-subheading { font-size: var(--font-size-subheading) !important; }
.text-body { font-size: var(--font-size-body) !important; }
.text-label { font-size: var(--font-size-label) !important; }
.text-small { font-size: var(--font-size-small) !important; }
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Paint the root canvas itself (not just ) so the html element behind
the body is the theme bg, never the UA default. Covers the navigation gap and
the first pre-body-paint frame, where body's background hasn't drawn yet. */
html {
background-color: var(--color-bg);
}
body {
font-family: var(--font-family);
background-color: var(--color-bg);
color: var(--color-text);
min-height: 100vh; /* fallback for browsers without dvh support */
min-height: 100dvh; /* fits the current visible viewport on mobile */
display: flex;
flex-direction: column;
}
/* ═══ 3. LAYOUT (grid, flex, containers) ═══ */
/* App Shell */
.app-container {
margin: 0 auto;
padding: 16px;
width: 100%;
min-width: 0; /* flex item: prevent expanding past viewport width */
flex: 1;
display: flex;
flex-direction: column;
position: relative;
}
/* Header */
.app-header {
text-align: left;
padding: 24px 0 16px;
border: none;
}
.app-header .logo {
font-size: var(--font-size-heading);
font-weight: 700;
color: var(--color-primary);
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 5px;
}
.org-logo-img {
height: 54px;
width: auto;
max-width: 210px;
object-fit: contain;
flex-shrink: 0;
}
#orgLogoName {
color: var(--color-title-color);
font-family: var(--color-title-font);
}
.app-header .logo small {
display: block;
font-size: var(--font-size-subheading);
font-weight: 400;
color: var(--color-text-light);
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 4px;
}
/* Navigation bar */
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
margin-bottom: 16px;
border: none;
}
.nav-bar .user-info {
font-size: var(--font-size-body);
color: var(--color-text-light);
}
.nav-bar .nav-links {
display: flex;
align-items: center;
gap: 12px;
}
.nav-bar .nav-links a {
font-size: var(--font-size-body);
color: var(--color-primary);
text-decoration: none;
}
.nav-bar .nav-links a:hover {
text-decoration: underline;
}
/* Hide desktop inline links - hamburger menu used at all sizes */
.nav-bar .nav-links > a {
display: none;
}
.nav-bar .nav-links > .view-toggle {
display: none;
}
/* View Toggle */
.view-toggle {
display: flex;
background: rgba(107, 76, 138, 0.1);
border-radius: 20px;
padding: 3px;
gap: 2px;
font-size: var(--font-size-label);
}
.view-toggle a,
.view-toggle span {
font-size: inherit;
}
.view-toggle-btn {
padding: 5px 12px;
border: none;
border-radius: 18px;
background: transparent;
color: var(--color-text-light);
font-size: inherit;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.4;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.view-toggle-btn:hover {
background: rgba(107, 76, 138, 0.12);
color: var(--color-primary);
text-decoration: none;
}
.view-toggle-btn.active {
background: var(--color-primary);
color: white;
cursor: default;
}
.view-toggle-btn.active:hover {
background: var(--color-primary);
color: white;
}
/* ═══ 4. COMPONENTS (buttons, badges, cards, modals, forms, alerts) ═══ */
/* Cards */
.card {
background: var(--color-card);
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
box-shadow: var(--color-shadow);
border: 1px solid var(--color-border);
}
.card h2 {
font-size: var(--font-size-heading);
margin-bottom: 16px;
color: var(--color-primary-dark);
}
/* Forms */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: var(--font-size-label);
font-weight: 600;
color: var(--color-text);
margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: var(--font-size-body);
background: var(--color-card);
color: var(--color-text);
transition: border-color 0.2s;
}
.form-group textarea {
resize: none;
overflow-y: auto;
}
/* Date/time inputs: force them to respect width:100% on iOS.
WebKit's native date/time picker chrome sets an intrinsic min-width
that overrides width:100%, causing overflow on narrow screens. */
input[type="date"],
input[type="time"] {
min-width: 0;
max-width: 100%;
}
/* Hide native number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.form-group select {
padding-right: 36px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
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='%236B6B6B' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
cursor: pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(107, 76, 138, 0.15);
}
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.radio-group {
display: flex;
gap: 16px;
padding: 8px 0;
}
.radio-label {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-body);
cursor: pointer;
color: var(--color-text);
}
/* Global: constrain all checkboxes/radios - Safari iOS ignores flex sizing without this */
input[type="checkbox"],
input[type="radio"] {
width: 16px;
height: 16px;
min-width: 16px;
min-height: 16px;
flex-shrink: 0;
accent-color: var(--color-primary);
margin: 0;
vertical-align: middle;
cursor: pointer;
}
.radio-label input[type="radio"] {
accent-color: var(--color-primary);
width: 16px;
height: 16px;
margin: 0;
vertical-align: middle;
cursor: pointer;
}
/* Announcement audience pill selector */
.ann-audience-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 4px 0;
}
.ann-pill {
padding: 5px 14px;
border-radius: 20px;
border: 1.5px solid var(--color-border);
background: var(--color-card);
color: var(--color-text-light);
font-size: var(--font-size-label);
cursor: pointer;
transition: all 0.15s ease;
}
.ann-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ann-pill.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* Document body formatting toolbar */
.doc-format-toolbar {
display: flex;
align-items: center;
gap: 2px;
padding: 5px 8px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-bottom: none;
border-radius: 8px 8px 0 0;
}
.doc-format-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
min-width: 30px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
color: var(--color-text);
font-size: var(--font-size-small);
line-height: 1;
transition: background 0.12s;
}
.doc-format-btn:hover { background: var(--color-bg); }
.doc-format-btn-italic { font-style: italic; }
.doc-format-divider {
width: 1px;
height: 16px;
background: var(--color-border);
margin: 0 4px;
}
.doc-format-toolbar + textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Message/Document type toggle pill buttons */
.msg-type-btn {
padding: 5px 14px;
border-radius: 20px;
border: 1.5px solid var(--color-border);
background: transparent;
color: var(--color-text-light);
font-size: var(--font-size-body);
cursor: pointer;
transition: all 0.15s ease;
}
.msg-type-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.msg-type-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* Announcement segmented control */
.ann-seg-control {
display: flex;
border: 1.5px solid var(--color-border);
border-radius: 8px;
overflow: hidden;
}
.ann-seg {
flex: 1;
padding: 7px 6px;
border: none;
background: var(--color-card);
color: var(--color-text-light);
font-size: var(--font-size-label);
cursor: pointer;
transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
text-align: center;
}
.ann-seg:not(:last-child) { border-right: 1.5px solid var(--color-border); }
.ann-seg:hover { background: var(--color-bg); }
.ann-seg.active {
background: var(--color-primary);
color: #fff;
}
/* Mobile touch target — desktop padding (7px) yields ~28px height; thumb taps need 44px. */
@media (max-width: 767px) {
.ann-seg { min-height: 44px; }
}
.form-group input::placeholder {
color: #B0A0C0;
}
.form-group .hint {
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-top: 4px;
}
/* Password field with show/hide toggle */
.password-field-wrap {
position: relative;
display: flex;
align-items: stretch;
}
.password-field-wrap input {
flex: 1;
padding-right: 44px !important;
}
.pw-toggle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 42px;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--color-text-light);
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 8px 8px 0;
transition: color 0.15s;
}
.pw-toggle:hover {
color: var(--color-text);
}
.pw-toggle svg {
width: 18px;
height: 18px;
pointer-events: none;
}
/* Info Icon - small filled circle with italic i, click to open info modal */
.info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
background: #9baabf;
color: #fff;
font-size: 9px; /* fixed - pixel-precise 15px circle, must not scale with font preset */
font-weight: 800;
font-style: italic;
font-family: Georgia, 'Times New Roman', serif;
cursor: pointer;
margin-left: 4px;
flex-shrink: 0;
user-select: none;
vertical-align: middle;
position: relative;
top: -1px;
transition: background 0.15s;
line-height: 1;
}
.info-icon:hover {
background: var(--color-primary);
}
/* Student Profile Photos */
.student-photo-thumb {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.student-photo-placeholder {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.student-photo-section {
text-align: center;
margin-bottom: 16px;
}
img.student-photo-large,
.student-photo-large img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto 8px;
}
.student-photo-placeholder-lg {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
margin: 0 auto;
}
/* Profile photo in detail/edit modals - 128px, no border */
.modal-profile-photo img {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto 8px;
}
.modal-profile-photo .student-photo-placeholder-lg {
width: 128px;
height: 128px;
font-size: 2.4rem;
margin-bottom: 8px;
}
.student-photo-upload-btn {
cursor: pointer;
font-size: 0.8rem !important;
}
/* Settings School List */
.settings-school-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
}
.settings-school-item:last-child {
border-bottom: none;
}
.school-item-actions {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.school-item .school-name {
font-size: var(--font-size-body);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.school-item .btn {
font-size: var(--font-size-label);
padding: 5px 12px;
}
/* Settings tab - compact sizing */
#tab-settings .card h2 {
font-size: var(--font-size-body);
margin-bottom: 10px;
}
#tab-settings .card > p.text-muted {
font-size: var(--font-size-label);
}
#tab-settings .form-group label {
font-size: var(--font-size-label);
}
#tab-settings .form-group select,
#tab-settings .form-group input {
font-size: var(--font-size-body);
padding: 9px 12px;
}
#tab-settings .btn {
font-size: var(--font-size-label);
padding: 9px 18px;
}
#tab-settings .btn.btn-small {
font-size: var(--font-size-label);
padding: 5px 12px;
}
/* History tab - compact Load More */
#tab-history .btn {
font-size: var(--font-size-label);
padding: 9px 18px;
}
/* Flaticon icons - ensure vertical centering inside any container */
.fi {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: var(--font-size-body);
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
text-decoration: none;
width: 100%;
}
.btn:active {
transform: scale(0.98);
}
.btn-primary {
background-color: var(--color-primary);
color: white;
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
transform: translateY(-1px);
}
.btn-primary:disabled {
background-color: var(--color-primary-light);
opacity: 0.6;
cursor: not-allowed;
}
.btn-secondary {
background-color: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.btn-secondary:hover {
background-color: rgba(107, 76, 138, 0.05);
}
.btn-secondary:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-danger {
background-color: var(--color-error);
color: white;
}
.btn-danger:hover {
background-color: #A93226;
}
.btn-ghost-danger {
background-color: transparent;
color: var(--color-error);
border: none;
padding-left: 8px;
padding-right: 8px;
}
.btn-ghost-danger:hover {
background-color: rgba(var(--color-error-rgb, 180, 50, 50), 0.08);
}
.btn-success {
background-color: var(--color-success);
color: #fff;
}
.btn-success:hover {
filter: brightness(1.15);
}
.btn-small {
padding: 10px 16px;
font-size: var(--font-size-body);
width: auto;
}
.btn-group {
display: flex;
gap: 8px;
margin-top: 16px;
}
.btn-group .btn {
flex: 1;
}
.btn-group--wrap {
flex-wrap: wrap;
}
.btn-group--wrap .btn {
flex: 1 1 calc(50% - 4px);
}
/* Links */
.text-link {
color: var(--color-primary);
text-decoration: none;
font-size: var(--font-size-body);
text-align: center;
display: block;
margin-top: 12px;
}
.text-link:hover {
text-decoration: underline;
}
/* Alerts */
.alert {
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 16px;
font-size: var(--font-size-body);
display: none;
}
.alert.show {
display: block;
}
.alert-error {
background-color: #FDEDEC;
color: var(--color-error);
border: 1px solid #F5C6CB;
}
.alert-info {
background-color: #F0E8F7;
color: var(--color-primary-dark);
border: 1px solid var(--color-border);
}
/* QR Code Display */
.qr-container {
text-align: center;
padding: 24px;
}
.qr-container canvas,
.qr-container img {
max-width: 280px;
width: 100%;
height: auto;
border-radius: 12px;
}
.qr-timer {
margin-top: 12px;
font-size: var(--font-size-body);
color: var(--color-text-light);
}
.qr-timer .countdown {
font-weight: 700;
color: var(--color-primary);
font-size: var(--font-size-heading);
}
/* Scanner result */
.scan-result {
text-align: center;
padding: 24px;
border-radius: 12px;
margin-top: 16px;
display: none;
}
.scan-result.show {
display: block;
}
.scan-result.valid {
background-color: #E8F5E9;
border: 2px solid var(--color-success);
}
.scan-result.invalid {
background-color: #FDEDEC;
border: 2px solid var(--color-error);
}
.scan-result .result-icon {
font-size: 3rem;
margin-bottom: 12px;
}
.scan-result .parent-name {
font-size: var(--font-size-heading);
font-weight: 700;
margin-bottom: 8px;
}
.scan-result .student-list {
font-size: var(--font-size-body);
color: var(--color-text-light);
}
/* Student cards */
.student-card {
display: flex;
align-items: center;
padding: 12px;
background: var(--color-bg);
border-radius: 8px;
margin-bottom: 8px;
}
.student-card .student-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary-light);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--font-size-body);
margin-right: 12px;
flex-shrink: 0;
}
.student-card .student-info h3 {
font-size: var(--font-size-body);
margin-bottom: 2px;
}
.student-card .student-info p {
font-size: var(--font-size-label);
color: var(--color-text-light);
}
/* Admin tables */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-body);
}
.data-table-fixed {
table-layout: fixed;
}
.data-table th,
.data-table td {
padding: 10px 8px;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.data-table th:last-child,
.data-table td:last-child {
padding-right: 16px;
}
.data-table .btn.btn-small {
padding: 3px 10px;
font-size: var(--font-size-label);
}
.data-table th {
font-weight: 600;
color: var(--color-primary-dark);
background: var(--color-bg);
position: sticky;
top: 0;
}
.data-table tr:hover td {
background-color: rgba(107, 76, 138, 0.03);
}
/* Vendor Tagging (admin-manage-enrichments) */
.vt-list { border-top: 1px solid var(--color-border); }
.vt-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.vt-row-label { min-width: 180px; font-weight: 500; }
.vt-row-vendors { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vt-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 12px;
border-radius: 999px;
background: var(--color-primary);
color: #fff;
font-size: var(--font-size-small);
}
.vt-pill-remove {
background: none;
border: none;
color: rgba(255,255,255,0.75);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
}
.vt-pill-remove:hover { color: #fff; }
.vt-add-select {
height: 28px;
font-size: var(--font-size-small);
padding: 0 8px;
border-radius: 999px;
border: 1.5px dashed var(--color-border);
background: transparent;
color: var(--color-text-light);
cursor: pointer;
}
/* Sortable / filterable table headers */
.th-sortable {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.th-sortable:hover { color: var(--color-primary); }
.th-sort-arrow {
font-size: var(--font-size-label);
margin-left: 3px;
color: var(--color-text-light);
vertical-align: middle;
}
.th-sort-arrow.active { color: var(--color-primary); }
.th-filterable {
cursor: pointer;
user-select: none;
font-size: var(--font-size-body);
margin-left: 4px;
color: var(--color-text-light);
padding: 1px 3px;
border-radius: 3px;
vertical-align: middle;
}
.th-filterable:hover { color: var(--color-primary); }
.th-filterable.active {
color: var(--color-primary);
font-weight: 700;
background: rgba(107, 76, 138, 0.1);
}
/* Filter dropdown */
.table-filter-dropdown {
position: fixed;
background: var(--color-card, #fff);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
z-index: 2000;
min-width: 130px;
padding: 4px 0;
}
.table-filter-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
cursor: pointer;
font-size: var(--font-size-body);
color: var(--color-text);
}
.table-filter-option:hover { background: var(--color-bg); }
.table-filter-option.selected { color: var(--color-primary); font-weight: 600; }
.filter-dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: 2px solid var(--color-text-light);
flex-shrink: 0;
}
.table-filter-option.selected .filter-dot {
border-color: var(--color-primary);
background: var(--color-primary);
}
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 769px) {
.table-container {
overflow-x: hidden;
}
}
/* Search bar */
.search-bar {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.search-bar input {
flex: 1;
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: var(--font-size-body);
}
/* Tabs */
.tabs {
display: none;
flex-wrap: wrap;
border-bottom: 2px solid var(--color-border);
margin-bottom: 16px;
gap: 0;
}
.tabs .tab {
padding: 8px 14px;
font-size: var(--font-size-body);
font-weight: 600;
color: var(--color-text-light);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
white-space: nowrap;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.tabs .tab.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Badge */
.badge {
display: inline-flex;
align-items: center;
padding: 3px 8px 2px; /* asymmetric: +1px top compensates for cap-height sitting high in em square */
border-radius: 12px;
font-size: var(--font-size-small);
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
.badge-success {
background: rgba(30, 107, 61, 0.12);
color: var(--color-success);
}
.badge-warning {
background: var(--color-warning-bg);
color: var(--color-warning);
}
.badge-error {
background: rgba(192, 57, 43, 0.1);
color: var(--color-error);
}
.badge-muted {
background: rgba(107, 107, 107, 0.12);
color: var(--color-text-light);
}
.badge-trial {
background: rgba(222, 197, 216, 0.35);
color: #6B3F62;
}
[data-theme="dark"] .badge-trial {
background: rgba(222, 197, 216, 0.18);
color: #E8C4DF;
}
.status-edit-btn {
background: none;
border: none;
padding: 2px 4px;
color: var(--color-text-light);
cursor: pointer;
font-size: var(--font-size-small);
line-height: 1;
border-radius: 4px;
}
.status-edit-btn:hover { color: var(--color-primary); background: var(--color-primary-soft); }
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 16px;
/* Reserve the soft-keyboard height at the bottom so the flex-centred modal
re-centres in the band ABOVE the keyboard (any field near the modal's
bottom would otherwise sit under the keyboard on the messenger page,
where keyboard resize mode is "none", and in mobile web Safari, where
the layout viewport never shrinks). --kb-inset is 0 at rest / on desktop,
so this is a no-op there. */
padding-bottom: calc(16px + var(--kb-inset, 0px));
transition: padding-bottom 0.25s var(--ease-keyboard);
}
.modal-overlay.show {
display: flex;
}
/* Feedback modals must float above all other modals */
#genericSuccessModal,
#customErrorModal,
#customConfirmModal {
z-index: 1100;
}
.modal {
background: var(--color-card);
border-radius: 12px;
padding: 24px;
width: 100%;
max-width: 700px;
/* Subtract the soft-keyboard height so a tall modal shrinks and scrolls its
own content (overflow-y) above the keyboard rather than overflowing the
visible band. --kb-inset is 0 at rest, so this stays 90vh on desktop. */
max-height: calc(90vh - var(--kb-inset, 0px));
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
transition: max-height 0.25s var(--ease-keyboard);
}
/* Hero-image modal - image bleeds edge-to-edge at top */
.modal-hero {
padding: 0;
position: relative;
}
.modal-hero .modal-close {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255,255,255,0.88);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
font-size: 18px; /* fixed - circle is fixed-size, must not scale with font preset */
line-height: 1;
float: none;
}
.modal-hero-content {
padding: 20px 24px 24px;
}
/* Clip image at modal top corners; remove side rounding & bottom margin */
.modal-hero .enrich-carousel {
border-radius: 12px 12px 0 0;
margin-bottom: 0;
overflow: hidden;
}
.modal-hero .enrich-carousel-single {
border-radius: 12px 12px 0 0;
margin-bottom: 0;
}
.modal h2 {
font-size: var(--font-size-heading);
margin-bottom: 16px;
color: var(--color-primary-dark);
}
.modal-close {
float: right;
background: none;
border: none;
font-size: var(--font-size-heading);
cursor: pointer;
color: var(--color-text-light);
line-height: 1;
}
/* Loading spinner. linear (not ease) is correct here: a continuously rotating
indicator must spin at constant speed, or it visibly pulses each revolution. */
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
}
.spinner-dark {
border-color: rgba(107, 76, 138, 0.2);
border-top-color: var(--color-primary);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ── Ambient loaders ──────────────────────────────────────────────────────
A waiting state should breathe, never freeze. These are AMBIENT (declarative,
looping) indicators - the counterpart to the played Motion Library primitives
in Section 5. The global prefers-reduced-motion block freezes them to a
single static frame, so reduced-motion users get a calm placeholder.
.loading-text - the canonical breathing "Loading…" placeholder. Replaces the
dead grey Loading...
pattern.
.skeleton - shows the SHAPE of content that is still loading; compose
with a sized box or the .skeleton-circle / .skeleton-text
shape helpers. */
.loading-text {
color: var(--color-text-light);
animation: loadingPulse 1.4s var(--ease-out) infinite;
}
@keyframes loadingPulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
.skeleton {
background: linear-gradient(90deg,
var(--color-border) 25%,
var(--color-card) 50%,
var(--color-border) 75%);
background-size: 200% 100%;
animation: skeletonShimmer 1.4s ease-in-out infinite;
border-radius: 6px;
}
@keyframes skeletonShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-circle { border-radius: 50%; }
.skeleton-text { height: 0.72em; border-radius: 4px; }
/* View As banner - sticky, in normal document flow, full page width.
Sits above .app-container so it pushes the entire page down naturally.
Pins below the safe-area inset when scrolling so the Exit button always
stays clear of the status bar / notch. (It used to pin at top:0 = behind the
status bar, sliding the bar out of reach on native edge-to-edge builds.) */
/* Sticky thead inside a scrollable modal */
.sticky-thead th {
position: sticky;
top: 0;
background: var(--color-card);
z-index: 1;
}
.view-as-bar {
position: sticky;
top: env(safe-area-inset-top, 0px);
z-index: 975; /* above nav menu (950) but below modals (1000+) */
display: flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: #fff3cd;
border-bottom: 2px solid #ffc107;
gap: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.view-as-label {
font-size: var(--font-size-body);
color: #856404;
}
[data-theme="dark"] .view-as-bar {
background: #3a2e00;
border-bottom-color: #ffc107;
}
[data-theme="dark"] .view-as-label { color: #ffd966; }
/* contentInset:"always" builds: the OS already insets the webview below the
notch (body padding-top is suppressed to 0), so pin at the webview top.
env() would push the bar down by a phantom inset on those builds. */
html.cap-inset-always .view-as-bar { top: 0; }
/* Greeting emoji spin animation */
.greeting-emoji {
display: inline-block;
margin-left: 2px;
}
@keyframes greetingEmojiSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(720deg); }
}
.greeting-emoji--spin {
animation: greetingEmojiSpin 1.1s cubic-bezier(0.34, 1.3, 0.64, 1);
}
/* Event banner - Announcements tab */
.event-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 10px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-left-width: 3px;
cursor: pointer;
transition: background 0.15s;
}
.event-banner:hover { background: var(--color-border); }
.event-banner-live { border-left-color: var(--color-error); }
.event-banner-upcoming { border-left-color: var(--color-primary); }
.event-banner-badge {
font-size: var(--font-size-small);
font-weight: 700;
letter-spacing: 0.07em;
padding: 3px 9px;
border-radius: 20px;
flex-shrink: 0;
white-space: nowrap;
}
.event-banner-live .event-banner-badge {
background: #fdecea;
color: var(--color-error);
}
.event-banner-upcoming .event-banner-badge {
background: #ede6f5;
color: var(--color-primary);
}
.event-banner-badge-live { animation: livePulse 1.5s ease-in-out infinite; }
.event-banner-name {
font-weight: 600;
font-size: var(--font-size-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-text);
}
.event-banner-sub {
font-size: var(--font-size-label);
color: var(--color-text-light);
margin-top: 2px;
}
@keyframes livePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* ═══ 5. FEATURES (Announcements · Enrichments · HR · TA · Messenger · Broadcast) ═══ */
/* Announcements */
.announcement-card {
padding: 16px;
background: var(--color-bg);
border-radius: 8px;
margin-bottom: 12px;
border-left: 3px solid var(--color-primary);
}
.announcement-card.unread {
border-left-color: var(--color-accent);
background: #FFFBF0;
}
.announcement-card .announcement-title {
font-weight: 600;
margin-bottom: 4px;
}
.announcement-card .announcement-date {
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-bottom: 8px;
}
.announcement-card .announcement-body {
font-size: var(--font-size-body);
line-height: 1.5;
}
.announcement-card .announcement-preview {
font-size: var(--font-size-body);
color: var(--color-text-light);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 4px;
line-height: 1.4;
}
.announcement-card .announcement-thumbs {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.announcement-card .announcement-thumbs img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}
.announcement-card.clickable {
cursor: pointer;
transition: background 0.15s;
}
.announcement-card.clickable:hover {
background: rgba(107, 76, 138, 0.04);
}
/* Announcement detail modal */
.ann-detail-body {
font-size: var(--font-size-body);
line-height: 1.7;
white-space: pre-wrap;
margin: 16px 0;
}
.ann-detail-images {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.ann-detail-images img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
transition: opacity 0.15s;
}
.ann-detail-images img:hover {
opacity: 0.8;
}
.ann-detail-image-wrap {
position: relative;
display: inline-block;
}
.ann-detail-image-wrap img {
display: block;
}
.ann-detail-image-delete {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
font-size: 30px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.ann-detail-title {
font-size: var(--font-size-heading);
font-weight: 700;
margin-bottom: 4px;
}
.ann-detail-byline {
font-size: var(--font-size-label);
color: var(--color-text-light);
margin-bottom: 16px;
}
.ann-detail-meta {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
}
.ann-detail-meta-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 6px 0;
font-size: var(--font-size-body);
}
.ann-detail-meta-label {
font-weight: 600;
color: var(--color-text-light);
flex-shrink: 0;
}
.ann-detail-delete {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
text-align: center;
}
.ann-reads-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-bg-subtle, #f5f5f5);
font-size: var(--font-size-label);
color: var(--color-text);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
user-select: none;
}
.ann-reads-chip:hover {
background: rgba(107, 76, 138, 0.1);
border-color: var(--color-primary);
color: var(--color-primary);
}
[data-theme="dark"] .ann-reads-chip {
background: #2a2a2a;
border-color: var(--color-border);
color: var(--color-text);
}
/* Announcement image upload previews */
.ann-image-preview {
display: inline-block;
position: relative;
margin: 4px;
}
.ann-image-thumb {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}
.ann-image-remove {
position: absolute;
top: -8px;
right: -8px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--color-error);
color: #fff;
border: none;
font-size: 18px;
line-height: 28px;
text-align: center;
cursor: pointer;
padding: 0;
}
.enr-image-thumb {
width: 80px;
height: 80px;
cursor: pointer;
}
/* Image lightbox */
.image-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
z-index: 99999 !important;
align-items: center;
justify-content: center;
cursor: pointer;
}
.image-lightbox.show {
display: flex;
/* MA6 — open: backdrop fades in (staging) while the photo rises from a
slightly smaller scale and settles (follow-through). The animation plays
the instant .show flips display:none -> flex. */
animation: lightboxBackdropIn 200ms var(--ease-out);
}
.image-lightbox.show img {
animation: lightboxImgIn 260ms var(--ease-spring);
}
/* Shared-element FLIP open: image-crop.js drives the backdrop's background-color
inline so it fades in over the SAME duration + easing as the grow (and only the
backdrop dims — the photo grows without also fading). Suppress the CSS opacity
keyframe so the two don't compound. Must !important-beat .show's animation. */
.image-lightbox.lb-bd-js { animation: none !important; }
/* MA6 — close: JS adds .lb-closing, the reverse animation plays, then
closeLightbox() removes .show after a setTimeout (image-crop.js). These
rules must follow .show in source order so the close animation wins. */
.image-lightbox.lb-closing {
animation: lightboxBackdropOut 160ms var(--ease-out) forwards;
}
.image-lightbox.lb-closing img {
animation: lightboxImgOut 160ms var(--ease-out) forwards;
}
@keyframes lightboxBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes lightboxBackdropOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Resting transform is translate(0,0) scale(1) (see .image-lightbox img); the
keyframes land exactly there so the photo hands back to its zoom/pan transform
without a jump once the open animation ends. */
@keyframes lightboxImgIn {
from { transform: translate(0,0) scale(0.92); }
to { transform: translate(0,0) scale(1); }
}
@keyframes lightboxImgOut {
from { transform: translate(0,0) scale(1); }
to { transform: translate(0,0) scale(0.96); }
}
.image-lightbox img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
transform-origin: center center;
transform: translate(0,0) scale(1);
touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
/* Suppress iOS's native long-press callout — its "Save to Photos" silently
fails for this element (the -webkit-user-* + will-change styling breaks
WKWebView image saving). The lightbox Save button replaces it. */
-webkit-touch-callout: none;
cursor: zoom-in;
will-change: transform;
}
.image-lightbox img.lb-zoomed { cursor: zoom-out; }
.image-lightbox img.lb-grabbing { cursor: grabbing; }
.image-lightbox img.lb-animating { transition: transform 0.2s ease-out; }
/* Shared-element FLIP (expand-from-origin / shrink-back, driven by image-crop.js;
the "expand-origin" motion primitive). While the photo flies to/from its origin
thumbnail, suppress the centre-scale open/close keyframes so the JS-driven
inline transform owns the geometry. */
.image-lightbox img.lb-flip { animation: none !important; }
/* On the close FLIP the chrome fades out of the way (the backdrop dims via an
inline transition) so only the shrinking photo and the revealed page remain.
Reuses the .lb-dragging transition on .image-lightbox-control / -counter. */
.image-lightbox.lb-flip-out .image-lightbox-control,
.image-lightbox.lb-flip-out .image-lightbox-counter {
opacity: 0;
pointer-events: none;
}
.image-lightbox-close {
position: absolute;
/* The lightbox is position:fixed against the viewport, so on notched iOS the
top sits under the status bar / Dynamic Island. Inset below it. env() is 0
on desktop/web (no-op). Mirrors the messenger-header pattern. */
top: calc(env(safe-area-inset-top, 0px) + 14px);
right: 20px;
color: white;
font-size: 2rem;
cursor: pointer;
background: rgba(255,255,255,0.15);
border: none;
border-radius: 6px;
/* Asymmetric vertical padding (3 top / 5 bottom, same 8px total height as
4/4) nudges the × glyph 1px up within the square without resizing the box —
the glyph's ink sits slightly low in its line box. */
padding: 3px 10px 5px;
line-height: 1;
z-index: 2001;
}
/* contentInset:"always" builds: the OS already insets the webview below the
notch, so env() would double it — keep the plain 14px there. */
html.cap-inset-always .image-lightbox-close { top: 14px; }
/* Save button — bottom-right, clear of the iOS home indicator (safe-area). */
.image-lightbox-save {
position: absolute;
bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
right: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 38px;
color: #fff;
cursor: pointer;
background: rgba(255,255,255,0.15);
border: none;
border-radius: 6px;
z-index: 2001;
transition: background 0.15s, opacity 0.15s;
}
html.cap-inset-always .image-lightbox-save { bottom: 16px; }
.image-lightbox-save:hover { background: rgba(255,255,255,0.32); }
.image-lightbox-save.lb-saving { opacity: 0.45; pointer-events: none; }
/* Brief green pulse on the Save button the moment a save lands. */
.image-lightbox-save.lb-saved-flash { background: rgba(74,222,128,0.9); }
/* "Saved" confirmation toast — floats above the Save button, fades in/out. */
.image-lightbox-toast {
position: absolute;
bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
left: 50%;
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 80vw;
background: rgba(18,18,18,0.86);
color: #fff;
font-size: var(--font-size-small);
line-height: 1;
padding: 10px 16px;
border-radius: 999px;
z-index: 2002;
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
html.cap-inset-always .image-lightbox-toast { bottom: 78px; }
.image-lightbox-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.image-lightbox-toast svg { width: 17px; height: 17px; color: #4ade80; flex-shrink: 0; }
/* Lightbox carousel - prev/next arrows */
.image-lightbox-prev,
.image-lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.18);
border: none;
color: #fff;
font-size: 2.8rem;
padding: 6px 14px;
cursor: pointer;
border-radius: 6px;
z-index: 2001;
line-height: 1;
transition: background 0.15s;
}
.image-lightbox-prev { left: 16px; }
.image-lightbox-next { right: 16px; }
.image-lightbox-prev:hover,
.image-lightbox-next:hover { background: rgba(255,255,255,0.32); }
/* Lightbox carousel - counter */
.image-lightbox-counter {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.85);
font-size: var(--font-size-body);
pointer-events: none;
}
/* Flick-to-dismiss: a vertical drag on the photo (handled in image-crop.js)
closes the lightbox the way Telegram's media viewer does: the image tracks
the finger 1:1 while JS sets its transform + the backdrop alpha inline. Here
we only fade the chrome out of the way so the photo and the dimming backdrop
are all that remain during the gesture. The transition also fades the chrome
back in on a spring-back. */
.image-lightbox-close,
.image-lightbox-save,
.image-lightbox-prev,
.image-lightbox-next,
.image-lightbox-counter {
transition: opacity 0.15s ease, background 0.15s ease;
}
.image-lightbox.lb-dragging .image-lightbox-control,
.image-lightbox.lb-dragging .image-lightbox-counter {
opacity: 0;
pointer-events: none;
}
/* Cropper modal z-index (above other modals) */
#imageCropperModal { z-index: 99999 !important; }
@media (max-width: 480px) { #cropperContainer { height: 220px !important; } }
/* Utilities */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-light); }
.empty-state-text { color: var(--color-text-light); font-style: italic; font-size: var(--font-size-body); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }
/* =====================================================
Hamburger Menu (base styles - must be BEFORE media queries)
===================================================== */
.hamburger-btn {
display: block;
position: absolute;
top: 38px;
right: 16px;
z-index: 100;
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 6px;
transition: background 0.2s;
}
.hamburger-btn:hover {
background: rgba(107, 76, 138, 0.08);
}
.hamburger-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 20px;
height: 16px;
line-height: 0;
font-size: 0;
}
.hamburger-icon span {
display: block;
flex: 0 0 2px;
width: 100%;
height: 2px !important;
min-height: 2px;
max-height: 2px;
background: var(--color-primary);
transition: transform 0.3s, opacity 0.3s;
transform: translateZ(0);
will-change: transform;
}
.hamburger-btn.open .hamburger-icon {
justify-content: center;
}
.hamburger-btn.open .hamburger-icon span:nth-child(1) {
transform: rotate(45deg) translate(1px, 0);
}
.hamburger-btn.open .hamburger-icon span:nth-child(2) {
opacity: 0;
}
.hamburger-btn.open .hamburger-icon span:nth-child(3) {
transform: rotate(-45deg) translate(1px, 0);
}
/* Mobile menu backdrop */
.nav-menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 900;
}
.nav-menu-overlay.open {
display: block;
}
/* Mobile menu panel */
.nav-menu {
display: block;
background: var(--color-bg);
border: none;
border-radius: 8px;
box-shadow: none;
overflow: hidden;
transform: scaleY(0);
transform-origin: top center;
visibility: hidden;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
z-index: 950;
position: absolute;
right: 16px;
margin-top: 16px;
width: 60%;
max-width: 280px;
}
.nav-menu-profile {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 16px 12px;
border-bottom: 1px solid var(--color-border);
}
.nav-menu-profile-img {
width: 128px;
height: 128px;
border-radius: 50%;
object-fit: cover;
}
.nav-menu-profile-placeholder {
width: 128px;
height: 128px;
border-radius: 50%;
background: var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
}
.nav-menu-profile-name {
margin-top: 8px;
font-size: var(--font-size-body);
font-weight: 600;
color: var(--color-text);
}
.nav-menu.open {
transform: scaleY(1);
visibility: visible;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
max-height: 85vh;
overflow-y: auto;
border: 1px solid var(--color-border);
box-shadow: 0 4px 16px rgba(107, 76, 138, 0.15);
}
.nav-menu-section {
padding: 8px 16px;
border-bottom: 1px solid var(--color-border);
}
.nav-menu-section:last-child {
border-bottom: none;
}
.nav-menu-section a {
display: block;
padding: 10px 12px;
color: var(--color-text);
text-decoration: none;
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
border-radius: 8px;
transition: background 0.15s;
}
.nav-menu-section a:hover {
background: rgba(107, 76, 138, 0.06);
}
.nav-menu-tab {
display: flex;
align-items: center;
width: 100%;
padding: 10px 12px;
background: none;
border: none;
border-radius: 8px;
text-align: left;
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
color: var(--color-text);
text-decoration: none;
cursor: pointer;
transition: background 0.15s;
box-sizing: border-box;
}
.nav-menu-tab:hover {
background: rgba(107, 76, 138, 0.06);
}
.nav-menu-tab.active {
color: var(--color-primary);
background: rgba(107, 76, 138, 0.08);
font-weight: 600;
}
.nav-menu-section .view-toggle {
justify-content: center;
}
/* Hide empty mobile menu sections */
.nav-menu-section:empty {
display: none;
padding: 0;
border-bottom: none;
}
.nav-menu-section-label {
font-size: var(--font-size-subheading);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-text-light);
padding: 4px 12px 2px;
display: block;
}
.nav-menu-signout a {
display: block;
padding: 10px 12px;
color: var(--color-error);
text-decoration: none;
font-size: var(--font-size-body);
font-weight: 500;
border-radius: 8px;
transition: background 0.15s;
}
.nav-menu-signout a:hover {
background: rgba(192, 57, 43, 0.06);
}
/* Menu Order Settings */
.menu-order-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.menu-order-item:last-child {
border-bottom: none;
}
.menu-order-label {
font-size: 14px;
font-weight: 500;
color: var(--color-text);
}
.menu-order-btns {
display: flex;
gap: 6px;
}
/* Responsive - desktop enhancements */
@media (min-width: 1025px) {
.app-container {
padding: 24px 40px;
max-width: 1000px;
}
.card {
padding: 32px;
}
}
/* Phone-only compact styling */
@media (max-width: 767px) {
body {
font-size: var(--font-size-body);
}
.app-container {
padding: 0;
}
.hamburger-btn {
top: 22px;
right: 12px;
}
.app-header {
padding: 12px 12px 8px;
}
.app-header .logo {
font-size: var(--font-size-heading);
}
.app-header .logo small {
font-size: var(--font-size-subheading);
}
.nav-bar {
padding: 0 12px 6px;
margin-bottom: 8px;
}
.nav-bar .user-info {
font-size: var(--font-size-small);
}
.view-toggle {
font-size: var(--font-size-subheading);
}
.view-toggle-btn {
padding: 4px 10px;
}
.card {
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
box-shadow: none;
margin-bottom: 0;
border-bottom: 1px solid var(--color-border);
padding: 16px 12px;
}
.data-table {
font-size: var(--font-size-small);
}
.data-table th,
.data-table td {
padding: 8px 6px;
}
/* Users tab: collapse Role and Parent columns into name cell on mobile */
.user-col-role, .user-col-parent { display: none; }
.user-mobile-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
#tab-users .data-table td:last-child,
#tab-users .data-table th:last-child { padding-right: 8px; }
/* History tab: allow Details column to wrap rather than squish */
#tab-history .data-table td:last-child {
white-space: normal;
word-break: break-word;
min-width: 80px;
}
/* Detail rows: stack label + value on mobile when editing */
.detail-row {
flex-wrap: wrap;
}
.detail-edit-form {
width: 100%;
}
.modal {
padding: 20px 16px;
}
.modal-cf-sign {
padding: 0;
}
.modal-cf-sign .modal {
border-radius: 0;
max-height: 100svh;
}
.modal-hero {
padding: 0;
}
.modal-hero-content {
padding: 20px 16px 24px;
}
.modal-hero .enrich-carousel {
border-radius: 12px 12px 0 0;
}
.settings-school-item {
gap: 8px;
}
.settings-school-item .school-item-name {
font-size: var(--font-size-small);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.school-item .school-name {
font-size: var(--font-size-small);
}
.school-item .btn,
.school-item-actions .btn {
font-size: var(--font-size-small);
padding: 4px 8px;
}
#newSchoolName {
font-size: 0.75rem !important;
padding: 5px 8px !important;
}
/* Settings tab - mobile compact */
#tab-settings .card h2 {
font-size: var(--font-size-body);
margin-bottom: 8px;
}
#tab-settings .card > p.text-muted {
font-size: var(--font-size-subheading);
}
#tab-settings .form-group {
margin-bottom: 10px;
}
#tab-settings .form-group label {
font-size: var(--font-size-subheading);
margin-bottom: 4px;
}
#tab-settings .form-group select,
#tab-settings .form-group input {
font-size: var(--font-size-small);
padding: 7px 10px;
}
#tab-settings .btn {
font-size: var(--font-size-subheading);
padding: 7px 14px;
}
#tab-settings .btn.btn-small {
font-size: var(--font-size-small);
padding: 4px 8px;
}
/* History tab - mobile compact */
#tab-history .btn {
font-size: var(--font-size-small);
padding: 7px 14px;
}
}
/* Phone input group (country code + phone field) */
.phone-input-group {
display: flex;
gap: 8px;
align-items: stretch;
}
.phone-input-group .country-code-select {
width: 88px !important;
min-width: 88px;
max-width: 88px;
flex: 0 0 88px;
padding: 12px 28px 12px 14px;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: var(--font-size-body);
background: var(--color-card);
color: var(--color-text);
text-align: left;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
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='%236B6B6B' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.phone-input-group .country-code-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(107, 76, 138, 0.15);
}
.phone-input-group input[type="tel"] {
flex: 1 1 auto;
width: auto !important;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: var(--font-size-body);
background: var(--color-card);
color: var(--color-text);
}
.phone-input-group input[type="tel"]:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(107, 76, 138, 0.15);
}
/* Form row (side-by-side fields) */
.form-row {
display: flex;
gap: 12px;
}
.form-row .form-group {
flex: 1;
min-width: 0;
}
/* Badge info variant */
.badge-info {
background: rgba(107, 76, 138, 0.12);
color: var(--color-primary-dark);
}
/* Welcome card preview */
.welcome-card-preview {
text-align: center;
padding: 16px;
background: var(--color-bg);
border-radius: 8px;
min-height: 100px;
}
.welcome-card-preview img {
max-width: 100%;
border-radius: 8px;
box-shadow: var(--color-shadow);
}
/* Welcome card - Messenger conversation picker */
.card-conv-picker-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.card-conv-picker-header h2 { margin: 0; }
.card-conv-list {
max-height: 320px;
overflow-y: auto;
}
.card-conv-list--sending {
opacity: 0.5;
pointer-events: none;
}
.card-conv-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.card-conv-row:hover { background: var(--color-surface-alt); }
.card-conv-row-name {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
font-size: var(--font-size-body);
}
.card-conv-row-preview {
font-size: 12px;
color: var(--color-text-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-conv-wa-badge {
font-size: 10px;
background: #25D366;
color: #fff;
border-radius: 4px;
padding: 1px 5px;
line-height: 1.4;
flex-shrink: 0;
}
/* Parent detail modal */
.parent-detail-info {
background: var(--color-bg);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
gap: 16px;
border-bottom: 1px solid var(--color-border);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-weight: 600;
font-size: var(--font-size-label);
color: var(--color-text-light);
flex-shrink: 0;
}
.detail-value {
font-size: var(--font-size-body);
color: var(--color-text);
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
flex: 1;
}
.detail-value > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.detail-value a {
color: var(--color-primary);
}
.detail-edit-btn {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-light);
font-size: var(--font-size-label);
padding: 8px 10px;
border-radius: 4px;
transition: color 0.2s, background 0.2s;
}
.detail-edit-btn:hover {
color: var(--color-primary);
background: rgba(107, 76, 138, 0.08);
}
.detail-row:has(.detail-edit-btn):hover .detail-edit-btn {
color: var(--color-primary);
}
.detail-row.editing .detail-edit-btn {
display: none;
}
.detail-row.editing {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 8px;
align-items: center;
}
.detail-row.editing .detail-label {
grid-row: 1;
grid-column: 1;
}
.detail-row.editing .detail-edit-form {
grid-row: 1;
grid-column: 2;
justify-self: end;
}
.detail-row.editing .detail-value {
grid-row: 2;
grid-column: 1 / -1;
overflow: visible;
}
.detail-edit-form {
display: flex;
gap: 6px;
align-items: center;
flex-shrink: 0;
}
.detail-edit-input {
flex: 1;
min-width: 0;
max-width: 100%;
padding: 6px 10px;
border: 1px solid var(--color-primary);
border-radius: 6px;
font-size: var(--font-size-body);
outline: none;
box-shadow: 0 0 0 2px rgba(107, 76, 138, 0.15);
box-sizing: border-box;
}
select.detail-edit-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 28px;
background-color: var(--color-card);
color: var(--color-text);
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='%236B6B6B' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
cursor: pointer;
text-overflow: ellipsis;
}
/* Compact phone input inside detail edit modals */
.detail-value .country-code-select {
width: 64px !important;
min-width: 64px;
max-width: 64px;
flex: 0 0 64px;
padding: 6px 22px 6px 8px;
font-size: var(--font-size-body);
border: 1px solid var(--color-primary);
border-radius: 6px;
box-shadow: 0 0 0 2px rgba(107, 76, 138, 0.15);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-card);
color: var(--color-text);
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='%236B6B6B' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 6px center;
cursor: pointer;
}
.detail-edit-save,
.detail-edit-cancel {
background: none;
border: none;
cursor: pointer;
font-size: var(--font-size-body);
padding: 8px 10px;
border-radius: 4px;
line-height: 1;
}
.detail-edit-save {
color: var(--color-success);
}
.detail-edit-save:hover {
background: rgba(46, 139, 87, 0.1);
}
.detail-edit-cancel {
color: var(--color-error);
}
.detail-edit-cancel:hover {
background: rgba(192, 57, 43, 0.1);
}
/* Clickable table rows */
/* Users tab - filter bar always visible; badges only on mobile */
.users-filter-bar { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
@media (min-width: 768px) {
.user-mobile-badges { display: none; }
}
.data-table tr.clickable-row {
cursor: pointer;
}
.data-table tr.clickable-row:hover td {
background-color: rgba(107, 76, 138, 0.06);
}
/* Child list in detail modal */
.detail-child-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.detail-child-item:last-child {
border-bottom: none;
}
/* Modal success state */
.modal-success {
text-align: center;
padding: 32px 16px;
}
.modal-success .success-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #E8F5E9;
color: var(--color-success);
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
animation: successPop 0.4s ease-out;
}
.modal-success .success-message {
font-size: var(--font-size-heading);
font-weight: 600;
color: var(--color-success);
margin-bottom: 8px;
}
.modal-success .success-sub {
font-size: var(--font-size-body);
color: var(--color-text-light);
margin-bottom: 24px;
}
/* Ticket Cards */
.ticket-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--color-border);
}
.ticket-card:last-child {
border-bottom: none;
}
.ticket-card-info {
flex: 1;
min-width: 0;
}
.ticket-card-date {
font-weight: 600;
font-size: var(--font-size-body);
color: var(--color-text);
}
.ticket-card-count {
font-size: var(--font-size-label);
color: var(--color-text-light);
margin-top: 2px;
}
/* ============================================================
Enrichment Cards (parent browse)
============================================================ */
.enrichment-card {
background: var(--color-bg);
border-radius: 10px;
border: 1px solid var(--color-border);
margin-bottom: 12px;
overflow: hidden;
cursor: pointer;
transition: box-shadow 0.15s, border-color 0.15s;
}
.enrichment-card:hover {
box-shadow: 0 2px 8px rgba(107, 76, 138, 0.1);
border-color: var(--color-primary-light);
}
.enrichment-card-registered {
}
.enrichment-card-full {
opacity: 0.65;
}
.enrichment-card-img {
width: 100%;
height: 120px;
object-fit: cover;
}
.enrichment-card-body {
padding: 12px 14px;
}
.enrichment-card-price {
font-size: var(--font-size-label);
color: var(--color-text-light);
white-space: nowrap;
flex-shrink: 0;
}
.enrichment-card-layout {
display: flex;
align-items: stretch;
gap: 12px;
}
.enrichment-card-left {
flex: 1;
min-width: 0;
}
.enrichment-card-price-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
gap: 2px;
white-space: nowrap;
}
.enrichment-card-public-price {
text-decoration: line-through;
color: var(--color-text-light);
font-size: var(--font-size-small);
white-space: nowrap;
}
.price-calc-hint {
font-size: var(--font-size-label);
color: var(--color-text-light);
margin-top: 4px;
}
.enrichment-card-provider {
font-size: var(--font-size-label);
color: var(--color-text-light);
margin: 0 0 8px;
}
.enrichment-card-meta {
display: flex;
gap: 12px;
font-size: var(--font-size-label);
color: var(--color-text-light);
flex-wrap: wrap;
}
.badge-registered {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 12px;
font-size: var(--font-size-small);
font-weight: 600;
background: var(--color-primary);
color: #fff;
white-space: nowrap;
}
.badge-full {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: var(--font-size-small);
font-weight: 600;
background: var(--color-text-light);
color: #fff;
white-space: nowrap;
}
.badge-subsidy {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
border-radius: 12px;
font-size: var(--font-size-small);
font-weight: 600;
background: var(--color-primary);
color: #fff;
white-space: nowrap;
}
.subsidy-callout {
display: flex;
align-items: flex-start;
gap: 8px;
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
border-radius: 8px;
padding: 10px 14px;
margin-top: 12px;
margin-bottom: 14px;
font-size: var(--font-size-body);
color: var(--color-text);
line-height: 1.4;
}
/* ============================================================
Enrichment Image Carousel
============================================================ */
.enrich-carousel {
position: relative;
border-radius: 10px;
overflow: hidden;
margin-bottom: 16px;
background: var(--color-border);
}
.enrich-carousel-inner {
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.enrich-carousel-track {
display: flex;
transition: transform 0.3s ease;
will-change: transform;
}
.enrich-carousel-slide {
flex: 0 0 100%;
}
.enrich-carousel-slide img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
cursor: pointer;
}
.enrich-carousel-arrow {
position: absolute;
top: 92px; /* centred in 220px image: (220-36)/2 */
z-index: 10;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: var(--font-size-body);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s;
line-height: 1;
}
.enrich-carousel-arrow:hover { background: rgba(0, 0, 0, 0.6); }
.enrich-carousel-prev { left: 10px; }
.enrich-carousel-next { right: 10px; }
@media (max-width: 768px) {
.enrich-carousel-arrow { display: none; }
}
.enrich-carousel-dots {
display: flex;
justify-content: center;
gap: 6px;
padding: 8px 0 6px;
background: var(--color-card);
}
.enrich-carousel-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-border);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.15s, transform 0.15s;
}
.enrich-carousel-dot.active {
background: var(--color-primary);
transform: scale(1.3);
}
.enrich-carousel-single {
width: 100%;
max-height: 220px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 16px;
cursor: pointer;
display: block;
}
/* ============================================================
Planner Grid (Mon-Fri weekly view)
============================================================ */
.planner-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 12px;
}
.planner-day-column {
display: flex;
flex-direction: column;
gap: 6px;
}
.planner-time-grid {
position: relative;
overflow: visible;
}
.planner-day-header {
font-weight: 700;
font-size: var(--font-size-body);
text-align: center;
padding: 6px 0;
background: var(--color-primary);
color: #fff;
border-radius: 6px;
}
.planner-empty {
font-size: var(--font-size-small);
color: var(--color-text-light);
text-align: center;
padding: 16px 4px;
}
.planner-slot {
border-radius: 6px;
padding: 8px;
font-size: var(--font-size-label);
border: 1px dashed var(--color-border);
background: var(--color-bg);
cursor: pointer;
overflow: hidden;
transition: box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.planner-slot:hover {
box-shadow: 0 2px 8px rgba(107, 76, 138, 0.15);
transform: translateY(-1px);
}
.planner-slot:active {
transform: translateY(0);
}
.planner-slot-registered {
border: 1px solid var(--color-primary);
background: rgba(107, 76, 138, 0.06);
}
.planner-slot-available {
border: 1px solid rgba(107, 76, 138, 0.25);
background: rgba(107, 76, 138, 0.02);
}
.planner-slot-available:hover {
border-color: rgba(107, 76, 138, 0.5);
background: rgba(107, 76, 138, 0.06);
}
.planner-slot-clash {
border: 2px solid var(--color-danger);
background: rgba(220, 53, 69, 0.06);
}
.planner-slot-cta {
font-size: var(--font-size-small);
color: var(--color-primary);
font-weight: 600;
margin-top: 4px;
text-align: right;
}
.planner-slot-name {
font-weight: 600;
font-size: var(--font-size-label);
margin-bottom: 2px;
word-break: break-word;
}
.planner-slot-time {
font-size: var(--font-size-small);
color: var(--color-text-light);
}
.planner-slot-badge {
font-size: var(--font-size-small);
color: var(--color-primary);
font-weight: 700;
margin-top: 4px;
}
.planner-slot-clash-warn {
font-size: var(--font-size-small);
color: var(--color-danger);
font-weight: 600;
margin-top: 2px;
}
/* Planner mobile: column dividers */
@media (max-width: 768px) {
.planner-day-column {
border-bottom: 1px solid var(--color-border);
padding-bottom: 12px;
}
.planner-day-column:last-child {
border-bottom: none;
}
}
/* Safe area for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* Shipped native builds use ios.contentInset:"always" - the OS already
insets the web content below the notch, so the env() padding above would
double it, leaving an empty band over the header. Suppress it for those
builds (.cap-inset-always, set in supabase-client.js). Web keeps the
padding; edge-to-edge builds (contentInset:"never") swap to
.cap-edge-to-edge in native-init.js and keep the single, correct inset. */
html.cap-inset-always body {
padding-top: 0;
padding-bottom: 0;
}
}
/* ============================================================
Contextual Alert Cards (Announcements page)
============================================================ */
.ctx-alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
margin-bottom: 8px;
font-size: var(--font-size-body);
line-height: 1.4;
border-left-width: 3px;
border-left-style: solid;
}
.ctx-alert-link {
cursor: pointer;
}
.ctx-alert-link:hover {
filter: brightness(0.96);
}
.ctx-alert-link:active {
filter: brightness(0.92);
}
.ctx-alert-chevron {
font-size: var(--font-size-heading);
flex-shrink: 0;
margin-left: auto;
align-self: center;
opacity: 0.5;
}
.ctx-alert-icon {
font-size: var(--font-size-body);
flex-shrink: 0;
margin-top: 1px;
}
.ctx-alert-title {
display: block;
font-weight: 600;
margin-bottom: 1px;
}
.ctx-alert-urgent {
background: #FFF4F4;
border-left-color: var(--color-error);
color: #8B1A1A;
}
.ctx-alert-warn {
background: #FFFBF0;
border-left-color: #D4A843;
color: #7A5500;
}
.ctx-alert-info {
background: #F4F0FA;
border-left-color: var(--color-primary);
color: var(--color-primary-dark);
}
.ctx-alert-success {
background: #F0FBF4;
border-left-color: var(--color-success);
color: #1A5C34;
}
[data-theme="dark"] .ctx-alert-urgent { background: rgba(192,57,43,0.12); color: #F9BABA; }
[data-theme="dark"] .ctx-alert-warn { background: rgba(212,168,67,0.12); color: #F5D78A; }
[data-theme="dark"] .ctx-alert-info { background: rgba(107,76,138,0.15); color: var(--color-primary-light); }
[data-theme="dark"] .ctx-alert-success{ background: rgba(46,158,94,0.12); color: #90DEB0; }
[data-theme="dark"] .event-banner-upcoming .event-banner-badge { background: var(--color-primary); color: #fff; }
[data-theme="dark"] .event-banner-live .event-banner-badge { background: rgba(192,57,43,0.2); color: #F9BABA; }
/* ============================================================
Micro-animations
============================================================ */
/* Auth page card lift-in - login, first-login, forgot-password */
@keyframes cardLiftIn {
from { opacity: 0; transform: translateY(12px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-container > .card {
animation: cardLiftIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: 0.1s;
}
/* Modal overlay fade-in */
@keyframes overlayFade {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-overlay.show {
animation: overlayFade 0.2s ease both;
}
/* Modal box scale-in */
@keyframes modalEnter {
from { opacity: 0; transform: scale(0.95) translateY(8px); }
to { opacity: 1; transform: none; }
}
.modal-overlay.show .modal {
animation: modalEnter 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Alert slide-in from top */
@keyframes alertSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.alert.show {
animation: alertSlideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Fee notes - saved indicator fade in → hold → fade out */
@keyframes feeNotesSaved {
0% { opacity: 0; transform: translateY(-3px); }
15% { opacity: 1; transform: translateY(0); }
75% { opacity: 1; }
100% { opacity: 0; }
}
.fee-notes-status.show {
animation: feeNotesSaved 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Card enter animation - list items fade in and slide up */
@keyframes cardEnter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.enrichment-card,
.announcement-card {
animation: cardEnter 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Stagger siblings up to 6 */
.enrichment-card:nth-child(1), .announcement-card:nth-child(1) { animation-delay: 0ms; }
.enrichment-card:nth-child(2), .announcement-card:nth-child(2) { animation-delay: 30ms; }
.enrichment-card:nth-child(3), .announcement-card:nth-child(3) { animation-delay: 60ms; }
.enrichment-card:nth-child(4), .announcement-card:nth-child(4) { animation-delay: 90ms; }
.enrichment-card:nth-child(5), .announcement-card:nth-child(5) { animation-delay: 120ms; }
.enrichment-card:nth-child(n+6), .announcement-card:nth-child(n+6) { animation-delay: 150ms; }
/* Success modal scale-in (upgrade existing successPop) */
@keyframes successPop {
0% { transform: scale(0.6); opacity: 0; }
60% { transform: scale(1.12); }
100% { transform: scale(1); opacity: 1; }
}
/* Tab content crossfade. Only the FALLBACK for browsers without the View
Transitions API: where VT is supported, switchTab() wraps the swap in
document.startViewTransition() and the @view-transition root crossfade (below)
owns the animation, so also running tabFade would double up the fade. The
@supports test detects VT via the view-transition-name property, which ships
together with document.startViewTransition(). */
@supports not (view-transition-name: none) {
.tab-content.active {
animation: tabFade 0.18s ease-out;
}
}
@keyframes tabFade {
from { opacity: 0; }
to { opacity: 1; }
}
/* ═══ Page transitions (View Transitions API) ═══
One unified crossfade for BOTH navigation styles so the whole app feels
continuous instead of hard-cutting:
1. Cross-document (e.g. Messenger to Calendar, which loads messages.html to
dashboard.html): @view-transition opts every page in (style.css is shared).
The browser holds the outgoing page, then crossfades to the incoming page's
first painted frame. Theme + color-scheme are set synchronously in each
page's before first paint, so both frames are already correctly
themed and there is no light/dark flash across the fade.
2. Same-document tab switch (e.g. Announcements to Enrichment): switchTab()
calls document.startViewTransition(), which reuses this same root crossfade.
Pure progressive enhancement: unsupported browsers (older iOS/Safari, Firefox)
navigate exactly as before. The first cold load is not a navigation, so it
does not animate. The outgoing page fades out a touch faster than the incoming
one fades in, and the incoming page drifts up 8px as it arrives (Disney
follow-through), so it reads as "settled into place", not teleported. */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: pageNavOut 200ms var(--ease-out) both;
}
::view-transition-new(root) {
animation: pageNavIn 260ms var(--ease-out) both;
}
@keyframes pageNavOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes pageNavIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* The global prefers-reduced-motion block targets the * selector, which does
NOT match ::view-transition-* pseudo-elements. Disable the crossfade here too
so reduced-motion users get an instant cut on both nav styles. */
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
/* Messages module - recipient row reveal */
@keyframes rowFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.row-reveal {
animation: rowFadeIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Messages module - card entrances */
#tab-messages.active .card,
#tab-messages-settings.active .card {
animation: cardEnter 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#tab-messages-settings.active .card:nth-child(2) { animation-delay: 60ms; }
/* Messages module - recipient preview crossfade */
@keyframes previewFade {
from { opacity: 0.3; }
to { opacity: 1; }
}
.preview-updated {
animation: previewFade 0.18s ease-out both;
}
/* Messages module - recipient summary bar */
.msg-recipient-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.msg-recipient-count {
font-size: var(--font-size-body);
font-weight: 500;
color: var(--color-text);
}
.msg-excluded-note {
font-weight: 400;
color: var(--color-muted);
}
.msg-exclude-toggle {
background: none;
border: none;
cursor: pointer;
font-size: var(--font-size-label);
color: var(--color-primary);
padding: 0;
white-space: nowrap;
flex-shrink: 0;
}
.msg-exclude-toggle:hover { text-decoration: underline; }
/* Messages module - exclude panel */
.msg-exclude-panel {
border: 1px solid var(--color-border);
border-radius: 8px;
max-height: 200px;
overflow-y: auto;
margin-bottom: 12px;
}
.msg-exclude-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid var(--color-border);
transition: background 0.12s;
gap: 8px;
}
.msg-exclude-row:last-child { border-bottom: none; }
.msg-exclude-row:hover { background: var(--color-surface); }
.msg-exclude-row.excluded { opacity: 0.45; }
.msg-exclude-row-name {
font-size: var(--font-size-body);
color: var(--color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.msg-exclude-row.excluded .msg-exclude-row-name {
text-decoration: line-through;
}
.msg-exclude-action {
font-size: var(--font-size-label);
color: var(--color-muted);
flex-shrink: 0;
}
.msg-exclude-row:hover .msg-exclude-action { color: var(--color-primary); }
.msg-exclude-row.excluded:hover .msg-exclude-action { color: var(--color-success); }
/* Ticket issuance - mode toggle */
.issue-mode-toggle {
display: inline-flex;
background: var(--color-bg);
border-radius: 20px;
padding: 3px;
gap: 2px;
margin-bottom: 12px;
}
.issue-mode-btn {
padding: 5px 14px;
border: none;
background: transparent;
border-radius: 18px;
font-size: var(--font-size-label);
font-weight: 500;
cursor: pointer;
color: var(--color-text-light);
transition: background 0.15s, color 0.15s;
}
.issue-mode-btn.active {
background: var(--color-primary);
color: white;
}
.issue-mode-btn:hover:not(.active) {
background: rgba(107, 76, 138, 0.12);
color: var(--color-primary);
}
/* Ticket issuance - search results */
.issue-search-results {
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: 8px;
margin-top: 4px;
}
.issue-search-results:empty { display: none; }
.issue-search-result {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
cursor: pointer;
font-size: var(--font-size-body);
transition: background 0.1s;
}
.issue-search-result:hover { background: var(--color-bg); }
.issue-search-result + .issue-search-result {
border-top: 1px solid var(--color-border);
}
.issue-search-result-add {
color: var(--color-primary);
font-size: var(--font-size-label);
font-weight: 500;
white-space: nowrap;
}
/* Ticket issuance - selected user chips */
.issue-user-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.issue-user-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px 4px 10px;
border-radius: 99px;
background: var(--color-surface);
border: 1px solid var(--color-border);
font-size: var(--font-size-label);
color: var(--color-text);
}
.issue-chip-remove {
background: none;
border: none;
cursor: pointer;
color: var(--color-text-light);
font-size: var(--font-size-body);
line-height: 1;
padding: 0 2px;
display: flex;
align-items: center;
transition: color 0.15s;
}
.issue-chip-remove:hover { color: var(--color-error); }
.issue-selected-label {
font-size: var(--font-size-label);
font-weight: 600;
color: var(--color-text-light);
margin-top: 12px;
margin-bottom: 2px;
}
/* Messages module - attach button (photo previews reuse the shared .msgr-media-* thumbnail grid) */
.msg-attach-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-label);
cursor: pointer;
color: var(--color-muted);
background: none;
border: 1px dashed var(--color-border);
border-radius: 8px;
padding: 7px 12px;
transition: color 0.15s, border-color 0.15s;
margin-bottom: 12px;
width: 100%;
justify-content: center;
}
.msg-attach-btn:hover,
.msg-attach-btn.drag-over {
color: var(--color-primary);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
/* Voice note - action row, mic button, recording overlay, preview */
.msg-action-row {
display: flex;
gap: 8px;
margin-bottom: 12px;
align-items: stretch;
}
.msg-action-row .msg-attach-btn { flex: 1; margin-bottom: 0; }
.msg-voice-btn {
width: 40px;
min-height: 40px;
border-radius: 50%;
border: 1px dashed var(--color-border);
background: none;
color: var(--color-text-light);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.msg-voice-btn:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.msg-voice-overlay {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
animation: msgFadeIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.msg-voice-recording {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
font-size: var(--font-size-body);
color: var(--color-text);
}
.msg-recording-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-danger);
flex-shrink: 0;
animation: msgPulse 1s ease-in-out infinite;
}
.msg-recording-label { color: var(--color-text-light); }
.msg-recording-time {
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--color-text);
margin-left: auto;
}
.msg-voice-stop {
width: 40px;
height: 40px;
border-radius: 8px;
border: none;
background: var(--color-danger);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.15s;
}
.msg-voice-stop:active { transform: scale(0.92); }
@keyframes msgPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@keyframes msgFadeIn {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
@keyframes msgFadeOut {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.97); }
}
@keyframes vpEnter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes vpExit {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vpPlayPop {
0% { transform: scale(0.8); }
100% { transform: scale(1); }
}
.msg-voice-overlay.exiting {
animation: msgFadeOut 150ms var(--ease-out) forwards;
}
.msg-voice-preview { margin-bottom: 12px; }
/* Custom voice preview player */
.msg-voice-preview-card {
display: flex;
align-items: center;
gap: 10px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 10px 12px;
}
.msg-vp-play {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--color-primary);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.15s;
}
.msg-vp-play:hover { opacity: 0.85; }
.msg-vp-track {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.msg-vp-bar {
flex: 1;
height: 3px;
background: var(--color-border);
border-radius: 2px;
overflow: hidden;
}
.msg-vp-fill {
height: 100%;
width: 100%;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.1s var(--ease-out);
}
.msg-vp-time {
font-size: var(--font-size-small);
color: var(--color-text-light);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.msgr-voice-clear-btn {
background: none;
border: none;
color: var(--color-text-light);
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 16px;
transition: color 0.15s;
}
.msgr-voice-clear-btn:hover { color: var(--color-danger); }
.msg-action-row.voice-active .msg-attach-btn {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
@media (max-width: 400px) {
.msg-action-row { flex-direction: column; }
.msg-voice-btn {
width: 100%;
border-radius: 8px;
height: auto;
padding: 7px 12px;
}
}
/* ============================================================
Purple Badges
============================================================ */
/* ============================================================
Empty States
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
color: var(--color-text-light);
gap: 12px;
}
.empty-state-icon {
font-size: 2.4rem;
line-height: 1;
opacity: 0.5;
}
.empty-state-title {
font-size: var(--font-size-body);
font-weight: 600;
color: var(--color-text);
margin: 0;
}
.empty-state-body {
font-size: var(--font-size-body);
color: var(--color-text-light);
max-width: 280px;
margin: 0;
line-height: 1.5;
}
/* ============================================================
Keyboard Focus Visible (accessible focus ring)
============================================================ */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ============================================================
Brand Mark - SVG wordmark footer
============================================================ */
.brand-mark {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 18px 16px 22px;
margin-top: auto;
text-decoration: none;
position: relative;
border-top: 1px solid var(--color-border);
}
.brand-mark-logo {
height: 28px;
width: auto;
display: block;
flex-shrink: 0;
}
.brand-mark-version {
position: absolute;
right: 16px;
font-size: 0.58rem;
color: var(--color-text-light);
opacity: 0.5;
letter-spacing: 0.04em;
}
.brand-mark-legal {
position: absolute;
left: 16px;
display: flex;
gap: 12px;
align-items: center;
font-size: 0.58rem;
color: var(--color-text-light);
opacity: 0.5;
letter-spacing: 0.04em;
}
.brand-mark-legal a {
color: inherit;
text-decoration: none;
}
.brand-mark-legal a:hover {
opacity: 1;
}
.brand-mark-text {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.brand-mark-canopy {
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0.06em;
color: #6B3FA8;
}
.brand-mark-byline {
font-size: 0.56rem;
font-weight: 300;
letter-spacing: 0.08em;
color: var(--color-text-light);
}
/* ============================================================
Dark Mode Transition
============================================================ */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
}
/* ============================================================
Dark Mode - deep purple theme
============================================================ */
[data-theme="dark"] select {
color-scheme: dark;
}
[data-theme="dark"] {
color-scheme: dark;
--color-bg: #111313;
--color-card: #1d2020;
--color-surface: #1d2020;
--color-text: #F0ECF7;
--color-text-light: #9A9A9A;
--color-border: #2f3736;
--color-shadow: 0 2px 8px rgba(141, 205, 196, 0.15);
--color-primary: #8dcdc4;
--color-primary-light: #b0f0e7;
--color-primary-dark: #6aaaa1;
--color-accent: #b57da8;
--color-success: #2E9E5E;
--color-success-bg: #1a3d28;
--color-error: #E05555;
--color-error-bg: #3d1a1a;
--color-danger: #E05555;
--color-warning-bg: rgba(212, 168, 67, 0.15);
--color-msgr-tick-read: #4fc3f7;
--color-primary-soft: rgba(141, 205, 196, 0.18);
--color-surface-alt: #252929;
--color-bg-subtle: rgba(255, 255, 255, 0.04);
--color-border-subtle: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] body {
background-color: var(--color-bg);
color: var(--color-text);
}
[data-theme="dark"] .card {
background: var(--color-card);
border-color: var(--color-border);
}
[data-theme="dark"] .modal {
background: var(--color-card);
border: 1px solid var(--color-border);
}
[data-theme="dark"] .data-table th {
background: var(--color-bg);
color: var(--color-primary-light);
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .detail-edit-input,
[data-theme="dark"] select.detail-edit-input {
background-color: var(--color-bg);
color: var(--color-text);
border-color: var(--color-border);
}
[data-theme="dark"] .form-group select,
[data-theme="dark"] select.detail-edit-input,
[data-theme="dark"] .phone-input-group .country-code-select {
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='%23AAAAAA' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}
[data-theme="dark"] .enrichment-card {
background: var(--color-card);
border-color: var(--color-border);
}
[data-theme="dark"] .enrichment-card:hover {
border-color: var(--color-primary);
}
[data-theme="dark"] .planner-slot {
background: var(--color-card);
border-color: var(--color-border);
}
[data-theme="dark"] .planner-slot-registered {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
border-color: var(--color-primary);
}
[data-theme="dark"] .planner-day-header {
background: var(--color-primary-dark);
}
[data-theme="dark"] .nav-menu {
background: var(--color-card);
border-color: var(--color-border);
}
[data-theme="dark"] .nav-menu-profile {
border-color: var(--color-border);
}
[data-theme="dark"] .nav-menu-section {
border-color: var(--color-border);
}
[data-theme="dark"] .announcement-card {
background: var(--color-card);
}
[data-theme="dark"] .announcement-card.unread {
background: rgba(212, 168, 67, 0.12);
}
[data-theme="dark"] .student-card {
background: var(--color-card);
}
[data-theme="dark"] .detail-row {
border-color: var(--color-border);
}
[data-theme="dark"] .alert-error {
background: rgba(224, 85, 85, 0.15);
color: var(--color-error);
border-color: rgba(224, 85, 85, 0.3);
}
[data-theme="dark"] .tabs {
border-color: var(--color-border);
}
[data-theme="dark"] .search-bar input {
background: var(--color-bg);
color: var(--color-text);
border-color: var(--color-border);
}
[data-theme="dark"] .badge-success {
background: rgba(46, 158, 94, 0.2);
color: var(--color-success);
}
[data-theme="dark"] .badge-warning { color: #F5D78A; }
[data-theme="dark"] .badge-purple {
background: rgba(139, 92, 246, 0.2);
color: #A78BFA;
}
/* Dark mode toggle button in hamburger menu */
.dark-mode-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 12px;
background: none;
border: none;
border-radius: 8px;
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
color: var(--color-text);
cursor: pointer;
transition: background 0.15s;
text-align: left;
}
.dark-mode-toggle:hover {
background: rgba(107, 76, 138, 0.06);
}
.dark-mode-track {
width: 36px;
height: 20px;
border-radius: 10px;
background: var(--color-border);
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.dark-mode-track.on {
background: var(--color-primary);
}
.dark-mode-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
transition: transform 0.2s;
}
.dark-mode-track.on .dark-mode-thumb {
transform: translateX(16px);
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1) brightness(1.5);
}
/* ============================================================
Org Switcher
============================================================ */
.org-switcher { position: relative; }
.org-switcher-btn { background: none; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; color: white; padding: 4px 10px; font-size: var(--font-size-label); cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.org-switcher-btn:hover { background: rgba(255,255,255,0.12); }
.org-panel { position: absolute; top: calc(100% + 8px); right: 0; background: var(--color-card); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 180px; z-index: 200; padding: 8px 0; border: 1px solid var(--color-border); }
.org-panel-label { font-size: var(--font-size-subheading); font-weight: 700; text-transform: uppercase; color: var(--color-text-light); padding: 4px 14px 8px; letter-spacing: 0.04em; }
.org-panel ul { list-style: none; margin: 0; padding: 0; }
.org-panel li button { width: 100%; text-align: left; padding: 9px 14px; background: none; border: none; cursor: pointer; font-size: var(--font-size-body); color: var(--color-text); }
.org-panel li button:hover { background: var(--color-bg); }
.org-panel li button.active { color: var(--color-primary); font-weight: 600; }
/* ============================================================
Branding Settings
============================================================ */
.section-divider-label {
font-size: var(--font-size-small);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-light);
margin: 20px 0 4px;
padding-bottom: 6px;
border-bottom: 1px solid var(--color-border);
}
.branding-color-row { display: flex; align-items: center; gap: 8px; }
.branding-color-swatch { width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: 6px; padding: 2px; cursor: pointer; background: none; flex-shrink: 0; }
.branding-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.branding-color-swatch::-webkit-color-swatch { border-radius: 4px; border: none; }
.branding-color-row .detail-edit-input { flex: 1; font-family: monospace; text-transform: uppercase; }
/* ── Theme Colour Tab Toggle (Light / Dark) ── */
.theme-colour-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.theme-colour-tab { padding: 5px 14px; font-size: var(--font-size-label); border: 1px solid var(--color-border); border-radius: 20px; background: none; color: var(--color-text-light); cursor: pointer; transition: background 0.15s, color 0.15s; }
.theme-colour-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.theme-colour-tab:hover:not(.active) { background: var(--color-primary-light); color: #fff; border-color: var(--color-primary-light); }
@media (max-width: 767px) { .theme-colour-tab { min-height: 44px; padding: 10px 16px; } }
/* ── Theme Advanced disclosure toggle ── */
.theme-advanced-toggle { background: none; border: none; color: var(--color-text-light); font-size: var(--font-size-small); cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 4px; }
/* ── Generic toggle switch (used in Theme Management) ── */
.toggle-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.toggle-label input[type="checkbox"] { display: none; }
.toggle-track { position: relative; width: 40px; height: 22px; background: var(--color-border); border-radius: 11px; transition: background 0.2s; flex-shrink: 0; }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.toggle-label input:checked + .toggle-track { background: var(--color-primary); }
.toggle-label input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }
.toggle-text { font-size: var(--font-size-body); color: var(--color-text); }
/* Module Management toggles */
.module-toggle-row { padding: 10px 0; border-bottom: 1px solid var(--color-border); transition: opacity 0.2s; }
.module-toggle-row:last-child { border-bottom: none; }
.module-toggle-row .toggle-label { align-items: flex-start; }
.module-toggle-row .toggle-text { line-height: 1.4; }
.module-toggle-row .module-desc { font-size: 0.85em; color: var(--color-muted); }
.module-toggle-row .dep-note { font-size: 0.8em; color: var(--color-muted); }
/* "Requires:" is always visible (informational). Muted by default; turns
accent-coloured when deps are unmet (.dep-unmet, set by _applyModuleCascade). */
.module-toggle-row .dep-requires { display: block; font-style: italic; margin-top: 2px; color: var(--color-muted); }
.module-toggle-row .dep-requires.dep-unmet { color: var(--color-accent, #e67e22); }
.module-toggle-row.dep-disabled { opacity: 0.45; }
.module-toggle-row.dep-disabled .toggle-label { cursor: not-allowed; }
/* "Always on" base modules (Core, Announcements): disabled toggle reads as
a permanent grey pill (not a broken/blocked state - those use 0.45
dep-disabled opacity above). HTML's `disabled` attribute already blocks
the click; this just communicates the permanence visually. */
.module-toggle-row.always-on .toggle-label { cursor: not-allowed; }
.module-toggle-row.always-on .toggle-track { background: var(--color-border); opacity: 0.65; }
.module-toggle-row.always-on .toggle-thumb { background: #f4f4f4; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
/* ============================================================
HR Pending Dot Indicators
============================================================ */
/* Inline pulsing dot - used in nav menu and application status rows */
.hr-pending-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
animation: livePulse 1.5s ease-in-out infinite;
vertical-align: middle;
flex-shrink: 0;
margin-left: 5px;
}
/* Dot positioned on the hamburger button (top-right corner) */
#hamburgerPendingDot {
position: absolute;
top: 0px;
right: 0px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #ef4444;
animation: livePulse 1.5s ease-in-out infinite;
display: none;
pointer-events: none;
border: 2px solid var(--color-bg);
}
#hamburgerPendingDot.visible { display: block; }
/* ── Flatpickr date range picker overrides ──────────────────── */
/* !important needed - Flatpickr ships hardcoded rgba colours that */
/* otherwise win on specificity against var() declarations. */
.flatpickr-calendar {
background: var(--color-card) !important;
border-color: var(--color-border) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
position: fixed !important; /* escapes overflow-y:auto clipping on .modal */
z-index: 99999 !important; /* showModal() starts at 10010 and increments; must stay above */
}
.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
background: var(--color-primary) !important;
color: #fff !important;
fill: #fff !important;
}
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
color: #fff !important;
fill: #fff !important;
background: transparent !important;
}
.flatpickr-days, .dayContainer { background: var(--color-card) !important; }
.flatpickr-day {
color: var(--color-text) !important;
border-color: transparent !important;
}
.flatpickr-day:hover {
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
color: #fff !important;
}
.fp-multiple-mode .flatpickr-day:not(.selected):hover {
background: transparent !important;
border-color: var(--color-primary) !important;
color: var(--color-text) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
background: var(--color-primary) !important;
border-color: var(--color-primary) !important;
color: #fff !important;
}
/* inRange: use rgba so only the background gets transparency, not the text */
.flatpickr-day.inRange {
background: rgba(141, 205, 196, 0.2) !important;
border-color: transparent !important;
box-shadow: -5px 0 0 rgba(141,205,196,0.2), 5px 0 0 rgba(141,205,196,0.2) !important;
color: var(--color-text) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: var(--color-text-light) !important;
background: transparent !important;
cursor: not-allowed !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: var(--color-text-light) !important;
opacity: 0.5;
}
.flatpickr-day.today:not(.selected) { border-color: var(--color-primary) !important; }
.numInputWrapper:hover { background: transparent !important; }
/* ── Canopy date picker - custom month/year overlay nav ────── */
/* Hide flatpickr's arrows everywhere; clickable labels + grid overlay replace them. */
.flatpickr-prev-month,
.flatpickr-next-month {
display: none !important;
}
/* Clickable month/year labels with caret affordance */
.fp-nav-label {
display: inline-block;
font-weight: 700;
font-size: inherit;
color: inherit;
cursor: pointer;
border-bottom: 1px solid currentColor;
line-height: 1.4;
}
.fp-nav-label::after {
content: ' ▾';
font-size: 0.75em;
vertical-align: 1px;
}
@media (hover: hover) {
.fp-nav-label:hover {
opacity: 0.7;
}
}
/* ── Simple-nav pickers (e.g. trial form) — static label + native prev/next arrows ── */
/* Re-show the arrows the global rule hides (higher specificity wins). */
.flatpickr-calendar.fp-simple-nav .flatpickr-prev-month,
.flatpickr-calendar.fp-simple-nav .flatpickr-next-month {
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
}
.flatpickr-calendar.fp-simple-nav .flatpickr-prev-month svg,
.flatpickr-calendar.fp-simple-nav .flatpickr-next-month svg {
fill: #fff !important;
width: 16px;
height: 16px;
}
.flatpickr-calendar.fp-simple-nav .flatpickr-prev-month.flatpickr-disabled {
display: flex !important;
opacity: 0.35;
cursor: default;
}
/* Static month/year label - white header text, no caret, not clickable */
.fp-nav-static {
display: inline-block;
font-weight: 700;
font-size: inherit;
color: #fff;
line-height: 1.4;
}
/* Disabled days (weekends, public holidays, centre closures) read the SAME faded
grey as prev/next-month overflow days so the blocked state is obvious. The
global .flatpickr-disabled rule sets the colour but not the opacity. */
.flatpickr-calendar.fp-simple-nav .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar.fp-simple-nav .flatpickr-day.flatpickr-disabled:hover {
opacity: 0.5;
}
@media (hover: hover) {
.flatpickr-calendar.fp-simple-nav .flatpickr-prev-month:not(.flatpickr-disabled):hover,
.flatpickr-calendar.fp-simple-nav .flatpickr-next-month:hover {
opacity: 0.7;
}
}
/* ── Month-only picker (canopyDatePicker mode: 'month' via monthSelect plugin) ── */
/* The calendar carries BOTH .fp-month-mode and .fp-simple-nav — the latter handles
prev/next chevron display + disabled state, no duplicate rules needed here. */
/* Pin the whole calendar to a tight, fixed width so the header bar, inner
container, and month grid all line up without trailing dead space. Without
this the inner container inherits flatpickr's default ~308px while the grid
sits at 280px, producing an obvious 26px gap on the right edge. */
.flatpickr-calendar.fp-month-mode,
.flatpickr-calendar.fp-month-mode .flatpickr-months,
.flatpickr-calendar.fp-month-mode .flatpickr-innerContainer,
.flatpickr-calendar.fp-month-mode .flatpickr-rContainer {
width: 280px !important;
min-width: 280px !important;
max-width: 280px !important;
box-sizing: border-box !important;
}
/* Month-grid cells: match the same primary/text tokens the day grid uses. */
/* 3×4 grid (mirrors the legacy day-grid month overlay) so the calendar doesn't
collapse to a narrow strip. width:100% makes the grid fill its inner container
so it sits flush with the header bar above — without it, the grid is narrower
than the header and leaves a trailing dead zone on the right (only). */
.flatpickr-monthSelect-months {
background: var(--color-card) !important;
padding: 10px !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.flatpickr-monthSelect-month {
color: var(--color-text) !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
/* width:100% overrides the plugin's `width: 33%` (which resolves against the
grid track, leaving the element ~27px wide — far narrower than e.g.
"September") so the highlight box always fully contains its text. */
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 8px 4px !important;
margin: 0 !important;
text-align: center !important;
font-size: var(--font-size-body) !important;
cursor: pointer !important;
transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1),
color 0.15s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.flatpickr-monthSelect-month:hover {
background: var(--color-primary) !important;
color: #fff !important;
border-color: var(--color-primary) !important;
}
/* Today's month gets a primary-coloured border (matches .flatpickr-day.today). */
.flatpickr-monthSelect-month.today:not(.selected) {
border-color: var(--color-primary) !important;
}
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.selected:hover {
background: var(--color-primary) !important;
color: #fff !important;
border-color: var(--color-primary) !important;
}
.flatpickr-monthSelect-month.flatpickr-disabled,
.flatpickr-monthSelect-month.flatpickr-disabled:hover {
color: var(--color-text-light) !important;
background: transparent !important;
border-color: transparent !important;
opacity: 0.5;
cursor: not-allowed !important;
}
/* Inline month/year picker - replaces the day grid in-flow (no z-index fight) */
.fp-overlay {
background: var(--color-card-bg, var(--color-card, #fff));
box-sizing: border-box;
padding: 8px;
display: flex;
flex-direction: column;
/* height set by JS to match the hidden weekdays + days region */
}
/* 4×3 month grid - rows share the overlay height equally */
.fp-overlay-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, minmax(0, 60px));
gap: 4px;
align-content: start;
flex: 1;
min-height: 0;
}
/* Year grid - 4 columns; rows cap at 60px so a narrow range (e.g. 3 years)
doesn't stretch a single row to fill the entire day-grid area. */
.fp-overlay-years {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(0, 60px);
gap: 4px;
align-content: start;
flex: 1;
min-height: 0;
}
.fp-overlay-btn {
background: none;
border: none;
padding: 8px 4px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
color: var(--color-text, #333);
cursor: pointer;
text-align: center;
transition: background 0.12s;
width: 100%;
height: 100%;
}
@media (hover: hover) {
.fp-overlay-btn:hover:not(.fp-overlay-active) {
background: var(--color-bg-hover, #f5f5f5);
}
}
.fp-overlay-btn.fp-overlay-active {
background: var(--color-primary, #6B4C8A);
color: #fff;
font-weight: 600;
}
/* ── Apply Leave picker - group leave chip overlay ─────────── */
.flatpickr-day {
position: relative;
}
/* Shift day number up so chips fit below it within the 39px cell */
.flatpickr-day.fp-has-chips {
line-height: 1 !important;
padding-top: 5px !important;
}
.fp-group-chips {
display: flex;
gap: 1px;
flex-wrap: wrap;
justify-content: center;
margin-top: 2px;
}
.fp-group-chip {
flex-shrink: 0;
width: 10px;
height: 10px;
border-radius: 2px;
font-size: 0.48rem;
font-weight: 700;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fp-group-chip-more {
font-size: 0.45rem;
color: var(--color-text-light);
line-height: 10px;
align-self: center;
}
/* Capacity-full days get a subtle red tint */
.flatpickr-day.fp-day-at-capacity {
background: rgba(239, 68, 68, 0.12) !important;
}
/* Restore primary bg on hover/selection so tint doesn't bleed through */
.flatpickr-day.fp-day-at-capacity:hover,
.flatpickr-day.fp-day-at-capacity.selected,
.flatpickr-day.fp-day-at-capacity.startRange,
.flatpickr-day.fp-day-at-capacity.endRange,
.flatpickr-day.fp-day-at-capacity.inRange {
background: var(--color-primary) !important;
}
/* Non-working days (weekends, off-days per workweek, public holidays) - quiet grey wash */
.flatpickr-day.fp-non-working:not(.selected):not(.startRange):not(.endRange):not(.inRange):not(:hover) {
background: rgba(128, 128, 128, 0.08) !important;
color: var(--color-text-light) !important;
}
/* Designated work days - subtle blue accent to show override of weekend/holiday */
.flatpickr-day.fp-designated-work {
position: relative;
}
.flatpickr-day.fp-designated-work:not(.selected):not(.startRange):not(.endRange):not(.inRange):not(:hover) {
background: rgba(59, 130, 246, 0.08) !important;
color: var(--color-text) !important;
}
.flatpickr-day.fp-designated-work::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-primary);
}
/* ============================================================
Shared Calendar Base - single source of truth for both
the School Calendar and the HR Leave Calendar
============================================================ */
.cal-wrap {
max-width: 540px;
margin: 0 auto;
background: var(--color-card);
border-radius: 12px;
padding: 12px;
border: 1px solid var(--color-border);
box-shadow: var(--color-shadow);
}
/* Header row: prev / month label / next */
.cal-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.cal-header .cal-month-label {
flex: 1;
text-align: center;
font-weight: 600;
font-size: var(--font-size-body);
}
.cal-nav-btn {
background: none;
border: 1px solid var(--color-border);
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: var(--font-size-body);
color: var(--color-text);
flex-shrink: 0;
transition: background 0.15s;
}
.cal-nav-btn:hover { background: var(--color-bg); }
.cal-nav-btn:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
/* Day-of-week label row */
.cal-dow-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
gap: 2px;
}
.cal-dow-label {
text-align: center;
font-size: var(--font-size-small);
font-weight: 600;
color: var(--color-text-light);
padding: 2px 0;
}
/* Calendar grid */
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-loading {
grid-column: 1 / -1;
text-align: center;
padding: 32px;
color: var(--color-text-light);
font-size: var(--font-size-body);
}
.cal-cell--empty { visibility: hidden; }
/* Individual day cell */
.cal-cell {
background: var(--color-bg);
border: 1.5px solid transparent;
border-radius: 8px;
padding: 6px 4px 5px;
min-height: 58px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
position: relative;
-webkit-tap-highlight-color: transparent;
color: inherit;
}
.cal-cell:hover { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg)); }
.cal-cell--dim { opacity: 0.45; }
.cal-cell--has-items .cal-day-num { font-weight: 700; }
.cal-cell--today .cal-day-num {
background: var(--color-primary);
color: #fff;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.cal-cell--selected {
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.cal-day-num {
font-size: var(--font-size-label);
font-weight: 500;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Dot/chip container */
.cal-dots {
display: flex;
align-items: center;
gap: 3px;
flex-wrap: wrap;
justify-content: center;
min-height: 10px;
}
/* Detail panel - accordion expand */
.cal-detail {
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
padding: 0 12px;
background: var(--color-bg);
border-radius: 10px;
transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.3s ease,
margin-top 0.35s ease,
padding 0.35s ease;
}
.cal-detail.show {
max-height: 500px;
opacity: 1;
margin-top: 8px;
padding: 10px 12px;
}
/* Detail panel content */
.cal-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.cal-detail-date {
font-weight: 600;
font-size: var(--font-size-body);
}
.cal-detail-list { display: flex; flex-direction: column; gap: 6px; }
.cal-detail-item {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--font-size-body);
}
.cal-detail-name { flex: 1; font-weight: 500; }
.cal-detail-badge {
font-size: var(--font-size-small);
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
flex-shrink: 0;
}
/* Legend */
.cal-legend { margin-top: 14px; }
.cal-legend-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.cal-legend-item {
display: flex;
align-items: center;
gap: 5px;
font-size: var(--font-size-label);
color: var(--color-text-light);
}
.cal-legend-label { font-weight: 500; }
/* Shared animations */
@keyframes calItemIn {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes calCellPop {
0% { transform: scale(1); }
30% { transform: scale(0.84); }
70% { transform: scale(1.06); }
100% { transform: scale(1); }
}
.cal-cell--selected {
animation: calCellPop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes calSlideLeft {
from { opacity: 0; transform: translateX(22px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes calSlideRight {
from { opacity: 0; transform: translateX(-22px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes calExitLeft {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-22px); }
}
@keyframes calExitRight {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(22px); }
}
.cal-grid--slide-left { animation: calSlideLeft 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cal-grid--slide-right { animation: calSlideRight 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cal-grid--exit-left { animation: calExitLeft 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
.cal-grid--exit-right { animation: calExitRight 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; pointer-events: none; }
/* ─── Shared dark mode ─── */
[data-theme="dark"] .cal-nav-btn {
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .cal-cell {
background: #28322f;
border-color: #3a4a47;
}
[data-theme="dark"] .cal-cell:hover { background: #2f3d39; }
[data-theme="dark"] .cal-cell--dim { opacity: 0.6; }
[data-theme="dark"] .cal-cell--selected {
background: rgba(141, 205, 196, 0.15);
border-color: var(--color-primary);
}
[data-theme="dark"] .cal-detail {
background: var(--color-bg);
border: 1px solid var(--color-border);
}
/* ─── Shared mobile tweaks ─── */
@media (max-width: 360px) {
.cal-cell { min-height: 50px; padding: 4px 2px; }
.cal-day-num { font-size: 0.73rem; width: 20px; height: 20px; }
.cal-cell--today .cal-day-num { width: 20px; height: 20px; }
}
/* ============================================================
HR Leave Calendar - module-specific styles only
============================================================ */
.hr-cal-cell--dwd { opacity: 1; border-left: 2px solid var(--color-primary); }
.hr-cal-ph-badge,
.hr-cal-dwd-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-label);
font-weight: 600;
color: var(--color-text-light);
background: rgba(128,128,128,0.1);
border-radius: 6px;
padding: 4px 10px;
margin-bottom: 8px;
}
.hr-cal-ph-icon { font-size: var(--font-size-body); }
.hr-cal-dwd-badge { color: var(--color-primary); background: rgba(59, 130, 246, 0.08); }
/* Initial chips (avatar badges in day cells) */
.hr-cal-initial-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 3px;
font-size: 0.62rem;
font-weight: 700;
color: #fff;
line-height: 1;
flex-shrink: 0;
}
.hr-cal-dot-more {
font-size: 0.6rem;
font-weight: 700;
color: var(--color-text-light);
line-height: 1;
}
/* Detail panel - HR-specific dot (larger, squared for initials) */
.hr-cal-detail-dot {
width: 20px;
height: 20px;
border-radius: 4px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-small);
font-weight: 700;
color: #fff;
}
/* Half-day indicator - sits to the left of the leave type badge */
.hr-cal-half-day-label {
font-size: var(--font-size-small);
font-weight: 500;
color: var(--color-text-light);
flex-shrink: 0;
}
/* Legend - HR-specific dot (larger, squared for initials) */
.hr-cal-legend-dot {
width: 18px;
height: 18px;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-small);
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
/* HR dark mode specifics */
[data-theme="dark"] .hr-cal-cell--dwd { opacity: 1; }
[data-theme="dark"] .hr-cal-dot-more { color: var(--color-text-light); }
/* HR mobile tweaks */
@media (max-width: 360px) {
.hr-cal-initial-chip { width: 13px; height: 13px; font-size: 0.58rem; }
}
/* ============================================================
Resources Calendar
============================================================ */
/* ─── Category color tokens ─── */
:root {
--cd-color-closure: #e05555;
--cd-color-holiday: #3a7fd4;
--cd-color-event: #7c3aed;
--cd-color-custom: #3da05a;
--cd-color-programme: #d4930a;
--cd-color-extended: #0e9f9f;
}
.cd-view-toggle {
display: flex;
gap: 0;
margin-bottom: 16px;
background: var(--color-bg);
border-radius: 8px;
padding: 3px;
width: fit-content;
}
.cd-view-btn {
background: none;
border: none;
padding: 6px 16px;
border-radius: 6px;
font-size: var(--font-size-label);
font-weight: 600;
color: var(--color-text-light);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.cd-view-btn.active {
background: var(--color-card);
color: var(--color-text);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cd-view-btn:hover:not(.active) { color: var(--color-text); }
/* Sub-toggle (Monthly / Year) - visually subordinate to top section toggle */
.cd-sub-toggle {
display: flex;
gap: 4px;
margin-bottom: 12px;
}
.cd-sub-btn {
background: none;
border: none;
padding: 4px 10px;
border-radius: 4px;
font-size: var(--font-size-small);
font-weight: 500;
color: var(--color-text-light);
cursor: pointer;
transition: color 0.15s;
}
.cd-sub-btn.active {
color: var(--color-text);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.cd-sub-btn:hover:not(.active) { color: var(--color-text); }
/* Category dot indicators */
.cd-cal-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.cd-cal-dot--closure { background: var(--cd-color-closure); }
.cd-cal-dot--holiday { background: var(--cd-color-holiday); }
.cd-cal-dot--event { background: var(--cd-color-event); }
.cd-cal-dot--custom { background: var(--cd-color-custom); }
.cd-cal-dot--programme { background: var(--cd-color-programme); }
.cd-cal-dot--extended { background: var(--cd-color-extended); }
/* Programme band - subtle tint across date range cells */
.cd-cal-cell--programme {
background: color-mix(in srgb, var(--cd-color-programme) 12%, var(--color-bg));
border-radius: 0;
}
[data-theme="dark"] .cal-cell.cd-cal-cell--programme {
background: #3a564e;
}
.cd-cal-cell--programme-start { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.cd-cal-cell--programme-end { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.cd-cal-cell--programme.cal-cell--selected {
background: color-mix(in srgb, var(--cd-color-programme) 22%, var(--color-bg));
}
/* Detail panel - Resources-specific dot (small circle for category) */
.cd-cal-detail-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.cd-cal-detail-badge--closure { background: color-mix(in srgb, var(--cd-color-closure) 13%, transparent); color: var(--cd-color-closure); }
.cd-cal-detail-badge--holiday { background: color-mix(in srgb, var(--cd-color-holiday) 13%, transparent); color: var(--cd-color-holiday); }
.cd-cal-detail-badge--event { background: color-mix(in srgb, var(--cd-color-event) 13%, transparent); color: var(--cd-color-event); }
.cd-cal-detail-badge--custom { background: color-mix(in srgb, var(--cd-color-custom) 13%, transparent); color: var(--cd-color-custom); }
.cd-cal-detail-badge--programme { background: color-mix(in srgb, var(--cd-color-programme) 13%, transparent); color: var(--cd-color-programme); }
.cd-cal-detail-badge--extended { background: color-mix(in srgb, var(--cd-color-extended) 13%, transparent); color: var(--cd-color-extended); }
.cd-cal-detail-event-link {
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 2px;
}
.cd-cal-detail-event-link:hover { opacity: 0.8; }
/* Legend - Resources-specific dot (small circle) */
.cd-cal-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.cd-cal-legend-swatch {
width: 16px;
height: 8px;
border-radius: 3px;
flex-shrink: 0;
background: color-mix(in srgb, var(--cd-color-programme) 35%, var(--color-bg));
border: 1px solid var(--cd-color-programme);
}
[data-theme="dark"] .cd-cal-legend-swatch {
background: #3a564e;
border-color: #4d7a6e;
}
/* ─── Year-at-a-Glance ─── */
.cd-year-wrap { max-width: 720px; margin: 0 auto; }
.cd-year-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.cd-year-label {
flex: 1;
text-align: center;
font-weight: 600;
font-size: var(--font-size-body);
}
.cd-year-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.cd-year-month {
background: var(--color-bg);
border-radius: 10px;
padding: 10px 8px;
cursor: pointer;
transition: box-shadow 0.15s;
}
.cd-year-month:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.cd-year-month-title {
font-weight: 600;
font-size: var(--font-size-label);
text-align: center;
margin-bottom: 6px;
color: var(--color-text);
}
.cd-year-mini-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.cd-year-mini-dow {
text-align: center;
font-size: 0.55rem;
font-weight: 600;
color: var(--color-text-light);
padding: 1px 0;
}
.cd-year-mini-cell {
text-align: center;
font-size: 0.6rem;
padding: 2px 0;
border-radius: 3px;
color: var(--color-text-light);
position: relative;
}
.cd-year-mini-cell--today {
background: var(--color-primary);
color: #fff;
font-weight: 700;
border-radius: 50%;
}
.cd-year-mini-cell--has-items::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
}
.cd-year-mini-cell--closure::after { background: var(--cd-color-closure); }
.cd-year-mini-cell--holiday::after { background: var(--cd-color-holiday); }
.cd-year-mini-cell--event::after { background: var(--cd-color-event); }
.cd-year-mini-cell--custom::after { background: var(--cd-color-custom); }
.cd-year-mini-cell--extended::after { background: var(--cd-color-extended); }
.cd-year-mini-cell--dim { opacity: 0.4; }
.cd-year-mini-cell--programme {
background: color-mix(in srgb, var(--cd-color-programme) 12%, var(--color-bg));
border-radius: 0;
}
.cd-year-mini-cell--programme-start { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.cd-year-mini-cell--programme-end { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
[data-theme="dark"] .cd-year-mini-cell.cd-year-mini-cell--programme { background: #3a564e; }
/* ─── Closure Quick-Reference ─── */
.cd-closure-list { display: flex; flex-direction: column; gap: 0; }
.cd-closure-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
font-size: var(--font-size-body);
}
.cd-closure-item:last-child { border-bottom: none; }
.cd-closure-date {
font-weight: 600;
min-width: 72px;
flex-shrink: 0;
font-size: var(--font-size-label);
}
.cd-closure-name { flex: 1; }
.cd-closure-badge {
font-size: var(--font-size-small);
font-weight: 600;
padding: 3px 8px 2px;
border-radius: 4px;
flex-shrink: 0;
}
.cd-closure-badge--closure { background: color-mix(in srgb, var(--cd-color-closure) 13%, transparent); color: var(--cd-color-closure); }
.cd-closure-badge--holiday { background: color-mix(in srgb, var(--cd-color-holiday) 13%, transparent); color: var(--cd-color-holiday); }
.cd-closure-badge--extended_hours { background: color-mix(in srgb, var(--cd-color-extended) 13%, transparent); color: var(--cd-color-extended); }
.cd-event-type-hint {
margin: 6px 0 0;
font-size: var(--font-size-small);
color: var(--color-text-light);
line-height: 1.45;
}
/* ─── Markdown-rendered document bodies (reset undoes browser list defaults) ─── */
#docBodyPreview ul, #consentFormSignBody ul, #docStaticViewBody ul,
#docBodyPreview ol, #consentFormSignBody ol, #docStaticViewBody ol {
padding-left: 1.5em;
margin: 6px 0;
}
#docBodyPreview li, #consentFormSignBody li, #docStaticViewBody li {
margin-bottom: 4px;
}
/* ─── Documents Section ─── */
.cd-doc-list { display: flex; flex-direction: column; gap: 0; }
.cd-doc-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
font-size: var(--font-size-body);
}
.cd-doc-item:last-child { border-bottom: none; }
.cd-doc-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--color-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.cd-doc-info { flex: 1; min-width: 0; }
.cd-doc-name { font-weight: 600; }
.cd-doc-type {
font-size: var(--font-size-small);
color: var(--color-text-light);
text-transform: capitalize;
}
.cd-doc-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.cd-doc-view-btn {
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 14px;
font-size: var(--font-size-label);
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s;
}
.cd-doc-view-btn:hover { opacity: 0.85; }
.cd-doc-delete-btn {
background: none;
border: none;
color: var(--color-text-light);
cursor: pointer;
font-size: var(--font-size-body);
padding: 4px;
transition: color 0.15s;
}
.cd-doc-delete-btn:hover { color: var(--color-error); }
/* ─── Action Required Cards ─── */
.cd-action-list { display: flex; flex-direction: column; gap: 8px; }
.cd-action-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-error);
border-radius: 10px;
cursor: pointer;
transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
@media (hover: hover) {
.cd-action-card:hover {
transform: translateY(-1px);
box-shadow: var(--color-shadow);
}
}
.cd-action-body { flex: 1; min-width: 0; }
.cd-action-title { font-weight: 600; font-size: var(--font-size-body); }
.cd-action-meta {
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-top: 3px;
}
.cd-action-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cd-action-pill {
background: rgba(192, 57, 43, 0.1);
color: var(--color-error);
border: 1px solid rgba(192, 57, 43, 0.25);
padding: 3px 10px;
border-radius: 999px;
font-size: var(--font-size-small);
font-weight: 500;
white-space: nowrap;
}
.cd-action-chevron {
color: var(--color-text-light);
font-size: 1rem;
line-height: 1;
flex-shrink: 0;
}
/* ─── Resources Settings List ─── */
.cd-settings-list { display: flex; flex-direction: column; }
.cd-settings-item {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.cd-settings-item:last-child { border-bottom: none; }
.cd-settings-item-info {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.cd-settings-item-date {
font-size: var(--font-size-small);
color: var(--color-text-light);
font-weight: 500;
}
.cd-settings-item-name { font-weight: 500; }
.cd-settings-item-desc { font-size: var(--font-size-small); }
.cd-settings-item-actions { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
/* ─── Calendar settings type filter pills ─── */
.cd-type-filter {
font-size: var(--font-size-small);
font-weight: 500;
padding: 3px 10px 2px;
border-radius: 999px;
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-text-light);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cd-type-filter.active { background: var(--color-text); border-color: var(--color-text); color: var(--color-card); }
.cd-type-filter--public_holiday.active { background: color-mix(in srgb, var(--cd-color-holiday) 20%, transparent); border-color: var(--cd-color-holiday); color: var(--cd-color-holiday); }
.cd-type-filter--closure.active { background: color-mix(in srgb, var(--cd-color-closure) 20%, transparent); border-color: var(--cd-color-closure); color: var(--cd-color-closure); }
.cd-type-filter--event.active { background: color-mix(in srgb, var(--cd-color-event) 20%, transparent); border-color: var(--cd-color-event); color: var(--cd-color-event); }
.cd-type-filter--programme.active { background: color-mix(in srgb, var(--cd-color-programme) 20%, transparent); border-color: var(--cd-color-programme); color: var(--cd-color-programme); }
.cd-type-filter--extended_hours.active { background: color-mix(in srgb, var(--cd-color-extended) 20%, transparent); border-color: var(--cd-color-extended); color: var(--cd-color-extended); }
/* ─── Resources dark mode (module-specific only) ─── */
[data-theme="dark"] .cd-view-btn.active {
background: #28322f;
}
[data-theme="dark"] .cd-year-month {
background: #28322f;
}
/* ─── Mobile tweaks ─── */
@media (max-width: 600px) {
.cd-year-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 400px) {
.cd-year-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
/* ============================================================ */
/* Teaching Assistants Module */
/* ============================================================ */
/* Messenger pending pulse dot - mirrors .hr-pending-dot */
.msgr-pending-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
animation: livePulse 1.5s ease-in-out infinite;
vertical-align: middle;
flex-shrink: 0;
margin-left: 5px;
}
/* TA pending pulse dot - mirrors .hr-pending-dot */
.ta-pending-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
animation: livePulse 1.5s ease-in-out infinite;
vertical-align: middle;
flex-shrink: 0;
margin-left: 5px;
}
/* Holiday Programme pending pulse dot - mirrors .hr-pending-dot */
.holiday-programme-pending-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
animation: livePulse 1.5s ease-in-out infinite;
vertical-align: middle;
flex-shrink: 0;
margin-left: 5px;
}
/* Teaching Assistant role badge */
.badge-purple {
background: #EDE9FE;
color: #5B21B6;
}
/* TA slot card */
.ta-slot-card {
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 12px;
transition: box-shadow 0.15s;
}
.ta-slot-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ta-slot-card.ta-slot-confirmed {
border-left: 3px solid var(--color-success, #16a34a);
}
.ta-slot-card.ta-slot-filled {
border-left: 3px solid #9CA3AF;
opacity: 0.85;
}
.ta-slot-card.ta-slot-cancelled {
opacity: 0.6;
}
.ta-slot-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.ta-slot-title {
font-weight: 600;
font-size: var(--font-size-body);
color: var(--color-text, #111827);
}
.ta-slot-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: var(--font-size-body);
color: var(--color-text-light, #6B7280);
margin-bottom: 6px;
}
.ta-slot-desc {
font-size: var(--font-size-body);
color: var(--color-text-light, #6B7280);
margin: 6px 0;
}
.ta-slot-actions {
margin-top: 10px;
display: flex;
align-items: center;
gap: 8px;
}
/* TA manager search result items */
#notifTaManagerResults > div {
transition: background-color 0.15s ease-out;
}
#notifTaManagerResults > div:hover {
background: var(--color-bg);
}
#notifTaManagerResults > div:last-child {
border-bottom: none;
}
.ta-section-heading {
font-size: var(--font-size-body);
font-weight: 600;
margin-bottom: 12px;
color: var(--color-text, #111827);
}
.attendance-section-heading {
font-size: var(--font-size-body);
font-weight: 600;
margin: 0 0 6px;
color: var(--color-primary);
}
.hr-settings-section-heading {
margin: 24px 0 12px;
}
.hr-staff-card {
background: var(--color-bg);
border-radius: 8px;
border: 1px solid var(--color-border);
padding: 16px;
margin-bottom: 12px;
}
.hr-staff-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.hr-staff-card-name {
font-weight: 600;
font-size: var(--font-size-body);
color: var(--color-text);
}
.hr-staff-card-delete {
padding: 0;
flex-shrink: 0;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hr-staff-card-fields {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hr-staff-card-fields label {
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-bottom: 4px;
}
/* ── HR Year Picker ───────────────────────────────────────── */
.hr-year-picker {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-border);
border-radius: 20px;
overflow: hidden;
background: var(--color-surface);
}
.hr-year-nav {
background: none;
border: none;
padding: 5px 14px;
cursor: pointer;
color: var(--color-text);
font-size: 20px;
line-height: 1;
transition: background 0.15s;
display: flex;
align-items: center;
}
.hr-year-nav:hover:not(:disabled) { background: var(--color-border); }
.hr-year-nav:disabled { opacity: 0.25; cursor: default; }
.hr-year-label {
padding: 5px 2px;
font-weight: 600;
font-size: var(--font-size-body);
min-width: 44px;
text-align: center;
color: var(--color-text);
user-select: none;
}
/* ── HR Workweek day toggle buttons ──────────────────────── */
.hr-ww-btn {
padding: 6px 14px;
border-radius: 6px;
border: 1px solid var(--color-border);
background: var(--color-bg);
color: var(--color-text);
cursor: pointer;
font-size: var(--font-size-body);
}
.hr-ww-btn--active {
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--color-bg);
font-weight: 600;
}
/* ── HR Team Balance ──────────────────────────────────────── */
.hr-team-cards { display: flex; flex-direction: column; gap: 10px; }
/* Mobile staff balance card */
.hr-bal-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-surface);
cursor: pointer;
transition: background 0.15s;
}
.hr-bal-card:active { background: var(--color-border); }
.hr-bal-card-name {
font-weight: 600;
font-size: var(--font-size-body);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hr-bal-chips {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.hr-bal-chip {
display: flex;
flex-direction: column;
align-items: center;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 4px 8px;
min-width: 42px;
}
.hr-bal-chip-code {
font-size: 10px;
font-weight: 700;
color: var(--color-text-light);
letter-spacing: 0.05em;
line-height: 1.2;
}
.hr-bal-chip-val {
font-size: 11px;
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
}
.hr-bal-card-arrow {
color: var(--color-text-light);
font-size: 14px;
flex-shrink: 0;
display: flex;
align-items: center;
}
/* ── My Leaves - activity log timeline ────────────────────── */
.hr-activity-log { display: flex; flex-direction: column; }
.hr-activity-row {
display: flex;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.hr-activity-row:last-child { border-bottom: none; }
.hr-activity-time {
min-width: 52px;
text-align: right;
font-size: var(--font-size-small);
color: var(--color-text-light);
line-height: 1.4;
flex-shrink: 0;
}
.hr-activity-body { flex: 1; line-height: 1.4; }
.ta-stats-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 12px;
}
.ta-stat-box {
flex: 1;
min-width: 100px;
background: var(--color-bg, #F9FAFB);
border: 1px solid var(--color-border, #E5E7EB);
border-radius: 8px;
padding: 14px 16px;
text-align: center;
}
.ta-stat-value {
font-size: var(--font-size-heading);
font-weight: 700;
color: var(--color-primary, #0f766e);
margin-bottom: 4px;
}
.ta-stat-label {
font-size: var(--font-size-label);
color: var(--color-text-light, #6B7280);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ta-applicant-row {
padding: 6px 0;
border-bottom: 1px solid var(--color-border, #F3F4F6);
font-size: var(--font-size-body);
}
.ta-applicant-row:last-child {
border-bottom: none;
}
/* TA location chips */
.ta-location-add-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.ta-location-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.ta-location-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-primary);
color: #fff;
border-radius: 999px;
padding: 4px 12px 4px 14px;
font-size: var(--font-size-body);
font-weight: 500;
}
.ta-location-chip-remove {
background: none;
border: none;
cursor: pointer;
color: inherit;
font-size: var(--font-size-body);
line-height: 1;
padding: 0;
opacity: 0.6;
}
.ta-location-chip-remove:hover {
opacity: 1;
}
/* ============================================================
Accessibility - Reduced Motion
============================================================ */
/* ============================================================
My Family - Redesigned
============================================================ */
.constellation-root {
position: relative;
}
.family-canvas {
background: var(--color-bg);
border-radius: 10px;
border: 1px solid var(--color-border);
overflow: hidden;
}
.constellation-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 55vh;
padding: 40px 0;
gap: 36px;
}
.constellation-node.no-anim {
animation: none;
opacity: 1;
}
.constellation-row {
display: flex;
gap: 44px;
justify-content: center;
align-items: flex-start;
}
.constellation-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
opacity: 0;
animation: nodeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.node-circle {
width: 132px;
height: 132px;
border-radius: 50%;
overflow: hidden;
transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.18s ease;
box-shadow: 0 4px 18px rgba(107, 76, 138, 0.12);
}
[data-theme="dark"] .node-circle {
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.constellation-node:not(.constellation-node--self):active .node-circle {
transform: scale(0.91);
}
@media (hover: hover) {
.constellation-node:not(.constellation-node--self):hover .node-circle {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 10px 28px rgba(107, 76, 138, 0.18);
}
}
.node-circle img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.node-circle-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
color: #fff;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.node-name {
font-size: var(--font-size-label);
font-weight: 600;
color: var(--color-text);
text-align: center;
max-width: 96px;
line-height: 1.35;
letter-spacing: 0.01em;
}
@keyframes nodeIn {
from { opacity: 0; transform: scale(0.72); }
to { opacity: 1; transform: scale(1); }
}
@keyframes nodeHop {
0% { transform: translate(var(--hop-dx), var(--hop-dy)) scale(1); }
45% { transform: translate(calc(var(--hop-dx) * 0.5), calc(var(--hop-dy) * 0.5)) scale(1.18); }
100% { transform: translate(0px, 0px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
Vendor Chat
============================================================ */
.vendor-chat-root {
display: flex;
height: calc(100vh - 120px);
min-height: 400px;
background: var(--color-bg);
border-radius: 16px;
border: 1px solid var(--color-border);
overflow: hidden;
}
/* Sidebar - family list */
.vendor-chat-sidebar {
width: 280px;
min-width: 220px;
flex-shrink: 0;
display: flex;
flex-direction: column;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
}
.vendor-chat-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--color-border);
gap: 10px;
}
.vendor-chat-sidebar-header h2 {
font-size: var(--font-size-body);
font-weight: 700;
margin: 0;
white-space: nowrap;
}
.vendor-family-list {
flex: 1;
overflow-y: auto;
}
.vendor-family-item {
padding: 12px 16px;
cursor: pointer;
border-bottom: 1px solid var(--color-border);
transition: background 0.15s;
}
.vendor-family-item:hover { background: var(--color-hover); }
.vendor-family-item.active { background: var(--color-primary-light, rgba(100,200,180,0.12)); }
.vendor-family-item-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 3px;
}
.vendor-family-name {
font-weight: 600;
font-size: var(--font-size-body);
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.vendor-family-time {
font-size: var(--font-size-small);
color: var(--color-text-light);
white-space: nowrap;
}
.vendor-family-preview {
font-size: var(--font-size-label);
color: var(--color-text-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vendor-window-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--color-primary);
color: #fff;
border-radius: 9px;
font-size: var(--font-size-small);
font-weight: 700;
}
/* Thread panel */
.vendor-chat-thread {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-bg);
}
.vendor-chat-thread-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.vendor-chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.vendor-chat-no-messages {
text-align: center;
padding: 32px;
font-size: var(--font-size-body);
}
/* Message bubbles */
.vendor-msg { display: flex; flex-direction: column; max-width: 72%; }
.vendor-msg-out { align-self: flex-end; align-items: flex-end; }
.vendor-msg-in { align-self: flex-start; align-items: flex-start; }
.vendor-msg-bubble {
padding: 9px 13px;
border-radius: 14px;
font-size: var(--font-size-body);
line-height: 1.45;
word-break: break-word;
white-space: pre-wrap;
}
.vendor-msg-out .vendor-msg-bubble {
background: var(--color-primary);
color: #fff;
border-bottom-right-radius: 4px;
}
.vendor-msg-in .vendor-msg-bubble {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-bottom-left-radius: 4px;
}
.vendor-msg-meta {
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-top: 3px;
padding: 0 2px;
}
.vendor-msg-sender { font-weight: 600; }
/* Compose bar */
.vendor-chat-compose {
border-top: 1px solid var(--color-border);
padding: 10px 14px;
background: var(--color-surface);
}
.vendor-chat-compose-row {
display: flex;
gap: 8px;
align-items: flex-end;
}
.vendor-chat-input {
flex: 1;
padding: 9px 12px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-body);
resize: none;
min-height: 38px;
max-height: 120px;
line-height: 1.4;
font-family: inherit;
}
.vendor-chat-input:focus { outline: none; border-color: var(--color-primary); }
/* Window info banner */
.vendor-window-info {
font-size: var(--font-size-small);
text-align: center;
padding: 5px 10px;
border-radius: 6px;
margin-bottom: 8px;
}
.vendor-window-open { background: rgba(46,158,94,0.12); color: var(--color-success); }
.vendor-window-closed { background: rgba(255,165,0,0.12); color: #b36b00; }
/* Mobile */
@media (max-width: 600px) {
.vendor-chat-root { flex-direction: column; height: auto; min-height: 0; }
.vendor-chat-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); max-height: 220px; }
.vendor-chat-thread { min-height: 300px; }
}
/* ============================================================
Messenger
============================================================ */
.msgr-root {
display: flex;
border: 1px solid var(--color-border);
border-radius: 12px;
overflow: hidden;
min-height: 500px;
max-height: 70vh;
background: var(--color-bg);
}
/* ── Sidebar ── */
.msgr-sidebar {
width: 300px;
min-width: 300px;
display: flex;
flex-direction: column;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
overflow: hidden;
min-height: 0;
}
.msgr-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--color-border);
}
.msgr-sidebar-header h2 { margin: 0; font-size: var(--font-size-heading); }
.msgr-icon-btn {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--color-primary);
color: #fff;
border: none;
cursor: pointer;
font-size: 15px;
flex-shrink: 0;
transition: opacity 0.15s;
}
.msgr-icon-btn:hover { opacity: 0.85; }
.msgr-search-bar {
padding: 8px 10px;
border-bottom: 1px solid var(--color-border);
position: relative;
}
.msgr-search-clear {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 0;
color: var(--color-text-light);
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 13px;
transition: color 0.15s;
}
.msgr-search-clear:hover {
color: var(--color-text);
}
.msgr-search-input {
width: 100%;
padding: 7px 32px 7px 10px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-body);
box-sizing: border-box;
}
.msgr-scrollable-area {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.msgr-conv-list {
flex: 1;
}
.msgr-conv-list .empty-state-text {
padding: 20px 16px;
}
/* Conversation-list skeleton - shown only on the genuine first-ever load (every
later open paints instantly from the durable cache). Mirrors .msgr-conv-item
geometry so the real list swaps in without a layout jump. The per-row phase
offset on the shimmer makes the wait feel like a living surface, not a freeze. */
.msgr-conv-skeleton-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--color-border);
}
.msgr-conv-skeleton-row .skeleton-circle { width: 40px; height: 40px; flex-shrink: 0; }
.msgr-conv-skeleton-lines {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.msgr-conv-skeleton-lines .line-1 { width: 42%; }
.msgr-conv-skeleton-lines .line-2 { width: 78%; }
.msgr-conv-skeleton-row:nth-child(2) .skeleton { animation-delay: 0.08s; }
.msgr-conv-skeleton-row:nth-child(3) .skeleton { animation-delay: 0.16s; }
.msgr-conv-skeleton-row:nth-child(4) .skeleton { animation-delay: 0.24s; }
.msgr-conv-skeleton-row:nth-child(5) .skeleton { animation-delay: 0.32s; }
.msgr-conv-skeleton-row:nth-child(6) .skeleton { animation-delay: 0.40s; }
.msgr-retention-notice {
padding: 10px 14px;
font-size: var(--font-size-small);
color: var(--color-text-light);
text-align: center;
border-top: 1px solid var(--color-border);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
/* Conversation items */
.msgr-conv-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
transition: background 0.15s, transform 100ms var(--ease-out);
border-bottom: 1px solid var(--color-border);
/* Bypass iOS WebKit's tap-delay heuristics that fire :hover on the first
tap and withhold the click until the second (the "two taps required
after swipe-back" bug — L162 epilogue, v2.92). On touch devices iOS
treats a div with :hover as a hover-discovery target after an
inconclusive prior gesture (a swipe whose touchend got classified as
a drag, suppressing the click), and the next conv-item tap shows the
:hover background without firing the click. `manipulation` short-
circuits the heuristic and dispatches click on the first touchend. */
touch-action: manipulation;
/* The row is a tap/long-press gesture target, never selectable text. Without
this, a long-press starts the native text-selection gesture, which grabs
the word under the finger (the notif popup's title appears there). */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* Hover background only on devices with true hover capability — touch
devices (iOS, Android) would otherwise have the :hover background "stick"
after a tap, indistinguishable from .active, masking whether the click
actually fired. The exact misdiagnosis the user reported as "highlight
moves but thread doesn't open." */
@media (hover: hover) {
.msgr-conv-item:hover { background: var(--color-surface-hover, rgba(0,0,0,0.03)); }
}
.msgr-conv-item:active { transform: scale(0.99); }
.msgr-conv-item.active { background: var(--color-surface-hover, rgba(0,0,0,0.04)); }
.msgr-conv-avatar {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.msgr-avatar-img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.msgr-avatar-initials, .msgr-avatar-group {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px; /* fixed: 40×40px circle - font-size must not scale with preset */
color: #fff;
background: var(--color-primary);
}
.msgr-avatar-group {
background: var(--color-text-light);
font-size: 13px; /* fixed: same circle */
}
.msgr-avatar-plant {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
/* ── WhatsApp bridge UI ─────────────——───────────────────────────────────────── */
/* Avatar container for WA conversations - wraps initials + badge */
.msgr-conv-avatar { position: relative; flex-shrink: 0; }
/* WA avatar uses primary theme color */
.msgr-avatar-wa { background: var(--color-primary) !important; color: #fff !important; }
/* Point-of-Contact initial chip pinned to bottom-right of the avatar circle.
Visually matches .hr-cal-initial-chip (Leave Calendar): same color SoT
(resolveUserColor in shared.js), same first-initial pattern. Positioned
as an avatar overlay with a surface-colored halo to lift it off the photo. */
.msgr-poc-chip {
position: absolute;
bottom: -3px;
right: -4px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 4px;
background: var(--color-primary);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
border: 2px solid var(--color-surface);
pointer-events: none;
}
/* ── Source Nav (vertical column desktop / scroll strip mobile) ── */
.msgr-source-nav {
display: flex;
flex-direction: column;
width: 72px;
min-width: 72px;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
padding: 8px 0;
gap: 2px;
overflow-y: auto;
overflow-x: hidden;
flex-shrink: 0;
}
.msgr-source-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
padding: 10px 6px;
border: none;
background: transparent;
color: var(--color-text-light);
cursor: pointer;
transition: background 0.15s, color 0.15s;
position: relative;
border-radius: 0;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.msgr-source-nav-item::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
background: var(--item-color, var(--color-primary));
border-radius: 0 2px 2px 0;
transition: height 0.2s;
}
.msgr-source-nav-item.is-active::before { height: 28px; }
.msgr-source-nav-item.is-active {
color: var(--color-text);
background: var(--color-surface-hover);
}
.msgr-source-nav-item:hover:not(.is-active) { background: var(--color-surface-hover); }
.msgr-source-nav-icon { font-size: 20px; line-height: 1; }
.msgr-source-nav-label {
font-size: 10px;
font-weight: 600;
text-align: center;
line-height: 1.2;
word-break: break-word;
}
.msgr-source-nav-strip { display: none; }
/* Thread header subtitle */
.msgr-thread-subtitle { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* WA external sender label in message bubbles */
.msgr-msg-sender-wa {
color: #25d366;
font-weight: 600;
}
/* Bridge status indicator in settings */
.msgr-wa-status { font-size: var(--font-size-label); font-weight: 500; }
.msgr-wa-status-online { color: var(--color-whatsapp); }
.msgr-wa-status-idle { color: var(--color-text-light); }
.msgr-wa-status-unknown { color: var(--color-text-light); font-style: italic; }
/* Manage Communication — repeated section card wrapper */
.comm-section-card {
background: var(--color-bg);
border-radius: 10px;
border: 1px solid var(--color-border);
padding: 20px;
margin-bottom: 12px;
}
/* Role permissions grid */
.msgr-access-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.msgr-access-grid thead th {
padding: 0 0 10px 0;
text-align: center;
font-size: var(--font-size-small);
font-weight: 600;
color: var(--color-text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.msgr-access-grid thead th:first-child { text-align: left; width: 46%; }
.msgr-access-grid tbody td {
padding: 10px 0;
text-align: center;
border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
vertical-align: middle;
}
.msgr-access-grid tbody td:first-child { text-align: left; }
.msgr-grid-feature { display: flex; flex-direction: column; gap: 2px; padding-right: 12px; }
.msgr-grid-label { font-size: var(--font-size-body); font-weight: 500; color: var(--color-text); }
.msgr-grid-desc { font-size: var(--font-size-small); color: var(--color-text-light); }
.msgr-grid-cb { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }
.color-whatsapp { color: var(--color-whatsapp); }
/* ── end WhatsApp bridge UI ──────────────────——───────────────────────────────── */
.msgr-conv-info { flex: 1; min-width: 0; }
.msgr-conv-header-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
}
.msgr-conv-name {
font-weight: 600;
font-size: var(--font-size-body);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msgr-dm-name-link:hover {
color: var(--color-primary);
text-decoration: underline;
cursor: pointer;
}
.msgr-conv-time {
font-size: var(--font-size-small);
color: var(--color-text-light);
flex-shrink: 0;
}
.msgr-conv-preview-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.msgr-conv-preview {
font-size: var(--font-size-label);
color: var(--color-text-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
/* Telegram-style "Draft:" preview — the red label flags an unsent message in the
conversation list; the draft body keeps the normal muted preview colour. */
.msgr-draft-label { color: var(--color-danger, #e74c3c); font-weight: 600; }
.msgr-unread-badge {
background: var(--color-danger, #e74c3c);
color: #fff;
font-size: var(--font-size-small);
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 1px 5px 0; /* +1px top notches numeral down 1px optically */
flex-shrink: 0;
}
.msgr-source-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.msgr-source-badge {
position: absolute;
top: -5px;
right: -7px;
background: var(--color-danger, #e74c3c);
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 2px 4px 0; /* +2px top notches numeral down 1px optically */
line-height: 1;
pointer-events: none;
}
/* Persistent "needs reply" indicator - POC has read but not replied yet.
Solid red dot (no count, no pulse) so it reads quieter than a fresh-unread badge. */
.msgr-needs-reply-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-danger, #e74c3c);
flex-shrink: 0;
display: inline-block;
}
.msgr-source-needs-reply-dot {
position: absolute;
top: -2px;
right: -4px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-danger, #e74c3c);
border: 2px solid var(--color-bg, #fff);
pointer-events: none;
}
/* ── Thread ── */
.msgr-thread {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--color-surface);
position: relative; /* anchor for the floating scroll-to-latest button */
}
/* Scroll-to-latest button — floats above the compose bar, appears when the
user has scrolled up from the bottom of the thread (.show toggled in JS). */
.msgr-scroll-btn {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%) translateY(8px);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 2px 10px rgba(0,0,0,0.18);
color: var(--color-text);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
z-index: 5;
}
.msgr-scroll-btn.show {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.msgr-scroll-btn:hover { color: var(--color-primary); }
/* Keep the .fi base's inline-flex centering — don't override display, or the glyph
falls back to text-baseline and rides high in the circle. */
.msgr-scroll-btn .fi { font-size: 20px; line-height: 1; position: relative; top: 2px; }
.msgr-thread-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
.msgr-back-btn {
display: none;
background: none;
border: none;
font-size: var(--font-size-heading);
cursor: pointer;
color: var(--color-text);
padding: 4px 8px;
transition: transform 100ms var(--ease-out), color 0.15s;
}
.msgr-back-btn:active { transform: scale(0.88); }
.msgr-thread-header-info { cursor: pointer; flex: 1; min-width: 0; }
.msgr-thread-title { font-weight: 600; font-size: var(--font-size-heading); display: block; }
.msgr-thread-subtitle { font-size: var(--font-size-small); color: var(--color-text-light); }
/* Thread header avatar */
.msgr-thread-avatar {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-surface);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: var(--color-primary);
flex-shrink: 0;
cursor: pointer;
}
.msgr-thread-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.msgr-thread-avatar .msgr-avatar-initials { width: 100%; height: 100%; }
/* Group photo section in member modal */
.msgr-group-photo-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 0 16px;
margin-bottom: 20px;
}
.msgr-group-photo-wrap {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
background: var(--color-surface);
border: 2px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
color: var(--color-primary);
position: relative;
}
.msgr-group-photo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.msgr-group-photo-container {
position: relative;
display: inline-flex;
}
.msgr-group-photo-badge {
position: absolute;
bottom: 0;
right: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-primary);
border: 2px solid var(--color-card);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
pointer-events: none;
}
/* Centered modal title for group info */
.msgr-member-modal-title {
text-align: center;
margin: 8px 0 0;
font-size: var(--font-size-h2);
}
.msgr-member-count {
text-align: center;
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-top: 4px;
}
/* Conversation ID block in the chat info modal - two-row card */
.msgr-conv-id-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 10px auto 0;
padding: 8px 12px;
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
border-radius: 8px;
max-width: 100%;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.msgr-conv-id-label {
color: var(--color-text-light);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.7rem;
}
.msgr-conv-id-value-row {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
}
.msgr-conv-id {
font-family: 'Courier New', Courier, monospace;
color: var(--color-text);
background: transparent;
padding: 0;
user-select: all;
word-break: break-all;
font-size: var(--font-size-small);
flex: 1;
}
.msgr-conv-id-copy {
background: transparent;
border: none;
cursor: pointer;
padding: 2px 4px;
color: var(--color-text-light);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
border-radius: 4px;
flex-shrink: 0;
transition: color 0.15s, background 0.15s;
}
.msgr-conv-id-copy:hover { color: var(--color-primary); background: var(--color-card); }
.msgr-conv-id-copy--ok { color: var(--color-success); }
/* Group name row - title + edit affordance */
.msgr-group-name-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0;
}
.msgr-group-name-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.msgr-group-name-edit-btn {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--color-text-light);
border-radius: 8px;
font-size: 15px;
transition: color 0.15s, background 0.15s;
}
.msgr-group-name-edit-btn:hover { color: var(--color-primary); background: rgba(107,76,138,0.08); }
/* Group name edit - full-width input + below actions */
.msgr-group-name-edit-wrap { width: 100%; }
.msgr-group-name-input-row {
position: relative;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.msgr-group-name-input {
width: 100%;
padding: 8px 44px 8px 12px;
border: 1.5px solid var(--color-primary);
border-radius: 8px;
font-size: var(--font-size-heading);
font-weight: 600;
outline: none;
box-shadow: 0 0 0 3px rgba(107,76,138,0.12);
background: var(--color-card);
color: var(--color-text);
box-sizing: border-box;
}
.msgr-group-name-counter {
position: absolute;
right: 10px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
font-size: 11px;
font-weight: 500;
color: var(--color-text-light);
pointer-events: none;
white-space: nowrap;
}
.msgr-group-name-counter.near-limit { color: #b07d00; }
.msgr-group-name-counter.at-limit { color: var(--color-error); }
.msgr-group-name-actions {
display: flex;
gap: 8px;
}
.msgr-group-name-actions .btn {
flex: 1;
justify-content: center;
}
[data-theme="dark"] .msgr-group-name-input { background: #253030; }
@keyframes msgr-spin { to { transform: rotate(360deg); } }
.msgr-spin { display: inline-block; animation: msgr-spin 0.8s linear infinite; }
.msgr-thread-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.msgr-messages .empty-state-text {
font-size: var(--font-size-small);
}
.msgr-new-choice-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 10px;
cursor: pointer;
text-align: left;
transition: background 0.15s, border-color 0.15s;
}
@media (hover: hover) {
.msgr-new-choice-btn:hover {
background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
border-color: var(--color-primary);
}
}
.msgr-new-choice-btn .fi {
font-size: 1.3rem;
color: var(--color-primary);
flex-shrink: 0;
}
.msgr-new-choice-label {
font-weight: 600;
font-size: var(--font-size-body);
color: var(--color-text);
}
.msgr-new-choice-sub {
font-size: var(--font-size-small);
color: var(--color-text-light);
margin-top: 2px;
}
.msgr-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
/* ── Message Bubbles ── */
.msgr-msg {
max-width: 72%;
display: flex;
flex-direction: column;
position: relative;
}
.msgr-msg-out { align-self: flex-end; }
.msgr-msg-in { align-self: flex-start; }
.msgr-msg-sender {
font-size: var(--font-size-small);
font-weight: 600;
color: var(--color-primary);
margin-bottom: 2px;
padding-left: 4px;
}
.msgr-wa-sender {
/* color set via inline style */
}
.msgr-msg-bubble {
padding: 8px 12px;
border-radius: 14px;
font-size: var(--font-size-msgr);
line-height: 1.4;
/* flow-root so the floated timestamp (Telegram-style trailing time) is
contained inside the bubble even when there are no reactions below it. */
display: flow-root;
}
/* The message text itself. white-space:pre-wrap lives here, NOT on the bubble:
the bubble now also holds the sender name, timestamp and reactions, and the
template's inter-element newlines would otherwise render as blank lines. */
.msgr-msg-text {
white-space: pre-wrap;
word-break: break-word;
}
@media (max-width: 640px) {
.msgr-msg-bubble { user-select: none; -webkit-user-select: none; }
}
.msgr-msg-out .msgr-msg-bubble {
background: var(--color-primary);
color: #fff;
border-bottom-right-radius: 4px;
}
.msgr-msg-in .msgr-msg-bubble {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-bottom-left-radius: 4px;
}
/* Staff replies in WA conversations: right-aligned but white bubble */
.msgr-msg-staff-reply .msgr-msg-bubble {
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-bottom-right-radius: 4px;
}
.msgr-msg-staff-reply .msgr-voice-player { background: var(--color-surface); border: 1px solid var(--color-border); }
.msgr-msg-staff-reply .msgr-voice-play-btn { background: var(--color-primary); color: #fff; }
.msgr-msg-staff-reply .msgr-wv-bar { background: var(--color-border); }
.msgr-msg-staff-reply .msgr-wv-bar.played { background: var(--color-primary); }
.msgr-msg-staff-reply .msgr-voice-dur { color: var(--color-text-light); }
/* Clickable URLs inside message text + captions */
.msgr-link { text-decoration: underline; }
.msgr-msg-out .msgr-link { color: #fff; }
.msgr-msg-in .msgr-link,
.msgr-msg-staff-reply .msgr-link { color: var(--color-primary); }
/* General auto-linked URL (announcement bodies, etc.) - the default class
used by linkifyText() when no link class is passed. */
.inline-link { color: var(--color-primary); text-decoration: underline; word-break: break-word; }
.msgr-msg-deleted .msgr-msg-bubble {
opacity: 0.6;
font-style: italic;
}
/* Failed send — keep the message fully legible (the user must read it to decide to
resend); a red outline on the bubble + the retry row below carry the status. */
.msgr-msg-failed { opacity: 1; }
.msgr-msg-failed .msgr-msg-bubble,
.msgr-msg-failed .msgr-bubble-photo {
box-shadow: 0 0 0 1.5px var(--color-danger, #e74c3c);
}
/* "Not delivered · Tap to retry" affordance under a failed bubble. */
.msgr-msg-retry {
display: flex;
align-items: center;
gap: 4px;
margin-top: 3px;
padding: 1px 4px;
font-size: var(--font-size-small);
color: var(--color-danger, #e74c3c);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.msgr-msg-retry i { font-size: 11px; line-height: 1; }
.msgr-msg-retry:active { opacity: 0.6; }
.msgr-msg-out .msgr-msg-retry { align-self: flex-end; }
.msgr-msg-in .msgr-msg-retry { align-self: flex-start; }
/* Conv-list "a message didn't send" alert — red pill with a ! (action required, so it
pulses per the Red Pulse Notification Rule). */
.msgr-send-failed-badge {
background: var(--color-danger, #e74c3c);
color: #fff;
font-size: var(--font-size-small);
font-weight: 800;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 5px 1px;
flex-shrink: 0;
margin-left: 4px;
animation: msgrFailedPulse 1.6s ease-in-out infinite;
}
@keyframes msgrFailedPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
50% { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0); }
}
.msgr-msg-meta {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 4px 0;
font-size: var(--font-size-small);
color: var(--color-text-light);
}
.msgr-msg-out .msgr-msg-meta { justify-content: flex-end; }
.msgr-msg-edited { font-style: italic; }
/* ── Telegram-style unified text bubble ──
For text messages the sender name, message text, timestamp and reactions all
live INSIDE .msgr-msg-bubble instead of as separate stacked rows. Media
messages (.msgr-msg-media-msg) keep their own chrome and external meta row. */
.msgr-msg-bubble .msgr-msg-sender { padding-left: 0; margin-bottom: 2px; }
/* Bottom strip = reactions + timestamp. With NO reactions it floats into the last
text line (trailing time, Telegram-style). Once a reaction is present it reflows
into its own row: reactions on the LEFT, timestamp on the RIGHT. */
.msgr-msg-bubble .msgr-msg-bottom {
float: right;
margin-left: 10px;
line-height: 1;
transform: translateY(5px); /* drop onto the last text line's baseline */
}
.msgr-msg-bottom .msgr-msg-meta {
float: none;
display: inline-flex;
gap: 3px;
padding: 0;
margin: 0;
}
.msgr-msg-bottom .msgr-reactions { margin-top: 0; }
.msgr-msg-bubble:has(.msgr-reactions:not(:empty)) .msgr-msg-bottom {
float: none;
clear: both;
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 0;
transform: none;
}
.msgr-msg-bubble:has(.msgr-reactions:not(:empty)) .msgr-msg-bottom .msgr-msg-meta {
margin-left: auto; /* push the time to the right of the reactions row */
}
/* Keep sender, timestamp and ticks legible on the coloured outgoing fill now that
they sit inside the bubble. Excludes staff-reply bubbles (right-aligned but white). */
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-msg-sender { color: rgba(255,255,255,0.92) !important; }
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-msg-meta,
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-msg-time,
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-tick-sent { color: rgba(255,255,255,0.8); }
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-tick-read { color: #fff; }
/* Reply reference inside an outgoing bubble: translucent-white so it reads on the fill. */
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-reply-ref {
background: rgba(255,255,255,0.16);
border-left-color: rgba(255,255,255,0.7);
}
.msgr-msg-out:not(.msgr-msg-staff-reply) .msgr-msg-bubble .msgr-reply-ref-text { color: rgba(255,255,255,0.82); }
/* Ticks */
.msgr-tick { font-size: var(--font-size-small); letter-spacing: -2px; }
.msgr-tick-sent { color: var(--color-text-light); }
.msgr-tick-read { color: var(--color-msgr-tick-read); }
.msgr-tick-pending { color: var(--color-text-light); letter-spacing: 0; }
/* Reply reference */
.msgr-reply-ref {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px 4px 10px;
margin-bottom: 2px;
border-left: 3px solid var(--color-primary);
border-radius: 4px;
background: rgba(0,0,0,0.04);
cursor: pointer;
font-size: var(--font-size-small);
}
.msgr-reply-ref-text-col {
flex: 1;
min-width: 0; /* allow ellipsis inside flex */
overflow: hidden;
}
.msgr-reply-ref-name { font-weight: 600; display: block; font-size: var(--font-size-small); }
.msgr-reply-ref-text { color: var(--color-text-light); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgr-reply-ref-thumb {
width: 36px;
height: 36px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
/* Pending message - animated bouncing dots */
@keyframes msgrDotBounce {
0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
30% { transform: translateY(-3px); opacity: 1; }
}
.msgr-tick-pending .msgr-dot {
display: inline-block;
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
animation: msgrDotBounce 1.1s ease-in-out infinite;
margin: 0 1px;
vertical-align: middle;
}
.msgr-tick-pending .msgr-dot:nth-child(2) { animation-delay: 0.18s; }
.msgr-tick-pending .msgr-dot:nth-child(3) { animation-delay: 0.36s; }
/* Media in bubbles */
.msgr-msg-media { margin-bottom: 4px; position: relative; overflow: hidden; }
.msgr-msg-img {
max-width: 100%;
max-height: 280px;
border-radius: 10px;
cursor: pointer;
display: block;
/* iOS WebKit fires its native image callout (Share / Save to Photos / Copy)
on long-press of an ![]()
, intercepting our JS long-press timer before the
emoji react menu can open. Suppress the callout so the bubble's long-press
handler wins; short-tap still opens the lightbox via onclick. */
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Video bubbles size to the video's TRUE aspect ratio so portrait and wide clips are
never center-cropped (the old fixed 4/3 + object-fit:cover chopped everything that
wasn't 4:3). The wrapper carries the ratio: --msgr-ar / --msgr-w are set inline from
the stored media_meta dimensions (recipient's first paint), or by _msgrApplyVideoBox
once metadata loads (old messages without stored dims). The video is absolutely
positioned to fill the box. Until the ratio is known the default 4/3 box holds the
loading skeleton. --msgr-w is pre-fitted so height stays within the 360px cap; that
cap is just a safety net, and max-width:100% keeps it responsive on narrow screens.
object-fit:contain guarantees no crop even if a poster's ratio differs by a rounding px. */
.msgr-msg-media:has(> .msgr-msg-video) {
width: var(--msgr-w, 240px);
max-width: 100%;
aspect-ratio: var(--msgr-ar, 4 / 3);
max-height: 440px; /* mirrors _msgrVideoBoxWidth MAX_H so a portrait clip fills the column */
border-radius: 10px;
overflow: hidden;
}
.msgr-msg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 10px;
display: block;
background: #1a1a1a;
object-fit: contain;
}
/* ── Loading media placeholder ──
PHOTOS: if the message carries an inline base64 LQIP (media_meta.jpeg_thumbnail,
set on every Canopy-sent photo), the box shows a BLURRED blow-up of it (Telegram-
style blur-up) while the full image downloads, then _msgrPatchMediaSrc blooms the
sharp photo in on top and crossfades the blur away (.msgr-media-lqip /
.msgr-msg-lqip-layer below). When there's NO LQIP (some WhatsApp-inbound photos)
it falls back to the black square + shimmer sheen, held until the full image loads.
VIDEOS: keep their own calm sage-on-cream skeleton; this rule stops matching the
moment a [poster] is set (_msgrAttachPosterCapture, or a bridge jpeg_thumbnail),
so the animation halts cleanly with no JS. */
.msgr-msg-video:not([poster]) {
background-color: #e8ecdb;
background-image:
linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%),
linear-gradient(135deg, #eef1e1 0%, #e2e6d1 100%);
background-size: 200% 100%, 100% 100%;
background-repeat: no-repeat;
background-position: 200% 0, 0 0;
animation: msgrSkeletonDrift 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Dark thread is near-black (--color-bg #111313). The old skeleton lifted the box to
#1f2422 with a 135deg gradient whose top-left corner (#252b28) was brighter still, so
the box perimeter read as a hard light "outline" around the loading clip. Flatten it to
a single fill only a hair above the thread - the box stays just perceptible, but its
edge no longer draws a bright line - and keep the diagonal sheen as the loading cue. */
[data-theme="dark"] .msgr-msg-video:not([poster]) {
background-color: #171b1a;
background-image:
linear-gradient(105deg, transparent 30%, rgba(205, 222, 210, 0.08) 50%, transparent 70%);
}
/* Photo placeholder: a box reserved at photo size. CONDITIONAL loading state - the box
carries only a barely-there tint up front; the visible loading cue (dark square + a
shimmer sweep) is DELAYED ~260ms (the animation-delay below). A photo that resolves from
cache within that window is swapped in before any loading state is seen, so fast/cached
photos never flash a placeholder - only a genuine wait surfaces the shimmer. The box is
replaced by the real image (scale-bloom) once it loads; see .msgr-img-bloom. */
.msgr-msg-img.msgr-img-pending {
width: min(72vw, 240px);
aspect-ratio: 1;
height: auto;
border-radius: 10px;
object-fit: cover;
background-color: rgba(120, 130, 124, 0.10);
background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.13) 50%, transparent 70%);
background-size: 200% 100%;
background-repeat: no-repeat;
background-position: 200% 0;
animation:
msgrPhotoShimmer 1.4s linear 260ms infinite,
msgrImgArm 200ms var(--ease-out) 260ms forwards;
}
@keyframes msgrImgArm { to { background-color: #1a1a1a; } }
/* Dark chat background is near-black (--color-bg #111313), so the armed square lifts to a
visible charcoal; light mode arms to a true dark square on the cream surface. */
[data-theme="dark"] .msgr-msg-img.msgr-img-pending {
background-color: rgba(200, 215, 208, 0.06);
background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.10) 50%, transparent 70%);
animation:
msgrPhotoShimmer 1.4s linear 260ms infinite,
msgrImgArmDark 200ms var(--ease-out) 260ms forwards;
}
@keyframes msgrImgArmDark { to { background-color: #2b2f2f; } }
/* Photo entrance: a snappy SCALE BLOOM, added by _msgrPatchMediaSrc once the image has
loaded. The picture grows from 90% to full while fading in, with a small spring
overshoot - replacing the old ~1.2s "develop from black" reveal. The final size is set
inline before this runs, so the bloom scales the photo at its true aspect (no black
backdrop, no size morph). A per-photo animation-delay (set inline) staggers a burst so
several photos bloom in sequence down the thread. */
@keyframes msgrPhotoBloom {
0% { opacity: 0; transform: scale(0.9); }
65% { opacity: 1; transform: scale(1.025); }
100% { opacity: 1; transform: scale(1); }
}
.msgr-msg-img.msgr-img-bloom {
transform-origin: center center;
animation: msgrPhotoBloom 320ms var(--ease-out) both;
}
/* ── Blur-up LQIP placeholder ──
When a pending photo has an inline base64 LQIP, render a blurred blow-up of it
behind the (src-less) main img instead of the shimmer. Specificity (0,4,0) beats
the dark-mode pending rule above so the shimmer is suppressed in both themes. The
main img sits on top (z-index 1) and is transparent until its src resolves, so the
blur shows through; _msgrPatchMediaSrc then blooms the sharp photo in and removes
this layer. */
.msgr-msg-media.msgr-media-lqip .msgr-msg-img.msgr-img-pending {
background: transparent;
background-image: none;
animation: none;
position: relative;
z-index: 1;
}
.msgr-msg-lqip-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.08); /* push the blur's soft edges past the clip so no fringe shows */
filter: blur(12px);
z-index: 0;
pointer-events: none;
transition: opacity 320ms ease-out;
}
.msgr-msg-lqip-layer.msgr-lqip-gone { opacity: 0; }
/* ── Telegram-style photo album (mosaic) ──
N photos sharing a media_group_id render as ONE tiled bubble. Each tile reuses the
standard .msgr-msg-media (so the blur-up LQIP, the % upload overlay and the reveal
all work unchanged), sized to fill its grid cell via object-fit:cover. Albums are
2-4 photos (the send cap); a larger one shows 4 tiles with a "+N" overlay. */
.msgr-album-bubble { position: relative; }
.msgr-album-grid {
display: grid;
gap: 2px;
width: min(72vw, 280px);
border-radius: 14px;
overflow: hidden;
background: var(--color-card); /* shows through the 2px tile seams */
}
.msgr-album-n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1.18; }
.msgr-album-n3 {
grid-template-columns: 1.5fr 1fr;
grid-template-rows: 1fr 1fr;
aspect-ratio: 1 / 0.82;
}
.msgr-album-n3 .msgr-album-tile:first-child { grid-row: 1 / span 2; } /* big photo, left */
.msgr-album-n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.msgr-album-tile { position: relative; overflow: hidden; min-width: 0; min-height: 0; cursor: pointer; }
/* Tile media fills its cell — override the standalone-photo sizing AND the pending
placeholder's fixed 240px square so a still-loading tile fills the cell too. */
.msgr-album-tile .msgr-msg-media { margin: 0; width: 100%; height: 100%; border-radius: 0; }
.msgr-album-tile .msgr-msg-img,
.msgr-album-tile .msgr-msg-img.msgr-img-pending {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
aspect-ratio: auto;
border-radius: 0;
object-fit: cover;
}
/* The per-tile scrim+ring already reads as "sending", so don't ALSO 55%-dim the tile
(that double-darkens). Shrink the ring a touch to suit a smaller cell. */
.msgr-album-tile.msgr-msg-sending { opacity: 1; }
.msgr-album-tile .msgr-upload-ring { width: 38px; height: 38px; }
.msgr-album-tile .msgr-upload-pct { font-size: 11px; }
/* "+N" overlay on the last visible tile of a larger album. */
.msgr-album-more {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 1.5rem;
font-weight: 700;
z-index: 2;
pointer-events: none;
}
/* A failed tile: red inset ring + a compact icon-only retry overlay (the full
"Not delivered · Tap to retry" row is too wide for a tile). */
.msgr-album-tile.msgr-msg-failed { box-shadow: inset 0 0 0 2px var(--color-danger, #e74c3c); }
.msgr-album-tile .msgr-msg-retry {
position: absolute;
inset: 0;
margin: 0;
flex-direction: column;
justify-content: center;
gap: 2px;
background: rgba(0, 0, 0, 0.42);
color: #fff;
z-index: 3;
}
.msgr-album-tile .msgr-msg-retry span { display: none; } /* icon only in a tight tile */
.msgr-album-tile .msgr-msg-retry i { font-size: 18px; }
/* Caption under the mosaic. */
.msgr-album-caption {
margin-top: 4px;
max-width: min(72vw, 280px);
font-size: var(--font-size-body);
line-height: 1.35;
word-break: break-word;
}
.msgr-msg-out .msgr-album-caption { align-self: flex-end; }
/* ── Telegram-style media ──
Bare photo/video (no caption, no reply) renders frameless: the picture goes
edge-to-edge with the sender name ABOVE it (like a text message) and only the
timestamp overlaid bottom-right.
Captioned media, voice and documents sit inside the standard coloured bubble. */
.msgr-bubble-photo {
position: relative;
overflow: hidden;
border-radius: 14px;
line-height: 0;
max-width: 100%;
}
.msgr-msg-out .msgr-bubble-photo { border-bottom-right-radius: 4px; }
.msgr-msg-in .msgr-bubble-photo { border-bottom-left-radius: 4px; }
.msgr-bubble-photo .msgr-msg-media { margin: 0; border-radius: 0; }
.msgr-bubble-photo .msgr-msg-img,
.msgr-bubble-photo .msgr-msg-video { border-radius: 0; }
.msgr-bubble-photo .msgr-msg-img { max-height: 360px; }
/* Timestamp/ticks overlaid bottom-right on a dark chip */
.msgr-meta-overlay {
position: absolute;
bottom: 8px; right: 8px;
z-index: 2;
padding: 2px 7px;
border-radius: 10px;
background: rgba(0,0,0,0.45);
color: #fff !important;
line-height: 1.3;
}
.msgr-meta-overlay .msgr-msg-time { color: #fff; }
.msgr-meta-overlay .msgr-tick-sent { color: rgba(255,255,255,0.85); }
.msgr-meta-overlay .msgr-tick-read { color: #fff; }
/* Media inside the standard coloured bubble (captioned image/video, voice, document):
strip the inner element's own chrome so it sits ON the bubble fill, not boxed inside. */
.msgr-bubble-media .msgr-voice-player,
.msgr-bubble-media .msgr-doc-bubble,
.msgr-bubble-media .msgr-doc-bubble:hover {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
/* Captioned image/video: the picture goes edge-to-edge (paddingless) - only the
name above and caption/time below keep the bubble padding, exactly like Telegram.
A fixed media width keeps the bubble from collapsing to the caption's width. */
.msgr-bubble-media:has(> .msgr-msg-media) { width: 300px; max-width: 100%; }
.msgr-bubble-media > .msgr-msg-media {
margin: 0 -12px 6px; /* break out of the bubble's side padding */
width: auto;
border-radius: 0;
}
.msgr-bubble-media > .msgr-msg-media:first-child {
margin-top: -8px; /* and the top padding, when the image is the first row */
border-radius: 14px 14px 0 0;
}
/* A captioned video must break out edge-to-edge like a captioned image. The video
sizing rule (.msgr-msg-media:has(> .msgr-msg-video)) carries max-width:100%, which
clamps the width:auto breakout to the bubble's padding box (276px) - the -12px side
margins then shift the box left but it can't grow, leaving a strip of bubble fill on
the RIGHT. Lift the clamp here so width:auto fills the full 300px bubble, edge to edge. */
.msgr-bubble-media > .msgr-msg-media:has(> .msgr-msg-video) {
max-width: none;
}
.msgr-bubble-media .msgr-msg-img {
width: 100%;
border-radius: 0;
max-height: 360px;
object-fit: cover;
display: block;
}
/* Shimmer keyframe - the sheen layer glides across (the base gradient stays
anchored), then holds off-screen for the tail of the cycle so the wait
breathes (a calm pass-and-rest) instead of sweeping like a metronome.
Used by the VIDEO placeholder (its load is brief, so one calm pass reads well). */
@keyframes msgrSkeletonDrift {
0% { background-position: 200% 0, 0 0; }
65% { background-position: -120% 0, 0 0; }
100% { background-position: -120% 0, 0 0; }
}
/* Photo placeholder shimmer - a CONTINUOUS repeating sweep (no rest). A photo can sit
loading for a while, so the black square keeps actively shimmering the whole time
rather than passing once and pausing. */
@keyframes msgrPhotoShimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* Honour OS-level reduce-motion preference - show the skeleton statically. */
@media (prefers-reduced-motion: reduce) {
.msgr-msg-video:not([poster]),
.msgr-msg-img.msgr-img-pending {
animation: none;
}
}
/* Custom voice bubble player (no native