/*=========================================================
    TRADERDIARY WATCHLIST
    Professional Edition
=========================================================*/

/*=========================================================
ROOT COLORS
=========================================================*/

:root{

    --bg:#0F172A;

    --card:#17263B;

    --card-dark:#101B2E;

    --border:#243246;

    --text:#FFFFFF;

    --text-light:#CBD5E1;

    --text-muted:#94A3B8;

    --success:#22C55E;

    --danger:#EF4444;

    --warning:#F59E0B;

    --info:#3B82F6;

    --purple:#8B5CF6;

    --radius:18px;

}

/*=========================================================
PAGE
=========================================================*/

.watchlist-page{

    padding:30px;

    min-height:100vh;

    background:transparent;

}

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

.page-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    gap:20px;

    flex-wrap:wrap;

}

.page-header h1{

    color:var(--text);

    font-size:34px;

    font-weight:700;

    margin-bottom:8px;

}

.page-header h1 i{

    color:var(--success);

    margin-right:10px;

}

.page-header p{

    margin:0;

    color:var(--text-muted);

    font-size:15px;

}

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

.page-header .btn{

    height:52px;

    border-radius:14px;

    font-weight:600;

    padding:0 24px;

    display:flex;

    align-items:center;

    gap:8px;

}

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

.summary-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:30px;

}

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

.summary-card{

    background:var(--card);

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

    border-radius:var(--radius);

    padding:24px;

    transition:.30s;

    position:relative;

    overflow:hidden;

}

.summary-card:hover{

    transform:translateY(-5px);

    border-color:var(--success);

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

}

.summary-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:4px;

    height:100%;

    background:var(--success);

}

.summary-title{

    color:var(--text-muted);

    font-size:14px;

    margin-bottom:14px;

    font-weight:500;

}

.summary-value{

    color:var(--text);

    font-size:34px;

    font-weight:700;

    line-height:1;

}

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

.summary-value.waiting{

    color:#FACC15;

}

.summary-value.triggered{

    color:#3B82F6;

}

.summary-value.tp{

    color:#22C55E;

}

.summary-value.sl{

    color:#EF4444;

}

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

.watchlist-card{

    background:var(--card);

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

    border-radius:var(--radius);

    overflow:hidden;

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

}

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

.watchlist-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 25px;

    background:var(--card-dark);

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

}

.watchlist-toolbar h3{

    color:var(--text);

    margin:0;

    font-size:22px;

    font-weight:600;

}

/*=========================================================
LOADER
=========================================================*/

.watchlist-loader{

    position:fixed;

    inset:0;

    background:rgba(10,15,25,.80);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.watchlist-loader p{

    color:#fff;

    margin-top:20px;

    font-size:16px;

}

/*=========================================================
UTILITY
=========================================================*/

.d-none{

    display:none!important;

}
/*=========================================================
SEARCH BOX
=========================================================*/

#searchWatch{

    width:260px;

    height:46px;

    background:#0B1220;

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

    border-radius:12px;

    color:var(--text);

    padding:0 15px;

    transition:.25s;

}

#searchWatch::placeholder{

    color:var(--text-muted);

}

#searchWatch:focus{

    outline:none;

    border-color:var(--success);

    box-shadow:0 0 0 3px rgba(34,197,94,.15);

}

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

.table{

    margin:0;

    color:var(--text);

    vertical-align:middle;

}

.table thead{

    background:#0B1220;

}

.table thead th{

    color:var(--text-light);

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;

    border:none;

    padding:18px;

    white-space:nowrap;

}

.table tbody td{

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

    padding:18px;

    white-space:nowrap;

    font-size:14px;

}

.table tbody tr{

    transition:.25s;

}

.table tbody tr:hover{

    background:#1D2F48;

}

/*=========================================================
PAIR
=========================================================*/

.pair{

    display:flex;

    flex-direction:column;

}

.pair-name{

    font-size:15px;

    font-weight:700;

    color:#fff;

}

.market-name{

    font-size:12px;

    color:var(--text-muted);

}

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

.badge-buy{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:70px;

    height:34px;

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

    color:var(--success);

    border:1px solid rgba(34,197,94,.35);

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.badge-sell{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:70px;

    height:34px;

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

    color:var(--danger);

    border:1px solid rgba(239,68,68,.35);

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

/*=========================================================
RR
=========================================================*/

.rr{

    font-weight:700;

    color:#FACC15;

}

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

.status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:95px;

    height:34px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.status-waiting{

    background:rgba(245,158,11,.15);

    color:#FACC15;

    border:1px solid rgba(245,158,11,.35);

}

.status-triggered{

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

    color:#60A5FA;

    border:1px solid rgba(59,130,246,.35);

}

.status-tp{

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

    color:#4ADE80;

    border:1px solid rgba(34,197,94,.35);

}

.status-sl{

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

    color:#F87171;

    border:1px solid rgba(239,68,68,.35);

}

/*=========================================================
TELEGRAM
=========================================================*/

.telegram-enabled{

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--success);

    display:inline-block;

    box-shadow:0 0 12px rgba(34,197,94,.6);

}

.telegram-disabled{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#64748B;

    display:inline-block;

}

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

.actions{

    display:flex;

    gap:8px;

}

.actions button{

    width:40px;

    height:40px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

    display:flex;

    align-items:center;

    justify-content:center;

}

.actions button i{

    font-size:16px;

}

.actions button:hover{

    transform:translateY(-2px);

}

/*=========================================================
CHART BUTTON
=========================================================*/

.btn-chart{

    background:#2563EB;

    color:#fff;

}

.btn-chart:hover{

    background:#1D4ED8;

}

/*=========================================================
EDIT BUTTON
=========================================================*/

.btn-edit{

    background:#F59E0B;

    color:#fff;

}

.btn-edit:hover{

    background:#D97706;

}

/*=========================================================
DELETE BUTTON
=========================================================*/

.btn-delete{

    background:#DC2626;

    color:#fff;

}

.btn-delete:hover{

    background:#B91C1C;

}

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

.empty-state{

    padding:80px 20px;

    text-align:center;

    color:var(--text-muted);

}

.empty-state i{

    font-size:60px;

    margin-bottom:20px;

    display:block;

    color:#334155;

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

.modal-content{

    background:var(--card);

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

    border-radius:20px;

    overflow:hidden;

}

.modal-header{

    background:var(--card-dark);

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

    padding:22px 28px;

}

.modal-header h3{

    color:var(--text);

    margin:0;

    font-size:24px;

    font-weight:700;

}

.modal-body{

    padding:30px;

}

.modal-footer{

    background:var(--card-dark);

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

    padding:20px 28px;

}

.btn-close{

    filter:invert(1);

}

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

.form-label{

    display:block;

    color:var(--text-light);

    font-size:14px;

    font-weight:600;

    margin-bottom:8px;

}

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

.form-control,

.form-select{

    background:#0B1220;

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

    color:var(--text);

    height:48px;

    border-radius:12px;

    transition:.25s;

}

textarea.form-control{

    height:auto;

    min-height:120px;

    resize:vertical;

    padding-top:12px;

}

.form-control::placeholder{

    color:#64748B;

}

.form-control:focus,

.form-select:focus{

    background:#0B1220;

    color:#fff;

    border-color:var(--success);

    box-shadow:0 0 0 3px rgba(34,197,94,.15);

}

/*=========================================================
SELECT OPTION
=========================================================*/

.form-select option{

    background:#17263B;

    color:#fff;

}

/*=========================================================
READ ONLY
=========================================================*/

input[readonly]{

    background:#162235;

    color:#FACC15;

    font-weight:700;

}

/*=========================================================
RR FIELD
=========================================================*/

#rr{

    text-align:center;

    font-size:18px;

    font-weight:700;

    color:#FACC15;

}

/*=========================================================
NOTES
=========================================================*/

#notes{

    min-height:140px;

}

/*=========================================================
INPUT VALIDATION
=========================================================*/

.input-valid{

    border-color:var(--success)!important;

}

.input-invalid{

    border-color:var(--danger)!important;

}

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

.btn-success{

    background:var(--success);

    border:none;

    border-radius:12px;

    font-weight:600;

    padding:10px 24px;

}

.btn-success:hover{

    background:#16A34A;

}

.btn-secondary{

    border-radius:12px;

    padding:10px 22px;

}

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

.modal.fade .modal-dialog{

    transition:.25s;

}

.modal.show .modal-dialog{

    transform:none;

}

/*=========================================================
SPINNER
=========================================================*/

.spinner-border{

    width:2rem;

    height:2rem;

}

/*=========================================================
HELP TEXT
=========================================================*/

.small-text{

    font-size:12px;

    color:var(--text-muted);

    margin-top:5px;

}

/*=========================================================
BADGE PREVIEW
=========================================================*/

.preview-box{

    margin-top:15px;

    padding:15px;

    border-radius:12px;

    background:#101B2E;

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

}

.preview-box strong{

    color:#fff;

}

.preview-box span{

    color:var(--text-muted);

}

/*=========================================================
DIVIDER
=========================================================*/

.hr{

    width:100%;

    height:1px;

    background:var(--border);

    margin:25px 0;

}

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

.modal-body .row{

    row-gap:8px;

}
/*=========================================================
RESPONSIVE - LARGE SCREENS
=========================================================*/

@media (max-width:1400px){

.summary-grid{

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

}

}

/*=========================================================
TABLET
=========================================================*/

@media (max-width:992px){

.watchlist-page{

padding:25px;

}

.page-header{

flex-direction:column;

align-items:flex-start;

}

.page-header .btn{

width:100%;

justify-content:center;

}

.summary-grid{

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

}

.watchlist-toolbar{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

#searchWatch{

width:100%;

}

.modal-dialog{

max-width:95%;

margin:20px auto;

}

}

/*=========================================================
MOBILE
=========================================================*/

@media (max-width:768px){

.watchlist-page{

padding:15px;

}

.page-header h1{

font-size:28px;

}

.page-header p{

font-size:13px;

}

.summary-grid{

grid-template-columns:1fr;

gap:15px;

}

.summary-card{

padding:20px;

}

.summary-value{

font-size:30px;

}

.watchlist-toolbar{

padding:18px;

}

.watchlist-toolbar h3{

font-size:20px;

}

.table{

min-width:1300px;

}

.table thead th{

padding:15px;

font-size:12px;

}

.table tbody td{

padding:15px;

font-size:13px;

}

.actions{

flex-wrap:nowrap;

}

.actions button{

width:36px;

height:36px;

}

.modal-body{

padding:20px;

}

.modal-footer{

flex-direction:column;

gap:10px;

}

.modal-footer .btn{

width:100%;

}

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width:480px){

.page-header h1{

font-size:24px;

}

.summary-card{

padding:18px;

}

.summary-value{

font-size:26px;

}

.watchlist-toolbar{

padding:15px;

}

.modal-header{

padding:18px;

}

.modal-footer{

padding:18px;

}

}

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

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-track{

background:#0B1220;

}

::-webkit-scrollbar-thumb{

background:#334155;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#475569;

}

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

*{

transition:

background-color .20s,

border-color .20s,

color .20s,

box-shadow .20s;

}

/*=========================================================
HOVER EFFECTS
=========================================================*/

.watchlist-card:hover{

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

}

.summary-card:hover .summary-value{

transform:scale(1.05);

}

/*=========================================================
UTILITY CLASSES
=========================================================*/

.text-success{

color:var(--success)!important;

}

.text-danger{

color:var(--danger)!important;

}

.text-warning{

color:var(--warning)!important;

}

.text-info{

color:var(--info)!important;

}

.fw-bold{

font-weight:700!important;

}

.cursor-pointer{

cursor:pointer;

}

.shadow-none{

box-shadow:none!important;

}

.rounded-xl{

border-radius:20px!important;

}

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

.empty-state{

padding:80px 20px;

text-align:center;

}

.empty-state i{

font-size:64px;

color:#334155;

margin-bottom:20px;

display:block;

}

.empty-state h4{

color:#ffffff;

margin-bottom:10px;

}

.empty-state p{

color:var(--text-muted);

margin:0;

}

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

.loading-row{

padding:50px;

text-align:center;

color:var(--text-muted);

}

.loading-row .spinner-border{

margin-bottom:15px;

}

/*=========================================================
END
=========================================================*/