/* ASIGNA PROXIMA — Admin SPA
   Same theme as the site (style.css). This file only adds admin layout/components.
*/

.admin-bg{
  position:fixed;
  inset:0;
  background-image:url('uploads/images/brand_art_abstract.png');
  background-size:1200px auto;
  background-repeat:no-repeat;
  background-position:110% -10%;
  opacity:.10;
  pointer-events:none;
}

.shell{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:16px;
  padding:16px;
}

.sidebar{
  position:sticky;
  top:78px;
  height:calc(100vh - 96px);
  overflow:auto;
}

.sideTitle{
  font-size:12px;
  opacity:.8;
  margin-bottom:10px;
}

.sideNav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.navItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  user-select:none;
}

.navItem:hover{background:rgba(255,255,255,.06)}
.navItem.active{background:rgba(255,255,255,.10)}

.sideFooter{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
}

.tiny{font-size:11px; opacity:.8}

.content{min-width:0}

#viewHeader{margin-bottom:14px}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.row.gap{justify-content:flex-start; flex-wrap:wrap}

.grid{display:grid; grid-template-columns:340px 1fr; gap:14px}

/*
  Safety: ensure elements hidden via the HTML `hidden` attribute are always
  truly hidden, even if a hosting injects aggressive CSS.
*/
.shell [hidden]{display:none !important}
.grid[hidden]{display:none !important}
#dashboard[hidden]{display:none !important}

/* Make dashboard feel like a full-width pro panel (Shopify/Stripe style) */
#dashboard{ width:100%; }
#dashboard.card{ max-width: none; }

.dashTools{
  margin-top:12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.dashToolsLeft,.dashToolsRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dashTool{ display:flex; align-items:center; gap:8px; }
.dashToolLabel{ font-size:12px; opacity:.85; font-weight:800; }
.dashCheck{ user-select:none; cursor:pointer; gap:8px; }
.dashCheck input{ accent-color: auto; }
.dashMeta{ display:flex; align-items:center; gap:8px; font-size:12px; }

.dashCharts{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:12px;
}
.dashChart{ min-height:180px; }
.dashChartPanel .dashPanelBody{ padding-top:10px; }

.dashCompact .dashGrid{ gap:8px; }
.dashCompact .dashCard{ padding:10px; }
.dashCompact .dashNum{ font-size:24px; }

@media (max-width: 980px){
  .dashCharts{ grid-template-columns:1fr; }
}

.list{margin-top:12px; display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow:auto; padding-right:4px}

.item{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  cursor:pointer;
}
.item:hover{background:rgba(255,255,255,.06)}
.item.active{background:rgba(255,255,255,.10)}
.itemTitle{font-weight:800}
.itemSub{font-size:12px; opacity:.85; margin-top:2px}

.pill{
  font-size:11px;
  border:1px solid rgba(255,255,255,.10);
  padding:2px 10px;
  border-radius:999px;
  opacity:.9;
}

.adminFormHost{margin-top:12px}

/* Footer row inside the editor (hint + status).
   IMPORTANT: do not use the site's `.footer` class here (it adds large spacing)
   because it causes visual overlap/"tداخل" in the admin panel.
*/
.adminFooter{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* Make footer texts wrap instead of colliding on narrow widths */
.adminFooter #hint, .adminFooter #status{max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width: 780px){
  .adminFooter{flex-wrap:wrap; align-items:flex-start}
  .adminFooter #hint, .adminFooter #status{max-width:100%; white-space:normal}
}

/* Form layout */
.formGrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.formGrid.one{grid-template-columns:1fr}
.field{display:flex; flex-direction:column; gap:6px}
.field .label{font-size:12px; opacity:.85}
.help{font-size:11px; opacity:.75}

.hrLite{height:1px; background:rgba(255,255,255,.08); margin:12px 0}

/* Rich editor */
.rte{border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; background:rgba(0,0,0,.15)}
.rteBar{display:flex; gap:6px; padding:8px; border-bottom:1px solid rgba(255,255,255,.10); flex-wrap:wrap}
.rteBar .btn{padding:8px 10px; border-radius:12px}
.rteBody{min-height:150px; padding:10px 12px; outline:none}
.rteBody:empty:before{content:attr(data-placeholder); opacity:.55}

.previewImg{width:100%; max-height:220px; object-fit:cover; border-radius:16px; border:1px solid rgba(255,255,255,.10)}

/* Login modal (important: without this CSS the login overlay is invisible,
   so the Arabic UI looks "broken" because the user cannot authenticate). */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}
.modal.show{ display:flex; }

.modalBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.modalCard{
  position: relative;
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20, 24, 38, .72);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 18px;
}

.modalCard h2{ margin: 0 0 8px 0; }

.form{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }

.error{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,90,90,.45);
  background: rgba(255,90,90,.12);
}

/* Dashboard (Résumé) */
.dashHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.dashTitle{
  font-size:22px;
  font-weight:900;
  letter-spacing:.2px;
}
.dashSub{
  margin-top:4px;
  font-size:12px;
  opacity:.9;
}
.dashActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.dashGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.dashCard{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  transition: transform .12s ease, background .12s ease;
}
.dashCard.clickable{ cursor:pointer; }
.dashCard:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.dashTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dashIcon{ font-size:20px; opacity:.95; }
.dashNum{ font-size:28px; font-weight:900; letter-spacing:.2px; }
.dashLab{ margin-top:6px; font-size:12px; opacity:.88; }

.dashPanels{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.dashPanel{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  min-height: 190px;
}
.dashPanelHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dashPanelTitle{ font-weight:900; }
.dashTable{ width:100%; border-collapse:collapse; margin-top:10px; }
.dashTable th, .dashTable td{ text-align:inherit; padding:8px 4px; font-size:12px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.dashTable th{ opacity:.85; font-weight:800; }
.dashBadge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.02); font-size:11px; }
.dashEmpty{ font-size:12px; opacity:.75; padding:10px 0; }

/* Dashboard PRO add-ons */
.dashTrend{ margin-top:8px; font-size:12px; display:inline-flex; align-items:center; gap:6px; opacity:.92; }
.dashTrend.trendUp{ color: rgba(120,255,190,.95); }
.dashTrend.trendDown{ color: rgba(255,160,160,.95); }

.dashDonutWrap{ display:flex; gap:14px; align-items:center; justify-content:space-between; }
.dashDonutWrap canvas{ flex: 1 1 auto; max-width: 70%; }
.dashDonutLegend{ flex: 0 0 auto; min-width: 180px; display:flex; flex-direction:column; gap:8px; font-size:12px; opacity:.95; }
.dashDonutLegend .dot{ width:10px; height:10px; border-radius:999px; display:inline-block; margin-inline-end:8px; vertical-align:middle; }
.dashDonutLegend .dot.d1{ background: rgba(120,255,190,.85); }
.dashDonutLegend .dot.d2{ background: rgba(140,190,255,.85); }

.dashBackup{ display:flex; flex-direction:column; gap:10px; }
.dashBackupRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
.dashBackupRow span{ opacity:.85; }
.dashBackupActions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.dashBackup code{ font-size:11px; opacity:.9; }

@media (max-width: 980px){
  .dashGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dashPanels{ grid-template-columns:1fr; }
  .dashDonutWrap{ flex-direction:column; align-items:stretch; }
  .dashDonutWrap canvas{ max-width:100%; }
}

@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative; top:auto; height:auto}
  .grid{grid-template-columns:1fr}
  .list{max-height:28vh}
  .formGrid{grid-template-columns:1fr}
}


/* API status pill */
.apiPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(11,42,111,.25);
  background:rgba(255,255,255,.70);
  color:#0B2A6F;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.apiPill::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(11,42,111,.35);
  display:inline-block;
}
.apiPill.ok{ border-color:rgba(0,128,0,.35); }
.apiPill.ok::before{ background:rgba(0,128,0,.75); }
.apiPill.warn{ border-color:rgba(180,120,0,.35); }
.apiPill.warn::before{ background:rgba(180,120,0,.85); }
.apiPill.bad{ border-color:rgba(180,0,0,.35); }
.apiPill.bad::before{ background:rgba(180,0,0,.85); }


/* ---- Settings: fix layout & prevent overlaps (Admin Security card etc.) ---- */
.settingsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
  align-items:start;
}
.settingsField{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.settingsField .input{ width:100%; }
.settingsField label{
  display:block;
  font-size:13px;
  font-weight:1000;
  color:rgba(15,23,42,.75);
  margin:2px 2px 0;
}
.settingsField .small.muted{ margin-top:2px; line-height:1.35; }
.btnRow{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }


/* --- Backups panel (action-oriented) --- */
.bkCard{
  margin-top:6px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.bkTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.bkTitle{ font-weight:900; font-size:16px; }
.bkSub{ font-size:12px; opacity:.85; margin-top:4px; }
.bkBtns{ display:flex; gap:10px; flex-wrap:wrap; }
.bkInfo{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.bkField{ min-width:0; }
.bkNote{ margin-top:10px; line-height:1.5; }
@media (max-width: 980px){
  .bkInfo{ grid-template-columns:1fr; }
}


/* Messages thread list (timeline-like list) */
.threadList{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  max-height:420px;
  overflow:auto;
}

.threadItem{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}

.threadMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  opacity:.9;
}

.threadSide{font-weight:600}
.threadWhen{opacity:.8}

.threadWho{
  margin-top:6px;
  font-size:12px;
  opacity:.9;
  word-break:break-word;
}

.threadSubj{
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  opacity:.95;
  word-break:break-word;
}

.threadBody{
  margin-top:8px;
  font-size:13px;
  line-height:1.55;
  opacity:.95;
  white-space:normal;
  word-break:break-word;
}

.miniGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.miniGrid .k{
  display:inline-block;
  min-width:92px;
  font-size:12px;
  opacity:.75;
}

.miniGrid .v{
  font-size:13px;
  opacity:.95;
  word-break:break-word;
}

@media (max-width: 860px){
  .miniGrid{ grid-template-columns:1fr; }
  .threadList{ max-height:360px; }
}


/* Extra actions */
.btn.danger{background:rgba(255,80,80,.14);border:1px solid rgba(255,80,80,.35)}
.btn.warn{background:rgba(255,190,80,.14);border:1px solid rgba(255,190,80,.35)}


/* Pro single-column settings (no two-column) */
.proSettingsCard .proFormList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.proSettingsCard .proFormItem{
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.proSettingsCard .proFormK{
  font-size:12px;
  font-weight:900;
  opacity:.85;
  margin-bottom:6px;
}
.proSettingsCard .proFormV input,
.proSettingsCard .proFormV textarea{
  width:100%;
  border-radius:12px;
}

/* --- Members advanced tabs (status/notes/messages/orders/finance) --- */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 12px;}
.tabBtn{border:1px solid rgba(20,30,60,.15); background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:800;}
.tabBtn.active{background:rgba(80,140,255,.12); border-color:rgba(80,140,255,.35);}
.tabPanels{width:100%;}
.tabPanel{display:none;}
.tabPanel.show{display:block;}

.noteTools{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.noteList{display:flex; flex-direction:column; gap:10px;}
.noteItem{border:1px solid rgba(20,30,60,.12); border-radius:14px; padding:10px; background: rgba(255,255,255,.06);}
.noteMeta{display:flex; gap:10px; justify-content:space-between; font-size:12px; opacity:.8; margin-bottom:6px;}
.noteText{font-size:14px; white-space:pre-wrap; word-break:break-word;}

.relList{display:flex; flex-direction:column; gap:10px;}
.relItem{border:1px solid rgba(20,30,60,.12); border-radius:14px; padding:10px; background: rgba(255,255,255,.06);}
.relHead{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.relTitle{font-weight:900;}
.relMeta{font-size:12px; opacity:.85;}