/*
|--------------------------------------------------------------------------
| ELMTAB Stock
| Version : 2.6.4
| File : assets/css/style.css
|--------------------------------------------------------------------------
*/

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

:root{

    --el-primary:#1d4ed8;
    --el-success:#16a34a;
    --el-danger:#dc2626;
    --el-warning:#f59e0b;

    --el-dark:#1f2937;
    --el-text:#374151;
    --el-light:#f8fafc;

    --el-border:#e5e7eb;

    --el-radius:16px;

    --el-shadow:
        0 8px 24px rgba(0,0,0,.08);

}

/* ==========================================================
   BASE
========================================================== */

.elmtab-stock{

    width:100%;

    max-width:900px;

    margin:30px auto;

    font-family:tahoma,sans-serif;

    color:var(--el-text);

}

.elmtab-hidden{

    display:none;

}

.elmtab-center{

    text-align:center;

}

.elmtab-right{

    text-align:right;

}

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

.elmtab-card{

    background:#fff;

    border-radius:var(--el-radius);

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

    padding:24px;

    margin-bottom:20px;

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

}

.elmtab-card:hover{

    transform:translateY(-2px);

    transition:.2s;

}

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

.elmtab-title{

    font-size:28px;

    font-weight:700;

    color:var(--el-dark);

    margin:0;

}

.elmtab-subtitle{

    margin-top:8px;

    color:#6b7280;

    font-size:14px;

}

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

.elmtab-btn{

    border:none;

    cursor:pointer;

    border-radius:10px;

    padding:12px 18px;

    font-size:14px;

    transition:.2s;

}

.elmtab-btn-primary{

    background:var(--el-primary);

    color:#fff;

}

.elmtab-btn-primary:hover{

    background:#1e40af;

}

.elmtab-btn-success{

    background:var(--el-success);

    color:#fff;

}

.elmtab-btn-danger{

    background:var(--el-danger);

    color:#fff;

}

.elmtab-btn-light{

    background:#f3f4f6;

}

/* ==========================================================
   MESSAGE
========================================================== */

.elmtab-message{

    padding:14px;

    border-radius:10px;

    margin:15px 0;

}

.elmtab-info{

    background:#eff6ff;

}

.elmtab-error{

    background:#fef2f2;

    color:#991b1b;

}

.elmtab-success{

    background:#ecfdf5;

    color:#166534;

}
/* ==========================================================
   SEARCH AREA
========================================================== */

.elmtab-search-box{

    margin-bottom:24px;

}

.elmtab-stock-search-form{

    display:flex;

    gap:12px;

    align-items:flex-start;

    flex-wrap:wrap;

}

.elmtab-search-wrapper{

    position:relative;

    flex:1;

    min-width:260px;

}

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

.elmtab-search-input{

    width:100%;

    height:50px;

    padding:0 18px;

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

    border-radius:12px;

    background:#ffffff;

    font-size:15px;

    color:var(--el-text);

    transition:.25s;

    box-sizing:border-box;

}

.elmtab-search-input:focus{

    outline:none;

    border-color:var(--el-primary);

    box-shadow:0 0 0 4px rgba(29,78,216,.10);

}

.elmtab-search-input::placeholder{

    color:#9ca3af;

}

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

.elmtab-search-result{

    position:absolute;

    top:54px;

    right:0;

    left:0;

    background:#ffffff;

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

    border-radius:12px;

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

    display:none;

    overflow:hidden;

    max-height:320px;

    overflow-y:auto;

    z-index:9999;

}

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

.elmtab-search-item{

    padding:14px 16px;

    cursor:pointer;

    border-bottom:1px solid #f3f4f6;

    transition:.18s;

}

.elmtab-search-item:last-child{

    border-bottom:none;

}

.elmtab-search-item:hover{

    background:#eff6ff;

}

.elmtab-search-item strong{

    display:block;

    color:var(--el-dark);

    font-size:15px;

    margin-bottom:4px;

}

.elmtab-search-item small{

    color:#6b7280;

    font-size:12px;

}

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

.elmtab-search-button{

    height:50px;

    min-width:150px;

    display:flex;

    align-items:center;

    justify-content:center;

}

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

.elmtab-loading{

    padding:30px;

    text-align:center;

    color:#6b7280;

    font-size:15px;

}

.elmtab-loading::after{

    content:"";

    display:inline-block;

    width:16px;

    height:16px;

    margin-right:10px;

    border:2px solid #d1d5db;

    border-top-color:var(--el-primary);

    border-radius:50%;

    animation:elmtab-spin .8s linear infinite;

    vertical-align:middle;

}

@keyframes elmtab-spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.elmtab-stock-card{

    background:#ffffff;

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

    border-radius:18px;

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

    padding:22px;

    margin-top:20px;

}

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

.elmtab-stock-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:18px;

    gap:15px;

}

.elmtab-stock-name{

    font-size:22px;

    font-weight:700;

    color:var(--el-dark);

    margin:0;

}

.elmtab-stock-symbol{

    margin-top:6px;

    color:#6b7280;

    font-size:13px;

}

.elmtab-watch-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:12px;

    background:#fff7ed;

    cursor:pointer;

    font-size:20px;

    transition:.2s;

}

.elmtab-watch-btn:hover{

    background:#fde68a;

    transform:scale(1.05);

}

/* ==========================================================
   LAST PRICE
========================================================== */

.elmtab-last-price{

    text-align:center;

    margin:20px 0 28px;

}

.elmtab-last-price-label{

    color:#6b7280;

    font-size:13px;

    margin-bottom:8px;

}

.elmtab-last-price-value{

    font-size:38px;

    font-weight:700;

    color:var(--el-dark);

    line-height:1.2;

}

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

.elmtab-info-grid{

    display:grid;

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

    gap:14px;

}

.elmtab-info-item{

    background:var(--el-light);

    border-radius:14px;

    padding:16px;

}

.elmtab-info-title{

    font-size:12px;

    color:#6b7280;

    margin-bottom:8px;

}

.elmtab-info-value{

    font-size:18px;

    font-weight:700;

    color:var(--el-dark);

}

/* ==========================================================
   CHANGE
========================================================== */

.elmtab-positive{

    color:var(--el-success);

}

.elmtab-negative{

    color:var(--el-danger);

}

.elmtab-neutral{

    color:#6b7280;

}

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

.elmtab-stock-footer{

    margin-top:22px;

    padding-top:16px;

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

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

    font-size:12px;

    color:#6b7280;

}

/* ==========================================================
   ACTIONS
========================================================== */

.elmtab-actions{

    margin-top:22px;

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.elmtab-actions .elmtab-btn{

    flex:1;

    min-width:150px;

}
/* ==========================================================
   PORTFOLIO
========================================================== */

.elmtab-portfolio{

    margin-top:30px;

}

.elmtab-dashboard{

    display:grid;

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

    gap:18px;

    margin-bottom:24px;

}

.elmtab-dashboard-card{

    background:#ffffff;

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

    border-radius:18px;

    padding:20px;

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

}

.elmtab-dashboard-title{

    font-size:13px;

    color:#6b7280;

    margin-bottom:10px;

}

.elmtab-dashboard-value{

    font-size:28px;

    font-weight:700;

    color:var(--el-dark);

}

.elmtab-dashboard-positive{

    color:var(--el-success);

}

.elmtab-dashboard-negative{

    color:var(--el-danger);

}

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

.elmtab-table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

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

}

.elmtab-table th{

    background:#f8fafc;

    color:var(--el-dark);

    padding:16px;

    font-size:14px;

    text-align:center;

}

.elmtab-table td{

    padding:15px;

    text-align:center;

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

}

.elmtab-table tr:hover{

    background:#f9fafb;

}

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

.elmtab-watchlist{

    margin-top:30px;

}

.elmtab-watchlist-title{

    font-size:22px;

    font-weight:700;

    margin-bottom:18px;

}

.elmtab-watchlist-empty{

    padding:30px;

    text-align:center;

    color:#9ca3af;

    background:#ffffff;

    border-radius:18px;

    border:1px dashed var(--el-border);

}

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

.elmtab-badge{

    display:inline-block;

    padding:4px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.elmtab-badge-buy{

    background:#dcfce7;

    color:#166534;

}

.elmtab-badge-sell{

    background:#fee2e2;

    color:#991b1b;

}

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

@media (max-width:768px){

    .elmtab-dashboard{

        grid-template-columns:1fr;

    }

    .elmtab-info-grid{

        grid-template-columns:1fr;

    }

    .elmtab-stock-header{

        flex-direction:column;

    }

    .elmtab-actions{

        flex-direction:column;

    }

    .elmtab-actions .elmtab-btn{

        width:100%;

    }

    .elmtab-last-price-value{

        font-size:30px;

    }

    .elmtab-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

}

/* ==========================================================
   DARK MODE READY
========================================================== */

@media (prefers-color-scheme:dark){

    .elmtab-dark-auto{

        background:#111827;

        color:#f9fafb;

    }

}