/* ============================================================
   eCAP Utilities
   ------------------------------------------------------------
   Single-purpose helper classes. Each rule does one thing only
   and is safe to apply alongside any other class. Naming follows
   `ecap-{property}-{value}`.

   Why these exist (vs. inline `style="..."`):
   - The project forbids inline styles (CLAUDE.md).
   - Utility classes keep markup readable without inventing a
     bespoke component class for one-off styling.

   Loaded near the END of the cascade so utilities can override
   component CSS where intended.
   ============================================================ */

/* ---------- Layout gaps ----------
   Off-grid values not covered by Bootstrap's gap-N scale. */
.ecap-gap-6px  { gap: 6px; }
.ecap-gap-8px  { gap: 8px; }
.ecap-gap-10px { gap: 10px; }
.ecap-gap-24px { gap: 24px; }

/* ---------- Font weight ---------- */
.ecap-fw-500 { font-weight: var(--ecap-fw-medium); }
.ecap-fw-600 { font-weight: var(--ecap-fw-semibold); }
.ecap-fw-700 { font-weight: var(--ecap-fw-bold); }

/* ---------- Text ---------- */
.ecap-text-error        { color: var(--mud-palette-error); }
.ecap-text-success      { color: var(--mud-palette-success); }
.ecap-text-italic       { font-style: italic; }
.ecap-text-secondary    { color: var(--mud-palette-text-secondary); }
.ecap-text-placeholder  { color: var(--ecap-color-gray-400); }
.ecap-nowrap            { white-space: nowrap; }
.ecap-nowrap-bold       { white-space: nowrap; font-weight: var(--ecap-fw-semibold); }
/* Preserve authored line breaks / bullets / tabs in Dynamics free-text
   fields (e.g. ewosa_ewosarequirements) while still wrapping long lines. */
.ecap-prewrap           { white-space: pre-wrap; }

/* ---------- Collapsible row toggle ----------
   Plain <button> that flips a chevron and reveals/hides a list below.
   Strips native button chrome so the button reads as a heading row.
   Used by CaseRequirements and CloseCaseView for contact-history. */
.ecap-history-toggle {
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: inherit;
    font: inherit;
}
.ecap-history-toggle:hover { opacity: 0.85; }
.ecap-history-toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--ecap-radius-sm);
}
.ecap-letter-spaced     { letter-spacing: 1.5px; }

/* ---------- Sizing ---------- */
.ecap-w-full        { width: 100%; }
.ecap-min-w-0       { min-width: 0; }
.ecap-flex-1        { flex: 1; }
.ecap-flex-1-min0   { flex: 1; min-width: 0; }
.ecap-page-narrow   { max-width: 900px; }
.ecap-tight-row-220     { width: 220px; flex-shrink: 0; }
.ecap-tight-row-220-top { width: 220px; flex-shrink: 0; align-self: flex-start; }
.ecap-input-tall    { height: 56px; min-width: 100px; }
.ecap-scroll-y-350  { max-height: 350px; overflow-y: auto; }

/* ---------- Spacing nudges ---------- */
.ecap-mt-2px        { margin-top: 2px; }
.ecap-checkbox-nudge { margin-top: -4px; }

/* ---------- Icon sizes ----------
   Replace inline `Style="font-size: X"` patterns on <MudIcon>. */
.ecap-icon-sm   { font-size: 1rem; }
.ecap-icon-md   { font-size: 1.25rem; }
.ecap-icon-lg   { font-size: var(--ecap-text-5xl); }
.ecap-icon-xl   { font-size: 2rem; }
.ecap-icon-2xl  { font-size: 2.5rem; }
.ecap-icon-hero { font-size: 3.5rem; }
.ecap-icon-mega { font-size: 4rem; }
.ecap-icon-warning-inline { font-size: 20px; flex-shrink: 0; }

/* ---------- Avatars (utility sizing) ----------
   Compound selector (`.mud-avatar.ecap-avatar-*`) so the specificity ties
   MudBlazor's `.mud-avatar.mud-avatar-small/medium/large` defaults and our
   width/height/font-size win the cascade (utilities.css loads after the
   MudBlazor stylesheet). */
.mud-avatar.ecap-avatar-24       { font-size: var(--ecap-text-2xs); font-weight: var(--ecap-fw-bold); width: 24px; height: 24px; }
.mud-avatar.ecap-avatar-28       { font-size: var(--ecap-text-xs);  font-weight: var(--ecap-fw-bold); width: 28px; height: 28px; }
.mud-avatar.ecap-avatar-32       { font-size: var(--ecap-text-xs); font-weight: var(--ecap-fw-bold); width: 32px; height: 32px; }

/* ---------- Mini interactive elements ---------- */
.ecap-mini-icon-btn       { font-size: 0.7rem; width: 24px; height: 24px; }
.ecap-spinner-14          { width: 14px; height: 14px; }

/* ---------- Lists / bullets ---------- */
.ecap-bullet-stack { list-style-type: disc; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Tooltip content ---------- */
.ecap-tooltip-pad { padding: 4px 2px; min-width: 160px; }

/* ---------- Surfaces ---------- */
.ecap-translucent-panel { background: rgb(255 255 255 / 0.6); border-radius: var(--ecap-radius-md); }
.ecap-neutral-panel,
.ecap-member-info-panel {
    background-color: var(--ecap-color-gray-100);
    border-radius: var(--ecap-radius-md);
}
.ecap-ref-pill {
    font-family: monospace;
    background-color: var(--ecap-color-gray-100);
    padding: 6px 8px;
    border-radius: var(--ecap-radius-sm);
}

/* ---------- Dividers ---------- */
.ecap-divider-bottom    { border-bottom: 1px solid var(--mud-palette-divider); }
.ecap-section-divider   { border-bottom: 1px solid var(--mud-palette-lines-default); }

/* ---------- A11y: visually hidden ----------
   Proper sr-only pattern. `display: none` would hide it from
   screen readers too. */
.ecap-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Responsive visibility ----------
   Use these instead of MudHidden — Mud's WASM render is flaky for
   visibility-driven layouts. */
@media (max-width: 959.98px) { .ecap-desktop-only { display: none !important; } }

@media (min-width: 960px)    { .ecap-mobile-only  { display: none !important; } }

/* ---------- MudMenu disabled-static ----------
   For passive header items in dropdowns (group labels). */
.ecap-menu-disabled-static { opacity: 1; cursor: default; pointer-events: none; }