/* Society ERP Custom Static Stylesheet */

/* Universal Clean Link Hover (No Underlines) */
a, a:hover, a:focus, a:active,
a *, a:hover *, a:focus *, a:active * {
    text-decoration: none !important;
}

/* Floating Dropdown Menu (Top Layer - Zero Table Clipping) */
.table-dropdown-menu {
    display: none;
    position: fixed;
    width: max-content;
    min-width: 9rem;
    max-width: 13rem;
    border-radius: 1.25rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    padding: 0.375rem;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    z-index: 9999;
}

.table-dropdown-menu.is-open {
    display: block;
}

/* Dynamic info-icon tooltip (JS-positioned, clamped to viewport) */
.info-tooltip-bubble {
    display: none;
    position: fixed;
    z-index: 9999;
    max-width: 240px;
    width: max-content;
    border-radius: 0.75rem;
    background-color: #0f172a;
    color: #ffffff;
    padding: 0.45rem 0.75rem;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    pointer-events: none;
}

.info-tooltip-bubble.is-open {
    display: block;
}

/* Dynamic warning-icon popover (JS-positioned, clamped to viewport, click-through content) */
.warning-popover-bubble {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 17rem;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: 1.25rem;
    border: 1px solid #fde68a;
    background-color: #fffbeb;
    padding: 0.875rem;
    font-size: 12px;
    color: #451a03;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}

.warning-popover-bubble.is-open {
    display: flex;
}

/* Shared table card overflow and sticky filter-bar support. */
.sticky-table-card {
    overflow: hidden;
}
.sticky-table-card .sticky-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.sticky-table-toolbar {
    position: sticky;
    z-index: 30;
    background-color: color-mix(in srgb, var(--color-background) 95%, transparent);
    backdrop-filter: blur(4px);
    transition: box-shadow .2s, border-color .2s;
    /* Bleed to the edge of main-content's own 32px (px-8) padding, so the
       sticky background covers full width instead of leaving the page
       background visible on either side while pinned. */
    margin-inline: -2rem;
    padding-inline: 2rem;
    padding-block: .75rem;
}

.sticky-table-toolbar.is-stuck {
    box-shadow: 0 1px 2px 0 rgba(15, 23, 42, .06);
    border-bottom: 1px solid var(--color-outline-variant, #e2e8f0);
}

/* Table column-header sort links */
.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: inherit;
    cursor: pointer;
}

.sort-link:hover .sort-icon {
    opacity: .6;
}

.sort-icon {
    font-size: 14px;
    line-height: 1;
}

.sort-link.is-active .sort-icon {
    opacity: 1;
    color: var(--color-primary);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}


/* ==========================================
   Clickable Table Rows
   ========================================== */
tr[data-href],
[data-clickable-row] {
    cursor: pointer;
}

tr[data-href] td:last-child,
tr[data-href] td.text-right,
tr[data-href] td[align="right"],
[data-clickable-row] td:last-child,
[data-clickable-row] td.text-right,
[data-clickable-row] td[align="right"],
[data-prevent-row-click] {
    cursor: default;
}

tr[data-href] a,
tr[data-href] button,
tr[data-href] input,
tr[data-href] select,
tr[data-href] textarea,
tr[data-href] form,
[data-clickable-row] a,
[data-clickable-row] button,
[data-clickable-row] input,
[data-clickable-row] select,
[data-clickable-row] textarea,
[data-clickable-row] form {
    cursor: pointer;
}

tr[data-href] [data-floor-drag-handle],
[data-clickable-row] [data-floor-drag-handle] {
    cursor: grab;
}

tr[data-href] [data-floor-drag-handle]:active,
[data-clickable-row] [data-floor-drag-handle]:active {
    cursor: grabbing;
}

/* ==========================================
   Global Toast & Alert Bottom-Right 3s Progress Bar
   ========================================== */
@keyframes toastProgress {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}

.animate-toast-progress {
    animation: toastProgress linear forwards;
}

.animate-toast-progress.paused {
    animation-play-state: paused !important;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.92);
    }
}

.toast-enter {
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
    animation: toastSlideOut 0.25s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

/* ==========================================
   Global Custom Confirmation Modal Animations
   ========================================== */
@keyframes modalBackdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalBackdropFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalContentZoomIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalContentZoomOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
}

.modal-backdrop-show {
    animation: modalBackdropFadeIn 0.2s ease-out forwards;
}

.modal-backdrop-hide {
    animation: modalBackdropFadeOut 0.15s ease-in forwards;
}

.modal-card-show {
    animation: modalContentZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-card-hide {
    animation: modalContentZoomOut 0.18s ease-in forwards;
}

/* ==========================================
   Global Form Modal (ajax-loaded create/edit forms)
   ========================================== */
#global-form-modal .form-modal-hide-in-modal {
    display: none;
}

/* ==========================================
   Inline Superadmin Panel Swap (Summary <-> Form)
   ========================================== */
.superadmin-view {
    opacity: 1;
}

.superadmin-view-hidden {
    display: none;
    opacity: 0;
}

[data-superadmin-view="summary"].superadmin-view-entering {
    animation: superadminSlideInFromLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-superadmin-view="form"].superadmin-view-entering {
    animation: superadminSlideInFromRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes superadminSlideInFromRight {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================
   Inline Society Profile Panel Swap (Summary <-> Form)
   ========================================== */
.society-view {
    opacity: 1;
}

.society-view-hidden {
    display: none;
    opacity: 0;
}

[data-society-view="summary"].society-view-entering {
    animation: superadminSlideInFromLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-society-view="form"].society-view-entering {
    animation: superadminSlideInFromRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   Inline Tower Details Panel Swap (Summary <-> Form)
   ========================================== */
.tower-view {
    opacity: 1;
}

.tower-view-hidden {
    display: none;
    opacity: 0;
}

[data-tower-view="summary"].tower-view-entering {
    animation: superadminSlideInFromLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-tower-view="form"].tower-view-entering {
    animation: superadminSlideInFromRight 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes superadminSlideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================
   Global Premium Loader Keyframe Animations
   ========================================== */
@keyframes loaderPulseLogo {
    0%, 100% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 4px rgba(30, 64, 175, 0.25));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.45));
    }
}

@keyframes loaderSpinReverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes loaderShimmerLine {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(200%); }
}

.animate-pulse-logo {
    animation: loaderPulseLogo 2s ease-in-out infinite;
}

.animate-spin-reverse {
    animation: loaderSpinReverse 1.5s linear infinite;
}

.animate-shimmer-line {
    animation: loaderShimmerLine 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================
   Global Form Field Controls Styling
   ========================================== */
select {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    padding: 0.55rem 2.25rem 0.55rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #0f172a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.125rem;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

select:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23334155' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

select option {
    font-weight: 500;
    color: #0f172a;
    background-color: #ffffff;
    padding: 0.5rem 0.75rem;
}

/* Specific pill filter dropdown utility & Custom Select Replacement */
.filter-select,
select.filter-select {
    height: 2.5rem;
    max-width: 100%;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    padding-left: 1rem;
    padding-right: 2.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filter-select:hover,
select.filter-select:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.filter-select:focus,
select.filter-select:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.filter-select.is-active,
select.filter-select.is-active {
    border-color: rgba(37, 99, 235, 0.6);
    background-color: rgba(37, 99, 235, 0.04);
    color: #1d4ed8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}

/* ==========================================
   Custom Dropdown Opened Box UI System
   ========================================== */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.custom-select-wrapper select,
select[data-custom-select-bound="true"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.custom-select-trigger {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-select-trigger.trigger-compact {
    height: 2rem !important;
    padding: 0 0.875rem !important;
    font-size: 0.75rem !important;
}

/* Matches the plain form-input box exactly, so wiring up the custom
   options popover doesn't change how the field itself looks. */
.custom-select-trigger.trigger-form-field {
    display: flex;
    height: auto;
    border-radius: 0.375rem;
    border: 1px solid #64748b;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #0f172a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.custom-select-trigger.trigger-form-field:hover {
    border-color: #64748b;
    background-color: #ffffff;
    color: #0f172a;
}

.custom-select-trigger.trigger-form-field:focus,
.custom-select-trigger.trigger-form-field.is-open {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.custom-select-trigger.trigger-form-field .custom-select-chevron {
    font-size: 1.15rem;
    color: #475569;
}

.custom-select-trigger:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
    color: #0f172a;
}

.custom-select-trigger:focus,
.custom-select-trigger.is-open {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    background-color: #ffffff;
}

.custom-select-trigger.is-active {
    border-color: rgba(37, 99, 235, 0.6);
    background-color: rgba(37, 99, 235, 0.04);
    color: #1d4ed8;
}

.custom-select-trigger.is-disabled {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: 0.65;
    pointer-events: none;
}

.custom-select-trigger .custom-select-chevron {
    font-size: 18px;
    line-height: 1;
    color: #64748b;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}

.custom-select-trigger.is-open .custom-select-chevron {
    transform: rotate(180deg);
    color: #2563eb;
}

.custom-select-menu {
    display: none;
    position: fixed;
    z-index: 999999 !important;
    min-width: 140px;
    max-width: calc(100vw - 1rem);
    max-height: 280px;
    overflow-y: auto;
    border-radius: 1.125rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    padding: 0.375rem;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.14), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-select-menu.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: normal;
    overflow-wrap: anywhere;
}

.custom-select-option:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.custom-select-option.is-selected {
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

.custom-select-option .option-check {
    font-size: 16px;
    color: #2563eb;
    line-height: 1;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
textarea {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #0f172a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

textarea {
    min-width: 0;
    max-width: 100%;
    min-height: 3.5rem;
    resize: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"] {
    min-width: 0;
    text-overflow: ellipsis;
}

input[type="password"] {
    padding-right: 2.5rem;
}

.search-input-field,
input[type="text"].search-input-field,
input[type="search"].search-input-field,
.topbar input[type="text"].has-search-icon {
    padding-left: 2.75rem !important;
    padding-right: 5rem !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
    color: #94a3b8;
}

input[type="checkbox"] {
    height: 1.125rem;
    width: 1.125rem;
    border-radius: 0.25rem;
    border: 1px solid #cbd5e1;
    accent-color: #2563eb;
    cursor: pointer;
}

/* ==========================================
   Global UI Theme Utilities & Component Classes
   ========================================== */

.page-header-box {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.page-title-text {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-subtitle-text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.25rem;
}

.breadcrumb-nav a {
    color: #475569;
    transition: color 0.15s ease;
}

.breadcrumb-nav a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.card-box-theme {
    overflow: hidden;
    border-radius: 0.75rem;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-box-header {
    border-bottom: 1px solid #cbd5e1;
    background-color: rgba(248, 250, 252, 0.8);
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-box-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-bar-theme {
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Empty Table State Action Buttons */
.empty-row-actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    padding: 0.375rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e40af;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.empty-row-actions a:hover {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    box-shadow: 0 2px 4px 0 rgba(30, 64, 175, 0.08);
}

.empty-row-actions a:active {
    transform: scale(0.95);
}


/* ==========================================
   Material Symbols Icon Font — prevent FOUT
   (raw ligature text like "search"/"close" flashing
   before the icon font swaps in on soft reloads)
   ========================================== */
.material-symbols-outlined {
    opacity: 0;
}

html.fonts-loaded .material-symbols-outlined {
    opacity: 1;
}

.material-symbols-outlined.hidden,
.hidden.material-symbols-outlined {
    display: none !important;
}

/* ==========================================
   Collapsible Sidebar
   ========================================== */
.sidenav {
    width: 260px;
    z-index: 100 !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
    overflow: visible !important;
}

.sidenav-footer-pinned {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
}

.sidenav-user {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.topbar {
    margin-left: 260px;
    width: calc(100% - 260px);
    z-index: 40 !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: margin-left, width;
}

.main-content {
    margin-left: 260px;
    width: calc(100% - 260px);
    z-index: 10;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: margin-left, width;
}

/* Sidenav Labels & Text Transitions */
.sidenav-label {
    display: inline-flex;
    max-width: 190px;
    opacity: 1;
    transform: translateX(0);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

div.sidenav-label,
span.sidenav-label.flex {
    display: flex;
}

/* Brand block: let the tagline wrap instead of being clipped by the nav-label nowrap/190px rule. */
.sidenav-brand .sidenav-label {
    max-width: 220px;
    white-space: normal;
}

/* Sidenav Toggle Button */
#sidenav-toggle {
    position: absolute;
    right: -16px;
    top: 40px;
    transform: translateY(-50%);
    z-index: 110 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: 1.5px solid #cbd5e1;
    background-color: #ffffff;
    color: #334155;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease;
}

#sidenav-toggle:hover {
    background-color: #f8fafc;
    color: #0f172a;
    border-color: #64748b;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.18);
}

#sidenav-toggle:active {
    transform: translateY(-50%) scale(0.92);
}

#sidenav-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidenav Nav Item & Icon Micro-interactions */
.sidenav nav a,
.sidenav nav button,
.sidenav nav span.flex,
.sidenav .sidenav-bottom-nav a,
.sidenav .sidenav-bottom-nav button,
.sidenav .sidenav-bottom-nav span.flex {
    position: relative;
    transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidenav .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 1;
    overflow: visible;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}

.sidenav nav a:hover .material-symbols-outlined,
.sidenav nav button:hover .material-symbols-outlined,
.sidenav .sidenav-bottom-nav a:hover .material-symbols-outlined,
.sidenav .sidenav-bottom-nav button:hover .material-symbols-outlined {
    transform: scale(1.12);
}

.sidenav nav a:active .material-symbols-outlined,
.sidenav nav button:active .material-symbols-outlined,
.sidenav .sidenav-bottom-nav a:active .material-symbols-outlined,
.sidenav .sidenav-bottom-nav button:active .material-symbols-outlined {
    transform: scale(0.95);
}

/* Sidenav Bottom Pinned Nav Items (Compact) */
.sidenav .sidenav-bottom-nav a,
.sidenav .sidenav-bottom-nav button,
.sidenav .sidenav-bottom-nav span.flex {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.8125rem !important;
    border-radius: 0.625rem !important;
    gap: 0.625rem !important;
}

.sidenav .sidenav-bottom-nav .material-symbols-outlined {
    width: 20px !important;
    height: 20px !important;
    font-size: 18px !important;
}

.sidenav .sidenav-bottom-nav a:not(.is-active):hover,
.sidenav .sidenav-bottom-nav button:not(.is-active):hover {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
}


/* Sidenav Active Indicator Bar */
.nav-active-bar {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5px;
    height: 16px;
    border-radius: 9999px;
    background-color: var(--color-primary, #2563eb);
    animation: navBarSlideIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes navBarSlideIn {
    0% {
        transform: translateY(-50%) scaleY(0);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) scaleY(1);
        opacity: 1;
    }
}


/* Sidenav Scrollbar
   Slim, arrowless thumb that stays faint until the menu is hovered/focused.
   Chromium ignores ::-webkit-scrollbar once scrollbar-width/color are set,
   so the standard properties are applied only where the pseudo-elements
   are unsupported (Firefox). */
.sidenav nav {
    overscroll-behavior: contain;
}

.sidenav nav::-webkit-scrollbar {
    width: 10px;
}

.sidenav nav::-webkit-scrollbar-button {
    display: none;
    height: 0;
}

.sidenav nav::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.sidenav nav::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.18);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 9999px;
    min-height: 32px;
}

.sidenav nav:hover::-webkit-scrollbar-thumb,
.sidenav nav:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.4);
}

.sidenav nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(71, 85, 105, 0.6);
}

.sidenav nav::-webkit-scrollbar-thumb:active {
    background-color: rgba(51, 65, 85, 0.7);
}

@supports not selector(::-webkit-scrollbar) {
    .sidenav nav {
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 116, 139, 0.25) transparent;
    }

    .sidenav nav:hover,
    .sidenav nav:focus-within {
        scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
    }
}


/* ==========================================
   Collapsed State
   ========================================== */
body.sidenav-collapsed .sidenav {
    width: 76px;
}

body.sidenav-collapsed .topbar {
    margin-left: 76px;
    width: calc(100% - 76px);
}

body.sidenav-collapsed .main-content {
    margin-left: 76px;
    width: calc(100% - 76px);
}

body.sidenav-collapsed .sidenav-logo-wide {
    flex: 0 0 auto !important;
    width: 36px !important;
    max-width: 36px !important;
    object-position: center !important;
}

/* Expanded sidebar logo size: change the width below to resize. */
.sidenav-logo-full {
    width: 75%;
    height: auto;
}

body.sidenav-collapsed .sidenav-logo-full {
    display: none !important;
}

body.sidenav-collapsed .sidenav-logo-mini {
    display: block !important;
    margin-top: 10px; /* align with the topbar title row */
}

body.sidenav-collapsed .sidenav-brand {
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.sidenav-collapsed .sidenav nav,
body.sidenav-collapsed .sidenav .sidenav-bottom-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center;
}

body.sidenav-collapsed .sidenav nav a,
body.sidenav-collapsed .sidenav nav button,
body.sidenav-collapsed .sidenav nav span.flex,
body.sidenav-collapsed .sidenav .sidenav-bottom-nav a,
body.sidenav-collapsed .sidenav .sidenav-bottom-nav button,
body.sidenav-collapsed .sidenav .sidenav-bottom-nav span.flex {
    width: 44px;
    height: 40px;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 auto;
    border-radius: 12px;
}

body.sidenav-collapsed .sidenav-user {
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.sidenav-collapsed .sidenav-user a,
body.sidenav-collapsed .sidenav-user button {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: center !important;
}

body.sidenav-collapsed .sidenav-user form {
    display: none !important;
}

body.sidenav-collapsed .sidenav-label {
    display: none !important;
    max-width: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-10px);
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
}

body.sidenav-collapsed #sidenav-toggle span {
    transform: rotate(180deg);
}

/* ==========================================
   Custom Sleek Scrollbar
   ========================================== */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* ==========================================
   Bulk Actions Footer
   Full-width footer beside the sidebar; same look as the sticky save footer.
   ========================================== */
[data-bulk-action-bar] {
    position: fixed;
    bottom: 0;
    left: 260px;
    right: 0;
    z-index: 30;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out;
}

body.sidenav-collapsed [data-bulk-action-bar] {
    left: 76px;
}

[data-bulk-action-bar].is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Keep the last table rows clear of the footer while it is showing */
body:has([data-bulk-action-bar].is-visible) .main-content {
    padding-bottom: 5rem;
}

/* Action buttons were styled for a dark bar; retheme them for the light footer */
[data-bulk-actions-slot] button.bg-slate-800 {
    background-color: #ffffff;
    color: #334155;
    border-color: #cbd5e1;
}

[data-bulk-actions-slot] button.bg-slate-800:hover {
    background-color: #f1f5f9;
}

[data-bulk-actions-slot] button.bg-slate-800 .text-emerald-400 {
    color: #059669;
}

[data-bulk-actions-slot] button.bg-slate-800 .text-amber-400 {
    color: #d97706;
}


/* Overflow safety net: long unbroken words (names, emails, URLs) wrap
   instead of spilling out of their container. `anywhere` also shrinks
   min-content, so flex/grid children stop overflowing without min-w-0.
   Tables fall back to break-word so auto-layout columns don't collapse to
   one character (their cards scroll horizontally instead). `truncate`
   (white-space: nowrap) still wins where used. */
body {
    overflow-wrap: anywhere;
}

table {
    overflow-wrap: break-word;
}

.custom-select-trigger > span.truncate {
    min-width: 0;
}