/* 
 * Minimal custom CSS - only for fixes not handled by AdminTheme
 * TODO: Remove this file once AdminTheme properly handles modal backgrounds in dark mode
 */

/* Fix for modal cards in dark theme - ensure they use proper background */
html[data-skin="galaxy"][data-theme="dark"] .hs-overlay .card {
    background-color: var(--color-card) !important;
}

/* Auxiliary / honeypot anti-spam field: kept in DOM, visually hidden from real users */
.field-aux {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Auth & Register Checkbox High-Contrast Visibility */
#acceptTerms,
#rememberMe,
.form-checkbox.form-checkbox-light {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem !important;
    border-radius: 0.25rem !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    position: relative !important;
    transition: all 0.15s ease-in-out !important;
}

html[data-theme="light"] #acceptTerms,
html[data-theme="light"] #rememberMe,
html[data-theme="light"] .form-checkbox.form-checkbox-light {
    border: 2px solid #94a3b8 !important;
    background-color: #f8fafc !important;
}

#acceptTerms:hover,
#rememberMe:hover,
.form-checkbox.form-checkbox-light:hover {
    border-color: rgba(255, 255, 255, 0.8) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="light"] #acceptTerms:hover,
html[data-theme="light"] #rememberMe:hover,
html[data-theme="light"] .form-checkbox.form-checkbox-light:hover {
    border-color: #64748b !important;
    background-color: #f1f5f9 !important;
}

#acceptTerms:checked,
#rememberMe:checked,
.form-checkbox.form-checkbox-light:checked {
    background-color: var(--color-primary, #4361ee) !important;
    border-color: var(--color-primary, #4361ee) !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

#acceptTerms:focus,
#rememberMe:focus,
.form-checkbox.form-checkbox-light:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.35) !important;
}

/*
 * Sticky topbar must stay opaque so page titles/breadcrumbs slide underneath it
 * instead of showing through the default galaxy semi-transparent header.
 */
html[data-skin="galaxy"][data-theme="dark"] .app-header {
    background-color: #232737 !important;
    background-image: none !important;
}

/*
 * Sidebar open/close controls:
 * Desktop = chevron beside the logo (never on the collapsed rail).
 * Mobile  = X, top-right of the open drawer.
 */
.app-menu {
    position: relative;
    overflow: visible;
}

.sidenav-controls {
    position: absolute;
    top: 0;
    right: 1.25rem;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 50;
}

#button-hover-toggle,
#button-close-sidenav {
    pointer-events: auto;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-radius: 9999px;
    cursor: pointer;
    color: #e2e8f0;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

#button-hover-toggle::before {
    content: none !important;
    display: none !important;
}

#button-hover-toggle .sidenav-toggle-icon,
#button-close-sidenav .iconify {
    pointer-events: none;
}

#button-hover-toggle {
    position: relative !important;
    top: auto;
    right: auto;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem;
    min-height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.06);
}

#button-hover-toggle:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}

#button-hover-toggle .sidenav-toggle-icon {
    display: none;
}

html[data-sidenav-size="on-hover-active"] #button-hover-toggle,
html[data-sidenav-size="on-hover"] .app-menu:hover #button-hover-toggle {
    display: flex;
}

html[data-sidenav-size="on-hover"] .app-menu:not(:hover) .sidenav-controls,
html[data-sidenav-size="on-hover"] .app-menu:not(:hover) #button-hover-toggle {
    display: none !important;
}

.app-menu > .logo-box {
    padding-right: 3rem;
}

@media (min-width: 768px) {
    .app-menu > .logo-box .logo-lg img {
        height: 36px;
    }
}

html[data-sidenav-size="on-hover"] .app-menu:not(:hover) > .logo-box {
    justify-content: center !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    overflow: hidden;
}

html[data-sidenav-size="on-hover"] .app-menu:not(:hover) > .logo-box .logo-lg {
    display: none !important;
}

html[data-sidenav-size="on-hover"] .app-menu:not(:hover) > .logo-box .logo-sm {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

html[data-sidenav-size="on-hover"] .app-menu:not(:hover) > .logo-box img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 18px;
}

html[data-sidenav-size="on-hover-active"] #button-hover-toggle .sidenav-toggle-icon--collapse,
html[data-sidenav-size="on-hover"] #button-hover-toggle .sidenav-toggle-icon--expand {
    display: block;
}

html[data-sidenav-size="offcanvas"] #button-hover-toggle {
    display: none !important;
}

#button-close-sidenav {
    position: relative;
    top: auto;
    right: auto;
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem;
    min-height: 1.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
    color: #f8fafc;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

html[data-sidenav-size="offcanvas"] .sidenav-controls {
    top: 0.65rem;
    right: 0.65rem;
    height: auto;
}

#button-close-sidenav .iconify {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

#button-close-sidenav:hover,
#button-close-sidenav:focus-visible {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    transform: scale(1.04);
}

html[data-sidenav-size="offcanvas"].sidenav-enable #button-close-sidenav {
    display: flex;
}

/*
 * Card list toolbar (search + primary action)
 * The shipped app-*.css bundle is prebuilt and does NOT include Tailwind md:* utilities
 * from .razor files, so responsive classes like md:flex-row never apply.
 * Use plain CSS media queries instead.
 */
.list-toolbar {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 0.625rem;
    align-items: stretch;
}

.list-toolbar__action {
    width: 100%;
    flex-shrink: 0;
}

.list-toolbar__search {
    min-width: 0;
}

@media (min-width: 768px) {
    .list-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .list-toolbar__search {
        order: 1;
        flex: 1 1 0%;
        max-width: 20rem;
    }

    .list-toolbar__action {
        order: 2;
        width: auto;
    }
}

/*
 * Universal modal scroll fix (applies to ALL modals)
 *
 * The theme's .card class sets height:fit-content, which means the card always
 * collapses to its natural content height. This prevents the flex-1/min-h-0
 * inner scroll chain from activating — flex children distribute space based on
 * the parent's ACTUAL height, and fit-content gives no bounded height for them
 * to fill. The result: card-body never overflows, overflow-y:auto never scrolls,
 * and action buttons end up below the visible viewport.
 *
 * Using .hs-overlay .card covers every current and future Preline modal/overlay
 * without needing to list individual modal IDs.
 *
 * Mobile: fixed height using 100svh (small viewport height — always accounts for
 *   browser chrome like Safari's address bar and bottom toolbar).
 * Desktop: max-height cap so the card never overflows the viewport and the inner
 *   flex scroll activates when content is taller than the available space.
 */
@media (max-width: 767px) {
    /*
     * min(max-content, viewport) keeps small dialogs compact AND gives tall forms
     * a definite height so flex children can shrink. height:auto + max-height
     * clipped Cancel/Save on iPhone because the footer was laid out below the
     * overflow box and the card-body never became the scroll container.
     */
    .hs-overlay .card {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        max-height: calc(100svh - 1.5rem - env(safe-area-inset-bottom, 0px)) !important;
        height: min(max-content, calc(100svh - 1.5rem - env(safe-area-inset-bottom, 0px))) !important;
    }

    .hs-overlay .card > form {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .hs-overlay .card .card-body,
    .hs-overlay .card form .card-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    .hs-overlay .card .card-header,
    .hs-overlay .card .card-footer {
        flex-shrink: 0 !important;
    }

    /* Keep footer actions above the iPhone home indicator / Safari toolbar. */
    .hs-overlay .card > form > [class*="flex-shrink-0"]:last-child {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .hs-overlay .card .btn {
        min-height: 2.75rem;
        touch-action: manipulation;
    }

    .hs-overlay .pointer-events-auto {
        position: relative;
        z-index: 1;
    }

    .viewing-confirm-modal-shell {
        min-height: calc(100svh - 1.5rem);
        align-items: center !important;
    }

    .hs-overlay .card.viewing-form-card {
        overflow: hidden;
    }

    .hs-overlay .card.viewing-form-card > .card-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        flex: 1 1 auto;
    }
}

@media (min-width: 768px) {
    .hs-overlay .card {
        max-height: calc(100dvh - 1.5rem) !important;
    }
}

/*
 * Closed Preline/Blazor modals must never intercept taps.
 * Preline HSOverlay uses .open/.opened; our JS uses .hs-overlay-open.
 * Hiding only :not(.hs-overlay-open) made Add Note / New Lead look dead:
 * the tap fired, HSOverlay opened the dialog, then this rule forced display:none.
 */
.hs-overlay.hidden:not(.hs-overlay-open):not(.open):not(.opened),
.hs-overlay:not(.hs-overlay-open):not(.open):not(.opened) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Orphaned modal backdrops (appended to <body>) survive Blazor navigation and
 * swallow every tap on iPhone. Ignore them unless a modal is actually open. */
body:not(:has(.hs-overlay.hs-overlay-open, .hs-overlay.open, .hs-overlay.opened)) .hs-overlay-backdrop {
    display: none !important;
    pointer-events: none !important;
}

html:not(.sidenav-enable) #custom-backdrop {
    display: none !important;
    pointer-events: none !important;
}

/* Offcanvas sidenav is opacity:0 but still receives taps unless disabled. */
html[data-sidenav-size="offcanvas"] .app-menu {
    pointer-events: none;
}

html[data-sidenav-size="offcanvas"].sidenav-enable .app-menu {
    pointer-events: auto;
}

/*
 * iOS Safari: taps land on the inner <i class="iconify">, not the <button>.
 * If the icon captures the event, Blazor @onclick on the button never fires.
 */
.btn i,
.btn .iconify,
button i,
button .iconify,
a.btn i,
a.btn .iconify {
    pointer-events: none;
}

.btn,
button,
a.btn {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.hs-overlay-backdrop,
#custom-backdrop {
    touch-action: manipulation;
}

.logo-box img {
    width: auto;
    max-width: 100%;
    height: var(--logo-lg-height, 22px);
    object-fit: contain;
}

.auth-logo img {
    width: 200px !important;
    max-width: 100%;
    height: auto !important;
    max-height: none !important;
}

.row-action-menu {
    position: relative;
    z-index: 1;
}

.row-action-menu.is-open {
    z-index: 30;
}

.table tbody tr:has(.row-action-menu.is-open),
.table tbody td:has(.row-action-menu.is-open) {
    position: relative;
    z-index: 30;
}

/* overflow-x-auto on the table clipper turns overflow-y into auto as well, so the
   dropdown expands the scroll box and sits under the card footer. Lift clipping
   while a menu is open so the panel can overlay the footer. */
.table-wrapper:has(.row-action-menu.is-open),
.overflow-x-auto:has(.row-action-menu.is-open),
.table-responsive:has(.row-action-menu.is-open) {
    overflow: visible;
    z-index: 30;
}

.card:has(.row-action-menu.is-open) {
    z-index: 25;
    overflow: visible;
}

.row-action-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
}

.row-action-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    z-index: 40;
    min-width: 11rem;
    width: max-content;
    max-width: min(18rem, calc(100vw - 1.5rem));
    padding: 0.25rem;
    border-radius: 0.5rem;
    background: var(--color-card, #1e1f26);
    border: 1px solid var(--color-default-300, rgba(255, 255, 255, 0.12));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.row-action-menu-panel .row-action-item + .row-action-item {
    border-top: 1px solid var(--color-default-300, rgba(255, 255, 255, 0.12));
}

.row-action-menu-panel .row-action-item.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

.row-action-menu-panel .row-action-item.text-danger {
    color: var(--color-danger, #f87171);
}

@media (max-width: 767.98px) {
    .btn-icon {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .row-action-menu-panel .row-action-item {
        min-height: 2.75rem;
    }

    .viewing-panel-root .btn,
    .viewing-page-root .btn {
        min-height: 2.75rem;
        touch-action: manipulation;
    }

    .viewing-time-field__date-btn,
    .viewing-time-field__time-btn,
    .viewing-time-field__calendar-day,
    .viewing-time-field__calendar-nav,
    .viewing-time-field__calendar-action,
    .viewing-time-field__time-menu [role="option"] {
        min-height: 2.75rem;
        touch-action: manipulation;
    }
}