/* ============================================================
   Yaadle Admin — Modern Redesign Override
   Load AFTER custom.css. Remove this <link> to revert instantly.
   ============================================================ */

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

:root {
  --yaadle-dark:   #1a1a2e;
  --yaadle-purple: #7C5CFC;
  --yaadle-bg:     #F8F9FB;
  --yaadle-text:   #1a1a2e;
  --yaadle-muted:  #8a94a6;
  --yaadle-border: #EAECF0;
  --card-radius:   14px;
  --card-shadow:   0 2px 12px rgba(0,0,0,0.07);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: #F8F9FB !important;
  color: var(--yaadle-text) !important;
}

/* ── SIDEBAR ── */
body[data-sidebar="light"] .vertical-menu,
body[data-sidebar="dark"] .vertical-menu,
.vertical-menu {
  background: #C8CDD8 !important;
  border-right: 1px solid #B8BDC9 !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.05) !important;
}

.simplebar-content-wrapper,
[data-simplebar] .simplebar-content-wrapper,
.simplebar-mask,
.simplebar-wrapper {
  background: #C8CDD8 !important;
}

body[data-sidebar="dark"] .navbar-brand-box,
body[data-sidebar="light"] .navbar-brand-box,
.navbar-brand-box {
  background: #C8CDD8 !important;
  border-right: none !important;
  border-bottom: 1px solid #E2E5EE !important;
}

/* Nav links — default state */
div#sidebar-menu .side-menu.new_sideBar li a,
#sidebar-menu ul li a,
.metismenu li a {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  margin: 2px 10px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  transition: background 0.15s, color 0.15s !important;
  border-left: 3px solid transparent !important;
}

/* Hover */
div#sidebar-menu .side-menu.new_sideBar li a:hover,
#sidebar-menu ul li a:hover,
.metismenu li a:hover {
  background: #f5f3ff !important;
  color: var(--yaadle-purple) !important;
  border-left-color: transparent !important;
}

/* Active */
div#sidebar-menu .side-menu.new_sideBar li.mm-active .active,
#sidebar-menu ul li.mm-active > a,
body[data-sidebar="dark"] .mm-active .active,
body[data-sidebar="dark"] .mm-active .active i {
  background: #f0eeff !important;
  color: var(--yaadle-purple) !important;
  font-weight: 600 !important;
  border-left-color: var(--yaadle-purple) !important;
}

/* SVG icons inherit color from the link */
div#sidebar-menu ul.side-menu.new_sideBar li a svg {
  flex-shrink: 0;
  transition: color 0.15s;
}

/* Spacing */
div#sidebar-menu {
  padding: 12px 0 !important;
}
div#sidebar-menu .side-menu.new_sideBar {
  padding-top: 4px !important;
}

/* Section divider between top and bottom nav */
.bottom_side-bar {
  border-top: 1px solid #f0f2f5 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* Logo — show only the light (Yaadle branded) logo, hide the dark/sm variant */
.navbar-brand-box .logo.logo-dark { display: none !important; }
.navbar-brand-box .logo.logo-light { display: block !important; }
.navbar-brand-box .logo.logo-light .logo-lg img { max-height: 44px; }

/* Unread badge */
.unreadChatMessageCount {
  margin-left: auto;
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
}

/* Collapsed sidebar */
.sidebar-enable.vertical-collpsed .vertical-menu {
  background: #fff !important;
}

/* ── Hamburger button ── */
#vertical-menu-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#vertical-menu-btn:hover {
  background: #f0eeff !important;
  color: var(--yaadle-purple) !important;
}
#vertical-menu-btn svg { display: block; }

/* ── Collapsed sidebar ── */
.vertical-collpsed .vertical-menu,
body.vertical-collpsed .vertical-menu {
  background: #C8CDD8 !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a {
  padding: 15px !important;
  justify-content: center !important;
  border-left: none !important;
  margin: 2px 4px !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li > a svg {
  min-width: 22px !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
  background: #f0eeff !important;
  color: var(--yaadle-purple) !important;
  width: 260px !important;
}
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a svg path {
  stroke: var(--yaadle-purple) !important;
}

/* TOPBAR */
#page-topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--yaadle-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

#page-topbar .navbar-header {
  height: 64px !important;
  padding: 0 24px !important;
}

#page-topbar .navbar-header .navbar-brand-box {
  padding-top: 0 !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid var(--yaadle-border) !important;
  background: #ffffff !important;
}

#page-topbar .navbar-header .navbar-brand-box .logo.logo-light {
  padding-left: 16px !important;
}

.noti-icon .bx-bell {
  color: var(--yaadle-muted) !important;
  font-size: 20px !important;
}

.btn.header-item .d-none.d-xl-inline-block {
  color: var(--yaadle-text) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.header-profile-user {
  border: 2px solid var(--yaadle-border) !important;
}

/* MAIN CONTENT */
.main-content {
  background: #F8F9FB !important;
}

.page-content {
  /* 64px topbar + 20px gap on top; 24px sides; 80px bottom clears pagination + footer */
  padding: 84px 24px 80px !important;
}

.page-title-box h4,
.page-title-box .page-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--yaadle-text) !important;
}

/* CARDS */
.card {
  border: none !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  background: #fff !important;
}

/* Stat cards keep their original purple background + white text */
.col_rows .card.mini-stats-wid {
  background: #3A0CA3 !important;
  border: 1px solid transparent !important;
}
.col_rows .card.mini-stats-wid:hover {
  background: #fff !important;
  border-color: #3A0CA3 !important;
}
.col_rows .card-body p,
.col_rows .card-body h4 {
  color: #fff !important;
}
.col_rows .card.mini-stats-wid:hover .flex-grow-1 h4,
.col_rows .card.mini-stats-wid:hover .flex-grow-1 .text-muted {
  color: #3A0CA3 !important;
}

.card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--yaadle-border) !important;
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--yaadle-text) !important;
}

.card-body {
  padding: 20px !important;
}

/* TABLES */
.table {
  font-size: 13.5px !important;
  color: var(--yaadle-text) !important;
}

.table thead th {
  background: #F8F9FB !important;
  color: var(--yaadle-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 1px solid var(--yaadle-border) !important;
  padding: 11px 14px !important;
}

.table td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f5f6fa !important;
  border-top: none !important;
}

.table tbody tr:hover td {
  background: #fafbff !important;
}

.table-bordered td, .table-bordered th {
  border: 1px solid var(--yaadle-border) !important;
}

.dataTables_filter input {
  border: 1px solid var(--yaadle-border) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}

.dataTables_length select {
  border: 1px solid var(--yaadle-border) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
}

.page-item .page-link {
  border: 1px solid var(--yaadle-border) !important;
  border-radius: 8px !important;
  color: var(--yaadle-text) !important;
  font-size: 13px !important;
  padding: 5px 11px !important;
  margin: 0 2px !important;
}
.page-item.active .page-link {
  background: var(--yaadle-purple) !important;
  border-color: var(--yaadle-purple) !important;
  color: #fff !important;
}
.page-item .page-link:hover {
  background: #f0eeff !important;
  color: var(--yaadle-purple) !important;
}

/* BUTTONS */
.btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 16px !important;
  transition: all 0.15s !important;
}

.btn-primary {
  background: var(--yaadle-purple) !important;
  border-color: var(--yaadle-purple) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: #6a41f5 !important;
  border-color: #6a41f5 !important;
}

.btn-danger {
  background: #ff4d6d !important;
  border-color: #ff4d6d !important;
}

.btn-success {
  background: #28a745 !important;
  border-color: #28a745 !important;
}

.btn-secondary {
  background: #f0f1f3 !important;
  border-color: #f0f1f3 !important;
  color: var(--yaadle-text) !important;
}

.btn-sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* BADGES */
.badge {
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 13px !important;
  letter-spacing: 0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.badge.bg-success {
  background: #12b76a !important;
  color: #fff !important;
}
.badge.bg-danger {
  background: #f04438 !important;
  color: #fff !important;
}
.badge.bg-warning {
  background: #f79009 !important;
  color: #fff !important;
}
.badge.bg-primary {
  background: var(--yaadle-purple) !important;
  color: #fff !important;
}
.badge.bg-info {
  background: #0ba5ec !important;
  color: #fff !important;
}
.badge.bg-secondary {
  background: #98a2b3 !important;
  color: #fff !important;
}

/* Notification count pill stays red */
#notification_count,
.badge.rounded-pill.bg-danger {
  background: #f04438 !important;
  color: #fff !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
}

/* FORM CONTROLS */
.form-control, .form-select {
  border: 1px solid var(--yaadle-border) !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  padding: 8px 14px !important;
  color: var(--yaadle-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--yaadle-purple) !important;
  box-shadow: 0 0 0 3px rgba(124,92,252,0.15) !important;
}

/* MODALS */
.modal-content {
  border: none !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14) !important;
}
.modal-header {
  border-bottom: 1px solid var(--yaadle-border) !important;
  padding: 16px 20px !important;
}
.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--yaadle-text) !important;
}
.modal-footer {
  border-top: 1px solid var(--yaadle-border) !important;
}

/* DROPDOWNS */
.dropdown-menu {
  border: 1px solid var(--yaadle-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
  padding: 6px !important;
  font-size: 13.5px !important;
}
.dropdown-item {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  color: var(--yaadle-text) !important;
  font-size: 13.5px !important;
}
.dropdown-item:hover {
  background: #f0eeff !important;
  color: var(--yaadle-purple) !important;
}
.dropdown-item.text-danger:hover {
  background: #fff0f3 !important;
  color: #c82333 !important;
}

/* ALERTS */
.alert {
  border-radius: 10px !important;
  border: none !important;
  font-size: 13.5px !important;
}
.alert-success { background: #e8f8ee !important; color: #1e7e34 !important; }
.alert-danger  { background: #fff0f3 !important; color: #c82333 !important; }
.alert-warning { background: #fff8e6 !important; color: #856404 !important; }
.alert-info    { background: #e8f4fd !important; color: #0c5460 !important; }

/* TOASTR */
.toast-success { background: #28a745 !important; border-radius: 10px !important; }
.toast-error   { background: #ff4d6d !important; border-radius: 10px !important; }
.toast-warning { background: #ffc107 !important; border-radius: 10px !important; }
.toast-info    { background: var(--yaadle-purple) !important; border-radius: 10px !important; }

/* FOOTER */
.footer {
  background: #fff !important;
  border-top: 1px solid var(--yaadle-border) !important;
  color: var(--yaadle-muted) !important;
  font-size: 12px !important;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* BREADCRUMB */
.breadcrumb-item a { color: var(--yaadle-purple) !important; font-size: 13px !important; }
.breadcrumb-item.active { color: var(--yaadle-muted) !important; font-size: 13px !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--yaadle-border) !important; }

/* COLLAPSED SIDEBAR */
.sidebar-enable.vertical-collpsed .vertical-menu {
  background: var(--yaadle-dark) !important;
}

/* Gap fix — topbar is 64px, sidebar must start at 64px */
.vertical-menu { top: 64px !important; }
.page-content { padding-top: 88px !important; }