/* =========================================
   Vendor Sales Dashboard Styles (Professional)
   ========================================= */

/* Base */
:root {
  --vsd-accent: #0b74de;
  --vsd-bg: #f6f8fb;
  --vsd-card: #ffffff;
  --vsd-text: #213547;
  --vsd-muted: #6b7a86;
  --vsd-radius: 12px;
}

body .vsd-welcome {
  margin: 18px 0;
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--vsd-accent), #055fa3);
  color: #fff;
  border-radius: var(--vsd-radius);
  box-shadow: 0 8px 30px rgba(11,116,222,0.12);
  font-weight: 600;
  font-family: Nunito !important;
}

/* Filter bar */
.vsd-filter-bar {
  margin: 18px 0;
  padding: 14px;
  font-family: Nunito !important;
  background: transparent;
  color: #222;
}
.vsd-filters-form .vsd-filter-row {
  display: flex;
  flex-direction:row !important;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center !important;
  font-family: Nunito !important;
  color: #222;
}
.vsd-filter-item {
  display:flex;
  flex-direction:column;
  min-width: 160px;
  font-family: Nunito !important;
  color: #222;
}
.vsd-filter-item label {
  font-size: 12px;
  color: #222;
  margin-bottom: 6px;
  font-family: Nunito !important;
}
.vsd-filter-item input[type="date"],
.vsd-filter-item select,
.vsd-filter-item input[type="text"] {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e6eef6;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
  font-size: 14px;
  color: #222;
  font-family: Nunito !important;
}
.vsd-filter-item.vsd-filter-search {
  flex: 0 1 225px;
  min-width: 200px;
  font-family: Nunito !important;
}

.vsd-filter-actions {
  display:flex-inline !important;
  flex-direction: row;
  gap:8px;
  min-width: 60px;
  font-family: Nunito !important;
}
.vsd-btn {
  padding: 9px 12px;
  border-radius: 8px;
  border: none !important;
  background: #6c757d !important;
  color: #fff !important;
  cursor: pointer;
  font-weight: 600;
  transition: all .15s ease;
  box-shadow: 0 4px 12px rgba(19,38,63,0.04);
}
.vsd-btn:hover { transform: translateY(-2px); }

.vsd-btn-primary {
  background: #0073aa !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(11,116,222,0.12);
}

/* Dashboard Layout */
.vsd-overview-container,
.vsd-report-container {
  font-family: Nunito !important;
  color: #222;
}

.j-welcome-cards {
    display: flex;
    color: #222;
    gap: 16px;
    align-items:center;
    text-align:center;
    justify-content: center;
}



.j-card {
  background: var(--vsd-card);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24,39,62,0.05);
  transition: transform .12s ease, box-shadow .12s ease;
  text-align:center;
  width: 25%;
}
.j-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(24,39,62,0.08); }









/* Cards grid */
.vsd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.vsd-card {
  background: var(--vsd-card);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24,39,62,0.05);
  transition: transform .12s ease, box-shadow .12s ease;
  text-align:center;
}
.vsd-card:hover{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(24,39,62,0.08); }
.vsd-card h3 { margin:0 0 8px; color: var(--vsd-muted); font-size:13px; text-transform:uppercase; letter-spacing:0.6px; }
.vsd-big { font-size: 26px; font-weight: 700; color: var(--vsd-accent); margin-bottom:6px; }
.vsd-sub { font-size:13px; color: var(--vsd-muted); }

/* Chart card */
.vsd-chart {
  background: var(--vsd-card);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24,39,62,0.05);
  margin-bottom: 20px;
}

/* Ratings grid */
.vsd-ratings .vsd-ratings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.vsd-rating-item {
  background:#fbfdff;
  border-radius:10px;
  padding:12px;
  text-align:center;
  box-shadow: 0 6px 18px rgba(2,20,36,0.04);
}
.vsd-rating-item img { width:64px; height:64px; object-fit:cover; border-radius:8px; margin-bottom:8px; }

/* Status list */
.vsd-statuses ul { display:flex; gap:12px; flex-wrap:wrap; margin:0; padding:0; }
.vsd-statuses li {
  background: #fff;
  border-radius:10px;
  padding:12px 16px;
  box-shadow: 0 6px 18px rgba(2,20,36,0.04);
  min-width: 140px;
  font-weight:700;
  color: var(--vsd-text);
}

/* DataTables styling */
#vsd-report-table_wrapper { margin-top: 16px; }
#vsd-report-table {
  width:100% !important;
  border-collapse: collapse;
  background: var(--vsd-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(24,39,62,0.05);
  font-family: Nunito !important;
}
#vsd-report-table thead { background: linear-gradient(90deg,var(--vsd-accent),#1173c9); color: #fff; }
#vsd-report-table thead th { padding: 12px; font-weight:700; font-size:13px; text-align:left; }
#vsd-report-table tbody td { padding: 12px; border-bottom: 1px solid #f1f5f9; font-size:14px; color:var(--vsd-text); }
#vsd-report-table tbody tr:hover { background: #f7fbff; }

.dataTables_wrapper .dataTables_filter input { padding:8px 10px; border-radius:8px; border:1px solid #e6eef6; margin-bottom: 25px; background-color:white !important; }

/* Responsive */
@media (max-width: 900px) {
  .vsd-filter-item { min-width: 140px; }
  .vsd-cards { grid-template-columns: 1fr; }
  .vsd-ratings .vsd-ratings-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}



.vsd-stats {
    display: flex;
    gap: 30px;
    margin: 20px 0;
    padding: 15px;
    background: #f9fafc;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    font-family: Nunito !important;
}

.vsd-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
    font-family: Nunito !important;
}

.vsd-table th {
    background: #0073aa;
    color: #fff;
    padding: 10px;
    text-align: left;
    font-family: Nunito !important;
}

.vsd-table td {
    border: 1px solid #ddd;
    padding: 10px;
    vertical-align: middle;
    font-family: Nunito !important;
}

.vsd-table tr:nth-child(even) {
    background: #f4f8fb;
}

.vsd-table img {
    border-radius: 4px;
}

.vsd-inline-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vsd-inline-form select,
.vsd-inline-form button {
    font-size: 13px;
    padding: 4px 6px;
    font-family: Nunito !important;
}