/* iFairy Unified Theme (dark) - shared by frontend + admin */

* { outline: none; }
html { overflow-x: hidden; }

:root{
  --if-blue: #1995F0;
  --if-blue-2: #0072C6;
  --if-purple: #D023E8;

  --if-bg: #000000;
  --if-surface: #0b132b;
  --if-surface-2: #0f1d3a;
  --if-surface-3: #0a1226;
  --if-border: rgba(255,255,255,0.10);
  --if-border-2: rgba(255,255,255,0.16);
  --if-text: #ffffff;
  --if-muted: rgba(234,242,255,0.72);
  --if-muted-2: rgba(234,242,255,0.55);
  --if-shadow: 0 18px 60px rgba(0,0,0,0.50);
  --if-shadow-soft: 0 12px 30px rgba(0,0,0,0.35);
  --if-radius: 14px;
}

html, body{ background: var(--if-bg); }
body{
  overflow-x: hidden;
  background: var(--if-bg);
  color: var(--if-text);
  font-family: 'Nunito Sans', sans-serif;
  padding-right: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* Shared primitives */
.card{
  background: linear-gradient(180deg, rgba(15,29,58,0.92) 0%, rgba(11,19,43,0.92) 100%);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
  box-shadow: var(--if-shadow-soft);
}
.card:hover{
  border-color: rgba(25,149,240,0.30);
  box-shadow: var(--if-shadow);
}
.text-muted{ color: var(--if-muted-2) !important; }
a{ color: rgba(217,239,255,0.92); }
a:hover{ color: var(--if-text); }
hr{ color: rgba(255,255,255,0.18); }
.border, .border-bottom, .border-top{ border-color: rgba(255,255,255,0.10) !important; }

.btn{ border-radius: 10px; }
.btn-primary{
  border: 0;
  background: linear-gradient(180deg, var(--if-blue) 0%, var(--if-blue-2) 100%);
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-outline-primary{
  color: var(--if-blue);
  border-color: rgba(25,149,240,0.6);
}
.btn-outline-primary:hover{
  background: rgba(25,149,240,0.12);
  border-color: rgba(25,149,240,0.75);
  color: var(--if-text);
}

.form-control, .form-select, .form-floating>.form-control, .form-floating>.form-select{
  background: rgba(10,18,38,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--if-text);
}
.form-control::placeholder{ color: rgba(234,242,255,0.45); }
.form-select option{ color: #0a1020; }
.form-control:focus, .form-select:focus{
  background: rgba(10,18,38,0.92);
  border-color: rgba(25,149,240,0.55);
  box-shadow: 0 0 0 0.25rem rgba(25,149,240,0.20);
  color: var(--if-text);
}
.form-floating>label{
  color: rgba(234,242,255,0.60) !important;
  font-weight: 700;
  opacity: 1 !important;
}

.table{ color: var(--if-text); }
.table td, .table th{ border-color: rgba(255,255,255,0.10) !important; }
.table thead th{ color: var(--if-muted); }
.table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg: rgba(255,255,255,0.03);
  color: var(--if-text);
}

.modal-content{
  background: linear-gradient(180deg, rgba(15,29,58,0.98) 0%, rgba(11,19,43,0.98) 100%);
  color: var(--if-text);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius);
}
.modal-header, .modal-footer{ border-color: rgba(255,255,255,0.10) !important; }

/* CodeMirror (JSON editors) */
body .CodeMirror{
  background: rgba(10,18,38,0.92) !important;
  color: var(--if-text) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px;
}
body .CodeMirror-gutters{
  background: rgba(10,18,38,0.92) !important;
  border-right: 1px solid rgba(255,255,255,0.10) !important;
}
body .CodeMirror-linenumber{ color: rgba(255,255,255,0.55) !important; }
body .CodeMirror-cursor{ border-left: 1px solid rgba(255,255,255,0.75) !important; }
body .CodeMirror-selected{ background: rgba(25,149,240,0.25) !important; }

/* Admin */
.navbar-custom{
  background: linear-gradient(180deg, rgba(11,19,43,0.92) 0%, rgba(5,11,26,0.92) 100%) !important;
  border-bottom: 1px solid rgba(25,149,240,0.28) !important;
  backdrop-filter: blur(10px);
}
#sidebarMenu{
  background: rgba(6,10,22,0.88) !important;
  border-right: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
}
.sidebar .nav-link{
  color: var(--if-muted) !important;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 10px 6px 10px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sidebar .nav-link:hover{
  background: rgba(25,149,240,0.10) !important;
  color: var(--if-text) !important;
  transform: translateX(2px);
}
.sidebar .nav-link.active{
  color: var(--if-text) !important;
  background: linear-gradient(180deg, rgba(25,149,240,0.16) 0%, rgba(0,114,198,0.12) 100%) !important;
  border: 1px solid rgba(25,149,240,0.28);
}
.btn-save-absolute{
  background: linear-gradient(180deg, var(--if-purple) 0%, #7009E6 100%) !important;
  box-shadow: 2px 10px 28px rgba(208,35,232,0.35);
}

/* Frontend header/menu */
header{
  background: linear-gradient(180deg, rgba(11,19,43,0.92) 0%, rgba(5,11,26,0.92) 100%);
  border-bottom: 1px solid rgba(25,149,240,0.28);
}
.primary-menu li a{ color: var(--if-text) !important; }
.primary-menu li a:hover{ color: rgba(217,239,255,0.95) !important; }
.primary-menu li a.nav-link-effect::before{ background-color: rgba(217,239,255,0.65); }

/* Frontend cards/chat */
.card-ai, .chat-background, .share-chat{
  background: linear-gradient(180deg, rgba(15,29,58,0.92) 0%, rgba(11,19,43,0.92) 100%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--if-shadow-soft);
}
.card-ai:hover{ box-shadow: var(--if-shadow); }
.card-ai-name h3{ color: rgba(217,239,255,0.95) !important; }
.card-ai-job span{ color: rgba(234,242,255,0.70) !important; }
.chat-frame{ background: url(../img/chat-pattern.png) rgba(6,10,22,0.85) !important; }
.message-container{ background: rgba(10,18,38,0.72) !important; }
.thread-user .message-container{ background: rgba(25,149,240,0.16) !important; }
.message-container .message-text{ color: var(--if-text) !important; }