/* Shared AtOnce presentation styles reused by Shape.Web and Pairify.Web.
   Served at _content/AtOnce.Web.Shared/atonce-shared.css — reference it from each app's App.razor.
   Tab-bar styles are global (not component-scoped) so the SettingsButton interactive island
   inherits them. */

/* ── AtOnce tab bar ─────────────────────────────────────────────────────────── */

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

.atonce-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;
}

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

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

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

/* ── Dark mode: swap tabbar/inactive vs. active tab shades ───────────────────── */

html.dark .atonce-tabbar {
    background: #4488CC;
}

html.dark .atonce-tab--active {
    background: #1A70B8;
}

html.dark .atonce-tab--active:hover {
    color: #FFFFFF;
    background: #1A70B8;
}

/* ── Dialog titles use the same color scheme as grid headers (light & dark) ── */

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

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

/* ── Shape-style data-grid header (blue primary bg, white text), reused across apps ── */

.atonce-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;
}

/* compact Shape-style rows. !important + .mud-table-cell to beat MudBlazor's
   .mud-table-dense .mud-table-cell padding; nowrap keeps every row a single line. */
.atonce-grid tbody td,
.atonce-grid .mud-table-cell {
    padding: 3px 10px !important;
    font-size: 0.8rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

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

/* ── Report drill-down (breadcrumb + replace; unique shows two CDR grids) ── */
.drill-child-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1A70B8;
    margin-bottom: 2px;
}

html.dark .drill-child-title {
    color: #6ba4d6;
}

.drill-two {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.drill-two > div {
    flex: 1 1 360px;
    min-width: 0;
}

/* ── Shape-style settings-dialog grids (global mirror of UsersPanel.razor.css so Pairify's own
      settings panels match the shared Users/Folders/… tabs). Same values as the scoped copies. ── */

.settings-table .mud-table-head th {
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    background-color: #1a70b8;
    color: #c6d9f1;
    border-color: #c6d9f1;
}

.settings-table {
    overflow-x: auto;
}

.settings-table .mud-table-cell {
    padding: 3px 10px !important;
    font-size: 0.8rem;
    line-height: 1.25rem;
    white-space: nowrap;
    background-color: #ffffff;
    color: #000000;
}

html.dark .settings-table .mud-table-cell {
    background-color: #595959;
    color: #ffffff;
}

.settings-table .mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell {
    background-color: #eef4fb;
}

.settings-table .mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: #d9e8f6;
}

html.dark .settings-table .mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) .mud-table-cell {
    background-color: #636363;
}

html.dark .settings-table .mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell {
    background-color: #6e7f8f;
}

.settings-table .settings-add-btn {
    min-width: 0;
    padding: 2px 10px;
}

/* ── Uniform compact row height across ALL grids (Java jqxGrid rowsheight:25) ──────────────────
      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. Applies to both the Home data grids (.atonce-grid) and the settings grids
      (.settings-table). ── */
.atonce-grid tbody td .mud-icon-button,
.settings-table .mud-table-cell .mud-icon-button {
    padding: 2px;
}

.atonce-grid tbody td .mud-icon-button .mud-icon-root,
.settings-table .mud-table-cell .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. */
.atonce-grid tbody td .mud-input-control,
.settings-table .mud-table-cell .mud-input-control,
.atonce-grid tbody td .mud-input,
.settings-table .mud-table-cell .mud-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

.atonce-grid tbody td .mud-input.mud-input-text,
.settings-table .mud-table-cell .mud-input.mud-input-text {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
}

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