/*
 * Connector Hub - stylesheet
 *
 * Tokens on :root, redefined for dark mode by the OS setting and overridden by the in-page toggle.
 * Same visual family as the Customer Portal Status page. ICT #6590.
 */

@font-face { font-family: 'Plex Sans'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('assets/fonts/plexsans-var.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/plexmono-400.woff2') format('woff2'); }

:root {
    --ink: #14181c;
    --ink-soft: #4e5850;
    --ink-faint: #7c877e;
    --paper: #eef1ec;
    --surface: #ffffff;
    --surface-2: #f5f7f3;
    --line: #d9ded4;
    --accent: #a3571f;
    --accent-soft: #f3e4d4;
    --accent-ink: #7a3f14;
    --warn-ink: #8a4b00;
    --warn-bg: #fff3dc;
    --error-ink: #a83629;
    --error-bg: #fbe6e2;
    --open-ink: #8a4b00;
    --open-bg: #fff3dc;
    --radius: 3px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --ink: #eef1ec; --ink-soft: #adb6a8; --ink-faint: #7c877e; --paper: #14171a; --surface: #1b1f21; --surface-2: #22272a;
        --line: #333a3d; --accent: #e08a4a; --accent-soft: #3a2a1d; --accent-ink: #f0b383;
        --warn-ink: #f0c070; --warn-bg: #3a2f1a; --error-ink: #f08a7c; --error-bg: #3a1f1b; --open-ink: #f0c070; --open-bg: #3a2f1a;
    }
}

:root[data-theme='dark'] {
    --ink: #eef1ec; --ink-soft: #adb6a8; --ink-faint: #7c877e; --paper: #14171a; --surface: #1b1f21; --surface-2: #22272a;
    --line: #333a3d; --accent: #e08a4a; --accent-soft: #3a2a1d; --accent-ink: #f0b383;
    --warn-ink: #f0c070; --warn-bg: #3a2f1a; --error-ink: #f08a7c; --error-bg: #3a1f1b; --open-ink: #f0c070; --open-bg: #3a2f1a;
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Plex Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.5; }

h1 { font-size: 28px; margin: 0 0 6px; }
h2 { font-size: 20px; margin: 32px 0 10px; }
h3 { font-size: 16px; margin: 18px 0 2px; }
h4 { font-size: 14px; margin: 18px 0 6px; }

.hidden { display: none !important; }
.muted { color: var(--ink-soft); margin: 4px 0; }
.strong { font-weight: 600; margin: 8px 0 2px; }
.warn { color: var(--warn-ink); background: var(--warn-bg); padding: 6px 10px; border-radius: var(--radius); margin: 8px 0; }
.mono { font-family: 'Plex Mono', ui-monospace, monospace; font-size: 13px; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--accent-ink); margin: 0 0 6px; }

.gate { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.gate-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; max-width: 460px; }

.page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

.hub-header { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.session-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-soft); }
.session-bar button { background: none; border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; }

.btn { background: var(--accent); color: #fff; border: 0; border-radius: var(--radius); padding: 8px 16px; font: inherit; cursor: pointer; margin: 8px 8px 0 0; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--quiet { background: none; color: var(--ink); border: 1px solid var(--line); padding: 4px 10px; margin: 0; }

.notice { padding: 10px 14px; border-radius: var(--radius); margin: 16px 0; }
.notice--error { background: var(--error-bg); color: var(--error-ink); }

.grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); }
.grid th, .grid td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid th { background: var(--surface-2); font-size: 13px; color: var(--ink-soft); font-weight: 600; }

.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent-ink); border-radius: 12px; padding: 2px 4px 2px 10px; margin: 2px 6px 2px 0; font-size: 13px; }
.chip--open { background: var(--open-bg); color: var(--open-ink); padding-right: 10px; }
.chip-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; }
.add-name { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 3px 8px; font: inherit; font-size: 13px; width: 180px; }

.save-bar { margin-top: 12px; }
.change-list { margin: 4px 0 8px 18px; padding: 0; }

@media (max-width: 640px) {
    .grid { display: block; overflow-x: auto; }
    .add-name { width: 140px; }
}

/* Tables: narrow columns never wrap their values, the name column keeps a readable width, cells align to the top row. */
.grid th, .grid td { vertical-align: middle; }
.grid .col-nowrap { white-space: nowrap; }
.grid .col-name { min-width: 160px; }
.grid--releases td { vertical-align: top; }
.grid .small { font-size: 12px; color: var(--ink-faint); }
.grid th.col-center, .grid td.col-center { text-align: center; width: 90px; }
.grid td:first-child { white-space: nowrap; }

/* Tabs: one per connector. */
.tablist { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 12px; }
.tab { background: none; border: 1px solid transparent; border-bottom: 0; color: var(--ink-soft); padding: 8px 16px; font: inherit; cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px; }
.tab[aria-selected='true'] { background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabpanel { background: var(--surface); border: 1px solid var(--line); border-top: 0; padding: 4px 20px 20px; }
.tabpanel .grid { border-left: 0; border-right: 0; }

.chip--warn { background: var(--warn-bg); color: var(--warn-ink); }

/* Account: an avatar button at the top right opens a menu with the name, email, theme and sign out. */
.account { position: relative; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; display: grid; place-items: center; }
.avatar:hover { border-color: var(--accent-soft); }
.avatar:focus-visible, .account-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-menu { position: absolute; right: 0; top: 48px; z-index: 10; min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(20, 24, 28, 0.18); padding: 6px 0; }
.account-who { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.account-name { font-weight: 600; }
.account-email { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.account-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; padding: 8px 16px; cursor: pointer; }
.account-item:hover { background: var(--surface-2); }

/* Sections of tools inside a connector's settings. */
.tool-section { margin-top: 22px; }
.tool-section h4 { margin: 0 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-ink); }
.tool-section .muted { margin: 0 0 8px; font-size: 13px; }

/* Every section's table uses the same column widths, so the Everyone boxes line up from one section to the next. */
.grid--tools { table-layout: fixed; }
.grid--tools th:nth-child(1), .grid--tools td:nth-child(1) { width: 240px; }
.grid--tools th:nth-child(2), .grid--tools td:nth-child(2) { width: 90px; }
.grid--tools td:nth-child(1) { white-space: normal; overflow-wrap: anywhere; }