/*
 * Reg-E Custom Styles
 * Modern & clean overrides for SmartAdmin theme
 * Changed by Claude
 */

/* =====================
   TYPOGRAPHY & BASE
   ===================== */

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #f4f6f9;
}

h1, h2, h3, h4, h5 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* =====================
   HEADER
   ===================== */

#header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

#logo-group {
  background: transparent;
  border-right: 1px solid #e2e8f0;
}

#logo img {
  max-height: 38px;
  filter: none;
}

/* Header buttons: flip from white-on-dark to dark-on-light */
#header .btn-header > span > a,
#header .btn-header > span > a i {
  color: #1a2a4a !important;
}

#header .btn-header > span > a:hover,
#header .btn-header > span > a:hover i {
  color: #4a90d9 !important;
}

#header .btn-header.transparent > span > a {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Search field in header */
#header .header-search input,
#search-fld {
  background: #f4f6f9 !important;
  color: #1a2a4a !important;
  border-color: #d1d9e6 !important;
}

#header .header-search button i,
#header .header-search .fa {
  color: #6b7a8d !important;
}

/* Show-selector dropdowns */
#header select {
  color: #1a2a4a;
  background: #f4f6f9;
  border-color: #d1d9e6;
}

/* Nav items (logout, fullscreen, collapse icons) */
#header .pull-right li > a,
#header .pull-right li > a i,
#header [class*="btn-header"] a i {
  color: #1a2a4a !important;
}

/* =====================
   LEFT PANEL / NAVIGATION
   ===================== */

#left-panel {
  background: #1e2d42;
  border-right: none;
  box-shadow: 2px 0 12px rgba(0,0,0,0.12);
}

#left-panel nav ul li a {
  color: #b8c7d8 !important;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
}

#left-panel nav ul li a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  border-left-color: #4a90d9;
}

#left-panel nav ul li.active > a,
#left-panel nav ul li.open > a {
  background: rgba(74,144,217,0.15) !important;
  color: #ffffff !important;
  border-left-color: #4a90d9 !important;
}

#left-panel nav ul li a i {
  color: #6b8cae;
  transition: color 0.2s;
}

#left-panel nav ul li.active > a i,
#left-panel nav ul li a:hover i {
  color: #4a90d9;
}

/* Sub-menu */
#left-panel nav ul ul {
  background: rgba(0,0,0,0.15);
}

#left-panel nav ul ul li a {
  font-size: 12px;
  padding-left: 44px !important;
  color: #8ba5c2 !important;
}

#left-panel nav ul ul li a:hover {
  color: #ffffff !important;
}

/* =====================
   WIDGETS / CARDS
   ===================== */

.jarviswidget {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  border: 1px solid #e8ecf2 !important;
  margin-bottom: 20px;
}

.jarviswidget > div {
  border: none !important;
  border-radius: 0 0 8px 8px;
}

.jarviswidget > header {
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #edf0f6 !important;
  border-top: 3px solid #6366f1 !important;
  border-radius: 8px 8px 0 0;
  padding: 12px 18px;
  min-height: 50px;
}

.jarviswidget > header h2 {
  color: #1e293b !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 28px;
}

.jarviswidget > header .widget-icon {
  color: #6366f1 !important;
  font-size: 16px;
}

.widget-body {
  padding: 20px;
  background: #ffffff;
}

/* Header buttons inside widget headers */
.jarviswidget > header .btn-default {
  background: #f1f3f9;
  border: 1px solid #dde2ee;
  color: #4b5563;
  font-size: 12px;
}

.jarviswidget > header .btn-default:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: #ffffff;
}

/* =====================
   BUTTONS
   ===================== */

.btn {
  border-radius: 5px;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: linear-gradient(135deg, #2d6ad4 0%, #1a50a8 100%);
  border: none;
  box-shadow: 0 2px 6px rgba(45,106,212,0.35);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #3a7ae6 0%, #2360c0 100%);
  box-shadow: 0 4px 12px rgba(45,106,212,0.45);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
  border: none;
  box-shadow: 0 2px 6px rgba(39,174,96,0.35);
}

.btn-success:hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-1px);
}

.btn-default {
  background: #ffffff;
  border: 1px solid #d0d7e3;
  color: #374151;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.btn-default:hover {
  background: #f8faff;
  border-color: #4a90d9;
  color: #2d6ad4;
}

.btn-danger {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  border: none;
}

.btn i {
  margin-right: 5px;
}

/* =====================
   TABLES
   ===================== */

.table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.table th {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e8f0fe;
  background: #1a2a4a !important;
  border: none !important;
  padding: 12px 14px;
  white-space: nowrap;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f8faff;
}

.table-hover > tbody > tr:hover {
  background-color: #eef4ff;
  cursor: pointer;
}

.table > tbody > tr > td {
  border-top: 1px solid #edf2f7;
  padding: 10px 14px;
  vertical-align: middle;
  color: #374151;
  font-size: 13px;
}

.table-bordered {
  border: 1px solid #e2e8f0;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid #e2e8f0 !important;
}

.table-responsive {
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* =====================
   ALERTS
   ===================== */

.alert {
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px;
}

.alert-info {
  background: #ebf4ff;
  color: #1a50a8;
  border-left: 4px solid #4a90d9;
}

.alert-warning {
  background: #fffbeb;
  color: #92400e;
  border-left: 4px solid #f59e0b;
}

.alert-success {
  background: #f0fff4;
  color: #1e5c35;
  border-left: 4px solid #27ae60;
}

.alert-danger {
  background: #fff5f5;
  color: #742a2a;
  border-left: 4px solid #e53e3e;
}

/* =====================
   ACCORDION / PANELS
   ===================== */

.smart-accordion-default .panel {
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.smart-accordion-default .panel-heading {
  background: #f8faff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0;
}

.smart-accordion-default .panel-heading h4 a {
  display: block;
  padding: 12px 16px;
  color: #1a2a4a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.smart-accordion-default .panel-heading h4 a:hover {
  background: #eef4ff;
  color: #2d6ad4;
}

.smart-accordion-default .panel-body {
  padding: 16px;
}

/* =====================
   FORMS
   ===================== */

.form-control {
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 13px;
  height: 36px;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: #374151;
}

.form-control:focus {
  border-color: #4a90d9;
  box-shadow: 0 0 0 3px rgba(74,144,217,0.15);
  outline: none;
}

/* =====================
   REPORTS — SELECT REPORT PAGE
   ===================== */

.report-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.report-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.report-card:hover {
  border-color: #4a90d9;
  box-shadow: 0 4px 14px rgba(74,144,217,0.2);
  transform: translateY(-2px);
}

.report-card-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #ebf4ff, #dbeafe);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2d6ad4;
  font-size: 15px;
}

.report-card-body {
  flex: 1;
  min-width: 0;
}

.report-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a2a4a;
  margin: 0 0 3px;
  line-height: 1.3;
}

.report-card-desc {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}
/*  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
.report-card-delete {
  color: #cbd5e0;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.report-card-delete:hover {
  color: #e53e3e;
  background: #fff5f5;
}

.reports-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #edf2f7;
}

.reports-section-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1a2a4a;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reports-section-header .section-count {
  background: #ebf4ff;
  color: #2d6ad4;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

/* =====================
   REPORTS — DISPLAY REPORT PAGE
   ===================== */

.reports-container {
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 6px;
}

.reports-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.reports-container::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.reports-container::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.reports-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.report-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f8faff;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}

.report-action-bar .report-title-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #1a2a4a;
}

.btn-report-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-report-print {
  background: #f0f4ff;
  color: #2d6ad4;
  border: 1px solid #c7d7f5;
}

.btn-report-print:hover {
  background: #2d6ad4;
  color: #ffffff;
}

.btn-report-download {
  background: linear-gradient(135deg, #27ae60, #1e8449);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(39,174,96,0.3);
}

.btn-report-download:hover {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  box-shadow: 0 4px 10px rgba(39,174,96,0.4);
  transform: translateY(-1px);
}

/* =====================
   REPORTS — BUILD REPORT PAGE
   ===================== */

.build-report-section {
  background: #f8faff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.build-report-section-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.build-report-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.save-download-bar {
  background: linear-gradient(135deg, #f0f4ff, #ebf4ff);
  border: 1px solid #c7d7f5;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.save-download-bar .form-control {
  max-width: 240px;
}

/* =====================
   MISC / UTILITIES
   ===================== */

/* Page content area */
#content {
  padding: 18px !important;
}

/* Login info panel */
.login-info {
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.login-info a {
  color: #a8c0da !important;
}

/* Sparklines stats bar */
#sparks {
  padding: 10px 0;
}

.sparks-info h5 {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 2px;
}

.sparks-info h5 span {
  font-size: 20px;
  font-weight: 700;
  display: block;
  margin-top: 2px;
}

/* List group base refinements */
.list-group-item {
  border-color: #e2e8f0;
  font-size: 13px;
  transition: all 0.15s;
}

.list-group-item:first-child {
  border-radius: 6px 6px 0 0;
}

.list-group-item:last-child {
  border-radius: 0 0 6px 6px;
}

.list-group-item-action:hover {
  background: #ebf4ff;
  color: #2d6ad4;
  border-color: #c7d7f5;
}

/* Ribbon */
#ribbon {
  background: linear-gradient(135deg, #1a2a4a, #243b63);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#ribbon .breadcrumb li,
#ribbon .breadcrumb li a {
  color: #9ab0cc;
}

#ribbon .breadcrumb li.active {
  color: #ffffff;
}

/* Minify menu button */
#hide-menu i {
  color: #9ab0cc !important;
}

/* Row spacing */
.row + .row {
  margin-top: 0;
}

/* Badge */
.badge {
  border-radius: 10px;
  font-weight: 600;
  font-size: 10px;
}

/* Modal */
.modal-content {
  border-radius: 10px;
  border: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header {
  background: linear-gradient(135deg, #1a2a4a, #243b63);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  padding: 16px 20px;
}

.modal-header h4,
.modal-header .modal-title {
  color: #ffffff;
  font-weight: 600;
}

.modal-header .close {
  color: #ffffff;
  opacity: 0.7;
  text-shadow: none;
}

.modal-footer {
  border-top: 1px solid #edf2f7;
  background: #f8faff;
  border-radius: 0 0 10px 10px;
}

/* Smart form */
.smart-form header {
  background: linear-gradient(135deg, #1a2a4a, #243b63);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px 6px 0 0;
}

/* Scrollbar global */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* =====================
   DASHBOARD
   ===================== */

.dashboard-content {
  padding: 0 !important;
}

.dashboard-section {
  margin-bottom: 0;
}

.dashboard-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #94a3b8;
  padding: 14px 4px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-section-title i {
  color: #6366f1;
}

.dashboard-section-link {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #6366f1;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

.dashboard-section-link:hover {
  color: #4f46e5;
}

.dashboard-charts-row {
  margin-bottom: 0;
}

/* KPI stat cards (improve sparks bar) */
#sparks {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

#sparks .sparks-info {
  flex: 1;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 6px 6px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}

#sparks .sparks-info:hover {
  box-shadow: 0 4px 16px rgba(99,102,241,0.12);
  transform: translateY(-1px);
}

#sparks .sparks-info h5 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  margin: 0 0 6px;
}

#sparks .sparks-info h5 span {
  display: block;
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.02em;
  color: #1e293b;
}

/* Color-code KPI stat values — matches chart palette */
#sparks .sparks-info:nth-child(1) .stat-value { color: #2563eb; }
#sparks .sparks-info:nth-child(2) .stat-value { color: #f59e0b; }
#sparks .sparks-info:nth-child(3) .stat-value { color: #6366f1; }
#sparks .sparks-info:nth-child(4) .stat-value { color: #0ea5e9; }

.stat-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.02em;
}

.stat-value--date {
  font-size: 18px;
  color: #64748b !important;
}

/* Quick link cards */
.dashboard-quicklinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.quicklink-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.quicklink-card:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 14px rgba(99,102,241,0.15);
  transform: translateY(-2px);
  text-decoration: none;
}

.quicklink-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}

.quicklink-body {
  flex: 1;
  min-width: 0;
}

.quicklink-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a2a4a;
  margin-bottom: 2px;
}

.quicklink-desc {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quicklink-arrow {
  color: #d1d5db;
  font-size: 11px;
  flex-shrink: 0;
}

.quicklink-card:hover .quicklink-arrow {
  color: #6366f1;
}

/* Chart widget body padding */
.dashboard-charts-row .widget-body {
  min-height: 220px;
}

/* Show start date strip */
.show-start-date-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f5f3ff;
  color: #3730a3;
  border: 1px solid #e0e7ff;
  border-left: 4px solid #6366f1;
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
}

.show-start-date-card i {
  color: #6366f1;
  font-size: 16px;
}

/* Show stat microcharts (easy pie charts) */
.show-stat-microcharts {
  padding: 12px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.show-stat-microcharts .easy-pie-title {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-top: 6px;
  text-align: center;
}

/* Override SmartAdmin easy-pie-chart stroke colors */
.easy-pie-chart.txt-color-greenLight canvas { display: none; }
.easy-pie-chart.txt-color-orangeDark canvas { display: none; }
.easy-pie-chart.txt-color-blue       canvas { display: none; }
.easy-pie-chart.txt-color-darken     canvas { display: none; }

.easy-pie-chart.txt-color-greenLight .percent { color: #10b981 !important; font-weight: 700; }
.easy-pie-chart.txt-color-orangeDark .percent { color: #f59e0b !important; font-weight: 700; }
.easy-pie-chart.txt-color-blue       .percent { color: #6366f1 !important; font-weight: 700; }
.easy-pie-chart.txt-color-darken     .percent { color: #0ea5e9 !important; font-weight: 700; }

/* Progress bars in live stats */
.progress {
  height: 7px;
  border-radius: 4px;
  background: #f1f5f9;
  margin-bottom: 10px;
}

.progress-bar {
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* Override SmartAdmin progress bar colors */
.progress-bar.bg-color-blueDark { background: #6366f1 !important; }
.progress-bar.bg-color-blue     { background: #0ea5e9 !important; }
.progress-bar.bg-color-green    { background: #10b981 !important; }
.progress-bar.bg-color-orange   { background: #f59e0b !important; }

/* Chart containers */
sa-chart-js canvas {
  max-height: 280px;
}