/* portal.theme.css
   Modern Bootstrap-friendly theme for the Xponex Portal.
   This file intentionally re-skins the existing class system (page/card/table/modal/etc)
   so we can improve visuals without rewriting application logic.
*/

:root{
  /* Base font - plain Arial */
  --xp-font: Arial, Helvetica, sans-serif;

  /* Core palette */
  --xp-bg: #f4f6fb;
  --xp-surface: #ffffff;
  --xp-surface-2: #fbfcff;
  --xp-text: #0f172a;
  --xp-muted: #64748b;
  --xp-border: #e2e8f0;

  /* Brand + semantic colors */
  --xp-brand: #b91c1c;          /* deep red */
  --xp-brand-2: #7f1d1d;
  --xp-brand-soft: rgba(185, 28, 28, 0.12);

  --xp-blue: #2563eb;
  --xp-green: #16a34a;
  --xp-orange: #d97706;
  --xp-purple: #7c3aed;
  --xp-slate: #334155;
  --xp-danger: #dc2626;

  /* Radii + shadows */
  --xp-radius: 16px;
  --xp-radius-sm: 12px;
  --xp-shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
  --xp-shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.10);
  --xp-ring: 0 0 0 0.25rem rgba(37, 99, 235, 0.22);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; font-family: var(--xp-font); }

body.app-body,
body.app-body .navbar,
body.app-body .nav-link,
body.app-body .btn,
body.app-body .form-control,
body.app-body .form-label,
body.app-body .card,
body.app-body .modal,
body.app-body h1, body.app-body h2, body.app-body h3, body.app-body h4, body.app-body h5, body.app-body h6,
body.app-body .page-header__title,
body.app-body .page-header__subtitle,
body.app-body .card-link__title,
body.app-body .card-link__subtitle {
  font-family: var(--xp-font);
}

body.app-body{
  color: var(--xp-text);
  background:
    radial-gradient(900px 420px at 14% 0%, rgba(37,99,235,0.10), rgba(37,99,235,0) 60%),
    radial-gradient(860px 380px at 95% 6%, rgba(185,28,28,0.10), rgba(185,28,28,0) 58%),
    var(--xp-bg);
}

/* Keep link behavior sane (Bootstrap relies on colored links). */
a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ------- Navbar (shared header) ------- */
.app-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(135deg, var(--xp-brand-2), var(--xp-brand));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.app-nav .navbar-brand{
  font-weight: 900;
  letter-spacing: 0.5px;
}

.app-nav .nav-link,
.app-nav .navbar-text{
  color: rgba(255,255,255,0.90) !important;
}

.app-nav .nav-link:hover{
  color: #fff !important;
}

.app-nav .navbar-toggler{
  border-color: rgba(255,255,255,0.22);
}
.app-nav .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,0.18);
}
.app-nav .navbar-toggler-icon{
  filter: invert(1);
}

.app-userpill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 9999px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.app-userpill .app-userpill__muted{
  opacity: 0.82;
  font-weight: 600;
}

.app-nav .dropdown-menu{
  border-radius: 14px;
  border-color: var(--xp-border);
  box-shadow: var(--xp-shadow-sm);
}

/* Navbar search: button inside input */
.navbar-search-wrap{
  position: relative;
  width: 220px;
  max-width: 100%;
}
.navbar-search-wrap .navbar-search-input{
  padding-right: 4.5rem;
  height: 34px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
}
.navbar-search-wrap .navbar-search-input::placeholder{
  color: rgba(255,255,255,0.6);
}
.navbar-search-wrap .navbar-search-input:focus{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}
.navbar-search-wrap .navbar-search-btn{
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.2rem 0.5rem;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  border-radius: 6px;
}
.navbar-search-wrap .navbar-search-btn:hover{
  background: rgba(255,255,255,0.3);
  color: #fff;
}

/* ------- Page shell ------- */
.page{
  margin: 0 auto;
  padding: 28px 16px 96px;
}
.page--xl{ max-width: 1320px; }
.page--lg{ max-width: 1100px; }
.page--md{ max-width: 980px; }

.page-header{ margin-bottom: 18px; }
.page-header__row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.page-header__title{
  margin: 0 0 6px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.10;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.page-header__subtitle{
  margin: 0;
  color: var(--xp-muted);
  font-size: 14px;
}
.page-header__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ------- Icons ------- */
.icon{ width: 20px; height: 20px; display: inline-block; flex: 0 0 auto; }
.icon--xs{ width: 14px; height: 14px; }
.icon--sm{ width: 16px; height: 16px; }
.icon--md{ width: 20px; height: 20px; }
.icon--lg{ width: 28px; height: 28px; }
.icon--xl{ width: 34px; height: 34px; }
.icon--muted{ opacity: 0.7; }

/* ------- Buttons (existing .x-btn API) ------- */
.x-btn{
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.x-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,0.14); }
.x-btn:active{ transform: translateY(0); box-shadow: 0 6px 14px rgba(15,23,42,0.12); }
.x-btn:focus-visible{ outline: none; box-shadow: var(--xp-ring), 0 10px 22px rgba(15,23,42,0.14); }
.x-btn:disabled{ opacity: 0.60; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--sm{ padding: 8px 11px; border-radius: 11px; font-size: 13px; }
.btn--pill{ border-radius: 9999px; }

.btn--primary{ background: var(--xp-blue); color: #fff; }
.btn--primary:hover{ background: #1d4ed8; }

.btn--danger{ background: var(--xp-danger); color: #fff; }
.btn--danger:hover{ background: #b91c1c; }

.btn--success{ background: var(--xp-green); color: #fff; }
.btn--success:hover{ background: #15803d; }

.btn--purple{ background: var(--xp-purple); color: #fff; }
.btn--purple:hover{ background: #6d28d9; }

.btn--info{ background: #0ea5e9; color: #fff; }
.btn--info:hover{ background: #0284c7; }

.btn--warning{ background: #f59e0b; color: #fff; }
.btn--warning:hover{ background: #d97706; }

.btn--orange{ background: var(--xp-orange); color: #fff; }
.btn--orange:hover{ background: #b45309; }

.btn--ghost{
  background: rgba(255,255,255,0.85);
  color: var(--xp-text);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 8px 18px rgba(15,23,42,0.10);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover{ background: #fff; border-color: rgba(15,23,42,0.14); }

.btn--muted{
  background: rgba(255,255,255,0.85);
  color: var(--xp-brand);
  border-color: rgba(185, 28, 28, 0.25);
}
.btn--muted:hover{ background: rgba(185, 28, 28, 0.06); border-color: rgba(185, 28, 28, 0.35); }

/* ------- Inputs / forms ------- */
.field{ margin-bottom: 14px; }
.label{
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.72);
}

.input,
.select,
.textarea{
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.55);
  border-radius: 12px;
  background: rgba(255,255,255,0.90);
  color: var(--xp-text);
  padding: 10px 12px;
  min-height: 44px;
  box-shadow: 0 1px 0 rgba(15,23,42,0.02);
  transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.textarea{ min-height: 110px; resize: vertical; }
.input:focus,
.select:focus,
.textarea:focus{
  outline: none;
  border-color: rgba(37, 99, 235, 0.85);
  box-shadow: var(--xp-ring);
  background: #fff;
}

.checkbox{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.checkbox input{ width: 16px; height: 16px; }
.checkbox__text{ font-size: 13px; color: rgba(15, 23, 42, 0.74); font-weight: 600; }

.form-row{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px){
  .form-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid__span-2{ grid-column: 1 / -1; }
}

.divider{ height: 1px; background: rgba(148,163,184,0.25); margin: 10px 0; }
.section-kicker{
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.90);
}

/* Search input with icon */
.search{ position: relative; width: 100%; max-width: 520px; }
.search__icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
}
.search .input{ padding-left: 38px; }

/* Clearable input wrapper */
.input-clearable{
  position: relative;
  display: inline-flex;
  width: 100%;
}
.input-clearable .input{
  padding-right: 36px;
}
.input-clearable__btn{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(100, 116, 139, 0.15);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(100, 116, 139, 0.8);
  transition: background-color 150ms ease, color 150ms ease;
  padding: 0;
}
.input-clearable__btn:hover{
  background: rgba(220, 38, 38, 0.15);
  color: var(--xp-danger);
}
.input-clearable__btn svg{
  width: 14px;
  height: 14px;
}

/* ------- Cards / dashboard tiles ------- */
.cards-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .cards-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card-link{
  display: block;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: var(--xp-radius);
  padding: 16px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(10px);
  transition: transform 140ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.card-link::before{
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent, rgba(148,163,184,0.8)), rgba(255,255,255,0));
}
.card-link:hover{
  transform: translateY(-2px);
  box-shadow: var(--xp-shadow);
  border-color: rgba(148,163,184,0.42);
  background: #fff;
}

.card-link--disabled{
  opacity: 0.72;
  cursor: not-allowed;
}
.card-link--disabled:hover{
  transform: none;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.88);
}

.card-link__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-link__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft, rgba(37,99,235,0.10));
  color: var(--accent, var(--xp-blue));
}
.card-link__chevron{
  opacity: 0.55;
  color: rgba(15,23,42,0.55);
}
.card-link:hover .card-link__chevron{ opacity: 1; }
.card-link__title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.card-link__subtitle{
  margin: 0;
  color: var(--xp-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Accent tokens used throughout existing markup */
.accent--blue { --accent: var(--xp-blue); --accent-soft: rgba(37,99,235,0.12); }
.accent--green { --accent: var(--xp-green); --accent-soft: rgba(22,163,74,0.12); }
.accent--purple { --accent: var(--xp-purple); --accent-soft: rgba(124,58,237,0.12); }
.accent--orange { --accent: var(--xp-orange); --accent-soft: rgba(217,119,6,0.12); }
.accent--red { --accent: var(--xp-brand); --accent-soft: rgba(185,28,28,0.12); }
.accent--slate { --accent: var(--xp-slate); --accent-soft: rgba(51,65,85,0.12); }

/* Pills / status badges */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,0.35);
  color: rgba(15,23,42,0.68);
  background: rgba(248,250,252,0.90);
}
.pill--success{ background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.28); color: #166534; }
.pill--muted{ background: rgba(100,116,139,0.10); border-color: rgba(100,116,139,0.22); color: #334155; }
.pill--info{ background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.28); color: #1d4ed8; }
.pill--warn{ background: rgba(217,119,6,0.14); border-color: rgba(217,119,6,0.30); color: #92400e; }
.pill--danger{ background: rgba(220,38,38,0.14); border-color: rgba(220,38,38,0.30); color: #991b1b; }

/* ------- Tables ------- */
.table-wrap{
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: var(--xp-radius);
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.x-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.x-table thead th{
  background: rgba(248,250,252,0.92);
  color: rgba(100,116,139,0.95);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.22);
}
.x-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
  vertical-align: top;
  background: transparent;
}
.x-table tbody tr:hover td{
  background: rgba(37,99,235,0.06);
}
.x-table tbody tr:last-child td{ border-bottom: 0; }

.table__actions{ text-align: right; white-space: nowrap; }
.table__mono{ font-family: Arial, Helvetica, sans-serif }
.table__action-btn{ 
    background: transparent; 
    border: none; 
    color: var(--xp-brand); 
    cursor: pointer; 
    padding: 4px 8px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    transition: color 0.2s;
}
.table__action-btn:hover{ color: var(--xp-brand-2); }
.dns-host{ 
    white-space: nowrap; 
    overflow: visible; 
    word-break: keep-all;
    min-width: 0;
}
.table__muted{ color: rgba(100,116,139,0.95); }
.table__link{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--xp-blue);
  font-weight: 900;
}
.table__link:hover{ color: #1d4ed8; text-decoration: underline; }
.table__danger{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: rgba(100,116,139,0.95);
  font-weight: 900;
}
.table__danger:hover{ color: var(--xp-danger); text-decoration: underline; }

.is-selected td{ background: rgba(217,119,6,0.10) !important; }

/* ------- Row links / favicons (ns-check, lists) ------- */
.link-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--xp-text);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.link-row:hover{
  background: rgba(37,99,235,0.06);
}
.link-row__title{
  font-weight: 1000;
  color: var(--xp-text);
}
.favicon{
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,0.22);
  background: #fff;
}

/* Small inline status layouts */
.ns-inline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ns-list{ font-size: 12px; }
.ns-list__items{ display: flex; flex-direction: column; gap: 4px; }

/* ------- Panels (client detail, etc.) ------- */
.panel{
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: var(--xp-radius);
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
  padding: 18px;
  backdrop-filter: blur(10px);
}
.panel + .panel{ margin-top: 14px; }
.panel__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.panel__title{
  margin: 0;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -0.01em;
}

/* client detail helpers (existing classnames) */
.center-loading{ text-align: center; padding: 52px 0; }
.client-profile{ display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.client-avatar{
  width: 176px;
  height: 176px;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(148,163,184,0.18);
  border: 4px solid rgba(255,255,255,0.9);
  box-shadow: 0 14px 30px rgba(15,23,42,0.14);
  position: relative;
  display: grid;
  place-items: center;
}
.client-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.client-avatar__initials{ font-size: 44px; font-weight: 1000; color: rgba(100,116,139,0.70); }
.client-avatar__edit{ position: absolute; right: 10px; bottom: 10px; opacity: 0; transition: opacity 160ms ease; }
.client-avatar:hover .client-avatar__edit{ opacity: 1; }

.client-info{ flex: 1 1 320px; min-width: 260px; }
.client-info__name{ margin: 0 0 10px; font-size: 28px; font-weight: 1000; letter-spacing: -0.02em; }
.client-info__meta{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.client-name-row:hover .info-item__actions{ opacity: 1; }

.info-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px){ .info-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-item{
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255,255,255,0.85);
}
.info-item__label{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.92);
  margin-bottom: 6px;
}
.info-item__value{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.info-item__text{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-item__actions{ display: inline-flex; gap: 6px; opacity: 0.0; transition: opacity 160ms ease; }
.info-item:hover .info-item__actions{ opacity: 1; }

.icon-btn{
  border: 1px solid transparent;
  background: transparent;
  border-radius: 9999px;
  padding: 6px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.icon-btn:hover{ background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.22); }

.company-item{
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.85);
}
.company-item + .company-item{ margin-top: 10px; }
.company-item__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.company-item__name{ font-weight: 1000; }
.note-item{ border-left: 4px solid var(--xp-blue); padding: 6px 0 6px 12px; }
.note-item + .note-item{ margin-top: 12px; }
.note-item__meta{ margin-top: 8px; font-size: 12px; color: rgba(100,116,139,0.95); }

/* ------- Modals / overlays (Alpine-driven) ------- */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.60);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 1200;
}

.x-modal{
  width: 100%;
  max-width: 560px;
  background: rgba(255,255,255,0.96);
  border-radius: var(--xp-radius);
  border: 1px solid rgba(148,163,184,0.30);
  box-shadow: 0 40px 95px rgba(2,6,23,0.55);
  overflow: hidden;
  position: relative;
}
.x-modal::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent, rgba(148,163,184,0.8)), rgba(255,255,255,0));
}
.modal--md{ max-width: 760px; }
.modal--lg{ max-width: 980px; }
.modal__body{ padding: 18px; }
.modal__body--scroll{ max-height: calc(100vh - 220px); overflow: auto; }
.modal__title{ margin: 0 0 14px; font-size: 18px; font-weight: 1000; letter-spacing: -0.01em; }
.modal__footer{
  background: rgba(248,250,252,0.92);
  border-top: 1px solid rgba(148,163,184,0.22);
  padding: 12px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ------- Toasts ------- */
.x-toast{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1300;
  min-width: 280px;
  max-width: calc(100vw - 44px);
  padding: 14px 16px;
  border-radius: 16px;
  color: #fff;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 70px rgba(2,6,23,0.45);
}
.toast--default{ background: rgba(15,23,42,0.92); }
.toast--error{ background: rgba(220,38,38,0.92); }
.toast__message{ font-weight: 800; }
.toast--center{ left: 50%; right: auto; transform: translateX(-50%); }

/* ------- Spinners ------- */
.spinner{
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 4px solid rgba(148,163,184,0.30);
  border-top-color: var(--accent, var(--xp-blue));
  animation: xp-spin 900ms linear infinite;
  margin: 0 auto 12px;
}
.spinner--sm{ width: 22px; height: 22px; border-width: 3px; margin-bottom: 10px; }
.spinner--lg{ width: 40px; height: 40px; border-width: 4px; margin-bottom: 14px; }
@keyframes xp-spin{ to{ transform: rotate(360deg); } }

/* ------- Tabs / chips ------- */
.tabs{
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(148,163,184,0.25);
  margin-bottom: 16px;
}
.tabs__tab{
  border: 0;
  background: transparent;
  padding: 10px 12px;
  font-weight: 1000;
  font-size: 13px;
  color: rgba(100,116,139,0.95);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.tabs__tab:hover{ color: var(--xp-text); }
.tabs__tab--active{ color: var(--xp-brand); border-bottom-color: var(--xp-brand); }

.chips{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.chip{
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(255,255,255,0.86);
  color: rgba(100,116,139,0.95);
  padding: 7px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 1000;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.chip:hover{ background: #fff; border-color: rgba(148,163,184,0.42); }
.chip--active{ background: rgba(15,23,42,0.92); border-color: rgba(15,23,42,0.92); color: #fff; }
.chip--success.chip--active{ background: rgba(22,163,74,0.92); border-color: rgba(22,163,74,0.92); }
.chip--warn.chip--active{ background: rgba(217,119,6,0.92); border-color: rgba(217,119,6,0.92); }
.chip--danger.chip--active{ background: rgba(220,38,38,0.92); border-color: rgba(220,38,38,0.92); }

/* ------- List box ------- */
.list-box{
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: var(--xp-radius);
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
  overflow: hidden;
}
.list-box__header{
  background: rgba(248,250,252,0.92);
  border-bottom: 1px solid rgba(148,163,184,0.22);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(100,116,139,0.95);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.list-box__body{
  padding: 8px 10px;
  max-height: 50vh;
  overflow: auto;
}
.check-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}
.check-row:hover{ background: rgba(37,99,235,0.06); }
.check-row input{ width: 16px; height: 16px; }
.check-row__mono{ font-family: Arial, Helvetica, sans-serif; }

/* ------- DNS page polish ------- */
.dns-loading{ text-align: center; padding: 72px 0; }
.dns-zone-card{ padding: 14px; }
.dns-zone-card__row{ display: flex; align-items: center; gap: 12px; }
.dns-zone-card__favicon{
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid rgba(148,163,184,0.25);
  background: #fff;
}
.dns-zone-card__name{
  font-weight: 1000;
  color: var(--xp-text);
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dns-toolbar{
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: var(--xp-radius);
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
  padding: 14px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dns-toolbar__left,
.dns-toolbar__right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dns-toolbar__center{ flex: 1 1 320px; display: flex; justify-content: center; }
.dns-favicon{
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 1px solid rgba(148,163,184,0.25);
}
.dns-domain__label{
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(100,116,139,0.95);
  margin-bottom: 6px;
}
.dns-domain__select{ min-width: 260px; width: 260px; }

.dns-section{ margin-bottom: 14px; }
.dns-section__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(185,28,28,0.22);
  background: rgba(185,28,28,0.06);
}
.dns-section__header:hover{ background: rgba(185,28,28,0.08); }
.dns-section__header-left{ display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.dns-section__title{ margin: 0; font-size: 15px; font-weight: 1000; color: var(--xp-brand-2); }
.dns-chevron{ transition: transform 200ms ease; color: var(--xp-brand); }
.dns-chevron--open{ transform: rotate(180deg); }
.dns-value{ 
    max-width: 520px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    min-width: 0;
}
@media (max-width: 768px) {
    .dns-value{ 
        max-width: 200px; 
    }
    .x-table {
        table-layout: auto;
    }
    .x-table th.table__actions,
    .x-table td.table__actions {
        position: sticky;
        right: 0;
        background: white;
        z-index: 10;
        box-shadow: -2px 0 4px rgba(0,0,0,0.05);
    }
    .x-table tbody tr.is-selected td.table__actions {
        background: rgba(59, 130, 246, 0.1);
    }
}

.dns-bulkbar{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1250;
  max-width: calc(100vw - 44px);
  min-width: 320px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(217,119,6,0.45);
  border-radius: 9999px;
  box-shadow: 0 30px 80px rgba(2,6,23,0.35);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.dns-bulkbar__count{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-right: 14px;
  border-right: 1px solid rgba(148,163,184,0.22);
}
.dns-bulkbar__count-number{ font-weight: 1000; color: #92400e; font-size: 18px; }
.dns-bulkbar__count-label{ font-weight: 1000; color: #b45309; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; }
.dns-bulkbar__controls{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dns-bulkbar__target{ min-width: 180px; }

.select--warn{
  border-color: rgba(217,119,6,0.45);
  background: rgba(217,119,6,0.08);
}

/* ------- Login page ------- */
.login{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}
.login-card{
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: var(--xp-radius);
  box-shadow: var(--xp-shadow);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.login-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--xp-brand), rgba(255,255,255,0));
}
.login-card__brand{
  margin: 0 0 4px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-align: center;
  font-size: 26px;
}
.login-card__sub{
  margin: 0 0 18px;
  text-align: center;
  color: var(--xp-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.x-alert{
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,0.28);
  background: rgba(220,38,38,0.10);
  color: #991b1b;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 14px;
  text-align: center;
}

/* ------- Alpine transition helpers ------- */
.anim-fade-enter,
.anim-fade-leave{ transition: opacity 220ms ease; }
.anim-fade-enter-start,
.anim-fade-leave-end{ opacity: 0; }
.anim-fade-enter-end,
.anim-fade-leave-start{ opacity: 1; }

.anim-slide-up-enter,
.anim-slide-up-leave{ transition: transform 240ms ease, opacity 240ms ease; }
.anim-slide-up-enter-start,
.anim-slide-up-leave-end{ transform: translateY(18px); opacity: 0; }
.anim-slide-up-enter-end,
.anim-slide-up-leave-start{ transform: translateY(0); opacity: 1; }

/* Keep existing x-cloak behavior */
[x-cloak] { display: none !important; }