/* ============================================================
   Dashboard color cleanup — 2026-05-22
   Brand teal (#31473a) across customer clientarea.
   KEEP mint green ONLY for .label-success (ACTIVE service pill).
   Scope: .not-login-page (logged-in clientarea pages only).
   ============================================================ */

:root {
  --wp-brand:#31473a;
  --wp-brand-700:#243530;
  --wp-brand-soft:#dfeae3;
}

/* Orange "No Contacts Found" alert -> brand soft tint */
.not-login-page .html-box-headernav {
  background-color: var(--wp-brand-soft) !important;
  color: var(--wp-brand-700) !important;
  border-color: var(--wp-brand) !important;
}

/* Cyan "Update" / "New Contact" / similar block buttons -> teal */
.not-login-page .btn.btn-default.btn-sm.btn-block,
.not-login-page .btn.btn-success.btn-sm.btn-block,
.not-login-page a.btn.btn-default.btn-sm.btn-block,
.not-login-page a.btn.btn-success.btn-sm.btn-block,
.not-login-page .btn.btn-info,
.not-login-page a.btn-info {
  background-color: var(--wp-brand) !important;
  border-color: var(--wp-brand) !important;
  color: #fff !important;
}
.not-login-page .btn.btn-default.btn-sm.btn-block:hover,
.not-login-page .btn.btn-success.btn-sm.btn-block:hover,
.not-login-page a.btn.btn-default.btn-sm.btn-block:hover,
.not-login-page a.btn.btn-success.btn-sm.btn-block:hover,
.not-login-page .btn.btn-info:hover,
.not-login-page a.btn-info:hover {
  background-color: var(--wp-brand-700) !important;
  border-color: var(--wp-brand-700) !important;
  color: #fff !important;
}

/* Yellow "1" / "0" stat numbers + badge-warning -> teal */
.not-login-page .stat.coodiv-text-11,
.not-login-page .badge.badge-warning,
.not-login-page .label.label-warning {
  background-color: var(--wp-brand) !important;
  color: #fff !important;
}

/* Indigo / cyan text links in clientarea body -> teal */
.not-login-page .body-content a:not(.btn):not(.label):not(.badge):not(.dropdown-item):not([class*="text-white"]):not([class*="v7-"]),
.not-login-page .html-box a:not(.btn):not(.label):not(.badge),
.not-login-page .panel a:not(.btn):not(.label):not(.badge) {
  color: var(--wp-brand) !important;
}
.not-login-page .body-content a:not(.btn):not(.label):not(.badge):not([class*="text-white"]):not([class*="v7-"]):hover,
.not-login-page .html-box a:not(.btn):not(.label):not(.badge):hover,
.not-login-page .panel a:not(.btn):not(.label):not(.badge):hover {
  color: var(--wp-brand-700) !important;
}

/* KEEP mint green for .label-success (ACTIVE service status) — re-assert
   so .btn-success cyan->teal override above does NOT bleed into the pill */
.not-login-page .label.label-success,
.not-login-page span.label.label-success {
  background-color: rgb(217, 245, 217) !important;
  color: rgb(35, 110, 56) !important;
  border-color: rgb(160, 220, 175) !important;
}

/* Indigo "open a ticket" / "WHOSTPRESS" inline links -> teal */
.not-login-page a[href*="submitticket"],
.not-login-page a[href="https://www.whostpress.com"],
.not-login-page a[href="https://whostpress.com"] {
  color: var(--wp-brand) !important;
}
.not-login-page a[href*="submitticket"]:hover {
  color: var(--wp-brand-700) !important;
}

/* Avatar / initial circle if rendered with indigo bg -> teal */
.not-login-page [class*="user-avatar"],
.not-login-page [class*="avatar-circle"],
.not-login-page .v7-avatar,
.not-login-page .topbar-avatar,
.not-login-page .user-initial {
  background-color: var(--wp-brand) !important;
  color: #fff !important;
}

/* =========================================================
   Modern dashboard layout — 2026-05-22
   Used by the rewritten clientareahome.tpl.
   ========================================================= */

.wp-dash {
  padding: 0 8px;
}

/* --- Greeting row --- */
.wp-dash__greeting { margin-bottom: 32px; }
.wp-dash__hello {
  font-family: "Manrope", -apple-system, sans-serif;
  font-size: 28px; font-weight: 700;
  color: var(--wp-brand-700); margin: 0 0 4px;
  letter-spacing: -.02em; line-height: 1.2;
}
.wp-dash__sub {
  color: #6b6e6a; font-size: 14px; margin: 0;
}
.wp-dash__edit-link {
  color: var(--wp-brand) !important;
  font-size: 14px; font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--wp-brand);
  border-radius: 8px;
  transition: all .15s; text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.wp-dash__edit-link:hover {
  background: var(--wp-brand) !important; color: #fff !important;
}
@media (max-width: 575px) {
  .wp-dash__hello { font-size: 22px; }
  .wp-dash__greeting { gap: 12px; }
  .wp-dash__edit-link { font-size: 13px; padding: 6px 12px; }
}

/* --- Stat cards grid --- */
.wp-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 991px) {
  .wp-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

.wp-stat {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e7eae8;
  border-radius: 14px;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wp-stat:hover {
  border-color: var(--wp-brand);
  box-shadow: 0 8px 24px -12px rgba(49,71,58,.18);
  transform: translateY(-2px);
}
.wp-stat__icon {
  width: 44px; height: 44px;
  background: var(--wp-brand-soft);
  color: var(--wp-brand);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 20px; flex-shrink: 0;
}
.wp-stat__body { flex: 1; min-width: 0; }
.wp-stat__num {
  font-size: 24px; font-weight: 700;
  color: var(--wp-brand-700); line-height: 1;
  margin-bottom: 4px;
}
.wp-stat__label {
  font-size: 12px; color: #6b6e6a;
  text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700;
}
.wp-stat__arrow {
  color: #b5bab7; font-size: 14px;
  transition: transform .15s, color .15s;
}
.wp-stat:hover .wp-stat__arrow {
  color: var(--wp-brand);
  transform: translateX(2px);
}
/* unpaid invoice alert state */
.wp-stat--alert .wp-stat__icon {
  background: #fce4e4 !important; color: #c63a3a !important;
}
.wp-stat--alert .wp-stat__num { color: #c63a3a !important; }
.wp-stat--alert:hover { border-color: #c63a3a !important; }

/* --- Panels (active services list) --- */
.wp-panel {
  background: #fff;
  border: 1px solid #e7eae8;
  border-radius: 14px;
  overflow: hidden;
}
.wp-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid #eef0ef;
  background: #fafbfa;
}
.wp-panel__title {
  margin: 0; font-size: 15px; font-weight: 700;
  color: var(--wp-brand-700);
  letter-spacing: -.005em;
}
.wp-panel__body { padding: 16px 20px; }
.wp-panel .list-group { border: 0 !important; border-radius: 0 !important; }
.wp-panel .list-group-item {
  border-color: #eef0ef !important;
  border-left: 0 !important; border-right: 0 !important;
  padding: 14px 20px !important;
  color: #2a3530 !important;
  background: #fff !important;
  transition: background .12s, color .12s;
}
.wp-panel .list-group-item:first-child { border-top: 0 !important; }
.wp-panel .list-group-item:last-child  { border-bottom: 0 !important; }
.wp-panel .list-group-item:hover {
  background: #fafbfa !important;
  color: var(--wp-brand) !important;
}
.wp-panel .list-group-item .status { display: inline-block; }
.wp-panel .status-expiry { font-size: 12px; font-weight: 600; }

/* --- Footer cards --- */
.wp-card {
  background: #fff;
  border: 1px solid #e7eae8;
  border-radius: 14px;
  padding: 20px;
  height: 100%;
}
.wp-card__title {
  margin: 0 0 14px; font-size: 14px; font-weight: 700;
  color: var(--wp-brand-700);
  text-transform: uppercase; letter-spacing: .04em;
}

/* Quick actions grid */
.wp-quick-actions {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.wp-quick-action {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e7eae8; border-radius: 10px;
  color: #2a3530 !important;
  font-size: 14px; font-weight: 500;
  text-decoration: none !important;
  transition: all .15s;
}
.wp-quick-action i {
  color: var(--wp-brand); font-size: 16px;
}
.wp-quick-action:hover {
  background: var(--wp-brand-soft) !important;
  border-color: var(--wp-brand) !important;
  color: var(--wp-brand-700) !important;
}

/* Mini list (recent activity) */
.wp-mini-list { display: flex; flex-direction: column; gap: 6px; }
.wp-mini-list__item {
  padding: 10px 12px;
  border-radius: 8px;
  background: #fafbfa;
  color: #2a3530 !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: background .12s;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wp-mini-list__item:hover {
  background: var(--wp-brand-soft) !important;
}
.wp-mini-list__item .status,
.wp-mini-list__item .status-mini {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8ebe9; color: #5a615d;
  font-weight: 600;
}

.wp-empty {
  color: #888; font-size: 14px; margin: 0;
  padding: 14px 0;
}
.wp-empty a { color: var(--wp-brand); font-weight: 600; }

/* --- TOP BAR cleanup: hide promo strip + topbar links when logged in --- */
.not-login-page .v7-promo,
.not-login-page .v7-topbar { display: none !important; }


/* --- CTA-style quick action (Browse Addons) --- */
.wp-quick-action--cta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  background: var(--wp-brand) !important;
  border-color: var(--wp-brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
}
.wp-quick-action--cta i { color: #fff !important; }
.wp-quick-action--cta:hover {
  background: var(--wp-brand-700) !important;
  border-color: var(--wp-brand-700) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.wp-quick-action--cta .ml-auto { margin-left: auto; font-size: 13px; opacity: .85; }