/* === Design System – CRM TPE WhatsApp ===================================== */
:root{
  --brand:#0f172a;
  --brand-100:#f1f5ff;
  --brand-200:#e0e7ff;
  --bg:#f7f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --success:#16a34a;
  --warn:#f59e0b;
  --danger:#dc2626;
  --radius:12px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 24px rgba(17,24,39,.06);
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }

.container{ display:grid; grid-template-columns:240px 1fr 520px; gap:16px; padding:16px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow) }

/* Sidebar */
.sidebar{ padding:12px; position:sticky; top:16px; height:calc(100vh - 32px); overflow:auto }
.sidebar h3{ margin:6px 0 12px; font-size:13px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase }
.sidebar-nav a{ display:block; padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:6px; border:1px solid transparent; min-height:44px; }
.sidebar-nav a.active{ background:var(--brand-100); border-color:var(--brand-200) }
.filter{ margin-top:14px }

/* Buttons */
.btn{ display:inline-block; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--line); background:#fff; cursor:pointer; min-height:44px; }
.btn:hover{ filter:brightness(0.98) }
.btn-primary{ background:var(--brand); color:#fff; border-color:var(--brand) }
.btn-danger{ background:#dc2626; color:#fff; border-color:#dc2626 }
.btn-ghost{ background:#fff; border:1px dashed var(--line) }
.btn-full{ width:100% }

/* Text utils */
.muted{ color:var(--muted) }
.small{ font-size:12px }
.hint{ font-size:12px; color:var(--muted); margin-top:6px }

/* Forms */
input[type="text"], input[type="tel"], input[type="email"], textarea, select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--text); min-height:44px; font-size:14px;
}
label{ display:block; font-weight:600; margin:10px 0 6px }

/* Kanban */
.kanban{ display:grid; grid-template-columns:repeat(4, minmax(240px,1fr)); gap:12px }
.col{ padding:8px; min-height:80px }
.col h4{ margin:6px 6px 10px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em }
.dropzone{ min-height:60px; padding:6px; border-radius:var(--radius-sm); outline:2px dashed transparent; transition:background .15s, outline-color .15s }
.dropzone.dragover{ background:var(--brand-100); outline-color:var(--brand-200) }
.deal{ padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm); margin:8px 0; background:#fff; cursor:grab; user-select:none }
.deal:active{ cursor:grabbing }
.deal .name{ font-weight:600 }
.deal .meta{ color:var(--muted); font-size:12px; margin-top:4px }

/* Right panel / thread + contacts list */
.right{ padding:0; display:flex; flex-direction:column; height:calc(100vh - 32px); position:sticky; top:16px }
.right-header{ padding:12px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px }
.toolbar{ padding:8px 12px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:8px }
.right-body{ display:grid; grid-template-columns: 240px 1fr; height:100% }
@media (max-width: 980px){ .right-body{ grid-template-columns: 1fr } }

.contacts-pane{ border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0 }
@media (max-width: 980px){ .contacts-pane{ border-right:none; border-bottom:1px solid var(--line) } }

.contacts-pane .section{ padding:10px 12px; border-bottom:1px solid var(--line) }
.contacts-pane details{ border-bottom:1px solid var(--line) }
.contacts-pane summary{ list-style:none; cursor:pointer; padding:10px 12px; font-weight:600 }
.contacts-pane summary::-webkit-details-marker{ display:none }
.contacts-pane .search{ padding:0 12px 10px }
.contacts-list{ overflow:auto; padding:6px 8px; flex:1 }
.contact-item{ padding:10px 12px; border-radius:10px; border:1px solid transparent; display:block; min-height:44px; }
.contact-item:hover{ background:#fafafa; border-color:var(--line) }
.contact-item.active{ background:var(--brand-100); border-color:var(--brand-200) }
.contact-meta{ font-size:12px; color:var(--muted); }

/* Thread */
.thread{ display:flex; flex-direction:column; height:100% }
.messages{ padding:12px 14px; overflow:auto; flex:1; background:#fafafa; border-bottom:1px solid var(--line) }
.msg-divider{ text-align:center; color:var(--muted); font-size:12px; margin:8px 0 }
.msg{ display:flex; margin:6px 0 }
.msg.in{ justify-content:flex-start }
.msg.out{ justify-content:flex-end }
.bubble{ max-width:70%; border:1px solid var(--line); background:#fff; padding:10px 12px; border-radius:12px }
.msg.out .bubble{ background:var(--brand-100) }
.bubble .meta{ display:block; color:var(--muted); font-size:11px; margin-top:6px; text-align:right }
.composer{ padding:12px; display:flex; gap:8px }
.composer textarea{ flex:1; min-height:44px; resize:vertical }

/* Empty state */
.empty{ display:flex; align-items:center; justify-content:center; padding:24px; border:1px dashed var(--line); border-radius:var(--radius); background:#fff }

/* Tables (contacts page) */
.table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top }
.table thead th{ background:#f9fafb; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em }

/* Responsive table - card view on mobile */
@media (max-width: 768px) {
  .table thead{ display: none; }
  .table, .table tbody, .table tr, .table td{ display: block; width: 100%; }
  .table tr{ 
    margin-bottom: 12px; 
    border: 1px solid var(--line); 
    border-radius: var(--radius); 
    background: #fff;
    padding: 10px;
  }
  .table td{ 
    border: none; 
    padding: 6px 0; 
    position: relative;
    padding-left: 120px;
    min-height: 32px;
  }
  .table td:before{ 
    content: attr(data-label); 
    position: absolute; 
    left: 0; 
    width: 110px; 
    font-weight: 600; 
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
  }
  .table td:last-child{ padding-top: 12px; padding-left: 0; border-top: 1px solid var(--line); margin-top: 8px; }
  .table td:last-child:before{ display: none; }
}

/* Layout responsif global */
@media (max-width: 1200px){ .container{ grid-template-columns:220px 1fr 420px } }
@media (max-width: 980px){
  .container{ grid-template-columns: 1fr; }
  .sidebar, .right{ position:static; height:auto }
}
@media (max-width: 760px){ .kanban{ grid-template-columns: repeat(2, minmax(220px,1fr)) } }
@media (max-width: 640px){
  .container{ padding: 12px; gap: 12px; }
  .kanban{ grid-template-columns: 1fr }
  .messages{ padding:10px }
  .composer{ padding:10px }
  .card{ padding: 12px; }
  .sidebar{ padding: 10px; }
}

/* Mobile responsive improvements */
@media (max-width: 540px) {
  /* Make buttons touch-friendly */
  .btn{ min-height: 44px; padding: 12px 14px; }
  
  /* Improve form inputs for mobile */
  input[type="text"], input[type="tel"], input[type="email"], textarea, select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Stack contact meta info */
  .contact-meta{ 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
  }
  
  /* Improve bubble size on mobile */
  .bubble{ max-width: 85%; }
  
  /* Better deal cards on mobile */
  .deal{ padding: 12px 10px; }
  .deal .name{ font-size: 14px; }
  
  /* Improve dropzone touch targets */
  .dropzone{ min-height: 80px; }
}