/* ══════════════════════════════════════════════════════════
   Admin layout styles — shared across all /admin/* views
   ══════════════════════════════════════════════════════════ */

/* ── Base admin shell ── */
html, body { height: 100%; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #fcf9f8; color: #1c1b1b; }
#admin-shell { display: flex; height: 100vh; overflow: hidden; }
#admin-sidebar-container { position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; }
#admin-sidebar { flex-shrink: 0; }
#admin-main   { flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-left: 256px; }
#admin-content{ flex: 1; overflow-y: auto; }

/* Mobile sidebar overlay */
@media (max-width: 1023px) {
  #admin-sidebar-container { width: 100%; background: rgba(0, 0, 0, 0.3); }
  #admin-sidebar { max-width: 256px; width: 100%; overflow-y: auto; }
  #admin-main { margin-left: 0; }
}

/* ── Sidebar nav items ── */
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1a1aa;
  transition: all 0.15s;
  cursor: pointer;
  border-left: 4px solid transparent;
  margin-left: 16px;
  border-radius: 8px 0 0 8px;
}
.admin-nav-item:hover {
  color: #f4f4f5;
  background: rgba(63,63,70,0.5);
}
.admin-nav-item.active {
  background: #fafaf9 !important;
  color: #18181b !important;
  border-left-color: #b7102a !important;
  font-weight: 700;
}

/* Expandable items */
.admin-details-group > summary.admin-nav-item {
  justify-content: space-between;
  list-style: none;
}
.admin-details-group > summary.admin-nav-item::-webkit-details-marker { display: none; }

/* Sub-nav panel */
.admin-subnav-panel {
  background: rgba(9,9,11,0.35);
  padding: 8px 0;
}
.admin-subnav-item {
  display: block;
  padding: 8px 24px 8px 56px;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #71717a;
  transition: color 0.15s;
}
.admin-subnav-item:hover { color: #ffffff; }
.admin-subnav-item.active {
  color: #b7102a !important;
  font-weight: 700;
}

/* Chevron rotation */
.admin-details-group .chevron-toggle { transition: transform 0.2s ease; }
.admin-details-group[open] .chevron-toggle { transform: rotate(180deg); }

/* Sidebar scrollbar */
#admin-sidebar-nav::-webkit-scrollbar { width: 4px; }
#admin-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
#admin-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 99px; }

/* ── Filter drawer (reusable across admin views) ── */
.filter-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 60;
  transition: opacity 0.2s;
}
.filter-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 320px;
  background: #ffffff;
  border-left: 1px solid #f0eded;
  z-index: 70;
  box-shadow: -8px 0 30px rgba(0,0,0,0.12);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.filter-drawer.open { transform: translateX(0); }

/* ── Sort icon button (reusable for table headers) ── */
.sort-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.15s;
  color: #71717a;
}
.sort-icon-btn:hover { background: rgba(63,63,70,0.5); }
.sort-icon-btn.active-sort { color: #b7102a; }

/* ── Clickable table row ── */
#admin-shell tbody tr.clickable-row { cursor: pointer; }

/* ── Custom scrollbar for table ── */
.custom-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f6f3f2; border-radius: 99px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(161,161,170,0.5); border-radius: 99px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(113,113,122,0.7); }

/* ── Role Management matrix ── */
.role-permissions-table-wrap {
  max-height: calc(100vh - 260px);
  overflow: auto;
}

.role-permissions-thead th {
  position: sticky;
  top: 0;
  z-index: 15;
  background: #f6f3f2;
  box-shadow: inset 0 -1px 0 #e5e2e1;
}
.role-permissions-thead th:first-child { left: 0; z-index: 25; }

.role-permission-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e5e2e1;
  border-radius: 10px;
  padding: 8px 10px;
  color: #5f5e5e;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.role-permission-chip:hover { border-color: #b7102a; color: #b7102a; }
.role-permission-chip input { accent-color: #b7102a; }
.role-permission-chip:has(input:checked) {
  color: var(--chip-color);
  border-color: var(--chip-color);
  background: color-mix(in srgb, var(--chip-color) 12%, white);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--chip-color) 16%, transparent);
}
.role-permission-chip[data-permission-chip="no"] { --chip-color: #dc2626; }
.role-permission-chip[data-permission-chip="view"] { --chip-color: #2563eb; }
.role-permission-chip[data-permission-chip="edit"] { --chip-color: #16a34a; }
.role-permission-chip[data-permission-chip="print"] { --chip-color: #9333ea; }

/* ── Shipping tier matrix ── */
.admin-tier-input {
  width: 100%;
  min-width: 140px;
  border-radius: 12px;
  border: 1px solid #e5e2e1;
  background: #ffffff;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #1c1b1b;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-tier-input:focus {
  border-color: #b7102a;
  box-shadow: 0 0 0 3px rgba(183, 16, 42, 0.12);
}
.admin-tier-input.is-invalid {
  border-color: #ba1a1a;
  background: #ffdad6;
}
.admin-form-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #e5e2e1;
  background: #ffffff;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #1c1b1b;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-form-input:focus {
  border-color: #b7102a;
  box-shadow: 0 0 0 3px rgba(183, 16, 42, 0.12);
}
.admin-form-input:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}
.tier-row.new-tier-row { background: rgba(0, 104, 96, 0.05); }
.tier-row.marked-for-deletion {
  background: #ffdad6;
  opacity: 0.72;
}
.tier-row.marked-for-deletion .tier-name,
.tier-row.marked-for-deletion .admin-tier-input {
  text-decoration: line-through;
}
.tier-row.has-errors { box-shadow: inset 4px 0 0 #ba1a1a; }

/* Module users panel — searchable user select */
.searchable-select { position: relative; }
.searchable-select-list {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #e5e2e1;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  list-style: none;
}
.searchable-select-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #1c1b1b;
}
.searchable-select-option:hover { background: #f6f3f2; }
.searchable-select-option.is-active {
  background: #b7102a;
  color: #ffffff;
}
.searchable-select-option.is-active .searchable-select-email { color: rgba(255, 255, 255, 0.75); }
.searchable-select-email {
  font-size: 10px;
  font-weight: 500;
  color: #a1a1aa;
}
.searchable-select-empty {
  padding: 10px;
  font-size: 11px;
  text-align: center;
  color: #a1a1aa;
}

/* Module users panel — collapsible "without access" chevron */
.module-users-panel-content details[open] .details-chevron { transform: rotate(180deg); }