/* app.css - Nexora FX base styles (shared by the user site and admin).
 * Sections below: reset and page base, page container, scrollbars,
 * buttons, cards, form fields, badges and pills, alerts, toasts and
 * spinner, data tables, modal overlay, impersonation banner, total band,
 * sidebar layout, bottom nav (mobile) and page header.
 * Brand color is orange #FF6A00. Note: several base rules are repeated
 * further down this file; the later copy wins where they differ, so
 * keep the order unchanged when editing. */
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:'Inter',ui-sans-serif,system-ui;background:#F8F9FA;color:#0F172A;overflow-x:hidden;}
/* v65: root-level horizontal guard — stops any content from widening
   the layout viewport (the app WebView was laying the Copy Trade page
   out wider than the phone screen). Images/iframes can never exceed
   their container either. */
html{overflow-x:hidden;}
img,iframe{max-width:100%;}
/* Where We Work — liquid glass broker cards (moved from landing.js so the
   user dashboard gets the same look). Shine sweep glides across each card. */
.broker-card{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 30%),linear-gradient(135deg,rgba(255,255,255,.9) 0%,rgba(226,232,240,.65) 50%,rgba(255,255,255,.9) 100%);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(226,232,240,.9);border-radius:1.5rem;box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.55),0 12px 32px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);transition:transform .25s ease,box-shadow .25s ease}
.broker-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.55),0 20px 44px rgba(15,23,42,.12),0 4px 10px rgba(15,23,42,.06)}
.broker-card::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);transform:skewX(-20deg);pointer-events:none;animation:cardShine 5s ease-in-out infinite}
.broker-card:nth-child(2)::after{animation-delay:1.2s}
.broker-card:nth-child(3)::after{animation-delay:2.4s}
.broker-card:nth-child(4)::after{animation-delay:3.6s}
@keyframes cardShine{0%{left:-80%}50%{left:130%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.broker-card::after{animation:none}}
/* Responsive page container: fills small screens, caps at 1280px on laptops,
   widens to 1440px on xl and 1600px on 2xl so big screens don't look empty. */
.nx-container{max-width:80rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.nx-container{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1280px){.nx-container{max-width:90rem}}
@media(min-width:1536px){.nx-container{max-width:100rem}}
/* Thin scrollbars. */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:#F1F5F9;}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:3px;}
/* Buttons: primary (orange gradient), secondary (white outline), danger. */
.btn-primary{background:linear-gradient(135deg,#FF6A00,#FF7A00);color:#fff;border:none;border-radius:10px;padding:12px 24px;font-weight:600;font-size:15px;cursor:pointer;transition:opacity .2s;width:100%;display:block;text-align:center;text-decoration:none;}
.btn-primary:hover{opacity:.92;}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.btn-secondary{background:#fff;color:#0F172A;border:1.5px solid #E2E8F0;border-radius:10px;padding:11px 24px;font-weight:600;font-size:15px;cursor:pointer;transition:border-color .2s;text-align:center;}
.btn-secondary:hover{border-color:#FF6A00;color:#FF6A00;}
.btn-danger{background:#FEF2F2;color:#EF4444;border:1.5px solid #FCA5A5;border-radius:10px;padding:11px 24px;font-weight:600;cursor:pointer;text-align:center;}
.btn-danger:hover{background:#FEE2E2;}
/* Cards and form fields. */
.card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.07);padding:16px;}
@media(min-width:640px){.card{padding:20px;}}
.input-field{width:100%;border:1.5px solid #E2E8F0;border-radius:10px;padding:11px 14px;font-size:14px;font-family:inherit;color:#0F172A;background:#fff;outline:none;transition:border-color .2s;}
.input-field:focus{border-color:#FF6A00;box-shadow:0 0 0 3px rgba(255,106,0,.1);}
.input-label{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;color:#64748B;text-transform:uppercase;margin-bottom:6px;}
/* Badges and pills (status labels, e.g. Pending / Approved / Paid). */
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:11px;font-weight:700;padding:2px 7px;}
.badge-orange{background:#FF6A00;color:#fff;}
.badge-green{background:#D1FAE5;color:#059669;}
.badge-red{background:#FEE2E2;color:#DC2626;}
.badge-gray{background:#F1F5F9;color:#64748B;}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.pill-orange{background:#FFF7ED;color:#FF6A00;border:1px solid #FDBA74;}
.pill-green{background:#ECFDF5;color:#059669;}
.pill-red{background:#FEF2F2;color:#DC2626;}
.pill-gray{background:#F8FAFC;color:#64748B;border:1px solid #E2E8F0;}
.orange-tag{background:#FF6A00;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:3px 10px;}
.profit{color:#10B981;}.loss{color:#EF4444;}.muted{color:#64748B;}
/* Alert boxes (warning / success / danger / info). */
.alert-warning{background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:14px 16px;color:#92400E;}
.alert-success{background:#ECFDF5;border:1px solid #A7F3D0;border-radius:12px;padding:14px 16px;color:#065F46;}
.alert-danger{background:#FEF2F2;border:1px solid #FCA5A5;border-radius:12px;padding:14px 16px;color:#991B1B;}
.alert-info{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:12px;padding:14px 16px;color:#1E40AF;}
/* Toast popups and loading spinner. */
.toast{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 4px 20px rgba(0,0,0,.12);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;animation:slideIn .3s ease;}
.toast-success{border-left:4px solid #10B981;}.toast-error{border-left:4px solid #EF4444;}.toast-info{border-left:4px solid #3B82F6;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:none;opacity:1;}}
.spinner{width:20px;height:20px;border:2px solid #E2E8F0;border-top-color:#FF6A00;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
/* Data tables (admin lists, history). */
.data-table{width:100%;border-collapse:collapse;font-size:14px;}
.data-table th{font-size:11px;font-weight:700;letter-spacing:.06em;color:#64748B;text-transform:uppercase;padding:10px 16px;border-bottom:1px solid #F1F5F9;text-align:left;white-space:nowrap;}
.data-table td{padding:12px 16px;border-bottom:1px solid #F8FAFC;vertical-align:middle;}
.data-table tr:hover td{background:#FAFAFA;}
/* Modal overlay and dialog box. */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:#fff;border-radius:20px;padding:24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);}
/* Orange banner shown while an admin views the site as a user. */
.impersonation-banner{background:#FF6A00;color:#fff;text-align:center;padding:8px 16px;font-size:13px;font-weight:600;position:sticky;top:0;z-index:100;}
.no-scrollbar::-webkit-scrollbar{display:none;}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
/* Dark total-value band on the dashboard. */
.total-band{background:linear-gradient(135deg,#1E2329,#181A20);border-radius:16px;padding:20px;color:#fff;}
@media(min-width:640px){.total-band{padding:24px;}}

/* Repeated base rules (second copy). The rules below override the first
   copy above where they differ - see the header note. */
.btn-primary{background:linear-gradient(135deg,#FF6A00,#FF7A00);color:#fff;border:none;border-radius:10px;padding:12px 24px;font-weight:600;font-size:15px;cursor:pointer;transition:opacity 0.2s;width:100%;}
.btn-primary:hover{opacity:0.92;}
.btn-secondary{background:#fff;color:#0F172A;border:1.5px solid #E2E8F0;border-radius:10px;padding:11px 24px;font-weight:600;font-size:15px;cursor:pointer;transition:border-color 0.2s;}
.btn-secondary:hover{border-color:#FF6A00;color:#FF6A00;}
.btn-danger{background:#FEF2F2;color:#EF4444;border:1.5px solid #FCA5A5;border-radius:10px;padding:11px 24px;font-weight:600;cursor:pointer;}
.card{background:#fff;border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,0.07);padding:20px;}
.input-field{width:100%;border:1.5px solid #E2E8F0;border-radius:10px;padding:11px 14px;font-size:14px;font-family:inherit;color:#0F172A;background:#fff;outline:none;transition:border-color 0.2s;}
.input-field:focus{border-color:#FF6A00;box-shadow:0 0 0 3px rgba(255,106,0,0.1);}
.input-label{display:block;font-size:11px;font-weight:600;letter-spacing:0.06em;color:#64748B;text-transform:uppercase;margin-bottom:6px;}
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:11px;font-weight:700;padding:2px 7px;}
.badge-orange{background:#FF6A00;color:#fff;}
.badge-green{background:#D1FAE5;color:#059669;}
.badge-red{background:#FEE2E2;color:#DC2626;}
.badge-gray{background:#F1F5F9;color:#64748B;}
/* Desktop sidebar layout (fixed 260px, content offset by .with-sidebar). */
.sidebar{width:260px;background:#fff;border-right:1px solid #F1F5F9;height:100vh;position:fixed;top:0;left:0;overflow-y:auto;z-index:40;display:flex;flex-direction:column;}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:10px;color:#334155;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:background 0.15s;margin:1px 8px;}
.sidebar-link:hover,.sidebar-link.active{background:#FFF7ED;color:#FF6A00;}
.sidebar-link.active{font-weight:600;}
.sidebar-group{font-size:10px;font-weight:700;letter-spacing:0.1em;color:#94A3B8;text-transform:uppercase;padding:12px 24px 4px;}
.with-sidebar{margin-left:260px;min-height:100vh;}
@media(max-width:1023px){.sidebar{transform:translateX(-100%);transition:transform 0.25s;}.sidebar.open{transform:none;}.with-sidebar{margin-left:0;}}
.total-band{background:linear-gradient(135deg,#1E2329,#181A20);border-radius:16px;padding:24px;color:#fff;}
.profit{color:#10B981;}.loss{color:#EF4444;}.muted{color:#64748B;}
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;}
.pill-orange{background:#FFF7ED;color:#FF6A00;border:1px solid #FDBA74;}
.pill-green{background:#ECFDF5;color:#059669;}
.pill-red{background:#FEF2F2;color:#DC2626;}
.pill-gray{background:#F8FAFC;color:#64748B;border:1px solid #E2E8F0;}
.alert-warning{background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;padding:14px 16px;color:#92400E;}
.alert-success{background:#ECFDF5;border:1px solid #A7F3D0;border-radius:12px;padding:14px 16px;color:#065F46;}
.alert-danger{background:#FEF2F2;border:1px solid #FCA5A5;border-radius:12px;padding:14px 16px;color:#991B1B;}
.alert-info{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:12px;padding:14px 16px;color:#1E40AF;}
.toast{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 4px 20px rgba(0,0,0,0.12);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;animation:slideIn 0.3s ease;}
.toast-success{border-left:4px solid #10B981;}.toast-error{border-left:4px solid #EF4444;}.toast-info{border-left:4px solid #3B82F6;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0;}to{transform:none;opacity:1;}}
.spinner{width:20px;height:20px;border:2px solid #E2E8F0;border-top-color:#FF6A00;border-radius:50%;animation:spin 0.7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.data-table{width:100%;border-collapse:collapse;font-size:14px;}
.data-table th{font-size:11px;font-weight:700;letter-spacing:0.06em;color:#64748B;text-transform:uppercase;padding:10px 16px;border-bottom:1px solid #F1F5F9;text-align:left;white-space:nowrap;}
.data-table td{padding:12px 16px;border-bottom:1px solid #F8FAFC;vertical-align:middle;}
.data-table tr:hover td{background:#FAFAFA;}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,0.5);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:#fff;border-radius:20px;padding:28px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.2);}
/* Mobile bottom navigation (hidden on desktop by the media query below). */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #F1F5F9;display:flex;z-index:40;padding:0;}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;font-size:10px;font-weight:600;color:#94A3B8;cursor:pointer;gap:3px;transition:color 0.15s;}
.bottom-nav-item.active{color:#FF6A00;}
@media(min-width:1024px){.bottom-nav{display:none;}}

.no-scrollbar::-webkit-scrollbar{display:none;}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}
.impersonation-banner{background:#FF6A00;color:#fff;text-align:center;padding:8px 16px;font-size:13px;font-weight:600;position:sticky;top:0;z-index:100;}
.orange-tag{background:#FF6A00;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:3px 10px;}
/* Sticky page header (title, bell, avatar, sign out). */
.page-header{background:#fff;border-bottom:1px solid #F1F5F9;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30;}

.no-loader .page-loader{display:none!important}