/* ---------------------------------------------------------------------------
   Component styles.

   SOURCE OF TRUTH: src/Hansell.UI/Resources/Styles/Styles.xaml. Each rule below names the
   XAML Style it mirrors. Because the tokens in tokens.css already swap for dark mode, these
   rules need no dark variants - they reference the semantic token, not a literal colour,
   exactly as the XAML references AppThemeBinding.

   Nothing here may reference a feature ViewModel, a Landlord route or a domain entity:
   this layer is intended to be reusable by the next Hansell web client.
   --------------------------------------------------------------------------- */

/* --- Buttons ------------------------------------------------------------- */
/* Implicit <Style TargetType="Button"> */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 24px;
  border: 0;
  border-radius: 6px;
  background-color: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: 0.875rem;           /* 14 */
  font-weight: var(--weight-medium);
  letter-spacing: 0.1px;
  cursor: pointer;
  text-decoration: none;
  transition: filter 120ms ease, background-color 120ms ease;
}

.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { filter: brightness(0.94); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Button "Disabled" VisualState */
.btn:disabled {
  background-color: var(--surface-variant);
  color: var(--on-surface-variant);
  cursor: not-allowed;
  filter: none;
}

/* Class="TextButton" */
.btn-text { background-color: transparent; border-color: transparent; color: var(--primary); }
/* Class="FilledButton" */
.btn-filled { background-color: var(--primary); color: var(--on-primary); }
/* Class="FilledSecondaryButton" */
.btn-filled-secondary { background-color: var(--secondary); color: var(--on-secondary); }
/* Class="FilledTertiaryButton" */
.btn-filled-tertiary { background-color: var(--tertiary); color: var(--on-tertiary); }
/* Class="OutlinedButton" */
.btn-outlined { background-color: transparent; border: 1px solid var(--outline); color: var(--primary); }
/* Class="SquareButton" */
.btn-square { background-color: var(--secondary); color: var(--on-secondary); }
/* Class="SquareOutlinedButton" */
.btn-square-outlined { background-color: transparent; color: var(--secondary); }
/* Class="DangerButton" */
.btn-danger { background-color: var(--error); color: var(--on-error); }
/* Class="CapsuleButton" */
.btn-capsule { border-radius: 20px; background-color: transparent; color: var(--primary); }

/* Class="FloatingButton" - the FAB. NOTE: the XAML sets the dark BackgroundColor to
   SecondaryContainer rather than SecondaryContainerDark, which looks like a copy/paste slip
   in Styles.xaml. Mirrored faithfully here so both platforms match; worth fixing in both. */
.btn-floating {
  width: 66px;
  height: 66px;
  padding: 0;
  border-radius: 20px;
  background-color: var(--secondary-container);
  color: var(--on-secondary-container);
  font-family: var(--font-icons);
  font-size: 1.875rem;           /* 30 */
}

/* --- Cards --------------------------------------------------------------- */
/* x:Key="BorderFilledCard" */
.card-filled {
  padding: 16px;
  border: 1px solid var(--surface);
  border-radius: 12px;
  background-color: var(--surface);
}

/* x:Key="BorderOutlineCard" */
.card-outlined {
  padding: 16px;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  background-color: var(--surface);
}

/* --- Dividers ------------------------------------------------------------ */
/* Class="Divider" / Class="DividerInset" on BoxView */
.divider { height: 1px; margin: 0; background-color: var(--outline-variant); border: 0; }
.divider-inset { height: 1px; margin: 10px 16px; background-color: var(--outline-variant); border: 0; }

/* --- Icons --------------------------------------------------------------- */
/* Mirrors FontFamily="Icons" usage. Codepoints are identical between the bundled
   MaterialSymbolsRounded.ttf and the Material Symbols Rounded web font. */
.icon {
  font-family: var(--font-icons);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* --- Layout helpers ------------------------------------------------------ */
/* VerticalStackLayout defaults in Styles.xaml: Margin 12, Spacing 12 */
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-inset { margin: 12px; }

.page {
  /* Implicit Page style: Padding 0, background White/Black */
  padding: 0;
  background-color: var(--background);
}

/* --- Popups --------------------------------------------------------------- */
/* Web counterpart of SfDialogPopup. Corner radius 28 and the SurfaceContainerHigh background
   match SfDialogPopup.xaml so dialogs read the same as on mobile. */
.popup-scrim {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: color-mix(in srgb, var(--scrim) 45%, transparent);
}

.popup-scrim--loading { cursor: progress; }

.popup {
    position: fixed;
    z-index: 101;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(24rem, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 24px;
    border-radius: 28px;
    background-color: var(--surface-container-high);
    color: var(--on-surface);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--shadow) 30%, transparent);
}

.popup--loading { background-color: transparent; box-shadow: none; }

.popup__title { margin: 0; text-align: center; }
.popup__message { margin: 0; text-align: center; color: var(--on-surface-variant); }

.popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.popup__options { list-style: none; margin: 0; padding: 0; width: 100%; }

.popup__option {
    width: 100%;
    min-height: 50px;          /* matches SfOptionsDialogPopup's ItemSize */
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
}

.popup__option:hover { background-color: var(--surface-variant); }

.lottie { display: block; }

/* ---------------------------------------------------------------------------
   Sub-forms: the four public-record screens (property information, lot size,
   HOA, parking), plus any later single-purpose form.

   Global rather than scoped because four pages share it. Note there is NO gap
   between fields here on purpose - the --field-gap rule in
   syncfusion-overrides.css already owns vertical rhythm for every Syncfusion
   input, and a second source of spacing would fight it.
   --------------------------------------------------------------------------- */
.subform {
    display: flex;
    flex-direction: column;
    padding: 16px;
    /* Mobile shows these as modal sheets, so they stay narrow on a wide screen
       rather than stretching a two-field form across a desktop monitor. */
    max-width: 34rem;
    margin-inline: auto;
    width: 100%;
}

.subform__banner {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin-block: 16px;
}

.subform__row {
    display: flex;
    gap: 8px;
    /* Syncfusion floats its label inside the box, SelectField puts it above, so the two are
       different overall heights. Aligning on the bottom edge keeps the input boxes themselves on
       one line, which is what reads as aligned. */
    align-items: end;
}

.subform__row > * { flex: 1 1 0; min-width: 0; }

/* The row is its own flex container, so column spacing comes from its gap and
   the children carry no margins of their own. */

.subform__check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.subform__check input {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
}

.subform__save { width: 100%; }

/* ---------------------------------------------------------------------------
   Native form controls dressed to match the Syncfusion outlined inputs.

   Used by SelectField and AutocompleteField, which replace SfDropDownList and
   SfAutoComplete - see gotchas.md for why. The measurements track the SF
   material3 outline so the two kinds of field line up in the same form.
   --------------------------------------------------------------------------- */
.field {
    display: block;
    margin-block: var(--field-gap);
    position: relative;
}

.field__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

.field__control { position: relative; display: block; }

.field__select,
.field__input {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--outline);
    border-radius: 4px;
    background-color: transparent;
    color: var(--on-surface);
    font: inherit;
    appearance: none;
}

.field__input { padding-right: 12px; }

.field__select:focus,
.field__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

/* Both, not just the select: a disabled date input otherwise stays full-strength white and reads
   as editable, which is how a locked contract's dates looked active while its text fields were
   correctly greyed. */
.field__select:disabled,
.field__input:disabled { color: var(--on-surface-variant); opacity: 0.6; }

/* The native arrow is hidden by appearance:none above; this is its replacement.
   pointer-events:none so clicks fall through to the select underneath. */
.field__chevron {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--on-surface-variant);
}

/* Options inherit the page background in some browsers and the OS one in others;
   set both so dark mode is legible either way. */
.field__select option { background-color: var(--surface); color: var(--on-surface); }

/* Autocomplete suggestions */
.field__popup {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    border: 1px solid var(--outline-variant);
    border-radius: 4px;
    background-color: var(--surface-container, var(--surface));
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

.field__option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
}

.field__option:hover,
.field__option--active { background-color: var(--surface-variant); }

.field__busy {
    padding: 10px 12px;
    color: var(--on-surface-variant);
}

/* A wider variant of .subform for forms with grouped sections, such as the contract screen.
   The four public-record forms stay narrow because they are two fields each. */
.subform--wide { max-width: 44rem; }

/* ---------------------------------------------------------------------------
   Page layout on wide screens.

   The content area beside the side rail is 1680px wide on a 1920px monitor. Pages used to cap
   themselves at 48-56rem and sit against the left edge, leaving half the screen empty. Now:

   - Collections (contract cards, fix requests, vendors, transactions, menus) flow into as many
     columns as fit. The column count follows the width actually available - not the viewport,
     which also includes the 240px rail - so a phone still gets exactly one column.
   - Long forms (.subform--wide: the contract and edit-profile screens) put their sections side by
     side.
   - Short forms (.subform) deliberately stay a centred column. A two-field form stretched across
     a monitor is harder to use, not easier; mobile shows these as sheets.
   --------------------------------------------------------------------------- */
:root { --grid-col-min: 22rem; }

@media (min-width: 1100px) {
    .subform--wide { max-width: none; margin-inline: 0; }

    .subform--wide .subform__form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
        column-gap: 32px;
        align-items: start;
    }

    /* Anything that is not a section - the action buttons - spans the full width beneath them. */
    .subform--wide .subform__form > :not(.contract__section) { grid-column: 1 / -1; }
}

.contract__status { color: var(--primary); }
.contract__actions { display: flex; flex-direction: column; gap: 12px; }

/* The native calendar button is invisible against a dark field otherwise: it is painted by the
   browser, so it takes the UA colour scheme rather than ours. */
[data-theme="dark"] .field__input[type="date"]::-webkit-calendar-picker-indicator,
:root:not([data-theme="light"]) .field__input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* ---------------------------------------------------------------------------
   Form rhythm — ONE owner of vertical spacing inside a form.

   Per-control margins cannot produce an even rhythm here, because the controls
   are not the same shape. A Syncfusion input carries its own margin-block and
   floats its label over its top border; SelectField and DateField put a real
   label above the box; a checkbox row has neither. Adjacent margins therefore
   summed differently depending on which pair met, and measurement on the
   contract screen found four different gaps in one form: 4px under a heading,
   14px between two Syncfusion inputs, 28px where a Syncfusion input met a
   SelectField (both margins applying), and 0px between a checkbox and the
   input below it - which is what read as overlapping.

   So the container owns it. One flex gap, every child spaced identically, and
   the per-control margins neutralised inside so they cannot add to it.
   --------------------------------------------------------------------------- */
.subform__form,
.contract__section {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
}

/* Neutralise every control's own margin inside a form; the gap replaces it. */
.subform__form :is(.e-input-group, .e-float-input, .e-control-wrapper.e-input-group, .field) {
    margin-block: 0;
}

/* Section headings: the gap already separates the heading from the first field,
   so the heading needs no margin of its own. */
.contract__heading,
.contract__status { margin: 0; }

/* Sections need more air between them than fields do within one. */
.contract__section + .contract__section { padding-top: 10px; }

/* The checkbox row's own padding is a click-target concession only - the gap
   supplies the separation. */
.subform__check { padding-block: 2px; }

/* A little extra before the submit button so it does not read as another field. */
.subform__save,
.contract__actions { margin-top: 8px; }

/* The file inputs behind IMediaService. Positioned off-screen rather than display:none or
   visibility:hidden - a click() on either of those is ignored by some browsers, and these inputs
   exist only to be clicked programmatically.

   Fixed and pinned to the corner, not merely absolute. An absolute box with no offsets stays at
   its static position - which is directly below the full-height shell - so it pushed the document
   1px past the bottom of the screen and gave every page a pointless scrollbar. A fixed box never
   contributes to scrolling. */
.media-host {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Ticket detail: attachments and the action row. */
.divider { width: 100%; height: 1px; border: 0; margin: 4px 0; background-color: var(--outline-variant); }

.ticket__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ticket__files { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }

.ticket__file {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--outline-variant);
}

.ticket__file-open {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 4px;
    border: 0;
    background: transparent;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
}

.ticket__file-open:hover { background-color: var(--surface-variant); }

.ticket__file-remove {
    flex: 0 0 auto;
    padding: 8px;
    border: 0;
    background: transparent;
    color: var(--error);
    cursor: pointer;
}

/* Attachment preview */
.preview { display: flex; justify-content: center; padding: 16px; }
.preview__image { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; }
.preview__empty { color: var(--on-surface-variant); text-align: center; }

/* "Keep me signed in" on the sign-in form. */
.auth__keep { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.auth__keep input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* Feedback attachment preview and identity-document capture. */
.feedback__preview, .doc__image {
    display: block; max-width: 100%; max-height: 40vh;
    object-fit: contain; border-radius: 12px;
}
.doc__note { color: var(--on-surface-variant); }
.stripe__title { margin: 0; text-align: center; }

.vendor__actions { display: flex; gap: 12px; }

/* Segmented control. Matches the M3 shape SfSegmentedControl draws on mobile: a single outlined
   track with the selected segment filled. */
.seg {
    display: flex;
    border: 1px solid var(--outline);
    border-radius: 20px;
    overflow: hidden;
}

.seg__item {
    flex: 1 1 0;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-inline-start: 1px solid var(--outline);
    background: transparent;
    color: var(--on-surface);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.seg__item:first-child { border-inline-start: 0; }
.seg__item:hover { background-color: var(--surface-variant); }

.seg__item--on {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
    font-weight: var(--weight-medium);
}

/* Menu rows, shared by Profile and Edit Profile. Global rather than scoped because scoped CSS
   only matches the component that declares it - the identity-document list on Edit Profile
   rendered as raw bullets while the same markup on Profile looked right. */
.profile__menu {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-col-min)), 1fr));
    column-gap: 24px;
    align-content: start;
    margin: 0;
    padding: 0;
}
.profile__menu-item { border-bottom: 1px solid var(--outline-variant); }

.profile__menu-inner {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 14px 4px; border: 0; background: transparent;
    color: var(--on-surface); text-align: left;
}

.profile__menu-btn { cursor: pointer; }
.profile__menu-btn:hover { background-color: var(--surface-variant); }
.profile__menu-sub { color: var(--on-surface-variant); }

.balance__field { display: flex; flex-direction: column; gap: 2px; padding-block: 6px; }
.invoice__cols { display: flex; flex-wrap: wrap; gap: 24px; }