/* Toolbar containers and grouped toolbar actions. */
.sarus-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--sarus-border-soft); }
.sarus-toolbar-group { display: flex; align-items: center; gap: 8px; }
.sarus-toolbar-status { color: var(--sarus-muted); font-size: 13px; white-space: nowrap; }
/* Search and filter controls grouped inside a toolbar. */
.sarus-toolbar-filters { display: grid; grid-template-columns: minmax(220px, 340px) 150px 190px; align-items: center; gap: 10px; }
/* Popup menus and menu items. */
.sarus-menu { position: relative; }
.sarus-menu-panel { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 150px; border: 1px solid var(--sarus-border); background: var(--sarus-panel); box-shadow: var(--sarus-shadow); padding: 4px; }
.sarus-menu-item { display: block; width: 100%; border: 0; padding: 8px 10px; background: transparent; color: var(--sarus-text); cursor: pointer; text-align: left; }
.sarus-menu-item:hover, .sarus-menu-item:focus-visible { background: var(--sarus-hover); color: var(--sarus-primary); outline: none; }
/* Standard action buttons and icon-only buttons. */
.sarus-btn { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--sarus-border); border-radius: 3px; padding: 7px 12px; background: var(--sarus-control-bg); color: var(--sarus-text); cursor: pointer; line-height: 18px; }
.sarus-btn:hover, .sarus-btn:focus-visible { border-color: var(--sarus-primary); background: var(--sarus-hover); outline: none; }
.sarus-btn-primary { border-color: var(--sarus-primary); background: var(--sarus-primary); color: #fff; }
.sarus-btn-primary:hover, .sarus-btn-primary:focus-visible { border-color: var(--sarus-primary-dark); background: var(--sarus-primary-dark); }
.sarus-btn-icon { width: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--sarus-muted); }
.sarus-btn-icon:hover, .sarus-btn-icon:focus-visible { border-color: transparent; color: var(--sarus-text); }
/* Shared inline icon geometry. */
.sarus-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Tab navigation used by toolbars and forms. */
.sarus-tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--sarus-border); padding: 0 14px; }
.sarus-tab { border: 0; border-bottom: 2px solid transparent; padding: 12px; background: transparent; color: var(--sarus-muted); cursor: pointer; }
.sarus-tab:hover, .sarus-tab:focus-visible { color: var(--sarus-primary); outline: none; }
.sarus-tab.is-active { border-bottom-color: var(--sarus-primary); color: var(--sarus-primary); font-weight: 600; }

/* Stack toolbar filters on narrow screens without changing their controls. */
@media (max-width: 760px) { .sarus-toolbar { align-items: stretch; flex-direction: column; } .sarus-toolbar-filters { grid-template-columns: 1fr; } .sarus-toolbar-status { white-space: normal; } }