/* Reckon — navigation: tabs, breadcrumb, pagination, sidebar, accordion,
   collapsible, scroll area. */

/* ── Tabs / segmented control ───────────────────────────────────── */
.o-tabs{display:flex;flex-direction:column;gap:var(--space-2)}
.o-tabs__list{position:relative;z-index:0;display:flex;width:fit-content;align-items:center;justify-content:center;gap:2px;color:var(--muted-foreground)}
.o-tabs__list--default{border-radius:var(--radius-lg);background:var(--muted);padding:2px;color:color-mix(in srgb,var(--muted-foreground) 72%,transparent)}
.o-tabs__list--underline{padding-block:var(--space-1);position:relative}
.o-tabs__list--underline::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--border)}
.o-tabs__tab{position:relative;display:flex;flex:none;cursor:pointer;user-select:none;align-items:center;justify-content:center;gap:var(--space-1-5);white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;font-family:var(--font-sans);font-weight:var(--font-weight-medium);font-size:var(--text-sm);color:inherit;height:30px;padding-inline:calc(var(--space-2-5) - 1px);outline:none;transition:color var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast)}
.o-tabs__tab>svg{width:16px;height:16px;flex:none;margin-inline:-2px;opacity:.8}
.o-tabs__tab:hover{color:var(--muted-foreground)}
.o-tabs__list--underline .o-tabs__tab:hover{background:var(--accent)}
.o-tabs__tab[data-active]{color:var(--foreground)}
.o-tabs__list--default .o-tabs__tab[data-active]{background:var(--background);box-shadow:var(--shadow-sm)}
.dark .o-tabs__list--default .o-tabs__tab[data-active]{background:var(--input)}
.o-tabs__list--underline .o-tabs__tab[data-active]::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:2px;background:var(--primary);z-index:1}
.o-tabs__tab--sm{height:26px;padding-inline:calc(var(--space-2) - 1px)}
.o-tabs__tab--lg{height:34px;padding-inline:calc(var(--space-3) - 1px)}
.o-tabs__panel{flex:1;outline:none}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.o-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2-5);margin:0;padding:0;list-style:none;overflow-wrap:break-word;font-size:var(--text-sm);color:var(--muted-foreground)}
.o-breadcrumb__item{display:inline-flex;align-items:center;gap:var(--space-1-5)}
.o-breadcrumb__link{color:inherit;transition:color var(--duration-fast)}
.o-breadcrumb__link:hover{color:var(--foreground);text-decoration:none}
.o-breadcrumb__page{font-weight:var(--font-weight-normal);color:var(--foreground)}
.o-breadcrumb__separator{display:inline-flex;opacity:.8}
.o-breadcrumb__separator svg{width:16px;height:16px}

/* ── Pagination ─────────────────────────────────────────────────── */
.o-pagination{margin-inline:auto;display:flex;width:100%;justify-content:center}
.o-pagination__list{display:flex;flex-direction:row;align-items:center;gap:var(--space-1);margin:0;padding:0;list-style:none}
.o-pagination__ellipsis{display:flex;min-width:28px;justify-content:center;color:var(--muted-foreground)}
.o-pagination__ellipsis svg{width:16px;height:16px}

/* ── Sidebar ────────────────────────────────────────────────────── */
.o-sidebar{display:flex;height:100%;width:var(--sidebar-width);flex-direction:column;background:var(--sidebar);color:var(--sidebar-foreground);border-inline-end:1px solid var(--sidebar-border)}
.o-sidebar__header,.o-sidebar__footer{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2)}
.o-sidebar__content{display:flex;min-height:0;flex:1;flex-direction:column;gap:var(--space-2);overflow-y:auto}
.o-sidebar__group{position:relative;display:flex;width:100%;min-width:0;flex-direction:column;padding:var(--space-2)}
.o-sidebar__group-label{display:flex;height:32px;flex:none;align-items:center;border-radius:var(--radius-lg);padding-inline:var(--space-2);font-weight:var(--font-weight-medium);font-size:var(--text-xs);color:var(--sidebar-foreground)}
.o-sidebar__menu{display:flex;width:100%;min-width:0;flex-direction:column;gap:var(--space-1);margin:0;padding:0;list-style:none}
.o-sidebar__item{position:relative}
.o-sidebar__button{display:flex;width:100%;align-items:center;gap:var(--space-2);overflow:hidden;border:0;border-radius:var(--radius-lg);background:transparent;padding:var(--space-2);text-align:left;font-family:var(--font-sans);font-size:var(--text-sm);color:inherit;height:32px;cursor:pointer;outline:none;transition:background-color var(--duration-fast),color var(--duration-fast)}
.o-sidebar__button>svg{width:16px;height:16px;flex:none;opacity:.8}
.o-sidebar__button>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-sidebar__button:hover{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.o-sidebar__button[data-active=true]{background:var(--sidebar-accent);font-weight:var(--font-weight-medium);color:var(--sidebar-accent-foreground)}
.o-sidebar__button--lg{height:48px}
.o-sidebar__button--sm{height:28px;font-size:var(--text-xs)}
.o-sidebar__badge{pointer-events:none;position:absolute;inset-inline-end:var(--space-1);top:6px;display:flex;height:20px;min-width:20px;user-select:none;align-items:center;justify-content:center;border-radius:var(--radius-lg);padding-inline:var(--space-1);font-weight:var(--font-weight-medium);font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--sidebar-foreground)}
.o-sidebar__sub{margin-inline:var(--space-3-5);display:flex;min-width:0;translate:1px 0;flex-direction:column;gap:var(--space-1);border-inline-start:1px solid var(--sidebar-border);padding:2px var(--space-2-5);list-style:none}
.o-sidebar__sub-button{display:flex;height:28px;min-width:0;translate:-1px 0;align-items:center;gap:var(--space-2);overflow:hidden;border-radius:var(--radius-lg);padding-inline:var(--space-2);font-size:var(--text-sm);color:var(--sidebar-foreground);cursor:pointer}
.o-sidebar__sub-button:hover{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground);text-decoration:none}
.o-sidebar__sub-button[data-active=true]{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.o-sidebar__separator{margin-inline:var(--space-2);height:1px;background:var(--sidebar-border)}
/* The inset is the shell's scroll container: it scrolls while .o-sidebar keeps the
   full height of the screen, so the sidebar footer (account, help, collapse) is
   always reachable. This needs the shell root around the pair to be
   height:100dvh;overflow:hidden — on min-height:100vh the document scrolls and
   takes the sidebar with it. min-height/min-width:0 so a table or a long page
   inside cannot push the track wider than the viewport. */
.o-sidebar-inset{position:relative;display:flex;width:100%;min-width:0;min-height:0;flex:1;flex-direction:column;overflow-y:auto;background:var(--background)}
/* In a scrolling column every child must keep its natural height — the default
   flex-shrink:1 squashes fixed-height children (a toolbar, a sticky header) as
   soon as the content below overflows, which looks like a broken component
   rather than a layout rule. Children keep their size; the inset scrolls. */
.o-sidebar-inset>*{flex-shrink:0}

/* ── Accordion / Collapsible ────────────────────────────────────── */
.o-accordion__item{border-bottom:1px solid var(--border)}
.o-accordion__item:last-child{border-bottom:0}
.o-accordion__trigger{display:flex;width:100%;flex:1;cursor:pointer;align-items:flex-start;justify-content:space-between;gap:var(--space-4);border:0;border-radius:var(--radius-md);background:transparent;padding-block:var(--space-4);text-align:left;font-family:var(--font-sans);font-weight:var(--font-weight-medium);font-size:var(--text-sm);color:var(--foreground);outline:none}
.o-accordion__indicator{pointer-events:none;width:16px;height:16px;flex:none;translate:0 2px;opacity:.8;transition:rotate var(--duration-normal) var(--ease-in-out)}
.o-accordion__item[data-open] .o-accordion__indicator{rotate:180deg}
.o-accordion__panel{overflow:hidden;font-size:var(--text-sm);color:var(--muted-foreground);transition:height var(--duration-normal) var(--ease-in-out)}
.o-accordion__panel-inner{padding-bottom:var(--space-4)}

/* ── Scroll area ────────────────────────────────────────────────── */
.o-scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--foreground) 20%,transparent) transparent}
.o-scroll::-webkit-scrollbar{width:6px;height:6px}
.o-scroll::-webkit-scrollbar-thumb{border-radius:var(--radius-full);background:color-mix(in srgb,var(--foreground) 20%,transparent)}
.o-scroll::-webkit-scrollbar-track{background:transparent}
.o-scroll--fade{mask-image:linear-gradient(to bottom,transparent 0,#000 1.5rem,#000 calc(100% - 1.5rem),transparent 100%)}
