/* ==========================================================================
   Intellihost Domain Manager — Bootstrap 5.3 theme
   Brand overrides + the handful of custom components Bootstrap doesn't ship.
   ========================================================================== */

:root{
  /* Brand */
  --ih-teal:#0097B5;
  --ih-teal-dark:#007E97;
  --ih-teal-light:#E5F6F9;
  --ih-slate:#3E4457;
  --ih-ink:#232838;
  --ih-sidebar:#1F2331;
  --ih-sidebar-text:#ABB1BF;
  /* slate-300, not slate-500: the muted token is scoped to the LIGHT surface.
     On the dark sidebar it only reaches 2.54:1, so de-emphasis comes from
     size + weight + letter-spacing instead of a dimmer colour. */
  --ih-sidebar-label:#D9DDE6; /* was #ABB1BF — reviewer 2026-08-13: legends disappeared on the dark rail */
  --ih-amber:#F4A847;
  --ih-veld:#16A34A;
  --ih-danger:#DC2626;
  --ih-surface:#FAFAF7;
  --ih-border:#E7E9EE;

  /* Bootstrap remap */
  --bs-primary:#0097B5;
  --bs-primary-rgb:0,151,181;
  --bs-link-color:#0097B5;
  --bs-link-hover-color:#007E97;
  --bs-success:#16A34A;
  --bs-success-rgb:22,163,74;
  --bs-danger:#DC2626;
  --bs-danger-rgb:220,38,38;
  --bs-warning:#F4A847;
  --bs-warning-rgb:244,168,71;
  --bs-body-font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  --bs-body-color:#3E4457;
  --bs-body-bg:#FAFAF7;
  --bs-border-color:#E7E9EE;
}

body{
  background:var(--ih-surface);
  color:var(--ih-slate);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.ff-display{font-family:'DM Sans',sans-serif;letter-spacing:-.025em;font-weight:700;}
a{color:var(--ih-teal);text-decoration:none;}
a:hover{color:var(--ih-teal-dark);}

/* Tabular / technical figures — dates, money, IPs, domain names */
.tnum{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.93em;letter-spacing:-.01em;}

/* --- Buttons ------------------------------------------------------------- */
.btn-primary{
  --bs-btn-bg:#0097B5;--bs-btn-border-color:#0097B5;
  --bs-btn-hover-bg:#007E97;--bs-btn-hover-border-color:#007E97;
  --bs-btn-active-bg:#006E85;--bs-btn-active-border-color:#006E85;
  --bs-btn-disabled-bg:#0097B5;--bs-btn-disabled-border-color:#0097B5;
}
.btn-outline-primary{
  --bs-btn-color:#0097B5;--bs-btn-border-color:#0097B5;
  --bs-btn-hover-bg:#0097B5;--bs-btn-hover-border-color:#0097B5;
  --bs-btn-active-bg:#007E97;--bs-btn-active-border-color:#007E97;
}
.form-check-input:checked{background-color:var(--ih-teal);border-color:var(--ih-teal);}
.form-control:focus,.form-select:focus{border-color:#66C2D4;box-shadow:0 0 0 .2rem rgba(0,151,181,.2);}
.nav-pills .nav-link.active{background-color:var(--ih-teal);}
.progress{--bs-progress-bar-bg:var(--ih-teal);}
.badge.text-bg-info{--bs-badge-color:#fff;background-color:var(--ih-teal)!important;}
.table>:not(caption)>*>*{padding:.7rem .75rem;}

/* --- App shell ----------------------------------------------------------- */
.ih-shell{display:flex;min-height:100vh;}
.ih-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}

/* NOTE: .ih-side also carries Bootstrap's `offcanvas-lg` class for the mobile
   drawer. At >=lg Bootstrap applies `background-color: transparent !important`
   and zeroes the offcanvas border, so both must be restated with !important
   here or the dark panel paints transparent on desktop. */
.ih-side{
  width:250px;flex:0 0 250px;
  background-color:var(--ih-sidebar)!important;
  color:var(--ih-sidebar-text);
  border-right:0!important;
}
@media (min-width:992px){
  .ih-side{position:sticky;top:0;height:100vh;overflow-y:auto;}
}
.ih-side::-webkit-scrollbar{width:6px;}
.ih-side::-webkit-scrollbar-thumb{background:var(--ih-slate);border-radius:3px;}

.ih-brand{height:62px;border-bottom:1px solid rgba(255,255,255,.07);}

.ih-navlink{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.55rem .95rem;border:0;background:none;text-align:left;
  color:var(--ih-sidebar-text);border-radius:.5rem;
  font-size:.9rem;font-weight:500;cursor:pointer;
}
.ih-navlink:hover{background:rgba(255,255,255,.06);color:#fff;}
.ih-navlink.active{background:var(--ih-teal);color:#fff;box-shadow:0 4px 12px rgba(0,151,181,.35);}
.ih-navlink i{font-size:1.05rem;width:1.2rem;text-align:center;}

.ih-group-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ih-sidebar-label);font-weight:600;
  padding:.5rem .95rem .3rem;margin-top:.4rem;
}

.ih-topbar{height:62px;background:#fff;border-bottom:1px solid var(--ih-border);position:sticky;top:0;z-index:1020;}
.ih-content{padding:1.6rem;flex:1;}
@media (max-width:991.98px){.ih-content{padding:1rem;}}

.ih-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--ih-teal);
  color:#fff;font-weight:700;font-size:.78rem;
  display:grid;place-items:center;
}

/* --- Card (replaces the old Metronic portlet) ---------------------------- */
.ih-card{background:#fff;border:1px solid #E9EDF3;border-radius:.75rem;box-shadow:0 1px 2px rgba(30,41,59,.04);}
.ih-card-h{padding:.9rem 1.15rem;border-bottom:1px solid #EEF1F6;display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;}
.ih-card-b{padding:1.15rem;}

/* --- KPI tile ------------------------------------------------------------ */
.ih-tile-ic{width:52px;height:52px;border-radius:.7rem;display:grid;place-items:center;font-size:1.5rem;}

/* --- Key/value rows ------------------------------------------------------ */
.ih-kv{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px dashed #EEF1F6;font-size:.9rem;}
.ih-kv:last-child{border-bottom:none;}
.ih-kv .k{color:#8B93A7;flex:0 0 auto;white-space:nowrap;}
.ih-kv .v{font-weight:600;color:var(--ih-ink);text-align:right;min-width:0;}

/* --- Wizard steps -------------------------------------------------------- */
.ih-step{display:flex;align-items:center;gap:.55rem;font-weight:600;color:#9AA2B4;font-size:.9rem;}
.ih-step .n{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:#EEF1F6;color:#8B93A7;font-size:.85rem;}
.ih-step.is-active{color:var(--ih-teal);}
.ih-step.is-active .n{background:var(--ih-teal);color:#fff;}
.ih-step.is-done .n{background:var(--ih-veld);color:#fff;}
.ih-step-line{flex:1 1 auto;min-width:20px;border-top:1px solid var(--ih-border);}

/* --- DataTables on small screens ----------------------------------------- */
/* Reviewer 2026-08-14: DataTables pages broke the mobile layout — the table
   rendered at full content width and stretched the page, while plain tables
   behaved. Wide DataTables now scroll inside their own layout cell instead of
   the page scrolling sideways. Covers both DT2 layout shapes (the cell div
   inside .dt-layout-table rows, and the row itself when no cell renders). */
div.dt-container .dt-layout-table,
div.dt-container .dt-layout-table>div{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}

/* --- Sortable table headers --------------------------------------------- */
.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
.sortable i{font-size:.72rem;opacity:.55;margin-left:.2rem;}

/* --- Auth ---------------------------------------------------------------- */
.ih-authbg{
  min-height:100vh;
  background:linear-gradient(160deg,#EEF4F7 0%,#E2EDF1 55%,#D7E8EE 100%);
  display:flex;align-items:center;justify-content:center;padding:2rem 1rem;
}
.ih-authcard{box-shadow:0 18px 50px rgba(40,55,80,.14);}

/* --- QR placeholder (2FA enrolment) ------------------------------------- */
.ih-qr{
  width:150px;height:150px;
  background:repeating-conic-gradient(var(--ih-sidebar) 0% 25%,#fff 0% 50%) 50%/18px 18px;
}

/* --- Utility ------------------------------------------------------------- */
.is-hidden{display:none!important;}
.ih-hero{background:linear-gradient(120deg,#0097B5 0%,#00789A 100%);border:none;color:#fff;}
.ih-result-row{border-radius:.5rem;padding:1rem;}
.ih-result-ok{background:var(--ih-teal-light);}
.ih-result-no{background:#FBF0F0;}

/* --- Changelog (portal/dashboard, portal/changelog, admin/changelogedit) -----------
   The stored message is admin HTML that ChangelogHtml has reduced to
   p/br/strong/b/em/i/u/ul/ol/li/a/code with NO class or style attributes, so its
   spacing lives here. The values reproduce the old static Latest-news markup
   (p mt-1/mb-1, ul mt-1/mb-0/ps-3, li mb-1, all at .85rem) so the migrated entries
   look as they did. scroll-margin keeps an anchored entry clear of the sticky topbar. */
.ih-changelog-entry{scroll-margin-top:80px;}
.ih-changelog-entry:target{background:var(--ih-teal-light);border-radius:.5rem;box-shadow:0 0 0 .5rem var(--ih-teal-light);}
.ih-changelog-title{font-size:.95rem;margin:.2rem 0 0;color:var(--ih-ink);}
.ih-changelog-body{font-size:.85rem;}
.ih-changelog-body p{margin:.25rem 0;}
.ih-changelog-body ul,.ih-changelog-body ol{margin:.25rem 0 0;padding-left:1rem;}
.ih-changelog-body li{margin-bottom:.25rem;}
/* --- Notice bar (_layouts/app.php on every signed-in app page; the editor preview) ----
   One slim line per active notice: megaphone, header, "Read more" and a dismiss x
   (Bootstrap's .btn-close, padded to at least 24px square). It wraps on a narrow screen
   rather than truncating the header. */
.ih-notices{margin-bottom:1rem;}
.ih-notice{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;padding:.4rem .5rem .4rem .85rem;margin-bottom:.4rem;border-left:.3rem solid var(--ih-teal);border-radius:.4rem;background:var(--ih-teal-light);font-size:.875rem;}
.ih-notice:last-child{margin-bottom:0;}
.ih-notice > .bi{color:var(--ih-teal);}
.ih-notice-text{font-weight:600;color:var(--ih-ink);min-width:0;overflow-wrap:anywhere;}
.ih-notice-more{font-weight:600;white-space:nowrap;}
.ih-notice-dismiss{display:flex;margin:0 0 0 auto;}
.ih-notice .btn-close{font-size:.65rem;padding:.5rem;}