/*
 * infra.css — داخل AIN: يستخدم variables AIN مباشرة
 * ====================================================
 * لا نعرّف --inf-* من جديد — نربطها بـ AIN variables
 */

/* ربط variables INFRA بـ variables AIN */
.inf-root, .inf-root * {
  --inf-bg0: #0d0d0d;
  --inf-bg1: var(--bg1, #111);
  --inf-bg2: var(--bg2, #181818);
  --inf-bg3: var(--bg3, #1E1E1E);
  --inf-cy:  var(--cy,  #06B6D4);
  --inf-gn:  var(--gn,  #22C55E);
  --inf-rd:  var(--rd,  #EF4444);
  --inf-am:  var(--am,  #F59E0B);
  --inf-md:  var(--md,  #888);
  --inf-dm:  var(--dm,  #4A4A4A);
  --inf-lt:  var(--lt,  #e8e8e8);
  --inf-b2:  var(--b2,  rgba(255,255,255,.07));
}

/* ── Layout ── */
.inf-root { font-family: inherit; color: var(--inf-lt); }
.inf-page { padding: 20px 24px; max-width: 1600px; margin: 0 auto; }
.inf-phead { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.inf-phead h1 { font-size:18px; font-weight:800; color:#fff; margin:0; }
.inf-spacer { flex:1; }
.inf-msg { text-align:center; padding:40px; color:var(--inf-md); font-size:13px; }

/* ── Buttons ── */
.inf-btn { background:var(--inf-bg3); border:1px solid var(--inf-b2); color:var(--inf-lt);
  padding:6px 14px; border-radius:6px; cursor:pointer; font-size:13px; font-family:inherit;
  transition:background .15s,border-color .15s; white-space:nowrap; }
.inf-btn:hover { background:#2a2a2a; border-color:rgba(255,255,255,.15); }
.inf-btn:disabled { opacity:.5; cursor:default; }
.inf-btn-primary { background:var(--inf-cy); color:#000; border:none;
  padding:7px 16px; border-radius:6px; cursor:pointer; font-size:13px;
  font-weight:700; font-family:inherit; transition:opacity .15s; }
.inf-btn-primary:hover { opacity:.85; }
.inf-btn-sm { padding:3px 9px; font-size:12px; }

/* ── Cards ── */
.inf-card { background:var(--inf-bg2); border:1px solid var(--inf-b2); border-radius:10px; margin-bottom:14px; overflow:hidden; }
.inf-card-h { padding:12px 16px; font-weight:700; font-size:13px; color:var(--inf-lt);
  border-bottom:1px solid var(--inf-b2); display:flex; align-items:center; gap:8px; }
.inf-card-b { padding:14px 16px; }
.inf-tablecard { background:var(--inf-bg2); border:1px solid var(--inf-b2); border-radius:10px; overflow:hidden; }

/* ── Table ── */
.inf-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.inf-tbl th { padding:9px 12px; text-align:right; color:var(--inf-md); font-size:11px;
  font-weight:600; border-bottom:1px solid var(--inf-b2); white-space:nowrap; }
.inf-tbl td { padding:10px 12px; border-bottom:1px solid var(--inf-b2); color:var(--inf-lt); vertical-align:middle; }
.inf-tbl tr:last-child td { border-bottom:none; }
.inf-tbl tr.clickable:hover td { background:var(--inf-bg3); cursor:pointer; }
td.num, th.num { font-family:monospace; }

/* ── Badges ── */
.inf-bdg { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; }
.inf-bdg.healthy, .inf-bdg.info    { background:rgba(34,197,94,.15);  color:#22C55E; }
.inf-bdg.warning                   { background:rgba(245,158,11,.15); color:#F59E0B; }
.inf-bdg.critical                  { background:rgba(239,68,68,.15);  color:#EF4444; }
.inf-bdg.unknown                   { background:rgba(74,74,74,.3);    color:#888; }

/* ── Status cells ── */
.inf-status { font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; }
.inf-status.healthy  { color:#22C55E; background:rgba(34,197,94,.1); }
.inf-status.warning  { color:#F59E0B; background:rgba(245,158,11,.1); }
.inf-status.critical { color:#EF4444; background:rgba(239,68,68,.1); }
.inf-status.unknown  { color:#888;    background:rgba(74,74,74,.2); }

/* ── Health ring ── */
.inf-ring-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.inf-ring-val { position:absolute; font-size:12px; font-weight:800; font-family:monospace; }

/* ── Live badge ── */
.inf-live { display:inline-flex; align-items:center; gap:5px; font-size:11px;
  font-family:monospace; color:var(--inf-gn); }
.inf-live .dot { width:6px; height:6px; border-radius:50%; background:var(--inf-gn);
  animation:inf-pulse 2s infinite; }
.inf-live.off .dot { background:var(--inf-dm); animation:none; }
.inf-live.off { color:var(--inf-dm); }
@keyframes inf-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Filters / Search ── */
.inf-filters { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.inf-search { flex:1; min-width:200px; background:var(--inf-bg3); border:1px solid var(--inf-b2);
  color:var(--inf-lt); padding:8px 12px; border-radius:6px; font-size:13px; font-family:inherit; }
.inf-search:focus { outline:none; border-color:var(--inf-cy); }
.inf-select { background:var(--inf-bg3); border:1px solid var(--inf-b2); color:var(--inf-lt);
  padding:7px 10px; border-radius:6px; font-size:12px; font-family:inherit; cursor:pointer; }

/* ── KV Grid (detail cards) ── */
.inf-kvgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px 16px; }
.inf-kvgrid .k { font-size:10px; color:var(--inf-dm); text-transform:uppercase; letter-spacing:.4px; margin-bottom:2px; }
.inf-kvgrid .v { font-size:13px; color:var(--inf-lt); font-weight:600; }

/* ── Metric bars ── */
.inf-bar-wrap { display:flex; align-items:center; gap:8px; }
.inf-bar-bg { flex:1; height:6px; background:var(--inf-bg3); border-radius:3px; overflow:hidden; }
.inf-bar-fill { height:100%; border-radius:3px; transition:width .8s ease; }

/* ── Detail tabs ── */
.inf-tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--inf-b2); }
.inf-tab { padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;
  color:var(--inf-md); border-bottom:2px solid transparent; transition:color .15s; }
.inf-tab.active { color:var(--inf-cy); border-bottom-color:var(--inf-cy); }
.inf-tab:hover:not(.active) { color:var(--inf-lt); }

/* ── Form ── */
.inf-form { display:flex; flex-direction:column; gap:14px; max-width:600px; }
.inf-field label { display:block; font-size:11px; color:var(--inf-md); margin-bottom:5px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.inf-field input, .inf-field select, .inf-field textarea {
  width:100%; background:var(--inf-bg3); border:1px solid var(--inf-b2);
  color:var(--inf-lt); padding:9px 12px; border-radius:6px; font-size:13px;
  font-family:inherit; box-sizing:border-box; }
.inf-field input:focus, .inf-field select:focus { outline:none; border-color:var(--inf-cy); }

/* ── Grid ── */
.inf-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inf-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:900px){ .inf-grid2,.inf-grid3 { grid-template-columns:1fr; } }

/* ── Overview stats ── */
.inf-ov-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
.inf-ov-stat { background:var(--inf-bg2); border:1px solid; border-radius:12px;
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  transition:transform .15s; cursor:default; }
.inf-ov-stat:hover { transform:translateY(-2px); }
.inf-ov-stat-val { font-size:26px; font-weight:900; font-family:monospace; line-height:1; }
.inf-ov-stat-lbl { font-size:10px; color:var(--inf-dm); text-transform:uppercase; letter-spacing:.5px; font-family:monospace; margin-top:3px; }
.inf-ov-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.inf-ov-type { display:flex; align-items:center; gap:10px; padding:10px 14px;
  cursor:pointer; transition:background .12s; border-bottom:1px solid var(--inf-b2); }
.inf-ov-type:hover { background:var(--inf-bg3); }
.inf-ov-type-left { display:flex; align-items:center; gap:8px; width:140px; flex-shrink:0; }
.inf-ov-type-ico { font-size:16px; }
.inf-ov-type-name { font-size:13px; font-weight:600; color:var(--inf-lt); }
.inf-ov-type-bar { flex:1; height:8px; background:var(--inf-bg1); border-radius:4px; overflow:hidden; display:flex; gap:1px; }
.inf-ov-type-bar span { display:block; height:100%; border-radius:2px; }
.inf-ov-type-nums { display:flex; gap:8px; font-family:monospace; font-size:12px; width:80px; justify-content:flex-end; flex-shrink:0; }
.inf-ov-events { max-height:360px; overflow-y:auto; }
.inf-ov-ev { display:grid; grid-template-columns:60px 130px 1fr 40px;
  gap:8px; align-items:center; padding:10px 14px;
  border-bottom:1px solid var(--inf-b2); cursor:pointer; transition:background .12s; }
.inf-ov-ev:hover { background:var(--inf-bg3); }
.inf-ov-ev.critical { border-right:2px solid #EF4444; }
.inf-ov-ev.warning  { border-right:2px solid #F59E0B; }
.inf-ov-ev-tgt { font-weight:600; color:var(--inf-lt); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inf-ov-ev-msg { font-size:12px; color:var(--inf-md); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inf-ov-ev-at  { font-family:monospace; font-size:11px; color:var(--inf-dm); text-align:left; }

/* ── Page stats header ── */
.inf-page-stats { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.inf-ps { background:var(--inf-bg2); border:1px solid var(--inf-b2); border-radius:10px; padding:12px 18px; min-width:90px; }
.inf-ps .v { font-size:20px; font-weight:800; font-family:monospace; }
.inf-ps .l { font-size:10px; color:var(--inf-dm); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; }
.inf-ps.ps-healthy { border-color:rgba(34,197,94,.3); }
.inf-ps.ps-warning { border-color:rgba(245,158,11,.3); }
.inf-ps.ps-critical { border-color:rgba(239,68,68,.3); }

@media(max-width:1200px){ .inf-ov-stats{grid-template-columns:repeat(3,1fr);} .inf-ov-grid{grid-template-columns:1fr;} }

/* ── Detail Page ── */
.inf-hero-info { display:flex; align-items:flex-start; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.inf-hero-meta { flex:1; }
.inf-hero-meta h2 { font-size:22px; font-weight:900; color:#fff; margin:0 0 6px; }

/* Health Ring */
.inf-hring { position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ring-bg { fill:none; stroke:rgba(255,255,255,.06); }
.ring-fg { fill:none; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.ring-num { position:absolute; text-align:center; }
.ring-num .n { font-size:22px; font-weight:900; font-family:monospace; line-height:1; }
.ring-num .s { font-size:10px; color:var(--inf-dm); font-family:monospace; }

/* Quick stats */
.inf-quickstats { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.inf-quickstats .qs { background:var(--inf-bg2); border:1px solid var(--inf-b2); border-radius:8px; padding:10px 14px; min-width:80px; }
.inf-quickstats .qs .v { font-size:18px; font-weight:800; font-family:monospace; }
.inf-quickstats .qs .l { font-size:10px; color:var(--inf-dm); text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }

/* Resource bars */
.inf-res { margin-bottom:10px; }
.inf-res-top { display:flex; justify-content:space-between; margin-bottom:4px; font-size:12px; }
.inf-res-top .lbl { color:var(--inf-md); }
.inf-res-top .val { font-family:monospace; font-weight:700; color:var(--inf-lt); }
.inf-res-bar { height:6px; background:var(--inf-bg3); border-radius:3px; overflow:hidden; }
.inf-res-bar span { display:block; height:100%; background:var(--inf-cy); border-radius:3px; transition:width .8s ease; }
.inf-res-bar.warn span { background:var(--inf-am); }
.inf-res-bar.crit span { background:var(--inf-rd); }

/* Sections grid */
.inf-sections { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.inf-sections .span2 { grid-column:1/-1; }
@media(max-width:900px){ .inf-sections { grid-template-columns:1fr; } }

/* Select / chart controls */
.inf-sel { background:var(--inf-bg3); border:1px solid var(--inf-b2); color:var(--inf-lt);
  padding:5px 10px; border-radius:6px; font-size:12px; font-family:inherit; cursor:pointer; }

/* Animation */
@keyframes inf-anim-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.inf-anim { animation:inf-anim-in .3s ease both; }


@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
 
/* تعديل اتجاه الجداول للعربية */
.tbl th, .tbl td { text-align: right; }
.tbl th:last-child, .tbl td:last-child { text-align: left; }
 
/* krow direction */
.krow { direction: rtl; }