/* portal_v4.css · Franchisee Dashboard UI/UX pass (Nov 10, 2026)
   Loads last. Phone first: comfortable text, roomy tap targets, calm spacing, Facebook style top buttons.
   Uses the portal's own colors, so light and dark mode both work. */

/* ── top bar: round buttons like Facebook (Community, Messenger, theme, you) ── */
.tb-user{gap:8px !important}
.tb-ic-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);background:var(--card2);color:var(--cream);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:transform .12s}
.tb-ic-btn:active{transform:scale(.92)}
.tb-ic-btn svg{width:21px;height:21px;display:block}
@media (max-width:600px){
  .topbar-in{gap:6px !important}
  .tb-user{gap:6px !important}
  .tb-ic-btn,.tb-chat-btn,.theme-toggle{width:38px !important;height:38px !important}
  .tb-user-info{display:none !important}
  .topbar .theme-toggle{display:none !important} /* on phones: Light/Dark is in 🧰 Tools (top right) */
  .tb-page-title{font-size:1.05rem !important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ── Home: the "Up next" list reads as one card ── */
#dashNext .ac-cont{border:none !important;box-shadow:none !important;background:none !important;border-radius:0 !important;margin:0 !important;padding:12px 0 !important}
#dashNext .ac-cont .ic{flex-basis:48px !important;height:48px !important;font-size:24px !important;border-radius:14px !important}
#dashNext .ac-cont .n{font-size:15px}
@media (max-width:640px){
  #dashNext .ac-cont{flex-wrap:nowrap !important}
  #dashNext .ac-cont .ac-go{flex:0 0 auto !important;padding:10px 14px;min-height:42px;font-size:13.5px}
  #dashNext .ac-cont .l{white-space:normal;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
}

/* ── phones: calmer banners, comfortable reading ── */
@media (max-width:600px){
  .wrap{padding-left:14px !important;padding-right:14px !important}
  #notifBanner,#installBanner{padding:12px 14px !important;font-size:14px !important;line-height:1.45 !important;border-radius:16px !important}
  #notifBanner .btn,#installBanner .btn{min-height:42px}
  .section-title{font-size:20px !important;line-height:1.25 !important;margin-bottom:6px !important}
  .section-desc{font-size:14.5px !important;line-height:1.55 !important;margin-bottom:14px !important}
  .dd>summary{min-height:64px}
  .dd-compact{grid-template-columns:1fr !important}
  .btn{min-height:44px}
  input,select,textarea{font-size:16px !important} /* no zoom-in on iPhone when you tap a field */
}

/* ── Messenger: Facebook look ── */
.msn-row.me .msn-bubble{background:linear-gradient(135deg,#0a7cff,#7b4dff) !important}
.msn-at{font-weight:900;font-size:18px !important;color:#0a7cff !important}
.msn-composer .msn-icon-btn.plain{color:#0a7cff}
.msn-item.active{background:rgba(10,124,255,.1) !important}
.msn-item-badge{background:#0a7cff !important}
@media (max-width:760px){
  section.page[data-page="messenger"]{margin:-14px -14px 0}
  .msn{border-radius:0 !important;border-left:none !important;border-right:none !important;height:calc(100dvh - 64px) !important}
  .msn-composer .msn-icon-btn{width:40px;height:40px}
}

/* ── course cards and lessons breathe a bit more on phones ── */
@media (max-width:600px){
  [data-page="courses-page"] .section-title{margin-top:4px}
}
.msn .msn-notif{background:rgba(10,124,255,.08) !important}
.msn .msn-search input{background:rgba(120,130,150,.12) !important;border-color:transparent !important}
.msn .msn-search input:focus{border-color:#0a7cff !important}
.msn .msn-icon-btn:not(.plain){background:rgba(120,130,150,.14) !important}