/*
 Theme Name:   Understrap-sapling
 Theme URI:    understrap-sapling
 Description:  Child of understrap for sapling
 Author:       bstock
 Author URI:   https://www.ashtree-marine.com
 Template:     understrap
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* == Add your own styles below this line ==
--------------------------------------------*/
/* === CSS Variables === */

:root {
  --font-main: 'Lato', sans-serif;

  --font-size-h1: 43.75px;
  --font-size-h2: 35px;
  --font-size-h3: 21px;

  --color-primary: rgb(49, 80, 118);
  --color-accent: rgb(50, 81, 119);
  --color-light: #ffffff;
  --color-dark: #333333;
  --color-gray-light: #d3d3d3;
  --color-gray-medium: #555;
  --color-gray-dark: #444;

  --bs-success: #28a745;
  --bs-danger: #dc3545;
  --bs-secondary: #6c757d;

  --btn-border: 2px solid var(--color-primary);
  --btn-font-weight: 900;
  --btn-radius: 0px;
  --form-control-radius: 0px;

  --transition-fast: 0.1s linear;
  --shadow-light: 0 0 10px rgba(0,0,0,0.1);
}

/* === Base Layout === */
body, header, .site-header, nav.navbar {
  margin: 0;
  padding: 0;
  background-color: #305076;
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

/* === Typography === */
h1, h2, h3 {
  font-family: var(--font-main);
  color: var(--color-primary);
  text-transform: uppercase;
  -webkit-font-smoothing: subpixel-antialiased;
  margin: 0 0 1rem 0;
}

h1 { font-size: var(--font-size-h1); font-weight: 400; }
h2 { font-size: var(--font-size-h2); font-weight: 400; }
h3 { font-size: var(--font-size-h3); font-weight: 700; }

/* === Navbar === */
.navbar {
  background-color: #305076;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.navbar .nav-link,
.navbar .navbar-brand {
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--color-light) !important;
  padding: 0.75rem 1rem;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #cce0ff !important;
}

.navbar .navbar-brand img {
  max-height: 80px;
  width: auto;
}

/* === Forms === */
.form-control,
.form-check-input,
.form-select,
.form-label {
  font-family: var(--font-main);
  color: var(--color-primary);
  border-radius: var(--form-control-radius) !important;
  
}

/* === DataTables === */
.dataTables_wrapper {
  font-family: var(--font-main);
  color: var(--color-primary);
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

.dataTables_filter input,
.dataTables_length select {
  border: var(--btn-border);
  background-color: transparent;
  font-size: 14px;
  color: var(--color-primary);
}

.dataTables_paginate .paginate_button {
  border: var(--btn-border);
  color: var(--color-primary);
  font-weight: var(--btn-font-weight);
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
  background-color: transparent;
}

.dataTables_scrollBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

.dataTables_scroll {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Optional: constrain rows to avoid oversized table content */
/* Remove extra vertical spacing */
table.dataTable {
  margin: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
/* Remove extra space below table */
table.dataTable.no-footer {
  border-bottom: none !important;
}

/* Avoid spacing from the bottom controls */
.dataTables_info,
.dataTables_paginate,
.dataTables_filter,
.dataTables_length {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25rem;
}

.dataTables_info,
.dataTables_paginate {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  height: 30px;
  box-sizing: border-box;
  background-color: inherit;
}


.dataTables_paginate .paginate_button:hover,
.dataTables_paginate .paginate_button.current {
  background-color: var(--color-primary);
  color: var(--color-light);
}

/* If inside a custom panel */
.panel-container,
.table-panel,
.chart-panel {
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* === Modals === */
.modal-content {
  background-color: var(--color-light);
  font-family: var(--font-main);
  color: var(--color-dark);
  border-radius: 0;
  padding: 1rem;
}

/* === Login Page === */
body.login,
body.wp-admin {
  background-color: #f7f7f7;
  font-family: var(--font-main);
  text-align: left;
}

.login form,
#your-profile {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-light);
  padding: 20px;
  border-radius: 0;
}

/* === Sticky Panels === */
.sticky-menu-panel {
  position: sticky;
  top: 0;
  height: fit-content;
  padding-top: 35px;
}

/* === Placeholder Panel === */
.chart-loading,
.placeholder-panel {
  width: 100%;
  height: 500px;
  background-color: var(--color-gray-light);
  color: var(--color-gray-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid var(--color-gray-medium);
  border-radius: 5px;
}

.map-container {
            height: 500px;
            width: 100%;
            margin-bottom: 20px;
            position: relative;
}

.panel-container, .table-panel {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
  overflow: hidden;
}

/* === Dark Mode === */
body.dark-mode {
  background-color: #111417;
  color: var(--color-light);
}

body.dark-mode a {
  color: #bb86fc;
}

body.dark-mode .form-control,
body.dark-mode .card,
body.dark-mode .dropdown-menu,
body.dark-mode .modal-content {
  background-color: #343a40;
  color: var(--color-light);
}


body.dark-mode .choices__item--choice {
  background-color: #212529;
  color: var(--color-light, #f8f9fa);
}

body.dark-mode .choices__item--choice:hover,
body.dark-mode .choices__item--choice.is-highlighted {
  background-color: #343a40;
  color: var(--color-light, #f8f9fa);
}


body.dark-mode .dataTables_wrapper {
  color: var(--color-light);
}

body.dark-mode .dataTables_filter input,
body.dark-mode .dataTables_length select {
  background-color: #333;
  color: #fff;
  border: 1px solid var(--color-gray-dark);
}

body.dark-mode .dataTables_paginate .paginate_button {
  color: #ffffff;
}

body.dark-mode .dataTables_paginate .paginate_button:hover {
  background-color: var(--color-gray-medium);
}

body.dark-mode .spinner-border {
  border-color: var(--color-light) var(--color-gray-dark) var(--color-gray-dark);
}

/* === Additional Components from Original File === */

/* Alert */
.alert {
  padding: 15px;
  background-color: #f44336;
  color: white;
  margin-bottom: 20px;
}

/* Profile Button */
.profile-button {
  background-color: var(--color-primary);
  border: none;
  color: var(--color-light);
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
}

/* Form Enhancements */
.form-check,
.form-check-label,
.form-switch {
  font-family: var(--font-main);
  color: var(--color-primary);
}

.input-group-text {
  background-color: var(--color-gray-light);
  border: 1px solid var(--color-gray-medium);
  font-family: var(--font-main);
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: none;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


/* DataTables Extended */
.table,
.table-striped,
.dataTable,
.even,
.odd,
.sorting,
.sorting_asc,
.sorting_desc {
  font-family: var(--font-main);
  color: var(--color-dark);
  background-color: #fff;
}

.dataTables_scroll-x-only {
  overflow-x: auto;
}

.pagination {
  display: flex;
  list-style: none;
  padding-left: 0;
}



.panel-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.6);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* WordPress Core UI */
.wp-core-ui {
  font-family: var(--font-main);
}

/* Utility & Layout */
.container-fluid,
.site,
.site-content,
.map-container,
.modal,
.list-group-item,
.breadcrumb,
.navbar-toggler-icon,
.navbar-light,
.navbar-nav,
.nav-item,
.dropdown-item {
  font-family: var(--font-main);
}

/* Reverse foreground/background on hover */
.choices__item--choice:hover,
.choices__item--choice.is-highlighted {
  background-color: var(--color-dark) !important; /* Dark background on hover */
  color: #fff !important;                         /* Light text on hover */
  cursor: pointer;
}



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

.bg-primary {
  background-color: var(--color-primary) !important;
}

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

.is-highlighted {
  background-color: var(--color-accent);
  color: var(--color-light);
}

/* === Buttons (No separate .btn class) === */

.btn-primary {
  font-family: var(--font-main);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  background-color: transparent !important;
  transition: var(--transition-fast);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
  border: var(--btn-border);
  color: var(--color-accent);
}
.btn-primary:hover {
  background-color: var(--color-accent) !important;
  color: white !important;
}

.btn-secondary {
  font-family: var(--font-main);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  background-color: transparent !important;
  transition: var(--transition-fast);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
  border: 2px solid var(--bs-secondary);
  color: var(--bs-secondary);
}
.btn-secondary:hover {
  background-color: var(--bs-secondary) !important;
  color: white !important;
}

.btn-success {
  font-family: var(--font-main);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  background-color: transparent !important;
  transition: var(--transition-fast);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
  border: 2px solid var(--bs-success);
  color: var(--bs-success);
}
.btn-success:hover {
  background-color: var(--bs-success) !important;
  color: white !important;
}

.btn-danger {
  font-family: var(--font-main);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  border-radius: var(--btn-radius);
  background-color: transparent !important;
  transition: var(--transition-fast);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
  border: 2px solid var(--bs-danger);
  color: var(--bs-danger);
}
.btn-danger:hover {
  background-color: var(--bs-danger) !important;
  color: white !important;
}

.invalid-input {
    background-color: #ffdddd;
    border: 1px solid red;
}


/* MAP Related */
/* Size + height */
#trackMapPopOutModal .modal-dialog { max-width: 96vw; }
#trackMapPopOutModal .modal-content { height: 90vh; }

/* Make the map fill the available space */
#trackMapPopOutModal .modal-body {
  padding: 0;           /* optional: remove padding around the map */
  height: calc(90vh - 56px - 56px); /* minus header+footer heights; adjust */
}
#modalMapHost { height: 100%; }