/* assets/style.css
   Glassmorphism + deep blue + golden accent
   Keep this file at assets/style.css
*/

:root{
  --bg1:#04102a;
  --bg2:#0b2a59;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.12);
  --gold: #f4b400;
  --gold-dark: #c38e00;
  --muted: rgba(255,255,255,0.78);
  --radius:14px;
}

body{
  margin:0;
  min-height:100vh;
  font-family: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #ffffff;
  background: linear-gradient(135deg,var(--bg1) 0%, var(--bg2) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:22px 18px;
}

/* Gold button */
.btn-gold{
  background: linear-gradient(90deg,var(--gold) 0%, var(--gold-dark) 100%);
  color:#07112a;
  border: none;
  box-shadow: 0 6px 18px rgba(196,142,0,0.14);
}
.btn-gold:hover{ filter:brightness(.95); transform: translateY(-1px); }

/* glass panel reusable */
.glass-panel{
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(2,6,23,0.5);
  backdrop-filter: blur(10px) saturate(120%);
  padding:12px;
}

/* text colors */
.text-gold { color: var(--gold); }
.text-muted { color: var(--muted); }

/* controls */
.form-select, .form-control {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 10px;
}
.form-select:focus, .form-control:focus {
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  border-color: rgba(244,180,0,0.9);
}

/* results card (single or few) */
.result-card {
  display:flex;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  box-shadow: 0 20px 60px rgba(2,6,23,0.45);
  margin-bottom:12px;
}
.result-avatar {
  width:72px;height:72px;border-radius:12px;background:linear-gradient(90deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;color:#07112a;font-weight:800;font-size:20px;
}
.result-main{flex:1}
.result-name{font-weight:700;font-size:18px}
.result-meta{color:var(--muted);font-size:13px;margin-top:6px}
.result-stats{display:flex;gap:12px;align-items:center;margin-left:auto}
.stat{background:rgba(255,255,255,0.02);padding:8px;border-radius:8px;text-align:center;min-width:80px}
.stat .title{font-size:12px;color:var(--muted)} .stat .value{font-weight:700}

/* discipline list items */
.discipline-item{
  background: rgba(255,255,255,0.02);
  border-radius:10px;
  padding:8px;
  margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center;
}
.disc-left{max-width:70%}
.disc-date{font-weight:700;color:var(--gold)}
.disc-case{margin-top:6px;color:#fff}
.disc-meta{color:var(--muted);font-size:13px}

/* modal content tweaks */
.modal-content{background:transparent;border:none}
.modal-body{padding-top:0}
.modal-footer{background:transparent;border-top:0}

/* small responsiveness */
@media (max-width:768px){
  .result-stats { display:none; }
  .result-avatar { width:60px;height:60px;font-size:18px; }
  .result-name{font-size:16px}
}
@media (max-width:480px){
  body{padding:12px 8px;}
}
/* Ensure dropdowns and tabs are clearly visible on dark background */
.nav-tabs .nav-link,
.form-select,
.form-control,
.nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-tabs .nav-link.active {
  color: #f4b400 !important; /* golden for active tab */
  border-bottom: 3px solid #f4b400;
  background: rgba(255, 255, 255, 0.15);
}

/* Dropdown options */
option {
  background: #001f3f;
  color: #fff;
}

/* Labels and placeholder text */
label,
::placeholder {
  color: rgba(255, 255, 255, 0.8) !important;
}
/* Scrollbar styling for better visibility */
.btn-primary {
  background-color: #f4b400;
  border: none;
  color: #001f3f;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #ffd84d;
  color: #001f3f;
}

input,
select {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
body {
  background: linear-gradient(135deg, #001f3f 0%, #003366 100%);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
}
/* ===== FILTERS + SEARCH AREA ===== */

.filter-section {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.filter-section h5 {
  color: #f4b400; /* golden title */
  font-weight: 600;
  margin-bottom: 1rem;
}

.filter-section label {
  color: #fff;
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.filter-section select,
.filter-section input {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
}

.filter-section select:focus,
.filter-section input:focus {
  border-color: #f4b400;
  box-shadow: 0 0 0 0.2rem rgba(244, 180, 0, 0.25);
  background: rgba(255, 255, 255, 0.15);
}

/* Tabs clearly visible */
.nav-tabs {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-tabs .nav-link {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-right: 0.3rem;
}

.nav-tabs .nav-link.active {
  color: #f4b400 !important;
  font-weight: 600;
  border-bottom: 3px solid #f4b400;
  background: rgba(255, 255, 255, 0.15);
}
.nav-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #f4b400 !important;
}
.btn-gold {
  background: #f4b400;
  color: #001f3f;
  font-weight: 600;
  border: none;
}
.btn-gold:hover {
  background: #ffd84d;
  color: #001f3f;
}
.glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-panel:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.text-gold { color: #f4b400 !important; }
body { color: #fff; font-family: 'Poppins', sans-serif; background: linear-gradient(135deg,#001f3f,#003366); }
/* Scrollbar styling for better visibility */
body.bg-deepblue {
  background: linear-gradient(135deg, #001B3A, #002852, #001122);
  color: #fff;
}

.text-gold {
  color: #FFD700 !important;
}

.btn-gold {
  background-color: #FFD700;
  color: #001B3A;
  border: none;
}
.btn-gold:hover {
  background-color: #ffea7a;
}

.btn-outline-gold {
  border: 1px solid #FFD700;
  color: #FFD700;
  background: transparent;
}
.btn-outline-gold:hover {
  background-color: rgba(255, 215, 0, 0.1);
}

.border-gold {
  border-color: rgba(255, 215, 0, 0.4) !important;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.glass-subpanel {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

.nav-tabs .nav-link {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}

.nav-tabs .nav-link.active {
  color: #FFD700 !important;
  border-bottom: 2px solid #FFD700;
  background: rgba(255, 255, 255, 0.05);
}
.nav-tabs .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFD700 !important;
}
.text-gold {
  color: #FFD700 !important;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

.fw-semibold {
  font-weight: 600 !important;
}
.text-gold {
  color: #E6C200 !important;
  text-shadow: 0 0 8px rgba(230, 194, 0, 0.5);
}
body {
  background: linear-gradient(135deg, #001f3f 0%, #003366 100%);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
}