/* Add this to the top of your CSS file */
html, body {
  width: 100%;
  min-width: fit-content; /* Only expand when needed */
  width: 100%;
  
}

/* Overall Page - Enhanced */
body {
  margin: 0;
  padding-bottom: 2em;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #2c3e50;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  border-top: 4px solid #054c8a;
  line-height: 1.6;     
}

/* Header Section - Responsive */
#header {
  border-top: 3px solid #054c8a;
  min-height: 3.6em;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  position: sticky;
  top: 0;
  z-index: 100;
}

#header .title {
  font: 190% "Inter", Arial, sans-serif;
  color: #054c8a;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#header .logo {
  margin: 0;
  transition: transform 0.3s ease;
}

#header .logo:hover {
  transform: scale(1.05);
}

#header .breadcrumb {
  font: 90% "Inter", Arial, sans-serif;
  color: #7f8c8d;
  font-weight: 500;
  margin: 0;
  padding: 0.5em 1em;
  background: rgba(174, 216, 237, 0.2);
  border-radius: 20px;
  backdrop-filter: blur(5px);
}

#header a:link,
#header a:visited {
  color: #054c8a;
  text-decoration: none;
  transition: color 0.3s ease;
}

#header a:hover {
  color: #0369a1;
}

/* Navigation - Modern Design */
#navigation {
  background: linear-gradient(135deg, #054c8a 0%, #0369a1 100%);
  box-shadow: 0 4px 20px rgba(5, 76, 138, 0.3);
/*  position: sticky;
  	top: 3.6em;*/
  z-index: 99;
}

/* Main Content - Responsive */
#content {
    margin: 2em auto;
    max-width: 1200px;
    padding: 0 1em;
    font-size: 16px;
}

h1 {
  font: 150% "Inter", Arial, sans-serif;
  color: #2c3e50;
  font-weight: 700;
  margin-bottom: 1em;
  position: relative;
  padding-bottom: 0.5em;
}

h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #054c8a, #0369a1);
  border-radius: 2px;
}

#content p {
  font-size: 100%;
  line-height: 1.8;
  margin-bottom: 1.5em;
  color: #34495e;
}

#content ul {
  font-size: 100%;
  line-height: 1.8;
  color: #34495e;
}

#contentPadding {
  margin: 2em auto;
  max-width: 1200px;
  padding: 2em;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Modern Border Styles */
td.PageBorder_tlc,
td.PageBorder_blc,
td.PageBorder_trc,
td.PageBorder_brc,
td.PageBorder_t,
td.PageBorder_l,
td.PageBorder_b,
td.PageBorder_r {
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  #header {
    flex-direction: column;
    padding: 1em;
    text-align: center;
  }

  #header .title {
    font-size: 150%;
    margin-bottom: 0.5em;
  }

  #header .breadcrumb {
    font-size: 80%;
    margin-top: 0.5em;
  }

  #content {
    margin: 1em;
    padding: 0 0.5em;
    font-size: 14px;
  }

  #contentPadding {
    margin: 1em;
    padding: 1em;
  }

  h1 {
    font-size: 130%;
  }
}

@media (max-width: 480px) {
  #header .title {
    font-size: 120%;
  }

  #content {
    font-size: 14px;
  }

  #contentPadding {
    padding: 0.5em;
  }
}

/* Enhanced Interactive Elements */
@media (hover: hover) {
  #content a {
    transition: all 0.3s ease;
  }

  #content a:hover {
    color: #054c8a;
    text-shadow: 0 1px 3px rgba(5, 76, 138, 0.3);
  }
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus Accessibility */
*:focus {
  outline: 2px solid #054c8a;
  outline-offset: 2px;
}

/* DevExpress GridView Command Column Items - Light Badge Style */
a.dxgvCommandColumnItem.dxgv__cci, .update-btn td, .cancel-btn td {
    display: inline-block;
    min-width: 40px;
    padding: 5px;
    background: rgba(5, 76, 138, 0.08);
    color: #054c8a !important;
    border: 1px solid rgba(5, 76, 138, 0.15);
    border-radius: 12px;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 500;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 2px;
    text-align: center;
    letter-spacing: 0.01em;
    backdrop-filter: blur(10px);
    position: relative;
}

a.dxgvCommandColumnItem.dxgv__cci:hover, .update-btn td:hover, .cancel-btn td:hover {
    background: rgba(5, 76, 138, 0.12);
    color: #043a6b !important;
    border-color: rgba(5, 76, 138, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(5, 76, 138, 0.1);
}

a.dxgvCommandColumnItem.dxgv__cci:active {
  transform: translateY(0);
  background: rgba(5, 76, 138, 0.15);
  box-shadow: 0 1px 4px rgba(5, 76, 138, 0.15);
}

a.dxgvCommandColumnItem.dxgv__cci:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(5, 76, 138, 0.2);
}

/* Variants for different actions */
    a.dxgvCommandColumnItem.dxgv__cci[title*="Edit"],
    a.dxgvCommandColumnItem.dxgv__cci[href*="Edit"] {
        background: rgba(255, 165, 0, 0.08);
        color: #cc8400 !important;
        border-color: rgba(255, 165, 0, 0.15);
    }

a.dxgvCommandColumnItem.dxgv__cci[title*="Edit"]:hover,
a.dxgvCommandColumnItem.dxgv__cci[href*="Edit"]:hover {
  background: rgba(255, 165, 0, 0.12);
  color: #b8770a !important;
  border-color: rgba(255, 165, 0, 0.25);
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.1);
}

a.dxgvCommandColumnItem.dxgv__cci[title*="Delete"],
a.dxgvCommandColumnItem.dxgv__cci[href*="Delete"],
.cancel-btn td {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.15);
}

    a.dxgvCommandColumnItem.dxgv__cci[title*="Delete"]:hover,
    a.dxgvCommandColumnItem.dxgv__cci[href*="Delete"]:hover,
    .cancel-btn td:hover {
        background: rgba(239, 68, 68, 0.12);
        color: #b91c1c !important;
        border-color: rgba(239, 68, 68, 0.25);
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
    }

a.dxgvCommandColumnItem.dxgv__cci[title*="View"],
a.dxgvCommandColumnItem.dxgv__cci[href*="View"] {
  background: rgba(34, 197, 94, 0.08);
  color: #16a34a !important;
  border-color: rgba(34, 197, 94, 0.15);
}

a.dxgvCommandColumnItem.dxgv__cci[title*="View"]:hover,
a.dxgvCommandColumnItem.dxgv__cci[href*="View"]:hover {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d !important;
  border-color: rgba(34, 197, 94, 0.25);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
}

/* Disabled state */
a.dxgvCommandColumnItem.dxgv__cci[disabled],
a.dxgvCommandColumnItem.dxgv__cci.disabled {
  background: rgba(156, 163, 175, 0.08) !important;
  color: #9ca3af !important;
  border-color: rgba(156, 163, 175, 0.15) !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

a.dxgvCommandColumnItem.dxgv__cci[disabled]:hover,
a.dxgvCommandColumnItem.dxgv__cci.disabled:hover {
  background: rgba(156, 163, 175, 0.08) !important;
  transform: none;
  box-shadow: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
  a.dxgvCommandColumnItem.dxgv__cci {
    padding: 4px 8px;
    font-size: 11px;
    border-radius: 10px;
    margin: 1px;
  }
}

/* Modify your ContentWrapper to remove its own scrolling */
#ContentWrapper {
  margin: 20px;
  padding: 10px;
  /* Remove or comment out the overflow-x property */
  /* overflow-x: auto; */
  max-width: 100%;
  box-sizing: border-box;
}

/* Make sure your grid container doesn't add its own scroll */
.dxgv {
  overflow-x: visible !important;
}

.dxgvTable {
  width: auto !important;
  min-width: 100%;
}

.dxgvControl {
  overflow: visible !important;
}