/* =========================================================
   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: 1200px !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;
}

.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.
   ========================================================= */

.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;
  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: #22c1dc;
  color: #ffffff !important;
}
.kehemi-btn.kehemi-btn-primary:hover {
  background: #1aabca;
  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;
}

/* 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: 1100px;
  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;
}

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

/* =========================================================
   INPUT UTILITIES
   ========================================================= */
.kehemi-input-uppercase {
  text-transform: uppercase;
}
.kehemi-dashboard-subtitle {
    color: #ffffff !important;
}
/* =========================================================
   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; }
.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; }
.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-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;
}

.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;
}

/* =========================================================
   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; }

/* 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;
}

/* 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-wrap: wrap; gap: 16px; }
.kehemi-pricing-templates .kehemi-tier-group { flex: 0 0 auto; }
.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 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; padding: 20px; background: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 15px; }
.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; }
.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; }
.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; }
.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: 16px;
  }
  .kh-mobile-toggle {
    display: flex !important;
  }
}

/* ── 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: 20px;
}
.kh-lightbox-overlay.is-open { display: flex; }
.kh-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kh-lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  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: 600px) {
  .kh-qa-form-grid { grid-template-columns: 1fr; }
  .kh-qa-question-row { flex-wrap: wrap; }
  .kh-qa-row-left { flex-direction: row; min-width: auto; }
  .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-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;
}

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

.kh-ib-react-btn--active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

/* ── 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;
}

/* ── 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;
}

.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;
}

/* ── 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: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ── Approval badges (Internal / Customer columns) — same pill shape ─── */
.kh-approval-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
}
.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;
}
/* 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--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: #22c1dc; border-bottom-color: #22c1dc; 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: 160px; 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: 12px 20px;
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color 0.15s;
}
.kh-da-gen-sig-btn:hover { border-color: #22c1dc; }
.kh-da-gen-sig-btn--selected { border-color: #22c1dc; background: #f0fbfe; }

.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;
}
.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;
}
.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; }
.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;
}