/* ==========================================================================================
   LoveOurClub custom icons - tennis / pickleball domain icons not available in FontAwesome.
   Rendered like a font icon: <i class="loc-icon loc-tennis-racket"></i>. Each icon is an SVG
   applied as a CSS mask, so it inherits the surrounding text colour (currentColor) and sizes
   to 1em - matching how FontAwesome icons behave inside a button, calendar cell, etc.
   Add a new icon by adding one class + a mask-image, then list it in Scripts/iconpicker.js.
   ========================================================================================== */

.loc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.loc-icon.loc-tennis-racket {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cellipse cx='12' cy='8' rx='6' ry='7'/%3E%3Cpath d='M12 15 L12 22' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M6.5 6 H17.5 M6.5 10 H17.5 M9.5 2 V14 M14.5 2 V14' stroke-width='0.9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cellipse cx='12' cy='8' rx='6' ry='7'/%3E%3Cpath d='M12 15 L12 22' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M6.5 6 H17.5 M6.5 10 H17.5 M9.5 2 V14 M14.5 2 V14' stroke-width='0.9'/%3E%3C/svg%3E");
}

.loc-icon.loc-pickleball-paddle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='2' width='12' height='15' rx='6'/%3E%3Crect x='10.5' y='16' width='3' height='6' rx='1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='2' width='12' height='15' rx='6'/%3E%3Crect x='10.5' y='16' width='3' height='6' rx='1'/%3E%3C/svg%3E");
}

.loc-icon.loc-ball-machine {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='8' width='15' height='11' rx='2'/%3E%3Ccircle cx='19' cy='6.5' r='2.3'/%3E%3Crect x='5.5' y='19' width='2.5' height='2.5' rx='0.5'/%3E%3Crect x='13' y='19' width='2.5' height='2.5' rx='0.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='8' width='15' height='11' rx='2'/%3E%3Ccircle cx='19' cy='6.5' r='2.3'/%3E%3Crect x='5.5' y='19' width='2.5' height='2.5' rx='0.5'/%3E%3Crect x='13' y='19' width='2.5' height='2.5' rx='0.5'/%3E%3C/svg%3E");
}

.loc-icon.loc-singles {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='6' r='3.3'/%3E%3Cpath d='M5.5 21 a6.5 6.5 0 0 1 13 0 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='6' r='3.3'/%3E%3Cpath d='M5.5 21 a6.5 6.5 0 0 1 13 0 Z'/%3E%3C/svg%3E");
}

.loc-icon.loc-doubles {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='8' cy='7' r='2.7'/%3E%3Cpath d='M2.5 20 a5.5 5.5 0 0 1 11 0 Z'/%3E%3Ccircle cx='16' cy='7' r='2.7'/%3E%3Cpath d='M10.5 20 a5.5 5.5 0 0 1 11 0 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='8' cy='7' r='2.7'/%3E%3Cpath d='M2.5 20 a5.5 5.5 0 0 1 11 0 Z'/%3E%3Ccircle cx='16' cy='7' r='2.7'/%3E%3Cpath d='M10.5 20 a5.5 5.5 0 0 1 11 0 Z'/%3E%3C/svg%3E");
}

.loc-icon.loc-mixed-doubles {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='8' cy='7' r='2.7'/%3E%3Cpath d='M2.5 20 a5.5 5.5 0 0 1 11 0 Z'/%3E%3Ccircle cx='16' cy='7' r='2.7'/%3E%3Cpath d='M11.5 20 L16 10.5 L20.5 20 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='8' cy='7' r='2.7'/%3E%3Cpath d='M2.5 20 a5.5 5.5 0 0 1 11 0 Z'/%3E%3Ccircle cx='16' cy='7' r='2.7'/%3E%3Cpath d='M11.5 20 L16 10.5 L20.5 20 Z'/%3E%3C/svg%3E");
}

.loc-icon.loc-net {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 5 V20 M21 5 V20'/%3E%3Crect x='3' y='9' width='18' height='7'/%3E%3Cpath d='M7.5 9 V16 M12 9 V16 M16.5 9 V16 M3 12.5 H21' stroke-width='0.9'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 5 V20 M21 5 V20'/%3E%3Crect x='3' y='9' width='18' height='7'/%3E%3Cpath d='M7.5 9 V16 M12 9 V16 M16.5 9 V16 M3 12.5 H21' stroke-width='0.9'/%3E%3C/svg%3E");
}

.loc-icon.loc-skill {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='14' width='3.5' height='7' rx='0.8'/%3E%3Crect x='8.7' y='10' width='3.5' height='11' rx='0.8'/%3E%3Crect x='14.4' y='6' width='3.5' height='15' rx='0.8'/%3E%3Crect x='20.1' y='2' width='3.5' height='19' rx='0.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='14' width='3.5' height='7' rx='0.8'/%3E%3Crect x='8.7' y='10' width='3.5' height='11' rx='0.8'/%3E%3Crect x='14.4' y='6' width='3.5' height='15' rx='0.8'/%3E%3Crect x='20.1' y='2' width='3.5' height='19' rx='0.8'/%3E%3C/svg%3E");
}

/* --- Pickleball skill-level badges (1.0-6.0 in 0.5 steps): a ring around the level number. --- */
.loc-icon.loc-skill-1-0 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E1.0%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E1.0%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-1-5 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E1.5%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E1.5%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-2-0 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E2.0%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E2.0%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-2-5 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E2.5%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E2.5%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-3-0 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E3.0%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E3.0%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-3-5 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E3.5%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E3.5%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-4-0 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E4.0%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E4.0%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-4-5 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E4.5%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E4.5%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-5-0 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E5.0%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E5.0%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-5-5 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E5.5%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E5.5%3C/text%3E%3C/svg%3E");
}
.loc-icon.loc-skill-6-0 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E6.0%3C/text%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10.5'/%3E%3Ctext x='12' y='12.5' text-anchor='middle' dominant-baseline='central' font-family='Arial,sans-serif' font-size='9' font-weight='700' fill='%23000' stroke='none'%3E6.0%3C/text%3E%3C/svg%3E");
}

/* =====================================================================================
   Tab Balance widget - balance-due "payment nudge"
   Applied only when a member owes and the club enabled emphasis (see ShowTabBalance).
   ===================================================================================== */
.loc-tab-due {
    background-color: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.45);
    border-left: 4px solid #dc3545;
    border-radius: 0.375rem;
    padding: 1rem;
}

.loc-tab-due-msg {
    color: #dc3545;
    font-weight: 600;
}

.loc-pay-pulse {
    animation: loc-pay-pulse 1.6s ease-in-out infinite;
}

@keyframes loc-pay-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .loc-pay-pulse { animation: none; }
}

/* =====================================================================================
   My Membership widget - expiring-soon / expired highlight
   Applied only when the membership is within the club's highlight window (see ShowMembershipWidget).
   ===================================================================================== */
.loc-membership-expiring {
    background-color: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.55);
    border-left: 4px solid #ffc107;
    border-radius: 0.375rem;
    padding: 1rem;
}

.loc-membership-expired {
    background-color: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.45);
    border-left: 4px solid #dc3545;
    border-radius: 0.375rem;
    padding: 1rem;
}

/* =====================================================================================
   News widget - unread article list (see ShowNewsWidget)
   ===================================================================================== */
.loc-news-item:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.loc-news-excerpt {
    color: #6c757d;
}

/* =====================================================================================
   Template gallery ("Add from template" modal) - cards + layout wireframe preview
   ===================================================================================== */
.loc-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.loc-tpl-card {
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .5rem;
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Selectable layout cards in the Add Page dialog. */
.add-page-tpl-card {
    cursor: pointer;
}

.add-page-tpl-card:hover {
    border-color: rgba(13, 110, 253, .5);
}

.add-page-tpl-card.selected {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .35);
}

/* Scrollable layout picker area. */
.loc-tpl-scroll {
    max-height: 260px;
    overflow-y: auto;
    padding: .25rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: .5rem;
}

/* Blank-page card wireframe placeholder. */
.loc-tpl-wire-blank {
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(0, 0, 0, .25);
    background: repeating-linear-gradient(45deg, #f8f9fa, #f8f9fa 8px, #f1f3f5 8px, #f1f3f5 16px);
}

.loc-tpl-blank-hint {
    color: #6c757d;
    font-size: .85rem;
}

.loc-tpl-wire {
    background: #f8f9fa;
    border-radius: .375rem;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 90px;
}

.loc-tpl-wire-row {
    display: flex;
    gap: .35rem;
}

.loc-tpl-wire-col {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
    padding: .35rem .25rem;
    font-size: .68rem;
    color: #495057;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.loc-tpl-name {
    font-weight: 600;
}

.loc-tpl-badges {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.loc-tpl-actions {
    margin-top: auto;
}

/* Icon-only builder toolbox tabs - compact so all four fit one row in the narrow sidebar. */
.website-toolbox-tabs .nav-link {
    padding: .4rem .25rem;
    font-size: 1rem;
    text-align: center;
}

/* =====================================================================================
   Section-template toolbox tiles (draggable) + hover flyout preview
   ===================================================================================== */
/* Tile shows a mini wireframe thumbnail above the name; the full preview lives in the flyout. */
.toolbox-section {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: auto;
    padding: 8px;
}

.section-tile-wire {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.section-tile-wire-row {
    display: flex;
    gap: 2px;
}

.section-tile-wire-col {
    flex: 1;
    min-width: 0;
    height: 10px;
    background: #cfe2ff;
    border: 1px solid #9ec5fe;
    border-radius: 2px;
}

/* Full-size preview flown out beside the toolbox on hover (appended to <body>, positioned via JS). */
.section-tpl-flyout {
    position: fixed;
    display: none;
    z-index: 3000;
    width: 260px;
    max-width: 60vw;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    padding: .6rem;
    pointer-events: none;
}

/* =====================================================================================
   Website builder - empty-page drop target (a page with no rows)
   ===================================================================================== */
.website-empty-drop {
    border: 2px dashed rgba(0, 0, 0, .25);
    border-radius: .5rem;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6c757d;
    margin: 1rem;
    padding: 2rem;
}

.website-empty-drop.ui-state-hover {
    border-color: var(--bs-primary, #0d6efd);
    background: rgba(13, 110, 253, .06);
    color: var(--bs-primary, #0d6efd);
}

.website-empty-drop-inner i {
    font-size: 1.75rem;
    display: block;
}