/* ============================================================
   Platform-Frame left menu — ported VERBATIM from the BOAT UI
   Container shell.css (which itself derives from Charter Management).
   Self-contained literal values so the rail is pixel-identical to
   UI Container regardless of the app's content theme.
   Royal #2F4BE0 · radius 11 · rail 240 · IBM Plex.
   ============================================================ */
.pf { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: #F3F4F7;
  font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; }

/* Top header — light, frosted */
.pf-top { flex: 0 0 60px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #101322; border-bottom: 1px solid #E5E8F0; z-index: 40; }
.pf-burger { position: relative; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 11px; background: transparent; border: none; color: #6A7080; cursor: pointer; text-decoration: none; }
.pf-burger:hover { background: #EEF0F6; color: #2F4BE0; }
.pf-burger .ico { width: 18px; height: 18px; }
.pf-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.pf-brand img { height: 26px; width: auto; display: block; }
.pf-brand-sep { width: 1px; height: 22px; background: #E5E8F0; }
.pf-brand-sub { font-size: 13px; color: #6A7080; font-weight: 500; white-space: nowrap; }
.pf-spacer { flex: 1; }

/* Body: side rail + content */
.pf-body { flex: 1; display: flex; min-height: 0; }
.pf-side { flex: 0 0 240px; display: flex; flex-direction: column; background: #FFFFFF;
  border-inline-end: 1px solid #E5E8F0; overflow-y: auto; overflow-x: hidden; transition: flex-basis .16s ease; }
.pf-side::-webkit-scrollbar { width: 6px; }
.pf-side::-webkit-scrollbar-thumb { background: #E5E8F0; border-radius: 3px; }

.pf-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pf-nav .grp { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #9AA0B0;
  font-weight: 700; padding: 14px 11px 6px; }
.pf-navitem { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px;
  margin: 1px 0; color: #6A7080; text-decoration: none; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; border-inline-start: 2px solid transparent; }
.pf-navitem:hover { background: #EEF0F6; color: #101322; }
.pf-navitem.active { background: linear-gradient(90deg, #EAEEFC, rgba(234,238,252,.25));
  color: #1F36AD; font-weight: 600; border-inline-start-color: #2F4BE0; }
.pf-navicon { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; color: inherit; }
.pf-navicon .ico { width: 18px; height: 18px; }
.pf-navitem.active .pf-navicon { color: #2F4BE0; }
.pf-navtext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.pf-collapse { display: flex; align-items: center; gap: 10px; margin: 6px 8px 12px; padding: 8px 11px;
  border-radius: 11px; background: #EEF0F6; border: none; color: #2A2E42; cursor: pointer; font-size: 12.5px; }
.pf-collapse:hover { background: #E3E6F0; }
.pf-collapse .ico { width: 13px; height: 13px; }
[dir="rtl"] .pf-collapse .ico { transform: scaleX(-1); }

/* Collapsed (icon rail) — pure-CSS checkbox toggle */
.pf-toggle-cb { position: absolute; opacity: 0; pointer-events: none; }
.pf-toggle-cb:checked ~ .pf .pf-side { flex-basis: 62px; }
.pf-toggle-cb:checked ~ .pf .pf-navtext,
.pf-toggle-cb:checked ~ .pf .pf-nav .grp { display: none; }
.pf-toggle-cb:checked ~ .pf .pf-navitem { justify-content: center; gap: 0; padding: 10px 0; border-inline-start-color: transparent; }
.pf-toggle-cb:checked ~ .pf .pf-collapse { justify-content: center; }
.pf-toggle-cb:checked ~ .pf .pf-collapse .ico { transform: rotate(180deg); }
[dir="rtl"] .pf-toggle-cb:checked ~ .pf .pf-collapse .ico { transform: scaleX(-1) rotate(180deg); }

/* Main content */
.pf-main { flex: 1; min-width: 0; overflow: auto; position: relative; background: #F3F4F7; }

/* Footer */
.pf-foot { flex: 0 0 32px; display: flex; align-items: center; gap: 6px; padding: 0 18px;
  background: #FFFFFF; color: #9AA0B0; font-size: 11.5px; border-top: 1px solid #E5E8F0; }
.pf-foot .dotlive { width: 7px; height: 7px; border-radius: 50%; background: #17845A; }
.pf-foot-mark { color: #2A2E42; font-weight: 700; letter-spacing: .5px; }

@media (max-width: 640px) {
  .pf-side { flex-basis: 62px; }
  .pf-navtext, .pf-nav .grp, .pf-brand-sub, .pf-brand-sep { display: none; }
  .pf-navitem { justify-content: center; gap: 0; padding: 10px 0; }
  .pf-collapse { justify-content: center; }
}