/* =========================================================



   GPA Site Features – Frontend Styles



   ========================================================= */







/* ── Wrapper ── */



.gpa-wrap {



    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



    margin: 0 0 2em;



    color: #1a1a2e;



}







.gpa-section-title {



    font-size: 1.6rem;



    font-weight: 700;



    margin: 0 0 1rem;



    color: #1a1a2e;



    border-left: 4px solid #c8102e;



    padding-left: .6rem;



}







/* ── Filter bar ── */



.gpa-filter-bar {



    display: flex;



    flex-wrap: wrap;



    gap: .5rem;



    align-items: center;



    margin-bottom: 1rem;



    background: #f4f6f9;



    padding: .75rem 1rem;



    border-radius: 8px;



}







.gpa-filter-input {



   border: 1px solid #666;

    border-radius: 3px;

    padding: .5rem 1rem;



    font-size: .9rem;



    min-width: 140px;



    background: #fff;



}







/* ── Buttons ── */



.gpa-btn {



    display: inline-flex;



    align-items: center;



    gap: .3rem;



    padding: .45rem .9rem;



    border: none;



    border-radius: 6px;



    font-size: .88rem;



    font-weight: 600;



    cursor: pointer;



    transition: background .18s, transform .12s;



    text-decoration: none;



    line-height: 1;



}



.gpa-btn:hover {

    transform: translateY(-1px);

}



.gpa-btn:active {

    transform: translateY(0);

}







.gpa-btn-primary {

    background-color: #00A066!important;

    font-family: "Roboto", Poppins;

    font-size: 16px;

    font-weight: 500;

    line-height: 26px;

    color: #FFFFFF!important;

    border: 2px solid #00A066!important;

    border-radius: 8px!important;

    padding: 7px 15px!important;

}



.gpa-btn-primary:hover, .gpa-btn-primary:focus{

   background-color: #00A066!important;

    color: #fff!important;

}







.gpa-btn-secondary, .gpa-btn-ghost {

   color: #00A066!important;

    background-color: #FFFFFF!important;

    border:2px solid #00A066!important;

    font-family: "Roboto", Poppins;

    font-size: 16px;

    font-weight: 400;

    line-height: 26px;

    border-radius: 8px!important;

    padding: 6px 20px 6px 20px;

}



.gpa-btn-secondary:hover, .gpa-btn-ghost:hover,.gpa-btn-secondary:focus, .gpa-btn-ghost:focus {

    background-color: #FFFFFF;

     color: #00A066;

}







/* .gpa-btn-ghost {

    background: transparent;

    color: #555;

    border: 1px solid #ccd0d5;

}



.gpa-btn-ghost:hover {

    background: #eee;

} */







.gpa-btn-sm {

    padding: .65rem;

    font-size: .82rem;

}







.gpa-btn-edit {

    background: #06275D!important;

    color: #fff;

}



.gpa-btn-edit:hover {

    background: #06275D!important;

    color: #fff;

}







.gpa-btn-delete {

    background: #dc3545;

    color: #fff;

}



.gpa-btn-delete:hover {

    background: #b02a37;

    color: #fff;

}







/* ── Form ── */



.gpa-form-wrap {

font-family: "Roboto", Poppins;

    background: #fff;



    border: 1px solid #e0e4ea;



    border-radius: 10px;



    padding: 1.5rem;



    margin-bottom: 1.25rem;



    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);



}



.gpa-form-wrap h3 {



    margin: 0 0 1rem;



    font-size: 1.15rem;



    color: #1a1a2e;



}



.gpa-form {

    width: 100%;

}







.gpa-form-row {



    display: flex;



    gap: 1rem;



    flex-wrap: wrap;



    margin-bottom: .9rem;



}



.gpa-form-row label {



    flex: 1;



    /* display: flex; */



    flex-direction: column;



    font-size: .9rem;



    font-weight: 600;



    color: #333;



    gap: .3rem;



    min-width: 180px;



}



.gpa-form-row input[type="text"],



.gpa-form-row input[type="date"],



.gpa-form-row input[type="url"],



.gpa-form-row input[type="file"],



.gpa-form-row select,



.gpa-form-row textarea {



   border: 1px solid #666;

    border-radius: 3px;

    padding: .5rem 1rem;



    font-size: .9rem;



    font-family: inherit;



    background: #fff;



    transition: border-color .15s;

    margin-top: 10px;



}



.gpa-form-row input:focus,



.gpa-form-row select:focus,



.gpa-form-row textarea:focus {



    outline: none;



    border-color: #c8102e;



    background: #fff;



}



.gpa-form-row .req {

    color: #c8102e;

}



.gpa-hint {

    font-size: .78rem;

    color: #888;

    font-weight: 400;

}







.gpa-form-actions {



    display: flex;



    gap: .5rem;



    margin-top: .5rem;



}







/* ── Messages ── */



.gpa-msg {



    margin-top: .75rem;



    padding: .5rem .85rem;



    border-radius: 6px;



    font-size: .88rem;



    font-weight: 600;



}



.gpa-msg-success {

    background: #d4edda;

    color: #155724;

}



.gpa-msg-error {

    background: #f8d7da;

    color: #721c24;

}







.gpa-loading {

    color: #777;

    font-style: italic;

}



.gpa-error {

    color: #c0392b;

}



.gpa-empty {

    color: #888;

}







/* ── Table ── */



.gpa-table-wrap {

    overflow-x: auto;

    width:100%;

}







.gpa-table {

font-family: "Roboto", Poppins;

    width: 100%;



    border-collapse: collapse;



    font-size: .9rem;



    background: #fff;



    border-radius: 8px;



    overflow: hidden;



    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);



}



.gpa-table thead {

    background: #1a1a2e;

    color: #fff;

}



.gpa-table th {



    padding: .65rem 1rem;



    text-align: left;



    font-weight: 600;



    font-size: .85rem;



    letter-spacing: .03em;



    white-space: nowrap;



}



.gpa-table td {



    padding: .6rem 1rem;



    border-bottom: 1px solid #f0f0f0;



    vertical-align: middle;



}



.gpa-table tr:last-child td {

    border-bottom: none;

}



.gpa-table tr:hover td {

    background: #fafbff;

}



.gpa-table a {

    color: #c8102e;

    font-weight: 600;

    text-decoration: none;

}



.gpa-table a:hover {

    text-decoration: underline;

}



.gpa-table .gpa-na {

    color: #bbb;

}



.gpa-actions {

    white-space: nowrap;

}







/* ── Card grid ── */



.gpa-card-grid {



    display: grid;



    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));



    gap: 1.1rem;



    margin-top: .5rem;



}







.gpa-card {



    background: #fff;



    border: 1px solid #e5e9f0;



    border-radius: 10px;



    padding: 1.1rem;



    display: flex;



    flex-direction: column;



    gap: .7rem;



    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);



    transition: box-shadow .2s, transform .15s;



}



.gpa-card:hover {



    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);



    transform: translateY(-2px);



}







.gpa-card-icon {



    font-size: 2rem;



    line-height: 1;



}



.gpa-card-body {

    flex: 1;

}



.gpa-card-title {



    font-size: 1rem;



    font-weight: 700;



    margin: 0 0 .4rem;



    color: #1a1a2e;



}



.gpa-card-desc {



    font-size: .85rem;



    color: #555;



    margin: .35rem 0;



    line-height: 1.5;



}



.gpa-card-meta {



    font-size: .77rem;



    color: #999;



    margin: .25rem 0 0;



}



.gpa-card-actions {



    display: flex;



    gap: .4rem;



    flex-wrap: wrap;



}







/* ── Badge ── */



.gpa-badge {



    display: inline-block;



    background: #c8102e22;



    color: #c8102e;



    font-size: .75rem;



    font-weight: 700;



    padding: .15rem .55rem;



    border-radius: 20px;



    margin-bottom: .4rem;



}







/* ── Progress bar ── */



.gpa-progress-bar {



    background: #e9ecef;



    border-radius: 8px;



    height: 10px;



    overflow: hidden;



    margin: .7rem 0 .2rem;



}



.gpa-progress-fill {



    height: 100%;



    background: #c8102e;



    border-radius: 8px;



    width: 0;



    transition: width .2s;



}



#gpa-stage-pct {

    font-size: .8rem;

    color: #666;

    margin: 0;

    text-align: center;

}







/* ── Pagination ── */



.gpa-pagination {

    margin-top: 1rem;

}



.gpa-pages {

    display: flex;

    gap: .35rem;

    align-items: center;

    flex-wrap: wrap;

}



.gpa-page-btn {



    min-width: 34px;



    padding: .3rem .5rem;



    border: 1px solid #dde2ea;



    background: #fff;



    border-radius: 6px;



    cursor: pointer;



    font-size: .85rem;



    transition: background .15s;



}



.gpa-page-btn:hover {

    background: #f0f4ff;

}



.gpa-page-btn.active {

    background: #c8102e;

    color: #fff;

    border-color: #c8102e;

    font-weight: 700;

}



.gpa-page-info {

    font-size: .8rem;

    color: #888;

    margin-left: .4rem;

}







/* ── Responsive ── */



@media (max-width: 600px) {

/* 

    .gpa-filter-bar {

        flex-direction: column;

    } */



    /* .gpa-filter-input,

    .gpa-btn {

        width: 100%;

    } */



    .gpa-btn-primary[style*="margin-left:auto"] {

        margin-left: 0 !important;

    }



    .gpa-form-row {

        flex-direction: column;

    }



    .gpa-card-grid {

        grid-template-columns: 1fr;

    }



}

.gpa-filter-bar input, .gpa-filter-bar select{

	width:auto!important;

}

@media(max-width:992px){

.gpa-filter-bar input, .gpa-filter-bar select{

    	width:100%!important;

}

}

/*  Bay Width Selector (Step 1)  */

.gpa-bay-selector {
    margin-bottom: 1.5rem;
    text-align: center;
    padding: 2rem 1rem;
    background: #f4f6f9;
    border-radius: 10px;
    border: 1px solid #e0e4ea;
}

.gpa-bay-prompt {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 1.25rem;
}

.gpa-bay-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.gpa-bay-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.25rem 2rem;
    background: #fff;
    border: 2px solid #00A066;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    color: #00A066;
    transition: background .18s, color .18s, box-shadow .18s, transform .12s;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.gpa-bay-btn:hover {
    background: #00A066;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,160,102,.25);
}

.gpa-bay-btn.active {
    background: #00A066;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,160,102,.3);
}

.gpa-bay-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.gpa-bay-label {
    font-size: .95rem;
    line-height: 1.4;
    text-align: center;
}

.gpa-bay-label strong {
    font-size: 1.05rem;
}

/*  Advanced Filters section  */

.gpa-advanced-filters {
    margin-bottom: 1rem;
}

.gpa-active-bay-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #e8f7f2;
    border: 1px solid #00A066;
    border-radius: 8px;
    padding: .5rem 1rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

#gpa-active-bay-label {
    font-size: .9rem;
    color: #1a1a2e;
    flex: 1;
}

/*  Bookmark bar  */

.gpa-bookmark-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
    flex-wrap: wrap;
}

.gpa-bookmark-msg {
    font-size: .82rem;
    color: #00A066;
    font-weight: 600;
}

/*  Card badges (new types)  */

.gpa-card-designer {
    font-size: .85rem;
    color: #444;
    margin: .2rem 0 .35rem;
}

.gpa-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .35rem;
}

.gpa-badge-bay {
    background: #dff0ea;
    color: #00A066;
}

.gpa-badge-par {
    background: #e8eaf6;
    color: #3949ab;
}

.gpa-badge-downrange {
    background: #fff3e0;
    color: #e65100;
}

.gpa-badge-baytype {
    background: #fce4ec;
    color: #c62828;
}

@media (max-width: 600px) {
    .gpa-bay-btns {
        flex-direction: column;
        align-items: stretch;
    }
    .gpa-bay-btn {
        min-width: unset;
    }
}