html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

:root {
  /* Define color variables for easy maintenance */
  --primary-color: #6366F1;        /* Purple color from the reference */
  --primary-light: #E0E7FF;        /* Light purple for hover states */
  --secondary-color: #F97066;      /* Coral color for secondary actions */
  --text-dark: #333333;           /* Dark text */
  --text-medium: #6B7280;         /* Medium gray for secondary text */
  --text-light: #9CA3AF;          /* Light gray for tertiary text */
  --background-light: #F9FAFB;    /* Very light gray background */
  --border-color: #E5E7EB;        /* Light gray border */
  --success-color: #10B981;       /* Green */
  --warning-color: #FBBF24;       /* Yellow */
  --danger-color: #EF4444;        /* Red */
  --info-color: #60A5FA;          /* Blue */
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
}

/*
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .btn-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-color);
}
.form-control, .form-select {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  border: 1px solid #ccc;
}

.form-control:focus, .form-select:focus {
  border-color: #333 !important;
  box-shadow: none !important;
  outline: none;
}

.form-control:hover, .form-select:hover {
  transition: none !important;
}

input:focus, select:focus, textarea:focus {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  border-color: #333 !important;
  outline: none;
}
*/
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--text-dark);
  background-color: #FFFFFF;
}

/* Sidebar Layout */
.wrapper {
  display: flex;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* Sidebar Styles */
.sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1030;
  background-color: #FFFFFF;
  color: var(--text-dark);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border-color);
}

.sidebar.collapsed {
  width: 65px;
}

.sidebar-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
  min-height: 60px;
}

.sidebar-brand {
  color: var(--primary-color);
  font-weight: bold;
  text-decoration: none;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-brand i {
  margin-right: 10px;
  color: var(--primary-color);
}

.sidebar.collapsed .sidebar-brand span {
  display: none;
}

.sidebar-toggle {
  color: var(--text-medium);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s;
  border-radius: 4px;
}

.sidebar-toggle:hover {
  background-color: var(--background-light);
  color: var(--primary-color);
}

/* User at the top of sidebar */
.sidebar-user-top {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-user-link {
  color: var(--text-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

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

.sidebar-user-link i {
  margin-right: 10px;
  min-width: 20px;
  text-align: center;
  color: var(--primary-color);
}

.sidebar.collapsed .sidebar-user-link span {
  display: none;
}

/* Sidebar navigation */
.sidebar-nav {
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-item {
  position: relative;
  display: block;
  width: 100%;
}

.sidebar-link {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  color: var(--text-dark);
  text-decoration: none;
  transition: all 0.3s;
  white-space: nowrap;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  margin: 0 5px;
}

.sidebar-link:hover {
  color: var(--primary-color);
  background-color: var(--primary-light);
}

.sidebar-link i {
  margin-right: 10px;
  min-width: 20px;
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-medium);
}

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

.sidebar.collapsed .sidebar-link span.sidebar-text {
  display: none;
}

/* Footer for sidebar */
.sidebar-footer {
  padding: 15px;
  border-top: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-light);
}

/* Submenu Panels - Animation removed */
.submenu-panel {
  position: fixed;
  left: 250px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  width: 250px;
  z-index: 1029;
  overflow: hidden;
  display: none; /* Changed from visibility: hidden to display: none */
  border: 1px solid var(--border-color);
}

.submenu-panel.show {
  display: block; /* Changed from visibility: visible and opacity: 1 to display: block */
  /* Removed transform property to eliminate fly animation */
}

.submenu-header {
  padding: 15px;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
}

.submenu-header h6 {
  margin: 0;
  font-weight: 600;
  color: var(--text-dark);
}

.submenu-body {
  padding: 10px 0;
  max-height: 500px;
  overflow-y: auto;
}

.submenu-link {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: var(--text-dark);
  text-decoration: none;
  transition: all 0.2s;
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: left;
  border-radius: 4px;
  margin: 0 5px;
}

.submenu-link:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.submenu-link.active {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 500;
}

.submenu-link i {
  margin-right: 10px;
  width: 16px;
  text-align: center;
  color: var(--text-medium);
}

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

/* Active parent menu item (for current page) */
.sidebar-link.active-parent {
  color: var(--primary-color);
  background-color: var(--primary-light);
  font-weight: 500;
}

.sidebar-link.active-parent i {
  color: var(--primary-color);
}

/* Submenu container */
#submenus-container {
  position: relative;
  z-index: 1029;
}



/* Submenu divider */
.submenu-divider {
  height: 1px;
  margin: 8px 15px;
  background-color: var(--border-color);
}
/* Overlay for when submenus are open */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1028;
  display: none;
}

.sidebar-overlay.active {
  display: block;
}

/* Content area */
.content {
  width: calc(100% - 250px);
  margin-left: 250px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: all 0.3s;
  background-color: #FFFFFF;
}

.content.expanded {
  width: calc(100% - 65px);
  margin-left: 65px;
}

/* Main content */
main {
  flex: 1;
}

/* Navbar */
.navbar {
  padding: 8px 16px;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.navbar-text {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-dark) !important;
}

/* Footer */
.footer {
  margin-top: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #FFFFFF;
  border-top: 1px solid var(--border-color);
  color: var(--text-light);
}

/* Button styling */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #5253CC;
  border-color: #5253CC;
}

.btn-secondary {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #E55A50;
  border-color: #E55A50;
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Badge styling */
.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-success {
  background-color: var(--success-color) !important;
}

.bg-danger {
  background-color: var(--danger-color) !important;
}

.bg-warning {
  background-color: var(--warning-color) !important;
}

.bg-info {
  background-color: var(--info-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

/* Card styling */
.card {
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.card-header {
  padding: 0.75rem 1rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-color);
}

.card-body {
  padding: 1rem;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .sidebar {
    margin-left: -65px;
  }
  
  .sidebar.show-mobile {
    margin-left: 0;
    width: 250px;
  }
  
  .content {
    width: 100%;
    margin-left: 0;
  }
  
  .content.expanded {
    width: 100%;
    margin-left: 0;
  }
  
  .navbar-toggler {
    display: block;
  }
  
  .sidebar.show-mobile .sidebar-brand span,
  .sidebar.show-mobile .sidebar-link span.sidebar-text,
  .sidebar.show-mobile .sidebar-user-link span {
    display: inline;
  }
  
  .submenu-panel {
    left: 250px !important;
  }
}

/* Optimize spacing for fluid layout */
.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1400px) {
  .container-fluid {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Reduce padding in cards for more content space */
.card-header {
  padding: 0.75rem 1rem;
}

.card-body {
  padding: 1rem;
}

/* Table styling - Keeping only table and table-hover classes */
.table {
  color: var(--text-dark);
  margin-bottom: 0;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Set standard cell padding for all tables */
.table th, 
.table td {
  padding: 0.15rem 0.3rem !important; /* Exact padding as requested */
  vertical-align: middle;
  border: 1px solid var(--border-color);
}

/* Make header text bold */
.table thead th {
  font-weight: bold;
  /*background-color: #FFFFFF !important; 
  border: 1px solid var(--border-color) !important;*/ /* Same border as regular cells */
  vertical-align: bottom;
}

/* Simple hover effect */
.table-hover > tbody > tr:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Override all other table variants to ensure consistency */
/*.table-striped > tbody > tr,
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-dark,
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-bordered th,
.table-bordered td,
.table-sm th,
.table-sm td {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  padding: 0.15rem 0.3rem !important;*/ /* Ensure consistent padding */
/*}*/

/* Remove any special styling from table headers */
.table .thead-light th,
.table .thead-dark th {
  background-color: #FFFFFF !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--border-color) !important;
}

/* Ensure table-responsive containers don't add margin */
.table-responsive {
  margin-bottom: 0;
}

/* Style to be used for any table in the application */
table:not(.table) {
  width: 100%;
  border-collapse: collapse;
}

table:not(.table) th,
table:not(.table) td {
  border: 1px solid var(--border-color);
  padding: 0.15rem 0.3rem;
}

/* Print Styles */
@media print {
  /* Hide sidebar */
  .sidebar,
  #sidebar {
    display: none !important;
  }
  
  /* Hide top navigation bar */
  .navbar,
  nav.navbar {
    display: none !important;
  }
  
  /* Hide submenus container */
  #submenus-container,
  .submenu-panel {
    display: none !important;
  }
  
  /* Hide overlay */
  .sidebar-overlay {
    display: none !important;
  }
  
  /* Hide footer if present */
  footer,
  .footer {
    display: none !important;
  }
  
  /* Make content take full width */
  .content,
  #content {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }
  
  /* Reset wrapper */
  .wrapper,
  #main-container {
    display: block !important;
    width: 100% !important;
  }
  
  /* Remove padding from container */
  .container-fluid {
    padding: 0 !important;
  }
  
  /* Optimize page breaks */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  table, figure {
    page-break-inside: avoid;
  }
  
  /* Ensure main content is visible */
  main {
    display: block !important;
    width: 100% !important;
  }
  
  /* Remove shadows and backgrounds for cleaner print */
  .card {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
  
  /* Ensure text is black for better print quality */
  body {
    color: #000 !important;
    background: #fff !important;
  }
}