/* ============================================================================ SiteKings Customer Portal — global stylesheet (Phase 1) ---------------------------------------------------------------------------- Promoted from the inline .prt-* tokens that previously lived in portal_dashboard.html. Scoped under .portal-w so admin-side styles stay untouched. Token names match the existing .prt-* convention so legacy portal templates that still use those classes (e.g. .prt-health-pill, .prt-card-h) keep rendering identically until they migrate. ========================================================================== */ :root { --brand-primary: #58a6ff; --brand-accent: #1a73e8; } @keyframes dashFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Phase 6d a11y — global keyboard focus ring ───────────────────── */ .portal-w :focus-visible { outline: 2px solid var(--brand-primary, #58a6ff); outline-offset: 2px; } .sk-skip-link { position: absolute; top: -40px; left: 0; background: var(--brand-primary, #58a6ff); color: #fff; padding: 0.5rem 0.85rem; border-radius: 0 0 6px 0; z-index: 10000; text-decoration: none; font-weight: 600; font-size: 0.85rem; } .sk-skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; } /* Portal scope — every portal page wraps content in . */ .portal-w { --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --prt-sans: 'Inter', -apple-system, system-ui, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Status palette */ --prt-on: #22c55e; --prt-off: #ef4444; --prt-warn: #f59e0b; --prt-accent: var(--brand-primary, #58a6ff); --prt-mute: #8b949e; /* Surfaces */ --prt-bg: #0f1117; --prt-surface: #161b22; --prt-surface-2: #1c222b; --prt-border: #30363d; --prt-border-soft:#21262d; --prt-text: #e1e4e8; --prt-text-muted: #8b949e; /* Layout */ --prt-sidebar-w: 240px; --prt-topbar-h: 56px; --prt-radius: 10px; --prt-radius-sm: 6px; --prt-radius-lg: 14px; font-family: var(--prt-sans); letter-spacing: 0; color: var(--prt-text); background: var(--prt-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .portal-w .prt-card { animation: dashFadeIn 0.3s ease forwards; } .prt-welcome { font-size: 1.3rem; font-weight: 600; letter-spacing: 0; margin-bottom: 0.2rem; } .prt-subtitle { color: var(--prt-mute); margin-bottom: 1.5rem; } .prt-loc-section { margin-bottom: 1.5rem; } .prt-label-inline { display: flex; align-items: center; gap: 0.5rem; } .prt-icon-inline { vertical-align: middle; margin-right: 4px; } .loc-dot.is-online { background: #34c759; } .loc-dot.is-offline { background: #8b949e; } .prt-ticket-count { color: #ff9f0a; } .prt-sub-location { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0.6rem 0.9rem; background: rgba(88,166,255,0.06); border: 1px solid var(--prt-border); border-left: 3px solid var(--prt-accent); border-radius: 8px; } .prt-sub-location-text { font-size: 0.82rem; color: var(--prt-mute); } .prt-sub-location-link { font-weight: 600; font-size: 0.85rem; color: var(--prt-accent); text-decoration: none; } .prt-stat-value { font-size: 2rem; font-weight: 700; color: var(--prt-accent); } .prt-stat-caption { font-size: 0.85rem; color: var(--prt-mute); } .prt-list-row { padding: 6px 0; border-bottom: 1px solid var(--prt-border-soft); } .prt-list-row.is-clickable, .prt-click-row { cursor: pointer; } .prt-list-meta { font-size: 0.8rem; color: var(--prt-mute); } .prt-list-meta-sm { font-size: 0.75rem; color: var(--prt-mute); } .prt-inline-muted { color: var(--prt-mute); } .prt-small-muted { font-size: 0.82rem; color: var(--prt-mute); } .prt-pay-hint { font-size: 0.68rem; color: #d2a038; } .prt-doc-link { color: var(--prt-text); text-decoration: none; font-weight: 500; } .prt-badge-gap { margin-left: 6px; } .prt-flex-between { display: flex; justify-content: space-between; } .prt-ad-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; } .prt-ad-sync { font-size: 0.82rem; color: var(--prt-mute); } .prt-ad-sync strong { color: var(--prt-text); font-weight: 500; } .prt-ad-warning { font-size: 0.82rem; color: #ff9f0a; } .prt-note { font-size: 0.75rem; color: var(--prt-mute); margin-top: 0.5rem; } .prt-full-card { grid-column: 1 / -1; } .prt-scroll-x { overflow-x: auto; } .prt-machine-table { min-width: 700px; } .prt-machine-name { display: flex; align-items: center; gap: 6px; } .prt-online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .prt-online-dot.is-online { background: #3fb950; box-shadow: 0 0 4px rgba(63,185,80,0.4); } .prt-online-dot.is-offline { background: #8b949e; } .prt-machine-link { font-weight: 500; } .prt-os-text { font-size: 0.82rem; color: #c9d1d9; } .prt-metric-cell.is-wide { min-width: 130px; } .prt-metric-cell.is-mid { min-width: 110px; } .prt-metric-cell.is-narrow { min-width: 70px; } .prt-meter-label { font-size: 0.78rem; color: var(--prt-mute); margin-bottom: 3px; } .prt-meter { height: 4px; border-radius: 2px; background: var(--prt-border); overflow: hidden; } .prt-meter-fill { height: 100%; border-radius: 2px; } .prt-meter-fill.is-ok { background: #3fb950; } .prt-meter-fill.is-warn { background: #ff9f0a; } .prt-meter-fill.is-danger { background: #f85149; } .prt-meter-fill.is-ram-ok { background: #58a6ff; } .prt-meter-fill.is-cpu-ok { background: #a371f7; } .prt-nowrap { white-space: nowrap; } .prt-backup-grid { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; } .prt-backup-stat { flex: 1; text-align: center; padding: 0.5rem; border-radius: 6px; } .prt-backup-stat.is-fresh { background: rgba(63,185,80,0.10); border: 1px solid rgba(63,185,80,0.25); } .prt-backup-stat.is-stale { background: rgba(255,159,10,0.10); border: 1px solid rgba(255,159,10,0.25); } .prt-backup-stat.is-failed { background: rgba(248,81,73,0.10); border: 1px solid rgba(248,81,73,0.25); } .prt-backup-num { font-size: 1.5rem; font-weight: 700; } .prt-backup-stat.is-fresh .prt-backup-num { color: #3fb950; } .prt-backup-stat.is-stale .prt-backup-num { color: #ff9f0a; } .prt-backup-stat.is-failed .prt-backup-num { color: #f85149; } .prt-backup-label { font-size: 0.72rem; color: var(--prt-mute); } .prt-backup-total { font-size: 0.78rem; color: var(--prt-mute); } .prt-install-copy { font-size: 0.85rem; color: var(--prt-mute); margin-bottom: 0.75rem; } .prt-installer-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Customer portal machine detail */ .prt-mach-w { --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --prt-sans: 'Inter', -apple-system, system-ui, sans-serif; --prt-on: #22c55e; --prt-off: #ef4444; --prt-warn: #f59e0b; --prt-accent: #58a6ff; --prt-mute: #8b949e; font-family: var(--prt-sans); letter-spacing: 0; } .prt-mach-w .prt-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 1.25rem; } .prt-mach-w .prt-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .prt-mach-w .prt-dot.on { background: var(--prt-on); box-shadow: 0 0 8px rgba(63,185,80,0.5); } .prt-mach-w .prt-dot.off { background: var(--prt-off); } .prt-mach-w .prt-hostname { color: var(--prt-mute); font-size: 0.9rem; font-weight: 400; margin-top: 2px; } .prt-mach-w .prt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .prt-mach-w .prt-card-h { font-family: var(--prt-mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--prt-mute); margin-bottom: 0.75rem; } .prt-mach-w .prt-field { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #21262d; font-size: 0.85rem; } .prt-mach-w .prt-field:last-child { border-bottom: none; } .prt-mach-w .prt-field-lbl { color: var(--prt-mute); } .prt-mach-w .prt-field-val { color: #e1e4e8; font-weight: 500; text-align: right; max-width: 60%; word-break: break-all; } .prt-mach-w .prt-alert-row { padding: 8px 0; border-bottom: 1px solid #21262d; font-size: 0.82rem; } .prt-mach-w .prt-alert-row:last-child { border-bottom: none; } .prt-mach-w .prt-sev { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; margin-right: 6px; font-family: var(--prt-mono); text-transform: uppercase; } .prt-mach-w .prt-sev-critical, .prt-mach-w .prt-sev-high { background: #5c1a1a; color: #f85149; } .prt-mach-w .prt-sev-warning, .prt-mach-w .prt-sev-medium { background: #3d3000; color: #d29922; } .prt-mach-w .prt-sev-info, .prt-mach-w .prt-sev-low { background: #0d2a44; color: #58a6ff; } .prt-mach-w .prt-no-data { color: var(--prt-mute); font-size: 0.85rem; padding: 8px 0; } .prt-mach-w .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; } .prt-mach-w .badge-success { background: #0d4429; color: #3fb950; } .prt-mach-w .badge-failed { background: #5c1a1a; color: #f85149; } .prt-mach-w .badge-running { background: #1a3a5c; color: #58a6ff; } .prt-mach-w .file-path-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; } .prt-mach-w .file-path-bar span { color: #8b949e; } .prt-mach-w .file-path-bar code { color: #58a6ff; font-family: monospace; flex: 1; word-break: break-all; } .prt-mach-w .file-quick-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .prt-mach-w .file-quick-btns button { background: #21262d; border: 1px solid #30363d; color: #e1e4e8; padding: 3px 10px; border-radius: 6px; font-size: 0.78rem; cursor: pointer; } .prt-mach-w .file-quick-btns button:hover { background: #30363d; } .prt-mach-w .file-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; } .prt-mach-w .file-table th { text-align: left; padding: 4px 8px; color: #8b949e; font-size: 0.72rem; border-bottom: 1px solid #30363d; font-family: var(--prt-mono); text-transform: uppercase; letter-spacing: 0.06em; } .prt-mach-w .file-table td { padding: 6px 8px; border-bottom: 1px solid #21262d; } .prt-mach-w .file-table tr:last-child td { border-bottom: none; } .prt-mach-w .file-row-dir td:first-child { cursor: pointer; color: #58a6ff; } .prt-mach-w .file-row-dir:hover, .prt-mach-w .file-row-file:hover { background: #1c2128; } .prt-mach-w #file-status-msg { font-size: 0.8rem; color: #8b949e; margin-top: 0.5rem; min-height: 1.2em; } .prt-mach-w .file-back-btn { background: none; border: none; color: #58a6ff; cursor: pointer; font-size: 0.82rem; padding: 0; margin-right: 0.5rem; } .prt-mach-w .file-back-btn:disabled { color: #8b949e; cursor: default; } .prt-mach-w .prt-file-card-space { margin-top: 1rem; } .prt-mach-w .prt-file-error { color: #f85149; } @media (max-width: 600px) { .prt-mach-w .prt-grid { grid-template-columns: 1fr; } } body.portal-w { margin: 0; padding: 0; min-height: 100vh; } .portal-w * { box-sizing: border-box; } /* ── Headings & links ──────────────────────────────────────────── */ .portal-w h1, .portal-w h2, .portal-w h3, .portal-w h4 { font-family: var(--prt-sans); letter-spacing: 0; color: var(--prt-text); margin: 0; } .portal-w h1 { font-size: 1.5rem; font-weight: 700; } .portal-w h2 { font-size: 1.15rem; font-weight: 600; } .portal-w h3 { font-size: 1rem; font-weight: 600; } .portal-w h4 { font-size: 0.9rem; font-weight: 600; } .portal-w a { color: var(--prt-accent); text-decoration: none; } .portal-w a:hover { text-decoration: underline; } /* ── Layout shell ──────────────────────────────────────────────── */ .portal-shell { display: grid; grid-template-columns: var(--prt-sidebar-w) 1fr; min-height: calc(100vh - var(--prt-topbar-h)); } .portal-main { padding: 1.25rem 1.5rem 2.5rem; max-width: 1400px; width: 100%; margin: 0 auto; } .portal-topbar { position: sticky; top: 0; z-index: 50; height: var(--prt-topbar-h); display: flex; align-items: center; gap: 1rem; padding: 0 1rem; background: var(--prt-surface); border-bottom: 1px solid var(--prt-border); } .portal-topbar .pt-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 0.95rem; color: var(--prt-text); text-decoration: none; } .portal-topbar .pt-brand img { height: 26px; width: auto; } .portal-topbar .pt-brand-mark { display: inline-block; width: 22px; height: 22px; border-radius: 5px; background: var(--prt-accent); } .portal-topbar .pt-search { flex: 1; max-width: 520px; } .portal-topbar .pt-search input { width: 100%; background: var(--prt-bg); border: 1px solid var(--prt-border); color: var(--prt-text); padding: 0.4rem 0.75rem; border-radius: var(--prt-radius-sm); font-size: 0.85rem; font-family: var(--prt-sans); } .portal-topbar .pt-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; } .portal-topbar .pt-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid transparent; border-radius: var(--prt-radius-sm); color: var(--prt-text-muted); cursor: pointer; } .portal-topbar .pt-iconbtn:hover { color: var(--prt-text); border-color: var(--prt-border); } .portal-topbar .pt-user { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.6rem; border-radius: var(--prt-radius-sm); font-size: 0.85rem; color: var(--prt-text); } .portal-topbar .pt-user-name { font-weight: 600; } .portal-topbar .pt-user-role { font-family: var(--prt-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--prt-text-muted); padding: 2px 6px; border: 1px solid var(--prt-border); border-radius: 4px; } .portal-topbar .pt-sidebar-toggle { display: none; } /* ── Sidebar ───────────────────────────────────────────────────── */ .portal-sidebar { background: var(--prt-surface); border-right: 1px solid var(--prt-border); padding: 0.85rem 0.6rem 2rem; overflow-y: auto; } .portal-sidebar .ps-link-placeholder { opacity: 0.55; cursor: not-allowed; } .portal-sidebar .ps-brand-logo { padding: 0.75rem 1rem; border-bottom: 1px solid var(--prt-border); margin-bottom: 0.5rem; } .portal-sidebar .ps-brand-logo img { max-width: 100%; max-height: 48px; display: block; } .portal-sidebar .ps-group { margin-bottom: 1rem; } .portal-sidebar .ps-group-label { font-family: var(--prt-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--prt-text-muted); font-weight: 600; padding: 0.35rem 0.65rem; } .portal-sidebar .ps-link { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.7rem; font-size: 0.85rem; color: var(--prt-text); border-radius: var(--prt-radius-sm); text-decoration: none; transition: background 0.12s, color 0.12s; } .portal-sidebar .ps-link:hover { background: rgba(88,166,255,0.07); color: var(--prt-accent); text-decoration: none; } .portal-sidebar .ps-link.active { background: rgba(88,166,255,0.12); color: var(--prt-accent); font-weight: 600; } .portal-sidebar .ps-link svg { width: 14px; height: 14px; flex: 0 0 14px; } /* ── Breadcrumb ────────────────────────────────────────────────── */ .portal-breadcrumb { font-family: var(--prt-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--prt-text-muted); margin-bottom: 1rem; } .portal-breadcrumb .current { color: var(--prt-text); } /* ── Buttons ───────────────────────────────────────────────────── */ .portal-w .btn, .portal-w button.btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; font-family: var(--prt-sans); font-size: 0.85rem; font-weight: 500; border-radius: var(--prt-radius-sm); border: 1px solid var(--prt-border); background: var(--prt-surface); color: var(--prt-text); cursor: pointer; text-decoration: none; transition: border-color 0.12s, background 0.12s; } .portal-w .btn:hover { border-color: var(--prt-accent); } .portal-w .btn-primary { background: var(--prt-accent); border-color: var(--prt-accent); color: #fff; } .portal-w .btn-primary:hover { filter: brightness(1.08); } .portal-w .btn-ghost { background: transparent; border-color: transparent; color: var(--prt-text-muted); } .portal-w .btn-ghost:hover { color: var(--prt-text); border-color: var(--prt-border); } .portal-w .btn-danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.4); color: var(--prt-off); } .portal-w .btn-danger:hover { background: rgba(239,68,68,0.16); } /* ── Forms ─────────────────────────────────────────────────────── */ .portal-w input, .portal-w textarea, .portal-w select { width: 100%; background: var(--prt-bg); border: 1px solid var(--prt-border); color: var(--prt-text); font-family: var(--prt-sans); font-size: 0.88rem; padding: 0.5rem 0.75rem; border-radius: var(--prt-radius-sm); } .portal-w input:focus, .portal-w textarea:focus, .portal-w select:focus { outline: none; border-color: var(--prt-accent); box-shadow: 0 0 0 3px rgba(88,166,255,0.18); } /* ── Cards ─────────────────────────────────────────────────────── */ .portal-w .pbcard { background: var(--prt-surface); border: 1px solid var(--prt-border); border-radius: var(--prt-radius); margin-bottom: 1rem; overflow: hidden; } .portal-w .pbcard-header { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; border-bottom: 1px solid var(--prt-border); font-weight: 600; font-size: 0.92rem; } .portal-w .pbcard-body { padding: 1rem; } /* ── Pills / badges ────────────────────────────────────────────── */ .portal-w .pbpill { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--prt-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--prt-surface-2); color: var(--prt-text-muted); border: 1px solid var(--prt-border); } .portal-w .pbpill-on { color: var(--prt-on); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); } .portal-w .pbpill-off { color: var(--prt-off); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); } .portal-w .pbpill-warn { color: var(--prt-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); } .portal-w .pbpill-info { color: var(--prt-accent); border-color: rgba(88,166,255,0.4); background: rgba(88,166,255,0.08); } /* ── Tabs ──────────────────────────────────────────────────────── */ .portal-w .pbtabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--prt-border); margin-bottom: 1rem; } .portal-w .pbtab { padding: 0.55rem 0.95rem; font-size: 0.85rem; color: var(--prt-text-muted); text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--prt-sans); background: transparent; border-left: none; border-right: none; border-top: none; } .portal-w .pbtab:hover { color: var(--prt-text); } .portal-w .pbtab.active { color: var(--prt-accent); border-bottom-color: var(--prt-accent); font-weight: 600; } /* ── Tables ────────────────────────────────────────────────────── */ .portal-w .pbtable, .portal-w .tbl { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .portal-w .pbtable th, .portal-w .tbl th { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--prt-border); color: var(--prt-text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .portal-w .pbtable td, .portal-w .tbl td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--prt-border-soft); } .portal-w .pbtable tr:hover td, .portal-w .tbl tr:hover td { background: rgba(255,255,255,0.02); } /* ── Empty state ───────────────────────────────────────────────── */ .portal-w .pbempty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; padding: 2.25rem 1.25rem; border: 1px dashed var(--prt-border); border-radius: var(--prt-radius); color: var(--prt-text-muted); } .portal-w .pbempty-icon { font-size: 2rem; opacity: 0.7; } .portal-w .pbempty-title { color: var(--prt-text); font-weight: 600; font-size: 1rem; } .portal-w .pbempty-body { font-size: 0.88rem; max-width: 46ch; line-height: 1.5; } .portal-w .portal-empty-cta { margin-top: 0.5rem; } /* ── Portal macro helpers ─────────────────────────────────────── */ .portal-w .portal-page-header { margin-bottom: 1.25rem; } .portal-w .portal-page-header-body { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .portal-w .portal-page-subtitle { margin: 0.3rem 0 0; color: var(--prt-text-muted); font-size: 0.9rem; } .portal-w .portal-page-actions { display: inline-flex; gap: 0.5rem; align-items: center; flex-shrink: 0; } .portal-w .portal-metric-card { margin-bottom: 0; } .portal-w .portal-metric-body { display: flex; flex-direction: column; gap: 0.35rem; } .portal-w .portal-metric-value { font-family: var(--prt-mono); font-size: 1.8rem; font-weight: 700; letter-spacing: 0; line-height: 1.1; } .portal-w .portal-metric-delta { font-size: 0.78rem; color: var(--prt-text-muted); } .portal-w .portal-impersonation-banner { background: #f59e0b; color: #000; text-align: center; padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 1rem; } .portal-w .portal-impersonation-form { display: inline; margin: 0; } .portal-w .portal-impersonation-stop { background: #000; color: #f59e0b; border: none; padding: 0.2rem 0.75rem; border-radius: 4px; font-weight: 600; cursor: pointer; } /* ── Portal documents ─────────────────────────────────────────── */ .prt-doc-w { --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } .prt-doc-w .doc-row { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color 0.15s, transform 0.1s; color: inherit; } .prt-doc-w .doc-row:hover, .prt-doc-w .doc-row:focus-visible { border-color: var(--prt-accent, #58a6ff); transform: translateY(-1px); } .prt-doc-w .doc-icon { font-size: 1.4rem; flex-shrink: 0; } .prt-doc-w .doc-main { flex: 1; min-width: 0; } .prt-doc-w .doc-title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prt-doc-w .doc-meta { font-size: 0.75rem; color: #8b949e; margin-top: 3px; } .prt-doc-w .doc-type { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; background: #30363d; color: #8b949e; flex-shrink: 0; font-family: var(--prt-mono); text-transform: uppercase; letter-spacing: 0.06em; } .prt-doc-w .doc-chevron { color: #8b949e; font-size: 0.9rem; flex-shrink: 0; } .prt-doc-up { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; } .prt-doc-up h3 { margin: 0 0 10px 0; font-size: 1rem; } .prt-doc-up .form-row { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; } .prt-doc-up .form-row label { font-size: 0.8rem; color: #8b949e; } .prt-doc-up input[type=text], .prt-doc-up input[type=file] { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 8px 10px; color: #e6edf3; font-family: inherit; font-size: 0.9rem; } .prt-doc-up .muted { color: #8b949e; font-size: 0.8rem; } .prt-doc-w .doc-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .prt-doc-w .doc-dl { background: #21262d; color: #e6edf3; border: 1px solid #30363d; padding: 5px 12px; border-radius: 8px; font-size: 0.8rem; text-decoration: none; } .prt-doc-w .doc-dl:hover { border-color: var(--prt-accent, #58a6ff); } .prt-doc-up .form-row-inline { flex-direction: row; gap: 0.5rem; align-items: center; } /* ── Portal document detail ───────────────────────────────────── */ .prt-docv-w { --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } .prt-docv-w .doc-meta { font-size: 0.78rem; color: #8b949e; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .prt-docv-w .badge { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; background: #30363d; color: #8b949e; font-family: var(--prt-mono); text-transform: uppercase; letter-spacing: 0.06em; } .prt-docv-w .card-h { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8b949e; margin-bottom: 0.75rem; font-family: var(--prt-mono); } .prt-docv-w .doc-content { font-size: 0.9rem; line-height: 1.7; color: #e1e4e8; word-break: break-word; } .prt-docv-w .doc-content h1, .prt-docv-w .doc-content h2, .prt-docv-w .doc-content h3 { margin: 1rem 0 0.5rem; font-weight: 600; } .prt-docv-w .doc-content p { margin-bottom: 0.75rem; } .prt-docv-w .doc-content ul, .prt-docv-w .doc-content ol { padding-left: 1.5rem; margin-bottom: 0.75rem; } .prt-docv-w .doc-content li { margin-bottom: 0.25rem; } .prt-docv-w .doc-content a { color: #58a6ff; } .prt-docv-w .doc-content strong { font-weight: 600; } .prt-docv-w .doc-content em { font-style: italic; } .prt-docv-w .doc-content code { background: #0d1117; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 0.85em; } .prt-docv-w .doc-content blockquote { border-left: 3px solid #30363d; padding-left: 1rem; color: #8b949e; margin: 0.75rem 0; } .prt-docv-w .doc-content:empty::after { content: 'No content.'; color: #8b949e; } .prt-docv-w .edit-form { display: none; } .prt-docv-w .edit-form.active { display: block; } .prt-docv-w .view-content.hidden { display: none; } .prt-docv-w input[type=text], .prt-docv-w textarea { width: 100%; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 8px 12px; color: #e1e4e8; font-size: 0.9rem; font-family: inherit; transition: border-color 0.15s; } .prt-docv-w input[type=text]:focus, .prt-docv-w textarea:focus { outline: none; border-color: #58a6ff; } .prt-docv-w textarea { resize: vertical; min-height: 320px; line-height: 1.6; } .prt-docv-w .edit-button { padding: 4px 14px; font-size: 0.78rem; } .prt-docv-w .spaced-card { margin-bottom: 1rem; } .prt-docv-w .plain-note { font-size: 0.75rem; color: #8b949e; margin-top: 6px; } .prt-docv-w .form-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; } /* ── Portal receipt audit ─────────────────────────────────────── */ .prt-receipts .pr-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; } .prt-receipts .pr-pill.paid { background: rgba(63,185,80,0.15); color: #3fb950; } .prt-receipts .pr-pill.refund { background: rgba(231,76,60,0.15); color: #e74c3c; } .prt-receipts .pr-pill.stripe { background: rgba(74,158,255,0.15); color: #58a6ff; } .prt-receipts .mono { font-family: var(--prt-mono); } .prt-receipts .pr-amount { font-family: var(--prt-mono); text-align: right; font-weight: 600; } .prt-receipts .pr-card-spaced { margin-bottom: 1rem; } .prt-receipts .pr-summary { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; } .prt-receipts .pr-label { font-size: 0.72rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .prt-receipts .pr-value { font-size: 1.1rem; font-weight: 700; } .prt-receipts .pr-value.is-paid, .prt-receipts .pr-amount.is-paid { color: var(--prt-on); } .prt-receipts .pr-amount.is-refund { color: #e74c3c; } .prt-receipts .pr-back-wrap { margin-left: auto; } .prt-receipts .pr-link { color: var(--prt-accent); text-decoration: none; } .prt-receipts .pr-back-link { font-size: 0.85rem; } .prt-receipts .pr-right { text-align: right; } .prt-receipts .pr-reference { font-size: 0.72rem; color: var(--prt-text-muted); } .prt-receipts .pr-refund-pill { margin-left: 0.4rem; } .prt-receipts .pr-receipt-cell, .prt-receipts .pr-receipt-link { white-space: nowrap; } .prt-receipts .pr-receipt-link { font-size: 0.75rem; } .prt-receipts .pr-footnote { font-size: 0.75rem; color: var(--prt-text-muted); margin-top: 0.75rem; } /* ── Portal password vault ────────────────────────────────────── */ .pvp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; } .pvp-entry-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .pvp-favicon { width: 24px; height: 24px; border-radius: 3px; flex-shrink: 0; } .pvp-lock { font-size: 1.2rem; } .pvp-name { font-weight: 600; font-size: 0.92rem; } .pvp-folder { font-size: 0.7rem; color: var(--prt-text-muted); } .pvp-url-row { margin-bottom: 0.5rem; } .pvp-url { font-size: 0.8rem; color: var(--prt-accent); text-decoration: none; } .pvp-field { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .pvp-label { font-family: var(--prt-mono); font-size: 0.72rem; color: var(--prt-text-muted); width: 70px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.06em; } .pvp-value { font-family: var(--prt-mono); font-size: 0.85rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pvp-password { letter-spacing: 1px; } .pvp-totp { font-family: var(--prt-mono); font-size: 1rem; font-weight: 600; color: var(--prt-accent); flex: 1; } .pvp-icon-btn { padding: 2px 6px; } .pvp-notes-wrap { margin-top: 0.5rem; } .pvp-notes { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; padding: 0.5rem; margin-top: 0.4rem; font-size: 0.8rem; white-space: pre-wrap; color: var(--prt-text); } .pvp-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #161b22; border: 1px solid #30363d; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; z-index: 9999; color: #e1e4e8; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } @media (max-width: 520px) { .pvp-grid { grid-template-columns: 1fr; } .pvp-field { align-items: flex-start; flex-wrap: wrap; } .pvp-label { width: 100%; } .pvp-value, .pvp-totp { flex-basis: calc(100% - 5rem); } } /* ── Portal devices ───────────────────────────────────────────── */ .portal-devices-list { display: flex; flex-direction: column; gap: 0.75rem; } .portal-device-card { transition: border-color 0.15s; } .portal-device-row { display: flex; gap: 14px; align-items: center; } .portal-device-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; background: var(--prt-off, #ef4444); } .portal-device-status-dot.is-online { background: var(--prt-on, #22c55e); box-shadow: 0 0 8px rgba(63,185,80,0.5); } .portal-device-link { flex: 1; min-width: 0; text-decoration: none; color: inherit; } .portal-device-name { font-size: 1rem; font-weight: 600; margin-bottom: 4px; color: var(--prt-text); } .portal-device-meta { color: var(--prt-text-muted); font-size: 0.8rem; } .portal-device-reinstall-form { flex-shrink: 0; margin: 0; } .portal-device-reinstall-form .btn { font-size: 0.78rem; } .portal-device-chevron { color: var(--prt-text-muted); font-size: 0.85rem; flex-shrink: 0; } /* ── Portal tickets ───────────────────────────────────────────── */ .portal-ticket-filter { margin-bottom: 1rem; } .portal-ticket-filter .pbcard-body { display: flex; gap: 0.5rem; flex-wrap: wrap; } .portal-ticket-row { cursor: pointer; } .unread-dot { display: none; width: 8px; height: 8px; background: #1f6feb; border-radius: 50%; margin-left: 6px; vertical-align: middle; } .unread-dot.is-visible { display: inline-block; } .portal-ticket-created { font-size: 0.8rem; color: var(--prt-text-muted); } /* ── Portal footer ────────────────────────────────────────────── */ .portal-footer { margin-top: 3rem; padding: 1.25rem 1.5rem; border-top: 1px solid #30363d; background: #0f1117; font-size: 0.75rem; color: #8b949e; user-select: none; } .portal-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; } .portal-footer-meta, .portal-footer-stats { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .portal-footer a { color: #8b949e; } /* ── Portal status ────────────────────────────────────────────── */ .prt-status-w { --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } .prt-status-w .signal { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #21262d; } .prt-status-w .signal:last-child { border-bottom: none; } .prt-status-w .signal .label { flex: 1; font-weight: 600; } .prt-status-w .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .prt-status-w .dot.good { background: #3fb950; box-shadow: 0 0 8px rgba(63,185,80,0.5); } .prt-status-w .dot.warn { background: #d29922; } .prt-status-w .dot.bad { background: #f85149; } .prt-status-w .alert-row { padding: 10px 14px; border-bottom: 1px solid #21262d; font-size: 0.88rem; } .prt-status-w .alert-row:last-child { border-bottom: none; } .prt-status-w .signal-card { margin-bottom: 1rem; } .prt-status-w .flat-body { padding: 0; } .prt-status-w .alerts-head { padding: 12px 14px; border-bottom: 1px solid #21262d; } .prt-status-w .alerts-title { font-size: 0.78rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--prt-mono); font-weight: 600; margin: 0; } .prt-status-w .alert-row .sev { font-family: var(--prt-mono); font-size: 0.68rem; text-transform: uppercase; color: #8b949e; margin-right: 8px; letter-spacing: 0.06em; } .prt-status-w .alert-row .host { color: #8b949e; font-size: 0.75rem; margin-top: 4px; } /* ── Portal request form ──────────────────────────────────────── */ .req-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 0.5rem; } @media (min-width: 600px) { .req-cat-grid { grid-template-columns: repeat(3, 1fr); } } .req-cat-btn { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 12px; padding: 1rem 0.9rem; cursor: pointer; color: var(--prt-text, #e1e4e8); text-align: left; font-size: 0.92rem; font-weight: 600; font-family: inherit; transition: border-color 0.2s, transform 0.2s, background 0.2s; } .req-cat-btn:hover, .req-cat-btn.on { border-color: var(--prt-accent); transform: translateY(-2px); } .req-cat-btn.on { background: rgba(88,166,255,0.12); } .req-label { font-size: 0.78rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.45rem; margin-top: 1rem; } .req-label.flush { margin-top: 0; } .req-input, .req-textarea { width: 100%; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); color: var(--prt-text, #e1e4e8); font-size: 0.95rem; font-family: inherit; } .req-textarea { min-height: 120px; resize: vertical; } .req-submit { width: 100%; margin-top: 1.25rem; padding: 0.85rem; } /* ── Portal ticket form ───────────────────────────────────────── */ .ptn-card { max-width: 680px; } .ptn-field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; } .ptn-field.is-body { margin-bottom: 1.25rem; } .ptn-label { font-size: 0.82rem; font-weight: 600; color: var(--prt-text-muted); } .ptn-required { color: #f85149; } .ptn-input { padding: 0.6rem 0.75rem; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; color: #e1e4e8; font-family: inherit; } .ptn-text-input { font-size: 0.95rem; } .ptn-select { font-size: 0.9rem; cursor: pointer; } .ptn-textarea { font-size: 0.88rem; width: 100%; min-height: 140px; resize: vertical; line-height: 1.6; } .ptn-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .ptn-submit { padding: 0.65rem 1.75rem; font-size: 0.9rem; } .ptn-cancel { padding: 0.65rem 1.25rem; font-size: 0.9rem; } /* ── Portal profile ───────────────────────────────────────────── */ .portal-profile-card { margin-bottom: 1rem; } .portal-profile-check { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; } .portal-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.5rem; } .portal-profile-kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0.5rem; } .portal-profile-option { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } .portal-profile-kind-option { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } .portal-profile-desc { font-size: 0.9em; } .portal-profile-submit { margin-top: 1rem; } /* ── Portal help and knowledge base ───────────────────────────── */ .portal-help-back { margin-bottom: 1rem; } .portal-help-article { font-size: 0.95rem; line-height: 1.65; white-space: pre-wrap; } .portal-help-search-card, .portal-kb-search-card { margin-bottom: 1rem; } .portal-kb-search-card { margin-bottom: 1.25rem; } .portal-help-search, .portal-kb-search { width: 100%; padding: 0.7rem 0.9rem; border-radius: 8px; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); color: var(--prt-text, #e1e4e8); font-size: 0.95rem; } .portal-kb-search { padding: 0.7rem 1rem; } .portal-help-list, .portal-kb-stack { display: flex; flex-direction: column; gap: 0.6rem; } .portal-help-item, .portal-kb-card-link { color: inherit; display: block; text-decoration: none; transition: border-color 0.15s, transform 0.2s; } .portal-help-category, .portal-kb-eyebrow { color: var(--prt-accent); font-family: var(--prt-mono); font-size: 0.72rem; letter-spacing: 0.06em; margin-bottom: 0.25rem; text-transform: uppercase; } .portal-kb-eyebrow { margin-bottom: 0.2rem; } .portal-help-title, .portal-kb-title { font-size: 1rem; font-weight: 600; } .portal-help-summary { color: var(--prt-text-muted); font-size: 0.88rem; margin-top: 0.35rem; } .portal-kb-search-summary { color: var(--prt-text-muted); font-size: 0.88rem; margin-bottom: 0.75rem; } .portal-kb-search-query { color: var(--prt-text); } .portal-kb-link { color: var(--prt-accent); } .portal-kb-meta { color: var(--prt-text-muted); font-size: 0.78rem; } .portal-kb-tags { margin-top: 0.35rem; } .portal-kb-updated { margin-top: 0.25rem; } .portal-kb-section-title { color: var(--prt-text-muted); font-size: 0.76rem; letter-spacing: 0.06em; margin: 0 0 0.75rem; text-transform: uppercase; } .portal-kb-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 1.75rem; } .portal-kb-category-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem; } .portal-kb-category-description { color: var(--prt-text-muted); font-size: 0.82rem; } .portal-kb-category-count { color: var(--prt-accent); font-size: 0.78rem; margin-top: 0.5rem; } .portal-kb-article .portal-kb-actions-wrap { margin-bottom: 1rem; } .portal-kb-article .portal-kb-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .portal-kb-article .portal-kb-share-status { font-size: 0.78rem; color: var(--prt-text-muted); } .portal-kb-article .portal-kb-tags { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .portal-kb-article .portal-kb-tag { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 4px; padding: 0.15rem 0.55rem; font-size: 0.75rem; color: var(--prt-text-muted); font-family: var(--prt-mono); } .portal-kb-article .kb-article-body { font-size: 0.95rem; line-height: 1.7; color: var(--prt-text, #e1e4e8); } .portal-kb-article .kb-article-body h1, .portal-kb-article .kb-article-body h2, .portal-kb-article .kb-article-body h3, .portal-kb-article .kb-article-body h4, .portal-kb-article .kb-article-body h5, .portal-kb-article .kb-article-body h6 { margin: 1.25rem 0 0.5rem; font-weight: 600; line-height: 1.3; } .portal-kb-article .kb-article-body h1 { font-size: 1.45rem; } .portal-kb-article .kb-article-body h2 { font-size: 1.2rem; } .portal-kb-article .kb-article-body h3 { font-size: 1.05rem; } .portal-kb-article .kb-article-body p { margin: 0.6rem 0; } .portal-kb-article .kb-article-body ul, .portal-kb-article .kb-article-body ol { padding-left: 1.4rem; margin: 0.6rem 0; } .portal-kb-article .kb-article-body li { margin: 0.25rem 0; } .portal-kb-article .kb-article-body code { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.88em; font-family: var(--prt-mono, monospace); } .portal-kb-article .kb-article-body pre { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 8px; padding: 0.9rem 1rem; overflow-x: auto; margin: 0.75rem 0; } .portal-kb-article .kb-article-body pre code { background: none; border: none; padding: 0; font-size: 0.87em; line-height: 1.6; } .portal-kb-article .kb-article-body hr { border: none; border-top: 1px solid var(--prt-border, #30363d); margin: 1.25rem 0; } .portal-kb-article .kb-article-body a { color: var(--prt-accent, #58a6ff); text-decoration: underline; } .portal-kb-article .portal-kb-updated { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--prt-border, #30363d); font-size: 0.78rem; color: var(--prt-text-muted); } /* ── Portal password health ───────────────────────────────────── */ .ph-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .ph-card { margin-bottom: 1rem; } .ph-filter { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .ph-filter-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--prt-border, #30363d); border-radius: 8px; background: var(--prt-bg-deep, #0d1117); color: var(--prt-text, #e1e4e8); font-size: 0.85rem; } .ph-row.is-hidden { display: none; } .ph-muted { color: var(--prt-text-muted); } .ph-user-name { font-size: 0.72rem; } .ph-age-old { color: #ff3b30; font-weight: 600; } .ph-age-warn { color: #ff9f0a; } .ph-breach-count { font-size: 0.7em; } .ph-last-check { font-size: 0.75em; } .ph-inline-form { display: inline; margin: 0; } .ph-info-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.95rem; } .ph-info-text { margin-bottom: 0.75rem; color: var(--prt-text-muted); font-size: 0.85rem; line-height: 1.55; } .ph-info-link { color: var(--prt-accent); } .ph-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; } .ph-example { padding: 0.6rem; border-radius: 6px; background: var(--prt-bg-deep, #0d1117); } .ph-example-title { font-size: 0.85rem; font-weight: 600; } .ph-example-title.is-clean { color: #22c55e; } .ph-example-title.is-breached { color: #f59e0b; } .ph-example-title.is-high { color: #ef4444; } .ph-example-copy { color: var(--prt-text-muted); font-size: 0.75rem; } .ph-footnote { margin-top: 0.75rem; color: var(--prt-text-muted); font-size: 0.8rem; } /* ── Portal mesh health ───────────────────────────────────────── */ .prt-mesh-w { --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } .prt-mesh-w .chart-wrap { position: relative; height: 160px; margin-bottom: 0.5rem; } .prt-mesh-w .reporter-block { background: #0f1117; border: 1px solid #30363d; border-radius: 6px; margin-bottom: 0.75rem; overflow: hidden; } .prt-mesh-w .reporter-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; cursor: pointer; user-select: none; border-bottom: 1px solid #30363d; } .prt-mesh-w .reporter-header:hover { background: rgba(255, 255, 255, 0.03); } .prt-mesh-w .reporter-header .name { font-weight: 600; font-size: 0.88rem; flex: 1; } .prt-mesh-w .reporter-header .stats { font-size: 0.72rem; color: #8b949e; display: flex; gap: 0.75rem; } .prt-mesh-w .reporter-header .arrow { color: #8b949e; font-size: 0.7rem; transition: transform 0.2s; } .prt-mesh-w .reporter-header.is-open .arrow { transform: rotate(90deg); } .prt-mesh-w .reporter-body { padding: 0.5rem 0.9rem 0.75rem; display: none; } .prt-mesh-w .reporter-body.open { display: block; } .prt-mesh-w .peer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.35rem; margin-top: 0.4rem; } .prt-mesh-w .peer-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 0.8rem; background: rgba(255, 255, 255, 0.03); } .prt-mesh-w .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .prt-mesh-w .dot.green { background: #2ea043; } .prt-mesh-w .dot.red { background: #f85149; } .prt-mesh-w .dot.gray { background: #8b949e; } .prt-mesh-w .peer-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prt-mesh-w .peer-lat { font-size: 0.7rem; color: #8b949e; white-space: nowrap; } .prt-mesh-w .card-h { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #8b949e; margin-bottom: 0.75rem; font-family: var(--prt-mono); } .prt-mesh-w .mesh-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .prt-mesh-w .mesh-card { margin-bottom: 1rem; } .prt-mesh-w .mesh-ok { color: #2ea043; } .prt-mesh-w .mesh-fail { color: #f85149; } .prt-mesh-w .mesh-failed { margin-top: 0.75rem; padding: 0.5rem 0.6rem; background: rgba(248, 81, 73, 0.06); border: 1px solid rgba(248, 81, 73, 0.2); border-radius: 4px; } .prt-mesh-w .mesh-failed-title { font-size: 0.72rem; font-weight: 600; color: #f85149; margin-bottom: 0.3rem; } .prt-mesh-w .mesh-failed-peer { font-size: 0.78rem; color: #e1e4e8; margin-bottom: 0.2rem; } .prt-mesh-w .mesh-subtle, .prt-mesh-w .mesh-target-ip, .prt-mesh-w .mesh-error, .prt-mesh-w .mesh-report-time, .prt-mesh-w .mesh-empty { color: #8b949e; } .prt-mesh-w .mesh-target-ip, .prt-mesh-w .mesh-error { font-size: 0.72rem; } .prt-mesh-w .mesh-recent-note { font-size: 0.72rem; color: #8b949e; font-weight: 400; text-transform: none; letter-spacing: 0; font-family: inherit; } .prt-mesh-w .mesh-target-ip-inline { font-size: 0.7rem; } .prt-mesh-w .mesh-empty { font-size: 0.85rem; } /* ── Portal user management ───────────────────────────────────── */ .pm-card { margin-bottom: 1rem; } .pm-import-summary { padding: 0.75rem 1.25rem; cursor: pointer; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pm-import-body { padding-top: 0; } .pm-help { font-size: 0.8rem; color: var(--prt-text-muted); margin: 0 0 0.6rem; } .pm-inline-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; } .pm-input, .pm-select { padding: 0.5rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; color: var(--prt-text, #e1e4e8); font-size: 0.85rem; } .pm-file { padding: 0.4rem; } .pm-role-select { min-width: 140px; } .pm-section-title { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pm-subtitle { margin: 0.75rem 0 0.4rem; font-size: 0.85rem; } .pm-subtitle.first { margin-top: 0.5rem; } .pm-list { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; } .pm-form-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; } .pm-field { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 0.25rem; } .pm-field.email { min-width: 180px; } .pm-field.compact { flex: 0 0 auto; } .pm-label { font-size: 0.72rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--prt-mono); } .pm-legend-body { padding: 0.75rem 1.25rem; } .pm-legend { display: flex; gap: 1.5rem; font-size: 0.8rem; flex-wrap: wrap; color: var(--prt-text-muted); } .pm-ad { font-size: 0.7rem; color: var(--prt-text-muted); } .pm-inline-form { margin: 0; display: inline; } .pm-table-select { padding: 2px 4px; font-size: 0.75rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 4px; color: var(--prt-text, #e1e4e8); } .pm-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .pm-self { font-size: 0.75rem; color: var(--prt-text-muted); } .pm-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100; display: flex; justify-content: center; align-items: center; } .pm-modal-card { width: 100%; max-width: 420px; margin: 1rem; } .pm-modal-title { margin-bottom: 0.75rem; } .pm-modal-copy { margin-bottom: 1rem; font-size: 0.85rem; color: var(--prt-text-muted); } .pm-modal-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; } .pm-modal-label { font-size: 0.75rem; color: var(--prt-text-muted); } .pm-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; } /* ── Portal role administration ───────────────────────────────── */ .pra-card { margin-bottom: 1rem; } .pra-section-title { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pra-readonly { font-size: 0.75rem; color: var(--prt-text-muted); } .pra-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .pra-toolbar .pra-section-title { margin: 0; } .pra-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pra-inline-form { display: inline; margin: 0; } .pra-modal { position: fixed; inset: 0; z-index: 100; display: none; justify-content: center; align-items: flex-start; overflow-y: auto; padding: 2rem 1rem; background: rgba(0, 0, 0, 0.6); } .pra-modal.is-open { display: flex; } .pra-modal-card { width: 100%; max-width: 680px; } .pra-modal-title { margin-bottom: 0.75rem; } .pra-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .pra-label { font-family: var(--prt-mono); font-size: 0.72rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .pra-input { padding: 0.5rem; border: 1px solid var(--prt-border, #30363d); border-radius: 6px; background: var(--prt-bg-deep, #0d1117); color: var(--prt-text, #e1e4e8); font-size: 0.85rem; } .pra-check-panel { margin-bottom: 0.75rem; padding: 0.5rem; border: 1px solid var(--prt-border, #30363d); border-radius: 6px; background: var(--prt-bg-deep, #0d1117); } .pra-check-row { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--prt-text); cursor: pointer; } .pra-check-row input { margin-top: 0.2rem; } .pra-help { font-size: 0.75rem; color: var(--prt-text-muted); } .pra-permissions { margin-bottom: 0.75rem; } .pra-permissions .pra-label { display: block; margin-bottom: 0.5rem; } .pra-perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.4rem; max-height: 340px; overflow-y: auto; padding: 0.5rem; border: 1px solid var(--prt-border, #30363d); border-radius: 6px; } .pra-perm { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.8rem; color: var(--prt-text); } .pra-perm-code { font-family: var(--prt-mono); font-size: 0.72rem; color: var(--prt-text-muted); } .pra-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; } @media (max-width: 640px) { .pra-toolbar, .pra-form-actions { align-items: stretch; flex-direction: column; } .pra-toolbar .btn, .pra-form-actions .btn { width: 100%; } } /* ── Portal backups ───────────────────────────────────────────── */ .portal-backup-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; } .portal-backup-tile { padding: 1rem; border-radius: 8px; text-align: center; } .portal-backup-tile.fresh { background: rgba(63, 185, 80, 0.1); border: 1px solid rgba(63, 185, 80, 0.3); } .portal-backup-tile.stale { background: rgba(255, 159, 10, 0.1); border: 1px solid rgba(255, 159, 10, 0.3); } .portal-backup-tile.failed { background: rgba(248, 81, 73, 0.1); border: 1px solid rgba(248, 81, 73, 0.3); } .portal-backup-count { font-size: 2rem; font-weight: 700; } .portal-backup-label { font-size: 0.8rem; font-weight: 600; } .portal-backup-tile.fresh .portal-backup-count, .portal-backup-tile.fresh .portal-backup-label, .portal-backup-status.fresh { color: #3fb950; } .portal-backup-tile.stale .portal-backup-count, .portal-backup-tile.stale .portal-backup-label, .portal-backup-status.stale, .portal-backup-status.running, .portal-backup-status.partial { color: #ff9f0a; } .portal-backup-tile.failed .portal-backup-count, .portal-backup-tile.failed .portal-backup-label, .portal-backup-status.failed, .portal-backup-never { color: #f85149; } .portal-backup-sub { font-size: 0.72rem; color: var(--prt-mute); } .portal-backup-card { margin-bottom: 1.25rem; } .portal-backup-section-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--prt-mute); margin-bottom: 0.75rem; } .portal-backup-table-wrap { overflow-x: auto; } .portal-backup-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .portal-backup-table.compact { font-size: 0.82rem; } .portal-backup-table thead tr { border-bottom: 1px solid var(--prt-border); } .portal-backup-table tbody tr { border-bottom: 1px solid var(--prt-border-soft); } .portal-backup-table th { text-align: left; padding: 6px 8px; color: var(--prt-mute); font-weight: 500; } .portal-backup-table th.align-right, .portal-backup-table td.align-right { text-align: right; } .portal-backup-table td { padding: 8px; } .portal-backup-table.compact td { padding: 6px 8px; } .portal-backup-muted { color: var(--prt-mute); } .portal-backup-host { display: flex; align-items: center; gap: 6px; } .portal-backup-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .portal-backup-dot.fresh { background: #3fb950; } .portal-backup-dot.stale { background: #ff9f0a; } .portal-backup-dot.failed { background: #f85149; } .portal-backup-hostname { font-weight: 500; } .portal-backup-status { font-size: 0.75rem; padding: 2px 7px; border-radius: 4px; font-weight: 600; } .portal-backup-status.fresh { background: rgba(63, 185, 80, 0.13); } .portal-backup-status.stale, .portal-backup-status.running, .portal-backup-status.partial { background: rgba(255, 159, 10, 0.13); } .portal-backup-status.failed { background: rgba(248, 81, 73, 0.13); } .portal-backup-status-extra { font-size: 0.72rem; color: var(--prt-mute); margin-left: 4px; } .portal-backup-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .portal-backup-runs[hidden] { display: none; } .portal-backup-runs { margin-top: 0.75rem; overflow-x: auto; } .portal-backup-arrow { color: var(--prt-mute); font-size: 0.8rem; } @media (max-width: 720px) { .portal-backup-summary { grid-template-columns: 1fr; } } /* ── Portal network dashboard ─────────────────────────────────── */ .prt-net-w { --brand: #58a6ff; } .prt-net-w h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; } .prt-net-w .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .prt-net-w .sum-card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 0.9rem 0.75rem; text-align: center; } .prt-net-w .sum-val { font-size: 1.7rem; font-weight: 700; letter-spacing: 0; } .prt-net-w .sum-lbl { font-size: 0.72rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; } .prt-net-w .green { color: #34c759; } .prt-net-w .amber { color: #ff9f0a; } .prt-net-w .red { color: #ff3b30; } .prt-net-w .blue { color: var(--brand); } .prt-net-w .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; } .prt-net-w .card-title { font-size: 0.78rem; color: #8b949e; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .prt-net-w .card-count { font-size: 0.78rem; color: #8b949e; } .prt-net-w table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .prt-net-w th { text-align: left; padding: 7px 8px; border-bottom: 1px solid #30363d; color: #8b949e; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .prt-net-w td { padding: 9px 8px; border-bottom: 1px solid #21262d; vertical-align: middle; } .prt-net-w tr:last-child td { border-bottom: none; } .prt-net-w tr:hover td { background: rgba(255, 255, 255, 0.02); } .prt-net-w .mono { font-family: 'SF Mono', SFMono-Regular, Consolas, 'Courier New', monospace; font-size: 0.8rem; color: var(--brand); } .prt-net-w .muted { color: #8b949e; font-size: 0.78rem; } .prt-net-w .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; } .prt-net-w .badge-online, .prt-net-w .badge-enabled { background: #0d4429; color: #3fb950; } .prt-net-w .badge-offline { background: #2d1a1a; color: #f85149; } .prt-net-w .badge-cloud { background: #1a2d4a; color: #58a6ff; } .prt-net-w .badge-local { background: #1a3020; color: #3fb950; } .prt-net-w .badge-disabled { background: #30363d; color: #8b949e; } .prt-net-w .badge-wpa2 { background: #2a2020; color: #f0ad4e; } .prt-net-w .badge-wpa3 { background: #0d3a29; color: #34c759; } .prt-net-w .badge-open { background: #3d1a1a; color: #f85149; } .prt-net-w .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 5px; } .prt-net-w .dot-green { background: #34c759; box-shadow: 0 0 5px rgba(52, 199, 89, 0.4); } .prt-net-w .dot-red { background: #ff3b30; } .prt-net-w .dot-gray { background: #444; } .prt-net-w .ctrl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .prt-net-w .ctrl-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 1.1rem; } .prt-net-w .ctrl-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; } .prt-net-w .ctrl-meta { font-size: 0.78rem; color: #8b949e; display: flex; gap: 0.75rem; flex-wrap: wrap; } .prt-net-w .ctrl-stats { display: flex; gap: 1.25rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #21262d; } .prt-net-w .ctrl-stat { text-align: center; } .prt-net-w .ctrl-stat .val { font-size: 1.1rem; font-weight: 700; } .prt-net-w .ctrl-stat .lbl { font-size: 0.68rem; color: #8b949e; } .prt-net-w .section-card { margin-bottom: 1rem; } .prt-net-w .mono-compact { font-size: 0.73rem; } .prt-net-w .mono-xs { font-size: 0.72rem; } .prt-net-w .inline-icon { vertical-align: middle; margin-right: 6px; } .prt-net-w .tab-bar { display: flex; gap: 0.35rem; margin-bottom: 1rem; border-bottom: 1px solid #30363d; flex-wrap: wrap; } .prt-net-w .tab-btn { padding: 8px 14px; font-size: 0.85rem; color: #8b949e; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; } .prt-net-w .tab-btn.active, .prt-net-w .tab-btn:hover { color: var(--brand); border-bottom-color: var(--brand); } .prt-net-w .tab-panel { display: none; } .prt-net-w .tab-panel.active { display: block; } .prt-net-w .search-row { display: flex; gap: 0.75rem; margin-bottom: 0.9rem; } .prt-net-w .search-row input { flex: 1; background: #21262d; border: 1px solid #30363d; border-radius: 8px; color: #e1e4e8; padding: 7px 12px; font-size: 0.85rem; outline: none; } .prt-net-w .search-row input:focus { border-color: var(--brand); } .prt-net-w .sig { display: inline-flex; align-items: flex-end; gap: 2px; } .prt-net-w .sig-bar { display: inline-block; width: 4px; border-radius: 1px; } .prt-net-w .sig-bar-1 { height: 4px; } .prt-net-w .sig-bar-2 { height: 8px; } .prt-net-w .sig-bar-3 { height: 12px; } .prt-net-w .sig-bar-4 { height: 16px; } .prt-net-w .sig-off { background: #333; } .prt-net-w .sig-good .sig-on { background: #34c759; } .prt-net-w .sig-warn .sig-on { background: #ff9f0a; } .prt-net-w .sig-bad .sig-on { background: #ff3b30; } .prt-net-w .sig-readout { margin-left: 4px; } .prt-net-w .empty { color: #8b949e; font-size: 0.85rem; padding: 1.5rem 0; text-align: center; } .prt-net-w .topology-caption { font-size: 0.8rem; color: #8b949e; margin-bottom: 0.75rem; } .prt-net-w .topo-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: 6px; margin-bottom: 2px; } .prt-net-w .topo-row.is-offline { opacity: 0.6; } .prt-net-w .topo-indent { flex-shrink: 0; } .prt-net-w .topo-depth-0 { width: 0; } .prt-net-w .topo-depth-1 { width: 20px; } .prt-net-w .topo-depth-2 { width: 40px; } .prt-net-w .topo-branch { color: #30363d; margin-right: 0.2rem; } .prt-net-w .topo-name { font-weight: 400; } .prt-net-w .topo-name-gateway { font-weight: 600; } .prt-net-w .health-summary { margin-bottom: 1rem; } .prt-net-w .health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.65rem; } .prt-net-w .health-card { background: #161b22; border: 1px solid #21262d; border-radius: 10px; padding: 0.85rem; } .prt-net-w .health-card.is-offline { border-color: #2d1a1a; } .prt-net-w .health-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .prt-net-w .health-led { width: 8px; height: 8px; border-radius: 50%; background: #34c759; flex-shrink: 0; display: inline-block; } .prt-net-w .health-led.is-offline { background: #6b7280; } .prt-net-w .health-name { font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prt-net-w .health-model { margin-bottom: 0.4rem; font-size: 0.74rem; } .prt-net-w .health-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.4rem; font-size: 0.76rem; } .prt-net-w .health-label { color: #8b949e; } .prt-net-w .health-fw { font-size: 0.71rem; } .prt-net-w .vlan-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } .prt-net-w .vlan-chip { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 0.55rem 0.85rem; display: flex; align-items: center; gap: 0.45rem; } .prt-net-w .vlan-tag { font-size: 0.68rem; padding: 1px 5px; border-radius: 3px; background: #1a2d4a; color: #58a6ff; font-weight: 600; } .prt-net-w .vlan-name { font-weight: 500; font-size: 0.84rem; } .prt-net-w .vlan-subnet { font-size: 0.71rem; color: #8b949e; } .prt-net-w .vlan-purpose { font-size: 0.65rem; padding: 1px 4px; border-radius: 3px; background: #0d4429; color: #3fb950; } .prt-net-w .vlan-dhcp { font-size: 0.65rem; color: #34c759; } .prt-net-w .client-device-icon { margin-right: 4px; } .prt-net-w .dev-os-badge { font-size: 0.65rem; padding: 1px 4px; border-radius: 3px; background: #21262d; border: 1px solid #30363d; color: #8b949e; margin-left: 3px; } .prt-net-w .ssid-hidden { margin-left: 6px; font-size: 0.72rem; } @media (max-width: 768px) { .prt-net-w .ctrl-grid { grid-template-columns: 1fr; } .prt-net-w table { font-size: 0.75rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .prt-net-w th, .prt-net-w td { padding: 5px 6px; white-space: nowrap; } } /* ── Portal standalone auth pages ─────────────────────────────── */ .portal-auth-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1rem; position: relative; } .portal-auth-grid::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--prt-border, #1d2540) 1px, transparent 1px), linear-gradient(90deg, var(--prt-border, #1d2540) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.18; } .login-box, .invite-box { width: 100%; position: relative; z-index: 1; } .login-box { max-width: 420px; } .login-box-wide { max-width: 480px; } .invite-box { max-width: 440px; } .login-box .pbcard-body { padding: 2rem; } .login-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.5rem; } .login-brand-mark { width: 38px; height: 38px; border-radius: 9px; background: var(--prt-accent, #58a6ff); display: grid; place-items: center; font-size: 1rem; font-weight: 700; color: #000; font-family: var(--prt-mono); } .login-brand-logo { height: 38px; width: auto; border-radius: 6px; } .login-brand-name { font-size: 0.95rem; font-weight: 600; color: var(--prt-text); } .login-brand-sub { font-size: 0.72rem; color: var(--prt-text-muted); margin-top: 1px; } .login-box h1 { font-size: 1.25rem; margin-bottom: 0.35rem; } .login-sub { color: var(--prt-text-muted); font-size: 0.88rem; margin-bottom: 1.25rem; } .login-sub.is-hidden { display: none; } .login-box label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--prt-text-muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; } .login-box input[type="text"], .login-box input[type="password"] { width: 100%; padding: 0.65rem 0.85rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 8px; color: var(--prt-text, #e1e4e8); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color 0.15s; } .login-box input[type="text"] { font-family: var(--prt-mono, monospace); letter-spacing: 0.15em; text-align: center; } .login-box input:focus { border-color: var(--prt-accent); } .login-field { margin-bottom: 1rem; } .login-btn { display: block; width: 100%; padding: 0.75rem; margin-top: 0.5rem; text-align: center; } .sso-providers { margin-bottom: 1.25rem; } .sso-providers .login-btn { margin-bottom: 0.5rem; } .turnstile-wrap { margin-bottom: 1rem; } .login-flash { padding: 0.6rem 0.85rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.85rem; background: rgba(248, 81, 73, 0.12); border-left: 3px solid #f85149; color: #f85149; } .login-flash.warning { background: rgba(245, 159, 0, 0.12); border-left-color: #f59f00; color: #f59f00; } .login-divider { border: none; border-top: 1px solid var(--prt-border, #30363d); margin: 1.5rem 0 1.25rem; } .login-footer { text-align: center; font-size: 0.78rem; color: var(--prt-text-muted); } .login-footer a { color: var(--prt-accent); text-decoration: none; cursor: pointer; } .login-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--prt-text-muted); text-decoration: none; margin-bottom: 1.25rem; } .login-back:hover { color: var(--prt-text); } .login-box .qr-block { text-align: center; margin: 1rem 0; padding: 1rem; background: #fff; border-radius: 8px; } .login-box .qr-block img { max-width: 200px; height: auto; } .login-box .secret-block { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; padding: 0.65rem 0.85rem; font-family: var(--prt-mono, monospace); font-size: 0.85rem; color: var(--prt-text); margin: 0.5rem 0 1rem; word-break: break-all; user-select: all; } .notice { padding: 0.75rem 0.85rem; border-radius: 8px; background: rgba(88, 166, 255, 0.08); border-left: 3px solid var(--prt-accent, #58a6ff); color: var(--prt-text); font-size: 0.85rem; margin-bottom: 1.25rem; } .invite-box h1 { font-size: 1.4rem; margin-bottom: 0.5rem; } .invite-box h1 span { color: var(--prt-accent); } .invite-sub { color: var(--prt-text-muted); font-size: 0.85rem; margin-bottom: 1.25rem; } .invite-box label { display: block; font-size: 0.82rem; margin-bottom: 0.3rem; color: var(--prt-text-muted); } .invite-box input[type="password"] { width: 100%; padding: 0.6rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; color: var(--prt-text, #e1e4e8); font-size: 0.92rem; margin-bottom: 0.9rem; } .invite-box input[type="password"]:focus { border-color: var(--prt-accent); outline: none; } .invite-box .btn-primary { width: 100%; padding: 0.72rem; } .invite-error { padding: 0.6rem 0.8rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.85rem; background: #3d1a1a; border-left: 3px solid #f85149; color: #f85149; } .invite-back { display: block; text-align: center; margin-top: 1rem; color: var(--prt-accent); text-decoration: none; font-size: 0.85rem; } .copyright { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.75rem 1.5rem; text-align: center; font-size: 0.7rem; color: var(--prt-text-muted); z-index: 1; } /* ── Portal notification preferences ──────────────────────────── */ .portal-notifications-copy { margin-bottom: 1rem; } .portal-notifications-list { display: flex; flex-direction: column; gap: 0.6rem; } .notification-option { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } .notification-option.required { opacity: 0.6; cursor: default; } .notification-option input { margin-top: 2px; flex-shrink: 0; } .notification-required-badge { font-size: 0.75em; margin-left: 0.4rem; vertical-align: middle; background: var(--muted-bg, #444); padding: 0 0.4rem; border-radius: 3px; } .notification-description { font-size: 0.9em; } .portal-notifications-submit { margin-top: 1.25rem; } /* ── Portal API keys ──────────────────────────────────────────── */ .pak-card { margin-bottom: 1rem; } .pak-new-key { border: 1px solid var(--prt-accent, #58a6ff); } .pak-heading { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pak-heading-accent { margin-bottom: 0.4rem; color: var(--prt-accent, #58a6ff); } .pak-copy { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--prt-text-muted); } .pak-key-row { display: flex; gap: 0.5rem; align-items: center; } .pak-control { padding: 0.5rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; color: var(--prt-text, #e1e4e8); font-size: 0.85rem; } .pak-key-input { flex: 1; font-family: var(--prt-mono); } .pak-form-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; } .pak-field { display: flex; flex-direction: column; gap: 0.25rem; } .pak-field-grow { flex: 1; min-width: 200px; } .pak-label { font-size: 0.72rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--prt-mono); } .pak-select { min-width: 140px; } .pak-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--prt-text-muted); } .pak-prefix { font-family: var(--prt-mono); font-size: 0.78rem; } .pak-inline-form { margin: 0; display: inline; } .pak-revoked-summary { padding: 0.75rem 1.25rem; cursor: pointer; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pak-revoked-body { padding-top: 0; } .pak-revoked-row { opacity: 0.6; } @media (max-width: 640px) { .pak-key-row, .pak-form-row { align-items: stretch; flex-direction: column; } } /* ── Portal AD password reset ─────────────────────────────────── */ .pad-card { margin-bottom: 1rem; } .pad-warning { border-left: 3px solid #d2a038; } .pad-warning-text { font-size: 0.85rem; color: #d2a038; } .pad-section-title { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .pad-small { font-size: 0.8rem; } .pad-sid { font-size: 0.75rem; color: var(--prt-text-muted); } .pad-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 100; justify-content: center; align-items: center; } .pad-modal.is-open { display: flex; } .pad-dialog { width: 100%; max-width: 420px; margin: 1rem; } .pad-copy { margin-bottom: 1rem; font-size: 0.85rem; color: var(--prt-text-muted); } .pad-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; } .pad-label { font-size: 0.75rem; color: var(--prt-text-muted); } .pad-input { padding: 0.5rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; color: var(--prt-text, #e1e4e8); font-size: 0.85rem; } .pad-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; } /* ── Portal asset requests ────────────────────────────────────── */ .portal-assets-form-card { margin-bottom: 1rem; } .portal-assets-section-title { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .portal-assets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .portal-assets-field { display: flex; flex-direction: column; gap: 0.25rem; } .portal-assets-field-spaced { margin-bottom: 0.75rem; } .portal-assets-label { font-size: 0.72rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--prt-mono); } .portal-assets-note { font-size: 0.78rem; color: var(--prt-text-muted); margin-top: 0.25rem; } .portal-assets-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(127,127,127,0.15); } .portal-assets-status.is-pending, .portal-assets-status.is-cancelled { color: var(--prt-text-muted); } .portal-assets-status.is-approved { color: #39d353; } .portal-assets-status.is-denied { color: #f85149; } .portal-assets-status.is-fulfilled { color: #58a6ff; } .portal-assets-summary { cursor: pointer; font-size: 0.85rem; } .portal-assets-decision-form { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; } .portal-assets-actions { display: flex; gap: 0.4rem; } /* ── Portal audit log ─────────────────────────────────────────── */ .portal-audit-filter-card { margin-bottom: 1rem; } .portal-audit-filter-form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; } .portal-audit-field { display: flex; flex-direction: column; gap: 0.25rem; } .portal-audit-label { font-size: 0.72rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--prt-mono); } .portal-audit-input { padding: 0.5rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; color: var(--prt-text, #e1e4e8); font-size: 0.85rem; } .portal-audit-select { min-width: 160px; } .portal-audit-mono { font-family: var(--prt-mono); font-size: 0.78rem; } .portal-audit-code { font-family: var(--prt-mono); font-size: 0.75rem; } .portal-audit-detail { font-family: var(--prt-mono); font-size: 0.72rem; color: var(--prt-text-muted); } /* ── Portal approvals ─────────────────────────────────────────── */ .approvals-title { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .approvals-note { margin-top: 0.75rem; font-size: 0.78rem; color: var(--prt-text-muted); } /* ── Portal payment methods ──────────────────────────────────── */ .prt-pm .pm-row { display: flex; align-items: center; gap: 14px; padding: 0.85rem 0; border-bottom: 1px solid #21262d; } .prt-pm .pm-row:last-child { border-bottom: none; } .prt-pm .pm-icon { font-size: 1.6rem; flex-shrink: 0; } .prt-pm .pm-info { flex: 1; min-width: 0; } .prt-pm .pm-info .brand { font-weight: 600; font-size: 0.9rem; text-transform: capitalize; } .prt-pm .pm-info .sub { color: var(--prt-text-muted); font-size: 0.8rem; margin-top: 2px; } .prt-pm .pm-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .prt-pm .pm-card-section { margin-bottom: 1rem; } .prt-pm .pm-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--prt-text-muted); margin-bottom: 0.85rem; } .prt-pm .pm-inline-form { display: inline; } .prt-pm .pm-btn { display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: all 0.15s; } .prt-pm .pm-btn-default { background: #1a3a5c; color: #58a6ff; } .prt-pm .pm-btn-default:hover { background: #1d4573; } .prt-pm .pm-btn-danger { background: #3d1414; color: #f85149; } .prt-pm .pm-btn-danger:hover { background: #5c1a1a; } .prt-pm .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .prt-pm .form-group { display: flex; flex-direction: column; gap: 4px; } .prt-pm .form-group.full { grid-column: 1/-1; } .prt-pm label { font-size: 0.78rem; color: var(--prt-text-muted); } .prt-pm input, .prt-pm select { background: #0f1117; border: 1px solid #30363d; border-radius: 8px; color: #e1e4e8; padding: 8px 10px; font-size: 0.85rem; width: 100%; font-family: inherit; } .prt-pm input:focus, .prt-pm select:focus { outline: none; border-color: #58a6ff; } .prt-pm .btn-submit { background: #238636; color: #fff; border: none; border-radius: 8px; padding: 9px 18px; font-size: 0.85rem; font-weight: 600; cursor: pointer; margin-top: 0.75rem; } .prt-pm .btn-submit:hover { background: #2ea043; } .prt-pm .pm-disclaimer { color: var(--prt-text-muted); font-size: 0.75rem; margin-top: 0.75rem; } /* ── Portal invoices ──────────────────────────────────────────── */ .pvi-summary-grid, .prt-inv-open .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .pvi-stat-body, .prt-inv-open .summary-body { text-align: center; } .pvi-stat-value, .prt-inv-open .stat-val { font-size: 1.6rem; font-weight: 700; color: var(--prt-accent); font-family: var(--prt-mono); } .pvi-stat-value.is-paid, .prt-inv-open .stat-on { color: var(--prt-on); } .pvi-stat-value.is-warn, .prt-inv-open .stat-warn { color: var(--prt-warn); } .prt-inv-open .stat-accent { color: var(--prt-accent); } .pvi-stat-label, .prt-inv-open .stat-lbl { font-size: 0.62rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 0.2rem; font-weight: 600; } .pvi-card-gap, .prt-inv-open .invoice-card { margin-bottom: 1rem; } .pvi-filter-body { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pvi-section-title, .prt-inv-open .section-heading { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .prt-inv-open .section-heading { font-size: 0.75rem; font-weight: 600; } .prt-inv-open .section-heading-tight { margin: 0; } .pvi-title-count, .prt-inv-open .section-count { color: #6e7681; font-weight: 400; font-size: 0.8rem; margin-left: 0.5rem; } .prt-inv-open .section-count { margin-left: 0.4rem; } .pvi-row-link { cursor: pointer; } .pvi-link, .prt-inv-open .invoice-link { color: var(--prt-accent); text-decoration: none; } .prt-inv-open .invoice-link { font-weight: 600; } .pvi-empty, .prt-inv-open .empty-state, .prt-inv-open .paid-empty { color: var(--prt-text-muted); font-size: 0.9rem; } .prt-inv-open .pay-btn { display: inline-block; padding: 0.3rem 0.85rem; background: var(--prt-accent); color: #fff; border: none; border-radius: 6px; font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.6; } .prt-inv-open .pay-btn:hover { opacity: 0.85; } .prt-inv-open .overdue-row { background: rgba(248,81,73,0.06); } .prt-inv-open .overdue-badge { margin-left: 4px; font-size: 0.68rem; background: #f851491a; color: #f85149; border: 1px solid #f8514933; border-radius: 4px; padding: 1px 5px; } .prt-inv-open .money, .prt-inv-open .balance { font-family: var(--prt-mono); } .prt-inv-open .balance { font-weight: 600; color: var(--prt-warn); } .prt-inv-open .action-cell { white-space: nowrap; } .prt-inv-open .pay-form { margin: 0; display: inline; } .prt-inv-open .pdf-btn { background: var(--prt-text-muted); margin-left: 4px; } .prt-inv-open .paid-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .prt-inv-open .paid-toggle { background: none; border: 1px solid #30363d; color: var(--prt-text-muted); border-radius: 6px; padding: 3px 12px; font-size: 0.75rem; cursor: pointer; } .prt-inv-open .paid-section { display: none; } .prt-inv-open .paid-section.is-open { display: block; } .prt-inv-open .paid-table { margin-top: 0.5rem; } .prt-inv-open .paid-empty { margin-top: 0.5rem; } /* ── Portal invoice detail ────────────────────────────────────── */ .prt-inv-detail .totals-table { width: 280px; margin-left: auto; margin-top: 0.75rem; font-size: 0.85rem; border-collapse: collapse; } .prt-inv-detail .totals-table td { padding: 5px 8px; border-bottom: none; } .prt-inv-detail .totals-table .grand td { font-weight: 700; font-size: 1rem; border-top: 1px solid #30363d; padding-top: 10px; } .prt-inv-detail .text-right { text-align: right; } .prt-inv-detail .muted { color: var(--prt-text-muted); } .prt-inv-detail .positive { color: var(--prt-on); } .prt-inv-detail .field-row { display: flex; gap: 2rem; flex-wrap: wrap; } .prt-inv-detail .field { flex: 1; min-width: 140px; } .prt-inv-detail .field .lbl { font-size: 0.72rem; text-transform: uppercase; color: var(--prt-text-muted); margin-bottom: 4px; } .prt-inv-detail .field .val { font-size: 0.9rem; } .prt-inv-detail .total-amount { font-size: 2rem; font-weight: 700; color: var(--prt-accent); font-family: var(--prt-mono); } .prt-inv-detail .total-label { font-size: 0.75rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .prt-inv-detail .notes { font-size: 0.85rem; color: var(--prt-text-muted); white-space: pre-wrap; line-height: 1.5; } .prt-inv-detail .action-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; } .prt-inv-detail .action-btn { display: inline-block; padding: 0.3rem 0.85rem; border: 1px solid #30363d; color: var(--prt-text); border-radius: 6px; font-size: 0.78rem; font-weight: 600; text-decoration: none; line-height: 1.6; background: transparent; cursor: pointer; } .prt-inv-detail .action-btn.muted { color: var(--prt-text-muted); } .prt-inv-detail .invoice-card { margin-bottom: 1rem; } .prt-inv-detail .invoice-card.pay-card { border-color: #d2a038; } .prt-inv-detail .invoice-card.paid-card { border-color: #3fb950; } .prt-inv-detail .summary-body { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; } .prt-inv-detail .summary-status { margin-bottom: 8px; } .prt-inv-detail .invoice-number { margin: 0; font-size: 1.5rem; font-weight: 700; } .prt-inv-detail .summary-total { text-align: right; } .prt-inv-detail .section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--prt-text-muted); margin-bottom: 0.75rem; } .prt-inv-detail .section-title.pay { color: #d2a038; } .prt-inv-detail .section-title.paid { color: #3fb950; } .prt-inv-detail .attachment-list { display: grid; gap: 0.5rem; } .prt-inv-detail .attachment-link { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; border: 1px solid #30363d; border-radius: 8px; text-decoration: none; color: var(--prt-text); } .prt-inv-detail .attachment-meta { color: var(--prt-text-muted); font-size: 0.78rem; } .prt-inv-detail .pay-copy, .prt-inv-detail .paid-copy { font-size: 0.85rem; color: var(--prt-text-muted); } .prt-inv-detail .pay-copy { margin-bottom: 1rem; } .prt-inv-detail .paid-copy { margin: 0; } .prt-inv-detail .pay-balance { color: var(--prt-text); } .prt-inv-detail .pay-link { display: inline-block; background: #3fb950; color: #fff; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.95rem; margin-bottom: 1rem; } .prt-inv-detail .stripe-copy { font-size: 0.75rem; color: var(--prt-text-muted); margin-bottom: 1rem; } .prt-inv-detail .request-details { margin-bottom: 1rem; } .prt-inv-detail .request-summary { font-size: 0.82rem; color: var(--prt-text-muted); cursor: pointer; } .prt-inv-detail .form-block { margin-bottom: 0.75rem; } .prt-inv-detail .form-label { font-size: 0.78rem; color: var(--prt-text-muted); display: block; margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; } .prt-inv-detail .method-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid #30363d; border-radius: 8px; cursor: pointer; margin-bottom: 0.4rem; transition: border-color 0.15s; } .prt-inv-detail .method-option:hover { border-color: #58a6ff; } .prt-inv-detail .method-radio { accent-color: #58a6ff; } .prt-inv-detail .method-name { font-size: 0.85rem; } .prt-inv-detail .method-exp { font-size: 0.75rem; color: var(--prt-text-muted); } .prt-inv-detail .default-tag { font-size: 0.7rem; color: var(--prt-accent); margin-left: 4px; } .prt-inv-detail .add-card-copy { font-size: 0.82rem; color: var(--prt-text-muted); margin-bottom: 0.75rem; } .prt-inv-detail .inline-link { color: var(--prt-accent); } .prt-inv-detail .payment-note { width: 100%; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 8px 10px; color: #e1e4e8; font-size: 0.85rem; font-family: inherit; resize: vertical; } .prt-inv-detail .submit-payment { background: #d2a038; border: none; color: #0f1117; font-weight: 700; padding: 10px 24px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; transition: background 0.15s; } .prt-inv-detail .submit-payment:hover { background: #e6b84a; } /* ── Portal executive dashboard ───────────────────────────────── */ @media print { body { background: white !important; color: black !important; } .portal-topbar, .portal-sidebar, .portal-breadcrumb, ._portal_footer, nav, header.pbcard ~ * .btn { display: none !important; } .pbcard { border-color: #ccc !important; background: white !important; box-shadow: none !important; } .prt-health-num { color: black !important; } } .pe-banner-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; } .pe-banner-dot.green { background: #3fb950; box-shadow: 0 0 14px rgba(63, 185, 80, 0.55); } .pe-banner-dot.yellow { background: #d29922; box-shadow: 0 0 14px rgba(210, 153, 34, 0.4); } .pe-banner-dot.red { background: #f85149; box-shadow: 0 0 14px rgba(248, 81, 73, 0.5); } .pe-bar-row { margin: 0.5rem 0; } .pe-bar-row .l { font-size: 0.85rem; margin-bottom: 0.25rem; display: flex; justify-content: space-between; color: var(--prt-text); } .pe-bar-row .bar { height: 6px; background: var(--prt-border, #21262d); border-radius: 3px; overflow: hidden; } .pe-bar-row .bar .fill { height: 100%; background: var(--prt-accent, #58a6ff); } .pe-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--prt-border-soft, #21262d); font-size: 0.9rem; } .pe-row:last-child { border-bottom: none; } .pe-card-gap { margin-bottom: 1.25rem; } .pe-status-body { display: flex; gap: 1rem; align-items: center; } .pe-status-title { font-size: 1.3rem; font-weight: 700; margin: 0; } .pe-status-text { color: var(--prt-text-muted); font-size: 0.9rem; margin-top: 0.25rem; } .pe-insight-card { margin-bottom: 1.25rem; border-left: 3px solid var(--prt-accent, #58a6ff); } .pe-label-accent { color: var(--prt-accent); } .pe-insight-copy { font-size: 0.92rem; line-height: 1.55; color: var(--prt-text); margin-top: 0.5rem; } .pe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .pe-grid-wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .pe-grid-final { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .pe-muted-note { color: var(--prt-text-muted); font-size: 0.88rem; margin-top: 0.5rem; } .pe-muted-value { color: var(--prt-text-muted); } .pe-posture { font-size: 2.6rem; font-weight: 700; letter-spacing: 0; margin-top: 0.5rem; } .pe-posture.good { color: #3fb950; } .pe-posture.warn { color: #d29922; } .pe-posture.bad { color: #f85149; } .pe-posture-note { color: var(--prt-text-muted); font-size: 0.85rem; margin-top: 0.25rem; } /* ── Portal MFA setup ─────────────────────────────────────────── */ .mfa-w { max-width: 720px; } .mfa-card { padding: 1.5rem; } .mfa-card + .mfa-card { margin-top: 1.25rem; } .mfa-card h2 { font-size: 1rem; margin: 0 0 0.5rem; letter-spacing: 0; } .mfa-card p { color: var(--prt-mute); font-size: 0.88rem; margin: 0 0 1rem; } .mfa-w .qr-block { text-align: center; margin: 1rem 0; padding: 1rem; background: #fff; border-radius: 8px; } .mfa-w .qr-block img { max-width: 200px; height: auto; } .mfa-w .secret-block { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; padding: 0.65rem 0.85rem; font-family: var(--prt-mono, monospace); font-size: 0.85rem; margin: 0.5rem 0 1rem; word-break: break-all; user-select: all; } .mfa-w .codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.75rem 0 1rem; } .mfa-w .codes-grid code { background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); padding: 0.55rem 0.75rem; border-radius: 6px; font-size: 0.95rem; letter-spacing: 0.05em; text-align: center; } .mfa-w .pill { display: inline-block; padding: 0.18rem 0.5rem; font-size: 0.72rem; border-radius: 999px; background: rgba(35, 197, 94, 0.12); color: #23c55e; margin-left: 0.5rem; vertical-align: middle; } .mfa-w .pill-off { background: rgba(248, 81, 73, 0.12); color: #f85149; } .mfa-w .form-row { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; } .mfa-w .form-row label { display: block; font-size: 0.75rem; color: var(--prt-mute); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; } .mfa-w .form-row input { padding: 0.55rem 0.75rem; background: var(--prt-bg-deep, #0d1117); border: 1px solid var(--prt-border, #30363d); border-radius: 6px; color: var(--prt-text); font-family: var(--prt-mono, monospace); } .mfa-w .important { padding: 0.75rem 0.85rem; border-radius: 8px; background: rgba(245, 159, 0, 0.1); border-left: 3px solid #f59f00; color: var(--prt-text); font-size: 0.85rem; margin-bottom: 1rem; } .mfa-title { font-size: 1.3rem; font-weight: 600; letter-spacing: 0; margin-bottom: 1.5rem; } .mfa-flash { margin-bottom: 1rem; padding: 0.6rem 0.85rem; border-radius: 8px; background: rgba(88, 166, 255, 0.1); border-left: 3px solid var(--prt-accent); } .mfa-label { font-size: 0.75rem; color: var(--prt-mute); text-transform: uppercase; letter-spacing: 0.04em; } .mfa-muted { color: var(--prt-mute); font-size: 0.82rem; } .mfa-inline-form { display: inline; } .mfa-secondary-action { margin-left: 0.4rem; } /* ── Portal ticket detail ─────────────────────────────────────── */ .portal-ticket-card { margin-bottom: 1rem; } .portal-ticket-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.85rem; color: var(--prt-text-muted); } .portal-ticket-description { margin-top: 1rem; font-size: 0.9rem; white-space: pre-wrap; color: #c9d1d9; } .portal-feed-toast { position: fixed; top: 1rem; right: 1rem; z-index: 9999; background: #1f6feb; color: #fff; padding: 0.6rem 1.1rem; border-radius: 8px; font-size: 0.85rem; box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .portal-feed-toast[hidden], .portal-ticket-hidden[hidden] { display: none; } .portal-ticket-section-title { font-size: 0.9rem; color: var(--prt-text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .portal-comment-thread { display: flex; flex-direction: column; gap: 0.75rem; } .portal-comment { padding: 0.75rem 1rem; border-left: 3px solid #30363d; background: #0d1117; border-radius: 0 6px 6px 0; } .portal-comment-new { border-left-color: #1f6feb; } .portal-comment-head { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; } .portal-comment-time { font-size: 0.75rem; color: var(--prt-text-muted); font-weight: 400; } .portal-comment-body { font-size: 0.85rem; margin-top: 0.5rem; white-space: pre-wrap; } .portal-no-comments { color: var(--prt-text-muted); font-size: 0.85rem; margin-bottom: 1rem; } .portal-comment-title { font-size: 0.9rem; margin-bottom: 0.75rem; } .portal-comment-input { padding: 0.5rem; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #e1e4e8; font-size: 0.85rem; width: 100%; min-height: 100px; resize: vertical; font-family: inherit; } .portal-comment-submit { margin-top: 0.75rem; } /* ── Portal install help ──────────────────────────────────────── */ .inst-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .inst-tab { cursor: pointer; } .inst-tab.active { background: var(--brand-primary, #58a6ff); color: #fff; border-color: var(--brand-primary, #58a6ff); } .inst-pane { margin-bottom: 1rem; } .inst-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; } .inst-copy { font-size: 0.85rem; color: var(--prt-text-muted); margin: 0 0 0.6rem; } .inst-command-row { display: flex; gap: 0.5rem; align-items: stretch; } .inst-command { font-family: var(--prt-mono, monospace); font-size: 0.78rem; flex: 1; padding: 0.55rem 0.75rem; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #e1e4e8; } .inst-list { margin: 1rem 0 0; padding-left: 1.25rem; font-size: 0.85rem; color: var(--prt-text-muted); line-height: 1.8; } .inst-help-card { margin-top: 0.5rem; } .inst-help-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.5rem; } .inst-help-copy { font-size: 0.85rem; color: var(--prt-text-muted); margin: 0 0 0.75rem; } /* ── Drawer ────────────────────────────────────────────────────── */ .portal-w .pbdrawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: var(--prt-surface); border-left: 1px solid var(--prt-border); transform: translateX(100%); transition: transform 0.18s ease; z-index: 100; overflow-y: auto; } .portal-w .pbdrawer.open { transform: translateX(0); } .portal-w .pbdrawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--prt-border); font-weight: 600; } .portal-w .pbdrawer-body { padding: 1rem; } /* ── Flash messages ────────────────────────────────────────────── */ .portal-w .flash { padding: 0.6rem 1rem; border-radius: var(--prt-radius-sm); margin-bottom: 1rem; font-size: 0.85rem; } .portal-w .flash-success { background: rgba(34,197,94,0.09); border-left: 3px solid var(--prt-on); color: var(--prt-on); } .portal-w .flash-error { background: rgba(239,68,68,0.09); border-left: 3px solid var(--prt-off); color: var(--prt-off); } /* ── Section labels (mono caps) ────────────────────────────────── */ .portal-w .prt-label { font-family: var(--prt-mono); font-size: 0.66rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; margin-bottom: 0.4rem; } /* ── Legacy .prt-* tokens — preserved so unmigrated templates still render correctly. These will be folded into the canonical .pb*/.portal-w hooks as templates migrate in later phases. ── */ .portal-w .prt-dash-w { /* legacy alias kept for parity */ } .portal-w .prt-header-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0 0.7rem; border-bottom: 1px solid var(--prt-border); margin-bottom: 0.7rem; flex-wrap: wrap; } .portal-w .prt-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--prt-sans); } .portal-w .prt-h1 span { color: var(--prt-accent); } .portal-w .prt-nav { display: flex; gap: 0.4rem; align-items: center; font-size: 0.82rem; flex-wrap: wrap; } .portal-w .prt-nav a { color: var(--prt-text-muted); text-decoration: none; padding: 5px 10px; border-radius: var(--prt-radius-sm); transition: all 0.15s ease; font-family: var(--prt-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; } .portal-w .prt-nav a:hover { color: var(--prt-accent); background: rgba(88,166,255,0.08); } .portal-w .prt-nav a.active { color: var(--prt-accent); background: rgba(88,166,255,0.12); font-weight: 500; } .portal-w .prt-nav .prt-divider { color: var(--prt-border); font-size: 0.75rem; } .portal-w .prt-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .portal-w .prt-health-pill { background: var(--prt-surface); border: 1px solid var(--prt-border); border-radius: 12px; padding: 1rem 0.9rem; text-align: center; display: flex; flex-direction: column; align-items: center; font-family: var(--prt-mono); transition: border-color 0.15s; } .portal-w .prt-health-pill:hover { border-color: var(--prt-accent); } .portal-w .prt-health-num { font-size: 1.8rem; font-weight: 700; letter-spacing: 0; line-height: 1.1; } .portal-w .prt-health-lbl { font-size: 0.65rem; color: var(--prt-text-muted); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 0.2rem; font-weight: 600; } .portal-w .prt-health-num.on { color: var(--prt-on); } .portal-w .prt-health-num.off { color: var(--prt-off); } .portal-w .prt-health-num.warn { color: var(--prt-warn); } .portal-w .prt-health-num.accent { color: var(--prt-accent); } .portal-w .prt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } .portal-w .prt-card { background: var(--prt-surface); border: 1px solid var(--prt-border); border-radius: var(--prt-radius); padding: 1rem; } .portal-w .prt-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; font-weight: 600; font-size: 0.92rem; } .portal-w .prt-card-h a { font-size: 0.75rem; font-family: var(--prt-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--prt-text-muted); } .portal-w .prt-card-h a:hover { color: var(--prt-accent); text-decoration: none; } /* Legacy badges used by portal_dashboard etc. */ .portal-w .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; } .portal-w .badge-open, .portal-w .badge-paid { background: #0d4429; color: #3fb950; } .portal-w .badge-sent { background: #1a3a5c; color: #58a6ff; } .portal-w .badge-draft { background: #30363d; color: #8b949e; } .portal-w .badge-overdue { background: #5c1a1a; color: #f85149; } .portal-w .badge-role { padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .portal-w .badge-role-admin, .portal-w .badge-role-customer_admin { background: #3d1a6e; color: #b87aff; } .portal-w .badge-role-accountant { background: #1a3a5c; color: #58a6ff; } .portal-w .badge-role-helpdesk { background: #3a2a0a; color: #d2a038; } .portal-w .badge-role-user { background: #30363d; color: #8b949e; } .portal-w .empty { color: var(--prt-text-muted); font-size: 0.85rem; padding: 1rem 0; } .portal-w .traffic-light { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; } .portal-w .traffic-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .portal-w .traffic-green { background: #34c759; box-shadow: 0 0 4px rgba(52,199,89,0.4); } .portal-w .traffic-amber { background: #ff9f0a; box-shadow: 0 0 4px rgba(255,159,10,0.4); } .portal-w .traffic-red { background: #ff3b30; box-shadow: 0 0 4px rgba(255,59,48,0.4); } /* Location switcher (preserved from portal_dashboard.html) */ .portal-w .loc-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; margin-bottom: 1.5rem; } .portal-w .loc-card { background: var(--prt-surface); border: 1px solid var(--prt-border); border-radius: var(--prt-radius); padding: 0.85rem 1rem; text-decoration: none; display: block; transition: border-color 0.15s, transform 0.1s; } .portal-w .loc-card:hover { border-color: var(--prt-accent); transform: translateY(-1px); text-decoration: none; } .portal-w .loc-card.current { border-color: var(--prt-accent); background: rgba(88,166,255,0.07); } .portal-w .loc-card-name { font-weight: 600; font-size: 0.88rem; color: var(--prt-text); margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portal-w .loc-card-meta { font-size: 0.74rem; color: var(--prt-text-muted); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .portal-w .loc-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } /* ── Phase 3: Global search ─────────────────────────────────── */ .portal-search { position: relative; } .portal-search .portal-search-toggle { display: none; } .portal-search input { width: 100%; background: var(--prt-bg); border: 1px solid var(--prt-border); color: var(--prt-text); padding: 0.4rem 0.75rem; border-radius: var(--prt-radius-sm); font-size: 0.85rem; font-family: var(--prt-sans); } .portal-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 70vh; overflow-y: auto; background: var(--prt-surface); border: 1px solid var(--prt-border); border-radius: var(--prt-radius-sm); box-shadow: 0 6px 24px rgba(0,0,0,0.35); z-index: 60; padding: 4px; } .portal-search-empty { padding: 0.6rem 0.8rem; color: var(--prt-text-muted); font-size: 0.82rem; } .portal-search-result { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--prt-radius-sm); text-decoration: none; color: var(--prt-text); } .portal-search-result:hover { background: rgba(88,166,255,0.08); color: var(--prt-accent); text-decoration: none; } .portal-search-result .psr-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--prt-text-muted); flex: 0 0 22px; } .portal-search-result .psr-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .portal-search-result .psr-title { font-size: 0.86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portal-search-result .psr-subtitle { font-size: 0.72rem; color: var(--prt-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portal-search-result .psr-type { font-family: var(--prt-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--prt-text-muted); border: 1px solid var(--prt-border); border-radius: 4px; padding: 1px 5px; flex: 0 0 auto; } /* Mobile: collapse to icon button that expands on tap. */ @media (max-width: 640px) { .portal-search { flex: 0 0 auto; } .portal-search .portal-search-toggle { display: inline-flex; } .portal-search input { display: none; } .portal-search.expanded { position: absolute; top: 6px; left: 8px; right: 8px; z-index: 70; } .portal-search.expanded .portal-search-toggle { display: none; } .portal-search.expanded input { display: block; } } /* ── Phase 3: Sidebar pin/unpin buttons ─────────────────────── */ .portal-sidebar .ps-link { position: relative; } .portal-sidebar .ps-pin-btn, .portal-sidebar .ps-unpin-btn { margin-left: auto; background: transparent; border: none; color: var(--prt-text-muted); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 0.85rem; line-height: 1; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; } .portal-sidebar .ps-link:hover .ps-pin-btn, .portal-sidebar .ps-link:hover .ps-unpin-btn, .portal-sidebar .ps-pin-btn:focus, .portal-sidebar .ps-unpin-btn:focus { opacity: 1; } .portal-sidebar .ps-pin-btn:hover, .portal-sidebar .ps-unpin-btn:hover { background: rgba(88,166,255,0.12); color: var(--prt-accent); } .portal-sidebar .ps-group-pinned .ps-group-label { color: var(--prt-accent); } /* ============================================================ Privacy Mode (6.77.12) — customer portal copy. Mirrors style.css rules so the portal layer also responds to body.privacy-mode (portal pages only load portal.css). ============================================================ */ /* No filter on body — traps position:fixed (sidebar/topbar/modals). Desaturation via vars + per-element filter on imagery only. */ body.privacy-mode { --brand-primary: #888 !important; --brand-accent: #555 !important; --accent: #888 !important; --primary: #888 !important; --link: #aaa !important; --success: #888 !important; --warning: #999 !important; --danger: #aaa !important; --info: #888 !important; --prt-accent: #888 !important; --prt-on: #888 !important; --prt-off: #aaa !important; --prt-warn: #999 !important; } body.privacy-mode img, body.privacy-mode svg, body.privacy-mode video, body.privacy-mode picture { filter: grayscale(100%) brightness(0.95); } body.privacy-mode .dash-org-logo, body.privacy-mode .dash-org-avatar, body.privacy-mode .card-bg-logo, body.privacy-mode .org-brand-logo, body.privacy-mode .portal-brand-logo, body.privacy-mode .brand-watermark, body.privacy-mode .org-logo-img, body.privacy-mode .pt-brand img, body.privacy-mode img[src*="customer_logos"], body.privacy-mode img[src*="/brand/"], body.privacy-mode img[alt="SiteKings"] { visibility: hidden !important; background: #2a2a2a !important; border-radius: 4px !important; } body.privacy-mode .dash-org-avatar, body.privacy-mode .dash-org-avatar-fallback { background: #444 !important; color: transparent !important; } body.privacy-mode .org-name-display, body.privacy-mode .cust-card-name, body.privacy-mode .portal-brand-name, body.privacy-mode .pt-brand span:not([style*="background"]) { color: transparent !important; background: #2a2a2a !important; border-radius: 3px; user-select: none; } body.privacy-mode .btn-primary, body.privacy-mode .pbpill-on, body.privacy-mode .pbpill-warn, body.privacy-mode .pbpill-off { background: #555 !important; color: #ddd !important; border-color: #666 !important; } body.privacy-mode a { color: #aaa !important; } body.privacy-mode a:hover { color: #ddd !important; } body.privacy-mode .status-badge, body.privacy-mode .alert-badge, body.privacy-mode [class*="badge-"] { filter: grayscale(100%) !important; } body.privacy-mode .privacy-mode-toggle { filter: none !important; background: #ff9800 !important; color: #000 !important; } body.privacy-mode { outline: 2px solid #ff9800; outline-offset: -2px; } /* Customer portal Guide widget */ #portal-guide-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 9998; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--brand-primary, #58a6ff); color: #fff; cursor: pointer; font-size: 1.4rem; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: center; justify-content: center; } #portal-guide-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,0.5); } #portal-guide-panel { position: fixed; right: 20px; bottom: 84px; z-index: 9999; width: 380px; max-width: calc(100vw - 40px); height: 560px; max-height: calc(100vh - 140px); background: #161b22; border: 1px solid #30363d; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); display: none; flex-direction: column; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; } #portal-guide-panel.open { display: flex; } #portal-guide-head { padding: 12px 16px; border-bottom: 1px solid #30363d; display: flex; align-items: center; justify-content: space-between; background: rgba(88,166,255,0.05); } #portal-guide-head h3 { font-size: 0.95rem; font-weight: 600; margin: 0; color: #e1e4e8; } .portal-guide-sub { font-size: 0.7rem; color: #8b949e; margin-top: 2px; } #portal-guide-close { background: transparent; border: 0; color: #8b949e; font-size: 1.3rem; cursor: pointer; padding: 0 4px; } #portal-guide-close:hover { color: #e1e4e8; } #portal-guide-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #0d1117; } .portal-guide-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: 0.85rem; word-break: break-word; line-height: 1.4; } .portal-guide-user { align-self: flex-end; background: var(--brand-primary, #58a6ff); color: #fff; border-bottom-right-radius: 2px; } .portal-guide-bot { align-self: flex-start; background: #21262d; color: #e1e4e8; border: 1px solid #30363d; border-bottom-left-radius: 2px; } .portal-guide-meta { font-size: 0.7rem; color: #8b949e; margin-top: 4px; } .portal-guide-bot table { width: 100%; font-size: 0.75rem; margin-top: 6px; border-collapse: collapse; } .portal-guide-bot th, .portal-guide-bot td { padding: 3px 6px; border-bottom: 1px solid #30363d; text-align: left; } .portal-guide-bot th { background: rgba(255,255,255,0.04); font-size: 0.7rem; color: #8b949e; text-transform: uppercase; } #portal-guide-input-wrap { padding: 10px 12px; border-top: 1px solid #30363d; display: flex; gap: 6px; background: #161b22; } #portal-guide-input { flex: 1; background: #0d1117; color: #e1e4e8; border: 1px solid #30363d; border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; font-family: inherit; resize: none; outline: none; } #portal-guide-input:focus { border-color: var(--brand-primary, #58a6ff); } #portal-guide-send { background: var(--brand-primary, #58a6ff); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: filter 0.15s; } #portal-guide-send:hover { filter: brightness(1.1); } #portal-guide-send:disabled { opacity: 0.5; cursor: not-allowed; } .portal-guide-welcome { text-align: center; color: #8b949e; padding: 30px 16px; font-size: 0.85rem; } .portal-guide-welcome-title { font-size: 1.3rem; color: var(--brand-primary, #58a6ff); margin-bottom: 8px; } .portal-guide-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .portal-guide-suggest { background: #21262d; border: 1px solid #30363d; color: #e1e4e8; padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; text-align: left; cursor: pointer; font-family: inherit; transition: background 0.15s; } .portal-guide-suggest:hover { background: #30363d; } .portal-guide-feedback { display: flex; gap: 6px; margin-top: 6px; } .portal-guide-feedback button { background: transparent; border: 1px solid #30363d; color: #8b949e; padding: 2px 8px; border-radius: 4px; cursor: pointer; font-size: 0.7rem; } .portal-guide-feedback button:hover { background: #21262d; } .portal-guide-feedback-note { color: #8b949e; font-size: 0.7rem; } .portal-guide-msg-text { white-space: pre-wrap; } .portal-guide-typing { color: #8b949e; font-style: italic; font-size: 0.8rem; padding: 8px 12px; } @media (max-width: 600px) { #portal-guide-panel { width: calc(100vw - 20px); right: 10px; bottom: 80px; } #portal-guide-toggle { right: 14px; bottom: 14px; } }