/* ==========================================================================
   AwareCRM — Dashboard UI/UX layer
   --------------------------------------------------------------------------
   Loaded automatically after assets/css/style.css (see
   application/helpers/assets_helper.php -> if custom.css exists).
   Goals: clear hierarchy, smart density, semantic colour and real actions.
   Everything is namespaced (.acrm-*, .dash-*, .fin-*, .kpi-*, .stat-card)
   so it cannot leak into legacy markup.
   ========================================================================== */

.acrm-dashboard {
  --acrm-ink: #0f172a;
  --acrm-ink-2: #334155;
  --acrm-muted: #64748b;
  --acrm-faint: #94a3b8;
  --acrm-line: #e2e8f0;
  --acrm-line-soft: #f1f5f9;
  --acrm-surface: #ffffff;
  --acrm-radius: 14px;
  --acrm-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 26px -14px rgba(15, 23, 42, .22);
  --acrm-shadow-hover: 0 2px 6px rgba(15, 23, 42, .08), 0 20px 38px -18px rgba(15, 23, 42, .32);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 36px;
}

/* Reclaim the dead space left by the legacy 230px sidebar and tighten padding.
   The new rail is only 80px wide (see aside_desktop.php). */
@media (min-width: 992px) {
  #wrapper {
    margin-left: 120px;
  }

  @supports selector(:has(*)) {
    .content:has(.acrm-dashboard) {
      padding: 22px 26px 34px;
    }
  }
}

/* ---------------------------------------------------------------- hero ---- */
.dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 2px 0 22px;
}

.dash-hero__title {
  margin: 0 0 4px;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--acrm-ink);
}

.dash-hero__subtitle {
  margin: 0;
  font-size: 13.5px;
  color: var(--acrm-muted);
}

.dash-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.dash-hero__actions-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acrm-faint);
  white-space: nowrap;
}

.dash-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-quick__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--acrm-line);
  background: var(--acrm-surface);
  color: var(--acrm-ink-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease,
    background .15s ease, color .15s ease;
}

.dash-quick__btn i {
  font-size: 12.5px;
  color: var(--acrm-faint);
  transition: color .15s ease;
}

.dash-quick__btn:hover,
.dash-quick__btn:focus {
  transform: translateY(-1px);
  box-shadow: var(--acrm-shadow);
  border-color: #cbd5e1;
  color: var(--acrm-ink);
  text-decoration: none;
}

.dash-quick__btn:hover i {
  color: #2563eb;
}

.dash-quick__btn.is-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .7);
}

.dash-quick__btn.is-primary i,
.dash-quick__btn.is-primary:hover i {
  color: #fff;
}

.dash-quick__btn.is-primary:hover,
.dash-quick__btn.is-primary:focus {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

/* ------------------------------------------------------- widgets / cards -- */
.acrm-dashboard .col-md-12 > .widget,
.acrm-dashboard [data-container] > .widget {
  margin-bottom: 22px;
}

.acrm-dashboard .panel_s {
  border: 1px solid var(--acrm-line);
  border-radius: var(--acrm-radius);
  background: var(--acrm-surface);
  box-shadow: var(--acrm-shadow);
  transition: box-shadow .18s ease;
}

.acrm-dashboard .panel_s:hover {
  box-shadow: var(--acrm-shadow-hover);
}

.acrm-dashboard .panel_s > .panel-body {
  padding: 18px 20px;
}

/* Heavier, consistent meters inside the dashboard. */
.acrm-dashboard .progress {
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  box-shadow: none;
}

.acrm-dashboard .progress.progress-bar-mini {
  height: 8px;
}

.acrm-dashboard .progress-bar {
  border-radius: 999px;
}

/* ------------------------------------------------------ widget header ----- */
.acrm-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--acrm-line-soft);
}

.acrm-widget__title {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.acrm-widget__title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--acrm-ink);
}

.acrm-widget__hint {
  display: block;
  font-size: 11.5px;
  color: var(--acrm-faint);
}

.acrm-widget__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.acrm-widget__icon.is-warning { background: #fffbeb; color: #b45309; }
.acrm-widget__icon.is-primary { background: #eef2ff; color: #4338ca; }
.acrm-widget__icon.is-info    { background: #eff6ff; color: #1d4ed8; }
.acrm-widget__icon.is-success { background: #ecfdf5; color: #047857; }
.acrm-widget__icon.is-danger  { background: #fef2f2; color: #b91c1c; }

.acrm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}

.acrm-pill.is-warning { background: #fef3c7; color: #92400e; }
.acrm-pill.is-danger  { background: #fee2e2; color: #991b1b; }

.acrm-widget__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2563eb;
  white-space: nowrap;
}

.acrm-widget__link:hover {
  color: #1d4ed8;
  text-decoration: none;
}

.acrm-widget__link i {
  font-size: 10px;
  transition: transform .15s ease;
}

.acrm-widget__link:hover i {
  transform: translateX(2px);
}

/* ------------------------------------------------------ contract list ----- */
.acrm-contract-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 288px;
  overflow-y: auto;
  overflow-x: hidden;
}

.acrm-contract {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 10px;
  border-radius: 10px;
  border-bottom: 1px solid var(--acrm-line-soft);
  transition: background .15s ease;
}

.acrm-contract:last-child { border-bottom: 0; }
.acrm-contract:hover { background: #f8fafc; }

.acrm-contract__main { min-width: 0; }

.acrm-contract__subject {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acrm-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acrm-contract__subject:hover { color: #2563eb; }

.acrm-contract__meta {
  display: block;
  font-size: 11.5px;
  color: var(--acrm-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acrm-contract__sep { margin: 0 4px; color: #cbd5e1; }

.acrm-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.acrm-badge.is-danger  { background: #fee2e2; color: #b91c1c; }
.acrm-badge.is-warning { background: #fef3c7; color: #b45309; }
.acrm-badge.is-neutral { background: #f1f5f9; color: #475569; }

/* ------------------------------------------------ compact empty states ---- */
.acrm-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px dashed #dbe3ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.acrm-empty__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #15803d;
  font-size: 15px;
}

.acrm-empty__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acrm-empty__text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--acrm-ink);
}

.acrm-empty__text span {
  font-size: 12px;
  color: var(--acrm-muted);
}

.acrm-empty__cta {
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 9px;
  font-weight: 600;
}

/* ================================================= finance breakdown ====== */
.acrm-finance .panel-body { padding: 20px 22px 22px; }

.fin-grid {
  display: grid;
  gap: 18px;
}

.fin-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin-grid--1 { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 991px) {
  .fin-grid { grid-template-columns: minmax(0, 1fr); }
}

.fin-col {
  border: 1px solid var(--acrm-line);
  border-radius: 12px;
  padding: 14px 16px 10px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.fin-col:hover {
  border-color: #cbd5e1;
  box-shadow: 0 12px 26px -20px rgba(15, 23, 42, .45);
}

.fin-col__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--acrm-line-soft);
}

.fin-col__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.fin-col__icon.is-primary { background: #eef2ff; color: #4338ca; }
.fin-col__icon.is-info    { background: #eff6ff; color: #1d4ed8; }
.fin-col__icon.is-success { background: #ecfdf5; color: #047857; }

.fin-col__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--acrm-ink);
}

.fin-col__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 0 auto;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--acrm-faint);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.fin-col__toggle input { margin: 0; }

.fin-col__body { padding-top: 4px; }

.fin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label count"
    "meter pct";
  align-items: center;
  gap: 4px 12px;
  padding: 9px 4px;
  border-radius: 8px;
  transition: background .14s ease;
}

.fin-row:hover { background: #f8fafc; }

.fin-row__label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.fin-row__label:hover { text-decoration: none; }

.fin-row__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acrm-faint);
}

.fin-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--acrm-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-row__count {
  grid-area: count;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--acrm-ink);
  font-variant-numeric: tabular-nums;
}

.fin-row__meter {
  grid-area: meter;
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.fin-row__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: var(--acrm-faint);
  transition: width .55s cubic-bezier(.2, .8, .2, 1);
}

.fin-row__pct {
  grid-area: pct;
  min-width: 46px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--acrm-muted);
  font-variant-numeric: tabular-nums;
}

/* zero-value rows: present but clearly secondary */
.fin-row.is-zero .fin-row__count { color: var(--acrm-faint); font-weight: 700; }
.fin-row.is-zero .fin-row__name  { color: var(--acrm-faint); }
.fin-row.is-zero .fin-row__fill  { opacity: .3; }

.fin-col.hide-zero .fin-row.is-zero { display: none; }

/* semantic tones */
.fin-row__dot.is-danger  { background: #ef4444; }
.fin-row__dot.is-warning { background: #f59e0b; }
.fin-row__dot.is-success { background: #10b981; }
.fin-row__dot.is-info    { background: #3b82f6; }
.fin-row__dot.is-primary { background: #6366f1; }
.fin-row__dot.is-default,
.fin-row__dot.is-muted   { background: #94a3b8; }

.fin-row__count.is-danger  { color: #dc2626; }
.fin-row__count.is-warning { color: #b45309; }
.fin-row__count.is-success { color: #047857; }
.fin-row__count.is-info    { color: #1d4ed8; }
.fin-row__count.is-primary { color: #4338ca; }
.fin-row__count.is-default,
.fin-row__count.is-muted   { color: #475569; }

.fin-row__fill.is-danger  { background: linear-gradient(90deg, #f87171, #ef4444); }
.fin-row__fill.is-warning { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fin-row__fill.is-success { background: linear-gradient(90deg, #34d399, #10b981); }
.fin-row__fill.is-info    { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.fin-row__fill.is-primary { background: linear-gradient(90deg, #818cf8, #6366f1); }
.fin-row__fill.is-default,
.fin-row__fill.is-muted   { background: #94a3b8; }

.fin-total {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--acrm-line);
}

/* ================================================= money KPIs ============ */
.kpi-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.kpi-toolbar__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--acrm-faint, #94a3b8);
}

.kpi-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kpi-toolbar .bootstrap-select { margin: 0; }

.kpi-toolbar .bootstrap-select > .dropdown-toggle {
  border-radius: 9px !important;
  border-color: #e2e8f0 !important;
  background: #fff !important;
  color: #334155 !important;
  font-weight: 600;
  font-size: 13px;
}

.kpi-toolbar .bootstrap-select > .dropdown-toggle:hover {
  border-color: #cbd5e1 !important;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

@media (max-width: 767px) {
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
}

.kpi-card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 16px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #cbd5e1;
}

.kpi-card.is-warning::before { background: #f59e0b; }
.kpi-card.is-danger::before  { background: #ef4444; }
.kpi-card.is-success::before { background: #10b981; }

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 18px 34px -22px rgba(15, 23, 42, .5);
}

.kpi-card__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748b;
}

.kpi-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}

.kpi-card.is-warning .kpi-card__dot { background: #f59e0b; }
.kpi-card.is-danger  .kpi-card__dot { background: #ef4444; }
.kpi-card.is-success .kpi-card__dot { background: #10b981; }

.kpi-card__value {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.kpi-card.is-warning .kpi-card__value { color: #b45309; }
.kpi-card.is-danger  .kpi-card__value { color: #b91c1c; }
.kpi-card.is-success .kpi-card__value { color: #047857; }

/* ================================================= quick stats =========== */
.acrm-stats .row > div {
  margin-bottom: 20px;
}

.stat-card {
  display: block;
  height: 100%;
  padding: 16px 18px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.stat-card:hover,
.stat-card:focus {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 18px 34px -22px rgba(15, 23, 42, .5);
  color: inherit;
  text-decoration: none;
}

.stat-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}

.stat-card__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569;
}

.stat-card__icon svg {
  width: 18px;
  height: 18px;
}

.stat-card__icon.is-danger  { background: #fef2f2; color: #dc2626; }
.stat-card__icon.is-warning { background: #fffbeb; color: #b45309; }
.stat-card__icon.is-success { background: #ecfdf5; color: #047857; }
.stat-card__icon.is-info    { background: #eff6ff; color: #1d4ed8; }
.stat-card__icon.is-primary { background: #eef2ff; color: #4338ca; }

.stat-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--acrm-ink-2, #334155);
  line-height: 1.2;
}

.stat-card__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 11px;
}

.stat-card__num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.stat-card__of {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.stat-card__meter {
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.stat-card__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: #64748b;
  transition: width .55s cubic-bezier(.2, .8, .2, 1);
}

.stat-card__fill.is-danger  { background: linear-gradient(90deg, #f87171, #ef4444); }
.stat-card__fill.is-warning { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.stat-card__fill.is-success { background: linear-gradient(90deg, #34d399, #10b981); }
.stat-card__fill.is-info    { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
.stat-card__fill.is-primary { background: linear-gradient(90deg, #818cf8, #6366f1); }

.stat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
}

.stat-card__pct {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.stat-card__cta {
  font-size: 11.5px;
  font-weight: 600;
  color: #2563eb;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

.stat-card:hover .stat-card__cta,
.stat-card:focus .stat-card__cta {
  opacity: 1;
  transform: none;
}

/* ================================================= responsive ============ */
@media (max-width: 767px) {
  .dash-hero { align-items: flex-start; }
  .dash-hero__title { font-size: 22px; }
  .dash-quick { width: 100%; }
  .dash-quick__btn { flex: 1 1 auto; justify-content: center; }
  .acrm-empty { flex-wrap: wrap; }
  .acrm-empty__cta { margin-left: 0; width: 100%; }
}