/* ================================================================
   IMMOBIN PORTAL THEME SYSTEM
   Theme: Classic (default) — blue/white corporate
   Theme: Fintech — navy/gold dark premium
   ================================================================ */

/* ── Smooth global theme transition ──────────────────────────── */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition:
        background-color 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease,
        color 0.45s ease,
        box-shadow 0.45s ease,
        opacity 0.45s ease !important;
}

/* ── Theme toggle button ─────────────────────────────────────── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: transparent;
    color: var(--slate-500);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: var(--slate-100);
    border-color: var(--slate-300);
    color: var(--slate-700);
    transform: rotate(12deg);
}
.theme-toggle-btn svg { pointer-events: none; }
.theme-toggle-btn .icon-sun  { display: none; }
.theme-toggle-btn .icon-moon { display: block; }

/* ── Animated Background ─────────────────────────────────────── */
#theme-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
    transition: background 0.6s ease;
}
.theme-bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* ================================================================
   CLASSIC THEME — default (no data-theme attribute)
   Glassy white panels over a soft blue-tinted background.
   ================================================================ */

/* Background fill for classic */
#theme-bg {
    background: linear-gradient(160deg, #eef2f8 0%, #e8eef8 50%, #edf1f9 100%);
}

/* Top bar — frosted */
.topbar {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

/* Sections — glass cards */
section {
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 4px 24px rgba(30, 64, 175, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* Cards (dashboard stat cards etc.) */
.card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.50);
    box-shadow: 0 2px 16px rgba(30, 64, 175, 0.04);
}
.card:hover {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 6px 28px rgba(30, 64, 175, 0.09);
}

/* Nav user dropdown */
.nav-user-menu {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Modal overlay backdrop */
.modal-overlay {
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-content, .modal-box {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ================================================================
   FINTECH THEME
   ================================================================ */
html[data-theme="fintech"] { color-scheme: dark; }

html[data-theme="fintech"] #theme-bg { background: #070e1a; }

html[data-theme="fintech"] .theme-bg-orb-1 {
    width: 800px; height: 800px;
    left: -200px; top: -200px;
    background: radial-gradient(circle at center, rgba(17, 52, 110, 0.65) 0%, transparent 65%);
    opacity: 1;
    animation: orbDrift1 30s ease-in-out infinite alternate;
}
html[data-theme="fintech"] .theme-bg-orb-2 {
    width: 600px; height: 600px;
    right: -150px; bottom: 0;
    background: radial-gradient(circle at center, rgba(14, 38, 85, 0.55) 0%, transparent 65%);
    opacity: 1;
    animation: orbDrift2 38s ease-in-out infinite alternate;
}
html[data-theme="fintech"] .theme-bg-orb-3 {
    width: 400px; height: 400px;
    left: 40%; top: 20%;
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.055) 0%, transparent 65%);
    opacity: 1;
    animation: orbDrift3 24s ease-in-out infinite alternate;
}
@keyframes orbDrift1 {
    0%   { transform: translate(0, 0)     scale(1);    }
    30%  { transform: translate(60px,40px)  scale(1.06); }
    65%  { transform: translate(-25px,80px) scale(0.94); }
    100% { transform: translate(50px,-30px) scale(1.08); }
}
@keyframes orbDrift2 {
    0%   { transform: translate(0, 0)       scale(1);    }
    40%  { transform: translate(-70px,-50px) scale(1.1);  }
    100% { transform: translate(60px,65px)   scale(0.9);  }
}
@keyframes orbDrift3 {
    0%   { transform: translate(0, 0)   scale(1);    }
    50%  { transform: translate(45px,-60px) scale(1.15); }
    100% { transform: translate(-40px,50px) scale(0.85); }
}

/* ── Body ─────────────────────────────────────────────────────── */
html[data-theme="fintech"] body {
    background: transparent;
    color: #c8d8f0;
}

/* ── Top bar ──────────────────────────────────────────────────── */
html[data-theme="fintech"] .topbar {
    background: rgba(5, 10, 22, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: rgba(201, 168, 76, 0.12);
}
html[data-theme="fintech"] .brand-link {
    color: #c9a84c;
    text-shadow: 0 0 24px rgba(201, 168, 76, 0.25);
}
html[data-theme="fintech"] .brand-bin { color: #e8c870; }
html[data-theme="fintech"] .brand-link:hover { color: #d4b84e; }

html[data-theme="fintech"] .nav-link {
    color: #7a9cbc;
}
html[data-theme="fintech"] .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #c8d8f0;
}
html[data-theme="fintech"] .nav-link.active {
    background: rgba(201, 168, 76, 0.09);
    color: #c9a84c;
}
html[data-theme="fintech"] .nav-icon { opacity: 0.7; }

/* User dropdown in portal nav */
html[data-theme="fintech"] .nav-user-dropdown > button,
html[data-theme="fintech"] .nav-user-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(201, 168, 76, 0.2);
    color: #c8d8f0;
}
html[data-theme="fintech"] .nav-user-menu {
    background: #0b1830;
    border-color: rgba(201, 168, 76, 0.16);
    box-shadow: 0 20px 56px rgba(0,0,0,0.75), 0 0 0 1px rgba(201,168,76,0.06);
}
html[data-theme="fintech"] .nav-user-menu a,
html[data-theme="fintech"] .nav-user-menu button {
    color: #c8d8f0;
}
html[data-theme="fintech"] .nav-user-menu a:hover,
html[data-theme="fintech"] .nav-user-menu button:hover {
    background: rgba(201, 168, 76, 0.07);
    color: #c9a84c;
}

/* ── Sections / cards ─────────────────────────────────────────── */
html[data-theme="fintech"] section {
    background: rgba(10, 22, 48, 0.72);
    border-color: rgba(80, 130, 200, 0.12);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
html[data-theme="fintech"] section h2 {
    color: #e0eeff;
    border-bottom-color: rgba(201, 168, 76, 0.32);
}

/* ── Forms ────────────────────────────────────────────────────── */
html[data-theme="fintech"] label { color: #7a9cbc; }
html[data-theme="fintech"] input[type="text"],
html[data-theme="fintech"] input[type="email"],
html[data-theme="fintech"] input[type="password"],
html[data-theme="fintech"] input[type="tel"],
html[data-theme="fintech"] input[type="number"],
html[data-theme="fintech"] select,
html[data-theme="fintech"] textarea {
    background: rgba(4, 9, 20, 0.55);
    border-color: rgba(80, 130, 200, 0.2);
    color: #e0eeff;
    caret-color: #c9a84c;
}
html[data-theme="fintech"] input:focus,
html[data-theme="fintech"] select:focus,
html[data-theme="fintech"] textarea:focus {
    border-color: rgba(201, 168, 76, 0.5);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08);
    background: rgba(4, 9, 20, 0.7);
}
html[data-theme="fintech"] input.error,
html[data-theme="fintech"] select.error {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}
html[data-theme="fintech"] .password-toggle {
    color: #5a7a9a;
}
html[data-theme="fintech"] .password-toggle:hover { color: #c9a84c; }

/* ── Buttons ──────────────────────────────────────────────────── */
html[data-theme="fintech"] button[type="submit"],
html[data-theme="fintech"] .btn-primary {
    background: linear-gradient(135deg, #c9a84c 0%, #9e7428 100%);
    color: #06100e;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(201, 168, 76, 0.26);
    border: none;
}
html[data-theme="fintech"] button[type="submit"]:hover,
html[data-theme="fintech"] .btn-primary:hover {
    background: linear-gradient(135deg, #d4b84e 0%, #b08838 100%);
    box-shadow: 0 4px 22px rgba(201, 168, 76, 0.42);
}
html[data-theme="fintech"] .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #c8d8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="fintech"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}
html[data-theme="fintech"] .btn-danger {
    background: rgba(220, 38, 38, 0.18);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.3);
}
html[data-theme="fintech"] .btn-danger:hover {
    background: rgba(220, 38, 38, 0.28);
}
html[data-theme="fintech"] .btn-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
html[data-theme="fintech"] .btn-success:hover {
    background: rgba(16, 185, 129, 0.25);
}
html[data-theme="fintech"] .btn-outline {
    background: transparent;
    color: #c9a84c;
    border-color: rgba(201, 168, 76, 0.3);
}
html[data-theme="fintech"] .btn-outline:hover {
    background: rgba(201, 168, 76, 0.07);
}
html[data-theme="fintech"] button:disabled {
    opacity: 0.4;
}

/* ── Alerts ───────────────────────────────────────────────────── */
html[data-theme="fintech"] .alert { border-radius: 6px; }
html[data-theme="fintech"] .alert.success {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #34d399;
}
html[data-theme="fintech"] .alert.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}
html[data-theme="fintech"] .alert.info {
    background: rgba(80, 130, 200, 0.1);
    border-color: rgba(80, 130, 200, 0.25);
    color: #7abaff;
}
html[data-theme="fintech"] .alert.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
    color: #fbbf24;
}

/* ── Badges ───────────────────────────────────────────────────── */
html[data-theme="fintech"] .badge-plus {
    background: rgba(201, 168, 76, 0.12);
    color: #c9a84c;
    border: 1px solid rgba(201, 168, 76, 0.25);
}
html[data-theme="fintech"] .badge-premium {
    background: rgba(201, 168, 76, 0.18);
    color: #d4b84e;
    border: 1px solid rgba(201, 168, 76, 0.35);
}
html[data-theme="fintech"] .badge-free {
    background: rgba(80, 130, 200, 0.1);
    color: #7abaff;
    border: 1px solid rgba(80, 130, 200, 0.2);
}
html[data-theme="fintech"] .badge-admin {
    background: rgba(220, 60, 60, 0.12);
    color: #f87171;
    border: 1px solid rgba(220, 60, 60, 0.25);
}

/* ── Toast notifications ──────────────────────────────────────── */
html[data-theme="fintech"] .toast {
    background: #0b1830;
    border: 1px solid rgba(201, 168, 76, 0.15);
    color: #c8d8f0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}
html[data-theme="fintech"] .toast.success { border-left-color: #34d399; }
html[data-theme="fintech"] .toast.error   { border-left-color: #f87171; }

/* ── Dashboard tabs ───────────────────────────────────────────── */
html[data-theme="fintech"] .tab-row {
    border-bottom-color: rgba(80, 130, 200, 0.13);
}
html[data-theme="fintech"] .dashboard-tab-btn {
    color: #5a7a9a;
    border-bottom-color: transparent;
}
html[data-theme="fintech"] .dashboard-tab-btn:hover {
    color: #c8d8f0;
    background: rgba(255,255,255,0.03);
}
html[data-theme="fintech"] .dashboard-tab-btn.active {
    color: #c9a84c;
    border-bottom-color: #c9a84c;
}

/* ── Data tables ──────────────────────────────────────────────── */
html[data-theme="fintech"] .data-table th {
    background: rgba(4, 9, 20, 0.55);
    color: #7a9cbc;
    border-color: rgba(80, 130, 200, 0.1);
}
html[data-theme="fintech"] .data-table td {
    color: #c8d8f0;
    border-color: rgba(80, 130, 200, 0.08);
}
html[data-theme="fintech"] .data-table tbody tr:nth-child(even) td {
    background: rgba(80, 130, 200, 0.04);
}
html[data-theme="fintech"] .data-table tbody tr:hover td {
    background: rgba(201, 168, 76, 0.04);
}

/* ── Plan cards ───────────────────────────────────────────────── */
html[data-theme="fintech"] .plan-cards { gap: 16px; }
html[data-theme="fintech"] .plan-card {
    background: rgba(10, 22, 48, 0.6);
    border-color: rgba(80, 130, 200, 0.14);
}
html[data-theme="fintech"] .plan-card.popular {
    border-color: rgba(201, 168, 76, 0.35);
    box-shadow: 0 0 24px rgba(201, 168, 76, 0.08);
}
html[data-theme="fintech"] .plan-card h3 { color: #e0eeff; }
html[data-theme="fintech"] .plan-card .price { color: #c9a84c; }
html[data-theme="fintech"] .plan-card p { color: #5a7a9a; }

/* ── Modal ────────────────────────────────────────────────────── */
html[data-theme="fintech"] .modal { background: rgba(4, 9, 20, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-theme="fintech"] .modal-content {
    background: rgba(8, 18, 40, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(201, 168, 76, 0.15);
    box-shadow: 0 32px 96px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.04);
}
html[data-theme="fintech"] .modal-content h2 { color: #e0eeff; }

/* ── Divider ──────────────────────────────────────────────────── */
html[data-theme="fintech"] .divider {
    border-color: rgba(80, 130, 200, 0.1);
}

/* ── Config sections ──────────────────────────────────────────── */
html[data-theme="fintech"] .config-section {
    background: rgba(4, 9, 20, 0.4);
    border-color: rgba(80, 130, 200, 0.12);
}

/* ── Theme toggle (fintech) ───────────────────────────────────── */
html[data-theme="fintech"] .theme-toggle-btn {
    border-color: rgba(201, 168, 76, 0.25);
    color: #c9a84c;
    background: rgba(201, 168, 76, 0.06);
}
html[data-theme="fintech"] .theme-toggle-btn:hover {
    background: rgba(201, 168, 76, 0.13);
    border-color: rgba(201, 168, 76, 0.42);
    box-shadow: 0 0 14px rgba(201, 168, 76, 0.15);
}
html[data-theme="fintech"] .theme-toggle-btn .icon-sun  { display: block; }
html[data-theme="fintech"] .theme-toggle-btn .icon-moon { display: none; }

/* ── Scrollbar ────────────────────────────────────────────────── */
html[data-theme="fintech"] ::-webkit-scrollbar { width: 7px; height: 7px; }
html[data-theme="fintech"] ::-webkit-scrollbar-track { background: #070e1a; }
html[data-theme="fintech"] ::-webkit-scrollbar-thumb {
    background: rgba(80, 130, 200, 0.22);
    border-radius: 4px;
}
html[data-theme="fintech"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 168, 76, 0.38);
}

/* ── RTL support for fintech ──────────────────────────────────── */
html[data-theme="fintech"][dir="rtl"] .nav-user-menu {
    right: auto;
    left: 0;
}