/* GPSWOX UI overrides — Inter font + stronger contrast.
 * Loaded after the active theme CSS in Frontend/Layouts/partials/head.blade.php.
 * Light themes only — dark themes set their own foreground colors. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --gpswox-text: #111827;
  --gpswox-text-muted: #4B5563;
  --gpswox-text-faint: #6B7280;
  --gpswox-border: #D1D5DB;
  --gpswox-border-subtle: #E5E7EB;
  --gpswox-focus: #2563EB;
}

html, body,
.btn:not(.icon), .form-control, .navbar, .modal-content, .panel,
table, td, th, input, select, textarea, button {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", sans-serif !important;
}

/* Preserve icon fonts — force icomoon back on icon elements */
.icon, .ico, [class*="ico-"],
i.icon, i.btn.icon {
  font-family: 'icomoon' !important;
}
[class*="icon-fa"], .fa {
  font-family: 'FontAwesome' !important;
}

body { color: var(--gpswox-text); }

/* Secondary text */
.text-muted, .help-block, .form-text,
small, .small, .caption,
.list-group-item-text {
  color: var(--gpswox-text-muted) !important;
}

/* Disabled / placeholder */
.form-control[disabled], .form-control[readonly], [disabled],
.form-control::placeholder, ::placeholder {
  color: var(--gpswox-text-faint) !important;
}

/* Borders — clearer separation */
.form-control,
.panel, .panel-default,
.modal-content,
.well,
.btn-default,
.nav-tabs > li > a,
.input-group-addon {
  border-color: var(--gpswox-border) !important;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > td,
.table > thead > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border-color: var(--gpswox-border-subtle) !important;
}

/* Table headers a bit stronger */
.table > thead > tr > th {
  color: var(--gpswox-text-muted);
  font-weight: 600;
}

/* Tabular numerals — aligned digits in tables (positions, speed, dates) */
.table, .datatable, .dataTables_wrapper,
.pos-table, .device-row,
[data-tabular="true"] {
  font-feature-settings: "tnum" 1, "cv11" 1;
}

/* Focus rings — keyboard accessibility */
*:focus-visible {
  outline: 2px solid var(--gpswox-focus);
  outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus,
.form-control:focus-visible {
  outline: 2px solid var(--gpswox-focus);
  outline-offset: 1px;
  border-color: var(--gpswox-focus) !important;
  box-shadow: none;
}

/* Slightly stronger weight on labels and headings — Inter is lighter visually than Open Sans */
label, .control-label, .form-label,
.modal-title, .panel-title {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
 * Polish pass — header icons, marker tooltip, device widget, add buttons.
 * ------------------------------------------------------------------------- */

/* Top navbar: continuous solid bar across full width, pinned flush to
 * the top of the viewport with no gap. */
html, body { margin: 0 !important; padding: 0 !important; }

#header.folded {
  background-color: #ffffff;
  border-bottom: 1px solid var(--gpswox-border-subtle);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
  margin: 0 !important;
  padding: 0 !important;
  min-height: 50px;
}
#header.folded::before {
  display: none !important;
}
#header.folded .navbar.main-navbar {
  background-color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 50px;
}

/* Vertically center brand and right-side icons inside the navbar.
 * Bootstrap 3 uses floats for .navbar-brand and .navbar-nav, which
 * means children sit at the top edge when the bar grows taller than
 * its content. Convert the container + collapse + nav-list to flex so
 * everything aligns on the centerline. */
#header.folded .navbar.main-navbar > .container-fluid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100%;
  min-height: inherit;
}
#header.folded .navbar.main-navbar .navbar-header {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
}
#header.folded .navbar.main-navbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  margin: 0 !important;
  float: none !important;
}
#header.folded .navbar.main-navbar .navbar-brand > img {
  max-height: 32px;
  width: auto;
  display: block;
}
#header.folded .navbar.main-navbar .navbar-collapse {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
#header.folded .navbar.main-navbar .navbar-nav {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 16px 0 0 !important;
}
#header.folded .navbar.main-navbar .navbar-nav > li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}
#header.folded .navbar.main-navbar .navbar-nav > li > a {
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  line-height: 1 !important;
}

/* Empty .banner elements from Popups/index_banners_top.blade.php
 * can still take vertical space even when there's nothing to show.
 * Collapse them so they don't push the header down. */
.banner:empty { display: none !important; }
#header.folded .navbar.main-navbar .navbar-brand,
#header.folded .navbar.main-navbar .navbar-nav {
  border-bottom: 0 !important;
}
/* Kill the diagonal/triangle accents that Bootstrap 3 GPSWOX puts
 * around the brand and nav (they only made sense with the "split" navbar) */
#header.folded .navbar.main-navbar .navbar-brand::before,
#header.folded .navbar.main-navbar .navbar-brand::after,
#header.folded .navbar.main-navbar .navbar-nav::before,
#header.folded .navbar.main-navbar .navbar-nav::after {
  display: none !important;
  border: 0 !important;
}

/* Sidebar docks flush against the navbar's bottom edge.
 * Default GPSWOX reserves $sidebar-top-space (100px) from the top,
 * which leaves a visible map strip between the navbar and the
 * sidebar tabs. Pin the sidebar to top: $navbar-height instead. */
#sidebar.sidebar.left {
  top: 50px !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  border-right: 1px solid var(--gpswox-border-subtle);
}
#sidebar.sidebar.left .sidebar-content {
  border-right: 0;
}

/* Header icons (top-right): bump weight and add hover affordance */
.main-navbar .navbar-nav > li > a,
.navbar.main-navbar .navbar-nav > li > a {
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
  margin: 0 2px;
}
.main-navbar .navbar-nav > li > a > .icon,
.navbar.main-navbar .navbar-nav > li > a > .icon {
  color: var(--gpswox-text-muted) !important;
  font-size: 17px;
}
.main-navbar .navbar-nav > li > a:hover,
.main-navbar .navbar-nav > li > a:focus,
.main-navbar .navbar-nav > li.open > a {
  background-color: #F3F4F6 !important;
}
.main-navbar .navbar-nav > li > a:hover > .icon,
.main-navbar .navbar-nav > li > a:focus > .icon,
.main-navbar .navbar-nav > li.open > a > .icon {
  color: var(--gpswox-text) !important;
}
.main-navbar .navbar-nav > li > a > .badge {
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

/* Leaflet marker tooltip + popup — modern card style */
.leaflet-tooltip {
  font-family: "Inter", sans-serif !important;
  background: #ffffff !important;
  border: 1px solid var(--gpswox-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px -2px rgba(17, 24, 39, 0.10),
              0 2px 4px -2px rgba(17, 24, 39, 0.05) !important;
  padding: 5px 10px !important;
  color: var(--gpswox-text) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: nowrap;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  border-top-color: var(--gpswox-border) !important;
  border-bottom-color: var(--gpswox-border) !important;
  border-left-color: var(--gpswox-border) !important;
  border-right-color: var(--gpswox-border) !important;
}
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  box-shadow: 0 8px 24px -4px rgba(17, 24, 39, 0.12),
              0 4px 8px -4px rgba(17, 24, 39, 0.06) !important;
  border: 1px solid var(--gpswox-border-subtle) !important;
}
.leaflet-popup-content {
  font-family: "Inter", sans-serif !important;
  color: var(--gpswox-text);
}
.leaflet-popup-tip {
  box-shadow: 0 2px 4px rgba(17, 24, 39, 0.06) !important;
}

/* Bottom widget bar — pin to viewport bottom and let widgets be as
 * tall as their content requires. No internal vertical scroll: the
 * bar grows up from the bottom edge to fit the tallest widget. */
#bottombar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-height: none !important;
}
#bottombar #widgets {
  height: auto !important;
  max-height: none !important;
}
#bottombar #widgets .widgets-content {
  overflow-x: auto;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}
#bottombar #widgets .widgets-content .widget {
  height: auto !important;
  vertical-align: top;
}
#bottombar #widgets .widgets-content .widget .widget-body {
  height: auto !important;
  overflow: visible !important;
}
/* Map controls bottom-right need to sit above the bottombar */
.map-controls.bottom-right {
  bottom: 0;
}

/* Device widget (bottom panel) — typography + allow values to wrap.
 * Original GPSWOX behavior: `max-width: 1px` + `text-overflow: ellipsis`
 * + `white-space: nowrap` on every TD = aggressive truncation that hides
 * the full address ("AADL 5000 lgts K..." style). We undo those 3
 * constraints on the value column so long content wraps onto multiple
 * lines naturally. Labels still stay on one line. */
.widget.widget-device .widget-body table {
  table-layout: auto;
  width: 100% !important;
  max-width: 380px;
}
.widget.widget-device .widget-body table tr > td {
  font-size: 13px;
  line-height: 20px;
  padding: 5px 4px;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  vertical-align: top;
}
.widget.widget-device .widget-body table tr > td:first-child {
  color: var(--gpswox-text-muted);
  font-weight: 500;
  white-space: nowrap !important;
  width: 1% !important;
  padding-right: 10px !important;
}
.widget.widget-device .widget-body table tr > td:last-child {
  color: var(--gpswox-text);
  font-weight: 500;
  white-space: normal !important;
  word-break: break-word;
  width: 100% !important;
}
.widget.widget-device .widget-body table tr > td .pull-right {
  margin-left: 6px;
}

/* Unify "+ add" buttons across the app — primary blue style everywhere */
.btn.btn-action,
.widget-empty .btn.btn-default,
.action-block .btn.btn-action {
  background: var(--gpswox-focus) !important;
  border: 1px solid var(--gpswox-focus) !important;
  color: #ffffff !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 500;
  border-radius: 6px;
  padding: 7px 14px;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn.btn-action:hover,
.btn.btn-action:focus,
.widget-empty .btn.btn-default:hover,
.widget-empty .btn.btn-default:focus,
.action-block .btn.btn-action:hover,
.action-block .btn.btn-action:focus {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  color: #ffffff !important;
}
.btn.btn-action > .icon,
.widget-empty .btn.btn-default > .icon {
  color: #ffffff !important;
}