/* ========= PAGE & CARDS ========= */
.access-page {
  display: block;
  padding: 1.7rem; /* desktop padding */
  background: linear-gradient(135deg, #f7fafc, #fcfeff);
  font-family: "Segoe UI", Roboto, sans-serif;
  color: #2d3748;
  box-sizing: border-box;
  width: 100%;
  min-height: 65dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: scroll;  
  scrollbar-gutter: stable both-edges;
}

@media (min-width: 1641px) {
  .access-main-row { align-items: flex-start !important; }
  .access-main-row > .access-card { align-self: auto !important; }
}
@media (max-width: 1640px) {
  .access-main-row > .access-card:first-child { order: 2; }
  .access-main-row > .access-card:last-child  { order: 1; }
}

::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(197, 197, 198, 0.7);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(197, 197, 198, 0.7);
}

div.access-page::-webkit-scrollbar {
  width: 20px;
}

div.access-page::-webkit-scrollbar-track {
  background-color: transparent;
}

div.access-page::-webkit-scrollbar-thumb {
  background-color: rgba(249, 249, 249, 0.4);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

div.access-page::-webkit-scrollbar-thumb:hover {
  background-color: rgba(249, 249, 249, 0.6);
}

.access-page > div {
  width: 100%;
  display: flex;
  align-items: stretch;
}

.access-card {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: auto;
  align-self: flex-start;
}
.access-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.access-main-row {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.access-main-row > .access-card:first-child {
  flex: 2 1 0%;
  min-width: 360px;
  width: 0;
}
.access-main-row > .access-card:last-child {
  flex: 1 1 0%;
  min-width: 760px;
  /* margin-left: 2rem; */
  width: 0;
}

@media (max-width: 1640px) {
  .access-main-row {
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100%;
  }
  .access-main-row > .access-card {
    margin-left: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .access-page {
    padding: 1rem !important;
  }
}

/* ========= TITLES ========= */
.access-section-title {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2b6cb0;
  letter-spacing: -0.3px;
  margin: 0;
}

/* ========= INPUTS ========= */
.access-input,
.access-filter {
  width: 100%;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0;
  border: 1px solid #cbd5e0;
  border-radius: 12px;
  font-size: 1rem;
  transition: all 0.25s ease;
  background: #fff;
}
.access-input:hover,
.access-filter:hover { border-color: #a0aec0; }
.access-input:focus,
.access-filter:focus {
  outline: none;
  border-color: #3182ce;
  box-shadow: 0 0 0 4px rgba(49,130,206,0.25);
}
.access-input { min-height: 42px; }
.access-input.is-invalid { border-color:#e53e3e !important; }
.access-input.is-invalid:focus {
  box-shadow:0 0 0 4px rgba(229,62,62,.18) !important;
  border-color:#e53e3e !important;
}
.access-input.is-valid { border-color:#38a169 !important; }

/* make date field same as other inputs */
.access-input--date {
  width: 100%;
  height: 46px;
  border: 1px solid #cbd5e0;
  border-radius: 12px;
  background: #fff;
  padding: 0 14px 0 40px; /* room for icon */
  font-size: 1rem;
  color: #2d3748;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: left 12px center;
  background-size: 18px;
}
.access-input--date:hover { border-color: #a0aec0; }
.access-input--date:focus {
  outline: none;
  border-color: #3182ce;
  box-shadow: 0 0 0 4px rgba(49,130,206,.25);
}

/* DatePickerSingle wrapper states */
.dbc-date.is-invalid .SingleDatePickerInput {
  border-color:#e53e3e !important;
  box-shadow:0 0 0 .25rem rgba(229,62,62,.18) !important;
}
.dbc-date.is-valid .SingleDatePickerInput { border-color:#38a169 !important; }

/* Toolbar */
.access-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 3rem;
}
.access-toolbar__left {
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:260px;
}
.access-toolbar__dot { opacity:.5; }
.access-toolbar__label { font-weight:500; margin-right:4px; }
.access-toolbar__size .Select__control,
.access-toolbar__size .Select-control { min-height:36px; height:36px; }
.access-toolbar__size { width:110px; }
.access-toolbar__right {
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 1 auto;
}
.access-toolbar__pager { display:flex; gap:8px; }

/* Buttons */
.access-button {
  height:36px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid #d0d7e2;
  background:#f7f9fc;
  cursor:pointer;
  transition:transform .02s ease, background .15s ease, box-shadow .15s ease;
}
.access-button:hover { background:#eef3fb; }
.access-button:active { transform:translateY(1px); }

.access-button--primary {
  background:#2d6cdf;
  border-color:#2d6cdf;
  color:#fff;
  font-weight:600;
  box-shadow: 0 6px 14px rgba(45,108,223,.22);
}
.access-button--primary:hover { background:#255dc2; box-shadow:0 8px 18px rgba(37,93,194,.28); }
.access-button--primary:active { transform: translateY(0); }
.access-button--secondary { background:#fff; }

@media (max-width: 640px) {
  .access-toolbar__right {
    width:100%;
    justify-content:space-between;
  }
  #access-button-save-permissions { flex:1 1 auto; }
}

/* ========= FORM GRID (unified 12-col system) ========= */
.access-form { margin-top:.5rem; }

.access-form-grid {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem 1.25rem; /* row / col gap */
}
.access-field { grid-column: span 6; }
@media (max-width: 768px){ .access-field { grid-column: 1 / -1; } }

.access-actions {
  grid-column: 7 / -1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
@media (max-width: 768px){
  .access-actions { grid-column: 1 / -1; }
  .access-actions .access-button { width:100%; }
}

/* ------- Labels & help text ------- */
.access-label {
  display:block;
  font-weight:600;
  color:#2d3748;
  margin: 2px 0 6px;
}
.access-help {
  display:block;
  margin-top:6px;
  color:#718096;
  font-size:.85rem;
}

/* ========= PERMISSIONS TABLE ========= */
.access-table-container {
  overflow-x: auto;
  margin-top: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.access-table-permissions {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  table-layout: fixed; 
}

.access-table-permissions thead th {
  text-align: center;
  background: #ebf8ff;
  color: #2b6cb0;
  font-weight: 700;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 3;
}
.access-table-permissions tbody td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  background: #fff;
}
.access-table-permissions tbody tr:hover td { background: #ebf4ff; }

.access-table-permissions .access-table-permissions {
  border-left: 3px solid #e2e8f0;
  margin-left: 0;
  padding-left: 18px;
}

.access-col-user { width: 60%; }
.access-col-perm { width: 13.333%; }
.access-cell-center { text-align: center; }

.access-table-permissions td:first-child,
.access-table-permissions th:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #fff;
  box-shadow: 2px 0 0 #e2e8f0;
}

/* Keep four columns aligned across ALL nested tables */
.access-table-permissions .col-name  { width: auto; }
.access-table-permissions .col-check { width: 100px; }

@media (max-width: 640px) {
  .access-table-permissions { font-size: 0.9rem; }
  .access-table-permissions thead th,
  .access-table-permissions tbody td { padding: 0.6rem 0.6rem; }
  .access-table-permissions .col-check { width: 64px; }
}

/* Indent name cell by level; allow wrapping for long labels */
.perm-name {
  display: flex;
  align-items: center;
  gap: 8px;
  --indent-step: 16px; /* per-level indent (12px on phones below) */
  padding-left: calc(var(--level, 0) * var(--indent-step));
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex-wrap: wrap;
  min-width: 0;
}
.perm-expander--empty {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}
@media (max-width: 640px) {
  .perm-name { --indent-step: 12px; gap: 6px; }
}

.access-table-permissions td:first-child,
.access-table-permissions .col-name,
.perm-name,
.perm-name span {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ========= EXPANDER BUTTON (final style) ========= */
.access-expander {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.access-expander::before {
  content: "▸"; /* right-pointing triangle */
  display: inline-block;
  transition: transform 0.2s ease;
  color: #64748b;
  font-size: 20px;
  line-height: 1;
}

tr:has(+ tr > td > .collapse.show) .access-expander::before,
tr:has(+ tr > td > .collapse.show) .perm-name .access-expander::before {
 transform: rotate(90deg);
 }


/* ========= COLLAPSE DETAIL PANEL ========= */
.access-detail-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  margin: 8px 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
@media (max-width: 1640px) { .access-detail-panel { margin: 6px 0; } }

.access-detail-title {
  font-weight: 700;
  color: #2b6cb0;
  margin: 1rem;
  font-size: 1rem;
}

/* ========= TABLE HEADER (detail) ========= */
.access-detail-header { font-weight: 600; color: #2b6cb0; }

.access-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px 12px;
}
.access-detail-row {
  display: contents;
  font-weight: 600;
  color: #2b6cb0;
}
.access-detail-name { font-weight: 1rem; }

@media (max-width: 640px) {
  .access-detail-grid { grid-template-columns: 1fr 1fr 1fr; }
  .access-detail-name { grid-column: 1 / -1; margin-top: 6px; }
}

/* ========= CHECKBOX STYLE (dbc.Checkbox) ========= */
.access-perm-checkbox.form-check {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.access-perm-checkbox .form-check-input {
  transform: scale(1.15);
  cursor: pointer;
  margin: 0;
  box-shadow: none;
  transition: all 0.2s ease;
}
.access-perm-checkbox .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(49,130,206,0.25);
  border-color: #3182ce;
}
.access-perm-checkbox .form-check-input:checked {
  background-color: #3182ce;
  border-color: #3182ce;
}
@media (pointer: coarse) {
  .access-perm-checkbox .form-check-input { transform: scale(1.35); }
}

/* ========= SEARCH INPUT + CLEAR ========= */
.access-search-wrap {
  position: relative;
  display: block;
  width: 100%;
}
#access-input-user-search {
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding-right: 2.25rem; /* room for × button */
}

/* Keep the clear button pinned to the right edge */
.access-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
}
.access-clear-btn:hover { opacity: 1; }
.access-clear-btn[disabled] { visibility: hidden; }

/* ========= PAGINATION ========= */
.access-pagination-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.access-pagination-controls .access-button {
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
}
.access-pagination-controls #pagination-page-info {
  font-weight: 600;
  color: #2b6cb0;
  margin-left: 6px;
}

/* ------- Header tweaks (stacked) ------- */
.access-card__header {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.access-subtitle {
  display:block;
  color:#718096;
  font-size:.95rem;
  font-weight:500;
}

/* Add breathing room around the divider */
.access-card > hr {
  margin: 10px 0 14px;
  border: 0;
  border-top: 1px solid #e2e8f0;
}

/* Slightly tighten vertical rhythm for fields */
.access-field .access-label { margin: 0 0 6px; }
.access-field .access-help { margin-top: 6px; }

/* Keep input/button heights consistent */
.access-button--pill {
  border-radius:999px;
  padding:0 18px;
  height:42px;
  font-size:1rem;
  line-height: 42px;
}

/* On very small screens, ensure no crowding */
@media (max-width: 480px){
  .access-card__header { gap: 4px; }
  .access-card > hr { margin: 8px 0 12px; }
}

/* ------- Optional: subtle input icons ------- */
#access-input-username{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
#access-input-email{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v16H4z'/><path d='M22 6l-10 7L2 6'/></svg>"); }
#access-input-document{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/></svg>"); }
#access-input-phone{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92V21a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.05 5.2 2 2 0 0 1 4 3h4.09a2 2 0 0 1 2 1.72c.12.9.33 1.77.63 2.6a2 2 0 0 1-.45 2.11L9.91 10.09a16 16 0 0 0 6 6l.66-.36a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.6.63A2 2 0 0 1 22 16.92z'/></svg>"); }

#access-input-username,
#access-input-email,
#access-input-document,
#access-input-phone{
  background-repeat:no-repeat;
  background-position: 12px center;
  background-size:18px 18px;
  padding-left: 42px;
}

.logs-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'  viewBox='0 0 24 24' fill='none' stroke='%2390a4ae' stroke-width='2'  stroke-linecap='round' stroke-linejoin='round'> <line x1='8' y1='6' x2='21' y2='6'/> <line x1='8' y1='12' x2='21' y2='12'/> <line x1='8' y1='18' x2='21' y2='18'/> <circle cx='3' cy='6' r='1'/> <circle cx='3' cy='12' r='1'/> <circle cx='3' cy='18' r='1'/> </svg>");
}

/* =========================================================
   AUDIT PANEL — ENHANCED THEME & LAYOUT
   ========================================================= */

/* ---------- Local design tokens (scoped) ---------- */
.audit-panel {
  --audit-bg: #ffffff;
  --audit-fg: #0f172a;            /* slate-900 */
  --audit-muted: #64748b;         /* slate-500 */
  --audit-border: #e2e8f0;        /* slate-200 */
  --audit-head-bg: #f8fafc;       /* slate-50 */
  --audit-chip-bg: #f8fafc;
  --audit-chip-fg: #334155;
  --audit-chip-border: #e2e8f0;
  --audit-shadow-1: 0 1px 2px rgba(16,24,40,0.06);
  --audit-shadow-2: 0 6px 18px rgba(16,24,40,0.08);
}

/* ---------- Offcanvas & header ---------- */
.audit-panel .offcanvas-body {
  background: var(--audit-bg);
  color: var(--audit-fg);
  overflow-y: auto;
  padding-bottom: 64px; /* breathing room above the sticky pager */
}

.audit-subtitle { color: var(--audit-muted); }

.badge-beta {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #e0e7ff;
}
@media (prefers-color-scheme: dark) {
  .badge-beta {
    background: #202a52;
    color: #c7cfff;
    border-color: #2a3a7a;
  }
}

/* ---------- Toolbar polish ---------- */
.audit-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 8px 0 10px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--audit-bg) 92%, transparent);
  backdrop-filter: saturate(125%) blur(8px);
  border-bottom: 1px solid var(--audit-border);
}
.audit-toolbar .input-group .form-control,
.audit-toolbar .Select__control,
.audit-toolbar .form-select {
  border-color: var(--audit-border);
  box-shadow: none;
}
.audit-toolbar .input-group .form-control:focus,
.audit-toolbar .Select__control--is-focused,
.audit-toolbar .form-select:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18); /* indigo focus ring */
  border-color: #818cf8;
}
.audit-toolbar .access-button {
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.audit-toolbar .access-button:active { transform: translateY(0.5px); }

/* ---------- Table container & sticky header ---------- */
.audit-table-wrap {
  border: 1px solid var(--audit-border);
  border-radius: 12px;
  overflow: auto;
  background: var(--audit-bg);
  box-shadow: var(--audit-shadow-1);
  max-height: clamp(360px, 70vh, 760px);
}
.audit-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--audit-head-bg);
  box-shadow: inset 0 -1px var(--audit-border);
}
.audit-table th,
.audit-table td {
  white-space: normal;
  word-break: break-word;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
}
.audit-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--audit-head-bg) 65%, transparent);
}
.audit-row:hover {
  background: color-mix(in srgb, var(--audit-head-bg) 85%, transparent);
}

/* Action badge */
.audit-badge.badge {
  border-radius: 999px;
  padding: .35rem .6rem;
  letter-spacing: .02em;
  font-weight: 700;
}

/* payload chip */
.code-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background: var(--audit-chip-bg);
  border: 1px solid var(--audit-chip-border);
  color: var(--audit-chip-fg);
  border-radius: 8px;
  padding: 3px 7px;
  display: inline-block;
}

/* Pager */
.audit-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* ---------- No horizontal scroll on desktop ---------- */
@media (min-width: 992px) {
  .audit-panel.offcanvas-end {
    width: 980px;            /* 920–1040px are comfortable */
    max-width: 96vw;
  }
  /* nth-child helpers if column classes aren't present */
  .audit-table thead th:nth-child(1),
  .audit-table tbody td:nth-child(1) { width: 160px; } /* Quando */
  .audit-table thead th:nth-child(2),
  .audit-table tbody td:nth-child(2) { width: 140px; } /* Evento */
  .audit-table thead th:nth-child(4),
  .audit-table tbody td:nth-child(4) { width: 260px; } /* E-mail */
  .audit-table thead th:nth-child(5),
  .audit-table tbody td:nth-child(5) { width: 180px; } /* Feito por (if present) */

  /* class-based sizing (preferred when available) */
  .audit-table .col-when   { width: 150px; white-space: nowrap; }
  .audit-table .col-action { width: 120px; white-space: nowrap; }
  .audit-table .col-user   { width: 160px; }
  .audit-table .col-email  { width: 260px; }
  .audit-table .col-actor  { width: 170px; white-space: nowrap; }
  .audit-table .col-details{ min-width: 260px; }

  /* tighter chips in table view */
  .perm-chip { font-size: 11px; padding: 2px 7px; }
  .audit-diff-summary { font-size: 12px; }
}

/* ---------- Full width on small screens ---------- */
@media (max-width: 575.98px) {
  .audit-panel.offcanvas-end { width: 100vw; }
}

/* ---------- Scrollbar styling (WebKit + Firefox) ---------- */
.audit-table-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
.audit-table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--audit-muted) 28%, transparent);
  border-radius: 10px;
  border: 2px solid var(--audit-bg);
}
.audit-table-wrap::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--audit-bg) 65%, transparent);
  border-radius: 10px;
}
.audit-table-wrap { scrollbar-color: color-mix(in srgb, var(--audit-muted) 38%, transparent) var(--audit-bg); }

/* ---------- High-contrast & accessibility ---------- */
.audit-table a:focus-visible,
.audit-toolbar .access-button:focus-visible,
.audit-toolbar .form-control:focus-visible,
.audit-toolbar .form-select:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(99,102,241,.32);
  border-color: #818cf8 !important;
}

/* ---------- Reduced motion friendliness ---------- */
@media (prefers-reduced-motion: reduce) {
  .audit-toolbar .access-button,
  .audit-badge.badge { transition: none !important; }
}

/* ---------- Optional: compact density mode ---------- */
.audit-panel.audit-panel--dense .audit-table th,
.audit-panel.audit-panel--dense .audit-table td { padding-top: 6px; padding-bottom: 6px; }
.audit-panel.audit-panel--dense .audit-table tr.audit-row { padding: 10px 12px; }

/* ===== Permission diff chips ===== */
.audit-diff { display: grid; gap: 8px; }
.audit-diff-group { display: grid; gap: 6px; }
.audit-diff-title {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--audit-muted, #64748b);
}
.audit-diff-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-diff-empty { color: var(--audit-muted, #64748b); }

/* Base chip */
.chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 3px 7px;
  border-radius: 8px;
  border: 1px solid var(--audit-chip-border, #e2e8f0);
  background: var(--audit-chip-bg, #f8fafc);
  color: var(--audit-chip-fg, #334155);
  word-break: break-word;
}

/* Added / Removed variants */
.chip-add {
  background: #ecfdf5;            /* emerald-50 */
  border-color: #a7f3d0;          /* emerald-200 */
  color: #065f46;                 /* emerald-800 */
}
.chip-rem {
  background: #fef2f2;            /* rose-50 */
  border-color: #fecaca;          /* rose-200 */
  color: #7f1d1d;                 /* rose-900 */
}

/* Inline preview chips */
.perm-chip-list { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.perm-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  max-width: 34ch;               /* truncate gracefully in-row */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.perm-chip--add { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.perm-chip--rem { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.perm-chip--more { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }

/* Popover styling */
.audit-popover .popover-body {
  max-width: min(72vw, 640px);
  max-height: 55vh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.audit-popover .popover-title {
  grid-column: span 2;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--audit-muted, #64748b);
  margin: 2px 0 4px;
}
.audit-popover .perm-chip-list { grid-column: span 2; }
.audit-popover hr {
  margin: 10px 0;
  border-top: 1px solid #e2e8f0;
}

/* keep chips tidy even with long friendly labels in popover */
.audit-popover .perm-chip {
  max-width: 100%;
  white-space: normal;
}

/* --- sizing reset: stop breaking words in the middle --- */
.audit-table th, .audit-table td { word-break: normal !important; overflow-wrap: anywhere; }

/* overall density + type scale */
.audit-table { font-size: 0.92rem; }
.audit-badge.badge { font-size: 0.72rem; padding: .25rem .5rem; }

/* ellipsis helpers for user/email/actor */
.audit-ellipsis {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ----- MOBILE LAYOUT (cards, no horizontal scroll, touch-friendly details) ----- */
@media (max-width: 768px) {
  .audit-table thead { display: none !important; }
  .audit-table,
  .audit-table tbody,
  .audit-table tr,
  .audit-table td {
    display: block !important;
    width: 100% !important;
  }
  .audit-table tr.audit-row {
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid var(--audit-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: var(--audit-shadow-1, 0 1px 2px rgba(16,24,40,0.06));
    background: var(--audit-bg, #fff);
  }
  .audit-table td {
    border: none !important;
    padding: 6px 0;
  }
  .audit-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--audit-muted);
    margin-bottom: 4px;
  }
  .audit-pager-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--audit-bg, #fff) 92%, transparent);
    backdrop-filter: saturate(125%) blur(8px);
    border-top: 1px solid var(--audit-border, #e2e8f0);
    padding: 10px 12px;
    margin-top: 8px;
  }
  .perm-chip { font-size: 12px; }
}

/* Touch/Coarse pointer: use <details>, hide popover */
.audit-mobile-details { display: none; }
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  .audit-mobile-details { display: block !important; margin-top: 6px; }
  .audit-popover { display: none !important; }
  .audit-mobile-details > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: #4338ca;
    margin-bottom: 6px;
  }
  .audit-mobile-details > summary::-webkit-details-marker { display: none; }
  .audit-mobile-details[open] > summary { color: #1f2937; }
}

@media (max-width: 480px) {
  .audit-toolbar .audit-search-ig .form-control { height: 36px; }
  .audit-toolbar .audit-search-ig .btn,
  #audit-clear-filter { height: 36px; padding: 0 10px; font-size: 0.85rem; }
}

.audit-pager-size { width: 6rem; }

.audit-panel .offcanvas-body,
.audit-table-wrap{
  scrollbar-gutter: stable;
}

:root {
  --access-card-min-h: 750px;
}

@media (min-width: 1641px) {
  .access-main-row { align-items: flex-start !important; }
  .access-main-row > .access-card {
    align-self: auto !important;
    min-height: var(--access-card-min-h);
  }
}

@media (max-width: 1640px) {
  .access-main-row > .access-card { min-height: 0; }
}

.access-perm-checkbox .form-check-input[disabled] {
  opacity: .55;
  filter: grayscale(30%);
  box-shadow: none;
  cursor: not-allowed;  
}

.access-button--primary[disabled] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.access-toast.toast {
  --toast-bg: #ffffff;
  --toast-fg: #0f172a;
  --toast-muted: #64748b;
  --toast-border: #e2e8f0;
  --toast-accent: #2d6cdf; /* default (info/primary) */
  --toast-shadow: 0 10px 24px rgba(16,24,40,0.12), 0 4px 10px rgba(16,24,40,0.06);

  border-radius: 14px;
  border: 1px solid var(--toast-border);
  background: color-mix(in srgb, var(--toast-bg) 92%, transparent);
  backdrop-filter: saturate(120%) blur(8px);
  color: var(--toast-fg);
  box-shadow: var(--toast-shadow);
  overflow: hidden;
  padding: 0;
  min-width: 280px;
  max-width: min(92vw, 420px);
  animation: toast-in 260ms cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity;
  position: relative;
}

/* left accent bar */
.access-toast.toast::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--toast-accent);
}

/* success / danger variants (hooked by className) */
.access-toast--success.toast { --toast-accent: #16a34a; } /* emerald-600 */
.access-toast--danger.toast  { --toast-accent: #dc2626; } /* red-600  */

/* header/body polish */
.access-toast .toast-header {
  background: color-mix(in srgb, var(--toast-bg) 80%, transparent);
  border-bottom: 1px solid var(--toast-border);
  color: var(--toast-fg);
  font-weight: 700;
  padding: 10px 12px;
}
.access-toast .toast-header small,
.access-toast .toast-header .text-muted { color: var(--toast-muted) !important; }

.access-toast .toast-body {
  padding: 12px 14px 14px;
  color: var(--toast-fg);
  line-height: 1.35;
}

/* close (×) alignment */
.access-toast .btn-close {
  filter: grayscale(20%);
  opacity: .7;
}
.access-toast .btn-close:hover { opacity: 1; }

/* subtle progress bar that matches duration (3s) */
.access-toast::after {
  content: "";
  position: absolute;
  left: 4px;                /* after accent */
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--toast-accent) 85%, white);
  transform-origin: left center;
  animation: toast-progress 3s linear forwards; /* align with duration=3000 */
  opacity: .9;
}

/* reduced-motion friendly */
@media (prefers-reduced-motion: reduce) {
  .access-toast { animation: none; }
  .access-toast::after { animation: none; display: none; }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  .access-toast.toast {
    --toast-bg: #0b1020;
    --toast-fg: #e7ecf8;
    --toast-muted: #9aa3b2;
    --toast-border: #1f2a44;
    --toast-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.4);
    background: color-mix(in srgb, var(--toast-bg) 92%, transparent);
  }
  .access-toast .toast-header { background: color-mix(in srgb, var(--toast-bg) 85%, transparent); }
  .access-toast::after { background: color-mix(in srgb, var(--toast-accent) 70%, black); }
}

/* keyframes */
@keyframes toast-in {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.ux-toast {
  --toast-duration: 3000ms;              /* default for success */
  --toast-radius: 12px;
  --toast-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-radius: var(--toast-radius) !important;
  box-shadow: var(--toast-shadow);
  border: 1px solid #e2e8f0 !important;
  padding-right: 12px;
}
.ux-toast .toast-header {
  border: 0;
  font-weight: 700;
  color: #1f2937;
}
.ux-toast .toast-body {
  color: #334155;
  font-size: .95rem;
}

/* success / error chroma */
.ux-toast--success .toast-header { background: #ecfdf5 !important; color: #065f46; }
.ux-toast--error   .toast-header { background: #fef2f2 !important; color: #7f1d1d; }

/* progress bar (bottom) */
.ux-toast__progress {
  position: relative;
  height: 3px;
  background: transparent;
  overflow: hidden;
  margin: 4px -12px -6px -12px; /* stretch to edges */
  border-bottom-left-radius: var(--toast-radius);
  border-bottom-right-radius: var(--toast-radius);
}
.ux-toast__progress::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: currentColor;
  opacity: .35;
  transform: scaleX(0);
  transform-origin: left;
  animation: ux-toast-fill var(--toast-duration) linear forwards;
}
.ux-toast--success .ux-toast__progress { color: #10b981; } /* emerald-500 */
.ux-toast--error   .ux-toast__progress { color: #ef4444; } /* red-500 */

@keyframes ux-toast-fill { to { transform: scaleX(1); } }

/* Retry button inside toast */
.ux-toast__retry {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fff7f7;
  color: #7f1d1d;
  font-weight: 600;
  cursor: pointer;
}
.ux-toast__retry:hover { background: #fee2e2; }

.access-table-permissions tbody tr:hover td { background:#f3f7ff; } /* softer */
.access-table-permissions .col-check { width: 88px; } /* was 100 */

/* ===== Table loading overlay (on top of everything) ===== */
.access-table-container {
  position: relative;          /* create stacking context */
  overflow: hidden;            /* clip overlay to rounded borders */
}

.access-loading-overlay {
  position: absolute;
  inset: 0;
  display: none;               /* default hidden */
  z-index: 999;                /* higher than sticky headers etc */
  pointer-events: none;        /* enabled only when loading */
}

/* show + block clicks when loading */
.access-table-container.is-loading .access-loading-overlay {
  display: block;
  pointer-events: auto;
}

/* dim layer */
.access-table-container.is-loading .access-loading-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.62);
  backdrop-filter: saturate(120%) blur(4px);
  border-radius: 14px; /* match container radius */
  z-index: 999;        /* ensure above table/sticky header */
}

/* spinner */
.access-table-container.is-loading .access-loading-overlay::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 3px solid #cbd5e0;
  border-top-color: #2d6cdf;
  animation: access-spin .9s linear infinite;
  z-index: 1000;       /* above the dim layer */
}

@keyframes access-spin { to { transform: rotate(360deg); } }

/* Optional: visually soften underlying table while loading */
.access-table-container.is-loading .access-table-permissions {
  filter: blur(0.2px) saturate(90%);
}

/* ========= Batch Import (CSV) — Look & Feel ========= */

/* Modal */
#batch-modal .modal-content {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
#batch-modal .modal-header {
  padding: 14px 18px;
  border: 0;
}
#batch-modal .modal-title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .2px;
}
#batch-modal .modal-body {
  padding: 16px 18px 6px;
}
#batch-modal .modal-footer {
  padding: 12px 18px 16px;
  border: 0;
}

/* Upload area */
#batch-modal .dash-upload {
  transition: all .2s ease;
  background: linear-gradient(180deg, rgba(246,248,250,.8), rgba(246,248,250,.6));
  border-color: #d0d7de !important;
  color: #5e6b76;
}
#batch-modal .dash-upload:hover {
  background: #f6f8fa;
  border-color: #9ca3af !important;
}
#batch-modal .dash-upload a {
  color: #0d6efd;
  text-decoration: none;
  border-bottom: 1px dashed #0d6efd66;
}
#batch-modal .dash-upload a:hover {
  border-bottom-color: #0d6efd;
}

/* Delimiter row */
#batch-detected {
  font-size: .85rem;
  opacity: .75;
}

/* “Details” preview block */
#batch-modal details {
  background: #fafbfc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
}
#batch-modal details summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: #374151;
}
#batch-modal details[open] summary {
  margin-bottom: 6px;
}
#batch-preview {
  margin: 8px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .85rem;
  background: #0b1020;
  color: #bcd7ff;
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 220px !important;
  overflow: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Stats line (valid/invalid totals) */
#batch-stats {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: .92rem;
  color: #111827;
}
#batch-stats::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: linear-gradient(90deg, #22c55e, #0ea5e9);
  border-radius: 50%;
}

/* Results table */
#batch-results .table {
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #f8fafc;
  --bs-table-striped-color: inherit;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
#batch-results thead.table-light {
  background: linear-gradient(180deg, #f8fafc, #eef2f7);
  border-bottom: 1px solid #e5e7eb;
}
#batch-results th {
  font-weight: 700;
  color: #334155;
  font-size: .9rem;
}
#batch-results td {
  vertical-align: middle;
  font-size: .92rem;
  color: #1f2937;
}

/* Status chips inside the table, if you render them later */
.badge-status {
  padding: .35rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .2px;
}
.badge-status--ok {
  background: #e8fff3;
  color: #0f5132;
  border: 1px solid #b5f2cb;
}
.badge-status--error {
  background: #fff1f2;
  color: #842029;
  border: 1px solid #f5c2c7;
}
.badge-status--skip {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

/* Footer buttons */
#batch-modal .modal-footer .btn {
  border-radius: 10px;
  font-weight: 600;
}
#batch-validate-btn.btn-secondary {
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #e5e7eb;
}
#batch-validate-btn.btn-secondary:hover {
  background: #e5e7eb;
}
#batch-confirm-btn.btn-success {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border: 0;
  box-shadow: 0 6px 20px rgba(34,197,94,.25);
}
#batch-confirm-btn.btn-success:disabled {
  background: #a7f3d0 !important;
  color: #064e3b !important;
  box-shadow: none;
  opacity: .85;
}
#batch-close-btn.btn-link {
  color: #6b7280;
  text-decoration: none;
}
#batch-close-btn.btn-link:hover {
  color: #374151;
}

/* Trigger button */
#batch-open-btn.btn-primary {
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(13,110,253,.22);
}

/* Small helpers */
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ms-2 { margin-left: .5rem !important; }

/* Upload zone */
.dash-upload {
  width: 100%;
  padding: 1.25rem;
  border: 1.5px dashed var(--bs-border-color, #d9d9d9);
  border-radius: .75rem;
  text-align: center;
  background: rgba(0,0,0,.015);
  transition: border-color .2s ease, background .2s ease;
}
.dash-upload:hover {
  border-color: var(--bs-primary, #0d6efd);
  background: rgba(13,110,253,.03);
}

/* Preview box */
.batch-preview {
  max-height: 220px;
  overflow: auto;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: .5rem;
  padding: .75rem 1rem;
}

/* Subtle hint when disabled */
#batch-validate-btn[disabled],
#batch-confirm-btn[disabled] {
  opacity: .85;
  cursor: not-allowed;
}

/* Layout helpers */
.batch-body { padding-top: .25rem; }

/* Upload area */
.dash-upload {
  border: 2px dashed #d8dee4;
  border-radius: .75rem;
  padding: 18px;
  transition: border-color .15s ease, background-color .15s ease;
  background: #f8fafc;
}
.dash-upload:hover { border-color: #9aa4b2; background: #f5f7fb; cursor: pointer; }

.dash-upload__inner { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dash-upload__icon  { font-size: 28px; line-height: 1; }
.dash-upload__text  { font-size: 15px; }
.dash-upload a { text-decoration: underline; }

/* Preview box */
.batch-preview {
  max-height: 220px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  background: #fff;
  padding: .5rem .75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  white-space: pre;
}

/* Stats badges (ok / error / total) */
.batch-stats .badge-status {
  display: inline-block;
  padding: .35rem .55rem;
  border-radius: 9999px;
  font-size: .75rem;
  margin-left: .25rem;
}
.badge-status--ok    { background: #eafaf1; color: #127a3a; }
.badge-status--error { background: #fdecea; color: #b42318; }
.badge-status--skip  { background: #eef2ff; color: #3730a3; }

/* Compact mode for Upload when a file exists */
.dash-upload--compact {
  border: 1px dashed #d8dee4;
  background: #fff;
  padding: 8px 12px;
  border-radius: .5rem;
  display: inline-block;
}
.dash-upload--compact .dash-upload__compact { font-weight: 600; text-decoration: underline; }

/* File bar */
.filebar {
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: .75rem;
  padding: 10px 12px;
}
.filebar__icon { font-size: 20px; line-height: 1; margin-right: 8px; }
.filebar__name { font-weight: 600; }

/* Improve gap utility */
.gap-2 { gap: .5rem; }




/* ========= CHANGE PASSWORD ========= */

.change-password-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.access-search-wrap.change-password {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 1200px) {
    .access-search-wrap.change-password {
        width: 50% !important;
    }
}

.show-password-btn {
    padding: 6px 10px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    border-radius: 6px;
}

.chg-password-text {
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.chg-password-text.success {
    color: #22c55e !important;
}

.chg-password-text.failure {
    color: #dc2626 !important;
}

.access-card.no-content {
    min-height: 0 !important;
}