/*
 * Global surface and theme-aware UI system — v20261015-light-form-add-buttons-35
 * The page canvas stays near-black. App containers and all form controls use
 * charcoal/raised-grey surfaces. This stylesheet is loaded last to defeat
 * older page-level CSS rules and keep focus/autofill states consistent.
 */
:root {
  --bg: #08080d;
  --panel: #2b2b35;
  --panel-raised: #353541;
  --border: #4a4a58;
  --text: #f3f4f6;
  --muted: #a1a1b3;
}

/* Outer canvas only remains black; main layout wrappers do not paint over it. */
html,
body {
  background-color: #08080d !important;
  color: #f3f4f6;
}
html body .main-wrapper,
html body .main-wrapper > main,
html body main.main-content,
html body .page-content,
html body .content-area,
html body .dashboard-content,
html body .content-wrapper,
html body .page-wrapper {
  background-color: transparent !important;
  color: #f3f4f6 !important;
}

/* Navigation surfaces are panels too, not black blocks. */
html body #sidebar,
html body #sidebar .sidebar-brand-logo,
html body #sidebar > .sidebar-identity,
html body .top-header,
html body .profile-menu,
html body .sidebar > .sidebar-footer {
  background-color: #2b2b35 !important;
  border-color: #41414f !important;
  color: #f3f4f6 !important;
}
html body .sidebar-toggle,
html body .header-icon-btn,
html body .profile-btn,
html body .top-header .profile-btn .profile-avatar,
html body .template-wallpaper-hero-icon,
html body .card-modal-close,
html body .contact-message-head button,
html body .confirm-modal-button,
html body .wa-universal-button,
html body .card-table-logo-button,
html body .admin-icon-action,
html body .secondary-action-button,
html body .password-toggle,
html body .cards-date-clear,
html body .small-action-button,
html body .youtube-link-remove,
html body .cards-status-filter,
html body .cards-date-filter,
html body .profile-menu a:hover,
html body .sidebar .nav-item:hover,
html body .sidebar .submenu a:hover,
html body .password-input-wrap > .password-toggle:hover,
html body .secondary-action-button:hover,
html body .confirm-modal-cancel:hover,
html body .confirm-modal-cancel:focus-visible,
html body .card-status-action.is-active:hover,
html body .cards-status-filter:hover,
html body .cards-date-filter:hover,
html body .add-youtube-link {
  background-color: #353541 !important;
  border-color: #4a4a58 !important;
  color: #f3f4f6;
}
html body .confirm-modal-delete:hover,
html body .confirm-modal-delete:focus-visible,
html body .product-remove:hover,
html body .service-remove:hover,
html body .youtube-link-remove:hover {
  background-color: #443038 !important;
}
html body .product-remove,
html body .service-remove,
html body .youtube-link-remove {
  background-color: #35252b !important;
}

/* Every input type, select, textarea, upload input, search field and date control. */
html body input:not([type="submit"]):not([type="button"]):not([type="reset"]),
html body select,
html body textarea,
html body .form-control,
html body .form-select,
html body .form-field input,
html body .form-field select,
html body .form-field textarea,
html body .login-field input,
html body .top-search,
html body .cards-search-input,
html body .admin-search-input,
html body .admin-filter-select,
html body .table-search-box,
html body .phone-input-wrap input,
html body .cards-status-filter,
html body .cards-date-filter,
html body .order-status-select,
html body .theme-color-input-row input[type="text"],
html body .template-wallpaper-selector select {
  background: #2b2b35 !important;
  background-color: #2b2b35 !important;
  color: #f3f4f6 !important;
  border-color: #50505d !important;
  -webkit-text-fill-color: #f3f4f6 !important;
  color-scheme: dark;
}
html body input:not([type="submit"]):not([type="button"]):not([type="reset"]):hover,
html body select:hover,
html body textarea:hover,
html body input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
html body select:focus,
html body textarea:focus,
html body input:not([type="submit"]):not([type="button"]):not([type="reset"]):active,
html body select:active,
html body textarea:active,
html body .form-control:focus,
html body .form-select:focus {
  background: #2b2b35 !important;
  background-color: #2b2b35 !important;
  color: #f3f4f6 !important;
  -webkit-text-fill-color: #f3f4f6 !important;
  border-color: #686879 !important;
}
html body input::placeholder,
html body textarea::placeholder,
html body .form-control::placeholder,
html body .form-select::placeholder {
  color: #a1a1b3 !important;
  -webkit-text-fill-color: #a1a1b3 !important;
  opacity: 1 !important;
}
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill,
html body textarea:-webkit-autofill:hover,
html body textarea:-webkit-autofill:focus,
html body select:-webkit-autofill,
html body select:-webkit-autofill:hover,
html body select:-webkit-autofill:focus {
  -webkit-text-fill-color: #f3f4f6 !important;
  -webkit-box-shadow: 0 0 0 1000px #2b2b35 inset !important;
  box-shadow: 0 0 0 1000px #2b2b35 inset !important;
  background-color: #2b2b35 !important;
  caret-color: #f3f4f6 !important;
}
html body input[type="file"] {
  background: #2b2b35 !important;
  background-color: #2b2b35 !important;
  color: #f3f4f6 !important;
  border: 1px solid #50505d !important;
  border-radius: .55rem;
}
html body input[type="file"]::file-selector-button,
html body input[type="file"]::-webkit-file-upload-button {
  background: #3a3a46 !important;
  background-color: #3a3a46 !important;
  color: #f3f4f6 !important;
  border: 1px solid #555564 !important;
  border-radius: .35rem;
  padding: .4rem .65rem;
  margin-right: .65rem;
}
html body input[type="checkbox"],
html body input[type="radio"] {
  background-color: #353541 !important;
  accent-color: #6366f1;
}
html body option,
html body optgroup {
  background-color: #2b2b35 !important;
  color: #f3f4f6 !important;
}

/* All content panels, editors, form cards, previews and table containers. */
html body .panel,
html body .card,
html body .form-card,
html body .login-box,
html body .table-card,
html body .table-container,
html body .table-wrapper,
html body .table-responsive,
html body .table-wrap,
html body .admin-table-wrap,
html body .cards-table-wrap,
html body .orders-table-wrap,
html body .stat-card,
html body .stats-card,
html body .dashboard-card,
html body .summary-card,
html body .widget,
html body .widget-card,
html body .content-card,
html body .main-wrapper .bg-white,
html body .main-wrapper .bg-black,
html body .main-wrapper .bg-gray-50,
html body .main-wrapper .bg-gray-100,
html body .main-wrapper .bg-gray-900,
html body .main-wrapper .bg-gray-950,
html body .main-wrapper .bg-neutral-900,
html body .main-wrapper .bg-neutral-950,
html body .settings-card,
html body .settings-logo-card,
html body .settings-logo-grid,
html body .settings-logo-preview,
html body .settings-section,
html body .sa-form,
html body .settings-form,
html body .form-container,
html body .form-panel,
html body .upload-card,
html body .section-card,
html body .profile-card,
html body .profile-preview,
html body .client-card,
html body .admin-card,
html body .theme-color-field,
html body .form-section,
html body .form-card-body,
html body .product-row,
html body .service-row,
html body .card-image-upload-box,
html body .card-logo-preview,
html body .card-cover-preview,
html body .product-image-preview,
html body .service-image-preview,
html body .template-wallpaper-section,
html body .template-wallpaper-manager,
html body .template-wallpaper-selector,
html body .template-wallpaper-upload-card,
html body .template-wallpaper-preview-card,
html body .template-wallpaper-dropzone,
html body .template-wallpaper-browse,
html body .template-wallpaper-preview,
html body .phone-input-wrap,
html body .table-search-box,
html body .admin-search-empty,
html body .cards-date-summary,
html body .cards-date-summary-icon,
html body .card-assign-option,
html body .card-detail-item,
html body .card-image-modal-item,
html body .card-image-modal-item img,
html body .card-youtube-link,
html body .contact-message-dialog,
html body .contact-message-meta > div,
html body .contact-message-content p,
html body .confirm-modal-dialog,
html body .card-view-dialog,
html body .wa-universal-dialog,
html body .admin-table,
html body .cards-table,
html body .orders-table,
html body .data-table,
html body .empty-state,
html body .clean-empty-state,
html body .modal-content,
html body .modal-card,
html body .dialog-card {
  background: #2b2b35 !important;
  background-color: #2b2b35 !important;
  color: #f3f4f6;
  border-color: #454553;
}

/* Inner surfaces and section/table headers get a little more contrast. */
html body .form-card-header,
html body .settings-logo-card-title,
html body .settings-file-label,
html body .panel-header,
html body .card-header,
html body .form-card-icon,
html body .secondary-action-button,
html body .password-toggle,
html body .admin-table thead,
html body .admin-table thead tr,
html body .admin-table thead th,
html body .cards-table thead,
html body .cards-table thead tr,
html body .cards-table thead th,
html body .orders-table thead,
html body .orders-table thead tr,
html body .orders-table thead th,
html body .data-table thead,
html body .data-table thead tr,
html body .data-table thead th,
html body table thead,
html body table thead tr,
html body table thead th,
html body thead th,
html body .table thead th {
  background: #3a3a46 !important;
  background-color: #3a3a46 !important;
  color: #f3f4f6 !important;
  border-color: #4a4a58 !important;
}
html body table,
html body table tbody,
html body table tbody tr,
html body table tbody td,
html body .table-responsive > table,
html body .card-body,
html body .panel-body {
  background-color: #2b2b35 !important;
  color: #f3f4f6 !important;
  border-color: #41414f !important;
}
html body table tbody tr:hover,
html body table tbody tr:hover td {
  background-color: #373744 !important;
}
html body .admin-table-wrap::before,
html body .cards-table-wrap::before,
html body .orders-table-wrap::before {
  background: #353541 !important;
  background-color: #353541 !important;
}
html body .card-assigned-badge {
  background: #3a3a46 !important;
  color: #93c5fd !important;
  border-color: #4a4a58 !important;
}

/* Catch older inline black fills on ordinary elements too. */
html body [style*="background:#000"],
html body [style*="background: #000"],
html body [style*="background-color:#000"],
html body [style*="background-color: #000"],
html body [style*="background:#080808"],
html body [style*="background: #080808"],
html body [style*="background-color:#080808"],
html body [style*="background-color: #080808"],
html body [style*="background:black"],
html body [style*="background: black"],
html body [style*="background-color:black"],
html body [style*="background-color: black"],
html body [style*="background:rgb(0,0,0)"],
html body [style*="background: rgb(0, 0, 0)"],
html body [style*="background-color:rgb(0,0,0)"],
html body [style*="background-color: rgb(0, 0, 0)"] {
  background: #2b2b35 !important;
  background-color: #2b2b35 !important;
}


/* Settings logo upload: show one professional Choose image control only.
   Keep the native input accessible/label-triggerable without its duplicate browser button. */
html body .settings-logo-card input.settings-file-input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
}
html body .settings-logo-card .settings-file-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.55rem 0.95rem;
  border: 1px solid #555563;
  border-radius: 8px;
  background: #3A3A46;
  color: #F5F5F7;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
html body .settings-logo-card .settings-file-label:hover {
  background: #464653;
  border-color: #747482;
}
html body .settings-logo-card .settings-file-input:focus-visible + .settings-file-label {
  outline: 2px solid #8A8AA0;
  outline-offset: 3px;
}

/* v20261014 layout bugfix: keep the mobile hamburger anchored to the viewport
   and normalize excess vertical gaps below the fixed top header. */
html body #mobileToggle.mobile-toggle {
  position: fixed !important;
  top: .75rem !important;
  left: .75rem !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 1300 !important;
  flex: 0 0 2.5rem !important;
}
@media (max-width: 767px) {
  html body #mobileToggle.mobile-toggle {
    position: fixed !important;
    top: .75rem !important;
    left: .75rem !important;
  }
}

/* A single consistent top offset for authenticated page content. */
html body .main-wrapper > main.page-content {
  padding-top: calc(var(--header-height, 4rem) + .5rem) !important;
}
html body .main-wrapper > main.page-content > .form-card,
html body .main-wrapper > main.page-content > section.form-card,
html body .main-wrapper > main.page-content > .orders-card {
  margin-top: 0 !important;
}
html body .main-wrapper > main.page-content.settings-page > .form-card {
  margin-top: 0 !important;
}
html body .main-wrapper > main.page-content .form-card-header,
html body .main-wrapper > main.page-content .page-card-header,
html body .main-wrapper > main.page-content .orders-card-header {
  margin-top: 0 !important;
}
html body .main-wrapper > main.page-content h1:first-child,
html body .main-wrapper > main.page-content > h1:first-child {
  margin-top: 0 !important;
}


/* Global password-eye alignment: keep every visibility toggle inside the input, at the right edge. */
html body .password-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
html body .password-input-wrap > input,
html body .password-input-wrap > input[type="password"],
html body .password-input-wrap > input[type="text"] {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-right: 3.5rem !important;
}
html body .password-input-wrap > button.password-toggle,
html body .password-input-wrap > .password-toggle {
  position: absolute !important;
  inset-block-start: 50% !important;
  inset-block-end: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: .65rem !important;
  top: 50% !important;
  right: .65rem !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 20 !important;
}
html body .password-input-wrap > button.password-toggle > i,
html body .password-input-wrap > .password-toggle > i {
  display: block !important;
  position: static !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}


/* FINAL PASSWORD FIELD LAYOUT SAFETY NET — toggle must remain inside the input. */
html body .password-input-wrap { position:relative!important; display:block!important; width:100%!important; min-width:0!important; height:auto!important; padding:0!important; margin:0!important; box-sizing:border-box!important; }
html body .password-input-wrap > input[type="password"],
html body .password-input-wrap > input[type="text"] { display:block!important; position:relative!important; width:100%!important; max-width:100%!important; margin:0!important; box-sizing:border-box!important; padding-right:3.5rem!important; }
html body .password-input-wrap > button.password-toggle { position:absolute!important; top:50%!important; right:.65rem!important; bottom:auto!important; left:auto!important; transform:translateY(-50%)!important; float:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:2.25rem!important; height:2.25rem!important; min-width:2.25rem!important; min-height:2.25rem!important; margin:0!important; padding:0!important; line-height:1!important; z-index:20!important; }
html body .password-input-wrap > button.password-toggle > i { display:block!important; position:static!important; margin:0!important; line-height:1!important; transform:none!important; pointer-events:none!important; }


/* GLOBAL LIGHT MODE OVERRIDES — applied after all legacy dark-surface rules.
   Only applies when the user explicitly chooses Light Mode (or system light).
   Brand/primary buttons, status badges and template/public-card artwork remain untouched. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f9;
  --panel: #ffffff;
  --panel-raised: #f8f9fc;
  --border: #e2e7ef;
  --text: #17233b;
  --muted: #68758b;
}
html[data-theme="light"],
html[data-theme="light"] body {
  background: #f3f5f9 !important;
  background-color: #f3f5f9 !important;
  color: #17233b !important;
  color-scheme: light !important;
}
html[data-theme="light"] body .main-wrapper,
html[data-theme="light"] body .main-wrapper > main,
html[data-theme="light"] body main.main-content,
html[data-theme="light"] body .page-content,
html[data-theme="light"] body .content-area,
html[data-theme="light"] body .dashboard-content,
html[data-theme="light"] body .content-wrapper,
html[data-theme="light"] body .page-wrapper,
html[data-theme="light"] body .main-content {
  background: transparent !important;
  background-color: transparent !important;
  color: #17233b !important;
}
/* Main page canvas and navigation chrome */
html[data-theme="light"] body #sidebar,
html[data-theme="light"] body #sidebar .sidebar-brand-logo,
html[data-theme="light"] body #sidebar > .sidebar-identity,
html[data-theme="light"] body .top-header,
html[data-theme="light"] body .profile-menu,
html[data-theme="light"] body .sidebar > .sidebar-footer,
html[data-theme="light"] body .sidebar-theme-toggle {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #e2e7ef !important;
  color: #24334d !important;
  box-shadow: 0 2px 12px rgba(23, 35, 59, .045) !important;
}
html[data-theme="light"] body .sidebar .nav-item:not(.is-active),
html[data-theme="light"] body .sidebar .nav-subitem:not(.is-active),
html[data-theme="light"] body .profile-menu a,
html[data-theme="light"] body .sidebar-identity-text,
html[data-theme="light"] body .profile-name,
html[data-theme="light"] body .header-icon-btn,
html[data-theme="light"] body .profile-btn,
html[data-theme="light"] body .sidebar-toggle {
  color: #24334d !important;
}
html[data-theme="light"] body .sidebar .nav-item:not(.is-active):hover,
html[data-theme="light"] body .sidebar .submenu a:not(.is-active):hover,
html[data-theme="light"] body .profile-menu a:hover {
  background: #f1f4f9 !important;
  background-color: #f1f4f9 !important;
  color: #17233b !important;
}
html[data-theme="light"] body .desktop-greeting-title,
html[data-theme="light"] body .page-title,
html[data-theme="light"] body .form-card-header h1,
html[data-theme="light"] body .form-card-header h2,
html[data-theme="light"] body .page-card-header h1,
html[data-theme="light"] body .orders-card-header h1,
html[data-theme="light"] body h1,
html[data-theme="light"] body h2,
html[data-theme="light"] body h3,
html[data-theme="light"] body h4,
html[data-theme="light"] body h5,
html[data-theme="light"] body h6 {
  color: #56647b !important;
}
html[data-theme="light"] body .desktop-greeting-message,
html[data-theme="light"] body p,
html[data-theme="light"] body label,
html[data-theme="light"] body small,
html[data-theme="light"] body .nav-item:not(.is-active),
html[data-theme="light"] body .nav-subitem:not(.is-active),
html[data-theme="light"] body .text-muted,
html[data-theme="light"] body .text-secondary,
html[data-theme="light"] body .muted,
html[data-theme="light"] body td,
html[data-theme="light"] body th,
html[data-theme="light"] body .empty-state,
html[data-theme="light"] body .clean-empty-state,
html[data-theme="light"] body .form-hint,
html[data-theme="light"] body .helper-text {
  color: #17233b !important;
}
html[data-theme="light"] body .desktop-greeting-message,
html[data-theme="light"] body .text-muted,
html[data-theme="light"] body .text-secondary,
html[data-theme="light"] body .muted,
html[data-theme="light"] body .form-hint,
html[data-theme="light"] body .helper-text {
  color: #68758b !important;
}
/* Convert charcoal containers to clean white surfaces with a subtle elevation. */
html[data-theme="light"] body .panel,
html[data-theme="light"] body .card,
html[data-theme="light"] body .form-card,
html[data-theme="light"] body .login-box,
html[data-theme="light"] body .table-card,
html[data-theme="light"] body .table-container,
html[data-theme="light"] body .table-wrapper,
html[data-theme="light"] body .table-responsive,
html[data-theme="light"] body .table-wrap,
html[data-theme="light"] body .admin-table-wrap,
html[data-theme="light"] body .cards-table-wrap,
html[data-theme="light"] body .orders-table-wrap,
html[data-theme="light"] body .stat-card,
html[data-theme="light"] body .stats-card,
html[data-theme="light"] body .dashboard-card,
html[data-theme="light"] body .summary-card,
html[data-theme="light"] body .widget,
html[data-theme="light"] body .widget-card,
html[data-theme="light"] body .content-card,
html[data-theme="light"] body .main-wrapper .bg-white,
html[data-theme="light"] body .main-wrapper .bg-black,
html[data-theme="light"] body .main-wrapper .bg-gray-50,
html[data-theme="light"] body .main-wrapper .bg-gray-100,
html[data-theme="light"] body .main-wrapper .bg-gray-900,
html[data-theme="light"] body .main-wrapper .bg-gray-950,
html[data-theme="light"] body .main-wrapper .bg-neutral-900,
html[data-theme="light"] body .main-wrapper .bg-neutral-950,
html[data-theme="light"] body .settings-card,
html[data-theme="light"] body .settings-logo-card,
html[data-theme="light"] body .settings-logo-grid,
html[data-theme="light"] body .settings-logo-preview,
html[data-theme="light"] body .settings-section,
html[data-theme="light"] body .sa-form,
html[data-theme="light"] body .settings-form,
html[data-theme="light"] body .form-container,
html[data-theme="light"] body .form-panel,
html[data-theme="light"] body .upload-card,
html[data-theme="light"] body .section-card,
html[data-theme="light"] body .profile-card,
html[data-theme="light"] body .profile-preview,
html[data-theme="light"] body .client-card,
html[data-theme="light"] body .admin-card,
html[data-theme="light"] body .theme-color-field,
html[data-theme="light"] body .form-section,
html[data-theme="light"] body .form-card-body,
html[data-theme="light"] body .product-row,
html[data-theme="light"] body .service-row,
html[data-theme="light"] body .card-image-upload-box,
html[data-theme="light"] body .card-logo-preview,
html[data-theme="light"] body .card-cover-preview,
html[data-theme="light"] body .product-image-preview,
html[data-theme="light"] body .service-image-preview,
html[data-theme="light"] body .template-wallpaper-section,
html[data-theme="light"] body .template-wallpaper-manager,
html[data-theme="light"] body .template-wallpaper-selector,
html[data-theme="light"] body .template-wallpaper-upload-card,
html[data-theme="light"] body .template-wallpaper-preview-card,
html[data-theme="light"] body .template-wallpaper-dropzone,
html[data-theme="light"] body .template-wallpaper-browse,
html[data-theme="light"] body .template-wallpaper-preview,
html[data-theme="light"] body .phone-input-wrap,
html[data-theme="light"] body .table-search-box,
html[data-theme="light"] body .admin-search-empty,
html[data-theme="light"] body .cards-date-summary,
html[data-theme="light"] body .card-assign-option,
html[data-theme="light"] body .card-detail-item,
html[data-theme="light"] body .card-image-modal-item,
html[data-theme="light"] body .card-youtube-link,
html[data-theme="light"] body .contact-message-dialog,
html[data-theme="light"] body .contact-message-meta > div,
html[data-theme="light"] body .contact-message-content p,
html[data-theme="light"] body .confirm-modal-dialog,
html[data-theme="light"] body .card-view-dialog,
html[data-theme="light"] body .wa-universal-dialog,
html[data-theme="light"] body .admin-table,
html[data-theme="light"] body .cards-table,
html[data-theme="light"] body .orders-table,
html[data-theme="light"] body .data-table,
html[data-theme="light"] body .empty-state,
html[data-theme="light"] body .clean-empty-state,
html[data-theme="light"] body .modal-content,
html[data-theme="light"] body .modal-card,
html[data-theme="light"] body .dialog-card,
html[data-theme="light"] body .orders-card,
html[data-theme="light"] body .form-panel,
html[data-theme="light"] body .orders-card-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 3px 14px rgba(23, 35, 59, .055) !important;
}
html[data-theme="light"] body .panel-header,
html[data-theme="light"] body .card-header,
html[data-theme="light"] body .settings-logo-card-title,
html[data-theme="light"] body .settings-file-label,
html[data-theme="light"] body .form-card-icon,
html[data-theme="light"] body .admin-table thead,
html[data-theme="light"] body .admin-table thead tr,
html[data-theme="light"] body .admin-table thead th,
html[data-theme="light"] body .cards-table thead,
html[data-theme="light"] body .cards-table thead tr,
html[data-theme="light"] body .cards-table thead th,
html[data-theme="light"] body .orders-table thead,
html[data-theme="light"] body .orders-table thead tr,
html[data-theme="light"] body .orders-table thead th,
html[data-theme="light"] body .data-table thead,
html[data-theme="light"] body .data-table thead tr,
html[data-theme="light"] body .data-table thead th,
html[data-theme="light"] body table thead,
html[data-theme="light"] body table thead tr,
html[data-theme="light"] body table thead th,
html[data-theme="light"] body thead th,
html[data-theme="light"] body .table thead th {
  background: #f3f5f9 !important;
  background-color: #f3f5f9 !important;
  color: #34445f !important;
  border-color: #e2e7ef !important;
}
/* Forms: neutral light fields, including focus, autofill, upload and select menus. */
html[data-theme="light"] body input:not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-theme="light"] body select,
html[data-theme="light"] body textarea,
html[data-theme="light"] body .form-control,
html[data-theme="light"] body .form-select,
html[data-theme="light"] body .form-field input,
html[data-theme="light"] body .form-field select,
html[data-theme="light"] body .form-field textarea,
html[data-theme="light"] body .login-field input,
html[data-theme="light"] body .top-search,
html[data-theme="light"] body .cards-search-input,
html[data-theme="light"] body .admin-search-input,
html[data-theme="light"] body .admin-filter-select,
html[data-theme="light"] body .table-search-box,
html[data-theme="light"] body .phone-input-wrap input,
html[data-theme="light"] body .order-status-select,
html[data-theme="light"] body .theme-color-input-row input[type="text"],
html[data-theme="light"] body .template-wallpaper-selector select,
html[data-theme="light"] body input[type="file"] {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #17233b !important;
  border-color: #dce2eb !important;
  -webkit-text-fill-color: #17233b !important;
  color-scheme: light !important;
}
html[data-theme="light"] body input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
html[data-theme="light"] body select:focus,
html[data-theme="light"] body textarea:focus,
html[data-theme="light"] body .form-control:focus,
html[data-theme="light"] body .form-select:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
  -webkit-text-fill-color: #17233b !important;
  border-color: #9ba9bd !important;
  box-shadow: 0 0 0 3px rgba(36, 59, 100, .08) !important;
}
html[data-theme="light"] body input::placeholder,
html[data-theme="light"] body textarea::placeholder,
html[data-theme="light"] body .form-control::placeholder,
html[data-theme="light"] body .form-select::placeholder {
  color: #8994a7 !important;
  -webkit-text-fill-color: #8994a7 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body input:-webkit-autofill,
html[data-theme="light"] body input:-webkit-autofill:hover,
html[data-theme="light"] body input:-webkit-autofill:focus,
html[data-theme="light"] body textarea:-webkit-autofill,
html[data-theme="light"] body textarea:-webkit-autofill:hover,
html[data-theme="light"] body textarea:-webkit-autofill:focus,
html[data-theme="light"] body select:-webkit-autofill,
html[data-theme="light"] body select:-webkit-autofill:hover,
html[data-theme="light"] body select:-webkit-autofill:focus {
  -webkit-text-fill-color: #17233b !important;
  -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
  box-shadow: 0 0 0 1000px #f8fafc inset !important;
  background-color: #f8fafc !important;
  caret-color: #17233b !important;
}
html[data-theme="light"] body input[type="file"]::file-selector-button,
html[data-theme="light"] body input[type="file"]::-webkit-file-upload-button,
html[data-theme="light"] body .settings-logo-card .settings-file-label {
  background: #edf1f6 !important;
  background-color: #edf1f6 !important;
  color: #24334d !important;
  border-color: #d5dce7 !important;
}
html[data-theme="light"] body input[type="checkbox"],
html[data-theme="light"] body input[type="radio"] {
  background-color: #ffffff !important;
  accent-color: #d7263d !important;
  color-scheme: light !important;
}
html[data-theme="light"] body option,
html[data-theme="light"] body optgroup {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
}
/* Tables */
html[data-theme="light"] body table,
html[data-theme="light"] body table tbody,
html[data-theme="light"] body table tbody tr,
html[data-theme="light"] body table tbody td,
html[data-theme="light"] body .table-responsive > table,
html[data-theme="light"] body .card-body,
html[data-theme="light"] body .panel-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
}
html[data-theme="light"] body table tbody tr:hover,
html[data-theme="light"] body table tbody tr:hover td {
  background: #f7f9fc !important;
  background-color: #f7f9fc !important;
}
html[data-theme="light"] body .admin-table-wrap::before,
html[data-theme="light"] body .cards-table-wrap::before,
html[data-theme="light"] body .orders-table-wrap::before {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
html[data-theme="light"] body .card-assigned-badge {
  background: #edf2fb !important;
  background-color: #edf2fb !important;
  color: #24436f !important;
  border-color: #dbe4f2 !important;
}
html[data-theme="light"] body .sidebar-toggle,
html[data-theme="light"] body .header-icon-btn,
html[data-theme="light"] body .profile-btn,
html[data-theme="light"] body .top-header .profile-btn .profile-avatar,
html[data-theme="light"] body .password-toggle,
html[data-theme="light"] body .cards-date-clear,
html[data-theme="light"] body .small-action-button,
html[data-theme="light"] body .youtube-link-remove,
html[data-theme="light"] body .cards-status-filter,
html[data-theme="light"] body .cards-date-filter,
html[data-theme="light"] body .secondary-action-button {
  background: #f3f5f9 !important;
  background-color: #f3f5f9 !important;
  color: #24334d !important;
  border-color: #e0e5ed !important;
}
html[data-theme="light"] body .password-input-wrap > .password-toggle:hover,
html[data-theme="light"] body .sidebar-toggle:hover,
html[data-theme="light"] body .header-icon-btn:hover,
html[data-theme="light"] body .secondary-action-button:hover {
  background: #e8edf5 !important;
  background-color: #e8edf5 !important;
  color: #17233b !important;
}
/* Login screens follow the stored mode, while primary/brand buttons keep their colors. */
html[data-theme="light"] body .login-page {
  background: #f3f5f9 !important;
  background-color: #f3f5f9 !important;
  color: #17233b !important;
}
html[data-theme="light"] body .login-box {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 8px 28px rgba(23, 35, 59, .07) !important;
}
/* Cart/customer checkout follows the chosen preference as well. */
html[data-theme="light"] body .wrap > .card,
html[data-theme="light"] body .wrap .card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 8px 24px rgba(23, 35, 59, .06) !important;
}
html[data-theme="light"] body .item,
html[data-theme="light"] body .summary,
html[data-theme="light"] body .checkout,
html[data-theme="light"] body .head {
  border-color: #e2e7ef !important;
  color: #17233b !important;
}
html[data-theme="light"] body .qty,
html[data-theme="light"] body .field input,
html[data-theme="light"] body .field textarea {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-color: #dce2eb !important;
  color: #17233b !important;
}


/* Final Light Mode surface fixes for secondary UI parts not covered by the common cards. */
html[data-theme="light"] body .profile-upload-row .profile-preview-box,
html[data-theme="light"] body .cards-date-summary-icon,
html[data-theme="light"] body .cards-date-summary,
html[data-theme="light"] body .admin-search-empty,
html[data-theme="light"] body .admin-filter-select,
html[data-theme="light"] body .cards-date-filter,
html[data-theme="light"] body .cards-status-filter,
html[data-theme="light"] body .order-status-select,
html[data-theme="light"] body .admin-search-wrap,
html[data-theme="light"] body .admin-filter-wrap {
  border-color: #e2e7ef !important;
}
html[data-theme="light"] body .cards-date-summary-icon,
html[data-theme="light"] body .admin-search-empty {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #56647b !important;
}
html[data-theme="light"] body .confirm-modal-button:not(.confirm-modal-delete),
html[data-theme="light"] body .confirm-modal-cancel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #24334d !important;
  border-color: #e2e7ef !important;
}
html[data-theme="light"] body .confirm-modal-delete,
html[data-theme="light"] body .product-remove,
html[data-theme="light"] body .service-remove,
html[data-theme="light"] body .youtube-link-remove {
  background: #fff1f2 !important;
  background-color: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fecdd3 !important;
}
html[data-theme="light"] body .orders-page .orders-table thead,
html[data-theme="light"] body .orders-page .orders-table thead tr,
html[data-theme="light"] body .orders-page .orders-table thead th {
  background: #f3f5f9 !important;
  background-color: #f3f5f9 !important;
  color: #34445f !important;
  border-color: #e2e7ef !important;
}
html[data-theme="light"] body .create-card-page .product-sale-toggle,
html[data-theme="light"] body .create-card-page .product-sale-toggle > span,
html[data-theme="light"] body .create-card-page .product-sale-toggle > input[type="checkbox"] + span,
html[data-theme="light"] body .admin-edit-page .product-sale-toggle,
html[data-theme="light"] body .admin-edit-page .product-sale-toggle > span {
  color: #24334d !important;
}
html[data-theme="light"] body .wrap .item,
html[data-theme="light"] body .wrap .summary,
html[data-theme="light"] body .wrap .checkout,
html[data-theme="light"] body .wrap .head {
  background-color: transparent !important;
  border-color: #e2e7ef !important;
  color: #17233b !important;
}
html[data-theme="light"] body .wrap .empty-cart h2 {
  color: #56647b !important;
}
html[data-theme="light"] body .wrap .empty-cart-icon {
  background: #f3f5f9 !important;
  background-color: #f3f5f9 !important;
  color: #68758b !important;
  border-color: #e2e7ef !important;
}
html[data-theme="light"] body .wrap .company,
html[data-theme="light"] body .wrap .regular {
  color: #68758b !important;
}
html[data-theme="light"] body .wrap .btn:not(.primary):not(.danger) {
  background: #edf1f6 !important;
  background-color: #edf1f6 !important;
  border-color: #d5dce7 !important;
  color: #24334d !important;
}
html[data-theme="light"] body .wrap .btn.danger {
  background: #fff1f2 !important;
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
  color: #be123c !important;
}


/* LIGHT MODE PAGE HEADERS STAY TRANSPARENT — no unwanted title rectangles. */
html[data-theme="light"] body .form-card-header,
html[data-theme="light"] body .page-card-header,
html[data-theme="light"] body .orders-card-header {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] body .form-card-header p,
html[data-theme="light"] body .page-card-header p,
html[data-theme="light"] body .orders-card-header p,
html[data-theme="light"] body .form-description,
html[data-theme="light"] body .page-description {
  color: #68758b !important;
}


/* SIDEBAR SUBMENU BLEND + SOLID LIGHT MODE LOGOUT. */
html[data-theme="dark"] body #sidebar .submenu {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #sidebar > .sidebar-footer > a[data-title="Logout"] {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  background-image: none !important;
  border: 1px solid #dc2626 !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #sidebar > .sidebar-footer > a[data-title="Logout"] i,
html[data-theme="light"] body #sidebar > .sidebar-footer > a[data-title="Logout"] span {
  color: #fff !important;
}
html[data-theme="light"] body #sidebar > .sidebar-footer > a[data-title="Logout"]:hover {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}

/* Cards page action buttons: richer Light Mode tones with a polished SaaS hover.
   Only applies to card-table actions; Dark Mode and other buttons are unchanged. */
html[data-theme="light"] body .cards-list-page .admin-icon-action {
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: .62rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .045) !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease !important;
}
html[data-theme="light"] body .cards-list-page .admin-icon-action:hover,
html[data-theme="light"] body .cards-list-page .admin-icon-action:focus-visible {
  transform: translateY(-1px) !important;
}
html[data-theme="light"] body .cards-list-page .card-status-action.is-active {
  color: #15803d !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
}
html[data-theme="light"] body .cards-list-page .card-status-action.is-active:hover,
html[data-theme="light"] body .cards-list-page .card-status-action.is-active:focus-visible {
  color: #166534 !important;
  background: #bbf7d0 !important;
  border-color: #22c55e !important;
  box-shadow: 0 5px 12px rgba(22, 163, 74, .18) !important;
}
html[data-theme="light"] body .cards-list-page .card-status-action.is-inactive {
  color: #dc2626 !important;
  background: #fff1f2 !important;
  border-color: #fda4af !important;
}
html[data-theme="light"] body .cards-list-page .card-status-action.is-inactive:hover,
html[data-theme="light"] body .cards-list-page .card-status-action.is-inactive:focus-visible {
  color: #b91c1c !important;
  background: #ffe4e6 !important;
  border-color: #fb7185 !important;
  box-shadow: 0 5px 12px rgba(225, 29, 72, .16) !important;
}
html[data-theme="light"] body .cards-list-page .card-assign-action {
  color: #9333ea !important;
  background: #f5eaff !important;
  border-color: #d8b4fe !important;
}
html[data-theme="light"] body .cards-list-page .card-assign-action:hover,
html[data-theme="light"] body .cards-list-page .card-assign-action:focus-visible {
  color: #7e22ce !important;
  background: #ead5ff !important;
  border-color: #a855f7 !important;
  box-shadow: 0 5px 12px rgba(147, 51, 234, .17) !important;
}
html[data-theme="light"] body .cards-list-page .admin-edit-action {
  color: #c2410c !important;
  background: #fff1e6 !important;
  border-color: #fdba74 !important;
}
html[data-theme="light"] body .cards-list-page .admin-edit-action:hover,
html[data-theme="light"] body .cards-list-page .admin-edit-action:focus-visible {
  color: #9a3412 !important;
  background: #ffdfc2 !important;
  border-color: #fb923c !important;
  box-shadow: 0 5px 12px rgba(234, 88, 12, .17) !important;
}
html[data-theme="light"] body .cards-list-page .card-share-action {
  color: #0369a1 !important;
  background: #e0f4ff !important;
  border-color: #7dd3fc !important;
}
html[data-theme="light"] body .cards-list-page .card-share-action:hover,
html[data-theme="light"] body .cards-list-page .card-share-action:focus-visible {
  color: #075985 !important;
  background: #bae6fd !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 5px 12px rgba(2, 132, 199, .16) !important;
}
html[data-theme="light"] body .cards-list-page .card-info-action {
  color: #0f766e !important;
  background: #d9fbf3 !important;
  border-color: #5eead4 !important;
}
html[data-theme="light"] body .cards-list-page .card-info-action:hover,
html[data-theme="light"] body .cards-list-page .card-info-action:focus-visible {
  color: #115e59 !important;
  background: #b5f5e8 !important;
  border-color: #2dd4bf !important;
  box-shadow: 0 5px 12px rgba(13, 148, 136, .16) !important;
}
html[data-theme="light"] body .cards-list-page .card-youtube-action {
  color: #be123c !important;
  background: #fff0f1 !important;
  border-color: #fda4af !important;
}
html[data-theme="light"] body .cards-list-page .card-youtube-action:hover,
html[data-theme="light"] body .cards-list-page .card-youtube-action:focus-visible {
  color: #9f1239 !important;
  background: #fecdd3 !important;
  border-color: #fb7185 !important;
  box-shadow: 0 5px 12px rgba(225, 29, 72, .16) !important;
}
html[data-theme="light"] body .cards-list-page .admin-icon-action:focus-visible {
  outline: 2px solid rgba(36, 59, 100, .35) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] body .cards-list-page .admin-icon-action {
    transition: none !important;
  }
  html[data-theme="light"] body .cards-list-page .admin-icon-action:hover,
  html[data-theme="light"] body .cards-list-page .admin-icon-action:focus-visible {
    transform: none !important;
  }
}


/* Cards filters: labels remain text-only with no shaded rectangle behind them. */
html body .cards-list-page .cards-filter-label,
html body .cards-toolbar .cards-filter-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1.25 !important;
}
html[data-theme="dark"] body .cards-list-page .cards-filter-label,
html[data-theme="dark"] body .cards-toolbar .cards-filter-label {
  color: #e5e7eb !important;
}
html[data-theme="light"] body .cards-list-page .cards-filter-label,
html[data-theme="light"] body .cards-toolbar .cards-filter-label {
  color: #34445f !important;
}

/* Friendly image placeholders: a failed upload path should never show a browser broken-image glyph. */
.image-fallback-placeholder {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  color: #8b95a7 !important;
  background: rgba(148, 163, 184, .09) !important;
  border: 1px dashed rgba(148, 163, 184, .34) !important;
  border-radius: .6rem !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}
.image-fallback-placeholder > i { display: block !important; line-height: 1 !important; }
.card-table-logo-button > .image-fallback-placeholder,
.card-logo-preview > .image-fallback-placeholder,
.card-cover-preview > .image-fallback-placeholder,
.product-image-preview > .image-fallback-placeholder,
.service-image-preview > .image-fallback-placeholder,
.settings-logo-preview > .image-fallback-placeholder,
.payment-qr-preview > .image-fallback-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
}
.card-table-logo-button > .image-fallback-placeholder { font-size: 1rem !important; }
.card-logo-preview > .image-fallback-placeholder { font-size: 1.25rem !important; }
.card-cover-preview > .image-fallback-placeholder { font-size: 1.25rem !important; }
.product-image-preview > .image-fallback-placeholder,
.service-image-preview > .image-fallback-placeholder { font-size: 1.5rem !important; }
.gallery-existing-item > .image-fallback-placeholder {
  width: 100% !important;
  height: 96px !important;
  border-radius: 6px !important;
}
.settings-logo-preview > .image-fallback-placeholder { font-size: 1.5rem !important; }
.payment-qr-preview > .image-fallback-placeholder {
  flex: 0 0 92px !important;
  width: 92px !important;
  height: 92px !important;
  background: #f8fafc !important;
  border: 1px solid #d4d4d8 !important;
  color: #94a3b8 !important;
}
.card-image-modal-item > .image-fallback-placeholder,
.image-modal-fallback {
  width: 100% !important;
  min-height: 15rem !important;
  padding: 1.25rem !important;
  gap: .65rem !important;
  color: #8b95a7 !important;
  text-align: center !important;
  font-size: 1.5rem !important;
}
.image-fallback-placeholder > span { font-size: .8rem !important; font-weight: 600 !important; line-height: 1.4 !important; }
.gallery-existing-item > .image-fallback-placeholder { grid-column: 1 / -1; }
.product > .image-fallback-placeholder,
.service-card > .image-fallback-placeholder {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(148, 163, 184, .09) !important;
}
.avatar.image-fallback-placeholder {
  display: inline-grid !important;
  vertical-align: middle !important;
  color: #9ca3af !important;
  background: #353541 !important;
  border: 4px solid var(--panel) !important;
  border-radius: 50% !important;
  margin-top: -78px !important;
  position: relative !important;
  font-size: 1.8rem !important;
}
.wrap .item > .image-fallback-placeholder {
  width: 90px !important;
  height: 90px !important;
  min-width: 90px !important;
  border-radius: .55rem !important;
}
html[data-theme="light"] body .image-fallback-placeholder {
  color: #8793a7 !important;
  background: #f5f7fb !important;
  border-color: #dbe2ec !important;
}
@media (max-width: 600px) {
  .product > .image-fallback-placeholder,
  .service-card > .image-fallback-placeholder {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
  .gallery-existing-item > .image-fallback-placeholder { height: 82px !important; }
  .wrap .item > .image-fallback-placeholder { width: 70px !important; height: 70px !important; min-width: 70px !important; }
}

/* Cards page readability fixes: Light Mode text must remain dark on light surfaces. */
html[data-theme="light"] body .cards-list-page .admin-created-at,
html[data-theme="light"] body .cards-list-page td .admin-created-at {
  color: #17233b !important;
  opacity: 1 !important;
}

/* Company Details and related card-view modals: override legacy dark-mode text colors. */
html[data-theme="light"] body .card-view-modal .card-view-dialog {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 14px 44px rgba(23, 35, 59, .16) !important;
}
html[data-theme="light"] body .card-view-modal .card-view-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom-color: #e2e7ef !important;
}
html[data-theme="light"] body .card-view-modal .card-view-header h2,
html[data-theme="light"] body .card-view-modal .card-image-modal-item h3 {
  color: #64748b !important;
}
html[data-theme="light"] body .card-view-modal .card-view-header p {
  color: #68758b !important;
}
html[data-theme="light"] body .card-view-modal .card-details-body,
html[data-theme="light"] body .card-view-modal .card-youtube-modal-body,
html[data-theme="light"] body .card-view-modal .card-images-modal-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
}
html[data-theme="light"] body .card-view-modal .card-detail-item,
html[data-theme="light"] body .card-view-modal .card-image-modal-item,
html[data-theme="light"] body .card-view-modal .card-youtube-link {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 2px 8px rgba(23, 35, 59, .035) !important;
}
html[data-theme="light"] body .card-view-modal .card-detail-label {
  color: #64748b !important;
}
html[data-theme="light"] body .card-view-modal .card-detail-value,
html[data-theme="light"] body .card-view-modal .card-youtube-link,
html[data-theme="light"] body .card-view-modal .card-modal-empty {
  color: #17233b !important;
}
html[data-theme="light"] body .card-view-modal .card-detail-value a {
  color: #1d4ed8 !important;
}
html[data-theme="light"] body .card-view-modal .card-modal-close {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #24334d !important;
  border-color: #dce2eb !important;
}
html[data-theme="light"] body .card-view-modal .card-modal-close:hover {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
html[data-theme="light"] body .card-view-modal .card-image-modal-item img {
  background: #f8fafc !important;
}


/* Assign Card modal refinement: clean contact rows and readable Light Mode text. */
html body .card-assign-option-content {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .38rem;
}
html body .card-assign-option-name {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
html body .card-assign-option-contact-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: .32rem;
  min-width: 0;
}
html body .card-assign-option-contact {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  max-width: 100%;
  font-size: .78rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
html body .card-assign-option-contact i {
  flex: 0 0 auto;
  width: .9rem;
  text-align: center;
}
html[data-theme="light"] body .card-assign-dialog {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 14px 44px rgba(23, 35, 59, .16) !important;
}
html[data-theme="light"] body .card-assign-dialog .card-view-header {
  background: #ffffff !important;
  border-bottom-color: #e2e7ef !important;
}
html[data-theme="light"] body .card-assign-dialog .card-view-header h2 {
  color: #64748b !important;
}
html[data-theme="light"] body .card-assign-dialog .card-view-header p {
  color: #68758b !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-body {
  background: #ffffff !important;
  color: #17233b !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-option {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 2px 8px rgba(23, 35, 59, .035) !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-option:hover,
html[data-theme="light"] body .card-assign-dialog .card-assign-option:focus-within {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-option.is-selected {
  background: #fff1f2 !important;
  border-color: #fda4af !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-option-name {
  color: #17233b !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-option-meta,
html[data-theme="light"] body .card-assign-dialog .card-assign-option-contact {
  color: #53627a !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-option-contact i {
  color: #64748b !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-empty {
  background: #f8fafc !important;
  color: #53627a !important;
  border-color: #dce2eb !important;
}
html[data-theme="light"] body .card-assign-dialog .card-assign-actions {
  border-top-color: #e2e7ef !important;
}
html[data-theme="dark"] body .card-assign-dialog .card-assign-option-contact {
  color: #b9c2d1;
}
@media (max-width: 600px) {
  html body .card-assign-option-contact-list {
    flex-direction: column;
    align-items: flex-start;
    gap: .28rem;
  }
}


/* Cards listing: readable date summary text in Light Mode. */
html[data-theme="light"] body .cards-list-page .cards-date-summary-content span,
html[data-theme="light"] body .cards-list-page .cards-date-summary-content strong {
  color: #24334d !important;
}
html[data-theme="light"] body .cards-list-page .cards-date-summary-content span {
  color: #475569 !important;
}

/* Compact SaaS pagination shared by Admin, Superadmin and Client card lists. */
.cards-list-page .cards-table tbody tr[hidden] {
  display: none !important;
}
.cards-pagination {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: 12px 0 2px;
  padding: 12px 14px;
  border: 1px solid #594632;
  border-radius: 13px;
  background: #242630;
  color: #e5e7eb;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
}
.cards-pagination[hidden] { display: none !important; }
.cards-pagination-meta {
  min-width: 0;
  color: #e7d6bf;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.cards-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}
.cards-pagination-button {
  box-sizing: border-box;
  min-width: 34px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #68543b;
  border-radius: 9px;
  background: rgba(249, 185, 95, .11);
  color: #ffdbad;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.cards-pagination-button.is-nav { padding-inline: 12px; }
.cards-pagination-button:hover:not(:disabled) {
  background: #ffe1b3;
  border-color: #eeb15b;
  color: #603b0c;
  box-shadow: 0 3px 9px rgba(238, 177, 91, .18);
  transform: translateY(-1px);
}
.cards-pagination-button.is-current,
.cards-pagination-button.is-current:hover {
  background: #f6bf70;
  border-color: #e9a94e;
  color: #3b260b;
  box-shadow: 0 2px 7px rgba(246, 191, 112, .24);
}
.cards-pagination-button:focus-visible {
  outline: 2px solid #f6bf70;
  outline-offset: 2px;
}
.cards-pagination-button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.cards-pagination-ellipsis {
  min-width: 16px;
  color: #c8aa82;
  text-align: center;
  user-select: none;
}
html[data-theme="light"] body .cards-list-page .cards-pagination {
  border-color: #f2dfc3;
  background: #ffffff;
  color: #334155;
  box-shadow: 0 4px 14px rgba(35, 51, 77, .055);
}
html[data-theme="light"] body .cards-list-page .cards-pagination-meta {
  color: #475569;
}
html[data-theme="light"] body .cards-list-page .cards-pagination-button {
  border-color: #f0d4aa;
  background: #fff6e8;
  color: #8a4b12;
}
html[data-theme="light"] body .cards-list-page .cards-pagination-button:hover:not(:disabled) {
  border-color: #eeb15b;
  background: #ffebcb;
  color: #673b0e;
}
html[data-theme="light"] body .cards-list-page .cards-pagination-button.is-current,
html[data-theme="light"] body .cards-list-page .cards-pagination-button.is-current:hover {
  border-color: #e9a94e;
  background: #f6bf70;
  color: #3b260b;
}
html[data-theme="light"] body .cards-list-page .cards-pagination-ellipsis { color: #a16207; }
@media (max-width: 640px) {
  .cards-list-page .cards-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 11px;
  }
  .cards-list-page .cards-pagination-controls {
    justify-content: flex-start;
    width: 100%;
    gap: 4px;
  }
  .cards-list-page .cards-pagination-button {
    min-width: 32px;
    min-height: 32px;
    padding: 7px 8px;
  }
  .cards-list-page .cards-pagination-button.is-nav { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cards-list-page .cards-pagination-button { transition: none; }
  .cards-list-page .cards-pagination-button:hover:not(:disabled) { transform: none; }
}


/* Cards table logo thumbnails: keep no-logo and failed-image tiles identical
   for records created by Admin, Superadmin, or Client, in both theme modes. */
html[data-theme="dark"] body .card-table-logo-button,
html:not([data-theme="light"]) body .card-table-logo-button {
  box-sizing: border-box !important;
  background: #353541 !important;
  background-color: #353541 !important;
  border: 1px solid #4a4a58 !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .12) !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
html[data-theme="dark"] body .card-table-logo-button.is-logo-placeholder,
html:not([data-theme="light"]) body .card-table-logo-button.is-logo-placeholder,
html[data-theme="dark"] body .card-table-logo-button.has-image-fallback,
html:not([data-theme="light"]) body .card-table-logo-button.has-image-fallback {
  background: #353541 !important;
  background-color: #353541 !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body .card-table-logo-button.is-logo-placeholder > i,
html:not([data-theme="light"]) body .card-table-logo-button.is-logo-placeholder > i,
html[data-theme="dark"] body .card-table-logo-button.has-image-fallback > .image-fallback-placeholder,
html:not([data-theme="light"]) body .card-table-logo-button.has-image-fallback > .image-fallback-placeholder {
  color: #cbd5e1 !important;
}
html[data-theme="light"] body .card-table-logo-button {
  box-sizing: border-box !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #d9e1ec !important;
  color: #64748b !important;
  box-shadow: 0 2px 8px rgba(23, 35, 59, .06) !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
html[data-theme="light"] body .card-table-logo-button.is-logo-placeholder,
html[data-theme="light"] body .card-table-logo-button.has-image-fallback {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #64748b !important;
}
html[data-theme="light"] body .card-table-logo-button.is-logo-placeholder > i,
html[data-theme="light"] body .card-table-logo-button.has-image-fallback > .image-fallback-placeholder {
  color: #64748b !important;
}
html[data-theme="dark"] body .card-table-logo-button:hover,
html:not([data-theme="light"]) body .card-table-logo-button:hover {
  background: #40404d !important;
  background-color: #40404d !important;
  border-color: #77778a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important;
  transform: translateY(-1px);
}
html[data-theme="light"] body .card-table-logo-button:hover {
  background: #e8eef7 !important;
  background-color: #e8eef7 !important;
  border-color: #aebdd2 !important;
  color: #34445f !important;
  box-shadow: 0 4px 12px rgba(23, 35, 59, .11) !important;
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  html body .card-table-logo-button { transition: none !important; }
  html body .card-table-logo-button:hover { transform: none !important; }
}


/* FINAL SIDEBAR POLISH — submenu surfaces blend into the sidebar in both themes.
   Only the active item and a subtle hover state receive a background. */
html[data-theme="light"] body #sidebar .sidebar-nav > .submenu,
html[data-theme="dark"] body #sidebar .sidebar-nav > .submenu,
html:not([data-theme="light"]) body #sidebar .sidebar-nav > .submenu {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active),
html[data-theme="dark"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active),
html:not([data-theme="light"]) body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active) {
  color: #24334d !important;
}
html[data-theme="light"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active):hover,
html[data-theme="light"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active):focus-visible {
  background: rgba(36, 51, 77, .055) !important;
  background-color: rgba(36, 51, 77, .055) !important;
  color: #17233b !important;
}
html[data-theme="dark"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active),
html:not([data-theme="light"]) body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active) {
  color: #b9c1cf !important;
}
html[data-theme="dark"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active):hover,
html[data-theme="dark"] body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active):focus-visible,
html:not([data-theme="light"]) body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active):hover,
html:not([data-theme="light"]) body #sidebar .sidebar-nav > .submenu > a.nav-subitem:not(.is-active):focus-visible {
  background: rgba(255, 255, 255, .055) !important;
  background-color: rgba(255, 255, 255, .055) !important;
  color: #f3f4f6 !important;
}

/* Keep the desktop collapse control pinned to the viewport while page content scrolls. */
@media (min-width: 768px) {
  html body #collapseToggle.sidebar-toggle {
    position: fixed !important;
    top: 1.1rem !important;
    bottom: auto !important;
    right: auto !important;
    left: var(--sidebar-open, 15rem) !important;
    z-index: 10000 !important;
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  html body #sidebar.collapsed ~ #collapseToggle.sidebar-toggle {
    left: var(--sidebar-collapsed, 4.5rem) !important;
  }
}


/* Shared SaaS list-page polish for Admins, Clients, Contact Details and Orders. */
.list-pagination { margin-top: 12px; }
.list-pagination .cards-pagination-meta { overflow-wrap: anywhere; }
.list-pagination .cards-pagination-controls { min-width: 0; }
.admin-search-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 136px !important;
  margin: 10px 0 0 !important;
  padding: 20px 16px !important;
  border: 1px solid #41414f !important;
  border-radius: 13px !important;
  border-top: 1px solid #41414f !important;
  background: #2b2b35 !important;
  color: #d1d5db !important;
  text-align: center !important;
}
.admin-search-empty[hidden] { display: none !important; }
.admin-search-empty .clean-empty-icon { margin: 0 0 2px !important; }
.admin-search-empty strong { font-size: 14px !important; color: #e5e7eb !important; }
.admin-search-empty > span { max-width: 480px; font-size: 12px !important; color: #a1a1b3 !important; }
html[data-theme="light"] body .list-pagination {
  border-color: #f2dfc3 !important;
  background: #ffffff !important;
  color: #334155 !important;
  box-shadow: 0 4px 14px rgba(35, 51, 77, .055) !important;
}
html[data-theme="light"] body .list-pagination .cards-pagination-meta { color: #475569 !important; }
html[data-theme="light"] body .list-pagination .cards-pagination-button {
  border-color: #f0d4aa !important;
  background: #fff6e8 !important;
  color: #8a4b12 !important;
}
html[data-theme="light"] body .list-pagination .cards-pagination-button:hover:not(:disabled) {
  border-color: #eeb15b !important;
  background: #ffebcb !important;
  color: #673b0e !important;
}
html[data-theme="light"] body .list-pagination .cards-pagination-button.is-current,
html[data-theme="light"] body .list-pagination .cards-pagination-button.is-current:hover {
  border-color: #e9a94e !important;
  background: #f6bf70 !important;
  color: #3b260b !important;
}
html[data-theme="light"] body .list-pagination .cards-pagination-ellipsis { color: #a16207 !important; }
html[data-theme="light"] body .admin-search-empty {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #17233b !important;
  border-color: #e2e7ef !important;
  box-shadow: 0 3px 12px rgba(23, 35, 59, .035) !important;
}
html[data-theme="light"] body .admin-search-empty strong { color: #17233b !important; }
html[data-theme="light"] body .admin-search-empty > span { color: #64748b !important; }
html[data-theme="light"] body .admin-search-empty .clean-empty-icon {
  background: #ffffff !important;
  border-color: #e2e7ef !important;
  color: #64748b !important;
}
html[data-theme="light"] body .admin-list-page .admin-created-at,
html[data-theme="light"] body .admin-list-page .admin-table td,
html[data-theme="light"] body .admin-list-page .admin-table td strong {
  color: #24334d !important;
}
html[data-theme="light"] body .admin-list-page .admin-status-active { color: #15803d !important; }
html[data-theme="light"] body .admin-list-page .admin-status-inactive,
html[data-theme="light"] body .admin-list-page .admin-status-blocked { color: #b91c1c !important; }
html[data-theme="light"] body .admin-list-page .admin-edit-action {
  color: #c2410c !important; background: #fff1e6 !important; border-color: #fdba74 !important;
}
html[data-theme="light"] body .admin-list-page .admin-edit-action:hover,
html[data-theme="light"] body .admin-list-page .admin-edit-action:focus-visible {
  color: #9a3412 !important; background: #ffdfc2 !important; border-color: #fb923c !important;
}
html[data-theme="light"] body .admin-list-page .admin-delete-action {
  color: #be123c !important; background: #fff0f1 !important; border-color: #fda4af !important;
}
html[data-theme="light"] body .admin-list-page .admin-delete-action:hover,
html[data-theme="light"] body .admin-list-page .admin-delete-action:focus-visible {
  color: #9f1239 !important; background: #ffe4e6 !important; border-color: #fb7185 !important;
}
html[data-theme="light"] body .orders-filter-empty {
  background: transparent !important;
  border-color: transparent !important;
  color: #17233b !important;
}
html[data-theme="light"] body .contact-message-dialog {
  background: #ffffff !important; border-color: #e2e7ef !important; color: #17233b !important;
  box-shadow: 0 24px 70px rgba(23, 35, 59, .18) !important;
}
html[data-theme="light"] body .contact-message-head { border-color: #e2e7ef !important; }
html[data-theme="light"] body .contact-message-head h2 { color: #17233b !important; }
html[data-theme="light"] body .contact-message-head button {
  background: #f8fafc !important; color: #334155 !important; border-color: #e2e7ef !important;
}
html[data-theme="light"] body .contact-message-meta > div,
html[data-theme="light"] body .contact-message-content p {
  background: #f8fafc !important; color: #24334d !important; border-color: #e2e7ef !important;
}
html[data-theme="light"] body .contact-message-meta strong { color: #17233b !important; }
html[data-theme="light"] body .contact-message-meta span,
html[data-theme="light"] body .contact-message-content > span { color: #64748b !important; }
@media (max-width: 640px) {
  .list-pagination { align-items: flex-start; flex-direction: column; gap: 10px; padding: 11px; }
  .list-pagination .cards-pagination-controls { justify-content: flex-start; width: 100%; gap: 4px; }
  .list-pagination .cards-pagination-button { min-width: 32px; min-height: 32px; padding: 7px 8px; }
}

html body .orders-filter-empty { min-height: 132px !important; padding: 18px 14px !important; }
html body .orders-filter-empty .clean-empty-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin-bottom: 2px !important; font-size: 17px !important; }
html body .orders-filter-empty strong { font-size: 13px !important; }
html body .orders-filter-empty > span { font-size: 12px !important; }


/* Admins / Clients listing polish: status spacing, accessible Light Mode text, blue edit action. */
html body .admin-list-page .admin-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .42rem !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  padding: .32rem .68rem !important;
  box-sizing: border-box !important;
}
html body .admin-list-page .admin-status > i {
  display: inline-block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  line-height: 1 !important;
}
html body .admin-list-page .admin-status-active {
  color: #4ade80 !important;
  background: rgba(34, 197, 94, .09) !important;
  border-color: rgba(74, 222, 128, .38) !important;
}
html body .admin-list-page .admin-status-inactive,
html body .admin-list-page .admin-status-blocked {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, .09) !important;
  border-color: rgba(248, 113, 113, .4) !important;
}
html body .admin-list-page .admin-edit-action {
  color: #93c5fd !important;
  background: rgba(59, 130, 246, .12) !important;
  border-color: rgba(96, 165, 250, .48) !important;
}
html body .admin-list-page .admin-edit-action:hover,
html body .admin-list-page .admin-edit-action:focus-visible {
  color: #dbeafe !important;
  background: rgba(37, 99, 235, .28) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .16) !important;
}
html[data-theme="light"] body .admin-list-page .cards-date-summary-content span,
html[data-theme="light"] body .admin-list-page .cards-date-summary-content strong {
  color: #24334d !important;
}
html[data-theme="light"] body .admin-list-page .cards-date-summary-content span {
  color: #475569 !important;
}
html[data-theme="light"] body .admin-list-page .cards-date-summary {
  background: #ffffff !important;
  color: #24334d !important;
  border-color: #e2e7ef !important;
}
html[data-theme="light"] body .admin-list-page .admin-status-active {
  color: #166534 !important;
  background: #eaf7ef !important;
  border-color: #bfe4cc !important;
}
html[data-theme="light"] body .admin-list-page .admin-status-inactive,
html[data-theme="light"] body .admin-list-page .admin-status-blocked {
  color: #b91c1c !important;
  background: #fff0f0 !important;
  border-color: #f2c6c6 !important;
}
html[data-theme="light"] body .admin-list-page .admin-edit-action {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}
html[data-theme="light"] body .admin-list-page .admin-edit-action:hover,
html[data-theme="light"] body .admin-list-page .admin-edit-action:focus-visible {
  color: #1e40af !important;
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .12) !important;
}
html[data-theme="light"] body .admin-list-page .admin-toolbar .admin-search-input,
html[data-theme="light"] body .admin-list-page .admin-toolbar .admin-filter-select,
html[data-theme="light"] body .admin-list-page .admin-toolbar .cards-date-filter {
  color: #24334d !important;
  background: #f8fafc !important;
  border-color: #dce3ed !important;
}
html[data-theme="light"] body .admin-list-page .admin-toolbar .admin-search-input::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}


/* SaaS table heading finish for Cards, Admins and Clients listings.
   Light Mode uses a deep navy/slate header with high-contrast text; body rows stay light. */
html[data-theme="light"] body .cards-list-page .cards-table thead,
html[data-theme="light"] body .cards-list-page .cards-table thead tr,
html[data-theme="light"] body .cards-list-page .cards-table thead th,
html[data-theme="light"] body .admin-list-page .admin-table thead,
html[data-theme="light"] body .admin-list-page .admin-table thead tr,
html[data-theme="light"] body .admin-list-page .admin-table thead th {
  background: #27364b !important;
  background-color: #27364b !important;
  color: #f8fafc !important;
  border-color: #3b4b63 !important;
}
html[data-theme="light"] body .cards-list-page .cards-table thead th,
html[data-theme="light"] body .admin-list-page .admin-table thead th {
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  /* Clean SaaS header: no decorative red underline; use subtle slate dividers. */
  box-shadow: none !important;
  border-bottom: 1px solid #43516a !important;
}
html[data-theme="dark"] body .cards-list-page .cards-table thead,
html[data-theme="dark"] body .cards-list-page .cards-table thead tr,
html[data-theme="dark"] body .cards-list-page .cards-table thead th,
html[data-theme="dark"] body .admin-list-page .admin-table thead,
html[data-theme="dark"] body .admin-list-page .admin-table thead tr,
html[data-theme="dark"] body .admin-list-page .admin-table thead th {
  background: #353c4b !important;
  background-color: #353c4b !important;
  color: #eef2f8 !important;
  border-color: #4a5365 !important;
}
html[data-theme="dark"] body .cards-list-page .cards-table thead th,
html[data-theme="dark"] body .admin-list-page .admin-table thead th {
  font-weight: 650 !important;
  letter-spacing: .01em !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .035) !important;
}


/* Compact arrow-only Previous / Next controls for every shared pagination. */
html body .cards-pagination .cards-pagination-button {
  min-width: 30px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 5px 7px !important;
  border-radius: 8px !important;
}
html body .cards-pagination .cards-pagination-button.is-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  flex: 0 0 30px !important;
}
html body .cards-pagination .cards-pagination-button.is-nav i {
  display: block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
html body .cards-pagination .cards-pagination-controls { gap: 4px !important; }


/* Cards table: show Created At date above its time for a cleaner, scan-friendly column. */
html body .cards-list-page .cards-table td.card-created-at-cell {
  min-width: 112px !important;
  vertical-align: middle !important;
}
html body .cards-list-page .admin-created-at.card-created-at-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  white-space: normal !important;
  line-height: 1.2 !important;
}
html body .cards-list-page .admin-created-at.card-created-at-stack .created-at-date {
  display: block !important;
  color: #e5e7eb !important;
  font-size: .78rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
html body .cards-list-page .admin-created-at.card-created-at-stack .created-at-time {
  display: block !important;
  color: #aeb8c8 !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}
html[data-theme="light"] body .cards-list-page .admin-created-at.card-created-at-stack .created-at-date {
  color: #24334d !important;
}
html[data-theme="light"] body .cards-list-page .admin-created-at.card-created-at-stack .created-at-time {
  color: #69778d !important;
}
html[data-theme="dark"] body .cards-list-page .admin-created-at.card-created-at-stack .created-at-date {
  color: #eef2f8 !important;
}
html[data-theme="dark"] body .cards-list-page .admin-created-at.card-created-at-stack .created-at-time {
  color: #aeb8c8 !important;
}
@media (max-width: 767px) {
  html body .cards-list-page .cards-table td.card-created-at-cell { min-width: 104px !important; }
  html body .cards-list-page .admin-created-at.card-created-at-stack { gap: 2px !important; }
  html body .cards-list-page .admin-created-at.card-created-at-stack .created-at-date { font-size: .74rem !important; }
  html body .cards-list-page .admin-created-at.card-created-at-stack .created-at-time { font-size: .68rem !important; }
}


/* All application tables: stack date above time, with theme-aware readable contrast. */
html body .admin-table .table-datetime-stack {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
}
html body .admin-table .table-datetime-stack .table-datetime-date {
  display: block !important;
  color: #24334d !important;
  font-size: .78rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
html body .admin-table .table-datetime-stack .table-datetime-time {
  display: block !important;
  color: #69778d !important;
  font-size: .70rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
}
html[data-theme="light"] body .admin-table .table-datetime-stack .table-datetime-date { color: #24334d !important; }
html[data-theme="light"] body .admin-table .table-datetime-stack .table-datetime-time { color: #69778d !important; }
html[data-theme="dark"] body .admin-table .table-datetime-stack .table-datetime-date { color: #eef2f8 !important; }
html[data-theme="dark"] body .admin-table .table-datetime-stack .table-datetime-time { color: #aeb8c8 !important; }
@media (max-width: 767px) {
  html body .admin-table .table-datetime-stack { gap: 2px !important; }
  html body .admin-table .table-datetime-stack .table-datetime-date { font-size: .74rem !important; }
  html body .admin-table .table-datetime-stack .table-datetime-time { font-size: .67rem !important; }
}

/* CARD LOGO / COVER UPLOADS — clean responsive SaaS layout */
html body .create-card-outer .card-image-upload-field {
  min-width: 0 !important; box-sizing: border-box !important; padding: 14px !important;
  border: 1px solid #3b414f !important; border-radius: 14px !important;
  background: #20232d !important; box-shadow: 0 3px 12px rgba(0,0,0,.10) !important;
}
html body .create-card-outer .card-image-upload-field > label {
  display:flex !important; align-items:center !important; gap:8px !important;
  margin:0 0 10px !important; line-height:1.35 !important; font-weight:650 !important;
}
html body .create-card-outer .card-image-upload-field > label > i {
  display:inline-grid !important; place-items:center !important; width:18px !important;
  min-width:18px !important; color:#8ea8d6 !important; font-size:.9rem !important;
}
html body .create-card-outer .card-image-upload-box {
  display:grid !important; grid-template-columns:72px minmax(0,1fr) !important;
  grid-template-areas:"preview upload" !important; align-items:center !important;
  gap:12px !important; width:100% !important; min-width:0 !important; margin:0 !important;
  padding:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
}
html body .create-card-outer .card-image-upload-box:not(.card-cover-upload-box) > .card-logo-preview {
  grid-area:preview !important; width:72px !important; min-width:72px !important; height:72px !important;
  box-sizing:border-box !important; display:grid !important; place-items:center !important;
  border:1px solid #454d5d !important; border-radius:12px !important;
  background:#292e3a !important; color:#a8b4c8 !important; overflow:hidden !important;
}
html body .create-card-outer .card-image-upload-box:not(.card-cover-upload-box) > input[type="file"] { grid-area:upload !important; }
html body .create-card-outer .card-cover-upload-box {
  grid-template-columns:150px minmax(0,1fr) !important;
  grid-template-areas:"preview upload" "preview restore" !important;
  grid-template-rows:minmax(42px,auto) auto !important; align-items:center !important;
  column-gap:12px !important; row-gap:9px !important; padding:10px !important;
  border:1px solid #3b414f !important; border-radius:12px !important; background:#252a35 !important;
}
html body .create-card-outer .card-cover-upload-box > .card-cover-preview {
  grid-area:preview !important; width:150px !important; min-width:0 !important; max-width:100% !important;
  height:92px !important; box-sizing:border-box !important; border:1px solid #454d5d !important;
  border-radius:10px !important; background:#2b303c !important; color:#a8b4c8 !important; overflow:hidden !important;
}
html body .create-card-outer .card-image-upload-box input[type="file"] {
  display:block !important; grid-area:upload !important; width:100% !important; min-width:0 !important;
  max-width:100% !important; box-sizing:border-box !important; margin:0 !important; padding:8px 9px !important;
  border:1px solid #414a5a !important; border-radius:10px !important; background:#292e3a !important;
  color:#e5eaf3 !important; font-size:.79rem !important; line-height:1.35 !important; overflow:hidden !important;
}
html body .create-card-outer .card-image-upload-box input[type="file"]::file-selector-button,
html body .create-card-outer .card-image-upload-box input[type="file"]::-webkit-file-upload-button {
  margin:0 .55rem 0 0 !important; padding:.48rem .68rem !important; border:1px solid #4b566a !important;
  border-radius:7px !important; background:#363d4b !important; color:#f1f5fb !important;
  font:inherit !important; font-weight:600 !important; cursor:pointer !important;
  transition:background-color .14s ease,border-color .14s ease !important;
}
html body .create-card-outer .card-image-upload-box input[type="file"]::file-selector-button:hover,
html body .create-card-outer .card-image-upload-box input[type="file"]::-webkit-file-upload-button:hover {
  background:#424c5e !important; border-color:#7184a3 !important;
}
html body .create-card-outer .card-cover-upload-box > #restoreDefaultWallpaper {
  grid-area:restore !important; justify-self:start !important; align-self:start !important;
  width:auto !important; min-width:0 !important; max-width:100% !important; min-height:38px !important;
  margin:0 !important; padding:8px 11px !important; display:inline-flex !important; align-items:center !important;
  justify-content:center !important; gap:7px !important; border:1px solid #495469 !important;
  border-radius:9px !important; background:#303746 !important; color:#e5eaf3 !important;
  font-size:.78rem !important; line-height:1.35 !important; font-weight:600 !important;
  white-space:normal !important; text-align:center !important; box-sizing:border-box !important;
}
html body .create-card-outer .card-cover-upload-box > #restoreDefaultWallpaper:hover {
  background:#3b4658 !important; border-color:#7b8ba5 !important; color:#fff !important;
}
html body .create-card-outer .card-image-upload-field .field-help {
  display:block !important; margin:9px 0 0 !important; color:#aab5c7 !important;
  font-size:.75rem !important; line-height:1.5 !important;
}
html[data-theme="light"] body .create-card-outer .card-image-upload-field {
  background:#fff !important; border-color:#e0e6ef !important; box-shadow:0 3px 12px rgba(24,39,75,.045) !important;
}
html[data-theme="light"] body .create-card-outer .card-image-upload-field > label { color:#24334d !important; }
html[data-theme="light"] body .create-card-outer .card-image-upload-field > label > i { color:#536b92 !important; }
html[data-theme="light"] body .create-card-outer .card-image-upload-box:not(.card-cover-upload-box) > .card-logo-preview,
html[data-theme="light"] body .create-card-outer .card-cover-upload-box > .card-cover-preview {
  border-color:#e0e6ef !important; background:#f1f4f8 !important; color:#718096 !important;
}
html[data-theme="light"] body .create-card-outer .card-cover-upload-box {
  border-color:#e3e8f0 !important; background:#f8fafc !important;
}
html[data-theme="light"] body .create-card-outer .card-image-upload-box input[type="file"] {
  border-color:#dce3ed !important; background:#f8fafc !important; color:#24334d !important; color-scheme:light !important;
}
html[data-theme="light"] body .create-card-outer .card-image-upload-box input[type="file"]::file-selector-button,
html[data-theme="light"] body .create-card-outer .card-image-upload-box input[type="file"]::-webkit-file-upload-button {
  border-color:#d5dce7 !important; background:#edf1f6 !important; color:#24334d !important;
}
html[data-theme="light"] body .create-card-outer .card-image-upload-box input[type="file"]::file-selector-button:hover,
html[data-theme="light"] body .create-card-outer .card-image-upload-box input[type="file"]::-webkit-file-upload-button:hover {
  border-color:#aebbd0 !important; background:#e3eaf3 !important;
}
html[data-theme="light"] body .create-card-outer .card-cover-upload-box > #restoreDefaultWallpaper {
  border-color:#d5deeb !important; background:#edf2f9 !important; color:#243b64 !important;
}
html[data-theme="light"] body .create-card-outer .card-cover-upload-box > #restoreDefaultWallpaper:hover {
  border-color:#a9bad3 !important; background:#e3ebf7 !important; color:#172b4d !important;
}
html[data-theme="light"] body .create-card-outer .card-image-upload-field .field-help { color:#65738a !important; }
@media (max-width:767px) {
  html body .create-card-outer .card-image-upload-box:not(.card-cover-upload-box) {
    grid-template-columns:64px minmax(0,1fr) !important; gap:10px !important;
  }
  html body .create-card-outer .card-image-upload-box:not(.card-cover-upload-box) > .card-logo-preview {
    width:64px !important; min-width:64px !important; height:64px !important;
  }
  html body .create-card-outer .card-cover-upload-box {
    grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"preview" "upload" "restore" !important;
    grid-template-rows:auto auto auto !important; gap:10px !important;
  }
  html body .create-card-outer .card-cover-upload-box > .card-cover-preview {
    width:min(100%,230px) !important; height:104px !important;
  }
  html body .create-card-outer .card-cover-upload-box > #restoreDefaultWallpaper {
    justify-self:start !important; width:auto !important; max-width:100% !important;
  }
}
@media (max-width:420px) {
  html body .create-card-outer .card-image-upload-field { padding:11px !important; }
  html body .create-card-outer .card-image-upload-box:not(.card-cover-upload-box) {
    grid-template-columns:56px minmax(0,1fr) !important; gap:8px !important;
  }
  html body .create-card-outer .card-image-upload-box:not(.card-cover-upload-box) > .card-logo-preview {
    width:56px !important; min-width:56px !important; height:56px !important;
  }
  html body .create-card-outer .card-image-upload-box input[type="file"] { font-size:.73rem !important; padding:7px !important; }
  html body .create-card-outer .card-image-upload-box input[type="file"]::file-selector-button,
  html body .create-card-outer .card-image-upload-box input[type="file"]::-webkit-file-upload-button {
    margin-right:.35rem !important; padding:.42rem .48rem !important;
  }
}


/* LIGHT THEME — CLEAN SAAS ADD / UPLOAD FORM ACTIONS */
/* Keep this scoped to Create/Edit Card forms; Dark Mode remains unchanged. */
html[data-theme="light"] body .create-card-page .gallery-add-more,
html[data-theme="light"] body .admin-edit-page .gallery-add-more {
  background: #f4bd68 !important;
  background-color: #f4bd68 !important;
  border: 1px solid #e4a747 !important;
  color: #5b370b !important;
  box-shadow: 0 2px 4px rgba(126, 78, 15, .10) !important;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
html[data-theme="light"] body .create-card-page .gallery-add-more i,
html[data-theme="light"] body .create-card-page .gallery-add-more span,
html[data-theme="light"] body .admin-edit-page .gallery-add-more i,
html[data-theme="light"] body .admin-edit-page .gallery-add-more span {
  color: #5b370b !important;
}
html[data-theme="light"] body .create-card-page .gallery-add-more:hover,
html[data-theme="light"] body .admin-edit-page .gallery-add-more:hover {
  background: #e9a946 !important;
  background-color: #e9a946 !important;
  border-color: #d68d27 !important;
  color: #422707 !important;
  box-shadow: 0 4px 9px rgba(126, 78, 15, .16) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="light"] body .create-card-page .gallery-add-more:hover i,
html[data-theme="light"] body .create-card-page .gallery-add-more:hover span,
html[data-theme="light"] body .admin-edit-page .gallery-add-more:hover i,
html[data-theme="light"] body .admin-edit-page .gallery-add-more:hover span {
  color: #422707 !important;
}

/* Review / Company YouTube Links: confident blue action with white readable text. */
html[data-theme="light"] body .create-card-page .add-youtube-link:not(.add-product-button):not(.add-service-button),
html[data-theme="light"] body .admin-edit-page .add-youtube-link:not(.add-product-button):not(.add-service-button) {
  background: #2863d8 !important;
  background-color: #2863d8 !important;
  border: 1px solid #1f54bf !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(31, 84, 191, .14) !important;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
html[data-theme="light"] body .create-card-page .add-youtube-link:not(.add-product-button):not(.add-service-button) i,
html[data-theme="light"] body .create-card-page .add-youtube-link:not(.add-product-button):not(.add-service-button) span,
html[data-theme="light"] body .admin-edit-page .add-youtube-link:not(.add-product-button):not(.add-service-button) i,
html[data-theme="light"] body .admin-edit-page .add-youtube-link:not(.add-product-button):not(.add-service-button) span {
  color: #ffffff !important;
}
html[data-theme="light"] body .create-card-page .add-youtube-link:not(.add-product-button):not(.add-service-button):hover,
html[data-theme="light"] body .admin-edit-page .add-youtube-link:not(.add-product-button):not(.add-service-button):hover {
  background: #1f54bf !important;
  background-color: #1f54bf !important;
  border-color: #1947a3 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 9px rgba(31, 84, 191, .20) !important;
  transform: translateY(-1px) !important;
}

/* Add Product / Add Service: slightly stronger blue for primary form actions. */
html[data-theme="light"] body .create-card-page .add-product-button,
html[data-theme="light"] body .create-card-page .add-service-button,
html[data-theme="light"] body .admin-edit-page .add-product-button,
html[data-theme="light"] body .admin-edit-page .add-service-button {
  background: #2258c7 !important;
  background-color: #2258c7 !important;
  border: 1px solid #1949ad !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(25, 73, 173, .16) !important;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
html[data-theme="light"] body .create-card-page .add-product-button i,
html[data-theme="light"] body .create-card-page .add-product-button span,
html[data-theme="light"] body .create-card-page .add-service-button i,
html[data-theme="light"] body .create-card-page .add-service-button span,
html[data-theme="light"] body .admin-edit-page .add-product-button i,
html[data-theme="light"] body .admin-edit-page .add-product-button span,
html[data-theme="light"] body .admin-edit-page .add-service-button i,
html[data-theme="light"] body .admin-edit-page .add-service-button span {
  color: #ffffff !important;
}
html[data-theme="light"] body .create-card-page .add-product-button:hover,
html[data-theme="light"] body .create-card-page .add-service-button:hover,
html[data-theme="light"] body .admin-edit-page .add-product-button:hover,
html[data-theme="light"] body .admin-edit-page .add-service-button:hover {
  background: #1949ad !important;
  background-color: #1949ad !important;
  border-color: #163d91 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 9px rgba(25, 73, 173, .22) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="light"] body .create-card-page .add-product-button:hover i,
html[data-theme="light"] body .create-card-page .add-product-button:hover span,
html[data-theme="light"] body .create-card-page .add-service-button:hover i,
html[data-theme="light"] body .create-card-page .add-service-button:hover span,
html[data-theme="light"] body .admin-edit-page .add-product-button:hover i,
html[data-theme="light"] body .admin-edit-page .add-product-button:hover span,
html[data-theme="light"] body .admin-edit-page .add-service-button:hover i,
html[data-theme="light"] body .admin-edit-page .add-service-button:hover span {
  color: #ffffff !important;
}

/* CREATE/EDIT CARD SECTION TITLES — FULL-WIDTH, THEME-AWARE SAAS BARS */
/* Full-width section bars create clear form hierarchy without oversized spacing. */
html[data-theme="light"] body .create-card-page .create-card-section-title {
  display: flex !important;
  align-items: center !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  gap: .65rem !important;
  margin: .65rem 0 .15rem !important;
  padding: .42rem .8rem !important;
  border: 1px solid #263852 !important;
  border-top: 1px solid #263852 !important;
  border-radius: 9px !important;
  background: #263852 !important;
  background-color: #263852 !important;
  color: #ffffff !important;
  font-size: .9rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: 0 2px 5px rgba(24, 42, 68, .08) !important;
}
html[data-theme="light"] body .create-card-page .create-card-section-title span {
  color: #ffffff !important;
  min-width: 0 !important;
}
html[data-theme="light"] body .create-card-page .create-card-section-title i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #e5edf8 !important;
}

html[data-theme="dark"] body .create-card-page .create-card-section-title {
  display: flex !important;
  align-items: center !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  gap: .65rem !important;
  margin: .65rem 0 .15rem !important;
  padding: .42rem .8rem !important;
  border: 1px solid #d8e0eb !important;
  border-top: 1px solid #d8e0eb !important;
  border-radius: 9px !important;
  background: #edf2f8 !important;
  background-color: #edf2f8 !important;
  color: #263852 !important;
  font-size: .9rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .08) !important;
}
html[data-theme="dark"] body .create-card-page .create-card-section-title span {
  color: #263852 !important;
  min-width: 0 !important;
}
html[data-theme="dark"] body .create-card-page .create-card-section-title i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 6px !important;
  background: rgba(38, 56, 82, .08) !important;
  color: #435979 !important;
}
@media (max-width: 767px) {
  html body .create-card-page .create-card-section-title {
    min-height: 38px !important;
    padding: .38rem .62rem !important;
    font-size: .84rem !important;
    gap: .52rem !important;
    margin-top: .55rem !important;
  }
  html body .create-card-page .create-card-section-title i {
    flex-basis: 25px !important;
    width: 25px !important;
    height: 25px !important;
  }
}

/* SECTION TITLES: CLEAN EDITORIAL HEADINGS (NOT BUTTONS OR BADGES) */
/* Full-width typography + light divider gives a modern Bootstrap-style hierarchy
   without making section labels look clickable. */
html[data-theme="light"] body .create-card-page .create-card-section-title,
html:not([data-theme="dark"]) body .create-card-page .create-card-section-title {
  display: flex !important;
  align-items: center !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  gap: .6rem !important;
  margin: 1.05rem 0 .35rem !important;
  padding: .55rem 0 .62rem !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e2e7ef !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #263852 !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
}
html[data-theme="light"] body .create-card-page .create-card-section-title span,
html:not([data-theme="dark"]) body .create-card-page .create-card-section-title span {
  min-width: 0 !important;
  color: #263852 !important;
}
html[data-theme="light"] body .create-card-page .create-card-section-title i,
html:not([data-theme="dark"]) body .create-card-page .create-card-section-title i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #c2414b !important;
  font-size: .95rem !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .create-card-page .create-card-section-title {
  display: flex !important;
  align-items: center !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  gap: .6rem !important;
  margin: 1.05rem 0 .35rem !important;
  padding: .55rem 0 .62rem !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #3a414d !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #edf2f8 !important;
  font-size: .96rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body .create-card-page .create-card-section-title span {
  min-width: 0 !important;
  color: #edf2f8 !important;
}
html[data-theme="dark"] body .create-card-page .create-card-section-title i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f08a94 !important;
  font-size: .95rem !important;
  box-shadow: none !important;
}
@media (max-width: 767px) {
  html body .create-card-page .create-card-section-title {
    margin-top: .85rem !important;
    margin-bottom: .3rem !important;
    padding: .48rem 0 .55rem !important;
    gap: .5rem !important;
    font-size: .9rem !important;
  }
}


/* Payment QR upload: match the UPI text input's compact height. */
html body .create-card-page #payment_qr[type="file"],
html body .create-card-outer #payment_qr[type="file"],
html body .form-field #payment_qr[type="file"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 48px !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  line-height: normal !important;
  vertical-align: middle !important;
  overflow: hidden !important;
}
html body #payment_qr[type="file"]::file-selector-button,
html body #payment_qr[type="file"]::-webkit-file-upload-button {
  height: 32px !important;
  max-height: 32px !important;
  box-sizing: border-box !important;
  margin: 0 8px 0 0 !important;
  padding: 5px 10px !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  font-size: .84rem !important;
}


/* Clean SaaS Product & Service editors — consistent in both theme modes. */
html body .create-card-page .product-showcase-field,
html body .create-card-page .service-showcase-field {
  min-width: 0 !important;
  margin-bottom: .35rem !important;
}
html body .create-card-page .product-showcase-field > label:first-child,
html body .create-card-page .service-showcase-field > label:first-child {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  margin: 0 0 .8rem !important;
  padding: .1rem 0 .65rem !important;
  border: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #263852 !important;
  font-size: .94rem !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  letter-spacing: -.01em !important;
}
html body .create-card-page .product-showcase-field > label:first-child::before,
html body .create-card-page .service-showcase-field > label:first-child::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 4px !important;
  width: 4px !important;
  height: 18px !important;
  border-radius: 4px !important;
  background: #d97706 !important;
}
html body .create-card-page .service-showcase-field > label:first-child::before {
  background: #0f766e !important;
}
html body .create-card-page .product-list,
html body .create-card-page .service-list {
  display: flex !important;
  flex-direction: column !important;
  gap: .85rem !important;
  min-width: 0 !important;
}
html body .create-card-page .product-row,
html body .create-card-page .service-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .045) !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}
html body .create-card-page .product-row:hover,
html body .create-card-page .service-row:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .065) !important;
}
html body .create-card-page .product-row-grid,
html body .create-card-page .service-row-grid {
  display: grid !important;
  grid-template-columns: minmax(165px, 215px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 1rem !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html body .create-card-page .product-image-control,
html body .create-card-page .service-image-control {
  display: flex !important;
  flex-direction: column !important;
  gap: .48rem !important;
  min-width: 0 !important;
}
html body .create-card-page .product-image-control > label,
html body .create-card-page .service-image-control > label,
html body .create-card-page .product-details-grid .form-field > label,
html body .create-card-page .service-details-grid .form-field > label {
  margin: 0 0 .05rem !important;
  color: #475569 !important;
  font-size: .79rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
html body .create-card-page .product-image-preview,
html body .create-card-page .service-image-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 140px !important;
  min-height: 140px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #94a3b8 !important;
  font-size: 1.4rem !important;
}
html body .create-card-page .product-image-preview img,
html body .create-card-page .service-image-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
html body .create-card-page .product-image-control input[type="file"],
html body .create-card-page .service-image-control input[type="file"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 5px !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 9px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: .75rem !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
}
html body .create-card-page .product-image-control input[type="file"]::file-selector-button,
html body .create-card-page .service-image-control input[type="file"]::file-selector-button,
html body .create-card-page .product-image-control input[type="file"]::-webkit-file-upload-button,
html body .create-card-page .service-image-control input[type="file"]::-webkit-file-upload-button {
  min-height: 28px !important;
  margin: 0 7px 0 0 !important;
  padding: 4px 9px !important;
  border: 1px solid #d1dbe8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #334155 !important;
  font: inherit !important;
  cursor: pointer !important;
}
html body .create-card-page .product-details-grid,
html body .create-card-page .service-details-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  align-items: start !important;
  gap: .85rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: .1rem 0 0 !important;
}
html body .create-card-page .product-details-grid .form-field,
html body .create-card-page .service-details-grid .form-field {
  min-width: 0 !important;
  margin: 0 !important;
}
html body .create-card-page .product-details-grid input:not([type="checkbox"]),
html body .create-card-page .service-details-grid input:not([type="checkbox"]) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  box-sizing: border-box !important;
  border: 1px solid #dbe3ee !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #1e293b !important;
  padding: .62rem .75rem !important;
  font-size: .86rem !important;
  box-shadow: none !important;
}
html body .create-card-page .product-details-grid input:not([type="checkbox"]):focus,
html body .create-card-page .service-details-grid input:not([type="checkbox"]):focus {
  border-color: #7aa7ee !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12) !important;
  outline: none !important;
}
html body .create-card-page .product-sale-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  align-self: start !important;
  gap: .55rem !important;
  min-height: 40px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: .5rem .7rem !important;
  box-sizing: border-box !important;
  border: 1px solid #cfe8d7 !important;
  border-radius: 9px !important;
  background: #f0faf3 !important;
  color: #24633c !important;
  font-size: .8rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
html body .create-card-page .product-sale-toggle > span {
  color: #24633c !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
html body .create-card-page .product-sale-toggle > input[type="checkbox"] {
  flex: 0 0 17px !important;
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
}
html body .create-card-page .product-row > .product-remove,
html body .create-card-page .service-row > .service-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  align-self: flex-end !important;
  margin: .65rem 0 0 !important;
  padding: 0 !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 9px !important;
  background: #fff1f2 !important;
  color: #be123c !important;
  box-shadow: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
}
html body .create-card-page .product-row > .product-remove:hover,
html body .create-card-page .service-row > .service-remove:hover {
  border-color: #fda4af !important;
  background: #ffe4e6 !important;
  color: #9f1239 !important;
}
html body .create-card-page .add-product-button,
html body .create-card-page .add-service-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 42px !important;
  margin: .8rem 0 0 !important;
  padding: .6rem .9rem !important;
  border-radius: 9px !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
}
html body .create-card-page .product-showcase-field > .field-help,
html body .create-card-page .service-showcase-field > .field-help {
  display: block !important;
  margin-top: .55rem !important;
  font-size: .74rem !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}

/* Dark theme keeps the same layout, with neutral charcoal surfaces and soft borders. */
html[data-theme="dark"] body .create-card-page .product-showcase-field > label:first-child,
html[data-theme="dark"] body .create-card-page .service-showcase-field > label:first-child {
  color: #e8edf5 !important;
  border-bottom-color: #394150 !important;
}
html[data-theme="dark"] body .create-card-page .product-row,
html[data-theme="dark"] body .create-card-page .service-row {
  border-color: #394150 !important;
  background: #222733 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .12) !important;
}
html[data-theme="dark"] body .create-card-page .product-row:hover,
html[data-theme="dark"] body .create-card-page .service-row:hover {
  border-color: #4b5668 !important;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .17) !important;
}
html[data-theme="dark"] body .create-card-page .product-image-control > label,
html[data-theme="dark"] body .create-card-page .service-image-control > label,
html[data-theme="dark"] body .create-card-page .product-details-grid .form-field > label,
html[data-theme="dark"] body .create-card-page .service-details-grid .form-field > label {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body .create-card-page .product-image-preview,
html[data-theme="dark"] body .create-card-page .service-image-preview {
  border-color: #485365 !important;
  background: #1b202b !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] body .create-card-page .product-image-control input[type="file"],
html[data-theme="dark"] body .create-card-page .service-image-control input[type="file"] {
  border-color: #414b5b !important;
  background: #1c222d !important;
  color: #cbd5e1 !important;
}
html[data-theme="dark"] body .create-card-page .product-image-control input[type="file"]::file-selector-button,
html[data-theme="dark"] body .create-card-page .service-image-control input[type="file"]::file-selector-button,
html[data-theme="dark"] body .create-card-page .product-image-control input[type="file"]::-webkit-file-upload-button,
html[data-theme="dark"] body .create-card-page .service-image-control input[type="file"]::-webkit-file-upload-button {
  border-color: #485365 !important;
  background: #303847 !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] body .create-card-page .product-details-grid input:not([type="checkbox"]),
html[data-theme="dark"] body .create-card-page .service-details-grid input:not([type="checkbox"]) {
  border-color: #414b5b !important;
  background: #1c222d !important;
  color: #eef2f7 !important;
}
html[data-theme="dark"] body .create-card-page .product-details-grid input:not([type="checkbox"]):focus,
html[data-theme="dark"] body .create-card-page .service-details-grid input:not([type="checkbox"]):focus {
  border-color: #638fd5 !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .14) !important;
}
html[data-theme="dark"] body .create-card-page .product-sale-toggle {
  border-color: #315640 !important;
  background: rgba(34, 197, 94, .09) !important;
  color: #9be6b2 !important;
}
html[data-theme="dark"] body .create-card-page .product-sale-toggle > span { color: #9be6b2 !important; }
html[data-theme="dark"] body .create-card-page .product-row > .product-remove,
html[data-theme="dark"] body .create-card-page .service-row > .service-remove {
  border-color: #653640 !important;
  background: rgba(244, 63, 94, .11) !important;
  color: #fda4af !important;
}
html[data-theme="dark"] body .create-card-page .product-row > .product-remove:hover,
html[data-theme="dark"] body .create-card-page .service-row > .service-remove:hover {
  border-color: #8a4350 !important;
  background: rgba(244, 63, 94, .19) !important;
  color: #fecdd3 !important;
}
html[data-theme="dark"] body .create-card-page .product-showcase-field > .field-help,
html[data-theme="dark"] body .create-card-page .service-showcase-field > .field-help {
  color: #9aa6b8 !important;
}
@media (max-width: 767px) {
  html body .create-card-page .product-row,
  html body .create-card-page .service-row { padding: 11px !important; }
  html body .create-card-page .product-row-grid,
  html body .create-card-page .service-row-grid { grid-template-columns: minmax(0, 1fr) !important; gap: .85rem !important; }
  html body .create-card-page .product-details-grid,
  html body .create-card-page .service-details-grid { grid-template-columns: minmax(0, 1fr) !important; gap: .7rem !important; padding: 0 !important; }
  html body .create-card-page .product-image-preview,
  html body .create-card-page .service-image-preview { height: 150px !important; min-height: 150px !important; }
  html body .create-card-page .add-product-button,
  html body .create-card-page .add-service-button { width: 100% !important; }
}


/* v20261015-41 — Product name first, prices underneath; plain accessible checkbox */
html body .create-card-page .product-details-grid > .form-field:first-child {
  grid-column: 1 / -1 !important;
}
html body .create-card-page .product-details-grid > .product-sale-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  align-self: center !important;
  gap: .5rem !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: .1rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: .86rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  cursor: pointer !important;
}
html body .create-card-page .product-details-grid > .product-sale-toggle > span {
  margin: 0 !important;
  padding: 0 !important;
  color: #334155 !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
html body .create-card-page .product-details-grid > .product-sale-toggle > input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  accent-color: #16a34a !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: initial !important;
  border-radius: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html[data-theme="dark"] body .create-card-page .product-details-grid > .product-sale-toggle,
html[data-theme="dark"] body .create-card-page .product-details-grid > .product-sale-toggle > span {
  color: #d5dce7 !important;
}
html[data-theme="dark"] body .create-card-page .product-details-grid > .product-sale-toggle > input[type="checkbox"] {
  accent-color: #22c55e !important;
}
@media (max-width: 767px) {
  html body .create-card-page .product-details-grid > .form-field:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* v309: Never show submenu expand/collapse chevrons in the compact sidebar.
   The menu items remain clickable; only the decorative up/down arrows are hidden. */
html body #sidebar.collapsed .sidebar-nav .nav-menu-toggle > .chevron,
html body #sidebar.collapsed .sidebar-nav .nav-item.nav-menu-toggle > .chevron {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}


/* v310: Child menus open as a clean flyout while desktop sidebar stays collapsed. */
.collapsed-sidebar-submenu-flyout {
  position: fixed !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: 224px !important;
  max-width: calc(100vw - 88px) !important;
  max-height: calc(100vh - 16px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  border: 1px solid #dfe5ee !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: #263852 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16) !important;
  overscroll-behavior: contain !important;
}
.collapsed-sidebar-flyout-title {
  padding: 7px 10px 9px !important;
  margin: 0 0 3px !important;
  border-bottom: 1px solid #e7ebf2 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}
.collapsed-sidebar-flyout-link {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #263852 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition: background-color .12s ease, color .12s ease !important;
}
.collapsed-sidebar-flyout-link > i {
  flex: 0 0 16px !important;
  width: 16px !important;
  text-align: center !important;
  color: #64748b !important;
}
.collapsed-sidebar-flyout-link:hover,
.collapsed-sidebar-flyout-link:focus-visible {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  outline: none !important;
}
.collapsed-sidebar-flyout-link.is-active {
  background: var(--primary, #d7267d) !important;
  color: #ffffff !important;
}
.collapsed-sidebar-flyout-link.is-active > i { color: #ffffff !important; }
#sidebar.collapsed .sidebar-nav > .nav-menu-toggle.is-flyout-open {
  background: var(--primary, #d7267d) !important;
  color: #ffffff !important;
}
#sidebar.collapsed .sidebar-nav > .nav-menu-toggle.is-flyout-open > span > i { color: #ffffff !important; }
html[data-theme="dark"] body .collapsed-sidebar-submenu-flyout {
  border-color: #424958 !important;
  background: #252a35 !important;
  color: #e7edf6 !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .38) !important;
}
html[data-theme="dark"] body .collapsed-sidebar-flyout-title {
  border-bottom-color: #3b4351 !important;
  color: #aab5c6 !important;
}
html[data-theme="dark"] body .collapsed-sidebar-flyout-link { color: #e7edf6 !important; }
html[data-theme="dark"] body .collapsed-sidebar-flyout-link > i { color: #aab5c6 !important; }
html[data-theme="dark"] body .collapsed-sidebar-flyout-link:hover,
html[data-theme="dark"] body .collapsed-sidebar-flyout-link:focus-visible {
  background: #353d4b !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body .collapsed-sidebar-flyout-link.is-active {
  background: var(--primary, #d7267d) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body .collapsed-sidebar-flyout-link.is-active > i { color: #ffffff !important; }
@media (max-width: 767px) { .collapsed-sidebar-submenu-flyout { display: none !important; } }


/* v311: Compact sidebar arrows must stay hidden regardless of submenu/flyout state.
   Runtime styles reinforce this after clicks; this rule is the first-paint fallback. */
@media (min-width: 768px) {
  html body #sidebar.collapsed .sidebar-nav button.nav-menu-toggle > .chevron,
  html body #sidebar.collapsed .sidebar-nav .nav-menu-toggle .chevron,
  html body #sidebar.collapsed .sidebar-nav .nav-item.nav-menu-toggle > .chevron {
    display: none !important;
    visibility: hidden !important;
    inline-size: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* FIX: enforce one consistent logo thumbnail box across all Cards tables.
   Use contain instead of cover so wide/tall logos scale inside the same frame. */
html body .cards-list-page .card-table-logo-button {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 56px !important;
  padding: 4px !important;
  overflow: hidden !important;
}
html body .cards-list-page .card-table-logo-button > img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}
html body .cards-list-page .card-table-logo-button > .image-fallback-placeholder {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: grid !important;
  place-items: center !important;
}
@media (max-width: 640px) {
  html body .cards-list-page .card-table-logo-button {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
  }
}