@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  font-family: 'Poppins', sans-serif;
  color: #152b2f;
  background: #f5f7f8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html,
body,
#root {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: #f5f7f8;
}

button,
input,
textarea,
select {
  font-family: 'Poppins', sans-serif;
}


/* =========================
   APP SHELL
========================= */

.app-shell {
  min-height: 100vh;
  display: flex;
  background: #f5f7f8;
}


/* =========================
   SIDEBAR
========================= */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;

  width: 220px;

  display: flex;
  flex-direction: column;

  padding: 18px 14px;

  background:
    linear-gradient(
      180deg,
      #0d2c33 0%,
      #0b252c 55%,
      #091f25 100%
    );

  color: #ffffff;

  border-right: 1px solid rgba(255,255,255,0.04);

  z-index: 100;
}


/* BRAND */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 4px 8px 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 22px;
}


/* LOGO */

.brand-logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.chat-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    135deg,
    #20c997,
    #0d9b73
  );

  border-radius: 50%;
  color: #ffffff;

  font-size: 18px;
  font-weight: 700;

  box-shadow: 0 5px 14px rgba(13, 155, 115, 0.22);
}


/* Bubble tail */

.chat-logo::after {
  content: "";
  position: absolute;

  left: 3px;
  bottom: -2px;

  width: 10px;
  height: 10px;

  background: #0d9b73;

  clip-path: polygon(
    0 0,
    100% 0,
    0 100%
  );

  transform: rotate(-12deg);
}

.chat-logo span {
  position: relative;
  z-index: 2;
}


/* BRAND TEXT */

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 16px 20px;
}


/* LOGO */

.brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.chat-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    135deg,
    #20c997,
    #0d9b73
  );

  border-radius: 50%;
  color: #ffffff;

  font-size: 15px;
  font-weight: 700;

  box-shadow: 0 4px 10px rgba(13, 155, 115, 0.2);
}

.chat-logo::after {
  content: "";
  position: absolute;

  left: 3px;
  bottom: -2px;

  width: 8px;
  height: 8px;

  background: #0d9b73;

  clip-path: polygon(
    0 0,
    100% 0,
    0 100%
  );

  transform: rotate(-12deg);
}

.chat-logo span {
  position: relative;
  z-index: 2;
}


/* BRAND TEXT */

.brand-text {
  min-width: 0;
}

.brand-text h2 {
  margin: 0;

  font-size: 16px;
  line-height: 1;

  font-weight: 700;
  letter-spacing: -0.3px;

  color: #ffffff;
}

.brand-text span {
  display: block;

  margin-top: 4px;

  font-size: 5.5px;
  line-height: 1.2;

  font-weight: 600;
  letter-spacing: 0.8px;

  text-transform: uppercase;

  color: rgba(197, 216, 218, 0.6);

  white-space: nowrap;
}


/* NAV */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 11px;

  padding: 10px 12px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #9eb0b4;

  font-size: 12px;
  font-weight: 500;

  text-align: left;
  cursor: pointer;

  transition: 0.2s ease;
}

.nav-item span {
  width: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #8ca0a4;
}

.nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: #ffffff;
}

.nav-item.active {
  background: #0d8e68;
  color: #ffffff;

  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

.nav-item.active span {
  color: #ffffff;
}

.sidebar-bottom {
  margin-top: auto;

  padding-top: 16px;

  border-top: 1px solid rgba(255,255,255,0.06);
}


/* =========================
   MAIN
========================= */

.main-content {
  width: calc(100% - 220px);
  min-height: 100vh;

  margin-left: 220px;

  background: #f7f9fa;
}


/* =========================
   TOPBAR
========================= */

.topbar {
  height: 66px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 26px;

  background: #ffffff;

  border-bottom: 1px solid #e9edef;

  position: sticky;
  top: 0;

  z-index: 50;
}


/* SEARCH */

.search-box {
  width: 360px;
  height: 38px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 0 12px;

  border: 1px solid #e5e9eb;
  border-radius: 8px;

  background: #f9fbfb;
}

.search-box span {
  color: #8c9b9f;
  font-size: 15px;
}

.search-box input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  font-size: 11px;
  color: #23383d;
}

.search-box input::placeholder {
  color: #a4b0b3;
}


/* TOPBAR ACTIONS */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-button {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #e7ecee;
  border-radius: 8px;

  background: #ffffff;
  color: #617378;

  cursor: pointer;
}

.icon-button:hover {
  background: #f4f8f7;
}

.profile {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-left: 4px;
}

.profile-avatar {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #dff4eb;
  color: #087c5b;

  font-size: 13px;
  font-weight: 700;
}

.profile-info strong {
  display: block;

  font-size: 11px;
  font-weight: 600;

  color: #20363b;
}

.profile-info span {
  display: block;

  margin-top: 2px;

  font-size: 8px;
  color: #8d9ca0;
}


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

.dashboard {
  max-width: 1500px;

  margin: 0 auto;
  padding: 28px 30px 40px;
}


/* DASHBOARD HEADER */

.dashboard-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 24px;
}

.dashboard-heading h1 {
  font-size: 25px;
  line-height: 1.25;

  font-weight: 700;

  color: #152e33;
}

.dashboard-heading p {
  margin-top: 5px;

  font-size: 11px;
  color: #87969a;
}

.date-filter {
  min-height: 38px;

  padding: 0 15px;

  border: 1px solid #e1e7e9;
  border-radius: 8px;

  background: #ffffff;

  font-size: 10px;
  font-weight: 500;

  color: #40575c;

  cursor: pointer;
}


/* TEMP PLACEHOLDER */

.dashboard-placeholder {
  min-height: 400px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px dashed #d8e0e2;
  border-radius: 12px;

  background: #ffffff;

  color: #a0adaf;

  font-size: 13px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1050px) {

  .sidebar {
    width: 200px;
  }

  .main-content {
    width: calc(100% - 200px);
    margin-left: 200px;
  }

  .search-box {
    width: 280px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 720px) {

  .sidebar {
    display: none;
  }

  .main-content {
    width: 100%;
    margin-left: 0;
  }

  .topbar {
    height: 60px;

    padding: 0 15px;
  }

  .search-box {
    width: 180px;
  }

  .profile-info {
    display: none;
  }

  .icon-button {
    display: none;
  }

  .dashboard {
    padding: 22px 16px 90px;
  }

  .dashboard-heading {
    flex-direction: column;
    align-items: stretch;

    margin-bottom: 18px;
  }

  .dashboard-heading h1 {
    font-size: 22px;
  }

  .date-filter {
    width: 100%;
  }

}


/* =========================
   KPI STATS
========================= */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  min-height: 118px;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e8edef;
  border-radius: 12px;

  box-shadow:
    0 1px 2px rgba(15, 40, 45, 0.02),
    0 6px 18px rgba(15, 40, 45, 0.035);
}

.stat-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
}

.stat-icon svg {
  width: 21px;
  height: 21px;
}

/* flat icon themes */

.stat-icon.green {
  background: #e7f7ef;
  color: #0f946b;
}

.stat-icon.blue {
  background: #edf4ff;
  color: #3f7edb;
}

.stat-icon.emerald {
  background: #eaf8f5;
  color: #159b7c;
}

.stat-icon.purple {
  background: #f2edff;
  color: #8266d8;
}

.stat-content {
  min-width: 0;
}

.stat-label {
  display: block;

  margin-bottom: 4px;

  font-size: 10px;
  font-weight: 500;

  color: #839398;
}

.stat-content h3 {
  margin: 0;

  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;

  color: #173238;
}

.stat-change {
  display: block;

  margin-top: 5px;

  font-size: 9px;
  font-weight: 500;

  color: #98a5a8;
}

.stat-change.positive {
  color: #13a273;
}


@media (max-width: 850px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stat-card {
  min-height: 102px;
  padding: 13px;
  gap: 10px;
}

.stat-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 9px;
}

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

.stat-label {
  font-size: 9px;
}

.stat-content h3 {
  font-size: 17px;
}

.stat-change {
  font-size: 8px;
}


@media (min-width: 851px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* =========================
   ANALYTICS SECTION
========================= */

.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.dashboard-card {
  background: #ffffff;
  border: 1px solid #e8edef;
  border-radius: 12px;
  padding: 18px;

  box-shadow:
    0 1px 2px rgba(15, 40, 45, 0.02),
    0 6px 18px rgba(15, 40, 45, 0.035);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.card-header h3 {
  font-size: 13px;
  font-weight: 600;
  color: #173238;
}

.card-header p {
  margin-top: 4px;
  font-size: 9px;
  color: #92a0a4;
}

.card-filter {
  height: 32px;
  padding: 0 11px;

  border: 1px solid #e5eaec;
  border-radius: 7px;

  background: #ffffff;
  color: #5f7075;

  font-size: 9px;
  font-weight: 500;

  cursor: pointer;
}


/* SALES */

.sales-summary {
  display: flex;
  align-items: flex-end;
  gap: 12px;

  margin-top: 20px;
}

.sales-summary span {
  font-size: 9px;
  color: #8c9b9f;
}

.sales-summary h2 {
  margin-top: 3px;

  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;

  color: #173238;
}

.summary-growth {
  margin-bottom: 3px;

  font-size: 9px !important;
  font-weight: 600;

  color: #13a273 !important;
}

.chart-placeholder {
  height: 210px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 18px;

  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      #fbfdfc 0%,
      #f4faf7 100%
    );

  border: 1px dashed #dce6e2;

  font-size: 10px;
  color: #a0ada9;
}


/* CUSTOMER SOURCE */

.source-card {
  min-width: 0;
}

.source-placeholder {
  min-height: 270px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 18px;
  padding: 20px;

  border-radius: 9px;

  background: #f8fbfa;

  font-size: 10px;
  text-align: center;
  color: #99a7a3;
}


/* RESPONSIVE */

@media (max-width: 900px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-card {
    padding: 15px;
  }

  .chart-placeholder {
    height: 180px;
  }

  .source-placeholder {
    min-height: 180px;
  }
}


/* =========================
   BOTTOM DASHBOARD SECTION
========================= */

.bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}


/* ACTIVITY */

.text-button {
  border: 0;
  background: transparent;

  font-size: 9px;
  font-weight: 600;

  color: #0f8f69;
  cursor: pointer;
}

.activity-list {
  display: flex;
  flex-direction: column;

  margin-top: 15px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 12px 0;

  border-bottom: 1px solid #eef2f3;
}

.activity-item:last-child {
  border-bottom: 0;
}

.activity-avatar {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #e7f7ef;
  color: #0b8d66;

  font-size: 11px;
  font-weight: 700;
}

.activity-avatar.product {
  background: #edf4ff;
  color: #4b7fd5;
}

.activity-info {
  min-width: 0;
}

.activity-info p {
  font-size: 10px;
  line-height: 1.5;

  color: #495d61;
}

.activity-info strong {
  font-weight: 600;
  color: #1c373c;
}

.activity-info span {
  display: block;

  margin-top: 3px;

  font-size: 8px;
  color: #9aa6a9;
}


/* TASKS */

.task-list {
  display: flex;
  flex-direction: column;

  margin-top: 15px;
}

.task-item {
  min-height: 43px;

  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 9px;

  border-bottom: 1px solid #eef2f3;

  cursor: pointer;
}

.task-item:last-child {
  border-bottom: 0;
}

.task-item input {
  width: 14px;
  height: 14px;

  accent-color: #0d936c;
}

.task-item span {
  font-size: 9px;
  line-height: 1.45;

  color: #56696d;
}

.task-item strong {
  min-width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #e7f7ef;
  color: #0d8f68;

  font-size: 8px;
  font-weight: 600;
}


/* RESPONSIVE */

@media (max-width: 900px) {
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .bottom-grid {
    gap: 12px;
  }

  .activity-item {
    padding: 10px 0;
  }

  .task-item {
    min-height: 40px;
  }
}


.orders-table {
  margin-top: 18px;
  width: 100%;
  overflow: hidden;
  border: 1px solid #e8eef0;
  border-radius: 14px;
  background: #ffffff;
}

.orders-table-head,
.orders-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 1fr 1fr 1fr;
  align-items: center;
  column-gap: 20px;
  padding: 15px 18px;
}

.orders-table-head {
  background: #f7faf9;
  border-bottom: 1px solid #e8eef0;
}

.orders-table-head span {
  font-size: 12px;
  font-weight: 600;
  color: #718096;
}

.orders-table-row {
  border-bottom: 1px solid #edf2f2;
}

.orders-table-row:last-child {
  border-bottom: none;
}

.orders-table-row span {
  font-size: 13px;
  color: #24363b;
}

.order-number {
  font-weight: 600;
  color: #0b8f6a !important;
}

.order-total {
  font-weight: 600;
}

.orders-empty {
  padding: 28px 18px;
  text-align: center;
  font-size: 13px;
  color: #8b9ca1;
}


.payment-badge,
.order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: capitalize;
}

/* Payment status */

.payment-paid {
  background: #e8f7f1;
  color: #0b8f6a !important;
}

.payment-unpaid {
  background: #fff0f0;
  color: #d64545 !important;
}

.payment-pending {
  background: #fff7e8;
  color: #d78a17 !important;
}

.payment-failed,
.payment-refunded {
  background: #f4f4f5;
  color: #6b7280 !important;
}

/* Order status */

.order-new {
  background: #edf5ff;
  color: #3178c6 !important;
}

.order-processing {
  background: #f3efff;
  color: #7657c8 !important;
}

.order-shipped {
  background: #eef7ff;
  color: #2580b8 !important;
}

.order-completed {
  background: #e8f7f1;
  color: #0b8f6a !important;
}

.order-cancelled {
  background: #fff0f0;
  color: #d64545 !important;
}


.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 24, 29, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.order-modal {
  width: 100%;
  max-width: 620px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid #e8eef0;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #193139;
}

.modal-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #7b8d92;
}

.modal-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: #f3f7f6;
  color: #4f6368;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  background: #e9f1ef;
}


.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.save-order-button {
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  background: #0d8e68;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.save-order-button:hover {
  background: #0b795a;
}

.save-order-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.modal-body {
  padding: 22px 24px 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #42575d;
}

.form-group input,
.form-group select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  background: #ffffff;
  color: #24363b;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #0d8e68;
  box-shadow: 0 0 0 3px rgba(13, 142, 104, 0.08);
}

.order-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 13px;
  color: #64777c;
}

.order-summary strong {
  color: #24363b;
  font-size: 14px;
}

.order-summary.total {
  margin-top: 4px;
  padding: 14px 0;
  border-top: 1px solid #e8eef0;
}

.order-summary.total span {
  font-weight: 600;
  color: #24363b;
}

.order-summary.total strong {
  font-size: 18px;
  color: #0d8e68;
}


.orders-table-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.orders-table-row:hover {
  background: #f8fbfa;
}


.order-detail-modal {
  max-width: 680px;
}


.order-detail-customer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-bottom: 20px;
}

.order-detail-customer > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: #f7faf9;
  border-radius: 10px;
}

.order-detail-customer span {
  font-size: 11px;
  color: #7b8d92;
}

.order-detail-customer strong {
  font-size: 13px;
  color: #24363b;
}


.order-detail-section {
  border-top: 1px solid #e8eef0;
  padding-top: 18px;
}

.order-detail-section h3 {
  margin: 0 0 12px;
  font-size: 13px;
  color: #24363b;
}


.order-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f2;
}

.order-detail-item > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.order-detail-item strong {
  font-size: 13px;
  color: #24363b;
}

.order-detail-item span {
  font-size: 11px;
  color: #7b8d92;
}


.order-detail-totals {
  padding: 16px 0;
}

.order-detail-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}

.order-detail-totals span {
  color: #64777c;
}

.order-detail-totals strong {
  color: #24363b;
}

.order-detail-totals .grand-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #e8eef0;
}

.order-detail-totals .grand-total span {
  font-weight: 600;
  color: #24363b;
}

.order-detail-totals .grand-total strong {
  font-size: 18px;
  color: #0d8e68;
}


.order-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8eef0;
}


@media (max-width: 600px) {
  .order-detail-customer,
  .order-status-grid {
    grid-template-columns: 1fr;
  }
}


.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, #22c58b 0%, #149f73 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
}

.brand-text h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
}

.brand-text span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}


/* ===== FORCE WASAPGO BRAND SIZE ===== */

/* ===== WASAPGO BRAND SIZE ===== */

.sidebar .brand {
  gap: 9px !important;
  padding: 18px 16px 20px !important;
}

.sidebar .brand .brand-logo {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  font-size: 15px !important;
}

.sidebar .brand .brand-text h2 {
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
}

.sidebar .brand .brand-text span {
  font-size: 6px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.75px !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
}
/* ===== AI AGENTS V1 ===== */
.agents-page { padding-bottom: 60px; }

.agents-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: #7b8d92;
  font-size: 12px;
}

.agents-search {
  width: min(420px, 100%);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #dce6e8;
  border-radius: 12px;
  background: #fff;
}

.agents-search span { color: #7b8d92; }
.agents-search input {
  border: 0;
  outline: 0;
  flex: 1;
  font: inherit;
  color: #24363b;
  background: transparent;
}

.agent-primary-button,
.agent-save-button,
.agent-preview-button {
  border: 0;
  border-radius: 10px;
  background: #0d8e68;
  color: #fff;
  padding: 11px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.agent-save-button:disabled { opacity: .6; cursor: not-allowed; }
.agent-save-button.full { width: 100%; }

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

.agent-card {
  border: 1px solid #dfe8e9;
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 8px 26px rgba(23, 52, 58, .04);
}

.agent-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.agent-card-avatar,
.agent-editor-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f7f2;
  color: #0d8e68;
  font-size: 18px;
  font-weight: 700;
}

.agent-editor-avatar.small { width: 36px; height: 36px; font-size: 12px; }

.agent-card h3 { margin: 0; font-size: 15px; color: #17343a; }
.agent-card > p { margin: 5px 0 14px; color: #7b8d92; font-size: 12px; }

.agent-status-pill,
.agent-status-dot {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: capitalize;
}
.agent-status-pill.active,
.agent-status-dot.active { background: #e8f7f1; color: #0d8e68; }
.agent-status-pill.inactive,
.agent-status-dot.inactive { background: #f1f3f4; color: #6b7780; }

.agent-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 16px;
  border-top: 1px solid #edf2f2;
  color: #6f8287;
  font-size: 10px;
}

.agent-card-actions { display: grid; grid-template-columns: 1fr 42px 42px; gap: 8px; }
.agent-settings-button,
.agent-icon-button,
.agent-back-button {
  border: 1px solid #dce6e8;
  background: #fff;
  color: #344b51;
  border-radius: 9px;
  min-height: 38px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.agent-settings-button:hover,
.agent-icon-button:hover,
.agent-back-button:hover { background: #f7faf9; }
.agent-icon-button.danger { color: #d64545; }

.agents-empty { padding: 30px; text-align: center; color: #819298; }

.agent-editor-topbar,
.agent-editor-heading,
.agent-editor-actions {
  display: flex;
  align-items: center;
}

.agent-editor-topbar { justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.agent-editor-actions { gap: 10px; }
.agent-back-button { padding: 0 13px; }
.agent-editor-heading { gap: 14px; margin-bottom: 18px; }
.agent-editor-heading h1 { margin: 0; color: #17343a; font-size: 24px; }
.agent-editor-heading p { margin: 4px 0 0; color: #7b8d92; font-size: 12px; }

.agent-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #dfe8e9;
  margin-bottom: 20px;
}
.agent-tabs button {
  border: 0;
  background: transparent;
  padding: 11px 13px;
  color: #718489;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.agent-tabs button.active { color: #0d8e68; border-bottom-color: #0d8e68; }

.agent-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, .7fr);
  gap: 18px;
}
.agent-settings-card,
.agent-summary-card,
.knowledge-list-card,
.knowledge-add-card,
.agent-test-info,
.agent-chat-card { padding: 20px; }

.agent-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.form-group textarea {
  width: 100%;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  background: #fff;
  color: #24363b;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  outline: none;
  box-sizing: border-box;
}
.form-group textarea:focus { border-color: #0d8e68; box-shadow: 0 0 0 3px rgba(13, 142, 104, .08); }
.agent-large-field { margin-top: 4px; }
.field-hint { margin-top: 3px; color: #8a9ba0; font-size: 10px; }

.agent-summary-list { display: grid; gap: 0; }
.agent-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #edf2f2;
  font-size: 11px;
}
.agent-summary-list span { color: #7b8d92; }
.agent-summary-list strong { color: #24363b; text-transform: capitalize; text-align: right; }
.agent-preview-button { width: 100%; margin-top: 16px; background: #17343a; }

.agent-knowledge-layout,
.agent-test-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .75fr);
  gap: 18px;
}

.knowledge-list { display: grid; gap: 12px; }
.knowledge-item {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 12px;
  border: 1px solid #e3ebec;
  border-radius: 12px;
  padding: 14px;
  background: #fbfdfc;
}
.knowledge-item strong { display: block; color: #24363b; font-size: 12px; margin: 5px 0; }
.knowledge-item p { margin: 0; color: #6f8287; font-size: 11px; line-height: 1.6; white-space: pre-wrap; max-height: 86px; overflow: hidden; }
.knowledge-category { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: #e8f7f1; color: #0d8e68; font-size: 9px; text-transform: uppercase; font-weight: 700; }
.knowledge-delete { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #fff0f0; color: #d64545; cursor: pointer; }

.agent-test-layout { grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); }
.agent-test-note { padding: 14px; border-radius: 12px; background: #f4faf8; border: 1px solid #dcefe8; }
.agent-test-note strong { color: #0d8e68; font-size: 11px; }
.agent-test-note p { margin: 6px 0 0; color: #6f8287; font-size: 10px; line-height: 1.6; }
.agent-test-shortcuts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.agent-test-shortcuts button { border: 1px solid #dce6e8; background: #fff; border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 9px; cursor: pointer; color: #53686d; }

.agent-chat-card { display: flex; flex-direction: column; min-height: 560px; padding: 0; overflow: hidden; }
.agent-chat-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #e4ebec; }
.agent-chat-header > div:last-child { display: flex; flex-direction: column; }
.agent-chat-header strong { color: #24363b; font-size: 12px; }
.agent-chat-header span { color: #8a9ba0; font-size: 9px; }
.agent-chat-body { flex: 1; padding: 18px; background: #f7faf9; overflow-y: auto; }
.agent-chat-empty { display: grid; place-items: center; height: 100%; color: #96a5a9; font-size: 11px; }
.agent-message { display: flex; flex-direction: column; margin-bottom: 11px; max-width: 78%; }
.agent-message > div { padding: 10px 12px; border-radius: 12px; font-size: 11px; line-height: 1.55; }
.agent-message.user { margin-left: auto; align-items: flex-end; }
.agent-message.user > div { background: #0d8e68; color: #fff; border-bottom-right-radius: 4px; }
.agent-message.assistant { margin-right: auto; align-items: flex-start; }
.agent-message.assistant > div { background: #fff; color: #344b51; border: 1px solid #e1e9ea; border-bottom-left-radius: 4px; }
.agent-message span { margin-top: 3px; color: #8b9ba0; font-size: 8px; }
.agent-chat-input { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 14px; border-top: 1px solid #e4ebec; }
.agent-chat-input input { height: 40px; border: 1px solid #dce6e8; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 11px; outline: none; }
.agent-chat-input button { border: 0; border-radius: 9px; background: #0d8e68; color: #fff; padding: 0 16px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }

.agent-create-modal { max-width: 650px; }

@media (max-width: 1100px) {
  .agents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-editor-grid,
  .agent-knowledge-layout,
  .agent-test-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .agents-grid { grid-template-columns: 1fr; }
  .agent-form-grid { grid-template-columns: 1fr; }
  .agents-toolbar { align-items: stretch; flex-direction: column; }
  .agents-search { width: 100%; }
  .agent-editor-topbar { align-items: flex-start; }
  .agent-editor-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* ===== PRODUCTS MANAGEMENT V1 ===== */
.products-page { padding-bottom: 60px; }
.products-heading { align-items: center; }

.product-primary-button,
.product-secondary-button,
.product-action-button,
.products-empty-state button {
  border: 0;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .18s ease;
}

.product-primary-button {
  background: #0d8e68;
  color: #fff;
  padding: 11px 16px;
  box-shadow: 0 5px 14px rgba(13, 142, 104, .14);
}

.product-primary-button:hover { background: #0b795a; }
.product-primary-button:disabled { opacity: .6; cursor: not-allowed; }

.product-secondary-button {
  background: #f4f7f7;
  color: #52676c;
  padding: 11px 16px;
  border: 1px solid #e0e8e9;
}
.product-secondary-button:hover { background: #edf2f2; }

.product-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.product-stat-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #e3ebec;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 20px rgba(23, 52, 58, .035);
}

.product-stat-card span {
  display: block;
  color: #7a8c91;
  font-size: 10px;
  font-weight: 600;
}

.product-stat-card strong {
  display: block;
  margin-top: 4px;
  color: #17343a;
  font-size: 22px;
  line-height: 1.2;
}

.product-stat-card small {
  display: block;
  margin-top: 4px;
  color: #94a2a6;
  font-size: 9px;
}

.product-stat-card.warning { border-color: #f4e4be; background: #fffdf8; }
.product-stat-card.warning strong { color: #ba7815; }
.product-stat-card.danger { border-color: #f2d6d6; background: #fffafa; }
.product-stat-card.danger strong { color: #c94a4a; }

.products-card { padding: 0; overflow: hidden; }

.products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e6edee;
}

.products-search {
  width: min(360px, 100%);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  background: #fff;
}

.products-search span { color: #839499; font-size: 15px; }
.products-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #24363b;
  font-size: 11px;
}

.products-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.products-filters select {
  height: 40px;
  min-width: 128px;
  padding: 0 30px 0 10px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #53686d;
  font-size: 10px;
}

.products-table-wrap {
  width: 100%;
  overflow-x: hidden;
}

.products-table-head,
.products-table-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(150px, 1.55fr)
    minmax(70px, .72fr)
    minmax(90px, .85fr)
    minmax(72px, .72fr)
    minmax(88px, .82fr)
    minmax(68px, .68fr)
    minmax(112px, .9fr);
  align-items: center;
  gap: 8px;
  padding: 14px 14px;
  box-sizing: border-box;
}

.products-table-head {
  background: #f8fbfa;
  border-bottom: 1px solid #e6edee;
}

.products-table-head > span {
  color: #7b8d92;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.products-table-row {
  border-bottom: 1px solid #edf2f2;
  color: #41565c;
  font-size: 11px;
  transition: background .15s ease;
}
.products-table-row:hover { background: #fbfdfc; }
.products-table-row:last-child { border-bottom: 0; }

.products-table-head > *,
.products-table-row > * {
  min-width: 0;
}

.products-table-row > span,
.products-table-row > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-name-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-name-cell > div:last-child { min-width: 0; }
.product-name-cell strong {
  display: block;
  color: #20383e;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-name-cell small {
  display: block;
  margin-top: 2px;
  color: #91a0a4;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e9f7f2;
  color: #0d8e68;
  font-size: 12px;
  font-weight: 700;
}

.product-sku { color: #61747a; font-weight: 600; }
.product-price { color: #1e3b41; font-size: 11px; }

.product-stock-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.product-stock-cell > strong {
  min-width: 18px;
  color: #24363b;
  font-size: 11px;
  line-height: 1;
}
.product-stock-cell .stock-badge {
  flex-shrink: 0;
}

.stock-badge,
.product-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.stock-in { background: #e8f7f1; color: #0d8e68; }
.stock-low { background: #fff5dd; color: #bd7d16; }
.stock-out { background: #fff0f0; color: #d34d4d; }
.product-status-badge.active { background: #e8f7f1; color: #0d8e68; }
.product-status-badge.inactive { background: #eff2f3; color: #6f7d81; }

.product-actions { display: flex; gap: 6px; }
.product-action-button {
  min-height: 30px;
  padding: 0 9px;
  background: #f4f8f7;
  color: #3e595f;
  border: 1px solid #e0e8e9;
  font-size: 9px;
}
.product-action-button:hover { background: #eaf3f0; }
.product-action-button.danger { background: #fff7f7; color: #c94a4a; border-color: #f2dddd; }
.product-action-button.danger:hover { background: #ffeded; }

.products-empty-state {
  min-width: 720px;
  padding: 44px 20px;
  text-align: center;
  color: #89999e;
  font-size: 11px;
}
.products-empty-state strong { display: block; color: #435a60; margin-bottom: 4px; }
.products-empty-state p { margin: 0; }
.products-empty-state.error { color: #b94a4a; }
.products-empty-state button { margin-top: 10px; padding: 8px 12px; background: #17343a; color: #fff; }

.products-table-footer {
  padding: 11px 18px;
  border-top: 1px solid #edf2f2;
  background: #fbfdfc;
  color: #8a9a9e;
  font-size: 9px;
}

.product-modal { max-width: 720px; }
.product-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}
.product-form-wide { grid-column: 1 / -1; }
.product-form-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #f0cece;
  border-radius: 10px;
  background: #fff6f6;
  color: #b94343;
  font-size: 10px;
}

.product-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 6px;
}

@media (max-width: 1100px) {
  .product-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products-toolbar { align-items: stretch; flex-direction: column; }
  .products-search { width: 100%; }
}

@media (max-width: 900px) {
  .products-table-wrap { overflow-x: auto; }
  .products-table-head,
  .products-table-row {
    min-width: 760px;
  }
}

@media (max-width: 720px) {
  .products-heading { align-items: flex-start; gap: 14px; }
  .product-stats-grid { grid-template-columns: 1fr 1fr; }
  .products-filters { display: grid; grid-template-columns: 1fr; }
  .products-filters select { width: 100%; }
  .product-form-grid { grid-template-columns: 1fr; }
  .product-form-wide { grid-column: auto; }
}

/* ===== CONTACTS / CRM V1 ===== */
.contacts-page { padding-bottom: 60px; }
.contacts-heading { align-items: center; }

.contact-primary-button,
.contact-secondary-button,
.contact-action-button,
.contacts-empty-state button {
  border: 0;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .18s ease;
}

.contact-primary-button {
  background: #0d8e68;
  color: #fff;
  padding: 11px 16px;
  box-shadow: 0 5px 14px rgba(13, 142, 104, .14);
}
.contact-primary-button:hover { background: #0b795a; }
.contact-primary-button:disabled { opacity: .6; cursor: not-allowed; }

.contact-secondary-button {
  background: #f4f7f7;
  color: #52676c;
  padding: 11px 16px;
  border: 1px solid #e0e8e9;
}
.contact-secondary-button:hover { background: #edf2f2; }

.contact-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.contact-stat-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #e3ebec;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 20px rgba(23, 52, 58, .035);
}

.contact-stat-card span {
  display: block;
  color: #7a8c91;
  font-size: 10px;
  font-weight: 600;
}

.contact-stat-card strong {
  display: block;
  margin-top: 4px;
  color: #17343a;
  font-size: 22px;
  line-height: 1.2;
}

.contact-stat-card small {
  display: block;
  margin-top: 4px;
  color: #94a2a6;
  font-size: 9px;
}

.contact-stat-card.success { border-color: #d8eee6; background: #fbfffd; }
.contact-stat-card.success strong { color: #0d8e68; }
.contact-stat-card.info { border-color: #dce9f4; background: #fbfdff; }
.contact-stat-card.info strong { color: #3578a8; }

.contacts-card { padding: 0; overflow: hidden; }

.contacts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e6edee;
}

.contacts-search {
  width: min(390px, 100%);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  background: #fff;
}

.contacts-search span { color: #839499; font-size: 15px; }
.contacts-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #24363b;
  font-size: 11px;
}

.contacts-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.contacts-filters select {
  height: 40px;
  min-width: 140px;
  padding: 0 30px 0 10px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #53686d;
  font-size: 10px;
}

.contacts-table-wrap {
  width: 100%;
  overflow-x: hidden;
}

.contacts-table-head,
.contacts-table-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(150px, 1.55fr)
    minmax(105px, .9fr)
    minmax(85px, .72fr)
    minmax(62px, .55fr)
    minmax(95px, .88fr)
    minmax(90px, .82fr)
    minmax(145px, 1.05fr);
  align-items: center;
  gap: 8px;
  padding: 14px;
  box-sizing: border-box;
}

.contacts-table-head {
  background: #f8fbfa;
  border-bottom: 1px solid #e6edee;
}

.contacts-table-head > span {
  color: #7b8d92;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.contacts-table-row {
  border-bottom: 1px solid #edf2f2;
  color: #41565c;
  font-size: 10.5px;
  cursor: pointer;
  transition: background .15s ease;
}
.contacts-table-row:hover { background: #fbfdfc; }
.contacts-table-row:last-child { border-bottom: 0; }

.contacts-table-head > *,
.contacts-table-row > * { min-width: 0; }

.contacts-table-row > span,
.contacts-table-row > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-name-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-name-cell > div:last-child { min-width: 0; }
.contact-name-cell strong {
  display: block;
  color: #20383e;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-name-cell small {
  display: block;
  margin-top: 2px;
  color: #91a0a4;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-avatar,
.contact-detail-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #e9f7f2;
  color: #0d8e68;
  font-weight: 700;
}
.contact-avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 11px; }
.contact-detail-avatar { width: 54px; height: 54px; border-radius: 16px; font-size: 17px; }

.contact-phone { color: #52676c; font-weight: 600; }
.contact-orders-count { color: #24363b; font-size: 11px; }
.contact-spent { color: #0d8e68; font-size: 10.5px; }
.contact-last-interaction { color: #718388; font-size: 9.5px; }
.contact-muted { color: #9aa8ab; }

.contact-label-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5ff;
  color: #3d73a1;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-actions { display: flex; gap: 5px; }
.contact-action-button {
  min-height: 30px;
  padding: 0 8px;
  background: #f4f8f7;
  color: #3e595f;
  border: 1px solid #e0e8e9;
  font-size: 8.5px;
}
.contact-action-button:hover { background: #eaf3f0; }
.contact-action-button.danger { background: #fff7f7; color: #c94a4a; border-color: #f2dddd; }
.contact-action-button.danger:hover { background: #ffeded; }

.contacts-empty-state {
  min-width: 760px;
  padding: 44px 20px;
  text-align: center;
  color: #89999e;
  font-size: 11px;
}
.contacts-empty-state strong { display: block; color: #435a60; margin-bottom: 4px; }
.contacts-empty-state p { margin: 0; }
.contacts-empty-state.error { color: #b94a4a; }
.contacts-empty-state button { margin-top: 10px; padding: 8px 12px; background: #17343a; color: #fff; }

.contacts-table-footer {
  padding: 11px 18px;
  border-top: 1px solid #edf2f2;
  background: #fbfdfc;
  color: #8a9a9e;
  font-size: 9px;
}

.contact-modal { max-width: 720px; }
.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
}
.contact-form-wide { grid-column: 1 / -1; }
.contact-form-error,
.contact-detail-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #f0cece;
  border-radius: 10px;
  background: #fff6f6;
  color: #b94343;
  font-size: 10px;
}

.contact-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 14px;
}

.contact-detail-modal { max-width: 760px; }
.contact-detail-loading {
  padding: 34px 0;
  text-align: center;
  color: #839499;
  font-size: 11px;
}

.contact-detail-profile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8eef0;
}

.contact-detail-name { min-width: 0; flex: 1; }
.contact-detail-name h3 { margin: 0; color: #20383e; font-size: 16px; }
.contact-detail-name p { margin: 3px 0 0; color: #556a70; font-size: 11px; }
.contact-detail-name span { display: block; margin-top: 2px; color: #8b999d; font-size: 9.5px; }

.contact-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.contact-detail-stats > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e4ebec;
  border-radius: 11px;
  background: #f9fbfb;
}
.contact-detail-stats span {
  display: block;
  color: #839499;
  font-size: 8px;
  font-weight: 600;
}
.contact-detail-stats strong {
  display: block;
  margin-top: 4px;
  color: #24363b;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-detail-section {
  padding: 17px 0;
  border-top: 1px solid #e8eef0;
}
.contact-detail-section-header { margin-bottom: 10px; }
.contact-detail-section-header h3 { margin: 0; color: #24363b; font-size: 12px; }
.contact-detail-section-header p { margin: 2px 0 0; color: #8b999d; font-size: 9px; }

.contact-notes-box {
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #e4ebec;
  border-radius: 10px;
  background: #fbfdfc;
  color: #52676c;
  font-size: 10px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.contact-order-empty {
  padding: 20px;
  text-align: center;
  border: 1px dashed #dfe8e9;
  border-radius: 10px;
  color: #8b999d;
  font-size: 10px;
}

.contact-order-list {
  border: 1px solid #e4ebec;
  border-radius: 11px;
  overflow: hidden;
}
.contact-order-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.4fr) 90px 78px 88px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid #edf2f2;
}
.contact-order-row:last-child { border-bottom: 0; }
.contact-order-row > div strong { display: block; color: #24363b; font-size: 10px; }
.contact-order-row > div span { display: block; margin-top: 2px; color: #8a999d; font-size: 8px; }
.contact-order-row > strong { color: #20383e; font-size: 10px; }

@media (max-width: 1100px) {
  .contact-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacts-toolbar { align-items: stretch; flex-direction: column; }
  .contacts-search { width: 100%; }
  .contact-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 950px) {
  .contacts-table-wrap { overflow-x: auto; }
  .contacts-table-head,
  .contacts-table-row { min-width: 820px; }
}

@media (max-width: 720px) {
  .contacts-heading { align-items: flex-start; gap: 14px; }
  .contact-stats-grid { grid-template-columns: 1fr 1fr; }
  .contacts-filters { display: grid; grid-template-columns: 1fr; }
  .contacts-filters select { width: 100%; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-form-wide { grid-column: auto; }
  .contact-detail-stats { grid-template-columns: 1fr 1fr; }
  .contact-order-row { grid-template-columns: 1fr 82px; }
  .contact-order-row .payment-badge,
  .contact-order-row .order-badge { margin-top: 4px; }
}

/* ===== ORDERS V2 ===== */
.orders-v2-page { padding-bottom: 64px; }
.orders-v2-heading { align-items: center; }

.order-v2-primary-button,
.order-v2-add-item,
.order-v2-remove-item,
.order-v2-empty-state button {
  border: 0;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: .18s ease;
}

.order-v2-primary-button {
  background: #0d8e68;
  color: #fff;
  padding: 11px 16px;
  font-size: 12px;
  box-shadow: 0 5px 14px rgba(13, 142, 104, .14);
}
.order-v2-primary-button:hover { background: #0b795a; }
.order-v2-primary-button:disabled { opacity: .6; cursor: not-allowed; }

.order-v2-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.order-v2-stat-card {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #e3ebec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(23, 52, 58, .035);
}
.order-v2-stat-card span {
  display: block;
  color: #7a8c91;
  font-size: 10px;
  font-weight: 600;
}
.order-v2-stat-card strong {
  display: block;
  margin-top: 4px;
  color: #17343a;
  font-size: 22px;
  line-height: 1.2;
}
.order-v2-stat-card small {
  display: block;
  margin-top: 4px;
  color: #94a2a6;
  font-size: 9px;
}
.order-v2-stat-card.success { border-color: #d8eee6; background: #fbfffd; }
.order-v2-stat-card.success strong { color: #0d8e68; }
.order-v2-stat-card.info { border-color: #dce9f4; background: #fbfdff; }
.order-v2-stat-card.info strong { color: #3578a8; }
.order-v2-stat-card.warning { border-color: #f0dfb6; background: #fffdf8; }
.order-v2-stat-card.warning strong { color: #b67c08; }

.order-v2-card { padding: 0; overflow: hidden; }

.order-v2-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e6edee;
}

.order-v2-search {
  width: min(390px, 100%);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  background: #fff;
}
.order-v2-search span { color: #839499; font-size: 15px; }
.order-v2-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #24363b;
  font-size: 11px;
}

.order-v2-filters {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.order-v2-filters select {
  height: 40px;
  min-width: 132px;
  padding: 0 30px 0 10px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #53686d;
  font-size: 9.5px;
}

.order-v2-table-wrap { width: 100%; overflow-x: auto; }
.order-v2-table-head,
.order-v2-table-row {
  display: grid;
  grid-template-columns:
    minmax(135px, 1.15fr)
    minmax(130px, 1.2fr)
    minmax(86px, .72fr)
    minmax(82px, .7fr)
    minmax(90px, .75fr)
    minmax(86px, .72fr)
    minmax(100px, .88fr)
    minmax(82px, .7fr);
  align-items: center;
  gap: 8px;
  min-width: 920px;
  padding: 13px 14px;
  box-sizing: border-box;
}
.order-v2-table-head {
  background: #f8fbfa;
  border-bottom: 1px solid #e6edee;
}
.order-v2-table-head > span {
  color: #7b8d92;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.order-v2-table-row {
  border-bottom: 1px solid #edf2f2;
  color: #41565c;
  font-size: 10px;
  cursor: pointer;
  transition: background .15s ease;
}
.order-v2-table-row:hover { background: #fbfdfc; }
.order-v2-table-row:last-child { border-bottom: 0; }
.order-v2-table-row > * { min-width: 0; }

.order-v2-number-cell,
.order-v2-customer-cell { min-width: 0; }
.order-v2-number-cell strong,
.order-v2-customer-cell strong {
  display: block;
  color: #20383e;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-v2-number-cell small,
.order-v2-customer-cell small {
  display: block;
  margin-top: 2px;
  color: #91a0a4;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-v2-total { color: #17343a; font-size: 10.5px; }
.order-v2-date { color: #7d8e93; font-size: 9px; white-space: nowrap; }

.order-v2-source,
.fulfillment-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.source-manual { background: #f0f3f4; color: #5f7479; }
.source-whatsapp { background: #e9f8f1; color: #0d8e68; }
.source-ai { background: #f1edff; color: #6d55b6; }
.source-woocommerce { background: #f4efff; color: #7851a9; }

.fulfillment-unfulfilled { background: #f2f4f5; color: #6a7c81; }
.fulfillment-ready_to_ship { background: #fff7e7; color: #b67c08; }
.fulfillment-shipped { background: #edf5ff; color: #3578a8; }
.fulfillment-delivered { background: #e8f7f1; color: #0d8e68; }
.fulfillment-failed,
.fulfillment-returned,
.fulfillment-cancelled { background: #fff0f0; color: #c94a4a; }

.order-v2-empty-state {
  min-width: 920px;
  padding: 44px 20px;
  text-align: center;
  color: #89999e;
  font-size: 11px;
}
.order-v2-empty-state strong { display: block; color: #435a60; margin-bottom: 4px; }
.order-v2-empty-state p { margin: 0; }
.order-v2-empty-state.error { color: #b94a4a; }
.order-v2-empty-state button { margin-top: 10px; padding: 8px 12px; background: #17343a; color: #fff; }
.order-v2-table-footer {
  padding: 11px 18px;
  border-top: 1px solid #edf2f2;
  background: #fbfdfc;
  color: #8a9a9e;
  font-size: 9px;
}

.order-v2-create-modal { max-width: 760px; max-height: min(90vh, 860px); overflow-y: auto; }
.order-v2-detail-modal { max-width: 1040px; width: min(1040px, calc(100vw - 32px)); max-height: 92vh; overflow: hidden; }
.order-v2-detail-body { max-height: calc(92vh - 88px); overflow-y: auto; }

.order-v2-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.order-v2-form-wide { grid-column: 1 / -1; }
.order-v2-form-error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #f0cece;
  border-radius: 10px;
  background: #fff6f6;
  color: #b94343;
  font-size: 10px;
}

.order-v2-modal-section {
  padding: 18px 0;
  border-top: 1px solid #e8eef0;
}
.order-v2-modal-section:first-of-type { border-top: 0; padding-top: 2px; }
.order-v2-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.order-v2-section-heading h3 { margin: 0; color: #24363b; font-size: 12px; }
.order-v2-section-heading p { margin: 2px 0 0; color: #8b999d; font-size: 9px; }

.order-v2-add-item {
  padding: 8px 11px;
  background: #eef8f4;
  color: #0d8e68;
  font-size: 9px;
}
.order-v2-add-item:hover { background: #e3f3ed; }

.order-v2-items-editor { display: flex; flex-direction: column; gap: 8px; }
.order-v2-item-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 34px;
  gap: 8px;
}
.order-v2-item-editor-row select,
.order-v2-item-editor-row input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #dce6e8;
  border-radius: 9px;
  outline: 0;
  background: #fff;
  color: #24363b;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  box-sizing: border-box;
}
.order-v2-item-editor-row select:focus,
.order-v2-item-editor-row input:focus { border-color: #0d8e68; box-shadow: 0 0 0 3px rgba(13, 142, 104, .08); }
.order-v2-remove-item {
  width: 34px;
  height: 40px;
  background: #fff3f3;
  color: #c94a4a;
  font-size: 16px;
}
.order-v2-remove-item:disabled { opacity: .35; cursor: not-allowed; }

.order-v2-create-summary {
  margin-top: 4px;
  padding: 14px 16px;
  border: 1px solid #e4ebec;
  border-radius: 11px;
  background: #fbfdfc;
}
.order-v2-create-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  color: #718388;
  font-size: 10px;
}
.order-v2-create-summary strong { color: #24363b; }
.order-v2-create-summary .total {
  margin-top: 7px;
  padding-top: 10px;
  border-top: 1px solid #e5ecec;
  font-weight: 700;
}
.order-v2-create-summary .total span { color: #24363b; }
.order-v2-create-summary .total strong { color: #0d8e68; font-size: 17px; }

.order-v2-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 16px;
}

.order-v2-detail-loading {
  padding: 42px 0;
  text-align: center;
  color: #839499;
  font-size: 11px;
}
.order-v2-detail-hero {
  display: grid;
  grid-template-columns: 1.3fr .85fr .85fr;
  gap: 10px;
  padding-bottom: 18px;
}
.order-v2-detail-hero > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #e4ebec;
  border-radius: 11px;
  background: #f9fbfb;
}
.order-v2-detail-hero span,
.order-v2-detail-hero small { display: block; color: #87979b; font-size: 8px; }
.order-v2-detail-hero strong {
  display: block;
  margin: 3px 0;
  color: #24363b;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-v2-detail-hero .money { color: #0d8e68; font-size: 15px; }

.order-v2-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 18px;
}
.order-v2-detail-main { min-width: 0; }
.order-v2-detail-side { min-width: 0; }

.order-v2-detail-items {
  border: 1px solid #e4ebec;
  border-radius: 11px;
  overflow: hidden;
}
.order-v2-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border-bottom: 1px solid #edf2f2;
}
.order-v2-detail-item:last-child { border-bottom: 0; }
.order-v2-detail-item > div { min-width: 0; }
.order-v2-detail-item > div strong { display: block; color: #24363b; font-size: 10px; }
.order-v2-detail-item > div span { display: block; margin-top: 2px; color: #87979b; font-size: 8px; }
.order-v2-detail-item > strong { flex-shrink: 0; color: #20383e; font-size: 10px; }

.order-v2-detail-totals { padding-top: 11px; }
.order-v2-detail-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: #718388;
  font-size: 9.5px;
}
.order-v2-detail-totals strong { color: #24363b; }
.order-v2-detail-totals .total {
  margin-top: 6px;
  padding-top: 9px;
  border-top: 1px solid #e8eef0;
  font-weight: 700;
}
.order-v2-detail-totals .total strong { color: #0d8e68; font-size: 15px; }

.order-v2-side-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #e4ebec;
  border-radius: 12px;
  background: #fbfdfc;
}
.order-v2-side-card h3 { margin: 0 0 13px; color: #24363b; font-size: 11px; }
.order-v2-save-detail { width: 100%; margin-top: 4px; }

.order-v2-meta-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #edf2f2;
  font-size: 8.5px;
}
.order-v2-meta-row:last-child { border-bottom: 0; }
.order-v2-meta-row span { color: #839499; }
.order-v2-meta-row strong { max-width: 155px; text-align: right; color: #334b51; overflow-wrap: anywhere; }

.order-v2-timeline-section { margin-top: 4px; }
.order-v2-timeline { position: relative; }
.order-v2-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  padding: 0 0 15px;
}
.order-v2-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  bottom: -2px;
  width: 1px;
  background: #dfe8e9;
}
.order-v2-timeline-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border: 3px solid #d9f0e8;
  border-radius: 50%;
  background: #0d8e68;
  box-sizing: border-box;
}
.order-v2-timeline-item strong { display: block; color: #30484e; font-size: 9.5px; }
.order-v2-timeline-item p { margin: 2px 0; color: #718388; font-size: 8.5px; line-height: 1.5; }
.order-v2-timeline-item span { color: #9aa7aa; font-size: 7.5px; }
.order-v2-timeline-empty { color: #8b999d; font-size: 9px; }

@media (max-width: 1180px) {
  .order-v2-toolbar { flex-direction: column; align-items: stretch; }
  .order-v2-search { width: 100%; }
  .order-v2-filters { justify-content: flex-start; }
  .order-v2-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .order-v2-detail-layout { grid-template-columns: 1fr; }
  .order-v2-detail-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .order-v2-side-card { margin-bottom: 0; }
}

@media (max-width: 720px) {
  .orders-v2-heading { align-items: flex-start; gap: 14px; }
  .order-v2-stats-grid { grid-template-columns: 1fr 1fr; }
  .order-v2-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .order-v2-filters select { width: 100%; min-width: 0; }
  .order-v2-form-grid { grid-template-columns: 1fr; }
  .order-v2-form-wide { grid-column: auto; }
  .order-v2-detail-hero { grid-template-columns: 1fr; }
  .order-v2-detail-side { grid-template-columns: 1fr; }
  .order-v2-item-editor-row { grid-template-columns: minmax(0, 1fr) 70px 34px; }
}

/* Orders V2: keep payment/order status badges visually consistent with Source & Fulfilment */
.order-v2-table-row .payment-badge,
.order-v2-table-row .order-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 8px !important;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* ===== AUTOMATION FOUNDATION V1 ===== */
.automation-page { padding-bottom: 60px; }
.automation-heading { align-items: center; }

.automation-primary-button,
.automation-queue-button,
.automation-cancel-button,
.automation-row-actions button,
.automation-action-heading button {
  border: 0;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: .18s ease;
}

.automation-primary-button {
  padding: 11px 16px;
  background: #0d8e68;
  color: #fff;
  font-size: 12px;
  box-shadow: 0 5px 14px rgba(13, 142, 104, .14);
}
.automation-primary-button:hover { background: #0b795a; }

.automation-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.automation-stat-card {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #e3ebec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(23, 52, 58, .035);
}
.automation-stat-card span {
  display: block;
  color: #7a8c91;
  font-size: 10px;
  font-weight: 600;
}
.automation-stat-card strong {
  display: block;
  margin-top: 4px;
  color: #17343a;
  font-size: 22px;
  line-height: 1.2;
}
.automation-stat-card small {
  display: block;
  margin-top: 4px;
  color: #94a2a6;
  font-size: 9px;
}
.automation-stat-green { border-color: #d8eee6; background: #fbfffd; }
.automation-stat-green strong { color: #0d8e68; }
.automation-stat-blue { border-color: #dce9f4; background: #fbfdff; }
.automation-stat-blue strong { color: #3578a8; }
.automation-stat-red { border-color: #f2d6d6; background: #fffafa; }
.automation-stat-red strong { color: #c94a4a; }

.automation-workspace-card,
.automation-runs-card {
  overflow: hidden;
  border: 1px solid #e3ebec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(23, 52, 58, .035);
}

.automation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e6edee;
}
.automation-search {
  width: min(390px, 100%);
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  background: #fff;
}
.automation-search span { color: #839499; font-size: 15px; }
.automation-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #24363b;
  font-size: 11px;
}
.automation-toolbar-actions { display: flex; gap: 8px; align-items: center; }
.automation-toolbar-actions select {
  height: 40px;
  min-width: 135px;
  padding: 0 30px 0 10px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  color: #53686d;
  font-size: 10px;
}
.automation-queue-button {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #dce6e8;
  background: #f8fbfa;
  color: #4b6368;
  font-size: 10px;
}
.automation-queue-button:hover { background: #edf5f2; color: #0d8e68; }
.automation-queue-button:disabled { opacity: .55; cursor: not-allowed; }

.automation-error-box {
  margin: 14px 18px;
  padding: 10px 12px;
  border: 1px solid #f1d2d2;
  border-radius: 10px;
  background: #fff6f6;
  color: #b94343;
  font-size: 10px;
}

.automation-table-head,
.automation-table-row {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(180px, 1.6fr)
    minmax(100px, .85fr)
    minmax(90px, .8fr)
    minmax(145px, 1.25fr)
    minmax(72px, .6fr)
    minmax(62px, .5fr)
    minmax(105px, .78fr);
  align-items: center;
  gap: 8px;
  padding: 13px 14px;
  box-sizing: border-box;
}
.automation-table-head {
  background: #f7faf9;
  border-bottom: 1px solid #e6edee;
}
.automation-table-head span {
  color: #73868b;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.automation-table-row {
  min-height: 68px;
  border-bottom: 1px solid #edf2f2;
}
.automation-table-row:last-child { border-bottom: 0; }
.automation-table-row:hover { background: #fbfdfc; }

.automation-name-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.automation-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eaf7f2;
  color: #0d8e68;
}
.automation-icon svg { width: 16px; height: 16px; }
.automation-name-cell > div:last-child { min-width: 0; }
.automation-name-cell strong {
  display: block;
  overflow: hidden;
  color: #263e44;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-name-cell span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #8a999d;
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-trigger-badge,
.automation-actions-summary span,
.automation-run-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  white-space: nowrap;
}
.automation-trigger-badge {
  padding: 4px 7px;
  background: #eef4ff;
  color: #4d70a9;
  font-size: 7.5px;
  font-weight: 700;
}
.automation-muted-cell { color: #718388; font-size: 8.5px; }
.automation-actions-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.automation-actions-summary span {
  padding: 3px 6px;
  background: #f1f5f4;
  color: #53686d;
  font-size: 7px;
  font-weight: 600;
}
.automation-actions-summary small { color: #8b999d; font-size: 7px; }

.automation-run-cell strong {
  display: block;
  color: #29434a;
  font-size: 10px;
}
.automation-run-cell span {
  display: block;
  margin-top: 2px;
  color: #96a3a6;
  font-size: 7px;
  line-height: 1.35;
}

.automation-toggle {
  position: relative;
  width: 34px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d8e0e1;
  cursor: pointer;
  transition: .18s ease;
}
.automation-toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
  transition: .18s ease;
}
.automation-toggle.active { background: #0d8e68; }
.automation-toggle.active span { transform: translateX(16px); }

.automation-row-actions { display: flex; gap: 5px; }
.automation-row-actions button {
  padding: 6px 8px;
  border: 1px solid #dde6e7;
  background: #f8fbfa;
  color: #4d646a;
  font-size: 8px;
}
.automation-row-actions button:hover { background: #edf5f2; }
.automation-row-actions button.danger {
  border-color: #f2d6d6;
  background: #fff6f6;
  color: #c94a4a;
}

.automation-empty {
  padding: 26px 18px;
  text-align: center;
  color: #8b999d;
  font-size: 10px;
}

.automation-runs-card { margin-top: 18px; }
.automation-section-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid #e6edee;
}
.automation-section-header h3 { margin: 0; color: #263e44; font-size: 12px; }
.automation-section-header p { margin: 3px 0 0; color: #8b999d; font-size: 9px; }
.automation-run-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 145px;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid #edf2f2;
}
.automation-run-row:last-child { border-bottom: 0; }
.automation-run-status {
  justify-content: center;
  padding: 4px 7px;
  background: #f1f5f4;
  color: #607579;
  font-size: 7.5px;
  font-weight: 700;
  text-transform: capitalize;
}
.automation-run-status.success { background: #e8f7f1; color: #0d8e68; }
.automation-run-status.failed { background: #fff0f0; color: #c94a4a; }
.automation-run-status.skipped { background: #f3f5f6; color: #77878b; }
.automation-run-row > div strong { display: block; color: #30484e; font-size: 9.5px; }
.automation-run-row > div span { display: block; margin-top: 2px; color: #8b999d; font-size: 8px; }
.automation-run-row time { text-align: right; color: #8b999d; font-size: 8px; }

.automation-modal {
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
}
.automation-modal-body { padding: 20px 24px 24px; }
.automation-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.automation-form-wide { grid-column: 1 / -1; }
.automation-modal .form-group textarea {
  min-height: 72px;
  padding: 11px 12px;
  resize: vertical;
}

.automation-action-builder {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid #e8eef0;
}
.automation-action-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.automation-action-heading h3 { margin: 0; color: #2d474d; font-size: 11px; }
.automation-action-heading p { margin: 3px 0 0; color: #8b999d; font-size: 8.5px; }
.automation-action-heading button {
  padding: 7px 10px;
  border: 1px solid #dce8e4;
  background: #f2faf7;
  color: #0d8e68;
  font-size: 9px;
}
.automation-action-row {
  display: grid;
  grid-template-columns: 28px minmax(160px, .9fr) minmax(180px, 1.2fr) 34px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.automation-step-number {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eef7f4;
  color: #0d8e68;
  font-size: 9px;
  font-weight: 700;
}
.automation-action-row select,
.automation-action-row input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #dce6e8;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: #334b51;
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  box-sizing: border-box;
}
.automation-action-row select:focus,
.automation-action-row input:focus { border-color: #0d8e68; }
.automation-remove-action {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #fff3f3;
  color: #d05a5a;
  font-size: 16px;
  cursor: pointer;
}
.automation-remove-action:disabled { opacity: .35; cursor: not-allowed; }

.automation-active-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #e2ebec;
  border-radius: 10px;
  background: #fbfdfc;
  cursor: pointer;
}
.automation-active-checkbox input { margin-top: 2px; accent-color: #0d8e68; }
.automation-active-checkbox strong { display: block; color: #30484e; font-size: 9.5px; }
.automation-active-checkbox small { display: block; margin-top: 2px; color: #87979b; font-size: 8px; }

.automation-modal-footer { gap: 8px; }
.automation-cancel-button {
  padding: 11px 16px;
  border: 1px solid #dce6e8;
  background: #f5f8f8;
  color: #607579;
  font-size: 10px;
}

@media (max-width: 1180px) {
  .automation-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .automation-toolbar { flex-direction: column; align-items: stretch; }
  .automation-search { width: 100%; }
  .automation-table { overflow-x: auto; }
  .automation-table-head,
  .automation-table-row { min-width: 860px; }
}

@media (max-width: 720px) {
  .automation-heading { align-items: flex-start; gap: 12px; }
  .automation-stats-grid { grid-template-columns: 1fr 1fr; }
  .automation-toolbar-actions { flex-wrap: wrap; }
  .automation-toolbar-actions select { flex: 1; }
  .automation-form-grid { grid-template-columns: 1fr; }
  .automation-form-wide { grid-column: auto; }
  .automation-action-row { grid-template-columns: 28px minmax(0, 1fr) 34px; }
  .automation-action-row > select:first-of-type { grid-column: 2 / 3; }
  .automation-action-row > select:nth-of-type(2),
  .automation-action-row > input { grid-column: 2 / 3; }
  .automation-remove-action { grid-column: 3; grid-row: 1; }
  .automation-run-row { grid-template-columns: 64px minmax(0, 1fr); }
  .automation-run-row time { grid-column: 2; text-align: left; }
}

/* =========================================
   SHIPPING / FULFILMENT V1
========================================= */
.shipping-page {
  padding-bottom: 70px;
}

.shipping-heading {
  align-items: center;
}

.shipping-refresh-button,
.shipping-create-button,
.shipping-view-button,
.shipping-save-button,
.shipping-status-actions button {
  border: 0;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.shipping-refresh-button {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #dce7e8;
  border-radius: 10px;
  background: #fff;
  color: #486068;
  font-size: 12px;
  font-weight: 600;
}

.shipping-provider-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid #dce8e8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 52, 58, 0.04);
}

.shipping-provider-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #eef8f5;
  color: #0b936c;
  font-size: 13px;
  font-weight: 800;
}

.shipping-provider-info {
  min-width: 0;
}

.shipping-provider-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shipping-provider-title-row strong {
  color: #17323a;
  font-size: 14px;
}

.shipping-provider-info p {
  max-width: 760px;
  margin: 4px 0 0;
  color: #75888e;
  font-size: 11px;
  line-height: 1.7;
}

.shipping-provider-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff5e6;
  color: #b77c08;
  font-size: 9px;
  font-weight: 700;
}

.shipping-provider-status.connected {
  background: #e6f7f1;
  color: #0b8e68;
}

.shipping-provider-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.shipping-provider-meta span {
  color: #94a3a7;
  font-size: 9px;
}

.shipping-provider-meta strong {
  color: #344e55;
  font-size: 11px;
}

.shipping-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.shipping-stat-card {
  min-height: 98px;
  padding: 17px 18px;
  border: 1px solid #dfe7e8;
  border-radius: 15px;
  background: #fff;
}

.shipping-stat-card span {
  display: block;
  color: #71858a;
  font-size: 10px;
  font-weight: 600;
}

.shipping-stat-card strong {
  display: block;
  margin-top: 5px;
  color: #15343b;
  font-size: 22px;
  line-height: 1;
}

.shipping-stat-card small {
  display: block;
  margin-top: 8px;
  color: #96a6aa;
  font-size: 9px;
}

.shipping-stat-amber {
  border-color: #f0d797;
  background: #fffdf8;
}

.shipping-stat-amber strong { color: #b87a06; }
.shipping-stat-blue { border-color: #d8e8f5; background: #fbfdff; }
.shipping-stat-blue strong { color: #3979ad; }
.shipping-stat-green { border-color: #cfe9df; background: #fbfffd; }
.shipping-stat-green strong { color: #0b936c; }

.shipping-error-box {
  margin-bottom: 16px;
  padding: 11px 13px;
  border: 1px solid #f1cccc;
  border-radius: 10px;
  background: #fff6f6;
  color: #c34a4a;
  font-size: 11px;
}

.shipping-section-card {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid #dde7e8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 52, 58, 0.035);
}

.shipping-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px;
  border-bottom: 1px solid #e7edef;
}

.shipping-section-header h3 {
  margin: 0;
  color: #18343b;
  font-size: 13px;
}

.shipping-section-header p {
  margin: 3px 0 0;
  color: #839499;
  font-size: 10px;
}

.shipping-section-header > span {
  color: #74868b;
  font-size: 10px;
  font-weight: 600;
}

.shipping-ready-head,
.shipping-ready-row {
  display: grid;
  grid-template-columns: 1.15fr 1.2fr 1.25fr .7fr .78fr 1fr;
  align-items: center;
  column-gap: 14px;
  padding: 12px 15px;
}

.shipping-ready-head {
  background: #f8fbfa;
  border-bottom: 1px solid #e4ecec;
}

.shipping-ready-head span,
.shipping-table-head span {
  color: #718287;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.shipping-ready-row {
  min-height: 58px;
  border-bottom: 1px solid #edf1f2;
}

.shipping-ready-row:last-child { border-bottom: 0; }
.shipping-ready-row strong { color: #18343b; font-size: 10px; }
.shipping-ready-row small { display: block; margin-top: 2px; color: #98a6aa; font-size: 8px; }

.shipping-address-cell span {
  display: block;
  color: #4d6268;
  font-size: 9px;
}

.shipping-readiness {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
}

.shipping-readiness.ready { background: #e6f7f1; color: #0b8e68; }
.shipping-readiness.missing { background: #fff0f0; color: #c94a4a; }

.shipping-create-button {
  min-height: 31px;
  padding: 0 10px;
  border-radius: 8px;
  background: #0d9971;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
}

.shipping-create-button:disabled {
  background: #edf2f2;
  color: #9caaad;
  cursor: not-allowed;
}

.shipping-list-header {
  align-items: flex-end;
}

.shipping-list-tools {
  display: flex;
  align-items: center;
  gap: 9px;
}

.shipping-search {
  width: 245px;
  height: 37px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid #dce6e8;
  border-radius: 9px;
  background: #fff;
}

.shipping-search span { color: #799096; font-size: 12px; }
.shipping-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  color: #314a51;
  font-size: 10px;
}

.shipping-list-tools select {
  height: 37px;
  padding: 0 30px 0 11px;
  border: 1px solid #dce6e8;
  border-radius: 9px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  color: #4f6369;
  font-size: 9px;
}

.shipping-table-head,
.shipping-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.25fr .85fr 1fr .8fr .55fr;
  align-items: center;
  column-gap: 12px;
  padding: 12px 15px;
}

.shipping-table-head {
  background: #f8fbfa;
  border-bottom: 1px solid #e4ecec;
}

.shipping-table-row {
  min-height: 58px;
  border-bottom: 1px solid #edf1f2;
}

.shipping-table-row:last-child { border-bottom: 0; }
.shipping-table-row strong { color: #17333a; font-size: 9.5px; }
.shipping-table-row span { color: #5e747a; font-size: 9px; }
.shipping-table-row small { display: block; margin-top: 2px; color: #98a6aa; font-size: 8px; }
.shipping-tracking-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shipment-status-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 8px !important;
  font-weight: 700;
}

.shipment-draft,
.shipment-ready,
.shipment-booked { background: #fff6e5; color: #ae7608 !important; }
.shipment-picked_up,
.shipment-in_transit { background: #eaf4ff; color: #3578ad !important; }
.shipment-delivered { background: #e6f7f1; color: #0b8e68 !important; }
.shipment-failed,
.shipment-cancelled,
.shipment-returned { background: #fff0f0; color: #c94a4a !important; }

.shipping-view-button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #dce6e8;
  border-radius: 8px;
  background: #fff;
  color: #486067;
  font-size: 8.5px;
  font-weight: 600;
}

.shipping-empty {
  padding: 26px 18px;
  text-align: center;
  color: #91a0a4;
  font-size: 10px;
}

.shipping-empty.compact { padding: 10px 0; text-align: left; }

.shipping-detail-modal {
  max-width: 760px;
  max-height: 90vh;
  overflow: auto;
}

.shipping-detail-body { padding-bottom: 22px; }

.shipping-detail-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.shipping-detail-hero > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px;
  border-radius: 11px;
  background: #f7faf9;
}

.shipping-detail-hero span,
.shipping-address-box span { color: #809298; font-size: 9px; }
.shipping-detail-hero strong { color: #18343b; font-size: 11px; }
.shipping-detail-hero small { color: #93a2a6; font-size: 8px; }

.shipping-address-box {
  margin-bottom: 17px;
  padding: 14px 15px;
  border: 1px solid #e3ebec;
  border-radius: 11px;
}

.shipping-address-box strong { display: block; margin-top: 5px; color: #2f484f; font-size: 11px; font-weight: 600; }
.shipping-address-box p { margin: 3px 0 0; color: #6e8186; font-size: 9px; }

.shipping-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.shipping-form-wide { grid-column: 1 / -1; }

.shipping-timeline-block {
  margin-top: 4px;
  border-top: 1px solid #e7edef;
}

.shipping-timeline-block .shipping-section-header {
  padding-left: 0;
  padding-right: 0;
}

.shipping-timeline { padding-top: 4px; }
.shipping-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 9px;
  padding: 8px 0;
}

.shipping-timeline-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #13a17a;
  box-shadow: 0 0 0 4px #e8f7f2;
}

.shipping-timeline-item strong { color: #304a51; font-size: 9.5px; }
.shipping-timeline-item p { margin: 2px 0; color: #71858b; font-size: 9px; }
.shipping-timeline-item small { color: #9aa8ab; font-size: 8px; }

.shipping-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #e8eeee;
}

.shipping-status-actions {
  display: flex;
  gap: 8px;
}

.shipping-status-actions button {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 9px;
  background: #eef4f5;
  color: #486067;
  font-size: 9.5px;
  font-weight: 600;
}

.shipping-status-actions button.delivered {
  background: #e5f7f0;
  color: #0b8e68;
}

.shipping-save-button {
  min-height: 38px;
  padding: 0 17px;
  border-radius: 9px;
  background: #0d9971;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.shipping-save-button:disabled,
.shipping-status-actions button:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 1100px) {
  .shipping-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .shipping-ready-table,
  .shipping-table { overflow-x: auto; }
  .shipping-ready-head,
  .shipping-ready-row { min-width: 820px; }
  .shipping-table-head,
  .shipping-table-row { min-width: 860px; }
}

@media (max-width: 720px) {
  .shipping-heading { align-items: flex-start; }
  .shipping-provider-card { grid-template-columns: auto 1fr; }
  .shipping-provider-meta { grid-column: 1 / -1; align-items: flex-start; }
  .shipping-stats-grid { grid-template-columns: 1fr; }
  .shipping-list-header { align-items: stretch; flex-direction: column; }
  .shipping-list-tools { flex-direction: column; align-items: stretch; }
  .shipping-search { width: 100%; }
  .shipping-detail-hero,
  .shipping-form-grid { grid-template-columns: 1fr; }
  .shipping-form-wide { grid-column: auto; }
  .shipping-modal-footer { align-items: stretch; flex-direction: column; }
  .shipping-status-actions { width: 100%; }
  .shipping-status-actions button,
  .shipping-save-button { flex: 1; }
}

/* ===== INBOX / WHATSAPP FOUNDATION V1 ===== */
.inbox-page {
  padding: 28px 30px 36px;
  max-width: 1500px;
  margin: 0 auto;
}

.inbox-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.inbox-page-heading h1 {
  margin: 0;
  font-size: 26px;
  color: #0f2f37;
}

.inbox-page-heading p {
  margin: 5px 0 0;
  color: #82969b;
  font-size: 11px;
}

.inbox-primary-button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: #0e9a72;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(14, 154, 114, .16);
}

.inbox-provider-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid #dde7e9;
  border-radius: 14px;
  background: #fff;
}

.inbox-provider-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e8f7f2;
  color: #0b8f69;
  font-size: 12px;
  font-weight: 800;
}

.inbox-provider-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.inbox-provider-title strong { color: #17363d; font-size: 12px; }
.inbox-provider-copy p { margin: 0; color: #73888e; font-size: 9px; line-height: 1.55; }

.inbox-connection-badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
}

.inbox-connection-badge.disconnected,
.inbox-connection-badge.error { background: #fff3df; color: #b87709; }
.inbox-connection-badge.connecting { background: #edf5ff; color: #3579bd; }
.inbox-connection-badge.connected { background: #e6f7f1; color: #0b8f69; }

.inbox-provider-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.inbox-provider-meta span { color: #96a5a9; font-size: 8px; }
.inbox-provider-meta strong { color: #27464d; font-size: 9px; }

.inbox-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.inbox-stat-card {
  padding: 15px 16px;
  border: 1px solid #e1e9ea;
  border-radius: 13px;
  background: #fff;
}
.inbox-stat-card.unread { border-color: #d9e8f8; background: #fbfdff; }
.inbox-stat-card.takeover { border-color: #f0dfb2; background: #fffdf8; }
.inbox-stat-card.channel { border-color: #d8ebe5; background: #fbfefd; }
.inbox-stat-card span { display: block; color: #72868b; font-size: 9px; font-weight: 600; }
.inbox-stat-card strong { display: block; margin: 5px 0 3px; color: #16363d; font-size: 21px; line-height: 1; }
.inbox-stat-card.channel strong { font-size: 16px; }
.inbox-stat-card small { color: #97a5a9; font-size: 8px; }

.inbox-workspace {
  min-height: 590px;
  display: grid;
  grid-template-columns: 290px minmax(420px, 1fr) 250px;
  border: 1px solid #dfe8ea;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 26px rgba(21, 56, 63, .04);
}

.inbox-conversation-panel,
.inbox-customer-panel {
  min-width: 0;
  background: #fff;
}

.inbox-conversation-panel { border-right: 1px solid #e5ecee; }
.inbox-customer-panel { border-left: 1px solid #e5ecee; }

.inbox-panel-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #e8eeee;
}
.inbox-panel-header div { display: flex; flex-direction: column; gap: 2px; }
.inbox-panel-header strong { color: #17373e; font-size: 11px; }
.inbox-panel-header span { color: #98a7aa; font-size: 8px; }

.inbox-search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px;
  padding: 0 11px;
  height: 37px;
  border: 1px solid #dfe7e9;
  border-radius: 9px;
  background: #fbfdfd;
}
.inbox-search-box span { color: #83979c; }
.inbox-search-box input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #314d54;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
}

.inbox-conversation-list { max-height: 525px; overflow-y: auto; }
.inbox-conversation-item {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf2f3;
  background: #fff;
  text-align: left;
}
.inbox-conversation-item:hover { background: #f8fbfa; }
.inbox-conversation-item.active { background: #eff9f5; box-shadow: inset 3px 0 0 #0f9a72; }

.inbox-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f6f2;
  color: #0a8e68;
  font-size: 10px;
  font-weight: 700;
}
.inbox-avatar.large { width: 38px; height: 38px; }
.inbox-avatar.profile { width: 52px; height: 52px; font-size: 13px; }

.inbox-conversation-copy { min-width: 0; }
.inbox-conversation-top,
.inbox-conversation-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-conversation-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #203f46; font-size: 9.5px; }
.inbox-conversation-top time { flex-shrink: 0; color: #a0adb0; font-size: 7.5px; }
.inbox-conversation-bottom { margin-top: 4px; }
.inbox-conversation-bottom span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #819398; font-size: 8px; }
.inbox-conversation-bottom b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 999px;
  background: #0e9a72;
  color: #fff;
  font-size: 7px;
}
.inbox-empty-list { padding: 34px 18px; color: #98a7aa; font-size: 9px; line-height: 1.7; text-align: center; }

.inbox-chat-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: #f8fbfa;
}

.inbox-chat-header {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid #e3eaec;
  background: #fff;
}
.inbox-chat-identity { display: flex; flex-direction: column; min-width: 0; }
.inbox-chat-identity strong { color: #18373e; font-size: 10.5px; }
.inbox-chat-identity span { color: #87999d; font-size: 8px; }
.inbox-chat-controls { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.inbox-chat-controls button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #dfe8e9;
  border-radius: 8px;
  background: #fff;
  color: #536b71;
  font-size: 8px;
  font-weight: 600;
}
.inbox-chat-controls button.active { background: #e8f7f2; border-color: #c9e9df; color: #0a8e68; }
.inbox-mini-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 7.5px;
  font-weight: 700;
}
.inbox-mini-badge.open { background: #e8f7f2; color: #0a8e68; }
.inbox-mini-badge.closed { background: #eef2f3; color: #73858a; }

.inbox-local-note {
  padding: 6px 14px;
  background: #fff8e9;
  border-bottom: 1px solid #f5e6bd;
  color: #9a721a;
  font-size: 7.5px;
  text-align: center;
}

.inbox-message-list {
  min-height: 380px;
  max-height: 450px;
  overflow-y: auto;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(15,154,114,.03), transparent 28%),
    #f8fbfa;
}
.inbox-message-row { display: flex; margin-bottom: 10px; }
.inbox-message-row.inbound { justify-content: flex-start; }
.inbox-message-row.outbound { justify-content: flex-end; }
.inbox-message-bubble {
  max-width: 72%;
  padding: 10px 12px 7px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e0e8ea;
  box-shadow: 0 4px 12px rgba(28, 65, 72, .04);
}
.inbox-message-row.outbound .inbox-message-bubble { background: #0f9a72; border-color: #0f9a72; color: #fff; }
.inbox-message-bubble.ai { background: #f1efff !important; border-color: #ddd7ff !important; color: #443a78 !important; }
.inbox-message-bubble p { margin: 0; font-size: 9.5px; line-height: 1.6; white-space: pre-wrap; }
.inbox-message-bubble > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; }
.inbox-message-bubble span,
.inbox-message-bubble time { font-size: 7px; opacity: .7; }

.inbox-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid #e2eaec;
  background: #fff;
}
.inbox-composer textarea {
  min-height: 42px;
  max-height: 100px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #dce6e8;
  border-radius: 10px;
  outline: none;
  font-family: 'Poppins', sans-serif;
  color: #304e55;
  font-size: 9px;
}
.inbox-composer textarea:focus { border-color: #0f9a72; box-shadow: 0 0 0 3px rgba(15,154,114,.07); }
.inbox-composer button {
  align-self: end;
  height: 42px;
  min-width: 72px;
  padding: 0 14px;
  border-radius: 10px;
  background: #0f9a72;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.inbox-composer button:disabled { opacity: .5; }

.inbox-chat-empty {
  grid-row: 1 / -1;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8fa0a4;
}
.inbox-chat-empty-icon { font-size: 30px; margin-bottom: 10px; }
.inbox-chat-empty strong { color: #526a70; font-size: 11px; }
.inbox-chat-empty p { font-size: 8.5px; }
.inbox-no-messages { padding: 60px 20px; color: #98a8ab; font-size: 9px; text-align: center; }

.inbox-profile-empty { padding: 32px 18px; color: #96a5a9; font-size: 9px; text-align: center; }
.inbox-profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 18px;
  border-bottom: 1px solid #e8eeee;
}
.inbox-profile-head strong { margin-top: 9px; color: #1b3a41; font-size: 10.5px; }
.inbox-profile-head span { color: #889a9f; font-size: 8px; }
.inbox-profile-head b { margin-top: 7px; padding: 4px 8px; border-radius: 999px; background: #eef5ff; color: #3975b1; font-size: 7px; }
.inbox-profile-section { padding: 15px 16px; border-bottom: 1px solid #edf2f3; }
.inbox-profile-section h4 { margin: 0 0 10px; color: #405c63; font-size: 9px; }
.inbox-profile-pair { display: flex; justify-content: space-between; gap: 12px; margin: 7px 0; }
.inbox-profile-pair span { color: #87999e; font-size: 8px; }
.inbox-profile-pair strong { color: #314f56; font-size: 8px; text-transform: capitalize; }
.inbox-profile-muted { margin: 0; color: #86999e; font-size: 8px; line-height: 1.6; }
.inbox-order-mini { display: flex; justify-content: space-between; gap: 9px; padding: 9px 0; border-bottom: 1px solid #edf2f3; }
.inbox-order-mini:last-child { border-bottom: none; }
.inbox-order-mini > div { min-width: 0; display: flex; flex-direction: column; }
.inbox-order-mini strong { overflow: hidden; text-overflow: ellipsis; color: #294950; font-size: 7.5px; }
.inbox-order-mini span { color: #94a2a6; font-size: 7px; text-transform: capitalize; }
.inbox-order-mini b { color: #0a8e68; font-size: 8px; white-space: nowrap; }

.inbox-simulate-modal { max-width: 590px; }
.inbox-simulate-help { margin-top: -3px; padding: 10px 12px; border-radius: 9px; background: #fff8e9; color: #8e711e; font-size: 8px; line-height: 1.55; }
.inbox-secondary-button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #dce5e7;
  border-radius: 9px;
  background: #f8fbfb;
  color: #61777d;
  font-size: 9px;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .inbox-workspace { grid-template-columns: 260px minmax(390px, 1fr); }
  .inbox-customer-panel { display: none; }
}

@media (max-width: 900px) {
  .inbox-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .inbox-workspace { grid-template-columns: 230px 1fr; }
}

@media (max-width: 720px) {
  .inbox-page { padding: 20px 14px 28px; }
  .inbox-page-heading { align-items: flex-start; }
  .inbox-provider-card { grid-template-columns: auto 1fr; }
  .inbox-provider-meta { grid-column: 1 / -1; align-items: flex-start; }
  .inbox-stats-grid { grid-template-columns: 1fr 1fr; }
  .inbox-workspace { display: block; min-height: 0; }
  .inbox-conversation-panel { border-right: none; }
  .inbox-conversation-list { max-height: 320px; }
  .inbox-chat-panel { min-height: 520px; border-top: 1px solid #e5ecee; }
  .inbox-chat-controls { gap: 4px; }
  .inbox-chat-controls button { padding: 0 7px; }
}

/* ===== INBOX V1 UI REFINEMENT ===== */
.inbox-page-heading {
  margin-bottom: 14px;
}

.inbox-primary-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 15px;
  border: 0;
  outline: 0;
  box-shadow: 0 7px 18px rgba(14, 154, 114, .14);
}

.inbox-primary-button span {
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
}

.inbox-provider-card {
  gap: 12px;
  margin-bottom: 13px;
  padding: 11px 15px;
  border-radius: 13px;
}

.inbox-provider-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 10.5px;
}

.inbox-provider-title {
  gap: 7px;
  margin-bottom: 2px;
}

.inbox-provider-title strong {
  font-size: 11px;
}

.inbox-provider-copy p {
  max-width: 720px;
  font-size: 8.2px;
  line-height: 1.45;
}

.inbox-connection-badge {
  min-height: 19px;
  padding: 0 7px;
  font-size: 7.3px;
}

.inbox-provider-meta span {
  font-size: 7.3px;
}

.inbox-provider-meta strong {
  font-size: 8.3px;
}

.inbox-stats-grid {
  gap: 11px;
  margin-bottom: 15px;
}

.inbox-stat-card {
  padding: 13px 15px;
}

.inbox-stat-card.channel {
  border-color: #e1e9ea;
  background: #fff;
}

.inbox-stat-card.channel strong {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #315159;
}

.inbox-workspace {
  grid-template-columns: 310px minmax(430px, 1fr) 250px;
}

.inbox-panel-header {
  height: 58px;
}

.inbox-search-box {
  margin: 10px 12px;
}

.inbox-conversation-item {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding: 12px 15px;
}

.inbox-conversation-top strong {
  font-size: 9.8px;
}

.inbox-conversation-bottom span {
  font-size: 8.2px;
}

.inbox-chat-empty {
  background:
    radial-gradient(circle at center, rgba(15, 154, 114, .035), transparent 30%),
    #fbfdfc;
}

.inbox-chat-empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 15px;
  background: #eaf7f3;
  color: #0d9770;
  box-shadow: inset 0 0 0 1px #d8eee7;
}

.inbox-chat-empty-icon svg {
  width: 23px;
  height: 23px;
}

.inbox-chat-empty strong {
  font-size: 11.3px;
  color: #385a61;
}

.inbox-chat-empty p {
  margin: 5px 0 0;
  color: #94a4a8;
  font-size: 8.2px;
}

@media (max-width: 1200px) {
  .inbox-workspace { grid-template-columns: 285px minmax(390px, 1fr); }
}

@media (max-width: 900px) {
  .inbox-workspace { grid-template-columns: 245px 1fr; }
}

/* ===== WhatsApp Connection V1 ===== */
.inbox-provider-live-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.inbox-provider-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inbox-provider-actions .inbox-provider-meta {
  min-width: 105px;
}

.inbox-wa-connect,
.inbox-wa-secondary {
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  font-family: 'Poppins', sans-serif;
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
}

.inbox-wa-connect {
  border: none;
  background: #0f9a72;
  color: #fff;
  box-shadow: 0 6px 14px rgba(15, 154, 114, .14);
}

.inbox-wa-connect:hover { background: #0b8964; }
.inbox-wa-connect:disabled,
.inbox-wa-secondary:disabled { opacity: .55; cursor: not-allowed; }

.inbox-wa-secondary {
  border: 1px solid #dbe5e7;
  background: #fff;
  color: #526a70;
}

.inbox-local-note.live {
  background: #edf9f4;
  border-color: #d4eee4;
  color: #24755e;
}

.inbox-whatsapp-modal { max-width: 690px; }

.inbox-qr-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
  align-items: center;
  padding: 4px 0 16px;
}

.inbox-qr-image {
  width: 250px;
  max-width: 100%;
  display: block;
  border: 1px solid #e2eaec;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}

.inbox-qr-steps strong {
  display: block;
  margin-bottom: 10px;
  color: #1c3a41;
  font-size: 13px;
}

.inbox-qr-steps ol {
  margin: 0;
  padding-left: 18px;
  color: #5d747a;
  font-size: 11px;
  line-height: 1.9;
}

.inbox-qr-steps p {
  margin: 12px 0 0;
  color: #8b9ca0;
  font-size: 9px;
}

.inbox-wa-waiting,
.inbox-wa-success {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
}

.inbox-wa-waiting strong,
.inbox-wa-success h3 {
  margin: 0;
  color: #203f46;
  font-size: 14px;
}

.inbox-wa-waiting p,
.inbox-wa-success p {
  max-width: 420px;
  margin: 0;
  color: #7f9297;
  font-size: 10px;
  line-height: 1.6;
}

.inbox-wa-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #dceee8;
  border-top-color: #0f9a72;
  border-radius: 50%;
  animation: inbox-wa-spin .8s linear infinite;
}

@keyframes inbox-wa-spin { to { transform: rotate(360deg); } }

.inbox-wa-success-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e7f7f1;
  color: #0f9a72;
  font-size: 22px;
  font-weight: 700;
}

.inbox-wa-warning {
  padding: 11px 13px;
  border: 1px solid #f0dfb6;
  border-radius: 10px;
  background: #fffaf0;
  color: #8a6e24;
  font-size: 8.5px;
  line-height: 1.6;
}

.inbox-wa-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 14px;
}

@media (max-width: 720px) {
  .inbox-provider-live-card { grid-template-columns: auto 1fr; }
  .inbox-provider-actions { grid-column: 1 / -1; justify-content: space-between; }
  .inbox-qr-layout { grid-template-columns: 1fr; justify-items: center; }
  .inbox-qr-steps { width: 100%; }
}


/* ===== WhatsApp Connection V1.1 - Pairing Code + Windows Safe Reset ===== */
.inbox-pairing-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #dfe9e7;
  border-radius: 14px;
  background: #f8fbfa;
}

.inbox-pairing-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}

.inbox-pairing-heading strong {
  font-size: 13px;
  color: #17333a;
}

.inbox-pairing-heading span {
  font-size: 11px;
  color: #71868b;
}

.inbox-pairing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.inbox-pairing-row input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d8e5e3;
  border-radius: 10px;
  outline: none;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  box-sizing: border-box;
}

.inbox-pairing-row input:focus {
  border-color: #0d9b73;
  box-shadow: 0 0 0 3px rgba(13, 155, 115, 0.08);
}

.inbox-pairing-code {
  margin-top: 14px;
  padding: 14px;
  text-align: center;
  border-radius: 12px;
  background: #eaf8f3;
  border: 1px solid #cbeade;
}

.inbox-pairing-code span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #668078;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.inbox-pairing-code strong {
  display: block;
  margin: 4px 0 6px;
  font-size: 26px;
  letter-spacing: 5px;
  color: #0d8e68;
}

.inbox-pairing-code p {
  margin: 0;
  font-size: 10px;
  color: #71868b;
}

@media (max-width: 620px) {
  .inbox-pairing-row { grid-template-columns: 1fr; }
}

/* ===== INBOX V2 ===== */
.inbox-message-bubble { position: relative; }
.inbox-message-meta { display:flex !important; align-items:center; justify-content:flex-end !important; gap:7px !important; margin-top:6px !important; }
.inbox-message-meta span, .inbox-message-meta time { font-size:7px; opacity:.72; text-transform:capitalize; }
.inbox-quoted-message {
  display:block !important;
  margin:0 0 7px !important;
  padding:7px 9px;
  border-left:3px solid #0f9a72;
  border-radius:7px;
  background:#f0f6f4;
  color:#526a70;
  font-size:8px;
  line-height:1.45;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.inbox-message-row.outbound .inbox-quoted-message { background:rgba(255,255,255,.14); color:#fff; border-left-color:#c6f3e5; }
.inbox-media-image, .inbox-media-video { width:min(280px,100%); max-height:280px; object-fit:cover; display:block; border-radius:9px; margin-bottom:7px; }
.inbox-media-audio { width:min(280px,100%); display:block; margin:2px 0 7px; }
.inbox-media-document { display:block; padding:9px 10px; margin-bottom:7px; border-radius:8px; background:#f3f7f6; color:#1f6150; font-size:8.5px; text-decoration:none; word-break:break-word; }
.inbox-message-row.outbound .inbox-media-document { background:rgba(255,255,255,.14); color:#fff; }
.inbox-reply-link { display:block; margin:5px 0 0 auto; border:0; background:transparent; color:inherit; font-size:7px; opacity:.7; cursor:pointer; padding:0; }
.inbox-reply-link:hover { opacity:1; text-decoration:underline; }
.inbox-composer-wrap { margin-top:auto; background:#fff; border-top:1px solid #e2eaec; }
.inbox-reply-preview, .inbox-attachment-preview { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; background:#f5faf8; border-bottom:1px solid #e2eaec; color:#526a70; font-size:8px; }
.inbox-reply-preview > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.inbox-reply-preview strong { color:#0f8f6b; font-size:7.5px; }
.inbox-reply-preview span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; }
.inbox-reply-preview button, .inbox-attachment-preview button { border:0; background:transparent; color:#73858a; font-size:16px; cursor:pointer; }
.inbox-composer { grid-template-columns:36px 1fr auto; border-top:0; }
.inbox-attach-button { width:36px; height:42px; border:1px solid #dce6e8; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#0f9a72; font-size:20px; cursor:pointer; background:#fff; }
.inbox-attach-button input { display:none; }
.inbox-composer button { min-width:82px; }
@media (max-width: 760px) {
  .inbox-composer { grid-template-columns:36px 1fr; }
  .inbox-composer > button { grid-column:2; }
  .inbox-media-image, .inbox-media-video, .inbox-media-audio { width:100%; }
}


/* ===== INBOX ORDER FROM CHAT V1 ===== */
.inbox-profile-actions-section { background: #fbfdfc; }
.inbox-create-order-button {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cce9df;
  border-radius: 9px;
  background: #eaf8f3;
  color: #087b5c;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
}
.inbox-create-order-button:hover { background: #dcf4eb; border-color: #b9dfd2; }
.inbox-profile-actions-section .inbox-profile-muted { margin-top: 7px; }
.inbox-order-modal { max-width: 760px; }
.inbox-order-source-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.inbox-order-source-card > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #e4ecee;
  border-radius: 10px;
  background: #f8fbfa;
}
.inbox-order-source-card span { color: #86989d; font-size: 8px; }
.inbox-order-source-card strong { color: #24454c; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; }
.inbox-order-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
}
.inbox-order-modal-footer > div { display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .inbox-order-source-card { grid-template-columns: 1fr; }
  .inbox-order-modal-footer { align-items: stretch; flex-direction: column; }
  .inbox-order-modal-footer > div { display: grid; grid-template-columns: 1fr; }
}


/* ===== INBOX ORDER BUTTON RESPONSIVE FIX ===== */
.inbox-chat-order-button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #bfe4d8 !important;
  border-radius: 8px !important;
  background: #e9f8f3 !important;
  color: #087b5c !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.inbox-chat-order-button:hover {
  background: #dcf4eb !important;
  border-color: #acd9ca !important;
}
@media (max-width: 760px) {
  .inbox-chat-order-button {
    padding: 0 7px !important;
    font-size: 7.5px !important;
  }
}

/* =========================================================
   PAYMENT FOUNDATION V1
   ========================================================= */

.payment-page {
  max-width: 1500px;
}

.payment-heading {
  align-items: center;
}

.payment-refresh-button {
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #d9e3e5;
  background: #ffffff;
  color: #334a50;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.payment-error,
.payment-modal-error {
  padding: 11px 13px;
  border: 1px solid #f3c5c5;
  border-radius: 10px;
  background: #fff7f7;
  color: #c03f3f;
  font-size: 12px;
  margin-bottom: 14px;
}

.payment-foundation-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 16px;
  background: #ffffff;
  border: 1px solid #dce6e8;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(21, 57, 65, 0.04);
}

.payment-foundation-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9f8f2;
  color: #0d8e68;
  font-size: 13px;
  font-weight: 800;
}

.payment-foundation-banner strong {
  display: block;
  color: #18353c;
  font-size: 14px;
}

.payment-foundation-banner p {
  margin: 4px 0 0;
  color: #71878c;
  font-size: 11px;
  line-height: 1.55;
}

.payment-foundation-banner > span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eaf8f3;
  color: #0b8b66;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.payment-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.payment-stat-card {
  min-height: 96px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #dce6e8;
  border-radius: 14px;
}

.payment-stat-card.info { border-color: #cfe1f6; background: #fbfdff; }
.payment-stat-card.warning { border-color: #f2d59e; background: #fffdf8; }
.payment-stat-card.cod { border-color: #cbe7da; background: #fbfffd; }

.payment-stat-card span,
.payment-stat-card small {
  display: block;
  color: #72878c;
  font-size: 10px;
}

.payment-stat-card strong {
  display: block;
  margin: 5px 0 4px;
  color: #17343b;
  font-size: 21px;
  line-height: 1.1;
}

.payment-stat-card:first-child strong { color: #0d936c; }
.payment-stat-card.warning strong { color: #bb7800; }

.payment-section-card {
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #dce6e8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(21, 57, 65, 0.035);
}

.payment-section-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 17px 18px;
  border-bottom: 1px solid #e7edef;
}

.payment-section-header h3 {
  margin: 0;
  color: #17343b;
  font-size: 14px;
}

.payment-section-header p {
  margin: 4px 0 0;
  color: #7b8e93;
  font-size: 10px;
}

.payment-provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.payment-provider-card {
  padding: 14px;
  border: 1px solid #e0e8e9;
  border-radius: 12px;
  background: #fbfcfc;
}

.payment-provider-card.active {
  border-color: #bfe5d7;
  background: #fbfffd;
}

.payment-provider-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.payment-provider-logo {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #edf5f3;
  color: #0c8e69;
  font-size: 11px;
  font-weight: 800;
}

.payment-provider-top strong {
  display: block;
  color: #18353c;
  font-size: 12px;
}

.payment-provider-top div > span {
  display: block;
  margin-top: 2px;
  color: #8a9b9f;
  font-size: 9px;
}

.payment-provider-status {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f4f0e7;
  color: #9a6c13;
  font-size: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.payment-provider-status.active {
  background: #e3f5ee;
  color: #07805d;
}

.payment-provider-card > p {
  margin: 11px 0 0;
  color: #778b90;
  font-size: 9.5px;
  line-height: 1.55;
}

.transaction-header {
  align-items: flex-end;
}

.payment-filters {
  display: flex;
  gap: 8px;
}

.payment-filters input,
.payment-filters select {
  height: 38px;
  border: 1px solid #d8e3e5;
  border-radius: 9px;
  background: #fff;
  color: #40565b;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  outline: none;
}

.payment-filters input { width: 235px; padding: 0 12px; }
.payment-filters select { min-width: 130px; padding: 0 10px; }

.payment-table-wrap { overflow-x: auto; }

.payment-table {
  display: grid;
  grid-template-columns: 1.1fr 1.35fr 1.1fr .75fr .75fr 1.1fr 1fr;
  gap: 10px;
  align-items: center;
  min-width: 900px;
}

.payment-table-head {
  padding: 11px 18px;
  background: #f7faf9;
  border-bottom: 1px solid #e2e9ea;
  color: #75898e;
  font-size: 8px;
  font-weight: 700;
}

.payment-table-row {
  padding: 12px 18px;
  border-bottom: 1px solid #edf1f2;
  color: #4a5e63;
  font-size: 9.5px;
}

.payment-table-row:last-child { border-bottom: 0; }

.payment-table-row strong {
  display: block;
  color: #15353c;
  font-size: 10px;
}

.payment-table-row small,
.payment-table-row span {
  color: #8a9b9f;
  font-size: 8.5px;
}

.payment-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef1f2;
  color: #62767b;
  font-size: 8px !important;
  font-weight: 700;
  white-space: nowrap;
}

.payment-status-badge.paid { background: #e0f5ed; color: #07825e; }
.payment-status-badge.pending { background: #fff4df; color: #a86a00; }
.payment-status-badge.failed,
.payment-status-badge.refunded { background: #fff0f0; color: #d04848; }
.payment-status-badge.draft { background: #f1efff; color: #6c59b3; }
.payment-status-badge.unpaid { background: #fff0f0; color: #d04848; }

.payment-empty {
  padding: 28px 18px;
  text-align: center;
  color: #8b9da1;
  font-size: 10px;
}

.payment-order-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.payment-order-card-heading h3 { margin: 0; }

.payment-order-link {
  display: block;
  margin-top: 10px;
  color: #0a8f69;
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
}

.payment-order-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.payment-order-secondary,
.payment-order-paid-button {
  min-height: 36px;
  border-radius: 9px;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.payment-order-secondary {
  border: 1px solid #d7e2e4;
  background: #fff;
  color: #455b60;
}

.payment-order-paid-button {
  border: 0;
  background: #0d956d;
  color: #fff;
}

.payment-order-paid-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.payment-mini-history {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf1f2;
}

.payment-mini-history > strong {
  display: block;
  margin-bottom: 7px;
  color: #52676c;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.payment-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed #edf1f2;
}

.payment-mini-row:last-child { border-bottom: 0; }
.payment-mini-row div:last-child { text-align: right; }
.payment-mini-row span,
.payment-mini-row strong { display: block; color: #284249; font-size: 9px; }
.payment-mini-row small { display: block; margin-top: 2px; color: #92a0a4; font-size: 8px; }
.payment-mini-empty { margin: 0; color: #92a0a4; font-size: 9px; }

.payment-request-modal { max-width: 650px; }
.payment-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.payment-provider-hint {
  padding: 11px 12px;
  margin-top: 4px;
  border-radius: 10px;
  border: 1px solid #d9e7e3;
  background: #f7fbf9;
  color: #68807a;
  font-size: 9.5px;
  line-height: 1.55;
}

.payment-modal-cancel {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #d8e2e4;
  background: #fff;
  color: #52666b;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .payment-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .payment-foundation-banner { grid-template-columns: auto 1fr; }
  .payment-foundation-banner > span { grid-column: 1 / -1; justify-self: flex-start; }
  .payment-stats-grid,
  .payment-provider-grid,
  .payment-modal-grid { grid-template-columns: 1fr; }
  .transaction-header { align-items: stretch; flex-direction: column; }
  .payment-filters { flex-direction: column; }
  .payment-filters input,
  .payment-filters select { width: 100%; }
}

/* Payment Integrations V2 */
.payment-provider-card.saved {
  border-color: #d7dfef;
  background: #fcfdff;
}

.payment-provider-status.saved {
  background: #eef2fb;
  color: #5b69a8;
}

.payment-provider-settings {
  width: 100%;
  min-height: 34px;
  margin-top: 12px;
  border: 1px solid #d6e3e1;
  border-radius: 9px;
  background: #ffffff;
  color: #0b8c67;
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}

.payment-provider-settings:hover {
  background: #f1faf7;
  border-color: #b9ddd2;
}

.payment-provider-settings:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.payment-provider-modal {
  max-width: 760px;
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.payment-provider-modal-body {
  padding-top: 18px;
}

.payment-modal-success {
  padding: 11px 13px;
  margin-bottom: 14px;
  border: 1px solid #bfe5d7;
  border-radius: 10px;
  background: #f4fcf8;
  color: #087b5b;
  font-size: 11px;
}

.payment-provider-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.payment-provider-config-grid .form-group.wide {
  grid-column: 1 / -1;
}

.payment-provider-config-grid .form-group label {
  color: #50656a;
  font-size: 10px;
  font-weight: 600;
}

.payment-provider-config-grid input,
.payment-provider-config-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d7e2e4;
  border-radius: 10px;
  background: #fff;
  color: #324a50;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  padding: 0 12px;
  outline: none;
}

.payment-provider-config-grid input:focus,
.payment-provider-config-grid select:focus {
  border-color: #1aa47c;
  box-shadow: 0 0 0 3px rgba(26, 164, 124, 0.08);
}

.payment-provider-config-grid small {
  color: #94a2a6;
  font-size: 8.5px;
}

.payment-config-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payment-config-input-wrap > span {
  flex-shrink: 0;
  color: #71858a;
  font-size: 9px;
}

.payment-callback-box {
  padding: 12px 14px;
  margin: 2px 0 16px;
  border: 1px solid #dce7e4;
  border-radius: 11px;
  background: #f8fbfa;
}

.payment-callback-box span,
.payment-callback-box small {
  display: block;
  color: #7b8e93;
  font-size: 8.5px;
}

.payment-callback-box strong {
  display: block;
  margin: 4px 0;
  color: #26454c;
  font-size: 9.5px;
  word-break: break-all;
}

.payment-connection-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid #e3eaeb;
  border-radius: 11px;
  background: #fff;
}

.payment-connection-status span,
.payment-connection-status small {
  display: block;
  color: #8a9a9e;
  font-size: 8.5px;
}

.payment-connection-status strong {
  display: block;
  margin-top: 3px;
  color: #40585e;
  font-size: 10px;
}

.payment-connection-status strong.connected {
  color: #07845f;
}

.payment-provider-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #edf1f2;
}

.payment-provider-modal-actions-right {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.payment-test-button,
.payment-disconnect-button {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.payment-test-button {
  border: 1px solid #d4e0e2;
  background: #fff;
  color: #425a60;
}

.payment-disconnect-button {
  border: 1px solid #f0caca;
  background: #fff8f8;
  color: #c44444;
}

.payment-test-button:disabled,
.payment-disconnect-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .payment-provider-config-grid,
  .payment-connection-status {
    grid-template-columns: 1fr;
  }

  .payment-provider-config-grid .form-group.wide {
    grid-column: auto;
  }

  .payment-provider-modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-provider-modal-actions-right {
    flex-direction: column;
  }
}

/* ===== INBOX FULL ORDER SUMMARY + TOYYIBPAY FLOW V1 ===== */
.inbox-chat-payment-button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid #c9ddef !important;
  border-radius: 8px !important;
  background: #eef7ff !important;
  color: #25688f !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  white-space: nowrap;
  cursor: pointer;
}
.inbox-chat-payment-button:hover:not(:disabled) {
  background: #e4f2fc !important;
  border-color: #b5d1e7 !important;
}
.inbox-chat-payment-button:disabled { opacity: .6; cursor: not-allowed; }

.inbox-order-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.inbox-order-mini > .inbox-order-payment-mini-button { grid-column: 1 / -1; }
.inbox-order-payment-mini-button {
  margin-top: 6px;
  min-height: 28px;
  border: 1px solid #c9ddef;
  border-radius: 8px;
  background: #f1f8fd;
  color: #25688f;
  font-family: 'Poppins', sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  cursor: pointer;
}
.inbox-order-payment-mini-button:hover:not(:disabled) { background: #e6f3fc; }
.inbox-order-payment-mini-button:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 760px) {
  .inbox-chat-payment-button {
    padding: 0 7px !important;
    font-size: 7.5px !important;
  }
}
.inbox-order-payment-mini-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 6px;
}
.inbox-order-payment-mini-actions .inbox-order-payment-mini-button { margin-top: 0; }
.inbox-order-payment-mini-button.secondary {
  background: #fff;
  color: #4b6972;
  border-color: #d8e4e7;
}

/* ===== NINJA VAN LIVE INTEGRATION V1 ===== */
.shipping-provider-actions-meta {
  min-width: 150px;
  align-items: flex-end;
  gap: 5px;
}

.shipping-provider-settings-button {
  margin-top: 8px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #d5e1e3;
  border-radius: 10px;
  background: #fff;
  color: #173f46;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.shipping-provider-settings-button:hover {
  border-color: #9fcfc0;
  background: #f4fbf8;
}

.shipping-success-box {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #bfe3d6;
  border-radius: 10px;
  background: #f2fbf7;
  color: #0e7b5d;
  font-size: 10px;
}

.ninjavan-live-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid #ead7ad;
  border-radius: 12px;
  background: #fffaf0;
}

.ninjavan-live-box.connected {
  border-color: #bfe3d6;
  background: #f3fbf8;
}

.ninjavan-live-box strong {
  display: block;
  color: #17363d;
  font-size: 11px;
}

.ninjavan-live-box p {
  margin: 4px 0 0;
  color: #74888d;
  font-size: 8.5px;
}

.ninjavan-live-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ninjavan-book-button,
.ninjavan-sync-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.ninjavan-book-button {
  border: 1px solid #0f9d78;
  background: #0f9d78;
  color: #fff;
}

.ninjavan-sync-button {
  border: 1px solid #c7dce1;
  background: #fff;
  color: #2e6773;
}

.ninjavan-book-button:disabled,
.ninjavan-sync-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ninjavan-settings-modal {
  width: min(820px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: hidden;
}

.ninjavan-settings-body {
  max-height: calc(100vh - 135px);
  overflow-y: auto;
  padding-bottom: 20px;
}

.ninjavan-config-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #efd6a7;
  border-radius: 10px;
  background: #fffaf0;
  color: #8b6722;
  font-size: 9px;
  line-height: 1.6;
}

.ninjavan-settings-section {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf1f2;
}

.ninjavan-settings-section h3 {
  margin: 0 0 12px;
  color: #18373e;
  font-size: 12px;
}

.ninjavan-config-status {
  display: grid;
  grid-template-columns: .9fr 1.15fr 1.45fr;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid #dbe6e8;
  border-radius: 12px;
  background: #fbfdfd;
}

.ninjavan-config-status > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ninjavan-config-status span {
  color: #85979b;
  font-size: 7.5px;
}

.ninjavan-config-status strong {
  color: #213f46;
  font-size: 9px;
  overflow-wrap: anywhere;
}

.ninjavan-config-status strong.connected { color: #0f9d78; }
.ninjavan-config-status strong.failed { color: #c94e4e; }

.ninjavan-config-status small {
  color: #8a9da1;
  font-size: 7px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ninjavan-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ninjavan-settings-footer > div {
  display: flex;
  gap: 8px;
}

.ninjavan-primary-button,
.ninjavan-secondary-button,
.ninjavan-disconnect-button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.ninjavan-primary-button {
  border: 1px solid #0f9d78;
  background: #0f9d78;
  color: #fff;
}

.ninjavan-secondary-button {
  border: 1px solid #d4e0e2;
  background: #fff;
  color: #415d63;
}

.ninjavan-disconnect-button {
  border: 1px solid #f0caca;
  background: #fff8f8;
  color: #c44444;
}

.ninjavan-primary-button:disabled,
.ninjavan-secondary-button:disabled,
.ninjavan-disconnect-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .ninjavan-live-box,
  .ninjavan-settings-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ninjavan-live-actions,
  .ninjavan-settings-footer > div {
    width: 100%;
  }

  .ninjavan-live-actions > button,
  .ninjavan-settings-footer > div > button,
  .ninjavan-disconnect-button {
    flex: 1;
  }

  .ninjavan-config-status {
    grid-template-columns: 1fr;
  }
}

/* ===== INTEGRATIONS V1 ===== */
.integration-page { max-width: 1500px; margin: 0 auto; padding: 28px 28px 50px; }
.integration-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.integration-heading h1 { margin:0; font-size:27px; color:#0d2c33; }
.integration-heading p { margin:6px 0 0; color:#819398; font-size:12px; }
.integration-refresh, .integration-settings-button { border:1px solid #d7e1e4; background:#fff; color:#17363d; border-radius:10px; min-height:40px; padding:0 16px; font:600 11px Poppins,sans-serif; cursor:pointer; }
.integration-error, .integration-modal-message { border:1px solid #f4bcbc; background:#fff4f4; color:#d64242; border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:11px; }
.integration-success { border:1px solid #bde6d7; background:#f0fbf6; color:#0a8c68; border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:11px; }
.integration-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.integration-stat { background:#fff; border:1px solid #dde5e7; border-radius:14px; padding:17px 18px; min-height:106px; box-shadow:0 8px 25px rgba(14,44,51,.035); }
.integration-stat span { display:block; font-size:9px; color:#6d858b; font-weight:600; }
.integration-stat strong { display:block; margin-top:6px; color:#17363d; font-size:20px; }
.integration-stat strong.ok { color:#0a966f; }
.integration-stat small { display:block; margin-top:4px; color:#9aa8ac; font-size:8px; }
.integration-card { background:#fff; border:1px solid #dce5e7; border-radius:14px; margin-bottom:18px; box-shadow:0 8px 25px rgba(14,44,51,.03); overflow:hidden; }
.integration-card-top { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:18px; }
.integration-brand-logo { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#eef5f3; color:#0a8e69; font-weight:800; font-size:12px; }
.integration-brand-logo.woo { background:#f1ebfb; color:#7b42b1; }
.integration-card-copy h3 { margin:0; color:#112f36; font-size:14px; }
.integration-card-copy p { margin:5px 0 0; color:#7e9196; font-size:10px; line-height:1.6; }
.integration-title-row { display:flex; gap:9px; align-items:center; }
.integration-badge { display:inline-flex; align-items:center; min-height:23px; padding:0 9px; border-radius:999px; background:#fff4df; color:#9f6908; font-size:8px; font-weight:700; white-space:nowrap; }
.integration-badge.connected { background:#e5f7ef; color:#07815f; }
.integration-actions-row { border-top:1px solid #edf1f2; padding:14px 18px; display:flex; align-items:center; gap:10px; }
.integration-actions-row > button { min-height:36px; padding:0 13px; border-radius:9px; border:1px solid #cfe0dc; background:#f2fbf7; color:#098668; font:600 9px Poppins,sans-serif; cursor:pointer; }
.integration-actions-row > button:disabled { opacity:.5; cursor:not-allowed; }
.integration-sync-meta { margin-left:auto; display:flex; flex-direction:column; text-align:right; color:#8b9da1; font-size:8px; gap:2px; }
.integration-card.coming-soon { opacity:.86; }
.integration-section-title { padding:17px 18px 13px; border-bottom:1px solid #edf1f2; }
.integration-section-title h3 { margin:0; font-size:13px; color:#15343b; }
.integration-section-title p { margin:4px 0 0; color:#899a9f; font-size:9px; }
.integration-log-table { width:100%; overflow-x:auto; }
.integration-log-head, .integration-log-row { min-width:700px; display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr .8fr 1.4fr; align-items:center; gap:10px; padding:12px 18px; }
.integration-log-head { background:#f7faf9; color:#768c92; font-size:8px; font-weight:700; text-transform:uppercase; }
.integration-log-row { border-top:1px solid #edf1f2; color:#314c52; font-size:9px; }
.integration-log-status { width:max-content; padding:4px 8px; border-radius:999px; background:#eef3f3; }
.integration-log-status.success { background:#e4f6ee; color:#087e5f; }
.integration-log-status.failed { background:#fff0f0; color:#cf4747; }
.integration-empty { padding:30px; text-align:center; color:#9aa8ac; font-size:10px; }
.integration-modal { max-width:760px; }
.integration-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.integration-config-grid .wide { grid-column:1 / -1; }
.integration-config-grid input, .integration-config-grid select { width:100%; height:43px; border:1px solid #d3dfe2; border-radius:10px; padding:0 12px; font:400 11px Poppins,sans-serif; outline:none; }
.integration-config-grid input:focus, .integration-config-grid select:focus { border-color:#0b9a71; box-shadow:0 0 0 2px rgba(11,154,113,.08); }
.integration-config-grid label { display:block; margin-bottom:7px; color:#566e74; font-size:9px; font-weight:700; }
.integration-config-grid small { display:block; margin-top:5px; color:#9ba9ad; font-size:8px; }
.integration-webhook-box { margin-top:16px; padding:13px 14px; border:1px solid #dce7e5; background:#f7fbfa; border-radius:10px; }
.integration-webhook-box span, .integration-webhook-box small { display:block; color:#87999e; font-size:8px; }
.integration-webhook-box strong { display:block; margin:4px 0; color:#29484f; font-size:9px; word-break:break-all; }
.integration-connection-box { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px; border:1px solid #dce5e7; border-radius:10px; padding:13px 14px; }
.integration-connection-box span, .integration-connection-box small { display:block; color:#8b9da1; font-size:8px; }
.integration-connection-box strong { display:block; margin-top:4px; color:#364f55; font-size:9px; }
.integration-connection-box strong.connected { color:#088361; }
.integration-modal-actions { margin-top:18px; padding-top:16px; border-top:1px solid #edf1f2; display:flex; justify-content:space-between; gap:12px; }
.integration-modal-actions-right { display:flex; gap:9px; }
.integration-test, .integration-disconnect { min-height:40px; padding:0 15px; border-radius:9px; font:600 9px Poppins,sans-serif; cursor:pointer; }
.integration-test { border:1px solid #cfdbdf; background:#fff; color:#385158; }
.integration-disconnect { border:1px solid #f2c0c0; background:#fff6f6; color:#d24a4a; }
@media (max-width:1000px) { .integration-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .integration-page { padding:18px 14px 40px; } .integration-stats-grid, .integration-config-grid, .integration-connection-box { grid-template-columns:1fr; } .integration-card-top { grid-template-columns:auto 1fr; } .integration-settings-button { grid-column:1 / -1; } .integration-actions-row { align-items:stretch; flex-direction:column; } .integration-sync-meta { margin-left:0; text-align:left; } }

/* =========================================================
   WasapGo Final V1 - Analytics / Campaigns / Settings / Mobile
========================================================= */

.mobile-menu-button,
.mobile-sidebar-close,
.mobile-sidebar-overlay {
  display: none;
}

.nav-item {
  position: relative;
}

.nav-item .nav-icon svg {
  width: 18px;
  height: 18px;
}

.nav-later {
  margin-left: auto;
  font-size: 7px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 2px 5px;
}

.sidebar-nav {
  overflow-y: auto;
  padding-bottom: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

.wg-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 30px 48px;
}

.wg-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.wg-page-heading h1 {
  font-size: 25px;
  line-height: 1.2;
  color: #112e34;
  letter-spacing: -0.5px;
}

.wg-page-heading p {
  margin-top: 6px;
  font-size: 11px;
  color: #87979b;
}

.wg-primary-btn,
.wg-secondary-btn,
.wg-small-btn {
  border: 0;
  cursor: pointer;
  font-weight: 600;
  border-radius: 9px;
  transition: .18s ease;
}

.wg-primary-btn {
  min-height: 42px;
  padding: 0 18px;
  background: #07946d;
  color: #fff;
  box-shadow: 0 7px 16px rgba(7,148,109,.14);
}

.wg-primary-btn:hover { background: #087f60; }
.wg-primary-btn:disabled { opacity: .55; cursor: not-allowed; }

.wg-secondary-btn {
  min-height: 40px;
  padding: 0 16px;
  background: #fff;
  color: #3f555a;
  border: 1px solid #dfe7e9;
}

.wg-secondary-btn:hover { background: #f7faf9; }

.wg-select {
  min-width: 135px;
  height: 40px;
  border: 1px solid #dfe7e9;
  border-radius: 9px;
  background: #fff;
  color: #435a60;
  padding: 0 12px;
  font-size: 11px;
  outline: none;
}

.wg-alert {
  margin-bottom: 16px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 11px;
  border: 1px solid transparent;
}

.wg-alert.error { background: #fff3f2; color: #b4463e; border-color: #f1c6c2; }
.wg-alert.success { background: #effaf5; color: #087c5b; border-color: #cceadd; }

.wg-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.wg-stat-card {
  min-height: 110px;
  background: #fff;
  border: 1px solid #e4eaec;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wg-stat-card span { font-size: 10px; color: #71858a; font-weight: 600; }
.wg-stat-card strong { display: block; margin: 6px 0 3px; font-size: 23px; color: #102f35; letter-spacing: -.5px; }
.wg-stat-card small { font-size: 9px; color: #93a1a5; }
.wg-stat-card.profit { background: #f5fbf8; border-color: #d1ebe0; }
.wg-stat-card.profit strong { color: #078761; }
.wg-stat-card.warning { background: #fffaf3; border-color: #f2dfb8; }

.wg-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.wg-card {
  background: #fff;
  border: 1px solid #e3e9eb;
  border-radius: 14px;
  padding: 20px;
  min-width: 0;
}

.wg-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.wg-card-heading h3 { font-size: 14px; color: #18363c; }
.wg-card-heading p { margin-top: 3px; font-size: 9px; color: #91a0a4; }

.wg-empty-card,
.wg-empty-inline {
  background: #fff;
  border: 1px dashed #dce4e6;
  border-radius: 12px;
  padding: 28px;
  text-align: center;
  color: #91a0a4;
  font-size: 11px;
}

.wg-empty-inline { border: 0; padding: 22px 8px; background: transparent; }

.wg-table-wrap { overflow-x: auto; }
.wg-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.wg-table th { padding: 10px 12px; font-size: 8px; text-transform: uppercase; color: #7c9095; background: #f8fafb; text-align: left; letter-spacing: .2px; }
.wg-table td { padding: 12px; border-top: 1px solid #edf1f2; font-size: 10px; color: #3e565c; vertical-align: middle; }
.wg-table td strong { display: block; color: #18353b; font-size: 10.5px; }
.wg-table td small { display: block; color: #99a6aa; font-size: 8px; margin-top: 2px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.positive-text { color: #078761 !important; }

.analytics-main-grid { grid-template-columns: 1.5fr .7fr; }
.analytics-bar-chart {
  height: 235px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 18px 4px 0;
  overflow-x: auto;
}
.analytics-bar-item { min-width: 22px; flex: 1 0 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; align-items: center; }
.analytics-bar-track { width: 100%; max-width: 26px; height: 185px; display: flex; align-items: flex-end; border-radius: 7px; background: #f0f5f3; overflow: hidden; }
.analytics-bar-fill { width: 100%; min-height: 4px; border-radius: 7px; background: linear-gradient(180deg,#15ae82,#07865f); }
.analytics-bar-item span { font-size: 7px; color: #8b999d; white-space: nowrap; transform: rotate(-38deg); transform-origin: center; margin-bottom: 6px; }

.analytics-inventory-list,
.settings-status-list { display: flex; flex-direction: column; gap: 4px; }
.analytics-inventory-list > div,
.settings-status-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #eef2f3; }
.analytics-inventory-list > div:last-child,
.settings-status-list > div:last-child { border-bottom: 0; }
.analytics-inventory-list span,
.settings-status-list span { font-size: 9px; color: #7f9195; }
.analytics-inventory-list strong,
.settings-status-list strong { font-size: 11px; color: #17353b; text-align: right; }

.analytics-breakdown-list { display: flex; flex-direction: column; gap: 13px; }
.analytics-breakdown-row { display: grid; grid-template-columns: 120px 1fr 95px; gap: 12px; align-items: center; }
.analytics-breakdown-row > div:first-child strong { display: block; font-size: 10px; color: #1f3b40; text-transform: capitalize; }
.analytics-breakdown-row > div:first-child span { display: block; margin-top: 2px; font-size: 8px; color: #96a4a8; }
.analytics-breakdown-row b { font-size: 10px; text-align: right; color: #254248; }
.analytics-mini-progress { height: 7px; border-radius: 999px; background: #eef3f1; overflow: hidden; }
.analytics-mini-progress i { display: block; height: 100%; border-radius: inherit; background: #0c9b72; }

.dashboard-mini-chart { height: 190px; display: flex; gap: 7px; align-items: flex-end; padding: 18px 5px 4px; }
.dashboard-mini-col { flex: 1; height: 100%; display: flex; align-items: flex-end; background: #f1f5f4; border-radius: 6px; overflow: hidden; }
.dashboard-mini-col i { width: 100%; display: block; background: linear-gradient(180deg,#18af85,#078762); border-radius: 6px; min-height: 3px; }
.dashboard-attention-list { display: flex; flex-direction: column; }
.dashboard-attention-list div { display:flex; justify-content:space-between; align-items:center; padding:13px 0; border-bottom:1px solid #eef2f3; }
.dashboard-attention-list div:last-child { border-bottom:0; }
.dashboard-attention-list span { font-size:10px; color:#7f9195; }
.dashboard-attention-list strong { font-size:13px; color:#17363b; }

.wg-action-row { display: flex; gap: 6px; flex-wrap: wrap; }
.wg-small-btn { min-height: 30px; padding: 0 10px; background: #fff; color: #496066; border: 1px solid #dde5e7; font-size: 8.5px; }
.wg-small-btn.primary { color: #087a5b; background: #eff9f5; border-color: #cce8dc; }
.wg-small-btn.danger { color: #b54d45; background: #fff5f4; border-color: #f2d3cf; }

.wg-badge { display: inline-flex; align-items:center; min-height: 22px; padding:0 8px; border-radius:999px; font-size:7.5px; font-weight:600; background:#eef2f3; color:#667b80; }
.wg-badge.completed { background:#e9f8f1; color:#087c5b; }
.wg-badge.queued,.wg-badge.sending { background:#eef4ff; color:#4e6db2; }
.wg-badge.draft,.wg-badge.paused { background:#f3f5f6; color:#718287; }
.wg-badge.cancelled { background:#fff1ef; color:#af4b42; }

.wg-modal-backdrop {
  position: fixed; inset:0; z-index:2000; background:rgba(8,24,28,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.wg-modal { width:min(760px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:18px; box-shadow:0 24px 70px rgba(5,28,34,.22); }
.wg-modal-header { display:flex; justify-content:space-between; gap:16px; padding:22px 24px 18px; border-bottom:1px solid #e9eef0; }
.wg-modal-header h2 { font-size:20px; color:#17343a; }
.wg-modal-header p { font-size:10px; color:#8a9a9e; margin-top:4px; }
.wg-modal-header > button { width:36px; height:36px; border:0; border-radius:10px; background:#f1f5f4; color:#61757a; font-size:22px; cursor:pointer; }
.wg-modal form { padding:20px 24px 24px; }
.wg-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.wg-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.wg-field.full { grid-column:1 / -1; }
.wg-field > span { font-size:10px; font-weight:600; color:#4b6166; }
.wg-field input,.wg-field textarea,.wg-field select { width:100%; border:1px solid #dce5e7; border-radius:10px; background:#fff; color:#2a444a; padding:11px 12px; font-size:10.5px; outline:none; }
.wg-field input:focus,.wg-field textarea:focus,.wg-field select:focus { border-color:#0c9a72; box-shadow:0 0 0 3px rgba(12,154,114,.08); }
.wg-field textarea { resize:vertical; }
.wg-field small { color:#91a0a4; font-size:8px; }
.wg-modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.campaign-preview { margin-top:14px; display:flex; flex-direction:column; gap:4px; padding:12px 14px; background:#f6faf8; border:1px solid #dcebe5; border-radius:10px; }
.campaign-preview strong { font-size:10px; color:#29474d; }
.campaign-preview span { font-size:12px; color:#078761; font-weight:700; }
.campaign-preview small { font-size:8px; color:#839499; }

.settings-note { margin-top:16px; padding:12px; background:#f7faf9; border-radius:10px; color:#7d8f94; font-size:9px; line-height:1.6; }
.wg-card-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.maintenance-card { margin-top:16px; }
.maintenance-row { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:15px 0; border-top:1px solid #edf1f2; }
.maintenance-row:first-of-type { border-top:0; }
.maintenance-row strong { font-size:11px; color:#203d43; }
.maintenance-row p { margin-top:4px; max-width:760px; font-size:9px; color:#87989c; line-height:1.55; }
.maintenance-row.muted { opacity:.8; }

@media (max-width: 1050px) {
  .wg-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .analytics-main-grid { grid-template-columns:1fr; }
}

@media (max-width: 720px) {
  body.mobile-menu-open { overflow:hidden; }

  .sidebar {
    display:flex !important;
    width: 272px !important;
    transform: translateX(-105%);
    transition: transform .24s ease;
    z-index: 1200;
    padding: 14px 12px 18px;
    box-shadow: 18px 0 40px rgba(5,25,30,.22);
  }
  .sidebar.mobile-open { transform:translateX(0); }
  .mobile-sidebar-overlay {
    display:block;
    position:fixed;
    inset:0;
    z-index:1150;
    border:0;
    background:rgba(5,24,29,.48);
  }
  .mobile-sidebar-close {
    display:flex;
    margin-left:auto;
    width:32px;
    height:32px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:9px;
    background:rgba(255,255,255,.05);
    color:#fff;
    align-items:center;
    justify-content:center;
    font-size:20px;
  }
  .sidebar .brand { padding:10px 9px 18px; }
  .sidebar-nav { gap:3px; }
  .nav-item { padding:11px 12px; font-size:12px; }

  .main-content { width:100% !important; margin-left:0 !important; }
  .topbar { height:58px; padding:0 13px; gap:10px; }
  .mobile-menu-button {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:38px;
    height:38px;
    flex:0 0 auto;
    border:1px solid #e2e8ea;
    border-radius:9px;
    background:#fff;
  }
  .mobile-menu-button span { width:17px; height:1.5px; background:#415a60; margin:0 auto; border-radius:9px; }
  .search-box { flex:1; width:auto !important; max-width:none; height:37px; }
  .topbar-actions { flex:0 0 auto; }
  .profile-avatar { width:34px; height:34px; }

  .wg-page { padding:18px 13px 88px; }
  .wg-page-heading { align-items:stretch; flex-direction:column; gap:12px; margin-bottom:16px; }
  .wg-page-heading h1 { font-size:22px; }
  .wg-page-heading .wg-primary-btn,.wg-page-heading .wg-select { width:100%; }
  .wg-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .wg-stat-card { padding:14px; min-height:96px; }
  .wg-stat-card strong { font-size:18px; }
  .wg-grid-2 { grid-template-columns:1fr; gap:11px; }
  .wg-card { padding:15px; border-radius:12px; }
  .wg-card-heading { margin-bottom:13px; }
  .analytics-bar-chart { height:200px; }
  .analytics-bar-track { height:150px; }
  .analytics-breakdown-row { grid-template-columns:95px 1fr 78px; gap:8px; }
  .wg-modal-backdrop { padding:0; align-items:flex-end; }
  .wg-modal { width:100%; max-height:92vh; border-radius:18px 18px 0 0; }
  .wg-modal-header { padding:18px 16px 14px; }
  .wg-modal form { padding:16px; }
  .wg-form-grid { grid-template-columns:1fr; gap:12px; }
  .wg-field.full { grid-column:auto; }
  .maintenance-row { flex-direction:column; align-items:stretch; gap:10px; }
  .maintenance-row .wg-secondary-btn { width:100%; }

  .dashboard { padding:18px 13px 88px !important; }
  .dashboard-heading h1 { font-size:21px !important; }
  .dashboard .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard .stat-card { min-height:100px; padding:14px; }
  .dashboard .stat-content h3 { font-size:18px; }
  .dashboard .analytics-grid { grid-template-columns:1fr !important; }
  .dashboard-mini-chart { height:155px; }
}

@media (max-width: 430px) {
  .search-box input { font-size:9px; }
  .wg-stats-grid,
  .dashboard .stats-grid { grid-template-columns:1fr 1fr; }
  .wg-stat-card { min-width:0; }
  .wg-stat-card span { font-size:8.5px; }
  .wg-stat-card strong { font-size:16px; }
  .wg-stat-card small { font-size:7.5px; }
  .analytics-breakdown-row { grid-template-columns:82px 1fr; }
  .analytics-breakdown-row b { grid-column:2; text-align:left; }
}

.counter {
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;

  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.hero {
  position: relative;

  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }

  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }

  .framework,
  .vite {
    position: absolute;
  }

  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
      scale(1.4);
  }

  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
      scale(0.8);
  }
}

#center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;

  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
}

#next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;

  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }

  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }

  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
}

#docs {
  border-right: 1px solid var(--border);

  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

#next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;

  .logo {
    height: 18px;
  }

  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }

  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;

    li {
      flex: 1 1 calc(50% - 8px);
    }

    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
}

#spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
}

.ticks {
  position: relative;
  width: 100%;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }

  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
}

/* WasapGo V2 product pricing */
.product-price-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-price-stack small {
  font-size: 11px;
  color: #8a9aa3;
  font-weight: 500;
}


/* WasapGo Order Delete V1 */
.order-v2-delete-detail {
  width: 100%;
  margin-top: 9px;
  border: 1px solid #f0caca;
  border-radius: 10px;
  background: #fff7f7;
  color: #c44747;
  padding: 11px 14px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.18s ease;
}
.order-v2-delete-detail:hover:not(:disabled) {
  background: #ffeded;
  border-color: #e9b9b9;
}
.order-v2-delete-detail:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}