/* Canonical authenticated application shell.
   Sidebar/header geometry, navigation sizing, account card and shell theme states live here.
   Page styles own page content only; they must not redefine the application shell. */
:root{
  --mf-shell-sidebar-width:132px;
  --mf-shell-desktop-inset:18px;
  --mf-shell-sidebar-radius:30px;
  --mf-shell-sidebar-pad-y:16px;
  --mf-shell-sidebar-pad-x:12px;
  --mf-shell-sidebar-gap:14px;
  --mf-shell-brand-size:58px;
  --mf-shell-brand-radius:18px;
  --mf-shell-nav-item-height:52px;
  --mf-shell-nav-gap:8px;
  --mf-shell-nav-radius:18px;
  --mf-shell-nav-font-size:11px;
  --mf-shell-nav-icon-size:22px;
  --mf-shell-account-radius:18px;
  --mf-shell-account-gap:7px;
  --mf-shell-account-action-height:34px;
  --mf-shell-surface-start:rgba(255,255,255,.04);
  --mf-shell-surface-end:rgba(255,255,255,.02);
  --mf-shell-line:rgba(255,255,255,.07);
  --mf-shell-item-bg:rgba(255,255,255,.03);
  --mf-shell-item-border:rgba(255,255,255,.05);
  --mf-shell-item-hover:rgba(255,255,255,.055);
  --mf-shell-action-bg:rgba(255,255,255,.04);
  --mf-shell-action-border:rgba(255,255,255,.08);
  --mf-shell-shadow:0 18px 42px rgba(0,0,0,.34);
  --mf-shell-scroll-track:transparent;
  --mf-shell-scroll-thumb:rgba(255,255,255,.16);
  --mf-shell-scroll-thumb-hover:rgba(255,255,255,.26);
  --mf-shell-accent:#22c55e;
  --mf-shell-accent-dark:#16a34a;
  --mf-shell-accent-rgb:34,197,94;
  --mf-shell-text:#eef3f9;
  --mf-shell-muted:#9cb0c7;
}

html[data-mfe-theme="light"]{
  --mf-shell-surface-start:rgba(255,255,255,.96);
  --mf-shell-surface-end:rgba(247,250,252,.90);
  --mf-shell-line:rgba(15,23,42,.13);
  --mf-shell-item-bg:rgba(255,255,255,.86);
  --mf-shell-item-border:rgba(15,23,42,.09);
  --mf-shell-item-hover:rgba(15,23,42,.055);
  --mf-shell-action-bg:rgba(255,255,255,.86);
  --mf-shell-action-border:rgba(15,23,42,.12);
  --mf-shell-shadow:0 18px 42px rgba(15,23,42,.12);
  --mf-shell-scroll-thumb:rgba(15,23,42,.22);
  --mf-shell-scroll-thumb-hover:rgba(15,23,42,.34);
  --mf-shell-accent:#16a34a;
  --mf-shell-accent-dark:#15803d;
  --mf-shell-accent-rgb:22,163,74;
  --mf-shell-text:#102018;
  --mf-shell-muted:#5f7469;
}

html[data-mfe-theme="gray"]{
  --mf-shell-surface-start:rgba(255,255,255,.98);
  --mf-shell-surface-end:rgba(243,244,246,.94);
  --mf-shell-line:rgba(17,24,39,.14);
  --mf-shell-item-bg:rgba(255,255,255,.92);
  --mf-shell-item-border:rgba(17,24,39,.10);
  --mf-shell-item-hover:rgba(17,24,39,.065);
  --mf-shell-action-bg:rgba(255,255,255,.92);
  --mf-shell-action-border:rgba(17,24,39,.14);
  --mf-shell-shadow:0 18px 42px rgba(17,24,39,.12);
  --mf-shell-scroll-thumb:rgba(17,24,39,.24);
  --mf-shell-scroll-thumb-hover:rgba(17,24,39,.38);
  --mf-shell-accent:#111827;
  --mf-shell-accent-dark:#000000;
  --mf-shell-accent-rgb:17,24,39;
  --mf-shell-text:#111827;
  --mf-shell-muted:#6b7280;
}

html[data-mfe-theme="custom"]{
  --mf-shell-accent:var(--mfe-custom-primary,#22c55e);
  --mf-shell-accent-dark:var(--mfe-custom-primary-dark,#16a34a);
  --mf-shell-accent-rgb:var(--mfe-custom-primary-rgb,34,197,94);
  --mf-shell-text:#eef3f9;
  --mf-shell-muted:#9cb0c7;
}

.sidebar,.side{
  border:1px solid var(--mf-shell-line);
  background:linear-gradient(180deg,var(--mf-shell-surface-start),var(--mf-shell-surface-end));
  box-shadow:var(--mf-shell-shadow);
  color:var(--mf-shell-text);
  backdrop-filter:blur(12px);
}
.sidebar .brand,.side .brand{
  background:linear-gradient(135deg,var(--mf-shell-accent),var(--mf-shell-accent-dark));
  box-shadow:0 12px 24px rgba(var(--mf-shell-accent-rgb),.22);
}
.sidebar .brand img,.side .brand img{display:block;object-fit:cover;background:transparent}
.sidebar .nav-item,.side .nav-item{
  position:relative;
  border:1px solid var(--mf-shell-item-border);
  background:var(--mf-shell-item-bg);
  color:var(--mf-shell-text);
  text-decoration:none;
  font-weight:800;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
.sidebar .nav-item.active,.side .nav-item.active{
  border-color:rgba(var(--mf-shell-accent-rgb),.24);
  background:linear-gradient(180deg,rgba(var(--mf-shell-accent-rgb),.18),rgba(var(--mf-shell-accent-rgb),.10));
  box-shadow:inset 0 0 0 1px rgba(var(--mf-shell-accent-rgb),.12);
}
.sidebar .account,.side .account{
  border:1px solid var(--mf-shell-item-border);
  background:var(--mf-shell-item-bg);
  color:var(--mf-shell-text);
}
.sidebar .account-secondary,.side .account-secondary{color:var(--mf-shell-muted)}
.sidebar .account-link,.side .account-link{
  border:1px solid rgba(var(--mf-shell-accent-rgb),.18);
  background:rgba(var(--mf-shell-accent-rgb),.10);
  color:var(--mf-shell-text);
}
.sidebar .logout,.side .logout{
  border:1px solid var(--mf-shell-action-border);
  background:var(--mf-shell-action-bg);
  color:var(--mf-shell-text);
}
.sidebar .mobile-nav-toggle,.side .mobile-nav-toggle,
.sidebar .mobile-account-button,.side .mobile-account-button{
  border:1px solid var(--mf-shell-action-border);
  background:var(--mf-shell-action-bg);
  color:var(--mf-shell-text);
  box-shadow:0 10px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
  text-decoration:none;
}
@media (hover:hover){
  .sidebar .nav-item:hover,.side .nav-item:hover{background:var(--mf-shell-item-hover);transform:translateY(-1px)}
  .sidebar .nav-item.active:hover,.side .nav-item.active:hover{
    border-color:rgba(var(--mf-shell-accent-rgb),.30);
    background:linear-gradient(180deg,rgba(var(--mf-shell-accent-rgb),.22),rgba(var(--mf-shell-accent-rgb),.14));
  }
  .sidebar .account-link:hover,.side .account-link:hover{
    border-color:rgba(var(--mf-shell-accent-rgb),.28);
    background:rgba(var(--mf-shell-accent-rgb),.16);
  }
  .sidebar .mobile-nav-toggle:hover,.side .mobile-nav-toggle:hover,
  .sidebar .mobile-account-button:hover,.side .mobile-account-button:hover{
    border-color:rgba(var(--mf-shell-accent-rgb),.30);
    background:rgba(var(--mf-shell-accent-rgb),.14);
  }
}

@media (min-width:761px){
  .app{
    display:grid;
    grid-template-columns:var(--mf-shell-sidebar-width) minmax(0,1fr);
    gap:var(--mf-shell-desktop-inset);
    padding:var(--mf-shell-desktop-inset);
    width:100%;
    max-width:100vw;
    min-width:0;
    box-sizing:border-box;
  }
  .sidebar,.side{
    position:sticky;
    z-index:120;
    top:var(--mf-shell-desktop-inset);
    left:auto;
    width:var(--mf-shell-sidebar-width);
    min-width:var(--mf-shell-sidebar-width);
    max-width:var(--mf-shell-sidebar-width);
    height:calc(100dvh - (var(--mf-shell-desktop-inset) * 2));
    min-height:0;
    max-height:calc(100dvh - (var(--mf-shell-desktop-inset) * 2));
    box-sizing:border-box;
    padding:var(--mf-shell-sidebar-pad-y) var(--mf-shell-sidebar-pad-x);
    gap:var(--mf-shell-sidebar-gap);
    display:flex;
    flex-direction:column;
    align-items:center;
    align-self:start;
    overflow:hidden;
    border-radius:var(--mf-shell-sidebar-radius);
  }
  .sidebar .brand,.side .brand{
    width:var(--mf-shell-brand-size);height:var(--mf-shell-brand-size);
    min-width:var(--mf-shell-brand-size);min-height:var(--mf-shell-brand-size);
    max-width:var(--mf-shell-brand-size);max-height:var(--mf-shell-brand-size);
    border-radius:var(--mf-shell-brand-radius);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden;
  }
  .sidebar .brand img,.side .brand img{width:100%;height:100%;border-radius:inherit}
  .sidebar .mobile-nav-toggle,.side .mobile-nav-toggle,
  .sidebar .mobile-account-button,.side .mobile-account-button{display:none}
  .sidebar .nav,.side .nav{
    width:100%;min-width:0;min-height:0;flex:1 1 auto;display:grid;
    grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:var(--mf-shell-nav-item-height);
    align-content:start;gap:var(--mf-shell-nav-gap);margin:0;padding:0;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--mf-shell-scroll-thumb) var(--mf-shell-scroll-track);
  }
  .sidebar .nav::-webkit-scrollbar,.side .nav::-webkit-scrollbar{width:4px}
  .sidebar .nav::-webkit-scrollbar-track,.side .nav::-webkit-scrollbar-track{background:var(--mf-shell-scroll-track)}
  .sidebar .nav::-webkit-scrollbar-thumb,.side .nav::-webkit-scrollbar-thumb{background:var(--mf-shell-scroll-thumb);border-radius:999px}
  .sidebar .nav::-webkit-scrollbar-thumb:hover,.side .nav::-webkit-scrollbar-thumb:hover{background:var(--mf-shell-scroll-thumb-hover)}
  .sidebar .nav-item,.side .nav-item{
    width:100%;height:var(--mf-shell-nav-item-height);min-height:var(--mf-shell-nav-item-height);max-height:var(--mf-shell-nav-item-height);
    box-sizing:border-box;padding:8px 6px;gap:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:var(--mf-shell-nav-radius);font-size:var(--mf-shell-nav-font-size);line-height:1.08;text-align:center;overflow:visible;
  }
  .sidebar .nav-icon,.side .nav-icon{width:24px;height:24px;display:grid;place-items:center;line-height:1;flex:0 0 24px;color:var(--mf-shell-muted)}
  .sidebar .nav-icon .mf-nav-icon-svg,.side .nav-icon .mf-nav-icon-svg{width:22px;height:22px;display:block;overflow:visible;pointer-events:none}
  .sidebar .nav-item.active .nav-icon,.side .nav-item.active .nav-icon{color:var(--mf-shell-accent)}
  .sidebar .nav-item>div:last-child,.side .nav-item>div:last-child{
    display:block;max-width:100%;line-height:1.08;white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  }
  .sidebar .sidebar-spacer,.side .sidebar-spacer{display:none}
  .sidebar .account,.side .account{
    width:100%;min-width:0;box-sizing:border-box;margin-top:0;flex:0 0 auto;padding:10px 9px;gap:var(--mf-shell-account-gap);
    display:grid;align-content:start;text-align:center;overflow:hidden;border-radius:var(--mf-shell-account-radius);
  }
  .sidebar .account-primary,.side .account-primary{
    min-height:13px;max-width:100%;margin:0;font-size:11px;font-weight:800;line-height:13px;overflow-wrap:anywhere;word-break:break-word;
  }
  .sidebar .account-secondary,.side .account-secondary{
    min-height:12px;max-width:100%;margin:0;font-size:10px;line-height:12px;overflow-wrap:anywhere;
  }
  .sidebar .account-actions,.side .account-actions{width:100%;display:grid;gap:8px}
  .sidebar .account-link,.side .account-link,
  .sidebar .logout,.side .logout{
    width:100%;height:var(--mf-shell-account-action-height);min-height:var(--mf-shell-account-action-height);max-height:var(--mf-shell-account-action-height);
    box-sizing:border-box;margin:0;border-radius:12px;font-size:12px;font-weight:800;
  }
  .sidebar .account-link,.side .account-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
  .sidebar .logout,.side .logout{cursor:pointer}
}

@media (max-width:760px){
  .app{
    display:block;width:100%;max-width:100vw;min-width:0;height:auto;min-height:100svh;
    padding:8px;box-sizing:border-box;overflow:visible;
  }
  .sidebar,.side{
    position:sticky;top:8px;left:auto;z-index:120;width:100%;min-width:0;max-width:100%;height:auto;min-height:0;max-height:none;
    box-sizing:border-box;padding:8px;gap:8px;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;grid-template-rows:42px auto;
    align-items:center;align-content:start;overflow:visible;border-radius:22px;
  }
  .sidebar:has(.mobile-account-button),.side:has(.mobile-account-button){grid-template-columns:42px minmax(0,1fr) 42px 42px}
  .sidebar .brand,.side .brand{
    grid-column:1;grid-row:1;width:42px;height:42px;min-width:42px;min-height:42px;max-width:42px;max-height:42px;
    border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .sidebar .brand img,.side .brand img{width:100%;height:100%;border-radius:inherit}
  .sidebar .mobile-nav-toggle,.side .mobile-nav-toggle{
    grid-column:3;grid-row:1;justify-self:end;display:flex;width:42px;height:42px;min-width:42px;min-height:42px;
    padding:0;border-radius:14px;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:900;cursor:pointer;
  }
  .sidebar:has(.mobile-account-button) .mobile-nav-toggle,.side:has(.mobile-account-button) .mobile-nav-toggle{grid-column:4}
  .sidebar .mobile-account-button,.side .mobile-account-button{
    grid-column:3;grid-row:1;justify-self:end;display:flex;width:42px;height:42px;min-width:42px;min-height:42px;
    padding:0;border-radius:14px;align-items:center;justify-content:center;font-size:14px;line-height:1;font-weight:900;overflow:hidden;
  }
  .sidebar .mobile-account-button span,.side .mobile-account-button span{display:flex;width:100%;height:100%;align-items:center;justify-content:center}
  .sidebar.mobile-open .mobile-nav-toggle,.side.mobile-open .mobile-nav-toggle{
    border-color:rgba(var(--mf-shell-accent-rgb),.34);background:rgba(var(--mf-shell-accent-rgb),.16);
  }
  .sidebar .account,.side .account,.sidebar .sidebar-spacer,.side .sidebar-spacer{display:none}
  .sidebar .nav,.side .nav{
    grid-column:1/-1;grid-row:2;display:none;width:100%;min-width:0;height:auto;min-height:0;max-height:calc(100dvh - 86px);
    margin:0;padding:8px 0 2px;gap:var(--mf-shell-nav-gap);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--mf-shell-scroll-thumb) var(--mf-shell-scroll-track);
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;align-content:start;
  }
  .sidebar.mobile-open .nav,.side.mobile-open .nav{display:grid}
  .sidebar .nav::-webkit-scrollbar,.side .nav::-webkit-scrollbar{width:4px}
  .sidebar .nav::-webkit-scrollbar-track,.side .nav::-webkit-scrollbar-track{background:var(--mf-shell-scroll-track)}
  .sidebar .nav::-webkit-scrollbar-thumb,.side .nav::-webkit-scrollbar-thumb{background:var(--mf-shell-scroll-thumb);border-radius:999px}
  .sidebar .nav-item,.side .nav-item{
    width:100%;min-width:0;height:auto;min-height:48px;max-height:none;box-sizing:border-box;padding:8px 9px;gap:8px;
    display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;justify-content:start;text-align:left;
    border-radius:15px;font-size:11px;line-height:1.12;overflow:visible;
  }
  .sidebar .nav-icon,.side .nav-icon{width:22px;height:22px;display:grid;place-items:center;line-height:1;flex:0 0 22px;color:var(--mf-shell-muted)}
  .sidebar .nav-icon .mf-nav-icon-svg,.side .nav-icon .mf-nav-icon-svg{width:20px;height:20px;display:block;overflow:visible;pointer-events:none}
  .sidebar .nav-item.active .nav-icon,.side .nav-item.active .nav-icon{color:var(--mf-shell-accent)}
  .sidebar .nav-item>div:last-child,.side .nav-item>div:last-child{line-height:1.12;overflow-wrap:anywhere;word-break:break-word}
}