/* GoalPic admin — supplements the Tailwind CDN layer in templates/webadmin/_head.html.
   Only rules that Tailwind utilities cannot express belong here. */

:root {
    --chart-grid: #eef2f6;
    --chart-text: #94a3b8;
    --chart-tooltip-bg: #1e293b;
    --chart-fill: rgba(79, 70, 229, 0.10);
    --chart-1: #4f46e5;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #ef4444;
    --chart-5: #8b5cf6;
    --chart-6: #06b6d4;
    --chart-7: #ec4899;
    --chart-muted: #cbd5e1;
}

html.dark {
    --chart-grid: #1e293b;
    --chart-text: #64748b;
    --chart-tooltip-bg: #0f172a;
    --chart-fill: rgba(129, 140, 248, 0.14);
    --chart-1: #818cf8;
    --chart-2: #34d399;
    --chart-3: #fbbf24;
    --chart-4: #f87171;
    --chart-5: #a78bfa;
    --chart-6: #22d3ee;
    --chart-7: #f472b6;
    --chart-muted: #475569;
}

/* Page + sidebar surfaces (overscroll areas included). */
/* Reserve the scrollbar's space so short result sets don't widen the layout. */
html { background: #f8fafc; scrollbar-gutter: stable; }
html.dark { background: #0b1120; }
#adminSidebar { background: #ffffff; border-right: 1px solid #e2e8f0; }
html.dark #adminSidebar { background: #0f172a; border-right-color: #1e293b; }

/* A class like `flex` beats the [hidden] attribute's default display:none,
   which would otherwise leave hidden modals intercepting clicks. */
[hidden] { display: none !important; }

/* Avatar fallbacks: soft tint + readable text, deterministic per user id. */
.avatar-tone-0 { background: #e0e7ff; color: #4338ca; }
.avatar-tone-1 { background: #d1fae5; color: #047857; }
.avatar-tone-2 { background: #fef3c7; color: #b45309; }
.avatar-tone-3 { background: #fce7f3; color: #be185d; }
.avatar-tone-4 { background: #cffafe; color: #0e7490; }
.avatar-tone-5 { background: #ede9fe; color: #6d28d9; }
html.dark .avatar-tone-0 { background: #312e81; color: #c7d2fe; }
html.dark .avatar-tone-1 { background: #064e3b; color: #a7f3d0; }
html.dark .avatar-tone-2 { background: #78350f; color: #fde68a; }
html.dark .avatar-tone-3 { background: #831843; color: #fbcfe8; }
html.dark .avatar-tone-4 { background: #164e63; color: #a5f3fc; }
html.dark .avatar-tone-5 { background: #4c1d95; color: #ddd6fe; }

/* Scrollbars ------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
html.dark * { scrollbar-color: #475569 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; background-clip: content-box; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; background-clip: content-box; }

/* Toast exit animation --------------------------------------------------- */
@keyframes toast-out {
    to { opacity: 0; transform: translateX(1.5rem); max-height: 0; margin-bottom: 0; }
}
.toast-leaving { animation: toast-out .25s ease-in forwards; }

/* AJAX table busy state -------------------------------------------------- */
[aria-busy="true"] { position: relative; opacity: .55; transition: opacity .15s ease; pointer-events: none; }

/* Responsive tables: card-stack below md --------------------------------- */
@media (max-width: 767px) {
    /* Desktop tables use fixed column widths plus a min-width (scroll rather
       than squash); as stacked cards they just fill the screen. */
    table[data-responsive="stack"] { min-width: 0 !important; table-layout: auto; }
    table[data-responsive="stack"] colgroup { display: none; }

    table[data-responsive="stack"] thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
    }
    table[data-responsive="stack"],
    table[data-responsive="stack"] tbody,
    table[data-responsive="stack"] tr,
    table[data-responsive="stack"] td { display: block; width: 100%; }

    table[data-responsive="stack"] tr {
        margin-bottom: .75rem; border-radius: .75rem; padding: .25rem .875rem;
        border: 1px solid #e2e8f0; background: #fff;
    }
    html.dark table[data-responsive="stack"] tr { border-color: #334155; background: #1e293b; }

    table[data-responsive="stack"] td {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .5rem 0; border: 0; text-align: right;
        min-width: 0; overflow-wrap: anywhere;
    }
    table[data-responsive="stack"] td + td { border-top: 1px solid #f1f5f9; }
    html.dark table[data-responsive="stack"] td + td { border-top-color: #334155; }

    table[data-responsive="stack"] td::before {
        content: attr(data-label);
        flex: 0 0 auto; text-align: left;
        font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
        color: #94a3b8;
    }
    /* Cells with no label (e.g. actions) shouldn't reserve label space. */
    table[data-responsive="stack"] td:not([data-label])::before { content: none; }

    /* Row numbers carry no meaning once rows become cards. */
    table[data-responsive="stack"] td[data-label="#"] { display: none; }

    /* Truncation is a desktop-column concern; let values wrap in a card. */
    table[data-responsive="stack"] td .truncate,
    table[data-responsive="stack"] td .line-clamp-2 {
        overflow: visible; text-overflow: clip; white-space: normal;
        display: block; -webkit-line-clamp: none;
    }
    table[data-responsive="stack"] td .max-w-xs,
    table[data-responsive="stack"] td .max-w-md { max-width: 100%; }
}

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Print (user report) ---------------------------------------------------- */
@media print {
    #adminSidebar, #adminTopbar, #toastRegion, .no-print { display: none !important; }
    #adminMain { padding: 0 !important; }
    .card { box-shadow: none !important; border-color: #cbd5e1 !important; break-inside: avoid; }
}