:root {
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --bg: #f4f5f9;
  --card-border: #e5e7eb;
  --text-muted: #6b7280;
  --sidebar-w: 230px;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
}

/* Sidebar */
.app-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--brand-dark), var(--brand));
  color: #fff;
  padding: 1.25rem 1rem;
  z-index: 100;
}
.app-sidebar .brand {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.app-sidebar .nav-link {
  color: rgba(255,255,255,.85);
  border-radius: .5rem;
  padding: .6rem .75rem;
  margin-bottom: .25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.app-sidebar .nav-link.active { background: rgba(255,255,255,.22); color: #fff; }

.app-content { margin-left: var(--sidebar-w); padding: 1.75rem 2rem 3rem; }

@media (max-width: 767px) {
  .app-sidebar { position: static; width: 100%; }
  .app-content { margin-left: 0; }
}

/* Cards */
.card { border: 1px solid var(--card-border); border-radius: .75rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.stat-card { border-radius: .75rem; padding: 1.25rem 1.5rem; color: #fff; }
.stat-card .stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { opacity: .85; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-card.c1 { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.stat-card.c2 { background: linear-gradient(135deg, #059669, #10b981); }
.stat-card.c3 { background: linear-gradient(135deg, #dc2626, #ef4444); }
.stat-card.c4 { background: linear-gradient(135deg, #d97706, #f59e0b); }

.page-title { font-weight: 700; margin-bottom: .25rem; }
.page-subtitle { color: var(--text-muted); margin-bottom: 1.5rem; }

.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Gmail-style tag input */
.tag-input {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  border: 1px solid #ced4da; border-radius: .375rem; padding: .4rem .5rem; min-height: calc(1.5em + .9rem);
}
.tag-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(79,70,229,.15); }
.tag-chip { background: #eef2ff; color: var(--brand-dark); border-radius: 999px; padding: .2rem .6rem; font-size: .85rem; white-space: nowrap; }
.tag-remove { cursor: pointer; font-weight: 700; margin-left: .25rem; }
.tag-input-text { flex: 1 1 120px; border: none; outline: none; min-width: 120px; padding: .15rem; }

/* Rich text editor */
.ql-editor { min-height: 180px; background: #fff; }
.ql-toolbar.ql-snow { border-radius: .375rem .375rem 0 0; }
.ql-container.ql-snow { border-radius: 0 0 .375rem .375rem; }

.attach-label { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }

footer.app-footer { margin-left: var(--sidebar-w); color: var(--text-muted); padding: 1rem 2rem; font-size: .875rem; }
@media (max-width: 767px) { footer.app-footer { margin-left: 0; } }