/* ── Shared UI components — loaded by both admin and portal ──────────────── */

/* ── Bell ────────────────────────────────────────────────────────────────── */
.lk-bell-wrap { position: relative; }

.lk-bell-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--lk-muted);
    font-size: 1.15rem;
    padding: 0.35rem 0.45rem;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.lk-bell-btn:hover { color: var(--lk-text); background: var(--lk-bg); }

.lk-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    padding: 0 0.4em;
    border-radius: 999px;
    text-align: center;
    pointer-events: none;
}

@keyframes lk-bell-shake {
    0%,100% { transform: rotate(0); }
    20%     { transform: rotate(-18deg); }
    40%     { transform: rotate(18deg); }
    60%     { transform: rotate(-10deg); }
    80%     { transform: rotate(10deg); }
}
.lk-bell-animate { animation: lk-bell-shake 0.6s ease; }

/* ── Bell dropdown ───────────────────────────────────────────────────────── */
.lk-bell-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 320px;
    background: var(--lk-card-bg);
    border: 1px solid var(--lk-border);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 200;
    overflow: hidden;
}


.lk-bell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--lk-border);
    color: var(--lk-text);
}

.lk-bell-mark-all {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: var(--lk-accent);
    cursor: pointer;
    padding: 0;
}
.lk-bell-mark-all:hover { text-decoration: underline; }

.lk-bell-empty {
    padding: 1.25rem 1rem;
    font-size: 0.85rem;
    color: var(--lk-muted);
    text-align: center;
}

.lk-bell-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.lk-bell-item { border-bottom: 1px solid var(--lk-border); }
.lk-bell-item:last-child { border-bottom: none; }
.lk-bell-item.unread { background: rgba(37,99,235,.06); }

.lk-bell-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: var(--lk-text);
    font-size: 0.83rem;
}
.lk-bell-link:hover { background: var(--lk-bg); }

.lk-bell-item-title { flex: 1; }
.lk-bell-item-time  { flex-shrink: 0; font-size: 0.72rem; color: var(--lk-muted); }

.lk-bell-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--lk-border);
    text-align: center;
    font-size: 0.8rem;
}
.lk-bell-footer a { color: var(--lk-accent); text-decoration: none; }
.lk-bell-footer a:hover { text-decoration: underline; }

/* ── User menu ───────────────────────────────────────────────────────────── */
.lk-user-wrap { position: relative; }

.lk-user-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
}

.lk-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--lk-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    transition: opacity .15s;
}
.lk-user-btn:hover .lk-user-avatar { opacity: .85; }

.lk-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 220px;
    background: var(--lk-card-bg);
    border: 1px solid var(--lk-border);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    z-index: 200;
    overflow: hidden;
}

.lk-user-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--lk-border);
}

.lk-user-dropdown-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--lk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-user-dropdown-email {
    font-size: 0.75rem;
    color: var(--lk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lk-user-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: var(--lk-text);
    text-decoration: none;
    transition: background .12s;
}
.lk-user-dropdown-item:hover { background: var(--lk-bg); color: var(--lk-text); }

.lk-user-dropdown-item--danger { color: #dc2626; }
.lk-user-dropdown-item--danger:hover { color: #dc2626; }

/* ── Impersonation indicator (shared admin + portal) ─────────────────────── */
/* Desktop: compact chip in the header/topbar. Mobile: full-width bar above
   the content. Both shells load ui.css, so these are the single source. */
.lk-impersonate-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #b45309;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.lk-impersonate-chip .lk-impersonate-stop,
.lk-impersonate-bar .lk-impersonate-stop {
    color: #fff;
    text-decoration: underline;
}
.lk-impersonate-chip .lk-impersonate-stop:hover,
.lk-impersonate-bar .lk-impersonate-stop:hover { color: #fde68a; }

.lk-impersonate-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #b45309;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

/* Desktop = chip only; Mobile = bar only. */
.lk-impersonate-bar  { display: none; }
@media (max-width: 767.98px) {
    .lk-impersonate-chip { display: none; }
    .lk-impersonate-bar  { display: flex; }
}

/* ── Calendar (FullCalendar) ──────────────────────────────────────────────── */

/* Theme FullCalendar to LeaseKey CSS variables (works in light + dark). */
.fc {
    --fc-border-color:            var(--lk-border);
    --fc-page-bg-color:           var(--lk-card-bg);
    --fc-neutral-bg-color:        var(--lk-bg);
    --fc-today-bg-color:          var(--lk-accent-light);
    --fc-button-bg-color:         var(--lk-accent);
    --fc-button-border-color:     var(--lk-accent);
    --fc-button-hover-bg-color:   var(--lk-accent-dark);
    --fc-button-hover-border-color: var(--lk-accent-dark);
    --fc-button-active-bg-color:  var(--lk-accent-dark);
    --fc-event-bg-color:          var(--lk-accent);
    --fc-event-border-color:      var(--lk-accent);
    --fc-list-event-hover-bg-color: var(--lk-bg);
    color: var(--lk-text);
}
.fc .fc-toolbar-title { font-size: 1.15rem; color: var(--lk-text); }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number { color: var(--lk-muted); text-decoration: none; }
.fc .fc-button { font-size: 0.8rem; text-transform: capitalize; box-shadow: none; }
.fc .fc-daygrid-day.fc-day-today { background: var(--fc-today-bg-color); }

/* Timed event: leading time + dot. Distinct from all-day filled bars. */
.fc-daygrid-dot-event {
    background: transparent;
    border: none;
    font-weight: 500;
}
.fc-daygrid-dot-event:hover { background: var(--lk-bg); }
.fc-daygrid-dot-event .fc-daygrid-event-dot {
    border-color: var(--lk-accent);
}

/* All-day / multiday block events: solid filled bar with rounded ends. */
.fc-daygrid-block-event,
.fc-h-event {
    border-radius: 4px;
    border: none;
    padding: 1px 4px;
}
.fc-daygrid-block-event .fc-event-title,
.fc-h-event .fc-event-title { font-weight: 500; }

/* Clickable events: pointer cursor (override text cursor over title text). */
.fc-event,
.fc-event .fc-event-title,
.fc-event .fc-event-main {
    cursor: pointer;
}

/* Recurring indicator icon inside an event title. */
.lk-recur-icon { font-size: 0.65em; opacity: 0.85; }

/* Event-type color legend. */
.lk-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--lk-muted);
}
.lk-cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.lk-cal-legend-dot {
    width: 0.7rem; height: 0.7rem; border-radius: 50%;
    display: inline-block; flex-shrink: 0;
}

/* ── Lightbox (shared photo viewer; see templates/partials/_lightbox.php) ───── */
body.lk-lightbox-open { overflow: hidden; }
.lk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .9);
    padding: 2.5rem 1rem;
}
.lk-lightbox[hidden] { display: none; }
.lk-lightbox-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.lk-lightbox-img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: .4rem;
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .5);
}
.lk-lightbox-caption {
    margin-top: .6rem;
    color: #fff;
    font-size: .9rem;
    text-align: center;
    max-width: 60ch;
}
.lk-lightbox-close,
.lk-lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: none;
    cursor: pointer;
    line-height: 1;
    border-radius: 50%;
    transition: background .15s;
}
.lk-lightbox-close:hover,
.lk-lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.lk-lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.6rem;
}
.lk-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
}
.lk-lightbox-prev { left: 1rem; }
.lk-lightbox-next { right: 1rem; }
@media (max-width: 576px) {
    .lk-lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }
    .lk-lightbox-prev { left: .3rem; }
    .lk-lightbox-next { right: .3rem; }
}

/* Bulletin board post body — preserve author line breaks, wrap long links. */
.lk-bulletin-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

/* Global HTMX request progress bar — fixed sliver at the very top of the
   viewport. .active runs an indeterminate slide; .done snaps to full then the
   JS fades it out. Sits above everything (sticky headers included). */
.lk-htmx-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--lk-accent, #2563eb);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: width .2s ease, opacity .3s ease;
}
.lk-htmx-bar.active {
    opacity: 1;
    width: 80%;
    transition: width 8s cubic-bezier(.1, .7, .1, 1);
}
.lk-htmx-bar.done {
    opacity: 1;
    width: 100%;
    transition: width .15s ease, opacity .35s ease .15s;
}

/* ── Calendar event modal ──────────────────────────────────────────────────
   View/edit/new event lives in #lkEventModal (layout/event_modal.php). On
   desktop the body scrolls within a capped height; below the bootstrap md
   breakpoint the dialog goes fullscreen (modal-fullscreen-md-down) so the form
   is comfortable on a phone — no cramped centered card. */
.lk-event-modal .modal-body {
    padding: 1.25rem;
}
/* The event form reuses the page's two-column card layout; inside the modal the
   cards are redundant chrome, so flatten their shadow/padding to reclaim width. */
.lk-event-modal .modal-body .card {
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent;
}
.lk-event-modal .modal-body .row.g-4 { --bs-gutter-y: 1rem; }
@media (max-width: 767.98px) {
    /* Fullscreen dialog: let the body take the remaining height and scroll. */
    .lk-event-modal .modal-body { padding: 1rem; }
    .lk-event-modal .lk-page-header { display: none; }
}

/* Collapsible permission category (access show page). Native <details> — no JS,
   survives HTMX swaps for free. Summary is the clickable category header; the
   table is the collapsed body. */
.lk-perm-group {
    border: 1px solid var(--lk-border, #e2e8f0);
    border-radius: .5rem;
    overflow: hidden;
}
.lk-perm-group > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    cursor: pointer;
    list-style: none;            /* hide default disclosure triangle */
    user-select: none;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--lk-muted, #64748b);
}
.lk-perm-group > summary::-webkit-details-marker { display: none; }
.lk-perm-group > summary:hover { background: var(--lk-hover, rgba(148,163,184,.08)); }
/* Chevron rotates when the group is open. */
.lk-perm-group > summary .lk-perm-group-title::before {
    content: "\f054";            /* fa-chevron-right */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: .7em;
    margin-right: .5rem;
    display: inline-block;
    transition: transform .15s ease;
    color: var(--lk-muted, #94a3b8);
}
.lk-perm-group[open] > summary .lk-perm-group-title::before { transform: rotate(90deg); }
.lk-perm-group > summary .lk-badge { text-transform: none; letter-spacing: 0; }
.lk-perm-group > table { margin: 0; }
.lk-perm-group[open] > summary { border-bottom: 1px solid var(--lk-border, #e2e8f0); }