/* ==========================================================================
   AWACO Watch — کنسول پایش درها
   --------------------------------------------------------------------------
   مسئلهٔ مرکزی این طراحی: یک رابط که هم با ۱۰ در کار کند هم با ۱۰۰۰.

   راه‌حل: رابط «فهرست درها» نیست، «صف رسیدگی» است.
   پیش‌فرض، آنچه نیاز به توجه دارد را نشان می‌دهد؛ بقیه در نمای دیوار
   فشرده می‌شوند. کاربر هرگز مجبور نیست ۱۰۰۰ کارت را اسکرول کند.

   ── منطق رنگ ────────────────────────────────────────────────────────────
     خنثیِ کم‌رنگ →  در بسته است. حالت عادی. ۹۰٪ صفحه همین است.
     کهربایی      →  در باز است. توجه می‌خواهد، اما لزوماً مشکل نیست.
     قرمز         →  مشکل: بیش از حد باز مانده، بیرون از ساعت، دستکاری.
     بنفش         →  رنگ رابط. بدون معنای وضعیتی.
     نقطهٔ آبی    →  رسیدگی‌نشده.

   عمداً «بسته» سبز نیست: با ۱۰۰۰ در، دیوارِ سبز همان‌قدر نویز است که
   دیوارِ قرمز. حالت عادی باید *بی‌صدا* باشد تا استثناها دیده شوند.
   ========================================================================== */

@font-face {
    font-family: 'YekanNewFace';
    src: url('../fonts/YekanNewFaceD4.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --bg-0: #0B0D12;
    --bg-1: #12151C;
    --bg-2: #191D26;
    --bg-3: #232833;
    --line:   #262C38;
    --line-2: #36404F;

    /* کنتراست روی کارت (#12151C): t-1=۱۶٫۱  t-2=۹٫۲  t-3=۵٫۷ */
    --t-1: #EFF2F7;
    --t-2: #AFBACB;
    --t-3: #8592A6;

    --brand:      #8B7CF6;
    --brand-2:    #6D5DE0;
    --brand-dim:  rgba(139,124,246,.14);
    --brand-line: rgba(139,124,246,.38);

    --open:      #F59E0B;
    --open-dim:  rgba(245,158,11,.13);
    --open-line: rgba(245,158,11,.42);

    --bad:       #FB7185;
    --bad-dim:   rgba(251,113,133,.14);
    --bad-line:  rgba(251,113,133,.45);

    --ok:        #34D399;
    --ok-dim:    rgba(52,211,153,.13);

    --info:      #60A5FA;
    --info-dim:  rgba(96,165,250,.14);

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --r1:5px; --r2:9px; --r3:13px; --r4:18px; --rf:999px;

    --sh1: 0 1px 2px rgba(0,0,0,.4);
    --sh2: 0 4px 14px rgba(0,0,0,.4);
    --sh3: 0 14px 38px rgba(0,0,0,.5);
    --ring: 0 0 0 3px rgba(139,124,246,.25);
    --ease: cubic-bezier(.4,0,.2,1);

    --sidebar: 232px;
    --topbar: 58px;
    --stream: 320px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }

body {
    font-family:'YekanNewFace', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg-0); color: var(--t-1);
    font-size: 13.5px; line-height: 1.7; direction: rtl;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.2px; }
h1 { font-size:19px; } h2 { font-size:15px; } h3 { font-size:14px; }

.muted{color:var(--t-2);} .dim{color:var(--t-3);}
.sm{font-size:12px;} .xs{font-size:11px;}
.mono{font-family:ui-monospace,'SF Mono',Consolas,monospace;direction:ltr;unicode-bidi:embed;}
.nowrap{white-space:nowrap;} .grow{flex:1;min-width:0;}
.row{display:flex;align-items:center;gap:var(--s3);}
.row-b{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.stack{display:flex;flex-direction:column;gap:var(--s2);}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ==========================================================================
   پوسته
   ========================================================================== */

/* ⚠ z-index اینجا بافتار انباشتگی می‌سازد. هرچه باید روی کشو یا زیرش
   بنشیند باید داخل همین عنصر باشد. پرده به همین دلیل داخل است. */
.shell { display:flex; min-height:100vh; position:relative; z-index:1; }

.side {
    width:var(--sidebar); flex:0 0 var(--sidebar);
    background:var(--bg-1); border-left:1px solid var(--line);
    display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
}
.side-brand {
    height:var(--topbar); flex:0 0 var(--topbar);
    display:flex; align-items:center; gap:10px;
    padding:0 var(--s4); border-bottom:1px solid var(--line);
}
.side-brand .mark {
    width:31px;height:31px;border-radius:9px;flex:0 0 31px;
    background:linear-gradient(140deg,var(--brand),var(--brand-2));
    display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;
}
.side-brand .name{font-weight:700;font-size:14px;line-height:1.2;}
.side-brand .sub{font-size:10.5px;color:var(--t-3);line-height:1;}
.side-brand .close{display:none;}

.side-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s3);}
.side-nav::-webkit-scrollbar{width:6px;}
.side-nav::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px;}

.nav-label{font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--t-3);padding:0 var(--s3);margin:var(--s4) 0 var(--s2);}
.nav-label:first-child{margin-top:0;}

.nav-item{
    display:flex;align-items:center;gap:9px;padding:8px var(--s3);
    border-radius:var(--r2);color:var(--t-2);font-size:13px;font-weight:500;
    position:relative;transition:background .14s var(--ease),color .14s var(--ease);
}
.nav-item .ico{width:17px;text-align:center;font-size:14px;flex:0 0 17px;}
.nav-item:hover{background:var(--bg-2);color:var(--t-1);}
.nav-item.active{background:var(--brand-dim);color:var(--brand);font-weight:700;}
.nav-item.active::before{
    content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:3px;height:17px;border-radius:3px;background:var(--brand);
}
/* شمارندهٔ کنار آیتم — قرمز اگر رسیدگی‌نشده باشد */
.nav-item .count{
    margin-right:auto;font-size:10.5px;font-weight:700;
    background:var(--bg-3);color:var(--t-2);padding:1px 7px;border-radius:var(--rf);
}
.nav-item .count.hot{background:var(--bad);color:#2A0710;}
.nav-item.active .count{background:var(--brand);color:#fff;}

.side-foot{border-top:1px solid var(--line);padding:var(--s3);}
.user-chip{display:flex;align-items:center;gap:9px;padding:var(--s2);border-radius:var(--r2);background:var(--bg-2);}
.user-chip .av{width:30px;height:30px;border-radius:8px;flex:0 0 30px;background:var(--bg-3);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:12px;}
.user-chip .nm{font-size:12px;font-weight:600;line-height:1.25;}
.user-chip .rl{font-size:10px;color:var(--t-3);line-height:1.15;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

.topbar{
    height:var(--topbar);flex:0 0 var(--topbar);
    display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);
    border-bottom:1px solid var(--line);background:rgba(18,21,28,.8);
    backdrop-filter:blur(14px);position:sticky;top:0;z-index:40;
}
.topbar h1{font-size:16px;}
.topbar .crumb{font-size:10.5px;color:var(--t-3);line-height:1;}

.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--t-2);background:var(--bg-2);border:1px solid var(--line);padding:4px 10px;border-radius:var(--rf);}
.live .pulse{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:pulse 2.4s infinite;}
.live.stale{color:var(--bad);border-color:var(--bad-line);}
.live.stale .pulse{background:var(--bad);animation:none;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.5);}70%{box-shadow:0 0 0 7px rgba(52,211,153,0);}}

.content{padding:var(--s4);width:100%;}

.burger{display:none;}
.scrim{display:none;}

/* ==========================================================================
   نوار آمار — فشرده، چون فضای عمودی برای صف لازم است
   ========================================================================== */

.stats{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:var(--s4);}
.stat{
    background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r2);
    padding:10px var(--s3);display:flex;align-items:center;gap:10px;cursor:pointer;
    transition:border-color .15s var(--ease),background .15s var(--ease);
}
.stat:hover{border-color:var(--line-2);background:var(--bg-2);}
.stat.on{border-color:var(--brand-line);background:var(--brand-dim);}
.stat .v{font-size:21px;font-weight:800;line-height:1.05;letter-spacing:-.5px;}
.stat .l{font-size:10.5px;color:var(--t-3);line-height:1.2;}
.stat.is-open .v{color:var(--open);}
.stat.is-bad  .v{color:var(--bad);}
.stat.is-info .v{color:var(--info);}

/* ==========================================================================
   ردیف در — واحد اصلی صف رسیدگی
   --------------------------------------------------------------------------
   ردیف است نه کارت: با ۱۰۰۰ در، ردیف چهار برابر بیشتر در یک صفحه جا
   می‌شود و چشم راحت‌تر ستون‌ها را دنبال می‌کند.
   ========================================================================== */

.rows{display:flex;flex-direction:column;gap:3px;}

.door{
    display:flex;align-items:center;gap:var(--s3);
    background:var(--bg-1);border:1px solid var(--line);
    border-radius:var(--r2);padding:9px var(--s3);
    position:relative;transition:border-color .14s var(--ease),background .14s var(--ease);
}
.door:hover{border-color:var(--line-2);background:var(--bg-2);}

/* نوار وضعیت سمت راست — از دور خوانده می‌شود */
.door::before{
    content:'';position:absolute;right:0;top:6px;bottom:6px;width:3px;
    border-radius:3px 0 0 3px;background:transparent;
}
.door.is-open::before{background:var(--open);}
.door.is-bad::before{background:var(--bad);}
.door.is-unknown::before{background:var(--t-3);}

.door.is-open{background:linear-gradient(90deg,var(--open-dim),transparent 45%),var(--bg-1);border-color:var(--open-line);}
.door.is-bad {background:linear-gradient(90deg,var(--bad-dim),transparent 45%),var(--bg-1);border-color:var(--bad-line);}

.door .ic{
    width:34px;height:34px;flex:0 0 34px;border-radius:var(--r2);
    display:grid;place-items:center;font-size:16px;
    background:var(--bg-2);color:var(--t-2);
}
.door.is-open .ic{background:var(--open-dim);color:var(--open);}
.door.is-bad  .ic{background:var(--bad-dim);color:var(--bad);}

.door .nm{font-size:13px;font-weight:600;line-height:1.3;}
.door .meta{font-size:10.5px;color:var(--t-3);display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.door .meta .sep{opacity:.45;}

/* ستون وضعیت با عرض ثابت تا ستون‌ها در ردیف‌های پیاپی هم‌تراز بمانند */
.door .state{flex:0 0 96px;text-align:left;font-size:11.5px;font-weight:700;color:var(--t-3);}
.door.is-open .state{color:var(--open);}
.door.is-bad  .state{color:var(--bad);}
.door .state small{display:block;font-weight:500;font-size:10px;color:var(--t-3);}

.door .tags{display:flex;gap:4px;flex:0 0 auto;}
.door .acts{display:flex;gap:5px;flex:0 0 auto;}

/* نشانگر رسیدگی‌نشده */
.door .unack{
    flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;
    border-radius:var(--rf);background:var(--info-dim);color:var(--info);
    font-size:10.5px;font-weight:700;display:grid;place-items:center;
}

/* پین‌شده */
.door.pinned{box-shadow:inset 0 0 0 1px var(--brand-line);}
.door .pin{color:var(--brand);font-size:11px;}

/* ==========================================================================
   نمای دیوار — ۱۰۰۰ در در یک صفحه
   --------------------------------------------------------------------------
   هر در یک سلول کوچک. رنگ = وضعیت. با ۱۰۰۰ سلول هم صفحه یک‌جا دیده
   می‌شود و چشم بی‌درنگ خوشه‌های کهربایی و قرمز را پیدا می‌کند.
   ========================================================================== */

.wall{
    display:grid;gap:3px;
    grid-template-columns:repeat(auto-fill,minmax(22px,1fr));
}
.wall.md{grid-template-columns:repeat(auto-fill,minmax(34px,1fr));}
.wall.lg{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));}

.cell{
    aspect-ratio:1;border-radius:4px;
    background:var(--bg-2);border:1px solid var(--line);
    position:relative;cursor:pointer;
    transition:transform .1s var(--ease),box-shadow .1s var(--ease);
}
.cell:hover{transform:scale(1.35);z-index:5;box-shadow:var(--sh2);border-color:var(--t-2);}
.cell.is-open   {background:var(--open);border-color:var(--open);}
.cell.is-bad    {background:var(--bad);border-color:var(--bad);animation:blink 1.6s infinite;}
.cell.is-unknown{background:transparent;border-style:dashed;border-color:var(--line-2);}
.cell.pinned::after{
    content:'';position:absolute;top:2px;right:2px;width:4px;height:4px;
    border-radius:50%;background:var(--brand);
}
.cell .badge{
    position:absolute;bottom:-2px;left:-2px;min-width:12px;height:12px;
    border-radius:var(--rf);background:var(--info);color:#04121F;
    font-size:8.5px;font-weight:800;display:grid;place-items:center;padding:0 3px;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.45;}}

/* راهنمای رنگ نمای دیوار */
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:11px;color:var(--t-3);margin-bottom:var(--s3);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;border:1px solid var(--line);}

/* ==========================================================================
   جریان رویداد — ستون کناری
   ========================================================================== */

.with-stream{display:grid;grid-template-columns:minmax(0,1fr) var(--stream);gap:var(--s4);align-items:start;}

.stream{position:sticky;top:calc(var(--topbar) + var(--s4));max-height:calc(100vh - var(--topbar) - var(--s5));display:flex;flex-direction:column;}
.stream .head{display:flex;align-items:center;gap:var(--s2);padding:0 0 var(--s2);}
.stream .body{overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-left:2px;}
.stream .body::-webkit-scrollbar{width:6px;}
.stream .body::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px;}

.ev{
    display:flex;gap:9px;align-items:flex-start;
    background:var(--bg-1);border:1px solid var(--line);
    border-radius:var(--r2);padding:8px 10px;font-size:12px;
}
.ev.fresh{animation:slidein .3s var(--ease);border-color:var(--brand-line);}
@keyframes slidein{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
.ev .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:6px;background:var(--t-3);}
.ev.open .dot{background:var(--open);}
.ev.close .dot{background:var(--ok);}
.ev.bad .dot{background:var(--bad);}
.ev .nm{font-weight:600;font-size:12px;line-height:1.35;}
.ev .tm{font-size:10px;color:var(--t-3);}
.ev .ack{margin-right:auto;}

/* ==========================================================================
   تگ، دکمه، فرم، جدول
   ========================================================================== */

.tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;
     padding:2px 8px;border-radius:var(--r1);background:var(--bg-3);color:var(--t-2);line-height:1.6;}
.tag-open{background:var(--open-dim);color:var(--open);}
.tag-bad {background:var(--bad-dim);color:var(--bad);}
.tag-ok  {background:var(--ok-dim);color:var(--ok);}
.tag-info{background:var(--info-dim);color:var(--info);}
.tag-brand{background:var(--brand-dim);color:var(--brand);}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-family:inherit;font-size:12.5px;font-weight:600;
    padding:7px 13px;min-height:34px;border-radius:var(--r2);
    border:1px solid var(--line-2);background:var(--bg-2);color:var(--t-1);
    cursor:pointer;white-space:nowrap;transition:.14s var(--ease);
}
.btn:hover{background:var(--bg-3);border-color:#414C5E;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-primary:hover{background:#9B8DF8;border-color:#9B8DF8;color:#fff;}
.btn-bad{background:var(--bad-dim);border-color:var(--bad-line);color:var(--bad);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--t-2);}
.btn-ghost:hover{background:var(--bg-2);color:var(--t-1);}
.btn-sm{padding:4px 10px;min-height:28px;font-size:11.5px;}
.btn-icon{width:32px;padding:0;flex:0 0 32px;}
.btn-block{width:100%;}

/* گروه دکمه برای تغییر نما */
.seg{display:inline-flex;gap:3px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r2);padding:3px;}
.seg button{
    border:none;background:transparent;color:var(--t-2);cursor:pointer;
    font-family:inherit;font-size:12px;font-weight:600;padding:5px 11px;border-radius:6px;
    transition:.14s var(--ease);
}
.seg button:hover{background:var(--bg-3);color:var(--t-1);}
.seg button.on{background:var(--brand);color:#fff;}

.card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r3);margin-bottom:var(--s4);overflow:hidden;}
.card-head{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-bottom:1px solid var(--line);}
.card-body{padding:var(--s4);}

.section{display:flex;align-items:center;gap:var(--s2);margin:var(--s5) 0 var(--s3);}
.section h2{font-size:14px;}
.section .n{font-size:11px;color:var(--t-3);}
.section .line{flex:1;height:1px;background:var(--line);}

.field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.field>label{font-size:12px;font-weight:600;color:var(--t-2);}
.field .hint{font-size:11px;color:var(--t-3);line-height:1.6;}
.field .err{font-size:11px;color:var(--bad);}
.input,.select,.textarea{
    font-family:inherit;font-size:13px;color:var(--t-1);
    background:var(--bg-2);border:1px solid var(--line-2);
    border-radius:var(--r2);padding:8px 11px;min-height:36px;width:100%;
    transition:.14s var(--ease);
}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring);background:var(--bg-1);}
.input::placeholder{color:var(--t-3);}
.form-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.form-grid .full{grid-column:1/-1;}

.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3);}
.filters .input,.filters .select{width:auto;min-width:130px;}

.search{position:relative;flex:1;min-width:180px;max-width:340px;}
.search .input{padding-right:32px;}
.search .ic{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--t-3);font-size:13px;pointer-events:none;}

.tbl-wrap{overflow-x:auto;}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
table.tbl th{text-align:right;font-weight:700;font-size:11px;color:var(--t-3);padding:10px var(--s4);border-bottom:1px solid var(--line);background:var(--bg-2);white-space:nowrap;}
table.tbl td{padding:9px var(--s4);border-bottom:1px solid var(--line);vertical-align:middle;}
table.tbl tbody tr:hover{background:var(--bg-2);}

.empty{padding:var(--s7) var(--s4);text-align:center;color:var(--t-3);}
.empty .big{font-size:32px;display:block;margin-bottom:var(--s3);opacity:.5;}
.empty .ttl{font-size:14px;font-weight:600;color:var(--t-2);display:block;margin-bottom:4px;}

.note{display:flex;gap:var(--s3);align-items:flex-start;padding:10px var(--s4);border-radius:var(--r2);border:1px solid var(--line);background:var(--bg-2);font-size:12px;line-height:1.7;margin-bottom:var(--s3);}
.note-ok{border-color:rgba(52,211,153,.35);background:var(--ok-dim);}
.note-bad{border-color:var(--bad-line);background:var(--bad-dim);}
.note-info{border-color:var(--brand-line);background:var(--brand-dim);}

.toasts{position:fixed;bottom:var(--s5);inset-inline-start:var(--s5);z-index:200;display:flex;flex-direction:column;gap:var(--s2);}
.toast{display:flex;align-items:center;gap:9px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r2);padding:10px 14px;box-shadow:var(--sh3);font-size:12.5px;min-width:230px;animation:rise .25s var(--ease);}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.toast.ok{border-inline-start:3px solid var(--ok);}
.toast.bad{border-inline-start:3px solid var(--bad);}
.toast.out{opacity:0;transform:translateY(8px);transition:.25s var(--ease);}

.modal-bg{position:fixed;inset:0;z-index:300;display:none;background:rgba(4,6,10,.74);align-items:center;justify-content:center;padding:var(--s4);}
.modal-bg.show{display:flex;}
.modal{background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r3);box-shadow:var(--sh3);width:100%;max-width:420px;padding:var(--s5);}
.modal p{color:var(--t-2);font-size:12.5px;margin:var(--s2) 0 var(--s5);}
.modal .acts{display:flex;gap:var(--s2);}

.pagination{display:flex;gap:4px;list-style:none;padding:var(--s3);margin:0;flex-wrap:wrap;justify-content:center;}
.pagination li a,.pagination li span{display:grid;place-items:center;min-width:31px;height:31px;padding:0 8px;border-radius:var(--r1);border:1px solid var(--line);font-size:12px;color:var(--t-2);background:var(--bg-2);}
.pagination li.active span{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;}
.pagination li.disabled span{opacity:.35;}

.login-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--s4);}
.login-card{width:100%;max-width:370px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r4);padding:var(--s6);box-shadow:var(--sh3);}
.login-card .mark{width:50px;height:50px;border-radius:var(--r3);margin:0 auto var(--s4);background:linear-gradient(140deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px;}

/* ==========================================================================
   موبایل — کشو با متن کامل (نه آیکن تنها)
   جهت‌ها فیزیکی‌اند: نوار کناری همیشه راست، بسته = translateX(100%)
   ========================================================================== */

@media (max-width: 1100px) {
    .with-stream{grid-template-columns:minmax(0,1fr);}
    .stream{position:static;max-height:none;}
    .stream .body{max-height:340px;}
}

@media (max-width: 900px) {
    .scrim{
        display:block;position:fixed;inset:0;z-index:90;
        background:rgba(4,6,10,.7);opacity:0;pointer-events:none;
        transition:opacity .24s var(--ease);
    }
    .side{
        position:fixed;right:0;left:auto;top:0;z-index:100;
        width:min(84vw,290px);flex:none;height:100vh;height:100dvh;
        transform:translateX(100%);border-left:1px solid var(--line);
        visibility:hidden;
        transition:transform .26s var(--ease),visibility 0s linear .26s;
    }
    body.nav-open .side{transform:translateX(0);visibility:visible;box-shadow:-18px 0 40px rgba(0,0,0,.5);transition:transform .26s var(--ease),visibility 0s;}
    body.nav-open .scrim{opacity:1;pointer-events:auto;}
    body.nav-open{overflow:hidden;}

    .nav-item{padding:11px var(--s3);font-size:14px;min-height:44px;}
    .side-brand .close{
        display:grid;place-items:center;margin-right:auto;
        width:36px;height:36px;border-radius:var(--r2);
        border:1px solid var(--line-2);background:var(--bg-2);
        color:var(--t-1);font-size:15px;cursor:pointer;font-family:inherit;line-height:1;
    }
    .burger{
        display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
        width:38px;height:38px;flex:0 0 38px;border-radius:var(--r2);
        border:1px solid var(--line-2);background:var(--bg-2);color:var(--t-1);
        cursor:pointer;padding:0;
    }
    .burger span{display:block;width:17px;height:2px;border-radius:2px;background:currentColor;margin:0;}

    .topbar{height:auto;flex-basis:auto;min-height:56px;padding:var(--s2) var(--s4);flex-wrap:wrap;}
    .topbar > div:first-of-type{min-width:0;flex:1;}
    .topbar h1,.topbar .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .topbar .bar-actions{order:3;width:100%;display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;}
    .topbar .bar-actions::-webkit-scrollbar{display:none;}
    .topbar .bar-actions > *{flex:0 0 auto;}
    .live .txt{display:none;}
}

@media (max-width: 720px) {
    .content{padding:var(--s3);}
    .stats{grid-template-columns:repeat(2,1fr);}
    .form-grid{grid-template-columns:1fr;}
    .door{flex-wrap:wrap;gap:var(--s2);}
    .door .state{flex:0 0 auto;text-align:right;}
    .door .tags{width:100%;}
    table.tbl{min-width:520px;}
    .toasts{inset-inline:var(--s3);bottom:var(--s3);}
    .toast{min-width:0;}
}

/* ==========================================================================
   نمایش تغییر زنده و راهنمای جامپر
   ========================================================================== */

/* ردیفی که همین الان تغییر کرد یک لحظه روشن می‌شود — بدون این، در
   صفحه‌ای با ۱۰۰۰ ردیف، تغییر یک ردیف اصلاً دیده نمی‌شود. */
.door.flash, .cell.flash { animation: flash 0.9s var(--ease); }
@keyframes flash {
    0%   { box-shadow: 0 0 0 2px var(--brand); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.jumpers { display: flex; gap: var(--s2); }
.jmp {
    flex: 1; text-align: center; padding: var(--s2); border-radius: var(--r1);
    border: 1px solid var(--line-2); background: var(--bg-1); font-size: 11px; color: var(--t-3);
}
.jmp b { display: block; font-size: 12.5px; font-family: ui-monospace, monospace; }
.jmp.closed { border-color: var(--brand-line); background: var(--brand-dim); color: var(--brand); }

/* بخش شرطی فرم — فیلدهایی که فقط برای یک نوع اتصال معنا دارند */
.when { display: none; }
.when.show { display: block; animation: slide .2s var(--ease); }
@keyframes slide { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.fieldset { border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s4); background: var(--bg-2); }
.fieldset > .lg { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--t-2); margin-bottom: var(--s3); }

.seg-radio { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r2); padding: 4px; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio label {
    flex: 1; text-align: center; cursor: pointer; user-select: none;
    padding: 7px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
    color: var(--t-2); transition: .14s var(--ease); line-height: 1.4;
}
.seg-radio label .sub { display: block; font-size: 10px; font-weight: 500; color: var(--t-3); }
.seg-radio label:hover { background: var(--bg-3); color: var(--t-1); }
.seg-radio input:checked + label { background: var(--brand); color: #fff; }
.seg-radio input:checked + label .sub { color: rgba(255,255,255,.75); }

.toggle-row {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3); border: 1px solid var(--line);
    border-radius: var(--r2); background: var(--bg-2); cursor: pointer;
}
.toggle-row .tx { flex: 1; min-width: 0; }
.toggle-row .tx b { display: block; font-size: 12.5px; font-weight: 600; }
.toggle-row .tx span { font-size: 11px; color: var(--t-3); line-height: 1.55; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.mini-sw { --w: 40px; width: var(--w); height: 23px; flex: 0 0 var(--w); border-radius: var(--rf); background: var(--bg-3); border: 1px solid var(--line-2); position: relative; transition: .2s var(--ease); }
.mini-sw::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--t-2); transition: .2s var(--ease); }
.toggle-row input:checked ~ .mini-sw { background: var(--brand); border-color: var(--brand); }
.toggle-row input:checked ~ .mini-sw::after { right: calc(var(--w) - 19px); background: #fff; }

.pairing-box {
    font-family: ui-monospace, monospace; direction: ltr; text-align: left;
    background: var(--bg-2); border: 1px dashed var(--brand-line);
    border-radius: var(--r2); padding: var(--s4); font-size: 13px;
    word-break: break-all; color: var(--brand); line-height: 1.9;
}

.kv { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.kv .k { font-size: 11px; color: var(--t-3); }
.kv .v { font-size: 13px; font-weight: 600; }

.form-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.pick { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 12px; border-radius: var(--r2); border: 1px solid var(--line-2); background: var(--bg-2); font-size: 12px; color: var(--t-2); user-select: none; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { background: var(--brand-dim); border-color: var(--brand-line); color: var(--brand); }