/* A Recomend — admin console specifics (shared shell lives in auth.css). */

/* ------------------------------------------------------------- shell + nav */
/* Sixteen sections in seven groups, one group on screen at a time. Desktop
   gets a sticky sidebar; below 900px the same nav becomes a horizontally
   scrollable tab strip. Group visibility is owned entirely by the .hidden class
   that admin.js toggles; no rule in this file may override it, because the
   console depends on exactly one group being in flow at a time. */
.admin-shell {
  max-width: 1240px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

.adm-nav {
  position: sticky; top: var(--s4);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--s2);
}
.adm-nav-item {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; padding: var(--s2) var(--s3);
  background: transparent; border: 0; border-radius: var(--r-btn);
  color: var(--muted); font: inherit; font-size: 14px; font-weight: 600;
  text-align: start; cursor: pointer; white-space: nowrap;
}
.adm-nav-item .ic { width: 18px; height: 18px; flex: none; }
.adm-nav-item:hover { background: var(--accent-weak); color: var(--ink); }
.adm-nav-item.active { background: var(--accent-weak); color: var(--accent-press); }

/* min-width:0 lets wide tables scroll inside .table-wrap instead of forcing
   the whole page to scroll sideways. */
.adm-content { min-width: 0; }

.adm-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
}
.adm-bar-title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--muted);
  letter-spacing: .01em;
}

/* Density: the grouped view no longer needs the airy single-scroll spacing. */
.admin-shell .section { padding: var(--s4); margin-bottom: var(--s3); }
.admin-shell .section > h2 { font-size: 17px; }
.admin-shell .section .section-sub { margin-bottom: var(--s3); font-size: 12.5px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s1);
}
.hint-line {
  margin: 0 0 var(--s3); font-size: 12px; color: var(--muted);
  border-inline-start: 2px solid var(--line); padding-inline-start: var(--s2);
}

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: var(--s3); }
  .adm-nav {
    position: sticky; top: 0; z-index: 20;
    flex-direction: row; gap: var(--s1);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .adm-nav::-webkit-scrollbar { display: none; }
  .adm-nav-item { width: auto; flex: none; }
}
@media (max-width: 560px) {
  .adm-nav-item { font-size: 13px; padding: var(--s2); }
  .admin-shell .section { padding: var(--s3); }
}

/* ------------------------------------------------------------ role editor */
/* Roles are additive, so every role an account holds is its own removable
   badge, with the add-picker sitting inline beside them. */
.role-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.role-add { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.role-add-btn {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px var(--s2); font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); background: transparent;
  border: 1px dashed var(--line); border-radius: var(--r-pill); cursor: pointer;
}
.role-add-btn .ic { width: 13px; height: 13px; }
.role-add-btn:hover { color: var(--accent-press); border-color: var(--accent); }
.role-picker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.role-picker select { height: 30px; padding: 0 var(--s2); font-size: 12px; }
.rm-role { display: inline-flex; color: var(--muted); text-decoration: none; }
.rm-role .ic { width: 13px; height: 13px; }
.rm-role:hover { color: var(--danger, #b3261e); }

/* Make-professional modal (the one allowed shadow: overlays only) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,18,15,.35); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: var(--s5);
}
.modal-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--overlay-shadow);
  width: min(420px, 100%); padding: var(--s5);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s1); }
.modal-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.modal-who { font-size: 13px; color: var(--muted); margin: 0 0 var(--s4); }

/* User name cell */
.user-name { font-weight: 600; }
.user-phone { direction: ltr; display: inline-block; font-size: 12px; color: var(--muted); }
html[dir="rtl"] .user-phone { text-align: right; }

/* --------------------------------------------- businesses under a user row */
/* A chain account is the normal case, so branches are grouped under their
   business name and every row states its own branch label. Everything here is
   a flow-row list rather than a table: it sits under a table that already
   scrolls sideways, and it has to stay readable at 360px. */
.ub-panel {
  border: 1px solid var(--accent); border-radius: var(--r-card);
  background: var(--surface); padding: var(--s4);
}
.ub-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2);
}
.ub-title { margin: 0; font-size: 15px; font-weight: 600; }
.ub-who { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

.ub-group {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s3); margin-bottom: var(--s2);
}
.ub-group-head {
  display: flex; align-items: baseline; gap: var(--s2);
  flex-wrap: wrap; margin-bottom: var(--s2);
}
.ub-group-name { font-size: 14px; font-weight: 600; color: var(--accent-press); }

.ub-row, .ub-res, .ub-picked {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: var(--s2) 0;
}
.ub-group .ub-row:first-of-type { border-top: 0; padding-top: 0; }
.ub-res, .ub-picked { border: 1px solid var(--line); border-radius: var(--r-btn); padding: var(--s2) var(--s3); margin-top: var(--s2); }
.ub-picked { border-color: var(--accent); background: var(--accent-weak); }
.ub-row-main { min-width: 0; flex: 1 1 180px; }
.ub-row-side { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ub-branch { margin: 0; font-size: 14px; font-weight: 600; }
.ub-branch.ub-unnamed { color: var(--muted); font-weight: 500; }
.ub-place { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.ub-pick-lbl {
  margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-press);
}

.ub-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.ub-form {
  border-top: 1px solid var(--line); margin-top: var(--s3); padding-top: var(--s3);
}
.ub-form-h { margin: 0 0 var(--s2); font-size: 13px; font-weight: 600; }
.ub-search { display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--s2); align-items: end; }
.ub-search .field, .ub-fields .field { margin-bottom: 0; }
.ub-search label, .ub-fields label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.ub-search input, .ub-fields input { width: 100%; font-size: 13px; padding: 8px 10px; }
.ub-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s2) var(--s3); margin-top: var(--s3);
}
.ub-results { margin-top: var(--s2); max-height: 320px; overflow-y: auto; }
@media (max-width: 700px) {
  .ub-search { grid-template-columns: 1fr; }
  .ub-row-side { width: 100%; }
}

/* Audit meta */
.audit-meta { font-size: 11px; color: var(--muted); max-width: 260px; white-space: normal; }
.audit-time { font-size: 12px; color: var(--muted); direction: ltr; }