/* ===== Actions UI (theme-agnostic) ===== */

/* контейнер у клітинці таблиці */
td .action-buttons{
  display: grid !important;
  grid-template-columns: repeat(4, 44px) !important;
  gap: 10px !important;
  justify-content: end !important;
  align-items: center !important;
}

/* форма не ламає grid */
td .action-buttons form{
  margin: 0 !important;
  padding: 0 !important;
  display: contents !important; /* ключ: форма не займає “клітинку” */
}

/* кнопки однакового розміру */
td .action-buttons .action-btn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, #2f66ff, #1f4fd8) !important;

  box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
  text-decoration: none !important;

  cursor: pointer !important;
  position: relative !important;

  line-height: 1 !important;
  font-size: 0 !important; /* прибирає “вплив” текстових стилів теми */
}

/* FIX: теми часто роблять a/button outline/appearance */
td .action-buttons a.action-btn,
td .action-buttons button.action-btn{
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
}

/* SVG: примусово білий stroke у всіх темах */
td .action-buttons .action-btn svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;

  stroke: #fff !important;
  fill: none !important;

  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Якщо десь буде svg з заливкою: додай клас fill */
td .action-buttons .action-btn svg .fill{
  fill: #fff !important;
  stroke: none !important;
}

/* Tooltip */
td .action-buttons .action-btn[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.95);
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: .15s ease;
  border: 1px solid rgba(255,255,255,.15);
  z-index: 9999;
}
td .action-buttons .action-btn[data-tip]::before{
  content:"";
  position:absolute;
  bottom:105%;
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color: rgba(15,23,42,.95);
  opacity:0;
  transition:.15s ease;
  z-index: 9999;
}
td .action-buttons .action-btn:hover::after,
td .action-buttons .action-btn:hover::before{ opacity:1; }
/* ================ Зробити шапку такою ж як інпут "Товар" ================ */

/* Загальний клас, який повторює стиль інпутів у колонці "Товар" */
.header-like-input,
input[name="title"],
input[name="client_name"],
input[name="client_phone"],
input[name="client_address"] {
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* Стилі як у товарних інпутів */
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,248,0.98));
  color: #0b1a2a;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 3px 8px rgba(2,6,14,0.25);
  outline: none;
  transition: box-shadow .15s ease, transform .05s;
}

/* Фокус — підсвітка та невеликий підйом */
.header-like-input:focus,
input[name="title"]:focus,
input[name="client_name"]:focus,
input[name="client_phone"]:focus,
input[name="client_address"]:focus {
  box-shadow: inset 0 3px 8px rgba(2,6,14,0.25), 0 0 0 3px rgba(100,150,255,0.06);
  transform: translateY(-1px);
}

/* Якщо у шапці є textarea для коментаря — теж підхопити */
textarea[name="comment"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,248,0.98));
  color: #0b1a2a;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 3px 8px rgba(2,6,14,0.25);
  outline: none;
  transition: box-shadow .15s ease, transform .05s;
}

/* Можна підправити ширини колонок у шапці, щоб інпути не були занадто широкі */
.header-row .col {
  padding: 6px;
}

/* Закруглені «плитки» для правої колонки підсумків */
.summary-value {
  display: inline-block;
  min-width: 140px;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: 12px;                 /* Ось тут закруглення */
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,248,0.98));
  color: #0b1a2a;
  font-weight:700;
  text-align: right;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 3px 8px rgba(2,6,14,0.18);
}

/* Якщо всередині summary-value є <input>, робимо його без видимих бордерів і з тим же закругленням */
.summary-value input.form-input,
.summary-value input.compact {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-align: right;
  font-weight:700;
  color: inherit;
  outline: none;
  -webkit-appearance: none;
}

/* Трохи більший акцент для великого total */
.summary-card .summary-card-value,
#total_amount_text {
  border-radius: 14px;
  padding: 8px 16px;
}

/* Мобільні корекції — плитки займають всю ширину */
@media (max-width:900px){
  .summary-value { display:block; width:100%; text-align:left; }
  .summary-card .summary-card-value { width:100%; text-align:right; }
}