/* ==========================================================================
   Bevel Mart — Modern UI Theme (design system)
   Loaded after app.min.css to override the base admin skin.
   Palette: indigo → violet gradient, emerald accents, slate surfaces.
   ========================================================================== */

:root {
  --bv-primary: #6366f1;
  --bv-primary-2: #8b5cf6;
  --bv-primary-dark: #4f46e5;
  --bv-accent: #10b981;
  --bv-warning: #f59e0b;
  --bv-danger: #ef4444;
  --bv-info: #0ea5e9;
  --bv-ink: #0f172a;
  --bv-ink-2: #1e293b;
  --bv-surface: #f1f5f9;
  --bv-card: #ffffff;
  --bv-muted: #64748b;
  --bv-border: #e2e8f0;
  --bv-radius: 14px;
  --bv-radius-sm: 10px;
  --bv-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --bv-shadow-lg: 0 24px 50px -20px rgba(15, 23, 42, 0.28);
  --bv-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --bv-grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12));
  --bv-sidebar: linear-gradient(180deg, #0f172a 0%, #1e1b4b 100%);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bv-surface);
  background-image: radial-gradient(1200px 600px at 100% 0%, rgba(99,102,241,.08), transparent 55%),
                    radial-gradient(900px 500px at 0% 100%, rgba(16,185,129,.07), transparent 55%);
  background-attachment: fixed;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
}

/* Page fade-in */
.main-content .page-content {
  animation: bvFadeUp .5s cubic-bezier(.22,.61,.36,1);
}
@keyframes bvFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Topbar ---------- */
#page-topbar {
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 0 var(--bv-border), 0 8px 24px -18px rgba(15,23,42,.25);
}

.navbar-brand-box {
  background: var(--bv-grad) !important;
  box-shadow: 0 6px 20px -6px rgba(99,102,241,.6);
}

.header-item {
  color: var(--bv-ink) !important;
  border-radius: 10px;
  transition: background .2s ease, transform .2s ease;
}
.header-item:hover { background: var(--bv-grad-soft); transform: translateY(-1px); }
.header-profile-user { border: 2px solid var(--bv-primary); }

/* ---------- Sidebar ---------- */
.vertical-menu {
  background: var(--bv-sidebar) !important;
  box-shadow: 8px 0 30px -18px rgba(15,23,42,.5);
}

.vertical-menu .menu-title {
  color: rgba(255,255,255,.45) !important;
  letter-spacing: .12em;
  font-size: .7rem;
}

#sidebar-menu ul li a {
  color: rgba(226,232,240,.82) !important;
  font-weight: 600;
  border-radius: 10px;
  margin: 2px 10px;
  padding: 10px 14px;
  transition: all .22s ease;
  position: relative;
  overflow: hidden;
}
#sidebar-menu ul li a:hover {
  color: #fff !important;
  background: rgba(139,92,246,.16);
  padding-left: 20px;
}
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
  color: #fff !important;
  background: var(--bv-grad);
  box-shadow: 0 8px 18px -8px rgba(99,102,241,.8);
}
#sidebar-menu ul li a i { color: var(--bv-primary-2); }
#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li a.active i { color: #fff; }

#sidebar-menu .sub-menu li a {
  font-size: .86rem;
  color: rgba(203,213,225,.75) !important;
}
#sidebar-menu .sub-menu li a:hover,
#sidebar-menu .sub-menu li a.active { color: #fff !important; }

/* ---------- Page title / breadcrumb ---------- */
.page-title-box {
  background: var(--bv-grad);
  border-radius: var(--bv-radius);
  padding: 18px 22px;
  color: #fff;
  margin-bottom: 22px;
  box-shadow: var(--bv-shadow);
}
.page-title-box h4 { color: #fff !important; }
.page-title-box .breadcrumb-item a,
.page-title-box .breadcrumb-item.active { color: rgba(255,255,255,.85) !important; }
.page-title-box .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--bv-border);
  border-radius: var(--bv-radius);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .22s ease, box-shadow .22s ease;
  background: var(--bv-card);
}
.card:hover { box-shadow: var(--bv-shadow); }
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--bv-border);
  font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--bv-grad); border: none; box-shadow: 0 6px 16px -6px rgba(99,102,241,.7); }
.btn-primary:hover { box-shadow: 0 10px 22px -6px rgba(99,102,241,.8); }
.btn-success { background: linear-gradient(135deg,#10b981,#059669); border: none; }
.btn-danger  { background: linear-gradient(135deg,#f43f5e,#dc2626); border: none; }
.btn-warning { background: linear-gradient(135deg,#f59e0b,#d97706); border: none; color:#fff; }
.btn-info    { background: linear-gradient(135deg,#0ea5e9,#0284c7); border: none; color:#fff; }
.btn-secondary { background: linear-gradient(135deg,#64748b,#475569); border: none; }
.btn-outline-primary { color: var(--bv-primary); border-color: var(--bv-primary); }
.btn-outline-primary:hover { background: var(--bv-grad); border-color: transparent; }

.btn-sm { border-radius: 8px; }
.btn-xs, .btn-round { border-radius: 8px !important; }

/* Ripple-ish pulse on primary action buttons */
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.btn-primary:hover::after { opacity: 1; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: #eef2ff; border-radius: var(--bv-radius-sm); }
.table thead th {
  background: var(--bv-ink-2);
  color: #fff !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .05em;
  border: none;
  padding: 12px 14px;
}
.table tbody td { border-color: var(--bv-border); vertical-align: middle; padding: 11px 14px; }
.table tbody tr { transition: background .15s ease; }

.card .table-responsive {
  border-radius: var(--bv-radius-sm);
  border: 1px solid var(--bv-border);
  overflow: hidden;
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--bv-border);
  border-radius: 8px;
  padding: 6px 10px;
}
.dataTables_wrapper .dataTables_filter input:focus { outline: 2px solid rgba(99,102,241,.35); border-color: var(--bv-primary); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--bv-grad) !important;
  border: none !important;
  border-radius: 8px;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bv-grad-soft) !important;
  border-radius: 8px;
  color: var(--bv-primary) !important;
}

/* ---------- Forms / fields ---------- */
.form-control, .form-select {
  border-radius: 10px;
  border: 1px solid var(--bv-border);
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bv-primary);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}
.form-label { font-weight: 600; color: var(--bv-ink); }

.input-group-text { border-radius: 10px; background: var(--bv-grad-soft); border: 1px solid var(--bv-border); }

/* ---------- Badges ---------- */
.badge { border-radius: 999px; padding: .45em .75em; font-weight: 600; }
.bg-success { background: linear-gradient(135deg,#10b981,#059669) !important; }
.bg-danger  { background: linear-gradient(135deg,#f43f5e,#dc2626) !important; }
.bg-warning { background: linear-gradient(135deg,#f59e0b,#d97706) !important; }
.bg-primary { background: var(--bv-grad) !important; }

/* ---------- Modals / alerts / toasts ---------- */
.modal-content { border-radius: var(--bv-radius); border: none; box-shadow: var(--bv-shadow-lg); }
.modal-header { border-bottom: 1px solid var(--bv-border); }

.alert { border-radius: var(--bv-radius-sm); border: none; }

.toast, .toast-container .toast { border-radius: var(--bv-radius-sm) !important; }

/* ---------- Footer ---------- */
.footer {
  color: var(--bv-muted);
  background: transparent;
  border-top: 1px solid var(--bv-border);
}

/* ---------- Misc: nav pills, progress, dropdowns ---------- */
.dropdown-menu { border: 1px solid var(--bv-border); border-radius: 12px; box-shadow: var(--bv-shadow); overflow: hidden; }
.dropdown-item { border-radius: 8px; margin: 2px 6px; width: auto; }
.dropdown-item:hover { background: var(--bv-grad-soft); }

.nav-pills .nav-link.active, .nav-tabs .nav-link.active { background: var(--bv-grad); color: #fff !important; border-radius: 8px; }

.progress { border-radius: 999px; background: var(--bv-border); }
.progress-bar { background: var(--bv-grad); }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cbd3; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--bv-primary); }

/* Permission-locked elements */
.permission_restricted { filter: grayscale(.3); }

/* ---------- Utility helpers ---------- */
.bv-grad-text {
  background: var(--bv-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bv-card-stat {
  border-radius: var(--bv-radius);
  padding: 18px;
  color: #fff;
  box-shadow: var(--bv-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.bv-card-stat:hover { transform: translateY(-4px); box-shadow: var(--bv-shadow-lg); }

/* ---------- Page load progress bar ---------- */
#bv-loadbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--bv-grad);
  z-index: 99999;
  transition: width .3s ease;
}

/* ---------- Scroll to top ---------- */
#bv-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000;
  width: 46px; height: 46px; border-radius: 999px; border: none;
  background: var(--bv-grad); color: #fff; font-size: 1.1rem;
  box-shadow: var(--bv-shadow-lg); cursor: pointer;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: all .25s ease;
}
#bv-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
#bv-to-top:hover { transform: translateY(-3px); }

/* ---------- Table row entrance (subtle) ---------- */
.table tbody tr { animation: bvRowIn .3s ease both; }
@keyframes bvRowIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Input focus glow already handled; add card header gradient accent ---------- */
.card .card-header::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; background: var(--bv-grad); margin-right: 8px;
}