/* assets/css/pages/settings.css
   settings.html එකේ තිබුණු inline <style> block 2ක් මෙතනට ගෙනාවා.
   Router එක navigate කරනකොට මේ file එක <link id="page-style"> එකට load කරනවා. */

html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            background-attachment: fixed;
            color: #e2e8f0;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 10%;
            left: 15%;
            width: 50vw;
            height: 50vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
            z-index: 0;
            animation: float 15s infinite alternate ease-in-out;
        }

        body::after {
            content: '';
            position: fixed;
            bottom: 10%;
            right: 15%;
            width: 40vw;
            height: 40vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
            z-index: 0;
            animation: float 20s infinite alternate-reverse ease-in-out;
        }

        @keyframes float {
            0% { transform: translate(0, 0); }
            100% { transform: translate(5%, 5%); }
        }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.3); border-radius: 5px; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3b82f6, #8b5cf6); border-radius: 5px; border: 2px solid rgba(30, 41, 59, 0.3); }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2563eb, #7c3aed); }

        .card { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 1rem; }
        
        .form-input, .settings-input { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(71, 85, 105, 0.3); color: #f8fafc; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0.75rem; backdrop-filter: blur(10px); }
        .form-input:focus, .settings-input:focus { background: rgba(51, 65, 85, 0.9); border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.2); outline: none; transform: translateY(-2px); }

        .btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 600; border-radius: 0.75rem; position: relative; overflow: hidden; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; }
        .btn:hover::before { left: 100%; }
        .btn-primary { background: linear-gradient(135deg, #3b82f6, #8b5cf6); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4); border: none; }
        .btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #2563eb, #7c3aed); transform: translateY(-3px); box-shadow: 0 12px 35px rgba(59, 130, 246, 0.5); }
        .btn-secondary { background: linear-gradient(135deg, #475569, #64748b); box-shadow: 0 4px 15px rgba(71, 85, 105, 0.3); border: none; }
        .btn-secondary:hover:not(:disabled) { background: linear-gradient(135deg, #64748b, #94a3b8); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(71, 85, 105, 0.4); }
        .btn-danger { background: #ef4444; box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4); }
        .btn-danger:hover:not(:disabled) { background: #dc2626; transform: translateY(-3px); box-shadow: 0 12px 35px rgba(239, 68, 68, 0.5); }


        .spinner { width: 40px; height: 40px; border: 4px solid rgba(59, 130, 246, 0.3); border-radius: 50%; border-top-color: #3b82f6; animation: spin 1s linear infinite; box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        .custom-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 1000; animation: modal-fade-in 0.3s ease-out; }
        @keyframes modal-fade-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
        .modal-content { background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(59, 130, 246, 0.3); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.1); }

        .active-nav { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white !important; font-weight: 600; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
        
        #sidebar { width: 5rem; transition: width 0.3s ease-out; }
        #sidebar:hover { width: 16rem; }
        .logo-container { display: flex; align-items: center; overflow: hidden; width: 100%; height: 100%; }
        #sidebar .logo-container { justify-content: center; width: 5rem; }
        .logo-icon { transition: margin-right 0.3s ease-out; flex-shrink: 0; }
        .logo-text { white-space: nowrap; overflow: hidden; opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; font-size: 1.5rem; font-weight: 800; color: #5ea4fa; }
        #sidebar:hover .logo-container { justify-content: flex-start; padding-left: 20px; width: 100%; }
        #sidebar:hover .logo-icon { margin-right: 12px; }
        #sidebar:hover .logo-text { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
        .nav-item > i, .nav-item > svg { flex-shrink: 0; }
        .nav-item span, #profile-username { opacity: 0; white-space: nowrap; transition: opacity 0.15s ease-out, max-width 0.2s ease-out; max-width: 0; overflow: hidden; will-change: opacity, max-width; }
        #sidebar:hover .nav-item span, #sidebar:hover #profile-username { opacity: 1; transition: opacity 0.15s ease-out 0.05s, max-width 0.2s ease-out; max-width: 120px; }
        #sidebar .nav-item, #sidebar #profile-btn { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
        #sidebar:hover .nav-item, #sidebar:hover #profile-btn { justify-content: flex-start; padding-left: 1rem; padding-right: 1rem; gap: 0.75rem; }
        .sidebar-text-slide { transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform: translateX(-10px); opacity: 0; display: block; }
        #sidebar:hover .sidebar-text-slide { transform: translateX(0); opacity: 1; }
        .sidebar-icon-fade { transition: opacity 0.3s ease-in-out; }
        #sidebar:hover .sidebar-icon-fade { opacity: 0.8; }

/* ---- */

:root{
  --grad-a:#3b82f6; --grad-b:#8b5cf6;
  --ring: 255 255 255 / 0.12;
  --blur: 18px; --blur-heavy: 28px;
  --radius-lg: 22px;
}

/* Background aurora boosted for parity with other pages */
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.22), transparent 44%),
    radial-gradient(900px 520px at 110% 0%, rgba(59,130,246,0.18), transparent 48%),
    linear-gradient(135deg, #0b0f1a, #0f172a 55%, #151a2b) !important;
}

/* Cards – deep frosted glass + gradient edge ring + soft top highlight */
.card{
  position: relative;
  background: linear-gradient(180deg, rgba(35,39,55,0.62), rgba(17,19,27,0.50)) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgb(var(--ring)) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.22) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, rgba(99,102,241,.55), rgba(139,92,246,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.35;
}
.card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:80px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  pointer-events:none;
}
.card:hover{
  transform: translateY(-6px);
  border-color: rgba(99,102,241,.45) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
}

/* Sidebar – stronger frosted with subtle shadow */
#sidebar{
  background: rgba(12, 14, 22, 0.62) !important;
  backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1) !important;
  border-right: 1px solid rgb(var(--ring)) !important;
  box-shadow: 12px 0 40px rgba(0,0,0,.35);
}
#sidebar .nav-item:hover{ background: rgba(71,85,105,0.38) !important; }
.active-nav{
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important;
  color:#fff !important;
  box-shadow: 0 10px 30px rgba(67,56,202,0.40) !important;
}

/* Inputs / settings fields – brighter frosted + vivid focus ring */
.settings-input, .form-input,
input[type="text"], input[type="number"], input[type="email"], input[type="password"]{
  background: rgba(23, 28, 44, 0.65) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color:#eef2ff !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition: all .22s ease !important;
}
.settings-input:focus, .form-input:focus,
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus{
  background: rgba(40, 50, 78, 0.72) !important;
  border-color: rgba(99,102,241,.65) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.30), 0 10px 28px rgba(99,102,241,.22) !important;
  transform: translateY(-1px);
}

/* Buttons – gradient glass variants */
.btn{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(36,38,48,0.55) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.32) !important;
  transition: transform .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b)) !important;
  color:#fff !important;
  box-shadow: 0 14px 36px rgba(99,102,241,.40) !important;
}
.btn-secondary{
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color:#fff !important;
}
.btn-danger{
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color:#fff !important;
}

/* Modals – heavy glass with gradient accent bar */
.custom-modal{ background-color: rgba(2,6,23,.50) !important; backdrop-filter: blur(var(--blur-heavy)) !important; -webkit-backdrop-filter: blur(var(--blur-heavy)) !important; }
.modal-content{
  position: relative;
  background: linear-gradient(180deg, rgba(24,28,42,0.92), rgba(12,16,28,0.85)) !important;
  border-radius: 20px !important;
  border: 1px solid rgb(var(--ring)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
.modal-content::after{
  content:""; position:absolute; top:10px; bottom:10px; right:10px; width:5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b)); opacity:.9;
}

/* Dropdown in mobile more-menu */
#more-menu-modal > div{
  background: rgba(22, 26, 38, 0.80) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
}

/* Glossy scrollbar */
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--grad-a), var(--grad-b));
  border-radius: 8px; border:2px solid rgba(30,41,59,.30);
}