/* ============================================
   GHATAL TENDER BOARD — Frontend CSS v2
   Design: Mobile-first, large text, clear UX
   ============================================ */

:root {
    --gtb-green:     #16A37F;
    --gtb-green-dk:  #0D7A60;
    --gtb-green-lt:  #E8F8F3;
    --gtb-wa:        #25D366;
    --gtb-wa-dk:     #1DAA56;
    --gtb-text:      #111827;
    --gtb-text-2:    #374151;
    --gtb-text-3:    #6B7280;
    --gtb-border:    #E5E7EB;
    --gtb-border-2:  #D1D5DB;
    --gtb-bg:        #F9FAFB;
    --gtb-white:     #FFFFFF;
    --gtb-red:       #DC2626;
    --gtb-red-lt:    #FEF2F2;
    --gtb-yellow:    #D97706;
    --gtb-yellow-lt: #FFFBEB;
    --gtb-radius:    12px;
    --gtb-radius-sm: 8px;
    --gtb-shadow:    0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
    --gtb-shadow-hover: 0 4px 12px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06);
    --gtb-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Bengali', sans-serif;
}

.gtb-board, .gtb-form-section, .gtb-manage-section {
    font-family: var(--gtb-font);
    color: var(--gtb-text);
    line-height: 1.6;
}

/* ---- FILTER BAR ---- */
.gtb-filter-form { margin-bottom: 20px; }
.gtb-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: var(--gtb-white);
    border: 1px solid var(--gtb-border);
    border-radius: var(--gtb-radius);
    padding: 16px 20px;
    box-shadow: var(--gtb-shadow);
}
.gtb-filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.gtb-filter-label { font-size: 13px; font-weight: 600; color: var(--gtb-text-3); text-transform: uppercase; letter-spacing: .04em; }
.gtb-select {
    padding: 10px 14px;
    border: 1.5px solid var(--gtb-border-2);
    border-radius: var(--gtb-radius-sm);
    font-size: 15px;
    color: var(--gtb-text);
    background: var(--gtb-white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    transition: border-color .2s;
}
.gtb-select:focus { border-color: var(--gtb-green); outline: none; box-shadow: 0 0 0 3px rgba(22,163,127,.15); }
.gtb-clear-filter {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--gtb-text-3);
    text-decoration: none; padding: 10px 0;
    border-bottom: 1px dashed var(--gtb-border-2);
    transition: color .2s;
    align-self: flex-end;
}
.gtb-clear-filter:hover { color: var(--gtb-red); }

/* ---- COUNT BAR ---- */
.gtb-count-bar {
    display: flex; align-items: center;
    margin-bottom: 16px;
    font-size: 14px; color: var(--gtb-text-3);
}
.gtb-result-count strong { color: var(--gtb-green); }

/* ---- CARD GRID ---- */
.gtb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* ---- TENDER CARD ---- */
.gtb-card {
    background: var(--gtb-white);
    border: 1px solid var(--gtb-border);
    border-radius: var(--gtb-radius);
    padding: 20px;
    box-shadow: var(--gtb-shadow);
    transition: box-shadow .2s, transform .2s;
    display: flex; flex-direction: column; gap: 0;
}
.gtb-card:hover { box-shadow: var(--gtb-shadow-hover); transform: translateY(-2px); }

.gtb-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}

/* Badges */
.gtb-badge {
    display: inline-block; padding: 4px 12px;
    border-radius: 20px; font-size: 12px; font-weight: 700;
    letter-spacing: .02em;
}
.gtb-badge-toto   { background: #D1FAE5; color: #065F46; }
.gtb-badge-maruti { background: #DBEAFE; color: #1E40AF; }
.gtb-badge-bus    { background: #FEF3C7; color: #92400E; }
.gtb-badge-loader { background: #FCE7F3; color: #9D174D; }

/* Expiry */
.gtb-expiry { font-size: 13px; color: var(--gtb-text-3); font-weight: 500; }
.gtb-expiry-urgent { color: var(--gtb-red); font-weight: 700; }

/* Card content */
.gtb-card-name {
    font-size: 18px; font-weight: 700;
    color: var(--gtb-text); margin: 0 0 8px;
}
.gtb-card-msg {
    font-size: 15px; color: var(--gtb-text-2);
    margin: 0 0 14px; line-height: 1.6;
}
.gtb-card-details {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 16px;
    background: var(--gtb-bg);
    border-radius: var(--gtb-radius-sm);
    padding: 12px 14px;
}
.gtb-detail-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: var(--gtb-text-2);
}
.gtb-detail-icon { font-size: 15px; flex-shrink: 0; }

/* Action buttons */
.gtb-card-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.gtb-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 12px 16px;
    border-radius: var(--gtb-radius-sm);
    font-size: 15px; font-weight: 700;
    text-decoration: none;
    transition: opacity .15s, transform .1s;
    cursor: pointer;
}
.gtb-btn:hover { opacity: .9; transform: scale(.98); }
.gtb-btn-call { background: var(--gtb-green); color: #fff; }
.gtb-btn-wa   { background: var(--gtb-wa);    color: #fff; }
.gtb-btn-icon { font-size: 16px; }

.gtb-card-footer {
    font-size: 12px; color: var(--gtb-text-3);
    text-align: right; margin: 0;
    padding-top: 8px; border-top: 1px solid var(--gtb-border);
}

/* ---- EMPTY STATE ---- */
.gtb-empty-state {
    text-align: center; padding: 60px 20px;
    background: var(--gtb-white);
    border: 1px solid var(--gtb-border);
    border-radius: var(--gtb-radius);
}
.gtb-empty-icon   { font-size: 48px; margin-bottom: 12px; }
.gtb-empty-title  { font-size: 18px; font-weight: 700; color: var(--gtb-text); margin: 0 0 6px; }
.gtb-empty-sub    { font-size: 15px; color: var(--gtb-text-3); margin: 0 0 20px; }
.gtb-btn-primary-link {
    display: inline-block; padding: 12px 24px;
    background: var(--gtb-green); color: #fff;
    border-radius: var(--gtb-radius-sm); font-weight: 700;
    text-decoration: none; font-size: 15px;
}

/* ============================================
   POST FORM
   ============================================ */
.gtb-form-section { max-width: 640px; }

.gtb-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px; border-radius: var(--gtb-radius);
    margin-bottom: 20px; font-size: 15px; line-height: 1.6;
}
.gtb-alert-success { background: var(--gtb-green-lt); border: 1px solid #6EE7B7; color: #065F46; }
.gtb-alert-error   { background: var(--gtb-red-lt);   border: 1px solid #FCA5A5; color: #991B1B; }
.gtb-alert-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.gtb-alert-sub { font-size: 13px; margin-top: 4px; opacity: .85; }
.gtb-inline-link { color: inherit; font-weight: 700; text-decoration: underline; }

.gtb-form-card {
    background: var(--gtb-white);
    border: 1px solid var(--gtb-border);
    border-radius: var(--gtb-radius);
    padding: 28px 32px;
    box-shadow: var(--gtb-shadow);
}
.gtb-form-title { margin-bottom: 24px; }
.gtb-form-title h2 { font-size: 22px; font-weight: 800; color: var(--gtb-text); margin: 0 0 4px; }
.gtb-form-title p  { font-size: 15px; color: var(--gtb-text-3); margin: 0; }

.gtb-field { margin-bottom: 20px; position: relative; }
.gtb-label {
    display: block; font-size: 15px; font-weight: 600;
    color: var(--gtb-text); margin-bottom: 8px;
}
.gtb-req     { color: var(--gtb-red); }
.gtb-optional { color: var(--gtb-text-3); font-weight: 400; font-size: 13px; }

.gtb-input, .gtb-textarea {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid var(--gtb-border-2);
    border-radius: var(--gtb-radius-sm);
    font-size: 16px; color: var(--gtb-text);
    background: var(--gtb-white);
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    font-family: var(--gtb-font);
}
.gtb-textarea { resize: vertical; min-height: 80px; }
.gtb-input:focus, .gtb-textarea:focus {
    border-color: var(--gtb-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22,163,127,.15);
}
.gtb-input.gtb-input-error { border-color: var(--gtb-red); }
.gtb-input.gtb-input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }

.gtb-char-count {
    position: absolute; right: 0; bottom: -20px;
    font-size: 12px; color: var(--gtb-text-3);
}

/* Phone field */
.gtb-phone-wrap { display: flex; align-items: center; gap: 0; }
.gtb-phone-prefix {
    padding: 12px 14px;
    background: var(--gtb-bg); border: 1.5px solid var(--gtb-border-2);
    border-right: none; border-radius: var(--gtb-radius-sm) 0 0 var(--gtb-radius-sm);
    font-size: 16px; font-weight: 600; color: var(--gtb-text-3);
    flex-shrink: 0;
}
.gtb-input-phone { border-radius: 0 var(--gtb-radius-sm) var(--gtb-radius-sm) 0 !important; flex: 1; }

/* Budget field */
.gtb-budget-wrap { display: flex; align-items: center; }
.gtb-currency {
    padding: 12px 14px;
    background: var(--gtb-bg); border: 1.5px solid var(--gtb-border-2);
    border-right: none; border-radius: var(--gtb-radius-sm) 0 0 var(--gtb-radius-sm);
    font-size: 16px; font-weight: 600; color: var(--gtb-text-3);
}
.gtb-input-budget { border-radius: 0 var(--gtb-radius-sm) var(--gtb-radius-sm) 0 !important; flex: 1; }

/* Same as phone */
.gtb-same-label {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 8px; font-size: 14px; color: var(--gtb-text-2);
    cursor: pointer;
}
.gtb-same-label input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--gtb-green); }

/* Two-column row */
.gtb-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.gtb-row-2 .gtb-field { margin-bottom: 0; }

/* Submit button */
.gtb-submit-btn {
    width: 100%; padding: 15px;
    background: var(--gtb-green); color: #fff;
    border: none; border-radius: var(--gtb-radius-sm);
    font-size: 17px; font-weight: 800;
    cursor: pointer; letter-spacing: .01em;
    transition: background .2s, transform .1s;
    font-family: var(--gtb-font);
}
.gtb-submit-btn:hover  { background: var(--gtb-green-dk); }
.gtb-submit-btn:active { transform: scale(.98); }
.gtb-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

.gtb-disclaimer {
    font-size: 13px; color: var(--gtb-text-3);
    text-align: center; margin: 14px 0 0;
    line-height: 1.6;
}

/* ============================================
   VALIDATION POPUP
   ============================================ */
.gtb-popup-overlay {
    display: none; position: fixed;
    inset: 0; background: rgba(0,0,0,.5);
    z-index: 9999; align-items: center; justify-content: center;
}
.gtb-popup-overlay.gtb-open { display: flex; animation: gtbFadeIn .15s ease; }
@keyframes gtbFadeIn { from { opacity:0 } to { opacity:1 } }
.gtb-popup {
    background: var(--gtb-white); border-radius: var(--gtb-radius);
    padding: 32px 28px; max-width: 320px; width: 90%;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: gtbSlideUp .2s ease;
}
@keyframes gtbSlideUp { from { transform: translateY(20px); opacity:0 } to { transform: translateY(0); opacity:1 } }
.gtb-popup-icon  { font-size: 40px; margin-bottom: 12px; }
.gtb-popup-msg   { font-size: 17px; font-weight: 600; color: var(--gtb-text); margin: 0 0 20px; }
.gtb-popup-btn {
    display: inline-block; padding: 12px 36px;
    background: var(--gtb-green); color: #fff;
    border: none; border-radius: var(--gtb-radius-sm);
    font-size: 16px; font-weight: 700; cursor: pointer;
    font-family: var(--gtb-font);
}

/* ============================================
   MANAGE TENDER
   ============================================ */
.gtb-manage-section { max-width: 640px; }

.gtb-manage-lookup-card {
    background: var(--gtb-white);
    border: 1px solid var(--gtb-border);
    border-radius: var(--gtb-radius);
    padding: 28px 32px;
    box-shadow: var(--gtb-shadow);
    margin-bottom: 28px;
}
.gtb-manage-title { font-size: 22px; font-weight: 800; color: var(--gtb-text); margin: 0 0 6px; }
.gtb-manage-sub   { font-size: 15px; color: var(--gtb-text-3); margin: 0 0 20px; }

.gtb-lookup-row { display: flex; gap: 10px; }
.gtb-lookup-phone { flex: 1; }
.gtb-lookup-btn {
    padding: 12px 20px; background: var(--gtb-green);
    color: #fff; border: none; border-radius: var(--gtb-radius-sm);
    font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
    font-family: var(--gtb-font); transition: background .2s;
}
.gtb-lookup-btn:hover { background: var(--gtb-green-dk); }

.gtb-manage-results-title { font-size: 17px; font-weight: 700; color: var(--gtb-text); margin: 0 0 16px; }
.gtb-manage-list { display: flex; flex-direction: column; gap: 14px; }

.gtb-manage-card {
    background: var(--gtb-white);
    border: 1.5px solid var(--gtb-border);
    border-radius: var(--gtb-radius);
    padding: 20px; box-shadow: var(--gtb-shadow);
}
.gtb-manage-card-active  { border-color: #6EE7B7; }
.gtb-manage-card-closed  { opacity: .7; }

.gtb-manage-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

.gtb-status-pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.gtb-status-active  { background: var(--gtb-green-lt); color: #065F46; }
.gtb-status-expired { background: #F3F4F6;             color: #6B7280; }
.gtb-status-closed  { background: #F3F4F6;             color: #6B7280; }

.gtb-manage-msg  { font-size: 15px; color: var(--gtb-text-2); margin: 0 0 10px; line-height: 1.6; }
.gtb-manage-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--gtb-text-3); margin-bottom: 14px; }

.gtb-close-tender-btn {
    width: 100%; padding: 12px;
    background: var(--gtb-green-lt); color: var(--gtb-green-dk);
    border: 1.5px solid #6EE7B7; border-radius: var(--gtb-radius-sm);
    font-size: 15px; font-weight: 700; cursor: pointer;
    font-family: var(--gtb-font); transition: background .2s;
}
.gtb-close-tender-btn:hover { background: #C6F2E2; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .gtb-filter-row   { flex-direction: column; }
    .gtb-filter-group { min-width: 100%; }
    .gtb-grid         { grid-template-columns: 1fr; }
    .gtb-row-2        { grid-template-columns: 1fr; }
    .gtb-form-card, .gtb-manage-lookup-card { padding: 20px 18px; }
    .gtb-lookup-row   { flex-direction: column; }
    .gtb-lookup-btn   { width: 100%; }
    .gtb-card         { padding: 16px; }
    .gtb-btn          { font-size: 14px; padding: 11px 12px; }
}