/* ==================================================
TCP LIVE WIDGET - CLEAN BUILD
PART 1 - CORE + KPI
================================================== */


/* ==========================
MAIN CONTAINER
========================== */

.tcp-live-widget {
    width: 100%;
    background: rgba(8, 11, 16, .94);
    border: 1px solid rgb(55 55 55);
    border-radius: 14px;
    overflow: hidden;
    color: #ffffff;
    font-family: Inter, Arial, sans-serif;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
}


.tcp-live-widget * {

    box-sizing:border-box;

}

/* =====================================
TCP LIVE HEADER PREMIUM
===================================== */


.tcp-live-summary {

    display:grid;

    grid-template-columns:160px 1fr;

    min-height:72px;

}



.tcp-live-title {

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    padding:14px 18px;

    border-right:1px solid rgba(255,255,255,.06);

}



.tcp-live-status {

    display:flex;

    align-items:center;

    gap:7px;

    color:#ef4444!important;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

}



.tcp-live-dot {

    width:8px;

    height:8px;

    background:#ef4444;

    border-radius:50%;

    box-shadow:0 0 8px rgba(239,68,68,.7);

    animation:none;

}



.tcp-live-title strong {

    font-size:20px;

    margin:5px 0;

    line-height:20px;

}



.tcp-refresh {

    font-size:10px;

    color:#64748b!important;

}


@keyframes tcpLivePulse {

0% {

box-shadow:0 0 0 0 rgba(34,197,94,.5);

}

70% {

box-shadow:0 0 0 7px rgba(34,197,94,0);

}

100% {

box-shadow:0 0 0 0 rgba(34,197,94,0);

}

}



.tcp-live-title strong {

    font-size:20px;

    line-height:1;

    margin:4px 0;

    color:#fff!important;

}



.tcp-refresh {

    font-size:11px;

    color:#64748b!important;

}



/* ==========================
KPI AREA
========================== */


.tcp-kpis {

    display:grid;

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

}



/* KPI CARD */


.tcp-mini-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    height: 70px;
    border-right: 1px solid rgb(44 44 44);
    transition: .2s ease;
}



.tcp-mini-kpi:hover {

    background:rgba(255,255,255,.025);

}



.tcp-mini-icon {

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:rgba(255,255,255,.04);

    font-size:15px;

}



.tcp-mini-kpi strong {

    display:block;

    color:#fff!important;

    font-size:22px;

    line-height:1;

    font-weight:700;

}



.tcp-mini-kpi small {

    display:block;

    color:#94a3b8!important;

    font-size:11px;

    margin-top:2px;

}



.tcp-mini-kpi em {

    display:inline-block;

    margin-top:4px;

    padding:2px 7px;

    border-radius:20px;

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

    color:#22c55e!important;

    font-size:9px;

    font-style:normal;

    font-weight:700;

}

/* ==================================================
TCP LIVE ACTIVITY ROTATOR
================================================== */



.tcp-live-widget .tcp-activity-bar > strong {

    width:220px;

    flex:none;

    display:flex;

    align-items:center;

    gap:8px;

    color:#94a3b8!important;

    font-size:11px;

}



.tcp-live-widget .tcp-activity-track {

    position:relative;

    flex:1;

    height:26px;

    overflow:hidden;

}



.tcp-live-widget .tcp-activity-item {

    position:absolute!important;

    top:0;

    left:0;

    width:100%;

    height:30px;

    display:flex!important;

    align-items:center;

    gap:10px;

    opacity:0;

    visibility:hidden;

    transition:opacity .35s ease;

}


.tcp-live-widget .tcp-activity-item.active {

    opacity:1;

    visibility:visible;

}



.tcp-live-widget .tcp-check {

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex!important;

    align-items:center;

    justify-content:center;

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

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

    color:#22c55e!important;

    font-size:12px;

    flex:none;

}



.tcp-live-widget .tcp-activity-content {

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:0;

    flex:1;

    min-width:0;

}



.tcp-live-widget .tcp-activity-content b {

    width:auto;
    font-size:12px;
    line-height:13px;
    flex:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}



.tcp-live-widget .tcp-activity-meta {

    flex:none;

    
    
}
.tcp-live-widget .tcp-status-complete {

    padding:4px 10px;

    border-radius:20px;

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

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

    color:#22c55e!important;

    font-size:9px;

    font-weight:600;

    white-space:nowrap;

}

/* ==================================================
TCP WORKSHOP STATUS SLIM
================================================== */


.tcp-live-widget .tcp-status-bar {

    height:44px!important;

    display:grid!important;

grid-template-columns:180px repeat(4,1fr)!important;
    align-items:center!important;

    border-top:1px solid rgba(255,255,255,.05);

    background:rgba(255,255,255,.015);

}



.tcp-live-widget .tcp-status-bar > strong {

    padding-left:18px;

    font-size:10px;

    color:#94a3b8!important;

}



.tcp-live-widget .tcp-status-bar > div {

    display:flex!important;

    flex-direction:column!important;

    justify-content:center!important;

    align-items:center!important;

    height:44px!important;

}



.tcp-live-widget .tcp-status-bar b {

    font-size:16px!important;

    line-height:16px!important;

    color:#fff!important;

}



.tcp-live-widget .tcp-status-bar div {

    font-size:10px;

    color:#64748b;

}
/* =====================================
TCP ACTIVITY FINAL SLIM VERSION
===================================== */


.tcp-live-widget .tcp-activity-bar {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-top: 1px solid rgb(69 69 69);
    background: rgba(17, 17, 17, 0.28);
    overflow: hidden;
}



.tcp-live-widget .tcp-activity-bar > strong {

    width:220px;

    flex:none;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:10px;

    color:#94a3b8!important;

}



.tcp-live-widget .tcp-activity-track {

    position:relative;

    height:40px;

    flex:1;

    overflow:hidden;

}



.tcp-live-widget .tcp-activity-item {

    position:absolute!important;

    top:0;

    left:0;

    width:100%;

    height:40px;

    display:flex!important;

    align-items:center;

    opacity:0;

    visibility:hidden;

}



.tcp-live-widget .tcp-activity-item.active {

    opacity:1!important;

    visibility:visible!important;

}



/* tick circle */

.tcp-live-widget .tcp-check {

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex!important;

    align-items:center;

    justify-content:center;

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

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

    color:#22c55e!important;

    flex:none;

}



/* name + service */

.tcp-live-widget .tcp-activity-content {

    display:flex;

    flex-direction:column;

    justify-content:center;

    flex:1;

    min-width:0;

}



.tcp-live-widget .tcp-activity-content b {

    font-size:12px;

    line-height:14px;

    color:#fff!important;

}



.tcp-live-widget .tcp-job-product {

    font-size:12px;

    line-height:14px;

    color:#22c55e!important;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* completed badge */

.tcp-live-widget .tcp-status-complete {

    padding:4px 10px;

    border-radius:20px;

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

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

    color:#22c55e!important;

    font-size:9px;

    white-space:nowrap;

}

/* =====================================
TCP LIVE / ACTIVITY DOTS + SPACING FIX
===================================== */


/* LIVE RED DOT */

.tcp-live-status .tcp-live-dot {

    width:8px;
    height:8px;

    background:#ef4444;

    border-radius:50%;

    display:inline-block;

    animation:none;

    box-shadow:
    0 0 8px rgba(239,68,68,.6);

}



/* ACTIVITY GREEN DOT */

.tcp-activity-bar .tcp-live-dot {

    width:10px;

    height:10px;

    background:#22c55e;

    border-radius:50%;

    display:inline-block;

    animation:none;

    box-shadow:
    0 0 10px rgba(34,197,94,.5);

}



/* RECENT ACTIVITY TITLE SPACING */

.tcp-live-widget .tcp-activity-bar > strong {

    width:240px;

    gap:10px;

    font-size:11px;

}



/* ACTIVITY CONTENT SPACING */

.tcp-live-widget .tcp-activity-item {

    padding-left:12px;

}



/* GREEN CHECK CIRCLE */

.tcp-live-widget .tcp-check {

    width:22px;

    height:22px;

    border-radius:50%;

    display:flex!important;

    align-items:center;

    justify-content:center;

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

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

    color:#22c55e!important;

    font-size:12px;

    margin-right:14px;

}



/* CUSTOMER NAME */

.tcp-live-widget .tcp-activity-content b {

    font-size:13px;

    line-height:15px;

}



/* SERVICE NAME */

.tcp-live-widget .tcp-job-product {

    font-size:12px;

    margin-top:2px;

}



/* MORE AIR BETWEEN ELEMENTS */

.tcp-live-widget .tcp-activity-content {

    gap:2px;

}



/* COMPLETED BADGE */

.tcp-live-widget .tcp-status-complete {

    padding:5px 12px;

    border-radius:20px;

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

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

    color:#22c55e!important;

    font-size:9px;

}
/* =====================================
CUSTOMER SATISFACTION
===================================== */


.tcp-live-widget .tcp-satisfaction {

    color:#22c55e!important;

}


.tcp-live-widget .tcp-status-bar > div:last-child {

    border-left:1px solid rgba(255,255,255,.05);

}
/* =====================================
TCP SERVICE STATUS COLOURS
===================================== */


.tcp-status-green {

    color:#22c55e!important;

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

    padding:4px 10px;

    border-radius:20px;

}



.tcp-status-orange {

    color:#f59e0b!important;

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

    padding:4px 10px;

    border-radius:20px;

}



.tcp-status-red {

    color:#ef4444!important;

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

    padding:4px 10px;

    border-radius:20px;

}
.tcp-order-status-panel {

    background:#fff;

    padding:8px 12px;

    border-radius:8px;

    margin-right:10px;

    display:flex;

    align-items:center;

    gap:10px;

}


/* =====================================
TCP WORKSHOP STATUS
CLEAN FINAL VERSION
===================================== */


.tcp-workshop-strip {
    background: rgba(8, 11, 16, .94);
    border: 1px solid rgb(47 47 47);
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    font-family: Inter, Arial, sans-serif;
}


/* HEADER */

.tcp-workshop-strip-header {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgb(56 56 56);
}



.tcp-workshop-strip .tcp-workshop-title {
    display:flex;

    align-items:center;

    gap:8px;

}



.tcp-workshop-heading-row {

    display:flex;

    align-items:center;

    gap:10px;

}



.tcp-workshop-strip .tcp-workshop-title strong{
    font-size:11px;

    letter-spacing:1px;

}



.tcp-workshop-strip .tcp-workshop-title small{
    display:block;

    color:#64748b;

    font-size:10px;

}



/* STATUS BADGE */


.tcp-workshop-service {

    display:flex;

    align-items:center;

    gap:6px;

    height:22px;

    padding:0 10px;

    border-radius:20px;

    font-size:10px;

    font-weight:700;

}



.tcp-workshop-service strong {

    font-size:10px;

}



/* STATUS COLOURS */


.tcp-workshop-strip.green .tcp-workshop-service {

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

    color:#22c55e;

}


.tcp-workshop-strip.orange .tcp-workshop-service {

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

    color:#f59e0b;

}


.tcp-workshop-strip.red .tcp-workshop-service {

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

    color:#ef4444;

}




/* INFO ROW */


.tcp-workshop-info {

    display:grid;

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

}



.tcp-workshop-stat {
    padding: 8px 12px;
    border-right: 1px solid rgb(44 44 44);
}



.tcp-workshop-stat:last-child {

    border-right:none;

}



.tcp-workshop-stat small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 14px;
    text-transform: uppercase;
}



.tcp-workshop-stat strong {

    display:block;

    margin-top:3px;

    color:#fff!important;

    font-size:14px!important;

}



/* DOTS */


.tcp-workshop-strip .tcp-status-light,
.tcp-live-widget .tcp-status-light {

    width:7px;

    height:7px;

    border-radius:50%;

    display:inline-block;

}



.tcp-status-light.green {

    background:#22c55e;

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

}


.tcp-status-light.orange {

    background:#f59e0b;

    box-shadow:0 0 8px rgba(245,158,11,.8);

}


.tcp-status-light.red {

    background:#ef4444;

    box-shadow:0 0 8px rgba(239,68,68,.8);

}




/* MESSAGE */


.tcp-workshop-message {
    padding: 7px 16px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #94a3b8;
    background-color: #131313;
    font-size: 10px;
}
/* ==================================================
TCP MOBILE VERSION
================================================== */

@media(max-width:768px){


/* LIVE HEADER */

.tcp-live-summary {

    display:block!important;

}


.tcp-live-title {


    border-right:none;

    border-bottom:1px solid rgba(255,255,255,.06);

}


/* KPI GRID */

.tcp-kpis {

    display:grid!important;

    grid-template-columns:1fr 1fr!important;

}


.tcp-mini-kpi {

    height:70px;

}



/* ACTIVITY */

.tcp-activity-bar {

    height:auto!important;

    min-height:75px!important;

    display:block!important;

    padding:12px!important;

}


.tcp-activity-bar > strong {

    width:auto!important;

    margin-bottom:10px;

}


.tcp-activity-track {

    height:45px!important;

}


.tcp-activity-item {

    height:45px!important;

    display:flex!important;

    align-items:center!important;

}


.tcp-status-complete {

    display:none!important;

}



/* WORKSHOP */

.tcp-workshop-info {

    display:block!important;

}


.tcp-workshop-stat {

    min-height:30px;

    display:flex!important;

    flex-direction:row!important;

    justify-content:space-between!important;

    align-items:center!important;

    border-right:none!important;

}



}