/* aml.ui.css — AML UI System (mobile-first)
   Uses tokens from aml.tokens.css
*/

/* =========================================
   APP WRAPPER
   ========================================= */

.aml-app,
.aml-page {
  /* Avoid content hidden behind sticky footer */
  padding-bottom: calc(
    var(--aml-footer-h) +
    var(--aml-page-pad-y) +
    env(safe-area-inset-bottom, 0px)
  );

  max-width: var(--aml-page-max);
  margin: 0 auto;
  padding-left: var(--aml-page-pad-x);
  padding-right: var(--aml-page-pad-x);
}

/* Optional utility */
.aml-app--padded {
  padding-top: var(--aml-page-pad-y);
}

/* =========================================
   PAGE HEADER
   ========================================= */

.aml-page-header,
.aml-page__header {
  padding-top: var(--aml-page-pad-y);
  padding-bottom: 14px;
}

.aml-page-title,
.aml-page__title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.aml-page-subtitle,
.aml-page__subtitle {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--aml-text-muted);
}

.aml-page-actions {
  margin-top: 14px;
  display: flex;
  gap: var(--aml-gap-2);
  flex-wrap: wrap;
}

.aml-page__badges {
  display: flex;
  gap: var(--aml-gap-1);
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Spacing between content blocks */
.aml-page-content > * + * {
  margin-top: var(--aml-gap-3);
}

/* =========================================
   CARDS / SECTIONS
   ========================================= */

.aml-card {
  background: var(--aml-card-bg);
  border: 1px solid var(--aml-border);
  border-radius: var(--aml-card-radius);
  padding: 14px;
  box-shadow: var(--aml-shadow);
  margin: 12px 0;
}

.aml-card__title {
  font-weight: 600;
  margin: 0 0 8px;
}

.aml-section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.aml-help {
  font-size: 13px;
  color: var(--aml-help);
  margin-top: 6px;
}

/* =========================================
   FORM POLISH
   ========================================= */

.aml-form .form-item {
  margin-bottom: 12px;
}

.aml-form .description {
  margin-top: 6px;
  opacity: 0.85;
}

.aml-form .form-actions {
  display: flex;
  gap: var(--aml-gap-2);
  flex-wrap: wrap;
  align-items: center;
}

/* =========================================
   CHIPS / BADGES
   ========================================= */

.aml-chip,
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 12px;
  line-height: 1.2;
}

.status-draft { background: #eee; color: #333; border-color: rgba(0,0,0,0.12); }
.status-open { background: #fff3cd; color: #856404; border-color: #ffe69c; }
.status-ready { background: #cce5ff; color: #004085; border-color: #b8daff; }
.status-verified { background: #d4edda; color: #155724; border-color: #c3e6cb; }

/* =========================================
   STICKY CTA BAR (above footer)
   ========================================= */

.aml-cta-bar {
  position: sticky;
  bottom: calc(var(--aml-footer-h) + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--aml-footer-z) - 1);
  margin-top: 14px;

  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);

  border: 1px solid var(--aml-border);
  border-radius: var(--aml-card-radius);
}

.aml-cta-bar .form-actions,
.aml-cta-bar .aml-actions {
  margin: 0;
  display: flex;
  gap: var(--aml-gap-2);
  flex-wrap: wrap;
}

.aml-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.aml-meta__pill {
  font-size: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.8);
}

/* aml.ui.css */
.aml-actions {
  display: flex;
  gap: var(--aml-gap-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Layout grid */
.aml-page-content .aml-sa-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 960px){
  .aml-page-content .aml-sa-grid{
    grid-template-columns: 1fr 1fr;
    align-items:start;
  }
}

/* Details as cards (any <details>, not just the .aml-sa-section variant) */
.aml-page-content details.aml-sa-section,
.aml-page-content details{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  margin: 10px 0;
}
.aml-page-content details.aml-sa-section > summary,
.aml-page-content details > summary{
  cursor:pointer;
  font-weight: 650;
  padding: 6px 2px;
  list-style:none;
}
.aml-page-content details.aml-sa-section > summary::-webkit-details-marker,
.aml-page-content details > summary::-webkit-details-marker{ display:none; }

/* Standalone forms not already sectioned into .aml-card blocks (e.g. the
   core user account form) get the card treatment directly on <form> */
.aml-page-content form.aml-form{
  background: var(--aml-card-bg);
  border: 1px solid var(--aml-border);
  border-radius: var(--aml-card-radius);
  padding: 14px;
  box-shadow: var(--aml-shadow);
}

/* Form spacing */
.aml-page-content .form-item{ margin: 10px 0; }
.aml-page-content input[type="text"],
.aml-page-content input[type="email"],
.aml-page-content input[type="tel"],
.aml-page-content input[type="password"],
.aml-page-content input[type="url"],
.aml-page-content input[type="number"],
.aml-page-content select,
.aml-page-content textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 10px 12px;
}
.aml-page-content textarea{ min-height: 120px; }

/* Chips */
#edit-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: 8px 0 2px;
}

/* Sticky actions (sopra footer 70px) */
#edit-actions.aml-sa-actions{
  position: sticky;
  bottom: 82px;
  display:flex;
  gap: 10px;
  padding: 12px;
  margin-top: 16px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  z-index: 90;
}

@media (min-width: 960px){
  .aml-form #edit-aml-grid-aml-sa-service{ grid-column: 1; }
  .aml-form #edit-aml-grid-aml-sa-pricing{ grid-column: 1; }
  .aml-form #edit-aml-grid-aml-sa-coverage{ grid-column: 2; }
  .aml-form #edit-aml-grid-aml-sa-properties{ grid-column: 2; }
}

#edit-field-languages{
  min-height: 140px;
}

#edit-aml-actions-top{
  display:flex;
  justify-content:flex-start;
  margin-bottom: 10px;
}

/* Più aria dentro i fieldset (details) */
.aml-page-content .aml-sa-grid{ gap: 18px; }

.aml-page-content details.aml-sa-section{
  padding: 14px 16px;
}

.aml-page-content details.aml-sa-section > summary{
  padding: 8px 2px;
}

/* Spazio tra un campo e l’altro */
.aml-page-content details.aml-sa-section .form-item{
  margin: 14px 0;
}

/* Spaziatura verticale uniforme tra i blocchi dentro ogni details */
.aml-page-content details.aml-sa-section > * + *{
  margin-top: 14px;
}

/* E dentro il contenuto (escludi il summary) */
.aml-page-content details.aml-sa-section > summary + *{
  margin-top: 12px;
}

/* Un filo di aria sotto label e sopra widget */
.aml-page-content details.aml-sa-section .form-item > label{
  margin-bottom: 6px;
  display: inline-block;
}


/* Tabelle dei field multi-value: respiro sopra/sotto */
.aml-page-content details.aml-sa-section table{
  margin: 10px 0;
}

/* Add-more button wrapper */
.aml-page-content details.aml-sa-section .clearfix{
  margin-top: 10px;
}

/* =========================================
   BUTTONS / LINKS AS BUTTONS
   ========================================= */

.button {
  -webkit-tap-highlight-color: transparent;
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: calc(var(--aml-card-radius) - 6px);

  border: 1px solid var(--aml-border);
  background: #fff;
  color: #0b4873;

  font: inherit;
  font-weight: 650;
  line-height: 1.1;
  text-decoration: none;

  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .02s ease;
}

.button:hover { background: rgba(11, 72, 115, 0.06); }
.button:active { transform: translateY(1px); }

.button:focus-visible {
  outline: 0;
  border-color: rgba(11, 72, 115, 0.45);
  box-shadow: 0 0 0 3px rgba(11, 72, 115, 0.18);
}

.button--primary {
  background: #0b4873;
  border-color: #0b4873;
  color: #fff;
}

.button--primary:hover {
  background: #083a5d;
  border-color: #083a5d;
}

.button--secondary {
  background: #f5f7fa;
  border-color: #d0d7e2;
  color: #0b4873;
}

.button--secondary:hover { background: #eef2f7; }

.button[aria-disabled="true"],
.button.is-disabled,
.button:disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none; /* utile per <a class="button"> */
}

/* Used in controllers/templates but currently missing */
.aml-actionbar {
  display: flex;
  gap: var(--aml-gap-2);
  flex-wrap: wrap;
  align-items: center;
}

.aml-actionbar--spaced {
  justify-content: space-between;
}

.aml-card--price-item {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  margin-bottom: 12px;
}

.aml-price-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.aml-price-item__money {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
}

/* =========================================
   MODAL (native <dialog>)
   ========================================= */

/* Hide dialog when not open — overrides Tailwind preflight display: block. */
dialog.aml-modal:not([open]) { display: none; }

.aml-modal {
  border: none;
  border-radius: var(--aml-card-radius);
  padding: 0;
  max-width: 640px;
  width: 90%;
  max-height: 82vh;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

.aml-modal::backdrop {
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}

.aml-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: 82vh;
}

.aml-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--aml-border);
  flex-shrink: 0;
  background: var(--aml-card-bg);
}

.aml-modal__title {
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--aml-text);
  margin: 0;
}

.aml-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px 9px;
  color: var(--aml-text-muted, #64748b);
  border-radius: 8px;
}

.aml-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.aml-modal__body {
  overflow-y: auto;
  padding: 16px 18px 20px;
  flex: 1;
}

/* Trigger row above main content */
.aml-modal-trigger-bar {
  margin-bottom: 20px;
}