/*
 * HTMX-specific CSS - Only styles that are required for HTMX functionality
 * All layout and component styling should use Bootstrap 5 classes
 */

/* Settings card headers — theme-aware purple tint */
.card-header-accent {
    background-color: rgba(102, 16, 242, 0.05);
}

[data-bs-theme="dark"] .card-header-accent {
    background-color: rgba(102, 16, 242, 0.15);
}

.card-header-accent h5 .bi {
    color: #6610f2;
}

[data-bs-theme="dark"] .card-header-accent h5 .bi {
    color: #a78bfa;
}

/* Clickable table rows */
tr[role="button"] {
    cursor: pointer;
}

tr[role="button"]:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Collapsible navigation chevron rotation */
.nav-link[data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform 0.2s ease-in-out;
}

.nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* Sub-navigation styling */
.nav .nav .nav-link {
    font-size: 0.9rem;
}

.nav .nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* HTMX Loading/Swap Transitions */
.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* HTMX Indicator States */
.htmx-request .htmx-indicator {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

/* Highlight animation for newly added content */
@keyframes htmx-highlight {
    0% {
        background-color: rgba(var(--bs-success-rgb), 0.2);
    }
    100% {
        background-color: transparent;
    }
}

.htmx-added {
    animation: htmx-highlight 1s ease-out;
}

/* Print styles — hide navigation and UI chrome */
@media print {
    /* Hide sidebar, header, breadcrumbs, buttons */
    .sidebar,
    .offcanvas,
    nav.navbar,
    header.navbar,
    nav[aria-label="breadcrumb"],
    .btn,
    .btn-group,
    .form-control,
    .form-select,
    .alert-dismissible .btn-close,
    .mobile-fab,
    .dropdown-toggle::after {
        display: none !important;
    }

    /* Make main content full width */
    main,
    .col-md-9,
    .col-lg-10 {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Remove card shadows and borders for cleaner print */
    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }

    /* Show all responsive columns */
    .d-none,
    .d-md-none,
    .d-lg-none {
        display: table-cell !important;
    }

    .d-none.d-md-table-cell,
    .d-none.d-lg-table-cell {
        display: table-cell !important;
    }

    /* Ensure page breaks work well */
    .card {
        break-inside: avoid;
    }

    tr {
        break-inside: avoid;
    }

    /* Remove background colors for ink savings */
    .badge {
        border: 1px solid #999 !important;
        background: none !important;
        color: #333 !important;
    }

    body {
        font-size: 11pt;
    }
}

/* ---- Realtime doorbell presence (base.html doorbell client) ----
   .rt-flash pulses an element that just changed remotely; .rt-edit-badge is
   the transient "who edited" chip. Both are applied/removed by JS — the
   flash uses the primary tint at low alpha (theme-aware via --bs-primary-rgb),
   fading to transparent, so it reads as ephemeral feedback, not row state. */
@keyframes rt-flash-bg {
    0%, 55% { background-color: rgba(var(--bs-primary-rgb), 0.15); }  /* hold ~3s */
    100%    { background-color: transparent; }                        /* then fade */
}
tr.rt-flash > td { animation: rt-flash-bg 5.5s ease-out; }
.rt-flash:not(tr) { animation: rt-flash-bg 5.5s ease-out; }

@keyframes rt-badge-fade {
    0%, 75% { opacity: 1; }
    100%    { opacity: 0; }
}
.rt-edit-badge {
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 500;
    vertical-align: middle;
    animation: rt-badge-fade 8s ease-in forwards;
}