/* assets/css/theme.css */
/* Modern dark theme (solid, clean, no “glassy” effects) */

:root{
  --bg: #0b1220;
  --surface: #121a2a;
  --surface2:#0f1726;
  --text: #eaf0ff;
  --muted:#aab4d4;
  --border: rgba(255,255,255,0.10);
  --shadow: 0 10px 26px rgba(0,0,0,0.35);
  --radius: 16px;
  --radius-sm: 12px;

  --primary: #3b82f6;  /* modern blue */
  --success: #22c55e;  /* modern green */
  --danger:  #ef4444;
  --warning: #f59e0b;
}

/* Apply always (not only prefers-color-scheme) */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Remove AdminLTE background panels */
.content-wrapper, .right-side, .wrapper{
  background: transparent !important;
}

/* Top bar */
.navbar, .main-header .navbar, .navbar-static-top{
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.navbar a, .navbar .navbar-brand, .navbar-nav > li > a{
  color: var(--text) !important;
}

/* Headings */
h1,h2,h3,.content-header h1{
  color: var(--text) !important;
  letter-spacing: -0.02em;
}

/* Boxes / cards */
.box, .login-box-body, .register-box-body, .small-box, .info-box, .modal-content{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

.box-header, .box-footer{
  background: transparent !important;
  border-color: var(--border) !important;
}

/* Tables */
.table, .table > thead > tr > th, .table > tbody > tr > td{
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
}
.table-striped > tbody > tr:nth-of-type(odd){
  background-color: rgba(255,255,255,0.03) !important;
}

/* Inputs */
.form-control, input, select, textarea{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus{
  border-color: rgba(59,130,246,0.55) !important;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18) !important;
}
::placeholder{ color: rgba(234,240,255,0.45) !important; }

/* ===== Buttons (fix “blue text on blue button”) ===== */
.btn{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

/* Force readable text inside ANY button, even if it contains <a> */
.btn, .btn:hover, .btn:focus, .btn:active,
.btn a, .btn a:hover, .btn a:focus, .btn a:active{
  color: #ffffff !important;
  text-decoration: none !important;
}

.btn-primary{
  background: var(--primary) !important;
  border-color: rgba(59,130,246,0.55) !important;
}
.btn-success{
  background: var(--success) !important;
  border-color: rgba(34,197,94,0.55) !important;
}
.btn-danger{
  background: var(--danger) !important;
  border-color: rgba(239,68,68,0.55) !important;
}
.btn-warning{
  background: var(--warning) !important;
  border-color: rgba(245,158,11,0.55) !important;
}
.btn-default, .btn-info{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

/* Alerts / callouts */
.alert, .callout{
  border-radius: var(--radius) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: var(--shadow) !important;
}

/* Make success message less neon */
.alert-success, .callout.callout-success{
  background: rgba(34,197,94,0.16) !important;
  color: var(--text) !important;
  border-color: rgba(34,197,94,0.25) !important;
}

/* Modals */
.modal-content{
  background: var(--surface) !important;
}
.modal-header, .modal-footer{
  border-color: var(--border) !important;
}
.modal-title{ color: var(--text) !important; }

/* Footer */
.main-footer, footer{
  background: var(--surface2) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

/* Links (outside buttons) */
a{ color: rgba(147,197,253,0.95); }
a:hover{ color: #ffffff; }

/* Images */
img, .img-circle, .profile-user-img{
  border-radius: 14px !important;
}

/* ===== Convert Bootstrap/AdminLTE alerts into toast notifications ===== */

.alert.alert-dismissible{
  position: fixed !important;
  top: 24px;
  right: 24px;
  z-index: 9999;
  min-width: 280px;
  max-width: 380px;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: #121a2a !important; /* matches our dark surface */
  color: #eaf0ff !important;
  margin: 0 !important;
}

/* success/error look */
.alert-success{
  border-left: 4px solid #22c55e !important;
}
.alert-danger, .alert-error{
  border-left: 4px solid #ef4444 !important;
}
.alert-warning{
  border-left: 4px solid #f59e0b !important;
}
.alert-info{
  border-left: 4px solid #3b82f6 !important;
}

/* Close button */
.alert.alert-dismissible .close{
  color: #eaf0ff !important;
  opacity: 0.7 !important;
  text-shadow: none !important;
}
.alert.alert-dismissible .close:hover{
  opacity: 1 !important;
}

/* Smooth entrance */
.alert.alert-dismissible{
  animation: toastSlideIn 0.25s ease forwards;
}
@keyframes toastSlideIn{
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===== Candidate grid: 4 per row ===== */
#candidate_list ul{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
}

#candidate_list ul li{
  margin: 0 !important; /* override old margins */
}

/* Make each candidate item look like a card */
#candidate_list ul li label{
  display: block !important;
  background: #121a2a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  padding: 16px !important;
}

/* Make image responsive and nicer */
#candidate_list img{
  width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  display: block !important;
  margin-top: 10px;
}

/* Candidate name */
#candidate_list .cname{
  display: block !important;
  margin-top: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Remove old left spacing */
#candidate_list .clist{
  margin-left: 0 !important;
}

/* Responsive fallbacks */
@media (max-width: 1200px){
  #candidate_list ul{ grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px){
  #candidate_list ul{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px){
  #candidate_list ul{ grid-template-columns: 1fr !important; }
}

/* Center candidate name under image */
#candidate_list .cname {
  display: block !important;
  text-align: center !important;
  margin-top: 10px !important;
}

/* Make sure image is centered too */
#candidate_list img {
  display: block !important;
  margin: 0 auto !important;
}

/* AI badge */
.ai-badge{
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  background: rgba(59,130,246,0.18);
  border: 1px solid rgba(59,130,246,0.35);
  color: #eaf0ff;
}