/* ════════════════════════════════════════════════════════════════
   🧩 ICM Admin — Components Library CSS v1
   ════════════════════════════════════════════════════════════════ */

/* ═══ Page Shell ══════════════════════════════════════════════ */
.page-shell{
  inline-size:100%;
  max-inline-size:100%;
  display:flex; flex-direction:column;
  gap:14px;
  padding:14px;
  overflow:hidden;
}
.page-header{
  display:flex; align-items:center; gap:10px;
  padding:6px 0 12px;
  border-block-end:1px solid var(--line);
}
.ps-back{
  inline-size:36px; block-size:36px;
  border-radius:50%; border:0;
  background:var(--surface-2);
  color:var(--txt-2); cursor:pointer;
  display:grid; place-items:center;
  transition:all .15s ease;
  flex:none;
}
.ps-back:hover{ background:var(--accent); color:#fff; }
.ps-back .ic{ inline-size:18px; block-size:18px; }
.ps-title{ flex:1; min-inline-size:0; }
.ps-title h1{
  margin:0; font-size:17px; font-weight:800; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ps-title small{
  display:block; font-size:11.5px; font-weight:600; color:var(--txt-3);
  margin-block-start:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ps-actions{ display:flex; gap:6px; flex:none; }
.ps-action{
  display:flex; align-items:center; gap:5px;
  padding:8px 10px; min-block-size:36px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  font:inherit; font-size:12px; font-weight:700;
  color:var(--txt-2);
  transition:all .12s ease;
}
.ps-action:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.ps-action.danger{ color:var(--bad); }
.ps-action.danger:hover{ background:var(--bad); color:#fff; }
.ps-action .ic{ inline-size:14px; block-size:14px; }

.page-body{ display:flex; flex-direction:column; gap:14px; }

.page-section{ display:flex; flex-direction:column; gap:8px; }
.ps-section-title{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.5px;
  padding:0 4px;
}
.ps-section-title .ic{ inline-size:13px; block-size:13px; color:var(--accent); flex:none; }
.ps-section-title > span{ flex:1; }
.ps-section-action{
  background:transparent; border:0; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:700; color:var(--accent);
}
.ps-section-body{ display:flex; flex-direction:column; gap:8px; }

/* ═══ Filter Chips ════════════════════════════════════════════ */
.filter-chips{
  display:flex; gap:6px;
  overflow-x:auto; overflow-y:hidden;
  padding-block:2px;
  scrollbar-width:none;
}
.filter-chips::-webkit-scrollbar{ display:none; }
.chip{
  display:flex; align-items:center; gap:5px;
  padding:7px 13px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:99px;
  cursor:pointer;
  font:inherit; font-size:12px; font-weight:700;
  color:var(--txt-2);
  white-space:nowrap;
  flex:none;
  transition:all .12s ease;
}
.chip:hover{ background:var(--surface); color:var(--txt); }
.chip.active{
  background:var(--accent); color:#fff;
  border-color:var(--accent);
}
.chip .ic{ inline-size:13px; block-size:13px; }
.chip-count{
  background:rgba(0,0,0,.2);
  padding:1px 7px;
  border-radius:99px;
  font-size:10px; font-weight:800;
  margin-inline-start:3px;
}
.chip.active .chip-count{ background:rgba(255,255,255,.25); }

/* ═══ Stat Strip ══════════════════════════════════════════════ */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
@media (min-width: 480px){
  .stat-strip{ grid-template-columns:repeat(4, 1fr); }
}
.stat-cell{
  display:flex; align-items:center; gap:8px;
  padding:11px 12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
}
.stat-cell .ic{
  flex:none;
  inline-size:22px; block-size:22px;
  color:var(--accent);
}
.stat-cell[data-kind="ok"] .ic{ color:var(--ok); }
.stat-cell[data-kind="warn"] .ic{ color:var(--warn); }
.stat-cell[data-kind="bad"] .ic{ color:var(--bad); }
.stat-text{ min-inline-size:0; flex:1; }
.stat-value{
  font-size:18px; font-weight:800; color:var(--txt); line-height:1.1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stat-label{
  font-size:10.5px; font-weight:700; color:var(--txt-3);
  margin-block-start:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stat-cell[data-kind="ok"] .stat-value{ color:var(--ok); }
.stat-cell[data-kind="warn"] .stat-value{ color:var(--warn); }
.stat-cell[data-kind="bad"] .stat-value{ color:var(--bad); }

/* ═══ List Card ═══════════════════════════════════════════════ */
.list-card{
  display:flex; align-items:flex-start; gap:10px;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  transition:all .12s ease;
}
.list-card.clickable{ cursor:pointer; }
.list-card.clickable:hover{
  border-color:var(--accent-line);
  background:var(--surface-2);
}
.lc-main{ display:flex; align-items:flex-start; gap:10px; flex:1; min-inline-size:0; }
.lc-icon, .lc-avatar{
  inline-size:38px; block-size:38px;
  border-radius:10px;
  display:grid; place-items:center;
  flex:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-strong));
  color:#fff;
  font-weight:800; font-size:14px;
}
.lc-icon .ic{ inline-size:18px; block-size:18px; }
.lc-body{ flex:1; min-inline-size:0; display:flex; flex-direction:column; gap:3px; }
.lc-title-row{
  display:flex; align-items:center; gap:8px;
  inline-size:100%;
}
.lc-title{
  flex:1; min-inline-size:0;
  font-size:13.5px; font-weight:800; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lc-status{
  flex:none;
  padding:2px 8px;
  border-radius:99px;
  font-size:10px; font-weight:800;
  white-space:nowrap;
}
.lc-status[data-kind="ok"]    { background:hsl(150 70% 46% / .18); color:var(--ok); }
.lc-status[data-kind="warn"]  { background:hsl(38 92% 54% / .18); color:var(--warn); }
.lc-status[data-kind="bad"]   { background:hsl(354 78% 58% / .18); color:var(--bad); }
.lc-status[data-kind="info"]  { background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .18); color:var(--accent); }
.lc-status[data-kind="default"]{ background:var(--surface-2); color:var(--txt-2); }
.lc-sub{
  font-size:11.5px; color:var(--txt-2); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lc-meta-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-block-start:3px;
}
.lc-meta{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; color:var(--txt-3);
}
.lc-meta .ic{ inline-size:11px; block-size:11px; }
.lc-actions{
  display:flex; gap:5px;
  flex:none;
  align-items:flex-start;
}
.lc-action{
  display:flex; align-items:center; gap:4px;
  padding:7px 9px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:7px;
  cursor:pointer;
  font:inherit; font-size:11px; font-weight:700;
  color:var(--txt-2);
  transition:all .12s ease;
}
.lc-action:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.lc-action.danger{ color:var(--bad); }
.lc-action.danger:hover{ background:var(--bad); color:#fff; }
.lc-action .ic{ inline-size:13px; block-size:13px; }

/* ═══ Settings Row ════════════════════════════════════════════ */
.settings-row{
  display:flex; align-items:center; gap:11px;
  padding:13px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  transition:background .12s ease;
}
.settings-row.clickable{ cursor:pointer; }
.settings-row.clickable:hover{ background:var(--surface-2); }
.sr-icon{
  flex:none;
  inline-size:34px; block-size:34px;
  border-radius:9px;
  background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .12);
  color:var(--accent);
  display:grid; place-items:center;
}
.sr-icon .ic{ inline-size:17px; block-size:17px; }
.sr-body{ flex:1; min-inline-size:0; }
.sr-label{
  font-size:13.5px; font-weight:700; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-hint{
  font-size:11.5px; color:var(--txt-3); font-weight:600;
  margin-block-start:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-value{
  flex:none;
  font-size:12px; font-weight:700; color:var(--accent);
  max-inline-size:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-chevron{
  flex:none;
  inline-size:16px; block-size:16px;
  color:var(--txt-3);
  transform:scaleX(-1);  /* RTL — chevron points left */
}

/* ═══ Toggle Row ══════════════════════════════════════════════ */
.toggle-row{
  display:flex; align-items:center; gap:11px;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  cursor:pointer;
  transition:background .12s ease;
}
.toggle-row:hover{ background:var(--surface-2); }
.toggle-row.disabled{ opacity:.55; cursor:not-allowed; }
.tr-icon{
  flex:none;
  inline-size:32px; block-size:32px;
  border-radius:8px;
  background:hsl(var(--ac-h) var(--ac-s) var(--ac-l) / .12);
  color:var(--accent);
  display:grid; place-items:center;
}
.tr-icon .ic{ inline-size:16px; block-size:16px; }
.tr-body{ flex:1; min-inline-size:0; }
.tr-label{ font-size:13px; font-weight:700; color:var(--txt); }
.tr-hint{
  font-size:11px; color:var(--txt-3); font-weight:600;
  margin-block-start:2px;
}
.tr-switch{
  flex:none;
  position:relative;
  inline-size:44px; block-size:24px;
  display:inline-block;
}
.tr-switch input{
  opacity:0; inline-size:0; block-size:0;
}
.tr-slider{
  position:absolute; inset:0;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:99px;
  transition:all .2s ease;
}
.tr-slider::before{
  content:'';
  position:absolute;
  block-size:18px; inline-size:18px;
  inset-inline-end:2px; inset-block-start:2px;
  background:var(--txt-2);
  border-radius:50%;
  transition:all .2s ease;
}
.tr-switch input:checked + .tr-slider{
  background:var(--accent);
  border-color:var(--accent);
}
.tr-switch input:checked + .tr-slider::before{
  inset-inline-end:calc(100% - 20px);
  background:#fff;
}

/* ═══ Empty State ═════════════════════════════════════════════ */
.empty-state{
  padding:48px 24px;
  display:grid; place-items:center; gap:10px;
  text-align:center;
}
.es-icon{
  inline-size:64px; block-size:64px;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--txt-3);
  display:grid; place-items:center;
  margin-block-end:6px;
}
.es-icon .ic{ inline-size:32px; block-size:32px; }
.es-title{ font-size:15px; font-weight:800; color:var(--txt); }
.es-sub{ font-size:12.5px; color:var(--txt-3); max-inline-size:280px; line-height:1.5; }
.es-cta{
  display:flex; align-items:center; gap:7px;
  padding:10px 18px;
  background:var(--accent); color:#fff;
  border:0; border-radius:9px;
  cursor:pointer;
  font:inherit; font-size:13px; font-weight:800;
  margin-block-start:8px;
  transition:opacity .12s ease;
}
.es-cta:hover{ opacity:.9; }
.es-cta .ic{ inline-size:15px; block-size:15px; }

/* ═══ Skeleton Loading ════════════════════════════════════════ */
.skeleton-list{ display:flex; flex-direction:column; gap:10px; }
.skeleton-card,
.skeleton-row,
.skeleton-settings{
  display:flex; align-items:center; gap:10px;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
}
.sk-circle{
  inline-size:38px; block-size:38px;
  border-radius:50%;
  background:var(--surface-2);
  flex:none;
  animation:sk-pulse 1.6s ease-in-out infinite;
}
.sk-square{
  inline-size:34px; block-size:34px;
  border-radius:8px;
  background:var(--surface-2);
  flex:none;
  animation:sk-pulse 1.6s ease-in-out infinite;
}
.sk-lines{ flex:1; display:flex; flex-direction:column; gap:6px; }
.sk-line{
  block-size:10px;
  background:var(--surface-2);
  border-radius:5px;
  animation:sk-pulse 1.6s ease-in-out infinite;
}
.sk-line-lg{ inline-size:60%; }
.sk-line-md{ inline-size:80%; }
.sk-line-sm{ inline-size:40%; }
@keyframes sk-pulse{
  0%, 100% { opacity:.6; }
  50%      { opacity:1; }
}

/* ═══ Search Input ════════════════════════════════════════════ */
.page-toolbar{
  display:flex; gap:8px; flex-wrap:wrap;
}
.search-input{
  flex:1; min-inline-size:200px;
  position:relative;
}
.search-input input{
  inline-size:100%;
  padding:10px 38px 10px 12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  font:inherit; font-size:13px;
  color:var(--txt);
}
.search-input input:focus{
  outline:0;
  border-color:var(--accent);
}
.search-input::before{
  content:'🔍';
  position:absolute;
  inset-inline-end:11px;
  inset-block-start:50%;
  transform:translateY(-50%);
  font-size:14px;
  pointer-events:none;
  opacity:.5;
}

/* ════════════════════════════════════════════════════════════
   📋 KV Action buttons (داخل detail sheet)
   ════════════════════════════════════════════════════════════ */
.kv-action{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:26px; block-size:26px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;
  color:var(--txt-2);
  transition:all .12s ease;
  flex:none;
}
.kv-action:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.kv-action .ic{ inline-size:13px; block-size:13px; }

/* password المرفوض - تمييز بصرى */
.kv-val.kv-mono-warn{
  color:var(--warn, #f59e0b) !important;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}





/* ════════════════════════════════════════════════════════════
   📋 Auth Logs — Real Table + Pagination
   ════════════════════════════════════════════════════════════ */

/* Header */
.al-header{ display:flex; align-items:center; gap:10px; margin-block-end:12px; }
.al-back, .al-icon-btn{
  inline-size:36px; block-size:36px;
  border-radius:9px; border:0;
  background:var(--surface); color:var(--txt-2);
  cursor:pointer; display:grid; place-items:center;
  transition:all .12s ease;
}
.al-back:hover, .al-icon-btn:hover{ background:var(--accent); color:#fff; }
.al-back .ic, .al-icon-btn .ic{ inline-size:16px; block-size:16px; }
.al-title{ flex:1; min-inline-size:0; }
.al-title h1{
  margin:0; font-size:17px; font-weight:900; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.al-title small{
  display:block; font-size:11px; color:var(--txt-3); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.al-actions{ display:flex; gap:6px; }

/* Toolbar */
.al-toolbar{ display:flex; gap:6px; margin-block-end:10px; flex-wrap:wrap; }
.al-search-input{ position:relative; flex:1; min-inline-size:140px; }
.al-search-input input{
  inline-size:100%; box-sizing:border-box;
  padding:9px 36px 9px 12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:9px; font:inherit; font-size:12.5px; color:var(--txt);
  transition:all .12s ease;
}
.al-search-input input:focus{ outline:0; border-color:var(--accent); background:var(--surface-2); }
.al-search-icon{
  position:absolute; inset-inline-end:11px; inset-block-start:50%;
  transform:translateY(-50%); color:var(--txt-3);
  pointer-events:none;
}
.al-search-icon .ic{ inline-size:14px; block-size:14px; }
.al-search-btn{
  flex:none; padding:0 16px; block-size:36px;
  background:var(--accent); color:#fff; border:0;
  border-radius:9px; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:800;
  transition:background .12s ease;
}
.al-search-btn:hover{ background:var(--accent-strong); }
.al-per-page{
  flex:none; block-size:36px;
  padding:0 10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:9px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:var(--txt);
}

/* Filter chips full-width */
.al-filterbar{ display:flex; gap:6px; margin-block-end:12px; }
.al-pill{
  flex:1;
  padding:7px 12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:700; color:var(--txt-2);
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:all .12s ease;
}
.al-pill:hover{ color:var(--txt); border-color:var(--accent-line); }
.al-pill.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-strong));
  color:#fff; border-color:transparent;
}
.al-pill .ic{ inline-size:11px; block-size:11px; }

/* ═══ Table ═══ */
.al-table-wrap{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
}

/* Header (desktop only) */
.al-thead{ display:none; }

/* Row container */
.al-trow{
  position:relative;
  display:grid;
  grid-template-columns: 28px 1fr auto auto;
  grid-template-areas:
    "num user status date"
    ".   reason reason reason"
    ".   meta meta meta";
  gap:6px 8px;
  padding:11px 12px 11px 16px;
  border-block-end:1px solid var(--line);
  cursor:pointer;
  transition:background .12s ease;
}
.al-trow:last-child{ border-block-end:0; }
.al-trow:hover{ background:var(--surface-2); }
.al-trow::before{
  content:'';
  position:absolute;
  inset-inline-start:0; inset-block:0;
  inline-size:3px;
}
.al-trow[data-status="accept"]::before{ background:var(--ok); }
.al-trow[data-status="reject"]::before{ background:var(--bad); }

/* Cells */
.al-c-num{
  grid-area:num;
  inline-size:24px; block-size:24px;
  background:var(--surface-2); border-radius:6px;
  display:grid; place-items:center;
  font-size:10.5px; font-weight:800; color:var(--txt-3);
  align-self:start;
}
.al-c-user{
  grid-area:user;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12.5px; font-weight:800; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  align-self:center;
}
.al-c-status{ grid-area:status; align-self:center; }
.al-c-date{
  grid-area:date;
  font-size:10.5px; font-weight:700; color:var(--txt-3);
  white-space:nowrap;
  align-self:center;
}
.al-c-reason{
  grid-area:reason;
  font-size:11.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.al-trow[data-status="accept"] .al-c-reason{ color:var(--ok); }
.al-trow[data-status="reject"] .al-c-reason{ color:var(--bad); }
.al-c-meta{
  grid-area:meta;
  display:flex; flex-wrap:wrap; gap:8px;
  font-size:10.5px; color:var(--txt-3); font-weight:700;
}
.al-c-meta .meta-tag{
  display:inline-flex; align-items:center; gap:3px;
}
.al-c-meta .meta-tag code{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  background:var(--surface-2);
  padding:1px 6px; border-radius:4px;
  color:var(--txt-2);
  font-size:10px;
  cursor:pointer;
}
.al-c-meta .meta-tag code:hover{ color:var(--accent); }
.al-c-meta .ic{ inline-size:10px; block-size:10px; }

/* Status badge */
.al-badge{
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px;
  border-radius:99px;
  font-size:10.5px; font-weight:800;
  white-space:nowrap;
}
.al-badge[data-kind="accept"]{ background:hsl(150 70% 46% / .18); color:var(--ok); }
.al-badge[data-kind="reject"]{ background:hsl(354 78% 58% / .18); color:var(--bad); }
.al-badge .ic{ inline-size:10px; block-size:10px; stroke-width:2.5; }

/* Desktop-only cells */
.al-c-nasip-d, .al-c-nasid-d, .al-c-clientip-d{ display:none; }

/* ═══ Desktop (≥900px): flat table ═══ */
@media (min-width: 900px){
  .al-thead{
    display:grid;
    grid-template-columns: 50px minmax(160px, 1.2fr) 100px minmax(180px, 2fr) 110px 110px 130px 110px;
    gap:10px;
    padding:12px 16px;
    background:var(--surface-2);
    border-block-end:1px solid var(--line);
    font-size:10.5px; font-weight:800; color:var(--txt-3);
    text-transform:uppercase; letter-spacing:.5px;
  }
  .al-thead > div{ display:flex; align-items:center; gap:4px; }
  .al-thead .ic{ inline-size:11px; block-size:11px; }

  .al-trow{
    grid-template-columns: 50px minmax(160px, 1.2fr) 100px minmax(180px, 2fr) 110px 110px 130px 110px;
    grid-template-areas:none;
    gap:10px;
    padding:11px 16px 11px 18px;
    align-items:center;
  }
  .al-c-num{
    grid-area:auto;
    background:none;
    inline-size:auto; block-size:auto;
    text-align:center;
    color:var(--txt-3); font-size:11px;
  }
  .al-c-user{ grid-area:auto; font-size:12px; }
  .al-c-status{ grid-area:auto; }
  .al-c-reason{ grid-area:auto; font-size:11.5px; }
  .al-c-meta{ display:none; }

  .al-c-nasip-d, .al-c-nasid-d, .al-c-clientip-d{
    display:flex; align-items:center; gap:4px;
    font-size:11px; color:var(--txt-2);
  }
  .al-c-nasip-d code, .al-c-clientip-d code{
    font-family:'JetBrains Mono', ui-monospace, monospace;
    background:var(--surface-2);
    padding:2px 8px; border-radius:5px;
    color:var(--txt-2);
    font-size:11px;
    cursor:pointer;
  }
  .al-c-nasip-d code:hover, .al-c-clientip-d code:hover{ color:var(--accent); }
  .al-c-date{ grid-area:auto; font-size:10.5px; text-align:start; }
}

/* ═══ Pagination ═══ */
.al-pagination{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 4px 4px;
  flex-wrap:wrap; gap:10px;
}
.al-pag-info{ font-size:11.5px; color:var(--txt-3); font-weight:700; }
.al-pag-info b{ color:var(--txt); font-weight:800; }
.al-pag-nav{ display:flex; gap:4px; align-items:center; }
.al-pag-btn{
  min-inline-size:32px; block-size:32px;
  padding:0 9px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:7px; cursor:pointer;
  font:inherit; font-size:12px; font-weight:800; color:var(--txt-2);
  display:grid; place-items:center;
  transition:all .12s ease;
}
.al-pag-btn:hover:not(:disabled){
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.al-pag-btn:disabled{ opacity:.4; cursor:not-allowed; }
.al-pag-btn.active{
  background:linear-gradient(135deg, var(--accent), var(--accent-strong));
  color:#fff; border-color:transparent;
}
.al-pag-btn .ic{ inline-size:13px; block-size:13px; }
.al-pag-ellipsis{ color:var(--txt-3); padding:0 4px; font-weight:800; }

/* Empty state */
.al-empty{ padding:50px 24px; text-align:center; }
.al-empty-title{ font-size:14px; font-weight:800; color:var(--txt-2); margin-block-end:6px; }
.al-empty-sub{ font-size:12px; color:var(--txt-3); }