/**
 * Custom Light Blue & White Theme + Smooth UI Enhancements
 * Created for NexaDash Admin Dashboard
 */

:root {
  /* ── Light Blue & White Palette ── */
  --primary: #0EA5E9;
  --primary-rgb: 14, 165, 233;
  --primary-hover: #0284C7;
  --primary-dark: #0369A1;
  --primary-light: #38BDF8;
  --primary-soft: #E0F2FE;
  --primary-subtle: #F0F9FF;

  --secondary: #64748B;
  --secondary-soft: #F1F5F9;

  --rgba-primary-1: rgba(14, 165, 233, 0.1);
  --rgba-primary-2: rgba(14, 165, 233, 0.2);
  --rgba-primary-3: rgba(14, 165, 233, 0.3);
  --rgba-primary-4: rgba(14, 165, 233, 0.4);
  --rgba-primary-5: rgba(14, 165, 233, 0.5);
  --rgba-primary-6: rgba(14, 165, 233, 0.6);
  --rgba-primary-7: rgba(14, 165, 233, 0.7);
  --rgba-primary-8: rgba(14, 165, 233, 0.8);
  --rgba-primary-9: rgba(14, 165, 233, 0.9);

  /* ── Structural Surfaces ── */
  --nav-headbg: #FFFFFF;
  --sidebar-bg: #FFFFFF;
  --headerbg: #FFFFFF;
  --bg-page: #F3F7FA;
  --card-bg: #FFFFFF;
  --card-border: rgba(224, 236, 251, 0.85);

  /* ── Smooth Shadows & Radius ── */
  --shadow-sm: 0 1px 3px 0 rgba(14, 165, 233, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 18px -2px rgba(14, 165, 233, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 12px 30px -4px rgba(14, 165, 233, 0.10), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
  --shadow-glow: 0 6px 20px -2px rgba(14, 165, 233, 0.35);

  --radius-card: 16px;
  --radius-btn: 12px;
  --radius-sm: 8px;

  /* ── Smooth Transitions ── */
  --transition-smooth: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ────────────────────────────────────────────────
   1. GLOBAL & SMOOTHNESS FOUNDATIONS
   ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-page) !important;
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth minimalistic scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* ────────────────────────────────────────────────
   2. NAV-HEADER (Top-Left Logo Area)
   ──────────────────────────────────────────────── */
.nav-header {
  background-color: #FFFFFF !important;
  border-right: 1px solid rgba(226, 238, 250, 0.95) !important;
  border-bottom: 1px solid rgba(226, 238, 250, 0.95) !important;
  box-shadow: 2px 0 10px rgba(14, 165, 233, 0.02) !important;
  transition: var(--transition-smooth) !important;
}

.nav-header .brand-logo .logo-abbr path {
  fill: var(--primary) !important;
}

.nav-header .brand-logo .brand-title path:first-child {
  fill: #0F172A !important;
}

.nav-header .brand-logo .brand-title path:last-child {
  fill: #64748B !important;
}

.nav-control .hamburger {
  background: var(--primary-subtle);
  border-radius: var(--radius-sm);
  padding: 8px;
  transition: var(--transition-smooth);
}

.nav-control .hamburger:hover {
  background: var(--primary-soft);
  transform: scale(1.05);
}

.nav-control .hamburger .line {
  background: var(--primary-hover) !important;
}

/* ────────────────────────────────────────────────
   3. SIDEBAR (deznav) - Clean White & Soft Blue Accents
   ──────────────────────────────────────────────── */
.deznav {
  background-color: #FFFFFF !important;
  border-right: 1px solid rgba(226, 238, 250, 0.95) !important;
  box-shadow: 4px 0 20px rgba(14, 165, 233, 0.03) !important;
  transition: var(--transition-smooth) !important;
}

.deznav .metismenu {
  padding: 10px 8px !important;
}

.deznav .metismenu>li {
  margin-bottom: 3px !important;
}

.deznav .metismenu>li>a {
  border-radius: 12px !important;
  padding: 11px 16px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  transition: var(--transition-smooth) !important;
  position: relative;
}

.deznav .metismenu>li>a:before {
  display: none !important;
}

.deznav .metismenu>li>a i,
.deznav .metismenu>li>a .menu-icon svg path,
.deznav .metismenu>li>a .menu-icon svg ellipse {
  color: #64748B !important;
  fill: #64748B !important;
  transition: var(--transition-smooth) !important;
}

/* Hover State */
.deznav .metismenu>li:hover>a {
  background: var(--primary-subtle) !important;
  color: var(--primary-hover) !important;
  transform: translateX(3px);
}

.deznav .metismenu>li:hover>a i,
.deznav .metismenu>li:hover>a .menu-icon svg path,
.deznav .metismenu>li:hover>a .menu-icon svg ellipse {
  color: var(--primary) !important;
  fill: var(--primary) !important;
}

/* Active State */
.deznav .metismenu>li.mm-active>a {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(56, 189, 248, 0.22) 100%) !important;
  color: var(--primary-dark) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.12) !important;
}

.deznav .metismenu>li.mm-active>a i,
.deznav .metismenu>li.mm-active>a .menu-icon svg path,
.deznav .metismenu>li.mm-active>a .menu-icon svg ellipse {
  color: var(--primary) !important;
  fill: var(--primary) !important;
}

/* Submenu dropdown inside sidebar */
.deznav .metismenu ul {
  background: #F8FAFC !important;
  border-radius: 12px !important;
  padding: 6px 0 !important;
  margin-top: 4px !important;
}

.deznav .metismenu ul a {
  color: #64748B !important;
  padding: 8px 18px 8px 36px !important;
  border-radius: 8px !important;
  transition: var(--transition-fast) !important;
}

.deznav .metismenu ul a:hover,
.deznav .metismenu ul a.mm-active {
  color: var(--primary-hover) !important;
  background: var(--primary-soft) !important;
}

/* ────────────────────────────────────────────────
   4. HEADER (Navbar Top)
   ──────────────────────────────────────────────── */
.header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(226, 238, 250, 0.95) !important;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.03) !important;
  transition: var(--transition-smooth) !important;
}

.header .search-area {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--radius-btn) !important;
  transition: var(--transition-smooth) !important;
}

.header .search-area:focus-within {
  border-color: var(--primary-light) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

.header .search-area .input-group-text svg path {
  fill: var(--primary) !important;
}

/* Header Action Icons */
.header .notification_dropdown .nav-link,
.header .sidebar-close .nav-link {
  background: var(--primary-subtle) !important;
  border-radius: 12px !important;
  color: var(--primary-hover) !important;
  padding: 8px 12px !important;
  transition: var(--transition-smooth) !important;
}

.header .notification_dropdown .nav-link:hover,
.header .sidebar-close .nav-link:hover {
  background: var(--primary-soft) !important;
  color: var(--primary-dark) !important;
  transform: translateY(-1px);
}

.header .notification_dropdown .nav-link svg,
.header .sidebar-close .nav-link svg {
  stroke: var(--primary) !important;
}

/* ────────────────────────────────────────────────
   5. CARDS & WIDGETS
   ──────────────────────────────────────────────── */
.card {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-md);
  transition: var(--transition-smooth);
}

.card.hero-banner {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 60%, #38bdf8 100%) !important;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.35) !important;
  color: #ffffff !important;
}

.card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(186, 224, 253, 0.9) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(226, 238, 250, 0.7) !important;
}

.card-header .card-title {
  color: #0F172A !important;
  font-weight: 600 !important;
}

/* ────────────────────────────────────────────────
   6. BUTTONS & BADGES
   ──────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3) !important;
  transition: var(--transition-smooth) !important;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.badge-primary,
.badge.badge-primary,
span.badge-primary {
  background: var(--primary-soft) !important;
  color: var(--primary-dark) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  border: 1px solid rgba(14, 165, 233, 0.2) !important;
}

.badge-success.light {
  background-color: #ECFDF5 !important;
  color: #059669 !important;
}

.badge-danger.light {
  background-color: #FEF2F2 !important;
  color: #DC2626 !important;
}

.badge-warning.light {
  background-color: #FFFBEB !important;
  color: #D97706 !important;
}

/* ────────────────────────────────────────────────
   7. NAV PILLS & TABS (Smooth Light Blue)
   ──────────────────────────────────────────────── */
.nav-pills .nav-link {
  border-radius: 10px !important;
  transition: var(--transition-smooth) !important;
  color: #64748B !important;
  font-weight: 500 !important;
}

.nav-pills .nav-link:hover {
  background-color: var(--primary-subtle) !important;
  color: var(--primary-hover) !important;
}

.nav-pills .nav-link.active {
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.28) !important;
}

/* ────────────────────────────────────────────────
   8. RIGHTBAR / SIDEBAR PROFILE
   ──────────────────────────────────────────────── */
.sidebar-profile {
  background: #FFFFFF !important;
  border-left: 1px solid rgba(226, 238, 250, 0.95) !important;
  box-shadow: -6px 0 25px rgba(14, 165, 233, 0.05) !important;
  transition: var(--transition-smooth) !important;
}

/* ────────────────────────────────────────────────
   9. DROPDOWNS & MODALS
   ──────────────────────────────────────────────── */
.dropdown-menu {
  border-radius: 14px !important;
  border: 1px solid rgba(226, 238, 250, 0.95) !important;
  box-shadow: var(--shadow-lg) !important;
  animation: smoothFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  padding: 8px !important;
}

.dropdown-item {
  border-radius: 8px !important;
  transition: var(--transition-fast) !important;
  color: #475569 !important;
}

.dropdown-item:hover {
  background: var(--primary-subtle) !important;
  color: var(--primary-hover) !important;
  transform: translateX(2px);
}

@keyframes smoothFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ────────────────────────────────────────────────
   10. TABLES SMOOTHNESS
   ──────────────────────────────────────────────── */
.table tr {
  transition: background-color 0.18s ease;
}

.table tbody tr:hover {
  background-color: #F8FAFC !important;
}

/* Content Body smooth spacing */
.content-body {
  transition: var(--transition-smooth) !important;
}

/* ────────────────────────────────────────────────
   11. PAGE TITLES & BREADCRUMBS
   ──────────────────────────────────────────────── */
.page-titles {
  background: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 14px 24px !important;
  margin-bottom: 1.563rem !important;
  width: 100% !important;
  transition: var(--transition-smooth) !important;
}

.page-titles:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(186, 224, 253, 0.9) !important;
}

.page-titles .breadcrumb {
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  align-items: center !important;
}

.page-titles .breadcrumb-item {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.page-titles .breadcrumb-item a {
  color: #64748B !important;
  transition: var(--transition-fast) !important;
}

.page-titles .breadcrumb-item a:hover {
  color: var(--primary) !important;
}

.page-titles .breadcrumb-item.active,
.page-titles .breadcrumb-item.active a {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* ────────────────────────────────────────────────
   Table Action Buttons (Edit & Hapus) Perfect Styling
   ──────────────────────────────────────────────── */
.btn-tbl-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: unset !important;
  height: 32px !important;
  min-height: unset !important;
  padding: 0 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-tbl-action i {
  font-size: 0.9rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Edit: Amber Outline with Soft Glow */
.btn-tbl-edit {
  background-color: #FFFBEB !important;
  color: #B45309 !important;
  border: 1px solid #FCD34D !important;
}

.btn-tbl-edit:hover {
  background-color: #F59E0B !important;
  color: #FFFFFF !important;
  border-color: #F59E0B !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
  transform: translateY(-1px);
}

/* Delete: Rose/Red Outline with Soft Glow */
.btn-tbl-delete {
  background-color: #FFF1F2 !important;
  color: #BE123C !important;
  border: 1px solid #FDA4AF !important;
}

.btn-tbl-delete:hover {
  background-color: #E11D48 !important;
  color: #FFFFFF !important;
  border-color: #E11D48 !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35) !important;
  transform: translateY(-1px);
}

/* Nav Header Brand Logo Fit */
.nav-header .brand-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-left: 20px !important;
}

.nav-header .brand-logo .brand-title {
  max-width: 140px !important;
  height: auto !important;
}

/* ────────────────────────────────────────────────
   DataTables Pagination Modern Styling (Chevron Icons)
   ──────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  margin-top: 15px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  width: auto !important;
  height: 32px !important;
  padding: 0 8px !important;
  margin: 0 2px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: #64748B !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  color: var(--primary) !important;
  background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: transparent !important;
  color: #94A3B8 !important;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: #64748B !important;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button.current,
.dataTables_wrapper .dataTables_paginate span .paginate_button.current:hover {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button:hover {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 0.85rem !important;
  color: #64748B !important;
  padding-top: 15px !important;
}