body{
    background:#f5f7fb;
}

body{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
}

main.container-fluid{
    animation:pageFade .16s ease-out;
}

@keyframes pageFade{

    from{
        opacity:.97;
    }

    to{
        opacity:1;
    }

}

input, select, textarea{
    font-size:16px;
}



.card{
    transition:
        box-shadow .18s ease,
        border-color .18s ease;
}

.card:hover{

    transform:none;

    box-shadow:
        0 6px 16px rgba(15,23,42,.06);

}


#appSplash{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:max(24px, env(safe-area-inset-top));
    background:#ffffff;
    z-index:99999;
    transition:
        opacity .25s ease,
        visibility .25s ease;
}

#appSplash.hide{
    opacity:0;
    visibility:hidden;
}

.splash-content{
    width:100%;
    max-width:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.splash-logo{
    width:96px;
    max-width:28vw;
    height:auto;
    animation:logoFloat 3s ease-in-out infinite;

}


@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}


.splash-content h2{
    margin-top:18px;
    margin-bottom:6px;
    color:#111827;
    font-size:1.6rem;
    font-weight:700;
}

.splash-content p{
    color:#64748b;
    margin-bottom:20px;
}

.splash-spinner{
    width:2rem;
    height:2rem;
}



@keyframes logoFloat{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-5px);
    }
    100%{
        transform:translateY(0);
    }
}

@media(max-width:576px){
    .splash-logo{
        width:84px;
    }
    .splash-content h2{
        font-size:1.35rem;
    }
    .splash-content p{
        font-size:.9rem;
    }
}

.card   {
    overflow: visible;
}


#pageLoader{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:3px;
    background:#2563eb;
    z-index:999999;
    transition:
        width .25s ease,
        opacity .25s ease;

    opacity:0;
}

.sidebar{

    width:280px;
    min-width:280px;
    max-width:280px;
    min-height:100vh;
    flex:0 0 280px;
    background:#18283b;
    height:100vh;
    position:sticky;
    top:0;
    padding:24px 16px;
    overflow-y:auto;
}

.main-content{
    flex:1;
    min-width:0;
    min-height:100vh;
}

.sidebar .nav-link{
    color:#cfd8e3;
    display:flex;
    align-items:center;
    gap:6px;
    padding:.8rem .2rem;
    border-radius:10px;
    transition:.2s;
    margin-bottom:2px;
}

.sidebar .nav-link:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.sidebar .nav-link.active{
    background:#0d6efd;
    color:#fff;
}

.sidebar .nav-link i{
    width:20px;
    text-align:center;
}

.mobile-sidebar{
    width:280px;
    max-width:85vw;
}

.sidebar-heading{
    color:#8fa3bf;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:20px 0 10px;
}

.sidebar-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding:1rem;
    margin-bottom:1rem;
    border-radius:18px;
    background:rgba(255,255,255,.06);
}

.sidebar-profile{
    text-align:center;
    padding:1rem 0 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    margin-bottom:1rem;
}

.sidebar-profile img{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.15);
}

.sidebar-avatar-lg{
    width:72px;
    height:72px;
    border-radius:50%;
    background:#0d6efd;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.8rem;
    font-weight:700;
    margin:0 auto;
}

.sidebar-org{
    margin-top:.75rem;
    font-weight:600;
    color:#fff;
}

.sidebar-user{
    color:#c9d3df;
    font-size:.9rem;
}

.sidebar-role{
    color:#8fa3bf;
    font-size:.8rem;
}


.sidebar-user-name{
    color:#fff;
    font-weight:600;
}

.sidebar-user-role{
    color:rgba(255,255,255,.6);
    font-size:.85rem;
}

.mobile-sidebar .sidebar-user-name{
    color:#000000;
    font-weight:600;
}

.mobile-sidebar .sidebar-user-role{
    color:rgba(0, 0, 0, 0.6);
    font-size:.85rem;
}


.topbar{
    background:#fff;
    min-height:72px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
}


.btn{
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.btn:hover{

    transform:none;

}


.btn-back{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem 1rem;
    border:1px solid var(--bs-border-color);
    border-radius:10px;
    background:#fff;
    color:var(--bs-body-color);
    font-weight:500;
    text-decoration:none;
    transition:.2s;
}

.btn-back:hover{
    background:#f8f9fa;
    border-color:var(--bs-primary);
    color:var(--bs-primary);
}

.brand-topbar{
    display:flex;
    align-items:center;
    gap:.65rem;
    text-decoration:none;
    color:#111827;
    font-weight:700;
}

.topbar-logo{
    width:50px;
    height:50px;
    object-fit:contain;
    flex-shrink:0;
}

.brand-text{
    font-size:1.15rem;
}

.install-btn{
    white-space:nowrap;
}

@media (max-width:768px){

    .brand-text{
        display:none;
    }

    .topbar-logo{
        width:34px;
        height:34px;
    }

}




.mobile-menu-btn{
    display:none;
}

@media(max-width:991px){

    .sidebar{
        display:none;
    }

    .mobile-menu-btn{
        display:inline-flex;
    }
}



.mobile-sidebar{
    width:320px;
}

.mobile-sidebar .offcanvas-header{
    padding:1.25rem;
}

.mobile-sidebar .offcanvas-body{
    padding:1rem;
}

.mobile-sidebar .nav-link{
    border-radius:14px;
    padding:.85rem 1rem;
    color:#334155;
    font-weight:500;
}

.mobile-sidebar .nav-link:hover{
    background:#f8fafc;
}

.mobile-sidebar .sidebar-heading{
    color:#94a3b8;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin:1rem 0 .5rem;
}


.stat-card{
    transition:.2s;
}

.stat-card:hover{
    transform:translateY(-3px);
}

.stat-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
}


.org-card{
    transition:.2s;
}

.org-card:hover{
    transform:translateY(-4px);
}

.org-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
}

.org-status{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:600;
}

.org-status.active{
    background:#dcfce7;
    color:#166534;
}

.page-actions{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}

.search-box{
    max-width:420px;
}


.kpi-card{
    border:none;
    border-radius:18px;
    box-shadow:
    0 2px 8px rgba(15,23,42,.05),
    0 12px 24px rgba(15,23,42,.03);
    transition:.2s;
    position:relative;
    overflow:hidden;
}
.kpi-card .card-body, 
.action-card.card-body{
    padding: .5rem;
}
.kpi-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background:linear-gradient(
        90deg,
        #60a5fa,
        #2563eb
    );
}



.kpi-card:hover{
    transform:translateY(-3px);
}

.kpi-value{
    font-size:1rem;
    font-weight:700;
}

.kpi-label{
    color:#64748b;
    font-size:.9rem;
}

.organization-header{
    border-radius:20px;
    padding:2rem;
    color:#fff;
    position:relative;
    overflow:hidden;
    background:linear-gradient(
        135deg,
        #3b82f6 0%,
        #2563eb 40%,
        #1d4ed8 100%
    );
}


.organization-header::before{
    content:'';
    position:absolute;
    top:-50%;
    left:-20%;
    width:300px;
    height:300px;
    background:rgba(255,255,255,.12);
    border-radius:50%;
}

.organization-header::after{
    content:'';
    position:absolute;
    bottom:-80px;
    right:-80px;
    width:250px;
    height:250px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
}


.property-switcher{
    width:320px;
    max-width:90vw;
    height:46px;
    padding:0 44px 0 16px;
    border:none;
    border-radius:999px;
    background:#ffffff;
    color:#111827;
    font-weight:600;
    box-shadow:
        0 8px 24px rgba(15,23,42,.10);
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5L8 12l6.5-6.5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;

}

.page-hero{
    border-radius:20px;
    padding:1.5rem;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #3b82f6 0%,
            #2563eb 45%,
            #1d4ed8 100%
        );
}

.page-hero::before{
    content:'';
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    top:-140px;
    left:-100px;
}

.page-hero::after{
    content:'';
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    bottom:-120px;
    right:-80px;
}

.page-hero::before,
.page-hero::after{
    pointer-events:none;
    z-index:0;
}

.page-hero > *{
    position:relative;
    z-index:2;
}

.page-hero{
    overflow:visible;
    z-index:1;
}

.hero-primary{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
}

.hero-success{
    background:linear-gradient(135deg,#16a34a,#15803d);
}

.hero-warning{
    background:linear-gradient(135deg,#d97706,#b45309);
}

.hero-danger{
    background:linear-gradient(135deg,#dc2626,#b91c1c);
}

.hero-secondary{
    background:linear-gradient(135deg,#475569,#334155);
}



.card.dropdown-card{
    position:relative;
    z-index:100;
}

.dropdown{
    position:relative;
}

.dropdown-menu{
    z-index:1080;
}


.status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.5rem 1rem;
    border-radius:999px;
    background:white;
    backdrop-filter:blur(10px);
    font-size:.8rem;
    font-weight:700;
    color: black;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:.5rem;
}


.organization-meta{
    opacity:.9;
}

.quick-action{
    width:100%;
    text-align:left;
}



.brand-wrap{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,#60a5fa,#2563eb);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.brand-name{
    font-weight:700;
}

.brand-tag{
    color:#64748b;
    font-size:.8rem;
}


.management-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    border:1px solid #edf1f5;
    border-radius:14px;
    background:#fff;
    transition:all .2s ease;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    position:relative;
    overflow:hidden;
}



.management-card:hover{
    transform:translateY(-2px);
    border-color:var(--bs-primary);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
}

.management-card:hover::before{
    opacity:1;
}

.management-card-compact{
    padding:16px;
}

.management-card-default{
    padding:20px;
}

.management-card-large{
    padding:26px;
}

.management-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.management-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    background:#f7f8fa;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.management-icon i{
    font-size:1.1rem;
    color:var(--bs-primary);
}

.management-title{
    font-size:1rem;
    font-weight:700;
    color:#1f2937;
    line-height:1.2;
}

.management-subtitle{
    margin-top:2px;
    font-size:.86rem;
    color:#6b7280;
    line-height:1.5;
}

.management-stats{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid #f1f5f9;
    font-size:.88rem;
    color:#6b7280;
}

.management-stats strong{
    color:#111827;
    font-weight:700;
}


.icon-blue{
    background:#eff6ff;
}

.icon-blue i{
    color:#2563eb;
}

.icon-green{
    background:#ecfdf5;
}

.icon-green i{
    color:#059669;
}

.icon-amber{
    background:#fffbeb;
}

.icon-amber i{
    color:#d97706;
}

.icon-red{
    background:#fef2f2;
}

.icon-red i{
    color:#dc2626;
}


@media(max-width:768px){

    .switcher-bar{
       text-align:center;
       justify-content: center;
    }

    
    .card.dropdown-card{
        position:relative;
        z-index:100;
    }


}

.property-switcher{
    max-width:320px;
    margin:0 auto;
    background:var(--bs-primary);
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    backdrop-filter:blur(12px);
    height: 38px;
    border-radius: 10px;
    padding: 5px;
    min-width: 120px;
}

.property-switcher option{
    color:#000;
}


.badge-vacant{
    background:#dcfce7;
    color:#166534;
}

.badge-occupied{
    background:#dbeafe;
    color:#1d4ed8;
}

.badge-reserved{
    background:#fef3c7;
    color:#92400e;
}

.badge-maintenance{
    background:#fee2e2;
    color:#b91c1c;
}

.space-name{
    font-size:1.25rem;
    font-weight:700;
    line-height:1.2;
    color:#0f172a;
}

.space-type{
    color:#64748b;
    font-size:.8rem;
    font-weight:500;
}


.action-card{
    border:none;
    border-radius:20px;
    background:linear-gradient(
        135deg,
        #2563eb 0%,
        #1d4ed8 100%
    );
    color:#fff;
    transition:.25s;
    overflow:hidden;
    position:relative;
}

.action-card:hover{
    transform:translateY(-4px);
    color:#fff;
}

.action-card .action-icon{
    font-size:1.25rem;
    margin-bottom:.5rem;
}

.action-card .action-title{
    font-size:1rem;
    font-weight:700;
}

.accordion-floor{
    transition:.2s;
}

.accordion-floor:hover{
    background:#f8fafc;
}

.floor-chevron{
    transition:.25s;
}

.floor-header[aria-expanded="true"] .floor-chevron{
    transform:rotate(180deg);
}

.collapse,
.collapsing{
    transition:.25s ease;
}


/*  Styles for tenants/index.php      */
.management-card{
    cursor:pointer;
}

.management-card:hover .management-link{
    background:#2563eb;
    color:#fff;
}

.management-card img{
    border:3px solid #eef2ff;
}

.management-card .badge{
    font-size:.78rem;
    padding:.55rem .85rem;
}


.lease-card{
    transition:.2s;
    border-radius:16px;
}

.lease-card:hover{
    transform:translateY(-2px);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.12)!important;
}

.lease-card .badge{
    font-size:.72rem;
}

.lease-card .small{
    font-size:.88rem;
}


.tenant-logo{
    width:84px;
    height:84px;
    flex-shrink:0;
}

.tenant-image{
    width:84px;
    height:84px;
    object-fit:cover;
    border-radius:18px;
    border:1px solid var(--bs-border-color);
    background:#fff;
}

.tenant-avatar{
    width:84px;
    height:84px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f8f9fa;
    border:1px solid var(--bs-border-color);
}

.tenant-avatar i{
    font-size:2rem;
    color:#6c757d;
}



/* ==========================================
   Notification Dropdown
========================================== */

#notification-menu, #message-menu{
    width:400px;
    max-width:95vw;
    padding:0;
    border:none;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.notification-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 18px;
    border-bottom:1px solid #edf2f7;
    background:#fff;
}

.notification-title{
    font-weight:700;
    font-size:1rem;
}

.notification-count{
    background:#0d6efd;
    color:#fff;
    padding:4px 10px;
    border-radius:20px;
    font-size:.75rem;
}

.notification-list{
    max-height:420px;
    overflow-y:auto;
}

.notification-item{
    display:block;
    text-decoration:none;
    color:inherit;
    padding:15px 18px;
    border-bottom:1px solid #f3f4f6;
    transition:.2s;
}

.notification-item:hover{
    background:#f8fafc;
}

.notification-item.unread{
    background:#eef6ff;
}

.notification-item.unread:hover{
    background:#e2f0ff;
}

.notification-item:last-child{
    border-bottom:none;
}

.notification-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.notification-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#0d6efd;
    flex-shrink:0;
}

.notification-title-text{
    font-weight:600;
    font-size:.95rem;
}

.notification-message{
    font-size:.84rem;
    color:#6c757d;
    line-height:1.45;
    margin-left:20px;
}

.notification-time{
    font-size:.72rem;
    color:#adb5bd;
    margin-top:6px;
    margin-left:20px;
}

.notification-footer{
    padding:12px;
    border-top:1px solid #edf2f7;
    background:#fff;
}

.notification-footer a{
    font-weight:600;
    text-decoration:none;
}


@media (max-width:768px){
    #notification-menu, #message-menu{
        width: 250px;
        max-width:95vw;
    }
}

.space-select-card{
    display:block;
    cursor:pointer;
}

.space-select-card input{
    display:none;
}

.space-card-body{
    border:1px solid var(--bs-border-color);
    border-radius:14px;
    padding:8px;
    transition:.2s;
    background:#fff;
}

.space-select-card:hover .space-card-body{
    border-color:var(--bs-primary);
}

.space-select-card input:checked + .space-card-body{
    border-color:var(--bs-primary);
    background:rgba(var(--bs-primary-rgb),.06);
    box-shadow:0 .4rem .9rem rgba(0,0,0,.08);
}

.check-icon{
    opacity:0;
    color:var(--bs-primary);
    font-size:1.2rem;
}

.space-select-card input:checked + .space-card-body .check-icon{
    opacity:1;
}

.subtle-space-card {
  border: 1px solid rgba(37, 99, 235, 0.15);
  background-color: rgba(37, 99, 235, 0.03);
  border-radius: 12px;
  padding: 16px;
}

.table thead th a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    color:inherit;
    font-weight:600;
}

.table thead th a.active{
    color:var(--bs-primary);
}

.table thead th i{
    font-size:.75rem;
}