/* TribeConnect — Quad design system.
 * Warm paper palette, forest+honey accents, serif headings, Inter for UI.
 * Loaded AFTER per-page styles; uses !important to override inline gradients
 * and dark legacy theming.
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper:        #FBF9F4 !important;
  --panel:        #FFFFFF !important;
  --edge:         #F4F0E6 !important;
  --edge-2:       #EDE6D6 !important;
  --ink:          #1F2937 !important;
  --ink-2:        #3A3F4B !important;
  --muted:        #7C6F5B !important;
  --line:         #E5DECC !important;
  --line-d:       #D9D2C2 !important;
  --forest:       #2F4F4F !important;
  --forest-deep:  #26403F !important;
  --forest-soft:  rgba(47, 79, 79, 0.08) !important;
  --honey:        #A88758 !important;
  --honey-deep:   #7C6238 !important;
  --terracotta:   #B8714A !important;
  --ok:           #4F6B4A !important;
  --warn:         #C26A3F !important;
  --err:          #9B3A2E !important;

  --serif:   'Newsreader', Georgia, serif !important;
  --display: 'EB Garamond', 'Newsreader', serif !important;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, monospace !important;
}

* { box-sizing: border-box; }

html, body {
  background: #FBF9F4 !important;
  color: #1F2937 !important;
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased !important;
  min-height: 100vh !important;
  /* neutralize body flex centering / overflow hacks from login templates */
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  position: static !important;
  overflow: auto !important;
}

/* warm paper texture — subtle radial dots */
body::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0.40 !important;
  z-index: 0 !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(124, 111, 91, 0.08) 1px, transparent 0) !important;
  background-size: 32px 32px !important;
  background-color: transparent !important;
  animation: none !important;
}
/* kill all decorative gradient/particle layers from inline templates */
.particles, .particle, .bg-animation, .bg-animation > *,
[class*="gradient-bg"], [class*="animated-bg"] {
  display: none !important;
  animation: none !important;
  background: none !important;
}

/* ensure page content sits ABOVE the dot texture */
.container, .container-fluid, .login-container, .login-wrapper,
nav, header, main, footer, .navbar, .sidebar, .panel, .card,
.login-card, .admin-login-card, .user-login-card {
  position: relative !important;
  z-index: 1 !important;
}

/* ==================== typography ==================== */

h1, h2, h3 {
  font-family: 'EB Garamond', 'Newsreader', serif !important;
  font-weight: 500 !important;
  color: #1F2937 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
}
h1 { font-size: 30px !important; line-height: 1.2 !important; }
h2 { font-size: 22px !important; line-height: 1.3 !important; }
h3 { font-size: 17px !important; line-height: 1.35 !important; }

p { font-family: 'Newsreader', Georgia, serif !important; font-size: 15px !important; color: #3A3F4B !important; }

a { color: #2F4F4F !important; text-decoration: none !important; }
a:hover { color: #26403F !important; text-decoration: underline !important; }

.text-muted, .text-secondary { color: #7C6F5B !important; }
.text-light, .text-white { color: #1F2937 !important; }

code, kbd, pre, samp {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
  background: #F4F0E6 !important;
  color: #7C6238 !important;
  border: 1px solid #E5DECC !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 12.5px !important;
}
pre { padding: 12px !important; }

/* eyebrow / caps label */
.caps, .eyebrow, .text-uppercase {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #7C6F5B !important;
  font-weight: 500 !important;
}

/* ==================== container / cards ==================== */

.card, .panel, .login-card, .admin-login-card, .user-login-card {
  background: #FFFFFF !important;
  border: 1px solid #E5DECC !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 0 rgba(40, 30, 20, 0.04) !important;
  color: #1F2937 !important;
}

/* ============ login pages: centered single-column card ============ */
/* Hide the left "marquee" half of any two-column login templates. */
.login-info, .login-side, .login-side-panel, .left-panel,
.login-marquee, .login-banner, .marquee-panel, .login-left,
.brand-panel, .brand-side, .info-panel, .school-info, .college-info,
[class*="left-side"],
.login-row > div:not(.login-card):not(.login-form):not(.login-right) {
  display: none !important;
}

/* Outer wrapper centers the card on the page */
.login-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 32px 16px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Card styling — applied to whichever container actually IS the card.
   admin-login uses .login-container directly; user-login wraps a .login-card.
   :has() lets us neutralize .login-container when it's only a wrapper. */
.login-card, .admin-login-card, .user-login-card,
.login-container {
  width: 100% !important;
  max-width: 480px !important;
  padding: 40px 36px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5DECC !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 24px rgba(40, 30, 20, 0.07) !important;
  margin: 0 auto !important;
  color: #1F2937 !important;
}
/* If a .login-container is just a wrapper around a .login-card,
   strip its own card styling so we don't get a card-in-card box. */
.login-container:has(> .login-card) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 480px !important;
}

/* Inside the login card: kill the gradient header banners + colored notice
   strips — keep just neutral typography. */
.login-header {
  text-align: center !important;
  padding: 0 0 24px !important;
  margin-bottom: 22px !important;
  border-bottom: 1px solid #E5DECC !important;
  background: transparent !important;
  color: #1F2937 !important;
}
.login-title {
  font-family: 'EB Garamond', 'Newsreader', serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: #1F2937 !important;
  margin: 12px 0 4px !important;
  letter-spacing: -0.005em !important;
}
.login-subtitle {
  font-family: 'Newsreader', Georgia, serif !important;
  font-style: italic !important;
  font-size: 15px !important;
  color: #7C6F5B !important;
  margin: 0 !important;
}
.admin-icon, .logo-icon {
  width: 56px !important;
  height: 56px !important;
  background: #2F4F4F !important;
  color: #FBF9F4 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin: 0 auto !important;
  box-shadow: none !important;
}

.security-notice {
  background: #F4F0E6 !important;
  border: 1px solid #E5DECC !important;
  border-left: 3px solid #2F4F4F !important;
  color: #3A3F4B !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  margin-bottom: 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  text-align: left !important;
}
.security-notice strong { color: #1F2937 !important; }

.login-footer, .login-body {
  background: transparent !important;
  padding: 0 !important;
}
.login-footer {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid #E5DECC !important;
  text-align: center !important;
}
.footer-links {
  display: flex !important;
  justify-content: center !important;
  gap: 22px !important;
  margin-bottom: 12px !important;
}
.footer-links a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #7C6F5B !important;
}
.footer-links a:hover { color: #2F4F4F !important; }
.copyright {
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 12px !important;
  color: #7C6F5B !important;
  font-style: italic !important;
}

/* admin sign-in button (template uses .btn-admin-login) — already covered by btn-primary
   but force the gradient out */
.btn-admin-login, .btn-login {
  background: #2F4F4F !important;
  border-color: #2F4F4F !important;
  color: #FBF9F4 !important;
  width: 100% !important;
  font-weight: 600 !important;
}
.btn-admin-login:hover, .btn-login:hover {
  background: #26403F !important;
  border-color: #26403F !important;
}

/* ==================== buttons ==================== */

/* Generic button shell — keep specificity low (single class) so variant
   classes (.btn-primary, .btn-admin-login, etc) reliably override colors. */
.btn, .btn-custom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #D9D2C2 !important;
  color: #1F2937 !important;
  padding: 9px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.12s, border-color 0.12s !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.btn:hover, .btn-custom:hover {
  background: #F4F0E6 !important;
  border-color: #7C6F5B !important;
  color: #1F2937 !important;
  transform: none !important;
}
/* Plain submit/button inputs that don't carry .btn — give them the same shell */
input[type=submit], input[type=button] {
  background: #2F4F4F !important;
  color: #FBF9F4 !important;
  border: 1px solid #2F4F4F !important;
  border-radius: 6px !important;
  padding: 9px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.btn-primary, .btn-primary-custom, .btn-login,
.btn-info, .btn-success, button[type=submit], input[type=submit] {
  background: #2F4F4F !important;
  border-color: #2F4F4F !important;
  color: #FBF9F4 !important;
}
.btn-primary:hover, .btn-primary-custom:hover, .btn-login:hover,
.btn-info:hover, .btn-success:hover,
button[type=submit]:hover, input[type=submit]:hover {
  background: #26403F !important;
  border-color: #26403F !important;
  color: #FBF9F4 !important;
}
.btn-danger {
  background: #9B3A2E !important;
  border-color: #9B3A2E !important;
  color: #FBF9F4 !important;
}
.btn-danger:hover { background: #7E2C22 !important; border-color: #7E2C22 !important; }
.btn-warning {
  background: #C26A3F !important;
  border-color: #C26A3F !important;
  color: #FBF9F4 !important;
}
.btn-secondary, .btn-default, .btn-outline-secondary {
  background: #FFFFFF !important;
  border-color: #D9D2C2 !important;
  color: #1F2937 !important;
}
button[disabled], .btn[disabled] { opacity: 0.55 !important; cursor: not-allowed !important; }

/* ==================== forms ==================== */

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=file], textarea, select,
.form-control, .form-control-custom, .form-select, .input-field {
  background: #FBF9F4 !important;
  color: #1F2937 !important;
  -webkit-text-fill-color: #1F2937 !important;
  border: 1px solid #D9D2C2 !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  height: auto !important;
  min-height: 42px !important;
  caret-color: #2F4F4F !important;
  transition: border-color 0.12s, box-shadow 0.12s !important;
}
input[type=text]:not(.form-control-custom),
input[type=email]:not(.form-control-custom),
input[type=password]:not(.form-control-custom),
input[type=search], input[type=number], input[type=file],
textarea, select, .form-control:not(.form-control-custom), .form-select {
  width: 100% !important;
  padding: 10px 12px !important;
}
.form-control-custom {
  width: 100% !important;
  padding-left: 50px !important;
  padding-right: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 46px !important;
}
input:focus, textarea:focus, select:focus,
.form-control:focus, .form-control-custom:focus {
  outline: none !important;
  border-color: #2F4F4F !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(47, 79, 79, 0.13) !important;
  transform: none !important;
}
input::placeholder, textarea::placeholder, .form-control-custom::placeholder {
  color: #A29680 !important;
  -webkit-text-fill-color: #A29680 !important;
}

label, .form-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1F2937 !important;
  margin-bottom: 7px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* input-group prefix icons (Bootstrap & custom) */
.input-group {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}
.input-group-text {
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  background: #F4F0E6 !important;
  color: #7C6F5B !important;
  border: 1px solid #D9D2C2 !important;
  border-right: 0 !important;
  border-radius: 6px 0 0 6px !important;
  min-height: 42px !important;
  font-size: 14px !important;
}
/* Higher-specificity overrides for inputs INSIDE .input-group:
   the generic `input[type=text]:not(.form-control-custom)` rule sets
   width:100% which fights flex layout. These are written with input-element
   + class + parent class, beating the generic at 0,2,1 via order. */
.input-group input[type=text].form-control,
.input-group input[type=email].form-control,
.input-group input[type=password].form-control,
.input-group .form-control {
  width: auto !important;
  flex: 1 1 auto !important;
}
.input-group .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 0 !important;
}
.input-group:focus-within .input-group-text {
  border-color: #2F4F4F !important;
  background: rgba(47, 79, 79, 0.08) !important;
  color: #26403F !important;
}

.input-icon {
  color: #7C6F5B !important;
}

/* ==================== nav / header ==================== */

nav, .navbar, header, .topbar, .topnav {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5DECC !important;
  color: #1F2937 !important;
}
.navbar-brand, .brand {
  font-family: 'EB Garamond', serif !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  color: #2F4F4F !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.navbar-brand::before, .navbar-brand::after,
.brand::before, .brand::after { content: none !important; }

.nav-link, .navbar-nav .nav-link, nav.tabs .tab {
  color: #7C6F5B !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-bottom: none !important;
  padding: 8px 14px !important;
}
.nav-link:hover, nav.tabs .tab:hover {
  color: #26403F !important;
  background: rgba(47, 79, 79, 0.05) !important;
  border-radius: 4px !important;
}
.nav-link.active, nav.tabs .tab.active {
  color: #26403F !important;
  font-weight: 600 !important;
  background: rgba(47, 79, 79, 0.08) !important;
  border-radius: 4px !important;
}

/* ==================== sidebar (admin dashboards) ==================== */

.sidebar, [class*="sidebar"]:not(.sidebar-toggle):not(.sidebar-icon) {
  background: #F4F0E6 !important;
  border-right: 1px solid #E5DECC !important;
  color: #1F2937 !important;
}
.sidebar a, .sidebar .nav-link, .sidebar-link, .menu-item {
  color: #3A3F4B !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}
.sidebar a:hover, .sidebar-link:hover, .menu-item:hover {
  background: rgba(47, 79, 79, 0.06) !important;
  color: #26403F !important;
}
.sidebar a.active, .menu-item.active {
  background: rgba(47, 79, 79, 0.12) !important;
  color: #26403F !important;
  border-left: 3px solid #2F4F4F !important;
  font-weight: 600 !important;
}

/* ==================== tables ==================== */

table, .table {
  background: #FFFFFF !important;
  border: 1px solid #E5DECC !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  width: 100% !important;
  color: #1F2937 !important;
  overflow: hidden !important;
}
th, .table thead th {
  background: #F4F0E6 !important;
  color: #1F2937 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid #E5DECC !important;
  text-align: left !important;
}
td, .table tbody td {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border-top: 1px solid #F4F0E6 !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
}
.table-hover tbody tr:hover td { background: #FBF9F4 !important; }

/* ==================== alerts / badges / pills ==================== */

.alert {
  background: #FFFFFF !important;
  border: 1px solid #E5DECC !important;
  border-left: 3px solid #2F4F4F !important;
  border-radius: 6px !important;
  color: #1F2937 !important;
  padding: 11px 16px !important;
  font-family: 'Inter', sans-serif !important;
}
.alert-danger, .alert-error  {
  border-left-color: #9B3A2E !important;
  background: rgba(155, 58, 46, 0.06) !important;
  color: #7E2C22 !important;
}
.alert-warning {
  border-left-color: #C26A3F !important;
  background: rgba(194, 106, 63, 0.06) !important;
  color: #8E4D2E !important;
}
.alert-success, .alert-info {
  border-left-color: #4F6B4A !important;
  background: rgba(79, 107, 74, 0.06) !important;
  color: #3D5239 !important;
}

.badge {
  background: rgba(47, 79, 79, 0.10) !important;
  color: #26403F !important;
  border: 1px solid rgba(47, 79, 79, 0.25) !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.badge.bg-success, .badge-success { background: rgba(79, 107, 74, 0.12) !important; color: #3D5239 !important; border-color: rgba(79, 107, 74, 0.30) !important; }
.badge.bg-danger,  .badge-danger  { background: rgba(155, 58, 46, 0.12) !important; color: #7E2C22 !important; border-color: rgba(155, 58, 46, 0.30) !important; }
.badge.bg-warning, .badge-warning { background: rgba(194, 106, 63, 0.12) !important; color: #8E4D2E !important; border-color: rgba(194, 106, 63, 0.30) !important; }
.badge.bg-info,    .badge-info    { background: rgba(168, 135, 88, 0.12) !important; color: #7C6238 !important; border-color: rgba(168, 135, 88, 0.30) !important; }

/* ==================== modal / dropdown ==================== */

.modal-content, .dropdown-menu {
  background: #FFFFFF !important;
  border: 1px solid #E5DECC !important;
  border-radius: 10px !important;
  color: #1F2937 !important;
  box-shadow: 0 12px 28px rgba(40, 30, 20, 0.10) !important;
}
.modal-header, .modal-footer { border-color: #E5DECC !important; }
.modal-backdrop { background: #1F2937 !important; opacity: 0.45 !important; }

/* ==================== misc ==================== */

::selection { background: rgba(47, 79, 79, 0.20) !important; color: #1F2937 !important; }
::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: #D9D2C2 !important; border-radius: 5px !important; border: 2px solid #FBF9F4 !important; }
::-webkit-scrollbar-thumb:hover { background: #7C6F5B !important; }

hr { border-color: #E5DECC !important; opacity: 1 !important; }

/* ==================== animations ==================== */

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }