/* BJStore Global Styles */
html { scroll-behavior: smooth; }
::selection { background: rgba(79,70,229,.3); }
:focus-visible { outline: 2px solid #4F46E5; outline-offset: 2px; }

.scrollbar-thin::-webkit-scrollbar { width: 5px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #475569; }

.glass-card {
    background: rgba(255,255,255,.9); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.5); box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.dark .glass-card {
    background: rgba(30,41,59,.8); border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.gradient-text {
    background: linear-gradient(135deg,#4F46E5,#7C3AED,#2563EB);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.stat-card {
    border-radius: 1.25rem; padding: 1.5rem;
    background: linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.8));
    border: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 24px rgba(0,0,0,.06);
    transition: all .3s ease;
}
.dark .stat-card {
    background: linear-gradient(135deg,rgba(30,41,59,.95),rgba(30,41,59,.8));
    border: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(79,70,229,.15); }
.stat-icon { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.25rem; }

.input-field {
    display:block;width:100%;padding:.75rem 1rem;border-radius:.75rem;
    border:1.5px solid #d1d5db;background:#fff;color:#111827;font-size:.875rem;
    outline:none;transition:border-color .2s,box-shadow .2s;
}
.input-field::placeholder { color:#9ca3af; }
.input-field:focus { border-color:#4F46E5;box-shadow:0 0 0 3px rgba(79,70,229,.15); }
.dark .input-field { background:#1e293b;border-color:#475569;color:#f1f5f9; }
.dark .input-field:focus { border-color:#818cf8;box-shadow:0 0 0 3px rgba(129,140,248,.2); }
select.input-field { appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem;padding-right:2.5rem; }
textarea.input-field { resize:vertical;min-height:100px; }

.form-group { margin-bottom:1.25rem; }
.form-label { display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#374151; }
.dark .form-label { color:#d1d5db; }

.btn-primary {
    display:inline-flex;align-items:center;justify-content:center;
    padding:.75rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:.875rem;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;cursor:pointer;
    box-shadow:0 4px 15px rgba(79,70,229,.3);transition:all .2s;
}
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 8px 25px rgba(79,70,229,.4); }
.btn-primary:disabled { opacity:.6;cursor:not-allowed;transform:none; }

.toast { animation: toastSlide .4s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes toastSlide { 0%{transform:translateX(120%);opacity:0} 100%{transform:translateX(0);opacity:1} }
.toast-exit { animation: toastExit .3s cubic-bezier(.4,0,1,1) forwards; }
@keyframes toastExit { 0%{transform:translateX(0);opacity:1} 100%{transform:translateX(120%);opacity:0} }

.spinner { width:40px;height:40px;border:3px solid rgba(79,70,229,.15);border-top-color:#4F46E5;border-radius:50%;animation:spin .8s linear infinite; }
.dark .spinner { border-color:rgba(79,70,229,.2);border-top-color:#818cf8; }
@keyframes spin { to{transform:rotate(360deg)} }
.spinner-sm { width:20px;height:20px;border-width:2px; }

.data-table { width:100%;border-collapse:separate;border-spacing:0; }
.data-table th { padding:.875rem 1.25rem;text-align:left;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;background:#f9fafb;border-bottom:1px solid #e5e7eb; }
.dark .data-table th { background:#1e293b;color:#9ca3af;border-bottom-color:#334155; }
.data-table td { padding:1rem 1.25rem;border-bottom:1px solid #f3f4f6;font-size:.875rem; }
.dark .data-table td { border-bottom-color:#1e293b; }
.data-table tbody tr:hover { background:#f9fafb; }
.dark .data-table tbody tr:hover { background:#1e293b; }

.search-bar { position:relative; }
.search-bar input { padding-left:2.75rem;padding-right:1rem;height:44px;border-radius:1rem;border:1px solid #e5e7eb;background:#f9fafb;width:100%;font-size:.875rem;color:#111827;outline:none;transition:all .3s; }
.dark .search-bar input { border-color:#334155;background:#1e293b;color:#fff; }
.search-bar input:focus { border-color:#4F46E5;box-shadow:0 0 0 3px rgba(79,70,229,.15);background:#fff; }
.dark .search-bar input:focus { background:#1e293b; }
.search-bar i { position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none; }

.dash-main { min-height:100vh;padding-top:3.5rem;padding-bottom:5rem; }
@media(min-width:1024px) { .dash-main { margin-left:18rem;padding-top:0;padding-bottom:1.5rem; } }

.page-header { margin-bottom:2rem; }
.page-header h1 { font-size:1.75rem;font-weight:800;color:#111827;letter-spacing:-.025em; }
.dark .page-header h1 { color:#f9fafb; }
.page-header p { color:#6b7280;margin-top:.25rem; }
.dark .page-header p { color:#9ca3af; }

.dashboard-content { min-height:calc(100vh - 64px);padding:1.5rem; }
@media(min-width:1024px) { .dashboard-content { padding:2rem; } }

.flash-message { transition:opacity .3s,transform .3s; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.fade-in-up { animation:fadeInUp .5s ease-out forwards; }

.filter-chip { display:inline-flex;align-items:center;padding:.375rem .875rem;border-radius:9999px;font-size:.75rem;font-weight:600;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;cursor:pointer;transition:all .15s;white-space:nowrap; }
.dark .filter-chip { background:#1e293b;border-color:#334155;color:#94a3b8; }
.filter-chip:hover,.filter-chip.active { background:#4f46e5;border-color:#4f46e5;color:#fff; }

/* Admin sidebar */
.admin-nav-link { display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.75rem;font-size:.875rem;transition:all .15s;color:#6b7280; }
.dark .admin-nav-link { color:#9ca3af; }
.admin-nav-link:hover { background:#f9fafb;color:#4f46e5; }
.dark .admin-nav-link:hover { background:#1e293b;color:#818cf8; }
.admin-nav-link.active { background:#eef2ff;color:#4f46e5;font-weight:600; }
.dark .admin-nav-link.active { background:rgba(79,70,229,.15);color:#818cf8; }

/* ===== Skeleton loader ===== */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: 8px;
}
.dark .skeleton {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%;
}
@keyframes skeleton { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== Boost service card hover ===== */
#servicesList .glass-card { transition: all 0.2s ease; }
#servicesList .glass-card:hover { transform: translateY(-1px); }