/* G8Code V4.2 — unified active icon + label colors, preserved responsive FAB size.
   One selected page at a time. Tapping the FAB from other student pages opens
   My Projects; tapping it again inside My Projects uses the existing New Project flow. */

@media (max-width:760px) {
  #studentHomeScreen .g8-mobile-nav,
  #studentDashboard .g8-mobile-nav,
  :is(#lessonViewerScreen,#givenActivitiesScreen).is-learning-student .g8-mobile-nav {
    /* Let the central action hover over the top border instead of clipping. */
    --g8-nav-blue:var(--sh-accent,#295bd6);
    --g8-nav-ink:var(--sh-secondary,#61718b);
    --g8-nav-surface:var(--sh-card,#fff);
    --g8-nav-line:var(--sh-border,#e3e9f2);
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    gap:0!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    min-height:calc(71px + env(safe-area-inset-bottom))!important;
    padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right))!important;
    background:var(--g8-nav-surface)!important;
    border-top:1px solid var(--g8-nav-line)!important;
    box-shadow:0 -7px 22px rgba(20,39,75,.09)!important;
    /* Fixed nav must remain visible on phone while leaving content above. */
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    z-index:90!important;
  }
  :is(#lessonViewerScreen,#givenActivitiesScreen).is-learning-student .g8-mobile-nav {
    --g8-nav-blue:var(--ls-accent,#295bd6);
    --g8-nav-ink:var(--ls-muted,#61718b);
    --g8-nav-surface:var(--ls-card,#fff);
    --g8-nav-line:var(--ls-border,#e3e9f2);
  }
  #studentHomeScreen .g8-mobile-nav .g8-nav-item,
  #studentDashboard .g8-mobile-nav .g8-nav-item,
  :is(#lessonViewerScreen,#givenActivitiesScreen) .g8-mobile-nav .g8-nav-item {
    box-sizing:border-box!important;
    position:relative;
    z-index:1;
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:100%;
    min-width:0;
    height:54px;
    min-height:54px;
    margin:0;
    padding:4px 0;
    border:0!important;
    border-radius:12px;
    background:transparent;
    color:var(--g8-nav-ink);
    font:inherit;
    text-align:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .g8-mobile-nav .g8-nav-item .g8-nav-icon {
    display:grid;
    place-items:center;
    flex:none;
    width:24px;
    height:24px;
    line-height:1;
    font-size:0!important;
  }
  .g8-mobile-nav .g8-nav-item .g8-nav-icon svg {
    display:block;
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none;
  }
  .g8-mobile-nav .g8-nav-item small {
    display:block;
    max-width:100%;
    margin:0;
    padding:0 1px;
    color:inherit;
    font-size:clamp(9px,2.5vw,10px)!important;
    line-height:1.1;
    font-weight:730;
    white-space:normal;
    text-align:center;
  }
  /* All five tabs: BOTH label and icon follow the actual current page.
     ID-level specificity overrides older page-specific icon/text color rules. */
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav .g8-nav-item:not(.is-active) {
    color:var(--g8-nav-ink)!important;
  }
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav .g8-nav-item.is-active {
    color:var(--g8-nav-blue)!important;
  }
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav .g8-nav-item small {
    color:inherit!important;
  }
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav .g8-nav-item:not(.g8-nav-projects) .g8-nav-icon {
    color:inherit!important;
  }
  /* FAB is physically lifted above the bar, with its label still below it. */
  #studentHomeScreen .g8-mobile-nav .g8-nav-projects,
  #studentDashboard .g8-mobile-nav .g8-nav-projects,
  :is(#lessonViewerScreen,#givenActivitiesScreen) .g8-mobile-nav .g8-nav-projects {
    z-index:3;
    background:transparent!important;
    color:var(--g8-nav-ink)!important;
    overflow:visible!important;
    justify-content:flex-end!important;
    gap:0!important;
    padding:0 0 4px!important;
    isolation:isolate;
  }
  .g8-mobile-nav .g8-nav-projects .g8-nav-icon {
    box-sizing:border-box;
    position:absolute;
    top:-26px;
    left:50%;
    transform:translateX(-50%);
    width:57px;
    height:57px;
    border-radius:50%;
    border:4px solid var(--g8-nav-surface);
    /* A neutral but still visible floating action on non-Projects pages. */
    background:linear-gradient(145deg,#8995a7,#647186);
    color:#fff;
    box-shadow:0 7px 18px rgba(47,62,87,.21),0 2px 5px rgba(9,24,56,.1);
    transition:background .16s ease,box-shadow .16s ease,top .16s ease;
  }
  /* Subtly shrink the raised + while another tab is selected.
     Do not change its anchor point, tap-target, label or click handler. */
  .g8-mobile-nav .g8-nav-projects:not(.is-active) .g8-nav-icon {
    width:50px;
    height:50px;
    top:-22px;
    border-width:3px;
  }
  .g8-mobile-nav .g8-nav-projects:not(.is-active) .g8-nav-icon svg {
    width:25px;
    height:25px;
  }
  .g8-mobile-nav .g8-nav-projects .g8-nav-icon svg {
    width:29px;
    height:29px;
    stroke-width:2.8;
  }
  .g8-mobile-nav .g8-nav-projects small {
    color:var(--g8-nav-ink)!important;
    margin-top:38px!important;
    padding-bottom:0!important;
    font-weight:730!important;
  }
  /* Only My Projects receives the bright selected Projects label + FAB. */
  #studentDashboard .g8-mobile-nav .g8-nav-projects.is-active {
    color:var(--g8-nav-blue)!important;
  }
  #studentDashboard .g8-mobile-nav .g8-nav-projects.is-active small {
    color:var(--g8-nav-blue)!important;
    font-weight:850!important;
  }
  #studentDashboard .g8-mobile-nav .g8-nav-projects.is-active .g8-nav-icon {
    background:linear-gradient(145deg,var(--g8-nav-blue),#687bff);
    box-shadow:0 8px 19px rgba(39,80,184,.31),0 2px 5px rgba(9,24,56,.1);
  }
  /* V4.2: All standard icons AND labels use one active-state foreground.
     This overrides older Home / Projects / Learning page-specific color rules.
     The '+' glyph itself remains white for contrast against the floating circle. */
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav button.g8-nav-item {
    --g8-tab-foreground:var(--g8-nav-ink);
  }
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav button.g8-nav-item:is(.is-active,[aria-current="page"]) {
    --g8-tab-foreground:var(--g8-nav-blue);
  }
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav button.g8-nav-item:not(.g8-nav-projects) :is(.g8-nav-icon,.g8-nav-icon svg,small),
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav button.g8-nav-projects small {
    color:var(--g8-tab-foreground)!important;
  }
  :is(#studentHomeScreen,#studentDashboard,#lessonViewerScreen,#givenActivitiesScreen)
  .g8-mobile-nav button.g8-nav-item:not(.g8-nav-projects) .g8-nav-icon svg {
    stroke:currentColor!important;
  }
  .g8-mobile-nav .g8-nav-item:focus-visible {
    outline:2px solid var(--g8-nav-blue)!important;
    outline-offset:1px!important;
  }
  /* A PDF, activity viewer or quiz must remain unobstructed by the nav. */
  :is(#lessonViewerScreen,#givenActivitiesScreen).learning-modal-open .g8-mobile-nav {
    display:none!important;
  }
}
@media (max-width:359px) {
  .g8-mobile-nav .g8-nav-item small {font-size:9px!important;letter-spacing:-.15px;}
  .g8-mobile-nav .g8-nav-projects .g8-nav-icon {width:53px;height:53px;top:-23px;}
  .g8-mobile-nav .g8-nav-projects:not(.is-active) .g8-nav-icon {width:47px;height:47px;top:-20px;}
}
@media (prefers-reduced-motion:reduce) {
  .g8-mobile-nav .g8-nav-projects .g8-nav-icon {transition:none!important;}
}