/* =============================================
   V20 LIMPA DE VERDADE
   Dark premium final layer
   ============================================= */

:root{
  --v20-bg:#0b0e13;
  --v20-shell:#0e1117;
  --v20-card:#12161f;
  --v20-card-2:#151a24;
  --v20-input:#0f141d;

  --v20-border:#1f2633;
  --v20-border-soft:#1a202c;
  --v20-border-strong:#2b3445;

  --v20-text:#e6eaf2;
  --v20-text-soft:#a7b0c0;
  --v20-text-muted:#6b7485;

  --v20-brand:#a10f14;
  --v20-brand-hover:#7f0b10;
  --v20-brand-soft:rgba(161,15,20,.12);
  --v20-brand-line:rgba(161,15,20,.22);

  --v20-success:#1f7a46;
  --v20-warning:#a15c07;
  --v20-danger:#b42318;

  --v20-shadow-sm:0 6px 18px rgba(0,0,0,.22);
  --v20-shadow-md:0 12px 30px rgba(0,0,0,.35);
  --v20-radius-sm:12px;
  --v20-radius-md:16px;
  --v20-radius-lg:20px;

  /* aliases for old inline styles/js */
  --primary: var(--v20-bg);
  --secondary: var(--v20-shell);
  --surface: var(--v20-card);
  --card-bg: var(--v20-card);
  --input-bg: var(--v20-input);

  --accent: var(--v20-brand);
  --accent-dark: var(--v20-brand-hover);
  --accent-light: var(--v20-brand-soft);
  --accent-glow: rgba(161,15,20,.25);

  --success: var(--v20-success);
  --danger: var(--v20-danger);
  --warning: var(--v20-warning);

  --text: var(--v20-text);
  --text-soft: var(--v20-text-soft);
  --text-muted: var(--v20-text-muted);
  --white: var(--v20-text);

  --border: var(--v20-border);
  --border-soft: var(--v20-border-soft);
  --shadow: 0 4px 32px rgba(0,0,0,0.6);
  --shadow-card: var(--v20-shadow-md);
}

html, body,
body.theme-dark-premium{
  background:var(--v20-bg) !important;
  color:var(--v20-text) !important;
}

body.theme-dark-premium .admin-layout,
body.theme-dark-premium .portal-layout,
body.theme-dark-premium .main-content,
body.theme-dark-premium .section{
  background:transparent !important;
}

body.theme-dark-premium .main-content{
  max-width:1440px;
  margin:0 auto;
  padding:0 20px 28px;
}

/* sidebar + topbar */
body.theme-dark-premium .sidebar{
  background:var(--v20-shell) !important;
  border-right:1px solid var(--v20-border) !important;
  box-shadow:none !important;
}
body.theme-dark-premium .topbar{
  background:rgba(14,17,23,.92) !important;
  border:1px solid var(--v20-border) !important;
  border-radius:16px !important;
  box-shadow:var(--v20-shadow-sm) !important;
}
body.theme-dark-premium .topbar-title,
body.theme-dark-premium .card-title,
body.theme-dark-premium .panel-title,
body.theme-dark-premium .crud-title,
body.theme-dark-premium h1,
body.theme-dark-premium h2,
body.theme-dark-premium h3,
body.theme-dark-premium h4,
body.theme-dark-premium strong{
  color:var(--v20-text) !important;
}
body.theme-dark-premium .topbar-sub,
body.theme-dark-premium .card-sub,
body.theme-dark-premium p,
body.theme-dark-premium span,
body.theme-dark-premium label,
body.theme-dark-premium small,
body.theme-dark-premium .form-label{
  color:var(--v20-text-soft) !important;
}
body.theme-dark-premium .logo-sub,
body.theme-dark-premium .nav-section-label,
body.theme-dark-premium .user-title{
  color:var(--v20-text-muted) !important;
}

/* global card system */
body.theme-dark-premium .card,
body.theme-dark-premium .panel-card,
body.theme-dark-premium .crud-card,
body.theme-dark-premium .entity-card,
body.theme-dark-premium .form-section,
body.theme-dark-premium .info-item,
body.theme-dark-premium .table-wrapper,
body.theme-dark-premium .modal,
body.theme-dark-premium .modal-content,
body.theme-dark-premium .modal-box,
body.theme-dark-premium .modal-panel,
body.theme-dark-premium .empty-state,
body.theme-dark-premium .helper-card,
body.theme-dark-premium .blank-state,
body.theme-dark-premium .v10-hero,
body.theme-dark-premium .v10-panel,
body.theme-dark-premium .v10-stat,
body.theme-dark-premium .v10-summary-card,
body.theme-dark-premium .v10-finance-side,
body.theme-dark-premium .v10-hero-note,
body.theme-dark-premium .v10-mini-item,
body.theme-dark-premium .v10-ticket-detail,
body.theme-dark-premium .v11-client-card,
body.theme-dark-premium .v11-ticket-list,
body.theme-dark-premium .v11-ticket-detail,
body.theme-dark-premium .v13-client-card,
body.theme-dark-premium .v13-profile-card,
body.theme-dark-premium .v13-feedback-item,
body.theme-dark-premium .v15-metric,
body.theme-dark-premium .v18-toast{
  background:linear-gradient(180deg, var(--v20-card), #10151d) !important;
  border:1px solid var(--v20-border) !important;
  color:var(--v20-text) !important;
  box-shadow:var(--v20-shadow-md) !important;
}

/* forms */
body.theme-dark-premium input,
body.theme-dark-premium select,
body.theme-dark-premium textarea,
body.theme-dark-premium .form-control,
body.theme-dark-premium .v10-input,
body.theme-dark-premium .v13-search input,
body.theme-dark-premium .v16-search input,
body.theme-dark-premium .v16-command-head input{
  background:var(--v20-input) !important;
  border:1px solid var(--v20-border) !important;
  color:var(--v20-text) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
body.theme-dark-premium input::placeholder,
body.theme-dark-premium textarea::placeholder{
  color:var(--v20-text-muted) !important;
}
body.theme-dark-premium input:focus,
body.theme-dark-premium select:focus,
body.theme-dark-premium textarea:focus{
  border-color:rgba(161,15,20,.28) !important;
  box-shadow:0 0 0 4px rgba(161,15,20,.10) !important;
  transform:none !important;
}

/* buttons */
body.theme-dark-premium .btn-primary,
body.theme-dark-premium .v13-btn-primary,
body.theme-dark-premium .v10-btn-primary{
  background:linear-gradient(180deg, var(--v20-brand), var(--v20-brand-hover)) !important;
  border:1px solid rgba(161,15,20,.25) !important;
  color:#fff !important;
}
body.theme-dark-premium .btn,
body.theme-dark-premium .v13-btn,
body.theme-dark-premium .v10-btn,
body.theme-dark-premium .v16-ghost{
  border-radius:12px !important;
}
body.theme-dark-premium .btn-outline,
body.theme-dark-premium .btn-secondary,
body.theme-dark-premium .btn-ghost,
body.theme-dark-premium .v13-btn,
body.theme-dark-premium .v10-btn,
body.theme-dark-premium .v16-ghost{
  background:var(--v20-input) !important;
  border:1px solid var(--v20-border) !important;
  color:var(--v20-text) !important;
}
body.theme-dark-premium .btn-warning{
  background:rgba(161,92,7,.16) !important;
  border:1px solid rgba(161,92,7,.22) !important;
  color:#ffd9a6 !important;
}

/* tables */
body.theme-dark-premium .table-wrapper{
  background:linear-gradient(180deg, var(--v20-card), #10151d) !important;
  padding:0 !important;
  overflow:hidden !important;
}
body.theme-dark-premium .table-wrapper table{
  width:100%;
  background:transparent !important;
  border-collapse:separate;
  border-spacing:0;
}
body.theme-dark-premium .table-wrapper thead th{
  background:var(--v20-card-2) !important;
  color:#c9b1b3 !important;
  border-bottom:1px solid var(--v20-border-strong) !important;
  padding:14px 16px !important;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
}
body.theme-dark-premium .table-wrapper tbody td{
  color:var(--v20-text-soft) !important;
  padding:14px 16px !important;
  border-bottom:1px solid var(--v20-border-soft) !important;
}
body.theme-dark-premium .table-wrapper tbody tr:hover{
  background:#131823 !important;
}

/* badge system */
body.theme-dark-premium .badge,
body.theme-dark-premium .status-badge,
body.theme-dark-premium .priority-badge,
body.theme-dark-premium .chip,
body.theme-dark-premium .tag,
body.theme-dark-premium .v13-chip,
body.theme-dark-premium .v13-badge{
  background:#0f141d !important;
  border:1px solid var(--v20-border) !important;
  color:var(--v20-text-soft) !important;
  border-radius:999px !important;
}
body.theme-dark-premium .badge-danger,
body.theme-dark-premium .v13-badge.status-open{
  background:rgba(180,35,24,.16) !important;
  color:#ffc7c1 !important;
  border-color:rgba(180,35,24,.22) !important;
}
body.theme-dark-premium .badge-warning,
body.theme-dark-premium .v13-badge.status-progress{
  background:rgba(161,92,7,.16) !important;
  color:#ffd9a6 !important;
  border-color:rgba(161,92,7,.22) !important;
}
body.theme-dark-premium .badge-approved,
body.theme-dark-premium .v13-badge.status-done{
  background:rgba(31,122,70,.16) !important;
  color:#c8efda !important;
  border-color:rgba(31,122,70,.22) !important;
}

/* dashboard + stats */
body.theme-dark-premium .stats-grid,
body.theme-dark-premium .v10-stats,
body.theme-dark-premium .v15-metrics{
  gap:16px !important;
}
body.theme-dark-premium .stat-card,
body.theme-dark-premium .v10-stat,
body.theme-dark-premium .v15-metric{
  background:linear-gradient(180deg, #171c26, #121720) !important;
  min-height:144px !important;
}
body.theme-dark-premium .stat-eyebrow,
body.theme-dark-premium .v10-stat-label,
body.theme-dark-premium .v15-metric h3{
  color:#bb9698 !important;
  font-size:10px !important;
  text-transform:uppercase;
  letter-spacing:.12em;
}
body.theme-dark-premium .stat-title,
body.theme-dark-premium .v10-stat-title{
  color:var(--v20-text-soft) !important;
}
body.theme-dark-premium .stat-value,
body.theme-dark-premium .v10-stat-value,
body.theme-dark-premium .v15-metric strong{
  color:var(--v20-text) !important;
}

/* targeted fixes for problem tabs */
body.theme-dark-premium #sec-proposals > div,
body.theme-dark-premium #sec-feedback > div,
body.theme-dark-premium #sec-materials > div,
body.theme-dark-premium #sec-contracts > div,
body.theme-dark-premium #sec-finance > div,
body.theme-dark-premium #sec-orders > div,
body.theme-dark-premium #sec-clients > div,
body.theme-dark-premium #sec-tickets > div{
  background:transparent !important;
  color:inherit !important;
}

/* proposals */
body.theme-dark-premium #sec-proposals .card,
body.theme-dark-premium #sec-proposals .card *{
  color:var(--v20-text) !important;
}
body.theme-dark-premium #sec-proposals .card-sub,
body.theme-dark-premium #sec-proposals [style*="font-size:12px"],
body.theme-dark-premium #sec-proposals [style*="color:var(--text-muted)"]{
  color:var(--v20-text-soft) !important;
}
body.theme-dark-premium #adminProposalList > div{
  background:transparent !important;
  border-bottom:1px solid var(--v20-border) !important;
  padding:14px 0 !important;
}
body.theme-dark-premium #adminProposalList > div:last-child{
  border-bottom:none !important;
}

/* materials */
body.theme-dark-premium #adminMaterialList > div{
  border-bottom:1px solid var(--v20-border) !important;
  padding:12px 0 !important;
}
body.theme-dark-premium #adminMaterialList > div *{
  color:var(--v20-text) !important;
}
body.theme-dark-premium #adminMaterialList > div [style*="font-size:11px"],
body.theme-dark-premium #adminMaterialList > div [style*="font-size:12px"]{
  color:var(--v20-text-soft) !important;
}

/* feedback */
body.theme-dark-premium #feedbackConversationList [onclick^="openFeedbackChat"]{
  background:#10151d !important;
  border:1px solid var(--v20-border) !important;
  color:var(--v20-text) !important;
  border-radius:12px !important;
}
body.theme-dark-premium #feedbackConversationList [onclick^="openFeedbackChat"] *{
  color:var(--v20-text) !important;
}
body.theme-dark-premium #feedbackConversationList [onclick^="openFeedbackChat"] [style*="font-size:11px"],
body.theme-dark-premium #feedbackConversationList [onclick^="openFeedbackChat"] [style*="font-size:12px"]{
  color:var(--v20-text-soft) !important;
}
body.theme-dark-premium #feedbackChatPanel,
body.theme-dark-premium .chat-wrap,
body.theme-dark-premium .chat-input-area{
  background:transparent !important;
  color:var(--v20-text) !important;
}
body.theme-dark-premium .chat-msg .chat-bubble{
  background:#121823 !important;
  border:1px solid var(--v20-border) !important;
  color:var(--v20-text) !important;
  border-radius:14px !important;
}
body.theme-dark-premium .chat-msg .chat-bubble p,
body.theme-dark-premium .chat-msg .chat-bubble small,
body.theme-dark-premium .chat-msg .chat-sender{
  color:var(--v20-text) !important;
}
body.theme-dark-premium .chat-msg .chat-bubble small{
  color:var(--v20-text-muted) !important;
}

/* contracts / finance / orders */
body.theme-dark-premium #sec-contracts .card *,
body.theme-dark-premium #sec-finance .card *,
body.theme-dark-premium #sec-orders .card *{
  color:var(--v20-text) !important;
}
body.theme-dark-premium #sec-contracts .table-wrapper th,
body.theme-dark-premium #sec-finance .table-wrapper th{
  color:#c9b1b3 !important;
}
body.theme-dark-premium #sec-contracts .status,
body.theme-dark-premium #sec-finance .status{
  color:inherit !important;
}

/* empty / text visibility */
body.theme-dark-premium .empty-state,
body.theme-dark-premium .v13-empty,
body.theme-dark-premium .v18-empty,
body.theme-dark-premium .v13-placeholder{
  background:#10151d !important;
  border:1px dashed var(--v20-border-strong) !important;
  color:var(--v20-text-soft) !important;
}
body.theme-dark-premium .empty-state p,
body.theme-dark-premium .v18-empty strong{
  color:var(--v20-text) !important;
}

/* kill remaining light inline backgrounds */
body.theme-dark-premium [style*="background:#fff"],
body.theme-dark-premium [style*="background: #fff"],
body.theme-dark-premium [style*="background:white"],
body.theme-dark-premium [style*="background: white"],
body.theme-dark-premium [style*="background:#ffffff"],
body.theme-dark-premium [style*="background: #ffffff"]{
  background:var(--v20-card) !important;
}

/* spacing normalization for inline layouts */
body.theme-dark-premium [style*="grid-template-columns:1fr 1fr;gap:24px"]{
  gap:20px !important;
}
body.theme-dark-premium .section > *{
  margin-bottom:20px !important;
}
body.theme-dark-premium .card{
  margin-bottom:0 !important;
}

@media (max-width: 980px){
  body.theme-dark-premium .main-content{ padding:0 14px 24px; }
  body.theme-dark-premium #sec-proposals > div,
  body.theme-dark-premium #sec-feedback > div{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    height:auto !important;
  }
}


/* ===== V21 KANBAN CLEAN ===== */

.kanban-column{
  background:#10151d;
  border:1px solid #1f2633;
  border-radius:16px;
  padding:14px;
}

.kanban-card{
  background:#121823;
  border:1px solid #1f2633;
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}

.kanban-card *{
  color:#e6eaf2;
}

/* =========================
   FIX PREVIEW CONTRATO
========================= */

body.theme-dark-premium #sec-contracts #contractPreview,
body.theme-dark-premium #sec-contracts #contractPreview * {
  color: #111 !important;
}

body.theme-dark-premium #sec-contracts #contractPreview {
  background: #ffffff !important;
}

#contractPreview {
  font-family: "Times New Roman", serif;
  line-height: 1.8;
}

.client-details-box {
  padding: 12px;
  background: #0f172a;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.client-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.btn-info {
  background: transparent;
  border: 1px solid #3b82f6;
  color: #3b82f6;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-info:hover {
  background: #3b82f6;
  color: #fff;
}

.client-details-row {
  display: none;
}

.client-card {
  margin-top: 10px;
  background: #0f172a;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}

.client-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.label {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.value {
  font-size: 14px;
  font-weight: 500;
}

.modal-sub {
  font-size: 12px;
  color: #94a3b8;
}

.modern-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  margin-bottom: 20px;
  position: relative;
}

.tab {
  position: relative;
  z-index: 2;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.tab:hover {
  color: #fff;
}

.tab.active {
  color: #fff;
}

.tabs::before {
  content: '';
  position: absolute;
  top: 6px;
  left: var(--tab-left, 6px);
  width: var(--tab-width, 80px);
  height: calc(100% - 12px);
  background: linear-gradient(90deg, #ef4444, #dc2626);
  border-radius: 999px;
  transition: all 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

#modalNewClient .tab-content {
  display: none;
}

#modalNewClient .tab-content.active {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.col-2 {
  grid-column: span 2;
}

.logo-upload {
  margin-top: 10px;
}

.logo-preview {
  margin-top: 10px;
  padding: 10px;
  background: #0f172a;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
}

.logo-preview img {
  max-width: 80px;
  border-radius: 8px;
}

.modern-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-close {
  background: #1f2937;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(2, 6, 23, 0.75); /* fundo escuro */
  backdrop-filter: blur(6px); /* efeito premium */
  -webkit-backdrop-filter: blur(6px);

  z-index: 9999;
}

.modal-card {
  background: linear-gradient(180deg, #0f172a, #020617);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.modal-card input,
.modal-card textarea {
  background: #020617;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}

.modal-card input::placeholder,
.modal-card textarea::placeholder {
  color: #64748b;
}

.modal-card h3 {
  color: #fff;
  font-weight: 600;
}

.modal-sub {
  color: #94a3b8;
}

.reset-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.reset-box {
  background: #020617;
  padding: 24px;
  border-radius: 12px;
  width: 320px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
}

.reset-password-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f172a;
  padding: 10px;
  border-radius: 8px;
  margin: 12px 0;
}

.reset-password-box span {
  font-weight: bold;
  letter-spacing: 1px;
}

.reset-password-box button {
  background: none;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: #ef4444;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

.hidden {
  display: none;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.card-stat {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.card-stat h2 {
  font-size: 28px;
  color: #fff;
  margin: 0;
}

.card-stat span {
  color: #94a3b8;
}

.dashboard-projects .project-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.progress-bar {
  height: 6px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-bar div {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.task-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 4px;
  color: #cbd5f5;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.dashboard-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.client-dashboard-premium {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.client-hero-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(239,68,68,.18), transparent 35%),
    linear-gradient(180deg, #151a24, #0f141d);
  border: 1px solid #263044;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.client-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #ef9a9a;
  margin-bottom: 8px;
}

.client-hero-card h2 {
  margin: 0;
  font-size: 30px;
}

.client-hero-card p {
  margin: 8px 0 0;
  color: #a7b0c0;
  max-width: 620px;
}

.client-health-box {
  min-width: 190px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(15,20,29,.8);
  border: 1px solid #263044;
}

.client-health-box span,
.client-health-box small {
  display: block;
  color: #94a3b8;
  font-size: 12px;
}

.client-health-box strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
  color: #fff;
}

.client-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.client-kpi-card {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #131925, #0f141d);
  border: 1px solid #243047;
}

.client-kpi-card span {
  color: #94a3b8;
  font-size: 13px;
}

.client-kpi-card strong {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  color: #fff;
}

.client-kpi-card small {
  color: #64748b;
}

.client-kpi-card.featured {
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 1px rgba(239,68,68,.08), 0 20px 45px rgba(239,68,68,.08);
}

.client-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

.client-main-column,
.client-side-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.client-panel {
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #121823, #0f141d);
  border: 1px solid #243047;
  box-shadow: 0 14px 35px rgba(0,0,0,.28);
}

.client-panel-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.client-panel-head h3 {
  margin: 0;
}

.client-panel-head p {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

.client-project-card,
.client-completed-card {
  padding: 18px;
  border-radius: 18px;
  background: #0f172a;
  border: 1px solid #253047;
  margin-bottom: 14px;
}

.client-project-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.client-project-top h4,
.client-completed-card h4 {
  margin: 0;
  color: #fff;
}

.client-project-top p,
.client-completed-card p {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 13px;
}

.client-status-pill {
  height: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.22);
  color: #fecaca;
  font-size: 12px;
  white-space: nowrap;
}

.client-progress-row {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 8px;
  font-size: 13px;
  color: #94a3b8;
}

.client-progress {
  height: 8px;
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
}

.client-progress div {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.client-task-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-task-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
}

.client-task-item span {
  color: #e6eaf2;
}

.client-task-item em {
  color: #94a3b8;
  font-style: normal;
}

.client-task-item.done {
  border-color: rgba(34,197,94,.18);
}

.client-completed-meta {
  margin: 12px 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.14);
}

.client-completed-meta strong {
  display: block;
  color: #bbf7d0;
  font-size: 22px;
}

.client-completed-meta span {
  color: #86efac;
  font-size: 12px;
}

.client-finance-status,
.client-contract-line,
.client-chat-row {
  padding: 14px;
  border-radius: 14px;
  background: #0f172a;
  border: 1px solid #253047;
  margin-bottom: 10px;
}

.client-finance-status span,
.client-contract-line span,
.client-chat-row span {
  display: block;
  color: #94a3b8;
  font-size: 12px;
}

.client-finance-status strong,
.client-contract-line strong,
.client-chat-row strong {
  display: block;
  color: #fff;
  margin-top: 4px;
}

.client-finance-status.warning {
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.08);
}

.client-plan-ring {
  width: 130px;
  height: 130px;
  margin: 4px auto 16px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #10151d 58%, transparent 60%),
    conic-gradient(#ef4444 0 65%, #1e293b 65% 100%);
}

.client-plan-ring strong {
  font-size: 28px;
  color: #fff;
}

.client-plan-ring span {
  font-size: 12px;
  color: #94a3b8;
}

.client-chat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.client-empty {
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed #334155;
  color: #94a3b8;
  background: rgba(255,255,255,.02);
}

.client-empty.small {
  font-size: 13px;
}

@media (max-width: 1100px) {
  .client-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .client-kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .client-hero-card {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .client-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CHAT WHATSAPP PRO FINAL ===== */

.chat-modal {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 999999 !important;
}

.chat-modal.active {
  display: flex !important;
}

.chat-box {
  width: 520px !important;
  max-width: 92vw !important;
  height: 620px !important;
  max-height: 88vh !important;
  background: #020617 !important;
  border: 1px solid #334155 !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.chat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  background: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
}

.chat-header span,
.chat-header h3 {
  color: #e5e7eb !important;
  font-size: 15px !important;
  margin: 0 !important;
}

.chat-header button {
  width: 180px !important;
  height: 36px !important;
  border: none !important;
  border-radius: 10px !important;
  background: #b91c1c !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.chat-messages {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 18px !important;
  overflow-y: auto !important;
  background: #111820 !important;
}

.chat-row {
  display: flex !important;
  width: 100% !important;
  align-items: flex-end !important;
  animation: chatFadeIn .18s ease !important;
}

.chat-row.client {
  justify-content: flex-end !important;
}

.chat-row.admin {
  justify-content: flex-start !important;
}


.chat-row.client .chat-bubble {
  background: #dc2626 !important;
  color: #fff !important;
  border-bottom-right-radius: 4px !important;
}

.chat-row.admin .chat-bubble {
  background: #1e293b !important;
  color: #e5e7eb !important;
  border-bottom-left-radius: 4px !important;
}

.chat-row.client .chat-bubble::after {
  content: "" !important;
  position: absolute !important;
  right: -6px !important;
  bottom: 0 !important;
  border-left: 6px solid #dc2626 !important;
  border-top: 6px solid transparent !important;
}

.chat-row.admin .chat-bubble::after {
  content: "" !important;
  position: absolute !important;
  left: -6px !important;
  bottom: 0 !important;
  border-right: 6px solid #1e293b !important;
  border-top: 6px solid transparent !important;
}

.chat-row.grouped .chat-bubble::after {
  display: none !important;
}

.chat-time {
  font-size: 10px !important;
  opacity: .6 !important;
  margin-left: 6px !important;
  display: inline-block !important;
}

.chat-input {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  background: #020617 !important;
  border-top: 1px solid #1e293b !important;
}

.chat-input input {
  flex: 1 !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid #334155 !important;
  background: #0f172a !important;
  color: #fff !important;
  outline: none !important;
}

.chat-input input:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}

.chat-input button {
  width: auto !important;
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: none !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.chat-empty {
  text-align: center !important;
  color: #94a3b8 !important;
  margin: auto !important;
}

@keyframes chatFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-bubble {
  display: inline-block !important;
  padding: 8px 12px 18px !important;
  border-radius: 16px !important;
  position: relative !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  word-break: break-word !important;

  width: fit-content !important;
  max-width: 75% !important;
}

.chat-row {
  display: flex;
  margin: 4px 0;
}

.chat-row.client {
  justify-content: flex-end;
}

.chat-row.admin {
  justify-content: flex-start;
}

.chat-msg {
  display: flex !important;
  flex-direction: column !important;
  max-width: 75% !important;
}

.chat-row.client .chat-msg {
  align-items: flex-end !important;
}

.chat-row.admin .chat-msg {
  align-items: flex-start !important;
}
/* deixa mais compacto tipo WhatsApp */

.chat-messages {
  scroll-behavior: smooth;
}

.chat-bubble:hover {
  filter: brightness(1.05);
}

.chat-bubble {
  min-width: 80px !important;
}

.chat-row {
  margin: 6px 0 !important;
}

.chat-bubble {
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.logo-img {
  max-width: 200px;
  height: auto;
  display: block;
}

.sidebar-logo {
  padding: 25px 15px;
  display: flex;
  align-items: center;
}