/* ═══════════════════════════════════════════════════════════
   QTS Messenger — Corporate Theme
   Background : #0C0C0E  (almost black)
   Accent     : #00E5B0  (teal/mint)
   CTA        : #FF6B35  (orange)
   Text       : #FFFFFF / #AAAAAA
   Surfaces   : #1A1A1C
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────
   Cinny reads these variables for all colors.
   Covers multiple naming patterns across versions.          */
:root {
  --bg-surface-extra-low: #0C0C0E;
  --bg-surface-low:       #0C0C0E;
  --bg-surface:           #1A1A1C;
  --bg-surface-high:      #222224;
  --bg-surface-border:    #2A2A2C;

  --primary:              #00E5B0;
  --primary-hover:        #00C49A;
  --on-primary:           #000000;

  /* Orange for CTA buttons (login, send, etc.) */
  --secondary:            #FF6B35;
  --on-secondary:         #FFFFFF;

  --text-primary:         #FFFFFF;
  --text-secondary:       #AAAAAA;
  --text-tertiary:        #666666;
  --text-disabled:        #555555;

  --border:               #2A2A2C;
  --border-hover:         #3A3A3C;
  --border-active:        #00E5B0;

  --ic-surface-low:       #0C0C0E;
  --ic-surface:           #1A1A1C;

  /* Scrollbar */
  --scrollbar-thumb:      #2A2A2C;
  --scrollbar-thumb-hover:#3A3A3C;
}

/* ── Base ───────────────────────────────────────────────── */
body,
#root {
  background-color: #0C0C0E !important;
  color: #FFFFFF !important;
}

/* ── Scrollbars ─────────────────────────────────────────── */
* {
  scrollbar-color: #2A2A2C #0C0C0E;
  scrollbar-width: thin;
}
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: #0C0C0E; }
::-webkit-scrollbar-thumb        { background: #2A2A2C; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #3A3A3C; }

/* ── Login / Welcome screen ─────────────────────────────── */
/* Background of the auth pages */
[class*="auth"],
[class*="Auth"],
[class*="login"],
[class*="Login"],
[class*="welcome"],
[class*="Welcome"] {
  background-color: #0C0C0E !important;
}

/* Login card/panel */
[class*="card"],
[class*="Card"],
[class*="panel"],
[class*="Panel"] {
  background-color: #1A1A1C !important;
  border-color: #2A2A2C !important;
}

/* ── Sidebar / Navigation ────────────────────────────────── */
[class*="sidebar"],
[class*="Sidebar"],
[class*="nav"],
[class*="Nav"] {
  background-color: #0C0C0E !important;
}

/* Active/selected room highlight */
[class*="active"],
[aria-selected="true"],
[class*="selected"] {
  background-color: rgba(0, 229, 176, 0.12) !important;
}

/* Hover on room list items */
[class*="room"]:hover,
[class*="Room"]:hover,
[class*="item"]:hover,
[class*="Item"]:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ── Chat / Message area ────────────────────────────────── */
[class*="timeline"],
[class*="Timeline"],
[class*="message"],
[class*="Message"],
[class*="chat"],
[class*="Chat"] {
  background-color: #1A1A1C !important;
}

/* ── Input fields ───────────────────────────────────────── */
input,
textarea,
[contenteditable="true"] {
  background-color: #1A1A1C !important;
  color: #FFFFFF !important;
  border-color: #2A2A2C !important;
}
input:focus,
textarea:focus,
[contenteditable="true"]:focus {
  border-color: #00E5B0 !important;
  outline-color: #00E5B0 !important;
}
input::placeholder,
textarea::placeholder {
  color: #666666 !important;
}

/* ── Buttons ────────────────────────────────────────────── */
/* Primary / CTA button — orange */
button[class*="primary"],
[class*="btn"][class*="primary"],
[class*="button"][class*="primary"],
[class*="PrimaryButton"] {
  background-color: #FF6B35 !important;
  color: #FFFFFF !important;
  border: none !important;
}
button[class*="primary"]:hover,
[class*="btn"][class*="primary"]:hover {
  background-color: #e55a28 !important;
}

/* Secondary / ghost button — teal outline */
button[class*="secondary"],
[class*="btn"][class*="secondary"] {
  border-color: #00E5B0 !important;
  color: #00E5B0 !important;
  background: transparent !important;
}

/* ── Links & accent elements ────────────────────────────── */
a {
  color: #00E5B0 !important;
}
a:hover {
  color: #00C49A !important;
}

/* Teal for active indicators, badges, etc. */
[class*="badge"],
[class*="Badge"],
[class*="notification"],
[class*="unread"] {
  background-color: #00E5B0 !important;
  color: #000000 !important;
}

/* ── Dividers ───────────────────────────────────────────── */
hr,
[class*="divider"],
[class*="Divider"],
[class*="separator"] {
  border-color: #2A2A2C !important;
  background-color: #2A2A2C !important;
}

/* ── Tooltips / Dropdowns / Menus ───────────────────────── */
[class*="tooltip"],
[class*="Tooltip"],
[class*="dropdown"],
[class*="Dropdown"],
[class*="menu"],
[class*="Menu"],
[class*="popover"],
[class*="Popover"] {
  background-color: #1A1A1C !important;
  border-color: #2A2A2C !important;
  color: #FFFFFF !important;
}

/* ── Modal / Dialog ─────────────────────────────────────── */
[class*="modal"],
[class*="Modal"],
[class*="dialog"],
[class*="Dialog"],
[role="dialog"] {
  background-color: #1A1A1C !important;
  border-color: #2A2A2C !important;
}

/* Modal overlay */
[class*="overlay"],
[class*="backdrop"] {
  background-color: rgba(0, 0, 0, 0.75) !important;
}