/* ── CMS Custom Styles ─────────────────────────────────── */
:root {
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --primary:   #1a3c6e;
  --primary-light: #2e5496;
  --accent:    #0d6efd;
  --bg:        #f0f2f5;
}

body { background: var(--bg); font-family: 'Segoe UI', sans-serif; }

/* ── TOP NAV ── */
.bg-primary-dark { background: var(--primary) !important; }

/* ── SIDEBAR ── */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,.08);
  overflow-y: auto;
  z-index: 1030;
}
.sidebar .nav-link {
  display: flex;
  align-items: center;
  padding: .6rem 1.2rem;
  color: #444;
  font-size: .88rem;
  border-radius: 0;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.sidebar .nav-link:hover { background: #eef2ff; color: var(--primary); }
.sidebar .nav-link.active {
  background: #e8effe;
  color: var(--primary);
  font-weight: 600;
  border-left: 3px solid var(--primary);
}
.sidebar-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #aaa;
  padding: 1rem 1.2rem .3rem;
  text-transform: uppercase;
}

/* ── MAIN CONTENT ── */
.main-content {
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
}

/* ── CARDS ── */
.card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.card-header { background: #fff; border-bottom: 1px solid #eee; font-weight: 600; border-radius: 12px 12px 0 0 !important; }

/* ── STAT CARDS ── */
.stat-card { border-radius: 14px; color: #fff; padding: 1.4rem; position: relative; overflow: hidden; }
.stat-card .stat-icon {
  font-size: 3.5rem; opacity: .18;
  position: absolute; right: 1rem; top: .5rem;
}
.stat-card .stat-value { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: .85rem; opacity: .85; margin-top: .25rem; }
.sc-blue   { background: linear-gradient(135deg,#1a3c6e,#2e5496); }
.sc-green  { background: linear-gradient(135deg,#157347,#28a745); }
.sc-orange { background: linear-gradient(135deg,#d16200,#fd7e14); }
.sc-purple { background: linear-gradient(135deg,#5a189a,#9d4edd); }
.sc-teal   { background: linear-gradient(135deg,#0f7173,#17a2b8); }

/* ── TABLES ── */
.table th { background: #f8f9ff; font-weight: 600; font-size: .85rem; color: #444; }
.table td { vertical-align: middle; font-size: .88rem; }

/* ── BADGES ── */
.badge { font-size: .75rem; padding: .35em .7em; border-radius: 20px; }

/* ── BUTTONS ── */
.btn-action { padding: .2rem .5rem; font-size: .8rem; }

/* ── PAGE TITLE ── */
.page-title { font-size: 1.4rem; font-weight: 700; color: var(--primary); margin-bottom: 1.5rem; }
.page-title i { margin-right: .4rem; }

/* ── LOGIN PAGE ── */
.login-wrapper {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, #2e5496 60%, #4a90d9 100%);
}
.login-card {
  width: 400px;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  padding: 2.5rem;
  background: #fff;
}
.login-logo { font-size: 2.5rem; color: var(--primary); text-align: center; }
.login-title { text-align:center; font-weight:700; color: var(--primary); font-size:1.4rem; margin-bottom:1.5rem; }

/* ── STATUS BADGES ── */
.status-active     { background:#d1fae5; color:#065f46; }
.status-inactive   { background:#fee2e2; color:#991b1b; }
.status-pending    { background:#fef3c7; color:#92400e; }
.status-in_progress{ background:#dbeafe; color:#1e40af; }
.status-completed  { background:#d1fae5; color:#065f46; }
.status-cancelled  { background:#f3f4f6; color:#374151; }
.status-done       { background:#d1fae5; color:#065f46; }
.priority-high     { background:#fee2e2; color:#991b1b; }
.priority-medium   { background:#fef3c7; color:#92400e; }
.priority-low      { background:#d1fae5; color:#065f46; }

/* ── FORMS ── */
.form-label { font-weight: 600; font-size: .87rem; color: #333; }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.required::after { content: ' *'; color: red; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform .3s; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
}