/* ============================================================
   GOPHISH — SOC redesign theme
   Loaded AFTER gophish.css (built bootstrap+main) to reskin the
   existing server-rendered app without changing its behavior.
   ============================================================ */

/* ---------- THEME TOKENS ---------- */
:root {
  --accent-h: 274;
  --accent: oklch(0.62 0.18 var(--accent-h));
  --accent-strong: oklch(0.55 0.19 var(--accent-h));
  --accent-soft: oklch(0.62 0.18 var(--accent-h) / 0.14);
  --accent-line: oklch(0.62 0.18 var(--accent-h) / 0.32);
  --accent-ink: oklch(0.97 0.01 var(--accent-h));

  /* ---- YAZAMCO PRO CYBER brand palette (from the logo) ---- */
  --brand-navy:   oklch(0.34 0.13 278);
  --brand-violet: oklch(0.55 0.21 292);
  --brand-blue:   oklch(0.64 0.18 248);
  --brand-grad: linear-gradient(95deg, var(--brand-blue) 0%, var(--brand-violet) 100%);
  --brand-mark-grad: linear-gradient(150deg, var(--brand-violet) 0%, var(--brand-blue) 100%);

  --c-sent:      oklch(0.70 0.04 256);
  --c-opened:    oklch(0.74 0.13 215);
  --c-clicked:   oklch(0.80 0.14 78);
  --c-submitted: oklch(0.64 0.20 22);
  --c-reported:  oklch(0.74 0.15 152);

  --ui-font: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, monospace;

  --pad: 22px;
  --row-h: 46px;
  --radius: 12px;
  --radius-sm: 8px;
}

/* DARK (default) */
:root, :root[data-theme="dark"] {
  --bg:        oklch(0.18 0.012 256);
  --bg-sink:   oklch(0.15 0.012 256);
  --panel:     oklch(0.215 0.013 256);
  --panel-2:   oklch(0.255 0.014 256);
  --hover:     oklch(0.285 0.015 256);
  --border:    oklch(0.31 0.014 256);
  --border-soft: oklch(0.27 0.013 256);
  --ink:       oklch(0.96 0.004 256);
  --ink-mid:   oklch(0.78 0.008 256);
  --ink-dim:   oklch(0.62 0.01 256);
  --ink-faint: oklch(0.50 0.01 256);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 12px 30px -12px oklch(0 0 0 / 0.55);
  --grid-line: oklch(0.30 0.013 256 / 0.55);
}

/* LIGHT */
:root[data-theme="light"] {
  --bg:        oklch(0.97 0.004 256);
  --bg-sink:   oklch(0.94 0.005 256);
  --panel:     oklch(1 0 0);
  --panel-2:   oklch(0.975 0.004 256);
  --hover:     oklch(0.955 0.006 256);
  --border:    oklch(0.90 0.006 256);
  --border-soft: oklch(0.93 0.005 256);
  --ink:       oklch(0.22 0.015 256);
  --ink-mid:   oklch(0.42 0.013 256);
  --ink-dim:   oklch(0.55 0.012 256);
  --ink-faint: oklch(0.65 0.01 256);
  --shadow: 0 1px 2px oklch(0.5 0.02 256 / 0.10), 0 14px 34px -16px oklch(0.5 0.03 256 / 0.30);
  --grid-line: oklch(0.88 0.006 256 / 0.9);
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  background: var(--bg-sink) !important;
  color: var(--ink) !important;
  font-family: var(--ui-font) !important;
  -webkit-font-smoothing: antialiased;
}
body { padding-top: 0 !important; }
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-strong); }
::selection { background: var(--accent-soft); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: padding-box; }

/* Kill the old fixed top navbar entirely — we build our own topbar */
body > .navbar.navbar-fixed-top { display: none !important; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg-sink);
}

/* ---------- SIDEBAR ---------- */
.app > .sidebar {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  height: 100vh;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg) !important;
  border-right: 1px solid var(--border-soft) !important;
  min-height: 0;
  float: none !important;
}
.sidebar .brand {
  display: flex; align-items: center;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--border-soft);
}
/* Yazamco "pro Cyber" logo — light-text version on dark UI, dark on light */
.sidebar .brand-logo { width: 100%; display: block; }
.sidebar .brand-logo img { display: block; width: 100%; height: auto; }
.sidebar .brand-logo .for-light { display: none; }
:root[data-theme="light"] .sidebar .brand-logo .for-dark { display: none; }
:root[data-theme="light"] .sidebar .brand-logo .for-light { display: block; }

.sidebar .nav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; }
.sidebar .nav-label {
  font-family: var(--mono-font); font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink-faint); padding: 14px 12px 7px;
}

/* reuse existing .nav-sidebar markup */
.nav-sidebar { margin: 0 !important; list-style: none; padding: 0; }
.nav-sidebar > li { position: relative; }
.nav-sidebar > li > a {
  display: flex !important; align-items: center; gap: 11px;
  padding: 9px 12px !important; margin: 1px 0; border-radius: var(--radius-sm);
  color: var(--ink-mid) !important; font-size: 13.5px; font-weight: 500;
  background: transparent !important; text-decoration: none;
  transition: background .14s, color .14s;
}
.nav-sidebar > li > a:hover { background: var(--hover) !important; color: var(--ink) !important; }
.nav-sidebar > li.active > a { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
:root[data-theme="light"] .nav-sidebar > li.active > a { color: var(--accent-strong) !important; }
.nav-sidebar > li.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-sidebar > li > a > i.fa { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }
.nav-sidebar .nav-badge {
  margin-left: auto; font-family: var(--mono-font); font-size: 10px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-line);
  padding: 1px 7px; border-radius: 20px; letter-spacing: 0.5px;
}
.nav-sidebar > li > hr { border-color: var(--border-soft); margin: 12px 8px; }

.sidebar-foot { padding: 12px; border-top: 1px solid var(--border-soft); }
.sidebar-foot .health {
  background: var(--bg-sink); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px;
}
.sidebar-foot .health-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sidebar-foot .health-top span.lbl { font-family: var(--mono-font); font-size: 10.5px; color: var(--ink-dim); letter-spacing: 0.5px; }
.sidebar-foot .bars { display: flex; gap: 5px; }
.sidebar-foot .bars i { flex: 1; height: 16px; border-radius: 2px; background: var(--c-reported); opacity: .8; }
.sidebar-foot .bars i.warn { background: var(--c-clicked); opacity: 1; }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: var(--radius-sm); text-decoration: none;
}
.user-chip:hover { background: var(--hover); text-decoration: none; }
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px;
}
.user-chip .meta { line-height: 1.2; min-width: 0; flex: 1; }
.user-chip .meta b { font-size: 12.5px; font-weight: 600; display: block; color: var(--ink); }
.user-chip .meta span { font-size: 11px; color: var(--ink-dim); }
.user-chip .logout { color: var(--ink-faint); margin-left: auto; }

/* ---------- MAIN / TOPBAR / CANVAS ---------- */
.app > .main {
  display: flex !important; flex-direction: column;
  min-width: 0; min-height: 0; width: auto !important;
  padding: 0 !important; margin: 0 !important; float: none !important;
}
.topbar {
  height: 62px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 16px; padding: 0 var(--pad);
  position: sticky; top: 0; z-index: 30;
}
.topbar .page-title { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); }
.topbar .page-sub { font-size: 12px; color: var(--ink-dim); font-family: var(--mono-font); margin-top: 1px; }
.topbar .search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 9px; padding: 7px 12px; width: 280px; color: var(--ink-dim);
}
.topbar .search i { font-size: 13px; }
.topbar .search input { border: none; background: none; outline: none; color: var(--ink); font-family: var(--ui-font); font-size: 13px; width: 100%; }
.topbar .search .kbd {
  font-family: var(--mono-font); font-size: 11px; border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--ink-dim);
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid var(--border-soft); background: var(--panel); color: var(--ink-mid);
  cursor: pointer; transition: .14s; flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn i { font-size: 15px; }

/* Match the reference design: equal gutters on all sides, content centered
   within a max-width column. */
.canvas { flex: 1; overflow-y: auto; padding: var(--pad); min-height: 0; }
.canvas-inner { max-width: 1320px; margin: 0 auto; }

/* Neutralize the legacy Bootstrap offset column wrapper around page bodies so
   the body stretches to the page width instead of being pushed/centered. */
.canvas .main {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  float: none !important; position: static !important;
}
.canvas [class*="col-sm-offset"],
.canvas [class*="col-md-offset"] { margin-left: 0 !important; }
.canvas .row { margin-left: 0; margin-right: 0; }

/* Page header → slim section title (topbar already shows the title) */
.canvas .page-header {
  border: none !important; margin: 4px 0 14px !important; padding: 0 !important;
  font-size: 0; /* hide redundant big H1 text, keep spacing minimal */
}
.canvas .page-header { display: none !important; }

/* ============================================================
   BOOTSTRAP OVERRIDES
   ============================================================ */
.panel, .well {
  background: var(--panel) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--ink);
}
.panel-heading { background: transparent !important; border-bottom: 1px solid var(--border-soft) !important; color: var(--ink); }
hr { border-color: var(--border-soft); }

/* buttons */
.btn {
  border-radius: 9px !important; font-weight: 600 !important; font-family: var(--ui-font) !important;
  border: 1px solid var(--border) !important; transition: .14s !important;
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
}
.btn-default { background: var(--panel) !important; color: var(--ink) !important; }
.btn-default:hover, .btn-default:focus { background: var(--hover) !important; color: var(--ink) !important; }
.btn-primary {
  background: var(--accent) !important; border-color: transparent !important; color: var(--accent-ink) !important;
  box-shadow: 0 6px 16px -8px var(--accent);
}
.btn-primary:hover, .btn-primary:focus { background: var(--accent-strong) !important; color: var(--accent-ink) !important; }
.btn-danger { background: color-mix(in oklch, var(--c-submitted) 88%, black) !important; border-color: transparent !important; color: #fff !important; }
.btn-danger:hover { background: var(--c-submitted) !important; }
.btn-success { background: color-mix(in oklch, var(--c-reported) 80%, black) !important; border-color: transparent !important; color: #06210f !important; }
.btn-link { color: var(--accent) !important; }

/* tables */
.table { color: var(--ink-mid) !important; font-size: 13px; }
.table > thead > tr > th {
  font-family: var(--mono-font); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-faint) !important;
  border-bottom: 1px solid var(--border-soft) !important; padding: 0 14px 10px !important;
  vertical-align: middle;
}
.table > tbody > tr > td {
  padding: 0 14px !important; height: var(--row-h); vertical-align: middle !important;
  border-top: 1px solid var(--border-soft) !important; color: var(--ink-mid) !important;
}
.table > tbody > tr { transition: background .12s; }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background: var(--hover) !important; }
.table.dataTable { border-collapse: collapse !important; }
/* selected row (master-detail lists, e.g. Users & Groups) */
.table tbody tr.row-selected, .table tbody tr.row-selected:hover,
.table > tbody > tr.row-selected, .table > tbody > tr.row-selected:hover { background: var(--accent-soft) !important; }

/* forms */
.form-control, .input, textarea, select.form-control {
  background: var(--panel) !important; color: var(--ink) !important;
  border: 1px solid var(--border) !important; border-radius: 9px !important;
  box-shadow: none !important; font-family: var(--ui-font);
}
.form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.form-control::placeholder { color: var(--ink-faint) !important; }
.control-label, label, .form-group label { color: var(--ink-mid) !important; }
.gophish-editor { font-family: var(--mono-font) !important; }

/* modals */
.modal-content {
  background: var(--panel) !important; color: var(--ink) !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.modal-header, .modal-footer { border-color: var(--border-soft) !important; }
.modal-title { color: var(--ink) !important; font-weight: 600; letter-spacing: -0.2px; }
.modal-backdrop.in { opacity: 0.6; background: oklch(0.1 0.01 256); }
.close { color: var(--ink-mid) !important; opacity: .8; text-shadow: none; }
.close:hover { color: var(--ink) !important; opacity: 1; }

/* nav tabs */
.nav-tabs { border-bottom: 1px solid var(--border-soft) !important; }
.nav-tabs > li > a { color: var(--ink-dim) !important; border: none !important; border-radius: 0 !important; background: transparent !important; }
.nav-tabs > li > a:hover { color: var(--ink) !important; background: transparent !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--accent-ink) !important; background: transparent !important;
  border: none !important; border-bottom: 2px solid var(--accent) !important;
}
:root[data-theme="light"] .nav-tabs > li.active > a { color: var(--accent-strong) !important; }

/* alerts */
.alert { border-radius: var(--radius-sm) !important; border: 1px solid var(--border-soft) !important; }
.alert-success { background: color-mix(in oklch, var(--c-reported) 14%, transparent) !important; color: var(--c-reported) !important; }
.alert-danger { background: color-mix(in oklch, var(--c-submitted) 14%, transparent) !important; color: var(--c-submitted) !important; }
.alert-info { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.alert-warning { background: color-mix(in oklch, var(--c-clicked) 14%, transparent) !important; color: var(--c-clicked) !important; }
:root[data-theme="light"] .alert-info { color: var(--accent-strong) !important; }

/* badges, labels */
.badge { background: var(--panel-2) !important; color: var(--ink-dim) !important; font-family: var(--mono-font); font-weight: 500; }
.label { border-radius: 6px; font-weight: 500; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--border) !important; border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--ink-dim) !important; }
.dataTables_wrapper .paginate_button { color: var(--ink-mid) !important; }
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
  background: var(--accent) !important; border-color: transparent !important; color: var(--accent-ink) !important; border-radius: 7px;
}
.dataTables_wrapper .paginate_button:hover { background: var(--hover) !important; border-color: var(--border) !important; color: var(--ink) !important; border-radius: 7px; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--ink-faint); }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 9px !important; color: var(--ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink) !important; }
.select2-dropdown { background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--ink) !important; }
.select2-results__option { color: var(--ink-mid) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent) !important; color: var(--accent-ink) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; color: var(--accent-ink) !important; }

/* sweetalert */
.swal2-popup { background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--border); border-radius: var(--radius) !important; }
.swal2-title, .swal2-html-container { color: var(--ink) !important; }

/* loading spinner colour */
#loading .fa-spinner, .fa-spin { color: var(--accent); }

/* ============================================================
   NEW COMPONENTS (used by dashboard / cards)
   ============================================================ */
.soc-stack { display: flex; flex-direction: column; gap: 14px; }
.soc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.soc-split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.soc-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Panel whose body scrolls instead of growing: it contributes no height of
   its own to a .soc-split/.soc-grid row, so the row height is driven entirely
   by the sibling panel (e.g. Live Activity matches Phishing Funnel, Risk by
   Campaign matches Engagement Over Time) and the content scrolls inside. */
.panel-scroll { display: flex; flex-direction: column; }
.panel-scroll .panel-body { flex: 1; min-height: 0; position: relative; padding: 0; }
.panel-scroll .panel-body > .scroll-inner { position: absolute; inset: 0; overflow-y: auto; padding: var(--pad); }
/* vertical layout helper from the reference design — spaces a page's sections */
.stack { display: flex; flex-direction: column; gap: 14px; }
.soc-section-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 2px 0; }
.soc-muted { color: var(--ink-dim); }
.soc-mono { font-family: var(--mono-font); }

.soc-panel { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow); }
.soc-panel-head { display: flex; align-items: center; gap: 12px; padding: 15px var(--pad); border-bottom: 1px solid var(--border-soft); }
.soc-panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.soc-panel-head .sub { font-size: 11.5px; color: var(--ink-dim); font-family: var(--mono-font); }
.soc-panel-body { padding: var(--pad); }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi .label { font-family: var(--mono-font); font-size: 10.5px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ink-dim); display: flex; align-items: center; gap: 7px; }
.kpi .label .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.kpi .value { font-size: 30px; font-weight: 600; letter-spacing: -1px; margin-top: 12px; font-family: var(--mono-font); color: var(--ink); }
.kpi .value small { font-size: 16px; color: var(--ink-dim); font-weight: 500; }
.kpi .delta { font-size: 11.5px; font-family: var(--mono-font); margin-top: 5px; display: flex; align-items: center; gap: 5px; color: var(--ink-dim); }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; font-family: var(--mono-font); padding: 3px 9px 3px 8px; border-radius: 20px; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-sent { color: var(--c-sent); background: color-mix(in oklch, var(--c-sent) 15%, transparent); }
.pill-opened { color: var(--c-opened); background: color-mix(in oklch, var(--c-opened) 15%, transparent); }
.pill-clicked { color: var(--c-clicked); background: color-mix(in oklch, var(--c-clicked) 16%, transparent); }
.pill-submitted { color: var(--c-submitted); background: color-mix(in oklch, var(--c-submitted) 16%, transparent); }
.pill-reported { color: var(--c-reported); background: color-mix(in oklch, var(--c-reported) 15%, transparent); }
.pill-active { color: var(--accent); background: var(--accent-soft); }

.tag { font-family: var(--mono-font); font-size: 11px; color: var(--ink-dim); background: var(--panel-2); border: 1px solid var(--border-soft); padding: 2px 7px; border-radius: 6px; }

/* ============================================================
   CARD GRID (Email Templates / Landing Pages live previews)
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .card-grid { grid-template-columns: 1fr; } }
.tcard {
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .16s, border-color .16s; display: flex; flex-direction: column;
}
.tcard:hover { transform: translateY(-2px); border-color: var(--border); }
.tcard .thumb { height: 178px; position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--border-soft); }
.tcard .thumb .previewbar { height: 28px; background: var(--panel-2); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 6px; padding: 0 11px; position: relative; z-index: 2; }
.tcard .thumb .previewbar .d { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.tcard .thumb .previewbar .u { margin-left: 8px; font-family: var(--mono-font); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* scaled-down live preview iframe */
.tcard .thumb .frame-wrap { position: absolute; top: 28px; left: 0; right: 0; bottom: 0; overflow: hidden; background: #fff; }
.tcard .thumb iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0; transform: scale(0.4); transform-origin: top left; pointer-events: none; background: #fff; }
.tcard .thumb .empty { position: absolute; inset: 28px 0 0; display: grid; place-items: center; font-family: var(--mono-font); font-size: 11px; color: var(--ink-faint); background: var(--bg-sink); }
.tcard .thumb .overlay { position: absolute; inset: 28px 0 0; z-index: 3; cursor: pointer; background: transparent; transition: background .15s; display: grid; place-items: center; }
.tcard .thumb .overlay:hover { background: color-mix(in oklch, var(--accent) 18%, transparent); }
.tcard .thumb .overlay .open-pill { opacity: 0; transition: opacity .15s; }
.tcard .thumb .overlay:hover .open-pill { opacity: 1; }
.tcard .tmeta { padding: 13px 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tcard .tmeta .tname { min-width: 0; }
.tcard .tmeta .tname b { font-size: 13.5px; font-weight: 600; display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .tmeta .tname span { font-size: 11.5px; color: var(--ink-dim); font-family: var(--mono-font); }
.tcard .tactions { display: flex; gap: 6px; flex-shrink: 0; }
.tcard .tactions .icon-btn { width: 30px; height: 30px; }
.tcard .tflags { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 15px 14px; margin-top: -4px; }

.fade-up { animation: socFadeUp .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes socFadeUp { from { transform: translateY(9px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fade-up { animation: none; } }

/* ============================================================
   EXTENDED BOOTSTRAP COVERAGE
   ============================================================ */
/* in-content typography */
.canvas h1, .canvas h2, .canvas h3, .canvas h4, .canvas h5 { color: var(--ink); font-weight: 600; letter-spacing: -0.2px; }
.canvas h2 { font-size: 18px; margin: 6px 0 12px; }
.canvas h3 { font-size: 15px; }
.canvas p, .canvas .help-block, .canvas .text-muted, .canvas small { color: var(--ink-dim); }
.canvas label, .canvas .control-label { color: var(--ink-mid); }
code, pre, kbd, .mono, .gophish-editor {
  font-family: var(--mono-font) !important;
}
pre, code { background: var(--bg-sink) !important; color: var(--ink-mid) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-sm); }
kbd { background: var(--panel-2) !important; color: var(--ink) !important; }

/* extra button variants used around the app */
.btn-blue { background: var(--accent) !important; border-color: transparent !important; color: var(--accent-ink) !important; box-shadow: 0 6px 16px -8px var(--accent); }
.btn-blue:hover, .btn-blue:focus { background: var(--accent-strong) !important; color: var(--accent-ink) !important; }
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-top-left-radius: 9px !important; border-bottom-left-radius: 9px !important; }
.btn-group .btn:last-child { border-top-right-radius: 9px !important; border-bottom-right-radius: 9px !important; }
.btn .caret { border-top-color: currentColor; }

/* dropdown menus */
.dropdown-menu {
  background: var(--panel) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important; box-shadow: var(--shadow) !important; padding: 6px;
}
.dropdown-menu > li > a { color: var(--ink-mid) !important; border-radius: 6px; padding: 7px 12px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--hover) !important; color: var(--ink) !important; }
.dropdown-menu .divider { background: var(--border-soft); }

/* tooltips & popovers */
.tooltip-inner { background: var(--panel-2) !important; color: var(--ink) !important; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--ui-font); font-size: 12px; box-shadow: var(--shadow); }
.tooltip.top .tooltip-arrow, .tooltip.bottom .tooltip-arrow, .tooltip.left .tooltip-arrow, .tooltip.right .tooltip-arrow { border-color: transparent; }
.popover { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: var(--shadow) !important; color: var(--ink); }
.popover-title { background: transparent !important; color: var(--ink) !important; border-bottom: 1px solid var(--border-soft) !important; }
.popover-content { color: var(--ink-mid) !important; }

/* labels (status pills in result tables) */
.label { border-radius: 20px; font-weight: 600; font-family: var(--mono-font); font-size: 11px; padding: 3px 9px; }
.label-default { background: var(--panel-2) !important; color: var(--ink-dim) !important; }
.label-primary, .label-info { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
:root[data-theme="light"] .label-primary, :root[data-theme="light"] .label-info { color: var(--accent-strong) !important; }
.label-success { background: color-mix(in oklch, var(--c-reported) 16%, transparent) !important; color: var(--c-reported) !important; }
.label-warning { background: color-mix(in oklch, var(--c-clicked) 16%, transparent) !important; color: var(--c-clicked) !important; }
.label-danger, .label-clicked { background: color-mix(in oklch, var(--c-submitted) 16%, transparent) !important; color: var(--c-submitted) !important; }

/* progress bars */
.progress { background: var(--panel-2) !important; border-radius: 20px !important; box-shadow: none !important; height: 8px; }
.progress-bar { background: var(--accent) !important; }

/* pagination */
.pagination > li > a, .pagination > li > span { background: var(--panel) !important; border-color: var(--border) !important; color: var(--ink-mid) !important; }
.pagination > li > a:hover { background: var(--hover) !important; color: var(--ink) !important; }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--accent) !important; border-color: transparent !important; color: var(--accent-ink) !important; }

/* list groups */
.list-group-item { background: var(--panel) !important; border-color: var(--border-soft) !important; color: var(--ink-mid) !important; }
.list-group-item.active { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; color: var(--accent-ink) !important; }

/* input groups */
.input-group-addon { background: var(--panel-2) !important; border-color: var(--border) !important; color: var(--ink-dim) !important; border-radius: 9px; }

/* well / panel-default headings */
.panel-default > .panel-heading { background: transparent !important; color: var(--ink) !important; }
.panel-title { color: var(--ink) !important; }

/* checkboxes (flat-ui checkbox styles) keep accent */
.checkbox label, .radio label { color: var(--ink-mid) !important; }

/* ============================================================
   CAMPAIGN RESULTS — world map
   ============================================================ */
#resultsMapContainer { margin: 0; }
#resultsMapContainer > .col-md-6 {
  float: none; width: 100%; max-width: 720px; margin: 0 auto; padding: 0;
}
#resultsMapContainer p { color: var(--ink-mid) !important; font-weight: 600; font-family: var(--mono-font); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
#resultsMap { min-height: 340px; width: 100%; position: relative; }
#resultsMap svg { display: block; margin: 0 auto; }
.datamaps-hoverover {
  background: var(--panel-2) !important; color: var(--ink) !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  font-family: var(--ui-font) !important; padding: 6px 10px !important; box-shadow: var(--shadow);
}

/* Highcharts container backgrounds (belt-and-braces with the JS theme) */
.highcharts-background { fill: transparent !important; }
.highcharts-container, .highcharts-root { font-family: var(--mono-font) !important; }

/* ============================================================
   PROTOTYPE DESIGN SYSTEM  (ported 1:1 from new_gophish/styles.css)
   Layout helpers are `soc-` prefixed to avoid clashing with the
   legacy Bootstrap grid (.row / .col-*). Component classes match
   the prototype names so markup can be copied directly.
   ============================================================ */

/* density variants (parity with the prototype tweaks panel) */
:root[data-density="compact"] { --pad: 15px; --row-h: 38px; }
:root[data-density="comfy"]   { --pad: 28px; --row-h: 54px; }

/* ---------- layout helpers ---------- */
.soc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.soc-row { display: flex; align-items: center; gap: 10px; }
.soc-divider, .canvas .soc-divider { height: 1px; background: var(--border-soft); margin: var(--pad) 0; border: 0; }
.dim-card { background: var(--bg-sink); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
@media (max-width: 980px) {
  .soc-split, .soc-grid-2, .soc-grid-3 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  /* Single-column layout: scroll panels no longer have a sibling to derive
     their height from, so give the body a fixed height to scroll within. */
  .panel-scroll .panel-body { min-height: 300px; }
}

/* panel head action area + sub */
.soc-panel-head, .panel-head { display: flex; align-items: center; gap: 12px; padding: 15px var(--pad); border-bottom: 1px solid var(--border-soft); }
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); }
.panel-head .sub { font-size: 11.5px; color: var(--ink-dim); font-family: var(--mono-font); }
.panel-head .head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-body { padding: var(--pad); color: var(--ink-mid); }

/* generic mono / num helpers */
.num { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.canvas .strong, td.strong { color: var(--ink) !important; font-weight: 600; }

/* ---------- buttons (prototype sizing on top of bootstrap reset) ---------- */
.btn-sm, .btn-xs { height: 30px; padding: 0 11px !important; font-size: 12px !important; }
.btn-ghost { background: transparent !important; border-color: transparent !important; color: var(--ink-mid) !important; box-shadow: none !important; }
.btn-ghost:hover, .btn-ghost:focus { background: var(--hover) !important; color: var(--ink) !important; }

/* ---------- avatar (tables, chips, profile) ---------- */
.avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  display: inline-grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px;
  text-transform: uppercase; line-height: 1;
}

/* ---------- KPI extras ---------- */
.kpi .label .ic i { font-size: 13px; }
.kpi .delta.up { color: var(--c-reported); }
.kpi .delta.down { color: var(--c-submitted); }
.kpi .spark { position: absolute; right: 14px; bottom: 14px; opacity: .9; }

/* ---------- pills (extra variants) ---------- */
.pill-admin { color: var(--accent); background: var(--accent-soft); }
.pill-user  { color: var(--ink-dim); background: var(--panel-2); }
.pill-done  { color: var(--ink-dim); background: var(--panel-2); }

/* ---------- mini funnel (table cell) ---------- */
.minifunnel { display: inline-flex; height: 7px; width: 120px; border-radius: 4px; overflow: hidden; background: var(--panel-2); vertical-align: middle; }
.minifunnel span { height: 100%; }

/* ---------- big funnel ---------- */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 92px; align-items: center; gap: 14px; }
.funnel-row .fl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-mid); }
.funnel-row .fl .sw { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.funnel-track { height: 30px; background: var(--panel-2); border-radius: 7px; overflow: hidden; position: relative; }
.funnel-fill { height: 100%; border-radius: 7px; display: flex; align-items: center; padding-left: 11px; font-family: var(--mono-font); font-size: 12px; font-weight: 600; color: #07121f; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.funnel-row .fv { text-align: right; font-family: var(--mono-font); font-size: 13px; color: var(--ink); }
.funnel-row .fv span { color: var(--ink-faint); font-size: 11px; }

/* ---------- legend ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 16px; }
.legend .li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-mid); }
.legend .li .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ---------- event / activity feed ---------- */
.feed { display: flex; flex-direction: column; }
.feed .ev { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.feed .ev:last-child { border-bottom: none; }
.feed .ev .ts { font-family: var(--mono-font); font-size: 11px; color: var(--ink-faint); width: 64px; flex-shrink: 0; padding-top: 1px; }
.feed .ev .body { font-size: 12.5px; color: var(--ink-mid); line-height: 1.5; }
.feed .ev .body b { color: var(--ink); font-weight: 600; }
.evdot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }

/* ---------- donut ---------- */
.donut-wrap { display: flex; align-items: center; gap: 22px; }
.donut-center { text-align: center; }

/* ---------- geographic distribution ---------- */
.geo-map {
  position: relative; height: 230px; border-radius: var(--radius-sm); overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, var(--accent-soft), transparent 8%),
    radial-gradient(circle at 52% 34%, var(--accent-soft), transparent 6%),
    radial-gradient(circle at 48% 58%, color-mix(in oklch, var(--c-submitted) 30%, transparent), transparent 7%),
    radial-gradient(circle at 78% 46%, var(--accent-soft), transparent 6%),
    var(--bg-sink);
  border: 1px solid var(--border-soft);
}
.geo-map .grid { position: absolute; inset: 0; background-image: radial-gradient(var(--grid-line) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent); opacity: .6; }
/* Campaign-results geographic map (real Datamap fills the panel width) */
#resultsMapContainer { width: 100%; }
#resultsMap { position: relative; width: 100%; min-height: 300px; }
#resultsMap svg { display: block; width: 100%; }
.geo-list { display: flex; flex-direction: column; gap: 11px; }
.geo-list .gi { display: flex; align-items: center; gap: 11px; }
.geo-list .gi .gn { width: 96px; font-size: 12.5px; color: var(--ink-mid); }
.geo-list .gi .gbar { flex: 1; height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.geo-list .gi .gbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.geo-list .gi .gv { font-family: var(--mono-font); font-size: 12px; font-weight: 600; width: 38px; text-align: right; color: var(--ink); }

/* ---------- inputs / fields ---------- */
/* position:relative so absolutely-positioned dropdowns (e.g. the
   bootstrap-datetimepicker calendar) anchor to the field instead of a
   distant ancestor */
.field { display: flex; flex-direction: column; gap: 7px; position: relative; }
.field .bootstrap-datetimepicker-widget.dropdown-menu { top: 100% !important; bottom: auto !important; left: 0 !important; right: auto !important; margin-top: 4px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-mid) !important; margin: 0; }
.input {
  height: 42px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel); color: var(--ink); padding: 0 13px; font-size: 14px;
  font-family: var(--ui-font); outline: none; transition: .14s; width: 100%;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--ink-faint); }

/* ---------- toggle switch ---------- */
.switch { width: 40px; height: 23px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--border); position: relative; cursor: pointer; transition: .16s; flex-shrink: 0; display: inline-block; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-dim); transition: .18s cubic-bezier(.2,.7,.2,1); }
.switch.on { background: var(--accent); border-color: transparent; }
.switch.on::after { left: 19px; background: #fff; }

/* ---------- settings rows ---------- */
.setrow { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border-soft); }
.setrow:last-child { border-bottom: none; }
.setrow .info { flex: 1; min-width: 0; }
.setrow .info b { font-size: 13.5px; font-weight: 600; display: block; color: var(--ink); }
.setrow .info span { font-size: 12px; color: var(--ink-dim); }
.setrow .ctl { flex-shrink: 0; }

/* ---------- key / mono field with copy ---------- */
.keyline { display: flex; align-items: center; gap: 8px; background: var(--bg-sink); border: 1px solid var(--border); border-radius: 9px; padding: 0 6px 0 13px; height: 42px; }
.keyline code { font-family: var(--mono-font); font-size: 13px; color: var(--ink-mid) !important; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none !important; border: none !important; padding: 0 !important; }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 3px; gap: 3px; }
.seg button { border: none; background: none; color: var(--ink-dim); font-family: var(--ui-font); font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- choice cards (pickers) ---------- */
.choice { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--border-soft); border-radius: 10px; cursor: pointer; transition: .14s; }
.choice:hover { border-color: var(--border); background: var(--hover); }
.choice.sel { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- divider / kbd (standalone) ---------- */
.canvas .divider { height: 1px; background: var(--border-soft); margin: var(--pad) 0; }
.kbd { font-family: var(--mono-font); font-size: 11px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--ink-dim); }

/* ---------- standalone preview chrome (used outside .tcard too) ---------- */
.previewbar { height: 30px; background: var(--panel-2); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 6px; padding: 0 11px; }
.previewbar .d { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.previewbar .u { margin-left: 8px; font-family: var(--mono-font); font-size: 10.5px; color: var(--ink-faint); }

/* round-icon badge used on profile / webhook cards */
.icon-badge { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.icon-badge i { font-size: 18px; }
.icon-badge.lg { width: 44px; height: 44px; border-radius: 11px; }
.icon-badge.lg i { font-size: 21px; }

/* ============================================================
   AUTH — split "console" sign-in stage (login / reset password)
   ============================================================ */
body.auth { height: 100vh; overflow: hidden; }
body.auth > .navbar { display: none !important; }
body.auth > .container { width: 100%; max-width: none; margin: 0; padding: 0; }
.login-stage {
  height: 100vh; width: 100vw; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg-sink); overflow: hidden;
}
.login-aside {
  background: var(--bg); border-right: 1px solid var(--border-soft);
  position: relative; overflow: hidden; padding: 54px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.login-aside .glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 65%); top: -120px; right: -150px; filter: blur(10px); }
.login-aside .gridbg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); opacity: .5; }
/* Yazamco logo on the auth aside */
.login-aside .brand-logo { position: relative; display: block; width: 300px; max-width: 72%; }
.login-aside .brand-logo img { display: block; width: 100%; height: auto; }
.login-aside .brand-logo .for-light { display: none; }
:root[data-theme="light"] .login-aside .brand-logo .for-dark { display: none; }
:root[data-theme="light"] .login-aside .brand-logo .for-light { display: block; }
/* "Built on Gophish" credit */
:root, :root[data-theme="dark"] { --gophish-tint: invert(0.64); }
:root[data-theme="light"] { --gophish-tint: none; }
.brand-credit { display: flex; align-items: center; gap: 8px; position: relative; color: var(--ink-faint); font-family: var(--mono-font); font-size: 11px; letter-spacing: 0.4px; }
.brand-credit img { width: 15px; height: 15px; opacity: 0.85; filter: var(--gophish-tint); flex-shrink: 0; }
.brand-credit b { color: var(--ink-dim); font-weight: 600; }
.login-aside .brand { display: flex; align-items: center; gap: 11px; position: relative; }
.login-aside .brand-mark { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent-strong)); box-shadow: 0 0 0 1px var(--accent-line), 0 6px 16px -6px var(--accent); }
.login-aside .brand-mark i { font-size: 18px; }
.login-aside .brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.login-aside .brand-name b { font-weight: 600; font-size: 18px; letter-spacing: -0.2px; color: var(--ink); }
.login-aside .brand-name small { font-family: var(--mono-font); font-size: 9.5px; letter-spacing: 1.5px; font-weight: 500; color: var(--ink-dim); text-transform: uppercase; margin-top: 3px; }
.login-aside .lead { position: relative; max-width: 420px; }
.login-aside .lead .eyebrow { font-family: var(--mono-font); font-size: 11px; color: var(--accent); letter-spacing: 1.5px; margin-bottom: 14px; }
.login-aside .lead h1 { font-size: 34px; font-weight: 600; letter-spacing: -1px; line-height: 1.15; margin: 0; color: var(--ink); }
.login-aside .lead p { color: var(--ink-mid); font-size: 14.5px; line-height: 1.6; margin-top: 18px; }
.login-aside .stats { display: flex; gap: 24px; margin-top: 30px; }
.login-aside .stats .num { font-size: 24px; font-weight: 600; color: var(--ink); }
.login-aside .stats .lbl { font-family: var(--mono-font); font-size: 10.5px; color: var(--ink-dim); letter-spacing: 0.5px; text-transform: uppercase; }
.login-aside .foot { font-family: var(--mono-font); font-size: 11px; color: var(--ink-faint); position: relative; }
.login-form-wrap { display: grid; place-items: center; padding: 40px; overflow-y: auto; }
.login-card { width: 100%; max-width: 360px; }
.login-card h2 { font-size: 23px; font-weight: 600; letter-spacing: -0.4px; margin: 0 0 6px; color: var(--ink); }
.login-card .subtitle { color: var(--ink-dim); font-size: 13.5px; margin: 0 0 26px; }
.login-card .form-signin { width: auto; max-width: none; margin: 0; padding: 0; }
.login-card .form-control { height: 42px; border-radius: 9px !important; margin-bottom: 14px; }
.login-card .btn-block { height: 44px; margin-top: 4px; border-radius: 9px !important; }
.login-card #logo, .login-card .navbar-logo { display: none; }

/* hero hexagon logo on the brand aside — the redesigned Gophish mark */
.login-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.login-hexagon { position: relative; width: 196px; height: 196px; margin-bottom: 30px; }
.login-hexagon img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 22px 46px color-mix(in oklch, var(--brand-violet) 38%, transparent)); }
.login-hexagon::before { content: ""; position: absolute; inset: -16%; z-index: 0;
  background: radial-gradient(circle, color-mix(in oklch, var(--brand-violet) 30%, transparent), transparent 62%);
  filter: blur(26px); }
.login-hero .eyebrow { font-family: var(--mono-font); font-size: 11px; color: var(--accent); letter-spacing: 1.5px; margin-bottom: 12px; }
.login-hero-title { font-size: 30px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.08;
  margin: 12px 0 12px; max-width: 360px; color: var(--ink); }
.login-hero p { color: var(--ink-mid); font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 360px; }

/* SSO primary action — brand gradient so it leads the form */
.btn-sso { width: 100%; height: 50px; border-radius: 12px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ui-font); font-size: 14.5px; font-weight: 600; color: #fff !important;
  text-decoration: none !important;
  background: var(--brand-mark-grad);
  box-shadow: 0 12px 28px -12px var(--brand-violet); transition: transform .16s, box-shadow .16s; }
.btn-sso:hover, .btn-sso:focus { transform: translateY(-1px); box-shadow: 0 16px 34px -12px var(--brand-violet); color: #fff; }
.btn-sso svg { width: 19px; height: 19px; }

/* "or" separator between SSO and credentials */
.or-sep { display: flex; align-items: center; gap: 12px; margin: 20px 0;
  font-family: var(--mono-font); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-faint); }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }

/* note shown when local credential login is disabled via ENV */
.sso-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px;
  padding: 13px 14px; border-radius: 10px; background: var(--bg-sink); border: 1px solid var(--border-soft);
  color: var(--ink-dim); font-size: 12.5px; line-height: 1.55; }
.sso-note svg { flex-shrink: 0; color: var(--ink-faint); margin-top: 1px; }
.sso-note b { color: var(--ink-mid); font-weight: 600; }

@media (max-width: 860px) {
  .login-stage { grid-template-columns: 1fr; }
  .login-aside { display: none; }
}

/* ============================================================
   LIST PAGES — table wrapped in a panel
   ============================================================ */
.canvas-inner { max-width: 1320px; margin: 0 auto; }
.table-panel { padding: 6px 12px 12px; overflow-x: auto; }
.table-panel > .table { margin-bottom: 0; }
.table-panel .dataTables_wrapper { padding-top: 8px; }
.table-panel .dataTables_wrapper .row { margin: 0; }
.table-panel .dataTables_wrapper .dataTables_filter,
.table-panel .dataTables_wrapper .dataTables_length { padding: 4px 6px; }
.table-panel .nav-tabs { padding: 8px 6px 0; margin-bottom: 4px; }
/* tabs sitting at the top of a panel */
.panel > .nav-tabs { padding: 10px 14px 0; }
/* KPI row spacing above a panel */
.canvas-inner > .kpi-grid + .panel,
.canvas-inner > .kpi-grid + .soc-between,
.canvas-inner > .soc-between + .panel { margin-top: 16px; }
.kpi-grid + .kpi-grid, .panel + .panel { margin-top: 14px; }

/* ============================================================
   RICH CREATION / EDIT MODALS  (cx-modal)
   Ported from new_gophish/creators.jsx and adapted to wrap the
   existing Bootstrap modal: add class "cx" (+ optional sm/md) to a
   `.modal`, and structure its .modal-content as
   .cx-head / .cx-body (.cx-main [+ .cx-aside]) / .cx-foot.
   Bootstrap keeps owning show/hide/backdrop/stacking + select2.
   ============================================================ */
@keyframes cxModalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cxStepIn  { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes cxSpin    { to { transform: rotate(360deg); } }
.spin { animation: cxSpin 0.9s linear infinite; }

/* ---- shell: size the dialog, turn .modal-content into the cx card ---- */
/* widths are a share of the viewport (capped so they don't stretch absurdly
   on ultrawide screens). .md is the 70%-of-page baseline; others scale with it. */
.modal.cx .modal-dialog { width: 80%; max-width: 1500px; margin: 24px auto; }
.modal.cx.md .modal-dialog { width: 70%; max-width: 1150px; }
.modal.cx.sm .modal-dialog { width: 50%; max-width: 720px; min-width: 420px; }
/* editor-heavy modals (Email Templates / Landing Pages) — kept at a fixed,
   narrower width instead of the wide % default */
.modal.cx.cx-narrow .modal-dialog { width: 800px; max-width: 96vw; min-width: 0; }
.modal.cx .modal-content {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 36px 90px -28px oklch(0 0 0 / 0.72) !important;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
  animation: cxModalIn .28s cubic-bezier(.2,.7,.2,1) both;
}
:root[data-theme="light"] .modal.cx .modal-content { box-shadow: 0 30px 70px -28px oklch(0.4 0.05 256 / 0.4) !important; }

/* ---- header ---- */
.cx-head {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 22px; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
  position: relative;
}
.cx-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--accent-line), transparent 55%);
}
.cx-head .hi {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--accent);
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line);
}
.cx-head .hi i { font-size: 20px; line-height: 1; }
.cx-head h3, .cx-head .modal-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); }
.cx-head p, .cx-head .cx-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-dim); }
.cx-head .cx-x { margin-left: auto; flex-shrink: 0; opacity: 1; text-shadow: none; float: none; }

/* ---- body / panes ---- */
.cx-body { display: flex; min-height: 0; flex: 1; }
.cx-main { flex: 1; min-width: 0; padding: 22px; overflow-y: auto; }
.cx-aside {
  width: 396px; flex-shrink: 0; background: var(--bg-sink);
  border-left: 1px solid var(--border-soft); padding: 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 15px;
}
.cx-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.cx-foot .grow { flex: 1; }
.cx-label { font-family: var(--mono-font); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-faint); }
.modal.cx .divider { height: 1px; background: var(--border-soft); margin: 6px 0; border: 0; }

@media (max-width: 860px) {
  .modal.cx .modal-dialog,
  .modal.cx.md .modal-dialog,
  .modal.cx.sm .modal-dialog { width: 96vw; max-width: 96vw; min-width: 0; }
  .cx-body { flex-direction: column; }
  .cx-aside { width: auto; border-left: none; border-top: 1px solid var(--border-soft); }
}

/* ---- horizontal numbered stepper ---- */
.stepper { display: flex; align-items: center; margin-bottom: 22px; }
.stepper .st { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.stepper .st .b {
  width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--border);
  display: grid; place-items: center; font: 600 12px var(--mono-font); color: var(--ink-dim);
  transition: .22s; flex-shrink: 0; background: var(--panel);
}
.stepper .st .b i { font-size: 12px; }
.stepper .st.active .b { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.stepper .st.done .b { background: var(--accent); border-color: transparent; color: #fff; }
.stepper .st .lbl { font-size: 12px; font-weight: 600; color: var(--ink-faint); white-space: nowrap; transition: .2s; }
.stepper .st.active .lbl { color: var(--ink); }
.stepper .st.done .lbl { color: var(--ink-mid); }
.stepper .ln { flex: 1; height: 2px; background: var(--border); margin: 0 9px; border-radius: 2px; position: relative; overflow: hidden; min-width: 12px; }
.stepper .ln i { position: absolute; inset: 0; width: 0; background: var(--accent); transition: width .4s cubic-bezier(.2,.7,.2,1); }
.stepper .ln.filled i { width: 100%; }
@media (max-width: 880px) { .stepper .st .lbl { display: none; } }

.step-head { margin-bottom: 16px; }
.step-head h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); }
.step-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-dim); }
.step-pane { animation: cxStepIn .3s cubic-bezier(.2,.7,.2,1) both; }
.step-pane[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .step-pane, .modal.cx .modal-content { animation: none; } }

/* ---- choice cards (pickers) ---- */
.choice .ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.choice.sel .ck { background: var(--accent); border-color: transparent; }
.choice .ck i { font-size: 10px; opacity: 0; }
.choice.sel .ck i { opacity: 1; }
.choice b { color: var(--ink); }

/* ---- checkbox option row (square) ---- */
.checkrow { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border-soft); border-radius: 10px; cursor: pointer; transition: .14s; }
.checkrow:hover { border-color: var(--border); background: var(--hover); }
.checkrow.on { border-color: var(--accent); background: var(--accent-soft); }
.checkrow .bx { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); display: grid; place-items: center; flex-shrink: 0; transition: .14s; color: #fff; }
.checkrow.on .bx { background: var(--accent); border-color: transparent; }
.checkrow .bx i { font-size: 10px; opacity: 0; }
.checkrow.on .bx i { opacity: 1; }
.checkrow b { color: var(--ink); }
/* native-checkbox variant: wrap a real <input type=checkbox> so existing JS
   that reads/writes .prop("checked") keeps working; state reflected via :has */
.checkrow input[type="checkbox"], .checkrow input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.checkrow:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.checkrow:has(input:checked) .bx { background: var(--accent); border-color: transparent; }
.checkrow:has(input:checked) .bx i { opacity: 1; }

/* ---- chips / tag input ---- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 7px; padding: 4px 8px; font-size: 11.5px; font-family: var(--mono-font); color: var(--ink-mid); }
.chip .rm { cursor: pointer; color: var(--ink-faint); display: grid; place-items: center; }
.chip .rm:hover { color: var(--c-submitted); }
.chip.insert { cursor: pointer; color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); transition: .14s; }
.chip.insert:hover { background: var(--accent-line); }

/* ---- member builder list ---- */
.minilist { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; background: var(--panel); }
.minilist .mi { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.minilist .mi:last-child { border-bottom: none; }
.minilist .mi .gn { flex: 1; min-width: 0; }
.minilist .mi .gn b { font-weight: 600; display: block; color: var(--ink); }
.minilist .mi .gn span { font-family: var(--mono-font); font-size: 10.5px; color: var(--ink-faint); }
.minilist-empty { padding: 26px; text-align: center; font-size: 12px; color: var(--ink-faint); }

/* ---- live email preview ---- */
.mailprev { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.mailprev .mh { padding: 13px 15px; border-bottom: 1px solid var(--border-soft); }
.mailprev .mh .subj { font-size: 14px; font-weight: 600; letter-spacing: -0.2px; margin-bottom: 9px; word-break: break-word; color: var(--ink); }
.mailprev .mh .fromline { display: flex; align-items: center; gap: 10px; }
.mailprev .mh .fromline .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, var(--accent), var(--accent-strong)); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.mailprev .mh .fromline .who b { font-size: 12.5px; display: block; color: var(--ink); }
.mailprev .mh .fromline .who span { font-family: var(--mono-font); font-size: 10.5px; color: var(--ink-faint); }
.mailprev .mb { padding: 16px 15px; font-size: 12.5px; line-height: 1.7; color: var(--ink-mid); max-height: 320px; overflow: auto; }
.mailprev .mb .cta { display: inline-block; margin-top: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 12px; padding: 8px 16px; border-radius: 7px; }
.mailprev .mb .hl { color: var(--accent); font-weight: 600; }

/* ---- live browser preview ---- */
.webprev { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.webprev .wb { height: 200px; position: relative; background: repeating-linear-gradient(135deg, var(--panel-2) 0 11px, transparent 11px 22px), var(--bg-sink); }
.webprev .wb .form-ph { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; align-items: center; justify-content: center; padding: 24px; }
.webprev .wb .form-ph .lg { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 4px; }
.webprev .wb .form-ph .ln { height: 30px; width: 80%; max-width: 220px; border-radius: 7px; background: var(--panel); border: 1px solid var(--border-soft); }
.webprev .wb .form-ph .btn-ph { height: 30px; width: 80%; max-width: 220px; border-radius: 7px; background: var(--accent); }

/* ---- test-connection / ping status ---- */
.teststat { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--panel); color: var(--ink-mid); }
.teststat.ok { color: var(--c-reported); border-color: color-mix(in oklch, var(--c-reported) 40%, transparent); background: color-mix(in oklch, var(--c-reported) 8%, transparent); }
.teststat.run { color: var(--accent); }
.teststat.err { color: var(--c-submitted); border-color: color-mix(in oklch, var(--c-submitted) 40%, transparent); background: color-mix(in oklch, var(--c-submitted) 8%, transparent); }

/* ---- code / json sample ---- */
.codebox { background: var(--bg-sink); border: 1px solid var(--border-soft) !important; border-radius: 10px; padding: 12px 14px; font-family: var(--mono-font); font-size: 11px; line-height: 1.65; color: var(--ink-mid) !important; overflow-x: auto; white-space: pre; }
.codebox .k { color: var(--accent); }
.codebox .s { color: var(--c-reported); }

/* ---- summary card (review / preview aside) ---- */
.sumcard { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; background: var(--panel); }
.sumcard .sr { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--border-soft); }
.sumcard .sr:last-child { border-bottom: none; }
.sumcard .sr .si { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.sumcard .sr .si i { font-size: 14px; }
.sumcard .sr .sl { font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-faint); }
.sumcard .sr .sv { font-size: 13px; font-weight: 600; margin-top: 1px; color: var(--ink); }
.sumcard .sr .sval { margin-left: auto; text-align: right; }

/* ---- projected funnel mini (live preview) ---- */
.projfunnel { display: flex; flex-direction: column; gap: 7px; }
.projfunnel .pf { display: grid; grid-template-columns: 72px 1fr 44px; align-items: center; gap: 9px; }
.projfunnel .pf .pl { font-size: 11px; color: var(--ink-dim); }
.projfunnel .pf .pt { height: 18px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.projfunnel .pf .pt i { display: block; height: 100%; border-radius: 5px; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.projfunnel .pf .pv { font-family: var(--mono-font); font-size: 11.5px; font-weight: 600; text-align: right; color: var(--ink); }

/* ---- generated value field (copy/regen) ---- */
.genline { display: flex; align-items: center; gap: 8px; background: var(--bg-sink); border: 1px solid var(--border); border-radius: 9px; padding: 0 6px 0 13px; height: 42px; }
.genline code { font-family: var(--mono-font); font-size: 12.5px; color: var(--ink-mid) !important; background: none !important; border: none !important; padding: 0 !important; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- segmented full-width + labelled divider ---- */
.seg.wide { display: flex; width: 100%; }
.seg.wide button { flex: 1; justify-content: center; }
.orline { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); font-size: 11px; font-family: var(--mono-font); }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }

/* in-modal field hint + select alignment */
.cx-main .field .hint, .cx-aside .field .hint { font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono-font); }

/* ============================================================
   FORM CONTROL NORMALIZATION  (app-wide consistency)
   One control height everywhere; consistent label spacing; no
   colliding corners in input-groups; select2 matched to inputs.
   Fixes mixed Bootstrap-34px vs design-42px heights and labels
   sitting on top of their fields.
   ============================================================ */
:root { --field-h: 42px; }

/* --- single-line controls: one height, vertically centered --- */
input.form-control:not([type="checkbox"]):not([type="radio"]),
select.form-control,
.input:not(textarea),
.modal .form-control:not(textarea),
.canvas .form-control:not(textarea) {
  height: var(--field-h) !important;
  padding: 6px 13px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  vertical-align: middle;
}
select.form-control { padding-right: 30px !important; }

/* --- multi-line controls grow with content, never forced to 42 --- */
textarea.form-control, textarea.input, .modal textarea.form-control {
  height: auto !important;
  min-height: 96px !important;
  padding: 10px 13px !important;
  line-height: 1.6 !important;
}

/* --- labels: never glued to / overlapping their field --- */
.canvas .control-label,
.canvas .form-group > label,
.modal .control-label,
.modal .form-group > label {
  display: inline-block;
  margin: 0 0 6px !important;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
/* uniform vertical rhythm between stacked groups */
.canvas .form-group, .modal .form-group { margin-bottom: 15px; }
.modal .form-group:last-child { margin-bottom: 0; }
/* .field already controls its own label spacing via flex gap */
.field > label, .field label { margin: 0 !important; }

/* --- checkbox / radio rows: consistent spacing, no overlap --- */
.canvas .checkbox, .canvas .radio,
.modal .checkbox, .modal .radio { margin: 10px 0 !important; padding-left: 0; min-height: 0; }
.checkbox label, .radio label { font-weight: 500; }

/* --- input-group: square the touching corners, align heights --- */
.input-group { display: table; width: 100%; }
.input-group .form-control:not(:first-child),
.input-group .select2-container:not(:first-child) .select2-selection { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group .form-control:not(:last-child),
.input-group .select2-container:not(:last-child) .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-btn > .btn,
.input-group-addon {
  height: var(--field-h) !important;
  display: inline-flex !important;
  align-items: center;
  border-radius: 0 !important;
}
.input-group-btn:last-child > .btn { border-top-right-radius: 9px !important; border-bottom-right-radius: 9px !important; }
.input-group-btn:first-child > .btn { border-top-left-radius: 9px !important; border-bottom-left-radius: 9px !important; }

/* --- select2 single: exact input height, centered text --- */
.select2-container { width: 100% !important; max-width: 100%; }
.select2-container--default .select2-selection--single {
  height: var(--field-h) !important;
  padding: 0 !important;
  display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--field-h) - 2px) !important;
  padding-left: 13px !important; padding-right: 26px !important;
  font-size: 13.5px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--field-h) - 2px) !important; right: 6px;
}
/* select2 multi (groups): grows, but starts at the standard height */
.select2-container--default .select2-selection--multiple {
  min-height: var(--field-h) !important;
  padding: 3px 6px !important;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: 0 !important; line-height: 1.6; padding: 1px 8px;
}
.select2-container--default .select2-search--inline .select2-search__field { margin: 0 !important; height: 28px; }
/* select2 inside an input-group must not break to its own line */
.input-group .select2-container { display: table-cell; vertical-align: middle; float: none; }

/* the gophish editor textarea + CKEditor box keep theme width */
.modal .gophish-editor { width: 100% !important; }

/* ============================================================
   Domains page — list / detail two-pane layout + DNS records
   ============================================================ */
.dom-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
@media (max-width: 980px) { .dom-layout { grid-template-columns: 1fr; } }

.dom-list { padding: 10px; }
.dom-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: .14s;
}
.dom-item:hover { background: var(--hover); }
.dom-item.sel { background: var(--accent-soft); border-color: var(--accent-line); }
.dom-item .di-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--panel-2); color: var(--ink-dim);
}
.dom-item.sel .di-ic { background: var(--accent); color: #fff; }
.dom-item .di-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dom-item .di-n b { color: var(--ink); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-item .di-n span { color: var(--ink-dim); font-size: 11px; font-family: var(--mono-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-item .di-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.dom-head { display: flex; align-items: center; gap: 13px; padding: 15px var(--pad); border-bottom: 1px solid var(--border-soft); }
.dom-head .dh-ic { width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.dom-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dom-head .dh-sub { font-size: 11.5px; color: var(--ink-dim); font-family: var(--mono-font); margin-top: 2px; }

.dom-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-soft); border-bottom: 1px solid var(--border-soft); }
@media (max-width: 700px) { .dom-meta { grid-template-columns: repeat(2, 1fr); } }
.dom-meta > div { background: var(--panel); padding: 13px var(--pad); }
.dom-meta .ml { font-family: var(--mono-font); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-faint); }
.dom-meta .mv { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 3px; display: flex; align-items: center; gap: 6px; }

.intg { padding: var(--pad); display: flex; flex-direction: column; gap: 12px; }
.intg-card { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--panel); }
.intg-card.on { border-color: color-mix(in oklch, var(--c-reported) 40%, transparent); background: color-mix(in oklch, var(--c-reported) 8%, transparent); }
.intg-card .it-tile { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.intg-card.on .it-tile { color: #fff; }
.intg-card .it-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.intg-card .it-body b { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.intg-card .it-body span { color: var(--ink-dim); font-size: 11.5px; }

.prov-list { display: flex; flex-direction: column; gap: 6px; }
.prov-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 9px; }
.prov-row .pi { width: 18px; height: 18px; display: grid; place-items: center; flex-shrink: 0; color: var(--c-reported); }
.prov-row .pr-l { display: flex; flex-direction: column; min-width: 0; }
.prov-row .pr-l b { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.prov-row .pr-l span { font-size: 11px; color: var(--ink-dim); font-family: var(--mono-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rec-type { display: inline-flex; align-items: center; font-family: var(--mono-font); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: 0.4px; }

/* ---- Hudu company picker (Companies modal) ---- */
.hudu-results { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; max-height: 240px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgb(0 0 0 / 0.35); }
.hudu-results .hudu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft, var(--border)); }
.hudu-results .hudu-item:last-child { border-bottom: none; }
.hudu-results .hudu-item:hover, .hudu-results .hudu-item.active { background: var(--hover); }
.hudu-results .hudu-item .hn { color: var(--ink); font-size: 13px; font-weight: 600; flex-shrink: 0; }
.hudu-results .hudu-item .hh { color: var(--ink-mid); font-size: 12.5px; direction: rtl; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: left; }
.hudu-results .hudu-item .hc { color: var(--ink-dim); font-size: 11px; font-family: var(--mono-font); flex-shrink: 0; }
.hudu-results .hudu-empty { padding: 10px 12px; color: var(--ink-dim); font-size: 12.5px; }