/* ============================================================================
   EgkActionBar — the header action pattern for document screens
   ----------------------------------------------------------------------------
   One row, four zones, read left to right (mirrored in RTL):

     [utility icons] | [status pill] [secondary …] [PRIMARY] [⋮]

   The primary action is the only filled button. Secondary actions are
   outlined and lose their labels first when space runs out; utilities are
   bare icon buttons; the overflow menu holds what must exist but must not
   compete. Colour comes from --mud-palette-* / --egk-* tokens so Theme Studio
   and dark mode work without a second stylesheet.
   ========================================================================== */

.egk-action-bar {
    --bar-gap: var(--egk-space-2, 8px);
    --bar-radius: calc(var(--dash-radius-sm, 10px) + 2px);

    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--bar-gap);
    row-gap: var(--bar-gap);
    min-inline-size: 0;
    max-inline-size: 100%;
}

.egk-action-bar--dense {
    --bar-gap: 6px;
}

.egk-action-bar__group {
    display: inline-flex;
    align-items: center;
    gap: var(--bar-gap);
    min-inline-size: 0;
}

.egk-action-bar__group--utility {
    gap: 2px;
}

/* A hairline between housekeeping and the real actions, not a boxed toolbar. */
.egk-action-bar__divider {
    display: inline-block;
    inline-size: 1px;
    block-size: 22px;
    margin-inline: 2px;
    background: var(--mud-palette-divider);
    opacity: 0.9;
}

/* ------------------------------------------------------------- buttons --- */

.egk-action-bar .egk-action-bar__btn.mud-button-root {
    border-radius: var(--bar-radius);
    font-weight: var(--egk-weight-semibold, 600);
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    min-inline-size: 0;
}

.egk-action-bar .egk-action-bar__btn--primary.mud-button-root {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 6px 14px -10px rgba(var(--egk-color-primary-rgb, 25, 118, 210), 0.65);
}

.egk-action-bar .egk-action-bar__btn--primary.mud-button-root:not(.mud-disabled):hover {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1), 0 8px 18px -10px rgba(var(--egk-color-primary-rgb, 25, 118, 210), 0.8);
}

.egk-action-bar .egk-action-bar__btn--secondary.mud-button-root {
    border-color: var(--mud-palette-divider);
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
}

.egk-action-bar .egk-action-bar__btn--secondary.mud-button-root:not(.mud-disabled):hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-divider));
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.egk-action-bar .egk-action-bar__btn--secondary.mud-button-outlined-error.mud-button-root {
    color: var(--mud-palette-error);
}

.egk-action-bar .egk-action-bar__btn .mud-button-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
}

.egk-action-bar__label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.egk-action-bar__spinner.mud-progress-circular {
    --mud-progress-size: 16px;
    inline-size: 16px !important;
    block-size: 16px !important;
    margin-inline-end: 2px;
}

.egk-action-bar__btn--busy.mud-button-root {
    cursor: progress;
}

/* Count after the label: "Sync with ETA  3". Inherits the button colour so a
   filled primary shows a light chip and an outlined secondary a tinted one. */
.egk-action-bar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 5px;
    border-radius: var(--egk-radius-full, 9999px);
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.egk-action-bar .egk-action-bar__btn--primary .egk-action-bar__badge {
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
}

.egk-action-bar__menu-divider.mud-divider {
    margin-block: 4px;
}

.egk-action-bar__badge--menu {
    margin-inline-start: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 16%, transparent);
    color: var(--mud-palette-text-secondary);
}

/* ----------------------------------------------------------- utilities --- */

.egk-action-bar .egk-action-bar__icon.mud-icon-button {
    color: var(--mud-palette-text-secondary);
    border-radius: var(--bar-radius);
}

.egk-action-bar .egk-action-bar__icon.mud-icon-button:not(.mud-disabled):hover {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.egk-action-bar__icon--busy .mud-icon-root {
    animation: egk-action-bar-spin 900ms linear infinite;
}

@keyframes egk-action-bar-spin {
    to { transform: rotate(360deg); }
}

.egk-action-bar .egk-action-bar__overflow .mud-icon-button {
    color: var(--mud-palette-text-secondary);
    border-radius: var(--bar-radius);
}

/* -------------------------------------------------------------- status --- */

.egk-action-bar__status {
    --st-color: var(--mud-palette-text-secondary);
    --st-rgb: var(--mud-palette-text-secondary-rgb, 100, 116, 139);
    --st-tint: 0.08;
    --st-line: 0.22;

    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-inline-size: 18rem;
    block-size: 26px;
    padding-inline: 9px 10px;
    border-radius: var(--egk-radius-full, 9999px);
    border: 1px solid rgba(var(--st-rgb), var(--st-line));
    background: rgba(var(--st-rgb), var(--st-tint));
    color: var(--st-color);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.005em;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    animation: egk-action-bar-status-in 180ms ease-out;
}

@keyframes egk-action-bar-status-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

.egk-action-bar__status-text {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.egk-action-bar__status-icon.mud-icon-root {
    flex: 0 0 auto;
    inline-size: 14px;
    block-size: 14px;
    font-size: 14px;
}

.egk-action-bar__status-spinner.mud-progress-circular {
    flex: 0 0 auto;
    inline-size: 14px !important;
    block-size: 14px !important;
    color: inherit;
}

.egk-action-bar__status--busy {
    --st-color: var(--egk-color-primary, var(--mud-palette-primary));
    --st-rgb: var(--egk-color-primary-rgb, 25, 118, 210);
    --st-tint: 0.07;
    --st-line: 0.28;
}

.egk-action-bar__status--ok {
    --st-color: var(--egk-color-success, var(--mud-palette-success));
    --st-rgb: var(--mud-palette-success-rgb, 46, 125, 50);
    --st-tint: 0.09;
    --st-line: 0.3;
}

.egk-action-bar__status--warning {
    --st-color: var(--egk-color-warning, var(--mud-palette-warning));
    --st-rgb: var(--mud-palette-warning-rgb, 237, 108, 2);
    --st-tint: 0.1;
    --st-line: 0.32;
}

.egk-action-bar__status--error {
    --st-color: var(--egk-color-error, var(--mud-palette-error));
    --st-rgb: var(--mud-palette-error-rgb, 211, 47, 47);
    --st-tint: 0.08;
    --st-line: 0.32;
}

.egk-action-bar__status--muted {
    --st-color: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.38));
    --st-tint: 0.05;
    --st-line: 0.16;
}

/* ----------------------------------------------------------- responsive --- */

/* Tablet: secondary actions keep their icon and drop their label; the primary
   keeps both. Icon-only secondaries become squares so the row stays even. */
@media (max-width: 1100px) {
    .egk-action-bar .egk-action-bar__btn--collapsible .egk-action-bar__label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .egk-action-bar .egk-action-bar__btn--collapsible.mud-button-root {
        min-inline-size: 2.25rem;
        padding-inline: 0.55rem;
    }

    .egk-action-bar .egk-action-bar__btn--collapsible .mud-button-icon-start {
        margin-inline-end: 0;
    }

    .egk-action-bar .egk-action-bar__btn--collapsible .egk-action-bar__badge {
        margin-inline-start: 2px;
    }
}

/* Phone: the bar takes the full row under the title; the status pill keeps
   only its icon or spinner so the actions stay reachable. */
@media (max-width: 600px) {
    .egk-action-bar {
        inline-size: 100%;
        justify-content: flex-start;
    }

    .egk-action-bar__group--main {
        margin-inline-start: auto;
    }

    .egk-action-bar__status {
        max-inline-size: 26px;
        padding-inline: 0;
        justify-content: center;
    }

    .egk-action-bar__status-text {
        display: none;
    }

    .egk-action-bar__divider {
        display: none;
    }
}

/* Touch targets on coarse pointers. */
@media (pointer: coarse) {
    .egk-action-bar .egk-action-bar__icon.mud-icon-button,
    .egk-action-bar .egk-action-bar__overflow .mud-icon-button {
        min-block-size: 2.5rem;
        min-inline-size: 2.5rem;
    }
}

/* ----------------------------------------------------------- dark mode --- */

.mud-theme-dark .egk-action-bar__status {
    --st-tint: 0.14;
    --st-line: 0.3;
}

.mud-theme-dark .egk-action-bar .egk-action-bar__btn--secondary.mud-button-root {
    background: color-mix(in srgb, var(--mud-palette-surface) 80%, transparent);
}

/* Print never needs actions. */
@media print {
    .egk-action-bar {
        display: none !important;
    }
}

/* Host adjustments: inside DashHeader the actions cell is itself a flex row; let
   the bar own the width so it can right-align and wrap on its own terms. */
.dash-header__actions > .egk-action-bar,
.egk-smart-header__panel > .mud-stack > .egk-action-bar {
    flex: 1 1 100%;
}