/* =========================================================
   ADMIN MANAGEMENT DASHBOARD
   لوحة الإدارة المتقدمة
   WIDE PROFESSIONAL VERSION
========================================================= */

/* =========================
   1) BASE
========================= */

.adminManagementDashboard,
.adminManagementDashboard *{
  box-sizing:border-box;
  font-family:"HanakaText",sans-serif;
  font-weight:400;
}

.adminManagementDashboard{
  width:100%;
  min-width:0;
  min-height:0;

  display:grid;

  grid-template-columns:
    var(--admin-management-columns,clamp(230px,18vw,280px) minmax(0,1fr));

  gap:20px;

  align-items:start;
}

.adminManagementDashboard strong,
.adminManagementDashboard b{
  font-weight:400;
}

.adminManagementWorkspaceActions{
  display:none !important;
}

@media (max-width:960px){
  .adminManagementDashboard{--admin-management-columns:minmax(0,1fr);--admin-sidebar-position:static;--admin-nav-direction:row;--admin-nav-flex:1 1 140px;--admin-nav-align:center;}
}

/* =========================
   2) SIDEBAR
========================= */

.adminManagementSidebar{
  position:var(--admin-sidebar-position,sticky);
  top:16px;

  width:100%;
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:16px;

  padding:18px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);

  background:var(--admin-surface);

  box-shadow:
    0 16px 40px
    rgba(35,61,77,.08);
}

.adminManagementSidebarHead{
  min-height:68px;

  display:flex;
  align-items:center;

  padding:0 14px 14px;

  border-bottom:
    1px solid var(--admin-line);

  color:var(--admin-secondary);
}

.adminManagementSidebarHead span{
  font-family:"HanakaDisplay",sans-serif;
  font-size:1.4rem;
  line-height:1;
}

/* =========================
   3) NAVIGATION
========================= */

.adminManagementNav{
  width:100%;

  display:flex;
  flex-direction:var(--admin-nav-direction,column);
  flex-wrap:wrap;
  gap:9px;
}

.adminManagementNavBtn{
  flex:var(--admin-nav-flex,0 1 auto);
  width:100%;
  min-height:54px;

  display:flex;
  align-items:center;
  justify-content:var(--admin-nav-align,flex-start);

  padding:0 17px;

  border:1px solid transparent;
  border-radius:16px;

  color:var(--admin-secondary);

  background:transparent;

  text-align:right;
}

.adminManagementNavBtn:hover{
  border-color:var(--admin-line);

  background:var(--admin-soft);
}

.adminManagementNavBtn.active{
  border-color:
    rgba(254,127,45,.32);

  color:var(--admin-primary);

  background:var(--admin-primary-soft);

  box-shadow:
    inset -4px 0 0
    var(--admin-primary);
}

.adminManagementNavBtn.back{
  margin-top:10px;

  border-color:var(--admin-line);

  background:var(--admin-soft);
}

/* =========================
   4) MAIN AREA
========================= */

.adminManagementMain{
  width:100%;
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:18px;
}

/* =========================
   5) HEADER
========================= */

.adminManagementHeader{
  width:100%;
  min-height:92px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:18px 22px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);

  background:var(--admin-surface);

  box-shadow:
    0 14px 36px
    rgba(35,61,77,.07);
}

.adminManagementHeaderTitle{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:6px;
}

.adminManagementHeaderTitle h2{
  margin:0;

  color:var(--admin-secondary);

  font-family:"HanakaDisplay",sans-serif;

  font-size:
    clamp(
      1.55rem,
      2.3vw,
      2rem
    );

  font-weight:400;
  line-height:1.1;
}

.adminManagementHeaderTitle span{
  color:var(--admin-muted);

  font-size:.98rem;
}

.adminManagementRefreshBtn{
  min-width:112px;
  min-height:48px;

  padding:0 18px;

  border:1px solid var(--admin-line);
  border-radius:15px;

  color:var(--admin-secondary);

  background:var(--admin-soft);
}

.adminManagementRefreshBtn:hover{
  border-color:
    rgba(254,127,45,.34);

  color:var(--admin-primary);

  background:var(--admin-primary-soft);
}

/* =========================
   6) STATS
========================= */

.adminManagementStats{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%,170px),1fr)
    );

  gap:14px;
}

.adminManagementStat{
  min-width:0;
  min-height:104px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  padding:17px 20px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);

  background:var(--admin-surface);

  box-shadow:
    0 8px 24px
    rgba(35,61,77,.045);
}

.adminManagementStat span{
  color:var(--admin-muted);

  font-size:.95rem;
}

.adminManagementStat strong{
  color:var(--admin-secondary);

  font-family:"HanakaDisplay",sans-serif;

  font-size:2rem;
  line-height:1;
}

/* =========================
   7) CONTENT
========================= */

.adminManagementContent{
  width:100%;
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:16px;
}

/* =========================
   8) MODELS GRID
========================= */

.adminManagedModelsGrid{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%,340px),1fr)
    );

  gap:16px;
}

/* =========================
   9) MODEL CARD
========================= */

.adminManagedModelCard{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:16px;

  padding:19px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);

  background:var(--admin-surface);

  box-shadow:
    0 12px 30px
    rgba(35,61,77,.055);
}

.adminManagedModelCard:hover{
  border-color:
    rgba(35,61,77,.24);

  box-shadow:
    0 18px 44px
    rgba(35,61,77,.09);
}

/* =========================
   10) MODEL HEADER
========================= */

.adminManagedModelHead{
  min-width:0;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.adminManagedModelIdentity{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:7px;
}

.adminManagedModelName{
  max-width:100%;

  overflow:hidden;

  color:var(--admin-secondary);

  font-family:"HanakaDisplay",sans-serif;

  font-size:1.35rem;

  white-space:nowrap;
  text-overflow:ellipsis;
}

.adminManagedModelMeta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;

  color:var(--admin-muted);

  font-size:.9rem;
}

.adminManagedModelStatus{
  min-height:29px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:3px 11px;

  border:1px solid var(--admin-line);
  border-radius:999px;
}

.adminManagedModelStatus.ready{
  border-color:
    rgba(0,127,0,.20);

  color:var(--admin-green);

  background:var(--admin-green-soft);
}

.adminManagedModelStatus.pending{
  border-color:
    rgba(254,127,45,.26);

  color:var(--admin-primary);

  background:var(--admin-primary-soft);
}

.adminManagedModelOpenBtn{
  min-width:76px;
  min-height:44px;

  padding:0 16px;

  border-radius:14px;

  color:#FFFFFF;

  background:var(--admin-secondary);
}

.adminManagedModelOpenBtn:hover{
  background:var(--admin-secondary-dark);
}

/* =========================
   11) MODEL QUICK STATS
========================= */

.adminManagedModelStats{
  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-3,3),minmax(0,1fr));

  gap:10px;
}

.adminManagedModelStats > div{
  min-width:0;
  min-height:72px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;

  padding:10px;

  border:1px solid var(--admin-line);
  border-radius:15px;

  background:var(--admin-soft);
}

.adminManagedModelStats span{
  color:var(--admin-muted);

  font-size:.84rem;
}

.adminManagedModelStats strong{
  max-width:100%;

  overflow:hidden;

  color:var(--admin-secondary);

  font-size:1.12rem;

  white-space:nowrap;
  text-overflow:ellipsis;
}

/* =========================
   12) MODEL DETAILS
========================= */

.adminManagedModelDetails{
  width:100%;

  border-top:
    1px solid var(--admin-line);
}

.adminManagedModelDetails > summary{
  min-height:50px;

  display:flex;
  align-items:center;

  list-style:none;

  color:var(--admin-secondary);

  cursor:pointer;
}

.adminManagedModelDetails > summary::-webkit-details-marker{
  display:none;
}

.adminManagedModelDetails > summary::after{
  content:"⌄";

  margin-right:auto;

  color:var(--admin-muted);

  font-size:1.1rem;

  transition:
    transform .18s
    var(--admin-ease);
}

.adminManagedModelDetails[open]
> summary::after{
  transform:rotate(180deg);
}

/* =========================
   13) MODEL ACTIONS
========================= */

.adminManagedModelActions{
  display:flex;
  align-items:center;
  gap:10px;

  padding-top:2px;
}

.adminManagedModelActions button{
  min-height:44px;
  flex:1;

  padding:0 15px;

  border:1px solid var(--admin-line);
  border-radius:14px;

  color:var(--admin-secondary);

  background:var(--admin-soft);
}

.adminManagedModelActions button:hover{
  border-color:
    rgba(35,61,77,.26);

  background:var(--admin-surface);
}

.adminManagedModelActions button.danger{
  border-color:
    rgba(127,0,0,.18);

  color:var(--admin-red);

  background:var(--admin-red-soft);
}

/* =========================
   14) PANELS
========================= */

.adminManagementPanel{
  width:100%;
  min-width:0;

  overflow:hidden;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-lg);

  background:var(--admin-surface);

  box-shadow:
    0 10px 28px
    rgba(35,61,77,.045);
}

.adminManagementPanelHead{
  min-height:78px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  padding:15px 20px;

  border-bottom:
    1px solid var(--admin-line);

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #FBFCFD
    );
}

.adminManagementPanelTitle{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:5px;
}

.adminManagementPanelTitle h3{
  margin:0;

  color:var(--admin-secondary);

  font-family:"HanakaDisplay",sans-serif;

  font-size:1.3rem;
  font-weight:400;
}

.adminManagementPanelTitle span{
  color:var(--admin-muted);

  font-size:.9rem;
}

/* =========================
   15) PANEL ACTIONS
========================= */

.adminManagementPanelActions,
.adminRuntimeCommandGroupActions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.adminManagementPanelActions button,
.adminRuntimeCommandGroupActions button{
  min-height:var(--ui-control-min,44px);

  padding:0 14px;

  border:1px solid var(--admin-line);
  border-radius:13px;

  color:var(--admin-secondary);

  background:var(--admin-soft);
}

.adminManagementPanelActions button:hover,
.adminRuntimeCommandGroupActions button:hover{
  border-color:
    rgba(35,61,77,.24);

  background:var(--admin-surface);
}

.adminManagementPanelActions button.danger,
.adminRuntimeCommandGroupActions button.danger{
  border-color:
    rgba(127,0,0,.18);

  color:var(--admin-red);

  background:var(--admin-red-soft);
}

/* =========================
   16) TABLE WRAPPERS
========================= */

.adminManagementTableWrap,
.adminManagedModelTableWrap{
  width:100%;
  min-width:0;

  overflow:auto;
}

/* =========================
   17) TABLES
========================= */

.adminManagementTable,
.adminManagedModelTable{
  width:100%;

  border-collapse:separate;
  border-spacing:0;

  color:var(--admin-text);
}

.adminManagementTable th,
.adminManagementTable td,
.adminManagedModelTable th,
.adminManagedModelTable td{
  padding:14px 16px;

  border-bottom:
    1px solid var(--admin-line);

  text-align:right;
  vertical-align:middle;

  white-space:nowrap;
}

.adminManagementTable thead th,
.adminManagedModelTable thead th{
  position:sticky;
  top:0;
  z-index:2;

  min-height:48px;

  color:var(--admin-secondary);

  font-size:.88rem;

  background:var(--admin-soft);
}

.adminManagementTable tbody td,
.adminManagedModelTable tbody td{
  font-size:.93rem;
}

.adminManagementTable tbody tr:last-child td,
.adminManagedModelTable tbody tr:last-child td{
  border-bottom:0;
}

.adminManagementTable tbody tr:hover td,
.adminManagedModelTable tbody tr:hover td{
  background:
    rgba(246,247,249,.76);
}

.adminManagedModelTable tr.isEmpty{
  opacity:.48;
}

.adminManagedModelTable tr.hasData td:last-child{
  color:var(--admin-secondary);
}

/* =========================
   18) TABLE STATES
========================= */

.adminManagementTable tr.hasWarning td{
  background:
    rgba(251,234,234,.46);
}

.adminManagementTable tr.isClean td{
  background:
    rgba(234,247,234,.28);
}

.adminManagementEmptyRow td{
  height:92px;

  color:var(--admin-muted);

  text-align:center;
}

/* =========================
   19) RUNTIME SESSION
========================= */

.adminRuntimeJoinCode{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:30px;

  padding:3px 10px;

  border-radius:9px;

  color:var(--admin-secondary);

  background:var(--admin-soft);
}

.adminRuntimeStatus{
  min-height:30px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:3px 11px;

  border-radius:999px;
}

.adminRuntimeStatus.active{
  color:var(--admin-green);

  background:var(--admin-green-soft);
}

.adminRuntimeStatus.ended{
  color:var(--admin-muted);

  background:var(--admin-soft);
}

.adminRuntimeSessionRow.isEnded{
  opacity:.66;
}

/* =========================
   20) ROW DELETE
========================= */

.adminManagementRowDelete{
  min-height:36px;

  padding:0 12px;

  border:1px solid
    rgba(127,0,0,.18);

  border-radius:11px;

  color:var(--admin-red);

  background:var(--admin-red-soft);
}

.adminManagementRowDelete:hover{
  border-color:
    rgba(127,0,0,.30);
}

/* =========================
   21) COMMAND GROUPS
========================= */

.adminRuntimeCommandGroups{
  display:flex;
  flex-direction:column;
  gap:12px;

  padding:14px;
}

.adminRuntimeCommandGroup{
  overflow:hidden;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);

  background:var(--admin-surface);
}

.adminRuntimeCommandGroupHead{
  min-height:66px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  padding:12px 16px;

  list-style:none;

  cursor:pointer;

  background:var(--admin-soft);
}

.adminRuntimeCommandGroupHead::-webkit-details-marker{
  display:none;
}

.adminRuntimeCommandGroupTitle{
  min-width:0;

  display:flex;
  align-items:center;
  gap:10px;
}

.adminRuntimeCommandGroupTitle span{
  color:var(--admin-muted);

  font-size:.85rem;
}

.adminRuntimeCommandGroupTitle strong{
  overflow:hidden;

  color:var(--admin-secondary);

  font-size:.96rem;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.adminRuntimeCommandGroupMeta{
  display:flex;
  align-items:center;
  gap:12px;

  color:var(--admin-muted);

  white-space:nowrap;
}

.adminRuntimeCommandArrow{
  transition:
    transform .18s
    var(--admin-ease);
}

.adminRuntimeCommandGroup[open]
.adminRuntimeCommandArrow{
  transform:rotate(180deg);
}

.adminRuntimeCommandGroupBody{
  display:flex;
  flex-direction:column;
  gap:12px;

  padding:14px;
}

.adminRuntimeCommandName{
  color:var(--admin-secondary);
}

.adminRuntimePayload{
  max-width:420px;

  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================
   22) MONO VALUES
========================= */

.adminManagementMono{
  direction:ltr;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace !important;

  text-align:right;
}

/* =========================
   23) DATABASE HEALTH
========================= */

.adminManagementHealth{
  width:100%;
  min-height:86px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:16px 20px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);

  background:var(--admin-surface);
}

.adminManagementHealth.isClean{
  border-color:
    rgba(0,127,0,.22);

  background:var(--admin-green-soft);
}

.adminManagementHealth.hasWarnings{
  border-color:
    rgba(254,127,45,.30);

  background:var(--admin-primary-soft);
}

.adminManagementHealthTitle{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.adminManagementHealthTitle span{
  color:var(--admin-muted);

  font-size:.84rem;
}

.adminManagementHealthTitle strong{
  color:var(--admin-secondary);

  font-size:1.02rem;
}

.adminManagementHealthMeta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px;
}

.adminManagementHealthMeta span{
  min-height:30px;

  display:inline-flex;
  align-items:center;

  padding:4px 11px;

  border-radius:999px;

  color:var(--admin-secondary);

  font-size:.84rem;

  background:
    rgba(255,255,255,.76);
}

/* =========================
   24) DATABASE WELCOME
========================= */

.adminManagementWelcome{
  width:100%;
  min-height:140px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  padding:25px 28px;

  border:
    1px solid
    rgba(254,127,45,.25);

  border-radius:var(--admin-radius-lg);

  background:
    linear-gradient(
      135deg,
      var(--admin-surface) 0%,
      #FFFFFF 52%,
      var(--admin-primary-soft) 100%
    );

  box-shadow:
    0 16px 38px
    rgba(35,61,77,.07);
}

.adminManagementWelcomeMain{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:7px;
}

.adminManagementWelcomeMain > span{
  color:var(--admin-primary);

  font-size:.92rem;
}

.adminManagementWelcomeMain h3{
  max-width:760px;

  margin:0;

  color:var(--admin-secondary);

  font-family:"HanakaDisplay",sans-serif;

  font-size:
    clamp(
      1.4rem,
      2.2vw,
      1.9rem
    );

  font-weight:400;
  line-height:1.3;
}

.adminManagementPrimaryAction{
  min-width:145px;
  min-height:52px;

  padding:0 20px;

  border-radius:15px;

  color:#FFFFFF;

  background:var(--admin-primary);

  box-shadow:
    0 10px 24px
    rgba(254,127,45,.24);
}

.adminManagementPrimaryAction:hover{
  background:var(--admin-primary-hover);
}

/* =========================
   25) QUICK CARDS
========================= */

.adminManagementQuickGrid{
  width:100%;

  display:grid;

  grid-template-columns:
    repeat(var(--admin-cols-3,3),minmax(0,1fr));

  gap:14px;
}

.adminManagementQuickCard{
  min-height:112px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:7px;

  padding:18px 20px;

  border:1px solid var(--admin-line);
  border-radius:var(--admin-radius-md);

  color:var(--admin-secondary);

  background:var(--admin-surface);

  text-align:right;

  box-shadow:
    0 8px 22px
    rgba(35,61,77,.045);
}

.adminManagementQuickCard span{
  color:var(--admin-muted);

  font-size:.86rem;
}

.adminManagementQuickCard strong{
  font-size:1.1rem;
}

.adminManagementQuickCard:hover{
  border-color:
    rgba(254,127,45,.32);

  background:var(--admin-primary-soft);
}

.adminManagementQuickCard.danger:hover{
  border-color:
    rgba(127,0,0,.22);

  color:var(--admin-red);

  background:var(--admin-red-soft);
}

/* =========================
   26) DANGER ZONE
========================= */

.adminManagementDangerZone{
  width:100%;
  min-height:90px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;

  padding:17px 20px;

  border:
    1px solid
    rgba(127,0,0,.18);

  border-radius:var(--admin-radius-md);

  background:var(--admin-red-soft);
}

.adminManagementDangerInfo{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:4px;
}

.adminManagementDangerInfo h3{
  margin:0;

  color:var(--admin-red);

  font-size:1.08rem;
  font-weight:400;
}

.adminManagementDangerInfo span{
  color:var(--admin-muted);

  font-size:.86rem;
}

.adminManagementDangerActions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.adminManagementDangerActions button{
  min-height:44px;

  padding:0 15px;

  border:1px solid
    rgba(127,0,0,.18);

  border-radius:13px;

  color:var(--admin-red);

  background:var(--admin-surface);
}

.adminManagementDangerActions button.danger{
  color:#FFFFFF;

  background:var(--admin-red);
}

/* =========================
   27) EMPTY STATE
========================= */

.adminManagementEmpty{
  width:100%;
  min-height:150px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;

  border:
    1px dashed
    var(--admin-line);

  border-radius:var(--admin-radius-md);

  color:var(--admin-muted);

  background:var(--admin-soft);

  text-align:center;
}

/* =========================
   28) FOCUS
========================= */

.adminManagementDashboard button:focus-visible,
.adminManagementDashboard summary:focus-visible{
  outline:
    3px solid
    rgba(254,127,45,.22);

  outline-offset:3px;
}

/* =========================
   29) SCROLLBAR
========================= */

.adminManagementTableWrap::-webkit-scrollbar,
.adminManagedModelTableWrap::-webkit-scrollbar{
  height:10px;
  width:10px;
}

.adminManagementTableWrap::-webkit-scrollbar-thumb,
.adminManagedModelTableWrap::-webkit-scrollbar-thumb{
  border:2px solid var(--admin-soft);
  border-radius:999px;

  background:var(--admin-line);
}

.adminManagementTableWrap::-webkit-scrollbar-track,
.adminManagedModelTableWrap::-webkit-scrollbar-track{
  background:var(--admin-soft);
}