/* ------------------------------------------------------
   BULK PORTAL PAGE STYLES
------------------------------------------------------ */

/* Loader spinner */
#loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: spin 2s linear infinite;
    z-index: 100;
}

/* Spinner animation */
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Optional: improve spacing consistency */
.container {
    max-width: 1200px;
}




/* ------------------------------------------------------
   GLASS EFFECT CONTAINER
------------------------------------------------------ */

.glass-card {
    margin-bottom: 50px;
    background: rgba(30, 30, 60, 0.55);   /* semi transparent dark */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-radius: 20px;
    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Make text lighter for dark glass */
.glass-card h1 {
    font-size: 50px;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.glass-card h4{
    color: #ffffff;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.glass-card label{
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;

}

.glass-card p {
    color: #ffffff;
}

/* Optional softer buttons */
.glass-card .btn-outline-secondary {
    border-color: rgba(255,255,255,0.4);
    color: #ffffff;
}

.glass-card .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.15);
}





/* ------------------------------------------------------
   SUMMARY SECTION
------------------------------------------------------ */

.project-summary p {
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    line-height: 1.6;
    text-align: center;
}

.project-summary h5 {
    color: rgba(255,255,255,0.85);
    text-align: center;
    margin-top: 40px;
}

/*might or might not add depending on what we need
/*
.summary-list {
    padding-left: 20px;
    margin-bottom: 0;
    color: rgba(255,255,255,0.85);
}

.summary-list li {
    margin-bottom: 6px;
}
*/

/* Make table headers bright and readable */
/* Softer table borders */
.table {
  border-collapse: separate !important;
  border-spacing: 0 4px; /* soft row spacing */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  border-radius: 10px;
}

/* Header text */
.table-dark th {
  background: rgba(0, 0, 0, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 12px 10px;
  color: #ffffff !important;   /* WHITE */
  font-weight: 700 !important; /* BOLD */
}

/* Make all table body text white + bold */
.table td,
.table tbody td {
  color: #ffffff !important;   /* WHITE */
  font-weight: 600 !important; /* BOLD */
  padding: 10px 10px;
}

/* Rows background */
.table tbody tr {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

/* Remove sharp grid lines */
.table td, .table th {
  border: none !important;
}

/* Rounded corners for rows */
.table tbody tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.table tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Optional: Status column highlight */
.table td.status {
  color: #ffcc66 !important; /* warm yellow */
  font-weight: 700 !important;
}



/* ------------------------------------------------------
   GLASS INPUT STYLE
------------------------------------------------------ */
.glass-card .default-model-btn {
    position: relative;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;

    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.4);

    overflow: hidden;
    transition: all 0.3s ease;
}

/* Soft transparent yellow hover */
.glass-card .default-model-btn:hover {
    background: rgba(255, 214, 0, 0.25);  /* transparent yellow */
    color: #ffffff;
    border-color: rgba(255, 214, 0, 0.6);
}

.glass-card .default-model-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.0) 0%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.0) 100%
    );
    transform: skewX(-20deg);
}

/* Animate shine on hover */
.glass-card .default-model-btn:hover::before {
    animation: shine 0.7s ease forwards;
}

@keyframes shine {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

.glass-card .default-model-btn.active {
    background: rgba(255, 214, 0, 0.25);
    border-color: rgba(255, 214, 0, 0.8);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(255, 214, 0, 0.4);
}



.glass-card select {
    background: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

/* Select hover effect */
.glass-card select:hover {
    background: rgba(255, 214, 0, 0.15) !important;
    border-color: rgba(255, 214, 0, 0.6) !important;
    color: #ffffff;
    transition: all 0.3s ease;
}


.glass-card select:focus {
    color: #ffffff !important;
    background: transparent !important;
    border-color: #d4c672;
    box-shadow: 0 0 8px rgba(110, 168, 255, 0.5);
    outline: none;
}

.glass-card textarea {
    background: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.25s ease;
}

.glass-card textarea:focus {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #6ea8ff;
    box-shadow: 0 0 8px rgba(110, 168, 255, 0.5);
    outline: none;
}

/* Placeholder color */
.glass-card textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}



.glass-card select option {
    background-color: #3a3f5c;
    color: #ffffff;
}


.glass-card .btn-primary {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.7);
    color: #ffffff;
}

.glass-card .btn-primary:hover {
    background: rgba(255,255,255,0.15);
}
/*
.glass-card .btn-primary {
    background: linear-gradient(90deg, #bfcada, #918b9c);
    border: none;
    color: white;
    font-weight: 500;
}

.glass-card .btn-primary:hover {
    opacity: 0.9;
}*/