/*
 * Mintoak brand theme — shared by all dashboard pages (excluding wt-* variants).
 * Defines tokens, typography, and component overrides for both light + dark themes.
 *
 * Brand palette (do not introduce non-palette colors except --mk-danger):
 *   Lime    #80C341  primary action, in-progress
 *   Forest  #0B6E4F  hover/active, success/completed
 *   Amber   #E5A20C  warning
 *   Ocean   #3885A8  info
 *   Mist    #E2DADB  neutral light surface / pill
 *   Cloud   #E7DFDD  body text on dark
 *   Charcoal #1A1A1A body text on light
 *   Danger  #B91C1C  failure/error — single approved out-of-palette exception
 */

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

:root {
    /* Brand tokens */
    --mk-lime: #80C341;
    --mk-lime-tint: #B0D680;
    --mk-lime-soft: #F2F9E9;
    --mk-forest: #0B6E4F;
    --mk-forest-tint: #4A9275;
    --mk-forest-soft: #E1F0EA;
    --mk-amber: #E5A20C;
    --mk-amber-tint: #F0BB45;
    --mk-amber-soft: #FDF3D9;
    --mk-ocean: #3885A8;
    --mk-ocean-tint: #6FA8C2;
    --mk-ocean-soft: #E2EEF5;
    --mk-mist: #E2DADB;
    --mk-cloud: #E7DFDD;
    --mk-charcoal: #1A1A1A;
    --mk-danger: #B91C1C;
    --mk-danger-soft: #FEE2E2;

    /* Light theme surfaces */
    --mk-bg-page: #FFFFFF;
    --mk-bg-card: #FFFFFF;
    --mk-bg-subtle: #F7F5F4;          /* Mist-tinted neutral */
    --mk-bg-hover: #F2F9E9;            /* Lime-soft */
    --mk-border: #E2DADB;              /* Mist */
    --mk-border-strong: #C7BCBC;
    --mk-text-primary: #1A1A1A;        /* Charcoal */
    --mk-text-secondary: #4A4544;
    --mk-text-muted: #8A7F7E;

    /* Action tokens */
    --mk-action: var(--mk-lime);
    --mk-action-fg: #FFFFFF;
    --mk-action-hover: var(--mk-forest);
}

.dark {
    /* Neutral lights-out (pure near-black, no brand tint) */
    --mk-bg-page: #000000;
    --mk-bg-card: #0A0A0A;
    --mk-bg-subtle: #141414;
    --mk-bg-hover: #1E1E1E;
    --mk-border: #1E1E1E;
    --mk-border-strong: #2A2A2A;
    --mk-text-primary: #E7DFDD;        /* Cloud */
    --mk-text-secondary: #B6ADAB;
    --mk-text-muted: #7A716F;

    --mk-action: var(--mk-lime);
    --mk-action-fg: #000000;
    --mk-action-hover: var(--mk-lime-tint);

    --mk-lime-soft: rgba(128, 195, 65, 0.18);
    --mk-forest-soft: rgba(11, 110, 79, 0.22);
    --mk-amber-soft: rgba(229, 162, 12, 0.18);
    --mk-ocean-soft: rgba(56, 133, 168, 0.18);
    --mk-danger-soft: rgba(185, 28, 28, 0.22);
}

/* ===== Typography ===== */
html, body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-feature-settings: 'cv11';
}

body {
    background-color: var(--mk-bg-page);
    color: var(--mk-text-primary);
}

/* ===== Surface overrides (replace Tailwind gray-100/800/900 backgrounds) ===== */
.bg-gray-100 { background-color: var(--mk-bg-page) !important; }
.bg-white    { background-color: var(--mk-bg-card) !important; }
.bg-gray-50  { background-color: var(--mk-bg-subtle) !important; }

.dark .dark\:bg-gray-900       { background-color: var(--mk-bg-page) !important; }
.dark .dark\:bg-gray-800       { background-color: var(--mk-bg-card) !important; }
.dark .dark\:bg-gray-700       { background-color: var(--mk-bg-subtle) !important; }
.dark .dark\:bg-gray-700\/50   { background-color: var(--mk-bg-subtle) !important; opacity: 0.7; }
.dark .dark\:bg-gray-700\/30   { background-color: var(--mk-bg-subtle) !important; opacity: 0.5; }

/* ===== Borders ===== */
.border-gray-200, .border-gray-300 { border-color: var(--mk-border) !important; }
.dark .dark\:border-gray-700,
.dark .dark\:border-gray-600 { border-color: var(--mk-border) !important; }
.dark .dark\:border-gray-500 { border-color: var(--mk-border-strong) !important; }

/* ===== Hover surfaces ===== */
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover { background-color: var(--mk-bg-hover) !important; }
.dark .dark\:hover\:bg-gray-700:hover,
.dark .dark\:hover\:bg-gray-600:hover { background-color: var(--mk-bg-hover) !important; }

/* ===== Brand action — preset/granularity buttons ===== */
.preset-btn, .gran-btn, .tab-btn { transition: all 0.15s; font-family: inherit; }
.preset-btn.active,
.gran-btn.active {
    background-color: var(--mk-action) !important;
    color: var(--mk-action-fg) !important;
    border-color: var(--mk-action) !important;
}
.preset-btn:hover:not(.active),
.gran-btn:hover:not(.active) {
    border-color: var(--mk-action) !important;
    color: var(--mk-action-hover) !important;
}

/* ===== Tab navigation (insights uses .tab-btn) ===== */
.tab-btn.bg-blue-500,
.tab-btn[class*="bg-blue-"] {
    background-color: var(--mk-action) !important;
    color: var(--mk-action-fg) !important;
}

/* ===== Dark mode date input ===== */
.dark input[type="date"], .dark input[type="datetime-local"] { color-scheme: dark; }

/* ===== Section divider ===== */
.section-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0;
}
.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mk-border);
}

/* ===== Sortable table headers ===== */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.12s, background-color 0.12s; }
th.sortable:hover { color: var(--mk-action-hover) !important; background-color: var(--mk-bg-hover) !important; }
.dark th.sortable:hover { color: var(--mk-lime) !important; }
th.sortable .sort-arrow { display: inline-block; width: 0.75em; margin-left: 0.25em; opacity: 0.3; font-size: 0.6em; }
th.sortable.sort-asc .sort-arrow,
th.sortable.sort-desc .sort-arrow { opacity: 1; color: var(--mk-action); }

/* ===== Pagination ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--mk-border);
}
.pagination button {
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    border: 1px solid var(--mk-border-strong);
    background: transparent;
    color: var(--mk-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.pagination button:disabled { opacity: 0.3; cursor: default; }
.pagination button:not(:disabled):hover {
    background: var(--mk-bg-hover);
    border-color: var(--mk-action);
    color: var(--mk-action-hover);
}
.pagination .page-info { font-size: 0.75rem; color: var(--mk-text-muted); }

/* ===== Status pills (semantic) ===== */
.status-pending,
.status-running,
.status-completed,
.status-failed,
.status-skipped,
.status-timed_out {
    font-family: inherit;
    font-weight: 600;
    border-radius: 9999px;
}
.status-pending   { background-color: var(--mk-amber-soft);  color: var(--mk-amber); }
.status-running   { background-color: var(--mk-lime-soft);   color: var(--mk-forest); }
.status-completed { background-color: var(--mk-forest-soft); color: var(--mk-forest); }
.status-failed    { background-color: var(--mk-danger-soft); color: var(--mk-danger); }
.status-skipped   { background-color: var(--mk-bg-subtle);   color: var(--mk-text-muted); }
.status-timed_out { background-color: var(--mk-amber-soft);  color: var(--mk-amber); }

.dark .status-pending,
.dark .status-timed_out { color: var(--mk-amber-tint); }
.dark .status-running   { color: var(--mk-lime); }
.dark .status-completed { color: var(--mk-lime); }
.dark .status-failed    { color: #FCA5A5; }
.dark .status-skipped   { color: var(--mk-text-secondary); }

/* ===== Log severity ===== */
.log-info    { color: var(--mk-text-secondary); }
.log-warning { color: var(--mk-amber); }
.log-error   { color: var(--mk-danger); }
.dark .log-info    { color: var(--mk-text-secondary); }
.dark .log-warning { color: var(--mk-amber-tint); }
.dark .log-error   { color: #FCA5A5; }

/* ===== Phase dots (used on index.html progress indicator) ===== */
.phase-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; display: inline-block; }
.phase-completed { background-color: var(--mk-forest); }
.phase-current   { background-color: var(--mk-lime); animation: phase-pulse 1.4s ease-in-out infinite; }
.phase-pending   { background-color: var(--mk-mist); }
.dark .phase-pending { background-color: var(--mk-border-strong); }

@keyframes phase-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ===== Progress bar pulse (existing animation, brand-tinted) ===== */
@keyframes progress-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.progress-current { animation: progress-pulse 1.5s ease-in-out infinite; background-color: var(--mk-lime); }

/* ===== Custom scrollbar ===== */
.logs-container::-webkit-scrollbar { width: 8px; }
.logs-container::-webkit-scrollbar-track { background-color: var(--mk-bg-subtle); border-radius: 4px; }
.logs-container::-webkit-scrollbar-thumb { background-color: var(--mk-border-strong); border-radius: 4px; }
.logs-container::-webkit-scrollbar-thumb:hover { background-color: var(--mk-action); }

/* ===== Inline detail-row expansion (preserved from index.html) ===== */
.detail-row td > div {
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.3s ease-out;
    overflow: hidden;
}
.detail-row.collapsed td > div { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.detail-row.expanded td > div  { max-height: 5000px; opacity: 1; }

/* ===== Focus rings — brand-tinted ===== */
*:focus-visible {
    outline: 2px solid var(--mk-action);
    outline-offset: 2px;
}
input:focus, textarea:focus, select:focus, button:focus {
    outline: none;
}
.focus\:ring-2:focus,
.focus\:ring-blue-500:focus {
    box-shadow: 0 0 0 2px var(--mk-action) !important;
}

/* ===== Chart container (existing) ===== */
.chart-container { position: relative; }

/* ===== Brand-aware utilities for new components ===== */
.mk-card {
    background-color: var(--mk-bg-card);
    border: 1px solid var(--mk-border);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}
.mk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
}
.mk-pill-lime    { background-color: var(--mk-lime-soft);   color: var(--mk-forest); }
.mk-pill-forest  { background-color: var(--mk-forest-soft); color: var(--mk-forest); }
.mk-pill-amber   { background-color: var(--mk-amber-soft);  color: var(--mk-amber); }
.mk-pill-ocean   { background-color: var(--mk-ocean-soft);  color: var(--mk-ocean); }
.mk-pill-mist    { background-color: var(--mk-bg-subtle);   color: var(--mk-text-muted); }
.mk-pill-danger  { background-color: var(--mk-danger-soft); color: var(--mk-danger); }
.dark .mk-pill-lime    { color: var(--mk-lime); }
.dark .mk-pill-forest  { color: var(--mk-lime); }
.dark .mk-pill-amber   { color: var(--mk-amber-tint); }
.dark .mk-pill-ocean   { color: var(--mk-ocean-tint); }
.dark .mk-pill-danger  { color: #FCA5A5; }

/* Clickable pill (used for filter chips in Work-tab Needs You panel). */
button.mk-pill {
    cursor: pointer;
    border: 1px solid transparent;
    font: inherit;
}
button.mk-pill:hover { filter: brightness(0.95); }
.mk-pill-active { box-shadow: 0 0 0 2px var(--mk-ocean) inset; }
.dark .mk-pill-active { box-shadow: 0 0 0 2px var(--mk-ocean-tint) inset; }

.mk-btn-primary {
    background-color: var(--mk-action);
    color: var(--mk-action-fg);
    border: 1px solid var(--mk-action);
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
    font-family: inherit;
}
.mk-btn-primary:hover { background-color: var(--mk-action-hover); border-color: var(--mk-action-hover); }
.mk-btn-secondary {
    background-color: transparent;
    color: var(--mk-text-secondary);
    border: 1px solid var(--mk-border-strong);
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
}
.mk-btn-secondary:hover {
    color: var(--mk-action-hover);
    border-color: var(--mk-action);
    background-color: var(--mk-bg-hover);
}