/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLmNzcyIsInNvdXJjZXMiOlsiY3VzdG9tLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9 */

/*# sourceMappingURL=custom.css.map */
/* =========================
TABLE
========================= */

/* ==================================================
   ASHWAPAY CRM - UNIVERSAL TABLE DESIGN
================================================== */

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

#example1{
    width:100% !important;
}

#example1 tbody td{
    padding:10px 8px !important;
    vertical-align:middle !important;
    border-color:#edf2f7 !important;
}

#example1 tbody tr{
    transition:.2s ease;
}

#example1 tbody tr:hover{
    background:#eff6ff !important;
    box-shadow:inset 4px 0 0 #2563eb;
}

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


#example1 thead th{
    position:sticky;
    top:0;
    z-index:999;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fafc 40%,
        #eef2f7 100%
    ) !important;

    color:#0f172a !important;

    border-bottom:3px solid #2563eb !important;

    font-size:14px !important;
    font-weight:800 !important;

    letter-spacing:.8px;
    text-transform:uppercase;
    text-align:center;

    padding:14px 10px !important;

    box-shadow:
        0 4px 12px rgba(37,99,235,.08);

    white-space:nowrap;
}

/* =========================
   CUSTOMER
========================= */

.crm-customer{
    min-width:250px;
    text-align:left;
}

.customer-item{
    padding:6px 0;
    border-bottom:1px solid #e5e7eb;
}

.customer-item:last-child{
    border-bottom:none;
}

/* NAME */

.cust-name{
    display:block;

    font-size:14px;
    font-weight:700;
    color:#111827;

    transition:.2s ease;
}

.cust-name:hover{
    color:#2563eb;
    cursor:pointer;
}

.cust-name span{
    display:block;

    max-width:220px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* MOBILE */

.cust-mobile{
    font-size:13px;
    font-weight:600;
    color:#2563eb;
}

/* ADDRESS */

.cust-address{
    display:block;

    font-size:12px;
    color:#64748b;
}

.cust-address span{
    display:block;

    max-width:220px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* =========================
   PAYMENT
========================= */

.payment-item{
    padding:6px 0;
    border-bottom:1px solid #e5e7eb;

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

    color:#475569;
}

.payment-item:last-child{
    border-bottom:none;
}

.paid-link{
    color:#16a34a !important;
    font-weight:700;
    text-decoration:none !important;
}

.paid-link:hover{
    color:#15803d !important;
}

.due-link{
    font-weight:700;
    text-decoration:none !important;
}

.due-red{
    color:#dc2626 !important;
}

.due-green{
    color:#16a34a !important;
}

.validity-value{
    color:#2563eb;
    font-size:11px !important;
    font-weight:700 !important;
}

.days-green{
    color:#16a34a;
    font-size:11px !important;
    font-weight:700 !important;
}

.days-orange{
    color:#f59e0b;
    font-size:11px !important;
    font-weight:700 !important;
}

.days-red{
    color:#dc2626;
    font-size:11px !important;
    font-weight:700 !important;
}

/* =========================
   CONNECTION
========================= */

.device-item,
.connection-item{
    padding:6px 0;
    border-bottom:1px solid #e5e7eb;
}

.device-item:last-child,
.connection-item:last-child{
    border-bottom:none;
}

.device-label{
    font-size:12px;
    font-weight:600;
    color:#64748b;
}

.device-value{
    font-size:14px;
    font-weight:700;
}

.stb-value{
    color:#2563eb;
}

.vc-value{
    color:#ea580c;
}

.mac-value{
    color:#0891b2;
}

.package-value{
    font-size:13px;
    font-weight:700;
    color:#2563eb;
}

.mso-value{
    font-size:12px;
    font-weight:600;
    color:#475569;
}

.type-value{
    font-size:12px;
    font-weight:700;
    color:#16a34a;
}

/* =========================
   COPY TOAST
========================= */

.copy-value{
    cursor:pointer;
    transition:.2s ease;
}

.copy-value:hover{
    opacity:.75;
}

.copy-toast{
    position:fixed;

    top:80px;
    right:20px;

    z-index:99999;

    background:#16a34a;
    color:#fff;

    padding:10px 15px;

    border-radius:8px;

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

    box-shadow:
        0 8px 20px rgba(22,163,74,.25);

    opacity:0;
    visibility:hidden;

    transition:.25s ease;
}

.copy-toast.show{
    opacity:1;
    visibility:visible;
}

/* =========================
   FILTERS
========================= */

.card-body label{
    font-size:12px;
    font-weight:700;
    color:#475569;

    margin-bottom:6px;
}

.card-body .form-control,
.card-body select{

    height:44px !important;

    border:1px solid #dbe4f0 !important;
    border-radius:10px !important;

    background:#fff !important;

    transition:.25s ease;
}

.card-body .form-control:focus,
.card-body select:focus{

    border-color:#2563eb !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08) !important;
}
.was-validated .form-control:invalid,
.form-control.is-invalid{
    border-color:#dc3545 !important;
    box-shadow:0 0 0 .2rem rgba(220,53,69,.25) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid{
    border-color:#28a745 !important;
    box-shadow:0 0 0 .2rem rgba(40,167,69,.25) !important;
}
/* =========================
   SEARCH BUTTON
========================= */

input[type="submit"],
.btn-primary{

    border-radius:10px !important;

    font-weight:700 !important;

    box-shadow:
        0 8px 20px rgba(37,99,235,.18);

    transition:.25s ease;
}

input[type="submit"]:hover,
.btn-primary:hover{

    transform:translateY(-1px);
}

/* =========================
   DATATABLE
========================= */

.dataTables_filter input{

    height:40px !important;

    border:1px solid #dbe4f0 !important;
    border-radius:10px !important;

    background:#fff !important;
}

.dataTables_filter input:focus{

    border-color:#2563eb !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08) !important;
}

.dataTables_length select{

    height:40px !important;

    border:1px solid #dbe4f0 !important;
    border-radius:10px !important;
}



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

@media(max-width:768px){

    .cust-name{
        font-size:13px;
    }

    .cust-mobile{
        font-size:12px;
    }

    .cust-address{
        font-size:11px;
    }

    .device-value,
    .package-value{
        font-size:12px;
    }

    .payment-item{
        font-size:11px;
    }
}
.new-customer-btn{

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

    padding:10px 18px;

    background:#ecfdf5;

    border:1px solid #bbf7d0;

    border-radius:12px;

    color:#16a34a !important;

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

    text-decoration:none !important;

    transition:.2s ease;
}

.new-customer-btn:hover{

    background:#dcfce7;

    color:#15803d !important;

    transform:translateY(-1px);
}
.sno-badge{
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e0edff;
    border:1px solid #bcd3ff;
    color:#2563eb;
    font-weight:700;
}

#example1 tbody tr:hover .sno-badge{
    background:#2563eb;
    color:#fff;
}
/* CONNECTION COLUMN WIDTH */

/* CUSTOMER */

#example1 th:nth-child(3),
#example1 td:nth-child(3){
    width:240px !important;
    min-width:240px !important;
}

/* GROUP */

#example1 th:nth-child(4),
#example1 td:nth-child(4){
    width:200px !important;
    min-width:200px !important;
}

/* PAYMENT */

#example1 th:nth-child(5),
#example1 td:nth-child(5){
    width:180px !important;
    min-width:180px !important;
}

/* CONNECTION */

#example1 th:nth-child(6),
#example1 td:nth-child(6){
    width:240px !important;
    min-width:180px !important;
}

/* PACKAGE */

#example1 th:nth-child(7),
#example1 td:nth-child(7){
    width:180px !important;
    min-width:180px !important;
}
.device-value{
    white-space:nowrap;
}
/* CUSTOMER ID BADGE */

.custid-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:32px;
    padding:0 12px;

    background:#fff;

    border:1px solid #3b82f6;
    border-right:none;

    border-radius:8px 0 0 8px;

    color:#2563eb;
    font-size:13px;
    font-weight:700;
}

/* DROPDOWN BUTTON */

.custid-drop-btn{
    width:32px;
    height:32px;

    background:#f8fbff;

    border:1px solid #3b82f6;
    border-left:1px solid #dbeafe;

    border-radius:0 8px 8px 0;

    padding:0;

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

.custid-drop-btn:hover{
    background:#eff6ff;
}

.custid-drop-btn::after{
    margin:0 !important;
}

/* DROPDOWN MENU FIX */

.dropdown-menu{
    z-index:999999 !important;
}

/* TABLE CUT ISSUE FIX */

/* TABLE WRAPPER FIX */

.card{
    overflow:hidden;
}

.card-body{
    overflow:hidden;
      padding-bottom:80px !important;
}

.table-responsive{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

.dataTables_wrapper{
    width:100%;
}
/* CUSTOMER ACTION DROPDOWN FIX */

#example1 .dropdown,
#example1 .btn-group{
    position:static !important;
}

#example1 .dropdown-menu{
    z-index:999999 !important;
}
.custid-drop-btn::after{
    border:none !important;
    content:"▾";

    font-size:16px;
    color:#2563eb;

    margin:0 !important;

    display:inline-block;
    transition:transform .25s ease;
}

.dropdown.show .custid-drop-btn::after{
    transform:rotate(180deg);
}
/* =========================
   MOBILE TABLE FIX
========================= */

@media (max-width:768px){

    .table-responsive{
        width:100%;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch;
    }

    #example1{
        min-width:1200px;
    }

    .card{
        overflow:hidden !important;
    }

    .card-body{
        overflow:hidden !important;
        padding:10px !important;
    }

}
/* ===================================
   GROUP + LOCATION COLUMN
=================================== */

.group-location-wrap{
    min-width:190px;
}

/* GROUP TREE */

.group-tree{
    text-align:left;

    padding-bottom:8px;
    margin-bottom:8px;

    border-bottom:1px solid #e5e7eb;
}

.main-group{
    font-size:12px;
    font-weight:700;
    color:#2563eb;

    line-height:18px;
}

.sub-group{
    padding-left:18px;
    margin-top:4px;

    font-size:11px;
    font-weight:700;
    color:#64748b;

    line-height:16px;
}

/* LOCATION */

.group-location{
    text-align:center;
}

/* LOCATION TAGGED */

.location-tagged{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    padding:5px 12px;

    border-radius:20px;

    background:#dcfce7;
    border:1px solid #86efac;

    color:#15803d !important;

    font-size:11px;
    font-weight:700;

    text-decoration:none !important;

    transition:.2s ease;
}

.location-tagged:hover{
    background:#bbf7d0;
    color:#166534 !important;

    transform:translateY(-1px);

    text-decoration:none !important;
}

/* LOCATION MISSING */

.location-not-tagged{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    padding:5px 12px;

    border-radius:20px;

    background:#fee2e2;
    border:1px solid #fecaca;

    color:#dc2626;

    font-size:11px;
    font-weight:700;

    animation:pulseTag 2s infinite;
}

/* PULSE */

@keyframes pulseTag{

    0%{
        opacity:1;
    }

    50%{
        opacity:.75;
    }

    100%{
        opacity:1;
    }
}

/* MOBILE */

@media(max-width:768px){

    .group-location-wrap{
        min-width:170px;
    }

    .main-group{
        font-size:11px;
    }

    .sub-group{
        font-size:10px;
    }

    .location-tagged,
    .location-not-tagged{
        font-size:10px;
        padding:4px 10px;
    }

}
/* =========================
   ACTIVATE (Pending)
========================= */

.bg-red{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-width:90px;
    height:34px;

    background:linear-gradient(135deg,#ff5f56,#ef4444) !important;
    color:#fff !important;

    border-radius:50px;
    font-size:12px !important;
    font-weight:700 !important;
    text-decoration:none !important;

    box-shadow:0 4px 12px rgba(239,68,68,.25);
    transition:.25s;
}

.bg-red:hover{
    transform:translateY(-1px);
    color:#fff !important;
}

.bg-red:before{
    content:'○';
    font-size:13px;
}


/* =========================
   ACTIVATED (Status Badge)
========================= */

.bg-green{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-width:95px;
    height:30px;

    background:#ecfdf5 !important;
    color:#16a34a !important;

    border:1px solid #bbf7d0;
    border-radius:50px;

    font-size:12px !important;
    font-weight:700 !important;

    box-shadow:none !important;
    cursor:default;
}

.bg-green:before{
    content:'●';
    color:#22c55e;
    font-size:11px;
}


/* =========================
   RENEW
========================= */

.btn-success{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    background:#eef2ff !important;
    color:#4f46e5 !important;

    border:1px solid #c7d2fe !important;
    border-radius:50px !important;

    padding:6px 14px !important;
    min-width:90px;
    margin-top:6px;

    font-size:12px !important;
    font-weight:600 !important;

    box-shadow:none !important;
    text-decoration:none !important;

    transition:all .2s ease;
}

.btn-success:before{
    content:'↻ ';
    font-weight:700;
}

.btn-success:hover{
    background:#4f46e5 !important;
    color:#fff !important;
    border-color:#4f46e5 !important;

    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(79,70,229,.18);
}
.cash-badge{
    display:inline-block;
    background:#ecfdf5;
    color:#16a34a;
    padding:2px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}

.online-badge{
    display:inline-block;
    background:#eff6ff;
    color:#2563eb;
    padding:2px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:600;
}
/* ==========================================================
   COMPLAINT MODULE
========================================================== */

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

.summary-container{
    width:100%;
    margin:18px 0;
    padding:18px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}

.metric-card{

    cursor:pointer;

    position:relative;

    padding:18px 12px;

    border-radius:14px;

    border:1px solid transparent;

    text-align:center;

    transition:.25s ease;

}

.metric-card:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 22px rgba(15,23,42,.08);

}

/* TOTAL */

.summary-grid .metric-card:nth-child(1){

    background:#ECFDF5;

    border-color:#BBF7D0;

}

.summary-grid .metric-card:nth-child(1) label{

    color:#059669;

}

/* NEW */

.summary-grid .metric-card:nth-child(2){

    background:#EEF2FF;

    border-color:#C7D2FE;

}

.summary-grid .metric-card:nth-child(2) label{

    color:#4F46E5;

}

/* ASSIGNED */

.summary-grid .metric-card:nth-child(3){

    background:#F3E8FF;

    border-color:#DDD6FE;

}

.summary-grid .metric-card:nth-child(3) label{

    color:#7C3AED;

}

/* IN PROGRESS */

.summary-grid .metric-card:nth-child(4){

    background:#FFF7ED;

    border-color:#FED7AA;

}

.summary-grid .metric-card:nth-child(4) label{

    color:#EA580C;

}

/* CLOSED */

.summary-grid .metric-card:nth-child(5){

    background:#F0FDF4;

    border-color:#BBF7D0;

}

.summary-grid .metric-card:nth-child(5) label{

    color:#16A34A;

}

/* TODAY */

.summary-grid .metric-card:nth-child(6){

    background:#FEF2F2;

    border-color:#FECACA;

}

.summary-grid .metric-card:nth-child(6) label{

    color:#DC2626;

}

.metric-card label{

    display:block;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;

    margin-bottom:10px;

    opacity:.85;

}

.metric-card span{

    display:block;

    font-size:28px;

    font-weight:700;

    color:#1F2937;

}

.metric-card.active{

    border:2px solid #2563EB !important;

    box-shadow:0 10px 25px rgba(37,99,235,.18);

    transform:translateY(-3px);

}

/* =========================
   FILTER BAR
========================= */

.complaint-filter{

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:18px;

    margin-bottom:18px;

}

.complaint-filter .form-group{

    margin-bottom:0;

}

.complaint-filter label{

    font-size:12px;

    font-weight:700;

    color:#475569;

}

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

#filterStatus{

    margin-top:15px;

}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){

    .summary-grid{

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

    }

}

@media(max-width:768px){

    .summary-grid{

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

    }

    .metric-card span{

        font-size:22px;

    }

}