/* =========================================================
   UI PRIMITIVES
   Reusable layout and interaction objects for simple
   application pages, action panels, steps and navigation.
   ========================================================= */


/* ---------------------------------------------------------
   Page shell
   --------------------------------------------------------- */

.page-shell {
    width: min(100% - 2rem, 980px);
    margin-inline: auto;
    padding-block: 2rem 4rem;
}

.page-shell--narrow {
    max-width: 760px;
}


/* ---------------------------------------------------------
   Page heading
   --------------------------------------------------------- */

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.page-heading__main {
    min-width: 0;
}

.page-heading__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    margin-bottom: 1rem;

    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.page-heading__eyebrow {
    margin-bottom: 0.35rem;

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--bs-secondary-color);
}

.page-heading__title {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
}

.page-heading__text {
    max-width: 650px;
    margin: 0.55rem 0 0;

    color: var(--bs-secondary-color);
}

.page-heading__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------
   Compact page heading

   Reduced-height variant for dense application workspaces
   where the main content should remain visually dominant.
   --------------------------------------------------------- */

.page-heading--compact {
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0;
}

.page-heading--compact .page-heading__main {
    flex: 1 1 auto;
    min-width: 0;
}

.page-heading--compact .page-heading__title {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.page-heading--compact .page-heading__text {
    max-width: none;
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

.page-heading--compact .page-heading__actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {

    .page-heading--compact {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .page-heading--compact .page-heading__main {
        width: 100%;
    }

    .page-heading--compact .page-heading__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------
   Action buttons

   Primary:
   The single obvious next action on a decision surface.

   Secondary:
   An available alternative that should remain visually
   subordinate to the primary action.
   --------------------------------------------------------- */

.btn-primary-action {
    background: #059669;
    border-color: #059669;
    color: #fff;

    font-weight: 600;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08);
}

.btn-primary-action:hover {
    background: #047857;
    border-color: #047857;
    color: #fff;
}


.btn-secondary-action {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;

    font-weight: 600;
}

.btn-secondary-action:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #047857;
}


/* ---------------------------------------------------------
   Icon button
   --------------------------------------------------------- */

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

    border: 1px solid #e1e5ee;
    border-radius: 0.75rem;

    background: #fff;
    color: inherit;

    text-decoration: none;
    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.icon-button:hover {
    background: #f8fafc;
    border-color: #cfd5df;
}


/* ---------------------------------------------------------
   Generic surface / panel
   --------------------------------------------------------- */

.surface-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e1e5ee;
    border-radius: 1rem;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03);
}

.surface-card__header {
    padding: 1.35rem 1.5rem;

    border-bottom: 1px solid #e1e5ee;
}

.surface-card__header--tinted {
    background: #ecfdf5;
}

.surface-card__body {
    padding: 1.5rem;
}

.surface-card__title {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.surface-card__text {
    margin: 0.35rem 0 0;

    color: var(--bs-secondary-color);
}


/* ---------------------------------------------------------
   Quiet note

   Low-emphasis contextual information that does not
   require an action from the user.

   Use for useful background information, observations
   or occasional product feedback that should not compete
   with the primary task on the page.
   --------------------------------------------------------- */

.quiet-note {
    padding: 1rem 1.25rem;

    background: #f8fafc;

    border-radius: 0.85rem;

    color: #64748b;
}


.quiet-note__label {
    margin: 0 0 0.25rem;

    color: #475569;

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}


.quiet-note__text {
    margin: 0;

    font-size: 0.9rem;
    line-height: 1.5;
}


.quiet-note__strong {
    color: #334155;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Header row
   --------------------------------------------------------- */

.content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.content-header__main {
    min-width: 0;
}

.content-header__main--spacious {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0.75rem;
}

.content-header__meta {
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   Section heading
   --------------------------------------------------------- */

.section-heading {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   Status chip
   --------------------------------------------------------- */

.status-chip {
    display: inline-flex;
    align-items: center;

    padding: 0.3rem 0.6rem;

    border-radius: 999px;

    background: #f1f5f9;
    color: #475569;

    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.status-chip--success {
    background: #ecfdf5;
    color: #047857;
}

.status-chip--muted {
    background: #f8fafc;
    color: #64748b;
}


/* ---------------------------------------------------------
   Step list
   --------------------------------------------------------- */

.step-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.step-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;

    padding: 1.15rem 1.5rem;

    border-bottom: 1px solid #e1e5ee;
}

.step-row:last-child {
    border-bottom: 0;
}

.step-row--active {
    padding-block: 1.35rem;
}

.step-row--upcoming {
    color: #94a3b8;
}

.step-row__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    border: 1px solid #cbd5e1;
    border-radius: 50%;

    background: #fff;
    color: #64748b;

    font-size: 0.85rem;
    font-weight: 700;
}

.step-row--complete .step-row__marker {
    border-color: #a7f3d0;

    background: #ecfdf5;
    color: #059669;
}

.step-row--active .step-row__marker {
    border-color: #059669;

    background: #059669;
    color: #fff;
}

.step-row__content {
    min-width: 0;
}

.step-row__title {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
}

.step-row--active .step-row__title {
    font-size: 1.08rem;
}

.step-row--complete .step-row__title {
    color: #64748b;
}

.step-row__text {
    margin: 0.3rem 0 0;

    color: #64748b;

    font-size: 0.92rem;
}

.step-row__action {
    justify-self: end;
}

.step-row__link {
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}


/* ---------------------------------------------------------
   Workspace card list
   --------------------------------------------------------- */

.workspace-card-list {
    display: grid;
    gap: 1.25rem;
}


/* ---------------------------------------------------------
   Workspace card grid

   Used when the choice is compact enough to display
   several workspaces side-by-side.
   --------------------------------------------------------- */

.workspace-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}


/* ---------------------------------------------------------
   Feature / summary card
   --------------------------------------------------------- */

.feature-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    padding: 1.5rem;

    background: #fff;

    border: 1px solid #e1e5ee;
    border-radius: 1rem;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.03);
}

.feature-card__content {
    min-width: 0;
}

.feature-card__eyebrow {
    margin-bottom: 0.35rem;

    color: #64748b;

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.feature-card__title {
    margin: 0;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
}

.feature-card__meta {
    margin: 0.4rem 0 0;

    color: #64748b;
}

.feature-card__action {
    flex-shrink: 0;
}


/* ========================================
   ACTION CARD GRID
   Large destination/action cards used for
   prominent launch actions.
   ======================================== */

.action-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}


/* ========================================
   ACTION CARD
   ======================================== */

.action-card {
    min-height: 210px;
    padding: 2rem;
    border: 1px solid #e1e5ee;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}


.action-card:hover {
    color: inherit;
    text-decoration: none;

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);
}


.action-card--primary {
    background: #059669;
    border-color: #059669;
    color: #fff;
}


.action-card--primary:hover {
    color: #fff;
}


.action-card__icon {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #f4f6fa;

    font-size: 1.35rem;
}


.action-card--primary .action-card__icon {
    background: rgba(255, 255, 255, 0.16);
}


.action-card__content {
    margin-top: 2.5rem;
}


.action-card__title {
    margin: 0;

    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}


.action-card__meta {
    margin: 0.45rem 0 0;

    color: #667085;
    font-size: 0.95rem;
}


.action-card--primary .action-card__meta {
    color: rgba(255, 255, 255, 0.88);
}


@media (max-width: 767.98px) {

    .action-card-grid {
        grid-template-columns: 1fr;
    }

    .action-card {
        min-height: 180px;
    }

    .workspace-card-grid {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------
   Clickable feature card

   Extends the standard feature card when the entire card
   represents a destination rather than containing a
   separate action button.
   --------------------------------------------------------- */

.feature-card--link {
    min-height: 145px;

    color: inherit;
    text-decoration: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.feature-card--link:hover {
    background: #f8fafc;
    border-color: #cfd5df;

    color: inherit;
    text-decoration: none;
}


/* Optional leading icon */

.feature-card__icon {
    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 0.75rem;

    background: #f4f6fa;
    color: #64748b;

    font-size: 1.1rem;
}


/* Allows icon + content to sit together */

.feature-card__main {
    display: flex;
    align-items: center;
    gap: 1.25rem;

    min-width: 0;
}


/* Chevron used when the entire card is clickable */

.feature-card__chevron {
    flex-shrink: 0;

    color: #94a3b8;
    font-size: 1.15rem;
}


/* ---------------------------------------------------------
   Navigation rows
   --------------------------------------------------------- */

.navigation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;

    margin-top: 1rem;
}

.navigation-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;

    min-height: 4rem;
    padding: 0.9rem 1rem;

    background: #fff;
    color: inherit;

    border: 1px solid #e1e5ee;
    border-radius: 0.85rem;

    text-decoration: none;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.navigation-row--compact {
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;
}

.navigation-row:hover {
    background: #f8fafc;
    border-color: #cfd5df;
}

.navigation-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2rem;
    height: 2rem;

    color: #64748b;
}

.navigation-row__label {
    min-width: 0;

    font-weight: 650;
}

.navigation-row__meta {
    color: #64748b;

    font-size: 0.85rem;
    white-space: nowrap;
}

.navigation-row__chevron {
    color: #94a3b8;

    font-size: 1.15rem;
}

.navigation-row--button {
    width: 100%;

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.navigation-row--active {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.navigation-row--active:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.navigation-row--active .navigation-row__chevron {
    color: #047857;
}

.navigation-row--warning.navigation-row--active {
    background: #fffbeb;
    border-color: #fcd34d;
}

.navigation-row--warning.navigation-row--active:hover {
    background: #fffbeb;
    border-color: #fbbf24;
}

.navigation-row--warning.navigation-row--active
.navigation-row__icon {
    color: #d97706;
}

.navigation-row--warning.navigation-row--active
.navigation-row__label {
    color: #92400e;
}

.navigation-row--warning.navigation-row--active
.navigation-row__chevron {
    color: #d97706;
}

.navigation-row--active .navigation-row__chevron i {
    transform: rotate(180deg);
}

.navigation-row__chevron i {
    display: inline-block;

    transition: transform 0.18s ease;
}


/* ---------------------------------------------------------
   Responsive behaviour
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    .page-shell {
        width: min(100% - 1.25rem, 980px);
        padding-block: 1.25rem 3rem;
    }


    .page-heading {
        gap: 1rem;
    }


    .surface-card__header,
    .surface-card__body {
        padding-inline: 1rem;
    }


    .step-row {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.85rem;

        padding-inline: 1rem;
    }

    .step-row__action {
        grid-column: 2;
        justify-self: start;
    }


    .feature-card {
        gap: 1rem;
    }

    .feature-card:not(.feature-card--link) {
        align-items: flex-start;
        flex-direction: column;
    }

    .feature-card--link {
        align-items: center;
        flex-direction: row;
    }

    .feature-card--link .feature-card__main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .feature-card--link .feature-card__chevron {
        flex: 0 0 auto;
    }

    .feature-card__action {
        width: 100%;
    }

    .feature-card__action .btn {
        width: 100%;
    }


    .navigation-grid {
        grid-template-columns: 1fr;
    }
}