@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;800&display=swap");
:root { --bg:#050b17; --card:#0a1526; --line:#1d3a5c; --blue:#38bdf8; --orange:#f59e0b; --red:#ef4444; --text:#e2e8f0; --muted:#7dd3fc; }
* { box-sizing: border-box; }
html { height:100%; }
body.hub-page { height:100%; overflow:hidden; }
body { margin:0; font-family: Vazirmatn, Tahoma, sans-serif; background: radial-gradient(circle at 50% 50%, #0c2140 0%, var(--bg) 70%); color: var(--text); min-height:100vh; }
header { display:flex; align-items:center; justify-content:space-between; padding:10px 28px; border-bottom:1px solid var(--line); }
.hgroup { display:flex; align-items:center; gap:14px; }
.sys { color:var(--blue); font-weight:700; font-size:15px; }
.dev { border:1px solid var(--orange); color:var(--orange); padding:7px 14px; border-radius:8px; font-size:14px; }
.user { border:1px solid var(--orange); color:var(--orange); padding:7px 14px; border-radius:8px; font-size:14px; }
.clockbox { border:1px solid #1e4d7a; border-radius:10px; padding:4px 22px; text-align:center; background:#071426; box-shadow:0 0 14px rgba(56,189,248,.2); }
.clockbox .clock { display:block; border:none; padding:0; font-size:26px; font-weight:700; }
.jdate { display:block; font-size:13px; color:var(--muted); }
.brand-img { height:44px; }
.badge { border:1px solid var(--orange); color:var(--orange); padding:7px 16px; border-radius:8px; text-decoration:none; font-size:14px; }
.clock { font-family: monospace; font-size:20px; color:var(--blue); }
.db { color:#4ade80; border:1px solid #166534; padding:6px 12px; border-radius:8px; font-size:13px; }
.stats { display:flex; gap:12px; justify-content:center; margin:8px auto 0; flex-wrap:wrap; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 18px; font-size:14px; }
.stat b { color:var(--orange); font-size:18px; }

/* بوم اصلی: مختصات بر حسب پیکسل */
.fitbox { margin:0 auto; position:relative; }
.hub { position:absolute; top:0; left:0; width:1100px; height:700px; transform-origin: top left; }
.hub > svg.lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.lines line { stroke:#38bdf8; stroke-width:1.5; stroke-opacity:.35; }
.lines line.pulse { stroke:#7dd3fc; stroke-width:2.5; stroke-opacity:1; stroke-dasharray:14 150; animation: flow 1.6s linear infinite; filter:drop-shadow(0 0 4px #38bdf8); }
.lines line.pulse.rev { animation-direction: reverse; }
@keyframes flow { from { stroke-dashoffset: 164; } to { stroke-dashoffset: 0; } }

.center { position:absolute; left:430px; top:200px; width:240px; height:240px; z-index:2; }
.center img { width:240px; height:240px; border-radius:50%; object-fit:cover; filter:drop-shadow(0 0 18px rgba(56,189,248,.35)); }

.card { position:absolute; width:210px; min-height:140px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; text-align:center; text-decoration:none; color:var(--text); transition:.2s; z-index:1; }
.card:hover { border-color:var(--blue); transform:translateY(-3px); }
.card.hot { border-color:var(--orange); box-shadow:0 0 18px rgba(245,158,11,.3); }
.card .ico { font-size:30px; margin-bottom:6px; }
.card h4 { margin:4px 0; font-size:15px; line-height:1.6; }
.card p { margin:0; font-size:12px; color:#94a3b8; line-height:1.7; }
.bubble { position:absolute; top:-9px; left:-9px; min-width:26px; height:26px; padding:0 6px; border-radius:13px; background:var(--red); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; }
.ico-btn { display:block; width:calc(100% + 32px); margin:-16px -16px 6px; padding:16px 0 10px; background:none; border:0; cursor:pointer; font-size:30px; line-height:1.2; color:inherit; }
.ico-btn:focus-visible { outline:2px solid var(--blue); border-radius:8px; }
.card:has(.dd.open) { z-index:50; }
.dd { display:none; position:absolute; top:62px; right:10px; left:10px; margin-top:0; background:var(--card); border:1px solid var(--blue); border-radius:12px; padding:6px; z-index:20; box-shadow:0 12px 28px rgba(0,0,0,.45); }
.dd.open { display:block; }
.dd a { display:block; padding:8px 10px; border-radius:8px; color:var(--text); text-decoration:none; font-size:13px; text-align:right; }
.dd a:hover { background:rgba(59,130,246,.18); }
.bubble.orange { background:var(--orange); }

/* موقعیت کارت‌ها (گوشه بالا-چپ) */
.c-inv  { left:0;     top:30px; }
.c-ram  { left:445px; top:0; }
.c-reg  { left:890px; top:30px; }
.c-pm   { left:0;     top:280px; }
.c-amdb { left:890px; top:280px; }
.c-wo   { left:0;     top:530px; }
.c-calc { left:445px; top:560px; }
.c-ewr  { left:890px; top:530px; }

}

/* صفحات دسته‌بندی تجهیزات */
body.cat-page { height:auto; min-height:100vh; overflow:visible; }
.page { padding:18px 28px 40px; display:flex; flex-direction:column; gap:18px; max-width:1200px; margin:0 auto; }
.tbl-wrap { overflow-x:auto; }
.btn-edit { color:#111 !important; background:var(--blue); padding:4px 12px; border-radius:6px; font-weight:700; }
.panel input, .panel select, .panel textarea { box-sizing:border-box; }
.panel select, .panel input[type=number], #dyn input, #dyn select, #dyn textarea { width:100%; background:#071426; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-family:inherit; font-size:14px; }
#catform > input[name=code] { width:100%; box-sizing:border-box; background:#071426; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-family:inherit; }
#dyn fieldset.fs { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:0 16px; }
#dyn .fs > legend { grid-column:1/-1; }
#dyn .fld { margin:6px 0; }
#dyn .rep, #dyn .fs > .rep { grid-column:1/-1; }
#dyn .rep { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:0 16px; }
#dyn .rep > .rep-h { grid-column:1/-1; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; }
.panel h3 { margin:0 0 12px; color:var(--blue); font-size:17px; }
.panel form label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
.panel input[type=text], .panel input[type=date] { width:100%; background:#071426; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:14px; }
.panel input:focus { outline:none; border-color:var(--blue); }
.panel .chk { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:14px; }
.btn { background:var(--orange); color:#111; border:0; border-radius:8px; padding:9px 18px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:14px; text-decoration:none; display:inline-block; }
.btn.ghost { background:none; color:var(--blue); border:1px solid var(--blue); }
.notice { border:1px solid #166534; color:#4ade80; border-radius:8px; padding:8px 12px; margin-bottom:12px; font-size:14px; }
.errs { color:var(--red); font-size:13px; }
table.list { width:100%; border-collapse:collapse; font-size:14px; }
table.list th { color:var(--blue); text-align:right; border-bottom:1px solid var(--line); padding:8px; font-weight:700; }
table.list td { border-bottom:1px solid #112640; padding:8px; }
table.list a { color:var(--orange); text-decoration:none; }
.tag { font-family:monospace; color:var(--blue); }
.off { color:var(--red); }
.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }

/* ---- فرم پویای تجهیزات ---- */
#dyn .fs{border:1px solid var(--line,#2b3b55);border-radius:10px;padding:10px 12px;margin:10px 0}
#dyn legend{color:var(--accent,#4fd1c5);padding:0 6px;font-weight:600}
#dyn .fld{margin:6px 0}
#dyn .fld label{display:block;font-size:13px;color:var(--muted,#8fa0b8);margin-bottom:3px}
#dyn .rep{border-right:3px solid var(--accent,#4fd1c5);padding:6px 10px;margin:8px 0;background:rgba(255,255,255,.02);border-radius:8px}
#dyn .rep-h{font-weight:600;margin:6px 0 2px;color:var(--accent,#4fd1c5)}
#dyn .calc{opacity:.75}

/* بانک تجهیزات، ریز اطلاعات، تاریخچه */
.only-print { display:none; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.btn.active { background:var(--blue); color:#111; }
.search { display:flex; gap:8px; margin-bottom:12px; }
.search input { flex:1; background:#071426; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-family:inherit; }
.muted { color:var(--muted); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.two-col { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.kv { border:1px solid var(--line); border-radius:8px; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
.kv span { font-size:12px; color:var(--muted); }
.hist { border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:12px; }
.hist-h { margin-bottom:8px; font-size:14px; }
.letterhead { display:flex; align-items:center; gap:14px; border-bottom:3px solid #0b5ea8; padding-bottom:8px; margin-bottom:14px; color:#000; }
.letterhead img { height:52px; }
.lh-title { flex:1; display:flex; flex-direction:column; }
.lh-title span { font-size:12px; color:#555; }
.lh-date { font-size:12px; text-align:left; }
.label-bar { display:flex; gap:8px; padding:14px 28px; }
.label-card { width:8cm; margin:20px auto; border:2px solid #000; border-radius:10px; padding:12px; text-align:center; background:#fff; color:#000; }
.lb-org { font-size:12px; color:#555; }
.lb-code { font-size:26px; font-weight:800; letter-spacing:1px; direction:ltr; }
.lb-name { font-size:15px; font-weight:700; margin:4px 0; }
.lb-qr { width:5.2cm; height:5.2cm; }
.lb-loc { font-size:12px; }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body, body.hub-page, body.cat-page { background:#fff !important; color:#000 !important; overflow:visible !important; height:auto !important; }
  header, .noprint, .toolbar, .tabs, .search, nav { display:none !important; }
  .only-print { display:block !important; }
  .letterhead { display:flex !important; }
  .page { padding:0; max-width:none; }
  .panel { background:#fff !important; border:0 !important; padding:0 !important; box-shadow:none !important; }
  .panel h3 { color:#000 !important; }
  table, th, td, span, b, div, p { color:#000 !important; }
  .list th, .list td { border:1px solid #888 !important; background:#fff !important; }
  .hist, .kv { border:1px solid #888 !important; break-inside:avoid; }
  .label-card { margin:0; }
  .label-bar { display:none !important; }
}

/* ---- PM module ---- */
.ok{color:#22c55e;font-weight:600}
.no{color:#f59e0b;font-weight:600}
.sel td{background:rgba(59,130,246,.15)}
.define-box{border:1px solid var(--line,#334155);border-radius:12px;padding:14px;margin-top:14px;display:grid;gap:10px}
.define-box fieldset{border:1px solid var(--line,#334155);border-radius:10px;padding:8px 12px}
.define-box label{display:grid;gap:4px}
.define-box label.chk{display:inline-flex;align-items:center;gap:6px;margin:4px 10px 4px 0}
.search select, .search label{margin-inline-end:6px}
@media print{ .tabs, .define-box{display:none!important} }

/* ---- اعلام خرابی و هشدارها ---- */
.alert-err{background:#7f1d1d;color:#fecaca;padding:8px 12px;border-radius:8px}
.alert-ok{background:#14532d;color:#bbf7d0;padding:8px 12px;border-radius:8px}
.alert-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:999;background:#b91c1c;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;box-shadow:0 0 24px rgba(239,68,68,.6);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.6}}
.bell-wrap{position:relative;display:inline-block}
.bell{font-size:22px;text-decoration:none;position:relative;cursor:pointer}
.bell-n{position:absolute;top:-6px;right:-8px;background:#ef4444;color:#fff;border-radius:99px;font-size:11px;padding:0 6px}
.bell-list{position:fixed;top:84px;right:14px;left:auto;min-width:240px;max-width:320px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;z-index:200;display:flex;flex-direction:column;gap:6px;text-align:right;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.bell-list[hidden]{display:none}
.bell-list a{color:var(--text);font-size:13px}
.logout button{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:inherit}
.hist-item{border:1px solid var(--line);border-radius:10px;padding:10px;margin:10px 0;break-inside:avoid}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label,form label{display:flex;flex-direction:column;gap:4px;margin:6px 0}
@media (max-width:700px){.grid2{grid-template-columns:1fr}.tbl-wrap{overflow-x:auto}}

/* ---- فشرده‌سازی صفحات خرابی + عکس + جدول سوابق ---- */
.panel.compact{padding:12px}
.panel.compact h2{margin:6px 0 10px;font-size:1.05rem}
.panel.compact label{font-size:.9rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;align-items:start}
.photos{display:flex;flex-direction:column;gap:8px}
.photos figure{margin:0;border:1px solid var(--line);border-radius:10px;padding:6px;text-align:center}
.photos img{max-width:100%;max-height:260px;border-radius:6px}
.photos figcaption{font-size:.85rem;color:#666;margin-top:4px}
.muted{color:#666;font-size:.9rem}
.hist-tbl{font-size:.85rem}
.hist-tbl th,.hist-tbl td{padding:4px 6px;white-space:nowrap}
@media (max-width:800px){.grid3,.two-col{grid-template-columns:1fr}}
@media print{.two-col{grid-template-columns:1fr 1fr}.photos img{max-height:180px}}
@media (max-width:700px){
  header{flex-wrap:wrap;gap:6px;height:auto}
  header .sys,header .dev,header .db,header .jdate{display:none}
  table{display:block;overflow-x:auto}
  .btn,button,input,select,textarea{min-height:42px;font-size:16px}
}