:root {
  --header-height: 60px;
  --sidebar-width: 300px;
  
  /* New Blue Theme Palette */
  --color-primary: #0d6efd;
  --color-primary-grad-start: #012970;
  --color-primary-grad-end: #4154f1;
  --color-accent: #4154f1;
  --color-accent-teal: #0d6efd;
  --color-info: #1e88ff;
  --color-border: #e9ecef;
  --color-bg: #ffffff;
  --color-bg-lines: #f8f9fa;
  --text-primary: #1a1a1a;
  --text-secondary: #6c757d;

  /* Mapping */
  --primary-color: var(--color-primary);
  --secondary-color: var(--text-primary);
  --light-bg: var(--color-bg-lines);
  --accent-color: var(--color-accent);
}

:root[data-admin-theme="ocean"],
:root[data-dashboard-theme="ocean"] {
  --color-primary: #0d6efd;
  --color-primary-grad-start: #012970;
  --color-primary-grad-end: #4154f1;
  --color-accent: #4154f1;
  --color-accent-teal: #0d6efd;
  --color-info: #1e88ff;
  --color-border: #e9ecef;
  --color-bg: #ffffff;
  --color-bg-lines: #f8f9fa;
  --text-primary: #1a1a1a;
  --text-secondary: #6c757d;
}

:root[data-admin-theme="emerald"],
:root[data-dashboard-theme="emerald"] {
  --color-primary: #10B981;
  --color-primary-grad-start: #059669;
  --color-primary-grad-end: #22C55E;
  --color-accent: #0EA5E9;
  --color-accent-teal: #22C55E;
  --color-info: #06B6D4;
  --color-border: #D1FAE5;
  --color-bg: #FFFFFF;
  --color-bg-lines: #ECFDF5;
  --text-primary: #052E2B;
  --text-secondary: #335E57;
}

:root[data-admin-theme="purple"],
:root[data-dashboard-theme="purple"] {
  --color-primary: #7C3AED;
  --color-primary-grad-start: #5B21B6;
  --color-primary-grad-end: #EC4899;
  --color-accent: #22C55E;
  --color-accent-teal: #A78BFA;
  --color-info: #6366F1;
  --color-border: #EDE9FE;
  --color-bg: #FFFFFF;
  --color-bg-lines: #F5F3FF;
  --text-primary: #1F1235;
  --text-secondary: #5B4B7A;
}

:root[data-admin-theme="sunset"],
:root[data-dashboard-theme="sunset"] {
  --color-primary: #F97316;
  --color-primary-grad-start: #EA580C;
  --color-primary-grad-end: #EF4444;
  --color-accent: #0EA5E9;
  --color-accent-teal: #F59E0B;
  --color-info: #FB7185;
  --color-border: #FFEDD5;
  --color-bg: #FFFFFF;
  --color-bg-lines: #FFF7ED;
  --text-primary: #3B1D0D;
  --text-secondary: #6B4B3A;
}

:root[data-admin-theme="midnight"],
:root[data-dashboard-theme="midnight"] {
  --color-primary: #60A5FA;
  --color-primary-grad-start: #2563EB;
  --color-primary-grad-end: #06B6D4;
  --color-accent: #A78BFA;
  --color-accent-teal: #06B6D4;
  --color-info: #38BDF8;
  --color-border: #1F2A44;
  --color-bg: #0B1220;
  --color-bg-lines: #101A2E;
  --text-primary: #E5E7EB;
  --text-secondary: #94A3B8;
}

:root[data-admin-theme="slate"],
:root[data-dashboard-theme="slate"] {
  --color-primary: #0F172A;
  --color-primary-grad-start: #334155;
  --color-primary-grad-end: #0F172A;
  --color-accent: #3B82F6;
  --color-accent-teal: #06B6D4;
  --color-info: #64748B;
  --color-border: #E2E8F0;
  --color-bg: #FFFFFF;
  --color-bg-lines: #F1F5F9;
  --text-primary: #0F172A;
  --text-secondary: #475569;
}

:root[data-admin-theme="rose"],
:root[data-dashboard-theme="rose"] {
  --color-primary: #E11D48;
  --color-primary-grad-start: #BE123C;
  --color-primary-grad-end: #FB7185;
  --color-accent: #8B5CF6;
  --color-accent-teal: #F43F5E;
  --color-info: #EC4899;
  --color-border: #FFE4E6;
  --color-bg: #FFFFFF;
  --color-bg-lines: #FFF1F2;
  --text-primary: #3F0A1D;
  --text-secondary: #6B203A;
}

:root[data-admin-theme="amber"],
:root[data-dashboard-theme="amber"] {
  --color-primary: #F59E0B;
  --color-primary-grad-start: #D97706;
  --color-primary-grad-end: #F97316;
  --color-accent: #0EA5E9;
  --color-accent-teal: #F59E0B;
  --color-info: #FB923C;
  --color-border: #FEF3C7;
  --color-bg: #FFFFFF;
  --color-bg-lines: #FFFBEB;
  --text-primary: #3A2500;
  --text-secondary: #6B4E00;
}

:root[data-admin-theme="indigo"],
:root[data-dashboard-theme="indigo"] {
  --color-primary: #4F46E5;
  --color-primary-grad-start: #4338CA;
  --color-primary-grad-end: #06B6D4;
  --color-accent: #F97316;
  --color-accent-teal: #06B6D4;
  --color-info: #38BDF8;
  --color-border: #E0E7FF;
  --color-bg: #FFFFFF;
  --color-bg-lines: #EEF2FF;
  --text-primary: #14122B;
  --text-secondary: #4B4869;
}

:root[data-admin-theme="mono"],
:root[data-dashboard-theme="mono"] {
  --color-primary: #111827;
  --color-primary-grad-start: #111827;
  --color-primary-grad-end: #374151;
  --color-accent: #111827;
  --color-accent-teal: #111827;
  --color-info: #6B7280;
  --color-border: #E5E7EB;
  --color-bg: #FFFFFF;
  --color-bg-lines: #F3F4F6;
  --text-primary: #111827;
  --text-secondary: #4B5563;
}

/* Global Responsive Fixes */
img {
    max-width: 100%;
    height: auto;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px) {
  .card-body {
    padding: 0 15px 15px 15px;
  }
  .header .logo span {
    font-size: 20px;
  }
  .pagetitle h1 {
    font-size: 1.4rem;
  }
  #main {
    padding: 15px;
  }
  .card-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .info-card h6 {
    font-size: 22px;
  }
}

/* Fix for Search Bar on Mobile */
@media (max-width: 991px) {
  .search-bar {
    min-width: auto;
    width: 100%;
  }
}

/* Ensure cards don't overflow */
.card {
    word-wrap: break-word;
}

/*--------------------------------------------------------------
# Dashboard Cards
--------------------------------------------------------------*/
.card {
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
  margin-bottom: 30px;
  background-color: var(--color-bg);
}

.card-title {
  padding: 20px 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: "Poppins", sans-serif;
}

.card-body {
  padding: 0 20px 20px 20px;
}

.info-card {
  padding-bottom: 10px;
}

.info-card h6 {
  font-size: 28px;
  color: var(--text-primary);
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.sales-card .card-icon {
  color: var(--color-primary);
  background: var(--color-bg-lines);
}

.revenue-card .card-icon {
  color: var(--color-accent-teal);
  background: #e0f8fb;
}

.customers-card .card-icon {
  color: var(--color-accent);
  background: #f3eaff;
}


body {
  font-family: "Open Sans", sans-serif;
  background: var(--light-bg);
  color: var(--text-secondary);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  transition: all 0.5s;
  z-index: 997;
  height: var(--header-height);
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  background: linear-gradient(90deg, var(--color-primary-grad-start), var(--color-primary-grad-end));
  padding-left: 20px;
}

.header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 10px;
  cursor: pointer;
  color: #fff;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 26px;
  margin-right: 6px;
}

.header .logo span {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  font-family: "Nunito", sans-serif;
}

.header-nav .nav-profile span {
  color: #fff;
}

.header-nav .nav-icon {
  color: #fff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
}

@media (max-width: 1199px) {
  .sidebar {
    left: -300px;
  }
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: #899bbd;
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  transition: 0.3;
  background: var(--color-bg-lines);
  padding: 10px 15px;
  border-radius: 4px;
  text-decoration: none;
}

.sidebar-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--color-primary);
}

.sidebar-nav .nav-link.collapsed {
  color: var(--text-primary);
  background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
  color: var(--text-secondary);
}

.sidebar-nav .nav-link:hover {
  color: var(--color-primary);
  background: var(--color-bg-lines);
}

.sidebar-nav .nav-link:hover i {
  color: var(--color-primary);
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: var(--header-height);
  padding: 20px 30px;
  transition: all 0.3s;
}

@media (min-width: 1200px) {
  #main {
    margin-left: var(--sidebar-width);
  }
}

/* Narrower dashboard layout on large screens */
@media (min-width: 1200px) {
  #main .pagetitle,
  #main .section .row {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* Toggle Sidebar */
@media (min-width: 1200px) {
  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: 0;
  }
  .toggle-sidebar .sidebar {
    left: -300px;
  }
}

@media (max-width: 1199px) {
  .toggle-sidebar .sidebar {
    left: 0;
  }
}

/* Mobile Bottom Nav (Bootstrap Overrides) */
@media (max-width: 768px) {
    /* Ensure body has enough padding for fixed bottom nav */
    #main, body {
        padding-bottom: 70px;
    }
    .footer {
        margin-bottom: 70px;
    }
}

/*--------------------------------------------------------------
# Search Bar
--------------------------------------------------------------*/
.search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 991px) {
  .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
    background: white;
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }
  .search-bar.search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.search-form {
  width: 100%;
}

.search-form input {
  border: 0;
  font-size: 14px;
  color: var(--text-primary);
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.search-form input:focus,
.search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.search-form button i {
  color: var(--text-primary);
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
  list-style: none;
}

.header-nav > ul {
  margin: 0;
  padding: 0;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: var(--text-primary);
  margin-right: 25px;
  position: relative;
}

.header-nav .nav-profile {
  color: var(--text-primary);
}

.header-nav .nav-profile img {
  max-height: 36px;
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}