/* ==========================================================================
   Theme tokens
   --------------------------------------------------------------------------
   Every colour the shell uses resolves through these. The stylesheets below
   still carry their original hex as the var() fallback, so a screen that has
   not been tokenised yet keeps exactly the colours it always had -- dark mode
   arrives screen by screen rather than all at once.

   Three states, because there are three: no data-theme means "follow the
   machine", and an explicit choice has to win in both directions.

   Text-on-colour and colour-as-background are separate tokens. --t-brand is a
   button background with white text on it, so in dark it stays dark enough to
   carry that text; --t-brand-text is the same purple used as writing, so it
   goes light instead. One token could not do both jobs.
   ========================================================================== */
/* There is deliberately no light palette here.

   Every tokenised declaration carries its original hex as the var() fallback,
   so with these tokens undefined light renders the exact colour it always did
   -- byte for byte, not approximately. Defining a light value would override
   that fallback, and because several near-identical hexes share one token it
   would quietly shift them: an earlier cut moved .spx-hidden-pill from #6f42c1
   to #5b2c86 and a table header by three points of grey, purely as a side
   effect of adding dark mode. Nobody asked for that.

   So the tokens exist only under the dark attribute below. Light is not a
   theme here -- it is the stylesheet as it already was. */

/* Follow the machine unless the person has said otherwise. */


/* An explicit choice beats the machine, both ways. */
:root[data-theme="dark"] {
  --t-bg: #0f141d;
  --t-surface: #1a2231;
  --t-surface-2: #151d2a;
  --t-surface-3: #202a3b;

  --t-ink: #e4ebf3;
  --t-ink-2: #c8d4e2;
  --t-muted: #94a4b7;
  --t-faint: #74849a;

  --t-line: #2a3548;
  --t-line-soft: #232d3e;

  --t-brand: #7b4bb0;
  --t-brand-2: #8b5cc4;
  --t-brand-text: #c9a6e8;
  --t-accent: #2f6fb0;
  --t-accent-text: #7cc0ee;
  --t-link: #7cc0ee;

  --t-success: #1f7d47;
  --t-success-text: #3fbe76;
  --t-danger: #a33327;
  --t-danger-text: #e8796a;

  /* Chip and badge fills, and the writing on them.
     Deliberately absent from :root. A chip like
       .spx-st-new { background: var(--t-tint-blue, #e8f4fb); color: var(--t-tint-blue-ink, #1d6fa5); }
     therefore renders the exact literal it always did in light, and only
     switches when the dark attribute is set. That is what lets several
     near-identical pale hexes share one token without shifting light at all.

     The first cut tokenised the writing but left these fills literal, so in
     dark the text went pale while the chip stayed pale too -- 1.76:1, which is
     what "looks crappy" actually was. */
  --t-tint-slate: #202a3b;
  --t-tint-blue: #16283a;
  --t-tint-purple: #281d38;
  --t-tint-green: #14301f;
  --t-tint-red: #331b19;
  --t-tint-amber: #33270f;

  --t-tint-slate-ink: #c8d4e2;
  --t-tint-blue-ink: #8fcbf0;
  --t-tint-purple-ink: #c9a6e8;
  --t-tint-green-ink: #5fd191;
  --t-tint-red-ink: #f08a7c;
  --t-tint-amber-ink: #e8b872;
}

/* The page itself, so an untokenised screen still sits on the right ground. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .content-wrapper { background: var(--t-bg); color: var(--t-ink); }

/* Invoices, contracts and anything going to a printer stay on paper colours
   whatever the screen is doing. Nobody wants a black invoice. */
@media print {
  :root, :root[data-theme="dark"] {
    --t-bg: #ffffff; --t-surface: #ffffff; --t-surface-2: #ffffff; --t-surface-3: #ffffff;
    --t-ink: #000000; --t-ink-2: #222222; --t-muted: #444444; --t-faint: #666666;
    --t-line: #cccccc; --t-line-soft: #e5e5e5;
    --t-brand: #5b2c86; --t-brand-text: #5b2c86;
    --t-link: #1d6fa5; --t-success-text: #1f7d47; --t-danger-text: #a33327;
  }
}
/* Infinity Connect portal chrome — logo, contrast, and a cleaner AdminLTE overlay */

:root {
  --ic-navy: #121826;
  --ic-navy-2: #1b2538;
  --ic-ink: #1b2433;
  --ic-muted: #5b6b7c;
  --ic-bg: #d5dee9;
  --ic-card: #ffffff;
  --ic-line: #dce3ea;
  --ic-blue: #2e86c1;
  --ic-cyan: #43afdc;
  --ic-magenta: #c23d8a;
  --ic-purple: #6b2d8b;
  --ic-green: #1f9d55;
  --ic-radius: 10px;
  --ic-shadow: 0 8px 24px rgba(18, 24, 38, 0.08);
}

body.skin-blue {
  font-family: "Segoe UI", Inter, "Source Sans Pro", Helvetica, Arial, sans-serif;
  color: var(--ic-ink);
  background: var(--ic-bg);
}

body.skin-blue .wrapper {
  background: var(--ic-bg);
}

/* ---- Top bar: hide the empty AdminLTE strip on desktop ---- */
@media (min-width: 768px) {
  .skin-blue .main-header {
    display: none !important;
  }

  .skin-blue .main-sidebar,
  .skin-blue .left-side,
  .skin-blue .main-sidebar.ic-sidebar {
    padding-top: 0 !important;
  }
}

.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
  background: #0b0d14;
  color: #fff;
  height: 56px;
  line-height: 56px;
}

.skin-blue .main-header {
  max-height: none;
}

.skin-blue .main-header .navbar {
  background: #121826;
  min-height: 56px;
  box-shadow: none;
}

.skin-blue .main-header > .navbar {
  margin-left: 230px;
}

.ic-topbar-title {
  display: none;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 56px;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: #fff;
  padding: 18px 15px;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.main-header .logo .logo-lg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  line-height: 1;
}

.main-header .logo .logo-mini {
  align-items: center;
  justify-content: center;
  height: 56px;
  line-height: 1;
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
  display: flex !important;
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
  display: none !important;
}

.ic-logo-wordmark {
  display: block;
  max-height: 44px;
  width: auto;
  max-width: 210px;
  mix-blend-mode: screen;
}

.ic-logo-mark {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
  mix-blend-mode: screen;
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  .skin-blue .main-header .logo {
    width: 100%;
  }
}

/* User panel is name + actions only (no duplicate logo) */
.ic-sidebar .user-panel > .image {
  display: none;
}

.ic-sidebar .user-panel .info a {
  color: #c9d4e3 !important;
}

.ic-sidebar .user-panel .info a:hover {
  color: #fff !important;
}

.content-wrapper,
.right-side {
  padding-top: 6px;
}

html body .content-wrapper#bgimage,
html body #bgimage.content-wrapper,
html body #bgimage {
  background: var(--ic-bg) !important;
  background-image: none !important;
}

.content-header {
  position: relative;
  padding: 18px 28px 12px;
  background: transparent;
}

/* Keep page body inset from the AdminLTE sidebar / viewport edges */
.content {
  padding: 12px 28px 28px;
}

/* Step bars sometimes sit as direct children of content-wrapper (outside .content) */
.content-wrapper > .account-wizard-steps,
.content-wrapper > ol.pc-steps {
  margin: 0 28px 16px;
  box-sizing: border-box;
}

.content-wrapper .content-header h1,
.content-wrapper .content-header h2,
.content-wrapper .content-header h3,
.content-wrapper .content-header h4,
.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h4,
.content-wrapper h5,
.content-wrapper h6 {
  color: var(--ic-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.content-header > h1 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.25;
}

.content-header > h1 > small,
.content-header h1 small,
.content-header small {
  display: inline-block;
  margin-left: 8px;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ic-muted) !important;
  opacity: 1 !important;
  line-height: 1.4;
}

.content-header > .breadcrumb {
  top: 18px;
  right: 16px;
  background: transparent;
  font-size: 12px;
}

.content-header > .breadcrumb > li > a,
.content-header > .breadcrumb > .active {
  color: var(--ic-muted);
}

.content-header > .breadcrumb > li > a:hover {
  color: var(--ic-blue);
  background: transparent;
}

.content-header .btn {
  border: 0;
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: none;
}

.content-header .btn-success {
  background: var(--ic-green);
}

.content-header .btn-success:hover,
.content-header .btn-success:focus {
  background: #18864a;
}

.content-header .btn-primary {
  background: var(--ic-blue);
}

.content-header .btn-primary:hover,
.content-header .btn-primary:focus {
  background: #246fa3;
}

.content-wrapper a:hover:not(.btn),
.content-wrapper a:focus:not(.btn),
.content-header a:hover:not(.btn),
.main-footer a:hover:not(.btn),
.ic-sidebar a:hover {
  background-color: transparent;
}

.content-wrapper a,
.content-wrapper a:visited {
  color: var(--ic-blue);
}

.content-wrapper a.btn,
.content-wrapper a.btn:visited,
.content-wrapper a.btn:hover {
  color: #fff;
  background-image: none;
}

.content-wrapper a.btn-default,
.content-wrapper a.btn-default:visited,
.content-wrapper a.btn-default:hover {
  color: var(--t-ink-2, #334155);
}

.box {
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow);
  background: var(--ic-card);
}

.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
  border-top-width: 0;
}

.box-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ic-line);
}

.box-title,
.modal-title {
  color: var(--ic-ink) !important;
  font-weight: 650;
}

.box-body {
  padding: 14px 16px 16px;
}

.btn {
  border-radius: 8px;
  font-weight: 600;
}

.btn-primary {
  background-color: var(--ic-blue);
  border-color: var(--ic-blue);
  color: #fff;
}

.btn-success {
  background-color: var(--ic-green);
  border-color: var(--ic-green);
  color: #fff;
}

.btn-info {
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-warning {
  background-color: #e67e22;
  border-color: #e67e22;
}

.btn-danger {
  background-color: var(--t-danger, #c0392b);
  border-color: var(--t-danger, #c0392b);
}

.content-wrapper a.btn-danger,
.content-wrapper a.btn-danger:visited,
.content-wrapper a.btn-danger:hover,
.content-wrapper a.btn-danger:focus {
  color: #fff;
  background-color: #c0392b;
  border-color: #c0392b;
}

.content-wrapper a.btn-danger:hover,
.content-wrapper a.btn-danger:focus {
  background-color: #a93226;
  border-color: #a93226;
}

.form-control,
.selectize-input {
  border-radius: 8px;
  border-color: #cfd8e3;
  box-shadow: none;
  height: 36px;
}

textarea.form-control {
  height: auto;
  min-height: 88px;
}

.form-control:focus {
  border-color: var(--ic-blue);
  box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.16);
}

.table > thead > tr > th {
  background: var(--t-surface-2, #f6f8fb);
  color: var(--t-ink-2, #334155);
  font-weight: 650;
  border-bottom: 1px solid var(--ic-line) !important;
  padding: 4px 8px;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 4px 8px;
  vertical-align: middle;
  line-height: 1.25;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--t-tint-slate, #fafbfd);
}

.table > tbody > tr:hover {
  background-color: var(--t-tint-slate, #f3f7fb);
}

.small-box {
  border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow);
}

.ic-dashboard .content-header h1 small,
.ic-dash-heading h1 small {
  color: var(--ic-muted) !important;
  font-weight: 500 !important;
}

.ic-dash-heading {
  padding-top: 8px;
  padding-bottom: 4px;
}

.ic-dash-heading h1 {
  font-size: 18px !important;
  font-weight: 700;
}

.ic-dash-section {
  padding-top: 4px;
  padding-bottom: 8px;
}

/* Stat cards in a row must end level. A card with no list to open (the supplier
   credit one is the first) is a div rather than an anchor, and so misses both the
   "View list" footer and the 16px bottom margin the anchor variant is restyled to,
   keeping AdminLTE's 20px. Together that left it 7px short and the row ragged.

   Stretching the columns handles the missing footer for any future card without
   hard-coding the footer's height; normalising the margin handles the rest.
   Scoped to the ops board so no other dashboard's row layout moves. */
.ic-ops-board .ic-dash-section > .row {
  display: flex;
  flex-wrap: wrap;
}

.ic-ops-board .ic-dash-section > .row > [class*="col-"] {
  display: flex;
}

.ic-ops-board .ic-dash-section > .row > [class*="col-"] > .small-box {
  flex: 1 1 auto;
  margin-bottom: 16px;
}

a.ic-stat-card,
a.ic-stat-card:visited,
.content-wrapper a.ic-stat-card,
.content-wrapper a.ic-stat-card:visited {
  display: block;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  min-height: 118px;
  margin-bottom: 16px;
  text-decoration: none;
  color: #fff !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.ic-stat-card:hover,
a.ic-stat-card:focus,
.content-wrapper a.ic-stat-card:hover,
.content-wrapper a.ic-stat-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  color: #fff !important;
  text-decoration: none;
}

.ic-stat-card .inner {
  padding: 16px 16px 40px;
}

.ic-stat-card .inner h3,
.content-wrapper .ic-stat-card .inner h3,
.ic-stat-card .inner p,
.content-wrapper .ic-stat-card .inner p,
.ic-stat-card .inner a,
.content-wrapper .ic-stat-card .inner a {
  color: #fff !important;
}

.ic-stat-card .inner h3,
.content-wrapper .ic-stat-card .inner h3 {
  font-size: 28px;
  margin: 0 0 6px;
  font-weight: 700;
}

.ic-stat-card .inner p,
.content-wrapper .ic-stat-card .inner p {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.ic-stat-card .icon,
.ic-stat-card .icon > i {
  color: rgba(0, 0, 0, 0.15) !important;
}

.ic-stat-card .small-box-footer,
.content-wrapper a.ic-stat-card .small-box-footer {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.8) !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
}

a.ic-isp-card {
  min-height: 148px;
}

.ic-isp-card .ic-isp-card-meta {
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: 0.92;
  line-height: 1.45;
}

a.ic-isp-card.is-selected {
  box-shadow: 0 0 0 3px rgba(27, 36, 51, 0.28), 0 4px 12px rgba(0, 0, 0, 0.18);
}

a.ic-isp-card.ic-stat-somali,
a.ic-stat-card.ic-stat-somali {
  background-color: #0f766e !important;
}

a.ic-isp-card.ic-stat-mvt,
a.ic-stat-card.ic-stat-mvt {
  background-color: #605ca8 !important;
}

/* Classic AdminLTE dashboard tile fills */
.ic-stat-pending,
.small-box.bg-aqua,
a.ic-stat-card.ic-stat-pending,
a.ic-stat-card.bg-aqua { background-color: #00c0ef !important; }

.ic-stat-active,
.small-box.bg-green,
a.ic-stat-card.ic-stat-active,
a.ic-stat-card.bg-green { background-color: #00a65a !important; }

.ic-stat-deleted,
.small-box.bg-red,
a.ic-stat-card.ic-stat-deleted,
a.ic-stat-card.bg-red { background-color: #dd4b39 !important; }

.ic-stat-suspended,
.small-box.bg-yellow,
a.ic-stat-card.ic-stat-suspended,
a.ic-stat-card.bg-yellow { background-color: #f39c12 !important; }

.ic-stat-expired,
.small-box.bg-orange,
a.ic-stat-card.ic-stat-expired,
a.ic-stat-card.bg-orange { background-color: #ff851b !important; }

.ic-stat-prepaid,
.small-box.bg-teal,
a.ic-stat-card.ic-stat-prepaid,
a.ic-stat-card.bg-teal { background-color: #39cccc !important; }

.ic-stat-mandate,
.small-box.bg-purple,
a.ic-stat-card.ic-stat-mandate,
a.ic-stat-card.bg-purple { background-color: #605ca8 !important; }

.ic-stat-archive,
.small-box.bg-gray,
a.ic-stat-card.ic-stat-archive,
a.ic-stat-card.bg-gray {
  background-color: var(--t-tint-slate, #d2d6de) !important;
  color: var(--t-tint-slate-ink, #111) !important;
}

.ic-stat-archive .inner h3,
.ic-stat-archive .inner p,
.ic-stat-archive .inner a,
.small-box.bg-gray .inner h3,
.small-box.bg-gray .inner p,
.small-box.bg-gray .inner a,
a.ic-stat-card.ic-stat-archive .inner h3,
a.ic-stat-card.ic-stat-archive .inner p,
a.ic-stat-card.bg-gray .inner h3,
a.ic-stat-card.bg-gray .inner p {
  color: var(--t-tint-slate-ink, #111) !important;
}

.ic-stat-archive .small-box-footer,
.small-box.bg-gray .small-box-footer,
a.ic-stat-card.ic-stat-archive .small-box-footer,
a.ic-stat-card.bg-gray .small-box-footer {
  color: rgba(0, 0, 0, 0.65) !important;
}

.small-box .small-box-footer {
  border-radius: 0 0 var(--ic-radius) var(--ic-radius);
}

.main-footer {
  background: var(--t-surface, #fff);
  border-top: 1px solid var(--ic-line);
  color: var(--ic-muted);
  margin-left: 230px;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
  background-color: var(--ic-blue);
  border-color: var(--ic-blue);
  color: #fff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > .active > a,
.dataTables_wrapper .dataTables_paginate .pagination > .active > a:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--ic-blue) !important;
  border-color: var(--ic-blue) !important;
  color: #fff !important;
}

.vhost-table-toolbar {
  background: var(--t-surface-2, #f6f8fb) !important;
  border: 1px solid var(--ic-line) !important;
  border-radius: 10px !important;
}

.vhost-table-toolbar .dataTables_filter input,
.vhost-table-toolbar .dataTables_length select,
.column-visibility-btn {
  border-radius: 8px !important;
}

.vhost-table-toolbar .dataTables_filter input,
.vhost-table-toolbar .dataTables_length select,
.column-visibility-btn,
.vhost-product-filters select,
.vhost-isp-filter-btn {
  height: 40px !important;
  min-height: 40px;
  font-size: 14px !important;
  border-radius: 10px !important;
}

.status-filter-group {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

.status-filter-group .status-chip {
  appearance: none;
  min-height: 40px;
  padding: 8px 16px !important;
  border: 1px solid var(--ic-line) !important;
  border-radius: 999px !important;
  background: var(--t-surface, #fff) !important;
  color: var(--ic-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3;
}

.status-filter-group .status-chip:hover {
  background: var(--t-tint-slate, #f4f7fa) !important;
}

.status-filter-group .status-chip.status-filter-selected {
  background: var(--ic-blue) !important;
  border-color: var(--ic-blue) !important;
  color: #fff !important;
}

.vhost-product-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 4px;
}

.vhost-product-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vhost-service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vhost-service-tab,
.vhost-supplier-item,
.vhost-status-seg button,
.vhost-product-clear {
  appearance: none;
  border: 1px solid var(--ic-line);
  background: var(--t-surface, #fff);
  color: var(--ic-ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.vhost-service-tab .count,
.vhost-supplier-item .count {
  margin-left: 6px;
  color: var(--ic-muted);
  font-weight: 500;
}

.vhost-service-tab.is-selected,
.vhost-supplier-item.is-selected,
.vhost-status-seg button.is-selected {
  background: var(--ic-blue);
  border-color: var(--ic-blue);
  color: #fff;
}

.vhost-service-tab.is-selected .count,
.vhost-supplier-item.is-selected .count {
  color: rgba(255, 255, 255, 0.86);
}

.vhost-product-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vhost-product-controls select {
  height: 34px;
  border: 1px solid var(--ic-line);
  border-radius: 8px;
  background: var(--t-surface, #fff);
  padding: 0 10px;
  min-width: 150px;
  color: var(--ic-ink);
}

.vhost-status-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vhost-product-clear {
  border-radius: 8px;
  color: var(--ic-muted);
}

.vhost-product-clear:hover {
  color: var(--ic-ink);
  border-color: #b7c3d1;
}

.vhost-product-body {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.vhost-supplier-nav {
  flex: 0 0 220px;
  max-height: 640px;
  overflow: auto;
  background: var(--t-surface-2, #f7f9fc);
  border: 1px solid var(--ic-line);
  border-radius: 10px;
  padding: 10px;
}

.vhost-supplier-nav-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ic-muted);
  margin-bottom: 8px;
}

.vhost-supplier-search {
  width: 100%;
  height: 34px;
  margin-bottom: 8px;
  border: 1px solid var(--ic-line);
  border-radius: 8px;
  padding: 0 10px;
}

.vhost-supplier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vhost-supplier-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-radius: 8px;
  text-align: left;
}

.vhost-product-main {
  flex: 1 1 auto;
  min-width: 0;
}

.vhost-product-result {
  color: var(--ic-muted);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 991px) {
  .vhost-product-body {
    flex-direction: column;
  }

  .vhost-supplier-nav {
    flex-basis: auto;
    max-height: 240px;
  }
}

/* ---- Mobile / tablet chrome ---- */
.ic-sidebar-backdrop {
  display: none;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a, button, .btn, .sidebar-toggle, input[type="submit"] {
  touch-action: manipulation;
}

.pac-container {
  z-index: 2000 !important;
  max-width: calc(100vw - 16px);
}

body.skin-blue {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.content img,
.box-body img,
.modal img,
.signature_pad_body canvas {
  max-width: 100%;
  height: auto;
}

#map_canvas img,
.gm-style img {
  max-width: none !important;
  max-height: none !important;
}

#error_explanation {
  width: auto;
  max-width: 100%;
}

@media (max-width: 991px) {
  .content-wrapper,
  .right-side {
    padding-top: 4px;
  }

  .content {
    padding: 8px 16px calc(28px + env(safe-area-inset-bottom));
  }

  .content-header {
    padding: 12px 16px 8px;
  }

  .content-header > .breadcrumb {
    position: static;
    float: none;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
  }

  .content-header > h1 {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .content-header > h1 > small,
  .content-header h1 small {
    display: block;
    margin: 4px 0 0;
    margin-left: 0;
  }

  .content-header .pull-right,
  .content-header p .pull-right {
    float: none !important;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .content-header p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }

  .content-header .btn {
    min-height: 42px;
  }

  .main-footer {
    margin-left: 0 !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }

  .vhost-table-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .vhost-table-toolbar-left,
  .vhost-table-toolbar-center,
  .vhost-table-toolbar-right {
    margin-left: 0 !important;
    width: 100%;
  }

  .vhost-table-toolbar .dataTables_filter,
  .vhost-table-toolbar .dataTables_filter label,
  .vhost-table-toolbar .dataTables_filter input {
    width: 100% !important;
    max-width: 100%;
  }

  .status-filter-group {
    flex-wrap: wrap;
    width: 100%;
    overflow: visible;
  }

  .vhost-product-controls select {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 767px) {
  body.skin-blue {
    overflow-x: hidden;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .skin-blue .main-header {
    display: flex !important;
    align-items: stretch;
    min-height: 56px;
    max-height: none;
    background: #121826;
  }

  .skin-blue .main-header .logo {
    display: none !important;
  }

  .skin-blue .main-header .navbar,
  .skin-blue .main-header > .navbar {
    margin-left: 0 !important;
    width: 100% !important;
    float: none !important;
    flex: 1 1 auto;
    min-height: 56px;
    background: #121826;
  }

  .ic-topbar-title {
    display: inline-block;
  }

  .skin-blue .main-header .navbar .sidebar-toggle {
    padding: 16px 18px;
    font-size: 18px;
    line-height: 1;
  }

  .skin-blue .main-sidebar,
  .skin-blue .left-side,
  .skin-blue .main-sidebar.ic-sidebar {
    padding-top: 56px;
    z-index: 1031;
  }

  .ic-sidebar .sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
  }

  .ic-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(12, 16, 24, 0.55);
    cursor: pointer;
  }

  body.sidebar-open .ic-sidebar-backdrop {
    display: block;
  }

  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0 !important;
  }

  .content .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .content [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  .box {
    margin-bottom: 12px;
  }

  .box-header,
  .box-body,
  .box-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .box-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }

  .box-footer .pull-right,
  .box-footer .pull-left {
    float: none !important;
    display: contents;
  }

  .box-footer .btn,
  .box-footer a.btn,
  .box-footer input[type="submit"],
  .box-footer button.btn {
    float: none !important;
    margin: 0 !important;
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
    text-align: center;
  }

  .btn {
    min-height: 40px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .form-control,
  .selectize-input {
    height: 44px;
    font-size: 16px !important;
    min-height: 44px;
  }

  textarea.form-control,
  select[multiple].form-control {
    height: auto;
    min-height: 88px;
  }

  .selectize-input {
    height: auto !important;
    min-height: 44px;
    line-height: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .form-group {
    overflow-wrap: anywhere;
  }

  .form-group label {
    font-size: 14px;
  }

  .table-responsive,
  .content .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    white-space: nowrap;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin: 8px 0;
  }

  .dataTables_wrapper .dataTables_paginate {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
  }

  .pagination::before,
  .pagination::after {
    display: none !important;
    content: none !important;
  }

  .modal-dialog {
    width: auto !important;
    margin: 12px;
  }

  .modal-body {
    max-height: calc(100dvh - 180px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-footer .btn,
  .modal-footer .pull-left,
  .modal-footer .pull-right {
    float: none !important;
    margin: 0 !important;
    flex: 1 1 calc(50% - 8px);
  }

  .alert {
    overflow-wrap: anywhere;
  }

  .small-box .inner h3 {
    font-size: 26px;
  }

  .small-box p {
    font-size: 13px;
    line-height: 1.3;
  }

  .datepicker.dropdown-menu {
    max-width: calc(100vw - 24px);
  }

  .column-visibility-menu {
    right: auto;
    left: 0;
    min-width: 0;
    width: 280px;
    max-width: calc(100vw - 32px);
  }

  .signature_pad_body canvas {
    width: 100% !important;
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .content .col-xs-6 {
    width: 100%;
  }

  .box-footer .btn,
  .box-footer a.btn,
  .box-footer input[type="submit"],
  .box-footer button.btn,
  .modal-footer .btn {
    flex-basis: 100%;
  }

  .content-header .btn {
    width: 100%;
  }
}

/* Force-restyle original AdminLTE dashboard tiles (live HTML still uses bg-aqua etc.) */
html body .content-wrapper#bgimage,
html body #bgimage,
.skin-blue .content-wrapper {
  background: var(--t-tint-blue, #d5dee9) !important;
  background-image: none !important;
}

.skin-blue .content-wrapper .content-header h1,
.skin-blue .content-wrapper .content-header h2,
.skin-blue .content-wrapper .content-header h3,
.skin-blue .content-wrapper h1,
.skin-blue .content-wrapper h2,
.skin-blue .content-wrapper h3 {
  color: var(--t-ink, #1b2433) !important;
}

.skin-blue .content-wrapper .content-header h1 small,
.skin-blue .content-wrapper .content-header small {
  color: var(--t-ink-2, #334155) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.skin-blue .content-wrapper .content-header > .breadcrumb,
.skin-blue .content-wrapper .content-header > .breadcrumb > li,
.skin-blue .content-wrapper .content-header > .breadcrumb > li > a,
.skin-blue .content-wrapper .content-header > .breadcrumb > .active {
  color: var(--t-ink-2, #334155) !important;
}

.skin-blue .content-wrapper .small-box {
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

.skin-blue .content-wrapper .small-box .inner h3,
.skin-blue .content-wrapper .small-box p,
.skin-blue .content-wrapper .small-box p a,
.skin-blue .content-wrapper .small-box a {
  color: #fff !important;
}

.skin-blue .content-wrapper .small-box .icon,
.skin-blue .content-wrapper .small-box .icon > i {
  color: rgba(0, 0, 0, 0.15) !important;
}

.skin-blue .content-wrapper .small-box .small-box-footer {
  background: rgba(0, 0, 0, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-top: 0 !important;
}

.skin-blue .content-wrapper .small-box.bg-aqua,
.skin-blue .content-wrapper .ic-stat-pending { background-color: #00c0ef !important; }
.skin-blue .content-wrapper .small-box.bg-green,
.skin-blue .content-wrapper .ic-stat-active { background-color: #00a65a !important; }
.skin-blue .content-wrapper .small-box.bg-red,
.skin-blue .content-wrapper .ic-stat-deleted { background-color: #dd4b39 !important; }
.skin-blue .content-wrapper .small-box.bg-yellow,
.skin-blue .content-wrapper .ic-stat-suspended { background-color: #f39c12 !important; }
.skin-blue .content-wrapper .small-box.bg-orange,
.skin-blue .content-wrapper .ic-stat-expired { background-color: #ff851b !important; }
.skin-blue .content-wrapper .small-box.bg-teal,
.skin-blue .content-wrapper .ic-stat-prepaid { background-color: #39cccc !important; }
.skin-blue .content-wrapper .small-box.bg-purple,
.skin-blue .content-wrapper .ic-stat-mandate { background-color: #605ca8 !important; }
.skin-blue .content-wrapper .small-box.bg-gray,
.skin-blue .content-wrapper .ic-stat-archive {
  background-color: var(--t-tint-slate, #d2d6de) !important;
  color: var(--t-tint-slate-ink, #111) !important;
}
.skin-blue .content-wrapper .small-box.bg-gray .inner h3,
.skin-blue .content-wrapper .small-box.bg-gray p,
.skin-blue .content-wrapper .small-box.bg-gray a,
.skin-blue .content-wrapper .ic-stat-archive .inner h3,
.skin-blue .content-wrapper .ic-stat-archive p,
.skin-blue .content-wrapper .ic-stat-archive a {
  color: var(--t-tint-slate-ink, #111) !important;
}
.skin-blue .content-wrapper .small-box.bg-gray .small-box-footer,
.skin-blue .content-wrapper .ic-stat-archive .small-box-footer {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* ---- Record / product / extra-service detail ---- */
.ic-record {
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  box-shadow: var(--ic-shadow);
  overflow: hidden;
}

.ic-record-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 22px 18px;
  background: linear-gradient(180deg, var(--t-surface-2, #f7f9fc) 0%, var(--t-surface, #fff) 100%);
  border-bottom: 1px solid var(--ic-line);
}

.ic-record-kicker {
  margin: 0 0 6px;
  color: var(--ic-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-record-hero h2 {
  margin: 0 0 6px;
  color: var(--ic-ink) !important;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.ic-record-sub {
  margin: 0;
  color: var(--ic-muted);
  font-size: 14px;
}

.ic-record-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 160px;
  text-align: right;
}

.ic-price {
  color: var(--ic-green);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.ic-price-label {
  color: var(--ic-muted);
  font-size: 12px;
}

.ic-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.ic-status.is-active { background: var(--t-tint-slate, #e7f8ee); color: var(--t-tint-green-ink, #157347); }
.ic-status.is-pending { background: var(--t-tint-blue, #eef6fb); color: var(--t-link, #1d6fa5); }
.ic-status.is-suspended { background: var(--t-tint-amber, #fff4e5); color: var(--t-tint-amber-ink, #9f5f00); }
.ic-status.is-deleted { background: var(--t-tint-red, #fdeeee); color: var(--t-tint-red-ink, #b42318); }
.ic-status.is-expired { background: var(--t-tint-amber, #fff1e6); color: var(--t-tint-red-ink, #c2410c); }
.ic-status.is-inactive { background: var(--t-surface-3, #eef1f6); color: var(--t-tint-blue-ink, #5e6d82); }
.ic-status.is-default { background: var(--t-surface-3, #eef1f6); color: var(--t-ink-2, #334155); }

.ic-presence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ic-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}

.ic-presence-dot.is-online {
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.ic-presence-dot.is-offline {
  background: #dc2626;
}

.ic-presence-dot.is-never {
  background: #94a3b8;
}

.ic-presence-filters {
  margin-bottom: 16px;
}

.ic-presence-filters .form-group {
  margin-right: 8px;
  margin-bottom: 8px;
}

.ic-presence-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ic-presence-history li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #e5edf5;
}

.ic-presence-history-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ic-presence-history-icon.is-online {
  background: var(--t-tint-slate, #e7f8ee);
  color: var(--t-tint-green-ink, #157347);
}

.ic-presence-history-icon.is-offline {
  background: var(--t-surface-3, #eef1f6);
  color: var(--t-tint-blue-ink, #5e6d82);
}

.ic-presence-history-icon.is-page {
  background: var(--t-tint-blue, #eef6fb);
  color: var(--t-link, #1d6fa5);
}

.ic-presence-history code {
  font-size: 12px;
  color: var(--t-tint-red-ink, #9b1c2e);
}

.ic-presence-inline .ic-presence-history {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 8px;
}

.ic-record-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px 8px 8px;
}

.ic-record-section {
  grid-column: 1 / -1;
  margin: 14px 14px 4px;
  padding-top: 8px;
  border-top: 1px solid var(--ic-line);
  color: var(--ic-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-record-section:first-child {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

.ic-kv {
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f6;
  min-width: 0;
}

.ic-kv dt {
  margin: 0 0 4px;
  color: var(--ic-muted);
  font-size: 12px;
  font-weight: 650;
}

.ic-kv dd {
  margin: 0;
  color: var(--ic-ink);
  font-size: 14px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ic-record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ic-line);
  background: var(--t-tint-slate, #f8fafc);
}

.ic-record-actions-primary,
.ic-record-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ic-record-actions .btn {
  margin: 0;
}

.ic-account-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.ic-toolbar-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 32px;
  flex: 1 1 auto;
  min-width: 0;
}

.ic-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-top: 18px;
}

.ic-toolbar-group:not(:has(a, button, input)) {
  display: none;
}

.ic-toolbar-group::before {
  content: attr(data-label);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--ic-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-account-toolbar .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
  box-shadow: none !important;
}

.ic-account-toolbar .btn-default,
.ic-account-toolbar .btn-default:visited {
  background: var(--t-surface, #fff);
  border-color: #c9d4e0;
  color: var(--t-ink, #1b2433);
}

.ic-account-toolbar .btn-default:hover,
.ic-account-toolbar .btn-default:focus {
  background: var(--t-tint-slate, #eef3f8);
  border-color: #a9b8c9;
  color: var(--t-ink, #1b2433);
}

.ic-account-toolbar .btn-success,
.ic-account-toolbar .btn-success:visited {
  background: #157347;
  border-color: #157347;
  color: #fff;
}

.ic-account-toolbar .btn-warning,
.ic-account-toolbar .btn-warning:visited {
  background: var(--t-surface, #fff);
  border-color: #e0a106;
  color: var(--t-tint-amber-ink, #9a6700);
}

.ic-account-toolbar .btn-warning:hover,
.ic-account-toolbar .btn-warning:focus {
  background: var(--t-tint-amber, #fff8e6);
  border-color: #c48900;
  color: var(--t-tint-amber-ink, #7a5200);
}

.ic-account-toolbar .btn-danger,
.ic-account-toolbar .btn-danger:visited {
  background: var(--t-surface, #fff);
  border-color: #d63b3b;
  color: var(--t-danger-text, #c0392b);
}

.ic-account-toolbar .btn-danger:hover,
.ic-account-toolbar .btn-danger:focus {
  background: var(--t-tint-slate, #fdf2f2);
  border-color: #b83a3a;
  color: var(--t-tint-red-ink, #a93226);
}

.ic-toolbar-back,
.ic-toolbar-back:visited {
  margin-left: auto;
  align-self: flex-end;
  padding: 6px 2px 2px;
  color: var(--ic-muted) !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

.ic-toolbar-back:hover,
.ic-toolbar-back:focus {
  color: var(--ic-ink) !important;
}

.ic-back-bar {
  padding: 14px 15px 0;
}

.ic-back-btn,
.ic-back-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid #c9d4e0;
  border-radius: 8px;
  background: var(--t-surface, #fff);
  color: var(--t-ink, #1b2433) !important;
  font-size: 13px;
  font-weight: 650;
  line-height: 32px;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(18, 24, 38, 0.06);
}

.ic-back-btn i {
  font-size: 14px;
  line-height: 1;
}

.ic-back-btn:hover,
.ic-back-btn:focus {
  background: var(--t-tint-slate, #eef3f8);
  border-color: #a9b8c9;
  color: var(--t-ink, #1b2433) !important;
}

.ic-back-btn:focus {
  outline: 0;
}

.ic-back-btn:focus-visible {
  outline: 2px solid #2e86c1;
  outline-offset: 2px;
}

@media print {
  .ic-back-bar {
    display: none !important;
  }
}

.ic-form-shell {
  max-width: 800px;
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  box-shadow: var(--ic-shadow);
}

.ic-table-shell {
  max-width: none;
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  box-shadow: var(--ic-shadow);
  overflow: hidden;
}

.ic-table-shell > .table-responsive,
.ic-table-shell > .vhost-hscroll > .table-responsive,
.ic-table-shell .box-body {
  padding: 0;
}

.ic-table-shell .table {
  margin: 0;
}

.content table.table:not(.spx-form-table):not(.spx-items),
.content table.dataTable:not(.spx-form-table):not(.spx-items) {
  font-size: 12px;
}

.content table.table:not(.spx-form-table):not(.spx-items) > thead > tr > th,
.content table.table:not(.spx-form-table):not(.spx-items) > tbody > tr > td,
.content table.dataTable:not(.spx-form-table):not(.spx-items) > thead > tr > th,
.content table.dataTable:not(.spx-form-table):not(.spx-items) > tbody > tr > td {
  padding: 4px 8px !important;
  line-height: 1.2 !important;
  vertical-align: middle;
}

.content table.table .btn,
.content table.table .btn-sm,
.content table.dataTable .btn,
.content table.dataTable .btn-sm {
  padding: 1px 8px;
  font-size: 11px;
  line-height: 1.2;
  height: auto;
}

.content table.table .ic-status,
.content table.dataTable .ic-status,
.content table.table .spx-pill,
.content table.dataTable .spx-pill {
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.2;
}

.js-column-visibility > tbody > tr > td,
.js-column-visibility > thead > tr > th {
  white-space: nowrap;
}

.js-column-visibility td.ic-col-wrap,
.js-column-visibility th.ic-col-wrap {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-na {
  color: var(--t-tint-blue-ink, #94a3b8);
}

.ic-form-shell > .box-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--ic-line);
}

.ic-form-shell > .box-header .box-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--t-ink, #1b2433);
}

.ic-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  padding: 18px 22px 10px;
}

.ic-form-grid .pc-debit-block,
.ic-form-grid .js-debit-order-fields.pc-debit-block {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  margin: 4px 0 8px;
  padding: 18px 18px 10px;
  background: var(--t-tint-slate, #f0f7fc);
  border: 1px solid #c5d9e8;
  border-radius: 12px;
}

.ic-form-grid .pc-debit-block .ic-record-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  color: var(--t-tint-blue-ink, #1a5276);
}

.ic-form-grid .pc-debit-lede {
  margin: 0 0 4px !important;
  line-height: 1.5;
}

.ic-form-grid .pc-debit-mandate .pc-terms-scroll {
  max-height: 200px;
  overflow: auto;
  border: 1px solid var(--t-line, #dce3ea);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--t-surface, #fff);
  font-size: 13px;
  line-height: 1.55;
}

.pc-fibre-line-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 8px 0 4px;
}

.pc-fibre-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #c5d9e8;
  border-radius: 10px;
  background: var(--t-tint-slate, #f8fbfd);
  font-weight: 600;
  color: var(--t-tint-blue-ink, #1b2838);
  cursor: pointer;
}

.pc-fibre-choice input {
  margin: 0;
}

.pc-fibre-line-flow .js-fibre-line-followups {
  margin-top: 8px;
  padding: 14px 16px 6px;
  border: 1px solid var(--t-line, #dce3ea);
  border-radius: 10px;
  background: var(--t-tint-slate, #f8fafc);
}

.ic-form-grid .form-group {
  float: none;
  width: auto;
  min-width: 0;
  margin-bottom: 0;
}

.ic-form-grid .form-group > label {
  display: block;
  margin-bottom: 6px;
  color: var(--t-muted, #5b6b7c);
  font-size: 12px;
  font-weight: 650;
}

.ic-form-grid .form-group .help-block {
  margin: 6px 0 0;
  color: var(--t-muted, #5b6b7c);
  font-size: 12px;
  line-height: 1.4;
}

.ic-form-grid .box-footer {
  padding: 16px 0 8px;
  background: transparent;
  border-top: 0;
}

.ic-form-grid .box-footer .btn {
  margin-right: 8px;
}

.ic-form-grid .form-group.ic-span-2,
.ic-form-grid .box-footer,
.ic-form-grid .ic-span-2,
.ic-form-grid .alert,
.ic-form-grid .signature_pad,
.ic-form-grid .ic-record-section,
.ic-form-grid .esign-terms-panel,
.ic-form-grid .manual-contract-panel {
  grid-column: 1 / -1;
}

.ic-form-shell .ic-record-section {
  margin: 6px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ic-line);
  color: var(--t-ink, #1b2433);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.ic-form-grid > .ic-record-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ic-form-grid .account-cred-actions,
.ic-form-grid .account-paste-client {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ic-form-grid .account-cred-actions .btn,
.ic-form-grid .account-paste-client .btn {
  align-self: flex-start;
}

.ic-form-grid .js-fibre-complex {
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}

.js-fibre-complex { display: none; }

.new-account-form .help-block { margin: 6px 0 0; color: var(--t-muted, #5b6b7c); font-size: 12px; line-height: 1.4; }
.new-account-form .alert { margin-bottom: 0; padding: 10px 12px; }
.new-account-form .box-footer {
  padding: 16px 0 8px;
  background: transparent;
  border-top: 0;
}
.new-account-form .box-footer .btn { margin-right: 8px; }

.ic-selected-product {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--t-tint-slate, #f5fafd);
  border: 1px solid #d4e6f1;
  border-radius: 10px;
}

.ic-selected-product strong {
  display: block;
  margin-bottom: 4px;
}

.ic-selected-product .ic-price {
  font-size: 22px;
}

/* Shared order wizard (accounts + extra services) */
.account-wizard-steps {
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
  color: var(--ic-muted);
}

/* Admin + portal New Account: keep the form card clearly inset */
.content .new-account-form > .col-md-10,
.content #account-wizard {
  float: none;
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
}

.account-wizard-steps li {
  padding: 8px 0;
  border-bottom: 2px solid var(--ic-line);
  flex: 1;
  font-weight: 600;
}

.account-wizard-steps li.is-current {
  color: var(--ic-blue);
  border-bottom-color: var(--ic-blue);
}

.account-wizard-steps li.is-done {
  color: var(--ic-green);
  border-bottom-color: var(--ic-green);
}

.account-wizard-context {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--t-surface-2, #f6f8fb);
  border: 1px solid var(--ic-line);
  border-radius: 8px;
  color: var(--ic-ink);
}

.account-wizard-search-wrap {
  margin-bottom: 14px;
}

.account-wizard-search-wrap label {
  display: block;
  margin-bottom: 4px;
  color: var(--ic-ink);
  font-weight: 600;
}

#account-wizard-search,
.account-wizard-search {
  display: block;
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--ic-blue);
  border-radius: 8px;
  background: var(--t-surface, #fff);
  color: var(--ic-ink);
  font-size: 15px;
}

.account-wizard-tile,
.account-wizard-card {
  cursor: pointer;
}

.account-wizard-tile {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  padding: 22px 12px;
  text-align: center;
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-radius: 12px;
  color: var(--ic-ink);
}

.account-wizard-tile i {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  color: var(--ic-blue);
}

.account-wizard-tile strong {
  display: block;
}

.account-wizard-count {
  display: block;
  margin-top: 6px;
  color: var(--ic-muted);
  font-size: 12px;
}

.account-wizard-tile:hover,
.account-wizard-tile.is-active {
  border-color: var(--ic-blue);
  background: var(--t-tint-slate, #ecf6fb);
}

.account-wizard-list {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 14px 8px 2px;
  scrollbar-gutter: stable;
}

.account-wizard-heading {
  margin: 14px 0 8px;
  color: var(--ic-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-wizard-card {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  text-align: left;
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-radius: 10px;
  color: var(--ic-ink);
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
  touch-action: manipulation;
}

.account-wizard-card:hover,
.account-wizard-card.is-active {
  border-color: var(--ic-blue);
  box-shadow: 0 0 0 2px rgba(46, 134, 193, 0.18);
}

.account-wizard-card-main {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
}

.account-wizard-card-title {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--t-tint-slate-ink, #222);
}

.account-wizard-card-sub {
  display: block;
  margin-top: 4px;
  color: var(--t-tint-slate-ink, #666);
  font-size: 12px;
}

.account-wizard-card-tags {
  display: block;
  margin-top: 8px;
}

.account-wizard-tag {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 2px 8px;
  background: var(--t-tint-slate, #f4f4f4);
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  color: var(--t-tint-slate-ink, #555);
  font-size: 11px;
  font-weight: 600;
}

.account-wizard-tag.is-speed {
  background: var(--t-tint-slate, #ecf6fb);
  border-color: #c5e0ef;
  color: var(--ic-blue);
}

.account-wizard-card-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  flex: 0 0 168px;
  width: 168px;
  padding: 12px 14px;
  background: var(--t-tint-slate, #f4faf6);
  border-left: 1px solid #d7eadc;
  text-align: right;
}

.account-wizard-card-monthly {
  display: block;
  color: var(--ic-green);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.account-wizard-card-monthly.is-range {
  font-size: 16px;
}

.account-wizard-card-monthly-label {
  display: block;
  margin-top: 3px;
  color: var(--t-tint-slate-ink, #666);
  font-size: 11px;
}

.account-wizard-card-once {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
}

.account-wizard-card-once.is-free { color: var(--ic-green); }
.account-wizard-card-once.is-paid {
  color: var(--t-tint-red-ink, #c83522);
  background: var(--t-tint-red, #fdeeee);
  border: 1px solid #f5c6c2;
  border-radius: 3px;
  padding: 2px 6px;
}
.account-wizard-card-once.is-unknown { color: var(--t-tint-slate-ink, #888); }

.account-wizard-card-select {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 16px;
  min-width: 92px;
  background: var(--ic-blue);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.account-wizard-card.is-loading,
.account-wizard-card:disabled {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
}

.account-wizard-busy {
  margin: 0;
  padding: 28px 12px;
  text-align: center;
  color: var(--ic-muted);
  font-weight: 600;
}

.account-wizard-card--provider .account-wizard-card-price {
  background: var(--t-tint-slate, #f5fafd);
  border-left-color: #d4e6f1;
}

/* ---- Customer / member portal ---- */
.ic-notice {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-left: 6px solid var(--ic-blue);
  border-radius: 12px;
  box-shadow: var(--ic-shadow);
}

.ic-notice-warning {
  border-left-color: #d68910;
  background: var(--t-tint-slate, #fffaf0);
}

.ic-notice-pay {
  border-left-color: #148f77;
  background: var(--t-tint-slate, #f3fbf8);
}

.ic-notice h3 {
  margin: 0 0 8px;
  color: var(--ic-ink) !important;
  font-size: 16px;
  font-weight: 700;
}

.ic-notice p {
  margin: 0 0 8px;
  color: var(--ic-muted);
}

.ic-notice p:last-child,
.ic-notice .btn {
  margin-bottom: 0;
}

.ic-account-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.ic-account-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.ic-account-card.is-pay-now {
  border-left: 6px solid #148f77;
}

.ic-account-card .ic-record-hero {
  flex: 1;
}

.ic-account-card .ic-pay-now-wrap {
  margin-top: 12px;
}

.ic-pay-now-wrap form,
.ic-pay-now-wrap .ic-pay-now-btn {
  width: 100%;
}

.ic-pay-now-btn {
  height: 44px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 8px !important;
}

.ic-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--ic-muted);
  background: var(--t-surface, #fff);
  border: 1px dashed var(--ic-line);
  border-radius: 12px;
}

.ic-portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ic-signature {
  max-width: 220px;
  height: auto;
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-radius: 8px;
  padding: 6px;
}

.ic-account-meta {
  margin: 0 0 10px;
  color: var(--ic-muted);
  font-size: 13px;
}

.ic-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.ic-quick-actions a.ic-stat-card {
  flex: 1 1 180px;
  min-width: 160px;
  margin-bottom: 0;
}

.ic-record-table .table {
  margin: 0;
}

.ic-record-table .table-responsive {
  padding: 0 8px 12px;
}

.ic-select-col {
  width: 36px;
  text-align: center;
  vertical-align: middle !important;
}

.ic-select-col input {
  margin: 0;
  vertical-align: middle;
}

.ic-bulk-bar {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 8px;
  z-index: 30;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--t-tint-slate, #eff6ff);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  box-shadow: var(--ic-shadow);
}

.ic-bulk-bar.is-open {
  display: flex;
}

.ic-bulk-count {
  margin-right: 4px;
  color: var(--ic-ink);
}

.ic-kv-span {
  grid-column: 1 / -1;
}

.ic-account-record .ic-record-hero {
  padding: 20px 22px 16px;
}

.ic-account-record .ic-record-hero h2 {
  font-size: 22px;
  margin-bottom: 6px;
}

.ic-account-record .ic-record-sub {
  font-size: 14px;
}

.ic-account-record .ic-price {
  font-size: 24px;
}

.ic-account-record .ic-record-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--t-bg, #eef2f7);
}

.ic-account-record .ic-record-block {
  background: var(--t-surface, #fff);
  border: 1px solid var(--ic-line);
  border-radius: 12px;
  overflow: hidden;
}

.ic-account-record .ic-record-section {
  display: block;
  grid-column: auto;
  margin: 0;
  padding: 12px 16px;
  border-top: 0;
  border-bottom: 1px solid var(--ic-line);
  background: var(--t-tint-slate, #e8eef5);
  color: var(--t-ink, #1b2433);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ic-account-record .ic-record-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ic-account-record .ic-record-fields .ic-kv:nth-child(odd) {
  border-right: 1px solid #eef2f6;
}

.ic-account-record > .ic-history {
  margin: 0 16px 16px;
  border: 1px solid var(--ic-line);
  border-top: 1px solid var(--ic-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--t-surface, #fff);
}

.ic-account-record .ic-kv {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  padding: 10px 16px;
}

.ic-account-record .ic-kv dt {
  margin: 0;
  padding-top: 0;
  font-size: 12px;
  line-height: 1.4;
}

.ic-account-record .ic-kv dd {
  font-size: 14px;
  line-height: 1.45;
}

.ic-account-record .ic-kv p {
  margin: 0 0 4px;
}

.ic-account-record .ic-kv p:last-child {
  margin-bottom: 0;
}

.ic-account-record > .ic-record-actions {
  border-top: 0;
  border-bottom: 1px solid var(--ic-line);
  padding: 14px 16px;
}

.ic-copy-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

table .ic-copy-row {
  display: block;
  flex-wrap: nowrap;
  overflow: hidden;
}

.ic-copy-row > span,
.ic-copy-row > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

table .ic-copy-row > span,
table .ic-copy-row > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

h2.ic-copy-row {
  display: flex;
  align-items: center;
}

.ic-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid #c5d3e0;
  border-radius: 999px;
  background: var(--t-tint-slate, #f8fafc);
  color: var(--t-ink-2, #334155);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
}

.ic-copy-btn:hover,
.ic-copy-btn:focus {
  background: var(--t-tint-blue, #eef6fb);
  border-color: #8fb5d4;
  color: var(--t-link, #1d6fa5);
  outline: none;
}

.ic-copy-btn.is-copied {
  background: var(--t-tint-slate, #e7f8ee);
  border-color: #8fd0a8;
  color: var(--t-tint-green-ink, #157347);
}

.ic-copy-btn .fa {
  font-size: 12px;
}

.ic-field-action {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid #d7e4ef;
  border-radius: 999px;
  background: var(--t-surface, #fff);
  color: var(--t-link, #1d6fa5) !important;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ic-field-action:hover {
  background: var(--t-tint-blue, #eef6fb);
}

.ic-record-actions-primary:empty {
  display: none;
}

.ic-history {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ic-line);
}

.ic-history-panel {
  min-width: 0;
  border-right: 1px solid var(--ic-line);
}

.ic-history-panel:nth-child(2n) {
  border-right: 0;
}

.ic-history-panel:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: 0;
}

.ic-history-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ic-line);
  background: var(--t-tint-slate, #f8fafc);
}

.ic-history-panel h3 {
  margin: 0;
  color: var(--ic-muted) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-history-panel header span,
.ic-history-panel header a {
  color: var(--t-tint-blue-ink, #337ab7);
  font-size: 12px;
  font-weight: 650;
}

.ic-history-panel header span {
  color: var(--ic-muted);
}

.ic-history-scroll {
  max-height: 220px;
  overflow: auto;
  margin: 0;
}

.ic-note-body {
  padding: 8px 12px 10px;
  font-size: 13px;
  line-height: 1.4;
}

.ic-note-body p {
  margin: 0 0 6px;
}

.ic-note-body p:last-child {
  margin-bottom: 0;
}

.ic-note-empty {
  color: var(--ic-muted);
}

.ic-history-panel .table {
  margin: 0;
  font-size: 13px;
}

.ic-history-panel .table th {
  background: var(--t-surface, #fff);
  color: var(--ic-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--ic-line);
}

.ic-history-panel .table td:first-child,
.ic-history-panel .table th:first-child {
  white-space: nowrap;
  width: 96px;
}

.ic-activity-list {
  list-style: none;
  padding: 0;
}

.ic-activity-list li {
  display: flex;
  gap: 10px;
  padding: 5px 12px;
  border-bottom: 1px solid #eef2f6;
  font-size: 13px;
  line-height: 1.35;
}

.ic-activity-list time {
  flex: 0 0 88px;
  color: var(--ic-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.ic-activity-list span {
  min-width: 0;
  color: var(--ic-ink);
}

@media (max-width: 767px) {
  .ic-record-grid,
  .ic-form-grid,
  .ic-history {
    grid-template-columns: 1fr;
  }

  .ic-account-record .ic-kv {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
  }

  .ic-account-record .ic-record-fields {
    grid-template-columns: 1fr;
  }

  .ic-account-record .ic-record-fields .ic-kv:nth-child(odd) {
    border-right: 0;
  }

  .ic-history-panel {
    border-right: 0;
    border-bottom: 1px solid var(--ic-line);
  }

  .ic-history-panel:last-child,
  .ic-history-panel:nth-child(2n),
  .ic-history-panel:last-child:nth-child(odd) {
    border-bottom: 0;
    grid-column: auto;
  }

  .ic-record-hero-meta {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .ic-record-actions-primary,
  .ic-record-actions-secondary,
  .ic-record-actions {
    width: 100%;
  }

  .ic-record-actions .btn {
    flex: 1 1 calc(50% - 8px);
  }

  .ic-account-toolbar .btn {
    flex: 0 1 auto;
  }

  .ic-toolbar-groups {
    width: 100%;
    gap: 12px 16px;
  }

  .ic-toolbar-back {
    margin-left: 0;
  }

  .account-wizard-card {
    flex-direction: column;
  }

  .account-wizard-card-price {
    width: 100%;
    flex-basis: auto;
    align-items: flex-start;
    text-align: left;
    border-left: 0;
    border-top: 1px solid #d7eadc;
  }

  .ic-account-list {
    grid-template-columns: 1fr;
  }
}

/*
 * Small docked WhatsApp icon — stays put (no collision JS), icon-only,
 * and content gets bottom padding so pagination/controls stay clear.
 */
.content-wrapper {
  padding-bottom: 52px;
}

.main-footer {
  padding-right: 56px;
}

.ic-whatsapp-chat {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #25d366;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(18, 24, 38, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ic-whatsapp-chat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ic-whatsapp-chat-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ic-whatsapp-chat:hover,
.ic-whatsapp-chat:focus {
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 24, 38, 0.28);
}

.ic-whatsapp-chat:focus {
  outline: 0;
}

.ic-whatsapp-chat:focus-visible {
  outline: 2px solid #2e86c1;
  outline-offset: 3px;
}

body.sidebar-open .ic-whatsapp-chat {
  visibility: hidden;
  pointer-events: none;
}

/* Legacy labelled FAB markup — hide if cached HTML still has it */
.ic-whatsapp-fab {
  display: none !important;
}

@media (max-width: 767px) {
  .ic-whatsapp-chat {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 34px;
    height: 34px;
  }

  .ic-whatsapp-chat-icon svg {
    width: 16px;
    height: 16px;
  }
}

@media print {
  .ic-whatsapp-chat,
  .ic-whatsapp-fab {
    display: none !important;
  }
}

/* Splynx-parity CRM lists */
.spx-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.spx-crumb {
  color: var(--t-tint-blue-ink, #6b7a90);
  font-size: 13px;
}
.spx-crumb i { color: var(--t-tint-purple-ink, #6b2d8b); margin-right: 6px; }
.spx-title {
  margin: 4px 0 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-ink, #1b2433);
}
.spx-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.spx-filters, .spx-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.spx-filters label {
  font-size: 12px;
  font-weight: 600;
  color: var(--t-muted, #5b6b7c);
  margin: 0;
}
.spx-filters .form-control,
.spx-search .form-control {
  min-width: 140px;
  height: 34px;
}
.spx-card {
  border: 1px solid #e4ebf2;
  box-shadow: 0 1px 4px rgba(18,24,38,0.06);
  border-radius: 6px;
}
.spx-table-tools { margin-bottom: 10px; }
.spx-table thead th {
  font-size: 12px;
  text-transform: none;
  color: var(--t-muted, #4a5a6a);
  border-bottom: 1px solid #e4ebf2 !important;
  white-space: nowrap;
}
.spx-table td { vertical-align: middle; }
.spx-table a { font-weight: 600; }
.spx-sub { color: var(--t-tint-blue-ink, #8a97a8); font-size: 12px; font-weight: 400; }
.spx-customer { display: flex; align-items: center; gap: 10px; }
.spx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 32px;
}
.spx-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  background: var(--t-tint-blue, #e8f4fb);
  color: var(--t-link, #1d6fa5);
}
.spx-pri-low { background: var(--t-tint-slate, #eef2f5); color: var(--t-muted, #5b6b7c); }
.spx-pri-medium { background: var(--t-tint-blue, #e8f4fb); color: var(--t-link, #1d6fa5); }
.spx-pri-high { background: var(--t-tint-amber, #fde8d8); color: var(--t-tint-red-ink, #ac4d1e); }
.spx-pri-critical { background: var(--t-tint-red, #fde2e2); color: var(--t-tint-red-ink, #bc382a); }
.spx-st-new { background: var(--t-tint-blue, #e8f4fb); color: var(--t-link, #1d6fa5); }
.spx-st-work_in_progress { background: var(--t-tint-amber, #fff4d6); color: var(--t-tint-amber-ink, #876b00); }
.spx-st-waiting_customer, .spx-st-waiting_agent { background: var(--t-tint-purple, #f3e8fb); color: var(--t-tint-purple-ink, #6b2d8b); }
.spx-st-process_cancellation { background: var(--t-tint-red, #fde2e2); color: var(--t-tint-red-ink, #bc382a); }
.spx-st-resolved { background: var(--t-tint-green, #e6f6ec); color: var(--t-tint-green-ink, #197d44); }
.spx-assignee { background: var(--t-tint-slate, #eef4ff) !important; color: var(--t-tint-slate-ink, #3d5a80) !important; border: 1px solid #c5d4ef !important; }
.spx-assignee-none { background: var(--t-tint-purple, #f3eefb) !important; color: var(--t-brand-text, #5b2c86) !important; border: 1px dashed #9b7bb8 !important; }
.spx-lead-new_enquiry { background: var(--t-tint-blue, #e8f4fb); color: var(--t-link, #1d6fa5); }
.spx-lead-quoted { background: var(--t-tint-blue, #e8f4fb); color: var(--t-link, #1d6fa5); }
.spx-lead-contacted_follow_up { background: var(--t-tint-amber, #fde8d8); color: var(--t-tint-red-ink, #ac4d1e); }
.spx-lead-waiting_quote_signature,
.spx-lead-generate_contract,
.spx-lead-waiting_signed_contract,
.spx-lead-waiting_installation,
.spx-lead-contract_received_upstream { background: #2d3340; color: #fff; }
.spx-lead-error_with_installation { background: var(--t-tint-red, #fde2e2); color: var(--t-tint-red-ink, #bc382a); }
.spx-lead-won { background: var(--t-tint-green, #e6f6ec); color: var(--t-tint-green-ink, #197d44); }
.spx-lead-lost { background: var(--t-tint-slate, #eef2f5); color: var(--t-muted, #5b6b7c); }
.spx-quote-new { background: var(--t-tint-blue, #e8f4fb); color: var(--t-link, #1d6fa5); }
.spx-quote-sent { background: var(--t-tint-amber, #fff4d6); color: var(--t-tint-amber-ink, #876b00); }
.spx-quote-on_review { background: var(--t-tint-purple, #f3e8fb); color: var(--t-tint-purple-ink, #6b2d8b); }
.spx-quote-accepted { background: var(--t-tint-green, #e6f6ec); color: var(--t-tint-green-ink, #197d44); }
.spx-quote-denied { background: var(--t-tint-red, #fde2e2); color: var(--t-tint-red-ink, #bc382a); }
.spx-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  color: var(--t-muted, #5b6b7c);
}
.spx-hint { color: var(--t-muted, #5b6b7c); margin-bottom: 12px; }
.spx-thread .spx-msg {
  /* Tokenised: this rule is more specific than splynx-ui's .spx-msg, so a
     hardcoded light hex here won that fight and drew a near-white stripe round
     every message in dark mode -- 14.07:1 against its own surface. */
  border: 1px solid var(--t-line, #e4ebf2);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--t-surface-2, #fbfcfe);
}
.spx-msg-agent_reply { background: var(--t-tint-slate, #f3f8fc); }
.spx-msg-internal_note { background: var(--t-tint-amber, #fff8e8); }
.spx-msg-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.spx-customer-tabs > li > a {
  font-weight: 600;
  color: var(--t-muted, #4a5a6a);
}
.spx-customer-tabs > li.active > a {
  color: var(--t-link, #1d6fa5);
  border-top: 2px solid #2e86c1;
}

/* DataTables' Bootstrap integration wraps its length/filter/info/pagination in
   Bootstrap .row divs, and .row carries -15px side margins. Inside the scroll
   pane that hangs 15px past the right edge, which is enough to switch on the
   horizontal scrollbar (and with it the ‹ › gutters) on tables whose columns
   already fit. The matching 15px column padding goes with the margins, so
   nothing shifts. */
.content .dataTables_wrapper > .row {
  margin-left: 0;
  margin-right: 0;
}

.content .dataTables_wrapper > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Horizontal scroller: Bootstrap 3 only scrolls .table-responsive under 768px,
   and AdminLTE hides page-level overflow-x, so wide data tables get clipped.
   Buttons must sit in reserved gutters — overlaying the first column caused
   ghosted usernames and a layout jump when hover toggled overflow. */
.content .table-responsive,
.content .box-body.table-responsive,
.content .vhost-hscroll-pane {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.vhost-hscroll {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.vhost-hscroll.is-overflow {
  padding-left: 40px;
  padding-right: 40px;
}

.vhost-hscroll-btn {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 28px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 1px solid #c5d0dc;
  border-radius: 4px;
  background: var(--t-surface, #fff);
  color: var(--t-tint-slate-ink, #3d4a5c);
  box-shadow: 0 2px 8px rgba(18, 24, 38, 0.12);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.vhost-hscroll.is-overflow .vhost-hscroll-btn {
  display: flex;
}

.vhost-hscroll-btn:hover:not(:disabled) {
  background: var(--t-tint-slate, #f4f7fa);
  border-color: #3c8dbc;
  color: var(--t-tint-blue-ink, #32769d);
}

.vhost-hscroll-btn:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.vhost-hscroll-left { left: 6px; }
.vhost-hscroll-right { right: 6px; }

.content table.table-bordered,
.content table.table-striped:not(.aging-table) {
  border: 0 !important;
}

.content table.table-bordered > thead > tr > th,
.content table.table-bordered > tbody > tr > td,
.content table.table-striped:not(.aging-table) > thead > tr > th,
.content table.table-striped:not(.aging-table) > tbody > tr > td {
  border: 0 !important;
  border-bottom: 1px solid #edf1f6 !important;
}

.content .table-responsive,
.content .vhost-hscroll-pane {
  max-height: calc(100vh - 220px);
}

.content .table-responsive:has(.ic-ops-calendar),
.content .table-responsive:has(.aging-table),
.content .aging-table-wrap,
.content .vhost-no-hscroll {
  max-height: none;
}

.content table.table:not(.spx-form-table):not(.spx-items):not(.spx-kv) > thead > tr > th,
.content table.dataTable:not(.spx-form-table):not(.spx-items) > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--t-tint-slate, #f4f7fb) !important;
  box-shadow: inset 0 -1px 0 #d8dee8;
}

.spx-usage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.spx-usage-track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 5px;
  background: var(--t-tint-slate, #e7edf3);
  overflow: hidden;
}
.spx-usage-fill {
  height: 100%;
  background: #3c8dbc;
  border-radius: 5px;
}
.spx-usage-fill.is-medium { background: #e0a80d; }
.spx-usage-fill.is-high { background: var(--t-danger, #c0392b); }
.spx-usage-label {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--t-muted, #5b6b7c);
  min-width: 30px;
  text-align: right;
}
.content table.table tr.spx-row-rootnet > td,
.content table.dataTable tr.spx-row-rootnet > td {
  background: var(--t-tint-amber, #fdf6e3);
}

.spx-network-form .spx-subnet-preview {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--t-tint-slate, #f7fafc);
  border: 1px solid var(--t-line, #d8dee8);
  border-radius: 4px;
}
.spx-network-form .spx-preview-table th {
  width: 160px;
  color: var(--t-muted, #5b6b7c);
  font-weight: 600;
}
.spx-table .spx-row-actions a + a {
  margin-left: 8px;
}

/* Centered ticket popup over the list (Back to tickets closes it). */
.spx-ticket-modal-dialog {
  width: 1120px;
  max-width: calc(100vw - 48px);
  margin: 24px auto;
}
.spx-ticket-modal-content {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(20, 28, 45, 0.28);
  overflow: hidden;
}
.spx-ticket-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--t-surface-2, #f7f9fc);
  border-bottom: 1px solid var(--t-line, #d8dee8);
}
.spx-ticket-modal-back {
  flex: 0 0 auto;
  font-weight: 600;
}
.spx-ticket-modal-heading-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.spx-ticket-modal-heading-wrap .modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--t-ink, #243447);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spx-ticket-modal-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.spx-ticket-modal-body {
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 16px 18px 24px;
  background: var(--t-tint-slate, #eef2f6);
}
.spx-ticket-modal-loading {
  padding: 48px 16px;
  text-align: center;
  font-size: 14px;
}
.spx-ticket-modal-panel {
  display: block;
}
.spx-ticket-modal-panel .spx-card,
.spx-ticket-modal-panel .box {
  margin-bottom: 12px;
}
/* Keep the ticket thread + sidebar side-by-side inside the wide desktop popup. */
.spx-ticket-modal-panel > .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
.spx-ticket-modal-panel > .row > [class*="col-"] {
  float: none;
  flex: 0 0 auto;
}
.spx-ticket-modal-panel > .row > .col-md-8 {
  width: 66.66666667%;
}
.spx-ticket-modal-panel > .row > .col-md-4 {
  width: 33.33333333%;
}
.spx-ticket-modal-panel .spx-ticket-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.spx-ticket-modal-panel .spx-msg-body,
.spx-ticket-modal-panel .spx-msg-body h1,
.spx-ticket-modal-panel .spx-msg-body h2,
.spx-ticket-modal-panel .spx-msg-body h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.spx-ticket-modal-panel .spx-msg-body img,
.spx-ticket-modal-panel .spx-msg-body table {
  max-width: 100%;
}
.modal-backdrop.in {
  opacity: 0.55;
}

/* Centered record popup for Clients + Services lists (same pattern as tickets). */
.spx-record-modal-dialog {
  width: 1120px;
  max-width: calc(100vw - 48px);
  margin: 24px auto;
}
.spx-record-modal-content {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(20, 28, 45, 0.28);
  overflow: hidden;
}
.spx-record-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--t-surface-2, #f7f9fc);
  border-bottom: 1px solid var(--t-line, #d8dee8);
}
.spx-record-modal-back {
  flex: 0 0 auto;
  font-weight: 600;
}
.spx-record-modal-heading-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.spx-record-modal-heading-wrap .modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--t-ink, #243447);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spx-record-modal-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.spx-record-modal-body {
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 16px 18px 24px;
  background: var(--t-tint-slate, #eef2f6);
}
.spx-record-modal-loading {
  padding: 48px 16px;
  text-align: center;
  font-size: 14px;
}
.spx-record-modal-panel {
  display: block;
}
.spx-record-modal-panel .spx-card,
.spx-record-modal-panel .box,
.spx-record-modal-panel .ic-record {
  margin-bottom: 12px;
}
.spx-record-modal-panel .ic-page-header,
.spx-record-modal-panel .content-header,
.spx-record-modal-panel .spx-toolbar,
.spx-record-modal-panel .spx-record-head .spx-crumb {
  display: none;
}
.spx-record-modal-panel > .content {
  padding-top: 0;
}

@media (max-width: 991px) {
  .spx-ticket-modal-dialog,
  .spx-record-modal-dialog {
    width: calc(100% - 16px);
    max-width: none;
    margin: 8px auto;
  }
  .spx-ticket-modal-header,
  .spx-record-modal-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .spx-ticket-modal-body,
  .spx-record-modal-body {
    max-height: calc(100vh - 96px);
    padding: 10px 10px 16px;
  }
  /* Stack thread above properties on phone / tablet. */
  .spx-ticket-modal-panel > .row {
    display: block;
  }
  .spx-ticket-modal-panel > .row > [class*="col-"] {
    width: 100%;
    float: none;
  }
  .spx-ticket-modal-panel .spx-ticket-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .spx-ticket-modal-panel .spx-ticket-actions {
    width: 100%;
  }
  .spx-ticket-modal-panel .spx-ticket-actions .btn,
  .spx-ticket-modal-panel .spx-ticket-actions .btn-group {
    margin-bottom: 4px;
  }
}

/* Account usage tabs (Option B) */
.ic-usage-panel {
  margin-top: 18px;
  padding-top: 8px;
}
.ic-usage-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.ic-usage-sub,
.ic-usage-hint,
.ic-usage-kpi-meta {
  color: var(--t-muted, #5b6b7c);
  font-size: 12px;
  margin: 0;
}
.ic-usage-tabs {
  margin-bottom: 0;
  border-bottom: 1px solid var(--t-line, #d8dee8);
}
.ic-usage-tabs > li > a {
  color: var(--t-muted, #4a5a6a);
  font-weight: 600;
}
.ic-usage-tabs > li.active > a,
.ic-usage-tabs > li.active > a:hover,
.ic-usage-tabs > li.active > a:focus {
  color: var(--t-tint-blue-ink, #1f6feb);
  border-color: var(--t-line, #d8dee8) var(--t-line, #d8dee8) #fff;
}
.ic-usage-tab-content {
  border: 1px solid var(--t-line, #d8dee8);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--t-surface, #fff);
  padding: 16px;
}
.ic-usage-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ic-usage-kpi {
  background: var(--t-surface-2, #f7f9fc);
  border: 1px solid #e4ebf2;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ic-usage-kpi strong {
  font-size: 20px;
  color: var(--t-ink, #243447);
}
.ic-usage-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--t-tint-blue-ink, #7a8796);
  font-weight: 700;
}
.ic-usage-kpi.is-online {
  border-color: #b7e0c5;
  background: var(--t-tint-slate, #f2fbf5);
}
.ic-usage-kpi.is-online strong { color: var(--t-success-text, #1f9d55); }
.ic-usage-kpi.is-offline strong { color: var(--t-faint, #8a96a6); }
.ic-usage-live-grid {
  display: grid;
  gap: 16px;
}
.ic-usage-live-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ic-usage-live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--t-success, #1f9d55);
  box-shadow: 0 0 0 4px rgba(31, 157, 85, 0.15);
}
.ic-usage-live-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.ic-usage-field span {
  display: block;
  font-size: 11px;
  color: var(--t-tint-blue-ink, #7a8796);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}
.ic-usage-field strong {
  color: var(--t-ink, #243447);
}
.ic-usage-meters { display: grid; gap: 12px; }
.ic-usage-meter-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 12px;
}
.ic-usage-meter-track {
  height: 10px;
  border-radius: 999px;
  background: var(--t-tint-slate, #e7edf3);
  overflow: hidden;
}
.ic-usage-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.ic-usage-meter-fill.is-down { background: #1f6feb; }
.ic-usage-meter-fill.is-up { background: #0f9aa8; }
.ic-usage-bars { display: grid; gap: 8px; }
.ic-usage-bar-row {
  display: grid;
  grid-template-columns: 64px 1fr 72px;
  gap: 8px;
  align-items: center;
}
.ic-usage-bar-label,
.ic-usage-bar-value {
  font-size: 12px;
  color: var(--t-muted, #5b6b7c);
}
.ic-usage-bar-value { text-align: right; }
.ic-usage-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--t-tint-slate, #e7edf3);
  overflow: hidden;
}
.ic-usage-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3c8dbc, #1f6feb);
  border-radius: 999px;
}
.ic-usage-pppoe-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}
.ic-usage-mini-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t-ink, #243447);
}
.ic-usage-nas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ic-usage-nas-list li {
  border: 1px solid #e4ebf2;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--t-surface-2, #fbfcfe);
}
.ic-usage-nas-list li.is-online {
  border-color: #b7e0c5;
  background: var(--t-tint-slate, #f2fbf5);
}
.ic-usage-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--t-tint-blue, #e8f4fb);
  color: var(--t-link, #1d6fa5);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.ic-usage-pill.is-ok {
  background: var(--t-tint-green, #e6f6ec);
  color: var(--t-tint-green-ink, #197d44);
}
.ic-usage-table {
  margin-bottom: 0;
  font-size: 12px;
}
.ic-usage-empty {
  padding: 18px;
  text-align: center;
  color: var(--t-tint-blue-ink, #647284);
  background: var(--t-surface-2, #f7f9fc);
  border-radius: 8px;
  border: 1px dashed var(--t-line, #d8dee8);
}
@media (max-width: 991px) {
  .ic-usage-kpis,
  .ic-usage-live-fields,
  .ic-usage-pppoe-grid {
    grid-template-columns: 1fr;
  }
  .ic-usage-panel-head {
    flex-direction: column;
  }
}

/* Signed-out login: no AdminLTE sidebar gutter. The credentials card used to
   sit in the content-wrapper 230px from the left because body.sidebar-mini
   reserves space for a sidebar that is never rendered. */
html body.ic-pre-login,
body.ic-pre-login .wrapper {
  background: #0f1724 !important;
}
body.ic-pre-login .login-logo,
body.ic-pre-login .login-logo a,
body.ic-pre-login .login-logo b {
  color: #fff;
}
body.ic-pre-login .content-wrapper,
body.ic-pre-login .content-wrapper#bgimage,
body.ic-pre-login .right-side {
  margin-left: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  background: transparent !important;
  background-image: none !important;
}
body.ic-pre-login .main-footer,
body.ic-pre-login .ic-sidebar-backdrop {
  display: none !important;
}
body.ic-pre-login #login,
body.ic-pre-login .limiter,
body.ic-pre-login .container-login100 {
  min-height: 100vh;
}



/* Individual account notes and comments (AccountNote).
   Extends the CRM staff-note treatment: amber left border and warm ground for
   admin-only entries, plain white for anything a client can see, so the two
   are never mistaken for each other at a glance. */
.ic-notes-panel .ic-history-scroll {
  max-height: 260px;
  padding: 8px 12px 0;
}

.ic-note-hint {
  margin: 0;
  padding: 8px 12px 0;
  color: var(--ic-muted);
  font-size: 12px;
}

.ic-note-count {
  display: inline-block;
  padding: 0 7px;
  border-radius: 9px;
  background: #6f42c1;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
}

.ic-note {
  border: 1px solid #e6ebf3;
  border-left: 3px solid #267d9c;
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--t-surface, #fff);
}

.ic-note-admin {
  border-left-color: #f0ad4e;
  background: var(--t-tint-slate, #fffdf6);
}

.ic-note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ic-note-who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  min-width: 0;
}

.ic-note-who strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ic-note-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--t-faint, #8a96a6);
  font-size: 12px;
}

.ic-note-action {
  color: var(--t-faint, #8a96a6);
  font-weight: 600;
}

.ic-note-action:hover,
.ic-note-action:focus {
  color: var(--t-brand-text, #5b2c86);
}

.ic-note-edited {
  font-style: italic;
}

.ic-note-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-ink, #243447);
}

.ic-note-text p {
  margin: 0 0 6px;
}

.ic-note-text p:last-child {
  margin-bottom: 0;
}

/* The edit form ships with the entry but stays closed; account-notes.js only
   toggles this class, so an entry the viewer may not edit has no form at all. */
.ic-note-edit-form {
  display: none;
  margin-top: 8px;
}

.ic-note.is-editing .ic-note-text {
  display: none;
}

.ic-note.is-editing .ic-note-edit-form {
  display: block;
}

.ic-note.is-editing {
  border-left-color: var(--t-brand, #5b2c86);
  background: var(--t-tint-slate, #faf7fd);
}

.ic-note-composer {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--t-line-soft, #eef1f6);
}

.ic-note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.ic-note-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ic-note-rule {
  color: var(--ic-muted);
  font-size: 12px;
}

.ic-note-delete {
  color: var(--t-tint-red-ink, #d94a4a);
  font-size: 12px;
  font-weight: 600;
}

.ic-note-delete:hover,
.ic-note-delete:focus {
  color: var(--t-tint-red-ink, #b03636);
}

/* Live usage graph (usage-graph.js). Line colours match the session meters
   above it -- is-down blue, is-up teal -- so the two read as one panel. */
.ic-usage-graph {
  border: 1px solid var(--ic-line);
  border-radius: 10px;
  background: var(--t-tint-slate, #fbfdff);
  padding: 12px 14px 10px;
  margin-bottom: 14px;
}
.ic-usage-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ic-usage-graph-now {
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-ink);
}
.ic-usage-graph-key {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin: 0 6px 0 0;
  vertical-align: baseline;
}
.ic-usage-graph-key.is-down { background: #1f6feb; }
.ic-usage-graph-key.is-up { background: #0f9aa8; margin-left: 14px; }
.ic-usage-graph-buttons {
  display: inline-flex;
  border: 1px solid var(--ic-line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--t-surface, #fff);
}
.ic-usage-graph-buttons button {
  border: 0;
  background: transparent;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ic-muted);
  cursor: pointer;
  line-height: 1.6;
}
.ic-usage-graph-buttons button + button { border-left: 1px solid var(--ic-line); }
.ic-usage-graph-buttons button:hover { background: var(--t-tint-slate, #eef4fb); color: var(--ic-ink); }
.ic-usage-graph-buttons button.is-active { background: var(--ic-blue); color: #fff; }
.ic-usage-graph-canvas { min-height: 90px; }
.ic-usage-graph-svg { display: block; width: 100%; height: auto; }
.ic-usage-grid { stroke: #e7edf3; stroke-width: 1; }
.ic-usage-axis { fill: #8a96a6; font-size: 9px; }
.ic-usage-line {
  fill: none;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ic-usage-line.is-down { stroke: #1f6feb; }
.ic-usage-line.is-up { stroke: #0f9aa8; }
.ic-usage-graph-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--t-faint, #8a96a6);
}
@media (max-width: 575px) {
  .ic-usage-graph-head { flex-direction: column; align-items: flex-start; }
}

/* Let the page scroll on a phone.
 *
 * AdminLTE builds the desktop layout around a fixed-height scroll box:
 *
 *   html { height: 100% }
 *   .wrapper { height: 100%; overflow-y: auto }
 *
 * so the document itself never scrolls -- .wrapper does. On a desktop that is
 * invisible. On a phone it means no momentum, no address-bar hide, and a swipe
 * that has to land inside the box to do anything.
 *
 * Nobody hit it while the lists were short: .table-responsive caps the table at
 * calc(100vh - 220px), so a page rarely had more than a screenful under the
 * header. Cards made the content tall enough that reaching the rest depends on
 * that nested scroll actually working, and on a phone it does not.
 *
 * Measured at 375x812 with 25 records: document scrollHeight 812 against a
 * .wrapper scrollHeight of 6476 -- the page could not move while everything
 * worth reading sat below the fold.
 *
 * height: auto and the content flows, the document grows, and the phone scrolls
 * the way every other page does. min-height keeps the sidebar's full-height
 * background on a short page.
 */
@media (max-width: 767px) {
  html,
  body.skin-blue {
    height: auto;
    overflow-y: visible;
  }

  .wrapper {
    height: auto;
    min-height: 100%;
    overflow-y: visible;
  }
}

/* Wide list tables as cards on a phone. See spx-table-cards.js for why the
   labels are copied from the headers rather than written into each view.
   Fallbacks are the light values: the --t-* tokens exist only under
   [data-theme="dark"], so in light mode the fallback is what renders. */
@media (max-width: 767px) {
  .spx-table-cards,
  .spx-table-cards thead,
  .spx-table-cards tbody,
  .spx-table-cards tr,
  .spx-table-cards td {
    display: block;
  }

  /* 100%, not auto. A block table sized to its content keeps the old table
     width, so the cards overflowed the pane, table-hscroll saw it and put the
     page into horizontal-scroll mode -- arrows on both edges, 40px of gutter
     eaten each side, and every long value cut off at the right. */
  .spx-table-cards {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
  }

  /* The headings are on the cells now. */
  .spx-table-cards thead { display: none; }

  .spx-table-cards tr {
    border: 1px solid var(--t-line, #d8dde6);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 4px 2px;
    background: var(--t-surface, #fff);
  }

  /* Grid rather than flex, so the value track can actually shrink. A flex item
     will not go below its content's intrinsic width without min-width: 0, and
     an address or a product name is long enough to push the card wider than
     the phone. minmax(0, 1fr) is the same guard, expressed once. */
  .spx-table-cards td {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    border: 0;
    border-bottom: 1px solid var(--t-line-soft, #eef1f5);
    padding: 7px 12px;
    /* !important, and measured rather than guessed. The nowrap that squeezes a
       desktop row onto one line comes from
       "body.spx-app .spx-table:not(.spx-form-table):not(.spx-items) > tbody > tr > td",
       which scores four classes and four elements. No selector built out of the
       card class reaches that without inventing classes to pad it, and losing
       leaves an address on one 426px line inside a 281px card -- the horizontal
       overflow this whole block exists to remove. */
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .spx-table-cards td:last-child { border-bottom: 0; }

  .spx-table-cards td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--t-faint, #8a96a6);
  }

  /* The first cell is the record's name; it carries the card. */
  .spx-table-cards td:first-child {
    display: block;
    font-size: 15px;
    font-weight: 700;
    padding-top: 10px;
  }
  .spx-table-cards td:first-child::before { display: none; }

  /* Actions have no heading and want the full width. */
  .spx-table-cards td.spx-card-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }
  .spx-table-cards td.spx-card-actions::before { display: none; }

  /* An empty-state row spans the table and is not a card. */
  .spx-table-cards td[colspan] { display: block; }
  .spx-table-cards td[colspan]::before { display: none; }

  /* .spx-clip and .ic-username-cell hold a desktop row to one line: pixel
     max-widths, nowrap, overflow hidden !important, a clip-path. Left in place
     they reproduce the original complaint inside the card. Beating
     "body.spx-app .content-wrapper table td.ic-username-cell" needs a selector
     carrying more elements, not just more classes. */
  body.spx-app .content-wrapper table.spx-table-cards td.ic-username-cell,
  body.spx-app .content-wrapper table.spx-table-cards td.spx-clip,
  .spx-table-cards td.ic-username-cell,
  .spx-table-cards td.spx-clip,
  .spx-table-cards td.spx-name-cell {
    width: auto;
    max-width: none;
    overflow: visible !important;
    text-overflow: clip;
    white-space: normal;
    clip-path: none;
  }

  /* Nothing to scroll sideways once the rows stack, so the scroller must stand
     down: its arrows overlay the cards and its gutters take 80px of a 375px
     screen. */
  .vhost-hscroll.spx-hscroll-cards .vhost-hscroll-btn { display: none; }
  .vhost-hscroll.spx-hscroll-cards.is-overflow {
    padding-left: 0;
    padding-right: 0;
  }
  /* The pane is capped at calc(100vh - 220px) so a desktop keeps its filters in
     view while the table scrolls inside. On a phone Bootstrap 3 also sets
     overflow-y: hidden on .table-responsive, so that cap does not scroll -- it
     simply cuts the list off. The list has always been truncated here; a
     seventeen-row table happened to fit the cap and nine-row cards do not, so
     two records was the first time anyone could see it.
     A phone should scroll the page, not a box inside it. */
  .content .table-responsive.spx-pane-cards,
  .content .vhost-hscroll-pane.spx-pane-cards,
  .table-responsive.spx-pane-cards {
    overflow-x: visible;
    overflow-y: visible;
  }
}

/* No inner scroll box on a phone -- the page scrolls instead.
 *
 * Two rules cap these panes, and the second is the one that bites:
 *
 *   .content .table-responsive                    calc(100vh - 220px)  (0,2,0)  this file
 *   body.spx-app .spx-page .table-responsive      calc(100vh - 380px)  (0,3,1)  splynx-ui.css
 *
 * splynx-ui.css loads after this file and scores higher, so it wins outright.
 * At 812px that is 432px -- two cards -- which is exactly where the Internet
 * and Clients lists stopped. The pane also computes overflow-y: visible, so the
 * rows below simply paint outside it and the pager lands on top of them.
 *
 * Beating (0,3,1) needs (0,4,1). .content and .spx-page are the same <section>
 * (app/views/accounts/index.html.erb: class="content spx-page"), so naming both
 * costs nothing and buys the class the selector needs.
 *
 * Dropping the cap is enough on its own: the pane then takes its content's
 * height, so nothing is left for overflow-y to clip, and overflow-x is left
 * alone so a wide table that is still a table can scroll sideways.
 *
 * The cap earns its keep on a desktop -- it keeps the filters in view while the
 * table scrolls inside -- which is why this is scoped to the phone breakpoint
 * rather than removed.
 */
@media (max-width: 767px) {
  body.spx-app .content.spx-page .table-responsive,
  body.spx-app .content.spx-page .vhost-hscroll-pane,
  body.spx-app .content.spx-page .box-body.table-responsive,
  .content .table-responsive,
  .content .box-body.table-responsive,
  .content .vhost-hscroll-pane {
    max-height: none;
  }
}

/* Change-client picker. Fallbacks are light values: the --t-* tokens exist
   only under [data-theme="dark"], so in light mode the fallback renders. */
.ic-cc-results {
  border: 1px solid var(--t-line, #d8dde6);
  border-radius: 6px;
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--t-surface, #fff);
}
.ic-cc-hit {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--t-line-soft, #eceff4);
  background: transparent;
  padding: 8px 12px;
  font: inherit;
  color: var(--t-ink, #1d2530);
  cursor: pointer;
}
.ic-cc-hit:last-child { border-bottom: 0; }
.ic-cc-hit:hover,
.ic-cc-hit:focus { background: var(--t-surface-2, #f4f7fb); outline: none; }
.ic-cc-hit span { color: var(--t-muted, #6b788b); }
.ic-cc-hit em { color: var(--t-faint, #8a96a6); font-style: normal; }
.ic-cc-sub { font-size: 12px; color: var(--t-faint, #8a96a6); margin-top: 1px; }
.ic-cc-empty { padding: 10px 12px; color: var(--t-faint, #8a96a6); font-size: 13px; }

.ic-audit-reason {
  max-width: 320px;
  font-size: 12.5px;
  color: var(--t-ink-2, #46536a);
  overflow-wrap: anywhere;
}

/* Voice credit search. Fallbacks are the light values -- the --t-* tokens are
   defined only under [data-theme="dark"], so in light mode the fallback is what
   renders. */
.ic-voice-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ic-voice-search input[type="search"] {
  max-width: 460px;
}
.ic-voice-search-count {
  font-size: 12.5px;
  color: var(--t-faint, #8a96a6);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vc-no-match td {
  padding: 14px 12px;
}

/* Live console. The number carries the panel and the line behind it is
   context, so this is read at a glance rather than studied. Every colour comes
   from the theme tokens: the panel is used in both light and dark. */
.ic-usage-console {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--t-line-soft, #e6e9ef);
  border: 1px solid var(--t-line, #d8dde6);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ic-usage-console[hidden] { display: none; }

.ic-usage-console-main,
.ic-usage-console-side {
  background: var(--t-surface, #fff);
  padding: 16px 18px;
  min-width: 0;
}

.ic-usage-console-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ic-usage-console-n {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ic-usage-console-n.is-small { font-size: 27px; }
.ic-usage-console-n.is-down { color: var(--t-accent-text, #2f6fb0); }
.ic-usage-console-n.is-up { color: var(--t-brand-text, #7b4bb0); }

.ic-usage-console-k {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--t-faint, #8a96a6);
  white-space: nowrap;
}
.ic-usage-console-k i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.ic-usage-console-k i.is-down { background: var(--t-accent-text, #2f6fb0); }
.ic-usage-console-k i.is-up { background: var(--t-brand-text, #7b4bb0); }

.ic-usage-console-spark {
  display: block;
  width: 100%;
  margin: 8px 0 16px;
}
.ic-usage-console-spark:last-child { margin-bottom: 0; }

.ic-usage-console-ring {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ic-usage-console-ring canvas { flex: none; }
.ic-usage-console-ring strong {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 19px;
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--t-ink, #1d2530);
}
.ic-usage-console-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-faint, #8a96a6);
}

.ic-usage-console-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 16px;
  margin: 18px 0 0;
  font-size: 12.5px;
}
.ic-usage-console-facts dt { color: var(--t-faint, #8a96a6); }
.ic-usage-console-facts dd {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color: var(--t-ink-2, #46536a);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .ic-usage-console { grid-template-columns: 1fr; }
  .ic-usage-console-n { font-size: 34px; }
  .ic-usage-console-n.is-small { font-size: 24px; }
}

/* Live RX/Tx readout. Sits above the strip chart when the Live button is on. */
.ic-usage-live-readout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 2px 0 12px;
}
.ic-usage-live-stat {
  border: 1px solid var(--ic-line);
  border-left-width: 3px;
  border-radius: 0 8px 8px 0;
  background: var(--t-surface, #fff);
  padding: 8px 12px;
}
.ic-usage-live-stat.is-down { border-left-color: #1f6feb; }
.ic-usage-live-stat.is-up { border-left-color: #0f9aa8; }
.ic-usage-live-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ic-muted);
}
.ic-usage-live-value {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  color: var(--ic-ink);
}
/* Counters stop advancing when the NAS stops reporting. Grey the numbers so a
   frozen reading is never mistaken for a measured one. */
.ic-usage-graph.is-stale .ic-usage-live-value { color: var(--ic-muted); }
.ic-usage-graph.is-stale .ic-usage-graph-now { font-style: italic; }
@media (max-width: 575px) {
  .ic-usage-live-readout { grid-template-columns: 1fr; }
  .ic-usage-live-value { font-size: 19px; }
}

/* Audit trail. The list has to say what changed, not just that something did. */
.ic-audit-table td { vertical-align: top !important; }
.ic-audit-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ic-audit-time { display: block; font-size: 11px; color: var(--t-faint, #8a96a6); }
.ic-audit-id { font-variant-numeric: tabular-nums; color: var(--t-faint, #8a96a6); }

.ic-audit-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  background: var(--ic-muted);
  white-space: nowrap;
}
.ic-audit-chip.is-create { background: var(--ic-green); }
.ic-audit-chip.is-update { background: var(--ic-blue); }
.ic-audit-chip.is-destroy { background: var(--ic-magenta); }

/* A system actor is not a person; the marker says so without a second column. */
.ic-audit-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ic-blue);
  margin-right: 6px;
  vertical-align: middle;
}
.ic-audit-dot.is-system { background: var(--ic-purple); }

.ic-audit-change { display: inline; line-height: 1.9; }
.ic-audit-field { font-weight: 600; }
.ic-audit-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 3px;
  word-break: break-word;
}
.ic-audit-val.is-was { background: var(--t-tint-slate, #fdf1f7); color: var(--t-tint-purple-ink, #a32d76); }
.ic-audit-val.is-now { background: var(--t-tint-green, #eef8f2); color: var(--t-tint-green-ink, #167c42); }
.ic-audit-val.is-empty { background: transparent; color: var(--t-faint, #8a96a6); font-style: italic; }
.ic-audit-arrow { color: var(--t-faint, #8a96a6); }
.ic-audit-more, .ic-audit-none { color: var(--t-faint, #8a96a6); font-size: 12px; }

.ic-audit-samewrite td { background: var(--t-surface-2, #f7f9fc); }
.ic-audit-samewrite .ic-audit-change { opacity: .75; }
.ic-audit-flag { display: block; font-size: 11px; color: var(--t-tint-amber-ink, #b3873c); margin-top: 2px; }

.ic-audit-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--ic-line);
  margin-bottom: 4px;
}
.ic-audit-meta-k {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t-faint, #8a96a6);
}
.ic-audit-meta-v { font-size: 14px; font-weight: 500; }

.ic-audit-diff-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--t-line-soft, #eef2f7);
  align-items: baseline;
}
.ic-audit-diff-row:last-child { border-bottom: 0; }
.ic-audit-diff-k { font-size: 13px; font-weight: 600; color: var(--ic-muted); }
@media (max-width: 767px) {
  .ic-audit-diff-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Free-address grid on an IPv4 network. A /24 is 254 chips, so they wrap in a
   dense grid with a filter above rather than a 254-row table. */
.ic-ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
}

.ic-ip-chip {
  border: 1px solid #d7e3d7;
  border-radius: 4px;
  background: var(--t-tint-green, #f4faf4);
  color: var(--t-ink, #1b2433);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 5px 8px;
  text-align: center;
}

/* Bulk mail: audience on the left, message on the right, count always visible. */
.ic-bulk-split { display: grid; grid-template-columns: 17rem 1fr; }
@media (max-width: 991px) { .ic-bulk-split { grid-template-columns: 1fr; } }
.ic-bulk-audience {
  border-right: 1px solid var(--ic-line);
  background: var(--t-surface-2, #f7f9fc);
  padding: 14px;
}
@media (max-width: 991px) {
  .ic-bulk-audience { border-right: 0; border-bottom: 1px solid var(--ic-line); }
}
.ic-bulk-audience h4 {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--t-faint, #8a96a6); margin: 16px 0 6px;
}
.ic-bulk-audience h4:first-child { margin-top: 0; }
.ic-bulk-check { display: block; font-weight: 400; font-size: 13px; margin: 0 0 3px; cursor: pointer; }
.ic-bulk-check input { margin-right: 6px; }

.ic-bulk-picker { position: relative; margin-bottom: 4px; }
.ic-bulk-picker .form-control { font-size: 13px; height: 30px; padding: 4px 8px; }
.ic-bulk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
/* A pill radius only works on one line. Product names here run to sixty
   characters and wrap to four lines in a 17rem rail, where border-radius:999px
   draws an ellipse round them. Modest corners, and the cross sits at the top
   rather than floating in the middle of the block. */
.ic-bulk-chip-tok {
  display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%;
  background: var(--t-tint-slate, #eaf0f7); border: 1px solid var(--ic-line); border-radius: 6px;
  padding: 3px 6px 3px 9px; font-size: 12px; line-height: 1.45;
  overflow-wrap: anywhere;
}
.ic-bulk-chip-tok button {
  border: 0; background: transparent; color: var(--t-faint, #8a96a6); font-size: 14px;
  line-height: 1.3; padding: 0; cursor: pointer; flex: none;
}
.ic-bulk-chip-tok button:hover { color: var(--ic-magenta); }

/* The dropdown floats, so a long list never pushes the panel around. */
.ic-bulk-dd {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--t-surface, #fff); border: 1px solid var(--ic-line); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(18,24,38,.14); max-height: 15rem; overflow-y: auto;
}
.ic-bulk-dd-row {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 6px 9px; font-size: 13px; border-bottom: 1px solid var(--t-line-soft, #eef2f7); cursor: pointer;
}
.ic-bulk-dd-row:last-child { border-bottom: 0; }
.ic-bulk-dd-row:hover, .ic-bulk-dd-row:focus { background: var(--t-tint-slate, #eef5fb); }
.ic-bulk-dd-em { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--t-faint, #8a96a6); }
.ic-bulk-dd-empty { padding: 8px 9px; font-size: 13px; color: var(--t-faint, #8a96a6); }
/* Opens the full Add window for the pickers whose list is short enough to
   browse. Full width so it reads as part of the field, not a stray control. */
.ic-bulk-browse { width: 100%; margin-top: 4px; }

.ic-bulk-tally {
  margin-top: 16px; padding: 10px; border-radius: 8px;
  background: var(--t-surface, #fff); border: 1px solid var(--ic-line); text-align: center;
}
.ic-bulk-tally b { display: block; font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-bulk-tally span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-faint, #8a96a6); }
.ic-bulk-tally-note { font-size: 11px; color: var(--t-faint, #8a96a6); margin-top: 5px; line-height: 1.35; }

/* ---- Bulk SMS ----
   Reuses the bulk-mail shell above; these are the parts SMS has and mail does
   not: a length meter that has to shout when a message crosses 160 characters,
   and the held-back list. */
.ic-sms-meter {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--t-muted, #6b7789);
}

.ic-sms-meter .is-warn { color: var(--t-tint-amber-ink, #9f5f00); font-weight: 600; }

/* Bulk mail's audience column is 17rem, and Bootstrap 3 sets html{font-size:10px}
   so that is 170px. Its pickers are a search box and chips, which fit; a list of
   76 ISP names does not -- "3D Connectivity Consultants" wrapped onto three
   lines. Wider here only, so bulk mail is untouched. */
.ic-sms-split { grid-template-columns: 24rem 1fr; }
@media (max-width: 991px) { .ic-sms-split { grid-template-columns: 1fr; } }

/* ---- Network picker (shared: bulk SMS + bulk mail) ----
   Two levels. The network checkbox is UI only; the group checkboxes beneath it
   are the form fields, which is why a single-group network still submits with
   its group row hidden. */
.ic-net { margin-bottom: 4px; }
.ic-net .js-net-q { margin-bottom: 6px; }
.ic-net-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ic-net-sel { font-size: 11px; color: var(--t-muted, #6b7789); }

.ic-net-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--t-line, #e2e8f0);
  border-radius: 4px;
  background: var(--t-surface, #fff);
}

.ic-net-block[hidden] { display: none !important; }
.ic-net-block + .ic-net-block { border-top: 1px solid var(--t-line-soft, #eef2f7); }

.ic-net-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; }

.ic-net-twist {
  border: 0; background: none; padding: 0; width: 14px;
  font-size: 9px; color: var(--t-faint, #8a96a6); cursor: pointer; line-height: 1;
}

.ic-net-head { display: flex; align-items: center; gap: 6px; flex: 1; margin: 0; font-weight: 600; font-size: 12px; cursor: pointer; }
.ic-net-head input { margin: 0; }
.ic-net-name { flex: 1; }
.ic-net-n { font-size: 11px; color: var(--t-muted, #6b7789); }

.ic-net-groups { padding: 0 8px 6px 28px; }
.ic-net-grow { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; margin: 0 0 2px; cursor: pointer; }
.ic-net-grow input { margin: 0; }
.ic-net-gname { flex: 1; color: var(--t-muted, #6b7789); }
.ic-net-gn { font-size: 11px; color: var(--t-faint, #8a96a6); }

/* ISP picker. A scrolling list of 76 checkboxes beats a <select multiple>,
   where one un-modified click silently replaces the entire selection. */
.ic-sms-isp { margin-bottom: 4px; }
.ic-sms-isp .js-isp-q { margin-bottom: 6px; }

.ic-sms-isp-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }

.ic-sms-isp-list {
  /* px, not rem: Bootstrap 3 sets html{font-size:10px}, so 11rem was 110px and
     showed four ISPs out of 76. */
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--t-line, #e2e8f0);
  border-radius: 4px;
  padding: 6px 8px;
  background: var(--t-surface, #fff);
}

/* .ic-bulk-check sets display:block, which outranks the hidden attribute -- a
   class selector beats [hidden]. Without this the search filter marks rows
   hidden and every one of them stays on screen. */
.ic-sms-isp-row[hidden] { display: none !important; }

.ic-sms-isp-n { font-weight: 400; font-size: 11px; color: var(--t-muted, #6b7789); }

.ic-sms-held { margin-top: 14px; border-top: 1px solid var(--t-line, #e2e8f0); padding-top: 10px; }

.ic-sms-held-table { width: 100%; font-size: 12px; }
.ic-sms-held-table td { padding: 3px 0; color: var(--t-muted, #6b7789); }
.ic-sms-held-n { text-align: right; color: var(--t-ink, #2c3340); font-weight: 600; }

/* The message as the customer will see it, in a shape that reads like a handset
   rather than a form field. */
.ic-sms-preview {
  border: 1px solid var(--t-line, #e2e8f0);
  border-radius: 10px;
  background: var(--t-surface-2, #f7f9fb);
  padding: 12px 14px;
  max-width: 34rem;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--t-ink, #2c3340);
}

.ic-sms-h { font-size: 13px; font-weight: 600; margin: 18px 0 6px; color: var(--t-ink, #2c3340); }
.ic-sms-h:first-child { margin-top: 0; }
.ic-sms-held-detail td { vertical-align: top; font-size: 12px; }

.ic-bulk-message { padding: 14px 16px; }
.ic-bulk-field { display: grid; grid-template-columns: 5rem 1fr; gap: 10px; align-items: start; margin-bottom: 10px; }
@media (max-width: 575px) { .ic-bulk-field { grid-template-columns: 1fr; gap: 2px; } }
.ic-bulk-field > label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-faint, #8a96a6); padding-top: 7px; margin: 0;
}
.ic-bulk-hint { display: block; font-size: 11px; color: var(--t-faint, #8a96a6); margin-top: 3px; line-height: 1.4; }

.ic-bulk-composer { border: 1px solid var(--ic-line); border-radius: 8px; margin-top: 4px; }
.ic-bulk-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 9px; border-bottom: 1px solid var(--ic-line);
  background: var(--t-surface-2, #f7f9fc); font-size: 11px; color: var(--t-tint-blue-ink, #647284);
}
.ic-bulk-toolbar code {
  font-size: 11px; background: var(--t-tint-slate, #eef5fb); border: 1px solid var(--ic-line);
  border-radius: 3px; padding: 1px 5px; color: var(--ic-ink);
}
.ic-bulk-body {
  width: 100%; border: 0; padding: 12px; font-size: 14px; line-height: 1.6;
  resize: vertical; outline: none; background: transparent; color: var(--ic-ink);
}
.ic-bulk-sig { border-top: 1px dashed var(--ic-line); background: var(--t-surface-2, #f7f9fc); padding: 9px 12px; }
.ic-bulk-sig label {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--t-faint, #8a96a6); display: block; margin-bottom: 4px;
}
.ic-bulk-sigbox {
  width: 100%; border: 1px solid var(--ic-line); border-radius: 6px; padding: 8px;
  font-size: 13px; resize: vertical; background: var(--t-surface, #fff); color: var(--ic-ink);
}

.ic-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ic-bulk-count { margin-right: auto; font-size: 13px; color: var(--ic-muted); }
.ic-bulk-count b { color: var(--ic-ink); font-variant-numeric: tabular-nums; }

/* Recipient list: the people behind the number, trimmed before sending.
   Full width under both columns, because 108 names do not fit a 17rem rail. */
.ic-bulk-rcp-open { margin-top: 8px; width: 100%; }
/* Bootstrap's .btn sets display:inline-block, which outranks the browser's
   rule for the hidden attribute -- without this the button shows at nought
   recipients, offering a list of nobody. */
.ic-bulk-rcp-open[hidden] { display: none; }
.ic-bulk-rcp { border-top: 1px solid var(--ic-line); background: var(--t-surface-2, #f7f9fc); padding: 10px 14px 12px; }
.ic-bulk-rcp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ic-bulk-rcp-head strong {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t-faint, #8a96a6);
}
.ic-bulk-rcp-tally { font-size: 12px; color: var(--ic-muted); font-variant-numeric: tabular-nums; }
.ic-bulk-rcp-head .form-control {
  width: auto; min-width: 11rem; max-width: 18rem; height: 28px;
  font-size: 12px; padding: 3px 8px; margin-left: auto;
}
.ic-bulk-rcp-list {
  display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start;
  max-height: 15rem; overflow-y: auto;
  background: var(--t-surface, #fff); border: 1px solid var(--ic-line); border-radius: 6px; padding: 8px;
}
.ic-bulk-rcp-tok {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--t-tint-slate, #eef7f2); border: 1px solid #bfe0cf; border-radius: 6px;
  padding: 2px 5px 2px 9px; font-size: 12px; line-height: 1.7;
}
.ic-bulk-rcp-tok em {
  font-style: normal; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; color: var(--t-faint, #8a96a6); overflow-wrap: anywhere;
}
.ic-bulk-rcp-tok button {
  border: 0; background: transparent; color: var(--t-faint, #8a96a6); font-size: 14px;
  line-height: 1; padding: 0; cursor: pointer;
}
.ic-bulk-rcp-tok button:hover { color: var(--ic-magenta); }
.ic-bulk-rcp-empty { font-size: 12px; color: var(--t-faint, #8a96a6); padding: 6px 4px; }

/* review + record */
.ic-bulk-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ic-line); margin-bottom: 12px;
}
.ic-bulk-meta-k {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--t-faint, #8a96a6);
}
.ic-bulk-meta-v { font-size: 14px; font-weight: 500; }
.ic-bulk-h4 { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t-faint, #8a96a6); margin: 18px 0 8px; }
.ic-bulk-note {
  border-left: 3px solid var(--ic-blue); background: var(--t-tint-slate, #eef5fb);
  border-radius: 0 8px 8px 0; padding: 9px 12px; font-size: 13px; margin-bottom: 9px;
}
.ic-bulk-note.warn { border-left-color: #b3873c; background: var(--t-tint-amber, #fdf6ec); }
.ic-bulk-note.danger { border-left-color: var(--ic-magenta); background: var(--t-tint-slate, #fdf1f7); }
.ic-bulk-table td { vertical-align: middle !important; }
.ic-bulk-em { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ic-muted); }
.ic-bulk-reason { font-size: 12px; color: var(--ic-muted); }
.ic-bulk-more { color: var(--t-faint, #8a96a6); font-size: 12px; }
.ic-bulk-err { display: block; font-size: 11px; color: var(--ic-magenta); }

.ic-bulk-chip {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  background: var(--ic-muted); color: #fff;
}
.ic-bulk-chip.is-draft { background: var(--ic-muted); }
.ic-bulk-chip.is-queued, .ic-bulk-chip.is-sending, .ic-bulk-chip.is-pending { background: var(--ic-blue); }
.ic-bulk-chip.is-sent { background: var(--ic-green); }
.ic-bulk-chip.is-failed { background: var(--ic-magenta); }
.ic-bulk-chip.is-skipped { background: #8a96a6; }

.ic-bulk-preview-subject { font-weight: 600; margin-bottom: 8px; }
.ic-bulk-preview-body { font-size: 13px; line-height: 1.6; }
.ic-bulk-preview-sig {
  border-top: 1px dashed var(--ic-line); margin-top: 10px; padding-top: 8px;
  font-size: 12px; color: var(--ic-muted);
}
.ic-bulk-picker.is-disabled { opacity: .45; pointer-events: none; }
.ic-bulk-all { padding-bottom: 4px; border-bottom: 1px solid var(--ic-line); margin-bottom: 6px; }

/* Desk signatures. One card per mailbox, shown resolved for the viewer. */
.ic-sig-lede { color: var(--ic-muted); font-size: 13px; max-width: 62ch; margin-bottom: 16px; }
.ic-sig-lede code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: var(--t-tint-slate, #eef5fb); border: 1px solid var(--ic-line); border-radius: 3px; padding: 1px 4px;
}
.ic-sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; }
.ic-sig-card {
  border: 1px solid var(--ic-line); border-radius: 10px; background: var(--t-surface, #fff);
  display: flex; flex-direction: column; overflow: hidden;
}
.ic-sig-card.is-empty { border-style: dashed; }
.ic-sig-card-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--ic-line); background: var(--t-surface-2, #f7f9fc); }
.ic-sig-card-head h4 { margin: 0; font-size: 15px; font-weight: 600; }
.ic-sig-em { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--t-faint, #8a96a6); }
.ic-sig-card-body { padding: 12px; flex: 1; font-size: 13px; line-height: 1.5; color: var(--ic-muted); }
.ic-sig-card-body p { margin: 0 0 4px; }
.ic-sig-none { color: var(--t-faint, #8a96a6); font-style: italic; font-size: 12px; }
.ic-sig-card-foot { padding: 8px 12px; border-top: 1px solid var(--ic-line); background: var(--t-surface-2, #f7f9fc); }

.ic-sig-tokens { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 8px;
                 font-size: 11px; color: var(--t-faint, #8a96a6); }
.ic-sig-token {
  border: 1px solid var(--ic-line); background: var(--t-tint-slate, #eef5fb); border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; padding: 2px 6px;
  color: var(--ic-ink); cursor: pointer;
}
.ic-sig-token:hover { background: var(--t-tint-blue, #ddeaf7); }
.ic-sig-box {
  width: 100%; border: 1px solid var(--ic-line); border-radius: 6px; padding: 10px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5;
  resize: vertical; background: var(--t-surface, #fff); color: var(--ic-ink);
}
.ic-sig-hint { font-size: 11px; color: var(--t-faint, #8a96a6); margin-top: 6px; line-height: 1.45; }

/* The preview is the point: a shared signature is written with tokens, so what
   you type is never what arrives. */
.ic-sig-preview { border: 1px solid var(--ic-line); border-radius: 8px; padding: 12px; background: var(--t-surface, #fff); }
.ic-sig-preview-body { font-size: 13px; color: var(--ic-muted); }
.ic-sig-preview-rule { border-top: 1px solid var(--ic-line); margin: 10px 0; }
.ic-sig-preview-sig { font-size: 13px; line-height: 1.55; color: var(--ic-ink); }

/* System > Notifications. Push has more off-states than on-states, so the
   status row carries its own colour rather than relying on a toggle. */
.ic-push-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ic-push-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: #8a96a6; }
.ic-push-dot.is-on { background: var(--ic-green); box-shadow: 0 0 0 3px rgba(31,157,85,.18); }
.ic-push-dot.is-off { background: #8a96a6; }
.ic-push-dot.is-bad { background: var(--t-danger, #c0392b); box-shadow: 0 0 0 3px rgba(192,57,43,.16); }
.ic-push-dot.is-unknown { background: var(--t-tint-blue, #cfd8e3); }
.ic-push-text { display: flex; flex-direction: column; line-height: 1.35; }
.ic-push-text strong { font-size: 14px; }
.ic-push-text span { font-size: 12px; color: var(--ic-muted); }
.ic-push-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.ic-push-blocker {
  margin-top: 12px; padding: 9px 12px; font-size: 12px; line-height: 1.5;
  background: var(--t-tint-amber, #fdf6ec); border: 1px solid #b3873c; border-left-width: 3px;
  border-radius: 0 6px 6px 0; color: var(--t-tint-amber-ink, #7a5a22);
}

.ic-push-device {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--t-line-soft, #eef2f7); font-size: 13px;
}
.ic-push-device:last-of-type { border-bottom: 0; }
.ic-push-device-name { display: flex; flex-direction: column; line-height: 1.3; }
.ic-push-device-name span { font-size: 11px; color: var(--t-faint, #8a96a6); }
.ic-push-device .btn { margin-left: auto; }
.ic-push-none { color: var(--t-faint, #8a96a6); font-style: italic; font-size: 13px; margin: 0; }
.ic-push-hint { font-size: 11px; color: var(--t-faint, #8a96a6); line-height: 1.45; margin: 10px 0 0; }

.ic-push-group { margin-bottom: 14px; }
.ic-push-group:last-child { margin-bottom: 0; }
.ic-push-group-h {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--t-faint, #8a96a6); margin-bottom: 4px;
}
.ic-push-opt {
  display: flex; align-items: flex-start; gap: 9px; font-weight: 400;
  padding: 6px 0; margin: 0; border-bottom: 1px solid #f2f5f9;
}
.ic-push-opt:last-child { border-bottom: 0; }
.ic-push-opt input { margin-top: 3px; }
.ic-push-opt-text b { display: block; font-size: 13px; font-weight: 600; }
.ic-push-opt-text span { font-size: 12px; color: var(--ic-muted); }
/* Shown, not hidden: the pending rows are the reminder of what is left to build. */
.ic-push-opt.is-pending { opacity: .72; }
.ic-push-pill {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 3px; padding: 1px 4px; margin-left: 5px; vertical-align: 1px;
}
.ic-push-pill.is-live { background: var(--t-tint-green, #eef8f2); color: var(--t-tint-green-ink, #167c42); border: 1px solid var(--t-success, #1f9d55); }
.ic-push-pill.is-pending { background: var(--t-tint-amber, #fdf6ec); color: var(--t-tint-amber-ink, #8a6d3b); border: 1px solid #b3873c; }

/* The toggle sits in the records search row, not the topbar: ic-dashboard-theme
   hides .main-header above 768px, so a control in there is invisible on every
   desktop. That row is a page surface, which does change with the theme, so
   these colours are tokenised rather than fixed. */
.ic-theme-toggle {
  float: right;
  display: inline-flex;
  margin: 0 0 0 12px;
  border: 1px solid var(--t-line, #d8dee8);
  border-radius: 999px;
  overflow: hidden;
  background: var(--t-surface, #fff);
}
.ic-theme-toggle button {
  border: 0;
  background: transparent;
  color: var(--t-muted, #5b6b7c);
  font-size: 13px;
  line-height: 1;
  padding: 6px 11px;
  cursor: pointer;
}
.ic-theme-toggle button + button { border-left: 1px solid var(--t-line, #d8dee8); }
.ic-theme-toggle button:hover {
  background: var(--t-surface-2, #f7f9fc);
  color: var(--t-ink, #1b2433);
}
.ic-theme-toggle button.is-on { background: var(--t-brand, #5b2c86); color: #fff; }
.ic-theme-toggle button:focus-visible {
  outline: 2px solid var(--t-accent, #2f80ed);
  outline-offset: -2px;
}
@media (max-width: 767px) { .ic-theme-toggle { margin-left: 6px; } }
@media print { .ic-theme-toggle { display: none; } }

/* ==========================================================================
   Dark shell
   --------------------------------------------------------------------------
   Tokenising the colours is only half of it. Text colours resolve through the
   tokens and go light, but the surfaces underneath them belong to AdminLTE and
   Bootstrap, which are not tokenised and stay white -- so the first build gave
   light text on white cards, which is worse than no dark mode at all.
   These force the containers onto the dark ground so nothing is ever light on
   light. !important because that is what AdminLTE uses.
   ========================================================================== */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .content-wrapper,
:root[data-theme="dark"] .wrapper {
  background: var(--t-bg) !important;
  color: var(--t-ink);
}

:root[data-theme="dark"] .box,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .well,
:root[data-theme="dark"] .spx-card,
:root[data-theme="dark"] .spx-widget {
  background: var(--t-surface) !important;
  border-color: var(--t-line) !important;
  color: var(--t-ink);
}

:root[data-theme="dark"] .box-header,
:root[data-theme="dark"] .box-footer,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .panel-heading {
  background: var(--t-surface-2) !important;
  border-color: var(--t-line) !important;
  color: var(--t-ink);
}

:root[data-theme="dark"] .table,
:root[data-theme="dark"] table {
  background: transparent;
  color: var(--t-ink);
}
:root[data-theme="dark"] .table > thead > tr > th,
:root[data-theme="dark"] .table > tbody > tr > td,
:root[data-theme="dark"] .table > tbody > tr > th {
  border-color: var(--t-line-soft) !important;
  color: var(--t-ink);
}
/* Striped and hover rows are literal whites in Bootstrap. */
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
:root[data-theme="dark"] .table-hover > tbody > tr:hover {
  background: var(--t-surface-2) !important;
}

/* Contextual rows (.success / .info / .warning / .danger / .active) were the one
   white left. Bootstrap paints them on the CELLS, not the row, so a td fill of
   #fcf8e3 sat on top of the row background above and the light ink set below
   landed on cream -- the ops calendar's "due" rows, monthly payments' paid and
   unpaid rows, the scheduled-deletion and product-change warnings. The fills
   move to the same tint tokens the chips use, which only exist in dark, so
   light is untouched. */
:root[data-theme="dark"] .table > tbody > tr.active > td,
:root[data-theme="dark"] .table > tbody > tr.active > th,
:root[data-theme="dark"] .table > tbody > tr > td.active,
:root[data-theme="dark"] .table > tbody > tr > th.active {
  background-color: var(--t-surface-3) !important;
}

:root[data-theme="dark"] .table > tbody > tr.success > td,
:root[data-theme="dark"] .table > tbody > tr.success > th,
:root[data-theme="dark"] .table > tbody > tr > td.success,
:root[data-theme="dark"] .table > tbody > tr > th.success {
  background-color: var(--t-tint-green) !important;
}

:root[data-theme="dark"] .table > tbody > tr.info > td,
:root[data-theme="dark"] .table > tbody > tr.info > th,
:root[data-theme="dark"] .table > tbody > tr > td.info,
:root[data-theme="dark"] .table > tbody > tr > th.info {
  background-color: var(--t-tint-blue) !important;
}

:root[data-theme="dark"] .table > tbody > tr.warning > td,
:root[data-theme="dark"] .table > tbody > tr.warning > th,
:root[data-theme="dark"] .table > tbody > tr > td.warning,
:root[data-theme="dark"] .table > tbody > tr > th.warning {
  background-color: var(--t-tint-amber) !important;
}

:root[data-theme="dark"] .table > tbody > tr.danger > td,
:root[data-theme="dark"] .table > tbody > tr.danger > th,
:root[data-theme="dark"] .table > tbody > tr > td.danger,
:root[data-theme="dark"] .table > tbody > tr > th.danger {
  background-color: var(--t-tint-red) !important;
}

/* Bootstrap darkens a tinted row on hover; in dark it has to lighten instead,
   or hovering a highlighted row reads as nothing happening. */
:root[data-theme="dark"] .table-hover > tbody > tr.active:hover > td,
:root[data-theme="dark"] .table-hover > tbody > tr:hover > td.active {
  background-color: #28344a !important;
}

:root[data-theme="dark"] .table-hover > tbody > tr.success:hover > td,
:root[data-theme="dark"] .table-hover > tbody > tr:hover > td.success {
  background-color: #1c4029 !important;
}

:root[data-theme="dark"] .table-hover > tbody > tr.info:hover > td,
:root[data-theme="dark"] .table-hover > tbody > tr:hover > td.info {
  background-color: #1e364c !important;
}

:root[data-theme="dark"] .table-hover > tbody > tr.warning:hover > td,
:root[data-theme="dark"] .table-hover > tbody > tr:hover > td.warning {
  background-color: #45341a !important;
}

:root[data-theme="dark"] .table-hover > tbody > tr.danger:hover > td,
:root[data-theme="dark"] .table-hover > tbody > tr:hover > td.danger {
  background-color: #452622 !important;
}

/* .text-muted is Bootstrap's #777, which lands near 3.5:1 on these fills.
   The muted token is legible on all five and still reads as secondary. */
:root[data-theme="dark"] .table > tbody > tr.active .text-muted,
:root[data-theme="dark"] .table > tbody > tr.success .text-muted,
:root[data-theme="dark"] .table > tbody > tr.info .text-muted,
:root[data-theme="dark"] .table > tbody > tr.warning .text-muted,
:root[data-theme="dark"] .table > tbody > tr.danger .text-muted {
  color: var(--t-muted) !important;
}

/* Inputs are the other place white survives, and an unreadable form is worse
   than an unreadable card. */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--t-surface-2) !important;
  border-color: var(--t-line) !important;
  color: var(--t-ink) !important;
}
:root[data-theme="dark"] ::placeholder { color: var(--t-faint); }

/* btn-default is white-on-white otherwise. The primary button keeps its own
   background, which the brand token already darkened enough for white text. */
:root[data-theme="dark"] .btn-default {
  background: var(--t-surface-2) !important;
  border-color: var(--t-line) !important;
  color: var(--t-ink) !important;
}
:root[data-theme="dark"] .btn-default:hover { background: var(--t-surface-3) !important; }

/* Anything still painting itself white keeps dark text, so a screen that has
   not been converted stays readable instead of going light-on-light. */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background-color:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"] {
  color: #1b2433;
}



/* The 14 --ic-* variables predate this work and carry 198 uses between them --
   links, headings, accents. They were never themed, so a link stayed #2e86c1
   on a dark card and measured 4.02 contrast against it, under the 4.5 needed
   to read comfortably. These are the same hues lifted until they clear it.
   --t-faint moves for the same reason: 4.18 was not enough. */
:root[data-theme="dark"] {
  --t-faint: #8b9bb0;
  --ic-ink: #e4ebf3;
  --ic-muted: #94a4b7;
  --ic-bg: #0f141d;
  --ic-card: #1a2231;
  --ic-line: #2a3548;
  --ic-blue: #6fb8e0;
  --ic-cyan: #6fc9e8;
  --ic-magenta: #e57fb4;
  --ic-purple: #b184d0;
  --ic-green: #3fbe76;
  /* navy stays navy: it is the topbar and sidebar, dark in both themes. */
}


/* --------------------------------------------------------------------------
   Solid fills that carry white text.
   --ic-blue, --ic-green and --ic-muted are lightened in dark because they are
   overwhelmingly text and borders -- 43 of --ic-muted's 46 uses are `color`.
   That is right for the majority and wrong for the handful of places the same
   variable fills a button or a chip with white writing on it: a pale blue
   button with white text measured 2.19:1.
   Splitting the variable would mean touching all 46 call sites, so the few
   background uses are pinned here instead. Dark only -- light is untouched. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .pagination > .active > a,
:root[data-theme="dark"] .pagination > .active > a:hover,
:root[data-theme="dark"] .pagination > .active > a:focus,
:root[data-theme="dark"] .pagination > .active > span,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination > .active > a,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .pagination > .active > a:hover,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
:root[data-theme="dark"] .status-filter-group .status-chip.status-filter-selected,
:root[data-theme="dark"] .vhost-service-tab.is-selected,
:root[data-theme="dark"] .vhost-supplier-item.is-selected,
:root[data-theme="dark"] .vhost-status-seg button.is-selected,
:root[data-theme="dark"] .account-wizard-card-select,
:root[data-theme="dark"] .ic-usage-graph-buttons button.is-active {
  background: #2f6fb0 !important;
  border-color: #2f6fb0 !important;
}
:root[data-theme="dark"] .btn-success {
  background: #1f7d47 !important;
  border-color: #1f7d47 !important;
}
:root[data-theme="dark"] .ic-audit-chip,
:root[data-theme="dark"] .ic-bulk-chip {
  background: #4a5a6d !important;
}

/* Desk signature logo: upload row, and the logo inside the arrival preview. */
.ic-sig-logo-body { border-top: 1px solid var(--line, #2a3240); }
.ic-sig-logo-h { font-size: 12px; font-weight: 700; text-transform: uppercase;
                 letter-spacing: .06em; color: var(--t-faint, #8a96a6); margin: 0 0 10px; }
.ic-sig-logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ic-sig-logo-current { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ic-sig-logo-img { max-width: 200px; max-height: 56px; height: auto;
                   background: #fff; padding: 4px; border-radius: 3px; }
.ic-sig-logo-meta { font-size: 11px; color: var(--t-faint, #8a96a6); }
.ic-sig-logo-none { font-size: 12px; color: var(--t-faint, #8a96a6); }
.ic-sig-logo-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ic-sig-preview-logo:empty { display: none; }
/* The mail client shows it on the message background, so the preview does too. */
.ic-sig-preview-logo img { max-width: 200px; max-height: 56px; height: auto;
                           display: block; margin: 0 0 8px; }

/* ==========================================================================
   UI consistency shell (feat/ui-consistency)
   --------------------------------------------------------------------------
   Global fixes so every portal scrolls on a phone, nested AdminLTE boxes do
   not stack borders, legacy content-header pages match spx-page heads, and
   report hubs share one tile grid. See docs/UI_STANDARD.md.
   ========================================================================== */

/* Document scroll on every viewport — AdminLTE's fixed .wrapper scroll trap
   also bites tablets and some desktop zoom levels, not only phones. */
html,
body.skin-blue {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.skin-blue .wrapper {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

body.sidebar-open {
  overflow: hidden;
}

/* Legacy content-header → same visual weight as spx-record-head */
.content-wrapper > .content-header,
section.content-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 28px 4px;
  background: transparent;
  border: 0;
}

.content-header > h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-ink, #1b2433);
  float: none;
}

.content-header > .breadcrumb {
  float: none;
  position: static;
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--t-tint-blue-ink, #6b7a90);
}

.content-header > .breadcrumb > li + li:before {
  content: "/ ";
  padding: 0 4px;
  color: var(--t-faint, #8a96a6);
}

/* When page already has spx-page head, suppress a leftover content-header */
.content.spx-page > .content-header {
  display: none;
}

@media (max-width: 767px) {
  .content-wrapper > .content-header,
  section.content-header {
    padding: 10px 12px 4px;
  }

  .content-header > h1 {
    font-size: 22px;
  }
}

/* One outer card border; kill stacked box-in-box outlines */
.content .box.spx-card,
.content .box.box-default,
.content .box.box-primary,
.content .box.box-info,
.content .box.box-success,
.content .box.box-warning,
.content .box.box-danger,
.content .box {
  border: 1px solid var(--t-line, #e4ebf2);
  box-shadow: 0 1px 4px rgba(18, 24, 38, 0.06);
  border-radius: 6px;
  background: var(--t-surface, #fff);
}

.content .box > .box-header {
  border-bottom: 1px solid var(--t-line-soft, #eef1f5);
  border-radius: 6px 6px 0 0;
  background: transparent;
}

.content .box > .box-body > .box,
.content .box > .box-body > .row > [class*="col-"] > .box {
  box-shadow: none;
  border-color: var(--t-line-soft, #eef1f5);
}

/* Nested table shells: no second frame */
.content .box .box-body .table-responsive,
.content .box .box-body .dataTables_wrapper {
  border: 0;
  background: transparent;
}

.content .box.spx-card > .box-body {
  padding: 14px 16px;
}

.content .box .box + .box {
  margin-top: 12px;
}

/* Compact gutters on phone so cards don't overflow the viewport */
@media (max-width: 767px) {
  .content {
    padding: 10px 12px 24px;
  }

  .content-header {
    padding: 12px 12px 8px;
  }

  .content-wrapper > .account-wizard-steps,
  .content-wrapper > ol.pc-steps {
    margin-left: 12px;
    margin-right: 12px;
  }

  .spx-record-head,
  body.spx-app .spx-record-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .spx-toolbar-actions {
    width: 100%;
  }

  .spx-toolbar-actions .btn,
  .spx-filters .form-control,
  .spx-search .form-control {
    max-width: 100%;
  }

  .spx-title {
    font-size: 22px;
    letter-spacing: 0.03em;
  }

  /* Avoid col-xs-6 report tiles crushing labels */
  .spx-report-grid > [class*="col-"] {
    width: 100%;
    float: none;
  }
}

/* Report hub tile grid */
.spx-report-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.spx-report-grid > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 12px;
}

.spx-report-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid var(--t-line, #e4ebf2);
  border-radius: 8px;
  background: var(--t-surface, #fff);
  box-shadow: 0 1px 4px rgba(18, 24, 38, 0.06);
  height: 100%;
}

.spx-report-tile-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--t-ink, #1b2433);
  line-height: 1.3;
}

.spx-report-tile .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.spx-report-tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* Default list tables get mobile card treatment when marked */
@media (max-width: 767px) {
  .content .table-responsive {
    max-height: none !important;
    border: 0;
  }

  .main-footer {
    margin-left: 0 !important;
    padding: 12px;
  }
}

/* Member / technician: same content inset as staff */
body.spx-app .content.spx-page {
  max-width: 100%;
}

.spx-card-heading .box-title {
  font-size: 15px;
  font-weight: 600;
}
/* Margin on the Minutes report -- revenue less what Session bills us.
   Colour carries the sign, because the sign is the whole point of the column
   and a minus in front of a rand figure is easy to read past. Both tokens are
   the -text pair, which is the one already tuned for reading on a surface
   rather than filling a chip; the light values sit in the var() fallbacks the
   way every other token here does. */
.spx-margin.is-positive { color: var(--t-success-text, #1f7d47); }
.spx-margin.is-negative { color: var(--t-danger-text, #c0392b); }
/* The percentage under the figure is a second, quieter reading of the same
   number, so it keeps the colour and loses the weight. */
.spx-margin .small { font-weight: 400; opacity: .75; }
h3.spx-margin { font-weight: inherit; }

/* The band that runs across the top while a preview is running.
   Amber because it is a state you are in rather than a thing that went wrong,
   and full-bleed above the header because it has to be visible on the
   technician portal too, where it is the only way back out. Tokens are the
   amber tint pair, so it reads on either palette. */
.ic-viewas-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 8px 16px;
  background: var(--t-tint-amber, #fff6e5);
  color: var(--t-tint-amber-ink, #7a5b12);
  border-bottom: 1px solid var(--t-line, #e4ebf2);
  font-size: 13px;
}
.ic-viewas-bar .fa-eye { font-size: 15px; }
.ic-viewas-text { flex: 1 1 320px; }
.ic-viewas-who { font-weight: 600; }
.ic-viewas-left { font-variant-numeric: tabular-nums; opacity: .8; }
.ic-viewas-stop {
  background: var(--t-tint-amber-ink, #7a5b12);
  color: var(--t-tint-amber, #fff6e5);
  border: 0; font-weight: 600;
}
.ic-viewas-stop:hover, .ic-viewas-stop:focus {
  background: var(--t-tint-amber-ink, #7a5b12);
  color: var(--t-tint-amber, #fff6e5);
  text-decoration: underline;
}
/* The picker rows on the View as page: one select and one button per kind. */
.ic-viewas-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ic-viewas-form select { min-width: 320px; max-width: 100%; }
.ic-viewas-running { border-left: 3px solid var(--t-tint-amber-ink, #7a5b12); }

/* System -> Menus: the builder.
   A tree of 15 sections and 66 items needs the sections to read as blocks and
   the items to read as belonging to one, so the indent carries a rule rather
   than relying on whitespace alone. */
.ic-menu-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ic-menu-tab {
  display: flex; flex-direction: column; gap: 1px; min-width: 150px;
  padding: 9px 14px; border-radius: 7px; text-decoration: none;
  background: var(--t-surface-2, #f2f5f9); border: 1px solid var(--t-line, #e4ebf2);
  color: var(--t-ink, #243447);
}
.ic-menu-tab:hover, .ic-menu-tab:focus { text-decoration: none; color: var(--t-ink, #243447); }
.ic-menu-tab span { font-size: 11.5px; color: var(--t-faint, #8a96a6); }
.ic-menu-tab.is-on {
  background: var(--t-tint-purple, #f3ebfb); border-color: var(--t-brand-text, #5b2c86);
  color: var(--t-tint-purple-ink, #5b2c86);
}
.ic-menu-tab.is-on span { color: inherit; opacity: .8; }

.ic-menu-sec { border-top: 1px solid var(--t-line-soft, #eef1f6); padding: 10px 0 8px; }
.ic-menu-sec:first-child { border-top: 0; }
.ic-menu-sec.is-off { opacity: .62; }
.ic-menu-row { display: flex; align-items: center; gap: 10px; }
.ic-menu-row label { margin: 0; font-weight: 600; cursor: pointer; }
.ic-menu-row.is-item { padding: 3px 0 3px 26px; }
.ic-menu-row.is-item label { font-weight: 400; }
.ic-menu-items {
  margin: 6px 0 4px 7px; padding-left: 10px;
  border-left: 2px solid var(--t-line-soft, #eef1f6);
}
.ic-menu-lock {
  font-size: 11px; font-weight: 500 !important; display: inline-flex; align-items: center;
  gap: 5px; padding: 2px 9px; border-radius: 11px;
  border: 1px solid var(--t-line, #e4ebf2); color: var(--t-faint, #8a96a6);
}
.ic-menu-lock.is-on {
  color: var(--t-tint-amber-ink, #7a5b12); border-color: var(--t-tint-amber-ink, #7a5b12);
  background: var(--t-tint-amber, #fff6e5);
}
/* "as before" is the resting state, so it stays quiet; only a change is worth
   a colour. */
.ic-menu-state { font-size: 10.5px; color: var(--t-faint, #8a96a6); margin-left: auto; }
.ic-menu-state.is-changed { color: var(--t-tint-amber-ink, #7a5b12); font-weight: 600; }
.ic-menu-source { font-size: 10.5px; color: var(--t-faint, #8a96a6); margin: 5px 0 0 26px; }

/* System -> Features. Shares the menu builder's shape; the only new parts are
   the group headings and the warning on a control that cannot be taken back. */
.ic-feat-group {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-faint, #8a96a6); margin: 16px 0 2px; font-weight: 600;
}
.ic-feat-danger {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--t-danger-text, #c0392b); border: 1px solid var(--t-danger-text, #c0392b);
  border-radius: 10px; padding: 1px 7px;
}

/* "Check the routers now" on the IPv4 panel. Three short lines of router
   output, so the pills carry the reading and the rest stays quiet. */
.ic-static-out { display: block; margin-top: 6px; font-size: 12.5px; }
.ic-static-head { margin-bottom: 5px; }
.ic-static-router { padding: 2px 0; }
.ic-static-router strong { margin-right: 6px; }
.ic-static-dim { color: var(--t-faint, #8a96a6); margin-left: 5px; }
.ic-static-pill {
  display: inline-block; padding: 1px 7px; border-radius: 10px; margin-right: 5px;
  font-size: 11px; font-weight: 600;
}
.ic-static-pill.is-ok   { background: var(--t-tint-green, #e6f7ee); color: var(--t-tint-green-ink, #1f7d47); }
.ic-static-pill.is-warn { background: var(--t-tint-amber, #fff6e5); color: var(--t-tint-amber-ink, #7a5b12); }
.ic-static-pill.is-bad  { background: var(--t-tint-red, #fdecea); color: var(--t-tint-red-ink, #c0392b); }
.ic-static-pill.is-dim  { background: var(--t-surface-2, #f2f5f9); color: var(--t-faint, #8a96a6); }

/* The notification bell in the records bar.
   pwa.css styles it for the top navbar -- white on a coloured band, 56px tall
   to match the bar it used to sit in. Here it sits beside the theme toggle on
   the page background, so those three are undone and it is sized to match the
   toggle next to it. */
/* Float it right, beside the theme toggle.
   Without this it lands at the left of the bar, and pwa.css anchors the menu
   with `right: 8px` -- to the bell's own right edge, which put a 360px panel
   297px off the left of the screen. Measured, not guessed. Floating it right
   is what makes that anchor mean what it means in the navbar this came from. */
.ic-records-search-bar .ic-notify-inline {
  float: right;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 8px;
}
.ic-records-search-bar .ic-notify-toggle {
  color: var(--t-ink, #243447) !important;
  height: 32px !important;
  line-height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid var(--t-line, #d8dee8);
  border-radius: 6px;
  background: var(--t-surface, #fff);
  display: inline-block;
}
.ic-records-search-bar .ic-notify-toggle:hover,
.ic-records-search-bar .ic-notify.open > .ic-notify-toggle {
  background: var(--t-surface-2, #f2f5f9) !important;
  color: var(--t-ink, #243447) !important;
}
.ic-records-search-bar .ic-notify-badge { top: -6px; right: -6px; }
/* The panel holds everything unread and scrolls, so this is how much of that
   is on screen at once rather than a cap on the list. Matches the height
   pwa.css gives the navbar copy. */
.ic-records-search-bar .ic-notify-list { max-height: 360px; }

/* The full notifications page, and the "see all" foot of the dropdown. */
.ic-notify-foot { padding: 8px 14px; border-top: 1px solid var(--t-line-soft, #eef1f6); text-align: center; }
.ic-notify-foot a { font-size: 12.5px; color: var(--t-link, #2e86c1); }

.ic-notify-page { display: flex; flex-direction: column; }
.ic-notify-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 11px 8px 11px 22px; position: relative;
  border-bottom: 1px solid var(--t-line-soft, #eef1f6);
  color: var(--t-ink, #243447);
}
.ic-notify-row:last-child { border-bottom: 0; }
.ic-notify-row:hover, .ic-notify-row:focus {
  background: var(--t-surface-2, #f7f9fc); color: var(--t-ink, #243447); text-decoration: none;
}
/* Unread carries a dot rather than a background wash: a list where most rows
   are unread would otherwise be one solid block of colour. */
.ic-notify-row.is-unread::before {
  content: ""; position: absolute; left: 8px; top: 17px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--t-link, #2e86c1);
}
.ic-notify-row:not(.is-unread) { color: var(--t-faint, #8a96a6); }
.ic-notify-row-main { flex: 1; min-width: 0; }
.ic-notify-row-body { font-size: 13px; color: var(--t-tint-slate-ink, #6b7a8d); margin-top: 2px; }
.ic-notify-row-when { flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--t-faint, #8a96a6); }

/* The push button once it has nothing left to do -- already on, blocked, or
   unsupported. Reads as a statement rather than something still to press. */
.ic-notify-enable.is-settled {
  cursor: default;
  font-weight: 400;
  color: var(--t-faint, #8a96a6) !important;
}

/* A PDF attachment shown over the page.
   Sized to the viewport rather than the document: a proof of payment is read,
   not skimmed, so it gets nearly the whole screen. */
.ic-pdf-modal {
  position: fixed; inset: 0; z-index: 1080;
  background: rgba(9, 13, 20, .72);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ic-pdf-modal[hidden] { display: none; }
body.ic-pdf-open { overflow: hidden; }
.ic-pdf-panel {
  display: flex; flex-direction: column;
  /* Not min(): this file is served raw from public/ AND compiled by
     Sprockets from app/assets, and sass 3.4 has its own min() that
     predates the CSS one -- it tries to compare 1000px with 100%,
     raises Incompatible units, and every page that touches the asset
     pipeline 500s. The pair below means exactly the same thing. */
  width: 1000px; max-width: 100%; height: 90vh; max-height: 100%;
  background: var(--t-surface, #fff); border: 1px solid var(--t-line, #d8dee8);
  border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.ic-pdf-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--t-line, #d8dee8);
  background: var(--t-surface-2, #f7f9fc); color: var(--t-ink, #243447);
}
.ic-pdf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-pdf-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ic-pdf-actions a { font-size: 12.5px; }
.ic-pdf-close {
  border: 0; background: transparent; font-size: 22px; line-height: 1;
  color: var(--t-faint, #8a96a6); cursor: pointer; padding: 0 2px;
}
.ic-pdf-close:hover { color: var(--t-ink, #243447); }
/* The viewer itself is the browser's. White behind it on purpose -- a PDF page
   is white, and a dark frame around it reads as a rendering fault. */
.ic-pdf-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.ic-pdf-link { cursor: pointer; }
.ic-pdf-link .fa { margin-right: 4px; opacity: .8; }

/* A photo in the same panel as a PDF.
   The panel shrinks to the picture rather than the picture stretching to the
   panel: a 200px logo blown up to 1000px is worse than useless, and several of
   these attachments are mail signatures. */
.ic-pdf-modal.is-photo .ic-pdf-panel { width: auto; max-width: 1100px; height: auto; max-height: 90vh; }
.ic-pdf-photo {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto; background: var(--t-surface-3, #eef1f6);
  min-height: 0;
}
.ic-pdf-photo[hidden] { display: none; }
.ic-pdf-image { max-width: 100%; max-height: calc(90vh - 90px); object-fit: contain; }
.ic-pdf-frame[hidden] { display: none; }

/* Internet list — the IP column.
   How a service takes its address and what that address is, in one cell.
   Tokens carry their light-mode hex as the fallback, because ic-theme.css
   defines them only under [data-theme="dark"]; an invented name would render
   its fallback in both modes and never change. */
.ic-ip-cell { white-space: nowrap; }
.ic-ip-kind {
  display: inline-block; padding: 0 6px; border-radius: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  vertical-align: 1px; margin-right: 6px;
}
.ic-ip-kind.is-static { background: var(--t-tint-green, #e6f6ec); color: var(--t-tint-green-ink, #197d44); }
.ic-ip-kind.is-natted { background: var(--t-tint-amber, #fff4d6); color: var(--t-tint-amber-ink, #876b00); }
.ic-ip-kind.is-pool { background: var(--t-tint-blue, #e8f4fb); color: var(--t-link, #1d6fa5); }
.ic-ip-addr { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; }
.ic-ip-none { font-size: 11.5px; font-style: italic; color: var(--t-muted, #5b6b7c); }
/* The CGNAT group rides in the cell's title rather than on a second line --
   see account_ipv4_cell. A two-line row in a thirteen-column table costs more
   than the group is worth at a glance. */

/* ---- Domains: import DNS records from a CSV -------------------------------
   The panel sits above the zone table inside the DNS popup. It is deliberately
   quiet until it has something to say: the diff is the only part that carries
   colour, because the diff is the thing being agreed to.

   No delete styling here on purpose. The import adds and updates only -- a
   record in the zone and not in the file is left alone -- so a red row would
   promise a state this feature cannot reach. */
.spx-dns-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.spx-dns-off {
  background: var(--t-tint-amber, #fcf0dc);
  color: var(--t-tint-amber-ink, #9a6614);
}

.spx-dns-import {
  border: 1px solid var(--t-line, #dce3ea);
  border-radius: 8px;
  background: var(--t-surface-2, #f7f9fc);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.spx-dns-import-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.spx-dns-import-file input[type="file"] {
  font-size: 12.5px;
  max-width: 100%;
}
.spx-dns-import-hint {
  flex: 1 1 100%;
  margin: 4px 0 0;
}
.spx-dns-import-hint code {
  font-size: 11.5px;
  padding: 1px 4px;
}
.spx-dns-import-go {
  margin-top: 10px;
}

/* What the file would do, counted before it is read row by row. */
.spx-dns-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
}
.spx-dns-c-add {
  background: var(--t-tint-green, #e3f5ea);
  color: var(--t-tint-green-ink, #1f7d47);
}
.spx-dns-c-upd {
  background: var(--t-tint-amber, #fcf0dc);
  color: var(--t-tint-amber-ink, #9a6614);
}
/* Not a count -- a promise. It is the reason this import is safe to hand over. */
.spx-dns-c-keep {
  background: var(--t-tint-blue, #e6f2fa);
  color: var(--t-tint-blue-ink, #1d6fa5);
}

.spx-dns-diff .spx-dns-mark {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700;
  text-align: center;
  color: var(--t-faint, #8a96a6);
}
.spx-dns-diff tr.spx-dns-add > td { background: var(--t-tint-green, #e3f5ea); }
.spx-dns-diff tr.spx-dns-add .spx-dns-mark { color: var(--t-tint-green-ink, #1f7d47); }
.spx-dns-diff tr.spx-dns-update > td { background: var(--t-tint-amber, #fcf0dc); }
.spx-dns-diff tr.spx-dns-update .spx-dns-mark { color: var(--t-tint-amber-ink, #9a6614); }
.spx-dns-diff tr.spx-dns-same > td { opacity: 0.62; }

/* The value being replaced, under the one replacing it. */
.spx-dns-was {
  display: block;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--t-faint, #8a96a6);
  text-decoration: line-through;
}
/* Why a row is an addition when it looks like it should be an update: the zone
   holds several records of that name and type, so which one was meant is not
   knowable and guessing would overwrite one of them. */
.spx-dns-rownote {
  display: block;
  font-size: 11px;
  line-height: 1.45;
  color: var(--t-tint-amber-ink, #9a6614);
}

.spx-dns-problems {
  margin: 6px 0 0;
  padding-left: 20px;
}
.spx-dns-problems li {
  margin-bottom: 3px;
}