/**
 * Hugo Tech — Customer Area Stylesheet
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#f5f7fa;color:#1e293b;line-height:1.6}
a{color:var(--secondary);text-decoration:none;transition:all .2s}
a:hover{color:var(--primary)}
img{max-width:100%;display:block}

.cus-container{max-width:1080px;margin:0 auto;padding:0 20px}

/* ── Navbar ── */
.cus-navbar{background:var(--primary);color:#fff;padding:0 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.cus-navbar-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.cus-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.cus-brand-logo{height:32px;width:auto}
.cus-nav-right{display:flex;align-items:center;gap:16px}
.cus-user-name{font-size:13px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px}
.cus-logout-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .2s}
.cus-logout-btn:hover{background:rgba(255,255,255,.2);color:#fff}

/* ── Sidebar Nav (horizontal tabs) ── */
.cus-sidebar-nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cus-sidebar-nav .cus-container{display:flex;gap:4px;padding-top:4px;padding-bottom:4px}
.cus-nav-link{display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;color:#64748b;white-space:nowrap;transition:all .15s}
.cus-nav-link:hover{color:var(--primary);background:rgba(24,36,76,.04)}
.cus-nav-link.active{color:var(--primary);background:rgba(24,36,76,.06)}
.cus-nav-link i{font-size:13px;opacity:.7}

/* ── Main ── */
.cus-main{padding:28px 0 60px;min-height:60vh}

/* ── Page header ── */
.cus-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.cus-page-title{font-size:24px;font-weight:800;color:var(--primary);letter-spacing:-.5px}

/* ── Stat cards ── */
.cus-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px}
.cus-stat-card{background:#fff;border-radius:14px;padding:22px 20px;border:1px solid #e2e8f0;display:flex;align-items:center;gap:16px;transition:all .2s}
.cus-stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.cus-stat-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.cus-stat-icon.green{background:#f0fdf4;color:#10b981}
.cus-stat-icon.blue{background:#eff6ff;color:#3b82f6}
.cus-stat-icon.orange{background:#fff7ed;color:#f59e0b}
.cus-stat-icon.red{background:#fef2f2;color:#ef4444}
.cus-stat-icon.purple{background:#f5f3ff;color:#8b5cf6}
.cus-stat-label{font-size:12px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.cus-stat-value{font-size:26px;font-weight:800;color:#1e293b;line-height:1}

/* ── Card ── */
.cus-card{background:#fff;border-radius:14px;border:1px solid #e2e8f0;margin-bottom:20px;overflow:hidden}
.cus-card-header{padding:18px 22px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between}
.cus-card-title{font-size:15px;font-weight:700;color:var(--primary);display:flex;align-items:center;gap:8px}
.cus-card-body{padding:22px}
.cus-card-body-flush{padding:0}

/* ── Table ── */
.cus-table{width:100%;border-collapse:collapse}
.cus-table thead th{padding:12px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;text-align:left;border-bottom:2px solid #f1f5f9}
.cus-table tbody td{padding:14px 16px;font-size:13.5px;border-bottom:1px solid #f8fafc;vertical-align:middle}
.cus-table tbody tr:hover{background:#fafbfd}
.cus-table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Badges ── */
.cus-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.cus-badge-success{background:#f0fdf4;color:#15803d}
.cus-badge-warning{background:#fffbeb;color:#d97706}
.cus-badge-danger{background:#fef2f2;color:#dc2626}
.cus-badge-info{background:#eff6ff;color:#2563eb}
.cus-badge-secondary{background:#f1f5f9;color:#64748b}
.cus-badge-primary{background:rgba(24,36,76,.06);color:var(--primary)}

/* ── Empty state ── */
.cus-empty{text-align:center;padding:60px 20px;color:#94a3b8}
.cus-empty i{font-size:42px;opacity:.25;margin-bottom:14px;display:block}
.cus-empty h3{font-size:18px;color:#475569;margin-bottom:6px}
.cus-empty p{font-size:13px}

/* ── Buttons ── */
.cus-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;border:none}
.cus-btn-primary{background:var(--primary);color:#fff}
.cus-btn-primary:hover{background:#0f1833;color:#fff;transform:translateY(-1px)}
.cus-btn-whatsapp{background:#25d366;color:#fff}
.cus-btn-whatsapp:hover{background:#1fba59;color:#fff;transform:translateY(-1px)}
.cus-btn-outline{background:transparent;color:var(--primary);border:1.5px solid #e2e8f0}
.cus-btn-outline:hover{border-color:var(--primary);background:rgba(24,36,76,.02)}
.cus-btn-sm{padding:8px 16px;font-size:12px;border-radius:8px}

/* ── Login page ── */
.cus-login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:linear-gradient(135deg,var(--primary) 0%,#0f1833 100%)}
.cus-login-card{background:#fff;border-radius:20px;padding:48px 40px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.2);text-align:center}
.cus-login-logo{height:52px;margin:0 auto 8px}
.cus-login-brand{font-size:20px;font-weight:800;color:var(--primary);margin-bottom:6px}
.cus-login-subtitle{font-size:13px;color:#94a3b8;margin-bottom:32px}
.cus-login-input{width:100%;padding:14px 18px;border:2px solid #e2e8f0;border-radius:12px;font-family:inherit;font-size:16px;text-align:center;letter-spacing:2px;font-weight:600;transition:all .2s;margin-bottom:16px}
.cus-login-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px rgba(24,36,76,.08)}
.cus-login-input::placeholder{letter-spacing:0;font-weight:400;font-size:14px}
.cus-login-btn{width:100%;padding:14px;border:none;border-radius:12px;background:var(--primary);color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s}
.cus-login-btn:hover{background:#0f1833;transform:translateY(-1px)}
.cus-login-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:16px;text-align:left}
.cus-login-footer{margin-top:24px;font-size:12px;color:#94a3b8}
.cus-login-footer a{color:var(--secondary);font-weight:600}

/* ── Detail rows ── */
.cus-detail-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:13.5px}
.cus-detail-row+.cus-detail-row{border-top:1px solid #f1f5f9}
.cus-detail-label{color:#64748b;font-weight:500}

/* ── Form ── */
.cus-form-group{margin-bottom:18px}
.cus-form-label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:6px}
.cus-form-input,.cus-form-select,.cus-form-textarea{width:100%;padding:11px 16px;border:1.5px solid #e2e8f0;border-radius:10px;font-family:inherit;font-size:14px;transition:all .2s;background:#fff}
.cus-form-input:focus,.cus-form-select:focus,.cus-form-textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(24,36,76,.06)}
.cus-form-hint{font-size:11px;color:#94a3b8;margin-top:4px}

/* ── Footer ── */
.cus-footer{background:#fff;border-top:1px solid #e2e8f0;padding:20px 0;text-align:center;font-size:12px;color:#94a3b8}
.cus-footer .cus-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.cus-footer-links{display:flex;gap:16px}
.cus-footer-links a{color:#64748b;font-weight:500}
.cus-footer-links a:hover{color:var(--primary)}

/* ── Flash messages ── */
.flash-message{display:flex;align-items:center;gap:12px;padding:14px 20px;margin-bottom:18px;border-radius:12px;font-size:14px;animation:slideIn .3s ease}
.flash-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.flash-error{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.flash-warning{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.flash-icon{font-weight:700;font-size:16px}
.flash-text{flex:1}
.flash-close{background:none;border:none;font-size:18px;cursor:pointer;color:inherit;opacity:.5}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ── */
@media(max-width:768px){
    .cus-navbar-inner{height:52px}
    .cus-brand{font-size:13px}
    .cus-brand-logo{height:26px}
    .cus-user-name{display:none}
    .cus-sidebar-nav .cus-container{gap:2px}
    .cus-nav-link{padding:8px 12px;font-size:12px}
    .cus-page-title{font-size:20px}
    .cus-stats{grid-template-columns:1fr 1fr}
    .cus-main{padding:20px 0 40px}
    .cus-login-card{padding:36px 24px}
    .cus-card-body{padding:16px}
}

@media(max-width:480px){
    .cus-stats{grid-template-columns:1fr}
    .cus-nav-link span{display:none}
    .cus-page-header{flex-direction:column;align-items:flex-start}
}