:root {
  --brand: #8a5a2f;
  --brand-dark: #6b4423;
  --brand-light: #f3e9dc;
  --bg: #faf8f5;
}
body {
  font-family: 'Tajawal', sans-serif;
  background: var(--bg);
}
.app-navbar {
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
  padding: .7rem 0;
}
.app-navbar .navbar-brand, .app-navbar .nav-link { color: #fff !important; opacity: .95; }
.app-navbar .nav-link.active { font-weight: 700; opacity: 1; border-bottom: 2px solid #fff; }

.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { border: 1px solid var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

.card { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.card-header { background: #fff; border-bottom: 1px solid #eee; border-radius: 14px 14px 0 0 !important; }

.stat-card { background: #fff; border-radius: 14px; padding: 1.2rem; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.stat-num { font-size: 2rem; font-weight: 900; }
.stat-label { color: #888; font-size: .85rem; }

.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-inline-end:4px; }

.badge-pill { display:inline-block; color:#fff; font-size:.72rem; padding:.15rem .55rem; border-radius:20px; }
.badge-pill-outline { display:inline-flex; align-items:center; font-size:.72rem; padding:.15rem .55rem; border-radius:20px; border:1px solid #ddd; color:#666; }
.status-badge { color:#fff; font-size:.7rem; padding:.25rem .6rem; border-radius:20px; white-space:nowrap; height: fit-content; }

.task-row { cursor: default; }
.task-open-edit { cursor: pointer; }
.subtasks-wrap { background: #fbfaf8; border-top: 1px dashed #eee; }

.login-body { background: linear-gradient(135deg, var(--brand-light), var(--bg)); }
.login-card { border-radius: 18px; width: 100%; max-width: 420px; }

.project-card { transition: transform .15s ease; }
.project-card:hover { transform: translateY(-3px); }

.kanban-board { display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem; }
.kanban-col { flex: 0 0 280px; background:#f1ede7; border-radius: 12px; padding: .6rem; }
.kanban-col-header { display:flex; justify-content:space-between; font-weight:700; padding:.4rem .3rem; border-bottom:3px solid; margin-bottom:.5rem; }
.kanban-drop { min-height: 100px; }
.kanban-card { background:#fff; border-radius:10px; padding:.6rem .7rem; margin-bottom:.6rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); cursor: grab; }
.kanban-card.dragging { opacity: .4; }
.kanban-drop.drag-over { background: #e9e2d8; border-radius: 10px; }

.calendar-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.calendar-dow { text-align:center; font-weight:700; color:#888; padding:.4rem 0; font-size:.85rem; }
.calendar-cell { background:#fff; border-radius:8px; min-height:90px; padding:.35rem; font-size:.75rem; }
.calendar-cell.empty { background: transparent; }
.calendar-cell.today { border: 2px solid var(--brand); }
.calendar-daynum { font-weight:700; margin-bottom:3px; color:#666; }
.calendar-task { padding:2px 5px; border-radius:4px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }

@media (max-width: 767px) {
  .calendar-cell { min-height: 60px; font-size: .68rem; }
}