/* WEVOLVED Gestão — aspeto inspirado no Asana */
:root {
  --coral: #c70940;
  --dark: #1e1f21;
  --dark-2: #2a2b2d;
  --bg: #f9f8f8;
  --border: #edeae9;
  --text: #1e1f21;
  --muted: #6d6e6f;
  --blue: #c70940;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; }
a { color: var(--blue); text-decoration: none; }
.x-small { font-size: 11px; }

/* Layout */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--dark); color: #fff; display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; }
.brand { padding: 12px 16px; font-weight: 700; font-size: 15px; letter-spacing: .3px; color:#fff; display:flex; align-items:center; gap:10px; }
.brand:hover { color:#fff; }
.brand img { width:34px; height:34px; border-radius:0; flex-shrink:0; }
.brand em { color: var(--coral); font-weight:500; font-style:normal; }
.sidebar nav { flex: 1; padding: 8px 10px; overflow-y: auto; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; color: #c8c8c9; padding: 8px 12px;
  border-radius: 8px; margin-bottom: 2px; font-size: 14px; }
.sidebar nav a:hover { background: var(--dark-2); color: #fff; }
.sidebar nav a.active { background: var(--coral); color: #fff; }
.nav-sep { color: #7d7e80; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; padding: 14px 12px 4px; }
.sidebar-footer { display: flex; align-items: center; padding: 12px 16px; border-top: 1px solid #3a3b3d; }

.main-wrap { flex: 1; margin-left: 240px; display: flex; flex-direction: column; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid var(--border); padding: 12px 28px;
  display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.topbar-title { font-size: 18px; font-weight: 600; }
.content { padding: 24px 28px; max-width: 1280px; width: 100%; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-head h1 { font-size: 20px; font-weight: 700; margin: 0; }

/* Cards */
.card-w { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
.card-w h6 { font-weight: 700; margin-bottom: 12px; }

/* Botões */
.btn-coral { background: var(--coral); border: none; color: #fff; }
.btn-coral:hover { background: #a00734; color: #fff; }
.bg-coral { background: var(--coral) !important; }
.btn-icon { background: none; border: none; font-size: 18px; color: var(--muted); position: relative; padding: 4px 6px; }
.btn-icon:hover { color: var(--text); }

/* Avatares */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  color: #fff; font-weight: 600; flex-shrink: 0; }
.avatar-stack .avatar { margin-left: -8px; border: 2px solid #fff; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* Status pills */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap; }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Tabelas / listas de projetos */
.proj-row { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px; transition: box-shadow .15s; }
.proj-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.proj-row .drag-handle { cursor: grab; color: #c8c8c9; }
.proj-row .drag-handle:hover { color: var(--muted); }
.proj-row.ui-sortable-helper { box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.proj-prio { width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; }

/* Pontos de desenvolvimento */
.point-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; margin-bottom: 6px; }
.point-row.done .point-title { text-decoration: line-through; color: var(--muted); }
.point-check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #c8c8c9; background: none;
  cursor: pointer; flex-shrink: 0; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
.point-check:hover { border-color: #58a182; color: #58a182; }
.point-row.done .point-check { background: #58a182; border-color: #58a182; color: #fff; }

/* Notificações */
.notif-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.notif-menu { width: 340px; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid var(--border); display: block; color: var(--text); }
.notif-item.unread { background: #fdeaf0; }
.notif-item:hover { background: var(--bg); }

/* Toasts */
.toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast-w { background: var(--dark); color: #fff; padding: 12px 16px; border-radius: 10px; min-width: 260px; max-width: 360px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: slideIn .25s ease; cursor: pointer; }
.toast-w .t-title { font-weight: 600; font-size: 13px; }
.toast-w .t-body { font-size: 12px; color: #c8c8c9; }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Login */
.auth-bg { background: var(--dark); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { background: #fff; border-radius: 14px; padding: 34px; width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.auth-logo { font-size: 22px; font-weight: 800; margin-bottom: 18px; }
.auth-logo span { color: var(--coral); font-weight: 500; }

/* Chat */
.chat-wrap { display: flex; height: calc(100vh - 140px); background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.chat-side { width: 290px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.chat-side-list { flex: 1; overflow-y: auto; }
.conv-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f5f3f3; }
.conv-item:hover, .conv-item.active { background: var(--bg); }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px; background: var(--bg); }
.msg { max-width: 70%; margin-bottom: 10px; }
.msg .bubble { padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border); display: inline-block; }
.msg.mine { margin-left: auto; text-align: right; }
.msg.mine .bubble { background: var(--coral); color: #fff; border: none; }
.msg .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Vários */
.table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.nav-pills .nav-link { color: var(--muted); font-weight: 600; font-size: 13px; }
.nav-pills .nav-link.active { background: var(--coral); }
.cred-pass { font-family: monospace; letter-spacing: 2px; }
.timeline { border-left: 2px solid var(--border); padding-left: 18px; }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before { content: ''; position: absolute; left: -24px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--coral); }
/* Calendário do dashboard */
.cal-table td.cal-day { width: 14.28%; height: 84px; vertical-align: top; padding: 4px 6px; }
.cal-table td.cal-day { cursor:pointer; }
.cal-table td.cal-day:hover { box-shadow:inset 0 0 0 2px var(--coral); }
.cal-table td.cal-today { background: #fdeaf0; border: 2px solid var(--coral); }
.text-coral { color: var(--coral) !important; }
.dash-widget-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dash-widget-head h6 { margin:0; }
.dash-handle { cursor:grab; }
.mail-folders button { flex:1; border:0; background:#fff; padding:10px 4px; color:var(--muted); font-size:11px; }
.mail-folders button i { display:block; font-size:17px; }
.mail-folders button.active { color:var(--coral); box-shadow:inset 0 -2px var(--coral); }
.mail-list-item:hover { background:var(--bg)!important; }
.global-chat { width:min(720px,95vw)!important; }
.global-chat-body { display:grid; grid-template-columns:230px 1fr; height:calc(100vh - 82px); }
.global-chat-convs { border-right:1px solid var(--border); overflow-y:auto; }
.global-chat-main { display:flex; flex-direction:column; min-width:0; }
.global-chat-msgs { flex:1; padding:12px; overflow-y:auto; background:var(--bg); }
.global-chat-msgs .msg { max-width:85%; }

/* ---- Mobile / Web App (PWA) ---- */
@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .sidebar nav a { justify-content: center; padding: 10px 6px; }
  .sidebar nav a span, .sidebar nav a .badge, .brand-label, .sidebar-footer > div, .nav-sep { display: none; }
  .brand { padding:12px 15px; }
  .sidebar nav a i { font-size: 18px; }
  .sidebar-footer { justify-content: center; }
  .main-wrap { margin-left: 64px; }
  .content { padding: 14px 12px; }
  .topbar { padding: 10px 12px; }
  .topbar-title { font-size: 15px; }
  .punch-widget { display: none !important; }
  .chat-wrap { height: calc(100vh - 120px); }
  .chat-side { width: 110px; }
  .conv-item .x-small { display: none; }
  .msg { max-width: 88%; }
  .notif-menu { width: 290px; }
  .global-chat-body { grid-template-columns:105px 1fr; }
}
@media (max-width: 576px) {
  .page-head { flex-direction: column; align-items: flex-start; }
  .proj-row { flex-wrap: wrap; gap: 8px; }
  .card-w { padding: 14px; }
  .table { font-size: 12px; }
}
/* área segura iOS (notch) em modo standalone */
@media (display-mode: standalone) {
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); }
}