/* Segmeno house style: compact data-grid and tab-bar presentation, shared across Segmeno apps.
   Tab-bar rules are unused in FeWo today (sidebar nav, not a tab bar) but kept for parity —
   apply the .segmeno-tabbar/.segmeno-tab classes if a tab-bar UI is ever added.
   Grid rules apply immediately via the .segmeno-grid class on MudTable instances. */

/* ── Segmeno tab bar ────────────────────────────────────────────────────────── */

.segmeno-tabbar {
    display: flex;
    align-items: stretch;
    background: #1A70B8;
    padding: 0 8px;
    min-height: 36px;
}

.segmeno-tab {
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    background: #1A70B8;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
    white-space: nowrap;
}

.segmeno-tab:hover {
        color: #000000;
        background: #c6d9f1;
}

.segmeno-tab--active {
    color: #FFFFFF;
    background: #4488CC;
    border-left: 2px solid #c6d9f1;
    border-right: 2px solid #c6d9f1;
    border-top: 2px solid #c6d9f1;
    font-weight: 600;
}

.segmeno-tab--active:hover {
    color: #FFFFFF;
    background: #4488CC;
}

/* ── Dialog titles use the same color scheme as grid headers ── */

.mud-dialog .mud-dialog-title {
    background-color: #1a70b8;
    color: #c6d9f1;
}

    .mud-dialog .mud-dialog-title .mud-button-close {
        color: #c6d9f1;
    }

/* ── Segmeno-style data-grid header (blue primary bg, white text) ── */

.segmeno-grid thead th {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    font-weight: 600;
    border-color: var(--mud-palette-primary-lighten);
    padding: 4px 10px !important;
    font-size: 0.8rem;
    white-space: nowrap;
    border-right: 1px solid var(--mud-palette-table-lines);
}

.segmeno-grid thead th:last-child {
    border-right: none;
}

/* compact Segmeno-style rows. !important + .mud-table-cell to beat MudBlazor's
   .mud-table-dense .mud-table-cell padding; nowrap keeps every row a single line. */
.segmeno-grid tbody td,
.segmeno-grid .mud-table-cell {
    padding: 3px 10px !important;
    font-size: 0.8rem;
    line-height: 1.25rem;
    white-space: nowrap;
    border-right: 1px solid var(--mud-palette-table-lines);
}

.segmeno-grid tbody td:last-child,
.segmeno-grid .mud-table-cell:last-child {
    border-right: none;
}

/* keep MudTableSortLabel text + sort icon white on the colored header */
.segmeno-grid thead th .mud-table-sort-label,
.segmeno-grid thead th .mud-table-sort-label:hover,
.segmeno-grid thead th .mud-table-sort-label:focus,
.segmeno-grid thead th .mud-table-sort-label .mud-table-sort-label-icon {
    color: var(--mud-palette-primary-text) !important;
}

/* ── Uniform compact row height across all grids ───────────────────────────────────────────────
      Tighten the in-cell controls that inflate a row above the ~26px text baseline: action icon
      buttons and inline-edit text inputs. Scoped to body cells so footer Add/Refresh keep normal
      size. ── */
.segmeno-grid tbody td .mud-icon-button {
    padding: 2px;
}

.segmeno-grid tbody td .mud-icon-button .mud-icon-root {
    font-size: 1rem;
}

/* Flatten inline-edit MudTextFields so an editable row matches a plain-text row. MudTextField's
   control is a fixed ~32px (subtitle1 typography); shrink its font/line-height + drop margins. */
.segmeno-grid tbody td .mud-input-control,
.segmeno-grid tbody td .mud-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.segmeno-grid tbody td .mud-input.mud-input-text {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
}

.segmeno-grid tbody td .mud-input-slot input {
    font-size: 0.8rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
    height: auto;
}

/* ── Dashboard summary cards ── */
.dashboard-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.dashboard-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    min-width: 160px;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 4px;
}

.dashboard-card--clickable {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-card--clickable:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--mud-elevation-2);
}

.dashboard-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    line-height: 1.2;
}

.dashboard-card__label {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.dashboard-recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

/* ── Segmeno grid toolbar (search/filter controls above a .segmeno-grid-wrapper) ── */
.segmeno-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* ── Segmeno grid page (toolbar + grid + pager filling the content area,
      so the grid gets its own scrollbar instead of the whole page scrolling) ── */
.segmeno-grid-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ── Segmeno grid scroll wrapper (grid-level scrollbars, sticky header) ──
      This is the single scroll container for both axes. MudTable renders its
      own inner .mud-table-container with overflow-x:auto, which is exactly as
      tall as the full (unclipped) table — so its horizontal scrollbar would
      sit hundreds of pixels below the visible area once overflow-y clips this
      wrapper. Disable the inner container's own scrolling so only this
      wrapper scrolls, keeping the horizontal scrollbar docked to what's
      actually visible. */
.segmeno-grid-wrapper {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 200px;
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 4px;
}

.segmeno-grid-wrapper .mud-table-container {
    overflow: visible;
}

.segmeno-grid-wrapper .segmeno-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ── Segmeno pager footer ── */
.segmeno-pager {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 4px 8px;
    flex-wrap: wrap;
}

.segmeno-pager__goto {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.segmeno-pager__input {
    width: 3.5rem;
    text-align: center;
}

.segmeno-pager__sep {
    color: var(--mud-palette-text-secondary);
}

.segmeno-pager__divider {
    width: 1px;
    height: 1.5rem;
    background: var(--mud-palette-lines-default);
    margin: 0 0.5rem;
}

.segmeno-pager__label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

.segmeno-pager__info {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}