/* ============================================================
   ESEA-inspired color palette
   ============================================================ */
:root {
  --esea-green:        #3d9900;
  --esea-green-hover:  #4db800;
  --esea-green-muted:  #2d7300;
  --esea-green-dim:    rgba(61,153,0,.15);

  --esea-bg:           #111111;
  --esea-bg-card:      #1e1e1e;
  --esea-bg-elevated:  #252525;
  --esea-bg-input:     #1a1a1a;

  --esea-border:       #2d2d2d;
  --esea-border-hover: #3d3d3d;

  --esea-text:         #ffffff;
  --esea-text-muted:   #7a7a7a;
  --esea-text-dim:     #4a4a4a;

  --esea-danger:       #c0392b;
}

/* ============================================================
   Base
   ============================================================ */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  background-color: var(--esea-bg);
  color: var(--esea-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

a {
  color: var(--esea-green);
}
a:hover {
  color: var(--esea-green-hover);
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  background-color: #0a0a0a !important;
  border-bottom: 2px solid var(--esea-green) !important;
  padding: .6rem 0;
}

.navbar-brand {
  color: var(--esea-green) !important;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 1.1rem;
}
.navbar-brand:hover { color: var(--esea-green-hover) !important; }

.nav-link {
  color: #cccccc !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .4rem .75rem !important;
  transition: color .15s;
}
.nav-link:hover,
.nav-link:focus {
  color: var(--esea-green) !important;
}
.nav-link.active { color: var(--esea-green) !important; }

/* Admin dropdown trigger */
.nav-link.admin-link { color: var(--esea-green) !important; }

/* Dropdown */
.dropdown-menu {
  background-color: #0d0d0d;
  border: 1px solid var(--esea-border);
  border-top: 2px solid var(--esea-green);
  border-radius: 0;
  min-width: 180px;
}
.dropdown-item {
  color: #cccccc;
  font-size: .875rem;
  padding: .5rem 1rem;
}
.dropdown-item:hover {
  background-color: var(--esea-green-dim);
  color: var(--esea-green);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-esea {
  background-color: var(--esea-green);
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  padding: .45rem 1.1rem;
  transition: background-color .15s;
}
.btn-esea:hover {
  background-color: var(--esea-green-hover);
  color: #fff;
}
.btn-esea-outline {
  background-color: transparent;
  color: var(--esea-text);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: 1px solid #555;
  border-radius: 2px;
  padding: .45rem 1.1rem;
  transition: border-color .15s, color .15s;
}
.btn-esea-outline:hover {
  border-color: var(--esea-green);
  color: var(--esea-green);
}

/* Override Bootstrap focus ring */
.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 2px var(--esea-green-dim);
  border-color: var(--esea-green);
  outline: none;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background-color: var(--esea-bg-card);
  border: 1px solid var(--esea-border);
  border-radius: 3px;
}
.card-header {
  background-color: var(--esea-bg-elevated);
  border-bottom: 1px solid var(--esea-border);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--esea-text-muted);
}
.card-footer {
  background-color: var(--esea-bg-elevated);
  border-top: 1px solid var(--esea-border);
}

/* Stat card highlight */
.card-stat h3 {
  color: var(--esea-green);
  font-size: 2rem;
  font-weight: 700;
}

/* ============================================================
   Tables
   ============================================================ */
.table {
  color: var(--esea-text);
  border-color: var(--esea-border);
}
.table > thead {
  background-color: var(--esea-bg-elevated);
  border-bottom: 2px solid var(--esea-green);
}
.table > thead th {
  color: var(--esea-green);
  font-size: .75rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 600;
  padding: .6rem .75rem;
}
.table > tbody > tr {
  border-color: var(--esea-border);
}
.table-hover > tbody > tr:hover {
  background-color: var(--esea-bg-elevated);
  color: var(--esea-text);
}

/* ============================================================
   Forms
   ============================================================ */
.form-control,
.form-select {
  background-color: var(--esea-bg-input);
  color: var(--esea-text);
  border: 1px solid var(--esea-border);
  border-radius: 2px;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--esea-bg-input);
  color: var(--esea-text);
  border-color: var(--esea-green);
}
.form-control::placeholder { color: var(--esea-text-dim); }
.form-text { color: var(--esea-text-muted); }
.form-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--esea-text-muted);
}

/* ============================================================
   Badges
   ============================================================ */
.badge-esea-live {
  background-color: var(--esea-green);
  color: #fff;
}
.badge-esea-pending {
  background-color: transparent;
  color: var(--esea-text-muted);
  border: 1px solid var(--esea-border);
}
.badge-esea-finished {
  background-color: var(--esea-bg-elevated);
  color: var(--esea-text-muted);
}

/* ============================================================
   List group
   ============================================================ */
.list-group-item {
  background-color: var(--esea-bg-card);
  color: var(--esea-text);
  border-color: var(--esea-border);
}
.list-group-item-action:hover {
  background-color: var(--esea-bg-elevated);
  color: var(--esea-text);
}

/* ============================================================
   Modals
   ============================================================ */
.modal-content {
  background-color: var(--esea-bg-card);
  border: 1px solid var(--esea-border);
  border-top: 3px solid var(--esea-green);
  border-radius: 0;
}
.modal-header { border-bottom-color: var(--esea-border); }
.modal-footer { border-top-color: var(--esea-border); }

/* ============================================================
   Footer
   ============================================================ */
footer {
  background-color: #0a0a0a;
  border-top: 1px solid var(--esea-border) !important;
  color: var(--esea-text-muted);
}

/* ============================================================
   Alerts
   ============================================================ */
.alert-danger {
  background-color: rgba(192,57,43,.15);
  border-color: var(--esea-danger);
  color: #e74c3c;
}

/* ============================================================
   Pagination
   ============================================================ */
.page-link {
  background-color: var(--esea-bg-card);
  border-color: var(--esea-border);
  color: var(--esea-text-muted);
}
.page-link:hover {
  background-color: var(--esea-bg-elevated);
  border-color: var(--esea-green);
  color: var(--esea-green);
}
.page-item.active .page-link {
  background-color: var(--esea-green);
  border-color: var(--esea-green);
  color: #fff;
}

/* ============================================================
   Utility
   ============================================================ */
.text-esea  { color: var(--esea-green) !important; }
.text-muted { color: var(--esea-text-muted) !important; }
.border-esea { border-color: var(--esea-border) !important; }
.bg-card    { background-color: var(--esea-bg-card) !important; }
.font-mono  { font-family: 'Consolas', 'Courier New', monospace; }

/* Section label */
.section-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--esea-text-muted);
  margin-bottom: .75rem;
}