/* React App Layout Overrides */

/* Ensure full viewport */
html, body, #root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Main wrapper should use full width */
#wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
}

/* Content wrapper should expand to fill available space */
#content-wrapper {
  flex: 1;
  overflow-x: hidden;
  width: 100%;
  min-width: 0; /* Allow flex item to shrink below content size */
}

/* Content area should use full width */
#content {
  flex: 1 0 auto;
  width: 100%;
}

/* Override container-fluid max-width restrictions */
.container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

/* Ensure proper sidebar behavior */
.sidebar {
  width: 14rem !important;
  min-height: 100vh;
  flex-shrink: 0;
}

.sidebar.toggled {
  width: 6.5rem !important;
}

/* Adjust topbar to use full width */
.topbar {
  width: 100%;
}

/* Fix page-top container */
#page-top {
  width: 100%;
  height: 100%;
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .container-fluid {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/* Ensure cards and content stretch properly */
.row {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
  width: calc(100% + 1.5rem);
}

/* Fix for collapsed sidebar content expansion */
.sidebar.toggled ~ #content-wrapper {
  width: 100%;
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}