/**
 * FILE: Main Stylesheet
 * PURPOSE:
 * Global styling for BST Tenders System
 * - Form UI
 * - Filter bar
 * - Table design
 * - Status badges
 * - Responsive layout
 */

#bst-tender-app {
    font-family: Arial, sans-serif;
    padding: 20px;
}

/* 🔷 HEADINGS */
#bst-tender-app h2 {
    margin-top: 20px;
    color: #222;
}

/* 🔷 FORM */
#bstTenderForm {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

#bstTenderForm input,
#bstTenderForm select {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
    min-width: 150px;
}

#bstTenderForm button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
}

#bstTenderForm button:hover {
    background: #005f8d;
}

/* 🔷 FILTER BAR */
#bst-tender-app input,
#bst-tender-app select {
    padding: 8px;
    margin: 5px 5px 5px 0;
    border-radius: 6px;
    border: 1px solid #ddd;
}

#bst-tender-app button {
    padding: 8px 12px;
    background: #28a745;
    color: #fff;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

#bst-tender-app button:hover {
    background: #218838;
}

/* 🔷 TABLE */
#bstTenderTable {
    width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

#bstTenderTable th {
    background: #0073aa;
    color: #fff;
    text-align: left;
}

#bstTenderTable td,
#bstTenderTable th {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

#bstTenderTable tr:hover {
    background: #f9f9f9;
}

/* 🔷 STATUS BADGES */
.status {
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
}

.status.open {
    background: #28a745;
}

.status.close {
    background: #dc3545;
}

.status.hold {
    background: #ffc107;
    color: #000;
}

.status.cancel {
    background: #6c757d;
}

/* 🔷 PDF LINK */
#bstTenderTable a {
    color: #0073aa;
    text-decoration: none;
}

#bstTenderTable a:hover {
    text-decoration: underline;
}

/* 🔷 EMPTY MESSAGE */
#bstTenderTable td[colspan] {
    text-align: center;
    color: #888;
    padding: 20px;
}

/* 🔷 RESPONSIVE */
@media (max-width: 768px) {

    #bstTenderForm {
        flex-direction: column;
    }

    #bstTenderForm input,
    #bstTenderForm select,
    #bstTenderForm button {
        width: 100%;
    }

    #bstTenderTable th,
    #bstTenderTable td {
        font-size: 12px;
        padding: 6px;
    }

}
.bst-notification-box {
    background:#fff;
    padding:15px;
    border-radius:10px;
}

#bst-notification-list li {
    padding:10px;
    border-bottom:1px solid #eee;
    cursor:pointer;
}

#bst-notification-list li.unread {
    background:#f1f7ff;
    font-weight:bold;
}
.bst-live-popup{
    position:fixed;
    top:20px;
    right:20px;
    background:#10ad10;
    color:#fff;
    padding:15px;
    border-radius:8px;
    z-index:9999;
}
.bst-cards{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}

.card{
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
    flex:1;
    text-align:center;
}

.card h3{
    margin-bottom:10px;
}
/*==========USER DASHBOARD=============*/
.bst-dashboard {
    display: flex;
}

.bst-main {
    flex: 1;
    padding: 20px;
}

.bst-widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bst-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/*========================================*/

/* Styles 

 
body{background:#f542e6;}
.tenders-section{padding:20px; font-family: Arial;}
.header h1{margin-top: 10px;text-align: center; color:#f542e6;}
.header p{margin-top: 8px;text-align: center;}

.filter-bar{ position: sticky; top: 0; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.05);border-radius:10px; z-index: 100; border-bottom: 1px solid #f542e6;}

.filters-scroll{display:flex;gap:10px;overflow-x: auto;padding:20px;}

.filters-scroll select,.filters-scroll input{min-width: 150px; padding:8px;border-radius:6px;border:1px solid #f542e6;}

button{background:#f542e6;color:#fff;border:none;padding:8px 15px;border-radius:6px;cursor: pointer;}

  .upload-form { margin-top: 20px; padding: 15px; border: 1px solid #f542e6; border-radius: 10px; }
  .upload-form form { display: flex; flex-wrap: wrap; gap: 10px; }
  .upload-form input, .upload-form button {
    padding: 8px; border-radius: 6px; border: 1px solid #f542e6;
  }
  .upload-form bid-group {
    padding: 8px; border-radius: 6px; border: 1px solid #f542e6;
  }
  .upload-form button { background: #f542e6; color: #fff; cursor: pointer; }


  .table-bar { position: sticky; top: 0; background: #f542e6; z-index: 100; border-bottom: 1px solid #f542e6; }
  .table-scroll { margin-top:20px; display: flex; gap: 10px; overflow-x: auto; padding: 10px; }

  .table-scroll select, .filters-scroll input {
    min-width: 150px; padding: 8px; border-radius: 6px; border: 1px solid #f542e6;
  }
  .table-container { margin-top: 20px; overflow-x: auto; }
  .bid-group { display:flex; gap:10px; }
   
table{width:100%;margin-top:20px;background:#fff;border-radius:10px;overflow:hidden; border-collapse: collapse;}
th{background:#10ad10;color:#fff;}
td,th{padding:10px; border: 1px; border-bottom:1px solid #f542e6;}
tr:hover{background:#f1f7ff;}

.status{padding:4px 8px;border-radius:5px;color:#fff;font-size:12px;}
.status.open{background:green;}
.status.close{background:red;}
.status.hold{background:orange;}
=========================================================*/