/* Copied and adapted from API/css/style.css for API-WHITELIST */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }
body { background-color: #0f172a; color: #e2e8f0; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
body.login-page { height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: #000; margin: 0; padding: 0; }
.video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
#bg-video { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; filter: brightness(0.4); object-fit: cover; }
.no-video-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: -100; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: -99; }
.login-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; padding: 20px; box-sizing: border-box; position: relative; z-index: 10; }
.login-box { width: 420px; max-width: 100%; background: rgba(0, 0, 0, 0.7); border-radius: 10px; backdrop-filter: blur(10px); border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 40px rgba(8, 7, 16, 0.6); padding: 40px 35px; text-align: center; position: relative; margin: 0 auto; }
.login-box h1 { font-size: 32px; font-weight: 600; margin-bottom: 30px; color: #fff; }
.login-box img.logo { width: 100px; margin-bottom: 20px; }
.login-box p { color: #e2e8f0; font-size: 0.9rem; margin-bottom: 30px; }
.login-box form { margin-top: 20px; }
.login-box input { display: block; width: 100%; padding: 12px 15px; margin-bottom: 15px; border: none; border-radius: 5px; background-color: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1rem; transition: all 0.3s ease; }
.login-box button { width: 100%; padding: 12px 0; background-color: #0ea5e9; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: 500; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; }
.login-box button:hover { background-color: #0284c7; }
.stat-card { background: rgba(255,255,255,0.04); padding: 14px 18px; border-radius: 8px; min-width: 120px; text-align: center; border: 1px solid rgba(255,255,255,0.04); }
.stat-card .stat-num { font-size: 20px; font-weight:700; color:#f8fafc }
.stat-card .stat-label { font-size: 12px; color: #94a3b8; margin-top:4px }

/* Slightly adjust primary color to better match API theme */
.login-box button { background-color: #06b6d4; }
.login-box button:hover { background-color: #0891b2; }

/* Admin layout */
.admin-header { display:flex; justify-content:space-between; align-items:center; padding:18px 30px; border-bottom:1px solid rgba(255,255,255,0.04); }
.admin-header .header-left { display:flex; align-items:center }
.admin-header h2 { color:#fff; margin:0; font-size:20px }
.admin-header .header-right { display:flex; gap:12px; align-items:center }
.admin-header .welcome { color:#cbd5e1 }
.btn-logout { color:#fff; background:#ef4444; padding:8px 10px; border-radius:6px; text-decoration:none }

.admin-body { display:flex; height: calc(100vh - 120px); }
.admin-menu { width:220px; padding:20px; background: linear-gradient(180deg, rgba(2,6,23,0.8), rgba(2,6,23,0.6)); border-right:1px solid rgba(255,255,255,0.02); }
.admin-menu ul { list-style:none }
.admin-menu li { padding:10px 12px; color:#cbd5e1; cursor:pointer; border-radius:6px; margin-bottom:6px }
.admin-menu li.active, .admin-menu li:hover { background: rgba(255,255,255,0.04); color:#fff }

.admin-main { flex:1; padding:24px; overflow:auto }
.stats-row { display:flex; gap:12px; margin-bottom:18px }
.chart-card { background: #0b1220; padding:14px; border-radius:8px; margin-bottom:18px }
.chart-card canvas { width:100% !important; height:120px !important; display:block }
.panel-list .table-container { margin-top:6px }

/* List view for results */
.result-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.result-item { background: rgba(255,255,255,0.02); padding: 12px; border-radius:8px; display:flex; justify-content:space-between; align-items:center }
.result-item .meta { color:#94a3b8; font-size:13px }
.result-item a { color:#fff; font-weight:600; text-decoration:none }

/* Legacy small loader removed per design — use the washer-style loader only.
	If a compact loader is needed, use <span class="loader small"></span> (handled below).
*/

/* reduce scrollbar by limiting admin-main padding and chart height */
.admin-main { padding:16px; }
.chart-card { padding:10px; }

@media (max-width:900px) {
	.admin-body { flex-direction:column }
	.admin-menu { width:100%; display:flex; overflow:auto }
	.admin-menu ul { display:flex; gap:8px }
	.admin-menu li { white-space:nowrap }
}
.error-message { background-color: rgba(220, 38, 38, 0.8); color: white; padding: 10px; border-radius: 5px; margin-bottom: 20px; font-size: 14px; }
.footer { margin-top: 40px; padding: 20px 0; text-align: center; border-top: 1px solid #2d3748; color: #a0aec0; font-size: 0.9rem; width: 100%; clear: both; position: relative; bottom: 0; }
body.login-page .footer { position: absolute; bottom: 20px; border-top: none; color: rgba(255, 255, 255, 0.5); }
/* Panel specific */
.header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #334155; margin-bottom: 30px; }
.header h1 { font-size: 24px; color: #f8fafc; }
.controls { margin: 12px 0; }
.controls button { margin-right: 8px; padding: 8px 12px; }
.table-container { background-color: #1e293b; border-radius: 8px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.table-container table { width: 100%; border-collapse: collapse; background: transparent; }
.table-container th, .table-container td { padding: 12px; border-bottom: 1px solid #2d3748; color: #e2e8f0; }
.badge { padding: 4px 8px; border-radius: 4px; font-weight: 600; }
.passed { background:#2ecc71;color:#fff }
.failed { background:#e74c3c;color:#fff }
#details { margin-top:16px; background:#111827; padding:12px; border:1px solid #e6e6e6; }
pre { white-space: pre-wrap; color:#e2e8f0 }

/* Settings / Admins improvements */
.settings-grid { display: grid; grid-template-columns: 1fr 420px; gap: 18px; align-items: start; }
.settings-panel, .admins-panel { background: rgba(255,255,255,0.03); padding: 16px; border-radius: 8px; }
.settings-panel h3, .admins-panel h3 { margin-bottom: 8px }
.settings-form label { display:block; margin-bottom:10px; color:#e2e8f0 }
.settings-form input { width:100%; padding:10px; border-radius:6px; border:none; background: rgba(255,255,255,0.04); color:#fff }
.settings-msg { margin-top:8px; color:#9ae6b4 }
.muted { color:#94a3b8; font-size:13px }
.create-admin input { display:block; width:100%; padding:8px; margin-bottom:8px; border-radius:6px; border:none; background: rgba(255,255,255,0.03); color:#fff }
.admins-list-ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.admin-item { display:flex; justify-content:space-between; align-items:center; padding:10px; background: rgba(0,0,0,0.3); border-radius:6px }
.admin-item .meta { font-size:12px; color:#94a3b8 }
.badge { background:#06b6d4; color:#fff; padding:4px 8px; border-radius:6px; font-size:12px }
.btn-primary { background:#06b6d4; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer }
.btn-small { padding:6px 8px; border-radius:6px; border:none; cursor:pointer; background:#374151; color:#fff }
.btn-danger { background:#ef4444 }

@media (max-width:1000px) { .settings-grid { grid-template-columns: 1fr; } }

/* Global overlay loader centered (stack loader vertically with caption) */
#globalLoader.global-overlay { display:none; position: fixed; inset: 0; background: rgba(2,6,23,0.85); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; }

/* When loader is active, hide page chrome/content so only the centered machine is visible */
body.global-loading .admin-header,
body.global-loading .admin-body,
body.global-loading .footer,
body.global-loading .login-container,
body.global-loading .login-box,
body.global-loading .panel-overview,
body.global-loading .panel-list,
body.global-loading .table-container {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Washer-style loader (scoped to overlay): replace the loader visuals directly (drum + body + inner money) */
.global-overlay .loader {
	width: 120px;
	height: 150px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-image: linear-gradient(#ddd 50%, #bbb 51%),
		linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
		radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
		radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
		radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
	background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
	background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
	position: relative;
	border-radius: 6%;
	animation: shake 3s ease-in-out infinite;
	transform-origin: 60px 180px;
}

/* Caption text under the loader with rotating phrases */
.loader-caption { margin-top: 10px; text-align: center; }
.loader-caption .loader-line { display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); color: #e2e8f0; font-size: 14px; box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset; }

.global-overlay .loader:after {
    content: "";
    position: absolute;
    width: 95px;
    height: 95px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 20px;
    /* Use the provided drum image as the single background layer that will spin */
    background-image: url("../assets/fundodinheiro.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-sizing: border-box;
    border: 10px solid #DDD;
    box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
	/* rotate the drum image itself (slower) */
	animation: spin 4s linear infinite;
}
/* floatNotesBG removed — drum image now handles rotation */

/* Decorative inline SVG-based money markup removed — visuals are now provided via background-image layers in .global-overlay .loader:after */

/* Generic small loader styles for inline use (not inside overlay) */
.loader.small { width: 48px; height: 48px; display: inline-block; position: relative; background: transparent; border-radius: 6%; }
.loader.small:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	background-image: url("../assets/fundodinheiro.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #999 inset;
	animation: spin 3s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg) }
	50% { transform: rotate(360deg) }
	75% { transform: rotate(750deg) }
	100% { transform: rotate(1800deg) }
}
@keyframes shake {
	65%, 80%, 88%, 96% { transform: rotate(0.5deg) }
	50%, 75%, 84%, 92% { transform: rotate(-0.5deg) }
	0%, 50%, 100%  { transform: rotate(0) }
}