/* Ontario CorpMate Government Forms - Shared Styles */

/* CorpMate page header (breadcrumbs + title + Reference/Docket) — rendered ABOVE the gov-form
   "paper", on the page background like the LienLynx registration header. Aligned to the same 8.5in
   width as .gov-form-container below so the header cards line up with the form sheet. Because it sits
   OUTSIDE .gov-form-container, the `.mud-paper { border:none }` reset never touches these cards, so
   their elevation/shadow render normally. */
.corpmate-page-header {
    max-width: 8.5in;
    margin: 0 auto 0.75rem auto;
}

/* Government Form Container.
   THEME-ADAPTIVE: the form sheet follows the active MudBlazor theme — a white "paper" sheet in light
   mode, a dark surface in dark mode. It uses the AMBIENT palette (no per-container palette override),
   so every MudBlazor input, alert, and control inside inherits the theme automatically. Only the
   custom gov-form chrome below (section-header bars, instructions, field borders) is converted to
   theme-aware palette variables so the whole form reads correctly in both themes. */
.gov-form-container {
    max-width: 8.5in;
    margin: 0 auto;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    padding: 0.25in 0.5in 0.5in 0.5in;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--mud-palette-divider);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    line-height: 1.4;
}

/* Header Layout */
.gov-form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.ontario-branding {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ontario-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle; /* Ensures inline alignment */
}

.ontario-text {
    font-size: 24pt;
    font-weight: bold;
}

.ministry-text {
    font-size: 10pt;
    line-height: 1.2;
}

.form-title-section {
    text-align: right;
}

.form-title-main {
    font-size: 16pt !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
}

.form-title-sub {
    font-size: 11pt !important;
    font-style: italic !important;
}

/* Section Headers — translucent brand tint reads as a light-blue bar on white and a lighter bar on
   the dark surface, visible in both themes (a fixed grey couldn't adapt). */
.gov-section-header {
    background: rgba(var(--mud-palette-primary-rgb), 0.15);
    color: var(--mud-palette-text-primary);
    padding: 5px 10px;
    font-size: 11pt;
    font-weight: bold;
    margin-bottom: 15px;
    border: 1px solid var(--mud-palette-divider);
}

/* Instructions */
.gov-instructions {
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    padding: 10px;
    margin-bottom: 20px;
    border-left: 3px solid var(--mud-palette-primary);
    font-size: 10pt;
}

/* Section Styling */
.gov-section {
    margin-bottom: 15px;
}

.section-content {
    padding: 0 10px;
}

/* CorpMate form action bar (CorpMateFormActionBar.razor) — Clear far left, everything else right.
   Deliberately a flat flex row: every button is a direct child, so an overflow wraps ONE button at
   a time. The previous markup grouped the right-hand buttons in a nested div, and because flex
   assigns items to lines by their content-based hypothetical size (shrinking happens afterwards,
   within a line), that whole group jumped to line 2 and left Clear orphaned above it.

   margin-right:auto on the first child is what separates Clear from the rest. It is used in place
   of justify-content:space-between precisely because it survives wrapping: on a wrapped line the
   remaining buttons stay right-aligned instead of jumping to the left edge.

   No flex-shrink here on purpose — letting the buttons shrink fits the row only by wrapping and
   clipping the labels and nearly doubling the row height (measured 58.9px vs 32.75px). */
.corpmate-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.corpmate-form-actions > :first-child {
    margin-right: auto;
}

/* Normalize the nested-MudContainer split.
   63 of the 117 CorpMate forms wrap their section body in <MudContainer Class="pa-3">; the other 54
   put their content straight into .section-content. MudBlazor's .pa-3 is `padding:12px !important`,
   and MudContainer also carries --gutters (16/24px), so those 63 forms rendered their sections inset
   ~22px horizontally against ~10px everywhere else, plus 12px of extra top/bottom — the single
   biggest visual difference across the form catalogue.

   .section-content already owns that spacing (0 10px above), so the nested container is pure
   double-padding. Neutralizing it here rather than deleting the element from 63 large .razor files
   keeps the change to one reviewable rule, cannot break markup by mismatching a closing tag, and
   automatically covers any future form that copies the pattern.

   `!important` is required to beat .pa-3's own `!important`; max-width is reset because MudContainer
   defaults to MaxWidth.Large, which would otherwise cap a section inside the 8.5in sheet. */
.gov-form-container .section-content > .mud-container {
    padding: 0 !important;
    max-width: none !important;
}

/* Repeater-row padding parity.
   113 forms build director/shareholder/partner repeater rows from
   <MudPaper Outlined="true" Class="pa-3 …"> (12px). Four forms — OntarioAnnualReturn_5284e,
   OntarioInitialReturn_5284e, OntarioNoticeOfChange and BcFirmRegistration — use <MudCard>
   instead, whose header and content default to 16px, so the same row sits 4px roomier.

   Note the elevation difference people expect here does NOT exist: MudCard also renders
   .mud-paper, so the `.gov-form-container .mud-paper { box-shadow/border: none }` reset above
   already flattens it exactly like the MudPaper rows. Padding was the only live delta, so it is
   the only thing corrected. Converting the MudCard markup to MudPaper would mean restructuring
   MudCardHeader/MudCardContent nesting inside four large, working filing forms for no further
   visual gain — deliberately not done. */
.gov-form-container .section-content .mud-card > .mud-card-content,
.gov-form-container .section-content .mud-card > .mud-card-header {
    padding: 12px;
}

.section-description {
    margin-bottom: 15px;
    font-size: 10pt;
    line-height: 1.3;
}

/* Clean form field styling using MudBlazor defaults */
.form-field {
    margin-bottom: 16px;
}

.form-field .mud-input-label {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Ensure consistent field styling regardless of validation state */
.form-field .mud-input-control fieldset {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.form-field.mud-input-error .mud-input-control fieldset {
    border-color: var(--mud-palette-lines-inputs) !important;
}

.form-field .mud-input-control:hover fieldset {
    border-color: var(--mud-palette-text-primary) !important;
}

.form-field .mud-input-control.mud-input-focused fieldset {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

/* Keep validation error text visible but don't change field borders */
.form-field .mud-input-helper-text {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
}

/* Required Field Indicators */
.required-label::after {
    content: " *";
    color: var(--mud-palette-error);
}

/* Form Layout */
.gov-form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.gov-form-col {
    flex: 1;
}

.gov-form-col-auto {
    flex: 0 0 auto;
}

/* Remove Material Design elevations and borders — scoped to CorpMate Ontario forms only.
   Previously this rule was unscoped and globally killed borders on every MudPaper in the app
   (including LienLynx dropzones), because `.mud-paper { border: none !important }` has equal
   specificity to MudBlazor's `.border-2 !important` / `.border-dotted !important` utilities
   but loads later in source order, so it wins the cascade. */
.gov-form-container .mud-paper {
    box-shadow: none !important;
    border: none !important;
}

/* PDF prefill dropzone — must KEEP its dotted outline even though the reset above strips borders
   off every other MudPaper in a CorpMate form. The extra `.corpmate-pdf-dropzone` class raises
   specificity (0,3,0) above the reset's `.gov-form-container .mud-paper` (0,2,0) so it wins; the
   bare selector also covers any future use outside a .gov-form-container. Mirrors the LienLynx
   dropzone look (which shows because LienLynx forms aren't wrapped in .gov-form-container). */
.mud-paper.corpmate-pdf-dropzone,
.gov-form-container .mud-paper.corpmate-pdf-dropzone {
    border: 2px dotted var(--mud-palette-lines-inputs) !important;
    border-radius: var(--mud-default-borderradius, 8px) !important;
    box-shadow: none !important;
    background-color: transparent !important;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.mud-paper.corpmate-pdf-dropzone.corpmate-pdf-dropzone--active,
.gov-form-container .mud-paper.corpmate-pdf-dropzone.corpmate-pdf-dropzone--active {
    border-color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-primary-hover) !important;
}

/* Help Icons — fixed brand blue with white glyph, legible on both themes. */
.help-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #0066cc;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
    margin-left: 5px;
    cursor: help;
}

/* Checkbox and Radio Button Styling */
.gov-checkbox-group,
.gov-radio-group {
    display: flex;
    gap: 20px;
    margin: 5px 0;
}

.gov-checkbox-item,
.gov-radio-item {
    display: flex;
    align-items: center;
}

/* Enlarge checkbox/radio inputs by 20% — scoped to CorpMate Ontario forms only.
   Previously this rule was unscoped and globally enlarged every MudCheckBox/MudRadio
   in the entire app (LienLynx, AccuCite, Admin, etc.) by 20%. */
.gov-form-container .mud-checkbox .mud-checkbox-input,
.gov-form-container .mud-radio .mud-radio-input {
    transform: scale(1.2);
    margin-right: 5px;
}

/* General form styling overrides */
.required-field {
    margin-bottom: 15px;
}

.form-grid {
    gap: 15px;
}

.field-label {
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 10pt;
    color: var(--mud-palette-text-primary);
}

/* Dropdown popup styling — theme-aware so gov-form selects match the active theme (the app's global
   dark-mode popover styling also covers these; these keep parity if the scoping classes are used). */
.corpmate-ontario-forms .mud-popover-provider .mud-list,
.ontario-form-container .mud-popover-provider .mud-list {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.corpmate-ontario-forms .mud-popover-provider .mud-list-item,
.ontario-form-container .mud-popover-provider .mud-list-item {
    background-color: transparent;
}

.corpmate-ontario-forms .mud-popover-provider .mud-list-item:hover,
.ontario-form-container .mud-popover-provider .mud-list-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
}

/* Alternative styling for select dropdowns */
.corpmate-ontario-forms .mud-select .mud-list,
.ontario-form-container .mud-select .mud-list {
    background-color: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.corpmate-ontario-forms .mud-select .mud-list-item:hover,
.ontario-form-container .mud-select .mud-list-item:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
}

/* Simple form section styling for other Ontario forms */
.form-header {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    border: 2px solid var(--mud-palette-divider);
    padding: 16px;
    margin-bottom: 16px;
}

.form-section {
    border: 1px solid var(--mud-palette-divider);
    margin-bottom: 12px;
    padding: 0;
}

.section-header {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
    padding: 8px 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.form-number-circle {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    text-align: center;
    line-height: 24px;
    margin-right: 8px;
    font-weight: bold;
}

.subsection-header {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    padding: 6px 12px;
    margin: 8px 0;
    font-weight: 500;
}

/* Reference and Docket Section Alignment */
.reference-docket-section {
    margin-bottom: 15px;
}

.reference-docket-container {
    padding: 0 10px; /* Match section-content exactly */
}

.reference-docket-grid {
    width: 100%;
    /* Remove custom spacing - let MudBlazor handle it naturally */
}