/* Simple layout & utility styles */

* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, 'Poppins', sans-serif; background: var(--color-light); color: var(--color-primary); }
a { color: inherit; text-decoration: none; }
.center { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:16px; }
.logo { width:72px; height:72px; }
.card { background: var(--color-bright); border-radius:8px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,0.06); margin-bottom:16px; }
.container { max-width:980px; margin:24px auto; padding:0 16px; }
.navbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; background:var(--color-bright); box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.form-row { margin-bottom:12px; }
input, select { width:100%; padding:8px 10px; border:1px solid #e6e6e6; border-radius:6px; }
.btn-primary { display:inline-block; background:var(--color-primary); color:white; padding:8px 14px; border-radius:6px; }
.btn-secondary { display:inline-block; background:var(--color-secondary); color:white; padding:8px 14px; border-radius:6px; }
.btn-danger { display:inline-block; background:#e74c3c; color:white; padding:6px 10px; border-radius:6px; border:none; cursor:pointer; }
/* smaller button variant */
.btn-small { padding:6px 10px; font-size:13px; border-radius:6px; }

/* search row: inline input + button */
.search-row { display:flex; gap:8px; align-items:center; }
.search-row input { flex:1; min-width:0; }
.search-row .btn-primary { padding:8px 12px; white-space:nowrap; }

/* Chart wrapper: fixed height to avoid cards growing unexpectedly */
.chart-wrap { height: 260px; width:100%; position:relative; }
.chart-wrap canvas { position:absolute; inset:0; width:100% !important; height:100% !important; }

/* Loader overlay inside chart wrapper */
.chart-loader { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(2,6,20,0.2), rgba(2,6,20,0.2)); transition: opacity 200ms ease; }
.chart-loader.hidden { opacity:0; visibility:hidden; }
.chart-loader .spinner { width:34px; height:34px; border-radius:50%; border:4px solid rgba(255,255,255,0.06); border-top-color: var(--neon-1); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* slightly taller on larger screens */
@media (min-width:900px) {
	.chart-wrap { height:320px; }
}
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:8px; border-bottom:1px solid #f0f0f0; font-size:14px; text-align:left; }
.table-wrap { overflow-x:auto; }
.muted { color: #666; margin-top:8px; text-align:center; }
.summary > div { margin-top:8px; }

/* Index landing improvements */
.layout { max-width:900px; padding:28px; }
.hero { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:12px; }
.site-title { margin:0; font-size:20px; color:var(--color-primary); }
.tag { margin:0; color:var(--color-secondary); font-size:13px; }
.hero-nav a { margin-left:12px; color:var(--color-secondary); font-size:14px; }

.split { display:flex; gap:20px; align-items:stretch; }
.panel { flex:1; padding:18px; border-radius:8px; }
.panel.info { background: linear-gradient(180deg,var(--color-accent3), #fff); border:1px solid rgba(34,34,34,0.03); }
.form-panel { background: var(--color-bright); border:1px solid #f2f4f8; }
.info h2 { margin-top:0; }

.login-form { max-width:360px; margin:0 auto; }
.role-toggle { display:flex; gap:8px; margin-bottom:12px; }
.role { display:inline-flex; align-items:center; gap:8px; background:#fafafa; padding:8px 10px; border-radius:8px; border:1px solid #eee; cursor:pointer; }
.role input { margin:0; }
.actions { display:flex; gap:12px; align-items:center; }
.btn-link { background:transparent; color:var(--color-secondary); padding:6px 8px; border-radius:6px; }

.footer { text-align:center; margin-top:16px; font-size:13px; }

@media (max-width:800px) {
	.split { flex-direction:column; }
	.hero-nav { display:none; }
	.layout { padding:18px; }
}

/* Futuristic theme (scoped) */
.futuristic {
	background: radial-gradient(1200px 600px at 10% 10%, rgba(122,110,255,0.08), transparent 8%),
							radial-gradient(900px 400px at 90% 80%, rgba(110,243,255,0.05), transparent 12%),
							linear-gradient(180deg, var(--futuristic-start), var(--futuristic-end));
	color: #ecf6ff; /* bright text on dark background */
	position: relative; overflow: visible;
}
.futuristic .layout { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(120,90,255,0.08); box-shadow: 0 18px 60px rgba(4,8,24,0.6); backdrop-filter: blur(8px); }
.futuristic .site-title { color: #f3fbff; font-weight:800; letter-spacing:0.8px; }
.futuristic .tag { color: rgba(200,220,255,0.85); }
.futuristic .panel { border-radius:12px; }
.futuristic .form-panel { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(110,80,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.015); }
.futuristic .role { background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border:1px solid rgba(120,90,255,0.04); }
.futuristic .btn-primary { background: linear-gradient(90deg,var(--neon-1), var(--neon-2)); color: #021; padding:10px 16px; font-weight:700; border-radius:10px; border:none; box-shadow: 0 10px 30px rgba(122,110,255,0.25), 0 0 36px rgba(110,243,255,0.12); }
.futuristic .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(122,110,255,0.32), 0 0 60px rgba(110,243,255,0.18); }
.futuristic .btn-primary:active { transform: translateY(0); }
.futuristic .login-form input { background: rgba(255,255,255,0.02); border:1px solid rgba(110,90,255,0.08); color: #dff6ff; }
.futuristic .muted { color: rgba(220,240,255,0.7); }
.futuristic .panel.info { background: linear-gradient(180deg, rgba(122,110,255,0.08), rgba(110,243,255,0.02)); border:1px solid rgba(110,243,255,0.06); color: #eaf7ff; }
.futuristic .info h2, .futuristic .info p, .futuristic .info ul { color: #ecf9ff; }

/* Subtle animated lines for futuristic feel */
.futuristic::before, .futuristic::after {
	content: "";
	position: absolute; inset: 0; pointer-events:none; mix-blend-mode: overlay; opacity:0.12;
	background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 40px);
}
.futuristic::after { opacity:0.06; transform: rotate(15deg); }

@media (max-width:800px) {
	.futuristic::before, .futuristic::after { display:none; }
}

/* Ensure main container and cards on dashboards match index dark glass look */
.futuristic .container {
	background: linear-gradient(180deg, rgba(6,12,30,0.6), rgba(4,8,24,0.6));
	border: 1px solid rgba(100,80,255,0.06);
	box-shadow: 0 24px 80px rgba(2,6,22,0.7);
	padding: 24px;
	border-radius: 12px;
	color: #e6f7ff;
}
.futuristic .card {
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border: 1px solid rgba(100,80,255,0.06);
	box-shadow: 0 8px 30px rgba(3,6,18,0.45);
	color: #e9fbff;
}
.futuristic .navbar {
	background: linear-gradient(180deg, rgba(2,6,20,0.6), rgba(2,6,20,0.35));
	border-bottom: 1px solid rgba(120,90,255,0.06);
	color: #eaf9ff;
}
.futuristic .navbar > div, .futuristic #namaUser {
    margin-top: 3rem;
	font-size: 1.15rem;
	font-weight: 700;
	/* gradient text */
	background: linear-gradient(90deg, var(--neon-1), var(--neon-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 6px 22px rgba(122,110,255,0.12);
}

@media (max-width:800px) {
	.futuristic .navbar > div, .futuristic #namaUser { font-size: 1.5rem; }
}
.futuristic h1, .futuristic h2, .futuristic h3, .futuristic h4 {
	color: #f6fdff;
}
.futuristic label, .futuristic p, .futuristic .muted, .futuristic .summary > div {
	color: rgba(230,250,255,0.9);
}
.futuristic a { color: var(--neon-1); }
.futuristic .table th, .futuristic .table td { color: #eaf9ff; border-color: rgba(255,255,255,0.03); }
.futuristic input, .futuristic select, .futuristic textarea { color: #eaf9ff; background: rgba(255,255,255,0.02); border:1px solid rgba(110,90,255,0.06); }
.futuristic canvas { background: transparent; }

/* Small utility: make logout/button text more visible */
.futuristic #logout, .futuristic .btn-secondary { color: #eaf9ff; }