body {
    max-width: 100% !important;
    width: 100% !important;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 75rem;
    padding-top: 4.5rem;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
}

h1 {
    color: red;
}

.container {
    max-width: 100% !important;  /* Override Bootstrap's default max-width */
    width: 100% !important;
}

td.details-control {
    background: url('/static/images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('/static/images/details_close.png') no-repeat center center;
}

td.object-details-control {
    background: url('/static/images/view-details-16.png') no-repeat center center;
    cursor: pointer;
}

table.child-table td.edit-service,
#productsearch-results-table td.edit-service {
    background: url('/static/images/details_open.png') no-repeat center center;
    cursor: pointer;
}

table.child-table td.edit-usage,
#productsearch-results-table td.edit-usage {
    background: url('/static/images/view-details-16.png') no-repeat center center;
    cursor: pointer;
}

.dataTables_wrapper {
    overflow-x: auto !important;
}

table.dataTable {
    width: auto !important;  /* Prevent forced shrinking */
    min-width: 100% !important; /* Ensure table takes at least full width */
}

.bg-custom-light {
  background-color: #d6d6d6 !important;
}

/* Custom link color for client pages */
nav.navbar.navbar-light .navbar-collapse .navbar-nav .nav-link.nav-class-client {
    color: #007bff !important;
}

nav.navbar.navbar-light .navbar-collapse .navbar-nav .nav-link.nav-class-client:hover,
nav.navbar.navbar-light .navbar-collapse .navbar-nav .nav-link.nav-class-client:focus {
    color: #0056b3 !important;
}

/* Custom link color for client pages */
nav.navbar.navbar-light .navbar-collapse .navbar-nav .nav-link.nav-class-phase {
    color: #ff0040 !important;
}

nav.navbar.navbar-light .navbar-collapse .navbar-nav .nav-link.nav-class-phase:hover,
nav.navbar.navbar-light .navbar-collapse .navbar-nav .nav-link.nav-class-phase:focus {
    color: #b3002a !important;
}

.scrollable-select {
    height: auto !important;
    max-height: 250px;
    overflow-y: scroll;
}

.etl-select {
    max-width: 400px;      /* Change this to whatever width you want */
    width: 100%;           /* Bootstrap default, but constrained */
    max-height: 200px;     /* Enables scrolling */
    overflow-y: auto;      /* Scrolling inside pop-out */
}

.spinner-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 5px solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}