/* includes/searchbar.css */
/* --- OmniServe Search (include-safe) --- */
.os-search-wrap{ position:relative; padding:10px 12px; background:#f4f7fb; border-bottom:1px solid rgba(0,0,0,.08); }
/* Constrain to central container width */
.os-search-bar, .os-chip-row, .os-panel, .os-suggest{ max-width: 700px; margin: 0 auto; }
.os-search-bar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.os-search-left{ flex:1 1 520px; min-width:260px; display:flex; gap:10px; align-items:center; }
.os-search-right{ flex:0 0 auto; display:flex; gap:8px; align-items:center; }
.os-search-input{ flex: 1 1 auto; height: 42px; border-radius: 12px; border: 1px solid rgba(0,0,0,.15); background:#fff; padding: 0 12px 0 40px; outline: none; font-size: 15px; color:#111; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.os-search-input:focus{ border-color: rgba(24,72,107,.55); box-shadow: 0 8px 22px rgba(24,72,107,.15); }
.os-search-icon{ position:absolute; width:18px; height:18px; left: 18px; opacity: .55; pointer-events:none; color:#111; }
/* Buttons: FORCE readable text */
.os-btn{ height:42px; border-radius: 12px; border: 1px solid rgba(0,0,0,.14); background:#fff; padding: 0 12px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.06); display:inline-flex; align-items:center; gap:8px; color:#111; cursor:pointer; }
.os-btn:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.10); transform: translateY(-1px); }
.os-btn:active{ transform: translateY(0px); }
.os-btn-primary{ background:#18486b; color:#fff; border-color: rgba(0,0,0,.08); }
.os-btn-icon{ width:42px; padding:0; justify-content:center; }
.os-ico{  width:22px;  height:22px;  fill:none;  stroke:currentColor;  stroke-width:1;          /* was 4 */  stroke-linecap:round;  stroke-linejoin:round;}
/* Chips */
.os-chip-row{ margin: 8px auto 0 auto; display:flex; gap:8px; flex-wrap:wrap; }
.os-chip{ display:inline-flex; align-items:center; gap:8px; padding: 7px 10px; border-radius: 999px; background:#fff; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 6px 18px rgba(0,0,0,.05); font-size: 13px; cursor:pointer; user-select:none; color:#111; }
.os-chip b{ font-weight:700; }
.os-chip .x{ opacity:.7; font-weight:900; }
/* Panel */
.os-panel{ margin: 10px auto 0 auto; display:none; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,.12); padding: 12px; color:#111; }
.os-panel.open{ display:block; }
.os-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 860px){ .os-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .os-grid{ grid-template-columns: 1fr; } .os-search-left{ flex:1 1 100%; } .os-search-right{ width:100%; justify-content:flex-end; } }
.os-field label{ display:block; font-size:12px; opacity:.75; margin: 2px 0 6px 2px; color:#111; }
.os-field input[type="text"], .os-field input[type="date"], .os-field select{ width:100%; height: 40px; border-radius: 12px; border: 1px solid rgba(0,0,0,.15); padding: 0 10px; outline:none; background:#fff; color:#111; }
.os-inline{ display:flex; align-items:center; gap:8px; height:40px; padding:0 6px; border-radius:12px; border: 1px solid rgba(0,0,0,.10); background:#f7f9fc; color:#111; }
.os-panel-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 10px; flex-wrap:wrap; }
/* Suggestions dropdown */
.os-suggest{ position:relative; }
.os-suggest-box{ position:absolute; top: 48px; left: 0; right: 0; z-index: 9999; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius: 14px; box-shadow: 0 18px 38px rgba(0,0,0,.16); overflow:hidden; display:none; color:#111; }
.os-suggest-box.open{ display:block; }
.os-suggest-item{ padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.06); cursor:pointer; display:flex; justify-content:space-between; gap:10px; color:#111; }
.os-suggest-item:last-child{ border-bottom:none; }
.os-suggest-item:hover, .os-suggest-item.active{ background:#f1f6ff; }
.os-suggest-title{ font-weight:700; color:#111; }
.os-suggest-meta{ font-size:12px; opacity:.75; color:#111; }
/* If your endpoint returns HTMLContent with <a> tags */
.os-suggest-box a{ color:#111 !important; text-decoration:none !important; display:block; }
.os-suggest-box a:hover{ text-decoration:none !important; }
/* --- Fix "tabbed in / indented" suggestion rows --- */
/* Make suggestion rows layout stable */
.os-suggest-item{  display: flex;  align-items: flex-start;  justify-content: space-between;  padding: 10px 12px;}

/* Force the left content to always anchor left */
.os-suggest-item > div:first-child{  flex: 1 1 auto;  min-width: 0;  text-align: left;}

/* Prevent badge from affecting layout */
.os-suggest-item > div:last-child{  flex: 0 0 auto;  margin-left: 16px;  text-align: right;  white-space: nowrap;}
/* View toggle shows the OTHER mode (action icon) */

/* Hide both by default */
.os-view-ico { display: none; }

/* If currently GROUPED, show FLAT icon (3 lines) */
.os-view-btn[data-view="grouped"] .os-view-ico-flat {  display: inline-block;}

/* If currently FLAT, show GROUPED icon (stacked blocks) */
.os-view-btn[data-view="flat"] .os-view-ico-grouped {  display: inline-block;}

/* Ensure strokes render properly */
.os-ico path, .os-ico rect {  stroke: currentColor;  fill: none;  stroke-width: 2;  stroke-linecap: round;  stroke-linejoin: round;}

.osg-scope-pill{  display:inline-flex; align-items:center; gap:8px;  padding:7px 10px; border-radius:999px;  background:#fff; border:1px solid rgba(0,0,0,.14);  box-shadow:0 8px 18px rgba(0,0,0,.06);  font-size:12px; font-weight:900; color:#0b1220 !important;  user-select:none; cursor:pointer;}
.osg-scope-pill .dot{  width:10px; height:10px; border-radius:50%;  background:#0b1220; opacity:.25;}.osg-scope-pill.local .dot{ opacity:1; }

/* Prevent layout shift when content height changes */
html { scrollbar-gutter: stable; }

/* Fallback for older browsers */
html { overflow-y: scroll; }