:root { color-scheme: light; --bg: #f6f8fb; --panel: #ffffff; --ink: #1b2733; --muted: #627386; --line: #d9e0e8; --accent: #2368a2; --accent-strong: #174f80; --gld-accent: #1665d8; --gld-accent-hover: #0f4fb3; --gld-accent-soft: #eaf2ff; --gld-accent-on: #ffffff; --ink-1: #0e1726; --ink-2: #1f2933; --ink-3: #4a5566; --ink-4: #6b7587; --ink-5: #97a0b0; --bg-surface: #ffffff; --bg-inset: #fafbfc; --bg-muted: #f1f3f7; --line-1: #e6e9ef; --line-2: #d9dee7; --line-3: #c3cad7; --st-blue-bg: #eaf2ff; --st-blue-border: #c0d6f5; --st-blue-text: #1654b3; --st-blue-dot: #2e6fd0; --st-green-bg: #e8f7ed; --st-green-border: #a8d6b6; --st-green-text: #176335; --st-green-dot: #2f9457; --st-amber-bg: #fdf3df; --st-amber-border: #ecc986; --st-amber-text: #7a4d12; --st-amber-dot: #d59024; --st-rose-bg: #fdecec; --st-rose-border: #e9a3a3; --st-rose-text: #a8231b; --st-rose-dot: #c8362a; --st-slate-bg: #eef1f6; --st-slate-border: #d3d8e2; --st-slate-text: #3d4757; --st-slate-dot: #6b7587; --r-md: 8px; --r-lg: 10px; --r-pill: 999px; --el-1: 0 1px 0 rgba(16, 24, 40, 0.02), 0 1px 2px rgba(16, 24, 40, 0.04); --focus-ring: 0 0 0 3px rgba(22, 101, 216, 0.30); --code-bg: #0f1720; --code-ink: #e7edf3; } /* Dark palette. Auto mode follows the OS (media query); a pinned [data-theme] on always wins by source order. Same token names, so every component inherits both themes. Small tinted status chips keep their light fills deliberately — dark text on a light chip stays readable on dark surfaces. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e141b; --panel: #161d26; --ink: #e6ebf1; --muted: #93a1b3; --line: #29323e; --accent: #6ea8d8; --accent-strong: #8fc0e8; --gld-accent: #4a8fe8; --gld-accent-hover: #6ea6ee; --gld-accent-soft: #1a2c44; --gld-accent-on: #ffffff; --ink-1: #f2f5f9; --ink-2: #dde4ec; --ink-3: #aab6c5; --ink-4: #8b98a9; --ink-5: #66748a; --bg-surface: #161d26; --bg-inset: #131922; --bg-muted: #1c242f; --line-1: #242e3a; --line-2: #2b3644; --line-3: #384454; --st-blue-bg: #16283f; --st-blue-border: #2a4a75; --st-blue-text: #9cc2f2; --st-blue-dot: #5c93e0; --st-green-bg: #12291b; --st-green-border: #275c3a; --st-green-text: #8fd6a8; --st-green-dot: #3fa465; --st-amber-bg: #33270e; --st-amber-border: #6c5320; --st-amber-text: #ecc478; --st-amber-dot: #d59024; --st-rose-bg: #371718; --st-rose-border: #6e2b2b; --st-rose-text: #f0a2a2; --st-rose-dot: #d4544a; --st-slate-bg: #1d2530; --st-slate-border: #324050; --st-slate-text: #aab6c5; --st-slate-dot: #8b98a9; --el-1: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35); --focus-ring: 0 0 0 3px rgba(74, 143, 232, 0.45); --code-bg: #0a0f15; --code-ink: #dbe4ee; } } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; --bg: #0e141b; --panel: #161d26; --ink: #e6ebf1; --muted: #93a1b3; --line: #29323e; --accent: #6ea8d8; --accent-strong: #8fc0e8; --gld-accent: #4a8fe8; --gld-accent-hover: #6ea6ee; --gld-accent-soft: #1a2c44; --gld-accent-on: #ffffff; --ink-1: #f2f5f9; --ink-2: #dde4ec; --ink-3: #aab6c5; --ink-4: #8b98a9; --ink-5: #66748a; --bg-surface: #161d26; --bg-inset: #131922; --bg-muted: #1c242f; --line-1: #242e3a; --line-2: #2b3644; --line-3: #384454; --st-blue-bg: #16283f; --st-blue-border: #2a4a75; --st-blue-text: #9cc2f2; --st-blue-dot: #5c93e0; --st-green-bg: #12291b; --st-green-border: #275c3a; --st-green-text: #8fd6a8; --st-green-dot: #3fa465; --st-amber-bg: #33270e; --st-amber-border: #6c5320; --st-amber-text: #ecc478; --st-amber-dot: #d59024; --st-rose-bg: #371718; --st-rose-border: #6e2b2b; --st-rose-text: #f0a2a2; --st-rose-dot: #d4544a; --st-slate-bg: #1d2530; --st-slate-border: #324050; --st-slate-text: #aab6c5; --st-slate-dot: #8b98a9; --el-1: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35); --focus-ring: 0 0 0 3px rgba(74, 143, 232, 0.45); --code-bg: #0a0f15; --code-ink: #dbe4ee; } /* Theme toggle (chrome). Cycles auto -> light -> dark; see base.html. */ .theme-toggle { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); cursor: pointer; display: inline-flex; height: 32px; justify-content: center; width: 32px; } .theme-toggle:hover { border-color: var(--line-3); color: var(--ink); } .theme-toggle .ic { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; width: 16px; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; } a { color: inherit; } .topbar { align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 64px; padding: 0 32px; } .brand { align-items: center; color: var(--accent-strong); display: inline-flex; font-size: 1.05rem; font-weight: 700; gap: 10px; text-decoration: none; } .brand-block { align-items: center; display: inline-flex; flex-wrap: wrap; gap: 10px; min-width: 0; } .brand__logo { background: var(--bg-surface); border-radius: 6px; height: 28px; object-fit: contain; padding: 2px; width: 40px; } .environment-badge { background: #eef6ff; border: 1px solid #bfdbfe; border-radius: 999px; color: #1d4ed8; font-size: 0.72rem; font-weight: 800; line-height: 1; padding: 5px 8px; white-space: nowrap; } .nav { display: flex; flex-wrap: wrap; gap: 16px; } .nav a { color: var(--muted); font-size: 0.95rem; text-decoration: none; } .page { margin: 0 auto; max-width: 1180px; padding: 40px 24px; } .headline { margin-bottom: 24px; } .headline h1, .panel h1 { font-size: 2rem; letter-spacing: 0; line-height: 1.2; margin: 0; } .eyebrow, .muted, .app-category, .error { color: var(--muted); } .error { color: #a33131; font-weight: 700; } .eyebrow, .app-category { font-size: 0.8rem; font-weight: 700; letter-spacing: 0; margin: 0 0 6px; text-transform: uppercase; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 28px; } .gld-logo { align-items: center; color: var(--ink-1); display: inline-flex; font-weight: 700; gap: 10px; letter-spacing: 0; text-decoration: none; } .gld-logo__image { background: var(--bg-surface); border-radius: 6px; height: 28px; object-fit: contain; padding: 2px; width: 40px; } .gld-logo .lockup-product { border-left: 1px solid var(--line-2); color: var(--ink-4); font-size: 0.8em; font-weight: 600; padding-left: 10px; } .gld-logo.xl { font-size: 2rem; } .gld-logo.xl .gld-logo__image { border-radius: 8px; height: 40px; width: 58px; } .login-shell { display: grid; gap: 28px; margin: 28px auto 0; max-width: 1060px; } .login-grid { align-items: center; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); } .login-hero { align-content: center; display: grid; gap: 18px; } .login-hero h1 { color: var(--ink-1); font-size: 2.45rem; letter-spacing: 0; line-height: 1.08; margin: 8px 0 0; max-width: 540px; } .login-hero p { color: var(--ink-3); font-size: 1.05rem; margin: 0; max-width: 560px; } .login-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .login-hero__facts span { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-pill); color: var(--ink-3); font-size: 0.84rem; font-weight: 700; padding: 6px 10px; } .login-panel { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--el-1); padding: 28px; } .login-panel h1, .login-panel h2 { color: var(--ink-1); font-size: 1.55rem; letter-spacing: 0; line-height: 1.2; margin: 0; } .login-panel .muted { margin-bottom: 0; } .login-divider { align-items: center; color: var(--ink-5); display: grid; font-size: 0.78rem; font-weight: 700; gap: 10px; grid-template-columns: 1fr auto 1fr; margin: 14px 0; text-transform: uppercase; } .login-divider::before, .login-divider::after { background: var(--line-1); content: ""; height: 1px; } .field-stack { display: grid; gap: 6px; } .field-stack label, .identity-token-form label { color: var(--ink-3); font-size: 0.86rem; font-weight: 700; } .field-stack input { background: var(--bg-surface); border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-1); font: inherit; min-height: 42px; padding: 9px 10px; } .field-stack input:focus, .identity-token-form input:focus, .button:focus, .provider-button:focus, .launch-link:focus, .nav a:focus, .core-home-rail a:focus { box-shadow: var(--focus-ring); outline: none; } .identity-password-form { display: grid; gap: 12px; } .identity-password-reset-form, .password-reset { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); display: grid; gap: 12px; margin-top: 12px; padding: 16px; } .login-forgot-password { justify-self: center; margin-top: -2px; } .password-reset summary { color: var(--accent-strong); cursor: pointer; font-weight: 800; } .password-reset form { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; } .password-reset input, .password-reset button, .identity-password-reset-form input, .identity-password-reset-form button { box-sizing: border-box; width: 100%; } .identity-login, .identity-token-form { display: grid; gap: 12px; } .provider-button { align-items: center; background: var(--bg-surface); border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-1); cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; gap: 10px; justify-content: center; min-height: 42px; padding: 10px 14px; width: 100%; } .provider-button:hover:not(:disabled) { border-color: var(--gld-accent); color: var(--gld-accent-hover); } .provider-button:disabled { background: var(--bg-muted); color: var(--ink-4); cursor: default; } .provider-button__icon { align-items: center; display: inline-flex; height: 20px; justify-content: center; width: 20px; } .provider-button__icon svg { display: block; height: 20px; width: 20px; } .login-status { font-size: 0.9rem; } .login-support-note { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); color: var(--ink-3); display: grid; font-size: 0.9rem; gap: 3px; margin-top: 16px; padding: 12px; } .login-support-note strong { color: var(--ink-1); } .app-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .app-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; min-height: 210px; padding: 22px; } .app-card--disabled { background: var(--bg-muted); color: var(--ink-3); } .app-card__meta { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; } .app-card h2 { font-size: 1.15rem; letter-spacing: 0; margin: 0 0 8px; } .app-card h3 { color: var(--ink-1); font-size: 1.1rem; letter-spacing: 0; margin: 0 0 8px; } .app-card p { margin-top: 0; } .core-home-shell { display: grid; gap: 24px; grid-template-columns: 220px minmax(0, 1fr); } .core-home-rail { align-self: start; background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); display: grid; gap: 18px; padding: 18px; position: sticky; top: 88px; } .core-home-rail__nav { display: grid; gap: 4px; } .core-home-rail__nav a { border-radius: 6px; color: var(--ink-3); font-size: 0.92rem; font-weight: 700; padding: 8px 10px; text-decoration: none; } .core-home-rail__nav a:hover, .core-home-rail__nav a.active { background: var(--gld-accent-soft); color: var(--gld-accent-hover); } .core-home-rail__note { border-top: 1px solid var(--line-1); color: var(--ink-4); font-size: 0.84rem; padding-top: 14px; } .core-home-main { display: grid; gap: 20px; } .platform-hero { align-items: stretch; background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--el-1); display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); padding: 28px; } .platform-hero h1 { color: var(--ink-1); font-size: 2rem; letter-spacing: 0; line-height: 1.15; margin: 0; } .platform-hero p { color: var(--ink-3); margin: 12px 0 0; max-width: 660px; } .identity-card { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; } .identity-card strong, .identity-card span:not(.gld-pill, .dot) { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; } .identity-card strong { color: var(--ink-1); margin-top: 4px; } .identity-card span:not(.gld-pill, .dot) { color: var(--ink-4); font-size: 0.9rem; } .dashboard-section, .pending-access, .empty-state { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--el-1); } .dashboard-section { display: grid; gap: 16px; padding: 22px; } .pending-access { border-color: var(--st-amber-border); padding: 22px; } .pending-access h2, .dashboard-section h2, .empty-state h3 { color: var(--ink-1); letter-spacing: 0; margin: 0; } .pending-access h2, .dashboard-section h2 { font-size: 1.28rem; } .pending-access h1 { color: var(--ink-1); font-size: 1.45rem; letter-spacing: 0; margin: 0; } .pending-access p { margin-bottom: 0; } .pending-access-page { align-items: center; display: grid; min-height: calc(100vh - 180px); padding: 24px 0; } .pending-access-panel { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--el-2); display: grid; gap: 20px; margin: 0 auto; max-width: 820px; min-width: 0; padding: 28px; width: min(100%, 820px); } .pending-access-brand { align-items: center; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; } .pending-access-logo { align-items: center; background: var(--gld-accent-soft); border: 1px solid var(--line-1); border-radius: 12px; color: var(--gld-accent-hover); display: inline-flex; font-weight: 900; height: 52px; justify-content: center; width: 52px; } .pending-access-brand h1 { color: var(--ink-1); font-size: 1.65rem; letter-spacing: 0; margin: 0; } .pending-status-badge { border: 1px solid var(--line-2); border-radius: 999px; font-size: 0.78rem; font-weight: 900; padding: 7px 10px; text-transform: uppercase; white-space: nowrap; } .pending-status-badge--pending { background: var(--st-amber-soft); border-color: var(--st-amber-border); color: #7a4a00; } .pending-status-badge--approved { background: var(--st-green-soft); border-color: var(--st-green-border); color: #12623e; } .pending-status-badge--declined { background: var(--bg-muted); color: var(--ink-3); } .pending-access-copy { color: var(--ink-2); font-size: 1rem; line-height: 1.55; } .pending-access-copy p { margin: 0; } .pending-access-facts { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } .pending-access-facts div { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); min-width: 0; padding: 12px; } .pending-access-facts dt { color: var(--ink-4); font-size: 0.75rem; font-weight: 900; text-transform: uppercase; } .pending-access-facts dd { color: var(--ink-2); font-weight: 700; margin: 5px 0 0; overflow-wrap: anywhere; } .pending-access-next { border-top: 1px solid var(--line-1); padding-top: 16px; } .pending-access-next h2 { color: var(--ink-1); font-size: 1rem; letter-spacing: 0; margin: 0 0 6px; } .pending-access-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; } .pending-access-actions form { margin: 0; } .pending-access-diagnostics { border-top: 1px solid var(--line-1); color: var(--muted); padding-top: 12px; } .pending-access-diagnostics summary { cursor: pointer; font-weight: 800; } .identity-summary-list { display: grid; gap: 10px; margin: 18px 0 0; } .identity-summary-list div { display: grid; gap: 3px; } .identity-summary-list dt { color: var(--ink-4); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; } .identity-summary-list dd { color: var(--ink-1); margin: 0; } .section-heading { align-items: start; display: flex; gap: 18px; justify-content: space-between; } .section-count { background: var(--bg-muted); border: 1px solid var(--line-1); border-radius: var(--r-pill); color: var(--ink-3); flex: none; font-size: 0.82rem; font-weight: 700; padding: 5px 10px; } .app-grid--available { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .client-summary-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .client-chip-card { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); display: grid; gap: 2px; min-height: 72px; padding: 13px; } .client-chip-card strong { color: var(--ink-1); overflow-wrap: anywhere; } .client-chip-card span { color: var(--ink-4); font-size: 0.84rem; } .client-chip-card--more { background: var(--gld-accent-soft); border-color: var(--st-blue-border); } .section-note { margin: 0; } .empty-state { padding: 22px; } .empty-state--compact { box-shadow: none; padding: 16px; } .empty-state p { margin-bottom: 0; } .launch-link, .button { align-items: center; background: var(--accent); border: 0; border-radius: 6px; color: var(--gld-accent-on); cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; justify-content: center; min-height: 42px; padding: 10px 14px; text-decoration: none; } .button--full { width: 100%; } .button--secondary { background: var(--gld-accent-soft); color: var(--gld-accent-hover); } .button:disabled { background: var(--line-2); color: var(--ink-4); cursor: default; } .launch-link--disabled { background: var(--line-2); color: var(--ink-3); cursor: default; } .button { flex-direction: column; min-width: 260px; } .button--compact { min-width: 0; } .button span { font-size: 0.78rem; font-weight: 500; } .login-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .staging-demo-login { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--el-1); padding: 22px; } .staging-demo-login__header, .persona-login-card__header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; } .staging-demo-login__header h2, .persona-login-card h3 { letter-spacing: 0; margin: 0; } .persona-login-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 16px; } .persona-login-card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; padding: 16px; } .persona-login-card p { margin: 0; } .identity-token-form { border-top: 1px solid var(--line); display: grid; gap: 10px; margin-top: 18px; max-width: 460px; padding-top: 18px; } .identity-token-form input { border: 1px solid var(--line); border-radius: 6px; font: inherit; min-height: 42px; padding: 8px 10px; } .details { display: grid; gap: 10px 20px; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); } .details dt { color: var(--muted); font-weight: 700; } .details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } table { border-collapse: collapse; margin-top: 18px; width: 100%; } th, td { border-bottom: 1px solid var(--line); padding: 12px; text-align: left; } code { background: var(--bg-muted); border-radius: 4px; color: var(--accent-strong); display: inline; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.9em; max-width: 100%; overflow-wrap: anywhere; padding: 2px 4px; white-space: normal; word-break: break-word; } .json-preview { background: var(--code-bg); border-radius: 8px; color: var(--code-ink); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.82rem; line-height: 1.5; margin: 14px 0 0; max-height: 420px; overflow: auto; padding: 14px; white-space: pre-wrap; } .json-preview code { background: transparent; color: inherit; padding: 0; } .admin-user-table { width: 100%; } .admin-user-table table, table.admin-user-table { border-collapse: collapse; table-layout: fixed; width: 100%; } .admin-user-table th, .admin-user-table td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; } .admin-user-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; } .admin-user-table--list th, .admin-user-table--list td { overflow-wrap: anywhere; } .admin-user-table--list th:nth-child(1) { width: 25%; } .admin-user-table--list th:nth-child(2), .admin-user-table--list th:nth-child(3), .admin-user-table--list th:nth-child(4), .admin-user-table--list th:nth-child(5), .admin-user-table--list th:nth-child(6) { width: 15%; } .user-row-link { color: var(--ink); display: grid; gap: 2px; text-decoration: none; } .user-row-link:hover strong { color: var(--accent-strong); text-decoration: underline; } .user-row-link span, .user-row-link small { color: var(--muted); font-size: 0.88rem; } .tag, .status-pill { border: 1px solid var(--line); border-radius: 999px; display: inline-flex; font-size: 0.82rem; font-weight: 700; line-height: 1.2; margin: 2px 4px 2px 0; padding: 4px 8px; white-space: nowrap; } .tag { background: var(--bg-inset); color: var(--ink); } .gld-card { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--el-1); } .gld-pill { align-items: center; background: var(--bg-surface); border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink-2); display: inline-flex; font-size: 0.75rem; font-weight: 700; gap: 6px; line-height: 1.5; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 3px 9px; white-space: normal; } .gld-pill .dot { background: var(--ink-4); border-radius: 999px; flex: none; height: 7px; width: 7px; } .gld-pill.s-blue { background: var(--st-blue-bg); border-color: var(--st-blue-border); color: var(--st-blue-text); } .gld-pill.s-blue .dot { background: var(--st-blue-dot); } .gld-pill.s-green { background: var(--st-green-bg); border-color: var(--st-green-border); color: var(--st-green-text); } .gld-pill.s-green .dot { background: var(--st-green-dot); } .gld-pill.s-amber { background: var(--st-amber-bg); border-color: var(--st-amber-border); color: var(--st-amber-text); } .gld-pill.s-amber .dot { background: var(--st-amber-dot); } .gld-pill.s-slate { background: var(--st-slate-bg); border-color: var(--st-slate-border); color: var(--st-slate-text); } .gld-pill.s-slate .dot { background: var(--st-slate-dot); } .status-pill { background: #eaf2f9; color: var(--accent-strong); text-transform: capitalize; } .status-pill--planned, .status-pill--unavailable, .status-pill--external_legacy { background: var(--bg-muted); color: var(--ink-3); } .status-pill--admin_only { background: #f8eedb; color: #755313; } .status-pill--warning { background: #fff4df; color: #7a4d00; } .status-pill--ok { background: #e7f7ed; border-color: #b7e5c4; color: #166534; } .status-pill--error { background: #fee2e2; border-color: #fecaca; color: #991b1b; } .status-pill--not_configured, .status-pill--optional_disabled { background: var(--bg-muted); border-color: var(--line-2); color: var(--ink-3); } .notice-panel { background: #f2f7fb; border: 1px solid var(--line); border-radius: 8px; margin: 18px 0; padding: 14px 16px; } .admin-hero { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 24px; justify-content: space-between; margin: -4px 0 20px; padding-bottom: 20px; } .admin-hero--detail { margin-bottom: 16px; } .admin-hero--compact { margin-bottom: 12px; padding-bottom: 14px; } .admin-hero--compact h1 { font-size: 1.55rem; } .admin-hero p { margin: 10px 0 0; max-width: 760px; } .admin-hero__status { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 220px; } .user-access-shell { display: grid; gap: 18px; } .access-user-header { align-items: flex-start; border-bottom: 1px solid var(--line-1); display: flex; gap: 20px; justify-content: space-between; padding-bottom: 18px; } .access-user-header__identity h1 { color: var(--ink-1); font-size: 1.7rem; letter-spacing: 0; line-height: 1.15; margin: 0; } .access-user-header__identity p { color: var(--ink-4); margin: 8px 0 0; } .access-user-header__meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 560px; } .access-overview-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .admin-list-header { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; margin-bottom: 14px; } .admin-list-header > * { min-width: 0; } .admin-list-header h1 { margin: 0; } .admin-list-header p { margin: 6px 0 0; max-width: 760px; } .admin-list-header__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; } .admin-workspace-nav { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 18px 0; } .admin-nav-card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); display: grid; gap: 4px; min-height: 92px; padding: 14px; text-decoration: none; } .admin-nav-card span { color: var(--muted); font-size: 0.88rem; } .admin-nav-card--active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } .admin-nav-card--accent { background: #eef7f3; border-color: #9ac7b1; } .admin-nav-card--disabled { color: var(--ink-3); } .metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 18px 0; } .metric-grid--compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 12px 0; } .metric-grid--compact .metric-card { min-height: 72px; padding: 12px; } .metric-grid--compact .metric-card strong { font-size: 1.25rem; } .metric-card { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; min-height: 84px; padding: 14px; } .metric-card span { color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; } .metric-card strong { color: var(--accent-strong); font-size: 1.45rem; line-height: 1.1; overflow-wrap: anywhere; } .metric-card--warning { background: #fff9ed; border-color: #efcf99; } .filter-heading { align-self: stretch; display: grid; gap: 2px; grid-column: 1 / -1; } .filter-heading strong { color: var(--ink); } .admin-filter-form { align-items: end; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 18px 0; padding: 16px; } .admin-table-toolbar { align-items: stretch; display: grid; gap: 12px; grid-template-columns: minmax(240px, 1fr) minmax(0, auto); margin: 14px 0 8px; } .admin-search-form { align-items: center; display: flex; flex: 1; gap: 8px; max-width: 640px; } .admin-search-form label { flex: 1; } .admin-search-form input { border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: inherit; min-height: 40px; min-width: 0; padding: 8px 14px; width: 100%; } .admin-filter-disclosure, .admin-disclosure { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-inset); } .admin-filter-disclosure { justify-self: end; min-width: 132px; max-width: min(760px, 100%); position: relative; } .admin-filter-disclosure > summary, .admin-disclosure > summary { color: var(--accent-strong); cursor: pointer; font-weight: 800; padding: 10px 12px; } .admin-disclosure { margin: 10px 0; padding: 0; } .admin-disclosure > .tag-list, .admin-disclosure > .summary-grid, .admin-disclosure > .notice-panel { margin: 12px; } .admin-filter-form--compact { background: var(--bg-inset); border: 0; display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); margin: 0; padding: 12px; width: min(760px, calc(100vw - 64px)); } .admin-filter-disclosure[open] .admin-filter-form--compact { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; } .admin-filter-form--compact .button { align-self: end; } .admin-list-count { margin: 4px 0 8px; } .sr-only { clip: rect(0, 0, 0, 0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .breadcrumbs { align-items: center; color: var(--ink-4); display: flex; flex-wrap: wrap; font-size: 0.84rem; font-weight: 700; gap: 7px; margin: 0 0 14px; } .breadcrumbs a { color: var(--accent-strong); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .detail-section-nav { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 8px; } .detail-section-nav a { border-radius: 999px; color: var(--accent-strong); font-size: 0.86rem; font-weight: 800; padding: 7px 10px; text-decoration: none; } .detail-section-nav a:hover { background: #eaf2f9; } .detail-section { scroll-margin-top: 90px; } .guided-app-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 16px 0; } .guided-app-card { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-md); box-shadow: var(--el-1); display: grid; gap: 12px; min-width: 0; padding: 16px; } .guided-app-card--enabled { border-color: var(--st-green-border); box-shadow: inset 3px 0 0 var(--st-green-dot); } .guided-app-card--compact { cursor: pointer; } .guided-app-card--compact input { accent-color: var(--gld-accent); position: absolute; opacity: 0; } .guided-app-card__head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; } .guided-app-card__head h3, .guided-app-card__head strong { color: var(--ink-1); font-size: 1rem; letter-spacing: 0; margin: 0; } .guided-app-card__head p, .guided-app-card__body, .guided-app-card__explain, .guided-app-card small, .guided-app-card em { color: var(--ink-4); font-size: 0.84rem; font-style: normal; margin: 3px 0 0; } .guided-app-card__body { display: grid; gap: 4px; } .guided-field { color: var(--ink-3); display: grid; font-size: 0.82rem; font-weight: 800; gap: 6px; } .guided-field select, .advanced-raw-grid textarea, .user-access-details textarea { background: var(--bg-surface); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--ink-2); font: inherit; min-width: 0; padding: 9px 11px; width: 100%; } .guided-field select:focus, .advanced-raw-grid textarea:focus, .user-access-details textarea:focus { border-color: var(--gld-accent); box-shadow: var(--focus-ring); outline: none; } .guided-app-card__explain { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); display: grid; gap: 3px; padding: 10px 12px; } .guided-app-card__explain strong { color: var(--ink-2); } .grant-preview { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; } .grant-preview span { color: var(--ink-4); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; } .grant-preview em { color: var(--ink-4); font-size: 0.82rem; } .legacy-drive-card { margin-top: 14px; } .user-access-redesign { display: grid; gap: 18px; } .access-page-header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; } .access-page-header h1 { margin-bottom: 6px; } .access-page-header__actions { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .access-create-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 322px; } .access-create-main, .app-access-stack { display: grid; gap: 16px; } .access-section { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-md); box-shadow: var(--el-1); padding: 0; } .access-section__header { align-items: flex-start; border-bottom: 1px solid var(--line-1); display: flex; gap: 12px; padding: 16px 20px; } .access-section__header h2 { color: var(--ink-1); font-size: 1.1rem; letter-spacing: 0; margin: 0; } .access-section__header p { color: var(--ink-4); margin: 4px 0 0; } .access-section > .guided-field { padding: 20px; } .access-section > .muted { margin: 0; padding: 0 20px 20px; } .access-step { align-items: center; background: var(--gld-accent-soft); border-radius: 999px; color: var(--gld-accent-hover); display: inline-flex; flex: 0 0 auto; font-size: 0.82rem; font-weight: 800; height: 26px; justify-content: center; width: 26px; } .identity-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; } .identity-grid__wide { grid-column: 1 / -1; } .identity-grid label, .access-section label, .summary-panel label { color: var(--ink-3); display: grid; font-size: 0.84rem; font-weight: 800; gap: 6px; } .activation-options { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); display: grid; gap: 12px; padding: 14px; } .activation-options--inactive { opacity: 0.65; } .activation-options__header { display: grid; gap: 3px; } .activation-option-list { display: grid; gap: 8px; } .activation-option { align-items: flex-start; } .create-submit-reasons { background: #fff8e6; border: 1px solid #f1cf78; border-radius: var(--r-sm); color: var(--ink-3); display: grid; font-size: 0.84rem; gap: 4px; padding: 10px 12px; } .create-submit-reasons strong { color: var(--ink-1); } .identity-grid input, .identity-grid select, .identity-grid textarea, .access-section textarea, .summary-panel textarea { background: var(--bg-surface); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--ink-2); font: inherit; min-height: 42px; min-width: 0; padding: 10px 12px; } .password-reset { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); margin-top: 12px; padding: 16px; } .password-reset summary { color: var(--accent-strong); cursor: pointer; font-weight: 800; } .password-reset form { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; } .password-reset input, .password-reset button { box-sizing: border-box; width: 100%; } .core-input, .core-select, .user-access-redesign input[type="text"], .user-access-redesign input[type="email"], .user-access-redesign input[type="search"], .user-access-redesign select, .user-access-redesign textarea, .admin-list-page select { background-color: var(--bg-surface); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--ink-2); font: inherit; min-height: 42px; min-width: 0; padding: 10px 12px; width: 100%; } .core-select, .user-access-redesign select, .admin-list-page select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-4) 50%), linear-gradient(135deg, var(--ink-4) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 34px; } .core-input[readonly], .user-access-redesign input[readonly] { background: var(--bg-inset); color: var(--muted); } .core-select:disabled, .user-access-redesign select:disabled { background-color: var(--bg-muted); border-color: var(--line-1); color: var(--muted); cursor: not-allowed; } .identity-grid textarea, .access-section textarea, .summary-panel textarea { line-height: 1.45; resize: vertical; } .app-access-card { --app-fg: #0f766e; --app-soft: #def4f1; background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-md); box-shadow: var(--el-1); color: var(--ink-2); display: grid; min-width: 0; overflow: hidden; } .app-access-card--tickets { --app-fg: #1665d8; --app-soft: #eaf2ff; } .app-access-card--planned { --app-fg: #6c52d5; --app-soft: #efeafd; opacity: 0.78; } .app-access-card--sensitive { --app-fg: #4339d4; --app-soft: #eceafe; } .app-access-card--legacy { --app-fg: #64748b; --app-soft: #f1f5f9; } .app-access-card--enabled { border-color: var(--app-fg); box-shadow: inset 3px 0 0 var(--app-fg), var(--el-1); } label.app-access-card { cursor: pointer; } label.app-access-card > input { accent-color: var(--app-fg); height: 1px; opacity: 0; position: absolute; width: 1px; } .app-access-card__main { align-items: flex-start; display: flex; gap: 14px; padding: 15px 16px; } .app-access-card__icon { align-items: center; background: var(--app-soft); border-radius: var(--r-md); color: var(--app-fg); display: inline-flex; flex: 0 0 auto; font-size: 0.76rem; font-weight: 900; height: 40px; justify-content: center; letter-spacing: 0; width: 40px; } .app-access-card__head { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; } .app-access-card__title { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .app-access-card__title h3, .app-access-card__title strong { color: var(--ink-1); font-size: 1rem; letter-spacing: 0; margin: 0; } .app-access-card__head p, .app-access-card__head small, .app-access-card__detail { color: var(--ink-4); font-size: 0.84rem; } .app-access-card__control { flex: 0 0 220px; } .app-access-card__control select { background: var(--bg-surface); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--ink-2); font: inherit; min-height: 42px; padding: 9px 11px; width: 100%; } .app-access-card__detail { background: var(--bg-inset); border-top: 1px solid var(--line-1); display: grid; gap: 10px; padding: 14px 16px; } .app-access-card__detail p { margin: 0; } .scope-mode-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .scope-mode-card { background: var(--bg-inset); border: 1px solid var(--line-1); border-radius: var(--r-md); color: var(--ink-2); font-weight: 800; padding: 12px; } .scope-mode-card small { color: var(--ink-4); font-weight: 600; } .access-review-rail { position: sticky; top: 88px; } .access-review-rail__inner { background: var(--bg-surface); border: 1px solid var(--line-1); border-radius: var(--r-md); display: grid; gap: 14px; padding: 18px; } .access-review-rail__inner h2 { color: var(--ink-1); font-size: 1rem; letter-spacing: 0; margin: 0; } .review-identity { align-items: center; display: flex; gap: 10px; } .review-avatar { align-items: center; background: var(--gld-accent-soft); border-radius: 999px; color: var(--gld-accent-hover); display: inline-flex; font-weight: 900; height: 42px; justify-content: center; width: 42px; } .review-identity div, .review-apps { display: grid; gap: 3px; } .review-identity span, .review-apps span, .review-facts { color: var(--ink-4); font-size: 0.84rem; } .review-facts { border-bottom: 1px solid var(--line-1); border-top: 1px solid var(--line-1); display: grid; gap: 8px; grid-template-columns: 1fr auto; margin: 0; padding: 12px 0; } .review-facts dd { color: var(--ink-2); font-weight: 800; margin: 0; text-align: right; } .review-apps em { background: var(--gld-accent-soft); border-radius: 999px; color: var(--gld-accent-hover); font-style: normal; font-weight: 800; padding: 2px 7px; } .access-review-rail__button { width: 100%; } .sensitive-result-panel { border-color: #d99a1e; } .sensitive-value-copy { display: grid; gap: 10px; } .sensitive-value-copy textarea { font-family: var(--font-mono); overflow-wrap: anywhere; resize: vertical; } .password-action-list { display: grid; gap: 10px; } .access-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .savebar { top: 76px; } .client-chip-grid { display: grid; gap: 10px; margin: 10px 0 14px; } .admin-filter-form label { color: var(--muted); display: grid; font-size: 0.82rem; font-weight: 700; gap: 6px; } .admin-filter-form input, .admin-filter-form select { border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; min-height: 40px; min-width: 0; padding: 8px 10px; } .readonly-check { align-items: center; display: flex; gap: 8px; margin: 6px 0; } .readonly-check input { accent-color: var(--accent); } .access-control-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 12px 0; } .access-control-card { align-items: flex-start; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 10px; min-height: 118px; padding: 14px; } .access-control-card--enabled { background: #eef7f3; border-color: #9ac7b1; } .access-control-card--warning { background: #fff8ea; border-color: #dfbf73; } .access-control-card input { accent-color: var(--accent); margin-top: 3px; } .access-control-card span { display: grid; gap: 3px; } .access-control-card small { color: var(--muted); font-size: 0.78rem; font-weight: 700; } .access-control-card em { color: var(--muted); font-size: 0.84rem; font-style: normal; } .inline-action { appearance: none; background: transparent; border: 0; color: var(--accent-strong); cursor: pointer; font: inherit; font-weight: 700; padding: 0; text-decoration: none; } .inline-action:hover { text-decoration: underline; text-underline-offset: 3px; } .inline-action:focus { border-radius: 4px; box-shadow: var(--focus-ring); outline: none; } .inline-action:disabled { color: var(--ink-5); cursor: not-allowed; text-decoration: none; } .pending-access { margin-bottom: 24px; } .pending-access h2 { font-size: 1.25rem; letter-spacing: 0; margin: 0 0 8px; } .user-access-list { display: grid; gap: 18px; margin-top: 28px; } .user-access-details { border: 1px solid var(--line); border-radius: 8px; margin-top: 22px; padding: 14px 16px; } .user-access-details > summary { color: var(--ink); cursor: pointer; font-weight: 800; } .drive-shell-stage { background: #f2f4f1; border: 1px solid #d5ddd3; border-radius: 8px; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 760px; overflow: hidden; } .drive-shell-sidebar { background: #f8faf7; border-right: 1px solid #d9e0d6; display: flex; flex-direction: column; gap: 18px; padding: 18px 14px; } .drive-shell-brand { align-items: center; display: flex; gap: 10px; min-height: 44px; padding: 4px 6px; } .drive-shell-brand__mark { align-items: center; background: #257a44; border-radius: 8px; color: var(--gld-accent-on); display: inline-flex; font-weight: 800; height: 34px; justify-content: center; width: 34px; } .drive-shell-brand small { color: #667465; display: block; font-size: 0.76rem; font-weight: 700; } .drive-shell-menu { display: grid; gap: 4px; } .drive-shell-menu__item { align-items: center; border-radius: 8px; color: #34423a; display: flex; gap: 10px; min-height: 40px; padding: 8px 10px; text-decoration: none; } .drive-shell-menu__item--active, .drive-shell-menu__item:hover { background: #e6efe8; color: #1f6139; } .drive-shell-menu__item--tickets { border: 1px solid #b8d5bf; } .drive-shell-menu__item--disabled { color: #8a958d; } .drive-nav-icon { align-items: center; background: var(--bg-surface); border: 1px solid #d9e0d6; border-radius: 7px; color: #257a44; display: inline-flex; font-size: 0.72rem; font-weight: 800; height: 26px; justify-content: center; min-width: 26px; padding: 0 4px; } .drive-shell-sidebar__footer { border-top: 1px solid #d9e0d6; display: grid; gap: 8px; margin-top: auto; padding-top: 14px; } .drive-shell-sidebar__footer a { color: #42624f; font-size: 0.88rem; font-weight: 700; text-decoration: none; } .drive-shell-workspace { min-width: 0; } .drive-shell-topbar { align-items: center; background: var(--bg-surface); border-bottom: 1px solid #d9e0d6; display: flex; gap: 18px; justify-content: space-between; min-height: 72px; padding: 12px 22px; } .drive-account-select { display: grid; gap: 2px; min-width: 0; } .drive-account-select__label { color: #69766b; font-size: 0.76rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .drive-account-select strong { color: #20733f; font-size: 1.05rem; overflow-wrap: anywhere; } .drive-account-select small { color: #5e6b62; } .drive-shell-user { align-items: center; color: #465349; display: flex; gap: 10px; min-width: 0; } .drive-shell-user span:first-child { overflow-wrap: anywhere; } .drive-shell-gear { align-items: center; background: #f2f5f1; border: 1px solid #d9e0d6; border-radius: 50%; display: inline-flex; height: 34px; justify-content: center; width: 34px; } .drive-shell-content { display: grid; gap: 18px; padding: 22px; } .drive-shell-welcome { align-items: center; background: linear-gradient(135deg, #227a42, #42a461); border-radius: 8px; color: var(--gld-accent-on); display: flex; gap: 18px; justify-content: space-between; padding: 22px; } .drive-shell-welcome h1, .drive-shell-welcome p { margin: 0; } .drive-shell-welcome .eyebrow { color: #dff2e4; } .drive-shell-badge { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; font-size: 0.82rem; font-weight: 800; padding: 7px 10px; white-space: nowrap; } .drive-shell-alert { background: #fff8e5; border: 1px solid #e8d498; border-radius: 8px; color: #65501b; padding: 14px 16px; } .drive-shell-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .drive-shell-grid--hero { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .drive-shell-card, .drive-shell-module { background: var(--bg-surface); border: 1px solid #d9e0d6; border-radius: 8px; padding: 16px; } .drive-shell-card { display: grid; gap: 5px; } .drive-shell-card span, .drive-shell-card small { color: #647267; } .drive-shell-card strong { color: #1d2d23; overflow-wrap: anywhere; } .drive-shell-card--selected { border-color: #9fc9aa; box-shadow: inset 4px 0 0 #2d8a4c; } .drive-shell-module__header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; } .drive-shell-module h2, .drive-shell-module p { margin: 0; } .drive-shell-module p { color: #53615a; margin-top: 10px; } .drive-shell-module--tickets { border-color: #b8d5bf; } .drive-shell-context-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .drive-shell-context-list span { background: #f2f5f1; border: 1px solid #d9e0d6; border-radius: 999px; color: #53615a; font-size: 0.82rem; font-weight: 700; padding: 6px 9px; } .drive-account-list { display: grid; gap: 10px; } .drive-account-option { border: 1px solid #d9e0d6; border-radius: 8px; display: grid; gap: 4px; padding: 10px 12px; } .drive-account-option--selected { background: #eef7f3; border-color: #9ac7b1; } .drive-account-option span, .drive-account-option small { color: var(--muted); } .user-admin-edit__header code, .user-admin-edit code, .app-access-row code { overflow-wrap: anywhere; } .user-admin-edit .tag, .user-admin-edit .gld-pill, .user-admin-edit .status-pill { max-width: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal; word-break: break-word; } .user-admin-edit__nav { margin-bottom: 16px; } .user-admin-edit__savebar { margin: 0 0 16px; padding: 10px 12px; } .user-admin-edit__savebar [data-dirty-status] { font-size: 0.82rem; } .user-admin-edit__layout { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); } .user-admin-edit__main { display: grid; gap: 16px; } .user-admin-section { padding: 18px; } .user-admin-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .user-admin-form-grid label { align-content: start; } .user-admin-form-grid small { line-height: 1.35; margin-top: 0; } .user-admin-field { max-width: 420px; } .user-admin-selected-help { margin-top: 8px; } .readonly-field { color: var(--text); display: block; font-weight: 600; margin-top: 6px; } .user-admin-summary { inline-size: min(100%, 340px); min-width: 0; position: sticky; top: 100px; } .user-admin-summary .compact-details { grid-template-columns: minmax(96px, 128px) minmax(0, 1fr); } .user-admin-summary .compact-details dd { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .app-access-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .app-access-row { align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); display: grid; gap: 10px 14px; grid-template-columns: minmax(220px, 1fr) minmax(92px, auto) minmax(260px, 320px); padding: 12px; } .app-access-row:last-child { border-bottom: 0; } .app-access-row--enabled { background: #f4fbf7; } .app-access-row--planned { color: var(--muted); } .app-access-row__main { display: grid; gap: 3px; min-width: 0; } .app-access-row__main span, .app-access-row__select span, .app-access-row__details { color: var(--muted); font-size: 0.88rem; } .app-access-row__select { display: grid; gap: 4px; min-width: 0; } .app-access-row__select select { min-width: 0; width: 100%; } .app-access-row__select select:disabled { background: var(--bg-muted); color: var(--muted); cursor: not-allowed; } .app-access-row__actions { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; } .app-access-row__actions--status-only { grid-template-columns: auto; justify-content: end; } .app-access-row__details { margin-top: 4px; min-width: 0; } .app-access-row__details p { margin: 4px 0; } .app-access-row__details summary, .user-access-details > summary, .advanced-access-panel > summary { cursor: pointer; } .app-access-row__spacer { min-height: 1px; } .switch-field, .summary-panel label.switch-field { align-items: center; cursor: pointer; display: inline-flex; gap: 8px; justify-self: center; line-height: 1.2; margin-top: 0; white-space: nowrap; width: max-content; } .switch-field input { appearance: none; accent-color: var(--accent); background: var(--line-2); border: 1px solid #b8c2cc; border-radius: 999px; cursor: pointer; flex: none; height: 20px; position: relative; transition: background 0.15s ease, border-color 0.15s ease; width: 36px; } .switch-field input::before { background: var(--bg-surface); border-radius: 50%; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2); content: ""; height: 16px; left: 1px; position: absolute; top: 1px; transition: transform 0.15s ease; width: 16px; } .switch-field input:checked { background: var(--accent); border-color: var(--accent); } .switch-field input:checked::before { transform: translateX(16px); } .switch-field input:disabled { cursor: not-allowed; opacity: 0.6; } .switch-field:has(input:disabled) { color: var(--muted); cursor: not-allowed; } .switch-field input:focus-visible, .app-access-row select:focus-visible, .user-admin-edit input:focus-visible, .user-admin-edit textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .app-access-table--muted .app-access-row { grid-template-columns: minmax(180px, 1fr) auto; } .user-admin-client-picker--hidden { display: none; } .client-access-picker__values, .user-access-redesign .client-access-picker__values { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .user-admin-internal-workspaces { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; } @media (max-width: 1100px) { .user-admin-edit__layout { grid-template-columns: 1fr; } .user-admin-summary { inline-size: 100%; position: static; } } @media (max-width: 920px) { .drive-shell-stage { grid-template-columns: 1fr; } .drive-shell-sidebar { border-bottom: 1px solid #d9e0d6; border-right: 0; } .drive-shell-menu { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .drive-shell-topbar, .drive-shell-welcome { align-items: flex-start; flex-direction: column; } } .user-access-card { border: 1px solid var(--line); border-radius: 8px; padding: 22px; } .user-access-card h2, .user-access-card h3, .summary-panel h4 { letter-spacing: 0; margin: 0; } .user-access-card h2 { font-size: 1.25rem; } .user-access-card h3 { font-size: 1rem; margin-top: 20px; } .summary-panel h4 { font-size: 0.95rem; } .user-access-card__header, .summary-panel__header { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; } .user-access-card__header p { margin: 4px 0 0; } .compact-details { font-size: 0.92rem; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); margin-top: 16px; } .summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 12px; } .summary-panel { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; min-width: 0; padding: 16px; } .summary-panel--flat { background: var(--bg-surface); } .summary-panel p { margin: 10px 0 0; } .lifecycle-action-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 12px; } .lifecycle-action-card { align-content: start; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; min-width: 0; padding: 10px; } .lifecycle-action-card .core-input, .lifecycle-action-card .button { width: 100%; } .lifecycle-compact-note { margin-bottom: 10px; } .lifecycle-action-list { border: 1px solid var(--line); border-radius: 8px; display: grid; margin-top: 10px; overflow: hidden; } .lifecycle-action-row { align-items: center; background: var(--bg-surface); border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(170px, 1fr) minmax(170px, 240px) auto; min-width: 0; padding: 10px 12px; } .lifecycle-action-row:last-child { border-bottom: 0; } .lifecycle-action-row > div, .lifecycle-action-row label { display: grid; gap: 2px; min-width: 0; } .lifecycle-action-row .button { justify-self: end; } .user-access-edit-form { margin-top: 12px; } .user-access-save-toolbar, .user-access-save-footer { align-items: center; background: var(--bg-surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); display: flex; gap: 12px; justify-content: space-between; padding: 10px 12px; } .user-access-save-toolbar { position: sticky; top: 12px; z-index: 12; } .user-access-save-toolbar--dirty { border-color: #d9a441; } .user-access-save-toolbar__actions, .user-access-save-footer { flex-wrap: wrap; } .user-access-save-toolbar__actions { display: flex; gap: 8px; } .user-access-save-footer { justify-content: flex-end; margin: 14px 0; } .client-access-picker { background: var(--bg-inset); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 12px; margin-top: 14px; padding: 16px; } .client-access-picker__search { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(220px, 1fr) auto; } .client-access-picker__search label { color: var(--muted); display: grid; font-size: 0.86rem; font-weight: 700; gap: 6px; } .client-access-picker__search input { border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; min-height: 42px; min-width: 0; padding: 10px 12px; } .client-access-picker__results, .client-access-picker__selected-list { display: grid; gap: 8px; } .client-picker-option, .summary-panel label.client-picker-option { align-items: flex-start; background: var(--bg-surface); border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 10px; min-width: 0; padding: 10px 12px; width: 100%; } .client-picker-option--selected { background: #eef7f3; border-color: #9ac7b1; } .internal-workspace-picker { border-top: 1px solid var(--line); display: grid; gap: 10px; margin-top: 6px; padding-top: 14px; } .internal-workspace-option { background: var(--bg-inset); border-color: #b7c9e6; } .internal-workspace-option.client-picker-option--selected, .client-scope-row--internal { background: #eef5ff; border-color: #92b3df; } .client-picker-option input { accent-color: var(--accent); align-self: flex-start; flex: none; height: 16px; margin-top: 2px; min-height: 16px; width: 16px; } .client-picker-option span { display: grid; gap: 3px; min-width: 0; } .client-picker-option strong, .client-picker-option small { overflow-wrap: anywhere; word-break: break-word; } .client-picker-option small { color: var(--muted); font-size: 0.8rem; } .client-scope-row { background: var(--bg-surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 4px; margin: 8px 0; padding: 10px 12px; } .client-scope-row span, .client-scope-row small { color: var(--muted); } .form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 14px; } .form-grid label { color: var(--muted); display: grid; font-size: 0.86rem; font-weight: 700; gap: 6px; } .form-grid input, .form-grid select, .form-grid textarea { border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; min-width: 0; padding: 10px 12px; } .form-grid textarea { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 0.84rem; line-height: 1.45; resize: vertical; } .user-access-edit-form .button, .user-access-save-footer .button { margin-top: 14px; } .user-access-save-toolbar .button, .user-access-save-footer .button { margin-top: 0; } @media (max-width: 700px) { .pending-access-panel { padding: 20px; } .pending-access-brand, .pending-access-facts { grid-template-columns: 1fr; } .pending-status-badge { justify-self: start; } .pending-access-actions { align-items: stretch; display: grid; } .pending-access-actions .button, .pending-access-actions form, .pending-access-actions form .button { width: 100%; } .user-access-save-toolbar { align-items: stretch; flex-direction: column; } .user-access-save-toolbar__actions { width: 100%; } .user-access-save-toolbar .button, .user-access-save-toolbar__actions .button { white-space: normal; width: 100%; } .user-admin-form-grid, .app-access-row { grid-template-columns: 1fr; } .app-access-row__select, .app-access-row__select select { width: 100%; } .app-access-row__actions { align-items: start; grid-template-columns: 1fr; width: 100%; } .app-access-row__actions--status-only { justify-content: start; } .switch-field { margin-top: 0; } .topbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 16px 20px; } .page { padding: 28px 16px; } .login-shell, .login-grid, .core-home-shell, .platform-hero { grid-template-columns: 1fr; } .login-hero { min-height: 0; } .login-hero h1 { font-size: 2rem; } .core-home-rail { position: static; } .core-home-rail__nav { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .section-heading { display: grid; } .details { grid-template-columns: 1fr; } .admin-hero { display: grid; } .admin-hero__status { justify-content: flex-start; } .access-user-header, .access-page-header, .guided-app-card__head { display: grid; } .access-user-header__meta { justify-content: flex-start; } .access-page-header__actions { align-items: flex-start; justify-content: flex-start; } .access-create-layout { grid-template-columns: 1fr; } .access-review-rail { position: static; } .identity-grid, .scope-mode-grid { grid-template-columns: 1fr; } .password-reset form { grid-template-columns: 1fr; } .app-access-card__main { display: grid; } .app-access-card__control { width: 100%; } .client-access-picker__search { grid-template-columns: 1fr; } .admin-list-header, .admin-table-toolbar { display: grid; grid-template-columns: 1fr; } .admin-list-header__actions, .admin-search-form { justify-content: stretch; max-width: none; } .admin-filter-disclosure { justify-self: stretch; max-width: none; } .admin-filter-form--compact { grid-template-columns: 1fr; width: auto; } .admin-filter-disclosure[open] .admin-filter-form--compact { box-shadow: none; position: static; } .lifecycle-action-row { grid-template-columns: 1fr; } .lifecycle-action-row .button { justify-self: stretch; width: 100%; } .admin-user-table--list, .admin-user-table--list thead, .admin-user-table--list tbody, .admin-user-table--list tr, .admin-user-table--list th, .admin-user-table--list td { display: block; width: 100%; } .admin-user-table--list thead { display: none; } .admin-user-table--list tr { border-bottom: 1px solid var(--line); padding: 10px 0; } .admin-user-table--list td { border-bottom: 0; padding: 6px 0; } }