/* ══ Pill select ══ */
.pill-select { position: relative; display: inline-block; }
.pill-current { cursor: pointer; padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.pill-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; background: #1a1a24; border: 1px solid #3a3a4a; border-radius: 8px; padding: 4px; z-index: 200; min-width: 130px; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.pill-select.open .pill-dropdown { display: flex; flex-direction: column; gap: 2px; }
.pill-opt { padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; transition: opacity .1s; }
.pill-opt:hover { opacity: .8; }
.pill-opt-active { outline: 2px solid rgba(255,255,255,.2); }
.stat-afaire  { background: #141418; color: #5a5a68; border: 1px solid #2a2a38; }
.stat-reserve { background: #071320; color: #5bb8e8; border: 1px solid #1a3a50; }
.stat-apayer  { background: #1a0a04; color: #e87040; border: 1px solid #3a1808; }
.stat-paye    { background: #091a0e; color: #4a9e60; border: 1px solid #1e5631; }

/* ══ Time / dur select ══ */
.d-time-select { background: #111116; border: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; font-size: 11px; padding: 3px 6px; border-radius: 4px; cursor: pointer; max-width: 90px; }
.d-time-select:focus { outline: none; border-color: var(--green); }

/* ══ Inline input ══ */
.drawer-inline-input { background: transparent; border: none; border-bottom: 1px solid #3a3a48; color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; padding: 1px 4px; outline: none; width: 100%; transition: border-color .15s; }
.drawer-inline-input:focus { border-bottom-color: var(--green); background: #0e0e12; border-radius: 3px 3px 0 0; }
.drawer-inline-input::placeholder { color: #3a3a50; }

/* ══ Lieu autocomplete ══ */
.lieu-suggest { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: #1a1a24; border: 1px solid #3a3a4a; border-radius: 0 0 6px 6px; max-height: 180px; overflow-y: auto; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.lieu-suggest.open { display: block; }
.lieu-suggest-item { padding: 7px 12px; cursor: pointer; font-size: 11px; color: var(--text); border-bottom: 1px solid #2a2a32; transition: background .1s; }
.lieu-suggest-item:last-child { border-bottom: none; }
.lieu-suggest-item:hover { background: #22222e; }
.lieu-suggest-item small { color: var(--muted); font-size: 10px; display: block; margin-top: 1px; }

/* ══ Drawer attrs ══ */
.drawer-attrs { display: flex; flex-direction: column; }
.drawer-attr { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid #1e1e26; }
.drawer-attr:last-child { border-bottom: none; }
.drawer-attr-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.drawer-attr-val   { font-size: 12px; color: var(--text); }
.drawer-search-zone { }
.drawer-search-filters { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.drawer-filter-label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.drawer-attr input[type="text"], .drawer-attr input[type="time"], .drawer-attr input[type="number"] { background: transparent; border: none; border-bottom: 1px solid #3a3a48; color: var(--text); font-family: 'DM Mono', monospace; font-size: 12px; padding: 1px 4px; outline: none; transition: border-color .15s; }
.drawer-attr input:focus { border-bottom-color: var(--green); background: #111116; border-radius: 3px 3px 0 0; }
.drawer-attr input::placeholder { color: #3a3a50; }
.drawer-desc-edit:focus { color: var(--text) !important; }
.drawer-desc-edit:empty:before { content: attr(data-placeholder); color: #3a3a50; }

/* ══ Drawer panel ══ */
@media (min-width: 769px) {
  #drawer { top: 0; right: 0; bottom: 0; width: min(520px, 45vw); border-radius: 12px 0 0 12px; border-right: none; box-shadow: -8px 0 40px rgba(0,0,0,.6); transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); pointer-events: none; }
  #drawer.open { transform: translateX(0); pointer-events: auto; }
  #drawer-content { height: calc(100vh - 46px); overflow-y: auto; }
}
@media (max-width: 768px) {
  #drawer { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; border-bottom: none; max-height: 85vh; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); pointer-events: none; }
  #drawer.open { transform: translateY(0); pointer-events: auto; }
  #drawer-content { max-height: calc(85vh - 46px); overflow-y: auto; }
}