/* VCG Motor Insurance - Custom Styles
   Brand: #1a3a6c (dark blue) | #f0a500 (amber) | #f8f9fa (light bg)
   ================================================================= */

:root {
  --vcg-primary: #1a3a6c;
  --vcg-primary-light: #2563eb;
  --vcg-amber: #f0a500;
  --vcg-sidebar-width: 250px;
  --vcg-sidebar-collapsed: 60px;
}

/* ── Layout: Sidebar + Content ──────────────────────────── */
body {
  background-color: #f0f2f5;
  font-size: 0.875rem;
}

#wrapper {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--vcg-sidebar-width);
  min-width: var(--vcg-sidebar-width);
  background-color: var(--vcg-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease, min-width 0.25s ease;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
}

.sidebar.collapsed {
  width: var(--vcg-sidebar-collapsed);
  min-width: var(--vcg-sidebar-collapsed);
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .collapse-text,
.sidebar.collapsed .sidebar-link span {
  display: none;
}

/* Sidebar Brand */
.sidebar-brand {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-brand-link {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.sidebar-brand-link:hover { color: var(--vcg-amber); }

/* Sidebar User strip */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.05);
}

.sidebar-user-avatar { color: rgba(255,255,255,0.7); }
.sidebar-user-info { color: #fff; font-size: 0.8rem; }
.sidebar-user-info .text-muted { color: rgba(255,255,255,0.5) !important; font-size: 0.72rem; }

.sidebar-divider { border-color: rgba(255,255,255,0.1); margin: 0; }

/* Sidebar navigation links */
.sidebar-nav { padding: 0.5rem 0; margin: 0; }

.sidebar-section-label {
  padding: 0.6rem 1rem 0.25rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}

.sidebar-item { margin: 0.1rem 0.5rem; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  font-size: 0.85rem;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.sidebar-link.active {
  background: var(--vcg-amber);
  color: var(--vcg-primary) !important;
  font-weight: 600;
}

.sidebar-link i { width: 18px; text-align: center; flex-shrink: 0; }

/* Sidebar footer (collapse button) */
.sidebar-footer {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── Page Content Wrapper ────────────────────────────────── */
#page-content-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#page-content-wrapper.with-sidebar {
  /* Nothing extra needed; flexbox handles it */
}

/* ── Top Navigation Bar ─────────────────────────────────── */
.topnav {
  background: #ffffff;
  border-bottom: 1px solid #e0e4ec;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.topnav .breadcrumb { font-size: 0.82rem; }
.topnav .breadcrumb-item.active { color: #555; }

/* ── Footer ─────────────────────────────────────────────── */
.footer-bar {
  background: #ffffff;
  border-top: 1px solid #e0e4ec;
  padding: 0.75rem 1.5rem;
  font-size: 0.78rem;
  color: #888;
  margin-top: auto;
}

/* ── Page Title ─────────────────────────────────────────── */
.page-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a2a40;
  margin: 0;
}

/* ── Dashboard Stat Cards ───────────────────────────────── */
.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-icon { font-size: 1.75rem; opacity: 0.85; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: 0.78rem; opacity: 0.9; margin-top: 2px; }

.stat-card-blue { background: linear-gradient(135deg, #1a3a6c 0%, #2563eb 100%); }
.stat-card-green { background: linear-gradient(135deg, #065f46 0%, #10b981 100%); }
.stat-card-amber { background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%); }
.stat-card-red { background: linear-gradient(135deg, #7f1d1d 0%, #ef4444 100%); }
.stat-card-indigo { background: linear-gradient(135deg, #3730a3 0%, #818cf8 100%); }
.stat-card-slate { background: linear-gradient(135deg, #334155 0%, #64748b 100%); }

/* ── KPI Cards (reports page) ───────────────────────────── */
.kpi-card {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  border-top: 3px solid var(--vcg-primary);
}

.kpi-value { font-size: 1.5rem; font-weight: 700; }
.kpi-label { font-size: 0.75rem; color: #888; margin-top: 2px; }

/* ── Cards ──────────────────────────────────────────────── */
.card { border: none; }
.card-header { background: #f8fafd; border-bottom: 1px solid #e5e9f0; font-size: 0.875rem; }
.section-header { background: linear-gradient(90deg, #eef3ff 0%, #f8fafd 100%); }

/* ── Policy Status Badges ───────────────────────────────── */
.status-active { background-color: #10b981 !important; color: #fff; }
.status-expired { background-color: #6b7280 !important; color: #fff; }
.status-cancelled { background-color: #ef4444 !important; color: #fff; }
.badge.status-active, .badge.status-expired, .badge.status-cancelled { font-size: 0.75rem; }

/* ── Role Badges ─────────────────────────────────────────── */
.role-badge-admin { background-color: var(--vcg-primary) !important; color: #fff; }
.role-badge-agent { background-color: #2563eb !important; color: #fff; }
.role-badge-viewer { background-color: #6b7280 !important; color: #fff; }

/* ── Policy Detail: detail rows ─────────────────────────── */
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f0f2f5;
  font-size: 0.85rem;
  gap: 0.5rem;
}

.detail-row:last-child { border-bottom: none; }
.detail-label { color: #6b7280; white-space: nowrap; min-width: 110px; }

/* ── Login Page ──────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a3a6c 0%, #2563eb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-container { width: 100%; max-width: 420px; padding: 1rem; }
.login-card { border-radius: 12px; border: none; }
.login-logo { margin-bottom: 0.5rem; }

/* ── Tables ──────────────────────────────────────────────── */
.table th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.table td { vertical-align: middle; }

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input { border: 1px solid #ced4da; border-radius: 4px; padding: 0.25rem 0.5rem; }
.dataTables_wrapper .dataTables_length select { border: 1px solid #ced4da; border-radius: 4px; }

/* ── Forms ────────────────────────────────────────────────── */
.form-label { font-weight: 500; font-size: 0.82rem; color: #374151; margin-bottom: 0.25rem; }
.form-control, .form-select { font-size: 0.875rem; }
.form-control:focus, .form-select:focus { border-color: var(--vcg-primary-light); box-shadow: 0 0 0 0.2rem rgba(37,99,235,0.15); }

/* ── Responsive: mobile sidebar ─────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -260px;
    height: 100vh;
    transition: left 0.25s ease;
    z-index: 1050;
  }

  .sidebar.mobile-open {
    left: 0;
  }

  #page-content-wrapper {
    width: 100%;
  }
}