/* ==========================================================================
   DiamondWells design tokens + maturity utilities
   Built ON the existing visual identity - do not change these base values:
     font:    "Signika Negative", Arial, sans-serif
     primary: #4154f1   navy: #012970   hover: #717ff5   page bg: #f2f2f2
   Every new/updated component should use these variables and classes.
   ========================================================================== */

:root {
  --dw-font: "Signika Negative", Arial, sans-serif;
  --dw-primary: #4154f1;
  --dw-primary-hover: #717ff5;
  --dw-primary-soft: #eef1fe;
  --dw-navy: #012970;
  --dw-bg: #f2f2f2;
  --dw-surface: #ffffff;
  --dw-surface-alt: #f6f9ff;
  --dw-border: #ebeef4;
  --dw-text: #212832;
  --dw-text-muted: #899bbd;
  --dw-success: #198754;
  --dw-success-soft: #e8f6ef;
  --dw-warning: #ffb703;
  --dw-warning-soft: #fff6e0;
  --dw-danger: #dc3545;
  --dw-danger-soft: #fdecee;
  --dw-info: #0dcaf0;
  --dw-radius: 12px;
  --dw-radius-sm: 8px;
  --dw-shadow: 0 2px 12px rgba(1, 41, 112, 0.08);
  --dw-shadow-lg: 0 8px 30px rgba(1, 41, 112, 0.12);
}

/* ---------- Cards ---------- */
.dw-card {
  background: var(--dw-surface);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  padding: 1.25rem 1.35rem;
}
.dw-card + .dw-card { margin-top: 1rem; }
.dw-card-title {
  color: var(--dw-navy);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ---------- Stat tiles ---------- */
.dw-stat {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.dw-stat .dw-stat-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--dw-primary-soft);
  color: var(--dw-primary);
  font-size: 1.35rem;
  flex: 0 0 auto;
}
.dw-stat .dw-stat-value {
  color: var(--dw-navy);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}
.dw-stat .dw-stat-label {
  color: var(--dw-text-muted);
  font-size: .82rem;
}

/* ---------- Badges ---------- */
.dw-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28em .7em;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 999px;
  line-height: 1.4;
}
.dw-badge-success { background: var(--dw-success-soft); color: var(--dw-success); }
.dw-badge-warning { background: var(--dw-warning-soft); color: #b07b00; }
.dw-badge-danger  { background: var(--dw-danger-soft); color: var(--dw-danger); }
.dw-badge-primary { background: var(--dw-primary-soft); color: var(--dw-primary); }
.dw-badge-muted   { background: #f0f2f7; color: var(--dw-text-muted); }

/* ---------- Buttons ---------- */
.dw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 0;
  border-radius: var(--dw-radius-sm);
  font-family: var(--dw-font);
  font-weight: 600;
  font-size: .95rem;
  padding: .62rem 1.35rem;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  text-decoration: none;
}
.dw-btn:active { transform: translateY(1px); }
.dw-btn-primary { background: var(--dw-primary); color: #fff; }
.dw-btn-primary:hover { background: var(--dw-primary-hover); color: #fff; }
.dw-btn-outline {
  background: transparent;
  color: var(--dw-primary);
  border: 1.5px solid var(--dw-primary);
}
.dw-btn-outline:hover { background: var(--dw-primary-soft); color: var(--dw-primary); }
.dw-btn-danger { background: var(--dw-danger); color: #fff; }
.dw-btn-block { width: 100%; }
.dw-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Tables ---------- */
.dw-table-wrap { overflow-x: auto; border-radius: var(--dw-radius); }
.dw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .92rem;
}
.dw-table thead th {
  background: var(--dw-surface-alt);
  color: var(--dw-navy);
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--dw-border);
  white-space: nowrap;
}
.dw-table tbody td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--dw-border);
  color: var(--dw-text);
  vertical-align: middle;
}
.dw-table tbody tr:hover { background: #fafbff; }
.dw-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Forms ---------- */
.dw-form label {
  color: var(--dw-navy);
  font-weight: 600;
  font-size: .88rem;
  margin-bottom: .3rem;
}
.dw-form .form-control,
.dw-form .form-select {
  border-radius: var(--dw-radius-sm);
  border: 1.5px solid var(--dw-border);
  padding: .6rem .85rem;
  font-family: var(--dw-font);
}
.dw-form .form-control:focus,
.dw-form .form-select:focus {
  border-color: var(--dw-primary);
  box-shadow: 0 0 0 3px rgba(65, 84, 241, .12);
}
.dw-form-hint { color: var(--dw-text-muted); font-size: .8rem; }

/* ---------- Empty states ---------- */
.dw-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--dw-text-muted);
}
.dw-empty .dw-empty-icon {
  font-size: 2.6rem;
  color: #c4cdE4;
  margin-bottom: .8rem;
  display: block;
}
.dw-empty .dw-empty-title {
  color: var(--dw-navy);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .35rem;
}

/* ---------- Skeleton loading ---------- */
@keyframes dw-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.dw-skeleton {
  border-radius: var(--dw-radius-sm);
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%);
  background-size: 800px 100%;
  animation: dw-shimmer 1.3s infinite linear;
  min-height: 1em;
}

/* ---------- Notification bell ---------- */
.dw-bell { position: relative; }
.dw-bell .dw-bell-badge {
  position: absolute;
  top: -6px; right: -7px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--dw-danger);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dw-notif-item {
  display: flex;
  gap: .75rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--dw-border);
  text-decoration: none;
  color: var(--dw-text);
}
.dw-notif-item:hover { background: var(--dw-surface-alt); }
.dw-notif-item.unread { background: var(--dw-primary-soft); }
.dw-notif-item .dw-notif-title { font-weight: 700; color: var(--dw-navy); font-size: .9rem; }
.dw-notif-item .dw-notif-body { font-size: .82rem; color: var(--dw-text-muted); }
.dw-notif-item .dw-notif-date { font-size: .72rem; color: var(--dw-text-muted); }

/* ---------- Sidebar unread badge (support chat) ---------- */
.dw-nav-chatdot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: .5rem;
  border-radius: 999px;
  background: var(--dw-danger);
  color: #fff !important;
  font-size: .68rem;
  font-weight: 700;
}

/* ---------- Page headers ---------- */
.dw-pagetitle h1 {
  font-size: 1.45rem;
  color: var(--dw-navy);
  font-weight: 700;
  margin-bottom: .1rem;
}
.dw-pagetitle .dw-page-sub { color: var(--dw-text-muted); font-size: .85rem; }

/* ---------- Install banner ---------- */
.dw-install-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 1080;
  background: var(--dw-navy);
  color: #fff;
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow-lg);
  padding: .9rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  max-width: min(94vw, 460px);
}
.dw-install-banner img { width: 40px; height: 40px; border-radius: 9px; }
.dw-install-banner .dw-install-text { font-size: .88rem; line-height: 1.35; }
.dw-install-banner .dw-install-text b { display: block; font-size: .95rem; }

/* ---------- Misc ---------- */
.dw-divider { border-top: 1px solid var(--dw-border); margin: 1.1rem 0; }
.dw-muted { color: var(--dw-text-muted); }
.dw-money { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--dw-navy); }
.dw-money.positive { color: var(--dw-success); }
.dw-money.negative { color: var(--dw-danger); }

/* ---------- inline notice / alert boxes ---------- */
.dw-notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--dw-border);
  background: var(--dw-surface-alt);
  color: var(--dw-text);
  line-height: 1.5;
}
.dw-notice > i { flex: 0 0 auto; font-size: 1.1rem; margin-top: .1rem; }
.dw-notice > *:not(i) { min-width: 0; }
.dw-notice strong { color: var(--dw-navy); }
.dw-notice-danger { border-color: color-mix(in srgb, var(--dw-danger) 40%, var(--dw-border)); background: var(--dw-danger-soft); }
.dw-notice-danger > i, .dw-notice-danger strong { color: var(--dw-danger); }
.dw-notice-warning { border-color: color-mix(in srgb, var(--dw-warning) 40%, var(--dw-border)); background: var(--dw-warning-soft); }
.dw-notice-warning > i { color: var(--dw-warning); }
.dw-notice-info { border-color: color-mix(in srgb, var(--dw-primary) 30%, var(--dw-border)); background: var(--dw-primary-soft); }
.dw-notice-info > i { color: var(--dw-primary); }