/* =========================
 CABLE CRM PRO – FINAL UI CSS
 Cleaned + Optimized Version
========================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
 --primary:linear-gradient(#2A9B55,#1F4D1F,#1C7A05);
 --success:linear-gradient(#833AB4,#500257,#1F003D);
 --danger:linear-gradient(#F50505,#B50000,#7A0606);
 --history:linear-gradient(#7A0505,#4D1F1F,#240505);
 --dark:#1f2937;
 --shadow:0 10px 40px rgba(0,0,0,.08);
 --shadow-hover:0 20px 60px rgba(0,0,0,.12);
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

html,body{
 height:100%;
 font-family:Poppins,sans-serif;
 background:linear-gradient(135deg,#0f172a,#1e293b,#334155);
}

/* ---------- Layout ---------- */
main{flex:1}
body{
 display:flex;
 flex-direction:column;
 color:#334155;
}

/* ---------- Header ---------- */
.header{
 background:rgba(255,255,255,.98);
 backdrop-filter:blur(20px);
 box-shadow:var(--shadow);
 position:sticky;
 top:0;
 z-index:1000;
 padding:1rem 0;
}

.container{
 max-width:1300px;
 margin:auto;
 padding:1.5rem;
}

.navbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.navbar-nav{
 display:flex;
 gap:1.5rem;
 list-style:none;
}

.nav-link{
 text-decoration:none;
 color:#334155;
 padding:.6rem 1rem;
 border-radius:10px;
 font-weight:500;
 transition:.3s;
}
.nav-link:hover{
 color:#6366f1;
 background:rgba(99,102,241,.1);
 transform:translateY(-2px);
}

.logo{
 font-size:1.8rem;
 font-weight:700;
 background:var(--primary);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}

/* ---------- Glass Cards ---------- */
.card,.form-card,.login-card{
 background:rgba(255,255,255,.97);
 backdrop-filter:blur(25px);
 border:1px solid rgba(255,255,255,.2);
 border-radius:25px;
 box-shadow:var(--shadow);
 transition:.3s;
}
.card:hover,.form-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-6px)}
.card-body{padding:2rem}

/* ---------- STAT CARDS ---------- */
.stat-card{
 background:white;
 text-align:center;
 border-radius:20px;
 padding:1.3rem;
 box-shadow:var(--shadow);
 transition:.3s;
}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.stat-number{font-size:2.2rem;font-weight:700}
.stat-label{text-transform:uppercase;font-size:.8rem}

/* ---------- FORM INPUT ---------- */
.form-control{
 width:100%;
 padding:14px 18px;
 border-radius:14px;
 border:2px solid #e2e8f0;
 font-size:15px;
 background:white;
 margin-bottom:12px;
 transition:.3s
}
.form-control:focus{
 border-color:#6366f1;
 box-shadow:0 0 0 .15rem rgba(99,102,241,.3);
 outline:none;
}
select.form-control{
 appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%236366f1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 14px center;
 padding-right:35px;
}

/* ---------- BUTTONS ---------- */
.btn{
 border:none;
 padding:12px 28px;
 border-radius:40px;
 text-decoration:none;
 color:white;
 font-size:.9rem;
 text-transform:uppercase;
 letter-spacing:.8px;
 cursor:pointer;
 display:inline-block;
 transition:.25s;
}
.btn:hover{transform:translateY(-3px) scale(1.03)}

.btn-primary{background:var(--primary)}
.btn-success{background:var(--success)}
.btn-danger{background:var(--danger)}
.btn-outline-primary{background:var(--history)}

/* ---------- FORMS ---------- */
.form-card{
 max-width:600px;
 margin:2rem auto;
 padding:40px;
}
.form-card h2{margin-bottom:10px;color:#1f2937}
.form-card h3{color:#6366f1}

/* ---------- TABLES ---------- */
.modern-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    background: white;
}

.modern-table thead {
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: white;
}

.modern-table th {
    padding: 12px;
    text-align: left;
    font-size: 14px;
    letter-spacing: .5px;
}

.modern-table td {
    padding: 10px 12px;
    color: #374151;
    font-size: 14px;
}

.modern-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.modern-table tbody tr:hover {
    background: #eef2ff;
    transition: 0.3s;
}

.pay-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    background: rgba(99,102,241,0.1);
    color: #4f46e5;
    font-weight: 600;
}

.table-wrapper{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.modern-table{
    min-width: 650px;   /* Table never crush */
}


/* Mobile Responsive */
@media(max-width:768px){
    .modern-table th,
    .modern-table td{
        font-size: 12px;
        padding: 8px;
    }
}


/* ---------- LOGIN ---------- */
.login-card{
 max-width:420px;
 margin:90px auto;
 padding:45px 35px;
}

/* ---------- CUSTOMER LIST ---------- */
.customer{
 background:white;
 border-left:6px solid #6366f1;
 padding:1.2rem;
 border-radius:15px;
 box-shadow:0 2px 10px rgba(0,0,0,.06);
 margin-bottom:1rem;
 transition:.3s;
}
.customer:hover{transform:translateX(8px);box-shadow:var(--shadow-hover)}
.customer strong{font-size:1.2rem;color:#111}

/* ---------- COLLECT PAGE Align ---------- */
.collect-input{max-width:260px;margin:0 auto 10px}
.collect-btn,.cancel-btn{width:90%!important}

/* ---------- ADD CUSTOMER ---------- */
.add-form-container{max-width:520px;margin:auto}
.add-buttons{display: flex;gap: 10px;justify-content: center;}
.add-buttons .btn{width: 48%;text-align: center;}

/* ---------- FOOTER ---------- */
footer{
 text-align:center;
 padding:12px;
 color:#aaa;
 background:rgba(255,255,255,.08);
 margin-top:auto;
}

/* ---------- MOBILE FIX ---------- */
@media(max-width:768px){
 .container{padding:1rem}
 .navbar{flex-direction:column;gap:.8rem}
 .navbar-nav{flex-wrap:wrap;justify-content:center}
 .stat-number{font-size:1.7rem}
 .form-card{padding:28px}
 .login-card{margin:40px 20px;padding:35px}
}

/* ---------- MOBILE TABLE FIX ---------- */
@media(max-width:768px){

.table-wrapper{
    width: 100%;
    overflow-x: hidden;
}

.modern-table{
    min-width: 100%;
}

.modern-table thead{
    display:none;
}

.modern-table, 
.modern-table tbody, 
.modern-table tr, 
.modern-table td{
    display:block;
    width:100%;
}

.modern-table tr{
    margin-bottom:12px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 5px 12px rgba(0,0,0,.08);
    padding:10px;
}

.modern-table td{
    text-align:left;
    padding:8px 10px;
    font-size:13px;
    position:relative;
}

.modern-table td::before{
    content:attr(data-label);
    font-weight:600;
    color:#555;
    display:block;
    margin-bottom:3px;
}
}