/* kaipilot Design-System
 * =====================
 * Single source of truth for Tokens + Components.
 * Loaded once per page; works in dev (collectstatic-free) and production.
 *
 * Token-Convention:
 *   --kp-<category>-<role>-<state>?
 *   e.g.  --kp-color-primary, --kp-radius-md, --kp-shadow-lg
 *
 * Per-Tenant Overrides (via template):
 *   --t-primary, --t-accent (tenant brand colors)
 *
 * Bundle target: < 60 KB
 */

/* ============================================================
 * 1. DESIGN TOKENS
 * ============================================================ */

:root {
    /* Brand */
    --kp-color-brand:       #007DDA;
    --kp-color-brand-deep:  #17406D;
    --kp-color-accent:      #F49100;

    /* Tenant overrides (set per page via base.html) */
    --t-primary: var(--kp-color-brand);
    --t-accent:  var(--kp-color-accent);

    /* Neutrals */
    --kp-color-text:       #1F2937;
    --kp-color-muted:      #6B7280;
    --kp-color-subtle:     #9CA3AF;
    --kp-color-bg:         #F9FAFB;
    --kp-color-card:       #FFFFFF;
    --kp-color-border:     #E5E7EB;
    --kp-color-border-soft: #F3F4F6;

    /* Semantic */
    --kp-color-success:    #059669;
    --kp-color-success-bg: #ECFDF5;
    --kp-color-warn:       #D97706;
    --kp-color-warn-bg:    #FEF3C7;
    --kp-color-error:      #DC2626;
    --kp-color-error-bg:   #FEF2F2;
    --kp-color-info:       #2563EB;
    --kp-color-info-bg:    #EFF6FF;

    /* Spacing (4-base) */
    --kp-s-0: 0;
    --kp-s-1: 0.25rem;   /* 4px */
    --kp-s-2: 0.5rem;    /* 8px */
    --kp-s-3: 0.75rem;   /* 12px */
    --kp-s-4: 1rem;      /* 16px */
    --kp-s-5: 1.25rem;   /* 20px */
    --kp-s-6: 1.5rem;    /* 24px */
    --kp-s-8: 2rem;      /* 32px */
    --kp-s-10: 2.5rem;   /* 40px */
    --kp-s-12: 3rem;     /* 48px */

    /* Page padding scales with viewport */
    --kp-pad-x: clamp(1rem, 4vw, 2rem);
    --kp-pad-y: clamp(0.75rem, 2vw, 1rem);

    /* Radius */
    --kp-radius-sm: 6px;
    --kp-radius-md: 8px;
    --kp-radius-lg: 12px;
    --kp-radius-xl: 16px;
    --kp-radius-pill: 999px;

    /* Shadows */
    --kp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --kp-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    --kp-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
    --kp-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.18);

    /* Typography */
    --kp-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --kp-font-serif: ui-serif, Georgia, "Times New Roman", serif;
    --kp-font-mono:  ui-monospace, "SF Mono", Monaco, "Cascadia Mono", monospace;

    --kp-text-xs:   0.75rem;
    --kp-text-sm:   0.85rem;
    --kp-text-base: 1rem;
    --kp-text-lg:   1.125rem;
    --kp-text-xl:   1.25rem;
    --kp-text-2xl:  1.5rem;
    --kp-text-3xl:  2rem;
    --kp-text-hero: clamp(1.75rem, 6vw, 3.5rem);

    /* Tap targets (iOS/WCAG) */
    --kp-tap: 44px;

    /* z-index scale */
    --kp-z-base:    1;
    --kp-z-sticky:  50;
    --kp-z-modal:   100;
    --kp-z-toast:   200;
    --kp-z-tooltip: 300;
}

/* ============================================================
 * 2. RESET + BASE
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--kp-font-sans);
    color: var(--kp-color-text);
    background: var(--kp-color-bg);
    line-height: 1.6;
    margin: 0;
}
a { color: var(--t-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }


/* ============================================================
 * 3. COMPONENTS
 * ============================================================ */

/* ---- Card -------------------------------------------------- */
.kp-card {
    background: var(--kp-color-card);
    border: 1px solid var(--kp-color-border);
    border-radius: var(--kp-radius-lg);
    padding: var(--kp-s-5);
    box-shadow: var(--kp-shadow-md);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.kp-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--kp-s-3);
    margin-bottom: var(--kp-s-3);
}
.kp-card-head h2 {
    font-size: var(--kp-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kp-color-muted);
    font-weight: 700;
    margin: 0;
}

/* ---- Buttons ----------------------------------------------- */
.kp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kp-s-2);
    padding: var(--kp-s-2) var(--kp-s-4);
    min-height: var(--kp-tap);
    border-radius: var(--kp-radius-sm);
    font-size: var(--kp-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.kp-btn:hover { text-decoration: none; }
.kp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.kp-btn-primary  { background: var(--t-primary); color: white; }
.kp-btn-primary:hover  { background: var(--kp-color-brand-deep); color: white; }
.kp-btn-outline  { background: white; color: var(--t-primary); border-color: var(--t-primary); }
.kp-btn-outline:hover  { background: var(--t-primary); color: white; }
.kp-btn-ghost    { background: transparent; color: var(--kp-color-muted); }
.kp-btn-ghost:hover    { color: var(--kp-color-brand-deep); background: var(--kp-color-bg); }

.kp-btn-block { width: 100%; }
.kp-btn-sm    { padding: 0.35rem 0.7rem; font-size: var(--kp-text-xs); min-height: 32px; }
.kp-btn-lg    { padding: var(--kp-s-3) var(--kp-s-6); font-size: var(--kp-text-base); }

/* ---- Stat Tile -------------------------------------------- */
.kp-stat {
    background: var(--kp-color-card);
    border: 1px solid var(--kp-color-border);
    border-radius: var(--kp-radius-lg);
    padding: var(--kp-s-4);
}
.kp-stat .label {
    font-size: var(--kp-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kp-color-muted);
    margin-bottom: var(--kp-s-1);
}
.kp-stat .value {
    font-size: var(--kp-text-2xl);
    font-weight: 800;
    color: var(--kp-color-brand-deep);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.kp-stat .sub {
    font-size: var(--kp-text-sm);
    color: var(--kp-color-muted);
    margin-top: var(--kp-s-1);
}

.kp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--kp-s-3);
}

/* ---- Pill / Badge ----------------------------------------- */
.kp-pill {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--kp-radius-pill);
    font-size: var(--kp-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.kp-pill-success { background: var(--kp-color-success-bg); color: #064E3B; }
.kp-pill-warn    { background: var(--kp-color-warn-bg);    color: #92400E; }
.kp-pill-error   { background: var(--kp-color-error-bg);   color: #7F1D1D; }
.kp-pill-info    { background: var(--kp-color-info-bg);    color: #1E3A8A; }
.kp-pill-muted   { background: #F3F4F6; color: var(--kp-color-muted); }

/* Urgency pills (used cross-cockpit) */
.kp-urgency-low    { background: #BBF7D0; color: #064E3B; }
.kp-urgency-medium { background: #FED7AA; color: #7C2D12; }
.kp-urgency-high   { background: #FECACA; color: #7F1D1D; }

/* ---- Empty State ------------------------------------------ */
.kp-empty {
    text-align: center;
    padding: var(--kp-s-12) var(--kp-s-4);
    color: var(--kp-color-muted);
}
.kp-empty .ico { font-size: 3rem; margin-bottom: var(--kp-s-3); display: block; }
.kp-empty .title { font-size: var(--kp-text-lg); color: var(--kp-color-text); margin-bottom: var(--kp-s-2); }
.kp-empty .desc { font-size: var(--kp-text-sm); max-width: 28rem; margin: 0 auto; }

/* ---- Toast ------------------------------------------------ */
.kp-toast {
    position: fixed;
    bottom: var(--kp-s-6);
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--kp-color-brand-deep);
    color: white;
    padding: var(--kp-s-3) var(--kp-s-6);
    border-radius: var(--kp-radius-pill);
    font-size: var(--kp-text-sm);
    font-weight: 500;
    box-shadow: var(--kp-shadow-xl);
    transition: transform 0.3s ease;
    z-index: var(--kp-z-toast);
}
.kp-toast.show { transform: translateX(-50%) translateY(0); }

/* ---- Modal ------------------------------------------------ */
.kp-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--kp-z-modal);
    padding: var(--kp-s-4);
}
.kp-modal-backdrop.show { display: flex; }
.kp-modal {
    background: var(--kp-color-card);
    border-radius: var(--kp-radius-xl);
    max-width: 540px;
    width: 100%;
    padding: var(--kp-s-6);
    box-shadow: var(--kp-shadow-xl);
}

/* ---- Tabbed Navigation (Desktop) --------------------------- */
.kp-tabs {
    display: flex;
    gap: var(--kp-s-1);
    border-bottom: 1px solid var(--kp-color-border);
    background: var(--kp-color-card);
    padding: var(--kp-s-2) var(--kp-pad-x) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.kp-tabs::-webkit-scrollbar { display: none; }
.kp-tab {
    flex-shrink: 0;
    padding: var(--kp-s-3) var(--kp-s-4);
    color: var(--kp-color-muted);
    font-size: var(--kp-text-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--kp-s-1);
}
.kp-tab:hover { color: var(--kp-color-text); text-decoration: none; }
.kp-tab.active {
    color: var(--t-primary);
    border-bottom-color: var(--t-primary);
    font-weight: 600;
}
.kp-tab .ico { font-size: 1rem; }
.kp-tab .count {
    background: var(--kp-color-bg);
    color: var(--kp-color-muted);
    border-radius: var(--kp-radius-pill);
    padding: 0 0.5rem;
    font-size: var(--kp-text-xs);
    margin-left: var(--kp-s-1);
}
.kp-tab.active .count { background: var(--t-primary); color: white; }

/* ---- Bottom-Nav (Mobile) ----------------------------------- */
.kp-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--kp-color-card);
    border-top: 1px solid var(--kp-color-border);
    z-index: var(--kp-z-sticky);
    padding: var(--kp-s-1) 0 max(var(--kp-s-1), env(safe-area-inset-bottom));
}
.kp-bottom-nav-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}
.kp-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--kp-s-2) 0;
    min-height: var(--kp-tap);
    color: var(--kp-color-muted);
    text-decoration: none;
    font-size: 0.7rem;
}
.kp-bottom-nav-item:hover { text-decoration: none; }
.kp-bottom-nav-item .ico { font-size: 1.4rem; line-height: 1; }
.kp-bottom-nav-item.active { color: var(--t-primary); }

/* ---- Floating Mic-Button ----------------------------------- */
.kp-mic-fab {
    position: fixed;
    right: var(--kp-s-4);
    bottom: calc(var(--kp-s-4) + env(safe-area-inset-bottom));
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--t-primary);
    color: white;
    border: 4px solid var(--kp-color-card);
    box-shadow: var(--kp-shadow-lg);
    font-size: 1.75rem;
    cursor: pointer;
    z-index: calc(var(--kp-z-sticky) + 10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: inherit;
}
.kp-mic-fab:hover {
    background: var(--kp-color-brand-deep);
    transform: scale(1.05);
}
.kp-mic-fab.recording {
    background: var(--kp-color-error);
    animation: kp-pulse 1.4s ease-in-out infinite;
}

/* ---- Animations -------------------------------------------- */
@keyframes kp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
    50%      { box-shadow: 0 0 0 18px rgba(220, 38, 38, 0); }
}
@keyframes kp-spin { to { transform: rotate(360deg); } }
.kp-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--kp-color-border);
    border-top-color: var(--t-primary);
    border-radius: 50%;
    animation: kp-spin 0.8s linear infinite;
    vertical-align: middle;
}

/* ============================================================
 * 4. RESPONSIVE
 * ============================================================ */

/* Mobile: Bottom-Nav statt Top-Tabs */
@media (max-width: 720px) {
    .kp-tabs { display: none; }
    .kp-bottom-nav { display: block; }
    body.has-bottom-nav { padding-bottom: 60px; }
    .kp-mic-fab {
        bottom: calc(70px + env(safe-area-inset-bottom));
    }
}

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