/* =============================================
   Imobifin — App CSS
   Liquid Glass Design System
   Paleta: #088C72 | #E8FFFA | #1B0D00
   ============================================= */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Liquid Glass — Sidebar ---------- */
.glass-sidebar {
    background: linear-gradient(160deg, rgba(8,140,114,.85) 0%, rgba(6,102,85,.92) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-right: 1px solid rgba(255,255,255,.12);
    box-shadow: 4px 0 24px rgba(8,140,114,.2);
}

/* ---------- Liquid Glass — Cards ---------- */
.glass-card {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 4px 24px rgba(8,140,114,.08), 0 1px 4px rgba(0,0,0,.04);
}

.dark .glass-card {
    background: rgba(27,13,0,.45);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

/* ---------- Topbar ---------- */
.glass-topbar {
    background: rgba(232,255,250,.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(8,140,114,.12);
}

.dark .glass-topbar {
    background: rgba(27,13,0,.75);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ---------- Login Card ---------- */
.glass-card.login,
.glass-card[data-login] {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
}

/* Overrides glass-card for login page specifically */
body > .relative .glass-card {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

.dark body > .relative .glass-card {
    background: rgba(27,13,0,.5);
}

/* ---------- Nav active ---------- */
.nav-active {
    background: rgba(255,255,255,.18);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: linear-gradient(135deg, #088C72 0%, #0aab8c 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 14px rgba(8,140,114,.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0aab8c 0%, #088C72 100%);
    box-shadow: 0 6px 18px rgba(8,140,114,.45);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    color: #088C72;
    border: 1px solid rgba(8,140,114,.3);
    background: transparent;
}
.btn-ghost:hover {
    background: rgba(8,140,114,.08);
}

.dark .btn-ghost {
    color: #0aab8c;
    border-color: rgba(10,171,140,.3);
}

/* ---------- Inputs ---------- */
.input-field {
    background: rgba(232,255,250,.5);
    border: 1px solid rgba(8,140,114,.2);
    border-radius: .75rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #1B0D00;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.input-field:focus {
    border-color: #088C72;
    box-shadow: 0 0 0 3px rgba(8,140,114,.15);
}

.dark .input-field {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #E8FFFA;
}
.dark .input-field:focus {
    border-color: #0aab8c;
    box-shadow: 0 0 0 3px rgba(10,171,140,.2);
}
.input-field::placeholder { color: rgba(27,13,0,.35); }
.dark .input-field::placeholder { color: rgba(232,255,250,.35); }

/* Glass input (used on login & search bars) */
.input-glass {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .75rem;
    padding: .55rem .85rem;
    font-size: .875rem;
    color: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.input-glass::placeholder { color: rgba(255,255,255,.45); }
.input-glass:focus {
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}

/* Light-mode search bars inside glass-card */
.glass-card .input-glass {
    background: rgba(8,140,114,.07);
    border-color: rgba(8,140,114,.18);
    color: #1B0D00;
}
.glass-card .input-glass::placeholder { color: rgba(27,13,0,.35); }
.glass-card .input-glass:focus {
    border-color: #088C72;
    box-shadow: 0 0 0 3px rgba(8,140,114,.12);
    color: #1B0D00;
}
.dark .glass-card .input-glass {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #E8FFFA;
}
.dark .glass-card .input-glass::placeholder { color: rgba(232,255,250,.35); }

.input-select {
    background: rgba(232,255,250,.5);
    border: 1px solid rgba(8,140,114,.2);
    border-radius: .75rem;
    padding: .45rem .7rem;
    color: #1B0D00;
    outline: none;
    cursor: pointer;
}
.dark .input-select {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #E8FFFA;
}

/* ---------- Table ---------- */
.th-cell {
    padding: .75rem 1rem;
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(27,13,0,.5);
}
.dark .th-cell { color: rgba(232,255,250,.45); }

.td-cell {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(8,140,114,.07);
    color: #1B0D00;
    font-size: .875rem;
}
.dark .td-cell {
    border-color: rgba(255,255,255,.05);
    color: #E8FFFA;
}

tbody tr:hover .td-cell {
    background: rgba(8,140,114,.04);
}
.dark tbody tr:hover .td-cell {
    background: rgba(255,255,255,.03);
}

/* ---------- Badge status ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
}
.badge-green  { background: rgba(8,140,114,.12); color: #088C72; }
.badge-red    { background: rgba(220,38,38,.1);  color: #dc2626; }
.badge-yellow { background: rgba(234,179,8,.12); color: #ca8a04; }
.dark .badge-green  { background: rgba(8,140,114,.22); color: #0aab8c; }
.dark .badge-red    { background: rgba(220,38,38,.18); color: #f87171; }
.dark .badge-yellow { background: rgba(234,179,8,.18); color: #facc15; }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-box {
    background: rgba(232,255,250,.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 1.5rem;
    padding: 1.75rem;
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dark .modal-box {
    background: rgba(20,10,0,.92);
    border-color: rgba(255,255,255,.08);
}

/* ---------- Form label ---------- */
.form-label {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: rgba(27,13,0,.7);
    margin-bottom: .35rem;
}
.dark .form-label { color: rgba(232,255,250,.65); }

/* ---------- Skeleton ---------- */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton-line {
    display: inline-block;
    background: linear-gradient(90deg,
        rgba(8,140,114,.1) 25%,
        rgba(8,140,114,.2) 50%,
        rgba(8,140,114,.1) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: .4rem;
}
.dark .skeleton-line {
    background: linear-gradient(90deg,
        rgba(255,255,255,.06) 25%,
        rgba(255,255,255,.12) 50%,
        rgba(255,255,255,.06) 75%);
    background-size: 200% 100%;
}

/* ---------- Blobs background (login) ---------- */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    pointer-events: none;
}
.blob-1 {
    width: 400px; height: 400px;
    background: #0aab8c;
    top: -100px; left: -100px;
    animation: float 8s ease-in-out infinite alternate;
}
.blob-2 {
    width: 350px; height: 350px;
    background: #066655;
    bottom: -80px; right: -80px;
    animation: float 10s ease-in-out infinite alternate-reverse;
}
@keyframes float {
    from { transform: translate(0,0) scale(1); }
    to   { transform: translate(30px,20px) scale(1.08); }
}

/* ---------- Rank bars ---------- */
.rank-bar {
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #088C72, #0aab8c);
    transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(8,140,114,.3); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(8,140,114,.5); }

/* ---------- Transitions ---------- */
.transition-height { transition: height .3s ease; overflow: hidden; }