/*==========================================================
    TRACKING SYSTEM
    COMPONENTS.CSS
==========================================================*/

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.3s ease;

    text-decoration:none;

}

.btn-primary{

    background:var(--gradient);

    color:#fff;

    box-shadow:0 12px 25px rgba(217,4,41,.25);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(217,4,41,.35);

}

.btn-secondary{

    background:var(--secondary);

    color:#222;

}

.btn-secondary:hover{

    transform:translateY(-3px);

}

.btn-outline{

    background:transparent;

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

.btn-block{

    width:100%;

}


/*==============================
    INPUTS
===============================*/

.input-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:20px;

}

.input-group label{

    font-weight:600;

    color:var(--text);

}

.input-group input,

.input-group select,

.input-group textarea{

    width:100%;

    padding:15px 18px;

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

    border-radius:14px;

    background:#fff;

    outline:none;

    transition:.3s;

    font-size:15px;

}

.input-group textarea{

    resize:vertical;

    min-height:120px;

}

.input-group input:focus,

.input-group select:focus,

.input-group textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(217,4,41,.08);

}


/*==============================
    CARDS
===============================*/

.card{

    background:#fff;

    border-radius:22px;

    padding:30px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-6px);

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

}

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.card-title{

    font-size:22px;

    font-weight:700;

}

.card-body{

    color:var(--text-light);

}

.card-footer{

    margin-top:25px;

}


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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.4px;

}

.badge-success{

    background:#dcfce7;

    color:#15803d;

}

.badge-warning{

    background:#fef3c7;

    color:#b45309;

}

.badge-danger{

    background:#fee2e2;

    color:#b91c1c;

}

.badge-info{

    background:#dbeafe;

    color:#1d4ed8;

}


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

.info-box{

    background:#fff;

    border-radius:18px;

    padding:22px;

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

    transition:.3s;

}

.info-box:hover{

    transform:translateY(-4px);

}

.info-box h5{

    color:var(--text-light);

    margin-bottom:8px;

    font-size:13px;

    text-transform:uppercase;

}

.info-box p{

    font-size:18px;

    color:var(--text);

    font-weight:600;

}


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

.table{

    width:100%;

    border-collapse:collapse;

}

.table thead{

    background:#f8fafc;

}

.table th{

    text-align:left;

    padding:18px;

    font-size:14px;

    color:var(--text);

}

.table td{

    padding:18px;

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

    color:var(--text-light);

}

.table tbody tr{

    transition:.3s;

}

.table tbody tr:hover{

    background:#fafafa;

}


/*==============================
    ALERTS
===============================*/

.alert{

    padding:18px;

    border-radius:16px;

    margin-bottom:20px;

}

.alert-success{

    background:#dcfce7;

    color:#166534;

}

.alert-warning{

    background:#fef3c7;

    color:#92400e;

}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;

}

.alert-info{

    background:#dbeafe;

    color:#1e40af;

}


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

.loader{

    width:55px;

    height:55px;

    border:5px solid #eee;

    border-top:5px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==============================
    CHIPS
===============================*/

.chip{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:#f1f5f9;

    color:var(--text);

    font-size:14px;

}

.chip-success{

    background:#dcfce7;

}

.chip-warning{

    background:#fef3c7;

}

.chip-danger{

    background:#fee2e2;

}


/*==============================
    ICON BOX
===============================*/

.icon-box{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gradient);

    color:#fff;

    font-size:24px;

    margin-bottom:20px;

}


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

.hr{

    width:100%;

    height:1px;

    background:var(--border);

    margin:30px 0;

}


/*==============================
    TOOLTIP
===============================*/

.tooltip{

    position:relative;

    cursor:pointer;

}

.tooltip::after{

    content:attr(data-tooltip);

    position:absolute;

    bottom:120%;

    left:50%;

    transform:translateX(-50%);

    background:#111827;

    color:#fff;

    padding:8px 12px;

    border-radius:8px;

    font-size:12px;

    opacity:0;

    pointer-events:none;

    transition:.3s;

    white-space:nowrap;

}

.tooltip:hover::after{

    opacity:1;

}


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

.modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.modal.show{

    opacity:1;

    visibility:visible;

}

.modal-content{

    width:min(650px,92%);

    background:#fff;

    border-radius:22px;

    padding:35px;

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

}