/* ============================================================================
   VibeMyCar Admin — Theme v4
   Modern design system: glass, curves, looping animations, hover affordances,
   empty-state illustrations, skeleton loaders, responsive.
   ============================================================================ */

:root {
  /* palette */
  --vmc-red-50:#fff5f5; --vmc-red-100:#ffe3e3; --vmc-red-200:#ffc9c9;
  --vmc-red-300:#ffa8a8; --vmc-red-400:#ff8787; --vmc-red-500:#ff6b6b;
  --vmc-red-600:#fa5252; --vmc-red-700:#f03e3e; --vmc-red-800:#e03131;
  --vmc-red-900:#c92a2a;

  --vmc-gradient:          linear-gradient(135deg,#ff6b6b 0%,#ffa5a5 100%);
  --vmc-gradient-dark:     linear-gradient(135deg,#e63939 0%,#ff6b6b 100%);
  --vmc-gradient-subtle:   linear-gradient(135deg,#fff5f5 0%,#ffe3e3 100%);
  --vmc-gradient-diagonal: linear-gradient(120deg,#ff6b6b,#ff8787 30%,#ffa5a5 60%,#ffc9c9);
  --vmc-gradient-mesh:
    radial-gradient(at 20% 10%, #ffb4b4 0px, transparent 55%),
    radial-gradient(at 80% 0%,  #ff9a9e 0px, transparent 55%),
    radial-gradient(at 50% 90%, #ff6b6b 0px, transparent 55%),
    radial-gradient(at 90% 80%, #ffc9c9 0px, transparent 55%),
    linear-gradient(135deg,#ff6b6b 0%,#ffa5a5 100%);

  --vmc-shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --vmc-shadow-sm:  0 2px 4px -1px rgba(250,82,82,.06), 0 1px 2px rgba(0,0,0,.04);
  --vmc-shadow:     0 4px 12px -2px rgba(250,82,82,.10), 0 2px 4px rgba(0,0,0,.04);
  --vmc-shadow-lg:  0 14px 30px -6px rgba(250,82,82,.18), 0 8px 14px -4px rgba(0,0,0,.06);
  --vmc-shadow-xl:  0 24px 48px -10px rgba(250,82,82,.25), 0 12px 16px -6px rgba(0,0,0,.08);
  --vmc-shadow-glow:0 0 0 4px rgba(255,107,107,.15);

  --vmc-r-sm:.625rem; --vmc-r:1rem; --vmc-r-lg:1.25rem; --vmc-r-xl:1.75rem;
  --vmc-ease:cubic-bezier(.4,0,.2,1);
  --vmc-ease-smooth:cubic-bezier(.25,.8,.25,1);
  --vmc-ease-bounce:cubic-bezier(.68,-.55,.27,1.55);

  --vmc-text:#1f2937; --vmc-muted:#64748b; --vmc-faint:#94a3b8;
  --vmc-surface:#ffffff; --vmc-bg:#fafbfc; --vmc-border:#eef0f2;
}

/* ============================================================================
   base + typography
   ============================================================================ */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;
  color:var(--vmc-text); background:var(--vmc-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
}
h1,h2,h3,h4,h5,h6 { letter-spacing:-.02em; color:var(--vmc-text); }

/* decorative moving gradient underlay on the main content (subtle) */
body::before {
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(1000px 600px at 0% 0%, rgba(255,107,107,.05), transparent 50%),
    radial-gradient(800px 800px at 100% 100%, rgba(255,165,165,.04), transparent 50%);
  animation:vmc-bg-drift 30s ease-in-out infinite alternate;
}
@keyframes vmc-bg-drift {
  0%   { transform:translate(0,0); }
  100% { transform:translate(-60px,60px); }
}

/* ============================================================================
   BLUE → RED everywhere
   ============================================================================ */
.bg-primary,.btn-primary,.badge-primary,.label-primary,
.bg-info,.btn-info,.badge-info,.label-info,
[style*="background:#3563E9"i],[style*="background-color:#3563E9"i],
[style*="background:#3b82f6"i],[style*="background-color:#3b82f6"i],
[style*="background:#4285f4"i],[style*="background-color:#4285f4"i],
[style*="background:#2b80ff"i],[style*="background-color:#2b80ff"i]
{ background:var(--vmc-gradient) !important; border-color:transparent !important; color:#fff !important; }

.setting_badge,.section-badge,.form-section-title,.box-title,
.payment-tab-active,.active-pill {
  background:var(--vmc-gradient) !important; color:#fff !important;
  border:none !important; border-radius:9999px;
  padding:.4rem 1.1rem; font-weight:600; letter-spacing:.02em;
  box-shadow:var(--vmc-shadow-sm);
}
.text-primary,.text-info { color:var(--vmc-red-700) !important; }
.border-primary,.border-info { border-color:var(--vmc-red-500) !important; }

a { color:var(--vmc-red-700); transition:color .15s var(--vmc-ease); }
a:hover { color:var(--vmc-red-800); }

/* ============================================================================
   Topbar + brand
   ============================================================================ */
.topbar {
  background:var(--vmc-gradient) !important;
  box-shadow:0 4px 20px -4px rgba(250,82,82,.3);
  position:relative; overflow:hidden;
}
.topbar::after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  animation:vmc-shimmer-bar 6s linear infinite;
}
@keyframes vmc-shimmer-bar {
  0%  { transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}
.topbar .navbar-header,.navbar-header { background:var(--vmc-gradient) !important; }
.navbar-header .navbar-brand {
  padding:10px 18px !important; background:transparent !important;
  border-right:1px solid rgba(255,255,255,.18);
  transition:background .25s var(--vmc-ease);
}
.navbar-header .navbar-brand:hover { background:rgba(255,255,255,.08) !important; }
.navbar-header .navbar-brand b img {
  max-height:44px; width:auto !important;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)) brightness(1.08);
  transition:transform .4s var(--vmc-ease-bounce);
}
.navbar-header .navbar-brand:hover b img { transform:scale(1.05) rotate(-3deg); }
.navbar-brand span { color:#fff !important; font-weight:700; }

/* right-side icons */
.top-navbar .navbar-nav > li > a {
  color:#fff !important; transition:all .2s var(--vmc-ease);
}
.top-navbar .navbar-nav > li > a:hover {
  background:rgba(255,255,255,.15) !important;
  border-radius:10px; transform:translateY(-1px);
}

/* ============================================================================
   Sidebar — curves, hover slide, gradient active pill
   ============================================================================ */
.left-sidebar,#side-menu,.scroll-sidebar,.scroll-sidebar ul,.sidebar-nav,.nav-second-level {
  background:linear-gradient(180deg,#fff 0%,#fffaf9 100%) !important;
  border-right:1px solid rgba(0,0,0,.04);
}
/* force dark text */
.left-sidebar,.left-sidebar *,
#side-menu li a,#side-menu li a span,#side-menu li a b {
  color:var(--vmc-text) !important;
}
#side-menu > li { margin:3px 0; list-style:none; }
#side-menu > li > a {
  transition:all .25s var(--vmc-ease);
  border-left:3px solid transparent;
  border-radius:0 14px 14px 0;
  margin-right:10px;
  display:flex !important; align-items:center; padding:11px 18px !important;
  color:var(--vmc-text) !important; text-decoration:none;
  position:relative;
}
#side-menu > li > a::before {
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--vmc-gradient);opacity:0;
  transition:width .3s var(--vmc-ease),opacity .3s var(--vmc-ease);
  border-radius:0 14px 14px 0;
}
#side-menu > li > a:hover {
  background:var(--vmc-gradient-subtle) !important;
  color:var(--vmc-red-800) !important;
  border-left-color:var(--vmc-red-500);
  transform:translateX(3px);
}
#side-menu > li.active > a,
#side-menu > li > a.active,
#side-menu > li.selected > a {
  background:var(--vmc-gradient) !important; color:#fff !important;
  border-left-color:transparent;
  box-shadow:0 6px 16px -4px rgba(250,82,82,.4),inset 0 1px 0 rgba(255,255,255,.25);
  font-weight:600;
}
#side-menu > li.active > a::after,#side-menu > li > a.active::after {
  content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 0 10px rgba(255,255,255,.8);
  animation:vmc-pulse 2s ease-in-out infinite;
}
@keyframes vmc-pulse {
  0%,100% { opacity:1;transform:translateY(-50%) scale(1); }
  50%     { opacity:.5;transform:translateY(-50%) scale(1.4); }
}

/* submenu */
#side-menu ul.collapse,#side-menu ul.in { padding-left:14px; padding-right:10px; }
#side-menu ul.collapse li a,#side-menu ul.in li a {
  color:var(--vmc-muted) !important;
  transition:all .2s var(--vmc-ease);
  border-radius:10px; margin:3px 0; padding:7px 16px !important;
}
#side-menu ul.collapse li a:hover,#side-menu ul.in li a:hover {
  background:var(--vmc-red-50) !important; color:var(--vmc-red-800) !important;
  padding-left:20px !important;
}
#side-menu ul.collapse li.active > a,#side-menu ul.in li.active > a,
#side-menu ul a.active {
  background:var(--vmc-gradient) !important; color:#fff !important;
  box-shadow:var(--vmc-shadow);
}

/* section labels */
.nav-small-cap,.nav-label,.menu-section-label,
#side-menu li.nav-small-cap,#side-menu .nav-small-cap span {
  background:transparent !important;
  color:var(--vmc-red-600) !important;
  font-size:.7rem !important;letter-spacing:.08em;text-transform:uppercase;
  padding:20px 18px 8px !important;font-weight:700 !important;display:block !important;
}

/* active forces white */
#side-menu > li.active > a,#side-menu > li.active > a *,
#side-menu > li > a.active,#side-menu > li > a.active *,
#side-menu ul li.active > a,#side-menu ul li.active > a *,
#side-menu a.active,#side-menu a.active * { color:#fff !important; }

/* icons in sidebar */
#side-menu > li > a i {
  color:var(--vmc-red-500); margin-right:10px;
  transition:all .25s var(--vmc-ease);
  font-size:1.05rem;
}
#side-menu > li.active > a i,#side-menu > li > a.active i { color:#fff !important; transform:scale(1.1); }
#side-menu > li > a:hover i { color:var(--vmc-red-700); transform:scale(1.08); }

/* ============================================================================
   Cards / panels — glass + lift
   ============================================================================ */
.card,.box,.panel {
  border-radius:var(--vmc-r-lg);
  border:1px solid var(--vmc-border);
  box-shadow:var(--vmc-shadow-sm);
  transition:all .3s var(--vmc-ease-smooth);
  background:var(--vmc-surface);
  overflow:hidden;
}
.card:hover,.box:hover,.panel:hover {
  box-shadow:var(--vmc-shadow-lg);
  transform:translateY(-3px);
  border-color:var(--vmc-red-100);
}
.card-header,.panel-heading,.box-header {
  background:#fff !important;border-bottom:1px solid var(--vmc-border);
  font-weight:600; padding:18px 24px;
}

/* ============================================================================
   Dashboard stat cards
   ============================================================================ */
.card-box {
  background:#fff !important;
  border-left:4px solid var(--vmc-red-500);
  border-radius:var(--vmc-r-lg);
  box-shadow:var(--vmc-shadow-sm);
  transition:all .35s var(--vmc-ease-smooth);
  position:relative; padding:22px !important;
  overflow:hidden;
}
.card-box::before {
  content:'';position:absolute;top:0;right:0;width:120px;height:120px;
  background:radial-gradient(circle,rgba(255,107,107,.08) 0%,transparent 70%);
  border-radius:50%; pointer-events:none;
  transition:transform .6s var(--vmc-ease);
}
.card-box:hover {
  transform:translateY(-4px) scale(1.01);
  box-shadow:var(--vmc-shadow-xl);
  border-left-color:var(--vmc-red-700);
}
.card-box:hover::before { transform:scale(1.6) translate(-20px,20px); }
.card-box h5 { color:var(--vmc-muted); font-size:.82rem; margin-bottom:8px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; }
.card-box h2 { color:var(--vmc-text); font-weight:800; font-size:2.2rem; margin:0; letter-spacing:-.02em; }
.card-box > i {
  position:absolute !important; top:20px; right:20px;
  background:var(--vmc-gradient) !important; color:#fff !important;
  width:48px !important; height:48px !important;
  border-radius:14px !important;
  display:flex !important; align-items:center; justify-content:center;
  font-size:22px !important;
  box-shadow:0 8px 18px -4px rgba(250,82,82,.45);
  transition:transform .4s var(--vmc-ease-bounce);
}
.card-box:hover > i { transform:rotate(-12deg) scale(1.15); }

/* animated number (applied via JS data-count-up) */
.vmc-counter { font-variant-numeric:tabular-nums; }

/* ============================================================================
   Buttons — with ripple + lift + gradient hover
   ============================================================================ */
.btn {
  border-radius:var(--vmc-r-sm);
  font-weight:600; letter-spacing:.01em;
  transition:all .2s var(--vmc-ease);
  position:relative; overflow:hidden;
  padding:.5rem 1.3rem;
}
.btn:hover { transform:translateY(-1px); box-shadow:var(--vmc-shadow-lg); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-primary:hover,.btn-info:hover { background:var(--vmc-gradient-dark) !important; }
.btn-outline-primary,.btn-outline-info {
  background:transparent !important; color:var(--vmc-red-700) !important;
  border:1.5px solid var(--vmc-red-500) !important;
}
.btn-outline-primary:hover,.btn-outline-info:hover {
  background:var(--vmc-gradient) !important; color:#fff !important; border-color:transparent !important;
}
.btn::before {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:translate(-50%,-50%); pointer-events:none;
  transition:width .5s ease, height .5s ease;
}
.btn:active::before { width:300px; height:300px; transition:0s; }
.btn-success { background:linear-gradient(135deg,#51cf66,#94d82d) !important; border-color:transparent !important; }
.btn-warning { background:linear-gradient(135deg,#fcc419,#ffd43b) !important; border-color:transparent !important; color:#2d3436 !important; }
.btn-danger  { background:linear-gradient(135deg,#fa5252,#ff6b6b) !important; border-color:transparent !important; }

/* small circle action buttons in tables */
table .btn.btn-xs,.dataTable .btn.btn-xs {
  width:34px; height:34px; padding:0 !important;
  border-radius:50% !important;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s var(--vmc-ease-bounce);
}
table .btn.btn-xs:hover,.dataTable .btn.btn-xs:hover { transform:scale(1.15) rotate(5deg); }

/* ============================================================================
   Forms
   ============================================================================ */
.form-control,
.select2-container--default .select2-selection--single,
select.form-control,textarea.form-control,input[type="text"],input[type="email"],input[type="password"],input[type="number"] {
  border-radius:var(--vmc-r-sm) !important;
  border:1.5px solid var(--vmc-border) !important;
  transition:all .2s var(--vmc-ease);
  padding:10px 14px !important;
  font-size:.95rem;
}
.form-control:focus,input:focus,textarea:focus {
  border-color:var(--vmc-red-400) !important;
  box-shadow:var(--vmc-shadow-glow) !important;
  outline:0 !important;
}
label.control-label,label { font-weight:600; color:var(--vmc-text); margin-bottom:6px; font-size:.9rem; }

/* ============================================================================
   Tables — skeleton + hover + pagination
   ============================================================================ */
.table,table.dataTable {
  border-radius:var(--vmc-r) !important;
  overflow:hidden;
  border-collapse:separate !important; border-spacing:0 !important;
}
.table thead th, table.dataTable thead th {
  background:var(--vmc-gradient-subtle) !important;
  color:var(--vmc-red-800) !important;
  border-bottom:2px solid var(--vmc-red-200) !important;
  font-weight:700; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em;
  padding:16px 18px !important;
}
table.dataTable tbody tr {
  transition:all .2s var(--vmc-ease);
  border-bottom:1px solid var(--vmc-border);
}
table.dataTable tbody tr:hover {
  background:var(--vmc-red-50) !important;
  box-shadow:inset 3px 0 0 var(--vmc-red-500);
  transform:translateX(2px);
}
table.dataTable tbody td { padding:14px 18px !important; }

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color:var(--vmc-muted); font-size:.88rem; padding:10px 0;
}
.dataTables_paginate .paginate_button {
  border-radius:10px !important; margin:0 3px !important; padding:6px 12px !important;
  transition:all .2s var(--vmc-ease);
}
.dataTables_paginate .paginate_button.current {
  background:var(--vmc-gradient) !important; color:#fff !important; border:none !important;
  box-shadow:var(--vmc-shadow);
}
.dataTables_paginate .paginate_button:hover {
  background:var(--vmc-red-100) !important; color:var(--vmc-red-800) !important;
  border:1px solid var(--vmc-red-300) !important;
}

table .fa-trash,.dataTable .fa-trash,
table i.fa-trash { color:var(--vmc-red-600) !important; transition:all .15s var(--vmc-ease); }
table .fa-trash:hover { color:var(--vmc-red-800) !important; transform:scale(1.2); }
table .fa-edit,table .fa-pencil-alt { color:var(--vmc-red-500); }
table .fa-eye { color:var(--vmc-red-400); }

/* ============================================================================
   Empty state — with animated SVG illustration
   ============================================================================ */
.dataTables_empty,td.dataTables_empty {
  padding:56px 16px !important; text-align:center !important;
  color:var(--vmc-muted); font-size:1rem; font-weight:500;
}
.dataTables_empty::before {
  content:''; display:block; margin:0 auto 16px;
  width:120px; height:90px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ff6b6b' stop-opacity='.35'/><stop offset='1' stop-color='%23ffa5a5' stop-opacity='.15'/></linearGradient></defs><rect x='20' y='100' width='200' height='4' rx='2' fill='%23ffe3e3'/><circle cx='55' cy='100' r='12' fill='%23ff8787'/><circle cx='185' cy='100' r='12' fill='%23ff8787'/><path d='M40 100 Q40 70 65 70 L170 70 Q200 70 200 95 L200 100 Z' fill='url(%23g)' stroke='%23ff6b6b' stroke-width='2.5' stroke-linejoin='round'/><rect x='70' y='76' width='25' height='15' rx='3' fill='%23fff' stroke='%23ff6b6b' stroke-width='1.8'/><rect x='102' y='76' width='25' height='15' rx='3' fill='%23fff' stroke='%23ff6b6b' stroke-width='1.8'/><rect x='134' y='76' width='25' height='15' rx='3' fill='%23fff' stroke='%23ff6b6b' stroke-width='1.8'/></svg>");
  background-repeat:no-repeat; background-size:contain; background-position:center;
  animation:vmc-empty-bob 3s ease-in-out infinite;
}
@keyframes vmc-empty-bob {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-6px); }
}

/* ============================================================================
   Skeleton loader for async data
   ============================================================================ */
.skeleton {
  background:linear-gradient(90deg,#eaeef3 25%,#f6f7f9 50%,#eaeef3 75%);
  background-size:200% 100%;
  animation:vmc-shimmer 1.3s linear infinite;
  border-radius:var(--vmc-r-sm);
}
@keyframes vmc-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ============================================================================
   Modals + badges + alerts
   ============================================================================ */
.modal-content { border-radius:var(--vmc-r-lg) !important; border:none; box-shadow:var(--vmc-shadow-xl) !important; }
.modal-header {
  background:var(--vmc-gradient-subtle);
  border-top-left-radius:var(--vmc-r-lg); border-top-right-radius:var(--vmc-r-lg);
  border-bottom:1px solid var(--vmc-red-100);
}
.badge,.label { border-radius:9999px; padding:.4em .9em; font-weight:500; letter-spacing:.02em; }
.alert,.jq-toast-single {
  border-radius:var(--vmc-r-sm) !important; border:none !important;
  box-shadow:var(--vmc-shadow-lg) !important;
  animation:vmc-slide-in .35s var(--vmc-ease-bounce);
}
@keyframes vmc-slide-in { from{transform:translateX(30px);opacity:0} to{transform:translateX(0);opacity:1} }

/* scrollbar polish */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#f7fafc; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--vmc-red-300),var(--vmc-red-500)); border-radius:9999px; border:2px solid #f7fafc; }
::-webkit-scrollbar-thumb:hover { background:var(--vmc-red-500); }

/* ============================================================================
   Page-wrapper fade + accent bar on title
   ============================================================================ */
.page-wrapper,main.content,.content-wrapper {
  animation:vmc-fade-in .45s var(--vmc-ease-smooth);
}
@keyframes vmc-fade-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.page-titles,.page-title-box,.page-header {
  position:relative; padding-left:18px; margin-bottom:20px;
}
.page-titles::before,.page-title-box::before,.page-header::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:36px; background:var(--vmc-gradient);
  border-radius:3px; box-shadow:0 0 12px rgba(250,82,82,.35);
}

.breadcrumb a,.page-title-box a { color:var(--vmc-red-700) !important; font-weight:500; }
.breadcrumb a:hover { color:var(--vmc-red-800) !important; text-decoration:underline; }

/* ============================================================================
   Login — animated gradient mesh + floating orbs + glass card
   ============================================================================ */
body.auth-login,.login-register,.auth-wrapper,body:has(.login-box) {
  background:var(--vmc-gradient-mesh) !important;
  background-size:250% 250% !important;
  animation:vmc-bg-shift 20s ease infinite;
  min-height:100vh; position:relative; overflow:hidden;
}
@keyframes vmc-bg-shift {
  0%,100% { background-position:0% 50%; }
  50%     { background-position:100% 50%; }
}

/* floating orbs */
.login-register::before,.login-register::after,
.auth-wrapper::before,.auth-wrapper::after {
  content:''; position:fixed; border-radius:50%;
  filter:blur(60px); opacity:.7; pointer-events:none; z-index:0;
  animation:vmc-float 16s ease-in-out infinite;
}
.login-register::before,.auth-wrapper::before {
  width:480px; height:480px;
  background:radial-gradient(circle,#ff8787 0%,transparent 70%);
  top:-140px; left:-140px;
}
.login-register::after,.auth-wrapper::after {
  width:420px; height:420px;
  background:radial-gradient(circle,#ffd6d6 0%,transparent 70%);
  bottom:-120px; right:-120px;
  animation-delay:-8s;
}
@keyframes vmc-float {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(40px,-30px) scale(1.1); }
  66%     { transform:translate(-30px,20px) scale(.95); }
}

/* glass card */
.login-box,.auth-box,form.login-form {
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-radius:var(--vmc-r-lg) !important;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.25),var(--vmc-shadow-xl) !important;
  border:1px solid rgba(255,255,255,.6) !important;
  position:relative; z-index:1;
  animation:vmc-card-in .7s var(--vmc-ease-bounce);
  padding:32px !important;
}
@keyframes vmc-card-in {
  from { opacity:0; transform:translateY(32px) scale(.94); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* login page logo */
.login-logo,.login-logo a {
  background:transparent !important; border:none !important;
  padding:0 !important; margin-bottom:24px;
}
.login-logo img,.login-logo img.dark-logo,.login-logo img.light-logo {
  max-width:280px !important; height:auto;
  background:transparent !important;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.2));
  animation:vmc-logo-float 5s ease-in-out infinite;
}
@keyframes vmc-logo-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}
.login-register > .login-logo { margin-top:50px; position:relative; z-index:1; }
.login-register .login-box { margin-top:20px !important; }

/* ============================================================================
   Footer
   ============================================================================ */
.footer {
  background:transparent !important; color:var(--vmc-muted);
  text-align:center; padding:20px; font-size:.85rem;
  border-top:1px solid var(--vmc-border);
}

/* ============================================================================
   Mobile responsiveness
   ============================================================================ */
.nav-toggler,.sidebartoggler {
  color:#fff !important; transition:all .25s var(--vmc-ease);
  padding:8px 12px; border-radius:8px;
}
.nav-toggler:hover,.sidebartoggler:hover {
  background:rgba(255,255,255,.15); transform:rotate(90deg);
}
@media (max-width:991px) {
  .left-sidebar { transition:transform .3s var(--vmc-ease); box-shadow:var(--vmc-shadow-xl); }
}
@media (max-width:767px) {
  .card,.box { border-radius:var(--vmc-r); }
  .card-box h2 { font-size:1.6rem; }
  .card-box > i { width:38px !important; height:38px !important; font-size:16px !important; }
  .page-titles,.page-title-box,.page-header { padding-left:14px; }
  table.dataTable tbody td,table.dataTable thead th { padding:10px 12px !important; }
}

/* ============================================================================
   Accessibility — reduced motion
   ============================================================================ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================================
   Utilities
   ============================================================================ */
.rounded-vmc { border-radius:var(--vmc-r-lg) !important; }
.shadow-vmc  { box-shadow:var(--vmc-shadow) !important; }
.bg-vmc-gradient { background:var(--vmc-gradient) !important; }