:root {
  /* ── Brand Colors ── */
  --color-primary:        #00529b;
  --color-primary-dark:   #002657;
  --color-primary-uf:     #0021a5;
  --color-orange:         #FA4616;
  --color-orange-light:   #EC8025;
  --color-green:          #22884c;
  --color-green-light:    #D4ECEE;
  --color-blue-light:     #6C9AC3;
  --color-purple:         #6A2A60;
  --color-yellow-light:   #F0EFE8;
  --color-yellow-bg:      #d2cfba;

  /* ── Text ── */
  --text-main:            #1a1a2e;
  --text-body:            #333;
  --text-dim:             #6b7280;
  --text-white:           #ffffff;
  --text-faint:           #a9a9a9;

  /* ── Backgrounds ── */
  --bg:                   #ffffff;
  --bg-light:             #f8f9fa;
  --bg-card:              #ffffff;

  /* ── Borders & Shadows ── */
  --border:               rgba(0, 0, 0, 0.08);
  --border-color:         #dee2e6;
  --shadow:               0 2px 12px rgba(0, 0, 0, 0.07);
  --shadow-card:          0 4px 16px rgba(0, 0, 0, 0.08);

  /* ── Radius ── */
  --radius-sm:            10px;
  --radius-md:            16px;
  --radius-lg:            20px;
  --radius-pill:          20px;

  /* ── Sidebar ── */
  --sidebar-width:        100px;
  --sidebar-width-lg:     300px;
  --sidebar-width-tog:    90px;
  --sidebar-bg:           #0B5793;

  /* ── Footer ── */
  --footer-bg:            #00529b;

  /* ── Responsive NWS/Forecast widths ── */
  --forecast-width-xs:    400px;
  --forecast-width-sm:    500px;
  --forecast-width-md:    600px;
  --forecast-width-lg:    700px;
  --forecast-width-xl:    800px;
}

/* ══════════════════════════════
   Base
══════════════════════════════ */
body {
  color: var(--text-body);
  background: var(--bg);
}

p {
  line-height: 1.5;
}

a {
  color: var(--color-primary) !important;
}

body p a,
main p a {
  text-decoration: underline;
}

main p a:hover,
main p a:focus {
  color: var(--color-orange) !important;
}

.breadcrumb-item a,
h3 a {
  color: var(--color-primary) !important;
}

/* ══════════════════════════════
   Skip Link & Accessibility
══════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #000;
  color: var(--text-white);
  padding: 10px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════
   Banner & Navbar
══════════════════════════════ */
div[role="banner"] {
  background-color: var(--color-primary);
}

div[role="mobile-banner"] img {
  height: 74px;
}

div[role="navbar"] {
  background-color: var(--bg-light) !important;
}

.desktop-banner {
  display: none !important;
}

.mobile-banner {
  display: block !important;
}

/* ══════════════════════════════
   Buttons
══════════════════════════════ */
.btn-primary {
  background-color: var(--color-primary-uf) !important;
  border-color: var(--color-primary-uf) !important;
}

.btn-light {
  background-color: #eee !important;
  border-color: #eee !important;
}

.btn-light:hover {
  color: var(--color-primary-dark) !important;
  background-color: var(--bg-light) !important;
  border-color: var(--bg-light) !important;
}

/* ── Back Button ── */
.btn-back {
  background-color: #002657;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s;
  cursor: pointer;
}

.btn-back:hover {
  background-color: #003580;
  color: #ffffff;
}

/* ══════════════════════════════
   Background Utilities
══════════════════════════════ */
.bg-blue          { background-color: var(--color-primary); }
.bg-dark-blue     { background-color: var(--color-primary-dark); }
.bg-orange        { background-color: var(--color-orange); }
.bg-green         { background-color: var(--color-green); }
.bg-lightgreen    { background-color: var(--color-green-light); }
.bg-lightorange   { background-color: var(--color-orange-light); }
.bg-lightgrey     { background-color: var(--color-orange-light) !important; }
.bg-lightblue     { background-color: var(--color-blue-light); }
.bg-forecastyellow{ background-color: var(--color-yellow-bg); }
.bg-lightyellow   { background-color: var(--color-yellow-light); }

/* ══════════════════════════════
   Text Color Utilities
══════════════════════════════ */
.text-uf-blue     { color: var(--color-primary-uf); }
.text-blue        { color: var(--color-primary); }
.text-dark-blue   { color: var(--color-primary-dark); }
.text-light-blue  { color: var(--color-blue-light); }
.text-orange      { color: var(--color-orange) !important; }
.text-orange:hover{ color: var(--color-orange); }
.text-purple      { color: var(--color-purple); }
.text-gator       { color: var(--color-green); }
.text-alachua     { color: #F2A900; }
.text-bottlebrush { color: #D32737; }

.text-blue a       { color: var(--color-primary) !important; }
.text-blue a.active{ background-color: var(--color-primary) !important; color: var(--text-white) !important; }
.text-black a      { color: var(--text-body) !important; }
.text-white a      { color: var(--text-white) !important; }
.text-success  { color: #1A6B1A !important; }   /* darkened green */
.text-warning  { color: #7A5000 !important; }   /* darkened amber */
.text-danger   { color: #9B0000 !important; }   /* darkened red */
.text-purple   { color: #5C0099 !important; }   /* darkened purple */

/* ══════════════════════════════
   Font Size Utilities
══════════════════════════════ */
.font-size-6      { font-size: 6rem; }
.font-size-5      { font-size: 5rem; }
.font-size-4      { font-size: 4rem; }
.font-size-3      { font-size: 3rem; }
.font-size-2      { font-size: 2rem; }
.font-size-1-half { font-size: 1.5rem; }
.font-size-1      { font-size: 1rem; }
.font-size-half   { font-size: 0.8rem; }
.font-xsmall      { font-size: x-small; }

/* ══════════════════════════════
   Height Utilities
══════════════════════════════ */
.height-110 { height: 110px !important; }
.height-370 { height: 370px !important; }

/* ══════════════════════════════
   Layout — Wrapper & Content
══════════════════════════════ */
#wrapper {
  display: flex;
}

#wrapper #content-wrapper {
  width: 100%;
}

/* ══════════════════════════════
   Navbar Dropdowns
══════════════════════════════ */
.dropdown-menu {
  margin-top: 0;
}

.dropdown-menu .dropdown-toggle::after {
  vertical-align: middle;
  border-left: 4px solid;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}

.dropdown-menu .dropdown .dropdown-menu {
  left: 100%;
  top: 0%;
  margin: 0 20px;
  border-width: 0;
}

.dropdown-menu li a {
  text-align: left !important;
}

.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
  background: var(--bg);
  color: #fd7e14;
}

.dropdown-menu > li.show > a {
  color: #fd7e14;
}

#navbarNav a {
  font-size: 125%;
  color: var(--sidebar-bg) !important;
  font-weight: 500;
}

.dropdown-item {
  font-size: 80% !important;
}

#navbarNav a:hover {
  color: #fd7e14 !important;
}

/* ══════════════════════════════
Sidebar
══════════════════════════════ */
.sidebar {
  width: var(--sidebar-width) !important;
  background-color: var(--sidebar-bg);
  min-height: calc(100vh - 56px);
  margin-top: 0.25rem;
  border-radius: 0 12px 12px 0;   /* <-- right side only */
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar a {
  color: var(--text-white) !important;
  text-decoration: none !important;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-item .nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 0.5rem;
  width: 100%;
  color: rgba(255,255,255,0.85);
  transition: background-color 0.15s, color 0.15s;
  gap: 4px;
}

.sidebar .nav-item .nav-link i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.sidebar .nav-item .nav-link span {
  display: block;
  font-size: 0.65rem;
  line-height: 1.2;
  word-break: break-word;
  white-space: normal;
}

.sidebar .nav-item .nav-link:hover {
  background-color: rgba(255,255,255,0.08);
  color: var(--text-white);
}

.sidebar .nav-item.highlight {
  background: rgba(255,255,255,0.12) !important;
  border-left: 3px solid var(--color-orange);
  border-radius: 0 8px 8px 0; 
}

.sidebar .nav-item.highlight .nav-link {
  color: var(--text-white) !important;
}

.sidebar .nav-item:last-child {
  margin-bottom: 1rem;
}

/* ══════════════════════════════
Sidebar — LG (992px+)
══════════════════════════════ */
@media (min-width: 992px) {
  .sidebar {
    width: var(--sidebar-width-lg) !important;
  }

  .sidebar .nav-item .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0.85rem 1.25rem;
    gap: 12px;
    width: 100%;
  }

  .sidebar .nav-item .nav-link i {
    font-size: 1rem;
    min-width: 20px;
  }

  .sidebar .nav-item .nav-link span {
    font-size: 0.95rem;
    white-space: nowrap;
    display: inline;
  }

  .sidebar .nav-item.highlight {
    border-left: 4px solid var(--color-orange);
  }

  /* Toggled sidebar */
  .sidebar.toggled {
    overflow: visible;
    width: var(--sidebar-width-tog) !important;
  }

  .sidebar.toggled .nav-item .nav-link {
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    gap: 4px;
    width: var(--sidebar-width-tog);
  }

  .sidebar.toggled .nav-item .nav-link span {
    font-size: 0.6rem;
    display: block;
    white-space: normal;
  }
}

/* ══════════════════════════════
   Footer
══════════════════════════════ */
.footer {
  width: 100%;
  padding: 1rem 0;
  margin-top: 1.5rem;
  background-color: var(--footer-bg);
  text-align: left;
  font-size: 1rem;
}

.footer a {
  font-weight: 500;
  color: #fafafa;
}

.footer a:hover {
  color: var(--text-faint);
  cursor: pointer;
}

.footer p {
  margin-bottom: 0;
}

.footer-links {
  padding-left: 0;
  margin-bottom: 0.5rem;
}

.footer-links li {
  display: inline-block;
  padding-right: 0.4rem;
  padding-left: 0.4rem;
  border-right: 1px solid var(--text-faint);
  color: #fafafa;
}

.footer-links li:last-child {
  border-right: 0 !important;
}

/* ══════════════════════════════
   Border Utilities
══════════════════════════════ */
.border-varies {
  border-top: 1px solid var(--border-color) !important;
}

/* ══════════════════════════════
   Page Title Card
══════════════════════════════ */
.page-title-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 0;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.5rem;
}

.page-title-card-header {
  background-color: var(--color-primary-dark);
  color: var(--text-white);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title-card-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.page-title-card-body {
  padding: 1.25rem 1.5rem;
}

/* ══════════════════════════════
   Hint Banner
══════════════════════════════ */
.page-title-hint {
  background: rgba(0, 38, 87, 0.05);
  border-left: 4px solid var(--color-primary-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #444;
}

/* ══════════════════════════════
   Sticky Footer (Mobile Nav)
══════════════════════════════ */
#sticky-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 100;
  text-align: center;
}

#sticky-footer .nav-item .nav-link {
  text-align: center;
  padding: 0.75rem 1rem;
}

#sticky-footer .nav-item .nav-link span {
  display: block;
  word-wrap: break-word;
}

#sticky-footer a {
  color: var(--text-white);
}

#sticky-footer .nav-item .nav-link {
  padding: 0 5px !important;
  font-size: 50% !important;
}

/* ══════════════════════════════
   Crop List
══════════════════════════════ */
#cropList .list-group-item.highlight {
  background-color: var(--color-primary) !important;
}

#cropList .list-group-item.highlight a {
  color: var(--text-white) !important;
}

.cropTable {
  display: none;
}

/* ══════════════════════════════
   Weather Outlook
══════════════════════════════ */
#weather_outlook a {
  text-align: center !important;
}

#weather_outlook_nav_tab a.active {
  background-color: var(--color-primary) !important;
  color: var(--text-white) !important;
}

#weather_outlook_nav_tab a {
  color: var(--color-primary) !important;
}

/* ══════════════════════════════
   Temperature Colors
══════════════════════════════ */
.hot  { color: #dc3545; }
.cool { color: var(--color-blue-light); }

/* ══════════════════════════════
   Graphical Data Panel
══════════════════════════════ */
.fawn-select-group {
  display: flex;
  flex-direction: column;
}

.fawn-select-group label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 4px;
}

.fawn-select-group select {
  background-color: var(--bg);
  color: var(--text-main);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  height: auto;
  min-height: 42px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  width: 100%;
}

.fawn-select-group select:focus {
  border-color: var(--color-primary-uf);
  box-shadow: 0 0 0 3px rgba(34, 85, 204, 0.12);
}

.fawn-select-group select option {
  background-color: var(--bg);
  color: var(--text-main);
}

/* ══════════════════════════════
   Toggle Chips
══════════════════════════════ */
.fawn-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fawn-toggles li {
  padding: 0;
  border: none;
  background: none;
}

.fawn-toggles input[type="checkbox"] {
  display: none;
}

.fawn-toggles label {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 0.2s;
  user-select: none;
  white-space: nowrap;
  margin: 0;
}

.fawn-toggles input[type="checkbox"]:checked + label {
  background: rgba(0, 0, 0, 0.03);
  font-weight: 600;
}

/* ══════════════════════════════
   Statistics Panel
══════════════════════════════ */
#statistics-panel {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

#statistics-panel h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 0 0 10px 0;
  font-weight: 600;
}

#stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stat-item {
  flex: 1 1 140px;
  background: #f4f6fb;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  border-left: 3px solid;
}

.stat-item .stat-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-item .stat-current {
  font-size: 22px;
  font-weight: 700;
}

.stat-item .stat-range {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.stat-item .stat-range b {
  color: var(--text-main);
}

#weatherdiv,
#forecastdiv,
#coldp_chartcontainer ~ #forecastdiv {
  background:    var(--bg-card);
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        1px solid var(--border);
  box-shadow:    var(--shadow);
  margin-bottom: 1.5rem;
}

/* ══════════════════════════════
   Chart Container
══════════════════════════════ */
#chartcontainer,
#coldp_chartcontainer,
#forecastchartcontainer,
#coldhoursChart {
  background:    var(--bg-card);
  border-radius: var(--radius-md);
  padding:       16px;
  border:        1px solid var(--border);
  box-shadow:    var(--shadow);
  min-height:    400px;
  margin-bottom: 16px;
}

/* ══════════════════════════════
Table — Global Overrides
══════════════════════════════ */

/* Wrapper cards for scrollable tables */
.table-responsive {
  background:    var(--bg-card);
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        1px solid var(--border);
  box-shadow:    var(--shadow);
  margin-bottom: 1.5rem;
}

/* Base table overrides on top of Bootstrap table-striped */
.table {
  font-size:     14px;
  margin-bottom: 0;
  color:         var(--text-main);
}

/* thead */
.table thead th {
  background:     var(--bg-light);
  color:          var(--text-dim);
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom:  1px solid var(--border);
  border-top:     none;
  white-space:    normal;        
  /*word-break:     break-word;    */
  vertical-align: middle;
}

/* thead select (for collapse chooser) */
.table thead th select {
  background: transparent;
  color:      var(--text-main);
  border:     none;
  font-size:  14px;
  outline:    none;
}

/* tbody cells */
.table tbody td {
  color:          var(--text-main);
  border-top:     1px solid var(--border);
  white-space:    nowrap;
  vertical-align: middle;
}

/* tbody striped rows — override Bootstrap's default grey */
.table-striped tbody tr:nth-of-type(odd) {
  background: var(--bg-light);
}

.table-striped tbody tr:nth-of-type(even) {
  background: var(--bg-card);
}

/* hover and selected row */
.table-hover tbody tr:hover,
.table tbody tr.selected {
  background: rgba(0, 82, 155, 0.16) !important;
  cursor:     pointer;
}

/* bordered table */
.table-bordered {
  border: 1px solid var(--border);
}

.table-bordered td,
.table-bordered th {
  border: 1px solid var(--border);
}

/* thead-light override to match our theme */
.table .thead-light th {
  background:  var(--bg-light);
  color:       var(--text-dim);
  border-color: var(--border);
}

/* ══════════════════════════════
   Responsive — XS (<576px)
══════════════════════════════ */
@media (max-width: 576px) {
  #map-container {
    display: none;
  }
}

/* ══════════════════════════════
   Responsive — 374px+
══════════════════════════════ */
@media (min-width: 374px) {
  #sticky-footer .nav-item .nav-link {
    font-size: 80% !important;
  }

  #graphic_forecast,
  #NWSforecast,
  #cropTables {
    width: var(--forecast-width-xs) !important;
  }
}

/* ══════════════════════════════
   Responsive — SM (576px+)
══════════════════════════════ */
@media (min-width: 576px) {
  #graphic_forecast,
  #NWSforecast,
  #cropTables {
    width: var(--forecast-width-sm) !important;
  }

  .desktop-banner {
    display: block !important;
  }

  .mobile-banner {
    display: none !important;
  }

  img[alt="FAWN Logo"] {
    height: 70px !important;
  }

  img[alt="UF IFAS Logo"] {
    height: 35px !important;
  }

  .height-100 { height: 100px; }
  .height-70  { height: 70px; }
}

/* ══════════════════════════════
   Responsive — MD (768px+)
══════════════════════════════ */
@media (min-width: 768px) {
  .dropdown-menu .dropdown .dropdown-menu {
    margin: 0;
    border-width: 1px;
  }

  #navbarNav > ul {
    width: 80%;
    margin-left: 100px;
    margin-right: 100px;
  }

  #graphic_forecast,
  #NWSforecast,
  #cropTables {
    width: var(--forecast-width-md) !important;
  }
}

/* ══════════════════════════════
   Responsive — LG (992px+)
══════════════════════════════ */
@media (min-width: 992px) {
  .sidebar {
    width: var(--sidebar-width-lg) !important;
  }

  .sidebar .nav-item .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem;
    width: 250px;
  }

  .sidebar .nav-item .nav-link span {
    font-size: 1.1rem;
    display: inline;
  }

  .sidebar .nav-item .dropdown-menu {
    position: static !important;
    margin: 0 1rem;
    top: 0;
  }

  .sidebar .nav-item.dropdown .dropdown-toggle::after {
    display: inline-block;
  }

  .sidebar.toggled {
    overflow: visible;
    width: var(--sidebar-width-tog) !important;
  }

  .sidebar.toggled .nav-item:last-child {
    margin-bottom: 1rem;
  }

  .sidebar.toggled .nav-item .nav-link {
    text-align: center;
    padding: 0.75rem 1rem;
    width: var(--sidebar-width-tog);
  }

  .sidebar.toggled .nav-item .nav-link span {
    font-size: 0.65rem;
    display: block;
  }

  .sidebar.toggled .nav-item .dropdown-menu {
    position: absolute !important;
    transform: none !important;
    left: calc(var(--sidebar-width-tog) + 0.5rem) !important;
    margin: 0;
  }

  .sidebar.toggled .nav-item .dropdown-menu.dropup {
    bottom: 0;
    top: auto !important;
  }

  .sidebar.toggled .nav-item.dropdown .dropdown-toggle::after {
    display: none;
  }

  .border-varies {
    border-right: 1px solid var(--border-color) !important;
  }

  .border-lg-right {
    border-right: 1px solid var(--border-color) !important;
  }

  .nav-link {
    text-align: left !important;
  }

  .nav-link i {
    padding-right: 1px;
  }

  #graphic_forecast,
  #NWSforecast,
  #cropTables {
    width: var(--forecast-width-lg) !important;
  }
}

/* ══════════════════════════════
   Responsive — XL (1200px+)
══════════════════════════════ */
@media (min-width: 1200px) {
  .ml-xl-6,  .mx-xl-6  { margin-left: 5rem !important; }
  .ml-xl-7,  .mx-xl-7  { margin-left: 6rem !important; }
  .ml-xl-8,  .mx-xl-8  { margin-left: 7rem !important; }
  .ml-xl-9,  .mx-xl-9  { margin-left: 8rem !important; }
  .ml-xl-10, .mx-xl-10 { margin-left: 9rem !important; }

  #forecast-row h6 {
    font-size: 100%;
  }

  #graphic_forecast,
  #NWSforecast,
  #cropTables {
    width: var(--forecast-width-xl) !important;
  }
}