/* ============================================================
   Bootstrap 5 Overrides  — resets BS2/style.css conflicts
   ============================================================ */

/* === NAVBAR === */
#main-navbar {
  min-height: 48px;
  padding: .2rem .75rem;
}
#main-navbar .container-fluid {
  gap: .35rem;
  flex-wrap: nowrap;
}
.navbar-brand img { height: 32px; }

/* === TOOLBAR BUTTONS === */
a.icon_form_action,
a.toolbar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 30px;
  min-width: 0 !important;
  padding: 0 .5rem !important;
  background-image: none !important;
  text-indent: 0 !important;
  font-size: .8rem;
  border-radius: .3rem;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff !important;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
a.icon_form_action:hover,
a.toolbar:hover {
  background-color: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.8);
}
a.icon_form_action.add   { background: #198754 !important; border-color:#198754; }
a.icon_form_action.add:hover { background: #157347 !important; }
a.icon_form_action.delete { background: #dc3545 !important; border-color:#dc3545; }
a.icon_form_action.delete:hover { background: #bb2d3b !important; }

#navigation-panel {
  display: flex !important;
  align-items: center;
  gap: .25rem;
  padding: 0;
  margin: 0;
}
#navigation-panel li { list-style: none; }

/* Navigation counter — plain badge, not button */
.nav-counter {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 30px;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 0 !important;
  cursor: default !important;
  padding: 0 .4rem !important;
  pointer-events: none;
}

/* Custom toolbar (Copy Form, Deploy…) */
a.toolbar {
  background: rgba(255,255,255,.1) !important;
}

/* Mobile: icon-only */
@media (max-width: 991px) {
  a.icon_form_action span,
  a.toolbar span { display: none !important; }
  #navigation-panel { flex-wrap: nowrap !important; }
}

/* === TABS === */
.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 2px solid #c8d6e5 !important;
  margin-bottom: 0 !important;
  background: transparent;
  padding: 0;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item { flex-shrink: 0; }
.nav-tabs .nav-link {
  color: #666 !important;
  font-size: .83rem;
  white-space: nowrap;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  border-radius: .35rem .35rem 0 0 !important;
  padding: .4rem 1rem;
  background: #f0f4f8 !important;
  transition: color .15s, background .15s;
  margin-bottom: -2px;
}
.nav-tabs .nav-link:hover {
  color: #1e3a5f !important;
  background: #e0eaf5 !important;
}
.nav-tabs .nav-link.active {
  color: #1e3a5f !important;
  font-weight: 600;
  background: #fff !important;
  border-color: #c8d6e5 #c8d6e5 #fff !important;
}
.tab-content {
  background: #fff;
  border: 1px solid #c8d6e5;
  border-top: none;
  border-radius: 0 0 .4rem .4rem;
  padding: .4rem .5rem;
  margin-bottom: .75rem;
}
.tab-content > .tab-pane { padding-top: .1rem; }

/* === SIDEBAR === */
.side-menu {
  padding-top: 0;
  font-size: .9rem;
  background: #f4f6fa;
}
.side-menu .sticky-top {
  background: #f4f6fa;
  padding: .5rem .5rem .3rem;
  border-bottom: 1px solid #dce3ee;
}

/* Collapsible desktop sidebar — toggled via the navbar hamburger
   button and persisted (jStorage "sidebar_collapsed"), so the form
   can use the full window width. */
body.sidebar-collapsed .side-menu {
  display: none !important;
}
body.sidebar-collapsed .main-content {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.serp-sidenav { list-style: none; padding: .25rem 0; margin: 0; }

/* Section headers */
.serp-sidenav .nav-section-header {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #7a8a9e;
  font-weight: 700;
  padding: .8rem .85rem .2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Menu links */
.serp-sidenav .nav-link {
  color: #2d3748 !important;
  padding: .32rem .85rem .32rem 1.1rem;
  border-radius: 0;
  line-height: 1.45;
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  border-left: 3px solid transparent;
  transition: background .1s, border-color .1s, color .1s;
}
.serp-sidenav .nav-link .bi { font-size: .75rem; opacity: .5; flex-shrink: 0; }
.serp-sidenav .nav-link:hover {
  background: #e4eaf5 !important;
  color: #1e3a5f !important;
  border-left-color: #93afd4;
}
.serp-sidenav .nav-link.active,
.serp-sidenav .active > .nav-link {
  background: #deeaf8 !important;
  color: #1e3a5f !important;
  font-weight: 600;
  border-left-color: #1e3a5f !important;
}

/* Nested items */
.serp-sidenav .serp-sidenav {
  padding: .1rem 0;
  background: rgba(0,0,0,.02);
}
.serp-sidenav .serp-sidenav .nav-link {
  padding-left: 1.8rem;
  font-size: .85rem;
  color: #4a5568 !important;
}

/* Sidebar background tint */
.side-menu {
  background: #f4f6fa;
  border-right: 1px solid #dce3ee !important;
}

/* Prevent SlickGrid's internal pixel-width header from forcing the
   panel column to exceed its flex track and wrap to a new row */
.row > .col {
  min-width: 0;
}

/* === SLICKGRID HEADER ===
   slickgrid.serp.css sets height:20px + line-height:20px assuming
   content-box, but BS5 sets box-sizing:border-box globally, so the
   4px+4px padding and 1px border ate into the content box and the
   20px line-height got clipped, pushing header text toward the
   bottom edge. Give the column box enough height (20 + 8 + 1) to
   fit the line-height again. */
.grid .slick-header-columns .slick-header-column.ui-state-default {
  height: 29px;
}

/* === GRID === */
.grid-resizable { margin-bottom: .75rem; }
.grid-header {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-bottom: none;
  border-radius: .375rem .375rem 0 0;
  padding: .35rem .65rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
}
.grid-header span.fw-semibold { font-size: .875rem; }
.grid-wrapper {
  border: 1px solid #dee2e6;
  border-radius: 0 0 .375rem .375rem;
  overflow: hidden;
}
.grid-wrapper .d-flex.grid-toolbar {
  background: #f8f9fa;
  padding: .2rem .4rem !important;
}
.grid-toolbar .btn {
  font-size: .75rem;
  padding: .15rem .35rem;
  line-height: 1.4;
}

/* === DETAIL FORM === */
.standard-form fieldset {
  border: 1px solid #e0e0e0 !important;
  border-radius: .4rem !important;
  padding: .75rem 1rem !important;
  margin-bottom: .75rem !important;
  background: #fff;
}
.standard-form legend {
  font-size: .85rem !important;
  font-weight: 600;
  color: #444;
  padding: 0 .4rem !important;
}
.standard-form .field { margin-bottom: .55rem; }
.standard-form label {
  font-size: .8rem;
  font-weight: 500;
  color: #555;
  margin-bottom: .15rem;
  display: block;
}
.standard-form input[type=text],
.standard-form textarea,
.standard-form select {
  border: 1px solid #ced4da;
  border-radius: .3rem;
  padding: .25rem .45rem;
  font-size: .8rem;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.standard-form input[type=text]:focus,
.standard-form textarea:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.2);
}

/* === ALERTS === */
.alert-error { background:#f8d7da; border-color:#f5c2c7; color:#842029; }

/* === SPACING — body padding-top set in <head> style === */
.main-content { padding: .75rem 1rem !important; }
h4.fw-semibold { margin-bottom: .65rem !important; font-size: 1.05rem; }
footer { margin-top: 0 !important; }

/* Grid sections with card feel */
.grid-resizable {
  border-radius: .4rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: visible;
  margin-bottom: .5rem;
  position: relative;
}

/* jQuery UI resize handle — full bottom bar, clickable */
.grid-resizable .ui-resizable-s {
  height: 28px;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: ns-resize !important;
  background: transparent;
  z-index: 100;
  position: absolute;
}
.grid-header {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f4f8 100%);
  border-bottom: 1px solid #d1dce8;
}

/* Sidebar background tint */
.side-menu {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0 !important;
}

/* === LOADING BAR === */
#loading {
  position: fixed; top: 48px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #60a5fa, #3b82f6, #60a5fa);
  background-size: 200%;
  animation: loadbar 1s linear infinite;
  z-index: 9999; display: none;
}
@keyframes loadbar {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* === MOBILE === */
@media (max-width: 767px) {
  #main-content { margin-top: 48px !important; }
  .main-content { padding: .5rem !important; }
  h4.fw-semibold { font-size: .95rem; margin-bottom: .4rem !important; }
  .navbar-brand img { height: 28px; }
}

/* === MISC === */
.navbar-inner { display: none !important; }
.input-block-level { width: 100%; }

/* Bootstrap 2 compat */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.hidden     { display: none !important; }
.btn-mini   { padding: .1rem .4rem; font-size: .75rem; }

/* === SELECT2 FIX === */
.select2-container { display: block; }
/* Text color fix — no border override to avoid double border */
.select2-container .select2-chosen {
  color: #212529 !important;
}
.select2-drop {
  border: 1px solid #ced4da !important;
  border-radius: 0 0 .375rem .375rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
  z-index: 9999 !important;
}
.select2-results .select2-highlighted {
  background: #0d6efd !important;
  color: #fff !important;
}
.select2-search input {
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
  padding: .25rem .5rem !important;
}

/* Select2 (v3) copies the "lookup-select" class onto its own
   .select2-container and leaves it display:inline-block; width:auto,
   which shrink-wraps to the selected text instead of filling the flex
   slot. Force it to fill the row so .select2-choice (width:auto,
   fills its parent) stretches across the available space. */
.select2-container.lookup-select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* style.css forces .select2-choice to display:inline-grid !important
   (shrink-to-fit, ignoring our 100% container above) and gives it a
   content-box-era height (17px line-height + 4px padding + 1px
   border = 22px). Under BS5's global box-sizing:border-box that
   height swallows the padding/border and clips the text. Make it a
   block that fills the container, with a border-box height that
   actually fits the line-height. */
.select2-container.lookup-select .select2-choice {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  height: 29px;
  line-height: 27px;
  padding: 0 8px;
}
/* Select2 choice box — remove right radius when button follows, and
   square off the dropdown arrow's right corners so it butts cleanly
   against the lookup-form button instead of leaving a rounded notch. */
div[style*="display:flex"] .select2-container .select2-choice {
  border-radius: 4px 0 0 4px !important;
}
.select2-container.lookup-select .select2-choice .select2-arrow {
  border-radius: 0 !important;
}

/* style.css adds a 5px margin-left to .btn-lookup-form, leaving a gap
   between it and the select2 arrow it's meant to sit flush against. */
.select2-container.lookup-select ~ a.btn-lookup-form {
  margin-left: 0 !important;
}

/* Field container */
.field { overflow: visible; }

/* === GRID HEIGHT — limit empty canvas space === */
.slick-pane { overflow: hidden; }
.slick-viewport { overflow-y: auto !important; }
[id^="panel-"].grid { min-height: 52px; }

/* === GRID EMPTY STATE === */
.slick-empty-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: .85rem;
  pointer-events: none;
}

/* === GRID LOADING === */
.grid-wrapper.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.6);
  z-index: 10;
}

/* === SIDEBAR STICKY FILTER === */
.side-menu .sticky-top { top: 56px !important; }

/* === GRID ROW HOVER (SlickGrid override) === */
.slick-row:hover .slick-cell { background: #f0f6ff !important; }
.slick-row.selected .slick-cell { background: #dbeafe !important; }

/* === SMOOTH PAGE TRANSITION === */
#panels { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* === MOBILE FOOTER === */
@media (max-width: 767px) {
  #main-content { margin-top: 52px !important; }
  .side-menu .sticky-top { top: 52px !important; }
}