/* ═══════════════════════════════════════════════════════════════════════════
   Hydra Admin — shared theme (2026 redesign)
   Linked into the standalone admin sub-pages AFTER their own <style> so it
   overrides them. For pages built on the shared CSS variables (cloud-backups,
   bug-reports, chat-strikes) just redefining :root reskins them; the two
   hardcoded-palette pages (chatbot-applications, chat-conversations) get
   targeted class remaps at the bottom.
═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0e16; --surface:#111726; --surface2:#141b2c;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13);
  --text1:#e7ebf3; --text2:#8a94a8; --text3:#5b6478;
  --gold:#d8b56b; --gold2:#c39f57;
  --blue:#5b8cff; --green:#34d399; --red:#fb7185; --orange:#f5b65a; --purple:#7c6bff;
  --accent:#5b8cff; --accent2:#2dd4bf;
  --grad:linear-gradient(135deg,#2dd4bf 0%,#5b8cff 55%,#7c6bff 100%);
  --radius:14px; --shadow:0 10px 30px -12px rgba(0,0,0,.6);
}

/* ── Base canvas + typography ── */
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
  background:
    radial-gradient(1100px 600px at 84% -10%, rgba(91,140,255,.10), transparent 60%),
    radial-gradient(900px 520px at -5% -5%, rgba(45,212,191,.07), transparent 55%),
    #0a0e16 !important;
  color:var(--text1);
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(91,140,255,.35)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:8px}
a{color:var(--accent)}

/* ── Generic element polish (uses vars; low specificity so page rules still lead layout) ── */
h1{letter-spacing:-.02em}
table th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text3)}
input,select,textarea{font-family:inherit}

/* ── Variable-based pages: card / table / badge / button refinements ── */
.card,.table-wrap,.modal-box,.modal-wide{
  background:linear-gradient(180deg,var(--surface),var(--surface2)) !important;
  border:1px solid var(--border) !important;border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
}
.data-table th{border-bottom:1px solid var(--border) !important}
.data-table td{border-bottom:1px solid var(--border) !important}
.data-table tr:hover td{background:rgba(255,255,255,.025) !important}
.badge,[class^="badge-"],[class*=" badge-"]{border-radius:20px !important;font-weight:700}
.btn-gold,.btn-primary{background:var(--grad) !important;color:#08111f !important;border:none !important;
  box-shadow:0 8px 22px -8px rgba(91,140,255,.7)}

/* ═══ Hardcoded-palette page remaps ═══════════════════════════════════════════
   chatbot-applications.html + chat-conversations.html use literal hex + their
   own classes. Remap those to the new design language. */

/* shared dark surfaces */
.subtitle{color:var(--text2) !important}

/* chatbot-applications.html */
.tab{background:var(--surface) !important;border:1px solid var(--border) !important;color:var(--text2) !important;border-radius:9px !important}
.tab.active{background:var(--grad) !important;color:#08111f !important;border:none !important}
.tab:hover:not(.active){border-color:var(--border2) !important;color:var(--text1) !important}
.card{background:linear-gradient(180deg,var(--surface),var(--surface2)) !important;border:1px solid var(--border) !important;border-radius:var(--radius) !important}
.hotel-name{color:var(--text1) !important}
.contact{color:var(--text2) !important}
.meta-label{color:var(--text3) !important}
.meta-val{color:var(--text1) !important}
.meta-val a{color:var(--accent) !important}
.message-box{background:var(--surface2) !important;border:1px solid var(--border2) !important;color:var(--text2) !important;border-radius:10px !important}
.field-group label{color:var(--text3) !important}
.field-group input{background:var(--surface2) !important;border:1px solid var(--border2) !important;color:var(--text1) !important;border-radius:9px !important}
.field-group input::placeholder{color:var(--text3) !important}
.badge-pending{background:rgba(245,182,90,.16) !important;color:var(--orange) !important}
.badge-approved{background:rgba(52,211,153,.16) !important;color:var(--green) !important}
.badge-rejected{background:rgba(251,113,133,.16) !important;color:var(--red) !important}

/* chat-conversations.html */
.conv-list-header h2{color:var(--text1) !important}
.filters select,.filters input{background:var(--surface2) !important;border:1px solid var(--border2) !important;color:var(--text1) !important;border-radius:9px !important}
.filters select:focus,.filters input:focus{border-color:var(--accent) !important}
.conv-item{border-bottom:1px solid var(--border) !important}
.conv-item:hover{background:rgba(255,255,255,.04) !important}
.conv-item.active{background:linear-gradient(90deg,rgba(91,140,255,.18),rgba(91,140,255,.03)) !important;border-left:3px solid var(--accent) !important}
.ci-hotel{color:var(--text3) !important}
.ci-guest{color:var(--text1) !important}
.ci-preview{color:var(--text2) !important}
.ci-time{color:var(--text3) !important}
.dot-ai{background:var(--green) !important}
.dot-pending{background:var(--orange) !important}
.dot-human{background:var(--accent) !important}
.dot-closed{background:var(--text3) !important}
.badge-hu{background:rgba(91,140,255,.16) !important;color:var(--accent) !important}
.badge-de{background:rgba(124,107,255,.16) !important;color:#b6a9ff !important}