/* custom.css */

/* Apply a modern gradient background and a smaller base font size */
body {
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  font-size: 14px; /* Adjust to your preferred base size */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Optional: style the wrapper to add some horizontal padding if needed */
.app-wrapper {
  padding: 0 20px;
}

/* Invoices page specific styling */
.invoices-container {
  margin: 0 auto;
  max-width: 80%; /* Limit the table container width to 80% of the page */
  padding-right: 20px; /* Add extra spacing on the right */
}

/* Adjust table cell padding for a sleeker, less bulky look */
#invoicesTable th,
#invoicesTable td {
  padding: 8px 12px;
}

/* Highlight matching invoice rows */
.highlight {
  background-color: #ffffcc; /* light yellow highlight */
}

/* Ensure invoice rows appear clickable */
.invoice-row {
  cursor: pointer;
}

/* Optional: Adjust the dropdown icon’s spacing */
.dropdown-toggle {
  width: 30px;
  text-align: center;
}

/* ---------- Apple-style Sidebar ----------- */
.app-sidebar {
  /* Light frosted background, like macOS sidebar */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 240, 245, 0.8)   100%
  ) !important;

  /* Glass-like blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Subtle border and shadow */
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  width: 250px;
  transition: width 0.3s ease;
}

/* Shrink sidebar when collapsed */
body.sidebar-collapsed div.app-wrapper .app-sidebar {
  width: 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
}

/* Override sidebar text and icon colors to dark */
.app-sidebar.sidebar-dark-primary,
.app-sidebar.sidebar-dark-primary a,
.app-sidebar.sidebar-dark-primary .nav-link,
.app-sidebar.sidebar-dark-primary .nav-icon {
  color: #1d1d1f !important;
}

/* Ensure hovered or active states use a subtle highlight */
.app-sidebar.sidebar-dark-primary .nav-link:hover,
.app-sidebar.sidebar-dark-primary .nav-link:focus,
.app-sidebar.sidebar-dark-primary .nav-link.active {
  color: #007aff !important; /* Apple blue accent */
  background-color: rgba(0, 122, 255, 0.1) !important; /* light blue hover */
}

/* Hide text elements when collapsed */
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .sidebar-user .info,
body.sidebar-collapsed .sidebar-user .image,
body.sidebar-collapsed .sidebar-support,
body.sidebar-collapsed .menu-text {
  display: none !important;
}

/* Force the brand image to stay visible and adjust its size when collapsed */
body.sidebar-collapsed .brand-image {
  margin: auto;
  width: 60px;
  height: 60px;
}

/* Center navigation icons when collapsed */
body.sidebar-collapsed .nav-link {
  text-align: center;
  padding: 10px 0 !important;
}

/* Sidebar toggle button */
.sidebar-toggle-btn {
  position: fixed !important; /* Pin to viewport */
  top: 50vh !important;       /* 50% of viewport height */
  right: -15px !important;     /* same horizontal offset */
  transform: translateY(-50%) !important; /* adjust for button half-height */

  /* Keep your existing visuals */
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  z-index: 1000;
}
.sidebar-toggle-btn i {
  font-size: 16px;
  color: #333;
}

/* Main content styling for partitioning */
.app-main {
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  border-left: 1px solid #ddd;            /* Optional: add a left border for a crisp separation */
  padding: 20px;                          /* Adjust padding as needed */
}

/* Override hover/active text color for consistency */
.app-sidebar.sidebar-dark-primary .nav-link:hover,
.app-sidebar.sidebar-dark-primary .nav-link:focus,
.app-sidebar.sidebar-dark-primary .nav-link.active {
  color: #007aff !important;
}

/* Nav-item spacing */
.nav-item {
  padding-bottom: 20px;
  border-bottom: 0px dotted #c3cfe2;
}
body.sidebar-collapsed .nav-item {
  border-bottom: 0px !important;
}

/* Footer styling */
.app-footer {
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

/* Sidebar support email */
.sidebar-support {
  color: #1d1d1f;
  font-size: 0.9rem;
}

/* Dashboard content spacing */
.dashboard-content {
  padding: 1rem;
}

/* Balance & withdraw row */
.balance-withdraw-row {
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
}

/* Chart card with subtle shadow/rounded corners */
.chart-card {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  margin-bottom: 1rem;
}

/* Info boxes */
.info-box {
  border-radius: 8px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.info-box .info-box-content {
  flex: 1;
}
.info-box-text {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.info-box-number {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Combined chart sizing */
#combinedChart {
  width: 100%;
  height: 370px;
}

/* Glass effect for info boxes */
.info-box-glass {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(0, 90, 255, 0.3) 0%,
    rgba(0, 255, 140, 0.2) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(46, 175, 109, 0.2);
  border-radius: 0.5rem;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Custom gradient utility */
.custom-gradient {
  background: linear-gradient(
    135deg,
    #2e59d9 0%,
    #4e73df 50%,
    #1cc88a 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(46, 89, 217, 0.5);
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* DataTables search input styling */
.dataTables_filter input {
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  padding: 0.4rem 0.6rem;
  transition: border-color 0.3s ease;
}
.dataTables_filter input:focus {
  border-color: #4e73df;
  outline: none;
}