/* ZKTeco ADMS — Global Stylesheet (Pruned) */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 999px; }

/* Backgrounds & Glassmorphism */
body {
    background: linear-gradient(135deg, #090714 0%, #0e0e1e 40%, #0b1226 70%, #051224 100%) !important;
    color: #cbd5e1;
    font-family: 'Inter', sans-serif;
}
.gradient-bg { background: linear-gradient(135deg, #0f0c29 0%, #1a1a2e 40%, #16213e 70%, #0f3460 100%); }
.glass { background: rgba(17, 25, 40, 0.75); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }


/* Layout & Cards */
.sidebar { background: rgba(17, 25, 40, 0.9); border-right: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); }
.topbar { background: rgba(17, 25, 40, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); }
.stat-card, .card { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); }
.filter-panel { background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; }

/* Forms & Inputs */
.input-field, .form-input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-radius: 10px;
    padding: 0.5rem 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.input-field:focus, .form-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); outline: none; }
.input-field::placeholder, .form-input::placeholder { color: rgba(255, 255, 255, 0.25); }
select.form-input option { background: #1e293b; }
.form-label { display: block; font-size: 0.75rem; font-weight: 500; color: #94a3b8; margin-bottom: 6px; letter-spacing: 0.02em; }

/* Buttons */
.btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.btn-secondary { background: rgba(99, 102, 241, 0.12); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.25); }
.btn-secondary:hover { background: rgba(99, 102, 241, 0.2); }
.btn-danger { background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.btn-export { background: linear-gradient(135deg, #059669, #10b981); color: #fff; }
.btn-primary, .btn-secondary, .btn-danger, .btn-export {
    font-weight: 600; font-size: 0.875rem; padding: 0.5rem 1.25rem; border-radius: 10px;
    transition: opacity 0.2s, transform 0.1s; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.btn-primary:hover, .btn-export:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary:active, .btn-export:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Data Table */
.data-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.data-table thead th { background: rgba(15, 23, 42, 0.8); color: #94a3b8; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; }
.data-table tbody tr { transition: background 0.15s; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.data-table tbody tr:hover { background: rgba(99, 102, 241, 0.06); }
.data-table tbody td { padding: 12px 16px; font-size: 0.875rem; color: #cbd5e1; white-space: nowrap; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* Badges & Indicators */
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; }
.badge-malawi { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-india { background: rgba(249, 115, 22, 0.15); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3); }
.badge-nepal { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-other { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.2); }
.badge-online { background: rgba(16, 185, 129, 0.12); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.25); }
.badge-offline { background: rgba(100, 116, 139, 0.12); color: #64748b; border: 1px solid rgba(100, 116, 139, 0.2); }
.badge-country { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.2); }
.badge-online, .badge-offline, .badge-country { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }

.hours-good { color: #34d399; }
.hours-ok { color: #fbbf24; }
.hours-poor { color: #f87171; }

.dot-online { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px #34d399; display: inline-block; }
.dot-offline { width: 8px; height: 8px; border-radius: 50%; background: #f87171; display: inline-block; }

/* Animations */
.pulse { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.pulse-green { background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; }
.pulse-grey { background: #475569; }
@keyframes ping { 75%, 100% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }

.dot { position: absolute; border-radius: 50%; background: rgba(99, 102, 241, 0.15); animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.4); opacity: 0.8; } }

.fade-in { animation: fadeIn 0.4s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.float-label { animation: floatIn 0.6s ease forwards; opacity: 0; }
@keyframes floatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Toast Notification */
#toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 999; padding: 14px 20px; border-radius: 12px;
    font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); transform: translateY(80px); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; pointer-events: none;
}
#toast.show { transform: translateY(0); opacity: 1; }
#toast.success { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #34d399; }
#toast.error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); color: #f87171; }

/* Confirmation Modal */
#confirm-modal {
    position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#confirm-modal.show { opacity: 1; pointer-events: all; }
#confirm-box {
    background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
    padding: 28px 32px; width: 420px; max-width: 90vw; transform: scale(0.95); transition: transform 0.2s;
}
#confirm-modal.show #confirm-box { transform: scale(1); }

/* ── Inline-style replacements (CSP: removes need for 'unsafe-inline') ─────── */

/* Logo / card gradient header */
.logo-gradient { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

/* Background orb animation delays */
.anim-delay-0  { animation-delay: 0s; }
.anim-delay-15 { animation-delay: 1.5s; }
.anim-delay-3  { animation-delay: 3s; }

/* Modal overlay */
.modal-overlay-bg {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

/* Modal slide-up entry animation */
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.modal-slide-up { animation: slideUp 0.2s ease-out; }

/* Grist status badges */
.badge-error   { background: rgba(239, 68, 68, 0.12);  color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-syncing { background: rgba(99, 102, 241, 0.12); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.2); }
.badge-failed  { background: rgba(239, 68, 68, 0.12);  color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }

/* Device panel */
.device-panel {
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

/* Grist log panel */
.grist-log-panel { background: #1e293b; }

/* Table border utility */
.table-border { border: 1px solid rgba(255, 255, 255, 0.07); }

/* Dashboard filter input widths */
.w-filter-device { width: 200px; }
.w-filter-date   { width: 160px; }
.w-pin-input     { width: 80px; }