/*
====================================================
PROPFIRM BOT HISTORY PAGE
Professional Exness Style
====================================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:"Poppins",sans-serif;

    background:#0d1117;

    color:#fff;

}

/*====================================
MAIN CONTENT
====================================*/

.main-content{

    flex:1;

    padding:30px;

    overflow-y:auto;

}

/*====================================
TOP BAR
====================================*/

.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.topbar h1{

    font-size:30px;

    font-weight:700;

    color:#ffffff;

}

.topbar p{

    color:#8c96a8;

    margin-top:6px;

    font-size:14px;

}

.top-actions{

    display:flex;

    gap:15px;

}

.refresh-btn,
.download-btn{

    border:none;

    outline:none;

    cursor:pointer;

    padding:13px 24px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    transition:.35s;

}

.refresh-btn{

    background:#1c2432;

    color:#ffffff;

}

.refresh-btn:hover{

    background:#2a3447;

}

.download-btn{

    background:#f7b500;

    color:#000;

}

.download-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(247,181,0,.35);

}

/*====================================
SUMMARY GRID
====================================*/

.summary-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:22px;

    margin-bottom:35px;

}

/*====================================
SUMMARY CARD
====================================*/

.summary-card{

    background:#171f2d;

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:18px;

    transition:.35s;

}

.summary-card:hover{

    transform:translateY(-6px);

    border-color:#f7b500;

    box-shadow:0 18px 35px rgba(0,0,0,.35);

}

.summary-card .icon{

    width:60px;

    height:60px;

    border-radius:15px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#232d3f;

    font-size:24px;

    color:#f7b500;

}

.summary-card .icon.win{

    color:#23d160;

}

.summary-card .icon.loss{

    color:#ff4d6d;

}

.summary-card .icon.profit{

    color:#38bdf8;

}

.summary-card .icon.rate{

    color:#ffd43b;

}

.summary-card span{

    display:block;

    color:#97a1b5;

    font-size:13px;

    margin-bottom:5px;

}

.summary-card h2{

    min-width:0;

    font-size:clamp(16px, 1.7vw, 22px);

    font-weight:700;

    color:#ffffff;

    line-height:1.3;

    font-variant-numeric:tabular-nums;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}
/*====================================
FILTER PANEL
====================================*/

.history-filter{

    background:#171f2d;

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    padding:25px;

    margin-bottom:30px;

}

.filter-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

/*====================================
ACCOUNT SELECT
====================================*/

.account-box{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.account-box label{

    color:#9aa6bd;

    font-size:13px;

    font-weight:500;

}

.account-box select{

    width:320px;

    height:50px;

    border:none;

    outline:none;

    border-radius:12px;

    background:#0f1724;

    color:#fff;

    padding:0 18px;

    font-size:15px;

    border:1px solid #293548;

}

.account-box select:focus{

    border-color:#f7b500;

}

/*====================================
TABS
====================================*/

.tab-buttons{

    display:flex;

    gap:12px;

}

.tab-btn{

    border:none;

    cursor:pointer;

    padding:12px 28px;

    border-radius:12px;

    background:#101827;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.tab-btn:hover{

    background:#253247;

}

.tab-btn.active{

    background:#f7b500;

    color:#000;

}

/*====================================
FILTER ROW
====================================*/

.filter-row{

    display:grid;

    grid-template-columns:

    180px

    180px

    1fr

    170px;

    gap:18px;

    align-items:end;

}

.filter-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.filter-group label{

    color:#97a1b5;

    font-size:13px;

}

.filter-group input{

    height:48px;

    border:none;

    outline:none;

    border-radius:12px;

    background:#101827;

    color:#fff;

    padding:0 16px;

    border:1px solid #2d384b;

}

.filter-group input:focus{

    border-color:#f7b500;

}

/*====================================
SEARCH
====================================*/

.search-box{

    display:flex;

    align-items:center;

    height:48px;

    border-radius:12px;

    overflow:hidden;

    background:#101827;

    border:1px solid #2d384b;

}

.search-box i{

    width:55px;

    text-align:center;

    color:#8d99ae;

}

.search-box input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    color:#fff;

    font-size:14px;

    padding-right:15px;

}

.search-box:focus-within{

    border-color:#f7b500;

}

/*====================================
FILTER BUTTON
====================================*/

.filter-btn{

    height:48px;

    border:none;

    cursor:pointer;

    border-radius:12px;

    background:#f7b500;

    color:#000;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.filter-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(247,181,0,.35);

}
/*====================================
HISTORY TABLE CARD
====================================*/

.history-table-card{

    background:#171f2d;

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    overflow:hidden;

    margin-bottom:30px;

}

.table-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.table-header h2{

    font-size:22px;

    font-weight:600;

    color:#ffffff;

}

.table-header span{

    color:#9aa6bd;

    font-size:14px;

}

/*====================================
TABLE WRAPPER
====================================*/

.table-wrapper{

    width:100%;

    overflow-x:auto;

}

.table-wrapper::-webkit-scrollbar{

    height:8px;

}

.table-wrapper::-webkit-scrollbar-thumb{

    background:#2d3a4d;

    border-radius:20px;

}

/*====================================
TABLE
====================================*/

.history-table{

    width:100%;

    border-collapse:collapse;

    min-width:1500px;

}

.history-table thead{

    background:#101827;

}

.history-table thead th{

    padding:18px 15px;

    color:#f7b500;

    font-size:13px;

    text-transform:uppercase;

    font-weight:600;

    letter-spacing:.5px;

    white-space:nowrap;

}

.history-table tbody tr{

    transition:.25s;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.history-table tbody tr:hover{

    background:#202b3d;

}

.history-table tbody td{

    padding:18px 15px;

    color:#ffffff;

    font-size:14px;

    white-space:nowrap;

}

/*====================================
BUY / SELL
====================================*/

.buy{

    color:#34d399;

    font-weight:700;

}

.sell{

    color:#ff6b6b;

    font-weight:700;

}

/*====================================
PROFIT
====================================*/

.profit-positive{

    color:#22c55e;

    font-weight:700;

}

.profit-negative{

    color:#ef4444;

    font-weight:700;

}

.profit-zero{

    color:#9ca3af;

    font-weight:600;

}

/*====================================
STATUS BADGES
====================================*/

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:8px 15px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}

.status-win{

    background:rgba(34,197,94,.15);

    color:#22c55e;

}

.status-loss{

    background:rgba(239,68,68,.15);

    color:#ef4444;

}

.status-open{

    background:rgba(59,130,246,.15);

    color:#3b82f6;

}

/*====================================
EMPTY STATE
====================================*/

.empty-row td{

    padding:70px 20px;

    text-align:center;

}

.empty-history{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.empty-history i{

    font-size:70px;

    color:#f7b500;

    margin-bottom:20px;

    opacity:.85;

}

.empty-history h3{

    font-size:26px;

    margin-bottom:12px;

    color:#ffffff;

}

.empty-history p{

    max-width:500px;

    color:#94a3b8;

    line-height:1.7;

}
/*====================================
PAGINATION
====================================*/

.history-pagination{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:35px 0;

    flex-wrap:wrap;

    gap:20px;

}

.page-btn{

    border:none;

    cursor:pointer;

    background:#171f2d;

    color:#ffffff;

    padding:12px 22px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.page-btn:hover{

    background:#f7b500;

    color:#000;

}

.page-numbers{

    display:flex;

    align-items:center;

    gap:10px;

}

.page-number{

    width:42px;

    height:42px;

    border:none;

    cursor:pointer;

    border-radius:10px;

    background:#171f2d;

    color:#fff;

    transition:.3s;

    font-weight:600;

}

.page-number:hover{

    background:#2b3950;

}

.page-number.active{

    background:#f7b500;

    color:#000;

}

/*====================================
FOOTER SUMMARY
====================================*/

.history-footer{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:40px;

}

.footer-card{

    background:#171f2d;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.05);

    padding:25px;

    transition:.35s;

}

.footer-card:hover{

    transform:translateY(-5px);

    border-color:#f7b500;

    box-shadow:0 15px 30px rgba(0,0,0,.30);

}

.footer-card span{

    display:block;

    color:#94a3b8;

    margin-bottom:8px;

    font-size:14px;

}

.footer-card h3{

    font-size:clamp(17px, 1.8vw, 24px);

    font-weight:700;

    color:#fff;

    font-variant-numeric:tabular-nums;

    overflow-wrap:anywhere;

}

/*====================================
SCROLLBAR
====================================*/

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-thumb{

    background:#2b3950;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#0d1117;

}

/*====================================
ANIMATIONS
====================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.summary-card,

.history-filter,

.history-table-card,

.footer-card{

    animation:fadeUp .5s ease;

}

/*====================================
RESPONSIVE
====================================*/

@media(max-width:1200px){

    .filter-row{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:900px){

    .topbar{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .filter-top{

        flex-direction:column;

        align-items:flex-start;

    }

    .account-box select{

        width:100%;

    }

    .top-actions{

        flex-wrap:wrap;

    }

}

@media(max-width:768px){

    .main-content{

        min-width:0;

        padding:16px;

    }

    .summary-grid{

        grid-template-columns:1fr;

    }

    .history-footer{

        grid-template-columns:1fr;

    }

    .filter-row{

        grid-template-columns:1fr;

    }

    .page-numbers{

        flex-wrap:wrap;

    }

    .history-filter,
    .history-table-card,
    .history-footer,
    .summary-card,
    .summary-card>div{

        min-width:0;

    }

    .summary-card h2{

        font-size:clamp(14px,4.5vw,20px);

    }

    .top-actions{

        width:100%;

        gap:8px;

    }

    .top-actions button{

        flex:1 1 130px;

        padding:11px 12px;

    }

    .history-filter{

        padding:16px;

    }

}

@media(max-width:480px){

    .topbar h1{

        font-size:24px;

    }

    .summary-card{

        flex-direction:column;

        text-align:center;

    }

    .summary-card .icon{

        margin-bottom:10px;

    }

}
/* =========================================
   TRADE MODAL
========================================= */

.trade-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.trade-modal-content{

    width:700px;

    max-width:95%;

    background:#1c2434;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    padding:25px;

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.modal-header h2{

    color:#fff;

    font-size:24px;

}

.modal-header button{

    background:none;

    border:none;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

.modal-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.modal-grid div{

    background:#131a28;

    border-radius:12px;

    padding:14px;

}

.modal-grid label{

    display:block;

    color:#8c96ab;

    font-size:12px;

    margin-bottom:6px;

}

.modal-grid span{

    color:#fff;

    font-weight:600;

}
/* BUY */

.history-table td.buy{
    color:#2196F3 !important;
    font-weight:700;
}

.history-table td.buy i{
    color:#2196F3 !important;
}

/* SELL */

.history-table td.sell{
    color:#ff4d4f !important;
    font-weight:700;
}

.history-table td.sell i{
    color:#ff4d4f !important;
}
.history-table td.profit-positive{
    color:#3498db !important;
    font-weight:700;
}

.history-table td.profit-negative{
    color:#ff4d4f !important;
    font-weight:700;
}

.history-table td.profit-zero{
    color:#9ca3af !important;
    font-weight:700;
}
/* =====================================
   TABLE LOADER
===================================== */

.table-loader{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:60px 20px;

    gap:15px;

}

.loader{

    width:55px;

    height:55px;

    border:5px solid rgba(255,255,255,.15);

    border-top:5px solid #f3c623;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.table-loader h3{

    color:#fff;

    font-size:18px;

    margin:0;

}

.table-loader p{

    color:#9ca3af;

    margin:0;

    font-size:14px;

}
.date-input{

    width:100%;
    height:80px;

    background:#121b2d;

    color:#fff;

    border:1px solid #29344d;

    border-radius:12px;

    padding:0 14px;

    font-size:14px;

    outline:none;

    cursor:pointer;

}

.date-input:focus{

    border-color:#f3c623;

    box-shadow:0 0 0 3px rgba(243,198,35,.15);

}

/* Calendar icon */

.date-input::-webkit-calendar-picker-indicator{

    cursor:pointer;

    filter:invert(1);

}