/*
 * Workback Dashboard Design System
 *
 * Fonts: GitHub Primer system font stack
 * Colors: GitHub Primer palette
 * Icons: GitHub Octicons
 *
 * Self-contained: no longer depends on @primer/css from a CDN.
 * Button + markdown-body styles below replicate the subset of Primer we use.
 */

/* ==========================================================================
   Design Tokens (CSS Custom Properties)
   ========================================================================== */

:root {
    /* Typography - Font Families (GitHub Primer system font stack) */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

    /* Typography - Font Sizes (GitHub Primer scale, slightly generous) */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;

    /* Base font size for the app */
    --font-size-base: 14px;

    /* Typography - Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Typography - Font Weights */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* =======================================================================
       GitHub Primer Colors
       https://primer.style/foundations/color
       ======================================================================= */

    /* Foreground (text) colors */
    --color-fg-default: #1f2328;
    --color-fg-muted: #656d76;
    --color-fg-subtle: #6e7781;
    --color-fg-on-emphasis: #ffffff;

    /* Background colors */
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f5f5f5;  /* Warm gray background */
    --color-canvas-inset: #f6f8fa;

    /* Border colors */
    --color-border-default: #d0d7de;
    --color-border-muted: #d8dee4;
    --color-border-subtle: rgba(27, 31, 36, 0.15);

    /* Accent colors (blue) */
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-accent-muted: rgba(84, 174, 255, 0.4);
    --color-accent-subtle: #ddf4ff;

    /* Success colors (green) */
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
    --color-success-muted: rgba(74, 194, 107, 0.4);
    --color-success-subtle: #dafbe1;

    /* Attention colors (yellow/orange) */
    --color-attention-fg: #9a6700;
    --color-attention-emphasis: #bf8700;
    --color-attention-muted: rgba(212, 167, 44, 0.4);
    --color-attention-subtle: #fff8c5;

    /* Severe colors (orange) */
    --color-severe-fg: #bc4c00;
    --color-severe-emphasis: #bc4c00;
    --color-severe-muted: rgba(251, 143, 68, 0.4);
    --color-severe-subtle: #fff1e5;

    /* Danger colors (red) */
    --color-danger-fg: #d1242f;
    --color-danger-emphasis: #cf222e;
    --color-danger-muted: rgba(255, 129, 130, 0.4);
    --color-danger-subtle: #ffebe9;

    /* Done colors (purple) - for merged PRs */
    --color-done-fg: #8250df;
    --color-done-emphasis: #8250df;
    --color-done-muted: rgba(194, 151, 255, 0.4);
    --color-done-subtle: #fbefff;

    /* Neutral colors */
    --color-neutral-emphasis: #6e7781;
    --color-neutral-emphasis-plus: #59636e;
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-neutral-subtle: rgba(234, 238, 242, 0.5);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);  /* Navbar shadow with soft fade */
    --shadow-md: 0 3px 6px rgba(140, 149, 159, 0.15);
    --shadow-lg: 0 8px 24px rgba(140, 149, 159, 0.2);
    --shadow-xl: 0 12px 28px rgba(140, 149, 159, 0.3);

    /* Border radius (Primer scale) */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Spacing (Primer 8px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 48px;
    --space-8: 64px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-md);  /* 16px - generous base size */
    line-height: var(--line-height-normal);
    color: var(--color-fg-default);
    background-color: var(--color-canvas-subtle);
}

/* Monospace elements */
code, pre, kbd, samp, .mono {
    font-family: var(--font-mono);
}

/* Links */
a {
    color: var(--color-accent-fg);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   AG Grid Theme Overrides
   Note: !important needed because AG Grid CSS loads after this file
   ========================================================================== */

.ag-theme-alpine,
.ag-theme-alpine-dark {
    --ag-font-family: var(--font-body) !important;
    --ag-font-size: var(--font-size-md);  /* 16px - consistent with body */
    --ag-row-height: 48px;
    --ag-header-height: 52px;
    --ag-foreground-color: var(--color-fg-default);
    --ag-secondary-foreground-color: var(--color-fg-muted);
    --ag-background-color: var(--color-canvas-default);
    --ag-header-background-color: var(--color-canvas-subtle);
    --ag-odd-row-background-color: var(--color-canvas-default);
    --ag-row-hover-color: var(--color-neutral-subtle);
    --ag-border-color: var(--color-border-default);
    --ag-selected-row-background-color: var(--color-accent-subtle);
}

/* AG Grid text elements - comprehensive coverage excluding icons */
.ag-theme-alpine .ag-root-wrapper,
.ag-theme-alpine .ag-header-cell-text,
.ag-theme-alpine .ag-cell,
.ag-theme-alpine .ag-cell-value,
.ag-theme-alpine .ag-group-value,
.ag-theme-alpine .ag-filter-value,
.ag-theme-alpine .ag-menu-option-text,
.ag-theme-alpine .ag-picker-field-display,
.ag-theme-alpine .ag-select-list-item,
.ag-theme-alpine .ag-paging-panel,
.ag-theme-alpine .ag-status-bar,
.ag-theme-alpine-dark .ag-root-wrapper,
.ag-theme-alpine-dark .ag-header-cell-text,
.ag-theme-alpine-dark .ag-cell,
.ag-theme-alpine-dark .ag-cell-value,
.ag-theme-alpine-dark .ag-group-value,
.ag-theme-alpine-dark .ag-filter-value,
.ag-theme-alpine-dark .ag-menu-option-text,
.ag-theme-alpine-dark .ag-picker-field-display,
.ag-theme-alpine-dark .ag-select-list-item,
.ag-theme-alpine-dark .ag-paging-panel,
.ag-theme-alpine-dark .ag-status-bar {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
}

/* AG Grid cell wrapper - ensure inner content inherits */
.ag-theme-alpine .ag-cell-wrapper,
.ag-theme-alpine .ag-cell-wrapper > *:not(.ag-icon),
.ag-theme-alpine-dark .ag-cell-wrapper,
.ag-theme-alpine-dark .ag-cell-wrapper > *:not(.ag-icon) {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
}

/* AG Grid inputs (filter fields, etc.) */
.ag-theme-alpine input,
.ag-theme-alpine textarea,
.ag-theme-alpine select,
.ag-theme-alpine .ag-text-field-input,
.ag-theme-alpine .ag-filter-filter,
.ag-theme-alpine .ag-floating-filter-input,
.ag-theme-alpine-dark input,
.ag-theme-alpine-dark textarea,
.ag-theme-alpine-dark select,
.ag-theme-alpine-dark .ag-text-field-input,
.ag-theme-alpine-dark .ag-filter-filter,
.ag-theme-alpine-dark .ag-floating-filter-input {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text colors */
.text-default { color: var(--color-fg-default); }
.text-muted { color: var(--color-fg-muted); }
.text-subtle { color: var(--color-fg-subtle); }
.text-accent { color: var(--color-accent-fg); }
.text-success { color: var(--color-success-fg); }
.text-attention { color: var(--color-attention-fg); }
.text-severe { color: var(--color-severe-fg); }
.text-danger { color: var(--color-danger-fg); }
.text-done { color: var(--color-done-fg); }

/* Background colors */
.bg-default { background-color: var(--color-canvas-default); }
.bg-subtle { background-color: var(--color-canvas-subtle); }
.bg-accent { background-color: var(--color-accent-subtle); }
.bg-success { background-color: var(--color-success-subtle); }
.bg-attention { background-color: var(--color-attention-subtle); }
.bg-severe { background-color: var(--color-severe-subtle); }
.bg-danger { background-color: var(--color-danger-subtle); }
.bg-done { background-color: var(--color-done-subtle); }

/* Font utilities */
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* ==========================================================================
   Buttons
   Replaces Primer's .btn / .btn-primary / .btn-danger / .btn-sm.
   .btn-secondary is an alias for the default .btn (templates always write
   `class="btn btn-secondary"`, so no separate rule is needed).
   Visual target: GitHub's light-mode button defaults (Primer 22.x).

   TODO: tokenize hard-coded hexes in this section (#24292f, #f6f8fa,
   #f3f4f6, #ebecef, #197935, #94d3a2, #a40e26). They're press/disabled states
   without matching tokens in the palette above. Either add new tokens
   (e.g. --color-btn-bg, --color-btn-bg-hover, --color-success-active) or
   leave the literals, but pick one.
   ========================================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 16px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    color: #24292f;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: #f6f8fa;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    appearance: none;
    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
    transition-property: color, background-color, box-shadow, border-color;
}

.btn:hover {
    background-color: #f3f4f6;
    border-color: var(--color-border-subtle);
    text-decoration: none;
    transition-duration: 0.1s;
}

.btn:active {
    background-color: #ebecef;
    border-color: var(--color-border-subtle);
    transition: none;
}

.btn:focus,
.btn:focus-visible {
    outline: 2px solid var(--color-accent-fg);
    outline-offset: -2px;
}

.btn:disabled,
.btn.disabled {
    color: rgba(36, 41, 47, 0.5);
    cursor: default;
    background-color: #f6f8fa;
    border-color: rgba(31, 35, 40, 0.15);
    box-shadow: none;
}

.btn-primary {
    color: var(--color-fg-on-emphasis);
    background-color: var(--color-success-emphasis);
    border-color: var(--color-border-subtle);
    box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.btn-primary:hover {
    color: var(--color-fg-on-emphasis);
    background-color: var(--color-success-fg);
    border-color: var(--color-border-subtle);
}

.btn-primary:active {
    background-color: #197935;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    outline: 2px solid var(--color-accent-fg);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: rgba(255, 255, 255, 0.8);
    background-color: #94d3a2;
    border-color: rgba(31, 35, 40, 0.15);
    box-shadow: none;
}

.btn-danger {
    color: var(--color-danger-fg);
    background-color: #f6f8fa;
    border-color: var(--color-border-subtle);
}

.btn-danger:hover {
    color: var(--color-fg-on-emphasis);
    background-color: var(--color-danger-emphasis);
    border-color: var(--color-border-subtle);
}

.btn-danger:active {
    color: var(--color-fg-on-emphasis);
    background-color: #a40e26;
    border-color: var(--color-border-subtle);
}

.btn-danger:focus,
.btn-danger:focus-visible {
    outline: 2px solid var(--color-danger-emphasis);
    outline-offset: -2px;
}

.btn-danger:disabled,
.btn-danger.disabled {
    color: rgba(207, 34, 46, 0.5);
    background-color: #f6f8fa;
    border-color: rgba(31, 35, 40, 0.15);
    box-shadow: none;
}

.btn-sm {
    padding: 3px 12px;
    font-size: 12px;
    line-height: 20px;
}

.btn-invisible {
    color: var(--color-accent-fg);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-invisible:hover,
.btn-invisible:active {
    background-color: var(--color-neutral-subtle);
    border-color: transparent;
}

/* ==========================================================================
   Comments
   The comment_card / comment_form / comment_thread htpy components
   (dashboard/components.py).
   ========================================================================== */

.comment-item {
    background: var(--color-canvas-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.comment-thread .comment-item { margin-bottom: 16px; }

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--color-canvas-subtle);
    border-bottom: 1px solid var(--color-border-default);
}

.comment-meta {
    margin-left: 8px;
    color: var(--color-fg-muted);
    font-size: 12px;
}

.comment-actions { display: flex; gap: 4px; }

.comment-body { padding: 12px; }

.comment-body textarea,
.comment-form-body {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
}

.comment-form {
    padding: 16px;
    background: var(--color-canvas-subtle);
    border-radius: var(--radius-md);
}

.comment-form-actions {
    margin-top: 8px;
    text-align: right;
}

.comment-empty {
    color: var(--color-fg-muted);
    font-style: italic;
    margin-bottom: 16px;
}

/* ==========================================================================
   Markdown body
   Replaces Primer's .markdown-body. Mirrors GitHub's rendered-Markdown
   typography for headings, lists, code, quotes, tables.
   ========================================================================== */

.markdown-body {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--color-fg-default);
    word-wrap: break-word;
}

.markdown-body > *:first-child { margin-top: 0 !important; }
.markdown-body > *:last-child { margin-bottom: 0 !important; }

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
}

.markdown-body h1 {
    padding-bottom: 0.3em;
    font-size: 2em;
    border-bottom: 1px solid var(--color-border-muted);
}

.markdown-body h2 {
    padding-bottom: 0.3em;
    font-size: 1.5em;
    border-bottom: 1px solid var(--color-border-muted);
}

.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: 0.875em; }
.markdown-body h6 { font-size: 0.85em; color: var(--color-fg-muted); }

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre {
    margin-top: 0;
    margin-bottom: 16px;
}

.markdown-body a {
    color: var(--color-accent-fg);
    text-decoration: none;
}

.markdown-body a:hover { text-decoration: underline; }

.markdown-body strong { font-weight: var(--font-weight-semibold); }

.markdown-body hr {
    height: 0.25em;
    padding: 0;
    margin: 24px 0;
    background-color: var(--color-border-default);
    border: 0;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ul,
.markdown-body ol ol {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown-body li + li { margin-top: 0.25em; }

.markdown-body blockquote {
    padding: 0 1em;
    color: var(--color-fg-muted);
    border-left: 0.25em solid var(--color-border-default);
}

.markdown-body code,
.markdown-body kbd {
    padding: 0.2em 0.4em;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 85%;
    background-color: var(--color-neutral-muted);
    border-radius: var(--radius-md);
}

.markdown-body pre {
    padding: 16px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 85%;
    line-height: 1.45;
    background-color: var(--color-canvas-inset);
    border-radius: var(--radius-md);
}

.markdown-body pre code {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    font-size: 100%;
    white-space: pre;
    word-break: normal;
}

.markdown-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
}

.markdown-body table th,
.markdown-body table td {
    padding: 6px 13px;
    border: 1px solid var(--color-border-default);
}

.markdown-body table th {
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-canvas-subtle);
}

.markdown-body table tr {
    background-color: var(--color-canvas-default);
    border-top: 1px solid var(--color-border-muted);
}

.markdown-body table tr:nth-child(2n) {
    background-color: var(--color-canvas-subtle);
}

.markdown-body img {
    max-width: 100%;
    box-sizing: content-box;
    background-color: var(--color-canvas-default);
}

/* ==========================================================================
   Component Styles (Status badges, PR states, etc.)
   ========================================================================== */

/* Issue state styles (used by renderIssueStage in ag-grid-renderers.js) */
.issue-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.issue-state svg { flex-shrink: 0; }
.issue-state-open { color: var(--color-success-fg); }
.issue-state-closed { color: var(--color-done-fg); }
.issue-state-closed-not-planned { color: var(--color-fg-muted); }
.issue-state-queued { color: var(--color-attention-fg); }
.issue-state-in-progress { color: var(--color-success-fg); }
.issue-state-resolved { color: var(--color-attention-fg); }
.issue-state-blocked { color: var(--color-danger-fg); }

/* PR state styles (used by renderPrState in ag-grid-renderers.js) */
.pr-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.pr-state svg { flex-shrink: 0; }
.pr-state-draft { color: var(--color-attention-fg); }
.pr-state-open { color: var(--color-success-fg); }
.pr-state-merged { color: var(--color-done-fg); }
.pr-state-closed { color: var(--color-danger-fg); }

/* Conformance cell styles (used by renderConformance in ag-grid-renderers.js) */
.conformance-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    white-space: nowrap;
}
.conformance-state svg { flex-shrink: 0; }
.conformance-state-supports { color: var(--color-success-fg); }
.conformance-state-partially { color: var(--color-attention-fg); }
.conformance-state-does-not { color: var(--color-danger-fg); }
.conformance-state-not-applicable,
.conformance-state-not-ready { color: var(--color-fg-muted); }

/* Severity cell styles (used by renderSeverity in ag-grid-renderers.js) */
.issue-severity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.issue-severity svg { flex-shrink: 0; }
.issue-severity-critical { color: var(--color-danger-fg); }
.issue-severity-high { color: var(--color-severe-fg); }
.issue-severity-low { color: var(--color-fg-default); }

/* Severity label styles (pill form, used by renderLabels) */
.severity-label {
    display: inline-block;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    border: 1px solid transparent;
    border-radius: 2em;
    white-space: nowrap;
}
.severity-label--secondary { color: var(--color-fg-default); border-color: var(--color-fg-default); }
.severity-label--severe { color: var(--color-severe-fg); border-color: var(--color-severe-fg); }
.severity-label--danger { color: var(--color-danger-fg); border-color: var(--color-danger-fg); }
.severity-label--success { color: var(--color-success-fg); border-color: var(--color-success-fg); }
.severity-label--attention { color: var(--color-attention-fg); border-color: var(--color-attention-fg); }
.issue-labels { display: inline-flex; gap: 4px; max-width: 100%; white-space: nowrap; }
.issue-labels .severity-label { overflow: hidden; text-overflow: ellipsis; }

/* Severity badges */
.severity-critical {
    background-color: var(--color-danger-emphasis);
    color: var(--color-fg-on-emphasis);
}

.severity-high,
.severity-major {
    background-color: var(--color-severe-emphasis);
    color: var(--color-fg-on-emphasis);
}

.severity-medium,
.severity-moderate {
    background-color: var(--color-attention-emphasis);
    color: var(--color-fg-on-emphasis);
}

.severity-low,
.severity-minor {
    background-color: var(--color-neutral-emphasis);
    color: var(--color-fg-on-emphasis);
}