/* =========================
   Gather Admin — UI System
   ========================= */

/* ---- Design tokens (inherit from :root in base.html) ---- */
:root{
  --brand:#917667; --brand-600:#7f695c; --brand-700:#6f5d52;
  --text:#333; --muted:#6b7280; --bg:#f5f6f8; --card:#fff; --line:#e5e7eb;
  --radius:12px; --shadow:0 10px 24px rgba(0,0,0,.06);
}

/* ---- Layout helpers ---- */
.container-page{ width:100%; }
.section{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.stack{ display:flex; flex-direction:column; gap:1rem; }
.row{ display:flex; gap:.6rem; align-items:center; }

/* ---- Page Bar (title + actions) ---- */
.page-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin: 0 0 .75rem;
}
.page-title{
  font-weight:800; font-size:1.15rem; color:var(--text);
}

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; padding:.6rem .95rem; border-radius:10px; font-weight:800;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ filter:brightness(.96); }
.btn-light{ background:#f9fafb; color:#111827; border-color:var(--line); }
.btn-light:hover{ background:#f3f4f6; }
.btn-danger{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.btn-danger:hover{ background:#fecaca; }

/* ---- Card: Filter form ---- */
.filter-card{
  padding:1rem; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; margin-bottom:1rem;
}
.form-grid{ display:grid; gap:1rem; }
.form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
@media (max-width: 1024px){ .form-grid.cols-2{ grid-template-columns:1fr; } }

.form-group{ display:flex; flex-direction:column; gap:.4rem; }
.form-group label {
font-size: .78rem;
line-height: 1.1;
color: #9aa0a6;
font-weight: 800;
padding-left: 2px;
}
.input, .select{
  padding:.65rem .75rem; background:#fff; border:1px solid var(--line); color:var(--text);
  border-radius:10px; font-size:1rem; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus{ border-color:#91766733; box-shadow:0 0 0 3px #91766722; }

.form-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---- Data Table ---- */
.table-wrap{ width:100%; overflow-x:auto; }
.data-table{
  width:100%; min-width:720px; border-collapse:separate; border-spacing:0 .5rem;
}
.data-table thead th{
  text-align:left; font-weight:800; color:#555; font-size:1rem; padding:.75rem; border-bottom:1px solid var(--line);
  background: transparent; white-space:nowrap;
}
.data-table tbody tr{
  background:#fff; transition: background .2s ease; box-shadow: var(--shadow);
}
.data-table tbody tr:hover{ background:#f9fafb; }
.data-table td{
  padding:.75rem; vertical-align:middle; color:#333; font-size:.95rem; border-bottom:1px solid #eef2f6; white-space:nowrap;
}
.data-table td:first-child{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
.data-table td:last-child{ border-top-right-radius:10px; border-bottom-right-radius:10px; }
.cell-name{ display:flex; align-items:center; gap:.6rem; }
.thumb{ width:36px; height:36px; border-radius:8px; object-fit:cover; border:1px solid #eef1f5; }
.row-actions{ display:flex; gap:.5rem; justify-content:flex-start; }

/* ---- Empty state ---- */
.table-empty{ text-align:center; color:#666; }

/* ---- Pagination ---- */
.pager{
  display:flex; justify-content:space-between; align-items:center; margin-top:1rem; gap:.75rem; flex-wrap:wrap;
}
.pager-info{ color:#555; font-size:.95rem; }
.pager-links{ display:flex; gap:.5rem; flex-wrap:wrap; }
.page-link{
  padding:.45rem .8rem; border:1px solid var(--line); border-radius:10px; text-decoration:none;
  color:#555; font-weight:700; cursor:pointer; background:#fff;
}
.page-link:hover{ background:#f1f5f9; }
.page-link.is-active{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* ---- Modal (generic) ---- */
.ui-modal-overlay{
  position:fixed; inset:0; background:rgba(17,24,39,.45); display:grid; place-items:center; z-index:10000;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.ui-modal-overlay.show{ opacity:1; pointer-events:auto; }
.ui-modal{
  width:min(92vw,460px); background:#fff; border-radius:12px; border:1px solid var(--line);
  padding:18px; box-shadow:0 20px 40px rgba(0,0,0,.15); transform:translateY(12px);
  opacity:0; transition: transform .18s ease, opacity .18s ease; position:relative;
}
.ui-modal-overlay.show .ui-modal{ transform:translateY(0); opacity:1; }
.ui-modal h3{ font-size:1.1rem; font-weight:800; color:#111827; margin:4px 0 6px; }
.ui-modal p{ color:#4b5563; margin:15px 0; }
.ui-modal .actions{ display:flex; gap:10px; justify-content:flex-end; }
.ui-modal .close{
  position:absolute; top:8px; right:10px; width:32px; height:32px; border-radius:999px;
  background:#f3f4f6; border:1px solid #e5e7eb; color:#111827; font-size:20px; line-height:0; cursor:pointer;
}
.ui-modal .close:hover{ background:#e9eaee; }

/* ---- Responsiveness polish for mobile ---- */
@media (max-width: 768px){
  .page-bar{ flex-direction:column; align-items:flex-start; gap:.75rem; }
  .btn.block-on-mobile{ width:100%; text-align:center; }
}