/* Otter Academics: Parchment + Gold + Ink */
:root {
  --oa-paper: #F4E1CB;     /* Main parchment bg */
  --oa-paper-light: #FBE9D6; /* Cards */
  --oa-paper-dark: #ECD6BF; /* Subtle shadows */
  --oa-gold: #CA9E5E;       /* Primary accents */
  --oa-gold-dark: #A17943;  /* Hover/active */
  --oa-gold-warm: #DEB87E;  /* Highlights */
  --oa-ink: #2C1B0B;        /* Main text */
  --oa-ink-muted: #654927;  /* Secondary text */
}

/* === GLOBAL / BODY / TYPOGRAPHY === */
body {
  background-color: var(--oa-paper) !important;
  color: var(--oa-ink) !important;
}
.bg-paper{
  background-color: var(--oa-paper) !important;
}
.bg-dark{
  background: linear-gradient(180deg, var(--oa-ink) 0%, #1f1408 75%) !important;
}
a {
  color: var(--oa-gold-dark) !important;
}
a:hover {
  color: var(--oa-ink) !important;
}

/* === CARDS / PANELS === */
.card {
  background-color: var(--oa-paper-light) !important;
  border-color: rgba(44, 27, 11, 0.15) !important;
}
.card-header {
  background-color: rgba(202, 158, 94, 0.12) !important;
  border-bottom-color: rgba(44, 27, 11, 0.12) !important;
  color: var(--oa-ink) !important;
}
.card-body {
  color: var(--oa-ink) !important;
}

/* === BUTTONS / PRIMARY ACTIONS (gold theme) === */
.btn-primary,
.bg-primary {
  background-color: var(--oa-gold) !important;
  border-color: var(--oa-gold) !important;
  color: var(--oa-ink) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.bg-primary:hover {
  background-color: var(--oa-gold-dark) !important;
  border-color: var(--oa-gold-dark) !important;
  color: var(--oa-ink) !important;
}
.text-primary {
  color: var(--oa-gold-dark) !important;
}

/* === SIDEBAR (ink gradient + parchment text) === */
#accordionSidebar,
.sidebar-dark {
  background: linear-gradient(180deg, var(--oa-ink) 0%, #1f1408 75%) !important;
}
.sidebar-brand,
.sidebar-dark .nav-item .nav-link {
  color: rgba(251, 233, 214, 0.92) !important;
}
.sidebar-dark .nav-item .nav-link:hover {
  background-color: rgba(251, 233, 214, 0.12) !important;
  color: #FFFFFF !important;
}
.sidebar-dark .nav-item.active .nav-link {
  background-color: rgba(202, 158, 94, 0.25) !important;
  color: #FFFFFF !important;
}
.sidebar-dark hr.sidebar-divider {
  border-top-color: rgba(251, 233, 214, 0.15) !important;
}
.sidebar-dark .sidebar-heading {
  color: rgba(251, 233, 214, 0.75) !important;
}

/* === TOPBAR / NAVBAR (light parchment) === */
.navbar-top,
.topbar {
  background-color: var(--oa-paper-light) !important;
  border-bottom: 1px solid rgba(44, 27, 11, 0.12) !important;
}
.navbar-brand,
.topbar .navbar-brand {
  color: var(--oa-ink) !important;
}
.topbar .topbar-divider {
  border-left-color: rgba(44, 27, 11, 0.15) !important;
}

/* === TABLES / FORMS === */
.table {
  color: var(--oa-ink) !important;
  background-color: var(--oa-paper-light) !important;
}
.table thead th {
  border-bottom-color: rgba(44, 27, 11, 0.2) !important;
  color: var(--oa-ink-muted) !important;
}
.form-control,
.form-select {
  background-color: #FFFFFF !important;
  border-color: rgba(44, 27, 11, 0.2) !important;
  color: var(--oa-ink) !important;
}
.form-control:focus {
  border-color: var(--oa-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(202, 158, 94, 0.25) !important;
}

/* === ALERTS / BORDERS === */
.border-left-primary {
  border-left-color: var(--oa-gold) !important;
}
.alert-primary {
  background-color: rgba(202, 158, 94, 0.12) !important;
  border-color: var(--oa-gold) !important;
  color: var(--oa-ink) !important;
}

:root {
  /* add to your existing vars */
  --oa-danger: #8B1E11;
  --oa-danger-dark: #6D160C;
  --oa-danger-text: #FBE9D6;
}

/* Buttons with .btn-danger */
.btn-danger,
.bg-danger {
  background-color: var(--oa-danger) !important;
  border-color: var(--oa-danger) !important;
  color: var(--oa-danger-text) !important;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--oa-danger-dark) !important;
  border-color: var(--oa-danger-dark) !important;
  color: var(--oa-danger-text) !important;
}

/* Optional: outline style */
.btn-outline-danger {
  color: var(--oa-danger) !important;
  border-color: var(--oa-danger) !important;
  background-color: transparent !important;
}
.btn-outline-danger:hover {
  background-color: var(--oa-danger) !important;
  color: var(--oa-danger-text) !important;
}

:root {
  /* add to existing vars */
  --oa-info: #A17943;      /* Bronze-gold for "info" buttons */
  --oa-info-dark: #7E5C32;
}

/* Info buttons → branded bronze */
.btn-info,
.bg-info {
  background-color: var(--oa-info) !important;
  border-color: var(--oa-info) !important;
  color: var(--oa-ink) !important;  /* Dark text for readability */
}

.btn-info:hover,
.btn-info:focus {
  background-color: var(--oa-info-dark) !important;
  border-color: var(--oa-info-dark) !important;
  color: var(--oa-ink) !important;
}

.btn-info.btn-circle i {
  color: var(--oa-ink) !important;  /* Icon stays dark */
}

/* Outline variant if you use it */
.btn-outline-info {
  color: var(--oa-info) !important;
  border-color: var(--oa-info) !important;
}
.btn-outline-info:hover {
  background-color: var(--oa-info) !important;
  color: var(--oa-ink) !important;
}

/* Success/Complete badges → muted gold */
.badge-success,
.btn-success {
  background-color: rgba(202, 158, 94, 0.25) !important;  /* Subtle gold tint */
  border-color: rgba(202, 158, 94, 0.4) !important;
  color: var(--oa-ink-muted) !important;  /* Darker ink */
}
.badge-success:hover {
  background-color: rgba(202, 158, 94, 0.35) !important;
}

/* Button groups → tighter spacing */
.btn-group {
  margin: 0.25rem !important;
}

/* XLSX badges → green-gold */
.badge-warning,
.btn-warning {  /* Repurpose for file types */
  background-color: rgba(161, 121, 67, 0.3) !important;
  color: var(--oa-ink) !important;
}

/* Base nav-pills style: gold text */
.nav-pills .nav-link {
  color: var(--oa-gold) !important;        /* inactive text */
  border-radius: 999px;                    /* pill shape */
  padding: 0.35rem 0.9rem;
}

/* Active pill: solid gold with ink text */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--oa-gold) !important;
  color: var(--oa-ink) !important;
}

/* Icons inside pills: inherit color */
.nav-pills .nav-link i {
  margin-right: 0.25rem;
  color: inherit !important;
}

/* Table body: parchment rows, subtle separators */
.table {
  background-color: var(--oa-paper-light) !important;
  color: var(--oa-ink) !important;
  border-color: rgba(44, 27, 11, 0.12) !important;
}

.table tbody tr:nth-child(odd) {
  background-color: rgba(251, 233, 214, 0.7) !important;  /* soft stripe */
}

.table tbody tr:nth-child(even) {
  background-color: rgba(244, 225, 203, 0.9) !important;
}

.table td,
.table th {
  border-top: 1px solid rgba(44, 27, 11, 0.08) !important;
  vertical-align: middle;
}

/* thead-dark → ink band with gold text */
.thead-dark th {
  background-color: var(--oa-ink) !important;
  color: var(--oa-gold-warm) !important;
  border-color: rgba(244, 225, 203, 0.25) !important;
  font-weight: 600;
}

/* First column (your $keywords) in magenta accent, but softer */
.table td:first-child {
  color: #b9457d;     /* adjust if you want slightly duller/warmer */
  white-space: nowrap;
}

.btn-secondary {
  background-color: #654927 !important;    /* muted ink */
  border-color: #654927 !important;
  color: #FBE9D6 !important;               /* light parchment text */
}

.btn-secondary:hover {
  background-color: #321E0B !important;    /* darker ink */
  border-color: #321E0B !important;
  color: #FFFFFF !important;
}