/* GRIH Glossary – front-end v1.0.2 */
:root{
  --grih-bg:#ffffff; --grih-ink:#102a16; --grih-muted:#5b7060; --grih-accent:#0ea5e9;
  --grih-card:#ffffff; --grih-line:#e5e7eb; --grih-danger:#ef4444;
  --grih-primary:#006937; /* brand */
}
#grih-glossary{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--grih-ink);background:#fff}
#grih-glossary .grih-head{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;margin-bottom:18px}
#grih-glossary h1{margin:.2rem 0 .4rem;font-size:clamp(1.1rem,2.6vw,1.6rem);font-weight:800;letter-spacing:.2px}
#grih-glossary .subtitle{color:var(--grih-muted);font-size:.95rem}
#grih-glossary .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
#grih-glossary .search{position:relative;flex:1;min-width:240px}
#grih-glossary .search input{width:100%;padding:12px 40px 12px 12px;border:1px solid var(--grih-line);border-radius:10px;background:#fff;outline:0}
#grih-glossary .search svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
#grih-glossary .actions{display:flex;gap:10px;align-items:center}
#grih-glossary button,.btn{appearance:none;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
#grih-glossary .btn-primary{background:var(--grih-primary);color:#fff}
#grih-glossary .btn{background:#fff;border:1px solid var(--grih-line)}
#grih-glossary .btn-danger{background:var(--grih-danger);color:#fff}

#grih-glossary .az{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
#grih-glossary .az button{background:#fff;border:1px solid var(--grih-line);padding:6px 10px;border-radius:999px}
#grih-glossary .az button.active{background:var(--grih-primary);border-color:var(--grih-primary);color:#fff}

#grih-glossary .table{background:var(--grih-card);border:1px solid var(--grih-line);border-radius:14px;overflow:hidden}
#grih-glossary table{width:100%;border-collapse:separate;border-spacing:0}
#grih-glossary thead th{background:#f8f9fa;color:#374151;text-align:left;font-size:.9rem;padding:14px;border-bottom:1px solid var(--grih-line)}
#grih-glossary tbody td{padding:14px;border-bottom:1px solid var(--grih-line);vertical-align:top}
#grih-glossary tbody tr:last-child td{border-bottom:0}
#grih-glossary .empty{padding:24px;color:var(--grih-muted);text-align:center}
#grih-glossary .pill{padding:2px 10px;border-radius:999px;background:#e8f6ea;color:#0f4d1f;font-weight:700;font-size:.75rem}

#grih-glossary .grih-ft{margin:28px 0 8px;color:var(--grih-muted);font-size:.85rem;text-align:center}
#grih-glossary .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden}

/* Modal */
#grih-glossary .modal{position:fixed;inset:0;background:rgba(2,6,23,.6);display:none;align-items:center;justify-content:center;padding:24px;z-index:9999}
#grih-glossary .modal.open{display:flex}
#grih-glossary .dialog{background:#fff;max-width:680px;width:100%;border-radius:16px}
#grih-glossary .dialog header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--grih-line)}
#grih-glossary .dialog header h3{margin:0;font-size:1.1rem}
#grih-glossary .dialog .content{padding:18px}
#grih-glossary .dialog .grid{display:grid;grid-template-columns:1fr;gap:12px}
#grih-glossary .dialog label{font-size:.9rem;color:#374151;font-weight:600}
#grih-glossary .dialog input,.dialog textarea{width:100%;padding:12px;border:1px solid var(--grih-line);border-radius:10px}
#grih-glossary .dialog textarea{min-height:110px;resize:vertical}
#grih-glossary .dialog footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 18px;border-top:1px solid var(--grih-line)}
#grih-glossary .x{background:none;border:0;font-size:22px;cursor:pointer;color:#475569}

/* v1.0.1+ full-white/no shadows already reflected */

@media (min-width:641px){
  #grih-glossary .fab{ display:none; }
}
@media (max-width:640px){
  #grih-glossary .grih-head{grid-template-columns:1fr}
  #grih-glossary .actions{ display:none; } /* Header button hidden on mobile; FAB used instead */
  #grih-glossary .btn-primary#grih-suggest-btn{width:100%}
}

/* v1.0.3: Align content with site menubar spacing via container */
#grih-glossary .grih-container{max-width:1200px;margin:0 auto;padding:0 16px}
#grih-glossary .grih-head{grid-template-columns:1fr auto}
@media (max-width:640px){
  #grih-glossary .grih-head{grid-template-columns:1fr}
  #grih-glossary .actions{width:100%}
  #grih-glossary .actions .btn-primary{width:100%}
}

/* Make modal primary button white text on brand background */
#grih-glossary .dialog footer .btn-primary{background:var(--grih-primary);color:#fff;border:0}

/* v1.0.4 improvements */
#grih-glossary{padding-top:40px;padding-bottom:40px}
#grih-glossary button,.btn,
#grih-glossary .btn-primary,
#grih-glossary .az button.active{background:var(--grih-primary)!important;color:#fff!important;border:0}
#grih-glossary .search{width:100%} 
#grih-glossary .toolbar{width:100%}

/* v1.0.4 layout & styles */
#grih-glossary{padding:32px 0 56px} /* page padding top & bottom */
#grih-glossary .grih-head{grid-template-columns:1fr} /* stack to give search full width */
#grih-glossary .actions{display:flex;justify-content:flex-end;margin-bottom:12px}
#grih-glossary .toolbar{width:100%} /* search container takes full width */
#grih-glossary .search{min-width:auto} /* allow full stretch */

/* All buttons: brand background + white text (includes Cancel, Submit, Suggest) */
#grih-glossary button,
#grih-glossary .btn,
#grih-glossary .btn-primary{
  background:var(--grih-primary) !important;
  color:#fff !important;
  border:0 !important;
}
#grih-glossary .btn:hover{opacity:.95}
/* Keep A–Z pills as current style; do not force them to green */
#grih-glossary .az button{background:#fff !important; color:inherit !important; border:1px solid var(--grih-line) !important}
#grih-glossary .az button.active{background:var(--grih-primary) !important; color:#fff !important; border-color:var(--grih-primary) !important}

/* v1.0.5: Cancel button styled white bg with red text */
#grih-glossary .btn-cancel{
  background:#fff !important;
  color:#dc2626 !important; /* red-600 */
  border:1px solid #dc2626 !important;
}
#grih-glossary .btn-cancel:hover{background:#fee2e2 !important;}