/* Eterano v1.21.2e — Settings balance + mobile tab navigation */

/* Accountant has only two allowed Settings tabs. Keep the compact control visually
   centered above the single-form content instead of leaving it hanging on the left. */
body.role-accountant1212 #settingsTabsShell .settings-tabs-nav.settings-nav-compact1212d,
body.role-accountant1212 #settingsTabsShell .settings-tabs-nav.restricted-settings1212c{
  width:max-content!important;
  max-width:100%!important;
  margin-inline:auto!important;
  justify-self:center!important;
  justify-content:center!important;
}

/* Account & appearance hierarchy:
   Row 1 = Appearance + Subscription, Row 2 = Team & access spanning both columns.
   v1.21.2d created a left wrapper; display:contents lets its cards participate in
   the parent grid without fighting the already-live DOM composition. */
#settingsAccountPanel > .account-left-stack1212d{
  display:contents!important;
}
#settingsAccountPanel .account-left-stack1212d > #themeSettingsCard{
  grid-column:1!important;
  grid-row:auto!important;
  width:100%!important;
  margin:0!important;
  align-self:start!important;
}
#settingsAccountPanel .account-left-stack1212d > .plan-card{
  grid-column:2!important;
  grid-row:auto!important;
  width:100%!important;
  margin:0!important;
  align-self:stretch!important;
}
#settingsAccountPanel > #teamAccess1212{
  grid-column:1 / -1!important;
  width:100%!important;
  margin:0!important;
  align-self:start!important;
}


@media(max-width:1100px){
  #settingsAccountPanel .account-left-stack1212d > #themeSettingsCard,
  #settingsAccountPanel .account-left-stack1212d > .plan-card,
  #settingsAccountPanel > #teamAccess1212{
    grid-column:1!important;
  }
}

/* Mobile Settings navigation must never clip tabs. The rail is a deliberate,
   touch-scrollable strip; the active tab is kept in view by v1212e.js. */
@media(max-width:820px){
  #settingsTabsShell{
    position:relative;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  #settingsTabsShell .settings-tabs-nav{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    justify-content:flex-start!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    scroll-padding-inline:10px;
    touch-action:pan-x;
    padding:5px 8px!important;
    scrollbar-width:none!important;
  }
  #settingsTabsShell .settings-tabs-nav::-webkit-scrollbar{display:none!important}
  #settingsTabsShell .settings-tabs-nav [data-settings-tab]:not([hidden]){
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    white-space:nowrap!important;
    scroll-snap-align:center;
  }

  /* Subtle edge fades communicate that more tabs are available without adding
     permanent arrows or taking horizontal space away from the controls. */
  #settingsTabsShell.settings-can-scroll-right1212e::after,
  #settingsTabsShell.settings-can-scroll-left1212e::before{
    content:"";
    position:absolute;
    z-index:12;
    top:var(--settings-nav-top1212e,0px);
    height:var(--settings-nav-height1212e,48px);
    width:24px;
    pointer-events:none;
    border-radius:17px;
  }
  #settingsTabsShell.settings-can-scroll-right1212e::after{
    right:0;
    background:linear-gradient(90deg,transparent,var(--surface,#0c1f3b));
  }
  #settingsTabsShell.settings-can-scroll-left1212e::before{
    left:0;
    background:linear-gradient(270deg,transparent,var(--surface,#0c1f3b));
  }

  /* Two-column Account & appearance becomes a clean vertical stack on phone. */
  #settingsAccountPanel .account-left-stack1212d > #themeSettingsCard,
  #settingsAccountPanel .account-left-stack1212d > .plan-card,
  #settingsAccountPanel > #teamAccess1212{
    grid-column:1!important;
  }
}