/* Shared styling for standalone app pages (settings, profile, …).
   Mirrors the dashboard look incl. dark mode driven by html[data-theme="dark"]. */

:root { --brand: #0e8c6d; --brand-strong: #0b7258; --brand-soft: #e9f5f0; }

body {
    font-family: 'FiraGO', sans-serif;
    background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 42%, #e9f5f0 100%);
    min-height: 100vh;
    color: #1d1d1f;
}

.card {
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.05);
}

.input-field {
    transition: box-shadow .18s, border-color .18s, background-color .18s;
    border: 2px solid transparent;
    background: #f5f5f7;
    color: #1d1d1f;
}
.input-field:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(14,140,109,.1); }
.input-field:disabled { opacity: .7; cursor: not-allowed; }

.btn-primary { background: linear-gradient(135deg, #0e8c6d 0%, #35b189 100%); transition: filter .16s, box-shadow .16s, transform .16s; }
.btn-primary:hover { filter: brightness(1.03); box-shadow: 0 12px 28px rgba(14,140,109,.35); }
.btn-primary:active { transform: scale(.98); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

/* Theme toggle icon visibility */
.icon-sun { display: none; }
.icon-moon { display: block; }

/* =================== DARK MODE =================== */
html[data-theme="dark"] { --brand-strong: #35b189; --brand-soft: rgba(14,140,109,0.12); }

html[data-theme="dark"] body {
    background: linear-gradient(165deg, #09090b 0%, #0d0d10 42%, #0f0f14 100%);
    color: #e4e4e7;
}
html[data-theme="dark"] .icon-sun { display: block; }
html[data-theme="dark"] .icon-moon { display: none; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3f3f46; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .bg-white { background-color: #18181b !important; border-color: rgba(255,255,255,0.07) !important; }
html[data-theme="dark"] .bg-gray-50\/80,
html[data-theme="dark"] .bg-gray-50\/60,
html[data-theme="dark"] .bg-gray-50 { background-color: #1c1c20 !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: #27272a !important; }
html[data-theme="dark"] .bg-red-50 { background-color: rgba(239,68,68,0.1) !important; }
html[data-theme="dark"] .bg-green-50 { background-color: rgba(34,197,94,0.1) !important; }
html[data-theme="dark"] .bg-amber-50 { background-color: rgba(251,191,36,0.08) !important; }
html[data-theme="dark"] .bg-teal-50 { background-color: rgba(59,130,246,0.08) !important; }
html[data-theme="dark"] .bg-emerald-50\/80,
html[data-theme="dark"] .bg-emerald-50\/60,
html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16,185,129,0.07) !important; }

html[data-theme="dark"] .border-gray-100 { border-color: rgba(255,255,255,0.06) !important; }
html[data-theme="dark"] .border-gray-200 { border-color: rgba(255,255,255,0.09) !important; }
html[data-theme="dark"] .border-emerald-100 { border-color: rgba(16,185,129,0.18) !important; }
html[data-theme="dark"] .border-red-200 { border-color: rgba(239,68,68,0.22) !important; }
html[data-theme="dark"] .border-teal-100 { border-color: rgba(59,130,246,0.18) !important; }

html[data-theme="dark"] .text-gray-900 { color: #e4e4e7 !important; }
html[data-theme="dark"] .text-gray-800 { color: #d4d4d8 !important; }
html[data-theme="dark"] .text-gray-700 { color: #c4c4cc !important; }
html[data-theme="dark"] .text-gray-600 { color: #a1a1aa !important; }
html[data-theme="dark"] .text-gray-500 { color: #8a8a96 !important; }
html[data-theme="dark"] .text-gray-400 { color: #71717a !important; }
html[data-theme="dark"] .text-gray-300 { color: #52525b !important; }
html[data-theme="dark"] .text-emerald-700 { color: #34d399 !important; }
html[data-theme="dark"] .text-emerald-600 { color: #10b981 !important; }
html[data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; }
html[data-theme="dark"] .text-teal-800 { color: #93c5fd !important; }

html[data-theme="dark"] .input-field { background: rgba(255,255,255,0.07) !important; color: #e4e4e7 !important; }
html[data-theme="dark"] .input-field:focus { background: rgba(255,255,255,0.1) !important; }
html[data-theme="dark"] .input-field::placeholder { color: rgba(255,255,255,0.25) !important; }
html[data-theme="dark"] select.input-field option { background: #27272a; color: #e4e4e7; }