/* Companies directory (/companies) + Create Company profile (/company/create).
   Namespaced with .co- to avoid collisions; loaded globally via App.razor (scoped .razor.css
   does not load for WASM-client components in this app).

   Mirrors the discover-shows (.show-) / admin-statistics (.ps-) quality bar: calm hairline-bordered
   surfaces with a soft shadow, color reserved for meaning, dot+rule section headers, tappable chip
   filters. All colors come from --mud-palette-* so light and dark both work, with one deliberate
   exception: the hero is a fixed dark brand band in both themes, so its text is explicit white for
   guaranteed contrast (same approach as .show-hero). */

/* ============================================================ Hero band ===== */
.co-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 34px 34px 30px;
    margin-bottom: 24px;
    color: #fff;
    /* Brand glows (teal + blue, from the dark-theme palette) over a deep navy base. */
    background:
        radial-gradient(130% 150% at 88% -25%, rgba(45, 233, 219, 0.42) 0%, rgba(45, 233, 219, 0) 55%),
        radial-gradient(120% 150% at -10% 125%, rgba(59, 130, 246, 0.40) 0%, rgba(59, 130, 246, 0) 52%),
        linear-gradient(135deg, #2b3150 0%, #191d31 100%);
}

.co-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.co-hero__title {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.co-hero__sub {
    margin-top: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.80);
    max-width: 54ch;
}

.co-hero__count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 4px 13px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.co-hero__count-dot {
    /* Fixed teal accent: the hero band is a fixed dark gradient in both themes. */
    color: #2de9db;
    line-height: 0;
    font-size: 0.6rem;
}

/* White CTA that pops on the dark hero; overrides MudButton filled styling.
   Target .mud-button-root (always present) so it is robust across MudBlazor versions. */
.co-hero__cta.mud-button-root {
    background-color: #fff !important;
    color: #191d31 !important;
    box-shadow: none;
}

.co-hero__cta.mud-button-root:hover {
    background-color: rgba(255, 255, 255, 0.88) !important;
}

/* ====================================================== Filter toolbar ===== */
.co-toolbar {
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    margin-bottom: 8px;
}

.co-toolbar__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.co-toolbar__search {
    flex: 1 1 280px;
    min-width: 0;
}

.co-toolbar__industry {
    flex: 0 0 auto;
    width: 220px;
    max-width: 100%;
}

/* Labeled chip rows (Size, Filters). Mirrors .show-when. */
.co-refine {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.co-refine__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-right: 2px;
}

.co-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.co-chip:hover {
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}

.co-chip:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.co-chip--active {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    font-weight: 600;
}

.co-chip__icon {
    line-height: 0;
}

/* ====================================================== Section header ===== */
.co-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 14px;
}

.co-section__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--mud-palette-text-secondary);
    opacity: 0.45;
}

.co-section__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.co-section__rule {
    height: 1px;
    flex: 1 1 auto;
    background: var(--mud-palette-lines-default);
}

.co-section__count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================================ Grid card ===== */
.co-card {
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.co-card:hover,
.co-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.12);
}

/* Distinct keyboard focus ring (the card is role="button" tabindex="0"), matching .co-chip. */
.co-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* The loading skeleton borrows .co-card for layout but is not interactive: no pointer or lift. */
.co-card--skeleton,
.co-card--skeleton:hover {
    cursor: default;
    transform: none;
    border-color: var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.co-card__logo,
.co-card__logo-fallback {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.co-card__logo {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.co-card__logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.co-card__body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.co-card__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.co-card__name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-card__verified {
    flex: 0 0 auto;
    line-height: 0;
    color: var(--mud-palette-info);
}

.co-card__handle {
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.co-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.co-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
}

.co-card__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 4px;
}

.co-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.co-stat__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================================ Empty / error states ===== */
.co-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.co-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 4px;
}

.co-state__icon--empty {
    color: var(--mud-palette-tertiary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-tertiary) 12%, transparent);
}

.co-state__icon--error {
    color: var(--mud-palette-error);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.co-state__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.co-state__sub {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    max-width: 44ch;
}

.co-state__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* ============================================ Create company profile form ===== */
.co-create {
    max-width: 860px;
    margin: 0 auto;
}

/* Branded header with completion progress. */
.co-create-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 22px;
    border-radius: 16px;
    margin-bottom: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.co-create-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.co-create-head__text {
    flex: 1 1 240px;
    min-width: 0;
}

.co-create-head__title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.co-create-head__sub {
    margin-top: 3px;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

/* Slim linear progress bar + percentage (replaces the SVG ring). */
.co-create-progress {
    flex: 0 0 auto;
    width: 180px;
    max-width: 100%;
}

.co-create-progress__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.co-create-progress__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.co-create-progress__pct {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary);
}

.co-create-progress__track {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

.co-create-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    transition: width 0.4s ease;
}

/* Section cards (all visible, no locked steps). */
.co-create-section {
    padding: 20px 22px;
    border-radius: 14px;
    margin-bottom: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.co-create-section__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.co-create-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.co-create-section__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.co-create-section__hint {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.co-create-section__hint--required {
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.co-create-section__hint--optional {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
}

.co-create-field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 6px;
}

/* Live display-name availability line. */
.co-name-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.82rem;
}

.co-name-status--ok {
    color: var(--mud-palette-success);
}

.co-name-status--bad {
    color: var(--mud-palette-error);
}

.co-name-status--checking {
    color: var(--mud-palette-text-secondary);
}

/* The availability check could not RUN (transport/service failure). Distinct from --bad ("taken"): the name
   may well be fine, so this reads as a warning with a retry, not a rejection. */
.co-name-status--warn {
    color: var(--mud-palette-warning);
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Submit bar. */
.co-create-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border-radius: 14px;
    margin-top: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.co-create-submit__status {
    flex: 1 1 240px;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.co-create-submit__status--ready {
    color: var(--mud-palette-success);
    font-weight: 600;
}

/* ============================================================ Responsive ===== */
@media (max-width: 600px) {
    .co-hero {
        padding: 24px 20px 22px;
    }

    .co-hero__cta {
        width: 100%;
        min-height: 44px;
    }

    .co-toolbar__industry {
        width: 100%;
    }

    /* Meet the house 44px touch-target minimum on mobile (cf. LikeButton, CommentPanel). */
    .co-chip {
        min-height: 44px;
    }

    .co-create-progress {
        width: 100%;
    }

    .co-create-submit {
        justify-content: stretch;
    }

    .co-create-submit__status {
        flex-basis: 100%;
    }
}