/*
 * Diglancers Agency Dashboard Stylesheet
 *
 * This stylesheet defines the look and feel of the Diglancers campaign
 * dashboard. It strives for a clean, modern and mobile‑friendly interface
 * without relying on external frameworks. Layouts adjust gracefully between
 * desktop and mobile. Cards, tables and charts inherit these base styles.
 */

/* Reset margins and box sizing */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background-color: #f5f7fb;
  color: #3a3a3a;
  line-height: 1.4;
}

/* Main container splits sidebar and content */
.dl-dashboard-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar navigation */
.dl-sidebar {
  width: 240px;
  background-color: #1f2a48;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  position: relative;
}

.dl-sidebar h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.dl-sidebar ul {
  list-style: none;
}

.dl-sidebar li {
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.2s, border-left 0.2s;
  border-left: 4px solid transparent;
  font-size: 0.9rem;
}

.dl-sidebar li:hover {
  background-color: #27355b;
}

.dl-sidebar li.active {
  background-color: #27355b;
  border-left-color: #2bd27a;
}

/* Content area */
.dl-content {
  flex: 1;
  padding: 2rem;
  overflow-x: hidden;
}

/* Top bar inside content for title and info icon */
.dl-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.dl-topbar h1 {
  font-size: 1.6rem;
  font-weight: 600;
}

.dl-topbar .dl-info {
  font-size: 1.25rem;
  color: #6c7a96;
  cursor: help;
}

/* Card styling */
.dl-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e1e7f0;
  /* subtle pastel tint for better visual separation */
  background-color: #fbfcfe;
}

/* Colourful cards for Budget & Payments and Contracts */
#dl-budget .dl-card:nth-child(1) { background-color: #f7fafc; }
#dl-budget .dl-card:nth-child(2) { background-color: #fff7f0; }
#dl-budget .dl-card:nth-child(3) { background-color: #f5f9ff; }
#dl-budget .dl-card:nth-child(4) { background-color: #f8f7ff; }

#dl-contracts .dl-card { background-color: #f7fafc; }

/* Highlight card for campaign goal */
.dl-highlight-card {
  border-left: 4px solid #0066ff;
  background-color: #eef6ff;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.25rem;
}

.dl-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.dl-card p {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

/* Statistic cards (snapshot metrics) */
.dl-stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.dl-stat-card {
  flex: 1;
  min-width: 140px;
  background-color: #f9fbff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dl-stat-card span.label {
  font-size: 0.8rem;
  color: #6c7a96;
  margin-bottom: 0.25rem;
}

.dl-stat-card span.value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2a48;
}

.dl-stat-card span.subtext {
  font-size: 0.75rem;
  color: #9ba7c2;
}

/* Progress timeline */
.dl-timeline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1rem;
}

.dl-timeline-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 1.5rem;
}

.dl-timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: -50%;
  width: 100%;
  height: 2px;
  background-color: #e1e7f0;
  z-index: 1;
}

.dl-timeline-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.dl-timeline-label {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.dl-timeline-status {
  font-size: 0.7rem;
  color: #6c7a96;
  margin-top: 0.1rem;
}

/* Table styling */
.dl-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.dl-table th,
.dl-table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  font-size: 0.85rem;
}

.dl-table th {
  background-color: #f0f3f9;
  color: #1f2a48;
  font-weight: 600;
  border-bottom: 2px solid #e1e7f0;
}

.dl-table tr:nth-child(odd) {
  background-color: #fafbfc;
}

.dl-table tr:hover {
  background-color: #f0f4ff;
}

.dl-table .status {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #fff;
  white-space: nowrap;
}

.status-active { background-color: #2bd27a; }
.status-pending { background-color: #0066ff; }
.status-banned { background-color: #ff4d4d; }
.status-inactive { background-color: #7d88a8; }
.status-suspended { background-color: #f0ad4e; }
.status-approving { background-color: #17a2b8; }

/* Additional status styles for content and creator states */
.status-posted,
.status-live,
.status-approved {
  background-color: #2bd27a;
}
.status-editrequested,
.status-edit-requested,
.status-requested {
  background-color: #f0ad4e;
}
.status-submitted {
  background-color: #17a2b8;
}
.status-scheduled {
  background-color: #0066ff;
}

/* Additional status badges for v1.2 */
.status-selected {
  background-color: #2bd27a;
}
.status-notsent, .status-notsent {
  background-color: #7d88a8;
}
.status-sent {
  background-color: #0066ff;
}
.status-signed {
  background-color: #2bd27a;
}
.status-pendingcontract {
  background-color: #f0ad4e;
}
.status-declined {
  background-color: #ff4d4d;
}
.status-locked {
  background-color: #7d88a8;
}

/* Buttons */
.dl-button {
  display: inline-block;
  background-color: #2bd27a;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background-color 0.2s;
  cursor: pointer;
}

.dl-button:hover {
  background-color: #24b56a;
}

.dl-button.secondary {
  background-color: #1f2a48;
}

.dl-button.secondary:hover {
  background-color: #16203a;
}

/* Modal / Drawer */
.dl-modal {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  max-width: 90%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 2000;
  padding: 1rem;
}

.dl-modal.open {
  right: 0;
}

.dl-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.dl-modal-header h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

.dl-modal-close {
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}

/* Update feed */
.dl-updates {
  list-style: none;
  margin-top: 1rem;
}

.dl-update-item {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.dl-update-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2bd27a;
}

.dl-update-item .timestamp {
  font-size: 0.75rem;
  color: #6c7a96;
  margin-bottom: 0.25rem;
}

.dl-update-item .author {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1f2a48;
}

.dl-update-item .message {
  font-size: 0.85rem;
  color: #3a3a3a;
}

/* Budget & Payments table */
.dl-payments-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.dl-payments-table th,
.dl-payments-table td {
  padding: 0.6rem 0.5rem;
  text-align: left;
  font-size: 0.85rem;
}

.dl-payments-table th {
  background-color: #f0f3f9;
  color: #1f2a48;
  font-weight: 600;
  border-bottom: 2px solid #e1e7f0;
}

.dl-payments-table tr:nth-child(odd) {
  background-color: #fafbfc;
}

.dl-payments-table .status-paid {
  color: #2bd27a;
  font-weight: 600;
}
.dl-payments-table .status-pending {
  color: #f0ad4e;
  font-weight: 600;
}
.dl-payments-table .status-scheduled {
  color: #007bff;
  font-weight: 600;
}

/* Responsive design: hide sidebar and show bottom nav for small screens */
@media (max-width: 900px) {
  .dl-sidebar {
    display: none;
  }
  .dl-content {
    padding: 1rem;
    padding-bottom: 4rem;
  }
  .dl-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background-color: #1f2a48;
    border-top: 1px solid #31406b;
    z-index: 1000;
  }
  .dl-bottom-nav div {
    flex: 1;
    color: #ffffff;
    text-align: center;
    font-size: 0.75rem;
    padding-top: 6px;
    cursor: pointer;
  }
  .dl-bottom-nav div.active {
    background-color: #27355b;
  }
}

/* More menu overlay for mobile */
.dl-more-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 56px;
  background-color: rgba(0,0,0,0.4);
  z-index: 999;
}

/* Hide mobile bottom navigation and more overlay across all devices.
   The translator widget at the bottom of the site overlapped with the
   dashboard’s navigation on mobile, so both the bottom nav and overlay
   are disabled entirely. Users can still navigate via the sidebar or
   by scrolling on smaller screens. */
.dl-bottom-nav,
.dl-more-overlay {
  display: none !important;
}

.dl-more-menu {
  background-color: #1f2a48;
  color: #ffffff;
  position: absolute;
  bottom: 56px;
  left: 0;
  right: 0;
  padding: 1rem;
}

.dl-more-menu li {
  padding: 0.8rem 0;
  border-bottom: 1px solid #31406b;
  cursor: pointer;
}

.dl-more-menu li:last-child {
  border-bottom: none;
}

/* Feature comparison table */
.dl-feature-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.dl-feature-table th,
.dl-feature-table td {
  border: 1px solid #e1e7f0;
  padding: 0.75rem;
  font-size: 0.85rem;
}
.dl-feature-table th {
  background-color: #f0f3f9;
  font-weight: 600;
  color: #1f2a48;
}
.dl-feature-table tr:nth-child(odd) {
  background-color: #fafbfc;
}

/* Sales hero */
.dl-sales-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}
.dl-sales-hero img {
  max-width: 100%;
  border-radius: 8px;
  flex: 1;
  min-width: 280px;
}
.dl-sales-hero .copy {
  flex: 1;
  min-width: 280px;
}

.dl-sales-hero .copy h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1f2a48;
}
.dl-sales-hero .copy p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #3a3a3a;
}

/* Admin SOP list */
.dl-sop {
  margin-top: 1rem;
}
.dl-sop li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* Chart container ensures responsiveness */
.chart-container {
  position: relative;
  width: 100%;
  height: 300px;
  margin-bottom: 1rem;
}

/* Mobile header and overlay hidden by default */
.dl-mobile-header {
  display: none;
}
.dl-overlay {
  display: none;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
  /* Sidebar becomes a slide-out panel on mobile */
  .dl-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 70%;
    max-width: 260px;
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 2000;
  }
  .dl-sidebar.open {
    transform: translateX(0);
  }
  /* Overlay to darken background when sidebar is open */
  .dl-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
  }
  .dl-overlay.show {
    display: block;
  }
  /* Mobile header with menu button */
  .dl-mobile-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #1f2a48;
    color: #ffffff;
    padding: 0.6rem 1rem;
    z-index: 3000;
  }
  .dl-mobile-menu-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.6rem;
    margin-right: 1rem;
    cursor: pointer;
  }
  .dl-mobile-title {
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
  }
  .dl-dashboard-container {
    flex-direction: column;
  }
  .dl-content {
    padding: 1rem;
  }
  /* Timeline displays vertically on mobile */
  .dl-timeline {
    flex-direction: column;
    align-items: flex-start;
  }
  .dl-timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .dl-timeline-item:not(:last-child)::after {
    display: none;
  }
  .dl-timeline-icon {
    margin-right: 0.5rem;
  }
  .dl-timeline-label, .dl-timeline-status {
    margin-left: 0.3rem;
  }
}

/* ===================================================
   🔥 MOBILE MENU FIX — SAFE OVERRIDE (DO NOT REMOVE)
   This block ONLY overrides broken mobile behavior
   =================================================== */

/* 1️⃣ NEVER hide sidebar with display:none on mobile */
@media (max-width: 900px) {
  .dl-sidebar {
    display: block !important;
  }
}

/* 2️⃣ Proper mobile slide-out sidebar */
@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  /* Mobile header always visible */
  .dl-mobile-header {
    display: flex !important;
    align-items: center;
    background: #1f2a48;
    color: #ffffff;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 4000;
  }

  .dl-mobile-menu-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #ffffff;
    cursor: pointer;
    margin-right: 1rem;
  }

  /* Sidebar becomes slide-out */
  .dl-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 280px;
    height: 100vh;
    background-color: #1f2a48;
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    z-index: 3000;
    overflow-y: auto;
    padding-top: 4rem;
  }

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

  /* Sidebar items */
  .dl-sidebar li {
    font-size: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  /* Overlay behind menu */
  .dl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2500;
    display: none;
  }

  .dl-overlay.show {
    display: block;
  }

  /* Content spacing */
  .dl-content {
    padding: 1rem;
  }

  /* Timeline stacks vertically */
  .dl-timeline {
    flex-direction: column;
    align-items: flex-start;
  }

  .dl-timeline-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
  }

  .dl-timeline-item::after {
    display: none !important;
  }

  .dl-timeline-status {
    margin-left: auto;
    font-size: 0.75rem;
  }

  /* Tables scroll safely */
  .dl-table,
  .dl-payments-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}