/* Custom styles for Social Media Multi-Poster - CATIF White Theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --primary-navy: #071C45;
  --secondary-navy: #0A2A66;
  --primary-accent: #0284C7;
  --catif-yellow: #FFD21E;
  --primary-gradient: linear-gradient(135deg, #0284C7 0%, #10B981 100%);
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

code, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Glassmorphism & Cards - White Theme */
.glass-panel {
  background: #FFFFFF !important;
  backdrop-filter: blur(16px);
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
  color: #0F172A !important;
}

.card-hover {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
  border-color: #0284C7 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(2, 132, 199, 0.15) !important;
}

/* Auth / Login Screen White Theme */
#auth-screen {
  background: #F8FAFC !important;
}
#auth-screen > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12) !important;
}
#auth-screen h2 {
  color: #0F172A !important;
}
#auth-screen input {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* Text Overrides for White Theme */
.text-slate-100, .text-slate-200, .text-slate-300 {
  color: #1E293B !important;
}
.text-slate-400 {
  color: #64748B !important;
}
.text-white {
  color: #0F172A !important;
}
button .text-white, a.bg-gradient-to-r .text-white, button.bg-gradient-to-r .text-white {
  color: #FFFFFF !important;
}

/* Background Card Overrides */
.bg-dark-surface,
.bg-slate-900\/50, .bg-slate-900\/80, .bg-slate-800\/80, .bg-slate-800, .bg-\[\#1E293B\], .bg-\[\#1E293B\]\/80, .bg-\[\#0F172A\] {
  background-color: #FFFFFF !important;
}
.bg-dark-card {
  background-color: #F8FAFC !important;
}
.bg-dark-hover:hover {
  background-color: #F1F5F9 !important;
}
.border-dark-border,
.border-slate-700, .border-slate-700\/60, .border-slate-800, .border-slate-800\/80 {
  border-color: #E2E8F0 !important;
}

/* Navigation Tabs & Toolbar */
.nav-tab.bg-\[\#071C45\], .nav-tab.bg-emerald-500, .nav-mobile-btn.bg-\[\#071C45\], .nav-mobile-btn.bg-emerald-500 {
  background-color: #071C45 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(7, 28, 69, 0.15) !important;
}
.nav-tab:not(.bg-\[\#071C45\]):not(.bg-emerald-500) {
  color: #64748B !important;
}
.nav-tab:not(.bg-\[\#071C45\]):not(.bg-emerald-500):hover {
  color: #0F172A !important;
  background-color: #F1F5F9 !important;
}

.prev-platform-tab.bg-\[\#071C45\], .prev-platform-tab.bg-emerald-500 {
  background-color: #071C45 !important;
  color: #FFFFFF !important;
}

/* Channel Selection Cards */
.channel-card {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
.channel-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Form Inputs */
input, textarea, select {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #059669 !important;
  outline: none !important;
}

/* Phone Mockup Frame */
.phone-mockup-frame {
  width: 330px;
  height: 650px;
  border-radius: 46px;
  border: 10px solid #CBD5E1;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  background: #000000;
}

/* Dynamic Island */
.phone-island {
  width: 90px;
  height: 22px;
  background: #000000;
  border-radius: 20px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.phone-home-bar {
  width: 120px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
}

/* Phone Screen Scoped Social Text */
#phone-screen, #phone-screen * {
  color: #FFFFFF !important;
}
#phone-screen .text-slate-300 {
  color: #CBD5E1 !important;
}
#phone-screen .text-slate-400 {
  color: #94A3B8 !important;
}
#phone-screen .text-slate-500 {
  color: #64748B !important;
}
#phone-screen .text-black,
#phone-screen button.bg-white {
  color: #000000 !important;
}
#phone-screen strong {
  color: #FFFFFF !important;
}

/* Smooth Transitions */
.transition-smooth {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   Standardized Status Badges & Action Buttons
   ========================================== */
.status-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 42px;
  padding: 0 1rem;
  border-radius: 9999px;
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: all 0.15s ease-in-out;
  border: 1px solid transparent;
  line-height: 1;
}

.status-badge-admin {
  background-color: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

.status-badge-accounts {
  background-color: #EEF2FF;
  border-color: #C7D2FE;
  color: #312E81;
}

.status-badge-plan {
  background-color: #FEF3C7;
  border-color: #FDE68A;
  color: #78350F;
}

.status-badge-oauth {
  background-color: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}

.action-btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #475569;
  flex-shrink: 0;
  transition: all 0.15s ease-in-out;
}
.action-btn-circle:hover {
  background-color: #F1F5F9;
  color: #0F172A;
  border-color: #94A3B8;
  transform: translateY(-1px);
}
.action-btn-circle.btn-logout:hover {
  background-color: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}

/* Hide scrollbars for clean badge slider */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}