/* =========================
   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); margin: 0px;
}

/* ---- 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; }
}


/* ---- Finance page layout ---- */
.finance-layout .section{
  padding:1rem;
  max-width:100%;
  overflow:hidden; /* contain charts or wide children */
}

/* 12-column responsive grid for the finance page */
.finance-grid{
  display:grid;
  gap:1rem;
  grid-template-columns: 1fr; /* mobile default */
}

/* Desktop: 12-col system with sensible spans */
@media (min-width: 1024px){
  .finance-grid{ grid-template-columns: repeat(12, minmax(0,1fr)); }

  .box-kpi{ grid-column: 1 / -1; }          /* full width */
  .box-trends{ grid-column: 1 / span 7; }   /* 7/12 */
  .box-mix{ grid-column: 8 / -1; }          /* 5/12 */
  .box-stores{ grid-column: 1 / -1; }       /* full width */
  .box-perf{ grid-column: 1 / span 7; }     /* 7/12 */
  .box-loyalty{ grid-column: 8 / -1; }      /* 5/12 */
}

/* Make sure internal scrollers stay inside their cards */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.chart-box, .chart-card, .chart-area{ width:100%; overflow:hidden; }
canvas{ max-width:100%; height:auto; }

/* ---- KPI tiles: auto-fit to avoid horizontal overflow ---- */
.dash-tiles{
  display:grid; gap:1rem; margin:0 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* (Keep the visual styles you already added for .dash-tile, .dash-tile-label, .dash-tile-value, .dash-tile-delta) */

/* Small polish: avoid page-level horizontal scroll if any child misbehaves */
html, body{ max-width:100%; overflow-x:hidden; }