/*
|--------------------------------------------------------------------------
| TechPackHub Client Portal v2
| Status & Badge Styles
|--------------------------------------------------------------------------
*/

/* ==========================================================
   Base Badge
========================================================== */

.tph-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;
    font-weight:600;

    line-height:1;

    white-space:nowrap;

    border:1px solid transparent;

}

/* ==========================================================
   Primary
========================================================== */

.tph-badge-primary{

    color:#1d4ed8;

    background:#dbeafe;

    border-color:#bfdbfe;

}

/* ==========================================================
   Success
========================================================== */

.tph-badge-success{

    color:#166534;

    background:#dcfce7;

    border-color:#bbf7d0;

}

/* ==========================================================
   Warning
========================================================== */

.tph-badge-warning{

    color:#92400e;

    background:#fef3c7;

    border-color:#fde68a;

}

/* ==========================================================
   Pending
========================================================== */

.tph-badge-pending{

    color:#374151;

    background:#f3f4f6;

    border-color:#e5e7eb;

}

/* ==========================================================
   Danger
========================================================== */

.tph-badge-danger{

    color:#991b1b;

    background:#fee2e2;

    border-color:#fecaca;

}

/* ==========================================================
   Info
========================================================== */

.tph-badge-info{

    color:#0c4a6e;

    background:#e0f2fe;

    border-color:#bae6fd;

}

/* ==========================================================
   Purple
========================================================== */

.tph-badge-purple{

    color:#6d28d9;

    background:#ede9fe;

    border-color:#ddd6fe;

}

/* ==========================================================
   Status Colors
========================================================== */

.tph-status-active{

    background:#dcfce7;

    color:#15803d;

}

.tph-status-progress{

    background:#dbeafe;

    color:#2563eb;

}

.tph-status-review{

    background:#fef3c7;

    color:#b45309;

}

.tph-status-pending{

    background:#f3f4f6;

    color:#4b5563;

}

.tph-status-completed{

    background:#dcfce7;

    color:#166534;

}

.tph-status-cancelled{

    background:#fee2e2;

    color:#991b1b;

}

/* ==========================================================
   Priority Labels
========================================================== */

.tph-priority{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

}

.tph-priority-high{

    background:#fee2e2;

    color:#b91c1c;

}

.tph-priority-medium{

    background:#fef3c7;

    color:#b45309;

}

.tph-priority-low{

    background:#dcfce7;

    color:#15803d;

}

/* ==========================================================
   Notification Dot
========================================================== */

.tph-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    display:inline-block;

}

.tph-dot-success{

    background:#22c55e;

}

.tph-dot-warning{

    background:#f59e0b;

}

.tph-dot-danger{

    background:#ef4444;

}

.tph-dot-info{

    background:#3b82f6;

}

/* ==========================================================
   Alerts
========================================================== */

.tph-alert{

    position:relative;

    padding:18px 22px;

    border-radius:14px;

    margin-bottom:20px;

    border:1px solid;

    line-height:1.7;

}

.tph-alert-success{

    background:#ecfdf5;

    border-color:#a7f3d0;

    color:#065f46;

}

.tph-alert-warning{

    background:#fffbeb;

    border-color:#fde68a;

    color:#92400e;

}

.tph-alert-danger{

    background:#fef2f2;

    border-color:#fecaca;

    color:#991b1b;

}

.tph-alert-info{

    background:#eff6ff;

    border-color:#bfdbfe;

    color:#1d4ed8;

}

/* ==========================================================
   Dismissible Alert
========================================================== */

.tph-alert.is-dismissible{

    padding-right:50px;

}

.tph-alert-close{

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    cursor:pointer;

    font-size:18px;

    color:inherit;

    opacity:.6;

}

.tph-alert-close:hover{

    opacity:1;

}

/* ==========================================================
   Status Indicator
========================================================== */

.tph-status-indicator{

    display:inline-flex;

    align-items:center;

    gap:8px;

}

.tph-status-indicator::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:currentColor;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:768px){

    .tph-badge{

        font-size:12px;

        padding:6px 12px;

    }

    .tph-alert{

        padding:16px;

    }

}