/*
* Project Atlas — Custom theme layer
* Works alongside Tailwind CDN + dark: class strategy.
*/
/* ── Brand palette fallback (SELF-CONTAINED) ──────────────────────────────
Component styles in THIS file read `rgb(var(--brand-N))` (buttons, the
wordmark's clip-text gradient, CTAs, rings, …). Those triplets are normally
supplied by app.css's :root (compiled from static/src/input.css) and are
rewritten at runtime by the accent picker in theme.js.
The trap: `rgb(var(--brand-600))` with `--brand-600` UNDEFINED is an invalid
value, and an invalid value voids the WHOLE declaration — so a gradient or a
clip-text fill collapses to nothing (transparent), which reads as "the header,
buttons and even the MavionMeet wordmark lost all styling". That happens
whenever a browser pairs this (newer, var-driven) theme.css with a STALE
cached app.css from before the triplets existed — the two files cache
independently, so one can lag the other.
Defining the default indigo ramp here makes theme.css self-sufficient: the UI
renders correctly even if app.css is missing/stale. app.css's identical :root
(loaded first) and the accent picker's inline overrides on both still
win where present, so this only fills a gap, never fights them. Keep in sync
with static/src/input.css. */
:root {
--brand-50: 238 242 255;
--brand-100: 224 231 255;
--brand-200: 199 210 254;
--brand-300: 165 180 252;
--brand-400: 129 140 248;
--brand-500: 99 102 241;
--brand-600: 79 70 229;
--brand-700: 67 56 202;
--brand-800: 55 48 163;
--brand-900: 49 46 129;
--brand: rgb(var(--brand-600));
--brand-2: rgb(var(--brand-500));
}
/* ── Smooth theme transitions ── */
*,
*::before,
*::after {
transition: background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* ── Gradient backgrounds ── */
.atlas-bg-gradient {
background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf9 40%, #fdf2f8 100%);
}
.dark .atlas-bg-gradient {
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #1a1a2e 100%);
}
/* ── Card styles ── */
.atlas-card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 24px rgba(0, 0, 0, 0.04);
}
.dark .atlas-card {
background: rgba(30, 41, 59, 0.7);
border-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 24px rgba(0, 0, 0, 0.2);
}
/* ── Glass navbar ── */
.atlas-navbar {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .atlas-navbar {
background: rgba(15, 23, 42, 0.78);
border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* ── Task row hover ── */
.atlas-task-row {
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.atlas-task-row:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.dark .atlas-task-row:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* ── Animated entrance ── */
@keyframes atlas-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes atlas-slide-in {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
.atlas-animate-in {
animation: atlas-fade-in 0.35s ease-out backwards;
}
/* Consistent page-in transition (broader-menu: global polish). Every page's
main content fades in on load so navigating between full-page (MPA) views
feels smooth and premium app-wide — not just the pages that happened to add
.atlas-animate-in to an inner wrapper. Opacity-only, so it layers gently with
any inner rise/stagger without double-moving the content. */
#main-content { animation: atlas-page-in 0.3s ease-out both; }
@keyframes atlas-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #main-content { animation: none; } }
.atlas-slide-in {
animation: atlas-slide-in 0.3s ease-out both;
}
/* stagger children */
.atlas-stagger > *:nth-child(1) { animation-delay: 0.03s; }
.atlas-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.atlas-stagger > *:nth-child(3) { animation-delay: 0.09s; }
.atlas-stagger > *:nth-child(4) { animation-delay: 0.12s; }
.atlas-stagger > *:nth-child(5) { animation-delay: 0.15s; }
.atlas-stagger > *:nth-child(6) { animation-delay: 0.18s; }
.atlas-stagger > *:nth-child(7) { animation-delay: 0.21s; }
.atlas-stagger > *:nth-child(8) { animation-delay: 0.24s; }
.atlas-stagger > *:nth-child(9) { animation-delay: 0.27s; }
.atlas-stagger > *:nth-child(10) { animation-delay: 0.30s; }
/* ── Button hover glow ── */
.atlas-btn-primary {
background: linear-gradient(135deg, #3b82f6, rgb(var(--brand-500)));
color: #fff;
border: none;
border-radius: 0.5rem;
font-weight: 600;
transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.atlas-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgb(var(--brand-500) / 0.4);
}
.atlas-btn-primary:active {
transform: translateY(0);
}
/* ── Checkbox ── */
.atlas-checkbox {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
border: 2px solid #d1d5db;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.atlas-checkbox:hover {
border-color: rgb(var(--brand-500));
box-shadow: 0 0 0 3px rgb(var(--brand-500) / 0.15);
}
.atlas-checkbox.checked {
background: linear-gradient(135deg, #10b981, #059669);
border-color: transparent;
}
.dark .atlas-checkbox {
border-color: #4b5563;
}
/* ── Badge pills ── */
.atlas-badge {
font-size: 0.7rem;
font-weight: 600;
padding: 0.15rem 0.55rem;
border-radius: 9999px;
letter-spacing: 0.02em;
}
/* ── Toast / message animation ── */
@keyframes atlas-toast-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.atlas-toast {
animation: atlas-toast-in 0.3s ease-out both;
}
/* ── Input / Select / Textarea ── */
.atlas-input,
select.atlas-input,
textarea.atlas-input {
background: rgba(255, 255, 255, 0.6);
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s;
}
.atlas-input::placeholder { color: #94a3b8; }
.atlas-input:focus {
outline: none;
border-color: rgb(var(--brand-500));
box-shadow: 0 0 0 3px rgb(var(--brand-500) / 0.15);
background: rgba(255, 255, 255, 0.85);
}
.dark .atlas-input,
.dark select.atlas-input,
.dark textarea.atlas-input {
background: rgba(30, 41, 59, 0.6);
border-color: #374151;
color: #e2e8f0;
}
.dark .atlas-input::placeholder { color: #64748b; }
.dark .atlas-input:focus {
border-color: rgb(var(--brand-400));
box-shadow: 0 0 0 3px rgb(var(--brand-400) / 0.2);
background: rgba(30, 41, 59, 0.8);
}
/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
/* ── Details/summary ── */
details summary {
cursor: pointer;
user-select: none;
}
details[open] > summary {
margin-bottom: 0.5rem;
}
/* ═══════════════════════════════════════════════
Sticky Notes (vNote) View — Premium Design
═══════════════════════════════════════════════ */
/* ── Note card ── */
.atlas-note {
position: relative;
border-radius: 2px 2px 2px 2px;
padding: 1.6rem 1rem 1.25rem;
min-height: 140px;
break-inside: avoid;
margin-bottom: 1.25rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
overflow: hidden;
border-left: 3px solid rgba(0,0,0,0.08);
/* Ruled paper lines + color via CSS custom properties */
--note-bg-start: #fffbeb;
--note-bg-end: #fef3c7;
background:
repeating-linear-gradient(
transparent,
transparent 26px,
rgba(0,0,0,0.025) 26px,
rgba(0,0,0,0.025) 27px
),
linear-gradient(145deg, var(--note-bg-start), var(--note-bg-end));
background-position: 0 18px, 0 0;
/* Layered 3D shadow */
box-shadow:
0 1px 1px rgba(0,0,0,0.04),
0 2px 4px rgba(0,0,0,0.04),
0 4px 8px rgba(0,0,0,0.04),
0 8px 16px rgba(0,0,0,0.04);
}
.dark .atlas-note {
background:
repeating-linear-gradient(
transparent,
transparent 26px,
rgba(255,255,255,0.018) 26px,
rgba(255,255,255,0.018) 27px
),
linear-gradient(145deg, var(--note-bg-start), var(--note-bg-end));
background-position: 0 18px, 0 0;
box-shadow:
0 1px 1px rgba(0,0,0,0.12),
0 2px 4px rgba(0,0,0,0.12),
0 4px 8px rgba(0,0,0,0.10),
0 8px 16px rgba(0,0,0,0.10);
}
/* ── Push pin (::before) ── */
.atlas-note::before {
content: '';
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
width: 13px;
height: 13px;
background: radial-gradient(circle at 38% 32%,
#ff8a8a 0%, #ef4444 32%, #dc2626 62%, #991b1b 100%);
border-radius: 50%;
box-shadow:
0 2px 5px rgba(0,0,0,0.28),
0 1px 2px rgba(0,0,0,0.15),
inset 0 1px 3px rgba(255,255,255,0.4),
inset 0 -1px 2px rgba(0,0,0,0.18);
z-index: 3;
}
/* Stagger pin positions for natural feel */
.atlas-note:nth-child(3n)::before { left: 38%; }
.atlas-note:nth-child(3n+2)::before { left: 62%; }
/* ── Corner fold (::after) ── */
.atlas-note::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 24px;
height: 24px;
background: linear-gradient(
225deg,
rgba(255,255,255,0.7) 0%,
rgba(255,255,255,0.6) 42%,
rgba(0,0,0,0.04) 46%,
rgba(0,0,0,0.09) 100%
);
border-bottom-right-radius: 2px;
}
.dark .atlas-note::after {
background: linear-gradient(
225deg,
rgba(15,23,42,0.6) 0%,
rgba(15,23,42,0.5) 42%,
rgba(255,255,255,0.02) 46%,
rgba(255,255,255,0.05) 100%
);
}
/* ── Hover lift with 3D depth ── */
.atlas-note:hover {
transform: translateY(-6px) rotate(0deg) !important;
box-shadow:
0 2px 2px rgba(0,0,0,0.03),
0 4px 4px rgba(0,0,0,0.03),
0 8px 8px rgba(0,0,0,0.03),
0 16px 32px rgba(0,0,0,0.06),
0 24px 48px rgba(0,0,0,0.04);
z-index: 10;
}
.dark .atlas-note:hover {
box-shadow:
0 2px 2px rgba(0,0,0,0.10),
0 4px 4px rgba(0,0,0,0.10),
0 8px 8px rgba(0,0,0,0.08),
0 16px 32px rgba(0,0,0,0.12),
0 24px 48px rgba(0,0,0,0.08);
}
/* ── Natural rotations ── */
.atlas-note:nth-child(6n+1) { transform: rotate(-0.8deg); }
.atlas-note:nth-child(6n+2) { transform: rotate(1deg); }
.atlas-note:nth-child(6n+3) { transform: rotate(-1.2deg); }
.atlas-note:nth-child(6n+4) { transform: rotate(0.6deg); }
.atlas-note:nth-child(6n+5) { transform: rotate(-0.4deg); }
.atlas-note:nth-child(6n) { transform: rotate(1.1deg); }
/* ── Note color themes — light (via CSS custom properties) ── */
.note-yellow { --note-bg-start: #fefce8; --note-bg-end: #fef9c3; border-left-color: #eab308; }
.note-pink { --note-bg-start: #fdf2f8; --note-bg-end: #fce7f3; border-left-color: #ec4899; }
.note-green { --note-bg-start: #ecfdf5; --note-bg-end: #d1fae5; border-left-color: #10b981; }
.note-blue { --note-bg-start: #eff6ff; --note-bg-end: #dbeafe; border-left-color: #3b82f6; }
.note-lavender { --note-bg-start: #f5f3ff; --note-bg-end: #ede9fe; border-left-color: #8b5cf6; }
.note-peach { --note-bg-start: #fff7ed; --note-bg-end: #ffedd5; border-left-color: #f97316; }
/* ── Note color themes — dark ── */
.dark .note-yellow { --note-bg-start: rgba(234,179,8,0.13); --note-bg-end: rgba(245,158,11,0.08); border-left-color: #eab308; }
.dark .note-pink { --note-bg-start: rgba(236,72,153,0.13); --note-bg-end: rgba(219,39,119,0.08); border-left-color: #ec4899; }
.dark .note-green { --note-bg-start: rgba(16,185,129,0.13); --note-bg-end: rgba(5,150,105,0.08); border-left-color: #10b981; }
.dark .note-blue { --note-bg-start: rgba(59,130,246,0.13); --note-bg-end: rgba(37,99,235,0.08); border-left-color: #3b82f6; }
.dark .note-lavender { --note-bg-start: rgba(139,92,246,0.13); --note-bg-end: rgba(124,58,237,0.08); border-left-color: #8b5cf6; }
.dark .note-peach { --note-bg-start: rgba(249,115,22,0.13); --note-bg-end: rgba(234,88,12,0.08); border-left-color: #f97316; }
/* ── Masonry grid ── */
.atlas-notes-grid {
columns: 4;
column-gap: 1.25rem;
padding-top: 0.5rem;
}
@media (max-width: 1280px) { .atlas-notes-grid { columns: 3; } }
@media (max-width: 768px) { .atlas-notes-grid { columns: 2; } }
@media (max-width: 480px) { .atlas-notes-grid { columns: 1; } }
/* ── Note completion fade ── */
@keyframes atlas-note-complete {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.96); }
100% { opacity: 0; transform: scale(0.9); }
}
.atlas-note-completing {
animation: atlas-note-complete 0.4s ease-out forwards;
pointer-events: none;
}
/* ── Flutter & Settle — wind-blown entrance for sticky notes ── */
@keyframes atlas-flutter {
0% {
opacity: 0;
transform: perspective(800px) rotateZ(-3deg) rotateX(0deg)
translateX(-6px) translateY(8px);
}
18% {
opacity: 0.85;
transform: perspective(800px) rotateZ(-1.5deg) rotateX(4deg)
translateX(-3px) translateY(3px);
}
38% {
opacity: 0.94;
transform: perspective(800px) rotateZ(2.5deg) rotateX(6deg)
translateX(4px) translateY(-2px);
}
58% {
opacity: 0.98;
transform: perspective(800px) rotateZ(-1.2deg) rotateX(2deg)
translateX(-2px) translateY(1px);
}
78% {
opacity: 1;
transform: perspective(800px) rotateZ(0.5deg) rotateX(0.5deg)
translateX(0.5px) translateY(-0.5px);
}
100% {
opacity: 1;
transform: none;
}
}
.atlas-note.atlas-note-flutter {
animation: atlas-flutter var(--flutter-dur, 1.8s) var(--flutter-delay, 0s)
cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
will-change: transform, opacity;
}
.atlas-note.atlas-note-flutter:hover {
animation-play-state: paused;
}
/* Respect reduced-motion: skip flutter, use simple fade */
@media (prefers-reduced-motion: reduce) {
.atlas-note.atlas-note-flutter {
animation: atlas-fade-in 0.35s ease-out both;
will-change: auto;
}
}
/* ── View toggle buttons ── */
.atlas-view-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.35rem 0.65rem;
border-radius: 0.375rem;
cursor: pointer;
transition: all 0.2s ease;
color: #6b7280;
border: none;
background: transparent;
font-size: 0.75rem;
font-weight: 500;
}
.atlas-view-btn.active {
background: white;
color: rgb(var(--brand-600));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.atlas-view-btn:hover:not(.active) {
color: #374151;
background: rgba(0, 0, 0, 0.04);
}
.dark .atlas-view-btn {
color: #9ca3af;
}
.dark .atlas-view-btn.active {
background: rgb(var(--brand-500) / 0.2);
color: rgb(var(--brand-300));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dark .atlas-view-btn:hover:not(.active) {
color: #d1d5db;
background: rgba(255, 255, 255, 0.05);
}
/* ═══════════════════════════════════════════════
Settings Page — Checkbox & Toggle polish
═══════════════════════════════════════════════ */
.atlas-toggle-wrap input[type="checkbox"] {
width: 1.1rem;
height: 1.1rem;
border-radius: 0.25rem;
border: 2px solid #d1d5db;
cursor: pointer;
transition: all 0.2s ease;
accent-color: rgb(var(--brand-500));
}
.dark .atlas-toggle-wrap input[type="checkbox"] {
border-color: #4b5563;
}
.atlas-toggle-wrap input[type="checkbox"]:checked {
border-color: rgb(var(--brand-500));
}
.dark .atlas-toggle-wrap input[type="checkbox"]:checked {
border-color: rgb(var(--brand-400));
}
/* ═══════════════════════════════════════════════
Bucket System — Sticky Headers, Pagination,
Skeletons, Collapse, Infinite Scroll
═══════════════════════════════════════════════ */
/* ── Bucket sticky header ── */
.atlas-bucket-header {
background: rgba(240, 244, 255, 0.92);
backdrop-filter: blur(12px);
border-radius: 0.5rem;
padding: 0.5rem 0.25rem;
margin-bottom: 0.5rem;
}
.dark .atlas-bucket-header {
background: rgba(15, 23, 42, 0.88);
}
/* ── Bucket body collapse ── */
.atlas-bucket-body {
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s ease;
}
.atlas-bucket-body.collapsed {
max-height: 0 !important;
opacity: 0;
pointer-events: none;
}
.atlas-bucket-chevron {
transition: transform 0.25s ease;
}
.atlas-bucket-chevron.rotated {
transform: rotate(-90deg);
}
/* ── Load-more button ── */
.atlas-load-more {
position: relative;
}
.atlas-load-more .htmx-indicator {
display: none;
}
.atlas-load-more.htmx-request .atlas-load-more-label {
opacity: 0.4;
}
.atlas-load-more.htmx-request .htmx-indicator {
display: block;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── Skeleton shimmer ── */
@keyframes atlas-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.atlas-bucket-skeleton [class*="animate-pulse"] {
animation: atlas-shimmer 1.5s ease-in-out infinite;
background-image: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,0.4) 50%,
transparent 100%
);
background-size: 400px 100%;
}
.dark .atlas-bucket-skeleton [class*="animate-pulse"] {
background-image: linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,0.06) 50%,
transparent 100%
);
}
/* ── Infinite scroll sentinel ── */
.atlas-io-sentinel {
visibility: hidden;
pointer-events: none;
}
/* ── Rendered (organizer-edited) Minutes of Meeting rich content ── */
.mom-rich :first-child { margin-top: 0; }
.mom-rich h2 { font-size: 16px; font-weight: 800; color: #111827; margin: 16px 0 8px; }
.dark .mom-rich h2 { color: #f3f4f6; }
.mom-rich h3 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin: 14px 0 5px; }
.dark .mom-rich h3 { color: #9aa3b2; }
.mom-rich h4 { font-size: 13px; font-weight: 700; margin: 12px 0 4px; }
.mom-rich p { margin: 0 0 9px; }
.mom-rich ul, .mom-rich ol { margin: 0 0 10px; padding-left: 20px; }
.mom-rich ul { list-style: disc; }
.mom-rich ol { list-style: decimal; }
.mom-rich li { margin-bottom: 3px; }
.mom-rich blockquote { border-left: 3px solid rgb(var(--brand-200)); padding-left: 12px; margin: 0 0 10px; color: #4b5563; }
.dark .mom-rich blockquote { border-color: rgb(var(--brand-600)); color: #9aa3b2; }
.mom-rich code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: #f1f5f9; padding: 1px 5px; border-radius: 5px; }
.dark .mom-rich code { background: rgba(255,255,255,.1); }
.mom-rich a { color: rgb(var(--brand-700)); text-decoration: underline; }
.dark .mom-rich a { color: rgb(var(--brand-300)); }
.mom-rich h1 { font-size: 20px; font-weight: 800; margin: 16px 0 8px; }
.mom-rich pre { background: #f1f5f9; border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-family: ui-monospace, Consolas, monospace; font-size: .9em; margin: 0 0 10px; }
.dark .mom-rich pre { background: rgba(255,255,255,.06); }
.mom-rich table { border-collapse: collapse; width: 100%; margin: 4px 0 14px; font-size: .95em; }
.mom-rich th, .mom-rich td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: left; vertical-align: top; }
.dark .mom-rich th, .dark .mom-rich td { border-color: rgba(255,255,255,.16); }
.mom-rich th { background: rgb(var(--brand-50)); font-weight: 700; }
.dark .mom-rich th { background: rgb(var(--brand-500) / .15); }
.mom-rich table caption { caption-side: top; font-size: 12px; color: #6b7280; text-align: left; margin-bottom: 4px; }
/* ── Task buckets: balanced multi-column masonry on wide screens ──
Cuts vertical scrolling by flowing buckets into columns; break-inside-avoid
(on .atlas-bucket-section) keeps each bucket intact within a column. */
.atlas-buckets-masonry {
column-gap: 1.5rem;
}
@media (min-width: 1024px) {
.atlas-buckets-masonry { column-count: 2; }
}
@media (min-width: 1600px) {
.atlas-buckets-masonry { column-count: 3; }
}
/* A bucket must never be split across columns. */
.atlas-bucket-section { break-inside: avoid; }
/* Compact filter / quick-add controls so they form a neat inline bar instead
of each full-width select stacking onto its own row on wide layouts. */
@media (min-width: 640px) {
.atlas-filter-bar select.mv-input-modern,
.atlas-filter-bar input.mv-input-modern { width: auto; min-width: 8.5rem; flex: 0 0 auto; }
.atlas-quick-add input[type="date"].mv-input-modern { width: auto; min-width: 9.5rem; flex: 0 0 auto; }
.atlas-quick-add > .mv-btn-submit { flex: 0 0 auto; width: auto; }
/* Title input takes the remaining space; keep it to a sensible max. */
.atlas-quick-add > .relative.flex-1 { flex: 1 1 auto; max-width: 620px; }
}
/* ── Bucket section spacing ── */
.atlas-bucket-section + .atlas-bucket-section {
margin-top: 0.5rem;
}
/* ── Count badge ── */
.atlas-bucket-count {
transition: all 0.3s ease;
min-width: 3rem;
text-align: center;
}
/* ═══════════════════════════════════════════════
Wallboard — Horizontal Slide Carousel for
Sticky Notes View (study-room corkboard)
═══════════════════════════════════════════════ */
/* ── Cork-board frame (light) ── */
.atlas-wallboard {
position: relative;
border-radius: 12px;
padding: 1.5rem 3rem;
min-height: 420px;
/* Full-bleed: break out of narrow parent */
width: calc(100vw - 3rem);
max-width: 72rem;
margin-left: 50%;
transform: translateX(-50%);
/* Cork grain: layered radial grain over warm base */
background:
url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
radial-gradient(ellipse at 25% 40%, rgba(180,140,70,0.10) 0%, transparent 60%),
radial-gradient(ellipse at 75% 65%, rgba(160,120,55,0.08) 0%, transparent 55%),
linear-gradient(145deg, #c4a265 0%, #d4b87e 28%, #caad6e 52%, #c0a060 78%, #b89858 100%);
/* Recessed inner shadow + outer frame depth */
box-shadow:
inset 0 3px 12px rgba(0,0,0,0.30),
inset 0 -2px 8px rgba(0,0,0,0.18),
inset 3px 0 8px rgba(0,0,0,0.14),
inset -3px 0 8px rgba(0,0,0,0.14),
0 2px 4px rgba(0,0,0,0.10),
0 6px 20px rgba(0,0,0,0.08);
/* Wood frame border */
border: 3px solid #8B6F47;
outline: 1px solid rgba(0,0,0,0.08);
}
/* ── Chalkboard frame (dark) ── */
.dark .atlas-wallboard {
background:
url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
radial-gradient(ellipse at 25% 40%, rgba(100,116,139,0.10) 0%, transparent 60%),
radial-gradient(ellipse at 75% 65%, rgba(71,85,105,0.08) 0%, transparent 55%),
linear-gradient(145deg, #1e293b 0%, #253347 28%, #1f2d40 52%, #1a2435 78%, #182030 100%);
box-shadow:
inset 0 3px 14px rgba(0,0,0,0.55),
inset 0 -2px 10px rgba(0,0,0,0.40),
inset 3px 0 10px rgba(0,0,0,0.30),
inset -3px 0 10px rgba(0,0,0,0.30),
0 2px 4px rgba(0,0,0,0.25),
0 6px 20px rgba(0,0,0,0.18);
border-color: #475569;
outline-color: rgba(255,255,255,0.04);
}
/* ── Viewport: clips overflow, shows one slide ── */
.atlas-wb-viewport {
overflow: hidden;
position: relative;
border-radius: 6px;
}
/* ── Track: flex row of slides, animates via translateX ── */
.atlas-wb-track {
display: flex;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* ── Individual slide: CSS Grid for note layout ── */
.atlas-wb-slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(210px, calc(25% - 0.75rem)), 1fr));
gap: 1rem;
padding: 0.5rem 0;
min-height: 380px;
align-content: start;
}
/* ── Arrow buttons ── */
.atlas-wb-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
cursor: pointer;
transition: all 0.2s ease;
background: rgba(255,255,255,0.88);
color: #374151;
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.atlas-wb-arrow:hover {
background: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.22);
transform: translateY(-50%) scale(1.1);
}
.atlas-wb-arrow:active {
transform: translateY(-50%) scale(0.94);
}
.atlas-wb-arrow--prev { left: 6px; }
.atlas-wb-arrow--next { right: 6px; }
.atlas-wb-arrow[disabled] {
opacity: 0.25;
cursor: default;
pointer-events: none;
}
.dark .atlas-wb-arrow {
background: rgba(30,41,59,0.88);
color: #e2e8f0;
box-shadow: 0 2px 8px rgba(0,0,0,0.40);
}
.dark .atlas-wb-arrow:hover {
background: rgba(30,41,59,0.96);
box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
/* ── Dot indicators ── */
.atlas-wb-dots {
display: flex;
justify-content: center;
gap: 7px;
padding-top: 0.85rem;
}
.atlas-wb-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
padding: 0;
transition: all 0.25s ease;
background: rgba(0,0,0,0.18);
}
.atlas-wb-dot:hover {
background: rgba(0,0,0,0.35);
transform: scale(1.25);
}
.atlas-wb-dot.active {
background: rgb(var(--brand-500));
transform: scale(1.3);
box-shadow: 0 0 0 2.5px rgb(var(--brand-500) / 0.30);
}
.dark .atlas-wb-dot {
background: rgba(255,255,255,0.18);
}
.dark .atlas-wb-dot:hover {
background: rgba(255,255,255,0.35);
}
.dark .atlas-wb-dot.active {
background: rgb(var(--brand-400));
box-shadow: 0 0 0 2.5px rgb(var(--brand-400) / 0.30);
}
.atlas-wb-dots:empty,
.atlas-wb-dots[data-single] {
display: none;
}
/* ── Note overrides inside wallboard ── */
.atlas-wallboard .atlas-note {
break-inside: auto;
margin-bottom: 0;
}
/* ── Day-card note (one note = one day's grouped tasks) ── */
.atlas-day-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
padding-bottom: 0.4rem;
border-bottom: 1px dashed rgba(0,0,0,0.12);
}
.atlas-day-header .day-name {
font-size: 12px;
font-weight: 700;
color: #374151;
line-height: 1.3;
}
.atlas-day-header .day-count {
font-size: 10px;
font-weight: 600;
background: rgba(0,0,0,0.08);
color: #6b7280;
padding: 1px 6px;
border-radius: 9999px;
flex-shrink: 0;
}
.atlas-day-tasks {
list-style: none;
margin: 0;
padding: 0;
}
.atlas-day-tasks li {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
border-bottom: 1px solid rgba(0,0,0,0.04);
font-size: 12px;
line-height: 1.4;
}
.atlas-day-tasks li:last-child { border-bottom: none; }
.atlas-day-tasks li.done a {
text-decoration: line-through;
opacity: 0.4;
}
.atlas-day-tasks li a {
color: #374151;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.atlas-day-tasks li a:hover {
color: var(--brand-600, rgb(var(--brand-600)));
}
/* Priority pips inside day-cards */
.priority-pip {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.priority-pip.priority-3 { background: #f97316; }
.priority-pip.priority-4 { background: #ef4444; }
/* Day-card dark mode */
.dark .atlas-day-header { border-bottom-color: rgba(255,255,255,0.08); }
.dark .atlas-day-header .day-name { color: #e5e7eb; }
.dark .atlas-day-header .day-count { background: rgba(255,255,255,0.1); color: #9ca3af; }
.dark .atlas-day-tasks li { border-bottom-color: rgba(255,255,255,0.04); }
.dark .atlas-day-tasks li a { color: #d1d5db; }
.dark .atlas-day-tasks li a:hover { color: var(--brand-400, rgb(var(--brand-400))); }
/* ── Responsive: mobile wallboard ── */
@media (max-width: 768px) {
.atlas-wallboard {
padding: 1rem 0.75rem;
min-height: 360px;
width: calc(100vw - 1rem);
border-radius: 8px;
}
.atlas-wb-arrow { display: none; }
.atlas-wb-slide { min-height: 340px; }
}
@media (max-width: 480px) {
.atlas-wallboard {
padding: 0.75rem 0.5rem;
border-width: 2px;
min-height: 300px;
}
.atlas-wb-slide {
grid-template-columns: 1fr;
min-height: 280px;
}
}
/* ── Reduced motion: instant slide transitions ── */
@media (prefers-reduced-motion: reduce) {
.atlas-wb-track {
transition-duration: 0.01s;
}
}
/* ══════════════════════════════════════════════════════════
CALENDAR VIEW — Corporate Design System
Sidebar (always dark) + Main Calendar (theme-responsive)
═══════════════════════════════════════════════════════ */
/* ───────────────────────────────────────
SIDEBAR — Always dark, never changes
─────────────────────────────────────── */
.atlas-sidebar {
width: 280px;
flex-shrink: 0;
background: #1E1F2E;
color: #C8CAD8;
display: flex;
flex-direction: column;
overflow-y: auto;
border-right: 1px solid rgba(255,255,255,0.06);
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.atlas-sidebar::-webkit-scrollbar { width: 4px; }
.atlas-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
/* Profile */
.atlas-sidebar-profile {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 20px 16px;
}
.atlas-sidebar-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #7C5CFC, #6C63FF);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
color: #fff;
flex-shrink: 0;
letter-spacing: 0.5px;
}
.atlas-sidebar-user-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.atlas-sidebar-name {
font-size: 0.88rem;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.atlas-sidebar-role {
font-size: 0.7rem;
color: #8B8CA7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.atlas-sidebar-notif {
position: relative;
flex-shrink: 0;
color: #8B8CA7;
cursor: pointer;
transition: color 0.15s;
margin-left: auto;
padding: 4px;
}
.atlas-sidebar-notif:hover { color: #fff; }
.atlas-sidebar-notif-badge {
position: absolute;
top: -4px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: #7C5CFC;
color: #fff;
font-size: 0.6rem;
font-weight: 700;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* Sidebar sections */
.atlas-sidebar-section {
padding: 0 20px 16px;
}
.atlas-sidebar-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0 10px;
font-size: 0.82rem;
font-weight: 600;
color: #fff;
cursor: pointer;
user-select: none;
width: 100%;
background: none;
border: none;
text-align: left;
}
.atlas-sidebar-section-header:hover {
color: #c5bfff;
}
.atlas-sidebar-chevron {
transition: transform 0.2s ease;
}
.atlas-sidebar-section-header[aria-expanded="false"] .atlas-sidebar-chevron {
transform: rotate(-90deg);
}
.atlas-sidebar-collapsible {
overflow: hidden;
max-height: 500px;
transition: max-height 0.25s ease, opacity 0.2s ease;
opacity: 1;
}
.atlas-sidebar-collapsible.collapsed {
max-height: 0;
opacity: 0;
padding: 0;
margin: 0;
}
/* Mini calendar */
.atlas-sidebar-minical-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0 10px;
}
.atlas-sidebar-minical-label {
font-size: 0.88rem;
font-weight: 700;
color: #fff;
}
.atlas-sidebar-minical-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
color: #8B8CA7;
transition: all 0.12s;
}
.atlas-sidebar-minical-nav:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.atlas-sidebar-minical-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
text-align: center;
}
.atlas-sidebar-minical-dow {
font-size: 0.65rem;
font-weight: 600;
color: #8B8CA7;
padding: 4px 0;
text-transform: uppercase;
}
.atlas-sidebar-minical-day {
font-size: 0.72rem;
font-weight: 500;
color: #C8CAD8;
padding: 5px 0;
border-radius: 8px;
transition: all 0.12s;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
.atlas-sidebar-minical-day:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
.atlas-sidebar-minical-day.other-month {
color: #4A4B65;
}
.atlas-sidebar-minical-day.is-today {
background: #7C5CFC;
color: #fff;
font-weight: 700;
box-shadow: 0 2px 8px rgba(124,92,252,0.35);
}
.atlas-sidebar-minical-day.is-anchor:not(.is-today) {
background: rgba(124,92,252,0.2);
color: #C4B5FD;
font-weight: 600;
}
/* Next event card */
.atlas-sidebar-event-card {
background: #282A3A;
border-radius: 14px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.06);
}
.atlas-sidebar-event-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.atlas-sidebar-event-time {
font-size: 0.78rem;
font-weight: 600;
color: #fff;
}
.atlas-sidebar-event-duration {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.65rem;
font-weight: 500;
color: #FF6B6B;
background: rgba(255,107,107,0.12);
padding: 2px 8px;
border-radius: 10px;
}
.atlas-sidebar-event-title {
font-size: 0.82rem;
font-weight: 600;
color: #E2E4F0;
line-height: 1.4;
margin-bottom: 14px;
}
.atlas-sidebar-event-actions {
display: flex;
gap: 8px;
}
.atlas-sidebar-btn-outline {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 0;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
color: #C8CAD8;
border: 1px solid rgba(255,255,255,0.12);
background: transparent;
text-decoration: none;
transition: all 0.15s;
}
.atlas-sidebar-btn-outline:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.2);
color: #fff;
}
.atlas-sidebar-btn-primary {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 0;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 600;
color: #fff;
background: #7C5CFC;
text-decoration: none;
transition: all 0.15s;
border: 1px solid transparent;
}
.atlas-sidebar-btn-primary:hover {
background: #6C4FE0;
box-shadow: 0 2px 10px rgba(124,92,252,0.3);
}
/* My Calendars */
.atlas-sidebar-cal-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.atlas-sidebar-cal-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 4px;
border-radius: 8px;
cursor: pointer;
transition: background 0.12s;
font-size: 0.78rem;
color: #C8CAD8;
}
.atlas-sidebar-cal-item:hover {
background: rgba(255,255,255,0.04);
}
.atlas-sidebar-checkbox {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #4A4B65;
background: transparent;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
position: relative;
flex-shrink: 0;
}
.atlas-sidebar-checkbox:checked {
border-color: #7C5CFC;
background: #7C5CFC;
}
.atlas-sidebar-checkbox:checked::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 8px; height: 8px;
border-radius: 50%;
background: #fff;
}
.atlas-sidebar-cal-badge {
margin-left: auto;
font-size: 0.6rem;
font-weight: 700;
padding: 1px 7px;
border-radius: 8px;
background: rgba(124,92,252,0.2);
color: #C4B5FD;
}
/* Categories */
.atlas-sidebar-cat-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.atlas-sidebar-cat-item {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 5px 8px;
border-radius: 6px;
transition: background 0.15s, opacity 0.2s;
width: 100%;
background: none;
border: none;
text-align: left;
}
.atlas-sidebar-cat-item:hover {
background: rgba(255,255,255,0.06);
}
.atlas-sidebar-cat-item:not(.active) {
opacity: 0.4;
}
.atlas-sidebar-cat-item:not(.active) .atlas-sidebar-cat-bar > div {
width: 0% !important;
}
.atlas-sidebar-cat-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.atlas-sidebar-cat-name {
font-size: 0.78rem;
color: #C8CAD8;
min-width: 65px;
}
.atlas-sidebar-cat-bar {
flex: 1;
height: 5px;
border-radius: 3px;
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.atlas-sidebar-cat-bar > div {
height: 100%;
border-radius: 3px;
background: currentColor;
transition: width 0.3s ease;
}
.atlas-sidebar-cat-item:nth-child(1) .atlas-sidebar-cat-bar > div { background: #FFB547; }
.atlas-sidebar-cat-item:nth-child(2) .atlas-sidebar-cat-bar > div { background: #22CAAD; }
.atlas-sidebar-cat-item:nth-child(3) .atlas-sidebar-cat-bar > div { background: #FF6B6B; }
/* ───────────────────────────────────────
MAIN CALENDAR AREA — Theme responsive
─────────────────────────────────────── */
/* Calendar container */
.atlas-cal-wrapper {
background: #fff;
border: 1px solid #e8eaf0;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.02);
overflow: hidden;
}
.dark .atlas-cal-wrapper {
background: #252636;
border-color: rgba(255,255,255,0.06);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Calendar main area wrapper */
.atlas-cal-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding: 20px 24px;
overflow: hidden;
background: #f8f9fc;
}
.dark .atlas-cal-main {
background: #1E1F2E;
}
/* Calendar flex layout (sidebar + main) */
.atlas-cal-layout {
display: flex;
height: calc(100vh - 60px);
overflow: hidden;
border-radius: 0;
}
/* Navigation header bar */
.atlas-cal-nav {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid #e2e8f0;
background: #fafbfc;
}
.dark .atlas-cal-nav {
background: rgba(37,38,54,0.6);
border-bottom-color: rgba(255,255,255,0.07);
}
.atlas-cal-header-label {
font-size: 1.35rem;
font-weight: 400;
color: #0f172a;
letter-spacing: -0.01em;
}
.dark .atlas-cal-header-label {
color: #f1f5f9;
}
.atlas-cal-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
color: #64748b;
transition: all 0.15s ease;
border: 1px solid transparent;
}
.atlas-cal-nav-btn:hover {
background: #f1f5f9;
color: #334155;
border-color: #e2e8f0;
}
.dark .atlas-cal-nav-btn {
color: #94a3b8;
}
.dark .atlas-cal-nav-btn:hover {
background: rgba(255,255,255,0.06);
color: #e2e8f0;
border-color: rgba(255,255,255,0.08);
}
.atlas-cal-today-btn {
display: inline-flex;
align-items: center;
padding: 6px 18px;
border-radius: 10px;
font-size: 0.82rem;
font-weight: 600;
color: #334155;
border: 1px solid #e2e8f0;
background: #fff;
transition: all 0.15s ease;
}
.atlas-cal-today-btn:hover {
background: #f1f5f9;
border-color: #cbd5e1;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dark .atlas-cal-today-btn {
color: #94a3b8;
border-color: rgba(255,255,255,0.08);
background: transparent;
}
.dark .atlas-cal-today-btn:hover {
background: rgba(255,255,255,0.06);
color: #e2e8f0;
}
/* Time gutter */
.atlas-cal-time-label {
font-size: 0.7rem;
font-weight: 500;
color: #94a3b8;
text-align: right;
padding: 0 12px 0 4px;
height: 60px;
line-height: 1;
margin-top: -6px;
user-select: none;
}
.dark .atlas-cal-time-label {
color: #475569;
}
/* Grid cells (clickable time slots) */
.atlas-cal-cell {
height: 60px;
border-top: 1px solid #e2e8f0;
border-left: 1px solid #e2e8f0;
cursor: pointer;
transition: background-color 0.1s ease;
position: relative;
}
.atlas-cal-cell:hover {
background: rgba(124,92,252,0.03);
}
.atlas-cal-cell:hover::after {
content: '+';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 1.1rem;
color: rgba(124,92,252,0.22);
font-weight: 300;
pointer-events: none;
}
.dark .atlas-cal-cell {
border-color: rgba(255,255,255,0.07);
}
.dark .atlas-cal-cell:hover {
background: rgba(124,92,252,0.05);
}
.dark .atlas-cal-cell:hover::after {
color: rgba(124,92,252,0.3);
}
/* Half-hour dashed line */
.atlas-cal-cell::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%;
border-top: 1px dashed #e5e7eb;
pointer-events: none;
}
.dark .atlas-cal-cell::before {
border-top-color: rgba(255,255,255,0.025);
}
/* Day column headers */
.atlas-cal-day-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14px 4px 10px;
border-left: 1px solid #e2e8f0;
gap: 4px;
background: #fafbfc;
}
.dark .atlas-cal-day-header {
border-color: rgba(255,255,255,0.06);
background: rgba(37,38,54,0.4);
}
.atlas-cal-day-header .atlas-cal-dow {
font-size: 0.67rem;
font-weight: 500;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.dark .atlas-cal-day-header .atlas-cal-dow {
color: #475569;
}
.atlas-cal-day-header .atlas-cal-daynum {
font-size: 1.35rem;
font-weight: 300;
color: #334155;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 1;
transition: all 0.15s ease;
letter-spacing: -0.01em;
}
.dark .atlas-cal-day-header .atlas-cal-daynum {
color: #cbd5e1;
}
/* Today: dark circle with white text — refined */
.atlas-cal-day-header.atlas-cal-today .atlas-cal-dow {
color: rgb(var(--brand-600));
font-weight: 600;
letter-spacing: 0.07em;
}
.dark .atlas-cal-day-header.atlas-cal-today .atlas-cal-dow {
color: rgb(var(--brand-400));
}
.atlas-cal-day-header.atlas-cal-today .atlas-cal-daynum {
background: rgb(var(--brand-600));
color: #fff;
font-weight: 400;
box-shadow: 0 2px 8px rgb(var(--brand-600) / 0.35);
}
.dark .atlas-cal-day-header.atlas-cal-today .atlas-cal-daynum {
background: rgb(var(--brand-600));
color: #fff;
box-shadow: 0 2px 8px rgb(var(--brand-600) / 0.4);
}
/* Today column background */
.atlas-cal-today {
background: rgba(124,92,252,0.015);
}
.dark .atlas-cal-today {
background: rgba(124,92,252,0.03);
}
/* Day column (relative container for meeting blocks) */
.atlas-cal-day-col {
position: relative;
border-left: 1px solid #e2e8f0;
min-height: 100%;
pointer-events: none;
}
.dark .atlas-cal-day-col {
border-color: rgba(255,255,255,0.04);
}
/* Meeting block */
.atlas-cal-meeting-block {
position: absolute;
left: 3px;
right: 4px;
border-radius: 10px;
padding: 6px 10px;
overflow: hidden;
cursor: pointer;
z-index: 5;
transition: box-shadow 0.15s ease, transform 0.12s ease;
text-decoration: none;
display: block;
min-height: 22px;
pointer-events: auto;
}
.atlas-cal-meeting-block:hover {
z-index: 10;
box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
.dark .atlas-cal-meeting-block:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.15);
}
/* Meeting text */
.atlas-cal-meeting-title {
font-size: 0.75rem;
font-weight: 600;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.atlas-cal-meeting-time {
font-size: 0.65rem;
opacity: 0.72;
line-height: 1.3;
font-weight: 500;
}
.atlas-cal-meeting-organizer {
font-size: 0.6rem;
opacity: 0.5;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
/* ──────────────────────────────────────
Meeting Palette Colors (7 pastel colors)
────────────────────────────────────── */
/* Color 0 — Lavender Purple */
.atlas-cal-color-0 { background: #EDE9FE; color: #5B21B6; }
.dark .atlas-cal-color-0 { background: rgba(139,92,246,0.18); color: #C4B5FD; }
/* Color 1 — Mint Green */
.atlas-cal-color-1 { background: #D1FAE5; color: #065F46; }
.dark .atlas-cal-color-1 { background: rgba(16,185,129,0.18); color: #6EE7B7; }
/* Color 2 — Rose Pink */
.atlas-cal-color-2 { background: #FCE7F3; color: #9D174D; }
.dark .atlas-cal-color-2 { background: rgba(236,72,153,0.18); color: #F9A8D4; }
/* Color 3 — Warm Amber */
.atlas-cal-color-3 { background: #FEF3C7; color: #92400E; }
.dark .atlas-cal-color-3 { background: rgba(245,158,11,0.18); color: #FCD34D; }
/* Color 4 — Sky Blue */
.atlas-cal-color-4 { background: #DBEAFE; color: #1E40AF; }
.dark .atlas-cal-color-4 { background: rgba(59,130,246,0.18); color: #93C5FD; }
/* Color 5 — Teal */
.atlas-cal-color-5 { background: #CCFBF1; color: #134E4A; }
.dark .atlas-cal-color-5 { background: rgba(20,184,166,0.18); color: #5EEAD4; }
/* Color 6 — Peach Orange */
.atlas-cal-color-6 { background: #FFEDD5; color: #9A3412; }
.dark .atlas-cal-color-6 { background: rgba(249,115,22,0.18); color: #FDBA74; }
/* Month event pill colors */
.atlas-cal-month-event.atlas-cal-color-0 { background: #EDE9FE; color: #5B21B6; border-left-color: #8B5CF6; }
.atlas-cal-month-event.atlas-cal-color-1 { background: #D1FAE5; color: #065F46; border-left-color: #34D399; }
.atlas-cal-month-event.atlas-cal-color-2 { background: #FCE7F3; color: #9D174D; border-left-color: #F472B6; }
.atlas-cal-month-event.atlas-cal-color-3 { background: #FEF3C7; color: #92400E; border-left-color: #FBBF24; }
.atlas-cal-month-event.atlas-cal-color-4 { background: #DBEAFE; color: #1E40AF; border-left-color: #60A5FA; }
.atlas-cal-month-event.atlas-cal-color-5 { background: #CCFBF1; color: #134E4A; border-left-color: #2DD4BF; }
.atlas-cal-month-event.atlas-cal-color-6 { background: #FFEDD5; color: #9A3412; border-left-color: #FB923C; }
.dark .atlas-cal-month-event.atlas-cal-color-0 { background: rgba(139,92,246,0.14); color: #C4B5FD; border-left-color: #8B5CF6; }
.dark .atlas-cal-month-event.atlas-cal-color-1 { background: rgba(16,185,129,0.14); color: #6EE7B7; border-left-color: #34D399; }
.dark .atlas-cal-month-event.atlas-cal-color-2 { background: rgba(236,72,153,0.14); color: #F9A8D4; border-left-color: #F472B6; }
.dark .atlas-cal-month-event.atlas-cal-color-3 { background: rgba(245,158,11,0.14); color: #FCD34D; border-left-color: #FBBF24; }
.dark .atlas-cal-month-event.atlas-cal-color-4 { background: rgba(59,130,246,0.14); color: #93C5FD; border-left-color: #60A5FA; }
.dark .atlas-cal-month-event.atlas-cal-color-5 { background: rgba(20,184,166,0.14); color: #5EEAD4; border-left-color: #2DD4BF; }
.dark .atlas-cal-month-event.atlas-cal-color-6 { background: rgba(249,115,22,0.14); color: #FDBA74; border-left-color: #FB923C; }
/* ── Next-event card: colour wash for the ALWAYS-DARK sidebar ──
The calendar sidebar never switches to a light theme (see the partial), and
the card's text is light (#fff time, #E2E4F0 title). The generic
.atlas-cal-color-N sets a PALE background meant for dark text — so in light
mode the card became light text on a near-white fill: the washed-out,
unreadable card. Force a subtle dark-tinted accent wash + an accent border in
BOTH themes, so the card is always a premium dark card that simply takes on
the meeting's colour. Two-class specificity (0,2,0) + later source order wins
over both the base and the `.dark` colour rules above. */
.atlas-sidebar-event-card.atlas-cal-color-0 { background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(139,92,246,0.08)); border-color: rgba(139,92,246,0.42); }
.atlas-sidebar-event-card.atlas-cal-color-1 { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(16,185,129,0.08)); border-color: rgba(16,185,129,0.42); }
.atlas-sidebar-event-card.atlas-cal-color-2 { background: linear-gradient(135deg, rgba(236,72,153,0.22), rgba(236,72,153,0.08)); border-color: rgba(236,72,153,0.42); }
.atlas-sidebar-event-card.atlas-cal-color-3 { background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.08)); border-color: rgba(245,158,11,0.42); }
.atlas-sidebar-event-card.atlas-cal-color-4 { background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(59,130,246,0.08)); border-color: rgba(59,130,246,0.42); }
.atlas-sidebar-event-card.atlas-cal-color-5 { background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(20,184,166,0.08)); border-color: rgba(20,184,166,0.42); }
.atlas-sidebar-event-card.atlas-cal-color-6 { background: linear-gradient(135deg, rgba(249,115,22,0.22), rgba(249,115,22,0.08)); border-color: rgba(249,115,22,0.42); }
/* Status overrides */
.atlas-cal-meeting-block.atlas-cal-status-LIVE,
.atlas-cal-meeting-block.atlas-cal-status-live,
.atlas-cal-month-event.atlas-cal-status-LIVE,
.atlas-cal-month-event.atlas-cal-status-live {
background: #FEF2F2 !important;
color: #DC2626 !important;
border-left-color: #EF4444 !important;
animation: atlas-cal-live-pulse 2.5s ease-in-out infinite;
}
.dark .atlas-cal-meeting-block.atlas-cal-status-LIVE,
.dark .atlas-cal-meeting-block.atlas-cal-status-live,
.dark .atlas-cal-month-event.atlas-cal-status-LIVE,
.dark .atlas-cal-month-event.atlas-cal-status-live {
background: rgba(239,68,68,0.18) !important;
color: #FCA5A5 !important;
}
.atlas-cal-meeting-block.atlas-cal-status-CANCELED,
.atlas-cal-meeting-block.atlas-cal-status-canceled,
.atlas-cal-month-event.atlas-cal-status-CANCELED,
.atlas-cal-month-event.atlas-cal-status-canceled {
background: #F8FAFC !important;
color: #94A3B8 !important;
text-decoration: line-through;
opacity: 0.55;
}
.dark .atlas-cal-meeting-block.atlas-cal-status-CANCELED,
.dark .atlas-cal-meeting-block.atlas-cal-status-canceled {
background: rgba(148,163,184,0.08) !important;
}
@keyframes atlas-cal-live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.82; }
}
/* Current time indicator (red line + dot — scoped to today's column) */
.atlas-cal-now-line {
position: absolute;
left: -1px; right: 0;
height: 2px;
background: #EF4444;
z-index: 8;
pointer-events: none;
}
.atlas-cal-now-line::before {
content: '';
position: absolute;
left: -5px;
top: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #EF4444;
}
/* Scroll container */
.atlas-cal-scroll-container {
max-height: 700px;
overflow-y: auto;
position: relative;
scrollbar-width: thin;
scrollbar-color: #e2e8f0 transparent;
}
.atlas-cal-scroll-container::-webkit-scrollbar { width: 6px; }
.atlas-cal-scroll-container::-webkit-scrollbar-track { background: transparent; }
.atlas-cal-scroll-container::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 3px; }
.atlas-cal-scroll-container::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
.dark .atlas-cal-scroll-container { scrollbar-color: rgba(255,255,255,0.08) transparent; }
.dark .atlas-cal-scroll-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); }
/* Month view */
.atlas-cal-month-header {
background: #fafbfc;
border-bottom: 1px solid #e2e8f0;
}
.dark .atlas-cal-month-header {
background: rgba(37,38,54,0.4);
border-bottom-color: rgba(255,255,255,0.07);
}
.atlas-cal-month-header > div {
text-align: center;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
padding: 10px 0;
}
.dark .atlas-cal-month-header > div {
color: #475569;
}
.atlas-cal-month-cell {
min-height: 110px;
padding: 6px 8px;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
cursor: pointer;
transition: background-color 0.1s ease;
}
.atlas-cal-month-cell:hover {
background: rgba(124,92,252,0.02);
}
.dark .atlas-cal-month-cell {
border-color: rgba(255,255,255,0.07);
}
.dark .atlas-cal-month-cell:hover {
background: rgba(124,92,252,0.04);
}
.atlas-cal-month-day-num {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
color: #475569;
margin-bottom: 4px;
width: 28px;
height: 28px;
border-radius: 50%;
transition: background-color 0.12s ease;
}
.dark .atlas-cal-month-day-num {
color: #94a3b8;
}
.atlas-cal-month-cell.atlas-cal-today .atlas-cal-month-day-num {
background: #1E1F2E;
color: #fff;
box-shadow: 0 2px 6px rgba(30,31,46,0.2);
}
.dark .atlas-cal-month-cell.atlas-cal-today .atlas-cal-month-day-num {
background: #e2e8f0;
color: #1E1F2E;
}
.atlas-cal-month-event {
display: flex;
align-items: center;
font-size: 0.67rem;
font-weight: 500;
padding: 2px 6px;
border-radius: 5px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
line-height: 1.5;
border-left: 2.5px solid transparent;
transition: transform 0.1s ease;
cursor: pointer;
}
.atlas-cal-month-event:hover {
transform: translateX(1px);
}
/* ──────────────────────────────────────
All-Day Tasks Row (Week/Day views)
────────────────────────────────────── */
.atlas-cal-allday-row {
border-bottom: 2px solid #e2e8f0;
background: #fafbfc;
max-height: 120px;
overflow-y: auto;
}
.dark .atlas-cal-allday-row {
border-bottom-color: rgba(255,255,255,0.07);
background: rgba(37,38,54,0.3);
}
.atlas-cal-allday-label {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.65rem;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px 6px 8px 4px;
text-align: right;
justify-content: flex-end;
}
.dark .atlas-cal-allday-label {
color: #475569;
}
.atlas-cal-allday-cell {
padding: 4px 4px;
border-left: 1px solid #e2e8f0;
min-height: 32px;
display: flex;
flex-direction: column;
gap: 2px;
}
.dark .atlas-cal-allday-cell {
border-color: rgba(255,255,255,0.07);
}
.atlas-cal-allday-day {
/* Day view: single column gets more horizontal space */
}
/* ──────────────────────────────────────
Task Block (all-day row in week/day)
────────────────────────────────────── */
.atlas-cal-task-block {
display: flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 6px;
font-size: 0.68rem;
font-weight: 500;
cursor: pointer;
transition: transform 0.1s ease, box-shadow 0.15s ease;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left: 2.5px dashed transparent;
background: #EFF6FF;
color: #1E40AF;
border-left-color: #60A5FA;
}
.atlas-cal-task-block:hover {
transform: translateX(1px);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.dark .atlas-cal-task-block {
background: rgba(59,130,246,0.12);
color: #93C5FD;
border-left-color: #60A5FA;
}
.atlas-cal-task-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
opacity: 0.7;
}
.atlas-cal-task-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.4;
}
/* Task priority variants */
.atlas-cal-task-block.atlas-cal-task-priority-none {
background: #F1F5F9;
color: #475569;
border-left-color: #94A3B8;
}
.dark .atlas-cal-task-block.atlas-cal-task-priority-none {
background: rgba(100,116,139,0.12);
color: #94A3B8;
border-left-color: #64748B;
}
.atlas-cal-task-block.atlas-cal-task-priority-low {
background: #EFF6FF;
color: #1E40AF;
border-left-color: #60A5FA;
}
.dark .atlas-cal-task-block.atlas-cal-task-priority-low {
background: rgba(59,130,246,0.12);
color: #93C5FD;
border-left-color: #60A5FA;
}
.atlas-cal-task-block.atlas-cal-task-priority-medium {
background: #FEF3C7;
color: #92400E;
border-left-color: #FBBF24;
}
.dark .atlas-cal-task-block.atlas-cal-task-priority-medium {
background: rgba(245,158,11,0.12);
color: #FCD34D;
border-left-color: #FBBF24;
}
.atlas-cal-task-block.atlas-cal-task-priority-high {
background: #FEF2F2;
color: #991B1B;
border-left-color: #F87171;
}
.dark .atlas-cal-task-block.atlas-cal-task-priority-high {
background: rgba(239,68,68,0.12);
color: #FCA5A5;
border-left-color: #F87171;
}
.atlas-cal-task-block.atlas-cal-task-priority-urgent {
background: #FEF2F2;
color: #7F1D1D;
border-left-color: #EF4444;
font-weight: 600;
}
.dark .atlas-cal-task-block.atlas-cal-task-priority-urgent {
background: rgba(239,68,68,0.18);
color: #FCA5A5;
border-left-color: #EF4444;
}
/* ──────────────────────────────────────
Task in Month View (event pill style)
────────────────────────────────────── */
.atlas-cal-month-task {
border-left-style: dashed !important;
}
.atlas-cal-month-task-icon {
width: 10px;
height: 10px;
flex-shrink: 0;
margin-right: 2px;
opacity: 0.65;
}
/* Month task priority colors */
.atlas-cal-month-task.atlas-cal-task-priority-none {
background: #F1F5F9;
color: #475569;
border-left-color: #94A3B8;
}
.dark .atlas-cal-month-task.atlas-cal-task-priority-none {
background: rgba(100,116,139,0.1);
color: #94A3B8;
border-left-color: #64748B;
}
.atlas-cal-month-task.atlas-cal-task-priority-low {
background: #EFF6FF;
color: #1E40AF;
border-left-color: #60A5FA;
}
.dark .atlas-cal-month-task.atlas-cal-task-priority-low {
background: rgba(59,130,246,0.1);
color: #93C5FD;
border-left-color: #60A5FA;
}
.atlas-cal-month-task.atlas-cal-task-priority-medium {
background: #FEF3C7;
color: #92400E;
border-left-color: #FBBF24;
}
.dark .atlas-cal-month-task.atlas-cal-task-priority-medium {
background: rgba(245,158,11,0.1);
color: #FCD34D;
border-left-color: #FBBF24;
}
.atlas-cal-month-task.atlas-cal-task-priority-high {
background: #FEF2F2;
color: #991B1B;
border-left-color: #F87171;
}
.dark .atlas-cal-month-task.atlas-cal-task-priority-high {
background: rgba(239,68,68,0.1);
color: #FCA5A5;
border-left-color: #F87171;
}
.atlas-cal-month-task.atlas-cal-task-priority-urgent {
background: #FEF2F2;
color: #7F1D1D;
border-left-color: #EF4444;
font-weight: 600;
}
.dark .atlas-cal-month-task.atlas-cal-task-priority-urgent {
background: rgba(239,68,68,0.14);
color: #FCA5A5;
border-left-color: #EF4444;
}
.atlas-cal-weekend {
background: rgba(0,0,0,0.008);
}
.dark .atlas-cal-weekend {
background: rgba(255,255,255,0.008);
}
/* ── Meeting Quick-View Overlay ── */
.atlas-quickview-backdrop {
position: fixed;
inset: 0;
z-index: 900;
background: transparent;
}
.atlas-quickview {
position: fixed;
z-index: 910;
width: 380px;
max-width: calc(100vw - 32px);
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
overflow: hidden;
animation: atlas-quickview-in 0.18s ease-out;
font-family: inherit;
}
.dark .atlas-quickview {
background: #1E1F2E;
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06);
}
@keyframes atlas-quickview-in {
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Color accent bar at top */
.atlas-quickview-accent {
height: 4px;
width: 100%;
}
/* Header */
.atlas-quickview-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 20px 0;
gap: 12px;
}
.atlas-quickview-title {
font-size: 1.05rem;
font-weight: 700;
color: #1e293b;
line-height: 1.3;
flex: 1;
min-width: 0;
word-wrap: break-word;
}
.dark .atlas-quickview-title { color: #f1f5f9; }
.atlas-quickview-close {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
transition: all 0.12s;
}
.atlas-quickview-close:hover {
background: #f1f5f9;
color: #475569;
}
.dark .atlas-quickview-close:hover {
background: rgba(255,255,255,0.08);
color: #cbd5e1;
}
/* Status badge */
.atlas-quickview-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 10px 20px 0;
}
.atlas-quickview-status.status-SCHEDULED,
.atlas-quickview-status.status-scheduled { background: #EFF6FF; color: #2563EB; }
.atlas-quickview-status.status-LIVE,
.atlas-quickview-status.status-live { background: #FEF2F2; color: #DC2626; }
.atlas-quickview-status.status-ENDED,
.atlas-quickview-status.status-ended { background: #F0FDF4; color: #16A34A; }
.atlas-quickview-status.status-DRAFT,
.atlas-quickview-status.status-draft { background: #F8FAFC; color: #64748B; }
.atlas-quickview-status.status-CANCELED,
.atlas-quickview-status.status-canceled { background: #F8FAFC; color: #94A3B8; text-decoration: line-through; }
.dark .atlas-quickview-status.status-SCHEDULED,
.dark .atlas-quickview-status.status-scheduled { background: rgba(37,99,235,0.15); color: #60A5FA; }
.dark .atlas-quickview-status.status-LIVE,
.dark .atlas-quickview-status.status-live { background: rgba(239,68,68,0.15); color: #FCA5A5; }
.dark .atlas-quickview-status.status-ENDED,
.dark .atlas-quickview-status.status-ended { background: rgba(22,163,106,0.15); color: #86EFAC; }
.dark .atlas-quickview-status.status-DRAFT,
.dark .atlas-quickview-status.status-draft { background: rgba(100,116,139,0.15); color: #94A3B8; }
.dark .atlas-quickview-status.status-CANCELED,
.dark .atlas-quickview-status.status-canceled { background: rgba(100,116,139,0.1); color: #64748B; }
/* Details section */
.atlas-quickview-details {
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.atlas-quickview-row {
display: flex;
align-items: flex-start;
gap: 10px;
}
.atlas-quickview-row svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #94a3b8;
margin-top: 1px;
}
.dark .atlas-quickview-row svg { color: #64748b; }
.atlas-quickview-row-text {
font-size: 0.82rem;
color: #475569;
line-height: 1.45;
}
.dark .atlas-quickview-row-text { color: #94a3b8; }
.atlas-quickview-row-label {
font-size: 0.72rem;
color: #94a3b8;
margin-bottom: 1px;
}
.dark .atlas-quickview-row-label { color: #64748b; }
/* Agenda preview */
.atlas-quickview-agenda {
padding: 0 20px;
margin-bottom: 4px;
}
.atlas-quickview-agenda-text {
font-size: 0.78rem;
color: #64748b;
line-height: 1.55;
padding: 10px 14px;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #f1f5f9;
max-height: 80px;
overflow: hidden;
position: relative;
}
.dark .atlas-quickview-agenda-text {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.06);
color: #8b8ca7;
}
/* Footer with actions */
.atlas-quickview-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 12px 20px 16px;
border-top: 1px solid #f1f5f9;
}
.dark .atlas-quickview-footer {
border-top-color: rgba(255,255,255,0.06);
}
.atlas-quickview-btn {
padding: 7px 18px;
border-radius: 10px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.atlas-quickview-btn-secondary {
background: #f1f5f9;
color: #475569;
}
.atlas-quickview-btn-secondary:hover { background: #e2e8f0; color: #1e293b; }
.dark .atlas-quickview-btn-secondary { background: rgba(255,255,255,0.06); color: #94a3b8; }
.dark .atlas-quickview-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #f1f5f9; }
.atlas-quickview-btn-primary {
background: var(--brand-600, #7C3AED);
color: #fff;
}
.atlas-quickview-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
/* Live pulse dot */
.atlas-quickview-live-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #EF4444;
animation: atlas-cal-live-pulse 2s ease-in-out infinite;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.atlas-sidebar { display: none; }
.atlas-cal-layout { height: auto; }
.atlas-cal-main { padding: 16px; }
}
@media (max-width: 768px) {
.atlas-cal-scroll-container { max-height: 480px; }
.atlas-cal-month-cell { min-height: 70px; padding: 3px 4px; }
.atlas-cal-month-event { font-size: 0.6rem; padding: 1px 4px; }
.atlas-cal-meeting-title { font-size: 0.68rem; }
.atlas-cal-meeting-time { display: none; }
.atlas-cal-meeting-organizer { display: none; }
.atlas-cal-day-header .atlas-cal-daynum { font-size: 1.1rem; width: 32px; height: 32px; }
.atlas-cal-day-header .atlas-cal-dow { font-size: 0.6rem; }
.atlas-cal-header-label { font-size: 1rem; }
.atlas-cal-nav { padding: 10px 12px; }
}
@media (max-width: 480px) {
.atlas-cal-month-cell { min-height: 52px; }
.atlas-cal-month-event { border-left: 0; padding: 1px 3px; font-size: 0.55rem; }
.atlas-cal-month-day-num { width: 24px; height: 24px; font-size: 0.72rem; }
.atlas-cal-cell::after { display: none; }
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE — Mobile & Tablet Restructuring
Breakpoints: 640px (sm), 768px (md), 1024px (lg)
═══════════════════════════════════════════════════════════ */
/* ── Mobile-first: touches ── */
@media (max-width: 639px) {
/* Navbar: tighter spacing */
.atlas-navbar .max-w-6xl { padding-left: 0.75rem; padding-right: 0.75rem; }
.atlas-navbar .h-14 { height: 3rem; }
/* Brand name: smaller on mobile */
.atlas-navbar .text-xl { font-size: 1rem; }
/* Right-side navbar icons: tighter */
.atlas-navbar .space-x-1 { gap: 0; }
/* Main content: reduce padding */
#main-content { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 1rem; padding-bottom: 1rem; }
/* Cards: smaller radius on mobile */
.atlas-card { border-radius: 0.75rem; }
/* Page headings */
h1.text-2xl { font-size: 1.35rem; }
/* Filter form: stack vertically */
.atlas-filter-form { flex-direction: column; }
.atlas-filter-form > select,
.atlas-filter-form > input { width: 100%; }
/* Task row: compact */
.atlas-task-row { padding: 0.625rem 0.75rem; margin-bottom: 0.25rem; border-radius: 0.625rem; }
.atlas-task-row .mr-3 { margin-right: 0.5rem; }
/* Badge: slightly smaller */
.atlas-badge { font-size: 0.6rem; padding: 0.1rem 0.45rem; }
/* Meeting cards: compact */
.atlas-meeting-meta { flex-wrap: wrap; gap: 0.375rem; }
/* Meeting detail: stack actions vertically */
.atlas-detail-actions { flex-direction: column; gap: 0.5rem; }
.atlas-detail-actions > * { width: 100%; text-align: center; justify-content: center; }
/* Meeting info grid: single column */
.atlas-meeting-info-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
/* Settings: full-width buttons */
.atlas-settings-save { flex-direction: column; gap: 0.75rem; align-items: stretch; }
.atlas-settings-save button { width: 100%; justify-content: center; }
/* Quickview: full-width on mobile */
.atlas-quickview {
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
}
/* Footer: stack vertically */
footer .flex-col { gap: 0.5rem; }
footer .text-xs { font-size: 0.65rem; }
/* Toast messages: full width */
.atlas-toast { border-radius: 0.5rem; }
}
/* ── Tablet: 640px–767px ── */
@media (min-width: 640px) and (max-width: 767px) {
/* Main content: moderate padding */
#main-content { padding-left: 1rem; padding-right: 1rem; }
/* Task row: slightly larger touch targets */
.atlas-task-row { padding: 0.75rem 1rem; }
/* Meeting info grid: 2 columns */
.atlas-meeting-info-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Tablet landscape: 768px–1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
/* Calendar: force day view styles when week view is too cramped */
.atlas-cal-scroll-container { max-height: 520px; }
/* Meeting detail: adjust MoM column width */
.atlas-meeting-mom-col { width: 380px; }
}
/* ── Calendar week view: horizontal scroll on tablet ── */
@media (max-width: 1024px) {
#cal-week-grid,
.atlas-cal-allday-row .grid,
.atlas-cal-scroll-container > .grid {
min-width: 700px;
}
.atlas-cal-scroll-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.atlas-cal-allday-row {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#cal-week-grid {
overflow-x: auto;
}
}
/* ── Calendar: mobile-specific ── */
@media (max-width: 639px) {
.atlas-cal-main { padding: 8px; }
.atlas-cal-nav { padding: 10px; gap: 8px; }
.atlas-cal-header-label { font-size: 1.1rem; }
.atlas-cal-today-btn { padding: 4px 12px; font-size: 0.75rem; }
.atlas-cal-nav-btn { width: 28px; height: 28px; border-radius: 8px; }
.atlas-cal-mode-btn { padding: 3px 10px; font-size: 0.7rem; }
/* Day headers: abbreviated */
.atlas-cal-dow { font-size: 0.55rem; }
.atlas-cal-daynum { font-size: 0.85rem; width: 28px; height: 28px; line-height: 28px; }
}
/* ── Notification page: mobile touch targets ── */
@media (max-width: 639px) {
.atlas-notif-item { padding: 0.75rem; }
.atlas-notif-actions { flex-direction: column; gap: 0.375rem; }
.atlas-notif-actions .atlas-btn { width: 100%; text-align: center; }
}
/* ── Settings page: mobile stacking ── */
@media (max-width: 639px) {
.atlas-settings-grid-3 { grid-template-columns: 1fr; }
.atlas-settings-bottom-row { grid-template-columns: 1fr; }
}
/* ── Touch-friendly: increase tap targets on mobile ── */
@media (pointer: coarse) {
.atlas-checkbox { width: 1.5rem; height: 1.5rem; }
.atlas-task-row { min-height: 44px; }
.atlas-btn-primary { min-height: 44px; }
a.px-3.py-1\.5 { min-height: 44px; display: inline-flex; align-items: center; }
/* Larger close/action buttons */
button[aria-label="Delete task"] { padding: 0.5rem; }
button[aria-label="Dismiss notification"] { padding: 0.5rem; }
/* Extend the complete-checkbox tap area to ~44px without changing its look */
.atlas-checkbox-touch { position: relative; }
.atlas-checkbox-touch::after { content: ""; position: absolute; inset: -10px; }
}
/* Comfortable touch targets on the narrow (phone) layout — width-based so they
apply regardless of the browser's reported pointer type. */
@media (max-width: 640px) {
#mobile-menu .mv-nav-link { min-height: 44px; align-items: center; }
.atlas-view-btn { min-height: 38px; display: inline-flex; align-items: center; }
}
/* ── Print media: hide nav, simplify layout ── */
@media print {
.atlas-navbar, #mobile-menu, footer, .atlas-btn-primary { display: none !important; }
.atlas-card { border: 1px solid #ddd; box-shadow: none; backdrop-filter: none; }
.atlas-task-row:hover { transform: none; box-shadow: none; }
#main-content { max-width: 100%; padding: 0; }
}
/* ═══════════════════════════════════════════════════════════
Premium top navigation — Phase 4 Wave 2
Meetings-first, refined header. Plain CSS (light/dark aware),
loaded after app.css so it composes with Tailwind utilities.
═══════════════════════════════════════════════════════════ */
.atlas-navbar { box-shadow: 0 1px 0 rgba(16,24,40,.04), 0 4px 20px -12px rgba(16,24,40,.18); }
.dark .atlas-navbar { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -16px rgba(0,0,0,.6); }
/* Brand lockup — Mavion Meets "Ocean" gradient (indigo → blue → cyan) */
.mv-brand-mark {
width: 34px; height: 34px; border-radius: 10px;
background: linear-gradient(135deg, rgb(var(--brand-600)) 0%, #3b82f6 55%, #22d3ee 100%);
display: flex; align-items: center; justify-content: center;
color: #fff; box-shadow: 0 3px 10px rgba(59,130,246,.4);
}
.mv-brand-mark svg { width: 62%; height: 62%; }
.mv-brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.mv-brand-word {
font-size: 1.16rem; font-weight: 800; letter-spacing: -.025em;
white-space: nowrap;
background: linear-gradient(90deg, rgb(var(--brand-500)), rgb(var(--brand-700)));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.dark .mv-brand-word { background: linear-gradient(90deg, rgb(var(--brand-200)), rgb(var(--brand-400))); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Vertical separator */
.mv-nav-sep { width: 1px; height: 22px; background: rgba(16,24,40,.09); margin: 0 4px; }
.dark .mv-nav-sep { background: rgba(255,255,255,.1); }
/* Nav links (pills with icons) */
.mv-nav-link {
/* display comes from Tailwind utilities in markup (flex / sm:inline-flex)
so responsive hidden/visible utilities are never overridden by this class */
align-items: center; gap: 7px;
padding: 7px 12px; border-radius: 10px;
font-size: 13.5px; font-weight: 600; color: #4b5563; white-space: nowrap;
transition: background-color .15s, color .15s;
}
.mv-nav-link svg { width: 16px; height: 16px; opacity: .65; }
.mv-nav-link:hover { background: rgba(16,24,40,.05); color: #111827; }
.mv-nav-link:hover svg { opacity: .9; }
.dark .mv-nav-link { color: #9aa3b2; }
.dark .mv-nav-link:hover { background: rgba(255,255,255,.06); color: #f3f4f6; }
.mv-nav-link.active { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.mv-nav-link.active svg { opacity: 1; }
.dark .mv-nav-link.active { background: rgb(var(--brand-500) / .18); color: rgb(var(--brand-200)); }
/* Unread pill on the Chat nav entry */
.mv-nav-badge {
min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px;
text-align: center; margin-left: 2px;
}
/* ── Premium mobile-menu nav rows (larger, touch-friendly, icon + label) ── */
.mv-msection {
font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
color: #94a3b8; padding: 12px 12px 4px; margin-top: 2px;
}
.dark .mv-msection { color: #7c8db6; }
.mv-mnav {
display: flex; align-items: center; gap: 13px; width: 100%;
min-height: 46px; padding: 10px 12px; border-radius: 12px;
font-size: 15px; font-weight: 600; color: #374151; white-space: nowrap;
transition: background-color .15s, color .15s;
}
.mv-mnav svg { width: 20px; height: 20px; flex: 0 0 20px; opacity: .7; }
.mv-mnav:active { background: rgba(16,24,40,.06); }
.mv-mnav:hover { background: rgba(16,24,40,.05); color: #111827; }
.mv-mnav:hover svg { opacity: .95; }
.dark .mv-mnav { color: #cbd5e1; }
.dark .mv-mnav:hover, .dark .mv-mnav:active { background: rgba(255,255,255,.07); color: #f8fafc; }
.mv-mnav.active { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.mv-mnav.active svg { opacity: 1; }
.dark .mv-mnav.active { background: rgb(var(--brand-500) / .20); color: rgb(var(--brand-200)); }
.mv-mnav .mv-nav-badge { margin-left: auto; }
/* Meetings gets a persistent subtle accent (meetings-first) */
.mv-nav-link.mv-accent:not(.active) { color: rgb(var(--brand-600)); }
.mv-nav-link.mv-accent:not(.active) svg { opacity: .85; }
.dark .mv-nav-link.mv-accent:not(.active) { color: rgb(var(--brand-300)); }
/* Primary CTA — New Meeting */
.mv-cta {
/* display via utilities in markup (inline-flex / flex) */
align-items: center; gap: 7px;
padding: 8px 15px; border-radius: 11px;
font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap;
/* Same-hue accent gradient (500→700): the CTA follows the chosen accent
cohesively but stays understated — no fixed multi-hue rainbow. */
background: linear-gradient(135deg, rgb(var(--brand-500)) 0%, rgb(var(--brand-600)) 55%, rgb(var(--brand-700)) 100%);
box-shadow: 0 3px 12px rgb(var(--brand-600) / .32);
transition: transform .15s, box-shadow .15s;
}
.mv-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgb(var(--brand-600) / .5); color: #fff; }
.mv-cta svg { width: 16px; height: 16px; }
/* Utility icon buttons */
.mv-icon-btn {
/* display via utilities in markup (inline-flex) */
align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px; color: #6b7280; position: relative;
transition: background-color .15s, color .15s;
}
.mv-icon-btn:hover { background: rgba(16,24,40,.05); color: #111827; }
.dark .mv-icon-btn { color: #9aa3b2; }
.dark .mv-icon-btn:hover { background: rgba(255,255,255,.06); color: #f3f4f6; }
.mv-icon-btn svg { width: 19px; height: 19px; }
/* Notification badge */
.mv-badge {
position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px;
display: flex; align-items: center; justify-content: center; border-radius: 999px;
background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
border: 2px solid rgba(255,255,255,.9);
}
.dark .mv-badge { border-color: #0f172a; }
/* Roomy centered search wrapper — dedicated class because the compiled
Tailwind build purges `md:flex`, so `hidden md:flex` would stay hidden. */
.mv-searchbar { display: none; }
@media (min-width: 768px) {
.mv-searchbar { display: flex; flex: 1 1 0%; min-width: 0; justify-content: center; }
}
/* Search field in the bar */
.mv-search {
display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 11px;
background: rgba(16,24,40,.045); border: 1px solid transparent;
transition: border-color .15s, background-color .15s;
}
.mv-search:focus-within { background: var(--surface, #fff); border-color: rgb(var(--brand-500)); }
.dark .mv-search { background: rgba(255,255,255,.05); }
.dark .mv-search:focus-within { background: rgba(15,23,42,.9); border-color: rgb(var(--brand-400)); }
.mv-search svg { width: 16px; height: 16px; color: #9ca3af; flex-shrink: 0; }
.mv-search input { border: none; background: none; outline: none; font-size: 13.5px; flex: 1; width: 100%; min-width: 0; color: inherit; }
.mv-search input::placeholder { color: #9ca3af; }
.mv-search-kbd {
margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 600; color: #9ca3af;
border: 1px solid rgba(16,24,40,.12); border-radius: 5px; padding: 0 6px; line-height: 17px; background: #fff;
}
.dark .mv-search-kbd { color: #94a3b8; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
/* ── Nav dropdowns (Tasks · + New) ── */
.mv-navdrop { position: relative; }
.mv-navdrop > button { display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; font: inherit; }
.mv-navdrop > .mv-nav-link { background: transparent; }
.mv-drop-chev { width: 13px !important; height: 13px !important; opacity: .55; margin-left: 1px; }
.mv-drop {
position: absolute; top: calc(100% + 9px); z-index: 60; min-width: 194px;
background: #fff; border: 1px solid #e6e9f0; border-radius: 14px;
box-shadow: 0 22px 52px rgba(15,23,42,.17); padding: 6px; display: none;
}
.mv-drop.open { display: block; animation: mvDropIn .14s ease; }
@keyframes mvDropIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.dark .mv-drop { background: #151f33; border-color: #2a3852; box-shadow: 0 24px 56px rgba(0,0,0,.55); }
#tasks-drop { left: 0; }
#new-drop { right: 0; }
.mv-drop a, .mv-drop button {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #374151;
border: none; background: none; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.mv-drop > a > svg, .mv-drop > form > button > svg { width: 16px; height: 16px; opacity: .6; flex: 0 0 auto; }
.mv-drop > a:hover, .mv-drop > form > button:hover { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.dark .mv-drop a, .dark .mv-drop button { color: #cbd5e1; }
.dark .mv-drop > a:hover, .dark .mv-drop > form > button:hover { background: rgb(var(--brand-500) / .18); color: rgb(var(--brand-200)); }
.mv-drop form { margin: 0; }
/* + New rich create menu */
.mv-drop-new { min-width: 266px; padding: 7px; }
.mv-drop-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; font-weight: 700; padding: 7px 10px 5px; }
.mv-drop-item { gap: 11px !important; padding: 8px 10px !important; align-items: center; }
.mv-drop-item:hover { background: #f4f6fb !important; color: #374151 !important; }
.dark .mv-drop-item:hover { background: rgba(255,255,255,.05) !important; color: #cbd5e1 !important; }
.mv-drop-ic {
width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2));
box-shadow: 0 3px 9px color-mix(in srgb, var(--g1) 42%, transparent);
}
.mv-drop-ic svg { width: 17px !important; height: 17px !important; opacity: 1 !important; }
.mv-drop-txt { display: flex; flex-direction: column; min-width: 0; }
.mv-drop-name { font-size: 13px; font-weight: 600; color: #111827; }
.dark .mv-drop-name { color: #f1f5f9; }
.mv-drop-sub { font-size: 11px; font-weight: 500; color: #9ca3af; }
.mv-drop-div { height: 1px; background: #eef1f6; margin: 6px 8px; }
.dark .mv-drop-div { background: #2a3852; }
/* User avatar + dropdown menu */
.mv-avatar {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; color: #fff; cursor: pointer;
background: linear-gradient(135deg, rgb(var(--brand-600)) 0%, #3b82f6 55%, #22d3ee 100%);
box-shadow: 0 2px 8px rgba(59,130,246,.35);
border: 2px solid rgba(255,255,255,.6); transition: transform .12s;
}
.mv-avatar:hover { transform: scale(1.05); }
.dark .mv-avatar { border-color: rgba(255,255,255,.12); }
.mv-usermenu { position: relative; }
.mv-menu {
position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px;
background: #fff; border: 1px solid rgba(16,24,40,.08); border-radius: 13px;
box-shadow: 0 12px 34px rgba(16,24,40,.16); padding: 7px;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .15s, transform .15s, visibility .15s; z-index: 70;
}
.dark .mv-menu { background: #161b25; border-color: rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.mv-menu.open { opacity: 1; visibility: visible; transform: none; }
.mv-menu .mv-menu-head { padding: 9px 11px 11px; border-bottom: 1px solid rgba(16,24,40,.07); margin-bottom: 5px; }
.dark .mv-menu .mv-menu-head { border-bottom-color: rgba(255,255,255,.07); }
.mv-menu .mv-menu-name { font-size: 13.5px; font-weight: 700; color: #111827; }
.dark .mv-menu .mv-menu-name { color: #f3f4f6; }
.mv-menu .mv-menu-email { font-size: 11.5px; color: #6b7280; }
.mv-menu a, .mv-menu button {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500;
color: #374151; background: none; border: none; cursor: pointer; text-align: left; transition: background-color .12s;
}
.mv-menu a svg, .mv-menu button svg { width: 17px; height: 17px; opacity: .7; }
.mv-menu a:hover { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); }
.dark .mv-menu a { color: #d1d5db; }
.dark .mv-menu a:hover { background: rgb(var(--brand-500) / .16); color: rgb(var(--brand-200)); }
.mv-menu .mv-menu-danger:hover { background: #fef2f2; color: #dc2626; }
.dark .mv-menu .mv-menu-danger { color: #f3f4f6; }
.dark .mv-menu .mv-menu-danger:hover { background: rgba(220,38,38,.16); color: #fca5a5; }
/* ═══════════════════════════════════════════════════════════
Toast notifications — Phase 4 Wave 4 (replaces alert())
═══════════════════════════════════════════════════════════ */
.mv-toast-host {
position: fixed; top: 16px; right: 16px; z-index: 9999;
display: flex; flex-direction: column; gap: 10px;
max-width: 380px; width: calc(100vw - 32px); pointer-events: none;
}
@media (min-width: 480px) { .mv-toast-host { width: 380px; } }
.mv-toast {
pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
background: #fff; color: #1f2937;
border: 1px solid rgba(16,24,40,.08); border-left: 4px solid #64748b;
border-radius: 12px; padding: 12px 12px 12px 14px;
box-shadow: 0 12px 34px rgba(16,24,40,.18);
font-size: 13.5px; line-height: 1.45;
transform: translateX(120%); opacity: 0;
transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s;
}
.mv-toast.show { transform: none; opacity: 1; }
.dark .mv-toast { background: #1b2130; color: #e5e7eb; border-color: rgba(255,255,255,.08); }
.mv-toast-ic { font-weight: 800; font-size: 14px; line-height: 1.5; flex-shrink: 0; color: #64748b; }
.mv-toast-msg { flex: 1; }
.mv-toast-x {
background: none; border: none; color: #9ca3af; cursor: pointer;
font-size: 18px; line-height: 1; padding: 0 2px; flex-shrink: 0;
}
.mv-toast-x:hover { color: #4b5563; }
.dark .mv-toast-x:hover { color: #e5e7eb; }
.mv-toast-error { border-left-color: #ef4444; }
.mv-toast-error .mv-toast-ic { color: #ef4444; }
.mv-toast-success { border-left-color: #22c55e; }
.mv-toast-success .mv-toast-ic { color: #22c55e; }
.mv-toast-warning { border-left-color: #f59e0b; }
.mv-toast-warning .mv-toast-ic { color: #f59e0b; }
.mv-toast-info { border-left-color: #3b82f6; }
.mv-toast-info .mv-toast-ic { color: #3b82f6; }
/* ═══════════════════════════════════════════════════════════
Pre-join lobby — Phase 4 Wave 4
═══════════════════════════════════════════════════════════ */
.mv-lobby {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: radial-gradient(circle at 30% 15%, #1e293b, #0b1120);
}
.mv-lobby.hidden { display: none; }
.mv-lobby-card {
width: 100%; max-width: 460px; background: #161b25; color: #e5e7eb;
border-radius: 20px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
border: 1px solid rgba(255,255,255,.06);
}
.mv-lobby-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.mv-lobby-sub { font-size: 13px; color: #9aa3b2; margin-top: 2px; }
.mv-lobby-stage {
position: relative; margin: 16px 0; aspect-ratio: 16 / 10; background: #0b0f18;
border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.mv-lobby-stage video { width: 100%; height: 100%; object-fit: cover; }
.mv-lobby-avatar {
width: 76px; height: 76px; border-radius: 50%;
background: linear-gradient(135deg, rgb(var(--brand-600)), #22d3ee);
color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800;
}
.mv-lobby-meter { position: absolute; left: 12px; bottom: 12px; width: 64px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.mv-lobby-meter span { display: block; height: 100%; width: 0; background: #22c55e; transition: width .06s linear; }
.mv-lobby-stage-ctrls { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.mv-lobby-mini {
width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
background: rgba(255,255,255,.16); color: #fff; display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.mv-lobby-mini svg { width: 20px; height: 20px; }
.mv-lobby-mini:hover { background: rgba(255,255,255,.26); }
.mv-lobby-mini.off { background: #ef4444; }
.mv-lobby-devices { display: flex; flex-direction: column; gap: 10px; }
.mv-lobby-devices label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa3b2; display: flex; flex-direction: column; gap: 4px; }
.mv-lobby-devices select {
font-size: 13.5px; padding: 10px 34px 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16);
background-color: #1a2233; color: #f1f5f9; font-weight: 500; text-transform: none; letter-spacing: 0;
width: 100%; max-width: 100%; appearance: none; -webkit-appearance: none;
/* Render the native option popup in dark mode (Chrome/Edge) so it isn't
dark-text-on-dark; a light chevron via inline SVG since appearance is off. */
color-scheme: dark; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
}
.mv-lobby-devices select:focus { outline: none; border-color: var(--mv-accent, #6d5cff); box-shadow: 0 0 0 2px rgba(109,92,255,.35); }
.mv-lobby-devices select option { background: #1a2233; color: #f1f5f9; }
.mv-lobby-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.mv-lobby-cancel { font-size: 13.5px; color: #9aa3b2; text-decoration: none; font-weight: 600; }
.mv-lobby-cancel:hover { color: #e5e7eb; }
.mv-lobby-actions .mv-cta { display: inline-flex; font-size: 14.5px; padding: 11px 22px; }
/* ═══════════════════════════════════════════════════════════
Reactions — Phase 4 Wave 4 (emoji palette + floating animation)
═══════════════════════════════════════════════════════════ */
.mv-react-wrap { position: relative; display: inline-flex; }
.mv-react-palette {
/* Fixed + screen-centred above the control bar (like the filter picker) so an
overflow:hidden ancestor can't clip it and it never runs off-screen. */
position: fixed; bottom: 104px; left: 50%;
transform: translateX(-50%) translateY(6px);
display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px 10px; border-radius: 14px;
background: #1b2130; border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 12px 30px rgba(0,0,0,.45);
width: min(272px, calc(100vw - 24px)); max-height: 208px; overflow-y: auto;
opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; z-index: 1200;
}
.mv-react-palette.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mv-react-palette button {
background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1;
padding: 4px; border-radius: 8px; transition: transform .1s, background .12s;
}
.mv-react-palette button:hover { transform: scale(1.25); background: rgba(255,255,255,.08); }
.mv-reactions-layer {
position: fixed; left: 0; right: 0; bottom: 96px; height: 42vh; z-index: 150;
pointer-events: none; overflow: hidden;
}
.mv-reaction {
position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
animation: mv-react-float 3.6s cubic-bezier(.25,.6,.3,1) forwards;
}
.mv-reaction-emoji {
font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
animation: mv-react-wobble 1s ease-in-out infinite;
}
.mv-reaction-name {
font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55);
padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
/* Organic rise with a gentle horizontal drift (per-emoji --dx) + pop-in. */
@keyframes mv-react-float {
0% { transform: translate(0, 22px) scale(.4); opacity: 0; }
10% { transform: translate(0, 0) scale(1.15); opacity: 1; }
35% { transform: translate(calc(var(--dx, 0px) * .45), -13vh) scale(1); }
65% { transform: translate(var(--dx, 0px), -27vh) scale(1); opacity: 1; }
100% { transform: translate(calc(var(--dx, 0px) * 1.25), -42vh) scale(.9); opacity: 0; }
}
@keyframes mv-react-wobble {
0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; }
}
/* Confetti canvas — full-viewport, non-interactive, above the stage. */
.mv-confetti-canvas { position: fixed; inset: 0; z-index: 155; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.mv-reaction-emoji { animation: none; }
}
/* ═══════════════════════════════════════════════════════════
In-call device settings popover — Phase 4 Wave 4
═══════════════════════════════════════════════════════════ */
.mv-devset-wrap { position: relative; display: inline-flex; }
.mv-filter-wrap { position: relative; display: inline-flex; }
.mv-filter-dot { display:none; position:absolute; right:8px; top:7px; width:7px; height:7px; border-radius:999px; background:#22d3ee; box-shadow:0 0 0 2px #111827; }
.ctrl-btn.filtering { color:#67e8f9; background:rgba(8,145,178,.22); }
.ctrl-btn.filtering .mv-filter-dot { display:block; }
/* Fixed (not absolute) so the popover escapes any overflow:hidden ancestor
(the video stage / control bar clipped it before — bug 1480/1477), and
screen-centred above the centred control bar with the width clamped to the
viewport so it can never run off the left edge regardless of where the filter
button sits in the bar. */
.mv-filter-picker { position:fixed; z-index:1200; bottom:104px; left:50%; width:min(430px, calc(100vw - 24px)); max-height:min(620px,70vh); overflow-y:auto; padding:14px; border:1px solid rgba(148,163,184,.2); border-radius:16px; background:rgba(13,18,30,.98); box-shadow:0 22px 60px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px) scale(.97); transition:.16s ease; color:#e5e7eb; }
.mv-filter-picker.open { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) scale(1); }
.mv-filter-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px; font-size:14px; font-weight:800; }
.mv-filter-head small { color:#7c8db6; font-size:10px; font-weight:500; }
.mv-filter-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.mv-filter-choice { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; gap:5px; padding:9px 5px 7px; border:1px solid rgba(148,163,184,.15); border-radius:11px; background:rgba(255,255,255,.035); color:#cbd5e1; font-size:10px; font-weight:700; line-height:1.15; transition:.14s ease; }
.mv-filter-choice:hover { border-color:rgba(34,211,238,.48); background:rgba(34,211,238,.08); color:#fff; transform:translateY(-1px); }
.mv-filter-choice.active { border-color:#22d3ee; background:rgba(8,145,178,.2); color:#fff; box-shadow:inset 0 0 0 1px rgba(34,211,238,.18); }
.mv-filter-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:rgba(255,255,255,.07); font-size:22px; }
.mv-filter-choice i { position:absolute; right:5px; top:5px; overflow:hidden; width:6px; height:6px; border-radius:50%; background:#22d3ee; color:transparent; }
.mv-filter-note { margin-top:10px; color:#7c8db6; font-size:10px; line-height:1.4; }
@media (max-width: 520px) { .mv-filter-picker { bottom:92px; width:calc(100vw - 24px); } }
/* Centered modal overlay (dim backdrop + card) — not an awkward bottom popover */
.mv-devset-backdrop {
position: fixed; inset: 0; background: rgba(8, 12, 22, .55);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; z-index: 190;
}
.mv-devset-backdrop.open { opacity: 1; visibility: visible; }
.mv-devset {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.98);
width: 620px; max-width: 94vw; max-height: 92vh; overflow-y: auto;
padding: 18px 20px 18px; border-radius: 18px;
background: #1b2130; border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 24px 60px rgba(0,0,0,.5);
display: flex; flex-direction: column; gap: 13px;
opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 200;
}
/* Two-column body so the panel stays wide, not tall (no vertical scroll) */
.mv-devset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.mv-devset-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
@media (max-width: 600px) {
.mv-devset { width: 380px; gap: 9px; padding: 15px 16px 14px; max-height: 95vh; }
.mv-devset-grid { grid-template-columns: 1fr; gap: 9px; }
.mv-devset-col { gap: 8px; }
.mv-devset-preview { max-height: 132px; } /* keep the whole sheet inside the viewport */
}
.mv-devset.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.mv-devset-head { display: flex; align-items: center; justify-content: space-between; }
.mv-devset-h { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: .2px; }
.mv-devset-x {
width: 30px; height: 30px; border: none; background: rgba(255,255,255,.06); color: #9aa3b2;
border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mv-devset-x svg { width: 16px; height: 16px; }
.mv-devset-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.mv-devset-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9aa3b2; }
/* Live self-view at the top of the settings modal */
.mv-devset-preview {
position: relative; width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; border-radius: 12px; overflow: hidden;
background: #0b0f1a; border: 1px solid rgba(255,255,255,.10);
}
.mv-devset-preview video {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Self-view mirror is a per-user choice (default on). Applies to the settings
preview, the lobby preview and the in-call local tile — display only. */
.mv-devset-preview.mv-mirror video,
.mv-lobby-stage.mv-mirror video,
.av-tile.mv-mirror video { transform: scaleX(-1); }
.mv-devset-preview-off {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; color: #7c8db6; font-size: 12px; font-weight: 600;
}
.mv-devset-preview-off svg { width: 26px; height: 26px; opacity: .85; }
/* Background-effect picker */
.mv-bg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mv-bg-btn {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 9px 4px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
background: #0f1420; color: #cbd5e1; font-size: 11px; font-weight: 600; cursor: pointer;
transition: border-color .12s, background .12s, color .12s;
}
.mv-bg-btn svg { width: 20px; height: 20px; }
.mv-bg-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.mv-bg-btn.active { border-color: var(--brand-3, #22d3ee); background: rgba(34,211,238,.12); color: #fff; }
.mv-devset-hint { font-size: 10.5px; line-height: 1.45; color: #7c8db6; }
.mv-devset label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa3b2; display: flex; flex-direction: column; gap: 4px; }
.mv-devset select {
font-size: 13px; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12);
background: #0f1420; color: #e5e7eb; font-weight: 500; text-transform: none; letter-spacing: 0; max-width: 100%;
color-scheme: dark; /* render the native option popup in dark chrome */
}
/* Settings toggle switch (e.g. Mirror my video) */
.mv-devset-switch {
display: flex; align-items: center; gap: 12px; cursor: pointer;
text-transform: none; letter-spacing: 0; font-weight: 500;
}
.mv-devset-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mv-devset-switch-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; color: #cbd5e1; font-size: 13px; }
.mv-devset-switch-txt small { font-size: 10.5px; color: #7c8db6; font-weight: 400; }
.mv-switch {
flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px;
background: rgba(255,255,255,.14); position: relative; transition: background .15s ease;
}
.mv-switch-thumb {
position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
background: #fff; transition: transform .16s cubic-bezier(.2,.8,.2,1); box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.mv-devset-switch input:checked + .mv-switch { background: var(--brand-3, #22d3ee); }
.mv-devset-switch input:checked + .mv-switch .mv-switch-thumb { transform: translateX(17px); }
.mv-devset-switch input:focus-visible + .mv-switch { box-shadow: 0 0 0 3px rgba(34,211,238,.35); }
.mv-devset select option { background: #0f1420; color: #e5e7eb; }
.mv-devset select option:checked { background: var(--brand, rgb(var(--brand-600))); color: #fff; }
/* The room renders dark without the .dark class, so the global
.atlas-input:focus (white) would flash the select light on focus. Pin it. */
.mv-devset select:focus,
.mv-devset select.atlas-input,
.mv-devset select.atlas-input:focus {
background: #0f1420; color: #e5e7eb; border-color: rgb(var(--brand-400) / .5);
box-shadow: 0 0 0 3px rgb(var(--brand-400) / .18); outline: none;
}
/* Toast action button (e.g. "Switch" on a device-change prompt) */
.mv-toast-action {
flex-shrink: 0; align-self: center; background: var(--brand, rgb(var(--brand-600))); color: #fff;
border: none; border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 700;
cursor: pointer; transition: filter .12s;
}
.mv-toast-action:hover { filter: brightness(1.1); }
/* ═══════════════════════════════════════════════════════════
Meeting-room tiles: connection signal + grid overflow — Wave 4
(in theme.css so it's a cache-bustable linked stylesheet)
═══════════════════════════════════════════════════════════ */
.av-tile.overflow-tile { background: #0f172a; }
.av-tile.overflow-tile .tile-avatar { background: rgba(255,255,255,0.08); font-size: 20px; font-weight: 800; }
.av-tile .tile-signal {
position: absolute; top: 8px; right: 8px; z-index: 3;
display: flex; align-items: flex-end; gap: 2px; height: 15px;
padding: 3px 4px; background: rgba(0,0,0,0.45); border-radius: 5px;
}
.av-tile .tile-signal i { width: 3px; border-radius: 1px; background: var(--sig, #94a3b8); }
.av-tile .tile-signal i:nth-child(1) { height: 5px; }
.av-tile .tile-signal i:nth-child(2) { height: 9px; }
.av-tile .tile-signal i:nth-child(3) { height: 13px; }
.av-tile .tile-signal.q-unknown { opacity: 0.5; }
.av-tile .tile-signal.q-good { --sig: #22c55e; }
.av-tile .tile-signal.q-poor { --sig: #f59e0b; }
.av-tile .tile-signal.q-bad { --sig: #ef4444; }
/* ═══════════════════════════════════════════════════════════
Meeting Room — Base layout, AV grid, controls, chat
Extracted from meeting_room.html inline