@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.dwp-shell,
.dwp-shell * {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

.dwp-shell {
  display: flex;
  min-height: calc(100vh - 80px);
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

.dwp-sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  padding: 18px;
}

.dwp-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.dwp-logo-box { width: 36px; height: 36px; background: linear-gradient(135deg,#0f172a,#1d4ed8); color: #fff; border-radius: 10px; display: grid; place-items: center; font-weight: 700; }
.dwp-logo-text { font-weight: 700; color: #0f172a; }

.dwp-nav { display: flex; flex-direction: column; gap: 4px; }
.dwp-nav-label { margin-top: 12px; color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.dwp-nav-item { padding: 10px 12px; border-radius: 10px; color: #475569; text-decoration: none; display:flex; gap:8px; align-items:center; }
.dwp-nav-item:hover { background: #f8fafc; color: #0f172a; }
.dwp-nav-item.is-active { background: #e0e7ff; color: #312e81; font-weight: 600; }
.dwp-nav-item-between { display: flex; justify-content: space-between; align-items: center; }
.dwp-pill { background: #eef2ff; color: #4f46e5; border-radius: 999px; font-size: 12px; padding: 2px 8px; }
.dwp-i { opacity: .9; }

.dwp-main { flex: 1; padding: 24px; overflow: auto; }
.dwp-topbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dwp-topbar h1 { margin: 0; font-size: 28px; }
.dwp-topbar p { margin: 4px 0 0; color: #64748b; }

.dwp-actions { display: flex; gap: 8px; }
.dwp-actions button { border: 1px solid #cbd5e1; background: #fff; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600; }
.dwp-actions .dwp-primary { background: #0f172a; color: #fff; border-color: #0f172a; }

.dwp-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.dwp-stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; position:relative; overflow:hidden; }
.dwp-stat-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; opacity:.7; }
.dwp-stat-card--clients::after { background:#4f46e5; }
.dwp-stat-card--sessions::after { background:#0284c7; }
.dwp-stat-card--plans::after { background:#d97706; }
.dwp-stat-card--messages::after { background:#e11d48; }
.dwp-stat-card p { margin: 0 0 6px; color: #475569; font-weight: 600; }
.dwp-stat-card h3 { margin: 0; font-size: 28px; color:#0f172a; }

.dwp-layout-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.dwp-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; }
.dwp-panel h2 { margin: 0 0 12px; font-size: 16px; color:#0f172a; }

.dwp-table { width: 100%; border-collapse: collapse; }
.dwp-table th, .dwp-table td { border-bottom: 1px solid #f1f5f9; text-align: left; padding: 10px 8px; font-size: 13px; }
.dwp-table th { color: #94a3b8; text-transform: uppercase; font-size: 11px; }

.dwp-badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; background:#f1f5f9; color:#334155; }
.dwp-badge--ok { background:#ecfdf5; color:#047857; }
.dwp-badge--live { background:#eef2ff; color:#3730a3; }

.dwp-bars { height: 180px; display: flex; align-items: end; gap: 10px; margin-top: 24px; }
.dwp-bars > div { flex: 1; height: 100%; background: #eef2ff; border-radius: 8px 8px 0 0; position: relative; overflow: hidden; }
.dwp-bars > div::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: linear-gradient(180deg,#818cf8,#4f46e5); }
.dwp-bars span { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #94a3b8; }

@media (max-width: 1024px) {
  .dwp-shell { flex-direction: column; }
  .dwp-sidebar { width: 100%; }
  .dwp-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dwp-layout-grid { grid-template-columns: 1fr; }
}


.dwp-card {
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:18px;
  box-shadow: 0 10px 25px rgba(15,23,42,0.06);
}
.dwp-form input,
.dwp-form select,
.dwp-form button {
  width:100%;
  padding:10px;
  margin-top:6px;
}
.dwp-success { border-left:4px solid #16a34a; }
.dwp-error { border-left:4px solid #dc2626; }


.dwp-form-inline p { margin: 0 0 10px; }
.dwp-form-inline input,
.dwp-form-inline select,
.dwp-form-inline textarea,
.dwp-form-inline button {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}
.dwp-form-inline textarea { min-height: 96px; }
.dwp-list { list-style: none; margin: 0; padding: 0; }
.dwp-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.dwp-list li:last-child { border-bottom: none; }