/* ============================================================
   portal.css — Ai-SmartMove Customer Portal
   ============================================================ */

/* ── Layout ─────────────────────────────────────────────── */
body.portal-body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--color-snow);
  font-size: 0.9375rem;
}

.portal-nav {
  background: var(--color-deep-navy);
  height: 56px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.portal-brand-text {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-smoke);
}

.portal-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 56px;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.portal-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--color-cloud);
  position: fixed;
  top: 56px; bottom: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 900;
}
.portal-sidenav { padding: 0.75rem 0.5rem; flex: 1; }
.portal-nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-slate);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background 0.12s, color 0.12s;
}
.portal-nav-item i { font-size: 1rem; width: 18px; text-align: center; }
.portal-nav-item:hover  { background: var(--color-mist); color: var(--color-violet); }
.portal-nav-item.active { background: var(--color-mist); color: var(--color-violet); font-weight: 600; }
.portal-sidebar-footer { padding: 1rem 0.75rem; border-top: 1px solid var(--color-cloud); }

/* ── Main content ────────────────────────────────────────── */
.portal-main    { flex: 1; margin-left: 220px; min-width: 0; }
.portal-content { padding: 2rem; max-width: 1100px; }

/* ── Page header ─────────────────────────────────────────── */
.portal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.portal-page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}

/* ── Stat cards ──────────────────────────────────────────── */
.portal-stat-icon { font-size: 1.75rem; }

/* ── Expiry badges ───────────────────────────────────────── */
.badge-expiry-ok      { background: var(--color-teal);   color: #fff; }
.badge-expiry-warn    { background: var(--color-amber);  color: #1A1826; }
.badge-expiry-urgent  { background: #E05C5C;             color: #fff; }
.badge-expiry-expired { background: var(--color-ink);    color: #fff; }

/* ── DNS table — Cloudflare style ───────────────────────── */
.dns-table { font-size: 0.8125rem; font-family: 'Fira Mono', monospace, sans-serif; }
.dns-table thead th {
  background: var(--color-mist);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-slate);
  padding: 0.5rem 0.75rem;
  border: none;
}
.dns-table tbody td { padding: 0.625rem 0.75rem; vertical-align: middle; border-color: var(--color-cloud); }
.dns-table tbody tr:hover { background: var(--color-snow); }

/* DNS type badges */
.dns-type-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: monospace;
}
.dns-type-A     { background: #e8f5fe; color: #0369a1; }
.dns-type-AAAA  { background: #f0eeff; color: #5046C8; }
.dns-type-CNAME { background: #f0fdf4; color: #166534; }
.dns-type-MX    { background: #fff7ed; color: #9a3412; }
.dns-type-TXT   { background: #fef3c7; color: #92400e; }
.dns-type-NS    { background: #fdf4ff; color: #86198f; }
.dns-type-SRV   { background: #f0fdf4; color: #065f46; }
.dns-type-CAA   { background: #fff1f2; color: #9f1239; }

/* Cloudflare orange cloud proxy toggle */
.proxy-badge-on  { color: #f6821f; font-size: 1.1rem; }
.proxy-badge-off { color: var(--color-smoke); font-size: 1.1rem; }

/* ── NS section ──────────────────────────────────────────── */
/* ── Nameserver display — ResellerClub style ─────────── */
.ns-input-row { display: flex; flex-direction: column; gap: 0.25rem; }
.ns-input-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-smoke);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ns-input-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-snow);
  border: 1.5px solid var(--color-cloud);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-family: 'Fira Mono', monospace, sans-serif;
  font-size: 0.875rem;
  color: var(--color-ink);
  cursor: default;
}
.ns-input-box:hover { border-color: var(--color-violet); }
.ns-input-icon { font-size: 0.875rem; flex-shrink: 0; }
.ns-input-value { word-break: break-all; }

/* Keep old class as fallback */
.ns-record-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; background: var(--color-mist);
  border-radius: 6px; margin-bottom: 0.375rem;
  font-family: monospace; font-size: 0.875rem;
}
.ns-label { font-size: 0.7rem; font-weight: 700; color: var(--color-smoke); width: 30px; text-transform: uppercase; }

/* ── Invoice ─────────────────────────────────────────────── */
.invoice-status-unpaid  { background: #FEE2E2; color: #991B1B; }
.invoice-status-partial { background: #FEF3C7; color: #92400E; }
.invoice-status-paid    { background: #D1FAE5; color: #065F46; }

/* ── Ticket status ───────────────────────────────────────── */
.ticket-open        { background: #EDE9FE; color: #5B21B6; }
.ticket-in_progress { background: #FEF3C7; color: #92400E; }
.ticket-resolved    { background: #D1FAE5; color: #065F46; }
.ticket-closed      { background: var(--color-cloud); color: var(--color-slate); }

/* ── Domain card ─────────────────────────────────────────── */
.domain-card {
  border: 1.5px solid var(--color-cloud);
  border-radius: 10px;
  padding: 1.25rem;
  background: #fff;
  transition: border-color 0.15s;
  margin-bottom: 1rem;
}
.domain-card:hover { border-color: var(--color-violet); }
.domain-name { font-size: 1.0625rem; font-weight: 700; color: var(--color-ink); }
.dns-not-managed {
  background: var(--color-mist);
  border: 1px dashed var(--color-cloud);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

/* ── Public pages (login, register) ─────────────────────── */
.portal-auth-page {
  min-height: 100vh;
  background: var(--color-deep-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.portal-auth-card {
  background: #fff;
  border-radius: 12px;
  padding: 2.5rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.portal-auth-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-ink);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .portal-sidebar  { display: none; }
  .portal-main     { margin-left: 0; }
  .portal-content  { padding: 1rem; }
}

/* ── DNS Toolbar (Cloudflare-style) ─────────────────────── */
.dns-toolbar {
  background: #fff;
  border-radius: 10px 10px 0 0;
}
.dns-search-wrap {
  position: relative;
  min-width: 200px;
}
.dns-search-icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-smoke);
  font-size: 0.875rem;
  pointer-events: none;
}
.dns-search-input {
  width: 100%;
  padding: 0.375rem 0.75rem 0.375rem 2rem;
  border: 1.5px solid var(--color-cloud);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--color-snow);
  color: var(--color-ink);
  outline: none;
  transition: border-color .15s;
}
.dns-search-input:focus { border-color: var(--color-violet); background: #fff; }
.dns-search-input::placeholder { color: var(--color-smoke); }

/* ── Add Record Panel ─────────────────────────────────── */
#add-dns-panel {
  background: #f8f7ff;
  border-top: 2px solid var(--color-violet);
}
.dns-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: flex-end;
}
.dns-add-field { display: flex; flex-direction: column; gap: 0.2rem; }
.dns-add-field.dns-field-name    { flex: 0 0 140px; }
.dns-add-field.dns-field-content { flex: 1 1 200px; }
.dns-add-field.dns-field-ttl     { flex: 0 0 90px; }
.dns-add-field.dns-field-priority{ flex: 0 0 70px; }
.dns-field-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-smoke);
}

/* Conflict error */
.dns-conflict-error {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: 6px;
  color: #991B1B;
  font-size: 0.8125rem;
}

/* Type hint */
.dns-type-hint {
  font-family: 'Fira Mono', monospace;
  font-size: 0.75rem;
  color: var(--color-smoke);
}

/* Current value modal block */
.dns-current-value {
  background: #f8f7ff;
  border: 1.5px solid var(--color-cloud);
  border-radius: 6px;
  padding: 0.625rem 0.875rem;
  font-family: 'Fira Mono','Courier New',monospace;
  font-size: 0.8rem;
  color: var(--color-slate);
  word-break: break-all;
  white-space: pre-wrap;
  line-height: 1.6;
  max-height: 120px;
  overflow-y: auto;
  cursor: text;
  user-select: all;
}
.dns-current-value:hover { border-color: var(--color-violet); }

@media (max-width: 576px) {
  .dns-add-row { flex-direction: column; }
  .dns-add-field { width: 100%; }
}