/* New Flin UCP - Premium Glass / Gold Theme */
:root{--flin-bg:#080806;--flin-deep:#050505;--flin-panel:rgba(17,16,13,.78);--flin-gold:#f4b83f;--flin-gold-light:#ffd66b;--flin-gold-dark:#a86d0e;--flin-text:#f6f6f4;--flin-muted:#92918c;--flin-border:rgba(255,255,255,.085);--flin-gold-border:rgba(244,184,63,.32);--bg:var(--flin-bg);--panel:var(--flin-panel);--panel-light:rgba(255,255,255,.045);--panel-dark:rgba(5,5,5,.48);--border:var(--flin-border);--text:var(--flin-text);--muted:var(--flin-muted);--primary:var(--flin-gold);--primary-hover:var(--flin-gold-light);--yellow:var(--flin-gold-light)}
html{background:var(--flin-deep)}
body{background:radial-gradient(circle at 85% -10%,rgba(244,184,63,.11),transparent 31%),radial-gradient(circle at 10% 105%,rgba(244,184,63,.045),transparent 35%),linear-gradient(145deg,#070706 0%,#0b0a08 48%,#070706 100%);background-attachment:fixed;color:var(--flin-text)}
::selection{background:rgba(244,184,63,.3);color:#fff}*{scrollbar-width:thin;scrollbar-color:rgba(244,184,63,.45) rgba(255,255,255,.035)}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:rgba(255,255,255,.025)}*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--flin-gold-light),var(--flin-gold-dark));border-radius:20px}
.sidebar{background:linear-gradient(180deg,rgba(20,18,14,.94),rgba(8,8,7,.96));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-right:1px solid rgba(244,184,63,.12);box-shadow:14px 0 55px rgba(0,0,0,.2)}html[dir=rtl] .sidebar{border-left:1px solid rgba(244,184,63,.12);border-right:0;box-shadow:-14px 0 55px rgba(0,0,0,.2)}
.brand-logo,.login-logo,.profile-avatar{color:#171109;background:linear-gradient(135deg,#ffe188,#f4b83f 52%,#b8730f);border:1px solid rgba(255,225,136,.38);box-shadow:0 10px 35px rgba(244,184,63,.2)}.brand-text strong{color:#fff}.brand-text span,.nav-title{color:#77756f}
.nav-link{border:1px solid transparent;color:#aaa8a2;transition:.2s ease}.nav-link:hover{background:linear-gradient(90deg,rgba(244,184,63,.075),rgba(244,184,63,.025));border-color:rgba(244,184,63,.12);color:#fff}.nav-link.active{background:linear-gradient(90deg,rgba(244,184,63,.18),rgba(244,184,63,.045));border:1px solid rgba(244,184,63,.24);color:var(--flin-gold-light);box-shadow:inset 3px 0 0 var(--flin-gold),0 8px 25px rgba(0,0,0,.12)}html[dir=rtl] .nav-link.active{box-shadow:inset -3px 0 0 var(--flin-gold),0 8px 25px rgba(0,0,0,.12)}.nav-link:hover .nav-icon,.nav-link.active .nav-icon{color:var(--flin-gold)}.nav-soon{background:rgba(244,184,63,.08);color:#a98032;border:1px solid rgba(244,184,63,.1)}
.sidebar-user{background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.075)}
.topbar{background:linear-gradient(180deg,rgba(10,10,8,.88),rgba(8,8,7,.76));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(244,184,63,.09);box-shadow:0 12px 40px rgba(0,0,0,.13)}.mobile-menu-button,.language-button{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.085);color:#deddd9}.mobile-menu-button:hover,.language-button:hover{background:rgba(244,184,63,.08);border-color:rgba(244,184,63,.28);color:var(--flin-gold-light)}
.welcome h1 span{color:var(--flin-gold-light);text-shadow:0 0 22px rgba(244,184,63,.15)}
.panel,.stat-card,.profile-hero{background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),rgba(16,15,12,.72);border:1px solid rgba(255,255,255,.075);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}.panel:hover,.stat-card:hover{border-color:rgba(244,184,63,.18)}.stat-icon{background:linear-gradient(145deg,rgba(244,184,63,.14),rgba(244,184,63,.045));border:1px solid rgba(244,184,63,.15);color:var(--flin-gold-light)}.panel-header{border-bottom:1px solid rgba(255,255,255,.065);background:linear-gradient(90deg,rgba(244,184,63,.025),transparent 35%)}
.profile-hero{background:radial-gradient(circle at 10% 0%,rgba(244,184,63,.11),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012)),rgba(16,15,12,.76);border-color:rgba(244,184,63,.13)}
input,select,textarea{transition:.2s ease}.form-group input,.form-group select,.form-group textarea,input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{background:rgba(4,4,4,.44);border:1px solid rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(10px)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus,input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=number]:focus,select:focus,textarea:focus{outline:none;border-color:rgba(244,184,63,.68);background:rgba(7,7,6,.64);box-shadow:0 0 0 3px rgba(244,184,63,.075),0 0 25px rgba(244,184,63,.055)}
.login-button,button[type=submit],.btn-primary,.primary-button{background:linear-gradient(135deg,#ffdc76 0%,#f4b83f 48%,#d48d1b 100%);border:1px solid rgba(255,221,118,.3);color:#171109;font-weight:800;box-shadow:0 8px 28px rgba(244,184,63,.15),inset 0 1px 0 rgba(255,255,255,.3);transition:.18s ease}.login-button:hover,button[type=submit]:hover,.btn-primary:hover,.primary-button:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 11px 34px rgba(244,184,63,.23),inset 0 1px 0 rgba(255,255,255,.35)}
.login-page{background:radial-gradient(circle at 50% 20%,rgba(244,184,63,.12),transparent 30%),linear-gradient(145deg,#070706,#0c0b08 55%,#050505)}.login-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.014)),rgba(12,11,9,.8);border:1px solid rgba(244,184,63,.3);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 30px 100px rgba(0,0,0,.52),0 0 45px rgba(244,184,63,.065),inset 0 1px 0 rgba(255,255,255,.055)}.login-card:before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,107,.85),transparent)}.login-language a{background:rgba(14,13,11,.72);border:1px solid rgba(255,255,255,.1);color:#d7d5ce;backdrop-filter:blur(15px)}.login-language a:hover{border-color:rgba(244,184,63,.32);color:var(--flin-gold-light);background:rgba(244,184,63,.065)}
table th{color:#aaa8a2;background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.06)}table td{border-color:rgba(255,255,255,.055)}table tbody tr:hover{background:rgba(244,184,63,.035)}
.modal-content,.dropdown-menu,details{background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(13,12,10,.94);border:1px solid rgba(244,184,63,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 25px 70px rgba(0,0,0,.45)}.sidebar-overlay{background:rgba(0,0,0,.68);backdrop-filter:blur(4px)}
@media(max-width:900px){.topbar{background:rgba(8,8,7,.9);backdrop-filter:blur(20px)}.panel,.stat-card,.profile-hero{backdrop-filter:blur(14px)}}
@media(max-width:600px){.login-layout{padding:18px}.login-card{padding:28px 22px;border-radius:20px}.content{padding:20px 14px 30px}.stat-card,.panel,.profile-hero{border-radius:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* =========================================================
   NEW FLIN V2 — Sidebar / Topbar / Dashboard polish
   ========================================================= */

.brand { position: relative; margin: 0 2px 8px; padding: 8px 8px 20px; }
.brand::after { content:""; position:absolute; left:8px; right:8px; bottom:4px; height:1px; background:linear-gradient(90deg,transparent,rgba(244,184,63,.2),transparent); }
.brand-logo { border-radius: 14px; transform: rotate(-2deg); }
.brand-logo span { transform: rotate(2deg); font-size:19px; }
.brand-text strong { font-size:17px; letter-spacing:.2px; }
.brand-text span { font-size:9px; letter-spacing:.65px; text-transform:uppercase; }

.nav { gap:4px; }
.nav-title { padding-top:17px; color:#68665f; letter-spacing:1.35px; }
.nav-link { min-height:46px; border-radius:12px; }
.nav-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.035); }
.nav-icon svg { width:17px; height:17px; }
.nav-link:hover .nav-icon, .nav-link.active .nav-icon { background:rgba(244,184,63,.09); border-color:rgba(244,184,63,.15); }
.nav-link-admin { color:#d8b86f; }
.nav-link-admin .nav-icon { color:var(--flin-gold); }

.sidebar-user { display:flex; align-items:center; gap:10px; padding:11px; position:relative; }
.sidebar-avatar,.topbar-avatar { display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:linear-gradient(135deg,#ffe188,#e9a52e 58%,#9b620d); color:#171109; font-weight:900; box-shadow:0 6px 20px rgba(244,184,63,.14); }
.sidebar-avatar { width:36px; height:36px; border-radius:11px; font-size:13px; }
.sidebar-user-copy { min-width:0; flex:1; }
.sidebar-user-id { margin-top:3px; }
.sidebar-user-state { width:7px; height:7px; border-radius:50%; background:#666; box-shadow:0 0 0 3px rgba(255,255,255,.03); }
.sidebar-user-state.online { background:var(--flin-green); box-shadow:0 0 12px rgba(80,216,144,.55); }

.topbar { height:76px; }
.topbar-heading { display:flex; flex-direction:column; gap:3px; }
.topbar-eyebrow { color:#68665f; font-size:8px; font-weight:800; letter-spacing:1.45px; }
.mobile-menu-button svg,.topbar-icon-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.topbar-icon-button { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.075); color:#aaa8a2; transition:.2s ease; }
.topbar-icon-button:hover { color:var(--flin-gold-light); border-color:rgba(244,184,63,.25); background:rgba(244,184,63,.06); }
.topbar-profile { min-width:130px; height:46px; padding:5px 9px 5px 6px; display:flex; align-items:center; gap:9px; border-radius:13px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.065); }
html[dir="rtl"] .topbar-profile { padding:5px 6px 5px 9px; }
.topbar-avatar { width:34px; height:34px; border-radius:10px; font-size:12px; }
.topbar-profile-copy { display:flex; flex-direction:column; min-width:0; }
.topbar-profile-copy strong { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#f2f1ed; }
.topbar-profile-copy small { margin-top:2px; color:#716f69; font-size:9px; }

.welcome { position:relative; padding:26px 28px; border:1px solid rgba(244,184,63,.13); border-radius:20px; overflow:hidden; background:linear-gradient(115deg,rgba(244,184,63,.075),rgba(255,255,255,.025) 45%,rgba(255,255,255,.012)),rgba(15,14,11,.68); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 18px 55px rgba(0,0,0,.22); }
.welcome::after { content:"F"; position:absolute; right:25px; top:50%; transform:translateY(-50%); color:rgba(244,184,63,.045); font-size:110px; line-height:1; font-weight:950; pointer-events:none; }
html[dir="rtl"] .welcome::after { right:auto; left:25px; }
.welcome h1 { position:relative; z-index:1; }
.welcome p { position:relative; z-index:1; max-width:720px; }

.stats { gap:14px; }
.stat-card { min-height:154px; padding:21px; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 22px 58px rgba(0,0,0,.32),0 0 28px rgba(244,184,63,.045); }
.stat-icon { width:38px; height:38px; border-radius:11px; font-size:10px; }
.stat-value { letter-spacing:-.35px; }

.collapse-card { background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),rgba(15,14,11,.72)!important; border-color:rgba(255,255,255,.075)!important; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 16px 45px rgba(0,0,0,.18); }
.collapse-card[open] { border-color:rgba(244,184,63,.20)!important; background:linear-gradient(145deg,rgba(244,184,63,.035),rgba(255,255,255,.012)),rgba(15,14,11,.78)!important; }
.collapse-icon { background:rgba(244,184,63,.09)!important; border:1px solid rgba(244,184,63,.13); color:var(--flin-gold-light)!important; }
.collapse-arrow { background:rgba(255,255,255,.04)!important; color:#a6a39b!important; }
.collapse-card[open] .collapse-arrow { background:rgba(244,184,63,.09)!important; color:var(--flin-gold-light)!important; }
.collapse-info { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.055); border-radius:11px; }

@media (max-width: 800px) {
    .topbar { height:68px; padding:0 16px; }
    .topbar-profile-copy,.topbar-eyebrow { display:none; }
    .topbar-profile { min-width:0; width:40px; height:40px; padding:3px; justify-content:center; }
    .topbar-avatar { width:32px; height:32px; }
    .topbar-actions { gap:7px; }
    .status { padding:0 9px; font-size:10px; }
    .welcome { padding:22px 20px; }
    .welcome::after { font-size:85px; opacity:.8; }
}

@media (max-width: 520px) {
    .topbar-icon-button { display:none; }
    .status { width:34px; padding:0; justify-content:center; font-size:0; }
    .status-dot { width:8px; height:8px; }
    .language-button { min-width:38px; padding:0 8px; }
    .welcome { border-radius:17px; }
}

/* ===== New Flin Login V3 ===== */
.login-page{overflow-x:hidden;position:relative;background:#070706}
.login-page:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 18%,rgba(244,184,63,.16),transparent 27%),radial-gradient(circle at 15% 85%,rgba(244,184,63,.055),transparent 26%),linear-gradient(135deg,#050505,#0d0c09 48%,#060606);z-index:-2}
.login-page:after{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 88%);z-index:-1}
.login-layout{padding:42px 24px}
.login-card{max-width:470px;padding:38px 40px 40px;border-radius:26px}
.flin-login-brand{display:flex;align-items:center;gap:15px;margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.07)}
.login-logo{flex:0 0 auto;width:58px;height:58px;margin:0;border-radius:17px}
.login-logo svg{width:38px;height:38px;fill:none;stroke:#171109;stroke-width:3;stroke-linejoin:round}.login-logo svg path+path{fill:#171109;stroke:none}
.flin-login-brand-copy{display:flex;flex-direction:column;gap:4px}.flin-login-brand-copy strong{font-size:18px;letter-spacing:2.4px;color:#fff}.flin-login-brand-copy span{font-size:9px;letter-spacing:1.65px;color:#8b877d;font-weight:700}
.login-card h1{font-size:31px;letter-spacing:-.5px}.login-description{margin:10px 0 29px;line-height:1.9}
.flin-input-wrap{position:relative}.flin-input-wrap input{width:100%;padding-inline-start:48px!important;height:52px!important;border-radius:13px!important}.flin-input-icon{position:absolute;inset-inline-start:17px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#77746c;z-index:2;pointer-events:none}.flin-input-icon svg,.flin-login-arrow{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.flin-input-wrap:focus-within .flin-input-icon{color:var(--flin-gold)}
.login-button{width:100%;min-height:53px;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:5px;cursor:pointer}.flin-login-arrow{width:18px;height:18px;transition:transform .2s ease}.login-button:hover .flin-login-arrow{transform:translateX(3px)}html[dir=rtl] .login-button:hover .flin-login-arrow{transform:translateX(-3px) rotate(180deg)}html[dir=rtl] .flin-login-arrow{transform:rotate(180deg)}
.login-button:disabled{opacity:.55;cursor:not-allowed;transform:none!important;filter:none!important}
.login-language a{border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
@media(max-width:600px){.login-layout{padding:70px 15px 24px}.login-card{padding:28px 22px 30px;border-radius:22px}.flin-login-brand{margin-bottom:25px;padding-bottom:20px}.login-logo{width:52px;height:52px;border-radius:15px}.login-logo svg{width:34px;height:34px}.flin-login-brand-copy strong{font-size:16px}.flin-login-brand-copy span{font-size:8px;letter-spacing:1.2px}.login-card h1{font-size:26px}.login-language{top:15px;right:15px}html[dir=rtl] .login-language{left:15px;right:auto}}

/* =========================================================
   NEW FLIN LOGIN BACKGROUND - MOBILE
   ========================================================= */
@media (max-width: 600px) {
    .login-page::before {
        background:
            linear-gradient(180deg, rgba(4,4,4,.20) 0%, rgba(4,4,4,.32) 42%, rgba(4,4,4,.58) 100%),
            url('../images/newflin-login-mobile.png') center center / cover no-repeat;
        background-attachment: fixed;
        filter: saturate(.94) contrast(1.04);
    }

    .login-page::after {
        background:
            radial-gradient(circle at 50% 45%, transparent 0%, rgba(0,0,0,.12) 60%, rgba(0,0,0,.42) 100%);
        mask-image: none;
        -webkit-mask-image: none;
    }

    .login-card {
        background:
            linear-gradient(145deg, rgba(18,17,14,.82), rgba(7,7,6,.72));
        backdrop-filter: blur(17px) saturate(1.08);
        -webkit-backdrop-filter: blur(17px) saturate(1.08);
        border-color: rgba(244,184,63,.38);
        box-shadow:
            0 30px 80px rgba(0,0,0,.58),
            0 0 34px rgba(244,184,63,.08),
            inset 0 1px 0 rgba(255,255,255,.07);
    }
}

/* =========================================================
   FIX: MOBILE LOGIN BACKGROUND VISIBILITY
   ========================================================= */
@media (max-width: 600px) {
    body.login-page {
        min-height: 100vh;
        background-image:
            linear-gradient(180deg, rgba(4,4,4,.12) 0%, rgba(4,4,4,.25) 45%, rgba(4,4,4,.48) 100%),
            url('../images/newflin-login-mobile.png') !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }

    body.login-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(circle at 50% 42%, transparent 0%, rgba(0,0,0,.08) 55%, rgba(0,0,0,.34) 100%) !important;
        filter: none !important;
    }

    body.login-page::after {
        display: none !important;
    }

    body.login-page .login-layout,
    body.login-page .login-language {
        position: relative;
        z-index: 1;
    }
}