/* =========================================================================
App Polish v1 — additive UI enhancements.
Safe to disable: remove the tag in base.html and the app reverts.
No existing classes are overridden destructively.
========================================================================= */
:root {
/* Modern blue/grey palette */
--c-bg: #f8fafc;
--c-surface: #ffffff;
--c-surface-2: #f1f5f9;
--c-border: #e2e8f0;
--c-border-strong: #cbd5e1;
--c-text: #0f172a;
--c-text-2: #475569;
--c-text-3: #94a3b8;
--c-primary: #2563eb;
--c-primary-hover: #1d4ed8;
--c-primary-soft: #eff6ff;
--c-accent: #6366f1;
--c-success: #16a34a;
--c-success-soft: #dcfce7;
--c-warning: #d97706;
--c-warning-soft: #fef3c7;
--c-danger: #dc2626;
--c-danger-soft: #fee2e2;
/* Type scale */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 13px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 19px;
--fs-2xl: 24px;
/* Motion */
--t-fast: 120ms;
--t-base: 180ms;
--t-slow: 300ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
}
/* ---------- Subtle button press feedback (does not override colors) ---------- */
button, .admin-btn, [role="button"], a.admin-btn {
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
button:active:not(:disabled),
.admin-btn:active:not(:disabled),
[role="button"]:active:not(:disabled) {
transform: translateY(1px) scale(0.985);
}
/* Slight focus ring on inputs/buttons (additive — only when missing) */
button:focus-visible, .admin-btn:focus-visible, a:focus-visible {
outline: 2px solid color-mix(in srgb, var(--c-primary) 60%, transparent);
outline-offset: 2px;
border-radius: 8px;
}
/* ---------- Page transition (opacity-only — NEVER use transform here:
transform creates a stacking context that breaks position:fixed children
like modals, which would otherwise be positioned relative to viewport.) */
@keyframes app-page-in {
from { opacity: 0; }
to { opacity: 1; }
}
[data-page-in] {
animation: app-page-in 200ms var(--ease-out) both;
}
/* ---------- Card hover lift — opacity/shadow only, NO transform ---------- */
.admin-card {
transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.admin-card:hover {
box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
border-color: var(--c-border-strong);
}
/* ---------- Sidebar link smoother hover ---------- */
.sidebar-link {
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sidebar-link:active { transform: scale(0.97); }
/* ---------- Smooth scroll on anchor jumps ---------- */
html { scroll-behavior: smooth; }
/* ---------- Tooltips (data-tooltip="text") ---------- */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #0f172a;
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4px 8px;
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
z-index: 70;
box-shadow: 0 4px 12px -2px rgba(0,0,0,0.2);
}
[data-tooltip]::before {
content: '';
position: absolute;
bottom: calc(100% + 1px);
left: 50%;
transform: translateX(-50%) translateY(4px);
border: 5px solid transparent;
border-top-color: #0f172a;
pointer-events: none;
opacity: 0;
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
z-index: 70;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-tooltip-pos="bottom"]::after {
bottom: auto;
top: calc(100% + 6px);
}
[data-tooltip-pos="bottom"]::before {
bottom: auto;
top: calc(100% + 1px);
border-top-color: transparent;
border-bottom-color: #0f172a;
}
[data-tooltip-pos="left"]::after {
bottom: auto;
left: auto;
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(4px);
}
[data-tooltip-pos="left"]:hover::after,
[data-tooltip-pos="left"]:focus-visible::after {
transform: translateY(-50%) translateX(0);
}
[data-tooltip-pos="left"]::before { display: none; }
[data-tooltip-pos="right"]::after {
bottom: auto;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(-4px);
}
[data-tooltip-pos="right"]:hover::after,
[data-tooltip-pos="right"]:focus-visible::after {
transform: translateY(-50%) translateX(0);
}
[data-tooltip-pos="right"]::before { display: none; }
/* ---------- Skeleton loaders ---------- */
.skel {
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s linear infinite;
border-radius: 6px;
color: transparent !important;
user-select: none;
pointer-events: none;
}
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* HTMX target with skeleton — auto-applied by app-ux.js */
.htmx-skeleton {
min-height: 80px;
background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.4s linear infinite;
border-radius: 8px;
border: 1px solid #f1f5f9;
}
/* ---------- Empty state ---------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
color: var(--c-text-2);
}
.empty-state svg.empty-illu {
width: 64px;
height: 64px;
color: #cbd5e1;
margin-bottom: 12px;
}
.empty-state-title {
font-size: var(--fs-md);
font-weight: 600;
color: var(--c-text);
margin-bottom: 4px;
}
.empty-state-desc {
font-size: var(--fs-sm);
color: var(--c-text-2);
max-width: 320px;
line-height: 1.5;
margin-bottom: 14px;
}
.empty-state-cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--c-primary);
color: #fff;
padding: 8px 14px;
border-radius: 8px;
font-size: var(--fs-sm);
font-weight: 500;
text-decoration: none;
transition: background var(--t-base) var(--ease);
}
.empty-state-cta:hover { background: var(--c-primary-hover); }
/* ---------- Notification bell — subtle pulse when there are unreads ---------- */
@keyframes bell-pulse {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(-10deg); }
40% { transform: rotate(8deg); }
60% { transform: rotate(-6deg); }
80% { transform: rotate(4deg); }
}
/* Bell pulses when there are unread notifications. The badge partial
(admin_notification_badge.html) only emits the inner `.bg-red-500` span
when count > 0, so its mere presence signals "unread present". */
.notif-bell-btn:has(.bg-red-500) svg {
color: #2563eb;
animation: bell-pulse 0.8s ease-in-out;
}
/* ---------- Mobile bottom navigation (≤767px only) ----------
Always-visible 5-tab nav. Hidden on tablet+ where the sidebar is used. */
.mobile-bottom-nav {
display: none;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 30;
background: #fff;
border-top: 1px solid var(--c-border);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
box-shadow: 0 -4px 12px -4px rgba(0,0,0,0.06);
}
.mobile-bottom-nav-inner {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
}
.mobile-bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 6px 4px 4px;
border-radius: 8px;
text-decoration: none;
color: var(--c-text-2);
gap: 2px;
min-height: 48px;
transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.mobile-bottom-nav a:hover { background: var(--c-surface-2); }
.mobile-bottom-nav a.is-active { color: var(--c-primary); }
.mobile-bottom-nav a.is-active span { font-weight: 600; }
.mobile-bottom-nav a svg { width: 20px; height: 20px; }
.mobile-bottom-nav a span { font-size: 10px; font-weight: 500; line-height: 1; }
@media (max-width: 767px) {
.mobile-bottom-nav { display: block; }
body { padding-bottom: 64px; }
}
/* (mobile bottom nav removed) */
/* =========================================================================
FUTURE-PROOF MODAL CLASSES
---------------------------------------------------------------------------
Tailwind arbitrary values (e.g. max-w-[560px]) DO NOT work with the
pre-compiled tailwind.min.css used in this project — they are silently
ignored, causing modals to render full-width. Use these classes instead.
========================================================================= */
/* Desktop default: overlay scrolls if modal is taller than viewport.
Card grows with content, no internal scroll. */
.app-modal-overlay {
/* Longhand top/right/bottom/left + !important defends against any
parent stacking context (HTMX-injected DOM, transformed ancestors,
Tailwind utility overrides) that could pin the overlay to a parent
instead of the viewport. Reported symptom: page header and mobile
bottom nav showing through, modal rendered inline. */
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
/* Above the page header (z-30), bottom nav (z-30) and admin sidebar
(z-50, same root stacking context as a fixed overlay → ties broken
by source order, which we don't want to depend on). */
z-index: 60;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 32px 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.app-modal-card {
background: #fff;
border-radius: 14px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 560px;
margin: auto;
overflow: hidden; /* clip header/footer to rounded corners */
/* No max-height on desktop — card sizes to content */
}
.app-modal-card.size-sm { max-width: 440px; }
.app-modal-card.size-lg { max-width: 720px; }
.app-modal-card.size-xl { max-width: 960px; }
/* Mobile: full-bleed sheet that fills the viewport with internal scroll.
The card becomes a flex column with sticky header/footer and a scrollable body. */
@media (max-width: 767px) {
.app-modal-overlay {
padding: 0;
align-items: stretch;
overflow: hidden; /* the card body scrolls instead */
}
.app-modal-card {
/* svh = small viewport height (constant, excludes mobile UI chrome
expansion). Use as a hard ceiling so iOS Safari's address bar
re-appearing while the user scrolls never overflows the card and
pushes the footer below the visible viewport. dvh as a progressive
upgrade lets the card breathe when the URL bar is hidden. */
max-height: 100vh;
max-height: 100svh;
height: 100dvh;
border-radius: 0;
margin: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Header and footer stay rigid; the form/body in between gets flex:1
so it absorbs all remaining space and scrolls internally. Direct
children of .app-modal-card that should scroll MUST set their own
`flex: 1 1 auto; min-height: 0; overflow-y: auto;` to override. */
.app-modal-card > header,
.app-modal-card > footer { flex-shrink: 0; }
}
/* ---------- Pull-to-refresh indicator ---------- */
.ptr-indicator {
position: fixed;
top: 8px;
left: 50%;
transform: translateX(-50%) translateY(-60px);
background: #fff;
border: 1px solid var(--c-border);
border-radius: 999px;
padding: 8px 14px;
font-size: 12px;
color: var(--c-text-2);
box-shadow: 0 4px 16px -4px rgba(0,0,0,0.12);
z-index: 80;
display: flex;
align-items: center;
gap: 8px;
transition: transform var(--t-slow) var(--ease);
pointer-events: none;
}
.ptr-indicator.is-pulling { transform: translateX(-50%) translateY(8px); }
.ptr-indicator.is-refreshing { transform: translateX(-50%) translateY(8px); }
.ptr-spinner {
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid #e2e8f0; border-top-color: var(--c-primary);
animation: ptr-spin 0.7s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }
/* ---------- Native