/****************************************************\
* Modals
*****************************************************/
.saltech-page {
    display: flex !important;
}

.saltech-page-inner {
    max-width: var(--content-width);
}

.saltech-hidden {
    display: none;
}
.noscroll {
    overflow: hidden;
    padding-right: var(--scrollbar-width);
}
.modal-backdrop {
    /* Bootstrap modal backdrop: visible when Bootstrap adds .show */
    position: fixed;
    inset: 0;
    background-color: #000;
    z-index: 1040;
}

.modal-backdrop.show {
    opacity: 0.45;
}
.modal-close {
    position: relative;
    padding: 15px 20px;
}
.modal-close::after {
    content: '\2716';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: medium;
    color: white;
    font-family: Outfit, sans-serif;
}
.modal-close:hover::after {
    color: var(--e-global-color-primary);
}
.modal-header-row {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
}
.modal-close {
    width: auto;
}
.saltech-button {
    font-size: medium !important;
    background-color: var(--e-global-color-text) !important;
    border: 1px solid rgba(128, 128, 128, 0.5) !important;
    color: white !important;
    border-radius: 5px;
}
.saltech-button:hover {
    color: var(--e-global-color-primary) !important;
    border-color: var(--e-global-color-primary) !important;
}
/****************************************************
* AAMP Admin UI (global)
*****************************************************/
:root {
  /* sensible fallbacks if theme variables are missing */
  --aamp-content-width: var(--content-width, 1200px);
  --aamp-scrollbar-width: var(--scrollbar-width, 0px);

  --aamp-border: rgba(128, 128, 128, 0.25);
  --aamp-border-strong: rgba(128, 128, 128, 0.45);
  --aamp-bg: #ffffff;
  --aamp-bg-soft: #f7f7f9;
  --aamp-text: #1f2937;
  --aamp-muted: #6b7280;

  /* Elementor globals if present; otherwise fallbacks */
  --aamp-primary: var(--e-global-color-primary, #2563eb);
  --aamp-primary-contrast: #ffffff;
  --aamp-surface: var(--e-global-color-text, #111827);
}

/****************************************************
* AAMP Admin UI (standard screen wrapper)
* Use `.aamp-admin-screen` on each AAMP admin view root.
*****************************************************/
.aamp-admin-screen {
  width: 100%;
  max-width: unset;
}

/* If a view is wrapped by `.saltech-page-inner`, allow full width for AAMP screens */
.saltech-page-inner .aamp-admin-screen {
  width: 100%;
}

/* Cards: force full width to prevent action columns from being clipped */
.aamp-admin-screen .card,
.aamp-admin-screen .saltech-card {
  max-width: unset !important;
  width: 100% !important;
}

/* Common inner padding convention */
.aamp-admin-screen .card .card-body {
  padding: 16px;
}

/* Tables: provide a safe horizontal scroll container when needed */
.aamp-admin-screen .aamp-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.aamp-admin-screen .aamp-table-wrap > table {
  min-width: 100%;
}

/* Prevent Actions/buttons from wrapping or being pushed off-screen */
.aamp-admin-screen table.widefat th.actions,
.aamp-admin-screen table.widefat td.actions {
  white-space: nowrap;
}

/* If a table uses fixed layout, allow auto sizing inside AAMP screens */
.aamp-admin-screen table.widefat.fixed {
  table-layout: auto;
}

/* Utility */
.saltech-hidden { display: none; }
.noscroll {
  overflow: hidden;
  padding-right: var(--aamp-scrollbar-width);
}

/****************************************************
* Page layout
*****************************************************/
.saltech-page {
  display: flex !important;
  justify-content: center;
  width: 100%;
}

.saltech-page-inner {
  width: 100%;
  max-width: var(--aamp-content-width);
  padding: 16px;
  box-sizing: border-box;
}

/* Headings */
.saltech-page-inner h1,
.saltech-page-inner h2,
.saltech-page-inner h3 {
  color: var(--aamp-text);
}

.saltech-page-inner .description,
.saltech-page-inner p.description {
  color: var(--aamp-muted);
}

/****************************************************
* Cards (Bootstrap-like, but safe if Bootstrap changes)
*****************************************************/
.saltech-card,
.wrap .card {
  background: var(--aamp-bg);
  border: 1px solid var(--aamp-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.wrap .card .card-header {
  border-bottom: 1px solid var(--aamp-border);
  background: var(--aamp-bg-soft);
}

.wrap .card .card-body {
  padding: 16px;
}

/****************************************************
* Tables (WordPress widefat)
*****************************************************/
.wrap table.widefat {
  border: 1px solid var(--aamp-border);
  border-radius: 10px;
  overflow: hidden;
}

.wrap table.widefat thead th {
  background: var(--aamp-bg-soft);
  color: var(--aamp-text);
  border-bottom: 1px solid var(--aamp-border);
}

.wrap table.widefat tbody td {
  color: var(--aamp-text);
}

.wrap table.widefat tbody tr:nth-child(even) td {
  background: #fafafb;
}

.wrap table.widefat tbody tr:hover td {
  background: #f1f5f9;
}

/* prevent long content from blowing up layout */
.wrap table.widefat td,
.wrap table.widefat th {
  vertical-align: top;
}

/****************************************************
* Form controls (inputs/selects)
*****************************************************/
.wrap input[type="text"],
.wrap input[type="email"],
.wrap input[type="number"],
.wrap select,
.wrap textarea {
  border: 1px solid var(--aamp-border-strong);
  border-radius: 3px;
  padding: 6px 10px;
  background: var(--aamp-bg);
  color: var(--aamp-text);
}

.wrap input[type="text"]:focus,
.wrap input[type="email"]:focus,
.wrap input[type="number"]:focus,
.wrap select:focus,
.wrap textarea:focus {
  outline: none;
  border-color: var(--aamp-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/****************************************************
* Buttons
*****************************************************/
.saltech-button {
  font-size: 14px !important;
  background-color: var(--aamp-surface) !important;
  border: 1px solid var(--aamp-border-strong) !important;
  color: #ffffff !important;
  border-radius: 8px;
  padding: 6px 12px;
}

.saltech-button:hover {
  color: var(--aamp-primary) !important;
  border-color: var(--aamp-primary) !important;
}

/* Make WP buttons feel consistent too */
.wrap .button.button-primary {
  border-radius: 3px;
}

.wrap .button.button-secondary {
  border-radius: 3px;
}

 /****************************************************
 * Modals
 * - Bootstrap uses .modal-backdrop.show
 * - Saltech custom modals use .saltech-modal-backdrop.is-active
 ****************************************************/
 
 /* Saltech custom modal backdrop (does not interfere with Bootstrap) */
 .saltech-modal-backdrop {
   display: none;
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 1040;
 }
 
 .saltech-modal-backdrop.is-active {
   display: block;
 }

/* Generic modal panel styles (use with your existing markup) */
.saltech-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 24px;
  box-sizing: border-box;
}

.saltech-modal.is-active {
  display: flex;
}

.saltech-modal .saltech-modal-panel {
  width: 100%;
  max-width: 860px;
  background: var(--aamp-bg);
  border: 1px solid var(--aamp-border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
  overflow: hidden;
}

.saltech-modal .saltech-modal-body {
  padding: 16px;
}

.modal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--aamp-border);
  background: var(--aamp-bg-soft);
}

.modal-close {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.modal-close::after {
  content: '\2716';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: var(--aamp-text);
  font-family: Outfit, sans-serif;
}

.modal-close:hover::after {
  color: var(--aamp-primary);
}

/****************************************************
* Small helpers for scrollable lists (like product classes)
*****************************************************/
.aamp-scrollbox {
  padding: 10px;
  border: 1px solid var(--aamp-border);
  background: var(--aamp-bg-soft);
  border-radius: 10px;
  max-height: 280px;
  overflow-y: auto;
}

.aamp-scrollbox .aamp-pc-item {
  padding: 6px 8px;
  border-radius: 8px;
}

.aamp-scrollbox .aamp-pc-item:hover {
  background: rgba(0,0,0,0.04);
}