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

:root {
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-600: #dc2626;
  --red-700: #b91c1c;
}

/* Global Layout Adjustments */
body {
  margin: 0;
  padding: 0;
  background: var(--slate-50);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#container {
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#content {
  flex-grow: 1;
  width: 100%;
  box-sizing: border-box;
}

/* Modern Open Ticket Styles */
.ticket-modern-container {
  width: 100%;
  max-width: 100% !important;
  margin: 0 auto;
  padding: 20px 0;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

/* Reset combobox width to 100% of its container in the new 2-col layout */
.ticket-modern-container .select-modern,
.ticket-modern-container .field-input-wrapper>select {
  width: 100% !important;
  max-width: 100%;
  display: block;
}

.ticket-selection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 25px;
}

.topic-col {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#dynamic-form {
  display: contents;
  /* Allow children to be positioned in the parent grid */
}

/* Row 1, Col 2: System Info */
.system-info-section {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* Row 2, Full Width: Ticket Content */
.ticket-details-section {
  grid-column: 1 / span 2;
  margin-top: 20px;
}

/* Handle spacing for system info when in grid */
.system-info-section {
  margin-top: 0 !important;
  border-top: none !important;
  padding-top: 0 !important;
}

/* Ensure form headers in system info are also clean */
.system-info-section .form-header {
  margin-bottom: 15px !important;
}

.ticket-details-section .form-header h3 {
  color: var(--klm-text, var(--slate-800)) !important;
  border-bottom: 1px solid var(--klm-border, var(--slate-100));
  padding-bottom: 10px;
}

@media (max-width: 992px) {
  .ticket-selection-grid {
    display: block;
    /* Fallback to block layout */
  }

  .ticket-details-section {
    grid-column: auto;
  }
}

.dynamic-form-section .form-header h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--klm-text-muted, var(--slate-500)) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px !important;
}

.ticket-header-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

.plus-icon-box {
  width: 48px;
  height: 48px;
  background: var(--red-50);
  border: 1px solid var(--red-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-600);
}

.ticket-main-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.ticket-form-column {
  flex: 1;
  min-width: 300px;
}

.ticket-sidebar-column {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-info-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 25px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-500);
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
}

.form-group-modern {
  margin-bottom: 12px;
}

.form-group-modern.full-width {
  grid-column: 1 / -1;
}

.form-group-modern label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.2;
  /* Tighter line height */
  min-height: 16px;
  /* Reduced min-height */
}

.field-hint {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.field-hint p {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

.user-info-section .form-fields-grid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 20px;
  /* Slightly tighter horizontal gap for 3 columns */
}

@media (max-width: 1200px) {
  .user-info-section .form-fields-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .user-info-section .form-fields-grid {
    grid-template-columns: 1fr;
  }
}

.input-modern,
.select-modern,
.textarea-modern {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
}

.input-modern:focus,
.select-modern:focus {
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.textarea-modern {
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  line-height: 1.6;
  background: #fff;
}

.attachment-drag-box {
  border: 2px dashed var(--slate-300);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.attachment-drag-box:hover {
  border-color: var(--red-600);
  background: var(--red-50);
}

.klm-attachments-container {
  margin-top: 15px;
  background: var(--klm-card, white);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid var(--klm-border);
}

.klm-status-banner-confirmed {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 1px solid #86efac;
}

.klm-action-radios-container {
  background: var(--klm-bg, #f1f5f9);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
}

.sidebar-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.sidebar-card-header {
  padding: 15px 20px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-100);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.suggestion-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--slate-100);
  cursor: pointer;
  transition: background 0.2s;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: var(--red-50);
}

.suggestion-item h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: var(--slate-800);
}

.suggestion-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}

.status-done {
  background: #dcfce7;
  color: #166534;
}

.status-process {
  background: #dbeafe;
  color: #1e40af;
}

.status-pending {
  background: #fef9c3;
  color: #854d0e;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .ticket-sidebar-column {
    width: 100%;
  }
}

:root {
  --primary: #E3000F;
  --primary-hover: #C0000A;
  --bg-gradient: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
  --text-main: #1E293B;
  --text-muted: #64748B;
  --border-radius: 12px;
  --transition: all 0.3s ease;
}

html,
body {
  background: var(--klm-bg, #ffffff) !important;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
  color: var(--klm-text, var(--text-main)) !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#container {
  background: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#content,
.section,
.ticket-modern-container {
  background: transparent !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 20px !important;
  box-shadow: none !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100% !important;
  padding: 8px 12px;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
  font-size: 14px;
  transition: all 0.2s;
  background: #fff;
  box-sizing: border-box;
  display: block;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.field-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Fix for Phone Field to hide Extension */
.phone-field-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
  font-size: 0 !important;
  flex-wrap: wrap;
  /* Allows error to wrap to next line if needed */
}

.phone-field-wrapper input[type="tel"] {
  font-size: 14px !important;
  flex: 1;
  width: 100% !important;
}

.phone-field-wrapper input[name$="-ext"] {
  display: none !important;
}

.field-input-wrapper .error {
  width: 100%;
  flex-basis: 100%;
  /* Force error to take full width in flex container */
}

.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--glass-shadow);
  border-radius: var(--border-radius);
  padding: 30px;
}

/* Global Nav Overrides */
#header {
  background: var(--klm-card, #ffffff) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  padding: 4px 0 !important;
}

#header #logo {
  font-weight: 700;
  font-size: 24px;
  color: var(--primary);
  text-decoration: none;
}

/* Agent Panel nav only (scoped via #header sibling) */
#header~#nav {
  margin-top: 8px !important;
  display: flex;
  gap: 12px;
}

#header~#nav>li>a {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted) !important;
  border-radius: 6px;
  padding: 10px 18px !important;
  transition: var(--transition);
  line-height: 1.4;
}

#header~#nav>li>a:hover,
#header~#nav>li>a.active {
  background: rgba(79, 70, 229, 0.05) !important;
  color: var(--primary) !important;
  border: none !important;
}

/* KLM Sticky Topbar */
/* KLM Sticky Topbar - Refactored for 3-Column Layout */
.klm-topbar {
  position: sticky;
  top: 0;
  z-index: 1001;
  background: var(--klm-bg-soft, #ffffff);
  border-bottom: 2px solid #E3000F;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 60px;
  /* Reduced from 72px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

.topbar-left {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 8px 0;
  gap: 20px;

}

.topbar-logo img {
  max-height: 40px !important;
  /* Reduced for vertical density */
  width: auto;
}

.title-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.topbar-title {
  margin: 0;
  color: #E3000F !important;

  font-size: 24px;

  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}

.topbar-tagline {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-top: 2px;
  opacity: 0.9;
}

.topbar-title:hover {
  color: #FF3131 !important;

  transform: scale(1.02);
}

.topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.quick-access-buttons {
  display: flex;
  gap: 12px;
  padding-right: 20px;
  border-right: none;
}

.header-pill-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}

.header-pill-btn.primary {
  background: #fef2f2;
  color: #E3000F;
}

.header-pill-btn.primary:hover {
  background: #E3000F;
  color: #ffffff;
}

.header-pill-btn.secondary {
  background: var(--klm-bg, #f1f5f9);
  color: var(--klm-text, #0f172a);
}

.header-pill-btn.secondary:hover {
  background: #0f172a;
  color: #ffffff;
}

/* Language Pill Selector */
.lang-pill-wrapper {
  background: #f1f5f9;
  border-radius: 50px;
  padding: 3px;
  display: flex;
  gap: 2px;
  border: 1px solid #e2e8f0;
}

.lang-pill-item {
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #64748b;
  transition: var(--transition);
}

.lang-pill-item.active {
  background: #0f172a;
  color: #ffffff;
}

/* Navbar Icons */
.nav-icon-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid #e2e8f0;
}

.nav-icon-item {
  position: relative;
  color: #64748b;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: var(--transition);
  text-decoration: none;
}

.nav-icon-item:hover {
  background: #f1f5f9;
  color: var(--primary);
}

.nav-icon-item.highlight {
  color: #E3000F;
}

.nav-icon-item.highlight:hover {
  background: #fef2f2;
}

.nav-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

/* User Profile Dropdown */
.user-dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 50px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}

.user-trigger:hover {
  background: rgba(15, 23, 42, 0.05);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-trigger .chevron {
  color: #64748b;
  width: 14px;
  height: 14px;
}

.user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 240px;
  background: var(--klm-card, #ffffff);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  overflow: hidden;
}

.user-dropdown-wrapper:hover .user-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: 16px;
  background: var(--klm-bg, #f8fafc);
  border-bottom: 1px solid var(--klm-border, #e2e8f0);
}

.dropdown-header .user-name {
  display: block;
  font-weight: 700;
  color: #0f172a;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 180px;
  /* Ensure space for text */
}

.dropdown-header .user-email {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #475569 !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.dropdown-item svg {
  color: #64748b;
  width: 18px;
  height: 18px;
}

.dropdown-item.logout {
  color: #ef4444;
}

.dropdown-item.logout svg {
  color: #ef4444;
}

.dropdown-item.logout:hover {
  background: #fef2f2;
}

.dropdown-item.admin {
  color: #8b5cf6;
}

.dropdown-item.admin svg {
  color: #8b5cf6;
}

.dropdown-item.admin:hover {
  background: #f5f3ff;
}

.dropdown-section-title {
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dropdown-item.active {
  color: var(--primary);
  background: #fef2f2;
  font-weight: 600;
}

.lang-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
}

.lang-dot.active {
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(227, 0, 15, 0.1);
}

/* 100% Fluid Layout & Flat Sections */
.section {
  width: 100%;
  padding: 0 5% 40px;
  /* Reduced top padding to 0 */
  box-sizing: border-box;
}

.section.center {
  text-align: center;
}

.hero-section {
  background: transparent;
  padding: 40px 5% 0;
  /* Removed bottom padding */
  text-align: center;
  position: relative;
}

/* Removed hero-section::before line */

/* Ensure typography is consistent even if Admin Panel uses raw tags */
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content h4,
.hero-content h5,
.hero-content h6 {
  color: var(--klm-text, #0f172a);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
  /* Reduced from 16px */
}

.hero-content h2 {
  font-size: 26px;
  letter-spacing: 0.3px;
}

.hero-content h3 {
  font-size: 18px;
}

/* Single definition for hero content typography */
.hero-content p {
  color: var(--klm-text-muted, #ffffff) !important;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 8px;
  /* Further reduced from 10px */
}

/* Action Grid - Flat Style */
.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  max-width: 100% !important;
  margin: 0 auto;
  padding: 20px 0;
  /* Đã có padding 10px từ container cha */
  text-align: left;
}

@media (min-width: 768px) {
  .action-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.flat-card {
  background: rgb(255, 255, 255);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Modern Form Grid & Fields */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid.single-col {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 600;
  color: #334155;
  font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group .error {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

.form-section-title {
  grid-column: 1 / -1;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  margin: 25px 0 10px 0;
}

.profile-avatar-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid #e2e8f0;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flat-card {
  padding: 16px 20px;
  /* Tighter padding to reduce overall height */
  border-radius: 16px;
  background: var(--klm-card, #ffffff);
  border: 1px solid var(--klm-border, #e2e8f0);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  /* Equal height restoration */
}

.flat-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
  border-color: #cbd5e1;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.flat-card .icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--klm-bg, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}

.flat-card.create .icon-wrapper {
  background: #fef2f2 !important;
  color: #E3000F !important;
}

.flat-card.create:hover .icon-wrapper {
  background: #f0fdf4 !important;
  /* Xanh lá cây nhạt */
  color: #16a34a !important;
  /* Xanh lá cây đậm */
}

.flat-card.track .icon-wrapper {
  background: #f0f9ff !important;
  color: #0f172a !important;
}

.flat-card.track:hover .icon-wrapper {
  background: #e0f2fe !important;
  /* Xanh da trời rất nhạt */
  color: #0ea5e9 !important;
  /* Xanh da trời tươi sáng */
}

.flat-card:hover .icon-wrapper {
  transform: scale(1.15) rotate(5deg);
  /* Thêm hiệu ứng xoay nhẹ cho đẹp mắt */
}

.card-header h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--klm-text, #0f172a);
  line-height: 1.2;
}

.flat-card .card-desc {
  font-size: 13.5px;
  /* Slightly smaller to save vertical space */
  line-height: 1.5;
  color: var(--klm-text-muted, #64748b);
  margin-bottom: 12px;
  flex-grow: 1;
  /* Aligns buttons at the bottom across cards */
}

.flat-card .card-desc p:empty {
  display: none !important;
}

.flat-card .card-desc p {
  margin-bottom: 4px;
  line-height: 1.5;
}

.flat-card .card-desc p:last-child {
  margin-bottom: 0 !important;
}

.flat-card .card-desc h1,
.flat-card .card-desc h2,
.flat-card .card-desc h3,
.flat-card .card-desc h4 {
  color: var(--klm-text, #334155);
  font-weight: 600;
  margin: 12px 0 8px;
  font-size: 15px;
}

.flat-card .card-desc strong,
.flat-card .card-desc b {
  color: var(--klm-text-muted, #475569) !important;
  font-weight: 600;
}

.flat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  /* Adjusted padding */
  border-radius: 50px;
  /* Pill style */
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: var(--transition);
  width: auto;
  /* Fit content */
  min-width: 200px;
  /* Consistent size */
  align-self: center;
  /* Center horizontally */
}

.flat-btn.primary {
  background: #E3000F;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(227, 0, 15, 0.25);
}

.flat-btn.primary:hover {
  background: #C0000A;
  box-shadow: 0 6px 16px rgba(227, 0, 15, 0.35);
}

.flat-btn.secondary {
  background: #1e293b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.flat-btn.secondary:hover {
  background: #334155;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3);
}

/* Removed duplicate system note style */

/* Đã hiển thị lại #nav */

.klm-header {
  box-shadow: none;
  background: none;
}



/* Mobile Optimization for Topbar - Refactored to Mobile App Style */
@media (max-width: 768px) {
  body {
    padding-bottom: 80px !important;
    /* Space for fixed bottom buttons */
  }

  .klm-topbar {
    flex-direction: row !important;
    height: 60px !important;
    padding: 0 15px !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .topbar-left {
    width: auto !important;
    flex: 1 !important;
    justify-content: flex-start !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    gap: 10px !important;
    min-width: 0;
    /* Allow title to truncate if needed */
  }

  .topbar-right {
    width: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .topbar-logo img {
    max-height: 32px !important;
  }

  .topbar-title {
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-tagline {
    display: none !important;
    /* Hide tagline on mobile header to save space */
  }

  .title-group {
    align-items: flex-start !important;
  }

  /* Fixed Bottom Navigation Style */
  .quick-access-buttons {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 70px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 2px solid #E3000F !important;
    border-right: none !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 10px !important;
    z-index: 2000 !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08) !important;
  }

  .header-pill-btn {
    flex: 1 !important;
    height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
  }

  .header-pill-btn svg {
    width: 18px !important;
    height: 18px !important;
    margin-right: 6px !important;
  }

  .nav-icon-group {
    border-left: none !important;
    padding-left: 0 !important;
    gap: 8px !important;
  }

  .nav-icon-item {
    width: 32px !important;
    height: 32px !important;
  }

  .user-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .lang-pill-wrapper {
    display: none !important;
    /* Hide lang toggle in header on mobile */
  }
}


table.list tbody tr {
  background: var(--klm-card, white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: var(--transition);
}

table.list tbody tr:nth-child(odd),
#ticketTable tbody tr:nth-child(odd) {
  background: #f8fafc;
}

table.list tbody tr:nth-child(even),
#ticketTable tbody tr:nth-child(even) {
  background: #ffffff;
}

table.list tbody tr:hover,
#ticketTable tbody tr:hover {
  background: rgba(14, 165, 233, 0.08) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

table.list tbody tr:hover td,
table.list tbody tr:hover td a,
table.list tbody tr:hover td .desc-snippet,
table.list tbody tr:hover td .ticket-num,
#ticketTable tbody tr:hover td,
#ticketTable tbody tr:hover td a,
#ticketTable tbody tr:hover td .desc-snippet,
#ticketTable tbody tr:hover td .ticket-num {
  color: #0ea5e9 !important;
}

table.list tbody td {
  padding: 22px 16px !important;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  color: var(--text-main);
  vertical-align: middle;
  line-height: 1.6;
}

table.list tbody td:first-child {
  border-left: 1px solid #f1f5f9;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

table.list tbody td:last-child {
  border-right: 1px solid #f1f5f9;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Status Badges */
.badge-open {
  background: #ECFDF5;
  color: #059669;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
}

.badge-closed {
  background: #F1F5F9;
  color: #64748B;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
}

/* Legacy login styles removed to allow modern split-grid layout */

/* Multi-Language Colors */
.lang-vi {
  color: #1e293b !important;
}

.lang-en {
  color: #16a34a;
}

.lang-zh {
  color: #2563eb;
}



/* Action Cards Layout - Adjusted for Unified Body */
.klm-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  width: 100%;
  margin: 0 auto 40px auto;
}

@media (min-width: 768px) {
  .klm-action-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.klm-action-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  border: 1px solid #f1f5f9;
  overflow: hidden;
  transition: var(--transition);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.klm-action-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.action-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  background: #f8fafc;
  color: #0f172a;
  transition: var(--transition);
}

.klm-action-card.green:hover .action-card-icon {
  background: #16a34a;
  color: white;
}

.klm-action-card.blue:hover .action-card-icon {
  background: #2563eb;
  color: white;
}

.action-card-title {
  margin-bottom: 20px;
}

.action-card-title h3 {
  margin: 0 0 5px 0;
  line-height: 1.3;
}

.action-card-desc {
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  flex-grow: 1;
}

.action-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition);
  text-decoration: none;
  box-sizing: border-box;
}

.action-card-btn.green {
  background: #16a34a;
  color: white !important;
  box-shadow: 0 10px 15px -3px rgba(22, 163, 74, 0.2);
}

.action-card-btn.green:hover {
  background: #15803d;
}

.action-card-btn.blue {
  background: #2563eb;
  color: white !important;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2);
}

.action-card-btn.blue:hover {
  background: #1d4ed8;
}

.klm-system-note {
  background: var(--klm-card, #ffffff);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 12px;
  padding: 25px;
  margin: 40px auto;
  max-width: 1100px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.system-note-icon {
  padding: 10px;
  background: var(--klm-bg, #f1f5f9);
  border-radius: 10px;
  color: var(--klm-text-muted, #475569) !important;
}

.system-note-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (min-width: 768px) {
  .system-note-content {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .system-note-content p {
    border-left: 1px solid #f1f5f9;
    padding-left: 15px;
  }

  .system-note-content p:first-child {
    border-left: none;
    padding-left: 0;
  }
}

.system-note-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Backwards Compatibility for Hero (Keep if needed elsewhere) */
.klm-hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  margin: 20px auto 40px;
  border: none;
}

.klm-hero-content {
  max-width: 900px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-main);
  margin-bottom: 40px;
}

.klm-hero-content h1,
.klm-hero-content h2 {
  color: var(--text-main);
  font-weight: 800;
  margin-bottom: 10px;
}

.klm-hero-content p {
  margin-bottom: 15px;
}

.klm-hero-buttons {
  display: none;
  /* Hide old buttons */
}

.klm-hero-buttons .button.large {
  padding: 15px 35px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ticket Details View */
.ticket-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #E2E8F0;
}

.ticket-view-header h1 {
  margin: 0;
  font-size: 24px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 15px;
}

.ticket-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 30px;
}

.info-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
  border: 1px solid #E2E8F0;
}

.info-card h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: var(--primary);
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
}

.info-card table {
  width: 100%;
}

.info-card table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  padding: 10px 15px 10px 0;
  vertical-align: top;
  width: 140px;
}

.info-card table td {
  padding: 10px 0;
  vertical-align: top;
  font-weight: 600;
  line-height: 1.6;
}

.reply-box {
  background: #f5faff !important;
  padding: 35px;
  border-radius: var(--border-radius);
  border: 1px solid #e2e8f0;
  margin-top: 30px;
}

/* -----------------------------
   RESPONSIVE (SMARTPHONES) 
------------------------------- */
@media (max-width: 768px) {

  /* Layout constraints */
  #content {
    margin: 20px auto;
    padding: 0 15px;
  }

  /* Logins & Forms */
  .login-wrapper {
    flex-direction: column;
  }

  .login-left,
  .login-right {
    width: 100%;
    padding: 30px 20px;
  }

  .topbar-actions {
    margin-top: 15px;
    flex-direction: column;
    gap: 15px;
  }

  /* Ticket Grids */
  .ticket-info-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .ticket-view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  /* Tables to Scroll horizontally */
  div.glass-panel {
    padding: 20px 15px;
  }

  table.list,
  table.ticket_info {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .klm-hero-section {
    padding: 40px 15px;
  }

  .klm-hero-content h1 {
    font-size: 24px;
  }
}

/* System Note Redesign - Final Source of Truth */
.klm-system-note {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--klm-card, #f8fafc);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--klm-border, #e2e8f0);
  margin-top: 40px;
  width: 100%;
  box-sizing: border-box;
  transition: var(--transition);
}

.klm-system-note:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
  border-color: var(--klm-border, #cbd5e1);
}

.note-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.note-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--klm-text, #0f172a);
}

.system-note-icon {
  color: var(--klm-text-muted, #64748b);
  flex-shrink: 0;
  padding: 8px;
  background: var(--klm-card, #ffffff);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.klm-system-note:hover .system-note-icon,
.note-header:hover .system-note-icon {
  background: #fef2f2;
  color: #E3000F;
  transform: scale(1.15) rotate(5deg);
}

.system-note-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  width: 100%;
}

@media (min-width: 1200px) {
  .system-note-grid {
    grid-template-columns: 1.5fr 1fr;
    /* Better balance for long content */
  }
}

.note-col-left {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.system-note-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.system-note-content p:empty,
.registration-block p:empty {
  display: none !important;
}

.system-note-content p,
.registration-block p.lang-vi,
.registration-block p.lang-en,
.registration-block p.lang-zh {
  padding-left: 14px;
  border-left: 4px solid var(--klm-border, #e2e8f0);
  margin: 0 0 5px 0 !important;
  display: block;
  font-size: 14px;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
}

.system-note-content p:last-child,
.registration-block p:nth-last-child(2) {
  margin-bottom: 0 !important;
}

/* Right Column: Registration Block */
.registration-block {
  background: var(--klm-card, #ffffff);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--klm-border, #e2e8f0);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-sizing: border-box;
}

.reg-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* Prevent overflow by wrapping buttons */
  gap: 10px;
  border-top: 1px dashed var(--klm-border, #e2e8f0);
  padding-top: 15px;
  margin-top: auto;
}

.flat-btn.pill-small {
  padding: 8px 16px;
  font-size: 11px;
  min-width: unset;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Button Variants */
.flat-btn.info {
  background: #0ea5e9;
  /* Light Blue */
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.flat-btn.info:hover {
  background: #0284c7;
  transform: translateY(-1px);
}

.flat-btn.gray {
  background: var(--klm-bg, #f1f5f9);
  color: var(--klm-text-muted, #475569) !important;
  box-shadow: none;
  border: 1px solid var(--klm-border, #e2e8f0);
}

.flat-btn.gray:hover {
  background: var(--klm-border, #e2e8f0);
  color: var(--klm-text, #0f172a) !important;
}

.flat-btn.gray:active {
  background: #0f172a !important;
  color: #ffffff !important;
  transform: scale(0.98);
}

.flat-btn.login-pill {
  background: linear-gradient(135deg, #E3000F 0%, #C0000A 100%);
  color: #ffffff !important;
  border: 1px solid rgba(227, 0, 15, 0.35);
  box-shadow: 0 8px 18px rgba(227, 0, 15, 0.28);
}

.flat-btn.login-pill:hover {
  background: linear-gradient(135deg, #ff1f2d 0%, #E3000F 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(227, 0, 15, 0.34);
}

/* Language-specific color coding */
.lang-vi {
  color: var(--klm-text, #0f172a) !important;
  border-left-color: #E3000F !important;
}

.lang-en {
  color: #22c55e !important;
  border-left-color: #22c55e !important;
  font-weight: 600;
}

.lang-zh {
  color: #60a5fa !important;
  border-left-color: #60a5fa !important;
}

/* Login Backdrop & Glassmorphism - Wide Text Split Edition */
.login-wrapper {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  align-items: start;
  /* Move content to the top */
  justify-items: center;
  gap: 0;
  padding: 50px 5% 40px;
  /* Precise 50px top spacing */
  min-height: calc(100vh - 120px);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.login-left {
  width: 100%;
  max-width: 850px;
  /* Expand to allow full lines for long text */
  background: none !important;
  padding: 40px;
  z-index: 2;
  text-align: center;
  /* Centered alignment for modern balance */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-right {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.login-right .glass-panel {
  background: rgba(255, 255, 255, 0.2) !important;
  /* Increased transparency for refined Look */
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 28px;
  padding: 45px 50px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.5);
  /* Intensified depth */
  box-sizing: border-box;
}

/* Clearer labels and inputs for ultra-transparent glass */
.glass-panel label {
  color: #0f172a !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

.glass-panel input[type='text'],
.glass-panel input[type='password'],
.glass-panel input[type='email'] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0f172a !important;
  font-weight: 600;
}

.glass-panel input:focus {
  background: #ffffff !important;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(227, 0, 15, 0.15);
}

/* High Contrast Primary Button for Glass Panel */
.glass-panel input[type='submit'].button {
  background: #0ea5e9 !important;
  /* Vibrant Sky Blue */
  color: #ffffff !important;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.glass-panel input[type='submit'].button:hover {
  background: #0284c7 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 25px rgba(14, 165, 233, 0.5);
}

.glass-panel input[type='submit'].button:active {
  transform: translateY(0) scale(0.98);
}

/* ============================================
   KLM Chat-Style Conversation Thread V3
   ============================================ */
.thread-entries {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Chat Entry Base --- */
.chat-entry {
  display: flex;
  gap: 20px;
  padding: 8px 16px;
  max-width: 45%;
  position: relative;
}

/* LEFT side (User, Collaborator) */
.chat-entry.chat-left {
  align-self: flex-start;
}

/* RIGHT side (Supporter, Agent) */
.chat-entry.chat-right {
  align-self: flex-end;
  flex-direction: row-reverse;
  margin-left: auto;
}

/* --- Avatar --- */
.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  border: 2px solid;
  margin-top: 18px;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.chat-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Avatar colors per role */
.role-author .chat-avatar {
  background: #eff6ff;
  color: #2563eb;
  border-color: #93c5fd;
}

.role-collab .chat-avatar {
  background: #f0fdfa;
  color: #0d9488;
  border-color: #5eead4;
}

.role-supporter .chat-avatar {
  background: #fffbeb;
  color: #d97706;
  border-color: #fbbf24;
}

.role-agent .chat-avatar {
  background: #f1f5f9;
  color: #475569;
  border-color: #94a3b8;
}

/* --- Content --- */
.chat-content {
  flex: 1;
  min-width: 0;
}

/* --- Meta Line --- */
.chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  padding: 0 4px;
}

.chat-right .chat-meta {
  flex-direction: row-reverse;
}

.chat-role-icon {
  font-size: 14px;
  line-height: 1;
}

.chat-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main, #233d66);
}

.chat-role-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.role-author .chat-role-tag {
  background: var(--tag-author-bg);
  color: var(--tag-author-text);
}

.role-collab .chat-role-tag {
  background: var(--tag-collab-bg);
  color: var(--tag-collab-text);
}

.role-supporter .chat-role-tag {
  background: var(--tag-supporter-bg);
  color: var(--tag-supporter-text);
}

.role-agent .chat-role-tag {
  background: var(--tag-agent-bg);
  color: var(--tag-agent-text);
}

.chat-edited {
  font-size: 12px;
  opacity: 0.6;
}

.chat-time {
  font-size: 10px;
  color: var(--klm-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.chat-right .chat-time {
  margin-left: 0;
  margin-right: auto;
}

/* --- Bubble --- */
.chat-bubble {
  border-radius: 16px;
  padding: 12px 16px;
  position: relative;
  line-height: 1.6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ============================================
   BUBBLE COLORS PER ROLE
   ============================================ */
.role-author .chat-bubble {
  background: linear-gradient(135deg, var(--bubble-author-bg1), var(--bubble-author-bg2)) !important;
  border: 1px solid var(--bubble-author-border) !important;
  border-bottom-left-radius: 4px;
}

.role-collab .chat-bubble {
  background: linear-gradient(135deg, var(--bubble-collab-bg1), var(--bubble-collab-bg2)) !important;
  border: 1px solid var(--bubble-collab-border) !important;
  border-bottom-left-radius: 4px;
}

.role-supporter .chat-bubble {
  background: linear-gradient(135deg, var(--bubble-supporter-bg1), var(--bubble-supporter-bg2)) !important;
  border: 1px solid var(--bubble-supporter-border) !important;
  border-bottom-right-radius: 4px;
}

.role-agent .chat-bubble {
  background: linear-gradient(135deg, var(--bubble-agent-bg1), var(--bubble-agent-bg2)) !important;
  border: 1px solid var(--bubble-agent-border) !important;
  border-bottom-right-radius: 4px;
}

/* --- Text Content --- */
.chat-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-main, #1e293b);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.chat-text p {
  margin: 0 0 6px;
}

.chat-text p:last-child {
  margin-bottom: 0;
}

.chat-text a {
  color: #2563eb;
  text-decoration: underline;
}

.chat-text img {
  max-width: 100%;
  border-radius: 8px;
  margin: 6px 0;
}

/* --- Image Thumbnails --- */
.chat-images {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-thumb {
  width: 72px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s;
  background: white;
}

.chat-thumb:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transform: scale(1.05);
}

.chat-thumb img {
  width: 100%;
  height: 56px;
  object-fit: cover;
  display: block;
}

.chat-thumb-name {
  display: block;
  font-size: 9px;
  color: #64748b;
  padding: 3px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* --- File Attachments --- */
.chat-files {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  text-decoration: none !important;
  transition: all 0.15s;
}

.chat-file-item:hover {
  background: white;
  border-color: #3b82f6;
  color: #2563eb;
}

.chat-file-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.chat-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-file-size {
  color: #94a3b8;
  font-size: 11px;
  flex-shrink: 0;
}

/* --- Thread Events (Timeline) --- */
.te-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  margin: 2px 0;
}

.te-event-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
}

.te-event-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid;
  font-size: 12px;
}

.te-event-badge i {
  font-size: 12px;
}

.te-event-content {
  flex-shrink: 0;
  max-width: 55%;
}

.te-event-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}

.te-event-desc b,
.te-event-desc strong {
  color: #475569;
}

.te-event-desc img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin: 0 2px;
}

/* --- Lightbox --- */
.klm-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.klm-lightbox.active {
  display: flex;
}

.klm-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.klm-lightbox-inner img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.klm-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.klm-lightbox-close:hover {
  opacity: 1;
}

.klm-lightbox-caption {
  color: #cbd5e1;
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
}

/* --- Hide Legacy Thread Elements --- */
.thread-entry:not(.chat-entry) {
  display: none !important;
}

.thread-event:not(.te-event) {
  display: none !important;
}

/* --- Responsive Chat — Tablet --- */
@media (max-width: 1024px) {
  .chat-entry {
    max-width: 65%;
  }
}

/* --- Responsive Chat — Mobile --- */
@media (max-width: 768px) {
  .chat-entry {
    max-width: 85%;
    padding: 6px 10px;
  }

  .chat-avatar {
    width: 30px;
    height: 30px;
    font-size: 10px;
    margin-top: 16px;
  }

  .chat-bubble {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .chat-text {
    font-size: 13px;
  }

  .chat-meta {
    gap: 4px;
  }

  .chat-name {
    font-size: 11px;
  }

  .chat-role-tag {
    font-size: 8px;
  }

  .chat-time {
    font-size: 9px;
  }

  .chat-thumb {
    width: 56px;
  }

  .chat-thumb img {
    height: 44px;
  }
}

/* --- Responsive Table --- */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--border-radius);
}

/* --- Modern Badges --- */
.badge-open,
.badge-closed {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-open {
  background: #dcfce7;
  color: #15803d;
}

.badge-closed {
  background: #f1f5f9;
  color: #475569 !important;
}

/* --- Ticket Info Grid --- */
.ticket-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.info-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.info-card h3 {
  margin-top: 0;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.info-card table {
  width: 100%;
}

.info-card th {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  padding-bottom: 8px;
  width: 120px;
}

.info-card td {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  padding-bottom: 8px;
}


/* --- Ticket Dashboard Stats Grid --- */
.ticket-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: #fff;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}

.stat-card.active {
  border-color: var(--primary);
  background: var(--slate-50);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-card .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.3s;
}

.stat-card:hover .icon-box {
  transform: scale(1.1);
}

.stat-card .label {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: block;
}

.stat-card .value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-card .value {
  font-size: 32px;
  font-weight: 800;
  color: #1e293b !important;
}

.stat-card .unit {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

/* --- User/Staff Hover Card --- */
.user-entity {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  text-transform: uppercase;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hover-card {
  position: absolute;
  left: 45px;
  top: 0;
  z-index: 1000;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  width: 280px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  visibility: hidden;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.2s;
  pointer-events: none;
}

.user-entity:hover .hover-card {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.hover-card .card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f5f9;
}

.hover-card .avatar-large {
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
}

.hover-card .contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #475569 !important;
  text-decoration: none;
  transition: color 0.2s;
}

.contact-link:hover {
  color: var(--primary);
}

.contact-link i {
  width: 16px;
  text-align: center;
  color: #94a3b8;
}

/* --- Table Enhancements --- */
#ticketTable {
  border-collapse: separate;
  border-spacing: 0;
}

#ticketTable thead th {
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
}

#ticketTable tbody tr {
  transition: all 0.2s;
}

#ticketTable tbody tr:hover {
  background: #f8fafc;
}

#ticketTable tbody td {
  padding: 16px 24px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.ticket-number {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #94a3b8;
  font-size: 12px;
}

.ticket-subject-cell {
  max-width: 250px;
}

.ticket-subject-cell .subject {
  font-weight: 700;
  color: #1e293b !important;
  display: block;
  margin-bottom: 4px;
  text-decoration: none;
}

.ticket-subject-cell:hover .subject {
  color: var(--primary);
}

.ticket-desc-snippet {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  max-width: 200px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.attachment-thumbs {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.thumb-item {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
}

.thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Compact Stats Grid --- */
.ticket-stats-grid.compact {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 0;
}

.ticket-stats-grid.compact .stat-card {
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  gap: 12px;
  border-radius: 12px;
  min-width: 120px;
}

.ticket-stats-grid.compact .icon-box {
  width: 32px;
  height: 32px;
  margin-bottom: 0;
  border-radius: 8px;
  font-size: 14px;
}

.ticket-stats-grid.compact .stat-info {
  display: flex;
  flex-direction: column;
}

.ticket-stats-grid.compact .label {
  margin-bottom: 0;
  font-size: 10px;
}

.ticket-stats-grid.compact .value {
  font-size: 18px;
}

@media (max-width: 1200px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 20px;
  }
}

/* Profile Page Modern Layout */
.profile-page-wrapper {
  padding: 20px 0;
}

.profile-page-header {
  margin-bottom: 30px;
}

.profile-page-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0 0 4px 0;
}

.profile-page-header p {
  font-size: 14px;
  color: var(--slate-500);
  margin: 0;
}

.profile-layout-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 30px;
  align-items: start;
}

.profile-sidebar {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.avatar-card {
  text-align: center;
  padding: 30px 20px;
}

.avatar-wrapper-profile {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
}

.avatar-profile-large {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background: var(--slate-50);
}

.avatar-edit-trigger {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: var(--red-600);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.avatar-edit-trigger:hover {
  transform: scale(1.1);
  background: var(--red-700);
}

.sidebar-user-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0 0 2px 0;
}

.sidebar-user-email {
  font-size: 13px;
  color: var(--slate-500);
  margin: 0 0 15px 0;
}

.status-badge-blue {
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quick-info-card h3 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--slate-900);
  margin: 0 0 20px 0;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-row label {
  color: var(--slate-500);
  font-weight: 500;
}

.info-row span {
  color: var(--slate-900);
  font-weight: 700;
}

.profile-main-card {
  padding: 0 !important;
  overflow: hidden;
}

.main-card-header {
  padding: 20px 30px;
  border-bottom: 1px solid var(--slate-100);
}

.main-card-header h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--slate-900);
  margin: 0;
}

.main-card-body {
  padding: 30px;
}

.profile-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--red-600);
  margin-bottom: 25px;
  margin-top: 35px;
}

.profile-section-header:first-child {
  margin-top: 0;
}

.profile-section-header i {
  width: 18px;
}

.profile-section-header span {
  font-size: 15px;
  font-weight: 800;
}

.modern-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 25px;
}

.modern-form-grid .form-group.full-width {
  grid-column: 1 / -1;
}

.modern-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: 8px;
}

.modern-field-container {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  transition: all 0.2s;
  font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
  display: block;
  min-height: 41px;
  box-sizing: border-box;
  color: var(--slate-900);
}

.modern-field-container:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.modern-field-container input,
.modern-field-container select,
.modern-field-container textarea {
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  min-height: auto !important;
  box-shadow: none !important;
}

.modern-field-container .val,
.modern-field-container .plaintext {
  display: inline-block;
  width: 100%;
}

.card-footer-actions {
  background: var(--slate-50);
  padding: 20px 30px;
  border-top: 1px solid var(--slate-100);
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.btn-cancel-text {
  background: transparent !important;
  color: var(--slate-500) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.btn-cancel-text:hover {
  color: var(--slate-900) !important;
  transform: none !important;
}

@media (max-width: 992px) {
  .profile-layout-grid {
    grid-template-columns: 1fr;
  }
}






/* KLM Modal Styles */
.klm-modal {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  padding: 0;
  width: 90%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(0.9);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 9999;
}

.klm-modal.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.klm-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.klm-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.klm-modal-content {
  display: flex;
  flex-direction: column;
}

.klm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.klm-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--slate-900);
}

.klm-modal-body {
  padding: 24px;
  text-align: center;
}

.klm-modal-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.klm-modal-icon-wrap.alert {
  background: #fef2f2;
  color: #ef4444;
}

.klm-modal-icon-wrap.confirm {
  background: #f0f9ff;
  color: #0ea5e9;
}

.klm-modal-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-600);
  margin: 0;
}

.klm-modal-footer {
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  gap: 12px;
}

.klm-modal .button {
  min-width: 100px;
  justify-content: center;
}

.klm-modal .button.secondary {
  background: #f1f5f9;
  color: #475569 !important;
  box-shadow: none;
}

.klm-modal .button.secondary:hover {
  background: #e2e8f0;
}

.btn-change-password {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #475569 !important;
  border: 1px solid #cbd5e1;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-change-password:hover {
  background: #e2e8f0;
  color: #1e293b !important;
  border-color: #94a3b8;
}


/* Sidebar Timezone Fix */
.profile-sidebar .timezone-select-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-sidebar .timezone-select-wrapper .select2-container {
  flex-grow: 1;
  width: auto !important;
}

.profile-sidebar .timezone-select-wrapper .action-button {
  width: 52px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  color: var(--slate-700);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.profile-sidebar .timezone-select-wrapper .action-button:hover {
  background: var(--slate-100);
  border-color: var(--slate-300);
}


/* Sidebar Language Fix */
.profile-sidebar select[name="lang"] {
  width: 80%;
  display: block;
  margin: 5px auto 0;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--slate-200);
  font-size: 13px;
}

.profile-sidebar .modern-form-group>label {
  text-align: center;
  display: block;
}





/* Notification Toast */
.success-banner {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  background: #ecfdf5;
  border: 1px solid #10b981;
  color: #065f46;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInUp 0.3s ease-out;
  max-width: 350px;
}

@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* Hide default osTicket notice bars to avoid duplication */
#container>.notice_bar,
#container>.error_bar,
#container>.warning_bar {
  display: none !important;
}


/* Aggressive hide for default message bars to avoid duplication in modernized pages */
#msg_notice,
#msg_error,
#msg_warning,
.notice_bar,
.error_bar,
.warning_bar {
  display: none !important;
}


/* Error Notification Toast */
.error-banner {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #991b1b;
  padding: 16px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: slideInUp 0.3s ease-out;
  max-width: 400px;
}

.error-banner .error-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}


/* Two Column Form Layout */
.profile-two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.profile-form-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 992px) {
  .profile-two-column-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}


/* Phone Field Fix */
.phone-field-container {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 0;
  /* Hide 'Ext:' text node */
}

.phone-field-container input {
  font-size: 14px !important;
  width: auto !important;
  flex: 1;
}

/* If you want to see the extension input but hide the 'Ext:' label */
.phone-field-container input:last-child {
  flex: 0 0 60px;
  background: var(--slate-50) !important;
  border-radius: 4px !important;
  padding-left: 8px !important;
  text-align: center;
  display: none !important;
  /* Hiding extension by default as requested by user confusion */
}


/* Horizontal Form Layout - Align Labels and Inputs on same row */
.modern-form-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px;
  width: 100%;
  margin-bottom: 5px;
  /* Tighter vertical spacing */
}

.modern-form-group label {
  flex: 0 0 140px !important;
  /* Fixed width for labels to align inputs */
  margin-bottom: 0 !important;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate-600);
}

.modern-field-container {
  flex: 1;
}

.modern-field-container input,
.modern-field-container select,
.modern-field-container textarea {
  width: 100% !important;
}

/* Adjustments for textareas or large fields */
.modern-form-group.full-width {
  flex-direction: column !important;
  align-items: flex-start !important;
}

.modern-form-group.full-width label {
  flex: 0 0 auto !important;
  margin-bottom: 8px !important;
}

/* Tablet & Mobile responsive */
@media (max-width: 768px) {
  .modern-form-group {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .modern-form-group label {
    flex: 0 0 auto !important;
    margin-bottom: 4px !important;
  }
}


/* Align labels to the top for multi-line fields like textareas */
.modern-form-group {
  align-items: flex-start !important;
  /* Changed from center to flex-start */
  padding-top: 5px;
}

.modern-form-group label {
  padding-top: 10px;
  /* Align label text with input text */
}


/* Tighten spacing between rows and inside textareas */
.profile-form-column {
  gap: 10px !important;
}

.modern-form-group {
  margin-bottom: 2px !important;
}

textarea,
input[type="text"],
input[type="password"],
select {
  line-height: 1.2 !important;
}

.modern-field-container {
  padding: 8px 14px !important;
  /* Reduce internal padding of the box */
}


/* Neutral Avatar Edit Trigger */
.avatar-edit-trigger {
  background: var(--klm-bg) !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

.avatar-edit-trigger:hover {
  background: #ffffff !important;
  color: #E3000F !important;
  border-color: #E3000F !important;
  transform: scale(1.1);
}


/* Modern Select Box styling inside fields */
.modern-field-container select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 35px !important;
}

/* Fix for Select2 if osTicket uses it in the client portal */
.modern-field-container .select2-container--default .select2-selection--single {
  border: none !important;
  background: transparent !important;
  height: auto !important;
}

.modern-field-container .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  color: inherit !important;
  line-height: inherit !important;
}

.modern-field-container .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none !important;
}


/* Relaxed Select Box styling to avoid validation issues */
.modern-field-container select {
  border: none !important;
  padding: 2px 0 !important;
  min-height: 24px;
  background-color: transparent !important;
}

.modern-field-container select:focus {
  box-shadow: none !important;
}

/* =========================================================
   Matrix Theme System (Dark / Light) - Global Client Portal
   ========================================================= */
:root,
html[data-theme="light"] {
  --klm-bg: #f8fafc;
  --klm-bg-soft: #f8fafc;
  --klm-card: #ffffff;
  --klm-text: #0f172a;
  --klm-text-muted: #64748b;
  --klm-border: #e2e8f0;
  --klm-accent: #e11d48;

  /* Bubble Variables - Light Mode */
  --bubble-author-bg1: rgba(219, 234, 254, 0.7);
  /* Blue 100 */
  --bubble-author-bg2: rgba(255, 255, 255, 0.8);
  --bubble-author-border: #bfdbfe;

  --bubble-collab-bg1: rgba(204, 251, 241, 0.7);
  /* Teal 100 */
  --bubble-collab-bg2: rgba(255, 255, 255, 0.8);
  --bubble-collab-border: #99f6e4;

  --bubble-supporter-bg1: rgba(254, 243, 199, 0.7);
  /* Amber 100 */
  --bubble-supporter-bg2: rgba(255, 255, 255, 0.8);
  --bubble-supporter-border: #fde68a;

  --bubble-agent-bg1: rgba(241, 245, 249, 0.7);
  /* Slate 100 */
  --bubble-agent-bg2: rgba(255, 255, 255, 0.8);
  --bubble-agent-border: #e2e8f0;

  /* Tag Variables - Light Mode */
  --tag-author-bg: #dbeafe;
  --tag-author-text: #1d4ed8;
  --tag-collab-bg: #ccfbf1;
  --tag-collab-text: #0f766e;
  --tag-supporter-bg: #fef3c7;
  --tag-supporter-text: #b45309;
  --tag-agent-bg: #e2e8f0;
  --tag-agent-text: #334155;
}

html[data-theme="dark"] {
  --klm-bg: #020617;
  --klm-bg-soft: #020617;
  --klm-card: rgba(15, 23, 42, 0.76);
  --klm-text: #e2e8f0;
  --klm-text-muted: #94a3b8;
  --klm-border: rgba(148, 163, 184, 0.24);
  --klm-accent: #f3324f;
  /* Sync legacy variables for dark mode */
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;

  /* Bubble Variables - Dark Mode */
  --bubble-author-bg1: rgba(30, 58, 138, 0.4);
  /* Deep Blue */
  --bubble-author-bg2: rgba(15, 23, 42, 0.6);
  --bubble-author-border: rgba(59, 130, 246, 0.3);

  --bubble-collab-bg1: rgba(6, 78, 59, 0.4);
  /* Deep Teal */
  --bubble-collab-bg2: rgba(15, 23, 42, 0.6);
  --bubble-collab-border: rgba(20, 184, 166, 0.3);

  --bubble-supporter-bg1: rgba(120, 53, 15, 0.4);
  /* Deep Amber */
  --bubble-supporter-bg2: rgba(15, 23, 42, 0.6);
  --bubble-supporter-border: rgba(245, 158, 11, 0.3);

  --bubble-agent-bg1: rgba(51, 65, 85, 0.4);
  /* Deep Slate */
  --bubble-agent-bg2: rgba(15, 23, 42, 0.6);
  --bubble-agent-border: rgba(148, 163, 184, 0.3);

  /* Tag Variables - Dark Mode */
  --tag-author-bg: rgba(29, 78, 216, 0.2);
  --tag-author-text: #60a5fa;
  --tag-collab-bg: rgba(15, 118, 110, 0.2);
  --tag-collab-text: #2dd4bf;
  --tag-supporter-bg: rgba(180, 83, 9, 0.2);
  --tag-supporter-text: #fbbf24;
  --tag-agent-bg: rgba(51, 65, 85, 0.3);
  --tag-agent-text: #94a3b8;

  /* Form Overrides - Dark Mode */
  --input-bg: rgba(15, 23, 42, 0.4);
  /* Slightly more transparent */
  --input-border: rgba(148, 163, 184, 0.15);
  --input-text: #e2e8f0;
}

/* Global Form Overrides for Dark Mode */
html[data-theme="dark"] .modern-field-container {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

html[data-theme="dark"] .modern-field-container:focus-within {
  border-color: var(--klm-accent) !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.1) !important;
}

html[data-theme="dark"] .modern-field-container input,
html[data-theme="dark"] .modern-field-container select,
html[data-theme="dark"] .modern-field-container textarea {
  color: var(--input-text) !important;
  background: transparent !important;
  /* Ensure input itself doesn't have bg */
}

/* Sync disabled/readonly fields */
html[data-theme="dark"] .modern-field-container input:disabled,
html[data-theme="dark"] .modern-field-container input:read-only {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Fix Cancel Button contrast */
html[data-theme="dark"] .btn-cancel-text {
  color: var(--klm-text-muted) !important;
}

html[data-theme="dark"] .btn-cancel-text:hover {
  color: var(--klm-text) !important;
}

/* Fix for Select dropdown options in Dark Mode */
html[data-theme="dark"] select option {
  background-color: #1e293b;
  color: #e2e8f0;
}

.klm-btn-cancel-confirm {
  background: #fff;
  border: 1px solid #f87171;
  color: #dc2626;
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.klm-btn-cancel-confirm:hover {
  background: #fef2f2;
}

/* Sidebar Specific Form Overrides */
html[data-theme="dark"] .quick-info-card select,
html[data-theme="dark"] .quick-info-card input {
  background-color: rgba(15, 23, 42, 0.4) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .timezone-select-wrapper select {
  background-color: rgba(15, 23, 42, 0.4) !important;
  color: #e2e8f0 !important;
}

/* Fix for Info Row text in Dark Mode */
html[data-theme="dark"] .info-row label,
html[data-theme="dark"] .info-row span {
  background: transparent !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .info-row label {
  color: var(--klm-text-muted) !important;
}

/* Specific fix for Timezone Select2 in Sidebar */
html[data-theme="dark"] .timezone-select-wrapper .select2-container--default .select2-selection--single,
html[data-theme="dark"] .timezone-select-wrapper .select2-choice,
html[data-theme="dark"] .timezone-select-wrapper .select2-selection {
  background-color: rgba(15, 23, 42, 0.4) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}

html[data-theme="dark"] .timezone-select-wrapper .select2-selection__rendered,
html[data-theme="dark"] .timezone-select-wrapper .select2-chosen {
  color: #e2e8f0 !important;
}

#klmMatrixCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: var(--klm-bg);
  transition: background-color 0.35s ease;
}

body {
  background: var(--klm-bg);
  color: var(--klm-text);
  transition: background-color 0.35s ease, color 0.35s ease;
}

#container,
#content {
  position: relative;
  z-index: 1;
}

.klm-topbar {
  background: var(--klm-bg-soft) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--klm-border);
}

.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--klm-border);
  background: var(--klm-card);
  color: var(--klm-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

button#themeToggleBtn {
  background-color: transparent !important;
  color: #000000 !important;
  box-sizing: content-box !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
  opacity: 1 !important;
  visibility: visible !important;
  stroke: currentColor !important;
}

/* Fallback: always show at least one icon even before data-theme is resolved */
.theme-toggle-btn .icon-sun {
  display: none;
}

.theme-toggle-btn .icon-moon {
  display: block;
  color: #cbd5e1;
}

html[data-theme="dark"] .theme-toggle-btn .icon-moon {
  display: block;
  color: #cbd5e1;
}

html[data-theme="dark"] .theme-toggle-btn .icon-sun {
  display: none;
}

html[data-theme="light"] .theme-toggle-btn .icon-sun {
  display: block;
  color: #f59e0b;
}

html[data-theme="light"] .theme-toggle-btn .icon-moon {
  display: none;
}

.theme-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: var(--klm-accent);
  color: var(--klm-accent);
}

html[data-theme="dark"] #clientLogin,
html[data-theme="dark"] .login-box,
html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .reply-box,
html[data-theme="dark"] .tickets-table-card,
html[data-theme="dark"] .tickets-toolbar-card,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .klm-system-note,
html[data-theme="dark"] .flat-card,
html[data-theme="dark"] .registration-block {
  background: var(--klm-card) !important;
  border-color: var(--klm-border) !important;
  box-shadow: 0 20px 45px rgba(2, 6, 23, 0.42);
}

html[data-theme="dark"] .head-text h1,
html[data-theme="dark"] .ticket-title,
html[data-theme="dark"] .note-title,
html[data-theme="dark"] .topbar-title,
html[data-theme="dark"] .card-header h3 {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .head-text p,
html[data-theme="dark"] .topbar-tagline,
html[data-theme="dark"] .flat-card .card-desc,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .showing-info {
  color: var(--klm-text-muted) !important;
}

html[data-theme="dark"] .glass-panel label {
  color: var(--klm-text) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

html[data-theme="dark"] .glass-panel input[type='text'],
html[data-theme="dark"] .glass-panel input[type='password'],
html[data-theme="dark"] .glass-panel input[type='email'] {
  color: var(--klm-text) !important;
  text-shadow: none !important;
  background: rgba(59, 130, 246, 0.15) !important;
}

/* Register Page Dark Mode */
html[data-theme="dark"] .form-section-title {
  border-bottom-color: var(--klm-border) !important;
}

/* KB Pages Dark Mode */
html[data-theme="dark"] #kb li,
html[data-theme="dark"] .faq-content {
  color: var(--klm-text);
}

html[data-theme="dark"] .article-title {
  color: var(--klm-text) !important;
}

/* Global Text Dark Mode */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
  color: var(--klm-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] .faded {
  color: var(--klm-text-muted);
}

html[data-theme="dark"] a {
  color: var(--klm-accent);
}

html[data-theme="dark"] table th {
  color: var(--klm-text-muted);
}

html[data-theme="dark"] table td {
  color: var(--klm-text);
  border-color: var(--klm-border) !important;
  background: transparent !important;
}

/* osTicket Core Message Bars Dark Mode */
html[data-theme="dark"] #msg_error,
html[data-theme="dark"] #msg_notice,
html[data-theme="dark"] #msg_warning,
html[data-theme="dark"] #msg_info,
html[data-theme="dark"] .login-box,
html[data-theme="dark"] .instructions,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .searchbar,
html[data-theme="dark"] .content {
  background: var(--klm-card);
  border-color: var(--klm-border);
  color: var(--klm-text);
}

/* Open Ticket Page Dark Mode */
html[data-theme="dark"] .important-note-card {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme="dark"] .important-note-title {
  color: #60a5fa !important;
}

html[data-theme="dark"] .important-note-text {
  color: #93c5fd !important;
}

/* Ticket View Dark Mode */
html[data-theme="dark"] .ticket-info-grid .info-card {
  background: var(--klm-card) !important;
  border-color: var(--klm-border) !important;
}

html[data-theme="dark"] .ticket-info-grid .info-card h3 {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .ticket-info-grid .info-card th {
  color: var(--klm-text-muted) !important;
}

html[data-theme="dark"] .ticket-info-grid .info-card td {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-entries .thread-entry {
  border-color: var(--klm-border) !important;
}

html[data-theme="dark"] .reply-box {
  background: var(--klm-card) !important;
  border-color: var(--klm-border) !important;
}

/* Tickets Dashboard Supplement */
html[data-theme="dark"] .ticket-page-head {
  background: var(--klm-card);
  border-color: var(--klm-border);
}

html[data-theme="dark"] .tickets-toolbar-card {
  background: var(--klm-card);
  border-color: var(--klm-border);
}

html[data-theme="dark"] .tabs-group {
  background: var(--klm-bg) !important;
  border-color: var(--klm-border) !important;
}

html[data-theme="dark"] .tab-item {
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .tab-item:hover {
  color: var(--klm-text);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .tab-item.active {
  background: var(--klm-card);
}

html[data-theme="dark"] .tickets-table-card {
  background: var(--klm-card);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] table.list tbody tr:nth-child(odd),
html[data-theme="dark"] #ticketTable tbody tr:nth-child(odd),
html[data-theme="dark"] .klm-tickets-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}

html[data-theme="dark"] table.list tbody tr:nth-child(even),
html[data-theme="dark"] #ticketTable tbody tr:nth-child(even),
html[data-theme="dark"] .klm-tickets-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] table.list tbody tr:hover,
html[data-theme="dark"] #ticketTable tbody tr:hover,
html[data-theme="dark"] .klm-tickets-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .ticket-title {
  color: var(--klm-text);
}

html[data-theme="dark"] .desc-snippet {
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .ticket-num {
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .filter-panel {
  background: var(--klm-bg);
  border-color: var(--klm-border);
}

html[data-theme="dark"] .search-input-wrap input {
  background: var(--klm-card);
  border-color: var(--klm-border);
  color: var(--klm-text);
}

html[data-theme="dark"] .filter-item select {
  background: var(--klm-card);
  border-color: var(--klm-border);
  color: var(--klm-text);
}

html[data-theme="dark"] .filter-toggle-btn {
  background: var(--klm-card);
  border-color: var(--klm-border);
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .dept-tag {
  background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(30, 41, 59, .72));
  color: #bae6fd;
  border-color: rgba(56, 189, 248, .28);
  box-shadow: 0 4px 14px rgba(2, 132, 199, .16);
}

html[data-theme="dark"] .dept-tag i {
  color: #38bdf8;
}

html[data-theme="dark"] .tab-count {
  background: rgba(148, 163, 184, 0.2);
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .filter-chip {
  background: var(--klm-bg);
  border-color: var(--klm-border);
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .tickets-footer {
  border-color: var(--klm-border);
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .assignee-avatar {
  background: rgba(148, 163, 184, 0.15) !important;
  color: var(--klm-text-muted) !important;
}

html[data-theme="dark"] .assignee-name {
  color: var(--klm-text);
}

html[data-theme="dark"] .assignee-role {
  color: var(--klm-text-muted);
}

/* Open Ticket Page — Dark Mode Supplement */
html[data-theme="dark"] .user-info-banner {
  background: var(--klm-bg);
  border-color: var(--klm-border);
}

html[data-theme="dark"] .info-label {
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .info-value {
  color: var(--klm-text);
}

html[data-theme="dark"] .sidebar-card {
  background: var(--klm-card);
  border-color: var(--klm-border);
}

html[data-theme="dark"] .sidebar-card-header {
  background: var(--klm-bg);
  border-color: var(--klm-border);
  color: var(--klm-text);
}

html[data-theme="dark"] .suggestion-item {
  border-color: var(--klm-border);
}

html[data-theme="dark"] #smart-suggestions-container>div>div {
  background: var(--klm-bg) !important;
}

html[data-theme="dark"] .redactor-box,
html[data-theme="dark"] .redactor-editor,
html[data-theme="dark"] .redactor-toolbar,
html[data-theme="dark"] .redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
  background: var(--klm-card) !important;
  border-color: var(--klm-border) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .redactor-toolbar a {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .redactor-toolbar a:hover,
html[data-theme="dark"] .redactor-toolbar a:active,
html[data-theme="dark"] .redactor-toolbar a.redactor-act {
  background-color: var(--klm-bg) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .redactor-editor {
  background: var(--klm-bg) !important;
}

html[data-theme="dark"] .form-group-modern label {
  color: var(--klm-text);
}

html[data-theme="dark"] .input-modern,
html[data-theme="dark"] .select-modern,
html[data-theme="dark"] .textarea-modern,
html[data-theme="dark"] .field-input-wrapper>select,
html[data-theme="dark"] .field-input-wrapper>input[type="text"],
html[data-theme="dark"] .field-input-wrapper>textarea {
  background-color: var(--klm-bg) !important;
  border-color: var(--klm-border) !important;
  color: var(--klm-text) !important;
}

/* User Profile Dropdown Dark Mode */
html[data-theme="dark"] .user-dropdown-menu {
  background: #1e293b !important;
  /* Less transparent background */
  border-color: #334155 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .dropdown-header {
  background: #0f172a !important;
  /* Darker solid background for header */
  border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .dropdown-header .user-name {
  color: #38bdf8 !important;
  /* Bright light blue color */
  font-size: 16px !important;
  /* Larger text */
  font-weight: 800 !important;
}

html[data-theme="dark"] .dropdown-header .user-email {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .dropdown-item {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .dropdown-item:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .dropdown-divider {
  background: #334155 !important;
}

html[data-theme="dark"] .dropdown-section-title {
  color: #64748b !important;
}

html[data-theme="dark"] .dropdown-item.logout {
  color: #fb7185 !important;
}

html[data-theme="dark"] .dropdown-item.logout:hover {
  background: rgba(225, 29, 72, 0.1) !important;
}

/* Fix width and inline icons for dynamic form fields */
.field-input-wrapper {
  display: flex;
  align-items: flex-start;
  /* Changed from center to accommodate editor */
  flex-wrap: wrap;
  /* Allow wrapping for attachments */
  gap: 10px;
}

/* Ensure Redactor editor takes full width */
.redactor-box {
  flex: 1 0 100% !important;
  width: 100% !important;
}

/* Ensure attachments go below editor */
.filedrop {
  flex: 1 0 100%;
  margin-top: 5px;
}

.field-input-wrapper>select,
.field-input-wrapper>input[type="text"],
.field-input-wrapper>textarea {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid var(--slate-300);
  border-radius: 12px;
  font-size: 14px;
  background: var(--klm-card, #ffffff);
  color: var(--klm-text, #0f172a);
  outline: none;
  transition: all 0.2s;
}

.field-input-wrapper>select:focus,
.field-input-wrapper>input[type="text"]:focus,
.field-input-wrapper>textarea:focus {
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* =============================================
   Ticket View — Dark Mode Supplement
   Message (User issue) = blue tint
   Response (Staff)     = dark card
   ============================================= */

/* --- Message header (User báo lỗi) — xanh dương tối --- */
html[data-theme="dark"] .thread-entry.message .header {
  background: rgba(37, 99, 235, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-entry.message .header::before,
html[data-theme="dark"] .thread-entry.message .header::after {
  border-right-color: rgba(37, 99, 235, 0.25) !important;
}

/* --- Response header (Staff phản hồi) — nền card tối --- */
html[data-theme="dark"] .thread-entry.response .header {
  background: var(--klm-card) !important;
  border-color: var(--klm-border) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-entry.response .header::before,
html[data-theme="dark"] .thread-entry.response .header::after {
  border-left-color: var(--klm-card) !important;
}

/* --- Shared header text/links --- */
html[data-theme="dark"] .thread-entry .header a,
html[data-theme="dark"] .thread-entry .header span,
html[data-theme="dark"] .thread-entry .header b,
html[data-theme="dark"] .thread-entry .header time {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-entry .header .avatar,
html[data-theme="dark"] .thread-entry>.avatar {
  background: transparent !important;
}

/* --- Thread body --- */
html[data-theme="dark"] .thread-body {
  background-color: var(--klm-bg) !important;
  color: var(--klm-text) !important;
  border-color: var(--klm-border) !important;
}

html[data-theme="dark"] .thread-body a:not(.button) {
  color: #60a5fa !important;
}

html[data-theme="dark"] .thread-body h1,
html[data-theme="dark"] .thread-body h2,
html[data-theme="dark"] .thread-body h3,
html[data-theme="dark"] .thread-body h4,
html[data-theme="dark"] .thread-body h5,
html[data-theme="dark"] .thread-body h6 {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-body blockquote {
  border-left-color: var(--klm-border) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .thread-body pre {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-body table th,
html[data-theme="dark"] .thread-body table thead>tr>td,
html[data-theme="dark"] .thread-body table thead>tr>th {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--klm-text) !important;
  border-color: var(--klm-border) !important;
}

html[data-theme="dark"] .thread-body table td,
html[data-theme="dark"] .thread-body table tbody>tr>td {
  border-color: var(--klm-border) !important;
  color: var(--klm-text) !important;
}

/* --- Attachments inside thread --- */
html[data-theme="dark"] .thread-body .attachments {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-top-color: var(--klm-border) !important;
}

html[data-theme="dark"] .thread-body .attachments a {
  color: #60a5fa !important;
}

/* --- Thread pseudo-borders (::before/::after) --- */
html[data-theme="dark"] .thread-entry::after,
html[data-theme="dark"] .thread-entry::before {
  border-color: var(--klm-bg) !important;
}

html[data-theme="dark"] #ticketThread {
  border-bottom-color: var(--klm-border) !important;
}

html[data-theme="dark"] #ticketThread::before {
  border-left-color: var(--klm-border) !important;
}

/* --- Thread events (created, closed, reopened) --- */
html[data-theme="dark"] .thread-event {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-event .type-icon {
  background-color: var(--klm-card) !important;
  border-color: var(--klm-border) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .thread-event .type-icon::after {
  border-color: var(--klm-bg) !important;
}

html[data-theme="dark"] .thread-event .description {
  color: #94a3b8 !important;
}

/* --- Reply box --- */
html[data-theme="dark"] .reply-box,
html[data-theme="dark"] div.reply-box,
html[data-theme="dark"] .reply-box.glass-panel,
html[data-theme="dark"] .glass-panel.reply-box,
html[data-theme="dark"] div.glass-panel {
  background: var(--klm-card) !important;
  background-color: var(--klm-card) !important;
  border-color: var(--klm-border) !important;
  color: var(--klm-text) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .klm-attachments-container {
  background: var(--klm-bg-soft) !important;
  border-color: var(--klm-border) !important;
}

html[data-theme="dark"] .klm-status-banner-confirmed {
  background: linear-gradient(135deg, rgba(22, 101, 52, 0.2), rgba(22, 101, 52, 0.1)) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html[data-theme="dark"] .klm-action-radios-container {
  background: var(--klm-bg-soft) !important;
  border-color: var(--klm-border) !important;
}

html[data-theme="dark"] .reply-box h2,
html[data-theme="dark"] .reply-box h3,
html[data-theme="dark"] .reply-box label,
html[data-theme="dark"] .reply-box .form-header,
html[data-theme="dark"] .reply-box span {
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .reply-box p,
html[data-theme="dark"] .reply-box em,
html[data-theme="dark"] .reply-box .klm-status-banner-confirmed span,
html[data-theme="dark"] .reply-box .klm-action-radios-container span {
  color: #94a3b8 !important;
}

/* Ensure buttons in reply box also look good */
html[data-theme="dark"] .reply-box input[type="reset"],
html[data-theme="dark"] .reply-box input[type="button"].button {
  background-color: rgba(148, 163, 184, 0.1) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .klm-btn-cancel-confirm {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #f87171 !important;
}

html[data-theme="dark"] .klm-btn-cancel-confirm:hover {
  background: rgba(220, 38, 38, 0.2) !important;
}

html[data-theme="dark"] .klm-status-banner-confirmed strong {
  color: #4ade80 !important;
  /* Lighter green for dark mode */
}

html[data-theme="dark"] .klm-action-radios-container strong {
  color: var(--klm-text) !important;
}

/* --- File drop zone --- */
html[data-theme="dark"] .filedrop {
  background-color: var(--klm-bg) !important;
  border-color: var(--klm-border) !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .filedrop a {
  color: #60a5fa !important;
}

/* --- Labels (Edited badge etc.) --- */
html[data-theme="dark"] .label-bare {
  border-color: #64748b !important;
  color: #94a3b8 !important;
}


/* =============================================
   RESPONSIVE MOBILE - TICKETS PAGE
   ============================================= */

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Header 2-column layout */
  .ticket-page-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px 24px;
  }

  /* Compact table columns */
  .klm-tickets-table th,
  .klm-tickets-table td {
    padding: 12px 16px;
  }

  .col-desc {
    max-width: 150px;
  }

  .col-category {
    max-width: 120px;
  }

  /* Horizontal scroll for table */
  .table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .klm-tickets-table {
    min-width: 800px;
  }

  /* Inline search and filters */
  .tickets-topbar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
  }

  .tabs-group {
    flex: 0 0 auto;
  }

  .search-filters-group {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  .search-form {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .search-input-wrap {
    width: 200px;
  }

  .tickets-toolbar-card {
    padding: 16px 20px;
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {

  /* R1: Header Section */
  .ticket-page-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--klm-card);
    border-bottom: 1px solid var(--klm-border);
  }

  .ticket-page-head .head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 18px;
  }

  .ticket-page-head h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--klm-text);
    margin: 0;
  }

  .ticket-page-head .head-text p {
    display: none;
  }

  /* R2: Tabs Navigation */
  .tabs-group {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 4px;
    padding: 8px 12px;
    background: var(--klm-bg);
    border-radius: 12px;
    scroll-snap-type: x proximity;
  }

  .tabs-group::-webkit-scrollbar {
    display: none;
  }

  .tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    white-space: nowrap;
    border-radius: 8px;
    font-weight: 600;
    color: var(--klm-text-muted);
    text-decoration: none;
    transition: all 0.2s;
    scroll-snap-align: start;
    flex: 0 0 auto;
  }

  .tab-item.active {
    background: var(--klm-card);
    color: var(--klm-text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .tab-count {
    font-size: 10px;
    padding: 2px 6px;
    margin-left: 4px;
    background: var(--klm-bg);
    border-radius: 50px;
  }

  /* R3: Search & Filter Controls */
  .tickets-topbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .search-filters-group {
    width: 100%;
  }

  .search-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .search-input-wrap {
    width: 100%;
    position: relative;
  }

  .search-input-wrap input {
    width: 100%;
    min-height: 44px;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--klm-border);
    border-radius: 10px;
    font-size: 14px;
    background: var(--klm-card);
    color: var(--klm-text);
  }

  .search-input-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--klm-text-muted);
  }

  .search-submit-btn,
  .filter-toggle-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .filter-panel {
    display: none;
    width: 100%;
    background: var(--klm-card);
    border: 1px solid var(--klm-border);
    border-radius: 12px;
    margin-top: 12px;
    overflow: hidden;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  }

  .filter-panel.open {
    display: block;
    transform: translateY(0);
    opacity: 1;
  }

  .filter-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .filter-item {
    width: 100%;
  }

  .filter-item select {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--klm-border);
    border-radius: 10px;
    font-size: 14px;
    background: var(--klm-bg);
    color: var(--klm-text);
  }

  .filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }

  .filter-apply-btn,
  .filter-clear-btn {
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
  }

  .filter-toggle-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--klm-card);
    border: 1px solid var(--klm-border);
  }

  /* R4: Table to Card View Transformation */
  .tickets-table-card {
    padding: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .table-scroll-wrapper {
    padding: 0;
  }

  .klm-tickets-table {
    display: block;
  }

  /* Hide table header */
  .klm-tickets-table thead {
    display: none;
  }

  /* Transform tbody to card container */
  .klm-tickets-table tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Each row becomes a card */
  .klm-tickets-table tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--klm-card);
    border: 1px solid var(--klm-border);
    border-radius: 12px;
    padding: 16px;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  /* Each cell becomes a field */
  .klm-tickets-table tbody td {
    display: block;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid var(--klm-border);
  }

  .klm-tickets-table tbody td:last-child {
    border-bottom: none;
  }

  /* Data label pseudo-element */
  .klm-tickets-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--klm-text-muted);
    margin-bottom: 4px;
  }

  /* R4.3: Prominent ticket number and title */
  .col-id {
    order: 1;
    padding-bottom: 12px;
    border-bottom: none;
  }

  .col-id::before {
    display: none;
  }

  .ticket-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--klm-accent);
  }

  .col-info {
    order: 2;
    border-bottom: none;
  }

  .col-info::before {
    display: none;
  }

  .ticket-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--klm-text);
    line-height: 1.4;
    display: block;
    overflow: visible;
    text-overflow: clip;
    line-clamp: unset;
    line-clamp: unset;
    -webkit-line-clamp: unset;
  }

  /* R5: Card Content */
  .col-desc {
    order: 3;
  }

  .desc-snippet {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    color: var(--klm-text-muted);
  }

  .col-category {
    order: 4;
  }

  .category-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .category-module {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--klm-text);
  }

  .category-module svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--klm-text-muted);
  }

  .category-scope {
    font-size: 12px;
    color: var(--klm-text-muted);
    padding-left: 20px;
  }

  .col-assignee {
    order: 5;
  }

  .assignee-block {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .assignee-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }

  .assignee-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .assignee-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--klm-text);
  }

  .assignee-role {
    font-size: 11px;
    color: var(--klm-text-muted);
  }

  .col-attach {
    order: 6;
  }

  .attach-thumbs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .attach-thumb {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--klm-border);
    cursor: pointer;
    transition: transform 0.2s;
  }

  .attach-thumb:active {
    transform: scale(0.95);
  }

  .attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .attach-more {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    background: var(--klm-bg);
    border: 2px solid var(--klm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--klm-text-muted);
    cursor: pointer;
  }

  /* R4.4: Status and view link at bottom */
  .col-status {
    order: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--klm-border);
    border-bottom: none;
  }

  .col-status::before {
    display: none;
  }

  .status-pill {
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
  }

  .status-open {
    background: #dcfce7;
    color: #166534;
  }

  .status-resolved {
    background: #f1f5f9;
    color: #475569;
  }

  .ticket-view-link {
    padding: 8px 16px;
    background: var(--klm-bg);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--klm-text);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* R4.5: Card tap feedback */
  .klm-tickets-table tbody tr:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .klm-tickets-table tbody tr:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* R6: Pagination & Footer */
  .tickets-footer {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--klm-card);
    border-top: 1px solid var(--klm-border);
  }

  .showing-info {
    text-align: center;
    font-size: 13px;
    color: var(--klm-text-muted);
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .pagination a,
  .pagination span {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: var(--klm-card);
    border: 1px solid var(--klm-border);
    color: var(--klm-text);
    transition: all 0.2s;
  }

  .pagination a:hover {
    background: var(--klm-bg);
    border-color: var(--klm-accent);
  }

  .pagination .current {
    background: var(--klm-accent);
    border-color: var(--klm-accent);
    color: white;
  }

  .pagination .ellipsis {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--klm-text-muted);
    background: transparent;
    border: none;
  }

  .pagination a.prev,
  .pagination a.next {
    min-width: 60px;
    min-height: 44px;
    background: var(--klm-bg);
    font-weight: 700;
  }

  /* R9: Image Modal */
  .image-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }

  .image-modal-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 20px;
    cursor: default;
  }

  .image-modal-content img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
  }

  .image-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background 0.2s;
  }

  .image-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .image-modal-thumbs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    gap: 8px;
    background: rgba(0, 0, 0, 0.5);
  }

  .image-modal-thumbs::-webkit-scrollbar {
    display: none;
  }

  .image-modal-thumb {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s;
  }

  .image-modal-thumb.active {
    border-color: white;
    opacity: 1;
  }

  /* R10: Performance */
  .filter-panel {
    will-change: transform, opacity;
  }

  .klm-tickets-table tbody tr {
    will-change: transform;
  }

  .table-scroll-wrapper,
  .tabs-group,
  .filter-panel,
  .image-modal-thumbs {
    -webkit-overflow-scrolling: touch;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  /* R12: Accessibility */
  .tab-item:focus-visible,
  .filter-toggle-btn:focus-visible,
  .search-submit-btn:focus-visible,
  .attach-thumb:focus-visible,
  .ticket-view-link:focus-visible {
    outline: 2px solid var(--klm-accent);
    outline-offset: 2px;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Active filter chips */
  .active-filter-chips {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }

  .filter-chip {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Empty state */
  .empty-state {
    padding: 40px 20px;
    text-align: center;
  }

  .empty-icon {
    margin-bottom: 16px;
    color: var(--klm-text-muted);
  }

  .empty-state p {
    color: var(--klm-text-muted);
    font-size: 14px;
  }
}

/* Small Mobile (≤ 480px) */
@media (max-width: 480px) {
  .tab-item span:first-child {
    font-size: 13px;
  }

  .tab-count {
    position: relative;
    top: -2px;
  }

  .ticket-num {
    font-size: 16px;
  }

  .ticket-title {
    font-size: 14px;
  }

  .ticket-page-head h1 {
    font-size: 20px;
  }
}

/* Dark Mode Mobile Overrides */
@media (max-width: 768px) {
  html[data-theme="dark"] .klm-tickets-table tbody tr {
    background: var(--klm-card);
    border-color: var(--klm-border);
  }

  html[data-theme="dark"] .ticket-page-head {
    background: var(--klm-card);
    border-color: var(--klm-border);
  }

  html[data-theme="dark"] .tabs-group {
    background: rgba(15, 23, 42, 0.5);
  }

  html[data-theme="dark"] .tab-item.active {
    background: var(--klm-card);
  }

  html[data-theme="dark"] .ticket-title {
    color: var(--klm-text);
  }

  html[data-theme="dark"] .ticket-num {
    color: var(--klm-accent);
  }

  html[data-theme="dark"] .desc-snippet {
    color: var(--klm-text-muted);
  }

  html[data-theme="dark"] .klm-tickets-table td::before {
    color: var(--klm-text-muted);
  }

  html[data-theme="dark"] .klm-tickets-table tbody td {
    border-bottom-color: var(--klm-border);
  }

  html[data-theme="dark"] .col-status {
    border-top-color: var(--klm-border);
  }

  html[data-theme="dark"] .status-open {
    background: rgba(22, 101, 52, 0.3);
    color: #86efac;
  }

  html[data-theme="dark"] .status-resolved {
    background: rgba(71, 85, 105, 0.3);
    color: #cbd5e1;
  }

  html[data-theme="dark"] .ticket-view-link {
    background: rgba(15, 23, 42, 0.5);
    color: var(--klm-text);
  }

  html[data-theme="dark"] .attach-thumb,
  html[data-theme="dark"] .attach-more {
    border-color: var(--klm-border);
  }

  html[data-theme="dark"] .attach-more {
    background: rgba(15, 23, 42, 0.5);
    color: var(--klm-text-muted);
  }

  html[data-theme="dark"] .filter-panel {
    background: var(--klm-bg);
    border-color: var(--klm-border);
  }

  html[data-theme="dark"] .search-input-wrap input {
    background: var(--klm-card);
    border-color: var(--klm-border);
    color: var(--klm-text);
  }

  html[data-theme="dark"] .filter-item select {
    background: var(--klm-card);
    border-color: var(--klm-border);
    color: var(--klm-text);
  }

  html[data-theme="dark"] .filter-toggle-btn {
    background: var(--klm-card);
    border-color: var(--klm-border);
    color: var(--klm-text-muted);
  }

  html[data-theme="dark"] .tickets-footer {
    background: rgba(0, 111, 174, 0.15) !important;
    border-color: var(--klm-border);
  }

  html[data-theme="dark"] .pagination a,
  html[data-theme="dark"] .pagination span {
    background: var(--klm-card);
    border-color: var(--klm-border);
    color: var(--klm-text);
  }

  html[data-theme="dark"] .pagination a:hover {
    background: rgba(15, 23, 42, 0.5);
    border-color: var(--klm-accent);
  }

  html[data-theme="dark"] .pagination .current {
    background: var(--klm-accent);
    border-color: var(--klm-accent);
    color: white;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== INLINE FILTERS LAYOUT ===== */
/* New layout: Tabs + Inline Filters + Search */

.tickets-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--klm-card, #ffffff);
  border-radius: 12px;
  border: 1px solid var(--klm-border, #e2e8f0);
  margin-bottom: 20px;
  --klm-ticket-filter-height: 38px;
}

.tabs-filters-group {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.tabs-group {
  display: flex;
  gap: 8px;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--klm-text-muted, #64748b);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.tab-item:hover {
  background: var(--klm-bg, #f8fafc);
  color: var(--klm-text, #0f172a);
}

.tab-item.active {
  background: var(--klm-accent, #e11d48);
  color: white;
  border-color: var(--klm-accent, #e11d48);
}

.tab-count {
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

.tab-item.active .tab-count {
  background: rgba(255, 255, 255, 0.25);
}

.inline-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-select-wrap {
  position: relative;
}

.quick-filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--klm-bg, #f8fafc);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 32px 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--klm-text, #0f172a);
  min-width: 120px;
  min-height: 44px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.quick-filter-select:hover {
  border-color: var(--klm-accent, #e11d48);
  background-color: var(--klm-card, #ffffff);
}

.quick-filter-select:focus {
  outline: none;
  border-color: var(--klm-accent, #e11d48);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

.search-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrap svg {
  position: absolute;
  left: 12px;
  color: var(--klm-text-muted, #64748b);
  pointer-events: none;
}

.search-input-wrap input {
  padding: 10px 12px 10px 42px;
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  background: var(--klm-card, #ffffff);
  color: var(--klm-text, #0f172a);
  min-width: 280px;
  min-height: 44px;
  transition: all 0.2s ease;
}

.search-input-wrap input:focus {
  outline: none;
  border-color: var(--klm-accent, #e11d48);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

.search-submit-btn {
  background: var(--klm-accent, #e11d48);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.2s ease;
}

.search-submit-btn:hover {
  background: var(--klm-accent-hover, #be185d);
  transform: translateY(-1px);
}

/* Active Filter Chips */
.active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  background: var(--klm-bg, #f8fafc);
  border-radius: 8px;
  margin-bottom: 16px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--klm-card, #ffffff);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--klm-text, #0f172a);
  text-decoration: none;
}

.filter-chip.clear {
  background: var(--klm-accent, #e11d48);
  color: white;
  border-color: var(--klm-accent, #e11d48);
}

.filter-chip.clear:hover {
  background: var(--klm-accent-hover, #be185d);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .tickets-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .tabs-filters-group {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .tabs-group {
    justify-content: center;
  }

  .inline-filters-group {
    justify-content: center;
  }

  .search-group {
    justify-content: center;
  }

  .search-input-wrap input {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .tickets-topbar {
    padding: 12px 16px;
  }

  .tabs-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }

  .tabs-group::-webkit-scrollbar {
    display: none;
  }

  .tab-item {
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: auto;
    white-space: nowrap;
  }

  .inline-filters-group {
    flex-direction: column;
    gap: 8px;
  }

  .filter-select-wrap {
    width: 100%;
  }

  .quick-filter-select {
    width: 100%;
    min-width: 100%;
  }

  .search-group {
    flex-direction: column;
    gap: 8px;
  }

  .search-input-wrap {
    width: 100%;
  }

  .search-input-wrap input {
    width: 100%;
    min-width: 100%;
  }

  .search-submit-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .tab-item span:first-child {
    font-size: 13px;
  }

  .tab-count {
    font-size: 11px;
    padding: 1px 6px;
  }

  .quick-filter-select {
    font-size: 13px;
    padding: 8px 28px 8px 10px;
  }

  .search-input-wrap input {
    font-size: 13px;
    padding: 8px 10px 8px 36px;
  }

  .search-submit-btn {
    font-size: 13px;
    padding: 8px 16px;
  }
}

/* Dark Mode Support */
html[data-theme="dark"] .tickets-topbar {
  background: var(--klm-card);
  border-color: var(--klm-border);
}

html[data-theme="dark"] .tab-item {
  color: var(--klm-text-muted);
}

html[data-theme="dark"] .tab-item:hover {
  background: rgba(15, 23, 42, 0.5);
  color: var(--klm-text);
}

html[data-theme="dark"] .quick-filter-select {
  background: var(--klm-bg);
  border-color: var(--klm-border);
  color: var(--klm-text);
}

html[data-theme="dark"] .quick-filter-select:hover {
  background: var(--klm-card);
}

html[data-theme="dark"] .search-input-wrap input {
  background: var(--klm-card);
  border-color: var(--klm-border);
  color: var(--klm-text);
}

html[data-theme="dark"] .active-filter-chips {
  background: rgba(15, 23, 42, 0.3);
}

html[data-theme="dark"] .filter-chip {
  background: var(--klm-card);
  border-color: var(--klm-border);
  color: var(--klm-text);
}

/* ===== AJAX LOADING OVERLAY ===== */
.tickets-table-card {
  position: relative;
}

.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 12px;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--klm-card, #ffffff);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--klm-border, #e2e8f0);
}

.loading-spinner svg {
  color: var(--klm-accent, #e11d48);
  animation: spin 1s linear infinite;
}

.loading-spinner span {
  font-size: 14px;
  font-weight: 500;
  color: var(--klm-text, #0f172a);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Dark Mode Loading */
html[data-theme="dark"] .table-loading-overlay {
  background: rgba(15, 23, 42, 0.9);
}

html[data-theme="dark"] .loading-spinner {
  background: var(--klm-card);
  border-color: var(--klm-border);
}

html[data-theme="dark"] .loading-spinner span {
  color: var(--klm-text);
}

/* Smooth transitions for table updates */
.klm-tickets-table tbody {
  transition: opacity 0.2s ease;
}

.klm-tickets-table tbody.updating {
  opacity: 0.6;
}

/* ===== GLOBAL POPUP DISABLE ===== */
/* Disable all browser popup warnings globally */
html {
  /* Prevent browser from showing "Leave site?" popup */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: text;
  /* Allow text selection but prevent form warnings */
}

/* Smooth form transitions without popup warnings */
form {
  transition: opacity 0.2s ease;
}

form.submitting {
  opacity: 0.8;
  pointer-events: none;
}

/* Visual feedback for form submission */
.quick-filter-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Remove loading overlay styles (not needed anymore) */
.table-loading-overlay,
.loading-spinner,
.animate-spin {
  display: none !important;
}

/* Ensure smooth page transitions */
body {
  transition: opacity 0.1s ease;
}

body.page-loading {
  opacity: 0.95;
}

/* Redactor Dark Mode Toolbar Icon Visibility Fix */
html[data-theme="dark"] .redactor-toolbar {
  background: #1e293b !important;
  /* Dark background for the toolbar */
  padding: 6px 10px !important;
  border-radius: 12px 12px 0 0 !important;
  border: 1px solid #334155 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .redactor-toolbar a {
  color: #ffffff !important;
  /* Force icons/text to white */
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme="dark"] .redactor-toolbar a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1 !important;
  border-radius: 8px !important;
}

html[data-theme="dark"] .redactor-toolbar a::before,
html[data-theme="dark"] .redactor-toolbar a i {
  color: #ffffff !important;
  /* Force icons to be pure white */
  font-weight: normal !important;
}

/* Ensure the editor box itself has a clean border in dark mode */
html[data-theme="dark"] .redactor-box {
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

html[data-theme="dark"] .redactor-layer {
  background: #0f172a !important;
  /* Match the dark navy background */
  color: #f8fafc !important;
}

/* ===================================================
   Subject Autocomplete Dropdown
   =================================================== */
.subject-field-wrapper {
  position: relative;
}

.subject-autocomplete-dropdown {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 420px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
  animation: acDropIn 0.15s ease-out;
}

@keyframes acDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.subject-autocomplete-dropdown::-webkit-scrollbar {
  width: 6px;
}

.subject-autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: var(--slate-200);
  border-radius: 3px;
}

/* Section header (e.g. "📌 Cùng chủ đề") */
.ac-section-header {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Separator line */
.ac-separator {
  padding: 6px 14px;
  font-size: 10px;
  color: var(--slate-300);
  text-align: center;
  border-top: 1px solid var(--slate-100);
  margin-top: 2px;
}

/* Individual item */
.ac-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--slate-50);
  transition: background 0.12s ease;
}

.ac-item:last-child {
  border-bottom: none;
}

.ac-item:hover {
  background: var(--slate-50);
}

.ac-item.active {
  background: var(--red-50, #fef2f2);
}

.ac-item.locked {
  cursor: not-allowed;
  opacity: 0.6;
}

.ac-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--slate-800);
  line-height: 1.4;
  margin-bottom: 4px;
}

.ac-item-title mark {
  background: #fef3c7;
  border-radius: 2px;
  padding: 0 2px;
  color: inherit;
}

.ac-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* Badges */
.ac-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.badge-ticket {
  background: var(--red-50, #fef2f2);
  color: var(--red-600, #dc2626);
}

.badge-faq {
  background: #eff6ff;
  color: #2563eb;
}

.badge-status {
  background: var(--slate-100);
  color: var(--slate-600);
}

.badge-locked {
  background: none;
  color: var(--slate-400);
  font-size: 12px;
  padding: 0 4px;
}

/* Guest notice */
.ac-guest-notice {
  padding: 12px 14px;
  text-align: center;
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 600;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-100);
  border-radius: 12px 12px 0 0;
}

.ac-guest-notice i {
  margin-right: 6px;
  color: var(--slate-400);
}

/* Dark mode support */
html[data-theme="dark"] .subject-autocomplete-dropdown {
  background: var(--klm-card, #1e293b);
  border-color: var(--klm-border, #334155);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .ac-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .ac-item.active {
  background: rgba(220, 38, 38, 0.1);
}

html[data-theme="dark"] .ac-item-title {
  color: var(--klm-text, #f1f5f9);
}

html[data-theme="dark"] .ac-item-title mark {
  background: #78350f;
  color: #fef3c7;
}

html[data-theme="dark"] .ac-separator {
  border-top-color: var(--klm-border, #334155);
  color: var(--slate-500);
}

html[data-theme="dark"] .ac-guest-notice {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: var(--klm-border);
}

/* Responsive: full width on mobile */
@media (max-width: 768px) {
  .subject-autocomplete-dropdown {
    max-height: 300px;
    border-radius: 8px;
  }
}

/* STAFF PANEL QUEUE OVERRIDES */
.staff-panel.ticket-dashboard-wrapper {
  padding: 10px 0;
}

.staff-panel .klm-tickets-dashboard {
  max-width: 100%;
}

.staff-panel table.klm-tickets-table.list.queue {
  border: none !important;
  background: transparent !important;
}

.staff-panel table.klm-tickets-table.list.queue tbody tr,
.staff-panel table.klm-tickets-table.list.queue tbody tr:nth-child(odd),
.staff-panel table.klm-tickets-table.list.queue tbody tr:nth-child(even) {
  background: #fff !important;
}

.staff-panel table.klm-tickets-table.list.queue th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.staff-panel table.klm-tickets-table.list.queue td {
  padding: 16px !important;
  vertical-align: middle !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.staff-panel table.klm-tickets-table.list.queue tbody tr:hover,
.staff-panel table.klm-tickets-table.list.queue tbody tr:nth-child(odd):hover,
.staff-panel table.klm-tickets-table.list.queue tbody tr:nth-child(even):hover {
  background: #f8fafc !important;
}

/* KLM Modern UI Components for Table (Avatar & Badges) */
.requester-block,
.assignee-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.requester-avatar,
.assignee-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.requester-info,
.assignee-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.requester-name,
.assignee-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.requester-email {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
}

.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-new {
  background: #e0f2fe;
  color: #0284c7;
}

.status-closed {
  background: #f1f5f9;
  color: #64748b;
}

.status-waiting-user {
  background: #fef9c3;
  color: #ca8a04;
}

.status-waiting-support {
  background: #fce7f3;
  color: #db2777;
}

.ticket-info-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticket-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
  display: block;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow: visible !important;
  line-height: 1.4;
}

.klm-modal-overlay {
  display: none !important;
  /* Hidden by default */
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.klm-modal-overlay.active {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#klm-modal:not(.active),
.klm-modal:not(.active):not(#pwdModal) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.ticket-title:hover {
  color: #2563eb;
}

.ticket-meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.meta-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
}

.staff-panel table.klm-tickets-table.list.queue td {
  background: inherit !important;
}


/* Fix Logo Size in Admin Panel */
#header #logo img {
  max-height: 32px !important;
  width: auto !important;
  transform-origin: left center;
}

#header #logo {
  display: inline-flex;
  align-items: center;
  height: 34px;
}

/* KLM Client Portal: Topbar Center Navigation */
.topbar-center {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.topbar-nav-link {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--klm-text-muted, #94a3b8) !important;
  text-decoration: none !important;
  padding: 6px 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.topbar-nav-link:hover {
  color: var(--primary, #4f46e5) !important;
  background: var(--klm-bg, rgba(79, 70, 229, 0.08));
}

.topbar-nav-link.active {
  color: var(--primary, #4f46e5) !important;
  background: var(--klm-bg, rgba(79, 70, 229, 0.1));
  font-weight: 600;
}

.topbar-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--primary, #4f46e5);
  border-radius: 2px;
}

/* Enhanced Highlighted Open Ticket Button */
.header-pill-btn.primary {
  background: #E3000F !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(227, 0, 15, 0.2) !important;
}

.header-pill-btn.primary:hover {
  background: #c2000d !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 15px rgba(227, 0, 15, 0.3) !important;
}

/* Dark Mode Form Input Overrides */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(148, 163, 184, 0.5) !important;
}

html[data-theme="dark"] .glass-panel input:focus,
html[data-theme="dark"] .glass-panel textarea:focus,
html[data-theme="dark"] .glass-panel select:focus {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: #E3000F !important;
  color: var(--klm-text) !important;
}

html[data-theme="dark"] .input-modern::placeholder,
html[data-theme="dark"] .login-input::placeholder,
html[data-theme="dark"] input[type="text"]::placeholder,
html[data-theme="dark"] input[type="email"]::placeholder {
  color: rgba(148, 163, 184, 0.6) !important;
}

/* Ensure all form controls in dark mode use correct colors */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(15, 23, 42, 0.72) !important;
  border: 1px solid var(--klm-border) !important;
  color: var(--klm-text) !important;
  caret-color: var(--klm-text) !important;
}

/* KLM Modal System Fixes */
.klm-modal-overlay {
  display: none;
  /* Hidden by default */
  pointer-events: none;
}

.klm-modal-overlay.active {
  display: block !important;
  pointer-events: auto !important;
}

.klm-modal {
  display: none;
  /* Hidden by default */
}

.klm-modal.active {
  display: block !important;
}

/* Dark Mode Modal Styling */
html[data-theme="dark"] .klm-modal {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .klm-modal-title {
  color: #ffffff !important;
}

html[data-theme="dark"] .klm-modal-text {
  color: rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .klm-modal-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .klm-modal input {
  background-color: rgba(15, 23, 42, 0.4) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-klm-secondary {
  background: #64748b !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-klm-secondary:hover {
  background: #475569 !important;
}

.btn-klm-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-klm-danger:hover {
  background: #dc2626 !important;
}

/* Topic Slider Component */
.topic-slider-wrapper {
  margin: 40px auto;
  max-width: 1200px;
  padding: 0 20px;
}

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

.topic-slider-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 10px 5px;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.topic-slider-container::-webkit-scrollbar {
  display: none;
}

.topic-slider-container.active {
  cursor: grabbing;
  scroll-behavior: auto;
  /* Disable smooth scrolling while dragging */
}

.topic-slide-card {
  flex: 0 0 auto;
  min-width: 100px;
  max-width: 200px;
  background: var(--klm-card, #ffffff);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  user-select: none;
  -webkit-user-drag: none;
}

.topic-slide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: var(--klm-accent, #e11d48);
}

.topic-icon {
  width: 50px;
  height: 50px;
  background: rgba(225, 29, 72, 0.1);
  color: var(--klm-accent, #e11d48);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.topic-slide-card:hover .topic-icon {
  background: var(--klm-accent, #e11d48);
  color: #ffffff;
  transform: scale(1.1);
}

.topic-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--klm-text, #0f172a);
  line-height: 1.4;
  word-break: break-word;
}

html[data-theme="dark"] .topic-slide-card {
  background: rgba(15, 23, 42, 0.5);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .topic-slide-card:hover {
  background: var(--klm-card);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .topic-icon {
  background: rgba(251, 113, 133, 0.1);
}

html[data-theme="dark"] .topic-slide-card:hover .topic-icon {
  background: var(--klm-accent, #fb7185);
  color: #020617;
}

/* KLM Modal System Fixes — z-index overrides removed (already defined in scp.css) */

/* ===== SCP Form Controls Height Fix ===== */
/* Override scp.css fixed height:24px on select — increase by ~1/3 */
#container select,
.dialog select {
  height: auto !important;
  min-height: 32px !important;
  padding: 6px 28px 6px 8px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}

#container input[type="text"],
#container input[type="email"],
#container input[type="password"],
#container input[type="number"],
#container input[type="tel"],
#container input[type="url"],
#container input[type="search"],
.dialog input[type="text"],
.dialog input[type="email"],
.dialog input[type="password"] {
  /* padding: 6px 8px 10px 10px !important; */
  min-height: 32px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Select2 dropdown fix */
#container .select2-container .select2-choice,
#container .select2-container .select2-selection {
  min-height: 32px !important;
  padding: 4px 8px !important;
  line-height: 1.4 !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container .select2-choice,
html[data-theme="dark"] .select2-container .select2-selection {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container .select2-choice .select2-chosen {
  color: var(--input-text) !important;
}

html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-results {
  background-color: #1e293b !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ===== KLM Button System ===== */

/* --- Ticket header action buttons (Print / Edit) --- */
.klm-ticket-action-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
}

.klm-ticket-action-btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .klm-ticket-action-btn {
  background: rgba(37, 99, 235, 0.9) !important;
  border-color: rgba(96, 165, 250, 0.85) !important;
  color: #eff6ff !important;
  box-shadow: 0 2px 10px rgba(30, 64, 175, 0.45) !important;
}

html[data-theme="dark"] .klm-ticket-action-btn:hover {
  background: rgba(59, 130, 246, 0.95) !important;
  border-color: rgba(147, 197, 253, 0.9) !important;
  color: #ffffff !important;
}

/* --- Base: All buttons get consistent sizing & font --- */
.button,
.action-button,
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 6px;
  font-size: 0.95em;
  line-height: 1.4;
  box-sizing: border-box;
  vertical-align: middle;
}

/* --- Primary: Submit & Save buttons → Blue filled --- */
input[type="submit"],
button[type="submit"],
.primary.button {
  background: #2563eb !important;
  color: white !important;
  border: none !important;
  padding: 8px 24px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
  height: auto !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.primary.button:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

/* --- Secondary: Action buttons (Register, More, etc.) → Outlined --- */
.action-button {
  background: white !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  padding: 7px 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  height: auto !important;
}

.action-button:hover,
.action-button:active {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px);
}

.action-button i {
  margin-right: 4px;
}

/* --- Danger: Red/Delete buttons → Red filled --- */
.red.button,
a.red.button,
.action-button.red {
  background: #dc2626 !important;
  color: white !important;
  border: none !important;
  padding: 7px 18px !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}

.red.button:hover,
a.red.button:hover,
.action-button.red:hover {
  background: #b91c1c !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35) !important;
  transform: translateY(-1px);
}

/* --- Cancel/Close: input[type=button] → Gray outlined --- */
.dialog input[type="button"],
input[type="button"].close,
input[type="reset"] {
  background: white !important;
  color: #374151 !important;
  border: 1.5px solid #d1d5db !important;
  padding: 8px 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  height: auto !important;
}

/* --- Reply box specific buttons --- */
.reply-box input.button.btn-klm-secondary {
  background: #64748b !important;
  color: #ffffff !important;
  border: 1px solid #64748b !important;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.28) !important;
}

.reply-box input.button.btn-klm-secondary:hover {
  background: #475569 !important;
  border-color: #475569 !important;
}

.reply-box input.button.btn-klm-danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.reply-box input.button.btn-klm-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

html[data-theme="dark"] .reply-box input.button.btn-klm-secondary {
  background: rgba(71, 85, 105, 0.85) !important;
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.42) !important;
  box-shadow: 0 2px 10px rgba(2, 6, 23, 0.45) !important;
}

html[data-theme="dark"] .reply-box input.button.btn-klm-secondary:hover {
  background: rgba(100, 116, 139, 0.95) !important;
  border-color: rgba(148, 163, 184, 0.62) !important;
}

html[data-theme="dark"] .reply-box input.button.btn-klm-danger {
  background: rgba(220, 38, 38, 0.88) !important;
  color: #ffffff !important;
  border-color: rgba(248, 113, 113, 0.6) !important;
  box-shadow: 0 2px 10px rgba(127, 29, 29, 0.45) !important;
}

html[data-theme="dark"] .reply-box input.button.btn-klm-danger:hover {
  background: rgba(239, 68, 68, 0.95) !important;
  border-color: rgba(252, 165, 165, 0.8) !important;
}

.dialog input[type="button"]:hover,
input[type="button"].close:hover,
input[type="reset"]:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

/* --- Green button variant --- */
.green.button {
  background: #16a34a !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}

.green.button:hover {
  background: #15803d !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important;
}

/* --- Muted action-button (dropdown triggers) --- */
.action-button.muted {
  border-color: #e5e7eb !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}

/* --- Small button variant --- */
input[type=button].small,
.small.button,
input[type=submit].small {
  font-size: 0.82em;
  padding: 4px 12px !important;
}

/* --- Disabled state --- */
.button:disabled,
.action-button:disabled,
input[type=submit]:disabled,
input[type=button]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* --- Dark Mode Button Overrides --- */
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] button[type="submit"],
html[data-theme="dark"] .primary.button {
  background: #800000 !important;
  color: white !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] input[type="submit"]:hover,
html[data-theme="dark"] button[type="submit"]:hover,
html[data-theme="dark"] .primary.button:hover {
  background: #a00000 !important;
}

html[data-theme="dark"] .action-button {
  background: var(--klm-card, #1e293b) !important;
  color: var(--klm-text, #e2e8f0) !important;
  border-color: var(--klm-border, #334155) !important;
}

html[data-theme="dark"] .action-button:hover {
  background: var(--klm-hover, #334155) !important;
  border-color: var(--klm-text-muted, #94a3b8) !important;
}

html[data-theme="dark"] .dialog input[type="button"],
html[data-theme="dark"] input[type="button"].close {
  background: var(--klm-card, #1e293b) !important;
  color: var(--klm-text, #e2e8f0) !important;
  border-color: var(--klm-border, #334155) !important;
}

/* --- Attached Input/Button Fix (Search bars) --- */
.input.attached {
  height: auto !important;
  display: inline-flex !important;
  align-items: stretch !important;
  vertical-align: middle;
}

.input.attached input {
  min-height: 34px !important;
  height: auto !important;
  margin: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input.attached .button.attached {
  min-height: 34px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === TICKET QUEUE BUTTONS FIX === */
.flush-right .action-button,
#basic_search .action-button.muted {
  padding: 6px 12px !important;
  height: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flush-right .action-button>a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
}

.flush-right .action-button.red,
.flush-right .action-button.danger {
  background: var(--danger) !important;
  color: white !important;
}

/* Fix Assign & Status dropdowns inside flush-right which contain multiple icons/links */
.flush-right span.action-button {
  gap: 8px !important;
}

/* === DASHBOARD SEARCH FORM FIX === */
form[action="dashboard.php"] #basic_search>div {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

form[action="dashboard.php"] #basic_search label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
}

form[action="dashboard.php"] #basic_search button {
  margin: 0 !important;
  height: 36px !important;
  padding: 6px 16px !important;
}

form[action="dashboard.php"] #basic_search .ui-datepicker-trigger {
  top: 0 !important;
  margin-left: 0 !important;
}

/* === FIX SYSTEM LOGS (#basic_search) OVERLAP & ALIGNMENT === */
#basic_search>div[style*="height"] {
  height: auto !important;
  min-height: 25px !important;
}

form[action="logs.php"]>div {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 4px 0 !important;
}

form[action="logs.php"] select,
form[action="logs.php"] input[type="text"] {
  margin-bottom: 0 !important;
}

form[action="logs.php"] input[type="submit"] {
  margin: 0 !important;
  padding: 6px 16px !important;
  height: 36px !important;
  background: var(--primary) !important;
  color: white !important;
  border-radius: 6px !important;
  border: 1px solid var(--primary-dark) !important;
  cursor: pointer;
}

/* === FIX STAFF & ADMIN FILTER FORMS ALIGNMENT === */
#basic_search {
  display: flow-root;
  /* Modern clearfix to prevent float collapse */
}

#basic_search form[name="filter"] {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}

#basic_search form[name="filter"] select,
#basic_search form[name="filter"] input[type="text"] {
  width: auto !important;
  margin-bottom: 0 !important;
}

#basic_search form[name="filter"] input[type="submit"],
#basic_search form[name="filter"] button {
  margin: 0 !important;
}

/* === TABLE GRID OPTIMIZATION (100% Width & Compact Rows) === */
table.list,
table.ticket_info,
.klm-tickets-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  /* Allow columns to flex based on content */
}

table.list th,
.klm-tickets-table th {
  padding: 8px 12px !important;
  white-space: nowrap;
  /* Prevent headers from wrapping if possible */
}

.staff-panel table.klm-tickets-table.list.queue td {
  padding: 8px 12px !important;
}

/* ===== KLM AI Auto-Translation Block ===== */
.klm-translation {
  margin-top: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(241, 245, 249, 0.8), rgba(226, 232, 240, 0.5));
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 13px;
  line-height: 1.35;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.klm-trans-separator {
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  opacity: 0.7;
  font-weight: 600;
  user-select: none;
}

.klm-trans-block {
  padding: 3px 0;
  border-top: none;
}

.klm-trans-block:first-of-type {
  border-top: none;
}

.klm-trans-label {
  font-weight: 700;
  font-size: 12px;
  color: var(--primary, #00a1de);
  display: inline-block;
  min-width: 48px;
  vertical-align: top;
}

.klm-trans-text {
  color: var(--text-main, #334155);
  line-height: 1.35;
  white-space: pre-line;
  vertical-align: top;
  display: inline-block;
  max-width: calc(100% - 56px);
}

/* Error state */
.klm-translation.klm-trans-error {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.5), rgba(254, 240, 138, 0.3));
  border-color: rgba(245, 158, 11, 0.3);
}

.klm-trans-err-msg {
  color: #b45309 !important;
  font-style: italic;
  font-size: 12px;
}

/* Dark mode */
html[data-theme="dark"] .klm-translation {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.5));
  border-color: rgba(100, 116, 139, 0.3);
}

html[data-theme="dark"] .klm-trans-text {
  color: var(--klm-text, #e2e8f0);
}

html[data-theme="dark"] .klm-trans-block {
  border-top-color: rgba(100, 116, 139, 0.25);
}

html[data-theme="dark"] .klm-translation.klm-trans-error {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.3), rgba(146, 64, 14, 0.2));
  border-color: rgba(245, 158, 11, 0.3);
}

html[data-theme="dark"] .klm-trans-err-msg {
  color: #fbbf24 !important;
}

/* Staff panel (SCP) thread compatibility */
.thread-entry .klm-translation {
  margin-top: 12px;
}

/* ===== KLM Status Confirmation Block ===== */
.klm-status-confirm {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(241, 245, 249, 0.6);
  font-size: 13px;
  line-height: 1.6;
  /* border-left is set inline via PHP (dynamic color) */
}

.klm-status-confirm strong {
  font-weight: 700;
}

.klm-status-icon {
  font-size: 14px;
}

/* Dark mode */
html[data-theme="dark"] .klm-status-confirm {
  background: rgba(30, 41, 59, 0.5);
  color: var(--klm-text, #e2e8f0);
}

/* KLM Translation Manual Editor */
.klm-edit-translation-btn {
  margin-top: 10px;
  border: 1px solid rgba(227, 0, 15, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(254, 242, 242, .92));
  color: #b91c1c;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(227, 0, 15, .08);
}

.klm-edit-translation-btn:hover {
  background: #E3000F;
  color: #fff;
  transform: translateY(-1px);
}

.klm-translation-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(10px);
}

.klm-translation-modal-card {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--klm-card, #fff);
  color: var(--klm-text, #0f172a);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  position: relative;
}

.klm-translation-modal-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
}

.klm-translation-modal-card p {
  margin: 0 0 16px;
  color: var(--klm-text-muted, #64748b);
}

.klm-translation-modal-card label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 800;
  color: var(--klm-text, #0f172a);
}

.klm-translation-modal-card textarea {
  width: 100% !important;
  min-height: 90px;
  resize: vertical;
}

.klm-translation-modal-close {
  position: absolute;
  right: 16px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  color: var(--klm-text-muted, #64748b);
}

.klm-translation-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.klm-translation-save,
.klm-translation-cancel {
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
}

.klm-translation-save {
  background: #E3000F;
  color: #fff;
}

.klm-translation-cancel {
  background: #e2e8f0;
  color: #334155;
}

.klm-translation-status {
  margin-top: 10px;
  font-weight: 700;
  color: #b91c1c;
}

.klm-trans-edited {
  border-color: rgba(16, 185, 129, .28) !important;
  background: linear-gradient(135deg, rgba(236, 253, 245, .9), rgba(255, 255, 255, .82)) !important;
}

/* Dark-mode contrast fix for edited translation blocks */
html[data-theme="dark"] .klm-trans-edited,
html[data-theme="dark"] .chat-text .klm-trans-edited {
  background: linear-gradient(135deg, rgba(6, 78, 59, .88), rgba(15, 23, 42, .96)) !important;
  border-color: rgba(52, 211, 153, .45) !important;
  color: #ecfdf5 !important;
}

html[data-theme="dark"] .klm-trans-edited .klm-trans-separator {
  color: #a7f3d0 !important;
  border-color: rgba(52, 211, 153, .28) !important;
}

html[data-theme="dark"] .klm-trans-edited .klm-trans-label {
  color: #fb7185 !important;
}

html[data-theme="dark"] .klm-trans-edited .klm-trans-text {
  color: #f8fafc !important;
}

html[data-theme="dark"] .klm-trans-edited .klm-trans-block {
  border-color: rgba(148, 163, 184, .28) !important;
}

html[data-theme="dark"] .klm-edit-translation-btn {
  background: rgba(127, 29, 29, .9) !important;
  color: #fff1f2 !important;
  border-color: rgba(251, 113, 133, .45) !important;
}

html[data-theme="dark"] .klm-edit-translation-btn:hover {
  background: #e11d48 !important;
  color: #fff !important;
}

/* Ensure translation editor modal stays above reply composer / rich text toolbar */
.klm-translation-modal {
  z-index: 2147483000 !important;
}

.klm-translation-modal-card {
  z-index: 2147483001 !important;
}

body.klm-modal-open .reply-box,
body.klm-modal-open #reply,
body.klm-modal-open .redactor-toolbar,
body.klm-modal-open .redactor-box,
body.klm-modal-open .redactor-editor,
body.klm-modal-open .sticky,
body.klm-modal-open .fixed {
  z-index: 1 !important;
}

/* KLM reply composer hardening: modal overlay + dark mode */
body.klm-modal-open .reply-box {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .reply-box.glass-panel {
  background: rgba(15, 23, 42, .92) !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  color: #e5e7eb !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35) !important;
}

html[data-theme="dark"] .reply-box h2,
html[data-theme="dark"] .reply-box strong,
html[data-theme="dark"] .reply-box p,
html[data-theme="dark"] .reply-box em {
  color: #e5e7eb !important;
}

html[data-theme="dark"] .reply-box .redactor-box,
html[data-theme="dark"] .reply-box .redactor-styles-on,
html[data-theme="dark"] .reply-box .redactor-toolbar,
html[data-theme="dark"] .reply-box .redactor-editor,
html[data-theme="dark"] .reply-box .redactor-in,
html[data-theme="dark"] .reply-box textarea#message,
html[data-theme="dark"] .reply-box textarea.richtext {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .28) !important;
}

html[data-theme="dark"] .reply-box .redactor-toolbar {
  background: #111827 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .24) !important;
}

html[data-theme="dark"] .reply-box .redactor-toolbar a,
html[data-theme="dark"] .reply-box .redactor-toolbar i,
html[data-theme="dark"] .reply-box .re-button-icon {
  color: #e5e7eb !important;
  fill: #e5e7eb !important;
}

html[data-theme="dark"] .reply-box .redactor-toolbar a:hover {
  background: rgba(59, 130, 246, .18) !important;
}

html[data-theme="dark"] .klm-action-radios-container,
html[data-theme="dark"] .klm-attachments-container,
html[data-theme="dark"] #klm-confirmed-box {
  background: rgba(15, 23, 42, .88) !important;
  border-color: rgba(148, 163, 184, .25) !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .klm-action-radios-container span,
html[data-theme="dark"] .klm-action-radios-container strong {
  color: #e5e7eb !important;
}

/* Final dark override for client reply composer (specific ID beats legacy rules) */
html[data-theme="dark"] #klm-reply-composer,
html[data-theme="dark"] #klm-reply-composer.glass-panel,
html[data-theme="dark"] #klm-reply-composer.reply-box {
  background: #0f172a !important;
  background-color: #0f172a !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] #klm-reply-composer form,
html[data-theme="dark"] #klm-reply-composer>div,
html[data-theme="dark"] #klm-reply-composer .form_table,
html[data-theme="dark"] #klm-reply-composer .redactor-box,
html[data-theme="dark"] #klm-reply-composer .redactor-styles-on,
html[data-theme="dark"] #klm-reply-composer .redactor-layer,
html[data-theme="dark"] #klm-reply-composer .redactor-toolbar,
html[data-theme="dark"] #klm-reply-composer .redactor-editor,
html[data-theme="dark"] #klm-reply-composer .redactor-in,
html[data-theme="dark"] #klm-reply-composer .klm-attachments-container,
html[data-theme="dark"] #klm-reply-composer .filedrop,
html[data-theme="dark"] #klm-reply-composer .dropzone,
html[data-theme="dark"] #klm-reply-composer .uploads,
html[data-theme="dark"] #klm-reply-composer .klm-action-radios-container {
  background: #111827 !important;
  background-color: #111827 !important;
  background-image: none !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .28) !important;
}

html[data-theme="dark"] #klm-reply-composer textarea,
html[data-theme="dark"] #klm-reply-composer iframe,
html[data-theme="dark"] #klm-reply-composer input,
html[data-theme="dark"] #klm-reply-composer select {
  background-color: #111827 !important;
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .28) !important;
}

html[data-theme="dark"] #klm-reply-composer h2,
html[data-theme="dark"] #klm-reply-composer p,
html[data-theme="dark"] #klm-reply-composer em,
html[data-theme="dark"] #klm-reply-composer strong,
html[data-theme="dark"] #klm-reply-composer span,
html[data-theme="dark"] #klm-reply-composer label {
  color: #e5e7eb !important;
}

html[data-theme="dark"] #klm-reply-composer .redactor-toolbar a,
html[data-theme="dark"] #klm-reply-composer .redactor-toolbar i {
  color: #e5e7eb !important;
}

/* Keep reply action buttons consistent with light-mode palette in dark mode */
html[data-theme="dark"] #klm-reply-composer input.button[type="submit"] {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(14, 165, 233, .28) !important;
}

html[data-theme="dark"] #klm-reply-composer input.button.btn-klm-secondary,
html[data-theme="dark"] #klm-reply-composer input.button[type="reset"] {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(71, 85, 105, .24) !important;
}

html[data-theme="dark"] #klm-reply-composer input.button.btn-klm-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, .26) !important;
}

html[data-theme="dark"] #klm-reply-composer input.button:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px);
}

/* Ticket title translations shown under title */
.klm-title-translations {
  flex-basis: 100%;
  margin: 10px 0 0 36px;
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.klm-title-translation-line {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  color: var(--klm-text-muted, #64748b);
  font-size: 13px;
  font-weight: 600;
}

.klm-title-translation-line span {
  color: #E3000F;
  font-weight: 900;
  min-width: 28px;
}

html[data-theme="dark"] .klm-title-translation-line {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .klm-title-translation-line span {
  color: #fb7185 !important;
}

/* Title translation stack + edit */
.ticket-view-header {
  align-items: flex-start !important;
  gap: 18px !important;
}

.ticket-view-header h1 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, max-content) auto !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  align-items: center !important;
  justify-content: start !important;
}

.ticket-view-header h1>a {
  grid-column: 1;
  grid-row: 1;
}

.ticket-view-header h1>b {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: min(720px, 58vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-view-header h1>.badge-open {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
}

.klm-title-stack {
  grid-column: 2 / 4;
  grid-row: 2;
  min-width: 0 !important;
  margin: 0 !important;
  display: grid;
  gap: 2px;
  max-width: min(830px, calc(66vw + 10px)) !important;
  align-self: start;
}

.klm-title-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  color: var(--text-muted, #64748b);
  font-size: 12px;
  line-height: 1.25;
}

.klm-title-row.is-translation {
  font-style: italic;
  opacity: .82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klm-title-row span {
  color: var(--text-muted, #64748b);
  font-weight: 800;
  min-width: 26px;
  flex: 0 0 auto;
}

.klm-title-row em {
  color: var(--text-muted, #64748b);
  font-style: italic;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-view-header .actions {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  align-items: flex-start !important;
  height: auto !important;
}

.ticket-view-header .actions .klm-ticket-action-btn {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 14px !important;
  line-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] .klm-title-row,
html[data-theme="dark"] .klm-title-row span,
html[data-theme="dark"] .klm-title-row em {
  color: #94a3b8 !important;
}

#klmTitleModal textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
}

/* Ticket list multi-language title */
.klm-list-title-stack {
  display: grid !important;
  gap: 3px;
  line-height: 1.28;
  white-space: normal !important;
}

.klm-list-title-line {
  display: block;
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-weight: 700;
}

.klm-list-title-line.is-original {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-main, #0f172a);
  font-weight: 900;
}

.klm-list-title-line b {
  color: #E3000F;
  font-weight: 900;
}

html[data-theme="dark"] .klm-list-title-line {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .klm-list-title-line.is-original {
  color: #f8fafc !important;
}

html[data-theme="dark"] .klm-list-title-line b {
  color: #fb7185 !important;
}

/* Ticket list translation lines: muted/italic text, red language label */
.klm-list-title-line:not(.is-original) {
  color: var(--klm-text-muted, #64748b) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  opacity: .86;
}

.klm-list-title-line:not(.is-original) b {
  color: #E3000F !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html[data-theme="dark"] .klm-list-title-line:not(.is-original) {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .klm-list-title-line:not(.is-original) b {
  color: #fb7185 !important;
}

.chat-text {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: var(--klm-text, var(--text-main, #0f172a)) !important;
  font-weight: 650 !important;
}

.chat-text .klm-translation,
.klm-translation {
  font-size: 12.5px !important;
  color: var(--klm-text-muted, #64748b) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

.klm-trans-label,
.klm-trans-text {
  color: var(--klm-text-muted, #64748b) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Compact KLM Auto-Translation spacing inside ticket comments */
.chat-text .klm-translation,
.klm-translation {
  margin-top: 4px !important;
  padding: 6px 10px !important;
  line-height: 1.12 !important;
}

.chat-text .klm-trans-separator,
.klm-trans-separator {
  margin: 0 0 2px !important;
  line-height: 1 !important;
}

.chat-text .klm-trans-block,
.klm-trans-block {
  padding: 5px 0 2px !important;
  line-height: 1.12 !important;
}

.chat-text .klm-trans-label,
.chat-text .klm-trans-text,
.klm-trans-label,
.klm-trans-text {
  line-height: 1.12 !important;
}

.chat-text .klm-trans-text,
.klm-trans-text {
  white-space: pre-line !important;
}

.klm-status-tooltip {
  position: relative;
  overflow: visible !important;
}

.klm-status-tooltip-card {
  position: absolute !important;
  left: 230px !important;
  top: 50% !important;
  z-index: 2147483002;
  width: min(380px, calc(100vw - 280px));
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .78);
  border: 1px solid rgba(125, 211, 252, .46);
  box-shadow: 0 18px 52px rgba(15, 23, 42, .34), inset 0 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity .12s ease;
}

.klm-status-tooltip-card::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-right-color: rgba(125, 211, 252, .46);
}

.klm-status-tooltip-card span {
  display: block;
  font-size: 12px;
  line-height: 1.34;
  text-shadow: none;
}

.klm-status-tooltip-card .tip-lang {
  position: relative;
  margin: 0 0 10px;
  padding-left: 0;
}

.klm-status-tooltip-card .tip-lang:last-child {
  margin-bottom: 0;
}

.klm-status-tooltip-card .tip-lang b {
  display: block;
  margin-bottom: 4px;
  font-weight: 800 !important;
  font-style: normal !important;
}

.klm-status-tooltip-card .tip-lang em {
  position: relative;
  display: block;
  margin: 0 0 3px 14px;
  padding-left: 12px;
  font-style: italic !important;
  font-weight: 400 !important;
}

.klm-status-tooltip-card .tip-lang em::before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 8px;
  height: 15px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .42;
}

.klm-status-tooltip-card .tip-vi {
  color: #7c2d12;
}

.klm-status-tooltip-card .tip-en {
  color: #0369a1;
}

.klm-status-tooltip-card .tip-ch {
  color: #15803d;
}

html[data-theme="dark"] .klm-status-tooltip-card {
  background: rgba(30, 41, 59, .35);
  border-color: rgba(56, 189, 248, .42);
  box-shadow: 0 18px 52px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .klm-status-tooltip-card::after {
  border-right-color: rgba(56, 189, 248, .42);
}

html[data-theme="dark"] .klm-status-tooltip-card .tip-vi,
html[data-theme="dark"] .klm-status-tooltip-card .tip-vi b,
html[data-theme="dark"] .klm-status-tooltip-card .tip-vi em {
  color: #fef3c7 !important;
}

html[data-theme="dark"] .klm-status-tooltip-card .tip-en,
html[data-theme="dark"] .klm-status-tooltip-card .tip-en b,
html[data-theme="dark"] .klm-status-tooltip-card .tip-en em {
  color: #7dd3fc !important;
}

html[data-theme="dark"] .klm-status-tooltip-card .tip-ch,
html[data-theme="dark"] .klm-status-tooltip-card .tip-ch b,
html[data-theme="dark"] .klm-status-tooltip-card .tip-ch em {
  color: #86efac !important;
}

.klm-status-tooltip:hover .klm-status-tooltip-card,
.klm-status-tooltip:focus-within .klm-status-tooltip-card {
  opacity: 1;
  visibility: visible;
}

html[data-theme="dark"] .chat-text {
  color: #f8fafc !important;
}

html[data-theme="dark"] .chat-text .klm-translation,
html[data-theme="dark"] .klm-translation,
html[data-theme="dark"] .klm-trans-label,
html[data-theme="dark"] .klm-trans-text {
  color: #94a3b8 !important;
}

/* Ticket dashboard status tab icons */
.tabs-group .tab-item {
  min-width: 72px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: all .18s ease;
}

.tab-status-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
  font-weight: 800;
  opacity: 1 !important;
}

.tab-status-label>span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tab-status-label i,
.tab-status-label svg {
  width: 25px !important;
  height: 25px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  display: inline-block !important;
  overflow: visible;
}

.tabs-group .tab-item .tab-count {
  margin-top: 4px;
  color: #64748b !important;
  line-height: 1;
  font-size: 36px !important;
  font-weight: 900 !important;
}

.tabs-group .tab-item:nth-child(1) .tab-status-label,
.tabs-group .tab-item:nth-child(1) .tab-count {
  color: #9ca3af !important;
}

.tabs-group .tab-item:nth-child(2) .tab-status-label,
.tabs-group .tab-item:nth-child(2) .tab-count {
  color: #fb3d5d !important;
}

.tabs-group .tab-item:nth-child(3) .tab-status-label,
.tabs-group .tab-item:nth-child(3) .tab-count {
  color: #2f80ff !important;
}

.tabs-group .tab-item:nth-child(4) .tab-status-label,
.tabs-group .tab-item:nth-child(4) .tab-count {
  color: #f59e0b !important;
}

.tabs-group .tab-item:nth-child(5) .tab-status-label,
.tabs-group .tab-item:nth-child(5) .tab-count {
  color: #22f3e8 !important;
}

.tabs-group .tab-item:nth-child(6) .tab-status-label,
.tabs-group .tab-item:nth-child(6) .tab-count {
  color: #22c55e !important;
}

.tabs-group .tab-item.active {
  background: rgba(244, 63, 94, 0.08) !important;
  border-color: rgba(244, 63, 94, 0.72) !important;
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.10);
}

.tabs-group .tab-item.active .tab-count {
  color: #e11d48 !important;
}

html[data-theme="dark"] .tabs-group .tab-item .tab-count {
  color: #93a4bd !important;
}

html[data-theme="dark"] .tabs-group .tab-item.active {
  background: rgba(244, 63, 94, 0.10) !important;
  border-color: rgba(244, 63, 94, 0.78) !important;
}

html[data-theme="dark"] .tabs-group .tab-item.active .tab-count {
  color: #fb7185 !important;
}

/* Final status color lock: must stay after active/dark overrides */
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1) .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1).active .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1) .tab-status-label {
  color: #9ca3af !important;
}

.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(2) .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(2).active .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(2) .tab-status-label {
  color: #fb3d5d !important;
}

.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(3) .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(3).active .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(3) .tab-status-label {
  color: #2f80ff !important;
}

.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(4) .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(4).active .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(4) .tab-status-label {
  color: #f59e0b !important;
}

.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(5) .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(5).active .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(5) .tab-status-label {
  color: #22f3e8 !important;
}

.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(6) .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(6).active .tab-count,
.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(6) .tab-status-label {
  color: #22c55e !important;
}

.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1) .tab-status-label {
  display: none !important;
}

.ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1) .tab-count {
  font-size: 72px !important;
  line-height: .86 !important;
  margin-top: 0 !important;
  letter-spacing: -0.06em;
}

.tab-icon-new .spark {
  transform-box: fill-box;
  transform-origin: center;
}

.tab-icon-new .spark-large {
  animation: klm-spark-swap-large 1.45s ease-in-out infinite;
}

.tab-icon-new .spark-small {
  animation: klm-spark-swap-small 1.45s ease-in-out infinite;
}

@keyframes klm-spark-swap-large {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(.45);
    opacity: .45;
  }
}

@keyframes klm-spark-swap-small {

  0%,
  100% {
    transform: scale(.65);
    opacity: .55;
  }

  50% {
    transform: scale(1.55);
    opacity: 1;
  }
}

.tab-icon-search-ticket .search-lens,
.tab-icon-search-ticket .search-handle {
  animation: klm-search-scan 1.8s ease-in-out infinite;
}

@keyframes klm-search-scan {

  0%,
  100% {
    transform: translate(-2px, -1px);
  }

  50% {
    transform: translate(2px, 1px);
  }
}

.tab-icon-typing .typing-dot {
  fill: currentColor !important;
  stroke: none !important;
  animation: klm-typing-dot 1.2s ease-in-out infinite;
}

.tab-icon-typing .dot-2 {
  animation-delay: .16s;
}

.tab-icon-typing .dot-3 {
  animation-delay: .32s;
}

@keyframes klm-typing-dot {

  0%,
  80%,
  100% {
    opacity: .25;
    transform: translateY(0);
  }

  35% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.tab-icon-awaiting-close .awaiting-close-check {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: klm-close-check-draw 1.45s ease-in-out infinite;
}

@keyframes klm-close-check-draw {
  0% {
    stroke-dashoffset: 10;
    opacity: .25;
    transform: scale(.86);
  }

  45% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1.12);
  }

  70% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: scale(1);
  }

  100% {
    stroke-dashoffset: 10;
    opacity: .25;
    transform: scale(.86);
  }
}

.tab-icon-dot-spinner svg {
  animation: klm-dot-spinner-rotate 1.15s linear infinite;
}

.tab-icon-dot-spinner .spin-dot {
  fill: currentColor !important;
  stroke: none !important;
}

.tab-icon-dot-spinner .d1 {
  opacity: 1;
}

.tab-icon-dot-spinner .d2 {
  opacity: .88;
}

.tab-icon-dot-spinner .d3 {
  opacity: .76;
}

.tab-icon-dot-spinner .d4 {
  opacity: .64;
}

.tab-icon-dot-spinner .d5 {
  opacity: .52;
}

.tab-icon-dot-spinner .d6 {
  opacity: .40;
}

.tab-icon-dot-spinner .d7 {
  opacity: .30;
}

.tab-icon-dot-spinner .d8 {
  opacity: .22;
}

@keyframes klm-dot-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.tab-icon-closed svg {
  overflow: visible;
}

.tab-icon-closed .closed-ring {
  animation: none !important;
}

.tab-icon-closed .closed-check {
  stroke-width: 4.2 !important;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.9);
}

@keyframes klm-closed-rotate {
  to {
    transform: rotate(360deg);
  }
}

.tab-status-label .spin-icon {
  animation: klm-status-spin 1.8s linear infinite;
}

@keyframes klm-status-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Profile page polish: account badge and borderless inner fields */
.account-type-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 92px;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.account-type-badge svg,
.account-type-badge i {
  flex: 0 0 auto;
}

.profile-main-card .modern-field-container input,
.profile-main-card .modern-field-container select,
.profile-main-card .modern-field-container textarea {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

html[data-theme="dark"] .profile-main-card .modern-field-container input,
html[data-theme="dark"] .profile-main-card .modern-field-container select,
html[data-theme="dark"] .profile-main-card .modern-field-container textarea {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .profile-main-card .modern-field-container input:focus,
html[data-theme="dark"] .profile-main-card .modern-field-container select:focus,
html[data-theme="dark"] .profile-main-card .modern-field-container textarea:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.klm-priority-form,
.klm-priority-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #b45309;
  border: 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

.klm-priority-form select {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
  padding: 0 12px 0 1px;
  min-height: 16px;
  line-height: 1.15;
}

.klm-priority-form i,
.klm-priority-display i {
  color: #f59e0b;
}

html[data-theme="dark"] .klm-priority-form,
html[data-theme="dark"] .klm-priority-display {
  background: transparent;
  color: #fde68a;
  border-color: transparent;
}

html[data-theme="dark"] .klm-priority-form select option {
  background: #0f172a;
  color: #f8fafc;
}

.klm-trans-label,
.klm-title-row span,
.klm-list-title-line b {
  color: #E3000F !important;
  font-weight: 900 !important;
}

html[data-theme="dark"] .klm-trans-label,
html[data-theme="dark"] .klm-title-row span,
html[data-theme="dark"] .klm-list-title-line b {
  color: #fb7185 !important;
}

/* Final lock: KLM status tooltip language colors must beat dark global text rules */
.klm-status-tooltip .klm-status-tooltip-card .tip-vi,
.klm-status-tooltip .klm-status-tooltip-card .tip-vi *,
html[data-theme="dark"] .klm-status-tooltip .klm-status-tooltip-card .tip-vi,
html[data-theme="dark"] .klm-status-tooltip .klm-status-tooltip-card .tip-vi * {
  color: #fef3c7 !important;
}

.klm-status-tooltip .klm-status-tooltip-card .tip-en,
.klm-status-tooltip .klm-status-tooltip-card .tip-en *,
html[data-theme="dark"] .klm-status-tooltip .klm-status-tooltip-card .tip-en,
html[data-theme="dark"] .klm-status-tooltip .klm-status-tooltip-card .tip-en * {
  color: #7dd3fc !important;
}

.klm-status-tooltip .klm-status-tooltip-card .tip-ch,
.klm-status-tooltip .klm-status-tooltip-card .tip-ch *,
html[data-theme="dark"] .klm-status-tooltip .klm-status-tooltip-card .tip-ch,
html[data-theme="dark"] .klm-status-tooltip .klm-status-tooltip-card .tip-ch * {
  color: #86efac !important;
}

.klm-status-tooltip .klm-status-tooltip-card .tip-lang em::before {
  border-color: currentColor !important;
}

/* KLM AI Scroll Navigator: rocket-style top/bottom controls */
.klm-scroll-nav {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(18px, 3vh, 34px);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.klm-scroll-orb {
  position: relative;
  width: 54px !important;
  height: 54px !important;
  padding: 0 !important;
  border: 1px solid rgba(225, 29, 72, .34) !important;
  border-radius: 18px !important;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  color: var(--klm-accent, #e11d48) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .9), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .38)) !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, .16),
    0 0 0 1px rgba(255, 255, 255, .42) inset,
    0 0 28px rgba(225, 29, 72, .18);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transform: translateZ(0);
  transition:
    transform .28s cubic-bezier(.2, .9, .2, 1.35),
    opacity .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}

.klm-scroll-orb::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg, transparent, rgba(14, 165, 233, .38), rgba(225, 29, 72, .48), transparent 62%);
  animation: klm-scroll-orbit 3.8s linear infinite;
  opacity: .8;
}

.klm-scroll-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, transparent, rgba(14, 165, 233, .16), transparent);
  transform: translateY(-70%);
  animation: klm-scroll-scan 2.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

.klm-orb-core {
  position: absolute;
  inset: 5px;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(248, 250, 252, .92), rgba(241, 245, 249, .7));
  box-shadow: 0 0 18px rgba(225, 29, 72, .12) inset;
}

.klm-orb-core svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  filter: drop-shadow(0 0 8px rgba(225, 29, 72, .38));
  animation: klm-arrow-float-up 1.55s ease-in-out infinite;
}

.klm-scroll-orb.is-bottom .klm-orb-core svg {
  animation-name: klm-arrow-float-down;
}

.klm-scroll-orb:hover {
  transform: translateY(-3px) scale(1.055);
  border-color: rgba(14, 165, 233, .48) !important;
  box-shadow:
    0 22px 52px rgba(15, 23, 42, .22),
    0 0 0 1px rgba(255, 255, 255, .55) inset,
    0 0 36px rgba(14, 165, 233, .26),
    0 0 26px rgba(225, 29, 72, .18);
}

.klm-scroll-orb.is-launching {
  animation: klm-orb-launch .72s cubic-bezier(.18, .92, .28, 1.35) infinite;
}

.klm-scroll-orb.is-launching .klm-orb-core svg {
  animation-duration: .42s;
}

.klm-scroll-orb.is-muted {
  opacity: .42;
  transform: scale(.92);
}

html[data-theme="dark"] .klm-scroll-orb {
  color: var(--klm-accent, #fb7185) !important;
  border-color: rgba(251, 113, 133, .35) !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(125, 211, 252, .26), transparent 30%),
    linear-gradient(145deg, rgba(15, 23, 42, .82), rgba(2, 6, 23, .62)) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(148, 163, 184, .18) inset,
    0 0 34px rgba(251, 113, 133, .22);
}

html[data-theme="dark"] .klm-orb-core {
  background: linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(30, 41, 59, .72));
  box-shadow: 0 0 20px rgba(14, 165, 233, .16) inset;
}

@keyframes klm-scroll-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes klm-scroll-scan {

  0%,
  100% {
    transform: translateY(-72%);
    opacity: .18;
  }

  50% {
    transform: translateY(72%);
    opacity: .72;
  }
}

@keyframes klm-arrow-float-up {

  0%,
  100% {
    transform: translateY(3px);
    opacity: .78;
  }

  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes klm-arrow-float-down {

  0%,
  100% {
    transform: translateY(-3px);
    opacity: .78;
  }

  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

@keyframes klm-orb-launch {
  0% {
    transform: scale(1) translateY(0);
  }

  38% {
    transform: scale(.94) translateY(2px);
  }

  72% {
    transform: scale(1.08) translateY(-5px);
  }

  100% {
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 640px) {
  .klm-scroll-nav {
    right: 12px;
    bottom: 14px;
    gap: 9px;
  }

  .klm-scroll-orb {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }

  .klm-orb-core {
    inset: 4px;
    border-radius: 12px;
  }

  .klm-orb-core svg {
    width: 21px;
    height: 21px;
  }
}

/* Ticket detail: collapsible basic information frame */
#ticketInfo {
  position: relative;
  padding-bottom: 6px !important;
}

#ticketInfo .ticket-view-header {
  margin-bottom: 12px !important;
}

#ticketInfo.is-collapsed .ticket-view-header {
  border-bottom: 0 !important;
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}

#ticketInfo .ticket-info-grid {
  margin-bottom: 0 !important;
}

#ticketInfoGrid {
  overflow: hidden;
  max-height: 680px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height .42s cubic-bezier(.4, 0, .2, 1),
    opacity .24s ease,
    transform .32s ease,
    margin .32s ease;
}

.klm-ticket-info-control-row {
  position: absolute;
  top: 102px;
  right: 18px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  pointer-events: none;
}

.klm-ticket-info-collapsed-title {
  display: flex;
  align-items: center;
  gap: 10px;
  max-height: 0;
  margin: 0;
  padding: 0 14px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--klm-text, #0f172a);
  background: linear-gradient(135deg, rgba(248, 250, 252, .86), rgba(255, 255, 255, .58));
  transition: max-height .34s ease, opacity .22s ease, transform .28s ease, margin .28s ease, padding .28s ease;
}

.klm-ticket-info-collapsed-title span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.klm-ticket-info-collapsed-title strong {
  color: var(--klm-accent, #e11d48);
  font-size: 12px;
  font-weight: 900;
}

.klm-ticket-info-collapsed-title em {
  color: var(--klm-text-muted, #64748b);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

#ticketInfo.is-collapsed #ticketInfoGrid {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  margin-top: -8px;
  pointer-events: none;
}

#ticketInfo.is-collapsed .klm-ticket-info-collapsed-title {
  flex: 1 1 auto;
  max-height: 54px;
  margin: 0;
  padding: 12px 14px;
  opacity: 1;
  transform: translateY(0);
  border-color: var(--klm-border, rgba(148, 163, 184, .28));
}

.klm-ticket-info-toggle {
  position: relative;
  z-index: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  height: 30px;
  padding: 0 12px !important;
  border: 1px solid rgba(59, 130, 246, .34) !important;
  border-radius: 999px !important;
  cursor: pointer;
  pointer-events: auto;
  color: var(--klm-text, #0f172a) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(241, 245, 249, .62)) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12), 0 0 18px rgba(59, 130, 246, .12);
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.klm-ticket-info-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(225, 29, 72, .36) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16), 0 0 24px rgba(225, 29, 72, .16);
}

.klm-ticket-info-toggle .toggle-label-collapsed,
#ticketInfo.is-collapsed .klm-ticket-info-toggle .toggle-label-expanded {
  display: none;
}

#ticketInfo.is-collapsed .klm-ticket-info-toggle .toggle-label-collapsed,
.klm-ticket-info-toggle .toggle-label-expanded {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

html[data-theme="dark"] .klm-ticket-info-toggle {
  color: var(--klm-text, #e2e8f0) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .9), rgba(30, 41, 59, .66)) !important;
  border-color: rgba(125, 211, 252, .3) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 0 22px rgba(125, 211, 252, .13);
}

html[data-theme="dark"] .klm-ticket-info-collapsed-title {
  background: linear-gradient(135deg, rgba(15, 23, 42, .86), rgba(30, 41, 59, .58));
}

@media (max-width: 768px) {
  .klm-ticket-info-control-row {
    align-items: stretch;
    gap: 8px;
  }

  .klm-ticket-info-collapsed-title span {
    font-size: 11px;
  }

  .klm-ticket-info-toggle {
    height: 32px;
    min-width: 96px;
    font-size: 11px !important;
  }
}


/* KLM Activity Center */
.nav-icon-item {
  position: relative;
}

.klm-history-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fb7185, #ef4444);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 0 2px rgba(2, 6, 23, .95), 0 0 18px rgba(239, 68, 68, .8);
}

.nav-icon-item.has-alerts svg {
  color: #fb7185;
}

.nav-icon-item.has-alerts {
  animation: klmPulseAlert 1.5s ease-in-out infinite;
}

@keyframes klmPulseAlert {

  0%,
  100% {
    box-shadow: 0 0 0 rgba(244, 63, 94, 0);
  }

  50% {
    box-shadow: 0 0 22px rgba(244, 63, 94, .55);
  }
}

.klm-activity-panel {
  position: fixed;
  top: 78px;
  right: 22px;
  width: min(420px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 100px));
  z-index: 99999;
  display: none;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .94));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #e5e7eb;
  backdrop-filter: blur(18px);
}

.klm-activity-panel.active {
  display: block;
  animation: klmPanelIn .18s ease-out;
}

@keyframes klmPanelIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.klm-activity-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.klm-activity-head b {
  display: block;
  font-size: 17px;
  letter-spacing: -.02em;
}

.klm-activity-head span {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 12px;
}

.klm-activity-head button {
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(14, 165, 233, .12);
  color: #bae6fd;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.klm-activity-list {
  max-height: 520px;
  overflow: auto;
  padding: 10px;
}

.klm-activity-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 11px;
  padding: 13px;
  margin-bottom: 8px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(148, 163, 184, .13);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.klm-activity-item:hover {
  transform: translateY(-1px);
  background: rgba(30, 41, 59, .82);
  border-color: rgba(125, 211, 252, .35);
}

.klm-activity-item.unread {
  border-color: rgba(56, 189, 248, .38);
}

.klm-activity-item.critical {
  background: linear-gradient(135deg, rgba(127, 29, 29, .7), rgba(76, 5, 25, .72));
  border-color: rgba(251, 113, 133, .42);
}

.klm-activity-item.warning {
  background: linear-gradient(135deg, rgba(120, 53, 15, .45), rgba(15, 23, 42, .72));
  border-color: rgba(251, 191, 36, .28);
}

.klm-activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, .75);
}

.klm-activity-item.critical .klm-activity-dot {
  background: #fb7185;
  box-shadow: 0 0 18px rgba(251, 113, 133, .9);
}

.klm-activity-item.warning .klm-activity-dot {
  background: #fbbf24;
  box-shadow: 0 0 16px rgba(251, 191, 36, .7);
}

.klm-activity-item b {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}

.klm-activity-item p {
  margin: 4px 0;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
}

.klm-activity-item time {
  color: #94a3b8;
  font-size: 11px;
}

.klm-activity-empty {
  padding: 28px 14px;
  text-align: center;
  color: #94a3b8;
}

.klm-alert-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100000;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #be123c, #7f1d1d);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 20px 60px rgba(127, 29, 29, .55);
  transition: .22s ease;
}

.klm-alert-toast.active {
  opacity: 1;
  transform: none;
}

[data-theme="light"] .klm-activity-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(241, 245, 249, .94));
  color: #0f172a;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .18);
}

[data-theme="light"] .klm-activity-item {
  background: rgba(255, 255, 255, .82);
  color: #0f172a;
}

[data-theme="light"] .klm-activity-item p {
  color: #475569;
}

/* KLM Activity Center - read/compact state */
.klm-activity-item.read {
  grid-template-columns: 7px 1fr;
  padding: 9px 12px;
  margin-bottom: 6px;
  min-height: 38px;
  background: rgba(15, 23, 42, .34) !important;
  border-color: rgba(148, 163, 184, .10) !important;
  opacity: .72;
  box-shadow: none !important;
}

.klm-activity-item.read .klm-activity-dot {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  background: #64748b !important;
  box-shadow: none !important;
}

.klm-activity-item.read b {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.klm-activity-item.read p,
.klm-activity-item.read time {
  display: none !important;
}

[data-theme="light"] .klm-activity-item.read {
  background: rgba(241, 245, 249, .72) !important;
  color: #64748b;
}

[data-theme="light"] .klm-activity-item.read b {
  color: #64748b;
}

/* KLM Activity Center - Mark read button debug hover */
#klmActivityMarkRead {
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease !important;
}

#klmActivityMarkRead:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border-color: rgba(125, 211, 252, .9) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .18), 0 12px 30px rgba(37, 99, 235, .45) !important;
}

#klmActivityMarkRead:hover::after {
  content: "Hover OK - Mark read button";
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 100001;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .96);
  color: #e0f2fe;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(56, 189, 248, .4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

#klmActivityMarkRead:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .22), 0 10px 24px rgba(34, 197, 94, .35) !important;
}

/* KLM Premium Hover - Ticket Print/Edit actions */
.klm-ticket-action-btn {
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease !important;
}

.klm-ticket-action-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border-color: rgba(125, 211, 252, .9) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .18), 0 12px 30px rgba(37, 99, 235, .45) !important;
}

.klm-ticket-action-btn:hover i,
.klm-ticket-action-btn:hover svg {
  color: #ffffff !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .35));
}

.klm-ticket-action-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .22), 0 10px 24px rgba(34, 197, 94, .35) !important;
}


/* KLM Scroll Navigator - centered with 20% background */
.klm-scroll-nav {
  top: 50% !important;
  bottom: auto !important;
  right: clamp(14px, 2vw, 28px) !important;
  transform: translateY(-50%) !important;
}

.klm-scroll-orb {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .20), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .20)) !important;
}

.klm-orb-core {
  background: rgba(248, 250, 252, .20) !important;
}

html[data-theme="dark"] .klm-scroll-orb {
  background:
    radial-gradient(circle at 28% 18%, rgba(125, 211, 252, .20), transparent 30%),
    linear-gradient(145deg, rgba(15, 23, 42, .20), rgba(2, 6, 23, .20)) !important;
}

html[data-theme="dark"] .klm-orb-core {
  background: rgba(15, 23, 42, .20) !important;
}

@media (max-width: 640px) {
  .klm-scroll-nav {
    top: 50% !important;
    bottom: auto !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
  }
}

/* KLM Activity - More link and full log page */
.klm-activity-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 4px 2px;
  padding: 11px 14px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  color: #bae6fd;
  background: rgba(14, 165, 233, .12);
  border: 1px dashed rgba(125, 211, 252, .35);
  transition: .18s ease;
}

.klm-activity-more:hover {
  transform: translateY(-1px);
  color: #fff;
  background: linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(37, 99, 235, .18));
  box-shadow: 0 10px 28px rgba(37, 99, 235, .22);
}

.klm-activity-page {
  width: min(1040px, calc(100vw - 32px));
  margin: 34px auto;
  color: var(--klm-text, #0f172a);
}

.klm-activity-page-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(241, 245, 249, .62));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}

.klm-activity-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  color: #e11d48;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.klm-activity-page-hero h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -.04em;
}

.klm-activity-page-hero p {
  margin: 8px 0 0;
  color: var(--klm-text-muted, #64748b);
  font-weight: 700;
}

.klm-activity-stats {
  display: flex;
  gap: 12px;
}

.klm-activity-stats span {
  min-width: 92px;
  padding: 14px;
  border-radius: 20px;
  text-align: center;
  background: rgba(14, 165, 233, .12);
  border: 1px solid rgba(14, 165, 233, .22);
}

.klm-activity-stats b {
  display: block;
  font-size: 28px;
  color: #0ea5e9;
}

.klm-activity-stats em {
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  text-transform: uppercase;
}

.klm-activity-page-list {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.klm-activity-page-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow: 0 12px 34px rgba(15, 23, 42, .08);
}

.klm-activity-page-item.unread {
  border-color: rgba(251, 113, 133, .38);
  background: rgba(255, 241, 242, .72);
}

.klm-activity-page-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  margin-top: 5px;
  background: #94a3b8;
}

.klm-activity-page-item.unread .klm-activity-page-dot {
  background: #fb7185;
  box-shadow: 0 0 16px rgba(251, 113, 133, .6);
}

.klm-activity-page-item strong {
  display: block;
  font-weight: 900;
}

.klm-activity-page-item p {
  margin: 5px 0;
  color: #64748b;
  font-weight: 700;
}

.klm-activity-page-item time {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.klm-activity-empty-state {
  padding: 28px;
  text-align: center;
  color: #94a3b8;
}

html[data-theme="dark"] .klm-activity-page {
  color: #e5e7eb;
}

html[data-theme="dark"] .klm-activity-page-hero,
html[data-theme="dark"] .klm-activity-page-item {
  background: rgba(15, 23, 42, .72);
  border-color: rgba(148, 163, 184, .18);
}

html[data-theme="dark"] .klm-activity-page-item.unread {
  background: rgba(76, 5, 25, .48);
  border-color: rgba(251, 113, 133, .35);
}

@media (max-width: 720px) {
  .klm-activity-page-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .klm-activity-stats span {
    flex: 1;
  }
}

/* KLM Activity Center - ultra compact read rows */
.klm-activity-list .klm-activity-item.read {
  grid-template-columns: 5px minmax(0, 1fr) !important;
  gap: 7px !important;
  min-height: 0 !important;
  padding: 5px 9px !important;
  margin: 0 0 3px !important;
  border-radius: 10px !important;
  align-items: center !important;
}

.klm-activity-list .klm-activity-item.read .klm-activity-dot {
  width: 5px !important;
  height: 5px !important;
  margin: 0 !important;
}

.klm-activity-list .klm-activity-item.read div {
  min-width: 0 !important;
  line-height: 1 !important;
}

.klm-activity-list .klm-activity-item.read b {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.08 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.klm-activity-list .klm-activity-item.read p,
.klm-activity-list .klm-activity-item.read time {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* KLM Ticket typography - match Activity Log premium font */
.ticket-dashboard-wrapper,
.ticket-dashboard-wrapper *,
.ticket-detail,
.ticket-detail *,
#ticketInfo,
#ticketInfo *,
#ticketThread,
#ticketThread *,
.thread-entry,
.thread-entry *,
.client-thread-entry,
.client-thread-entry *,
.ticket-view-header,
.ticket-view-header *,
.ticket-info-grid,
.ticket-info-grid *,
.ticket-title-block,
.ticket-title-block *,
.ticket-list,
.ticket-list *,
#ticketTable,
#ticketTable *,
#tickets,
#tickets *,
.ticket-detail-main,
.ticket-detail-main *,
.klm-thread,
.klm-thread *,
.klm-ticket-chat,
.klm-ticket-chat *,
.klm-ticket-action-btn,
.klm-ticket-info-toggle,
form[action*="tickets.php"] textarea,
form[action*="tickets.php"] input,
form[action*="tickets.php"] select,
form[action*="tickets.php"] button {
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  letter-spacing: -0.015em;
}

.ticket-dashboard-wrapper h1,
.ticket-dashboard-wrapper h2,
.ticket-dashboard-wrapper h3,
.ticket-view-header h1,
.ticket-view-header h2,
.ticket-title-block,
.ticket-title-block * {
  letter-spacing: -0.04em !important;
  font-weight: 800;
}

.thread-entry .body,
.client-thread-entry .body,
.thread-entry p,
.client-thread-entry p,
#ticketThread .message,
#ticketThread .thread-body,
#ticketThread .thread-entry-body {
  font-weight: 600;
  line-height: 1.58;
}

/* KLM Ticket typography weight correction - comments must stay readable, not bold */
.thread-entry .body,
.client-thread-entry .body,
.thread-entry .body *,
.client-thread-entry .body *,
#ticketThread .message,
#ticketThread .message *,
#ticketThread .thread-body,
#ticketThread .thread-body *,
#ticketThread .thread-entry-body,
#ticketThread .thread-entry-body *,
#ticketThread .text,
#ticketThread .text *,
#ticketThread .faded,
#ticketThread p,
#ticketThread li,
#ticketThread td,
#ticketThread span:not(.label):not(.badge):not(.role-badge):not(.klm-trans-label) {
  font-weight: 400 !important;
  letter-spacing: -0.006em !important;
  line-height: 1.58;
}

.thread-entry strong,
.client-thread-entry strong,
#ticketThread strong,
#ticketThread b {
  font-weight: 700 !important;
}

.ticket-dashboard-wrapper,
.ticket-detail,
#ticketInfo,
#ticketThread,
.ticket-list,
#ticketTable,
#tickets {
  font-weight: 400;
}

/* KLM Typography icon-font restore: keep new text font, restore legacy icons */
i[class^="icon-"],
i[class*=" icon-"],
span[class^="icon-"],
span[class*=" icon-"],
a[class^="icon-"],
a[class*=" icon-"],
button[class^="icon-"],
button[class*=" icon-"],
[class^="icon-"]::before,
[class*=" icon-"]::before,
.icon-print,
.icon-edit,
.icon-collapse,
.icon-comment,
.icon-comments,
.icon-tag,
.icon-flag,
.icon-warning-sign,
.icon-info-sign,
.icon-chevron-up,
.icon-chevron-down,
.icon-time,
.icon-user,
.icon-envelope,
.icon-phone,
.icon-ticket,
.icon-pencil,
.icon-remove,
.icon-ok,
.icon-cog,
.icon-home,
.icon-list,
.fa,
.fas,
.far,
.fab,
.fa::before,
.fas::before,
.far::before,
.fab::before {
  font-family: FontAwesome, 'Font Awesome 5 Free', 'Font Awesome 6 Free' !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fas,
.fa-solid,
.fas::before,
.fa-solid::before {
  font-weight: 900 !important;
}

.far,
.fa-regular,
.far::before,
.fa-regular::before {
  font-weight: 400 !important;
}

/* Do not force icon font on inline SVGs */
svg,
svg * {
  font-family: inherit !important;
}

/* KLM Status Verification - dark mode readable text colors */
.klm-action-radios-container label>div>span:first-child {
  color: var(--klm-status-color, #e5e7eb) !important;
}

.klm-action-radios-container label>div>span[style*="color:#16a34a"] {
  --klm-status-color: #86efac;
}

.klm-action-radios-container label>div>span[style*="color:#ea580c"] {
  --klm-status-color: #fdba74;
}

.klm-action-radios-container label>div>span[style*="color:#dc2626"] {
  --klm-status-color: #fca5a5;
}

.klm-action-radios-container label>div>span[style*="color:#9333ea"] {
  --klm-status-color: #d8b4fe;
}

.klm-action-radios-container label>div>span:nth-child(2) {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
}

.klm-action-radios-container strong {
  color: #e5e7eb !important;
}

html[data-theme="light"] .klm-action-radios-container label>div>span[style*="color:#16a34a"] {
  --klm-status-color: #15803d;
}

html[data-theme="light"] .klm-action-radios-container label>div>span[style*="color:#ea580c"] {
  --klm-status-color: #c2410c;
}

html[data-theme="light"] .klm-action-radios-container label>div>span[style*="color:#dc2626"] {
  --klm-status-color: #dc2626;
}

html[data-theme="light"] .klm-action-radios-container label>div>span[style*="color:#9333ea"] {
  --klm-status-color: #7e22ce;
}

html[data-theme="light"] .klm-action-radios-container label>div>span:nth-child(2) {
  color: #64748b !important;
}

html[data-theme="light"] .klm-action-radios-container strong {
  color: #0f172a !important;
}

/* KLM Digital Print Loading */
#klmPrintLoadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: none;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(14, 165, 233, .22), transparent 32%), rgba(2, 6, 23, .82);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
}

#klmPrintLoadingOverlay.active {
  display: grid;
}

.klm-print-loader-card {
  width: min(460px, calc(100vw - 36px));
  padding: 28px;
  border-radius: 28px;
  color: #e0f2fe;
  background: linear-gradient(145deg, rgba(15, 23, 42, .94), rgba(2, 6, 23, .88));
  border: 1px solid rgba(125, 211, 252, .28);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .52), 0 0 60px rgba(14, 165, 233, .18);
  text-align: center;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

.klm-print-loader-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #38bdf8;
  background: rgba(14, 165, 233, .13);
  border: 1px solid rgba(56, 189, 248, .34);
  box-shadow: inset 0 0 24px rgba(14, 165, 233, .16), 0 0 42px rgba(14, 165, 233, .22);
  animation: klmPrintPulse 1.2s ease-in-out infinite;
}

.klm-print-loader-icon svg {
  width: 38px;
  height: 38px;
  fill: currentColor;
}

.klm-print-loader-card h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.klm-print-loader-card p {
  margin: 8px 0 18px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
}

.klm-print-loader-bar {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, .9);
  border: 1px solid rgba(125, 211, 252, .18);
}

.klm-print-loader-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #38bdf8, #fb7185, transparent);
  animation: klmPrintScan 1.05s ease-in-out infinite;
}

.klm-print-loader-code {
  margin-top: 16px;
  color: #67e8f9;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  opacity: .86;
}

@keyframes klmPrintScan {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(260%);
  }
}

@keyframes klmPrintPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

/* KLM Cancelled status pill - distinct purple/red, not green */
.status-pill.status-cancelled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a21caf !important;
  background: linear-gradient(135deg, #fae8ff 0%, #fce7f3 100%) !important;
  border: 1px solid rgba(192, 38, 211, .35) !important;
  box-shadow: 0 6px 18px rgba(192, 38, 211, .14);
}

.status-pill.status-cancelled svg {
  width: 14px;
  height: 14px;
  fill: rgba(192, 38, 211, .16);
  stroke: #c026d3;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-pill.status-cancelled span {
  color: #86198f !important;
  font-weight: 800;
}

html[data-theme="dark"] .status-pill.status-cancelled,
.dark .status-pill.status-cancelled,
body.dark .status-pill.status-cancelled {
  color: #f0abfc !important;
  background: linear-gradient(135deg, rgba(88, 28, 135, .55), rgba(131, 24, 67, .42)) !important;
  border-color: rgba(240, 171, 252, .34) !important;
  box-shadow: 0 8px 24px rgba(192, 38, 211, .2);
}

html[data-theme="dark"] .status-pill.status-cancelled svg,
.dark .status-pill.status-cancelled svg,
body.dark .status-pill.status-cancelled svg {
  fill: rgba(240, 171, 252, .18);
  stroke: #f0abfc;
}

html[data-theme="dark"] .status-pill.status-cancelled span,
.dark .status-pill.status-cancelled span,
body.dark .status-pill.status-cancelled span {
  color: #f5d0fe !important;
}

/* KLM Activity Center - View all button matches Mark read */
.klm-activity-more {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: 12px;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(56, 189, 248, .38) !important;
  background: rgba(14, 165, 233, .12) !important;
  color: #fb7185 !important;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em;
  text-decoration: none !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .06) inset, 0 10px 26px rgba(14, 165, 233, .10) !important;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease !important;
}

.klm-activity-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-130%);
  transition: transform .45s ease;
}

.klm-activity-more:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, #38bdf8, #2563eb) !important;
  color: #ffffff !important;
  border-color: rgba(125, 211, 252, .9) !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .18), 0 12px 30px rgba(37, 99, 235, .45) !important;
}

.klm-activity-more:hover::before {
  transform: translateX(130%);
}

.klm-activity-more:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .22), 0 10px 24px rgba(34, 197, 94, .35) !important;
}

/* KLM AI Recap Modal - Phase 1 */
.klm-ai-recap-modal {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(10px);
}

.klm-ai-recap-card {
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .94));
  border: 1px solid rgba(125, 211, 252, .28);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  color: #e2e8f0;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

.klm-ai-recap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.klm-ai-recap-head h3 {
  margin: 0;
  font-size: 22px;
}

.klm-ai-recap-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(15, 23, 42, .55);
  color: #e2e8f0;
  font-size: 22px;
  cursor: pointer;
}

.klm-ai-recap-body {
  padding: 22px;
  display: grid;
  gap: 16px;
}

.klm-ai-lang-card {
  padding: 18px;
  border-radius: 20px;
  background: rgba(15, 23, 42, .64);
  border: 1px solid rgba(125, 211, 252, .18);
}

.klm-ai-lang-card h4 {
  margin: 0 0 10px;
  color: #67e8f9;
}

.klm-ai-lang-card p {
  margin: 6px 0;
  color: #cbd5e1;
}

.klm-ai-lang-card ul {
  margin: 8px 0 12px 20px;
  color: #e2e8f0;
}

.klm-ai-recap-badge,
.klm-ai-loading,
.klm-ai-error {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14, 165, 233, .14);
  border: 1px solid rgba(56, 189, 248, .24);
  color: #bae6fd;
  font-weight: 800;
}

.klm-ai-error {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(248, 113, 113, .32);
  color: #fecaca;
}

.klm-ai-recap-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 0 22px 22px;
}

.klm-ai-recap-btn {
  white-space: nowrap;
}

/* KLM AI Recap compact display refinement */
.klm-ai-recap-card {
  width: min(760px, 94vw) !important;
  border-radius: 22px !important;
}

.klm-ai-recap-head {
  padding: 14px 18px !important;
}

.klm-ai-recap-head h3 {
  font-size: 18px !important;
  letter-spacing: -.02em;
}

.klm-ai-recap-body {
  padding: 14px 16px !important;
  gap: 10px !important;
}

.klm-ai-recap-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.klm-ai-recap-badge {
  padding: 7px 10px !important;
  border-radius: 999px !important;
  font-size: 11px;
  line-height: 1;
}

.klm-ai-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .68);
  border: 1px solid rgba(125, 211, 252, .16);
}

.klm-ai-tabs button {
  min-width: 42px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.klm-ai-tabs button.active {
  color: #082f49;
  background: linear-gradient(135deg, #67e8f9, #38bdf8);
  box-shadow: 0 6px 16px rgba(56, 189, 248, .28);
}

.klm-ai-lang-card {
  display: none;
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .78), rgba(30, 41, 59, .58)) !important;
}

.klm-ai-lang-card.active {
  display: block;
  animation: klmAiFadeIn .18s ease;
}

@keyframes klmAiFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.klm-ai-mainline {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.klm-ai-mainline strong,
.klm-ai-mainline em {
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
}

.klm-ai-mainline.muted em {
  color: #cbd5e1;
}

.klm-ai-tag {
  display: inline-flex;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(14, 165, 233, .14);
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.klm-ai-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.klm-ai-two-col b {
  display: block;
  margin-bottom: 6px;
  color: #bae6fd;
  font-size: 12px;
}

.klm-ai-mini-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid;
  gap: 5px;
}

.klm-ai-mini-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(2, 6, 23, .24);
}

.klm-ai-mini-list li span {
  color: #38bdf8;
  font-weight: 900;
}

.klm-ai-empty {
  display: inline-block;
  color: #94a3b8;
  font-size: 12px;
  padding: 6px 0;
}

.klm-ai-recap-actions {
  padding: 0 16px 16px !important;
}

@media (max-width: 720px) {
  .klm-ai-two-col {
    grid-template-columns: 1fr;
  }

  .klm-ai-mainline {
    grid-template-columns: 1fr;
  }

  .klm-ai-recap-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

/* KLM AI Recap next-actions block */
.klm-ai-next-actions {
  margin-top: 12px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(14, 165, 233, .10));
  border: 1px solid rgba(34, 197, 94, .22);
}

.klm-ai-next-actions>b {
  display: block;
  margin-bottom: 7px;
  color: #bbf7d0;
  font-size: 12px;
}

.klm-ai-next-actions .klm-ai-mini-list li {
  background: rgba(6, 78, 59, .18);
}

.klm-ai-next-actions .klm-ai-mini-list li span {
  color: #86efac;
}

/* KLM AI Recap ownership + completion */
.klm-ai-top-completion,
.klm-ai-completion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid transparent;
}

.klm-ai-completion {
  width: fit-content;
  margin-bottom: 10px;
}

.klm-ai-completion span {
  opacity: .84;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.klm-ai-top-completion.new,
.klm-ai-completion.new {
  color: #fecaca;
  background: rgba(239, 68, 68, .15);
  border-color: rgba(248, 113, 113, .34);
}

.klm-ai-top-completion.progress,
.klm-ai-completion.progress {
  color: #bae6fd;
  background: rgba(14, 165, 233, .18);
  border-color: rgba(56, 189, 248, .36);
}

.klm-ai-top-completion.review,
.klm-ai-completion.review {
  color: #fed7aa;
  background: rgba(249, 115, 22, .18);
  border-color: rgba(251, 146, 60, .36);
}

.klm-ai-top-completion.close,
.klm-ai-completion.close {
  color: #bbf7d0;
  background: rgba(34, 197, 94, .15);
  border-color: rgba(74, 222, 128, .30);
}

.klm-ai-top-completion.done,
.klm-ai-completion.done {
  color: #86efac;
  background: rgba(22, 163, 74, .22);
  border-color: rgba(34, 197, 94, .42);
}

.klm-ai-top-completion.cancelled,
.klm-ai-completion.cancelled {
  color: #f5d0fe;
  background: rgba(168, 85, 247, .18);
  border-color: rgba(216, 180, 254, .34);
}

.klm-ai-owner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.klm-ai-owner-grid div {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(2, 6, 23, .24);
  border: 1px solid rgba(148, 163, 184, .12);
}

.klm-ai-owner-grid span {
  display: block;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.klm-ai-owner-grid b {
  color: #e0f2fe;
  font-size: 12px;
  line-height: 1.3;
}

.klm-ai-owner-grid em {
  color: #67e8f9;
  font-style: normal;
}

@media (max-width: 720px) {
  .klm-ai-owner-grid {
    grid-template-columns: 1fr;
  }
}

/* KLM AI Recap clickable highlighted people */
.klm-ai-person {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7dd3fc !important;
  font-weight: 900;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(56, 189, 248, .45);
  padding: 0 2px 1px;
}

.klm-ai-person::before {
  content: "👤";
  font-size: 10px;
  opacity: .9;
}

.klm-ai-person:hover {
  color: #ffffff !important;
  border-bottom-color: #38bdf8;
  text-shadow: 0 0 14px rgba(56, 189, 248, .55);
}

/* KLM AI Recap overlap/empty-state fixes */
.klm-ai-owner-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.klm-ai-owner-grid div {
  min-width: 0;
  overflow: hidden;
}

.klm-ai-owner-grid b {
  display: block;
  min-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klm-ai-person {
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klm-ai-person::before {
  content: "" !important;
  display: none !important;
}

.klm-ai-done-text {
  color: #86efac;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(22, 163, 74, .12);
  border: 1px solid rgba(34, 197, 94, .20);
}

/* KLM AI Recap animated loader */
.klm-ai-loading-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  text-align: center;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(56, 189, 248, .16), rgba(15, 23, 42, .18) 58%);
}

.klm-ai-orbit {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(56, 189, 248, .18), rgba(34, 197, 94, .12));
  border: 1px solid rgba(125, 211, 252, .28);
  box-shadow: 0 0 34px rgba(56, 189, 248, .25), inset 0 0 22px rgba(125, 211, 252, .12);
}

.klm-ai-orbit::before {
  content: "✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #67e8f9;
  font-size: 26px;
  animation: klmAiPulse 1.4s ease-in-out infinite;
}

.klm-ai-orbit span,
.klm-ai-orbit i,
.klm-ai-orbit b {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #38bdf8;
  animation: klmAiSpin 1.1s linear infinite;
}

.klm-ai-orbit i {
  inset: 4px;
  border-top-color: #86efac;
  animation-duration: 1.7s;
  animation-direction: reverse;
}

.klm-ai-orbit b {
  inset: 13px;
  border-top-color: #fbbf24;
  animation-duration: 1.25s;
}

.klm-ai-loading-icon strong {
  color: #e0f2fe;
  font-size: 14px;
  font-weight: 900;
}

.klm-ai-loading-icon em {
  max-width: 460px;
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

@keyframes klmAiSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes klmAiPulse {

  0%,
  100% {
    transform: scale(.92);
    opacity: .72;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* KLM AI Recap loader text/font fix */
.klm-ai-orbit::before {
  content: "" !important;
  display: none !important;
}

.klm-ai-orbit>em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #67e8f9;
  font-size: 18px;
  font-weight: 950;
  font-style: normal;
  letter-spacing: -.04em;
  text-shadow: 0 0 18px rgba(56, 189, 248, .7);
  animation: klmAiPulse 1.4s ease-in-out infinite;
}

.klm-ai-loading-icon small {
  max-width: 460px;
  color: #94a3b8;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

/* KLM AI Recap empty suggestion state */
.klm-ai-empty-suggestion {
  color: #cbd5e1;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .36);
  border: 1px dashed rgba(148, 163, 184, .22);
}

/* KLM AI Recap bullet layout hardening */
.klm-ai-mini-list li {
  grid-template-columns: 12px minmax(0, 1fr) !important;
  align-items: start !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

.klm-ai-mini-list li span:first-child {
  display: inline-block !important;
  width: 12px !important;
  min-width: 12px !important;
  line-height: 1.35 !important;
}

/* KLM unified ticket typography - restore Outfit across ticket + AI recap */
:root {
  --klm-ticket-font: 'Outfit', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body,
#container,
#content,
#ticketTable,
#ticketTable *,
#ticketInfo,
#ticketInfo *,
.ticket-modern-container,
.ticket-modern-container *,
.ticket-detail-container,
.ticket-detail-container *,
.ticket-view,
.ticket-view *,
.ticket-thread,
.ticket-thread *,
.thread-entry,
.thread-entry *,
.message-thread,
.message-thread *,
#reply,
#reply *,
#response,
#response *,
#clientLogin,
#clientLogin *,
.klm-ticket-action-btn,
.klm-ticket-action-btn *,
.klm-ai-recap-modal,
.klm-ai-recap-modal *,
.klm-ai-recap-card,
.klm-ai-recap-card *,
.klm-ai-lang-card,
.klm-ai-lang-card *,
.klm-ai-mini-list,
.klm-ai-mini-list *,
.klm-ai-next-actions,
.klm-ai-next-actions * {
  font-family: var(--klm-ticket-font) !important;
}

.klm-ai-recap-card,
.klm-ai-lang-card,
.klm-ai-mini-list li,
.thread-entry,
.message-thread,
.ticket-thread,
#ticketInfo,
#ticketTable {
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: geometricPrecision;
}

.klm-ai-mini-list li,
.thread-entry,
.thread-body,
.message-body,
.ticket-thread,
.klm-ai-mainline strong,
.klm-ai-mainline em {
  letter-spacing: -0.01em;
}

/* KLM AI Recap bullet emergency layout reset */
.klm-ai-mini-list li {
  display: flex !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.klm-ai-mini-list li>span:first-child {
  flex: 0 0 12px !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  display: inline-block !important;
  line-height: 1.45 !important;
}

.klm-ai-mini-list .klm-ai-person {
  display: inline !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  border-bottom-width: 1px !important;
  padding: 0 !important;
}

.klm-ai-mini-list .klm-ai-person::before {
  content: "" !important;
  display: none !important;
}

/* KLM AI Recap: remove label span boxed background */
.klm-ai-tag,
.klm-ai-owner-grid span,
.klm-ai-completion span {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* KLM AI Recap suggestions owner width */
.klm-ai-next-actions .klm-ai-mini-list li {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.klm-ai-next-actions .klm-ai-mini-list li>span:first-child {
  width: 12px !important;
  min-width: 12px !important;
  grid-column: 1;
}

.klm-ai-next-actions .klm-ai-person {
  display: inline-block !important;
  max-width: 108px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.25 !important;
}

/* KLM AI Recap suggestions single-line flow */
.klm-ai-next-actions .klm-ai-mini-list li {
  display: block !important;
  grid-template-columns: none !important;
  white-space: normal !important;
  line-height: 1.45 !important;
}

.klm-ai-next-actions .klm-ai-mini-list li>span:first-child {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 8px !important;
}

.klm-ai-next-actions .klm-ai-person {
  display: inline !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  border-bottom-width: 1px !important;
  padding: 0 !important;
}

/* KLM AI Recap action buttons polish */
.klm-ai-recap-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
}

.klm-ai-recap-actions .button {
  position: relative;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 9px 16px !important;
  min-height: 38px;
  font-weight: 900 !important;
  letter-spacing: -.01em;
  color: #ecfeff !important;
  background: linear-gradient(135deg, rgba(14, 165, 233, .95), rgba(6, 182, 212, .88)) !important;
  box-shadow: 0 10px 24px rgba(8, 145, 178, .24), inset 0 1px 0 rgba(255, 255, 255, .26) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.klm-ai-recap-actions .button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 14px 30px rgba(8, 145, 178, .34), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}

#klmAiRecapCopy::before {
  content: "⧉";
  margin-right: 7px;
  font-weight: 900;
}

#klmAiRecapRefresh {
  color: #fff7ed !important;
  background: linear-gradient(135deg, #f97316, #f59e0b 52%, #84cc16) !important;
  box-shadow: 0 12px 28px rgba(249, 115, 22, .32), 0 0 0 0 rgba(251, 191, 36, .38), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}

#klmAiRecapRefresh::before {
  content: "↻";
  margin-right: 7px;
  font-weight: 950;
}

#klmAiRecapRefresh[style*="inline-block"] {
  animation: klmAiReloadRemind 1.55s ease-in-out infinite;
}

@keyframes klmAiReloadRemind {

  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 12px 28px rgba(249, 115, 22, .32), 0 0 0 0 rgba(251, 191, 36, .42), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
  }

  45% {
    transform: translateY(-2px) scale(1.035);
    box-shadow: 0 16px 34px rgba(249, 115, 22, .46), 0 0 0 8px rgba(251, 191, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .36) !important;
  }

  70% {
    transform: translateY(0) scale(1.01);
    box-shadow: 0 14px 30px rgba(132, 204, 22, .34), 0 0 0 14px rgba(132, 204, 22, 0), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  }
}

/* KLM AI Recap icon-only buttons */
.klm-ai-recap-actions .button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.klm-ai-recap-actions .button svg {
  display: block;
  color: currentColor;
  flex: 0 0 auto;
}

#klmAiRecapCopy::before,
#klmAiRecapRefresh::before {
  content: none !important;
  display: none !important;
}

#klmAiRecapRefresh {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}

/* KLM AI Recap reload visibility + strong reminder */
#klmAiRecapRefresh {
  display: none !important;
}

#klmAiRecapRefresh.is-visible {
  display: inline-flex !important;
  animation: klmAiReloadStrongRemind 1.05s ease-in-out infinite, klmAiReloadSpinHint 2.8s linear infinite;
}

#klmAiRecapRefresh.is-visible svg {
  animation: klmAiReloadIconSpin 1.25s ease-in-out infinite;
}

#klmAiRecapRefresh.is-visible::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 2px solid rgba(251, 191, 36, .65);
  animation: klmAiReloadRing 1.05s ease-out infinite;
  pointer-events: none;
}

@keyframes klmAiReloadStrongRemind {

  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  35% {
    transform: translateY(-4px) scale(1.10);
    filter: brightness(1.22);
  }

  65% {
    transform: translateY(0) scale(1.04);
    filter: brightness(1.08);
  }
}

@keyframes klmAiReloadIconSpin {
  0% {
    transform: rotate(0deg);
  }

  45% {
    transform: rotate(160deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes klmAiReloadRing {
  0% {
    opacity: .95;
    transform: scale(.92);
  }

  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes klmAiReloadSpinHint {

  0%,
  100% {
    box-shadow: 0 12px 28px rgba(249, 115, 22, .36), 0 0 0 0 rgba(251, 191, 36, .38), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
  }

  50% {
    box-shadow: 0 18px 38px rgba(249, 115, 22, .58), 0 0 0 10px rgba(251, 191, 36, .12), inset 0 1px 0 rgba(255, 255, 255, .36) !important;
  }
}

/* KLM AI Recap all mini lists inline flow */
.klm-ai-mini-list li {
  display: block !important;
  grid-template-columns: none !important;
  white-space: normal !important;
  line-height: 1.45 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.klm-ai-mini-list li>span:first-child {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-right: 8px !important;
}

/* KLM AI Recap inline profile links inside mini lists */
.klm-ai-mini-list .klm-ai-person,
.klm-ai-next-actions .klm-ai-person {
  display: inline !important;
  color: #67e8f9 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(103, 232, 249, .75) !important;
  padding: 0 !important;
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  vertical-align: baseline !important;
}

.klm-ai-mini-list .klm-ai-person:hover,
.klm-ai-next-actions .klm-ai-person:hover {
  color: #a5f3fc !important;
  border-bottom-color: #a5f3fc !important;
}

.klm-ai-mini-list .klm-ai-person::before,
.klm-ai-next-actions .klm-ai-person::before {
  content: none !important;
  display: none !important;
}

/* KLM AI Recap in ticket list */
.col-status {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.klm-list-ai-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 26px;
  min-width: 44px;
  padding: 0 8px;
  border: 1px solid rgba(103, 232, 249, .36);
  border-radius: 999px;
  color: #e0f2fe;
  background: linear-gradient(135deg, rgba(15, 23, 42, .95), rgba(8, 47, 73, .86));
  box-shadow: 0 8px 18px rgba(8, 145, 178, .18), inset 0 1px 0 rgba(255, 255, 255, .12);
  cursor: pointer;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.klm-list-ai-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(103, 232, 249, .72);
  box-shadow: 0 12px 26px rgba(8, 145, 178, .28), 0 0 0 4px rgba(103, 232, 249, .08), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.klm-list-ai-btn span {
  font-size: 13px;
}

.klm-list-ai-btn b {
  font-size: 12px;
  letter-spacing: .02em;
  transform-origin: 50% 60%;
  animation: klmAiVolumePulse 5.8s ease-in-out infinite;
}

@keyframes klmAiVolumePulse {

  0%,
  8%,
  16%,
  22%,
  100% {
    transform: scale(1);
    text-shadow: none;
  }

  4% {
    transform: scale(1.24);
    text-shadow: 0 0 8px rgba(103, 232, 249, .75);
  }

  12% {
    transform: scale(.88);
  }

  18% {
    transform: scale(1.18);
    text-shadow: 0 0 10px rgba(251, 191, 36, .68);
  }

  24%,
  99% {
    transform: scale(1);
    text-shadow: none;
  }
}

.klm-list-ai-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 40;
  width: 280px;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(103, 232, 249, .28);
  color: #e5f9ff;
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.98);
  transition: opacity .15s ease, transform .15s ease;
}

.klm-list-ai-btn:hover .klm-list-ai-tip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.klm-list-ai-tip::before {
  content: "AI quick recap";
  display: block;
  margin-bottom: 5px;
  color: #67e8f9;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* KLM AI Recap list actions column isolation */
.klm-tickets-table .col-actions {
  text-align: center !important;
  vertical-align: middle !important;
}

.klm-tickets-table td.col-actions {
  position: relative;
  overflow: visible !important;
}

.klm-tickets-table .col-status {
  display: table-cell !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.klm-tickets-table td.col-status .status-pill {
  margin: 0 auto;
}

/* KLM ticket-list AI recap modal aliases */
#klmListAiRecapRefresh {
  display: none !important;
}

#klmListAiRecapRefresh.is-visible {
  display: inline-flex !important;
  animation: klmAiReloadStrongRemind 1.05s ease-in-out infinite, klmAiReloadSpinHint 2.8s linear infinite;
}

#klmListAiRecapRefresh.is-visible svg {
  animation: klmAiReloadIconSpin 1.25s ease-in-out infinite;
}

#klmListAiRecapRefresh.is-visible::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 2px solid rgba(251, 191, 36, .65);
  animation: klmAiReloadRing 1.05s ease-out infinite;
  pointer-events: none;
}

#klmListAiRecapCopy::before,
#klmListAiRecapRefresh::before {
  content: none !important;
  display: none !important;
}

/* KLM AI list SVG icon fix */
.klm-list-ai-btn .klm-list-ai-spark {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: rgba(251, 191, 36, .28);
  stroke: #fbbf24;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, .35));
}

.klm-list-ai-btn::before,
.klm-list-ai-btn::after {
  content: "✦";
  position: absolute;
  color: #fde68a;
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 0 8px rgba(251, 191, 36, .85);
}

.klm-list-ai-btn::before {
  left: 5px;
  top: 1px;
  animation: klmAiStarA 5.8s ease-in-out infinite;
}

.klm-list-ai-btn::after {
  right: 7px;
  bottom: 2px;
  font-size: 7px;
  animation: klmAiStarB 5.8s ease-in-out infinite;
}

@keyframes klmAiStarA {

  0%,
  34%,
  64%,
  100% {
    opacity: 0;
    transform: scale(.25) rotate(0deg);
  }

  39% {
    opacity: 1;
    transform: scale(1.25) rotate(35deg);
  }

  46% {
    opacity: .25;
    transform: scale(.65) rotate(80deg);
  }

  53% {
    opacity: .95;
    transform: scale(1.05) rotate(135deg);
  }

  60% {
    opacity: 0;
    transform: scale(.3) rotate(180deg);
  }
}

@keyframes klmAiStarB {

  0%,
  37%,
  67%,
  100% {
    opacity: 0;
    transform: scale(.25) rotate(0deg);
  }

  42% {
    opacity: .9;
    transform: scale(1.15) rotate(-45deg);
  }

  50% {
    opacity: .2;
    transform: scale(.55) rotate(-90deg);
  }

  57% {
    opacity: 1;
    transform: scale(1) rotate(-150deg);
  }

  63% {
    opacity: 0;
    transform: scale(.3) rotate(-210deg);
  }
}

.klm-list-ai-btn span {
  display: none !important;
}

/* KLM ticket-list AI modal: inherit detail modal sizing, no horizontal overflow */
#klmListAiRecapModal .klm-ai-recap-card {
  width: min(760px, 94vw) !important;
  max-width: 94vw !important;
  overflow-x: hidden !important;
}

#klmListAiRecapModal .klm-ai-recap-body,
#klmListAiRecapModal .klm-ai-lang-card,
#klmListAiRecapModal .klm-ai-mini-list,
#klmListAiRecapModal .klm-ai-mini-list li,
#klmListAiRecapModal .klm-ai-mainline,
#klmListAiRecapModal .klm-ai-next-actions {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

#klmListAiRecapModal .klm-ai-mini-list li,
#klmListAiRecapModal .klm-ai-mainline strong,
#klmListAiRecapModal .klm-ai-mainline em,
#klmListAiRecapModal .klm-ai-next-actions,
#klmListAiRecapModal .klm-ai-next-actions * {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

#klmListAiRecapModal .klm-ai-recap-head h3::before {
  content: "AI ";
  color: #67e8f9;
}

#klmListAiRecapModal .klm-ai-recap-head h3 {
  font-size: 0 !important;
}

#klmListAiRecapModal .klm-ai-recap-head h3::after {
  content: "Recap";
  font-size: 18px;
  color: #e2e8f0;
}

#klmListAiRecapModal .klm-ai-recap-close {
  font-size: 0 !important;
}

#klmListAiRecapModal .klm-ai-recap-close::before {
  content: "×";
  font-size: 22px;
}

/* KLM AI Recap ticket title floating strip */
.klm-ai-ticket-strip {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 10px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(8, 47, 73, .62), rgba(15, 23, 42, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 28px rgba(8, 47, 73, .18);
}

.klm-ai-ticket-strip>div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.klm-ai-ticket-strip span {
  flex: 0 0 auto;
  color: #67e8f9;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.klm-ai-ticket-strip strong {
  min-width: 0;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.klm-ai-ticket-strip>div:first-child strong {
  color: #7dd3fc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .klm-ai-ticket-strip {
    grid-template-columns: 1fr;
  }

  .klm-ai-ticket-strip strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.klm-agent-view-banner {
  margin: 12px auto 0;
  max-width: 1180px;
  padding: 10px 14px;
  border: 1px solid rgba(251, 191, 36, .45);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(120, 53, 15, .92), rgba(15, 23, 42, .94));
  color: #fde68a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18)
}

.klm-agent-view-banner strong {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 10px;
  color: #fbbf24
}

.klm-agent-view-banner span {
  color: #fff7ed;
  font-weight: 700
}

.klm-open-client-view i {
  color: #0ea5e9 !important
}

/* KLM Incident KB Modal - Phase 2 */
.klm-incident-kb-btn {
  white-space: nowrap;
  background: linear-gradient(135deg, #7c3aed, #0ea5e9) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 26px rgba(124, 58, 237, .28) !important;
}

.klm-incident-kb-card {
  width: min(1120px, 96vw) !important;
}

.klm-kb-status {
  display: inline-flex;
  width: fit-content;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(96, 165, 250, .32);
  font-size: 12px;
  font-weight: 900;
}

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

.klm-kb-grid label,
.klm-kb-step {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  color: #bae6fd;
  background: rgba(2, 6, 23, .28);
  border: 1px solid rgba(125, 211, 252, .16);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.klm-kb-grid textarea,
.klm-kb-grid select {
  width: 100%;
  min-height: 78px;
  resize: vertical;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .76);
  color: #f8fafc;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
}

.klm-kb-grid select {
  min-height: 38px;
}

.klm-kb-steps {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.klm-kb-steps h4 {
  margin: 4px 0 0;
  color: #e0f2fe;
}

.klm-kb-step {
  grid-template-columns: 46px repeat(3, 1fr);
  align-items: start;
}

.klm-kb-step b {
  color: #67e8f9;
  font-size: 13px;
  padding-top: 10px;
}

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

  .klm-kb-step {
    grid-template-columns: 1fr;
  }
}


/* KLM: Redactor composer icon font restore */
#klm-reply-composer .redactor-toolbar [class^="re-icon-"],
#klm-reply-composer .redactor-toolbar [class*=" re-icon-"],
.reply-box .redactor-toolbar [class^="re-icon-"],
.reply-box .redactor-toolbar [class*=" re-icon-"] {
  font-family: 'Redactor' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#klm-reply-composer .redactor-toolbar a,
.reply-box .redactor-toolbar a {
  min-width: 34px;
  min-height: 32px;
}

/* KLM Tickets Instant Dashboard Loading */
#klmTicketsDashboardRoot {
  position: relative;
}

#klmTicketsDashboardRoot.is-loading .tickets-topbar,
#klmTicketsDashboardRoot.is-loading .tickets-table-card,
#klmTicketsDashboardRoot.is-loading .tickets-footer {
  opacity: .62;
  transition: opacity .16s ease;
}

#klmTicketsDashboardRoot.is-loading .tickets-table-card {
  position: relative;
  min-height: 180px;
  pointer-events: none;
}

.klm-ticket-skeleton {
  position: absolute;
  inset: 12px;
  z-index: 6;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.klm-ticket-skeleton span {
  display: block;
  min-height: 54px;
  border-radius: 14px;
  background: linear-gradient(90deg,
    rgba(148, 163, 184, .10) 0%,
    rgba(148, 163, 184, .26) 45%,
    rgba(148, 163, 184, .10) 90%);
  background-size: 220% 100%;
  animation: klmSkeletonSweep 1.05s ease-in-out infinite;
  border: 1px solid rgba(148, 163, 184, .14);
}

html[data-theme="dark"] .klm-ticket-skeleton span {
  background: linear-gradient(90deg,
    rgba(15, 23, 42, .34) 0%,
    rgba(51, 65, 85, .62) 45%,
    rgba(15, 23, 42, .34) 90%);
  border-color: rgba(148, 163, 184, .16);
}

@keyframes klmSkeletonSweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* KLM Mobile Response Optimization - dashboard, header, ticket cards */
@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  #container,
  #content,
  .section,
  .ticket-modern-container,
  .ticket-dashboard-wrapper,
  .klm-tickets-dashboard,
  .tickets-table-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  #content {
    padding: 10px !important;
  }

  .klm-topbar {
    position: sticky;
    min-height: 58px;
    height: auto;
    padding: 8px 10px !important;
    gap: 8px;
  }

  .topbar-left {
    min-width: 0;
    gap: 8px;
    flex: 1 1 auto;
  }

  .topbar-logo img {
    max-height: 34px !important;
  }

  .title-group {
    min-width: 0;
  }

  .topbar-title {
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48vw;
  }

  .topbar-tagline,
  .topbar-center,
  .quick-access-buttons,
  .lang-pill-wrapper,
  .header-pill-btn.primary {
    display: none !important;
  }

  .topbar-right {
    gap: 8px;
    flex: 0 0 auto;
  }

  .nav-icon-group {
    gap: 6px;
    padding-left: 0;
    border-left: 0;
  }

  .nav-icon-item,
  .theme-toggle-btn,
  .user-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  .user-trigger {
    padding: 2px !important;
  }

  .user-trigger .chevron {
    display: none;
  }

  .ticket-page-head {
    margin: 0 0 10px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .ticket-page-head .head-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .ticket-page-head h1 {
    font-size: 18px !important;
    line-height: 1.15;
  }

  .ticket-page-head p {
    display: none !important;
  }

  .tickets-topbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .tabs-group {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow: visible !important;
    scrollbar-width: none;
  }

  .tabs-group::-webkit-scrollbar {
    display: none;
  }

  .tabs-group .tab-item {
    flex: initial !important;
    min-width: 0 !important;
    min-height: 54px;
    padding: 6px 3px !important;
    border-radius: 12px !important;
    scroll-snap-align: none;
  }

  .tabs-group .tab-status-label {
    display: flex !important;
    justify-content: center;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center;
    gap: 0 !important;
    min-height: 16px;
  }

  .tabs-group .tab-status-label span {
    display: none !important;
  }

  .tabs-group .tab-status-label svg {
    width: 14px !important;
    height: 14px !important;
  }

  .tabs-group .tab-item .tab-count {
    font-size: clamp(17px, 5vw, 24px) !important;
    line-height: .95 !important;
    margin-top: 4px !important;
    letter-spacing: -0.05em;
  }

  .ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1) .tab-status-label {
    display: none !important;
  }

  .ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1) .tab-count {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: .95 !important;
    letter-spacing: -0.06em;
    margin-top: 8px !important;
  }

  .filters-search-column,
  .inline-filters-group,
  .inline-filter-form,
  .filter-select-wrap,
  .search-group,
  .search-form,
  .search-input-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .inline-filter-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .quick-filter-select,
  .search-input-wrap,
  .search-submit-btn {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .search-form {
    display: grid !important;
    grid-template-columns: 1fr 92px;
    gap: 8px;
    align-items: stretch;
  }

  .active-filter-chips {
    display: flex !important;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 2px 2px !important;
    -webkit-overflow-scrolling: touch;
  }

  .filter-chip {
    flex: 0 0 auto;
    max-width: 82vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-scroll-wrapper {
    overflow: visible !important;
  }

  .klm-tickets-table,
  .klm-tickets-table thead,
  .klm-tickets-table tbody,
  .klm-tickets-table tr,
  .klm-tickets-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .klm-tickets-table thead {
    display: none !important;
  }

  .klm-tickets-table tbody {
    display: grid !important;
    gap: 12px;
  }

  .klm-tickets-table tbody tr {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 12px !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 18px !important;
    background: var(--klm-card, #ffffff) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    overflow: hidden;
  }

  html[data-theme="dark"] .klm-tickets-table tbody tr {
    background: linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(2, 6, 23, .86)) !important;
    border-color: rgba(148, 163, 184, .18) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
  }

  .klm-tickets-table td {
    padding: 8px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .klm-tickets-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--klm-text-muted, #64748b);
  }

  .klm-tickets-table .col-id {
    grid-column: 1;
    grid-row: 1;
  }

  .klm-tickets-table .col-status {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .klm-tickets-table .col-status::before {
    text-align: right;
  }

  .klm-tickets-table .col-info {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 10px !important;
  }

  .klm-tickets-table .col-category,
  .klm-tickets-table .col-created,
  .klm-tickets-table .col-requester,
  .klm-tickets-table .col-assignee,
  .klm-tickets-table .col-attach {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(148, 163, 184, .14) !important;
  }

  .ticket-num {
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  .ticket-date-badge {
    width: fit-content !important;
    min-width: 72px;
    padding: 6px 10px !important;
  }

  .klm-list-title-stack,
  .klm-list-title-line,
  .ticket-title {
    font-size: 14px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }

  .ticket-meta-row {
    gap: 6px !important;
    margin-top: 8px;
  }

  .meta-tag,
  .priority-tag,
  .dept-tag {
    max-width: 100%;
    white-space: normal !important;
    line-height: 1.25;
  }

  .requester-block,
  .assignee-block {
    align-items: center;
    gap: 9px;
  }

  .requester-info,
  .assignee-info {
    min-width: 0;
  }

  .requester-name,
  .assignee-name,
  .requester-email,
  .assignee-role {
    max-width: calc(100vw - 92px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .category-block,
  .category-module,
  .category-scope {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .attach-thumbs {
    justify-content: flex-start;
  }

  .attach-thumb,
  .attach-more {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  .status-pill {
    max-width: 100%;
    justify-content: center;
    white-space: normal !important;
    text-align: center;
    line-height: 1.15;
    padding: 6px 8px !important;
    font-size: 10px !important;
  }

  .status-pill svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto;
  }

  .tickets-footer {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px !important;
    text-align: center;
  }

  .table-actions,
  .pagination-wrap,
  .pager-pages {
    justify-content: center !important;
  }

  .rows-per-page-select {
    min-height: 38px !important;
  }

  .empty-state {
    display: block !important;
    text-align: center;
    padding: 28px 12px !important;
  }
}

@media (max-width: 420px) {
  #content {
    padding: 8px !important;
  }

  .tabs-group {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px !important;
  }

  .tabs-group .tab-item {
    min-width: 0 !important;
    min-height: 50px;
    padding: 5px 2px !important;
  }

  .tabs-group .tab-item .tab-count {
    font-size: clamp(15px, 4.8vw, 20px) !important;
  }

  .ticket-dashboard-wrapper .tabs-group .tab-item:nth-child(1) .tab-count {
    font-size: 25px !important;
  }

  .search-form {
    grid-template-columns: 1fr;
  }

  .search-submit-btn {
    width: 100% !important;
  }
}
/* === KLM User Manager Portal (Admin-only) === */
.klm-user-manager { max-width: 1180px; margin: 0 auto; padding: 24px; color: var(--klm-text, #e2e8f0); }
.klm-um-hero { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:28px; border:1px solid var(--klm-border, rgba(148,163,184,.24)); border-radius:28px; background:linear-gradient(135deg, rgba(225,29,72,.16), rgba(14,165,233,.10)), var(--klm-card, rgba(15,23,42,.76)); box-shadow:0 24px 70px rgba(2,6,23,.22); }
.klm-um-eyebrow { display:inline-flex; margin-bottom:8px; color:var(--klm-accent, #fb7185); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.klm-um-hero h1 { margin:0; font-size:clamp(30px, 4vw, 48px); letter-spacing:-.04em; }
.klm-um-hero p { margin:8px 0 0; color:var(--klm-text-muted, #94a3b8); max-width:680px; }
.klm-um-shield { width:76px; height:76px; display:grid; place-items:center; border-radius:24px; color:#fff; background:linear-gradient(135deg, #e11d48, #7c3aed); box-shadow:0 18px 45px rgba(225,29,72,.35); }
.klm-um-shield svg { width:38px; height:38px; }
.klm-um-tabs { display:flex; gap:10px; margin:22px 0; padding:8px; border-radius:999px; background:var(--klm-bg-soft, rgba(2,6,23,.72)); border:1px solid var(--klm-border, rgba(148,163,184,.24)); width:max-content; }
.klm-um-tab { border:0; border-radius:999px; padding:11px 20px; cursor:pointer; color:var(--klm-text-muted, #94a3b8); background:transparent; font-weight:800; transition:.2s ease; }
.klm-um-tab.active, .klm-um-tab:hover { color:#fff; background:linear-gradient(135deg, #e11d48, #fb7185); transform:translateY(-1px); }
.klm-um-panel { display:none; }
.klm-um-panel.active { display:block; }
.klm-um-toolbar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; align-items:center; }
.klm-user-manager #klmUmPanelUsers > .klm-um-toolbar { flex-wrap:nowrap; align-items:center; gap:10px; }
.klm-user-manager #klmUmSearch { flex:0 1 25%; width:25%; min-width:220px; max-width:420px; }
.klm-user-manager #klmUmFilter { flex:0 1 25%; width:25%; min-width:220px; max-width:420px; }
.klm-user-manager #klmUmRefreshUsers,
.klm-user-manager #klmUmPanelUsers > .klm-um-toolbar .klm-um-button.primary { flex:0 0 auto; white-space:nowrap; }
.klm-um-input, .klm-um-select { min-height:46px; border-radius:16px; border:1px solid var(--klm-border, rgba(148,163,184,.24)); background:var(--klm-card, rgba(15,23,42,.76)); color:var(--klm-text, #e2e8f0); padding:0 14px; min-width:240px; }
.klm-um-select.wide { min-width:min(520px, 100%); }
.klm-um-button { border:0; border-radius:16px; min-height:46px; padding:0 18px; cursor:pointer; font-weight:900; color:var(--klm-text, #e2e8f0); background:rgba(148,163,184,.14); border:1px solid var(--klm-border, rgba(148,163,184,.24)); transition:.18s ease; }
.klm-um-button:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 14px 28px rgba(2,6,23,.18); }
.klm-um-button.primary { color:#fff; background:linear-gradient(135deg, #e11d48, #be123c); }
.klm-um-button.secondary { background:transparent; }
.klm-um-button:disabled { opacity:.48; cursor:not-allowed; }
.klm-um-grid { display:grid; gap:14px; }
.klm-um-card { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:18px; border-radius:22px; border:1px solid var(--klm-border, rgba(148,163,184,.24)); background:var(--klm-card, rgba(15,23,42,.76)); box-shadow:0 14px 38px rgba(2,6,23,.12); }
.klm-um-avatar { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; color:#fff; font-weight:900; background:linear-gradient(135deg, #0ea5e9, #7c3aed); overflow:hidden; position:relative; }
.klm-um-avatar span { position:absolute; inset:0; display:grid; place-items:center; }
.klm-um-avatar-img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2; }
.klm-um-avatar.fallback .klm-um-avatar-img { display:none; }
.klm-um-main h3 { margin:0; font-size:18px; }
.klm-um-main p { margin:4px 0 8px; color:var(--klm-text-muted, #94a3b8); }
.klm-um-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.klm-um-topics { display:flex; gap:7px; flex-wrap:wrap; }
.klm-um-badge { display:inline-flex; align-items:center; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:900; background:rgba(148,163,184,.16); }
.klm-um-badge.supporter { color:#22c55e; background:rgba(34,197,94,.14); }
.klm-um-badge.user { color:#38bdf8; background:rgba(56,189,248,.14); }
.klm-um-badge.topic { color:var(--klm-accent, #fb7185); background:rgba(225,29,72,.12); }
.klm-um-muted, .klm-um-warning { color:var(--klm-text-muted, #94a3b8); font-size:13px; }
.klm-um-warning { color:#f59e0b; margin-top:6px; }
.klm-um-empty { padding:28px; text-align:center; border-radius:20px; background:var(--klm-card, rgba(15,23,42,.76)); border:1px dashed var(--klm-border, rgba(148,163,184,.24)); color:var(--klm-text-muted, #94a3b8); }
.klm-um-empty.error, .klm-um-error { color:#fb7185; }
.klm-um-error.success { color:#16a34a; font-weight:800; }
.klm-um-modal { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(2,6,23,.72); backdrop-filter:blur(10px); }
.klm-um-modal.active { display:flex; }
.klm-um-modal-card { width:min(720px, 100%); max-height:86vh; overflow:auto; border-radius:28px; background:var(--klm-card, rgba(15,23,42,.94)); border:1px solid var(--klm-border, rgba(148,163,184,.24)); box-shadow:0 30px 90px rgba(0,0,0,.42); padding:22px; }
.klm-um-modal-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.klm-um-modal-head h2 { margin:0; }
.klm-um-icon-btn { width:38px; height:38px; border-radius:12px; border:1px solid var(--klm-border, rgba(148,163,184,.24)); background:transparent; color:var(--klm-text, #e2e8f0); font-size:26px; cursor:pointer; }
.klm-um-topic-checks { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.klm-um-check { display:flex; gap:10px; align-items:center; padding:12px; border-radius:16px; border:1px solid var(--klm-border, rgba(148,163,184,.24)); background:rgba(148,163,184,.08); cursor:pointer; }
.klm-um-topic-checks-inner .klm-um-check,
.klm-um-access-role-grid .klm-um-check {
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border-radius:12px;
  justify-content:flex-start;
  background:rgba(148,163,184,.06);
}
.klm-um-topic-checks-inner .klm-um-check span,
.klm-um-access-role-grid .klm-um-check span {
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.25;
}
.klm-um-modal-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:18px; }
@media (max-width: 720px) { .klm-user-manager { padding:14px; } .klm-um-hero, .klm-um-card { grid-template-columns:1fr; display:grid; } .klm-um-shield { display:none; } .klm-um-toolbar > * { width:100%; } .klm-user-manager #klmUmPanelUsers > .klm-um-toolbar { flex-wrap:wrap; } .klm-user-manager #klmUmSearch, .klm-user-manager #klmUmFilter, .klm-user-manager #klmUmRefreshUsers, .klm-user-manager #klmUmPanelUsers > .klm-um-toolbar .klm-um-button.primary { flex:1 1 100%; min-width:0; } }
.klm-um-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.klm-um-form-body { display:grid; gap:12px; }
.klm-um-create-layout { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; align-items:start; }
.klm-um-create-contact-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.klm-um-create-block { display:grid; gap:12px; padding:16px; border-radius:22px; border:1px solid var(--klm-border, rgba(148,163,184,.24)); background:linear-gradient(145deg, rgba(148,163,184,.10), rgba(148,163,184,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.klm-um-create-block-title { display:flex; align-items:center; gap:8px; color:var(--klm-text, #e2e8f0); font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.klm-um-create-block-title::before { content:""; width:8px; height:8px; border-radius:999px; background:var(--klm-accent, #fb7185); box-shadow:0 0 0 4px rgba(225,29,72,.12); }
.klm-um-modal-card:has(.klm-um-create-layout) { width:min(1100px, 96vw); padding:16px; position:relative; }
.klm-um-form-create-mode .klm-um-modal-head { margin-bottom:0; padding:0; align-items:center; min-height:28px; }
.klm-um-form-create-mode #klmUmFormTitle { display:none; margin:0; }
.klm-um-form-create-mode #klmUmFormEyebrow { margin:0; padding:3px 0; line-height:1; font-size:11px; }
.klm-um-form-create-mode .klm-um-modal-actions { width:100%; margin-left:0; margin-top:8px; padding-top:0; justify-content:flex-end; align-self:start; }
.klm-um-modal-card:has(.klm-um-create-layout) .klm-um-modal-head { margin-bottom:8px; }
.klm-um-form-create-mode .klm-um-modal-card:has(.klm-um-create-layout) .klm-um-modal-head { margin-bottom:0; }
.klm-um-modal-card:has(.klm-um-create-layout) .klm-um-modal-head h2:empty { display:none; }
.klm-um-create-block-wide { grid-column:auto; }
.klm-um-create-login { grid-column:1 / -1; background:linear-gradient(135deg, rgba(225,29,72,.12), rgba(14,165,233,.08)); border-color:rgba(225,29,72,.22); }
.klm-um-create-login-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px 10px; }
.klm-um-create-login > .klm-um-check { width:calc(50% - 5px); min-height:34px; margin-top:8px; padding:0; border:0; background:transparent; box-shadow:none; }
.klm-um-create-login > .klm-um-check:hover { transform:none; box-shadow:none; }
.klm-um-form-create-mode .klm-um-modal-actions { width:calc(64% - 24px); margin-left:auto; margin-right:16px; margin-top:0 !important; padding-top:0; justify-content:flex-end; align-self:start; position:relative; top:-82px; margin-bottom:-82px; }
.klm-um-form-create-mode #klmUmFormSaveNew { display:inline-flex !important; align-items:center; justify-content:center; }
.klm-um-create-layout .klm-um-field input, .klm-um-create-layout .klm-um-select { width:100%; min-width:0; min-height:34px; border-radius:12px; padding:0 10px; font-size:12px; }
.klm-um-create-layout .klm-um-field { gap:4px; font-size:11px; }
.klm-um-create-layout .klm-um-check { min-height:34px; padding:8px 10px; border-radius:12px; font-size:11px; }
.klm-um-create-login > .klm-um-check { padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
.klm-um-create-layout textarea { min-height:34px; height:34px; max-height:34px; line-height:1.2; resize:none; font-size:12px; }
html[data-theme="light"] .klm-um-create-block { background:linear-gradient(145deg, #ffffff, #f8fafc); border-color:#e2e8f0; box-shadow:0 12px 28px rgba(15,23,42,.06); }
html[data-theme="light"] .klm-um-create-block-title { color:#0f172a; }
html[data-theme="light"] .klm-um-create-login { background:linear-gradient(135deg, #fff1f2, #f0f9ff); border-color:#fecdd3; }
@media (max-width: 860px) { .klm-um-create-layout, .klm-um-create-login-grid, .klm-um-create-contact-grid { grid-template-columns:1fr; } .klm-um-create-block-wide, .klm-um-create-login { grid-column:auto; } .klm-um-create-login > .klm-um-check { width:100%; } .klm-um-form-create-mode .klm-um-modal-actions { width:100%; margin-left:0; margin-right:0; margin-top:10px !important; margin-bottom:0; top:0; position:relative; } }
.klm-um-field { display:grid; gap:7px; color:var(--klm-text-muted, #94a3b8); font-weight:800; }
.klm-um-field input { min-height:46px; border-radius:16px; border:1px solid var(--klm-border, rgba(148,163,184,.24)); background:rgba(15,23,42,.68); color:var(--klm-text, #e2e8f0); padding:0 14px; outline:none; }
.klm-um-field input:focus { border-color:rgba(251,113,133,.72); box-shadow:0 0 0 4px rgba(225,29,72,.12); }

/* User Manager: light-mode form readability fix */
html[data-theme="light"] .klm-um-modal-card {
  background: rgba(255,255,255,.98);
  color: #0f172a;
}
html[data-theme="light"] .klm-um-modal-head h2,
html[data-theme="light"] .klm-um-field,
html[data-theme="light"] .klm-um-check,
html[data-theme="light"] .klm-um-check span {
  color: #0f172a;
}
html[data-theme="light"] .klm-um-field span {
  color: #475569;
}
html[data-theme="light"] .klm-um-field input,
html[data-theme="light"] .klm-um-input,
html[data-theme="light"] .klm-um-select {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 0 rgba(15,23,42,.03);
}
html[data-theme="light"] .klm-um-field input::placeholder,
html[data-theme="light"] .klm-um-input::placeholder {
  color: #94a3b8;
  opacity: 1;
}
html[data-theme="light"] .klm-um-field input:focus,
html[data-theme="light"] .klm-um-input:focus,
html[data-theme="light"] .klm-um-select:focus {
  border-color: #e11d48;
  box-shadow: 0 0 0 4px rgba(225,29,72,.14);
  outline: none;
}
html[data-theme="light"] .klm-um-check {
  background: #f8fafc;
  border-color: #e2e8f0;
}
html[data-theme="light"] .klm-um-topic-checks-inner .klm-um-check,
html[data-theme="light"] .klm-um-access-role-grid .klm-um-check {
  background:#ffffff;
  border-color:#e2e8f0;
}
html[data-theme="light"] .klm-um-check input[type="checkbox"] {
  accent-color: #e11d48;
}
html[data-theme="light"] .klm-um-button.secondary {
  color: #0f172a;
  background: #ffffff;
  border-color: #e2e8f0;
}
html[data-theme="light"] .klm-um-warning {
  color: #b45309;
}
.klm-um-create-topics-popup { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:18px; border-radius:28px; background:rgba(15,23,42,.28); backdrop-filter:blur(4px); }
.klm-um-create-topics-card { width:min(520px, 92%); max-height:min(520px, 80vh); display:grid; gap:12px; padding:16px; border-radius:22px; background:var(--klm-card, rgba(15,23,42,.96)); border:1px solid rgba(225,29,72,.28); box-shadow:0 26px 70px rgba(2,6,23,.32); }
.klm-um-create-topics-head { color:var(--klm-text,#e2e8f0); font-size:14px; }
.klm-um-create-topics-list { display:grid; gap:8px; overflow:auto; max-height:340px; padding-right:4px; }
.klm-um-create-topics-actions { display:flex; justify-content:flex-end; }
html[data-theme="light"] .klm-um-create-topics-card { background:#fff; border-color:#fecdd3; }
html[data-theme="light"] .klm-um-create-topics { background:#fff1f2; border-color:#fecdd3; }
.klm-um-add-supporter { padding:14px; border-radius:20px; background:rgba(148,163,184,.08); border:1px solid var(--klm-border, rgba(148,163,184,.24)); }
html[data-theme="light"] .klm-um-add-supporter { background:#f8fafc; border-color:#e2e8f0; }
html[data-theme="light"] .klm-um-field select.klm-um-select { background:#fff; color:#0f172a; }
.klm-um-button.danger { color:#fff; background:linear-gradient(135deg,#ef4444,#b91c1c); border-color:rgba(239,68,68,.35); }
html[data-theme="light"] .klm-um-button.danger { color:#fff; background:linear-gradient(135deg,#ef4444,#dc2626); }
.klm-um-confirm-card { max-width:520px; }
.klm-um-confirm-message { display:grid; gap:8px; color:var(--klm-text, #e2e8f0); line-height:1.55; }
.klm-um-confirm-message p { margin:0; }
html[data-theme="light"] .klm-um-confirm-message { color:#0f172a; }
#klmUmConfirmModal { z-index:100001; }
.klm-um-badge.registered { color:#0369a1; background:rgba(14,165,233,.14); border-color:rgba(14,165,233,.28); }
.klm-um-badge.unregistered { color:#92400e; background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.32); }
.klm-um-profile-line { margin-top:6px; color:var(--klm-text-muted,#64748b); font-size:12px; font-weight:700; }
.klm-um-import-card { width:min(1280px,96vw); max-width:96vw; }
.klm-um-import-note { margin:0 0 12px; padding:10px 12px; border-radius:14px; background:rgba(14,165,233,.10); color:var(--klm-text,#e2e8f0); font-weight:700; }
.klm-um-import-grid { overflow:auto; border-radius:14px; background:#fff; padding:8px; }
.klm-um-import-result { white-space:pre-wrap; margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(15,23,42,.08); color:var(--klm-text,#e2e8f0); font-size:12px; font-weight:700; }
.klm-um-field textarea { width:100%; box-sizing:border-box; border-radius:12px; border:1px solid rgba(148,163,184,.28); padding:10px 12px; background:rgba(15,23,42,.72); color:#f8fafc; resize:vertical; }
html[data-theme="light"] .klm-um-field textarea { background:#fff; color:#0f172a; }
html[data-theme="light"] .klm-um-import-note, html[data-theme="light"] .klm-um-import-result { color:#0f172a; }
.klm-user-create .klm-um-create-nav { justify-content:flex-start; margin-bottom:16px; }
.klm-um-import-page-card { padding:18px; border-radius:24px; background:linear-gradient(145deg,rgba(15,23,42,.88),rgba(30,41,59,.78)); border:1px solid rgba(148,163,184,.22); box-shadow:0 24px 70px rgba(2,6,23,.22); }
html[data-theme="light"] .klm-um-import-page-card { background:linear-gradient(145deg,#fff,#f8fafc); border-color:rgba(148,163,184,.30); box-shadow:0 20px 50px rgba(15,23,42,.10); }
.klm-um-button[href] { text-decoration:none !important; display:inline-flex; align-items:center; justify-content:center; }
.klm-um-fallback-grid { width:max-content; min-width:100%; border-collapse:separate; border-spacing:0; color:#0f172a; }
.klm-um-fallback-grid th { position:sticky; top:0; z-index:1; padding:9px 10px; background:#e0f2fe; color:#075985; font-size:12px; text-align:left; border:1px solid #bae6fd; }
.klm-um-fallback-grid td { min-width:140px; padding:8px 10px; background:#fff; border:1px solid #e2e8f0; font-size:12px; outline:none; }
.klm-um-fallback-grid td:focus { background:#fef3c7; box-shadow:inset 0 0 0 2px #f59e0b; }
/* KLM User Create: wide Excel workspace */
.klm-user-create {
  width: min(90vw, 90%);
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.klm-user-create .klm-um-import-page-card {
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}
.klm-um-excel-frame {
  width: 100%;
  min-height: 520px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(14,165,233,.26);
  background: linear-gradient(135deg, rgba(2,6,23,.52), rgba(15,23,42,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 46px rgba(2,6,23,.20);
  overflow: auto;
  box-sizing: border-box;
}
.klm-um-excel-frame .klm-um-import-grid {
  min-width: 1180px;
  min-height: 460px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,.14);
}
.klm-user-create .jexcel_content,
.klm-user-create .jexcel_container {
  max-width: none !important;
}
.klm-user-create .jexcel {
  width: max-content;
  min-width: 100%;
}
html[data-theme="light"] .klm-um-excel-frame {
  background: linear-gradient(135deg, rgba(224,242,254,.78), rgba(248,250,252,.96));
  border-color: rgba(14,165,233,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 18px 46px rgba(15,23,42,.10);
}
@media (max-width: 900px) {
  .klm-user-create { width: 96vw; }
  .klm-um-excel-frame { padding: 8px; min-height: 440px; }
}
/* KLM User Manager/Create: near full-body width */
#content:has(.klm-user-manager) {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.klm-user-manager,
.klm-user-create {
  width: calc(100vw - 20px) !important;
  max-width: calc(100vw - 20px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.klm-user-manager .klm-um-hero,
.klm-user-manager .klm-um-tabs,
.klm-user-manager .klm-um-panel,
.klm-user-create .klm-um-hero,
.klm-user-create .klm-um-create-nav,
.klm-user-create .klm-um-import-page-card {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.klm-user-manager .klm-um-grid {
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 900px) {
  .klm-user-manager,
  .klm-user-create {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
  #content:has(.klm-user-manager) {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* KLM User Manager/Create overflow fix: parent owns 10px gutters, child stays 100% */
html:has(.klm-user-manager),
body:has(.klm-user-manager) {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
#content:has(.klm-user-manager) {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}
.klm-user-manager,
.klm-user-create {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.klm-user-manager *,
.klm-user-create * {
  box-sizing: border-box;
}
.klm-user-manager .klm-um-toolbar,
.klm-user-manager .klm-um-panel,
.klm-user-manager .klm-um-grid,
.klm-user-create .klm-um-import-page-card,
.klm-user-create .klm-um-excel-frame {
  max-width: 100% !important;
  min-width: 0 !important;
}
.klm-user-create .klm-um-excel-frame {
  overflow-x: auto !important;
}
@media (max-width: 900px) {
  #content:has(.klm-user-manager) {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
/* KLM User Manager/Create: restore master vertical scrolling / sticky header */
html:has(.klm-user-manager),
body:has(.klm-user-manager) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}
#content:has(.klm-user-manager) {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
.klm-user-manager,
.klm-user-create,
.klm-user-manager .klm-um-panel,
.klm-user-create .klm-um-import-page-card {
  overflow-y: visible !important;
  height: auto !important;
}
.klm-user-create .klm-um-excel-frame {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
}
.klm-user-create .jexcel_content {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
}
/* KLM sticky topbar fix: do not set overflow on html/body; it breaks position: sticky */
html:has(.klm-user-manager),
body:has(.klm-user-manager) {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
#container:has(.klm-user-manager),
#content:has(.klm-user-manager) {
  overflow-x: visible !important;
  overflow-y: visible !important;
}
#content:has(.klm-user-manager) {
  max-width: 100% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  box-sizing: border-box !important;
}
.klm-user-manager,
.klm-user-create {
  max-width: 100% !important;
  overflow: visible !important;
}
.klm-user-create .klm-um-excel-frame {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* ===== KLM Knowledge Base Premium UI ===== */
.klm-kb-page {
  max-width: 1400px;
  margin: 0 auto !important;
  padding: 24px 18px 48px;
  color: var(--klm-text, #e2e8f0);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

.klm-kb-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: 24px;
  align-items: end;
  padding: 34px;
  border: 1px solid var(--klm-border, rgba(148, 163, 184, .24));
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 20%, rgba(239, 68, 68, .32), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(59, 130, 246, .22), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(30, 41, 59, .82));
  box-shadow: 0 26px 80px rgba(2, 6, 23, .36);
}

.klm-kb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fecdd3;
  background: rgba(225, 29, 72, .16);
  border: 1px solid rgba(251, 113, 133, .28);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.klm-kb-hero h1,
.klm-kb-detail-head h1 {
  margin: 0;
  color: #fff !important;
  font-size: clamp(30px, 4vw, 52px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 900;
}

.klm-kb-hero p,
.klm-kb-detail-head p {
  max-width: 720px;
  margin: 14px 0 0;
  color: #cbd5e1 !important;
  font-size: 16px;
  line-height: 1.65;
}

.klm-kb-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(16px);
}

.klm-kb-search span {
  padding-left: 10px;
  font-size: 18px;
}

.klm-kb-search input,
.klm-kb-mini-search input {
  width: 100% !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #0f172a !important;
  border-radius: 13px !important;
  min-height: 44px;
}

.klm-kb-search button {
  border: 0;
  border-radius: 13px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #e11d48, #fb7185);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(225, 29, 72, .26);
}

.klm-kb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  margin-top: 24px;
}

.klm-kb-main,
.klm-kb-sidebar {
  min-width: 0;
}

.klm-kb-section-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin: 6px 0 18px;
}

.klm-kb-section-title h2 {
  margin: 0;
  color: var(--klm-text, #f8fafc) !important;
  font-size: 24px;
  font-weight: 900;
}

.klm-kb-section-title span {
  color: var(--klm-text-muted, #94a3b8);
  font-size: 13px;
}

.klm-kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.klm-kb-card,
.klm-kb-detail-card,
.klm-kb-side-card {
  background: var(--klm-card, rgba(15, 23, 42, .76)) !important;
  border: 1px solid var(--klm-border, rgba(148, 163, 184, .24));
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(2, 6, 23, .2);
}

.klm-kb-card {
  padding: 18px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.klm-kb-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 113, 133, .55);
  box-shadow: 0 26px 70px rgba(2, 6, 23, .28);
}

.klm-kb-card-head,
.klm-kb-article-link,
.klm-kb-side-link,
.klm-kb-breadcrumbs a {
  text-decoration: none !important;
}

.klm-kb-card-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  color: var(--klm-text, #f8fafc) !important;
}

.klm-kb-folder {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(225, 29, 72, .2), rgba(59, 130, 246, .16));
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 25px;
}

.klm-kb-card h3 {
  margin: 0 0 4px;
  color: var(--klm-text, #fff) !important;
  font-size: 17px;
  font-weight: 900;
}

.klm-kb-card-head p,
.klm-kb-desc,
.klm-kb-desc p {
  margin: 0;
  color: var(--klm-text-muted, #94a3b8) !important;
  font-size: 13px;
  line-height: 1.55;
}

.klm-kb-desc {
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(148, 163, 184, .08);
}

.klm-kb-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(225, 29, 72, .14);
  color: #fb7185;
  font-weight: 900;
}

.klm-kb-articles,
.klm-kb-subcats {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.klm-kb-article-link,
.klm-kb-subcats a,
.klm-kb-side-link,
.klm-kb-topic-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(148, 163, 184, .08);
  border: 1px solid rgba(148, 163, 184, .14);
  color: var(--klm-text, #e2e8f0) !important;
  font-size: 13px;
  transition: all .18s ease;
}

.klm-kb-article-link:hover,
.klm-kb-subcats a:hover,
.klm-kb-side-link:hover {
  background: rgba(225, 29, 72, .14);
  border-color: rgba(251, 113, 133, .35);
  transform: translateX(3px);
}

.klm-kb-article-link strong {
  color: inherit !important;
  font-weight: 700;
  line-height: 1.35;
}

.klm-kb-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
}

.klm-kb-side-card {
  padding: 18px;
}

.klm-kb-side-card h3 {
  margin: 0 0 12px;
  color: var(--klm-text, #f8fafc) !important;
  font-size: 16px;
  font-weight: 900;
}

.klm-kb-side-card select {
  width: 100% !important;
  min-height: 42px;
  color: var(--klm-text, #0f172a) !important;
}

.klm-kb-help-card ol {
  margin: 0;
  padding-left: 20px;
  color: var(--klm-text-muted, #cbd5e1);
  line-height: 1.9;
  font-weight: 700;
}

.klm-kb-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--klm-text-muted, #94a3b8);
  font-size: 13px;
  font-weight: 800;
}

.klm-kb-breadcrumbs a {
  color: var(--klm-accent, #fb7185) !important;
}

.klm-kb-detail-card {
  overflow: hidden;
}

.klm-kb-detail-head {
  padding: 28px;
  background:
    radial-gradient(circle at 10% 20%, rgba(225, 29, 72, .26), transparent 35%),
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .86));
  border-bottom: 1px solid var(--klm-border, rgba(148, 163, 184, .24));
}

.klm-kb-article-body {
  padding: 28px !important;
  color: var(--klm-text, #e2e8f0) !important;
  font-size: 15px;
  line-height: 1.8;
}

.klm-kb-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(2, 6, 23, .28);
  box-shadow: 0 16px 42px rgba(2, 6, 23, .22);
}

.klm-kb-article-body a img {
  cursor: zoom-in;
}

.klm-kb-article-body h2,
.klm-kb-article-body h3 {
  color: var(--klm-text, #fff) !important;
  margin-top: 20px;
}

.klm-kb-article-body p,
.klm-kb-article-body li {
  color: var(--klm-text, #e2e8f0) !important;
}

.klm-kb-article-body code {
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(225, 29, 72, .14);
  color: #fecdd3;
}

.klm-kb-empty {
  padding: 28px;
  border-radius: 22px;
  background: var(--klm-card, rgba(15, 23, 42, .76));
  border: 1px dashed var(--klm-border, rgba(148, 163, 184, .24));
  color: var(--klm-text-muted, #94a3b8);
}

@media (max-width: 1024px) {
  .klm-kb-hero,
  .klm-kb-layout {
    grid-template-columns: 1fr;
  }

  .klm-kb-sidebar {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 640px) {
  .klm-kb-page {
    padding: 14px 10px 32px;
  }

  .klm-kb-hero,
  .klm-kb-detail-head,
  .klm-kb-article-body {
    padding: 20px !important;
  }

  .klm-kb-search {
    grid-template-columns: 1fr;
  }

  .klm-kb-grid {
    grid-template-columns: 1fr;
  }

  .klm-kb-card-head {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .klm-kb-arrow {
    display: none;
  }
}


/* ===== KLM KB Multilingual Article + Screenshots ===== */
.klm-kb-lang-title {
  padding: 18px;
  border-radius: 18px;
  background: rgba(225, 29, 72, .10);
  border: 1px solid rgba(251, 113, 133, .22);
  margin-bottom: 18px;
}
.klm-kb-lang-title h2 {
  margin: 0 0 8px !important;
  color: var(--klm-text, #fff) !important;
  font-size: 26px;
  font-weight: 900;
}
.klm-kb-lang-title p,
.klm-kb-intro p {
  margin: 6px 0;
  color: var(--klm-text, #e2e8f0) !important;
}
.klm-kb-intro {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(59, 130, 246, .09);
  border: 1px solid rgba(96, 165, 250, .18);
  margin-bottom: 18px;
}
.klm-kb-steps {
  display: grid;
  gap: 16px;
}
.klm-kb-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(148, 163, 184, .075);
  border: 1px solid rgba(148, 163, 184, .16);
}
.klm-kb-step-no {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #e11d48, #fb7185);
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(225, 29, 72, .22);
}
.klm-kb-step-body h3 {
  margin: 0 0 8px !important;
  color: var(--klm-text, #fff) !important;
  font-size: 19px;
  font-weight: 900;
}
.klm-kb-shot {
  margin: 14px 0 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(2, 6, 23, .35);
}
.klm-kb-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.klm-kb-shot figcaption {
  padding: 9px 12px;
  color: var(--klm-text-muted, #94a3b8);
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 640px) {
  .klm-kb-step { grid-template-columns: 1fr; }
}


/* ===== KLM Admin Knowledge Base Manager ===== */
.klm-admin-kb-page {
  padding: 18px;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--klm-text, #0f172a);
}
.klm-admin-kb-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.86));
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 20px 60px rgba(2,6,23,.22);
}
.klm-admin-kb-hero h1 {
  margin: 0;
  color: #fff !important;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.klm-admin-kb-hero p {
  margin: 8px 0 0;
  color: #cbd5e1 !important;
}
.klm-admin-kb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.klm-admin-kb-actions.inline { align-items: center; }
.klm-admin-kb-btn,
.klm-admin-kb-row-actions a,
.klm-admin-kb-card-actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(148,163,184,.12);
  border: 1px solid rgba(148,163,184,.22);
  color: var(--klm-text, #e2e8f0) !important;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 13px;
  transition: all .18s ease;
}
.klm-admin-kb-btn.primary {
  background: linear-gradient(135deg, #e11d48, #fb7185);
  border-color: transparent;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(225,29,72,.24);
}
.klm-admin-kb-btn:hover,
.klm-admin-kb-row-actions a:hover,
.klm-admin-kb-card-actions a:hover {
  transform: translateY(-1px);
  border-color: rgba(251,113,133,.42);
}
.klm-admin-kb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.klm-admin-kb-stats div,
.klm-admin-kb-card,
.klm-admin-kb-row,
.klm-admin-kb-cat-desc,
.klm-admin-kb-empty {
  background: var(--klm-card, #fff);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.klm-admin-kb-stats div { padding: 16px; }
.klm-admin-kb-stats b {
  display: block;
  font-size: 28px;
  color: var(--klm-accent, #e11d48);
}
.klm-admin-kb-stats span {
  color: var(--klm-text-muted, #64748b);
  font-weight: 700;
}
.klm-admin-kb-search {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: var(--klm-card, #fff);
  border: 1px solid var(--klm-border, #e2e8f0);
  margin-bottom: 16px;
}
.klm-admin-searchbox {
  display: grid;
  grid-template-columns: auto minmax(260px, 520px) auto;
  align-items: center;
  gap: 8px;
}
.klm-admin-searchbox input {
  min-height: 40px;
  border-radius: 12px !important;
}
.klm-admin-searchbox button {
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  background: #e11d48;
  color: #fff;
  font-weight: 900;
}
.klm-admin-filterbar { display: flex; gap: 8px; }
.klm-admin-kb-section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 18px 0 12px;
}
.klm-admin-kb-section-head h2 {
  margin: 0;
  color: var(--klm-text, #0f172a) !important;
  font-size: 23px;
  font-weight: 900;
}
.klm-admin-kb-section-head span { color: var(--klm-text-muted, #64748b); }
.klm-admin-kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.klm-admin-kb-card { padding: 16px; }
.klm-admin-kb-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 12px;
  align-items: center;
}
.klm-admin-kb-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(225,29,72,.12);
  font-size: 24px;
}
.klm-admin-kb-card h3 { margin: 0 0 4px; font-size: 17px; }
.klm-admin-kb-card h3 a,
.klm-admin-kb-title a { color: var(--klm-text, #0f172a) !important; text-decoration: none !important; font-weight: 900; }
.klm-admin-kb-card p,
.klm-admin-kb-title span,
.klm-admin-kb-desc { color: var(--klm-text-muted, #64748b); }
.klm-admin-kb-desc,
.klm-admin-kb-cat-desc { margin: 12px 0; padding: 13px; }
.klm-admin-kb-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.klm-admin-kb-list { display: grid; gap: 10px; }
.klm-admin-kb-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}
.klm-admin-kb-title { display: grid; gap: 4px; }
.klm-admin-kb-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.klm-admin-kb-subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.klm-admin-kb-subgrid a {
  padding: 12px;
  border-radius: 14px;
  background: var(--klm-card, #fff);
  border: 1px solid var(--klm-border, #e2e8f0);
  text-decoration: none !important;
  color: var(--klm-text, #0f172a) !important;
  font-weight: 800;
}
.klm-admin-kb-empty { padding: 22px; color: var(--klm-text-muted, #64748b); }

/* Improve native FAQ edit form density */
form[action^="faq.php"] h2 {
  color: var(--klm-text, #0f172a) !important;
  font-weight: 900;
}
form[action^="faq.php"].save {
  background: var(--klm-card, #fff);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
}
form[action^="faq.php"].save input[type="submit"] {
  background: linear-gradient(135deg, #e11d48, #fb7185) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 900 !important;
}
@media (max-width: 900px) {
  .klm-admin-kb-hero,
  .klm-admin-kb-search,
  .klm-admin-kb-row,
  .klm-admin-kb-section-head { flex-direction: column; align-items: stretch; }
  .klm-admin-kb-stats { grid-template-columns: repeat(2, 1fr); }
  .klm-admin-searchbox { grid-template-columns: 1fr; }
}


/* ===== KLM KB Portal Admin Inline Actions ===== */
.klm-kb-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.klm-kb-admin-actions.inline {
  justify-content: flex-start;
  margin-top: 16px;
}
.klm-kb-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  transition: all .18s ease;
}
.klm-kb-admin-btn.primary {
  color: #fff !important;
  background: linear-gradient(135deg, #e11d48, #fb7185);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(225,29,72,.25);
}
.klm-kb-admin-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(251,113,133,.48);
}
@media (max-width: 1024px) {
  .klm-kb-admin-actions { justify-content: flex-start; }
}


/* ===== KLM KB Detail Wiki Layout ===== */
.klm-kb-detail-page {
  max-width: none !important;
  width: calc(100% - 10px) !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}
.klm-kb-detail-layout {
  grid-template-columns: clamp(260px, 22%, 360px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start;
}
.klm-kb-detail-main {
  width: 100%;
  max-width: none;
}
.klm-kb-detail-card {
  width: 100%;
}
.klm-kb-detail-head,
.klm-kb-article-body {
  padding-left: 24px !important;
}
.klm-kb-wiki-sidebar {
  position: sticky;
  top: 76px;
  align-self: start;
}
.klm-kb-wiki-index {
  max-height: calc(100vh - 220px);
  overflow: auto;
}
.klm-kb-wiki-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  margin-top: 8px;
  border-radius: 12px;
  text-decoration: none !important;
  color: var(--klm-text, #e2e8f0) !important;
  background: rgba(148, 163, 184, .07);
  border: 1px solid rgba(148, 163, 184, .12);
  transition: all .18s ease;
}
.klm-kb-wiki-link strong {
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 800;
  color: inherit !important;
}
.klm-kb-wiki-link:hover {
  background: rgba(225, 29, 72, .13);
  border-color: rgba(251, 113, 133, .35);
  transform: translateX(2px);
}
.klm-kb-wiki-link.active {
  background: linear-gradient(135deg, rgba(225,29,72,.25), rgba(59,130,246,.15));
  border-color: rgba(251,113,133,.55);
  color: #fff !important;
}
.klm-kb-empty-mini {
  margin-top: 8px;
  color: var(--klm-text-muted, #94a3b8);
  font-size: 13px;
}
@media (max-width: 1024px) {
  .klm-kb-detail-layout {
    grid-template-columns: 1fr !important;
  }
  .klm-kb-wiki-sidebar {
    position: static;
  }
}


/* KLM KB: content left padding requested = 5px */
.klm-kb-detail-card .klm-kb-article-body {
  padding-left: 5px !important;
  margin-left: 0 !important;
}
.klm-kb-detail-card .klm-kb-article-body > * {
  margin-left: 0 !important;
}
.klm-kb-detail-card .klm-kb-lang-title,
.klm-kb-detail-card .klm-kb-intro,
.klm-kb-detail-card .klm-kb-step {
  margin-left: 0 !important;
}


/* KLM KB: remove article frame/border for open reading feel */
.klm-kb-detail-card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.klm-kb-detail-head {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}
.klm-kb-article-body {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* ===== KLM KB Language Auto Color ===== */
.klm-kb-article-body .klm-lang-vi {
  color: #f8fafc !important;
}
.klm-kb-article-body .klm-lang-en {
  color: #60a5fa !important;
}
.klm-kb-article-body .klm-lang-zh {
  color: #4ade80 !important;
}
.klm-kb-article-body .klm-lang-en strong,
.klm-kb-article-body .klm-lang-en b {
  color: #93c5fd !important;
}
.klm-kb-article-body .klm-lang-zh strong,
.klm-kb-article-body .klm-lang-zh b {
  color: #86efac !important;
}


/* ===== KLM KB Home Full Width + Topic Topbar ===== */
.klm-kb-page:not(.klm-kb-detail-page) {
  max-width: none !important;
  width: calc(100% - 20px) !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.klm-kb-page:not(.klm-kb-detail-page) .klm-kb-hero {
  width: 100% !important;
  max-width: none !important;
}
.klm-kb-topic-topbar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 10px;
}
.klm-kb-topic-card-top {
  width: min(420px, 100%);
  padding: 14px 16px !important;
}
.klm-kb-topic-card-top h3 {
  margin: 0 0 8px !important;
}
.klm-kb-topic-card-top select {
  width: 100%;
}
.klm-kb-home-layout {
  display: block !important;
  width: 100% !important;
}
.klm-kb-home-main {
  width: 100% !important;
  max-width: none !important;
}
.klm-kb-home-main .klm-kb-grid {
  width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
}
@media (max-width: 700px) {
  .klm-kb-topic-topbar { justify-content: stretch; }
  .klm-kb-topic-card-top { width: 100%; }
  .klm-kb-home-main .klm-kb-grid {
    grid-template-columns: 1fr !important;
  }
}


/* KLM KB home: search + topic same row */
.klm-kb-search-row {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(260px, 34%);
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-top: 18px;
}
.klm-kb-search-row .klm-kb-search {
  margin: 0 !important;
  width: 100% !important;
}
.klm-kb-topic-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
}
.klm-kb-topic-inline select {
  width: 100%;
  min-height: 34px;
  border-radius: 12px;
  background: rgba(15,23,42,.72);
  color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.24);
}
.klm-kb-topic-topbar { display: none !important; }
@media (max-width: 900px) {
  .klm-kb-search-row {
    grid-template-columns: 1fr;
  }
}


/* KLM KB home: prevent search/topic overlap */
.klm-kb-search-row {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
.klm-kb-search-row .klm-kb-search {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.klm-kb-search-row .klm-kb-search input {
  min-width: 0 !important;
  width: 100% !important;
}
.klm-kb-search-row .klm-kb-search button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: 72px !important;
}
.klm-kb-topic-inline {
  min-width: 0 !important;
  overflow: hidden !important;
}
.klm-kb-topic-inline select {
  min-width: 0 !important;
  width: 100% !important;
}
@media (max-width: 1100px) {
  .klm-kb-search-row {
    grid-template-columns: 1fr !important;
  }
}


/* KLM KB home: admin buttons float, no title-frame width expansion */
.klm-kb-page,
.klm-kb-hero,
.klm-kb-search-row {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.klm-kb-hero {
  position: relative !important;
  overflow: hidden !important;
  padding-right: 24px !important;
}
.klm-kb-hero .klm-kb-admin-actions {
  position: absolute !important;
  top: 28px !important;
  right: 24px !important;
  z-index: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  max-width: 240px !important;
  gap: 8px !important;
}
.klm-kb-hero .klm-kb-admin-btn {
  padding: 8px 12px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
.klm-kb-hero-copy {
  max-width: calc(100% - 270px) !important;
}
.klm-kb-search-row {
  max-width: calc(100% - 270px) !important;
}
html, body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
@supports not (overflow: clip) {
  html, body {
    overflow-x: visible !important;
  }
}
.klm-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 3000 !important;
}
@media (max-width: 1100px) {
  .klm-kb-hero .klm-kb-admin-actions {
    position: static !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }
  .klm-kb-hero-copy,
  .klm-kb-search-row {
    max-width: 100% !important;
  }
}


/* KLM KB home: topic chips in category cards */
.klm-kb-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}
.klm-kb-card-topics span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #93c5fd;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(96,165,250,.22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* KLM KB home: restored Search button + compact reset */
.klm-kb-search-row .klm-kb-search {
  grid-template-columns: 28px minmax(0, 1fr) auto 38px !important;
}
#klmKbHomeApply {
  min-width: 78px !important;
}
#klmKbHomeClear {
  min-width: 34px !important;
  width: 34px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 12px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}


/* KLM KB home: hard fix search row visibility */
.klm-kb-hero .klm-kb-search-row {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(900px, calc(100% - 300px)) !important;
  max-width: min(900px, calc(100% - 300px)) !important;
  min-width: 0 !important;
  margin: 18px 0 0 0 !important;
}
.klm-kb-hero .klm-kb-search-row .klm-kb-search {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 26px minmax(180px, 1fr) 76px 34px !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 360px !important;
  max-width: none !important;
  height: 48px !important;
  overflow: visible !important;
}
.klm-kb-hero .klm-kb-search-row .klm-kb-topic-inline {
  flex: 0 0 270px !important;
  width: 270px !important;
  height: 48px !important;
}
.klm-kb-hero .klm-kb-search-row input,
.klm-kb-hero .klm-kb-search-row select {
  min-width: 0 !important;
  max-width: 100% !important;
}
@media (max-width: 1100px) {
  .klm-kb-hero .klm-kb-search-row {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .klm-kb-hero .klm-kb-search-row .klm-kb-search,
  .klm-kb-hero .klm-kb-search-row .klm-kb-topic-inline {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* KLM KB home: move admin buttons below hero title, inside frame */
.klm-kb-hero {
  min-height: auto !important;
  padding-bottom: 22px !important;
}
.klm-kb-hero .klm-kb-admin-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  z-index: 1 !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  margin: 12px 0 0 0 !important;
  gap: 8px !important;
}
.klm-kb-hero-copy,
.klm-kb-hero .klm-kb-search-row {
  max-width: 100% !important;
  width: 100% !important;
}
.klm-kb-hero .klm-kb-search-row {
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: minmax(380px, 1fr) minmax(240px, 320px) !important;
  align-items: center !important;
}
@media (max-width: 900px) {
  .klm-kb-hero .klm-kb-search-row {
    grid-template-columns: 1fr !important;
  }
}


/* KLM KB home: icon-only live search */
.klm-kb-hero .klm-kb-search-row .klm-kb-search,
.klm-kb-search-row .klm-kb-search {
  grid-template-columns: 26px minmax(0, 1fr) !important;
}
.klm-kb-hero .klm-kb-search-row .klm-kb-search button,
.klm-kb-search-row .klm-kb-search button,
#klmKbHomeApply,
#klmKbHomeClear {
  display: none !important;
}
.klm-kb-search span {
  margin-right: 0 !important;
  justify-self: center;
}


/* KLM KB home: make search/topic frames same size */
.klm-kb-hero .klm-kb-search-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
}
.klm-kb-hero .klm-kb-search-row .klm-kb-search,
.klm-kb-hero .klm-kb-search-row .klm-kb-topic-inline {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}
.klm-kb-hero .klm-kb-search-row .klm-kb-search input,
.klm-kb-hero .klm-kb-search-row .klm-kb-topic-inline select {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}
@media (max-width: 900px) {
  .klm-kb-hero .klm-kb-search-row {
    grid-template-columns: 1fr !important;
  }
}


/* KLM KB category page aligned with article detail */
.klm-kb-category-intro h2 {
  margin: 20px 0 12px;
  font-size: 22px;
  color: #f8fafc;
}
.klm-kb-category-article-list {
  margin-top: 24px;
}
.klm-kb-category-article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  margin: 8px 0;
  border-radius: 14px;
  text-decoration: none !important;
  color: #e2e8f0 !important;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(148,163,184,.15);
  transition: all .18s ease;
}
.klm-kb-category-article strong {
  font-size: 14px;
  line-height: 1.35;
  color: inherit !important;
}
.klm-kb-category-article em {
  font-style: normal;
  color: #fb7185;
}
.klm-kb-category-article:hover {
  transform: translateX(3px);
  background: rgba(225,29,72,.14);
  border-color: rgba(251,113,133,.35);
}
.klm-kb-category-card .klm-kb-detail-head {
  background: linear-gradient(135deg, rgba(225,29,72,.24), rgba(30,41,59,.82)) !important;
}


/* KLM KB category simplified guide */
.klm-kb-category-guide-note {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(96,165,250,.18);
}
.klm-kb-category-guide-note h2 {
  margin-top: 0 !important;
}


/* KLM KB language colors on category pages */
.klm-kb-category-page .klm-lang-vi { color: #f8fafc !important; }
.klm-kb-category-page .klm-lang-en { color: #60a5fa !important; }
.klm-kb-category-page .klm-lang-zh { color: #4ade80 !important; }


/* KLM KB article share menu */
.klm-kb-share-actions {
  position: relative;
  display: inline-flex;
  margin-top: 10px;
}
.klm-kb-share-main {
  border: 0;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  box-shadow: 0 12px 28px rgba(37,99,235,.26);
}
.klm-kb-share-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 230px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(15,23,42,.96);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  display: none;
}
.klm-kb-share-actions:hover .klm-kb-share-menu,
.klm-kb-share-actions:focus-within .klm-kb-share-menu {
  display: grid;
  gap: 6px;
}
.klm-kb-share-menu button {
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  color: #e2e8f0;
  background: rgba(255,255,255,.06);
  font-weight: 800;
}
.klm-kb-share-menu button:hover {
  background: rgba(37,99,235,.2);
  color: #fff;
}


/* KLM KB share user modal */
.klm-kb-share-modal[hidden] { display: none !important; }
.klm-kb-share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(2,6,23,.72);
  backdrop-filter: blur(10px);
}
.klm-kb-share-dialog {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
  padding: 22px;
  border-radius: 24px;
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
}
.klm-kb-share-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: rgba(244,63,94,.9);
}
#klmKbShareUserSearch {
  width: 100%;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  color: #e5e7eb;
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(148,163,184,.24);
  box-sizing: border-box;
}
.klm-kb-share-user-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}
.klm-kb-share-user-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
}
.klm-kb-share-user-row small {
  display: block;
  color: #94a3b8;
  margin-top: 2px;
}
.klm-kb-share-send {
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #e11d48, #2563eb);
}
.klm-kb-share-empty { color: #94a3b8; padding: 12px; }


/* KLM AI KB Proposal Portal */
.klm-ai-kb-page{font-family:'Outfit',system-ui,sans-serif;max-width:1400px;margin:0 auto;padding:24px;color:var(--klm-text,#0f172a)}
.klm-ai-kb-hero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:28px;border:1px solid var(--klm-border,#e2e8f0);border-radius:24px;background:linear-gradient(135deg,rgba(225,29,72,.12),rgba(99,102,241,.10)),var(--klm-card,#fff);box-shadow:0 20px 50px rgba(15,23,42,.08);margin-bottom:22px}
.klm-ai-kb-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--klm-accent,#e11d48)}
.klm-ai-kb-hero h1{margin:4px 0;font-size:36px;letter-spacing:-.04em}.klm-ai-kb-hero p{margin:0;color:var(--klm-text-muted,#64748b);max-width:760px}
.klm-ai-kb-refresh,.klm-ai-kb-link,.klm-ai-kb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--klm-border,#e2e8f0);border-radius:999px;padding:10px 16px;background:var(--klm-card,#fff);color:var(--klm-text,#0f172a);font-weight:800;text-decoration:none;cursor:pointer;transition:.2s ease}.klm-ai-kb-btn:hover,.klm-ai-kb-link:hover,.klm-ai-kb-refresh:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.10)}
.klm-ai-kb-btn.primary{background:linear-gradient(135deg,#e11d48,#f97316);color:white;border:0}.klm-ai-kb-btn.success{background:linear-gradient(135deg,#059669,#10b981);color:white;border:0}.klm-ai-kb-btn.danger{background:rgba(225,29,72,.10);color:#be123c}
.klm-ai-kb-focus,.klm-ai-kb-table-wrap{border:1px solid var(--klm-border,#e2e8f0);border-radius:22px;background:var(--klm-card,#fff);box-shadow:0 14px 40px rgba(15,23,42,.07);padding:22px;margin-bottom:22px}.klm-ai-kb-focus-head,.klm-ai-kb-table-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.klm-ai-kb-focus h2,.klm-ai-kb-table-head h2{margin:6px 0}.klm-ai-kb-chip,.klm-ai-kb-state{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;background:rgba(225,29,72,.10);color:var(--klm-accent,#e11d48)}
.klm-ai-kb-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.klm-ai-kb-comment{min-height:74px;margin-bottom:12px}.klm-ai-kb-status{padding:10px 12px;border-radius:14px;background:rgba(100,116,139,.10);margin:10px 0;color:var(--klm-text-muted,#64748b);font-weight:700}.klm-ai-kb-status.ok{background:rgba(16,185,129,.12);color:#047857}.klm-ai-kb-draft{margin-top:14px;padding:16px;border-radius:18px;background:rgba(148,163,184,.08)}.klm-ai-kb-draft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.klm-ai-kb-draft label{font-weight:800;font-size:13px}.klm-ai-kb-draft textarea{min-height:110px}.klm-ai-kb-draft-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0}
.klm-ai-kb-table{width:100%;border-collapse:separate;border-spacing:0 8px}.klm-ai-kb-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--klm-text-muted,#64748b)}.klm-ai-kb-table td{background:rgba(148,163,184,.08);padding:12px;border-top:1px solid var(--klm-border,#e2e8f0);border-bottom:1px solid var(--klm-border,#e2e8f0)}.klm-ai-kb-table td:first-child{border-left:1px solid var(--klm-border,#e2e8f0);border-radius:14px 0 0 14px}.klm-ai-kb-table td:last-child{border-right:1px solid var(--klm-border,#e2e8f0);border-radius:0 14px 14px 0}.klm-ai-kb-table .empty{text-align:center;color:var(--klm-text-muted,#64748b)}
@media(max-width:800px){.klm-ai-kb-hero,.klm-ai-kb-focus-head{display:block}.klm-ai-kb-draft-grid,.klm-ai-kb-draft-lists{grid-template-columns:1fr}.klm-ai-kb-table{font-size:12px}}
.klm-ai-kb-proposal-btn{background:linear-gradient(135deg,#fff7ed,#ffedd5)!important;color:#c2410c!important;border:1px solid rgba(249,115,22,.35)!important;box-shadow:0 8px 18px rgba(249,115,22,.12)!important}.klm-ai-kb-proposal-btn:hover{transform:translateY(-1px)}.klm-inline-kb-btn{background:linear-gradient(135deg,#ecfeff,#f0f9ff)!important;color:#0369a1!important;border-color:rgba(14,165,233,.35)!important}.klm-inline-kb-btn svg{stroke:#0284c7;fill:none}

/* KLM AI KB Similar FAQ Suggestions */
.klm-ai-kb-similar{margin:16px 0;padding:14px;border:1px solid rgba(249,115,22,.28);border-radius:18px;background:linear-gradient(135deg,rgba(255,247,237,.85),rgba(240,249,255,.72))}.klm-ai-kb-similar-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.klm-ai-kb-similar-head strong{font-size:15px}.klm-ai-kb-similar-head span{color:var(--klm-text-muted,#64748b);font-size:12px;font-weight:800}.klm-ai-kb-similar-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.klm-ai-kb-similar-item{padding:12px;border:1px solid var(--klm-border,#e2e8f0);border-radius:16px;background:rgba(255,255,255,.75);box-shadow:0 10px 24px rgba(15,23,42,.06)}.klm-ai-kb-similar-item.risk-high{border-color:rgba(220,38,38,.45);background:rgba(254,226,226,.65)}.klm-ai-kb-similar-item.risk-medium{border-color:rgba(245,158,11,.45);background:rgba(254,243,199,.60)}.klm-ai-kb-similar-item .score{display:inline-flex;margin-left:6px;padding:2px 8px;border-radius:999px;background:rgba(15,23,42,.08);font-weight:900}.klm-ai-kb-similar-item .risk{text-transform:uppercase;font-size:11px;font-weight:900;color:#b45309}.klm-ai-kb-similar-item .q{margin:6px 0;font-weight:800}.klm-ai-kb-similar-item .meta{font-size:11px;color:var(--klm-text-muted,#64748b);margin-bottom:8px}.klm-ai-kb-similar-empty{padding:10px;color:var(--klm-text-muted,#64748b);font-weight:800}


/* KLM User Manager: requested admin columns */
.klm-um-card-detailed .klm-um-main {
  min-width: 0;
}
.klm-um-info-grid {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(280px, max-content) minmax(140px, .8fr) minmax(90px, .55fr) minmax(110px, .7fr);
  gap: 10px;
  margin: 12px 0 10px;
  align-items: stretch;
}
.klm-um-info-cell {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(248,250,252,.58));
  box-shadow: 0 8px 20px rgba(15,23,42,.04);
}
.klm-um-info-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
  color: var(--klm-text-muted, #64748b);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.klm-um-info-cell strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--klm-text, #0f172a);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.klm-um-info-cell.company {
  min-width: max-content;
  width: max-content;
  max-width: min(460px, 42vw);
}
.klm-um-info-cell.company .klm-um-value-line span {
  white-space: normal;
  overflow-wrap: anywhere;
}
.klm-um-info-cell.type strong {
  color: var(--klm-accent, #e11d48);
}
html[data-theme="dark"] .klm-um-info-cell {
  background: linear-gradient(135deg, rgba(15,23,42,.78), rgba(30,41,59,.58));
  border-color: var(--klm-border, rgba(148,163,184,.24));
}
@media (max-width: 1180px) {
  .klm-um-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .klm-um-info-grid {
    grid-template-columns: 1fr;
  }
}


/* KLM User Manager: flatten info cells inside user card */
.klm-um-card-detailed .klm-um-info-cell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
}
html[data-theme="dark"] .klm-um-card-detailed .klm-um-info-cell {
  background: transparent !important;
  border-color: transparent !important;
}

/* KLM User Manager: icon-only info labels */
.klm-um-card-detailed .klm-um-info-label {
  display: none !important;
}
.klm-um-card-detailed .klm-um-info-cell {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.klm-um-info-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--klm-text-muted, #64748b);
  opacity: .92;
}
.klm-um-info-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.klm-um-info-cell.type .klm-um-info-icon,
.klm-um-info-cell.type strong {
  color: var(--klm-accent, #e11d48);
}

/* KLM User Manager: ensure emoji icons render visibly */
.klm-um-info-icon {
  color: inherit !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

/* KLM User Manager: per-line contact icons */
.klm-um-value-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.klm-um-value-line em {
  flex: 0 0 16px;
  width: 16px;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
  font-size: 13px;
  font-style: normal;
  line-height: 1;
  text-align: center;
}
.klm-um-value-line span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* KLM User Manager: exact Mobile/Zalo/WeChat icons */
.klm-um-mini-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.klm-um-mini-icon.mobile {
  font-size: 14px;
  background: transparent;
}
.klm-um-mini-icon.zalo {
  color: #fff;
  background: #0068ff;
  box-shadow: 0 0 0 1px rgba(96,165,250,.35);
}
.klm-um-mini-icon.wechat {
  color: #fff;
  background: #07c160;
  box-shadow: 0 0 0 1px rgba(74,222,128,.35);
}
.klm-um-value-line em {
  display: none !important;
}

/* KLM User Manager: remove duplicated group icon for contact cell */
.klm-um-info-cell.contact > .klm-um-info-icon {
  visibility: hidden !important;
}
.klm-um-mini-icon.mobile {
  color: #f43f5e;
  background: transparent !important;
  font-size: 13px !important;
}

/* KLM User Manager: compact edit modal redesign */
#klmUmFormModal .klm-um-modal-card {
  width: min(860px, calc(100vw - 34px)) !important;
  max-height: calc(100vh - 46px) !important;
  overflow: visible !important;
  padding: 18px 20px !important;
}
#klmUmFormModal .klm-um-modal-head {
  margin-bottom: 10px !important;
  padding-bottom: 10px !important;
}
#klmUmFormModal .klm-um-modal-head h2 {
  margin: 2px 0 0 !important;
  font-size: 22px !important;
}
#klmUmFormModal .klm-um-form-body {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}
.klm-um-edit-shell {
  display: grid;
  gap: 12px;
}
.klm-um-edit-basic {
  display: grid;
  grid-template-columns: 46px minmax(150px, 1fr) minmax(220px, 1.1fr) minmax(130px, .7fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(225,29,72,.08));
  border: 1px solid rgba(148,163,184,.18);
}
.klm-um-edit-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #e11d48, #2563eb);
  box-shadow: 0 12px 26px rgba(37,99,235,.18);
}
.klm-um-edit-person strong,
.klm-um-readonly-info strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--klm-text, #0f172a);
  font-size: 13px;
  font-weight: 900;
}
.klm-um-edit-person span,
.klm-um-readonly-info span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--klm-text-muted, #64748b);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.klm-um-readonly-info {
  min-width: 0;
}
.klm-um-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.klm-um-edit-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.klm-um-edit-field span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--klm-text-muted, #64748b);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.klm-um-edit-field span em,
.klm-um-readonly-info span em {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  font-style: normal;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(135deg, #334155, #0f172a);
}
.klm-um-edit-field input,
.klm-um-edit-field textarea {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid var(--klm-border, #e2e8f0) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--klm-text, #0f172a) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  outline: none !important;
}
.klm-um-edit-field input:focus,
.klm-um-edit-field textarea:focus {
  border-color: rgba(225,29,72,.52) !important;
  box-shadow: 0 0 0 3px rgba(225,29,72,.10) !important;
}
.klm-um-edit-note {
  grid-column: 1 / -1;
}
.klm-um-edit-note textarea {
  height: 52px !important;
  min-height: 52px !important;
  resize: none !important;
}
#klmUmFormModal .klm-um-modal-actions {
  margin-top: 12px !important;
  padding-top: 10px !important;
}
html[data-theme="dark"] .klm-um-edit-basic {
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(225,29,72,.12));
  border-color: rgba(148,163,184,.22);
}
html[data-theme="dark"] .klm-um-edit-field input,
html[data-theme="dark"] .klm-um-edit-field textarea {
  background: rgba(15,23,42,.72) !important;
}
@media (max-width: 760px) {
  #klmUmFormModal .klm-um-modal-card {
    overflow: auto !important;
  }
  .klm-um-edit-basic,
  .klm-um-edit-grid {
    grid-template-columns: 1fr;
  }
}

/* Access Control modal compact/readable layout */
#klmUmModal .klm-um-modal-card {
  width: min(760px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  max-height: min(82vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 18px;
}
#klmUmModal .klm-um-modal-head { margin-bottom: 12px; flex: 0 0 auto; }
#klmUmModal .klm-um-eyebrow { color: #e11d48; font-size: 11px; letter-spacing: .14em; }
#klmUmModal #klmUmModalTitle { color: var(--klm-text, #f8fafc) !important; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
#klmUmModal #klmUmModalTopics {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .9fr); gap: 34px; align-items: start;
  min-width: 0; overflow: auto; overflow-x: hidden; padding: 2px 8px 8px 2px; scrollbar-gutter: stable;
}
#klmUmModal .klm-um-access-section { min-width: 0; margin: 0; }
#klmUmModal .klm-um-access-section.masterdata { border-top: 0; border-left: 0; padding-top: 0; padding-left: 0; margin-top: 0; }
#klmUmModal .klm-um-access-section h3 {
  margin: 0 0 8px; color: var(--klm-text, #f8fafc) !important; font-size: 12px; line-height: 1.15;
  font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .9;
}
#klmUmModal .klm-um-topic-checks-inner,
#klmUmModal .klm-um-access-role-grid { display: grid; grid-template-columns: 1fr; gap: 7px; min-width: 0; }
#klmUmModal .klm-um-check {
  width: 100%; min-height: 36px; padding: 7px 10px; border-radius: 12px; gap: 9px; min-width: 0; box-sizing: border-box;
  line-height: 1.18; background: rgba(148,163,184,.08);
}
#klmUmModal .klm-um-check input[type="checkbox"] { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; }
#klmUmModal .klm-um-check span {
  min-width: 0; max-width: 100%; color: var(--klm-text, #e5e7eb) !important; font-size: 12.5px; font-weight: 700;
  overflow-wrap: anywhere;
}
#klmUmModal .klm-um-role-check span { display: grid; gap: 1px; }
#klmUmModal .klm-um-role-check b { color: var(--klm-text, #e5e7eb) !important; font-size: 12px; line-height: 1.15; }
#klmUmModal .klm-um-role-check em { color: var(--klm-text-muted, #94a3b8) !important; font-size: 10px; line-height: 1.1; }
#klmUmModal .klm-um-modal-actions { flex: 0 0 auto; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,.18); }
html[data-theme="light"] #klmUmModal .klm-um-modal-card { background: rgba(255,255,255,.98); }
html[data-theme="light"] #klmUmModal .klm-um-access-section h3,
html[data-theme="light"] #klmUmModal #klmUmModalTitle,
html[data-theme="light"] #klmUmModal .klm-um-check span,
html[data-theme="light"] #klmUmModal .klm-um-role-check b { color: #0f172a !important; }
html[data-theme="light"] #klmUmModal .klm-um-role-check em { color: #2563eb !important; }
html[data-theme="light"] #klmUmModal .klm-um-check { background: #fff; border-color: #dbe3ef; }
@media (max-width: 760px) {
  #klmUmModal .klm-um-modal-card { width: min(96vw, 760px); max-width: 96vw; max-height: 88vh; padding: 16px; }
  #klmUmModal #klmUmModalTopics { grid-template-columns: 1fr; gap: 12px; }
  #klmUmModal .klm-um-access-section.masterdata { border-left: 0; border-top: 1px solid rgba(148,163,184,.22); padding-left: 0; padding-top: 12px; }
}

/* MasterData portal: reuse Knowledge Base premium visual language */
.klm-md-page .klm-md-hero {
  background:
    radial-gradient(circle at 12% 22%, rgba(225,29,72,.34), transparent 34%),
    radial-gradient(circle at 84% 10%, rgba(14,165,233,.24), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(51,65,85,.82));
}
.klm-md-actions { margin: -8px 0 16px; display:flex; justify-content:flex-start; }
.klm-md-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.klm-md-card { min-height: 168px; }
.klm-md-meta { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.klm-md-meta span {
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px;
  background:rgba(148,163,184,.12); color:var(--klm-text-muted,#94a3b8); font-size:12px; font-weight:900;
}
.klm-md-status { color:#0f172a !important; background:#e0f2fe !important; }
.klm-md-status.status-draft { background:#f1f5f9 !important; color:#334155 !important; }
.klm-md-status.status-in_parallel_review { background:#dbeafe !important; color:#1d4ed8 !important; }
.klm-md-status.status-pending_finance_final { background:#fef3c7 !important; color:#92400e !important; }
.klm-md-status.status-approved { background:#dcfce7 !important; color:#166534 !important; }
.klm-md-status.status-rejected { background:#fee2e2 !important; color:#991b1b !important; }
.klm-md-empty { border:1px dashed rgba(148,163,184,.34); }
html[data-theme="light"] .klm-md-meta span:not(.klm-md-status) { background:#f8fafc; color:#475569; }
@media (max-width: 760px) {
  .klm-md-grid { grid-template-columns:1fr; }
  .klm-md-actions .klm-kb-admin-btn { width:100%; justify-content:center; }
}

/* MasterData list grid rows */
.klm-md-list-grid {
  display: grid;
  gap: 8px;
  width: 100%;
}
.klm-md-list-head,
.klm-md-list-row {
  display: grid;
  grid-template-columns: 1.35fr 2fr .75fr .9fr 1.15fr 34px;
  gap: 12px;
  align-items: center;
}
.klm-md-list-head {
  padding: 0 16px 6px;
  color: var(--klm-text-muted,#64748b);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.klm-md-list-row {
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid rgba(203,213,225,.78);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  color: var(--klm-text,#0f172a);
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.klm-md-list-row:hover {
  transform: translateY(-1px);
  border-color: rgba(225,29,72,.26);
  box-shadow: 0 16px 34px rgba(15,23,42,.10);
}
.klm-md-list-row strong,
.klm-md-list-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.klm-md-list-row strong { font-size: 13px; font-weight: 900; }
.klm-md-list-row span { font-size: 12px; color: var(--klm-text-muted,#64748b); font-weight: 700; }
.klm-md-list-row .klm-md-number { color: var(--klm-text,#0f172a); }
.klm-md-list-row .klm-md-status {
  justify-self: start;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}
.klm-md-list-row > b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(225,29,72,.10);
  color: #e11d48;
}
html[data-theme="dark"] .klm-md-list-row {
  background: rgba(15,23,42,.72);
  border-color: rgba(148,163,184,.22);
  color: #e5e7eb;
}
html[data-theme="dark"] .klm-md-list-row .klm-md-number,
html[data-theme="dark"] .klm-md-list-row strong { color: #f8fafc; }
@media (max-width: 900px) {
  .klm-md-list-head { display:none; }
  .klm-md-list-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .klm-md-list-row strong,
  .klm-md-list-row span { white-space: normal; }
  .klm-md-list-row > b { grid-row: 1 / span 4; grid-column: 2; }
}

/* MasterData Admin configuration UI */
.klm-md-admin-actions { display:flex; gap:10px; align-items:center; }
.klm-md-admin-shell { display:grid; grid-template-columns: 220px minmax(0,1fr); gap:18px; align-items:start; }
.klm-md-admin-menu {
  position: sticky; top: 86px; display:grid; gap:8px; padding:12px; border-radius:22px;
  background: rgba(255,255,255,.82); border:1px solid rgba(203,213,225,.72); box-shadow:0 18px 44px rgba(15,23,42,.08);
}
.klm-md-admin-menu a {
  padding:11px 12px; border-radius:14px; text-decoration:none !important; color:var(--klm-text,#0f172a);
  font-weight:900; font-size:13px; transition:.16s ease;
}
.klm-md-admin-menu a:hover,
.klm-md-admin-menu a.active { background:linear-gradient(135deg,#e11d48,#fb7185); color:#fff; box-shadow:0 10px 24px rgba(225,29,72,.24); }
.klm-md-admin-main { min-width:0; display:grid; gap:14px; }
.klm-md-admin-filter,
.klm-md-admin-card {
  border-radius:24px; background:rgba(255,255,255,.88); border:1px solid rgba(203,213,225,.74);
  box-shadow:0 20px 48px rgba(15,23,42,.08); padding:16px;
}
.klm-md-admin-filter { display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; }
.klm-md-admin-filter label { font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--klm-text-muted,#64748b); }
.klm-md-admin-filter select,
.klm-md-admin-form input,
.klm-md-admin-form select {
  min-height:38px; border-radius:12px; border:1px solid rgba(203,213,225,.86); background:#fff; padding:0 11px;
  color:#0f172a; font-weight:800; outline:none;
}
.klm-md-admin-card h2 { margin:0 0 14px; font-size:20px; letter-spacing:-.03em; color:var(--klm-text,#0f172a); }
.klm-md-admin-form { display:grid; grid-template-columns: repeat(4, minmax(130px,1fr)); gap:10px; align-items:center; margin-bottom:16px; }
.klm-md-admin-form.fields { grid-template-columns: repeat(5, minmax(120px,1fr)); }
.klm-md-admin-form label { display:flex; align-items:center; gap:7px; font-weight:900; color:var(--klm-text-muted,#64748b); }
.klm-md-admin-grid {
  display:grid; grid-template-columns: 1fr 1.4fr 2fr .6fr; gap:10px; align-items:center;
  min-height:44px; padding:9px 12px; border-radius:14px; border:1px solid rgba(203,213,225,.62); margin-bottom:7px;
  background:rgba(248,250,252,.86); color:var(--klm-text,#0f172a);
}
.klm-md-admin-grid.small { grid-template-columns: 1fr .7fr .5fr; }
.klm-md-admin-grid.group { grid-template-columns: 1fr 1.7fr .7fr .5fr .6fr; }
.klm-md-admin-grid.field { grid-template-columns: 1fr 1.8fr .7fr .7fr .6fr; }
.klm-md-admin-grid.assign { grid-template-columns: 1.6fr 1.4fr .6fr .6fr .6fr; }
.klm-md-admin-grid.head {
  min-height:34px; background:transparent; border:0; box-shadow:none; color:var(--klm-text-muted,#64748b);
  font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
}
.klm-md-admin-grid span,
.klm-md-admin-grid strong,
.klm-md-admin-grid b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.klm-md-admin-grid strong { font-size:13px; }
.klm-md-admin-grid span { color:var(--klm-text-muted,#64748b); font-weight:800; font-size:12px; }
.klm-md-admin-grid b { color:#16a34a; font-size:12px; }
html[data-theme="dark"] .klm-md-admin-menu,
html[data-theme="dark"] .klm-md-admin-filter,
html[data-theme="dark"] .klm-md-admin-card { background:rgba(15,23,42,.78); border-color:rgba(148,163,184,.22); }
html[data-theme="dark"] .klm-md-admin-grid { background:rgba(15,23,42,.58); border-color:rgba(148,163,184,.18); }
html[data-theme="dark"] .klm-md-admin-filter select,
html[data-theme="dark"] .klm-md-admin-form input,
html[data-theme="dark"] .klm-md-admin-form select { background:rgba(15,23,42,.9); border-color:rgba(148,163,184,.28); color:#f8fafc; }
html[data-theme="dark"] .klm-md-admin-card h2,
html[data-theme="dark"] .klm-md-admin-menu a { color:#f8fafc; }
@media (max-width: 920px) {
  .klm-md-admin-shell { grid-template-columns:1fr; }
  .klm-md-admin-menu { position:static; grid-template-columns:repeat(2,1fr); }
  .klm-md-admin-form,
  .klm-md-admin-form.fields { grid-template-columns:1fr; }
  .klm-md-admin-grid,
  .klm-md-admin-grid.small,
  .klm-md-admin-grid.group,
  .klm-md-admin-grid.field,
  .klm-md-admin-grid.assign { grid-template-columns:1fr 1fr; }
  .klm-md-admin-grid.head { display:none; }
}

/* MasterData list action buttons */
.klm-md-actions {
  margin: -8px 0 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.klm-md-actions .klm-kb-admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(203,213,225,.74);
  background: rgba(255,255,255,.92);
  color: #334155 !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.klm-md-actions .klm-kb-admin-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(225,29,72,.34);
  box-shadow: 0 16px 32px rgba(15,23,42,.12);
}
.klm-md-actions .klm-kb-admin-btn.primary {
  border: 0;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(225,29,72,.28);
}
.klm-md-actions .klm-kb-admin-btn:not(.primary) {
  background: linear-gradient(135deg, rgba(15,23,42,.94), rgba(51,65,85,.88));
  border-color: rgba(148,163,184,.38);
  color: #fff !important;
}
html[data-theme="dark"] .klm-md-actions .klm-kb-admin-btn:not(.primary) {
  background: rgba(30,41,59,.92);
  color: #e5e7eb !important;
  border-color: rgba(148,163,184,.32);
}
@media (max-width: 760px) {
  .klm-md-actions .klm-kb-admin-btn { flex: 1 1 auto; }
}

/* MasterData create request advanced group/field selector */
.klm-md-open-card {
  margin-top: 16px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.9);
  border: 1px solid rgba(203,213,225,.72); box-shadow: 0 20px 48px rgba(15,23,42,.08);
}
.klm-md-open-grid { display:grid; grid-template-columns: repeat(3,minmax(180px,1fr)); gap:12px; margin-bottom:18px; }
.klm-md-open-grid label { display:grid; gap:6px; color:var(--klm-text,#0f172a); font-weight:900; font-size:12px; }
.klm-md-open-grid input,.klm-md-open-grid select {
  min-height:40px; border-radius:13px; border:1px solid rgba(203,213,225,.86); padding:0 12px; font-weight:800;
}
.klm-md-open-card h2 { margin: 8px 0 12px; color:var(--klm-text,#0f172a); }
.klm-md-type-groups { display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:12px; margin-bottom:16px; }
.klm-md-group-box { border:1px solid rgba(203,213,225,.72); border-radius:18px; padding:12px; background:rgba(248,250,252,.9); }
.klm-md-group-title { display:flex; align-items:center; gap:8px; font-weight:900; color:var(--klm-text,#0f172a); }
.klm-md-group-title span { margin-left:auto; font-size:11px; border-radius:999px; background:#e0f2fe; color:#0369a1; padding:4px 8px; }
.klm-md-mini { display:inline-flex; gap:6px; margin:8px 0; font-weight:800; color:var(--klm-text-muted,#64748b); }
.klm-md-field-list { display:grid; gap:6px; }
.klm-md-field-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; background:#fff; border:1px solid rgba(226,232,240,.86); }
.klm-md-field-row span { font-weight:900; color:var(--klm-text,#0f172a); }
.klm-md-field-row label { font-weight:800; color:var(--klm-text-muted,#64748b); }
html[data-theme="dark"] .klm-md-open-card,
html[data-theme="dark"] .klm-md-group-box { background:rgba(15,23,42,.78); border-color:rgba(148,163,184,.22); }
html[data-theme="dark"] .klm-md-field-row { background:rgba(15,23,42,.9); border-color:rgba(148,163,184,.18); }
html[data-theme="dark"] .klm-md-open-grid input,
html[data-theme="dark"] .klm-md-open-grid select { background:rgba(15,23,42,.9); color:#f8fafc; border-color:rgba(148,163,184,.28); }
@media (max-width: 900px) { .klm-md-open-grid,.klm-md-type-groups { grid-template-columns:1fr; } .klm-md-field-row { grid-template-columns:1fr; } }

/* MasterData Admin row action buttons */
.klm-md-admin-grid.actions:not(.config-set) { grid-template-columns: 1fr 1.4fr 2fr .55fr 230px; }
.klm-md-admin-grid.small.actions { grid-template-columns: 1fr 1.2fr .55fr 230px; }
.klm-md-admin-grid.group.actions { grid-template-columns: 1fr 1.5fr .7fr .45fr .55fr 230px; }
.klm-md-admin-grid.field.actions { grid-template-columns: 1fr 1.6fr .65fr .65fr .55fr 230px; }
.klm-md-admin-grid.assign.actions { grid-template-columns: 1.4fr 1.2fr .7fr .55fr .55fr 230px; }
.klm-md-row-actions { display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.klm-md-inline-form { display:inline-flex; margin:0; padding:0; }
.klm-md-mini-btn {
  border:1px solid rgba(148,163,184,.42); border-radius:999px; min-height:26px; padding:5px 9px;
  background:#fff; color:#334155; font-size:11px; font-weight:900; cursor:pointer; text-decoration:none !important;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}
.klm-md-mini-btn:hover { transform:translateY(-1px); box-shadow:0 10px 18px rgba(15,23,42,.10); }
.klm-md-mini-btn.success { background:#dcfce7; border-color:#86efac; color:#166534; }
.klm-md-mini-btn.danger { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
html[data-theme="dark"] .klm-md-mini-btn { background:rgba(30,41,59,.9); color:#e5e7eb; border-color:rgba(148,163,184,.28); }
html[data-theme="dark"] .klm-md-mini-btn.success { background:rgba(22,101,52,.28); color:#bbf7d0; }
html[data-theme="dark"] .klm-md-mini-btn.danger { background:rgba(127,29,29,.30); color:#fecaca; }
@media (max-width: 920px) {
  .klm-md-admin-grid.actions,
  .klm-md-admin-grid.small.actions,
  .klm-md-admin-grid.group.actions,
  .klm-md-admin-grid.field.actions,
  .klm-md-admin-grid.assign.actions { grid-template-columns:1fr; }
  .klm-md-row-actions { justify-content:flex-start; }
}

/* MasterData Admin inactive rows stay visible */
.klm-md-admin-grid.is-inactive {
  opacity: .48;
  filter: grayscale(.65);
  background: rgba(226,232,240,.72) !important;
  border-style: dashed;
}
.klm-md-admin-grid.is-inactive strong,
.klm-md-admin-grid.is-inactive span { text-decoration: none; }
.klm-md-admin-grid.is-inactive b { color:#64748b; }
html[data-theme="dark"] .klm-md-admin-grid.is-inactive { background: rgba(30,41,59,.45) !important; }

/* MasterData Admin modal create UX */
.klm-md-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.klm-md-card-head h2 { margin:0 !important; }
.klm-md-modal[hidden] { display:none !important; }
.klm-md-modal { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; padding:24px; }
.klm-md-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.58); backdrop-filter: blur(8px); }
.klm-md-modal-panel {
  position:relative; width:min(760px, calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto;
  border-radius:26px; padding:22px; background:rgba(255,255,255,.96); border:1px solid rgba(226,232,240,.86);
  box-shadow:0 30px 90px rgba(15,23,42,.28); animation:klmMdModalIn .16s ease-out;
}
@keyframes klmMdModalIn { from { opacity:0; transform: translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.klm-md-modal-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:999px; background:#f1f5f9; color:#0f172a; font-size:22px; font-weight:900; cursor:pointer; }
.klm-md-modal-panel h3 { margin:0 42px 16px 0; font-size:22px; letter-spacing:-.03em; color:#0f172a; }
.klm-md-modal-form { display:grid; grid-template-columns: repeat(2,minmax(180px,1fr)); gap:12px; }
.klm-md-modal-form label { display:grid; gap:6px; font-size:12px; font-weight:900; color:#475569; }
.klm-md-modal-form label.check { display:flex; align-items:center; gap:8px; min-height:40px; }
.klm-md-modal-form input,.klm-md-modal-form select { min-height:40px; border-radius:13px; border:1px solid rgba(203,213,225,.86); padding:0 12px; font-weight:800; background:#fff; color:#0f172a; }
.klm-md-modal-form button { grid-column:1 / -1; justify-self:end; }
body.klm-md-modal-on { overflow:hidden; }
html[data-theme="dark"] .klm-md-modal-panel { background:rgba(15,23,42,.96); border-color:rgba(148,163,184,.22); }
html[data-theme="dark"] .klm-md-modal-panel h3 { color:#f8fafc; }
html[data-theme="dark"] .klm-md-modal-form label { color:#cbd5e1; }
html[data-theme="dark"] .klm-md-modal-form input,
html[data-theme="dark"] .klm-md-modal-form select { background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.28); color:#f8fafc; }
html[data-theme="dark"] .klm-md-modal-close { background:rgba(30,41,59,.92); color:#f8fafc; }
@media (max-width:760px){ .klm-md-card-head{align-items:stretch; flex-direction:column;} .klm-md-modal-form{grid-template-columns:1fr;} .klm-md-modal-form button{justify-self:stretch;} }

/* MasterData body/menu font - keep hero headings unchanged */
.klm-md-page,
.klm-md-page p,
.klm-md-page a,
.klm-md-page span,
.klm-md-page strong,
.klm-md-page b,
.klm-md-page label,
.klm-md-page input,
.klm-md-page select,
.klm-md-page textarea,
.klm-md-page button,
.klm-md-page .klm-md-admin-menu,
.klm-md-page .klm-md-admin-grid,
.klm-md-page .klm-md-modal-form,
.klm-md-page .klm-md-card-head,
.klm-md-page .klm-md-admin-filter {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.018em;
}
.klm-md-page .klm-kb-hero h1,
.klm-md-page .klm-md-hero h1 {
  font-family: inherit !important;
  letter-spacing: inherit;
}
.klm-md-page .klm-kb-hero p,
.klm-md-page .klm-md-hero p {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.018em;
  font-weight: 650;
}

/* User Manager - MasterData role unit scopes */
.klm-um-role-scope { display:grid; gap:8px; }
.klm-um-role-units { margin: -4px 0 8px 34px; }
.klm-um-unit-toggle {
  border:1px solid rgba(59,130,246,.22); background:#eff6ff; color:#1d4ed8; border-radius:999px;
  padding:6px 10px; font-size:11px; font-weight:900; cursor:pointer;
}
.klm-um-unit-list {
  margin-top:8px; display:grid; gap:6px; max-height:180px; overflow:auto; padding:10px;
  border:1px solid rgba(203,213,225,.9); border-radius:14px; background:#fff;
}
.klm-um-unit-list label { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:#334155; }
.klm-um-unit-list input { width:14px; height:14px; accent-color:#f43f5e; }
html[data-theme="dark"] .klm-um-unit-toggle { background:rgba(30,64,175,.25); color:#bfdbfe; border-color:rgba(96,165,250,.25); }
html[data-theme="dark"] .klm-um-unit-list { background:rgba(15,23,42,.92); border-color:rgba(148,163,184,.25); }
html[data-theme="dark"] .klm-um-unit-list label { color:#e5e7eb; }

/* User Manager - Master Data assignment view */
.klm-um-md-role-card {
  border:1px solid rgba(148,163,184,.28); border-radius:18px; padding:14px 16px;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.78));
  box-shadow:0 12px 26px rgba(15,23,42,.08); display:grid; gap:10px;
}
.klm-um-md-role-head label { display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.klm-um-md-role-head strong { display:block; color:#0f172a; font-size:14px; font-weight:950; }
.klm-um-md-role-head em { display:block; color:#2563eb; font-size:11px; font-style:normal; font-weight:850; margin-top:2px; }
.klm-um-md-user { margin-left:28px; display:grid; gap:7px; color:#334155; font-size:12px; font-weight:850; }
.klm-um-md-user.muted { color:#94a3b8; font-style:italic; }
.klm-um-md-units { display:flex; gap:6px; flex-wrap:wrap; }
.klm-um-md-units span { border-radius:999px; padding:5px 9px; background:#e0f2fe; color:#0369a1; font-size:11px; font-weight:900; }
.klm-um-md-units em { color:#94a3b8; font-style:italic; }
html[data-theme="dark"] .klm-um-md-role-card { background:linear-gradient(135deg, rgba(15,23,42,.88), rgba(30,41,59,.76)); border-color:rgba(148,163,184,.2); }
html[data-theme="dark"] .klm-um-md-role-head strong { color:#f8fafc; }
html[data-theme="dark"] .klm-um-md-user { color:#cbd5e1; }

.klm-um-md-assignees { display:grid; gap:9px; }
.klm-um-md-assignee {
  display:grid; grid-template-columns:minmax(180px, .9fr) 1.2fr; gap:12px; align-items:center;
  padding:10px 12px; border:1px solid rgba(203,213,225,.72); border-radius:14px; background:rgba(255,255,255,.7);
}
.klm-um-md-assignee b { display:block; color:#0f172a; font-size:13px; font-weight:950; }
.klm-um-md-assignee small { display:block; color:#64748b; font-size:11px; font-weight:750; margin-top:2px; }
.klm-um-empty.compact { padding:10px 12px; border-radius:14px; font-size:12px; }
html[data-theme="dark"] .klm-um-md-assignee { background:rgba(15,23,42,.55); border-color:rgba(148,163,184,.2); }
html[data-theme="dark"] .klm-um-md-assignee b { color:#f8fafc; }
html[data-theme="dark"] .klm-um-md-assignee small { color:#94a3b8; }
@media (max-width:760px){ .klm-um-md-assignee { grid-template-columns:1fr; } }

/* User card - MasterData role badges */
.klm-um-md-role-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.klm-um-badge.md-role {
  background:linear-gradient(135deg, #dbeafe, #e0f2fe); color:#1d4ed8; border:1px solid rgba(59,130,246,.22);
  font-weight:900; box-shadow:0 8px 18px rgba(37,99,235,.12);
}
html[data-theme="dark"] .klm-um-badge.md-role { background:rgba(30,64,175,.32); color:#bfdbfe; border-color:rgba(96,165,250,.25); }

.klm-um-unit-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.klm-um-unit-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.klm-um-unit-selected-toggle {
  border:1px solid rgba(244,63,94,.22); background:#fff1f2; color:#be123c; border-radius:999px;
  padding:6px 10px; font-size:11px; font-weight:900; cursor:pointer;
}
.klm-um-unit-list.selected-only label { display:none; }
.klm-um-unit-list.selected-only label:has(input:checked) { display:flex; }
.klm-um-unit-list.selected-only label input:not(:checked) { display:none; }
html[data-theme="dark"] .klm-um-unit-selected-toggle { background:rgba(159,18,57,.22); color:#fecdd3; border-color:rgba(251,113,133,.25); }

/* MasterData Admin - Role type column */
.klm-md-admin-grid.role { grid-template-columns: 1.1fr 1.2fr .7fr .55fr auto; }

/* MasterData User Access builder */
.klm-md-access-pick{display:grid;grid-template-columns:1fr 1fr 1.4fr auto;gap:12px;align-items:end}
.klm-md-access-list{display:grid;gap:8px;grid-column:1/-1;margin-top:10px;max-height:220px;overflow:auto}
.klm-md-access-chip{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(148,163,184,.28);border-radius:14px;background:linear-gradient(135deg,#fff,#f8fafc);box-shadow:0 10px 24px rgba(15,23,42,.06)}
.klm-md-access-chip b{color:#172554}.klm-md-access-chip span{color:#1d4ed8;font-weight:800}.klm-md-access-chip em{font-style:normal;color:#475569;font-weight:700}.klm-md-access-chip button{border:0;border-radius:999px;background:#fee2e2;color:#be123c;width:24px;height:24px;cursor:pointer;font-weight:900}
@media(max-width:900px){.klm-md-access-pick{grid-template-columns:1fr}.klm-md-access-chip{grid-template-columns:1fr}}

/* MasterData User Access builder layout tweak */
.klm-md-access-pick{grid-template-columns:minmax(260px,1fr) minmax(320px,1.2fr)!important;gap:16px 18px!important;align-items:end!important}
.klm-md-access-pick label:nth-of-type(1),.klm-md-access-pick label:nth-of-type(2){grid-row:1}
.klm-md-access-pick label:nth-of-type(3){grid-column:1/3;grid-row:2}
.klm-md-access-pick #mdAccessAdd{grid-column:3;grid-row:2;width:44px;height:44px;border-radius:999px;padding:0;font-size:0;align-self:end;display:grid;place-items:center}
.klm-md-access-pick #mdAccessAdd::before{content:'+';font-size:24px;line-height:1;font-weight:1000}
.klm-md-access-pick select,.klm-md-access-pick input{min-width:0;width:100%}
.klm-md-access-list{grid-column:1/-1!important}
@media(max-width:900px){.klm-md-access-pick{grid-template-columns:1fr auto!important}.klm-md-access-pick label{grid-column:1/-1!important;grid-row:auto!important}.klm-md-access-pick #mdAccessAdd{grid-column:2!important;grid-row:auto!important}}

/* MasterData Admin filter: force hidden rows */
.klm-md-admin-grid[hidden],
.klm-md-admin-grid.is-filtered-out{display:none!important}
.klm-md-grid-tools select[hidden]{display:none!important}

/* MasterData Config */
.klm-md-config-form{display:grid;gap:18px}
.klm-md-config-toolbar{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px}
.klm-md-config-toolbar label{display:grid;gap:7px;font-weight:900;color:#334155}
.klm-md-config-toolbar select{width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:12px 14px;background:#fff;font-weight:800;color:#0f172a}
.klm-md-config-panel{border:1px solid rgba(148,163,184,.35);border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#ffffff,#f8fafc);box-shadow:0 18px 45px rgba(15,23,42,.06)}
.klm-md-config-toggle{width:100%;border:0;background:linear-gradient(135deg,#eff6ff,#fdf2f8);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:1000;color:#172554}
.klm-md-config-toggle b{background:#e11d48;color:#fff;border-radius:999px;padding:6px 12px;box-shadow:0 10px 24px rgba(225,29,72,.25)}
.klm-md-config-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;padding:14px}
.klm-md-config-items label{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(148,163,184,.25);border-radius:14px;padding:11px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.04)}
.klm-md-config-items span{display:grid;gap:3px}.klm-md-config-items b{color:#0f172a}.klm-md-config-items em{font-style:normal;color:#64748b;font-size:11px;font-weight:800}
.klm-md-config-panel.is-collapsed .klm-md-config-items{display:none}
@media(max-width:900px){.klm-md-config-toolbar{grid-template-columns:1fr}}

/* MasterData Config simple line-tree view */
.klm-md-config-panel{background:#fff!important;box-shadow:none!important;border-color:#dbe3ef!important}
.klm-md-config-toggle{background:#f8fafc!important;color:#172554!important;justify-content:flex-start!important;gap:12px!important}
.klm-md-config-toggle b{margin-left:auto}
.klm-md-config-bulk{display:none!important}
.klm-md-config-toggle span:first-child{display:flex;align-items:center;gap:8px}
.klm-md-config-items{display:block!important;padding:8px 16px 12px 42px!important;background:#fff}
.klm-md-config-panel.is-collapsed .klm-md-config-items{display:none!important}
.klm-md-config-items label{display:flex!important;align-items:center!important;gap:9px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:7px 0!important;margin:0!important;border-bottom:1px dashed #e2e8f0!important;position:relative}
.klm-md-config-items label:before{content:'';position:absolute;left:-22px;top:18px;width:14px;border-top:1px solid #cbd5e1}
.klm-md-config-items label:last-child{border-bottom:0!important}
.klm-md-config-items span{display:flex!important;gap:8px!important;align-items:baseline!important}
.klm-md-config-items b{font-size:13px!important;color:#0f172a!important;font-weight:800!important}
.klm-md-config-items em{font-size:11px!important;color:#64748b!important;font-weight:700!important}

/* MasterData Config master checkbox */
.klm-md-config-toggle input[data-md-config-master]{width:14px;height:14px;accent-color:#e11d48;cursor:pointer}

/* MasterData Config saved grid */
.klm-md-config-saved{margin-top:22px;display:grid;gap:10px;overflow:visible}
.klm-md-config-saved h3{margin:0;color:#172554;font-size:15px;font-weight:1000}

/* MasterData Config modal sizing */
.klm-md-modal-panel .klm-md-config-form{display:grid;gap:16px;max-height:72vh;overflow:auto;padding-right:4px}
.klm-md-modal-panel .klm-md-config-toolbar{grid-template-columns:repeat(3,minmax(180px,1fr))}
.klm-md-modal-panel .klm-md-config-saved{margin-top:0}

/* MasterData Config modal group layout */
.klm-md-modal-panel .klm-md-config-toolbar.identity{grid-template-columns:1fr 1fr!important;position:sticky;top:0;z-index:2;background:#fff;padding-bottom:10px}
.klm-md-config-toolbar.identity select:disabled{background:#f1f5f9;color:#475569;cursor:not-allowed}
.klm-md-config-groups{display:grid;gap:10px}
.klm-md-config-groups .klm-md-config-panel{margin:0}
.klm-md-config-groups .klm-md-config-toggle{padding:10px 12px!important}
.klm-md-config-groups .klm-md-config-items{padding:6px 14px 10px 38px!important}
@media(max-width:900px){.klm-md-modal-panel .klm-md-config-toolbar.identity{grid-template-columns:1fr!important}}

/* MasterData Config modal: identity dropdowns stay top row */
.klm-md-modal-panel .klm-md-config-form.klm-md-modal-form{display:flex!important;flex-direction:column!important;gap:14px!important;max-height:72vh;overflow:auto}
.klm-md-modal-panel .klm-md-config-form .klm-md-config-toolbar.identity{display:grid!important;grid-template-columns:minmax(240px,1fr) minmax(280px,1.2fr)!important;gap:16px!important;width:100%!important;align-items:end!important;position:sticky;top:0;z-index:5;background:#fff;padding:0 0 12px 0;border-bottom:1px solid #e2e8f0}
.klm-md-modal-panel .klm-md-config-form .klm-md-config-toolbar.identity label{display:grid!important;gap:6px!important;min-height:auto!important;height:auto!important;width:100%!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.klm-md-modal-panel .klm-md-config-form .klm-md-config-toolbar.identity select{height:42px!important;min-height:42px!important;width:100%!important;padding:8px 12px!important;border-radius:12px!important}
.klm-md-modal-panel .klm-md-config-form .klm-md-config-groups{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:10px!important}
.klm-md-modal-panel .klm-md-config-form .klm-md-config-panel{width:100%!important}
.klm-md-modal-panel .klm-md-config-form>.klm-kb-admin-btn{align-self:stretch!important;width:100%!important}
@media(max-width:800px){.klm-md-modal-panel .klm-md-config-form .klm-md-config-toolbar.identity{grid-template-columns:1fr!important}}

/* MasterData Config sticky save */
.klm-md-modal-panel .klm-md-config-form>.klm-kb-admin-btn.primary{position:sticky!important;bottom:0!important;z-index:6!important;margin-top:4px!important;box-shadow:0 -12px 28px rgba(255,255,255,.92),0 16px 35px rgba(225,29,72,.25)!important}

/* MasterData Admin row action buttons */
.klm-md-admin-grid.actions:not(.config-set) { grid-template-columns: 1fr 1.4fr 2fr .55fr 230px; }
.klm-md-admin-grid.small.actions { grid-template-columns: 1fr 1.2fr .55fr 230px; }
.klm-md-admin-grid.group.actions { grid-template-columns: 1fr 1.5fr .7fr .45fr .55fr 230px; }
.klm-md-admin-grid.field.actions { grid-template-columns: 1fr 1.6fr .65fr .65fr .55fr 230px; }
.klm-md-admin-grid.assign.actions { grid-template-columns: 1.4fr 1.2fr .7fr .55fr .55fr 230px; }
.klm-md-row-actions { display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.klm-md-inline-form { display:inline-flex; margin:0; padding:0; }
.klm-md-mini-btn {
  border:1px solid rgba(148,163,184,.42); border-radius:999px; min-height:26px; padding:5px 9px;
  background:#fff; color:#334155; font-size:11px; font-weight:900; cursor:pointer; text-decoration:none !important;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
}
.klm-md-mini-btn:hover { transform:translateY(-1px); box-shadow:0 10px 18px rgba(15,23,42,.10); }
.klm-md-mini-btn.success { background:#dcfce7; border-color:#86efac; color:#166534; }
.klm-md-mini-btn.danger { background:#fee2e2; border-color:#fecaca; color:#991b1b; }
html[data-theme="dark"] .klm-md-mini-btn { background:rgba(30,41,59,.9); color:#e5e7eb; border-color:rgba(148,163,184,.28); }
html[data-theme="dark"] .klm-md-mini-btn.success { background:rgba(22,101,52,.28); color:#bbf7d0; }
html[data-theme="dark"] .klm-md-mini-btn.danger { background:rgba(127,29,29,.30); color:#fecaca; }
@media (max-width: 920px) {
  .klm-md-admin-grid.actions:not(.config-set),
  .klm-md-admin-grid.small.actions,
  .klm-md-admin-grid.group.actions,
  .klm-md-admin-grid.field.actions,
  .klm-md-admin-grid.assign.actions { grid-template-columns:1fr; }
  .klm-md-row-actions { justify-content:flex-start; }
}

/* MasterData Admin inactive rows */
.klm-md-admin-grid.is-inactive {
  opacity: .48; filter: grayscale(.65);
  background: rgba(226,232,240,.72) !important; border-style: dashed;
}
.klm-md-admin-grid.is-inactive strong,
.klm-md-admin-grid.is-inactive span { text-decoration: none; }
.klm-md-admin-grid.is-inactive b { color:#64748b; }
html[data-theme="dark"] .klm-md-admin-grid.is-inactive { background: rgba(30,41,59,.45) !important; }

/* MasterData Config dataset grid - SINGLE SOURCE OF TRUTH */
.klm-md-admin-grid.config-set,
.klm-md-admin-grid.config-set.actions,
.klm-md-admin-grid.config-set.actions.head{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0 10px!important;align-items:center!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding-left:12px!important;padding-right:12px!important}
.klm-md-admin-grid.config-set>*{min-width:0!important;box-sizing:border-box!important}
.klm-md-admin-grid.config-set strong{display:grid;gap:4px}
.klm-md-admin-grid.config-set small{font-size:11px;color:#64748b;font-weight:800}
.klm-md-group-list{display:flex;flex-wrap:wrap;gap:6px;max-width:100%;line-height:1.8}
.klm-md-group-list em{font-style:normal;background:#eef2ff;color:#3730a3;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:900}
.klm-md-admin-grid.config-set .klm-md-row-actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:6px!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;max-width:none!important;overflow:visible!important}
.klm-md-admin-grid.config-set .klm-md-inline-form{display:inline-flex!important;margin:0!important;padding:0!important}
.klm-md-admin-grid.config-set .klm-md-mini-btn{flex:0 0 30px!important;width:30px!important;height:30px!important;min-width:30px!important;max-width:30px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}


/* KLM tickets filter polish: equal controls + icon-only search */
.tickets-topbar {
  --klm-ticket-filter-height: 38px;
}
.tickets-topbar .quick-filter-select,
.tickets-topbar .search-input-wrap,
.tickets-topbar .search-input-wrap input,
.tickets-topbar .search-submit-btn {
  height: var(--klm-ticket-filter-height) !important;
  min-height: var(--klm-ticket-filter-height) !important;
  box-sizing: border-box !important;
}
.tickets-topbar .quick-filter-select {
  border-radius: 10px !important;
  padding: 0 34px 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: var(--klm-ticket-filter-height) !important;
  background-position: right 10px center !important;
  background-size: 15px !important;
}
.tickets-topbar .search-form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.tickets-topbar .search-input-wrap {
  display: flex !important;
  align-items: center !important;
}
.tickets-topbar .search-input-wrap svg {
  width: 15px !important;
  height: 15px !important;
}
.tickets-topbar .search-input-wrap input {
  padding: 0 12px 0 38px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: var(--klm-ticket-filter-height) !important;
}
.tickets-topbar .search-submit-btn {
  width: var(--klm-ticket-filter-height) !important;
  min-width: var(--klm-ticket-filter-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2563eb, #4f46e5 55%, #7c3aed) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28) !important;
}
.tickets-topbar .search-submit-btn .search-submit-icon {
  position: static !important;
  width: 17px !important;
  height: 17px !important;
  color: currentColor !important;
  pointer-events: none !important;
}
.tickets-topbar .search-submit-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34) !important;
}

/* KLM Supporter Custom: Single-card alignment */
.action-grid.single-card {
  grid-template-columns: 1fr !important;
  max-width: 600px;
  margin: 0 auto;
}

/* User Manager access modal: compact child-list controls */
#klmUmModal .klm-um-sublist-head {
  margin: 4px 0 8px 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#klmUmModal .klm-um-sublist-count {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}
#klmUmModal .klm-um-sublist-toggle {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border: 1px solid rgba(225,29,72,.24);
  border-radius: 999px;
  background: #fff1f2;
  color: #be123c;
  font-size: 16px;
  font-weight: 1000;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
#klmUmModal .klm-um-unit-list {
  margin: 0 0 10px 34px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
#klmUmModal .klm-um-parent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 13px;
  background: #fff;
  min-height: 42px;
  padding: 0 8px 0 0;
}
#klmUmModal .klm-um-parent-row .klm-um-check {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0;
}
#klmUmModal .klm-um-parent-row .klm-um-sublist-head,
#klmUmModal .klm-um-role-units > .klm-um-sublist-head {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#klmUmModal .klm-um-child-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: -10px -10px 8px;
  border-bottom: 1px solid #dbe3ef;
  background: #fff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}
#klmUmModal .klm-um-child-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 900;
}
html[data-theme="dark"] #klmUmModal .klm-um-sublist-count { color:#cbd5e1; }
html[data-theme="dark"] #klmUmModal .klm-um-sublist-toggle {
  background: rgba(159,18,57,.22);
  color: #fecdd3;
  border-color: rgba(251,113,133,.25);
}
html[data-theme="dark"] #klmUmModal .klm-um-parent-row,
html[data-theme="dark"] #klmUmModal .klm-um-child-toolbar {
  background: rgba(15,23,42,.92);
  border-color: rgba(148,163,184,.25);
}


/* Dark mode: User Manager access modal module sublists only */
html[data-theme="dark"] #klmUmModal .klm-um-support-modules > .klm-um-unit-list,
html[data-theme="dark"] #klmUmModal .klm-um-role-units > .klm-um-unit-list {
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(30,41,59,.96)) !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(2,6,23,.22) !important;
  color: #e5e7eb !important;
  scrollbar-color: rgba(148,163,184,.72) rgba(15,23,42,.86);
}
html[data-theme="dark"] #klmUmModal .klm-um-support-modules > .klm-um-unit-list label,
html[data-theme="dark"] #klmUmModal .klm-um-role-units > .klm-um-unit-list label {
  color: #e5e7eb !important;
}
html[data-theme="dark"] #klmUmModal .klm-um-support-modules > .klm-um-unit-list input,
html[data-theme="dark"] #klmUmModal .klm-um-role-units > .klm-um-unit-list input {
  accent-color: #fb7185;
}
html[data-theme="dark"] #klmUmModal .klm-um-child-toolbar,
html[data-theme="dark"] #klmUmModal .klm-um-child-toolbar label {
  color: #93c5fd !important;
}
html[data-theme="dark"] #klmUmModal .klm-um-support-modules > .klm-um-unit-list::-webkit-scrollbar,
html[data-theme="dark"] #klmUmModal .klm-um-role-units > .klm-um-unit-list::-webkit-scrollbar { width: 10px; }
html[data-theme="dark"] #klmUmModal .klm-um-support-modules > .klm-um-unit-list::-webkit-scrollbar-track,
html[data-theme="dark"] #klmUmModal .klm-um-role-units > .klm-um-unit-list::-webkit-scrollbar-track { background: rgba(15,23,42,.86); border-radius: 999px; }
html[data-theme="dark"] #klmUmModal .klm-um-support-modules > .klm-um-unit-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] #klmUmModal .klm-um-role-units > .klm-um-unit-list::-webkit-scrollbar-thumb { background: rgba(148,163,184,.72); border-radius: 999px; border: 2px solid rgba(15,23,42,.86); }

/* User Manager employee table redesign */
.klm-um-table-shell {
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}
.klm-um-user-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.klm-um-user-table thead th {
  padding: 16px 18px;
  color: #64748b;
  background: linear-gradient(180deg,#fff,#f8fbff);
  border-bottom: 1px solid #e5edf7;
  text-align: left;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.klm-um-user-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #e5edf7;
  vertical-align: middle;
}
.klm-um-user-table tbody tr:hover { background: #f8fbff; }
.klm-um-user-ident { display:flex; align-items:center; gap:12px; min-width:220px; }
.klm-um-avatar.compact { width:42px; height:42px; flex:0 0 42px; border-radius:14px; }
.klm-um-user-ident b,
.klm-um-partner-col b,
.klm-um-dept-col b,
.klm-um-login-col b { display:block; color:#0f172a; font-weight:950; line-height:1.25; }
.klm-um-user-ident em { display:block; color:#64748b; font-style:normal; font-weight:800; line-height:1.2; }
.klm-um-user-ident small { display:block; color:#64748b; font-weight:800; margin-top:3px; }
.klm-um-role-stack { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.klm-um-role-empty { display:inline-flex; padding:3px 9px; border-radius:8px; background:#eef4ff; color:#94a3b8; font-weight:950; }
.klm-um-cell-icon { margin-right:8px; filter:saturate(1.25); }
.klm-um-status-pill { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px; font-weight:950; }
.klm-um-status-pill.active { color:#16a34a; background:#dcfce7; }
.klm-um-status-pill.locked { color:#b45309; background:#fef3c7; }
.klm-um-status-pill.unregistered { color:#64748b; background:#f1f5f9; }
.klm-um-table-actions { display:flex; gap:7px; justify-content:flex-end; flex-wrap:nowrap; }
.klm-um-table-actions .klm-um-button.icon-only { width:31px; height:31px; min-width:31px; border-radius:10px; padding:0; }
.klm-um-table-footer { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; color:#64748b; font-weight:900; background:#fff; }
@media (max-width: 980px) { .klm-um-table-shell { overflow-x:auto; } .klm-um-user-table { min-width:980px; } }

.klm-um-crown {
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:4px; border-radius:999px;
  color:#92400e; background:linear-gradient(135deg,#fde68a,#fbbf24);
  box-shadow:0 6px 14px rgba(245,158,11,.24); font-style:normal;
}
.klm-um-project-master {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px; cursor:pointer;
  margin-left:auto; border:1px solid rgba(245,158,11,.35);
  background:rgba(245,158,11,.10); color:#b45309;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.klm-um-project-master input { display:none; }
.klm-um-project-master span { font-size:17px; line-height:1; filter:grayscale(1); opacity:.55; }
.klm-um-project-master:has(input:checked) {
  background:linear-gradient(135deg,#fef3c7,#f59e0b); color:#78350f;
  box-shadow:0 10px 22px rgba(245,158,11,.30); transform:translateY(-1px);
}
.klm-um-project-master:has(input:checked) span { filter:none; opacity:1; }

.klm-reassign-btn {
  margin-top:6px; border:1px solid rgba(245,158,11,.35); border-radius:999px;
  padding:4px 9px; font-size:11px; font-weight:900; cursor:pointer;
  color:#92400e; background:linear-gradient(135deg,#fef3c7,#fde68a);
  box-shadow:0 8px 18px rgba(245,158,11,.18);
}
.klm-reassign-btn:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(245,158,11,.26); }
.klm-reassign-box {
  position:absolute; z-index:99999; width:300px; padding:14px; border-radius:18px;
  background:#fff; border:1px solid rgba(148,163,184,.28);
  box-shadow:0 22px 55px rgba(15,23,42,.22); color:#0f172a;
}
.klm-reassign-title { font-weight:1000; margin-bottom:10px; color:#92400e; }
.klm-reassign-body select { width:100%; height:38px; border-radius:12px; border:1px solid #cbd5e1; padding:0 10px; font-weight:800; }
.klm-reassign-actions { margin-top:10px; display:flex; justify-content:flex-end; gap:8px; }
.klm-reassign-actions button { border:1px solid #cbd5e1; border-radius:999px; background:#fff; padding:7px 12px; font-weight:900; cursor:pointer; }
.klm-reassign-actions button.primary { background:linear-gradient(135deg,#f97316,#f59e0b); color:#fff; border-color:transparent; }
.klm-reassign-empty { color:#64748b; font-weight:800; }

.klm-pm-panel {
  margin:18px 0 20px; border-radius:24px; padding:16px;
  background:linear-gradient(135deg,rgba(255,251,235,.96),rgba(255,255,255,.94));
  border:1px solid rgba(245,158,11,.28); box-shadow:0 18px 45px rgba(146,64,14,.10);
}
.klm-pm-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; }
.klm-pm-head b { display:block; color:#92400e; font-size:17px; font-weight:1000; }
.klm-pm-head span { display:block; color:#64748b; font-size:12px; font-weight:800; margin-top:2px; }
.klm-pm-head select { min-width:260px; height:38px; border-radius:14px; border:1px solid #fbbf24; padding:0 12px; font-weight:900; background:#fff; color:#78350f; }
.klm-pm-list { display:grid; gap:10px; }
.klm-pm-row { display:grid; grid-template-columns:minmax(180px,.8fr) 1.6fr auto; gap:12px; align-items:start; padding:12px; border-radius:18px; background:#fff; border:1px solid rgba(251,191,36,.22); }
.klm-pm-person b { display:block; color:#0f172a; font-weight:1000; }
.klm-pm-person span { display:block; color:#64748b; font-size:12px; font-weight:800; margin-top:3px; }
.klm-pm-modules { display:flex; flex-wrap:wrap; gap:7px; }
.klm-pm-modules label { display:inline-flex; gap:5px; align-items:center; border-radius:999px; padding:6px 9px; background:#f8fafc; border:1px solid #e2e8f0; font-size:12px; font-weight:900; color:#334155; }
.klm-pm-modules input { accent-color:#f59e0b; }
.klm-pm-save { border:0; border-radius:999px; padding:8px 14px; background:linear-gradient(135deg,#f97316,#f59e0b); color:#fff; font-weight:1000; cursor:pointer; box-shadow:0 10px 20px rgba(249,115,22,.22); }
.klm-pm-empty { padding:16px; border-radius:16px; background:#fff; color:#64748b; font-weight:900; }
.klm-pm-empty.error { color:#dc2626; }
@media(max-width:900px){ .klm-pm-head,.klm-pm-row{grid-template-columns:1fr;display:grid}.klm-pm-head select{width:100%;min-width:0} }

/* ===== KLM PWA app-shell layer ===== */
html.klm-pwa-ready {
  min-height: 100%;
}

html.klm-pwa-standalone body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

html.klm-pwa-standalone .klm-topbar {
  padding-top: env(safe-area-inset-top, 0px);
  min-height: calc(60px + env(safe-area-inset-top, 0px));
  height: auto;
  background: linear-gradient(180deg, #061b3a 0%, #071a33 58%, #081426 100%) !important;
  border-bottom: 1px solid rgba(56, 189, 248, .18) !important;
  box-shadow: 0 10px 32px rgba(2, 6, 23, .38) !important;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

html.klm-pwa-standalone .klm-topbar .topbar-title,
html.klm-pwa-standalone .klm-topbar .topbar-tagline,
html.klm-pwa-standalone .klm-topbar .topbar-nav-link,
html.klm-pwa-standalone .klm-topbar .header-icon-btn,
html.klm-pwa-standalone .klm-topbar .user-menu-trigger {
  color: #eaf2ff !important;
}

html.klm-pwa-standalone .klm-topbar .topbar-tagline {
  color: rgba(226, 232, 240, .78) !important;
}

html.klm-pwa-standalone .klm-topbar .topbar-nav-link.active,
html.klm-pwa-standalone .klm-topbar .topbar-nav-link:hover {
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}

html.klm-pwa-standalone .klm-topbar .topbar-logo img {
  filter: drop-shadow(0 8px 18px rgba(56, 189, 248, .16)) !important;
}

html.klm-pwa-standalone .klm-topbar .header-pill-btn,
html.klm-pwa-standalone .klm-topbar .header-icon-btn,
html.klm-pwa-standalone .klm-topbar .user-menu-trigger {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(125, 211, 252, .20) !important;
}

html.klm-pwa-standalone .klm-topbar .header-pill-btn.primary {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  border-color: rgba(125, 211, 252, .35) !important;
  color: #fff !important;
}

html.klm-pwa-standalone #content {
  padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

.klm-pwa-install-card {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 99999;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid rgba(225, 29, 72, .24);
  border-radius: 22px;
  color: var(--klm-text, #0f172a);
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 241, 242, .90));
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18), 0 10px 28px rgba(225, 29, 72, .16);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  animation: klmPwaSlideUp .32s ease-out both;
}

.klm-pwa-install-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  background: linear-gradient(135deg, #e11d48, #7c3aed);
  box-shadow: 0 12px 24px rgba(225, 29, 72, .28);
}

.klm-pwa-install-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.klm-pwa-install-copy strong {
  color: var(--klm-text, #0f172a);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: -.01em;
}

.klm-pwa-install-copy span {
  color: var(--klm-text-muted, #64748b);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.klm-pwa-install-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.klm-pwa-install-now,
.klm-pwa-install-later {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
}

.klm-pwa-install-now {
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, #e11d48, #be123c);
  box-shadow: 0 10px 24px rgba(225, 29, 72, .26);
}

.klm-pwa-install-later {
  width: 40px;
  padding: 0;
  color: var(--klm-text-muted, #64748b);
  background: rgba(148, 163, 184, .14);
}

.klm-pwa-toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 100000;
  max-width: min(520px, calc(100vw - 32px));
  padding: 11px 16px;
  border: 1px solid var(--klm-border, rgba(148, 163, 184, .24));
  border-radius: 999px;
  color: var(--klm-text, #0f172a);
  background: var(--klm-card, rgba(255, 255, 255, .94));
  box-shadow: 0 16px 42px rgba(15, 23, 42, .16);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.klm-pwa-toast.active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.klm-pwa-toast.success {
  border-color: rgba(34, 197, 94, .28);
  color: #15803d;
}

.klm-pwa-toast.warning {
  border-color: rgba(245, 158, 11, .32);
  color: #b45309;
}

html[data-theme="dark"] .klm-pwa-install-card {
  color: var(--klm-text, #e2e8f0);
  background: linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(76, 5, 25, .82));
  border-color: rgba(251, 113, 133, .24);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 10px 28px rgba(225, 29, 72, .15);
}

html[data-theme="dark"] .klm-pwa-install-copy strong {
  color: var(--klm-text, #e2e8f0);
}

html[data-theme="dark"] .klm-pwa-install-copy span {
  color: var(--klm-text-muted, #94a3b8);
}

html[data-theme="dark"] .klm-pwa-toast {
  color: var(--klm-text, #e2e8f0);
  background: rgba(15, 23, 42, .92);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .38);
}

@keyframes klmPwaSlideUp {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (display-mode: standalone) {
  body {
    user-select: none;
  }

  input,
  textarea,
  select,
  [contenteditable="true"] {
    user-select: text;
  }
}

@media (max-width: 768px) {
  .klm-pwa-install-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .klm-pwa-install-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .klm-pwa-install-now {
    flex: 1;
  }

  .klm-pwa-standalone .topbar-tagline,
  .klm-pwa-standalone .quick-access-buttons,
  .klm-pwa-standalone .lang-pill-wrapper {
    display: none !important;
  }
}


/* KLM topbar theme sync + provided logo rendering */
.klm-topbar {
  background: var(--klm-bg, #f8fafc) !important;
  border-bottom: 1px solid var(--klm-border, #e2e8f0) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

html[data-theme="dark"] .klm-topbar {
  background: var(--klm-bg, #020617) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32) !important;
}

.klm-topbar .topbar-logo img {
  max-height: 46px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: none !important;
}

html[data-theme="light"] .klm-topbar .topbar-title,
html[data-theme="dark"] .klm-topbar .topbar-title {
  color: var(--klm-text, #0f172a) !important;
}

html[data-theme="light"] .klm-topbar .topbar-tagline,
html[data-theme="dark"] .klm-topbar .topbar-tagline {
  color: var(--klm-text-muted, #64748b) !important;
}

html[data-theme="dark"] .klm-topbar .topbar-logo img {
  filter: drop-shadow(0 8px 18px rgba(225, 29, 72, .18)) !important;
}


/* Profile password modal UX polish - non-forcing, preserves legacy flow */
.klm-force-password-panel {
  grid-template-columns: minmax(240px, 1fr) auto !important;
  align-items: center !important;
}
.klm-force-password-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.klm-force-password-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  color: #fff;
  background: linear-gradient(135deg, #e11d48, #be123c);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(225, 29, 72, .28);
}
.klm-force-password-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(225, 29, 72, .34);
}
.klm-password-modal::backdrop {
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(8px);
}
.klm-password-modal-content {
  max-width: 620px !important;
  border-radius: 24px !important;
  overflow: hidden;
  border: 1px solid rgba(225, 29, 72, .20) !important;
  box-shadow: 0 30px 90px rgba(2, 6, 23, .32) !important;
}
.klm-password-modal-header {
  align-items: flex-start !important;
  gap: 18px;
  background: linear-gradient(135deg, rgba(225, 29, 72, .10), rgba(79, 70, 229, .08));
}
.klm-password-modal-header h3 {
  margin: 4px 0 4px !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
  color: var(--klm-text, #0f172a) !important;
}
.klm-password-modal-header p {
  margin: 0;
  color: var(--klm-text-muted, #64748b);
  font-size: 13px;
  font-weight: 700;
}
.klm-password-eyebrow {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  color: #be123c;
  background: rgba(225, 29, 72, .10);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.klm-password-guidance {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(59, 130, 246, .18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(239, 246, 255, .92), rgba(255, 255, 255, .86));
  color: var(--klm-text, #0f172a);
}
.klm-password-guidance strong {
  display: block;
  margin-bottom: 8px;
  color: #1d4ed8;
  font-weight: 1000;
}
.klm-password-guidance ul {
  margin: 0;
  padding-left: 18px;
  color: var(--klm-text-muted, #64748b);
  font-size: 12px;
  line-height: 1.65;
  font-weight: 750;
}
.klm-password-field label {
  font-weight: 900 !important;
  color: var(--klm-text, #0f172a) !important;
}
.klm-password-field input {
  width: 100%;
  min-height: 44px;
  margin-top: 7px;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid var(--klm-border, #dbe3ef);
  background: var(--klm-card, #fff);
  color: var(--klm-text, #0f172a);
  font-weight: 800;
}
.klm-password-field input:focus {
  outline: none;
  border-color: #e11d48;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .12);
}
.klm-password-modal-error {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 13px;
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
  font-size: 12px;
  font-weight: 900;
}
.klm-password-modal-error.active { display: block; }
html[data-theme="dark"] .klm-password-guidance {
  background: linear-gradient(135deg, rgba(30, 41, 59, .88), rgba(15, 23, 42, .78));
  border-color: rgba(96, 165, 250, .22);
}
#pwdModal .klm-password-modal-header h3 {
  margin: 4px 0 0 !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  font-weight: 950 !important;
}
html[data-theme="dark"] .klm-password-guidance strong { color: #93c5fd; }
html[data-theme="dark"] .klm-password-field input {
  background: rgba(15, 23, 42, .76);
  border-color: rgba(148, 163, 184, .26);
}
@media (max-width: 760px) {
  .klm-force-password-panel { grid-template-columns: 1fr !important; }
  .klm-force-password-actions { justify-content: stretch; }
  .klm-force-password-btn { width: 100%; }
}


/* Force password reset gate: show only modal until password is changed */
.klm-profile-password-gated > .profile-page-header,
.klm-profile-password-gated > form {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.klm-profile-password-gated::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 998;
  background:
    radial-gradient(circle at 20% 20%, rgba(225, 29, 72, .10), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(59, 130, 246, .10), transparent 28%),
    var(--klm-bg, #f8fafc);
}
.klm-profile-password-gated .klm-password-modal {
  z-index: 1000;
}
.klm-profile-password-gated .klm-password-modal-content {
  animation: klmPasswordGateIn .28s ease-out both;
}
@keyframes klmPasswordGateIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* Password dialog must override legacy .klm-modal { display:none } rules only when opened */
dialog#pwdModal.klm-password-modal {
  display: none !important;
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(620px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  color: var(--klm-text, #0f172a) !important;
  z-index: 2147483600 !important;
}
dialog#pwdModal.klm-password-modal[open],
dialog#pwdModal.klm-password-modal.active {
  display: block !important;
}
dialog#pwdModal.klm-password-modal:not([open]):not(.active) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
dialog#pwdModal.klm-password-modal::backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
}
dialog#pwdModal.klm-password-modal[open]::backdrop,
dialog#pwdModal.klm-password-modal.active::backdrop {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(8px) !important;
}


/* Premium password modal visual refresh */
dialog#pwdModal.klm-password-modal[open],
dialog#pwdModal.klm-password-modal.active {
  width: min(560px, calc(100vw - 28px)) !important;
  border-radius: 28px !important;
  background: transparent !important;
  box-shadow: 0 36px 120px rgba(2, 6, 23, .38) !important;
}
#pwdModal .klm-password-modal-content {
  max-width: none !important;
  width: 100% !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 28px 80px rgba(15,23,42,.22) !important;
}
#pwdModal .klm-password-modal-header {
  position: relative;
  padding: 28px 32px 22px !important;
  border-bottom: 1px solid rgba(226,232,240,.92) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(225,29,72,.14), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #fff1f2 100%) !important;
}
#pwdModal .klm-password-modal-header::before {
  content: '';
  position: absolute;
  left: 32px;
  bottom: 0;
  width: 86px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e11d48, #fb7185);
}
#pwdModal .klm-password-eyebrow {
  color: #be123c !important;
  background: #ffe4e6 !important;
  border: 1px solid #fecdd3 !important;
  box-shadow: none !important;
}
#pwdModal .klm-password-modal-header h3 {
  margin-top: 10px !important;
  color: #0f172a !important;
  font-size: 28px !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
}
#pwdModal .klm-password-modal-header p {
  max-width: 390px;
  margin-top: 8px !important;
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 750 !important;
}
#pwdModal .close-modal {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.10) !important;
}
#pwdModal .klm-password-modal-body {
  padding: 18px 32px 16px !important;
  background: #ffffff !important;
}
#pwdModal .klm-password-guidance {
  margin: 0 0 12px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 1px solid #bfdbfe !important;
  background: linear-gradient(135deg, #eff6ff, #f8fafc) !important;
  box-shadow: 0 6px 14px rgba(37,99,235,.04) !important;
}
#pwdModal .klm-password-guidance strong {
  color: #1d4ed8 !important;
  font-size: 14px !important;
  letter-spacing: -.01em !important;
}
#pwdModal .klm-password-guidance ul {
  margin-top: 8px !important;
  color: #334155 !important;
  font-size: 13px !important;
  line-height: 1.62 !important;
  font-weight: 700 !important;
}
#pwdModal .klm-password-field {
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
#pwdModal .klm-password-field label {
  color: #0f172a !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
}
#pwdModal .klm-password-field input {
  min-height: 38px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.04) !important;
}
#pwdModal .klm-password-field input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
#pwdModal .klm-password-field input:focus {
  background: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 4px rgba(225,29,72,.13), 0 10px 22px rgba(225,29,72,.08) !important;
}
#pwdModal .klm-password-modal-footer {
  padding: 14px 32px 18px !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}
#pwdModal .klm-password-modal-footer .button {
  min-width: 154px !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e11d48, #be123c) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  text-shadow: none !important;
  box-shadow: 0 14px 28px rgba(225,29,72,.28) !important;
}
#pwdModal .klm-password-modal-footer .button:disabled,
#pwdModal .klm-password-modal-footer .button[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: .46 !important;
  filter: grayscale(.28) !important;
  box-shadow: none !important;
}
#pwdModal .klm-password-modal-footer .btn-cancel-text {
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
  border: 1px solid #cbd5e1 !important;
}
#pwdModal .klm-password-modal-error.active {
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}
#pwdModal .klm-password-checklist {
  display: grid !important;
  gap: 1px !important;
  margin-top: 8px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  background: #fff7f7 !important;
  border: 1px solid #fecdd3 !important;
}
#pwdModal .klm-password-check-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #dc2626 !important;
  font-size: 10px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.16 !important;
  transition: color .18s ease, transform .18s ease !important;
}
#pwdModal .klm-password-check-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  flex: 0 0 auto !important;
}
#pwdModal .klm-password-check-item.is-valid {
  color: #16a34a !important;
}
#pwdModal .klm-password-check-item.is-valid .klm-password-check-icon {
  background: #dcfce7 !important;
  color: #16a34a !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
}
@media (max-width: 640px) {
  #pwdModal .klm-password-modal-header,
  #pwdModal .klm-password-modal-body,
  #pwdModal .klm-password-modal-footer { padding-left: 20px !important; padding-right: 20px !important; }
  #pwdModal .klm-password-field { grid-template-columns: 1fr !important; gap: 8px !important; }
  #pwdModal .klm-password-modal-footer { flex-direction: column-reverse !important; }
  #pwdModal .klm-password-modal-footer .button { width: 100% !important; }
}


/* Password modal desktop sizing + scrollbar removal */
@media (min-width: 900px) {
  dialog#pwdModal.klm-password-modal[open],
  dialog#pwdModal.klm-password-modal.active {
    width: min(760px, calc(100vw - 96px)) !important;
    max-width: 760px !important;
    max-height: min(860px, calc(100vh - 64px)) !important;
    overflow: hidden !important;
  }
  #pwdModal .klm-password-modal-content {
    overflow: hidden !important;
  }
  #pwdModal .klm-password-modal-header {
    padding: 20px 44px 14px !important;
  }
  #pwdModal .klm-password-modal-header h3 {
    font-size: 28px !important;
    line-height: 1.02 !important;
  }
  #pwdModal .klm-password-modal-header p {
    max-width: 520px !important;
    font-size: 16px !important;
  }
  #pwdModal .klm-password-modal-body {
    padding: 16px 44px 14px !important;
    overflow: hidden !important;
  }
  #pwdModal .klm-password-guidance {
    padding: 18px 22px !important;
    margin-bottom: 26px !important;
  }
  #pwdModal .klm-password-guidance strong {
    font-size: 16px !important;
  }
  #pwdModal .klm-password-guidance ul {
    font-size: 14px !important;
  }
  #pwdModal .klm-password-field {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 22px !important;
    margin-bottom: 18px !important;
  }
  #pwdModal .klm-password-field input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #pwdModal .klm-password-modal-footer {
    padding: 24px 44px 32px !important;
  }
}
#pwdModal,
#pwdModal *,
#pwdModal *::before,
#pwdModal *::after {
  box-sizing: border-box !important;
}
dialog#pwdModal.klm-password-modal {
  overflow-x: hidden !important;
}
#pwdModal .klm-password-modal-content,
#pwdModal .klm-password-modal-header,
#pwdModal .klm-password-modal-body,
#pwdModal .klm-password-modal-footer {
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* Simple tri-language password guidance */
#pwdModal .klm-password-guidance-simple {
  display: grid !important;
  gap: 8px !important;
  padding: 18px 22px !important;
  text-align: center !important;
}
#pwdModal .klm-password-guidance-simple p {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
}
#pwdModal .klm-password-guide-vi {
  color: #0f172a !important;
}
#pwdModal .klm-password-guide-en {
  color: #2563eb !important;
}
#pwdModal .klm-password-guide-zh {
  color: #16a34a !important;
}
html[data-theme="dark"] #pwdModal .klm-password-guide-vi {
  color: #e2e8f0 !important;
}
html[data-theme="dark"] #pwdModal .klm-password-guide-en {
  color: #60a5fa !important;
}
html[data-theme="dark"] #pwdModal .klm-password-guide-zh {
  color: #4ade80 !important;
}


/* User Manager success/error notice */
.klm-um-manager-notice {
  position: sticky;
  top: 14px;
  z-index: 30;
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 900;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
  border: 1px solid transparent;
}
.klm-um-manager-notice.success {
  color: #065f46;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #a7f3d0;
}
.klm-um-manager-notice.error {
  color: #be123c;
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  border-color: #fecdd3;
}
html[data-theme="dark"] .klm-um-manager-notice.success {
  color: #bbf7d0;
  background: rgba(6, 95, 70, .82);
  border-color: rgba(74, 222, 128, .34);
}
html[data-theme="dark"] .klm-um-manager-notice.error {
  color: #fecdd3;
  background: rgba(136, 19, 55, .82);
  border-color: rgba(251, 113, 133, .38);
}


/* Defensive close rule for User Manager form modal */
#klmUmFormModal[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
#klmUmFormModal[aria-hidden="false"].active {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* Canonical User Manager form modal state: hidden attribute wins */
#klmUmFormModal[hidden],
#klmUmFormModal[aria-hidden="true"]:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#klmUmFormModal.active:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Canonical hidden-state guard for high z-index client overlays.
   These rules prevent stale fullscreen layers from capturing clicks while
   preserving legitimate open states controlled by active/open/hidden flags. */
.klm-lightbox:not(.active),
.klm-translation-modal:not(.active),
.klm-activity-panel:not(.active),
#klmPrintLoadingOverlay:not(.active),
.klm-ai-recap-modal:not(.active),
.klm-um-modal:not(.active),
.klm-md-modal[hidden],
.klm-modal-overlay:not(.active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.klm-lightbox.active,
.klm-translation-modal.active,
.klm-activity-panel.active,
#klmPrintLoadingOverlay.active,
.klm-ai-recap-modal.active,
.klm-um-modal.active,
.klm-md-modal:not([hidden]),
.klm-modal-overlay.active {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* KLM ticket detail participant avatar strips */
.klm-ticket-card-title-with-avatars {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.klm-ticket-card-title-with-avatars > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0;
  white-space: nowrap;
  flex: 1 1 auto;
}

.klm-ticket-card-title-with-avatars .klm-ticket-avatar-strip {
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  min-height: 26px !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

.klm-ticket-avatar-strip {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 30px;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.klm-ticket-avatar-item,
.klm-ticket-avatar-more {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  margin-right: -6px;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, z-index 0.16s ease;
  text-decoration: none !important;
  cursor: pointer;
}

.klm-ticket-avatar-item:hover,
.klm-ticket-avatar-more:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.2);
  z-index: 5;
}

.klm-ticket-avatar-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.klm-ticket-avatar-initials,
.klm-ticket-avatar-more {
  font-size: 10px;
  font-weight: 800;
  color: #334155;
  letter-spacing: -0.03em;
}

.klm-ticket-avatar-item.is-requester {
  outline: 2px solid rgba(37, 99, 235, 0.38);
}

.klm-ticket-avatar-item.is-collab {
  outline: 2px solid rgba(124, 58, 237, 0.38);
}

.klm-ticket-avatar-item.is-primary-support {
  outline: 2px solid rgba(22, 163, 74, 0.45);
}

.klm-ticket-avatar-item.is-support-history {
  outline: 2px solid rgba(245, 158, 11, 0.46);
}

.klm-ticket-avatar-item.is-agent {
  outline: 2px solid rgba(71, 85, 105, 0.42);
}

.klm-ticket-avatar-more {
  margin-left: 9px;
  margin-right: 0;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
}



/* =========================================================
   KLM Mobile/Tablet UX Patch - desktop-safe
   Applies only <= 1024px. Desktop >=1025px is intentionally untouched.
   ========================================================= */
.klm-mobile-only,
.klm-tablet-only,
.klm-mobile-action-bar { display: none !important; }

@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  #container, #content, .wrapper, .main-content, .ticket-dashboard-wrapper {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  #content {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 10px 10px calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .klm-mobile-only { display: block !important; }

  /* Login: compact, phone/tablet-friendly, no desktop impact. */
  .login-wrapper,
  .login-container,
  .auth-container,
  .client-login-container {
    width: min(100%, 920px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }
  .login-wrapper { gap: 14px !important; align-items: stretch !important; }
  .login-left, .login-right,
  .login-panel, .login-box,
  #login, form[action*="login.php"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .login-box, .login-panel, #login {
    border-radius: 18px !important;
    padding: 18px !important;
  }
  .login-box input[type="text"], .login-box input[type="email"], .login-box input[type="password"],
  .login-panel input[type="text"], .login-panel input[type="email"], .login-panel input[type="password"],
  #login input[type="text"], #login input[type="email"], #login input[type="password"] {
    min-height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  .login-box input[type="submit"], .login-panel input[type="submit"], #login input[type="submit"],
  .login-box button, .login-panel button, #login button {
    min-height: 44px !important;
    width: 100% !important;
    border-radius: 12px !important;
  }



  /* Login final mobile/tablet polish. */
  body:has(.login-wrapper),
  body:has(#login) {
    background: radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 34%),
      linear-gradient(180deg, #f8fafc, #eef2ff) !important;
  }
  .login-wrapper {
    min-height: calc(100vh - 120px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
  }
  .login-left {
    border-radius: 22px !important;
    padding: 22px !important;
    min-height: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0f172a, #1d4ed8) !important;
    color: #fff !important;
    overflow: hidden !important;
  }
  .login-left h1, .login-left h2, .login-left h3,
  .login-left p, .login-left span { color: inherit !important; }
  .login-right {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .login-box, .login-panel, #login {
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 20px 55px rgba(15,23,42,.10) !important;
  }
  #login table, #login tbody, #login tr, #login td,
  .login-box table, .login-box tbody, .login-box tr, .login-box td,
  .login-panel table, .login-panel tbody, .login-panel tr, .login-panel td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #login td, .login-box td, .login-panel td { padding: 4px 0 !important; }
  #login label, .login-box label, .login-panel label {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #334155 !important;
  }
  #login input[type="text"], #login input[type="password"], #login input[type="email"],
  .login-box input[type="text"], .login-box input[type="password"], .login-box input[type="email"],
  .login-panel input[type="text"], .login-panel input[type="password"], .login-panel input[type="email"] {
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    padding: 10px 12px !important;
  }
  #login input[type="text"]:focus, #login input[type="password"]:focus, #login input[type="email"]:focus,
  .login-box input[type="text"]:focus, .login-box input[type="password"]:focus, .login-box input[type="email"]:focus,
  .login-panel input[type="text"]:focus, .login-panel input[type="password"]:focus, .login-panel input[type="email"]:focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
    background: #fff !important;
  }
  #login input[type="submit"], #login button[type="submit"],
  .login-box input[type="submit"], .login-box button[type="submit"],
  .login-panel input[type="submit"], .login-panel button[type="submit"] {
    margin-top: 8px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 24px rgba(37,99,235,.22) !important;
  }
  #msg_error, #msg_warning, #msg_notice, #msg_info {
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Ticket dashboard: turn desktop controls into scrollable compact bands. */
  .ticket-page-head {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
  }
  .ticket-page-head .head-icon { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }
  .ticket-page-head h1 { font-size: 18px !important; line-height: 1.15 !important; margin: 0 !important; }
  .ticket-page-head p { font-size: 12px !important; margin: 2px 0 0 !important; }
  .tickets-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .tabs-group {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tabs-group .tab-item {
    flex: 0 0 auto !important;
    min-width: 92px !important;
    padding: 7px 10px !important;
  }
  .tabs-group .tab-status-label { white-space: nowrap !important; font-size: 11px !important; }
  .tabs-group .tab-count { font-size: 16px !important; }
  .filters-search-column { min-width: 0 !important; width: 100% !important; }
  .inline-filter-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .filter-select-wrap, .quick-filter-select, .search-group, .search-form { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .quick-filter-select, .rows-per-page-select { min-height: 38px !important; font-size: 13px !important; }
  .search-input-wrap input { min-height: 40px !important; font-size: 15px !important; }

  /* Ticket list: compact inbox style without changing desktop markup. */
  .tickets-table-card {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }
  .table-scroll-wrapper { overflow: visible !important; }
  table.klm-tickets-table,
  table.klm-tickets-table thead,
  table.klm-tickets-table tbody,
  table.klm-tickets-table tr,
  table.klm-tickets-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  table.klm-tickets-table thead { display: none !important; }
  table.klm-tickets-table tr {
    position: relative !important;
    padding: 9px 10px 10px !important;
    border-bottom: 1px solid rgba(148,163,184,.22) !important;
    background: var(--klm-card, #fff) !important;
    min-height: 92px !important;
  }
  table.klm-tickets-table tr:active { background: rgba(59,130,246,.06) !important; }
  table.klm-tickets-table td { border: 0 !important; padding: 0 !important; }
  table.klm-tickets-table .col-id { padding-right: 112px !important; margin-bottom: 4px !important; }
  table.klm-tickets-table .ticket-num { font-size: 12px !important; font-weight: 900 !important; color: #2563eb !important; }
  table.klm-tickets-table .ticket-topic-type { display: inline !important; font-size: 11px !important; color: #64748b !important; margin-left: 6px !important; }
  table.klm-tickets-table .col-created {
    position: absolute !important;
    top: 9px !important;
    right: 10px !important;
    width: auto !important;
  }
  table.klm-tickets-table .ticket-date-badge {
    width: auto !important;
    min-width: 46px !important;
    height: auto !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    gap: 3px !important;
    align-items: baseline !important;
  }
  table.klm-tickets-table .ticket-date-daymonth,
  table.klm-tickets-table .ticket-date-year { font-size: 10px !important; line-height: 1 !important; }
  table.klm-tickets-table .col-info { margin: 3px 0 6px !important; }
  table.klm-tickets-table .ticket-title,
  table.klm-tickets-table .klm-list-title-line {
    font-size: 13px !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  table.klm-tickets-table .klm-list-title-line:not(.is-original) { display: none !important; }
  table.klm-tickets-table .ticket-meta-row {
    margin-top: 5px !important;
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  table.klm-tickets-table .meta-tag { font-size: 10px !important; padding: 2px 6px !important; border-radius: 999px !important; }
  table.klm-tickets-table .col-category,
  table.klm-tickets-table .col-attach { display: none !important; }
  table.klm-tickets-table .col-requester,
  table.klm-tickets-table .col-assignee {
    display: inline-flex !important;
    width: auto !important;
    max-width: calc(50% - 4px) !important;
    vertical-align: top !important;
  }
  table.klm-tickets-table .requester-block,
  table.klm-tickets-table .assignee-block {
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  table.klm-tickets-table .requester-avatar,
  table.klm-tickets-table .assignee-avatar { width: 22px !important; height: 22px !important; flex: 0 0 22px !important; font-size: 9px !important; }
  table.klm-tickets-table .requester-name,
  table.klm-tickets-table .assignee-name {
    font-size: 11px !important;
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  table.klm-tickets-table .requester-email,
  table.klm-tickets-table .assignee-role { display: none !important; }
  table.klm-tickets-table .col-status {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
  }
  table.klm-tickets-table .status-pill {
    min-height: 24px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  .tickets-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .compact-pagination { justify-content: center !important; flex-wrap: wrap !important; }



  /* Mobile ticket workflow summary and sticky actions. */
  .klm-ticket-mobile-workflow {
    margin: -6px 0 12px !important;
    padding: 12px !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)) !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.06) !important;
  }
  .klm-mobile-ticket-topline {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding-bottom: 2px !important;
  }
  .klm-mobile-ticket-number {
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #2563eb !important;
  }
  .klm-mobile-ticket-state,
  .klm-mobile-ticket-priority {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 22px !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    background: #f8fafc !important;
    color: #475569 !important;
  }
  .klm-mobile-ticket-state.is-new { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
  .klm-mobile-ticket-state.is-in_progress { background: #fff7ed !important; color: #c2410c !important; border-color: #fed7aa !important; }
  .klm-mobile-ticket-state.is-awaiting_verification { background: #fefce8 !important; color: #a16207 !important; border-color: #fde68a !important; }
  .klm-mobile-ticket-state.is-awaiting_closure { background: #ecfdf5 !important; color: #047857 !important; border-color: #bbf7d0 !important; }
  .klm-mobile-ticket-state.is-closed { background: #dcfce7 !important; color: #166534 !important; border-color: #86efac !important; }
  .klm-mobile-ticket-state.is-cancelled { background: #f1f5f9 !important; color: #475569 !important; border-color: #cbd5e1 !important; }
  .klm-mobile-ticket-title {
    margin: 7px 0 9px !important;
    font-size: 15px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  .klm-mobile-ticket-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  .klm-mobile-ticket-meta span {
    min-width: 0 !important;
    font-size: 11px !important;
    color: #334155 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .klm-mobile-ticket-meta b {
    display: block !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-bottom: 1px !important;
  }
  .klm-mobile-ticket-progress {
    padding: 10px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(148,163,184,.22) !important;
  }
  .klm-mobile-progress-rail {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  .klm-mobile-progress-rail .step {
    height: 4px !important;
    border-radius: 999px !important;
    background: #e2e8f0 !important;
  }
  .klm-mobile-progress-rail .step.is-done { background: linear-gradient(90deg, #38bdf8, #2563eb) !important; }
  .klm-mobile-ticket-progress strong { display: block !important; font-size: 12px !important; color: #0f172a !important; margin-bottom: 2px !important; }
  .klm-mobile-ticket-progress p { margin: 0 !important; font-size: 12px !important; line-height: 1.35 !important; color: #475569 !important; }
  .klm-mobile-ticket-actions-inline {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .klm-mobile-ticket-actions-inline .button {
    min-height: 38px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }
  .klm-ticket-mobile-action-bar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 99990 !important;
    display: grid !important;
    grid-template-columns: 1.2fr 1fr .8fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(15,23,42,.88) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 36px rgba(15,23,42,.24) !important;
  }
  .klm-mobile-action {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #e2e8f0 !important;
    background: rgba(255,255,255,.12) !important;
  }
  .klm-mobile-action.primary {
    color: #fff !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  }
  .klm-mobile-action.ghost { background: rgba(255,255,255,.08) !important; color: #cbd5e1 !important; }

  /* Ticket detail: compact cards, metadata no longer dominates. */
  .ticket-view-header { gap: 8px !important; margin-bottom: 10px !important; padding-bottom: 8px !important; }
  .ticket-view-header h1 { font-size: 18px !important; line-height: 1.2 !important; gap: 8px !important; }
  .ticket-info-grid { grid-template-columns: 1fr !important; gap: 8px !important; margin-bottom: 12px !important; }
  .info-card {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  .info-card h3 { font-size: 13px !important; margin-bottom: 7px !important; padding-bottom: 6px !important; }
  .info-card table, .info-card tbody, .info-card tr, .info-card th, .info-card td { display: block !important; width: 100% !important; box-sizing: border-box !important; }
  .info-card tr { padding: 5px 0 !important; border-bottom: 1px dashed rgba(148,163,184,.18) !important; }
  .info-card tr:last-child { border-bottom: 0 !important; }
  .info-card table th, .info-card th { padding: 0 0 2px !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #64748b !important; }
  .info-card table td, .info-card td { padding: 0 !important; font-size: 12px !important; line-height: 1.35 !important; }
  .reply-box {
    padding: 12px !important;
    border-radius: 16px !important;
    margin-top: 12px !important;
    box-shadow: none !important;
  }
  #klm-reply-composer form > div[style*="grid-template-columns"] { display: block !important; }
  #message, textarea[name="message"] { min-height: 170px !important; font-size: 15px !important; }
  .klm-action-radios-container { padding: 10px !important; margin-top: 10px !important; border-radius: 14px !important; }
  .klm-status-tooltip { padding: 7px 8px !important; margin-bottom: 6px !important; }
  .klm-status-tooltip-card {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 100000 !important;
  }



  /* MasterData mobile/tablet queue and approval detail. */
  .klm-md-hero {
    padding: 14px !important;
    border-radius: 18px !important;
    margin-bottom: 10px !important;
  }
  .klm-md-hero .klm-kb-eyebrow { font-size: 11px !important; }
  .klm-md-hero h1 { font-size: 20px !important; margin: 3px 0 !important; }
  .klm-md-hero p { font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; }
  .klm-md-search-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  .klm-md-search-row .klm-kb-search,
  .klm-md-search-row .klm-kb-topic-inline {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
  }
  .klm-md-search-row input,
  .klm-md-search-row select { min-height: 38px !important; font-size: 13px !important; width: 100% !important; }
  .klm-md-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 8px 0 10px !important;
  }
  .klm-md-actions .klm-kb-admin-btn { min-height: 40px !important; justify-content: center !important; font-size: 12px !important; }
  .klm-md-list-grid {
    display: block !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: var(--klm-card, #fff) !important;
  }
  .klm-md-list-head { display: none !important; }
  .klm-md-list-row.klm-md-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148,163,184,.20) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    min-height: 82px !important;
  }
  .klm-md-list-row.klm-md-card:last-child { border-bottom: 0 !important; }
  .klm-md-list-row .klm-md-number {
    grid-column: 1 / 2 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #2563eb !important;
  }
  .klm-md-list-row strong {
    grid-column: 1 / -1 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  .klm-md-list-row span:nth-of-type(2),
  .klm-md-list-row span:nth-of-type(4) {
    font-size: 11px !important;
    color: #64748b !important;
  }
  .klm-md-list-row .klm-md-status {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    max-width: 132px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .klm-md-list-row b { position: absolute !important; right: 14px !important; bottom: 9px !important; color: #94a3b8 !important; }

  .klm-md-view {
    padding: 12px !important;
    border-radius: 18px !important;
    background: var(--klm-card, #fff) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
  }
  .klm-md-view-header {
    display: grid !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  .klm-md-view-header h1 { font-size: 20px !important; margin: 0 !important; line-height: 1.2 !important; }
  .klm-md-view-title { font-size: 14px !important; font-weight: 900 !important; color: #0f172a !important; margin: 0 !important; }
  .klm-md-view-status-row { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; align-items: center !important; }
  .klm-md-next-step {
    padding: 10px !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(148,163,184,.22) !important;
    font-size: 12px !important;
    color: #475569 !important;
  }
  .klm-md-view form {
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    margin: 10px 0 !important;
    background: #fff !important;
  }
  .klm-md-view h2 { font-size: 13px !important; margin: 0 0 8px !important; }
  .klm-md-view .form_table,
  .klm-md-view .form_table tbody,
  .klm-md-view .form_table tr,
  .klm-md-view .form_table td { display: block !important; width: 100% !important; box-sizing: border-box !important; }
  .klm-md-view .form_table tr { padding: 6px 0 !important; border-bottom: 1px dashed rgba(148,163,184,.18) !important; }
  .klm-md-view .form_table tr:last-child { border-bottom: 0 !important; }
  .klm-md-view .form_table td:first-child { font-size: 10px !important; text-transform: uppercase !important; color: #64748b !important; padding: 0 0 3px !important; }
  .klm-md-view .form_table td:last-child { padding: 0 !important; }
  .klm-md-view input[type="text"] { width: 100% !important; min-height: 42px !important; font-size: 15px !important; }
  .klm-md-view .button,
  .klm-md-view button.button,
  .klm-md-view input.button { min-height: 42px !important; border-radius: 12px !important; font-weight: 900 !important; }
  .klm-md-mobile-approval-bar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 99991 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: rgba(15,23,42,.88) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 14px 36px rgba(15,23,42,.24) !important;
  }
  .klm-md-mobile-approval-bar a {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #16a34a, #06b6d4) !important;
  }
  .klm-md-mobile-approval-bar a.secondary { background: rgba(255,255,255,.12) !important; color: #e2e8f0 !important; }

  /* MasterData/Profile/Open forms: compact and overflow-safe. */
  .profile-layout-grid,
  .klm-md-open-card,
  .klm-md-list-row,
  .ticket-modern-container,
  .ticket-main-layout,
  .ticket-selection-grid,
  .user-info-banner {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .glass-panel, .profile-main-card, .avatar-card, .quick-info-card,
  .sidebar-card, .important-note-card, .klm-md-card {
    padding: 12px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  input, select, textarea, button, .button { max-width: 100% !important; box-sizing: border-box !important; }
  input[type="text"], input[type="email"], input[type="password"], select { min-height: 40px !important; }
}

@media (max-width: 767px) {
  #content { padding: 8px 8px calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  .login-left { display: none !important; }
  .login-right { width: 100% !important; padding: 0 !important; }
  .login-box, .login-panel, #login { padding: 16px !important; border-radius: 16px !important; }
  .ticket-dashboard-wrapper { padding: 8px 0 !important; }
  .ticket-page-head .head-icon { display: none !important; }
  .inline-filter-form { grid-template-columns: 1fr 1fr !important; }
  .tabs-group .tab-item { min-width: 84px !important; }
  table.klm-tickets-table tr { min-height: 100px !important; padding: 8px 9px 9px !important; }
  table.klm-tickets-table .requester-name,
  table.klm-tickets-table .assignee-name { max-width: 92px !important; }
  table.klm-tickets-table .status-pill span { max-width: 104px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .info-card:nth-child(n+2) { padding-top: 8px !important; }
  .klm-status-tooltip-card { left: 8px !important; right: 8px !important; }
}

/* Keep the in-page KLM navigation banner light while the app/system topbar uses theme-color. */
html[data-theme="light"] .klm-topbar,
html[data-theme="light"].klm-pwa-standalone .klm-topbar {
  background: var(--klm-bg, #f8fafc) !important;
  border-bottom: 1px solid var(--klm-border, #e2e8f0) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

html[data-theme="light"] .klm-topbar .topbar-title,
html[data-theme="light"].klm-pwa-standalone .klm-topbar .topbar-title {
  color: var(--klm-text, #0f172a) !important;
}

html[data-theme="light"] .klm-topbar .topbar-tagline,
html[data-theme="light"].klm-pwa-standalone .klm-topbar .topbar-tagline {
  color: var(--klm-text-muted, #64748b) !important;
}

html[data-theme="light"].klm-pwa-standalone .klm-topbar .topbar-nav-link,
html[data-theme="light"].klm-pwa-standalone .klm-topbar .header-icon-btn,
html[data-theme="light"].klm-pwa-standalone .klm-topbar .user-menu-trigger {
  color: var(--klm-text, #0f172a) !important;
}

html[data-theme="light"].klm-pwa-standalone .klm-topbar .header-pill-btn,
html[data-theme="light"].klm-pwa-standalone .klm-topbar .header-icon-btn,
html[data-theme="light"].klm-pwa-standalone .klm-topbar .user-menu-trigger {
  background: var(--klm-card, #ffffff) !important;
  border-color: var(--klm-border, #e2e8f0) !important;
}


/* Draggable GoTop/GoBottom navigator */
.klm-scroll-nav {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.klm-scroll-nav.is-user-positioned {
  right: auto !important;
  bottom: auto !important;
}
.klm-scroll-nav.is-dragging {
  z-index: 100000 !important;
  cursor: grabbing;
  filter: drop-shadow(0 18px 34px rgba(37, 99, 235, .28));
}
.klm-scroll-nav.is-dragging .klm-scroll-orb {
  cursor: grabbing;
  transform: scale(1.03) !important;
  opacity: .96 !important;
}
.klm-scroll-nav.is-dragging .klm-scroll-orb::before,
.klm-scroll-nav.is-dragging .klm-scroll-orb::after,
.klm-scroll-nav.is-dragging .klm-orb-core svg {
  animation-play-state: paused !important;
}

/* Strong mobile drag fix for GoTop/GoBottom navigator */
.klm-scroll-nav {
  pointer-events: auto !important;
  touch-action: none !important;
  overscroll-behavior: contain !important;
}
.klm-scroll-nav .klm-scroll-orb,
.klm-scroll-nav .klm-orb-core {
  touch-action: none !important;
  -webkit-user-drag: none !important;
}

/* Mobile app bottom navigation - desktop/tablet untouched */
.klm-mobile-bottom-nav { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  #content { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .topbar-center { display: none !important; }
  .klm-mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 99990;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 8px 8px;
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.9);
    box-shadow: 0 18px 45px rgba(15,23,42,.18), 0 2px 10px rgba(15,23,42,.08);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
  }
  .klm-mobile-nav-item {
    min-width: 0;
    height: 58px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none !important;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -.01em;
    transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .klm-mobile-nav-item svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
  }
  .klm-mobile-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1;
  }
  .klm-mobile-nav-item:active { transform: translateY(1px) scale(.97); }
  .klm-mobile-nav-item.active {
    color: #e11d48;
    background: linear-gradient(135deg, rgba(225,29,72,.12), rgba(239,68,68,.07));
    box-shadow: inset 0 0 0 1px rgba(225,29,72,.18);
  }
  .klm-mobile-nav-item.primary {
    color: #fff;
    background: linear-gradient(135deg, #e11d48, #ef4444, #fb7185);
    box-shadow: 0 12px 28px rgba(225,29,72,.28);
  }
  .klm-mobile-nav-item.primary.active {
    color: #fff;
    background: linear-gradient(135deg, #be123c, #e11d48, #f43f5e);
  }
  html[data-theme="dark"] .klm-mobile-bottom-nav {
    background: rgba(15,23,42,.88);
    border-color: rgba(148,163,184,.24);
    box-shadow: 0 18px 45px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  }
  html[data-theme="dark"] .klm-mobile-nav-item { color: #94a3b8; }
  html[data-theme="dark"] .klm-mobile-nav-item.active {
    color: #fb7185;
    background: rgba(225,29,72,.16);
    box-shadow: inset 0 0 0 1px rgba(251,113,133,.18);
  }
}
@media (max-width: 480px) {
  .klm-mobile-bottom-nav {
    left: 6px;
    right: 6px;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    padding: 6px;
    border-radius: 22px;
  }
  .klm-mobile-nav-item {
    height: 55px;
    border-radius: 16px;
    font-size: 9px;
  }
  .klm-mobile-nav-item svg { width: 20px; height: 20px; }
}


/* User-positioned scroll navigator must override centered default */
.klm-scroll-nav.is-user-positioned {
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Mobile Contact raise-up sheet */
.klm-mobile-contact-overlay,
.klm-mobile-contact-sheet { display: none; }
@media (max-width: 1024px) {
  .klm-mobile-contact-trigger {
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }
  .klm-mobile-contact-overlay.active {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99991;
    background: rgba(15,23,42,.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .klm-mobile-contact-sheet.active {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 99992;
    padding: 10px 12px 12px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    border: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 26px 70px rgba(15,23,42,.24);
    color: #0f172a;
    animation: klmContactRaise .18s ease-out;
  }
  @keyframes klmContactRaise { from { transform: translateY(16px); opacity: .2; } to { transform: translateY(0); opacity: 1; } }
  .klm-mobile-contact-handle {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 0 auto 10px;
  }
  .klm-mobile-contact-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .klm-mobile-contact-head span {
    display: block;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
  }
  .klm-mobile-contact-head h2 {
    margin: 2px 0 0;
    font-size: 18px;
    line-height: 1.1;
    color: #0f172a;
  }
  .klm-mobile-contact-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .klm-mobile-contact-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(225,29,72,.08), rgba(37,99,235,.07));
    border: 1px solid rgba(226,232,240,.8);
    margin-bottom: 10px;
  }
  .klm-mobile-contact-avatar {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 1000;
    background: linear-gradient(135deg, #e11d48, #2563eb);
    box-shadow: 0 10px 22px rgba(37,99,235,.18);
  }
  .klm-mobile-contact-card strong { display: block; font-size: 14px; color: #0f172a; }
  .klm-mobile-contact-card small { display: block; color: #64748b; font-weight: 800; }
  .klm-mobile-contact-list { display: grid; gap: 7px; margin-bottom: 10px; }
  .klm-mobile-contact-list a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    text-decoration: none !important;
    color: #334155;
    font-size: 12px;
  }
  .klm-mobile-contact-list b { color: #64748b; }
  .klm-mobile-contact-list span { font-weight: 900; color: #0f172a; text-align: right; }
  .klm-mobile-chat-disabled {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
  }
  .klm-mobile-chat-disabled input {
    min-width: 0;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
  }
  .klm-mobile-chat-disabled button {
    border: 0;
    border-radius: 12px;
    padding: 8px 12px;
    background: #e2e8f0;
    color: #94a3b8;
    font-weight: 900;
  }
  html[data-theme="dark"] .klm-mobile-contact-sheet.active {
    background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(30,41,59,.96));
    border-color: rgba(148,163,184,.24);
    color: #e5e7eb;
  }
  html[data-theme="dark"] .klm-mobile-contact-head h2,
  html[data-theme="dark"] .klm-mobile-contact-card strong,
  html[data-theme="dark"] .klm-mobile-contact-list span { color: #e5e7eb; }
  html[data-theme="dark"] .klm-mobile-contact-close,
  html[data-theme="dark"] .klm-mobile-contact-list a,
  html[data-theme="dark"] .klm-mobile-chat-disabled { background: rgba(15,23,42,.72); border-color: rgba(148,163,184,.22); }
}


/* Portal Contact admin + mobile action refinements */
.klm-portal-contact-admin { max-width: 980px; margin: 0 auto; }
.klm-portal-contact-form,
.klm-portal-contact-preview {
  margin-top: 18px;
  border-radius: 24px;
  padding: 20px;
  background: var(--klm-card, #fff);
  border: 1px solid var(--klm-border, #e2e8f0);
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}
.klm-portal-contact-fields { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
.klm-portal-contact-fields label { display:grid; gap:7px; font-weight:900; color:var(--klm-text,#0f172a); }
.klm-portal-contact-fields span { font-size:12px; color:var(--klm-text-muted,#64748b); }
.klm-portal-contact-fields input { width:100%; min-height:42px; border-radius:14px; border:1px solid var(--klm-border,#e2e8f0); padding:9px 12px; box-sizing:border-box; }
.klm-portal-contact-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.klm-portal-contact-preview span { color:#64748b; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.klm-portal-contact-preview strong { display:block; margin-top:8px; font-size:22px; }
.klm-portal-contact-preview small { display:block; color:#64748b; font-weight:800; margin-bottom:10px; }
@media (max-width: 760px) { .klm-portal-contact-fields { grid-template-columns:1fr; } }
@media (max-width: 1024px) {
  .klm-mobile-contact-list button.klm-mobile-contact-action {
    width: 100%;
    font: inherit;
    cursor: pointer;
  }
  .klm-mobile-contact-list a,
  .klm-mobile-contact-list button.klm-mobile-contact-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .klm-mobile-contact-list button.klm-mobile-contact-action::after,
  .klm-mobile-contact-list a::after {
    content: '›';
    color: #94a3b8;
    font-weight: 1000;
    margin-left: 2px;
  }
  .klm-mobile-contact-toast {
    display: none;
    margin: -2px 0 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    border: 1px solid #a7f3d0;
  }
  .klm-mobile-contact-toast.active { display: block; }
}


/* Premium compact mobile Contact sheet polish */
@media (max-width: 1024px) {
  .klm-mobile-contact-sheet.active {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 12px 14px 14px !important;
    border-radius: 26px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    box-shadow: 0 24px 70px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.85) !important;
    overflow: hidden !important;
  }
  .klm-mobile-contact-handle {
    width: 42px !important;
    height: 4px !important;
    margin-bottom: 12px !important;
    background: linear-gradient(90deg, #cbd5e1, #94a3b8, #cbd5e1) !important;
    opacity: .8 !important;
  }
  .klm-mobile-contact-head { margin-bottom: 12px !important; }
  .klm-mobile-contact-head span {
    color: #64748b !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
  }
  .klm-mobile-contact-head h2 {
    font-size: 20px !important;
    font-weight: 1000 !important;
    letter-spacing: -.04em !important;
    color: #111827 !important;
  }
  .klm-mobile-contact-close {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
  }
  .klm-mobile-contact-card {
    padding: 12px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(225,29,72,.08), rgba(37,99,235,.08)) !important;
    border: 1px solid rgba(226,232,240,.72) !important;
    box-shadow: none !important;
  }
  .klm-mobile-contact-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #e11d48, #7c3aed, #2563eb) !important;
  }
  .klm-mobile-contact-card strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }
  .klm-mobile-contact-card small {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 12px !important;
  }
  .klm-mobile-contact-list {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .klm-mobile-contact-list a,
  .klm-mobile-contact-list button.klm-mobile-contact-action {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    outline: 0 !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.045) !important;
    color: #111827 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  .klm-mobile-contact-list a:focus,
  .klm-mobile-contact-list button.klm-mobile-contact-action:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(225,29,72,.10), 0 8px 18px rgba(15,23,42,.045) !important;
  }
  .klm-mobile-contact-list b {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }
  .klm-mobile-contact-list span {
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 1000 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .klm-mobile-contact-list button.klm-mobile-contact-action::after,
  .klm-mobile-contact-list a::after {
    content: '›' !important;
    color: #cbd5e1 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .klm-mobile-chat-disabled {
    min-height: 48px !important;
    padding: 7px 8px 7px 12px !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
    border: 1px dashed #dbe3ee !important;
  }
  .klm-mobile-chat-disabled input {
    font-size: 12px !important;
    color: #94a3b8 !important;
  }
  .klm-mobile-chat-disabled button {
    min-width: 58px !important;
    border-radius: 14px !important;
    background: #e5eaf0 !important;
    color: #94a3b8 !important;
  }
}
@media (max-width: 380px) {
  .klm-mobile-contact-sheet.active { left: 10px !important; right: 10px !important; }
  .klm-mobile-contact-list span { max-width: 180px !important; }
}


/* Compact short actions/topic cards: 2/3 size + translucent decorative button background */
.topic-slider-wrapper {
  max-width: 80vw !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.topic-slider-header {
  margin-bottom: 12px !important;
}
.topic-slider-header h4 {
  font-size: 13px !important;
}
.topic-slider-header span {
  font-size: 10.5px !important;
}
.topic-slider-container {
  gap: 12px !important;
  padding: 6px 3px !important;
}
.topic-slide-card {
  position: relative !important;
  isolation: isolate !important;
  min-width: 132px !important;
  max-width: 150px !important;
  width: 142px !important;
  min-height: 86px !important;
  padding: 14px 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 78% 18%, rgba(37, 99, 235, .10), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(248, 250, 252, .56)) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .055) !important;
}
.topic-slide-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(225, 29, 72, .08), transparent 44%),
    radial-gradient(circle at 22% 78%, rgba(14, 165, 233, .10), transparent 38%);
  opacity: .9;
  pointer-events: none;
}
.topic-slide-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 72px;
  height: 72px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(225, 29, 72, .075);
  border: 1px solid rgba(225, 29, 72, .08);
  pointer-events: none;
}
.topic-icon {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.76), transparent 34%),
    linear-gradient(135deg, rgba(225, 29, 72, .16), rgba(14, 165, 233, .10)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px rgba(225,29,72,.12) !important;
}
.topic-icon svg,
.topic-icon i svg,
.topic-icon i {
  width: 17px !important;
  height: 17px !important;
}
.topic-name {
  font-size: 11px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
}
.topic-slide-card:hover {
  transform: translateY(-3px) !important;
}
.topic-slide-card:hover .topic-icon {
  transform: scale(1.06) !important;
}
html[data-theme="dark"] .topic-slide-card {
  background:
    radial-gradient(circle at 78% 18%, rgba(14, 165, 233, .14), transparent 30%),
    linear-gradient(145deg, rgba(15, 23, 42, .68), rgba(2, 6, 23, .50)) !important;
}
html[data-theme="dark"] .topic-slide-card::before {
  background:
    linear-gradient(135deg, rgba(251, 113, 133, .12), transparent 44%),
    radial-gradient(circle at 22% 78%, rgba(56, 189, 248, .12), transparent 38%);
}
html[data-theme="dark"] .topic-icon {
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(251, 113, 133, .18), rgba(56, 189, 248, .12)) !important;
}
@media (max-width: 640px) {
  .topic-slider-wrapper { max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; }
  .topic-slide-card { width: 126px !important; min-width: 126px !important; max-width: 132px !important; min-height: 78px !important; padding: 12px 10px !important; }
}

/* Mobile HOME action cards/buttons - scoped classes, no desktop impact */
@media (max-width: 767px) {
  .home-action-section .home-action-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 12px 0 18px;
    overflow: visible;
  }

  .home-action-section .home-action-grid > .flat-card {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    padding: 18px 20px 22px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .home-action-section .card-desc {
    flex: 0 0 auto;
    margin: 0;
    overflow: visible;
  }

  .home-action-btn {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    margin: 12px 0 0;
    padding-left: 14px;
    padding-right: 14px;
    position: static;
    transform: none;
    white-space: nowrap;
  }
}


/* -------------------------------------------------------------------
   KLM Cross-Reference Panel & Badges
   ------------------------------------------------------------------- */

.klm-crossref-panel {
  margin: 16px 0;
  border: 1px solid rgba(37, 99, 235, .18);
  border-left: 3px solid rgba(37, 99, 235, .58);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(248,250,252,.22));
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  overflow: hidden;
}
.klm-crossref-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .18s;
}
.klm-crossref-header:hover {
  background: rgba(37, 99, 235, .06);
}
.klm-crossref-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #2563eb;
  background: rgba(37,99,235,.10);
}
.klm-crossref-status {
  min-height: 16px;
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 750;
}
.klm-crossref-status.ok { color: #16a34a; }
.klm-crossref-status.err { color: #dc2626; }
.klm-crossref-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--klm-text, #1e293b);
}
.klm-crossref-title small {
  font-weight: 500;
  color: var(--klm-text-muted, #94a3b8);
  font-size: 11px;
}
.klm-crossref-counter {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: rgba(37, 99, 235, .10);
  padding: 2px 8px;
  border-radius: 999px;
}
.klm-crossref-chevron {
  font-size: 10px;
  color: var(--klm-text-muted, #94a3b8);
  transition: transform .2s;
}
.klm-crossref-body {
  padding: 12px 14px;
  border-top: 1px solid rgba(37, 99, 235, .10);
}
.klm-crossref-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.klm-crossref-search-wrap {
  position: relative;
}
.klm-crossref-search,
.klm-crossref-note,
.klm-crossref-type-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 8px;
  font-size: 12px;
  background: var(--klm-card, #fff);
  color: var(--klm-text, #1e293b);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.klm-crossref-search:focus,
.klm-crossref-note:focus,
.klm-crossref-type-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.klm-crossref-note-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}
.klm-crossref-add-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s, box-shadow .18s;
}
.klm-crossref-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
/* Dropdown autocomplete */
.klm-crossref-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2000;
  max-height: 220px;
  overflow-y: auto;
  background: var(--klm-card, #fff);
  border: 1px solid var(--klm-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  margin-top: 4px;
}
.klm-crossref-dd-item {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background .12s;
}
.klm-crossref-dd-item:hover {
  background: rgba(37, 99, 235, .08);
}
.dd-number {
  font-weight: 800;
  color: #2563eb;
  white-space: nowrap;
}
.dd-subject {
  flex: 1;
  color: var(--klm-text, #334155);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--klm-text-muted, #94a3b8);
  text-transform: uppercase;
}
.klm-crossref-dd-empty {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--klm-text-muted, #94a3b8);
}
/* Ref list */
.klm-crossref-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.klm-crossref-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 8px;
  font-size: 11.5px;
}
.crossref-item-number {
  font-weight: 800;
  color: #2563eb;
  white-space: nowrap;
}
.crossref-item-type {
  color: var(--klm-text, #334155);
  font-weight: 600;
  flex: 1;
}
.crossref-item-note {
  color: var(--klm-text-muted, #64748b);
  font-style: italic;
  font-size: 10.5px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crossref-item-remove {
  border: none;
  background: none;
  color: #ef4444;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: .7;
  transition: opacity .12s;
}
.crossref-item-remove:hover { opacity: 1; }

/* Thread badge display */
.klm-crossref-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.klm-crossref-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  background: rgba(37, 99, 235, .08);
  border: 1px solid rgba(37, 99, 235, .16);
}
.klm-crossref-badge .badge-icon { font-size: 12px; }
.klm-crossref-badge .badge-link {
  font-weight: 800;
  color: #2563eb;
  text-decoration: none;
}
.klm-crossref-badge .badge-link:hover { text-decoration: underline; }
.klm-crossref-badge .badge-type {
  color: var(--klm-text, #334155);
  font-weight: 600;
}
.klm-crossref-badge .badge-note {
  color: var(--klm-text-muted, #64748b);
  font-style: italic;
  font-size: 10px;
}
.klm-crossref-badge.ref-actor-support {
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .18);
}
.klm-crossref-badge.ref-actor-support .badge-link { color: #059669; }

/* Dark mode */
html[data-theme="dark"] .klm-crossref-panel {
  border-color: rgba(96, 165, 250, .22);
  border-left-color: rgba(96, 165, 250, .52);
  background: linear-gradient(135deg, rgba(15, 23, 42, .52), rgba(2, 6, 23, .32));
}
html[data-theme="dark"] .klm-crossref-header:hover { background: rgba(96, 165, 250, .08); }
html[data-theme="dark"] .klm-crossref-counter { color: #60a5fa; background: rgba(96, 165, 250, .14); }
html[data-theme="dark"] .klm-crossref-dropdown {
  background: var(--klm-card, #1e293b);
  border-color: rgba(148, 163, 184, .2);
}
html[data-theme="dark"] .klm-crossref-dd-item:hover { background: rgba(96, 165, 250, .1); }
html[data-theme="dark"] .dd-number { color: #60a5fa; }
html[data-theme="dark"] .klm-crossref-item {
  background: rgba(96, 165, 250, .08);
  border-color: rgba(96, 165, 250, .18);
}
html[data-theme="dark"] .crossref-item-number { color: #60a5fa; }
html[data-theme="dark"] .klm-crossref-badge {
  background: rgba(96, 165, 250, .10);
  border-color: rgba(96, 165, 250, .20);
}
html[data-theme="dark"] .klm-crossref-badge .badge-link { color: #60a5fa; }
html[data-theme="dark"] .klm-crossref-badge.ref-actor-support {
  background: rgba(52, 211, 153, .10);
  border-color: rgba(52, 211, 153, .20);
}
html[data-theme="dark"] .klm-crossref-badge.ref-actor-support .badge-link { color: #34d399; }

/* Responsive */
@media (max-width: 1024px) {
  .klm-crossref-input-row { grid-template-columns: 1fr; }
  .klm-crossref-note-row { grid-template-columns: 1fr auto; }
  .klm-crossref-item { flex-wrap: wrap; }
  .crossref-item-note { max-width: 100%; }
}

/* Mobile Status Ticket access panel containment */
@media (max-width: 767px) {
  .klm-status-access-panel {
    box-sizing: border-box;
    width: min(92vw, 390px);
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
  .klm-status-access-panel .klm-status-access-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 14px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  .klm-status-access-form,
  .klm-status-access-note {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .klm-status-access-note {
    padding: 16px 14px;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: 13px;
    line-height: 1.45;
  }
  .klm-status-access-note a,
  .klm-status-access-note p,
  .klm-status-access-note div {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .klm-status-access-panel .input-modern,
  .klm-status-access-panel .btn-modern-primary,
  .klm-status-access-panel input[type="text"],
  .klm-status-access-panel input[type="submit"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}


/* Mobile Status Ticket: wider panel, 90% of containing frame */
@media (max-width: 767px) {
  .klm-status-access-panel {
    width: 90%;
    max-width: 430px;
  }
  .klm-status-access-panel .klm-status-access-grid {
    padding: 18px 16px;
  }
}


/* Reply composer compact crossref side placement */
.klm-reply-side-column .klm-crossref-panel,
.klm-crossref-reply-side .klm-crossref-panel {
  margin: 0 0 12px !important;
  border-radius: 10px !important;
}
.klm-reply-side-column .klm-crossref-header,
.klm-crossref-reply-side .klm-crossref-header {
  padding: 8px 10px !important;
}
.klm-reply-side-column .klm-crossref-body,
.klm-crossref-reply-side .klm-crossref-body {
  padding: 10px !important;
}
.klm-reply-side-column .klm-crossref-input-row,
.klm-crossref-reply-side .klm-crossref-input-row,
.klm-reply-side-column .klm-crossref-note-row,
.klm-crossref-reply-side .klm-crossref-note-row {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}
.klm-reply-side-column .klm-crossref-search,
.klm-reply-side-column .klm-crossref-note,
.klm-reply-side-column .klm-crossref-type-select,
.klm-crossref-reply-side .klm-crossref-search,
.klm-crossref-reply-side .klm-crossref-note,
.klm-crossref-reply-side .klm-crossref-type-select {
  padding: 7px 9px !important;
  font-size: 11.5px !important;
  border-radius: 7px !important;
}
.klm-reply-side-column .klm-crossref-add-btn,
.klm-crossref-reply-side .klm-crossref-add-btn {
  width: 100% !important;
  padding: 7px 12px !important;
  font-size: 11.5px !important;
}
.klm-reply-side-column .klm-crossref-title,
.klm-crossref-reply-side .klm-crossref-title {
  font-size: 11.5px !important;
}
.klm-reply-side-column .klm-crossref-title small,
.klm-crossref-reply-side .klm-crossref-title small {
  font-size: 10px !important;
}
.klm-reply-side-column .klm-crossref-item,
.klm-crossref-reply-side .klm-crossref-item {
  padding: 6px 8px !important;
  font-size: 10.8px !important;
}
#reply textarea#message {
  min-height: 120px !important;
}
#reply .redactor-box,
#reply .redactor-editor,
#reply .redactor-styles {
  min-height: 118px !important;
}
@media (max-width: 1024px) {
  #reply [style*="grid-template-columns:3fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  .klm-crossref-reply-side { margin-top: 12px !important; }
}

/* Mobile Status Ticket: widen the form box + info box inside the frame */
@media (max-width: 767px) {
  .klm-status-access-panel {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .klm-status-access-panel .klm-status-access-grid {
    padding: 14px 0 18px;
    align-items: center;
  }
  .klm-status-access-form,
  .klm-status-access-note {
    width: 90%;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }
  .klm-status-access-form .form-group-modern,
  .klm-status-access-form > div {
    width: 100%;
  }
}


/* Mobile Ticket Dashboard: contain controls within one frame */
@media (max-width: 768px) {
  .ticket-dashboard-wrapper,
  .ticket-page-head,
  .klm-tickets-dashboard,
  .tickets-topbar,
  .filters-search-column,
  .inline-filters-group,
  .inline-filter-form,
  .search-group,
  .search-form {
    box-sizing: border-box;
    max-width: 100%;
  }

  .ticket-dashboard-wrapper {
    width: 100%;
    overflow-x: hidden;
    padding-left: 6px;
    padding-right: 6px;
  }

  .klm-tickets-dashboard {
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
  }

  .tickets-topbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 10px 16px;
    overflow: hidden;
  }

  .tabs-group {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    overflow: hidden;
    border-bottom: 1px solid rgba(148,163,184,.24);
  }

  .tabs-group .tab-item {
    min-width: 0;
    width: 100%;
    padding: 7px 2px;
    overflow: hidden;
  }

  .tabs-group .tab-status-label {
    display: flex;
    justify-content: center;
    min-width: 0;
  }

  .tabs-group .tab-status-label span {
    display: none;
  }

  .tabs-group .tab-status-label svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }

  .tabs-group .tab-count {
    font-size: 13px;
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .filters-search-column {
    width: 100%;
    min-width: 0;
  }

  .inline-filter-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .filter-select-wrap,
  .requester-filter-wrap,
  .assignee-filter-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .quick-filter-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .search-group {
    width: 100%;
    max-width: 100%;
  }

  .search-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 54px;
    gap: 8px;
    align-items: center;
  }

  .search-input-wrap {
    width: 100%;
    min-width: 0;
  }

  .search-input-wrap input,
  .search-input-wrap input:focus {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .search-submit-btn {
    width: 54px;
    min-width: 54px;
  }
}
@media (max-width: 380px) {
  .tabs-group .tab-count { font-size: 12px; }
  .inline-filter-form { grid-template-columns: 1fr; }
}


/* Ticket dashboard base layout after removing inline styles */
.tickets-topbar {
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 12px 20px;
  box-sizing: border-box;
}
.tabs-group {
  display: flex;
  gap: 4px;
  align-items: stretch;
  padding: 4px;
  border-radius: 12px;
  box-sizing: border-box;
}
.filters-search-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.inline-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.search-group { max-width: 450px; }

@media (max-width: 768px) {
  .tickets-topbar {
    flex-direction: column;
    gap: 12px;
    padding: 12px 10px 16px;
    width: 100%;
    overflow: hidden;
  }
  .tabs-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    overflow: hidden;
  }
  .filters-search-column { width: 100%; }
  .inline-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .search-group { max-width: 100%; width: 100%; }
}


/* Desktop/tablet ticket dashboard restore after removing inline styles */
@media (min-width: 769px) {
  #klmTicketsDashboardRoot .tabs-group .tab-item {
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    flex-direction: column;
    gap: 2px;
  }
  #klmTicketsDashboardRoot .tabs-group .tab-status-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    opacity: .8;
    line-height: 1.2;
  }
  #klmTicketsDashboardRoot .tabs-group .tab-status-label svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
  #klmTicketsDashboardRoot .tabs-group .tab-count {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    background: transparent;
    padding: 0;
  }
}


/* Cross-ref icon normalization: avoid emoji fallback/question-mark glyphs */
.klm-crossref-badge .badge-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.klm-crossref-badge .badge-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}
.klm-crossref-badges {
  margin-top: 10px;
  margin-bottom: 0;
}

/* Mobile ticket detail: compact comment bubbles under avatar */
@media (max-width: 768px) {
  #ticketThread,
  .ticket-thread,
  .thread-entries {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .thread-entry {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 12px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .thread-entry .header,
  .thread-entry > .avatar,
  .thread-entry .avatar {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .thread-entry .body,
  .thread-entry .thread-body,
  .thread-entry .thread-entry-body,
  #ticketThread .thread-body,
  #ticketThread .thread-entry-body {
    width: calc(100vw - 76px) !important;
    max-width: calc(100vw - 76px) !important;
    margin-top: 2px !important;
    box-sizing: border-box !important;
  }

  .thread-entry.message,
  .thread-entry.client-message,
  .thread-entry.user-message {
    align-items: flex-start !important;
  }

  .thread-entry.message .body,
  .thread-entry.message .thread-body,
  .thread-entry.message .thread-entry-body,
  .thread-entry.client-message .body,
  .thread-entry.client-message .thread-body,
  .thread-entry.user-message .body,
  .thread-entry.user-message .thread-body {
    margin-left: 2px !important;
    margin-right: auto !important;
  }

  .thread-entry.response,
  .thread-entry.staff-response,
  .thread-entry.note {
    align-items: flex-end !important;
  }

  .thread-entry.response .body,
  .thread-entry.response .thread-body,
  .thread-entry.response .thread-entry-body,
  .thread-entry.staff-response .body,
  .thread-entry.staff-response .thread-body,
  .thread-entry.note .body,
  .thread-entry.note .thread-body {
    margin-left: auto !important;
    margin-right: 2px !important;
  }

  .thread-entry .header {
    width: auto !important;
    max-width: 100% !important;
    align-self: inherit !important;
  }
}

/* Mobile ticket detail: actual chat template compact layout */
@media (max-width: 768px) {
  .chat-entry {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 3px !important;
    margin: 8px 0 12px !important;
    padding: 0 4px !important;
    overflow: visible !important;
  }

  .chat-entry.chat-left,
  .chat-entry.role-author,
  .chat-entry.role-collab {
    align-items: flex-start !important;
    padding-left: 2px !important;
    padding-right: 28px !important;
  }

  .chat-entry.chat-right,
  .chat-entry.role-agent,
  .chat-entry.role-supporter {
    align-items: flex-end !important;
    padding-left: 28px !important;
    padding-right: 2px !important;
  }

  .chat-entry .chat-avatar {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: 30px !important;
    height: 30px !important;
  }

  .chat-entry .chat-content {
    width: calc(100vw - 58px) !important;
    max-width: calc(100vw - 58px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .chat-left .chat-content,
  .role-author .chat-content,
  .role-collab .chat-content {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .chat-right .chat-content,
  .role-agent .chat-content,
  .role-supporter .chat-content {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .chat-entry .chat-bubble {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .chat-entry .chat-meta {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
  }

  .chat-right .chat-meta,
  .role-agent .chat-meta,
  .role-supporter .chat-meta {
    justify-content: flex-end !important;
    text-align: right !important;
  }
}

/* Mobile ticket detail: prevent collapse control overlap with action buttons */
@media (max-width: 768px) {
  #ticketInfo .klm-ticket-info-control-row {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 12px 0 10px !important;
    padding: 8px 0 0 !important;
    clear: both !important;
    transform: none !important;
  }

  #ticketInfo .klm-mobile-ticket-actions-inline {
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 12px !important;
  }

  #ticketInfo .klm-ticket-info-collapsed-title,
  #ticketInfo .klm-ticket-info-toggle {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  #ticketInfo .klm-ticket-info-collapsed-title {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #ticketInfo .klm-ticket-info-toggle {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* Mobile ticket detail: lift collapsed info into empty gap above thread */
@media (max-width: 768px) {
  #ticketInfo.is-collapsed {
    padding-bottom: 92px !important;
    margin-bottom: -82px !important;
  }

  #ticketInfo.is-collapsed .klm-ticket-info-control-row {
    transform: translateY(-92px) !important;
    margin-bottom: -76px !important;
  }

  #ticketInfo:not(.is-collapsed) .klm-ticket-info-control-row {
    transform: none !important;
    margin-bottom: 10px !important;
  }

  #ticketInfo.is-collapsed + #klmPrintLoadingOverlay + * {
    clear: both !important;
  }
}

/* Mobile: scroll nav fixed above bottom nav, 2/3 size, horizontal layout */
@media (max-width: 768px) {
  .klm-scroll-nav {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 12px !important;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 8px !important;
    z-index: 99989 !important;
    pointer-events: none !important;
  }
  .klm-scroll-nav.is-user-positioned {
    left: auto !important;
    top: auto !important;
    right: 12px !important;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
  }
  .klm-scroll-orb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    pointer-events: auto !important;
  }
  .klm-scroll-orb::before,
  .klm-scroll-orb::after {
    display: none !important;
  }
  .klm-orb-core {
    inset: 3px !important;
    border-radius: 10px !important;
  }
  .klm-orb-core svg {
    width: 16px !important;
    height: 16px !important;
  }
  .klm-scroll-orb:hover {
    transform: none !important;
  }
  .klm-scroll-orb.is-muted {
    transform: none !important;
    opacity: .35 !important;
  }
}

/* Center Quick Support Topics cards inside the frame */
.topic-slider-container {
  justify-content: center !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

@media (max-width: 768px) {
  .topic-slider-container {
    justify-content: flex-start !important;
  }
}