/* Modern off-canvas navigation shell. Navigation logic remains in country-nav.js. */
:root{
  --nav-bg:#fbfcfe;
  --nav-panel:#ffffff;
  --nav-text:#24364f;
  --nav-muted:#7b8799;
  --nav-border:#e6ebf2;
  --nav-hover:#f2f6fb;
  --nav-active:#eaf3ff;
  --nav-active-text:#0d4f9f;
  --nav-active-line:#2f78d2;
  --nav-shadow:0 24px 70px rgba(15,31,58,.24),0 2px 10px rgba(15,31,58,.08);
}

body.menu-open{overflow:hidden}
.tracker-shell{display:block!important}
.workspace{min-height:100vh;margin-left:0!important}
.category-full-tracker{height:100vh!important}

/* Hamburger trigger */
.menu-toggle{
  position:fixed;
  top:14px;
  left:14px;
  z-index:120;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border:1px solid rgba(203,214,228,.95);
  border-radius:13px;
  background:rgba(255,255,255,.94);
  color:#294968;
  font-size:0;
  line-height:1;
  box-shadow:0 10px 30px rgba(15,35,70,.12),0 1px 3px rgba(15,35,70,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.menu-toggle::before{
  content:"";
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;
}
.menu-toggle:hover{
  transform:translateY(-1px);
  border-color:#bfd0e4;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,35,70,.16),0 1px 3px rgba(15,35,70,.06);
}
.menu-toggle:active{transform:translateY(0) scale(.97)}
.menu-toggle:focus-visible,.menu-close:focus-visible,.nav-item:focus-visible,.nav-area>summary:focus-visible,.nav-subgroup>summary:focus-visible,.deadline-group-btn:focus-visible,.nav-tool-btn:focus-visible,.arrange-arrow:focus-visible,.arrange-select:focus-visible{
  outline:3px solid rgba(47,120,210,.20);
  outline-offset:2px;
}

/* Backdrop */
.menu-backdrop{
  position:fixed;
  inset:0;
  z-index:108;
  background:rgba(10,22,40,.38);
  opacity:0;
  pointer-events:none;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  transition:opacity .2s ease;
}
.menu-backdrop.is-open{opacity:1;pointer-events:auto}

/* Floating drawer */
.app-sidebar{
  position:fixed!important;
  inset:10px auto 10px 10px;
  z-index:110;
  display:flex;
  flex-direction:column;
  width:min(366px,calc(100vw - 20px))!important;
  min-height:0!important;
  max-height:calc(100vh - 20px);
  overflow:hidden!important;
  padding:0!important;
  border:1px solid rgba(215,224,235,.95)!important;
  border-radius:20px;
  background:var(--nav-bg)!important;
  box-shadow:var(--nav-shadow);
  transform:translateX(calc(-100% - 20px));
  transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.app-sidebar.is-open{transform:translateX(0)}

/* Sticky drawer header */
.sidebar-brand{
  position:relative;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  flex:0 0 auto;
  padding:18px 16px 15px!important;
  border-bottom:1px solid var(--nav-border)!important;
  background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}
.sidebar-brand::before{
  content:"✦";
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border:1px solid #d6e4f5;
  border-radius:11px;
  background:linear-gradient(145deg,#eef6ff,#fff);
  color:#2569bd;
  font-size:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 4px 12px rgba(32,86,150,.08);
}
.sidebar-brand-copy{min-width:0;flex:1}
.sidebar-brand-copy .eyebrow{
  margin:0 0 2px!important;
  color:#8a95a6!important;
  font-size:.62rem!important;
  font-weight:850!important;
  letter-spacing:.11em!important;
}
.sidebar-brand h1{
  margin:0!important;
  color:#102a4e!important;
  font-size:1.28rem!important;
  font-weight:850!important;
  letter-spacing:-.035em!important;
  line-height:1.12;
}
.menu-close{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#68788f;
  font-size:21px;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.menu-close:hover{border-color:#e1e7ef;background:#f3f6fa;color:#263f5e}

/* Scrollable content */
.sidebar-nav{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:12px 10px 20px!important;
  scrollbar-width:thin;
  scrollbar-color:#c9d3df transparent;
}
.sidebar-nav::-webkit-scrollbar{width:8px}
.sidebar-nav::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:#c9d3df;background-clip:padding-box}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}

/* Top-level navigation areas */
.nav-area{
  margin:0 0 8px;
  border:0;
  border-radius:13px;
  background:transparent;
  overflow:visible;
}
.nav-area>summary{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:43px;
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:11px;
  color:#263d5b;
  font-size:.82rem;
  font-weight:880;
  letter-spacing:-.005em;
  cursor:pointer;
  list-style:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.nav-area>summary::-webkit-details-marker,.nav-subgroup>summary::-webkit-details-marker{display:none}
.nav-area>summary::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#9aabc0;
  box-shadow:0 0 0 4px rgba(154,171,192,.10);
}
.nav-area[data-nav-area="Explore"]>summary::before{background:#2f78d2;box-shadow:0 0 0 4px rgba(47,120,210,.10)}
.nav-area[data-nav-area="Deadline"]>summary::before{background:#d58a16;box-shadow:0 0 0 4px rgba(213,138,22,.10)}
.nav-area[data-nav-area="Removed"]>summary::before{background:#b35a64;box-shadow:0 0 0 4px rgba(179,90,100,.10)}
.nav-area>summary:hover{border-color:#e6ebf2;background:#f5f8fc}
.nav-area[open]>summary{border-color:#e2e9f2;background:#f7f9fc;color:#16385f}
.nav-area:has(.is-active)>summary{color:#0d4f9f}
.area-chevron{
  margin-left:auto;
  color:#8896a9;
  font-size:16px;
  font-weight:800;
  transition:transform .16s ease,color .16s ease;
}
.nav-area[open] .area-chevron{transform:rotate(180deg);color:#55708f}

/* Arrange tools */
.nav-tools{
  display:flex;
  gap:7px;
  padding:5px 6px 7px 22px;
}
.nav-tool-btn{
  padding:6px 9px;
  border:1px solid #d7e0ea;
  border-radius:8px;
  background:#fff;
  color:#3d5a79;
  font-size:.68rem;
  font-weight:820;
  box-shadow:0 1px 2px rgba(15,35,70,.03);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.nav-tool-btn:hover{border-color:#c5d4e6;background:#f7faff;color:#174c88}
.nav-tool-btn.subtle{border-color:transparent;background:transparent;color:#8a95a6;box-shadow:none}
.nav-tool-btn.subtle:hover{background:#f1f4f8;color:#5f6f83}

/* Collapsible scholarship groups: flatter hierarchy, fewer nested boxes */
.nav-subgroup{
  margin:4px 0 8px 18px;
  border:0;
  border-left:1px solid #e5eaf1;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.nav-subgroup>summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 8px 7px 12px;
  color:#718096;
  font-size:.69rem;
  font-weight:820;
  cursor:pointer;
  list-style:none;
  transition:color .15s ease,background .15s ease;
}
.nav-subgroup>summary::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .16s ease;
}
.nav-subgroup[open]>summary::before{transform:rotate(45deg)}
.nav-subgroup>summary:hover{background:#f5f7fa;color:#4b607a}
.nav-subgroup[open]>summary{background:transparent;color:#556a84}
.nav-sub-count{
  margin-left:auto;
  min-width:22px;
  padding:2px 6px;
  border-radius:999px;
  background:#eef2f6;
  color:#718096;
  font-size:.61rem;
  font-weight:850;
  text-align:center;
}
.nav-subgroup-body{padding:2px 3px 3px 7px}

/* Scholarship / country items */
.nav-item{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:9px;
  width:100%!important;
  min-height:39px;
  margin:2px 0!important;
  padding:7px 9px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#46566e!important;
  font-size:.76rem!important;
  font-weight:760!important;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease;
}
.nav-item:hover{
  border-color:#e8edf3!important;
  background:var(--nav-hover)!important;
  color:#1f3e64!important;
  transform:translateX(1px);
}
.nav-item.is-active{
  border-color:#d2e2f5!important;
  background:var(--nav-active)!important;
  color:var(--nav-active-text)!important;
  box-shadow:inset 3px 0 0 var(--nav-active-line);
}
.nav-icon{
  display:grid!important;
  width:27px!important;
  height:27px!important;
  flex:0 0 27px!important;
  place-items:center;
  border:0!important;
  border-radius:8px!important;
  background:#f4f6f9!important;
  font-size:.92rem!important;
  box-shadow:inset 0 0 0 1px rgba(218,225,234,.75);
}
.nav-item.is-active .nav-icon{background:#fff!important;box-shadow:inset 0 0 0 1px #d4e3f5}
.nav-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-count{
  margin-left:auto;
  min-width:21px;
  padding:2px 6px;
  border-radius:999px;
  background:#eef1f5;
  color:#7c8797;
  font-size:.6rem;
  font-weight:850;
  text-align:center;
}
.nav-item.is-active .nav-count{background:#dceaff;color:#17549b}

/* Deadline group shortcuts */
.deadline-group-btn{
  display:flex;
  align-items:center;
  gap:9px;
  width:calc(100% - 24px);
  min-height:41px;
  margin:4px 8px 5px 16px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#46566e;
  font-size:.75rem;
  font-weight:780;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.deadline-group-btn>span:first-child{
  display:grid;
  width:27px;
  height:27px;
  flex:0 0 27px;
  place-items:center;
  border-radius:8px;
  background:#fff7e8;
  box-shadow:inset 0 0 0 1px #f1dfbf;
  font-size:.82rem;
}
.deadline-group-btn:hover{border-color:#e7ebf1;background:#f5f8fb;color:#1f3e64}
.deadline-group-btn.is-active{border-color:#d2e2f5;background:var(--nav-active);color:var(--nav-active-text);box-shadow:inset 3px 0 0 var(--nav-active-line)}
.deadline-group-btn .nav-sub-count{margin-left:auto}

/* Arrange mode */
.arrange-row{
  display:grid;
  grid-template-columns:27px minmax(0,1fr) 30px 30px;
  gap:6px;
  align-items:center;
  margin:3px 0;
  padding:7px;
  border:1px solid #e6ebf2;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px rgba(15,35,70,.025);
}
.arrange-name{
  min-width:0;
  color:#42546d;
  font-size:.72rem;
  font-weight:760;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.arrange-arrow{
  width:30px;
  height:30px;
  border:1px solid #d8e0ea;
  border-radius:8px;
  background:#f9fbfd;
  color:#47627f;
  font-weight:900;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.arrange-arrow:hover{border-color:#c5d5e7;background:#eef5fd;color:#1d5b9f}
.arrange-select{
  grid-column:2/5;
  width:100%;
  padding:7px 8px;
  border:1px solid #d8e0ea;
  border-radius:8px;
  background:#fff;
  color:#596a80;
  font-size:.68rem;
  outline:none;
}
.arrange-select:focus{border-color:#90afd2;box-shadow:0 0 0 3px rgba(47,120,210,.10)}

@media(max-width:820px){
  .category-full-tracker{height:100vh!important;min-height:650px}
  .menu-toggle{top:10px;left:10px;width:42px;height:42px;border-radius:12px}
  .app-sidebar{inset:6px auto 6px 6px;width:min(350px,calc(100vw - 12px))!important;max-height:calc(100vh - 12px);border-radius:17px}
  .sidebar-brand{padding:16px 14px 14px!important}
  .sidebar-nav{padding:10px 8px 18px!important}
}

@media(prefers-reduced-motion:reduce){
  .app-sidebar,.menu-backdrop,.menu-toggle,.nav-item,.area-chevron,.nav-subgroup>summary::before{transition:none!important}
}