/**
 * Theme Name:     watchlist Child
 * Author:         Tradeskillz
 * Template:       watchlist
 * Text Domain:	   watchlist-child
 * Description:    This is a childe theme of watchlist
 * Version:        1.0
 */


/*=====================================================
  THEME VARIABLES
=====================================================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --success:#16a34a;
    --danger:#dc2626;
    --warning:#d97706;
    --info:#0ea5e9;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;
    --border-light:#eef2f7;

    --bg:#f8fafc;
    --white:#ffffff;

    --radius:12px;

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --shadow:0 3px 12px rgba(0,0,0,.08);
    --shadow-lg:0 10px 30px rgba(0,0,0,.12);

    --transition:.25s ease;

}


/*=====================================================
  GLOBAL
=====================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);
    color:var(--text);

    font-size:15px !important;
    line-height:1.6 !important;

    font-family:
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

}


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

.wrapper{

    max-width:1500px;

    margin:30px auto;

    padding:0 20px;

}


/*=====================================================
  TYPOGRAPHY
=====================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:#111827;

    font-weight:700;

    margin-bottom:18px;

}

p{

    margin-bottom:15px;

}

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary-dark);

}


/*=====================================================
  BUTTONS
=====================================================*/

.button,
button,
input[type="submit"]{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:40px;

    padding:10px 18px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    transition:var(--transition);

    font-size:14px;

    font-weight:600;

}

.button-primary{

    background:var(--primary);

    color:#fff;

}

.button-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-1px);

}

.button-small{

    min-height:34px;

    padding:7px 14px;

    font-size:13px;

}

.button:hover{

    box-shadow:var(--shadow-sm);

}


/*=====================================================
  FORM
=====================================================*/

.trade-form{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(140px,1fr));

    gap:20px;

    background:#fff;

    padding:25px;

    margin-bottom:30px;

    border-radius:12px;

    box-shadow:var(--shadow);

}


.form-group{

    display:flex;

    flex-direction:column;

}


.form-group label{

    font-size:13px;

    font-weight:600;

    color:var(--text-light);

    margin-bottom:8px;

}


.form-group input,
.form-group textarea,
.form-group select{

    width:100%;

    border:1px solid var(--border);

    border-radius:8px;

    background:#fff;

    transition:var(--transition);

    padding:10px 12px;

    font-size:14px;

    color:var(--text);

}


.form-group input{

    height:42px;

}


.form-group textarea{

    min-height:110px;

    resize:vertical;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:

    0 0 0 3px

    rgba(37,99,235,.12);

}


.button-group{

    justify-content: unset;

}


.button-group label{

    visibility:hidden;

}


/*=====================================================
  RADIO GROUP
=====================================================*/

.radio-group{

    display:flex;

    gap:18px;

    align-items:center;

    min-height:42px;

}


.radio-group label{

    display:flex;

    align-items:center;

    gap:6px;

    margin:0;

    cursor:pointer;

}


.radio-group input{

    width:auto;

    height:auto;

    accent-color:var(--primary);

}


/*=====================================================
  NOTICE
=====================================================*/

.notice{

    border-radius:10px;

    padding:14px 18px;

    margin-bottom:20px;

    box-shadow:var(--shadow-sm);

}


.notice-success{

    background:#dcfce7;

    color:#166534;

}


.notice-error{

    background:#fee2e2;

    color:#991b1b;

}


/*=====================================================
  UTILITIES
=====================================================*/

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt-20{

    margin-top:20px;

}

.mb-20{

    margin-bottom:20px;

}
/*=====================================================
  DIRECTIONAL WATCHLIST
=====================================================*/

.directional-intraday-wrap{

    background:#fff;

    border-radius:12px;

    padding:25px;

    box-shadow:var(--shadow);

    margin-bottom:30px;

}


/*=====================================================
  TOOLBARS
=====================================================*/

#journalToolbar,
#watchlistToolbar{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    background:#fff;

    padding:16px 20px;

    border-radius:12px;

    box-shadow:var(--shadow);

    margin-bottom:20px;

}

#journalToolbar label,
#watchlistToolbar label{

    font-size:13px;

    font-weight:600;

    color:var(--text-light);

}

#journalToolbar input,
#watchlistToolbar input,
#journalToolbar select,
#watchlistToolbar select{

    height:38px;

    border:1px solid var(--border);

    border-radius:8px;

    padding:0 10px;

    background:#fff;

}

#journalLength,
#watchlistLength{

    margin-right:auto;

    font-weight:600;

}


/*=====================================================
  REVIEW FILTER
=====================================================*/

.review-filter{

    display:flex;

    align-items:center;

    gap:12px;

    /*margin-bottom:18px;*/
    
    justify-content: flex-end;

}

.review-filter label{

    font-weight:600;

}

.review-filter select{

    width:180px;

    height:40px;

    border:1px solid var(--border);

    border-radius:8px;

    padding:0 12px;

}


/*=====================================================
  DATATABLE
=====================================================*/

table.display{

    width:100% !important;

    border-collapse:collapse;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

table.display thead{

    background:#f8fafc;

}

table.display th{

    padding:14px;

    text-align:left;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:#475569;

    border-bottom:1px solid var(--border);

}

table.display td{

    padding:14px;

    /*border-bottom:1px solid #edf2f7;*/

    vertical-align:middle;

}

table.display tbody tr{

    transition:.2s;

}

table.display tbody tr:nth-child(even){

    background:#fafafa;

}

table.display tbody tr:hover{

    background:#eef6ff;

}


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

table.display .button{

    margin-right:6px;

    margin-bottom:4px;

}

.edit-record{

    background:#2563eb;

    color:#fff;

}

.edit-record:hover{

    background:#1d4ed8;

}

.delete-record{

    background:#dc2626;

    color:#fff;

}

.delete-record:hover{

    background:#b91c1c;

}

.enter-trade{

    background:#16a34a;

    color:#fff;

}

.enter-trade:hover{

    background:#15803d;

}


/*=====================================================
  ENTERED LABEL
=====================================================*/

.entered-label{

    display:inline-block;

    background:#dcfce7;

    color:#166534;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}


/*=====================================================
  DIRECTIONAL STATUS
=====================================================*/

.status-bullish{

    color:#16a34a;

    font-weight:700;

}

.status-bearish{

    color:#dc2626;

    font-weight:700;

}

.status-watch{

    color:#d97706;

    font-weight:700;

}


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

.dataTables_filter input{

    height:38px;

    border:1px solid var(--border);

    border-radius:8px;

    padding:0 12px;

}

.dataTables_length select{

    height:38px;

    border:1px solid var(--border);

    border-radius:8px;

    padding:0 10px;

}


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

.dataTables_paginate{

    margin-top:20px !important;

}

.dataTables_paginate .paginate_button{

    /*border-radius:8px !important;*/

    border:none !important;

    padding:6px 12px !important;

}

.dataTables_paginate .current{

    background:var(--primary) !important;

    color:#fff !important;

}


/*=====================================================
  INFO
=====================================================*/

.dataTables_info{

    padding-top:18px !important;

    color:#6b7280;

}
/*=====================================================
  JOURNAL GRID
=====================================================*/

.journal-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:20px;

}

.journal-grid .form-group{

    margin-bottom:0;

}


/*=====================================================
  WATCHLIST FORM
=====================================================*/

#watchlist-form{

    background:#fff;

    border-radius:12px;

    box-shadow:var(--shadow);

}

#watchlist-form textarea{

    min-height:50px;

}


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

#journalTable td,
#watchlistTable td,
#directionalTable td{

    white-space:nowrap;

}

#journalTable td:nth-child(11),
#journalTable td:nth-child(12){

    white-space:normal;

    max-width:220px;

}


/*=====================================================
  P/L
=====================================================*/

.profit{

    color:var(--success);

    font-weight:700;

}

.loss{

    color:var(--danger);

    font-weight:700;

}


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

.status-open{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    background:#dbeafe;

    color:#1d4ed8;

    font-size:12px;

    font-weight:700;

}

.status-closed{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    background:#dcfce7;

    color:#15803d;

    font-size:12px;

    font-weight:700;

}

.status-cancelled{

    display:inline-block;

    padding:6px 12px;

    border-radius:999px;

    background:#fee2e2;

    color:#dc2626;

    font-size:12px;

    font-weight:700;

}


/*=====================================================
  MODAL BACKDROP
=====================================================*/

#editModal,
#journalModal,#optionModal{

    display:none;
 
    position:fixed;

    inset:0;

    background:rgba(15,23,42,.55);

    z-index:9999;

    align-items:center;

    justify-content:center;

    padding:30px;

}



#editModal.active,
#journalModal.active,
#optionModal.active{
    display:flex;
}

/*=====================================================
  MODAL BOX
=====================================================*/

.edit-modal-content{

    width:100%;

    max-width:820px;

    background:#fff;

    border-radius:16px;

    padding:30px;

    box-shadow:var(--shadow-lg);

    animation:modalFade .25s ease;

    max-height:90vh;

    overflow-y:auto;

}

.edit-modal-content h3,
.edit-modal-content h5{

    margin-bottom:22px;

    color:#111827;

}


/*=====================================================
  MODAL GROUP
=====================================================*/

.modal-group{

    display:grid;

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

    gap:18px;

    margin-bottom:18px;

}

.modal-group.separate{

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

}


/*=====================================================
  MODAL BUTTONS
=====================================================*/

.modal-buttons{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:25px;

    padding-top:20px;

    border-top:1px solid var(--border);

}

.modal-buttons .button{

    min-width:110px;

}


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

.edit-modal-content::-webkit-scrollbar{

    width:8px;

}

.edit-modal-content::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}


/*=====================================================
  TITLE TOOLTIP CELLS
=====================================================*/

td[title]{

    cursor:help;

}


/*=====================================================
  EMPTY VALUE
=====================================================*/

td:empty::before{

    content:"—";

    color:#cbd5e1;

}


/*=====================================================
  ACTION BUTTON GROUP
=====================================================*/

td:last-child{

    white-space:nowrap;

}


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

.dataTables_wrapper{

    background:#fff;

    border-radius:12px;

    padding:20px;

    box-shadow:var(--shadow);

}


/*=====================================================
  DATATABLE HEADER
=====================================================*/

.dataTables_wrapper .top,
.dataTables_wrapper .bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}


/*=====================================================
  MODAL ANIMATION
=====================================================*/

@keyframes modalFade{

    from{

        opacity:0;

        transform:translateY(-12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=====================================================
  HOVER EFFECT
=====================================================*/

.edit-modal-content input:hover,
.edit-modal-content textarea:hover,
.edit-modal-content select:hover{

    border-color:var(--primary);

}


/*=====================================================
  DISABLED
=====================================================*/

input:disabled,
select:disabled,
textarea:disabled{

    background:#f3f4f6;

    cursor:not-allowed;

    opacity:.85;

}


/*=====================================================
  RESPONSIVE (JOURNAL)
=====================================================*/

@media(max-width:992px){

    .journal-grid{

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

    }

    .modal-group{

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

    }

}

@media(max-width:640px){

    .journal-grid,
    .modal-group,
    .modal-group.separate{

        grid-template-columns:1fr;

    }

    .modal-buttons{

        flex-direction:column;

    }

    .modal-buttons .button{

        width:100%;

    }

}
/*=====================================================
  DASHBOARD
=====================================================*/

.dashboard-container{

    max-width:1400px;

    margin:30px auto;

    padding:0 20px 40px;

}


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

.dashboard-filter{

    background:#fff;

    padding:20px 24px;

    border-radius:14px;

    box-shadow:var(--shadow);

    margin-bottom:28px;

}

.dashboard-filter-row{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:16px;

}

.dashboard-filter-row label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:600;

    color:var(--text-light);

}

.dashboard-filter input[type="radio"]{

    accent-color:var(--primary);

}

.dashboard-filter input[type="date"]{

    width:150px;

    height:40px;

}

.dashboard-filter button{

    margin-left:auto;

}


/*=====================================================
  DASHBOARD SECTION
=====================================================*/

.dashboard-section{

    background:#fff;

    border-radius:14px;

    padding:24px;

    margin-bottom:30px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.dashboard-section:hover{

    box-shadow:var(--shadow-lg);

}


/*=====================================================
  SECTION HEADER
=====================================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

    padding-bottom:15px;

    border-bottom:1px solid var(--border-light);

}

.section-header h2,
.section-header h4{

    margin:0;

    font-size:22px;

    color:#1e3a8a;

}

.section-header a{

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:6px;

}

.section-header a::after{

    content:"→";

    transition:.2s;

}

.section-header a:hover::after{

    transform:translateX(4px);

}


/*=====================================================
  CARD GRID
=====================================================*/

.dashboard-cards{

    display:grid;

    gap:20px;

}

.dashboard-cards-4{

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

}

.dashboard-cards-5{

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

}

.dashboard-cards-7{

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

}


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

.dashboard-card{

    position:relative;

    background:#fff;

    border:1px solid var(--border-light);

    border-radius:14px;

    padding:22px;

    overflow:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.dashboard-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}

.dashboard-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:var(--primary);

}


/*=====================================================
  CARD TITLE
=====================================================*/

.card-title{

    display:block;

    margin-bottom:12px;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.5px;

    font-weight:700;

    color:#6b7280;

}


/*=====================================================
  CARD VALUE
=====================================================*/

.card-value{

    display:block;

    font-size:30px;

    font-weight:700;

    line-height:1.15;

    color:#111827;

}


/*=====================================================
  VALUE COLORS
=====================================================*/

#netPL,
#profitFactor,
#averageRR{

    color:#2563eb;

}

#grossProfit,
#dwEntered,
#wdEntered,
#tjClosed,
#largestWin{

    color:#16a34a;

}

#grossLoss,
#largestLoss{

    color:#dc2626;

}

#winRate,
#expectancy,
#dwToday,
#wdToday{

    color:#7c3aed;

}

#dwPending,
#wdPending,
#tjOpen{

    color:#d97706;

}

#dwOverdue,
#wdOverdue,
#tjCancelled{

    color:#dc2626;

}

#totalTrades,
#dwTotal,
#wdTotal,
#tjTotal{

    color:#2563eb;

}


/*=====================================================
  NUMBER ALIGNMENT
=====================================================*/

.card-value{

    font-variant-numeric:tabular-nums;

}


/*=====================================================
  SMALL VALUE
=====================================================*/

.card-value small{

    font-size:16px;

    color:#6b7280;

}


/*=====================================================
  LOADING
=====================================================*/

.dashboard-container.loading{

    opacity:.55;

    pointer-events:none;

}


/*=====================================================
  CARD ANIMATION
=====================================================*/

.dashboard-card{

    animation:dashboardCard .35s ease;

}

@keyframes dashboardCard{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}
/*=====================================================
  DASHBOARD TABLE
=====================================================*/

.dashboard-table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

    background:#fff;

    border-radius:12px;

    overflow:hidden;

}

.dashboard-table thead{

    background:#f8fafc;

}

.dashboard-table thead th{

    padding:15px 16px;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    color:#475569;

    border-bottom:1px solid var(--border);

    white-space:nowrap;

}

.dashboard-table tbody td{

    padding:14px 16px;

    border-bottom:1px solid #edf2f7;

    vertical-align:middle;

}

.dashboard-table tbody tr{

    transition:var(--transition);

}

.dashboard-table tbody tr:nth-child(even){

    background:#fafafa;

}

.dashboard-table tbody tr:hover{

    background:#eef6ff;

}

.dashboard-table tbody tr:last-child td{

    border-bottom:none;

}


/*=====================================================
  DASHBOARD STATUS
=====================================================*/

.dashboard-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.dashboard-status.entered{

    background:#dcfce7;

    color:#15803d;

}

.dashboard-status.pending{

    background:#fef3c7;

    color:#b45309;

}

.dashboard-status.open{

    background:#dbeafe;

    color:#1d4ed8;

}

.dashboard-status.closed{

    background:#dcfce7;

    color:#15803d;

}

.dashboard-status.cancelled{

    background:#fee2e2;

    color:#dc2626;

}


/*=====================================================
  DASHBOARD PROFIT LOSS
=====================================================*/

.dashboard-table .profit{

    color:var(--success);

    font-weight:700;

}

.dashboard-table .loss{

    color:var(--danger);

    font-weight:700;

}


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

.dashboard-table td[colspan]{

    text-align:center;

    padding:40px;

    color:#9ca3af;

}


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

.dashboard-table{

    display:block;

    overflow-x:auto;

    scrollbar-width:thin;

}

.dashboard-table::-webkit-scrollbar{

    height:8px;

}

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

    background:#cbd5e1;

    border-radius:20px;

}


/*=====================================================
  TRANSITIONS
=====================================================*/

.dashboard-card,
.dashboard-section,
.button,
input,
select,
textarea{

    transition:var(--transition);

}


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

@media(max-width:1200px){

.dashboard-cards-7{

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

}

.dashboard-cards-5{

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

}

.dashboard-cards-4{

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

}

}


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

@media(max-width:992px){

.trade-form{

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

}

#journalToolbar,
#watchlistToolbar{

flex-direction:column;

align-items:flex-start;

}

.dashboard-filter-row{

flex-direction:column;

align-items:flex-start;

}

.dashboard-filter button{

margin-left:0;

width:100%;

}

}


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

@media(max-width:768px){

.dashboard-cards-4,
.dashboard-cards-5,
.dashboard-cards-7{

grid-template-columns:1fr;

}

.trade-form{

grid-template-columns:1fr;

}

.wrapper{

padding:0 15px;

}

.dashboard-section{

padding:18px;

}

.section-header{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

.dashboard-table{

font-size:13px;

}

.review-filter {
    justify-content: flex-start;
    margin: 8px 0;
}

}


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

@media(max-width:576px){

.button,
.button-primary,
.button-small{

width:auto;

}

.form-group{

width:100%;

}

.radio-group{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.modal-buttons{

flex-direction:column;

}

.modal-buttons .button{

width:100%;

}

}


/*=====================================================
  PRINT
=====================================================*/

@media print{

.dashboard-filter,
.button,
.modal-buttons{

display:none!important;

}

.dashboard-section{

box-shadow:none;

border:1px solid #ddd;

}

}


/*=====================================================
  UTILITIES
=====================================================*/

.hidden{

display:none!important;

}

.text-success{

color:var(--success);

}

.text-danger{

color:var(--danger);

}

.text-warning{

color:var(--warning);

}

.bg-success{

background:#dcfce7;

}

.bg-danger{

background:#fee2e2;

}

.bg-warning{

background:#fef3c7;

}

.rounded{

border-radius:12px;

}

.shadow{

box-shadow:var(--shadow);

}



input[type=text], input[type=email], input[type=url], input[type=password], 
input[type=search], input[type=number], input[type=tel], input[type=date], 
input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], .site textarea,select{
    border:1px solid #ccc !important;
    border-radius:5px !important;
}


/*=====================================================
  END OF STYLE.CSS V2
=====================================================*/



/* ==========================================
   OPTION JOURNAL FILTERS
========================================== */

.option-filters{

    display:flex;

    align-items:flex-end;

    gap:15px;

    flex-wrap:wrap;

    margin:20px 0;

}

.option-filters .filter-group{

    display:flex;

    flex-direction:column;

}

.option-filters label{

    font-size:13px;

    font-weight:600;

    margin-bottom:6px;

}

.option-filters select,
.option-filters input{

    width:170px;

}

.option-filters button{

    height:42px;

    min-width:110px;

}








/* ==========================================
   OPTION JOURNAL SUMMARY
========================================== */

.summary-cards{

    display:grid;

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

    gap:20px;

    margin:25px 0;

}

.summary-card{

    background:#fff;

    border-radius:12px;

    padding:18px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    border:1px solid #e5e7eb;

}

.summary-card span{

    display:block;

    font-size:13px;

    color:#6b7280;

    margin-bottom:10px;

    font-weight:600;

}

.summary-card h3{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#1f2937;

}
@media(max-width:1200px){

.summary-cards{

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

}

}

@media(max-width:768px){

.summary-cards{

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

}

}

@media(max-width:500px){

.summary-cards{

    grid-template-columns:1fr;

}

}


/*=====================================================
  UI V3
=====================================================*/

/* ---------- Page ---------- */

.wrapper{

    max-width:1650px;

    margin:35px auto;

}


/* ---------- Card Section ---------- */

.dashboard-section{

    background:#fff;

    border-radius:18px;

    padding:28px;

    box-shadow:0 8px 30px rgba(15,23,42,.06);

    border:1px solid #eef2f7;

}


/* ---------- Filters ---------- */

.option-filters{

    display:flex;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:28px;

}

.option-filters .filter-group{

    min-width:150px;

}

.option-filters input,
.option-filters select{

    height:44px;

    border-radius:10px !important;

}

.option-filters button{

    height:44px;

    border-radius:10px;

}


/* ---------- Summary Cards ---------- */

.summary-cards{

    display:grid;

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

    gap:20px;

    margin:30px 0;

}

.summary-card{

    position:relative;

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:16px;

    padding:22px;

    overflow:hidden;

    transition:.25s ease;

    box-shadow:0 3px 12px rgba(15,23,42,.06);

}

.summary-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(15,23,42,.10);

}

.summary-card:before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#2563eb;

}

.summary-card span{

    display:block;

    margin-bottom:14px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    color:#6b7280;

}

.summary-card h3{

    margin:0;

    font-size:30px;

    font-weight:700;

    line-height:1.1;

}


/* ---------- Individual Colors ---------- */

#totalTrades{

    color:#2563eb;

}

#totalPremium{

    color:#16a34a;

}

#totalCharges{

    color:#7c3aed;

}

#totalPL{

    color:#2563eb;

}

#grossLoss{

    color:#dc2626;

}

#winRate{

    color:#7c3aed;

}

#bestStrategy{

    color:#1e3a8a;

}


/* ---------- DataTable ---------- */

.dataTables_wrapper{

    padding:0;

    background:none;

    box-shadow:none;
    
    overflow:hidden;
    
    margin: 20px 0;
 
}

table.display{

    border-radius:16px;

    overflow:hidden;

}

table.display thead{

    background:#f8fafc;

}

table.display th{

    font-size:13px;

    letter-spacing:.4px;

    text-transform:uppercase;

}

table.display td{

    padding:15px 14px;

}

table.display tbody tr{

    transition:.20s;

}

table.display tbody tr:hover{

    background:#eff6ff;

}


/* ---------- Buttons ---------- */

.editTrade,
.deleteTrade{

    border:none;

    border-radius:10px;

    padding:8px 16px;

    font-weight:600;

}

.editTrade{

    background:#2d3748;

    color:#fff;

}

.deleteTrade{

    background:#2d3748;

    color:#fff;

}

.editTrade:hover,
.deleteTrade:hover{

    transform:translateY(-1px);

}
.title h3 {
    text-align: center;
    margin-top: 20px;
}


/* ---------- navigation ---------- */


/* Header */
.site-header {
    background: #18352f;
    padding: 12px 40px;
}
.main-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Menu */
.main-navigation ul {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 20px 0 20px;
    padding: 0;
}
.main-navigation li {
    position: relative;
    list-style: none;
    text-transform: uppercase;
}
.main-navigation a {
    color: #111827;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 0;
    transition: .3s;
}
.main-navigation a:hover {
    color: #2563eb;
}
/* Current menu */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-parent > a {
    color: #2563eb;
}

.menu-toggle {
    display: none;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}
/* Dropdown */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    background: #fff;
    min-width: 220px;
    padding: 10px 0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    z-index: 999;
}
.main-navigation ul ul li {
    width: 100%;
}
.main-navigation ul ul a {
    color: #222;
    padding: 10px 20px;
}
.main-navigation li:hover > ul {
    display: flex;
}

.radio-group input[type="radio"] {
    padding: 0;
    border: 2px solid;
}
.directional-intraday-wrap input[type=radio]:after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-47%,-43%) !important;
    height: 10px !important;
    width: 10px !important;
}


.directional-intraday-wrap input[type=radio]:checked:focus {
        outline-offset:none !important;
        outline: none  !important;
}

.dataTables_filter{
    margin-bottom:40px;
}


div#journalTable_filter {
    margin-top: 20px;
}


.dataTables_length{
    float:left;
    margin: 20px 0 0;
}


.dataTables_filter{float:right;}

@media (max-width:1600px){
    .dataTables_wrapper {
    overflow: visible !important;
}
 
.dataTable{
    /*display: block !important;*/
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
}
}


@media (max-width:1024px){

.dataTable{
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
}

}


@media (max-width:580px){
        /**/
     .menu-toggle {
        display: block;
    }

    .main-navigation {
        display: none;
        width: 100%;
    }

    .main-navigation.active {
        display: block;
    }

    .main-navigation ul {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 15px;
        margin: 0;
        background: #fff;
    }

    .main-navigation li {
        width: 100%;
    }

    .main-navigation a {
        display: block;
        padding: 12px 0;
    }

    
}