:root{
	--header-bg: #111827; /* Charcoal */
	--header-text: #F8FAFC;
	--page-bg: #F1F5F9;
	--surface: #FFFFFF;
	--primary-text: #0F172A;
	--secondary-text: #475569;
	--muted: #64748B;
	--positive: #16A34A;
	--negative: #DC2626;
	--accent: #2563EB;
	--card-bg: #FFFFFF;
	--card-border: #E5E7EB;
	--card-radius: 12px;
	--card-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--page-bg); color:var(--primary-text); }
.topnav { background:var(--header-bg); padding:12px 18px; display:flex; gap:12px; align-items:center; box-shadow:var(--card-shadow); color:var(--header-text); }
.topnav { position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(4px); }

/* Make header wrap on small screens and keep links scrollable */
.topnav { flex-wrap:wrap; }
.topnav .brand { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.topnav .nav-links { display:flex; gap:10px; align-items:center; flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; }
.topnav .header-actions { display:flex; gap:10px; align-items:center; flex:0 0 auto; }

@media (max-width:640px){
	.topnav { padding:10px; }
	.topnav .brand { order:1; }
	.topnav .nav-links { order:2; width:100%; padding-top:8px; padding-bottom:8px; }
	.topnav .nav-links a { white-space:nowrap; }
	.topnav .header-actions { order:3; width:100%; justify-content:flex-end; margin-top:6px; }
}

/* Mobile side navigation styles */
.mobile-side-nav { position:fixed; left:0; top:0; bottom:0; width:280px; max-width:80%; background:var(--header-bg); color:var(--header-text); transform:translateX(-110%); transition:transform .28s cubic-bezier(.2,.8,.2,1); z-index:1500; box-shadow:2px 0 18px rgba(2,6,23,0.25); }
.mobile-side-nav.open { transform:translateX(0); }
.mobile-side-inner { padding:16px; display:flex; flex-direction:column; height:100%; }
.mobile-side-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mobile-nav-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.mobile-nav-link { display:block; padding:10px 12px; color:var(--header-text); text-decoration:none; border-radius:8px; font-weight:600; }
.mobile-nav-link:hover { background:rgba(255,255,255,0.04); }

/* Hide desktop inline links on very small screens and show hamburger */
@media (max-width:640px){
	.topnav .nav-links { display:none; }
	#mobileMenuToggle { display:inline-flex !important; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; }
}
.topnav a { color:var(--header-text); text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:600; }
.topnav a:hover { background:rgba(255,255,255,0.04); }
.topnav a.active{ box-shadow: inset 0 -3px 0 var(--accent); }
.container { padding:22px; max-width:1200px; margin:20px auto; }
.card { background:var(--card-bg); padding:18px; border-radius:var(--card-radius); box-shadow:var(--card-shadow); margin-bottom:16px; border:1px solid var(--card-border); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
form .row { display:flex; gap:12px; margin-bottom:12px; }
label { width:140px; font-weight:600; color:var(--secondary-text); }
input, select, textarea { flex:1; padding:12px 14px; border:1px solid var(--card-border); border-radius:12px; background:var(--card-bg); color:var(--primary-text); }
input:focus, select:focus, textarea:focus { outline:none; box-shadow:0 8px 24px rgba(2,6,23,0.06); border-color:var(--accent); }
button { background:var(--accent); color:var(--card-bg); border:none; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:700; transition:transform .12s ease, box-shadow .12s ease; }
button:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(37,99,235,0.12); }
button:focus{ outline:none; box-shadow:0 0 0 4px rgba(37,99,235,0.12); }
table { width:100%; border-collapse:collapse; }
thead th { text-align:left; padding:14px; background:transparent; color:var(--secondary-text); }
td, th { padding:14px; border-bottom:1px solid rgba(2,6,23,0.05); color:var(--primary-text); }
.profit { color:var(--positive); }
.loss { color:var(--negative); }

/* Text utility classes */
.text-primary{ color:var(--primary-text); }
.text-secondary{ color:var(--secondary-text); }
.text-muted{ color:var(--muted); }

/* Ensure header-contained text remains readable on dark background */
.topnav, .topnav * { color:var(--header-text); }

/* Header title and subtitle visibility (override inline styles) */
.topnav .brand > div > div:first-child {
	color: #FFFFFF !important; /* Ziya Traders title */
	font-weight: 600 !important;
}
.topnav .brand > div > .small {
	color: rgba(255,255,255,0.8) !important; /* Trading & Accounts subtitle */
	font-weight: 500 !important;
}

/* Make header title more prominent and responsive */
.topnav .brand > div > div:first-child {
	font-size: 18px !important;
	line-height: 1.1 !important;
}
.topnav .brand > div > .small {
	font-size: 13px !important;
}
@media (max-width:600px){
	.topnav .brand > div > div:first-child { font-size:16px !important; }
	.topnav .brand > div > .small { font-size:12px !important; }
}

/* Table zebra rows for readability */
table tbody tr:nth-child(even){ background: rgba(2,6,23,0.02); }
table tbody tr:nth-child(odd){ background: transparent; }

/* Settings page specific */
.settings-card .settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.small-card { padding:16px; }
.form-inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.form-inline input { flex:1 1 140px; }
.btn { padding:8px 10px; border-radius:6px; border:none; cursor:pointer; }
.btn.small { padding:6px 8px; font-size:13px; }
.btn.primary { background:#1160d8; color:#fff; }
.btn.danger { background:#c0392b; color:#fff; }
.list-wrap { margin-top:12px; }
.modern { width:100%; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(12,30,70,0.04); }
.modern thead { background:#fafbff; }
.modern tbody tr:hover { background:#f7f9ff; }
.msg { min-height:20px; margin-top:8px; font-weight:600; }
.empty { color:#666; padding:8px; }
.error { color:#c0392b; padding:8px; }
.edit-input { padding:6px 8px; border-radius:6px; border:1px solid #dfe6f3; }

@media (max-width:640px){
	.form-inline { flex-direction:column; align-items:stretch; }
	.form-inline input { width:100%; }
}

/* Improved mobile responsiveness for settings page and tables */
@media (max-width:480px){
	.container { padding:12px; }
	.card { padding:12px; }
	.settings-card .settings-grid { grid-template-columns: 1fr; gap:12px; }
	.small-card { padding:12px; }
	.form-inline { gap:8px; }
	.btn { width:100%; }
	.btn.small { width:auto; }
	.list-wrap { overflow:auto; -webkit-overflow-scrolling:touch; }
	.modern { display:block; min-width:100%; overflow:auto; }
	.modern table { width:100%; min-width:420px; }
	td, th { padding:10px; }
}

/* Report page responsiveness */
.report-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.report-filters label { margin:0 4px 0 0; font-weight:600; color:var(--secondary-text); }
.report-filters select, .report-filters button { padding:8px 10px; border-radius:8px; }

@media (max-width:720px){
	.report-filters { flex-direction:column; align-items:stretch; }
	.report-filters select { width:100%; }
	.report-filters button { width:100%; }
	/* Make report sections stack and tables scrollable */
	#reportContainer section { margin-bottom:12px; }
	#reportContainer .card { padding:12px; }
	#reportContainer .card > div { display:block; overflow:auto; -webkit-overflow-scrolling:touch; }
	#reportContainer table { min-width:420px; display:block; }
}

/* Staff page responsiveness */
.staff-card { }
.staff-grid { display:flex; gap:18px; align-items:flex-start; }
.staff-grid > div { flex:1; }
.staff-grid form { width:100%; }
.staff-card table { width:100%; }

@media (max-width:800px){
	.staff-grid { flex-direction:column; }
	.staff-grid > div { width:100%; }
	.staff-card .btn { width:auto; }
	.staff-card table { min-width:420px; display:block; overflow:auto; -webkit-overflow-scrolling:touch; }
}

/* Ensure parent container has relative positioning */
form {
    position: relative;
    z-index: 1;
}

/* Fix for dropdown alignment */
form select {
    position: relative;
    z-index: 9999;
    background-color: #fff;
}