/* ========================================================
   SAFARSARTHI AK RIDES - MODERN PREMIUM ADMIN & LOGIN THEME
   Palette:
     Purple:   #65186A
     Gold:     #F1C971
     Offwhite: #FBFAFB
   ======================================================== */

:root {
  --primary-purple: #65186A;
  --primary-purple-dark: #4A0E4E;
  --primary-purple-deep: #38083B;
  --primary-purple-light: #7E2484;
  --primary-purple-subtle: rgba(101, 24, 106, 0.08);
  --primary-purple-glow: rgba(101, 24, 106, 0.22);

  --accent-gold: #F1C971;
  --accent-gold-dark: #D4A94E;
  --accent-gold-light: #F7D896;
  --accent-gold-subtle: rgba(241, 201, 113, 0.18);
  --accent-gold-glow: rgba(241, 201, 113, 0.35);

  --bg-offwhite: #FBFAFB;
  --bg-white: #FFFFFF;
  --bg-sidebar: #4F0F53;
  --bg-sidebar-dark: #38073B;

  --text-dark: #231B24;
  --text-medium: #5F5661;
  --text-muted: #8E8490;
  --border-color: #EDE8EF;
  --border-focus: #65186A;

  --shadow-card: 0 4px 20px rgba(101, 24, 106, 0.05);
  --shadow-hover: 0 8px 30px rgba(101, 24, 106, 0.12);
  --radius-card: 12px;
  --radius-btn: 8px;
}

/* Global Font & Reset */
body, * {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

body {
  background-color: var(--bg-offwhite) !important;
  color: var(--text-dark) !important;
}

.content-wrapper, .right-side, .main-footer {
  background-color: var(--bg-offwhite) !important;
}

/* ==================== TOP NAVBAR ==================== */
.main-header {
  box-shadow: 0 2px 14px rgba(101, 24, 106, 0.07) !important;
  position: relative !important;
  z-index: 999 !important;
}

.main-header .navbar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.main-header .navbar .sidebar-toggle {
  color: var(--primary-purple) !important;
  font-size: 16px !important;
  padding: 15px !important;
  transition: all 0.2s ease !important;
}

.main-header .navbar .sidebar-toggle:hover {
  background-color: var(--primary-purple-subtle) !important;
  color: var(--primary-purple-dark) !important;
}

.main-header .logo {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  height: 54px !important;
  line-height: 54px !important;
  padding: 4px 15px !important;
  transition: all 0.3s ease !important;
}

.main-header .logo img {
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* ==================== SIDEBAR ==================== */
.main-sidebar, .left-side {
  background: linear-gradient(180deg, var(--bg-sidebar) 0%, var(--bg-sidebar-dark) 100%) !important;
  box-shadow: 3px 0 24px rgba(0, 0, 0, 0.09) !important;
}

.sidebar-menu > li.header {
  color: var(--accent-gold) !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 18px 20px 8px 20px !important;
  opacity: 0.9 !important;
}

.sidebar-menu > li > a {
  color: #ECE5ED !important;
  padding: 12px 18px !important;
  margin: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-left: 3px solid transparent !important;
}

.sidebar-menu > li > a i {
  color: var(--accent-gold) !important;
  margin-right: 12px !important;
  font-size: 15px !important;
  width: 20px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}

.sidebar-menu > li:hover > a {
  background: rgba(241, 201, 113, 0.16) !important;
  color: var(--accent-gold) !important;
  transform: translateX(3px) !important;
}

.sidebar-menu > li:hover > a i {
  color: #FFFFFF !important;
  transform: scale(1.1) !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: linear-gradient(90deg, rgba(241, 201, 113, 0.25) 0%, rgba(241, 201, 113, 0.08) 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-left: 4px solid var(--accent-gold) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
}

.sidebar-menu > li.active > a i {
  color: var(--accent-gold) !important;
}

.sidebar-menu .treeview-menu {
  background: rgba(0, 0, 0, 0.2) !important;
  padding: 6px 0 !important;
  border-radius: 8px !important;
  margin: 2px 10px !important;
}

.sidebar-menu .treeview-menu > li > a {
  color: #DDD4DF !important;
  font-size: 13px !important;
  padding: 9px 15px 9px 36px !important;
  border-radius: 6px !important;
  margin: 2px 6px !important;
  transition: all 0.2s ease !important;
}

.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
  color: var(--accent-gold) !important;
  background: rgba(241, 201, 113, 0.14) !important;
}

/* ==================== CARDS & PANELS ==================== */
.box, .panel, .dashboard-panel {
  background: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 24px !important;
  transition: all 0.3s ease !important;
}

.box:hover, .panel:hover {
  box-shadow: var(--shadow-hover) !important;
}

.box-header, .panel-heading {
  border-bottom: 1px solid var(--border-color) !important;
  padding: 16px 20px !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
  background: #FFFFFF !important;
}

.box-header .box-title, .panel-heading h3, .panel-heading h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--primary-purple) !important;
  letter-spacing: 0.2px !important;
}

.dashboard-card {
  background: #FFFFFF !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 22px !important;
  transition: all 0.25s ease !important;
}

.dashboard-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--accent-gold) !important;
}

/* ==================== BUTTONS ==================== */
.btn {
  border-radius: var(--radius-btn) !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.3px !important;
}

.btn-primary, .btn-success, #add-btn, .btn-save, a.btn-success {
  background: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px var(--primary-purple-glow) !important;
}

.btn-primary:hover, .btn-success:hover, #add-btn:hover, a.btn-success:hover {
  background: var(--primary-purple-dark) !important;
  border-color: var(--accent-gold) !important;
  color: var(--accent-gold) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px var(--primary-purple-glow) !important;
}

.btn-warning, .btn-gold {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold-dark) !important;
  color: var(--primary-purple-deep) !important;
  font-weight: 600 !important;
}

.btn-warning:hover, .btn-gold:hover {
  background: var(--accent-gold-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

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

.btn-default {
  background: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-dark) !important;
}

.btn-default:hover {
  background: var(--bg-offwhite) !important;
  border-color: var(--accent-gold) !important;
  color: var(--primary-purple) !important;
}

/* ==================== DATATABLES ==================== */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
}

table.dataTable thead th {
  background-color: rgba(101, 24, 106, 0.05) !important;
  color: var(--primary-purple) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  border-bottom: 2px solid var(--accent-gold) !important;
  border-top: none !important;
  padding: 14px 16px !important;
}

table.dataTable tbody td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-dark) !important;
  font-size: 13.5px !important;
}

table.dataTable tbody tr:hover {
  background-color: rgba(241, 201, 113, 0.08) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  color: var(--accent-gold) !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(101, 24, 106, 0.08) !important;
  border-color: var(--border-color) !important;
  color: var(--primary-purple) !important;
  border-radius: 6px !important;
}

.dt-buttons .btn {
  background: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  color: var(--primary-purple) !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 500 !important;
  margin-right: 6px !important;
}

.dt-buttons .btn:hover {
  background: var(--primary-purple) !important;
  color: var(--accent-gold) !important;
  border-color: var(--primary-purple) !important;
}

/* ==================== FORMS ==================== */
.form-control {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-btn) !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.form-control:focus {
  border-color: var(--primary-purple) !important;
  box-shadow: 0 0 0 3px var(--primary-purple-subtle) !important;
}

/* Switch Status Toggle */
.slider, .switch-slider {
  border-radius: 34px !important;
}

input:checked + .slider {
  background-color: var(--primary-purple) !important;
}

/* Badges & Labels */
.label, .badge {
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
}

.label-success, .badge-success {
  background-color: rgba(40, 167, 69, 0.15) !important;
  color: #218838 !important;
  border: 1px solid rgba(40, 167, 69, 0.3) !important;
}

.label-warning, .badge-warning {
  background-color: var(--accent-gold-subtle) !important;
  color: var(--primary-purple-deep) !important;
  border: 1px solid var(--accent-gold) !important;
}

.label-primary, .badge-primary {
  background-color: var(--primary-purple-subtle) !important;
  color: var(--primary-purple) !important;
  border: 1px solid var(--primary-purple) !important;
}

/* Breadcrumb */
.content-header > .breadcrumb {
  background: transparent !important;
  padding: 8px 0 !important;
}

.content-header > .breadcrumb > li > a {
  color: var(--primary-purple) !important;
  font-weight: 500 !important;
}

.content-header > h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--primary-purple) !important;
  margin-bottom: 6px !important;
}

/* ==================== LOGIN PAGE ==================== */
.login-page {
  background: var(--bg-offwhite) !important;
  min-height: 100vh !important;
}

.login-page .login_box {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 50px rgba(101, 24, 106, 0.14) !important;
  border: 1px solid var(--border-color) !important;
  background: #FFFFFF !important;
}

.login-page .left {
  background: #FFFFFF !important;
  padding: 40px !important;
}

.login-page .right {
  background: linear-gradient(135deg, #65186A 0%, #430B47 100%) !important;
  color: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}

.login-page .right::after {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(241, 201, 113, 0.22) 0%, transparent 65%) !important;
  pointer-events: none !important;
}

.login-logo h2 {
  color: var(--primary-purple) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.3px !important;
}

.login-logo p {
  color: var(--text-muted) !important;
  font-size: 13.5px !important;
}

.login-page button[type="submit"] {
  background: var(--primary-purple) !important;
  border-color: var(--primary-purple) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px var(--primary-purple-glow) !important;
  transition: all 0.25s ease !important;
}

.login-page button[type="submit"]:hover {
  background: var(--primary-purple-dark) !important;
  border-color: var(--accent-gold) !important;
  color: var(--accent-gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px var(--primary-purple-glow) !important;
}

/* SweetAlert Popups */
.swal2-popup {
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg) !important;
}

.swal2-confirm {
  background-color: var(--primary-purple) !important;
  border-radius: 8px !important;
}

.swal2-confirm:hover {
  background-color: var(--primary-purple-dark) !important;
}