/* assets/theme.css — Dark Professional + Compact */

:root{
  --bg:#0b0f19;
  --panel:#121829;
  --stroke:rgba(255,255,255,.10);
  --txt:#e9eefb;
  --muted:rgba(233,238,251,.72);
  --accent:#2dd4bf;
}

body{ background:var(--bg) !important; color:var(--txt) !important; }
h1,h2,h3,h4,h5,h6{ color:var(--txt) !important; }
.text-muted{ color:var(--muted) !important; }
.container-fluid{ padding-left: 16px !important; padding-right: 16px !important; }

.card{
  background: rgba(18,24,41,.92) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card-body{ padding: 14px 14px 12px !important; }

.nav-tabs{ border-bottom: 1px solid var(--stroke) !important; }
.nav-tabs .nav-link{
  color: rgba(233,238,251,.82) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--stroke) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 6px 10px !important;
  margin-right: 6px !important;
  font-size: 0.92rem;
}
.nav-tabs .nav-link.active{
  color: #0b0f19 !important;
  background: rgba(233,238,251,.95) !important;
  border-color: rgba(233,238,251,.85) !important;
}

label{
  color: rgba(233,238,251,.88) !important;
  font-size: .88rem !important;
  margin-bottom: 4px !important;
}

.form-control{
  background: rgba(255,255,255,.06) !important;
  color: var(--txt) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  height: 36px !important;
}
.form-control:focus{
  border-color: rgba(45,212,191,.55) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,.18) !important;
}

.btn{
  border-radius: 12px !important;
  padding: 8px 10px !important;
  font-weight: 700 !important;
}
.btn-primary{ background: rgba(45,212,191,.95) !important; border: none !important; color:#081016 !important; }

.alert{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--txt) !important;
}

.compact-row{ margin-bottom: 8px !important; }
hr{ border-top: 1px solid var(--stroke) !important; }

/* --- Dash dcc.Dropdown (react-select) dark fix --- */

/* Control (затворен dropdown) */
.Select-control,
.Select-control .Select-value,
.Select-control .Select-value-label,
.Select-control .Select-input > input {
  background: rgba(255,255,255,.06) !important;
  color: #e9eefb !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Placeholder */
.Select-placeholder {
  color: rgba(233,238,251,.65) !important;
}

/* Menu (листата што се отвора) */
.Select-menu-outer,
.Select-menu {
  background: #121829 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Опции */
.Select-option {
  background: transparent !important;
  color: rgba(233,238,251,.92) !important;
}

/* Hover / фокус на опција */
.Select-option.is-focused {
  background: rgba(45,212,191,.18) !important;
  color: #e9eefb !important;
}

/* Селектирана опција */
.Select-option.is-selected {
  background: rgba(45,212,191,.28) !important;
  color: #0b0f19 !important; /* текст темен за контраст */
  font-weight: 700 !important;
}

/* Стрелка и clear */
.Select-arrow-zone, .Select-clear-zone {
  color: rgba(233,238,251,.85) !important;
}

/* Border на control при focus */
.is-focused:not(.is-open) > .Select-control {
  box-shadow: 0 0 0 3px rgba(45,212,191,.18) !important;
  border-color: rgba(45,212,191,.55) !important;
}

/* --- dcc.Dropdown dark options fix --- */
.Select-menu-outer, .Select-menu { background:#121829 !important; border:1px solid rgba(255,255,255,.14) !important; }
.Select-option { color: rgba(233,238,251,.92) !important; background: transparent !important; }
.Select-option.is-focused { background: rgba(45,212,191,.18) !important; }
.Select-option.is-selected { background: rgba(45,212,191,.28) !important; color:#0b0f19 !important; font-weight:700 !important; }
.Select-control, .Select-control * { color:#e9eefb !important; }
.Select-placeholder { color: rgba(233,238,251,.65) !important; }