/* base */
.cojds-lite{ --gap:12px; --radius:8px; font-size:13px; }
.cojds-lite .button-small{ padding:0 8px; height:26px; line-height:24px; }

/* topbar (centered) */
.cojds-lite .cojds-topbar{
  display:flex; justify-content:center; align-items:flex-end;
  gap:var(--gap); margin:8px 0 12px;
  padding:10px; background:#fff; border:1px solid #dcdcde; border-radius:var(--radius);
}
.cojds-lite .cojds-topbar .cojds-left{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; justify-content:center; }
.cojds-lite .field-group{ display:flex; flex-direction:column; gap:4px; min-width:180px; }
.cojds-lite .field-group label{ font-weight:600; }
.cojds-lite .divider{ align-self:center; opacity:.6; font-weight:700; }

/* blue clear */
.cojds-lite .clear-blue.button-primary{ background:#2c7be5; border-color:#2c7be5; color:#fff; }
.cojds-lite .clear-blue.button-primary:hover{ background:#2366c9; border-color:#2366c9; }

/* geo filters row - identical styling to main pickers */
/* Geographic Filters Accordion */
.cojds-lite .cojds-geo-accordion {
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-height: 0;
  margin-bottom: 0; /* Remove bottom margin when collapsed */
  padding: 0 0 4px 0; /* Add bottom padding to show rounded corners */
}

.cojds-lite .cojds-geo-accordion.expanded {
  max-height: 224px; /* Increased by 4px to account for bottom padding */
  margin-bottom: var(--gap); /* Add margin when expanded */
}

.cojds-lite .cojds-geo-accordion .cojds-geo-filters-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-bottom: 0; /* Remove margin from inner row */
  padding: 0; /* Ensure no padding issues */
}

/* Compact height for geo picker lists */
.cojds-lite .cojds-geo-accordion .picker-list {
  max-height: 120px; /* Shorter than main pickers (220px) */
  overflow-y: auto;
  border: 1px solid #dcdcde;
  border-radius: var(--radius);
  padding: 8px;
}

/* Ensure geo accordion doesn't overlap main pickers */
.cojds-lite .cojds-geo-accordion {
  position: relative;
  z-index: 1;
}

.cojds-lite .cojds-picker-row {
  position: relative;
  z-index: 2; /* Ensure main pickers are above geo accordion */
}

/* Toggle button styling */
.cojds-lite .geo-toggle-icon {
  transition: transform 0.2s ease-in-out;
  display: inline-block;
}

.cojds-lite .geo-toggle-icon.expanded {
  transform: rotate(180deg);
}

/* Geo Active/Passive Visual States */
.cojds-lite .picker.geo-active {
  background: #f0f8ff; /* Light blue background */
  border-left: 3px solid #2c7be5; /* Blue left border */
}

.cojds-lite .picker.geo-active .picker-head strong {
  color: #2c7be5; /* Blue text for title */
  font-weight: 600;
}

.cojds-lite .picker.geo-passive {
  opacity: 0.85; /* Slightly dimmed */
  background: #fafafa; /* Very light gray */
}

.cojds-lite .picker.geo-passive .picker-head strong {
  color: #666; /* Grayed text */
  font-style: italic;
}

/* pickers row */
.cojds-lite .cojds-picker-row{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:var(--gap);
  margin-top: var(--gap); /* Ensure proper spacing from geo accordion */
}
.cojds-lite .picker{
  background:#fff; border:1px solid #dcdcde; border-radius:var(--radius); padding:10px;
  display:flex; flex-direction:column; gap:6px;
}
.cojds-lite .picker-head{ display:flex; justify-content:space-between; align-items:center; }
.cojds-lite .picker-tools{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cojds-lite .picker-search{ width:100%; box-sizing:border-box; }
/* picker lists with checkboxes */
.cojds-lite .picker-list{
  max-height:220px; overflow-y:auto; border:1px solid #dcdcde; border-radius:var(--radius); padding:8px;
}
.cojds-lite .cojds-check{
  display:flex; align-items:center; gap:6px; padding:2px 0; cursor:pointer;
}
.cojds-lite .cojds-check input[type="checkbox"]{ margin:0; }
.cojds-lite .cojds-check-label{ flex:1; font-size:12px; line-height:1.3; }
.cojds-lite .cojds-check:hover{ background:#f6f7f7; border-radius:4px; padding:2px 4px; margin:0 -4px; }

/* action bar */
.cojds-lite .cojds-actions-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:#fff; border:1px solid #dcdcde; border-radius:var(--radius); padding:10px; margin-top:10px;
}
.cojds-lite .cojds-actions-bottom .left, .cojds-lite .cojds-actions-bottom .right{ display:flex; gap:8px; align-items:center; }
.cojds-lite .cojds-actions-bottom .inline{ user-select:none; }

/* results + bottom pager */
.cojds-lite .result-head{ display:flex; justify-content:space-between; align-items:center; margin:8px 0; }
.cojds-lite .result-head .summary{ opacity:.85; font-size:12px; }

.cojds-lite .table-wrap{ overflow:auto; border:1px solid #dcdcde; border-radius:var(--radius); background:#fff; }
.cojds-lite #cojds-table{ border-collapse:separate; border-spacing:0; min-width:880px; }
.cojds-lite #cojds-table thead th{ position:sticky; top:0; z-index:2; background:#f6f7f7; box-shadow:0 1px 0 #dcdcde; cursor:pointer; white-space:nowrap; }
.cojds-lite #cojds-table thead th.sort-asc::after{ content:" ▲"; }
.cojds-lite #cojds-table thead th.sort-desc::after{ content:" ▼"; }
.cojds-lite #cojds-table tbody tr:hover{ background:#f7fbff; }

.cojds-lite .cojds-pagination{ display:flex; justify-content:flex-end; padding:8px 0; }
.cojds-lite .pager{ display:flex; gap:8px; align-items:center; }
.cojds-lite .pager select{ height:30px; }

.cojds-lite .empty, .cojds-lite .error, .cojds-lite .loading{ padding:12px; opacity:.85; }

/* make jQuery UI datepicker sit on top */
.ui-datepicker{ z-index: 100000 !important; }

/* responsive */
@media (max-width: 1200px){
  .cojds-lite .cojds-picker-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px){
  .cojds-lite .cojds-topbar{ flex-direction:column; align-items:stretch; }
  .cojds-lite .cojds-picker-row{ grid-template-columns: 1fr; }
}
/* --- Datepicker hard styles (opaque panel) --- */
.ui-datepicker {
  z-index: 100000 !important;           /* float above everything */
  background: #fff !important;          /* solid white */
  border: 1px solid #c3c4c7 !important; /* WP-ish border */
  box-shadow: 0 8px 24px rgba(0,0,0,.18);/* soft shadow */
  border-radius: 6px;
}

.ui-datepicker table,
.ui-datepicker td,
.ui-datepicker th {
  background: #fff !important;          /* ensure cells are opaque white */
}

.ui-datepicker .ui-datepicker-header {
  background: #f6f7f7 !important;
  border-bottom: 1px solid #dcdcde !important;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default {
  background: #fff !important;
  border: 1px solid transparent !important;
  color: #1d2327 !important;
}

.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-widget-content .ui-state-hover {
  background: #f0f6ff !important;
  border-color: #bfdcff !important;
}

.ui-datepicker .ui-state-active {
  background: #e2efff !important;
  border-color: #8cc2ff !important;
}
/* Datepicker refinements */
.ui-datepicker{
  z-index:100000 !important;
  background:#fff !important;
  border:1.5px solid #7a7d82 !important;   /* stronger border */
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  border-radius:8px;
  overflow:hidden;                          /* clip header corners cleanly */
}

/* Hide prev/next controls entirely */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{ display:none !important; }

/* Header with more room for selects */
.ui-datepicker .ui-datepicker-header{
  background:#f6f7f7 !important;
  border-bottom:1px solid #dcdcde !important;
  padding:10px 12px !important;
}
.ui-datepicker .ui-datepicker-title{
  display:flex; gap:10px; justify-content:center; align-items:center;
}
.ui-datepicker .ui-datepicker-title select{
  height:30px; padding:2px 6px;
  border:1px solid #c3c4c7; border-radius:4px; background:#fff;
}
/* give month + year more space */
.ui-datepicker .ui-datepicker-month{ min-width:95px; }
.ui-datepicker .ui-datepicker-year{ min-width:90px; }

/* Body */
.ui-datepicker table{ background:#fff !important; width:100%; }
.ui-datepicker th{ font-weight:600; color:#444; }
.ui-datepicker td a{
  display:block; text-align:center; padding:4px 0;
  border:1px solid transparent !important; color:#1d2327 !important;
}
.ui-datepicker td a:hover{ background:#eef6ff !important; border-color:#bfdcff !important; }
.ui-datepicker .ui-state-active{ background:#dfeeff !important; border-color:#8cc2ff !important; }

/* Button pane */
.ui-datepicker .ui-datepicker-buttonpane{
  background:#fff; border-top:1px solid #e2e4e7; padding:8px 10px;
  display:flex; gap:8px; justify-content:flex-start;
}
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current,
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close{
  background:#2c7be5; border:1px solid #2c7be5; color:#fff;
  padding:4px 10px; border-radius:4px; font-weight:700;
}
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current:hover,
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-close:hover{
  background:#2366c9; border-color:#2366c9;
}
/* === COJDS: Checkbox pickers === */
.cojds-checkbox-list {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px;
  max-height: 300px;
  overflow: auto;
  background: #fff;
}
.cojds-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.cojds-checkbox-item:hover {
  background: #f5f5f7;
}
.cojds-checkbox-item input {
  margin: 0;
}
.cojds-checkbox-empty {
  color: #666;
  font-style: italic;
  padding: 6px;
}
.picker.is-driver .cojds-checkbox-list {
  border-color: #2271b1;
  box-shadow: 0 0 0 2px rgba(34,113,177,0.15) inset;
}
/* No dimming - A is always fully visible with normal color */

/* === COJDS: Debug panel === */
.cojds-debug {
  margin: 12px 0 16px;
  padding: 8px 10px;
  background:#f6fbff;
  border:1px solid #cfe8ff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
}
.cojds-debug .dbg-row { margin: 6px 0; }
.cojds-debug .dbg-sub { color:#555; margin-top: 3px; }