/* =========================================================
   MiStock — Premium Design System v2.0
   Fuente: Inter | Glassmorphism | Soft Shadows | Micro-animations
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ----- Variables (Premium Tokens) ---------------------------------------- */
:root {
  /* Brand Colors */
  --ms-primary:       #4F46E5; /* Indigo 600 */
  --ms-primary-hover: #4338CA; /* Indigo 700 */
  --ms-primary-light: #818CF8; /* Indigo 400 */
  --ms-primary-alpha: rgba(79, 70, 229, 0.1);
  --ms-secondary:     #0EA5E9; /* Sky 500 */
  
  /* Semantic Colors */
  --ms-success:       #10B981; /* Emerald 500 */
  --ms-success-alpha: rgba(16, 185, 129, 0.1);
  --ms-warning:       #F59E0B; /* Amber 500 */
  --ms-warning-alpha: rgba(245, 158, 11, 0.1);
  --ms-danger:        #EF4444; /* Red 500 */
  --ms-danger-alpha:  rgba(239, 68, 68, 0.1);
  --ms-info:          #3B82F6; /* Blue 500 */
  --ms-info-alpha:    rgba(59, 130, 246, 0.1);

  /* Backgrounds & Surfaces */
  --ms-bg-app:        #F8FAFC; /* Slate 50 */
  --ms-bg-surface:    #FFFFFF;
  --ms-bg-sidebar:    #0F172A; /* Slate 900 */
  --ms-bg-sidebar-hover: rgba(255, 255, 255, 0.05);
  
  /* Text Colors */
  --ms-text-primary:  #0F172A; /* Slate 900 */
  --ms-text-secondary:#475569; /* Slate 600 */
  --ms-text-muted:    #94A3B8; /* Slate 400 */
  --ms-text-inverse:  #F8FAFC;
  
  /* Borders */
  --ms-border-light:  #E2E8F0; /* Slate 200 */
  --ms-border-medium: #CBD5E1; /* Slate 300 */
  --ms-border-focus:  #818CF8; /* Indigo 400 */
  
  /* Shadows - Premium Soft Shadows */
  --ms-shadow-sm:     0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ms-shadow-md:     0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --ms-shadow-lg:     0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  --ms-shadow-xl:     0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --ms-shadow-focus:  0 0 0 3px rgba(79, 70, 229, 0.2);
  
  /* Geometry */
  --ms-radius-sm:     0.375rem;
  --ms-radius-md:     0.5rem;
  --ms-radius-lg:     0.75rem;
  --ms-radius-xl:     1rem;
  --ms-radius-pill:   9999px;
  
  /* Transitions */
  --ms-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ms-transition-norm: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Base Typography & Resets ---------------------------------- */
*, body, html,
.content-wrapper,
.box, .box-header,
.nav, .navbar, .sidebar,
h1, h2, h3, h4, h5, h6,
p, span, div, a, td, th, label,
.btn, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fix Font Awesome */
.fa, .fas, .far, .fal, .fab,
.fa::before, .fas::before, .far::before, .fal::before, .fab::before {
  font-family: "Font Awesome 5 Free" !important;
}
.fab, .fab::before {
  font-family: "Font Awesome 5 Brands" !important;
}

body, .content-wrapper {
  background-color: var(--ms-bg-app) !important;
  color: var(--ms-text-primary) !important;
}

/* ----- Sidebar (Premium Glass & Dark Mode) -------------------------------- */
.side-bar {
  background-color: var(--ms-bg-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
}

/* Logo Area */
.side-bar > a:first-child,
.side-bar-heading,
.side-bar .side-bar-logo-area {
  background: linear-gradient(135deg, var(--ms-primary) 0%, #312E81 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  position: relative;
}
.side-bar-heading {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-size: 1rem !important;
}

/* Sidebar Menu Items */
.side-bar ul.sidebar-menu,
.side-bar .nav-sidebar {
  padding: 1rem 0 !important;
}

.side-bar ul.sidebar-menu > li.header,
.side-bar .nav-sidebar .nav-header {
  color: var(--ms-text-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 1.5rem 1.25rem 0.5rem !important;
  background: transparent !important;
}

.side-bar ul.sidebar-menu > li > a,
.side-bar .nav-sidebar > li > a {
  color: #CBD5E1 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.6rem 1rem 0.6rem 1.25rem !important;
  border-radius: var(--ms-radius-md) !important;
  margin: 0.15rem 0.75rem !important;
  transition: all var(--ms-transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: transparent !important;
}

.side-bar ul.sidebar-menu > li > a:hover,
.side-bar .nav-sidebar > li > a:hover {
  color: #FFFFFF !important;
  background-color: var(--ms-bg-sidebar-hover) !important;
  transform: translateX(4px);
}

/* Active Menu Item */
.side-bar ul.sidebar-menu > li.active > a,
.side-bar ul.sidebar-menu > li.menu-open > a,
.side-bar .nav-sidebar > li.active > a {
  color: #FFFFFF !important;
  background-color: var(--ms-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.4) !important;
}

/* Sidebar Icons */
.side-bar ul.sidebar-menu > li > a > i,
.side-bar .nav-sidebar > li > a > i {
  font-size: 1.1rem !important;
  width: 1.25rem !important;
  text-align: center;
  color: inherit !important;
  opacity: 0.9 !important;
}

/* Sub-menus */
.side-bar ul.sidebar-menu > li > ul.treeview-menu,
.side-bar .nav-sidebar .nav-treeview {
  background-color: rgba(0, 0, 0, 0.15) !important;
  padding: 0.5rem 0 !important;
  margin: 0.25rem 0.75rem !important;
  border-radius: var(--ms-radius-md) !important;
  border-left: 2px solid rgba(255, 255, 255, 0.05);
}

.side-bar ul.sidebar-menu > li > ul.treeview-menu > li > a {
  color: #94A3B8 !important;
  font-size: 0.8125rem !important;
  padding: 0.5rem 1rem 0.5rem 2rem !important;
  border-radius: var(--ms-radius-sm) !important;
  margin: 0.1rem 0.5rem !important;
  transition: all var(--ms-transition-fast) !important;
}

.side-bar ul.sidebar-menu > li > ul.treeview-menu > li.active > a,
.side-bar ul.sidebar-menu > li > ul.treeview-menu > li > a:hover {
  color: #FFFFFF !important;
  background-color: rgba(255,255,255,0.08) !important;
}

/* ----- Boxes / Cards (Soft Shadows & Clean Borders) ---------------------- */
.box {
  border-radius: var(--ms-radius-lg) !important;
  border: 1px solid var(--ms-border-light) !important;
  box-shadow: var(--ms-shadow-sm) !important;
  background-color: var(--ms-bg-surface) !important;
  transition: box-shadow var(--ms-transition-norm) !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden;
}

.box:hover {
  box-shadow: var(--ms-shadow-md) !important;
}

.box-header {
  background-color: var(--ms-bg-surface) !important;
  border-bottom: 1px solid var(--ms-border-light) !important;
  padding: 1.25rem 1.5rem !important;
}

.box-header .box-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--ms-text-primary) !important;
  letter-spacing: -0.01em !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.box-body {
  padding: 1.5rem !important;
}

.box.box-solid {
  border-top: none !important;
}

/* ----- Buttons (Interactive & Vibrant) ----------------------------------- */
.btn {
  border-radius: var(--ms-radius-md) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1.25rem !important;
  transition: all var(--ms-transition-fast) !important;
  letter-spacing: 0.01em !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid transparent !important;
}

.btn:active {
  transform: scale(0.97);
}

.btn:focus {
  outline: none !important;
  box-shadow: var(--ms-shadow-focus) !important;
}

.btn-primary, .btn-info {
  background-color: var(--ms-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2) !important;
}
.btn-primary:hover, .btn-info:hover {
  background-color: var(--ms-primary-hover) !important;
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3) !important;
}

.btn-default {
  background-color: #fff !important;
  border-color: var(--ms-border-medium) !important;
  color: var(--ms-text-primary) !important;
  box-shadow: var(--ms-shadow-sm) !important;
}
.btn-default:hover {
  background-color: #F1F5F9 !important;
  border-color: #94A3B8 !important;
}

.btn-success {
  background-color: var(--ms-success) !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: #059669 !important; /* Emerald 600 */
}

.btn-danger {
  background-color: var(--ms-danger) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #DC2626 !important; /* Red 600 */
}

.btn-warning {
  background-color: var(--ms-warning) !important;
  color: #fff !important;
}
.btn-warning:hover {
  background-color: #D97706 !important; /* Amber 600 */
}

.btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8125rem !important;
  border-radius: var(--ms-radius-sm) !important;
}

.btn-xs {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  border-radius: var(--ms-radius-sm) !important;
}

/* ----- Tables (Clean & Readable) --------------------------------------- */
.table {
  font-size: 0.875rem !important;
  color: var(--ms-text-primary) !important;
  margin-bottom: 0 !important;
}

.table > thead > tr > th {
  background-color: #F8FAFC !important; /* Slate 50 */
  color: var(--ms-text-secondary) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--ms-border-light) !important;
  border-top: none !important;
  padding: 0.75rem 1rem !important;
  white-space: nowrap !important;
}

.table > tbody > tr > td {
  border-color: var(--ms-border-light) !important;
  padding: 0.875rem 1rem !important;
  vertical-align: middle !important;
  color: var(--ms-text-primary) !important;
  transition: background-color var(--ms-transition-fast);
}

.table-hover > tbody > tr:hover > td {
  background-color: #F1F5F9 !important; /* Slate 100 */
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #F8FAFC !important;
}

/* DataTables specifics */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ms-border-medium) !important;
  border-radius: var(--ms-radius-md) !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: var(--ms-text-primary) !important;
  outline: none !important;
  transition: all var(--ms-transition-fast) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ms-primary) !important;
  box-shadow: var(--ms-shadow-focus) !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ms-border-medium) !important;
  border-radius: var(--ms-radius-md) !important;
  padding: 0.375rem 2rem 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.875rem !important;
  color: var(--ms-text-secondary) !important;
  margin-top: 1rem !important;
}

.dataTables_wrapper .dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.25rem !important;
  flex-wrap: wrap !important;
  margin-top: 1rem !important;
}

.dataTables_wrapper .dataTables_paginate span {
  display: flex !important;
  gap: 0.25rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ms-radius-md) !important;
  border: 1px solid var(--ms-border-light) !important;
  background: var(--ms-bg-surface) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.875rem !important;
  margin: 0 !important;
  transition: all var(--ms-transition-fast) !important;
  cursor: pointer !important;
  color: var(--ms-text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #F1F5F9 !important;
  border-color: var(--ms-border-medium) !important;
  color: var(--ms-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ms-primary) !important;
  border-color: var(--ms-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2) !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.5 !important;
  cursor: default !important;
  background: var(--ms-bg-app) !important;
  color: var(--ms-text-muted) !important;
  border-color: var(--ms-border-light) !important;
}

/* ----- Forms (Modern Inputs) ------------------------------------------- */
.form-control {
  border: 1px solid var(--ms-border-medium) !important;
  border-radius: var(--ms-radius-md) !important;
  font-size: 0.875rem !important;
  color: var(--ms-text-primary) !important;
  padding: 0.5rem 0.75rem !important;
  background-color: var(--ms-bg-surface) !important;
  transition: all var(--ms-transition-fast) !important;
  box-shadow: var(--ms-shadow-sm) inset !important;
  min-height: 38px;
}
.form-control:focus {
  border-color: var(--ms-primary) !important;
  box-shadow: var(--ms-shadow-focus) !important;
  outline: none !important;
}

.input-group-addon {
  background-color: #F8FAFC !important;
  border: 1px solid var(--ms-border-medium) !important;
  border-radius: var(--ms-radius-md) !important;
  color: var(--ms-text-secondary) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--ms-border-medium) !important;
  border-radius: var(--ms-radius-md) !important;
  font-size: 0.875rem !important;
  min-height: 38px !important;
  background-color: var(--ms-bg-surface) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
  color: var(--ms-text-primary) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
}
.select2-container--focus .select2-selection {
  border-color: var(--ms-primary) !important;
  box-shadow: var(--ms-shadow-focus) !important;
}

/* ----- Badges & Labels (Pill-style) ------------------------------------ */
.label, .badge {
  border-radius: var(--ms-radius-pill) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.75rem !important;
  letter-spacing: 0.02em !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.label-primary, .badge-primary { background-color: var(--ms-primary-alpha) !important; color: var(--ms-primary) !important; border: 1px solid rgba(79, 70, 229, 0.2); }
.label-success, .badge-success { background-color: var(--ms-success-alpha) !important; color: var(--ms-success) !important; border: 1px solid rgba(16, 185, 129, 0.2); }
.label-danger, .badge-danger   { background-color: var(--ms-danger-alpha) !important; color: var(--ms-danger) !important; border: 1px solid rgba(239, 68, 68, 0.2); }
.label-warning, .badge-warning { background-color: var(--ms-warning-alpha) !important; color: var(--ms-warning) !important; border: 1px solid rgba(245, 158, 11, 0.2); }
.label-info, .badge-info       { background-color: var(--ms-info-alpha) !important; color: var(--ms-info) !important; border: 1px solid rgba(59, 130, 246, 0.2); }

/* ----- Breadcrumbs & Page Header --------------------------------------- */
.content-header {
  background: transparent !important;
  padding: 1.5rem 1.5rem 0.5rem !important;
}

.content-header > h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--ms-text-primary) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.content-header > h1 > small {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--ms-text-muted) !important;
}

.breadcrumb {
  background: transparent !important;
  font-size: 0.875rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
.breadcrumb > li > a {
  color: var(--ms-text-secondary) !important;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: color var(--ms-transition-fast);
}
.breadcrumb > li > a:hover {
  color: var(--ms-primary) !important;
}
.breadcrumb > .active {
  color: var(--ms-text-muted) !important;
  font-weight: 500;
}
.breadcrumb > li + li::before {
  content: "›" !important;
  color: #CBD5E1 !important;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.5rem;
}

/* ----- Alerts / Toasts ------------------------------------------------ */
.alert {
  border-radius: var(--ms-radius-md) !important;
  border: none !important;
  font-size: 0.875rem !important;
  padding: 1rem 1.25rem !important;
  box-shadow: var(--ms-shadow-sm) !important;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.alert-success { background-color: #ECFDF5 !important; color: #065F46 !important; border-left: 4px solid var(--ms-success) !important; }
.alert-danger, .alert-error { background-color: #FEF2F2 !important; color: #991B1B !important; border-left: 4px solid var(--ms-danger) !important; }
.alert-warning { background-color: #FFFBEB !important; color: #92400E !important; border-left: 4px solid var(--ms-warning) !important; }
.alert-info    { background-color: #EFF6FF !important; color: #1E40AF !important; border-left: 4px solid var(--ms-info) !important; }

/* ----- Modals (Glass Backdrop & Smooth entry) -------------------------- */
.modal-backdrop {
  background-color: #0F172A !important;
  backdrop-filter: blur(4px);
}
.modal-backdrop.in {
  opacity: 0.6 !important;
}

.modal-content {
  border-radius: var(--ms-radius-xl) !important;
  border: none !important;
  box-shadow: var(--ms-shadow-xl) !important;
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid var(--ms-border-light) !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--ms-bg-app) !important;
}

.modal-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--ms-text-primary) !important;
}

.modal-body {
  padding: 1.5rem !important;
}

.modal-footer {
  border-top: 1px solid var(--ms-border-light) !important;
  padding: 1rem 1.5rem !important;
  background: var(--ms-bg-app) !important;
}

/* ----- Tabs ----------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--ms-border-light) !important;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
}
.nav-tabs > li {
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--ms-text-secondary) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.5rem !important;
  transition: all var(--ms-transition-fast) !important;
  background: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border: none !important;
  border-bottom: 2px solid var(--ms-primary) !important;
  color: var(--ms-primary) !important;
  background: transparent !important;
}
.nav-tabs > li > a:hover {
  color: var(--ms-text-primary) !important;
  border-bottom: 2px solid var(--ms-border-medium) !important;
}

/* ----- Dashboard Info Boxes ------------------------------------------- */
.info-box {
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow-sm) !important;
  border: 1px solid var(--ms-border-light) !important;
  min-height: 90px !important;
  background: var(--ms-bg-surface) !important;
  transition: transform var(--ms-transition-fast), box-shadow var(--ms-transition-fast) !important;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.info-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--ms-shadow-md) !important;
}

.info-box-icon {
  width: 90px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem !important;
  color: #fff !important;
}
.bg-aqua   { background: linear-gradient(135deg, #0EA5E9, #2563EB) !important; }
.bg-green  { background: linear-gradient(135deg, #10B981, #059669) !important; }
.bg-yellow { background: linear-gradient(135deg, #F59E0B, #D97706) !important; }
.bg-red    { background: linear-gradient(135deg, #EF4444, #DC2626) !important; }
.bg-info   { background: linear-gradient(135deg, #6366F1, #4F46E5) !important; }

.info-box-content {
  padding: 1rem 1.25rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.info-box-text {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ms-text-muted) !important;
  margin-bottom: 0.25rem;
}
.info-box-number {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--ms-text-primary) !important;
  letter-spacing: -0.02em !important;
}

/* Small Boxes (Widgets) */
.small-box {
  border-radius: var(--ms-radius-lg) !important;
  box-shadow: var(--ms-shadow-sm) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  transition: transform var(--ms-transition-fast), box-shadow var(--ms-transition-fast) !important;
}
.small-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--ms-shadow-md) !important;
}
.small-box .inner {
  padding: 1.5rem !important;
  position: relative;
  z-index: 2;
}
.small-box h3 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.5rem 0 !important;
}
.small-box p {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  opacity: 0.9;
}
.small-box .icon {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 4rem;
  color: rgba(0,0,0,0.15);
  z-index: 1;
  transition: transform var(--ms-transition-norm);
}
.small-box:hover .icon {
  transform: scale(1.1);
}
.small-box .small-box-footer {
  background: rgba(0,0,0,0.1) !important;
  padding: 0.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  position: relative;
  z-index: 2;
  transition: background var(--ms-transition-fast);
}
.small-box .small-box-footer:hover {
  background: rgba(0,0,0,0.15) !important;
}

/* ----- Details & Overrides -------------------------------------------- */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ms-border-medium); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ms-text-muted); }

/* Links */
a { color: var(--ms-primary) !important; transition: color var(--ms-transition-fast); }
a:hover { color: var(--ms-primary-hover) !important; text-decoration: none !important; }

/* Dropdowns */
.dropdown-menu {
  border-radius: var(--ms-radius-md) !important;
  border: 1px solid var(--ms-border-light) !important;
  box-shadow: var(--ms-shadow-lg) !important;
  padding: 0.5rem !important;
  font-size: 0.875rem !important;
  animation: dropdownFade 0.2s ease;
}
@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.dropdown-menu > li > a {
  border-radius: var(--ms-radius-sm) !important;
  padding: 0.5rem 1rem !important;
  color: var(--ms-text-primary) !important;
  font-weight: 500 !important;
  transition: background-color var(--ms-transition-fast);
}
.dropdown-menu > li > a:hover {
  background-color: var(--ms-bg-app) !important;
  color: var(--ms-primary) !important;
}

/* Header Buttons override */
.no-print .tw-bg-primary-800,
.no-print button.tw-rounded-lg,
.no-print a.tw-rounded-lg,
.no-print summary.tw-rounded-lg {
  background-color: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(4px);
  transition: all var(--ms-transition-fast) !important;
}
.no-print .tw-bg-primary-800:hover,
.no-print button.tw-rounded-lg:hover,
.no-print a.tw-rounded-lg:hover,
.no-print summary.tw-rounded-lg:hover {
  background-color: rgba(255,255,255,0.25) !important;
  border-color: rgba(255,255,255,0.4) !important;
  transform: translateY(-1px);
}
.no-print .tw-bg-primary-800 *,
.no-print button.tw-rounded-lg *,
.no-print a.tw-rounded-lg *,
.no-print summary.tw-rounded-lg * {
  color: #ffffff !important;
}

/* AdminLTE Skin Overrides */
.skin-blue-light .main-sidebar,
.skin-blue .main-sidebar,
.skin-black .main-sidebar,
.skin-black-light .main-sidebar,
.skin-green .main-sidebar,
.skin-green-light .main-sidebar,
.skin-red .main-sidebar,
.skin-red-light .main-sidebar,
.skin-yellow .main-sidebar,
.skin-yellow-light .main-sidebar,
.skin-purple .main-sidebar,
.skin-purple-light .main-sidebar {
  background-color: var(--ms-bg-sidebar) !important;
}

/* Fix for Select2 inside modals */
.select2-dropdown {
  z-index: 1060 !important;
  border-color: var(--ms-border-focus) !important;
  box-shadow: var(--ms-shadow-md) !important;
  border-radius: var(--ms-radius-md) !important;
}

/* Print utilities */
@media print {
  .no-print { display: none !important; }
  .box { border: none !important; box-shadow: none !important; }
}

/* Micro-animations class */
.animate-fade-in {
  animation: fadeIn var(--ms-transition-norm) ease-out forwards;
}
.animate-slide-up {
  animation: slideUp var(--ms-transition-norm) ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}