/* ═══════════════════════════════════════════════════════
   SOCOM II Theme — CSS overrides
   Military tactical HUD: dark slate, teal-green accents,
   olive drab highlights, blocky stencil typography
   Scoped under body[data-theme="socom"]
   ═══════════════════════════════════════════════════════ */

/* ── Global font ────────────────────────────────────── */
body[data-theme="socom"] {
  font-family: "Share Tech Mono", "Courier New", monospace;
  --socom-header-teal-1: #0c3f46;
  --socom-header-teal-2: #092f35;
  --socom-divider-olive: #636d47;
  --socom-divider-tan: #a08c57;
}

/* ── Headings use Rajdhani ──────────────────────────── */
body[data-theme="socom"] h1,
body[data-theme="socom"] h2,
body[data-theme="socom"] h3,
body[data-theme="socom"] .sidebar-header h3,
body[data-theme="socom"] .chat-welcome h3,
body[data-theme="socom"] .auth-logo h1,
body[data-theme="socom"] .auth-panel h2 {
  font-family: "Rajdhani", "Share Tech Mono", sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Server rail — dark hull ────────────────────────── */
body[data-theme="socom"] .server-rail {
  background: linear-gradient(180deg, #1a1e22 0%, #22282e 50%, #1a1e22 100%);
  border-right: 1px solid #3a9a8c;
}

body[data-theme="socom"] .server-icon {
  border: 2px solid #2d4a44;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.4),
    0 0 4px rgba(58, 154, 140, 0.15);
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
}

body[data-theme="socom"] .server-icon:hover,
body[data-theme="socom"] .server-icon.active {
  border-color: #3a9a8c;
  box-shadow:
    0 0 8px rgba(58, 154, 140, 0.35),
    inset 0 0 6px rgba(58, 154, 140, 0.1);
}

body[data-theme="socom"] .rail-divider {
  background: #2d4a44;
}

/* ── Channel sidebar — ops panel ────────────────────── */
body[data-theme="socom"] .channel-sidebar {
  border-right: 1px solid var(--socom-divider-olive);
  background: linear-gradient(180deg, #1e2428 0%, #1a1e22 100%);
}

body[data-theme="socom"] .sidebar-header {
  box-shadow: 0 2px 0 #2d4a44;
  border-bottom: 1px solid rgba(58, 154, 140, 0.25);
  background: linear-gradient(180deg, var(--socom-header-teal-1) 0%, var(--socom-header-teal-2) 100%);
}

body[data-theme="socom"] .sidebar-header h3 {
  text-shadow: 0 0 6px rgba(58, 154, 140, 0.3);
  font-size: 0.85rem;
}

body[data-theme="socom"] .channel-item {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.85rem;
}

body[data-theme="socom"] .channel-item.active {
  border-left: 3px solid #3a9a8c;
  background: rgba(58, 154, 140, 0.1);
  text-shadow: 0 0 4px rgba(58, 154, 140, 0.3);
}

body[data-theme="socom"] .channel-item:hover {
  background: rgba(58, 154, 140, 0.06);
}

body[data-theme="socom"] .channel-category {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
  color: var(--socom-divider-tan);
  text-transform: uppercase;
  border-bottom: 1px solid var(--socom-divider-olive);
  margin: 10px 0 6px;
  padding-bottom: 6px;
}

/* ── Main content — briefing room ───────────────────── */
body[data-theme="socom"] .main-content {
  background: #1e2428;
}

body[data-theme="socom"] .chat-header {
  box-shadow: 0 2px 0 #2d4a44;
  border-bottom: 1px solid rgba(58, 154, 140, 0.25);
  background: linear-gradient(180deg, var(--socom-header-teal-1) 0%, var(--socom-header-teal-2) 100%);
}

body[data-theme="socom"] .channel-hash {
  color: #3a9a8c;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
}

body[data-theme="socom"] .chat-messages {
  background: rgba(26, 30, 34, 0.5);
}

body[data-theme="socom"] .chat-msg:hover {
  background: rgba(58, 154, 140, 0.05);
}

/* ── Message avatars — tactical ID ────────────────── */
body[data-theme="socom"] .msg-avatar,
body[data-theme="socom"] .member-avatar,
body[data-theme="socom"] .user-avatar,
body[data-theme="socom"] .voice-user-avatar {
  background: #2a3238;
  border: 2px solid #2d4a44;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
  color: #3a9a8c;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
}

body[data-theme="socom"] .server-card-icon {
  background: #2a3238;
  border: 2px solid #2d4a44;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
}

body[data-theme="socom"] .msg-author {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body[data-theme="socom"] .msg-author-self {
  color: #3a9a8c;
}

body[data-theme="socom"] .msg-timestamp {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
}

/* ── Chat input — command line ────────────────────── */
body[data-theme="socom"] .chat-input-form {
  border: 1px solid #2d4a44;
  background: #1a1e22;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
}

body[data-theme="socom"] .chat-input-form:focus-within {
  border-color: #3a9a8c;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.4),
    0 0 6px rgba(58, 154, 140, 0.2);
}

body[data-theme="socom"] #chat-input {
  font-family: "Share Tech Mono", monospace;
}

body[data-theme="socom"] .send-btn:hover {
  color: #3a9a8c;
}

/* ── Buttons — military grade ────────────────────── */
body[data-theme="socom"] .btn-primary {
  background: linear-gradient(180deg, #3a9a8c 0%, #2d7a6e 50%, #1f5c52 100%);
  color: #e8ede4;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  border: 1px solid #2d4a44;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme="socom"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #4ab09e 0%, #3a9a8c 50%, #2d7a6e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 10px rgba(58, 154, 140, 0.3);
}

body[data-theme="socom"] .btn-primary:active:not(:disabled) {
  background: linear-gradient(180deg, #1f5c52 0%, #2d7a6e 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

body[data-theme="socom"] .btn-secondary {
  background: linear-gradient(180deg, #2a3238 0%, #1e2428 100%);
  border: 1px solid #2d4a44;
  color: #8a9a90;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body[data-theme="socom"] .btn-secondary:hover {
  border-color: #3a9a8c;
  color: #b8c8be;
  background: linear-gradient(180deg, #343e44 0%, #2a3238 100%);
}

body[data-theme="socom"] .btn-link.active {
  color: #3a9a8c;
}

/* ── Voice bar — comms panel ─────────────────────── */
body[data-theme="socom"] .voice-bar {
  border-top: 1px solid #2d4a44;
  background: linear-gradient(180deg, #1e2428 0%, #1a1e22 100%);
  box-shadow: inset 0 1px 0 rgba(58, 154, 140, 0.1);
}

body[data-theme="socom"] .voice-dot {
  background: #4caf50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

/* ── User panel ──────────────────────────────────── */
body[data-theme="socom"] .user-panel {
  background: #1a1e22;
  border-top: 1px solid #2d4a44;
}

body[data-theme="socom"] .control-btn:hover {
  background: rgba(58, 154, 140, 0.12);
}

/* ── Members sidebar — roster ────────────────────── */
body[data-theme="socom"] .members-sidebar {
  border-left: 1px solid var(--socom-divider-olive);
}

body[data-theme="socom"] .members-header {
  box-shadow: 0 2px 0 #2d4a44;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, var(--socom-header-teal-1) 0%, var(--socom-header-teal-2) 100%);
}

body[data-theme="socom"] .member-category {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  color: #3a9a8c;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-theme="socom"] .member-name {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.85rem;
}

/* ── Auth & server select containers ─────────────── */
body[data-theme="socom"] .auth-container,
body[data-theme="socom"] .server-select-container {
  border: 1px solid #2d4a44;
  box-shadow:
    0 0 16px rgba(58, 154, 140, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.5);
}

body[data-theme="socom"] .auth-logo h1 {
  text-shadow: 0 0 10px rgba(58, 154, 140, 0.3);
}

body[data-theme="socom"] .form-group input[type="text"] {
  border: 1px solid #2d4a44;
  background: #1a1e22;
  font-family: "Share Tech Mono", monospace;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

body[data-theme="socom"] .form-group input[type="text"]:focus {
  border-color: #3a9a8c;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 6px rgba(58, 154, 140, 0.2);
}

body[data-theme="socom"] .form-group label {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  color: #6a8a80;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme="socom"] .file-drop {
  border-color: #2d4a44;
}

body[data-theme="socom"] .file-drop:hover,
body[data-theme="socom"] .file-drop.dragover {
  border-color: #3a9a8c;
  background: rgba(58, 154, 140, 0.06);
}

/* ── Scrollbar — olive dark ──────────────────────── */
body[data-theme="socom"] ::-webkit-scrollbar-thumb {
  background: #2d4a44;
}

body[data-theme="socom"] ::-webkit-scrollbar-thumb:hover {
  background: #3a6a60;
}

body[data-theme="socom"] ::-webkit-scrollbar-track {
  background: #1a1e22;
}

/* ── Screen share overlay ────────────────────────── */
body[data-theme="socom"] .screen-share-header {
  background: #1a1e22;
  border-bottom: 1px solid #2d4a44;
}

/* ── Typing indicator ────────────────────────────── */
body[data-theme="socom"] .typing-dots span {
  background: #3a9a8c;
}

/* ── Theme dropdown — themed ─────────────────────── */
body[data-theme="socom"] .theme-dropdown {
  border: 1px solid #2d4a44;
  box-shadow:
    0 0 10px rgba(58, 154, 140, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

body[data-theme="socom"] .theme-dropdown-header {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Error messages ──────────────────────────────── */
body[data-theme="socom"] .error-msg {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.12);
  font-family: "Share Tech Mono", monospace;
}

/* ── Chat welcome — mission brief ────────────────── */
body[data-theme="socom"] .chat-welcome h3 {
  color: #3a9a8c;
  text-shadow: 0 0 8px rgba(58, 154, 140, 0.3);
}

body[data-theme="socom"] .chat-welcome p {
  color: #6a8a80;
}

/* ── Server cards — mission select ───────────────── */
body[data-theme="socom"] .server-card {
  border: 1px solid #2d4a44;
  background: linear-gradient(180deg, #2a3238 0%, #1e2428 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body[data-theme="socom"] .server-card:hover {
  border-color: #3a9a8c;
  box-shadow: 0 0 12px rgba(58, 154, 140, 0.15);
}

body[data-theme="socom"] .server-card h3 {
  font-size: 0.8rem;
}

/* ── Voice users — squad roster ──────────────────── */
body[data-theme="socom"] .voice-user-name {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
}

body[data-theme="socom"] .voice-user.speaking .voice-user-avatar {
  border-color: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

/* ── Header bar teal gradient — signature SOCOM look ─ */
body[data-theme="socom"] .chat-header,
body[data-theme="socom"] .sidebar-header,
body[data-theme="socom"] .members-header {
  position: relative;
}

body[data-theme="socom"] .chat-header::after,
body[data-theme="socom"] .sidebar-header::after,
body[data-theme="socom"] .members-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #3a9a8c 30%, #3a9a8c 70%, transparent 100%);
  opacity: 0.5;
}