/*
 * USF.to Modern Color Palette & Typography
 * Updated for Bootstrap 5 compatibility
 */

/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Barlow+Semi+Condensed&display=swap");

/* Root CSS Variables for Color Palette */
:root {
  /* Fonts */
  --font-barlow: "Barlow Semi Condensed", serif;
  --font-primary: system-ui, -apple-system, "Open Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;

  /* Colors */
  --header-text-color: #777676;
  --hover-color: #dbe442;
  --font-color: #212529;
  --readmore-color: #29afce;
  --btn-color: #f66956;
  --bg-secondary: #efeff0;
  --highlight-color: #f28977;
  --main-color: #327052;
  --error-color: #e53935;
  --usf-green: #006747;
  --usf-white: #ffffff;
  --usf-evergreen: #005432;
  --usf-silver: #cad2d8;
  --usf-slate: #466069;
  --usf-dgray: #3f565e;
  --usf-tophead: #384b52;
  --usf-blue: #006484;
  --usf-apple: #9ccb3b;
  --usf-sand: #edebd1;
  --usf-gray: #6c757d;
}

/* Base Typography */
body {
  font-family: var(--font-primary);
  color: var(--font-color);
  background-color: var(--usf-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-barlow);
  color: var(--header-text-color);
}

/* Primary Button Styling */
.btn-primary {
  background-color: var(--btn-color);
  border-color: var(--btn-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--highlight-color);
  border-color: var(--highlight-color);
}

/* Success Button Styling */
.btn-success {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: var(--usf-green);
  border-color: var(--usf-green);
}

/* Info Button Styling */
.btn-info {
  background-color: var(--usf-blue);
  border-color: var(--usf-blue);
  color: var(--usf-white);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--readmore-color);
  border-color: var(--readmore-color);
  color: var(--usf-white);
}

/* Warning Button Styling */
.btn-warning {
  background-color: var(--usf-apple);
  border-color: var(--usf-apple);
  color: var(--font-color);
}

/* Danger Button Styling */
.btn-danger {
  background-color: var(--error-color);
  border-color: var(--error-color);
}

/* Navbar Styling */
.navbar {
  /* fallback solid color */
  background-color: var(--usf-tophead) !important;
  /* gradient: left (006747) to right (005432) */
  background-image: linear-gradient(90deg, var(--usf-green) 0%, var(--usf-evergreen) 100%) !important;
  background-repeat: no-repeat;
}

.navbar-brand,
.navbar-nav .nav-link {
  color: var(--usf-white) !important;
}

.navbar-brand img {
  width: 14rem;
  max-width: 14rem;
}

.navbar-nav .nav-link:hover {
  color: var(--hover-color) !important;
}

/* Secondary Background */
.bg-secondary-custom {
  background-color: var(--bg-secondary);
}

/* Link Styling */
a {
  color: var(--readmore-color);
}

a:hover {
  color: var(--usf-blue);
}

/* Alert Styling */
.alert-success {
  background-color: rgba(50, 112, 82, 0.1);
  border-color: var(--main-color);
  color: var(--usf-evergreen);
}

.alert-danger {
  background-color: rgba(229, 57, 53, 0.1);
  border-color: var(--error-color);
  color: var(--error-color);
}

.alert-info {
  background-color: rgba(0, 100, 132, 0.1);
  border-color: var(--usf-blue);
  color: var(--usf-blue);
}

.alert-warning {
  background-color: rgba(156, 203, 59, 0.1);
  border-color: var(--usf-apple);
  color: var(--usf-dgray);
}

/* Form Styling */
.form-control:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 0.2rem rgba(50, 112, 82, 0.25);
}

/* Card Styling */
.card {
  border-color: var(--usf-silver);
}

.card-header {
  background-color: var(--bg-secondary);
  border-bottom-color: var(--usf-silver);
}

/* Table Styling */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: rgba(239, 239, 240, 0.5);
}

/* Custom Highlight Color */
.text-highlight {
  color: var(--highlight-color);
}

.bg-highlight {
  background-color: var(--highlight-color);
}

/* Hover Effects */
.hover-effect:hover {
  background-color: var(--hover-color);
  transition: background-color 0.3s ease;
}

/* DataTables Bootstrap 5 Custom Styling */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border-color: var(--usf-silver);
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--main-color);
  box-shadow: 0 0 0 0.2rem rgba(50, 112, 82, 0.25);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: var(--usf-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--usf-green) !important;
  border-color: var(--usf-green) !important;
  color: var(--usf-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-color: var(--usf-silver) !important;
}

.dataTables_wrapper .dataTables_info {
  color: var(--usf-gray);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--font-color);
  font-weight: normal;
}

/* Custom table styling for DataTables */
.table-hover tbody tr:hover {
  background-color: rgba(156, 203, 59, 0.1);
}

.table thead th {
  background-color: var(--bg-secondary);
  border-bottom: 2px solid var(--usf-silver);
  color: var(--header-text-color);
  font-family: var(--font-barlow);
}