/**************/
/*** LAYOUT ***/
/**************/

:root {
    /* ---- App-shell scaling tokens ---- */
    --zk-appbar-height: 64px;
    --zk-fab-offset: 2.5rem;

    --zk-drawer-top-offset: 150px;
    --zk-drawer-inset-y: clamp(0.5rem, 2vh, 1.5rem);

    /* Reusable icon + spacing scale for component sizing rem so they scale with the root */
    --zk-icon-sm: min(1rem, 16px);
    --zk-icon-md: min(1.5rem, 26px);
    --zk-icon-lg: min(2.25rem, 36px);
    --zk-space-1: 0.25rem;
    --zk-space-2: 0.5rem;
    --zk-space-3: 1rem;
    --zk-space-4: 1.5rem;
    --zk-space-5: 2rem;
}

html {
    height: 100%;
    font-size: clamp(0.9rem, 0.85rem + 0.125vw, 1.05rem);
}

body {
    height: 95%;
}

/* Overrides MudBlazor style */
.mud-collapse-wrapper-inner {
    background-color: rgba(183, 183, 183, 0.1);
}


.zk-topbar-logo {
    height: clamp(2.75rem, 4rem, 4.5rem);
    max-height: clamp(2.75rem, 4rem, 4.5rem);
    max-width: 100%;
    width: auto;
    display: block;
    margin-left: -14px;
}

.main-appBar {
    border-bottom-width: thin;
    border-bottom-color: var(--mud-palette-text-primary);
}

.main-navBar {
    border-right-width: medium;
    border-bottom-color: #32A8C2;
}

.main-footer {
    background-color: transparent;
    flex-wrap: wrap;
    align-content: center;
    height: 5%;
}

.main-nav-menu-collapsable-item {
    border-top-width: thin;
    border-top-color: var(--mud-palette-secondary);
}

/*********************/
/*** PAGE TEMPLATE ***/
/*********************/

.page-heading {
    text-transform: uppercase;
    font-weight: 900;
}

div:has(header.zk-location-app-bar) {
    height: unset !important;
}

.zk-location-app-bar {
    position: sticky !important;
    top: var(--zk-appbar-height) !important;
    margin-top: -8px;
    margin-bottom: -60px;
    padding: 0px 0px 6px 0px;
}

/*********************/
/*****  DIALOG   *****/
/*********************/
.main-dialog {
    /*color: var(--mud-palette-primary);*/
    outline: solid 1px;
}

/* Caps a dialog to the viewport instead of overflowing it.
   Set --zk-dialog-width / --zk-dialog-max-height per-dialog (inline style) to
   preserve today's desktop size; the min() only kicks in below that size. */
.zk-dialog-responsive {
    width: min(94vw, var(--zk-dialog-width, 600px));
    max-height: min(92vh, var(--zk-dialog-max-height, 90vh));
    overflow-y: auto;
}

/*********************/
/******* LOGIN *******/
/*********************/

.zk-login-background {
    position: fixed;
    inset: 0;
    min-width: 100%;
    background-position: center bottom;
}

/* Light-mode background only: pulls the image's bottom edge up and away
   from the viewport bottom as the viewport narrows — same width signal
   that shrinks the logo via max-width:100% — without resizing the image
   itself. No change above 900px wide; below that it shifts up to 270px
   (900 * 0.3) at 0 width. Tune the 900px breakpoint and 0.3 multiplier to
   taste. The dark-mode background keeps the static position above instead. */
.zk-login-background-shift {
    background-position: center bottom max(0px, calc((900px - 100vw) * 0.3));
}

.zk-login-form {
    background: transparent;
    border: none;
    border-style: none;
}

/* Vertical shell for the login page. The footer is a real fixed-to-bottom
   bar (MudAppBar Bottom="true") like before, so it stays anchored to the
   viewport regardless of content height. The middle section scrolls on
   its own (rather than the fixed footer) and reserves --zk-login-footer-height
   of bottom padding, so its last item is never rendered underneath the bar. */
.zk-login-page {
    --zk-login-footer-height: 2.75rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.zk-login-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(0.5rem, 3vh, 2rem);
    padding-bottom: calc(var(--zk-login-footer-height) + clamp(0.5rem, 3vh, 2rem));
}

.zk-login-footer {
    height: var(--zk-login-footer-height);
    z-index: 10;
}

/*********************/
/***     TABS      ***/
/*********************/

.zk-tabs {
    height: 100%;
}

.zk-tab-panel {
    height: 95%;
}

.mud-tab {
    text-transform: none;
}

a.mud-nav-link {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
}

button.mud-nav-link {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
}

/*********************/
/***     TABLE     ***/
/*********************/

.zk-table {
    height: 95%;
}

/* Scroll wide tables horizontally instead of crushing their columns.
   Below its Breakpoint, MudTable switches into its own card/stacked mode
   (adds a mud-xs/sm/md/lg-table class and lays rows out as label/value
   blocks instead of a row) — the :not() guards make sure the forced
   min-width never fights that stacked layout once it's active. */
.zk-table .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.zk-table:not(.mud-xs-table):not(.mud-sm-table):not(.mud-md-table):not(.mud-lg-table) table {
    min-width: max-content;
}

/* Opt-in "expanded card row" layout: add this class alongside zk-table (and
   keep Breakpoint="Breakpoint.Sm" on the MudTable) to replace MudBlazor's
   native single-column label:value stacking below 960px with a richer card
   — a header line (ResponsiveTableCardRow's HeaderContent + HeaderActions)
   followed by a wrapping field grid (ResponsiveCardField). Each row's
   RowTemplate adds one extra trailing <MudTd class="zk-card-cell" colspan=N>
   holding that card; this rule hides every other cell in the row below
   960px and shows only the card cell, leaving the desktop row (960px+)
   completely untouched. */
.zk-card-cell {
    display: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* MudBlazor's .mud-table-row sets vertical-align:middle, which would
       otherwise center this cell's content within the row and leave a gap
       above the card header. */
    vertical-align: top !important;
}

/* MudBlazor's native stacked mode injects a ::before "label:" pseudo-element
   (content: attr(data-label)) on every .mud-table-cell, including this one —
   since this cell has no data-label, it renders empty but still occupies an
   inline line-box above our block-level card content. Suppress it here. */
.zk-card-cell::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 959px) {
    .zk-responsive-cards .mud-table-cell:not(.zk-card-cell) {
        display: none;
    }

    .zk-responsive-cards .zk-card-cell {
        display: table-cell;
    }

    .zk-responsive-cards .mud-table-row {
        display: table-row;
    }
}

.zk-card-row {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* Flush against the row's top/left/right edges — only its own padding
   keeps the header content away from those edges. */
.zk-card-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zk-space-2);
    font-weight: 600;
    font-size: 1.05rem;
    padding: var(--zk-space-2);
    padding-left: var(--zk-space-4);
    padding-right: var(--zk-space-4);
}

/* MudGrid's own gutter mechanism (Spacing="2") gives each grid a negative
   left/top margin equal to the spacing, which eats into this container's
   left padding — bump the sides up so a gap still survives that offset. */
.zk-card-row-fields {
    padding: var(--zk-space-2) var(--zk-space-4);
}

/* MudGrid's row is a flex line (align-items defaults to stretch), so each
   ResponsiveCardField item already matches the tallest sibling in its row —
   this just makes the card itself grow to fill that height so every card in
   the row is the same height, instead of only the item wrapper. */
.zk-card-field {
    display: flex;
    flex-direction: column;
    padding: var(--zk-space-2)
}

.zk-card-field-label {
    display: block;
    opacity: 0.7;
    font-size: 0.75rem;
    line-height: 1.2;
    margin-bottom: 2px;
}

/* Each field's value renders inside its own MudCard, centered, no shadow,
   outlined in the primary color instead. */
.zk-card-field-value {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--zk-space-2);
    box-shadow: none;
    border: 1px solid var(--mud-palette-primary);
    min-height: 45px;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.zk-table-row-selected {
    background-color: var(--mud-palette-primary-lighten) !important;
}
.zk-table-row-selected > td {
    color: white !important;
}

.zk-table-row-selected > td .mud-input {
    color: white !important;
}

/*********************/
/***  RESPONSIVE   ***/
/*********************/

/* Keeps a strip of items on a single row.
   Items compress with the available width and the row scrolls horizontally
   once they hit their minimum size, instead of wrapping onto a new line. */
.zk-row-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

.zk-row-scroll > * {
    flex-shrink: 0;
}

/* Lets toolbar controls wrap onto their own line on narrow screens instead
   of leaving stranded empty flex tracks (e.g. runs of multiple MudSpacer). */
.zk-toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--zk-space-2);
    width: 100%;
}