/**
 * Hi5 Office - shared UI components (company profile & other JSP pages).
 * Use ho-* classes together with Tailwind utilities where needed.
 */

/* ---- Page shell ---- */
.ho-page-shell {
  min-height: 100vh;
  background-color: #f3f4f6;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ho-layout-with-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 4rem);
}

@media (min-width: 1024px) {
  .ho-layout-with-sidebar {
    flex-direction: row;
  }
}

/* ---- Header ---- */
.ho-page-header {
  background: linear-gradient(90deg, #4338ca 0%, #4f46e5 100%);
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 60;
}

.ho-page-header-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ho-page-header-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}

.ho-page-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  word-break: break-word;
  text-align: left;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .ho-page-header-inner {
    padding: 0.875rem 1.5rem;
  }

  .ho-page-title {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .ho-page-title {
    font-size: 1.5rem;
  }
}

/* ---- Sidebar ---- */
.ho-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 899;
}

.ho-sidebar-backdrop.is-open {
  display: block;
}

.ho-sidebar {
  background: #eef2ff;
  border-right: 1px solid #e5e7eb;
  padding: 1rem;
  transition: transform 0.3s ease, width 0.3s ease;
  z-index: 1;
}

@media (max-width: 1023px) {
  .ho-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 16rem;
    max-width: 85vw;
    transform: translateX(-100%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding-top: 4.5rem;
    z-index: 900;
  }

  .ho-sidebar.is-open {
    transform: translateX(0);
  }
}

@media (min-width: 1024px) {
  .ho-sidebar {
    position: relative;
    min-height: calc(100vh - 4rem);
    width: 16rem;
    flex-shrink: 0;
    z-index: 1;
  }

  .ho-sidebar.is-collapsed {
    width: 5rem;
  }

  .ho-sidebar.is-collapsed .ho-sidebar-title,
  .ho-sidebar.is-collapsed .sidebar-text {
    display: none;
  }
}

.ho-sidebar-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4338ca;
  margin-bottom: 1rem;
}

.ho-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ho-sidebar-link,
.ho-sidebar-nav .submenu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

.ho-sidebar-link:hover,
.ho-sidebar-nav .submenu-link:hover {
  background: #e0e7ff;
}

.ho-sidebar-link-active,
.ho-sidebar-nav .submenu-link.font-medium.text-indigo-700.bg-indigo-100 {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
}

/* ---- Main content ---- */
.ho-main-content {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 1rem;
  transition: padding 0.3s ease;
}

@media (min-width: 640px) {
  .ho-main-content {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .ho-main-content {
    padding: 2rem;
  }
}

/* ---- Cards ---- */
.ho-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid #f3f4f6;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .ho-card {
    padding: 1.5rem;
  }
}

.ho-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .ho-card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.ho-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1f2937;
}

@media (min-width: 640px) {
  .ho-card-title {
    font-size: 1.35rem;
  }
}

.ho-card-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

/* ---- Tables ---- */
.ho-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #e5e7eb;
}

.ho-info-table {
  width: 100%;
  border-collapse: collapse;
}

.ho-info-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

.ho-info-table td,
.ho-info-table th {
  padding: 0.75rem 0.5rem;
  vertical-align: top;
  text-align: left;
}

.ho-info-table td:first-child,
.ho-info-table th:first-child {
  font-weight: 600;
  color: #374151;
  width: 33%;
}

.ho-info-table td:last-child,
.ho-info-table th:last-child {
  color: #4b5563;
}

@media (max-width: 639px) {
  .ho-info-table thead {
    display: none;
  }

  .ho-info-table tr {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fafafa;
  }

  .ho-info-table td {
    display: block;
    width: 100% !important;
    padding: 0.35rem 0;
    border: none;
  }

  .ho-info-table td:first-child {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    padding-bottom: 0.15rem;
  }

  .ho-info-table td:last-child {
    padding-bottom: 0.5rem;
  }
}

/* Data tables inside company profile main area */
#surveyProDatas table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

#surveyProDatas .ho-info-table {
  width: 100%;
}

#surveyProDatas .overflow-x-auto,
.ho-data-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 0.5rem;
}

.ho-data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.ho-data-table th,
.ho-data-table td {
  word-break: break-word;
}

#surveyProDatas .overflow-x-auto > table,
#surveyProDatas .ho-data-table-wrap > table,
#surveyProDatas table.min-w-full,
#surveyProDatas table.ho-data-table {
  width: 100%;
  min-width: 100%;
}

@media (max-width: 639px) {
  #surveyProDatas .overflow-x-auto > table,
  #surveyProDatas .ho-data-table-wrap > table,
  #surveyProDatas table.min-w-full,
  #surveyProDatas table.ho-data-table {
    min-width: 36rem;
    width: max-content;
  }
}

/* ---- Buttons ---- */
.ho-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.ho-btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.ho-btn-primary {
  background: #4f46e5;
  color: #fff;
}

.ho-btn-primary:hover {
  background: #4338ca;
}

.ho-btn-success {
  background: #16a34a;
  color: #fff;
}

.ho-btn-success:hover {
  background: #15803d;
}

.ho-btn-danger {
  background: #dc2626;
  color: #fff;
}

.ho-btn-danger:hover {
  background: #b91c1c;
}

.ho-btn-secondary {
  background: #e5e7eb;
  color: #1f2937;
}

.ho-btn-secondary:hover {
  background: #d1d5db;
}

.ho-btn-icon {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  cursor: pointer;
}

.ho-btn-icon:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Legacy bootstrap buttons inside company profile */
#root_company .btn,
#surveyProDatas .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#root_company .btn-primary,
#surveyProDatas .btn-primary {
  background: #4f46e5;
  color: #fff;
}

#root_company .btn-success,
#surveyProDatas .btn-success {
  background: #16a34a;
  color: #fff;
}

#root_company .btn-info,
#surveyProDatas .btn-info {
  background: #2563eb;
  color: #fff;
}

#root_company .form-control,
#surveyProDatas .form-control,
#surveyProDatas .inTextBorder {
  width: 100%;
  max-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

/* ---- Forms ---- */
.ho-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .ho-form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .ho-form-row .ho-form-label {
    width: 33.333%;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .ho-form-row .ho-form-control-wrap {
    flex: 1;
    min-width: 0;
  }
}

.ho-form-label {
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.ho-form-input,
.ho-form-select,
.ho-form-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: #374151;
  background: #fff;
}

.ho-form-input:focus,
.ho-form-select:focus,
.ho-form-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.ho-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
}

/* ---- Modals ---- */
.ho-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.ho-modal-overlay.is-open,
.ho-modal-overlay:not(.hidden) {
  display: flex;
}

.ho-modal-box {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 28rem;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ho-modal-box-lg {
  max-width: 48rem;
}

.ho-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.ho-modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #374151;
}

.ho-modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.ho-modal-close:hover {
  color: #111827;
}

.ho-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.ho-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e5e7eb;
}

/* ---- Alerts & empty states ---- */
.ho-alert {
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.ho-alert-warning {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  color: #92400e;
}

.ho-alert-info {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  color: #1e40af;
}

.ho-empty-state {
  text-align: center;
  color: #6b7280;
  padding: 1.5rem 1rem;
  font-size: 0.9rem;
}

/* ---- List cards (notice, news, etc.) ---- */
.ho-list-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .ho-list-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---- Validation (shared with company.css patterns) ---- */
#root_company label.error,
#surveyProDatas label.error,
.companyVal label.error {
  color: #dc2626;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: block;
}

#root_company input.error,
#surveyProDatas input.error,
.companyVal input.error {
  border: 1px solid #f97316 !important;
}

/* ---- Utility ---- */
.ho-hide {
  display: none !important;
}

/* Align legacy Tailwind card markup inside company profile content */
#surveyProDatas .bg-white.rounded-xl.shadow-md,
#surveyProDatas .bg-white.rounded-xl.shadow-md.p-4,
#surveyProDatas .bg-white.rounded-xl.shadow-md.p-6 {
  border: 1px solid #f3f4f6;
}

#surveyProDatas .flex.justify-between.items-center.mb-4 {
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 639px) {
  #surveyProDatas .flex.justify-between.items-center,
  #surveyProDatas .ho-list-card {
    align-items: flex-start;
  }

  #surveyProDatas .overflow-x-auto.bg-white.rounded-xl.shadow-md .flex.items-center.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }

  #surveyProDatas .overflow-x-auto.bg-white.rounded-xl.shadow-md .flex.items-center.gap-4 select,
  #surveyProDatas .overflow-x-auto.bg-white.rounded-xl.shadow-md .flex.items-center.gap-4 button {
    width: 100%;
  }
}

/* Hi5 Office brand logo ? consistent size on internal app pages */
img[src*="hi5logo.png"],
img[src*="hi5OfficeNewLogo"] {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* ---- Subscription Plan Notification (spn-*) ? new rules only ---- */
#root_spn_profile {
  margin-top: 0;
}

#root_spn_profile .ho-page-header {
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 55%, #5b1a62 100%);
}

#root_spn_profile .spn-page-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

#root_spn_profile .spn-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

#root_spn_profile .spn-header-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

#root_spn_profile .spn-panel {
  display: none;
}

#root_spn_profile .spn-panel.is-active {
  display: block;
}

#root_spn_profile .spn-section-desc {
  margin: 0;
  font-size: 0.875rem;
  color: #4b5563;
}

#root_spn_profile .spn-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

  #root_spn_profile .spn-form-grid .spn-form-full {
    grid-column: 1 / -1;
  }
}

#root_spn_profile .spn-info-banner {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #e8e0ec;
  background: #f8f5fa;
  color: #5b1a62;
  font-size: 0.875rem;
}

#root_spn_profile .spn-action-btns {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#root_spn_profile .ho-data-table tbody tr:hover {
  background: #f8f5fa;
}

/* SPN modals must sit above sticky page header (60) and app navbar (~1030) */
#root_spn_profile .ho-modal-overlay {
  z-index: 10050;
}

/* Notification Master table ? company_list style (scoped, new only) */
#root_spn_profile .spn-table-card {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
}

#root_spn_profile .spn-table-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 55%, #5b1a62 100%);
}

@media (min-width: 640px) {
  #root_spn_profile .spn-table-card-header {
    flex-direction: row;
    align-items: center;
  }
}

#root_spn_profile .spn-table-card-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

#root_spn_profile .spn-table-card-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

#root_spn_profile .spn-table-empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
}

#root_spn_profile .spn-table-empty-icon {
  margin: 0 auto 1rem;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f3eef5;
  color: #5b1a62;
  font-size: 1.25rem;
}

#root_spn_profile .spn-table-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

#root_spn_profile .spn-table-empty-text {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

#root_spn_profile .spn-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_spn_profile .spn-data-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  border-spacing: 0;
}

#root_spn_profile .spn-data-table thead {
  background: #f9fafb;
}

#root_spn_profile .spn-data-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#root_spn_profile .spn-data-table .spn-th-sno,
#root_spn_profile .spn-data-table .spn-td-sno {
  width: 4.5rem;
  text-align: left;
}

#root_spn_profile .spn-data-table .spn-th-action,
#root_spn_profile .spn-data-table .spn-td-action {
  text-align: center;
  white-space: nowrap;
}

#root_spn_profile .spn-data-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

#root_spn_profile .spn-data-table tbody tr:last-child {
  border-bottom: none;
}

#root_spn_profile .spn-data-table tbody tr:hover {
  background: rgba(248, 245, 250, 0.85);
}

#root_spn_profile .spn-data-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  vertical-align: middle;
}

#root_spn_profile .spn-td-sno {
  color: #6b7280;
  white-space: nowrap;
}

#root_spn_profile .spn-td-code {
  font-weight: 600;
  color: #111827;
}

#root_spn_profile .spn-td-name {
  font-weight: 500;
  color: #111827;
}

#root_spn_profile .spn-category-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  background: #f3eef5;
  color: #5b1a62;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

#root_spn_profile .spn-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

#root_spn_profile .spn-icon-btn-edit {
  background: linear-gradient(90deg, #5b1a62 0%, #1a1a7a 100%);
}

#root_spn_profile .spn-icon-btn-edit:hover {
  opacity: 0.92;
}

#root_spn_profile .spn-icon-btn-delete {
  background: #dc2626;
}

#root_spn_profile .spn-icon-btn-delete:hover {
  background: #b91c1c;
}

#root_spn_profile .spn-td-loading {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

#root_spn_profile .spn-status-active {
  background: #ecfdf5;
  color: #047857;
}

#root_spn_profile .spn-status-inactive {
  background: #f3f4f6;
  color: #6b7280;
}

#root_spn_profile .spn-send-action-btns {
  gap: 0.35rem;
}

#root_spn_profile .spn-icon-btn-whatsapp {
  background: #22c55e;
}

#root_spn_profile .spn-icon-btn-whatsapp:hover {
  background: #16a34a;
}

#root_spn_profile .spn-icon-btn-email {
  background: #2563eb;
}

#root_spn_profile .spn-icon-btn-email:hover {
  background: #1d4ed8;
}

#root_spn_profile .spn-icon-btn-sms {
  background: #7c3aed;
}

#root_spn_profile .spn-icon-btn-sms:hover {
  background: #6d28d9;
}

#root_spn_profile .spn-template-filter-bar {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

#root_spn_profile .spn-template-filter-group {
  max-width: 28rem;
  margin: 0;
}

/* ---- Visitor profile (scoped, new rules only) ---- */
#visitorProfileDivId {
  margin-top: 0;
}

#visitorProfileMainId .ho-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4338ca;
}

#visitorProfileDivId .ho-modal-overlay {
  z-index: 10050;
}

#visitorProfileMainId .ho-data-table-wrap > table,
#visitorProfileMainId table.ho-data-table,
#visitorProfileMainId .vtr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

#visitorProfileMainId .ho-data-table th,
#visitorProfileMainId .vtr-table th {
  background: #eef2ff;
  color: #4338ca;
  text-align: left;
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#visitorProfileMainId .ho-data-table td,
#visitorProfileMainId .vtr-table td {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid #eef2f7;
  vertical-align: top;
  color: #374151;
}

#visitorProfileMainId .ho-data-table tbody tr:hover td,
#visitorProfileMainId .vtr-table tbody tr:hover td {
  background: #f9fafb;
}

#visitorProfileMainId .norecFount {
  text-align: center;
  color: #dc2626;
  font-weight: 600;
  padding: 1rem 0;
}

#visitorProfileMainId .editIcon {
  margin-left: 0.35rem;
  color: #4f46e5;
  cursor: pointer;
}

#visitorProfileMainId .editIcon:hover {
  color: #4338ca;
}

#visitorProfileDivId .btn,
#visitorProfileMainId .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#visitorProfileMainId .btn-primary {
  background: #4f46e5;
  color: #fff;
}

#visitorProfileMainId .form-control {
  width: 100%;
  max-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

#visitorProfileDivId .ui-helper-hidden-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

#visitorProfileDivId .ui-datepicker {
  display: none;
  position: absolute;
  z-index: 10000;
  width: 18em;
  padding: 0.4em;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  font-size: 13px;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.3em 0;
  margin-bottom: 0.2em;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-prev,
#visitorProfileDivId .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 0.2em;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  color: #4f46e5;
  font-weight: 600;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-prev:hover,
#visitorProfileDivId .ui-datepicker .ui-datepicker-next:hover {
  background: #eef2ff;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-prev {
  left: 0.2em;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-next {
  right: 0.2em;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-prev span,
#visitorProfileDivId .ui-datepicker .ui-datepicker-next span {
  display: none;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-prev::after {
  content: "?";
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-next::after {
  content: "?";
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-title {
  text-align: center;
  font-weight: 600;
  margin: 0 2.5em;
}

#visitorProfileDivId .ui-datepicker .ui-datepicker-title select {
  margin: 0.1em;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

#visitorProfileDivId .ui-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

#visitorProfileDivId .ui-datepicker th {
  padding: 0.4em;
  text-align: center;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: #6b7280;
}

#visitorProfileDivId .ui-datepicker td {
  padding: 1px;
  border: 0;
}

#visitorProfileDivId .ui-datepicker td a,
#visitorProfileDivId .ui-datepicker td span {
  display: block;
  padding: 0.35em;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  color: #374151;
}

#visitorProfileDivId .ui-datepicker td a:hover {
  background: #eef2ff;
}

#visitorProfileDivId .ui-datepicker td a.ui-state-active {
  background: #4f46e5;
  color: #fff;
}

#visitorProfileDivId .ui-autocomplete {
  position: absolute;
  z-index: 10001;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
}

#visitorProfileDivId .ui-autocomplete .ui-menu-item {
  padding: 0;
  list-style: none;
}

#visitorProfileDivId .ui-autocomplete .ui-menu-item a,
#visitorProfileDivId .ui-autocomplete .ui-menu-item div {
  display: block;
  padding: 6px 12px;
  cursor: pointer;
  color: #374151;
  text-decoration: none;
}

#visitorProfileDivId .ui-autocomplete .ui-menu-item a.ui-state-focus,
#visitorProfileDivId .ui-autocomplete .ui-menu-item a:hover,
#visitorProfileDivId .ui-autocomplete .ui-menu-item div.ui-state-focus,
#visitorProfileDivId .ui-autocomplete .ui-menu-item div:hover {
  background: #eef2ff;
  color: #4338ca;
}

@media print {
  .header,
  .no-print,
  .printBtn {
    display: none !important;
  }

  #printVtrSlipModal.ho-modal-overlay {
    position: static;
    display: block;
    background: none;
    padding: 0;
    backdrop-filter: none;
  }

  #printVtrSlipModal .ho-modal-box {
    box-shadow: none;
    max-width: 100%;
    max-height: none;
  }
}

/* ---- Expense profile (scoped, new rules only) ---- */
#expenseProfileDivId {
  margin-top: 0;
}

#expenseProfileMainId .ho-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4338ca;
}

#expenseProfileDivId .ho-modal-overlay {
  z-index: 10050;
}

#expenseProfileMainId .exp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  #expenseProfileMainId .exp-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  #expenseProfileMainId .exp-form-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

#expenseProfileMainId .norecFount {
  text-align: center;
  color: #dc2626;
  font-weight: 600;
  padding: 1rem 0;
}

#expenseProfileMainId .ho-data-table-wrap > table,
#expenseProfileMainId table.ho-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

#expenseProfileMainId .ho-data-table th {
  background: #eef2ff;
  color: #4338ca;
  text-align: left;
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#expenseProfileMainId .ho-data-table td {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid #eef2f7;
  vertical-align: top;
  color: #374151;
}

#expenseProfileMainId .box {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}

#expenseProfileMainId .box-header {
  padding: 1rem 1.25rem;
}

#expenseProfileMainId .box .paddingClas {
  padding: 0.25rem 0;
}

#expenseProfileMainId .box .pClass {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: #374151;
}

#expenseProfileMainId .box .labelClass {
  font-weight: 600;
  color: #4338ca;
  margin-right: 0.35rem;
}

#expenseProfileMainId .box .head_title {
  font-weight: 700;
  color: #4f46e5;
  font-size: 0.9rem;
}

#expenseProfileMainId .box .hrClass {
  border-top: 1px solid #e5e7eb;
  margin: 0.75rem 0;
  clear: both;
}

#expenseProfileMainId .box [class*="col-md-"] {
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
}

@media (min-width: 768px) {
  #expenseProfileMainId .box .col-md-2 { width: 16.666%; }
  #expenseProfileMainId .box .col-md-3 { width: 25%; }
  #expenseProfileMainId .box .col-md-5 { width: 41.666%; }
  #expenseProfileMainId .box .col-md-12 { width: 100%; }
}

#expenseProfileMainId .box::after {
  content: "";
  display: table;
  clear: both;
}

#expenseProfileMainId .redText {
  color: #dc2626;
  font-weight: 600;
}

#expenseProfileDivId .btn,
#expenseProfileMainId .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#expenseProfileMainId .btn-primary { background: #4f46e5; color: #fff; }
#expenseProfileMainId .btn-success { background: #16a34a; color: #fff; }
#expenseProfileMainId .btn-danger { background: #dc2626; color: #fff; }

#expenseProfileMainId .pull-right { float: right; }
#expenseProfileMainId .marginBottom10px { margin-bottom: 0.625rem; }
#expenseProfileMainId .marginRight10px { margin-right: 0.625rem; }

#expenseProfileDivId .ui-helper-hidden-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

#expenseProfileDivId .ui-datepicker,
#expenseProfileDivId .ui-autocomplete {
  z-index: 10060;
}

#expenseProfileDivId .ui-datepicker {
  display: none;
  position: absolute;
  width: 18em;
  padding: 0.4em;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  font-size: 13px;
}

#expenseProfileDivId .ui-autocomplete {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
}

#expenseProfileDivId .ui-autocomplete .ui-menu-item a,
#expenseProfileDivId .ui-autocomplete .ui-menu-item div {
  display: block;
  padding: 6px 12px;
  cursor: pointer;
  color: #374151;
  text-decoration: none;
}

#expenseProfileDivId .ui-autocomplete .ui-menu-item a:hover,
#expenseProfileDivId .ui-autocomplete .ui-menu-item a.ui-state-focus,
#expenseProfileDivId .ui-autocomplete .ui-menu-item div:hover,
#expenseProfileDivId .ui-autocomplete .ui-menu-item div.ui-state-focus {
  background: #eef2ff;
  color: #4338ca;
}

/* ---- Payroll profile (scoped, new rules only) ---- */
#payrollProfileDivId {
  margin-top: 0;
}

#payrollProfileMainId .ho-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4338ca;
}

#payrollProfileDivId .ho-modal-overlay {
  z-index: 10050;
}

#payrollProfileMainId .payroll-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  #payrollProfileMainId .payroll-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

#payrollProfileMainId .payroll-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 24rem;
  margin-bottom: 1rem;
}

#payrollProfileMainId .ho-data-table-wrap > table,
#payrollProfileMainId table.ho-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

#payrollProfileMainId .ho-data-table th {
  background: #eef2ff;
  color: #4338ca;
  text-align: left;
  padding: 0.65rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#payrollProfileMainId .ho-data-table td {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid #eef2f7;
  vertical-align: top;
  color: #374151;
}

#payrollProfileMainId .ho-data-table tbody tr:hover td {
  background: #f9fafb;
}

#payrollProfileMainId #salaryMonthTableId h4 {
  margin: 0.75rem 0 0.35rem;
  color: #4338ca;
  font-size: 1rem;
  font-weight: 600;
}

#payrollProfileMainId #salaryMonthTableId table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

#payrollProfileMainId #salaryMonthTableId table th {
  background: #eef2ff;
  color: #4338ca;
  padding: 0.65rem 0.75rem;
  text-align: left;
}

#payrollProfileMainId #salaryMonthTableId table td {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid #eef2f7;
}

#payrollProfileDivId .btn,
#payrollProfileMainId .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#payrollProfileMainId .btn-primary { background: #4f46e5; color: #fff; }
#payrollProfileMainId .btn-success { background: #16a34a; color: #fff; }
#payrollProfileMainId .btn-danger { background: #dc2626; color: #fff; }
#payrollProfileMainId .btn-info { background: #2563eb; color: #fff; }

#payrollProfileMainId .pull-right { float: right; }

#payrollProfileMainId .form-control,
#payrollProfileDivId .form-control {
  width: 100%;
  max-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}

#payrollProfileMainId .box [class*="col-md-"] {
  box-sizing: border-box;
}

/* ---- Rules and Regulations (rr-*) ? new rules only ---- */
#root_rules_profile {
  margin-top: 0;
}

#root_rules_profile .rr-page-header {
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 55%, #5b1a62 100%);
}

#root_rules_profile .rr-page-eyebrow {
  margin: 0 0 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

#root_rules_profile .rr-main-content {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  #root_rules_profile .rr-main-content {
    padding: 1.25rem 1.5rem 2rem;
  }
}

#root_rules_profile #rulesHeadID {
  margin-bottom: 0;
}

#root_rules_profile .rr-rules-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#root_rules_profile .rr-section-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fafbff;
}

#root_rules_profile .rr-heading-wrap {
  margin-bottom: 0;
}

#root_rules_profile .rr-heading-table th,
#root_rules_profile .rr-heading-table td,
#root_rules_profile .rr-rules-table th,
#root_rules_profile .rr-rules-table td {
  vertical-align: middle;
}

#root_rules_profile .rr-heading-cell {
  text-align: left;
  width: 100%;
  min-width: 12rem;
}

#root_rules_profile .rr-rule-desc-cell {
  text-align: left;
  min-width: 14rem;
}

#root_rules_profile .rr-field-text {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.5;
  word-break: break-word;
}

#root_rules_profile .editIcon {
  color: #4f46e5;
  cursor: pointer;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

#root_rules_profile .editIcon:hover {
  color: #3730a3;
}

#root_rules_profile .hideInfo {
  display: none;
}

#root_rules_profile .showInfo {
  display: block;
}

#root_rules_profile .rr-action-cell {
  text-align: center;
  white-space: nowrap;
  width: 3.25rem;
}

#root_rules_profile .rr-action-cell-wide {
  width: auto;
  min-width: 7rem;
}

#root_rules_profile .rr-btn-text {
  margin-left: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
}

#root_rules_profile .rr-btn-disabled,
#root_rules_profile .rr-btn-disabled:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#root_rules_profile .rr-rules-table-wrap {
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: 0.25rem 0 0.5rem;
}

#root_rules_profile .rulesHeadId {
  padding: 0;
}

#root_rules_profile .rr-empty-wrap {
  padding: 0.5rem 0;
}

#root_rules_profile .empty_rule {
  margin: 0;
}

#root_rules_profile .rr-empty-inline {
  padding: 1rem;
}

#root_rules_profile .rr-inline-form {
  width: 100%;
}

#root_rules_profile .rr-inline-edit-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

#root_rules_profile .rr-inline-edit-row .ho-form-textarea {
  flex: 1;
  min-width: 0;
}

#root_rules_profile .rr-inline-save {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

#root_rules_profile .ho-data-table-wrap {
  overflow-x: auto;
}

@media (max-width: 639px) {
  #root_rules_profile .ho-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  #root_rules_profile .ho-card-header .ho-btn {
    width: 100%;
    justify-content: center;
  }

  #root_rules_profile .rr-btn-text {
    display: inline;
  }
}

#root_rules_profile .ho-modal-overlay {
  z-index: 1200;
}

/* ---- View Task charge confirm modal (vt-charge-*) ? new rules only ---- */
#chargeServiceConfirmModalId .vt-charge-confirm-header {
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 55%, #5b1a62 100%);
}

#chargeServiceConfirmModalId .vt-charge-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
}

#chargeServiceConfirmModalId .vt-charge-confirm-panel {
  border: 1px solid #e5e7eb;
}

/* ========== AMC Master Default Service page (amds-*) ========== */
.amds-page {
  max-width: 72rem;
  margin: 1.25rem auto 2.5rem;
  padding: 0 1rem 1.5rem;
}

@media (min-width: 640px) {
  .amds-page {
    margin-top: 1.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.amds-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.amds-card-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 55%, #ffffff 100%);
  border-bottom: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
  .amds-card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
  }
}

.amds-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e1b4b;
  letter-spacing: -0.01em;
}

.amds-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #64748b;
}

.amds-amc-name {
  font-weight: 600;
  color: #4338ca;
}

.amds-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

@media (min-width: 640px) {
  .amds-actions {
    flex-direction: row;
    width: auto;
  }
}

.amds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

@media (min-width: 640px) {
  .amds-btn {
    width: auto;
  }
}

.amds-btn:hover {
  transform: translateY(-1px);
}

.amds-btn-primary {
  color: #fff;
  background: #16a34a;
  box-shadow: 0 8px 18px -10px rgba(22, 163, 74, 0.7);
}

.amds-btn-primary:hover {
  background: #15803d;
}

.amds-btn-secondary {
  color: #fff;
  background: #475569;
  box-shadow: 0 8px 18px -10px rgba(71, 85, 105, 0.65);
}

.amds-btn-secondary:hover {
  background: #334155;
}

.amds-btn-danger {
  color: #fff;
  background: #dc2626;
  box-shadow: 0 8px 18px -10px rgba(220, 38, 38, 0.65);
}

.amds-btn-danger:hover {
  background: #b91c1c;
}

.amds-btn-muted {
  color: #1f2937;
  background: #e5e7eb;
}

.amds-btn-muted:hover {
  background: #d1d5db;
}

.amds-btn-icon {
  width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem;
  border-radius: 9999px;
}

.amds-card-body {
  padding: 1rem 1.15rem 1.35rem;
}

@media (min-width: 640px) {
  .amds-card-body {
    padding: 1.15rem 1.5rem 1.5rem;
  }
}

.amds-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

.amds-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
  background: #fff;
}

.amds-table thead {
  background: #eef2ff;
}

.amds-table th {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #e5e7eb;
  color: #312e81;
  font-weight: 700;
  white-space: nowrap;
}

.amds-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.amds-table tbody tr:hover {
  background: #f8fafc;
}

.amds-table .amds-col-center {
  text-align: center;
}

.amds-table .amds-col-right {
  text-align: right;
}

.amds-empty {
  margin-top: 0.75rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid #f59e0b;
  border-radius: 0.5rem;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.875rem;
}

.amds-error {
  padding: 1.25rem 1.35rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid #fecaca;
  color: #b91c1c;
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.35);
  font-weight: 600;
}

.amds-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  background: rgba(15, 23, 42, 0.5);
}

.amds-modal-overlay.amds-open {
  display: flex;
}

.amds-modal {
  width: 100%;
  max-width: 32rem;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}

.amds-modal-sm {
  max-width: 24rem;
}

.amds-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.75rem 1rem 1.15rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.amds-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
}

.amds-modal-close {
  position: absolute;
  right: 0.85rem;
  top: 0.7rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
}

.amds-modal-close:hover {
  color: #0f172a;
}

.amds-modal-body {
  padding: 1.15rem 1.25rem 1.35rem;
}

.amds-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .amds-form-row {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
  }
}

.amds-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

@media (min-width: 640px) {
  .amds-form-label {
    width: 42%;
    flex-shrink: 0;
  }
}

.amds-form-control {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.65rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.875rem;
}

.amds-form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.amds-form-error {
  margin-top: -0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: #dc2626;
}

.amds-modal-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
  .amds-modal-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.amds-confirm-text {
  margin: 0 0 1.15rem;
  color: #475569;
  font-size: 0.95rem;
}

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

/* =========================================================
   staff_task_point.jsp ? unique styles (stp- prefix)
   Matches company_list brand theme
   ========================================================= */

#staffTaskPointRoot {
  width: 100%;
}

.stp-page {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

.stp-modal.hidden {
  display: none !important;
}

.stp-modal.flex {
  display: flex !important;
}

.stp-point-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.2rem 0.65rem;
  background: linear-gradient(90deg, #5b1a62 0%, #1a1a7a 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 4px 12px rgba(91, 26, 98, 0.25);
  white-space: nowrap;
}

.stp-point-badge i {
  font-size: 0.7rem;
  opacity: 0.9;
}

.stp-point-badge-total {
  font-size: 0.875rem;
  padding: 0.35rem 0.8rem;
  box-shadow: 0 6px 16px rgba(91, 26, 98, 0.3);
}

.stp-point-input {
  letter-spacing: 0.02em;
}

.stp-summary-card {
  position: relative;
  overflow: hidden;
}

.stp-summary-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 9999px 0 0 9999px;
}

.stp-summary-card-today::before {
  background: linear-gradient(180deg, #d0153f 0%, #5b1a62 100%);
}

.stp-summary-card-week::before {
  background: linear-gradient(180deg, #5b1a62 0%, #1a1a7a 100%);
}

.stp-summary-card-month::before {
  background: linear-gradient(180deg, #1a1a7a 0%, #05053d 100%);
}

.stp-summary-value {
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stp-summary-icon {
  box-shadow: inset 0 0 0 1px rgba(91, 26, 98, 0.08);
}

/* =========================================================
   change_password.jsp ? unique styles (cpwd- prefix)
   ========================================================= */

#changePasswordRoot {
  width: 100%;
}

.cpwd-page {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

#editPass label.error {
  display: block;
  margin-top: 0.35rem;
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 500;
}

#editPass input.error {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}

.cpwd-password-wrap {
  position: relative;
}

.cpwd-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}

.cpwd-toggle-btn:hover {
  color: #5b1a62;
  background: #f8f5fa;
}

.cpwd-rules {
  line-height: 1.35;
}

.cpwd-rule-valid {
  color: #15803d;
  font-weight: 500;
}

.cpwd-rule-invalid {
  color: #dc2626;
  font-weight: 500;
}

.cpwd-input-ok {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.cpwd-input-bad {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}


/* =========================================================
   officeDetails.jsp ? unique styles (od- prefix)
   ========================================================= */

.od-page {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

.od-layout {
  width: 100%;
}

.od-sidebar {
  z-index: 40;
}

.od-main {
  padding: 1rem;
}

@media (min-width: 640px) {
  .od-main {
    padding: 1.25rem 1.5rem;
  }
}

.od-admin-menu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.od-admin-menu .od-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.875rem;
}

.od-admin-menu .od-nav-link:hover {
  background: #eef2ff;
}

.od-admin-menu li.active .od-nav-link,
.od-admin-menu li.od-nav-active .od-nav-link {
  background: #e0e7ff;
  color: #3730a3;
  font-weight: 600;
}

.od-admin-content {
  display: none;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  border: 1px solid #e5e7eb;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
}

/* panes shown via jQuery .show() */

.od-section-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.od-field-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
}

.od-field-value {
  font-size: 0.875rem;
  color: #111827;
}

.od-table {
  width: 100%;
  border-collapse: collapse;
}

.od-table th,
.od-table td {
  padding: 0.625rem 0.75rem;
  border: 1px solid #e5e7eb;
  font-size: 0.875rem;
  vertical-align: middle;
}

.od-table-head,
.od-table thead {
  background: #f3f4f6;
}

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

.od-ml-auto {
  margin-left: auto;
}

.od-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.od-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.od-col-12 { width: 100%; }
.od-col-10 { width: 100%; }
.od-col-8 { width: 100%; }
.od-col-7 { width: 100%; }
.od-col-5 { width: 100%; }
.od-col-4 { width: 100%; }
.od-col-3 { width: 100%; }
.od-col-2 { width: 100%; }
.od-col-1 { width: 100%; }

@media (min-width: 768px) {
  .od-col-10 { width: 83.333%; }
  .od-col-8 { width: 66.666%; }
  .od-col-7 { width: 58.333%; }
  .od-col-5 { width: 41.666%; }
  .od-col-4 { width: 33.333%; }
  .od-col-3 { width: 25%; }
  .od-col-2 { width: 16.666%; }
  .od-col-1 { width: 8.333%; }
}

.od-modal.ho-modal-overlay {
  align-items: flex-start;
  padding-top: 3vh;
  overflow-y: auto;
}

.od-modal .ho-modal-box {
  margin: 1rem auto;
  max-width: 42rem;
  width: calc(100% - 1.5rem);
}

.od-modal .od-modal-content {
  width: 100%;
}

.od-w-full { width: 100%; }
.od-mt-2 { margin-top: 0.5rem; }
.od-container { width: 100%; }

.od-page label.error {
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
  margin-top: 0.25rem;
}

/* Ensure migrated buttons keep base + variant styles */
.od-page .ho-btn-success,
.od-page .ho-btn-primary,
.od-page .ho-btn-danger,
.od-page .ho-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#root_office_details {
  width: 100%;
}

/* ---- Office Details: company_profile-style info / contacts panels (od-ho-*) ---- */
#root_office_details .od-ho-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
}

#root_office_details .od-ho-panel .ho-card {
  margin-bottom: 0;
}

#root_office_details .od-ho-panel .ho-card-title {
  margin-bottom: 1rem;
}

#root_office_details .od-ho-edit-icon {
  margin-left: 0.45rem;
  color: #6366f1;
  cursor: pointer;
  font-size: 0.875rem;
}

#root_office_details .od-ho-edit-icon:hover {
  color: #4338ca;
}

#root_office_details .od-ho-value-line {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1.5;
  word-break: break-word;
}

#root_office_details .od-ho-address-line {
  line-height: 1.6;
}

#root_office_details .od-ho-empty {
  color: #9ca3af;
}

#root_office_details .hideOffice {
  display: none;
}

#root_office_details .showOffice {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

#root_office_details .od-ho-inline-edit {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 28rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  overflow: hidden;
  background: #fff;
}

#root_office_details .od-ho-inline-edit input[type="text"] {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #374151;
  outline: none;
  background: transparent;
}

#root_office_details .od-ho-inline-edit input[type="text"]:focus {
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.35);
}

#root_office_details .od-ho-inline-edit .od-ho-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #22c55e;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

#root_office_details .od-ho-inline-edit .od-ho-save-btn:hover {
  background: #16a34a;
}

#root_office_details .od-ho-panel .editOfficeFormId label.error {
  display: block;
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

#root_office_details .od-ho-panel .ho-btn.ho-btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

/* ---- Office Details sidebar: match company_profile (od-nav-cp-*) ---- */
#root_office_details #odSidebar.ho-sidebar {
  background: #eef2ff;
}

#root_office_details #officeProfileSubMenuId.ho-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_office_details #officeProfileSubMenuId .submenu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

#root_office_details #officeProfileSubMenuId .submenu-link:hover,
#root_office_details #officeProfileSubMenuId .submenu-link.hover\:bg-indigo-100:hover {
  background: #e0e7ff;
}

#root_office_details #officeProfileSubMenuId .submenu-link.font-medium.text-indigo-700.bg-indigo-100 {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
}

#root_office_details #officeProfileSubMenuId .submenu-link i {
  color: #4f46e5;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

#root_office_details #odSidebar.is-collapsed #officeProfileSubMenuId .submenu-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* =========================================================
   anniversary_list.jsp ? unique styles (annl- prefix)
   ========================================================= */

#root_anniversary_list {
  width: 100%;
}

.annl-page {
  min-height: calc(100vh - 4rem);
  padding: 1rem;
  background: linear-gradient(180deg, #f8f5fa 0%, #f3f4f6 40%, #ffffff 100%);
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

@media (min-width: 640px) {
  .annl-page {
    padding: 1.5rem 1.75rem;
  }
}

.annl-card {
  max-width: 72rem;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.08);
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .annl-card {
    padding: 1.5rem 1.75rem;
  }
}

.annl-header {
  margin-bottom: 1.25rem;
}

.annl-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b1a62;
}

.annl-title {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #05053d;
}

@media (min-width: 640px) {
  .annl-title {
    font-size: 1.75rem;
  }
}

.annl-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.annl-search-form {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #f8f5fa;
  border: 1px solid #efe7f2;
}

.annl-search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: end;
}

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

.annl-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.annl-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.annl-label-spacer {
  display: none;
}

@media (min-width: 768px) {
  .annl-label-spacer {
    display: block;
  }
}

.annl-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.625rem;
  background: #ffffff url("/web/view/images/calendar.png") right 0.75rem center no-repeat;
  padding: 0.625rem 2.25rem 0.625rem 0.85rem;
  font-size: 0.875rem;
  color: #111827;
}

.annl-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 3px rgba(91, 26, 98, 0.12);
}

.annl-search-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .annl-search-btn {
    width: auto;
    white-space: nowrap;
  }
}

.annl-section {
  margin-top: 1.5rem;
}

.annl-section-title {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #f3eef5 0%, #eef2ff 100%);
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.annl-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

.annl-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.annl-table th,
.annl-table td,
.annl-th,
.annl-td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
  text-align: center;
  vertical-align: middle;
}

.annl-table thead th,
.annl-th {
  background: #f9fafb;
  color: #374151;
  font-weight: 700;
  white-space: nowrap;
}

.annl-table tbody tr:hover {
  background: #f8f5fa;
}

.annl-empty {
  display: none;
  margin: 1rem 0 0;
  color: #dc2626;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

/* =========================================================
   birthday_list.jsp ? unique styles (bdl- prefix)
   ========================================================= */

#root_birthday_list {
  width: 100%;
}

.bdl-page {
  min-height: calc(100vh - 4rem);
  padding: 1rem;
  background: linear-gradient(180deg, #f8f5fa 0%, #f3f4f6 40%, #ffffff 100%);
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
}

@media (min-width: 640px) {
  .bdl-page {
    padding: 1.5rem 1.75rem;
  }
}

.bdl-card {
  max-width: 72rem;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.08);
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .bdl-card {
    padding: 1.5rem 1.75rem;
  }
}

.bdl-header {
  margin-bottom: 1.25rem;
}

.bdl-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b1a62;
}

.bdl-title {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #05053d;
}

@media (min-width: 640px) {
  .bdl-title {
    font-size: 1.75rem;
  }
}

.bdl-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.bdl-search-form {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: #f8f5fa;
  border: 1px solid #efe7f2;
}

.bdl-search-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: end;
}

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

.bdl-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bdl-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.bdl-label-spacer {
  display: none;
}

@media (min-width: 768px) {
  .bdl-label-spacer {
    display: block;
  }
}

.bdl-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.625rem;
  background: #ffffff url("/web/view/images/calendar.png") right 0.75rem center no-repeat;
  padding: 0.625rem 2.25rem 0.625rem 0.85rem;
  font-size: 0.875rem;
  color: #111827;
}

.bdl-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 3px rgba(91, 26, 98, 0.12);
}

.bdl-search-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .bdl-search-btn {
    width: auto;
    white-space: nowrap;
  }
}

.bdl-section {
  margin-top: 1.5rem;
}

.bdl-section-title {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #f3eef5 0%, #eef2ff 100%);
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.bdl-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

.bdl-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.bdl-table th,
.bdl-table td,
.bdl-th,
.bdl-td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.875rem;
  text-align: center;
  vertical-align: middle;
}

.bdl-table thead th,
.bdl-th {
  background: #f9fafb;
  color: #374151;
  font-weight: 700;
  white-space: nowrap;
}

.bdl-table tbody tr:hover {
  background: #f8f5fa;
}

.bdl-empty {
  display: none;
  margin: 1rem 0 0;
  color: #dc2626;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

#searchBirthday label.error {
  color: #dc2626;
}

#searchBirthday input.error {
  border: 1px solid orange;
}

/* ================= edit_company_contact (ecc) page ================= */
.ecc-page {
  max-width: 960px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.ecc-card {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 1.25rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.10);
  overflow: hidden;
}

.ecc-card-head {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #ffffff;
  padding: 1.1rem 1.4rem;
}

.ecc-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.ecc-card-sub {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.ecc-card-body {
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.ecc-card-foot {
  padding: 1rem 1.4rem 1.4rem;
  text-align: center;
}

.ecc-section {
  border: 1px solid #eef2f7;
  border-radius: 0.9rem;
  overflow: hidden;
}

.ecc-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: #faf7fb;
  border-bottom: 1px solid #eef2f7;
}

.ecc-section-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: #ede9fe;
  color: #5b1a62;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ecc-section-title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}

.ecc-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ecc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ecc-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
  color: #334155;
}

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

.ecc-table tr:hover td {
  background: #faf7fb;
}

.ecc-table .ecc-td-action {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.ecc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ecc-icon-danger { background: #fee2e2; color: #dc2626; }
.ecc-icon-danger:hover { background: #dc2626; color: #ffffff; }
.ecc-icon-primary { background: #ede9fe; color: #5b1a62; }
.ecc-icon-primary:hover { background: #5b1a62; color: #ffffff; }

.ecc-btn-add,
.ecc-btn-save,
.ecc-btn-close,
.ecc-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}

.ecc-btn-add { background: #16a34a; color: #ffffff; }
.ecc-btn-add:hover { filter: brightness(0.95); }
.ecc-btn-save { background: #16a34a; color: #ffffff; }
.ecc-btn-save:hover { filter: brightness(0.95); }
.ecc-btn-close { background: #ef4444; color: #ffffff; }
.ecc-btn-close:hover { filter: brightness(0.95); }
.ecc-btn-back { background: #5b1a62; color: #ffffff; padding: 0.55rem 1.4rem; font-size: 0.85rem; }
.ecc-btn-back:hover { filter: brightness(1.1); }

/* ecc modals */
.ecc-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  background: rgba(5, 5, 61, 0.5);
  overflow-y: auto;
}

.ecc-modal.flex { display: flex; }

.ecc-modal-panel {
  width: 100%;
  max-width: 32rem;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 25px 60px rgba(5, 5, 61, 0.35);
  overflow: hidden;
  animation: eccModalIn 0.15s ease-out;
}

.ecc-modal-lg { max-width: 46rem; }
.ecc-modal-sm { max-width: 24rem; }

.ecc-confirm-msg {
  font-size: 0.95rem;
  color: #334155;
  text-align: center;
  margin: 0.5rem 0 0;
}

@keyframes eccModalIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.ecc-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #ffffff;
}

.ecc-modal-head h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ecc-modal-x {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.ecc-modal-x:hover { opacity: 1; }

.ecc-modal-body { padding: 1.2rem; }

.ecc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.ecc-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.ecc-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.3rem;
}

.ecc-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.55rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ecc-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.18);
}

#root_edit_company_contact label.error {
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
  margin-top: 0.25rem;
}

#root_edit_company_contact input.error,
#root_edit_company_contact select.error {
  border-color: #f97316;
}

@media (max-width: 640px) {
  .ecc-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .ecc-section-head { flex-wrap: wrap; }
}

/* ================= staff_report_product (srp) page ================= */
.srp-page {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1rem;
}

.srp-card {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 1.25rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.10);
  overflow: hidden;
}

.srp-card-head {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #ffffff;
  padding: 1.1rem 1.4rem;
}

.srp-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.srp-card-sub {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.srp-filter {
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid #eef2f7;
  background: #faf7fb;
}

.srp-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}

.srp-field {
  display: flex;
  flex-direction: column;
}

.srp-field-btn {
  justify-content: flex-end;
}

.srp-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.3rem;
}

.srp-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.55rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.srp-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.18);
}

.srp-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 0.55rem;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.srp-btn-submit:hover { filter: brightness(0.95); }

.srp-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.4rem 1.4rem;
}

.srp-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.srp-table thead th {
  background: #05053d;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.7rem 0.8rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid #1a1a7a;
}

.srp-table thead th.aCenter {
  text-align: center;
}

.srp-table thead th:first-child { border-top-left-radius: 0.6rem; }
.srp-table thead th:last-child { border-top-right-radius: 0.6rem; }

.srp-table .srp-td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.srp-table .srp-td.aCenter { text-align: center; }

.srp-row:nth-child(even) td { background: #faf9fc; }
.srp-row:hover td { background: #f3eef5; }

.srp-staff {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 180px;
}

.srp-staff-img {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #ede9fe;
  background: #ffffff;
  flex: 0 0 auto;
}

.srp-staff-link {
  font-weight: 600;
  color: #5b1a62;
  text-decoration: none;
  font-size: 0.85rem;
}

.srp-staff-link:hover { text-decoration: underline; }

.srp-link {
  color: #1a1a7a;
  font-weight: 600;
  text-decoration: none;
}

.srp-link:hover { text-decoration: underline; }

.srp-empty {
  text-align: center;
  padding: 1.5rem;
  color: #94a3b8;
  font-size: 0.9rem;
}

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

@media (max-width: 520px) {
  .srp-filter-grid { grid-template-columns: minmax(0, 1fr); }
}

/* srp datepicker ? menu_new does not load jquery-ui.css, so without these rules
   #ui-datepicker-div sits in document flow at the bottom of the page. */
body > #ui-datepicker-div.srp-datepicker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10050 !important;
}

#ui-datepicker-div.srp-datepicker.ui-datepicker,
#ui-datepicker-div.srp-datepicker {
  width: 300px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 13px;
  max-width: calc(100vw - 1rem);
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 34px;
  line-height: 1.6;
  font-weight: 600;
  color: #1e293b;
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-title select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #f8fafc;
  cursor: pointer;
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-title select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-prev,
#ui-datepicker-div.srp-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #f1f5f9;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.srp-datepicker .ui-datepicker-next { right: 0; }

#ui-datepicker-div.srp-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.srp-datepicker .ui-datepicker-next:hover {
  background: #ede9fe;
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.srp-datepicker .ui-datepicker-next span {
  display: none !important;
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-prev::after,
#ui-datepicker-div.srp-datepicker .ui-datepicker-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #6d28d9;
  border-right: 2px solid #6d28d9;
  text-indent: 0;
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-prev::after {
  transform: translate(-30%, -50%) rotate(-135deg);
}

#ui-datepicker-div.srp-datepicker .ui-datepicker-next::after {
  transform: translate(-70%, -50%) rotate(45deg);
}

#ui-datepicker-div.srp-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 0;
}

#ui-datepicker-div.srp-datepicker th {
  padding: 6px 0;
  color: #94a3b8;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  border: 0;
  background: transparent;
}

#ui-datepicker-div.srp-datepicker td {
  padding: 2px;
  text-align: center;
  border: 0;
}

#ui-datepicker-div.srp-datepicker td a,
#ui-datepicker-div.srp-datepicker td span {
  display: block;
  padding: 7px 0;
  border-radius: 9px;
  text-decoration: none;
  color: #334155;
  font-weight: 500;
  text-align: center;
}

#ui-datepicker-div.srp-datepicker td a:hover {
  background: #ede9fe;
  color: #5b1a62;
}

#ui-datepicker-div.srp-datepicker td .ui-state-active,
#ui-datepicker-div.srp-datepicker td a.ui-state-active {
  background: #5b1a62 !important;
  color: #ffffff !important;
}

#ui-datepicker-div.srp-datepicker td .ui-state-highlight {
  background: #f1f5f9;
  color: #05053d;
}

#ui-datepicker-div.srp-datepicker td span.ui-state-disabled {
  color: #cbd5e1;
  opacity: 0.7;
}

/* ================= staff_report (sr) page ================= */
.sr-page {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sr-tabs {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem;
  width: fit-content;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  box-shadow: 0 6px 20px rgba(91, 26, 98, 0.08);
}

.sr-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 0.65rem;
  background: transparent;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.sr-tab:hover {
  background: #f3eef5;
  color: #5b1a62;
}

.sr-tab-active,
.sr-tab-active:hover {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #ffffff;
}

.sr-panel-hidden {
  display: none !important;
}

.sr-card {
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 1.25rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.10);
  overflow: hidden;
}

.sr-card-head {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #ffffff;
  padding: 1rem 1.4rem;
}

.sr-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.sr-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.4rem 1.4rem;
}

.sr-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}

.sr-table thead th {
  background: #05053d;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.7rem 0.8rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid #1a1a7a;
}

.sr-table thead th.aCenter { text-align: center; }
.sr-table thead th:first-child { border-top-left-radius: 0.6rem; }
.sr-table thead th:last-child { border-top-right-radius: 0.6rem; }

.sr-table .sr-td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.sr-table .sr-td.aCenter { text-align: center; }

.sr-row:nth-child(even) td { background: #faf9fc; }
.sr-row:hover td { background: #f3eef5; }

.sr-staff {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 170px;
}

.sr-staff-img {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid #ede9fe;
  background: #ffffff;
  flex: 0 0 auto;
}

.sr-staff-link {
  font-weight: 600;
  color: #5b1a62;
  text-decoration: none;
  font-size: 0.9rem;
}

.sr-staff-link:hover { text-decoration: underline; }

.sr-count {
  min-width: 3rem;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.sr-count:hover { filter: brightness(0.95); }
.sr-count-assigned { background: #1a1a7a; }
.sr-count-completed { background: #16a34a; }
.sr-count-muted { background: #cbd5e1; color: #475569; cursor: default; }
.sr-count-muted:hover { filter: none; }

.sr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.sr-icon-primary { background: #ede9fe; color: #5b1a62; }
.sr-icon-primary:hover { background: #5b1a62; color: #ffffff; }
.sr-icon-success { background: #dcfce7; color: #16a34a; }
.sr-icon-success:hover { background: #16a34a; color: #ffffff; }

.sr-empty {
  text-align: center;
  padding: 1.5rem;
  color: #94a3b8;
  font-size: 0.9rem;
}

@media (max-width: 520px) {
  .sr-tabs {
    width: 100%;
    flex-direction: column;
  }

  .sr-tab {
    width: 100%;
  }
}

/* =====================================================================
 * Default Settings page (default_settings.jsp)  -> ds-* prefix
 * ===================================================================== */
.ds-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ds-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ds-title i { color: #5b1a62; }

.ds-subtitle {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #64748b;
}

.ds-tabs {
  display: inline-flex;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding: 0.3rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.8rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.ds-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 125px;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ds-tab:hover {
  background: #f3eef5;
  color: #5b1a62;
}

.ds-tab-active,
.ds-tab-active:hover {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #ffffff;
}

.ds-panel-hidden { display: none; }

.ds-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.ds-card {
  background: #ffffff;
  border: 1px solid #eef0f5;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.ds-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(90deg, #05053d, #1a1a7a);
  color: #ffffff;
}

.ds-card-icon { font-size: 1rem; opacity: 0.9; }

.ds-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.ds-card-body { padding: 0.35rem 1.1rem 0.85rem; }

.ds-activity-card {
  width: 100%;
  max-width: none;
}

.ds-activity-intro {
  margin: 0.2rem 0 0;
  color: #64748b;
  font-size: 0.85rem;
}

.ds-activity-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #eef0f5;
}

.ds-activity-heading {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 700;
}

.ds-activity-form {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  width: min(100%, 540px);
}

.ds-activity-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 0.6rem;
  padding: 0.55rem 0.75rem;
  color: #0f172a;
  font-size: 0.85rem;
  outline: none;
}

.ds-activity-form input:focus {
  border-color: #5b1a62;
  box-shadow: 0 0 0 3px rgba(91, 26, 98, 0.12);
}

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

.ds-btn-add {
  flex: 0 0 auto;
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #ffffff;
}

.ds-inline-message {
  display: none;
  margin: 0.75rem 1.1rem 0;
  border-radius: 0.55rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 500;
}

.ds-inline-visible { display: block; }
.ds-inline-success { background: #dcfce7; color: #166534; }
.ds-inline-error { background: #fee2e2; color: #b91c1c; }

.ds-confirm-dialog { max-width: 440px; }

.ds-confirm-text {
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

.ds-btn-delete {
  background: #dc2626;
  color: #ffffff;
}

.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.ds-table th {
  padding: 0.7rem 1.1rem;
  background: #f8fafc;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
}

.ds-table td {
  padding: 0.75rem 1.1rem;
  color: #334155;
  border-bottom: 1px solid #f1f5f9;
}

.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: #faf7fb; }

.ds-table .ds-id-cell {
  width: 15%;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

.ds-table .ds-name-cell { width: 70%; }

.ds-table .ds-action-heading,
.ds-table .ds-action-cell {
  width: 15%;
  text-align: center;
}

.ds-icon-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.5rem;
  background: #fee2e2;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ds-icon-delete:hover {
  background: #dc2626;
  color: #ffffff;
}

.ds-table .ds-table-state {
  padding: 2rem 1rem;
  color: #94a3b8;
  text-align: center;
}

.ds-table .ds-table-error { color: #dc2626; }

.ds-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid #f1f3f8;
}

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

.ds-row-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #334155;
  margin: 0;
  word-break: break-word;
}

.ds-row-value {
  font-size: 0.85rem;
  color: #0f172a;
  min-width: 0;
  word-break: break-word;
}

.ds-empty-val { color: #94a3b8; }

/* ---- injected content coming from default_settings.js ---- */
#root_default_settings .col-md-10 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: auto;
  padding: 0;
  float: none;
}

#root_default_settings .showSetting,
#root_default_settings .hideSetting { width: 100%; }

#root_default_settings .editIcon {
  cursor: pointer;
  color: #5b1a62;
  background: #f3eef5;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  transition: all 0.15s ease;
  font-size: 0.8rem;
}

#root_default_settings .editIcon:hover {
  background: #5b1a62;
  color: #ffffff;
}

#root_default_settings .showSetting a {
  color: #1a1a7a;
  text-decoration: underline;
  font-weight: 500;
}

#root_default_settings .smsSettingVal { margin: 0; }

#root_default_settings .input-group {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
}

#root_default_settings .inpBorder,
#root_default_settings input[type="text"],
#root_default_settings textarea,
#root_default_settings select.form-control {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#root_default_settings .inpBorder:focus,
#root_default_settings input[type="text"]:focus,
#root_default_settings textarea:focus,
#root_default_settings select.form-control:focus {
  border-color: #5b1a62;
  box-shadow: 0 0 0 3px rgba(91, 26, 98, 0.12);
}

#root_default_settings textarea { min-height: 70px; resize: vertical; }

#root_default_settings span.inpBorder {
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.85rem;
}

#root_default_settings .queckBtnCls {
  flex: 0 0 auto;
  border: none;
  background: #16a34a;
  color: #ffffff;
  border-radius: 0.5rem;
  width: 2.1rem;
  cursor: pointer;
}

#root_default_settings .queckBtnCls:hover { filter: brightness(0.95); }

#root_default_settings input[type="radio"] { margin-right: 0.25rem; }

/* ---- Modals (Tailwind-styled, driven by ds-open) ---- */
.ds-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1050;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 2rem;
  overflow-y: auto;
}

.ds-modal.ds-open { display: flex; }

.ds-modal-dialog { width: 100%; max-width: 520px; }
.ds-modal-lg { max-width: 820px; }

.ds-modal-content {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(2, 6, 23, 0.35);
  overflow: hidden;
}

.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(90deg, #05053d, #1a1a7a);
  color: #ffffff;
}

.ds-modal-title { font-size: 1rem; font-weight: 600; margin: 0; }

.ds-modal-x {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.ds-modal-x:hover { opacity: 1; }

.ds-modal-body { padding: 1.2rem; }

.ds-form-group { margin-bottom: 1rem; }

.ds-modal-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.5rem;
}

.ds-file {
  width: 100%;
  border: 1px dashed #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 0.85rem;
}

.ds-nic-instance {
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  min-height: 150px;
  padding: 0.25rem;
}

.ds-modal-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 0.6rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.ds-btn:hover { filter: brightness(0.96); }
.ds-btn-save { background: #16a34a; color: #ffffff; }
.ds-btn-cancel { background: #e2e8f0; color: #334155; }

@media (max-width: 900px) {
  .ds-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .ds-tabs {
    display: flex;
    width: 100%;
  }

  .ds-tab {
    flex: 1;
    min-width: 0;
  }

  .ds-activity-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-activity-form {
    flex-direction: column;
    width: 100%;
  }

  .ds-btn-add { justify-content: center; }

  .ds-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* ==========================================================================
   homepage_header_new.jsp ? fixed nav clearance (hhn- prefix)
   Mobile nav bar is taller than the old 41px spacer, which clipped headings.
   ========================================================================== */

.hhn-nav-spacer {
  display: block;
  width: 100%;
  height: 3.25rem; /* matches fixed nav h-12 (~52px with buffer) */
  min-height: 3.25rem;
  padding: 0 !important;
  margin: 0;
  border: 0;
  flex-shrink: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Mobile/tablet: padded hamburger bar is taller than desktop h-12 */
@media (max-width: 1023px) {
  .hhn-nav-spacer {
    height: 4.5rem;
    min-height: 4.5rem;
  }
}

@media (max-width: 479px) {
  .hhn-nav-spacer {
    height: 4.75rem;
    min-height: 4.75rem;
  }
}

/* Anchor/scroll targets should also clear the fixed header */
html {
  scroll-padding-top: 4.75rem;
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 3.25rem;
  }
}

/* ==========================================================================
   my_appointment.jsp — unique mya-* prefix (staff My Appointment)
   Theme aligned with company_list.jsp brand palette.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.mya-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.25rem 0 2rem;
  background: linear-gradient(135deg, #f8f5fa 0%, #ffffff 45%, #f3eef5 100%);
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.mya-wrap {
  width: min(80rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.mya-pagehead {
  margin-bottom: 1.25rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.mya-pagehead-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
  margin: 0;
  border: none;
}

@media (min-width: 860px) {
  .mya-pagehead-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.mya-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b1a62;
}

.mya-title {
  margin: 0.15rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #05053d;
}

.mya-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
  max-width: 28rem;
}

.mya-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  width: 100%;
  max-width: 26rem;
}

.mya-search-field {
  position: relative;
  flex: 1 1 12rem;
  min-width: 0;
}

.mya-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #5b1a62;
  font-size: 1.05rem;
  pointer-events: none;
}

.mya-input,
.mya-shell .form-control {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}

.mya-search-field .mya-input {
  padding-left: 2.15rem;
  background: #fff;
  border-color: #e5e7eb;
}

.mya-search-field .mya-input:focus {
  outline: none;
  border-color: #5b1a62;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 26, 98, 0.15);
}

.mya-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.mya-btn-accent {
  background: linear-gradient(90deg, #5b1a62 0%, #1a1a7a 100%);
  color: #fff !important;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
}

.mya-btn-accent:hover {
  opacity: 0.95;
}

.mya-btn-danger,
.mya-shell .btn-danger {
  background: #d0153f;
  color: #fff !important;
}

.mya-btn-danger:hover,
.mya-shell .btn-danger:hover {
  background: #b01234;
}

.mya-btn-success,
.mya-shell .btn-success {
  background: #059669;
  color: #fff !important;
}

.mya-btn-primary,
.mya-shell .btn-primary {
  background: linear-gradient(90deg, #5b1a62 0%, #1a1a7a 100%);
  color: #fff !important;
}

.mya-btn-ghost,
.mya-shell .btn-default {
  background: #f3eef5;
  color: #43124a !important;
}

.mya-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
}

.mya-panel-banner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
}

@media (min-width: 960px) {
  .mya-panel-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.mya-panel-banner-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.mya-panel-banner-sub {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.mya-controls {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
}

@media (min-width: 900px) {
  .mya-controls {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

.mya-date-nav {
  width: auto !important;
  margin: 0 !important;
}

.mya-date-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.65rem;
}

.mya-date-nav li {
  margin: 0;
}

.mya-date-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.45rem;
  color: #fff;
  text-decoration: none;
}

.mya-date-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.mya-date-input {
  min-width: 7.75rem !important;
  text-align: center;
  font-weight: 700;
  color: #fff !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mya-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.mya-status-chips .tdBtnId {
  display: inline-flex;
}

.mya-status-chips .tdBtnId .btn,
.mya-status-chips .btn {
  border-radius: 0.55rem !important;
  padding: 0.42rem 0.8rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  cursor: pointer;
  box-shadow: none !important;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.mya-status-chips .btn-primary,
.mya-status-chips .btn-info,
.mya-status-chips .btn-default,
.mya-status-chips .btn-success,
.mya-status-chips .btn-warning {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.mya-status-chips .btn-primary:hover,
.mya-status-chips .btn-info:hover,
.mya-status-chips .btn-default:hover,
.mya-status-chips .btn-success:hover,
.mya-status-chips .btn-warning:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

.mya-staff-strip {
  margin: 0;
  padding: 0.75rem 1.15rem 0;
}

.mya-staff-strip--solo {
  display: none !important;
}

.mya-staff-strip--multi {
  display: block;
}

.mya-staff-strip-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b1a62;
}

.mya-staff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mya-staff-list > li {
  flex: 0 0 auto;
}

.mya-staff-list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  border-radius: 999px;
  border: 1px solid #e8e4ec;
  color: #43124a;
  text-decoration: none;
  background: #f8f5fa;
  white-space: nowrap;
}

.mya-staff-list > li > a:hover {
  border-color: #5b1a62;
  background: #f3eef5;
}

.mya-staff-list .mvImgCls {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e8e4ec;
}

.mya-staff-list .mvDocNmCls {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.mya-staff-list .tempbackgroundColorCls,
.mya-staff-list a.tempbackgroundColorCls {
  background: linear-gradient(90deg, #5b1a62 0%, #1a1a7a 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.mya-panel-body {
  padding: 0.95rem 1.15rem 1.15rem;
}

.mya-queues {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: min(68vh, 44rem);
  overflow-y: auto;
  padding-right: 0.1rem;
}

.mya-queue-block {
  padding: 0.85rem 0.9rem 0.75rem;
  background: #faf8fb;
  border: 1px solid #eee7f2;
  border-radius: 0.75rem;
  border-left: 3px solid #5b1a62;
}

.mya-queue-engaged { border-left-color: #5b1a62; }
.mya-queue-waiting { border-left-color: #1a1a7a; }
.mya-queue-pending { border-left-color: #94a3b8; }
.mya-queue-complete { border-left-color: #059669; }
.mya-queue-cancel { border-left-color: #d0153f; }

.mya-queue-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.mya-queue-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.7;
}

.mya-queue-engaged .mya-queue-dot { color: #5b1a62; }
.mya-queue-waiting .mya-queue-dot { color: #1a1a7a; }
.mya-queue-pending .mya-queue-dot { color: #64748b; }
.mya-queue-complete .mya-queue-dot { color: #059669; }
.mya-queue-cancel .mya-queue-dot { color: #d0153f; }

.mya-queue-title {
  margin: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
}

.mya-queue-list .box1 {
  background: #fff;
  border: 1px solid #eee7f2;
  border-radius: 0.6rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.mya-queue-list .box-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
}

.mya-queue-list .paddingClass {
  padding: 0.15rem 0.25rem;
}

.mya-queue-list .pClass {
  margin: 0;
  font-size: 0.88rem;
  color: #374151;
}

.mya-queue-list .btn {
  margin: 0.15rem;
  border-radius: 0.45rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.mya-queue-list .btn-info {
  background: #1a1a7a;
  color: #fff;
}

.mya-queue-list .btn-warning {
  background: #d0153f;
  color: #fff;
}

.mya-empty {
  color: #6b7280;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.35rem 0 0.15rem;
}

.mya-no-records {
  padding: 0.5rem 0;
}

.mya-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2.25rem 1rem;
  background: #f8f5fa;
  border: 1px dashed #e8e4ec;
  border-radius: 0.85rem;
}

.mya-empty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.35rem;
  border-radius: 999px;
  background: #f3eef5;
  color: #5b1a62;
}

.mya-empty-icon {
  font-size: 1.25rem;
  color: #5b1a62;
  margin: 0;
}

.mya-empty-title {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
}

.mya-empty-hint {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.mya-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

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

.mya-modal-open-body {
  overflow: hidden;
}

.mya-modal.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.45);
  overflow-y: auto;
}

.mya-modal.mya-modal-open {
  display: flex !important;
}

.mya-modal-dialog {
  width: min(32rem, 100%);
  margin: auto;
}

.mya-modal-dialog-lg {
  width: min(48rem, 100%);
}

.mya-modal-content {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(91, 26, 98, 0.2);
  overflow: hidden;
}

.mya-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #e8e4ec;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
}

.mya-modal-header .modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.mya-modal-x {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.mya-modal-body {
  padding: 1.1rem;
}

.mya-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid #e8e4ec;
}

.mya-field-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.mya-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #43124a;
}

.mya-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.mya-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.mya-table th,
.mya-table td {
  padding: 0.55rem 0.6rem;
  border: 1px solid #e8e4ec;
  vertical-align: middle;
}

.mya-table thead th,
.mya-table tr:first-child th {
  background: #f8f5fa;
  color: #05053d;
  font-weight: 700;
}

.mya-empty-banner {
  margin-bottom: 0.75rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.mya-confirm-text {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.mya-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .mya-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 639px) {
  .mya-wrap {
    width: calc(100% - 1.5rem);
  }

  .mya-shell {
    padding-top: 1rem;
  }

  .mya-title {
    font-size: 1.35rem;
  }

  .mya-search {
    max-width: none;
  }

  .mya-panel-banner,
  .mya-panel-body {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .mya-queue-list .box-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .mya-queue-list .aCenter {
    text-align: left;
  }
}

/* ==========================================================================
   amc_master.jsp ? unique amm-* prefix (staff AMC Master)
   Theme aligned with company_list.jsp brand palette.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.amm-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.25rem 0 2rem;
  background: linear-gradient(135deg, #f8f5fa 0%, #ffffff 45%, #f3eef5 100%);
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.amm-wrap {
  width: min(80rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.amm-pagehead {
  margin-bottom: 1.25rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.amm-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b1a62;
}

.amm-title {
  margin: 0.15rem 0 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #05053d !important;
  text-align: left !important;
}

.amm-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
  max-width: 36rem;
}

.amm-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
}

.amm-panel-banner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  padding: 1rem 1.25rem;
}

.amm-panel-banner-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.amm-panel-banner-sub {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.amm-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem 1rem 1rem;
}

.amm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.amm-table thead th,
.amm-table .tableHeadClass th {
  background: #f8f5fa !important;
  color: #05053d !important;
  font-weight: 700 !important;
  padding: 0.7rem 0.75rem !important;
  border: 1px solid #e8e4ec !important;
  white-space: nowrap;
  vertical-align: middle;
}

.amm-table td {
  padding: 0.65rem 0.75rem !important;
  border: 1px solid #eee7f2 !important;
  color: #374151;
  vertical-align: middle;
}

.amm-table tbody tr:nth-child(even) td,
.amm-table tr:nth-child(even) td {
  background: #faf8fb;
}

.amm-table tbody tr:hover td,
.amm-table tr:hover td {
  background: rgba(248, 245, 250, 0.95);
}

.amm-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  padding: 3rem 1.25rem;
  color: #6b7280;
  font-weight: 500;
}

.amm-empty[style*="display: block"],
.amm-empty[style*="display:block"] {
  display: flex !important;
}

.amm-empty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background: #f3eef5;
  color: #5b1a62;
}

.amm-empty-icon {
  font-size: 1.25rem;
  color: #5b1a62;
  margin: 0;
}

.amm-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.amm-empty-hint {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.amm-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

@media (min-width: 640px) {
  .amm-title {
    font-size: 1.75rem !important;
  }

  .amm-panel-banner,
  .amm-table-wrap {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }
}

@media (max-width: 639px) {
  .amm-wrap {
    width: calc(100% - 1.5rem);
  }

  .amm-shell {
    padding-top: 1rem;
  }

  .amm-title {
    font-size: 1.35rem !important;
  }

  .amm-table thead th,
  .amm-table td {
    padding: 0.55rem 0.5rem !important;
    font-size: 0.8rem;
  }
}


/* ==========================================================================
   staff_expenses.jsp — unique sexp-* prefix (staff expenses)
   Theme aligned with company_list.jsp brand palette.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.sexp-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.25rem 0 2rem;
  background: linear-gradient(135deg, #f8f5fa 0%, #ffffff 45%, #f3eef5 100%);
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.sexp-wrap {
  width: min(80rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.sexp-pagehead {
  margin-bottom: 1.25rem;
}

.sexp-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b1a62;
}

.sexp-title {
  margin: 0.15rem 0 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
  text-align: left !important;
}

.sexp-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
  max-width: 36rem;
}

.sexp-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
}

.sexp-panel-banner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
}

@media (min-width: 768px) {
  .sexp-panel-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.sexp-panel-banner-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.sexp-panel-banner-sub {
  margin: 0.3rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.sexp-date-form {
  width: 100%;
  max-width: 14rem;
}

.sexp-panel-body {
  padding: 1rem 1.15rem 1.25rem;
}

.sexp-add-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
  min-height: 2.4rem;
}

.sexp-input,
.sexp-shell .form-control {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  color: #111827;
  background: #fff;
  box-sizing: border-box;
}

.sexp-panel-banner .sexp-input {
  border: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.sexp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.95rem;
  border: none;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.sexp-btn-success,
.sexp-shell .btn-success {
  background: linear-gradient(90deg, #5b1a62 0%, #1a1a7a 100%) !important;
  color: #fff !important;
}

.sexp-btn-danger,
.sexp-shell .btn-danger {
  background: #d0153f !important;
  color: #fff !important;
}

.sexp-shell .btn-primary {
  background: #1a1a7a !important;
  color: #fff !important;
}

.sexp-expense-list .box {
  background: #faf8fb;
  border: 1px solid #eee7f2;
  border-radius: 0.85rem;
  margin-bottom: 0.85rem;
  overflow: hidden;
}

.sexp-expense-list .box-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
}

.sexp-expense-list .paddingClas {
  padding: 0.15rem 0.25rem;
}

.sexp-expense-list .pClass {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  color: #374151;
}

.sexp-expense-list .labelClass {
  font-weight: 600;
  color: #43124a;
}

.sexp-expense-list .head_title {
  font-weight: 700;
  color: #05053d;
}

.sexp-expense-list .hrClass {
  width: 100%;
  border-top: 1px solid #e8e4ec;
  margin: 0.35rem 0;
}

.sexp-expense-list .btn {
  margin: 0.2rem 0.2rem 0.2rem 0;
  border-radius: 0.5rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.sexp-expense-list a {
  color: #5b1a62;
  font-weight: 600;
}

.sexp-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1rem;
  color: #6b7280;
}

.sexp-empty[style*="display: block"],
.sexp-empty[style*="display:block"] {
  display: flex !important;
}

.sexp-empty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background: #f3eef5;
  color: #5b1a62;
}

.sexp-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.sexp-empty-hint {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

.sexp-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

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

.sexp-modal-open-body {
  overflow: hidden;
}

.sexp-modal.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.45);
  overflow-y: auto;
}

.sexp-modal.sexp-modal-open {
  display: flex !important;
}

.sexp-modal-dialog {
  width: min(32rem, 100%);
  margin: auto;
}

.sexp-modal-content {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(91, 26, 98, 0.2);
  overflow: hidden;
}

.sexp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
}

.sexp-modal-header .modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.sexp-modal-x {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.sexp-modal-body {
  padding: 1.1rem;
}

.sexp-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

@media (min-width: 640px) {
  .sexp-field {
    flex-direction: row;
    align-items: flex-start;
  }

  .sexp-label {
    width: 42%;
    padding-top: 0.55rem;
  }

  .sexp-field-control {
    width: 58%;
  }
}

.sexp-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #43124a;
}

.sexp-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.5rem;
}

.sexp-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.sexp-file {
  max-width: 100%;
}

@media (min-width: 640px) {
  .sexp-title {
    font-size: 1.75rem !important;
  }
}

@media (max-width: 639px) {
  .sexp-wrap {
    width: calc(100% - 1.5rem);
  }

  .sexp-expense-list .box-header {
    flex-direction: column;
  }

  .sexp-date-form {
    max-width: none;
  }
}

/* ==========================================================================
   Report List page (report_list.jsp) � rpl-* prefix
   Theme aligned with company_list.jsp brand palette.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.rpl-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.25rem 0 2rem;
  background: linear-gradient(135deg, #f8f5fa 0%, #ffffff 45%, #f3eef5 100%);
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.rpl-wrap {
  width: min(56rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.rpl-pagehead {
  margin-bottom: 1.25rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.rpl-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b1a62;
}

.rpl-title {
  margin: 0.15rem 0 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #05053d !important;
  text-align: left !important;
}

.rpl-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
  max-width: 36rem;
}

.rpl-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
}

.rpl-panel-banner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  padding: 1rem 1.25rem;
}

.rpl-panel-banner-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.rpl-panel-banner-sub {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.rpl-panel-body {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.1rem 1.15rem 1.35rem !important;
  box-sizing: border-box;
}

.rpl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.rpl-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid #e8e4ec;
  border-radius: 0.85rem;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

.rpl-card:hover {
  border-color: #cbb8d4;
  box-shadow: 0 10px 28px rgba(91, 26, 98, 0.12);
  transform: translateY(-1px);
}

.rpl-card:focus {
  outline: 2px solid #5b1a62;
  outline-offset: 2px;
}

.rpl-card:active {
  transform: translateY(0);
}

.rpl-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: #f3eef5;
  color: #5b1a62;
  font-size: 1.15rem;
}

.rpl-card-invoice .rpl-card-icon {
  background: #ecfdf5;
  color: #047857;
}

.rpl-card-estimate .rpl-card-icon {
  background: #eff6ff;
  color: #1d4ed8;
}

.rpl-card-task .rpl-card-icon {
  background: #f0f9ff;
  color: #0369a1;
}

.rpl-card-attendance .rpl-card-icon {
  background: #fff7ed;
  color: #c2410c;
}

.rpl-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
  min-width: 0;
}

.rpl-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #05053d;
  line-height: 1.25;
}

.rpl-card-hint {
  font-size: 0.8rem;
  color: #6b7280;
  line-height: 1.35;
}

.rpl-card-arrow {
  flex-shrink: 0;
  color: #9ca3af;
  font-size: 0.85rem;
}

.rpl-card:hover .rpl-card-arrow {
  color: #5b1a62;
}

.rpl-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

@media (min-width: 640px) {
  .rpl-title {
    font-size: 1.75rem !important;
  }

  .rpl-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .rpl-panel-banner,
  .rpl-panel-body {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }
}

@media (max-width: 639px) {
  .rpl-wrap {
    width: calc(100% - 1.5rem);
  }

  .rpl-shell {
    padding-top: 1rem;
  }

  .rpl-title {
    font-size: 1.35rem !important;
  }

  .rpl-card {
    padding: 0.9rem 0.95rem;
  }
}

/* ==========================================================================
   Staff Invoice Report page (staff_invoice_report.jsp) — sir-* prefix v2
   Cleaner layout; brand colors #5b1a62 / #05053d / #f8f5fa kept.
   Appended redesign rules for sir-* only.
   ========================================================================== */

.sir-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.sir-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.sir-pagehead {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e8e0ee;
}

.sir-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.sir-customer-det {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: #5b1a62;
}

.sir-toolbar {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  border-left: 3px solid #5b1a62;
}

.sir-filter-form {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.sir-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.sir-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.sir-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b1a62;
}

.sir-input.form-control,
.sir-shell .sir-input {
  width: 100%;
  height: 2.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ddd5e3;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  box-shadow: none;
  box-sizing: border-box;
}

.sir-input.form-control:focus,
.sir-shell .sir-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.12);
}

.sir-list-section {
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  overflow: hidden;
}

.sir-invoice-list {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 !important;
  background: #fff;
}

.sir-invoice-list .box1 {
  margin: 0;
  border: 1px solid #ebe4f0;
  border-left: 3px solid #5b1a62;
  border-radius: 0.55rem;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sir-invoice-list .box1:hover {
  background: #faf7fb;
  border-color: #d4c4dc;
}

.sir-invoice-list .box-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  background: transparent;
  align-items: center;
}

.sir-invoice-list .paddingClass,
.sir-invoice-list .col-md-2,
.sir-invoice-list .col-md-3,
.sir-invoice-list .col-md-4,
.sir-invoice-list .col-md-12 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.sir-invoice-list .labelClass {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a4a82;
  margin-bottom: 0.15rem;
}

.sir-invoice-list .pClass {
  margin: 0.1rem 0;
  font-size: 0.9rem;
  color: #05053d;
  line-height: 1.35;
  font-weight: 500;
}

.sir-invoice-list .pClass .labelClass {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: 600;
  color: #6b7280;
  margin: 0;
}

.sir-invoice-list .head_title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-start;
}

.sir-invoice-list .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  box-shadow: none;
  transform: none;
}

.sir-invoice-list .btn:hover {
  transform: none;
  box-shadow: none;
}

.sir-invoice-list .btn-primary {
  background: #f3eef5;
  border-color: #d8c9df;
  color: #5b1a62;
}

.sir-invoice-list .btn-primary:hover {
  background: #5b1a62;
  border-color: #5b1a62;
  color: #fff;
}

.sir-invoice-list .btn-success {
  background: #05053d;
  border-color: #05053d;
  color: #fff;
}

.sir-invoice-list .btn-success:hover {
  background: #1a1a7a;
  border-color: #1a1a7a;
  color: #fff;
}

.sir-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 2.75rem 1.25rem;
  color: #6b7280;
  background: #fff;
}

.sir-empty[style*="display: block"],
.sir-empty[style*="display:block"],
.sir-empty[align="center"][style*="display: block"],
.sir-empty[align="center"][style*="display:block"] {
  display: flex !important;
}

.sir-empty-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
}

.sir-empty-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.sir-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

.sir-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.4);
  overflow-y: auto;
}

.sir-modal.sir-modal-open {
  display: flex !important;
}

body.sir-modal-open-body {
  overflow: hidden;
}

.sir-modal-dialog {
  width: min(30rem, 100%);
  margin: auto;
}

.sir-modal-content {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(5, 5, 61, 0.18);
  overflow: hidden;
  border: 1px solid #e5e0ea;
}

.sir-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #05053d;
}

.sir-modal-header .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-align: left !important;
}

.sir-modal-x {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 1;
}

.sir-modal-body {
  padding: 1rem;
  max-height: min(70vh, 28rem);
  overflow: auto;
}

.sir-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.sir-table thead th,
.sir-table .tableHeadClass th {
  background: #f8f5fa !important;
  color: #05053d !important;
  font-weight: 700 !important;
  padding: 0.65rem 0.7rem !important;
  border: 1px solid #ebe4f0 !important;
}

.sir-table td {
  padding: 0.6rem 0.7rem !important;
  border: 1px solid #f0ebf3 !important;
  color: #374151;
}

.sir-table tbody tr:nth-child(even) td {
  background: #faf8fb;
}

body > #ui-datepicker-div.sir-datepicker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10050 !important;
}

#ui-datepicker-div.sir-datepicker.ui-datepicker,
#ui-datepicker-div.sir-datepicker {
  width: 300px;
  background: #ffffff;
  border: 1px solid #e5e0ea;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(5, 5, 61, 0.16);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  max-width: calc(100vw - 1rem);
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 34px;
  line-height: 1.6;
  font-weight: 600;
  color: #05053d;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-title select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #f8f5fa;
  cursor: pointer;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-prev,
#ui-datepicker-div.sir-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3eef5;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.sir-datepicker .ui-datepicker-next { right: 0; }

#ui-datepicker-div.sir-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.sir-datepicker .ui-datepicker-next:hover {
  background: #ebe0f0;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.sir-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  margin-top: -5px;
  border: 5px solid transparent;
  text-indent: 0;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-prev span {
  border-right-color: #5b1a62;
  margin-left: -8px;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-next span {
  border-left-color: #5b1a62;
}

#ui-datepicker-div.sir-datepicker table {
  width: 100%;
  border-collapse: collapse;
}

#ui-datepicker-div.sir-datepicker th {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

#ui-datepicker-div.sir-datepicker td {
  padding: 2px;
}

#ui-datepicker-div.sir-datepicker td span,
#ui-datepicker-div.sir-datepicker td a {
  display: block;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  color: #1e293b;
}

#ui-datepicker-div.sir-datepicker td a:hover {
  background: #f3eef5;
  color: #5b1a62;
}

#ui-datepicker-div.sir-datepicker .ui-state-active,
#ui-datepicker-div.sir-datepicker .ui-state-highlight {
  background: #5b1a62 !important;
  color: #fff !important;
}

#ui-datepicker-div.sir-datepicker .ui-datepicker-today a {
  box-shadow: inset 0 0 0 1px #5b1a62;
}

@media (min-width: 720px) {
  .sir-title {
    font-size: 1.6rem !important;
  }

  .sir-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: end;
  }

  .sir-invoice-list .box-header {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
  }

  .sir-invoice-list .head_title {
    justify-content: flex-end;
  }
}

@media (max-width: 719px) {
  .sir-wrap {
    width: calc(100% - 1.25rem);
  }

  .sir-shell {
    padding-top: 1rem;
  }

  .sir-title {
    font-size: 1.3rem !important;
  }

  .sir-toolbar {
    padding: 0.75rem;
  }
}

/* ==========================================================================
   Staff Estimate Report page (staff_estimate_report.jsp) — ser-* prefix
   Matches cleaned staff_invoice_report layout; brand colors preserved.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.ser-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.ser-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.ser-pagehead {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e8e0ee;
}

.ser-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.ser-customer-det {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: #5b1a62;
}

.ser-toolbar {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  border-left: 3px solid #5b1a62;
}

.ser-filter-form {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.ser-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.ser-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.ser-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b1a62;
}

.ser-input.form-control,
.ser-shell .ser-input {
  width: 100%;
  height: 2.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ddd5e3;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  box-shadow: none;
  box-sizing: border-box;
}

.ser-input.form-control:focus,
.ser-shell .ser-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.12);
}

.ser-list-section {
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  overflow: hidden;
}

.ser-estimate-list {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 !important;
  background: #fff;
}

.ser-estimate-list .box1 {
  margin: 0;
  border: 1px solid #ebe4f0;
  border-left: 3px solid #5b1a62;
  border-radius: 0.55rem;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ser-estimate-list .box1:hover {
  background: #faf7fb;
  border-color: #d4c4dc;
}

.ser-estimate-list .box-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  background: transparent;
  align-items: center;
}

.ser-estimate-list .paddingClass,
.ser-estimate-list .col-md-2,
.ser-estimate-list .col-md-3,
.ser-estimate-list .col-md-4,
.ser-estimate-list .col-md-12 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.ser-estimate-list .labelClass {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a4a82;
  margin-bottom: 0.15rem;
}

.ser-estimate-list .pClass {
  margin: 0.1rem 0;
  font-size: 0.9rem;
  color: #05053d;
  line-height: 1.35;
  font-weight: 500;
}

.ser-estimate-list .pClass .labelClass {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: 600;
  color: #6b7280;
  margin: 0;
}

.ser-estimate-list .head_title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-start;
}

.ser-estimate-list .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  box-shadow: none;
  transform: none;
}

.ser-estimate-list .btn:hover {
  transform: none;
  box-shadow: none;
}

.ser-estimate-list .btn-primary {
  background: #f3eef5;
  border-color: #d8c9df;
  color: #5b1a62;
}

.ser-estimate-list .btn-primary:hover {
  background: #5b1a62;
  border-color: #5b1a62;
  color: #fff;
}

.ser-estimate-list .btn-success {
  background: #05053d;
  border-color: #05053d;
  color: #fff;
}

.ser-estimate-list .btn-success:hover {
  background: #1a1a7a;
  border-color: #1a1a7a;
  color: #fff;
}

.ser-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 2.75rem 1.25rem;
  color: #6b7280;
  background: #fff;
}

.ser-empty[style*="display: block"],
.ser-empty[style*="display:block"],
.ser-empty[align="center"][style*="display: block"],
.ser-empty[align="center"][style*="display:block"] {
  display: flex !important;
}

.ser-empty-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
}

.ser-empty-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.ser-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

.ser-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.4);
  overflow-y: auto;
}

.ser-modal.ser-modal-open {
  display: flex !important;
}

body.ser-modal-open-body {
  overflow: hidden;
}

.ser-modal-dialog {
  width: min(30rem, 100%);
  margin: auto;
}

.ser-modal-content {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(5, 5, 61, 0.18);
  overflow: hidden;
  border: 1px solid #e5e0ea;
}

.ser-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #05053d;
}

.ser-modal-header .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-align: left !important;
}

.ser-modal-x {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 1;
}

.ser-modal-body {
  padding: 1rem;
  max-height: min(70vh, 28rem);
  overflow: auto;
}

.ser-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ser-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.ser-table thead th,
.ser-table .tableHeadClass th {
  background: #f8f5fa !important;
  color: #05053d !important;
  font-weight: 700 !important;
  padding: 0.65rem 0.7rem !important;
  border: 1px solid #ebe4f0 !important;
}

.ser-table td {
  padding: 0.6rem 0.7rem !important;
  border: 1px solid #f0ebf3 !important;
  color: #374151;
}

.ser-table tbody tr:nth-child(even) td {
  background: #faf8fb;
}

body > #ui-datepicker-div.ser-datepicker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10050 !important;
}

#ui-datepicker-div.ser-datepicker.ui-datepicker,
#ui-datepicker-div.ser-datepicker {
  width: 300px;
  background: #ffffff;
  border: 1px solid #e5e0ea;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(5, 5, 61, 0.16);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  max-width: calc(100vw - 1rem);
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 34px;
  line-height: 1.6;
  font-weight: 600;
  color: #05053d;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-title select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #f8f5fa;
  cursor: pointer;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-prev,
#ui-datepicker-div.ser-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3eef5;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.ser-datepicker .ui-datepicker-next { right: 0; }

#ui-datepicker-div.ser-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.ser-datepicker .ui-datepicker-next:hover {
  background: #ebe0f0;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.ser-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  margin-top: -5px;
  border: 5px solid transparent;
  text-indent: 0;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-prev span {
  border-right-color: #5b1a62;
  margin-left: -8px;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-next span {
  border-left-color: #5b1a62;
}

#ui-datepicker-div.ser-datepicker table {
  width: 100%;
  border-collapse: collapse;
}

#ui-datepicker-div.ser-datepicker th {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

#ui-datepicker-div.ser-datepicker td {
  padding: 2px;
}

#ui-datepicker-div.ser-datepicker td span,
#ui-datepicker-div.ser-datepicker td a {
  display: block;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  color: #1e293b;
}

#ui-datepicker-div.ser-datepicker td a:hover {
  background: #f3eef5;
  color: #5b1a62;
}

#ui-datepicker-div.ser-datepicker .ui-state-active,
#ui-datepicker-div.ser-datepicker .ui-state-highlight {
  background: #5b1a62 !important;
  color: #fff !important;
}

#ui-datepicker-div.ser-datepicker .ui-datepicker-today a {
  box-shadow: inset 0 0 0 1px #5b1a62;
}

@media (min-width: 720px) {
  .ser-title {
    font-size: 1.6rem !important;
  }

  .ser-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    max-width: 32rem;
    align-items: end;
  }

  .ser-estimate-list .box-header {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
  }

  .ser-estimate-list .head_title {
    justify-content: flex-end;
  }
}

@media (max-width: 719px) {
  .ser-wrap {
    width: calc(100% - 1.25rem);
  }

  .ser-shell {
    padding-top: 1rem;
  }

  .ser-title {
    font-size: 1.3rem !important;
  }

  .ser-toolbar {
    padding: 0.75rem;
  }
}

/* ==========================================================================
   Staff Task Report page (staff_task_report.jsp) — str-* prefix
   Matches cleaned invoice/estimate report layout; brand colors preserved.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.str-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.str-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.str-pagehead {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e8e0ee;
}

.str-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.str-customer-det {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: #5b1a62;
}

.str-toolbar {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem 1rem;
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  border-left: 3px solid #5b1a62;
}

.str-filter-form {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.str-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.str-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.str-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b1a62;
}

.str-control {
  width: 100%;
}

.str-input.form-control,
.str-shell .str-input {
  width: 100%;
  height: 2.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ddd5e3;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  box-shadow: none;
  box-sizing: border-box;
}

.str-input.form-control:focus,
.str-shell .str-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.12);
}

.str-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0ebf3;
}

.str-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.str-check input {
  width: 1rem;
  height: 1rem;
  accent-color: #5b1a62;
}

.str-actions {
  margin-top: 1rem;
}

.str-btn-search.btn,
.str-btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 8rem;
  height: 2.4rem;
  padding: 0 1.1rem;
  border: none;
  border-radius: 0.5rem;
  background: #5b1a62;
  color: #fff !important;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.str-btn-search:hover {
  background: #05053d;
  color: #fff !important;
}

.str-list-section {
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  overflow: hidden;
}

.str-task-list {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 !important;
  background: #fff;
}

.str-task-list .box {
  margin: 0;
  border: 1px solid #ebe4f0;
  border-left: 3px solid #5b1a62;
  border-radius: 0.55rem;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
}

.str-task-list .box:hover {
  background: #faf7fb;
  border-color: #d4c4dc;
}

.str-task-list .box-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  background: transparent;
  align-items: start;
}

.str-task-list .paddingClass,
.str-task-list .col-md-2,
.str-task-list .col-md-3,
.str-task-list .col-md-4,
.str-task-list .col-md-12 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.str-task-list .labelClass {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a4a82;
  margin-bottom: 0.15rem;
}

.str-task-list .pClass {
  margin: 0.1rem 0;
  font-size: 0.9rem;
  color: #05053d;
  line-height: 1.35;
  font-weight: 500;
}

.str-task-list .pClass .labelClass {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: 600;
  color: #6b7280;
  margin: 0;
}

.str-task-list .head_title {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  color: #5b1a62;
}

.str-task-list .hrClass {
  display: none;
}

.str-task-list .str-task-title {
  grid-column: 1 / -1;
  padding-top: 0.35rem !important;
  margin-top: 0.15rem !important;
  border-top: 1px solid #f0ebf3;
  font-size: 0.95rem;
  font-weight: 600;
  color: #05053d;
}

.str-task-list .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.75rem;
  border: 1px solid #05053d;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.str-task-list .btn-success {
  background: #05053d;
  border-color: #05053d;
  color: #fff;
}

.str-task-list .btn-success:hover {
  background: #1a1a7a;
  border-color: #1a1a7a;
  color: #fff;
}

.str-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 2.75rem 1.25rem;
  color: #6b7280;
  background: #fff;
}

.str-empty[style*="display: block"],
.str-empty[style*="display:block"],
.str-empty[align="center"][style*="display: block"],
.str-empty[align="center"][style*="display:block"] {
  display: flex !important;
}

.str-empty-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
}

.str-empty-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.str-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

.str-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.4);
  overflow-y: auto;
}

.str-modal.str-modal-open {
  display: flex !important;
}

body.str-modal-open-body {
  overflow: hidden;
}

.str-modal-dialog {
  width: min(30rem, 100%);
  margin: auto;
}

.str-modal-content {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(5, 5, 61, 0.18);
  overflow: hidden;
  border: 1px solid #e5e0ea;
}

.str-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #05053d;
}

.str-modal-header .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-align: left !important;
}

.str-modal-x {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 1;
}

.str-modal-body {
  padding: 1rem;
  max-height: min(70vh, 28rem);
  overflow: auto;
}

.str-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.str-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.str-table thead th,
.str-table .tableHeadClass th {
  background: #f8f5fa !important;
  color: #05053d !important;
  font-weight: 700 !important;
  padding: 0.65rem 0.7rem !important;
  border: 1px solid #ebe4f0 !important;
}

.str-table td {
  padding: 0.6rem 0.7rem !important;
  border: 1px solid #f0ebf3 !important;
  color: #374151;
}

body > #ui-datepicker-div.str-datepicker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10050 !important;
}

#ui-datepicker-div.str-datepicker.ui-datepicker,
#ui-datepicker-div.str-datepicker {
  width: 300px;
  background: #ffffff;
  border: 1px solid #e5e0ea;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(5, 5, 61, 0.16);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  max-width: calc(100vw - 1rem);
}

#ui-datepicker-div.str-datepicker .ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

#ui-datepicker-div.str-datepicker .ui-datepicker-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 34px;
  line-height: 1.6;
  font-weight: 600;
  color: #05053d;
}

#ui-datepicker-div.str-datepicker .ui-datepicker-title select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #f8f5fa;
  cursor: pointer;
}

#ui-datepicker-div.str-datepicker .ui-datepicker-prev,
#ui-datepicker-div.str-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3eef5;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}

#ui-datepicker-div.str-datepicker .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.str-datepicker .ui-datepicker-next { right: 0; }

#ui-datepicker-div.str-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.str-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  margin-top: -5px;
  border: 5px solid transparent;
  text-indent: 0;
}

#ui-datepicker-div.str-datepicker .ui-datepicker-prev span {
  border-right-color: #5b1a62;
  margin-left: -8px;
}

#ui-datepicker-div.str-datepicker .ui-datepicker-next span {
  border-left-color: #5b1a62;
}

#ui-datepicker-div.str-datepicker table {
  width: 100%;
  border-collapse: collapse;
}

#ui-datepicker-div.str-datepicker th {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

#ui-datepicker-div.str-datepicker td {
  padding: 2px;
}

#ui-datepicker-div.str-datepicker td span,
#ui-datepicker-div.str-datepicker td a {
  display: block;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  color: #1e293b;
}

#ui-datepicker-div.str-datepicker td a:hover {
  background: #f3eef5;
  color: #5b1a62;
}

#ui-datepicker-div.str-datepicker .ui-state-active,
#ui-datepicker-div.str-datepicker .ui-state-highlight {
  background: #5b1a62 !important;
  color: #fff !important;
}

@media (min-width: 720px) {
  .str-title {
    font-size: 1.6rem !important;
  }

  .str-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
  }

  .str-task-list .box-header {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
    align-items: start;
  }

  .str-task-list .head_title {
    align-items: flex-end;
    text-align: right;
  }

  .str-task-list .str-task-title {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .str-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .str-wrap {
    width: calc(100% - 1.25rem);
  }

  .str-shell {
    padding-top: 1rem;
  }

  .str-title {
    font-size: 1.3rem !important;
  }

  .str-toolbar {
    padding: 0.75rem;
  }
}

/* ==========================================================================
   My Groups page (my_groups.jsp) — mgr-* prefix
   Clean card grid; brand colors #5b1a62 / #05053d / #f8f5fa.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.mgr-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.mgr-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.mgr-pagehead {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e8e0ee;
}

.mgr-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.mgr-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
}

.mgr-list-section {
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 0.85rem;
}

.mgr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

.mgr-grid .mgr-card,
.mgr-grid .teacBorders {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #ebe4f0;
  border-left: 3px solid #5b1a62;
  border-radius: 0.55rem;
  background: #fff;
  box-shadow: none;
  display: block;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mgr-grid .mgr-card:hover,
.mgr-grid .teacBorders:hover {
  background: #faf7fb;
  border-color: #d4c4dc;
}

.mgr-card-inner,
.mgr-grid .padClass {
  width: 100% !important;
  float: none !important;
  padding: 0.9rem 1rem !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.mgr-card-name,
.mgr-grid .textcolor {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 0 0.45rem !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: #05053d;
  line-height: 1.4;
  border: none !important;
}

.mgr-card-name b,
.mgr-card-desc b {
  color: #5b1a62;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
}

.mgr-card-desc,
.mgr-grid .blackCls {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.45;
  border: none !important;
}

.mgr-card-rule,
.mgr-grid .teacDots:last-child {
  display: none !important;
}

.mgr-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 2.75rem 1.25rem;
  color: #6b7280;
}

.mgr-empty[style*="display: block"],
.mgr-empty[style*="display:block"] {
  display: flex !important;
}

.mgr-empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #05053d;
}

.mgr-empty-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.mgr-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

@media (min-width: 640px) {
  .mgr-title {
    font-size: 1.6rem !important;
  }

  .mgr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mgr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .mgr-wrap {
    width: calc(100% - 1.25rem);
  }

  .mgr-shell {
    padding-top: 1rem;
  }

  .mgr-title {
    font-size: 1.3rem !important;
  }

  .mgr-list-section {
    padding: 0.65rem;
  }
}

/* ==========================================================================
   View Invoice page (view_invoice.jsp) — vin-* prefix
   Clean invoice document layout; brand colors preserved.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.vin-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.25rem 0 2rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.vin-wrap {
  width: min(64rem, calc(100% - 1.5rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.vin-pagehead {
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #e8e0ee;
}

.vin-title {
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
  text-align: left !important;
}

.vin-shell #container,
.vin-invoice-doc {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.35rem 1.5rem;
  box-sizing: border-box;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  box-shadow: 0 8px 28px rgba(91, 26, 98, 0.08);
}

.vin-shell #invoice-title-number #title {
  font-size: 1.45rem !important;
  font-weight: 700;
  text-align: center;
  display: block;
  margin: 0.35rem 0 0.75rem;
  letter-spacing: 0.06em;
  color: #05053d;
}

.vin-shell #companyHeader {
  font-size: 1.05rem;
  font-weight: 700;
  color: #05053d;
}

.vin-shell section {
  margin-bottom: 1rem;
}

.vin-shell #companyAddress,
.vin-shell #customerAddress {
  line-height: 1.45;
  font-size: 0.875rem;
}

.vin-shell #invoiceExclusivetblId,
.vin-shell #invoiceInclusivetblId {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  min-width: 640px;
}

.vin-shell #invoiceExclusivetblId th,
.vin-shell #invoiceExclusivetblId td,
.vin-shell #invoiceInclusivetblId th,
.vin-shell #invoiceInclusivetblId td {
  border: 1px solid #e8e4ec;
  padding: 0.45rem 0.55rem;
}

.vin-shell #invoiceExclusivetblId th,
.vin-shell #invoiceInclusivetblId th {
  background: #f8f5fa;
  font-weight: 700;
  text-align: center;
  color: #05053d;
}

.vin-shell #invoiceExclusivetblId td:nth-child(2),
.vin-shell #invoiceInclusivetblId td:nth-child(2) {
  text-align: left;
}

.vin-shell #invoiceExclusivetblId td,
.vin-shell #invoiceInclusivetblId td {
  text-align: center;
  color: #374151;
}

.vin-shell #sums table,
.vin-shell #sumsTableId {
  width: 100%;
  margin-top: 0.65rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.vin-shell #sums th,
.vin-shell #sumsTableId th {
  background: #f8f5fa;
  font-weight: 700;
  text-align: center;
  padding: 0.55rem;
  color: #05053d;
  border: 1px solid #e8e4ec;
}

.vin-shell #sums td,
.vin-shell #sumsTableId td {
  border: 1px solid #e8e4ec;
  padding: 0.55rem;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.vin-shell #priceInWords {
  font-style: italic;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  flex: 1 1 200px;
  min-width: 0;
  word-break: break-word;
  color: #5b1a62;
}

.vin-shell .vin-hr,
.vin-shell #hr {
  display: block;
  margin: 0.85rem 0;
  border: none;
  border-top: 1px solid #d8c9df;
  width: 100%;
}

.vin-shell #footerSection {
  text-align: center;
  font-size: 0.8125rem;
  margin-top: 1rem;
  color: #6b7280;
}

.vin-shell .invoice-img {
  width: 110px;
  height: auto;
}

.vin-shell .invoice-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.vin-shell .invoice-header-col {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.45;
}

.vin-shell .right-block {
  text-align: right;
}

.vin-shell .right-block div {
  margin-bottom: 0.3rem;
}

.vin-shell .invoice-memo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.vin-shell .invoice-company-header {
  flex: 1 1 200px;
  min-width: 0;
}

.vin-shell .invoice-status-wrap {
  flex: 0 0 auto;
  text-align: right;
}

.vin-shell .invoice-total-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.5rem;
  padding-bottom: 0.2rem;
  flex-wrap: wrap;
}

.vin-shell .invoice-total-label {
  font-weight: 600;
  margin: 0;
  text-align: right;
  flex: 1 1 auto;
  color: #4b5563;
}

.vin-shell .invoice-total-value {
  min-width: 80px;
  text-align: right;
  margin: 0;
  color: #05053d;
  font-weight: 600;
}

.vin-shell .invoice-grand-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.vin-shell .invoice-grand-total-amount {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.vin-shell .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vin-actions,
.vin-shell #btnsDivId {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
  max-width: 1000px;
  margin: 1rem auto 0;
  padding: 0.25rem 0 0.5rem;
  box-sizing: border-box;
}

.vin-btn.btn,
.vin-shell #btnsDivId .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: normal;
  min-height: 2.35rem;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.vin-shell #btnsDivId .btn-warning {
  background: #f3eef5;
  color: #5b1a62;
  border: 1px solid #d8c9df;
}

.vin-shell #btnsDivId .btn-warning:hover {
  background: #5b1a62;
  color: #fff;
}

.vin-shell #btnsDivId .btn-info {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.vin-shell #btnsDivId .btn-info:hover {
  background: #1d4ed8;
  color: #fff;
}

.vin-shell #btnsDivId .btn-success {
  background: #05053d;
  color: #fff;
}

.vin-shell #btnsDivId .btn-success:hover {
  background: #1a1a7a;
}

.vin-shell #btnsDivId .btn-primary {
  background: #5b1a62;
  color: #fff;
}

.vin-shell #btnsDivId .btn-primary:hover {
  background: #43124a;
}

.vin-empty,
.vin-shell #noRecFound {
  text-align: center;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 0.65rem;
  background: #fff;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

.vin-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

.vin-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.4);
  overflow-y: auto;
}

.vin-modal.vin-modal-open {
  display: flex !important;
}

body.vin-modal-open-body {
  overflow: hidden;
}

.vin-modal-dialog {
  width: min(34rem, 95%);
  margin: auto;
}

.vin-modal-content {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(5, 5, 61, 0.18);
  overflow: hidden;
  border: 1px solid #e5e0ea;
}

.vin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #05053d;
}

.vin-modal-header .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.vin-modal-x {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 1;
}

.vin-modal-body {
  padding: 1rem;
  max-height: min(70vh, 28rem);
  overflow: auto;
}

.vin-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0 0.25rem;
  border: none;
  background: transparent;
}

.vin-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.vin-pay-remaining {
  margin-bottom: 1rem;
  padding: 0.65rem 0.75rem;
  background: #f5f3f7;
  border: 1px solid #e5e0ea;
  border-radius: 0.5rem;
}

.vin-pay-remaining-value {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.vin-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b1a62;
}

.vin-input.form-control,
.vin-shell .vin-input {
  width: 100%;
  height: 2.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ddd5e3;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  box-shadow: none;
  box-sizing: border-box;
}

.vin-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.vin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.vin-table th {
  background: #f8f5fa !important;
  color: #05053d !important;
  font-weight: 700 !important;
  padding: 0.55rem !important;
  border: 1px solid #ebe4f0 !important;
}

.vin-table td {
  padding: 0.5rem !important;
  border: 1px solid #f0ebf3 !important;
  color: #374151;
}

@media print {
  .vin-pagehead,
  .vin-shell #btnsDivId,
  .vin-shell .printBtn,
  .vin-shell .editBillingAccessCls,
  .vin-shell .btn,
  .vin-modal,
  nav,
  header,
  .header,
  .modal {
    display: none !important;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .vin-shell {
    background: #fff !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .vin-shell #container,
  .vin-invoice-doc {
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
  }
}

@media (max-width: 1024px) {
  .vin-shell #container {
    padding: 1.1rem 1.15rem;
  }

  .vin-shell #invoiceInclusivetblId,
  .vin-shell #invoiceExclusivetblId {
    min-width: 580px;
  }

  .vin-shell .invoice-total-row,
  .vin-shell .invoice-grand-total-amount {
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .vin-wrap {
    width: calc(100% - 1rem);
  }

  .vin-shell #container {
    margin-top: 0;
    padding: 1rem 0.85rem;
    border-radius: 0.55rem;
  }

  .vin-shell #invoice-title-number #title {
    font-size: 1.15rem !important;
  }

  .vin-shell .invoice-header-row {
    flex-direction: column;
    gap: 0.85rem;
  }

  .vin-shell .invoice-header-col.right-block {
    text-align: left;
  }

  .vin-shell .invoice-status-wrap {
    text-align: left;
  }

  .vin-shell .invoice-img {
    width: 72px;
  }

  .vin-shell #invoiceInclusivetblId,
  .vin-shell #invoiceExclusivetblId {
    min-width: 520px;
  }

  .vin-shell .invoice-grand-total-row {
    flex-direction: column;
    align-items: stretch;
  }

  .vin-shell .invoice-grand-total-amount {
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
  }

  .vin-shell #btnsDivId .btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 140px;
  }
}

@media (max-width: 420px) {
  .vin-shell #container {
    padding: 0.75rem 0.65rem;
    border-radius: 0;
  }

  .vin-shell #invoice-title-number #title {
    font-size: 1.05rem !important;
  }

  .vin-shell .invoice-img {
    width: 56px;
  }

  .vin-shell #invoiceInclusivetblId,
  .vin-shell #invoiceExclusivetblId {
    min-width: 460px;
  }

  .vin-shell #btnsDivId .btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   My Visitors page (my_visitors.jsp) — mvs-* prefix
   Clean table layout; brand colors #5b1a62 / #05053d / #f8f5fa.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.mvs-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.mvs-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.mvs-panel.container,
.mvs-shell .container.mvs-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  border-left: 3px solid #5b1a62;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(91, 26, 98, 0.08);
}

.mvs-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid #f0ebf3;
  background: #fff;
}

.mvs-title {
  margin: 0 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.mvs-title h1,
.mvs-shell .headTitle h1 {
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

.mvs-lead {
  margin: 0.3rem 0 0;
  font-size: 0.825rem;
  color: #6b7280;
}

.mvs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.mvs-toolbar .pull-left,
.mvs-toolbar .pull-right {
  float: none !important;
}

.mvs-toolbar .marginBottom10px {
  margin-bottom: 0 !important;
}

.mvs-btn.btn,
.mvs-shell .mvs-toolbar .btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  background: #5b1a62 !important;
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.mvs-shell .mvs-toolbar .btn-success:hover {
  background: #05053d !important;
  color: #fff !important;
}

.mvs-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1rem 1rem;
}

.mvs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.mvs-table thead th,
.mvs-table .tableHeadClass th {
  background: #f8f5fa !important;
  color: #05053d !important;
  font-weight: 700 !important;
  padding: 0.65rem 0.7rem !important;
  border: 1px solid #ebe4f0 !important;
  white-space: nowrap;
  vertical-align: middle;
}

.mvs-table td {
  padding: 0.6rem 0.7rem !important;
  border: 1px solid #f0ebf3 !important;
  color: #374151;
  vertical-align: top;
}

.mvs-table tbody tr:nth-child(even) td {
  background: #faf8fb;
}

.mvs-table tbody tr:hover td {
  background: #f3eef5;
}

.mvs-empty.norecFount,
.mvs-empty {
  display: none;
  text-align: center;
  padding: 2rem 1.25rem;
  margin: 0 1rem 1rem;
  border-radius: 0.55rem;
  background: #faf8fb;
  border: 1px dashed #e5e0ea;
  color: #6b7280;
  font-weight: 600;
}

.mvs-empty[style*="display: block"],
.mvs-empty[style*="display:block"] {
  display: block !important;
}

.mvs-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

@media (min-width: 720px) {
  .mvs-title {
    font-size: 1.5rem !important;
  }

  .mvs-pagehead {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .mvs-table-wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 719px) {
  .mvs-wrap {
    width: calc(100% - 1.25rem);
  }

  .mvs-shell {
    padding-top: 1rem;
  }

  .mvs-pagehead {
    flex-direction: column;
  }

  .mvs-title {
    font-size: 1.25rem !important;
  }

  .mvs-table thead th,
  .mvs-table td {
    padding: 0.5rem 0.45rem !important;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Staff Profile photo modal (staff_profile.jsp) — spp-* prefix
   Brand colors #5b1a62 / #05053d / #f8f5fa. Does not alter existing rules.
   ========================================================================== */

.spp-modal.modal-tw {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.45);
  overflow-y: auto;
  box-sizing: border-box;
}

.spp-modal.modal-tw.flex:not(.hidden) {
  display: flex !important;
}

.spp-modal.hidden,
.spp-modal.modal-tw.hidden {
  display: none !important;
}

.spp-dialog {
  width: min(40rem, 100%);
  margin: auto;
}

.spp-panel {
  background: #fff;
  border-radius: 0.9rem;
  border: 1px solid #e5e0ea;
  box-shadow: 0 20px 50px rgba(5, 5, 61, 0.22);
  overflow: hidden;
}

.spp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1.15rem;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
}

.spp-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.spp-title.modal-title {
  margin: 0.15rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-align: left;
}

.spp-close {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.spp-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.spp-body {
  padding: 1.15rem 1.15rem 1.25rem !important;
  background: #f8f5fa;
}

.spp-form {
  margin: 0;
  width: 100%;
  float: none !important;
}

.spp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0 !important;
}

.spp-card {
  background: #fff;
  border: 1px solid #ebe4f0;
  border-radius: 0.75rem;
  padding: 1rem 1.05rem 1.05rem;
  box-sizing: border-box;
}

.spp-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.65rem;
  border-radius: 0.55rem;
  background: #f3eef5;
  color: #5b1a62;
  font-size: 1.1rem;
}

.spp-card-icon-cam {
  background: #eef2ff;
  color: #05053d;
}

.spp-label.control-label {
  display: block;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 0.55rem;
  text-align: left !important;
  font-size: 0.9rem;
  font-weight: 700;
  color: #05053d;
}

.spp-card-body.col-sm-6 {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
}

.spp-file-label {
  display: block;
  cursor: pointer;
}

.spp-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.spp-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px dashed #cbb8d4;
  background: #faf8fb;
  color: #5b1a62;
  font-size: 0.85rem;
  font-weight: 600;
}

.spp-file-label:hover .spp-file-btn {
  border-color: #5b1a62;
  background: #f3eef5;
}

.spp-file-name {
  margin: 0.55rem 0 0.35rem;
  font-size: 0.8rem;
  color: #6b7280;
  word-break: break-all;
}

.spp-file-name-set {
  color: #05053d;
  font-weight: 600;
}

.spp-hint.class_student_imagesize {
  margin: 0.15rem 0;
  font-size: 0.75rem;
  color: #7a4a82;
  line-height: 1.35;
}

.spp-cam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.spp-cam-stage {
  margin-top: 0.85rem;
}

.spp-cam-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

.spp-preview-col,
.spp-live-col {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

.spp-sublabel {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #5b1a62;
}

.spp-preview-box,
.spp-live-box {
  min-height: 8rem;
  border-radius: 0.55rem;
  border: 1px solid #ebe4f0;
  background: #faf8fb;
  overflow: hidden;
}

.spp-preview-box img,
.spp-live-box video,
.spp-live-box canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

.spp-snap a {
  display: inline-block;
  margin-top: 0.45rem;
  color: #5b1a62;
  font-weight: 600;
  font-size: 0.85rem;
}

.spp-footer {
  margin: 1rem 0 0 !important;
  padding-top: 0.85rem;
  border-top: 1px solid #ebe4f0;
}

.spp-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.spp-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.45rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.spp-btn-primary.btn-success {
  background: #5b1a62 !important;
  border-color: #5b1a62 !important;
  color: #fff !important;
}

.spp-btn-primary.btn-success:hover {
  background: #05053d !important;
  border-color: #05053d !important;
}

.spp-btn-danger.btn-danger {
  background: #fff !important;
  border-color: #e5e0ea !important;
  color: #6b7280 !important;
}

.spp-btn-danger.btn-danger:hover {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

.spp-btn-secondary.btn-info {
  background: #05053d !important;
  border-color: #05053d !important;
  color: #fff !important;
}

.spp-btn-ghost.btn-danger {
  background: #fff !important;
  border-color: #e5e0ea !important;
  color: #6b7280 !important;
}

@media (min-width: 720px) {
  .spp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .spp-cam-cols {
    grid-template-columns: 1fr 1fr;
  }

  .spp-body {
    padding: 1.25rem 1.35rem 1.35rem !important;
  }
}

@media (max-width: 719px) {
  .spp-dialog {
    width: min(100%, calc(100vw - 1rem));
  }

  .spp-footer-actions {
    justify-content: stretch;
  }

  .spp-footer-actions .spp-btn {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   advertisement_management.jsp — unique am- prefix (Meta/Facebook Ads module)
   Theme aligned with company_list.jsp brand tokens:
   brand-50 #f8f5fa, brand-100 #f3eef5, brand-500 #5b1a62, brand-600 #43124a,
   brand-700 #1a1a7a, brand-800 #05053d, accent #d0153f
   ========================================================================== */

.am-shell {
  width: 100%;
  min-height: 60vh;
  background: linear-gradient(135deg, #f8f5fa 0%, #ffffff 45%, #f3eef5 100%);
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

.am-wrap {
  width: min(76rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
}

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

/* ---- Page header ---- */
.am-pageheader {
  border-radius: 0.85rem;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  color: #fff;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
  padding: 1rem 1.25rem;
}

.am-pageheader-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
}

.am-pageheader-title {
  margin: 0.15rem 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.am-pageheader-sub {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Tabs ---- */
.am-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.4rem;
}

.am-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid transparent;
  background: #fff;
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.am-tab:hover {
  background: #f8f5fa;
}

.am-tab-active {
  background: #f3eef5;
  color: #5b1a62;
  border-color: #e4d4ea;
}

.am-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Cards ---- */
.am-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.08);
  overflow: hidden;
}

.am-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #f3eef5;
  flex-wrap: wrap;
}

.am-card-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.am-card-head-row {
  align-items: flex-start;
}

.am-card-body {
  padding: 1rem 1.1rem 1.15rem;
}

.am-card-body-flush {
  padding: 0;
}

.am-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

/* ---- Badges ---- */
.am-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.am-badge-connected {
  background: #d1fae5;
  color: #065f46;
}

.am-badge-notconnected {
  background: #f3f4f6;
  color: #4b5563;
}

.am-badge-expired {
  background: #fee2e2;
  color: #991b1b;
}

.am-badge-pending {
  background: #fef3c7;
  color: #92400e;
}

.am-badge-paused {
  background: #e5e7eb;
  color: #374151;
}

/* ---- Buttons ---- */
.am-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.am-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.am-btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
}

.am-btn-primary {
  background: linear-gradient(90deg, #5b1a62 0%, #1a1a7a 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(91, 26, 98, 0.2);
}

.am-btn-primary:hover {
  background: linear-gradient(90deg, #43124a 0%, #05053d 100%);
  opacity: 0.95;
}

.am-btn-secondary {
  background: #f8f5fa;
  color: #5b1a62;
  border-color: #e4d4ea;
}

.am-btn-secondary:hover {
  background: #f3eef5;
}

.am-btn-ghost {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.am-btn-ghost:hover {
  background: #f8f5fa;
}

.am-btn-danger-outline {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}

.am-btn-danger-outline:hover {
  background: #fef2f2;
}

.am-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: #5b1a62;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}

.am-link-btn:hover {
  color: #43124a;
  text-decoration: underline;
}

/* ---- Empty state ---- */
.am-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  text-align: center;
  color: #6b7280;
}

.am-empty i {
  font-size: 1.4rem;
  color: #5b1a62;
}

/* ---- Detail grid ---- */
.am-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.am-detail-grid dt {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

.am-detail-grid dd {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
}

/* ---- Modal ---- */
.am-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(5, 5, 61, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.am-modal {
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(91, 26, 98, 0.35);
}

.am-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  color: #fff;
}

.am-modal-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.am-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.am-modal-close:hover {
  color: #fff;
}

.am-modal-body {
  padding: 1.1rem;
  overflow-y: auto;
}

.am-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid #f3eef5;
}

/* ---- Form fields ---- */
.am-field {
  margin-bottom: 0.9rem;
}

.am-field label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
}

.am-required {
  color: #dc2626;
}

.am-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  color: #1f2937;
  box-sizing: border-box;
}

.am-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.2);
}

.am-input-sm {
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  width: auto;
}

.am-textarea {
  resize: vertical;
  min-height: 4.5rem;
  font-family: inherit;
}

.am-field-hint {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: #9ca3af;
}

.am-form-error {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #dc2626;
}

/* ---- Ads table ---- */
.am-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

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

.am-table {
  width: 100%;
  border-collapse: collapse;
}

.am-table thead th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7280;
  background: #f8f5fa;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.am-table td {
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: #1f2937;
  border-bottom: 1px solid #f3eef5;
  vertical-align: middle;
}

.am-table tbody tr:hover td {
  background: rgba(248, 245, 250, 0.7);
}

.am-col-actions {
  text-align: right;
  white-space: nowrap;
}

.am-report-row td {
  background: #f8f5fa;
  padding: 0.75rem 0.9rem 1rem 2.2rem;
}

.am-report-row-content {
  font-size: 0.8rem;
  color: #6b7280;
}

.am-report-empty {
  margin: 0;
  font-size: 0.8rem;
  color: #9ca3af;
}

.am-mini-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.am-mini-table thead th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
  background: #f3eef5;
  padding: 0.4rem 0.6rem;
}

.am-mini-table td {
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: #374151;
  border-top: 1px solid #f3eef5;
}

/* ---- Date range bar ---- */
.am-datebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.6rem 0.85rem;
}

.am-datebar-presets {
  display: flex;
  gap: 0.4rem;
}

.am-datebar-custom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #6b7280;
}

/* ---- Dashboard summary ---- */
.am-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

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

.am-summary-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.08);
}

.am-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  background: #f3eef5;
  color: #5b1a62;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.am-summary-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9ca3af;
}

.am-summary-value {
  margin: 0.1rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #05053d;
}

/* ---- Reports columns ---- */
.am-report-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .am-report-columns {
    grid-template-columns: 2fr 1fr;
  }
}

.am-chart-card .am-card-body {
  min-height: 16rem;
}

.am-best-ad-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #05053d;
}

.am-best-ad-platform {
  margin: 0.15rem 0 0.75rem;
  font-size: 0.78rem;
  color: #6b7280;
}

/* ---- Facebook Lead Forms tab (unique am-lead-* ; do not alter existing am-* rules) ---- */
.am-empty-compact {
  padding: 1.25rem 0.75rem;
}

.am-lead-forms-summary {
  margin-bottom: 1rem;
}

.am-lead-form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.am-lead-form-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 10rem;
  max-width: 16rem;
  padding: 0.65rem 0.8rem;
  background: #f8f5fa;
  border: 1px solid #e8dde9;
  border-radius: 0.5rem;
}

.am-lead-form-chip-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #05053d;
  word-break: break-word;
}

.am-lead-form-chip-meta {
  font-size: 0.72rem;
  color: #6b7280;
}

.am-lead-filters {
  align-items: flex-end;
  margin-bottom: 0.85rem;
}

.am-field-inline {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 12rem;
}

.am-field-inline label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

@media (max-width: 639px) {
  .am-pageheader-title {
    font-size: 1.1rem;
  }

  .am-card-head-row {
    flex-direction: column;
    align-items: stretch;
  }

  .am-filters {
    justify-content: flex-start;
  }

  .am-datebar {
    flex-direction: column;
    align-items: stretch;
  }

  .am-btn {
    width: auto;
  }
}

@media (max-width: 639px) {
  .am-lead-form-chip {
    max-width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  .am-field-inline {
    min-width: 0;
    width: 100%;
  }
}

/* ============================================================
   company_config.jsp — unique styles (ccfg- prefix)
   ============================================================ */

.ccfg-page {
  min-height: calc(100vh - 4rem);
  background: linear-gradient(160deg, #f8f5fa 0%, #ffffff 45%, #f3eef5 100%);
  padding: 1.25rem 1rem 2.5rem;
}

@media (min-width: 640px) {
  .ccfg-page { padding: 1.5rem 1.5rem 3rem; }
}

.ccfg-layout {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .ccfg-layout {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }
}

.ccfg-sidebar {
  background: #ffffff;
  border: 1px solid #e8e4ec;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(91, 26, 98, 0.08);
  padding: 1rem 0.75rem;
  position: sticky;
  top: 4.5rem;
}

.ccfg-sidebar-label {
  margin: 0 0.5rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b1a62;
}

.ccfg-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ccfg-nav > li > a.ccfg-nav-link,
.ccfg-nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: #374151;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.ccfg-nav > li > a.ccfg-nav-link:hover,
.ccfg-nav-link:hover {
  background: #f8f5fa;
  color: #5b1a62;
}

.ccfg-nav > li.active > a.ccfg-nav-link,
.admin-menu li.active > a.ccfg-nav-link {
  background: linear-gradient(135deg, #5b1a62, #1a1a7a);
  color: #ffffff;
}

.ccfg-main {
  min-width: 0;
}

.ccfg-panel { width: 100%; }

.ccfg-card {
  background: #ffffff;
  border: 1px solid #e8e4ec;
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(91, 26, 98, 0.1);
  overflow: hidden;
}

.ccfg-card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3eef5;
  background: linear-gradient(135deg, #05053d 0%, #1a1a7a 55%, #5b1a62 100%);
  color: #fff;
}

.ccfg-card-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ccfg-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ccfg-card-sub {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.82);
}

.ccfg-card-body {
  padding: 1.15rem 1.25rem 1.35rem;
}

.ccfg-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ccfg-dl-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #f3f4f6;
}

@media (min-width: 640px) {
  .ccfg-dl-row {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
}

.ccfg-dl-row:last-child { border-bottom: none; padding-bottom: 0; }

.ccfg-dl-row dt {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ccfg-dl-row dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 550;
  color: #111827;
  word-break: break-word;
}

.ccfg-status-msg {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #d0153f;
}

.ccfg-contact-line {
  padding: 0.2rem 0;
  line-height: 1.5;
  color: #1f2937;
}

.ccfg-actions {
  margin-top: 1rem;
}

.ccfg-link {
  color: #5b1a62;
  font-weight: 600;
  text-decoration: none;
}
.ccfg-link:hover { color: #d0153f; text-decoration: underline; }

.ccfg-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #eee8f2;
  border-radius: 0.75rem;
}

.ccfg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
}

.ccfg-table th,
.ccfg-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
  vertical-align: middle;
}

.ccfg-table thead th,
.ccfg-table tr:first-child th {
  background: #f8f5fa;
  color: #5b1a62;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #e8e4ec;
}

.ccfg-table tbody tr:hover td { background: #faf8fc; }
.ccfg-th-center,
.ccfg-table .ccfg-th-center,
.ccfg-table td[align="center"] { text-align: center; }

.ccfg-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: #6b7280;
}

.ccfg-empty .error,
#companyConfigRoot label.error,
#companyInformationUpdate label.error,
#formHolidayId label.error,
#formEditHolidayId label.error,
#weeklyHolidayFormId label.error,
#addMasterForm label.error,
#updateMasterForm label.error {
  color: #dc2626;
  font-size: 0.8rem;
  font-weight: 500;
  display: block;
  margin-top: 0.25rem;
}

#companyConfigRoot input.error,
#companyConfigRoot select.error,
#companyConfigRoot textarea.error {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
}

.ccfg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: 0.65rem;
  border: none;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.ccfg-btn:hover { filter: brightness(0.96); }
.ccfg-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(91, 26, 98, 0.22); }

.ccfg-btn-primary {
  background: linear-gradient(135deg, #5b1a62, #1a1a7a);
  color: #fff;
}
.ccfg-btn-success { background: #16a34a; color: #fff; }
.ccfg-btn-danger { background: #ef4444; color: #fff; }
.ccfg-btn-info { background: #0ea5e9; color: #fff; }
.ccfg-btn-muted {
  background: #fff;
  color: #5b1a62;
  border: 1px solid #e8e4ec;
}

.ccfg-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 15, 30, 0.5);
}
.ccfg-modal.flex { display: flex; }
.ccfg-modal.hidden { display: none; }

body.ccfg-modal-open { overflow: hidden; }

.ccfg-modal-panel {
  width: 100%;
  max-width: 32rem;
  max-height: min(90vh, 40rem);
  overflow: auto;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #e8e4ec;
  box-shadow: 0 24px 60px rgba(5, 5, 61, 0.28);
}

.ccfg-modal-sm { max-width: 24rem; }

.ccfg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, #5b1a62, #7c3aed);
  color: #fff;
}

.ccfg-modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.ccfg-modal-x {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.ccfg-modal-x:hover { color: #fff; }

.ccfg-modal-body { padding: 1.15rem; }

.ccfg-modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #f3f4f6;
}

.ccfg-form { display: flex; flex-direction: column; gap: 0.9rem; }

.ccfg-field { display: flex; flex-direction: column; gap: 0.35rem; }

.ccfg-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
}

.ccfg-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.875rem;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ccfg-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.18);
}

.ccfg-radio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.ccfg-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
}

.ccfg-confirm-msg {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.5;
}

.ccfg-error {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 1rem 1.15rem;
  border-radius: 0.75rem;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.9rem;
}

@media (max-width: 1023px) {
  .ccfg-sidebar {
    position: static;
  }
  .ccfg-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ccfg-nav > li {
    flex: 1 1 auto;
  }
  .ccfg-nav > li > a.ccfg-nav-link {
    justify-content: center;
    font-size: 0.8rem;
    padding: 0.55rem 0.6rem;
  }
}

/* ==== Hi5 Chat Box (hcb-*) — Tailwind migration companion styles ==== */
.hcb-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1rem 1rem;
}
.hcb-page {
  display: flex;
  height: calc(100vh - 5.5rem);
  min-height: 32rem;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 28px rgba(5, 5, 61, 0.1);
}
.hcb-sidebar {
  width: 21rem;
  min-width: 17rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e5e7eb;
  background: #fff;
}
.hcb-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #05053d 0%, #1a1a7a 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}
.hcb-sidebar-header i {
  color: #5eead4;
}
.hcb-new-wrap {
  padding: 0.9rem;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hcb-input,
.hcb-select,
.hcb-textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.875rem;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hcb-input:focus,
.hcb-select:focus,
.hcb-textarea:focus {
  outline: none;
  border-color: #02A8C0;
  box-shadow: 0 0 0 3px rgba(2, 168, 192, 0.18);
}
.hcb-btn-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: 0.65rem;
  background: #02A8C0;
  color: #fff;
  font-weight: 650;
  font-size: 0.875rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}
.hcb-btn-primary:hover { background: #028fa3; }
.hcb-btn-secondary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid #05053d;
  border-radius: 0.65rem;
  background: #fff;
  color: #05053d;
  font-weight: 650;
  font-size: 0.875rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
}
.hcb-btn-secondary:hover { background: #f3f4f8; }
.hcb-btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: none;
  border-radius: 0.75rem;
  background: #05053d;
  color: #fff;
  font-weight: 650;
  font-size: 0.875rem;
  padding: 0.75rem 1.1rem;
  min-width: 5.5rem;
  cursor: pointer;
}
.hcb-btn-send:hover { background: #12124f; }
.hcb-conversation-list {
  flex: 1;
  overflow-y: auto;
  background: #fff;
}
.hcb-empty {
  padding: 1.75rem 1.1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}
.hcb-empty i {
  display: block;
  font-size: 1.6rem;
  color: #02A8C0;
  opacity: 0.75;
  margin-bottom: 0.5rem;
}
.hcb-conversation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s ease;
}
.hcb-conversation-item:hover { background: #f8fafc; }
.hcb-conversation-item.is-active {
  background: #e8f7fa;
  border-left: 3px solid #02A8C0;
  padding-left: calc(0.9rem - 3px);
}
.hcb-avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #02A8C0, #1a1a7a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
  text-transform: uppercase;
}
.hcb-conversation-meta { flex: 1; min-width: 0; }
.hcb-conversation-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  color: #1f2937;
  font-size: 0.9rem;
}
.hcb-conversation-preview {
  margin-top: 0.15rem;
  color: #6b7280;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hcb-unread {
  background: #02A8C0;
  color: #fff;
  border-radius: 999px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hcb-group-badge {
  font-size: 0.65rem;
  background: #e8eefc;
  color: #334155;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.35rem;
  font-weight: 650;
}
.hcb-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 18% 18%, rgba(2, 168, 192, 0.07) 0, transparent 42%),
    radial-gradient(circle at 82% 0%, rgba(5, 5, 61, 0.05) 0, transparent 36%),
    #f4f7fb;
}
.hcb-message-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.hcb-thread-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.94);
}
.hcb-thread-header-text {
  font-weight: 700;
  color: #05053d;
  font-size: 0.95rem;
}
.hcb-thread-header-sub {
  font-size: 0.75rem;
  color: #6b7280;
}
.hcb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
}
.hcb-empty-thread {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}
.hcb-empty-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  max-width: 26rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(5, 5, 61, 0.06);
}
.hcb-empty-icon {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f7fa;
  color: #02A8C0;
  font-size: 1.7rem;
}
.hcb-empty-card h3 {
  margin: 0 0 0.45rem;
  color: #05053d;
  font-size: 1.15rem;
  font-weight: 700;
}
.hcb-empty-card p {
  margin: 0;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
}
.hcb-bubble-row {
  display: flex;
  margin-bottom: 0.75rem;
}
.hcb-bubble-row.is-mine { justify-content: flex-end; }
.hcb-bubble-row.is-theirs { justify-content: flex-start; }
.hcb-bubble { max-width: 68%; }
.hcb-bubble-body {
  padding: 0.65rem 0.9rem;
  border-radius: 0.9rem;
  background: #fff;
  border: 1px solid #e8edf3;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #1f2937;
  line-height: 1.4;
  font-size: 0.875rem;
}
.hcb-bubble-row.is-mine .hcb-bubble-body {
  background: linear-gradient(135deg, #02A8C0, #0396ab);
  border-color: transparent;
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.hcb-bubble-row.is-theirs .hcb-bubble-body {
  border-bottom-left-radius: 0.25rem;
}
.hcb-bubble-meta {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 0.2rem;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.hcb-bubble-row.is-mine .hcb-bubble-meta { justify-content: flex-end; }
.hcb-bubble-row.is-theirs .hcb-bubble-meta { justify-content: flex-start; }
.hcb-ticks {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  letter-spacing: -0.22em;
  margin-left: 0.05rem;
}
.hcb-ticks .fa { font-size: 0.68rem; }
.hcb-ticks.is-sent,
.hcb-ticks.is-delivered,
.hcb-ticks.is-sent .fa,
.hcb-ticks.is-delivered .fa { color: #94a3b8; }
/* WhatsApp-style blue ticks after the other staff has seen the message */
.hcb-ticks.is-read,
.hcb-ticks.is-read .fa { color: #53bdeb !important; }
.hcb-bubble-row.is-sending .hcb-bubble-body {
  opacity: 0.72;
}
.hcb-bubble-row.is-sending .hcb-ticks {
  opacity: 0.55;
}
.hcb-composer {
  border-top: 1px solid #e5e7eb;
  padding: 0.75rem 0.9rem;
  background: #fff;
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
}
.hcb-attach-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding-bottom: 0.35rem;
}
.hcb-attach-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  background: #f8fafc;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hcb-attach-btn:hover {
  background: #eef6f8;
  border-color: #b6dfe6;
  color: #027a8c;
}
.hcb-file-input {
  display: none !important;
}
.hcb-attach-image-link {
  display: block;
}
.hcb-attach-image {
  display: block;
  max-width: 220px;
  max-height: 220px;
  width: auto;
  height: auto;
  border-radius: 0.55rem;
  object-fit: cover;
}
.hcb-attach-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  word-break: break-word;
}
.hcb-attach-file:hover { text-decoration: underline; }
.hcb-attach-caption {
  margin-top: 0.4rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.hcb-bubble-row.is-mine .hcb-bubble-body:has(.hcb-attach-image),
.hcb-bubble-row.is-mine .hcb-bubble-body:has(.hcb-attach-file) {
  padding: 0.45rem;
}
.hcb-composer .hcb-textarea {
  flex: 1;
  resize: none;
  min-height: 3.4rem;
  height: 3.4rem;
}
.hcb-group-member-list {
  max-height: 14rem;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  padding: 0.5rem 0.65rem;
  background: #fafbfc;
}
.hcb-group-member-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.25rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
}
.hcb-group-member-item:last-child { border-bottom: none; }
@media (max-width: 900px) {
  .hcb-page {
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 5.5rem);
  }
  .hcb-sidebar {
    width: 100%;
    max-height: 42vh;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  .hcb-thread { min-height: 50vh; }
}

.hcb-message-panel.is-hidden { display: none !important; }
.hcb-empty-thread.is-hidden { display: none !important; }
.hcb-sender-label { margin-bottom: 0.15rem; }
.hcb-message-panel:not(.is-hidden) { display: flex; }


/* Chat info panel (WhatsApp-style details) */
.hcb-thread-header {
  cursor: pointer;
  position: relative;
}
.hcb-thread-header:hover {
  background: #f8fafc;
}
.hcb-thread-header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.hcb-thread-header-chevron {
  margin-left: auto;
  color: #94a3b8;
  font-size: 0.95rem;
}
.hcb-info-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(22rem, 100%);
  background: #fff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -8px 0 24px rgba(5, 5, 61, 0.08);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.hcb-info-panel.is-hidden { display: none !important; }
.hcb-thread { position: relative; }
.hcb-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, #05053d 0%, #1a1a7a 100%);
  color: #fff;
}
.hcb-info-header-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.hcb-info-close {
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.hcb-info-close:hover { background: rgba(255,255,255,0.25); }
.hcb-info-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1rem;
}
.hcb-info-hero {
  text-align: center;
  padding: 0.5rem 0 1.1rem;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 1rem;
}
.hcb-info-hero .hcb-avatar {
  width: 4.25rem;
  height: 4.25rem;
  font-size: 1.2rem;
  margin: 0 auto 0.75rem;
}
.hcb-info-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #05053d;
  margin: 0 0 0.25rem;
}
.hcb-info-sub {
  color: #6b7280;
  font-size: 0.8rem;
  margin: 0;
}
.hcb-info-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0 0 0.65rem;
}
.hcb-info-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f8fafc;
  font-size: 0.875rem;
}
.hcb-info-row-label { color: #6b7280; }
.hcb-info-row-value { color: #111827; font-weight: 600; text-align: right; }
.hcb-info-member {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f5f9;
}
.hcb-info-member-meta { flex: 1; min-width: 0; }
.hcb-info-member-name {
  font-weight: 650;
  color: #1f2937;
  font-size: 0.875rem;
}
.hcb-info-member-role {
  font-size: 0.75rem;
  color: #6b7280;
}
.hcb-info-admin-badge {
  font-size: 0.65rem;
  background: #e8f7fa;
  color: #028fa3;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  font-weight: 700;
}

.hcb-message-panel { position: relative; }

.hcb-info-section-spaced { margin-top: 1rem; }

/* ==========================================================================
   Product Profile (product_profile.jsp) — pp-* / #root_product_profile
   New rules only; do not alter existing selectors above.
   ========================================================================== */

#root_product_profile {
  margin-top: 0;
}

#root_product_profile .ho-modal-overlay,
body > .ho-modal-overlay {
  z-index: 10050;
}

#productProfileMainId .ho-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #4338ca;
}

#productProfileMainId .pp-panel.ho-card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(67, 56, 202, 0.06);
}

#productProfileMainId .ho-card-header {
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eef2ff;
}

/* ---- Sidebar (matches company_profile submenu-link behavior) ---- */
#root_product_profile #sidebar.ho-sidebar {
  background: #eef2ff;
}

#root_product_profile #productProfileNavId.ho-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_product_profile #productProfileNavId .submenu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

#root_product_profile #productProfileNavId .submenu-link:hover,
#root_product_profile #productProfileNavId .submenu-link.hover\:bg-indigo-100:hover {
  background: #e0e7ff;
}

#root_product_profile #productProfileNavId .submenu-link.font-medium.text-indigo-700.bg-indigo-100 {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
}

#root_product_profile #productProfileNavId .submenu-link i {
  color: #4f46e5;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

#root_product_profile #sidebar.is-collapsed #productProfileNavId .submenu-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* ---- Basic info ---- */
#productProfileMainId .pp-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#productProfileMainId .pp-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 0.15rem;
  border-bottom: 1px solid #f1f5f9;
}

@media (min-width: 640px) {
  #productProfileMainId .pp-info-row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  #productProfileMainId .pp-info-label {
    width: 28%;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  #productProfileMainId .pp-info-value {
    flex: 1;
    min-width: 0;
  }
}

#productProfileMainId .pp-info-label {
  font-weight: 600;
  color: #64748b;
  font-size: 0.875rem;
}

#productProfileMainId .pp-info-value {
  color: #0f172a;
  font-size: 0.95rem;
  word-break: break-word;
}

#productProfileMainId .pp-empty {
  text-align: center;
  padding: 1.5rem 1rem;
}

#productProfileMainId .pp-empty-text {
  color: #dc2626;
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
}

/* ---- Spec select ---- */
#productProfileMainId .pp-spec-select {
  margin-bottom: 1.25rem;
  max-width: 28rem;
  align-items: flex-start;
}

#productProfileMainId .pp-spec-select .ho-form-label {
  width: auto;
  margin-bottom: 0.4rem;
}

#productProfileMainId .pp-spec-select .ho-form-control-wrap,
#productProfileMainId #specId {
  max-width: 22rem;
  width: 100%;
}

#productProfileMainId #speciHead {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#productProfileMainId #speciHead .hideShow,
#productProfileMainId #speciHead > div {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.9rem 1rem !important;
  font-size: 0.95rem !important;
  color: #1f2937;
}

#productProfileMainId #speciHead .hideShow > div,
#productProfileMainId #speciHead > div > div {
  padding-left: 0 !important;
  margin-top: 0.55rem;
  padding: 0.55rem 0.75rem !important;
  background: #fff;
  border: 1px solid #eef2ff;
  border-radius: 0.55rem;
  color: #334155;
  font-weight: 500;
}

#productProfileMainId #speciHead .fa-pencil {
  margin-left: 0.45rem;
  color: #6366f1 !important;
}

/* ---- Shared buttons / forms / tables ---- */
#root_product_profile .btn,
#productProfileMainId .btn,
body > .ho-modal-overlay .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  line-height: 1.25;
  min-height: 2rem;
}

#root_product_profile .btn-primary,
#productProfileMainId .btn-primary,
body > .ho-modal-overlay .btn-primary {
  background: #4f46e5;
  color: #fff;
}

#root_product_profile .btn-success,
#productProfileMainId .btn-success,
body > .ho-modal-overlay .btn-success {
  background: #16a34a;
  color: #fff;
}

#root_product_profile .btn-danger,
#productProfileMainId .btn-danger,
body > .ho-modal-overlay .btn-danger {
  background: #dc2626;
  color: #fff;
}

#root_product_profile .btn-default,
#productProfileMainId .btn-default,
body > .ho-modal-overlay .btn-default {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

#root_product_profile .btn:disabled,
#productProfileMainId .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#root_product_profile .form-control,
#productProfileMainId .form-control,
body > .ho-modal-overlay .form-control {
  width: 100%;
  max-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  background: #fff;
  box-sizing: border-box;
}

#root_product_profile .form-control:focus,
#productProfileMainId .form-control:focus,
body > .ho-modal-overlay .form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

#productProfileMainId .ho-data-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

#productProfileMainId .ho-data-table-wrap > table,
#productProfileMainId table.ho-data-table,
#productProfileMainId table.table,
body > .ho-modal-overlay table.table,
body > .ho-modal-overlay table.ho-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
}

#productProfileMainId .ho-data-table th,
#productProfileMainId table.table th,
body > .ho-modal-overlay table.table th,
body > .ho-modal-overlay .ho-data-table th {
  background: linear-gradient(90deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  text-align: left;
  padding: 0.7rem 0.85rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#productProfileMainId .ho-data-table td,
#productProfileMainId table.table td,
body > .ho-modal-overlay table.table td,
body > .ho-modal-overlay .ho-data-table td {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid #eef2f7;
  vertical-align: middle;
  color: #374151;
}

#productProfileMainId .ho-data-table tbody tr:hover td,
#productProfileMainId table.table tbody tr:hover td {
  background: #f8fafc;
}

#productProfileMainId .aCenter,
body > .ho-modal-overlay .aCenter {
  text-align: center;
}

#productProfileMainId #speciFeatHead > div {
  font-size: 0.95rem !important;
  font-weight: 700;
  color: #4338ca;
  padding: 0.35rem 0 0.65rem !important;
}

#productProfileMainId #speciFeatHead table {
  margin-bottom: 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
}

#productProfileMainId .editIcon {
  margin-left: 0.45rem;
  color: #6366f1;
  cursor: pointer;
}

#productProfileMainId .editIcon:hover {
  color: #4338ca;
}

#productProfileMainId .hideBasicInfo,
#productProfileMainId .hideCategory {
  display: none;
}

#productProfileMainId .showBasicInfo,
#productProfileMainId .showCategory {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

#productProfileMainId .inpBorder {
  width: 100%;
  max-width: 12rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
}

#productProfileMainId .queckBtnCls {
  margin-left: 0.4rem;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
}

#productProfileMainId label.error,
body > .ho-modal-overlay label.error {
  color: #dc2626;
  font-size: 0.75rem;
  display: block;
  margin-top: 0.2rem;
}

#productProfileMainId input.error,
#productProfileMainId select.error,
#productProfileMainId textarea.error,
body > .ho-modal-overlay input.error,
body > .ho-modal-overlay select.error,
body > .ho-modal-overlay textarea.error {
  border-color: #f59e0b;
}

/* ---- Product price cards (office.js markup, CSS layout) ---- */
#productProfileMainId #productPriceDivId {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  padding: 1rem 1.1rem;
  width: 100% !important;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid #eef2ff;
  width: 100% !important;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:first-child > [class*="col-md-"] {
  width: auto !important;
  display: block !important;
  float: none !important;
}

#productProfileMainId #productPriceDivId [id^="specFieldValName_"] {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

#productProfileMainId #productPriceDivId [id^="prodCode_"] {
  font-size: 0.8rem;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
}

#productProfileMainId #productPriceDivId [id^="deletebutton_"] .btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.4rem;
  border-radius: 0.55rem;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12.padding:last-child,
#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  width: 100% !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  #productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child {
    grid-template-columns: 1fr;
  }
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child > [class*="col-md-"] {
  width: 100% !important;
  display: block !important;
  float: none !important;
  padding-top: 0 !important;
}

#productProfileMainId #productPriceDivId [id^="imgId_"] {
  padding-top: 0 !important;
  position: relative;
}

#productProfileMainId #productPriceDivId [id^="imgId_"] img,
#productProfileMainId #productPriceDivId .pp-price-thumb {
  width: 96px !important;
  height: 96px !important;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  display: block;
}

#productProfileMainId #productPriceDivId [id^="imgId_"] .fa-pencil {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  color: #4f46e5 !important;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child > .col-md-4 > .col-md-12 {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed #eef2f7;
  width: 100% !important;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child > .col-md-4 > .col-md-12 > span:first-child {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
  width: auto !important;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child > .col-md-4 > .col-md-12 > span:last-child {
  width: auto !important;
  color: #0f172a;
  font-weight: 600;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child > .col-md-5 {
  background: #f8fafc;
  border: 1px solid #eef2ff;
  border-radius: 0.75rem;
  padding: 0.75rem !important;
}

#productProfileMainId #productPriceDivId > [id^="showView_"] > .col-md-12:last-child > .col-md-5 > .col-md-12 {
  width: 100% !important;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---- Product photos gallery ---- */
#productProfileMainId #speciPhotoHead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: stretch;
}

#productProfileMainId #speciPhotoHead > .col-md-12 {
  flex: 0 0 100%;
  width: 100% !important;
  margin: 0.35rem 0 0;
  padding: 0 !important;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 700;
  color: #4338ca;
}

#productProfileMainId #speciPhotoHead > .borders.topPad,
#productProfileMainId #speciPhotoHead > [id^="showView"] {
  flex: 0 0 auto;
  width: 11.5rem !important;
  max-width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  padding: 0.75rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#productProfileMainId #speciPhotoHead > [id^="showView"] > .col-md-12 {
  display: flex !important;
  flex-direction: column;
  gap: 0.65rem;
  width: 100% !important;
  padding: 0 !important;
}

#productProfileMainId #speciPhotoHead > [id^="showView"] > .col-md-12 > .col-md-6 {
  width: 100% !important;
  display: block !important;
}

#productProfileMainId #speciPhotoHead img.imgClass,
#productProfileMainId #speciPhotoHead .pp-photo-thumb {
  width: 100% !important;
  height: 7.5rem !important;
  object-fit: cover;
  border-radius: 0.65rem;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  display: block;
}

#productProfileMainId #speciPhotoHead .btnClass {
  width: auto !important;
  flex: 1 1 0;
  display: flex !important;
  gap: 0.35rem;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

#productProfileMainId #speciPhotoHead .btnClass .btn {
  flex: 1;
  min-height: 2.1rem;
  padding: 0.35rem 0.4rem;
}

#productProfileMainId #speciPhotoHead > [id^="showView"] > .col-md-12 > .col-md-6:last-child {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.35rem;
  flex-wrap: wrap;
}

#productProfileMainId #speciPhotoHead .pp-photo-add-card > .col-md-12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  justify-content: center;
  gap: 0.65rem;
  min-height: 9rem;
  text-align: center;
}

#productProfileMainId #speciPhotoHead .pp-photo-add-card > .col-md-12 > .col-md-6 {
  width: 100% !important;
}

#productProfileMainId #speciPhotoHead .pp-photo-add-card > .col-md-12 > .col-md-6:first-child {
  font-weight: 600;
  color: #475569;
  padding: 1.1rem 0.5rem 0.2rem;
  background: #f8fafc;
  border: 1px dashed #c7d2fe;
  border-radius: 0.65rem;
}

#productProfileMainId #speciPhotoHead button:not(.btn) {
  color: #4f46e5;
  font-weight: 600;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 0.55rem;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  width: 100%;
}

#productProfileMainId #speciPhotoHead button:not(.btn):hover {
  background: #e0e7ff;
}

/* Generic col fallbacks (modals / leftover markup) */
#productProfileMainId [class*="col-md-"],
#productProfileMainId [class*="col-sm-"],
body > .ho-modal-overlay [class*="col-md-"],
body > .ho-modal-overlay [class*="col-sm-"] {
  box-sizing: border-box;
  min-width: 0;
}

#productProfileMainId .topPading { margin-top: 0; }
#productProfileMainId .topPadColor { color: #1f2937; }
#productProfileMainId .heading { font-weight: 600; }
#productProfileMainId .dots { word-break: break-word; }
#productProfileMainId .padding { padding: 0; }

/* ---- Bootbox / success alerts ---- */
.bootbox.modal,
.modal.pp-bootbox-open,
.bootbox.modal.pp-bootbox-open {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  padding: 1rem;
}

.bootbox.modal.in,
.bootbox.modal.show,
.bootbox.modal.pp-bootbox-open,
.modal.pp-bootbox-open {
  display: flex !important;
}

.bootbox .modal-dialog,
.pp-bootbox-open .modal-dialog {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
}

.bootbox .modal-content,
.pp-bootbox-open .modal-content {
  background: #fff;
  border: none;
  border-radius: 0.9rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.bootbox .modal-header,
.pp-bootbox-open .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #eef2ff;
  background: linear-gradient(90deg, #eef2ff, #fff);
}

.bootbox .modal-title,
.pp-bootbox-open .modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #312e81;
  margin: 0;
}

.bootbox .bootbox-close-button,
.bootbox .close,
.pp-bootbox-open .close {
  order: 2;
  margin: 0 0 0 auto;
  float: none;
  opacity: 1;
  font-size: 1.35rem;
  line-height: 1;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.bootbox .modal-body,
.pp-bootbox-open .modal-body {
  padding: 1.25rem 1.15rem;
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

.bootbox .modal-footer,
.pp-bootbox-open .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid #eef2ff;
  background: #f8fafc;
}

.bootbox .modal-footer .btn,
.pp-bootbox-open .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.55rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: #4f46e5;
  color: #fff;
}

.bootbox .modal-footer .btn:hover,
.pp-bootbox-open .modal-footer .btn:hover {
  background: #4338ca;
}

body.pp-modal-lock {
  overflow: hidden;
}

#root_product_profile .ui-datepicker {
  z-index: 11050 !important;
}

/* ============================================================
   Stock Profile (stock_profile.jsp) — stk-* prefix (new only)
   ============================================================ */
#root_stock_profile {
  min-height: 100vh;
}

#root_stock_profile .stk-sidebar.ho-sidebar {
  background: #eef2ff;
}

#root_stock_profile #stockProfileSubMenuId.ho-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_stock_profile #stockProfileSubMenuId .submenu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

#root_stock_profile #stockProfileSubMenuId .submenu-link:hover,
#root_stock_profile #stockProfileSubMenuId .submenu-link.hover\:bg-indigo-100:hover {
  background: #e0e7ff;
}

#root_stock_profile #stockProfileSubMenuId .submenu-link.font-medium.text-indigo-700.bg-indigo-100 {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
}

#root_stock_profile #stockProfileSubMenuId .submenu-link i {
  width: 1.25rem;
  text-align: center;
  color: #4f46e5;
}

#root_stock_profile #sidebar.is-collapsed #stockProfileSubMenuId .submenu-link {
  justify-content: center;
}

#stockProfileMainId .stk-panel.ho-card {
  margin-bottom: 0;
}

#stockProfileMainId .ho-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#stockProfileMainId .ho-card-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

#stockProfileMainId .ho-data-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

#stockProfileMainId .ho-data-table-wrap > table,
#stockProfileMainId table.ho-data-table,
#stockProfileMainId table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
}

#stockProfileMainId .ho-data-table th,
#stockProfileMainId table.table th {
  background: linear-gradient(90deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  text-align: left;
  padding: 0.7rem 0.85rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#stockProfileMainId .ho-data-table td,
#stockProfileMainId table.table td {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid #eef2f7;
  vertical-align: middle;
  color: #374151;
}

#stockProfileMainId .ho-data-table tbody tr:hover td,
#stockProfileMainId table.table tbody tr:hover td {
  background: #f8fafc;
}

#stockProfileMainId .aCenter {
  text-align: center;
}

#stockProfileMainId .stk-empty {
  text-align: center;
  padding: 2rem 1rem;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 0.75rem;
  margin-top: 0.5rem;
}

#stockProfileMainId .stk-empty-text {
  margin: 0;
  color: #dc2626;
  font-size: 0.95rem;
  font-weight: 600;
}

@media (max-width: 639px) {
  #stockProfileMainId .ho-data-table-wrap > table,
  #stockProfileMainId table.ho-data-table {
    min-width: 36rem;
    width: max-content;
  }

  #stockProfileMainId .stk-card-header-row {
    flex-direction: column;
    align-items: stretch;
  }

  #stockProfileMainId .stk-add-btn {
    width: 100%;
    justify-content: center;
  }

  #stockProfileMainId .stk-header-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* Header / actions / modals for company stock (new only) */
#stockProfileMainId .stk-card-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#stockProfileMainId .stk-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

#stockProfileMainId .stk-add-btn,
#stockProfileMainId .stk-edit-btn {
  white-space: nowrap;
}

#root_stock_profile .stk-modal.ho-modal-overlay {
  z-index: 1050;
}

#root_stock_profile .stk-modal .ho-form-row {
  margin-bottom: 0.85rem;
}

#root_stock_profile .stk-modal .ho-form-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

#root_stock_profile span.stk-field-error {
  display: block;
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

body.stk-modal-lock {
  overflow: hidden;
}

.modal.stk-bootbox-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(15, 23, 42, 0.45);
}

/* ============================================================
   Office Product (office_product.jsp) — ofp-* prefix (new only)
   ============================================================ */
#root_office_product {
  min-height: 100vh;
}

#root_office_product .ofp-sidebar.ho-sidebar {
  background: #eef2ff;
}

#root_office_product #officeProductSubMenuId.ho-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_office_product #officeProductSubMenuId .submenu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

#root_office_product #officeProductSubMenuId .submenu-link:hover,
#root_office_product #officeProductSubMenuId .submenu-link.hover\:bg-indigo-100:hover {
  background: #e0e7ff;
}

#root_office_product #officeProductSubMenuId .submenu-link.font-medium.text-indigo-700.bg-indigo-100 {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
}

#root_office_product #officeProductSubMenuId .submenu-link i {
  width: 1.25rem;
  text-align: center;
  color: #4f46e5;
}

#root_office_product #sidebar.is-collapsed #officeProductSubMenuId .submenu-link {
  justify-content: center;
}

#officeProductMainId .ofp-panel.ho-card {
  margin-bottom: 0;
}

#officeProductMainId .ofp-card-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#officeProductMainId .ho-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#officeProductMainId .ho-card-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

#officeProductMainId .ho-data-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

#officeProductMainId .ho-data-table-wrap > table,
#officeProductMainId table.ho-data-table,
#officeProductMainId table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
}

#officeProductMainId .ho-data-table th,
#officeProductMainId table.table th {
  background: linear-gradient(90deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  text-align: left;
  padding: 0.7rem 0.85rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#officeProductMainId .ho-data-table td,
#officeProductMainId table.table td {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid #eef2f7;
  vertical-align: middle;
  color: #374151;
}

#officeProductMainId .ho-data-table tbody tr:hover td,
#officeProductMainId table.table tbody tr:hover td {
  background: #f8fafc;
}

#officeProductMainId .aCenter {
  text-align: center;
}

#officeProductMainId .ofp-empty {
  text-align: center;
  padding: 2rem 1rem;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 0.75rem;
  margin-top: 0.5rem;
}

#officeProductMainId .ofp-empty-text {
  margin: 0;
  color: #dc2626;
  font-size: 0.95rem;
  font-weight: 600;
}

#officeProductMainId .ofp-add-btn,
#officeProductMainId .ofp-edit-btn {
  white-space: nowrap;
}

#root_office_product .ofp-modal.ho-modal-overlay {
  z-index: 1050;
}

#root_office_product .ofp-modal .ho-form-row {
  margin-bottom: 0.85rem;
}

#root_office_product .ofp-modal .ho-form-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

#root_office_product span.ofp-field-error {
  display: block;
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

body.ofp-modal-lock {
  overflow: hidden;
}

.modal.ofp-bootbox-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(15, 23, 42, 0.45);
}

@media (max-width: 639px) {
  #officeProductMainId .ho-data-table-wrap > table,
  #officeProductMainId table.ho-data-table {
    min-width: 40rem;
    width: max-content;
  }

  #officeProductMainId .ofp-card-header-row {
    flex-direction: column;
    align-items: stretch;
  }

  #officeProductMainId .ofp-add-btn {
    width: 100%;
    justify-content: center;
  }

  #officeProductMainId .ofp-header-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* Header action group for Office Stock / Refill (new only) */
#officeProductMainId .ofp-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ============================================================
   Supplier (supplier.jsp) — sup-* prefix (new only)
   ============================================================ */
#root_supplier {
  min-height: 100vh;
}

#root_supplier .sup-sidebar.ho-sidebar {
  background: #eef2ff;
}

#root_supplier #supplierSubMenuId.ho-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_supplier #supplierSubMenuId .submenu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

#root_supplier #supplierSubMenuId .submenu-link:hover,
#root_supplier #supplierSubMenuId .submenu-link.hover\:bg-indigo-100:hover {
  background: #e0e7ff;
}

#root_supplier #supplierSubMenuId .submenu-link.font-medium.text-indigo-700.bg-indigo-100 {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
}

#root_supplier #supplierSubMenuId .submenu-link i {
  width: 1.25rem;
  text-align: center;
  color: #4f46e5;
}

#root_supplier #sidebar.is-collapsed #supplierSubMenuId .submenu-link {
  justify-content: center;
}

#supplierMainId .sup-panel.ho-card {
  margin-bottom: 0;
  padding: 1.25rem 1.35rem 1.5rem;
}

#supplierMainId .sup-card-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#supplierMainId .ho-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2937;
}

#supplierMainId .ho-card-header {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #e5e7eb;
}

#supplierMainId .sup-table-wrap.ho-data-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#supplierMainId table.sup-data-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  background: #fff;
  table-layout: fixed;
}

#supplierMainId table.sup-data-table thead th {
  background: linear-gradient(90deg, #eef2ff, #e0e7ff);
  color: #3730a3;
  text-align: left;
  padding: 0.8rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-bottom: 1px solid #c7d2fe;
  vertical-align: middle;
}

#supplierMainId table.sup-data-table tbody td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
  color: #374151;
  line-height: 1.35;
  word-break: break-word;
}

#supplierMainId table.sup-data-table tbody tr.sup-table-row:nth-child(even) td {
  background: #f9fafb;
}

#supplierMainId table.sup-data-table tbody tr.sup-table-row:hover td {
  background: #f1f5f9;
}

#supplierMainId table.sup-data-table tbody tr.sup-table-row:last-child td {
  border-bottom: none;
}

#supplierMainId .sup-col-sno {
  width: 4.5rem;
  text-align: center;
  color: #6b7280;
  font-weight: 600;
}

#supplierMainId .sup-col-name {
  width: 12%;
}

#supplierMainId .sup-col-contact {
  width: 13%;
}

#supplierMainId .sup-col-mobile {
  width: 11%;
}

#supplierMainId .sup-col-email {
  width: 16%;
}

#supplierMainId .sup-col-gstin {
  width: 11%;
}

#supplierMainId .sup-col-address {
  width: 22%;
}

#supplierMainId .sup-col-action {
  width: 5.5rem;
  text-align: center;
}

#supplierMainId thead .sup-col-sno,
#supplierMainId thead .sup-col-action {
  text-align: center;
}

#supplierMainId .sup-cell-primary {
  font-weight: 600;
  color: #111827;
}

#supplierMainId .sup-cell-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: #4b5563;
}

#supplierMainId .sup-empty {
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  background: #f9fafb;
}

#supplierMainId .sup-empty-text {
  margin: 0;
  font-size: 0.95rem;
  color: #6b7280;
}

#supplierMainId .sup-add-btn,
#supplierMainId .sup-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

#supplierMainId .sup-action-btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
}

#root_supplier .sup-modal.ho-modal-overlay {
  z-index: 1050;
}

#root_supplier .sup-modal .ho-form-row {
  margin-bottom: 0.85rem;
}

#root_supplier .sup-modal .ho-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

#root_supplier .sup-textarea {
  min-height: 4.5rem;
  resize: vertical;
}

#root_supplier .sup-required {
  color: #dc2626;
}

#root_supplier span.sup-field-error {
  display: block;
  margin-top: 0.25rem;
  color: #dc2626;
  font-size: 0.8rem;
}

body.sup-modal-lock {
  overflow: hidden;
}

.modal.sup-bootbox-open {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(15, 23, 42, 0.45);
}

@media (max-width: 639px) {
  #supplierMainId .sup-table-wrap.ho-data-table-wrap > table,
  #supplierMainId table.sup-data-table {
    min-width: 52rem;
    width: max-content;
  }

  #supplierMainId .sup-card-header-row {
    flex-direction: column;
    align-items: stretch;
  }

  #supplierMainId .sup-add-btn {
    width: 100%;
    justify-content: center;
  }

  #supplierMainId .sup-panel.ho-card {
    padding: 1rem;
  }
}

/* ============================================================
   Supplier single-page layout — unique sup-sp-* classes (new only)
   ============================================================ */
#root_supplier.sup-sp-page {
  min-height: calc(100vh - 4rem);
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(99, 102, 241, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(14, 165, 233, 0.08), transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

#root_supplier .sup-sp-shell {
  width: 100%;
}

#root_supplier .sup-sp-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}

#root_supplier .sup-sp-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

#root_supplier .sup-sp-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6366f1;
}

#root_supplier .sup-sp-title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e1b4b;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#root_supplier .sup-sp-lead {
  margin: 0.4rem 0 0;
  max-width: 36rem;
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.45;
}

#root_supplier .sup-sp-add-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

#root_supplier .sup-sp-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(30, 27, 75, 0.06);
  overflow: hidden;
}

#root_supplier .sup-sp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

#root_supplier .sup-sp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

#root_supplier .sup-sp-tab:hover {
  background: #eef2ff;
  color: #4338ca;
}

#root_supplier .sup-sp-tab.is-active {
  background: #e0e7ff;
  border-color: #c7d2fe;
  color: #3730a3;
  font-weight: 600;
}

#root_supplier .sup-sp-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(67, 56, 202, 0.12);
  font-size: 0.75rem;
  font-weight: 600;
}

#root_supplier .sup-sp-tab.is-active .sup-sp-tab-count {
  background: #4338ca;
  color: #fff;
}

#root_supplier .sup-sp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#root_supplier table.sup-sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
}

#root_supplier table.sup-sp-table thead th {
  background: linear-gradient(90deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid #c7d2fe;
}

#root_supplier table.sup-sp-table tbody td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

#root_supplier table.sup-sp-table tbody tr.sup-sp-table-row:nth-child(even) td {
  background: #f8fafc;
}

#root_supplier table.sup-sp-table tbody tr.sup-sp-table-row:hover td {
  background: #eef2ff;
}

#root_supplier .sup-sp-col-sno {
  width: 3.5rem;
  text-align: center;
}

#root_supplier .sup-sp-col-action {
  width: 8.5rem;
  text-align: center;
  white-space: nowrap;
}

#root_supplier thead .sup-sp-col-sno,
#root_supplier thead .sup-sp-col-action {
  text-align: center;
}

#root_supplier .sup-sp-cell-primary {
  font-weight: 600;
  color: #1e1b4b;
}

#root_supplier .sup-sp-cell-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
}

#root_supplier .sup-sp-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

#root_supplier .sup-sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

#root_supplier .sup-sp-empty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #6366f1;
  font-size: 1.35rem;
}

#root_supplier .sup-sp-empty-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1e293b;
}

#root_supplier .sup-sp-empty-hint {
  margin: 0.4rem 0 0;
  max-width: 22rem;
  font-size: 0.9rem;
  color: #64748b;
}

@media (max-width: 767px) {
  #root_supplier .sup-sp-wrap {
    padding: 1rem 0.85rem 2rem;
  }

  #root_supplier .sup-sp-title {
    font-size: 1.4rem;
  }

  #root_supplier .sup-sp-pagehead {
    flex-direction: column;
    align-items: stretch;
  }

  #root_supplier .sup-sp-add-btn {
    width: 100%;
    justify-content: center;
  }

  #root_supplier table.sup-sp-table {
    min-width: 52rem;
  }
}

/* ============================================================
   Supplier survey-list theme — unique sup-sv-* classes (new only)
   Matches List of Survey table colors / layout
   ============================================================ */
#root_supplier.sup-sv-theme {
  background: #f3f4f6;
}

#root_supplier.sup-sv-theme .sup-sp-wrap {
  max-width: 74rem;
  padding: 1.25rem 1.25rem 2rem;
}

#root_supplier.sup-sv-theme .sup-sv-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e3a5f;
  letter-spacing: 0;
}

#root_supplier.sup-sv-theme .sup-sv-title .fa {
  color: #2563eb;
  font-size: 1.15rem;
}

#root_supplier.sup-sv-theme .sup-sv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

#root_supplier.sup-sv-theme .sup-sv-add-btn {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  border-radius: 0.45rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}

#root_supplier.sup-sv-theme .sup-sv-add-btn:hover {
  background: #15803d !important;
  border-color: #15803d !important;
}

#root_supplier.sup-sv-theme .sup-sv-panel {
  background: #fff;
  border: none;
  border-radius: 0.65rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

#root_supplier.sup-sv-theme .sup-sv-toolbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 1rem 0.65rem;
  gap: 0.4rem;
}

#root_supplier.sup-sv-theme .sup-sp-tab {
  border-radius: 0.4rem;
  color: #475569;
}

#root_supplier.sup-sv-theme .sup-sp-tab:hover {
  background: #ecfdf5;
  color: #047857;
}

#root_supplier.sup-sv-theme .sup-sp-tab.is-active {
  background: #d1fae5;
  border-color: #a7f3d0;
  color: #065f46;
}

#root_supplier.sup-sv-theme .sup-sp-tab-count {
  background: rgba(6, 95, 70, 0.12);
  color: #065f46;
}

#root_supplier.sup-sv-theme .sup-sp-tab.is-active .sup-sp-tab-count {
  background: #059669;
  color: #fff;
}

#root_supplier.sup-sv-theme .sup-sp-table-wrap {
  padding: 0 0.35rem 0.35rem;
  background: #fff;
}

#root_supplier.sup-sv-theme table.sup-sp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  background: #fff;
  border: none;
}

#root_supplier.sup-sv-theme table.sup-sp-table thead th {
  background: #d1fae5;
  color: #064e3b;
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  border: none;
  border-bottom: 1px solid #a7f3d0;
}

#root_supplier.sup-sv-theme table.sup-sp-table thead th:first-child {
  border-top-left-radius: 0.35rem;
}

#root_supplier.sup-sv-theme table.sup-sp-table thead th:last-child {
  border-top-right-radius: 0.35rem;
}

#root_supplier.sup-sv-theme table.sup-sp-table tbody td {
  padding: 1rem;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  color: #1e293b;
  background: #fff;
  vertical-align: middle;
}

#root_supplier.sup-sv-theme table.sup-sp-table tbody tr.sup-sp-table-row:nth-child(even) td {
  background: #fff;
}

#root_supplier.sup-sv-theme table.sup-sp-table tbody tr.sup-sp-table-row:hover td {
  background: #f8fafc;
}

#root_supplier.sup-sv-theme table.sup-sp-table tbody tr.sup-sp-table-row:last-child td {
  border-bottom: none;
}

#root_supplier.sup-sv-theme .sup-sp-col-sno {
  width: 4rem;
  text-align: center;
  color: #334155;
  font-weight: 600;
}

#root_supplier.sup-sv-theme thead .sup-sp-col-sno,
#root_supplier.sup-sv-theme thead .sup-sp-col-action {
  text-align: center;
}

#root_supplier.sup-sv-theme .sup-sp-col-action {
  width: 5.5rem;
  text-align: center;
}

#root_supplier.sup-sv-theme .sup-sp-cell-primary {
  font-weight: 600;
  color: #1e3a5f;
}

#root_supplier.sup-sv-theme .sup-sp-cell-mono {
  font-family: inherit;
  font-size: 0.9rem;
  color: #334155;
}

#root_supplier.sup-sv-theme .sup-sv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

#root_supplier.sup-sv-theme .sup-sv-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
  filter: brightness(1.05);
}

#root_supplier.sup-sv-theme .sup-sv-icon-btn-deactivate {
  background: #ef4444;
}

#root_supplier.sup-sv-theme .sup-sv-icon-btn-activate {
  background: #22c55e;
}

#root_supplier.sup-sv-theme .sup-sp-empty-icon-wrap {
  background: #d1fae5;
  color: #059669;
}

@media (max-width: 767px) {
  #root_supplier.sup-sv-theme .sup-sv-actions {
    width: 100%;
  }

  #root_supplier.sup-sv-theme .sup-sv-add-btn {
    width: 100%;
    justify-content: center;
  }

  #root_supplier.sup-sv-theme .sup-sp-table-wrap {
    padding: 0;
  }
}


/* ============================================================
   Supplier survey_list design — unique sup-sl-* (new only)
   Copied from collegeNew college-table / table-container pattern
   ============================================================ */
#root_supplier.sup-sl-page {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  background: #f9fafb;
  color: #1f2937;
  min-height: calc(100vh - 4rem);
}

#root_supplier .sup-sl-main {
 max-width: 72rem;
 margin: 0 auto;
 padding: 1.5rem;
}

#root_supplier .sup-sl-header-row {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: flex-start;
 margin-bottom: 1.5rem;
 gap: 0.75rem;
}

@media (min-width: 768px) {
 #root_supplier .sup-sl-header-row {
 flex-direction: row;
 align-items: center;
 }
}

#root_supplier .sup-sl-title {
 margin: 0;
 font-size: 1.5rem;
 font-weight: 700;
 color: #4338ca;
 display: flex;
 align-items: center;
 gap: 0.75rem;
}

#root_supplier .sup-sl-status-line {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin-top: 0.25rem;
}

#root_supplier .sup-sl-status-label {
 font-size: 0.875rem;
 color: #4b5563;
 font-weight: 500;
}

#root_supplier .sup-sl-status-value {
 font-size: 0.875rem;
 font-weight: 600;
 color: #4338ca;
}

#root_supplier .sup-sl-button-group {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

#root_supplier .sup-sl-btn {
 padding: 10px 14px;
 border-radius: 8px;
 border: none;
 color: #ffffff;
 cursor: pointer;
 transition: background-color 0.3s ease, transform 0.15s ease;
 font-size: 14px;
 font-weight: 500;
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
}

#root_supplier .sup-sl-btn:active {
 transform: scale(0.97);
}

#root_supplier .sup-sl-btn-process {
 background-color: #0284c7;
}

#root_supplier .sup-sl-btn-process:hover,
#root_supplier .sup-sl-btn-process.is-active {
 background-color: #0369a1;
}

#root_supplier .sup-sl-btn-success {
 background-color: #16a34a;
}

#root_supplier .sup-sl-btn-success:hover {
 background-color: #15803d;
}

#root_supplier .sup-sl-btn-muted {
 background-color: #94a3b8;
}

#root_supplier .sup-sl-btn-muted:hover {
 background-color: #64748b;
}

#root_supplier .sup-sl-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 1.35rem;
 height: 1.35rem;
 padding: 0 0.35rem;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.25);
 font-size: 0.75rem;
 font-weight: 700;
}

#root_supplier .sup-sl-table-container {
 overflow-x: auto;
 background-color: #ffffff;
 border-radius: 16px;
 border: 1px solid #f3f4f6;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
 padding: 1rem;
}

#root_supplier .sup-sl-college-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 14px;
}

#root_supplier .sup-sl-college-table,
#root_supplier .sup-sl-college-table th,
#root_supplier .sup-sl-college-table td {
 border: none;
}

#root_supplier .sup-sl-college-table thead {
 background-color: #d1fae5;
 color: #374151;
}

#root_supplier .sup-sl-college-table thead th {
 padding: 12px 16px;
 text-align: left;
 font-weight: 600;
 border-bottom: 1px solid #a7f3d0;
}

#root_supplier .sup-sl-college-table td {
 padding: 12px 16px;
 color: #1f2937;
}

#root_supplier .sup-sl-college-table tbody tr {
 border-bottom: 1px solid #e5e7eb;
 transition: background-color 0.3s ease;
}

#root_supplier .sup-sl-college-table tbody tr:last-child {
 border-bottom: none;
}

#root_supplier .sup-sl-college-table tbody tr:hover {
 background-color: #eff6ff;
}

#root_supplier .sup-sl-serial-no {
 font-weight: 600;
 color: #4f46e5;
}

#root_supplier .sup-sl-text-center {
 text-align: center !important;
}

#root_supplier .sup-sl-alink-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 7px 13px;
 font-size: 14px;
 color: #ffffff;
 border-radius: 10px;
 border: none;
 cursor: pointer;
 transition: opacity 0.3s ease;
}

#root_supplier .sup-sl-alink-btn:hover {
 opacity: 0.9;
}

#root_supplier .sup-sl-btn-delete {
 background-color: #dc2626;
}

#root_supplier .sup-sl-btn-delete:hover {
 background-color: #b91c1c;
}

#root_supplier .sup-sl-btn-activate {
 background-color: #16a34a;
}

#root_supplier .sup-sl-btn-activate:hover {
 background-color: #15803d;
}

#root_supplier .sup-sl-empty-alert {
 background: #fef3c7;
 border-left: 4px solid #eab308;
 color: #a16207;
 padding: 1rem;
 border-radius: 0.35rem;
}

#root_supplier .sup-sl-empty-alert p {
 margin: 0;
 font-size: 0.95rem;
}

@media (max-width: 767px) {
 #root_supplier .sup-sl-main {
 padding: 1rem;
 }

 #root_supplier .sup-sl-button-group {
 width: 100%;
 }

 #root_supplier .sup-sl-btn {
 flex: 1 1 auto;
 justify-content: center;
 }

 #root_supplier .sup-sl-college-table {
 min-width: 52rem;
 }
}

/* ============================================================
   Supplier Active/Inactive center toggle — unique sup-sl-filter-* (new only)
   ============================================================ */
#root_supplier .sup-sl-header-block {
  margin-bottom: 1.5rem;
}

#root_supplier .sup-sl-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

#root_supplier .sup-sl-header-left {
  justify-self: start;
}

#root_supplier .sup-sl-header-right {
  justify-self: end;
  display: flex;
  align-items: center;
}

#root_supplier .sup-sl-filter-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#root_supplier .sup-sl-filter-toggle {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

#root_supplier .sup-sl-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 7.5rem;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

#root_supplier .sup-sl-filter-btn i {
  font-size: 0.9rem;
}

#root_supplier .sup-sl-filter-btn:hover {
  color: #334155;
  background: #f8fafc;
}

#root_supplier .sup-sl-filter-btn.is-active {
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

#root_supplier #supFilterActiveBtn.is-active {
  background: linear-gradient(135deg, #16a34a, #059669);
}

#root_supplier #supFilterInactiveBtn.is-active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

#root_supplier .sup-sl-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 700;
}

#root_supplier .sup-sl-filter-btn.is-active .sup-sl-filter-count {
  background: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

@media (max-width: 767px) {
  #root_supplier .sup-sl-header-row {
    flex-direction: column;
    align-items: stretch;
  }

  #root_supplier .sup-sl-header-left,
  #root_supplier .sup-sl-header-right {
    width: 100%;
  }

  #root_supplier .sup-sl-filter-toggle {
    width: 100%;
  }

  #root_supplier .sup-sl-filter-btn {
    flex: 1;
    min-width: 0;
  }

  #root_supplier .sup-sl-header-right .sup-sl-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   Office Details tables — reuse supplier.jsp sup-sl-* design
   Scoped to #root_office_details only (new rules, no edits above)
   ============================================================ */
#root_office_details .sup-sl-table-container {
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin-bottom: 1rem;
}

#root_office_details table.sup-sl-college-table,
#root_office_details table.ho-data-table,
#root_office_details table.od-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_office_details table.sup-sl-college-table,
#root_office_details table.sup-sl-college-table th,
#root_office_details table.sup-sl-college-table td,
#root_office_details table.ho-data-table,
#root_office_details table.ho-data-table th,
#root_office_details table.ho-data-table td,
#root_office_details table.od-table,
#root_office_details table.od-table th,
#root_office_details table.od-table td {
  border: none;
}

#root_office_details table.sup-sl-college-table thead,
#root_office_details table.ho-data-table thead,
#root_office_details table.od-table thead,
#root_office_details tr.od-table-head {
  background-color: #d1fae5;
  color: #374151;
}

#root_office_details table.sup-sl-college-table thead th,
#root_office_details table.ho-data-table thead th,
#root_office_details table.od-table thead th,
#root_office_details tr.od-table-head th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #a7f3d0;
  background-color: #d1fae5;
  color: #374151;
}

#root_office_details table.sup-sl-college-table td,
#root_office_details table.ho-data-table td,
#root_office_details table.od-table td {
  padding: 12px 16px;
  color: #1f2937;
  vertical-align: middle;
}

#root_office_details table.sup-sl-college-table tbody tr,
#root_office_details table.ho-data-table tbody tr,
#root_office_details table.od-table tbody tr,
#root_office_details table.sup-sl-college-table > tr:not(.od-table-head),
#root_office_details table.ho-data-table > tr:not(.od-table-head),
#root_office_details table.od-table > tr:not(.od-table-head) {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.3s ease;
}

#root_office_details table.sup-sl-college-table tbody tr:last-child,
#root_office_details table.ho-data-table tbody tr:last-child,
#root_office_details table.od-table tbody tr:last-child {
  border-bottom: none;
}

#root_office_details table.sup-sl-college-table tbody tr:hover,
#root_office_details table.ho-data-table tbody tr:hover,
#root_office_details table.od-table tbody tr:hover,
#root_office_details table.sup-sl-college-table > tr:not(.od-table-head):hover,
#root_office_details table.ho-data-table > tr:not(.od-table-head):hover,
#root_office_details table.od-table > tr:not(.od-table-head):hover {
  background-color: #eff6ff;
}

#root_office_details .sup-sl-serial-no,
#root_office_details .tableLeftContent,
#root_office_details td.sup-sl-serial-no {
  font-weight: 600;
  color: #4f46e5;
}

#root_office_details .sup-sl-text-center,
#root_office_details .od-text-center,
#root_office_details .aCenter,
#root_office_details td[align="center"],
#root_office_details th.od-text-center {
  text-align: center !important;
}

#root_office_details .sup-sl-alink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  gap: 0.35rem;
}

#root_office_details .sup-sl-alink-btn:hover {
  opacity: 0.9;
}

#root_office_details .sup-sl-btn-delete,
#root_office_details table.sup-sl-college-table .ho-btn-danger,
#root_office_details table.ho-data-table .ho-btn-danger,
#root_office_details table.od-table .ho-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background-color: #dc2626;
  gap: 0.35rem;
}

#root_office_details .sup-sl-btn-delete:hover,
#root_office_details table.sup-sl-college-table .ho-btn-danger:hover,
#root_office_details table.ho-data-table .ho-btn-danger:hover,
#root_office_details table.od-table .ho-btn-danger:hover {
  background-color: #b91c1c;
  opacity: 0.9;
}

#root_office_details .sup-sl-btn-activate,
#root_office_details table.sup-sl-college-table .ho-btn-success,
#root_office_details table.ho-data-table .ho-btn-success,
#root_office_details table.od-table .ho-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background-color: #16a34a;
  gap: 0.35rem;
}

#root_office_details .sup-sl-btn-activate:hover,
#root_office_details table.sup-sl-college-table .ho-btn-success:hover,
#root_office_details table.ho-data-table .ho-btn-success:hover,
#root_office_details table.od-table .ho-btn-success:hover {
  background-color: #15803d;
  opacity: 0.9;
}

#root_office_details table.sup-sl-college-table .ho-btn-primary,
#root_office_details table.ho-data-table .ho-btn-primary,
#root_office_details table.od-table .ho-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background-color: #0284c7;
  gap: 0.35rem;
}

#root_office_details table.sup-sl-college-table .ho-btn-primary:hover,
#root_office_details table.ho-data-table .ho-btn-primary:hover,
#root_office_details table.od-table .ho-btn-primary:hover {
  background-color: #0369a1;
  opacity: 0.9;
}

#root_office_details .sup-sl-empty-alert {
  background: #fef3c7;
  border-left: 4px solid #eab308;
  color: #a16207;
  padding: 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1rem;
}

#root_office_details .sup-sl-empty-alert p {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  #root_office_details .sup-sl-table-container table.sup-sl-college-table,
  #root_office_details .sup-sl-table-container table.ho-data-table,
  #root_office_details .sup-sl-table-container table.od-table {
    min-width: 52rem;
  }
}


/* ============================================================
   Stock Profile tables — reuse supplier.jsp sup-sl-* design
   Scoped to #root_stock_profile only (new rules, no edits above)
   ============================================================ */
#root_stock_profile .sup-sl-table-container {
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin-bottom: 0.5rem;
}

#root_stock_profile table.sup-sl-college-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_stock_profile table.sup-sl-college-table,
#root_stock_profile table.sup-sl-college-table th,
#root_stock_profile table.sup-sl-college-table td {
  border: none;
}

#root_stock_profile table.sup-sl-college-table thead {
  background-color: #d1fae5;
  color: #374151;
}

#root_stock_profile table.sup-sl-college-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #a7f3d0;
  background-color: #d1fae5;
  color: #374151;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  white-space: nowrap;
}

#root_stock_profile table.sup-sl-college-table td {
  padding: 12px 16px;
  color: #1f2937;
  vertical-align: middle;
}

#root_stock_profile table.sup-sl-college-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.3s ease;
}

#root_stock_profile table.sup-sl-college-table tbody tr:last-child {
  border-bottom: none;
}

#root_stock_profile table.sup-sl-college-table tbody tr:hover {
  background-color: #eff6ff;
}

#root_stock_profile .sup-sl-serial-no {
  font-weight: 600;
  color: #4f46e5;
}

#root_stock_profile .sup-sl-text-center {
  text-align: center !important;
}

#root_stock_profile .sup-sl-alink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  gap: 0.35rem;
}

#root_stock_profile .sup-sl-alink-btn:hover {
  opacity: 0.9;
}

#root_stock_profile .stk-sl-btn-edit {
  background-color: #0284c7;
}

#root_stock_profile .stk-sl-btn-edit:hover {
  background-color: #0369a1;
}

#root_stock_profile .sup-sl-empty-alert {
  background: #fef3c7;
  border-left: 4px solid #eab308;
  color: #a16207;
  padding: 1rem;
  border-radius: 0.35rem;
  margin-top: 0.5rem;
}

#root_stock_profile .sup-sl-empty-alert p {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  #root_stock_profile .sup-sl-table-container table.sup-sl-college-table {
    min-width: 52rem;
  }
}


/* ============================================================
   Company Profile tables — reuse supplier.jsp sup-sl-* design
   Scoped to #root_company / #surveyProDatas (new rules only)
   ============================================================ */
#root_company .sup-sl-table-container,
#surveyProDatas .sup-sl-table-container {
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin-bottom: 1rem;
}

#root_company table.sup-sl-college-table,
#surveyProDatas table.sup-sl-college-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_company table.sup-sl-college-table,
#root_company table.sup-sl-college-table th,
#root_company table.sup-sl-college-table td,
#surveyProDatas table.sup-sl-college-table,
#surveyProDatas table.sup-sl-college-table th,
#surveyProDatas table.sup-sl-college-table td {
  border: none;
}

#root_company table.sup-sl-college-table thead,
#surveyProDatas table.sup-sl-college-table thead {
  background-color: #d1fae5;
  color: #374151;
}

#root_company table.sup-sl-college-table thead th,
#surveyProDatas table.sup-sl-college-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #a7f3d0;
  background-color: #d1fae5;
  color: #374151;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  white-space: nowrap;
}

#root_company table.sup-sl-college-table td,
#surveyProDatas table.sup-sl-college-table td {
  padding: 12px 16px;
  color: #1f2937;
  vertical-align: middle;
}

#root_company table.sup-sl-college-table tbody tr,
#surveyProDatas table.sup-sl-college-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.3s ease;
}

#root_company table.sup-sl-college-table tbody tr:last-child,
#surveyProDatas table.sup-sl-college-table tbody tr:last-child {
  border-bottom: none;
}

#root_company table.sup-sl-college-table tbody tr:hover,
#surveyProDatas table.sup-sl-college-table tbody tr:hover {
  background-color: #eff6ff;
}

#root_company .sup-sl-serial-no,
#surveyProDatas .sup-sl-serial-no {
  font-weight: 600;
  color: #4f46e5;
}

#root_company .sup-sl-text-center,
#surveyProDatas .sup-sl-text-center {
  text-align: center !important;
}

#root_company .sup-sl-alink-btn,
#surveyProDatas .sup-sl-alink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  gap: 0.35rem;
}

#root_company .sup-sl-alink-btn:hover,
#surveyProDatas .sup-sl-alink-btn:hover {
  opacity: 0.9;
}

#root_company .sup-sl-btn-delete,
#surveyProDatas .sup-sl-btn-delete {
  background-color: #dc2626;
}

#root_company .sup-sl-btn-delete:hover,
#surveyProDatas .sup-sl-btn-delete:hover {
  background-color: #b91c1c;
}

#root_company .sup-sl-btn-activate,
#surveyProDatas .sup-sl-btn-activate {
  background-color: #16a34a;
}

#root_company .sup-sl-btn-activate:hover,
#surveyProDatas .sup-sl-btn-activate:hover {
  background-color: #15803d;
}

#root_company .cp-sl-btn-view,
#surveyProDatas .cp-sl-btn-view {
  background-color: #0284c7;
}

#root_company .cp-sl-btn-view:hover,
#surveyProDatas .cp-sl-btn-view:hover {
  background-color: #0369a1;
}

#root_company .sup-sl-empty-alert,
#surveyProDatas .sup-sl-empty-alert {
  background: #fef3c7;
  border-left: 4px solid #eab308;
  color: #a16207;
  padding: 1rem;
  border-radius: 0.35rem;
  margin-bottom: 1rem;
}

#root_company .sup-sl-empty-alert p,
#surveyProDatas .sup-sl-empty-alert p {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  #root_company .sup-sl-table-container table.sup-sl-college-table,
  #surveyProDatas .sup-sl-table-container table.sup-sl-college-table {
    min-width: 52rem;
  }
}


/* ============================================================
   Office Product tables — reuse supplier.jsp sup-sl-* design
   Scoped to #root_office_product only (new rules, no edits above)
   ============================================================ */
#root_office_product .sup-sl-table-container {
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  margin-bottom: 0.5rem;
}

#root_office_product table.sup-sl-college-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_office_product table.sup-sl-college-table,
#root_office_product table.sup-sl-college-table th,
#root_office_product table.sup-sl-college-table td {
  border: none;
}

#root_office_product table.sup-sl-college-table thead {
  background-color: #d1fae5;
  color: #374151;
}

#root_office_product table.sup-sl-college-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #a7f3d0;
  background-color: #d1fae5;
  color: #374151;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  white-space: nowrap;
}

#root_office_product table.sup-sl-college-table td {
  padding: 12px 16px;
  color: #1f2937;
  vertical-align: middle;
}

#root_office_product table.sup-sl-college-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.3s ease;
}

#root_office_product table.sup-sl-college-table tbody tr:last-child {
  border-bottom: none;
}

#root_office_product table.sup-sl-college-table tbody tr:hover {
  background-color: #eff6ff;
}

#root_office_product .sup-sl-serial-no {
  font-weight: 600;
  color: #4f46e5;
}

#root_office_product .sup-sl-text-center {
  text-align: center !important;
}

#root_office_product .sup-sl-alink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  gap: 0.35rem;
}

#root_office_product .sup-sl-alink-btn:hover {
  opacity: 0.9;
}

#root_office_product .ofp-sl-btn-edit {
  background-color: #0284c7;
}

#root_office_product .ofp-sl-btn-edit:hover {
  background-color: #0369a1;
}

#root_office_product .sup-sl-empty-alert {
  background: #fef3c7;
  border-left: 4px solid #eab308;
  color: #a16207;
  padding: 1rem;
  border-radius: 0.35rem;
  margin-top: 0.5rem;
}

#root_office_product .sup-sl-empty-alert p {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  #root_office_product .sup-sl-table-container table.sup-sl-college-table {
    min-width: 52rem;
  }
}

/* ========== NEW: Main Menu Access — Company Access modal (unique mma-* classes) ========== */
.mma-company-access-btn {
  margin-top: -2px;
}

.mma-per-menu-access-btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 8px;
}

.sma-per-menu-access-btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 8px;
}

.psa-per-menu-access-btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 8px;
}

.psa-company-access-col {
  text-align: center;
  width: 140px;
}

.csa-per-service-access-btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 8px;
  margin-right: 4px;
}

.cra-per-subservice-access-btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 8px;
  margin-right: 4px;
}

.mma-company-access-hint {
  margin: 0 0 12px;
  color: #444;
  font-size: 13px;
}

.mma-company-access-section {
  margin-bottom: 14px;
}

.mma-company-access-section-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: #222;
  font-size: 14px;
}

.mma-company-access-toolbar {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.mma-company-access-select-all {
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.mma-company-access-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 10px;
  background: #fafafa;
}

.mma-company-access-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.mma-company-access-row:last-child {
  border-bottom: none;
}

.mma-company-access-name {
  flex: 1;
}

.mma-company-access-empty {
  text-align: center;
  color: #c0392b;
  padding: 16px 8px;
  font-size: 14px;
}

.mma-company-access-actions {
  text-align: center;
  margin-top: 16px;
}

/* Company Access confirm dialog — larger for readability (unique mma-* only) */
.bootbox.mma-access-confirm-modal .modal-dialog {
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
}

.bootbox.mma-access-confirm-modal .modal-header {
  padding: 1.15rem 1.4rem;
}

.bootbox.mma-access-confirm-modal .modal-title {
  font-size: 1.25rem;
}

.bootbox.mma-access-confirm-modal .modal-body {
  padding: 1.6rem 1.5rem;
  font-size: 1.15rem;
  line-height: 1.5;
}

.bootbox.mma-access-confirm-modal .modal-footer {
  padding: 1rem 1.4rem;
}

.bootbox.mma-access-confirm-modal .modal-footer .btn {
  min-width: 5.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 1rem;
}


/* ===== Admin Survey Management (unique ho-survey-* only) ===== */
.ho-survey-required { color: #c0392b; }
.ho-survey-field-error { color: #c0392b; font-size: 12px; display: block; margin-top: 4px; }
.ho-survey-radio-row { display: flex; gap: 16px; align-items: center; }
.ho-survey-list-page { padding: 16px 20px 32px; }
.ho-survey-list-main { max-width: 1100px; margin: 0 auto; }
.ho-survey-list-header-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 18px;
}
.ho-survey-list-title { margin: 0; font-size: 1.6rem; color: #1f2937; font-weight: 700; }
.ho-survey-list-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ho-survey-empty {
  text-align: center; color: #6b7280; padding: 28px 12px; background: #f9fafb;
  border-radius: 8px; border: 1px dashed #d1d5db;
}
.ho-survey-table-wrap { overflow-x: auto; }
.ho-survey-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
}
.ho-survey-table th, .ho-survey-table td {
  padding: 10px 12px; border-bottom: 1px solid #e5e7eb; text-align: left; font-size: 14px;
}
.ho-survey-table thead th {
  background: #f3f4f6; font-weight: 600; color: #374151;
}
.ho-survey-td-center { text-align: center !important; }

.ho-survey-profile-page { padding: 12px 16px 28px; }
.ho-survey-profile-header {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.ho-survey-profile-header-top {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start;
}
.ho-survey-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.ho-survey-stat {
  min-width: 110px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 8px 12px;
}
.ho-survey-stat span { display: block; font-size: 12px; color: #64748b; }
.ho-survey-stat strong { font-size: 18px; color: #0f172a; }
.ho-survey-profile-name { font-size: 1.35rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
.ho-survey-profile-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #4b5563; font-size: 14px; }
.ho-survey-profile-layout { margin-top: 8px; }
.ho-survey-pane {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px;
}
.ho-survey-pane-title {
  font-size: 1.15rem; font-weight: 700; color: #1f2937; margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ho-survey-pane-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ho-survey-info-grid { display: grid; gap: 10px; }
.ho-survey-info-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 8px; align-items: start;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9;
}
.ho-survey-info-row label { font-weight: 600; color: #374151; }
.ho-survey-add-block {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 12px; margin: 10px 0;
}
.ho-survey-inline-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px;
}
.ho-survey-inline-form .form-control { max-width: 260px; }
.ho-survey-master-page { padding: 12px 16px 28px; }

@media (max-width: 768px) {
  .ho-survey-info-row { grid-template-columns: 1fr; }
  .ho-survey-list-title { font-size: 1.3rem; }
}

/* ===== Add Survey modal UX — unique ho-survey-add-* (new only) ===== */
#root_survey_list .ho-survey-add-modal.ho-modal-overlay {
  z-index: 1050;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
}

#root_survey_list .ho-survey-add-modal-box.ho-modal-box {
  max-width: 34rem;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

#root_survey_list .ho-survey-add-modal-header.ho-modal-header {
  align-items: flex-start;
  padding: 1.15rem 1.35rem 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #eef2f7;
}

#root_survey_list .ho-survey-add-modal-heading {
  min-width: 0;
  flex: 1;
}

#root_survey_list .ho-survey-add-modal-heading .ho-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#root_survey_list .ho-survey-add-modal-sub {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #64748b;
}

#root_survey_list .ho-survey-add-modal-body.ho-modal-body {
  padding: 1.25rem 1.35rem 0.5rem;
}

#root_survey_list .ho-survey-add-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#root_survey_list .ho-survey-add-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

#root_survey_list .ho-survey-add-label {
  display: block;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
}

#root_survey_list .ho-survey-add-optional {
  font-weight: 500;
  color: #94a3b8;
  font-size: 0.78rem;
}

#root_survey_list .ho-survey-add-hint {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #94a3b8;
}

#root_survey_list .ho-survey-add-input.ho-form-input,
#root_survey_list .ho-survey-add-input.form-control {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: #1e293b;
  background: #fff;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#root_survey_list .ho-survey-add-input.ho-form-input:focus,
#root_survey_list .ho-survey-add-input.form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

#root_survey_list .ho-survey-add-input.ho-form-input.error,
#root_survey_list .ho-survey-add-input.form-control.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

#root_survey_list .ho-survey-add-date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

#root_survey_list .ho-survey-add-date-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#root_survey_list .ho-survey-add-date-wrap .ho-survey-add-input {
  padding-right: 2.6rem;
  cursor: pointer;
  background: #fbfdff;
}

#root_survey_list .ho-survey-add-date-btn {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.5rem;
  background: #eef2ff;
  color: #4f46e5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

#root_survey_list .ho-survey-add-date-btn:hover {
  background: #e0e7ff;
  color: #3730a3;
}

#root_survey_list .ho-survey-add-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.15rem;
}

#root_survey_list .ho-survey-add-choice {
  position: relative;
  margin: 0;
  cursor: pointer;
}

#root_survey_list .ho-survey-add-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

#root_survey_list .ho-survey-add-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  background: #fff;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#root_survey_list .ho-survey-add-choice input:checked + span {
  border-color: #6366f1;
  background: #eef2ff;
  color: #3730a3;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.25);
}

#root_survey_list .ho-survey-add-choice:hover span {
  border-color: #c7d2fe;
}

#root_survey_list .ho-survey-add-modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.35rem 1.2rem;
  border-top: 1px solid #eef2f7;
  background: #f8fafc;
}

#root_survey_list .ho-survey-add-btn-cancel.ho-btn,
#root_survey_list .ho-survey-add-btn-save.ho-btn {
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.65rem;
  font-weight: 600;
  font-size: 0.9rem;
}

#root_survey_list .ho-survey-add-btn-cancel.ho-btn {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #475569;
}

#root_survey_list .ho-survey-add-btn-cancel.ho-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
}

#root_survey_list .ho-survey-add-btn-save.ho-btn {
  min-width: 8.5rem;
}

#root_survey_list .ho-survey-add-form span.ho-survey-field-error {
  margin-top: 0.15rem;
}

body > #ui-datepicker-div.ho-survey-datepicker {
  z-index: 11050 !important;
}

@media (max-width: 560px) {
  #root_survey_list .ho-survey-add-modal-box.ho-modal-box {
    max-width: 100%;
    border-radius: 0.85rem;
  }

  #root_survey_list .ho-survey-add-date-grid {
    grid-template-columns: 1fr;
  }

  #root_survey_list .ho-survey-add-modal-footer {
    flex-direction: column-reverse;
  }

  #root_survey_list .ho-survey-add-btn-cancel.ho-btn,
  #root_survey_list .ho-survey-add-btn-save.ho-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   Survey list page — college survey_list look (unique ho-svl-*)
   ============================================================ */
#root_survey_list.ho-svl-page {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  background: #f9fafb;
  color: #1f2937;
  min-height: calc(100vh - 4rem);
}

#root_survey_list .ho-svl-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem;
}

#root_survey_list .ho-svl-header-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  #root_survey_list .ho-svl-header-row {
    flex-direction: row;
    align-items: center;
  }
}

#root_survey_list .ho-svl-header-left {
  min-width: 0;
}

#root_survey_list .ho-svl-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #4338ca;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#root_survey_list .ho-svl-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#root_survey_list .ho-svl-btn {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.15s ease;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

#root_survey_list .ho-svl-btn:active {
  transform: scale(0.97);
}

#root_survey_list .ho-svl-btn-process {
  background-color: #0284c7;
}

#root_survey_list .ho-svl-btn-process:hover {
  background-color: #0369a1;
}

#root_survey_list .ho-svl-btn-success {
  background-color: #16a34a;
}

#root_survey_list .ho-svl-btn-success:hover {
  background-color: #15803d;
}

#root_survey_list .ho-svl-table-container {
  overflow-x: auto;
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  padding: 1rem;
}

#root_survey_list .ho-svl-college-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_survey_list .ho-svl-college-table,
#root_survey_list .ho-svl-college-table th,
#root_survey_list .ho-svl-college-table td {
  border: none;
}

#root_survey_list .ho-svl-college-table thead {
  background-color: #d1fae5;
  color: #374151;
}

#root_survey_list .ho-svl-college-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #a7f3d0;
}

#root_survey_list .ho-svl-college-table td {
  padding: 12px 16px;
  color: #1f2937;
}

#root_survey_list .ho-svl-college-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.3s ease;
}

#root_survey_list .ho-svl-college-table tbody tr:last-child {
  border-bottom: none;
}

#root_survey_list .ho-svl-college-table tbody tr:hover {
  background-color: #eff6ff;
}

#root_survey_list .ho-svl-serial-no {
  font-weight: 600;
  color: #4f46e5;
}

#root_survey_list .ho-svl-text-center {
  text-align: center !important;
}

#root_survey_list .ho-svl-alink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  font-size: 14px;
  color: #ffffff;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

#root_survey_list .ho-svl-alink-btn:hover {
  opacity: 0.9;
}

#root_survey_list .ho-svl-btn-view {
  background-color: #0ea5e9;
}

#root_survey_list .ho-svl-btn-view:hover {
  background-color: #0284c7;
}

#root_survey_list .ho-svl-btn-delete {
  background-color: #dc2626;
}

#root_survey_list .ho-svl-btn-delete:hover {
  background-color: #b91c1c;
}

#root_survey_list .ho-svl-empty {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  color: #92400e;
  padding: 1rem;
  border-radius: 0.5rem;
}

#root_survey_list .ho-svl-empty p {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 639px) {
  #root_survey_list .ho-svl-main {
    padding: 1rem;
  }

  #root_survey_list .ho-svl-button-group {
    width: 100%;
  }

  #root_survey_list .ho-svl-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  #root_survey_list .ho-svl-college-table {
    min-width: 40rem;
  }
}

/* ---- Staff add login type modal (staffs.js) ---- */
#salLoginTypeModal.sal-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

#salLoginTypeModal.sal-login-overlay.sal-login-open {
  display: flex;
}

#salLoginTypeModal .sal-login-box {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 26rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#salLoginTypeModal .sal-login-header {
  padding: 1rem 1.25rem 0.5rem;
}

#salLoginTypeModal .sal-login-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
}

#salLoginTypeModal .sal-login-important {
  margin: 0.75rem 1.25rem 0;
  padding: 0.75rem 0.875rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 4px solid #ea580c;
  border-radius: 0.5rem;
  color: #9a3412;
  font-size: 0.875rem;
  line-height: 1.45;
}

#salLoginTypeModal .sal-login-body {
  padding: 1rem 1.25rem;
}

#salLoginTypeModal .sal-login-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

#salLoginTypeModal .sal-login-options {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

#salLoginTypeModal .sal-login-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.9375rem;
  color: #1e293b;
  background: #f8fafc;
}

#salLoginTypeModal .sal-login-option:hover {
  border-color: #6366f1;
  background: #eef2ff;
}

#salLoginTypeModal .sal-login-option input {
  accent-color: #4f46e5;
  width: 1rem;
  height: 1rem;
}

#salLoginTypeModal .sal-login-error {
  display: none;
  margin-top: 0.625rem;
  color: #dc2626;
  font-size: 0.8125rem;
}

#salLoginTypeModal .sal-login-error.sal-login-error-show {
  display: block;
}

#salLoginTypeModal .sal-login-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem 1.25rem;
  border-top: 1px solid #f1f5f9;
}

#salLoginTypeModal .sal-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

#salLoginTypeModal .sal-login-btn-submit {
  background: #4f46e5;
  color: #fff;
}

#salLoginTypeModal .sal-login-btn-submit:hover {
  background: #4338ca;
}

#salLoginTypeModal .sal-login-btn-cancel {
  background: #e2e8f0;
  color: #334155;
}

#salLoginTypeModal .sal-login-btn-cancel:hover {
  background: #cbd5e1;
}

/* ===== Survey Profile page — unique ho-sp-* (new only; do not alter existing rules) ===== */
#root_survey_profile.ho-sp-page {
  min-height: 100vh;
  background: #f3f4f6;
}

#root_survey_profile .ho-page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

#root_survey_profile .ho-page-title .blc {
  font-weight: 500;
  opacity: 0.95;
}

/* Keep stat hooks for JS updates; hide from header to match college layout */
#root_survey_profile .ho-sp-header-stats {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#root_survey_profile .ho-sp-info-card .ho-card-header {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.25rem;
  padding-bottom: 0.75rem;
}

#root_survey_profile .ho-sp-about-card {
  margin-top: 0;
}

#root_survey_profile .ho-sp-about-body {
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.5;
  min-height: 1.5rem;
}

#root_survey_profile .ho-sp-value-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#root_survey_profile .ho-sp-edit-icon {
  color: #ea580c;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.15rem;
}

#root_survey_profile .ho-sp-edit-icon:hover {
  color: #c2410c;
}

#root_survey_profile .hideSurvey {
  display: none;
}

#root_survey_profile .admin-content {
  display: block;
}

#root_survey_profile .admin-content[style*="display: none"],
#root_survey_profile .admin-content[style*="display:none"] {
  display: none !important;
}

/* Bootstrap-less modals used by survey_profile.jsp (siblings of #root_survey_profile) */
#root_survey_profile ~ .modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.45);
  overflow-y: auto;
}

#root_survey_profile ~ .modal.in,
#root_survey_profile ~ .modal.show {
  display: flex !important;
}

#root_survey_profile ~ .modal .modal-dialog {
  width: 100%;
  max-width: 32rem;
  margin: auto;
}

#root_survey_profile ~ .modal.modal-lg .modal-dialog,
#root_survey_profile ~ .modal .modal-dialog.modal-lg {
  max-width: 48rem;
}

#root_survey_profile ~ .modal .modal-content {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  overflow: hidden;
}

#root_survey_profile ~ .modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #e5e7eb;
}

#root_survey_profile ~ .modal .modal-body {
  padding: 1rem 1.1rem 1.25rem;
}

#root_survey_profile ~ .modal .modal-footer {
  padding: 0.75rem 1.1rem 1rem;
  text-align: right;
}

#root_survey_profile ~ .modal .close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

#root_survey_profile ~ .modal .headTitle,
#root_survey_profile ~ .modal .modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
  padding: 0.5rem 1rem 0;
}

.ho-sp-modal-backdrop.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(15, 23, 42, 0.4);
}

/* ===== Survey Profile layout fixes — unique ho-sp-* additions only ===== */

/* Survey Info: consistent label/value columns */
#root_survey_profile .ho-sp-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

#root_survey_profile .ho-sp-info-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.75rem 18.5rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid #f1f5f9;
}

#root_survey_profile .ho-sp-info-row:last-child {
  border-bottom: none;
}

#root_survey_profile .ho-sp-info-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.92rem;
}

#root_survey_profile .ho-sp-info-value {
  min-width: 0;
  width: 100%;
}

#root_survey_profile .ho-sp-value-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  width: 100%;
}

#root_survey_profile .ho-sp-value-text {
  color: #4b5563;
  min-width: 0;
  overflow-wrap: anywhere;
}

#root_survey_profile .ho-sp-edit-slot {
  width: 100%;
}

#root_survey_profile .ho-sp-inline-edit-form {
  margin: 0;
  width: 100%;
}

#root_survey_profile .ho-sp-inline-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  width: 100%;
  max-width: 22rem;
}

#root_survey_profile .ho-sp-inline-edit-radio {
  max-width: none;
}

#root_survey_profile .ho-sp-inline-input,
#root_survey_profile .ho-sp-inline-edit .inpBorder,
#root_survey_profile .ho-sp-inline-edit select.form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-radio-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.65rem;
  font-weight: 500;
  color: #374151;
}

#root_survey_profile .ho-sp-save-btn {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: #16a34a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#root_survey_profile .ho-sp-save-btn:hover {
  filter: brightness(0.95);
}

/* About survey editor: full card width, save near content */
#root_survey_profile .ho-sp-about-card .ho-card-subtitle {
  margin-bottom: 0.65rem;
}

#root_survey_profile .ho-sp-about-view {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

#root_survey_profile .ho-sp-about-text {
  flex: 1 1 auto;
  min-width: 0;
  color: #4b5563;
  line-height: 1.5;
}

#root_survey_profile .ho-sp-about-edit-slot,
#root_survey_profile .ho-sp-about-edit-form,
#root_survey_profile .ho-sp-about-edit-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-about-edit-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

#root_survey_profile .ho-sp-about-textarea {
  width: 100% !important;
  max-width: 100%;
  min-height: 140px;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-about-edit-wrap > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-about-edit-wrap .nicEdit-panelContain {
  width: 100% !important;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-about-edit-wrap .nicEdit-main {
  width: 100% !important;
  min-height: 140px;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-about-save-btn {
  align-self: flex-start;
  margin: 0;
}

/* Participants tab */
#root_survey_profile .ho-sp-participants-card {
  padding: 1.25rem 1.35rem 1.5rem;
}

#root_survey_profile .ho-sp-part-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #e5e7eb;
}

#root_survey_profile .ho-sp-part-header .ho-card-title {
  margin: 0;
}

#root_survey_profile .ho-sp-part-header-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

#root_survey_profile .ho-sp-part-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#root_survey_profile .ho-sp-part-action-btns {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

#root_survey_profile .ho-sp-part-add-btn,
#root_survey_profile .ho-sp-part-delete-btn {
  white-space: nowrap;
}

#root_survey_profile .ho-sp-search-block {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
}

#root_survey_profile .ho-sp-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  width: 100%;
}

#root_survey_profile .ho-sp-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 18rem;
  margin: 0;
  max-width: 100%;
}

#root_survey_profile .ho-sp-search-input {
  flex: 1 1 14rem;
  min-width: 12rem;
  max-width: 22rem;
  width: auto;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.45rem 0.7rem;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-search-all-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

#root_survey_profile .ho-sp-search-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  margin: 0;
}

#root_survey_profile .ho-sp-part-lists {
  margin-top: 0.75rem;
}

/* Participants list tables — college-style columns / spacing */
#root_survey_profile .ho-sp-part-section {
  margin-top: 1rem;
}

#root_survey_profile .ho-sp-part-section-title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

#root_survey_profile .ho-sp-part-table-wrap {
  overflow-x: auto;
  width: 100%;
}

#root_survey_profile .ho-sp-part-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

#root_survey_profile .ho-sp-part-table thead th {
  background: #d1fae5;
  color: #374151;
  font-weight: 600;
  white-space: nowrap;
}

#root_survey_profile .ho-sp-part-table th,
#root_survey_profile .ho-sp-part-table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  font-size: 0.875rem;
  word-wrap: break-word;
}

#root_survey_profile .ho-sp-part-table tbody tr:hover td {
  background: #eff6ff;
}

#root_survey_profile .ho-sp-part-th-sno,
#root_survey_profile .ho-sp-part-td-sno {
  width: 4.5rem;
  text-align: center;
  font-weight: 600;
  color: #4f46e5;
}

#root_survey_profile .ho-sp-part-th-name,
#root_survey_profile .ho-sp-part-td-name {
  width: auto;
  min-width: 8rem;
}

#root_survey_profile .ho-sp-part-th-status,
#root_survey_profile .ho-sp-part-td-status {
  width: 7.5rem;
}

#root_survey_profile .ho-sp-part-th-stype,
#root_survey_profile .ho-sp-part-td-stype {
  width: 8rem;
}

#root_survey_profile .ho-sp-part-th-idate,
#root_survey_profile .ho-sp-part-td-idate,
#root_survey_profile .ho-sp-part-th-cdate,
#root_survey_profile .ho-sp-part-td-cdate {
  width: 9.5rem;
  white-space: nowrap;
}

#root_survey_profile .ho-sp-part-th-fb,
#root_survey_profile .ho-sp-part-td-fb {
  width: 9rem;
  text-align: center;
}

#root_survey_profile .ho-sp-part-th-del,
#root_survey_profile .ho-sp-part-td-del {
  width: 5.5rem;
  text-align: center;
}

#root_survey_profile .ho-sp-part-chk {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

#root_survey_profile .ho-sp-part-fb-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Questions action bar */
#root_survey_profile .ho-sp-questions-card {
  padding: 1.25rem 1.35rem 1.5rem;
}

#root_survey_profile .ho-sp-questions-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #e5e7eb;
}

#root_survey_profile .ho-sp-questions-header .ho-card-title {
  margin: 0;
  flex: 0 0 auto;
}

#root_survey_profile .ho-sp-questions-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 1 1 16rem;
}

#root_survey_profile .ho-sp-q-action-btn {
  white-space: nowrap;
}

/* Questions header — college-style icon action buttons */
#root_survey_profile .ho-sp-q-icon-actions {
  flex: 0 0 auto;
  gap: 0.65rem;
}

#root_survey_profile .ho-sp-questions-actions .ho-sp-q-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #6366f1 0%, #9333ea 100%);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

#root_survey_profile .ho-sp-questions-actions .ho-sp-q-icon-btn:hover {
  background: linear-gradient(90deg, #4f46e5 0%, #7e22ce 100%);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.45);
}

#root_survey_profile .ho-sp-questions-actions .ho-sp-q-icon-btn:focus {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

#root_survey_profile .ho-sp-questions-actions .ho-sp-q-icon-btn i {
  margin: 0;
  color: #fff;
}

/* Questions list — college-style group headers + question cards */
#root_survey_profile .ho-sp-q-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#root_survey_profile .ho-sp-q-group {
  margin: 0 0 0.35rem;
}

#root_survey_profile .ho-sp-q-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.7rem 1rem;
  margin: 0 0 0.85rem;
  background: #e0e7ff;
  border-radius: 0.5rem;
}

#root_survey_profile .ho-sp-q-group-title {
  flex: 1 1 12rem;
  min-width: 0;
}

#root_survey_profile .ho-sp-q-group-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #4338ca;
  cursor: pointer;
}

#root_survey_profile .ho-sp-q-group-actions,
#root_survey_profile .ho-sp-q-card-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  margin-left: auto;
}

#root_survey_profile .ho-sp-q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0.35rem 0.55rem;
  border: none;
  border-radius: 0.375rem;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

#root_survey_profile .ho-sp-q-btn i {
  margin: 0;
  color: #fff;
}

#root_survey_profile .ho-sp-q-btn-add {
  background: #4ade80;
}

#root_survey_profile .ho-sp-q-btn-add:hover {
  background: #16a34a;
}

#root_survey_profile .ho-sp-q-btn-edit {
  background: #14b8a6;
}

#root_survey_profile .ho-sp-q-btn-edit:hover {
  background: #0d9488;
}

#root_survey_profile .ho-sp-q-btn-move {
  background: #3b82f6;
}

#root_survey_profile .ho-sp-q-btn-move:hover {
  background: #2563eb;
}

#root_survey_profile .ho-sp-q-btn-del {
  background: #ef4444;
}

#root_survey_profile .ho-sp-q-btn-del:hover {
  background: #dc2626;
}

#root_survey_profile .ho-sp-q-btn:disabled,
#root_survey_profile .ho-sp-q-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

#root_survey_profile .ho-sp-q-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#root_survey_profile .ho-sp-q-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem 1.15rem;
  background: #fff;
  transition: box-shadow 0.15s ease;
}

#root_survey_profile .ho-sp-q-card:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

#root_survey_profile .ho-sp-q-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
}

#root_survey_profile .ho-sp-q-card-body {
  flex: 1 1 16rem;
  min-width: 0;
}

#root_survey_profile .ho-sp-q-text {
  margin: 0 0 0.35rem;
}

#root_survey_profile .ho-sp-q-question-label {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
}

#root_survey_profile .ho-sp-q-type-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: #4f46e5;
  white-space: nowrap;
}

#root_survey_profile .ho-sp-q-mandatory-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #b45309;
  white-space: nowrap;
}

#root_survey_profile .ho-sp-q-options {
  margin-top: 0.35rem;
}

#root_survey_profile .ho-sp-q-opt-list {
  margin: 0.35rem 0 0;
  padding: 0 0 0 1.15rem;
  list-style: disc;
  color: #4b5563;
  font-size: 0.875rem;
}

#root_survey_profile .ho-sp-q-opt-item {
  margin: 0.15rem 0;
  padding: 0;
}

#root_survey_profile .ho-sp-q-opt-text {
  margin: 0.25rem 0 0;
  color: #4b5563;
  font-size: 0.875rem;
}

#root_survey_profile .ho-sp-q-list .hideInfo {
  display: none;
}

#root_survey_profile .ho-sp-q-list .ho-sp-q-group-title .input-group,
#root_survey_profile .ho-sp-q-list .ho-sp-q-text .input-group {
  max-width: 28rem;
}

/* Survey profile modals — header title left / close right; field + action spacing */
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-content {
  overflow: hidden;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-title,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-header .headTitle,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-header .modal-title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  order: 1;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-close {
  order: 2;
  margin: 0 0 0 auto;
  float: none;
  position: static;
  opacity: 1;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 0.15rem 0.35rem;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-close:hover {
  color: #111827;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-body {
  padding: 1.15rem 1.25rem 1.35rem;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-label {
  display: block;
  font-weight: 600;
  color: #374151;
  margin: 0;
  font-size: 0.9rem;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-input,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-field .form-control {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  min-height: 2.4rem;
  background: #fff;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-input:focus,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-field .form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-field-extra {
  width: 100%;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-field-extra:empty {
  display: none;
}

/* Add survey question — type-based option / rating inputs */
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-opt-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-opt-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-opt-row .ho-sp-modal-input,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-opt-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-opt-add-btn,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-opt-remove-btn {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 0.45rem 0.7rem;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-rating-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-rating-row .ho-sp-modal-input,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-rating-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-rating-sep {
  flex: 0 0 auto;
  color: #64748b;
  font-weight: 600;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-que-type-hint {
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 0.35rem 0;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid #f1f5f9;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-actions .ho-btn,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-actions .btn {
  min-width: 5.5rem;
}

/* Non Participants List — compact avatar + aligned columns */
#root_survey_profile .ho-sp-nonpart-card {
  padding: 1.25rem 1.35rem 1.5rem;
}

#root_survey_profile .ho-sp-nonpart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #e5e7eb;
}

#root_survey_profile .ho-sp-nonpart-header .ho-card-title {
  margin: 0;
}

#root_survey_profile .ho-sp-nonpart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

#root_survey_profile .ho-sp-nonpart-table-wrap {
  overflow-x: auto;
}

#root_survey_profile .ho-sp-nonpart-table {
  table-layout: fixed;
  width: 100%;
}

#root_survey_profile .ho-sp-nonpart-table th,
#root_survey_profile .ho-sp-nonpart-table td {
  vertical-align: middle;
  padding: 0.55rem 0.65rem;
}

#root_survey_profile .ho-sp-nonpart-th-sno,
#root_survey_profile .ho-sp-nonpart-td-sno {
  width: 4.5rem;
  text-align: center;
}

#root_survey_profile .ho-sp-nonpart-th-photo,
#root_survey_profile .ho-sp-nonpart-td-photo {
  width: 3.25rem;
  text-align: center;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

#root_survey_profile .ho-sp-nonpart-th-name,
#root_survey_profile .ho-sp-nonpart-td-name {
  width: auto;
  text-align: left;
}

#root_survey_profile .ho-sp-nonpart-th-gender,
#root_survey_profile .ho-sp-nonpart-td-gender {
  width: 6.5rem;
  text-align: center;
}

#root_survey_profile .ho-sp-nonpart-th-date,
#root_survey_profile .ho-sp-nonpart-td-date {
  width: 8.5rem;
  text-align: left;
}

#root_survey_profile .ho-sp-nonpart-th-status,
#root_survey_profile .ho-sp-nonpart-td-status {
  width: 7rem;
  text-align: center;
}

#root_survey_profile .ho-sp-nonpart-avatar,
#root_survey_profile .ho-sp-nonpart-table img.ho-sp-nonpart-avatar.single-img,
#root_survey_profile .ho-sp-nonpart-table img.ho-sp-nonpart-avatar.img-thumbnail,
#root_survey_profile .ho-sp-nonpart-table img.ho-sp-nonpart-avatar.img-zoom {
  width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  object-fit: cover;
  padding: 2px;
  margin: 0 auto;
  display: block;
  border-radius: 0.35rem;
  box-sizing: border-box;
}

#root_survey_profile .ho-sp-nonpart-row {
  height: auto;
}

/* Survey Report header — title left, PDF/Print spaced right */
#root_survey_profile .ho-sp-report-card {
  padding: 1.25rem 1.35rem 1.5rem;
}

#root_survey_profile .ho-sp-report-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #e5e7eb;
}

#root_survey_profile .ho-sp-report-header .ho-card-title {
  margin: 0;
  flex: 0 1 auto;
}

#root_survey_profile .ho-sp-report-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-left: auto;
}

#root_survey_profile .ho-sp-report-link {
  display: inline-flex;
  text-decoration: none;
}

#root_survey_profile .ho-sp-report-btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Add Likert Type Scales modal — stacked scale rows + add button */
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-likert-scales-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-likert-scale-row {
  margin: 0;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-likert-scale-input-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-likert-scale-input-row .ho-sp-modal-input,
#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-likert-scale-input-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-likert-add-btn {
  flex: 0 0 auto;
  min-width: 2.5rem;
  padding: 0.45rem 0.7rem;
}

#root_survey_profile ~ .modal.ho-sp-modal .ho-sp-modal-actions .ho-btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
  min-height: 2.4rem;
}

@media (max-width: 639px) {
  #root_survey_profile .ho-sp-info-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  #root_survey_profile .ho-sp-part-header,
  #root_survey_profile .ho-sp-questions-header,
  #root_survey_profile .ho-sp-nonpart-header,
  #root_survey_profile .ho-sp-report-header {
    flex-direction: column;
    align-items: stretch;
  }

  #root_survey_profile .ho-sp-part-header-right,
  #root_survey_profile .ho-sp-questions-actions,
  #root_survey_profile .ho-sp-nonpart-actions,
  #root_survey_profile .ho-sp-report-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  #root_survey_profile .ho-sp-search-input {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  #root_survey_profile .ho-sp-nonpart-th-date,
  #root_survey_profile .ho-sp-nonpart-td-date,
  #root_survey_profile .ho-sp-nonpart-th-gender,
  #root_survey_profile .ho-sp-nonpart-td-gender,
  #root_survey_profile .ho-sp-nonpart-th-status,
  #root_survey_profile .ho-sp-nonpart-td-status {
    width: auto;
  }

  #root_survey_profile .ho-sp-part-th-idate,
  #root_survey_profile .ho-sp-part-td-idate,
  #root_survey_profile .ho-sp-part-th-cdate,
  #root_survey_profile .ho-sp-part-td-cdate,
  #root_survey_profile .ho-sp-part-th-stype,
  #root_survey_profile .ho-sp-part-td-stype,
  #root_survey_profile .ho-sp-part-th-fb,
  #root_survey_profile .ho-sp-part-td-fb {
    width: auto;
  }

  #root_survey_profile .ho-sp-q-group-header,
  #root_survey_profile .ho-sp-q-card-row {
    flex-direction: column;
    align-items: stretch;
  }

  #root_survey_profile .ho-sp-q-group-actions,
  #root_survey_profile .ho-sp-q-card-actions {
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* ============================================================
   Lead Custom Field page — unique lcf-* (menu_new / Tailwind)
   ============================================================ */
#root_lead_customer_field.lcf-page {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  background: #f4f6fb;
  color: #1f2937;
  min-height: calc(100vh - 4rem);
}

#root_lead_customer_field .lcf-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem;
}

#root_lead_customer_field .lcf-header-row {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 0.85rem;
}

@media (min-width: 768px) {
  #root_lead_customer_field .lcf-header-row {
    flex-direction: row;
    align-items: center;
  }
}

#root_lead_customer_field .lcf-header-left {
  min-width: 0;
}

#root_lead_customer_field .lcf-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #4338ca;
  line-height: 1.3;
  word-break: break-word;
}

#root_lead_customer_field .lcf-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 400;
}

#root_lead_customer_field .lcf-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

#root_lead_customer_field .lcf-create-btn {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

#root_lead_customer_field .lcf-table-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

#root_lead_customer_field .lcf-table-wrap {
  overflow-x: auto;
  width: 100%;
}

#root_lead_customer_field .lcf-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  table-layout: auto;
}

#root_lead_customer_field .lcf-table thead {
  background: #eef2ff;
}

#root_lead_customer_field .lcf-th {
  padding: 0.85rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4338ca;
  border-bottom: 1px solid #e0e7ff;
  white-space: nowrap;
}

#root_lead_customer_field .lcf-tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

#root_lead_customer_field .lcf-tr:last-child {
  border-bottom: none;
}

#root_lead_customer_field .lcf-tr:hover {
  background: #f9fafb;
}

#root_lead_customer_field .lcf-td {
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  vertical-align: middle;
}

#root_lead_customer_field .lcf-td-center {
  text-align: center;
}

#root_lead_customer_field .lcf-show-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#root_lead_customer_field .lcf-hide-info.hidden {
  display: none !important;
}

#root_lead_customer_field .lcf-edit-icon {
  cursor: pointer;
  margin-left: 0.35rem;
  color: #2563eb;
  font-size: 0.85rem;
}

#root_lead_customer_field .lcf-edit-icon:hover {
  color: #1d4ed8;
}

#root_lead_customer_field .lcf-inline-form {
  margin: 0;
}

#root_lead_customer_field .lcf-inline-edit {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#root_lead_customer_field .lcf-inline-input,
#root_lead_customer_field .inTextBorder {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
  color: #374151;
  min-width: 8rem;
  max-width: 14rem;
}

#root_lead_customer_field .lcf-inline-input:focus,
#root_lead_customer_field .inTextBorder:focus,
#root_lead_customer_field .lcf-inline-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

#root_lead_customer_field .lcf-inline-textarea,
#root_lead_customer_field .purposetext {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.875rem;
  color: #374151;
  min-width: 12rem;
  max-width: 18rem;
  resize: vertical;
}

#root_lead_customer_field .lcf-save-btn {
  flex-shrink: 0;
}

#root_lead_customer_field .lcf-radio-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0;
}

#root_lead_customer_field .lcf-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
}

#root_lead_customer_field .lcf-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

#root_lead_customer_field .lcf-empty p {
  margin: 0;
  font-size: 1rem;
  color: #6b7280;
  font-weight: 500;
}

#root_lead_customer_field .lcf-modal-box {
  max-width: 32rem;
}

#root_lead_customer_field .lcf-checkbox-group {
  margin-bottom: 0.5rem;
}

#root_lead_customer_field .lcf-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
}

#root_lead_customer_field .lcf-checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #4f46e5;
}

@media (max-width: 767px) {
  #root_lead_customer_field .lcf-main {
    padding: 1rem;
  }

  #root_lead_customer_field .lcf-title {
    font-size: 1.25rem;
  }

  #root_lead_customer_field .lcf-header-actions {
    width: 100%;
  }

  #root_lead_customer_field .lcf-create-btn {
    width: 100%;
  }
}

#root_lead_customer_field .lcf-modal.ho-modal-overlay {
  z-index: 1050;
}

#root_lead_customer_field .lcf-modal .ho-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
}

#root_lead_customer_field .lcf-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.75rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-size: 1.25rem;
}

#root_lead_customer_field .lcf-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: #374151;
  font-weight: 600;
}

#root_lead_customer_field .lcf-empty-hint {
  margin: 0;
  font-size: 0.875rem;
  color: #9ca3af;
  font-weight: 400;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}

/* Ensure Field Options stays hidden when Tailwind .hidden is overridden by .ho-form-group */
/* ---- Lead Management — inline field edit pencil icons (unique lm-edit*) ---- */
#leadManagementId .lm-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: 0.35rem;
  border: none;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
}

#leadManagementId .lm-edit-icon {
  color: #2563eb;
  font-size: 0.85rem;
}

#leadManagementId .lm-edit-btn:hover .lm-edit-icon {
  color: #1d4ed8;
}

#leadManagementId .lm-inline-form {
  margin: 0;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}

#leadManagementId .lm-inline-edit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#leadManagementId .lm-inline-input,
#leadManagementId .lm-inline-select {
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 280px;
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#leadManagementId .lm-inline-input:focus,
#leadManagementId .lm-inline-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#leadManagementId .lm-save-btn,
#leadManagementId .lm-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  flex-shrink: 0;
  line-height: 1;
}

#leadManagementId .lm-save-btn {
  background: #16a34a;
  color: #fff;
}

#leadManagementId .lm-save-btn:hover {
  background: #15803d;
}

#leadManagementId .lm-cancel-btn {
  background: #9ca3af;
  color: #fff;
}

#leadManagementId .lm-cancel-btn:hover {
  background: #6b7280;
}

#root_lead_customer_field #options_group.lcf-options-group.hidden {
  display: none !important;
}

/* ---- Staff Management modals: above app navbar (~1000) + backdrop blur ---- */
#leadProfileId #staffModal,
#leadProfileId #customerModal,
#leadProfileId #addStaffGroupId {
  z-index: 10050;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#leadProfileId #salLoginTypeModal.sal-login-overlay {
  z-index: 10060;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================================
   Add Customer To Group page — unique actg-* (menu_new / Tailwind)
   ============================================================ */
#root_add_customer_togroup.actg-page {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  background: #f4f6fb;
  color: #1f2937;
  min-height: calc(100vh - 4rem);
}

#root_add_customer_togroup .actg-main {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem;
}

#root_add_customer_togroup .actg-header-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}

#root_add_customer_togroup .actg-header-left {
  min-width: 0;
}

#root_add_customer_togroup .actg-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #05053d;
  line-height: 1.3;
  word-break: break-word;
}

#root_add_customer_togroup .actg-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 400;
  line-height: 1.45;
  max-width: 40rem;
}

#root_add_customer_togroup .actg-table-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(5, 5, 61, 0.06);
  overflow: hidden;
}

#root_add_customer_togroup .actg-table-wrap {
  overflow-x: auto;
  width: 100%;
}

#root_add_customer_togroup .actg-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  table-layout: auto;
}

#root_add_customer_togroup .actg-table.hidden {
  display: none;
}

#root_add_customer_togroup .actg-table thead {
  background: linear-gradient(90deg, #f8f5fa, #f3eef5);
}

#root_add_customer_togroup .actg-th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b1a62;
  border-bottom: 1px solid #e9e0ec;
  white-space: nowrap;
}

#root_add_customer_togroup .actg-th-sno,
#root_add_customer_togroup .actg-th-member {
  text-align: center;
  width: 5.5rem;
}

#root_add_customer_togroup .actg-tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

#root_add_customer_togroup .actg-tr:last-child {
  border-bottom: none;
}

#root_add_customer_togroup .actg-tr:hover {
  background: #faf8fb;
}

#root_add_customer_togroup .actg-td {
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  vertical-align: middle;
}

#root_add_customer_togroup .actg-td-center {
  text-align: center;
}

#root_add_customer_togroup .actg-check-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}

#root_add_customer_togroup .actg-checkbox {
  position: absolute;
  opacity: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

#root_add_customer_togroup .actg-checkbox:disabled {
  cursor: not-allowed;
}

#root_add_customer_togroup .actg-check-ui {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid #c4b5c8;
  border-radius: 0.3rem;
  background: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  pointer-events: none;
}

#root_add_customer_togroup .actg-checkbox:focus-visible + .actg-check-ui {
  box-shadow: 0 0 0 3px rgba(91, 26, 98, 0.2);
  border-color: #5b1a62;
}

#root_add_customer_togroup .actg-checkbox:checked + .actg-check-ui {
  background: #5b1a62;
  border-color: #5b1a62;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0.85rem 0.85rem;
  background-repeat: no-repeat;
  background-position: center;
}

#root_add_customer_togroup .actg-checkbox:disabled + .actg-check-ui {
  opacity: 0.55;
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

#root_add_customer_togroup .actg-checkbox:disabled:checked + .actg-check-ui {
  background-color: #6b7280;
  border-color: #6b7280;
}

#root_add_customer_togroup .actg-footer {
  display: flex;
  justify-content: center;
  padding: 1.15rem 1rem 1.35rem;
  border-top: 1px solid #f3f4f6;
  background: #fafbfc;
}

#root_add_customer_togroup .actg-finish-btn {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
  color: #fff;
  min-width: 8.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 20px rgba(91, 26, 98, 0.18);
}

#root_add_customer_togroup .actg-finish-btn:hover {
  opacity: 0.96;
  background: linear-gradient(90deg, #43124a, #05053d);
  color: #fff;
}

#root_add_customer_togroup .actg-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

#root_add_customer_togroup .actg-empty.hidden {
  display: none !important;
}

#root_add_customer_togroup .actg-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

#root_add_customer_togroup .actg-empty-text {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: #9ca3af;
  font-weight: 400;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}

@media (max-width: 639px) {
  #root_add_customer_togroup .actg-main {
    padding: 1rem;
  }

  #root_add_customer_togroup .actg-title {
    font-size: 1.25rem;
  }

  #root_add_customer_togroup .actg-table {
    min-width: 32rem;
  }
}

/* ---- Add Customer To Group — Phase 3 polish (unique actg-*) ---- */
#root_add_customer_togroup .actg-td-name {
  font-weight: 600;
  color: #1f2937;
}

#root_add_customer_togroup .actg-td-desc {
  color: #6b7280;
}

#root_add_customer_togroup .actg-td-sno {
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}

#root_add_customer_togroup .actg-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.75rem;
  border-radius: 9999px;
  background: #f3eef5;
  color: #5b1a62;
  font-size: 1.15rem;
}

#root_add_customer_togroup .actg-empty-icon-error {
  background: #fef2f2;
  color: #dc2626;
}

#root_add_customer_togroup .actg-th-member,
#root_add_customer_togroup .actg-td-member {
  position: sticky;
  right: 0;
  background: #fff;
  box-shadow: -6px 0 8px -6px rgba(5, 5, 61, 0.12);
}

#root_add_customer_togroup thead .actg-th-member {
  background: linear-gradient(90deg, #f8f5fa, #f3eef5);
}

#root_add_customer_togroup .actg-tr:hover .actg-td-member {
  background: #faf8fb;
}

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

@media (min-width: 768px) {
  #root_add_customer_togroup .actg-th-member,
  #root_add_customer_togroup .actg-td-member {
    position: static;
    box-shadow: none;
  }
}

/* ---- Add New Customer modal — field grid alignment (unique anc-*) ---- */
#staffModal .anc-customer-form-row {
  width: 100%;
}

#staffModal .anc-customer-gender-field {
  display: flex;
  flex-direction: column;
}

#staffModal .anc-customer-gender-options {
  display: flex;
  align-items: center;
  min-height: 42px;
  gap: 1rem;
}

@media (max-width: 639px) {
  #staffModal .anc-customer-gender-options {
    min-height: 0;
  }
}

/* ---- Service Request List Feedback button (unique srListFeedback*) ---- */
.srListFeedbackBtn {
  display: inline-block;
  margin-left: 0;
  padding: 0.25rem 0.65rem;
  border: 1px solid #059669;
  border-radius: 0.5rem;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
}

.srListFeedbackBtn:hover {
  background: #d1fae5;
  color: #065f46;
}

/* ---- Service Request List table layout (unique srList*) ---- */
.srListTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.srListTable th,
.srListTable td {
  padding: 0.65rem 0.5rem;
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.srListThRequest,
.srListTdRequest {
  width: 16%;
  text-align: left;
}

.srListTdRequest {
  font-weight: 500;
  color: #4338ca;
  cursor: pointer;
}

.srListThCategory,
.srListTdCategory {
  width: 28%;
  text-align: left;
}

.srListThStatus,
.srListTdStatus {
  width: 12%;
  text-align: left;
}

.srListThAssigned,
.srListTdAssigned {
  width: 24%;
  text-align: left;
}

.srListThView,
.srListTdView {
  width: 8%;
  text-align: center;
}

.srListThFeedback,
.srListTdFeedback {
  width: 12%;
  text-align: center;
}

.srListViewBtn {
  background: none;
  border: none;
  color: #4f46e5;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.srListViewBtn:hover {
  color: #3730a3;
}

.srListFeedbackEmpty {
  color: #9ca3af;
  font-size: 0.875rem;
}

.srListFeedbackSentStatus {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 0.4rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.srListViewFeedbackBtn {
  display: inline-block;
  margin-left: 0;
  padding: 0.25rem 0.65rem;
  border: 1px solid #4f46e5;
  border-radius: 0.5rem;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
}

.srListViewFeedbackBtn:hover {
  background: #e0e7ff;
  color: #3730a3;
}

.srListFeedbackViewOverlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
}

.srListFeedbackViewOverlay.srListFeedbackViewOpen {
  display: flex;
}

.srListFeedbackViewBox {
  width: 100%;
  max-width: 34rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.srListFeedbackViewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.srListFeedbackViewTitleText {
  margin: 0;
  color: #312e81;
  font-size: 1.05rem;
  font-weight: 700;
}

.srListFeedbackViewClose {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.srListFeedbackViewClose:hover {
  color: #374151;
}

.srListFeedbackViewMeta {
  padding: 0.75rem 1.25rem 0.25rem;
}

.srListFeedbackViewMetaTitle {
  color: #111827;
  font-size: 0.95rem;
  font-weight: 600;
}

.srListFeedbackViewMetaService {
  margin-top: 0.2rem;
  color: #6b7280;
  font-size: 0.8125rem;
}

.srListFeedbackViewBody {
  padding: 0.75rem 1.25rem 1rem;
  overflow-y: auto;
}

.srListFeedbackViewItem {
  padding: 0.7rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.srListFeedbackViewItem:last-child {
  border-bottom: none;
}

.srListFeedbackViewQ {
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.srListFeedbackViewA {
  color: #111827;
  font-size: 0.875rem;
  line-height: 1.4;
  word-break: break-word;
}

.srListFeedbackViewEmpty {
  color: #6b7280;
  font-size: 0.875rem;
  text-align: center;
  padding: 1.25rem 0.5rem;
}

.srListFeedbackViewFooter {
  display: flex;
  justify-content: flex-end;
  padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid #f3f4f6;
}

.srListFeedbackViewCloseBtn {
  border: 1px solid #d1d5db;
  border-radius: 0.65rem;
  background: #ffffff;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
}

.srListFeedbackViewCloseBtn:hover {
  background: #f9fafb;
}

/* ---- Company List compact table columns (unique clList*) ---- */
#companyListId.clListTableCompact {
  min-width: 960px;
}

@media (min-width: 1280px) {
  #companyListId.clListTableCompact {
    min-width: 100%;
  }
}

#companyListId .clListCompanyNameHead,
#companyListId .clListCompanyName {
  width: 10.5rem;
  max-width: 10.5rem;
}

#companyListId .clListCompanyName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Company List — company name + category + city stack (unique clListCompanyName*) ---- */
#companyListId .clListCompanyNameCell {
  width: 12.5rem;
  max-width: 14rem;
  vertical-align: top;
}

#companyListId .clListCompanyNameStack {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  line-height: 1.35;
}

#companyListId .clListCompanyNameTitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companyListId .clListCompanyNameMeta {
  font-size: 0.75rem;
  font-weight: 400;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companyListId .clListCompanyNameMetaEmpty {
  color: #d1d5db;
}

#companyListId .clListContactInfo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.35;
  max-width: 12.5rem;
}

#companyListId .clListContactEmail {
  display: block;
  max-width: 12.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companyListId .clListContactPhone {
  display: block;
  white-space: nowrap;
}

#companyListId .clListAdminName {
  display: block;
  white-space: nowrap;
}

#companyListId .clListSubscriptionInfo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.35;
  max-width: 12.5rem;
}

#companyListId .clListSubPlanName {
  display: block;
  max-width: 12.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#companyListId .clListSubDaysRemaining,
#companyListId .clListSubRequestsRemaining {
  display: block;
  white-space: nowrap;
}

#companyListId .clListSubExpired {
  color: #dc2626;
}

#companyListId .clListSubExpiring {
  color: #ca8a04;
}

#companyListId .clListLastLoginHead,
#companyListId .clListLastLoginCell {
  width: 7.5rem;
  max-width: 7.5rem;
  white-space: normal;
}

#companyListId .clListLastLogin {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.3;
}

#companyListId .clListLastLoginDate,
#companyListId .clListLastLoginRel {
  display: block;
  white-space: nowrap;
}

/* Company List — Last Login Date sort toggle (unique clListLastLoginSort*) */
#companyListId .clListLastLoginSortWrap {
  width: 9.25rem;
  max-width: 9.5rem;
}

#companyListId .clListLastLoginHeadInner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#companyListId .clListLastLoginSortBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #fff;
  color: #5b1a62;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

#companyListId .clListLastLoginSortBtn:hover {
  background: #f8f5fa;
  border-color: #d1d5db;
  color: #43124a;
}

#companyListId .clListLastLoginSortBtn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.25);
}

#companyListId .clListLastLoginSortBtn .fa {
  font-size: 0.75rem;
}

/* ================= edit_student_contact (esc) page-specific ================= */
#root_edit_student_contact label.error {
  color: #dc2626;
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
  margin-top: 0.25rem;
}

#root_edit_student_contact input.error,
#root_edit_student_contact select.error {
  border-color: #f97316;
}

.esc-pin-group {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.esc-pin-group .ecc-input {
  flex: 1 1 auto;
}

.esc-pin-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  border: none;
  border-radius: 0.55rem;
  background: #16a34a;
  color: #ffffff;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.esc-pin-search-btn:hover {
  filter: brightness(0.95);
}

.esc-readonly-val {
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.55rem;
  background: #f8fafc;
  color: #334155;
  font-size: 0.875rem;
}

.esc-empty-cell {
  color: #94a3b8;
  font-style: italic;
  text-align: center;
}

.esc-addr-label {
  display: block;
  font-weight: 600;
  color: #5b1a62;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
}

.esc-addr-block {
  line-height: 1.45;
  color: #334155;
}

.esc-need-details {
  margin-top: 0.9rem;
}

/* ---- Company List — Extend Active Subscriptions (unique clListExtend*) ---- */
.clListHeaderActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.clListExtendFeedback {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.clListExtendFeedbackError {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.clListExtendFeedbackSuccess {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.clListExtendFeedback.hidden {
  display: none;
}

/* ---- Company List — Edit Company modal (unique clListEdit*) ---- */
.clListEditCompanyFeedback {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.clListEditCompanyFeedbackError {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.clListEditCompanyFeedbackSuccess {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.clListEditCompanyFeedback.hidden {
  display: none;
}

/* ---- Company List — category/city pencil edit (unique clListCompanyMeta* / clListMetaEdit*) ---- */
#companyListId .clListCompanyMetaRow {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
}

#companyListId .clListCompanyMetaTextWrap {
  flex: 1 1 auto;
  min-width: 0;
}

#companyListId .clListCompanyMetaEditBtn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: #9ca3af;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

#companyListId .clListCompanyMetaEditBtn:hover,
#companyListId .clListCompanyMetaEditBtn:focus {
  color: #1e3a8a;
  background: #eef2ff;
  outline: none;
}

.clListMetaEditFeedback {
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.clListMetaEditFeedbackError {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.clListMetaEditFeedbackSuccess {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.clListMetaEditFeedback.hidden {
  display: none;
}

/* ---- Service request feedback (public fill page) ---- */
#root_service_request_feedback.srf-page,
#root_service_request_feedback .srf-page {
  min-height: 100vh;
  padding: 24px 16px 40px;
  background: linear-gradient(180deg, #f3f6fb 0%, #eef2f7 100%);
  box-sizing: border-box;
}

#root_service_request_feedback .srf-card {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  padding: 24px 22px 28px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

#root_service_request_feedback .srf-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8eef5;
}

#root_service_request_feedback .srf-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

#root_service_request_feedback .srf-meta {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}

#root_service_request_feedback .srf-staff-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

#root_service_request_feedback .srf-staff-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
  background: #e2e8f0;
}

#root_service_request_feedback .srf-staff-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #475569;
}

#root_service_request_feedback .srf-staff-photo-fallback {
  display: none;
}

#root_service_request_feedback .srf-staff-text {
  min-width: 0;
}

#root_service_request_feedback .srf-staff-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 2px;
}

#root_service_request_feedback .srf-staff-name {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

#root_service_request_feedback .srf-subtitle,
#root_service_request_feedback .srf-message {
  font-size: 14px;
  line-height: 1.5;
  color: #475569;
}

#root_service_request_feedback .srf-state-error .srf-title {
  color: #b91c1c;
}

#root_service_request_feedback .srf-state-info .srf-title {
  color: #0f766e;
}

#root_service_request_feedback .srf-question-block {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e2e8f0;
}

#root_service_request_feedback .srf-group-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
}

#root_service_request_feedback .srf-question-text {
  font-size: 15px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 10px;
}

#root_service_request_feedback .srf-question-sub {
  font-weight: 500;
  margin-left: 4px;
}

#root_service_request_feedback .srf-answer-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#root_service_request_feedback .srf-check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  font-size: 14px;
  color: #334155;
  margin: 0;
  font-weight: 500;
}

#root_service_request_feedback .srf-choice-btn {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

#root_service_request_feedback .srf-choice-btn:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

#root_service_request_feedback .srf-choice-selected {
  border-color: #0ea5e9;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

#root_service_request_feedback .srf-textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0f172a;
  box-sizing: border-box;
  resize: vertical;
}

#root_service_request_feedback .srf-textarea:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

#root_service_request_feedback .srf-field-error {
  border-color: #ef4444 !important;
}

#root_service_request_feedback .srf-rating-table {
  width: auto;
  border-collapse: collapse;
}

#root_service_request_feedback .srf-rating-table td {
  text-align: center;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  color: #334155;
}

#root_service_request_feedback .srf-actions {
  margin-top: 20px;
  text-align: center;
}

#root_service_request_feedback .srf-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

#root_service_request_feedback .srf-btn-submit {
  background: #0ea5e9;
  color: #ffffff;
}

#root_service_request_feedback .srf-btn-submit:hover {
  background: #0284c7;
}

#root_service_request_feedback .srf-form-error {
  margin-top: 12px;
  color: #b91c1c;
  font-size: 13px;
  text-align: center;
}

#root_service_request_feedback .srf-empty {
  color: #64748b;
  font-size: 14px;
  padding: 12px 0;
}

@media (max-width: 640px) {
  #root_service_request_feedback .srf-card {
    padding: 18px 14px 22px;
  }

  #root_service_request_feedback .srf-title {
    font-size: 19px;
  }
}

/* ── Staff Dashboard: compact upper hero ── */
.sdash-page-wrap {
  padding-top: 1rem !important;
  padding-bottom: 2.5rem !important;
}

.sdash-hero {
  text-align: center;
  margin-bottom: 0.75rem;
}

.sdash-hero-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}

.sdash-hero-avatar img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  display: block;
}

.sdash-hero-title {
  font-weight: 700;
  margin: 0 0 0.25rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: -0.4px;
  color: #1e1b4b;
}

.sdash-hero-sub {
  margin: 0;
  text-transform: uppercase;
  color: #6b7280;
  font-size: 11px;
  letter-spacing: 2.5px;
}

.sdash-search-wrap {
  max-width: 32rem;
  margin: 0 auto 1.25rem;
}

.sdash-search-glass {
  display: flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
}

.sdash-search-hint {
  text-align: center;
  margin-top: 0.35rem;
  color: #9ca3af;
  font-size: 11px;
}

/* View Invoice — compact S.no column (extra space goes to product name) */
.vin-shell #invoiceInclusivetblId.vin-invoice-items-tbl {
  table-layout: fixed;
}

.vin-shell .vin-invoice-sno-col {
  width: 2.75rem;
  max-width: 3rem;
  white-space: nowrap;
  text-align: center;
}

.vin-shell .vin-invoice-product-col {
  width: auto;
  text-align: left;
  word-break: break-word;
}

.vin-shell .vin-invoice-qty-col {
  width: 3.25rem;
}

.vin-shell .vin-invoice-unit-col {
  width: 6.5rem;
}

.vin-shell .vin-invoice-gst-col {
  width: 3.5rem;
}

.vin-shell .vin-invoice-disc-col {
  width: 4.5rem;
}

.vin-shell .vin-invoice-total-col {
  width: 5.5rem;
}


/* ==========================================================================
   Customer Invoice History page (customer_invoice_history.jsp) — cih-* prefix
   Matches cleaned staff_invoice_report layout; brand colors preserved.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.cih-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.cih-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.cih-pagehead {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e8e0ee;
}

.cih-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.cih-customer-det {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  color: #5b1a62;
  text-align: left !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
}

.cih-cust-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #05053d;
}

.cih-cust-mobile {
  margin-top: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5b1a62;
}

.cih-toolbar {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  border-left: 3px solid #5b1a62;
}

.cih-filter-form {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.cih-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.cih-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.cih-field-action {
  align-items: stretch;
}

.cih-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5b1a62;
}

.cih-label-spacer {
  visibility: hidden;
  user-select: none;
}

.cih-input.form-control,
.cih-shell .cih-input {
  width: 100%;
  height: 2.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #ddd5e3;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  box-shadow: none;
  box-sizing: border-box;
}

.cih-input.form-control:focus,
.cih-shell .cih-input:focus {
  outline: none;
  border-color: #5b1a62;
  box-shadow: 0 0 0 2px rgba(91, 26, 98, 0.12);
}

.cih-search-btn,
.cih-shell .cih-search-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: #16a34a;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: none;
  transition: background 0.12s ease;
}

.cih-search-text {
  display: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.cih-search-btn:hover,
.cih-shell .cih-search-btn.btn:hover {
  background: #15803d;
  color: #fff;
}

.cih-list-section {
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  overflow: hidden;
}

.cih-invoice-list {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 !important;
  background: #fff;
}

.cih-invoice-list .box1 {
  margin: 0;
  border: 1px solid #ebe4f0;
  border-left: 3px solid #5b1a62;
  border-radius: 0.55rem;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cih-invoice-list .box1:hover {
  background: #faf7fb;
  border-color: #d4c4dc;
}

.cih-invoice-list .box-header,
.cih-invoice-list .cih-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  background: transparent;
  align-items: start;
}

.cih-invoice-list .cih-balance {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #4b5563;
}

.cih-invoice-list .paddingClass,
.cih-invoice-list .col-md-2,
.cih-invoice-list .col-md-3,
.cih-invoice-list .col-md-4,
.cih-invoice-list .col-md-12 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.cih-invoice-list .labelClass {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a4a82;
  margin-bottom: 0.15rem;
}

.cih-invoice-list .pClass {
  margin: 0.1rem 0;
  font-size: 0.9rem;
  color: #05053d;
  line-height: 1.35;
  font-weight: 500;
}

.cih-invoice-list .pClass .labelClass {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: 600;
  color: #6b7280;
  margin: 0;
}

.cih-invoice-list .head_title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-start;
}

.cih-invoice-list .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.65rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  box-shadow: none;
  transform: none;
}

.cih-invoice-list .btn:hover {
  transform: none;
  box-shadow: none;
}

.cih-invoice-list .btn-primary {
  background: #f3eef5;
  border-color: #d8c9df;
  color: #5b1a62;
}

.cih-invoice-list .btn-primary:hover {
  background: #5b1a62;
  border-color: #5b1a62;
  color: #fff;
}

.cih-invoice-list .btn-success {
  background: #05053d;
  border-color: #05053d;
  color: #fff;
}

.cih-invoice-list .btn-success:hover {
  background: #1a1a7a;
  border-color: #1a1a7a;
  color: #fff;
}

.cih-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  padding: 2.75rem 1.25rem;
  color: #6b7280;
  background: #fff;
}

.cih-empty[style*="display: block"],
.cih-empty[style*="display:block"],
.cih-empty[align="center"][style*="display: block"],
.cih-empty[align="center"][style*="display:block"] {
  display: flex !important;
}

.cih-empty-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
}

.cih-empty-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.cih-empty::before {
  content: "\f03a";
  font-family: FontAwesome;
  font-size: 1.5rem;
  color: #c4b5c9;
  margin-bottom: 0.35rem;
}

.cih-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

.cih-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.4);
  overflow-y: auto;
}

.cih-modal.cih-modal-open,
.cih-modal.sir-modal-open {
  display: flex !important;
}

body.cih-modal-open-body {
  overflow: hidden;
}

.cih-modal-dialog {
  width: min(30rem, 100%);
  margin: auto;
}

.cih-modal-content {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(5, 5, 61, 0.18);
  overflow: hidden;
  border: 1px solid #e5e0ea;
}

.cih-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #05053d;
}

.cih-modal-header .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-align: left !important;
}

.cih-modal-x {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  opacity: 1;
}

.cih-modal-x:hover {
  color: #fff;
}

.cih-modal-body {
  padding: 1rem;
  max-height: min(70vh, 28rem);
  overflow: auto;
}

.cih-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cih-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.cih-table thead th,
.cih-table .tableHeadClass th {
  background: #f8f5fa !important;
  color: #05053d !important;
  font-weight: 700 !important;
  padding: 0.65rem 0.7rem !important;
  border: 1px solid #ebe4f0 !important;
}

.cih-table td {
  padding: 0.6rem 0.7rem !important;
  border: 1px solid #f0ebf3 !important;
  color: #374151;
}

.cih-table tbody tr:nth-child(even) td {
  background: #faf8fb;
}

body > #ui-datepicker-div.cih-datepicker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10050 !important;
}

#ui-datepicker-div.cih-datepicker.ui-datepicker,
#ui-datepicker-div.cih-datepicker {
  width: 300px;
  background: #ffffff;
  border: 1px solid #e5e0ea;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(5, 5, 61, 0.16);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  max-width: calc(100vw - 1rem);
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 34px;
  line-height: 1.6;
  font-weight: 600;
  color: #05053d;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-title select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #f8f5fa;
  cursor: pointer;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-prev,
#ui-datepicker-div.cih-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3eef5;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.cih-datepicker .ui-datepicker-next { right: 0; }

#ui-datepicker-div.cih-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.cih-datepicker .ui-datepicker-next:hover {
  background: #ebe0f0;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.cih-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  margin-top: -5px;
  border: 5px solid transparent;
  text-indent: 0;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-prev span {
  border-right-color: #5b1a62;
  margin-left: -8px;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-next span {
  border-left-color: #5b1a62;
}

#ui-datepicker-div.cih-datepicker table {
  width: 100%;
  border-collapse: collapse;
}

#ui-datepicker-div.cih-datepicker th {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

#ui-datepicker-div.cih-datepicker td {
  padding: 2px;
}

#ui-datepicker-div.cih-datepicker td span,
#ui-datepicker-div.cih-datepicker td a {
  display: block;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  color: #1e293b;
}

#ui-datepicker-div.cih-datepicker td a:hover {
  background: #f3eef5;
  color: #5b1a62;
}

#ui-datepicker-div.cih-datepicker .ui-state-active,
#ui-datepicker-div.cih-datepicker .ui-state-highlight {
  background: #5b1a62 !important;
  color: #fff !important;
}

#ui-datepicker-div.cih-datepicker .ui-datepicker-today a {
  box-shadow: inset 0 0 0 1px #5b1a62;
}

@media (min-width: 720px) {
  .cih-title {
    font-size: 1.6rem !important;
  }

  .cih-filter-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
  }

  .cih-field-action {
    width: auto;
  }

  .cih-invoice-list .box-header,
  .cih-invoice-list .cih-card-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
    align-items: center;
  }

  .cih-invoice-list .head_title,
  .cih-invoice-list .cih-card-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 719px) {
  .cih-wrap {
    width: calc(100% - 1.25rem);
  }

  .cih-shell {
    padding-top: 1rem;
  }

  .cih-title {
    font-size: 1.3rem !important;
  }

  .cih-toolbar {
    padding: 0.75rem;
  }

  .cih-label-spacer {
    display: none;
  }

  .cih-search-btn,
  .cih-shell .cih-search-btn.btn {
    width: 100%;
    min-width: 100%;
    height: 2.5rem;
  }

  .cih-search-text {
    display: inline;
  }

  .cih-customer-det {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* ==========================================================================
   Customer Estimate History page (customer_estimate_history.jsp) — ceh-* prefix
   Matches customer_invoice_history (cih-*) layout; brand colors preserved.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.ceh-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.ceh-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.ceh-pagehead {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e8e0ee;
}

.ceh-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.ceh-list-section {
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  overflow: hidden;
}

.ceh-estimate-list {
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 !important;
  background: #fff;
}

.ceh-estimate-list .box,
.ceh-estimate-list .ceh-card {
  margin: 0;
  border: 1px solid #ebe4f0;
  border-left: 3px solid #5b1a62;
  border-radius: 0.55rem;
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ceh-estimate-list .box:hover,
.ceh-estimate-list .ceh-card:hover {
  background: #faf7fb;
  border-color: #d4c4dc;
}

.ceh-estimate-list .box-header,
.ceh-estimate-list .ceh-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  background: transparent;
  align-items: start;
}

.ceh-estimate-list .paddingClass,
.ceh-estimate-list .col-md-2,
.ceh-estimate-list .col-md-3,
.ceh-estimate-list .col-md-4,
.ceh-estimate-list .col-md-12 {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

.ceh-estimate-list .labelClass {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a4a82;
  margin-bottom: 0.15rem;
}

.ceh-estimate-list .pClass {
  margin: 0.1rem 0;
  font-size: 0.9rem;
  color: #05053d;
  line-height: 1.35;
  font-weight: 500;
}

.ceh-estimate-list .pClass .labelClass {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: 600;
  color: #6b7280;
  margin: 0;
}

.ceh-estimate-list .head_title,
.ceh-estimate-list .ceh-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-start;
}

.ceh-estimate-list .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.15rem;
  height: 2.35rem;
  padding: 0 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  box-shadow: none;
  transform: none;
}

.ceh-estimate-list .btn:hover {
  transform: none;
  box-shadow: none;
}

.ceh-estimate-list .btn:focus-visible {
  outline: 2px solid #5b1a62;
  outline-offset: 2px;
}

.ceh-estimate-list .btn-success {
  background: #05053d;
  border-color: #05053d;
  color: #fff;
}

.ceh-estimate-list .btn-success:hover {
  background: #1a1a7a;
  border-color: #1a1a7a;
  color: #fff;
}

.ceh-estimate-list .hrClass {
  display: none;
}

.ceh-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  min-height: 12rem;
  padding: 2.75rem 1.25rem;
  color: #6b7280;
  background: #fff;
}

.ceh-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.35rem;
  border-radius: 9999px;
  background: #f3eef5;
  color: #5b1a62;
  font-size: 1.15rem;
}

.ceh-empty[style*="display: block"],
.ceh-empty[style*="display:block"],
.ceh-empty[align="center"][style*="display: block"],
.ceh-empty[align="center"][style*="display:block"] {
  display: flex !important;
}

.ceh-empty-title {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #05053d !important;
}

.ceh-empty-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.ceh-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

@media (min-width: 720px) {
  .ceh-title {
    font-size: 1.6rem !important;
  }

  .ceh-estimate-list .box-header,
  .ceh-estimate-list .ceh-card-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.2fr) auto;
    align-items: center;
  }

  .ceh-estimate-list .head_title,
  .ceh-estimate-list .ceh-card-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 719px) {
  .ceh-wrap {
    width: calc(100% - 1.25rem);
  }

  .ceh-shell {
    padding-top: 1rem;
  }

  .ceh-title {
    font-size: 1.3rem !important;
  }

  .ceh-estimate-list .btn-success {
    width: 100%;
  }
}

/* ==========================================================================
   Customer Group List page (customer_group_list.jsp) — cgl-* prefix
   Clean card grid; brand colors #5b1a62 / #05053d / #f8f5fa.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.cgl-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 2.5rem;
  background: #f8f5fa;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.cgl-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.cgl-pagehead {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #e8e0ee;
}

.cgl-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #05053d !important;
  text-align: left !important;
}

.cgl-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
}

.cgl-list-section {
  background: #fff;
  border: 1px solid #e5e0ea;
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 0.85rem;
}

.cgl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}

.cgl-grid .cgl-card,
.cgl-grid .teacBorders {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #ebe4f0;
  border-left: 3px solid #5b1a62;
  border-radius: 0.55rem;
  background: #fff;
  box-shadow: none;
  display: block;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cgl-grid .cgl-card:hover,
.cgl-grid .teacBorders:hover {
  background: #faf7fb;
  border-color: #d4c4dc;
}

.cgl-card-inner,
.cgl-grid .padClass {
  width: 100% !important;
  float: none !important;
  padding: 0.9rem 1rem !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.cgl-card-name,
.cgl-grid .textcolor {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 0 0.45rem !important;
  font-size: 0.95rem;
  font-weight: 600;
  color: #05053d;
  line-height: 1.4;
  border: none !important;
}

.cgl-card-name b,
.cgl-card-desc b {
  color: #5b1a62;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
}

.cgl-card-desc,
.cgl-grid .blackCls {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.45;
  border: none !important;
}

.cgl-card-rule,
.cgl-grid .teacDots:last-child {
  display: none !important;
}

.cgl-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 10rem;
  text-align: center;
  padding: 2.75rem 1.25rem;
  color: #6b7280;
  border: 1px dashed #e5e0ea;
  border-radius: 0.65rem;
  background: #faf8fb;
}

.cgl-empty[style*="display: block"],
.cgl-empty[style*="display:block"] {
  display: flex !important;
}

.cgl-empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #05053d;
}

.cgl-empty-hint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.cgl-error {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

@media (min-width: 640px) {
  .cgl-title {
    font-size: 1.6rem !important;
  }

  .cgl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cgl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .cgl-wrap {
    width: calc(100% - 1.25rem);
  }

  .cgl-shell {
    padding-top: 1rem;
  }

  .cgl-title {
    font-size: 1.3rem !important;
  }

  .cgl-list-section {
    padding: 0.65rem;
  }
}

/* ==========================================================================
   Customer Appointment Service page (customer_appointment_service.jsp) — cas-* prefix
   Tailwind-aligned staff/service booking cards; office brand colors.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.cas-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.5rem 0 3.5rem;
  background: #f4f6fb;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
  position: relative;
}

.cas-wrap {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  box-sizing: border-box;
}

.cas-pagehead {
  margin-bottom: 1.15rem;
  padding-bottom: 0.95rem;
  border-bottom: 2px solid #e0e7ff;
}

.cas-pagehead-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}

@media (min-width: 720px) {
  .cas-pagehead-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.cas-pagehead-text {
  min-width: 0;
  flex: 1 1 auto;
}

.cas-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6366f1;
}

.cas-title {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #05053d !important;
  text-align: left !important;
}

.cas-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.45;
}

.cas-pagehead-actions {
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 720px) {
  .cas-pagehead-actions {
    width: auto;
  }
}

.cas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border: none;
  border-radius: 0.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 2px rgba(5, 5, 61, 0.12);
  line-height: 1.2;
}

.cas-btn:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.cas-btn:focus {
  outline: 2px solid rgba(67, 56, 202, 0.35);
  outline-offset: 2px;
}

.cas-btn-success {
  background: linear-gradient(90deg, #059669 0%, #047857 100%);
  color: #fff;
}

.cas-btn-primary {
  background: linear-gradient(90deg, #4338ca 0%, #3730a3 100%);
  color: #fff;
}

.cas-list-section {
  background: transparent;
}

.cas-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.cas-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 10rem;
  padding: 2rem 1.25rem;
  text-align: center;
  color: #6b7280;
  background: #fff;
  border: 1px dashed #c7d2fe;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cas-empty i {
  font-size: 1.5rem;
  color: #6366f1;
  margin-bottom: 0.35rem;
}

.cas-empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #05053d;
}

.cas-empty-hint {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.cas-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cas-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 18px rgba(67, 56, 202, 0.08);
}

@media (min-width: 768px) {
  .cas-card {
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.15rem 1.25rem;
  }
}

.cas-profile {
  width: 100%;
  text-align: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .cas-profile {
    width: 12rem;
  }
}

.cas-photo-wrap {
  display: flex;
  justify-content: center;
}

.cas-photo {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 0.75rem;
  object-fit: cover;
  border: 3px solid #4338ca;
  background: #eef2ff;
}

.cas-profile-details {
  margin-top: 0.65rem;
}

.cas-profile-name h2 {
  margin: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  word-break: break-word;
  line-height: 1.35;
}

.cas-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.45rem;
}

.cas-meta {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  line-height: 1.35;
  word-break: break-word;
}

.cas-services {
  flex: 1;
  min-width: 0;
  background: #eef2ff;
  border-left: 4px solid #4338ca;
  border-radius: 0.65rem;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
}

.cas-services-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #312e81;
}

.cas-services-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1rem;
  flex: 1;
}

.cas-service-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid #e0e7ff;
  font-size: 0.875rem;
  color: #1f2937;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cas-service-item:hover {
  border-color: #a5b4fc;
  background: #f8fafc;
}

.cas-service-item input[type="checkbox"] {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  accent-color: #4338ca;
  flex-shrink: 0;
  cursor: pointer;
}

.cas-service-item span {
  line-height: 1.4;
  word-break: break-word;
}

.cas-no-services {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px dashed #c7d2fe;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 600;
}

.cas-book-wrap {
  margin-top: auto;
  text-align: center;
}

.cas-book-wrap .cas-btn-primary {
  min-width: 11.5rem;
}

@media (min-width: 768px) {
  .cas-book-wrap {
    text-align: right;
  }
}

.cas-service-item:focus-within {
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}

.cas-card:focus-within {
  border-color: #a5b4fc;
}

.cas-scroll-top {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(5, 5, 61, 0.25);
}

.cas-scroll-top.cas-scroll-top--show,
.cas-scroll-top.show {
  display: inline-flex;
}

.cas-scroll-top-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 767px) {
  .cas-services {
    border-left: none;
    border-top: 4px solid #4338ca;
  }

  .cas-book-wrap .cas-btn,
  .cas-pagehead-actions .cas-btn {
    width: 100%;
  }

  .cas-wrap {
    width: calc(100% - 1.25rem);
  }

  .cas-shell {
    padding-top: 1rem;
  }

  .cas-title {
    font-size: 1.3rem !important;
  }
}

@media (min-width: 720px) {
  .cas-title {
    font-size: 1.6rem !important;
  }
}

/* =============================================================================
   Customer Order Details page (customer_order_details.jsp) — cod-* prefix
   Matches customer_estimate_history / invoice_history layout; brand colors preserved.
   ============================================================================= */

.cod-shell {
  min-height: calc(100vh - 4rem);
  background: #f3f4f6;
  padding: 1.25rem 1rem 2.5rem;
  box-sizing: border-box;
}

.cod-wrap {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.cod-pagehead {
  margin-bottom: 1.25rem;
  text-align: center;
}

.cod-title {
  margin: 0;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #312e81 !important;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.cod-list-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cod-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  box-shadow: 0 4px 14px rgba(67, 56, 202, 0.08);
}

.cod-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: #fff;
}

.cod-table thead th,
.cod-table .tableHeadClass th {
  background: linear-gradient(90deg, #4338ca 0%, #4f46e5 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.85rem 0.75rem;
  text-align: center;
  white-space: nowrap;
  border: none;
}

.cod-table tbody td,
.cod-table .cod-row td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  color: #374151;
  font-size: 0.9rem;
  background: #fff;
}

.cod-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.cod-table tbody tr:hover td {
  background: #eef2ff;
}

.cod-td-sno {
  width: 4rem;
  font-weight: 600;
  color: #4338ca;
}

.cod-product-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
}

.cod-product-image {
  flex: 0 0 auto;
}

.cod-product-img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 0.65rem;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.cod-product-meta {
  flex: 1 1 10rem;
  min-width: 0;
}

.cod-product-name {
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.cod-product-name a {
  color: #1e3a8a;
  text-decoration: none;
  font-size: 0.95rem;
}

.cod-product-name a:hover {
  color: #4338ca;
  text-decoration: underline;
}

.cod-qty {
  font-size: 0.85rem;
  color: #4b5563;
}

.cod-qty .textColor {
  color: #6366f1;
  font-weight: 600;
}

.cod-more-products {
  flex: 1 1 100%;
  text-align: center;
  color: #2563eb;
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 0.15rem;
}

.cod-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}

.cod-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cod-info-value {
  font-size: 0.9rem;
  color: #1f2937;
  word-break: break-word;
}

.cod-status {
  color: #4338ca;
}

.cod-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  line-height: 1.4;
}

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

.cod-status-pending {
  background: #fef3c7;
  color: #92400e;
}

.cod-status-other {
  background: #e0e7ff;
  color: #3730a3;
}

.cod-td-amount {
  white-space: nowrap;
  font-weight: 600;
}

.cod-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #065f46;
  font-size: 0.95rem;
}

.cod-td-view {
  width: 7rem;
}

.cod-view-btn,
.cod-shell .cod-view-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff !important;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cod-view-btn:hover,
.cod-shell .cod-view-btn.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.45);
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff !important;
}

.cod-empty {
  display: none;
  background: #fff;
  border: 1px dashed #c7d2fe;
  border-radius: 0.875rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(67, 56, 202, 0.05);
}

.cod-empty[style*="display: block"],
.cod-empty[style*="display:block"],
.cod-empty[align="center"][style*="display: block"],
.cod-empty[align="center"][style*="display:block"] {
  display: block !important;
}

.cod-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #312e81;
}

.cod-empty-hint {
  margin: 0;
  font-size: 0.88rem;
  color: #6b7280;
}

.cod-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
}

@media (max-width: 767px) {
  .cod-shell {
    padding: 1rem 0.75rem 2rem;
  }

  .cod-title {
    font-size: 1.3rem !important;
  }

  .cod-table-wrap {
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .cod-table {
    min-width: 0;
    width: 100%;
  }

  .cod-table thead {
    display: none;
  }

  .cod-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .cod-table tbody tr.cod-row {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    box-shadow: 0 4px 14px rgba(67, 56, 202, 0.08);
    padding: 0.85rem 0.9rem;
    overflow: hidden;
  }

  .cod-table tbody tr.cod-row td,
  .cod-table tbody tr:nth-child(even) td,
  .cod-table tbody tr:hover td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0;
    border-bottom: 1px dashed #e5e7eb;
    background: transparent !important;
    text-align: right;
  }

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

  .cod-table tbody tr.cod-row td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
    text-align: left;
  }

  .cod-td-product {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  .cod-td-product::before {
    margin-bottom: 0.35rem;
  }

  .cod-td-info {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
  }

  .cod-product-img {
    width: 72px;
    height: 72px;
  }

  .cod-view-btn,
  .cod-shell .cod-view-btn.btn {
    width: 100%;
  }
}

/* =====================================================================
 * Staff Menu Access page (staff_menu_access.jsp) -> sma-* prefix
 * ===================================================================== */
.sma-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.sma-header {
  margin-bottom: 1.25rem;
}

.sma-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sma-title i {
  color: #5b1a62;
}

.sma-subtitle {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #64748b;
}

.sma-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.sma-state {
  padding: 2rem 1.25rem;
  text-align: center;
  color: #64748b;
  font-size: 0.95rem;
}

.sma-state-error {
  color: #b91c1c;
}

.sma-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.sma-table {
  width: 100%;
  border-collapse: collapse;
}

.sma-table thead {
  background: #f8fafc;
}

.sma-table th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.sma-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
  font-size: 0.92rem;
}

.sma-table tbody tr:last-child td {
  border-bottom: 0;
}

.sma-table tbody tr:hover {
  background: #faf7fb;
}

.sma-table tbody tr.sma-row-busy {
  opacity: 0.65;
}

.sma-menu-name {
  font-weight: 600;
  color: #0f172a;
}

.sma-menu-code {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

.sma-col-access {
  width: 160px;
  text-align: center;
  white-space: nowrap;
}

.sma-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  vertical-align: middle;
  margin: 0 0.45rem 0 0;
}

.sma-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sma-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.sma-toggle-slider:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

.sma-toggle-input:checked + .sma-toggle-slider {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
}

.sma-toggle-input:checked + .sma-toggle-slider:before {
  transform: translateX(20px);
}

.sma-toggle-input:disabled + .sma-toggle-slider {
  cursor: not-allowed;
  opacity: 0.7;
}

.sma-status {
  display: inline-block;
  min-width: 28px;
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
}

.sma-status-on {
  color: #166534;
}

.sma-status-off {
  color: #94a3b8;
}

@media (max-width: 640px) {
  .sma-page {
    padding: 1rem 0.75rem 2rem;
  }

  .sma-table th,
  .sma-table td {
    padding: 0.75rem 0.7rem;
  }

  .sma-col-access {
    width: 120px;
  }
}

/* ---- Service request feedback: Google Forms–inspired layout (srf-gf-*) ---- */
#root_service_request_feedback .srf-gf-page {
  --srf-gf-blue: #1a73e8;
  --srf-gf-blue-dark: #1557b0;
  --srf-gf-purple: #673ab7;
  --srf-gf-surface: #ffffff;
  --srf-gf-text: #202124;
  --srf-gf-muted: #5f6368;
  --srf-gf-border: #dadce0;
  --srf-gf-bg: #f0ebf8;
  --srf-gf-err: #d93025;
  --srf-gf-ok: #188038;
  min-height: 100vh;
  padding: 28px 16px 48px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(103, 58, 183, 0.12), transparent 55%),
    linear-gradient(180deg, #f8f6fc 0%, #f0ebf8 45%, #ebe7f3 100%);
  font-family: "Google Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--srf-gf-text);
}

#root_service_request_feedback .srf-gf-shell {
  max-width: 640px;
  margin: 0 auto;
}

#root_service_request_feedback .srf-gf-card {
  background: var(--srf-gf-surface);
  border: 1px solid var(--srf-gf-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.06);
  margin-bottom: 12px;
  overflow: hidden;
  animation: srfGfFadeIn 0.35s ease both;
}

@keyframes srfGfFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#root_service_request_feedback .srf-gf-card-header {
  position: relative;
  margin-bottom: 12px;
}

#root_service_request_feedback .srf-gf-accent {
  height: 10px;
  background: linear-gradient(90deg, var(--srf-gf-purple) 0%, #7e57c2 55%, var(--srf-gf-blue) 100%);
}

#root_service_request_feedback .srf-gf-header-body {
  padding: 22px 24px 20px;
}

#root_service_request_feedback .srf-gf-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

#root_service_request_feedback .srf-gf-brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75% 100%);
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.2);
}

#root_service_request_feedback .srf-gf-brand-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--srf-gf-muted);
  letter-spacing: 0.01em;
}

#root_service_request_feedback .srf-gf-title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--srf-gf-text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

#root_service_request_feedback .srf-gf-meta {
  font-size: 14px;
  color: var(--srf-gf-muted);
  margin-bottom: 14px;
}

#root_service_request_feedback .srf-gf-meta-id {
  font-weight: 600;
  color: var(--srf-gf-purple);
}

#root_service_request_feedback .srf-gf-staff {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 8px;
}

#root_service_request_feedback .srf-gf-staff-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e8eaed;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}

#root_service_request_feedback .srf-gf-staff-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(145deg, #7e57c2, var(--srf-gf-blue));
}

#root_service_request_feedback .srf-gf-staff-photo-fallback {
  display: none;
}

#root_service_request_feedback .srf-gf-staff-text {
  min-width: 0;
}

#root_service_request_feedback .srf-gf-staff-label {
  font-size: 12px;
  color: var(--srf-gf-muted);
  margin-bottom: 2px;
}

#root_service_request_feedback .srf-gf-staff-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--srf-gf-text);
  word-break: break-word;
}

#root_service_request_feedback .srf-gf-subtitle,
#root_service_request_feedback .srf-gf-message {
  font-size: 14px;
  line-height: 1.55;
  color: var(--srf-gf-muted);
}

#root_service_request_feedback .srf-gf-required-hint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--srf-gf-err);
}

#root_service_request_feedback .srf-gf-form {
  margin: 0;
}

#root_service_request_feedback .srf-gf-questions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#root_service_request_feedback .srf-gf-qcard {
  padding: 22px 24px 20px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#root_service_request_feedback .srf-gf-qcard:hover {
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.12), 0 2px 6px 2px rgba(60, 64, 67, 0.08);
}

#root_service_request_feedback .srf-gf-qcard-err {
  border-color: var(--srf-gf-err);
  box-shadow: 0 0 0 1px var(--srf-gf-err);
}

#root_service_request_feedback .srf-gf-group-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--srf-gf-text);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f3f4;
}

#root_service_request_feedback .srf-gf-qtext {
  font-size: 16px;
  font-weight: 400;
  color: var(--srf-gf-text);
  margin-bottom: 16px;
  line-height: 1.4;
}

#root_service_request_feedback .srf-gf-qtext-sub {
  margin-top: 12px;
  font-size: 15px;
}

#root_service_request_feedback .srf-gf-req {
  color: var(--srf-gf-err);
  font-weight: 500;
}

#root_service_request_feedback .srf-gf-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

#root_service_request_feedback .srf-gf-answer-chips {
  gap: 10px;
}

#root_service_request_feedback .srf-gf-chip {
  appearance: none;
  border: 1px solid var(--srf-gf-border);
  background: #ffffff;
  color: var(--srf-gf-text);
  border-radius: 18px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#root_service_request_feedback .srf-gf-chip:hover {
  background: #f8f9fa;
  border-color: #bdc1c6;
}

#root_service_request_feedback .srf-gf-chip.srf-gf-chip-on,
#root_service_request_feedback .srf-gf-chip.srf-choice-selected {
  background: #e8f0fe;
  border-color: var(--srf-gf-blue);
  color: var(--srf-gf-blue);
  box-shadow: 0 0 0 1px var(--srf-gf-blue);
}

#root_service_request_feedback .srf-gf-check {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 8px 4px;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  color: var(--srf-gf-text);
}

#root_service_request_feedback .srf-gf-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#root_service_request_feedback .srf-gf-check-box {
  width: 18px;
  height: 18px;
  border: 2px solid #5f6368;
  border-radius: 2px;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#root_service_request_feedback .srf-gf-check-input:checked + .srf-gf-check-box {
  background: var(--srf-gf-blue);
  border-color: var(--srf-gf-blue);
}

#root_service_request_feedback .srf-gf-check-input:checked + .srf-gf-check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#root_service_request_feedback .srf-gf-check-label {
  font-size: 14px;
  line-height: 1.4;
}

#root_service_request_feedback .srf-gf-textarea {
  width: 100%;
  min-height: 96px;
  border: none;
  border-bottom: 1px solid var(--srf-gf-border);
  border-radius: 0;
  padding: 8px 2px 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--srf-gf-text);
  background: transparent;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#root_service_request_feedback .srf-gf-textarea:hover {
  border-bottom-color: #202124;
}

#root_service_request_feedback .srf-gf-textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--srf-gf-purple);
  padding-bottom: 9px;
}

#root_service_request_feedback .srf-gf-textarea.srf-gf-field-err,
#root_service_request_feedback .srf-gf-textarea.srf-field-error {
  border-bottom-color: var(--srf-gf-err);
}

#root_service_request_feedback .srf-gf-scale {
  width: 100%;
}

#root_service_request_feedback .srf-gf-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--srf-gf-muted);
  margin-bottom: 10px;
  padding: 0 4px;
}

#root_service_request_feedback .srf-gf-scale-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

#root_service_request_feedback .srf-gf-scale-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

#root_service_request_feedback .srf-gf-scale-opt:hover {
  background: #f8f9fa;
}

#root_service_request_feedback .srf-gf-scale-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#root_service_request_feedback .srf-gf-scale-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--srf-gf-muted);
}

#root_service_request_feedback .srf-gf-scale-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #5f6368;
  box-sizing: border-box;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#root_service_request_feedback .srf-gf-scale-input:checked + .srf-gf-scale-num {
  color: var(--srf-gf-purple);
  font-weight: 600;
}

#root_service_request_feedback .srf-gf-scale-input:checked + .srf-gf-scale-num + .srf-gf-scale-dot,
#root_service_request_feedback .srf-gf-scale-opt:has(.srf-gf-scale-input:checked) .srf-gf-scale-dot {
  border-color: var(--srf-gf-purple);
  background: var(--srf-gf-purple);
  box-shadow: 0 0 0 4px rgba(103, 58, 183, 0.18);
}

#root_service_request_feedback .srf-gf-scale-opt:has(.srf-gf-scale-input:checked) .srf-gf-scale-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #ffffff;
}

#root_service_request_feedback .srf-gf-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  padding: 4px 4px 8px;
}

#root_service_request_feedback .srf-gf-btn-submit {
  appearance: none;
  border: none;
  background: var(--srf-gf-purple);
  color: #ffffff;
  border-radius: 4px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

#root_service_request_feedback .srf-gf-btn-submit:hover {
  background: #5e35b1;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.35), 0 4px 8px rgba(103, 58, 183, 0.25);
}

#root_service_request_feedback .srf-gf-btn-submit:active {
  transform: translateY(1px);
}

#root_service_request_feedback .srf-gf-privacy {
  font-size: 12px;
  color: var(--srf-gf-muted);
}

#root_service_request_feedback .srf-gf-form-error {
  margin-top: 8px;
  padding: 12px 16px;
  background: #fce8e6;
  color: var(--srf-gf-err);
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
}

#root_service_request_feedback .srf-gf-empty {
  color: var(--srf-gf-muted);
  font-size: 14px;
}

#root_service_request_feedback .srf-gf-card-state {
  text-align: center;
  padding: 40px 28px 36px;
}

#root_service_request_feedback .srf-gf-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #ffffff;
}

#root_service_request_feedback .srf-gf-icon-ok {
  background: var(--srf-gf-ok);
}

#root_service_request_feedback .srf-gf-icon-error {
  background: var(--srf-gf-err);
}

#root_service_request_feedback .srf-gf-state-ok .srf-gf-title {
  color: var(--srf-gf-ok);
  font-size: 24px;
}

#root_service_request_feedback .srf-gf-state-error .srf-gf-title {
  color: var(--srf-gf-err);
  font-size: 24px;
}

#root_service_request_feedback .srf-gf-loading-dot {
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid #e8eaed;
  border-top-color: var(--srf-gf-purple);
  animation: srfGfSpin 0.8s linear infinite;
}

@keyframes srfGfSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  #root_service_request_feedback .srf-gf-page {
    padding: 12px 10px 32px;
  }

  #root_service_request_feedback .srf-gf-header-body,
  #root_service_request_feedback .srf-gf-qcard {
    padding: 18px 16px 16px;
  }

  #root_service_request_feedback .srf-gf-title {
    font-size: 22px;
  }

  #root_service_request_feedback .srf-gf-scale-row {
    gap: 2px;
  }

  #root_service_request_feedback .srf-gf-scale-opt {
    padding: 6px 2px;
  }

  #root_service_request_feedback .srf-gf-actions {
    align-items: stretch;
  }

  #root_service_request_feedback .srf-gf-btn-submit {
    width: 100%;
    text-align: center;
  }
}

/* ---- Service request feedback: separate question cards polish (srf-gf-qsep-*) ---- */
#root_service_request_feedback .srf-gf-questions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#root_service_request_feedback .srf-gf-qcard {
  margin-bottom: 0;
  padding: 24px 24px 22px;
}

#root_service_request_feedback .srf-gf-qcard .srf-gf-qtext {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}

#root_service_request_feedback .srf-gf-footer-card {
  margin-top: 0;
  padding: 18px 24px;
}

#root_service_request_feedback .srf-gf-footer-card .srf-gf-actions {
  margin-top: 0;
  padding: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

#root_service_request_feedback .srf-gf-answer-scale {
  width: 100%;
  display: block;
}

#root_service_request_feedback .srf-gf-scale {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: end;
  gap: 8px;
  width: 100%;
  padding: 4px 0 2px;
}

#root_service_request_feedback .srf-gf-scale-edge {
  font-size: 12px;
  line-height: 1.2;
  color: #5f6368;
  padding-bottom: 6px;
  text-align: center;
}

#root_service_request_feedback .srf-gf-scale-edge-low {
  text-align: left;
}

#root_service_request_feedback .srf-gf-scale-edge-high {
  text-align: right;
}

#root_service_request_feedback .srf-gf-scale-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
}

#root_service_request_feedback .srf-gf-scale-opt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  padding: 10px 4px;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.12s ease;
}

#root_service_request_feedback .srf-gf-scale-opt:hover {
  background: #f8f9fa;
}

#root_service_request_feedback .srf-gf-scale-opt:active {
  transform: scale(0.97);
}

#root_service_request_feedback .srf-gf-scale-num {
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
  line-height: 1;
}

#root_service_request_feedback .srf-gf-scale-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

#root_service_request_feedback .srf-gf-scale-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #5f6368;
  box-sizing: border-box;
  position: relative;
  background: #ffffff;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#root_service_request_feedback .srf-gf-scale-input:checked + .srf-gf-scale-dot {
  border-color: #673ab7;
  background: #673ab7;
  box-shadow: 0 0 0 4px rgba(103, 58, 183, 0.18);
}

#root_service_request_feedback .srf-gf-scale-input:checked + .srf-gf-scale-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #ffffff;
}

#root_service_request_feedback .srf-gf-scale-opt:has(.srf-gf-scale-input:checked) {
  background: #f3e8fd;
}

#root_service_request_feedback .srf-gf-scale-opt:has(.srf-gf-scale-input:checked) .srf-gf-scale-num {
  color: #673ab7;
  font-weight: 600;
}

#root_service_request_feedback .srf-gf-answer-text {
  width: 100%;
  display: block;
}

#root_service_request_feedback .srf-gf-textarea-wrap {
  width: 100%;
  border: 1px solid #dadce0;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px 14px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#root_service_request_feedback .srf-gf-textarea-wrap:hover {
  border-color: #bdc1c6;
}

#root_service_request_feedback .srf-gf-textarea-wrap:focus-within {
  border-color: #673ab7;
  box-shadow: 0 0 0 2px rgba(103, 58, 183, 0.18);
}

#root_service_request_feedback .srf-gf-answer-text .srf-gf-textarea {
  width: 100%;
  min-height: 110px;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  resize: vertical;
  font-size: 15px;
  line-height: 1.5;
}

#root_service_request_feedback .srf-gf-answer-text .srf-gf-textarea:hover,
#root_service_request_feedback .srf-gf-answer-text .srf-gf-textarea:focus {
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0;
}

#root_service_request_feedback .srf-gf-answer-text .srf-gf-textarea.srf-gf-field-err,
#root_service_request_feedback .srf-gf-answer-text .srf-gf-textarea.srf-field-error {
  border: none;
}

#root_service_request_feedback .srf-gf-qcard-err .srf-gf-textarea-wrap {
  border-color: #d93025;
  box-shadow: 0 0 0 1px #d93025;
}

#root_service_request_feedback .srf-gf-qcard-rating-scale .srf-gf-answer,
#root_service_request_feedback .srf-gf-qcard-open-ended-questions .srf-gf-answer {
  width: 100%;
}

#root_service_request_feedback .srf-gf-form-error {
  margin-top: 12px;
  width: 100%;
}

@media (max-width: 640px) {
  #root_service_request_feedback .srf-gf-questions {
    gap: 10px;
  }

  #root_service_request_feedback .srf-gf-qcard,
  #root_service_request_feedback .srf-gf-footer-card {
    padding: 18px 16px;
  }

  #root_service_request_feedback .srf-gf-scale {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #root_service_request_feedback .srf-gf-scale-edge {
    display: none;
  }

  #root_service_request_feedback .srf-gf-scale-row {
    order: 1;
  }

  #root_service_request_feedback .srf-gf-scale::before,
  #root_service_request_feedback .srf-gf-scale::after {
    content: none;
  }

  #root_service_request_feedback .srf-gf-footer-card .srf-gf-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #root_service_request_feedback .srf-gf-footer-card .srf-gf-btn-submit {
    width: 100%;
  }
}

/* ---- Survey Report results (ho-sp-rpt-*) — user-friendly cards + bars ---- */
#root_survey_profile .ho-sp-rpt-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#root_survey_profile .ho-sp-rpt-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 1.1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

#root_survey_profile .ho-sp-rpt-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 7rem;
}

#root_survey_profile .ho-sp-rpt-summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}

#root_survey_profile .ho-sp-rpt-summary-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

#root_survey_profile .ho-sp-rpt-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.05rem 1.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

#root_survey_profile .ho-sp-rpt-group-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #eef2f7;
}

#root_survey_profile .ho-sp-rpt-group-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #4338ca;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

#root_survey_profile .ho-sp-rpt-group-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}

#root_survey_profile .ho-sp-rpt-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#root_survey_profile .ho-sp-rpt-q-card {
  padding: 0.95rem 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_survey_profile .ho-sp-rpt-group .ho-sp-rpt-q-card {
  background: #fafbfc;
}

#root_survey_profile .ho-sp-rpt-q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
}

#root_survey_profile .ho-sp-rpt-q-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1 1 14rem;
  min-width: 0;
}

#root_survey_profile .ho-sp-rpt-q-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.35rem;
  border-radius: 8px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 0.78rem;
  font-weight: 700;
}

#root_survey_profile .ho-sp-rpt-q-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.4;
  word-break: break-word;
}

#root_survey_profile .ho-sp-rpt-q-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
}

#root_survey_profile .ho-sp-rpt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

#root_survey_profile .ho-sp-rpt-badge-type {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

#root_survey_profile .ho-sp-rpt-badge-participants {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

#root_survey_profile .ho-sp-rpt-q-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#root_survey_profile .ho-sp-rpt-bar-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#root_survey_profile .ho-sp-rpt-bar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

#root_survey_profile .ho-sp-rpt-bar-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
}

#root_survey_profile .ho-sp-rpt-bar-stats {
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
}

#root_survey_profile .ho-sp-rpt-bar-pct {
  font-weight: 500;
  color: #64748b;
}

#root_survey_profile .ho-sp-rpt-bar-track {
  width: 100%;
  height: 0.55rem;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

#root_survey_profile .ho-sp-rpt-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
  min-width: 0;
  transition: width 0.25s ease;
}

#root_survey_profile .ho-sp-rpt-rating-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#root_survey_profile .ho-sp-rpt-comments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#root_survey_profile .ho-sp-rpt-comment {
  margin: 0;
  padding: 0.65rem 0.8rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #6366f1;
  border-radius: 8px;
  color: #1e293b;
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}

#root_survey_profile .ho-sp-rpt-empty-ans {
  padding: 0.55rem 0.15rem;
  color: #94a3b8;
  font-size: 0.88rem;
  font-style: italic;
}

@media print {
  #root_survey_profile .ho-sp-rpt-summary,
  #root_survey_profile .ho-sp-rpt-group,
  #root_survey_profile .ho-sp-rpt-q-card {
    box-shadow: none;
    break-inside: avoid;
  }

  #root_survey_profile .ho-sp-rpt-bar-fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (max-width: 639px) {
  #root_survey_profile .ho-sp-rpt-q-head {
    flex-direction: column;
  }

  #root_survey_profile .ho-sp-rpt-q-meta {
    width: 100%;
  }

  #root_survey_profile .ho-sp-rpt-summary {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ---- Office customer profile (scoped, new rules only) ---- */
#root_customer_profile #sidebar.ho-sidebar {
  background: #eef2ff;
}

#root_customer_profile #customerProfileNavId.ho-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_customer_profile #customerProfileNavId .submenu-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

#root_customer_profile #customerProfileNavId .submenu-link:hover,
#root_customer_profile #customerProfileNavId .submenu-link.hover\:bg-indigo-100:hover {
  background: #e0e7ff;
}

#root_customer_profile #customerProfileNavId .submenu-link.font-medium.text-indigo-700.bg-indigo-100 {
  background: #e0e7ff !important;
  color: #4338ca !important;
  font-weight: 600;
}

#root_customer_profile #customerProfileNavId .submenu-link i {
  color: #4f46e5;
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

#root_customer_profile #sidebar.is-collapsed #customerProfileNavId .submenu-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#root_customer_profile .ocp-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

#root_customer_profile .ocp-header-sms .btn,
#root_customer_profile .ocp-sms-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 0.5rem;
  background: #16a34a;
  color: #fff;
  border: none;
  cursor: pointer;
}

#root_customer_profile .ocp-header-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

#root_customer_profile .ocp-photo {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  background: #fff;
}

#root_customer_profile .ocp-upload a {
  color: #e0e7ff;
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#root_customer_profile .ocp-upload a:hover {
  color: #fff;
}

/* Center customer name + Send SMS in profile header */
#root_customer_profile .ocp-header-inner-center {
  position: relative;
}

#root_customer_profile .ocp-header-name-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}

#root_customer_profile .ocp-header-name-center #name,
#root_customer_profile .ocp-header-name-center .ocp-header-sms {
  pointer-events: auto;
}

#customerProfileMainId .ocp-panel.ho-card {
  margin-bottom: 1rem;
}

#customerProfileMainId .ocp-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#customerProfileMainId .ocp-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 0.15rem;
  border-bottom: 1px solid #f1f5f9;
}

@media (min-width: 640px) {
  #customerProfileMainId .ocp-info-row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  #customerProfileMainId .ocp-info-label {
    width: 28%;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  #customerProfileMainId .ocp-info-value {
    flex: 1;
    min-width: 0;
  }
}

#customerProfileMainId .ocp-info-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

#customerProfileMainId .ocp-info-value {
  font-size: 0.875rem;
  color: #1f2937;
  word-break: break-word;
}

#customerProfileMainId .editIcon {
  cursor: pointer;
  margin-left: 0.5rem;
  color: #4f46e5;
}

#customerProfileMainId .editIcon:hover {
  color: #4338ca;
}

#customerProfileMainId .showStudent,
#customerProfileMainId .showContact,
#customerProfileMainId .showstatus {
  display: inline;
}

#customerProfileMainId .hideStudent,
#customerProfileMainId .hideContact,
#customerProfileMainId .editstatus,
#customerProfileMainId .showbutton {
  display: none;
}

#customerProfileMainId .ocp-inline-btn {
  margin-left: 0.75rem;
  padding: 0.3rem 0.65rem;
}

#customerProfileMainId .ocp-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

#customerProfileMainId .ocp-filter-form {
  margin-bottom: 1rem;
}

#customerProfileMainId .ocp-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  #customerProfileMainId .ocp-filter-row {
    flex-direction: row;
    align-items: flex-end;
  }
}

#customerProfileMainId .ocp-subtotal {
  text-align: right;
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 0.75rem;
}

#customerProfileMainId .ocp-doc-upload {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

#customerProfileMainId .ocp-doc-form-title {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.75rem;
}

#customerProfileMainId .ocp-doc-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  #customerProfileMainId .ocp-doc-form-row {
    flex-direction: row;
    align-items: center;
  }
}

#customerProfileMainId .ocp-panel-actions {
  margin-top: 1rem;
  text-align: center;
}

#customerProfileMainId .norecFount {
  text-align: center;
  padding: 1rem;
  color: #6b7280;
  font-size: 0.875rem;
}

#customerProfileMainId .aCenter {
  text-align: center;
}

#customerProfileMainId .totalClass {
  text-align: right;
}

#customerProfileMainId .disValueLeft {
  text-align: left;
}

#customerProfileMainId .inpBorder,
#customerProfileMainId .form-control {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.875rem;
  outline: none;
}

#customerProfileMainId .inpBorder:focus,
#customerProfileMainId .form-control:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

#customerProfileMainId .input-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

#customerProfileMainId .btn.btn-success,
#customerProfileMainId .queckBtnCls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}

.ocp-help-text {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.35rem;
}

.ocp-char-left {
  text-align: right;
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.ocp-schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .ocp-schedule-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ocp-schedule-grid .ocp-span-2,
  .ocp-schedule-grid .ocp-now-row {
    grid-column: 1 / -1;
  }
}

.ocp-now-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ocp-radio-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.ocp-cam-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ocp-cam-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .ocp-cam-preview {
    flex-direction: row;
  }
}

.ocp-image-preview {
  text-align: center;
}

.ocp-image-preview img {
  max-width: 100%;
  height: auto;
  max-height: 502px;
}

body.ocp-modal-lock {
  overflow: hidden;
}

/* ==========================================================================
   View Task — Task Transaction speech-to-text (vt-txn-speech-* prefix)
   Additive only. Does not alter existing company_new.css rules.
   ========================================================================== */

.vt-txn-speech-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.vt-txn-speech-row #addTransactionDescription {
  flex: 1 1 12rem;
  min-width: 0;
}

.vt-txn-speech-lang {
  flex: 0 0 auto;
  min-width: 7.5rem;
  max-width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.875rem;
  line-height: 1.25;
  color: #374151;
  background: #ffffff;
  cursor: pointer;
  box-sizing: border-box;
}

.vt-txn-speech-lang:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.35);
}

.vt-txn-speech-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 1px solid #c4b5fd;
  border-radius: 0.5rem;
  background: #ede9fe;
  color: #5b1a62;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vt-txn-speech-btn:hover:not(:disabled) {
  background: #ddd6fe;
  border-color: #a78bfa;
}

.vt-txn-speech-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
}

.vt-txn-speech-btn-listening {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
  animation: vt-txn-speech-pulse 1.2s ease-in-out infinite;
}

.vt-txn-speech-btn-unsupported,
.vt-txn-speech-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  animation: none;
}

@keyframes vt-txn-speech-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

@media (max-width: 639px) {
  .vt-txn-speech-lang {
    flex: 1 1 auto;
  }

  .vt-txn-speech-row #addTransactionDescription {
    flex: 1 1 100%;
  }
}

/* =========================================================
   business_category.jsp — unique styles (bcat- prefix)
   ========================================================= */

.bcat-page {
  max-width: 72rem;
  margin: 1.25rem auto 2.5rem;
  padding: 0 1rem 1.5rem;
}

@media (min-width: 640px) {
  .bcat-page {
    margin-top: 1.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.bcat-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.bcat-card-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 55%, #ffffff 100%);
  border-bottom: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
  .bcat-card-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
  }
}

.bcat-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #14532d;
  letter-spacing: -0.01em;
}

.bcat-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #64748b;
}

.bcat-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
}

@media (min-width: 640px) {
  .bcat-actions {
    flex-direction: row;
    width: auto;
  }
}

.bcat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 1rem;
  border: none;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

@media (min-width: 640px) {
  .bcat-btn {
    width: auto;
  }
}

.bcat-btn:hover {
  transform: translateY(-1px);
}

.bcat-btn-primary {
  color: #fff;
  background: #16a34a;
  box-shadow: 0 8px 18px -10px rgba(22, 163, 74, 0.7);
}

.bcat-btn-primary:hover {
  background: #15803d;
}

.bcat-btn-danger {
  color: #fff;
  background: #dc2626;
  box-shadow: 0 8px 18px -10px rgba(220, 38, 38, 0.65);
}

.bcat-btn-danger:hover {
  background: #b91c1c;
}

.bcat-btn-muted {
  color: #1f2937;
  background: #e5e7eb;
}

.bcat-btn-muted:hover {
  background: #d1d5db;
}

.bcat-btn-icon {
  width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.35rem;
  border-radius: 9999px;
}

.bcat-card-body {
  padding: 1rem 1.15rem 1.35rem;
}

@media (min-width: 640px) {
  .bcat-card-body {
    padding: 1.15rem 1.5rem 1.5rem;
  }
}

.bcat-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

.bcat-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
  background: #fff;
}

.bcat-table thead {
  background: #ecfdf5;
}

.bcat-table th {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #e5e7eb;
  color: #14532d;
  font-weight: 700;
  white-space: nowrap;
}

.bcat-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.bcat-table tbody tr:hover {
  background: #f8fafc;
}

.bcat-table .bcat-col-center {
  text-align: center;
}

.bcat-empty {
  margin-top: 0.75rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid #f59e0b;
  border-radius: 0.5rem;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.875rem;
}

.bcat-error {
  padding: 1.25rem 1.35rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid #fecaca;
  color: #b91c1c;
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.35);
  font-weight: 600;
}

.bcat-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  background: rgba(15, 23, 42, 0.5);
}

.bcat-modal-overlay.bcat-open {
  display: flex;
}

.bcat-modal {
  width: 100%;
  max-width: 32rem;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.45);
  overflow: hidden;
}

.bcat-modal-sm {
  max-width: 24rem;
}

.bcat-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.75rem 1rem 1.15rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.bcat-modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
}

.bcat-modal-close {
  position: absolute;
  right: 0.85rem;
  top: 0.7rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
}

.bcat-modal-close:hover {
  color: #0f172a;
}

.bcat-modal-body {
  padding: 1.15rem 1.25rem 1.35rem;
}

.bcat-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .bcat-form-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.85rem;
  }
}

.bcat-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  padding-top: 0.55rem;
}

@media (min-width: 640px) {
  .bcat-form-label {
    width: 28%;
    flex-shrink: 0;
  }
}

.bcat-form-control {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.65rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.bcat-textarea {
  min-height: 5rem;
  resize: vertical;
}

.bcat-form-control:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

.bcat-form-error {
  margin-top: -0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: #dc2626;
}

.bcat-modal-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
  .bcat-modal-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.bcat-confirm-text {
  margin: 0 0 1.15rem;
  color: #475569;
  font-size: 0.95rem;
}

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

.bcat-edit-icon {
  margin-left: 0.35rem;
  color: #64748b;
  cursor: pointer;
}

.bcat-edit-icon:hover {
  color: #16a34a;
}

.bcat-inline-form {
  margin: 0;
}

.bcat-inline-edit {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.bcat-inline-input,
.bcat-inline-textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
}

.bcat-inline-textarea {
  min-height: 3.5rem;
  resize: vertical;
}

.bcat-inline-input:focus,
.bcat-inline-textarea:focus {
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.bcat-save-btn {
  flex: 0 0 auto;
}

/* =====================================================================
 * Service Access page (service_access.jsp) -> svcacc-* prefix
 * ===================================================================== */
.svcacc-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.svcacc-header {
  margin-bottom: 1.25rem;
}

.svcacc-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #05053d;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.svcacc-title i {
  color: #5b1a62;
}

.svcacc-subtitle {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #64748b;
}

.svcacc-content {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.svcacc-state {
  padding: 2rem 1.25rem;
  text-align: center;
  color: #64748b;
  font-size: 0.95rem;
}

.svcacc-state-error {
  color: #b91c1c;
}

.svcacc-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.svcacc-table {
  width: 100%;
  border-collapse: collapse;
}

.svcacc-table thead {
  background: #f8fafc;
}

.svcacc-table th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.svcacc-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
  font-size: 0.92rem;
}

.svcacc-table tbody tr:last-child td {
  border-bottom: 0;
}

.svcacc-table tbody tr:hover {
  background: #faf7fb;
}

.svcacc-table tbody tr.svcacc-row-busy {
  opacity: 0.65;
}

.svcacc-service-name {
  font-weight: 600;
  color: #0f172a;
}

.svcacc-col-access {
  width: 160px;
  text-align: center;
  white-space: nowrap;
}

.svcacc-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  vertical-align: middle;
  margin: 0 0.45rem 0 0;
}

.svcacc-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.svcacc-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.svcacc-toggle-slider:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
}

.svcacc-toggle-input:checked + .svcacc-toggle-slider {
  background: linear-gradient(90deg, #5b1a62, #1a1a7a);
}

.svcacc-toggle-input:checked + .svcacc-toggle-slider:before {
  transform: translateX(20px);
}

.svcacc-toggle-input:disabled + .svcacc-toggle-slider {
  cursor: not-allowed;
  opacity: 0.7;
}

.svcacc-status {
  display: inline-block;
  min-width: 28px;
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
}

.svcacc-status-on {
  color: #166534;
}

.svcacc-status-off {
  color: #94a3b8;
}

@media (max-width: 768px) {
  .svcacc-page {
    padding: 1rem 0.75rem 2rem;
  }

  .svcacc-table th,
  .svcacc-table td {
    padding: 0.75rem 0.7rem;
  }

  .svcacc-col-access {
    width: 120px;
  }
}

/* ---- ocp contact inline ADD/EDIT (customer profile Contacts panel — always editor) ---- */
.ocp-contact-inline-host {
  width: 100%;
}

.ocp-contact-inline-host.hidden {
  display: none !important;
}

#contactInfo .ecc-page.esc-embed-page {
  padding: 0;
  max-width: none;
}

#contactInfo .ocp-contact-inline-host .ecc-card {
  box-shadow: none;
  border: none;
  margin: 0;
}

#contactInfo .ocp-contact-inline-host .ecc-modal {
  z-index: 10060;
}

#contactInfo .ocp-contact-inline-host .ecc-modal.hidden {
  display: none !important;
}

/* ---- osp staff profile contact inline (same manager UI as customer profile) ---- */
#ospContactPanel .ecc-page.esc-embed-page {
  padding: 0;
  max-width: none;
}

#ospContactPanel .osp-contact-inline-host .ecc-card {
  box-shadow: none;
  border: none;
  margin: 0;
}

#ospContactPanel .osp-contact-inline-host .ecc-modal {
  z-index: 10060;
}

#ospContactPanel .osp-contact-inline-host .ecc-modal.hidden {
  display: none !important;
}

/* Customer Services postal address modal (unique; do not alter existing modal styles) */
.cs-addr-modal-overlay {
  backdrop-filter: blur(1px);
}

.cs-addr-modal-box {
  border: 1px solid rgba(212, 54, 6, 0.12);
}

.cs-addr-view-box {
  min-height: 88px;
}

.cs-addr-empty-box {
  min-height: 140px;
}

.cs-addr-input:focus {
  border-color: #d43606;
}

.cs-addr-readonly {
  min-height: 38px;
}

/* Customer Services call confirm popup (unique; do not alter existing modal styles) */
.cs-call-modal-overlay {
  backdrop-filter: blur(1px);
}

.cs-call-modal-box {
  border: 1px solid rgba(59, 130, 246, 0.14);
}

.cs-call-modal-icon {
  width: 56px;
  height: 56px;
  font-size: 22px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.cs-call-modal-ok {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
  border: none;
  cursor: pointer;
}

.cs-call-modal-ok:hover {
  filter: brightness(1.06);
}

.cs-exotel-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  vertical-align: middle;
  border: none;
  border-radius: 9999px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.cs-exotel-call-btn:hover {
  transform: translateY(-1px) scale(1.06);
}

/* ===== Service Request Report Hub (unique srr-hub-* only) ===== */
#root_service_request_report .srr-hub-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

#root_service_request_report .srr-hub-header {
  margin-bottom: 22px;
}

#root_service_request_report .srr-hub-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4338ca;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 12px;
}

#root_service_request_report .srr-hub-back-btn:hover {
  color: #312e81;
  text-decoration: underline;
}

#root_service_request_report .srr-hub-back-icon {
  width: 16px;
  height: 16px;
}

#root_service_request_report .srr-hub-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  color: #1e1b4b;
}

#root_service_request_report .srr-hub-page-title-icon {
  width: 26px;
  height: 26px;
  color: #4f46e5;
}

#root_service_request_report .srr-hub-page-sub {
  margin: 8px 0 0;
  font-size: 14px;
  color: #64748b;
}

#root_service_request_report .srr-hub-access-denied {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
  font-size: 14px;
}

#root_service_request_report .srr-hub-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  border: 1px solid #eef2f7;
  padding: 18px 20px 20px;
  margin-bottom: 18px;
}

#root_service_request_report .srr-hub-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
}

#root_service_request_report .srr-hub-section-icon {
  width: 20px;
  height: 20px;
}

#root_service_request_report .srr-hub-btn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#root_service_request_report .srr-hub-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#root_service_request_report .srr-hub-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

#root_service_request_report .srr-hub-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#root_service_request_report .srr-hub-btn-label {
  flex: 1;
}

/* Duration — soft green */
#root_service_request_report .srr-hub-card-duration .srr-hub-section-icon {
  color: #15803d;
}

#root_service_request_report .srr-hub-card-duration .srr-hub-btn {
  background: #e8f7ee;
  color: #166534;
}

#root_service_request_report .srr-hub-card-duration .srr-hub-btn:hover {
  background: #d8f0e2;
}

/* Operations — soft blue */
#root_service_request_report .srr-hub-card-operations .srr-hub-section-icon {
  color: #1d4ed8;
}

#root_service_request_report .srr-hub-card-operations .srr-hub-btn {
  background: #e8f0fe;
  color: #1e40af;
}

#root_service_request_report .srr-hub-card-operations .srr-hub-btn:hover {
  background: #d9e7fd;
}

/* Customer and Quality — soft purple */
#root_service_request_report .srr-hub-card-quality .srr-hub-section-icon {
  color: #7e22ce;
}

#root_service_request_report .srr-hub-card-quality .srr-hub-btn {
  background: #f3e8ff;
  color: #6b21a8;
}

#root_service_request_report .srr-hub-card-quality .srr-hub-btn:hover {
  background: #ebd5ff;
}

/* Advanced Ops — soft teal */
#root_service_request_report .srr-hub-card-advanced .srr-hub-section-icon {
  color: #0f766e;
}

#root_service_request_report .srr-hub-card-advanced .srr-hub-btn {
  background: #e6f7f5;
  color: #115e59;
}

#root_service_request_report .srr-hub-card-advanced .srr-hub-btn:hover {
  background: #d5f0ed;
}

/* Disabled hub report buttons (not yet built) */
#root_service_request_report .srr-hub-btn.srr-hub-btn-disabled,
#root_service_request_report .srr-hub-btn.srr-hub-btn-disabled:hover {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
  filter: grayscale(0.35);
  pointer-events: none;
}

@media (max-width: 900px) {
  #root_service_request_report .srr-hub-btn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #root_service_request_report .srr-hub-page {
    padding: 16px 12px 28px;
  }

  #root_service_request_report .srr-hub-btn-grid {
    grid-template-columns: 1fr;
  }

  #root_service_request_report .srr-hub-page-title {
    font-size: 1.25rem;
  }
}

/* ========== Staff SR Duration Report (ssrd-*) ========== */
#root_staff_sr_duration_report .ssrd-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

#root_staff_sr_duration_report .ssrd-header {
  margin-bottom: 20px;
}

#root_staff_sr_duration_report .ssrd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 10px;
}

#root_staff_sr_duration_report .ssrd-back-btn:hover {
  color: #0f172a;
}

#root_staff_sr_duration_report .ssrd-back-icon {
  width: 16px;
  height: 16px;
}

#root_staff_sr_duration_report .ssrd-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

#root_staff_sr_duration_report .ssrd-page-title-icon {
  width: 26px;
  height: 26px;
  color: #0369a1;
}

#root_staff_sr_duration_report .ssrd-page-sub {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 0.95rem;
}

#root_staff_sr_duration_report .ssrd-access-denied {
  margin-top: 24px;
  padding: 20px;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 600;
  text-align: center;
}

#root_staff_sr_duration_report .ssrd-toolbar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

#root_staff_sr_duration_report .ssrd-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

#root_staff_sr_duration_report .ssrd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#root_staff_sr_duration_report .ssrd-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

#root_staff_sr_duration_report .ssrd-label-spacer {
  visibility: hidden;
}

#root_staff_sr_duration_report .ssrd-input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.9rem;
}

#root_staff_sr_duration_report .ssrd-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

#root_staff_sr_duration_report .ssrd-btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #0284c7;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

#root_staff_sr_duration_report .ssrd-btn-search:hover {
  background: #0369a1;
}

#root_staff_sr_duration_report .ssrd-btn-search-icon {
  width: 16px;
  height: 16px;
}

#root_staff_sr_duration_report .ssrd-results-inner {
  min-height: 80px;
}

#root_staff_sr_duration_report .ssrd-empty,
#root_staff_sr_duration_report .ssrd-empty-hint {
  text-align: center;
  color: #64748b;
  padding: 28px 12px;
}

#root_staff_sr_duration_report .ssrd-empty-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #334155;
}

#root_staff_sr_duration_report .ssrd-table-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

#root_staff_sr_duration_report .ssrd-table-wrap {
  overflow-x: auto;
  background: #fff;
  padding: 0;
}

#root_staff_sr_duration_report .ssrd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_staff_sr_duration_report .ssrd-table,
#root_staff_sr_duration_report .ssrd-table th,
#root_staff_sr_duration_report .ssrd-table td {
  border: none;
}

#root_staff_sr_duration_report .ssrd-table thead {
  background-color: #d1fae5;
  color: #374151;
}

#root_staff_sr_duration_report .ssrd-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #a7f3d0;
  white-space: nowrap;
  vertical-align: middle;
}

#root_staff_sr_duration_report .ssrd-th-serial {
  width: 48px;
  text-align: center !important;
}

#root_staff_sr_duration_report .ssrd-table tbody td {
  padding: 12px 16px;
  color: #1f2937;
  vertical-align: middle;
}

#root_staff_sr_duration_report .ssrd-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
  background: #ffffff;
}

#root_staff_sr_duration_report .ssrd-table tbody tr:last-child {
  border-bottom: none;
}

#root_staff_sr_duration_report .ssrd-table tbody tr:hover {
  background-color: #eff6ff;
}

#root_staff_sr_duration_report .ssrd-td-serial {
  font-weight: 600;
  color: #4f46e5;
  text-align: center;
}

#root_staff_sr_duration_report .ssrd-td-service {
  font-weight: 600;
  white-space: nowrap;
}

#root_staff_sr_duration_report .ssrd-td-date {
  white-space: nowrap;
}

#root_staff_sr_duration_report .ssrd-date-icon {
  color: #6b7280;
  margin-right: 4px;
}

#root_staff_sr_duration_report .ssrd-td-duration {
  font-weight: 700;
  color: #047857;
  white-space: nowrap;
}

#root_staff_sr_duration_report .ssrd-average {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 0;
  border-top: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}

#root_staff_sr_duration_report .ssrd-average-label {
  font-weight: 700;
}

#root_staff_sr_duration_report .ssrd-average-value {
  font-size: 1.1rem;
  font-weight: 800;
}

#root_staff_sr_duration_report .ssrd-average-count {
  color: #047857;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  #root_staff_sr_duration_report .ssrd-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #root_staff_sr_duration_report .ssrd-page {
    padding: 16px 12px 28px;
  }

  #root_staff_sr_duration_report .ssrd-filter-grid {
    grid-template-columns: 1fr;
  }

  #root_staff_sr_duration_report .ssrd-page-title {
    font-size: 1.25rem;
  }
}

/* ssrd datepicker — menu_new does not load jquery-ui.css */
body > #ui-datepicker-div.ssrd-datepicker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10050 !important;
}

#ui-datepicker-div.ssrd-datepicker.ui-datepicker,
#ui-datepicker-div.ssrd-datepicker {
  width: 300px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  max-width: calc(100vw - 1rem);
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 34px;
  line-height: 1.6;
  font-weight: 600;
  color: #0f172a;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-title select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #f8fafc;
  cursor: pointer;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-title select:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.18);
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-prev,
#ui-datepicker-div.ssrd-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e0f2fe;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.ssrd-datepicker .ui-datepicker-next { right: 0; }

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.ssrd-datepicker .ui-datepicker-next:hover {
  background: #bae6fd;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.ssrd-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  margin-top: -5px;
  border: 5px solid transparent;
  text-indent: 0;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-prev span {
  border-right-color: #0369a1;
  margin-left: -8px;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-next span {
  border-left-color: #0369a1;
}

#ui-datepicker-div.ssrd-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 0;
}

#ui-datepicker-div.ssrd-datepicker th {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  border: 0;
  background: transparent;
}

#ui-datepicker-div.ssrd-datepicker td {
  padding: 2px;
  text-align: center;
  border: 0;
}

#ui-datepicker-div.ssrd-datepicker td span,
#ui-datepicker-div.ssrd-datepicker td a {
  display: block;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  color: #1e293b;
  font-weight: 500;
}

#ui-datepicker-div.ssrd-datepicker td a:hover {
  background: #e0f2fe;
  color: #0369a1;
}

#ui-datepicker-div.ssrd-datepicker .ui-state-active,
#ui-datepicker-div.ssrd-datepicker .ui-state-highlight,
#ui-datepicker-div.ssrd-datepicker td a.ui-state-active {
  background: #0284c7 !important;
  color: #fff !important;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-today a {
  box-shadow: inset 0 0 0 1px #0284c7;
}

#ui-datepicker-div.ssrd-datepicker .ui-datepicker-other-month a {
  color: #94a3b8;
}

/* ========== Company SR Duration Report (csrd-*) ========== */
#root_company_sr_duration_report .csrd-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 40px;
}

#root_company_sr_duration_report .csrd-header {
  margin-bottom: 20px;
}

#root_company_sr_duration_report .csrd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 10px;
}

#root_company_sr_duration_report .csrd-back-btn:hover {
  color: #0f172a;
}

#root_company_sr_duration_report .csrd-back-icon {
  width: 16px;
  height: 16px;
}

#root_company_sr_duration_report .csrd-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

#root_company_sr_duration_report .csrd-page-title-icon {
  width: 26px;
  height: 26px;
  color: #0369a1;
}

#root_company_sr_duration_report .csrd-page-sub {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 0.95rem;
}

#root_company_sr_duration_report .csrd-access-denied {
  margin-top: 24px;
  padding: 20px;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 600;
  text-align: center;
}

#root_company_sr_duration_report .csrd-toolbar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

#root_company_sr_duration_report .csrd-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

#root_company_sr_duration_report .csrd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#root_company_sr_duration_report .csrd-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #475569;
}

#root_company_sr_duration_report .csrd-label-spacer {
  visibility: hidden;
}

#root_company_sr_duration_report .csrd-input {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.9rem;
}

#root_company_sr_duration_report .csrd-input:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

#root_company_sr_duration_report .csrd-btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #0284c7;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

#root_company_sr_duration_report .csrd-btn-search:hover {
  background: #0369a1;
}

#root_company_sr_duration_report .csrd-btn-search-icon {
  width: 16px;
  height: 16px;
}

#root_company_sr_duration_report .csrd-results-inner {
  min-height: 80px;
}

#root_company_sr_duration_report .csrd-empty,
#root_company_sr_duration_report .csrd-empty-hint {
  text-align: center;
  color: #64748b;
  padding: 28px 12px;
}

#root_company_sr_duration_report .csrd-empty-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #334155;
}

#root_company_sr_duration_report .csrd-table-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

#root_company_sr_duration_report .csrd-table-wrap {
  overflow-x: auto;
  background: #fff;
  padding: 0;
}

#root_company_sr_duration_report .csrd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#root_company_sr_duration_report .csrd-table,
#root_company_sr_duration_report .csrd-table th,
#root_company_sr_duration_report .csrd-table td {
  border: none;
}

#root_company_sr_duration_report .csrd-table thead {
  background-color: #d1fae5;
  color: #374151;
}

#root_company_sr_duration_report .csrd-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #a7f3d0;
  white-space: nowrap;
  vertical-align: middle;
}

#root_company_sr_duration_report .csrd-th-serial {
  width: 48px;
  text-align: center !important;
}

#root_company_sr_duration_report .csrd-table tbody td {
  padding: 12px 16px;
  color: #1f2937;
  vertical-align: middle;
}

#root_company_sr_duration_report .csrd-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
  background: #ffffff;
}

#root_company_sr_duration_report .csrd-table tbody tr:last-child {
  border-bottom: none;
}

#root_company_sr_duration_report .csrd-table tbody tr:hover {
  background-color: #eff6ff;
}

#root_company_sr_duration_report .csrd-td-serial {
  font-weight: 600;
  color: #4f46e5;
  text-align: center;
}

#root_company_sr_duration_report .csrd-td-staff {
  font-weight: 600;
}

#root_company_sr_duration_report .csrd-td-staff-no {
  white-space: nowrap;
}

#root_company_sr_duration_report .csrd-td-count {
  font-weight: 600;
}

#root_company_sr_duration_report .csrd-td-duration {
  font-weight: 700;
  color: #047857;
  white-space: nowrap;
}

#root_company_sr_duration_report .csrd-average {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 0;
  border-top: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}

#root_company_sr_duration_report .csrd-average-label {
  font-weight: 700;
}

#root_company_sr_duration_report .csrd-average-value {
  font-size: 1.1rem;
  font-weight: 800;
}

#root_company_sr_duration_report .csrd-average-count {
  color: #047857;
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  #root_company_sr_duration_report .csrd-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #root_company_sr_duration_report .csrd-page {
    padding: 16px 12px 28px;
  }

  #root_company_sr_duration_report .csrd-filter-grid {
    grid-template-columns: 1fr;
  }

  #root_company_sr_duration_report .csrd-page-title {
    font-size: 1.25rem;
  }
}

/* csrd datepicker — menu_new does not load jquery-ui.css */
body > #ui-datepicker-div.csrd-datepicker {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10050 !important;
}

#ui-datepicker-div.csrd-datepicker.ui-datepicker,
#ui-datepicker-div.csrd-datepicker {
  width: 300px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  max-width: calc(100vw - 1rem);
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-header {
  position: relative;
  background: transparent;
  border: none;
  padding: 2px 0 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid #f1f5f9;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 34px;
  line-height: 1.6;
  font-weight: 600;
  color: #0f172a;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-title select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  background: #f8fafc;
  cursor: pointer;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-title select:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.18);
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-prev,
#ui-datepicker-div.csrd-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #e0f2fe;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-prev { left: 0; }
#ui-datepicker-div.csrd-datepicker .ui-datepicker-next { right: 0; }

#ui-datepicker-div.csrd-datepicker .ui-datepicker-prev:hover,
#ui-datepicker-div.csrd-datepicker .ui-datepicker-next:hover {
  background: #bae6fd;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-prev span,
#ui-datepicker-div.csrd-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  margin-top: -5px;
  border: 5px solid transparent;
  text-indent: 0;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-prev span {
  border-right-color: #0369a1;
  margin-left: -8px;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-next span {
  border-left-color: #0369a1;
}

#ui-datepicker-div.csrd-datepicker table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 0;
}

#ui-datepicker-div.csrd-datepicker th {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  border: 0;
  background: transparent;
}

#ui-datepicker-div.csrd-datepicker td {
  padding: 2px;
  text-align: center;
  border: 0;
}

#ui-datepicker-div.csrd-datepicker td span,
#ui-datepicker-div.csrd-datepicker td a {
  display: block;
  padding: 7px 0;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  color: #1e293b;
  font-weight: 500;
}

#ui-datepicker-div.csrd-datepicker td a:hover {
  background: #e0f2fe;
  color: #0369a1;
}

#ui-datepicker-div.csrd-datepicker .ui-state-active,
#ui-datepicker-div.csrd-datepicker .ui-state-highlight,
#ui-datepicker-div.csrd-datepicker td a.ui-state-active {
  background: #0284c7 !important;
  color: #fff !important;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-today a {
  box-shadow: inset 0 0 0 1px #0284c7;
}

#ui-datepicker-div.csrd-datepicker .ui-datepicker-other-month a {
  color: #94a3b8;
}

/* ---- Staff Company Profile (#root_staff_company_profile) ---- */
#root_staff_company_profile .scp-overview-card {
  max-width: 72rem;
}

#root_staff_company_profile .scp-overview-subtitle {
  margin: 0.4rem 0 0;
  max-width: 42rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
  color: #6b7280;
}

#root_staff_company_profile .scp-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  #root_staff_company_profile .scp-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  #root_staff_company_profile .scp-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

#root_staff_company_profile .scp-action-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 4.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

#root_staff_company_profile .scp-action-card:hover {
  background: #f8fafc;
  border-color: #c7d2fe;
  box-shadow: 0 6px 14px rgba(67, 56, 202, 0.1);
  transform: translateY(-1px);
}

#root_staff_company_profile .scp-action-card:focus {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

#root_staff_company_profile .scp-action-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.7rem;
  color: #fff;
  flex-shrink: 0;
}

#root_staff_company_profile .scp-action-card-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.35;
}

#root_staff_company_profile .scp-action-card-success .scp-action-card-icon {
  background: #16a34a;
}

#root_staff_company_profile .scp-action-card-primary .scp-action-card-icon {
  background: #4f46e5;
}

#root_staff_company_profile .scp-action-card-warning .scp-action-card-icon {
  background: #d97706;
}

#root_staff_company_profile .scp-btn-warning {
  background: #d97706;
  color: #fff;
}

#root_staff_company_profile .scp-btn-warning:hover {
  background: #b45309;
}

/* Staff company profile page wrap (card-only layout, no sidebar) */
#root_staff_company_profile.scp-page-wrap {
  width: 100%;
  min-height: calc(100vh - 4rem);
  padding: 1.25rem 1rem 2rem;
  background-color: #f3f4f6;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  #root_staff_company_profile.scp-page-wrap {
    padding: 1.5rem 1.5rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  #root_staff_company_profile.scp-page-wrap {
    padding: 2rem 2rem 3rem;
  }
}

#root_staff_company_profile.scp-page-wrap .scp-overview-card {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   staff_company_holidays.jsp — unique sch-* prefix (staff company holidays)
   Theme aligned with amc_master / company brand palette.
   Does not alter existing company_new.css rules.
   ========================================================================== */

.sch-shell {
  width: 100%;
  min-height: calc(100vh - 3.5rem);
  padding: 1.25rem 0 2rem;
  background: linear-gradient(135deg, #f8f5fa 0%, #ffffff 45%, #f3eef5 100%);
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.sch-wrap {
  width: min(48rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.sch-pagehead {
  margin-bottom: 1.25rem;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.sch-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5b1a62;
}

.sch-title {
  margin: 0.15rem 0 0 !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #05053d !important;
  text-align: left !important;
}

.sch-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #4b5563;
  max-width: 36rem;
}

.sch-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.12);
}

.sch-panel-banner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  padding: 1rem 1.25rem;
}

.sch-panel-banner-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.sch-panel-banner-sub {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.sch-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.15rem 1.15rem;
  box-sizing: border-box;
}

.sch-month-card {
  border: 1px solid #e8e4ec;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
}

.sch-month-head {
  padding: 0.75rem 1rem;
  background: #f8f5fa;
  border-bottom: 1px solid #eee7f2;
}

.sch-month-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #05053d;
  letter-spacing: -0.01em;
}

.sch-month-icon {
  color: #5b1a62;
  font-size: 0.9rem;
}

.sch-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin: 0 !important;
}

.sch-table thead th {
  background: #faf8fb;
  color: #05053d;
  font-weight: 700;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #e8e4ec;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.sch-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #f3eef5;
  color: #374151;
  vertical-align: middle;
}

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

.sch-table tbody tr:nth-child(even) td {
  background: #faf8fb;
}

.sch-table tbody tr:hover td {
  background: rgba(248, 245, 250, 0.95);
}

.sch-td-date {
  width: 40%;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
}

.sch-td-reason {
  width: 60%;
}

.sch-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  padding: 3rem 1.25rem;
  color: #6b7280;
  font-weight: 500;
}

.sch-empty[style*="display: block"],
.sch-empty[style*="display:block"] {
  display: flex !important;
}

.sch-empty-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background: #f3eef5;
  color: #5b1a62;
}

.sch-empty-icon {
  font-size: 1.25rem;
  color: #5b1a62;
  margin: 0;
}

.sch-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.sch-empty-hint {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

.sch-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.15rem;
}

.sch-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #05053d !important;
  color: #fff !important;
}

.sch-back-btn:hover {
  background: #1a1a7a !important;
  color: #fff !important;
}

.sch-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 600;
}

@media (min-width: 640px) {
  .sch-title {
    font-size: 1.75rem !important;
  }

  .sch-panel-banner,
  .sch-list {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
  }
}

@media (max-width: 639px) {
  .sch-wrap {
    width: calc(100% - 1.5rem);
  }

  .sch-shell {
    padding-top: 1rem;
  }

  .sch-title {
    font-size: 1.35rem !important;
  }

  .sch-list {
    padding: 0.85rem;
    gap: 0.85rem;
  }

  .sch-table thead th,
  .sch-table td {
    padding: 0.55rem 0.65rem;
    font-size: 0.8rem;
  }

  .sch-td-date {
    white-space: normal;
  }
}



/* ========== staff_company_calendar.jsp (scc-*) — append only ========== */
.scc-shell {
  width: 100%;
  color: #1f2937;
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}

.scc-wrap {
  width: 100%;
  box-sizing: border-box;
}

.scc-header {
  min-width: 0;
}

.scc-section {
  margin: 0;
  padding: 0;
}

.scc-panel {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  box-shadow: 0 12px 40px rgba(91, 26, 98, 0.08);
  padding: 0.75rem;
  min-height: 12rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .scc-panel {
    padding: 1rem 1.15rem 1.15rem;
  }
}

.scc-empty {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-radius: 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 0.875rem;
  font-weight: 600;
}

.scc-calendar {
  width: 100%;
  min-width: 0;
}

.scc-panel .fc {
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: #1f2937;
}

.scc-panel .fc-header-title h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #43124a;
  margin: 0.15rem 0;
}

@media (min-width: 640px) {
  .scc-panel .fc-header-title h2 {
    font-size: 1.25rem;
  }
}

.scc-panel .fc-header td {
  padding-bottom: 0.35rem;
}

.scc-panel .fc-button {
  height: auto;
  line-height: 1.35;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.5rem !important;
  box-shadow: none;
  text-shadow: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.scc-panel .fc-state-default {
  background-image: none;
  background-color: #fff;
  border-color: #e5e7eb;
  color: #374151;
  box-shadow: none;
  text-shadow: none;
}

.scc-panel .fc-state-hover,
.scc-panel .fc-state-down {
  background: #f8f5fa !important;
  border-color: #d8c6de !important;
  color: #5b1a62 !important;
}

.scc-panel .fc-state-active,
.scc-panel .fc-state-active.fc-state-hover {
  background: #5b1a62 !important;
  border-color: #5b1a62 !important;
  color: #fff !important;
}

.scc-panel .fc-state-disabled {
  opacity: 0.45;
  cursor: default;
}

.scc-panel .fc-border-separate th,
.scc-panel .fc-border-separate td {
  border-color: #eef0f3;
}

.scc-panel .fc-widget-header {
  background: #f8f5fa;
  color: #5b1a62;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.45rem 0;
}

.scc-panel .fc-day-number {
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  padding: 0.35rem 0.45rem 0 0;
}

.scc-panel .fc-state-highlight {
  background: #f3eef5;
}

.scc-panel .fc-today .fc-day-number {
  color: #5b1a62;
  font-weight: 800;
}

.scc-panel .fc-event {
  border: none;
  background: #5b1a62;
  color: #fff;
  border-radius: 0.35rem;
  font-size: 0.72rem;
  padding: 0.1rem 0.25rem;
}

.scc-panel .fc-event-inner {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scc-panel .fc-grid .fc-day-content {
  min-height: 2.5rem;
}

@media (max-width: 639px) {
  .scc-panel .fc-header-left,
  .scc-panel .fc-header-center,
  .scc-panel .fc-header-right {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.15rem 0;
  }

  .scc-panel .fc-header-title h2 {
    font-size: 1rem;
  }
}

/* ============================================================
   Staff company album (Gallery leaf) — unique sca-* only
   Scoped under #root_staff_company_album. Do not edit rules above.
   ============================================================ */
#root_staff_company_album .sca-page {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
}

@media (min-width: 640px) {
  #root_staff_company_album .sca-page {
    padding: 1.5rem 1.5rem 2.5rem;
  }
}

#root_staff_company_album .sca-panel {
  padding: 1.25rem 1.15rem 1.35rem;
}

@media (min-width: 640px) {
  #root_staff_company_album .sca-panel {
    padding: 1.5rem 1.5rem 1.75rem;
  }
}

#root_staff_company_album .sca-panel-intro {
  margin-bottom: 1rem;
}

#root_staff_company_album .sca-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #6b7280;
}

#root_staff_company_album .sca-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  #root_staff_company_album .sca-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

#root_staff_company_album .sca-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

#root_staff_company_album .sca-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
  transform: translateY(-1px);
}

#root_staff_company_album .sca-card-head {
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid #f3f4f6;
  background: #f9fafb;
}

#root_staff_company_album .sca-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1f2937;
  word-break: break-word;
}

#root_staff_company_album .sca-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
}

@media (min-width: 480px) {
  #root_staff_company_album .sca-card-body {
    flex-direction: row;
    align-items: flex-start;
  }
}

#root_staff_company_album .sca-card-media {
  flex: 0 0 auto;
  width: 100%;
  max-width: 9rem;
}

#root_staff_company_album .sca-thumb {
  display: block;
  width: 100%;
  height: 7.5rem;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

#root_staff_company_album .sca-card-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#root_staff_company_album .sca-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

#root_staff_company_album .sca-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #f9fafb;
}

#root_staff_company_album .sca-stat dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#root_staff_company_album .sca-stat dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}

#root_staff_company_album .sca-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#root_staff_company_album .sca-view-btn {
  min-height: 2.25rem;
}

#root_staff_company_album .sca-empty {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
  padding: 1.5rem 1rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.95rem;
  font-weight: 500;
}

#root_staff_company_album .sca-empty-icon {
  width: 1.15rem;
  height: 1.15rem;
  color: #9ca3af;
  flex-shrink: 0;
}

#root_staff_company_album .sca-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

#root_staff_company_album .sca-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  max-width: 22rem;
}

#root_staff_company_album .sca-empty .sca-empty-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #9ca3af;
  margin-bottom: 0.25rem;
}

#root_staff_company_album .sca-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

#root_staff_company_album .sca-empty-hint {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: #6b7280;
}

@media (min-width: 1024px) {
  #root_staff_company_album .sca-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
  }

  #root_staff_company_album .sca-page {
    padding-top: 1.75rem;
  }
}

.scc-header-icon {
  font-size: 1.05rem;
}

.scc-panel .fc-other-month .fc-day-number {
  color: #9ca3af;
  font-weight: 500;
}

.scc-panel .fc-header-left .fc-button,
.scc-panel .fc-header-right .fc-button {
  margin: 0.1rem;
}

@media (min-width: 640px) and (max-width: 900px) {
  .scc-panel .fc-header-title h2 {
    font-size: 1.1rem;
  }
}

/* ---- Company List filters (unique clListFilter*) ---- */
.clListFilterBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.clListFilterSearch,
.clListFilterSelect {
  min-width: 0;
  height: 2.15rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.96);
  color: #1e3a5f;
  font-size: 0.8rem;
  padding: 0 0.7rem;
}

.clListFilterSearch {
  flex: 1 1 14rem;
}

.clListFilterSelect {
  flex: 0 1 10.5rem;
}

.clListFilterSearch:focus,
.clListFilterSelect:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.45);
}

.clListFilterClearBtn {
  height: 2.15rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.55rem;
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 0.85rem;
  cursor: pointer;
}

.clListFilterClearBtn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.clListFilterCount {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  white-space: nowrap;
}

.clListFilterEmpty.hidden {
  display: none;
}

@media (max-width: 767px) {
  .clListFilterSearch,
  .clListFilterSelect,
  .clListFilterClearBtn {
    flex: 1 1 100%;
  }

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

/* generate_quotation.jsp — unique gq-* classes; do not reuse invoice-* */
.gq-root {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.gq-page-wrap {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Dropdown is appended to body, so this class is not nested under .gq-root */
.gq-product-autocomplete {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  max-height: 200px;
  max-width: min(420px, 92vw);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1100;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.gq-product-autocomplete .ui-menu-item,
.gq-product-autocomplete .ui-menu-item-wrapper {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
  color: #111827;
}

.gq-product-autocomplete .ui-menu-item-wrapper.ui-state-active,
.gq-product-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.gq-product-autocomplete .ui-state-focus {
  background-color: #e5e7eb;
  border: none;
  margin: 0;
  color: #111827;
}

.gq-root .ui-helper-hidden-accessible {
  display: none;
}

.gq-customer-grid input,
.gq-customer-grid select,
.gq-customer-grid textarea {
  min-height: 38px;
  font-size: 14px;
}

.gq-field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.gq-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.gq-items-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.gq-items-table input,
.gq-items-table select {
  min-width: 0;
  font-size: 13px;
}

.gq-items-table .product_name {
  min-width: 120px;
}

.gq-min-width-cls {
  min-width: 72px;
}

.gq-min-width-five-cls {
  min-width: 48px;
}

.gq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 12px 16px;
}

.gq-total-section {
  border-top: 1px solid #e5e7eb;
}

.gq-total-table td {
  padding: 4px 8px;
}

.gq-search-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 28rem;
}

@media (max-width: 1024px) {
  .gq-items-table {
    min-width: 640px;
  }
}

@media (max-width: 768px) {
  .gq-title {
    font-size: 1.125rem;
    padding: 10px 8px;
  }

  .gq-customer-grid input,
  .gq-customer-grid select,
  .gq-customer-grid textarea {
    min-height: 42px;
    font-size: 16px;
  }

  .gq-items-table {
    min-width: 580px;
  }

  .gq-items-table td,
  .gq-items-table th {
    padding: 6px 4px;
    font-size: 12px;
  }

  .gq-items-table input,
  .gq-items-table select {
    font-size: 12px;
    padding: 4px 2px;
  }

  .gq-product-autocomplete {
    max-width: 96vw;
  }
}

@media (max-width: 480px) {
  .gq-items-table {
    min-width: 520px;
  }

  .gq-search-card {
    padding: 16px;
    border-radius: 12px;
  }

  .gq-search-card h2 {
    font-size: 1.25rem;
  }
}

/* View Estimate extras — unique ves-* names; do not alter vin-* rules */
.ves-product-name {
  white-space: pre-wrap;
}

.ves-optional-row {
  display: none;
}

.ves-notes-block {
  margin-top: 0.85rem;
}

.ves-notes-block label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.ves-notes-text {
  white-space: pre-wrap;
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.4;
}

/* Customer login OTP resend — unique clgn-* names; do not alter existing rules */
.clgn-otp-resend {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #5b1a62;
  cursor: pointer;
}

.clgn-otp-resend:hover {
  color: #d0153f;
}

/* ---- Feedback Survey Report (unique ho-fsr-*) ---- */
#root_survey_profile .ho-fsr-card {
  padding: 1.15rem 1.2rem 1.35rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_survey_profile .ho-fsr-head {
  margin-bottom: 1rem;
}

#root_survey_profile .ho-fsr-title {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e1b4b;
}

#root_survey_profile .ho-fsr-sub {
  margin: 0;
  font-size: 0.88rem;
  color: #64748b;
}

#root_survey_profile .ho-fsr-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#root_survey_profile .ho-fsr-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

#root_survey_profile .ho-fsr-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

#root_survey_profile .ho-fsr-metric.is-active {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#root_survey_profile .ho-fsr-metric-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

#root_survey_profile .ho-fsr-metric-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
}

#root_survey_profile .ho-fsr-metric-hint {
  font-size: 0.75rem;
  color: #94a3b8;
}

#root_survey_profile .ho-fsr-card-sent .ho-fsr-metric-value { color: #3730a3; }
#root_survey_profile .ho-fsr-card-done .ho-fsr-metric-value { color: #15803d; }
#root_survey_profile .ho-fsr-card-wait .ho-fsr-metric-value { color: #b45309; }
#root_survey_profile .ho-fsr-card-rate .ho-fsr-metric-value { color: #0f766e; }

#root_survey_profile .ho-fsr-staff-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#root_survey_profile .ho-fsr-staff-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#root_survey_profile .ho-fsr-staff-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#root_survey_profile .ho-fsr-staff-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  cursor: pointer;
}

#root_survey_profile .ho-fsr-staff-chip.is-active {
  background: #eef2ff;
  border-color: #6366f1;
}

#root_survey_profile .ho-fsr-staff-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
}

#root_survey_profile .ho-fsr-staff-meta {
  font-size: 0.72rem;
  color: #64748b;
}

#root_survey_profile .ho-fsr-panel {
  padding: 1rem 1.05rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

#root_survey_profile .ho-fsr-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

#root_survey_profile .ho-fsr-panel-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}

#root_survey_profile .ho-fsr-panel-head .ho-fsr-panel-title {
  margin: 0;
}

#root_survey_profile .ho-fsr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#root_survey_profile .ho-fsr-search,
#root_survey_profile .ho-fsr-select {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  color: #0f172a;
  background: #fff;
}

#root_survey_profile .ho-fsr-search {
  min-width: 16rem;
}

#root_survey_profile .ho-fsr-table-wrap {
  overflow-x: auto;
}

#root_survey_profile .ho-fsr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

#root_survey_profile .ho-fsr-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

#root_survey_profile .ho-fsr-table td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: top;
}

#root_survey_profile .ho-fsr-sr {
  font-weight: 700;
  color: #3730a3;
}

#root_survey_profile .ho-fsr-cust {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-weight: 600;
  color: #0f172a;
}

#root_survey_profile .ho-fsr-muted {
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
}

#root_survey_profile .ho-fsr-status {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

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

#root_survey_profile .ho-fsr-status-wait {
  background: #fef3c7;
  color: #92400e;
}

#root_survey_profile .ho-fsr-view-btn {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

#root_survey_profile .ho-fsr-view-btn:hover {
  background: #e0e7ff;
}

#root_survey_profile .ho-fsr-empty,
#root_survey_profile .ho-fsr-empty-inline,
#root_survey_profile .ho-fsr-loading {
  padding: 1.4rem 1rem;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

#root_survey_profile .ho-fsr-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.35rem;
}

#root_survey_profile .ho-fsr-empty-msg {
  font-size: 0.88rem;
}

#root_survey_profile .ho-fsr-ans-count {
  color: #64748b;
  font-weight: 600;
}

#root_survey_profile .ho-fsr-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.45);
}

#root_survey_profile .ho-fsr-view-overlay.is-open {
  display: flex;
}

#root_survey_profile .ho-fsr-view-box {
  width: 100%;
  max-width: 34rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

#root_survey_profile .ho-fsr-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #f1f5f9;
}

#root_survey_profile .ho-fsr-view-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e1b4b;
}

#root_survey_profile .ho-fsr-view-close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
}

#root_survey_profile .ho-fsr-view-meta {
  padding: 0.75rem 1.2rem 0;
}

#root_survey_profile .ho-fsr-view-meta-title {
  font-weight: 700;
  color: #0f172a;
}

#root_survey_profile .ho-fsr-view-meta-sr {
  font-size: 0.82rem;
  color: #64748b;
}

#root_survey_profile .ho-fsr-view-body {
  padding: 0.85rem 1.2rem;
  overflow: auto;
}

#root_survey_profile .ho-fsr-qa {
  padding: 0.7rem 0;
  border-bottom: 1px solid #f1f5f9;
}

#root_survey_profile .ho-fsr-q {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 0.25rem;
}

#root_survey_profile .ho-fsr-a {
  font-size: 0.92rem;
  color: #0f172a;
}

#root_survey_profile .ho-fsr-view-footer {
  padding: 0.85rem 1.2rem 1rem;
  display: flex;
  justify-content: flex-end;
}

#root_survey_profile .ho-fsr-view-close-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 900px) {
  #root_survey_profile .ho-fsr-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #root_survey_profile .ho-fsr-search {
    min-width: 100%;
  }
}

/* ---- Company List city autocomplete (unique clListMetaEditCity* only) ---- */
#clListMetaEditCityWrap {
  position: relative;
}

#clListMetaEditCityWrap .ui-autocomplete {
  position: absolute;
  z-index: 10060;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
}

#clListMetaEditCityWrap .ui-autocomplete .ui-menu-item a,
#clListMetaEditCityWrap .ui-autocomplete .ui-menu-item div {
  display: block;
  padding: 6px 12px;
  cursor: pointer;
  color: #374151;
  text-decoration: none;
}

#clListMetaEditCityWrap .ui-autocomplete .ui-menu-item a:hover,
#clListMetaEditCityWrap .ui-autocomplete .ui-menu-item a.ui-state-focus,
#clListMetaEditCityWrap .ui-autocomplete .ui-menu-item div:hover,
#clListMetaEditCityWrap .ui-autocomplete .ui-menu-item div.ui-state-focus {
  background: #eef2ff;
  color: #1e3a8a;
}

/* Appended to body so dropdown is not clipped by modal overflow */
.clListMetaEditCityAutocomplete.ui-autocomplete {
  position: absolute;
  z-index: 10070;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  max-height: 260px;
  overflow-y: auto;
  font-size: 13px;
}

.clListMetaEditCityAutocomplete.ui-autocomplete .ui-menu-item a,
.clListMetaEditCityAutocomplete.ui-autocomplete .ui-menu-item div {
  display: block;
  padding: 6px 12px;
  cursor: pointer;
  color: #374151;
  text-decoration: none;
}

.clListMetaEditCityAutocomplete.ui-autocomplete .ui-menu-item a:hover,
.clListMetaEditCityAutocomplete.ui-autocomplete .ui-menu-item a.ui-state-focus,
.clListMetaEditCityAutocomplete.ui-autocomplete .ui-menu-item div:hover,
.clListMetaEditCityAutocomplete.ui-autocomplete .ui-menu-item div.ui-state-focus {
  background: #eef2ff;
  color: #1e3a8a;
}

/* Company List — placeholder labels when category/city is empty */
#companyListId .clListCompanyNameMetaPlaceholder {
  color: #c4c9d4;
  font-weight: 400;
  font-style: italic;
}

/* Add Company popup — city autocomplete rendered outside the modal */
#adminCompanyCityWrap {
  position: relative;
}

.adminCompanyCityAutocomplete.ui-autocomplete {
  position: absolute;
  z-index: 10070;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  max-height: 260px;
  overflow-y: auto;
  font-size: 13px;
}

.adminCompanyCityAutocomplete.ui-autocomplete .ui-menu-item a,
.adminCompanyCityAutocomplete.ui-autocomplete .ui-menu-item div {
  display: block;
  padding: 6px 12px;
  cursor: pointer;
  color: #374151;
  text-decoration: none;
}

.adminCompanyCityAutocomplete.ui-autocomplete .ui-menu-item a:hover,
.adminCompanyCityAutocomplete.ui-autocomplete .ui-menu-item a.ui-state-focus,
.adminCompanyCityAutocomplete.ui-autocomplete .ui-menu-item div:hover,
.adminCompanyCityAutocomplete.ui-autocomplete .ui-menu-item div.ui-state-focus {
  background: #eef2ff;
  color: #1e3a8a;
}

/* ============================================================
   Staff Management page — unique stf-* (#leadProfileId)
   Additive only. Does not alter existing company_new.css rules.
   ============================================================ */
#leadProfileId .stf-page {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  color: #1f2937;
}

#leadProfileId .stf-page-wrap {
  max-width: 80rem;
}

#leadProfileId .stf-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

#leadProfileId .stf-excel-btn {
  background: #059669;
}

#leadProfileId .stf-excel-btn:hover {
  background: #047857;
}

#leadProfileId .stf-group-card {
  min-height: 3.5rem;
}

#leadProfileId .stf-group-card-active {
  border-color: #1a1a7a;
  background: #eef2ff;
  box-shadow: 0 4px 10px rgba(5, 5, 61, 0.08);
}

#leadProfileId .stf-group-card-active .stf-group-icon {
  background: #1a1a7a;
  color: #ffffff;
}

#leadProfileId .stf-group-card-active .stf-group-count {
  background: #1a1a7a;
  color: #ffffff;
}

#leadProfileId .stf-search-wrap {
  min-width: 12rem;
}

#leadProfileId .stf-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.875rem;
  pointer-events: none;
}

#leadProfileId .stf-search-input {
  min-height: 2.6rem;
}

#leadProfileId .stf-table tbody td {
  vertical-align: middle;
}

#leadProfileId .stf-actions-cell {
  white-space: nowrap;
}

#leadProfileId .stf-view-btn {
  min-width: 4.25rem;
  justify-content: center;
}

#leadProfileId .stf-empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
}

#leadProfileId .stf-empty-inline {
  padding: 1.5rem 0.5rem;
}

#leadProfileId .stf-empty-icon {
  margin: 0 auto 1rem;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 1.25rem;
}

#leadProfileId .stf-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

#leadProfileId .stf-empty-text {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

#leadProfileId .stf-modal-panel {
  background: #ffffff;
}

#leadProfileId .stf-input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
}

#leadProfileId .stf-search-table {
  width: 100%;
}

#leadProfileId .stf-add-row-btn {
  margin: 0 auto;
}

@media (max-width: 640px) {
  #leadProfileId .stf-header-actions {
    width: 100%;
  }

  #leadProfileId .stf-header-actions button {
    flex: 1 1 auto;
    justify-content: center;
  }

  #leadProfileId .stf-search-wrap,
  #leadProfileId .stf-search-input {
    width: 100%;
  }

  #leadProfileId .stf-table-head-actions {
    width: 100%;
  }
}

/* ============================================================
   Staff Management table — company-list match (unique stf-*)
   Additive only. Does not alter existing company_new.css rules.
   ============================================================ */
#leadProfileId .stf-btn-primary,
#leadProfileId .stf-btn-outline,
#leadProfileId .stf-excel-btn,
#leadProfileId .stf-banner-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.25;
}

#leadProfileId .stf-btn-primary {
  background: linear-gradient(90deg, #4f46e5 0%, #1a1a7a 100%);
  color: #ffffff;
  box-shadow: 0 4px 6px rgba(5, 5, 61, 0.12);
}

#leadProfileId .stf-btn-primary:hover {
  opacity: 0.95;
}

#leadProfileId .stf-btn-outline {
  background: #ffffff;
  border-color: #4338ca;
  color: #1e3a8a;
  box-shadow: 0 1px 2px rgba(5, 5, 61, 0.06);
}

#leadProfileId .stf-btn-outline:hover {
  background: #eef2ff;
}

#leadProfileId .stf-table-card {
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 4px 6px rgba(5, 5, 61, 0.06);
}

#leadProfileId .stf-table-banner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #05053d 0%, #1a1a7a 100%);
  padding: 1rem 1.25rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

#leadProfileId .stf-table-banner-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

#leadProfileId .stf-table-banner-sub {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

#leadProfileId .stf-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

#leadProfileId .stf-filter-search {
  flex: 1 1 14rem;
  min-width: 0;
  height: 2.15rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.96);
  color: #1e3a5f;
  font-size: 0.8rem;
  padding: 0 0.7rem;
}

#leadProfileId .stf-filter-search:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.45);
}

#leadProfileId .stf-banner-add-btn {
  height: 2.15rem;
  padding: 0 0.85rem;
  background: #ffffff;
  color: #1e3a8a;
  border-color: transparent;
  font-size: 0.8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

#leadProfileId .stf-banner-add-btn:hover {
  background: #eef2ff;
}

#leadProfileId .stf-filter-count {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
  white-space: nowrap;
}

#leadProfileId .stf-table-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#leadProfileId #stfStaffTable.stf-staff-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

#leadProfileId #stfStaffTable.stf-staff-table thead {
  background: #f9fafb;
}

#leadProfileId #stfStaffTable .stf-th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#leadProfileId #stfStaffTable .stf-th-sno {
  width: 4.5rem;
}

#leadProfileId #stfStaffTable .stf-th-actions {
  text-align: center;
  padding-left: 0.75rem;
  padding-right: 1rem;
}

#leadProfileId #stfStaffTable .stf-td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  vertical-align: middle;
  border-bottom: 1px solid #f3f4f6;
  background: #ffffff;
}

#leadProfileId #stfStaffTable .stf-td-sno {
  color: #6b7280;
  white-space: nowrap;
}

#leadProfileId #stfStaffTable .stf-name-stack {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  line-height: 1.35;
}

#leadProfileId #stfStaffTable .stf-name-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#leadProfileId #stfStaffTable .stf-td-designation {
  color: #374151;
}

#leadProfileId #stfStaffTable .stf-td-mobile {
  white-space: nowrap;
}

#leadProfileId #stfStaffTable .stf-mobile-link {
  color: #374151;
  text-decoration: none;
}

#leadProfileId #stfStaffTable .stf-mobile-link:hover {
  color: #4338ca;
}

#leadProfileId #stfStaffTable .stf-mobile-empty {
  color: #d1d5db;
}

#leadProfileId #stfStaffTable .stf-td-actions {
  text-align: center;
  white-space: nowrap;
  padding-left: 0.75rem;
  padding-right: 1rem;
}

#leadProfileId #stfStaffTable .stf-actions-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

#leadProfileId #stfStaffTable .stf-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #4f46e5 0%, #1a1a7a 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(5, 5, 61, 0.12);
  cursor: pointer;
}

#leadProfileId #stfStaffTable .stf-action-icon:hover {
  opacity: 0.95;
}

#leadProfileId #stfStaffTable .stf-staff-row:hover .stf-td {
  background: rgba(238, 242, 255, 0.55);
}

@media (max-width: 767px) {
  #leadProfileId .stf-filter-search,
  #leadProfileId .stf-banner-add-btn {
    flex: 1 1 100%;
  }

  #leadProfileId .stf-filter-count {
    margin-left: 0;
    width: 100%;
  }
}

/* Company View — Dashboard Summary settings entry */
#dashboard_summary_settings .cv-dss-settings-wrap {
  padding: 12px 8px 8px;
  text-align: center;
}

#dashboard_summary_settings .cv-dss-settings-btn {
  margin-top: 4px;
}

/* Office staff profile — Status tab */
#surveyProDatas .osp-status-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 40rem;
}

#surveyProDatas .osp-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

#surveyProDatas .osp-status-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
}

#surveyProDatas .osp-status-form {
  display: flex;
  flex-direction: column;
}

#surveyProDatas .osp-status-row {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f3f4f6;
}

#surveyProDatas .osp-status-label {
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
}

#surveyProDatas .osp-status-value {
  color: #111827;
  font-size: 0.95rem;
}

#surveyProDatas .osp-status-exit-box {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 0.6rem;
}

#surveyProDatas .osp-status-exit-box .osp-status-label {
  display: block;
  margin-bottom: 0.4rem;
}

#surveyProDatas .osp-status-required {
  color: #dc2626;
}

#surveyProDatas .osp-status-hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: #6b7280;
}

#surveyProDatas .osp-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

#surveyProDatas .osp-status-form input.error,
#surveyProDatas .osp-status-form select.error {
  border: 1px solid #f97316 !important;
}

@media (max-width: 639px) {
  #surveyProDatas .osp-status-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }
}

/* ============================================================
   Edit Invoice (edit_invoice.jsp) — einv-* prefix (new only)
   Layout matches generate_invoice / generate_non_gst_invoice.
   ============================================================ */
#editInvoicePageRoot {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.einv-page-wrap {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.einv-title {
  color: #111827;
}

.einv-company-header {
  background: #f9fafb;
}

.einv-label,
#editInvoicePageRoot .invoice-field-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.einv-meta-grid .einv-label,
.einv-meta-grid .invoice-field-label {
  display: block;
  margin-bottom: 2px;
}

.einv-table-wrap,
#editInvoicePageRoot .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.einv-items-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.einv-items-table th,
.einv-items-table td {
  border: 1px solid #e5e7eb;
  padding: 0.45rem 0.5rem;
  font-size: 0.8125rem;
  vertical-align: middle;
}

.einv-items-table th {
  background: #f3f4f6;
  font-weight: 700;
  color: #111827;
  text-align: center;
  white-space: nowrap;
}

.einv-items-table td {
  color: #374151;
}

.einv-items-table input,
.einv-items-table select {
  min-width: 0;
  font-size: 13px;
}

.einv-items-table .product_name {
  min-width: 120px;
}

.einv-qty-input {
  max-width: 5rem;
}

.einv-input,
#editInvoicePageRoot .einv-input,
.einv-modal .einv-input {
  width: 100%;
  min-height: 38px;
  padding: 0.4rem 0.7rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  color: #1f2937;
  font-size: 0.875rem;
  box-shadow: none;
  box-sizing: border-box;
}

.einv-input:focus,
#editInvoicePageRoot .einv-input:focus,
.einv-modal .einv-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.einv-row-action {
  text-align: center;
  width: 2.5rem;
}

.einv-row-remove {
  color: #dc2626;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem;
}

.einv-row-remove:hover {
  color: #991b1b;
}

.einv-delete-btn,
#invoiceTableId .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid #fecaca;
  border-radius: 0.45rem;
  background: #fef2f2;
  color: #dc2626;
  cursor: pointer;
}

.einv-delete-btn:hover,
#invoiceTableId .btn-danger:hover {
  background: #dc2626;
  color: #fff;
}

.einv-add-link {
  text-decoration: none;
}

#invoiceDetTblId tr:empty {
  display: none;
}

.einv-total-table td {
  padding: 4px 8px;
}

.einv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.einv-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5, 5, 61, 0.4);
  overflow-y: auto;
}

.einv-modal.einv-modal-open,
.einv-modal.pp-bootbox-open,
.einv-modal.in {
  display: flex !important;
}

body.einv-modal-open-body {
  overflow: hidden;
}

.einv-modal-dialog {
  width: min(34rem, 95%);
  margin: auto;
}

.einv-modal-content {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px rgba(5, 5, 61, 0.18);
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.einv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #1d4ed8;
}

.einv-modal-header .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.einv-modal-x {
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.einv-modal-body {
  padding: 1rem;
}

.einv-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.einv-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.einv-modal .btn-success,
.einv-modal .einv-btn.btn-success {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.einv-modal .btn-success:hover {
  background: #1d4ed8;
}

.einv-modal .btn-danger,
.einv-modal .einv-btn.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  background: #dc2626;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.einv-modal .btn-danger:hover {
  background: #b91c1c;
}

body.einv-page .ui-autocomplete {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  max-height: 200px;
  max-width: min(420px, 92vw);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1100;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.einv-page .ui-autocomplete .ui-menu-item,
body.einv-page .ui-autocomplete .ui-menu-item-wrapper {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
}

body.einv-page .ui-helper-hidden-accessible {
  display: none;
}

#editInvoicePageRoot label.error {
  color: #dc2626;
  font-size: 0.75rem;
}

#editInvoicePageRoot input.error,
.einv-modal input.error {
  border: 1px solid #f97316 !important;
}

@media (max-width: 1024px) {
  .einv-items-table {
    min-width: 640px;
  }
}

@media (max-width: 768px) {
  .einv-title {
    font-size: 1.125rem;
    padding: 10px 8px;
  }

  #editInvoicePageRoot .einv-input,
  .einv-modal .einv-input,
  #editInvoicePageRoot .einv-items-table input {
    min-height: 42px;
    font-size: 16px;
  }

  .einv-items-table {
    min-width: 580px;
  }

  .einv-items-table td,
  .einv-items-table th {
    padding: 6px 4px;
    font-size: 12px;
  }

  body.einv-page .ui-autocomplete {
    max-width: 96vw;
  }
}

@media (max-width: 480px) {
  .einv-items-table {
    min-width: 520px;
  }
}

/* Invoice product name nice-edit (generate + view) */
.inv-pn-cell {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.inv-pn-input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  max-height: 120px;
  line-height: 1.3;
  white-space: pre-wrap;
  resize: none;
  overflow: auto;
  font-size: 13px;
  box-sizing: border-box;
}

.inv-pn-expand-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  line-height: 26px;
  padding: 0;
  font-size: 13px;
}

.inv-pn-expand-btn:hover {
  background: #eff6ff;
  color: #2563eb;
}

.inv-pn-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
}

.inv-pn-editor-overlay.inv-pn-editor-hidden {
  display: none;
}

.inv-pn-editor-panel {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 16px;
}

.inv-pn-editor-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 10px;
}

.inv-pn-editor-text {
  width: 100%;
  min-height: 200px;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  resize: vertical;
}

.inv-pn-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.inv-pn-editor-cancel,
.inv-pn-editor-apply {
  min-width: 88px;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.inv-pn-editor-cancel {
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
}

.inv-pn-editor-apply {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #fff;
}

.inv-pn-prewrap {
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 768px) {
  .inv-pn-input,
  .inv-pn-editor-text {
    font-size: 16px;
  }
}

/* Asset Profile Dashboard (apd-*) — unique names, do not reuse elsewhere */
#root_asset_profile .apd-wrap {
  width: 100%;
}

#root_asset_profile .apd-page-head {
  margin-bottom: 1.25rem;
}

#root_asset_profile .apd-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

#root_asset_profile .apd-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #6b7280;
}

#root_asset_profile .apd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

#root_asset_profile .apd-kpi-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  padding: 0.9rem 1rem 0.95rem 1.05rem;
  position: relative;
  overflow: hidden;
}

#root_asset_profile .apd-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #4f46e5;
}

#root_asset_profile .apd-accent-indigo::before { background: #4f46e5; }
#root_asset_profile .apd-accent-violet::before { background: #7c3aed; }
#root_asset_profile .apd-accent-green::before { background: #16a34a; }
#root_asset_profile .apd-accent-blue::before { background: #2563eb; }
#root_asset_profile .apd-accent-amber::before { background: #d97706; }
#root_asset_profile .apd-accent-red::before { background: #dc2626; }

#root_asset_profile .apd-kpi-icon {
  color: #4f46e5;
  margin-bottom: 0.35rem;
}

#root_asset_profile .apd-kpi-icon svg,
#root_asset_profile .apd-alert-icon svg,
#root_asset_profile .apd-recent-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

#root_asset_profile .apd-kpi-value {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

#root_asset_profile .apd-kpi-label {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
  font-weight: 500;
}

#root_asset_profile .apd-mid-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

#root_asset_profile .apd-panel.ho-card {
  margin-bottom: 0;
}

#root_asset_profile .apd-card-title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2937;
}

#root_asset_profile .apd-empty {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_profile .apd-office-row {
  margin-bottom: 0.85rem;
}

#root_asset_profile .apd-office-row:last-child {
  margin-bottom: 0;
}

#root_asset_profile .apd-office-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

#root_asset_profile .apd-office-name {
  color: #374151;
  font-weight: 500;
}

#root_asset_profile .apd-office-count {
  color: #111827;
  font-weight: 600;
}

#root_asset_profile .apd-office-track {
  height: 8px;
  background: #eef2ff;
  border-radius: 999px;
  overflow: hidden;
}

#root_asset_profile .apd-office-bar {
  display: block;
  height: 100%;
  width: var(--apd-bar-width, 0%);
  background: #4f46e5;
  border-radius: 999px;
}

#root_asset_profile .apd-alert-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  border-radius: 0.6rem;
  margin-bottom: 0.55rem;
}

#root_asset_profile .apd-alert-row:last-child {
  margin-bottom: 0;
}

#root_asset_profile .apd-alert-red { background: #fef2f2; color: #991b1b; }
#root_asset_profile .apd-alert-amber { background: #fffbeb; color: #92400e; }
#root_asset_profile .apd-alert-blue { background: #eff6ff; color: #1e40af; }

#root_asset_profile .apd-alert-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
}

#root_asset_profile .apd-alert-text {
  font-size: 0.88rem;
  line-height: 1.4;
}

#root_asset_profile .apd-recent-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(7rem, 0.9fr) minmax(0, 1.4fr) auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid #f3f4f6;
}

#root_asset_profile .apd-recent-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#root_asset_profile .apd-recent-icon {
  color: #4f46e5;
}

#root_asset_profile .apd-recent-code {
  font-size: 0.82rem;
  font-weight: 600;
  color: #4338ca;
}

#root_asset_profile .apd-recent-code-link {
  text-decoration: underline;
  cursor: pointer;
}

#root_asset_profile .apd-recent-code-link:hover {
  color: #312e81;
}

#root_asset_profile .apd-recent-name {
  font-size: 0.9rem;
  color: #374151;
}

#root_asset_profile .apd-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

#root_asset_profile .apd-status-assigned {
  background: #dcfce7;
  color: #166534;
}

#root_asset_profile .apd-status-store {
  background: #dbeafe;
  color: #1d4ed8;
}

#root_asset_profile .apd-status-repair {
  background: #ffedd5;
  color: #c2410c;
}

#root_asset_profile .apd-status-other {
  background: #f3f4f6;
  color: #4b5563;
}

@media (min-width: 640px) {
  #root_asset_profile .apd-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #root_asset_profile .apd-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #root_asset_profile .apd-mid-grid {
    grid-template-columns: 1fr 1fr;
  }

  #root_asset_profile .apd-kpi-value {
    font-size: 1.45rem;
  }
}

@media (max-width: 639px) {
  #root_asset_profile .apd-recent-row {
    grid-template-columns: 1.5rem 1fr auto;
    grid-template-areas:
      "icon code pill"
      "icon name pill";
  }

  #root_asset_profile .apd-recent-icon { grid-area: icon; }
  #root_asset_profile .apd-recent-code { grid-area: code; }
  #root_asset_profile .apd-recent-name { grid-area: name; }
  #root_asset_profile .apd-status-pill { grid-area: pill; }
}

/* Asset Category master (apc-*) — unique names, do not reuse elsewhere */
#root_asset_profile .apc-wrap {
  width: 100%;
}

#root_asset_profile .apc-page-head {
  margin-bottom: 1.25rem;
}

#root_asset_profile .apc-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

#root_asset_profile .apc-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #6b7280;
}

#root_asset_profile .apc-panel.ho-card {
  margin-bottom: 0;
}

#root_asset_profile .apc-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#root_asset_profile .apc-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}

#root_asset_profile .apc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_asset_profile .apc-add-btn svg,
#root_asset_profile .apc-edit-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_profile .apc-empty {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_profile .apc-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

#root_asset_profile .apc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#root_asset_profile .apc-table th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#root_asset_profile .apc-table td {
  padding: 0.8rem 0.9rem;
  border-top: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}

#root_asset_profile .apc-action-col {
  width: 4.5rem;
  text-align: center;
}

#root_asset_profile .apc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

#root_asset_profile .apc-pill-unique {
  background: #ede9fe;
  color: #6d28d9;
}

#root_asset_profile .apc-pill-bulk {
  background: #ccfbf1;
  color: #0f766e;
}

#root_asset_profile .apc-pill-active {
  background: #dcfce7;
  color: #166534;
}

#root_asset_profile .apc-pill-inactive {
  background: #f3f4f6;
  color: #4b5563;
}

#root_asset_profile .apc-edit-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4f46e5;
  border-radius: 0.45rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#root_asset_profile .apc-edit-btn:hover {
  background: #eef2ff;
}

#root_asset_profile .apc-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

#root_asset_profile .apc-view-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_profile .apc-required {
  color: #dc2626;
}

#root_asset_profile .apc-help {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

#root_asset_profile .apc-check-row {
  margin-top: 0.25rem;
}

#root_asset_profile .apc-check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #374151;
}

#root_asset_profile .apc-btn-cancel {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

#root_asset_profile .apc-field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #dc2626;
}

#root_asset_profile .apc-modal .ho-modal-footer {
  justify-content: flex-end;
}

#root_asset_profile .apc-modal {
  z-index: 1050;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
}

#root_asset_profile .apc-modal-box.ho-modal-box {
  max-width: 32rem;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

#root_asset_profile .apc-modal-header.ho-modal-header {
  align-items: flex-start;
  padding: 1.15rem 1.35rem 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #eef2f7;
}

#root_asset_profile .apc-modal-heading {
  min-width: 0;
  flex: 1;
}

#root_asset_profile .apc-modal-heading .ho-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#root_asset_profile .apc-modal-sub {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #64748b;
}

#root_asset_profile .apc-modal-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#root_asset_profile .apc-modal-close:hover {
  background: #f1f5f9;
}

#root_asset_profile .apc-modal-body.ho-modal-body {
  padding: 1.25rem 1.35rem 0.35rem;
}

#root_asset_profile .apc-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#root_asset_profile .apc-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  position: relative;
}

#root_asset_profile .apc-field-label {
  display: block;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
}

#root_asset_profile .apc-field-input.ho-form-input,
#root_asset_profile .apc-field-input.form-control {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: #1e293b;
  background: #fff;
  box-shadow: none;
}

#root_asset_profile .apc-field-input.ho-form-input:focus,
#root_asset_profile .apc-field-input.form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

#root_asset_profile .apc-field-input.ho-form-input.error,
#root_asset_profile .apc-field-input.form-control.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

#root_asset_profile .apc-field-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #94a3b8;
}

#root_asset_profile .apc-mode-select {
  display: none;
  pointer-events: none;
}

#root_asset_profile .apc-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

#root_asset_profile .apc-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.75rem;
  background: #fff;
  cursor: pointer;
  color: #334155;
}

#root_asset_profile .apc-mode-card:hover {
  border-color: #a5b4fc;
  background: #f8fafc;
}

#root_asset_profile .apc-mode-card.is-selected {
  border-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

#root_asset_profile .apc-mode-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

#root_asset_profile .apc-mode-card-hint {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #64748b;
}

#root_asset_profile .apc-status-box {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #f8fafc;
}

#root_asset_profile .apc-status-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  cursor: pointer;
}

#root_asset_profile .apc-status-label input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

#root_asset_profile .apc-status-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#root_asset_profile .apc-status-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
}

#root_asset_profile .apc-status-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
}

#root_asset_profile .apc-modal-footer {
  margin: 0.35rem -1.35rem 0;
  padding: 1rem 1.35rem;
  background: #fff;
}

@media (max-width: 639px) {
  #root_asset_profile .apc-title {
    font-size: 1.35rem;
  }

  #root_asset_profile .apc-add-btn {
    width: 100%;
    justify-content: center;
  }

  #root_asset_profile .apc-mode-grid {
    grid-template-columns: 1fr;
  }

  #root_asset_profile .apc-modal-footer {
    flex-direction: column-reverse;
  }

  #root_asset_profile .apc-modal-footer .ho-btn {
    width: 100%;
    justify-content: center;
  }
}

#root_asset_profile .apc-verify-date {
  font-size: 0.85rem;
  color: #334155;
  white-space: nowrap;
}

#root_asset_profile .apc-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

#root_asset_profile .apc-verify-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_profile .apc-verify-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#root_asset_profile .apc-hist-link {
  font-size: 0.85rem;
  color: #4f46e5;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

#root_asset_profile .apc-hist-link:hover {
  color: #4338ca;
}

#root_asset_profile .apc-hist-modal {
  z-index: 1050;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
}

#root_asset_profile .apc-hist-box.ho-modal-box {
  max-width: 36rem;
  width: 100%;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

#root_asset_profile .apc-hist-sub {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #64748b;
}

#root_asset_profile .apc-hist-box .apc-table-wrap {
  max-height: 24rem;
  overflow: auto;
}

#root_asset_profile .apc-inactive-panel {
  margin-top: 1.25rem;
}

#root_view_asset .ava-header-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex-wrap: wrap;
}

#root_view_asset .ava-page-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 28rem);
}

#root_view_asset .ava-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

#root_view_asset .ava-back-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

#root_view_asset .ava-back-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_view_asset .ava-panel.ho-card {
  margin-bottom: 0;
}

#root_view_asset .ava-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#root_view_asset .ava-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}

#root_view_asset .ava-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_view_asset .ava-add-btn svg,
#root_view_asset .ava-edit-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_view_asset .ava-search-row {
  margin-bottom: 0.9rem;
}

#root_view_asset .ava-search-input {
  max-width: 22rem;
  width: 100%;
}

#root_view_asset .ava-empty {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_view_asset .ava-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

#root_view_asset .ava-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

#root_view_asset .ava-table th {
  text-align: left;
  padding: 0.75rem 0.8rem;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#root_view_asset .ava-table td {
  padding: 0.75rem 0.8rem;
  border-top: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}

#root_view_asset .ava-action-col {
  width: 4.5rem;
  text-align: center;
}

#root_view_asset .ava-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

#root_view_asset .ava-pill-unique {
  background: #ede9fe;
  color: #6d28d9;
}

#root_view_asset .ava-pill-bulk {
  background: #ccfbf1;
  color: #0f766e;
}

#root_view_asset .ho-page-header .ava-pill-unique {
  background: rgba(237, 233, 254, 0.95);
}

#root_view_asset .ho-page-header .ava-pill-bulk {
  background: rgba(204, 251, 241, 0.95);
}

#root_view_asset .ava-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

#root_view_asset .ava-status-assigned {
  background: #dcfce7;
  color: #166534;
}

#root_view_asset .ava-status-store {
  background: #dbeafe;
  color: #1d4ed8;
}

#root_view_asset .ava-status-repair {
  background: #fef3c7;
  color: #92400e;
}

#root_view_asset .ava-status-other {
  background: #f3f4f6;
  color: #4b5563;
}

#root_view_asset .ava-edit-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4f46e5;
  border-radius: 0.45rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#root_view_asset .ava-edit-btn:hover {
  background: #eef2ff;
}

#root_view_asset .ava-required {
  color: #dc2626;
}

#root_view_asset .ava-btn-cancel {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

#root_view_asset .ava-field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #dc2626;
}

#root_view_asset .ava-modal {
  z-index: 1050;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
}

#root_view_asset .ava-modal .ho-modal-footer {
  justify-content: flex-end;
}

#root_view_asset .ava-modal-box.ho-modal-box {
  max-width: 52rem;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

#root_view_asset .ava-modal-header.ho-modal-header {
  align-items: flex-start;
  padding: 1.15rem 1.35rem 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #eef2f7;
}

#root_view_asset .ava-modal-heading {
  min-width: 0;
  flex: 1;
}

#root_view_asset .ava-modal-heading .ho-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

#root_view_asset .ava-modal-sub {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #64748b;
}

#root_view_asset .ava-modal-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#root_view_asset .ava-modal-close:hover {
  background: #f1f5f9;
}

#root_view_asset .ava-modal-body.ho-modal-body {
  padding: 1.25rem 1.35rem 0.35rem;
}

#root_view_asset .ava-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#root_view_asset .ava-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  background: #f8fafc;
}

#root_view_asset .ava-group-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4338ca;
}

#root_view_asset .ava-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

#root_view_asset .ava-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  position: relative;
}

#root_view_asset .ava-field-label {
  display: block;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.01em;
}

#root_view_asset .ava-field-input.ho-form-input,
#root_view_asset .ava-field-input.form-control {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: #1e293b;
  background: #fff;
  box-shadow: none;
}

#root_view_asset .ava-notes {
  min-height: 4.5rem;
  resize: vertical;
}

#root_view_asset .ava-field-input.ho-form-input:focus,
#root_view_asset .ava-field-input.form-control:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

#root_view_asset .ava-field-input.ho-form-input.error,
#root_view_asset .ava-field-input.form-control.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

#root_view_asset .ava-field-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #94a3b8;
}

#root_view_asset .ava-mode-select {
  display: none;
  pointer-events: none;
}

#root_view_asset .ava-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

#root_view_asset .ava-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.75rem;
  background: #fff;
  cursor: pointer;
  color: #334155;
}

#root_view_asset .ava-mode-card:hover {
  border-color: #a5b4fc;
  background: #f8fafc;
}

#root_view_asset .ava-mode-card.is-selected {
  border-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

#root_view_asset .ava-mode-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

#root_view_asset .ava-mode-card-hint {
  font-size: 0.75rem;
  line-height: 1.35;
  color: #64748b;
}

#root_view_asset .ava-status-box {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #fff;
}

#root_view_asset .ava-status-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  cursor: pointer;
}

#root_view_asset .ava-status-label input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

#root_view_asset .ava-status-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#root_view_asset .ava-status-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
}

#root_view_asset .ava-status-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
}

#root_view_asset .ava-modal-footer {
  margin: 0.35rem -1.35rem 0;
  padding: 1rem 1.35rem;
  background: #fff;
}

@media (max-width: 639px) {
  #root_view_asset .ava-add-btn,
  #root_view_asset .ava-back-btn {
    width: 100%;
    justify-content: center;
  }

  #root_view_asset .ava-search-input {
    max-width: none;
  }

  #root_view_asset .ava-grid,
  #root_view_asset .ava-mode-grid {
    grid-template-columns: 1fr;
  }

  #root_view_asset .ava-modal-footer {
    flex-direction: column-reverse;
  }

  #root_view_asset .ava-modal-footer .ho-btn {
    width: 100%;
    justify-content: center;
  }

  #root_view_asset .ho-page-header-inner {
    flex-wrap: wrap;
  }
}

#root_asset_profile .asa-wrap {
  width: 100%;
}

#root_asset_profile .asa-page-head {
  margin-bottom: 1.25rem;
}

#root_asset_profile .asa-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

#root_asset_profile .asa-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #6b7280;
}

#root_asset_profile .asa-filter-card.ho-card,
#root_asset_profile .asa-panel.ho-card {
  margin-bottom: 1.25rem;
}

#root_asset_profile .asa-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

#root_asset_profile .asa-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

#root_asset_profile .asa-search-input {
  flex: 1 1 16rem;
  min-width: 12rem;
}

#root_asset_profile .asa-search-btn,
#root_asset_profile .asa-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_asset_profile .asa-add-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_profile .asa-empty {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_profile .asa-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

#root_asset_profile .asa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#root_asset_profile .asa-table th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#root_asset_profile .asa-table td {
  padding: 0.8rem 0.9rem;
  border-top: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}

#root_asset_profile .asa-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

#root_asset_profile .asa-view-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_profile .asa-row {
  cursor: default;
}

#root_asset_profile .asa-row:hover {
  background: #f8fafc;
}

#root_asset_profile .asa-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

#root_asset_profile .asa-status-assigned {
  background: #dcfce7;
  color: #166534;
}

#root_asset_profile .asa-status-inuse {
  background: #ede9fe;
  color: #6d28d9;
}

#root_asset_profile .asa-status-store {
  background: #dbeafe;
  color: #1d4ed8;
}

#root_asset_profile .asa-status-repair {
  background: #fef3c7;
  color: #92400e;
}

#root_asset_profile .asa-status-other {
  background: #f3f4f6;
  color: #4b5563;
}

#root_asset_profile .asa-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

#root_asset_profile .asa-pager-count {
  font-size: 0.85rem;
  color: #6b7280;
}

#root_asset_profile .asa-pager-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#root_asset_profile .asa-page-btn {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.45rem;
  background: #fff;
  color: #374151;
  font-size: 0.82rem;
  cursor: pointer;
}

#root_asset_profile .asa-page-btn.is-active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

#root_asset_profile .asa-page-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

#root_asset_profile .asa-required {
  color: #dc2626;
}

#root_asset_profile .asa-btn-cancel {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

#root_asset_profile .asa-field-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: #dc2626;
}

#root_asset_profile .asa-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

#root_asset_profile .asa-field-label {
  display: block;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

#root_asset_profile .asa-field-input.ho-form-input,
#root_asset_profile .asa-field-input.form-control {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: #1e293b;
  background: #fff;
}

#root_asset_profile .asa-modal {
  z-index: 1050;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
}

#root_asset_profile .asa-modal .ho-modal-footer {
  justify-content: flex-end;
}

#root_asset_profile .asa-modal-box.ho-modal-box {
  max-width: 40rem;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

#root_asset_profile .asa-modal-header.ho-modal-header {
  align-items: flex-start;
  padding: 1.15rem 1.35rem 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #eef2f7;
}

#root_asset_profile .asa-modal-heading {
  min-width: 0;
  flex: 1;
}

#root_asset_profile .asa-modal-heading .ho-modal-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
}

#root_asset_profile .asa-modal-sub {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: #64748b;
}

#root_asset_profile .asa-modal-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

#root_asset_profile .asa-modal-close:hover {
  background: #f1f5f9;
}

#root_asset_profile .asa-modal-body.ho-modal-body {
  padding: 1.25rem 1.35rem 0.35rem;
}

#root_asset_profile .asa-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#root_asset_profile .asa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

#root_asset_profile .asa-mode-select {
  display: none;
  pointer-events: none;
}

#root_asset_profile .asa-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

#root_asset_profile .asa-mode-card {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.75rem;
  background: #fff;
  cursor: pointer;
  color: #334155;
}

#root_asset_profile .asa-mode-card.is-selected {
  border-color: #4f46e5;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

#root_asset_profile .asa-mode-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

#root_asset_profile .asa-modal-footer {
  margin: 0.35rem -1.35rem 0;
  padding: 1rem 1.35rem;
  background: #fff;
}

@media (max-width: 1023px) {
  #root_asset_profile .asa-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  #root_asset_profile .asa-title {
    font-size: 1.35rem;
  }

  #root_asset_profile .asa-filter-grid,
  #root_asset_profile .asa-grid,
  #root_asset_profile .asa-mode-grid {
    grid-template-columns: 1fr;
  }

  #root_asset_profile .asa-search-btn,
  #root_asset_profile .asa-add-btn {
    width: 100%;
    justify-content: center;
  }

  #root_asset_profile .asa-modal-footer {
    flex-direction: column-reverse;
  }

  #root_asset_profile .asa-modal-footer .ho-btn {
    width: 100%;
    justify-content: center;
  }
}

#root_asset_transfer .atr-header-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex-wrap: wrap;
}

#root_asset_transfer .atr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

#root_asset_transfer .atr-back-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

#root_asset_transfer .atr-back-btn svg,
#root_asset_transfer .atr-save-btn svg,
#root_asset_transfer .atr-tag svg,
#root_asset_transfer .atr-history-icon svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_transfer .atr-code-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #eef2ff;
  font-size: 0.78rem;
  font-weight: 600;
}

#root_asset_transfer .atr-panel.ho-card {
  margin-bottom: 1.25rem;
}

#root_asset_transfer .atr-card-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
}

#root_asset_transfer .atr-card-sub {
  margin: 0.35rem 0 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_transfer .atr-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

#root_asset_transfer .atr-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.82rem;
}

#root_asset_transfer .atr-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

#root_asset_transfer .atr-status-assigned {
  background: #dcfce7;
  color: #166534;
}

#root_asset_transfer .atr-status-inuse {
  background: #ede9fe;
  color: #6d28d9;
}

#root_asset_transfer .atr-status-store {
  background: #dbeafe;
  color: #1d4ed8;
}

#root_asset_transfer .atr-status-repair {
  background: #fef3c7;
  color: #92400e;
}

#root_asset_transfer .atr-status-other {
  background: #f3f4f6;
  color: #4b5563;
}

#root_asset_transfer .ho-page-header .atr-status-assigned,
#root_asset_transfer .ho-page-header .atr-status-inuse,
#root_asset_transfer .ho-page-header .atr-status-store,
#root_asset_transfer .ho-page-header .atr-status-repair,
#root_asset_transfer .ho-page-header .atr-status-other {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

#root_asset_transfer .atr-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

#root_asset_transfer .atr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

#root_asset_transfer .atr-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#root_asset_transfer .atr-field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

#root_asset_transfer .atr-field-input.ho-form-input {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  color: #1e293b;
  background: #fff;
}

#root_asset_transfer .atr-notes {
  min-height: 4.5rem;
  resize: vertical;
}

#root_asset_transfer .atr-actions {
  display: flex;
  justify-content: flex-end;
}

#root_asset_transfer .atr-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_asset_transfer .atr-empty {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_transfer .atr-history-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f3f4f6;
}

#root_asset_transfer .atr-history-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#root_asset_transfer .atr-history-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
}

#root_asset_transfer .atr-history-title {
  margin: 0;
  font-size: 0.9rem;
  color: #1f2937;
}

#root_asset_transfer .atr-history-meta {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

@media (max-width: 1023px) {
  #root_asset_transfer .atr-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  #root_asset_transfer .atr-grid {
    grid-template-columns: 1fr;
  }

  #root_asset_transfer .atr-back-btn,
  #root_asset_transfer .atr-save-btn {
    width: 100%;
    justify-content: center;
  }

  #root_asset_transfer .ho-page-header-inner {
    flex-wrap: wrap;
  }

  #root_asset_transfer .atr-actions {
    justify-content: stretch;
  }
}

#root_asset_transfer .atp-header-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex-wrap: wrap;
}

#root_asset_transfer .atp-back-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

#root_asset_transfer .atp-back-icon:hover {
  background: rgba(255, 255, 255, 0.24);
}

#root_asset_transfer .atp-back-icon svg,
#root_asset_transfer .atp-action-btn svg,
#root_asset_transfer .atp-action-outline svg,
#root_asset_transfer .atp-tab svg,
#root_asset_transfer .atp-tag svg,
#root_asset_transfer .atp-timeline-icon svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_transfer .atp-code-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #eef2ff;
  font-size: 0.8rem;
  font-weight: 600;
}

#root_asset_transfer .atp-panel.ho-card {
  margin-bottom: 1.25rem;
}

#root_asset_transfer .atp-card-title {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2937;
}

#root_asset_transfer .atp-overview {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

#root_asset_transfer .atp-overview-photo {
  width: 7.5rem;
  height: 7.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.85rem;
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #e0e7ff;
}

#root_asset_transfer .atp-overview-photo svg {
  width: 2.5rem;
  height: 2.5rem;
}

#root_asset_transfer .atp-overview-main {
  min-width: 0;
  flex: 1;
}

#root_asset_transfer .atp-overview-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

#root_asset_transfer .atp-asset-name {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
}

#root_asset_transfer .atp-asset-code {
  margin: 0.2rem 0 0.45rem;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_transfer .atp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#root_asset_transfer .atp-action-btn,
#root_asset_transfer .atp-action-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_asset_transfer .atp-action-outline {
  background: #fff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
}

#root_asset_transfer .atp-action-outline:hover {
  background: #eef2ff;
}

#root_asset_transfer .atp-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

#root_asset_transfer .atp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.82rem;
}

#root_asset_transfer .atp-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

#root_asset_transfer .atp-status-assigned {
  background: #dcfce7;
  color: #166534;
}

#root_asset_transfer .atp-status-inuse {
  background: #ede9fe;
  color: #6d28d9;
}

#root_asset_transfer .atp-status-store {
  background: #dbeafe;
  color: #1d4ed8;
}

#root_asset_transfer .atp-status-repair {
  background: #fef3c7;
  color: #92400e;
}

#root_asset_transfer .atp-status-other {
  background: #f3f4f6;
  color: #4b5563;
}

#root_asset_transfer .atp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid #e5e7eb;
  margin: -0.25rem 0 1rem;
}

#root_asset_transfer .atp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

#root_asset_transfer .atp-tab.is-active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

#root_asset_transfer .atp-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
}

#root_asset_transfer .atp-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid #f3f4f6;
}

#root_asset_transfer .atp-detail-label {
  font-size: 0.86rem;
  color: #6b7280;
}

#root_asset_transfer .atp-detail-value {
  font-size: 0.9rem;
  color: #111827;
  font-weight: 500;
  text-align: right;
}

#root_asset_transfer .atp-kv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 3rem;
  max-width: 54rem;
}

#root_asset_transfer .atp-kv-col {
  min-width: 0;
}

#root_asset_transfer .atp-kv-row {
  display: grid;
  grid-template-columns: 8.25rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid #e5e7eb;
}

#root_asset_transfer .atp-kv-row:last-child {
  border-bottom: none;
}

#root_asset_transfer .atp-kv-label {
  font-size: 0.875rem;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.4;
}

#root_asset_transfer .atp-kv-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
  word-break: break-word;
}

#root_asset_transfer .atp-kv-empty {
  font-weight: 500;
  color: #9ca3af;
}

@media (max-width: 900px) {
  #root_asset_transfer .atp-kv-grid {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
  }
}

#root_asset_transfer .atp-empty,
#root_asset_transfer .atp-note {
  margin: 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_transfer .atp-note p {
  margin: 0 0 0.5rem;
}

#root_asset_transfer .atp-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
}

#root_asset_transfer .atp-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 12rem;
  flex: 1 1 14rem;
}

#root_asset_transfer .atp-timeline-icon {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
}

#root_asset_transfer .atp-timeline-line {
  display: none;
}

#root_asset_transfer .atp-timeline-title {
  margin: 0;
  font-size: 0.88rem;
  color: #1f2937;
}

#root_asset_transfer .atp-timeline-meta {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #6b7280;
}

#root_asset_transfer .atp-modal {
  z-index: 1050;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
}

#root_asset_transfer .atp-modal.hidden {
  display: none;
}

#root_asset_transfer .atp-modal.is-open {
  display: flex;
}

#root_asset_transfer .atp-modal-box.ho-modal-box {
  max-width: 40rem;
  width: 100%;
}

#root_asset_transfer .atp-modal-sub {
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  color: #64748b;
}

#root_asset_transfer .atp-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#root_asset_transfer .atp-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

#root_asset_transfer .atp-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_asset_transfer .atp-field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

#root_asset_transfer .atp-field-input.ho-form-input {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
}

#root_asset_transfer .atp-notes {
  min-height: 4.5rem;
  resize: vertical;
}

#root_asset_transfer .atp-btn-cancel {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

#root_asset_transfer .atp-form-error {
  margin: 0;
  font-size: 0.82rem;
  color: #b91c1c;
}

#root_asset_transfer .atp-form-error.hidden {
  display: none;
}

#root_asset_transfer .atp-modal-footer {
  justify-content: flex-end;
}

@media (max-width: 1023px) {
  #root_asset_transfer .atp-details-grid,
  #root_asset_transfer .atp-modal-grid {
    grid-template-columns: 1fr;
  }

  #root_asset_transfer .atp-overview {
    flex-direction: column;
  }
}

@media (max-width: 639px) {
  #root_asset_transfer .atp-action-btn,
  #root_asset_transfer .atp-action-outline,
  #root_asset_transfer .atp-tab {
    width: 100%;
    justify-content: center;
  }

  #root_asset_transfer .atp-modal-footer {
    flex-direction: column-reverse;
  }

	#root_asset_transfer .atp-modal-footer .ho-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Asset transfer responsive fit — computer / tablet / mobile (new atp-*-fit classes only) */
#root_asset_transfer .atp-page {
  overflow-x: hidden;
  max-width: 100%;
}

#root_asset_transfer .atp-page .atp-header-fit {
  min-width: 0;
  max-width: 100%;
}

#root_asset_transfer .atp-page .atp-header-fit .ho-page-title {
  min-width: 0;
}

#root_asset_transfer .atp-page .atp-code-chip-fit {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#root_asset_transfer .atp-page .atp-overview-copy {
  min-width: 0;
  flex: 1 1 12rem;
}

#root_asset_transfer .atp-page .atp-tabs-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#root_asset_transfer .atp-page .atp-tabs-scroll .atp-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

#root_asset_transfer .atp-page .atp-actions-fit {
  max-width: 100%;
}

#root_asset_transfer .atp-page .atp-tag-row-fit {
  max-width: 100%;
}

#root_asset_transfer .atp-page .atp-modal-box-fit {
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  #root_asset_transfer .atp-page .atp-kv-grid-fit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #root_asset_transfer .atp-page .atp-overview-fit {
    flex-direction: row;
    align-items: flex-start;
  }

  #root_asset_transfer .atp-page .atp-actions-fit {
    justify-content: flex-end;
  }
}

@media (max-width: 1199px) {
  #root_asset_transfer .atp-page .atp-modal-grid-fit {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1023px) {
  #root_asset_transfer .atp-page .atp-overview-fit {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  #root_asset_transfer .atp-page .atp-overview-fit .atp-overview-photo {
    width: 6.25rem;
    height: 6.25rem;
  }

  #root_asset_transfer .atp-page .atp-kv-grid-fit {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: none;
  }

  #root_asset_transfer .atp-page .atp-modal-grid-fit {
    grid-template-columns: 1fr;
  }

  #root_asset_transfer .atp-page .atp-actions-fit {
    width: 100%;
  }
}

@media (max-width: 767px) {
  #root_asset_transfer .atp-page .atp-overview-fit {
    flex-direction: column;
  }

  #root_asset_transfer .atp-page .atp-kv-row-fit {
    grid-template-columns: 7.25rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }
}

@media (max-width: 639px) {
  #root_asset_transfer .atp-page .atp-main-fit {
    padding: 0.75rem;
  }

  #root_asset_transfer .atp-page .atp-panel-fit.ho-card {
    padding: 0.85rem;
    margin-bottom: 0.85rem;
  }

  #root_asset_transfer .atp-page .atp-header-fit .ho-page-title {
    font-size: 1.05rem;
  }

  #root_asset_transfer .atp-page .atp-code-chip-fit {
    font-size: 0.72rem;
    padding: 0.12rem 0.5rem;
  }

  #root_asset_transfer .atp-page .atp-overview-fit .atp-overview-photo {
    width: 5.25rem;
    height: 5.25rem;
  }

  #root_asset_transfer .atp-page .atp-overview-fit .atp-overview-photo svg {
    width: 1.85rem;
    height: 1.85rem;
  }

  #root_asset_transfer .atp-page .atp-overview-fit .atp-asset-name {
    font-size: 1.15rem;
  }

  #root_asset_transfer .atp-page .atp-tabs-scroll .atp-tab {
    width: auto;
    justify-content: flex-start;
    padding: 0.6rem 0.7rem;
    font-size: 0.82rem;
  }

  #root_asset_transfer .atp-page .atp-kv-row-fit {
    grid-template-columns: 1fr;
    row-gap: 0.15rem;
    padding: 0.65rem 0;
  }

  #root_asset_transfer .atp-page .atp-timeline-fit {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  #root_asset_transfer .atp-page .atp-timeline-fit .atp-timeline-item {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  #root_asset_transfer .atp-page .atp-modal-fit {
    padding: 0;
    align-items: flex-end;
  }

  #root_asset_transfer .atp-page .atp-modal-box-fit.ho-modal-box {
    max-width: 100%;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 1rem 1rem 0 0;
    margin: 0;
  }

  #root_asset_transfer .atp-page .atp-modal-fit .atp-field-input.ho-form-input {
    font-size: 16px;
  }
}

/* Asset transfer tab body — grouped fact tiles (new classes only) */
#root_asset_transfer .atp-tab-live:hover {
  color: #4338ca;
  background: #eef2ff;
  border-radius: 0.55rem 0.55rem 0 0;
}

#root_asset_transfer .atp-tab-body {
  min-height: 12rem;
}

#root_asset_transfer .atp-facts {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#root_asset_transfer .atp-fact-section {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  padding: 0.9rem 0.95rem 1rem;
}

#root_asset_transfer .atp-fact-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4338ca;
}

#root_asset_transfer .atp-fact-head svg,
#root_asset_transfer .atp-blank-icon svg,
#root_asset_transfer .atp-assign-avatar svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_transfer .atp-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 0.7rem;
}

#root_asset_transfer .atp-fact-tile {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: 4.15rem;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.7rem;
}

#root_asset_transfer .atp-fact-tile-accent {
  border-color: #c7d2fe;
  background: #eef2ff;
}

#root_asset_transfer .atp-fact-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#root_asset_transfer .atp-fact-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}

#root_asset_transfer .atp-fact-unset {
  font-weight: 500;
  color: #94a3b8;
}

#root_asset_transfer .atp-fact-notes-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1f2937;
}

#root_asset_transfer .atp-fact-hint {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

#root_asset_transfer .atp-assign-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

#root_asset_transfer .atp-assign-avatar {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
}

#root_asset_transfer .atp-assign-copy {
  min-width: 0;
}

#root_asset_transfer .atp-assign-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

#root_asset_transfer .atp-assign-meta {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
  color: #64748b;
}

#root_asset_transfer .atp-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 10rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

#root_asset_transfer .atp-blank-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
}

#root_asset_transfer .atp-blank-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}

#root_asset_transfer .atp-blank-copy {
  margin: 0;
  max-width: 22rem;
  font-size: 0.84rem;
  color: #64748b;
}

@media (max-width: 1023px) {
  #root_asset_transfer .atp-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  #root_asset_transfer .atp-fact-section {
    padding: 0.75rem;
  }

  #root_asset_transfer .atp-fact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  #root_asset_transfer .atp-fact-tile {
    min-height: 3.6rem;
    padding: 0.55rem 0.65rem;
  }

  #root_asset_transfer .atp-fact-value {
    font-size: 0.88rem;
  }

  #root_asset_transfer .atp-assign-card {
    padding: 0.75rem;
  }
}

/* Asset info mockup — sheet details, status dot, activity rail (new classes only) */
#root_asset_transfer .atp-hero-photo {
  width: 8.25rem;
  height: 8.25rem;
  border-radius: 0.9rem;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  color: #64748b;
}

#root_asset_transfer .atp-hero-photo svg {
  width: 2.75rem;
  height: 2.75rem;
}

#root_asset_transfer .atp-hero-name {
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #0f172a;
}

#root_asset_transfer .atp-hero-btn {
  border-radius: 0.65rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.95rem;
}

#root_asset_transfer .atp-hero-tags .atp-tag {
  border-radius: 0.55rem;
  background: #fff;
}

#root_asset_transfer .atp-status-dot-pill {
  gap: 0.4rem;
  padding: 0.22rem 0.75rem;
}

#root_asset_transfer .atp-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

#root_asset_transfer .atp-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 4.5rem;
  width: 100%;
}

#root_asset_transfer .atp-sheet-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 32rem;
}

#root_asset_transfer .atp-sheet-col {
  min-width: 0;
}

#root_asset_transfer .atp-sheet-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.82rem 0;
  border-bottom: 1px solid #eef0f3;
}

#root_asset_transfer .atp-sheet-row:last-child {
  border-bottom: none;
}

#root_asset_transfer .atp-sheet-label {
  font-size: 0.92rem;
  font-weight: 400;
  color: #6b7280;
  flex-shrink: 0;
}

#root_asset_transfer .atp-sheet-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  text-align: right;
  word-break: break-word;
}

#root_asset_transfer .atp-sheet-empty {
  font-weight: 500;
  color: #9ca3af;
}

#root_asset_transfer .atp-sheet-note {
  margin: 0.85rem 0 0;
  font-size: 0.84rem;
  color: #64748b;
}

#root_asset_transfer .atp-rail-card.ho-card {
  padding: 1.1rem 1.25rem;
}

#root_asset_transfer .atp-rail {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
}

#root_asset_transfer .atp-rail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 0;
  min-width: 0;
}

#root_asset_transfer .atp-rail-icon {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#root_asset_transfer .atp-rail-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

#root_asset_transfer .atp-rail-icon-assign {
  background: #dcfce7;
  color: #16a34a;
}

#root_asset_transfer .atp-rail-icon-move {
  background: #dbeafe;
  color: #2563eb;
}

#root_asset_transfer .atp-rail-copy {
  min-width: 0;
}

#root_asset_transfer .atp-rail-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
}

#root_asset_transfer .atp-rail-meta {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.4;
}

#root_asset_transfer .atp-rail-hl {
  color: #2563eb;
  font-weight: 600;
}

#root_asset_transfer .atp-rail-track {
  position: relative;
  flex: 0 0 4.75rem;
  height: 2px;
  background: #e5e7eb;
  align-self: center;
}

#root_asset_transfer .atp-rail-track:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #60a5fa;
  transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
  #root_asset_transfer .atp-sheet {
    column-gap: 2rem;
  }
}

@media (max-width: 767px) {
  #root_asset_transfer .atp-hero-photo {
    width: 5.5rem;
    height: 5.5rem;
  }

  #root_asset_transfer .atp-hero-name {
    font-size: 1.25rem;
  }

  #root_asset_transfer .atp-sheet {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  #root_asset_transfer .atp-rail {
    flex-direction: column;
    align-items: stretch;
  }

  #root_asset_transfer .atp-rail-track {
    flex: 0 0 1.35rem;
    width: 2px;
    height: 1.35rem;
    margin-left: 1.2rem;
    align-self: flex-start;
  }
}

/* Asset info Details — single-field pencil edit (new classes only) */
#root_asset_transfer .atp-edit-cell {
  min-width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

#root_asset_transfer .atp-edit-show {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  max-width: 100%;
}

#root_asset_transfer .atp-edit-show.hidden,
#root_asset_transfer .atp-edit-hide.hidden {
  display: none;
}

#root_asset_transfer .atp-edit-pencil,
#root_asset_transfer .atp-edit-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}

#root_asset_transfer .atp-edit-pencil:hover {
  background: #eef2ff;
}

#root_asset_transfer .atp-edit-save {
  color: #fff;
  background: #16a34a;
}

#root_asset_transfer .atp-edit-save:hover {
  background: #15803d;
}

#root_asset_transfer .atp-edit-pencil svg,
#root_asset_transfer .atp-edit-save svg {
  width: 0.9rem;
  height: 0.9rem;
}

#root_asset_transfer .atp-edit-form {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  width: 100%;
}

#root_asset_transfer .atp-edit-input {
  width: 100%;
  max-width: 14rem;
  min-height: 2.15rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid #c7d2fe;
  border-radius: 0.5rem;
  font-size: 0.88rem;
  color: #111827;
  background: #fff;
}

#root_asset_transfer textarea.atp-edit-input {
  min-height: 3.4rem;
  resize: vertical;
}

@media (max-width: 639px) {
  #root_asset_transfer .atp-edit-input {
    max-width: none;
    font-size: 16px;
  }
}

/* Asset info Assignment history table (new classes only) */
#root_asset_transfer .atp-assign-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

#root_asset_transfer .atp-assign-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#root_asset_transfer .atp-assign-table th {
  text-align: left;
  padding: 0.75rem 0.9rem;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#root_asset_transfer .atp-assign-table td {
  padding: 0.8rem 0.9rem;
  border-top: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}

#root_asset_transfer .atp-assign-table tbody tr:hover {
  background: #f8fafc;
}

/* Asset Reports (apr-*) — unique names, do not reuse elsewhere */
#root_asset_profile .apr-wrap {
  width: 100%;
}

#root_asset_profile .apr-banner {
  background: #4f46e5;
  color: #fff;
  border-radius: 0.85rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.1rem;
}

#root_asset_profile .apr-banner-title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
}

#root_asset_profile .apr-banner-sub {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #e0e7ff;
}

#root_asset_profile .apr-filter-card.ho-card {
  margin-bottom: 1.1rem;
}

#root_asset_profile .apr-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem;
}

#root_asset_profile .apr-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 10rem;
  flex: 1 1 10rem;
}

#root_asset_profile .apr-field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

#root_asset_profile .apr-field-input.ho-form-input {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
}

#root_asset_profile .apr-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

#root_asset_profile .apr-btn-export {
  background: #fff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_asset_profile .apr-btn-export:hover {
  background: #eef2ff;
}

#root_asset_profile .apr-btn-export svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_profile .apr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

#root_asset_profile .apr-kpi-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#root_asset_profile .apr-kpi-icon,
#root_asset_profile .apr-due-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
}

#root_asset_profile .apr-kpi-icon svg,
#root_asset_profile .apr-due-icon svg,
#root_asset_profile .apr-due-date svg {
  width: 1.15rem;
  height: 1.15rem;
}

#root_asset_profile .apr-tone-violet {
  background: #ede9fe;
  color: #6d28d9;
}

#root_asset_profile .apr-tone-green {
  background: #dcfce7;
  color: #15803d;
}

#root_asset_profile .apr-tone-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

#root_asset_profile .apr-tone-amber {
  background: #fef3c7;
  color: #b45309;
}

#root_asset_profile .apr-kpi-value {
  margin: 0.65rem 0 0.15rem;
  font-size: 1.55rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

#root_asset_profile .apr-kpi-label {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

#root_asset_profile .apr-panel.ho-card {
  margin-bottom: 1.1rem;
}

#root_asset_profile .apr-card-title {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

#root_asset_profile .apr-table-scroll {
  overflow-x: auto;
}

#root_asset_profile .apr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#root_asset_profile .apr-table th {
  text-align: left;
  padding: 0.7rem 0.85rem;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#root_asset_profile .apr-table td {
  padding: 0.8rem 0.85rem;
  border-top: 1px solid #f3f4f6;
  color: #374151;
}

#root_asset_profile .apr-table th:not(:first-child),
#root_asset_profile .apr-table td:not(:first-child) {
  text-align: right;
}

#root_asset_profile .apr-td-value {
  font-weight: 600;
  white-space: nowrap;
}

#root_asset_profile .apr-total-row td {
  background: #eef2ff;
  color: #312e81;
  font-weight: 700;
  border-top: 0;
}

#root_asset_profile .apr-empty {
  margin: 0;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_profile .apr-due-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f3f4f6;
}

#root_asset_profile .apr-due-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

#root_asset_profile .apr-due-name {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2937;
}

#root_asset_profile .apr-due-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: #4f46e5;
  font-weight: 600;
  white-space: nowrap;
}

#root_asset_profile .apr-due-name-link {
  text-decoration: underline;
  cursor: pointer;
  color: #4f46e5;
}

#root_asset_profile .apr-due-name-link:hover {
  color: #4338ca;
}

@media (max-width: 1023px) {
  #root_asset_profile .apr-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  #root_asset_profile .apr-kpi-grid {
    grid-template-columns: 1fr;
  }

  #root_asset_profile .apr-field,
  #root_asset_profile .apr-filter-actions,
  #root_asset_profile .apr-filter-actions .ho-btn {
    width: 100%;
  }

  #root_asset_profile .apr-filter-actions .ho-btn {
    justify-content: center;
  }
}

/* Asset Maintenance (amt-*) — unique names, do not reuse elsewhere */
#root_asset_profile .amt-wrap {
  width: 100%;
}

#root_asset_profile .amt-page-head {
  margin-bottom: 1.1rem;
}

#root_asset_profile .amt-title {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  color: #111827;
}

#root_asset_profile .amt-subtitle {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #6b7280;
}

#root_asset_profile .amt-chip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

#root_asset_profile .amt-chip {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  padding: 0.9rem 1.05rem;
}

#root_asset_profile .amt-chip-value {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: #0f172a;
}

#root_asset_profile .amt-chip-label {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #6b7280;
}

#root_asset_profile .amt-chip-violet {
  border-color: #ddd6fe;
}

#root_asset_profile .amt-chip-amber {
  border-color: #fde68a;
}

#root_asset_profile .amt-chip-red {
  border-color: #fecaca;
}

#root_asset_profile .amt-filter-card.ho-card,
#root_asset_profile .amt-panel.ho-card {
  margin-bottom: 1.1rem;
}

#root_asset_profile .amt-filter-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0.85rem;
}

#root_asset_profile .amt-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

#root_asset_profile .amt-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_asset_profile .amt-add-btn svg,
#root_asset_profile .amt-edit-btn svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_profile .amt-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#root_asset_profile .amt-field-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

#root_asset_profile .amt-field-input.ho-form-input {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.65rem;
  padding: 0.55rem 0.85rem;
}

#root_asset_profile .amt-required {
  color: #dc2626;
}

#root_asset_profile .amt-empty {
  margin: 0;
  padding: 0.85rem 0;
  font-size: 0.9rem;
  color: #6b7280;
}

#root_asset_profile .amt-table-wrap {
  overflow-x: auto;
}

#root_asset_profile .amt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#root_asset_profile .amt-table th {
  text-align: left;
  padding: 0.7rem 0.85rem;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#root_asset_profile .amt-table td {
  padding: 0.8rem 0.85rem;
  border-top: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}

#root_asset_profile .amt-row:hover {
  background: #f8fafc;
}

#root_asset_profile .amt-asset-code {
  display: block;
  font-weight: 700;
  color: #111827;
}

#root_asset_profile .amt-asset-name {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
}

#root_asset_profile .amt-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

#root_asset_profile .amt-type-amc {
  background: #dbeafe;
  color: #1d4ed8;
}

#root_asset_profile .amt-type-repair {
  background: #fef3c7;
  color: #b45309;
}

#root_asset_profile .amt-type-insurance {
  background: #dcfce7;
  color: #15803d;
}

#root_asset_profile .amt-type-service {
  background: #ede9fe;
  color: #6d28d9;
}

#root_asset_profile .amt-due {
  font-weight: 600;
}

#root_asset_profile .amt-due-overdue {
  color: #dc2626;
}

#root_asset_profile .amt-due-soon {
  color: #d97706;
}

#root_asset_profile .amt-due-ok,
#root_asset_profile .amt-due-none {
  color: #4b5563;
}

#root_asset_profile .amt-edit-btn {
  background: #fff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

#root_asset_profile .amt-edit-btn:hover {
  background: #eef2ff;
}

#root_asset_profile .amt-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

#root_asset_profile .amt-pager-count {
  font-size: 0.82rem;
  color: #6b7280;
}

#root_asset_profile .amt-pager-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

#root_asset_profile .amt-page-btn {
  min-width: 2rem;
  height: 2rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 0.45rem;
  color: #374151;
  cursor: pointer;
}

#root_asset_profile .amt-page-btn.is-active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

#root_asset_profile .amt-page-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

#root_asset_profile .amt-modal {
  z-index: 1050;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.48);
}

#root_asset_profile .amt-modal.hidden {
  display: none;
}

#root_asset_profile .amt-modal.is-open {
  display: flex;
}

#root_asset_profile .amt-modal-box.ho-modal-box {
  max-width: 44rem;
  width: 100%;
}

#root_asset_profile .amt-modal-sub {
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  color: #64748b;
}

#root_asset_profile .amt-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

#root_asset_profile .amt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

#root_asset_profile .amt-notes {
  min-height: 4.2rem;
  resize: vertical;
}

#root_asset_profile .amt-btn-cancel {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

#root_asset_profile .amt-modal-footer {
  justify-content: flex-end;
}

@media (max-width: 1023px) {
  #root_asset_profile .amt-chip-row,
  #root_asset_profile .amt-filter-grid,
  #root_asset_profile .amt-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 639px) {
  #root_asset_profile .amt-chip-row,
  #root_asset_profile .amt-filter-grid,
  #root_asset_profile .amt-grid {
    grid-template-columns: 1fr;
  }

  #root_asset_profile .amt-search-row .ho-btn,
  #root_asset_profile .amt-modal-footer .ho-btn {
    width: 100%;
    justify-content: center;
  }

  #root_asset_profile .amt-modal-footer {
    flex-direction: column-reverse;
  }
}

/* Asset info Documents tab (atp-doc-*) — unique names, do not reuse elsewhere */
#root_asset_transfer .atp-doc-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.85rem;
}

#root_asset_transfer .atp-doc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#root_asset_transfer .atp-doc-add-btn svg,
#root_asset_transfer .atp-doc-action svg {
  width: 1rem;
  height: 1rem;
}

#root_asset_transfer .atp-doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

#root_asset_transfer .atp-doc-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid #c7d2fe;
  background: #fff;
  color: #3730a3;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

#root_asset_transfer .atp-doc-action:hover {
  background: #eef2ff;
  color: #312e81;
}

#root_asset_transfer .atp-doc-action-del {
  border-color: #fecaca;
  color: #b91c1c;
}

#root_asset_transfer .atp-doc-action-del:hover {
  background: #fef2f2;
  color: #991b1b;
}

#root_asset_transfer .atp-doc-current {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
}

#root_asset_transfer .atp-doc-current.hidden {
  display: none;
}

@media (max-width: 639px) {
  #root_asset_transfer .atp-doc-toolbar {
    justify-content: stretch;
  }

  #root_asset_transfer .atp-doc-add-btn {
    width: 100%;
    justify-content: center;
  }

  #root_asset_transfer .atp-doc-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #root_asset_transfer .atp-doc-action {
    justify-content: center;
  }
}

/* Location tab movement save — keep the check button clickable */
#root_asset_transfer .atp-move-edit-form {
  position: relative;
  z-index: 2;
  align-items: center;
}

#root_asset_transfer .atp-move-edit-form .atp-edit-input {
  min-width: 0;
  flex: 1 1 auto;
  width: auto;
  max-width: 11rem;
}

#root_asset_transfer .atp-move-save-btn {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

#root_asset_transfer .atp-move-save-btn svg,
#root_asset_transfer .atp-move-save-btn i {
  pointer-events: none;
}

/**
 * Project Management module (rendered inside #projectProDatas).
 * Reuses the shared ho-* system; only genuinely new pieces
 * (KPI cards, status chips, progress bars, tabs) are defined here.
 * All new class names use the pm- prefix so nothing existing is affected.
 */

/* ---- Data tables (same scoping pattern as the other profile modules) ---- */
#projectProDatas .ho-data-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

#projectProDatas .ho-data-table-wrap > table,
#projectProDatas table.ho-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
}

#projectProDatas .ho-data-table th {
  background: linear-gradient(90deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  text-align: left;
  padding: 0.7rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#projectProDatas .ho-data-table td {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid #eef2f7;
  vertical-align: middle;
  color: #374151;
}

#projectProDatas .ho-data-table tbody tr:hover td {
  background: #f8fafc;
}

@media (max-width: 639px) {
  #projectProDatas .ho-data-table-wrap > table,
  #projectProDatas table.ho-data-table {
    min-width: 44rem;
    width: max-content;
  }
}

/* ---- KPI cards ---- */
.pm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .pm-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .pm-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.pm-kpi-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-left: 4px solid #6366f1;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
  min-width: 0;
}

.pm-kpi-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 0.3rem;
}

.pm-kpi-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
}

.pm-kpi-accent-indigo { border-left-color: #6366f1; }
.pm-kpi-accent-red { border-left-color: #dc2626; }
.pm-kpi-accent-amber { border-left-color: #d97706; }
.pm-kpi-accent-green { border-left-color: #16a34a; }
.pm-kpi-accent-slate { border-left-color: #64748b; }
.pm-kpi-accent-blue { border-left-color: #2563eb; }

.pm-kpi-card.pm-kpi-clickable {
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.pm-kpi-card.pm-kpi-clickable:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* ---- Status chips ---- */
.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: #f1f5f9;
  color: #334155;
}

.pm-chip-open { background: #dbeafe; color: #1d4ed8; }
.pm-chip-progress { background: #e0e7ff; color: #4338ca; }
.pm-chip-done { background: #dcfce7; color: #15803d; }
.pm-chip-late { background: #fee2e2; color: #b91c1c; }
.pm-chip-warn { background: #fef3c7; color: #b45309; }
.pm-chip-muted { background: #e5e7eb; color: #4b5563; }

/* ---- Progress bar ---- */
.pm-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
}

.pm-progress-track {
  position: relative;
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  min-width: 3.5rem;
}

.pm-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: #4f46e5;
}

.pm-progress-fill.pm-progress-late { background: #dc2626; }
.pm-progress-fill.pm-progress-done { background: #16a34a; }

.pm-progress-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4b5563;
  min-width: 2.5rem;
  text-align: right;
}

/* ---- Tabs ---- */
.pm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.25rem;
}

.pm-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  white-space: nowrap;
}

.pm-tab:hover {
  color: #4338ca;
  background: #f5f3ff;
}

.pm-tab.is-active {
  color: #4338ca;
  border-bottom-color: #4f46e5;
}

/* ---- Filter row ---- */
.pm-filter-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .pm-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .pm-filter-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- Two column content split ---- */
.pm-split {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 1024px) {
  .pm-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Modal form grid ---- */
.pm-form-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0 1rem;
}

@media (min-width: 640px) {
  .pm-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* ---- Attention list ---- */
.pm-attention-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pm-attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #f1f5f9;
  border-radius: 0.5rem;
  background: #fafafa;
  font-size: 0.85rem;
  color: #374151;
}

.pm-attention-name {
  min-width: 0;
  overflow-wrap: break-word;
  font-weight: 600;
  color: #1f2937;
}

/* ---- Empty state ---- */
.pm-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}

.pm-empty-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.35rem;
}

/* Right side of a status row: share bar plus the count */
.pm-status-count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 9rem;
}

/* ---- Misc helpers ---- */
.pm-section-gap {
  margin-top: 1.5rem;
}

.pm-req {
  color: #dc2626;
}

.pm-inline-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pm-muted {
  color: #6b7280;
  font-size: 0.8rem;
}

.pm-error-text {
  display: block;
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 0.2rem;
  min-height: 1rem;
}

.pm-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #374151;
}

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

.pm-block {
  display: block;
}

.pm-hide {
  display: none;
}

.pm-text-late {
  color: #b91c1c;
  font-weight: 600;
}

/* =========================================================
 * Phase 2 - project workspace
 * ========================================================= */

/* ---- Breadcrumb back to the projects list ---- */
.pm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: #4b5563;
}

.pm-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: #4338ca;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.pm-breadcrumb-link:hover {
  text-decoration: underline;
}

.pm-breadcrumb-sep {
  color: #9ca3af;
}

/* ---- Workspace header strip ---- */
.pm-ws-header {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .pm-ws-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

.pm-ws-identity {
  min-width: 0;
}

.pm-ws-code {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pm-ws-identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0;
}

.pm-ws-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .pm-ws-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pm-ws-fact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #f1f5f9;
  border-radius: 0.5rem;
  background: #fafafa;
  min-width: 0;
}

.pm-ws-fact-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  overflow-wrap: break-word;
}

.pm-ws-fact-donut {
  align-items: center;
  text-align: center;
}

/* ---- Progress donut, filled with a conic gradient ---- */
.pm-donut {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--pm-donut-color, #6366f1) calc(var(--pm-donut-value, 0) * 1%), #e5e7eb 0);
}

/* the inner disc is what turns the filled circle into a ring */
.pm-donut::before {
  content: "";
  position: absolute;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #ffffff;
}

.pm-donut-text {
  position: relative;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2937;
}

.pm-donut-normal { --pm-donut-color: #6366f1; }
.pm-donut-done { --pm-donut-color: #16a34a; }
.pm-donut-late { --pm-donut-color: #dc2626; }

/* ---- Work breakdown tree ---- */
.pm-tree {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pm-tree-row {
  display: grid;
  grid-template-columns: minmax(3rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  /* the depth variable is set per row so children sit under their parent */
  padding-left: calc(0.75rem + var(--pm-tree-depth, 0) * 1.25rem);
  border: 1px solid #f1f5f9;
  border-left: 3px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #ffffff;
  font-size: 0.85rem;
  cursor: pointer;
}

@media (min-width: 640px) {
  .pm-tree-row {
    grid-template-columns: minmax(3rem, auto) minmax(0, 1fr) 9rem;
  }
}

.pm-tree-row:hover {
  background: #f8fafc;
  border-left-color: #a5b4fc;
}

.pm-tree-row.is-selected {
  background: #eef2ff;
  border-left-color: #4338ca;
}

.pm-tree-code {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.pm-tree-name {
  min-width: 0;
  font-weight: 600;
  color: #1f2937;
  overflow-wrap: break-word;
}

.pm-tree-progress {
  min-width: 0;
}

/* ---- Milestone timeline strip ---- */
.pm-timeline {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.75rem;
}

.pm-timeline-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  flex: 0 0 auto;
  width: 11rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #f1f5f9;
  border-radius: 0.5rem;
  background: #fafafa;
  font-size: 0.8rem;
}

.pm-timeline-marker {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #9ca3af;
}

.pm-timeline-pending { background: #93c5fd; }
.pm-timeline-progress { background: #6366f1; }
.pm-timeline-done { background: #16a34a; }
.pm-timeline-late { background: #dc2626; }

.pm-timeline-name {
  font-weight: 600;
  color: #1f2937;
  overflow-wrap: break-word;
}

.pm-timeline-date {
  color: #6b7280;
  font-size: 0.75rem;
}

/* ---- Document type filter chips ---- */
.pm-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.pm-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.pm-filter-chip:hover {
  border-color: #a5b4fc;
  color: #4338ca;
}

.pm-filter-chip.is-active {
  border-color: #4338ca;
  background: #eef2ff;
  color: #4338ca;
}

.pm-filter-chip-count {
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 0.7rem;
}

.pm-filter-chip.is-active .pm-filter-chip-count {
  background: #ffffff;
}

.pm-doc-name {
  font-weight: 600;
  color: #1f2937;
  overflow-wrap: anywhere;
}

/* ==================================================================
   Phase 3 - issue board, risk matrix and timesheet week strip
   ================================================================== */

/* ---- Issue board ---- */
.pm-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.pm-board-col {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.6rem;
  min-width: 0;
}

.pm-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pm-count-badge {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

.pm-board-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pm-board-empty {
  padding: 0.75rem 0.25rem;
  color: #9ca3af;
  font-size: 0.75rem;
  text-align: center;
}

.pm-board-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #6366f1;
  border-radius: 0.4rem;
  padding: 0.55rem 0.6rem;
  min-width: 0;
}

.pm-board-card.pm-board-card-late {
  border-left-color: #dc2626;
}

.pm-board-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}

.pm-board-card-no {
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.pm-board-card-title {
  margin: 0 0 0.25rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  overflow-wrap: anywhere;
}

.pm-board-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.35rem;
  color: #6b7280;
  font-size: 0.72rem;
}

.pm-board-card-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.pm-board-card-actions .pm-board-move {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0.35rem;
  font-size: 0.72rem;
}

/* ---- Risk matrix ---- */
.pm-matrix-wrap {
  overflow-x: auto;
}

.pm-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0.3rem;
  min-width: 32rem;
}

.pm-matrix th {
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #374151;
  text-align: center;
}

.pm-matrix th.pm-matrix-corner {
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.pm-matrix th.pm-matrix-row-head {
  text-align: right;
  white-space: nowrap;
}

.pm-matrix-cell {
  padding: 0.5rem;
  border-radius: 0.4rem;
  text-align: center;
  vertical-align: middle;
}

.pm-matrix-count {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.pm-matrix-score {
  display: block;
  font-size: 0.65rem;
  opacity: 0.75;
}

.pm-matrix-low {
  background: #dcfce7;
  color: #15803d;
}

.pm-matrix-medium {
  background: #fef3c7;
  color: #b45309;
}

.pm-matrix-high {
  background: #fee2e2;
  color: #b91c1c;
}

/* ---- Timesheet week strip and mode tabs ---- */
.pm-mode-tabs {
  margin-bottom: 0.5rem;
}

.pm-week-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.pm-week-label {
  flex: 1 1 12rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
}

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

@media (max-width: 640px) {
  .pm-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .pm-week-label {
    order: -1;
    flex-basis: 100%;
  }
}

/* =========================================================
 * Phase 4 - reports
 * ========================================================= */

/* Summary cards in a row of four, used by the timesheet and report headers */
.pm-kpi-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 1024px) {
  .pm-kpi-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Report list beside the panel on a wide screen, above it on a narrow one */
.pm-report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .pm-report-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

.pm-report-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
}

.pm-report-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  padding: 0.55rem 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4b5563;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.pm-report-item:hover {
  background: #f5f3ff;
  color: #4338ca;
}

.pm-report-item.is-active {
  background: #e0e7ff;
  color: #3730a3;
}

.pm-report-item i {
  width: 1rem;
  text-align: center;
}

.pm-report-panel {
  min-width: 0;
}

.pm-report-note {
  margin-bottom: 0.85rem;
}

/* Date range pair sits inside one filter cell */
.pm-report-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.pm-report-range .ho-form-input {
  min-width: 0;
  flex: 1 1 auto;
}

.pm-report-range-to {
  font-size: 0.78rem;
  color: #6b7280;
}

/* Under a laptop width the list becomes a scrolling strip, not a second sidebar */
@media (max-width: 1023px) {
  .pm-report-list {
    flex-direction: row;
    overflow-x: auto;
  }

  .pm-report-item {
    width: auto;
    flex: 0 0 auto;
  }
}

/* Project modals must sit above sticky page header (60) and app navbar (~1030) */
#root_project_profile .ho-modal-overlay,
#pmModalHost .ho-modal-overlay {
  z-index: 10050;
}

/* Inline single-field edit on Project Details */
.pm-overview-show {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pm-overview-pencil {
  color: #2563eb;
  cursor: pointer;
  font-size: 0.85rem;
}

.pm-overview-pencil:hover {
  color: #1d4ed8;
}

.pm-overview-edit-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pm-overview-edit-input {
  width: auto;
  min-width: 10rem;
  flex: 1;
  margin-bottom: 0;
}

/* Timesheet task title opens the existing View Task page */
.pm-task-link {
  color: #4338ca;
  font-weight: 600;
  text-decoration: none;
}

.pm-task-link:hover {
  text-decoration: underline;
}

/* Create-task prompt on the timesheet Add Time modal */
.pm-time-create-ask {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

.pm-time-create-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
}

/* ---- Shift Profile (sp-*) ---- */
.sp-kpi-row {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.875rem;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .sp-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sp-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sp-kpi {
  background: #fff;
  border: 1px solid #eef2ff;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.sp-kpi-n {
  font-size: 1.6rem;
  font-weight: 700;
  color: #312e81;
  line-height: 1.1;
}
.sp-kpi-n-warn { color: #b91c1c; }
.sp-kpi-l {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
  font-weight: 600;
}
.sp-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.sp-card-sub {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 0.15rem;
}
.sp-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 10rem;
}
.sp-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
}
.sp-table {
  width: 100%;
  border-collapse: collapse;
}
.sp-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4b5563;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.65rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sp-table td {
  padding: 0.7rem 0.75rem;
  font-size: 0.84rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}
.sp-table tbody tr:hover { background: #fafbff; }
.sp-center { text-align: center !important; }
.sp-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.sp-badge-gs { background: #e0e7ff; color: #3730a3; }
.sp-badge-ms { background: #dbeafe; color: #1e40af; }
.sp-badge-es { background: #ffedd5; color: #9a3412; }
.sp-badge-ns { background: #ede9fe; color: #5b21b6; }
.sp-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}
.sp-foot {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
}
.sp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  font-size: 0.75rem;
  color: #4b5563;
  margin-left: auto;
}
.sp-sw {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  display: inline-block;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.sp-roster {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.sp-roster th,
.sp-roster td {
  border: 1px solid #e5e7eb;
  font-size: 0.78rem;
  text-align: center;
  padding: 0;
  height: 2.6rem;
}
.sp-roster th {
  background: #eef2ff;
  color: #3730a3;
  font-weight: 700;
}
.sp-roster .sp-name {
  width: 11rem;
  text-align: left;
  padding: 0 0.65rem;
  background: #f8fafc;
  font-weight: 600;
  color: #1f2937;
}
.sp-dow {
  font-size: 0.65rem;
  color: #6366f1;
  font-weight: 700;
  display: block;
  line-height: 1.1;
}
.sp-cell-gs { font-weight: 700; color: #312e81; background: #eef2ff; cursor: pointer; }
.sp-cell-ms { font-weight: 700; color: #1e40af; background: #dbeafe; cursor: pointer; }
.sp-cell-es { font-weight: 700; color: #9a3412; background: #ffedd5; cursor: pointer; }
.sp-cell-ns { font-weight: 700; color: #5b21b6; background: #ede9fe; cursor: pointer; }
.sp-cell-h { background: #bbf7d0; color: #166534; font-weight: 800; }
.sp-cell-x { background: #fecaca; color: #991b1b; font-weight: 800; cursor: pointer; }
.sp-staff-small {
  display: block;
  font-weight: 500;
  color: #6b7280;
  font-size: 0.7rem;
}
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
}
button.sp-chip {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.sp-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-top: 0.25rem;
}
.sp-chk {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
}
.sp-warn {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.78rem;
}
.sp-ok { color: #166534; font-weight: 700; }
.sp-low { color: #b91c1c; font-weight: 700; }
.sp-progress {
  height: 0.5rem;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
  width: 8.5rem;
  display: inline-block;
  vertical-align: middle;
}
.sp-progress > span { display: block; height: 100%; background: #16a34a; }
.sp-progress.sp-progress-low > span { background: #dc2626; }
.sp-suggest {
  position: absolute;
  z-index: 20;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  max-height: 12rem;
  overflow-y: auto;
  width: 100%;
  margin-top: 0.15rem;
}
.sp-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: #fff;
  font-size: 0.84rem;
  cursor: pointer;
}
.sp-suggest button:hover { background: #eef2ff; }
.sp-field-rel { position: relative; min-width: 16rem; }
.sp-week-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sp-empty {
  text-align: center;
  color: #dc2626;
  padding: 1.25rem 0.5rem;
  font-size: 0.9rem;
}
.sp-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1rem;
}
@media (min-width: 640px) {
  .sp-modal-grid { grid-template-columns: 1fr 1fr; }
}
.sp-modal-grid .sp-full { grid-column: 1 / -1; }
#spShiftFormId label.error,
#spAssignFormId label.error,
#spCoverFormId label.error,
#spCellFormId label.error { color: #dc2626; font-size: 0.75rem; }

/* =========================================================
 * Project commercial module
 * Layout only. Colours, cards, chips and buttons all come from
 * the existing ho-* and pm-* rules above.
 * ========================================================= */

/* money reads better a little smaller, so long values stay on one line */
.pmc-kpi-amount {
  font-size: 1.15rem;
}

/* every amount column is right aligned and never wraps mid number */
.pmc-num {
  text-align: right;
  white-space: nowrap;
}

/* a cancelled ledger row is struck through rather than hidden */
.pmc-void {
  text-decoration: line-through;
  color: #9ca3af;
}

.pmc-editor-box {
  max-width: 72rem;
}

.pmc-lines-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* the grid scrolls sideways on a narrow screen instead of squashing its cells */
.pmc-lines-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-top: 0.5rem;
}

.pmc-lines-table th,
.pmc-lines-table td {
  padding: 0.35rem 0.4rem;
  vertical-align: middle;
}

.pmc-lines-empty {
  text-align: center;
  color: #6b7280;
  padding: 1.25rem 0.5rem;
  font-size: 0.875rem;
}

.pmc-col-no {
  width: 2.5rem;
  text-align: center;
  white-space: nowrap;
}

.pmc-cell-input {
  min-width: 6rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.82rem;
}

.pmc-cell-number {
  min-width: 5.5rem;
  text-align: right;
}

.pmc-cell-wide {
  min-width: 14rem;
}

.pmc-cell-narrow {
  min-width: 4rem;
}

/* a calculated cell is read only, so it is shown as text rather than a field */
.pmc-derived {
  display: block;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 0.25rem;
}

.pmc-total-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1.25rem;
  padding: 0.75rem 0.25rem 0;
}

.pmc-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  font-size: 0.95rem;
}

/* the status and invoice pickers sit inside a table row, so they stay compact */
.pmc-status-select {
  min-width: 8rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.8rem;
}