/* Frontend Styles for AT Tabs */

.at-tabs {
    position: relative;
    margin: 1rem 0;
}

/* Header and Navigation */
.at-tabs__nav {
    display: flex;
    gap: 0;
}

/* Horizontal Layout */
.at-tabs--horizontal .at-tabs__nav {
    flex-direction: row;
   /* border-bottom: 2px solid #e0e0e0;*/
}

.at-tabs--horizontal .at-tabs__tab {
   /* border-bottom: 2px solid transparent;
    margin-bottom: -2px;*/
}

.at-tabs--horizontal .at-tabs__tab--active {
   /* border-bottom-color: #007cba;*/
}

/* Vertical Layout */
.at-tabs--vertical {
    display: flex;
}

.at-tabs--vertical .at-tabs__header {
   /* max-width: 300px;
    min-width: 300px;*/
    flex-shrink: 0;
}

.at-tabs--vertical .at-tabs__nav {
    flex-direction: column;
}

.at-tabs--vertical .at-tabs__content {
    flex: 1;
}

.at-tabs--vertical.at-tabs--right {
    flex-direction: row-reverse;
}

.at-tabs--vertical .at-tabs__tab {
   /* border-left: 3px solid transparent;
    border: solid #2574bb 1px;
    margin-bottom: 10px;*/
    text-align: left;
    justify-content: flex-start;
    
}

.at-tabs--vertical.at-tabs--right .at-tabs__tab {
   /* border-left: none;
    border-right: 3px solid transparent;*/
    text-align: right;
    justify-content: flex-end;
}

.at-tabs--vertical .at-tabs__tab--active {
    border-left-color: #007cba;
}

.at-tabs--vertical.at-tabs--right .at-tabs__tab--active {
    border-right-color: #007cba;
    border-left-color: transparent;
}

/* Tab Buttons */
.at-tabs__tab {
    background: #f8f9fa;
    border: 0;
    padding: 0.75rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
    position: relative;
}

.at-tabs__tab:hover {
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
}

.at-tabs__tab:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
    z-index: 1;
}

.at-tabs__tab--active {
    background: #fff;
    color: #007cba;
    border-color: #007cba;
    font-weight: 600;
}

.at-tabs__tab-label {
    flex: 1;
    text-align: center;
}

.at-tabs--vertical .at-tabs__tab-label,
.at-tabs--vertical.at-tabs--right .at-tabs__tab-label {
    text-align: inherit;
}

/* Checkmark Icon */
.at-tabs__checkmark {
    color: #007cba;
    font-weight: bold;
    font-size: 0.875rem;
    margin-left: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.at-tabs--vertical.at-tabs--right .at-tabs__checkmark {
    margin-left: 0;
    margin-right: 0.25rem;
    order: -1;
}

/* Content Area */
.at-tabs__content {
    position: relative;
}

/* Tab Panel */
.at-tab {
    display: none;
    padding: 1rem;
    border: 0;
    border-radius: 4px;
    min-height: 100px;
}

.at-tab--active {
    display: block;
}

/* Screen Reader Only Content */
.at-tabs__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .at-tabs--vertical {
        flex-direction: column;
    }
    
    .at-tabs--vertical .at-tabs__header {
        width: 100%;
    }
    
    .at-tabs--vertical .at-tabs__nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }
    
    .at-tabs--vertical .at-tabs__tab {
        border-left: none;
       /* border-bottom: 2px solid transparent;*/
        white-space: nowrap;
        min-width: 120px;
    }
    
    .at-tabs--vertical .at-tabs__tab--active {
        border-left-color: transparent;
        border-bottom-color: #007cba;
    }
}/* Frontend Styles for AT Tabs */

.at-tabs {
  position: relative;
  margin: 1rem 0;
  border: 0;
}

/* Header and Navigation */
.at-tabs__nav {
  display: flex;
  gap: 0;
}

/* Horizontal Layout */
.at-tabs--horizontal .at-tabs__nav {
  flex-direction: row;
  border-bottom: 2px solid #e0e0e0;
  /*gap: 5px;*/
  justify-content: center;
}

.at-tabs--horizontal .at-tabs__tab {
/*  border-bottom: 2px solid transparent;*/
  /*border-bottom: 2px solid #e0e0e0;
  margin-bottom: -2px;*/
}

.at-tabs--horizontal .at-tabs__tab--active {
  border-bottom-color: #007cba;
}

/* Vertical Layout */
.at-tabs--vertical {
  display: flex;
}

.at-tabs--vertical .at-tabs__header {
 /* max-width: 300px;
  min-width: 300px;*/
  flex-shrink: 0;
}

.at-tabs--vertical .at-tabs__nav {
  flex-direction: column;
}

.at-tabs--vertical .at-tabs__content {
  flex: 1;
  margin-top: 0;
}

.at-tabs--vertical.at-tabs--right {
  flex-direction: row-reverse;
}

.at-tabs--vertical .at-tabs__tab {
 /* border-left: 3px solid transparent;*/
  text-align: left;
  justify-content: flex-start;
}

.at-tabs--vertical.at-tabs--right .at-tabs__tab {
 /* border-left: none;
  border-right: 3px solid transparent;*/
  text-align: left;
  justify-content: flex-end;
}

.at-tabs--vertical .at-tabs__tab--active {
    /* border-left-color: #007cba;*/
}

.at-tabs--vertical.at-tabs--right .at-tabs__tab--active {
     /* border-right-color: #007cba;
  border-left-color: transparent; */
}


/* Tab Buttons */
.at-tabs__tab {
  background: #eff7fd;
  border: 0d;
  padding: 0.75rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #045D32;
  transition: all 0.2s ease;
  min-height: 44px;
  justify-content: center;
  text-decoration: none;
  position: relative;
}

.at-tabs__tab:hover {
  background: #AD5100;
  color: #fff;
  text-decoration: none;
}

.at-tabs__tab:focus,
button:focus-visible,
[type="button"]:focus-visible,
[type="reset"]:focus-visible,
[type="submit"]:focus-visible {
    outline: 2px dotted #042952 !important;
    outline-offset: -4px;
    z-index: 1;
    }

.at-tabs__tab--active {
    border-color: #007cba;
    font-weight: 600;
    background: #042952;
    color: #fff;
    }

.at-tabs__tab--active:hover {
    background: #042952;
    color: #fff;
    }

.at-tabs__tab--active:focus {
    outline: 2px dotted #ff0000;
    outline-offset: 2px;
    }


.at-tabs__tab-label {
  flex: 1;
  text-align: center;
}

.at-tabs--vertical .at-tabs__tab-label,
.at-tabs--vertical.at-tabs--right .at-tabs__tab-label {
  text-align: inherit;
}

/* Checkmark Icon */
.at-tabs__checkmark {
  color: #007cba;
  font-weight: bold;
  font-size: 0.875rem;
  margin-left: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.at-tabs__tab--active svg {
    height: 18px;
    width: 18px;
    fill: white;
    margin-right: 5px;
    margin-top: -4px;
    vertical-align: middle;
    }

.at-tabs--vertical.at-tabs--right .at-tabs__checkmark {
  margin-left: 0;
  margin-right: 0.25rem;
  order: -1;
}

/* Content Area */
.at-tabs__content {
  position: relative;
}

/* Tab Panel */
.at-tab {
  display: none;
  padding: 1rem;
  border: 0;
  border-radius: 4px;
  min-height: 100px;
}

.at-tab--active {
  display: block;
}

/* Screen Reader Only Content */
.at-tabs__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .at-tabs--vertical {
        flex-direction: column;
        }
    
    .at-tabs--vertical .at-tabs__header {
        width: 100%;
        }
    
    .at-tabs--vertical .at-tabs__nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        }
    
    .at-tabs--vertical .at-tabs__content {
        padding-left: 0px;
        }
    
    .at-tabs--vertical .at-tabs__tab {
        margin-bottom: 0;
        }
    }
    
    
    /* Horizontal alignment modifiers */
    .at-tabs.at-tabs--h-left   .at-tabs__nav { justify-content: flex-start; }
    .at-tabs.at-tabs--h-center .at-tabs__nav { justify-content: center; }
    .at-tabs.at-tabs--h-right  .at-tabs__nav { justify-content: flex-end; }

    /* Equal-width (Center — full width) */
    .at-tabs.at-tabs--h-justify .at-tabs__nav { justify-content: flex-start; /* tabs themselves will expand */ }
    .at-tabs.at-tabs--h-justify .at-tabs__tab {
      flex: 1 1 0;
      min-width: 0;         /* prevent overflow with long labels */
      text-align: center;
    }


/* Small screens: make tablist scroll horizontally, keep one panel below */
@media (max-width: 480px) {
  .at-tabs--horizontal .at-tabs__nav,
  .at-tabs--vertical .at-tabs__nav {
    flex-direction: column;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    scroll-snap-type: x mandatory;
    padding-bottom: .25rem;
  }

  .at-tabs__tab, 
  .at-tabs--vertical .at-tabs__tab,
  .at-tabs--horizontal .at-tabs__tab {
    flex: 0 0 auto;
    min-width: 140px;
    scroll-snap-align: start;
    border: 1px solid #005289;
  }

  /* If "Center — full width" is selected, it’s better to revert to scrolling on small screens
     so labels don't get squished into unreadable widths */
  .at-tabs.at-tabs--h-justify .at-tabs__tab {
    flex: 0 0 auto;
    min-width: 160px;
    text-align: center;
  }

  /* Vertical layout stacks header and content */
  .at-tabs--vertical {
    flex-direction: column;
  }
  .at-tabs--vertical .at-tabs__header {
    width: 100%;
    flex-shrink: 0;
  }
}

/* --- Vertical nav: fluid desktop width ---
   300px on large screens, shrinks responsively but never below ~220px */
.at-tabs--vertical .at-tabs__header {
  box-sizing: border-box;
  flex: 0 0 clamp(220px, 28vw, 300px);
  max-width: clamp(220px, 28vw, 300px);
}

/* Keep the column of tabs on the side for vertical layout */
.at-tabs--vertical .at-tabs__nav {
  flex-direction: column;
}

/* Make long labels behave */
.at-tabs__tab-label {
 /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;*/
}

/* --- Horizontal alignment modifiers (front-end) --- */
.at-tabs.at-tabs--h-left   .at-tabs__nav { justify-content: flex-start; }
.at-tabs.at-tabs--h-center .at-tabs__nav { justify-content: center; }
.at-tabs.at-tabs--h-right  .at-tabs__nav { justify-content: flex-end; }

/* Equal width (Center — full width) */
.at-tabs.at-tabs--h-justify .at-tabs__nav { justify-content: flex-start; }
.at-tabs.at-tabs--h-justify .at-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  display: inline;
}

/* --- Tablet & down: stack vertical layout and make the tablist scroll horizontally --- */
@media (max-width: 768px) {
  .at-tabs--vertical {
    flex-direction: column;                /* stack header over content */
  }
  .at-tabs--vertical .at-tabs__header {
    flex: none;                            /* let it size naturally */
    width: 100%;
    max-width: none;                       /* override the clamp on small screens */
  }
  .at-tabs--vertical .at-tabs__nav {
    flex-direction: row;                   /* << important: ROW for horizontal scroll */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: .15rem;                /* room for scrollbar */
  }
  .at-tabs--vertical .at-tabs__tab {
    flex: 0 0 auto;
    min-width: 140px;
    border: 1px solid #005289;
  }
  .at-tabs--vertical:not(.at-tabs--right) .at-tabs__content {
    margin-left: 0 !important;
    margin-top: var(--at-header-panel-gap, 0);
  }
}

/* --- Small phones --- */
@media (max-width: 480px) {
  /* Horizontal tabs also scroll instead of squishing */
  .at-tabs--horizontal .at-tabs__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }
  .at-tabs--horizontal .at-tabs__tab {
    flex: 0 0 auto;
    min-width: 140px;
  }
  /* If "Center — full width" is selected, revert to scroll so labels remain readable */
  .at-tabs.at-tabs--h-justify .at-tabs__tab {
    flex: 0 0 auto;
    min-width: 160px;
  }
}

/* Tablet & down: vertical layout stacks (no horizontal scrollbar) */
@media (max-width: 768px) {
  .at-tabs--vertical {
    flex-direction: column;     /* header above content */
  }
  .at-tabs--vertical .at-tabs__header {
    width: 100%;
    max-width: none;            /* undo desktop clamp */
    flex-shrink: 0;
  }
  .at-tabs--vertical .at-tabs__nav {
    flex-direction: column;     /* IMPORTANT: was row before */
    overflow-x: visible;        /* kill the X-scrollbar */
    gap: 8px;
    padding-bottom: 0;
  }
  .at-tabs--vertical .at-tabs__tab {
    width: 100%;                /* full-width rows */
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Small phones: keep vertical stacked; only horizontal tabs scroll */
@media (max-width: 480px) {
  .at-tabs--horizontal .at-tabs__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
  }
  .at-tabs--horizontal .at-tabs__tab {
    flex: 0 0 auto;
    min-width: 140px;
    scroll-snap-align: start;
  }
  /* If "Center — full width" was chosen, revert to scroll so labels don't squish */
  .at-tabs.at-tabs--h-justify .at-tabs__tab {
    flex: 0 0 auto;
    min-width: 160px;
  }

  /* Ensure vertical stays stacked (no X-scroll) on tiny screens */
  .at-tabs--vertical .at-tabs__nav {
    flex-direction: column;
    overflow-x: visible;
  }
}

/* Tablet & down: make VERTICAL RIGHT stack like vertical-left (header above content, no X-scroll) */
@media (max-width: 768px) {
  .at-tabs--vertical.at-tabs--right {
    flex-direction: column;     /* override row-reverse */
  }

  .at-tabs--vertical.at-tabs--right .at-tabs__header {
    width: 100%;
    max-width: none;
    flex-shrink: 0;
    order: 0;                   /* header first */
  }

  .at-tabs--vertical.at-tabs--right .at-tabs__nav {
    flex-direction: column;     /* stacked list */
    overflow-x: visible;        /* kill horizontal scrollbar */
    gap: 8px;
    padding-bottom: 0;
  }

  .at-tabs--vertical.at-tabs--right .at-tabs__tab {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    text-align: center;
    justify-content: flex-end;
  }

  .at-tabs--vertical.at-tabs--right .at-tabs__content {
    order: 1;                   /* content after header */
  }
}

/* Stacked vertical (left & right): center tab text + center the active SVG */
@media (max-width: 768px) {
  /* Make each button’s content centered in stacked mode */
  .at-tabs--vertical .at-tabs__tab,
  .at-tabs--vertical.at-tabs--right .at-tabs__tab {
    justify-content: center;
    text-align: center;
    display: inline;
  }

  /* Ensure the label itself is centered (overrides right/left variants) */
  .at-tabs--vertical .at-tabs__tab-label,
  .at-tabs--vertical.at-tabs--right .at-tabs__tab-label {
    text-align: center;
  }

  /* Active icon + text sit together centered */
  .at-tabs--vertical .at-tabs__tab--active svg,
  .at-tabs--vertical.at-tabs--right .at-tabs__tab--active svg {
    display: inline-block;
    height: 18px;
    width: 18px;
    flex: 0 0 auto;
    fill: currentColor;           /* inherits button text color */
    margin: 0 6px 0 0;            /* a little space before the label */
    vertical-align: middle;       /* tidy alignment with text */
  }
}

/* Horizontal tabs: stack starting at 768px */
@media (max-width: 768px) {
  .at-tabs--horizontal .at-tabs__nav {
    flex-direction: column;     /* stack vertically */
    flex-wrap: nowrap;
    overflow-x: visible;        /* kill horizontal scrollbar */
    gap: 8px;
    padding-bottom: 0;
  }

  .at-tabs--horizontal .at-tabs__tab {
    width: 100%;
    flex: 1 1 auto;             /* full-width rows */
    min-width: 0;
  }

  /* If "Center — full width" was selected, neutralize equal-width behavior when stacked */
  .at-tabs.at-tabs--h-justify .at-tabs__tab {
    flex: 1 1 auto;             /* don't force equal columns in stacked mode */
  }
}


/* === Per-state tab styles via CSS variables === */
.at-tabs__tab {
  /* normal */
  background: var(--at-tab-bg, inherit);
  color: var(--at-tab-color, inherit);
  border-style: var(--at-tab-border-style, solid);
  border-color: var(--at-tab-border-color, transparent);
  /* allow per-side overrides; fallback to --at-tab-border-width if provided */
  border-top-width:    var(--at-tab-border-top-width,    var(--at-tab-border-width, initial));
  border-right-width:  var(--at-tab-border-right-width,  var(--at-tab-border-width, initial));
  border-bottom-width: var(--at-tab-border-bottom-width, var(--at-tab-border-width, initial));
  border-left-width:   var(--at-tab-border-left-width,   var(--at-tab-border-width, initial));
  border-radius: var(--at-tab-radius, 0);
  padding-top:    var(--at-tab-padding-top,    auto);
  padding-right:  var(--at-tab-padding-right,  auto);
  padding-bottom: var(--at-tab-padding-bottom, auto);
  padding-left:   var(--at-tab-padding-left,   auto);
}

/* hover */
.at-tabs__tab:hover {
  background: var(--at-tab-hover-bg, var(--at-tab-bg, inherit));
  color:      var(--at-tab-hover-color, var(--at-tab-color, inherit));
  border-style: var(--at-tab-hover-border-style, var(--at-tab-border-style, solid));
  border-color: var(--at-tab-hover-border-color, var(--at-tab-border-color, transparent));
  border-top-width:    var(--at-tab-hover-border-top-width,    var(--at-tab-hover-border-width, var(--at-tab-border-top-width, initial)));
  border-right-width:  var(--at-tab-hover-border-right-width,  var(--at-tab-hover-border-width, var(--at-tab-border-right-width, initial)));
  border-bottom-width: var(--at-tab-hover-border-bottom-width, var(--at-tab-hover-border-width, var(--at-tab-border-bottom-width, initial)));
  border-left-width:   var(--at-tab-hover-border-left-width,   var(--at-tab-hover-border-width, var(--at-tab-border-left-width, initial)));
}

/* focus */
.at-tabs__tab:focus {
  outline-color:  var(--at-tab-focus-outline-color, currentColor);
  outline-style:  var(--at-tab-focus-outline-style, dotted);
  outline-width:  var(--at-tab-focus-outline-width, 2px);
  outline-offset: var(--at-tab-focus-outline-offset, 0);
  border-style: var(--at-tab-focus-border-style, var(--at-tab-border-style, solid));
  border-color: var(--at-tab-focus-border-color, var(--at-tab-border-color, transparent));
  border-top-width:    var(--at-tab-focus-border-top-width,    var(--at-tab-focus-border-width, var(--at-tab-border-top-width, initial)));
  border-right-width:  var(--at-tab-focus-border-right-width,  var(--at-tab-focus-border-width, var(--at-tab-border-right-width, initial)));
  border-bottom-width: var(--at-tab-focus-border-bottom-width, var(--at-tab-focus-border-width, var(--at-tab-border-bottom-width, initial)));
  border-left-width:   var(--at-tab-focus-border-left-width,   var(--at-tab-focus-border-width, var(--at-tab-border-left-width, initial)));
}

/* Icon visibility + color per state */
.at-tabs__icon { display: none; }
.at-tabs__tab--active .at-tabs__icon { display: inline-flex; }

.at-tabs__tab .at-tabs__icon { color: var(--at-tab-icon-color, currentColor); }
.at-tabs__tab:hover .at-tabs__icon { color: var(--at-tab-hover-icon-color, var(--at-tab-icon-color, currentColor)); }
.at-tabs__tab:focus .at-tabs__icon { color: var(--at-tab-focus-icon-color, var(--at-tab-icon-color, currentColor)); }

/* Panel box uses panel vars (applies to content container ONLY) */
.at-tabs__content {
  margin-top: var(--at-header-panel-gap, 0);
  background:    var(--at-panel-bg, transparent);
  color:         var(--at-panel-color, inherit);
  border-style:  var(--at-panel-border-style, none);
  border-color:  var(--at-panel-border-color, transparent);
  border-width:  var(--at-panel-border-width, 0);
  border-radius: var(--at-panel-radius, 0);
  padding: 0; /* panels themselves can have padding if you want */
}

/* Active state (variable-driven) */
.at-tabs__tab--active {
  background:    var(--at-tab-active-bg, var(--at-tab-bg, inherit));
  color:         var(--at-tab-active-color, var(--at-tab-color, inherit));
  border-style:  var(--at-tab-active-border-style, var(--at-tab-border-style, solid));
  border-color:  var(--at-tab-active-border-color, var(--at-tab-border-color, transparent));
  border-top-width:    var(--at-tab-active-border-top-width,    var(--at-tab-active-border-width, var(--at-tab-border-top-width, initial)));
  border-right-width:  var(--at-tab-active-border-right-width,  var(--at-tab-active-border-width, var(--at-tab-border-right-width, initial)));
  border-bottom-width: var(--at-tab-active-border-bottom-width, var(--at-tab-active-border-width, var(--at-tab-border-bottom-width, initial)));
  border-left-width:   var(--at-tab-active-border-left-width,   var(--at-tab-active-border-width, var(--at-tab-border-left-width, initial)));
}

/* Icon color in active state */
.at-tabs__tab--active .at-tabs__icon {
  color: var(--at-tab-active-icon-color, var(--at-tab-icon-color, currentColor));
}


/* Base: neutralize margins; apply per orientation below */
.at-tabs__content {
 /* margin: 0;*/
}

/* Horizontal: gap is vertical (top) */
.at-tabs--horizontal .at-tabs__content {
 /* margin-top: var(--at-header-panel-gap, 0);*/
}

/* Vertical-left: gap on the left side of the panel */
.at-tabs--vertical:not(.at-tabs--right) .at-tabs__content {
  margin-left: var(--at-header-panel-gap, 0);
}

/* Vertical-right: gap on the right side of the panel */
.at-tabs--vertical.at-tabs--right .at-tabs__content {
  margin-right: var(--at-header-panel-gap, 0);
}

/* Horizontal: draw the divider under the tablist */
.at-tabs--horizontal .at-tabs__nav {
  border-bottom-style: var(--at-nav-border-style, none);
  border-bottom-width: var(--at-nav-border-width, 0);
  border-bottom-color: var(--at-nav-border-color, transparent);
}

/* Vertical-left (nav on the left): draw the divider on the right edge of the nav */
.at-tabs--vertical:not(.at-tabs--right) .at-tabs__nav {
  border-right-style: var(--at-nav-border-style, none);
  border-right-width: var(--at-nav-border-width, 0);
  border-right-color: var(--at-nav-border-color, transparent);
  z-index: 2;
  position: relative;
}

/* Vertical-right (nav on the right): draw the divider on the left edge of the nav */
.at-tabs--vertical.at-tabs--right .at-tabs__nav {
  border-left-style: var(--at-nav-border-style, none);
  border-left-width: var(--at-nav-border-width, 0);
  border-left-color: var(--at-nav-border-color, transparent);
}

/* === Active tab indicator (uses CSS vars) === */

/* Horizontal: underline the active tab */
.at-tabs--horizontal .at-tabs__tab {
 /* border-bottom-style: var(--at-active-indicator-style, none);
  border-bottom-width: var(--at-active-indicator-width, 0);*/
  /*border-bottom-color: transparent;*/
  /* Optional: pull the underline down so it overlays any nav divider cleanly */
 /* margin-bottom: calc(0 * var(--at-active-indicator-width, 0));*/
  border-bottom-style: var(--at-tab-border-style, none);
  border-bottom-width: var(--at-tab-border-bottom-width, 0);
  margin-bottom: var(--at-tab-margin-bottom, 0);
}
.at-tabs--horizontal .at-tabs__tab--active {
  border-bottom-color: var(--at-active-indicator-color, transparent);
}

/* Vertical-left: draw line on the right edge */
.at-tabs--vertical:not(.at-tabs--right) .at-tabs__tab {
  border-right-style: var(--at-active-indicator-style, none);
  /*border-right-width: var(--at-active-indicator-width, 0);
  border-right-color: transparent;*/
}
.at-tabs--vertical:not(.at-tabs--right) .at-tabs__tab--active {
  border-right-color: var(--at-active-indicator-color, transparent);
}

/* Vertical-right: draw line on the left edge */
.at-tabs--vertical.at-tabs--right .at-tabs__tab {
  border-left-style: var(--at-active-indicator-style, none);
  /*border-left-width: var(--at-active-indicator-width, 0);
  border-left-color: transparent;*/
}
.at-tabs--vertical.at-tabs--right .at-tabs__tab--active {
  border-left-color: var(--at-active-indicator-color, transparent);
}

.at-tabs__tab {
  border-top-left-radius:     var(--at-tab-radius-tl, var(--at-tab-radius));
  border-top-right-radius:    var(--at-tab-radius-tr, var(--at-tab-radius));
  border-bottom-right-radius: var(--at-tab-radius-br, var(--at-tab-radius));
  border-bottom-left-radius:  var(--at-tab-radius-bl, var(--at-tab-radius));
}

.at-tab {
  /* …existing styles… */
  border-top-left-radius:     var(--at-panel-radius-tl, var(--at-panel-radius));
  border-top-right-radius:    var(--at-panel-radius-tr, var(--at-panel-radius));
  border-bottom-right-radius: var(--at-panel-radius-br, var(--at-panel-radius));
  border-bottom-left-radius:  var(--at-panel-radius-bl, var(--at-panel-radius));
}
.at-tabs__tab .at-tabs__icon {
  display: none;
  margin-inline-end: 0; /* rtl-safe if you’re using logical props */
  color: var(--at-tab-active-icon-color);
}
.at-tabs__tab--active .at-tabs__icon {
  display: inline-flex;
}
.at-tabs .at-tab {
  padding-top:    var(--at-panel-padding-top);
  padding-right:  var(--at-panel-padding-right);
  padding-bottom: var(--at-panel-padding-bottom);
  padding-left:   var(--at-panel-padding-left);
}
.at-tabs__content {
 /* margin-top: var(--at-header-panel-gap, 0);*/
  background:    var(--at-panel-bg, transparent);
  color:         var(--at-panel-color, inherit);
  border-style:  var(--at-panel-border-style, none);
  border-color:  var(--at-panel-border-color, transparent);
  border-width:  var(--at-panel-border-width, 0);

  /* per-corner radius with single-value fallback */
  border-top-left-radius:     var(--at-panel-radius-tl, var(--at-panel-radius, 0));
  border-top-right-radius:    var(--at-panel-radius-tr, var(--at-panel-radius, 0));
  border-bottom-right-radius: var(--at-panel-radius-br, var(--at-panel-radius, 0));
  border-bottom-left-radius:  var(--at-panel-radius-bl, var(--at-panel-radius, 0));
}
.at-tabs__content { overflow: hidden; }

/* Panel focus ring uses the tab focus vars for color/width/style/offset */
.at-tab:focus,
.at-tab.at-tab--active:focus {
  outline-color:  var(--at-tab-focus-outline-color, currentColor);
  outline-style:  var(--at-tab-focus-outline-style, dotted);
  outline-width:  var(--at-tab-focus-outline-width, 2px);
  outline-offset:  -3px; /* inside */
  position: relative; /* for z-index to take effect */
  z-index: 2;
}

/* === Base (desktop/default) === */
.at-tabs__nav { gap: var(--at-tab-gap, 10px); }
.at-tabs__content { /*margin-top: var(--at-header-panel-gap, 0); */}
.at-tabs .at-tab {
  padding-top:    var(--at-panel-padding-top);
  padding-right:  var(--at-panel-padding-right);
  padding-bottom: var(--at-panel-padding-bottom);
  padding-left:   var(--at-panel-padding-left);
}

/* === ≤1024 (lg) === */
@media (max-width: 1024px) {
  .at-tabs__nav { gap: var(--at-tab-gap-lg, var(--at-tab-gap, 10px)); }
 /* .at-tabs__content { margin-top: var(--at-header-panel-gap-lg, var(--at-header-panel-gap, 0)); }*/
  .at-tabs .at-tab {
    padding-top:    var(--at-panel-padding-top-lg,    var(--at-panel-padding-top));
    padding-right:  var(--at-panel-padding-right-lg,  var(--at-panel-padding-right));
    padding-bottom: var(--at-panel-padding-bottom-lg, var(--at-panel-padding-bottom));
    padding-left:   var(--at-panel-padding-left-lg,   var(--at-panel-padding-left));
  }
}

/* === ≤768 (md) === */
@media (max-width: 768px) {
  .at-tabs__nav { gap: var(--at-tab-gap-md, var(--at-tab-gap-lg, var(--at-tab-gap, 0))); }
  .at-tabs__content { margin-top: var(--at-header-panel-gap-md, var(--at-header-panel-gap-lg, var(--at-header-panel-gap, 0))); }
  .at-tabs .at-tab {
    padding-top:    var(--at-panel-padding-top-md,    var(--at-panel-padding-top-lg,    var(--at-panel-padding-top)));
    padding-right:  var(--at-panel-padding-right-md,  var(--at-panel-padding-right-lg,  var(--at-panel-padding-right)));
    padding-bottom: var(--at-panel-padding-bottom-md, var(--at-panel-padding-bottom-lg, var(--at-panel-padding-bottom)));
    padding-left:   var(--at-panel-padding-left-md,   var(--at-panel-padding-left-lg,   var(--at-panel-padding-left)));
  }
}

/* === ≤480 (sm) === */
@media (max-width: 480px) {
  .at-tabs__nav { gap: var(--at-tab-gap-sm, var(--at-tab-gap-md, var(--at-tab-gap-lg, var(--at-tab-gap, 0)))); }
  .at-tabs__content { margin-top: var(--at-header-panel-gap-sm, var(--at-header-panel-gap-md, var(--at-header-panel-gap-lg, var(--at-header-panel-gap, 0)))); }
  .at-tabs .at-tab {
    padding-top:    var(--at-panel-padding-top-sm,    var(--at-panel-padding-top-md,    var(--at-panel-padding-top-lg,    var(--at-panel-padding-top))));
    padding-right:  var(--at-panel-padding-right-sm,  var(--at-panel-padding-right-md,  var(--at-panel-padding-right-lg,  var(--at-panel-padding-right))));
    padding-bottom: var(--at-panel-padding-bottom-sm, var(--at-panel-padding-bottom-md, var(--at-panel-padding-bottom-lg, var(--at-panel-padding-bottom))));
    padding-left:   var(--at-panel-padding-left-sm,   var(--at-panel-padding-left-md,   var(--at-panel-padding-left-lg,   var(--at-panel-padding-left))));
  }
}