/* Morandi color theme for the Customer Sales Analysis app */
/* Subtle, low-saturation, warm-gray based palette */

:root {
  --m-bg: #efefeb;
  --m-surface: #f7f6f3;
  --m-card: #fbfbf9;
  --m-border: #ddd8d1;

  --m-text: #5b5d63;
  --m-muted: #8a8d92;

  --m-primary: #8a8f9e;       /* Dusty blue-gray */
  --m-primary-700: #7c8193;
  --m-secondary: #b8a9a4;     /* Mauve taupe */
  --m-secondary-700: #a89690;
  --m-success: #9db5a4;       /* Sage */
  --m-success-700: #8ba491;
  --m-info: #a7bac8;          /* Mist blue */
  --m-info-700: #97aab7;
  --m-warning: #d9c7a3;       /* Muted sand */
  --m-warning-700: #c7b590;
  --m-danger: #c7a2a2;        /* Dusty rose */
  --m-danger-700: #b78f8f;

  --m-contrast: #ffffff;
  --m-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Base */
html, body { height: 100%; }
body {
  background: linear-gradient(135deg, var(--m-bg) 0%, var(--m-surface) 100%);
  color: var(--m-text);
  font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--m-primary); }
a:hover { color: var(--m-primary-700); }

/* Containers */
.main-container {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  border: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
}

.card {
  background: var(--m-card);
  border: 1px solid var(--m-border);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.card-header {
  border-bottom: 1px solid var(--m-border);
}

/* Forms */
.form-control:focus {
  border-color: var(--m-primary);
  box-shadow: 0 0 0 0.2rem rgba(138, 143, 158, 0.25);
}

/* Buttons */
.btn { border-radius: 10px; font-weight: 600; }

.btn-primary {
  background-color: var(--m-primary);
  border-color: var(--m-primary);
  color: var(--m-contrast);
}
.btn-primary:hover { background-color: var(--m-primary-700); border-color: var(--m-primary-700); }

.btn-outline-primary {
  color: var(--m-primary);
  border-color: var(--m-primary);
}
.btn-outline-primary:hover { background-color: var(--m-primary); color: var(--m-contrast); }

.btn-success { background-color: var(--m-success); border-color: var(--m-success); }
.btn-success:hover { background-color: var(--m-success-700); border-color: var(--m-success-700); }

.btn-outline-success { color: var(--m-success); border-color: var(--m-success); }
.btn-outline-success:hover { background-color: var(--m-success); color: var(--m-contrast); }

.btn-warning { background-color: var(--m-warning); border-color: var(--m-warning); color: #4a3e2a; }
.btn-warning:hover { background-color: var(--m-warning-700); border-color: var(--m-warning-700); color: #3b3222; }

.btn-secondary { background-color: var(--m-secondary); border-color: var(--m-secondary); }
.btn-secondary:hover { background-color: var(--m-secondary-700); border-color: var(--m-secondary-700); }

.btn-info { background-color: var(--m-info); border-color: var(--m-info); }
.btn-info:hover { background-color: var(--m-info-700); border-color: var(--m-info-700); }

/* Text/Background utilities remapped to Morandi palette */
.text-primary { color: var(--m-primary) !important; }
.text-success { color: var(--m-success) !important; }
.text-info { color: var(--m-info) !important; }
.text-warning { color: var(--m-warning) !important; }
.text-secondary { color: var(--m-secondary) !important; }
.text-muted { color: var(--m-muted) !important; }

.bg-primary { background-color: var(--m-primary) !important; color: var(--m-contrast) !important; }
.bg-success { background-color: var(--m-success) !important; color: var(--m-contrast) !important; }
.bg-info { background-color: var(--m-info) !important; color: var(--m-contrast) !important; }
.bg-warning { background-color: var(--m-warning) !important; }
.bg-secondary { background-color: var(--m-secondary) !important; color: var(--m-contrast) !important; }

.badge.bg-primary, .badge.bg-success, .badge.bg-info, .badge.bg-secondary {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.badge { border-radius: 14px; }

/* Tables */
.table thead th { border-bottom-color: var(--m-border); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,0.015); }
.table-dark { background-color: var(--m-primary-700); }
.table-dark th, .table-dark td, .table-dark thead th { color: var(--m-contrast); border-color: rgba(255,255,255,0.15); }

/* Components on pages */
.customer-card {
  background: var(--m-card);
  border: 1px solid var(--m-border);
  border-left: 4px solid var(--m-primary);
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.customer-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.08); }

.stats-card {
  background: var(--m-info);
  color: var(--m-contrast);
  border: none;
  border-radius: 14px;
}

.history-item {
  border-left: 4px solid var(--m-primary);
  background: var(--m-card);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.history-item:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }

.info-card {
  background: linear-gradient(135deg, var(--m-secondary) 0%, var(--m-info) 100%);
  color: var(--m-contrast);
  border: none;
}

.raw-data {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
}

.loading { text-align: center; padding: 3rem; }
.loading-inline { display: none; }

.empty-state { text-align: center; padding: 3rem; color: var(--m-muted); }

/* Small polish */
.display-4, .display-5 { letter-spacing: 0.2px; }
.lead { color: var(--m-muted); }