/* =========================================================
   TOKENS VISUAIS / TEMA BASE
   ========================================================= */
:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-soft:#f8fafc;

  --border:#e5e7eb;
  --border-soft:#eef2f7;

  --text:#0f172a;
  --text-soft:#64748b;
  --text-muted:#94a3b8;

  --primary:#000C1F;
  --primary-2:#2563eb;
  --primary-2-hover:#1d4ed8;
  --primary-light:#dbeafe;

  --success:#16a34a;
  --success-soft:#dcfce7;

  --warning:#d97706;
  --warning-soft:#fef3c7;

  --danger:#dc2626;
  --danger-soft:#fee2e2;

  --shadow-xs:0 2px 6px rgba(15,23,42,.04);
  --shadow-sm:0 6px 18px rgba(15,23,42,.05);
  --shadow-md:0 12px 32px rgba(15,23,42,.08);
  --shadow-lg:0 20px 50px rgba(15,23,42,.12);

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:26px;

  --topbar-max:1720px;
  --content-width:96vw;
  --content-max:1720px;
}

/* =========================================================
   RESET / BASE GLOBAL
   ========================================================= */
*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
}

h1,h2,h3,h4,h5,h6{
  margin-top:0;
}

p{
  line-height:1.5;
}

/* =========================================================
   ESTRUTURA PADRÃO DE LARGURA
   ========================================================= */
.page-header,
.dashboard,
.container{
  width:min(var(--content-width), var(--content-max));
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   TOPBAR / NAVEGAÇÃO SUPERIOR
   ========================================================= */
.topbar{
  width:100%;
  background:var(--primary);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;
  top:0;
  z-index:1200;
}

.topbar-content{
  max-width:var(--topbar-max);
  margin:0 auto;
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 22px;
}

.logo{
  min-width:180px;
  display:flex;
  align-items:center;
}

.logo img{
  max-height:38px;
  width:auto;
  object-fit:contain;
}

.menu-center{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.menu-button{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  padding:11px 20px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:.18s ease;
}

.menu-button:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}

.menu-button.active-tab{
  background:var(--primary-2-hover);
  border-color:var(--primary-2-hover);
  color:#fff;
  box-shadow:0 8px 20px rgba(29,78,216,.22);
}

.user-area{
  min-width:280px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
}

.status-time{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  border-radius:18px;
  padding:10px 14px;
  font-size:14px;
  white-space:nowrap;
}

.avatar-menu{
  position:relative;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#111827;
  border:2px solid rgba(255,255,255,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}

/* =========================================================
   DROPDOWN DO USUÁRIO
   ========================================================= */
.dropdown{
  position:absolute;
  top:56px;
  right:0;
  width:260px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:1500;
}

.user-mini-card{
  padding:16px;
  border-bottom:1px solid var(--border-soft);
  background:#fbfcff;
}

.user-mini-name{
  font-size:15px;
  font-weight:700;
  color:var(--text);
  margin-bottom:4px;
}

.user-mini-license{
  font-size:13px;
  color:var(--text-soft);
}

.dropdown a{
  padding:13px 16px;
  text-decoration:none;
  color:var(--text);
  font-size:14px;
  border-bottom:1px solid var(--border-soft);
}

.dropdown a:last-child{
  border-bottom:none;
}

.dropdown a:hover{
  background:var(--surface-soft);
}

/* =========================================================
   CABEÇALHO DE PÁGINA
   ========================================================= */
.page-header{
  margin-top:28px;
  margin-bottom:16px;
  padding:0 4px;
}

.page-header h1{
  margin:0 0 8px;
  font-size:38px;
  line-height:1.06;
  font-weight:800;
  letter-spacing:-0.02em;
}

.page-header p{
  margin:0;
  color:var(--text-soft);
  font-size:16px;
}

/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */
.container{
  background:var(--surface);
  border:1px solid rgba(229,231,235,.95);
  border-radius:28px;
  box-shadow:var(--shadow-md);
  padding:28px 24px;
  margin-bottom:30px;
}

/* =========================================================
   DASHBOARD / CARDS
   ========================================================= */
.dashboard{
  margin-top:20px;
  margin-bottom:20px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.dashboard.compact{
  width:min(96vw, 1320px);
  max-width:1320px;
  min-width:0;
}

.stat-card{
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border:1px solid rgba(226,232,240,.95);
  border-radius:18px;
  padding:14px 16px;
  min-height:88px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
  transition:.18s ease;
}

.stat-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
  border-color:#dbe3ee;
}

.stat-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg, rgba(37,99,235,.20), rgba(0,12,31,.12));
}

.stat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.stat-left{
  min-width:0;
}

.stat-title{
  font-size:13px;
  color:var(--text-soft);
  font-weight:700;
  margin-bottom:4px;
}

.stat-value{
  font-size:22px;
  font-weight:800;
  color:var(--text);
  line-height:1.1;
  letter-spacing:-0.02em;
}

.stat-meta{
  margin-top:5px;
  font-size:12px;
  color:var(--text-soft);
}

.stat-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:#f3f6fb;
  color:#475569;
  font-size:15px;
  font-weight:700;
  border:1px solid #e7edf5;
}

.stat-icon.success{
  background:#ecfdf3;
  color:#16a34a;
  border-color:#d7f5e3;
}

.stat-icon.warning{
  background:#fff7e8;
  color:#d97706;
  border-color:#fde8bf;
}

.stat-icon.info{
  background:#eef4ff;
  color:#2563eb;
  border-color:#d9e7ff;
}

.stat-icon.neutral{
  background:#f3f4f6;
  color:#475569;
  border-color:#e5e7eb;
}

/* =========================================================
   LAYOUT PRINCIPAL DA TELA DE PRODUTOS
   ========================================================= */
.catalog-layout{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

.filters-sidebar{
  position:sticky;
  top:96px;
}

.filters-card{
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border:1px solid rgba(226,232,240,.95);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow-sm);
}

.filters-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.filters-card-header h3{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:var(--text);
}

.filters-sidebar-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.filters-sidebar .filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.filters-sidebar .filter-group label{
  font-size:13px;
  color:var(--text-soft);
  font-weight:700;
}

.filters-sidebar-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

.filters-sidebar select[multiple],
.filters select[multiple]{
  min-height:140px;
  padding:10px 12px;
}

.filters-sidebar select[multiple] option,
.filters select[multiple] option{
  padding:8px 10px;
  border-radius:8px;
  margin:2px 0;
}

.multi-tip{
  margin-top:2px;
  font-size:12px;
  color:var(--text-muted);
  line-height:1.4;
}

.catalog-main{
  min-width:0;
}

.results-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  border-radius:22px;
}

.small-btn{
  padding:8px 12px;
  font-size:13px;
}

/* =========================================================
   BUSCA
   ========================================================= */
.search-box{
  width:100%;
  margin-bottom:24px;
}

.search-box input{
  width:100%;
  min-height:72px;
  border-radius:24px;
  border:1px solid #dbe3ee;
  background:#fff;
  padding:0 26px;
  font-size:24px;
  font-weight:500;
  color:var(--text);
  outline:none;
  box-shadow:var(--shadow-xs);
  transition:.18s ease;
}

.search-box input::placeholder{
  color:#a1a1aa;
}

.search-box input:focus{
  border-color:#c8d7ee;
  box-shadow:0 0 0 4px rgba(37,99,235,.06), var(--shadow-sm);
}

/* =========================================================
   BARRA DE STATUS / AÇÕES
   ========================================================= */
.status-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.status{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(22,163,74,.10);
}

/* =========================================================
   BOTÕES
   ========================================================= */
button{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  transition:.16s ease;
}

button:hover{
  background:var(--surface-soft);
  border-color:#d5dbe3;
}

.primary-btn,
.upload-btn{
  background:var(--primary-2);
  color:#fff;
  border:none;
  box-shadow:0 10px 20px rgba(37,99,235,.18);
}

.primary-btn:hover,
.upload-btn:hover{
  background:var(--primary-2-hover);
}

.secondary-btn{
  background:#fff;
  color:var(--text);
}

.danger-btn{
  background:var(--danger);
  color:#fff;
  border:none;
}

.danger-btn:hover{
  background:#b91c1c;
}

/* =========================================================
   FILTROS / FORM CONTROLS
   ========================================================= */
.filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:20px;
  align-items:end;
}

.filters .filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.filters label{
  font-size:13px;
  color:var(--text-soft);
  font-weight:700;
}

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"]{
  width:100%;
  min-height:58px;
  border:1px solid #dbe2ea;
  border-radius:16px;
  padding:0 16px;
  background:#fff;
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:.16s ease;
}

select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 4px rgba(37,99,235,.06);
}

.admin-search{
  min-height:58px;
  border-radius:16px;
  border:1px solid #dbe2ea;
  padding:0 16px;
  font-size:14px;
  width:100%;
}

/* =========================================================
   RESULTADOS / TEXTO AUXILIAR
   ========================================================= */
.results{
  margin-bottom:14px;
  color:var(--text-soft);
  font-size:14px;
}

/* =========================================================
   TABELAS
   ========================================================= */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-xs);
}

thead{
  background:#fbfcfe;
}

th{
  text-align:left;
  padding:14px 12px;
  border-bottom:1px solid var(--border);
  font-size:12px;
  font-weight:700;
  color:#334155;
  cursor:pointer;
  white-space:nowrap;
}

td{
  padding:12px 12px;
  border-bottom:1px solid var(--border-soft);
  font-size:13px;
  vertical-align:middle;
  color:var(--text);
  white-space:nowrap;
}

tbody tr:last-child td{
  border-bottom:none;
}

tbody tr:hover{
  background:#fcfdff;
}

th:not(:last-child),
td:not(:last-child){
  border-right:1px solid #f2f4f8;
}

.price{
  font-weight:800;
  color:var(--success);
  font-size:15px;
  white-space:nowrap;
}

/* =========================================================
   ORDENAÇÃO DE COLUNAS
   ========================================================= */
th.sortable{
  position:relative;
  padding-right:30px;
}

th .sort-indicator{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  color:#94a3b8;
  pointer-events:none;
}

th.sorted-asc .sort-indicator,
th.sorted-desc .sort-indicator{
  color:var(--primary-2);
  font-weight:700;
}

/* =========================================================
   BADGES / STATUS VISUAL
   ========================================================= */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.badge-admin{
  background:#dbeafe;
  color:#1d4ed8;
}

.badge-user{
  background:#f3f4f6;
  color:#374151;
}

.badge-active{
  background:var(--success-soft);
  color:var(--success);
}

.badge-inactive{
  background:var(--danger-soft);
  color:var(--danger);
}

.badge-paid{
  background:var(--success-soft);
  color:var(--success);
}

.badge-pending{
  background:var(--warning-soft);
  color:var(--warning);
}

.badge-overdue{
  background:var(--danger-soft);
  color:var(--danger);
}

/* =========================================================
   PAGINAÇÃO
   ========================================================= */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:22px;
  flex-wrap:wrap;
}

.pagination button{
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
}

.pagination button.active{
  background:var(--primary-2);
  color:#fff;
  border-color:var(--primary-2);
}

/* =========================================================
   UPLOAD
   ========================================================= */
.upload-area{
  border:2px dashed #d6dde7;
  border-radius:20px;
  background:#fbfcfe;
  padding:52px 24px;
  text-align:center;
  cursor:pointer;
  margin-bottom:26px;
  transition:.16s ease;
}

.upload-area:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
}

.upload-area input{
  display:none;
}

.preview-box{
  margin-top:12px;
}

.preview-box h3{
  margin:0 0 14px;
}

/* =========================================================
   PERFIL / FORMULÁRIOS / CARDS INTERNOS
   ========================================================= */
.profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.profile-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow-xs);
}

.profile-card h3{
  margin:0 0 20px;
  font-size:20px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-group.full{
  grid-column:1 / -1;
}

.form-group label{
  font-size:13px;
  color:var(--text-soft);
  font-weight:700;
}

.form-actions{
  margin-top:20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================================================
   AÇÕES EM TABELAS
   ========================================================= */
.table-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.table-actions button{
  padding:7px 11px;
  font-size:12px;
  border-radius:10px;
  white-space:nowrap;
}

/* =========================================================
   MODAIS
   ========================================================= */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.34);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3000;
  padding:20px;
}

.modal-box{
  width:100%;
  max-width:760px;
  background:#fff;
  border:1px solid rgba(229,231,235,.95);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow-lg);
  max-height:90vh;
  overflow:auto;
}

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

.modal-header h3{
  margin:0;
  font-size:22px;
  font-weight:800;
}

.modal-close{
  width:40px;
  height:40px;
  border:none;
  border-radius:12px;
  background:#f3f4f6;
  color:var(--text);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-close:hover{
  background:#e5e7eb;
}

.danger-close{
  background:var(--danger) !important;
  color:#fff !important;
  border:none !important;
}

.danger-close:hover{
  background:#b91c1c !important;
}

/* =========================================================
   TOAST / SISTEMA UI
   ========================================================= */
.popup-toast-container{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:5000;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.popup-toast{
  min-width:280px;
  max-width:360px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:14px 16px;
  animation:toastIn .18s ease;
  border-left:4px solid transparent;
}

.popup-toast.success{
  border-left-color:var(--success);
}

.popup-toast.error{
  border-left-color:var(--danger);
}

.popup-toast.warning{
  border-left-color:var(--warning);
}

.popup-toast.info{
  border-left-color:var(--primary-2);
}

.popup-toast-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:4px;
  color:var(--text);
}

.popup-toast-message{
  font-size:13px;
  color:var(--text-soft);
  line-height:1.45;
}

.system-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.34);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:5100;
  padding:20px;
}

.system-modal-box{
  width:100%;
  max-width:460px;
  background:#fff;
  border:1px solid rgba(229,231,235,.95);
  border-radius:22px;
  padding:22px;
  box-shadow:var(--shadow-lg);
}

.system-modal-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:10px;
  color:var(--text);
}

.system-modal-message{
  font-size:14px;
  color:var(--text-soft);
  margin-bottom:16px;
  line-height:1.5;
}

.system-modal-input{
  width:100%;
  min-height:52px;
  border:1px solid #dbe2ea;
  border-radius:14px;
  padding:0 14px;
  margin-bottom:16px;
  font-size:14px;
  outline:none;
}

.system-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

@keyframes toastIn{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   HELPERS
   ========================================================= */
.text-success{ color:var(--success); }
.text-warning{ color:var(--warning); }
.text-danger{ color:var(--danger); }
.text-soft{ color:var(--text-soft); }
.text-muted{ color:var(--text-muted); }

.hidden{
  display:none !important;
}

/* =========================================================
   MULTI DROPDOWN
   ========================================================= */
.multi-dropdown{
  position:relative;
}

.multi-dropdown-toggle{
  width:100%;
  min-height:58px;
  border:1px solid #dbe2ea;
  border-radius:16px;
  padding:0 16px;
  background:#fff;
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:.16s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
}

.multi-dropdown-toggle:hover{
  border-color:#cbd5e1;
  background:#fff;
}

.multi-dropdown.open .multi-dropdown-toggle{
  border-color:#cbd5e1;
  box-shadow:0 0 0 4px rgba(37,99,235,.06);
}

.multi-dropdown-arrow{
  font-size:12px;
  color:var(--text-soft);
  flex-shrink:0;
}

.multi-dropdown-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:10px;
  z-index:2000;
  display:none;
}

.multi-dropdown.open .multi-dropdown-menu{
  display:block;
}

.multi-dropdown-actions{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid var(--border-soft);
}

.link-btn{
  border:none;
  background:transparent;
  padding:4px 6px;
  color:var(--primary-2);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.link-btn:hover{
  background:transparent;
  color:var(--primary-2-hover);
}

.multi-dropdown-options{
  max-height:220px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.multi-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  transition:.16s ease;
}

.multi-option:hover{
  background:#f8fafc;
}

.multi-option input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--primary-2);
  cursor:pointer;
}

.multi-option span{
  font-size:14px;
  color:var(--text);
}

/* =========================================================
   CÉLULA DE PREÇO / WHATSAPP
   ========================================================= */
.price-cell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:120px;
  white-space:nowrap;
}

.price-value{
  font-weight:800;
  color:var(--success);
  font-size:15px;
  text-decoration:none;
  white-space:nowrap;
}

.whatsapp-link{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ecfdf3;
  border:1px solid #d7f5e3;
  transition:.16s ease;
  text-decoration:none;
  flex-shrink:0;
}

.whatsapp-link:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
  background:#dcfce7;
}

.whatsapp-link svg{
  width:16px;
  height:16px;
  fill:#16a34a;
  display:block;
}

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */
@media (max-width:1100px){
  .topbar-content{
    flex-wrap:wrap;
    padding:12px 18px;
  }

  .logo,
  .user-area{
    min-width:auto;
  }

  .menu-center{
    order:3;
    width:100%;
    justify-content:flex-start;
  }

  .container{
    width:94vw;
    padding:22px;
  }

  .dashboard{
    width:94vw;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .dashboard.compact{
    width:94vw;
    max-width:none;
    min-width:0;
  }

  .catalog-layout{
    grid-template-columns:240px minmax(0, 1fr);
    gap:18px;
  }
}

@media (max-width:900px){
  .profile-grid{
    grid-template-columns:1fr;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .filters{
    grid-template-columns:1fr 1fr;
  }

  .search-box input{
    min-height:64px;
    font-size:20px;
  }

  th,td{
    padding:12px 10px;
    font-size:12px;
  }

  .stat-value{
    font-size:20px;
  }

  .filters-card-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .filters-sidebar-actions{
    width:100%;
  }

  .filters-sidebar-actions button,
  .filters-card-header button{
    width:100%;
  }

  .catalog-layout{
    grid-template-columns:1fr;
  }

  .filters-sidebar{
    position:static;
  }
}

@media (max-width:640px){
  .menu-center{
    gap:8px;
  }

  .menu-button{
    padding:10px 16px;
    font-size:14px;
  }

  .dashboard{
    width:94vw;
    grid-template-columns:1fr;
  }

  .dashboard.compact{
    width:94vw;
  }

  .container{
    width:94vw;
    padding:18px;
    border-radius:18px;
  }

  .filters{
    grid-template-columns:1fr;
  }

  .search-box input{
    min-height:56px;
    font-size:18px;
    border-radius:18px;
  }

  .status-bar{
    flex-direction:column;
    align-items:flex-start;
  }

  .user-area{
    width:100%;
    justify-content:space-between;
  }

  .dropdown{
    right:auto;
    left:0;
    width:240px;
  }

  .page-header h1{
    font-size:34px;
  }

  .modal-box{
    padding:18px;
    border-radius:18px;
  }

  .popup-toast-container{
    left:12px;
    right:12px;
    bottom:12px;
  }

  .popup-toast{
    min-width:auto;
    max-width:none;
    width:100%;
  }
}