/* HK Dashboard — design tokens, reset, top bar, shell layout, client rail, dashboard head, tabs */
  :root{
    --navy:#0C4068; --navy-soft:#1a6194; --coral:#E48375; --coral-deep:#d96a5a; --coral-ink:#bd4a35;
    /* המשטחים הכהים. --navy נשאר לטקסט (187 מופעים) ולא הובהר; המשטחים
       עברו ל-navy-soft, צבע שכבר היה מוגדר כאן ולא היה בשימוש.
       השם --band ולא --surface: הקבצים כבר הכילו הצהרות מתות על
       var(--surface2), והגדרת השם הזה החייתה אותן וצבעה טאבים בכחול. */
    --band:#104A76; --band2:#104A76;
    --blue:#39ABE2; --blue-bg:#EBF7FD; --green:#16a34a; --green-bg:#e8f6ee;
    --wa:#25D366; --wa-bg:#e7f8ef; --bg:#f4f7fa; --card:#ffffff; --line:#e6ecf2;
    --ink:#243748; --muted:#7d8ea0; --amber:#e8a13a; --amber-bg:#fdf4e3;
    --red:#dc2626; --red-bg:#fdecec;
    --shadow:0 2px 14px rgba(12,64,104,.06); --shadow-lg:0 12px 40px rgba(12,64,104,.18);
    --rail:252px; --rail-collapsed:66px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:'Rubik',sans-serif;background:var(--bg);color:var(--ink);
    -webkit-font-smoothing:antialiased;line-height:1.5}

  /* ===== top bar ===== */
  .topbar{display:flex;align-items:center;gap:14px;
    background:#fff;border-bottom:1px solid var(--line);padding:11px 20px;
    box-shadow:var(--shadow);position:sticky;top:0;z-index:40}
  .logo{font-weight:700;color:var(--navy);font-size:20px;display:flex;align-items:center;gap:9px;flex:0 0 auto}
  .logo img{display:block;height:30px;width:auto}

  /* client switcher — the anchor of the whole screen */
  .switcher-wrap{position:relative;flex:1;max-width:360px}
  .switcher{width:100%;display:flex;align-items:center;gap:10px;
    background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 13px;cursor:pointer;transition:.15s}
  .sw-dd{position:absolute;top:calc(100% + 6px);inset-inline-start:0;inset-inline-end:0;background:#fff;
    border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;
    display:none;max-height:360px;overflow-y:auto}
  .sw-dd.show{display:block}
  .sw-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer}
  .sw-item:hover{background:var(--bg)}
  .sw-item.pinned{border-bottom:1px solid var(--line);border-radius:0;margin-bottom:4px;padding-bottom:11px}
  .sw-item .sdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
  .sw-item .nm{font-size:13.5px;font-weight:500;color:var(--navy)}
  .sw-item .sb{font-size:11px;color:var(--muted)}
  .switcher:hover{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
  .switcher svg{opacity:.5;flex:0 0 auto}
  .switcher .cur{font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .switcher .hp{font-size:12px;color:var(--muted);flex:0 0 auto}
  .switcher .chev{margin-inline-start:auto;color:var(--muted);flex:0 0 auto}

  .top-mid{display:flex;gap:8px;flex:0 0 auto;margin-inline-start:22px}
  .logo{cursor:default;user-select:none}

  /* מציין מקום ללוגו הלקוח — הטמעה לבנה: הלקוח רואה את המותג שלו */
  .logo-ph{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px;
    border:1.5px dashed #C3D2DE;border-radius:10px;color:#7F94A6;
    font-size:13px;font-weight:500;white-space:nowrap}
  .logo-ph svg{opacity:.75;flex:none}
  .prod-grp{font-size:10.5px;font-weight:600;color:#9AA6B2;letter-spacing:.2px;
    padding:10px 12px 4px;pointer-events:none}
  .prod-menu .prod-grp:first-child{padding-top:4px}
  /* ---- ההקשר בפס העליון (שם החברה), כמו בג'מפה ---- */
  .top-ctx{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto;
    padding-inline-start:18px;border-inline-start:1px solid var(--line)}
  .top-ctx:empty{display:none}
  /* קישור, לא כפתור — הסגנון הגלובלי של button ב-HK נתן לו מסגרת ורקע
     אפור, וזה נראה כמו תג תקוע. אותו מראה של הקישור בג'מפה. */
  .top-ctx .out{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:13px;
    font-weight:500;color:var(--blue);padding:5px 10px;border-radius:999px;cursor:pointer;
    border:0;background:none;box-shadow:none;font-family:inherit;line-height:1.2;transition:.12s}
  .top-ctx .out:hover{background:var(--blue-bg)}
  .top-ctx b{font-size:21px;font-weight:600;color:var(--navy);letter-spacing:-.3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ddl-wrap{position:relative}
  .prod-menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:268px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:9px;z-index:45;display:none}
  .prod-menu.show{display:block}
  .prod-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:11px;cursor:pointer;font-size:13.5px;color:var(--navy);font-weight:500}
  .prod-opt:hover{background:var(--bg)}
  .prod-opt input{accent-color:var(--blue);width:16px;height:16px;cursor:pointer}
  /* HK product logo — cyan HK mark + Rubik navy wordmark */
  .hklogo{display:inline-flex;align-items:center;gap:.42em;line-height:1;white-space:nowrap;font-family:'Rubik',system-ui,sans-serif;vertical-align:middle}
  .hklogo .hkm{height:1.18em;width:auto;display:block;flex:none}
  .hklogo .hkw{font-weight:500;color:var(--navy);letter-spacing:-.015em;font-size:1.04em}
  .hklogo.sm{font-size:12.5px}
  .hklogo.lg{font-size:17px}
  .ddl{font-size:12.5px;color:var(--navy);background:#fff;border:1px solid var(--line);
    border-radius:10px;padding:8px 13px;display:flex;align-items:center;gap:14px;cursor:pointer;white-space:nowrap}
  .ddl span{color:var(--muted)}
  .top-right{margin-inline-start:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}
  .who{font-size:12.5px;color:var(--muted);text-align:left;line-height:1.35}
  /* בלוק המשתמש — אותו מבנה של ג'מפה: שם, תפקיד ואווטאר */
  .topbar .me{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border-radius:999px;
    border:0;background:none;font-family:inherit;cursor:pointer;transition:background .12s}
  .topbar .me:hover{background:var(--bg)}
  .topbar .me>div{min-width:0;line-height:1.3;text-align:end}
  .topbar .me b{display:block;font-size:13.5px;font-weight:500;color:var(--navy)}
  .topbar .me span{display:block;font-size:12px;color:var(--muted)}
  /* display מפורש — <i> הוא inline ומתעלם מ-width/height, ואז התמונה
     נפרסה בגודלה הטבעי (135px) וגלשה מהפס. */
  .topbar .me .avatar{flex:none;display:block;width:36px;height:36px;min-width:36px;
    font-size:13.5px;line-height:36px;text-align:center;overflow:hidden;border-radius:50%}
  .topbar .me .avatar img{width:36px;height:36px;object-fit:cover;display:block;border-radius:50%}
  .topbar .me .chev{flex:none;color:#A9B7C4;transition:transform .15s}
  .topbar .me[aria-expanded="true"] .chev{transform:rotate(180deg)}
  /* תפריט המשתמש — נפתח כלפי מטה מהפס */
  .me-wrap{position:relative;flex:0 0 auto}
  .me-menu{position:absolute;inset-inline-start:0;top:calc(100% + 7px);min-width:190px;background:#fff;
    border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px -10px rgba(12,64,104,.28);
    padding:6px;display:none;z-index:60}
  .me-menu.on{display:block}
  .me-menu button{width:100%;text-align:start;padding:10px 12px;border-radius:8px;font-size:13.5px;
    font-family:inherit;border:0;background:none;color:var(--ink);cursor:pointer;transition:background .12s}
  .me-menu button:hover{background:var(--bg);color:var(--navy)}
  .me-menu .sep{height:1px;background:var(--line);margin:5px 4px}
  .me-menu .out{color:var(--muted)}
  .who b{color:var(--navy);font-weight:600}
  .avatar{width:34px;height:34px;border-radius:50%;background:var(--blue-bg);color:var(--navy);
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}

  /* ===== shell: rail + main ===== */
  .shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:calc(100vh - 58px);transition:grid-template-columns .22s}
  .shell.collapsed{grid-template-columns:var(--rail-collapsed) 1fr}
  .shell.no-rail{grid-template-columns:1fr}
  .shell.no-rail .rail{display:none}
  .shell.no-rail .main{width:100%}   /* לקוחות — התוכן נמתח לכל רוחב המסך */

  /* ===== ניווט גלובלי — הסרגל קבוע וזהה בכל מסך ===== */
  .rail.gnav{padding:14px 10px;justify-content:space-between}
  /* בלי gap — הפריטים נערמים ישירות, כמו בג'מפה (מרווח 41px ולא 45) */
  .gnav-list,.gnav-bottom{display:flex;flex-direction:column;gap:0}
  /* line-height מפורש — בלעדיו הוא יורש מה-body (1.6) והפריט גדל
     ל-49px במקום 41px, וזה מה שהרגיש צפוף/מרווח שונה מג'מפה. */
  /* תווית ניווט באפור Grey text #7E7E7E של הפיגמה, לא בנייבי —
     נייבי על כל פריט הופך את הבלוק כולו לכבד, והפעיל מפסיק לבלוט. */
  .gn-item{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;cursor:pointer;
    color:#7E7E7E;font-size:14px;line-height:normal;font-weight:500;transition:.12s}
  .gn-item svg{opacity:.78}
  .gn-item.on svg{opacity:1}
  .gn-item svg{color:#A8A8A8;flex:0 0 auto}
  .gn-item:hover{background:var(--bg);color:var(--navy)}
  .gn-item.on{background:var(--navy);color:#fff;font-weight:600}
  .gn-item.on svg{color:#8EC9EC}
  /* הסקציות של החברה — הסרגל המתחלף */
  .gn-back{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#1668a0;cursor:pointer;
    padding:6px 12px;border-radius:999px;margin:0 2px 2px}
  .gn-back:hover{background:var(--blue-bg)}
  .gn-co{font-size:12px;font-weight:700;color:var(--muted);padding:16px 14px 6px;margin-top:8px;border-top:1px solid var(--line);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gn-co.big{font-size:15px;color:var(--navy);border-top:none;margin-top:0;padding:4px 14px 10px}
  /* הסקציות של הלקוח — יותר אוויר. זו רשימה שממלאת סרגל שלם,
     והצפיפות של 9.5px הפכה אותה לגוש. */
  .gn-item.sec{padding:11.5px 14px;font-size:13.5px;line-height:1.2}
  .gn-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);margin-inline-start:auto;flex:0 0 auto}
  .gn-item.on .gn-dot{background:#fff}

  /* תור התפעול בסרגל — של מנהל התזרים */
  .gn-q{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:.12s}

  /* ---- רשימת הלקוחות בסרגל של היועץ ----
     אותו עיצוב של ג'מפה: קו מפריד, חיפוש, ושורות של שתי שורות —
     שם ומתחתיו הדבר שרלוונטי עכשיו. בלי נקודות ובלי מונים: שורת
     המשנה אומרת את המצב בעצמה, וסימן נוסף מעליה הוא רעש. */
  /* אותן מידות בדיוק של הסרגל בג'מפה. הערכים אומתו מול הרינדור:
     שורה 55px, רווח 2px, תיבת חיפוש 33px בכל רוחב העמודה.
     ה-wrap פורץ את הריפוד האופקי של .rail.gnav (10px) כדי שהחיפוש
     והרשימה יקבלו את אותו רוחב כמו בג'מפה. */
  .cl-wrap{display:flex;flex-direction:column;min-height:0;flex:1;
    margin:16px -10px 0;padding-top:14px;border-top:1px solid var(--line)}
  .cl-q{margin:0 2px 8px}
  .cl-q input{font-size:13px;line-height:normal}
  .cl-q:focus-within{border-color:var(--blue);background:#fff}
  .cl-list{flex:1;min-height:0;overflow-y:auto;padding:2px 10px 16px}
  .cl-row{padding:10px 11px;margin-bottom:2px;border-radius:11px;cursor:pointer;transition:.12s;
    border:1px solid transparent;line-height:normal}
  .cl-row:hover{background:var(--bg)}
  .cl-row.on{background:var(--blue-bg);border-color:#cfe8fa}
  .cl-row.on .cl-n{color:var(--navy)}
  /* line-height מפורש — בלעדיו הוא יורש מה-body ומנפח את השורה ל-64px.
     השם בכחול המותג ולא בנייבי הכהה: הנייבי קורא כמעט כשחור ומשטיח את
     הרשימה, והכחול נותן לה את הקצב שיש לסגול בג'מפה. */
  .cl-n{font-size:14px;line-height:normal;font-weight:500;color:#14618F;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cl-s{font-size:12.5px;line-height:normal;color:#949494;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .cl-row.on .cl-n{font-weight:600}
  /* שורת הלקוח של מנהל התזרים — עיגול מצב, שם ומתפעל, קישור Bizibox */
  .cl-row.mg{display:flex;align-items:center;gap:9px;padding:8px 9px 8px 6px}
  .cl-row.mg .cl-t{min-width:0;flex:1}
  .cl-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#CBD7E2}
  .cl-dot.done{background:#13895B;box-shadow:0 0 0 3px rgba(19,137,91,.14)}
  .cl-dot.prog{background:#E0A32B;box-shadow:0 0 0 3px rgba(224,163,43,.16)}
  .cl-dot.bad{background:#C43D30;box-shadow:0 0 0 3px rgba(196,61,48,.14)}
  .cl-bz{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;border:0;background:none;
    color:#93A3B2;opacity:.6;cursor:pointer;transition:.12s}
  .cl-row.mg:hover .cl-bz{opacity:1}
  /* מקרא הצבעים — למנהל התזרים, מתחת לחיפוש */
  /* מקרא: רשת של שתיים, והאזהרה בשורה משלה */
  .cl-lg{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;margin:8px 12px 4px;padding:8px 10px;
    background:#F7FAFD;border:1px solid #E6ECF4;border-radius:9px;font-size:10.5px;color:#5F7285}
  .cl-lg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .cl-lg .cl-dot{width:8px;height:8px;box-shadow:none}
  .cl-lg .lg-warn{grid-column:1/-1;color:#C43D30;font-weight:600;padding-top:4px;border-top:1px solid #E6ECF4;margin-top:2px}
  .cl-warn{flex:none;color:#C43D30;display:grid;place-items:center;width:20px;height:20px}
  .cl-bz:hover{background:#fff;color:#0C4068;box-shadow:0 0 0 1px #D5DEE6}
  .adv-cl-none{padding:16px 14px;font-size:12.5px;color:var(--muted);line-height:1.8;text-align:center}
  .gn-q:hover{background:var(--bg)}
  .gn-q.on{background:var(--blue-bg)}
  .gn-qdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .gn-qdot.alert{background:var(--coral);box-shadow:0 0 0 3px rgba(228,131,117,.18)}
  .gn-qdot.wait{background:var(--amber);box-shadow:0 0 0 3px #FFFDEC}
  .gn-qdot.prog{background:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
  .gn-qdot.done{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
  .gn-qb{min-width:0;flex:1}
  .gn-qn{font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gn-qs{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* חוקי סדר התור — בהגדרות */
  .qr-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid #F0F0F0}
  .qr-row.off .qr-t{color:var(--muted);text-decoration:line-through}
  .qr-num{width:22px;height:22px;border-radius:50%;background:var(--blue-bg);color:#1668a0;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .qr-t{flex:1;min-width:0;font-size:13px;color:var(--navy);font-weight:500}
  .qr-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .qr-btn{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;font-size:10px}
  .qr-btn:disabled{opacity:.35;cursor:default}
  .qr-btn:not(:disabled):hover{border-color:var(--blue);color:#1668a0}
  .qr-tog{transform:scale(.85)}
  .qr-note{font-size:11.5px;color:var(--muted);padding-top:10px;border-top:1px solid #F0F0F0;margin-top:4px}

  /* פירור לחם — בתוך עמוד לקוח */
  .crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
  .crumb-root{color:#1668a0;font-weight:600;cursor:pointer;border-radius:999px;padding:2px 8px}
  .crumb-root:hover{background:var(--blue-bg)}
  .crumb b{color:var(--navy);font-weight:600}

  /* לקוחות — תצוגת רשימה גלובלית */
  .clv-head{margin-bottom:14px}
  .clv-q{width:360px;max-width:100%;font-family:inherit;font-size:13.5px;color:var(--navy);
    border:1px solid var(--line);border-radius:999px;padding:10px 18px;background:#fff;outline:none}
  .clv-q:focus{border-color:var(--blue)}
  .clv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
  .clv-card{background:#fff;border:1px solid transparent;border-radius:12px;box-shadow:var(--shadow);padding:15px 17px;cursor:pointer;transition:.12s}
  .clv-card:hover{border-color:var(--blue);transform:translateY(-1px)}
  .clv-top{display:flex;align-items:center;gap:9px}
  .clv-top .advp-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .clv-top .advp-dot.green{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
  .clv-top .advp-dot.amber{background:var(--amber);box-shadow:0 0 0 3px #fdf4e3}
  .clv-top .advp-dot.red{background:var(--coral);box-shadow:0 0 0 3px rgba(228,131,117,.18)}
  .clv-n{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .clv-meta{font-size:12px;color:var(--muted);margin:4px 0 10px}
  .clv-fig{display:flex;align-items:baseline;justify-content:space-between;background:var(--bg);border-radius:10px;padding:8px 12px}
  .clv-fig span{font-size:11.5px;color:var(--muted)}
  .clv-fig b{font-size:15px;color:var(--navy)}
  .clv-foot{margin-top:10px;display:flex;justify-content:flex-end}

  /* הגדרות */
  .set-title{font-size:19px;font-weight:600;color:var(--navy);margin-bottom:14px}
  .set-empty{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--muted)}
  .set-empty svg{color:#c2cfdc}
  .set-empty b{font-size:15px;color:var(--navy)}
  .set-empty span{font-size:12.5px;max-width:420px}
  .set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
  .set-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:14px 16px}
  .set-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .set-ic{width:34px;height:34px;border-radius:10px;background:var(--blue-bg);color:#1668a0;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-top:1px solid #f0f4f8;font-size:12.5px}
  .set-row b{color:var(--navy);font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .set-row span{color:var(--muted);flex:0 0 auto;font-size:11.5px}

  /* ===== client rail (right side in RTL) ===== */
  .rail{background:#fff;border-inline-start:1px solid var(--line);display:flex;flex-direction:column;
    position:sticky;top:58px;height:calc(100vh - 58px);overflow:hidden}
  .rail-head{display:flex;align-items:center;gap:8px;padding:14px 16px 10px}
  .rail-head .rt{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
  .rail-head .badge{background:var(--blue-bg);color:var(--navy);font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px}
  .collapse-btn{margin-inline-start:auto;background:var(--bg);border:1px solid var(--line);border-radius:8px;
    width:28px;height:28px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.15s;flex:0 0 auto}
  .collapse-btn:hover{color:var(--navy);border-color:var(--blue)}
  .rail-search{margin:0 16px 8px;display:flex;align-items:center;gap:8px;background:var(--bg);
    border:1px solid var(--line);border-radius:10px;padding:8px 11px}
  .rail-search input{border:none;outline:none;background:transparent;font-family:inherit;font-size:13px;width:100%;color:var(--ink)}
  .rail-search svg{opacity:.5;flex:0 0 auto}
  .rail-tabs{display:flex;gap:6px;padding:0 16px 8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .rail-tabs::-webkit-scrollbar{display:none}
  .rtcnt{font-size:10px;font-weight:700;background:var(--coral);color:#fff;border-radius:999px;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
  .rtab.on .rtcnt{background:var(--navy);color:#fff}
  .d-done{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font-family:inherit;
    font-weight:600;font-size:12.5px;border-radius:9px;padding:7px 12px;cursor:pointer;display:flex;align-items:center;gap:6px;margin-inline-start:auto}
  .d-done:hover{background:rgba(255,255,255,.28)}
  .d-head .x{margin-inline-start:8px}
  .mt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .mt-h-title{font-size:20px;font-weight:600;color:var(--navy)}
  .mt-new{background:var(--navy);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-family:inherit;
    font-weight:600;font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:7px}
  .mt-new:hover{background:var(--navy-soft)}
  .mt-client{font-size:12px;color:var(--blue);font-weight:500;margin-bottom:4px}
  .rtab{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);padding:6px 10px;border-radius:999px;cursor:pointer;border:1px solid var(--line);background:#fff}
  .rtab.on{background:var(--blue-bg);color:var(--navy);font-weight:600;border-color:#d4ecfb}
  .rail-list{flex:1;overflow-y:auto;padding:2px 10px 16px}

  .cli{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;
    margin-bottom:2px;border:1px solid transparent;transition:.12s}
  .cli:hover{background:var(--bg)}
  .cli.on{background:var(--blue-bg);border-color:#d4ecfb}
  .cli .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
  .cli .dot.active{background:var(--green)} .cli .dot.warn{background:var(--coral)} .cli .dot.off{background:#c7d0da} .cli .dot.prog{background:var(--amber)}
  .cli .ci{min-width:0;flex:1}
  .cli .cn{font-size:13.5px;font-weight:500;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cli .cs{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cli .cbadge{flex:0 0 auto;background:var(--coral-ink);color:#fff;font-size:11px;font-weight:600;
    min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 5px}

  /* collapsed rail = status dots only */
  .shell.collapsed .rail-head .rt,.shell.collapsed .rail-head .badge,
  .shell.collapsed .rail-search,.shell.collapsed .rail-tabs,
  .shell.collapsed .cli .ci,.shell.collapsed .cli .cbadge{display:none}
  .shell.collapsed .rail-head{justify-content:center;padding:14px 0 10px}
  .shell.collapsed .cli{justify-content:center;padding:10px 0}
  .shell.collapsed .cli .dot{width:11px;height:11px}

  /* ===== main dashboard ===== */
  .main{padding:12px 22px 90px;min-width:0}
  .client-head{display:flex;align-items:center;gap:12px;margin-bottom:3px;flex-wrap:wrap}
  .client-head h1{font-size:19px;color:var(--navy);font-weight:600}
  .client-head .hp2{font-size:13px;color:var(--muted)}
  .client-head .st{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
  .client-head .st.active{background:var(--green-bg);color:var(--green)}
  .client-head .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .sub-line{font-size:12px;color:var(--muted);margin-bottom:10px}
  .db-actions{margin-inline-start:auto;display:flex;gap:8px}
  .rep{position:relative}
  .rep .chip-btn .repchev{transition:.2s}
  .rep.open .chip-btn .repchev{transform:rotate(180deg)}
  .rep-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:#fff;border:1px solid var(--line);
    border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;min-width:210px;z-index:35;display:none}
  .rep.open .rep-menu{display:block}
  .rep-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13.5px;
    color:var(--navy);cursor:pointer;white-space:nowrap}
  .rep-item:hover{background:var(--blue-bg)}
  .rep-item svg{opacity:.55;flex:0 0 auto}
  .chip-btn{font-size:12.5px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:10px;
    padding:8px 13px;cursor:pointer;display:flex;align-items:center;gap:7px}
  .chip-btn:hover{border-color:var(--blue)}
  .chip-btn.primary{background:var(--navy);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(12,64,104,.28)}
  .chip-btn.primary:hover{background:var(--navy-soft)}
  #btnOps.done{background:var(--green);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(22,163,74,.28)}
  #btnOps.done:hover{background:#12833d}

  /* ===== section tabs ===== */
  .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
  .tab{font-size:14px;color:var(--muted);padding:11px 16px;cursor:pointer;border-bottom:2px solid transparent;font-weight:500;white-space:nowrap}
  .tab:hover{color:var(--navy)}
  .tab.on{color:var(--navy);border-bottom-color:var(--coral);font-weight:600}

  .prod-opt.on{background:var(--blue-bg);font-weight:600}
  .mgr-n{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--bg);border-radius:999px;padding:1px 8px;margin-inline-start:8px}