/* Bot Empire CRM */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:#0a0a0f;color:#e4e4e7;line-height:1.6;min-height:100vh
}
nav{
    display:flex;align-items:center;gap:1rem;padding:1rem 2rem;
    background:#13131a;border-bottom:1px solid #252530;
    position:sticky;top:0;z-index:100
}
nav .logo{font-weight:700;font-size:1.1rem;color:#fafafa}
nav .nav-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
nav .back-link{color:#a0a0b0;text-decoration:none;font-size:0.9rem}
nav .back-link:hover{color:#e4e4e7}
.user-badge{font-size:0.85rem;color:#a0a0b0;background:#1a1a25;padding:0.3rem 0.75rem;border-radius:8px;border:1px solid #2a2a3a}

/* Layout — centered */
main{max-width:960px;margin:0 auto;padding:2.5rem 2rem}

/* Page header */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem;gap:1rem;flex-wrap:wrap}
.page-header h1{font-size:1.6rem;font-weight:700;color:#fafafa}
.subtitle{color:#a0a0b0;font-size:0.9rem;margin-top:0.3rem}

.card-list{display:flex;flex-direction:column;gap:0.5rem}
.card-item{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:0.7rem 1.2rem;background:#161622;
    border:1px solid #252535;border-radius:10px;
    text-decoration:none;color:#e4e4e7;transition:all .15s
}
.card-item:hover{border-color:#3b82f6;background:#1a1a2a}
.card-item .project-label{font-weight:600;font-size:0.95rem;color:#fafafa}
.card-item .project-meta{font-size:0.78rem;color:#707090;font-family:monospace;white-space:nowrap}

/* Buttons */
.btn-primary{
    padding:0.6rem 1.25rem;background:#3b82f6;color:#fff;
    border:none;border-radius:8px;font-weight:600;font-size:0.9rem;
    cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s
}
.btn-primary:hover{background:#2563eb}
.btn-ghost{
    padding:0.45rem 1rem;background:transparent;color:#a0a0b0;
    border:1px solid #35354a;border-radius:8px;font-size:0.85rem;cursor:pointer;transition:all .15s
}
.btn-ghost:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,0.08)}

/* Tables */
.table-container{overflow-x:auto;border-radius:12px;border:1px solid #252535}
table{width:100%;border-collapse:collapse;font-size:0.9rem}
thead th{
    text-align:left;color:#9090a0;font-weight:500;
    padding:0.75rem 1rem;border-bottom:1px solid #252535;
    font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;background:#13131a
}
tbody td{padding:0.6rem 1rem;border-top:1px solid rgba(255,255,255,0.03)}
tbody tr:hover{background:rgba(255,255,255,0.02)}
tr.clickable{cursor:pointer}

/* Badges */
.badge{
    display:inline-block;padding:0.15rem 0.6rem;border-radius:9999px;
    font-size:0.72rem;font-weight:600
}
.badge-success{background:rgba(34,197,94,0.12);color:#22c55e}
.badge-error{background:rgba(239,68,68,0.12);color:#ef4444}
.badge-warning{background:rgba(245,158,11,0.12);color:#f59e0b}

/* Login page */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.login-card{
    background:#161622;border:1px solid #252535;
    border-radius:16px;padding:2.5rem;width:100%;max-width:420px
}
.login-card h1{font-size:1.4rem;margin-bottom:0.2rem;font-weight:700;color:#fafafa}
.login-card .subtitle{color:#9090a0;font-size:0.9rem;margin-bottom:2rem}

.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:0.85rem;color:#b0b0c0;margin-bottom:0.4rem;font-weight:500}
.form-group input{
    width:100%;padding:0.7rem 0.85rem;background:#1e1e2e;color:#fafafa;
    border:1px solid #353550;border-radius:8px;
    font-size:0.95rem;font-family:inherit;transition:border-color .15s
}
.form-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.15)}
.login-card button{
    width:100%;padding:0.7rem;background:#3b82f6;color:#fff;
    border:none;border-radius:8px;font-weight:600;
    font-size:0.95rem;cursor:pointer;margin-top:0.5rem;transition:background .15s
}
.login-card button:hover{background:#2563eb}

/* Sections */
.section{margin-top:2.5rem}
.section h2{font-size:1.15rem;margin-bottom:1rem;font-weight:600;color:#fafafa}

/* Empty state */
.empty-state{padding:3.5rem 2rem;text-align:center;color:#707090;background:#161622;border-radius:12px;border:1px dashed #35354a}

/* Details */
details{cursor:pointer;margin:0.3rem 0}
details summary{color:#3b82f6;font-size:0.85rem;font-weight:500}
details dl{margin:0.5rem 0 0 1rem;font-size:0.85rem}
details dt{color:#9090a0;margin-top:0.3rem;font-size:0.8rem}
details dd{color:#e4e4e7;margin-bottom:0.2rem}
details audio{margin-top:0.5rem;width:100%;border-radius:8px}

/* Inline form */
.inline-form{display:flex;gap:0.6rem;align-items:center}
.inline-form input{flex:1;padding:0.55rem 0.75rem;background:#1e1e2e;color:#fafafa;border:1px solid #353550;border-radius:8px;font-size:0.9rem;font-family:inherit}
.inline-form input:focus{outline:none;border-color:#3b82f6}
.inline-form input::placeholder{color:#606080}

/* Responsive */
@media(max-width:640px){
    main{padding:1.5rem 1rem}
    .card-list{grid-template-columns:1fr}
    .page-header{flex-direction:column;align-items:flex-start}
    table{font-size:0.8rem}
    .login-card{padding:1.5rem}
    .inline-form{flex-direction:column}
    nav{padding:0.75rem 1rem}
}

/* Status Card (contact detail) */
.status-card{
    background:#161622;border:1px solid #252535;border-radius:12px;
    padding:1.2rem 1.5rem;margin-bottom:2rem;display:flex;
    flex-wrap:wrap;gap:1rem 2rem
}
.status-row{display:flex;align-items:center;gap:0.5rem}
.status-label{color:#9090a0;font-size:0.85rem;font-weight:500;min-width:90px}
.status-large{font-size:0.9rem;padding:0.3rem 0.8rem}
.badge-info{background:rgba(59,130,246,0.12);color:#3b82f6}

/* Call Card (contact detail) */
.call-card{
    background:#161622;border:1px solid #252535;border-radius:10px;
    padding:1.2rem;margin-bottom:1rem
}
.call-card-header{
    display:flex;align-items:center;gap:1rem;
    padding-bottom:0.8rem;border-bottom:1px solid #252535;
    font-size:0.85rem;color:#b0b0c0
}
.call-card-header .call-date{font-weight:600;color:#e4e4e7}
.call-card-header .call-id{font-family:monospace;font-size:0.75rem;color:#606080;margin-left:auto}
.call-section{margin-top:0.8rem}
.call-section h4{font-size:0.85rem;color:#9090a0;margin-bottom:0.4rem;font-weight:600}
.mini-table{width:100%;border-collapse:collapse;font-size:0.85rem}
.mini-table td{padding:0.25rem 0.5rem;border:none;border-bottom:1px solid rgba(255,255,255,0.03)}
.mini-table .q-col{color:#9090a0;font-weight:500;width:180px}
.summary-block,.transcript-block{
    background:#0e0e18;border:1px solid #252535;border-radius:8px;
    padding:0.8rem 1rem;font-size:0.82rem;color:#c0c0d0;
    white-space:pre-wrap;font-family:inherit;line-height:1.5;
    max-height:300px;overflow-y:auto
}
.audio-player{width:100%;border-radius:8px;margin-top:0.3rem}

/* Search / Filters */
.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.section-header h2{margin-bottom:0}
.search-form{display:flex;gap:0.4rem;align-items:center}
.search-form input{
    padding:0.45rem 0.75rem;background:#1e1e2e;color:#fafafa;
    border:1px solid #353550;border-radius:8px;font-size:0.85rem;
    font-family:inherit;width:240px
}
.search-form input:focus{outline:none;border-color:#3b82f6}
.search-form input::placeholder{color:#606080}

/* Phone link */
.phone-link{color:#3b82f6;text-decoration:none;font-weight:500}
.phone-link:hover{text-decoration:underline}

/* Empty row */
.empty-row{text-align:center;color:#707090;padding:2rem}

/* Metadata form */
.metadata-card{background:#161622;border:1px solid #252535;border-radius:12px;padding:1rem 1.5rem}
.metadata-summary{font-weight:600;font-size:1rem;color:#fafafa;cursor:pointer;padding:0.5rem 0}
.metadata-form{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}
.metadata-form .form-row label span{display:block;font-size:0.8rem;color:#9090a0;margin-bottom:0.3rem;font-weight:500}
.metadata-form input[type="text"],.metadata-form textarea,.metadata-form select{
    width:100%;padding:0.55rem 0.75rem;background:#1e1e2e;color:#fafafa;
    border:1px solid #353550;border-radius:8px;font-size:0.9rem;font-family:inherit
}
.metadata-form textarea{resize:vertical;min-height:80px}
.metadata-form input:focus,.metadata-form textarea:focus,.metadata-form select:focus{outline:none;border-color:#3b82f6}
.metadata-form .btn-primary{width:fit-content}