/* GOV.UK PaaS Requests Custom Styles - Minimal additions to GOV.UK Design System */

/*
 * IMPORTANT: This file should only contain styles that ADD to GOV.UK Design System,
 * not override it. GOV.UK styles should remain intact.
 */

/* ============================================
   Header - GOV.UK Rebranded Tudor Crown Logo
   Matching the One Login service header style
   ============================================ */

.govuk-header--rebranded {
    background-color: #0b0c0c;
    border-bottom: 10px solid #1d70b8;
}

.rebranded-one-login-header__logo {
    padding-right: 0;
}

.rebranded-one-login-header__logo .govuk-header__link--homepage {
    display: inline-flex;
    align-items: center;
}

.rebranded-one-login-header__logo .govuk-header__logotype {
    height: 30px;
    width: auto;
}

.govuk-header--rebranded .govuk-header__container {
    border-bottom: none;
}

.govuk-header--rebranded .govuk-header__content {
    padding-left: 15px;
}

@media (min-width: 48.0625em) {
    .govuk-header--rebranded .govuk-header__content {
        padding-left: 30px;
    }
}

/* ============================================
   Project View Header (Blue Banner)
   ============================================ */

.project-view-header {
    background-color: #1d70b8;
    padding: 30px;
    margin: -10px -15px 30px -15px;
    color: #ffffff;
}

.project-view-header .govuk-heading-xl {
    color: #ffffff;
    margin-bottom: 10px;
}

.project-view-header .govuk-body-l {
    color: rgba(255, 255, 255, 0.9);
}

.project-view-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* ============================================
   Designer Specific Styles
   ============================================ */

/* Designer header bar */
.designer-header {
    background-color: #1d70b8;
    padding: 15px 20px;
    margin: -10px -15px 20px -15px;
    color: #ffffff;
}

.designer-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.project-info {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.project-name-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-label {
    font-weight: 700;
    color: #ffffff;
}

.project-name-input {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ffffff;
    padding: 8px 12px;
    font-size: 16px;
    min-width: 200px;
}

.env-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.env-selector .modern-label {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 0;
}

.env-inputs {
    display: flex;
    gap: 10px;
}

.env-input-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.env-input-group .modern-input,
.env-input-group .env-input {
    width: 100px;
    padding: 8px 12px;
    border: 2px solid #0b0c0c;
    font-size: 16px;
}

.designer-actions {
    display: flex;
    gap: 10px;
}

/* ============================================
   Code Display
   ============================================ */

code {
    background-color: #f3f2f1;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
}

/* ============================================
   Wizard Sidebar Styles
   ============================================ */

.app-step-nav-sidebar {
    background-color: #f3f2f1;
    padding: 20px;
    border-left: 4px solid #1d70b8;
}

.app-step-nav__substeps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-step-nav__substep {
    padding: 8px 0 8px 15px;
    border-left: 2px solid #b1b4b6;
    margin-left: 0;
}

.app-step-nav__substep--active {
    border-left-color: #1d70b8;
    background-color: rgba(29, 112, 184, 0.1);
}

.app-step-nav__subtext-link {
    font-size: 14px;
    color: #1d70b8;
    text-decoration: none;
}

.app-step-nav__subtext-link:hover {
    text-decoration: underline;
}

.app-step-nav__services {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 15px;
}

.app-step-nav__service {
    font-size: 12px;
    color: #505a5f;
    padding: 2px 0;
}

.app-step-nav__service-link {
    font-size: 12px;
    color: #1d70b8;
    text-decoration: none;
}

.app-step-nav__service-link:hover {
    text-decoration: underline;
}

/* ============================================
   Component Wizard Step Nav Styles
   ============================================ */

.app-step-nav__steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-step-nav__step {
    position: relative;
    padding: 10px 0 10px 40px;
    border-left: 2px solid #b1b4b6;
    margin-left: 12px;
}

.app-step-nav__step:last-child {
    border-left: 2px solid transparent;
}

.app-step-nav__step--active {
    border-left-color: #1d70b8;
}

.app-step-nav__step--completed {
    border-left-color: #00703c;
}

.app-step-nav__circle {
    position: absolute;
    left: -14px;
    top: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #b1b4b6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
}

.app-step-nav__step--active .app-step-nav__circle {
    background-color: #1d70b8;
}

.app-step-nav__step--completed .app-step-nav__circle {
    background-color: #00703c;
}

.app-step-nav__circle--number,
.app-step-nav__circle--completed {
    color: white;
}

.app-step-nav__link {
    text-decoration: none;
    color: #1d70b8;
}

.app-step-nav__link:hover {
    text-decoration: underline;
}

.app-step-nav__label {
    font-size: 16px;
    color: #505a5f;
}

.app-step-nav__label--active {
    font-weight: bold;
    color: #0b0c0c;
}

.app-step-nav__item {
    display: block;
}

.app-step-nav__subitems {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.app-step-nav__subitem {
    padding: 4px 0;
}

.app-step-nav__subitem-link {
    font-size: 14px;
    color: #1d70b8;
    text-decoration: none;
}

.app-step-nav__subitem-link:hover {
    text-decoration: underline;
}

.app-step-nav__children {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 12px;
}

.app-step-nav__children li {
    padding: 2px 0;
}

.app-step-nav__child-link {
    font-size: 13px;
    color: #505a5f;
    text-decoration: none;
}

.app-step-nav__child-link:hover {
    text-decoration: underline;
    color: #1d70b8;
}

/* ============================================
   Configure Page: Per-Environment Columns
   ============================================ */

.app-env-columns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.app-env-column {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}

.app-env-column__label {
    font-weight: bold;
    text-transform: capitalize;
    color: #0b0c0c;
    margin-bottom: 5px;
}

.app-env-column .govuk-input,
.app-env-column .govuk-select {
    width: 100%;
}

/* ============================================
   Configure Page: Service Routing Card
   ============================================ */

.app-service-routing-card {
    border: 1px solid #b1b4b6;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f8f8f8;
}

.app-service-routing-card .govuk-fieldset__heading {
    margin-bottom: 15px;
}

/* ============================================
   Sidebar & Summary Panel Backgrounds
   ============================================ */

.app-panel-grey {
    background-color: #f3f2f1;
}

.app-button-full-width {
    width: 100%;
}

.app-step-nav__substep-active-text {
    font-weight: bold;
    color: #0b0c0c;
}

/* ============================================
   Connections: VPC Child Indentation
   ============================================ */

.app-vpc-child-cell {
    padding-left: 40px;
}

.app-vpc-child-icon {
    color: #505a5f;
}

.app-vpc-child-name {
    padding-left: 16px;
}

/* ============================================
   Review: Inline Form
   ============================================ */

.app-inline-form {
    display: inline;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .project-view-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .designer-header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .project-info {
        flex-direction: column;
        align-items: flex-start;
    }

}