/* GitHub Primer–inspired design tokens */

:root,
[data-theme="light"] {
    color-scheme: light;

    --bg-default: #ffffff;
    --bg-muted: #f6f8fa;
    --bg-inset: #ffffff;
    --bg-overlay: rgba(27, 31, 36, 0.5);

    --border-default: #d0d7de;
    --border-muted: #d8dee4;

    --fg-default: #1f2328;
    --fg-muted: #656d76;
    --fg-subtle: #6e7781;
    --fg-on-emphasis: #ffffff;

    --accent-fg: #0969da;
    --accent-emphasis: #0969da;
    --accent-muted: #ddf4ff;

    --success-fg: #1a7f37;
    --success-emphasis: #1f883d;
    --success-muted: #dafbe1;

    --danger-fg: #cf222e;

    --header-bg: #24292f;
    --header-fg: #ffffff;
    --header-fg-muted: rgba(255, 255, 255, 0.7);
    --header-border: #24292f;
    --header-link-hover: rgba(255, 255, 255, 0.12);
    --header-link-active: rgba(255, 255, 255, 0.18);
    --header-nav-btn-bg: rgba(255, 255, 255, 0.1);
    --header-nav-btn-border: rgba(255, 255, 255, 0.24);
    --header-nav-btn-hover-bg: rgba(255, 255, 255, 0.16);
    --header-nav-btn-hover-border: rgba(255, 255, 255, 0.32);
    --header-nav-btn-active-bg: rgba(255, 255, 255, 0.22);
    --header-nav-btn-active-border: rgba(255, 255, 255, 0.4);

    --btn-primary-bg: #1f883d;
    --btn-primary-border: rgba(27, 31, 36, 0.15);
    --btn-primary-hover: #1a7f37;

    --btn-default-bg: #f6f8fa;
    --btn-default-border: rgba(27, 31, 36, 0.15);
    --btn-default-hover-bg: #f3f4f6;

    --shadow-overlay: 0 8px 24px rgba(140, 149, 159, 0.2);

    --grid-empty: #ebedf0;
    --grid-level-1: #9be9a8;
    --grid-level-2: #40c463;
    --grid-level-3: #30a14e;
    --grid-level-4: #216e39;

    --tooltip-bg: #24292f;
    --tooltip-fg: #ffffff;
    --tooltip-accent: #7ee787;

    --item-hover-bg: #f6f8fa;
    --item-selected-bg: #ddf4ff;

    --status-active-bg: #ddf4ff;
    --status-active-fg: #0969da;
    --status-done-bg: #dafbe1;
    --status-done-fg: #1a7f37;

    --focus-ring: #0969da;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg-default: #0d1117;
    --bg-muted: #010409;
    --bg-inset: #161b22;
    --bg-overlay: rgba(1, 4, 9, 0.8);

    --border-default: #30363d;
    --border-muted: #21262d;

    --fg-default: #e6edf3;
    --fg-muted: #8b949e;
    --fg-subtle: #6e7681;
    --fg-on-emphasis: #ffffff;

    --accent-fg: #4493f8;
    --accent-emphasis: #1f6feb;
    --accent-muted: rgba(56, 139, 253, 0.15);

    --success-fg: #3fb950;
    --success-emphasis: #238636;
    --success-muted: rgba(46, 160, 67, 0.15);

    --danger-fg: #f85149;

    --header-bg: #010409;
    --header-fg: #e6edf3;
    --header-fg-muted: #8b949e;
    --header-border: #30363d;
    --header-link-hover: rgba(177, 186, 196, 0.12);
    --header-link-active: rgba(177, 186, 196, 0.2);
    --header-nav-btn-bg: rgba(240, 246, 252, 0.08);
    --header-nav-btn-border: rgba(240, 246, 252, 0.2);
    --header-nav-btn-hover-bg: rgba(240, 246, 252, 0.14);
    --header-nav-btn-hover-border: rgba(240, 246, 252, 0.28);
    --header-nav-btn-active-bg: rgba(240, 246, 252, 0.18);
    --header-nav-btn-active-border: rgba(240, 246, 252, 0.36);

    --btn-primary-bg: #238636;
    --btn-primary-border: rgba(240, 246, 252, 0.1);
    --btn-primary-hover: #2ea043;

    --btn-default-bg: #21262d;
    --btn-default-border: rgba(240, 246, 252, 0.1);
    --btn-default-hover-bg: #30363d;

    --shadow-overlay: 0 8px 24px rgba(1, 4, 9, 0.6);

    --grid-empty: #161b22;
    --grid-level-1: #0e4429;
    --grid-level-2: #006d32;
    --grid-level-3: #26a641;
    --grid-level-4: #39d353;

    --tooltip-bg: #21262d;
    --tooltip-fg: #e6edf3;
    --tooltip-accent: #3fb950;

    --item-hover-bg: #161b22;
    --item-selected-bg: rgba(56, 139, 253, 0.15);

    --status-active-bg: rgba(56, 139, 253, 0.15);
    --status-active-fg: #4493f8;
    --status-done-bg: rgba(46, 160, 67, 0.15);
    --status-done-fg: #3fb950;

    --focus-ring: #1f6feb;
}

/* Base */

html,
body {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg-default);
    background-color: var(--bg-muted);
}

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

a:hover {
    text-decoration: underline;
}

/* App shell */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    min-height: 3rem;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--header-fg) !important;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none !important;
    margin-right: 0.5rem;
}

.app-brand:hover {
    text-decoration: none !important;
    opacity: 0.9;
}

.app-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1rem;
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
}

.app-nav ::deep a.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.875rem;
    border: 1px solid var(--header-nav-btn-border);
    border-radius: 6px;
    background-color: var(--header-nav-btn-bg);
    color: var(--header-fg) !important;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.app-nav ::deep a.nav-btn:hover {
    background-color: var(--header-nav-btn-hover-bg);
    border-color: var(--header-nav-btn-hover-border);
    color: var(--header-fg) !important;
    text-decoration: none !important;
}

.app-nav ::deep a.nav-btn.active {
    background-color: var(--header-nav-btn-active-bg);
    border-color: var(--header-nav-btn-active-border);
    color: var(--header-fg) !important;
    font-weight: 600;
}

.app-nav ::deep a.nav-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--header-fg);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-toggle-icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.app-main {
    flex: 1;
    padding: 1.5rem 1rem 2rem;
}

.app-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Bootstrap overrides */

.btn {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
}

[data-theme="dark"] .btn:focus,
[data-theme="dark"] .btn:active:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.4);
}

.btn-primary {
    color: var(--fg-on-emphasis) !important;
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--fg-on-emphasis) !important;
}

.btn-outline-secondary {
    color: var(--fg-default) !important;
    background-color: var(--btn-default-bg) !important;
    border-color: var(--border-default) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--btn-default-hover-bg) !important;
    border-color: var(--border-default) !important;
    color: var(--fg-default) !important;
}

.form-control,
.form-select {
    background-color: var(--bg-default);
    border-color: var(--border-default);
    color: var(--fg-default);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-default);
    border-color: var(--accent-emphasis);
    color: var(--fg-default);
}

.text-muted {
    color: var(--fg-muted) !important;
}

#blazor-error-ui {
    background: var(--bg-inset);
    color: var(--fg-default);
    border-top: 1px solid var(--border-default);
}