body {
    font-family: 'Inter', sans-serif;
    /* White background, as on the Sinckot website */
    background: #ffffff;
}
.dark body {
    /* Deep slate background */
    background: #0f172a;
    color: #f8fafc;
}

/* Alpine.js utility */
[x-cloak] { display: none !important; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(52, 66, 78, 0.5); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(52, 66, 78, 0.8); }

/* Glass Panel utility (now flat white cards) */
.glass-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.dark .glass-panel {
    background: #1e293b;
    border: 1px solid #334155;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
}

.bg-blob {
    position: absolute;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.5;
    border-radius: 50%;
}
.delay-2000 {
    animation-delay: 2s;
}
.font-inter {
    font-family: 'Inter', sans-serif;
}
.mix-blend-hard-light { mix-blend-mode: hard-light; }
.mix-blend-plus-darker { mix-blend-mode: plus-darker; }

/* Login Page Utilities */
.login-bg-orb-1 { background: radial-gradient(circle, hsla(217,91%,60%,0.18) 0%, transparent 70%); }
.login-bg-orb-2 { background: radial-gradient(circle, hsla(280,60%,55%,0.12) 0%, transparent 70%); }
.login-bg-orb-3 { background: radial-gradient(circle, hsla(217,91%,60%,0.06) 0%, transparent 70%); }
.login-gradient-bg { background: linear-gradient(135deg, hsl(217,91%,60%), hsl(280,60%,55%)); }
.login-glass-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}
.login-text-muted { color: hsl(215,20%,65%); }
.login-text-gradient {
    background: linear-gradient(135deg, hsl(217,91%,70%), hsl(280,60%,70%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.login-input-bg {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}
.login-btn-primary {
    background: #C5A055;
    color: #212B33;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}
.login-btn-primary:hover {
    background: #DEB769;
    box-shadow: 0 4px 14px rgba(197, 160, 85, 0.35);
}

/* ── Confirm Modal ─────────────────────────────────────────────────────── */

.confirm-modal-panel {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    width: 100%;
    max-width: 28rem;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}

/* Icon circle */
.confirm-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    margin-bottom: 1.25rem;
    position: relative;
}
.confirm-modal-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.confirm-modal-wrapper.is-open .confirm-modal-icon::after {
    opacity: 1;
    animation: confirmPulse 2s ease-out infinite;
}
@keyframes confirmPulse {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(1.2); opacity: 0; }
}
.confirm-modal-icon--danger {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.14), rgba(220, 38, 38, 0.08));
    color: #dc2626;
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.06);
}
.confirm-modal-icon--danger::after {
    border: 2px solid rgba(239, 68, 68, 0.2);
}
.confirm-modal-icon--warning {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.08));
    color: #d97706;
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.06);
}
.confirm-modal-icon--warning::after {
    border: 2px solid rgba(245, 158, 11, 0.2);
}

/* Title */
.confirm-modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Description text */
.confirm-modal-text {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.65;
    margin-bottom: 1rem;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
}

/* Highlighted item badge */
.confirm-modal-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

/* Warning note */
.confirm-modal-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 600;
    margin-bottom: 1.5rem;
    background: rgba(239, 68, 68, 0.06);
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
}

/* Actions row */
.confirm-modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding-top: 0.75rem;
}

/* Buttons */
.confirm-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    min-width: 7rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
}
.confirm-modal-btn--cancel {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.confirm-modal-btn--cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
    transform: translateY(-1px);
}
.confirm-modal-btn--danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35), 0 1px 3px rgba(220, 38, 38, 0.2);
}
.confirm-modal-btn--danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    transform: translateY(-2px);
}
.confirm-modal-btn--primary {
    background: #C5A055;
    color: #212B33;
    box-shadow: 0 2px 8px rgba(197, 160, 85, 0.35);
}
.confirm-modal-btn--primary:hover {
    background: #DEB769;
    box-shadow: 0 6px 20px rgba(197, 160, 85, 0.4);
    transform: translateY(-2px);
}

/* ── Dark Mode ── */
.dark .confirm-modal-panel {
    background: #1e293b;
    border-color: #334155;
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}
.dark .confirm-modal-title {
    color: #f1f5f9;
}
.dark .confirm-modal-text {
    color: #94a3b8;
}
.dark .confirm-modal-item {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
.dark .confirm-modal-warning {
    color: #f87171;
    background: rgba(239, 68, 68, 0.08);
}
.dark .confirm-modal-btn--cancel {
    background: #0f172a;
    color: #cbd5e1;
    border-color: #334155;
}
.dark .confirm-modal-btn--cancel:hover {
    background: #334155;
    color: #f1f5f9;
}
.dark .confirm-modal-icon--danger {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.12));
    color: #f87171;
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.08);
}
.dark .confirm-modal-icon--warning {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.12));
    color: #fbbf24;
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.08);
}

/* ─────────────────────────────────────────────────────────────
   Select2 — Custom Theme (matching x-custom-select)
   ───────────────────────────────────────────────────────────── */

/* === Trigger box (the visible closed select) === */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    min-height: 2.625rem;
    height: auto;
    padding: 0.35rem 0.875rem;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: #94a3b8;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
}

/* Single value text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #0f172a;
    line-height: 1.5rem;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

/* Placeholder text */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* Dropdown arrow — matching chevron */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.625rem;
    right: 0.625rem;
    top: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent;
    border-width: 5px 4px 0 4px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #94a3b8 transparent;
    border-width: 0 4px 5px 4px;
}

/* Focus / open state */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #34424E;
    box-shadow: 0 0 0 3px rgba(52, 66, 78, 0.12);
    outline: none;
}

/* === Dropdown panel === */
.select2-dropdown {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    /* Appended to <body> via dropdownParent, so it is a SIBLING of the modal and
       slide-over layers below - see the z-index scale note at the end of this file. */
    z-index: 70000;
}

/* Search box inside dropdown */
.select2-container--default .select2-search--dropdown {
    padding: 0.5rem;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.8125rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    width: 100%;
    transition: all 0.15s ease;
    box-shadow: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #34424E;
    box-shadow: 0 0 0 2px rgba(52, 66, 78, 0.1);
    background: #fff;
}

/* Results list container */
.select2-results__options {
    padding: 0.25rem 0;
}

/* Option items */
.select2-container--default .select2-results__option {
    padding: 0.5rem 0.75rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 400;
    transition: background 0.1s ease;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Highlighted (keyboard / hover) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #f1f5f9;
    color: #334155;
}

/* Selected option */
.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(52, 66, 78, 0.06);
    color: #2A3640;
    font-weight: 600;
}
.select2-container--default .select2-results__option[aria-selected=true]::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232A3640' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* === Multi-select tags === */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1rem 0.5rem;
    margin: 2px 4px 2px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #64748b;
    margin-right: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #334155;
}

/* Full-width */
.select2-container { width: 100% !important; }

/* ── DARK MODE ── */
.dark .select2-container--default .select2-selection--single,
.dark .select2-container--default .select2-selection--multiple {
    background: #334155;
    border-color: #475569;
    box-shadow: none;
}

.dark .select2-container--default .select2-selection--single:hover,
.dark .select2-container--default .select2-selection--multiple:hover {
    border-color: #64748b;
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f1f5f9;
}

.dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #64748b;
}

.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent;
}
.dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #64748b transparent;
}

.dark .select2-container--default.select2-container--focus .select2-selection--single,
.dark .select2-container--default.select2-container--focus .select2-selection--multiple,
.dark .select2-container--default.select2-container--open .select2-selection--single,
.dark .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #7D8891;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
}

.dark .select2-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

.dark .select2-container--default .select2-search--dropdown {
    background: transparent;
    border-bottom-color: #334155;
}
.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}
.dark .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #7D8891;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.12);
}

.dark .select2-container--default .select2-results__option {
    color: #cbd5e1;
    background: transparent;
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #334155;
    color: #cbd5e1;
}

.dark .select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(129, 140, 248, 0.1);
    color: #ACB5BC;
    font-weight: 600;
}
.dark .select2-container--default .select2-results__option[aria-selected=true]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #475569;
    border-color: #64748b;
    color: #f1f5f9;
}
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #94a3b8;
}
.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #e0f2fe;
}

/* ─────────────────────────────────────────────────
   Form Element Base Styles (Refined & Professional)
   ───────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="week"],
select,
textarea {
    border: 1px solid #E2E8F0 !important;
    background-color: #F8FAFC !important;
    color: #0F172A !important;
    font-size: 0.875rem !important; /* 14px */
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}

/* Hover State */
input[type="text"]:hover:not(:focus),
input[type="email"]:hover:not(:focus),
input[type="url"]:hover:not(:focus),
input[type="password"]:hover:not(:focus),
input[type="number"]:hover:not(:focus),
input[type="date"]:hover:not(:focus),
input[type="datetime-local"]:hover:not(:focus),
input[type="month"]:hover:not(:focus),
input[type="search"]:hover:not(:focus),
input[type="tel"]:hover:not(:focus),
input[type="time"]:hover:not(:focus),
input[type="week"]:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: #CBD5E1 !important;
    background-color: #F8FAFC !important;
}

/* Focus State (Sharp & Minimalist) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
select:focus,
textarea:focus {
    border-color: #0F172A !important; /* Slate 900 for a crisp edge */
    box-shadow: 0 0 0 1px #0F172A !important; /* Sharp 1px ring instead of blurry shadow */
    background-color: #FFFFFF !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear { display: none !important; }

input::placeholder,
textarea::placeholder {
    color: #94A3B8 !important; 
    font-weight: 400;
}

/* ── Dark-mode Professional overrides ── */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="url"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="time"],
.dark input[type="week"],
.dark select,
.dark textarea {
    border-color: #334155 !important;
    background-color: #0F172A !important;
    color: #F8FAFC !important;
    box-shadow: none !important;
}

.dark input[type="text"]:hover:not(:focus),
.dark input[type="email"]:hover:not(:focus),
.dark input[type="url"]:hover:not(:focus),
.dark input[type="password"]:hover:not(:focus),
.dark input[type="number"]:hover:not(:focus),
.dark input[type="date"]:hover:not(:focus),
.dark input[type="datetime-local"]:hover:not(:focus),
.dark input[type="month"]:hover:not(:focus),
.dark input[type="search"]:hover:not(:focus),
.dark input[type="tel"]:hover:not(:focus),
.dark input[type="time"]:hover:not(:focus),
.dark input[type="week"]:hover:not(:focus),
.dark select:hover:not(:focus),
.dark textarea:hover:not(:focus) {
    border-color: #475569 !important;
    background-color: #1E293B !important;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="url"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="month"]:focus,
.dark input[type="search"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="time"]:focus,
.dark input[type="week"]:focus,
.dark select:focus,
.dark textarea:focus {
    background-color: #0F172A !important;
    border-color: #F8FAFC !important;
    box-shadow: 0 0 0 1px #F8FAFC !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748B !important; 
}

/* ─────────────────────────────────────────────────
   Theme Card (Custom Shadows)
   ───────────────────────────────────────────────── */
.theme-card {
    border-radius: 6px !important;
    box-shadow: 0px 0px 25px 0px #E2E8F0 !important;
    border: none !important;
}

.dark .theme-card {
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.6) !important;
}

/* ─────────────────────────────────────────────────
   Select — Custom Styled Dropdown
   ───────────────────────────────────────────────── */
select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

select:hover {
    border-color: #94a3b8 !important; /* slate-400 */
}

.dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

.dark select:hover {
    border-color: #64748b !important; /* slate-500 */
}

/* ── Select option styling ── */
select option {
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    color: #0f172a;
}

.dark select option {
    background-color: #334155;
    color: #f1f5f9;
}

/* ─────────────────────────────────────────────────
   Checkbox & Radio
   ───────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
    border: 1px solid #cbd5e1 !important;
    color: #34424E;
    width: auto;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(52, 66, 78, 0.15);
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
    border-color: #475569 !important;
}

/* ─────────────────────────────────────────────────
   Custom Select Component
   ───────────────────────────────────────────────── */
.custom-select-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 0.25rem;
}

.custom-select-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.375rem;
    font-family: 'Inter', sans-serif;
}
.dark .custom-select-label {
    color: #cbd5e1;
}
.dark label{ color: #cbd5e1 !important; }

label {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    color: #444749 !important;
    margin: 0 0 6px 0 !important;
}

/* ── Trigger Button ── */
.custom-select-trigger {
display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.625rem;
    padding: 12px 14px;
    padding-right: 2.25rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    position: relative;
}
.custom-select-trigger:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
}
.custom-select-trigger--open {
    border-color: #34424E !important;
    box-shadow: 0 0 0 3px rgba(52, 66, 78, 0.12) !important;
}

/* Scoped layout for filters-container */
.filters-container .custom-select-trigger {
    min-height: 2.5rem !important;
    height: 2.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: #f8fafc !important; /* bg-slate-50 */
    border-color: #e2e8f0 !important; /* border-slate-200 */
    border-radius: 6px !important;
}
.dark .filters-container .custom-select-trigger {
    background-color: #0f172a !important; /* bg-slate-900 */
    border-color: #334155 !important; /* border-slate-700 */
}

.dark .custom-select-trigger {
    background: #334155;
    border-color: #475569 !important;
    color: #f1f5f9;
}
.dark .custom-select-trigger:hover {
    border-color: #64748b !important;
}
.dark .custom-select-trigger.custom-select-trigger--open {
    border-color: #7D8891 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}

.custom-select-value {
    color: #0f172a;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .custom-select-value {
    color: #f1f5f9;
}

.custom-select-placeholder {
    color: #94a3b8;
}
.dark .custom-select-placeholder {
    color: #64748b;
}

.custom-select-chevron {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}
.custom-select-chevron--open {
    transform: translateY(-50%) rotate(180deg);
}
.dark .custom-select-chevron {
    color: #64748b;
}

/* ── Dropdown Panel ── */
.custom-select-dropdown {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.dark .custom-select-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.35),
        0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* Transitions */
.custom-select-enter {
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.custom-select-enter-start {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
}
.custom-select-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.custom-select-leave {
    transition: opacity 0.1s ease, transform 0.1s ease;
}
.custom-select-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.custom-select-leave-end {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
}

/* ── Search ── */
.custom-select-search-wrap {
    position: relative;
    padding: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.dark .custom-select-search-wrap {
    border-bottom-color: #334155;
}
.custom-select-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.custom-select-search {
    width: 100%;
    padding: 0.375rem 0.625rem 0.375rem 2rem !important;
    font-size: 0.8125rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.375rem !important;
    background: #f8fafc !important;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    outline: none;
    box-shadow: none !important;
}
.custom-select-search:focus {
    border-color: #34424E !important;
    box-shadow: 0 0 0 2px rgba(52, 66, 78, 0.1) !important;
    background: #fff !important;
}
.dark .custom-select-search {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0;
}
.dark .custom-select-search:focus {
    border-color: #7D8891 !important;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.12) !important;
}

/* ── Options List ── */
.custom-select-options {
    max-height: 14rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0.25rem 0;
}
.custom-select-options::-webkit-scrollbar {
    width: 5px;
}
.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.custom-select-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.dark .custom-select-options::-webkit-scrollbar-thumb {
    background: #475569;
}

/* ── Option Item ── */
.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
    transition: background 0.1s ease;
    font-family: 'Inter', sans-serif;
}
/* CR-19: keep long labels from widening the panel / forcing horizontal scroll */
.custom-select-option > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.custom-select-option .custom-select-check {
    flex-shrink: 0;
}
.custom-select-option:hover,
.custom-select-option--highlighted {
    background: #f1f5f9;
}
.custom-select-option--active {
    color: #2A3640;
    font-weight: 600;
    background: rgba(52, 66, 78, 0.06);
}
.custom-select-option--active:hover,
.custom-select-option--active.custom-select-option--highlighted {
    background: rgba(52, 66, 78, 0.1);
}
.custom-select-option--placeholder {
    color: #94a3b8;
    font-style: italic;
    border-bottom: 1px solid #f1f5f9;
}
.dark .custom-select-option--placeholder {
    color: #64748b;
    border-bottom-color: #334155;
}

.dark .custom-select-option {
    color: #cbd5e1;
}
.dark .custom-select-option:hover,
.dark .custom-select-option--highlighted {
    background: #334155;
}
.dark .custom-select-option--active {
    color: #ACB5BC;
    background: rgba(129, 140, 248, 0.1);
}
.dark .custom-select-option--active:hover,
.dark .custom-select-option--active.custom-select-option--highlighted {
    background: rgba(129, 140, 248, 0.15);
}

/* Check icon */
.custom-select-check {
    color: #34424E;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.dark .custom-select-check {
    color: #ACB5BC;
}

/* Empty state */
.custom-select-empty {
    padding: 1rem 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    color: #94a3b8;
    font-family: 'Inter', sans-serif;
}
.dark .custom-select-empty {
    color: #64748b;
}

/* ─────────────────────────────────────────────────
   Searchable Multiselect Component
   ───────────────────────────────────────────────── */

/* ── Trigger ── */
.searchable-multiselect-trigger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 2.625rem;
    padding: 0.5rem 0.75rem;
    padding-right: 2.25rem;
    background: #fff;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    position: relative;
}
.searchable-multiselect-trigger:hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08);
}
.searchable-multiselect-trigger--open {
    border-color: #34424E !important;
    box-shadow: 0 0 0 3px rgba(52, 66, 78, 0.12) !important;
}

.dark .searchable-multiselect-trigger {
    background: #334155;
    border-color: #475569 !important;
    color: #f1f5f9;
}
.dark .searchable-multiselect-trigger:hover {
    border-color: #64748b !important;
}
.dark .searchable-multiselect-trigger.searchable-multiselect-trigger--open {
    border-color: #7D8891 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}

/* ── Selected Tags ── */
.searchable-multiselect-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(52, 66, 78, 0.08);
    color: #2A3640;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}
.dark .searchable-multiselect-tag {
    background: rgba(129, 140, 248, 0.15);
    color: #ACB5BC;
}

.searchable-multiselect-tag-remove {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #34424E;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.1s ease;
}
.searchable-multiselect-tag-remove:hover {
    color: #0F151B;
}
.dark .searchable-multiselect-tag-remove {
    color: #ACB5BC;
}
.dark .searchable-multiselect-tag-remove:hover {
    color: #EEF4F8;
}

/* ── "+N more" badge ── */
.searchable-multiselect-more {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}
.dark .searchable-multiselect-more {
    background: #475569;
    color: #cbd5e1;
}

/* ── Chevron ── */
.searchable-multiselect-chevron {
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}
.searchable-multiselect-chevron--open {
    transform: translateY(-50%) rotate(180deg);
}
.dark .searchable-multiselect-chevron {
    color: #64748b;
}

/* ── Dropdown Panel ── */
.searchable-multiselect-dropdown {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.dark .searchable-multiselect-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.35),
        0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

/* ── Quick Actions Bar ── */
.searchable-multiselect-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
}
.dark .searchable-multiselect-actions {
    background: rgba(51, 65, 85, 0.3);
    border-bottom-color: #334155;
}

.searchable-multiselect-action-btn {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    font-family: 'Inter', sans-serif;
    transition: color 0.1s ease;
}
.searchable-multiselect-action-btn:hover {
    color: #334155;
}
.searchable-multiselect-action-btn--primary {
    color: #34424E;
}
.searchable-multiselect-action-btn--primary:hover {
    color: #2A3640;
}
.dark .searchable-multiselect-action-btn {
    color: #94a3b8;
}
.dark .searchable-multiselect-action-btn:hover {
    color: #f1f5f9;
}
.dark .searchable-multiselect-action-btn--primary {
    color: #7D8891;
}
.dark .searchable-multiselect-action-btn--primary:hover {
    color: #ACB5BC;
}

/* ── Option Row ── */
.searchable-multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    transition: background 0.1s ease;
    font-family: 'Inter', sans-serif;
}
.searchable-multiselect-option:hover {
    background: #f1f5f9;
}
.searchable-multiselect-option--active {
    background: rgba(52, 66, 78, 0.06);
}
.searchable-multiselect-option--active:hover {
    background: rgba(52, 66, 78, 0.1);
}

.dark .searchable-multiselect-option:hover {
    background: #334155;
}
.dark .searchable-multiselect-option--active {
    background: rgba(129, 140, 248, 0.1);
}
.dark .searchable-multiselect-option--active:hover {
    background: rgba(129, 140, 248, 0.15);
}
.dark .searchable-multiselect-option span {
    color: #cbd5e1;
}

/* ── Tenant Form Animations ── */
/* Nice spring animation for the toggle pills */
.ease-spring {
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Fade in down animation for error messages */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-down {
    animation: fadeInDown 0.4s ease-out forwards;
}

/* ── Theme Card Shadows ── */
.theme-card {
    border-radius: 6px !important;
    box-shadow: 0px 0px 25px 0px #E2E8F0 !important;
    border: none !important;
}
.dark .theme-card {
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.6) !important;
}

/* ── Soft Navigation Page Transitions ── */
.page-transition-enter {
    animation: fadeSlideIn 0.2s ease-out forwards;
}
@keyframes fadeSlideIn {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

/* ── FullCalendar Premium Styles ── */
.fc { --fc-border-color: #E2E8F0; --fc-page-bg-color: transparent; font-family: inherit; }
.dark .fc { --fc-border-color: #334155; }
.fc .fc-toolbar-chunk { display: flex; gap: 0.5rem; align-items: center; }
.fc .fc-button-group { display: flex; gap: 0.5rem; }
.fc .fc-button { text-transform: capitalize; border-radius: 6px !important; margin: 0 !important; font-weight: 600 !important; font-size: 13px !important; padding: 0.5rem 1rem !important; transition: all 0.2s ease !important; border: 1px solid #E2E8F0 !important; color: #475569 !important; background: #F8FAFC !important; box-shadow: none !important; }
.dark .fc .fc-button { border-color: #334155 !important; color: #cbd5e1 !important; background: #1e293b !important; }
.fc .fc-button:hover { background: #e2e8f0 !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
.dark .fc .fc-button:hover { background-color: #334155 !important; color: #f8fafc !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background: #34424E !important; border-color: #34424E !important; color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(52, 66, 78, 0.3) !important; }
.dark .fc .fc-button-primary:not(:disabled).fc-button-active, .dark .fc .fc-button-primary:not(:disabled):active { background: #2A3640 !important; border-color: #2A3640 !important; color: #ffffff !important; }
.fc-header-toolbar { margin-bottom: 2rem !important; padding: 0.75rem 1rem !important; background: #ffffff; border: 1px solid #E2E8F0; border-radius: 6px; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.dark .fc-header-toolbar { background: #1e293b; border-color: #334155; }
.fc-toolbar-title { font-size: 1.125rem !important; font-weight: 800 !important; color: #1e293b; letter-spacing: 0.5px; text-transform: uppercase; }
.dark .fc-toolbar-title { color: #f8fafc; }
.fc-theme-standard th { padding: 12px 0 !important; font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em; color: #64748b; background-color: #F8F9FD; border: none !important; border-bottom: 1px solid var(--fc-border-color) !important; }
.dark .fc-theme-standard th { color: #94a3b8; background-color: #1e293b; }
.fc-theme-standard td, .fc-theme-standard th { border: 1px solid var(--fc-border-color); }
.fc-scrollgrid { border: 1px solid var(--fc-border-color) !important; border-radius: 6px; overflow: hidden; }
.fc-daygrid-day { transition: background-color 0.2s ease; }
.fc-daygrid-day:hover { background-color: rgba(244, 245, 251, 0.8); }
.dark .fc-daygrid-day:hover { background-color: rgba(51, 65, 85, 0.3); }
.fc-daygrid-day-number { display: inline-flex !important; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50% !important; background-color: transparent !important; color: #475569 !important; margin: 4px; font-size: 0.8rem; font-weight: 600; text-decoration: none !important; }
.dark .fc-daygrid-day-number { background-color: transparent !important; color: #cbd5e1 !important; }
.fc .fc-day-today { background-color: rgba(42, 54, 64, 0.03) !important; }
.dark .fc .fc-day-today { background-color: rgba(52, 66, 78, 0.05) !important; }
.fc-day-today .fc-daygrid-day-number { background-color: #2A3640 !important; color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(52, 66, 78, 0.3) !important; font-weight: 800 !important; }
.dark .fc-day-today .fc-daygrid-day-number { background-color: #7D8891 !important; color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(129, 140, 248, 0.3) !important; }
.fc-event { background-color: #ffffff !important; border-radius: 4px !important; font-size: 0.75rem !important; font-weight: 600 !important; border: 1px solid #E2E8F0 !important; border-left: 4px solid #2A3640 !important; margin-top: 4px !important; color: #1e293b !important; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; overflow: hidden; }
.dark .fc-event { background-color: #1e293b !important; border-color: #334155 !important; border-left: 4px solid #7D8891 !important; color: #f1f5f9 !important; }
.fc-event:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !important; z-index: 10 !important; border-color: #cbd5e1 !important; }
.fc-event-main { padding: 4px 6px !important; color: inherit !important; }
.fc-daygrid-event-dot { display: none !important; }
.fc-event.cal-timesheet, .fc-v-event.cal-timesheet { border-left-color: #10b981 !important; }
.dark .fc-event.cal-timesheet, .dark .fc-v-event.cal-timesheet { border-left-color: #34d399 !important; }
.fc-timegrid-slot-label-cushion { color: #64748b !important; font-size: 0.75rem !important; font-weight: 600 !important; padding: 0 8px !important; }
.dark .fc-timegrid-slot-label-cushion { color: #94a3b8 !important; }
.fc-timegrid-slot { border-bottom: 1px solid #f1f5f9 !important; }
.dark .fc-timegrid-slot { border-bottom-color: #1e293b !important; }
.fc-timegrid-now-indicator-line { border-color: #ef4444 !important; border-width: 2px !important; box-shadow: 0 1px 2px rgba(239, 68, 68, 0.4); }
.fc-timegrid-now-indicator-arrow { border-color: #ef4444 !important; border-width: 5px !important; }
.fc-v-event { border-radius: 6px !important; padding: 4px 6px !important; border: 1px solid #E2E8F0 !important; border-left: 4px solid #2A3640 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; background-color: #ffffff !important; color: #1e293b !important; }
.dark .fc-v-event { border-color: #334155 !important; border-left: 4px solid #7D8891 !important; background-color: #1e293b !important; color: #f1f5f9 !important; }
.fc-v-event .fc-event-main { color: inherit !important; padding: 0 !important; }
.fc-v-event .fc-event-time { font-size: 0.7rem !important; margin-bottom: 2px; }
.fc-v-event .fc-event-title { font-size: 0.75rem !important; font-weight: 700 !important; line-height: 1.2; }
.custom-calendar-shadow, .custom-timesheet-shadow { box-shadow: 0px 0px 25px 0px #E2E8F0; }
.dark .custom-calendar-shadow, .dark .custom-timesheet-shadow { box-shadow: none; }
@media (max-width: 640px) {
    .fc-header-toolbar { flex-direction: column !important; gap: 0.75rem !important; align-items: stretch !important; padding: 0.75rem !important; margin-bottom: 1rem !important; }
    .fc .fc-toolbar-chunk { justify-content: center !important; flex-wrap: wrap; }
    .fc .fc-toolbar-chunk:first-child { order: 2; }
    .fc .fc-toolbar-chunk:nth-child(2) { order: 1; margin-bottom: 0.25rem; }
    .fc .fc-toolbar-chunk:last-child { order: 3; }
    .fc .fc-button { padding: 0.35rem 0.5rem !important; font-size: 11px !important; }
    .fc-toolbar-title { font-size: 1.1rem !important; }
    .fc-event { font-size: 0.65rem !important; line-height: 1.2 !important; padding: 3px 2px !important; white-space: normal !important; height: auto !important; }
    .fc-event-main { white-space: normal !important; overflow-wrap: break-word; }
    .fc-daygrid-day-number { width: 20px; height: 20px; font-size: 0.7rem; margin: 2px; }
}

/* ── Batch payment grid (Finance > Log Payment) ─────────────────────────── */
/* The payment line is ten columns of form controls. Under the table's default
   auto layout a long property or owner name set that column's width -- the
   select's value span will not shrink below its own text -- so the table grew
   to ~1476px inside a ~1104px card and the line ran off the right of the
   screen (client change #92).

   Fixed layout takes the widths from here instead of from the content. The
   columns split into two kinds:

     - Typed or read-back values (the two amounts, the date) get a fixed pixel
       width. Measured in Chrome, "1775.00" with its GBP prefix needs 112px and
       a date input needs 142px; below that they clip their own value, which
       is worse than a line that scrolls. The client asked for the two amount
       boxes to be smaller, but they were already only 100px -- the width was
       never coming from them, it was coming from Property, Owner and Bank.

     - Names picked from a dropdown share whatever is left, via calc(). They
       ellipse when space is tight, which is safe: the value was just chosen
       from a 250px-wide list.

   These live here rather than as Tailwind utilities because the compiled
   bundle in public/build only carries the classes it was built with, so a new
   arbitrary value would silently do nothing. */
.payment-grid {
    table-layout: fixed;
    width: 100%;
    /* Below this the amount and date inputs start clipping their own values,
       which is worse than a card that scrolls sideways. 1104px is what the
       card gets on a 1440px screen with the sidebar open; narrower than that,
       or collapse the sidebar. */
    min-width: 1104px;
}

/* Percentages, so the line always fills the card exactly. calc() with a
   percentage is silently ignored for a fixed-layout table column -- Chrome
   falls back to equal shares -- so the split is expressed directly. The shares
   are sized against the 1104px the card gets on a 1440px screen with the
   sidebar open, which is where the fixed-width controls are tightest, and were
   picked by measuring candidates in Chrome rather than by arithmetic.

   The last column is only rendered when there is more than one payment row,
   but it still gets a share. Leaving it unsized made the other nine scale down
   by ~3.5% whenever it appeared, which was enough to clip the deduction box.
   Giving it a share keeps the proportions identical either way -- with one row
   the browser hands the unused 3.5% back. */
.payment-grid th:nth-child(1)  { width: 3.86%; }   /* # */
.payment-grid th:nth-child(2)  { width: 17.37%; }  /* Property */
.payment-grid th:nth-child(3)  { width: 10.62%; }  /* Rent Received   >= 116px */
.payment-grid th:nth-child(4)  { width: 9.65%; }   /* Deduction       >= 108px */
.payment-grid th:nth-child(5)  { width: 12.55%; }  /* Date Paid       >= 144px */
.payment-grid th:nth-child(6)  { width: 11.1%; }   /* Owner */
.payment-grid th:nth-child(7)  { width: 10.62%; }  /* Bank Account */
.payment-grid th:nth-child(8)  { width: 10.13%; }  /* Mode */
.payment-grid th:nth-child(9)  { width: 10.62%; }  /* Notes */
.payment-grid th:nth-child(10) { width: 3.5%; }    /* remove row */

/* Fixed columns clip rather than stretch, so the value has to be allowed to
   shrink -- otherwise it overflows the trigger into the next cell instead of
   ellipsing. Scoped to this grid so no other select changes behaviour. */
.payment-grid .custom-select-value,
.payment-grid .custom-select-placeholder {
    min-width: 0;
}

/* The default trigger spends 50px of a narrow column on padding alone, which
   left "Bank Transfer" showing as "B...". The chevron sits at right: 0.625rem
   and is 16px wide, so 1.75rem of right padding still clears it. */
.payment-grid .custom-select-trigger {
    padding-left: 0.5rem;
    padding-right: 1.75rem;
}

/* ── Street View on the property hero image ──────────────────────────────────
   The panorama sits over the still photo rather than replacing it, so toggling
   back costs nothing and the card never changes height. */
.property-streetview-pane {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Above the panorama so the control stays clickable once it is showing. */
.property-streetview-toggle {
    z-index: 2;
    border-radius: 6px;
}

/* Coverage gaps and load failures report here instead of leaving a grey box. */
.property-streetview-notice {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    max-width: 60%;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Teleported Modal & Slide-over Layers ──────────────────────────────────────
   The main application container in app.blade.php uses `relative z-10`.
   Teleported overlays appended directly to <body> MUST have position: fixed,
   inset: 0, and an explicit z-index higher than z-10 so their backdrops and
   panels render in front of all page cards and layouts. */
.teleport-slideover-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 50000 !important;
}

.teleport-modal-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60000 !important;
}

/* ── Global Confirm Modal Layer ────────────────────────────────────────────────
   Must always sit ABOVE all slide-overs (50000) and modals (60000) so that
   confirmation dialogs (e.g. "Remove File", "Delete Property") are never dimmed
   or blurred behind a slide-over's backdrop. */
.confirm-modal-wrapper {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
}

/* ── Body-teleported Layer Scale (read before picking a z-index) ───────────────
   Anything moved to <body> - by x-teleport, or by Select2's dropdownParent -
   stops being a descendant of the panel it visually belongs to and becomes a
   SIBLING of these layers, competing in the root stacking context. A dropdown
   left on the old 9999 therefore painted BEHIND an open modal: hidden under the
   panel, and dimmed and blurred by the backdrop's `bg-slate-900/60
   backdrop-blur-md`. The options looked faded and could not be clicked.

   The scale, lowest first:
     10     page container (`relative z-10` in app.blade.php)
     50000  .teleport-slideover-layer
     60000  .teleport-modal-layer
     70000  floating panels - select dropdowns, row action menus
     100000 .confirm-modal-wrapper

   Floating panels sit above modals and slide-overs so their options are always
   visible, and below the confirm modal so a confirmation dialog still covers an
   open dropdown. Panels that are NOT teleported keep their small local z-index
   (e.g. .custom-select-dropdown's 50): they stay inside their own stacking
   context, where a big number would be meaningless.

   Select2 note: AttachBody.render() wraps the panel in a BARE <span> with no
   class, so there is no body-level `.select2-container` to target - and styling
   `.select2-container--open` would only hit the inline trigger and lift that
   above the rest of the modal. The z-index belongs on .select2-dropdown itself,
   which is position:absolute inside a z-index:auto wrapper and so resolves
   against the root stacking context. */