/* ─────────────────────────────────────────────────────────────────────────
   Integration Hub — global stylesheet.

   The dedicated /admin/integration-hub page shares the Media Studio design
   language (shell, topbar tabs, canvas, cards). Every ih-* rule mirrors its
   ms-* counterpart in media-studio.css so the two studios read as one family.

   The dialog sections below carry the intf-* / ig-* / sso-* classes used by
   the integration dialogs — moved here from the components' <style> blocks so
   page and dialogs share one definition (same pattern as media-studio.css).
   ───────────────────────────────────────────────────────────────────────── */

/* ── hub page shell ────────────────────────────────────────────────── */

.ih-hub {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--mud-appbar-height, 64px));
    overflow: hidden;
    background: var(--mud-palette-background);
}

.ih-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 12px 10px 8px 16px;
    background: var(--mud-palette-surface);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ih-tabs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
    align-self: stretch;
    /* Same strip trick as .ms-modules: span the topbar's vertical padding AND its border row
       (bottom -9px) so the tabs sit ON the hairline and the active tab's -1px overhang covers it;
       the 1px padding-bottom keeps that overhang inside the (horizontal-scroll) overflow clip.
       margin auto centers the strip in the space next to the title. */
    margin: -8px auto -9px;
    padding-bottom: 1px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.ih-tabs::-webkit-scrollbar {
    display: none;
}

/* Section switcher: editor-style tabs (same language as .ms-module / global MudTabs). */
.ih-tab {
    appearance: none;
    border: none;
    background: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 12px 6px 12px;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
    background-color: var(--mud-palette-lines-default);
}

.ih-tab .mud-icon-root {
    font-size: 16px;
    opacity: 0.9;
}

.ih-tab:hover {
    background: rgba(128, 128, 128, 0.14);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

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

/* Active tab: pane surface fill; it covers the bar's hairline beneath it. */
.ih-tab.is-active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* ── canvas (both tabs) ────────────────────────────────────────────── */

.ih-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ih-canvas {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--mud-palette-surface);
}

.ih-canvas-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    min-height: 46px;
    box-sizing: border-box;
    padding: 6px 14px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ih-canvas-head .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.ih-canvas-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

/* Single-integration pages (add/edit): centered body, like .ms-preferences-inner. */
.ih-page-body {
    max-width: 980px;
    margin: 0 auto;
}

/* ── master–detail layout (integration pages) ──────────────────────── */

/* Left rail (integration list) + content panel (the selected integration's details). */
.ih-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.ih-rail {
    flex: 0 0 auto;
    width: 264px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px 14px;
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.ih-rail-section {
    padding: 10px 8px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.ih-rail-item {
    appearance: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    font-size: 0.84rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    min-width: 0;
}

.ih-rail-item .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.ih-rail-item:hover {
    background: rgba(128, 128, 128, 0.14);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
}

.ih-rail-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.ih-rail-item.is-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.ih-rail-item.is-active .mud-icon-root {
    color: var(--mud-palette-primary);
}

.ih-rail-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Connection state: solid green = connected + enabled, solid grey = connected but disabled,
   hollow = not set up yet (the "Available" entries open the empty creation form). */
.ih-rail-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-text-secondary);
}

.ih-rail-dot.is-on {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
}

.ih-rail-dot.is-off {
    background: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-text-secondary);
}

/* Mobile: the rail becomes a horizontal strip above the content. */
@media (max-width: 959px) {
    .ih-body {
        flex-direction: column;
    }

    .ih-rail {
        flex-direction: row;
        align-items: center;
        width: auto;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        padding: 6px 8px;
        scrollbar-width: none;
    }

    .ih-rail::-webkit-scrollbar {
        display: none;
    }

    .ih-rail-section {
        display: none;
    }

    .ih-rail-item {
        flex: 0 0 auto;
        width: auto;
        padding: 6px 10px;
    }

    .ih-rail-name {
        flex: 0 0 auto;
    }
}

.ih-alert {
    margin-bottom: 12px;
}

.ih-hint {
    display: block;
    margin-bottom: 10px;
}

/* ── connection cards ──────────────────────────────────────────────── */

.ih-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.ih-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 14px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
    /* Grid items default to min-width:auto — a long unbreakable value would widen the
       track and spill outside the card, so allow shrinking and clip the overflow. */
    min-width: 0;
    overflow: hidden;
}

.ih-card:hover {
    border-color: var(--mud-palette-primary);
}

.ih-card.is-disabled {
    opacity: 0.65;
}

.ih-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ih-card-title {
    flex: 1;
    min-width: 0;
}

.ih-card-name {
    margin: 0;
    font-weight: 600;
}

.ih-card-desc {
    line-height: 1.35;
}

.ih-secrets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ih-secret {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ih-secret-label {
    font-size: 0.68rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.ih-secret-value {
    font-family: monospace;
    font-size: 0.72rem;
    line-height: 1.3;
    /* Wrap rather than truncate: the client_email is what an admin must share the spreadsheet
       with, so hiding it behind a hover would be a usability regression — and wrapping can
       never escape the card at any length. The email is the only long value we render here. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ih-card-foot {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

/* ── states ────────────────────────────────────────────────────────── */

.ih-loading {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.ih-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 48px 16px;
}

.ih-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* ── sign-in tab ───────────────────────────────────────────────────── */

.ih-signin {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.ih-signin-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.ih-signin-head .mud-icon-root {
    margin-top: 3px;
}

/* Read-only summary rows (provider / issuer / secret / status). */
.ih-rows {
    display: flex;
    flex-direction: column;
    margin-top: 6px;
}

.ih-row {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.ih-row:last-child {
    border-bottom: none;
}

.ih-row-label {
    flex: 0 0 120px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.ih-row-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.ih-signin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ── dialog chrome (guide / SSO dialogs share it) ──────────────────── */

/* Every text button in the hub's dialogs is Size="Size.Small" (the compact standard used across
   all Integration Hub surfaces) — the height comes from the component, not from CSS. */

/* ── Add/Edit integration pages (form) ─────────────────────────────── */

/* "Find my values" row — wraps on narrow screens instead of overflowing. */
.intf-discover { flex-wrap: wrap; }

.intf-provider-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.intf-provider {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.intf-provider:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

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

.intf-provider.is-configured {
    opacity: 0.55;
    cursor: not-allowed;
    border-style: dashed;
}

.intf-provider.is-configured:hover {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Rendered setup guide (Markdown → HTML) inside the dialog. Wider/taller in full screen. */
.intf-docs {
    max-height: 40vh;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.5;
    padding: 2px;
}

.intf-docs h1, .intf-docs h2 { font-size: 14px; margin: 12px 0 6px; }
.intf-docs h2:first-child { margin-top: 0; }
.intf-docs h3 { font-size: 13px; margin: 10px 0 4px; }
.intf-docs p { margin: 6px 0; }
.intf-docs ol, .intf-docs ul { margin: 6px 0; padding-left: 20px; }
.intf-docs table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.intf-docs th, .intf-docs td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
}
.intf-docs code {
    background: var(--mud-palette-background-gray);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 12px;
}
.intf-docs pre {
    background: var(--mud-palette-background-gray);
    padding: 8px;
    border-radius: 6px;
    overflow-x: auto;
}
.intf-docs pre code { background: none; padding: 0; }

/* Destination editor rows: name + URL + secret share the width, URL gets the most. */
.intf-dest-row > .mud-input-control { flex: 1 1 0; min-width: 0; }
.intf-dest-row > .intf-dest-url { flex: 1.6 1 0; }

/* Field layout: a responsive grid so related settings sit side by side instead of one
   full-width column. List editors and credential files span the entire width. */
.intf-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 16px;
    align-items: start;
}

.intf-field.is-full { grid-column: 1 / -1; }

/* Form sections (Default connection / Additional connections) with a subtle separator. */
.intf-section {
    grid-column: 1 / -1;
    margin: 6px 0 12px;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.intf-fields-grid > .intf-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.intf-section-title { font-weight: 600; }

/* Connection cards: distinct card surface, compact collapsed panel for endpoint & key. */
.intf-conn-card { background: var(--mud-palette-surface); }
.intf-conn-card .mud-expand-panel-header { min-height: 42px; }

/* Connection rows size the CONTROL ROOT elements. This must be done here and never with a
   MudTextField Style="flex: ..." attribute: in MudBlazor 8 that style lands on the inner
   input container (inside the column-flex control), where flex-basis acts as HEIGHT
   (a 150px flex-basis renders a 150px-tall field). MudSelect's flex item is its OUTER
   .mud-select div, so selects need their own rule. */
.intf-conn-row > .mud-input-control { flex: 1 1 0; min-width: 0; }
.intf-conn-row > .mud-select { flex: 1 1 0; min-width: 0; }
.intf-conn-row-top > .mud-input-control:first-child { flex: 0 0 150px; }
.intf-conn-row-model > .mud-select { flex: 0 0 170px; }
.intf-conn-row-model > .mud-input-control:nth-child(3) { flex: 0 0 180px; }

@media (max-width: 640px) {
    .intf-dest-row { flex-wrap: wrap; }
}

/* ── setup guide dialog ────────────────────────────────────────────── */

.ig-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.ig-toc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    transition: border-color 0.12s ease, color 0.12s ease;
}

.ig-toc-link:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.ig-toc-link.is-configured {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-success);
}

/* Own scroll container so anchor jumps land inside the dialog, not the page. */
.ig-body {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
}

.ig-section {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    font-size: 13.5px;
    line-height: 1.55;
}

.ig-section:last-child {
    border-bottom: none;
}

.ig-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.ig-section-title {
    font-weight: 600;
}

.ig-section h3 { font-size: 14px; margin: 12px 0 4px; }
.ig-section h4 { font-size: 13.5px; margin: 10px 0 4px; }
.ig-section p { margin: 6px 0; }
.ig-section ol, .ig-section ul { margin: 6px 0; padding-left: 20px; }
.ig-section table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.ig-section th, .ig-section td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
}
.ig-section code {
    background: var(--mud-palette-background-gray);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 12px;
}
.ig-section pre {
    background: var(--mud-palette-background-gray);
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
}
.ig-section pre code { background: none; padding: 0; }

/* ── single sign-on settings dialog ───────────────────────────────── */

.sso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 8px;
    margin-bottom: 6px;
}

.sso-grid .sso-wide { grid-column: 1 / -1; }

.sso-steps {
    font-size: 13px;
    line-height: 1.6;
}

.sso-steps code {
    background: var(--mud-palette-background-gray);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 12px;
}