/* ===== Readability tweaks (Lagom dark) ===== */

/* ===== Cloudflare Overview (module) — Dark Mode ===== */
.lagom-dark-mode .cfinternal {
  background: var(--bg-1);
  border: 1px solid var(--bd-0);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Section title */
.lagom-dark-mode .cfcontent h3,
.lagom-dark-mode .cfcontentmargin {
  background: var(--bg-1);
  color: var(--txt-0);
  border: 1px solid var(--bd-0);
  border-radius: 8px;
}

/* Table block */
.lagom-dark-mode .cf-table { background: transparent; }
.lagom-dark-mode .cfcontenttable {
  width: 100%;
  background: var(--bg-1);
  color: var(--txt-0);
  border: 1px solid var(--bd-0);
  border-radius: 8px;
  overflow: hidden;
}
.lagom-dark-mode .cfcontenttable th,
.lagom-dark-mode .cfcontenttable td {
  border-top: 1px solid var(--bd-0);
}
.lagom-dark-mode .cfcontenttable th {
  width: 42%;
  background: var(--bg-2);
  color: var(--txt-0);
  font-weight: 600;
}
.lagom-dark-mode .cfcontenttable td {
  background: var(--bg-1);
  color: var(--txt-1);
}
.lagom-dark-mode .cfcontenttable a {
  color: var(--link);
}
.lagom-dark-mode .cfcontenttable a:hover { color: var(--link-hover); }

/* Action button + loader row */
.lagom-dark-mode #pauseunpauseform .btn {
  margin-top: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.lagom-dark-mode #pauseunpauseform .btn.paused { /* red-ish for Pause */
  background: #c84848 !important;
  border-color: #b63f3f !important;
}
.lagom-dark-mode #pauseunpauseform .btn.resume { /* green-ish for Enable */
  background: #2f9362 !important;
  border-color: #2a7e55 !important;
}
.lagom-dark-mode #pausesitedesc { color: var(--txt-1); }

/* Ajax status notices */
.lagom-dark-mode #zoneAjaxStatus .cfa_success {
  background: var(--success-0);
  color: var(--success-1);
  border: 1px solid #1b4d38;
  border-radius: 8px;
}
.lagom-dark-mode #zoneAjaxStatus .cfa_error {
  background: var(--danger-0);
  color: var(--danger-1);
  border: 1px solid #5a2a30;
  border-radius: 8px;
}

/* Development mode ribbon */
.lagom-dark-mode .cfyellowinfo {
  background: var(--warn-0);
  color: var(--warn-1);
  border: 1px solid #5d4a1a;
  border-radius: 8px;
}

/* Under attack banner */
.lagom-dark-mode .under_attack {
  background: #3b2a2b;
  color: #ff9aa7;
  border: 1px solid #5a2a30;
  border-radius: 10px;
}
.lagom-dark-mode .under_attack i { color: #ff7b86; }

/* Right-side info tiles (override the pastel lights) */
.lagom-dark-mode .cfdarkorangeinfo {
  background: var(--bg-1) !important;
  color: var(--txt-0) !important;
  border: 1px solid var(--bd-0) !important;
  border-radius: 10px;
}
.lagom-dark-mode .info-1 { /* Original Registrar – blue tint */
  background: linear-gradient(0deg, rgba(120,180,255,.10), rgba(120,180,255,.10)) !important;
  border-color: #2a3b55 !important;
}
.lagom-dark-mode .info-2 { /* Original Nameservers – green tint */
  background: linear-gradient(0deg, rgba(100,220,160,.12), rgba(100,220,160,.12)) !important;
  border-color: #234537 !important;
}
.lagom-dark-mode .cfdarkyellowinfo.info-3 { /* Cloudflare NS – magenta tint */
  background: linear-gradient(0deg, rgba(240,160,255,.12), rgba(240,160,255,.12)) !important;
  color: var(--txt-0) !important;
  border: 1px solid #4a2b55 !important;
  border-radius: 10px;
}

/* Headings inside tiles */
.lagom-dark-mode .cfdarkorangeinfo h3,
.lagom-dark-mode .cfdarkyellowinfo h3 {
  color: var(--txt-0) !important;
  text-shadow: none;
}

/* Make the pale top status bar less glaring if present */
.lagom-dark-mode .panel,
.lagom-dark-mode .well {
  background: var(--bg-1);
  color: var(--txt-0);
  border-color: var(--bd-0);
}

/* Keep your existing responsive rule */
@media (max-width: 576px) {
  .lagom-dark-mode .cf-table,
  .lagom-dark-mode .cfcontenttable { width: 100%; float: none; }
}

/* Improve font rendering inside this section */
.lagom-dark-mode .cfinternal,
.lagom-dark-mode .cfdarkorangeinfo,
.lagom-dark-mode .cfdarkyellowinfo {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;               /* a touch bigger */
  line-height: 1.45;
}

/* Section title contrast */
.lagom-dark-mode .cfcontent h3,
.lagom-dark-mode .cfcontentmargin {
  color: var(--txt-0);
  font-weight: 700;
  letter-spacing: .2px;
}

/* ===== Table readability ===== */
.lagom-dark-mode .cfcontenttable {
  border-radius: 10px;
  overflow: hidden;
}
.lagom-dark-mode .cfcontenttable th,
.lagom-dark-mode .cfcontenttable td {
  padding: 12px 14px !important;
  vertical-align: middle;
}
.lagom-dark-mode .cfcontenttable th {
  background: #1a2130;           /* deeper header for contrast */
  color: #e7ebf3;                 /* brighter header text */
  border-color: var(--bd-0);
  font-weight: 600;
}
.lagom-dark-mode .cfcontenttable td {
  background: #171c26;            /* darker than before */
  color: #d5dae3;                 /* brighter body text */
  border-color: var(--bd-0);
}

/* Subtle zebra for long tables */
.lagom-dark-mode .cfcontenttable tr:nth-child(even) td {
  background: #151a22;
}

/* Links readable inside table */
.lagom-dark-mode .cfcontenttable a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lagom-dark-mode .cfcontenttable a:hover { color: var(--link-hover); }

/* Hint text like “Medium / Aggressive / Off” was too faint */
.lagom-dark-mode .cfcontenttable td,
.lagom-dark-mode .cfcontenttable td small {
  color: #d8dde6 !important;
}

/* ===== Right-side tiles ===== */
.lagom-dark-mode .cfdarkorangeinfo,
.lagom-dark-mode .cfdarkyellowinfo {
  color: #e5e9f0 !important;           /* default text brighter */
}
.lagom-dark-mode .cfdarkorangeinfo h3,
.lagom-dark-mode .cfdarkyellowinfo h3 {
  font-weight: 700;
  margin-bottom: 10px;
}
.lagom-dark-mode .cfdarkorangeinfo br,
.lagom-dark-mode .cfdarkyellowinfo br { line-height: 1.1; }
.lagom-dark-mode .info-1,
.lagom-dark-mode .info-2,
.lagom-dark-mode .cfdarkyellowinfo.info-3 {
  /* keep the tint but lift text contrast on tinted backgrounds */
  color: #eef2f7 !important;
}
.lagom-dark-mode .info-2 { /* nameservers list spacing */
  line-height: 1.45;
}

/* ===== Buttons ===== */
.lagom-dark-mode #pauseunpauseform .btn {
  font-weight: 600;
  letter-spacing: .2px;
}
.lagom-dark-mode #pauseunpauseform .btn.paused { /* Pause (danger) */
  color: #fff !important;
}
.lagom-dark-mode #pauseunpauseform .btn.resume { /* Enable (success) */
  color: #fff !important;
}

/* ===== Small banners & notices ===== */
.lagom-dark-mode #zoneAjaxStatus .cfa_success,
.lagom-dark-mode #zoneAjaxStatus .cfa_error,
.lagom-dark-mode .cfyellowinfo {
  font-weight: 500;
}
.lagom-dark-mode #pausesitedesc { color: #c8ced8; }

/* ===== Mobile fine-tuning ===== */
@media (max-width: 576px) {
  .lagom-dark-mode .cfcontenttable th,
  .lagom-dark-mode .cfcontenttable td { padding: 11px 12px !important; }
  .lagom-dark-mode .cfdarkorangeinfo,
  .lagom-dark-mode .cfdarkyellowinfo { font-size: 15px; }
}

/* --- Settings Overview header (dark surface, light text) --- */
.lagom-dark-mode h3.cfcontentmargin,
.lagom-dark-mode .cfcontent h3.cfcontentmargin {
  background: #161b22 !important;      /* darker bar */
  color: #eef2f8 !important;            /* light text */
  border: 1px solid var(--bd-0) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin: 18px 0 24px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  font-weight: 700;
  letter-spacing: .2px;
}

/* ensure any nested spans/icons inherit the light color and no glow */
.lagom-dark-mode h3.cfcontentmargin *,
.lagom-dark-mode .cfcontent h3.cfcontentmargin * {
  color: inherit !important;
  text-shadow: none !important;
}

/* 1) Kill the light bar behind the "Settings Overview" header */
.lagom-dark-mode .cfcontent { 
  background: transparent !important; 
  border: 0 !important;
  box-shadow: none !important;
}
.lagom-dark-mode .cfcontent + * { margin-top: 10px; } /* tidy spacing */

/* 2) Table contrast tweaks (left column brighter, separators crisper) */
.lagom-dark-mode .cfcontenttable th {
  background: #111823 !important;       /* a touch deeper */
  color: #b9c9e2 !important;            /* brighter label text */
  letter-spacing: .15px;
}
.lagom-dark-mode .cfcontenttable td {
  background: #0f151d !important;       /* match the tile tone */
  color: #e3e8f1 !important;
}
.lagom-dark-mode .cfcontenttable tr + tr th,
.lagom-dark-mode .cfcontenttable tr + tr td {
  border-top: 1px solid #293142 !important; /* sharper row line */
}

/* 3) Left wrapper card: soften panel edge a bit */
.lagom-dark-mode .cfinternal {
  background: #0c1118 !important;
  border-color: #20293a !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.5) !important;
}

/* 4) Right tiles—match table feel, keep subtle accent bar */
.lagom-dark-mode .cfdarkorangeinfo,
.lagom-dark-mode .cfdarkyellowinfo {
  background: #0f151d !important;
  border-color: #222b3c !important;
  color: #e7ecf6 !important;
}
.lagom-dark-mode .cfdarkorangeinfo h3,
.lagom-dark-mode .cfdarkyellowinfo h3 {
  color: #f3f6fb !important;
}

/* Accent bars stay but are a hair subtler */
.lagom-dark-mode .info-1 { border-top: 2px solid #78baff !important; }
.lagom-dark-mode .info-2 { border-top: 2px solid #43dca6 !important; }
.lagom-dark-mode .cfdarkyellowinfo.info-3 { border-top: 2px solid #cd97ff !important; }

/* 5) Pause button: same red, a tad more contrast on hover */
.lagom-dark-mode #pauseunpauseform .btn.paused:hover {
  filter: brightness(1.08);
}

/* 6) Small spacing/rounding harmonization */
.lagom-dark-mode .cfcontenttable,
.lagom-dark-mode .cfdarkorangeinfo,
.lagom-dark-mode .cfdarkyellowinfo { border-radius: 12px !important; }

/* --- Remove stray white/bright borders --- */

/* Table outer + cell borders */
.lagom-dark-mode .cfcontenttable,
.lagom-dark-mode .cfcontenttable th,
.lagom-dark-mode .cfcontenttable td {
  border-color: #293142 !important;   /* subtle dark gray instead of white */
}

/* Force bottom border cleanup */
.lagom-dark-mode .cfcontenttable tr:last-child th,
.lagom-dark-mode .cfcontenttable tr:last-child td {
  border-bottom: 0 !important;
}

/* Left wrapper card */
.lagom-dark-mode .cfinternal {
  border: 1px solid #1c2432 !important; /* replace bright outline */
}

/* Right-side tiles */
.lagom-dark-mode .cfdarkorangeinfo,
.lagom-dark-mode .cfdarkyellowinfo {
  border: 1px solid #1c2432 !important; /* unify all box borders */
}

/* Optional: crisp row separator look */
.lagom-dark-mode .cfcontenttable tr + tr th,
.lagom-dark-mode .cfcontenttable tr + tr td {
  border-top: 1px solid #222a36 !important;
}
/* Remove lingering bottom line under last row (and anywhere) */
.lagom-dark-mode table.cfcontenttable,
.lagom-dark-mode .cfcontenttable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.lagom-dark-mode table.cfcontenttable > tbody > tr > th,
.lagom-dark-mode table.cfcontenttable > tbody > tr > td,
.lagom-dark-mode .cfcontenttable th,
.lagom-dark-mode .cfcontenttable td {
  border-bottom: 0 !important;          /* kill all bottom borders */
  box-shadow: none !important;           /* some themes draw inset lines */
}

/* Use only TOP borders as row separators (none on first row) */
.lagom-dark-mode table.cfcontenttable > tbody > tr + tr > th,
.lagom-dark-mode table.cfcontenttable > tbody > tr + tr > td,
.lagom-dark-mode .cfcontenttable tr + tr th,
.lagom-dark-mode .cfcontenttable tr + tr td {
  border-top: 1px solid #222a36 !important;
}

/* Absolutely ensure the last row has no extra edge */
.lagom-dark-mode table.cfcontenttable > tbody > tr:last-child > th,
.lagom-dark-mode table.cfcontenttable > tbody > tr:last-child > td,
.lagom-dark-mode .cfcontenttable tr:last-child th,
.lagom-dark-mode .cfcontenttable tr:last-child td {
  border-bottom: 0 !important;
}

/* If any pseudo-element draws a rule, disable it */
.lagom-dark-mode .cfcontenttable th::after,
.lagom-dark-mode .cfcontenttable td::after {
  content: none !important;
}
/* --- Right tiles: Glass style with subtle top accent --- */
.lagom-dark-mode .cfdarkorangeinfo,
.lagom-dark-mode .cfdarkyellowinfo {
  background: linear-gradient(180deg, rgba(22,28,38,.92), rgba(16,22,29,.92)) !important;
  backdrop-filter: saturate(115%) blur(2px);
  color: #eaeff8 !important;
  border: 1px solid #1c2432 !important;
  border-top-width: 2px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
  padding: 16px 18px !important;
  transition: all .25s ease;
}


/* Headings inside tiles */
.lagom-dark-mode .cfdarkorangeinfo h3,
.lagom-dark-mode .cfdarkyellowinfo h3 {
  color: #f6f9ff !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  letter-spacing: .2px;
}

/* Accent hairline colors */
.lagom-dark-mode .info-1 { border-top-color: #78baff !important; }  /* Original Registrar */
.lagom-dark-mode .info-2 { border-top-color: #43dca6 !important; }  /* Original Nameservers */
.lagom-dark-mode .cfdarkyellowinfo.info-3 { border-top-color: #cd97ff !important; }  /* CF Nameservers */

/* Domain lists readability */
.lagom-dark-mode .info-2,
.lagom-dark-mode .cfdarkyellowinfo.info-3 {
  line-height: 1.5;
}

/* Brighten all nested text */
.lagom-dark-mode .cfdarkorangeinfo *,
.lagom-dark-mode .cfdarkyellowinfo * {
  color: inherit !important;
}

/* Keep consistent spacing between cards */
.lagom-dark-mode .cfdarkorangeinfo + .cfdarkorangeinfo,
.lagom-dark-mode .cfdarkorangeinfo + .cfdarkyellowinfo,
.lagom-dark-mode .cfdarkyellowinfo + .cfdarkyellowinfo {
  margin-top: 18px !important;
}
/* === Dark inputs for this module === */
.lagom-dark-mode .cfinternal .form-control,
.lagom-dark-mode .cfinternal input[type="text"],
.lagom-dark-mode .cfinternal select,
.lagom-dark-mode .cfinternal textarea {
  background: #121822 !important;      /* dark surface */
  color: #e9eef7 !important;            /* light text */
  border: 1px solid #293142 !important; /* subtle border */
  box-shadow: none !important;
}

/* The selects in this view use only `input-sm` (no .form-control) */
.lagom-dark-mode .cfinternal select.input-sm {
  background: #161c26 !important;
  color: #e3e8f1 !important;
  border: 1px solid #293142 !important;
}

/* Placeholder visibility */
.lagom-dark-mode .cfinternal .form-control::placeholder,
.lagom-dark-mode .cfinternal input::placeholder,
.lagom-dark-mode .cfinternal textarea::placeholder {
  color: #9aa3b2 !important;
  opacity: 1 !important;
}

/* Focus ring */
.lagom-dark-mode .cfinternal .form-control:focus,
.lagom-dark-mode .cfinternal input[type="text"]:focus,
.lagom-dark-mode .cfinternal select:focus,
.lagom-dark-mode .cfinternal textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px var(--focus) !important;
}

/* Chrome/Safari autofill text color fix */
.lagom-dark-mode .cfinternal input:-webkit-autofill {
  -webkit-text-fill-color: #e9eef7 !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Optional: tighten spacing on stacked controls */
.lagom-dark-mode .cfinternal form .form-control,
.lagom-dark-mode .cfinternal form select.input-sm {
  margin-top: 8px;
}
/* ===================== Page Rules (dark) ===================== */

/* Wrap + header card */
.lagom-dark-mode .page-rules {
  background: linear-gradient(180deg, #161b22, #121821);
  border: 1px solid #1c2432;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
  padding: 18px;
  color: #e7ecf6;
  margin: 0 0 16px 0;
}
.lagom-dark-mode .page-rules .page-rule-content h4 {
  color: #f3f6fd;
  font-weight: 700;
  margin: 0 0 8px;
}
.lagom-dark-mode .page-rules .page-rule-content p {
  color: #b8c2d3;
  margin: 0;
}

/* Create Page Rule button */
.lagom-dark-mode .page-rules .btn.btn-primary {
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}

/* The white strip under the top card */
.lagom-dark-mode #rule-list.page-rules {
  background: #0f151d;
  border: 1px solid #1c2432;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  padding: 0;
}

/* Table */
.lagom-dark-mode #rule-list .table {
  color: #e5eaf3;
  margin: 0;
  background: transparent;
}
.lagom-dark-mode #rule-list .table thead th {
  background: #111823;
  color: #cfe0ff;
  border-color: #263045;
  font-weight: 600;
}
.lagom-dark-mode #rule-list .table tbody td,
.lagom-dark-mode #rule-list .table tbody th {
  background: #0f151d;
  color: #e7ecf6;
  border-top: 1px solid #222a36;
}
.lagom-dark-mode #rule-list .table tbody tr:nth-child(even) td,
.lagom-dark-mode #rule-list .table tbody tr:nth-child(even) th {
  background: #101821;
}
.lagom-dark-mode #rule-list .btn-warning {
  background: #d6a642;
  border-color: #be933b;
  color: #1b1f27;
}
.lagom-dark-mode #rule-list .btn-danger {
  background: #c84848;
  border-color: #b63f3f;
  color: #fff;
}

/* Forms (inputs/selects) inside this section */
.lagom-dark-mode .page-rules .form-control,
.lagom-dark-mode #rule-list .form-control,
.lagom-dark-mode #modal-pagerule .form-control,
.lagom-dark-mode #updaterulemodal .form-control {
  background: #121822 !important;
  color: #e9eef7 !important;
  border: 1px solid #293142 !important;
  box-shadow: none !important;
}
.lagom-dark-mode .page-rules .form-control::placeholder,
.lagom-dark-mode #rule-list .form-control::placeholder,
.lagom-dark-mode #modal-pagerule .form-control::placeholder,
.lagom-dark-mode #updaterulemodal .form-control::placeholder {
  color: #9aa3b2 !important;
}

/* Modals */
.lagom-dark-mode .modal-content {
  background: #0f151d;
  color: #e7ecf6;
  border: 1px solid #1c2432;
  border-radius: 12px;
}
.lagom-dark-mode .modal-header,
.lagom-dark-mode .modal-footer {
  border-color: #222a36;
}
.lagom-dark-mode .modal-header .close {
  color: #b8c2d3;
  text-shadow: none;
  opacity: .9;
}
.lagom-dark-mode .modal-title { color: #f3f6fd; }

/* Alerts in this view */
.lagom-dark-mode .alert-success { background: #163a2a; color: #35d07f; border-color: #1b4d38; }
.lagom-dark-mode .alert-danger  { background: #3a1e21; color: #ff7b86; border-color: #5a2a30; }

/* Utility: remove any unexpected light background around containers */
.lagom-dark-mode .table-responsive { background: transparent; }

/* --- Purge Cache warning box (dark) --- */
.lagom-dark-mode .cfinternal .cfyellowinfo {
  background: #352b12 !important;           /* dark amber surface */
  color: #ffdd8a !important;                 /* warm, readable text */
  border: 1px solid #5d4a1a !important;      /* amber border */
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.lagom-dark-mode .cfinternal .cfyellowinfo * {
  color: inherit !important;                 /* ensure inner text isn't faded */
  text-shadow: none !important;
}

/* =========================================================
   Analytics page: tabs + stat cards
   ========================================================= */

/* ---------- Tabs (Requests/Bandwidth/Unique/Threats) ---------- */
/* Base – works for light theme */
.graph-body > ul {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 18px 0;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  overflow: hidden;                 /* keeps a single rounded group */
}
.graph-body > ul li { flex: 1; }
.graph-body > ul li a {
  display: block;
  text-align: center;
  padding: 14px 12px;
  text-decoration: none;
  font-weight: 600;
  border-right: 1px solid rgba(0,0,0,.08);
  background: #ffffff;
  color: #1d2838;
}
.graph-body > ul li:last-child a { border-right: 0; }
.graph-body > ul li a:hover { filter: brightness(0.97); }
.graph-body > ul li a.active-tab {
  background: #eef3ff;             /* light active */
  color: #2a3d8f;
  box-shadow: inset 0 -3px 0 #6b83ff;
}

/* Dark overrides */
.lagom-dark-mode .graph-body > ul {
  border-color: #222a36;
}
.lagom-dark-mode .graph-body > ul li a {
  background: #0f151d;
  color: #b7c3d8;
  border-right-color: #222a36;
}
.lagom-dark-mode .graph-body > ul li a:hover {
  background: #111a24;
}
.lagom-dark-mode .graph-body > ul li a.active-tab {
  background: #101821;
  color: #cfd8ff;
  box-shadow: inset 0 -3px 0 #8fa2ff;
}

/* ---------- Stat cards inside each graph (3-up) ---------- */
.graphs ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
}
.graphs ul li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;                /* forces equal heights */
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #ffffff;              /* light */
  color: #1d2838;
}
.graphs ul li h4 { margin: 0 0 6px; font-weight: 700; }
.graphs ul li small { opacity: .75; }
.graphs ul li h5 { margin: 10px 0 0; font-size: 26px; font-weight: 700; }

/* Dark cards */
.lagom-dark-mode .graphs ul li {
  background: #0f151d;
  border: 1px solid #222a36;
  color: #e7ecf6;
}
.lagom-dark-mode .graphs ul li h4 { color: #e9eef8; }
.lagom-dark-mode .graphs ul li small { color: #9aa3b2; }
.lagom-dark-mode .graphs ul li h5 { color: #ffffff; }

/* Responsive: stack the three boxes on narrow screens */
@media (max-width: 768px) {
  .graphs ul { flex-direction: column; }
}

/* ===================== Cloudflare > Domains list (dark) ===================== */
/* Scope everything to Lagom dark + this module wrapper to avoid bleed */
.lagom-dark-mode .cf_d_mangr .panel {
  background: #0f151d !important;
  color: #e7ecf6 !important;
  border: 1px solid #1c2432 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.lagom-dark-mode .cf_d_mangr .panel + .panel { margin-top: 22px; }

/* Panel headers */
.lagom-dark-mode .cf_d_mangr .panel-heading {
  background: #111823 !important;
  color: #e9eef8 !important;
  border-bottom: 1px solid #222a36 !important;
  font-weight: 700;
  letter-spacing: .2px;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Panel body */
.lagom-dark-mode .cf_d_mangr .panel-body {
  background: transparent !important;
  color: inherit !important;
}

/* Form controls (add domain + upgrade modal) */
.lagom-dark-mode .cf_d_mangr .form-control,
.lagom-dark-mode .cf_d_mangr select,
.lagom-dark-mode .cf_d_mangr input[type="text"],
.lagom-dark-mode .cf_d_mangr input[type="number"],
.lagom-dark-mode .cf_d_mangr textarea {
  background: #121822 !important;
  color: #e9eef7 !important;
  border: 1px solid #293142 !important;
  box-shadow: none !important;
}
.lagom-dark-mode .cf_d_mangr .form-control::placeholder { color: #9aa3b2 !important; }

/* "Add" button and other neutrals */
.lagom-dark-mode .cf_d_mangr .btn-default,
.lagom-dark-mode .cf_d_mangr .btn {
  background: #1a2230;
  color: #e7ecf6;
  border: 1px solid #293142;
}
.lagom-dark-mode .cf_d_mangr .btn:hover { filter: brightness(1.05); }

/* DataTables chrome: length select + search */
.lagom-dark-mode .cf_d_mangr .dataTables_wrapper .dataTables_length select,
.lagom-dark-mode .cf_d_mangr .dataTables_wrapper .dataTables_filter input {
  background: #121822 !important;
  color: #e9eef7 !important;
  border: 1px solid #293142 !important;
}

/* Table */
.lagom-dark-mode .cf_d_mangr table.table {
  background: transparent !important;
  color: #e7ecf6 !important;
  border-collapse: separate;      /* keep our row separators clean */
  border-spacing: 0;
}
.lagom-dark-mode .cf_d_mangr table.table thead th {
  background: #111823 !important;
  color: #cfe0ff !important;
  border-bottom: 1px solid #263045 !important;
  font-weight: 600;
}
.lagom-dark-mode .cf_d_mangr table.table tbody td,
.lagom-dark-mode .cf_d_mangr table.table tbody th {
  background: #0f151d !important;
  color: #e7ecf6 !important;
  border-top: 1px solid #222a36 !important;
}
.lagom-dark-mode .cf_d_mangr table.table tbody tr:nth-child(even) td,
.lagom-dark-mode .cf_d_mangr table.table tbody tr:nth-child(even) th {
  background: #101821 !important;
}

/* Links inside cells (domain name) */
.lagom-dark-mode .cf_d_mangr table.table a { color: #9fb4ff; }
.lagom-dark-mode .cf_d_mangr table.table a:hover { color: #c7d2ff; }

/* DataTables pagination */
.lagom-dark-mode .cf_d_mangr .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #0f151d !important;
  border: 1px solid #222a36 !important;
  color: #c9d3e5 !important;
  border-radius: 8px !important;
}
.lagom-dark-mode .cf_d_mangr .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.lagom-dark-mode .cf_d_mangr .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #101821 !important;
  color: #ffffff !important;
  border-color: #2a3346 !important;
}

/* Alerts on this page */
.lagom-dark-mode .cf_d_mangr .alert-success { background: #163a2a; color: #35d07f; border-color: #1b4d38; }
.lagom-dark-mode .cf_d_mangr .alert-danger  { background: #3a1e21; color: #ff7b86; border-color: #5a2a30; }

/* Modal (upgrade) */
.lagom-dark-mode #upgradeModal .modal-content {
  background: #0f151d !important;
  color: #e7ecf6 !important;
  border: 1px solid #1c2432 !important;
  border-radius: 12px !important;
}
.lagom-dark-mode #upgradeModal .modal-header,
.lagom-dark-mode #upgradeModal .modal-footer { border-color: #222a36 !important; }
.lagom-dark-mode #upgradeModal .modal-title { color: #f3f6fd !important; }

/* === Fix Cloudflare Domains (dark) === */

/* Remove bright white outer borders on panels */
.lagom-dark-mode .cf_d_mangr .panel {
  border: 1px solid #1c2432 !important;  /* darker border */
  box-shadow: 0 8px 20px rgba(0,0,0,.45) !important;
}

/* Also remove that extra white horizontal divider inside */
.lagom-dark-mode .cf_d_mangr .panel-heading + .panel-body {
  border-top: 1px solid #222a36 !important;
}

/* Label (Domain Name) lighter */
.lagom-dark-mode .cf_d_mangr label {
  color: #cfd8e3 !important;
  font-weight: 500;
}

/* DataTables “Showing x to y” text */
.lagom-dark-mode .cf_d_mangr .dataTables_info {
  color: #b7c3d8 !important;
}

/* DataTables search label */
.lagom-dark-mode .cf_d_mangr .dataTables_filter label {
  color: #cfd8e3 !important;
}

/* === Kill all white borders in Cloudflare Domains (dark) === */
.lagom-dark-mode .cf_d_mangr .panel {
  border: none !important;                 /* remove outer white border */
  background: #0f151d !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
}

/* Panel headings - unify with background */
.lagom-dark-mode .cf_d_mangr .panel-heading {
  border: none !important;
  background: #101821 !important;
  color: #e7ecf6 !important;
  font-weight: 600;
}

/* Remove white divider between heading/body */
.lagom-dark-mode .cf_d_mangr .panel-heading + .panel-body {
  border-top: none !important;
}

/* Table borders */
.lagom-dark-mode .cf_d_mangr table,
.lagom-dark-mode .cf_d_mangr table th,
.lagom-dark-mode .cf_d_mangr table td {
  border: none !important;                /* kill all table borders */
}

/* Keep row separation subtle */
.lagom-dark-mode .cf_d_mangr table tbody tr + tr td,
.lagom-dark-mode .cf_d_mangr table tbody tr + tr th {
  border-top: 1px solid #222a36 !important;
}

/* Datatables box (search/pagination) */
.lagom-dark-mode .cf_d_mangr .dataTables_wrapper {
  border: none !important;
}

/* Pagination cleanup */
.lagom-dark-mode .cf_d_mangr .dataTables_paginate .paginate_button {
  border: none !important;
  background: #161c26 !important;
  color: #cfd8e3 !important;
}
.lagom-dark-mode .cf_d_mangr .dataTables_paginate .paginate_button.current {
  background: #1f2937 !important;
  color: #ffffff !important;
}
.lagom-dark-mode .cf_d_mangr .dataTables_paginate .paginate_button:hover {
  background: #222a36 !important;
}

/* =========================================================
   Cloudflare > Domains listing (dark) – final cleanup
   ========================================================= */

/* Card look (no white edges, same style as lower section) */
.lagom-dark-mode .cf_d_mangr .panel {
  background: #0f151d !important;
  border: 1px solid #1c2432 !important;     /* dark, not white */
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}

/* Kill all theme outlines/borders that sneak in via pseudo-elements */
.lagom-dark-mode .cf_d_mangr .panel,
.lagom-dark-mode .cf_d_mangr .panel::before,
.lagom-dark-mode .cf_d_mangr .panel::after,
.lagom-dark-mode .cf_d_mangr .panel-heading,
.lagom-dark-mode .cf_d_mangr .panel-heading::before,
.lagom-dark-mode .cf_d_mangr .panel-heading::after,
.lagom-dark-mode .cf_d_mangr .panel-body,
.lagom-dark-mode .cf_d_mangr .panel-body::before,
.lagom-dark-mode .cf_d_mangr .panel-body::after,
.lagom-dark-mode .cf_d_mangr .table-responsive {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* Headings: same dark strip, no divider line under it */
.lagom-dark-mode .cf_d_mangr .panel-heading {
  background: #101821 !important;
  color: #e7ecf6 !important;
  font-weight: 600 !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 14px 16px !important;
}

/* Body: remove any inner borders; add comfortable padding */
.lagom-dark-mode .cf_d_mangr .panel-body {
  background: #0f151d !important;
  padding: 16px 18px !important;
  border-radius: 0 0 12px 12px !important;
}

/* Table: no borders; keep only subtle row separators */
.lagom-dark-mode .cf_d_mangr table,
.lagom-dark-mode .cf_d_mangr table th,
.lagom-dark-mode .cf_d_mangr table td {
  border: 0 !important;
  background: transparent !important;
}
.lagom-dark-mode .cf_d_mangr table thead th {
  background: #0f151d !important;
  color: #cfe0ff !important;
  font-weight: 600 !important;
}
.lagom-dark-mode .cf_d_mangr table tbody tr + tr td,
.lagom-dark-mode .cf_d_mangr table tbody tr + tr th {
  border-top: 1px solid #222a36 !important; /* subtle, dark */
}

/* Inputs in this view (Show / Search / text field) */
.lagom-dark-mode .cf_d_mangr .form-control,
.lagom-dark-mode .cf_d_mangr select,
.lagom-dark-mode .cf_d_mangr input[type="text"] {
  background: #121822 !important;
  color: #e9eef7 !important;
  border: 1px solid #293142 !important;
  box-shadow: none !important;
}

/* Labels like “Domain Name:” a touch brighter */
.lagom-dark-mode .cf_d_mangr label {
  color: #cfd8e3 !important;
}

/* “Showing 1 to 1 of 1 entries” */
.lagom-dark-mode .cf_d_mangr .dataTables_info {
  color: #c8d0dc !important;
}

/* DataTables pagination buttons (match dark card look) */
.lagom-dark-mode .cf_d_mangr .dataTables_paginate .paginate_button {
  border: none !important;
  background: #161c26 !important;

/* Single-domain "Manage Cloudflare" CTA (outside .cf_d_mangr) */
.lagom-dark-mode input#manage_cf.btn,
.lagom-dark-mode #manage_cf.btn,
.lagom-dark-mode input#manage_cf[type="submit"] {
  background: #161c26 !important;
  color: #e9eef7 !important;                  /* label color */
  -webkit-text-fill-color: #e9eef7 !important;/* WebKit for <input> */
  border: 1px solid #293142 !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  background-image: none !important;
}

.lagom-dark-mode input#manage_cf.btn:hover,
.lagom-dark-mode #manage_cf.btn:hover {
  background: #1b2230 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #32405a !important;
}