/* Collapsible tab groups — see tab-groups.js. Shared by the admin and
   property-manager portals so their property tab bars stay identical.
   Uses each portal's own --blue / --blue-light / --gray-* tokens. */

.tg-bar {
    /* Positioned so tabs' offsetLeft is measured from the bar (tab-groups.js). */
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
    /* The fades and arrows below show there's more; a scrollbar here reads as
       a stray underline. Trackpads and touch still scroll it. */
    scrollbar-width: none;
}
.tg-bar::-webkit-scrollbar { display: none; }

/* tab-groups.js wraps the bar to hang the arrows off it. */
.tg-wrap { position: relative; margin-bottom: 20px; border-bottom: 1px solid var(--gray-200); }
.tg-wrap > .tg-bar { margin-bottom: 0; border-bottom: none; }

.tg-tab {
    flex: none;
    white-space: nowrap;
    padding: 8px 14px;
    border: none;
    background: none;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--gray-500);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tg-tab:hover { background: var(--gray-100); color: var(--gray-700); }
.tg-tab.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }

.tg-group { display: flex; align-items: center; flex: none; gap: 2px; }

.tg-group-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    white-space: nowrap;
    padding: 7px 13px 7px 14px;
    border: 1px solid var(--gray-200);
    background: var(--white, #fff);
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gray-700);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.tg-group-btn:hover { border-color: var(--gray-400); }

/* Drawn chevron: points right when closed, down when open. */
.tg-chev {
    display: inline-block;
    flex: none;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.tg-group.expanded .tg-chev { transform: translateY(-2px) rotate(45deg); }

/* Open group: filled button, tabs shown inline to its right. */
.tg-group.expanded > .tg-group-btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.tg-group-tabs { display: none; align-items: center; gap: 2px; padding-left: 2px; }
.tg-group.expanded > .tg-group-tabs { display: flex; animation: tg-in .15s ease-out; }

/* Closed group that holds the open tab: outlined in blue and names the tab. */
.tg-group.has-active:not(.expanded) > .tg-group-btn { border-color: var(--blue); color: var(--blue); }
.tg-current { font-weight: 500; }
.tg-current::before { content: '·'; margin-right: 6px; }
.tg-group:not(.has-active) .tg-current,
.tg-group.expanded .tg-current { display: none; }

/* Overflow: fade the clipped edge and offer an arrow there. */
.tg-wrap.can-left > .tg-bar {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
    mask-image: linear-gradient(90deg, transparent 0, #000 56px);
}
.tg-wrap.can-right > .tg-bar {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
}
.tg-wrap.can-left.can-right > .tg-bar {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.tg-arrow {
    position: absolute;
    top: 6px;
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    background: var(--white, #fff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
    color: var(--gray-700);
    cursor: pointer;
}
.tg-arrow:hover { border-color: var(--gray-400); color: var(--blue); }
.tg-arrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.tg-arrow-left { left: 0; }
.tg-arrow-left::before { transform: translateX(2px) rotate(135deg); }
.tg-arrow-right { right: 0; }
.tg-arrow-right::before { transform: translateX(-2px) rotate(-45deg); }
.tg-wrap.can-left > .tg-arrow-left,
.tg-wrap.can-right > .tg-arrow-right { display: flex; }

/* border-radius restated: compliance.js injects button:focus-visible
   { border-radius: 3px }, which would square the pills on keyboard focus. */
.tg-tab:focus-visible,
.tg-group-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 999px; }

@keyframes tg-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .tg-group.expanded > .tg-group-tabs { animation: none; }
    .tg-chev, .tg-tab, .tg-group-btn { transition: none; }
}