/*
    HEIFIT app-level rules for the ui-* hooks the design system (heifit-components.css) does not
    provide. Loaded after heifit-components.css and before app.css. Values come from
    heifit-tokens.css only; the local custom properties are the --z-* stacking scale below.
*/

/*
    z-index scale (low to high). Keep every layer in this list.
      1     --z-table-sticky  frozen table columns (local scale inside .ui-table-wrap, which isolates it)
      30    .top-row header             (MainLayout.razor.css)
      40    .hf-bottomnav               (heifit-components.css)
      50    .ui-filter-menu__panel      (below)
      200   --z-scrim         .hf-scrim modal backdrop; the .hf-sheet is its child
      1000  --z-dropdown      .notification-dropdown (notifications.css), #blazor-error-ui
      1100  --z-toast         .ui-toast-stack
*/
:root {
    --z-table-sticky: 1;
    --z-scrim: 200;
    --z-dropdown: 1000;
    --z-toast: 1100;
}

/* ---- Toasts (ToastStack / NotificationToast) ------------------------------------------------- */

/* Top-centre on phones with a safe gutter, top-right from 640px. Only the toasts take pointer events. */
.ui-toast-stack {
    position: fixed;
    top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    left: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: grid;
    gap: var(--space-2);
    max-width: 28rem;
    margin-inline: auto;
    pointer-events: none;
}

.ui-toast-stack > * {
    pointer-events: auto;
}

@media (min-width: 640px) {
    .ui-toast-stack {
        left: auto;
        right: var(--space-5);
        margin-inline: 0;
        width: 28rem;
    }
}

.ui-toast__message {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ui-toast__dismiss {
    flex: none;
    margin-left: auto;
}

/* Warning and info have no hf-banner variant: tone is shown by colour, border and a leading glyph. */
.ui-toast--warning {
    background: var(--notice-bg);
    color: var(--notice-ink);
    border: 1px solid var(--notice-border);
}

.ui-toast--info {
    background: var(--surface-300);
    color: var(--ink);
    border: 1px solid var(--border);
}

/* Decorative glyph; the empty alternative text keeps it out of the accessibility tree. */
.ui-toast--warning::before,
.ui-toast--info::before {
    content: "!" / "";
    flex: none;
    font-weight: 700;
}

.ui-toast--info::before {
    content: "i" / "";
}

/* ---- Tables (QuickGrid inside .ui-table-wrap or .hf-card) ------------------------------------ */

/* isolation keeps the frozen cells' z-indexes inside the wrapper so they cannot paint over the header, nav or modals. */
.ui-table-wrap {
    overflow-x: auto;
    isolation: isolate;
}

.ui-table-wrap table,
.hf-card table {
    width: 100%;
    border-collapse: collapse;
}

.ui-table-wrap th,
.hf-card table th {
    padding: var(--space-3);
    background: var(--surface-300);
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
}

.ui-table-wrap td,
.hf-card table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--divider);
}

/* Sortable QuickGrid headers render a button: reset the native look, focus ring comes from .hf-app. */
.ui-table-wrap th button,
.hf-card table th button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

/* Frozen columns. Left: first column. Right: action column. Header cells stack above body cells. */
.ui-col-frozen {
    position: sticky;
    left: 0;
    z-index: var(--z-table-sticky);
    background-color: var(--surface-200);
}

.ui-table-wrap thead .ui-col-frozen {
    z-index: calc(var(--z-table-sticky) + 1);
    background-color: var(--surface-300);
}

.ui-col-frozen-right {
    position: sticky;
    right: 0;
    z-index: calc(var(--z-table-sticky) + 1);
    background-color: var(--surface-200);
}

.ui-table-wrap thead .ui-col-frozen-right {
    z-index: calc(var(--z-table-sticky) + 2);
    background-color: var(--surface-300);
}

/* Modal backdrop above header (30), bottom nav (40) and filter panel (50); the sheet is its child. */
.hf-scrim {
    z-index: var(--z-scrim);
}

/* ---- Field, status badge, dialog -------------------------------------------------------------- */

.ui-required {
    color: var(--danger-ink);
    margin-left: var(--space-1);
}

.ui-status-badge--sm {
    padding: 2px var(--space-2);
    font-size: 11px;
    line-height: 14px;
}

.ui-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* Scrolls inside the 90vh sheet instead of pushing the sheet past the viewport. */
.ui-dialog__body {
    min-height: 0;
    max-height: calc(90vh - 8rem);
    overflow-y: auto;
}

/* ---- Filter menu ------------------------------------------------------------------------------- */

.ui-filter-menu {
    position: relative;
    display: inline-block;
}

.ui-filter-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 50;
    flex-direction: column;
    min-width: 14rem;
    padding: var(--space-3);
    background: var(--surface-200);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.ui-filter-menu__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    margin-left: var(--space-2);
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
}

.ui-filter-menu__checkbox {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0 var(--space-2) 0 0;
    accent-color: var(--brand);
    vertical-align: middle;
}

/* ---- Date strip -------------------------------------------------------------------------------- */

/* Corner month/year control (hf-datestrip-month) is not covered by heifit-components.css.
   It sits above the day-chip grid as its own row so it is not stretched to a day-chip's
   minmax(48px,1fr) column width and reads as a distinct "head" control, per the design
   system's DateStrip README. The wrap also hosts the hidden month-picker <input>. */
.hf-datestrip-wrap {
    display: grid;
    gap: var(--space-2);
}

.hf-datestrip-month {
    justify-self: start;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--divider);
    border-radius: var(--radius-pill);
    background: var(--surface-300);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-transform: capitalize;
    cursor: pointer;
}

.hf-datestrip-month:hover {
    background: var(--surface-200);
}

.ui-date-strip__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.75rem;
}

.ui-date-strip__day--selected {
    background: var(--brand);
    color: var(--on-brand);
}

/* Today is marked by an outline as well as colour. */
.ui-date-strip__day--today {
    box-shadow: inset 0 0 0 2px var(--brand);
}

/* ---- Calendar ---------------------------------------------------------------------------------- */

.ui-calendar {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-200);
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
}

.ui-calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.ui-calendar__title {
    font-weight: 700;
    text-transform: capitalize;
}

.ui-calendar__nav {
    min-width: var(--size-touch-dense);
    min-height: var(--size-touch-dense);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-size: 1.25rem;
    cursor: pointer;
}

.ui-calendar__nav:hover {
    background: var(--surface-300);
}

.ui-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
    text-align: center;
}

.ui-calendar__dow {
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.ui-calendar__day {
    position: relative;
    min-height: var(--size-touch-dense);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.ui-calendar__day:hover {
    background: var(--surface-300);
}

.ui-calendar__day--empty {
    cursor: default;
}

.ui-calendar__day--today {
    border-color: var(--brand);
    font-weight: 700;
}

.ui-calendar__day--selected,
.ui-calendar__day--selected:hover {
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 700;
}

.ui-calendar__dot {
    position: absolute;
    bottom: var(--space-1);
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: currentColor;
}

/* ---- Stepper ----------------------------------------------------------------------------------- */

.ui-stepper {
    display: flex;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-stepper__step {
    position: relative;
    display: grid;
    flex: 1;
    justify-items: center;
    gap: var(--space-1);
    min-width: 0;
    color: var(--ink-muted);
}

.ui-stepper__connector {
    position: absolute;
    top: 1rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--divider);
}

.ui-stepper__step:first-child .ui-stepper__connector {
    display: none;
}

.ui-stepper__index {
    position: relative;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: var(--surface-200);
    font-weight: 700;
}

.ui-stepper__label {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
}

/* Completed: filled; current: heavier ring and bold label; upcoming: muted outline. */
.ui-stepper__step--completed .ui-stepper__index {
    border-color: var(--success-solid);
    background: var(--success-bg);
    color: var(--success-ink);
}

.ui-stepper__step--completed .ui-stepper__connector {
    background: var(--success-solid);
}

.ui-stepper__step--current {
    color: var(--ink);
}

.ui-stepper__step--current .ui-stepper__index {
    border-width: 3px;
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}

.ui-stepper__step--current .ui-stepper__label {
    font-weight: 700;
}

/* ---- Payment method label (PaymentTypeLabel): small logo next to the method name ------------- */
.hf-paytype {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hf-paytype__logo {
    height: 20px;
    width: auto;
    max-width: 40px;
}

.hf-paytype__logo--plate {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    box-sizing: content-box;
}

/* ---- Payment order avatar (PaymentsInvoicesTabs): the method's logo instead of a generic icon - */
.hf-avatar__icon {
    height: 22px;
    width: auto;
    max-width: 32px;
}

.hf-avatar__icon--plate {
    background: #fff;
    border-radius: 50%;
    padding: 4px;
    box-sizing: content-box;
}