/* Bayān 8.8 — Mīzān professional interface refresh.
   Couche finale : volontairement après tous les styles historiques. */
:root {
  --v88-forest: #0d3c34;
  --v88-forest-2: #15594c;
  --v88-forest-3: #207363;
  --v88-gold: #c7a24c;
  --v88-ink: #132c27;
  --v88-muted: #687871;
  --v88-line: rgba(13, 60, 52, .12);
  --v88-surface: #fffefa;
  --v88-soft: #f3f6f3;
  --v88-shadow: 0 18px 50px rgba(20, 48, 41, .09);
}

/* Header + hero : plus éditorial, moins démonstratif. */
.topbar {
  border-bottom-color: rgba(13,60,52,.09) !important;
  box-shadow: 0 8px 28px rgba(17,49,42,.055) !important;
}
.brand-mark {
  background: linear-gradient(145deg, #123f37, #0b302a) !important;
  box-shadow: 0 8px 20px rgba(11,48,42,.18) !important;
}
.hero {
  min-height: 410px !important;
  background:
    radial-gradient(circle at 77% 32%, rgba(205,174,99,.13), transparent 27%),
    linear-gradient(135deg, #102f2a 0%, #123d35 50%, #0d332d 100%) !important;
}
.hero h1 { letter-spacing: -.035em; line-height: .98 !important; }
.hero-copy > p:last-child { max-width: 760px; color: rgba(255,255,255,.78) !important; }

/* Recherche : une vraie barre de commande. */
.search-panel {
  width: min(1140px, calc(100% - 36px)) !important;
  margin-top: -48px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid var(--v88-line) !important;
  background: rgba(255,254,250,.985) !important;
  box-shadow: var(--v88-shadow) !important;
}
.search-box {
  min-height: 62px;
  border-radius: 14px !important;
  border: 1px solid rgba(13,60,52,.16) !important;
  padding: 6px 6px 6px 16px !important;
  box-shadow: 0 5px 18px rgba(22,55,47,.045) !important;
}
.search-box:focus-within {
  border-color: rgba(21,89,76,.6) !important;
  box-shadow: 0 0 0 3px rgba(21,89,76,.10), 0 8px 24px rgba(22,55,47,.07) !important;
}
.search-box input { font-size: 16px !important; }
.search-box .primary-button {
  min-height: 48px;
  padding-inline: 22px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.primary-button, .secondary-button, .icon-button {
  font-family: inherit;
  letter-spacing: -.01em;
}
.primary-button {
  background: linear-gradient(135deg, var(--v88-forest-2), var(--v88-forest)) !important;
  border-color: transparent !important;
}
.secondary-button {
  border-color: rgba(13,60,52,.15) !important;
  background: #fff !important;
  color: #24453d !important;
  box-shadow: 0 1px 2px rgba(11,48,42,.03) !important;
}
.primary-button:hover, .secondary-button:hover, .icon-button:hover {
  transform: translateY(-1px) !important;
}
.secondary-button:hover { border-color: rgba(21,89,76,.36) !important; background: #fbfdfb !important; }

.search-context-row {
  padding-top: 10px !important;
  gap: 9px !important;
  font-size: 12.5px !important;
}
.search-type-badge {
  padding: 5px 9px !important;
  font-size: 11px;
  letter-spacing: .02em;
  background: #edf4f0 !important;
}
.quick-searches { padding-top: 10px !important; gap: 6px !important; }
.quick-searches > span { font-weight: 750; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.quick-searches button {
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: #fafbf8 !important;
  border-color: rgba(13,60,52,.10) !important;
  font-size: 12px;
}

.search-utility-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
  margin-top: 13px !important;
}
.search-utility-row .secondary-button {
  min-height: 44px;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  justify-content: center;
  text-align: center;
  font-size: 12.5px;
  font-weight: 760;
}
#v7AddSearchResults { color: var(--v88-forest) !important; background: #f2f7f4 !important; }

/* Filtres : grille professionnelle, sections visuelles et contrôles cohérents. */
.filters-row {
  display: grid !important;
  grid-template-columns: minmax(210px,.8fr) minmax(210px,1fr) minmax(230px,1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-top: 15px !important;
  padding: 14px !important;
  border: 1px solid rgba(13,60,52,.10) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,#f8faf7,#f4f7f4) !important;
}
.filters-row > .segmented-control,
.filters-row > .field {
  min-width: 0 !important;
}
.segmented-control {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3,1fr);
  align-self: end;
  padding: 3px !important;
  border: 1px solid rgba(13,60,52,.08);
  border-radius: 10px !important;
  background: #e9eeea !important;
}
.segmented-control button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 8px !important;
  border-radius: 7px !important;
  font-size: 12px;
}
.segmented-control button.active {
  color: var(--v88-forest) !important;
  box-shadow: 0 2px 8px rgba(16,54,45,.08) !important;
}
.field { gap: 5px !important; font-size: 11.5px !important; color: #60736b !important; }
.field > span { font-weight: 780; letter-spacing: .01em; }
.field select, .field input {
  width: 100%;
  min-height: 42px !important;
  border-radius: 9px !important;
  border-color: rgba(13,60,52,.14) !important;
  padding-inline: 10px !important;
  background: #fff !important;
  font-size: 12.5px;
}
.compact-field { min-width: 0 !important; }
.search-control-group {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(250px,1.35fr) minmax(190px,.85fr) minmax(250px,1.1fr) minmax(190px,.85fr) !important;
  align-items: stretch !important;
  gap: 9px !important;
  padding: 12px !important;
  border: 1px solid rgba(13,60,52,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.82) !important;
}
.search-control-group.numeric-controls {
  grid-template-columns: repeat(4,minmax(150px,1fr)) !important;
  border-color: rgba(183,143,51,.20) !important;
  background: #fffaf0 !important;
}
.switch-field {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(13,60,52,.10);
  border-radius: 9px;
  background: #fff;
  font-size: 11.5px !important;
  color: #4f655d !important;
}
.switch-ui { flex: 0 0 auto; width: 34px !important; height: 20px !important; }
.switch-ui::after { width: 14px !important; height: 14px !important; }
.switch-field input:checked + .switch-ui::after { transform: translateX(14px) !important; }
.shadda-search-field small { font-size: 10.5px; line-height: 1.4; color: #7d8a85; }
.fixed-rules-mini { align-self: center; font-size: 10.5px !important; }

/* Toggle mobile des filtres : ressemble à une commande, pas à un gros bouton. */
.v7-advanced-toggle {
  position: relative;
  min-height: 48px !important;
  margin-top: 13px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(13,60,52,.14) !important;
  border-radius: 11px !important;
  background: #f6f8f5 !important;
  color: var(--v88-ink) !important;
  text-align: left;
  box-shadow: none !important;
}
.v7-advanced-toggle .v88-filter-toggle-main { display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:820; font-size:13px; }
.v7-advanced-toggle .v88-filter-toggle-main::after { content:'⌄'; color:var(--v88-forest-2); font-size:17px; transition:transform .18s ease; }
.search-panel.v7-filters-open .v7-advanced-toggle .v88-filter-toggle-main::after { transform: rotate(180deg); }
.v7-advanced-toggle .v88-filter-toggle-sub { display:block; margin-top:2px; color:#78867f; font-size:10.5px; font-weight:600; }
.v7-advanced-toggle .v88-filter-count { color:var(--v88-forest-2); }

/* Résultats : cartes plus sobres et barre d'action lisible. */
.results-section { width: min(1140px, calc(100% - 36px)) !important; margin-top: 48px !important; }
.results-list { gap: 12px !important; }
.verse-card {
  border-radius: 14px !important;
  border-color: rgba(13,60,52,.10) !important;
  box-shadow: 0 7px 24px rgba(19,52,44,.055) !important;
}
.verse-card:hover { box-shadow: 0 12px 34px rgba(19,52,44,.09) !important; }
.verse-ref { background: #f1f5f2 !important; }
.verse-content { padding: 20px 22px !important; }
.verse-actions {
  gap: 5px !important;
  padding-top: 4px;
}
.verse-actions .icon-button {
  min-height: 36px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  border-color: rgba(13,60,52,.12) !important;
  background: #fbfcfa !important;
  color: #38564e !important;
  font-size: 11.5px !important;
  font-weight: 720;
}
.verse-actions .audio-verse-button,
.verse-actions .french-verse-button { color: var(--v88-forest) !important; background:#f1f6f3 !important; }
.v7-add-study, .v7-note-from-verse { background:#fffaf0 !important; border-color:rgba(183,143,51,.20) !important; }

@media (max-width: 1100px) and (min-width: 761px) {
  .search-control-group { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .search-control-group.numeric-controls { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  .hero { min-height: 395px !important; padding-top: 54px !important; }
  .hero h1 { font-size: clamp(37px,11vw,47px) !important; }
  .hero-copy > p:last-child { font-size: 14px !important; line-height: 1.55 !important; }
  .search-panel { width: calc(100% - 16px) !important; margin-top: -42px !important; padding: 11px !important; border-radius: 15px !important; }
  .search-box { min-height: 56px; border-radius: 11px !important; grid-template-columns: auto minmax(0,1fr) auto !important; gap:6px !important; }
  .search-box input { font-size: 15px !important; }
  .search-box .primary-button { grid-column: 1/-1; width:100%; min-height:45px; border-radius:9px !important; }
  .search-context-row { align-items:flex-start; }
  .quick-searches { overflow-x:auto; flex-wrap:nowrap !important; padding-bottom:3px; scrollbar-width:none; }
  .quick-searches::-webkit-scrollbar { display:none; }
  .quick-searches > span, .quick-searches button { flex:0 0 auto; }
  .search-utility-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .search-utility-row > :last-child:nth-child(odd) { grid-column:1/-1; }
  .search-utility-row .secondary-button { min-height:42px; padding:8px !important; font-size:11px; }

  .search-panel:not(.v7-filters-open) .filters-row { display:none !important; }
  .search-panel.v7-filters-open .filters-row { display:grid !important; }
  .filters-row {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:10px !important;
    margin-top:8px !important;
    border-radius:11px !important;
  }
  .filters-row > .segmented-control,
  .search-control-group { grid-column:1/-1; }
  .search-control-group,
  .search-control-group.numeric-controls {
    grid-template-columns: 1fr !important;
    padding:9px !important;
    gap:7px !important;
  }
  .field select, .field input { min-height:41px !important; }
  .switch-field { min-height:40px; }

  .results-section { width: calc(100% - 16px) !important; margin-top:36px !important; }
  .verse-card { border-radius:12px !important; }
  .verse-content { padding:16px 14px !important; }
  .verse-actions {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
    gap:6px !important;
  }
  .verse-actions .icon-button { width:100%; justify-content:center !important; text-align:center !important; white-space:normal !important; }
}

@media (max-width: 420px) {
  .filters-row { grid-template-columns:1fr !important; }
  .filters-row > * { grid-column:1 !important; }
  .search-utility-row { grid-template-columns:1fr !important; }
  .search-utility-row > * { grid-column:1 !important; }
  .verse-actions { grid-template-columns:1fr !important; }
}