/* Component defaults for the operator application. Family styles own layout only.
   Native controls below are the documented SSR selection/upload exceptions. */
:is(.cc-shell, .cc-auth-shell) { --mud-default-borderradius: 10px; }
.cc-auth-shell { --cc-accent-strong: color-mix(in srgb, var(--mud-palette-primary) 85%, var(--mud-palette-text-primary)); }
:is(.cc-shell, .cc-auth-shell) .mud-typography:is(h1,h2,h3,h4,h5,h6) {
    font-family: var(--mud-typography-default-family);
    letter-spacing: normal;
    color: var(--mud-palette-text-primary);
}
:is(.cc-shell, .cc-auth-shell) h1.mud-typography { font-size: var(--mud-typography-h1-size); font-weight: 700; line-height: 1.4; }
:is(.cc-shell, .cc-auth-shell) h2.mud-typography { font-size: var(--mud-typography-h2-size); font-weight: 700; line-height: 1.5; }
:is(.cc-shell, .cc-auth-shell) h3.mud-typography { font-size: var(--mud-typography-h3-size); font-weight: 700; line-height: 1.5; }

/* Override legacy button classes with MudBlazor's semantic variants. */
:is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button {
    min-height: 44px; min-width: 64px; padding: 8px 16px; border-radius: var(--mud-default-borderradius);
    font-size: var(--mud-typography-button-size); font-weight: 600; line-height: 1.75;
    font-family: var(--mud-typography-button-family); text-transform: none;
    background: transparent; color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-divider); box-shadow: none;
}
:is(.cc-shell, .cc-auth-shell) .mud-button .mud-button-label { gap: 6px; }
:is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button:hover { background: var(--mud-palette-action-default-hover, rgb(86 105 114 / 8%)); }
:is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button-filled-primary {
    background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); border-color: var(--mud-palette-primary);
}
:is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button-filled-primary:hover { background: var(--cc-accent-strong, var(--mud-palette-primary-darken)); }
:is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button-outlined-error { color: var(--mud-palette-error); border-color: var(--mud-palette-error); background: transparent; }
:is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button-outlined-error:hover { background: var(--mud-palette-error-hover); }
:is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button:disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
:is(.cc-shell, .cc-auth-shell) .mud-button-root.cc-icon-button { min-width: 44px; width: 44px; padding: 8px; }

/* Native labels continue to label the real input, not a hidden duplicate. */
:is(.cc-shell, .cc-auth-shell) .cc-text-field,
:is(.cc-shell, .cc-auth-shell) .cc-select-field { margin: 0; min-width: 0; width: 100%; }
:is(.cc-shell, .cc-auth-shell) .cc-text-field .mud-input { margin: 0; background: var(--mud-palette-surface); border-radius: var(--mud-default-borderradius); }
:is(.cc-shell, .cc-auth-shell) .cc-text-field .mud-input > .mud-input-root {
    box-sizing: border-box; min-width: 0; min-height: 44px; padding: 10px 12px; border: 0; border-radius: inherit;
    background: transparent; color: var(--mud-palette-text-primary); box-shadow: none;
    font: inherit; font-weight: 400; outline: none;
}
:is(.cc-shell, .cc-auth-shell) .cc-text-field .mud-input-outlined-border { border-color: var(--mud-palette-lines-inputs); }
:is(.cc-shell, .cc-auth-shell) .cc-text-field .mud-input:focus-within .mud-input-outlined-border { border-color: var(--mud-palette-primary); border-width: 2px; }
:is(.cc-shell, .cc-auth-shell) .cc-text-field .mud-input-root:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
:is(.cc-shell, .cc-auth-shell) .cc-ssr-select {
    box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 44px;
    padding: 10px 12px; border: 1px solid var(--mud-palette-lines-inputs); border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); font: inherit; font-weight: 400;
}
:is(.cc-shell, .cc-auth-shell) .cc-ssr-select[multiple] { min-height: 112px; }
:is(.cc-shell, .cc-auth-shell) .cc-ssr-select:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
:is(.cc-shell, .cc-auth-shell) .cc-native-choice { display: inline-flex; flex: 0 0 auto; margin: 0; width: auto; }
:is(.cc-shell, .cc-auth-shell) .cc-native-choice input:is([type=checkbox],[type=radio]) { width: 20px; height: 20px; min-height: 20px; accent-color: var(--mud-palette-primary); }
:is(.cc-shell, .cc-auth-shell) .cc-native-choice:has(input[type=file]) { display: block; width: 100%; }
:is(.cc-shell, .cc-auth-shell) .cc-native-choice input[type=file] { width: 100%; min-width: 0; }

/* Tables keep a real table and their captions; every family shares spacing and surfaces. */
:is(.cc-shell, .cc-auth-shell) .mud-simple-table { width: 100%; min-width: 0; max-width: 100%; border-radius: var(--mud-default-borderradius); background: var(--mud-palette-surface); }
:is(.cc-shell, .cc-auth-shell) .mud-simple-table table { width: 100%; border-collapse: collapse; background: var(--mud-palette-surface); }
:is(.cc-shell, .cc-auth-shell) .mud-simple-table table :is(th,td) { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--mud-palette-divider); color: var(--mud-palette-text-primary); font-size: .875rem; line-height: 1.8; }
:is(.cc-shell, .cc-auth-shell) .mud-simple-table table th { background: var(--mud-palette-background-grey); color: var(--mud-palette-text-secondary); font-weight: 600; }
:is(.cc-shell, .cc-auth-shell) .mud-simple-table table tbody tr:hover { background: var(--mud-palette-table-hover); }
:is(.cc-shell, .cc-auth-shell) .mud-paper.mud-paper-outlined { border-color: var(--mud-palette-divider); border-radius: 14px; background: var(--mud-palette-surface); box-shadow: none; }
:is(.cc-shell, .cc-auth-shell) .mud-chip { min-height: 28px; border-radius: 6px; font: 600 .75rem/1.6 var(--mud-typography-default-family); }
:is(.cc-shell, .cc-auth-shell) .mud-alert { margin-block: 12px; border-radius: var(--mud-default-borderradius); }

@media (max-width: 600px) {
    :is(.cc-shell, .cc-auth-shell) .mud-simple-table table :is(th,td) { padding: 10px 12px; }
    :is(.cc-shell, .cc-auth-shell) .mud-button-root.mud-button { max-width: 100%; white-space: normal; }
}