/* Tactical Clan Time Bomb HUD Theme */

:root {
  --brand-orange: #FF5E13;
  --brand-amber: #FF9500;
  --brand-red: #E63946;
  --brand-dark: #080C14;
  --brand-card: #101622;
  --brand-border: #1F293D;
  --brand-muted: #8A99AD;
}

body {
  font-family: 'Cairo', sans-serif;
}

.font-cairo {
  font-family: 'Cairo', sans-serif;
}

.font-changa {
  font-family: 'Changa', sans-serif;
}

/* Brand Color Utilities */
.text-brand-orange { color: #FF5E13; }
.bg-brand-orange { background-color: #FF5E13; }
.border-brand-orange { border-color: #FF5E13; }
.hover\:bg-brand-orange:hover { background-color: #FF5E13; }

.text-brand-amber { color: #FF9500; }
.bg-brand-amber { background-color: #FF9500; }
.border-brand-amber { border-color: #FF9500; }
.hover\:bg-brand-amber:hover { background-color: #FF9500; }

.text-brand-red { color: #E63946; }
.bg-brand-red { background-color: #E63946; }
.border-brand-red { border-color: #E63946; }
.hover\:bg-brand-red:hover { background-color: #E63946; }

.text-brand-muted { color: #8A99AD; }
.bg-brand-card { background-color: #101622; }
.border-brand-cardBorder { border-color: #1F293D; }
.bg-brand-cardBorder { background-color: #1F293D; }

/* Opacity & Accent Variants */
.bg-brand-orange\/10 { background-color: rgba(255, 94, 19, 0.1); }
.bg-brand-orange\/15 { background-color: rgba(255, 94, 19, 0.15); }
.bg-brand-orange\/20 { background-color: rgba(255, 94, 19, 0.2); }
.bg-brand-orange\/25 { background-color: rgba(255, 94, 19, 0.25); }
.bg-brand-orange\/30 { background-color: rgba(255, 94, 19, 0.3); }
.hover\:bg-brand-orange\/10:hover { background-color: rgba(255, 94, 19, 0.1); }
.hover\:bg-brand-orange\/20:hover { background-color: rgba(255, 94, 19, 0.2); }
.hover\:bg-brand-orange\/25:hover { background-color: rgba(255, 94, 19, 0.25); }
.hover\:bg-brand-orange\/30:hover { background-color: rgba(255, 94, 19, 0.3); }

.border-brand-orange\/20 { border-color: rgba(255, 94, 19, 0.2); }
.border-brand-orange\/30 { border-color: rgba(255, 94, 19, 0.3); }
.border-brand-orange\/40 { border-color: rgba(255, 94, 19, 0.4); }
.border-brand-orange\/50 { border-color: rgba(255, 94, 19, 0.5); }
.focus\:border-brand-orange:focus { border-color: #FF5E13; }

.shadow-brand-orange\/10 { box-shadow: 0 10px 15px -3px rgba(255, 94, 19, 0.1); }
.shadow-brand-orange\/20 { box-shadow: 0 10px 15px -3px rgba(255, 94, 19, 0.2); }

.from-brand-orange { --tw-gradient-from: #FF5E13 var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 94, 19, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-brand-amber { --tw-gradient-to: #FF9500 var(--tw-gradient-to-position); }
.from-brand-card { --tw-gradient-from: #101622 var(--tw-gradient-from-position); --tw-gradient-to: rgba(16, 22, 34, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

.bg-brand-amber\/10 { background-color: rgba(255, 149, 0, 0.1); }
.bg-brand-amber\/15 { background-color: rgba(255, 149, 0, 0.15); }
.bg-brand-amber\/20 { background-color: rgba(255, 149, 0, 0.2); }
.hover\:bg-brand-amber\/30:hover { background-color: rgba(255, 149, 0, 0.3); }
.border-brand-amber\/30 { border-color: rgba(255, 149, 0, 0.3); }
.border-brand-amber\/40 { border-color: rgba(255, 149, 0, 0.4); }

.bg-brand-red\/20 { background-color: rgba(230, 57, 70, 0.2); }
.border-brand-red\/30 { border-color: rgba(230, 57, 70, 0.3); }
.border-brand-red\/40 { border-color: rgba(230, 57, 70, 0.4); }

.border-brand-cardBorder\/70 { border-color: rgba(31, 41, 61, 0.7); }
.border-brand-cardBorder\/90 { border-color: rgba(31, 41, 61, 0.9); }

/* Custom Tactical Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #080C14;
}
::-webkit-scrollbar-thumb {
  background: #1F293D;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF5E13;
}

/* Navigation button states */
.nav-btn {
  color: #8A99AD;
  border: 1px solid transparent;
}
.nav-btn:hover {
  color: #FFFFFF;
  background-color: rgba(255, 94, 19, 0.08);
}
.nav-btn.active {
  color: #FF5E13;
  background-color: rgba(255, 94, 19, 0.15);
  border-color: rgba(255, 94, 19, 0.35);
  box-shadow: 0 0 15px rgba(255, 94, 19, 0.15);
}

/* Mobile bottom nav states */
.mobile-nav-btn {
  color: #8A99AD;
}
.mobile-nav-btn.active {
  color: #FF5E13;
  transform: translateY(-2px);
}
.mobile-nav-btn.active span:last-child {
  color: #FF5E13;
}

/* Admin Sub Tabs & Image Manager Tabs */
.admin-tab-btn {
  background: #0D121D;
  color: #8A99AD;
  border: 1px solid #1F293D;
}
.admin-tab-btn:hover {
  color: #FFFFFF;
  border-color: #2A3854;
}
.admin-tab-btn.active {
  background: rgba(255, 94, 19, 0.15);
  color: #FF5E13;
  border-color: rgba(255, 94, 19, 0.4);
}

.img-manager-tab {
  background: transparent;
  color: #8A99AD;
  border: 1px solid transparent;
}
.img-manager-tab:hover {
  color: #FFFFFF;
  background: rgba(255, 94, 19, 0.08);
}
.img-manager-tab.active {
  background: rgba(255, 94, 19, 0.2);
  color: #FF9500;
  border-color: rgba(255, 94, 19, 0.4);
}

/* Rank Badge Color Accents */
.rank-badge-Leader {
  background-color: rgba(255, 94, 19, 0.2);
  color: #FF5E13;
  border-color: rgba(255, 94, 19, 0.4);
}
.rank-badge-Manager {
  background-color: rgba(16, 185, 129, 0.2);
  color: #10B981;
  border-color: rgba(16, 185, 129, 0.4);
}
.rank-badge-Supervisor {
  background-color: rgba(168, 85, 247, 0.2);
  color: #A855F7;
  border-color: rgba(168, 85, 247, 0.4);
}
.rank-badge-Trainer {
  background-color: rgba(59, 130, 246, 0.2);
  color: #3B82F6;
  border-color: rgba(59, 130, 246, 0.4);
}
.rank-badge-Member {
  background-color: rgba(148, 163, 184, 0.15);
  color: #94A3B8;
  border-color: rgba(148, 163, 184, 0.3);
}

/* Status Badges */
.status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.status-accepted {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.status-rejected {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Safe touch area optimizations */
button, select, input, textarea {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
input, textarea {
  user-select: auto;
}