/* MySifa — Command palette (⌘K / Ctrl+K)
   Modal global accessible depuis n'importe quelle page.
   Construit dynamiquement par /static/mysifa_cmdk.js. */

/* ───── Overlay (backdrop blur + fade) ───── */
#cmdk-overlay{
  position:fixed;
  inset:0;
  z-index:9050;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:14vh 16px 16px;
  background:rgba(8,12,22,0.62);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  font-family:'Segoe UI',system-ui,sans-serif;
  opacity:0;
  transition:opacity .14s ease;
}
#cmdk-overlay.cmdk-open{display:flex;opacity:1}
body.light #cmdk-overlay{background:rgba(15,23,42,0.35)}

/* ───── Modal ───── */
.cmdk-modal{
  width:100%;
  max-width:640px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,0.55),0 0 0 1px rgba(34,211,238,0.04);
  display:flex;
  flex-direction:column;
  max-height:70vh;
  overflow:hidden;
  transform:translateY(-4px) scale(.985);
  transition:transform .16s cubic-bezier(.22,.61,.36,1);
}
#cmdk-overlay.cmdk-open .cmdk-modal{transform:translateY(0) scale(1)}
body.light .cmdk-modal{box-shadow:0 24px 80px rgba(15,23,42,0.18),0 0 0 1px rgba(8,145,178,0.04)}

/* ───── Search bar ───── */
.cmdk-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.cmdk-search-ico{
  width:18px;height:18px;
  color:var(--muted);
  flex-shrink:0;
  display:inline-flex;
}
.cmdk-search input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font-size:15px;
  font-family:inherit;
  min-width:0;
}
.cmdk-search input::placeholder{color:var(--muted)}
.cmdk-search-kbd{
  font-size:10.5px;
  font-weight:700;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:5px;
  padding:2px 6px;
  font-family:ui-monospace,'Cascadia Code',monospace;
  letter-spacing:.04em;
  flex-shrink:0;
  line-height:1.4;
}

/* ───── List ───── */
.cmdk-list{
  overflow-y:auto;
  padding:6px 6px 8px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.cmdk-list::-webkit-scrollbar{width:8px}
.cmdk-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.cmdk-section{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.6px;
  padding:10px 12px 6px;
  user-select:none;
}
.cmdk-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 12px;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
  text-align:left;
  cursor:pointer;
  width:100%;
  transition:background .12s,color .12s;
}
.cmdk-row:hover,
.cmdk-row.cmdk-active{
  background:var(--accent-bg);
  color:var(--accent);
}
.cmdk-row-ico{
  width:32px;height:32px;
  border-radius:8px;
  background:var(--bg);
  color:var(--text2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .12s,color .12s;
}
.cmdk-row:hover .cmdk-row-ico,
.cmdk-row.cmdk-active .cmdk-row-ico{
  background:var(--accent);
  color:var(--bg);
}
.cmdk-row-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.cmdk-row-title{
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmdk-row-sub{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmdk-row.cmdk-active .cmdk-row-sub,
.cmdk-row:hover .cmdk-row-sub{color:var(--text2)}
.cmdk-row-shortcut{
  font-size:10.5px;
  font-weight:700;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:5px;
  padding:2px 6px;
  font-family:ui-monospace,'Cascadia Code',monospace;
  letter-spacing:.04em;
  flex-shrink:0;
}
.cmdk-row.cmdk-active .cmdk-row-shortcut{
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent);
}

.cmdk-empty{
  padding:32px 16px 36px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.cmdk-empty b{color:var(--text2);font-weight:700}

/* ───── Footer hints ───── */
.cmdk-footer{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:9px 14px;
  border-top:1px solid var(--border);
  background:var(--bg);
  font-size:11px;
  color:var(--muted);
  flex-shrink:0;
}
.cmdk-footer-spacer{flex:1}
.cmdk-footer kbd{
  font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:10px;
  font-weight:700;
  color:var(--text2);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 5px;
  margin:0 2px;
}
.cmdk-footer-hint{display:inline-flex;align-items:center;gap:4px}
.cmdk-footer-brand{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--accent);
  text-transform:uppercase;
}

/* ───── Mobile ───── */
@media (max-width:640px){
  #cmdk-overlay{padding:6vh 10px 10px;align-items:flex-start}
  .cmdk-modal{max-height:88vh}
  .cmdk-search input{font-size:14px}
  .cmdk-row{padding:10px 10px}
  .cmdk-row-ico{width:30px;height:30px}
  .cmdk-search-kbd,.cmdk-row-shortcut{display:none}
  .cmdk-footer-hint{display:none}
  .cmdk-footer-hint:first-of-type,
  .cmdk-footer-brand{display:inline-flex}
}


/* ───── Close button (X) ───── */
.cmdk-close-btn{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;flex-shrink:0;padding:0;
}
.cmdk-close-btn:hover{background:var(--accent-bg);color:var(--accent)}
.cmdk-close-btn:active{transform:scale(.95)}

/* ───── Portrait mobile : palette au-dessus de la nav bar, pas dessus ─────
   La nav bar mobile fait ~66px + safe-area. On raccourcit l'overlay pour la
   laisser interactive. */
@media (max-width:900px) and (orientation:portrait){
  body.has-mobile-navbar #cmdk-overlay{
    bottom:calc(66px + env(safe-area-inset-bottom,0px));
    padding:6vh 10px 10px;
  }
  body.has-mobile-navbar .cmdk-modal{max-height:calc(100vh - 66px - env(safe-area-inset-bottom,0px) - 20px)}
}