/* EVOX Design Freeze Phase 2 — Navigation & Page Shell */
:root{
  --evox-header-h:72px;
  --evox-sidebar-w:276px;
  --evox-sidebar-collapsed-w:82px;
  --evox-bottom-nav-h:72px;
  --evox-shell-gutter:clamp(16px,2.2vw,32px);
  --evox-shell-max:1600px;
  --evox-z-header:900;
  --evox-z-sidebar:850;
  --evox-z-mobile-nav:950;
  --evox-z-overlay:840;
}

html.evox-nav-open,
html.evox-sidebar-open{overflow:hidden}

body.evox-shell-ready{
  min-height:100vh;
  padding-top:var(--evox-header-h);
}

.evox-app-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--evox-z-header);
  height:var(--evox-header-h);
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--evox-border,#dfe5ec);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.evox-app-header__inner{
  width:min(100% - 32px,var(--evox-shell-max));
  height:100%;
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
}

.evox-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--evox-text,#172033);
  text-decoration:none;
}

.evox-brand__mark{
  width:38px;
  height:38px;
  object-fit:contain;
  flex:0 0 auto;
}

.evox-brand__name{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

.evox-main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.evox-main-nav__list{
  display:flex;
  align-items:center;
  gap:4px;
  list-style:none;
  margin:0;
  padding:0;
}

.evox-main-nav__link{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 12px;
  border-radius:10px;
  color:var(--evox-text-muted,#667085);
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  white-space:nowrap;
  transition:background var(--evox-transition,160ms ease),color var(--evox-transition,160ms ease);
}

.evox-main-nav__link:hover,
.evox-main-nav__link[aria-current="page"]{
  color:var(--evox-primary,#163a5f);
  background:var(--evox-primary-soft,#eaf1f8);
}

.evox-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.evox-nav-toggle,
.evox-sidebar-toggle{
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid var(--evox-border,#dfe5ec);
  border-radius:12px;
  background:var(--evox-surface,#fff);
  color:var(--evox-text,#172033);
  cursor:pointer;
}

.evox-nav-toggle__icon,
.evox-sidebar-toggle__icon{
  width:20px;
  height:14px;
  position:relative;
  display:block;
}

.evox-nav-toggle__icon::before,
.evox-nav-toggle__icon::after,
.evox-nav-toggle__icon span,
.evox-sidebar-toggle__icon::before,
.evox-sidebar-toggle__icon::after,
.evox-sidebar-toggle__icon span{
  content:"";
  position:absolute;
  right:0;
  width:100%;
  height:2px;
  border-radius:999px;
  background:currentColor;
}

.evox-nav-toggle__icon::before,
.evox-sidebar-toggle__icon::before{top:0}
.evox-nav-toggle__icon span,
.evox-sidebar-toggle__icon span{top:6px}
.evox-nav-toggle__icon::after,
.evox-sidebar-toggle__icon::after{top:12px}

.evox-page-layout{
  width:min(100% - (2 * var(--evox-shell-gutter)),var(--evox-shell-max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  padding-block:24px 48px;
}

.evox-page-layout--admin{
  grid-template-columns:var(--evox-sidebar-w) minmax(0,1fr);
  align-items:start;
}

.evox-app-sidebar{
  position:sticky;
  top:calc(var(--evox-header-h) + 18px);
  max-height:calc(100vh - var(--evox-header-h) - 36px);
  overflow:auto;
  padding:12px;
  background:var(--evox-surface,#fff);
  border:1px solid var(--evox-border,#dfe5ec);
  border-radius:18px;
  box-shadow:var(--evox-shadow-sm,0 1px 2px rgba(16,24,40,.05));
  scrollbar-width:thin;
}

.evox-sidebar__title{
  margin:4px 8px 10px;
  color:var(--evox-text-muted,#667085);
  font-size:.78rem;
  font-weight:700;
}

.evox-sidebar__list{
  display:flex;
  flex-direction:column;
  gap:3px;
  list-style:none;
  margin:0;
  padding:0;
}

.evox-sidebar__link{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border-radius:11px;
  color:var(--evox-text-muted,#667085);
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
}

.evox-sidebar__link:hover,
.evox-sidebar__link[aria-current="page"]{
  background:var(--evox-primary-soft,#eaf1f8);
  color:var(--evox-primary,#163a5f);
}

.evox-sidebar__icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--evox-surface-strong,#eef2f7);
  font-size:.72rem;
  font-weight:800;
}

.evox-page-main{min-width:0}

.evox-page-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}

.evox-page-heading__content{min-width:0}
.evox-page-title{
  margin:0;
  font-size:clamp(1.45rem,2.6vw,2rem);
  line-height:1.3;
  color:var(--evox-text,#172033);
}
.evox-page-subtitle{
  margin:7px 0 0;
  color:var(--evox-text-muted,#667085);
  font-size:.95rem;
}
.evox-page-heading__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.evox-breadcrumb{
  margin-bottom:12px;
  color:var(--evox-text-muted,#667085);
  font-size:.84rem;
}
.evox-breadcrumb__list{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  list-style:none;
  margin:0;
  padding:0;
}
.evox-breadcrumb__item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.evox-breadcrumb__item:not(:last-child)::after{
  content:"/";
  color:var(--evox-text-subtle,#98a2b3);
}
.evox-breadcrumb a{
  color:inherit;
  text-decoration:none;
}
.evox-breadcrumb a:hover{color:var(--evox-primary,#163a5f)}

.evox-content-frame{
  min-width:0;
  background:transparent;
}

.evox-mobile-drawer{
  position:fixed;
  inset:var(--evox-header-h) 0 0 auto;
  z-index:var(--evox-z-header);
  width:min(88vw,360px);
  padding:14px;
  background:var(--evox-surface,#fff);
  border-left:1px solid var(--evox-border,#dfe5ec);
  box-shadow:-18px 0 46px rgba(16,24,40,.14);
  transform:translateX(105%);
  transition:transform 220ms ease;
  overflow:auto;
}

html.evox-nav-open .evox-mobile-drawer{transform:translateX(0)}

.evox-mobile-drawer__list{
  display:flex;
  flex-direction:column;
  gap:5px;
  list-style:none;
  margin:0;
  padding:0;
}

.evox-mobile-drawer__link{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  color:var(--evox-text,#172033);
  text-decoration:none;
  font-weight:600;
}

.evox-mobile-drawer__link:hover,
.evox-mobile-drawer__link[aria-current="page"]{
  background:var(--evox-primary-soft,#eaf1f8);
  color:var(--evox-primary,#163a5f);
}

.evox-shell-overlay{
  position:fixed;
  inset:var(--evox-header-h) 0 0;
  z-index:var(--evox-z-overlay);
  border:0;
  background:rgba(15,23,42,.45);
  opacity:0;
  visibility:hidden;
  transition:opacity 180ms ease,visibility 180ms ease;
}

html.evox-nav-open .evox-shell-overlay,
html.evox-sidebar-open .evox-shell-overlay{
  opacity:1;
  visibility:visible;
}

.evox-mobile-bottom-nav{
  display:none;
  position:fixed;
  left:10px;
  right:10px;
  bottom:max(8px,env(safe-area-inset-bottom));
  z-index:var(--evox-z-mobile-nav);
  min-height:var(--evox-bottom-nav-h);
  padding:7px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--evox-border,#dfe5ec);
  border-radius:18px;
  box-shadow:0 16px 44px rgba(16,24,40,.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.evox-mobile-bottom-nav__list{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:3px;
  list-style:none;
  margin:0;
  padding:0;
}

.evox-mobile-bottom-nav__link{
  min-width:0;
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:4px;
  border-radius:12px;
  color:var(--evox-text-muted,#667085);
  text-decoration:none;
  font-size:.68rem;
  font-weight:600;
}

.evox-mobile-bottom-nav__link[aria-current="page"],
.evox-mobile-bottom-nav__link:hover{
  background:var(--evox-primary-soft,#eaf1f8);
  color:var(--evox-primary,#163a5f);
}

.evox-mobile-bottom-nav__icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  font-size:.75rem;
  font-weight:800;
}

@media (max-width:1100px){
  .evox-main-nav{display:none}
  .evox-nav-toggle{display:inline-flex}
  .evox-app-header__inner{grid-template-columns:auto 1fr auto}
  .evox-brand{justify-self:start}
}

@media (max-width:900px){
  body.evox-shell-ready{
    padding-top:64px;
    padding-bottom:calc(var(--evox-bottom-nav-h) + 24px);
  }
  :root{--evox-header-h:64px}
  .evox-app-header__inner{width:min(100% - 20px,var(--evox-shell-max));gap:10px}
  .evox-brand__name{display:none}
  .evox-brand__mark{width:34px;height:34px}
  .evox-page-layout,
  .evox-page-layout--admin{
    width:min(100% - 20px,var(--evox-shell-max));
    grid-template-columns:minmax(0,1fr);
    padding-top:16px;
  }
  .evox-sidebar-toggle{display:inline-flex}
  .evox-app-sidebar{
    position:fixed;
    top:var(--evox-header-h);
    right:0;
    bottom:0;
    z-index:var(--evox-z-sidebar);
    width:min(88vw,var(--evox-sidebar-w));
    max-height:none;
    border-radius:0;
    border-top:0;
    border-bottom:0;
    transform:translateX(105%);
    transition:transform 220ms ease;
  }
  html.evox-sidebar-open .evox-app-sidebar{transform:translateX(0)}
  .evox-page-heading{flex-direction:column}
  .evox-page-heading__actions{width:100%}
  .evox-mobile-bottom-nav{display:block}
}

@media (max-width:600px){
  .evox-page-layout,
  .evox-page-layout--admin{width:min(100% - 16px,var(--evox-shell-max))}
  .evox-page-heading__actions>.evox-btn,
  .evox-page-heading__actions>.btn{flex:1 1 100%}
  .evox-header-actions .evox-btn:not(.evox-btn--icon){display:none}
  .evox-mobile-drawer{width:min(92vw,360px)}
}

@media (prefers-reduced-motion:reduce){
  .evox-mobile-drawer,
  .evox-app-sidebar,
  .evox-shell-overlay{transition:none!important}
}

@media print{
  body.evox-shell-ready{padding:0}
  .evox-app-header,
  .evox-app-sidebar,
  .evox-mobile-drawer,
  .evox-shell-overlay,
  .evox-mobile-bottom-nav{display:none!important}
  .evox-page-layout,
  .evox-page-layout--admin{
    width:100%;
    display:block;
    padding:0;
  }
}