/* =========================================================
   SP — BOOK EQUIPMENT HEADER (Figma look)
   - Align date + search heights
   - Tabs instead of pills
   - Figma-ish colors
   Scope: only affects the book equipment header area
   ========================================================= */

   #sp-book-equipment-header{
    background:#fff !important;
  }
  
  /* Make the row align nicely like Figma */
  #sp-book-equipment-header .sp-date-row{
    display:flex !important;
    align-items:flex-end !important;   /* labels sit above inputs */
    gap:24px !important;
    flex-wrap:wrap !important;
    margin-bottom:12px !important;
  }
  
  /* Label typography (Figma-ish) */
  #sp-book-equipment-header .sp-date-row label{
    font-size:12px !important;
    font-weight:510 !important;
    color:#6E6E6E !important;
    letter-spacing:.2px !important;
    gap:8px !important;
  }
  
  /* Date inputs */
  #sp-book-equipment-header .sp-date-row input[type="date"]{
    height:40px !important;                 /* <-- key: match search height */
    padding:0 12px !important;
    border:1px solid #E6E6E6 !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#111 !important;
    font-size:14px !important;
    min-width:190px !important;
    box-shadow:none !important;
  }
  
  /* Search wrap (your JS-inserted block) */
  #sp-book-equipment-header .sp-inline-search-wrap{
    display:flex !important;
    align-items:flex-end !important;
    gap:12px !important;
    flex:1 1 520px !important;
    min-width:320px !important;
  }
  
  /* Search input */
  #sp-book-equipment-header .sp-inline-search{
    height:40px !important;                 /* <-- key: match date height */
    width:100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding:0 14px !important;
    border:1px solid #E6E6E6 !important;
    border-radius:10px !important;
    background:#fff !important;
    font-size:14px !important;
    color:#111 !important;
    box-shadow:none !important;
  }
  
  #sp-book-equipment-header .sp-inline-search::placeholder{
    color:#9AA0A6 !important;
  }
  
  #sp-book-equipment-header .sp-inline-search:focus{
    outline:none !important;
    border-color:#0b57d0 !important;
    box-shadow:0 0 0 3px rgba(11,87,208,.10) !important;
  }
  
  /* Clear should look like Figma text link (not a big blue button) */
  #sp-book-equipment-header .sp-inline-clear{
    height:40px !important;
    padding:0 6px !important;
    border:none !important;
    background:transparent !important;
    color:#0b57d0 !important;
    font-size:14px !important;
    font-weight:600 !important;
    cursor:pointer !important;
  }
  
  #sp-book-equipment-header .sp-inline-clear:hover{
    text-decoration:underline !important;
  }
  
  /* =========================================================
     Tabs (instead of pills)
     ========================================================= */
  
  #sp-book-equipment-header .sp-pills{
    display:flex !important;
    gap:26px !important;
    flex-wrap:wrap !important;
  
    padding:8px 0 0 !important;
    margin:0 !important;
  
  }
  
  /* Tab base */
  #sp-book-equipment-header .sp-pill{
    height:auto !important;
    padding:10px 0 12px !important;
  
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
  
    color:#6E6E6E !important;
    font-size:16px !important;
    font-weight:510 !important;
    text-decoration:none !important;
  
    position:relative !important;
  }
  
  /* Hover */
  #sp-book-equipment-header .sp-pill:hover{
    color:#111 !important;
  }
  
  /* Active tab underline */
  #sp-book-equipment-header .sp-pill.is-active{
    color:#111 !important;
    text-decoration:none !important;
  }
  
  #sp-book-equipment-header .sp-pill.is-active::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
  - bottom: 2px !important;
  - height: 2px !important;
  + bottom: -10px !important;  /* pushes it to the container bottom */
  + height: 3px !important;    /* feels more like a tab indicator */
    background: #111111 !important;
  - border-radius: 2px !important;
  + border-radius: 2px !important;
  }
  /* =========================================================
     SP — HEADER UI OVERRIDES (match Figma)
     Paste at the VERY BOTTOM of your CSS
     ========================================================= */
  
  body:has(#sp-book-equipment-header){
    --sp-fg-tab: #6E6E6E;    /* Figma-ish grey */
    --sp-fg-active: #111111; /* active black */
    --sp-field-h: 40px;      /* unified input height */
  }
  
  /* ---------- Make date + search row align perfectly ---------- */
  #sp-book-equipment-header .sp-date-row{
    align-items: flex-start !important;   /* key: removes the “date lower than search” look */
    gap: 18px !important;
  }
  
  /* labels consistent */
  #sp-book-equipment-header .sp-date-row label{
    gap: 6px !important;
  }
  
  /* Date inputs: same height as search */
  #sp-book-equipment-header .sp-date-row input[type="date"]{
    height: var(--sp-field-h) !important;
    line-height: var(--sp-field-h) !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    background: #EEF6FF !important;
  }
  
  /* Search wrap: force the input row to match the date input height */
  #sp-book-equipment-header .sp-inline-search-wrap{
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Search input */
  #sp-book-equipment-header .sp-inline-search{
    height: var(--sp-field-h) !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }
  
  /* Clear button */
  #sp-book-equipment-header .sp-inline-clear{
    height: var(--sp-field-h) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: #0B57D0 !important;
    color: #fff !important;
    border: none !important;
  }
  
  /* ---------- Turn pills into Figma-style tabs ---------- */
  #sp-book-equipment-header .sp-pills{
    gap: 22px !important;
    padding: 2px 0 0px 0 !important;
  }
  
  /* Tab base */
  #sp-book-equipment-header .sp-pill{
    /* remove pill look */
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  
    /* tab typography */
    height: auto !important;
    padding: 10px 2px 12px !important;
  
    font-size: 16px !important;
    font-weight: 510 !important;
    color: var(--sp-fg-tab) !important;
    text-decoration: none !important;
  
    position: relative !important;
  }
  
  /* Hover subtle */
  #sp-book-equipment-header .sp-pill:hover{
    color: #2f2f2f !important;
    background: transparent !important;
  }
  
  /* Active tab: black text + BLACK underline */
  #sp-book-equipment-header .sp-pill.is-active{
    color: var(--sp-fg-active) !important;
    text-decoration: none !important;
  }
  
  /* Underline (black) */
  #sp-book-equipment-header .sp-pill.is-active::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 4px !important;
    height: 3px !important;
    background: #111111 !important;
    border-radius: 0px !important;
  }
  /* =========================================================
     SP — HEADER HEIGHT TIGHTEN (tabs higher, less gap)
     Paste at the very bottom (after the last patch)
     ========================================================= */
  
  /* Reduce space under the date/search row */
  #sp-book-equipment-header .sp-date-row{
    margin-bottom: 4px !important;   /* was ~10px */
  }
  
  /* Bring tabs closer + reduce their own top padding */
  #sp-book-equipment-header .sp-pills{
    padding-top: 2px !important;     /* was 10px */
    margin-top: 0 !important;
  }
  
  /* Make each tab take less vertical space */
  #sp-book-equipment-header .sp-pill{
    padding-top: 3px !important;     /* was 10px */
    padding-bottom: 3px !important;  /* was 12px */
  }
  
  /* Move underline up slightly so it doesn't add visual height */
  #sp-book-equipment-header .sp-pill.is-active::after{
    bottom: -11px !important;          /* was 4px */
  }
  
  #sp-book-equipment-header .sp-pills{
    overflow: visible !important;
  }
  /* =========================================================
     SP — Space between top bar and content (sidebar + grid)
     ========================================================= */
  
  /* main gap below the header bar */
  body:has(#sp-book-equipment-header) #sp-equipment-browser{
    margin-top: 22px !important;   /* tweak: 16–32px */
  }
  
  /* (optional) if the sidebar card still feels tight at the top */
  body:has(#sp-book-equipment-header) #sp-equipment-browser .sp-sidebar{
    margin-top: 0 !important;      /* keep clean */
  }
  
  /* ================================
     FIX: keep Search on same row
     Desktop/tablet: no wrap
     Mobile: allow wrap
  ================================ */
  
  /* 1) Force single row on desktop */
  #sp-book-equipment-header .sp-date-row{
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  
  /* 2) Keep date fields a fixed width so Search can fill remaining space */
  #sp-book-equipment-header .sp-date-row > label{
    flex: 0 0 260px !important;   /* adjust: 240–280 */
    min-width: 240px !important;
  }
  
  /* 3) Make the search block be the flexible remainder */
  #sp-book-equipment-header .sp-inline-search-wrap{
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;      /* critical: allows shrinking instead of wrapping */
  }
  
  /* 4) Search input should fill remaining width (no caps) */
  #sp-book-equipment-header .sp-inline-search{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;      /* critical */
  }
  
  /* 5) Clear button should never squeeze the input weirdly */
  #sp-book-equipment-header .sp-inline-clear{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  
  /* 6) On smaller screens, allow wrapping again */
  @media (max-width: 900px){
    #sp-book-equipment-header .sp-date-row{
      flex-wrap: wrap !important;
    }
    #sp-book-equipment-header .sp-date-row > label{
      flex: 1 1 200px !important;
      min-width: 200px !important;
    }
    #sp-book-equipment-header .sp-inline-search-wrap{
      flex: 1 1 100% !important;
      width: 100% !important;
    }
  }
  /* =========================================================
     SP — FULL-BLEED TOP BAR (Astra-safe, no left-shift)
     Put at VERY BOTTOM of your CSS
     ========================================================= */
  
  /* Keep the header in normal flow (no left/translate hacks) */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header{
    position: sticky !important;
    top: var(--sp-adminbar, 0px) !important;
    z-index: 99990 !important;
  
    /* IMPORTANT: do NOT set left/transform here */
    left: auto !important;
    transform: none !important;
  
    background: transparent !important; /* background handled by ::before */
    border-bottom: 0 !important;
    box-shadow: none !important;
  
    /* make sure pseudo element positions correctly */
    position: sticky !important;
  }
  
  /* Full-bleed background layer */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header::before{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  
    width: 110vw !important;
    height: 100% !important;
  
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10) !important;
  
    z-index: -1 !important;
    pointer-events: none !important;
  }
  /* ===============================
     FIGMA INPUT PILLS (date + search)
     =============================== */
  
  body:has(#sp-book-equipment-header){
    --sp-pill-h: 36px;        /* Figma shows 36px */
    --sp-pill-r: 20px;        /* Figma radius */
    --sp-pill-b: #C6C6C6;     /* Figma border */
    --sp-pill-bg: #fff;       /* no blue fill */
  }
  
  /* Date pills */
  #sp-book-equipment-header .sp-date-row input[type="date"]{
    height: var(--sp-pill-h) !important;
    line-height: var(--sp-pill-h) !important;
    border-radius: var(--sp-pill-r) !important;
    border: 1px solid var(--sp-pill-b) !important;
    background: var(--sp-pill-bg) !important;
    box-shadow: none !important;
    padding: 0 12px !important; /* Figma: 8px 12px-ish */
  }
  
  /* Search pill */
  #sp-book-equipment-header .sp-inline-search{
    height: var(--sp-pill-h) !important;
    border-radius: var(--sp-pill-r) !important;
    border: 1px solid var(--sp-pill-b) !important;
    background: var(--sp-pill-bg) !important;
    box-shadow: none !important;
    padding: 0 12px !important;
  }
  /* =========================================
     FIX: Date + Search pill vertical alignment
     (keep the new pill look)
     ========================================= */
  
  /* Make all three columns align to the input baseline */
  #sp-book-equipment-header .sp-date-row{
    align-items: flex-end !important; /* key: inputs line up */
  }
  
  /* Make label blocks not add extra spacing differences */
  #sp-book-equipment-header .sp-date-row label{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }
  
  /* Force BOTH inputs to the same exact box model */
  body:has(#sp-book-equipment-header){
    --sp-pill-h: 36px;
    --sp-pill-pad-x: 12px;
  }
  
  /* Date pill */
  #sp-book-equipment-header .sp-date-row input[type="date"]{
    height: var(--sp-pill-h) !important;
    min-height: var(--sp-pill-h) !important;
    padding: 0 var(--sp-pill-pad-x) !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }
  
  /* Search pill */
  #sp-book-equipment-header .sp-inline-search{
    height: var(--sp-pill-h) !important;
    min-height: var(--sp-pill-h) !important;
    padding: 0 var(--sp-pill-pad-x) !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }
  
  /* Safari/Chrome: tame the date field’s internal calendar layout */
  #sp-book-equipment-header .sp-date-row input[type="date"]::-webkit-datetime-edit{
    line-height: var(--sp-pill-h) !important;
    padding: 0 !important;
  }
  #sp-book-equipment-header .sp-date-row input[type="date"]::-webkit-calendar-picker-indicator{
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Move the whole DATE blocks (label + pill) up/down */
  #sp-book-equipment-header .sp-date-row > label{
    position: relative !important;
    top: -7px !important; /* tweak this: -1 to -8 */
  }
  /* =========================================================
     SP — BIG CATEGORY TABS: Typography (Figma match)
     Paste at VERY BOTTOM
     ========================================================= */
  
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pills{
    font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  }
  
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pill{
    font-family: "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  
    /* Figma-ish tab typography */
    font-size: 16px !important;        /* tweak: 15–16 */
    font-weight: 590 !important;       /* Figma screenshot shows 590 */
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
  
    color: #6E6E6E !important;
  }
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pill{
    padding: 8px 2px 1px !important;   /* tighter */
  }
  /* Active tab */
  body:has(#sp-book-equipment-header) #sp-book-equipment-header .sp-pill.is-active{
    color: #111111 !important;
    font-weight: 590 !important;       /* keep same weight as figma */
  }
  
  /* =========================================================
     SP — Remove white space above header (Astra theme spacing)
     Paste at VERY BOTTOM
     ========================================================= */
  
  /* Remove Astra top spacing that creates white gap above header */
  body:has(#sp-book-equipment-header) .site-content,
  body:has(#sp-book-equipment-header) .content-area,
  body:has(#sp-book-equipment-header) .site-main{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  body:has(#sp-book-equipment-header) .site-content .ast-container{
    padding-top: 0 !important;
  }
  
  body:has(#sp-book-equipment-header) .entry-header{
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body:has(#sp-book-equipment-header) .entry-content > *:first-child{
    margin-top: 0 !important;
  }
  
  body:has(#sp-book-equipment-header) #sp-book-equipment-header{
    margin-top: 0 !important;
  }