/* --------------------------------------------------
   role-assign.css — Role Management styling (theme-aware)
   Uses global tokens from /public/css/themes.css
   -------------------------------------------------- */

/* ============ 1) Local aliases to global tokens ============ */
:root{
  /* pull from themes.css */
  --ra-bg:        var(--bg);
  --ra-surface:   var(--surface);
  --ra-surface-2: var(--surface-2);
  --ra-text:      var(--text);
  --ra-muted:     var(--muted);
  --ra-link:      var(--link);
  --ra-border:    var(--border);
  --ra-shadow:    var(--shadow);
  --ra-accent:    var(--accent);
  --ra-accent-100:var(--accent-100);
  --ra-on-accent: var(--on-accent);

  /* fields / tables (contrast-safe across themes) */
  --field-bg:       var(--ra-surface);
  --field-bg-elev:  var(--ra-surface-2);
  --field-border:   var(--ra-border);
  --placeholder:    var(--ra-muted);

  --table-border:     var(--ra-border);
  --table-header-bg:  var(--ra-surface-2);
  --table-row-alt:    var(--ra-surface);
  --table-hover:      var(--ra-accent-100);

  /* sizes */
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;

  /* focus / transitions */
  --focus: 0 0 0 3px rgba(76,201,240,.35);
  --focus-strong: 0 0 0 4px rgba(76,201,240,.45);
  --transition:.18s ease;
  --bezier:cubic-bezier(.2,.65,.3,1);

  font-size:16px;
}

/* Enhance header and accents a touch using color-mix when available */
@supports (background: color-mix(in srgb, red, white)) {
  :root{
    --header-grad-1: color-mix(in srgb, var(--ra-accent) 16%, var(--ra-surface) 84%);
    --header-grad-2: color-mix(in srgb, var(--ra-accent) 6%,  var(--ra-surface) 94%);
    --focus: 0 0 0 3px color-mix(in srgb, var(--ra-accent) 45%, transparent);
    --focus-strong: 0 0 0 4px color-mix(in srgb, var(--ra-accent) 55%, transparent);
  }
}

/* ============ 2) Reset & base ============ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ra-text);
  background: var(--ra-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle ambient wash */
@supports (background: color-mix(in srgb, red, white)) {
  body{
    background:
      radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--ra-accent) 10%, var(--ra-bg) 90%), transparent 60%),
      radial-gradient(900px 500px at 110% 8%, color-mix(in srgb, var(--ra-accent) 7%, var(--ra-bg) 93%), transparent 60%),
      var(--ra-bg);
  }
}

::placeholder{ color:var(--placeholder); }
a{ color:var(--ra-link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:where(button, a, input, select, textarea, [role="button"]):focus-visible{
  outline:none; box-shadow:var(--focus);
}

/* ============ 3) Containers & cards ============ */
.container{ max-width:1200px; margin:2rem auto; padding:0 1rem; }
.card{
  background:var(--ra-surface);
  border:1px solid var(--ra-border);
  border-radius:var(--radius);
  box-shadow:var(--ra-shadow);
  padding:1.25rem;
}

/* ============ 4) Header ============ */
.page-header{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem;
  background: linear-gradient(180deg, var(--header-grad-1, var(--ra-surface-2)), var(--header-grad-2, var(--ra-surface)));
  border:1px solid var(--ra-border);
  border-radius:12px;
  position:sticky; top:.5rem; z-index:40;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-title{ font-weight:700; letter-spacing:.3px; font-size:1.35rem; }
.header-actions{ display:flex; gap:.5rem; margin-left:auto; }

/* ============ 5) Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.55rem .9rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--ra-accent);
  background:var(--ra-accent);
  color:var(--ra-on-accent); font-weight:700; font-size:.95rem;
  cursor:pointer; transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition), filter var(--transition);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.18); filter:brightness(.98); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.ghost{ background:transparent; color:var(--ra-accent); border:1px solid var(--ra-accent); }
.btn.small{ padding:.4rem .7rem; font-size:.9rem; }
.btn.tiny{ padding:.28rem .55rem; font-size:.8rem; border-radius:var(--radius-xs); }

.icon-btn{
  appearance:none; border:1px solid var(--ra-border);
  background:var(--field-bg); color:var(--ra-text);
  border-radius:10px; padding:.45rem .6rem; cursor:pointer;
  transition:background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.icon-btn:hover{ background:var(--field-bg-elev); transform:translateY(-1px); }

/* ============ 6) Controls toolbar ============ */
.controls{ margin-top:1rem; }
.control-row{
  display:grid;
  grid-template-columns: 1fr repeat(3, minmax(160px, 220px)) repeat(2, max-content);
  gap:.75rem; align-items:center;
}

/* search */
.searchbox{
  position:relative; display:flex; align-items:center; width:100%;
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:12px; overflow:hidden;
}
.searchbox:focus-within{ box-shadow:var(--focus); }
.searchbox input[type="search"]{
  flex:1; padding:.65rem .9rem; background:transparent; color:var(--ra-text);
  border:none; outline:none; font-size:.98rem;
}
.searchbox .icon-btn{ border:none; background:transparent; margin-right:.25rem; color:var(--ra-text); }

/* select wrapper (Sort) */
.select{
  display:flex; align-items:center; gap:.5rem;
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:12px; padding:.35rem .55rem;
}
.select-label{ font-size:.82rem; color:var(--ra-muted); }
.select select{
  appearance:none; border:none; background:transparent; color:var(--ra-text);
  font-weight:700; padding:.35rem .1rem; outline:none; min-width:140px;
}
.select select, .select option{ background-color:var(--field-bg); color:var(--ra-text); }

/* multiselect with popup */
.multiselect{ position:relative; display:flex; align-items:center; gap:.5rem; }
.chip-input{
  display:inline-flex; align-items:center;
  background:var(--field-bg);
  border:1px solid var(--field-border);
  border-radius:12px; padding:.48rem .7rem; color:var(--ra-text);
  cursor:pointer; transition: box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.chip-input:hover{ background:var(--field-bg-elev); }
.chip-input[aria-expanded="true"]{ box-shadow: var(--focus); background:var(--field-bg-elev); }

.popup-list{
  position:absolute; top:100%; left:0; margin-top:.35rem; z-index:30;
  min-width:260px; max-height:280px; overflow:auto;
  background:var(--ra-surface);
  border:1px solid var(--field-border);
  border-radius:12px; box-shadow:var(--ra-shadow);
  padding:.35rem; display:none;
}
.multiselect [aria-expanded="true"] + .popup-list{ display:block; }
.popup-list button{
  width:100%; text-align:left; background:transparent; border:none;
  color:var(--ra-text); padding:.55rem .65rem; border-radius:10px; cursor:pointer;
}
.popup-list button[aria-selected="true"]{
  background:var(--ra-accent-100);
  border:1px dashed color-mix(in srgb, var(--ra-accent) 45%, transparent);
}
.popup-list button:hover{ background:var(--ra-surface-2); }

/* toggles & chips */
.toggle{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; color:var(--ra-text); }
.toggle input{ width:1.05rem; height:1.05rem; }

.active-chips{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem;
}
.active-chips .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--ra-border);
  background:var(--ra-surface-2);
  color:var(--ra-text);
  padding:.28rem .55rem; border-radius:999px; font-size:.85rem; font-weight:700;
}

/* ============ 7) Bulk bar ============ */
.bulk-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-top:1rem; padding:.6rem .8rem;
  background:linear-gradient(180deg, var(--ra-accent-100), transparent);
  border:1px dashed color-mix(in srgb, var(--ra-accent) 40%, transparent);
  border-radius:12px; color:var(--ra-text);
}
.bulk-info{ color:var(--ra-muted); }
.bulk-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }

/* ============ 8) Table ============ */
.table-wrapper{
  margin-top:1rem; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--ra-border);
  background:var(--ra-surface);
}
.role-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:760px; }

/* header */
.role-table thead th{
  position:sticky; top:0; z-index:10;
  background: var(--table-header-bg);
  color: var(--ra-text);
  border-bottom:1px solid var(--table-border);
  padding:.75rem .85rem; font-weight:800; letter-spacing:.2px;
}

/* cells */
.role-table th, .role-table td{
  text-align:left; padding:.7rem .85rem;
  border-bottom:1px solid var(--table-border);
  vertical-align:middle; color:var(--ra-text);
  background: var(--ra-surface);
}

/* zebra + hover */
.role-table tbody tr:nth-child(even) td{ background: var(--table-row-alt); }
.role-table tbody tr:hover td{ background: var(--table-hover); }

.th-btn{
  all:unset; display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
}
.th-btn::after{
  content:""; width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px); opacity:.7;
}
.th-btn[data-dir="desc"]::after{ transform:rotate(-135deg) translateY(1px); }
.th-btn:focus-visible{ box-shadow:var(--focus-strong); border-radius:8px; padding:.1rem .25rem; }

.min-col{ width:64px; white-space:nowrap; }

/* row cells */
.cell-name{ display:flex; align-items:center; gap:.65rem; }
.avatar{
  width:28px; height:28px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--ra-accent) 35%, var(--ra-surface) 65%),
    color-mix(in srgb, var(--ra-accent) 15%, var(--ra-surface) 85%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ra-text) 15%, transparent);
}
.name-text{ font-weight:800; color:var(--ra-text); }

/* email */
.cell-email a{ color:var(--ra-link); }
.cell-email a:hover{ text-decoration:underline; }

/* role chips */
.role-chips{ display:flex; flex-wrap:wrap; gap:.35rem; }
.role-chips .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--ra-border);
  background:var(--ra-surface-2);
  color:var(--ra-text);
  padding:.22rem .5rem; border-radius:999px; font-size:.84rem; font-weight:700;
}
.role-chips .chip.accent{
  background:var(--ra-accent);
  border-color:var(--ra-accent);
  color:var(--ra-on-accent);
}

/* actions */
.row-actions{ display:flex; gap:.35rem; margin:0; padding:0; }
.edit-btn, .more-btn{ font-size:1rem; }

/* states */
.state{ display:flex; align-items:center; gap:.6rem; padding:1rem; color:var(--ra-muted); }
.state.empty, .state.error{ background:var(--ra-surface-2); }
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--ra-text) 20%, transparent);
  border-top-color: var(--ra-accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* footer */
.table-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.65rem .8rem; background:var(--ra-surface-2);
  border-top:1px solid var(--ra-border); color:var(--ra-text);
}
.rows-per-page{ display:flex; align-items:center; gap:.5rem; }
.pagination{ display:flex; align-items:center; gap:.5rem; }
.page-status{ color:var(--ra-muted); }

/* ============ 9) Modals (Edit / Bulk) ============ */
.modal{
  border:none; border-radius:16px; width:min(720px, 94vw);
  box-shadow:var(--ra-shadow);
  background:var(--ra-surface);
  border:1px solid var(--ra-border);
  color:var(--ra-text);
}
.modal::backdrop{ background: rgba(6, 10, 18, .6); backdrop-filter: blur(2px); }
.modal-content{ display:flex; flex-direction:column; gap:1rem; padding:1rem; }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.25rem .25rem .5rem .25rem; border-bottom:1px solid var(--ra-border);
}
.modal-header h2{ margin:0; font-size:1.15rem; color:var(--ra-text); }

/* identity block */
.id-block{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.field-row{ display:flex; flex-direction:column; gap:.3rem; }
.field-row label{ font-size:.92rem; color:var(--ra-text); font-weight:700; }
.field-row input{
  padding:.6rem .75rem; border:1px solid var(--field-border); border-radius:12px;
  background:var(--field-bg); color:var(--ra-text); font-size:1rem;
}
.field-row input:focus{ background:var(--field-bg-elev); }

/* fieldsets */
.fieldset{
  border:1px solid var(--field-border); border-radius:12px; padding:.9rem;
  background:var(--ra-surface-2);
}
.fieldset legend{ padding:0 .4rem; color:var(--ra-text); font-weight:800; }
.fieldset .hint{ margin-top:.45rem; color:var(--ra-muted); font-size:.9rem; }
.fieldset-actions{ display:flex; gap:.45rem; margin-bottom:.55rem; }

/* checkbox grid */
.checkbox-grid{
  display:grid; gap:.6rem .9rem; margin-top:.6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.checkbox-grid label{
  display:flex; align-items:center; gap:.5rem; font-size:.98rem; color:var(--ra-text);
}
.checkbox-grid input{ width:1.05rem; height:1.05rem; }

/* disabled fieldset */
fieldset[disabled]{ opacity:.55; pointer-events:none; user-select:none; }

/* modal footer */
.modal-actions{
  display:flex; justify-content:flex-end; gap:.6rem; margin-top:.25rem;
  padding-top:.6rem; border-top:1px solid var(--ra-border);
}

/* ============ 10) Toasts ============ */
.toast-region{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:100; }
.toast{
  background: linear-gradient(180deg, var(--table-header-bg), var(--ra-surface));
  color: var(--ra-text);
  border:1px solid var(--ra-border);
  padding:.6rem .9rem; border-radius:12px; box-shadow:var(--ra-shadow);
}
.toast[hidden]{ display:none; }

/* ============ 11) Responsive ============ */
@media (max-width: 980px){
  .control-row{ grid-template-columns:1fr 1fr; grid-auto-rows:minmax(44px, auto); }
  .id-block{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .page-title{ font-size:1.05rem; }
  .header-actions{ gap:.35rem; }
  .control-row{ grid-template-columns:1fr; }
  .table-footer{ flex-direction:column; align-items:flex-start; gap:.6rem; }
}

/* ============ 12) Helpers ============ */
.checkbox input{ width:1.05rem; height:1.05rem; }
menu.row-actions{ background:transparent; }
.hidden{ display:none !important; }
.fade-in{ animation:fadeIn .2s var(--bezier); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:none;} }

.table-wrapper[role="region"]{ outline:none; }
.role-table .btn{ font-size:.82rem; padding:.35rem .7rem; }
.role-table .btn + .btn{ margin-left:.4rem; }
.hint{ margin-top:.35rem; font-size:.85rem; color:var(--ra-muted); }

.role-table td.min-col, .role-table th.min-col{ width:56px; }