/*
 * G-Cloud Kit — Shared Theme Styles
 * Component styles, dark mode, and layout shared across all pages.
 */

/* ============================================================
   Font Override for Non-GOV.UK Domains
   GDS Transport font is licensed ONLY for *.gov.uk domains.
   Reference: https://design-system.service.gov.uk/styles/typeface/
   ============================================================ */
body,
.govuk-template,
.govuk-template__body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif, "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

[class*="govuk-"] {
    font-family: inherit;
}

/* ============================================================
   Sticky Navigation Bar
   ============================================================ */
.app-nav-bar {
    background: #0b0c0c;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid #505a5f;
}

.app-nav-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-nav-bar__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-nav-bar__item a {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 700;
    border-bottom: 3px solid transparent;
}

.app-nav-bar__item a:hover,
.app-nav-bar__item a:focus {
    background: #1d1d1d;
    border-bottom-color: #1d70b8;
    color: #ffffff;
}

.app-nav-bar__brand {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    display: block;
}

.app-nav-bar__brand:hover,
.app-nav-bar__brand:focus {
    color: #ffffff;
    text-decoration: none;
}

.app-nav-bar__icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.app-icon-link {
    color: #b1b4b6;
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
}

.app-icon-link:hover {
    color: #ffffff;
}

.app-theme-toggle {
    background: none;
    border: none;
    color: #b1b4b6;
    font-size: 1.25rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    line-height: 1;
}

.app-theme-toggle:hover {
    color: #ffffff;
}

.app-nav-bar__toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.125rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 48em) {
    .app-nav-bar__toggle {
        display: block;
    }
    .app-nav-bar__list {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .app-nav-bar__list--open {
        display: flex;
    }
    .app-nav-bar__inner {
        flex-wrap: wrap;
    }
    .app-nav-bar__item a {
        padding: 0.75rem 1rem;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    .app-nav-bar__item a:hover,
    .app-nav-bar__item a:focus {
        border-left-color: #1d70b8;
        border-bottom: none;
    }
}

/* ============================================================
   Stats Grid
   ============================================================ */
.app-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.app-stat-card {
    background: #f3f2f1;
    padding: 1.5rem;
    text-align: center;
    border-left: 4px solid #1d70b8;
}

.app-stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #1d70b8;
    line-height: 1;
}

.app-stat-label {
    font-size: 1rem;
    color: #0b0c0c;
    margin-top: 0.5rem;
}

/* ============================================================
   Feature Grid
   ============================================================ */
.app-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.app-feature-card {
    border: 2px solid #b1b4b6;
    padding: 1.5rem;
}

/* ============================================================
   Lot Cards
   ============================================================ */
.app-lot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.app-lot-card {
    background: #f3f2f1;
    padding: 1.5rem;
    border-left: 5px solid #1d70b8;
}

.app-lot-card.lot-1 { border-left-color: #1d70b8; }
.app-lot-card.lot-2 { border-left-color: #00703c; }
.app-lot-card.lot-3 { border-left-color: #912b88; }

/* ============================================================
   Phase Flow (CSS-only workflow diagram)
   ============================================================ */
.app-phase-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
    padding: 2rem;
    background: #f3f2f1;
}

.app-phase-box {
    background: white;
    border: 2px solid #1d70b8;
    padding: 1rem 1.5rem;
    font-weight: 700;
    text-align: center;
    min-width: 140px;
}

.app-phase-box--orange { border-color: #f47738; }
.app-phase-box--green { border-color: #00703c; }
.app-phase-box--purple { border-color: #912b88; }

.app-phase-arrow {
    font-size: 2rem;
    color: #1d70b8;
    font-weight: 700;
}

.app-phase-descriptions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.app-phase-desc {
    border-top: 3px solid #1d70b8;
    padding-top: 0.75rem;
}

.app-phase-desc:nth-child(2) { border-top-color: #f47738; }
.app-phase-desc:nth-child(3) { border-top-color: #00703c; }
.app-phase-desc:nth-child(4) { border-top-color: #912b88; }

/* ============================================================
   AI Compact Cards (install commands)
   ============================================================ */
.app-ai-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.app-ai-compact-card {
    border: 2px solid #b1b4b6;
    padding: 1.25rem;
}

.app-ai-compact-card code {
    display: block;
    background: #0b0c0c;
    color: #00ff00;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
}

/* ============================================================
   Command Sections
   ============================================================ */
.app-command-section {
    background: #f3f2f1;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.app-command-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.app-command-list li {
    background: white;
    border-left: 4px solid #00703c;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.app-command-code {
    font-family: monospace;
    background: #f3f2f1;
    padding: 0.25rem 0.5rem;
    font-weight: 700;
}

.app-prereq-tag {
    float: right;
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* ============================================================
   Dependency Matrix
   ============================================================ */
.app-dep-matrix {
    display: grid;
    grid-template-columns: auto repeat(8, minmax(2.75rem, auto));
    gap: 1px;
    background: #b1b4b6;
    border: 1px solid #b1b4b6;
    margin: 1.5rem 0;
    width: fit-content;
}

.app-dep-matrix__header {
    display: contents;
}

.app-dep-matrix__header > div {
    background: #0b0c0c;
    color: white;
    font-weight: 700;
    font-size: 0.8125rem;
}

.app-dep-matrix__row {
    display: contents;
}

.app-dep-matrix__row:hover > div {
    background: #f3f2f1;
}

.app-dep-matrix__cmd-label {
    padding: 0.375rem 0.75rem;
    background: white;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: monospace;
    white-space: nowrap;
}

.app-dep-matrix__cell {
    padding: 0.375rem;
    background: white;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
}

.app-dep-matrix__cell--req {
    background: #1d70b8;
    color: white;
}

.app-dep-matrix__cell--opt {
    background: #d4d4d4;
    color: #0b0c0c;
}

/* ============================================================
   Data Cards
   ============================================================ */
.app-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.app-data-card {
    border: 3px solid #1d70b8;
    padding: 1.5rem;
    background: white;
}

/* ============================================================
   Explore Grid
   ============================================================ */
.app-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.app-explore-card {
    background: #f3f2f1;
    padding: 1.5rem;
    border-top: 4px solid #1d70b8;
}

.app-explore-card:nth-child(2) { border-top-color: #00703c; }
.app-explore-card:nth-child(3) { border-top-color: #912b88; }
.app-explore-card:nth-child(4) { border-top-color: #f47738; }

/* ============================================================
   Code Block
   ============================================================ */
.app-code-block {
    background: #0b0c0c;
    color: #00ff00;
    padding: 1rem;
    font-family: monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.app-code-block pre {
    margin: 0;
}

/* ============================================================
   Step Cards (Getting Started)
   ============================================================ */
.app-step {
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: 2.5rem;
}

.app-step__number {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    background: #1d70b8;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}

/* ============================================================
   Footer
   ============================================================ */
.app-footer {
    background: #0b0c0c;
    color: white;
    padding: 2rem 0;
    margin-top: 3rem;
}

.app-footer a {
    color: white;
    text-decoration: underline;
}

.app-footer a:hover {
    color: #5694ca;
}

/* ============================================================
   Dark Mode
   ============================================================ */
html.dark-mode {
    color-scheme: dark;
}

html.dark-mode body,
html.dark-mode .govuk-template__body {
    background: #1a1a1a;
    color: #f0f0f0;
}

html.dark-mode .govuk-heading-xl,
html.dark-mode .govuk-heading-l,
html.dark-mode .govuk-heading-m,
html.dark-mode .govuk-heading-s,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4 {
    color: #f0f0f0;
}

html.dark-mode .govuk-body,
html.dark-mode .govuk-body-l,
html.dark-mode .govuk-body-s,
html.dark-mode p, html.dark-mode li {
    color: #d4d4d4;
}

html.dark-mode .govuk-link,
html.dark-mode a:not(.govuk-button):not(.app-nav-bar__brand):not(.app-icon-link):not(.app-nav-bar__item a) {
    color: #4da3ff;
}

html.dark-mode .govuk-link:visited {
    color: #c060b8;
}

html.dark-mode .app-stat-card {
    background: #2a2a2a;
    border-left-color: #4da3ff;
}

html.dark-mode .app-stat-number {
    color: #4da3ff;
}

html.dark-mode .app-stat-label {
    color: #d4d4d4;
}

html.dark-mode .app-feature-card {
    border-color: #555555;
    background: #2a2a2a;
}

html.dark-mode .app-lot-card {
    background: #2a2a2a;
}

html.dark-mode .app-phase-flow {
    background: #2a2a2a;
}

html.dark-mode .app-phase-box {
    background: #1a1a1a;
    color: #f0f0f0;
    border-color: #4da3ff;
}

html.dark-mode .app-phase-arrow {
    color: #4da3ff;
}

html.dark-mode .app-command-section {
    background: #2a2a2a;
}

html.dark-mode .app-command-list li {
    background: #1a1a1a;
    border-left-color: #00a854;
}

html.dark-mode .app-command-code {
    background: #333333;
    color: #f0f0f0;
}

html.dark-mode .app-dep-matrix {
    background: #555555;
    border-color: #555555;
}

html.dark-mode .app-dep-matrix__header > div {
    background: #1a1a1a;
}

html.dark-mode .app-dep-matrix__cmd-label {
    background: #2a2a2a;
    color: #f0f0f0;
}

html.dark-mode .app-dep-matrix__cell {
    background: #2a2a2a;
    color: #d4d4d4;
}

html.dark-mode .app-dep-matrix__cell--req {
    background: #1d70b8;
    color: white;
}

html.dark-mode .app-dep-matrix__cell--opt {
    background: #444444;
    color: #d4d4d4;
}

html.dark-mode .app-dep-matrix__row:hover > div {
    background: #333333;
}

html.dark-mode .app-dep-matrix__row:hover > .app-dep-matrix__cell--req {
    background: #2a80c8;
}

html.dark-mode .app-dep-matrix__row:hover > .app-dep-matrix__cell--opt {
    background: #555555;
}

html.dark-mode .app-data-card {
    border-color: #4da3ff;
    background: #2a2a2a;
}

html.dark-mode .app-explore-card {
    background: #2a2a2a;
}

html.dark-mode .app-ai-compact-card {
    border-color: #555555;
    background: #2a2a2a;
}

html.dark-mode .app-step__number {
    background: #4da3ff;
}

html.dark-mode .govuk-warning-text__icon {
    background: #f0f0f0;
    color: #1a1a1a;
}

html.dark-mode .govuk-warning-text__text {
    color: #f0f0f0;
}

html.dark-mode .govuk-section-break--visible {
    border-bottom-color: #555555;
}

html.dark-mode .govuk-main-wrapper {
    background: #1a1a1a;
}

/* No-JS dark mode fallback */
@media (prefers-color-scheme: dark) {
    html:not(.light-mode):not(.dark-mode) body,
    html:not(.light-mode):not(.dark-mode) .govuk-template__body {
        background: #1a1a1a;
        color: #f0f0f0;
    }
    html:not(.light-mode):not(.dark-mode) .app-stat-card,
    html:not(.light-mode):not(.dark-mode) .app-feature-card,
    html:not(.light-mode):not(.dark-mode) .app-lot-card,
    html:not(.light-mode):not(.dark-mode) .app-phase-flow,
    html:not(.light-mode):not(.dark-mode) .app-command-section,
    html:not(.light-mode):not(.dark-mode) .app-explore-card,
    html:not(.light-mode):not(.dark-mode) .app-ai-compact-card,
    html:not(.light-mode):not(.dark-mode) .app-data-card {
        background: #2a2a2a;
    }
}