/* ==========================================================================
   Components — Grou B2B Design System
   Buttons, inputs, badges, cards, tables, filter bar.
   Scoped under .app-layout to avoid affecting existing pages.
   ========================================================================== */


/* ==========================================================================
   Buttons
   ========================================================================== */

/* Primary button (navy) */
.app-layout .botao-azul {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: var(--space-2) var(--space-6);
  background: var(--grou-navy);
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}

.app-layout .botao-azul:hover {
  background: var(--grou-navy-dark);
}

.app-layout .botao-azul:active {
  background: var(--grou-navy-dark);
  transform: scale(0.98);
}

.app-layout .botao-azul:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-layout .botao-azul:focus-visible {
  outline: 2px solid var(--grou-amber);
  outline-offset: 2px;
}

/* Success button (green) */
.app-layout .botao-verde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: var(--space-2) var(--space-6);
  background: var(--color-success);
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}

.app-layout .botao-verde:hover {
  background: #1b5e20;
}

.app-layout .botao-verde:active {
  background: #1b5e20;
  transform: scale(0.98);
}

.app-layout .botao-verde:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-layout .botao-verde:focus-visible {
  outline: 2px solid var(--grou-amber);
  outline-offset: 2px;
}

/* Destructive button (outline red) */
.app-layout .botao-vermelho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: var(--space-2) var(--space-6);
  background: transparent;
  color: var(--color-error);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}

.app-layout .botao-vermelho:hover {
  background: var(--color-error-light);
}

.app-layout .botao-vermelho:active {
  background: var(--color-error-light);
  transform: scale(0.98);
}

.app-layout .botao-vermelho:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-layout .botao-vermelho:focus-visible {
  outline: 2px solid var(--grou-amber);
  outline-offset: 2px;
}

/* Secondary button (amber) */
.app-layout .botao-laranja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: var(--space-2) var(--space-6);
  background: var(--grou-amber);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}

.app-layout .botao-laranja:hover {
  background: var(--grou-amber-dark);
}

.app-layout .botao-laranja:active {
  background: var(--grou-amber-dark);
  transform: scale(0.98);
}

.app-layout .botao-laranja:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-layout .botao-laranja:focus-visible {
  outline: 2px solid var(--grou-amber);
  outline-offset: 2px;
}

/* PIX button */
.app-layout .botao-pix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: var(--space-2) var(--space-6);
  background: #00b4d8;
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
  white-space: nowrap;
}

.app-layout .botao-pix:hover {
  background: #0096b4;
}

.app-layout .botao-pix:active {
  background: #0096b4;
  transform: scale(0.98);
}

.app-layout .botao-pix:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-layout .botao-pix:focus-visible {
  outline: 2px solid var(--grou-amber);
  outline-offset: 2px;
}

/* Icon button */
.app-layout .botao-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.app-layout .botao-icone:hover {
  background: var(--color-bg-sunken);
  color: var(--grou-navy);
}

.app-layout .botao-icone:focus-visible {
  outline: 2px solid var(--grou-amber);
  outline-offset: 2px;
}

/* Cart toggle button */
.app-layout .botao-carrinho {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: var(--space-2) var(--space-5);
  background: var(--grou-amber);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.app-layout .botao-carrinho:hover {
  background: var(--grou-amber-dark);
  box-shadow: var(--shadow-lg);
}


/* ==========================================================================
   V2 Buttons
   All buttons: font-display, text-sm, weight-semibold, tracking-wide,
   200ms transitions. Scoped under .app-layout.
   ========================================================================== */

/* --- Primary Button (navy gradient) --- */
.app-layout .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--grou-navy-500), var(--grou-navy-600));
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border: none;
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out-cubic);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.app-layout .btn-primary:hover {
  background: linear-gradient(135deg, var(--grou-navy-400), var(--grou-navy-500));
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.app-layout .btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

.app-layout .btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.app-layout .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Amber CTA Button (key conversion actions) --- */
.app-layout .btn-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--grou-amber-400), var(--grou-amber-500));
  color: var(--grou-navy-900);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
              0 1px 3px rgba(250, 164, 26, 0.2);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out-cubic);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.app-layout .btn-amber:hover {
  background: linear-gradient(135deg, var(--grou-amber-500), var(--grou-amber-600));
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 12px rgba(250, 164, 26, 0.25);
}

.app-layout .btn-amber:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.app-layout .btn-amber:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-amber);
}

.app-layout .btn-amber:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Secondary Button (glass bg, navy border) --- */
.app-layout .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--grou-navy);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out-cubic);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.app-layout .btn-secondary:hover {
  background: var(--grou-navy-50);
  border-color: var(--grou-navy-200);
  transform: translateY(-1px);
}

.app-layout .btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

.app-layout .btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.app-layout .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --- Ghost Button (transparent, navy text) --- */
.app-layout .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--grou-navy);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.app-layout .btn-ghost:hover {
  background: var(--grou-navy-50);
}

.app-layout .btn-ghost:active {
  transform: scale(0.98);
}

.app-layout .btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.app-layout .btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --- Destructive Button (red fill, white text) --- */
.app-layout .btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border: none;
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out-cubic);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}

.app-layout .btn-destructive:hover {
  background: var(--color-danger-dark);
  transform: translateY(-1px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.app-layout .btn-destructive:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}

.app-layout .btn-destructive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-danger);
}

.app-layout .btn-destructive:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Icon Button (square, transparent) --- */
.app-layout .btn-icon {
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  line-height: 1;
}

.app-layout .btn-icon:hover {
  background: var(--grou-navy-50);
  color: var(--grou-navy);
}

.app-layout .btn-icon:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.app-layout .btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Button Sizes --- */
.app-layout .btn-sm {
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.app-layout .btn-sm.btn-icon {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
}

.app-layout .btn-lg {
  height: var(--control-height-lg);
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}

.app-layout .btn-lg.btn-icon {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
}

/* --- Button full width --- */
.app-layout .btn-full {
  width: 100%;
}

/* --- Button loading state --- */
.app-layout .btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.app-layout .btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin var(--duration-slow) linear infinite;
  color: inherit;
}

.app-layout .btn-primary.btn-loading::after {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: transparent;
}

.app-layout .btn-secondary.btn-loading::after,
.app-layout .btn-ghost.btn-loading::after {
  border-color: var(--grou-navy-300);
  border-top-color: transparent;
}


/* ==========================================================================
   Inputs — V2
   42px height, control-bg/border tokens, navy focus ring,
   DM Sans labels, smooth transitions.
   ========================================================================== */

.app-layout input[type="text"],
.app-layout input[type="email"],
.app-layout input[type="password"],
.app-layout input[type="number"],
.app-layout input[type="tel"],
.app-layout input[type="search"],
.app-layout input[type="url"],
.app-layout select,
.app-layout textarea {
  height: var(--control-height);               /* 42px */
  width: 100%;
  padding: 0 var(--space-3);
  background: var(--control-bg);               /* #f1f5f9 */
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);        /* radius-md */
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-inset);
  transition: all var(--duration-base) var(--ease-default);
}

.app-layout input[type="text"]:hover,
.app-layout input[type="email"]:hover,
.app-layout input[type="password"]:hover,
.app-layout input[type="number"]:hover,
.app-layout input[type="tel"]:hover,
.app-layout input[type="search"]:hover,
.app-layout input[type="url"]:hover,
.app-layout select:hover,
.app-layout textarea:hover {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
}

.app-layout input[type="text"]:focus,
.app-layout input[type="email"]:focus,
.app-layout input[type="password"]:focus,
.app-layout input[type="number"]:focus,
.app-layout input[type="tel"]:focus,
.app-layout input[type="search"]:focus,
.app-layout input[type="url"]:focus,
.app-layout select:focus,
.app-layout textarea:focus {
  outline: none;
  border-color: var(--control-border-focus);   /* navy */
  background: var(--control-bg-focus);         /* white */
  box-shadow: var(--shadow-focus);             /* navy ring */
}

.app-layout input::placeholder,
.app-layout textarea::placeholder {
  color: var(--color-text-muted);
}

.app-layout input:disabled,
.app-layout select:disabled,
.app-layout textarea:disabled {
  opacity: 0.6;
  background: var(--color-bg-sunken);
  cursor: not-allowed;
}

/* Error state */
.app-layout .input-erro input,
.app-layout .input-erro select,
.app-layout .input-erro textarea,
.app-layout input.input-erro,
.app-layout select.input-erro,
.app-layout textarea.input-erro {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Select chevron */
.app-layout select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Textarea */
.app-layout textarea {
  height: auto;
  min-height: 100px;
  padding: var(--space-3);
  resize: vertical;
  line-height: var(--leading-normal);
}

/* Label — DM Sans 500 */
.app-layout label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1-5);
}

/* Required label indicator */
.app-layout label.required::after {
  content: ' *';
  color: var(--color-danger);
}

/* Input with icon prefix */
.app-layout .input-icon-group {
  position: relative;
}

.app-layout .input-icon-group .input-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  font-size: 20px;
  pointer-events: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.app-layout .input-icon-group input {
  padding-left: var(--space-10);               /* 40px — icon + spacing */
}

.app-layout .input-icon-group:focus-within .input-icon {
  color: var(--grou-navy);
}

/* Validation message */
.app-layout .validation-message,
.app-layout .mensagem-validacao {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}


/* ==========================================================================
   Badges — V2
   Pill shape (radius-full), text-xs, weight-semibold, 10px/4px padding.
   Color variants + status variants using status tokens.
   ========================================================================== */

/* --- V2 Badge base --- */
.app-layout .badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
  line-height: var(--leading-tight);
}

/* Color variants */
.app-layout .badge-navy     { background: var(--grou-navy-100); color: var(--grou-navy-700); }
.app-layout .badge-amber    { background: var(--grou-amber-100); color: var(--grou-amber-700); }
.app-layout .badge-success  { background: var(--color-success-light); color: var(--color-success-dark); }
.app-layout .badge-emerald  { background: var(--color-success-light); color: var(--color-success-dark); }
.app-layout .badge-danger   { background: var(--color-danger-light); color: var(--color-danger-dark); }
.app-layout .badge-red      { background: var(--color-danger-light); color: var(--color-danger-dark); }
.app-layout .badge-warning  { background: var(--color-warning-light); color: var(--color-warning-dark); }
.app-layout .badge-info     { background: var(--color-info-light); color: var(--color-info-dark); }
.app-layout .badge-neutral  { background: var(--color-bg-sunken); color: var(--color-text-secondary); }
.app-layout .badge-slate    { background: var(--color-bg-sunken); color: var(--color-text-tertiary); }

/* Filled variants (solid bg, white text — for dark contexts) */
.app-layout .badge-filled-navy    { background: var(--grou-navy); color: white; }
.app-layout .badge-filled-amber   { background: var(--grou-amber); color: var(--grou-navy-900); }
.app-layout .badge-filled-success { background: var(--color-success); color: white; }
.app-layout .badge-filled-danger  { background: var(--color-danger); color: white; }

/* --- Category badges (legacy compat + V2 pill shape) --- */
.app-layout .categoria-passeio,
.app-layout .categoria-transfer,
.app-layout .categoria-hotel {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
}

.app-layout .categoria-passeio {
  background: var(--badge-passeio-bg);
  color: var(--badge-passeio-text);
}

.app-layout .categoria-transfer {
  background: var(--badge-transfer-bg);
  color: var(--badge-transfer-text);
}

.app-layout .categoria-hotel {
  background: var(--badge-hotel-bg);
  color: var(--badge-hotel-text);
}

/* V2 category badge aliases */
.app-layout .badge-passeio  { background: var(--cat-passeio-bg); color: var(--cat-passeio); }
.app-layout .badge-transfer { background: var(--cat-transfer-bg); color: var(--cat-transfer); }
.app-layout .badge-hotel    { background: var(--cat-hotel-bg); color: var(--cat-hotel); }

/* --- Status badges (legacy compat + V2 pill shape) --- */
.app-layout .status-novo,
.app-layout .status-aguardando,
.app-layout .status-pago,
.app-layout .status-cancelado,
.app-layout .status-faturado {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
}

.app-layout .status-novo {
  background: var(--color-info-light);
  color: var(--color-info-dark);
}

.app-layout .status-aguardando {
  background: var(--status-pendente-bg);
  color: var(--status-pendente);
}

.app-layout .status-pago {
  background: var(--status-pago-bg);
  color: var(--status-pago);
}

.app-layout .status-cancelado {
  background: var(--status-cancelado-bg);
  color: var(--status-cancelado);
}

.app-layout .status-faturado {
  background: var(--status-faturado-bg);
  color: var(--status-faturado);
}

/* V2 status badge aliases using status tokens */
.app-layout .badge-status-pendente    { background: var(--status-pendente-bg); color: var(--status-pendente); }
.app-layout .badge-status-confirmado  { background: var(--status-confirmado-bg); color: var(--status-confirmado); }
.app-layout .badge-status-cancelado   { background: var(--status-cancelado-bg); color: var(--status-cancelado); }
.app-layout .badge-status-pago        { background: var(--status-pago-bg); color: var(--status-pago); }
.app-layout .badge-status-faturado    { background: var(--status-faturado-bg); color: var(--status-faturado); }
.app-layout .badge-status-rascunho    { background: var(--status-rascunho-bg); color: var(--status-rascunho); }

/* --- Count badge (cart, notifications) --- */
.app-layout .badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--grou-amber);
  color: var(--grou-navy-900);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
}


/* ==========================================================================
   Cards — V2 Glassmorphism
   ========================================================================== */

/* Standard glassmorphism card */
.app-layout .card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  transition: box-shadow var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-out-cubic);
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .app-layout .card {
    background: var(--card-bg-solid);
  }
}

/* Interactive card (clickable / hoverable) */
.app-layout .card-interactive {
  cursor: pointer;
}

.app-layout .card-interactive:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.app-layout .card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

/* Legacy hover variant compat */
.app-layout .card-hover {
  transition: box-shadow var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-out-cubic);
}

.app-layout .card-hover:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* Card header */
.app-layout .card-header {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* Card header with navy left accent bar */
.app-layout .card-header-accent {
  padding-left: var(--space-4);
  border-left: 3px solid var(--grou-navy);
  border-bottom: none;
}

/* KPI card (dashboard) */
.app-layout .card-kpi {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: box-shadow var(--duration-base) var(--ease-default),
              transform var(--duration-base) var(--ease-out-cubic);
}

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .app-layout .card-kpi {
    background: var(--card-bg-solid);
  }
}

.app-layout .card-kpi:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.app-layout .card-kpi .kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-layout .card-kpi .kpi-icon.navy {
  background: var(--grou-navy-50);
  color: var(--grou-navy);
}

.app-layout .card-kpi .kpi-icon.amber {
  background: var(--grou-amber-50);
  color: var(--grou-amber-600);
}

.app-layout .card-kpi .kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  overflow: visible;
}

.app-layout .card-kpi .kpi-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.app-layout .card-kpi .kpi-trend {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.app-layout .card-kpi .kpi-trend.up {
  color: var(--color-success-dark);
  background: var(--color-success-light);
}

.app-layout .card-kpi .kpi-trend.down {
  color: var(--color-danger-dark);
  background: var(--color-danger-light);
}

/* Cart item card (compact) */
.app-layout .card-item-carrinho {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

/* Mobile data card (responsive table replacement) */
.app-layout .card-dados-mobile {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.app-layout .card-dados-mobile .dado-label {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.app-layout .card-dados-mobile .dado-valor {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}


/* ==========================================================================
   Tables — V2
   DM Sans 600 uppercase headers, tracking-widest, navy-50 hover,
   sticky header option, refined spacing.
   ========================================================================== */

.app-layout .tabela-dados {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
}

/* Header — DM Sans 600, uppercase, 11px, tracking-widest */
.app-layout .tabela-dados thead th {
  font-family: var(--font-display);
  font-size: var(--text-2xs);                  /* 11px */
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-tertiary);           /* slate-500 */
  padding: var(--space-3) var(--space-4);
  background: rgba(248, 250, 252, 1);          /* #f8fafc */
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}

/* Sticky header option */
.app-layout .tabela-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Rows — navy-50 hover, fast transition */
.app-layout .tabela-dados tbody tr {
  transition: background-color var(--duration-fast) var(--ease-default);
}

.app-layout .tabela-dados tbody tr:hover {
  background: var(--grou-navy-50);
}

.app-layout .tabela-dados tbody td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  vertical-align: middle;
  font-size: var(--text-sm);
}

/* Last row — no border */
.app-layout .tabela-dados tbody tr:last-child td {
  border-bottom: none;
}

/* Monospace data (IDs, codes) */
.app-layout .tabela-dados .dado-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Currency / price emphasis */
.app-layout .tabela-dados .dado-valor {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

/* Action column — reveal on hover */
.app-layout .tabela-dados .col-acoes {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.app-layout .tabela-dados .col-acoes a,
.app-layout .tabela-dados .col-acoes button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  display: inline-flex;
  align-items: center;
}

.app-layout .tabela-dados .col-acoes a:hover,
.app-layout .tabela-dados .col-acoes button:hover {
  color: var(--grou-navy);
  background: var(--grou-navy-50);
}

/* Action icons reveal on row hover */
.app-layout .tabela-dados .col-acoes .btn-icon {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.app-layout .tabela-dados tbody tr:hover .col-acoes .btn-icon {
  opacity: 1;
}

/* Expand toggle (mobile detail rows) */
.app-layout .tabela-dados .btn-expandir {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast) var(--ease-default);
}

.app-layout .tabela-dados .btn-expandir.aberto {
  transform: rotate(180deg);
}

/* Expandable detail row */
.app-layout .tabela-dados .linha-detalhe {
  display: none;
}

.app-layout .tabela-dados .linha-detalhe td {
  padding: 0;
  background: var(--color-bg-sunken);
}

/* Inner wrapper for smooth height transition */
.app-layout .tabela-dados .linha-detalhe td > .detalhe-inner {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 var(--space-4);
  transition: max-height var(--duration-moderate) var(--ease-out-cubic),
              opacity var(--duration-base) var(--ease-default),
              padding var(--duration-moderate) var(--ease-out-cubic);
}

.app-layout .tabela-dados .linha-detalhe.visivel td > .detalhe-inner {
  max-height: 500px;
  opacity: 1;
  padding: var(--space-3) var(--space-4);
}

/* Fallback for detail rows without .detalhe-inner wrapper */
.app-layout .tabela-dados .linha-detalhe td > .detalhe-grid {
  padding: var(--space-3) 0;
}

.app-layout .tabela-dados .linha-detalhe .detalhe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
}

.app-layout .tabela-dados .linha-detalhe .detalhe-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}

.app-layout .tabela-dados .linha-detalhe .detalhe-valor {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.app-layout .tabela-dados .linha-detalhe.visivel {
  display: table-row;
  animation: fadeIn var(--duration-enter) var(--ease-out);
}

/* Staggered row entrance — opt-in via .animate-rows class */
.app-layout .tabela-dados.animate-rows tbody tr {
  animation: slideUp var(--duration-enter) var(--ease-out) both;
}
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(1) { animation-delay: 0ms; }
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(2) { animation-delay: 40ms; }
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(3) { animation-delay: 80ms; }
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(4) { animation-delay: 120ms; }
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(5) { animation-delay: 160ms; }
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(6) { animation-delay: 200ms; }
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(7) { animation-delay: 240ms; }
.app-layout .tabela-dados.animate-rows tbody tr:nth-child(n+8) { animation-delay: 280ms; }

/* Responsive table — mobile */
@media (max-width: 767px) {
  .app-layout .tabela-dados .col-secundaria {
    display: none;
  }

  .app-layout .tabela-dados .btn-expandir {
    display: inline-flex;
  }

  .app-layout .tabela-dados thead th,
  .app-layout .tabela-dados tbody td {
    padding: var(--space-2) var(--space-3);
  }

  .app-layout .tabela-dados {
    font-size: var(--text-sm);
  }

  .app-layout .tabela-dados .linha-detalhe .detalhe-grid {
    grid-template-columns: 1fr;
  }

  /* Show action icons always on mobile (no hover) */
  .app-layout .tabela-dados .col-acoes .btn-icon {
    opacity: 1;
  }
}


/* ==========================================================================
   Filter Bar — V2
   Glassmorphism container, refined dropdowns, active filter count badge.
   ========================================================================== */

.app-layout .filtro-barra {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .app-layout .filtro-barra {
    background: var(--card-bg-solid);
    box-shadow: var(--shadow-sm);
  }
}

.app-layout .filtro-barra .filtro-titulo {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.app-layout .filtro-barra .filtro-campo {
  flex: 1;
  min-width: 180px;
}

.app-layout .filtro-barra .filtro-campos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  width: 100%;
}

.app-layout .filtro-barra .filtro-acoes {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Active filter count badge (amber pill) */
.app-layout .filtro-barra .filtro-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--grou-amber);
  color: var(--grou-navy-900);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1;
}

/* Refined select/dropdown inside filter bar */
.app-layout .filtro-barra select {
  height: var(--control-height);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  transition: all var(--duration-base) var(--ease-default);
}

.app-layout .filtro-barra select:hover {
  border-color: var(--control-border-hover);
  background: var(--control-bg-hover);
}

.app-layout .filtro-barra select:focus {
  border-color: var(--control-border-focus);
  background: var(--control-bg-focus);
  box-shadow: var(--shadow-focus);
}

/* Adaptive filter: collapsible on mobile */
.app-layout .filtro-barra .filtro-toggle {
  display: none;
  width: 100%;
  background: none;
  border: none;
  padding: var(--space-2) 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--grou-navy);
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.app-layout .filtro-barra .filtro-toggle .material-symbols-outlined {
  font-size: 20px;
  transition: transform var(--duration-fast) var(--ease-default);
}

.app-layout .filtro-barra .filtro-toggle.aberto .material-symbols-outlined {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .app-layout .filtro-barra {
    flex-direction: column;
  }

  .app-layout .filtro-barra .filtro-toggle {
    display: flex;
  }

  .app-layout .filtro-barra .filtro-titulo {
    display: none;
  }

  .app-layout .filtro-barra .filtro-campos {
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--duration-moderate) var(--ease-out-cubic),
                opacity var(--duration-base) var(--ease-default);
  }

  .app-layout .filtro-barra .filtro-campos.filtro-aberto {
    max-height: var(--filter-max-height, 600px);
    opacity: 1;
  }

  .app-layout .filtro-barra .filtro-campos button {
    width: 100%;
  }

  .app-layout .filtro-barra.collapsed .filtro-campo {
    display: none;
  }
}

/* ==========================================================================
   Page Header — V2
   ========================================================================== */

.app-layout .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.app-layout .page-header h2 {
  margin: 0;
}

.app-layout .page-header .page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.app-layout .page-header .page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.app-layout .page-header-actions,
.app-layout .page-header .page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Resumo valor row (checkout items) */
.app-layout .resumo-valor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   Form Sections — V2
   Glassmorphism container, DM Sans headers.
   ========================================================================== */

.app-layout .form-section {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .app-layout .form-section {
    background: var(--card-bg-solid);
    box-shadow: var(--shadow-sm);
  }
}

.app-layout .form-section-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4) 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.app-layout .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.app-layout .form-row:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Empty States — V2
   Icon in 64px colored circle, descriptive text, optional action button.
   ========================================================================== */

.app-layout .estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.app-layout .estado-vazio .vazio-icone {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--grou-navy-50);
  color: var(--grou-navy-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.app-layout .estado-vazio .vazio-icone.amber {
  background: var(--grou-amber-50);
  color: var(--grou-amber-600);
}

.app-layout .estado-vazio .vazio-icone .material-symbols-outlined {
  font-size: 28px;
}

.app-layout .estado-vazio .vazio-titulo {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.app-layout .estado-vazio .vazio-descricao {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  max-width: 320px;
  margin-bottom: var(--space-5);
}

/* Legacy compat: simple icon + text empty state */
.app-layout .estado-vazio .material-symbols-outlined {
  font-size: 28px;
}

.app-layout .estado-vazio p {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ==========================================================================
   Info Cliente Resumo (cart customer summary)
   ========================================================================== */

.app-layout .info-cliente-resumo {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.app-layout .info-cliente-resumo button {
  margin-left: var(--space-sm);
}


/* ==========================================================================
   Quantity Selector
   ========================================================================== */

.app-layout .seletor-quantidade {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  height: 40px;
}

.app-layout .seletor-quantidade button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--grou-navy);
  font-size: var(--text-lg);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.app-layout .seletor-quantidade button:hover {
  background: var(--color-bg-sunken);
}

.app-layout .seletor-quantidade .seletor-valor {
  width: 48px;
  text-align: center;
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  border-left: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
}


/* ==========================================================================
   Pagination — V2
   Pill shape, navy active, disabled 50% opacity.
   ========================================================================== */

.app-layout .paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  margin-top: var(--space-4);
}

.app-layout .paginacao .paginacao-btn {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);            /* pill shape */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.app-layout .paginacao .paginacao-btn:hover:not(.desabilitado):not(.ativo) {
  background: var(--grou-navy-50);
  color: var(--grou-navy);
}

.app-layout .paginacao .paginacao-btn.ativo {
  background: var(--grou-navy);
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
}

.app-layout .paginacao .paginacao-btn.desabilitado,
.app-layout .paginacao .paginacao-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.app-layout .paginacao-info {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin: 0 var(--space-3);
}


/* ==========================================================================
   Skeleton Loading — V2
   Shimmer animation, width variations, card/table/KPI skeletons.
   ========================================================================== */

.app-layout .skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-sunken) 25%,
    var(--color-bg) 50%,
    var(--color-bg-sunken) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .app-layout .skeleton {
    animation: none;
    background: var(--color-bg-sunken);
  }
}

/* Text skeleton — width variations */
.app-layout .skeleton-text {
  height: 14px;
  margin-bottom: var(--space-2);
}

.app-layout .skeleton-text:last-child {
  margin-bottom: 0;
}

.app-layout .skeleton-text.short  { width: 40%; }
.app-layout .skeleton-text.medium { width: 65%; }
.app-layout .skeleton-text.long   { width: 85%; }

/* Card skeleton */
.app-layout .skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

/* Table row skeleton */
.app-layout .skeleton-table-row {
  height: 48px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
}

/* KPI card skeleton */
.app-layout .skeleton-kpi {
  height: 100px;
  border-radius: var(--radius-lg);
}

/* Circle skeleton (avatars, icons) */
.app-layout .skeleton-circle {
  border-radius: var(--radius-full);
}

/* Image skeleton */
.app-layout .skeleton-image {
  height: 180px;
  border-radius: var(--radius-lg);
}

/* Badge skeleton */
.app-layout .skeleton-badge {
  height: 22px;
  width: 60px;
  border-radius: var(--radius-full);
}

/* Skeleton container — crossfade to real content */
.app-layout .skeleton-container {
  transition: opacity var(--duration-moderate) var(--ease-default);
}

.app-layout .skeleton-container.loaded {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Content reveal — applied to real content that replaces skeleton via @if swap */
.app-layout .content-reveal {
  animation: slideUp var(--duration-enter) var(--ease-out) both;
}


/* ==========================================================================
   Loading Spinner — V2
   ========================================================================== */

.app-layout .carregando-spinner,
.carregando-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--grou-navy);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* CarregandoDialog (Radzen dialog spinner) */
.carregando-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  min-width: 200px;
}

.carregando-dialog .carregando-spinner {
  width: 52px;
  height: 52px;
  border-width: 4px;
  border-color: var(--grou-navy-100);
  border-top-color: var(--grou-navy);
  box-shadow: 0 0 0 6px rgba(21, 46, 129, 0.06);
}

.carregando-dialog-texto {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin: 0;
  text-align: center;
  letter-spacing: var(--tracking-wide);
}

/* Inline loading (used by ListaDeItens) */
.app-layout .carregando-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
}

/* Carregando overlay (centered loader) */
.app-layout .carregando-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
}

.app-layout .carregando-texto {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.app-layout .sem-registro {
  text-align: center;
  color: var(--color-text-tertiary);
  padding: var(--space-8) var(--space-4);
  font-style: italic;
  font-size: var(--text-sm);
}

/* Material Symbols base integration */
.app-layout .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
  vertical-align: middle;
  user-select: none;
}

.app-layout .botao-icone .material-symbols-outlined {
  font-size: 20px;
}

/* Screen reader only */
.app-layout .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   MaisMenosNumeroInput — V2 Navy +/- controls
   Global styling for the quantity selector (Radzen .rz-spinner).
   Dialog-specific override in pages.css (.dialog-servicos .rz-spinner).
   ========================================================================== */

.app-layout .rz-spinner {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: auto !important;
  gap: 0;
}

.app-layout .rz-spinner button {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grou-navy-50);
  color: var(--grou-navy);
  border: none;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-family: var(--font-display);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
  padding: 0;
  line-height: 1;
}

.app-layout .rz-spinner button:hover {
  background: var(--grou-navy-100);
  color: var(--grou-navy);
}

.app-layout .rz-spinner button:active {
  background: var(--grou-navy-200);
}

.app-layout .rz-spinner input[type='text'],
.app-layout .rz-spinner input[type='number'] {
  width: 48px !important;
  height: 40px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: none;
  border-left: 1px solid var(--color-border-subtle);
  border-right: 1px solid var(--color-border-subtle);
  border-radius: 0;
  padding: 0;
  -moz-appearance: textfield;
}

.app-layout .rz-spinner input::-webkit-outer-spin-button,
.app-layout .rz-spinner input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   Payment Summary List (replaces Foundation vertical tabs in payment pages)
   ========================================================================== */

.lista-resumo-pagamento {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ==========================================================================
   Phase 8 — Migrated from app.css (Foundation removal)
   ========================================================================== */

/* --- Action Button Column (table row actions) --- */
.app-layout .container-acao a,
.app-layout .container-acao button {
  background: var(--grou-navy);
  color: white !important;
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.app-layout .container-acao a .material-symbols-outlined,
.app-layout .container-acao button .material-symbols-outlined {
  font-size: 18px;
  color: inherit !important;
}

.app-layout .container-acao a.botao-visualizar:hover { background: var(--color-success); }
.app-layout .container-acao a.botao-editar:hover { background: var(--grou-amber); }
.app-layout .container-acao a.botao-apagar:hover,
.app-layout .container-acao button.botao-apagar:hover { background: var(--color-error); }
.app-layout .container-acao a.botao-nova-venda:hover { background: var(--color-success); }

/* --- Status Badges (order/product status) --- */
.app-layout .status-servico {
  display: inline-block;
  color: white;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--color-text-muted);
  white-space: nowrap;
}

.app-layout .status-servico.status-liberado { background: var(--color-success); }
.app-layout .status-servico.status-em-edicao { background: var(--color-error); }
.app-layout .status-servico.status-sob-consulta { background: var(--grou-amber); }
.app-layout .status-servico.status-indefinido { background: #a9a9a9; }
.app-layout .status-servico.status-orcamento-enviado-cliente { background: #34C349; }
.app-layout .status-servico.status-orcamento-reservado { background: #FF9223; }
.app-layout .status-servico.status-orcamento-cancelado { background: #FF1F3A; }
.app-layout .status-servico.status-orcamento-aguardando-pagamento { background: #FFB62D; }
.app-layout .status-servico.status-orcamento-pagamento-realizado { background: var(--color-success); }
.app-layout .status-servico.status-orcamento-pagamento-recusado { background: var(--color-error); }

/* --- Category Badge (product type) --- */
.app-layout .categoria-servico {
  background: white;
  border: 1px solid var(--grou-navy);
  display: inline-block;
  color: var(--grou-navy);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  position: relative;
  padding-left: 26px;
}

.app-layout .categoria-servico::before {
  background-size: 14px;
  width: 16px;
  height: 20px;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  position: absolute;
  left: 8px;
  top: 6px;
}

.app-layout .categoria-servico.categoria-ProdutoPasseio::before { background-image: url(../images/icone-servico-passeio.svg); }
.app-layout .categoria-servico.categoria-ProdutoTransfer::before { background-image: url(../images/icone-servico-transfer.svg); top: 7px; }
.app-layout .categoria-servico.categoria-ProdutoHotel::before { background-image: url(../images/icone-servico-hotel.svg); background-size: 13px; }
.app-layout .categoria-servico.categoria-Sisare::before { background-image: url(../images/icone-servico-sisare.svg); background-size: 13px; }

/* --- Tag Type (product type identifier) --- */
.app-layout .tag-tipo {
  color: var(--grou-navy);
  font-size: var(--text-xs);
}

.app-layout .tag-tipo .material-symbols-outlined {
  font-size: 12px;
  margin-right: 4px;
}

.app-layout .tag-categoria {
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  color: var(--grou-navy);
  border: 1px solid var(--grou-amber);
  border-radius: var(--radius-full);
  height: 32px;
  padding: 0 var(--space-3);
}

/* --- Passenger Badge --- */
.app-layout .ver-passageiros {
  background: var(--color-success);
  display: inline-block;
  color: white;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}

/* --- Input Group (Foundation pattern — preserved for remaining usages) --- */
.app-layout .input-group {
  position: relative;
  display: flex;
  margin-bottom: var(--space-4);
}

.app-layout .input-group-label {
  height: 40px;
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border);
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.app-layout .input-group-field {
  height: 40px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  flex: 1;
  min-width: 0;
  box-shadow: none;
}

.app-layout .input-group .validation-message {
  position: absolute;
  right: var(--space-3);
  top: 100%;
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Block dates: reversed input-group */
.app-layout .container-bloqueio-datas .input-group-label {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: 0;
  border-right: 1px solid var(--color-border);
}

.app-layout .container-bloqueio-datas .input-group-field {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-left: 1px solid var(--color-border);
  border-right: 0;
}

/* --- Disabled Input State --- */
.app-layout input:disabled,
.app-layout input[readonly],
.app-layout textarea:disabled,
.app-layout textarea[readonly],
.app-layout .rz-state-disabled:not(.rz-chkbox-box):not(.rz-calendar):not(.rz-steps-item):not(.rz-radiobutton-box):not(.rz-radio-button-list-horizontal) {
  background-color: var(--color-bg-sunken) !important;
  cursor: not-allowed;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.app-layout .rz-state-disabled button {
  display: none;
}

/* --- Validation Message Positioning --- */
.app-layout .validation-message {
  position: relative;
  color: var(--color-error);
  font-size: var(--text-xs);
  margin-top: -8px;
  margin-bottom: var(--space-2);
}

.app-layout .grid-margin-x {
  position: relative;
}

.app-layout .grid-margin-x > .cell {
  position: relative;
}

/* --- Radzen overrides for form context --- */
.app-layout .cadastro-grou .rz-textbox,
.app-layout .cadastro-grou .rz-dropdown {
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.app-layout .cadastro-grou .rz-checkbox-list-horizontal,
.app-layout .container-radio-cadastro,
.app-layout .cadastro-grou .container-selecoes-radio-checkbox {
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-3);
  background: white;
}

.app-layout .cadastro-grou input[type=radio] {
  border: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}

.app-layout .cadastro-grou input[type=checkbox] {
  border: 0;
  zoom: 1.4;
  margin: 0;
  box-shadow: none;
}

.app-layout .cadastro-grou [type=checkbox] + label,
.app-layout .cadastro-grou [type=radio] + label {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 2px;
  margin-right: 12px;
  margin-bottom: 0;
  line-height: 16px !important;
}

/* Spinner (admin page numeric inputs) */
.app-layout .cadastro-grou .spinner-adm {
  display: inline-block;
  position: relative;
  border-radius: var(--radius-md) !important;
  height: 37px !important;
  margin-top: 2px;
  width: 100%;
  z-index: 0;
}

/* --- Container hotéis checkbox --- */
.app-layout .container-hoteis-checkbox {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-height: 310px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  margin-bottom: var(--space-3);
}

.app-layout .container-hoteis-checkbox .rz-checkbox-list-vertical .rz-checkbox {
  margin: 3px 0;
}

/* --- Callout Warning (remaining Foundation usage) --- */
.app-layout .callout.warning {
  background: rgba(250, 164, 26, 0.1);
  border: 1px solid var(--grou-amber);
  border-left: 4px solid var(--grou-amber);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

/* --- Seletor dias (day selector for product availability) --- */
.app-layout .seletor-dias {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  position: relative;
}

.app-layout .seletor-dias label {
  padding: 0;
  margin: 0 var(--space-3) 0 var(--space-1);
  position: relative;
}

/* --- Form submit/save/cancel buttons at #grou-b2b level --- */
.app-layout button[type=submit] {
  height: 44px;
  background: var(--grou-navy);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: 0 var(--space-6);
}

.app-layout button[type=submit]:hover {
  background: var(--grou-navy-dark);
}

.app-layout button:hover {
  opacity: 0.9;
}

.app-layout button.botao-verde,
.app-layout a.botao-verde {
  height: 44px;
  background: var(--color-success);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: var(--space-2) var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.app-layout button.botao-vermelho {
  height: 44px;
  background: var(--color-error);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: var(--space-2) var(--space-6);
}

.app-layout button.botao-azul {
  height: 44px;
  background: var(--grou-navy);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: var(--space-2) var(--space-6);
}

.app-layout button.botao-laranja,
.app-layout a.botao-laranja {
  height: 44px;
  background: var(--grou-amber);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: var(--space-2) var(--space-5);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.app-layout a.botao-pagar-depois {
  display: block;
  border-radius: var(--radius-full);
  margin: var(--space-3) var(--space-4);
  text-align: center;
}

.app-layout button.adicionar-item {
  border: 2px solid var(--color-success);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  color: var(--color-success);
  font-size: var(--text-lg);
  background: transparent;
}

.app-layout button.adicionar-item:hover {
  background: var(--color-success);
  color: white;
}

.app-layout button.salvar {
  border: 2px solid var(--color-success);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  color: var(--color-success);
  background: transparent;
}

.app-layout button.salvar:hover {
  background: var(--color-success);
  color: white;
}

.app-layout button.excluir {
  border: 2px solid var(--color-error);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  color: var(--color-error);
  background: transparent;
}

.app-layout button.excluir:hover {
  background: var(--color-error);
  color: white;
}

.app-layout .container-botoes {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
  gap: var(--space-2);
}

.app-layout .group-field-flex {
  display: flex;
  align-items: center;
}

/* --- Product File & Download --- */
.app-layout .baixar-documento {
  margin-top: var(--space-4);
  display: inline-block;
}

.app-layout .imagem-servico-adm {
  display: block;
  max-width: 430px;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* --- No scroll override --- */
.no-scroll { overflow: auto; }

/* Remove number input spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* --- Clear utility --- */
.clear { clear: both; display: block; width: 100%; }

/* --- Bloqueio datas (date blocking) --- */
.app-layout .bloqueio-datas {
  display: flex;
  justify-content: flex-end;
}

.app-layout .bloqueio-datas .adicionar-item {
  margin-left: var(--space-2);
}

/* --- Data bloqueada --- */
.app-layout .data-bloqueada {
  display: flex;
  align-items: center;
}

/* --- Produto datas (product form inside admin) --- */
.app-layout .cadastro-produto .container-botoes-cadastro {
  margin-top: 0;
  margin-bottom: var(--space-4);
  border-top: none;
}

/* --- Botao verde add cliente --- */
.app-layout .botao-verde-add-cliente {
  height: 44px;
  background: var(--color-success);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  width: 100%;
  margin-top: var(--space-1);
}

.app-layout .botao-verde-add-cliente.add-cliente-salvar {
  margin-top: var(--space-4);
}

/* --- Alterar cliente button --- */
.app-layout .botao-verde.alterar-cliente {
  padding: 0 var(--space-2);
  height: 28px;
  font-size: var(--text-sm);
  margin: auto 0 auto auto;
  float: right;
}

/* --- Radzen chart color override --- */
.rz-scheme-pastel .rz-series-1 {
  fill: var(--grou-amber) !important;
  stroke: var(--grou-amber) !important;
}

/* --- Info desabilitada --- */
.app-layout .info-desabilitada {
  height: 40px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  background: var(--color-bg-sunken);
  cursor: not-allowed;
  font-size: var(--text-sm);
}

/* --- Datepicker trigger position fix --- */
.app-layout .rz-datepicker-trigger {
  top: 50% !important;
  transform: translateY(-50%);
  position: absolute !important;
  right: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.app-layout .rz-datepicker-trigger .rzi-calendar:before {
  color: var(--grou-navy);
  font-size: 18px;
}

.app-layout .datepicker {
  display: block !important;
}

/* --- Hidden vehicle selector --- */
.app-layout #seletor-oculto-veiculo {
  display: none;
}

/* --- Radzen dialog content overrides for product detail --- */
.rz-dialog-content .rz-dropdown {
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  margin-top: var(--space-1);
}

.rz-dialog-content .rzi-chevron-down {
  display: none;
}

.rz-dialog-content .rz-dropdown-label {
  width: 100%;
  height: 44px;
  align-items: center;
  display: flex;
}

.rz-dialog-content input[type=number] {
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-4);
  box-shadow: none;
}

/* --- Radzen dialog image modal --- */
.rz-dialog-content .imagem-modal {
  height: 180px;
  position: relative;
  background: url(../images/padrao-servico.jpg) no-repeat center center;
  background-size: cover;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rz-dialog-content .foto-modal {
  position: absolute;
  height: 180px;
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* --- Comission values in dialog --- */
.valor-comissao input[type=number] {
  height: auto;
  border: none;
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  margin-bottom: 0;
  box-shadow: none;
  text-align: right;
  width: 40px;
}

/* --- Room add button (dialog) --- */
.rz-dialog-content button.botao-verde.adicionar-quarto {
  height: 44px;
  background: var(--color-success);
  border-radius: var(--radius-md);
  border: none;
  color: white;
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  margin: 0 var(--space-4);
}

.rz-dialog-content button.botao-vermelho {
  width: 40px;
  height: 40px;
  background: var(--color-error);
  border-radius: var(--radius-full);
  border: none;
  color: white;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Slider disabled hide --- */
.rz-slider.rz-state-disabled {
  display: none;
}

.botao-verde.adicionar-quarto[disabled] {
  display: none !important;
}

/* --- Dialog p sizing --- */
.rz-dialog-content p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}