/* ============================================================
   Vaya Task Manager – Custom Stylesheet
   Mobile-First, Bootstrap 5 Enhanced
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --vtm-primary:      #f97316;   /* orange */
  --vtm-primary-dark: #ea580c;   /* dark orange */
  --vtm-accent:       #fb923c;   /* light orange */
  --vtm-sidebar-w:    240px;
  --vtm-navbar-h:     56px;
  --vtm-success:      #27ae60;
  --vtm-warning:      #f39c12;
  --vtm-danger:       #e74c3c;
  --vtm-info:         #3498db;
  --vtm-bg:           #f0f2f5;
  --vtm-card-radius:  12px;
  --vtm-transition:   0.22s ease;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--vtm-bg);
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
}

/* Touch-friendly tap targets */
a, button { min-height: 36px; }

/* ── Navbar ────────────────────────────────────────────────── */
.vtm-navbar {
  background: linear-gradient(135deg, #f97316, #ea580c);
  height: var(--vtm-navbar-h);
  box-shadow: 0 2px 12px rgba(249,115,22,0.35);
  z-index: 1040;
}

.vtm-logo-icon {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.vtm-sidebar {
  position: fixed;
  top: var(--vtm-navbar-h);
  left: 0;
  width: var(--vtm-sidebar-w);
  height: calc(100vh - var(--vtm-navbar-h));
  background: #fff;
  box-shadow: 2px 0 20px rgba(0,0,0,0.08);
  z-index: 1035;
  transform: translateX(-100%);
  transition: transform var(--vtm-transition);
  overflow-y: auto;
  overflow-x: hidden;
}

.vtm-sidebar.open {
  transform: translateX(0);
}

/* Desktop: always visible */
@media (min-width: 992px) {
  .vtm-sidebar {
    transform: translateX(0);
  }
}

.vtm-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 0;
}

/* Nav */
.vtm-nav { padding: 0 10px; flex: 1; }

.vtm-nav-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #adb5bd;
  padding: 8px 10px 4px;
}

.vtm-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #495057;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--vtm-transition);
  margin-bottom: 2px;
}

.vtm-nav-link:hover {
  background: #fff4ed;
  color: #f97316;
}

.vtm-nav-link.active {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(249,115,22,0.35);
}

.vtm-nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }

.vtm-sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}

/* ── Backdrop (mobile sidebar) ──────────────────────────────── */
.vtm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1030;
  backdrop-filter: blur(2px);
}

.vtm-backdrop.show { display: block; }

/* ── Main Content ───────────────────────────────────────────── */
.vtm-main {
  padding-top: calc(var(--vtm-navbar-h) + 16px);
  min-height: 100vh;
  transition: margin-left var(--vtm-transition);
}

@media (min-width: 992px) {
  .vtm-main {
    margin-left: var(--vtm-sidebar-w);
  }
}

/* ── Cards & Radius ─────────────────────────────────────────── */
.card {
  border-radius: var(--vtm-card-radius) !important;
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.vtm-stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vtm-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

.vtm-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin: 0 auto;
}

.vtm-stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
}

.vtm-stat-label {
  font-size: 0.72rem;
  color: #868e96;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ── Avatars ─────────────────────────────────────────────────── */
.vtm-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vtm-avatar-sm {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vtm-avatar-lg {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vtm-avatar-xl {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  font-weight: 800;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Task Status Badges ──────────────────────────────────────── */
.vtm-status-pending {
  background: #fff3cd !important;
  color: #856404 !important;
  border: 1px solid #ffc107 !important;
}
.vtm-status-in-progress {
  background: #cff4fc !important;
  color: #055160 !important;
  border: 1px solid #0dcaf0 !important;
}
.vtm-status-completed {
  background: #d1e7dd !important;
  color: #0a3622 !important;
  border: 1px solid #198754 !important;
}

/* ── Priority Dot ────────────────────────────────────────────── */
.vtm-priority-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.vtm-priority-dot.vtm-priority-high   { background: var(--vtm-danger); }
.vtm-priority-dot.vtm-priority-medium { background: var(--vtm-warning); }
.vtm-priority-dot.vtm-priority-low    { background: var(--vtm-success); }

/* ── Priority Badge ──────────────────────────────────────────── */
.vtm-priority-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vtm-priority-badge-high   { background: #fde8e8; color: var(--vtm-danger); }
.vtm-priority-badge-medium { background: #fef3cd; color: #9a6700; }
.vtm-priority-badge-low    { background: #d1e7dd; color: #0a3622; }

/* ── Deadline Badges ─────────────────────────────────────────── */
.vtm-deadline-badge {
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.75rem;
}
.vtm-deadline-overdue  { background: #fde8e8; color: var(--vtm-danger); }
.vtm-deadline-soon     { background: #fef3cd; color: #9a6700; }
.vtm-deadline-ok       { background: #d1e7dd; color: #0a3622; }
.vtm-deadline-completed{ background: #e2e3e5; color: #41464b; }

/* ── Deadline top bar on task cards ──────────────────────────── */
.vtm-deadline-bar {
  height: 4px;
  border-radius: var(--vtm-card-radius) var(--vtm-card-radius) 0 0;
}
.vtm-deadline-bar.vtm-deadline-overdue  { background: var(--vtm-danger); }
.vtm-deadline-bar.vtm-deadline-soon     { background: var(--vtm-warning); }
.vtm-deadline-bar.vtm-deadline-ok       { background: var(--vtm-success); }
.vtm-deadline-bar.vtm-deadline-completed{ background: #adb5bd; }

/* ── Deadline card coloring ──────────────────────────────────── */
.vtm-deadline-card.vtm-deadline-overdue  { border: 2px solid #fde8e8 !important; }
.vtm-deadline-card.vtm-deadline-soon     { border: 2px solid #fef3cd !important; }
.vtm-deadline-card.vtm-deadline-ok       { border: 2px solid #d1e7dd !important; }
.vtm-deadline-card.vtm-deadline-completed{ border: 2px solid #e2e3e5 !important; }

/* ── Task row hover ──────────────────────────────────────────── */
.vtm-task-row:last-child { border-bottom: none !important; }
.vtm-task-row:hover { background: #fff4ed; }
.vtm-task-row { color: #2c3e50; }

.vtm-task-card { transition: box-shadow 0.2s; }
.vtm-task-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }

/* ── Priority Radio buttons ──────────────────────────────────── */
.vtm-priority-radio {
  cursor: pointer;
  transition: all 0.15s;
  border: 2px solid #dee2e6 !important;
  background: #fff;
  font-size: 0.85rem;
}
input[type="radio"]:checked + .vtm-priority-radio {
  border-color: currentColor !important;
  background: #f8f9fa;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* ── Performance Ring ────────────────────────────────────────── */
.vtm-perf-ring {
  width: 80px; height: 80px;
  position: relative;
  flex-shrink: 0;
}
.vtm-ring-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.vtm-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #f97316;
}

/* ── Activity Timeline ───────────────────────────────────────── */
.vtm-timeline { padding-left: 20px; }
.vtm-timeline-item {
  position: relative;
  padding-bottom: 16px;
}
.vtm-timeline-item:last-child { padding-bottom: 0; }
.vtm-timeline-item::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: -8px;
  width: 2px;
  background: #e9ecef;
}
.vtm-timeline-item:last-child::before { display: none; }
.vtm-timeline-dot {
  position: absolute;
  left: -20px;
  top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #f97316;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #f97316;
}
.vtm-timeline-content { padding-left: 4px; }

/* ── Login Page ──────────────────────────────────────────────── */
.vtm-login-body {
  min-height: 100vh;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vtm-login-wrapper {
  width: 100%;
  max-width: 420px;
}
.vtm-login-card {
  border-radius: 20px !important;
  overflow: hidden;
}
.vtm-login-header {
  background: linear-gradient(135deg, #f97316, #ea580c);
  padding: 32px 24px;
  text-align: center;
  color: #fff;
}
.vtm-login-icon {
  width: 60px; height: 60px;
  background: rgba(255,255,255,0.2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 12px;
}

/* ── Bootstrap overrides ─────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #f97316, #ea580c);
  border: none;
  box-shadow: 0 3px 10px rgba(249,115,22,0.3);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #ea580c, #c2410c);
  box-shadow: 0 5px 15px rgba(249,115,22,0.4);
}

.form-control:focus, .form-select:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 0.2rem rgba(249,115,22,0.2);
}

.table > :not(caption) > * > * { padding: 12px 8px; }

/* ── Utilities ───────────────────────────────────────────────── */
.min-w-0  { min-width: 0; }
.cursor-pointer { cursor: pointer; }

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 575px) {
  .vtm-stat-number { font-size: 1.4rem; }
  .vtm-stat-icon   { width: 36px; height: 36px; font-size: 1rem; }
  .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
}

@media (max-width: 767px) {
  .vtm-navbar .navbar-brand { font-size: 1rem; }
}

/* ── Scrollbar (Webkit) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #adb5bd; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp 0.25s ease both; }