/* Mobile layout guards — hand-maintained, loaded after the compiled theme CSS.
   The compiled bundle only styles .kt-scrollable's scrollbar cosmetics; overflow
   behavior and small-screen wrapping guards live here so wide content scrolls
   inside its container instead of forcing horizontal page scroll. */

/* 0. The Tailwind build never generated .overflow-x-auto even though Razor pages use it
      (e.g. platform dashboard card headers/tabs); define the standard utility here. */
.overflow-x-auto {
    overflow-x: auto;
}

/* 1. Wide tables scroll inside their wrapper, never the page. */
.kt-table-wrapper {
    overflow-x: auto;
    max-width: 100%;
}

/* 2. Cards and datatable shells inside CSS grid/flex layouts are allowed to shrink
      below their content width (grid items default to min-width:auto, which lets a
      wide table blow out the page); the inner wrapper from rule 1 takes the scroll. */
.kt-card,
.kt-card-table,
.kt-card-content {
    min-width: 0;
}

/* 3. Page-header action button groups wrap on small screens (workflow definitions,
      contract details, platform pages) instead of exceeding the viewport. */
@media (max-width: 768px) {
    .kt-container-fixed .justify-between > .items-center,
    .kt-container-fixed .justify-between > .flex.gap-2 {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 0.5rem;
    }

    /* Datatable footer (page size + pagination) wraps instead of overflowing. */
    .kt-datatable-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* 4. Stat summary bars (contract/property headers): tiles wrap into a grid-like flow
      on small screens instead of squeezing into one overflowing row. */
@media (max-width: 768px) {
    #contractStats > .flex-1 {
        flex: 1 1 40%;
        min-width: 130px;
    }
    #contractStats > span {
        display: none; /* vertical dividers make no sense once tiles wrap */
    }
}

/* 5. Tab panels (platform dashboard etc.): contain their cards so wide card headers
      cannot force grid tracks beyond the viewport. */
.kt-tab-content,
.kt-tab-content > * {
    min-width: 0;
    max-width: 100%;
}

/* 6. Card-header filter/search rows wrap on phones instead of stretching the card. */
@media (max-width: 768px) {
    .kt-card-header.flex-nowrap,
    .kt-card-header .flex-nowrap {
        flex-wrap: wrap;
    }
}

/* 7. Horizontal tab navs scroll on phones instead of stretching the page
      (notification settings, and any nav-style tab row inside a card header). */
@media (max-width: 768px) {
    #settingsNav,
    .kt-card-header > nav,
    .kt-tabs {
        overflow-x: auto;
        max-width: 100%;
        flex-wrap: nowrap;
    }
}

/* 8. Reusable responsive form grid for wide modals (the Tailwind build does not emit
      md:/lg: grid utilities for Razor-only markup). 1 col on phones, 2 on tablets, 3 on desktop. */
.aqar-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .aqar-form-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1152px) {
    .aqar-form-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Injected date-picker widgets stretch to their grid cell like every other input */
.aqar-form-grid .aqar-date-picker-group {
    width: 100%;
}

/* Sticky actions column: the last column of every system datatable stays pinned to the
   screen edge while the rest scrolls horizontally. Logical inset -> pins left in RTL. */
.kt-card-table .kt-table-wrapper table[data-kt-datatable-table] th:last-child,
.kt-card-table .kt-table-wrapper table[data-kt-datatable-table] td:last-child {
    position: sticky;
    inset-inline-end: 0;
    background-color: var(--background, #fff);
    z-index: 1;
}

.kt-card-table .kt-table-wrapper table[data-kt-datatable-table] th:last-child {
    z-index: 2;
}

/* Fog shadow on the pinned edge ONLY while more columns hide underneath — the cue
   disappears at scroll end (classes toggled by aqar-scroll-affordance.js). */
html:not([dir="rtl"]) .kt-card-table .kt-table-wrapper.aqar-scroll-more-end table[data-kt-datatable-table] th:last-child,
html:not([dir="rtl"]) .kt-card-table .kt-table-wrapper.aqar-scroll-more-end table[data-kt-datatable-table] td:last-child {
    box-shadow: -16px 0 14px -10px rgba(15, 23, 42, 0.28);
}

html[dir="rtl"] .kt-card-table .kt-table-wrapper.aqar-scroll-more-end table[data-kt-datatable-table] th:last-child,
html[dir="rtl"] .kt-card-table .kt-table-wrapper.aqar-scroll-more-end table[data-kt-datatable-table] td:last-child {
    box-shadow: 16px 0 14px -10px rgba(15, 23, 42, 0.28);
}

/* Slim always-visible scrollbar: overlay scrollbars (macOS/iOS) hide until touched, so
   many users never realize the table scrolls; a styled bar renders permanently. */
.kt-table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

.kt-table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.kt-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.kt-table-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.45);
    border-radius: 8px;
}

.kt-table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.7);
}

/* keep the row-hover tint under the pinned cell instead of flat background */
.kt-card-table .kt-table-wrapper table[data-kt-datatable-table] tr:hover td:last-child {
    background-color: var(--accent, var(--background, #fff));
}

/* Sticky cells each create a stacking context, so a tooltip inside row N's pinned cell
   paints UNDER row N+1's pinned cell. Lift the hovered cell above its siblings. */
.kt-card-table .kt-table-wrapper table[data-kt-datatable-table] td:last-child:hover {
    z-index: 5;
}

/* An open actions dropdown (position:fixed, z 105) is trapped inside its sticky cell's
   LOW stacking context, so the toolbar/footer painted after the wrapper covered the part
   of the menu extending past the table. Lift the cell while its menu is open. */
.kt-card-table .kt-table-wrapper table[data-kt-datatable-table] td:last-child:has(.kt-menu-item-dropdown.show),
.kt-card-table .kt-table-wrapper table[data-kt-datatable-table] td:last-child:has([data-kt-dropdown].open) {
    z-index: 50;
}

/* 9. Card headers have padding-inline only and rely on min-height for vertical space,
      so wrapped content (filters, buttons) touches the card edges. Give every header
      vertical breathing room: 0.5rem everywhere (invisible on single-line headers —
      min-height still governs), 0.75rem on phones where wrapping is the norm.
      Declared inside the theme's `components` cascade layer so explicit utilities
      (p-5, py-2, py-4... — which live in the later `utilities` layer) still win. */
@layer components {
    .kt-card-header {
        padding-block: 0.5rem;
    }

    @media (max-width: 768px) {
        .kt-card-header {
            padding-block: 0.75rem;
        }
    }
}

/* 10. Mobile action sheet: on phones the row kebab opens a bottom sheet of button
       cards (2 per row, destructive full-width) instead of the fragile dropdown.
       Rendered by aqar-mobile-action-sheet.js (core bundle). */
.aqar-action-sheet {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
}

.aqar-action-sheet.open {
    display: block;
}

.aqar-action-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.aqar-action-sheet-panel {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background: var(--background, #fff);
    border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.25);
    animation: aqar-sheet-up 0.18s ease-out;
    max-height: 70vh;
    overflow-y: auto;
}

@keyframes aqar-sheet-up {
    from { transform: translateY(24px); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1; }
}

.aqar-action-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border, #e2e8f0);
    margin: 4px auto 12px;
}

.aqar-action-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.aqar-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 72px;
    padding: 12px 8px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    background: var(--background, #fff);
    color: var(--foreground, #0f172a);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.aqar-action-card:active {
    background: var(--accent, #f1f5f9);
}

.aqar-action-card i {
    font-size: 1.25rem;
    color: var(--muted-foreground, #64748b);
}

.aqar-action-card-full {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 52px;
}

.aqar-action-card-danger {
    color: var(--destructive, #dc2626);
    border-color: color-mix(in srgb, var(--destructive, #dc2626) 30%, transparent);
}

.aqar-action-card-danger i {
    color: var(--destructive, #dc2626);
}

/* 11. Modal footer actions (Save/Cancel...) always sit at the inline end — right in
       LTR, left in RTL. The theme default is space-between, which parked single button
       groups on the LEFT (Add Technician) and spread bare buttons apart (Cancel far
       left, Save far right). Most footers carry an empty <div></div> spacer for the
       old default; with flex-end it collapses to nothing. Declared in the components
       layer so a page can still opt out with justify-between utilities. */
@layer components {
    .kt-modal-footer {
        justify-content: flex-end;
    }
}

/* 12. Chat dock: its z-[100] class is not in the compiled CSS, leaving z-index auto —
       sticky datatable action cells (z 1..50) painted OVER the chat panel. */
#chat-dock-root {
    z-index: 1000;
}

/* 13. Filter rows mixing -sm selects/buttons (28px) with injected date-picker groups
       (34px, taller icon addon) sat ragged. Small inputs keep the group at input height. */
.aqar-date-picker-group:has(.kt-input-sm) {
    height: 1.75rem;
}

.aqar-date-picker-group:has(.kt-input-sm) .kt-input-addon {
    height: 1.75rem;
}

/* 14. Sidebar search (aqar-sidebar-search.js): hidden items collapse, and while a
       query is active every accordion opens so matches inside groups are visible. */
.aqar-hidden {
    display: none !important;
}

.aqar-sidebar-filtering .kt-menu-accordion {
    display: flex !important;
}

/* 9. Arbitrary max-w-[...px] values used by Razor modals/cards that the purged Tailwind
      build never generated (only 125/175/200/220/250/280/320/370/380/420/440/500/600/
      670/700/800/900/1240 survived). Without these, e.g. the Add Resident modal renders
      FULL-width. Keep in sync when adding new arbitrary widths in .cshtml files. */
.max-w-\[180px\]  { max-width: 180px; }
.max-w-\[480px\]  { max-width: 480px; }
.max-w-\[520px\]  { max-width: 520px; }
.max-w-\[560px\]  { max-width: 560px; }
.max-w-\[620px\]  { max-width: 620px; }
.max-w-\[640px\]  { max-width: 640px; }
.max-w-\[680px\]  { max-width: 680px; }
.max-w-\[720px\]  { max-width: 720px; }
.max-w-\[760px\]  { max-width: 760px; }
.max-w-\[820px\]  { max-width: 820px; }
.max-w-\[920px\]  { max-width: 920px; }
.max-w-\[960px\]  { max-width: 960px; }
.max-w-\[980px\]  { max-width: 980px; }
.max-w-\[1000px\] { max-width: 1000px; }
.max-w-\[1100px\] { max-width: 1100px; }
.max-w-\[1120px\] { max-width: 1120px; }
.max-w-\[1180px\] { max-width: 1180px; }
.max-w-\[1200px\] { max-width: 1200px; }

/* 10. FormValidation inline messages (login and other validated forms) render in the
      default text color; validation errors should read as errors — make them red. The
      .fv-plugins-message-container class is exclusive to FormValidation, so this is safe. */
.fv-plugins-message-container,
.fv-plugins-message-container .invalid-feedback,
.fv-plugins-message-container [data-field-message] {
    color: var(--destructive);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    margin-top: 0.25rem;
}