/* ==========================================================================
   VidaPlena Theme — Brand colors + Bootstrap 5
   --------------------------------------------------------------------------
   Paleta extraída de https://vidaplena-mx.com/:
     #789904  Verde olivo (primario)
     #809927  Verde hover
     #DB5E50  Coral (acento / CTA secundario)
     #e02b20  Coral hover
     #faf7f7  Fondo cálido
     #5a5a5a  Texto principal
     #151316  Texto oscuro
   Tipografía: Poppins (sans) + JetBrains Mono (datos/código)
   ========================================================================== */

:root {
  --vp-green:        #789904;
  --vp-green-hover:  #809927;
  --vp-green-dark:   #5a7403;
  --vp-coral:        #DB5E50;
  --vp-coral-hover:  #e02b20;
  --vp-canvas:       #ffffff;
  --vp-surface-soft: #faf7f7;
  --vp-surface-card: #f4f0f0;
  --vp-surface-dark: #151316;
  --vp-surface-dark-e: #2a2528;
  --vp-ink:          #5a5a5a;
  --vp-ink-deep:     #151316;
  --vp-body:         #6c757d;
  --vp-mute:         #9a9898;
  --vp-hairline:     rgba(0,0,0,0.08);
  --vp-hairline-strong: rgba(0,0,0,0.15);
  --vp-radius-sm:    8px;
  --vp-radius:       12px;
  --vp-radius-lg:    16px;
  --vp-font-sans: "Poppins", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --vp-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --vp-font-data: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --- Base ------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  background: var(--vp-surface-soft) !important;
  color: var(--vp-ink) !important;
  font-family: var(--vp-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--vp-font-sans) !important;
  color: var(--vp-ink-deep) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1rem !important; font-weight: 600 !important; }
h6 { font-size: 0.875rem !important; font-weight: 600 !important; }

a { color: var(--vp-green) !important; text-decoration: none; }
a:hover { color: var(--vp-green-hover) !important; text-decoration: underline; }

input, textarea, select, button { font-family: var(--vp-font-sans) !important; }
code, pre, .font-mono { font-family: var(--vp-font-mono) !important; }

/* --- Navbar (header) ------------------------------------------------- */
.navbar-inverse {
  background: var(--vp-canvas) !important;
  border: none !important;
  border-bottom: 3px solid var(--vp-green) !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  height: 64px !important;
  min-height: 64px !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
}
.navbar-inverse .navbar-inner {
  background: var(--vp-canvas) !important;
  height: 64px !important;
  min-height: 64px !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 1.5rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none !important;
  box-shadow: none !important;
}
.navbar-inverse .brand {
  color: var(--vp-green) !important;
  font-family: var(--vp-font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  text-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 64px !important;
  text-decoration: none !important;
}
.navbar-inverse .brand::before {
  content: none !important; /* eliminamos el cuadrado verde, ahora hay logo */
}
.navbar-inverse .brand img {
  height: 40px !important;
  width: auto !important;
}
.navbar-inverse .nav > li > a {
  color: var(--vp-ink) !important;
  text-shadow: none !important;
  font-family: var(--vp-font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border-radius: var(--vp-radius-sm);
  transition: all 0.2s ease;
}
.navbar-inverse .nav > li > a:hover {
  color: var(--vp-green) !important;
  background: var(--vp-surface-soft) !important;
}
.dropdown-menu {
  background: var(--vp-canvas) !important;
  border: 1px solid var(--vp-hairline-strong) !important;
  border-radius: var(--vp-radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  margin-top: 8px !important;
  padding: 0.5rem 0 !important;
}
.dropdown-menu > li > a {
  color: var(--vp-ink) !important;
  font-family: var(--vp-font-sans) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1.25rem !important;
  transition: all 0.15s ease;
}
.dropdown-menu > li > a:hover { background: var(--vp-surface-soft) !important; color: var(--vp-green) !important; }
.caret { border-top-color: var(--vp-ink) !important; }

/* --- Sidebar / Menu --------------------------------------------------- */
/* Sticky dentro del body: scrollea con la página hasta que llega al top
   del viewport, entonces se pega. Como el navbar es fixed top:0 con 64px
   de alto, el sidebar se pega en top:64px. */
#sidebar-nav {
  background: var(--vp-canvas) !important;
  border-right: 1px solid var(--vp-hairline) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.04) !important;
  width: 240px !important;
  position: sticky !important;
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  float: left !important;
  overflow-y: auto !important;
  z-index: 100;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
#dashboard-menu { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#dashboard-menu > li { border: none !important; background: transparent !important; position: relative !important; }
#dashboard-menu > li > a {
  background: transparent !important;
  color: var(--vp-ink) !important;
  font-family: var(--vp-font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0.7rem 1.25rem !important;
  border: none !important;
  border-bottom: none !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  text-shadow: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-decoration: none !important;
  outline: none !important;
  transition: all 0.2s ease;
}
#dashboard-menu > li > a:hover {
  background: var(--vp-surface-soft) !important;
  color: var(--vp-green) !important;
  border-left-color: var(--vp-green) !important;
  text-decoration: none !important;
}
#dashboard-menu > li > a i {
  color: var(--vp-mute) !important;
  font-size: 1rem !important;
  width: 18px !important;
  text-align: center !important;
  position: static !important;
  opacity: 1 !important;
  transition: color 0.2s;
}
#dashboard-menu > li > a:hover i { color: var(--vp-green) !important; }
#dashboard-menu > li > a span {
  color: inherit !important;
  margin-left: 0 !important;
  transition: color 0.1s linear;
}
#dashboard-menu > li > a .icon-chevron-down { margin-left: auto !important; font-size: 0.65rem !important; }
#dashboard-menu .pointer { display: none !important; }
#dashboard-menu .submenu {
  background: var(--vp-surface-soft) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
#dashboard-menu .submenu li a {
  background: transparent !important;
  color: var(--vp-body) !important;
  font-family: var(--vp-font-sans) !important;
  font-size: 0.8125rem !important;
  padding: 0.5rem 1.25rem 0.5rem 3.5rem !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  transition: all 0.15s ease;
}
#dashboard-menu .submenu li a:hover {
  background: var(--vp-surface-card) !important;
  color: var(--vp-green) !important;
  border-left-color: var(--vp-coral) !important;
  text-decoration: none !important;
}

/* --- Content area ---------------------------------------------------- */
/* El navbar es fixed, así que el body necesita padding-top:64px.
   El sidebar es sticky (scrollea con el contenido) y float:left, así que
   .content usa margin-left:240px para no superponerse. */
body { padding-top: 64px !important; }
.content {
  background: var(--vp-surface-soft) !important;
  margin-left: 240px !important;
  padding: 2rem !important;
  min-height: calc(100vh - 64px);
}
.container-fluid { max-width: 1320px; margin: 0 auto; padding: 0 !important; }

/* --- Section (card) --------------------------------------------------- */
.section {
  background: var(--vp-canvas) !important;
  border: 1px solid var(--vp-hairline) !important;
  border-radius: var(--vp-radius) !important;
  padding: 1.75rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.row-fluid.head { margin-bottom: 1.5rem !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.row-fluid.head h3 { margin: 0 !important; font-size: 1.5rem !important; font-weight: 700 !important; }
.sitemap { font-size: 0.8125rem !important; color: var(--vp-mute) !important; padding: 0.5rem 0 !important; }
.sitemap a { color: var(--vp-green) !important; font-weight: 500; }
.sitemap span { color: var(--vp-mute) !important; padding: 0 0.3rem; }

/* --- Tables ---------------------------------------------------------- */
.table {
  background: var(--vp-canvas) !important;
  border: none !important;
  border-radius: var(--vp-radius) !important;
  overflow: hidden;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.table th {
  background: var(--vp-surface-soft) !important;
  color: var(--vp-ink-deep) !important;
  font-family: var(--vp-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
  border-bottom: 2px solid var(--vp-green) !important;
  padding: 0.875rem 1rem !important;
  white-space: nowrap;
}
.table td {
  border: none !important;
  border-bottom: 1px solid var(--vp-hairline) !important;
  padding: 0.75rem 1rem !important;
  vertical-align: middle !important;
  color: var(--vp-ink) !important;
  font-size: 0.875rem !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr { transition: background 0.15s ease; }
.table-striped tbody tr:nth-of-type(odd) td { background: var(--vp-canvas) !important; }
.table-striped tbody tr:nth-of-type(even) td { background: var(--vp-surface-soft) !important; }
.table-hover tbody tr:hover td { background: var(--vp-surface-card) !important; }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--vp-hairline) !important; }

/* --- Buttons --------------------------------------------------------- */
.btn, .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-inverse {
  border-radius: var(--vp-radius-sm) !important;
  font-family: var(--vp-font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  padding: 0.5rem 1.25rem !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all 0.2s ease;
  border: 1px solid transparent !important;
}
.btn { background: var(--vp-canvas) !important; color: var(--vp-ink) !important; border-color: var(--vp-hairline-strong) !important; }
.btn:hover { background: var(--vp-surface-soft) !important; color: var(--vp-green) !important; border-color: var(--vp-green) !important; }
.btn-primary { background: var(--vp-green) !important; color: #fff !important; border-color: var(--vp-green) !important; }
.btn-primary:hover { background: var(--vp-green-hover) !important; border-color: var(--vp-green-hover) !important; color: #fff !important; }
.btn-success { background: var(--vp-green) !important; color: #fff !important; border-color: var(--vp-green) !important; }
.btn-success:hover { background: var(--vp-green-hover) !important; border-color: var(--vp-green-hover) !important; }
.btn-danger { background: var(--vp-coral) !important; color: #fff !important; border-color: var(--vp-coral) !important; }
.btn-danger:hover { background: var(--vp-coral-hover) !important; border-color: var(--vp-coral-hover) !important; }
.btn-warning { background: #ffc107 !important; color: #151316 !important; border-color: #ffc107 !important; }
.btn-warning:hover { background: #ffb300 !important; }
.btn-info { background: #0dcaf0 !important; color: #151316 !important; border-color: #0dcaf0 !important; }
.btn-info:hover { background: #0bb8d9 !important; }
.btn-inverse { background: var(--vp-surface-dark) !important; color: #fff !important; border-color: var(--vp-surface-dark) !important; }
.btn-inverse:hover { background: var(--vp-surface-dark-e) !important; }
.btn-mini { font-size: 0.6875rem !important; padding: 0.25rem 0.625rem !important; }
.btn-sm { font-size: 0.75rem !important; }
.btn:active, .btn:focus { transform: translateY(1px); box-shadow: none !important; }
.btn-glow { box-shadow: none !important; border-radius: var(--vp-radius-sm) !important; }

/* --- Forms / Inputs -------------------------------------------------- */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="tel"], input[type="date"], input[type="search"], textarea, select {
  background: var(--vp-canvas) !important;
  color: var(--vp-ink-deep) !important;
  border: 1px solid var(--vp-hairline-strong) !important;
  border-radius: var(--vp-radius-sm) !important;
  font-family: var(--vp-font-sans) !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 0.875rem !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
  height: 42px !important;
  width: auto;
}
input:focus, textarea:focus, select:focus {
  background: var(--vp-canvas) !important;
  border-color: var(--vp-green) !important;
  box-shadow: 0 0 0 3px rgba(120,153,4,0.12) !important;
  outline: none !important;
}
textarea { height: auto !important; min-height: 80px; }
label { font-family: var(--vp-font-sans) !important; font-weight: 500 !important; font-size: 0.8125rem !important; color: var(--vp-ink-deep) !important; margin-bottom: 0.375rem !important; }
.required { color: var(--vp-coral) !important; }

/* --- Alerts --------------------------------------------------------- */
.alert {
  border: none !important;
  border-radius: var(--vp-radius-sm) !important;
  font-family: var(--vp-font-sans) !important;
  font-size: 0.875rem !important;
  padding: 1rem 1.25rem !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin-bottom: 1rem !important;
  border-left: 4px solid;
}
.alert-success { background: #d4edda !important; color: #155724 !important; border-left-color: #198754 !important; }
.alert-error, .alert-danger { background: #f8d7da !important; color: #842029 !important; border-left-color: var(--vp-coral) !important; }
.alert-info, .alert-information { background: #d1ecf1 !important; color: #0c5460 !important; border-left-color: #0dcaf0 !important; }

/* --- Labels / Badges ------------------------------------------------- */
.label, .badge {
  font-family: var(--vp-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  padding: 0.25em 0.6em !important;
  border-radius: var(--vp-radius-sm) !important;
  text-shadow: none !important;
  border: none !important;
}
.label-success { background: var(--vp-green) !important; color: #fff !important; }
.label-important, .label-danger { background: var(--vp-coral) !important; color: #fff !important; }
.label-warning { background: #ffc107 !important; color: #151316 !important; }
.label-info { background: #0dcaf0 !important; color: #151316 !important; }
.label-inverse { background: var(--vp-surface-dark) !important; color: #fff !important; }
.label-primary { background: var(--vp-green) !important; color: #fff !important; }
.badge-success { background: var(--vp-green) !important; color: #fff !important; }
.badge-important { background: var(--vp-coral) !important; color: #fff !important; }

/* --- Main stats dashboard -------------------------------------------- */
#main-stats {
  background: var(--vp-canvas) !important;
  border: 1px solid var(--vp-hairline) !important;
  border-radius: var(--vp-radius) !important;
  margin: 0 0 1.5rem 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
#main-stats .stats-row { box-shadow: none !important; display: flex; }
#main-stats .stat {
  border-right: 1px solid var(--vp-hairline) !important;
  border-bottom: 1px solid var(--vp-hairline) !important;
  box-shadow: none !important;
  padding: 1.75rem 1.5rem !important;
  text-align: left !important;
  flex: 1;
}
#main-stats .stat:last-child { border-right: none !important; }
#main-stats .stat .data {
  color: var(--vp-body) !important;
  text-transform: none !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  padding-right: 0 !important;
  font-family: var(--vp-font-sans) !important;
}
#main-stats .stat .data .number {
  color: var(--vp-green) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  margin-right: 0.5rem !important;
  font-family: var(--vp-font-mono) !important;
  display: block;
  margin-bottom: 0.25rem;
}

/* --- DataTables ------------------------------------------------------ */
.dataTables_wrapper { font-family: var(--vp-font-sans) !important; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
  font-size: 0.8125rem !important; color: var(--vp-body) !important; padding: 0.5rem !important;
}
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--vp-hairline-strong) !important;
  border-radius: var(--vp-radius-sm) !important;
  background: var(--vp-canvas) !important;
  margin-left: 0.5rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--vp-hairline) !important;
  border-radius: var(--vp-radius-sm) !important;
  background: var(--vp-canvas) !important;
  color: var(--vp-ink) !important;
  margin: 0 2px !important;
  padding: 0.375rem 0.625rem !important;
  font-size: 0.8125rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--vp-green) !important; color: #fff !important; border-color: var(--vp-green) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--vp-surface-soft) !important; color: var(--vp-green) !important;
}

/* --- Login page ------------------------------------------------------ */
body:has(.login-wrapper) {
  margin: 0 !important; padding: 0 !important; overflow: hidden !important;
}
.row-fluid.login-wrapper {
  position: static !important; top: auto !important;
  background: var(--vp-surface-soft) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  min-height: 100dvh !important; padding: 2rem !important; margin: 0 !important;
  box-sizing: border-box !important; overflow: hidden !important;
}
.login-wrapper .logo { margin: 0 0 2rem 0 !important; position: static !important; left: auto !important; max-width: 320px; }
.login-wrapper .box {
  background: var(--vp-canvas) !important;
  border: none !important;
  border-radius: var(--vp-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
  width: 100% !important; max-width: 420px !important;
  float: none !important; margin: 0 auto !important;
  padding: 2.5rem !important;
  box-sizing: border-box !important;
}
.login-wrapper .content-wrap { width: 100% !important; margin: 0 !important; }
.login-wrapper h6 { color: var(--vp-ink-deep) !important; font-size: 1.25rem !important; font-weight: 700 !important; margin-bottom: 1.5rem !important; text-transform: none !important; font-family: var(--vp-font-sans) !important; }
.login-wrapper input[type="text"], .login-wrapper input[type="password"] {
  width: 100% !important; margin-bottom: 0.875rem !important;
  background: var(--vp-surface-soft) !important;
  border: 1px solid var(--vp-hairline-strong) !important;
  border-radius: var(--vp-radius-sm) !important;
  padding: 0.75rem 1rem !important; height: 48px !important; font-size: 0.9375rem !important;
  font-family: var(--vp-font-sans) !important;
}
.login-wrapper input:focus { border-color: var(--vp-green) !important; box-shadow: 0 0 0 3px rgba(120,153,4,0.12) !important; }
.login-wrapper .forgot { font-size: 0.8125rem !important; color: var(--vp-mute) !important; display: inline-block !important; margin-bottom: 1rem !important; font-style: normal !important; }
.login-wrapper .btn-glow, .login-wrapper .btn-glow.primary {
  background: var(--vp-green) !important; color: #fff !important;
  border: none !important; border-radius: var(--vp-radius-sm) !important;
  box-shadow: none !important; font-family: var(--vp-font-sans) !important;
  font-weight: 600 !important; font-size: 0.9375rem !important;
  padding: 0.75rem 1.5rem !important; width: 100% !important;
  text-shadow: none !important; text-transform: none !important;
  transition: all 0.2s ease;
}
.login-wrapper .btn-glow:hover { background: var(--vp-green-hover) !important; transform: translateY(-1px); }

/* --- Nav tabs -------------------------------------------------------- */
.nav-tabs { border-bottom: 2px solid var(--vp-hairline) !important; margin-bottom: 1.25rem !important; }
.nav-tabs > li { margin-bottom: -2px !important; border: none !important; }
.nav-tabs > li > a {
  background: transparent !important; color: var(--vp-mute) !important;
  font-family: var(--vp-font-sans) !important; font-size: 0.875rem !important; font-weight: 500 !important;
  border: none !important; border-radius: 0 !important;
  padding: 0.75rem 1.25rem !important; text-shadow: none !important; text-decoration: none !important;
  border-bottom: 2px solid transparent !important; transition: all 0.2s ease;
}
.nav-tabs > li > a:hover { background: transparent !important; color: var(--vp-green) !important; border-color: transparent !important; border-bottom-color: var(--vp-green) !important; }
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
  background: transparent !important; color: var(--vp-green) !important;
  border: none !important; border-bottom: 2px solid var(--vp-green) !important;
}
.nav-tabs .badge { margin-left: 0.5rem; }
.tab-content { padding-top: 1rem; }
.tab-pane { background: transparent !important; }

/* --- Modals ---------------------------------------------------------- */
.modal-content { border: none !important; border-radius: var(--vp-radius) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.16) !important; }
.modal-header { border-bottom: 1px solid var(--vp-hairline) !important; padding: 1.25rem 1.5rem !important; }
.modal-header h3 { font-size: 1.125rem !important; color: var(--vp-ink-deep) !important; font-family: var(--vp-font-sans) !important; }
.modal-header .close { color: var(--vp-mute) !important; opacity: 0.6 !important; text-shadow: none !important; font-size: 1.5rem !important; }
.modal-body { padding: 1.5rem !important; }
.modal-footer { border-top: 1px solid var(--vp-hairline) !important; padding: 1rem 1.5rem !important; box-shadow: none !important; }
.modal-footer .btn { margin-left: 0.5rem !important; }
.modal-backdrop, .modal-backdrop.fade { background: var(--vp-ink-deep) !important; opacity: 0.4 !important; }

/* --- Form horizontal ------------------------------------------------- */
.form-horizontal .control-group { margin-bottom: 1rem !important; }
.form-horizontal .control-label { width: 200px !important; text-align: left !important; padding-top: 0.5rem !important; }
.form-horizontal .controls { margin-left: 220px !important; }

/* --- Misc ------------------------------------------------------------- */
hr { border: none !important; border-top: 1px solid var(--vp-hairline) !important; margin: 1.5rem 0 !important; }
.big-icon, .icon-big { font-size: 1rem !important; color: var(--vp-mute); }
input[disabled], input[readonly], select[disabled], textarea[disabled] { background: var(--vp-surface-card) !important; color: var(--vp-mute) !important; }
.form-horizontal .control-label { font-family: var(--vp-font-sans) !important; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 991px) {
  .content { margin-left: 0 !important; padding: 1rem !important; }
  #sidebar-nav { display: none !important; }
  .form-horizontal .control-label { width: 100% !important; }
  .form-horizontal .controls { margin-left: 0 !important; }
}
@media (max-width: 767px) {
  .login-wrapper { padding: 1rem !important; }
  .login-wrapper .box { max-width: 100% !important; padding: 1.5rem !important; }
  #main-stats .stats-row { flex-direction: column; }
  #main-stats .stat { border-right: none !important; border-bottom: 1px solid var(--vp-hairline) !important; }
}