/* ============================================================
   POLISH LAYER v3 — Phase B (mobile nav, touch cards, table
   swipe) + Phase C (ripple, scrollbar, FAB label, notif badge).
   Placed at end-of-body so it cascades over the inline FAB block.
   Fully additive; nothing above is removed.
   ============================================================ */

/* ---- C: dark styled scrollbars ---- */
*{scrollbar-width:thin;scrollbar-color:#243456 transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#1f2c4d;border-radius:6px;border:2px solid #0b0f19}
*::-webkit-scrollbar-thumb:hover{background:#2a3a60}

/* ---- C: hide dummy red notification badge (no real notifications yet) ---- */
.fnew::after{display:none}

/* ---- C: FAB grows into a labelled pill on hover (desktop) ---- */
#mm-fab{width:auto;min-width:52px;height:50px;border-radius:26px;padding:0 16px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:20px}
#mm-fab::after{content:'Dashboard';font-size:13px;font-weight:600;letter-spacing:.2px;
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .28s ease,opacity .28s ease}
#mm-fab:hover::after{max-width:120px;opacity:1}

/* ---- C: ripple ---- */
.mm-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.28);
  transform:scale(0);animation:mmrip .55s ease-out;pointer-events:none}
@keyframes mmrip{to{transform:scale(2.4);opacity:0}}

/* ---- B: mobile nav dropdown (injected by JS) ---- */
.mn-mob{display:none}
@media(max-width:640px){
  .mn{display:none}
  .mn-mob{display:block;width:calc(100% - 32px);margin:10px 16px 4px;font-size:14px;padding:12px 14px}
  /* touch-friendlier quick-access + lists */
  .ln{padding:14px 14px}
  .ql a{padding:11px 16px;font-size:13px;margin:0 6px 8px 0}
  .sbt{padding:9px 14px}
  .kv{font-size:26px}
  /* right-edge fade hints that wide tables can be swiped */
  .tw{position:relative}
  .tw::before{content:'';position:absolute;top:0;right:0;width:22px;height:100%;
    background:linear-gradient(90deg,transparent,#0e1528);pointer-events:none;z-index:6}
  #mm-fab{width:50px;padding:0;border-radius:50%}
  #mm-fab::after{display:none}
}