/* ── The shell holds still ─────────────────────────────────────────────────
   h-screen is 100vh, and on a phone 100vh is taller than what you can see: the
   browser counts the address bar, which is only there until you scroll. So the
   whole app was a little taller than the window, the page itself scrolled, and
   the title row and its icons slid up under the address bar. 100dvh is what is
   actually visible, and with the page itself unable to scroll, only the list
   below the title moves. */
html, body {
  height: 100%;
}
body {
  overflow: hidden;
  overscroll-behavior-y: none;
}
#screen-app {
  height: 100dvh;
}
#screen-login {
  height: 100dvh;
  overflow-y: auto;
}

/* ── Fonts ─────────────────────────────────────────────────────────────── */
.font-headline { font-family: 'Fredoka', sans-serif; }

.app-shell {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.7), transparent 28%),
    linear-gradient(180deg, #f3f4ff 0%, #eef2ff 42%, #f7f8fc 100%);
}

.app-sidebar {
  background: rgba(255, 255, 255, 0.96);
  color: #333;
}

.sidebar-float {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(191, 199, 234, 0.45);
  box-shadow: 0 8px 32px rgba(108, 125, 179, 0.10);
}

.app-mobile-topbar {
  background: rgba(246, 247, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(191, 199, 234, 0.55);
}

.app-content-shell {
  background: transparent;
}

.app-brand-badge {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(180deg, #0d79bb 0%, #0a5d96 100%);
  box-shadow: 0 12px 24px rgba(13, 121, 187, 0.18);
}

.app-lang-select {
  border: 1px solid rgba(180, 191, 229, 0.8);
  background: rgba(255, 255, 255, 0.84);
  color: #5f7296;
}

.sidebar-nav {
  padding: 0 0.55rem;
}

.sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #999;
  padding: 0.45rem 0.9rem 0.2rem;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.42rem 0.9rem;
  border-radius: 0.9rem;
  color: #333;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sidebar-nav-item:hover {
  color: #0d6fb1;
  background: rgba(255, 255, 255, 0.62);
}

.sidebar-nav-item.active {
  color: #0d6fb1;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(108, 125, 179, 0.12);
}

.sidebar-nav-item .material-symbols-outlined {
  font-size: 20px !important;
  color: currentColor;
}

.sidebar-footer {
  margin-top: auto;
  padding: 0.55rem;
}

.sidebar-footer-card {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(205, 214, 243, 0.7);
  padding: 0.85rem;
}

.sidebar-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #6c7f9f;
  padding: 0.8rem 0.85rem;
  border-radius: 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sidebar-logout:hover {
  background: rgba(255, 255, 255, 0.84);
  color: #0d6fb1;
}

.page-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.page-placeholder-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(220, 225, 245, 0.9);
  border-radius: 1.5rem;
  padding: 1.4rem;
  box-shadow: 0 18px 40px rgba(98, 112, 155, 0.08);
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* ── Page transition ───────────────────────────────────────────────────── */
.page-enter {
  animation: pageEnter 0.18s ease both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Mobile drawer ─────────────────────────────────────────────────────── */
#mobile-drawer {
  transform: translateX(-100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
[dir="rtl"] #mobile-drawer {
  left: auto;
  right: 0;
  transform: translateX(100%);
}
#mobile-drawer.drawer-open {
  transform: translateX(0) !important;
}

/* On a phone the menu is a sheet, like every other dialog in the dashboard: it
   rises from the bottom, where a thumb reaches it, instead of sliding in from
   the side. A tablet keeps the side drawer, where there is room beside it. */
@media (max-width: 639.98px) {
  #mobile-drawer {
    top: auto;
    inset-inline: 0;
    width: 100%;
    max-height: 86dvh;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
  [dir="rtl"] #mobile-drawer {
    right: 0;
    left: 0;
    transform: translateY(100%);
  }
  #mobile-drawer.drawer-open {
    transform: translateY(0) !important;
  }
}

/* ── Custom scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── RTL sidebar border ────────────────────────────────────────────────── */
[dir="rtl"] #desktop-sidebar {
  border-right: none;
  border-left: 1px solid rgba(191, 199, 234, 0.55);
}

/* ── RTL mobile topbar: hamburger stays to the right of greeting ───────── */
[dir="rtl"] #drawer-open-btn {
  order: -1;
}

/* ── Safe-area bottom (iOS notch) ──────────────────────────────────────── */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Input icon positioning (RTL/LTR aware) ────────────────────────────── */
.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.75rem;
  pointer-events: none;
  color: #cbd5e1;
  font-size: 18px !important;
}
[dir="rtl"] .input-icon  { left: auto; right: 0.75rem; }

.input-icon-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
}
[dir="rtl"] .input-icon-btn { right: auto; left: 0.75rem; }

.input-with-icon     { padding-left:  2.5rem !important; padding-right: 1rem   !important; }
.input-with-icon-end { padding-right: 2.5rem !important; padding-left:  1rem   !important; }
[dir="rtl"] .input-with-icon     { padding-right: 2.5rem !important; padding-left:  1rem !important; }
[dir="rtl"] .input-with-icon-end { padding-left:  2.5rem !important; padding-right: 1rem !important; }

/* ── Edit modal fields ─────────────────────────────────────────────────── */
.edit-field {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  font-family: 'Fredoka', sans-serif;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: #1e293b;
}
.edit-field:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.edit-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
  font-family: 'Fredoka', sans-serif;
}

/* ── Desktop header ────────────────────────────────────────────────────── */
.desktop-header {
  background: transparent;
  border-bottom: none;
}

.header-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #0d79bb 0%, #0a5d96 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── Skeleton pulse ────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* The logout glyph is an arrow leaving a door, drawn pointing right. In a
   right-to-left interface "out" is to the left, so mirror it there — the same
   markup then reads correctly in both directions instead of pointing back into
   the page in Hebrew and Arabic. */
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

/* ── Text scale ──────────────────────────────────────────────────────────
   The dashboard is read across a counter, often at arm's length, and the
   original scale bottomed out at 10px. Every step is now 4px above that
   original - two rounds of widening, the second after seeing it in place on a
   real screen. Line heights grow with the type so the rows keep their air.

   Only type is touched: Tailwind's spacing utilities are rem-based, so
   raising the root font size instead would have grown every padding and gap
   with it and reflowed the whole layout. !important is needed because the
   Tailwind CDN injects its stylesheet at runtime, after this file. */
.text-\[10px\] { font-size: 13px    !important; }
.text-\[11px\] { font-size: 14px    !important; }
.text-xs       { font-size: 0.955rem !important; line-height: 1.35rem !important; }
.text-sm       { font-size: 1.085rem !important; line-height: 1.6rem  !important; }
.text-base     { font-size: 1.185rem !important; line-height: 1.8rem  !important; }

/* ── Print ───────────────────────────────────────────────────────────────
   "Save as PDF" is the browser's own print dialogue, so the printed page has
   to be the report and nothing else: no sidebar, no toolbar, no hover states.
   Cards are kept off page breaks - a table split mid-row is the one thing
   that makes a printed report unusable. */
@media print {
  .app-sidebar, .sidebar-float, .app-mobile-topbar, .no-print { display: none !important; }
  .app-content-shell, .app-shell { background: #fff !important; }
  body { font-size: 12px; }
  .shadow-sm { box-shadow: none !important; }
  .rounded-2xl { border: 1px solid #e2e8f0 !important; break-inside: avoid; page-break-inside: avoid; }
  table { break-inside: auto; }
  tr    { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
}

/* ── Scrolling card pages ────────────────────────────────────────────────
   Four cards to a page and the page is what scrolls, so four are visible at
   once and the next four are one swipe away. Two by two on a phone, one row of
   four on a desktop - the grid does that part; this only hides the scrollbar,
   which on a paged control is noise. */
.ui-card-pages { scrollbar-width: none; align-items: start; }
.ui-card-pages::-webkit-scrollbar { display: none; }

/* A page holding two cards was as tall as the page holding four, because a flex
   child stretches to the tallest sibling and a grid row then stretches to fill
   it. Both are told to sit at their natural height instead, so the last page
   looks like the first one - just shorter. */
.ui-card-pages > * { align-content: start; }
.ui-card-pages > * > * { align-self: start; }

/* ── Date toggle on the title row ──────────────────────────────────────── */
/* Pressed while the date fields are open, so it is clear which button put them
   there and which one takes them away again. Brand blue, the same as every
   other "this is on" state in the dashboard. */
.ui-dates-btn.ui-dates-on {
  background: #eff6ff;          /* brand-50  */
  border-color: #60a5fa;        /* brand-400 */
  color: #1d4ed8;               /* brand-700 */
}

/* ── Dialogs: a modal on a desktop, a bottom sheet on a phone ──────────────
   One rule for every dialog in the dashboard. Each one is tagged by
   uiSheetWatch() in app.js the moment it is added to the page, so a dialog
   written tomorrow gets the same behaviour without anyone remembering to ask
   for it. Before this there were three: some sheets with a 16px corner, some
   with 24px, and most centred on a phone with a thumb's reach away from them. */
@media (max-width: 639px) {
  .ui-sheet-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .ui-sheet {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* The grab handle: says "this came up from the bottom and goes back down". */
  .ui-sheet::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: #e2e8f0;
    flex-shrink: 0;
  }
  /* Sheets that already slide themselves in keep their own motion. */
  .ui-sheet:not(.transition-transform) {
    animation: ui-sheet-up .22s cubic-bezier(.22,.61,.36,1);
  }
}
@keyframes ui-sheet-up {
  from { transform: translateY(24px); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-sheet { animation: none !important; }
}

/* ── The calendar's month moves sideways ───────────────────────────────────
   Forward and back are a direction, and the eye expects to see it: the next
   month comes in from the right and settles to the left, the previous one the
   other way. Only the grid moves; the dialog stays where it is, instead of
   rising from the bottom again on every arrow press. */
@keyframes ui-cal-slide-next {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ui-cal-slide-prev {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ui-cal-next { animation: ui-cal-slide-next 0.18s ease-out; }
.ui-cal-prev { animation: ui-cal-slide-prev 0.18s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ui-cal-next, .ui-cal-prev { animation: none; }
}

/* ── One size smaller, everywhere ──────────────────────────────────────────
   Nearly every size in the interface is in rem, so the root is the single dial:
   15px instead of the browser's 16 takes a point off the whole dashboard at
   once and keeps every proportion between the sizes as it was. */
html {
  font-size: 15px;
}

/* ── Floating label: the label lives inside the field ──────────────────────
   Empty, it sits where a placeholder would, in grey. Once there is a value it
   shrinks into the top of the same box instead of vanishing: a plain
   placeholder disappears the moment a field is filled, and in an edit form every
   field is filled, so none of them would say what it was. */
.ui-float { position: relative; }
.ui-float > .edit-field {
  padding-top: 1.15rem;
  padding-bottom: 0.3rem;
  min-height: 2.85rem;
}
.ui-float > label {
  position: absolute;
  inset-inline-start: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #94a3b8;
  pointer-events: none;
  transition: top .15s, font-size .15s, transform .15s, color .15s;
  font-family: 'Fredoka', sans-serif;
  white-space: nowrap;
  max-width: calc(100% - 1.6rem);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Filled, focused, or a select (which always shows a choice): label up. */
.ui-float > .edit-field:focus + label,
.ui-float > .edit-field:not(:placeholder-shown) + label,
.ui-float > select.edit-field + label {
  top: 0.35rem;
  transform: none;
  font-size: 0.66rem;
  font-weight: 600;
}
.ui-float > .edit-field:focus + label { color: #2563eb; }
/* The placeholder itself stays invisible; the label is the placeholder. */
.ui-float > .edit-field::placeholder { color: transparent; }

/* Material Symbols sets direction: ltr on every icon, so an icon placed with a
   logical inset (end-2, start-3) resolved it by its own direction and landed on
   the right on a Hebrew page: over the text of a date field, on the wrong side of
   a search box. A positioned icon takes its direction from the field it sits in. */
.material-symbols-outlined.absolute {
  direction: inherit;
}

/* ── תפריטי יום: שדה שעה, בורר ימים ורשימת פריטים ─────────────────────────── */

/* בורר בין "כל היום" ל"טווח שעות" */
.mn-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 14px;
}
.mn-seg > button {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mn-seg > button.is-on {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

/* שדה שעה: שתי רשימות, שעה ודקה, במקום חוגה של המכשיר */
.mn-time {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  height: 52px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mn-time:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.mn-time > span:first-child {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  min-width: 26px;
}
.mn-clock {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mn-clock > i {
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  color: #cbd5e1;
}
.mn-clock select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  padding: 4px 6px;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.mn-clock select:hover { background: #eef2f7; }

/* ימי השבוע */
.mn-day {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mn-day.is-on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* שורת פריט: הסימון מצויר, והמעבר חלק במקום הבהוב */
.mn-row .mn-check {
  width: 20px;
  height: 20px;
  border: 1.5px solid #cbd5e1;
  border-radius: 7px;
  color: #fff;
  background: #fff;
  display: grid;
  place-items: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.mn-row .mn-check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.mn-row.is-on .mn-check {
  background: #2563eb;
  border-color: #2563eb;
}
.mn-row.is-on .mn-check svg {
  opacity: 1;
  transform: scale(1);
}
.mn-row:not(.cursor-default):hover { background: #f8fafc; }

/* ── פריט ניווט שנעול במסלול צפייה ─────────────────────────────────────────── */
.sidebar-nav-item.is-locked { opacity: .65; }
.nav-pro {
  margin-inline-start: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── קונסולת הסופר אדמין: אותו עיצוב, צפוף בדרגה אחת ────────────────────────── */
/* בקונסולה יש הרבה יותר שורות לכל מסך מאשר בדשבורד של מסעדה, ולכן הטקסט קטן
   יותר והשורות נמוכות יותר. אין כאן שינוי צבע או מבנה, רק צפיפות. */
.sm-dense { font-size: 13px; }
.sm-dense .text-sm   { font-size: 0.8125rem; line-height: 1.15rem; }
.sm-dense .text-xs   { font-size: 0.6875rem; line-height: 1rem; }
.sm-dense .text-base { font-size: 0.875rem; }
.sm-dense .text-lg   { font-size: 1rem; }

/* שורות הטבלה: פחות אוויר למעלה ולמטה, אותו ריווח לצדדים */
.sm-dense table th,
.sm-dense table td { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.sm-dense table th { font-size: 0.6875rem; }

/* כרטיסים ורשימות בתצוגת מובייל של הקונסולה */
.sm-dense .p-4  { padding: 0.75rem; }
.sm-dense .gap-3 { gap: 0.6rem; }

/* ── תפריט הנייד: אריחים במקום עמודה ───────────────────────────────────────── */
/* בגיליון שעולה מלמטה, עמודה צמודה לקצה מבזבזת את הרוחב ודוחפת את הפריטים
   האחרונים רחוק מהאגודל. הרשת מתאימה את עצמה לרוחב בלי נקודות שבירה, כך שגם
   במגירה הצדדית של טאבלט וגם בגיליון של טלפון נכנסים כל הפריטים. */
.nav-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  padding: 0 4px;
}
.nav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 78px;
  padding: 12px 6px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eef2f7;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  color: #475569;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.nav-tile:active { transform: scale(.97); }
.nav-tile .material-symbols-outlined { font-size: 22px; color: #64748b; }
.nav-tile-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  /* שם ארוך יורד לשתי שורות במקום להיחתך */
  overflow-wrap: anywhere;
}
.nav-tile.is-on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}
.nav-tile.is-on .material-symbols-outlined { color: #fff; }
.nav-tile.is-locked { opacity: .65; }
.nav-tile-pro {
  padding: 0 5px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── כשיש עוד תפריט מתחת לקפל ────────────────────────────────────────────── */
/* מסך נמוך חותך את הקבוצה האחרונה, ותפריט שנגמר בקצה נקי נראה גמור: אנשים לא
   גוללים משהו שלא ניכר עליו שהוא נגלל. ההצללה והחץ מופיעים רק כל עוד יש המשך,
   והמחלקה מוסרת ברגע שמגיעים לסוף. */
.sidebar-float, #drawer-nav { position: relative; }

.sidebar-float.has-more::after,
#drawer-nav.has-more::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 84px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0), rgba(248, 250, 252, .96));
}
.sidebar-float.has-more::before,
#drawer-nav.has-more::before {
  content: 'expand_more';
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  line-height: 1;
  position: absolute;
  inset-inline: 0;
  bottom: 92px;
  z-index: 1;
  text-align: center;
  color: #94a3b8;
  pointer-events: none;
  animation: navMoreNudge 1.8s ease-in-out infinite;
}
@keyframes navMoreNudge {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-float.has-more::before,
  #drawer-nav.has-more::before { animation: none; }
}