/* ────────────────────────────────────────────────────────────────────
 *  IT SK Rich — Design System
 *  Teal · Green · Glass · Day/Night themes
 * ──────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ─── CSS Variables: theme colors ─────────────────────────────────── */
:root,
:root[data-theme="light"] {
    --bg-base:        #d0f5ed;   /* light teal — more saturated for visibility */
    --bg-gradient-1:  #5eead4;   /* teal-300 */
    --bg-gradient-2:  #67e8f9;   /* cyan-300 */
    --bg-gradient-3:  #a7f3d0;   /* emerald-200 */

    --text-base:      #064e3b;   /* deep teal text */
    --text-muted:     #115e59;
    --text-subtle:    #14b8a6;
    --text-inverse:   #ffffff;

    /* Cards: SOLID background — no transparency inside (easier on eyes) */
    --card-bg:        #ffffff;
    --card-bg-elev:   #f9fefd;
    /* Glass kept only for sticky nav + modals */
    --glass-bg:       rgba(255, 255, 255, 0.7);
    --glass-bg-strong:rgba(255, 255, 255, 0.92);
    --glass-border:   rgba(13, 148, 136, 0.18);
    --glass-shadow:   0 4px 16px 0 rgba(13, 148, 136, 0.12);

    --input-bg:       rgba(255, 255, 255, 0.65);
    --input-border:   rgba(13, 148, 136, 0.25);
    --input-text:     #064e3b;
    --input-placeholder: rgba(20, 184, 166, 0.55);

    --accent:         #0d9488;   /* teal-600 */
    --accent-2:       #14b8a6;   /* teal-500 */
    --accent-3:       #06b6d4;   /* cyan-500 */
    --accent-glow:    rgba(13, 148, 136, 0.4);

    --particle-1:     #14b8a6;
    --particle-2:     #06b6d4;
    --particle-3:     #10b981;

    --divider:        rgba(13, 148, 136, 0.12);
    --scroll-track:   rgba(13, 148, 136, 0.08);
    --scroll-thumb:   rgba(13, 148, 136, 0.35);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg-base:        #1b3b34;   /* soft dark teal — dimmed, not near-black */
    --bg-gradient-1:  #265c52;
    --bg-gradient-2:  #20544b;
    --bg-gradient-3:  #184039;

    --text-base:      #f0fdf8;   /* near white */
    --text-muted:     #b8ecda;   /* brighter mint — clearer in dark mode */
    --text-subtle:    #6ee7b7;
    --text-inverse:   #042f2e;

    /* Cards + header: lighter than the bg, clearly distinct from the dark sidebar */
    --card-bg:        #264f47;
    --card-bg-elev:   #2d5a51;
    /* Glass for nav + modals only */
    --glass-bg:       rgba(13, 148, 136, 0.12);
    --glass-bg-strong:rgba(6, 78, 59, 0.85);
    --glass-border:   rgba(110, 231, 183, 0.15);
    --glass-shadow:   0 4px 16px 0 rgba(0, 0, 0, 0.3);

    --input-bg:       rgba(4, 47, 46, 0.55);
    --input-border:   rgba(110, 231, 183, 0.15);
    --input-text:     #ecfdf5;
    --input-placeholder: rgba(110, 231, 183, 0.4);

    --accent:         #2dd4bf;   /* teal-400 */
    --accent-2:       #5eead4;
    --accent-3:       #22d3ee;
    --accent-glow:    rgba(45, 212, 191, 0.45);

    --particle-1:     #14b8a6;
    --particle-2:     #06b6d4;
    --particle-3:     #10b981;

    --divider:        rgba(110, 231, 183, 0.1);
    --scroll-track:   rgba(13, 148, 136, 0.1);
    --scroll-thumb:   rgba(45, 212, 191, 0.35);

    color-scheme: dark;
}

/* If user has system pref dark and hasn't manually chosen, use dark vars */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-base:        #1b3b34;
        --bg-gradient-1:  #265c52;
        --bg-gradient-2:  #20544b;
        --bg-gradient-3:  #184039;
        --text-base:      #f0fdf8;
        --text-muted:     #b8ecda;
        --text-subtle:    #6ee7b7;
        --text-inverse:   #042f2e;
        --card-bg:        #264f47;
        --card-bg-elev:   #2d5a51;
        --glass-bg:       rgba(13, 148, 136, 0.12);
        --glass-bg-strong:rgba(6, 78, 59, 0.85);
        --glass-border:   rgba(110, 231, 183, 0.15);
        --glass-shadow:   0 4px 16px 0 rgba(0, 0, 0, 0.3);
        --input-bg:       rgba(4, 47, 46, 0.55);
        --input-border:   rgba(110, 231, 183, 0.15);
        --input-text:     #ecfdf5;
        --input-placeholder: rgba(110, 231, 183, 0.4);
        --accent:         #2dd4bf;
        --accent-2:       #5eead4;
        --accent-3:       #22d3ee;
        --accent-glow:    rgba(45, 212, 191, 0.45);
        --divider:        rgba(110, 231, 183, 0.1);
        --scroll-track:   rgba(13, 148, 136, 0.1);
        --scroll-thumb:   rgba(45, 212, 191, 0.35);
        color-scheme: dark;
    }
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg-base);
    color: var(--text-base);
    overflow-x: hidden;
    max-width: 100vw;
}

/* Lock scroll when mobile sidebar open (only matters < 1024px; sidebar
   is always visible on desktop so sidebarOpen stays false there) */
@media (max-width: 1023px) {
    html.scroll-locked,
    body.scroll-locked {
        overflow: hidden !important;
        touch-action: none;
    }
    /* Lock BOTH html and body while a modal is open. Locking body alone left the
       root scroller (html) free, so the mobile address bar showed/hid and the
       fixed modal flickered on open/close. :has() locks html too; the modal
       panel keeps its own overflow-y:auto so it still scrolls inside. */
    html:has(body.modal-open),
    body.modal-open {
        overflow: hidden !important;
    }
}

/* Ensure all content respects viewport width on mobile */
.main-content,
.main-content main {
    max-width: 100%;
    min-width: 0;
}

/* Single-column grids (task lists, user lists, etc.): a bare `grid` leaves an
   `auto` column that grows to its content's width, pushing cards past the
   viewport on mobile. Cap the track to the container so cards shrink + wrap. */
.grid:not([class*="grid-cols-"]) {
    grid-template-columns: minmax(0, 1fr);
}
/* Grid items should always be allowed to shrink below their content size. */
.grid > * {
    min-width: 0;
}

/* ─── Animated background — floating teal particles (cashier admin style) ── */
body {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(at 100% 0%, var(--bg-gradient-1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, var(--bg-gradient-2) 0px, transparent 50%),
        radial-gradient(at 50% 50%, var(--bg-gradient-3) 0px, transparent 60%),
        var(--bg-base);
    /* No background-attachment: fixed — it forces expensive repaints on mobile scroll. */
}

body::before,
body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(100px);
    opacity: 0.5;
    /* No animation — continuously transforming a 100px-blurred 600px layer was
       the main cause of mobile jank (constant GPU re-composite). Kept static. */
}

body::before {
    background: var(--particle-1);
    top: -150px;
    right: -150px;
}

body::after {
    background: var(--particle-2);
    bottom: -150px;
    left: -150px;
    animation-delay: -9s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(60px, -60px) scale(1.1); }
    66%      { transform: translate(-40px, 40px) scale(0.9); }
}

/* Dark mode: plain flat background — no gradients/particles (calmer look + lighter to render) */
[data-theme="dark"] body {
    background: var(--bg-base);
}
[data-theme="dark"] body::before,
[data-theme="dark"] body::after {
    display: none;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) body { background: var(--bg-base); }
    :root:not([data-theme]) body::before,
    :root:not([data-theme]) body::after { display: none; }
}

/* ─── Surfaces ──────────────────────────────────────────────────────
   .glass = nav + modals only (translucent + blur)
   .glass-strong = same, stronger (e.g. dropdowns)
   .glass-card = main content cards — SOLID background, border + shadow only
   ─────────────────────────────────────────────────────────────────── */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-strong {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* Main cards — SOLID background so content is easy to read */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s,
                border-color 0.2s;
}

/* Compact bordered task row (used inside grouped section cards, e.g. My Tasks) */
.task-row {
    display: block;
    background: var(--card-bg-elev);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.task-row:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}

.glass-card:hover {
    background: var(--card-bg-elev);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px 0 var(--accent-glow);
}

/* ─── Glow effects ───────────────────────────────────────────────── */
.glow {
    box-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow);
}

.glow-sm {
    box-shadow: 0 0 12px var(--accent-glow);
}

.glow-teal    { box-shadow: 0 0 24px rgba(20, 184, 166, 0.4); }
.glow-emerald { box-shadow: 0 0 24px rgba(16, 185, 129, 0.4); }
.glow-cyan    { box-shadow: 0 0 24px rgba(6, 182, 212, 0.4); }
.glow-amber   { box-shadow: 0 0 24px rgba(251, 191, 36, 0.4); }
.glow-rose    { box-shadow: 0 0 24px rgba(244, 63, 94, 0.4); }
.glow-indigo  { box-shadow: 0 0 24px rgba(99, 102, 241, 0.4); }
.glow-purple  { box-shadow: 0 0 24px rgba(168, 85, 247, 0.4); }

.glow-hover { transition: box-shadow 0.3s ease; }
.glow-hover:hover { box-shadow: 0 0 30px var(--accent-glow); }

/* ─── Buttons (colorful gradients) ───────────────────────────────── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.875rem;
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.25s;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    user-select: none;
    line-height: 1.2;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* Color variants — colorful gradients with glow */
.btn-primary { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(13, 148, 136, 0.45); }
.btn-primary:hover { box-shadow: 0 8px 24px 0 rgba(13, 148, 136, 0.6); }

.btn-success { background: linear-gradient(135deg, #34d399 0%, #059669 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.45); }
.btn-success:hover { box-shadow: 0 8px 24px 0 rgba(16, 185, 129, 0.65); }

.btn-danger { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.45); }
.btn-danger:hover { box-shadow: 0 8px 24px 0 rgba(239, 68, 68, 0.65); }

.btn-blue { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.45); }
.btn-blue:hover { box-shadow: 0 8px 24px 0 rgba(59, 130, 246, 0.65); }

.btn-purple { background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(168, 85, 247, 0.45); }
.btn-purple:hover { box-shadow: 0 8px 24px 0 rgba(168, 85, 247, 0.65); }

.btn-pink { background: linear-gradient(135deg, #f472b6 0%, #db2777 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(236, 72, 153, 0.45); }
.btn-pink:hover { box-shadow: 0 8px 24px 0 rgba(236, 72, 153, 0.65); }

.btn-orange { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(249, 115, 22, 0.45); }
.btn-orange:hover { box-shadow: 0 8px 24px 0 rgba(249, 115, 22, 0.65); }

.btn-amber { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); color: #fff; box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.45); }
.btn-amber:hover { box-shadow: 0 8px 24px 0 rgba(245, 158, 11, 0.65); }

.btn-rainbow {
    background: linear-gradient(135deg, #14b8a6, #6366f1, #ec4899, #f59e0b, #14b8a6);
    background-size: 300% 300%;
    color: #fff;
    box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.45);
    animation: rainbow-shift 4s ease infinite;
}
@keyframes rainbow-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.btn-ghost {
    background: var(--glass-bg);
    color: var(--text-base);
    border: 1px solid var(--glass-border);
}
.btn-ghost:hover {
    background: var(--glass-bg-strong);
    border-color: var(--accent);
}

.btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.75rem; font-size: 1rem; }
.btn-xl { padding: 1rem 2.25rem; font-size: 1.0625rem; }

/* ─── Form inputs ────────────────────────────────────────────────── */
.input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    color: var(--input-text);
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Icon inputs (e.g. the login fields): the compiled tailwind.css loads BEFORE
   app.css, so .input's shorthand padding would override the pl-/pr- utilities
   and the placeholder text overlaps the icon. Higher specificity restores the
   gap so the icon and text don't collide. */
.input.pl-10 { padding-left: 2.5rem; }
.input.pr-10 { padding-right: 2.5rem; }

.input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--glass-bg-strong);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.input::placeholder {
    color: var(--input-placeholder);
}

/* Locked (read-only) fields — e.g. profile before clicking Edit */
.input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

textarea.input { resize: vertical; min-height: 80px; line-height: 1.5; }

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2314b8a6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

.label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}

/* ─── Badges ─────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border: 1px solid transparent;
    line-height: 1.4;
}

/* Theme toggle icon — moon in light mode, sun in dark mode */
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-icon-moon { display: none; }
    :root:not([data-theme]) .theme-icon-sun { display: block; }
}

/* Compact pills/badges on small screens */
@media (max-width: 640px) {
    .badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.5rem;
        gap: 0.2rem;
    }
}

/* Horizontal tab strip (status tabs) — padding gives the active tab's
   glow room so overflow-x scrolling doesn't clip the shadow ("terkerat"). */
.tab-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.85rem 1rem;
    margin: -0.85rem -1rem 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    -webkit-overflow-scrolling: touch;
}
.tab-strip::-webkit-scrollbar { height: 6px; }
.tab-strip::-webkit-scrollbar-track { background: transparent; }
.tab-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* Theme-aware badges that look good on both light + dark */
.badge-teal    { background: rgba(20, 184, 166, 0.18);  color: #0d9488; border-color: rgba(20, 184, 166, 0.4); }
.badge-emerald { background: rgba(16, 185, 129, 0.18);  color: #059669; border-color: rgba(16, 185, 129, 0.4); }
.badge-green   { background: rgba(34, 197, 94, 0.18);   color: #15803d; border-color: rgba(34, 197, 94, 0.4); }
.badge-cyan    { background: rgba(6, 182, 212, 0.18);   color: #0891b2; border-color: rgba(6, 182, 212, 0.4); }
.badge-blue    { background: rgba(59, 130, 246, 0.18);  color: #1d4ed8; border-color: rgba(59, 130, 246, 0.4); }
.badge-indigo  { background: rgba(99, 102, 241, 0.18);  color: #4338ca; border-color: rgba(99, 102, 241, 0.4); }
.badge-purple  { background: rgba(168, 85, 247, 0.18);  color: #7e22ce; border-color: rgba(168, 85, 247, 0.4); }
.badge-amber   { background: rgba(251, 191, 36, 0.18);  color: #b45309; border-color: rgba(251, 191, 36, 0.4); }
.badge-orange  { background: rgba(249, 115, 22, 0.18);  color: #c2410c; border-color: rgba(249, 115, 22, 0.4); }
.badge-red     { background: rgba(239, 68, 68, 0.18);   color: #b91c1c; border-color: rgba(239, 68, 68, 0.4); }
.badge-rose    { background: rgba(244, 63, 94, 0.18);   color: #be123c; border-color: rgba(244, 63, 94, 0.4); }
.badge-gray    { background: rgba(100, 116, 139, 0.18); color: #475569; border-color: rgba(100, 116, 139, 0.4); }

[data-theme="dark"] .badge-teal    { color: #5eead4; }
[data-theme="dark"] .badge-emerald { color: #6ee7b7; }
[data-theme="dark"] .badge-green   { color: #86efac; }
[data-theme="dark"] .badge-cyan    { color: #67e8f9; }
[data-theme="dark"] .badge-blue    { color: #93c5fd; }
[data-theme="dark"] .badge-indigo  { color: #a5b4fc; }
[data-theme="dark"] .badge-purple  { color: #d8b4fe; }
[data-theme="dark"] .badge-amber   { color: #fcd34d; }
[data-theme="dark"] .badge-orange  { color: #fdba74; }
[data-theme="dark"] .badge-red     { color: #fca5a5; }
[data-theme="dark"] .badge-rose    { color: #fda4af; }
[data-theme="dark"] .badge-gray    { color: #cbd5e1; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .badge-teal    { color: #5eead4; }
    :root:not([data-theme]) .badge-emerald { color: #6ee7b7; }
    :root:not([data-theme]) .badge-green   { color: #86efac; }
    :root:not([data-theme]) .badge-cyan    { color: #67e8f9; }
    :root:not([data-theme]) .badge-blue    { color: #93c5fd; }
    :root:not([data-theme]) .badge-indigo  { color: #a5b4fc; }
    :root:not([data-theme]) .badge-purple  { color: #d8b4fe; }
    :root:not([data-theme]) .badge-amber   { color: #fcd34d; }
    :root:not([data-theme]) .badge-orange  { color: #fdba74; }
    :root:not([data-theme]) .badge-red     { color: #fca5a5; }
    :root:not([data-theme]) .badge-rose    { color: #fda4af; }
    :root:not([data-theme]) .badge-gray    { color: #cbd5e1; }
}

/* ─── Animations (smoother + more dramatic) ──────────────────────── */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
    50%      { box-shadow: 0 0 32px var(--accent-glow), 0 0 60px var(--accent-glow); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes bounce-dots {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-6px); }
}

.animate-fade-in    { animation: fade-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Page-level fade — opacity ONLY (no transform) so it doesn't become a
   containing block for position:fixed modals inside <main>. */
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
.page-enter { animation: page-enter 0.4s ease both; }
.animate-slide-up   { animation: slide-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-scale-in   { animation: scale-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-slide-in   { animation: slide-in-right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-shake      { animation: shake 0.45s ease-in-out; }
.animate-spin       { animation: spin 0.8s linear infinite; }

/* Staggered children — slide-up with bounce */
.stagger > * { animation: slide-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.stagger > *:nth-child(1)  { animation-delay: 0.04s; }
.stagger > *:nth-child(2)  { animation-delay: 0.08s; }
.stagger > *:nth-child(3)  { animation-delay: 0.12s; }
.stagger > *:nth-child(4)  { animation-delay: 0.16s; }
.stagger > *:nth-child(5)  { animation-delay: 0.20s; }
.stagger > *:nth-child(6)  { animation-delay: 0.24s; }
.stagger > *:nth-child(7)  { animation-delay: 0.28s; }
.stagger > *:nth-child(8)  { animation-delay: 0.32s; }
.stagger > *:nth-child(9)  { animation-delay: 0.36s; }
.stagger > *:nth-child(10) { animation-delay: 0.40s; }

/* Card hover lift effect */
.lift {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}
.lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px 0 var(--accent-glow);
}

/* Soft pulse for live status dots */
@keyframes soft-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.9); }
}
.soft-pulse { animation: soft-pulse 2s ease-in-out infinite; }

/* ─── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 4px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ─── Timeline (parcel tracking style) ───────────────────────────── */
.timeline {
    position: relative;
    padding-left: 2rem;
}
.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;   /* gap between cards (margin, so the item box = the card) */
}
.timeline-item:last-child { margin-bottom: 0; }

/* Connector line, drawn PER item so it always meets the vertically-centred dots no
   matter how tall each card is. Each segment runs from the gap above its card down to
   the card's bottom; stacked, they read as one continuous line. Past items inherit the
   0.55 opacity fade, so the line naturally dims toward older events. */
.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1.275rem - 1px);   /* centred directly under the dots */
    top: -1.5rem;                  /* up through the gap to the previous card */
    bottom: 0;                     /* down to this card's bottom */
    width: 2px;
    background: var(--accent);
}
.timeline-item:first-child::before { top: 50%; }     /* newest: begin AT the dot (capped) */
.timeline-item:last-child::before  { bottom: 50%; }  /* oldest: stop AT the dot (capped) */
/* Ongoing task (not yet done/cancelled/rejected): a faint GREY tail rises above the
   newest event and fades out toward the top — it reads as "the timeline will continue;
   more updates to come". The teal connector below still links the real past events.
   Once the task reaches a final state this disappears and the line caps at the dot. */
.timeline-ongoing .timeline-item:first-child::after {
    content: '';
    position: absolute;
    left: calc(-1.275rem - 1px);   /* aligned with the dots/connector */
    top: -1.6rem;                  /* start above the newest card */
    bottom: 50%;                   /* end at the newest dot's centre */
    width: 2px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0) 0, rgba(148, 163, 184, 0.55) 100%);
}
/* Icon badge on the timeline: the event emoji sits inside a circle whose ring
   colour shows the sentiment (green = good, red = bad, amber = changed). Clearer
   than a plain coloured dot. */
.timeline-dot {
    position: absolute;
    left: -2.15rem;
    top: 50%;
    transform: translateY(-50%);   /* vertically centred on the card */
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
    z-index: 1;
}
.timeline-dot.success { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); }
.timeline-dot.warning { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12); }
.timeline-dot.danger  { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }
.timeline-dot.muted   { border-color: #94a3b8; }

/* The newest event stays bold/dark; older (past) events fade to grey so it's
   obvious at a glance what state the task is in right now. */
.timeline-item.is-past               { opacity: 0.55; }
.timeline-item.is-current .glass     { border: 1px solid var(--accent); }

/* ─── Sidebar layout ─────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 260px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #042f2e 0%, #064e3b 50%, #0a3d3a 100%);
    border-right: 1px solid rgba(110, 231, 183, 0.15);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    /* Hidden by default (mobile-first). Without this the sidebar paints visible
       on first frame, then Alpine adds .sidebar-hidden and it animates out —
       the "appear then close" flash on every navigation. */
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #0a3d3a 0%, #0d4f4a 50%, #0a3d3a 100%);
}

/* Mobile: hidden by default */
.sidebar-hidden { transform: translateX(-100%); }
.sidebar-open   { transform: translateX(0); }

@media (min-width: 1024px) {
    .sidebar,
    .sidebar-hidden,
    .sidebar-open { transform: translateX(0); }
}

/* Main content shifts right on desktop */
.main-content {
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 1024px) {
    .main-content { margin-left: 260px; }
}

/* Sidebar header */
.sidebar-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(110, 231, 183, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-header img {
    width: 40px; height: 40px;
    border-radius: 10px;
    object-fit: contain;
    background: white;
    padding: 4px;
}

.sidebar-header h1 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    background: linear-gradient(135deg, #5eead4, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sidebar-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, #5eead4, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}
.sidebar-brand-sub {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(167, 243, 208, 0.6);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav section */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 10px;
    position: relative;
}

.sidebar-nav-section {
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(167, 243, 208, 0.5);
    padding: 16px 12px 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 2px 0;
    border-radius: 10px;
    color: rgba(236, 253, 245, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    position: relative;
    isolation: isolate;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(45, 212, 191, 0.1);
    transform: translateX(2px);
}

.sidebar-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.05));
    box-shadow: inset 3px 0 0 #2dd4bf;
}

.sidebar-link.active svg,
.sidebar-link.active i { color: #5eead4; }

/* Sliding active indicator (JS-driven). The static .active background above
   is a no-JS fallback; once JS adds .has-indicator, the moving pill below
   provides the highlight and smoothly slides between pages. */
html.js .sidebar-link.active,
.sidebar-nav.has-indicator .sidebar-link.active {
    background: transparent;
    box-shadow: none;
}
.sidebar-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.2), rgba(45, 212, 191, 0.05));
    box-shadow: inset 3px 0 0 #2dd4bf;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.34s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.2s ease,
                left 0.2s ease;
}

.sidebar-link svg, .sidebar-link i {
    width: 18px; height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.sidebar-link:hover svg, .sidebar-link:hover i {
    transform: scale(1.1);
}

/* Footer (user info + logout) */
.sidebar-footer {
    padding: 16px 12px 14px;
    border: 1px solid rgba(110, 231, 183, 0.28);
    border-bottom: none;
    background: rgba(4, 32, 30, 0.65);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 10px;
    transition: background 0.2s;
}
.sidebar-user:hover { background: rgba(45, 212, 191, 0.08); }

.sidebar-user-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.45);
}

.sidebar-user-info {
    flex: 1;
    min-width: 0;
}
.sidebar-user-info .name {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-info .role {
    color: rgba(110, 231, 183, 0.65);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-icon-btn {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(45, 212, 191, 0.08);
    color: rgba(236, 253, 245, 0.75);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.sidebar-icon-btn:hover {
    background: rgba(45, 212, 191, 0.18);
    color: #fff;
    border-color: rgba(110, 231, 183, 0.2);
    transform: translateY(-1px);
}

.sidebar-icon-btn.danger:hover {
    background: rgba(244, 63, 94, 0.15);
    color: #fda4af;
    border-color: rgba(244, 63, 94, 0.3);
}

/* Unified top header — white (light) / dark teal (dark), shown on all sizes */
.app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 60px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 8px rgba(13, 148, 136, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    gap: 12px;
}
@media (min-width: 640px) { .app-header { padding: 10px 24px; } }

.app-header-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-base);
    min-width: 0; /* allow the flex item to shrink so .truncate actually clips long titles */
}

.hdr-weather {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.1);
    color: var(--text-base);
    font-weight: 500;
}

/* Legacy (unused) */
.mobile-topbar { display: none; }

/* Backdrop for mobile sidebar */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.55);
    transition: opacity 0.3s;
}

@media (min-width: 1024px) {
    .sidebar-backdrop { display: none; }
}

/* ─── Modal panels ───────────────────────────────────────────────────
   The dialog box inside a fixed overlay. Two problems this fixes:
   1. Panels were .glass-card, which has a springy transform transition +
      a :hover lift. With the cursor sitting over an open modal that lift
      fired and "bounced" — read as a flicker / not-smooth pop.
   2. Only the backdrop faded in; the panel snapped. Now it pops in cleanly. */
@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.modal-panel {
    /* `both` holds the from-state (opacity 0) before the first frame so the
       panel never flashes its final state for a frame when opening. */
    animation: modal-pop 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.modal-panel:hover {
    /* Keep modal panels perfectly static — no card hover-lift/glow inside a modal. */
    transform: none;
    background: var(--card-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* ─── Toast (center-bottom, AJAX feedback) ───────────────────────────── */
.toast-center {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}
.toast-ok  { background: linear-gradient(135deg, #10b981, #059669); }
.toast-err { background: linear-gradient(135deg, #f43f5e, #e11d48); }

/* ─── Smooth collapse (grid-template-rows) ───────────────────────────
   Pure-CSS accordion: animates grid-template-rows 0fr<->1fr. Unlike JS
   height animation it needs no scrollHeight measurement and never snaps
   from a pixel height to `auto` at the end — so no stutter. The direct
   child is clipped while collapsed. */
.collapsible {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsible.is-open {
    grid-template-rows: 1fr;
}
.collapsible > * {
    overflow: hidden;
    min-height: 0;
}

/* All Tasks — AJAX results swap (no full page reload) + active tab highlight */
#taskResults { transition: opacity 0.2s ease; }
.task-tab.tab-on {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
}

/* ─── Table Task — compact spreadsheet view ──────────────────────────── */
.input-sm { padding: 0.45rem 0.6rem; font-size: 0.82rem; }

/* Table Task wraps filters + table in one card; it's a container, not a clickable card,
   so suppress the glass-card hover-lift/colour-shift. */
.tt-card:hover {
    transform: none;
    background: var(--card-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* The table itself is a separate raised panel inside the card — rounded, inset (not flush),
   and lifted with a soft shadow so it reads as 3D. overflow-x carries small-screen scroll and
   also clips the table to the rounded corners. */
.tt-table-panel {
    overflow-x: auto;
    background: var(--card-bg-elev);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Dark mode: soft shadows barely register on the dark card, so outline the panel with a
   brighter mint border + a deeper shadow so it clearly reads as a separate raised box. */
:root[data-theme="dark"] .tt-table-panel {
    border: 1.5px solid rgba(110, 231, 183, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(110, 231, 183, 0.06);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .tt-table-panel {
        border: 1.5px solid rgba(110, 231, 183, 0.5);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(110, 231, 183, 0.06);
    }
}

.ttable { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ttable thead th {
    text-align: left;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--card-bg-elev);
    z-index: 2;
}
.ttable th.tt-sort { cursor: pointer; user-select: none; }
.ttable th.tt-sort:hover { color: var(--text-base); }
.ttable th.sort-asc::after  { content: ' ▲'; color: var(--accent); }
.ttable th.sort-desc::after { content: ' ▼'; color: var(--accent); }
.ttable tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--glass-border);
    vertical-align: middle;
}
.ttable tbody tr:hover { background: rgba(148, 163, 184, 0.06); }
.ttable tbody tr:last-child td { border-bottom: 0; }
.tt-grip { width: 1.6rem; text-align: center; padding-left: 0.5rem !important; padding-right: 0 !important; }
.drag-handle { cursor: grab; color: var(--text-subtle); font-size: 1rem; line-height: 1; }
.drag-handle:active { cursor: grabbing; }
.tt-name { max-width: 22rem; }
.tt-num { width: 2.4rem; text-align: center; padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
/* Centered columns (#, Progress, Status, Priority). Task/Project/Due/People stay left-aligned. */
.ttable th.tt-c, .ttable td.tt-c { text-align: center; }
.tt-seq {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.45rem; height: 1.45rem; padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.16);
    color: var(--accent);
    font-weight: 700; font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
/* Finished tasks (done/cancelled/rejected) sink to the bottom, dimmed. */
.tt-done { opacity: 0.5; }
.tt-done .tt-seq { background: rgba(148, 163, 184, 0.18); color: var(--text-muted); }
.tt-done .drag-handle { visibility: hidden; }   /* can't reorder a finished task */

/* Long task descriptions collapse behind a "See details…" toggle — animates open/closed.
   max-height = exactly 5 lines (line-height pinned for a clean cut). The transition is always
   on; on load nothing changes the height (JS only measures), so it never animates in. JS sets
   max-height to the full scrollHeight to open (then releases to none so rotate can't clip it)
   and clears the inline value to close (falling back to the 5-line height below). */
.desc-collapse {
    overflow: hidden;
    max-height: 6.25rem;
    line-height: 1.25rem;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt-title-link { font-weight: 600; color: var(--text-base); }
.tt-title-link:hover { color: var(--accent); }
/* Task title: up to 2 lines, hover the title for a tooltip with the full text. */
.tt-name-wrap { position: relative; display: block; }
.tt-title-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
/* Table Task progress mini-bar */
.tt-prog { display: inline-block; width: 3.5rem; height: 0.4rem; border-radius: 999px; background: var(--glass-border); overflow: hidden; flex-shrink: 0; }
.tt-prog-fill { display: block; height: 100%; border-radius: 999px; }
.tt-muted { color: var(--text-muted); }
.tt-dim { color: var(--text-subtle); }
.tt-overdue { color: #f43f5e; font-weight: 600; }
.tt-assignees { display: inline-block; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tt-drag-ghost { opacity: 0.45; background: var(--accent-glow); }

.tt-desc-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.tt-desc-btn { font-size: 0.85rem; line-height: 1; opacity: 0.6; cursor: pointer; background: none; border: 0; padding: 0; }
.tt-desc-btn:hover { opacity: 1; }
.tt-tip {
    position: fixed; /* fixed (not absolute) so the table panel's overflow can't clip it; coords set inline on hover */
    z-index: 60;
    width: 16rem;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--card-bg-elev, var(--card-bg));
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-base);
    white-space: normal;
}
#ttToast { transition: opacity 0.3s ease; }

/* ─── Timeframe Task ─────────────────────────────────────────────────── */
.tf-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--card-bg-elev);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.10);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tf-row:hover { box-shadow: 0 7px 18px rgba(13, 148, 136, 0.20); transform: translateY(-1px); }

/* Calendar */
.tf-cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.tf-cal-head > div { text-align: center; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); padding: 4px 0; }
.tf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tf-cal-cell { min-height: 5.5rem; border: 1px solid var(--glass-border); border-radius: 8px; padding: 4px; overflow: hidden; cursor: pointer; transition: background 0.15s ease; }
.tf-cal-cell:hover { background: rgba(148, 163, 184, 0.06); }
.tf-cal-out { opacity: 0.4; }
.tf-cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tf-cal-sel { background: rgba(20, 184, 166, 0.12); }
.tf-cal-num { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; }
.tf-cal-today .tf-cal-num { color: var(--accent); }
.tf-cal-items { display: none; flex-direction: column; gap: 2px; }   /* pills: desktop only */
.tf-cal-pill { font-size: 0.66rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; border: 1px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.tf-cal-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; }   /* dots: mobile only */
.tf-cal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (min-width: 640px) {
    .tf-cal-items { display: flex; }
    .tf-cal-dots { display: none; }
}

/* Gantt */
.tf-gantt-row { display: flex; align-items: stretch; }
.tf-gantt-header { border-bottom: 1px solid var(--glass-border); margin-bottom: 4px; }
.tf-gantt-name {
    position: sticky; left: 0; z-index: 2;
    width: 11rem; min-width: 11rem; max-width: 11rem;
    padding: 0.4rem 0.6rem; font-size: 0.78rem; font-weight: 600;
    color: var(--text-base); background: var(--card-bg);
    border-right: 1px solid var(--glass-border);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center;
}
.tf-gantt-corner { background: var(--card-bg); }
.tf-gantt-day {
    width: 2.1rem; min-width: 2.1rem; flex-shrink: 0; text-align: center;
    font-size: 0.62rem; color: var(--text-muted); padding: 2px 0;
    border-left: 1px solid var(--glass-border);
    display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.tf-gantt-todaycol { background: rgba(20, 184, 166, 0.10); color: var(--accent); font-weight: 700; }
.tf-gantt-mon { font-size: 0.55rem; opacity: 0.85; }
.tf-gantt-track { position: relative; height: 2.1rem; flex-shrink: 0; }
.tf-gantt-bar {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 1.15rem; border-radius: 6px; min-width: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); display: block;
}
.tf-gantt-bar:hover { filter: brightness(1.1); }

/* Filter dropdowns animate open/closed via .collapsible; on desktop they stay open. */
@media (min-width: 640px) {
    .filter-collapse { grid-template-rows: 1fr; }
}

/* Mobile tweaks for the Table + Timeframe pages + smaller, tidier task-listing cards. */
@media (max-width: 640px) {
    .ttable { font-size: 0.78rem; }
    .ttable thead th, .ttable tbody td { padding: 0.45rem 0.5rem; }
    .tt-name { max-width: 11rem; }
    .tf-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .tf-cal-cell { min-height: 3.4rem; }
    .tf-cal-head > div { font-size: 0.58rem; }
    .tf-gantt-name { width: 7rem; min-width: 7rem; max-width: 7rem; padding: 0.4rem; font-size: 0.72rem; }

    /* My Tasks + All Tasks list cards — smaller fonts, tighter padding on phones */
    .task-row { padding: 0.6rem 0.7rem; }
    .task-row h3 { font-size: 0.875rem; line-height: 1.35; }
    #taskResults a.glass-card { padding: 0.7rem 0.8rem; }
    #taskResults a.glass-card h3 { font-size: 0.875rem; line-height: 1.35; }
    #taskResults a.glass-card p { font-size: 0.76rem; }
    #taskResults .text-xs, .task-row .text-xs { font-size: 0.68rem; }
    .tf-row .font-semibold { font-size: 0.85rem; }
}

/* Task detail — AJAX action swap (no reload). The grid dims briefly while the
   action posts, then the newest timeline event slides in at the top. */
#taskSwap { transition: opacity 0.2s ease; }
@keyframes tl-enter {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.timeline-item.tl-enter { animation: tl-enter 0.42s cubic-bezier(0.4, 0, 0.2, 1) both; }
.btn.is-loading { opacity: 0.6; pointer-events: none; }

/* Stat card: solid bg, colored accent strip */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.08);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
@media (min-width: 640px) {
    .stat-card { padding: 20px; }
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--stat-color, var(--accent));
    border-radius: 16px 16px 0 0;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(13, 148, 136, 0.15);
    border-color: var(--stat-color, var(--accent));
}

/* ─── Logout overlay (cashier admin style) ───────────────────────── */
#logoutOverlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 25, 23, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
#logoutOverlay.active {
    opacity: 1;
    pointer-events: all;
}
#logoutOverlay .lo-card {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.25), rgba(99, 102, 241, 0.15));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(110, 231, 183, 0.3);
    border-radius: 24px;
    padding: 48px 56px;
    text-align: center;
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    min-width: 320px;
}
#logoutOverlay.active .lo-card {
    transform: scale(1);
    opacity: 1;
}
.lo-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(45, 212, 191, 0.2);
    border-top-color: #5eead4;
    border-right-color: #2dd4bf;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 24px;
    box-shadow: 0 0 32px rgba(45, 212, 191, 0.4);
}
.lo-dot {
    display: inline-block;
    animation: bounce-dots 1.4s ease-in-out infinite;
    color: #5eead4;
    font-weight: 700;
    margin: 0 1px;
}
.lo-dot:nth-child(2) { animation-delay: 0.16s; }
.lo-dot:nth-child(3) { animation-delay: 0.32s; }

/* ─── Theme toggle button ────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-base);
    cursor: pointer;
    transition: all 0.25s ease;
}
.theme-toggle:hover {
    background: var(--glass-bg-strong);
    color: var(--accent);
    border-color: var(--accent);
    transform: rotate(15deg);
}

/* ─── Misc helpers ───────────────────────────────────────────────── */
.text-accent { color: var(--accent); }
.text-muted  { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }

.gradient-text {
    background: linear-gradient(135deg, #0d9488 0%, #06b6d4 50%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[x-cloak] { display: none !important; }

button, a, .input, [role="button"] {
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Tailwind dark/light overrides ──────────────────────────────── */
/* When using Tailwind classes that hardcode slate-X colors, give them theme-aware mapping */
.bg-slate-900, .bg-slate-800, .bg-slate-700, .bg-slate-750 {
    background: var(--glass-bg) !important;
}
.text-slate-100, .text-slate-200, .text-slate-300 {
    color: var(--text-base) !important;
}
.text-slate-400, .text-slate-500 {
    color: var(--text-muted) !important;
}
.text-slate-600, .text-slate-700 {
    color: var(--text-subtle) !important;
}
.border-slate-700, .border-slate-600, .border-slate-800 {
    border-color: var(--glass-border) !important;
}
.bg-white\/5, .bg-white\/\[0\.02\], .bg-white\/\[0\.03\] {
    background: rgba(20, 184, 166, 0.05) !important;
}
.bg-white\/10 {
    background: rgba(20, 184, 166, 0.1) !important;
}
.border-white\/5, .border-white\/10 {
    border-color: var(--glass-border) !important;
}

/* ── Image editor (crop + draw) controls ───────────────────────────── */
#imgEditor.flex { display: flex; }
.ie-btn { color: #fff; font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 8px; background: rgba(255,255,255,0.14); }
.ie-btn:hover { background: rgba(255,255,255,0.24); }
.ie-btn-primary { background: var(--accent); font-weight: 600; }
.ie-btn-primary:hover { filter: brightness(1.08); }
.ie-tool { color: #fff; font-size: 0.85rem; padding: 0.4rem 0.75rem; border-radius: 8px; background: rgba(255,255,255,0.14); }
.ie-tool.ie-active { background: var(--accent); }
.ie-swatch { width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 2px solid rgba(255,255,255,0.45); flex-shrink: 0; cursor: pointer; }
.ie-swatch.ie-active { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.ie-size { color: #fff; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: rgba(255,255,255,0.14); display: inline-flex; align-items: center; justify-content: center; }
.ie-size.ie-active { background: var(--accent); }
.ie-size > span { display: block; background: #fff; border-radius: 999px; }
/* Drawing canvas: block touch-scroll so strokes register on mobile */
#ie-canvas { cursor: crosshair; }

/* ── Image viewer sliding carousel (WhatsApp-style swipe) ──────────── */
.gal-track { display: flex; height: 100%; will-change: transform; }
.gal-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; }
.gal-img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 0.5rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* ── Goals checklist ───────────────────────────────────────────────── */
.goal-check {
    width: 1.2rem; height: 1.2rem; border-radius: 6px;
    border: 2px solid var(--glass-border);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.goal-check.is-done { background: var(--accent); border-color: var(--accent); }

/* ── Goal cards: image on top, description, then tickbox — 2–4 per row, drag to reorder ── */
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 640px)  { .goal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .goal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.goal-card {
    position: relative;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--glass-border); border-radius: 12px;
    background: var(--card-bg-elev, var(--card-bg));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* Live position number (top-left) — updates as goals are reordered */
.goal-num {
    position: absolute; top: 5px; left: 5px; z-index: 2;
    min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--accent); color: #fff;
    font-size: 0.7rem; font-weight: 700; line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.goal-card.is-done { opacity: 0.65; }
.goal-card-img { width: 100%; height: 5.5rem; object-fit: cover; cursor: zoom-in; display: block; }
.goal-card-body { padding: 0.55rem 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
/* No image → reserve top space so the number badge doesn't sit on top of the text */
.goal-card.no-img .goal-card-body { padding-top: 1.85rem; }
.goal-card-text { font-size: 0.8rem; line-height: 1.3; color: var(--text-base); word-break: break-word; }
.goal-card-foot { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; }
.goal-drag { cursor: grab; color: var(--text-subtle); font-size: 0.95rem; line-height: 1; user-select: none; touch-action: none; }
.goal-drag:active { cursor: grabbing; }
.goal-card .goal-drag { margin-left: auto; }
.goal-del { color: var(--text-muted); font-size: 0.85rem; line-height: 1; background: none; border: 0; cursor: pointer; padding: 0 2px; }
.goal-del:hover { color: #f43f5e; }
/* Add-goal card (compact box that sits in the grid, to the right of the goals) */
.goal-add-card { justify-content: center; gap: 0.5rem; padding: 0.6rem; border-style: dashed; }
.goal-add-input { width: 100%; background: transparent; border: 0; padding: 0; font-size: 0.8rem; color: var(--text-base); }
.goal-add-input:focus { outline: none; }
.goal-add-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.goal-add-clip { color: var(--text-muted); background: none; border: 0; cursor: pointer; display: inline-flex; padding: 2px; }
.goal-add-clip:hover { color: var(--accent); }
.goal-add-btn { font-size: 0.78rem; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 2px 6px; }
.goal-add-btn:hover { text-decoration: underline; }
/* Alpine sort drag feedback */
.sort-ghost, [x-sort\:item].sortable-ghost { opacity: 0.45; }

/* Input showing an over-limit error (e.g. title > 130 chars) */
.input-over, .input-over:focus { border-color: #f43f5e !important; box-shadow: 0 0 0 1px rgba(244,63,94,0.35) !important; }

/* ── Task detail layout ────────────────────────────────────────────────
   Desktop (≥1024px): two columns — LEFT 2/3 (Header → Stats → Admin →
   Details) and RIGHT 1/3 (Add-Progress → Timeline). Mobile: the .task-col
   wrappers collapse to display:contents so every card becomes a direct grid
   child and re-orders independently via .tl-* — keeping the mobile order
   Header → Add-Progress → Timeline → Stats → Details → Admin. */
.task-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.task-col-left, .task-col-right { display: flex; flex-direction: column; gap: 1.5rem; }

@media (min-width: 1024px) {
    .task-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    .task-col-left  { grid-column: span 2 / span 2; }
    .task-col-right { grid-column: span 1 / span 1; }
}

@media (max-width: 1023px) {
    .task-col-left, .task-col-right { display: contents; }
    .tl-header   { order: 1; }
    .tl-progress { order: 2; }
    .tl-timeline { order: 3; }
    .tl-stats    { order: 4; }
    .tl-details  { order: 5; }
    .tl-admin    { order: 6; }
}