/* ============================================================
   ebeetaskai — Brand Tokens (v1)
   Source of truth: ~/.openclaw/workspace/ebeetaskai-brand/spec/BRAND.md
   Proposal 2 · "Worker" · Confirmed by Diego 2026-06-23
   ------------------------------------------------------------
   All report HTML pages import this file so palette/typography
   stay consistent with the rest of the brand surface.
   ============================================================ */

:root {
    /* Primary */
    --md-primary:              #0F766E;  /* Worker Teal */
    --md-on-primary:           #FFFFFF;
    --md-primary-container:    #CCFBF1;  /* Mint Glass */
    --md-on-primary-container: #134E4A;

    /* Secondary */
    --md-secondary:              #1E293B;  /* Graphite */
    --md-on-secondary:           #FFFFFF;
    --md-secondary-container:    #E2E8F0;
    --md-on-secondary-container: #0F172A;

    /* Tertiary */
    --md-tertiary:              #0EA5E9;  /* Electric Sky */
    --md-on-tertiary:           #FFFFFF;
    --md-tertiary-container:    #E0F2FE;
    --md-on-tertiary-container: #0369A1;

    /* Surfaces */
    --md-surface:              #FFFFFF;
    --md-surface-variant:      #F1F5F9;
    --md-on-surface:           #0F172A;
    --md-on-surface-variant:   #475569;

    /* States */
    --md-outline:    #CBD5E1;
    --md-success:    #10B981;
    --md-error:      #EF4444;
    --md-warning:    #F59E0B;

    /* Radii */
    --md-radius-sm: 4px;
    --md-radius-md: 8px;
    --md-radius-lg: 12px;
    --md-radius-xl: 20px;

    /* Status semantic tokens (used by report badges) */
    --md-status-pending-bg:    var(--md-secondary-container);
    --md-status-pending-fg:    var(--md-on-secondary-container);
    --md-status-progress-bg:   var(--md-primary-container);
    --md-status-progress-fg:   var(--md-on-primary-container);
    --md-status-completed-bg:  #D1FAE5;
    --md-status-completed-fg:  #065F46;
    --md-status-blocked-bg:    #FEE2E2;
    --md-status-blocked-fg:    #991B1B;
    --md-status-executed-bg:   #DBEAFE;
    --md-status-executed-fg:   #1E40AF;
    --md-status-cancelled-bg:  #FECACA;
    --md-status-cancelled-fg:  #991B1B;
    --md-status-failed-bg:     #1F2937;
    --md-status-failed-fg:     #F9FAFB;
    --md-status-warning-bg:    #FEF3C7;
    --md-status-warning-fg:    #92400E;
    --md-status-rejected-bg:   #FEE2E2;
    --md-status-rejected-fg:   #7F1D1D;
    --md-status-approved-bg:   #CFFAFE;
    --md-status-approved-fg:   #155E75;
}

/* ---- Typography (Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body.ebeetaskai {
    font-family: 'Inter', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--md-surface-variant);
    color: var(--md-on-surface);
    margin: 0;
    padding: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.ebeetaskai .container { max-width: 1200px; margin: 0 auto; }

.ebeetaskai header.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--md-primary);
    padding-bottom: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 16px;
}

/* ---- Brand mark + wordmark (used inside headers / cards) ---- */
.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.brand-mark svg { width: 36px; height: 36px; flex-shrink: 0; }
.brand-mark .word {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.5px;
    color: var(--md-secondary);
    line-height: 1;
}
.brand-mark .word .accent { color: var(--md-primary); }
.brand-mark .tagline {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
    margin-top: 2px;
    font-weight: 600;
}

.ebeetaskai h1 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--md-secondary);
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ebeetaskai .back-link {
    text-decoration: none;
    color: var(--md-primary);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
    text-transform: none;
}
.ebeetaskai .back-link:hover { opacity: 0.75; }

.ebeetaskai .live-badge {
    font-size: 10px;
    background: var(--md-status-completed-bg);
    color: var(--md-status-completed-fg);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

.ebeetaskai .toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.ebeetaskai .timestamp {
    font-size: 12px;
    color: var(--md-on-surface-variant);
    background: var(--md-secondary-container);
    padding: 4px 8px;
    border-radius: var(--md-radius-sm);
    font-family: 'JetBrains Mono', monospace;
}

/* ---- Buttons (Material 3 shapes) ---- */
.ebeetaskai .btn {
    background: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s, box-shadow 0.2s;
    font-family: inherit;
    letter-spacing: 0.2px;
}
.ebeetaskai .btn:hover { background: #115E59; }
.ebeetaskai .btn:disabled { background: var(--md-outline); cursor: not-allowed; }

.ebeetaskai .btn.btn-tonal {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}
.ebeetaskai .btn.btn-tonal:hover { background: #A7F3D0; }

.ebeetaskai .btn.btn-outlined {
    background: transparent;
    color: var(--md-primary);
    border: 1px solid var(--md-outline);
}
.ebeetaskai .btn.btn-outlined:hover { border-color: var(--md-primary); }

/* ---- Stat cards ---- */
.ebeetaskai .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}
.ebeetaskai .stat-card {
    background: var(--md-surface);
    padding: 20px;
    border-radius: var(--md-radius-lg);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    text-align: center;
    border-top: 4px solid var(--md-primary);
    border: 1px solid #E2E8F0;
    border-top-width: 4px;
    border-top-color: var(--md-primary);
}
.ebeetaskai .stat-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--md-primary);
    display: block;
    letter-spacing: -1px;
}
.ebeetaskai .stat-label {
    font-size: 13px;
    color: var(--md-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 5px;
    font-weight: 600;
}

/* ---- Tables ---- */
.ebeetaskai table {
    width: 100%;
    border-collapse: collapse;
    background: var(--md-surface);
    border-radius: var(--md-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    margin-bottom: 30px;
    border: 1px solid #E2E8F0;
}
.ebeetaskai th {
    background: var(--md-primary);
    color: var(--md-on-primary);
    text-align: left;
    padding: 12px 15px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: 'Inter', sans-serif;
}
.ebeetaskai td {
    padding: 12px 15px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 14px;
    color: var(--md-on-surface);
}
.ebeetaskai tr:hover { background-color: var(--md-primary-container); }
.ebeetaskai code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    background: var(--md-secondary-container);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--md-on-secondary-container);
}

/* ---- Badges (semantic) ---- */
.ebeetaskai .badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
    line-height: 1.4;
}
.ebeetaskai .badge-success  { background: var(--md-status-completed-bg); color: var(--md-status-completed-fg); }
.ebeetaskai .badge-danger   { background: var(--md-status-blocked-bg);   color: var(--md-status-blocked-fg); }
.ebeetaskai .badge-warning  { background: #FEF3C7; color: #92400E; }
.ebeetaskai .badge-info     { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.ebeetaskai .badge-neutral  { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.ebeetaskai .badge-progress { background: var(--md-status-progress-bg); color: var(--md-status-progress-fg); }
.ebeetaskai .badge-executed { background: var(--md-status-executed-bg);  color: var(--md-status-executed-fg); }
.ebeetaskai .badge-cancelled{ background: var(--md-status-cancelled-bg); color: var(--md-status-cancelled-fg); }
.ebeetaskai .badge-failed   { background: var(--md-status-failed-bg);    color: var(--md-status-failed-fg); }
.ebeetaskai .badge-rejected { background: var(--md-status-rejected-bg);  color: var(--md-status-rejected-fg); }
.ebeetaskai .badge-approved { background: var(--md-status-approved-bg);  color: var(--md-status-approved-fg); }

/* ---- Footer ---- */
.ebeetaskai .footer {
    text-align: center;
    margin-top: 50px;
    font-size: 12px;
    color: var(--md-on-surface-variant);
    border-top: 1px solid #E2E8F0;
    padding-top: 20px;
    font-family: 'Inter', sans-serif;
}
.ebeetaskai .footer strong { color: var(--md-secondary); font-weight: 600; }

/* ---- Status bar ---- */
.ebeetaskai .status-bar {
    margin-top: 16px;
    font-size: 12px;
    color: var(--md-on-surface-variant);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.ebeetaskai .status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--md-success);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
.ebeetaskai .status-dot.error   { background: var(--md-error);   box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
.ebeetaskai .status-dot.loading { background: var(--md-warning); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.ebeetaskai .loading-placeholder {
    text-align: center;
    padding: 60px;
    color: var(--md-on-surface-variant);
}

/* ---- Inputs ---- */
.ebeetaskai input[type="text"],
.ebeetaskai input[type="date"] {
    padding: 8px 12px;
    border: 1.5px solid var(--md-outline);
    border-radius: var(--md-radius-sm);
    font-size: 14px;
    color: var(--md-on-surface);
    background: var(--md-surface);
    font-family: inherit;
}
.ebeetaskai input[type="text"]:focus,
.ebeetaskai input[type="date"]:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

/* ---- Top brand bar (separates header from hero per BRAND.md §7) ---- */
.ebeetaskai .top-stripe {
    height: 4px;
    background: var(--md-primary);
    border-radius: 2px;
    margin-bottom: 24px;
}