/**
 * Astryx Design System - Foundation & Dense Theme
 * Shelby ERP - Alta Densidade + Mobile First (Responsive Design Engine)
 */

@import url('./fonts-local.css');

/* 1. Declaração obrigatória da ordem de cascade layers */
@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;

/* 2. Tokens de Tema Denso para ERP (Escala base 12px, ratio 1.125, grid de 4px) */
:root,
html,
body,
.x5tdzeq,
[data-astryx-theme],
[data-astryx-theme="neutral-light"],
[data-astryx-theme="neutral"] {
  /* Tipografia de ERP Denso - Unificada com a Sidebar */
  --font-family-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-family-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-family-base: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-family-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Força a mesma fonte em todos os elementos do DOM para eliminar discrepâncias */
*,
*::before,
*::after,
html,
body,
input,
select,
textarea,
button,
label,
span,
p,
h1, h2, h3, h4, h5, h6,
table, th, td,
.brand,
.nav-item,
.card,
.card-title {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-optical-sizing: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

@layer theme {
  :root,
  html,
  body,
  .x5tdzeq,
  [data-astryx-theme="neutral-light"],
  [data-astryx-theme="neutral"] {
    --font-family-body: 'Plus Jakarta Sans', 'Google Sans Flex', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    --font-family-heading: 'Plus Jakarta Sans', 'Google Sans Flex', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    --font-family-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;


    /* Escala Modular com base 12px e ratio 1.125 (Fluida & Contida) */
    --font-size-4xs: 0.5rem;    /* 8px */
    --font-size-3xs: 0.5625rem; /* 9px */
    --font-size-2xs: 0.625rem;  /* 10px */
    --font-size-xs: 0.6875rem;  /* 11px - supporting text */
    --font-size-sm: 0.6875rem;  /* 11px */
    --font-size-base: 0.75rem;  /* 12px - ERP standard body floor */
    --font-size-md: 0.8125rem;  /* 13px */
    --font-size-lg: 0.875rem;   /* 14px */
    --font-size-xl: 1rem;       /* 16px */
    --font-size-2xl: 1.125rem;  /* 18px */
    --font-size-3xl: 1.25rem;   /* 20px */
    --font-size-4xl: 1.5rem;    /* 24px */

    /* Pesos de Títulos Priorizados */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights travadas no grid de 4px */
    --line-height-none: 1;
    --line-height-tight: 16px;
    --line-height-base: 16px;
    --line-height-md: 20px;
    --line-height-lg: 24px;

    /* Espaçamentos e Gaps Restritos de ERP (4 / 8 / 12 / 16px) */
    --spacing-0: 0px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;

    /* Controles Compactos (28px desktop standard / 44px mobile touch) */
    --control-height-xs: 24px;
    --control-height-sm: 28px;
    --control-height-md: 32px;
    --control-height-mobile: 44px;

    /* Alvos de Toque (WCAG / Mobile Standards) */
    --touch-min: 24px;
    --touch-primary: 44px;

    /* Raio de borda refinado */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Dynamic Viewport Unit helpers */
    --app-height: 100dvh;

    /* Cores Semânticas Neutras e de Marca */
    --color-brand-primary: #1a3039;
    --color-brand-accent: #25D366;
    --color-background-app: #f8fafc;
    --color-background-surface: #ffffff;
    --color-background-muted: #f1f5f9;
    --color-background-hover: #f8fafc;
    --color-border: #e2e8f0;
    --color-border-emphasized: #cbd5e1;
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;

    /* Status Colors */
    --color-success: #0d8626;
    --color-success-bg: #f0fdf4;
    --color-warning: #b45309;
    --color-warning-bg: #fffbeb;
    --color-error: #dc2626;
    --color-error-bg: #fef2f2;
    --color-info: #0284c7;
    --color-info-bg: #f0f9ff;
  }
}

/* 3. Estilos Base no Layer Base */
@layer base {
  html, body, button, input, select, textarea {
    font-family: var(--font-family-body) !important;
  }

  html, body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
  }
  body {
    display: flex;
    flex-direction: row;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    margin: 0;
    width: 100%;
  }

  /* Títulos Fortemente Tipados com Peso Bold */
  h1, h2, h3, h4, h5, h6,
  .header-title,
  .brand-title,
  .page-title,
  .kpi-title,
  .card-title,
  .form-header h1 {
    font-family: var(--font-family-heading) !important;
    font-weight: 700 !important;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
  }


  h1 { font-size: var(--font-size-2xl); line-height: var(--line-height-lg); }
  h2 { font-size: var(--font-size-xl); line-height: var(--line-height-lg); }
  h3 { font-size: var(--font-size-lg); line-height: var(--line-height-md); }
  h4 { font-size: var(--font-size-md); line-height: var(--line-height-md); }
  h5 { font-size: var(--font-size-base); line-height: var(--line-height-base); }
  h6 { font-size: var(--font-size-xs); line-height: var(--line-height-base); }

  body {
    margin: 0;
    padding: 0;
    max-width: 100vw;
  }
}

/* 4. Componentes Primitivos com Garantia de Padding Seguro e Contraste Nítido */
/* 4. COMPONENTES OFICIAIS ASTRYX DESIGN SYSTEM (BOTÕES & INPUTS) */

/* Botão Base Neutro Astryx */
.btn,
.astryx-btn,
button.btn,
input[type="button"].btn,
input[type="submit"].btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  font-family: var(--font-family-body, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #334155;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn:hover,
.astryx-btn:hover,
button.btn:hover,
a.btn:hover {
  background-color: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.btn:active,
.astryx-btn:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Botões Primários Astryx */
.btn-primary,
.btn-login,
.btn-dark,
button.btn-primary,
input[type="submit"].btn-primary,
a.btn-primary {
  background-color: #1a3039 !important;
  border-color: #1a3039 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(26, 48, 57, 0.15) !important;
}
.btn-primary:hover,
.btn-login:hover,
.btn-dark:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover,
a.btn-primary:hover {
  background-color: #0f2027 !important;
  border-color: #0f2027 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 32, 39, 0.25) !important;
}

/* Botões Secundários / Neutros Astryx */
.btn-secondary,
.btn-default,
button.btn-secondary,
a.btn-secondary {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
.btn-secondary:hover,
.btn-default:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* Botões de Sucesso Astryx (Esmeralda / WhatsApp) */
.btn-success,
button.btn-success,
a.btn-success {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.2) !important;
}
.btn-success:hover,
button.btn-success:hover,
a.btn-success:hover {
  background-color: #047857 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}

/* Botões Destrutivos / Perigo Astryx */
.btn-danger,
button.btn-danger,
a.btn-danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2) !important;
}
.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Botões de Alerta / Warning Astryx */
.btn-warning,
button.btn-warning,
a.btn-warning {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn-warning:hover,
button.btn-warning:hover,
a.btn-warning:hover {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

/* Botões Info Astryx */
.btn-info,
button.btn-info,
a.btn-info {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.btn-info:hover,
button.btn-info:hover,
a.btn-info:hover {
  background-color: #0369a1 !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
}

/* Botões Ghost / Discretos */
.btn-ghost,
.btn-link,
button.btn-ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
}
.btn-ghost:hover,
.btn-link:hover,
button.btn-ghost:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  transform: none !important;
}

/* Variações de Tamanho de Botão */
.btn-xs {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}
.btn-sm {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.btn-lg {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
}

/* INPUTS E CONTROLES DE FORMULÁRIO ASTRYX DESIGN SYSTEM */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select,
.form-control {
  display: block;
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 6px 12px;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 20px;
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  box-sizing: border-box;
  outline: none !important;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
textarea:hover,
select:hover,
.form-control:hover {
  border-color: #94a3b8 !important;
  background-color: #f8fafc;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-control:focus-visible {
  outline: none !important;
  border-color: #1a3039 !important;
  box-shadow: 0 0 0 3px rgba(26, 48, 57, 0.12) !important;
  background-color: #ffffff !important;
}

/* Inputs Desabilitados */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-control[readonly] {
  background-color: #f8fafc !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed;
}

/* Select com Seta Customizada Astryx */
select.form-control,
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.form-group.full-width {
  grid-column: 1 / -1;
}
.form-group label {
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Grids Padronizados de Formulário */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form-grid-4 { display: grid; grid-template-columns: 140px 1fr 120px 1fr; gap: 14px; }
@media (max-width: 768px) {
  .form-grid, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr !important; }
}

/* Section Box e Headers para Forms */
.form-card-header { border-bottom: 1px solid var(--color-border); padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.form-card-title { font-size: 18px; font-weight: 700; color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; }
.form-card-actions { display: flex; gap: 10px; align-items: center; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .header-title {
    font-size: 14px;
  }
}

.section-box { background: var(--color-background-app); border: 1px solid var(--color-border); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 14px; width: 100%; box-sizing: border-box; margin-bottom: 16px; }
.section-title { font-size: 13.5px; font-weight: 700; color: var(--color-brand-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 8px; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }

/* Dashboard & Relatórios (Grades e Métricas) */
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.metric-card { background-color: var(--color-background-surface); border: none; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.03), 0 0 0 1px rgba(0,0,0,0.02); transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.metric-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03); transform: translateY(-2px); }
.metric-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.metric-value, .metric-val { font-size: 20px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.2; }
.metric-sub { font-size: 10.5px; font-weight: 500; color: var(--color-status-success); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 10px; }
.dash-grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.board-card, .chart-card, .card-report { background-color: var(--color-background-surface); border: none; border-radius: 16px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.03), 0 0 0 1px rgba(0,0,0,0.02); display: flex; flex-direction: column; gap: 12px; }
.board-title, .chart-header, .report-title { font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--color-border); padding-bottom: 6px; display: flex; align-items: center; justify-content: space-between; color: var(--color-text-primary); }

@media (max-width: 992px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .dash-grid-half { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .metrics-grid { gap: 6px; }
  .metric-card { padding: 8px 10px; }
  .metric-value, .metric-val { font-size: 15px; }
  .metric-title { font-size: 10px; }
}

/* Mobile: Alvos de Toque Confortáveis (44px HIG) */
@media (max-width: 768px) {
  .btn,
  .astryx-btn,
  button.btn,
  input[type="submit"].btn,
  a.btn {
    min-height: 44px !important;
    font-size: 13.5px !important;
    padding: 0 16px !important;
  }

  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  select,
  .form-control {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
}

@layer components {
  /* Search Box Input with Icon */
  .search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .search-box .icon {
    position: absolute;
    left: 12px;
    color: var(--color-text-muted, #94a3b8);
    width: 16px;
    height: 16px;
    pointer-events: none;
  }
  .search-box input[type="text"],
  .search-box input[type="search"] {
    width: 100%;
    padding-left: 36px !important;
  }

  /* Estrutura de Layout Base (App Shell) */
  .main-wrapper {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    height: 100vh;
  }
  
  .header, .top-bar {
    height: 56px;
    min-height: 56px;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  .content-body, .content-scroll {
    flex: 1 1 auto;
    padding: 20px;
    padding-bottom: 100px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  
  .pos-main, .app-main, .dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }
  
  @media (max-width: 768px) {
    .content-body, .content-scroll {
      padding: 14px;
      padding-bottom: 140px !important;
    }
  }

  /* Card Denso com suporte a container query e expansão fluida */
  .card,
  .card-caixa,
  .card-produtos,
  .card-list,
  .card-detail,
  .form-card {
    background-color: var(--color-background-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-3);
    box-sizing: border-box;
    container-type: inline-size;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tabela de Alta Densidade */
  table.table-density,
  .table-compact {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
/* ==========================================================================
   Listas, Tabelas e Filtros
   ========================================================================== */
.filters-bar { background: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius-container); padding: 12px 16px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); margin-bottom: 16px; }
.filter-item { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 140px; }
.filter-item label { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }

.table-container { background-color: var(--color-background-surface); border: 1px solid var(--color-border); border-radius: var(--radius-container); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; min-width: 0; margin-bottom: 16px; }
.table-header { padding: 12px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background-color: #ffffff; }
.table-title { font-size: 14px; font-weight: 700; color: var(--color-text-primary); display: flex; align-items: center; gap: 8px; }
.table-subtitle { font-size: 11.5px; color: var(--color-text-secondary); font-weight: normal; margin-top: 2px; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap !important; }
.badge-success { background-color: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge-warning { background-color: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.badge-danger { background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.badge-info { background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }

/* Global Toasts */
#astryxToastContainer { position: fixed; bottom: 24px; right: 24px; z-index: 100000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.astryx-toast { background: #0f172a; color: #ffffff; padding: 10px 16px; border-radius: var(--radius-element); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); pointer-events: auto; opacity: 0; transform: translateY(10px); transition: all 0.25s ease; border-left: 4px solid var(--color-status-success); }
.astryx-toast.show { opacity: 1; transform: translateY(0); }

/* Header Search */
.cmd-search { display: flex; align-items: center; gap: 8px; background-color: var(--color-background-app); border: 1px solid var(--color-border-emphasized); padding: 6px 12px; border-radius: var(--radius-element); flex: 1; max-width: 360px; color: var(--color-text-secondary); font-size: 13px; cursor: text; }
.cmd-search input { border: none !important; background: transparent !important; flex: 1; outline: none; font-size: 13px; color: var(--color-text-primary) !important; padding: 0 !important; }
.kbd-shortcut { background-color: var(--color-background-surface); border: 1px solid var(--color-border); padding: 2px 5px; border-radius: 4px; font-size: 10.5px; font-weight: 600; color: var(--color-text-secondary); margin-left: auto; }

/* Drawer Lateral (Listas e Perfis) */
.drawer-side { width: 340px; max-width: 100%; background-color: var(--color-background-surface); border: 1px solid var(--color-border); border-radius: var(--radius-container); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); flex-shrink: 0; box-sizing: border-box; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; }

.cli-avatar-box { display: flex; align-items: center; gap: 10px; }
.cli-avatar { width: 38px; height: 38px; border-radius: 50%; background: #e0f2fe; color: #0369a1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }

.list-item-card { background: #f8fafc; border: 1px solid var(--color-border); border-radius: 6px; padding: 9px 11px; font-size: 11.5px; margin-top: 6px; transition: border-color 0.15s ease; }
.list-item-card:hover { border-color: #cbd5e1; background: #ffffff; }

.clickable-data { color: var(--color-brand-primary); font-weight: 600; cursor: pointer; text-decoration: none; }
.clickable-data:hover { text-decoration: underline; }
.clickable-whatsapp { color: #059669; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.clickable-whatsapp:hover { text-decoration: underline; }
.clickable-copy { background: #f1f5f9; padding: 2px 5px; border-radius: 4px; font-size: 11px; color: #334155; border: 1px solid #cbd5e1; cursor: pointer; }
.clickable-copy:hover { background: #e2e8f0; }

/* Multi-Step Tabs (Formulários) */
.form-steps-nav { display: flex; gap: 6px; background: var(--color-background-muted); padding: 4px; border-radius: var(--radius-element); border: 1px solid var(--color-border); overflow-x: auto; margin-bottom: 16px; }
.step-nav-btn { flex: 1; min-width: 130px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: none; background: transparent; border-radius: var(--radius-element); font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.step-nav-btn:hover { background: rgba(255,255,255,0.6); color: var(--color-text-primary); }
.step-nav-btn.active { background: #ffffff; color: var(--color-brand-primary); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.step-num { width: 20px; height: 20px; border-radius: 50%; background: #cbd5e1; color: #ffffff; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.step-nav-btn.active .step-num { background: var(--color-brand-primary); }

.product-step-section { display: none; flex-direction: column; gap: 16px; }
.product-step-section.active { display: flex; animation: fadeInStep 0.15s ease; }
@keyframes fadeInStep { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
  .form-steps-nav { flex-wrap: nowrap; padding-bottom: 6px; }
  .step-label { font-size: 11.5px; }
}

  table.table-density th,
  .table-compact th {
    padding: 6px 8px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-secondary);
    background-color: var(--color-background-muted);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
  }

  table.table-density td,
  .table-compact td {
    padding: 6px 8px;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
  }

  table.table-density tr:hover td,
  .table-compact tr:hover td {
    background-color: var(--color-background-hover);
  }

  /* Números tabulares e métricas */
  .tabular-nums,
  td[data-numeric="true"],
  .currency,
  .imei-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
  }

  /* Empty States */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    gap: 12px;
    color: var(--color-text-secondary);
    width: 100%;
    height: 100%;
    min-height: 120px;
  }
  .empty-state .icon {
    width: 42px;
    height: 42px;
    stroke-width: 1.5;
    color: var(--color-border-emphasized);
  }
  .empty-state-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
  }
  .empty-state-text {
    font-size: 12px;
    max-width: 320px;
    line-height: 1.4;
  }
}

/* 5. Utilitários Responsivos no Layer Utilities */
@layer utilities {
  @media (max-width: 768px) {
    .btn-mobile-full {
      width: 100% !important;
      min-height: var(--touch-primary) !important;
    }
  }
}

/* ==========================================================================
   BOTÕES ASTRYX CANÔNICOS — ALTO CONTRASTE E DESTAQUE GARANTIDOS
   ========================================================================== */
.btn,
button.btn,
a.btn,
input[type="submit"].btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
  border: 1px solid transparent !important;
  
  /* Botão Padrão / Primário: Escuro Sólido de Alto Contraste */
  background-color: #171527 !important;
  color: #ffffff !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  background-color: #2d2a45 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(23, 21, 39, 0.15) !important;
}

/* Botão Primário Explícito */
.btn-primary {
  background-color: #171527 !important;
  color: #ffffff !important;
  border-color: #171527 !important;
}
.btn-primary:hover {
  background-color: #2d2a45 !important;
  color: #ffffff !important;
}

/* Botão Secundário / Cancelar / Voltar: Borda Nítida e Texto Escuro */
.btn-secondary {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}
.btn-secondary:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Botão de Sucesso / Salvar / WhatsApp */
.btn-success,
.btn-whatsapp {
  background-color: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}
.btn-success:hover,
.btn-whatsapp:hover {
  background-color: #047857 !important;
  color: #ffffff !important;
}

/* Botão de Perigo / Excluir */
.btn-danger {
  background-color: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}
.btn-danger:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

/* ==========================================================================
   COMPONENTES CANÔNICOS ADICIONAIS DO DESIGN SYSTEM
   ========================================================================== */

/* Grupo de Botões (Button Group) */
.btn-group {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-element);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-group .btn {
  border-radius: 0 !important;
  margin: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.btn-group .btn:last-child {
  border-right: none !important;
}

/* Badges Neutras e Secundárias */
.badge-secondary,
.badge-neutral {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
.badge-ghost {
  background-color: transparent !important;
  color: #64748b !important;
  border: 1px dashed #cbd5e1 !important;
}

/* KPI Grid & Cards Canônicos */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}
.kpi-card {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.kpi-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
}
.kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.kpi-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================================
   CANONICAL ERP COMPONENT SYSTEM (Astryx Core Standard)
   ============================================================================ */

/* 1. Page Header Component */
.page-header,
.header {
  height: 56px;
  min-height: 56px;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-background-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.page-title,
.header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 2. Filter Bar & Filter Group Pattern */
.filter-bar,
.controls-card {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container, 10px);
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  width: 100%;
  box-sizing: border-box;
}
.filter-group,
.controls-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.filter-actions,
.controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 1 auto;
}
.filter-input,
.filter-select,
.controls-card input,
.controls-card select,
.filter-bar input,
.filter-bar select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-border-emphasized);
  border-radius: var(--radius-element, 6px);
  font-size: 13px;
  background-color: var(--color-background-app);
  color: var(--color-text-primary);
  outline: none;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.filter-input:focus,
.filter-select:focus,
.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--color-brand-primary);
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 48, 57, 0.1);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 240px;
  flex: 1 1 240px;
}
.search-box input[type="text"],
.search-box input[type="search"] {
  width: 100%;
  padding: 7px 12px 7px 36px !important;
  border: 1px solid var(--color-border-emphasized);
  border-radius: var(--radius-element, 6px);
  font-size: 13px;
  outline: none;
  background: var(--color-background-app);
  height: 38px;
  line-height: 1.2;
}
.search-box input:focus {
  border-color: var(--color-brand-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 48, 57, 0.1);
}
.search-box .icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  width: 16px;
  height: 16px;
  z-index: 5;
}

/* 3. Products Grid & Fluid Data Cards (No fixed pixel locks) */
.products-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.product-card,
.data-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container, 10px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}
.product-card:hover,
.data-card:hover {
  border-color: var(--color-border-emphasized);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.product-card-title,
.data-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card-desc,
.data-card-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4. DataTable & Grid Container */
.table-container,
.grid-card {
  background: var(--color-background-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container, 10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data-grid,
table.table-compact {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
table.data-grid th,
table.table-compact th {
  position: sticky;
  top: 0;
  background: var(--color-background-muted);
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border-emphasized);
  z-index: 5;
  white-space: nowrap;
}
table.data-grid td,
table.table-compact td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  vertical-align: middle;
}
table.data-grid tr:hover td,
table.table-compact tr:hover td {
  background-color: var(--color-background-hover);
}

/* 5. Action Footer & Sticky Bottom Bar */
.action-footer,
.sticky-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 240px;
  right: 0;
  width: calc(100% - 240px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  z-index: 90;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}
.action-footer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.action-footer-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Responsive Overrides (Tablet & Mobile <= 1024px) */
@media (max-width: 1024px) {
  .action-footer,
  .sticky-bottom-bar {
    left: 0 !important;
    width: 100% !important;
    padding: 10px 14px;
  }
  .search-box {
    min-width: 100%;
    flex: 1 1 100%;
  }
}

/* Mobile Record Card (Desktop Table -> Mobile Cards) */
.mobile-card-list {
  display: none;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mobile-record-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.mobile-record-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  gap: 8px;
}
.mobile-record-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.mobile-record-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12px;
}
.mobile-record-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-record-field label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.mobile-record-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 8px;
  margin-top: 4px;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .mobile-card-list {
    display: flex;
  }
}

/* ==========================================================================
   APPLE DESIGN SYSTEM — MODAIS CANÔNICOS & FLOATING SHEETS
   ========================================================================== */
.astryx-modal-backdrop,
.modal-overlay,
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 9999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

.astryx-modal-backdrop.show,
.modal-overlay.show,
.modal-backdrop.show,
.astryx-modal-backdrop.active,
.modal-overlay.active {
  display: flex !important;
}

.astryx-modal-card,
.astryx-modal-content,
.modal-card,
.modal-box {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  width: 100% !important;
  max-width: 640px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.astryx-modal-backdrop.show .astryx-modal-card,
.astryx-modal-backdrop.show .astryx-modal-content,
.astryx-modal-backdrop[style*="display: flex"] .astryx-modal-card,
.astryx-modal-backdrop[style*="display: flex"] .astryx-modal-content,
.modal-overlay.show .modal-card,
.modal-overlay.show .modal-box,
.modal-backdrop.show .astryx-modal-card,
.modal-backdrop.show .astryx-modal-content,
.astryx-modal-backdrop.active .astryx-modal-card,
.astryx-modal-backdrop.active .astryx-modal-content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
}

.astryx-modal-head,
.modal-header,
.astryx-modal-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

.modal-head-title,
.modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
}

.modal-head-sub {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

.astryx-modal-body,
.modal-body {
  padding: 20px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

.astryx-modal-card.apple-sheet,
.astryx-modal-content.apple-sheet,
.modal-card.apple-sheet {
  max-width: 940px !important;
  width: 94vw !important;
}

.astryx-modal-body.apple-grid-2col,
.modal-body.apple-grid-2col {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}

@media (max-width: 768px) {
  .astryx-modal-body.apple-grid-2col,
  .modal-body.apple-grid-2col {
    grid-template-columns: 1fr !important;
  }
}

/* Apple Sleek Scrollbars */
.astryx-modal-body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.astryx-modal-content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.astryx-modal-body::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.astryx-modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.astryx-modal-body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.astryx-modal-content::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 9999px;
}
.astryx-modal-body::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.astryx-modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.35);
}

.astryx-modal-footer,
.modal-footer {
  padding: 14px 20px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.modal-close-btn {
  background: #f1f5f9 !important;
  border: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.modal-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Universal Input with Icon container (NO OVERLAPPING TEXT) */
.input-icon-group,
.input-icon-wrap,
.search-icon-wrap,
.has-icon-left,
.form-group-icon {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.input-icon-group svg,
.input-icon-wrap svg,
.search-icon-wrap svg,
.has-icon-left svg,
.form-group-icon svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  color: #64748b !important;
  pointer-events: none !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

.input-icon-group input,
.input-icon-group .form-control,
.input-icon-wrap input,
.input-icon-wrap .form-control,
.search-icon-wrap input,
.search-icon-wrap .form-control,
.has-icon-left input,
.has-icon-left .form-control,
.form-group-icon input,
.form-group-icon .form-control {
  padding-left: 38px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Warranties Module Styles */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}
.metric-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container, 10px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.metric-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.metric-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.metric-card-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.metric-card-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.metric-card-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
}