/* PackGPT Admin V2 — visual consistency patch.
   Presentation only: no IDs, data hooks, APIs, routing or interaction state changed. */
:root {
  --pg-font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --pg-control-height: 40px;
  --pg-control-radius: 8px;
}
html, body, body[data-page], body[data-page] button, body[data-page] input,
body[data-page] select, body[data-page] textarea {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}
body[data-page] button { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
body[data-page] button:focus-visible, body[data-page] input:focus-visible,
body[data-page] select:focus-visible, body[data-page] textarea:focus-visible, body[data-page] a:focus-visible {
  outline: 3px solid rgba(37,99,235,.22); outline-offset: 2px;
}

/* Shared page headings for legacy pages */
body[data-page="users"] .main, body[data-page="optimize"] .main, body[data-page="waba"] .main {
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 28px 32px 36px; color: var(--pg-text,#172033);
}
body[data-page="users"] .page-header, body[data-page="optimize"] .page-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:0 0 22px;
}
body[data-page="users"] .page-title, body[data-page="optimize"] .page-title {
  color:var(--pg-text,#172033); font-size:26px; font-weight:700; line-height:1.25; letter-spacing:-.025em;
}
body[data-page="users"] .page-sub, body[data-page="optimize"] .page-sub {
  margin-top:7px; max-width:760px; color:var(--pg-text-secondary,#667085); font-size:14px; line-height:1.55;
}

/* User Management */
body[data-page="users"] .card {
  overflow:hidden; background:var(--pg-surface,#fff); border:1px solid var(--pg-border,#e5e9f0);
  border-radius:12px; box-shadow:var(--pg-shadow-sm,0 1px 2px rgba(16,24,40,.04));
}
body[data-page="users"] .card-header {
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px;
  background:var(--pg-surface,#fff); border-bottom:1px solid var(--pg-border-light,#edf0f4);
}
body[data-page="users"] .card-title { color:var(--pg-text,#172033); font-size:16px; font-weight:700; }
body[data-page="users"] .primary-btn, body[data-page="users"] .modal-footer button {
  min-height:var(--pg-control-height); padding:9px 16px; border:1px solid var(--pg-primary,#2563eb);
  border-radius:var(--pg-control-radius); background:var(--pg-primary,#2563eb); color:#fff; font-weight:600; line-height:1.25; box-shadow:none;
}
body[data-page="users"] .primary-btn:hover, body[data-page="users"] .modal-footer button:hover {
  background:var(--pg-primary-hover,#1d4ed8); border-color:var(--pg-primary-hover,#1d4ed8);
}
body[data-page="users"] #usersTable { width:100%; border-collapse:separate; border-spacing:0; background:#fff; }
body[data-page="users"] #usersTable th {
  padding:13px 16px; background:var(--pg-surface-muted,#f9fafb); color:var(--pg-text-secondary,#667085);
  border-bottom:1px solid var(--pg-border,#e5e9f0); font-size:12px; font-weight:700; letter-spacing:.025em; white-space:nowrap;
}
body[data-page="users"] #usersTable td {
  padding:14px 16px; color:var(--pg-text,#172033); border-bottom:1px solid var(--pg-border-light,#edf0f4); font-size:13px; vertical-align:middle;
}
body[data-page="users"] #usersTable tbody tr:last-child td { border-bottom:0; }
body[data-page="users"] #usersTable tbody tr:hover td { background:#fbfcfe; }
body[data-page="users"] .modal-box { border:1px solid var(--pg-border,#e5e9f0); border-radius:14px; box-shadow:0 20px 50px rgba(15,23,42,.18); }
body[data-page="users"] .modal-header, body[data-page="users"] .modal-footer { padding:18px 22px; border-color:var(--pg-border-light,#edf0f4); }
body[data-page="users"] .modal-body { padding:22px; gap:12px; }
body[data-page="users"] .modal-body input, body[data-page="users"] .modal-body select {
  min-height:var(--pg-control-height); padding:9px 11px; border:1px solid var(--pg-border,#e5e9f0); border-radius:var(--pg-control-radius); color:var(--pg-text,#172033); background:#fff;
}

/* Optimize Rates: preserve domain selection, loading, saving and visibility states */
body[data-page="optimize"] .domain-tabs {
  justify-content:flex-start; gap:8px; margin:18px 0 20px !important; padding:12px; background:var(--pg-surface,#fff) !important;
  border:1px solid var(--pg-border,#e5e9f0) !important; border-radius:12px !important; box-shadow:var(--pg-shadow-sm,0 1px 2px rgba(16,24,40,.04)) !important;
}
body[data-page="optimize"] .domain-tabs .domain-tab, body[data-page="optimize"] .save-footer .btn {
  min-height:var(--pg-control-height); padding:9px 15px; border-radius:var(--pg-control-radius); font-family:inherit; font-weight:600; line-height:1.25;
}
body[data-page="optimize"] .domain-tabs .btn-primary, body[data-page="optimize"] .save-footer .btn-primary {
  background:var(--pg-primary,#2563eb) !important; border:1px solid var(--pg-primary,#2563eb) !important; color:#fff !important;
}
body[data-page="optimize"] .domain-tabs .btn-primary:hover, body[data-page="optimize"] .save-footer .btn-primary:hover {
  background:var(--pg-primary-hover,#1d4ed8) !important; border-color:var(--pg-primary-hover,#1d4ed8) !important;
}
body[data-page="optimize"] .domain-tabs .btn-ghost, body[data-page="optimize"] .save-footer .btn-ghost {
  background:#fff !important; border:1px solid var(--pg-border,#e5e9f0) !important; color:var(--pg-text,#172033) !important;
}
body[data-page="optimize"] .domain-tabs .btn-ghost:hover, body[data-page="optimize"] .save-footer .btn-ghost:hover {
  background:var(--pg-surface-muted,#f9fafb) !important; border-color:#cbd5e1 !important;
}
body[data-page="optimize"] #domainWelcome { background:#fff; border-color:var(--pg-border,#e5e9f0) !important; border-radius:12px !important; line-height:1.55; }
body[data-page="optimize"] .accordion {
  background:#fff; border:1px solid var(--pg-border,#e5e9f0); border-radius:12px; box-shadow:var(--pg-shadow-sm,0 1px 2px rgba(16,24,40,.04));
}
body[data-page="optimize"] .acc-header { padding:16px 18px; }
body[data-page="optimize"] .acc-title { color:var(--pg-text,#172033); font-size:14px; font-weight:700; }
body[data-page="optimize"] .acc-subtitle, body[data-page="optimize"] .acc-count { color:var(--pg-text-secondary,#667085); }
body[data-page="optimize"] .acc-body th { background:var(--pg-surface-muted,#f9fafb); color:var(--pg-text-secondary,#667085); }
body[data-page="optimize"] .acc-body td, body[data-page="optimize"] .acc-body th { border-color:var(--pg-border-light,#edf0f4); }
body[data-page="optimize"] #ratesContainer input, body[data-page="optimize"] #ratesContainer select, body[data-page="optimize"] #ratesContainer textarea {
  min-height:36px; border-color:var(--pg-border,#e5e9f0); border-radius:7px;
}
body[data-page="optimize"] .save-footer {
  padding:12px 28px; background:rgba(255,255,255,.97); border-top:1px solid var(--pg-border,#e5e9f0);
  box-shadow:0 -4px 16px rgba(16,24,40,.04); backdrop-filter:blur(8px);
}

/* WhatsApp Integration: align cards and controls while retaining WABA states */
body[data-page="waba"] .waba-page { max-width:1440px; padding:0 0 32px; }
body[data-page="waba"] .waba-header { align-items:center; margin-bottom:22px; }
body[data-page="waba"] .waba-header h1 { font-size:26px; line-height:1.25; letter-spacing:-.025em; }
body[data-page="waba"] .waba-header p { line-height:1.55; }
body[data-page="waba"] .waba-card, body[data-page="waba"] .waba-flow-card {
  border:1px solid var(--pg-border,#e5e9f0); border-radius:12px; box-shadow:var(--pg-shadow-sm,0 1px 2px rgba(16,24,40,.04));
}
body[data-page="waba"] .waba-card { padding:20px; }
body[data-page="waba"] .waba-card-head h2 { font-size:16px; line-height:1.4; }
body[data-page="waba"] .waba-card-head p { line-height:1.55; }
body[data-page="waba"] .waba-field label { color:var(--pg-text-secondary,#667085); font-weight:600; }
body[data-page="waba"] .waba-field input, body[data-page="waba"] .waba-field select, body[data-page="waba"] .waba-field textarea {
  min-height:var(--pg-control-height); border:1px solid var(--pg-border,#e5e9f0); border-radius:var(--pg-control-radius); background:#fff; color:var(--pg-text,#172033);
}
body[data-page="waba"] .waba-btn {
  min-height:var(--pg-control-height); padding:9px 15px; border-radius:var(--pg-control-radius); font-family:inherit; font-size:14px; font-weight:600; box-shadow:none;
}
body[data-page="waba"] .waba-btn-primary { background:var(--pg-primary,#2563eb); border-color:var(--pg-primary,#2563eb); }
body[data-page="waba"] .waba-btn-primary:hover { background:var(--pg-primary-hover,#1d4ed8); border-color:var(--pg-primary-hover,#1d4ed8); }

/* Existing Dashboard, Chat Logs, Quotes and Knowledge components already use pg-* styles. */
@media (max-width:900px) {
  body[data-page="users"] .main, body[data-page="optimize"] .main, body[data-page="waba"] .main { padding:22px 20px 30px; }
  body[data-page="waba"] .waba-page { padding-bottom:24px; }
}
@media (max-width:640px) {
  body[data-page="users"] .main, body[data-page="optimize"] .main, body[data-page="waba"] .main { padding:18px 14px 26px; }
  body[data-page="users"] .page-header, body[data-page="optimize"] .page-header, body[data-page="waba"] .waba-header { flex-direction:column; align-items:stretch; gap:12px; }
  body[data-page="users"] .page-title, body[data-page="optimize"] .page-title, body[data-page="waba"] .waba-header h1 { font-size:23px; }
  body[data-page="users"] .card-header { padding:15px; align-items:flex-start; }
  body[data-page="users"] #usersTable { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body[data-page="optimize"] .domain-tabs { padding:10px; gap:8px; }
  body[data-page="optimize"] .domain-tabs .domain-tab { flex:1 1 calc(50% - 8px); min-width:0; padding:9px 10px; }
  body[data-page="waba"] .waba-grid { grid-template-columns:minmax(0,1fr); }
  body[data-page="waba"] .waba-card { padding:16px; }
}