/* ===========================================================
   VNSGU Thesis Evaluation System — theme
   Palette: black / grey / white, with a blue accent, and
   standard Bootstrap semantic colors for action buttons.
   Layered on top of Bootstrap 5.
   =========================================================== */

:root {
  --ink: #16171a;
  --ink-2: #0f1012;
  --charcoal: #24262b;
  --slate: #4b5563;
  --ash: #6b7280;
  --silver: #9ca3af;
  --smoke: #e5e7eb;
  --fog: #f4f5f7;
  --line: #eceef1;
  --blue: #0d6efd;      /* Bootstrap's own primary blue - kept standard on purpose */
  --blue-dark: #0b5ed7;
  --radius: 12px;
}

html, body {
  background: var(--fog);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1f2328;
}

.bg-page { background: var(--fog); }

h1, h2, h3, h4, h5, .fw-semibold { letter-spacing: -0.01em; }

/* ---------- Navbar ---------- */
.navbar.bg-black {
  background: linear-gradient(180deg, var(--ink), var(--ink-2)) !important;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(13,110,253,.16); border: 1px solid rgba(13,110,253,.35);
  color: #cfe0ff; font-size: 1rem;
}
.brand-mark-sm { width: 32px; height: 32px; font-size: .95rem; }
.navbar .nav-link { color: rgba(255,255,255,.72); font-weight: 500; position: relative; }
.navbar .nav-link:hover { color: #fff; }
.navbar .nav-link.active { color: #fff; }
.navbar .nav-link.active::after {
  content: ''; position: absolute; left: .5rem; right: .5rem; bottom: -2px;
  height: 2px; background: var(--blue); border-radius: 2px;
}

/* ---------- Public / expert top bar ---------- */
.page-topbar {
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}

/* ---------- Auth (login / accept-reject) background ---------- */
.bg-auth {
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(13,110,253,.12), transparent 60%),
    linear-gradient(160deg, var(--ink-2), #2b2e35 55%, var(--ink));
}
.auth-logo {
  width: 58px; height: 58px; border-radius: 16px;
  background: rgba(13,110,253,.14); border: 1px solid rgba(13,110,253,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #cfe0ff;
}
.auth-card {
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15);
}

/* ---------- Cards ---------- */
.card { border-color: var(--line); border-radius: var(--radius); }
.card-soft { box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05); }
.section-card { border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }

/* ---------- Buttons ----------
   Action buttons use Bootstrap's own semantic colors, unmodified:
   btn-primary (blue) for the main action on a page, btn-success (green) for
   Accept, btn-danger (red) for Reject/irreversible actions, btn-secondary /
   btn-outline-secondary (grey) for View/Edit/Cancel. Only shape, weight, and
   hover-lift are themed here - never the colors themselves. */
.btn { border-radius: 9px; font-weight: 600; letter-spacing: .1px; transition: all .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary:hover, .btn-success:hover, .btn-danger:hover { box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.btn-outline-secondary { border-color: #d7dae0; color: #3a3f47; }
.btn-outline-secondary:hover { background: #f0f1f3; color: #111; border-color: #c7cbd2; }
.btn-outline-light:hover { color: var(--ink); }
.btn-lg { border-radius: 10px; }

/* ---------- Badges (muted, still color-coded for quick scanning) ---------- */
.badge { font-weight: 600; padding: .45em .75em; letter-spacing: .02em; }
.badge-pending  { background: #f2e8d5; color: #7a5b12; }
.badge-accepted { background: #dfeee3; color: #256035; }
.badge-rejected { background: #f6dede; color: #8a2b2b; }
.badge-submitted{ background: #e3e6ea; color: #24262b; }
.badge-closed   { background: #23262b; color: #fff; }
.badge-date_informed { background: #e3e6ea; color: #24262b; }

/* ---------- Tables ---------- */
.table-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table thead th {
  background: var(--ink); color: #fff; font-weight: 600;
  border: none; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase;
}
.table tbody tr:hover { background: #f8f8f9; }
.table td, .table th { vertical-align: middle; border-color: var(--line); }

/* ---------- Forms ---------- */
label.form-label { font-weight: 600; font-size: .88rem; color: #2b2e33; }
.form-control, .form-select {
  border-radius: 8px; border-color: #dde0e5; padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.form-hint { font-size: .82rem; color: var(--ash); }

/* ---------- Notices ---------- */
.alert { border-radius: 10px; border: 1px solid transparent; }
.alert-success { background: #eaf5ec; color: #235a34; border-color: #d4ebd8; }
.alert-danger  { background: #fbeaea; color: #7d2222; border-color: #f3d3d3; }
.alert-warning-soft { background: #fdf3e3; color: #7a5b12; border-color: #f6e3bd; }

/* ---------- Section headers ---------- */
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.divider { border-top: 1px solid var(--line); margin: 1.75rem 0; }

/* ---------- Misc ---------- */
code, .code-inline { background: #f0f1f3; padding: .1em .4em; border-radius: 5px; font-size: .9em; }
a { color: var(--blue-dark); }
a:hover { color: var(--blue); }