/* saksham.css — shared styles for Saksham Skill Census
   Covers: scrollbars, select arrow, tab transitions, card styles,
           badge colour classes, animations, spinner overlay.
   Both index.html and insights.html link this file.
*/

/* ── Body transition ─────────────────────────────────────────── */
body { transition: background-color 0.3s ease, color 0.3s ease; }

/* ── Custom scrollbars ───────────────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar          { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track    { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb    { background: #94a3b8; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }
.hide-scrollbar::-webkit-scrollbar            { display: none; }

/* ── Custom select arrow ─────────────────────────────────────── */
.custom-select {
    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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* ── Tab transitions (index.html uses .tab-content, insights uses .tab-panel) */
.tab-content  { display: none; }
.tab-panel    { display: none; }
.tab-content.active,
.tab-panel.active {
    display: block;
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-up { animation: slideUp 0.45s ease both; }

/* ── Card glow ───────────────────────────────────────────────── */
.card-glow      { box-shadow: 0 0 0 1px rgba(6,182,212,.07),  0 4px 20px rgba(0,0,0,.07); }
.dark .card-glow{ box-shadow: 0 0 0 1px rgba(6,182,212,.09),  0 4px 28px rgba(0,0,0,.28); }

/* ── Gradient border (insights cards) ───────────────────────── */
.gb { position: relative; }
.gb::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(6,182,212,.35), rgba(99,102,241,.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ── Score rings (insights.html) ─────────────────────────────── */
.score-ring {
    stroke-dasharray: 188.5;
    stroke-dashoffset: 188.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Agent action badges ─────────────────────────────────────── */
.badge-COMMEND { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.badge-MONITOR { background: rgba(245,158,11,.15);  color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.badge-COACH   { background: rgba(59,130,246,.15);  color: #3b82f6; border: 1px solid rgba(59,130,246,.3); }
.badge-URGENT  { background: rgba(239,68,68,.15);   color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

/* ── Territory priority badges ───────────────────────────────── */
.pri-HIGH   { background: rgba(239,68,68,.12);   color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.pri-MEDIUM { background: rgba(245,158,11,.12);  color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.pri-LOW    { background: rgba(16,185,129,.12);  color: #10b981; border: 1px solid rgba(16,185,129,.3); }

/* ── Territory collection status badges ──────────────────────── */
.st-ACTIVE   { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.3); }
.st-STALLED  { background: rgba(239,68,68,.12);  color: #ef4444; border: 1px solid rgba(239,68,68,.3); }
.st-COMPLETE { background: rgba(99,102,241,.12); color: #818cf8; border: 1px solid rgba(99,102,241,.3); }

/* ── Trend colours ───────────────────────────────────────────── */
.tr-ACCELERATING { color: #10b981; }
.tr-STABLE       { color: #94a3b8; }
.tr-DECLINING    { color: #f59e0b; }
.tr-STALLED      { color: #ef4444; }

/* ── Prose narrative blocks (insights.html) ──────────────────── */
.prose-block p              { margin-bottom: 0.65rem; line-height: 1.72; }
.prose-block p:last-child   { margin-bottom: 0; }

/* ── Spinner overlay (shared between both pages) ─────────────── */
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(248,250,252,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 400;
    backdrop-filter: blur(3px);
}
.dark .spinner-overlay {
    background: rgba(15,23,42,0.75);
}

/* ── Tab strip scroll fade (mobile) ──────────────────────────── */
.tab-scroll-wrap {
    position: relative;
}
.tab-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    border-radius: 0 0.75rem 0.75rem 0;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.92));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.dark .tab-scroll-wrap::after {
    background: linear-gradient(to right, transparent, rgba(30,41,59,0.92));
}
/* Show fade only when there's more to scroll */
.tab-scroll-wrap.tab-scroll-faded::after {
    opacity: 1;
}

/* ── Table horizontal scroll fade (mobile) ───────────────────── */
.table-scroll-wrap {
    position: relative;
}
.table-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.90));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.dark .table-scroll-wrap::after {
    background: linear-gradient(to right, transparent, rgba(15,23,42,0.90));
}
.table-scroll-wrap.at-end::after {
    opacity: 0;
}


input[type="checkbox"] { cursor: pointer; }

/* ── Compact date inputs (show YY not YYYY to save width) ─────── */
.date-compact::-webkit-datetime-edit-year-field { max-width: 2ch; }
.date-compact::-webkit-inner-spin-button,
.date-compact::-webkit-calendar-picker-indicator { margin: 0; padding: 0; scale: 0.85; opacity: 0.5; }
/* ── Print / PDF styles (AI Insights page) ───────────────────────────────── */
@media print {
    /* Hide navigation, controls, buttons */
    .no-print,
    .sticky,
    button,
    select + * { display: none !important; }

    /* Force light background for readability */
    html, body { background: #fff !important; color: #1e293b !important; }
    .dark { background: #fff !important; }

    /* Remove shadows and dark backgrounds from cards */
    .bg-slate-800, .dark\:bg-slate-800,
    .bg-slate-900, .dark\:bg-slate-900 {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
    }

    /* Make sure active panel shows */
    .tab-panel { display: block !important; }
    .tab-panel:not(.active) { display: none !important; }

    /* Disclaimer at bottom — always visible in print */
    .print-show,
    .bg-amber-50 {
        display: flex !important;
        border: 1px solid #fbbf24 !important;
        background: #fffbeb !important;
        break-inside: avoid;
    }
    .bg-amber-50 p, .print-show p { color: #92400e !important; }

    /* Page breaks */
    .card-glow { break-inside: avoid; }
    .grid { break-inside: avoid; }

    /* Ensure charts render */
    canvas { max-width: 100% !important; }

    /* Page margins */
    @page { margin: 1.2cm; }
}