/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

/* Hide site title */
.site-title,
.site-branding .site-title {
  display: none !important;
}

/* Sticky footer layout */
#page,
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content,
.site-content {
  flex: 1;
}

/* Utility */
.hidden { display: none; }

/* =========================================================
   TABLES
   ========================================================= */

.kehemi-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.kehemi-table thead th {
  background: #f5f7fa !important;
  border-bottom: 2px solid #e2e8f0 !important;
  font-weight: 600;
  color: #374151;
  padding: 10px 12px;
}

.kehemi-table tbody tr:hover {
  background: #f3f4f6;
}

.kehemi-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table headers */
.kh-th {
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
  font-weight: 600;
  color: #374151;
  background: #f5f7fa;
}

.kh-th-left   { text-align: left !important; }
.kh-th-center { text-align: center !important; }
.kh-th-right  { text-align: right !important; }

/* Table cells */
.kh-td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.kh-td-left   { text-align: left !important; }
.kh-td-center { text-align: center !important; }
.kh-td-right  { text-align: right !important; }
.kh-td-actions { width: 1% !important; white-space: nowrap; text-align: right !important; padding-right: 14px !important; }

.kh-nowrap { white-space: nowrap; }

/* =========================================================
   TABLE TOOLBAR
   ========================================================= */

.clients-table-toolbar {
  display: grid;
  grid-template-columns: 1fr 90px; /* matches actions column */
  align-items: center;
  margin: 0 0 10px;
  padding-right: 10px;
}

.clients-table-toolbar-actions {
  display: flex;
  justify-content: center;
}

/* =========================================================
   ACTION ICONS (SINGLE SOURCE OF TRUTH)
   ========================================================= */

.kehemi-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kehemi-actions a,
.kehemi-actions .kehemi-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #eaeaea;
  background: #ffffff;
  color: #4b5563;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}

.kehemi-actions a:hover,
.kehemi-actions .kehemi-action-btn:hover {
  background: #f7f7f7;
}

.kehemi-actions a:active,
.kehemi-actions .kehemi-action-btn:active {
  transform: translateY(1px);
}

.kehemi-actions a:focus-visible,
.kehemi-actions .kehemi-action-btn:focus-visible {
  outline: 2px solid #00bcd4;
  outline-offset: 2px;
}

.kehemi-actions svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

/* Semantic hover colours */
.kehemi-actions [data-action="edit"]:hover            { color: #f0ce46; }
.kehemi-actions [data-action="add"]:hover             { color: #047857; }
.kehemi-actions [data-action="archive"]:hover,
.kehemi-actions [data-action="archive-client"]:hover  { color: #b91c1c; }
.kehemi-actions [data-action="restore"]:hover,
.kehemi-actions [data-action="restore-client"]:hover  { color: #047857; }

.kehemi-actions-right { justify-content: flex-end !important; }
.kehemi-action-form { margin: 0; }

/* =========================================================
   FORMS
   ========================================================= */

input[name="client_name"],
#client_name,
.kehemi-input[name="first_name"],
.kehemi-input[name="last_name"] {
  text-transform: uppercase;
}

.kehemi-input,
.kehemi-select {
  height: 44px;
  padding: 10px 12px;
  line-height: 22px;
  box-sizing: border-box;
}

.kehemi-select {
  appearance: none;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* =========================================================
   KEHEMI CARDS / NOTICES
   ========================================================= */

.kehemi-page {
  max-width: 1500px !important;
  margin: 0 auto;
  padding: 0 20px; /* breathing room on edges */
}
.kehemi-page-wide {
  max-width: 1600px !important;
  margin: 0 auto;
  padding: 0 20px;
}

.kehemi-card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 18px;
}

.kehemi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.kehemi-form-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kehemi-notice {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  margin-bottom: 14px;
}

.kehemi-notice--success { background:#f0fff4; border-color:#b7e2c2; }
.kehemi-notice--error   { background:#fff5f5; border-color:#f1b3b3; }
.kehemi-notice--warn    { background:#fffbeb; border-color:#f3d08a; }
.kehemi-notice--info    { background:#eff6ff; border-color:#b6d7ff; }

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

.kehemi-dashboard {
  padding: 20px 0;
}

.kehemi-dashboard-header {
  margin-bottom: 40px;
  text-align: center;
}

.kehemi-dashboard-title {
  font-size: 32px;
  font-weight: 600;
  color: #1e1e1e;
  margin: 0 0 8px 0;
}

.kehemi-dashboard-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}
/* Admin dashboard sits on gradient — subtitle must be near-white */
.kh-admin-dashboard .kehemi-dashboard-subtitle {
  color: rgba(255,255,255,0.82);
}
/* Customer dashboard: Kehemi theme has gradient bg — subtitle near-white */
.kehemi-dashboard .kehemi-dashboard-subtitle {
  color: rgba(255,255,255,0.82);
}
/* Customer dashboard: Exclusive (lamar) theme has solid bg — subtitle grey */
.kh-theme-lamar .kehemi-dashboard .kehemi-dashboard-subtitle {
  color: #666;
}

.kehemi-dashboard-empty {
  text-align: center;
  padding: 80px 20px;
}

.kehemi-empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.kehemi-dashboard-empty h3 {
  font-size: 24px;
  color: #333;
  margin: 0 0 12px 0;
}

.kehemi-dashboard-empty p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.kehemi-campaign-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 20px;
}

.kehemi-campaign-grid .kehemi-campaign-card {
  flex: 0 0 calc(25% - 18px);
}

@media (max-width: 1200px) {
  .kehemi-campaign-grid .kehemi-campaign-card {
    flex: 0 0 calc(33.333% - 16px);
  }
}

@media (max-width: 900px) {
  .kehemi-campaign-grid .kehemi-campaign-card {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 600px) {
  .kehemi-campaign-grid .kehemi-campaign-card {
    flex: 0 0 100%;
  }
}

.kehemi-campaign-card {
  display: block;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.kehemi-campaign-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #0073aa;
}

.kehemi-campaign-card:active {
  transform: translateY(-2px);
}

.kehemi-campaign-logo {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.kehemi-campaign-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 12px;
}

.kehemi-campaign-logo-placeholder {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 48px;
  font-weight: 600;
  text-transform: uppercase;
}

.kehemi-unread-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #d63638;
  color: #fff;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px;
  box-shadow: 0 2px 8px rgba(214, 54, 56, 0.4);
  animation: kehemi-pulse 2s infinite;
}

@keyframes kehemi-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.kehemi-campaign-info {
  margin-bottom: 12px;
}

.kehemi-campaign-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e1e1e;
  margin: 0 0 12px 0;
  line-height: 1.3;
  min-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kehemi-campaign-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kehemi-campaign-meta-item {
  display: flex;
  font-size: 13px;
  line-height: 1.4;
}

.kehemi-meta-label {
  color: #666;
  min-width: 60px;
  font-weight: 500;
}

.kehemi-meta-value {
  color: #333;
  flex: 1;
}

.kehemi-campaign-status {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #0073aa;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  letter-spacing: 0.5px;
}

.kehemi-campaign-status.status-active {
  background: #00a32a;
}

.kehemi-campaign-status.status-paused {
  background: #f0a000;
}

.kehemi-campaign-status.status-completed {
  background: #666;
}

.kehemi-campaign-status.status-draft {
  background: #999;
}

/* =========================================================
   ADMIN LOGOUT ICON
   ========================================================= */

ul#menu-admin-header {
  position: relative;
}

ul#menu-admin-header li.kehemi-logout {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

li.kehemi-logout > a {
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  color: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
}

li.kehemi-logout > a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

li.kehemi-logout > a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
/* =========================================================
   REWALLD ADMIN LOGIN – FORCE GRADIENT + GLASS
   Works even if page-id changes
   ========================================================= */

/* Full-screen gradient behind everything */
body:has(.kehemi-login-wrap) {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;

  background: linear-gradient(135deg,
    #22c55e 0%,
    #06b6d4 28%,
    #3b82f6 52%,
    #a855f7 74%,
    #ec4899 100%
  ) !important;
}

/* Glow blobs */
body:has(.kehemi-login-wrap)::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 25%, rgba(34,197,94,0.45) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(circle at 70% 30%, rgba(59,130,246,0.45) 0%, rgba(59,130,246,0) 55%),
    radial-gradient(circle at 60% 80%, rgba(236,72,153,0.45) 0%, rgba(236,72,153,0) 55%),
    radial-gradient(circle at 30% 85%, rgba(168,85,247,0.40) 0%, rgba(168,85,247,0) 55%);
  filter: blur(40px);
  opacity: 0.9;
  z-index: 0;
}

/* Dark veil so the card reads */
body:has(.kehemi-login-wrap)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(2, 6, 23, 0.28);
  z-index: 0;
}

/* Keep theme wrappers transparent so gradient shows */
body:has(.kehemi-login-wrap) #page,
body:has(.kehemi-login-wrap) .site,
body:has(.kehemi-login-wrap) #content,
body:has(.kehemi-login-wrap) .site-content,
body:has(.kehemi-login-wrap) main {
  background: transparent !important;
}

/* Center the login */
body:has(.kehemi-login-wrap) main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  position: relative;
  z-index: 1;
}

/* Glass card */
body:has(.kehemi-login-wrap) .kehemi-login-wrap {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  max-width: 620px;
  width: 100%;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow:
    0 30px 90px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.15) !important;

  position: relative;
  z-index: 1;
}

/* Text + labels inside glass */
body:has(.kehemi-login-wrap) .kehemi-login-wrap,
body:has(.kehemi-login-wrap) .kehemi-login-wrap label,
body:has(.kehemi-login-wrap) .kehemi-login-wrap a,
body:has(.kehemi-login-wrap) .kehemi-login-wrap p,
body:has(.kehemi-login-wrap) .kehemi-login-wrap div,
body:has(.kehemi-login-wrap) .kehemi-login-wrap h1,
body:has(.kehemi-login-wrap) .kehemi-login-wrap h2,
body:has(.kehemi-login-wrap) .kehemi-login-wrap h3 {
  color: rgba(255,255,255,0.92) !important;
}
/* Success / error notice boxes -- restore legible dark text */
body:has(.kehemi-login-wrap) .kehemi-login-wrap .kehemi-login-notice {
  color: #374151 !important;
}
body:has(.kehemi-login-wrap) .kehemi-login-wrap .kehemi-login-notice.notice-success {
  color: #0f5132 !important;
}
body:has(.kehemi-login-wrap) .kehemi-login-wrap .kehemi-login-notice.notice-error {
  color: #7f1d1d !important;
}

/* Inputs */
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="text"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="email"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="password"] {
  width: 100%;
  background: rgba(2,6,23,0.30) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.95) !important;
  padding: 11px 12px !important;
  outline: none;
}

/* Button – CYAN */
body:has(.kehemi-login-wrap) .kehemi-login-wrap button,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"] {
  width: 100%;
  margin-top: 14px;
  background: linear-gradient(135deg, #22d3ee, #38bdf8) !important;
  color: #020617 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow:
    0 12px 30px rgba(34,211,238,0.45),
    0 0 0 1px rgba(255,255,255,0.4) !important;
}
/* Widen Rewalld Admin Login card */
body:has(.kehemi-login-wrap) .kehemi-login-wrap {
  max-width: 620px !important;   /* try 500–560 */
}
body:has(.kehemi-login-wrap) .kehemi-login-wrap input,
body:has(.kehemi-login-wrap) .kehemi-login-wrap button {
  height: 46px;
}
/* =========================================================
   REWALLD ADMIN LOGIN – WIDTH + HOVERS + LINK ALIGN (FIXED)
   ========================================================= */

/* Make the card genuinely wide */
body:has(.kehemi-login-wrap) .kehemi-login-wrap {
  max-width: 820px !important;
  width: min(820px, calc(100vw - 32px)) !important;
}

/* Stop inner wrappers forcing a skinny column */
body:has(.kehemi-login-wrap) .kehemi-login-wrap form,
body:has(.kehemi-login-wrap) .kehemi-login-wrap > * {
  max-width: none !important;
  width: 100% !important;
}

/* Inputs + button consistent height */
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="text"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="email"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="password"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap button,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"] {
  width: 100% !important;
  height: 48px !important;
}

/* Sign In hover/active */
body:has(.kehemi-login-wrap) .kehemi-login-wrap button,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"] {
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

body:has(.kehemi-login-wrap) .kehemi-login-wrap button:hover,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 44px rgba(56,189,248,0.55),
    0 0 0 1px rgba(255,255,255,0.55) !important;
  filter: brightness(1.03);
}

body:has(.kehemi-login-wrap) .kehemi-login-wrap button:active,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"]:active {
  transform: translateY(0);
}

/* Forgot password link same width as form */
body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="forgot"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="reset"] {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 8px 2px;
  text-decoration: none !important;
}

body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="forgot"]:hover,
body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="reset"]:hover {
  text-decoration: underline !important;
}
/* Page glass background */
.kehemi-glass-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(135deg,
    #22c55e 0%,
    #06b6d4 28%,
    #3b82f6 52%,
    #a855f7 74%,
    #ec4899 100%
  );
}

.kehemi-glass-page::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 25%, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(circle at 70% 30%, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0) 55%),
    radial-gradient(circle at 60% 80%, rgba(236,72,153,0.30) 0%, rgba(236,72,153,0) 55%),
    radial-gradient(circle at 30% 85%, rgba(168,85,247,0.28) 0%, rgba(168,85,247,0) 55%);
  filter: blur(40px);
  opacity: .9;
}

.kehemi-glass-page::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: rgba(2,6,23,0.18);
}

/* Glass card wrapper */
.kehemi-glass-card {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.25);
  padding: 16px;
}

/* Header layout */
.kehemi-glass-header {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 340px) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.kehemi-glass-title {
  margin: 0;
  color: rgba(255,255,255,0.92);
}

/* Search input */
.kehemi-glass-search input {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(2,6,23,0.22);
  color: rgba(255,255,255,0.92);
  padding: 0 12px;
  outline: none;
}
.kehemi-glass-search input::placeholder { color: rgba(255,255,255,0.6); }

/* Solid grid panel inside glass */
.kehemi-grid-panel {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  overflow: hidden;
}

/* Table tweaks for “premium admin” feel */
.kehemi-grid-panel .kehemi-table thead th {
  background: #f5f7fa !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
.kehemi-grid-panel .kehemi-table tbody tr:hover {
  background: #f3f4f6;
}
.kehemi-search-wrap {
  margin: 0 0 14px;
}

.kehemi-search-wrap .kehemi-search-input {
  width: 320px !important;
  max-width: 100% !important;
  padding: 10px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: 14px;
}

/* Search input box */
.kehemi-search-input {
  width: 100%;
  max-width: 360px;
  padding: 10px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: 14px;
}
.kehemi-search-input:focus {
  outline: none;
  border-color: #22c1dc; /* your cyan */
}

.kehemi-search-input::placeholder {
  color: #999;
  letter-spacing: .02em;
}
/* HOME: fullscreen hero background row */ .home .kehemi-hero { min-height: 100vh; height: 100vh; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* remove SiteOrigin row padding that causes scroll */ padding-top: 0 !important; padding-bottom: 0 !important; }

/* Page bg */
body.kehemi-glass-page { position: relative; }

body.kehemi-glass-page::before,
body.kehemi-glass-page::after { z-index: 0; }

body.kehemi-glass-page #page,
body.kehemi-glass-page .site,
body.kehemi-glass-page #content,
body.kehemi-glass-page .site-content,
body.kehemi-glass-page main {
  position: relative;
  z-index: 1;
}
/* Space between top admin menu and first content card */
body.kehemi-glass-page .kehemi-internal-users,
body.kehemi-glass-page .kehemi-page,
body.kehemi-glass-page .kehemi-page-wide {
  margin-top: 4px;
}
body.kehemi-glass-page .kehemi-card:first-of-type {
  margin-top: 4px;
}
/* =========================================================
   KEHEMI HEADER (MINIMAL)
   - Header Overlap: push content below sticky header
   - Top of page: NO BAR, white links
   - Scrolled: TRUE GLASS BAR, black links
   - Dropdowns: always readable + on top of glass
   ========================================================= */


/* ---------- HEADER OVERLAP (SITEORIGIN THEME SAFE) ---------- */
/* Push page content down so it never sits under the fixed header */
body.kehemi-glass-page #content,
body.kehemi-glass-page .site-content,
body.kehemi-glass-page main {
  padding-top: 8px !important;
}

/* Login page must stay centered (no padding push) */
body:has(.kehemi-login-wrap) #content,
body:has(.kehemi-login-wrap) .site-content,
body:has(.kehemi-login-wrap) main {
  padding-top: 0 !important;
}


/* ---------- KILL WHITE “PILLS” / THEME BACKGROUNDS ---------- */
body.kehemi-glass-page .site-header,
body.kehemi-glass-page .site-header * {
  background: transparent !important;
  box-shadow: none !important;
}


/* ---------- TOP OF PAGE (NO BAR) ---------- */
body.kehemi-glass-page:not(.kehemi-scrolled) .site-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* White links at top */
body.kehemi-glass-page:not(.kehemi-scrolled) .site-header a {
  color: #ffffff !important;
}


/* ---------- SCROLLED (TRUE GLASS BAR) ---------- */
body.kehemi-glass-page.kehemi-scrolled .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;

  z-index: 9998; /* keep header above content, below dropdowns */
}

/* Black links on glass */
body.kehemi-glass-page.kehemi-scrolled .site-header a {
  color: #0f172a !important;
}

body.kehemi-glass-page.kehemi-scrolled .site-header a:hover {
  color: #0ea5e9 !important;
}


/* ---------- DROPDOWNS (SUB-MENU) ---------- */
/* Ensure dropdown sits above the glass header and is always readable */
body.kehemi-glass-page .site-header nav ul ul,
body.kehemi-glass-page .site-header nav .sub-menu {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  z-index: 99999 !important;
}

/* Dropdown links */
body.kehemi-glass-page .site-header nav ul ul a,
body.kehemi-glass-page .site-header nav .sub-menu a {
  color: #0f172a !important;
  background: transparent !important;
  padding: 10px 14px !important;
  display: block !important;
  white-space: nowrap !important;
}

/* Dropdown hover */
body.kehemi-glass-page .site-header nav ul ul a:hover,
body.kehemi-glass-page .site-header nav .sub-menu a:hover {
  background: rgba(14, 165, 233, 0.10) !important;
  color: #0f172a !important;
}
/* LOGIN CARD WIDTH (FINAL) */
body:has(.kehemi-login-wrap) .kehemi-login-wrap{
  max-width: 560px !important;           /* try 520–620 */
  width: min(560px, calc(100vw - 32px)) !important;
}
/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

/* Hide site title */
.site-title,
.site-branding .site-title {
  display: none !important;
}

/* Sticky footer layout */
#page,
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content,
.site-content {
  flex: 1;
}

/* Utility */
.hidden { display: none; }

/* =========================================================
   TABLES
   ========================================================= */

.kehemi-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.kehemi-table thead th {
  background: #f5f7fa !important;
  border-bottom: 2px solid #e2e8f0 !important;
  font-weight: 600;
  color: #374151;
  padding: 10px 12px;
}

.kehemi-table tbody tr:hover {
  background: #f3f4f6;
}

.kehemi-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table headers */
.kh-th {
  padding: 10px 12px;
  border-bottom: 2px solid #e2e8f0;
  font-weight: 600;
  color: #374151;
  background: #f5f7fa;
}

.kh-th-left   { text-align: left !important; }
.kh-th-center { text-align: center !important; }
.kh-th-right  { text-align: right !important; }

/* Table cells */
.kh-td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.kh-td-left   { text-align: left !important; }
.kh-td-center { text-align: center !important; }
.kh-td-right  { text-align: right !important; }
.kh-td-actions { width: 1% !important; white-space: nowrap; text-align: right !important; padding-right: 14px !important; }

.kh-nowrap { white-space: nowrap; }

/* =========================================================
   TABLE TOOLBAR
   ========================================================= */

.clients-table-toolbar {
  display: grid;
  grid-template-columns: 1fr 90px; /* matches actions column */
  align-items: center;
  margin: 0 0 10px;
  padding-right: 10px;
}

.clients-table-toolbar-actions {
  display: flex;
  justify-content: center;
}

/* =========================================================
   KEHEMI BUTTON SYSTEM  (single source of truth)
   Use .kehemi-btn as base on <a> or <button> elements.
   ========================================================= */

/* Prevent theme from forcing uppercase on any button inside Kehemi pages */
.kehemi-page button,
.kehemi-page .button,
.kehemi-page .button-primary {
  text-transform: none !important;
}

.kehemi-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  background: #e2e8f0;
  color: #374151 !important;
  box-sizing: border-box !important;
}
.kehemi-btn:hover {
  background: #cbd5e1;
  color: #1b2030 !important;
  text-decoration: none !important;
}
.kehemi-btn.kehemi-btn-primary {
  background: #0176D3;
  color: #ffffff !important;
}
.kehemi-btn.kehemi-btn-primary:hover {
  background: #014486;
  color: #ffffff !important;
}
.kehemi-btn.kehemi-btn-secondary {
  background: #1b2030;
  color: #ffffff !important;
}
.kehemi-btn.kehemi-btn-secondary:hover {
  background: #2d3748;
  color: #ffffff !important;
}
.kehemi-btn.kehemi-btn-danger {
  background: #ef4444;
  color: #ffffff !important;
}
.kehemi-btn.kehemi-btn-danger:hover {
  background: #dc2626;
  color: #ffffff !important;
}
.kehemi-btn.kehemi-btn-success {
  background: #dcfce7;
  color: #166534 !important;
}
.kehemi-btn.kehemi-btn-success:hover {
  background: #bbf7d0;
  color: #14532d !important;
}
.kehemi-btn.kehemi-btn-decline {
  background: #fee2e2;
  color: #991b1b !important;
}
.kehemi-btn.kehemi-btn-decline:hover {
  background: #fecaca;
  color: #7f1d1d !important;
}
.kehemi-btn.kehemi-btn-sm {
  padding: 5px 10px !important;
  font-size: 11px !important;
}

/* Enterprise theme — force primary buttons to Salesforce blue on all pages */
body.kh-theme-enterprise .kehemi-btn.kehemi-btn-primary,
body.kh-theme-enterprise .kehemi-btn-primary {
  background: #0176D3 !important;
  border-color: #0176D3 !important;
  color: #FFFFFF !important;
}
body.kh-theme-enterprise .kehemi-btn.kehemi-btn-primary:hover,
body.kh-theme-enterprise .kehemi-btn-primary:hover {
  background: #014486 !important;
  border-color: #014486 !important;
  color: #FFFFFF !important;
}
body.kh-theme-enterprise .kh-nav-badge {
  background: #0176D3 !important;
  color: #FFFFFF !important;
}
body.kh-theme-enterprise .select2-container--default .select2-results__option--highlighted,
body.kh-theme-enterprise .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: #0176D3 !important;
  color: #FFFFFF !important;
}

/* Enterprise — Client View Campaign teal → blue */
body.kh-theme-enterprise .kh-cv-link { color: #0176D3; }
body.kh-theme-enterprise .kh-cv-brief-dl:hover { border-color: #0176D3; background: #eff6ff; }
body.kh-theme-enterprise .kh-cv-brief-view { color: #0176D3; }
body.kh-theme-enterprise .kh-cv-edit-btn,
body.kh-theme-enterprise .kh-cvc-edit-btn { color: #0176D3; border-color: #0176D3; }
body.kh-theme-enterprise .kh-cv-edit-btn:hover,
body.kh-theme-enterprise .kh-cvc-edit-btn:hover { background: #eff6ff; color: #014486; border-color: #014486; }
/* Enterprise — Video tutorial button teal → blue */
body.kh-theme-enterprise .kh-video-btn { background: #0176D3; box-shadow: 0 4px 16px rgba(1,118,211,0.45); }
body.kh-theme-enterprise .kh-video-btn:hover { background: #014486; }

/* Legacy alias - keeps existing .button.kehemi-add-btn pages unchanged */
/* =========================================================
   ACTION ICONS (SINGLE SOURCE OF TRUTH)
   ========================================================= */

.kehemi-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kehemi-actions a,
.kehemi-actions .kehemi-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #eaeaea;
  background: #ffffff;
  color: #4b5563;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}

.kehemi-actions a:hover,
.kehemi-actions .kehemi-action-btn:hover {
  background: #f7f7f7;
}

.kehemi-actions a:active,
.kehemi-actions .kehemi-action-btn:active {
  transform: translateY(1px);
}

.kehemi-actions a:focus-visible,
.kehemi-actions .kehemi-action-btn:focus-visible {
  outline: 2px solid #00bcd4;
  outline-offset: 2px;
}

.kehemi-actions svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

/* Semantic hover colours */
.kehemi-actions [data-action="edit"]:hover            { color: #f0ce46; }
.kehemi-actions [data-action="add"]:hover             { color: #047857; }
.kehemi-actions [data-action="archive"]:hover,
.kehemi-actions [data-action="archive-client"]:hover  { color: #b91c1c; }
.kehemi-actions [data-action="restore"]:hover,
.kehemi-actions [data-action="restore-client"]:hover  { color: #047857; }

.kehemi-actions-right { justify-content: flex-end !important; }
.kehemi-action-form { margin: 0; }

/* =========================================================
   FORMS
   ========================================================= */

input[name="client_name"],
#client_name,
.kehemi-input[name="first_name"],
.kehemi-input[name="last_name"] {
  text-transform: uppercase;
}

.kehemi-input,
.kehemi-select {
  height: 44px;
  padding: 10px 12px;
  line-height: 22px;
  box-sizing: border-box;
}

.kehemi-select {
  appearance: none;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* =========================================================
   KEHEMI CARDS / NOTICES
   ========================================================= */

.kehemi-page {
  max-width: 1500px;
  margin: 0 auto;
}
.kehemi-page-wide {
  max-width: 1600px;
  margin: 0 auto;
}

.kehemi-card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 18px;
}

.kehemi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.kehemi-notice {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  margin-bottom: 14px;
}

.kehemi-notice--success { background:#f0fff4; border-color:#b7e2c2; }
.kehemi-notice--error   { background:#fff5f5; border-color:#f1b3b3; }
.kehemi-notice--warn    { background:#fffbeb; border-color:#f3d08a; }
.kehemi-notice--info    { background:#eff6ff; border-color:#b6d7ff; }

/* =========================================================
   ADMIN LOGOUT ICON
   ========================================================= */

ul#menu-admin-header {
  position: relative;
}

ul#menu-admin-header li.kehemi-logout {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

li.kehemi-logout > a {
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  color: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
}

li.kehemi-logout > a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

li.kehemi-logout > a:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}
/* =========================================================
   REWALLD ADMIN LOGIN – FORCE GRADIENT + GLASS
   Works even if page-id changes
   ========================================================= */

/* Full-screen gradient behind everything */
body:has(.kehemi-login-wrap) {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;

  background: linear-gradient(135deg,
    #22c55e 0%,
    #06b6d4 28%,
    #3b82f6 52%,
    #a855f7 74%,
    #ec4899 100%
  ) !important;
}

/* Glow blobs */
body:has(.kehemi-login-wrap)::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 25%, rgba(34,197,94,0.45) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(circle at 70% 30%, rgba(59,130,246,0.45) 0%, rgba(59,130,246,0) 55%),
    radial-gradient(circle at 60% 80%, rgba(236,72,153,0.45) 0%, rgba(236,72,153,0) 55%),
    radial-gradient(circle at 30% 85%, rgba(168,85,247,0.40) 0%, rgba(168,85,247,0) 55%);
  filter: blur(40px);
  opacity: 0.9;
  z-index: 0;
}

/* Dark veil so the card reads */
body:has(.kehemi-login-wrap)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(2, 6, 23, 0.28);
  z-index: 0;
}

/* Keep theme wrappers transparent so gradient shows */
body:has(.kehemi-login-wrap) #page,
body:has(.kehemi-login-wrap) .site,
body:has(.kehemi-login-wrap) #content,
body:has(.kehemi-login-wrap) .site-content,
body:has(.kehemi-login-wrap) main {
  background: transparent !important;
}

/* Center the login */
body:has(.kehemi-login-wrap) main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  position: relative;
  z-index: 1;
}

/* Glass card */
body:has(.kehemi-login-wrap) .kehemi-login-wrap {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  max-width: 620px;
  width: 100%;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow:
    0 30px 90px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.15) !important;

  position: relative;
  z-index: 1;
}

/* Text + labels inside glass */
body:has(.kehemi-login-wrap) .kehemi-login-wrap,
body:has(.kehemi-login-wrap) .kehemi-login-wrap label,
body:has(.kehemi-login-wrap) .kehemi-login-wrap a,
body:has(.kehemi-login-wrap) .kehemi-login-wrap p,
body:has(.kehemi-login-wrap) .kehemi-login-wrap div,
body:has(.kehemi-login-wrap) .kehemi-login-wrap h1,
body:has(.kehemi-login-wrap) .kehemi-login-wrap h2,
body:has(.kehemi-login-wrap) .kehemi-login-wrap h3 {
  color: rgba(255,255,255,0.92) !important;
}
/* Success / error notice boxes -- restore legible dark text */
body:has(.kehemi-login-wrap) .kehemi-login-wrap .kehemi-login-notice {
  color: #374151 !important;
}
body:has(.kehemi-login-wrap) .kehemi-login-wrap .kehemi-login-notice.notice-success {
  color: #0f5132 !important;
}
body:has(.kehemi-login-wrap) .kehemi-login-wrap .kehemi-login-notice.notice-error {
  color: #7f1d1d !important;
}

/* Inputs */
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="text"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="email"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="password"] {
  width: 100%;
  background: rgba(2,6,23,0.30) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.95) !important;
  padding: 11px 12px !important;
  outline: none;
}

/* Button – CYAN */
body:has(.kehemi-login-wrap) .kehemi-login-wrap button,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"] {
  width: 100%;
  margin-top: 14px;
  background: linear-gradient(135deg, #22d3ee, #38bdf8) !important;
  color: #020617 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow:
    0 12px 30px rgba(34,211,238,0.45),
    0 0 0 1px rgba(255,255,255,0.4) !important;
}
/* Widen Rewalld Admin Login card */
body:has(.kehemi-login-wrap) .kehemi-login-wrap {
  max-width: 620px !important;   /* try 500–560 */
}
body:has(.kehemi-login-wrap) .kehemi-login-wrap input,
body:has(.kehemi-login-wrap) .kehemi-login-wrap button {
  height: 46px;
}
/* =========================================================
   REWALLD ADMIN LOGIN – WIDTH + HOVERS + LINK ALIGN (FIXED)
   ========================================================= */

/* Make the card genuinely wide */
body:has(.kehemi-login-wrap) .kehemi-login-wrap {
  max-width: 820px !important;
  width: min(820px, calc(100vw - 32px)) !important;
}

/* Stop inner wrappers forcing a skinny column */
body:has(.kehemi-login-wrap) .kehemi-login-wrap form,
body:has(.kehemi-login-wrap) .kehemi-login-wrap > * {
  max-width: none !important;
  width: 100% !important;
}

/* Inputs + button consistent height */
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="text"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="email"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="password"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap button,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"] {
  width: 100% !important;
  height: 48px !important;
}

/* Sign In hover/active */
body:has(.kehemi-login-wrap) .kehemi-login-wrap button,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"] {
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

body:has(.kehemi-login-wrap) .kehemi-login-wrap button:hover,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 44px rgba(56,189,248,0.55),
    0 0 0 1px rgba(255,255,255,0.55) !important;
  filter: brightness(1.03);
}

body:has(.kehemi-login-wrap) .kehemi-login-wrap button:active,
body:has(.kehemi-login-wrap) .kehemi-login-wrap input[type="submit"]:active {
  transform: translateY(0);
}

/* Forgot password link same width as form */
body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="forgot"],
body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="reset"] {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 8px 2px;
  text-decoration: none !important;
}

body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="forgot"]:hover,
body:has(.kehemi-login-wrap) .kehemi-login-wrap a[href*="reset"]:hover {
  text-decoration: underline !important;
}
/* Page glass background */
.kehemi-glass-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(135deg,
    #22c55e 0%,
    #06b6d4 28%,
    #3b82f6 52%,
    #a855f7 74%,
    #ec4899 100%
  );
}

.kehemi-glass-page::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 25%, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(circle at 70% 30%, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0) 55%),
    radial-gradient(circle at 60% 80%, rgba(236,72,153,0.30) 0%, rgba(236,72,153,0) 55%),
    radial-gradient(circle at 30% 85%, rgba(168,85,247,0.28) 0%, rgba(168,85,247,0) 55%);
  filter: blur(40px);
  opacity: .9;
}

.kehemi-glass-page::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: rgba(2,6,23,0.18);
}

/* Glass card wrapper */
.kehemi-glass-card {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 90px rgba(0,0,0,0.25);
  padding: 16px;
}

/* Header layout */
.kehemi-glass-header {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 340px) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.kehemi-glass-title {
  margin: 0;
  color: rgba(255,255,255,0.92);
}

/* Search input */
.kehemi-glass-search input {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(2,6,23,0.22);
  color: rgba(255,255,255,0.92);
  padding: 0 12px;
  outline: none;
}
.kehemi-glass-search input::placeholder { color: rgba(255,255,255,0.6); }

/* Solid grid panel inside glass */
.kehemi-grid-panel {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 14px;
  overflow: hidden;
}

/* Table tweaks for “premium admin” feel */
.kehemi-grid-panel .kehemi-table thead th {
  background: #f5f7fa !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
.kehemi-grid-panel .kehemi-table tbody tr:hover {
  background: #f3f4f6;
}
.kehemi-search-wrap {
  margin: 0 0 14px;
}

.kehemi-search-wrap .kehemi-search-input {
  width: 320px !important;
  max-width: 100% !important;
  padding: 10px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: 14px;
}

/* Search input box */
.kehemi-search-input {
  width: 100%;
  max-width: 360px;
  padding: 10px 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: 14px;
}
.kehemi-search-input:focus {
  outline: none;
  border-color: #22c1dc; /* your cyan */
}

.kehemi-search-input::placeholder {
  color: #999;
  letter-spacing: .02em;
}
/* HOME: fullscreen hero background row */ .home .kehemi-hero { min-height: 100vh; height: 100vh; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* remove SiteOrigin row padding that causes scroll */ padding-top: 0 !important; padding-bottom: 0 !important; }

/* Page bg */
body.kehemi-glass-page { position: relative; }

body.kehemi-glass-page::before,
body.kehemi-glass-page::after { z-index: 0; }

body.kehemi-glass-page #page,
body.kehemi-glass-page .site,
body.kehemi-glass-page #content,
body.kehemi-glass-page .site-content,
body.kehemi-glass-page main {
  position: relative;
  z-index: 1;
}
/* Space between top admin menu and first content card */
body.kehemi-glass-page .kehemi-internal-users,
body.kehemi-glass-page .kehemi-page,
body.kehemi-glass-page .kehemi-page-wide {
  margin-top: 4px;
}
body.kehemi-glass-page .kehemi-card:first-of-type {
  margin-top: 4px;
}
/* =========================================================
   KEHEMI HEADER (MINIMAL)
   - Header Overlap: push content below sticky header
   - Top of page: NO BAR, white links
   - Scrolled: TRUE GLASS BAR, black links
   - Dropdowns: always readable + on top of glass
   ========================================================= */


/* ---------- HEADER OVERLAP (SITEORIGIN THEME SAFE) ---------- */
/* Push page content down so it never sits under the fixed header */
body.kehemi-glass-page #content,
body.kehemi-glass-page .site-content,
body.kehemi-glass-page main {
  padding-top: 8px !important;
}

/* Login page must stay centered (no padding push) */
body:has(.kehemi-login-wrap) #content,
body:has(.kehemi-login-wrap) .site-content,
body:has(.kehemi-login-wrap) main {
  padding-top: 0 !important;
}


/* ---------- KILL WHITE “PILLS” / THEME BACKGROUNDS ---------- */
body.kehemi-glass-page .site-header,
body.kehemi-glass-page .site-header * {
  background: transparent !important;
  box-shadow: none !important;
}


/* ---------- TOP OF PAGE (NO BAR) ---------- */
body.kehemi-glass-page:not(.kehemi-scrolled) .site-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* White links at top */
body.kehemi-glass-page:not(.kehemi-scrolled) .site-header a {
  color: #ffffff !important;
}


/* ---------- SCROLLED (TRUE GLASS BAR) ---------- */
body.kehemi-glass-page.kehemi-scrolled .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;

  z-index: 9998; /* keep header above content, below dropdowns */
}

/* Black links on glass */
body.kehemi-glass-page.kehemi-scrolled .site-header a {
  color: #0f172a !important;
}

body.kehemi-glass-page.kehemi-scrolled .site-header a:hover {
  color: #0ea5e9 !important;
}


/* ---------- DROPDOWNS (SUB-MENU) ---------- */
/* Ensure dropdown sits above the glass header and is always readable */
body.kehemi-glass-page .site-header nav ul ul,
body.kehemi-glass-page .site-header nav .sub-menu {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 10px !important;
  padding: 8px 0 !important;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important;

  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  z-index: 99999 !important;
}

/* Dropdown links */
body.kehemi-glass-page .site-header nav ul ul a,
body.kehemi-glass-page .site-header nav .sub-menu a {
  color: #0f172a !important;
  background: transparent !important;
  padding: 10px 14px !important;
  display: block !important;
  white-space: nowrap !important;
}

/* Dropdown hover */
body.kehemi-glass-page .site-header nav ul ul a:hover,
body.kehemi-glass-page .site-header nav .sub-menu a:hover {
  background: rgba(14, 165, 233, 0.10) !important;
  color: #0f172a !important;
}
/* LOGIN CARD WIDTH (FINAL) */
body:has(.kehemi-login-wrap) .kehemi-login-wrap{
  max-width: 560px !important;           /* try 520–620 */
  width: min(560px, calc(100vw - 32px)) !important;
}
/* =========================================================
   TEXTAREA (LARGE DESCRIPTION FIELDS)
   ========================================================= */

/* =========================================================
   BASE FORM CONTROLS (FORCED CONSISTENCY)
   ========================================================= */
input.kehemi-input,
textarea.kehemi-textarea,
select.kehemi-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}

/* =========================================================
   FOCUS STATE (THIN BLUE LINE – MATCHES TEXTAREA)
   ========================================================= */
input.kehemi-input:focus,
textarea.kehemi-textarea:focus,
select.kehemi-select:focus,
#client_name:focus,
#kehemi-address-input:focus {
  border-color: #22c1dc !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ALL Select2 dropdowns on any Kehemi page: cyan border when open or keyboard-focused.
   Covers client DDL, dial-code picker, contact selects, and every future Select2 widget.
   .kehemi-dial-code-wrap selector kept as a belt-and-braces fallback for customer pages
   where the dial-code wrap may not sit directly inside .kehemi-page. */
.kehemi-page .select2-container--open .select2-selection--single,
.kehemi-page .select2-container--focus .select2-selection--single,
.kehemi-page-wide .select2-container--open .select2-selection--single,
.kehemi-page-wide .select2-container--focus .select2-selection--single,
.kehemi-dial-code-wrap .select2-container--open .select2-selection--single,
.kehemi-dial-code-wrap .select2-container--focus .select2-selection--single {
  border-color: #22c1dc !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Match Select2 single-select height to native .kehemi-select (44px).
   Applies to every form-level Select2 on Kehemi pages.
   More-specific overrides (dial-code wrap = 36px, modal/product IDs = 38px)
   use !important on their own height rules to win over this rule. */
.kehemi-page .select2-container .select2-selection--single,
.kehemi-page-wide .select2-container .select2-selection--single {
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.kehemi-page .select2-container .select2-selection__rendered,
.kehemi-page-wide .select2-container .select2-selection__rendered {
  line-height: 44px;
  padding-left: 12px;
  color: #333;
}
.kehemi-page .select2-container .select2-selection__arrow,
.kehemi-page-wide .select2-container .select2-selection__arrow {
  height: 44px;
}
.select2-dropdown,
.select2-results__option {
  font-family: inherit;
  font-size: 13px;
}

/* =========================================================
   TEXTAREA ONLY
   ========================================================= */
textarea.kehemi-textarea {
  min-height: 120px;
  resize: vertical;
}

/* =========================================================
   INPUT UTILITIES
   ========================================================= */
.kehemi-input-uppercase {
  text-transform: uppercase;
}
/* =========================================================
   TOP MENU (ul#menu-admin-header) – PACK ITEMS TIGHTER
   Paste at END of site.css
   ========================================================= */

ul#menu-admin-header{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;  /* no spreading */
  gap: 6px !important;                     /* tighter spacing */
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* Tighten the clickable area + reduce “wide” feel */
ul#menu-admin-header > li > a{
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 6px !important;           
}
/* =========================================================
   KEHEMI NAV DROPDOWNS – PREMIUM (FINAL)
   Paste at END of site.css
   ========================================================= */

/* Dropdown container */
body.kehemi-glass-page .site-header nav ul ul,
body.kehemi-glass-page .site-header nav .sub-menu {
  background: rgba(255,255,255,0.78) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 6px !important;

  box-shadow: 0 16px 50px rgba(2, 6, 23, 0.18) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;

  overflow: hidden !important;
  min-width: 220px !important;
  z-index: 99999 !important;

  transform-origin: top right;
  animation: kehemiDropIn .12s ease-out;
}

@keyframes kehemiDropIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Dropdown items */
body.kehemi-glass-page .site-header nav ul ul a,
body.kehemi-glass-page .site-header nav .sub-menu a {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;

  padding: 10px 12px !important;
  border-radius: 10px !important;

  color: rgba(15, 23, 42, 0.92) !important;
  background: transparent !important;

  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Remove dividers */
body.kehemi-glass-page .site-header nav ul ul li,
body.kehemi-glass-page .site-header nav .sub-menu li {
  border: 0 !important;
}

/* Hover */
body.kehemi-glass-page .site-header nav ul ul a:hover,
body.kehemi-glass-page .site-header nav .sub-menu a:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

/* Focus */
body.kehemi-glass-page .site-header nav ul ul a:focus-visible,
body.kehemi-glass-page .site-header nav .sub-menu a:focus-visible {
  outline: 2px solid rgba(14,165,233,0.35) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   KEHEMI STAFF ADD/EDIT QUOTE
   ========================================================= */

.kehemi-staff-quote-edit .kehemi-quote-section { margin-bottom: 24px; }
.kehemi-staff-quote-edit .kehemi-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kehemi-staff-quote-edit .kehemi-form-grid-4col { grid-template-columns: repeat(4, 1fr) !important; }
.kehemi-staff-quote-edit .kehemi-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 12px; }
.kehemi-staff-quote-edit .kehemi-input { padding: 6px 8px; width: 100%; }
.kehemi-quote-actions-row { margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.kehemi-staff-quote-edit .kehemi-table { width: 100%; border-collapse: collapse; }
.kehemi-staff-quote-edit .kehemi-table th,
.kehemi-staff-quote-edit .kehemi-table td { padding: 8px; border: 1px solid #ddd; text-align: left; }
.kehemi-staff-quote-edit .kehemi-table th { background: #f5f5f5; font-weight: 600; }
.kehemi-unit-cell { position: relative; }
.kehemi-unit-cell-inner { display: flex; align-items: center; gap: 6px; }
.kehemi-unit-cell-inner .kehemi-unit-input { flex: 1; min-width: 0; }
.kehemi-custom-price-warn { flex-shrink: 0; line-height: 1; cursor: help; }
.kehemi-line-total-cell { font-weight: 600; white-space: nowrap; }
.kehemi-grand-total { margin-top: 12px; font-size: 16px; }
.kehemi-card-subtitle { margin: 4px 0 0; color: #666; font-size: 14px; }
.kehemi-search-results { max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; margin-top: 8px; }
.kehemi-search-results .kehemi-product-row { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #eee; }
.kehemi-search-results .kehemi-product-row:hover { background: #f0f7ff; }
.kehemi-tier-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.kehemi-tier-btn { padding: 8px 12px; border: 1px solid #1565c0; background: #fff; color: #1565c0; border-radius: 6px; cursor: pointer; font-size: 13px; }
.kehemi-tier-btn:hover,
.kehemi-tier-btn.selected { background: #1565c0; color: #fff; }
.kehemi-pricing-message { font-size: 13px; margin: 8px 0; padding: 8px; border-radius: 4px; }
.kehemi-pricing-message.warning { background: #fff3cd; color: #856404; }
.kehemi-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 16px; }
.kehemi-modal.is-open { display: flex !important; }
.kehemi-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.kehemi-modal-content { position: relative; background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-width: 90vw; }
.kehemi-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; }
.kehemi-modal-title { margin: 0; font-size: 1.1em; }
.kehemi-modal-close,
.kehemi-bulk-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #666; }
.kehemi-modal-body { padding: 16px; }
.kehemi-modal-footer { padding: 12px 16px; border-top: 1px solid #eee; display: flex; gap: 8px; justify-content: flex-end; }

/* =========================================================
   KEHEMI ADD/EDIT PRODUCT (inline price inputs)
   ========================================================= */

.kehemi-inline-price:focus {
  outline: 2px solid #0073aa;
  border-color: #0073aa;
  background: #fff;
}
.kehemi-inline-price:hover {
  border-color: #999;
}

/* =========================================================
   KEHEMI LIST QUOTES (staff)
   ========================================================= */

.kehemi-staff-quotes { width: 100%; box-sizing: border-box; }
.kehemi-quotes-filters { margin-bottom: 0; padding: 14px 20px; background: #f8f9fa; border-radius: 10px; }
.kehemi-filter-row-1 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.kehemi-filter-row-2 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.kh-filter-3col { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: end; }
@media (max-width: 600px) { .kh-filter-3col { grid-template-columns: 1fr; } }
.kh-filter-bar--spaced { margin-bottom: 20px; }
.kehemi-filter-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 12px; }
.kehemi-filter-select { width: 100%; padding: 6px 8px; }
.kehemi-filter-actions { display: flex; gap: 8px; }
.kehemi-search-wrap { margin: 12px 0 8px; }
.kehemi-search-input { width: 100%; max-width: 400px; }
.kehemi-table-toolbar { text-align: right; margin-bottom: 6px; }
.kehemi-column-toggle-link { font-size: 13px; color: #0073aa; text-decoration: none; }
.kehemi-column-toggle-link:hover { text-decoration: underline; }
/* Extra columns: visible by default on wide screens */
.kehemi-table th.kh-col-extra,
.kehemi-table td.kh-col-extra { display: table-cell; }
/* On laptops/smaller screens: hide by default, reveal via toggle */
@media (max-width: 1279px) {
  .kehemi-table th.kh-col-extra,
  .kehemi-table td.kh-col-extra { display: none; }
  .kehemi-table.kh-show-extra th.kh-col-extra,
  .kehemi-table.kh-show-extra td.kh-col-extra { display: table-cell; }
}
/* Hide the toggle link entirely on wide screens */
@media (min-width: 1280px) {
  .kehemi-column-toggle-link { display: none !important; }
}
.kehemi-assigned-cell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kehemi-quick-assign { max-width: 120px; padding: 4px 6px; font-size: 12px; }
.kehemi-quick-status { max-width: 110px; padding: 4px 6px; font-size: 12px; margin-right: 6px; }
.kehemi-user-initials { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #0073aa; color: #fff; font-size: 11px; font-weight: 600; }
.kehemi-region-badge { font-size: 1.1em; }
.kehemi-fulfillment-icon { cursor: help; }
.kehemi-empty-cell { padding: 24px; color: #666; text-align: center; }
.kehemi-pagination { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.kehemi-pagination-links { display: flex; gap: 8px; }
.kh-td-right { text-align: right; }
.kh-badge-draft { background: #999; color: #fff; }
.kh-badge-submitted { background: #0073aa; color: #fff; }
.kh-badge-inprogress { background: #f0a000; color: #fff; }
.kh-badge-quoted { background: #7c3aed; color: #fff; }
.kh-badge-approved { background: #00a32a; color: #fff; }
.kh-badge-declined { background: #d63638; color: #fff; }
.kh-badge-default { background: #ddd; color: #333; }
/* Campaign workflow status badges */
.kh-status-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.78em; font-weight: 600; white-space: nowrap; }
.kh-badge-inquiry { background: #6b7280; color: #fff; }
.kh-badge-proposal { background: #0073aa; color: #fff; }
.kh-badge-agreed { background: #7c3aed; color: #fff; }
.kh-badge-sup-received { background: #d97706; color: #fff; }
.kh-badge-sup-signed { background: #0891b2; color: #fff; }
.kh-badge-po { background: #4f46e5; color: #fff; }
.kh-badge-production { background: #b45309; color: #fff; }
.kh-badge-live { background: #00a32a; color: #fff; }
.kh-badge-comp-pending { background: #ea580c; color: #fff; }
.kh-badge-comp-paid { background: #15803d; color: #fff; }
.kh-badge-archived { background: #9ca3af; color: #fff; }
/* Product workflow status badges */
.kh-badge-submitted     { background: #6b7280; color: #fff; }
.kh-badge-sample-req    { background: #9333ea; color: #fff; }
.kh-badge-sample-sent   { background: #c026d3; color: #fff; }
.kh-badge-approved-p    { background: #7c3aed; color: #fff; }
.kh-badge-inprod        { background: #d97706; color: #fff; }
.kh-badge-shipped       { background: #0891b2; color: #fff; }
.kh-badge-delivered     { background: #15803d; color: #fff; }
/* 2-column form grid — reusable across forms */
.kh-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kehemi-modal-content { max-width: 440px; width: 100%; }
.kehemi-modal-close { line-height: 1; padding: 0 4px; }
.kehemi-modal-close:hover { color: #000; }
.kehemi-modal-body p { margin: 0 0 12px; }
.kehemi-clone-price-list { margin: 12px 0 0; padding-left: 20px; font-size: 13px; color: #555; }
.kehemi-clone-price-list li { margin-bottom: 4px; }
.kehemi-modal-footer { padding: 12px 16px; border-top: 1px solid #eee; text-align: right; }

/* =========================================================
   KEHEMI LIST CHATS (inbox)
   ========================================================= */

.kehemi-chat-inbox .kehemi-chats-filters-form { margin-bottom: 20px; }
.kehemi-chat-inbox .kehemi-filters-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kehemi-chat-inbox .kehemi-filters-row button { margin-left: auto; }
.kehemi-chat-inbox .kehemi-filter-group { display: flex; align-items: center; gap: 8px; }
.kehemi-chat-inbox .kehemi-filter-group label { margin: 0; font-weight: 600; font-size: 13px; white-space: nowrap; }
.kehemi-chat-inbox .kehemi-filter-group input[type="checkbox"] { margin: 0 4px 0 0; vertical-align: middle; }
.kehemi-chat-inbox .kehemi-input {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: auto;
  min-width: 200px;
}
.kehemi-chat-inbox .kehemi-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}
.kehemi-chat-inbox .kehemi-empty-state .kehemi-empty-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #333; }
.kehemi-chat-inbox .kehemi-empty-state .kehemi-empty-desc { margin: 0; color: #666; font-size: 14px; }
.kehemi-chat-inbox .kehemi-chats-table-wrap { overflow-x: auto; margin-top: 20px; }
.kehemi-chat-inbox .kehemi-table { width: 100%; border-collapse: collapse; }
.kehemi-chat-inbox .kehemi-table th,
.kehemi-chat-inbox .kehemi-table td { padding: 12px; text-align: left; border-bottom: 1px solid #e0e0e0; }
.kehemi-chat-inbox .kehemi-table th { background: #f5f5f5; font-weight: 600; font-size: 13px; text-transform: uppercase; color: #666; }
.kehemi-chat-inbox .kehemi-table .attachment-indicator { color: #666; font-size: 0.95em; }
.kehemi-chat-inbox .unread-badge { display: inline-block; padding: 2px 8px; background: #e74c3c; color: white; border-radius: 12px; font-size: 12px; font-weight: 600; }
.kehemi-chat-inbox .read-badge { color: #9e9e9e; }
.kehemi-chat-inbox .sender-type-badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-left: 4px; }
.kehemi-chat-inbox .sender-type-badge.sender-type-CLIENT { background: #27ae60; color: white; }
.kehemi-chat-inbox .sender-type-badge.sender-type-STAFF { background: #3498db; color: white; }
@media (max-width: 768px) {
  .kehemi-chat-inbox .kehemi-chats-cell-from { display: none; }
.kehemi-chat-inbox .kehemi-chats-row--unread td { background: #fff8e1; }
  .kehemi-chat-inbox .kehemi-chats-cell-message { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kehemi-chat-inbox .kehemi-chats-cell-client  { display: none; }
}

/* =========================================================
   KEHEMI LIST PRODUCT CATEGORIES / PRICING TIERS (editable, icon btn)
   ========================================================= */

.kehemi-editable:hover { background: #f0f8ff; outline: 1px solid #0073aa; }
.kehemi-editable:focus { background: #fff; outline: 2px solid #0073aa; }
.kehemi-tier-input:focus { outline: 2px solid #0073aa; border-color: #0073aa; }
.kehemi-icon-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s ease;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kehemi-icon-btn:hover { background: #f0f0f0; color: #0073aa; }
.kehemi-archive-category:hover,
.kehemi-archive-tier:hover { color: #d63638; }
.kehemi-restore-category:hover,
.kehemi-restore-tier:hover { color: #00a32a; }

/* =========================================================
   KEHEMI GRID RATE CARD (pricing + cost)
   ========================================================= */

/* Rate card — template filter bar */
.kh-rc-template-bar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.kh-rc-template-field { display: flex; flex-direction: column; gap: 4px; }
.kh-rc-template-select { min-width: 220px; }
/* Empty state */
.kh-rc-empty-state { padding: 40px; text-align: center; color: #6b7280; }
.kh-rc-tbody-empty { padding: 32px !important; color: #6b7280; }

/* Tip bar */
.kh-rc-tip {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #fff9e6;
  border-left: 4px solid #f0c040;
  border-radius: 4px;
  font-size: 13px;
  color: #7a5c00;
}

/* Legend bar */
.kh-rc-legend {
  margin-top: 16px;
  padding: 10px 14px;
  background: #f0fdf4;
  border-left: 4px solid #4caf50;
  border-radius: 4px;
  font-size: 13px;
  color: #2e7d32;
}
.kh-rc-legend-uk    { color: #1565c0; font-weight: 600; }
.kh-rc-legend-eu    { color: #ef6c00; font-weight: 600; }
.kh-rc-legend-fixed { color: #555;    font-weight: 600; }

/* Cell inner layout */
.kh-rc-cell { vertical-align: top !important; }
.kh-rc-cell-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 4px 2px;
}
.kh-rc-sell-row,
.kh-rc-cost-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-content: flex-end;
}
.kh-rc-field-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
  min-width: 22px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Sell input */
.kh-rc-sell-input {
  width: 72px;
  text-align: right;
  padding: 3px 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 12px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kh-rc-sell-input:focus { outline: 2px solid #22c1dc; border-color: #22c1dc; background: #fff; }
.kh-rc-sell-input:hover { border-color: #999; }

/* Cost input */
.kh-rc-cost-input {
  width: 72px;
  text-align: right;
  padding: 3px 5px;
  border: 1px solid #e5c97a;
  border-radius: 3px;
  font-size: 12px;
  background: #fffde7;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kh-rc-cost-input:focus { outline: 2px solid #22c1dc; border-color: #22c1dc; background: #fff; }
.kh-rc-cost-input:hover { border-color: #c9a320; }
.kh-rc-cost-input::placeholder { color: #bbb; font-style: italic; }

/* Save state flashes */
.kh-rc-saving { background: #fff9c4 !important; }
.kh-rc-saved  { background: #dcfce7 !important; }
.kh-rc-error  { background: #fee2e2 !important; border-color: #ef4444 !important; }

/* Margin badge */
.kh-rc-margin {
  font-size: 10px;
  min-height: 14px;
  text-align: right;
  width: 100%;
  padding-right: 2px;
}
.kh-margin-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
}
.kh-margin-pos { background: #dcfce7; color: #166534; }
.kh-margin-neg { background: #fee2e2; color: #b91c1c; }
.kh-margin-empty { color: #d1d5db; font-size: 10px; }

/* Existing hover retained */
.kehemi-pricing-grid tr:hover { background: #fafafa; }

/* Template group-header rows (visible only in "All products" view) */
.kh-rc-template-group-row { pointer-events: none; }
.kh-rc-template-group-row:hover { background: transparent !important; }
.kh-rc-template-group-cell {
  background: #1e2a3a !important;
  padding: 7px 16px !important;
  border-top: 2px solid #22c1dc;
  border-bottom: 1px solid #22c1dc;
}
.kh-rc-template-group-label {
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =========================================================
   QUOTE VERSIONING — version badge + version modal
   ========================================================= */

.kh-version-badge {
  display: inline-block;
  padding: 2px 7px;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: 6px;
  vertical-align: middle;
}
/* Version modal — keep content narrow and centred */
.kh-version-modal-content {
  max-width: 480px !important;
}
.kh-version-modal-content .kehemi-modal-footer {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  padding: 12px 16px !important;
  border-top: 1px solid #eee !important;
}

/* =========================================================
   QUOTE PAGE — CAMPAIGN PRODUCTS HINT + MODAL
   ========================================================= */

/* Full-width campaign search row above the options grid */
.kh-quote-campaign-search-field {
  margin-bottom: 16px;
}
.kh-quote-campaign-search-field .select2-container {
  width: 100% !important;
}

/* ── Quote product table: region flag + code display ─────────────────── */
.kh-quote-region-flag {
  font-size: 1.1rem;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── Quote form: fields locked until campaign is selected ────────────── */
.kh-quote-fields-locked {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.kh-quote-products-hint {
  padding: 10px 14px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
  font-size: 13px;
  color: #1e40af;
  margin: 0;
}
/* ── Quote product table: read-only (Add mode) cells ─────────────────── */
/* QTY and Unit Sale Price are display-only when creating a new quote.    */
.kh-fixed-value {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

/* ── Quote product table: tier grouping ───────────────────────────────── */
/* Alternating background per product group (set via JS on data-item-id) */
#kehemi-quote-items-tbody .kh-tier-group-even td {
  background-color: #fff;
}
#kehemi-quote-items-tbody .kh-tier-group-odd td {
  background-color: #f2f5ff;
}
/* Thick separator above the first row of each new product group */
#kehemi-quote-items-tbody .kh-tier-group-first td {
  border-top: 2px solid #c5cce3 !important;
}
/* First row in the group: product name in normal weight */
#kehemi-quote-items-tbody .kh-tier-group-first .kehemi-item-name {
  font-weight: 600;
}
/* Non-first rows: product name shown lighter to reduce noise */
#kehemi-quote-items-tbody tr:not(.kh-tier-group-first) .kehemi-item-name {
  color: #6c757d;
  font-size: 12px;
}
#kehemi-quote-items-tbody tr:not(.kh-tier-group-first) .kehemi-item-sku {
  opacity: 0.6;
}
/* ─────────────────────────────────────────────────────────────────────── */

/* ── Quote product table: fixed column widths ────────────────────────── */
/* Forces widths so Product/Unit Sale Price get room; Shipping/Fulfillment/
   Lead Time are kept narrow. table-layout:fixed is required.             */
#kehemi-quote-items-table {
  table-layout: fixed;
  width: 100%;
}
/* Col 1: Product  — wide so product name + SKU don't wrap */
#kehemi-quote-items-table th:nth-child(1),
#kehemi-quote-items-table td:nth-child(1) { width: 30%; }
/* Col 2: Qty */
#kehemi-quote-items-table th:nth-child(2),
#kehemi-quote-items-table td:nth-child(2) { width: 7%; text-align: center; }
/* Col 3: Unit Sale Price — wider + centred */
#kehemi-quote-items-table th:nth-child(3),
#kehemi-quote-items-table td:nth-child(3) { width: 13%; text-align: center; }
/* Col 4: Shipping — narrower */
#kehemi-quote-items-table th:nth-child(4),
#kehemi-quote-items-table td:nth-child(4) { width: 9%; text-align: center; }
/* Col 5: Fulfillment — narrower */
#kehemi-quote-items-table th:nth-child(5),
#kehemi-quote-items-table td:nth-child(5) { width: 9%; text-align: center; }
/* Col 6: Total */
#kehemi-quote-items-table th:nth-child(6),
#kehemi-quote-items-table td:nth-child(6) { width: 10%; text-align: right; }
/* Col 7: Lead Time — narrower */
#kehemi-quote-items-table th:nth-child(7),
#kehemi-quote-items-table td:nth-child(7) { width: 8%; text-align: center; }
/* Col 8: Remove button */
#kehemi-quote-items-table th:nth-child(8),
#kehemi-quote-items-table td:nth-child(8) { width: 7%; text-align: center; }
/* Prevent cell overflow from breaking layout */
#kehemi-quote-items-table td {
  word-break: break-word;
  overflow-wrap: break-word;
}
/* ─────────────────────────────────────────────────────────────────────── */

.kh-quote-modal-loading,
.kh-quote-modal-error {
  padding: 12px;
  font-size: 13px;
  color: #555;
  margin: 0;
}
.kh-quote-modal-error { color: #c00; }
.kh-quote-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* Quote — All Regions column */
.kh-quote-region-th,
.kh-quote-region-cell { white-space: nowrap; }
.kh-quote-region-th { min-width: 70px; }

/* Quote — per-region delivery addresses */
.kh-quote-per-region-addresses { display: flex; flex-direction: column; gap: 16px; }
.kh-quote-delivery-region-block { display: flex; flex-direction: column; gap: 6px; }
.kh-quote-delivery-region-label { font-size: 0.78rem; font-weight: 600; color: #374151; }
.kh-quote-delivery-region-block textarea { width: 100%; min-height: 80px; resize: vertical; }
.kh-quote-delivery-region-block .kehemi-input[type="text"] { width: 100%; }

/* =========================================================
   PRODUCT PAGE — RATE CARD PRICING TABLE (inline sell + cost)
   ========================================================= */

/* Region label cell (replaces inline background) */
.kh-prod-rc-region-cell {
  padding: 10px;
  border: 1px solid #e0e0e0;
  font-weight: 500;
  vertical-align: middle;
}
/* Apply region background via JS data-bg attribute, fallback */
.kh-prod-rc-region-cell[data-region="UK"]  { background: #e3f2fd; }
.kh-prod-rc-region-cell[data-region="EU"]  { background: #fff3e0; }
.kh-prod-rc-region-cell[data-region="US"],
.kh-prod-rc-region-cell[data-region="USA"] { background: #f3e5f5; }

/* Price cell — contains the kh-rc-cell-inner stacked layout */
.kh-prod-rc-price-cell {
  padding: 6px 10px;
  border: 1px solid #e0e0e0;
  vertical-align: top;
}
.kh-prod-rc-price-cell[data-region="UK"]  { background: #e3f2fd; }
.kh-prod-rc-price-cell[data-region="EU"]  { background: #fff3e0; }
.kh-prod-rc-price-cell[data-region="US"],
.kh-prod-rc-price-cell[data-region="USA"] { background: #f3e5f5; }

/* =========================================================
   PRODUCT — EDIT MODE CAMPAIGN HIERARCHY DISPLAY
   ========================================================= */

.kh-product-hierarchy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 6px;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  margin-bottom: 20px;
}
.kh-product-hierarchy-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kh-product-hierarchy-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0369a1;
}
.kh-product-hierarchy-value {
  font-size: 14px;
  font-weight: 600;
  color: #0c2a4a;
}
.kh-product-hierarchy-arrow {
  color: #38bdf8;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  margin-top: 12px;
}

/* =========================================================
   COST RATE CARD REPORT
   ========================================================= */

/* Filter bar */
.kh-rpt-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}
.kh-rpt-filter-group { display: flex; flex-direction: column; gap: 4px; }
.kh-rpt-template-select { min-width: 200px; }
.kh-rpt-select { min-width: 140px; }
.kh-rpt-label-input { min-width: 200px; }
.kh-rpt-filter-check { justify-content: flex-end; padding-bottom: 6px; font-size: 13px; color: #374151; }
/* Template hint bar shown when no template selected */
.kh-rpt-template-hint {
  padding: 10px 14px;
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
  font-size: 13px;
  color: #1e40af;
  margin-bottom: 16px;
}

/* Toolbar (export + count) */
.kh-rpt-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.kh-rpt-row-count { font-size: 13px; color: #6b7280; }

/* Grid wrapper */
.kh-rpt-grid-wrap { overflow-x: auto; }
.kh-rpt-grid { min-width: 1400px; font-size: 12px; }
.kh-rpt-flag { display: block; margin: 0 auto 4px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* Product column */
.kh-rpt-product-th   { min-width: 200px; z-index: 3 !important; background: #f5f7fa !important; }
.kh-rpt-product-cell { font-size: 12px; font-weight: 500; }
.kh-rpt-product-cell small { color: #9ca3af; font-weight: normal; }

/* Report label badge in title */
.kh-rpt-label-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  vertical-align: middle;
}

/* Sub-column header multi-line */
.kh-rpt-thead-sub .kh-th { line-height: 1.3; padding: 6px 8px; }
.kh-rpt-thead-sub .kh-th small { font-weight: 400; color: #6b7280; font-size: 10px; }

/* ── Tier group separators ──
   A bold left border on the group-header <th> and each tier's first sub-column
   (Cost) visually divides the groups so they don't run together.              */
.kh-rpt-grid .kh-cost-group-th {
  border-left: 3px solid #94a3b8 !important;
}
.kh-rpt-grid .kh-cost-sub-cost {
  border-left: 3px solid #94a3b8 !important;
}
.kh-rpt-grid tbody td.kh-cost-cell-cost,
.kh-rpt-grid .kh-rpt-totals-row td.kh-cost-cell-cost {
  border-left: 3px solid #94a3b8 !important;
}
/* Rate card editing grid — one td per tier, separator on each tier cell */
.kehemi-pricing-grid td.kh-rc-cell {
  border-left: 3px solid #94a3b8 !important;
}
/* Rate card tier headers (kh-th-center = tier columns only; product header lacks this class) */
.kehemi-pricing-grid th.kh-th.kh-th-center {
  border-left: 3px solid #94a3b8 !important;
}
/* Fixed Price column shares the same separator border */
.kehemi-pricing-grid .kh-rc-fixed-col {
  border-left: 3px solid #94a3b8 !important;
}

/* Rows with no cost — dimmed */
.kh-rpt-row-nocost td { opacity: 0.45; }
.kh-rpt-no-cost-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  border-radius: 3px;
}

/* Totals row */
.kh-rpt-totals-row { border-top: 2px solid #e2e8f0; }
.kh-rpt-totals-row td { background: #f8fafc !important; }
.kh-rpt-totals-label { font-size: 12px; }
.kh-rpt-totals-label small { color: #9ca3af; display: block; font-weight: normal; }
.kh-rpt-totals-cell small { color: #9ca3af; font-size: 10px; }

/* No data message */
.kh-rpt-no-data,
.kh-rpt-empty { color: #6b7280; font-size: 14px; padding: 20px 0; text-align: center; }

/* =========================================================
   COST RATE CARD
   ========================================================= */

/* Client selector form */
.kh-cost-client-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.kh-cost-client-form .kehemi-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.kh-cost-client-select { min-width: 280px; }

/* Tip / hint bars */
.kh-cost-tip {
  padding: 10px 14px;
  background: #fff9e6;
  border-left: 4px solid #f0c040;
  border-radius: 4px;
  font-size: 13px;
  color: #7a5c00;
  margin-bottom: 16px;
}
.kh-cost-hint { color: #6b7280; font-size: 14px; padding: 20px 0; }

/* Scrollable grid wrapper */
.kh-cost-grid-wrap { overflow-x: auto; }

/* Base table */
.kh-cost-grid { min-width: 1600px; font-size: 12px; }

/* Sticky product column */
.kh-col-sticky {
  position: sticky !important;
  left: 0;
  z-index: 2;
  background: #fff !important;
}
.kh-cost-product-th   { min-width: 220px; z-index: 3 !important; background: #f5f7fa !important; }
.kh-cost-product-cell { font-size: 12px; }
.kh-cost-product-cell small { color: #9ca3af; font-weight: normal; }

/* Tier group header — colour by region */
.kh-cost-group-th[data-region="UK"]   { background: #dbeafe !important; color: #1e40af; }
.kh-cost-group-th[data-region="EU"]   { background: #ffedd5 !important; color: #9a3412; }
.kh-cost-group-th[data-region="US"],
.kh-cost-group-th[data-region="USA"]  { background: #f3e8ff !important; color: #6b21a8; }
.kh-cost-group-th[data-region="APAC"],
.kh-cost-group-th[data-region="ASIA"] { background: #dcfce7 !important; color: #166534; }

/* Sub-column header tints */
.kh-cost-sub-th[data-region="UK"]   { background: #eff6ff !important; }
.kh-cost-sub-th[data-region="EU"]   { background: #fff7ed !important; }
.kh-cost-sub-th[data-region="US"],
.kh-cost-sub-th[data-region="USA"]  { background: #faf5ff !important; }
.kh-cost-sub-th[data-region="APAC"],
.kh-cost-sub-th[data-region="ASIA"] { background: #f0fdf4 !important; }

/* Body cell tints — Cost column always yellow */
.kh-cost-cell-cost   { background: #fffde7; }

/* Sell column tinted by region */
.kh-cost-cell-sell[data-region="UK"]   { background: #dbeafe; }
.kh-cost-cell-sell[data-region="EU"]   { background: #ffedd5; }
.kh-cost-cell-sell[data-region="US"],
.kh-cost-cell-sell[data-region="USA"]  { background: #f3e8ff; }
.kh-cost-cell-sell[data-region="APAC"],
.kh-cost-cell-sell[data-region="ASIA"] { background: #dcfce7; }

/* Remaining calculated cells — neutral */
.kh-cost-cell-outlay,
.kh-cost-cell-total,
.kh-cost-cell-profit,
.kh-cost-cell-pct { background: #fafafa; }

/* Cost input */
.kh-cost-input {
  width: 68px;
  text-align: right;
  padding: 3px 5px;
  border: 1px solid #e5e7eb;
  border-radius: 3px;
  font-size: 12px;
  background: #fffde7;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kh-cost-input:focus {
  outline: 2px solid #22c1dc;
  border-color: #22c1dc;
  background: #fff;
}
.kh-cost-input:hover    { border-color: #9ca3af; }
.kh-cost-input.kh-cost-saving { background: #fff9c4; }
.kh-cost-input.kh-cost-saved  { background: #dcfce7; }
.kh-cost-input.kh-cost-error  { background: #fee2e2; border-color: #ef4444; }

/* Profit / loss colours */
.kh-cost-pos  { color: #166534; font-weight: 600; }
.kh-cost-neg  { color: #b91c1c; font-weight: 600; }
.kh-cost-dash { color: #9ca3af; }

/* Legend bar */
.kh-cost-legend {
  margin-top: 16px;
  padding: 10px 14px;
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  border-radius: 4px;
  font-size: 12px;
  color: #374151;
}
.kh-cost-legend-cost   { color: #92400e; font-weight: 600; }
.kh-cost-legend-outlay { color: #374151; font-weight: 600; }
.kh-cost-legend-sell   { color: #1e40af; font-weight: 600; }
.kh-cost-legend-total  { color: #374151; font-weight: 600; }

/* =========================================================
   KEHEMI PRICING TEMPLATES
   ========================================================= */

.kehemi-pricing-templates .kehemi-template-card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: #fff; }
.kehemi-pricing-templates .kehemi-template-card-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.kehemi-pricing-templates .kehemi-template-name { font-size: 18px; font-weight: 600; padding: 4px 6px; border-radius: 4px; }
.kehemi-pricing-templates .kehemi-template-name:empty::before { content: 'Template name'; color: #999; }
.kehemi-pricing-templates .kehemi-template-badge { font-size: 12px; color: #666; background: #f0f0f0; padding: 4px 10px; border-radius: 6px; }
.kehemi-pricing-templates .kehemi-template-description-wrap { margin-bottom: 12px; }
.kehemi-pricing-templates .kehemi-template-description { font-size: 13px; color: #555; padding: 4px 6px; border-radius: 4px; display: inline-block; min-width: 120px; }
.kehemi-pricing-templates .kehemi-template-description:empty::before { content: 'Add description…'; color: #999; }
.kehemi-pricing-templates .kehemi-template-tiers { display: flex; flex-direction: column; gap: 12px; }
.kehemi-pricing-templates .kehemi-tier-group { width: 100%; }
.kehemi-pricing-templates .kehemi-tier-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kehemi-pricing-templates .kehemi-tier-check { font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.kehemi-pricing-templates .kehemi-editable:hover { background: #f0f8ff; outline: 1px solid #0073aa; }
.kehemi-pricing-templates .kehemi-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.kehemi-pricing-templates .kehemi-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 12px; }
.kehemi-empty-state { color: #666; padding: 24px; text-align: center; }
.kehemi-pricing-templates .kehemi-template-product-badge { font-size: 11px; background: #fde68a; color: #78350f; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.kehemi-pricing-templates .kehemi-template-blocked-msg { margin-top: 8px; }
.kehemi-template-product-badge { font-size: 11px; background: #fde68a; color: #78350f; padding: 2px 6px; border-radius: 10px; font-weight: 600; margin-right: 4px; }
.kh-tier-blocked-row td { padding: 0 12px 10px !important; border-top: none !important; background: transparent !important; }
.kh-tier-blocked-row .kehemi-pricing-message { margin: 0; }

/* =========================================================
   KEHEMI CAMPAIGN CHAT
   ========================================================= */

.kehemi-campaign-chat { margin-top: 30px; }
.kehemi-chat-unread-badge { display: inline-block; background: #d63638; color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-left: 10px; }
.kehemi-chat-messages { max-height: 500px; overflow-y: auto; overflow-x: hidden; padding: 20px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 15px; box-sizing: border-box; }
@media (max-width: 767px) {
  .kehemi-chat-messages { padding: 10px; }
  .kehemi-chat-message { max-width: 90%; }
  .kehemi-chat-msg-header { flex-wrap: wrap; }
  .kehemi-chat-msg-time { margin-left: 0; width: 100%; font-size: 11px; }
  .kehemi-campaign-chat { overflow: hidden; }
}
.kehemi-chat-empty { text-align: center; padding: 40px 20px; color: #999; }
.kehemi-chat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; background: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 12px; }
.kehemi-chat-legend-label { font-weight: 600; color: #666; font-size: 12px; margin-right: 4px; }
.kehemi-chat-legend-item { display: flex; align-items: center; gap: 6px; }
.kehemi-chat-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kehemi-chat-legend-type { color: #999; }
.kehemi-chat-message { margin-bottom: 16px; padding: 12px 16px; border-radius: 8px; max-width: 75%; position: relative; overflow: hidden; }
.kehemi-chat-msg-own { margin-left: auto; border-bottom-right-radius: 2px; }
.kehemi-chat-msg-other { border-bottom-left-radius: 2px; }
.kehemi-chat-msg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.kehemi-chat-msg-own .kehemi-chat-msg-header { color: rgba(255, 255, 255, 0.85); }
.kehemi-chat-msg-sender { font-weight: 600; }
.kehemi-chat-msg-type { background: rgba(0, 0, 0, 0.1); padding: 2px 6px; border-radius: 3px; font-size: 11px; text-transform: uppercase; }
.kehemi-chat-msg-time { margin-left: auto; opacity: 0.7; font-size: 12px; }
.kehemi-chat-msg-body { line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; word-break: break-word; }
.kehemi-chat-composer { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 12px; }
.kehemi-chat-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; font-family: inherit; font-size: 14px; margin-bottom: 8px; }
.kehemi-chat-input:focus { outline: none; border-color: #0073aa; box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1); }
.kehemi-chat-composer-actions { display: flex; align-items: center; justify-content: space-between; }
.kehemi-chat-char-count { font-size: 12px; color: #999; }
.kehemi-chat-send-btn { display: flex; align-items: center; gap: 6px; }
.kehemi-chat-send-icon { font-size: 16px; }
.kehemi-chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kehemi-chat-composer-left { display: flex; align-items: center; gap: 12px; }
.kehemi-chat-attach-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.kehemi-chat-attach-icon { font-size: 16px; }
.kehemi-chat-attachments { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.kehemi-chat-attachment { display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, 0.05); padding: 8px 12px; border-radius: 6px; max-width: 400px; }
.kehemi-chat-msg-own .kehemi-chat-attachment { background: rgba(255, 255, 255, 0.15); }
.kehemi-chat-attachment-icon { font-size: 24px; flex-shrink: 0; }
.kehemi-chat-attachment-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kehemi-chat-attachment-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.kehemi-chat-attachment-name:hover { text-decoration: underline; }
.kehemi-chat-msg-own .kehemi-chat-attachment-name { color: #fff; }
.kehemi-chat-attachment-size { font-size: 11px; opacity: 0.7; }
.kehemi-chat-attachment-image { display: block; width: 100%; max-width: 300px; border-radius: 6px; overflow: hidden; margin-bottom: 4px; }
.kehemi-chat-attachment-image img { width: 100%; height: auto; display: block; border-radius: 6px; }
.kehemi-chat-file-preview { margin-bottom: 12px; padding: 12px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 4px; }
.kehemi-chat-file-preview-items { display: flex; flex-direction: column; gap: 8px; }
.kehemi-chat-file-preview-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.kehemi-chat-file-preview-icon { font-size: 24px; flex-shrink: 0; }
.kehemi-chat-file-preview-info { flex: 1; min-width: 0; }
.kehemi-chat-file-preview-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kehemi-chat-file-preview-size { font-size: 11px; color: #666; }
.kehemi-chat-file-preview-status { font-size: 11px; color: #0073aa; font-style: italic; }
.kehemi-chat-file-preview-remove { background: none; border: none; color: #d63638; cursor: pointer; font-size: 18px; padding: 4px 8px; line-height: 1; border-radius: 3px; }
.kehemi-chat-file-preview-remove:hover { background: #f0f0f0; }
.kehemi-chat-messages::-webkit-scrollbar { width: 8px; }
.kehemi-chat-messages::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.kehemi-chat-messages::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.kehemi-chat-messages::-webkit-scrollbar-thumb:hover { background: #999; }

/* =========================================================
   KEHEMI CUSTOMER QUOTE REQUEST
   ========================================================= */

.kehemi-product-results { border: 1px solid #e9e9e9; border-radius: 10px; padding: 12px; background: #fafafa; }
.kehemi-product-result-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-bottom: 1px solid #eee; }
.kehemi-product-result-item:last-child { border-bottom: none; }
.kehemi-product-result-item img { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.kehemi-product-result-item .info { flex: 1; }
.kehemi-product-result-item .rrp { color: #666; font-size: 13px; }
.kehemi-product-result-item .tiers { font-size: 12px; color: #555; margin-top: 4px; }
.kehemi-selected-products .kehemi-table td { vertical-align: middle; }
.kehemi-selected-products .thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }

/* =========================================================
   KEHEMI CUSTOMER QUOTES LIST & DETAIL
   ========================================================= */

.kehemi-customer-quotes-list .kehemi-quotes-filters { margin-bottom: 20px; padding: 14px; background: #f8f9fa; border-radius: 10px; }
.kehemi-customer-quotes-list .kehemi-filter-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 600px) { .kehemi-customer-quotes-list .kehemi-filter-row { grid-template-columns: 1fr; } }
.kehemi-customer-quotes-list .kehemi-filter-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 12px; }
.kehemi-customer-quotes-list .kehemi-filter-actions { display: flex; gap: 8px; }
.kehemi-quote-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 10px 0; }
.kehemi-quote-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; position: relative; transition: all 0.3s ease; }
.kehemi-quote-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #0073aa; }
.kehemi-quote-card-status { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; }
.kehemi-quote-status-draft { background: #999; color: #fff; }
.kehemi-quote-status-submitted { background: #0073aa; color: #fff; }
.kehemi-quote-status-inprogress { background: #f0a000; color: #fff; }
.kehemi-quote-status-quoted { background: #6f42c1; color: #fff; }
.kehemi-quote-status-approved { background: #00a32a; color: #fff; }
.kehemi-quote-status-declined { background: #d63638; color: #fff; }
.kehemi-quote-status-default { background: #ddd; color: #333; }
.kehemi-quote-card-number { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: #1e1e1e; }
.kehemi-quote-card-campaign { margin: 0 0 12px; font-size: 14px; color: #555; }
.kehemi-quote-card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #666; margin-bottom: 14px; }
.kehemi-quote-card-btn { display: inline-block; width: 100%; text-align: center; }
.kehemi-quote-card-actions { display: flex; flex-direction: column; gap: 8px; }
.kh-quote-card-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  background: #d4a843 !important;
  color: #fff !important;
  border-color: #d4a843 !important;
}
.kh-quote-card-order-btn:hover {
  background: #b8902e !important;
  border-color: #b8902e !important;
  color: #fff !important;
}
.kehemi-quote-detail-status { margin-bottom: 16px; }
.kehemi-quote-status-badge { display: inline-block; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.kehemi-quote-info-table { width: 100%; margin-bottom: 24px; }
.kehemi-quote-info-table th { width: 140px; font-weight: 600; color: #555; text-align: left; }
.kehemi-quote-timeline { margin-bottom: 24px; }
.kehemi-timeline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kehemi-timeline-list li { padding: 6px 12px; background: #f0f0f0; border-radius: 8px; font-size: 14px; }
.kehemi-timeline-list li.done { background: #d4edda; color: #155724; }
.kehemi-timeline-list li.declined { background: #f8d7da; color: #721c24; }
.kehemi-quote-item-thumb { width: 50px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.kehemi-quote-item-thumb-placeholder { display: inline-block; width: 50px; height: 50px; background: #f0f0f0; border-radius: 6px; text-align: center; line-height: 50px; color: #999; }
.kehemi-quote-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.kehemi-quote-notes-existing { background: #f8f9fa; padding: 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; white-space: pre-wrap; }
.kh-cq-product-panel { border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.kh-cq-product-header { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #f8f9fa; border-bottom: 1px solid #e2e8f0; }
.kh-cq-product-img { width: 54px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; flex-shrink: 0; }
.kh-cq-product-img-placeholder { display: inline-block; width: 54px; height: 54px; background: #f0f0f0; border-radius: 6px; flex-shrink: 0; }
.kh-cq-product-info { display: flex; flex-direction: column; gap: 4px; }
.kh-cq-product-name { font-size: 15px; color: #1e1e1e; }
.kh-cq-product-sku { font-size: 12px; color: #777; }
.kh-cq-tiers-table { margin: 0; border-radius: 0; width: 100%; }
.kh-cq-tiers-table thead th { background: #fff !important; }

/* =========================================================
   REWARDS AUTH (login / forgot password)
   ========================================================= */

.rewards-auth-wrap { max-width: 420px; margin: 30px auto; padding: 22px; border: 1px solid #e6e6e6; border-radius: 16px; }
.rewards-auth-title { font-size: 22px; margin: 0 0 14px; }
.rewards-auth-field { margin: 12px 0; }
.rewards-auth-label { display: block; font-weight: 600; margin: 0 0 6px; }
.rewards-auth-input { width: 100%; padding: 12px 12px; border: 1px solid #d6d6d6; border-radius: 12px; box-sizing: border-box; }
.rewards-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.rewards-auth-btn { padding: 12px 14px; border-radius: 12px; border: 0; cursor: pointer; width: 100%; }
.rewards-auth-links { margin-top: 12px; font-size: 14px; }
.rewards-auth-links a { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   MOBILE MENU FIX
   The Corp theme hides #site-navigation ul on mobile and
   creates a SEPARATE #mobile-navigation div via JavaScript.
   The hamburger is <a id="mobile-menu-button">, not .menu-toggle.

   Two root causes:
   1. z-index: main has position:relative/z-index:1 which paints
      above #masthead (no stacking context) → menu links blocked.
      Fix: give #masthead position+z-index:9999 on mobile.
   2. background: the glass-page rule strips all .site-header *
      backgrounds. Fix: target #mobile-navigation directly.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Give #masthead a stacking context above main (z-index:1) ── */
  #masthead,
  .site-header,
  header.site-header {
    position: relative !important;
    z-index: 9999 !important;
  }

  /* ── 2. The Corp theme's dynamically-created mobile nav div ── */
  #mobile-navigation {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    background-image: none !important;
    position: relative !important;
    z-index: 9999 !important;
  }

  /* ── 3. Mobile nav UL ── */
  #mobile-navigation ul,
  #mobile-navigation .nav-menu {
    background: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #mobile-navigation li {
    background: transparent !important;
    list-style: none !important;
  }

  /* ── 4. Links – white, tappable ── */
  #mobile-navigation a {
    color: #ffffff !important;
    background: transparent !important;
    display: block !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
    cursor: pointer !important;
  }

  /* ── 5. Hover ── */
  #mobile-navigation a:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #22d3ee !important;
  }

  /* ── 6. Current page ── */
  #mobile-navigation .current-menu-item > a,
  #mobile-navigation .current_page_item > a,
  #mobile-navigation .current-menu-ancestor > a {
    color: #22d3ee !important;
    font-weight: 600 !important;
  }

  /* ── 7. Sub-menus ── */
  #mobile-navigation .sub-menu,
  #mobile-navigation ul ul {
    background: #111111 !important;
    padding-left: 0 !important;
  }

  #mobile-navigation .sub-menu a,
  #mobile-navigation ul ul a {
    padding-left: 32px !important;
    font-size: 0.9em !important;
  }

  /* ── 8. Hamburger – Corp theme uses <a id="mobile-menu-button"> ── */
  #mobile-menu-button {
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

}

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMER AREA — Layout, Sidebar Navigation, Content
   Template: page-customer.php  |  Nav: kehemi-customer-nav.php
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────────────── */
:root {
  --kh-nav-width:       260px;
  --kh-nav-collapsed:    64px;
  --kh-nav-bg:          #1b2030;
  --kh-nav-text:        #ffffff;
  --kh-nav-text-muted:  rgba(255,255,255,0.88);
  --kh-nav-active-bg:   rgba(255,255,255,0.07);
  --kh-nav-active-text: #ffffff;
  --kh-nav-hover-bg:    rgba(255,255,255,0.07);
  --kh-nav-accent:      #22c55e;
  --kh-nav-transition:  0.25s ease;
  --kh-nav-z:           1000;
}

/* ── Page body ────────────────────────────────────────────────────────── */
body.kh-customer-page {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: linear-gradient(135deg,
    #22c55e 0%,
    #06b6d4 28%,
    #3b82f6 52%,
    #a855f7 74%,
    #ec4899 100%
  );
}

/* Glow blobs */
body.kh-customer-page::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 25%, rgba(34,197,94,0.35) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(circle at 70% 30%, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0) 55%),
    radial-gradient(circle at 60% 80%, rgba(236,72,153,0.30) 0%, rgba(236,72,153,0) 55%),
    radial-gradient(circle at 30% 85%, rgba(168,85,247,0.28) 0%, rgba(168,85,247,0) 55%);
  filter: blur(40px);
  opacity: .9;
  z-index: 0;
}

/* Dark veil so content reads clearly */
body.kh-customer-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(2,6,23,0.18);
  z-index: 0;
}

/* ── Shell ────────────────────────────────────────────────────────────── */
#kh-customer-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.kh-customer-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--kh-nav-width);
  background: var(--kh-nav-bg);
  display: flex;
  flex-direction: column;
  z-index: var(--kh-nav-z);
  transition: width var(--kh-nav-transition);
  overflow: hidden;
}
.kh-customer-nav.kh-collapsed {
  width: var(--kh-nav-collapsed);
}

/* ── Toggle button (now lives in footer, styled like a nav-link) ───────── */
.kh-nav-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--kh-nav-text);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background var(--kh-nav-transition), color var(--kh-nav-transition);
}
.kh-nav-toggle:hover {
  background: var(--kh-nav-hover-bg);
  color: #fff;
}

/* ── Brand ────────────────────────────────────────────────────────────── */
.kh-nav-brand {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  flex-shrink: 0;
  text-align: center;
}
.kh-nav-brand-link {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.kh-collapsed .kh-nav-brand {
  visibility: hidden;
  opacity: 0;
}
.kh-nav-client-logo {
  display: block;
  width: 100%;
  max-height: 250px;
  object-fit: contain;
}

/* ── Nav list ─────────────────────────────────────────────────────────── */
.kh-nav-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0 8px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.kh-nav-item {
  margin-bottom: 2px;
}

/* ── Shared link / button row ─────────────────────────────────────────── */
.kh-nav-link,
.kh-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--kh-nav-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--kh-nav-transition), color var(--kh-nav-transition);
  text-align: left;
}
.kh-nav-link:visited {
  color: var(--kh-nav-text);
}
.kh-nav-link:hover,
.kh-nav-btn:hover {
  background: var(--kh-nav-hover-bg);
  color: #fff;
}
.kh-nav-link.kh-active {
  background: var(--kh-nav-active-bg);
  color: var(--kh-nav-active-text);
  box-shadow: inset 3px 0 0 var(--kh-nav-accent);
}
.kh-nav-btn.kh-open {
  background: var(--kh-nav-active-bg);
  color: var(--kh-nav-active-text);
}

/* ── Icon ─────────────────────────────────────────────────────────────── */
.kh-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  color: inherit;
}

/* ── Label ────────────────────────────────────────────────────────────── */
.kh-nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--kh-nav-transition);
}
.kh-collapsed .kh-nav-label {
  opacity: 0;
  pointer-events: none;
}

/* ── Arrow ────────────────────────────────────────────────────────────── */
.kh-nav-arrow {
  flex-shrink: 0;
  transition: transform var(--kh-nav-transition), opacity var(--kh-nav-transition);
  color: var(--kh-nav-text-muted);
}
.kh-nav-parent.kh-open .kh-nav-arrow {
  transform: rotate(180deg);
}
.kh-collapsed .kh-nav-arrow {
  opacity: 0;
}

/* ── Sub-menu ─────────────────────────────────────────────────────────── */
.kh-nav-sub {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0 0 0 42px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.kh-nav-sub.kh-sub-open {
  max-height: 400px;
}
.kh-collapsed .kh-nav-sub {
  display: none;
}
.kh-nav-sub-link {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--kh-nav-text-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--kh-nav-transition), color var(--kh-nav-transition);
}
.kh-nav-sub-link:hover {
  background: var(--kh-nav-hover-bg);
  color: #fff;
}
.kh-nav-sub-link.kh-active {
  background: rgba(34, 197, 94, 0.18);
  color: #ffffff;
  font-weight: 600;
  border-left: 3px solid #22c55e;
  padding-left: 7px;
}

/* ── Nav footer (logout) ──────────────────────────────────────────────── */
.kh-nav-footer {
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.kh-nav-logout {
  color: var(--kh-nav-text-muted);
}
.kh-nav-logout:hover {
  color: #ff6b6b;
  background: rgba(255,107,107,0.08);
}

/* ── Content area ─────────────────────────────────────────────────────── */
#kh-customer-content {
  margin-left: var(--kh-nav-width);
  flex: 1;
  min-height: 100vh;
  padding: 32px;
  transition: margin-left var(--kh-nav-transition);
}
.kh-nav-collapsed-page #kh-customer-content {
  margin-left: var(--kh-nav-collapsed);
}

/* ── Mobile overlay ───────────────────────────────────────────────────── */
.kh-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--kh-nav-z) - 1);
}
.kh-nav-overlay.kh-visible {
  display: block;
}

/* ── Mobile top bar toggle ────────────────────────────────────────────── */
.kh-mobile-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--kh-nav-z) + 1);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--kh-nav-bg);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* ── Mobile breakpoint ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .kh-customer-nav {
    transform: translateX(-100%);
    width: var(--kh-nav-width) !important;
    transition: transform var(--kh-nav-transition);
  }
  .kh-customer-nav.kh-mobile-open {
    transform: translateX(0);
  }
  #kh-customer-content {
    margin-left: 0 !important;
    padding: 60px 12px 16px !important;
  }
  .kh-mobile-toggle {
    display: flex !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .kh-mobile-toggle svg {
    display: none !important;
  }
  .kh-mobile-toggle::before {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
  }
}

/* ── Product image lightbox ──────────────────────────────────────────────── */
.kh-lightbox-thumb { cursor: zoom-in; }
.kh-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 20px;
}
.kh-lightbox-overlay.is-open { display: flex; }
.kh-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kh-lightbox-img {
  max-width: min(90vw, 900px);
  max-height: calc(100vh - 200px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
  display: block;
}
.kh-lightbox-close {
  position: absolute;
  top: -40px;
  right: -8px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
  opacity: 0.75;
  transition: opacity 0.15s;
}
.kh-lightbox-close:hover { opacity: 1; }
.kh-lightbox-caption {
  margin: 12px 0 0;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  opacity: 0.8;
  max-width: 90vw;
  overflow-wrap: break-word;
}

/* ── Delivery address display (quote add/edit) ───────────────────────────── */
.kehemi-address-display {
  margin-top: 8px;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 14px;
  line-height: 2;
  color: #333333;
}
.kehemi-address-display:empty { display: none; }
.kehemi-address-display div { padding: 0; }

/* Quote items badge — shows cursor hint when tooltip (multi-line) is present */
.kh-items-badge[title] { cursor: help; border-bottom: 1px dotted #aaa; }

/* Tiered-pricing dash in total column — no single total applies */
.kh-tiered-total { color: #999; font-style: italic; cursor: help; }

/* Centre quick-edit dropdowns in quote list table */
.kehemi-assigned-cell { display: flex; justify-content: center; }
.kehemi-quick-assign,
.kehemi-quick-status  { display: block; margin: 0 auto; }

/* Select2 — product form (campaign, category, factory, ethical audit) */
#kh-product-campaign + .select2-container,
#kh-product-category + .select2-container,
#kh-product-factory  + .select2-container,
#kh-product-audit    + .select2-container { width: 100% !important; }
#kh-product-campaign + .select2-container .select2-selection--single,
#kh-product-category + .select2-container .select2-selection--single,
#kh-product-factory  + .select2-container .select2-selection--single,
#kh-product-audit    + .select2-container .select2-selection--single {
  height: 38px !important;
  border: 1px solid #ddd;
  border-radius: 6px;
}
#kh-product-campaign + .select2-container .select2-selection__rendered,
#kh-product-category + .select2-container .select2-selection__rendered,
#kh-product-factory  + .select2-container .select2-selection__rendered,
#kh-product-audit    + .select2-container .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 10px;
  color: #333;
}
#kh-product-campaign + .select2-container .select2-selection__arrow,
#kh-product-category + .select2-container .select2-selection__arrow,
#kh-product-factory  + .select2-container .select2-selection__arrow,
#kh-product-audit    + .select2-container .select2-selection__arrow { height: 38px !important; }

/* =========================================================
   FEEDBACK & APPROVAL Q&A MODULE
   ========================================================= */

/* ── Admin: shared form grid ── */
.kh-btn-remove { background: #c0554a !important; border-color: #c0554a !important; color: #fff !important; }
.kh-btn-remove:hover { background: #a8433a !important; border-color: #a8433a !important; color: #fff !important; }
.kh-contact-no-data { color: #bbb; font-style: italic; }
.kh-qa-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kh-qa-desc-row { display: block; width: 100%; margin: 0 0 14px; }
.kh-qa-desc-row label { display: block; margin-bottom: 2px; }
.kh-qa-label-hint { display: block; font-size: 13px; color: #666; font-style: italic; margin-bottom: 6px; }
.kh-qa-desc-row textarea { width: 100%; }
textarea.kehemi-input { height: auto !important; width: 100%; }
.kh-required { color: #c00; }
.kh-qa-divider { margin: 28px 0; border: none; border-top: 1px solid #e9e9e9; }

/* ── Admin: section header (title + add button side by side) ── */
.kh-qa-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* ── Admin: inline question form ── */
.kh-qa-inline-form {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.kh-qa-inline-form-title { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: #333; }
.kh-qa-image-preview img,
.kh-qa-image-current img { max-width: 240px; max-height: 160px; object-fit: contain; border-radius: 6px; border: 1px solid #ddd; margin-top: 8px; display: block; }
.kh-qa-image-current { margin-top: 8px; }
.kh-qa-image-current label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #666; margin-top: 6px; }

/* ── Admin: question message feedback ── */
.kh-qa-question-msg { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-top: 12px; }
.kh-qa-msg-error   { background: #fdecea; color: #c62828; border: 1px solid #f5c6cb; }
.kh-qa-msg-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c3e6cb; }

/* ── Admin: question row ── */
.kh-qa-question-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 10px;
}
.kh-qa-row-left { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; }
.kh-qa-row-num { font-size: 22px; font-weight: 700; color: #b0b0b0; line-height: 1; }
.kh-qa-row-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid #ddd; display: block; }
.kh-qa-no-img { font-size: 11px; color: #bbb; text-align: center; }
.kh-qa-row-body { flex: 1; }
.kh-qa-row-text { margin: 0 0 6px; font-size: 15px; font-weight: 500; color: #222; }
.kh-qa-row-helper { margin: 4px 0 0; font-size: 13px; color: #888; }
.kh-qa-type-badge { font-size: 11px; }
.kh-qa-row-actions { display: flex; flex-direction: column; gap: 6px; }

/* ── Admin: response panel (inline in list page) ── */
.kh-qa-responses-cell { background: #f8f9fa; padding: 16px 20px !important; }
.kh-qa-resp-user-block { margin-bottom: 20px; }
.kh-qa-resp-user-name { margin: 0 0 8px; font-size: 14px; }
.kh-qa-resp-list { margin: 4px 0; padding-left: 18px; }
.kh-qa-resp-value { white-space: pre-wrap; }
.kh-qa-no-responses { color: #999; font-size: 13px; }
.kh-qa-resp-unanswered { color: #999; font-style: italic; }
.kh-qa-resp-comment { margin: 6px 0 0; padding: 6px 10px; background: #fff8e1; border-left: 3px solid #ffc107; font-size: 13px; color: #555; border-radius: 0 4px 4px 0; }
.kh-qa-type-options { color: #666; font-size: 11px; white-space: nowrap; }

/* ── Customer: set chooser ── */
.kh-qa-set-list { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.kh-qa-set-card {
  display: block;
  padding: 16px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.kh-qa-set-card:hover { border-color: #1565c0; box-shadow: 0 2px 8px rgba(21,101,192,0.1); }
.kh-qa-set-card p { margin: 6px 0 0; font-size: 14px; color: #666; }
.kh-qa-set-topic { display: block; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }

/* Client edit — created-by metadata line */
.kh-client-meta { margin: 0 0 18px; font-size: 13px; color: #888; }

/* ── Phone field: dial code + local number ── */
.kehemi-phone-wrap { display: flex; gap: 8px; align-items: center; max-width: 520px; }
.kehemi-dial-code-wrap { width: 220px; flex-shrink: 0; }
.kehemi-dial-code-wrap .select2-container { width: 100% !important; }
.kehemi-dial-code-wrap .select2-selection--single { height: 36px !important; border: 1px solid #ddd; border-radius: 6px; }
.kehemi-dial-code-wrap .select2-selection__rendered { line-height: 36px !important; padding-left: 10px; }
.kehemi-dial-code-wrap .select2-selection__arrow { height: 36px !important; }
.kehemi-phone-input { flex: 1; min-width: 160px; }

/* ── Customer: wizard card ── */
.kh-qa-wizard-card { max-width: 760px; margin-left: auto; margin-right: auto; }
.kh-qa-set-description { color: #555; font-size: 15px; margin-bottom: 20px; }

/* ── Customer: progress bar ── */
.kh-qa-progress-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.kh-qa-progress-bar { flex: 1; height: 8px; background: #e9e9e9; border-radius: 99px; overflow: hidden; }
.kh-qa-progress-fill { height: 100%; background: #1565c0; border-radius: 99px; transition: width 0.3s ease; }
.kh-qa-progress-label { font-size: 13px; color: #888; white-space: nowrap; }

/* ── Customer: step content ── */
.kh-qa-step-image { margin-bottom: 20px; text-align: center; }
.kh-qa-step-img { max-width: 100%; max-height: 360px; object-fit: contain; border-radius: 8px; border: 1px solid #e0e0e0; }
.kh-qa-step-body { margin-bottom: 24px; }
.kh-qa-question-text { font-size: 18px; font-weight: 600; color: #1b2030; margin: 0 0 10px; line-height: 1.4; }
.kh-qa-helper-text { font-size: 14px; color: #777; margin: 0 0 16px; }

/* ── Customer: yes/no buttons ── */
.kh-qa-yn-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.kh-qa-yn-btn {
  font-size: 15px !important;
  padding: 12px 32px !important;
  border-radius: 8px !important;
  border: 2px solid #ddd !important;
  background: #fff !important;
  color: #333 !important;
  transition: all 0.15s;
}
.kh-qa-yn-btn:hover { border-color: #1565c0 !important; color: #1565c0 !important; }
.kh-qa-btn-active { border-color: #1565c0 !important; background: #1565c0 !important; color: #fff !important; }

/* ── Customer: text input ── */
.kh-qa-text-input { width: 100% !important; }

/* ── Customer: list input ── */
.kh-qa-list-hint { font-size: 13px; color: #888; margin: 0 0 10px; }
.kh-qa-list-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.kh-qa-list-item { display: flex; align-items: center; gap: 8px; }
.kh-qa-list-item .kehemi-input { flex: 1; }
.kh-qa-remove-list-item { flex-shrink: 0; }

/* ── Customer: navigation ── */
.kh-qa-nav { display: flex; gap: 12px; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid #e9e9e9; }

/* ── Customer: wizard message ── */
.kh-qa-wizard-msg { margin-top: 12px; padding: 10px 14px; border-radius: 6px; font-size: 14px; }

/* ── Customer: thank-you screen ── */
.kh-qa-thankyou { text-align: center; padding: 40px 20px; }
.kh-qa-thankyou-icon { font-size: 56px; color: #198754; line-height: 1; margin-bottom: 16px; }
.kh-qa-thankyou h3 { font-size: 22px; font-weight: 700; color: #1b2030; margin: 0 0 10px; }
.kh-qa-thankyou p { font-size: 15px; color: #666; margin: 0; }

/* ── Q&A wizard: per-question comments textarea ── */
.kh-qa-comment-wrap { margin-top: 24px; padding-top: 20px; border-top: 1px dashed #e0e0e0; }
.kh-qa-comment-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.kh-qa-comment-optional { font-weight: 400; color: #999; }
.kh-qa-comment-input { width: 100%; resize: vertical; min-height: 72px; font-size: 14px; }

@media (max-width: 768px) {
  .kh-qa-form-grid { grid-template-columns: 1fr; }
  .kh-qa-responses-cell {
    padding: 10px 4px !important;
    overflow: hidden !important;
  }
  .kh-qa-question-row {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  .kh-qa-row-left {
    flex-direction: row;
    min-width: auto;
    align-items: center;
    gap: 10px;
  }
  .kh-qa-row-body { width: 100%; }
  .kh-qa-row-actions {
    flex-direction: row;
    width: 100%;
    gap: 8px;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
  }
  .kh-qa-yn-wrap { flex-direction: column; }
  .kh-qa-yn-btn { width: 100%; text-align: center; }
}

/* ==========================================================
   REWALLD PUBLIC HOMEPAGE  (shortcode: [kehemi_homepage])
   ========================================================== */

/* ── Tokens ── */
:root {
  --rw-teal:      #0d9488;
  --rw-teal-dark: #0a7a70;
  --rw-purple:    #7c3aed;
  --rw-dark:      #0f172a;
  --rw-mid:       #334155;
  --rw-muted:     #64748b;
  --rw-light-bg:  #f8fafc;
  --rw-white:     #ffffff;
  --rw-border:    #e2e8f0;
  --rw-radius:    12px;
  --rw-shadow:    0 4px 24px rgba(0,0,0,0.08);
}

/* ── Shared layout ── */
.kh-hp-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.kh-hp-section    { padding: 96px 0; background: #ffffff; }
.kh-hp-section-light { background: var(--rw-light-bg) !important; }
.kh-hp-section-dark  { background: var(--rw-dark) !important; }

.kh-hp-section-header { text-align: center; max-width: 680px; margin: 0 auto 64px; }

.kh-hp-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rw-teal); margin: 0 0 12px; }
.kh-hp-eyebrow-light { color: #5eead4; }

.kh-hp-section-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: #0f172a !important; line-height: 1.3; margin: 0 0 16px; background: none !important; background-color: transparent !important; display: block; overflow: visible; }
.kh-hp-title-light   { color: #ffffff !important; background: none !important; background-color: transparent !important; }
.kh-hp-section-sub   { font-size: 17px; color: #64748b !important; line-height: 1.7; margin: 0; }

/* ── Buttons ── */
.kh-hp-btn {
  display: inline-block; padding: 14px 28px; border-radius: 8px;
  font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
}
.kh-hp-btn:hover { transform: translateY(-2px); text-decoration: none; }
.kh-hp-btn-primary { background: var(--rw-teal); color: var(--rw-white); box-shadow: 0 4px 16px rgba(13,148,136,0.35); }
.kh-hp-btn-primary:hover { background: var(--rw-teal-dark); color: var(--rw-white); box-shadow: 0 8px 24px rgba(13,148,136,0.45); }
.kh-hp-btn-ghost { background: transparent; color: #ffffff; border: 2px solid rgba(255,255,255,0.45); }
.kh-hp-btn-ghost:hover { border-color: var(--rw-teal); color: var(--rw-teal); background: rgba(255,255,255,0.06); }
.kh-hp-btn-ghost-dark { background: transparent; color: var(--rw-dark); border: 2px solid rgba(15,23,42,0.2); font-weight: 600; }
.kh-hp-btn-ghost-dark:hover { border-color: var(--rw-teal); color: var(--rw-teal); }
.kh-hp-btn-light { background: var(--rw-white); color: var(--rw-dark); }
.kh-hp-btn-light:hover { background: #f1fafa; color: var(--rw-teal); }
.kh-hp-btn-lg { padding: 18px 36px; font-size: 16px; }

/* Force page body to white when the homepage shortcode is present,
   overriding the theme's teal/blue gradient that shows for logged-in users */
body:has(.kh-hp-hero),
body:has(.kh-hp-stats) {
  background: #ffffff !important;
  background-image: none !important;
}

/* ── Hero ── */
.kh-hp-hero {
  background: linear-gradient(135deg, var(--rw-dark) 0%, #1e293b 50%, #0f2a2a 100%);
  padding: 100px 24px 80px;
  overflow: hidden;
}
.kh-hp-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.kh-hp-hero-text {}
.kh-hp-hero-headline {
  font-size: clamp(36px, 5.5vw, 64px); font-weight: 900;
  color: var(--rw-white); line-height: 1.1; margin: 0 0 20px;
}
.kh-hp-accent { color: var(--rw-teal); }
.kh-hp-hero-sub { font-size: 18px; color: #94a3b8; line-height: 1.7; margin: 0 0 36px; max-width: 520px; }
.kh-hp-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.kh-hp-hero-visual { position: relative; }
.kh-hp-hero-img {
  width: 100%; border-radius: var(--rw-radius);
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  display: block;
}

/* ── Stats bar ── */
.kh-hp-stats {
  background: var(--rw-teal);
  padding: 28px 24px;
}
.kh-hp-stats-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 24px;
}
.kh-hp-stat { text-align: center; }
.kh-hp-stat-number { display: block; font-size: 32px; font-weight: 900; color: var(--rw-white); line-height: 1; }
.kh-hp-stat-label  { display: block; font-size: 13px; color: #99f6e4; margin-top: 4px; letter-spacing: 0.05em; }
.kh-hp-stat-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.25); }

/* ── How it works ── */
.kh-hp-steps-image { display: block; max-width: 640px; margin: 0 auto 56px; width: 100%; }
.kh-hp-steps-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.kh-hp-step { padding: 32px; background: var(--rw-white); border-radius: var(--rw-radius); box-shadow: var(--rw-shadow); border-top: 4px solid var(--rw-teal); }
.kh-hp-step-num   { font-size: 42px; font-weight: 900; color: var(--rw-teal); opacity: 0.18; line-height: 1; margin-bottom: 12px; }
.kh-hp-step-title { font-size: 20px; font-weight: 700; color: var(--rw-dark); margin: 0 0 10px; }
.kh-hp-step-desc  { font-size: 15px; color: var(--rw-muted); line-height: 1.7; margin: 0; }

/* ── Features ── */
.kh-hp-features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.kh-hp-feature-card {
  padding: 32px 28px; background: var(--rw-white); border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow); border: 1px solid var(--rw-border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.kh-hp-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.kh-hp-feature-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; background: #f0fdfa;
}
.kh-hp-feature-icon svg { width: 26px; height: 26px; color: var(--rw-teal); }
.kh-hp-icon-campaigns { background: #f0fdfa; }
.kh-hp-icon-quotes    { background: #faf5ff; } .kh-hp-icon-quotes svg    { color: var(--rw-purple); }
.kh-hp-icon-products  { background: #fff7ed; } .kh-hp-icon-products svg  { color: #ea580c; }
.kh-hp-icon-ethical   { background: #f0fdf4; } .kh-hp-icon-ethical svg   { color: #16a34a; }
.kh-hp-icon-chat      { background: #eff6ff; } .kh-hp-icon-chat svg      { color: #2563eb; }
.kh-hp-icon-portal    { background: #fff1f2; } .kh-hp-icon-portal svg    { color: #e11d48; }
.kh-hp-feature-title { font-size: 17px; font-weight: 700; color: var(--rw-dark); margin: 0 0 10px; }
.kh-hp-feature-desc, .kh-fp-feature-desc { font-size: 14px; color: var(--rw-muted); line-height: 1.7; margin: 0; }

/* ── Ethical sourcing ── */
.kh-hp-ethical-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; overflow: visible; }
.kh-hp-ethical-text { overflow: visible; }
.kh-hp-ethical-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kh-hp-badge {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 20px 18px;
  display: flex; align-items: center; gap: 10px;
  color: var(--rw-white); font-size: 14px; font-weight: 600;
}
.kh-hp-badge-icon { color: var(--rw-teal); font-size: 10px; }
.kh-hp-ethical-desc { font-size: 16px; color: #94a3b8; line-height: 1.8; margin: 0 0 32px; }

/* ── Who it's for ── */
.kh-hp-audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.kh-hp-audience-card {
  padding: 36px 28px; background: var(--rw-white); border-radius: var(--rw-radius);
  box-shadow: var(--rw-shadow); border: 1px solid var(--rw-border);
  position: relative;
}
.kh-hp-audience-featured {
  border: 2px solid var(--rw-teal);
  box-shadow: 0 8px 40px rgba(13,148,136,0.18);
}
.kh-hp-audience-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--rw-teal); color: var(--rw-white);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 20px; white-space: nowrap;
}
.kh-hp-audience-icon { width: 52px; height: 52px; background: #f0fdfa; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.kh-hp-audience-icon svg { width: 26px; height: 26px; color: var(--rw-teal); }
.kh-hp-audience-title { font-size: 18px; font-weight: 700; color: var(--rw-dark); margin: 0 0 10px; }
.kh-hp-audience-desc  { font-size: 14px; color: var(--rw-muted); line-height: 1.7; margin: 0 0 20px; }
.kh-hp-audience-list  { list-style: none; padding: 0; margin: 0; }
.kh-hp-audience-list li { font-size: 13px; color: var(--rw-mid); padding: 4px 0 4px 18px; position: relative; border-top: 1px solid var(--rw-border); }
.kh-hp-audience-list li:first-child { border-top: none; }
.kh-hp-audience-list li::before { content: '✓'; position: absolute; left: 0; color: var(--rw-teal); font-weight: 700; font-size: 12px; }

/* ── Final CTA ── */
.kh-hp-cta-section { background: linear-gradient(135deg, #f0fdfa 0%, #faf5ff 100%); padding: 96px 24px; }
.kh-hp-cta-wrap    { max-width: 680px; margin: 0 auto; text-align: center; }
.kh-hp-cta-headline { font-size: clamp(26px, 4vw, 42px); font-weight: 900; color: var(--rw-dark); margin: 0 0 16px; line-height: 1.2; }
.kh-hp-cta-sub      { font-size: 17px; color: var(--rw-muted); line-height: 1.7; margin: 0 0 36px; }
.kh-hp-cta-buttons  { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .kh-hp-features-grid { grid-template-columns: repeat(2,1fr); }
  .kh-hp-audience-grid { grid-template-columns: repeat(2,1fr); }
  .kh-hp-steps-grid    { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .kh-hp-hero-inner    { grid-template-columns: 1fr; gap: 40px; }
  .kh-hp-hero-visual   { order: -1; }
  .kh-hp-hero          { padding: 64px 24px 56px; }
  .kh-hp-stat-divider  { display: none; }
  .kh-hp-ethical-wrap  { grid-template-columns: 1fr; gap: 48px; }
  .kh-hp-steps-grid    { grid-template-columns: 1fr; }
  .kh-hp-features-grid { grid-template-columns: 1fr; }
  .kh-hp-audience-grid { grid-template-columns: 1fr; }
  .kh-hp-section       { padding: 64px 0; }
}
/* ── Nav mega-menu separator line ─────────────────────────────────────────
   Add the CSS class "kh-menu-separator" to any menu item in
   WP Admin → Appearance → Menus to give it a divider line above it.
   (Enable "CSS Classes" via Screen Options if the field is not visible.)
   ── */
.kh-menu-separator > a,
#menu-item-168 > a {
  border-top: 2px solid rgba(255,255,255,0.25) !important;
  margin-top: 10px !important;
  padding-top: 15px !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════
   IDEAS BANK — kh-ib-* components
   ═══════════════════════════════════════════════════ */

/* ── Unread badge in card title ────────────────────── */
.kh-ib-badge-unread {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  padding: 2px 9px;
  margin-left: 10px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}

/* ── Idea card list ─────────────────────────────────── */
.kh-ib-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 4px;
}

.kh-ib-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px 20px;
  transition: box-shadow 0.15s ease;
}

.kh-ib-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.kh-ib-card--unread {
  border-left: 4px solid #0d6efd;
}

.kh-ib-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.kh-ib-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  flex: 1;
}

.kh-ib-card-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.kh-ib-meta {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.kh-ib-excerpt {
  font-size: 13px;
  color: #374151;
  margin-bottom: 12px;
  line-height: 1.55;
}

.kh-ib-card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  flex-wrap: wrap;
}

.kh-ib-react-count,
.kh-ib-comment-count {
  font-size: 13px;
  color: #6b7280;
}

.kh-ib-view-btn {
  margin-left: auto;
  font-size: 12px !important;
}

/* ── Status badges ──────────────────────────────────── */
.kh-ib-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.kh-ib-status--open        { background: #dbeafe; color: #1e40af; }
.kh-ib-status--in_progress { background: #fef3c7; color: #92400e; }
.kh-ib-status--approved    { background: #d1fae5; color: #065f46; }
.kh-ib-status--rejected    { background: #fee2e2; color: #991b1b; }

/* ── "New" dot ──────────────────────────────────────── */
.kh-ib-new-dot {
  display: inline-block;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Create modal ───────────────────────────────────── */
.kh-ib-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.kh-ib-modal.is-open {
  display: flex;
}

.kh-ib-modal-inner {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  padding: 28px 32px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.kh-ib-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.kh-ib-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

/* × icon in modal header only */
.kh-ib-modal-header .kh-ib-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #9ca3af;
  padding: 0 4px;
  line-height: 1;
}

.kh-ib-modal-header .kh-ib-modal-close:hover { color: #111; }

/* Cancel button — unified style across all forms and modals.
   .kh-ib-cancel-btn kept as alias for backwards JS compat.    */
.kehemi-cancel-btn,
.kh-ib-cancel-btn {
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.kehemi-cancel-btn:hover,
.kh-ib-cancel-btn:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.kh-ib-modal-footer {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.kh-ib-full-width { width: 100% !important; }

.kh-ib-file-hint {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

.kh-ib-form-msg {
  margin: 8px 0 0;
  font-size: 13px;
  min-height: 18px;
}

.kh-ib-msg--error { color: #dc3545 !important; }
.kh-ib-msg--success { color: #198754 !important; }

/* ── Single idea view ───────────────────────────────── */
.kh-ib-single-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 13px;
  color: #6b7280;
}

.kh-ib-single-meta strong { color: #111; }

.kh-ib-status-select {
  font-size: 12px !important;
  height: 32px !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
}

.kh-ib-description {
  padding: 16px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

/* ── Reactions ──────────────────────────────────────── */
.kh-ib-reactions {
  display: flex;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}

.kh-ib-reactions .kh-ib-react-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  color: #374151;
  box-shadow: none;
  text-shadow: none;
}

.kh-ib-reactions .kh-ib-react-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #374151;
}

.kh-ib-reactions .kh-ib-react-btn.kh-ib-react-btn--active {
  background: #eff6ff;
  border-color: #0176D3;
  color: #0176D3;
}

/* ── File attachments ───────────────────────────────── */
.kh-ib-files {
  padding: 16px 0;
  border-bottom: 1px solid #f3f4f6;
}

.kh-ib-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kh-ib-comment-meta {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #9ca3af;
  font-size: 12px;
}

.kh-ib-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kh-ib-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 7px;
  font-size: 13px;
}

.kh-ib-file-icon { font-size: 16px; }

.kh-ib-file-name {
  flex: 1;
  color: #0d6efd;
  text-decoration: none;
  word-break: break-all;
}

.kh-ib-file-name:hover { text-decoration: underline; }

.kh-ib-file-size {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
}

/* Image attachment thumbnail + lightbox */
.kh-ib-img-thumb-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer; flex: 1; text-align: left;
}
.kh-ib-img-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.kh-ib-img-modal {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.85); align-items: center; justify-content: center;
}
.kh-ib-img-modal.is-open { display: flex; }
.kh-ib-img-modal-img {
  max-width: 90vw; max-height: 85vh; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.kh-ib-img-modal-close {
  position: absolute; top: 16px; right: 20px; background: none; border: none;
  color: #fff; font-size: 32px; cursor: pointer; line-height: 1;
}

/* ── Comments thread ────────────────────────────────── */
.kh-ib-comments-section {
  padding-top: 20px;
}

.kh-ib-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 16px;
  max-height: 520px;
  overflow-y: auto;
}

.kh-ib-no-comments {
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
  padding: 20px 0;
}

/* WhatsApp-style bubbles */
.kh-ib-bubble {
  display: flex;
  flex-direction: column;
  max-width: 72%;
}

.kh-ib-bubble--mine {
  align-self: flex-end;
  align-items: flex-end;
}

.kh-ib-bubble--theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.kh-ib-bubble-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.kh-ib-bubble--mine .kh-ib-bubble-meta { flex-direction: row-reverse; }

.kh-ib-bubble-author {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 5px;
}

.kh-ib-staff-tag {
  display: inline-block;
  background: #1d4ed8;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  padding: 1px 6px;
  letter-spacing: 0.3px;
}

.kh-ib-bubble-time {
  font-size: 11px;
  color: #9ca3af;
}

.kh-ib-delete-comment {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #d1d5db;
  padding: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s, color 0.1s;
}

.kh-ib-bubble:hover .kh-ib-delete-comment { opacity: 1; }
.kh-ib-delete-comment:hover { color: #dc3545; }

.kh-ib-bubble-text {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}

.kh-ib-bubble--mine .kh-ib-bubble-text {
  background: #0d6efd;
  color: #fff;
  border-bottom-right-radius: 3px;
}

.kh-ib-bubble--theirs .kh-ib-bubble-text {
  background: #f3f4f6;
  color: #111827;
  border-bottom-left-radius: 3px;
}

.kh-ib-bubble--staff.kh-ib-bubble--theirs .kh-ib-bubble-text {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.kh-ib-bubble-file {
  font-size: 12px;
  margin-top: 5px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.06);
  border-radius: 6px;
}

.kh-ib-bubble--mine .kh-ib-bubble-file { background: rgba(255,255,255,0.2); }

.kh-ib-bubble-file a {
  color: inherit;
  text-decoration: underline;
}

/* ── Comment input area ─────────────────────────────── */
.kh-ib-comment-form-wrap {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
}

.kh-ib-comment-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.kh-ib-comment-textarea {
  flex: 1;
  resize: vertical;
  min-height: 56px;
  font-size: 14px !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}

.kh-ib-comment-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.kh-ib-attach-label {
  cursor: pointer;
  font-size: 18px;
  color: #6b7280;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
  display: block;
}

.kh-ib-attach-label:hover { color: #0d6efd; background: #eff6ff; }

.kh-ib-file-input {
  display: none;
}

.kh-ib-send-btn {
  white-space: nowrap;
}

/* ── Select2 overrides inside Ideas Bank modal ──────── */

/* Prevent horizontal scrollbar caused by Select2 pixel-width calculation */
.kh-ib-modal-inner {
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Force Select2 container to stay within modal padding bounds */
#kh-ib-create-modal .select2-container {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

#kh-ib-create-modal .select2-container .select2-selection--single {
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  line-height: 38px;
  box-sizing: border-box;
  width: 100%;
}

#kh-ib-create-modal .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 38px;
  padding-left: 10px;
  padding-right: 30px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#kh-ib-create-modal .select2-container .select2-selection--single .select2-selection__arrow {
  height: 38px;
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
  .kh-ib-card-header { flex-direction: column; gap: 8px; }
  .kh-ib-card-footer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kh-ib-view-btn    { margin-left: 0; }
  .kh-ib-bubble      { max-width: 92%; }
  .kh-ib-modal-inner { padding: 20px 18px; margin: 12px; }
  .kh-ib-comment-input-row { flex-direction: column; }
  .kh-ib-comment-actions   { flex-direction: row; justify-content: flex-end; width: 100%; }
  .kh-ib-single-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =========================================================
   FORM GRID + LABEL UTILITIES
   (used by Add/Edit External Users and Add Client contact forms)
   ========================================================= */

.kehemi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.kehemi-grid-full {
  grid-column: 1 / -1;
}
.kehemi-row { display: flex; align-items: center; gap: 10px; }
.kh-activation-email-option { margin-top: 8px; }
.kh-activation-email-option .kehemi-row { margin-bottom: 6px; }

.kehemi-label {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.kehemi-help {
  color: #666;
  margin: 6px 0 0;
  font-size: 13px;
}

/* =========================================================
   ADD CLIENT — CONTACT CREATION SECTIONS
   ========================================================= */

.kh-new-contact-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 18px 20px;
  margin: 16px 0 12px;
  background: #fafafa;
}

.kh-new-contact-heading {
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 14px;
  color: #1b2030;
}

.kh-new-contact-heading .kh-optional,
.kehemi-label .kh-optional {
  font-weight: 400;
  color: #888;
  font-size: 13px;
}

.kh-contact-fields-grid {
  max-width: 720px;
}

/* =========================================================
   UTILITY
   ========================================================= */

.kh-hidden { display: none !important; }

/* =========================================================
   ADD ACCOUNT — CLIENT-DRIVEN CONTACT FIELDS
   ========================================================= */

.kh-account-contacts-wrap {
  margin: 4px 0 16px;
}

.kh-account-contact-field {
  margin-bottom: 16px;
  max-width: 520px;
}

.kh-lang-pref-sel {
  max-width: 320px;
}

.kh-contact-lang-field {
  margin-top: -4px;
}

.kh-field-note-top {
  margin: 0 0 6px;
}

.kh-contact-loading {
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}

.kh-field-note {
  display: block;
  margin-top: 4px;
  color: #888;
  font-size: 12px;
}

/* Account image row (replace inline flex) */
.kh-account-image-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.kh-image-preview {
  width: auto;
  height: 120px;
  border: 1px solid #ddd;
  padding: 8px;
  background: #fff;
  border-radius: 6px;
}

.kehemi-file-input {
  width: 100%;
  max-width: 520px;
}

/* ── Ideas Bank: Video embed ──────────────────────────────────────────────── */

/* 16:9 responsive wrapper (YouTube / Facebook) */
.kh-ib-video-section {
  margin: 0 0 20px;
}

.kh-ib-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.kh-ib-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* TikTok is portrait 9:16 — use fixed height so the %-padding trick
   does not create a huge gap (% is relative to the parent width, not max-width). */
.kh-ib-video-wrap--tiktok {
  padding-bottom: 0 !important;
  height: 578px;
  max-width: 325px;
}

/* Fallback link for unrecognised URLs */
.kh-ib-video-link-wrap {
  margin: 12px 0;
}

.kh-ib-video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a73e8;
  font-weight: 600;
  text-decoration: underline;
}

/* Small badge shown on list cards when a video is attached */
.kh-ib-video-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e8f0fe;
  color: #1a73e8;
  font-size: 11px;
  font-weight: 600;
}

/* ── Ideas Bank: Web link preview card ──────────────────────────────────── */

.kh-ib-link-preview-section {
  margin: 0 0 20px;
}

.kh-ib-link-preview {
  display: flex;
  border: 1px solid #dadce0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  max-width: 560px;
  transition: box-shadow 0.15s;
}

.kh-ib-link-preview:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.kh-ib-link-preview-image {
  flex-shrink: 0;
  width: 140px;
  background: #f1f3f4;
}

.kh-ib-link-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Favicon fallback — shown when og:image is unavailable (e.g. Amazon blocks scraping) */
.kh-ib-link-preview-image--favicon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kh-ib-link-preview-image--favicon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.kh-ib-link-preview-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.kh-ib-link-preview-site {
  font-size: 11px;
  color: #80868b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh-ib-link-preview-title {
  font-size: 14px;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kh-ib-link-preview-desc {
  font-size: 12px;
  color: #5f6368;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kh-ib-link-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 6px;
  background: #f1f3f4;
  color: #1a73e8;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s;
}

.kh-ib-link-preview-btn:hover {
  background: #e8f0fe;
  color: #1a73e8;
  text-decoration: none;
}

/* Client name label in idea meta rows */
.kh-ib-meta-client {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 11px;
  font-weight: 600;
}

.kh-ib-meta-client--all {
  background: #e8eaed;
  color: #80868b;
}

/* Small badge shown on list cards when a web link is attached */
.kh-ib-weblink-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e6f4ea;
  color: #1e8e3e;
  font-size: 11px;
  font-weight: 600;
}

/* Audit list — expiry date legend */
.kh-audit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 20px 14px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  color: #555;
}

.kh-audit-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.kh-audit-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Audit legend dot colour modifiers (replaces inline style="background:…") */
.kh-audit-legend-dot--valid    { background: #1e8e3e; }
.kh-audit-legend-dot--expiring { background: #f9ab00; }
.kh-audit-legend-dot--expired  { background: #d93025; }
.kh-audit-legend-dot--pending  { background: #80868b; }

/* Clickable audit rows (client view campaign) */
.kh-audit-row--clickable { cursor: pointer; }
.kh-audit-row--clickable:hover td { background: #f0f7ff; }

/* Audits filter form */
.kh-audits-filter-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.kh-filter-field { flex: 1; min-width: 180px; }
.kh-filter-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; }
.kh-filter-actions { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }

/* ── In-page scroll anchor (used by #chat on campaign edit page) ── */
.kh-scroll-anchor {
  display: block;
  height: 0;
  visibility: hidden;
  scroll-margin-top: 80px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   PDF TEMPLATES — management UI + product form integration
   ═══════════════════════════════════════════════════════════ */

/* ── Template list table ──────────────────────────────── */
.kh-pdf-tpl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kh-pdf-tpl-table th {
  background: #f5f7fa;
  border-bottom: 2px solid #e2e8f0;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #374151;
}
.kh-pdf-tpl-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.kh-pdf-tpl-table tr:last-child td { border-bottom: none; }
.kh-muted { color: #9ca3af; font-size: 12px; }

/* ── Template editor layout (2-pane: form + preview) ─── */
.kh-pdf-tpl-editor {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 28px !important;
  align-items: start !important;
  /* Reset any float/flex layout from SiteOrigin Corp */
  float: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
/* Ensure direct children sit in grid cells, not floated */
.kh-pdf-tpl-editor > * {
  float: none !important;
  width: auto !important;
  min-width: 0;          /* prevents grid blowout on long words */
}
@media (max-width: 900px) {
  .kh-pdf-tpl-editor {
    grid-template-columns: 1fr !important;
  }
}

/* ── Color picker row ─────────────────────────────────── */
.kh-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kh-color-row input[type="color"] {
  width: 40px;
  height: 38px;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  background: none;
}
.kh-hex-input {
  width: 100px !important;
  font-family: monospace;
}

/* ── Layout selector ──────────────────────────────────── */
.kh-layout-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.kh-layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 10px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
  font-size: 12px;
  color: #374151;
  min-width: 90px;
  text-align: center;
}
.kh-layout-option input[type="radio"] { display: none; }
.kh-layout-option.is-selected {
  border-color: #22c1dc;
  background: #f0fbff;
  color: #0369a1;
}
.kh-layout-icon {
  display: block;
  width: 52px;
  height: 36px;
  border-radius: 4px;
  background: #e2e8f0;
  position: relative;
  overflow: hidden;
}
/* Standard: image left + text right */
.kh-layout-standard::before {
  content: '';
  position: absolute;
  left: 4px; top: 4px; bottom: 4px;
  width: 40%;
  background: #94a3b8;
  border-radius: 2px;
}
.kh-layout-standard::after {
  content: '';
  position: absolute;
  right: 4px; top: 4px; bottom: 4px;
  width: 52%;
  background: #cbd5e1;
  border-radius: 2px;
}
/* Luxury: full-width bar + block */
.kh-layout-luxury::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: #475569;
  border-radius: 2px 2px 0 0;
}
.kh-layout-luxury::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; top: 56%; bottom: 4px;
  background: #cbd5e1;
  border-radius: 2px;
}
/* Minimal: thin bar + lines */
.kh-layout-minimal::before {
  content: '';
  position: absolute;
  inset: 0 0 78% 0;
  background: #64748b;
}
.kh-layout-minimal::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px; top: 32%; bottom: 4px;
  background: #e2e8f0;
  border-radius: 2px;
}

/* ── Toggle checkboxes ───────────────────────────────── */
.kh-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.kh-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 12px;
  transition: background 0.12s, border-color 0.12s;
}
.kh-toggle-label input { margin: 0; cursor: pointer; }
.kh-toggle-label:has(input:checked) {
  background: #f0fbff;
  border-color: #22c1dc;
  color: #0369a1;
}

/* ── Live preview panel ──────────────────────────────── */
.kh-pdf-tpl-preview {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  align-self: start;   /* required: sticky only works on grid/flex items with align-self:start */
}
.kh-pdf-tpl-preview-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 8px;
}
#kh-tpl-preview-frame {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #fff;
  font-size: 11px;
  line-height: 1.45;
}
#kh-tpl-prev-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #1b2030;
}
.kh-tpl-prev-htext {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.kh-tpl-prev-tagline {
  font-size: 9px;
  color: rgba(255,255,255,0.70);
  margin-top: 2px;
  min-height: 10px;
}
#kh-tpl-prev-body {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
}
.kh-tpl-prev-img-placeholder {
  width: 90px;
  flex-shrink: 0;
  height: 80px;
  background: #f1f5f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #94a3b8;
  border: 1px dashed #cbd5e1;
}
.kh-tpl-prev-details { flex: 1; }
.kh-tpl-prev-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}
.kh-tpl-prev-sku {
  font-size: 9px;
  color: #9ca3af;
  margin-bottom: 5px;
}
.kh-tpl-prev-rrp {
  font-size: 9px;
  color: #888;
  font-style: italic;
  margin-bottom: 3px;
  text-decoration: line-through;
}
.kh-tpl-prev-desc {
  font-size: 9px;
  color: #6b7280;
  line-height: 1.4;
}
.kh-tpl-prev-pricing {
  margin-top: 6px;
}
#kh-tpl-prev-pricing-bar {
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  background: #22c1dc;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
#kh-tpl-prev-footer {
  padding: 6px 14px;
  background: #f0f0f0;
  font-size: 9px;
  color: #9ca3af;
  border-top: 1px solid #e2e8f0;
  min-height: 22px;
}

/* ── PDF template row inside product form ────────────── */
.kh-pdf-tpl-product-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.kh-pdf-tpl-product-field { flex: 1; min-width: 200px; }
.kh-pdf-tpl-product-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── PDF status messages ─────────────────────────────── */
.kh-pdf-status {
  font-size: 13px;
  display: inline-block;
}
.kh-pdf-ok  { color: #16a34a; }
.kh-pdf-err { color: #dc2626; }

/* ── Form divider ─────────────────────────────────────── */
.kh-form-divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 20px 0;
}

/* Nav compacting for glass-menu is handled in glass-menu-override.css */

/* ── Quote page: approved products badge ─────────────────────────────────── */
.kh-quote-products-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.kh-quote-products-header h4 {
  margin: 0;
}
.kh-approved-products-badge {
  font-size: 12px;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Product Image Panels (add/edit product page) ─────────────────────────── */
.kh-image-panels-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.kh-image-panel {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.kh-image-panel-full {
  flex: 0 0 100%;
  margin-bottom: 20px;
}
.kh-image-panel-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  color: #333;
}
.kh-image-panel-preview {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fafafa;
}
.kh-image-panel-preview img {
  max-width: 100%;
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.kh-image-panel-empty {
  color: #bbb;
  font-size: 13px;
  text-align: center;
}
.kh-image-panel-upload {
  padding: 10px 14px 12px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.kh-image-panel-upload input[type="file"] {
  width: 100%;
  margin-bottom: 4px;
}
.kh-image-panel-upload small {
  color: #888;
}
.kh-gallery-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  min-height: 90px;
  background: #fafafa;
}
.kh-gallery-grid:empty::after {
  content: 'No gallery images uploaded yet';
  color: #bbb;
  font-size: 13px;
  align-self: center;
}
.kehemi-gallery-item {
  position: relative;
  display: inline-block;
}
.kehemi-gallery-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  display: block;
}
.kehemi-gallery-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #d63638;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kehemi-gallery-delete:hover {
  background: #b32d2e;
}
@media (max-width: 640px) {
  .kh-image-panels-row {
    flex-direction: column;
  }
}

/* ── In-card alert banners (success / error) ─────────────────────────── */
.kehemi-alert {
  margin: 12px 0 4px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.kehemi-alert-success {
  border: 1px solid #b7e2c2;
  background: #f0fff4;
  color: #166534;
}
.kehemi-alert-error {
  border: 1px solid #f1b3b3;
  background: #fff5f5;
  color: #991b1b;
}
/* ── Locked quote status (no campaign lead assigned) ─────────────────── */
.kehemi-quick-status-locked {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  border: 1px dashed #d1d5db;
  cursor: not-allowed;
  white-space: nowrap;
}
/* ─────────────────────────────────────────────────────────────────────── */

/* Narrow actions column -- just enough for a single icon button */
.kh-col-actions-narrow { width: 56px; white-space: nowrap; }
/* ── Collapsed nav: tooltip on icon hover ─────────────────────────────── */
.kh-customer-nav.kh-collapsed .kh-nav-item > [data-label] {
  position: relative;
}
/* ── Campaign status badges ────────────────────────────────────────────── */
.kh-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

/* ── Approval badges (Internal / Customer columns) — same pill shape ─── */
.kh-approval-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.kh-badge-pending  { background: #e2e8f0; color: #475569; }
.kh-badge-rejected { background: #fee2e2; color: #991b1b; }
.kh-badge-revision { background: #fef3c7; color: #92400e; }
.kh-badge-default         { background: #e2e8f0; color: #475569; }
.kh-badge-inquiry         { background: #e0f2fe; color: #0369a1; }
.kh-badge-proposal        { background: #ede9fe; color: #5b21b6; }
.kh-badge-agreed          { background: #dcfce7; color: #166534; }
.kh-badge-sup-received    { background: #fef9c3; color: #854d0e; }
.kh-badge-sup-signed      { background: #fef3c7; color: #92400e; }
.kh-badge-po              { background: #ffedd5; color: #9a3412; }
.kh-badge-production      { background: #dbeafe; color: #1e40af; }
.kh-badge-live            { background: #bbf7d0; color: #14532d; }
.kh-badge-comp-pending    { background: #fce7f3; color: #9d174d; }
.kh-badge-comp-paid       { background: #d1fae5; color: #064e3b; }
.kh-badge-archived        { background: #f1f5f9; color: #64748b; }

/* ── Shared table utilities ────────────────────────────────────────────── */
.kh-table-scroll { overflow: auto; }
.kh-empty-cell   { padding: 16px 12px; color: #666; font-size: 14px; }
.kh-muted        { color: #aaa; }

.kh-customer-nav.kh-collapsed .kh-nav-item > [data-label]:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(var(--kh-nav-collapsed) - 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* ── Table actions column — shrinks to fit, right-aligned ────────────────── */
.kh-col-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-left: 16px;
  padding-right: 16px;
}
.kehemi-actions--right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* ── Table row action icons (ghost, icon-only) ────────────────────────────── */
/*
   Standard usage:
     Edit:    class="kh-action-icon kh-action-icon--edit"   → yellow hover
     Archive: class="kh-action-icon"                        → cyan hover
     Restore: class="kh-action-icon"                        → cyan hover
     Delete (permanent): class="kh-action-icon kh-action-icon--danger" → red hover
*/
.kh-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #5b6e96;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.kh-action-icon:hover {
  color: #22c1dc;
  background: rgba(34, 193, 220, 0.10);
  text-decoration: none;
}
/* Edit: amber/yellow hover */
.kh-action-icon--edit { color: #5b6e96; }
.kh-action-icon--edit:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.10);
  text-decoration: none;
}
/* Flag picker — custom image picker */
.kh-flag-picker { position:relative; display:inline-block; }
.kh-flag-picker-btn { background:#fff !important; border:1px solid #d0d0d0 !important; border-radius:4px; padding:3px 7px; cursor:pointer; height:30px; min-width:46px; display:inline-flex !important; align-items:center; justify-content:center; color:inherit !important; box-shadow:none !important; }
.kh-flag-picker-btn:hover { border-color:#999 !important; }
/* Add form flag picker — full width, same height as other inputs */
#kh-new-flag-picker { display:block; }
#kh-new-flag-picker .kh-flag-picker-btn { width:100%; height:36px; justify-content:center; }
.kh-flag-picker-empty { color:#aaa; font-size:11px; white-space:nowrap; }
.kh-flag-img { border-radius:2px; vertical-align:middle; display:block; }
.kh-flag-picker-dropdown { position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid #d0d0d0; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,0.18); padding:6px; z-index:9999; display:grid; grid-template-columns:repeat(5,1fr); gap:3px; min-width:180px; }
.kh-flag-picker-dropdown.kh-cvc-hidden { display:none; }
.kh-flag-picker-option { background:none; border:1px solid transparent; border-radius:3px; padding:3px 4px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
.kh-flag-picker-option:hover { background:#f4f4f4; border-color:#ccc; }
.kh-flag-picker-option.kh-flag-selected { background:#e8f9fc; border-color:#22c1dc; }
.kh-flag-picker-clear { font-size:11px; color:#888; grid-column:1/-1; border-bottom:1px solid #eee; padding-bottom:5px; margin-bottom:2px; justify-content:flex-start; gap:4px; }

/* Locked — approved+signed proof; non-interactive, muted padlock */
.kh-action-icon--archive { color: #6b7280; }
.kh-action-icon--archive:hover { color: #374151; background: rgba(107,114,128,.10); }
.kh-action-icon--locked {
  color: #22c1dc;
  cursor: default;
  pointer-events: none;
  opacity: 0.75;
}
/* Danger (archive / permanent delete) — chained selector beats any single-class rule */
.kh-action-icon.kh-action-icon--danger,
a.kh-action-icon.kh-action-icon--danger { color: #c0392b !important; }
.kh-action-icon.kh-action-icon--danger:hover,
a.kh-action-icon.kh-action-icon--danger:hover {
  color: #e74c3c !important;
  background: rgba(192, 57, 43, 0.10) !important;
  text-decoration: none;
}
.kh-action-icon svg { display: block; flex-shrink: 0; width: 18px; height: 18px; }
/* Override legacy .kehemi-actions bordered-box style when kh-action-icon is added */
.kehemi-actions a.kh-action-icon,
.kehemi-actions .kh-action-icon {
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  width: 28px !important;
  height: 28px !important;
  color: #5b6e96 !important;
}
.kehemi-actions a.kh-action-icon:hover,
.kehemi-actions .kh-action-icon:hover {
  color: #22c1dc !important;
  background: rgba(34, 193, 220, 0.10) !important;
}
.kehemi-actions a.kh-action-icon--edit:hover,
.kehemi-actions .kh-action-icon--edit:hover {
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.10) !important;
}
/* Danger inside .kehemi-actions — triple-class beats (0,2,1) a.kh-action-icon override */
.kehemi-actions .kh-action-icon.kh-action-icon--danger,
.kehemi-actions a.kh-action-icon.kh-action-icon--danger { color: #c0392b !important; }
.kehemi-actions .kh-action-icon.kh-action-icon--danger:hover,
.kehemi-actions a.kh-action-icon.kh-action-icon--danger:hover {
  color: #e74c3c !important;
  background: rgba(192, 57, 43, 0.10) !important;
}

/* ── Email duplicate-check inline warning ─────────────────────────────────── */
.kh-email-exists-warning {
  display: block;
  font-size: 12px;
  min-height: 16px;
  margin-top: 4px;
}
.kh-email-exists-warning--checking {
  color: #888;
}
.kh-email-exists-warning--error {
  color: #c0392b;
  font-weight: 600;
}
/* ============================================================
   Design Approval Module (DA001)
   Appended: 2026-03-06
   ============================================================ */

/* ── Status badge variants (DA) ─────────────────────────────── */
.kh-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.kh-badge--neutral  { background: #e5e7eb; color: #374151; }
.kh-badge--info     { background: #dbeafe; color: #1e40af; }
.kh-badge--warning  { background: #fef3c7; color: #92400e; }
.kh-badge--success  { background: #d1fae5; color: #065f46; }
.kh-badge--campaign { background: #e0f2fe; color: #0369a1; }
.kh-badge--danger   { background: #fee2e2; color: #991b1b; }
.kh-badge--muted    { background: #f3f4f6; color: #6b7280; }
.kh-badge--teal     { background: #ccfbf1; color: #0f766e; }
.kh-badge--xs       { font-size: 0.62rem; padding: 1px 5px; }

/* ── Proof list page ─────────────────────────────────────────── */
.kh-dp-status-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.kh-dp-tab {
  display: inline-block; padding: 6px 14px; border-radius: 6px;
  font-size: 0.82rem; font-weight: 500; text-decoration: none;
  color: #374151; background: #f3f4f6; border: 1px solid #e5e7eb;
  transition: background 0.15s, color 0.15s;
}
.kh-dp-tab:hover { background: #e5e7eb; color: #111827; }
.kh-dp-tab--active { background: #22c1dc; color: #fff; border-color: #22c1dc; }
.kh-row--expired { opacity: 0.65; }

/* ── Proof builder form ──────────────────────────────────────── */
.kh-dp-section { margin-bottom: 32px; }
.kh-dp-section__title { font-size: 1rem; font-weight: 600; color: #1a1a2e; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid #e5e7eb; }
.kh-dp-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kh-dp-section__header .kh-dp-section__title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }

/* Item cards */
.kh-dp-item-card {
  border: 1px solid #e5e7eb; border-radius: 8px;
  margin-bottom: 16px; overflow: hidden;
}
.kh-dp-item-card__header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.kh-dp-add-item-row { display: flex; justify-content: flex-start; padding: 12px 0 4px; }
.kh-dp-item-card__sort-btns { display: flex; gap: 2px; flex-shrink: 0; }
.kh-dp-item-card__sort-btns .kh-action-icon { padding: 2px; }
.kh-dp-item-card__sort-btns .kh-action-icon:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.kh-dp-item-card__title { flex: 1; font-weight: 600; font-size: 0.88rem; color: #374151; margin: 0; }
.kh-dp-item-card > .kehemi-grid { padding: 14px; }

/* Mockup area */
.kh-dp-mockup-area { padding: 0 14px 14px; }
.kh-dp-mockup-upload-zone { display: flex; align-items: center; gap: 10px; }
.kh-dp-mockup-name { font-size: 0.8rem; color: #6b7280; }
.kh-dp-mockup-thumb { max-width: 120px; max-height: 80px; object-fit: contain; border-radius: 4px; border: 1px solid #e5e7eb; }
.kh-dp-mockup-preview { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.kh-dp-mockup-preview--hidden { display: none; }
.kh-dp-mockup-area .kehemi-select { margin-bottom: 0; }

/* ── Staff Preview page ──────────────────────────────────────────────────── */
.kh-dp-preview-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; padding: 12px 18px; margin-bottom: 20px;
  background: #fffbeb; border: 1px solid #f59e0b; border-radius: 8px;
  font-size: 0.9rem; color: #78350f;
}
.kh-dp-preview-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-right: 6px; vertical-align: middle; }
.kh-dp-preview-banner__text { display: flex; align-items: center; gap: 4px; }
.kh-dp-preview-banner__actions { display: flex; gap: 8px; }
.kh-dp-preview-ghost-action {
  margin-top: 16px; padding: 12px 16px;
  border: 1px dashed #d1d5db; border-radius: 6px;
  background: #f9fafb; color: #6b7280; font-size: 0.85rem; text-align: center;
}
.kh-da-zoom-modal.kh-da-zoom-modal--hidden { display: none !important; }
.kh-dp-mockup-pdf-icon { font-size: 0.8rem; color: #6b7280; }

/* Form actions row */
.kh-dp-form-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid #e5e7eb; }

/* Product page Design Proofs section */
.kh-dp-product-section { margin-top: 24px; }

/* ── Customer approval flow ──────────────────────────────────── */
.kh-da-page { max-width: 900px; margin: 0 auto; }

/* Progress bar */
.kh-da-progress {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 32px; flex-wrap: nowrap; gap: 0;
}
.kh-da-progress__step {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 60px; text-align: center;
}
.kh-da-progress__num {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  background: #e5e7eb; color: #6b7280;
  border: 2px solid #e5e7eb; transition: background 0.2s, color 0.2s;
}
.kh-da-progress__label { font-size: 0.72rem; color: #9ca3af; }
.kh-da-progress__step--active .kh-da-progress__num   { background: #22c1dc; color: #fff; border-color: #22c1dc; }
.kh-da-progress__step--active .kh-da-progress__label { color: #22c1dc; font-weight: 600; }
.kh-da-progress__step--done .kh-da-progress__num     { background: #d1fae5; color: #065f46; border-color: #34d399; }
.kh-da-progress__line { flex: 1; height: 2px; background: #e5e7eb; min-width: 20px; }
.kh-da-progress__line--done { background: #34d399; }

/* Intro / meta */
.kh-da-intro { margin-bottom: 20px; color: #374151; }
.kh-da-actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.kh-da-proof-meta { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.kh-da-proof-meta__row { display: flex; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; }
.kh-da-proof-meta__row:last-child { border-bottom: none; }
.kh-da-proof-meta__label { font-weight: 600; width: 160px; flex-shrink: 0; color: #6b7280; font-size: 0.88rem; }
.kh-da-proof-meta__value { color: #111827; font-size: 0.88rem; }

/* Item summary (step 2) */
.kh-da-items-heading { font-size: 0.95rem; font-weight: 600; color: #1a1a2e; margin: 0 0 12px; }
.kh-da-items-summary { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.kh-da-item-summary-row { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; }
.kh-da-item-summary-thumb {
  width: 60px; height: 60px; object-fit: cover; border-radius: 4px;
  border: 1px solid #e5e7eb; flex-shrink: 0;
}
.kh-da-item-summary-thumb--placeholder {
  width: 60px; height: 60px; background: #f3f4f6; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; color: #9ca3af;
  flex-shrink: 0; border: 1px solid #e5e7eb;
}
.kh-da-item-summary-name { flex: 1; }
.kh-da-item-meta-pill { display: inline-block; padding: 1px 7px; background: #f3f4f6; border-radius: 10px; font-size: 0.72rem; color: #6b7280; margin-left: 6px; }

/* Item review card (step 3) */
.kh-da-review-progress { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.kh-da-review-progress__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #e5e7eb; transition: background 0.2s;
}
.kh-da-review-progress__dot--active   { background: #22c1dc; }
.kh-da-review-progress__dot--approved { background: #34d399; }
.kh-da-review-progress__dot--revision { background: #fb923c; }

.kh-da-item-card-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) {
  .kh-da-item-card-layout { grid-template-columns: 1fr; }
}

.kh-da-mockup-img-wrapper { position: relative; }
.kh-da-mockup-img { width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; cursor: zoom-in; }
.kh-da-mockup-zoom-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.95); border: 1px solid #9ca3af;
  border-radius: 6px; padding: 5px 7px; cursor: pointer; color: #374151;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.15s, box-shadow 0.15s;
}
.kh-da-mockup-zoom-btn:hover { background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.35); }
.kh-da-mockup-pdf-wrapper { width: 100%; aspect-ratio: 3/4; }
.kh-da-mockup-pdf-wrapper embed { width: 100%; height: 100%; border-radius: 6px; }
.kh-da-mockup-placeholder {
  aspect-ratio: 3/4; background: #f9fafb; border: 2px dashed #e5e7eb;
  border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #9ca3af;
}

.kh-da-item-product-name { font-size: 1.25rem; font-weight: 700; color: #1a1a2e; margin: 0 0 16px; }
.kh-da-item-specs { margin: 0 0 16px; }
.kh-da-item-specs dt { font-weight: 600; font-size: 0.8rem; color: #6b7280; margin-top: 8px; }
.kh-da-item-specs dd { margin: 2px 0 0; color: #111827; font-size: 0.9rem; }

.kh-da-artwork-notes {
  background: #fefce8; border: 1px solid #fde68a; border-radius: 6px;
  padding: 12px; margin-bottom: 16px;
}
.kh-da-artwork-notes strong { display: block; font-size: 0.8rem; color: #92400e; margin-bottom: 4px; }
.kh-da-artwork-notes p { margin: 0; font-size: 0.88rem; color: #78350f; }

/* Orange "visual purposes only" bar */
.kh-da-visual-only-bar {
  background: #E85D04; color: #fff;
  padding: 8px 12px; border-radius: 4px;
  font-size: 0.78rem; font-weight: 600; margin-bottom: 20px;
  text-align: center;
}

/* Per-item decisions */
.kh-da-item-decisions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kh-da-approve-btn { border-color: #34d399; color: #065f46; }
.kh-da-approve-btn:hover { background: #d1fae5; }
.kh-da-revise-btn  { border-color: #fb923c; color: #9a3412; }
.kh-da-revise-btn:hover  { background: #ffedd5; }
.kh-da-decision-selected { font-weight: 700; box-shadow: 0 0 0 2px currentColor; }

/* Zoom modal */
.kh-da-zoom-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.kh-da-zoom-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); }
.kh-da-zoom-modal__content { position: relative; max-width: 90vw; max-height: 90vh; }
.kh-da-zoom-modal__content img { max-width: 100%; max-height: 85vh; border-radius: 8px; }
.kh-da-zoom-modal__close {
  position: absolute; top: -12px; right: -12px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
  font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Signature step (step 4) */
.kh-da-decision-summary {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin-bottom: 24px;
}
.kh-da-decision-summary__title { font-size: 1rem; font-weight: 600; margin: 0 0 12px; }
.kh-da-decision-summary__list { margin: 0; padding-left: 20px; }
.kh-da-decision-summary__list li { padding: 4px 0; font-size: 0.9rem; }
.kh-da-revision-note-text { color: #92400e; font-size: 0.82rem; }

.kh-da-sig-tabs { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 2px solid #e5e7eb; }
.kh-da-sig-tab {
  background: none; border: none; padding: 8px 20px; cursor: pointer;
  font-size: 0.88rem; color: #6b7280; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.kh-da-sig-tab:hover { color: #111827; }
.kh-da-sig-tab--active { color: #0176D3; border-bottom-color: #0176D3; font-weight: 600; }

.kh-da-canvas-wrapper { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin-bottom: 8px; background: #fafafa; touch-action: none; }
.kh-da-sig-canvas { display: block; width: 100%; height: 100px; cursor: crosshair; touch-action: none; }

.kh-da-gen-sig-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kh-da-gen-sig-btn {
  border: 2px solid #e5e7eb; border-radius: 8px; padding: 10px 20px;
  background: #fff; cursor: pointer; text-align: left;
  color: #1a1a2e; /* explicit — theme sets button color:white which hides cursive text */
  transition: border-color 0.15s, background 0.15s;
}
.kh-da-gen-sig-btn:hover { border-color: #0176D3; color: #1a1a2e; }
.kh-da-gen-sig-btn--selected { border-color: #0176D3; background: #dbeafe; color: #1a1a2e; }

.kh-da-signer-details { margin: 20px 0 16px; }
.kh-da-ip-display { font-size: 0.78rem; color: #6b7280; margin-top: 8px; padding: 6px 12px; background: #f9fafb; border-radius: 4px; }
.kh-da-declaration-box {
  border: 1px solid #d1fae5; background: #f0fdf4;
  border-radius: 6px; padding: 14px 16px;
  font-size: 0.82rem; color: #065f46; line-height: 1.6;
  margin-bottom: 20px;
}

/* Confirmation step (step 5) */
.kh-da-confirmation-message { padding: 16px; background: #f0fdf4; border-radius: 8px; border: 1px solid #d1fae5; margin-bottom: 20px; color: #065f46; }
.kh-da-confirmation-summary { margin-bottom: 20px; }
.kh-da-confirmation-summary h4 { font-size: 0.95rem; font-weight: 600; color: #1a1a2e; margin-bottom: 10px; }
.kh-da-confirmation-summary ul { margin: 0; padding-left: 20px; }
.kh-da-confirmation-summary li { padding: 4px 0; font-size: 0.9rem; }
.kh-da-audit-info { margin-top: 20px; padding: 10px; background: #f9fafb; border-radius: 4px; }
.kh-da-audit-info code { word-break: break-all; font-size: 0.72rem; color: #6b7280; }

/* Large CTA button */
.kehemi-btn-lg { padding: 12px 28px; font-size: 1rem; }

/* ── Design Proof Builder — uppercase input fields ─────────────────────── */
.kh-dp-uc { text-transform: uppercase; }
.kh-dp-uc::placeholder { text-transform: uppercase; }

/* ── Design Proofs list — product cell hover tooltip ────────────────────── */
.kh-dp-product-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.kh-dp-product-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 8px 12px;
  min-width: 180px;
  white-space: nowrap;
  pointer-events: none;
}
.kh-dp-product-wrap:hover .kh-dp-product-tooltip {
  display: block;
}
.kh-dp-product-tooltip ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kh-dp-product-tooltip li {
  padding: 3px 0;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.02em;
}
.kh-dp-product-tooltip li + li {
  border-top: 1px solid #f1f5f9;
}

/* ── Design Proof Builder — Include Description toggle ─────────────────── */
.kh-dp-include-desc-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.kh-dp-include-desc-toggle { display: block; margin-bottom: 12px; }
.kh-dp-include-desc-toggle .kehemi-label { margin-bottom: 6px; display: block; }
.kh-dp-include-desc-toggle .kehemi-select { width: 100%; }
.kh-dp-radio-group { display: flex; gap: 20px; }
.kh-dp-radio-label { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; user-select: none; }
.kh-dp-radio-label input[type="radio"] { margin: 0; cursor: pointer; }
.kh-dp-desc-textarea-wrap { margin-top: 4px; }

/* ── Design Proof — Revision workflow ──────────────────────────────────── */
.kh-badge--revision { background: #f3e8ff; color: #7c3aed; }
.kh-row--revision td { background: #faf5ff !important; }
.kh-dp-revision-indent { color: #9ca3af; margin-right: 4px; font-weight: 400; }
.kh-da-revision-notice { margin-bottom: 20px; }
.kh-dp-revision-banner { margin-bottom: 16px; }

/* ── Design Proof — Description box (customer + preview view) ───────────── */
.kh-dp-desc-box {
  margin-top: 14px; padding: 14px 16px;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
}
.kh-dp-desc-box__label {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #0369a1; margin-bottom: 6px;
}
.kh-dp-desc-box p {
  margin: 0; font-size: 0.9rem; line-height: 1.55; color: #374151;
}

/* ── Input casing modifiers ─────────────────────────────────────────────── */
.kehemi-input--uppercase { text-transform: uppercase; }
.kehemi-input--lowercase { text-transform: lowercase; }

/* ══ Video Tutorial Overlay ══════════════════════════════════════════════════ */

/* Video settings form field layout */
.kh-video-form .kh-video-field { margin-bottom: 18px; }
.kh-video-form .kh-video-field .kehemi-input { width: 100%; max-width: 520px; }

/* Floating play button — fixed bottom-right */
.kh-video-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #22c1dc;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(34,193,220,.45);
  transition: background 0.2s, transform 0.15s;
  color: #fff;
  padding: 0;
}
.kh-video-btn:hover { background: #1aacc5; transform: scale(1.08); }
.kh-video-btn:focus { outline: 2px solid #1aacc5; outline-offset: 3px; }
.kh-video-btn svg { width: 24px; height: 24px; display: block; }

/* Full-screen overlay */
.kh-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9100;
  align-items: center;
  justify-content: center;
}
.kh-video-modal--open { display: flex; }

/* Semi-transparent backdrop */
.kh-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

/* Centred white card */
.kh-video-modal__content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 10px;
  width: 92vw;
  max-width: 900px;
  padding: 40px 20px 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.45);
}

/* Close button - top-right x */
.kh-video-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 2px 6px;
}
.kh-video-modal__close:hover { color: #111; }

/* 16:9 iframe wrapper */
.kh-video-modal__iframe-wrap {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
}
.kh-video-modal__iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}

/* ── Quote item active/inactive toggle ───────────────────────────────── */
.kh-quote-item--inactive {
  opacity: 0.45;
  background: #f8f8f8;
}
.kh-quote-item--inactive .kehemi-item-name {
  text-decoration: line-through;
  color: #999;
}
.kh-quote-item--inactive td {
  color: #aaa;
}
.kh-quote-items--inactive {
  opacity: 0.6;
}
.kh-quote-items--inactive th {
  color: #999;
}
.kh-quote-items--inactive td {
  color: #aaa;
}

/* ── Client nav — action badge (Design Proofs count) ─────────────────────── */
.kh-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.kh-collapsed .kh-nav-badge {
  display: none;
}

/* ── Design proof notification banner (dashboard) ────────────────────────── */
.kh-proof-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin-bottom: 18px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #3b82f6;
  border-radius: 10px;
  font-size: 14px;
  color: #1e40af;
}
.kh-proof-banner__icon {
  flex-shrink: 0;
  color: #3b82f6;
  display: flex;
  align-items: center;
}
.kh-proof-banner__text {
  flex: 1;
  color: #1e3a8a;
}
.kh-proof-banner__text strong {
  color: #1e3a8a;
}

/* ── Customer-facing list tables (all kehemi-customer-*.php pages) ────────── */
.kh-client-table {
  width: 100%;
  border-collapse: collapse;
}
.kh-client-table th,
.kh-client-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
}
.kh-client-table thead th {
  background: #f8fafc;
  font-weight: 600;
  color: #475569;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Logo thumbnail — checkerboard bg makes white/transparent logos visible */
.kh-logo-thumb {
  height: 64px;
  width: auto;
  vertical-align: middle;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 4px;
  background-color: #f3f4f6;
  background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
                    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
                    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}
.kh-dp-row--action td {
  background: #f0f9ff;
}
.kh-dp-no-action {
  color: #9ca3af;
}
.kh-dp-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
}

/* ── Design proof status badges ──────────────────────────────────────────── */
.kh-dp-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.kh-dp-status--sent     { background: #dbeafe; color: #1d4ed8; }
.kh-dp-status--viewed   { background: #e0f2fe; color: #0369a1; }
.kh-dp-status--approved { background: #dcfce7; color: #166534; }
.kh-dp-status--rejected { background: #fee2e2; color: #991b1b; }
.kh-dp-status--revision { background: #fef3c7; color: #92400e; }
.kh-dp-status--default  { background: #e5e7eb; color: #374151; }

/* ── Staff Notifications (N001) ──────────────────────────────────────────── */
.kh-notif-table td { vertical-align: top; padding: 12px 14px; }
.kh-notif-table th { padding: 10px 14px; }

/* New notifications card — left accent bar + subtle tinted background */
.kh-notif-card--new {
  border-left: 4px solid #22c1dc;
}
.kh-notif-card--new .kehemi-card-header {
  background: #f0fbfd;
  border-radius: 8px 8px 0 0;
}

/* Count pill inside the New Notifications card title */
.kh-notif-count-pill {
  margin-left: 10px;
  vertical-align: middle;
  font-size: 12px;
}

/* Spacing between the two cards */
.kh-notif-card--read { margin-top: 24px; }

/* New-row highlight — row background tint in the new section */
.kh-notif-row--new td { background: #f0f9ff; }

/* Notification message and sub-label */
.kh-notif-message {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.4;
}
.kh-notif-entity {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
}

/* Client account column */
.kh-notif-client {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

/* Added By column */
.kh-notif-added-by {
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
}

/* Date column — center-aligned.
   Scoped to .kh-notif-table to guarantee specificity over .kehemi-table thead th */
.kh-notif-table .kh-notif-th-date,
.kh-notif-table .kh-notif-date {
  white-space: nowrap;
  font-size: 12px;
  color: #64748b;
  text-align: center !important;
}

/* "New" inline pill — appears next to type badge on first visit */
.kh-notif-new-pill {
  margin-left: 6px;
  vertical-align: middle;
}

/* Pagination */
.kh-notif-pagination {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.kh-notif-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 13px;
  text-decoration: none;
}
.kh-notif-page-btn:hover { background: #f3f4f6; }
.kh-notif-page-btn--active {
  background: #22c1dc;
  border-color: #22c1dc;
  color: #fff;
  font-weight: 700;
}
.kh-notif-page-btn--active:hover { background: #1aadca; }

/* Glass menu unread badge for Notifications nav link —
   re-uses .kh-menu-unread-badge already defined for Ideas Bank / Campaign Chats */

/* ==========================================================
   CLIENT VIEW CAMPAIGN  (kehemi-customer-view-campaign.php)
   ========================================================== */

/* Right side of card header — badge + back button grouped */
.kehemi-card-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Details grid — 2-column on wide, stacks on narrow */
.kh-cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px 32px;
  margin-bottom: 28px;
}
@media (max-width: 767px) {
  .kh-cv-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .kh-cv-value,
  .kh-cv-link {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}
.kh-cv-field { display: flex; flex-direction: column; gap: 4px; }
.kh-cv-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
}
.kh-cv-value { font-size: 14px; color: #1f2937; line-height: 1.5; }
.kh-cv-link  { color: #22c1dc; text-decoration: none; font-size: 13px; overflow-wrap: anywhere; }
.kh-cv-link:hover { text-decoration: underline; }

/* Logo display */
.kh-cv-logo-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.kh-cv-logo {
  max-width: 280px;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

/* Brief download row */
.kh-cv-brief-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.kh-cv-brief-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2937;
  max-width: 340px;
  transition: border-color .15s, background .15s;
}
.kh-cv-brief-dl:hover { border-color: #22c1dc; background: #f0fbff; }
.kh-cv-brief-dl svg   { color: #c0392b; flex-shrink: 0; }
.kh-cv-brief-name     { font-size: 13px; font-weight: 600; flex: 1; }
.kh-cv-brief-size     { font-size: 11px; color: #9ca3af; white-space: nowrap; }
.kh-cv-brief-view {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: #22c1dc;
  text-decoration: none;
}
.kh-cv-brief-view:hover { text-decoration: underline; }

/* ==========================================================================
   Kehemi Session Tracker (ST001)
   IP modal, map container, status badges, session history table, IP link
   ========================================================================== */

/* ---- IP location modal overlay ---------------------------------------- */
.kh-ip-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.kh-ip-modal-container {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 28px 32px 24px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
}
.kh-ip-modal-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
}
.kh-ip-modal-details {
  margin-bottom: 16px;
}
.kh-ip-modal-details p {
  margin: 4px 0;
  font-size: 14px;
  color: #374151;
}
.kh-ip-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
}
.kh-ip-modal-close:hover { color: #1f2937; }

/* ---- Leaflet map container --------------------------------------------- */
#kh-map-container {
  height: 300px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

/* ---- Session status badges --------------------------------------------- */
.kh-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kh-status-badge--active {
  background: #d1fae5;
  color: #065f46;
}
.kh-status-badge--logged_out {
  background: #f3f4f6;
  color: #374151;
}
.kh-status-badge--expired {
  background: #fef3c7;
  color: #92400e;
}

/* ---- Clickable IP link ------------------------------------------------- */
a.kh-ip-link {
  color: #22c1dc;
  text-decoration: none;
  font-weight: 500;
}
a.kh-ip-link:hover {
  text-decoration: underline;
  color: #178da3;
}

/* ---- Session history compact table (edit-user page) ------------------- */
.kh-session-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #374151;
}
.kh-session-history-table th {
  text-align: left;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.kh-session-history-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.kh-session-history-table tr:last-child td {
  border-bottom: none;
}
.kh-session-history-table tr:hover td {
  background: #f8fafc;
}

/* ================================================================
   Quote Orders Module (QO001)
   ================================================================ */

/* ---- Order status badges --------------------------------------- */
.kh-order-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kh-order-status--in-progress {
  background: #dbeafe;
  color: #1e40af;
}
.kh-order-status--delivered {
  background: #d1fae5;
  color: #065f46;
}
.kh-order-status--unpacking {
  background: #ede9fe;
  color: #5b21b6;
}
.kh-order-status--delayed {
  background: #fee2e2;
  color: #991b1b;
}
.kh-order-status--waiting {
  background: #fef3c7;
  color: #92400e;
}
.kh-order-status--completed {
  background: #d1fae5;
  color: #065f46;
  font-weight: 700;
}

/* ---- Order list table ------------------------------------------ */
.kh-order-list-table {
  min-width: 960px;
}

/* ---- Profit colouring ----------------------------------------- */
.kh-profit-positive {
  color: #065f46;
}
.kh-profit-negative {
  color: #991b1b;
}

/* ---- Add/Edit order: header grid ------------------------------ */
.kh-order-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 16px 0 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}
@media (max-width: 640px) {
  .kh-order-header-grid {
    grid-template-columns: 1fr;
  }
}
.kh-order-meta-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kh-order-meta-row {
  display: flex;
  gap: 12px;
  font-size: 14px;
}
.kh-order-meta-label {
  font-weight: 600;
  color: #6b7280;
  min-width: 90px;
}
.kh-order-meta-value {
  color: #1b2030;
}
.kh-order-fields-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Customer Orders — read-only view
   kehemi-customer-orders.php → [kehemi_customer_orders]
   ═══════════════════════════════════════════════════════════════════════════ */

/* Detail page — header field grid */
.kh-co-detail-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 16px 0 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}
.kh-co-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.kh-co-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.kh-co-detail-value {
  font-size: 15px;
  color: #1b2030;
}
.kh-co-detail-po {
  font-weight: 700;
  font-size: 16px;
}

/* Detail page — items table spacing */
.kh-co-items-wrap {
  margin-top: 24px;
}

/* Detail page — SKU in product cell */
.kh-co-sku {
  font-size: 11px;
}

/* Detail page — totals footer row */
.kh-co-totals-row td {
  background: #f8fafc;
  border-top: 2px solid #e5e7eb;
}

/* List page — order count paragraph */
.kh-co-list-count {
  margin-top: 12px;
}

/* ---- Add/Edit order: items table ------------------------------ */
.kh-order-items-section {
  margin-top: 24px;
}
.kh-order-items-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1b2030;
  margin: 0 0 12px;
}
.kh-order-items-table {
  min-width: 1100px;
}
.kh-order-num-input {
  width: 90px;
  text-align: right;
}
.kh-order-text-input {
  width: 140px;
}

/* ---- Totals and profit summary rows --------------------------- */
.kh-order-totals-row td {
  background: #f8fafc;
  border-top: 2px solid #e5e7eb;
  padding-top: 10px;
  padding-bottom: 10px;
}
.kh-order-profit-row td {
  background: #f0fdf4;
  padding-top: 8px;
  padding-bottom: 8px;
}
.kh-order-profit-label {
  display: block;
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.kh-order-profit-value {
  font-size: 15px;
  font-weight: 700;
}

/* ---- Order action icon in quote list -------------------------- */
.kh-action-icon--order {
  color: #9ca3af;
}
.kh-action-icon--order-exists {
  color: #065f46;
}
.kh-action-icon--order:hover {
  color: #1b2030;
}

/* ── Quote Orders Report (kehemi-admin-quote-orders-report.php) ─────────── */

/* Visual separator at the first row of each order group */
.kh-qor-order-start td {
  border-top: 2px solid #d1d5db;
}
/* Legend key swatch for the order-start marker */
.kh-qor-order-start-key {
  display: inline-block;
  border-top: 2px solid #d1d5db;
  padding-top: 2px;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Quote # / PO # cell link */
.kh-qor-quote-cell a {
  font-weight: 600;
  color: #22c1dc;
  text-decoration: none;
}
.kh-qor-quote-cell a:hover { text-decoration: underline; }
.kh-qor-po {
  color: #6b7280;
  font-size: 0.78rem;
}

/* Date filter inputs */
.kh-qor-date-input {
  width: 140px;
  padding: 6px 8px;
  font-size: 0.85rem;
}
/* =============================================================
   ML001 — Language Switcher & Admin — Global CSS Additions
   Appended 2026-03-11
   ============================================================= */

/* ── Modal overlay (email preview) ─────────────────────────── */
.kh-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.kh-modal-overlay[style*="display: block"],
.kh-modal-overlay[style*="display:block"] {
  display: flex !important;
}

.kh-modal-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  max-height: 90vh;
  overflow: auto;
  width: 640px;
}

.kh-modal-lg {
  width: 840px;
  max-width: 95vw;
}

.kh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 15px;
  font-weight: 600;
}

.kh-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  color: #6b7280;
  padding: 4px 8px;
}

.kh-modal-close:hover {
  color: #111;
}

.kh-modal-body {
  padding: 20px;
}

/* ── Language admin page — tab bar ──────────────────────────── */
.kh-lang-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e5e7eb;
  flex-wrap: wrap;
}

.kh-lang-tab {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none !important;
  border-radius: 6px 6px 0 0;
  transition: background 0.15s, color 0.15s;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid transparent;
  border-bottom: none;
  line-height: 1.4;
}

.kh-lang-tab:hover {
  color: #111827;
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.kh-lang-tab--active {
  color: #1e40af;
  background: #eff6ff;
  border-color: #dbeafe;
  border-bottom: 2px solid #1e40af;
  margin-bottom: -2px;
}

/* ── Language table ─────────────────────────────────────────── */
.kh-lang-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kh-lang-table th {
  background: #f9fafb;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
}

.kh-lang-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.kh-lang-table tr:last-child td {
  border-bottom: none;
}

.kh-drag-handle {
  cursor: grab;
  color: #9ca3af;
  font-size: 16px;
}

/* ── UI Strings table ───────────────────────────────────────── */
.kh-strings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.kh-strings-table th {
  background: #f9fafb;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1;
}

.kh-strings-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.kh-strings-table .kh-string-key {
  font-family: monospace;
  color: #4b5563;
  font-size: 11px;
  white-space: nowrap;
}

.kh-strings-table .kh-string-value-input {
  width: 100%;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

.kh-strings-table .kh-string-value-input:focus {
  border-color: #22c1dc;
  outline: none;
}

.kh-string-updated-at {
  color: #9ca3af;
  font-size: 11px;
  white-space: nowrap;
}

/* Flash animation for saved rows */
@keyframes kh-saved-flash {
  0%   { background: #dcfce7; }
  100% { background: transparent; }
}

.kh-saved-flash td {
  animation: kh-saved-flash 1.5s ease;
}

/* ── Import/Export card grid ────────────────────────────────── */
.kh-impex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 700px) {
  .kh-impex-grid {
    grid-template-columns: 1fr;
  }
}

.kh-import-result {
  display: none;
  margin-top: 12px;
}

/* ── Email template editor ──────────────────────────────────── */
.kh-email-editor-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

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

.kh-token-panel {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
  font-size: 12px;
}

.kh-token-panel h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.kh-token-item {
  font-family: monospace;
  margin-bottom: 4px;
  color: #374151;
}

.kh-token-desc {
  color: #6b7280;
  margin-left: 4px;
}

/* ── Filter bar (strings tab) ───────────────────────────────── */
.kh-strings-filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.kh-strings-filter-bar .kehemi-select {
  min-width: 150px;
}

.kh-strings-filter-bar input[type="text"] {
  flex: 1;
  min-width: 180px;
  padding: 7px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}

/* ── Saving state spinner ───────────────────────────────────── */
.kh-saving td {
  opacity: 0.6;
  pointer-events: none;
}

/* ── Language switcher (global context adjustments) ─────────── */
.kh-lang-emoji {
  font-size: 16px;
  line-height: 1;
}

/* Nav language flag row removed — language is resolved automatically via cookie / Accept-Language header */

/* ============================================================
   Order Quantity-Selection Modal  (.kh-oqm-*)
   Triggered from the "Create Order" icon on the quotes list.
   ============================================================ */

.kh-oqm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.kh-oqm-overlay.kh-oqm--open {
  display: flex;
}
.kh-oqm-body-lock {
  overflow: hidden;
}
.kh-oqm-dialog {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kh-oqm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.kh-oqm-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}
.kh-oqm-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.kh-oqm-close:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.kh-oqm-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.kh-oqm-footer {
  padding: 14px 22px 18px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.kh-oqm-hint {
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 12px;
}
.kh-oqm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.kh-oqm-loading,
.kh-oqm-error,
.kh-oqm-empty {
  color: #6b7280;
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
}
.kh-oqm-error { color: #dc2626; }

/* Product group */
.kh-oqm-product {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
}
.kh-oqm-product:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.kh-oqm-product-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.kh-oqm-sku {
  font-size: 11px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tier radio rows */
.kh-oqm-tiers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kh-oqm-tier-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-weight: 400;
}
.kh-oqm-tier-label:has(.kh-oqm-radio:checked) {
  border-color: #22c1dc;
  background: #f0fdff;
}
.kh-oqm-tier-skip {
  border-style: dashed;
  color: #9ca3af;
}
.kh-oqm-tier-skip:has(.kh-oqm-radio:checked) {
  border-color: #e5e7eb;
  background: #f9fafb;
}
.kh-oqm-radio {
  flex-shrink: 0;
  accent-color: #22c1dc;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.kh-oqm-tier-info {
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 13px;
}
.kh-oqm-qty {
  min-width: 80px;
  color: #1e293b;
}
.kh-oqm-price {
  color: #0f766e;
}
.kh-oqm-cost {
  color: #6b7280;
  font-size: 12px;
}
.kh-oqm-skip-label {
  color: #9ca3af;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CUSTOMER ADD / EDIT CAMPAIGN — kh-cac-* components
   Page: /client/add-campaign/
   Shortcode: [kehemi_customer_add_campaign]
───────────────────────────────────────────────────────────────────────────── */

.kh-cac-field-group {
  margin-bottom: 22px;
}

.kh-cac-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  margin-bottom: 6px;
}

.kh-cac-required {
  color: #dc2626;
}

.kh-cac-optional {
  font-weight: 400;
  color: #6b7280;
  font-size: 12px;
}

.kh-cac-full-width {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Allow vertical resize on the campaign description textarea */
#kh-cac-desc {
  resize: vertical;
}

.kh-cac-field-hint {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* Single-account display badge */
.kh-cac-account-name {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: #0891b2;
  background: rgba(34, 193, 220, 0.08);
  border: 1px solid rgba(34, 193, 220, 0.25);
  border-radius: 8px;
  padding: 10px 16px;
  margin: 0;
}

/* Locked / disabled campaign name input */
.kh-cac-input--locked {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f1f5f9 !important;
}

/* ── Media / Inspiration panel ───────────────────────────────────────────── */

.kh-cac-media-panel {
  border: 1px solid #bae6fd;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(186, 230, 253, 0.18) 0%, rgba(255, 255, 255, 0.85) 100%);
  padding: 20px 22px;
  margin-bottom: 24px;
}

.kh-cac-media-panel-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #bae6fd;
}

.kh-cac-media-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: #0369a1;
  letter-spacing: 0.02em;
}

.kh-cac-media-panel-hint {
  font-size: 12px;
  color: #64748b;
}

.kh-cac-media-field {
  margin-bottom: 0;
  padding: 18px 0;
  border-bottom: 1px solid #e0f2fe;
}

.kh-cac-media-field:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Web link preview card inside customer add/edit campaign form */
.kh-cac-link-preview-wrap {
  margin-top: 14px;
}

/* Styled file input wrapper */
.kh-cac-file-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.kh-cac-file-input-wrap input[type="file"] {
  font-size: 13px;
  color: #374151;
}

.kh-cac-file-formats {
  display: inline-block;
  font-size: 11px;
  color: #9ca3af;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.02em;
}

.kh-cac-media-existing {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #bae6fd;
}

.kh-cac-file-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.kh-cac-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid #f0f9ff;
}

.kh-cac-file-item:last-child {
  border-bottom: none;
}

.kh-cac-file-name {
  color: #374151;
  flex: 1;
}

.kh-cac-file-size {
  color: #9ca3af;
  font-size: 12px;
  white-space: nowrap;
}

/* ── Existing logo / brief ────────────────────────────────────────────────── */

.kh-cac-existing-logo {
  margin-bottom: 10px;
}

.kh-cac-logo-preview {
  max-height: 80px;
  max-width: 200px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  display: block;
  margin-bottom: 6px;
}

.kh-cac-existing-brief {
  margin-bottom: 10px;
}

.kh-cac-brief-link {
  font-size: 13px;
  color: #22c1dc;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 4px;
}

.kh-cac-brief-link:hover {
  text-decoration: underline;
  color: #0891b2;
}

/* ── Form actions row ────────────────────────────────────────────────────── */

.kh-cac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CAMPAIGN WIZARD — kh-wizard-* components
   Used by kehemi-customer-add-edit-campaign.php step wizard
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Step indicator bar ────────────────────────────────────────────────────── */

.kh-wizard-indicator {
  display: flex;
  align-items: center;
  padding: 20px 28px 4px;
}

.kh-wizard-indicator__step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.kh-wizard-indicator__step--active {
  opacity: 1;
}

.kh-wizard-indicator__step--done {
  opacity: 0.75;
}

.kh-wizard-indicator__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.kh-wizard-indicator__step--active .kh-wizard-indicator__num {
  background: #22c1dc;
  color: #fff;
}

.kh-wizard-indicator__step--done .kh-wizard-indicator__num {
  background: #d1fae5;
  color: #065f46;
}

.kh-wizard-indicator__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
}

.kh-wizard-indicator__step--active .kh-wizard-indicator__label {
  color: #0e7490;
}

.kh-wizard-indicator__step--done .kh-wizard-indicator__label {
  color: #374151;
}

.kh-wizard-indicator__sep {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
  margin: 0 12px;
  min-width: 20px;
}

/* ── Step panels ───────────────────────────────────────────────────────────── */

.kh-wizard-step {
  display: none;
}

.kh-wizard-step--visible {
  display: block;
}

/* ── Per-step navigation bar ───────────────────────────────────────────────── */

.kh-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  gap: 12px;
}

/* ── Inline step validation error ──────────────────────────────────────────── */

.kh-wizard-error {
  display: block;
  color: #dc2626;
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 4px;
}

/* ── Upload-reveal question pattern (logo / brief on step 3) ──────────────── */

.kh-wizard-question {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 10px;
}

.kh-wizard-upload-panel {
  display: none;
  margin-top: 10px;
}

.kh-wizard-upload-panel--visible {
  display: block;
}

/* ── Responsive: hide indicator labels on small screens ───────────────────── */

@media (max-width: 600px) {
  .kh-wizard-indicator {
    padding: 16px 16px 4px;
  }
  .kh-wizard-indicator__label {
    display: none;
  }
  .kh-wizard-indicator__sep {
    min-width: 10px;
    margin: 0 6px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Admin — Customer Media Panel (Inspiration & References)
   kehemi-admin-add-edit-campaign.php → render_customer_media_panel()
   ═══════════════════════════════════════════════════════════════════════════ */

.kh-camp-media-panel {
  margin-bottom: 24px;
}

.kh-camp-media-panel .kehemi-card-body {
  padding: 0;
}

.kh-camp-media-section {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.kh-camp-media-section:last-child {
  border-bottom: none;
}

.kh-camp-media-label {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* .kh-camp-media-url removed — video URL is not shown as text */

/* 16:9 responsive video embed */
.kh-camp-media-video-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  margin-left: auto;
  margin-right: auto;
}

.kh-camp-media-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* TikTok portrait (9:16) */
.kh-camp-media-video-wrap--tiktok {
  max-width: 320px;
  padding-bottom: 177.78%;
}

/* Fallback link for unrecognised video URLs (admin) */
.kh-camp-media-video-link-wrap {
  margin: 12px 0;
}
.kh-camp-media-video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a73e8;
  font-weight: 600;
  text-decoration: underline;
}

/* File list */
.kh-camp-media-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kh-camp-media-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.kh-camp-media-file-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.kh-camp-media-file-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.kh-camp-media-file-name {
  font-size: 13px;
  font-weight: 500;
  color: #0073aa;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh-camp-media-file-name:hover {
  text-decoration: underline;
}

.kh-camp-media-file-size {
  font-size: 11px;
  color: #9ca3af;
}

.kh-camp-media-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* Image file items — large preview on left, meta on right */
.kh-camp-media-file-item--image,
.kh-cv-media-file-item--image {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

/* Shared large image preview for campaign media panels */
.kh-media-img-large {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.kh-media-img-large:hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════════════════════════════════
   Customer Campaign Wizard — Quick-Add Account panel (Step 1)
   kehemi-customer-add-edit-campaign.php → ajax_quick_add_account()
   ═══════════════════════════════════════════════════════════════════════════ */

/* Trigger link row shown below account area */
.kh-cac-add-account-trigger {
  margin-top: 8px;
}

/* Expandable inline panel */
.kh-cac-new-account-panel {
  margin-top: 14px;
  padding: 16px 18px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

/* Action row: Create + Cancel buttons */
.kh-cac-new-account-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Inline success confirmation after account is created */
.kh-cac-quick-add-success {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Customer View Campaign — Inspiration & References media panel
   kehemi-customer-view-campaign.php → render_media_panel()
   ═══════════════════════════════════════════════════════════════════════════ */

.kh-cv-media-panel {
  margin-top: 20px;
}

.kh-cv-media-section {
  padding: 18px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.kh-cv-media-section:last-child {
  border-bottom: none;
}

/* 16:9 video embed */
.kh-cv-video-wrap {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

.kh-cv-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* TikTok portrait (9:16) */
.kh-cv-video-wrap--tiktok {
  max-width: 320px;
  padding-bottom: 177.78%;
}

/* Fallback link for unrecognised video URLs (customer view) */
.kh-cv-video-link-wrap {
  margin: 12px 0;
}
.kh-cv-video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a73e8;
  font-weight: 600;
  text-decoration: underline;
}

/* File attachment list */
.kh-cv-media-file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kh-cv-media-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.kh-cv-media-file-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.kh-cv-media-file-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.kh-cv-media-file-name {
  font-size: 13px;
  font-weight: 500;
  color: #0073aa;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kh-cv-media-file-name:hover {
  text-decoration: underline;
}

.kh-cv-media-file-size {
  font-size: 11px;
  color: #9ca3af;
}

.kh-cv-media-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* ── Customer view campaign — inline date edit form ── */
.kh-cvc-hidden {
  display: none !important;
}
.kh-cvc-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 2px 4px;
  line-height: 1;
  margin-left: 10px;
  vertical-align: middle;
}
.kh-cvc-edit-btn:hover {
  color: #111;
}
.kh-cvc-ref-form-wrap {
  margin-top: 12px;
}
#kh-cvc-dates-form {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.kh-cv-dates-edit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.kh-cv-dates-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.kh-cv-dates-edit-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.kh-cv-dates-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 600px) {
  .kh-cv-dates-edit-row { flex-direction: column; }
  .kh-cv-dates-edit-field { min-width: 0; width: 100%; }
}

/* ── Customer view campaign — added references ── */
.kh-cv-ref-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.kh-cv-ref-delete-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.kh-cv-ref-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 2px 4px;
  line-height: 1;
}
.kh-cv-ref-delete-btn:hover {
  color: #ef4444;
}
.kh-cv-ref-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.kh-cv-ref-url-input {
  flex: 1;
  min-width: 200px;
}
.kh-cv-ref-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 6px;
  margin-bottom: 0;
}

/* ── Supplier Agreement block (admin order + client order detail) ── */
.kh-order-agreement-block {
  margin: 16px 0 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e3e3e3;
}

.kh-order-agreement-meta {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 10px;
}

.kh-order-agreement-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.kh-order-agreement-upload {
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE TABLE → CARD PATTERN
   Add class kh-table-mobile-cards to any .kehemi-table to get stacked
   card rows on mobile. Each visible <td> must carry data-label="…".
   Action cells with no label use data-label="".
   Cells with class="hidden" are suppressed automatically.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Stop the whole page from scrolling horizontally ── */
  body.kehemi-glass-page,
  body.kehemi-glass-menu-active {
    overflow-x: hidden !important;
  }

  body.kehemi-glass-page .kehemi-page,
  body.kehemi-glass-page .kehemi-page-wide,
  body.kehemi-glass-page .kehemi-card,
  body.kehemi-glass-page .kehemi-card-body,
  body.kehemi-glass-page .kehemi-card-header,
  body.kehemi-glass-menu-active .kehemi-page,
  body.kehemi-glass-menu-active .kehemi-page-wide,
  body.kehemi-glass-menu-active .kehemi-card,
  body.kehemi-glass-menu-active .kehemi-card-body,
  body.kehemi-glass-menu-active .kehemi-card-header {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Card header: stack title below button on mobile ── */
  .kehemi-card-header {
    flex-wrap: wrap-reverse !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }
  .kehemi-card-header .kehemi-card-title {
    width: 100% !important;
    margin: 0 !important;
  }
  .kehemi-card-header-actions {
    flex-wrap: wrap !important;
    flex-shrink: 1 !important;
    gap: 8px !important;
  }

  /* ── Mobile cards: hide edit icon — card-tap handles navigation ── */
  .kh-table-mobile-cards .kh-action-icon--edit,
  .kh-table-mobile-cards [data-action="edit"] {
    display: none !important;
  }

  /* ── Scroll wrapper: no horizontal scroll on mobile ── */
  body.kehemi-glass-page .kehemi-table-scroll,
  body.kehemi-glass-menu-active .kehemi-table-scroll,
  body.kh-customer-page .kehemi-table-scroll {
    overflow-x: hidden !important;
  }

  body.kh-customer-page .kehemi-page,
  body.kh-customer-page .kehemi-card,
  body.kh-customer-page .kehemi-card-body,
  body.kh-customer-page .kehemi-card-header {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── kh-table-mobile-cards: full collapse to block ── */
  .kh-table-mobile-cards,
  .kh-table-mobile-cards tbody {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .kh-table-mobile-cards thead {
    display: none !important;
  }

  .kh-table-mobile-cards tbody tr {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin-bottom: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  .kh-table-mobile-cards td.kh-qa-responses-cell {
    display: block !important;
  }

  .kh-table-mobile-cards td {
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-items: start;
    justify-items: start;
    padding: 6px 0;
    border: none !important;
    font-size: 0.9rem;
    line-height: 1.4;
    overflow: hidden;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .kh-table-mobile-cards td.hidden {
    display: none !important;
  }

  .kh-table-mobile-cards tr.kh-hidden-row {
    display: none !important;
  }

  .kh-table-mobile-cards td.kh-hide-mobile {
    display: none !important;
  }

  .kh-table-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding-top: 2px;
    align-self: start;
  }

  /* All td direct children go into the content column */
  .kh-table-mobile-cards td > * {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 150px) !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* Action cells: revert to flex row */
  .kh-table-mobile-cards td[data-label=""] {
    display: flex !important;
    grid-template-columns: unset !important;
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6 !important;
    margin-top: 4px;
  }

  .kh-table-mobile-cards td[data-label=""]::before {
    display: none;
  }

  /* Ensure action buttons are visible in card rows */
  .kh-table-mobile-cards td[data-label=""] .kehemi-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
  }

}

/* ── Phone field mobile fix ── */
@media (max-width: 768px) {
  .kehemi-phone-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 100% !important;
  }
  .kehemi-dial-code-wrap {
    width: 100% !important;
  }
  .kehemi-phone-input {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── Add/edit user forms — collapse 2-col grid on mobile ────────── */
@media (max-width: 768px) {
  .kehemi-grid {
    grid-template-columns: 1fr !important;
  }
  .kehemi-projects {
    grid-template-columns: 1fr !important;
  }
  .kehemi-grid .kehemi-input,
  .kehemi-grid .kehemi-select {
    max-width: 100% !important;
  }
}

/* ── Quote requests list — hide filter panel on mobile, keep search ── */
@media (max-width: 768px) {
  .kehemi-quotes-filters {
    display: none !important;
  }
}

/* ── Clients/Accounts list — mobile logo + address fix ── */
@media (max-width: 768px) {
  /* Bigger logo image — leave the 80px|1fr grid intact (it works) */
  .kh-table-mobile-cards td[data-label="Logo"] img {
    height: 80px !important;
    width: auto !important;
  }
  .kh-table-mobile-cards td[data-label="Address"] {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  /* ── Notifications table — fix text overflow on mobile cards ──
     1fr has implicit min:auto so long text overflows the grid column.
     minmax(0,1fr) forces the column to 0 minimum, constraining text to wrap.
     Also override nowrap rules from desktop notification cell classes. */
  .kh-notif-table.kh-table-mobile-cards td {
    grid-template-columns: 80px minmax(0, 1fr) !important;
  }
  .kh-notif-table.kh-table-mobile-cards .kh-notif-message,
  .kh-notif-table.kh-table-mobile-cards .kh-notif-entity,
  .kh-notif-table.kh-table-mobile-cards .kh-notif-client,
  .kh-notif-table.kh-table-mobile-cards .kh-notif-added-by,
  .kh-notif-table.kh-table-mobile-cards .kh-notif-date {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Quick-status select in mobile cards */
  .kh-table-mobile-cards td select.kehemi-quick-status {
    min-width: 120px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ── Add/Edit Quote — mobile layout fixes ── */
  .kehemi-staff-quote-edit .kehemi-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .kehemi-staff-quote-edit .kehemi-form-grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #kehemi-quote-items-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #kehemi-quote-items-wrap #kehemi-quote-items-table {
    min-width: 720px !important;
    width: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE OF THINGS — Admin Campaign Page
   ═══════════════════════════════════════════════════════════════════════════ */

.kh-archive-card {
  margin-top: 24px;
}

.kh-archive-upload-label {
  cursor: pointer;
}

/* File table */
.kh-archive-card .kehemi-table td.kh-td {
  vertical-align: middle;
}

.kh-archive-icon {
  font-size: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

.kh-archive-filename {
  font-weight: 500;
  word-break: break-all;
  color: #1a73e8;
  text-decoration: none;
}

.kh-archive-filename:hover {
  text-decoration: underline;
}

/* Upload progress */
.kh-archive-uploading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: #555;
  font-size: 14px;
}

.kh-archive-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid #ccc;
  border-top-color: #1a73e8;
  border-radius: 50%;
  animation: kh-spin 0.7s linear infinite;
}

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

/* Error notice */
.kh-archive-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 13px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

/* ── Customer users list — stacked action icons ───────────── */

/* Actions column header + cell: fixed width with generous padding */
.kh-cu-actions-th {
  width: 64px;
  min-width: 64px;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Actions column — narrow, no-wrap */
.kh-cu-actions-th,
.kh-acct-actions-th {
  width: 52px !important;
  min-width: 52px !important;
  white-space: nowrap;
}
td:has(> .kh-cu-user-actions),
td:has(> .kehemi-actions-center) {
  white-space: nowrap;
}
.kh-cu-user-actions,
.kehemi-actions-center {
  flex-wrap: nowrap;
}

/* Invisible placeholder slot — same height as a normal action icon so rows align */
.kh-action-slot-hidden {
  display: block;
  width: 28px;
  height: 28px;
  visibility: hidden;
  pointer-events: none;
}

/* ── Customer Login — Split Screen Layout ─────────────────── */

/* Strip theme chrome on the login page so the split fills the full viewport */
.page-id-rewards-login .site-footer,
.page-slug-rewards-login .site-footer,
body:has(.kh-login-split) footer,
body:has(.kh-login-split) .site-footer,
body:has(.kh-login-split) #colophon {
  display: none !important;
}
body:has(.kh-login-split) .site-content,
body:has(.kh-login-split) #content,
body:has(.kh-login-split) .entry-content,
body:has(.kh-login-split) main {
  padding: 0 !important;
  margin: 0 !important;
}

.kh-login-split {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Left: form panel */
.kh-login-split__form-panel {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px 64px;
  background: #fff;
  position: relative;
}

.kh-login-split__form-wrap {
  width: 100%;
  max-width: 420px;
}

/* Brand wordmark */
.kh-login-brand {
  margin-bottom: 32px;
}
.kh-login-brand__keh {
  font-size: 26px;
  font-weight: 800;
  color: #0f1b35;
  letter-spacing: -0.02em;
}
.kh-login-brand__emi {
  font-size: 26px;
  font-weight: 800;
  color: #d4a843;
  letter-spacing: -0.02em;
}

/* Headings */
.kh-login-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f1b35;
  margin: 0 0 6px;
  line-height: 1.2;
}
.kh-login-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0 0 22px;
}

/* Notices */
.kh-login-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.kh-login-notice--success {
  border: 1px solid #b7f5c5;
  background: #f0fff4;
  color: #0f5132;
}
.kh-login-notice--error {
  border: 1px solid #f1b3b3;
  background: #fff5f5;
  color: #7f1d1d;
}

/* Fields */
.kh-login-field {
  margin: 0 0 16px;
}
.kh-login-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f1b35;
  margin: 0 0 6px;
}
.kh-login-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 6px;
}
.kh-login-label-row .kh-login-label {
  margin: 0;
}
.kh-login-forgot-inline {
  font-size: 13px;
  color: #d4a843;
  text-decoration: none;
  font-weight: 500;
}
.kh-login-forgot-inline:hover {
  text-decoration: underline;
}
.kh-login-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: #0f1b35;
}
.kh-login-input:focus {
  border-color: #d4a843;
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
  outline: none;
}
.kh-login-input::placeholder {
  color: #aaa;
}

/* Remember me checkbox row */
.kh-login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #444;
  margin: 0 0 18px;
  cursor: pointer;
}

/* Submit button — scoped under .kh-login-split to beat SiteOrigin button{} specificity */
.kh-login-split .kh-login-submit {
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 10px;
  background: #0f1b35;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 2px;
}
.kh-login-split .kh-login-submit:hover {
  background: #1c3060;
}

/* Links below form */
.kh-login-links {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: center;
}
.kh-login-links a {
  color: #d4a843;
  text-decoration: none;
}
.kh-login-links a:hover {
  text-decoration: underline;
}

/* Right: visual panel */
.kh-login-split__visual-panel {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f1b35;
  padding: 48px 40px;
  min-height: 100vh;
}
.kh-login-split__visual-inner {
  text-align: center;
  max-width: 460px;
}
.kh-login-split__img {
  width: 100%;
  max-width: 400px;
  display: block;
  margin: 0 auto 28px;
}
.kh-login-split__tagline {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.35;
}
.kh-login-split__sub {
  color: #7b97bf;
  font-size: 14px;
  margin: 0;
  line-height: 1.65;
}

/* Powered by footer — pinned to bottom of form panel */
.kh-login-powered {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  letter-spacing: 0.01em;
  margin: 0;
}
.kh-login-powered a {
  color: #d4a843;
  font-weight: 700;
  text-decoration: none;
}
.kh-login-powered a:hover {
  text-decoration: underline;
}
.kh-login-split__visual-panel { position: relative; }
.kh-login-staff-link {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 11px;
  color: rgba(255,255,255,0.15);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.kh-login-staff-link:hover {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}

/* Mobile: hide visual panel, full-width form */
@media (max-width: 768px) {
  .kh-login-split {
    flex-direction: column;
    min-height: auto;
  }
  .kh-login-split__visual-panel {
    display: none;
  }
  .kh-login-split__form-panel {
    flex: none;
    padding: 32px 20px;
  }
}

/* ── View Campaign: link name input ─────────────────────────────────── */
.kh-cv-ref-name-input {
  flex: 0 0 auto;
  width: 200px;
  min-width: 140px;
  max-width: 220px;
}
.kh-cv-media-file-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1a2033;
  margin-bottom: 2px;
}

/* ── View Campaign: Inspiration & References toggle buttons ─────────── */
#kh-cvc-video-toggle,
#kh-cvc-file-toggle,
#kh-cvc-ref-toggle {
  width: 175px;
  justify-content: center;
}

/* ── View Campaign: Campaign Description section ────────────────────── */
.kh-cv-description-section {
  margin-top: 20px;
  border-top: 1px solid #e8e8e8;
  padding-top: 16px;
}
.kh-cv-description-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.kh-cv-description-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
}
.kh-cv-description-text.kh-muted {
  color: #aaa;
  font-style: italic;
}
.kh-cv-desc-textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  margin-bottom: 8px;
}
.kh-cv-desc-actions {
  display: flex;
  gap: 8px;
}

/* ── Customer campaigns list: fixed 2-slot action column ────────────── */
.kh-clist-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.kh-clist-action-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* ── Customer campaign delete modal ─────────────────────────────────── */
.kh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kh-modal-overlay.kh-cvc-hidden {
  display: none;
}
.kh-modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.kh-modal-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: #1a2033;
}
.kh-modal-campaign-name {
  font-weight: 700;
  font-size: 15px;
  color: #c0392b;
  margin: 0 0 12px;
}
.kh-modal-warning {
  margin: 0 0 6px;
  font-size: 14px;
  color: #555;
}
.kh-modal-list {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14px;
  color: #555;
}
.kh-modal-irreversible {
  margin: 0 0 20px;
  font-size: 13px;
  color: #c0392b;
}
.kh-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* =========================================================
   CAMPAIGN RELATED-ENTITY PANELS
   ========================================================= */

.kh-cp-panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.kh-cp-panel .kehemi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kh-cp-panel .kehemi-card-header .kehemi-card-title {
  margin: 0;
}

.kh-cp-chevron {
  font-size: 12px;
  color: #888;
  transition: transform 0.15s;
}

.kh-cp-loading {
  color: #888;
  font-size: 13px;
  font-style: italic;
}

.kh-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.kh-badge--grey   { background: #e9ecef; color: #555; }
.kh-badge--blue   { background: #d0eaff; color: #1a5c99; }
.kh-badge--green  { background: #d4edda; color: #1a6830; }
.kh-badge--red    { background: #fde8e8; color: #a00; }

/* Hide number spinner arrows on all Kehemi number inputs */
.kehemi-lead-input::-webkit-inner-spin-button,
.kehemi-lead-input::-webkit-outer-spin-button,
.kehemi-input[type=number]::-webkit-inner-spin-button,
.kehemi-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kehemi-lead-input[type=number],
.kehemi-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ── Chat message edit / delete actions ─────────────────────────────────── */
.kehemi-chat-msg-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kehemi-chat-msg-actions { margin-left:auto; display:none; gap:2px; }
.kehemi-chat-message:hover .kehemi-chat-msg-actions { display:flex; }
.kehemi-chat-msg-action-btn {
  background: none; border: none; cursor: pointer; padding: 2px 5px;
  font-size: 13px; line-height: 1; border-radius: 4px; opacity: 0.6;
  color: inherit;
}
.kehemi-chat-msg-action-btn:hover { opacity: 1; background: rgba(0,0,0,0.08); }

/* Edit textarea inline */
.kehemi-chat-msg-edit-area {
  width: 100%; min-height: 60px; padding: 6px 8px;
  border: 1px solid rgba(0,0,0,0.2); border-radius: 6px;
  font-size: 14px; line-height: 1.5; resize: vertical;
  background: rgba(255,255,255,0.6); color: inherit;
  box-sizing: border-box; margin-bottom: 6px;
}
.kehemi-chat-msg-edit-actions { display:flex; gap:6px; justify-content:flex-end; }

/* (edited) marker */
.kehemi-chat-msg-edited {
  font-size: 11px; font-style: italic; opacity: 0.6; margin-left: 6px;
}

/* ── Campaign panel — product card grid ─────────────────────────────────── */
.kh-panel-products-header { margin-bottom: 12px; }
.kh-panel-empty { color: #666; font-size: 13px; }
.kh-product-card-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; }

.kh-product-card-wide {
  display: flex !important; flex-direction: row !important; align-items: center !important;
  gap: 14px !important; background: #f8f9fb !important;
  border: 1px solid #e2e6ef !important; border-radius: 10px !important;
  padding: 10px 14px !important; min-height: 72px !important; box-sizing: border-box !important;
}
.kh-product-card-img {
  flex: 0 0 56px !important; width: 56px !important; height: 56px !important;
  max-width: 56px !important; max-height: 56px !important;
  border-radius: 6px !important; overflow: hidden !important; background: #eee !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.kh-product-card-img img {
  width: 56px !important; height: 56px !important; max-width: 56px !important;
  object-fit: cover !important; display: block !important;
}
.kh-product-card-no-img { font-size: 10px; color: #aaa; text-align: center; line-height: 1.3; padding: 4px; }

.kh-product-card-body { flex: 1 1 auto !important; min-width: 0 !important; }
.kh-product-card-name { font-size: 13px; font-weight: 600; color: #1b2030; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-product-card-meta { font-size: 11px; color: #888; display: flex; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }

.kh-product-card-status-row { display: flex; align-items: center; gap: 8px; }
.kh-product-card-status-row .kehemi-select { font-size: 12px; padding: 3px 6px; height: 28px; min-width: 140px; }

/* Rate card — table wrapper + sticky header */
.kh-rc-table-wrap { overflow-x: auto; }
.kh-rc-sticky-head th { position: sticky; top: 0; z-index: 2; }
.kh-rc-sticky-head th:first-child { z-index: 4; }
.kh-rc-sticky-head th:nth-child(2) { z-index: 3; }

/* Rate card — toolbar (template DDL + search on one row) */
.kh-rc-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 12px 0 16px; flex-wrap: wrap; }
.kh-rc-toolbar-left { display: flex; align-items: center; gap: 10px; }
.kh-rc-toolbar-left .kehemi-label { margin: 0; white-space: nowrap; font-weight: 600; font-size: 13px; }
.kh-rc-toolbar-left .kh-rc-template-select { min-width: 200px; }
.kh-rc-toolbar-right { flex: 1; max-width: 320px; }
.kh-rc-toolbar-right .kehemi-search-input { width: 100%; }

/* Rate card — thumbnail column */
.kh-rc-img-col { width: 52px !important; min-width: 52px !important; max-width: 52px !important; }
.kh-rc-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; cursor: zoom-in; display: block; margin: 0 auto; }
.kh-rc-thumb-placeholder { display: block; width: 40px; height: 40px; background: #f0f0f0; border-radius: 4px; margin: 0 auto; }

/* Rate card — floating bottom scrollbar */
.kh-rc-float-scroll {
  position: fixed; bottom: 0; z-index: 9999;
  overflow-x: auto; overflow-y: hidden;
  height: 14px;
  background: rgba(240,242,248,0.96);
  border-top: 1px solid #dde1ed;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
  display: none;
}
.kh-rc-float-scroll-inner { height: 1px; }

/* Rate card column header — two-line layout */
.kh-rc-th-region {
  display: block; font-size: 11px; font-weight: 600;
  white-space: nowrap; line-height: 1.4;
}
.kh-rc-th-qty {
  display: block; font-size: 11px; font-weight: 400;
  white-space: nowrap; color: #555; line-height: 1.3;
}

/* Image expand modal */
.kh-img-expand { cursor: zoom-in; }
.kh-img-modal-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 60px 20px 20px; box-sizing: border-box; overflow-y: auto;
}
.kh-img-modal-overlay.kh-cvc-hidden { display: none; }
.kh-img-modal-img {
  max-width: min(90vw, 1200px); max-height: calc(100vh - 100px);
  object-fit: contain;
  border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  display: block;
}
.kh-img-modal-close {
  position: fixed; top: 20px; right: 24px;
  background: none; border: none; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer; z-index: 100000;
}

/* Clickable table rows */
tr.kh-clickable-row { cursor: pointer; }
tr.kh-clickable-row:hover td { background: #f0f4ff; }

/* Product card — pricing column (right side) */
.kh-product-card-pricing {
  flex: 0 0 auto !important; min-width: 110px !important;
  display: flex !important; flex-direction: column !important;
  gap: 6px !important; border-left: 1px solid #e2e6ef !important;
  padding-left: 14px !important; align-self: stretch !important;
  justify-content: center !important;
}
.kh-product-card-tier { display: flex; flex-direction: row; align-items: baseline; gap: 4px; line-height: 1.5; flex-wrap: wrap; }
.kh-pct-label { font-size: 11px; color: #888; }
.kh-pct-sell { font-size: 11px; color: #1b2030; }
.kh-pct-cost { font-size: 11px; color: #888; }

/* ── AI Agent Chat Demo ──────────────────────────────────────────────────── */
.kh-ai-demo-wrap { display: flex; gap: 20px; align-items: flex-start; min-height: 560px; }
.kh-ai-chat-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.kh-ai-messages { flex: 1; min-height: 420px; max-height: 500px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; }
.kh-ai-loading { color: #94a3b8; font-size: 13px; text-align: center; padding: 20px 0; }
.kh-ai-msg { display: flex; }
.kh-ai-msg--user { justify-content: flex-end; }
.kh-ai-msg--assistant { justify-content: flex-start; }
.kh-ai-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.kh-ai-msg--user .kh-ai-bubble { background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff; border-bottom-right-radius: 4px; }
.kh-ai-msg--assistant .kh-ai-bubble { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kh-ai-typing { display: flex; align-items: center; gap: 5px; padding: 12px 14px !important; }
.kh-ai-typing span { width: 7px; height: 7px; background: #94a3b8; border-radius: 50%; animation: kh-ai-bounce 1.2s infinite; }
.kh-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.kh-ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes kh-ai-bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
.kh-ai-composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fff; align-items: flex-end; }
.kh-ai-input { flex: 1; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px; font-size: 14px; resize: none; line-height: 1.4; font-family: inherit; color: #1e293b; outline: none; }
.kh-ai-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.kh-ai-composer .kh-ai-send-btn,
.kh-ai-composer .kh-ai-send-btn:link,
.kh-ai-composer .kh-ai-send-btn:visited { width: 38px !important; height: 38px !important; border-radius: 8px !important; background: linear-gradient(135deg,#4f46e5,#7c3aed) !important; color: #fff !important; border: none !important; cursor: pointer; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; transition: opacity .15s; padding: 0 !important; }
.kh-ai-composer .kh-ai-send-btn:hover { opacity: .9 !important; background: linear-gradient(135deg,#4f46e5,#7c3aed) !important; }
.kh-ai-composer .kh-ai-send-btn:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.kh-ai-composer .kh-ai-send-btn svg { stroke: #fff !important; color: #fff !important; }
.kh-ai-order-panel { width: 300px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.kh-ai-order-panel-header { background: linear-gradient(135deg,#1b2030,#2d3a5c); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 10px 14px; }
#kh-ai-order-data { padding: 14px; }
.kh-ai-order-meta { margin-bottom: 14px; }
.kh-ai-order-row { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #f1f5f9; }
.kh-ai-order-row:last-child { border-bottom: none; }
.kh-ai-order-label { color: #94a3b8; min-width: 72px; flex-shrink: 0; font-size: 12px; padding-top: 1px; }
.kh-ai-order-value { color: #1e293b; font-size: 13px; word-break: break-word; }
.kh-ai-order-row--address .kh-ai-order-value { line-height: 1.4; }
.kh-ai-mono { font-family: monospace; font-size: 12px; }
.kh-ai-status-badge { background: #dbeafe; color: #1d4ed8; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.kh-ai-items-header { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; padding: 0 14px; }
.kh-ai-items-list { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.kh-ai-item-row { display: flex; align-items: center; gap: 6px; font-size: 13px; background: #f8fafc; border-radius: 6px; padding: 6px 8px; flex-wrap: nowrap; }
.kh-ai-item-qty { color: #64748b; font-size: 12px; font-weight: 600; min-width: 28px; flex-shrink: 0; }
.kh-ai-item-name { flex: 1; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kh-ai-item-variant { font-size: 11px; color: #7c3aed; background: #f5f3ff; padding: 2px 7px; border-radius: 10px; font-weight: 500; flex-shrink: 0; white-space: nowrap; }
.kh-ai-order--updated { animation: kh-ai-flash .6s ease; }
@keyframes kh-ai-flash { 0%,100% { background: #fff; } 50% { background: #ecfdf5; } }
@media (max-width: 768px) { .kh-ai-demo-wrap { flex-direction: column; } .kh-ai-order-panel { width: 100%; } }
.kh-ai-escalation-card { display: flex; gap: 12px; align-items: flex-start; background: #fff8f0; border: 1px solid #fed7aa; border-left: 4px solid #f97316; border-radius: 12px; padding: 14px 16px; margin: 4px 0; }
.kh-ai-escalation-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.kh-ai-escalation-body strong { font-size: 14px; color: #9a3412; display: block; margin-bottom: 4px; }
.kh-ai-escalation-body p { font-size: 13px; color: #7c2d12; margin: 0 0 10px; line-height: 1.5; }
.kh-ai-escalation-badge { display: inline-flex; align-items: center; gap: 5px; background: #f97316; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .03em; }
.kh-ai-escalation-badge::before { content: "●"; font-size: 8px; animation: kh-ai-pulse 1.5s infinite; }
@keyframes kh-ai-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── Admin login: error + success notices inside glass card ──────────────────
   The glass card forces color:rgba(255,255,255,.92)!important on all divs,
   which washes out the inline-styled notice boxes. These rules sit last in the
   sheet so they win the specificity tie-break. Scoped to .rewalld-admin-login
   so the client /rewards-login/ page (which uses .kh-login-split) is untouched.
   --------------------------------------------------------------------------- */
body:has(.kehemi-login-wrap) .rewalld-admin-login div.kehemi-login-error {
  background: rgba(239,68,68,0.18) !important;
  border: 1px solid rgba(239,68,68,0.50) !important;
  color: #fff !important;
  border-radius: 10px;
}
body:has(.kehemi-login-wrap) .rewalld-admin-login div.kehemi-login-msg {
  background: rgba(34,197,94,0.18) !important;
  border: 1px solid rgba(34,197,94,0.50) !important;
  color: #fff !important;
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   REWALLD HOMEPAGE v2  (rw2-*)
   ═══════════════════════════════════════════════════════════════ */

/* Variables */
:root {
  --rw2-dark:    #0a0f1e;
  --rw2-navy:    #0f172a;
  --rw2-teal:    #0d9488;
  --rw2-teal-lt: #5eead4;
  --rw2-white:   #ffffff;
  --rw2-muted:   #64748b;
  --rw2-light:   #f8fafc;
  --rw2-border:  #e2e8f0;
  --rw2-radius:  14px;
  --rw2-shadow:  0 4px 24px rgba(0,0,0,0.08);
}
body:has(.rw2-hero) { background: #0a0f1e; }
body:has(.rw2-hero) .site-content,
body:has(.rw2-hero) #content,
body:has(.rw2-hero) .entry-content { padding: 0 !important; max-width: 100% !important; }

/* Shared */
.rw2-container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.rw2-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0d9488; margin: 0 0 14px; display: block; }
.rw2-eyebrow-light { color: #5eead4; }
.rw2-section-title { font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #0f172a; line-height: 1.2; margin: 0 0 16px; }
.rw2-title-light { color: #ffffff !important; }
.rw2-section-sub { font-size: 17px; color: #64748b; line-height: 1.75; margin: 0; }
.rw2-section { padding: 100px 0; }
.rw2-section-white { background: #ffffff; }
.rw2-section-light { background: #f8fafc; }
.rw2-section-dark  { background: #0f172a; }
.rw2-section-header { text-align: center; max-width: 640px; margin: 0 auto 72px; }

/* Buttons */
.rw2-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all 0.22s ease; cursor: pointer; border: 2px solid transparent; }
.rw2-btn:hover { transform: translateY(-2px); text-decoration: none; }
.rw2-btn-primary { background: #0d9488; color: #ffffff; box-shadow: 0 4px 20px rgba(13,148,136,0.4); }
.rw2-btn-primary:hover { background: #0f766e; color: #ffffff; box-shadow: 0 8px 32px rgba(13,148,136,0.5); }
.rw2-btn-ghost { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.4); }
.rw2-btn-ghost:hover { border-color: #5eead4; color: #5eead4; }
.rw2-btn-light { background: #ffffff; color: #0f172a; }
.rw2-btn-light:hover { background: #f0fdfa; color: #0d9488; }
.rw2-btn-lg { padding: 18px 38px; font-size: 16px; }

/* Scroll reveal */
.rw2-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rw2-reveal.rw2-revealed { opacity: 1; transform: none; }
.rw2-reveal:nth-child(2) { transition-delay: 0.1s; }
.rw2-reveal:nth-child(3) { transition-delay: 0.2s; }
.rw2-reveal:nth-child(4) { transition-delay: 0.3s; }
.rw2-reveal:nth-child(5) { transition-delay: 0.15s; }
.rw2-reveal:nth-child(6) { transition-delay: 0.25s; }

/* Hero */
.rw2-hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: #0a0f1e; overflow: hidden; padding: 120px 28px 80px; }
.rw2-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.rw2-hero-mesh { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 60% 40%, rgba(13,148,136,0.18) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 20% 70%, rgba(99,102,241,0.12) 0%, transparent 70%); animation: rw2MeshShift 12s ease-in-out infinite alternate; }
@keyframes rw2MeshShift { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.08) translate(-2%,2%); } }
.rw2-hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.25; }
.rw2-hero-glow-1 { width: 500px; height: 500px; background: #0d9488; top: -100px; right: 10%; animation: rw2GlowPulse 8s ease-in-out infinite; }
.rw2-hero-glow-2 { width: 400px; height: 400px; background: #6366f1; bottom: -80px; left: 5%; animation: rw2GlowPulse 10s ease-in-out infinite 2s; }
@keyframes rw2GlowPulse { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.32; transform: scale(1.12); } }
.rw2-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.rw2-hero-headline { font-size: clamp(38px, 5.5vw, 72px); font-weight: 900; color: #ffffff; line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.02em; }
.rw2-hero-accent { color: #5eead4; background: linear-gradient(90deg, #5eead4, #0d9488); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rw2-hero-sub { font-size: 18px; color: #94a3b8; line-height: 1.75; margin: 0 0 60px; max-width: 500px; }
.rw2-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.rw2-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.rw2-hero-img-wrap { position: relative; }
.rw2-hero-img { width: 100%; max-width: 560px; border-radius: 20px; display: block; box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); animation: rw2HeroFloat 6s ease-in-out infinite; }
@keyframes rw2HeroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.rw2-hero-float-card { position: absolute; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.96); backdrop-filter: blur(16px); border-radius: 12px; padding: 12px 18px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); z-index: 3; animation: rw2HeroFloat 6s ease-in-out infinite; }
.rw2-float-card-1 { bottom: 18%; left: -40px; animation-delay: -2s; }
.rw2-float-card-2 { top: 12%; right: -30px; animation-delay: -4s; }
.rw2-fc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rw2-fc-dot-green { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.6); }
.rw2-fc-icon { width: 28px; height: 28px; background: #f0fdfa; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rw2-fc-icon svg { width: 14px; height: 14px; color: #16a34a; }
.rw2-fc-content { display: flex; flex-direction: column; }
.rw2-fc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; line-height: 1; }
.rw2-fc-value { font-size: 13px; font-weight: 700; color: #0f172a; margin-top: 3px; white-space: nowrap; }
.rw2-hero-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); transition: opacity 0.4s ease; z-index: 2; }
.rw2-hero-scroll-hint span { display: block; width: 24px; height: 38px; border: 2px solid rgba(255,255,255,0.3); border-radius: 12px; position: relative; margin: 0 auto; }
.rw2-hero-scroll-hint span::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: rgba(255,255,255,0.6); border-radius: 2px; animation: rw2ScrollDot 1.8s ease-in-out infinite; }
@keyframes rw2ScrollDot { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(14px); } }

/* Stats */
.rw2-stats { background: #0f172a; padding: 60px 0; }
.rw2-stats-grid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.rw2-stat { text-align: center; padding: 20px 48px; }
.rw2-stat-number { font-size: 48px; font-weight: 900; color: #ffffff; line-height: 1; display: inline-block; }
.rw2-stat-suffix { font-size: 30px; font-weight: 900; color: #5eead4; vertical-align: top; margin-top: 6px; }
.rw2-stat-label  { display: block; font-size: 13px; color: #64748b; margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; }
.rw2-stat-divider { width: 1px; height: 60px; background: rgba(255,255,255,0.12); }

/* How it works */
.rw2-steps-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.rw2-steps-image { width: 100%; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.rw2-steps-col { display: flex; flex-direction: column; }
.rw2-step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid #e2e8f0; }
.rw2-step:last-child { border-bottom: none; }
.rw2-step-num { font-size: 48px; font-weight: 900; color: #0d9488; opacity: 0.2; line-height: 1; flex-shrink: 0; width: 56px; }
.rw2-step-title { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.rw2-step-desc  { font-size: 15px; color: #64748b; line-height: 1.75; margin: 0; }

/* Features */
.rw2-features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.rw2-feature-card { background: #ffffff; border-radius: 14px; padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; transition: transform 0.22s ease, box-shadow 0.22s ease; position: relative; overflow: hidden; }
.rw2-feature-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #0d9488, #5eead4); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.rw2-feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.13); }
.rw2-feature-card:hover::before { transform: scaleX(1); }
.rw2-feature-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.rw2-feature-icon svg { width: 26px; height: 26px; }
.rw2-icon-teal   { background: #f0fdfa; } .rw2-icon-teal svg   { color: #0d9488; }
.rw2-icon-purple { background: #faf5ff; } .rw2-icon-purple svg { color: #7c3aed; }
.rw2-icon-orange { background: #fff7ed; } .rw2-icon-orange svg { color: #ea580c; }
.rw2-icon-green  { background: #f0fdf4; } .rw2-icon-green svg  { color: #16a34a; }
.rw2-icon-blue   { background: #eff6ff; } .rw2-icon-blue svg   { color: #2563eb; }
.rw2-icon-rose   { background: #fff1f2; } .rw2-icon-rose svg   { color: #e11d48; }
.rw2-feature-title { font-size: 17px; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.rw2-feature-desc  { font-size: 14px; color: #64748b; line-height: 1.75; margin: 0 0 18px; }
.rw2-feature-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0d9488; background: #f0fdfa; padding: 3px 10px; border-radius: 50px; }

/* Ethical */
.rw2-ethical-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.rw2-ethical-desc { font-size: 16px; color: #94a3b8; line-height: 1.8; margin: 0 0 56px; }
.rw2-ethical-badges { display: flex; flex-direction: column; gap: 16px; }
.rw2-badge { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 18px 20px; transition: background 0.2s ease; }
.rw2-badge:hover { background: rgba(255,255,255,0.08); }
.rw2-badge-check { width: 36px; height: 36px; border-radius: 50%; background: rgba(13,148,136,0.2); border: 1.5px solid #0d9488; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rw2-badge-check svg { width: 16px; height: 16px; color: #5eead4; }
.rw2-badge-body { display: flex; flex-direction: column; }
.rw2-badge-body strong { font-size: 15px; font-weight: 700; color: #ffffff; }
.rw2-badge-body span   { font-size: 12px; color: #64748b; margin-top: 2px; }

/* Audience */
.rw2-audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.rw2-audience-card { background: #ffffff; border-radius: 14px; padding: 36px 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid #e2e8f0; position: relative; }
.rw2-audience-featured { background: #0f172a; border-color: #0d9488; box-shadow: 0 8px 40px rgba(13,148,136,0.25); }
.rw2-audience-featured .rw2-audience-title { color: #ffffff; }
.rw2-audience-featured .rw2-audience-desc  { color: #94a3b8; }
.rw2-audience-featured .rw2-audience-list li { color: #cbd5e1; border-top-color: rgba(255,255,255,0.1); }
.rw2-audience-featured .rw2-audience-icon  { background: rgba(13,148,136,0.2); }
.rw2-audience-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #0d9488; color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 14px; border-radius: 50px; white-space: nowrap; }
.rw2-audience-icon { width: 52px; height: 52px; background: #f0fdfa; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.rw2-audience-icon svg { width: 26px; height: 26px; color: #0d9488; }
.rw2-audience-title { font-size: 19px; font-weight: 800; color: #0f172a; margin: 0 0 12px; }
.rw2-audience-desc  { font-size: 14px; color: #64748b; line-height: 1.75; margin: 0 0 22px; }
.rw2-audience-list  { list-style: none; padding: 0; margin: 0; }
.rw2-audience-list li { font-size: 13px; color: #64748b; padding: 7px 0 7px 20px; position: relative; border-top: 1px solid #e2e8f0; }
.rw2-audience-list li:first-child { border-top: none; }
.rw2-audience-list li::before { content: "✓"; position: absolute; left: 0; color: #0d9488; font-weight: 800; font-size: 12px; }

/* CTA */
.rw2-cta-section { background: #0a0f1e; padding: 120px 28px; position: relative; overflow: hidden; text-align: center; }
.rw2-cta-glow { position: absolute; width: 700px; height: 400px; border-radius: 50%; background: radial-gradient(ellipse, rgba(13,148,136,0.22) 0%, transparent 70%); left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.rw2-cta-wrap { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.rw2-cta-headline { font-size: clamp(30px, 4.5vw, 52px); font-weight: 900; color: #ffffff; margin: 0 0 20px; line-height: 1.15; letter-spacing: -0.02em; }
.rw2-cta-sub { font-size: 18px; color: #64748b; line-height: 1.75; margin: 0 0 64px; }
.rw2-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1024px) {
  .rw2-features-grid { grid-template-columns: repeat(2,1fr); }
  .rw2-steps-wrap    { grid-template-columns: 1fr; gap: 48px; }
  .rw2-steps-image-col { display: none; }
}
@media (max-width: 768px) {
  .rw2-hero         { padding: 100px 20px 60px; min-height: auto; }
  .rw2-hero-inner   { grid-template-columns: 1fr; gap: 40px; }
  .rw2-hero-visual  { order: -1; }
  .rw2-hero-img     { max-width: 100%; }
  .rw2-float-card-1 { left: 0; bottom: 8%; }
  .rw2-float-card-2 { right: 0; top: 4%; }
  .rw2-stat         { padding: 16px 24px; }
  .rw2-stat-divider { display: none; }
  .rw2-section      { padding: 64px 0; }
  .rw2-features-grid { grid-template-columns: 1fr; }
  .rw2-ethical-wrap  { grid-template-columns: 1fr; gap: 48px; }
  .rw2-audience-grid { grid-template-columns: 1fr; }
  .rw2-cta-section   { padding: 80px 20px; }
}

/* ==========================================================================
   AI EMAIL AGENT — Settings page + Status log
   ========================================================================== */

/* List page single-row toolbar: Title | Search | Action button
   Apply .kh-list-toolbar to .kehemi-card-header to activate.
   Reusable on any list page (products, factories, clients, etc.) */
.kh-list-toolbar { gap:12px; flex-wrap:wrap; padding:14px 20px; }
.kh-list-toolbar .kh-list-toolbar__title { margin:0; white-space:nowrap; }
.kh-list-toolbar .kh-list-toolbar__search {
  flex:1;
  min-width:160px;
  max-width:400px;
  margin:0;
}
/* On narrow screens stack title above search+button */
@media (max-width:600px) {
  .kh-list-toolbar { flex-direction:column; align-items:stretch; }
  .kh-list-toolbar .kh-list-toolbar__search { max-width:100%; }
}

/* Bulk action bar — Products list page */
.kh-bulk-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 20px; background:#f0f4f8; border-bottom:1px solid #dde3ea; }
.kh-bulk-bar__count { font-size:13px; color:#475569; white-space:nowrap; min-width:80px; }
.kh-bulk-bar .select2-container { min-width:200px; }
.kh-bulk-bar .kh-bulk-msg { font-size:13px; color:#0176D3; margin-left:4px; }
.kh-bulk-th { width:36px !important; min-width:36px; max-width:36px; }
.kh-th-actions { width:44px !important; min-width:44px; max-width:44px; }
@media (max-width:600px) { .kh-bulk-bar { flex-direction:column; align-items:flex-start; } }

/* Button row for provider connect/disconnect actions (not table icon actions) */
.kh-ea-button-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* Status badges (log table) */
.kh-ea-badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.kh-ea-badge--processed       { background:#dcfce7; color:#166534; }
.kh-ea-badge--error           { background:#fee2e2; color:#991b1b; }
.kh-ea-badge--escalated       { background:#fef3c7; color:#92400e; }
.kh-ea-badge--no_order_found  { background:#f1f5f9; color:#475569; }

/* Provider connection status dot */
.kh-ea-connect-status { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:14px; color:#cbd5e1; }
.kh-ea-connect-status__dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.kh-ea-connect-status__dot--connected    { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.5); }
.kh-ea-connect-status__dot--disconnected { background:#475569; }

/* Settings form rows */
.kh-ea-settings-row { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.kh-ea-settings-row > label:first-child { min-width:180px; font-size:13px; font-weight:500; color:#94a3b8; flex-shrink:0; }
.kh-ea-settings-row .kh-form-field { flex:1; min-width:200px; max-width:400px; }
.kh-ea-settings-row .kehemi-select { flex:1; min-width:200px; max-width:400px; }

/* Toggle switch (enabled/disabled) */
.kh-ea-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; gap:10px; }
.kh-ea-toggle input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; }
.kh-ea-toggle__track { display:inline-block; width:42px; height:24px; background:#334155; border-radius:12px; transition:background .2s; flex-shrink:0; position:relative; }
.kh-ea-toggle__track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.kh-ea-toggle input:checked + .kh-ea-toggle__track { background:#0d9488; }
.kh-ea-toggle input:checked + .kh-ea-toggle__track::after { transform:translateX(18px); }


/* ── Drops & Codes form grid ─────────────────────────────────────────────── */
.kh-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kh-form-grid .field { display:flex; flex-direction:column; gap:6px; }
.kh-form-grid .field label { font-size:13px; font-weight:600; color:#555; }
.kh-form-grid .field input[type="text"],
.kh-form-grid .field input[type="url"],
.kh-form-grid .field input[type="email"],
.kh-form-grid .field input[type="number"],
.kh-form-grid .field input[type="datetime-local"] {
  width:100%; padding:9px 12px; border:1px solid #d1d5db; border-radius:4px;
  font-size:14px; color:#1a1a1a; background:#fff;
}
.kh-form-grid .field input[type="color"] {
  width:48px; height:36px; padding:2px; border:1px solid #d1d5db; border-radius:4px; cursor:pointer;
}
.kh-form-grid .field input[type="checkbox"] { width:16px; height:16px; margin-right:6px; }
@media (max-width:640px) { .kh-form-grid { grid-template-columns:1fr; } }

/* DC Campaigns — checkbox field bottom-aligned with adjacent input */
.kh-form-grid .kh-field--bottom { justify-content:flex-end; }

/* DC Campaigns — product image preview (legacy single-item, kept for rollback) */
.kh-dc-product-preview {
  display:block; margin:0 auto;
  max-width:160px; max-height:160px;
  border-radius:6px; border:1px solid #e5e7eb;
  object-fit:contain; background:#f9f9f9; padding:8px;
}

/* ── DC Campaigns — multi-product picker (migration 014) ─────────────────── */
.kh-dc-product-picker { margin-top:12px; border:1px solid #e5e7eb; border-radius:6px; overflow:hidden; }

.kh-dc-picker-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; background:#f8fafc; border-bottom:1px solid #e5e7eb;
}
.kh-dc-picker-toolbar .kehemi-search-input { flex:1; min-width:180px; }
.kh-dc-picker-toolbar .select2-container { min-width:180px !important; max-width:220px; }

.kh-dc-picker-list {
  max-height:340px; overflow-y:auto;
  padding:4px 0;
}

.kh-dc-picker-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; cursor:pointer;
  transition:background .15s;
  font-size:13px; color:#1a1a1a;
}
.kh-dc-picker-row:hover { background:#f0f4ff; }
.kh-dc-picker-row--checked { background:#eef2ff; }
.kh-dc-picker-row input[type="checkbox"] { flex-shrink:0; width:16px; height:16px; cursor:pointer; }

.kh-dc-picker-thumb {
  width:40px; height:40px; border-radius:4px; object-fit:contain;
  border:1px solid #e5e7eb; background:#f9f9f9; flex-shrink:0;
}
.kh-dc-picker-thumb--empty {
  display:inline-block; background:#f1f5f9;
}

.kh-dc-picker-name { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kh-dc-picker-campaign { font-size:12px; color:#94a3b8; white-space:nowrap; }

.kh-dc-picker-footer {
  padding:9px 14px; background:#f8fafc; border-top:1px solid #e5e7eb;
  font-size:12px; color:#64748b;
}
.kh-dc-picker-footer-names { font-weight:600; color:#1a1a1a; }

.kh-dc-picker-empty { padding:24px; color:#aaa; text-align:center; }

@media (max-width:640px) {
  .kh-dc-picker-toolbar { flex-direction:column; align-items:stretch; }
  .kh-dc-picker-campaign { display:none; }
}

/* ── DC NPS admin page ───────────────────────────────────────────────────── */

/* Stats bar */
.kh-nps-stats {
  display:flex; flex-wrap:wrap; gap:12px;
  margin-bottom:20px;
}
.kh-nps-stat {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:90px; padding:14px 18px;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px;
  text-align:center;
}
.kh-nps-stat--score { border-color:#0d9488; background:#f0fdfa; min-width:110px; }
.kh-nps-stat--promoter  { border-color:#22c55e; background:#f0fdf4; }
.kh-nps-stat--passive   { border-color:#f59e0b; background:#fffbeb; }
.kh-nps-stat--detractor { border-color:#ef4444; background:#fef2f2; }

.kh-nps-stat__value {
  font-size:26px; font-weight:700; line-height:1; color:#1a1a1a;
}
.kh-nps-stat--score .kh-nps-stat__value { font-size:32px; color:#0d9488; }
.kh-nps-stat__value--positive { color:#0d9488; }
.kh-nps-stat__value--negative { color:#ef4444; }
.kh-nps-stat--promoter  .kh-nps-stat__value { color:#16a34a; }
.kh-nps-stat--passive   .kh-nps-stat__value { color:#d97706; }
.kh-nps-stat--detractor .kh-nps-stat__value { color:#dc2626; }

.kh-nps-stat__label {
  margin-top:4px; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:#94a3b8;
}

/* Filters */
.kh-nps-filters {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.kh-nps-filters .kehemi-input {
  padding:8px 10px; border:1px solid #d1d5db; border-radius:4px;
  font-size:13px; color:#1a1a1a; background:#fff; height:36px;
}
.kh-nps-filters .select2-container { min-width:140px !important; }

/* Score badges */
.kh-nps-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  font-size:13px; font-weight:700; color:#fff;
}
.kh-nps-badge--promoter  { background:#198754; }
.kh-nps-badge--passive   { background:#ffc107; color:#1a1a1a; }
.kh-nps-badge--detractor { background:#dc3545; }
.kh-nps-badge--pending   { background:#94a3b8; font-size:16px; }

/* Feedback and staff note truncation */
.kh-nps-feedback, .kh-nps-staff-note {
  display:block; max-width:320px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px;
}
.kh-nps-staff-note { font-style:italic; color:#64748b; }

/* Tick mark for Google / TrustPilot */
.kh-nps-check { color:#22c55e; font-size:16px; font-weight:700; cursor:default; }

/* Row count footer */
.kh-nps-table-count { margin-top:8px; font-size:12px; color:#94a3b8; }

@media (max-width:768px) {
  .kh-nps-stats { gap:8px; }
  .kh-nps-stat  { min-width:70px; padding:10px 12px; }
  .kh-nps-stat__value { font-size:20px; }
  .kh-nps-stat--score .kh-nps-stat__value { font-size:24px; }
  .kh-nps-filters { flex-direction:column; align-items:stretch; }
  .kh-nps-feedback, .kh-nps-staff-note { max-width:calc(100vw - 160px); white-space:normal; }
}

/* ── Admin row-click tip banner (TEMPORARY) ─────────────────────────────────── */
#kh-row-tip {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 16px;
  background: rgba(30,30,40,0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.25s ease;
}
#kh-row-tip-close {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
#kh-row-tip-close:hover { color: #fff; }

/* =========================================================
   PRODUCT MODIFIERS (kehemi-admin-add-edit-product)
   ========================================================= */

.kh-mod-group {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-bottom: 16px;
  background: #fff;
}
.kh-mod-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 6px 6px 0 0;
  gap: 12px;
}
.kh-mod-group-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kh-mod-group-name {
  font-size: 14px;
  color: #1e293b;
  text-transform: capitalize;
}
.kh-mod-options {
  padding: 10px 14px;
}
.kh-mod-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.kh-mod-option:last-of-type {
  border-bottom: none;
}
.kh-mod-option-name-field {
  flex: 1;
  min-width: 120px;
  height: 34px;
  font-size: 13px;
  text-transform: capitalize;
}
.kh-mod-option-price-field {
  width: 120px;
  height: 34px;
  font-size: 13px;
}
.kh-mod-add-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed #e2e8f0;
  flex-wrap: wrap;
}
.kh-mod-add-option-row .kehemi-input {
  height: 36px;
  font-size: 13px;
}
.kh-mod-price-help {
  width: 100%;
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
/* Modifier option image slot */
.kh-mod-opt-img-file {
  display: none;
}
.kh-mod-option-image {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8fafc;
}
.kh-mod-option-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.kh-mod-option-image .kh-mod-option-upload-btn {
  width: 100%;
  height: 100%;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  padding: 4px;
  line-height: 1.3;
}
body.kh-theme-enterprise .kh-mod-option-image .kh-mod-option-upload-btn {
  background: transparent !important;
  border: none !important;
  color: #64748b;
}
.kh-mod-option-image-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.kh-mod-option-image-actions button {
  padding: 2px 5px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
}
.kh-mod-option-image-actions button:hover {
  background: #f1f5f9;
}
@media (max-width: 600px) {
  .kh-mod-option-image {
    width: 100%;
    height: 100px;
  }
  .kh-mod-option-image-actions {
    flex-direction: row;
  }
}

/* NPS — review invite section in modal */
.kh-nps-review-section { border-top: 1px solid #e2e8f0; padding-top: 16px; margin-bottom: 16px; }
.kh-nps-review-label { font-weight: 600; font-size: 13px; margin: 0 0 10px; color: #334155; }
.kh-nps-review-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.kh-nps-review-btn--sent { background: #d1fae5 !important; color: #065f46 !important; border-color: #6ee7b7 !important; cursor: default !important; }
.kh-nps-review-status { font-size: 12px; margin: 8px 0 0; min-height: 16px; }

/* ── Progress Reports ──────────────────────────────────────────────────────── */
.kh-progress-month { margin-bottom: 32px; }
.kh-progress-month-title { font-size: 16pt; color: #0f3460; border-bottom: 2px solid #cdd8e8; padding-bottom: 6px; margin: 0 0 16px; font-weight: 700; }

/* Accordion panel */
.kh-progress-panel { border: 1px solid #cdd8e8; border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.kh-progress-panel-header { background: #0f3460; color: #fff; padding: 14px 18px; cursor: pointer; user-select: none; }
.kh-progress-panel-header:hover { background: #16213e; }
.kh-progress-panel-titlerow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kh-progress-panel-week { font-size: 13pt; font-weight: 700; }
.kh-progress-panel-chevron { font-size: 12px; transition: transform 0.2s; display: inline-block; }
.kh-progress-panel.is-open .kh-progress-panel-chevron { transform: rotate(180deg); }

/* Stat boxes inside header */
.kh-progress-panel-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.kh-progress-stat-box { background: rgba(255,255,255,0.12); border-radius: 5px; padding: 8px 14px; text-align: center; min-width: 100px; position: relative; }
.kh-progress-stat-number { display: block; font-size: 18pt; font-weight: 700; color: #fff; line-height: 1.1; }
.kh-progress-stat-label { display: block; font-size: 8pt; color: rgba(255,255,255,0.75); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.kh-stat-delta { display: inline-block; background: #22c55e; color: #fff; font-size: 8pt; font-weight: 700; border-radius: 3px; padding: 1px 5px; margin-top: 4px; }

/* Panel body */
.kh-progress-panel-body { display: none; border-top: 1px solid #cdd8e8; }
.kh-progress-panel.is-open .kh-progress-panel-body { display: block; }

/* Scoped report content styles */
.kh-progress-report-content { font-family: Calibri, Arial, sans-serif; font-size: 11pt; color: #1a1a2e; padding: 24px 28px; line-height: 1.5; }
.kh-progress-report-content h1 { font-size: 20pt; color: #0f3460; border-bottom: 3px solid #0f3460; padding-bottom: 8px; margin: 0 0 4px; }
.kh-progress-report-content h2 { font-size: 13pt; color: #0f3460; border-bottom: 1px solid #cdd8e8; padding-bottom: 4px; margin-top: 24px; }
.kh-progress-report-content h3 { font-size: 11pt; color: #16213e; margin-bottom: 4px; }
.kh-progress-report-content p { margin: 6px 0 10px; }
.kh-progress-report-content ul { margin: 6px 0; padding-left: 20px; }
.kh-progress-report-content li { margin-bottom: 3px; }
.kh-progress-report-content .subtitle { font-size: 11pt; color: #555; margin: 0 0 24px; }
.kh-progress-report-content table { border-collapse: collapse; width: 100%; margin: 12px 0 20px; }
.kh-progress-report-content th { background: #0f3460; color: #fff; text-align: left; padding: 7px 12px; font-size: 10pt; }
.kh-progress-report-content td { padding: 6px 12px; border-bottom: 1px solid #e4eaf2; font-size: 10pt; vertical-align: top; }
.kh-progress-report-content tr:nth-child(even) td { background: #f5f8fc; }
.kh-progress-report-content .stat-grid { display: table; width: 100%; margin: 14px 0 24px; border-collapse: collapse; }
.kh-progress-report-content .stat-row { display: table-row; }
.kh-progress-report-content .stat-box { display: table-cell; width: 25%; border: 1px solid #cdd8e8; padding: 14px 16px; text-align: center; vertical-align: middle; }
.kh-progress-report-content .stat-number { font-size: 20pt; font-weight: 700; color: #0f3460; display: block; }
.kh-progress-report-content .stat-label { font-size: 9pt; color: #666; display: block; margin-top: 2px; }
.kh-progress-report-content .note { background: #f0f4fb; border-left: 4px solid #0f3460; padding: 10px 14px; margin: 14px 0; font-size: 10pt; color: #333; }
.kh-progress-report-content .badge { display: inline-block; background: #e8f0fb; color: #0f3460; border-radius: 4px; padding: 2px 8px; font-size: 9pt; margin: 2px; }
.kh-progress-report-content .section-intro { color: #444; margin-bottom: 10px; }
.kh-progress-report-content .footer { margin-top: 32px; border-top: 1px solid #cdd8e8; padding-top: 10px; font-size: 9pt; color: #888; }

/* Cost Report — phantom fixed scrollbar */
#kh-rpt-phantom-scroll {
  position: fixed;
  bottom: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  z-index: 200;
  height: 14px;
}
#kh-rpt-phantom-inner {
  height: 1px;
}

/* ── DC Orders: customer + address two-column card ──────────────────── */
.kh-dco-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.kh-dco-cols-2 > div {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.kh-dco-col-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  margin: 0 0 12px;
}
@media (max-width: 640px) {
  .kh-dco-cols-2 { grid-template-columns: 1fr; }
}

/* ── DC Orders: AI chat history ─────────────────────────────────────── */
.kh-chat-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}
.kh-chat-msg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 75%;
}
.kh-chat-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}
.kh-chat-msg--assistant {
  align-self: flex-start;
  align-items: flex-start;
}
.kh-chat-bubble {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.kh-chat-msg--user .kh-chat-bubble {
  background: #0f766e;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.kh-chat-msg--assistant .kh-chat-bubble {
  background: #f1f5f9;
  color: #1e293b;
  border-bottom-left-radius: 4px;
}
.kh-chat-meta {
  font-size: 11px;
  color: #94a3b8;
  padding: 0 4px;
}

/* ── Admin AI Agent standalone page ─────────────────────────────────────── */
/* Wrapper that removes card body padding so the chat panel fills edge-to-edge */
.kh-aia-page-body { padding: 0 !important; }
/* The chat panel inside the card — fill height, remove extra border (card already has one) */
.kh-aia-page-panel { border: none !important; border-radius: 0 !important; min-height: 540px; }
.kh-aia-page-panel .kh-ai-messages { min-height: 460px; max-height: calc(100vh - 320px); }

/* Legacy card-body class (kept for compatibility) */
.kh-aia-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.kh-aia-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 400px;
  max-height: calc(100vh - 340px);
}
.kh-aia-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.kh-aia-msg--bot {
  background: #f1f5f9;
  color: #1e293b;
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.kh-aia-msg--user {
  background: var(--primary, #22c1dc);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.kh-aia-msg--thinking {
  background: #f1f5f9;
  color: #94a3b8;
  font-style: italic;
  align-self: flex-start;
}
.kh-aia-msg--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.kh-aia-query-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 20px;
  font-size: 11px;
  font-style: normal;
  vertical-align: middle;
}
.kh-aia-input-row {
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.kh-aia-input {
  flex: 1;
  resize: none;
  border-radius: 8px;
  font-size: 14px;
  min-height: 42px;
  max-height: 120px;
}
.kh-aia-send {
  flex-shrink: 0;
  align-self: flex-end;
}
.kh-aia-hint {
  font-size: 11px;
  color: #94a3b8;
  margin: 0;
  padding: 6px 20px 14px;
  text-align: center;
}
.kh-aia-no-key {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 12px 20px;
  font-size: 13px;
}
@media (max-width: 600px) {
  .kh-aia-messages { min-height: 300px; max-height: 55vh; padding: 14px; }
  .kh-aia-msg { max-width: 95%; font-size: 13px; }
  .kh-aia-input-row { padding: 10px 14px; }
  .kh-aia-hint { padding: 4px 14px 10px; }
}

/* ── AI Agent floating button (FAB) + slide-up panel ───────────────────────── */

/* FAB — sits left of the video tutorial button */
.kh-aia-fab {
  position: fixed;
  bottom: 28px;
  right: 96px; /* 28px margin + 56px video btn + 12px gap */
  z-index: 9000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #6366f1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(99,102,241,.45);
  transition: background 0.2s, transform 0.15s;
  color: #fff;
  padding: 0;
}
.kh-aia-fab:hover { background: #4f46e5; transform: scale(1.08); }
.kh-aia-fab:focus { outline: 2px solid #6366f1; outline-offset: 3px; }
.kh-aia-fab--active { background: #4f46e5; }
.kh-aia-fab svg { width: 24px; height: 24px; display: block; }

/* Slide-up chat panel */
.kh-aia-panel {
  position: fixed;
  bottom: 96px; /* above the FAB row */
  right: 28px;
  z-index: 8999;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Hidden by default — transform pushes it below viewport */
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
  max-height: 520px;
}
.kh-aia-panel--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Panel header */
.kh-aia-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  flex-shrink: 0;
}
.kh-aia-panel-header-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kh-aia-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.kh-aia-panel-sub {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  line-height: 1.2;
}
.kh-aia-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kh-aia-panel-clear,
.kh-aia-panel-close {
  background: rgba(255,255,255,.18);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transition: background 0.15s;
}
.kh-aia-panel-clear:hover,
.kh-aia-panel-close:hover { background: rgba(255,255,255,.32); }

/* Panel messages */
.kh-aia-panel-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  max-height: 320px;
}

/* Panel no-key notice */
.kh-aia-panel-no-key {
  background: #fffbeb;
  border-top: 1px solid #fcd34d;
  color: #92400e;
  padding: 10px 14px;
  font-size: 13px;
  flex-shrink: 0;
}

/* Panel input row */
.kh-aia-panel-input-row {
  padding: 10px 12px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
.kh-aia-panel-input {
  flex: 1;
  resize: none;
  border-radius: 8px;
  font-size: 13px;
  min-height: 38px;
  max-height: 100px;
  padding: 8px 10px;
  line-height: 1.5;
}
.kh-aia-panel-send {
  flex-shrink: 0;
  align-self: flex-end;
  height: 38px;
  width: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .kh-aia-fab { right: 84px; width: 48px; height: 48px; bottom: 20px; }
  .kh-aia-panel { right: 8px; bottom: 80px; width: calc(100vw - 16px); max-height: 70vh; }
}

/* ── Retail Operations — Stock / Tax / Shipping / PO / Fulfilment (Phase 1) ── */

/* Stock status badges */
.kh-stock-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.kh-stock-badge--in-stock {
  background: #dcfce7;
  color: #15803d;
}
.kh-stock-badge--low-stock {
  background: #fef9c3;
  color: #854d0e;
}
.kh-stock-badge--out-of-stock {
  background: #fee2e2;
  color: #b91c1c;
}
.kh-stock-badge--unknown {
  background: #f3f4f6;
  color: #6b7280;
}

/* PO status badges */
.kh-po-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
}
.kh-po-badge--draft        { background: #f3f4f6; color: #374151; }
.kh-po-badge--sent         { background: #dbeafe; color: #1d4ed8; }
.kh-po-badge--acknowledged { background: #ede9fe; color: #6d28d9; }
.kh-po-badge--partial      { background: #fef9c3; color: #854d0e; }
.kh-po-badge--received     { background: #dcfce7; color: #15803d; }
.kh-po-badge--cancelled    { background: #fee2e2; color: #b91c1c; }

/* Fulfilment queue */
.kh-fq-order-group { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.kh-fq-order-header { background: #f9fafb; padding: 12px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kh-fq-item-row { padding: 12px 16px; border-top: 1px solid #f3f4f6; display: flex; align-items: flex-start; gap: 16px; }
.kh-fq-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: #6366f1; }

/* PO line items */
.kh-po-lines-table { border-collapse: collapse; }
.kh-po-lines-table th,
.kh-po-lines-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; }
.kh-po-lines-table thead th { background: #f8f8f8; font-weight: 600; font-size: 0.85em; }
.kh-po-line-total { font-weight: 600; }
.kh-po-summary-row td { padding: 8px 10px; border-top: 1px solid #e9e9e9; }

/* Shipping priority badge */
.kh-sr-priority-badge {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.85em;
  font-weight: 600;
}

/* Tax / shipping country group label */
.kh-tax-country-group {
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  padding: 6px 0 2px;
}

/* Notice / alert banners (used in retail ops forms) */
.kh-notice {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9em;
  margin-bottom: 12px;
}
.kh-notice--success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.kh-notice--error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.kh-notice--info    { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ─── Sentiment Report ───────────────────────────────────────────────────── */

/* Stats row */
.kh-sentiment-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.kh-sentiment-stat-box {
  flex: 1 1 120px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 110px;
}
.kh-sentiment-stat-number {
  font-size: 1.8em;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}
.kh-sentiment-stat-label {
  font-size: 0.75em;
  color: #64748b;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Filter bar */
.kh-sentiment-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.kh-sentiment-filter-select {
  min-width: 160px;
  max-width: 220px;
}
.kh-sentiment-date-input {
  min-width: 140px;
  max-width: 160px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9em;
}
.kh-sentiment-result-count {
  font-size: 0.85em;
  color: #64748b;
  margin-bottom: 10px;
}

/* Review text cell */
.kh-sentiment-review-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 340px;
  word-break: break-word;
}

/* Star display */
.kh-sentiment-stars {
  color: #f59e0b;
  font-size: 1.05em;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Platform badges */
.kh-sentiment-platform-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kh-sentiment-platform-google {
  background: #e8f0fe;
  color: #1a73e8;
}
.kh-sentiment-platform-tripadvisor {
  background: #e6f4ea;
  color: #34a853;
}

/* Add-source form */
.kh-sentiment-add-source {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.kh-sentiment-add-source h4 {
  margin: 0 0 12px;
  font-size: 0.95em;
  font-weight: 600;
  color: #374151;
}
.kh-sentiment-source-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}
.kh-sentiment-source-form .kehemi-input {
  min-width: 260px;
  flex: 1 1 260px;
}
.kh-sentiment-source-form .select2-container {
  min-width: 160px;
  max-width: 220px;
}

/* Location ID monospace display in table */
.kh-sentiment-location-id {
  font-family: monospace;
  font-size: 0.82em;
  color: #4b5563;
  word-break: break-all;
}

/* Next sync info line */
.kh-sentiment-next-sync {
  font-size: 0.82em;
  color: #9ca3af;
  margin-top: 12px;
  font-style: italic;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .kh-sentiment-stats { gap: 8px; }
  .kh-sentiment-stat-box { flex: 1 1 calc(50% - 8px); }
  .kh-sentiment-filter-select,
  .kh-sentiment-date-input { min-width: 100%; max-width: 100%; }
  .kh-sentiment-review-text { max-width: 100%; }
  .kh-sentiment-source-form { flex-direction: column; }
  .kh-sentiment-source-form .kehemi-input { min-width: 100%; }
}

/* ── You badge (internal users list) ──────────────────────────────────── */
.kh-you-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(78,115,223,0.12);
  color: #3a5bbf;
  vertical-align: middle;
  line-height: 1.6;
}

/* ── Shipments page — break out of theme content width ──── */
/* Page ID 635 has no SiteOrigin builder layout; theme constrains entry-content.
   This forces the content area to fill the full viewport width so kehemi-page-wide
   matches the campaigns list page (which uses a full-width SiteOrigin row). */
body.page-id-635 .entry-content,
body.page-id-635 #content .entry-content {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Westbound Shipment Tracking ──────────────────────────── */

/* Consignment details grid — shown in expanded detail card */
.kh-consignment-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.kh-consignment-field {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}
.kh-consignment-field:nth-last-child(-n+2) { border-bottom: none; }
.kh-consignment-label {
  font-size: 0.70rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  margin-bottom: 3px;
}
.kh-consignment-value {
  font-size: 0.88rem;
  color: #222;
  font-weight: 500;
}

/* Sync status badges */
.kh-sync-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.kh-sync-badge--ok      { background: #d4edda; color: #155724; }
.kh-sync-badge--error   { background: #f8d7da; color: #721c24; }
.kh-sync-badge--pending { background: #e9ecef; color: #6c757d; }

/* Synced-at timestamp below badge */
.kh-shipment-synced-at {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
  white-space: nowrap;
}

/* GSI reference pill */
.kh-shipment-gsi {
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Empty state */
.kh-shipment-empty {
  color: #888;
  font-size: 14px;
  margin: 0;
  padding: 8px 0;
}

/* Add shipment form area */
.kh-shipment-add-form {
  border-top: 1px solid #e8e8e8;
}
.kh-shipment-add-body {
  background: #f8f9fa;
}
.kh-shipment-add-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #333;
}
.kh-shipment-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.kh-shipment-add-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 180px;
}
.kh-shipment-add-field label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.kh-shipment-optional {
  font-weight: 400;
  color: #999;
}
.kh-shipment-add-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-bottom: 1px;
}
.kh-shipment-error {
  color: #721c24;
  font-size: 13px;
  margin: 8px 0 0;
}

/* Shipments summary panel on campaign edit page */
.kh-shipment-panel .kehemi-card-body {
  padding-top: 12px;
}

/* Detail row (map + history) */
.kh-ship-detail-row td {
  padding: 0;
  background: #f4f7fb;
}
.kh-ship-detail-cell {
  padding: 20px 24px !important;
  border-top: 2px solid #1a73e8;
}

/* ── Client view-campaign — Products panel ───────────────────────────────── */
.kh-cvc-products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.kh-cvc-product-card {
  flex: 0 0 180px;
  width: 180px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.kh-cvc-product-img-wrap {
  aspect-ratio: 1 / 1;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kh-cvc-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.15s;
}
.kh-cvc-product-img:hover { opacity: 0.85; }
.kh-cvc-ship-row,
.kh-cvc-link-row { cursor: pointer; }
.kh-cvc-product-img-placeholder {
  color: #9ca3af;
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
.kh-cvc-product-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kh-cvc-product-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}
.kh-cvc-product-sku,
.kh-cvc-product-cat {
  font-size: 11px;
  color: #6b7280;
}
.kh-cvc-product-footer {
  margin-top: auto;
  padding: 8px 12px 12px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: center;
}
.kh-cvc-products-grid .kehemi-btn-sm {
  font-size: 0.72rem;
  padding: 3px 10px;
}
@media (max-width: 600px) {
  .kh-cvc-product-card {
    flex: 0 0 calc(50% - 8px);
    width: calc(50% - 8px);
  }
}

/* Leaflet route map */
.kh-shipment-map-wrap {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.kh-shipment-map {
  height: 340px;
  width: 100%;
  background: #dce8f5;
}
.kh-shipment-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  background: #fff;
  font-size: 13px;
  border-top: 1px solid #e0e0e0;
}
.kh-map-legend-origin  { color: #c0392b; font-weight: 600; }
.kh-map-legend-arrow   { color: #888; }
.kh-map-legend-dest    { color: #1a73e8; font-weight: 600; }
.kh-map-legend-vessel  { color: #555; }
.kh-map-legend-delivery{ color: #27ae60; font-weight: 600; }

/* Custom Leaflet port markers */
.kh-map-pin {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.kh-map-pin--origin { background: #c0392b; }
.kh-map-pin--dest   { background: #1a73e8; border-radius: 50%; width: 16px; height: 16px; }

/* Tracking history table inside detail row */
.kh-shipment-history {
  margin-top: 4px;
}
.kh-shipment-history-title {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kh-shipment-events-table {
  width: 100%;
  font-size: 13px;
}
.kh-shipment-events-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #777;
  padding: 6px 10px;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
}
.kh-shipment-events-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}
.kh-ship-event--latest td {
  font-weight: 700;
  color: #1a73e8;
}

/* Customer-facing shipment tracking status card */
.kh-tracking-status {
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
}
.kh-tracking-status:last-child { border-bottom: none; }
.kh-tracking-status__label {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kh-tracking-status__vessel {
  font-weight: 400;
  color: #888;
  font-size: 12px;
}
.kh-tracking-status__body {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.kh-tracking-status__status {
  font-size: 15px;
  font-weight: 700;
  color: #1a3e6e;
}
.kh-tracking-status__date {
  font-size: 13px;
  color: #888;
}
.kh-tracking-status__eta {
  font-size: 13px;
  font-weight: 600;
  color: #27ae60;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .kh-shipment-add-row    { flex-direction: column; }
  .kh-shipment-add-field  { flex: 1 1 100%; }
  .kh-shipment-map        { height: 220px; }
  .kh-shipment-map-legend { gap: 8px; font-size: 12px; }
  .kh-ship-detail-cell    { padding: 14px 12px !important; }
}

/* ── AISStream vessel position marker ───────────────────────────────────── */
.kh-map-pin--vessel {
  width: 22px;
  height: 22px;
  background: #00897b;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  position: relative;
  cursor: pointer;
}
.kh-map-pin--vessel::after {
  content: '▲';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  color: #fff;
  line-height: 1;
}

/* ── Position age badge (used in Leaflet popup) ─────────────────────────── */
.kh-position-age {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e8f5e9;
  color: #2e7d32;
}
.kh-position-age--stale {
  background: #fff3e0;
  color: #e65100;
}
.kh-position-age--old {
  background: #ffebee;
  color: #b71c1c;
}

/* Vessel photo in shipment detail card */
.kh-vessel-photo {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 16px;
  display: block;
}

/* Voyage progress bar */
.kh-voyage-bar-wrap { margin-bottom: 20px; }
.kh-voyage-bar-title { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.kh-voyage-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #e0e0e0; }
.kh-voyage-bar__elapsed { background: #2e7d32; transition: width 0.4s; }
.kh-voyage-bar__remaining { background: #e0e0e0; }
.kh-voyage-bar__delay { background: #c62828; }
.kh-voyage-bar-labels { display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-top: 4px; }
.kh-voyage-bar-label--delay { color: #c62828; font-weight: 600; }

/* ETA delay pill (shipments list table) */
.kh-eta-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.kh-eta-pill--ok { background: #e8f5e9; color: #2e7d32; }
.kh-eta-pill--warn { background: #fff8e1; color: #f57f17; }
.kh-eta-pill--late { background: #ffebee; color: #c62828; }

/* ── Maintenance notice banner ────────────────────────────────── */
.kh-maintenance-banner { background: #fef3c7; border-top: 2px solid #f59e0b; bottom: 0; box-shadow: 0 -2px 8px rgba(0,0,0,.08); color: #92400e; font-weight: 500; left: 0; padding: 10px 16px; position: fixed; right: 0; z-index: 99999; }
.kh-maintenance-banner__inner { align-items: center; display: flex; gap: 12px; margin: 0 auto; max-width: 1400px; }
.kh-maintenance-banner__msg { flex: 1; }
.kh-maintenance-banner__close { background: transparent; border: none; color: #92400e; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.kh-maintenance-banner__close:hover { opacity: 0.7; }
.kh-maintenance-banner-shown .kehemi-page { padding-bottom: 56px; }

/* ── Maintenance notice admin toggle ─────────────────────────── */
.kh-maintenance-toggle-bar { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; margin-top: 12px; padding: 14px 16px; }
.kh-maintenance-toggle-bar__header { margin-bottom: 10px; }
.kh-maintenance-toggle-bar__title { font-weight: 600; font-size: 0.85rem; color: #374151; }
.kh-maintenance-toggle-bar__row { align-items: flex-start; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.kh-maintenance-toggle-bar__row:last-child { margin-bottom: 0; flex-direction: row; align-items: center; gap: 10px; }
.kh-maintenance-toggle-bar__check-label { align-items: center; cursor: pointer; display: flex; gap: 6px; font-size: 0.85rem; }
.kh-maintenance-toggle-bar__textarea { border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.85rem; min-height: 60px; padding: 6px 8px; resize: vertical; width: 100%; }
.kh-maintenance-toggle-bar__datetime { border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.85rem; padding: 5px 8px; }
.kh-maintenance-toggle-bar__saved { color: #065f46; display: none; font-size: 0.82rem; font-weight: 600; }
.kh-maintenance-toggle-bar__saved--visible { display: inline; }

/* ── Admin Login Page ─────────────────────────────────────────────── */
.kh-login-bg {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #0b1426 0%, #0e2044 35%, #1a1060 65%, #2d0e6e 100%);
  overflow-y: auto;
}
.kh-login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.2);
}
.kh-login-logo-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0176D3;
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 52px;
  text-align: center;
  margin: 0 auto 14px;
}
.kh-login-title {
  font-size: 26px;
  font-weight: 800;
  color: #1a1f36;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.kh-login-alert {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.kh-login-alert--error {
  background: #fff5f5;
  border: 1px solid #fca5a5;
  color: #7f1d1d;
}
.kh-login-alert--success {
  background: #f0fff4;
  border: 1px solid #86efac;
  color: #14532d;
}
.kh-login-panel-heading {
  font-weight: 700;
  font-size: 15px;
  color: #1a1f36;
  margin: 0 0 4px;
}
.kh-login-panel-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 18px;
}
.kh-login-field {
  margin-bottom: 16px;
}
.kh-login-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  margin-bottom: 6px;
}
.kh-login-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  font-size: 14px;
  color: #1a1f36;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.kh-login-input:focus {
  border-color: #0176D3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(1,118,211,0.12);
}
.kh-login-submit {
  width: 100%;
  margin-top: 4px;
  justify-content: center;
}
.kh-login-footer {
  margin-top: 16px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.kh-login-footer a {
  color: #0176D3;
  text-decoration: none;
}
.kh-login-footer a:hover {
  text-decoration: underline;
}
@media (max-width: 480px) {
  .kh-login-card { padding: 28px 20px 22px; }
}

/* ── Signup page ── */
.kh-signup-wrap {
  max-width: 520px;
  margin: 48px auto;
  padding: 0 16px;
}
.kh-signup-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.kh-signup-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}
.kh-signup-subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0 0 24px;
}
.kh-signup-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin: 24px 0 12px;
}
.kh-signup-field {
  margin-bottom: 16px;
}
.kh-signup-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}
.kh-signup-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s;
}
.kh-signup-input:focus {
  outline: none;
  border-color: #0176D3;
  box-shadow: 0 0 0 3px rgba(1, 118, 211, 0.12);
}
.kh-signup-phone-row {
  display: flex;
  gap: 8px;
}
.kh-signup-phone-row .kh-signup-dial {
  width: 90px;
  flex-shrink: 0;
}
.kh-signup-phone-row .select2-container {
  width: 90px !important;
  flex-shrink: 0;
}
.kh-signup-phone-row .kh-signup-input {
  flex: 1;
}
.kh-signup-submit {
  display: block;
  width: 100%;
  background: #0176D3;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 24px;
  transition: background 0.15s;
}
.kh-signup-submit:hover {
  background: #0165b8;
}
.kh-signup-links {
  text-align: center;
  font-size: 0.88rem;
  color: #6b7280;
  margin-top: 16px;
}
.kh-signup-links a {
  color: #0176D3;
  text-decoration: none;
}
.kh-signup-links a:hover {
  text-decoration: underline;
}
.kh-signup-notice--error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.kh-signup-notice--success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}
.kh-signup-success {
  text-align: center;
  padding: 16px 0;
}
.kh-signup-success__icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}
.kh-signup-success__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
}
.kh-signup-success__body {
  font-size: 0.95rem;
  color: #6b7280;
  margin: 0 0 20px;
}
.kh-login-links {
  text-align: center;
  font-size: 0.88rem;
  color: #6b7280;
  margin-top: 12px;
}
.kh-login-links a {
  color: #0176D3;
  text-decoration: none;
}
.kh-login-links a:hover {
  text-decoration: underline;
}
.pac-container {
  z-index: 9999 !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
@media (max-width: 480px) {
  .kh-signup-card { padding: 28px 20px; }
}

/* ── Staff Presence Panel & Chat ─────────────────────────────────────────── */

.kh-presence-panel {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 9990;
  padding: 8px 0;
}
@media (max-width: 768px) {
  .kh-presence-panel { display: none; }
}

.kh-presence-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
}

.kh-presence-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: transform 0.15s, box-shadow 0.15s;
}
.kh-presence-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.kh-presence-avatar__dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
  pointer-events: none;
}
.kh-presence-avatar__dot--client { background: #f97316; }
.kh-presence-avatar__dot--offline { background: #9ca3af; }
.kh-presence-avatar--client { cursor: default; }
.kh-presence-avatar--offline { opacity: 0.55; }
.kh-presence-avatar--offline:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.kh-action-icon--msg { color: #0891b2; }
.kh-action-icon--msg:hover { color: #0e7490; }
/* Internal users list — tight 4-slot action column */
.kh-iusers-actions { gap: 0 !important; }
.kh-iusers-actions .kh-clist-action-slot { width: 20px; height: 20px; }
.kh-iusers-actions .kh-action-icon { padding: 0 !important; width: 20px !important; height: 20px !important; }
.kh-iusers-actions .kh-action-icon svg { width: 15px !important; height: 15px !important; }
td:has(.kh-iusers-actions) { padding-left: 8px !important; padding-right: 12px !important; }
.kh-slot-form-wrap form { display: contents; }
.kh-presence-panel-divider {
  width: 28px;
  height: 1px;
  background: #d1d5db;
  margin: 2px auto;
  flex-shrink: 0;
}

.kh-presence-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #fff;
  pointer-events: none;
  z-index: 1;
}

.kh-chat-drawer {
  position: fixed;
  right: 52px;
  top: 0;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  z-index: 9989;
  display: flex;
  flex-direction: column;
  transform: translateX(360px);
  transition: transform 0.25s ease;
}
.kh-chat-drawer--open { transform: translateX(0); }
@media (max-width: 768px) {
  .kh-chat-drawer { display: none; }
}

.kh-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}
.kh-chat-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kh-chat-header__name {
  flex: 1;
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kh-chat-header__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.kh-chat-header__close:hover { color: #111827; background: #f3f4f6; }

.kh-chat-search-row {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.kh-chat-search-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.8rem;
  color: #111827;
  outline: none;
}
.kh-chat-search-input:focus { border-color: #3b82f6; }

.kh-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kh-chat-typing-indicator {
  min-height: 18px;
  padding: 0 10px 2px;
  font-size: 0.73rem;
  color: #6b7280;
  font-style: italic;
  flex-shrink: 0;
}

.kh-chat-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border-top: 2px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}
.kh-chat-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.875rem;
  resize: none;
  font-family: inherit;
  outline: none;
  line-height: 1.5;
  min-height: 70px;
  max-height: 140px;
  overflow-y: auto;
  background: #fff;
}
.kh-chat-textarea:focus { border-color: #0176D3; box-shadow: 0 0 0 2px rgba(1,118,211,0.15); }
.kh-chat-send-btn { align-self: flex-end; }

.kh-chat-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.kh-chat-msg--own { align-items: flex-end; }

.kh-chat-bubble {
  max-width: 78%;
  background: #f3f4f6;
  border-radius: 12px 12px 12px 2px;
  padding: 7px 11px;
  font-size: 0.83rem;
  color: #111827;
  position: relative;
  word-break: break-word;
}
.kh-chat-msg--own .kh-chat-bubble {
  background: #dbeafe;
  border-radius: 12px 12px 2px 12px;
}

.kh-chat-text { display: block; }

.kh-chat-meta {
  display: block;
  font-size: 0.68rem;
  color: #9ca3af;
  margin-top: 3px;
  text-align: right;
}

.kh-chat-deleted {
  color: #9ca3af;
  font-style: italic;
  font-size: 0.8rem;
}

.kh-chat-msg-actions {
  display: none;
  gap: 6px;
  margin-top: 4px;
}
.kh-chat-msg:hover .kh-chat-msg-actions { display: flex; }

.kh-chat-action-btn {
  background: none;
  border: none;
  font-size: 0.68rem;
  color: #6b7280;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
}
.kh-chat-action-btn:hover { background: #e5e7eb; color: #111827; }
.kh-chat-action-btn--danger:hover { background: #fee2e2; color: #991b1b; }

.kh-chat-edit-area {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.82rem;
  font-family: inherit;
  min-height: 80px;
  resize: vertical;
  outline: none;
}
.kh-chat-edit-area:focus { border-color: #3b82f6; }
.kh-chat-edit-row {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.kehemi-chats-cell-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.kh-theme-enterprise #kh-nav-toggle { background: transparent; }
body.kh-theme-enterprise #kh-nav-toggle:hover { background: rgba(1,118,211,0.15); color: #93c5fd; }

/* ── Air freight — freight type toggle (add shipment form) ───── */
.kh-freight-toggle { display: flex; gap: 0; border-radius: 6px; overflow: hidden; border: 1px solid #d1d5db; width: fit-content; }
.kh-freight-toggle label { padding: 5px 16px; font-size: 12px; font-weight: 600; cursor: pointer; background: #f9fafb; color: #6b7280; transition: background 0.15s, color 0.15s; }
.kh-freight-toggle input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.kh-freight-toggle input[type=radio]:checked + label { background: #0176D3; color: #fff; }
.kh-ship-type-col { width: 58px; text-align: center; }

/* ── Platform Status page ──────────────────────────────────────── */
.kh-status-banner {
  padding: 14px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 20px;
  text-align: center;
}
.kh-status-banner--ok      { background: #d1fae5; color: #065f46; }
.kh-status-banner--degraded { background: #fef3c7; color: #92400e; }
.kh-status-banner--outage  { background: #fee2e2; color: #991b1b; }

.kh-status-apps-card .kehemi-card-body { padding: 0 20px 16px; }

.kh-status-app-row {
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
}
.kh-status-app-row:last-child { border-bottom: none; }

.kh-status-app-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.kh-status-app-row__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: #1f2937;
  min-width: 180px;
}

.kh-uptime-bars {
  display: flex;
  gap: 2px;
  height: 28px;
  align-items: stretch;
}
.kh-uptime-bar {
  flex: 1;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.1s;
}
.kh-uptime-bar:hover { opacity: 0.75; }
.kh-uptime-bar--ok       { background: #22c55e; }
.kh-uptime-bar--degraded { background: #f59e0b; }
.kh-uptime-bar--outage   { background: #ef4444; }
.kh-uptime-bar--nodata   { background: #d1d5db; }

.kh-uptime-bars__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 4px;
}

.kh-uptime-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.kh-status-incident-card--active { border-left: 4px solid #ef4444; }

.kh-incident-block {
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}
.kh-incident-block:last-child { border-bottom: none; }

.kh-incident-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.kh-incident-title { font-size: 0.9rem; color: #1f2937; }
.kh-incident-time  { font-size: 0.78rem; color: #9ca3af; margin-left: auto; }

.kh-status-incident-update {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid #e5e7eb;
  margin-bottom: 6px;
}
.kh-incident-update-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
}
.kh-incident-update-time {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.72rem;
  color: #9ca3af;
  text-align: right;
}
.kh-incident-update-msg {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-size: 0.82rem;
  color: #4b5563;
}

.kh-status-no-incidents {
  color: #9ca3af;
  font-size: 0.85rem;
  padding: 8px 0;
  margin: 0;
}

@media (max-width: 600px) {
  .kh-status-app-row__name { min-width: 120px; font-size: 0.8rem; }
  .kh-uptime-bars { height: 22px; }
  .kh-incident-time { margin-left: 0; }
}
.kh-ship-no-vessel-notice { color: #6b7280; font-style: italic; font-size: 0.9em; margin: 12px 0; }

/* ── Approved Artwork panel ──────────────────────────────────────────────── */
.kh-dp-approved-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 4px 0;
}
.kh-dp-approved-item {
  display: flex;
  flex-direction: column;
  width: 220px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.kh-dp-approved-img-wrap {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  overflow: hidden;
}
.kh-dp-approved-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: opacity .15s;
}
.kh-dp-approved-img:hover { opacity: .85; }
.kh-dp-approved-meta {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kh-dp-approved-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.kh-dp-approved-desc {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kh-dp-approved-details {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 0.72rem;
  color: #374151;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}
.kh-dp-approved-label {
  font-weight: 600;
  color: #6b7280;
  margin-right: 4px;
}
@media (max-width: 600px) {
  .kh-dp-approved-item { width: 100%; flex-direction: row; }
  .kh-dp-approved-img-wrap { width: 100px; height: 100px; flex-shrink: 0; border-bottom: none; border-right: 1px solid #e5e7eb; }
}

/* ── Campaign Timeline v2 ── */
.kh-campaign-timeline { margin-bottom: 24px; width: 100%; }

/* Action banner */
.kh-timeline-action-banner { display: flex; align-items: center; gap: 12px; background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 0.84rem; font-weight: 500; color: #78350f; }
.kh-tl-banner-icon { font-size: 1.1rem; flex-shrink: 0; }
.kh-tl-banner-text { flex: 1; }
.kh-timeline-action-banner a { margin-left: auto; background: #f59e0b; color: white; padding: 5px 14px; border-radius: 6px; font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.kh-timeline-action-banner a:hover { background: #d97706; }

/* Pipeline card */
.kh-timeline-pipeline { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 24px 28px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 20px; }

/* Stages row */
.kh-timeline-stages { display: flex; align-items: flex-start; width: 100%; position: relative; }
.kh-timeline-stage { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; padding-bottom: 20px; min-width: 0; }
.kh-timeline-stage:hover .kh-timeline-node { transform: scale(1.12); }
.kh-timeline-stage:not(:last-child)::after { content: ''; position: absolute; top: 21px; left: 50%; right: -50%; height: 2px; background: #e2e8f0; z-index: 0; transition: background 0.3s; }
.kh-timeline-stage.complete:not(:last-child)::after { background: #10b981; }

/* Nodes */
.kh-timeline-node { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #e2e8f0; background: #f8fafc; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; font-size: 1rem; font-weight: 700; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.kh-timeline-stage.complete .kh-timeline-node { border-color: #10b981; background: #10b981; color: white; }
.kh-timeline-stage.active   .kh-timeline-node { border-color: #0176D3; background: #0176D3; color: white; box-shadow: 0 0 0 4px rgba(1,118,211,0.18); }
.kh-timeline-stage.overdue  .kh-timeline-node { border-color: #f59e0b; background: #fef3c7; color: #92400e; }
.kh-timeline-stage.action   .kh-timeline-node { border-color: #ef4444; background: #fee2e2; color: #991b1b; animation: kh-tl-pulse 2s infinite; }
.kh-timeline-stage.pending  .kh-timeline-node { border-color: #d1d5db; background: #f9fafb; color: #9ca3af; }
@keyframes kh-tl-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }

/* Stage labels */
.kh-timeline-label  { font-size: 0.72rem; font-weight: 600; text-align: center; margin-top: 8px; color: #374151; line-height: 1.3; word-break: break-word; }
.kh-timeline-detail { font-size: 0.66rem; color: #6b7280; text-align: center; margin-top: 3px; line-height: 1.3; word-break: break-word; }
.kh-timeline-stage.pending .kh-timeline-label  { color: #9ca3af; }
.kh-timeline-stage.active  .kh-timeline-label  { color: #0176D3; }
.kh-timeline-stage.active  .kh-timeline-detail { color: #1d4ed8; }
.kh-timeline-stage.overdue .kh-timeline-detail { color: #b45309; font-weight: 600; }

/* Expand panels */
.kh-timeline-expand { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 16px 20px; font-size: 0.82rem; display: none; animation: kh-tl-slide 0.2s ease; }
.kh-timeline-expand.open { display: block; }
@keyframes kh-tl-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.kh-expand-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.kh-expand-title  { font-size: 0.84rem; font-weight: 700; color: #0f172a; }
.kh-expand-link   { font-size: 0.76rem; font-weight: 600; color: #0176D3; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.kh-expand-link:hover { text-decoration: underline; }
.kh-expand-rows   { display: flex; flex-direction: column; gap: 6px; }
.kh-expand-row    { display: flex; gap: 12px; font-size: 0.8rem; }
.kh-expand-label  { color: #6b7280; font-weight: 500; min-width: 130px; flex-shrink: 0; }
.kh-expand-value  { color: #1e293b; font-weight: 500; }
.kh-expand-value.ok      { color: #065f46; font-weight: 600; }
.kh-expand-value.overdue { color: #b45309; font-weight: 600; }
.kh-expand-value.blue    { color: #1d4ed8; font-weight: 600; }
.kh-expand-value.muted   { color: #6b7280; }

/* Shipping voyage progress bar */
.kh-ship-journey       { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
.kh-ship-journey-label { display: flex; justify-content: space-between; font-size: 0.72rem; color: #6b7280; margin-bottom: 6px; }
.kh-ship-progress-track { background: #e2e8f0; border-radius: 4px; height: 8px; position: relative; overflow: visible; }
.kh-ship-progress-fill  { background: linear-gradient(90deg, #0176D3, #10b981); height: 100%; border-radius: 4px; width: 0; transition: width 0.6s ease; }
.kh-ship-icon  { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 1rem; left: 0; }
.kh-ship-eta   { margin-top: 8px; font-size: 0.72rem; color: #1e293b; font-weight: 600; text-align: right; }
/* Air freight variant — sky-blue to indigo gradient, taller track */
.kh-ship-journey--air .kh-ship-progress-fill { background: linear-gradient(90deg, #0ea5e9, #6366f1); }
.kh-ship-journey--air .kh-ship-progress-track { height: 6px; }
.kh-ship-journey--air .kh-ship-icon { font-size: 1.2rem; }
/* Multi-shipment divider and type header */
.kh-ship-divider     { height: 1px; background: #e2e8f0; margin: 16px 0 12px; }
.kh-ship-type-header { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin-bottom: 6px; }

@media (max-width: 640px) {
  .kh-timeline-pipeline { padding: 16px 16px 0; }
  .kh-timeline-stages { flex-direction: column; gap: 0; }
  .kh-timeline-stage { flex-direction: row; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
  .kh-timeline-stage:not(:last-child)::after { display: none; }
  .kh-timeline-label, .kh-timeline-detail { text-align: left; margin-top: 0; }
  .kh-expand-label { min-width: 100px; }
  .kh-ship-journey-label { flex-direction: column; gap: 2px; }
}

/* ── Analytics dashboard (kehemi-admin-analytics.php) ────────────── */
.kh-an-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.kh-an-stat-box { flex: 1 1 calc(33% - 8px); min-width: 160px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px 16px; }
.kh-an-stat-number { display: block; font-size: 26px; font-weight: 700; color: #0f172a; line-height: 1.1; }
.kh-an-stat-label { display: block; font-size: 12px; color: #64748b; margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
.kh-an-stat-number--money::before { content: "£"; font-size: 18px; font-weight: 600; color: #475569; margin-right: 3px; }

.kh-an-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; padding: 10px 14px; background: #f1f5f9; border-radius: 6px; }
.kh-an-filter-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kh-an-filter-label { font-size: 12px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; }
.kh-an-period-pill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #fff; color: #475569; border: 1px solid #cbd5e1; cursor: pointer; text-decoration: none; }
.kh-an-period-pill:hover { background: #e2e8f0; color: #1e293b; text-decoration: none; }
.kh-an-period-pill--active { background: #0176D3; color: #fff; border-color: #0176D3; }
.kh-an-period-pill--active:hover { background: #0057a3; color: #fff; }
.kh-an-date-input { width: 130px; }
.kh-an-custom-dates { display: none; gap: 6px; align-items: center; }
.kh-an-custom-dates--visible { display: inline-flex; }

.kh-an-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.kh-an-chart-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; }
.kh-an-chart-box--full { grid-column: 1 / -1; }
.kh-an-chart-box h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #334155; text-transform: uppercase; letter-spacing: 0.04em; }
.kh-an-chart-canvas { width: 100%; height: 260px; }

.kh-an-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.kh-an-table-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px; min-width: 0; }
.kh-an-table-box h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: #334155; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .kh-an-stat-box { flex-basis: calc(50% - 8px); }
  .kh-an-charts, .kh-an-tables { grid-template-columns: 1fr; }
  .kh-an-chart-box--full { grid-column: auto; }
}
@media (max-width: 600px) {
  .kh-an-stat-box { flex-basis: 100%; }
  .kh-an-filters { flex-direction: column; align-items: stretch; }
  .kh-an-filter-group { flex-wrap: wrap; }
}

/* ── Carbon Settings ─────────────────────────────────────────────────── */
.kh-carbon-provider-select { max-width: 360px; }
.kh-carbon-provider-fields { margin-top: 16px; padding: 14px 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; }
.kh-carbon-provider-fields--hidden { display: none; }
.kh-carbon-provider-field-row { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.kh-carbon-provider-field-row label { min-width: 150px; font-weight: 500; color: #374151; }
.kh-carbon-provider-field-row input[type="text"],
.kh-carbon-provider-field-row input[type="password"] { flex: 1; max-width: 420px; }
.kh-carbon-pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 768px) { .kh-carbon-pricing-grid { grid-template-columns: 1fr; } }
.kh-carbon-factors-table { width: 100%; }
.kh-carbon-factors-table input[type="number"] { width: 100px; text-align: right; }
.kh-carbon-factor-saved { color: #059669; font-size: 12px; margin-left: 8px; }
.kh-carbon-test-result { margin-top: 12px; }
.kh-carbon-preview-banner { padding: 10px 14px; background: #fef3c7; border-left: 4px solid #f59e0b; color: #92400e; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.kh-carbon-saved-indicator { color: #059669; font-size: 13px; margin-right: 12px; }
.kh-carbon-hidden { display: none; }
.kh-carbon-action-row { margin-top: 16px; }
/* CO₂ factor inputs on categories page */
.kh-co2-input { width: 80px; text-align: center; }
.kh-empty-state { padding: 40px; color: #999; }
/* Remove spinner arrows from all number inputs platform-wide */
.kehemi-page input[type="number"] { -moz-appearance: textfield; }
.kehemi-page input[type="number"]::-webkit-inner-spin-button,
.kehemi-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; display: none; }

/* ── Product Mockup Colour/Design Split ─────────────────────────────── */
.kh-mockup-slots-container { flex: 2; }
.kh-mockup-slots-body { padding: 16px; }
.kh-mockup-slots-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.kh-mockup-slot { flex: 0 0 160px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f9fafb; padding: 10px; }
.kh-mockup-slot-label { font-size: 12px; font-weight: 600; color: #334155; margin-bottom: 6px; padding-left: 4px; }
.kh-mockup-save-hint { font-size: 12px; color: #94a3b8; }
.kh-mockup-slot .kh-image-panel-upload { display: flex; align-items: center; gap: 6px; }

/* ── Design Proof Builder — mockup picker strip ─────────────────────── */
.kh-mockup-picker-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.kh-mockup-picker-thumb { width: 80px; height: 80px; border: 2px solid #e2e8f0; border-radius: 6px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kh-mockup-picker-thumb img { width: 100%; height: 60px; object-fit: cover; display: block; }
.kh-mockup-picker-thumb span { font-size: 10px; color: #64748b; text-align: center; padding: 2px 4px; }
.kh-mockup-picker-thumb--active { border-color: #0176D3; }
body.kh-theme-enterprise .kh-mockup-picker-thumb--active { border-color: #0176D3 !important; }