body { font-family: system-ui, Arial, sans-serif; margin: 0; color: #111; background: #f7f7f9; }
header { background: #1f2937; color: #fff; padding: 1rem 1.5rem; }
header h1 { margin: 0; font-size: 1.2rem; }
header nav a { color: #9dd0ff; text-decoration: none; margin-right: 0.5rem; }
main { padding: 1rem 1.5rem; }
.table { border-collapse: collapse; width: 100%; background: #fff; }
.cert-list-page .form-check-input:checked {
  background-color: var(--pt-accent);
  border-color: var(--pt-accent);
}

.cert-list-page .status-chip,
body:has(#certTable) .status-chip {
  display: inline-flex;
  align-items: center;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.45);
  background: rgba(0, 229, 255, 0.12);
  color: #c9fbff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

.cert-list-page .status-chip-ready,
body:has(#certTable) .status-chip-ready {
  border-color: rgba(34, 197, 94, .5);
  background: rgba(34, 197, 94, .16);
  color: #7ef0aa;
}

.cert-list-page .status-chip-error,
body:has(#certTable) .status-chip-error {
  border-color: rgba(239, 68, 68, .5);
  background: rgba(239, 68, 68, .16);
  color: #ff9494;
}

.cert-list-page .status-chip-timeout,
body:has(#certTable) .status-chip-timeout {
  border-color: rgba(0, 229, 255, .55);
  background: rgba(0, 229, 255, .18);
  color: #9af6ff;
}

.cert-list-page .status-chip-neutral,
body:has(#certTable) .status-chip-neutral {
  border-color: rgba(148, 163, 184, .4);
  background: rgba(148, 163, 184, .16);
  color: #c7d4e2;
}

.cert-list-page .cert-filter-form .form-control,
.cert-list-page .cert-filter-form .form-select,
body:has(#certTable) .cert-filter-form .form-control,
body:has(#certTable) .cert-filter-form .form-select {
  color: #e8f4fb !important;
}

.cert-list-page .cert-filter-form .form-control::placeholder,
.cert-list-page .cert-filter-form .form-select::placeholder,
body:has(#certTable) .cert-filter-form .form-control::placeholder,
body:has(#certTable) .cert-filter-form .form-select::placeholder {
  color: #8fb0c9 !important;
  opacity: 1;
}

.cert-list-page .cert-filter-form .form-check-label,
body:has(#certTable) .cert-filter-form .form-check-label {
  color: #d8e8f7 !important;
}
.table th, .table td { border: 1px solid #e5e7eb; padding: 0.5rem; font-size: 0.95rem; }
.table th { background: #f0f3f7; text-align: left; }
.list { list-style: none; padding: 0; }
.list li { background: #fff; border: 1px solid #e5e7eb; margin-bottom: 0.5rem; padding: 0.6rem; }
/* Shared bottombar matching scanner */
.bottombar { background: #000; color: #00e5ff; padding: 8px 16px; text-align: center; position: fixed; bottom: 0; left: 0; right: 0; }

/* Global dark theme fallback for pages that rely on shared styles.css */
body.dark { color: #fff; background: #000; }
body.dark header { background: #000; color: #fff; }
body.dark main { color: #fff; background: transparent; }
body.dark .table { background: #000; color: #fff; }
body.dark .table th,
body.dark .table td { border-color: #3a3a3a; }
body.dark .table th { background: #2a1a06; color: #ffe7c2; }
body.dark .list li { background: #000; color: #fff; border-color: #3a3a3a; }
body.dark .card,
body.dark .card-body,
body.dark .container,
body.dark .container-fluid { color: #fff; }

/* Shared authenticated top navbar (Story #74) */
.topbar {
  background: #000;
  color: #fff;
  height: 56px;
  padding: 10px 16px;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  display: flex;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand img {
  height: 28px;
}

.scope-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.customer-name {
  font-weight: 800;
  color: #00e5ff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.scope-badge {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid #00e5ff;
  background: rgba(0, 229, 255, 0.16);
  color: #9af6ff;
  white-space: nowrap;
}

.scope-badge.scope-global {
  border-color: #5d6b7a;
  background: rgba(93, 107, 122, 0.25);
  color: #d3dbe3;
}

.scope-badge.scope-customer {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.22);
  color: #9af6ff;
}

.scope-badge.scope-team {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.2);
  color: #b4f1ca;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto !important;
}

.user-area .user-name {
  color: #00e5ff;
}

.user-area .logout-btn {
  color: #00e5ff;
  border: 1px solid #00e5ff;
  background: rgba(0, 229, 255, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.user-area .logout-btn:hover {
  background: rgba(0, 229, 255, 0.2);
  border-color: #00b4cc;
  color: #9af6ff;
}

.crown-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	color: #ff9f0a;
	margin-right: .35rem;
	font-size: 1rem;
	line-height: 1;
	vertical-align: -0.08em;
	flex: 0 0 auto;
}

.crown-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	margin-right: .35rem;
	line-height: 1;
	cursor: pointer;
}

/* ── Portal page table dark overrides (must be last — styles.css loads after theme-portal.css) ── */
.admin-page .table,
.cm-page .table,
.sm-page .table {
  --bs-table-bg: #000;
  --bs-table-striped-bg: #020508;
  --bs-table-color: #e7eef6;
  --bs-table-border-color: rgba(0, 229, 255, 0.22);
  background: #000 !important;
  color: #e7eef6;
}

.admin-page .table th,
.admin-page .table td,
.cm-page .table th,
.cm-page .table td,
.sm-page .table th,
.sm-page .table td {
  background: #000 !important;
  color: #e7eef6 !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}

.admin-page .table thead th,
.cm-page .table thead th,
.sm-page .table thead th {
  background: rgba(0, 229, 255, 0.14) !important;
  color: #9af6ff !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}

/* Customer Management file inputs: enforce portal outline button style */
.cm-page input.form-control[type="file"] {
  background-color: #04070a !important;
  color: #9af6ff !important;
  border-color: rgba(0, 229, 255, 0.38) !important;
  color-scheme: dark;
}

.cm-page input.form-control[type="file"]::file-selector-button,
.cm-page input.form-control[type="file"]::-webkit-file-upload-button,
.cm-page .form-control[type="file"]::file-selector-button,
.cm-page .form-control[type="file"]::-webkit-file-upload-button {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(0, 229, 255, 0.10) !important;
  color: #00e5ff !important;
  border: 1px solid #00e5ff !important;
  border-radius: 8px !important;
  padding: .35rem .75rem !important;
  margin-right: .75rem !important;
  box-shadow: none !important;
}

.cm-page input.form-control[type="file"]:hover::file-selector-button,
.cm-page input.form-control[type="file"]:focus::file-selector-button,
.cm-page input.form-control[type="file"]:hover::-webkit-file-upload-button,
.cm-page input.form-control[type="file"]:focus::-webkit-file-upload-button,
.cm-page .form-control[type="file"]:hover::file-selector-button,
.cm-page .form-control[type="file"]:focus::file-selector-button,
.cm-page .form-control[type="file"]:hover::-webkit-file-upload-button,
.cm-page .form-control[type="file"]:focus::-webkit-file-upload-button {
  background-color: rgba(0, 229, 255, 0.20) !important;
  color: #9af6ff !important;
  border-color: #5ef0ff !important;
}

/* Certificate pages: keep dark surfaces and avoid double-outline shell */
.cert-list-page,
.cert-overview-page,
body:has(#certTable),
body:has(.overview-card) {
  --accent: #00e5ff;
  --ok: #22c55e;
  --warn: #facc15;
  --bad: #ef4444;
  --muted: #9fb2c6;
}

.cert-list-page main.container {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.cert-list-page .text-muted,
.cert-overview-page .text-muted,
body:has(#certTable) .text-muted,
body:has(.overview-card) .text-muted {
  color: #9fb2c6 !important;
}

.cert-list-page .demo-card,
.cert-list-page .summary-card,
.cert-list-page .legend-table,
.cert-list-page .table-responsive,
.cert-overview-page .overview-card,
.cert-overview-page .summary-card,
.cert-overview-page .section-card {
  background: #000 !important;
  color: #f3f7fb !important;
  border-color: rgba(0, 229, 255, 0.38) !important;
}

.cert-list-page .table,
.cert-overview-page .table {
  --bs-table-bg: #000;
  --bs-table-striped-bg: #020508;
  --bs-table-color: #e7eef6;
  --bs-table-border-color: rgba(0, 229, 255, 0.22);
  background: #000 !important;
  color: #e7eef6 !important;
}

.cert-list-page .table th,
.cert-list-page .table td,
.cert-overview-page .table th,
.cert-overview-page .table td {
  background: #000 !important;
  color: #e7eef6 !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}

.cert-list-page .table thead th,
.cert-overview-page .table thead th {
  background: rgba(0, 229, 255, 0.14) !important;
  color: #9af6ff !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}

/* Fallback for older cached certificate templates (without cert-list-page/cert-overview-page body classes) */
body:has(#certTable) main.container {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

body:has(#certTable) .demo-card,
body:has(#certTable) .summary-card,
body:has(#certTable) .table-responsive,
body:has(#certTable) .legend-table,
body:has(.overview-card) .overview-card,
body:has(.overview-card) .summary-card,
body:has(.overview-card) .section-card {
  background: #000 !important;
  color: #f3f7fb !important;
  border-color: rgba(0, 229, 255, 0.38) !important;
}

body:has(#certTable) .table,
body:has(.overview-card) .table,
body:has(#certTable) .table-darkish,
body:has(.overview-card) .table-theme {
  --bs-table-bg: #000;
  --bs-table-striped-bg: #020508;
  --bs-table-color: #e7eef6;
  --bs-table-border-color: rgba(0, 229, 255, 0.22);
  background: #000 !important;
  color: #e7eef6 !important;
}

body:has(#certTable) .table th,
body:has(#certTable) .table td,
body:has(.overview-card) .table th,
body:has(.overview-card) .table td {
  background: #000 !important;
  color: #e7eef6 !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}

body:has(#certTable) .table thead th,
body:has(.overview-card) .table thead th {
  background: rgba(0, 229, 255, 0.14) !important;
  color: #9af6ff !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}

body:has(#certTable) .btn-accent,
body:has(#certTable) .btn-accent-outline,
body:has(.overview-card) .btn-accent,
body:has(.overview-card) .btn-outline-accent {
  color: #00e5ff !important;
  border: 1px solid #00e5ff !important;
  background: rgba(0, 229, 255, 0.10) !important;
}

body:has(#certTable) .btn-accent:hover,
body:has(#certTable) .btn-accent-outline:hover,
body:has(.overview-card) .btn-accent:hover,
body:has(.overview-card) .btn-outline-accent:hover {
  background: rgba(0, 229, 255, 0.20) !important;
  border-color: #5ef0ff !important;
  color: #9af6ff !important;
}

/* Themed scrollbars for certificate pages */
.cert-list-page,
.cert-overview-page,
body:has(#certTable),
body:has(.overview-card) {
  scrollbar-width: thin;
  scrollbar-color: #00e5ff #020508;
}

.cert-list-page ::-webkit-scrollbar,
.cert-overview-page ::-webkit-scrollbar,
body:has(#certTable) ::-webkit-scrollbar,
body:has(.overview-card) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.cert-list-page ::-webkit-scrollbar-track,
.cert-overview-page ::-webkit-scrollbar-track,
body:has(#certTable) ::-webkit-scrollbar-track,
body:has(.overview-card) ::-webkit-scrollbar-track {
  background: #020508;
}

.cert-list-page ::-webkit-scrollbar-thumb,
.cert-overview-page ::-webkit-scrollbar-thumb,
body:has(#certTable) ::-webkit-scrollbar-thumb,
body:has(.overview-card) ::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.55);
  border: 1px solid rgba(0, 229, 255, 0.75);
  border-radius: 999px;
}

.cert-list-page ::-webkit-scrollbar-thumb:hover,
.cert-overview-page ::-webkit-scrollbar-thumb:hover,
body:has(#certTable) ::-webkit-scrollbar-thumb:hover,
body:has(.overview-card) ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.75);
}

/* Internal scroll-shell for management pages */
body.cm-page,
body.sm-page {
  overflow: hidden;
}

body.cm-page main.page-scroll-shell,
body.sm-page main.page-scroll-shell {
  height: calc(100vh - 56px - 56px - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #00e5ff #020508;
}

body.cm-page main.page-scroll-shell::-webkit-scrollbar,
body.sm-page main.page-scroll-shell::-webkit-scrollbar,
body.cm-page main.page-scroll-shell *::-webkit-scrollbar,
body.sm-page main.page-scroll-shell *::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

body.cm-page main.page-scroll-shell::-webkit-scrollbar-track,
body.sm-page main.page-scroll-shell::-webkit-scrollbar-track,
body.cm-page main.page-scroll-shell *::-webkit-scrollbar-track,
body.sm-page main.page-scroll-shell *::-webkit-scrollbar-track {
  background: #020508 !important;
}

body.cm-page main.page-scroll-shell::-webkit-scrollbar-thumb,
body.sm-page main.page-scroll-shell::-webkit-scrollbar-thumb,
body.cm-page main.page-scroll-shell *::-webkit-scrollbar-thumb,
body.sm-page main.page-scroll-shell *::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.55) !important;
  border: 1px solid rgba(0, 229, 255, 0.75) !important;
  border-radius: 999px !important;
}

body.cm-page main.page-scroll-shell::-webkit-scrollbar-thumb:hover,
body.sm-page main.page-scroll-shell::-webkit-scrollbar-thumb:hover,
body.cm-page main.page-scroll-shell *::-webkit-scrollbar-thumb:hover,
body.sm-page main.page-scroll-shell *::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.75) !important;
}

.crown-btn .crown-mark {
	margin-right: 0;
}

.crown-active {
	color: #ff9f0a;
}

.crown-inactive {
	color: #9ca3af;
}

.crown-inactive .crown-mark {
	filter: grayscale(1);
	opacity: .55;
}

.crown-btn:hover .crown-mark {
	opacity: .85;
}


/* ── DNS page overrides (last-loaded wins over global .table rules) ── */

/* 1. Body scroll lock — keep top section fixed, only data-scroll scrolls */
body.dns-page {
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: #00e5ff #020508;
}

/* 2. Title colour */
body.dns-page .page-title { color: #00e5ff !important; }

/* 3. Table dark theming — beats global .table { background:#fff } */
body.dns-page .table {
  --bs-table-bg: #000;
  --bs-table-striped-bg: #020508;
  --bs-table-color: #f3f7fb;
  --bs-table-border-color: rgba(0, 229, 255, 0.22);
  background: #000;
}
body.dns-page .table th,
body.dns-page .table td {
  background: #000 !important;
  color: #f3f7fb !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}
body.dns-page .table thead th {
  background: rgba(0, 229, 255, 0.14) !important;
  color: #9af6ff !important;
}

/* 4. DNS shell polish: single border like certificates */
body.dns-page main.demo-wrap {
  border: 0 !important;
  padding: 0 !important;
}

/* 5. DNS internal scroll layout */
body.dns-page .page-shell {
  overflow: hidden !important;
}

body.dns-page .page-shell .data-scroll {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #00e5ff #020508;
}

/* 6. DNS themed scrollbar (only on the real scroller) */
body.dns-page .page-shell .data-scroll::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

body.dns-page .page-shell .data-scroll::-webkit-scrollbar-track {
  background: #020508 !important;
}

body.dns-page .page-shell .data-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.7) !important;
  border: 1px solid rgba(0, 229, 255, 0.9) !important;
  border-radius: 999px !important;
}

body.dns-page .page-shell .data-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.9) !important;
}

body.dns-page .page-shell .data-scroll::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 7. DNS: form wrapping data-scroll must participate in page-shell flex layout */
body.dns-page .page-shell > form#dns-filters-form {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.dns-page .page-shell > form#dns-filters-form > .data-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #00e5ff #020508;
}
body.dns-page .page-shell > form#dns-filters-form > .data-scroll::-webkit-scrollbar {
  width: 10px !important;
}
body.dns-page .page-shell > form#dns-filters-form > .data-scroll::-webkit-scrollbar-track {
  background: #020508 !important;
}
body.dns-page .page-shell > form#dns-filters-form > .data-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.7) !important;
  border: 1px solid rgba(0, 229, 255, 0.9) !important;
  border-radius: 999px !important;
}
body.dns-page .page-shell > form#dns-filters-form > .data-scroll::-webkit-scrollbar-button {
  display: none !important;
}

/* ── Endpoints page overrides (last-loaded wins over global .table rules) ── */

/* 1. Title colour */
body.endpoints-page .page-title { color: #00e5ff !important; }

/* 2. Table dark theming — beats global .table { background:#fff } */
body.endpoints-page .table {
  --bs-table-bg: #000;
  --bs-table-striped-bg: #020508;
  --bs-table-color: #f3f7fb;
  --bs-table-border-color: rgba(0, 229, 255, 0.22);
  background: #000;
}
body.endpoints-page .table th,
body.endpoints-page .table td {
  background: #000 !important;
  color: #f3f7fb !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}
body.endpoints-page .table thead th {
  background: rgba(0, 229, 255, 0.14) !important;
  color: #9af6ff !important;
}

/* 3. Remove double border from demo-wrap */
body.endpoints-page main.demo-wrap { border: 0 !important; padding: 0 !important; }

/* 4. Buttons — outline cyan style consistent with rest of portal */
body.endpoints-page .btn-accent {
  color: #00e5ff !important;
  border: 1px solid #00e5ff !important;
  background: rgba(0, 229, 255, 0.10) !important;
}
body.endpoints-page .btn-accent:hover {
  background: rgba(0, 229, 255, 0.20) !important;
  border-color: #5ef0ff !important;
  color: #9af6ff !important;
}

/* 5. Form controls dark theme */
body.endpoints-page .form-control,
body.endpoints-page .form-select {
  background: #0a1520 !important;
  color: #f3f7fb !important;
  border-color: rgba(0, 229, 255, 0.38) !important;
}

/* ===== Domains page overrides ===== */

/* 1. Remove double border — demo-wrap wraps demo-card, only keep the card border */
body.domains-page main.demo-wrap { border: 0 !important; padding: 0 !important; }

/* 2. Table dark theme — beat global .table { background:#fff } and .table th { background:#f0f3f7 } */
body.domains-page .table-darkish {
  background: #000 !important;
  color: #f3f7fb !important;
}
body.domains-page .table-darkish th,
body.domains-page .table-darkish td {
  background: #000 !important;
  color: #f3f7fb !important;
  border-color: rgba(0, 229, 255, 0.22) !important;
}
body.domains-page .table-darkish thead th {
  background: rgba(0, 229, 255, 0.14) !important;
  color: #9af6ff !important;
}

/* ── Report detail page: table dark theme (beats global .table { background:#fff }) ── */
body.report-detail-page .table-darkish {
  background: #000 !important;
  color: #f3f7fb !important;
}
body.report-detail-page .table-darkish th,
body.report-detail-page .table-darkish td {
  background: #000 !important;
  color: #f3f7fb !important;
  border-color: transparent !important;
}
body.report-detail-page .table-darkish thead th {
  background: rgba(0, 229, 255, 0.12) !important;
  color: #9af6ff !important;
}