:root {
  --primary-color: #2a7de1;
  --secondary-color: #50e3c2;
  --background-color: #f0f2f5;
  --surface-color: #ffffff;
  --text-color: #333333;
  --light-gray: #e0e0e0;
  --dark-gray: #777777;
  --danger-color: #f44336;
  --success-color: #4caf50;
  --font-family: 'Roboto', sans-serif;
  --box-shadow: 0 2px 8px rgba(0,0,0,0.09);
  --border-radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family);
  background-color: #e9ebee;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  max-width: 450px;
  margin: 0 auto;
  background-color: var(--background-color);
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* --- Login & Loading --- */
.login-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 2rem; text-align: center; }
.login-box { background: var(--surface-color); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); max-width: 350px; }
.login-box h1 { color: var(--primary-color); margin-top: 0; }
.login-box p { color: var(--dark-gray); margin-bottom: 2rem; }
.google-login-btn { display: flex; align-items: center; justify-content: center; gap: 1rem; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--light-gray); border-radius: 8px; background-color: #fff; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.google-login-btn:hover { background-color: #f7f7f7; }
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; color: white; }
.spinner { border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 4px solid #fff; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 1rem; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Layout Principal --- */
.header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background-color: var(--primary-color); color: white; box-shadow: var(--box-shadow); z-index: 10; flex-shrink: 0; }
.header h1 { margin: 0; font-size: 1.1rem; font-weight: 500; flex-grow: 1; text-align: center; }
.header-icons { display: flex; align-items: center; gap: 1rem; }
.header-icons svg { width: 24px; height: 24px; cursor: pointer; }
.signout-btn { background: none; border: 1px solid white; color: white; padding: 0.3rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; }
.back-button { background: none; border: none; color: white; cursor: pointer; padding: 0.5rem; margin: -0.5rem 0 -0.5rem -0.5rem; }
.back-button svg { width: 24px; height: 24px; }
.header-placeholder { width: 24px; }
.main-content { flex-grow: 1; overflow-y: auto; }
.page { padding: 1rem; display: flex; flex-direction: column; flex-grow: 1; }
.dashboard-page { padding: 0.75rem; gap: 0.75rem; }

/* --- Dashboard Card --- */
.dashboard-card { background: var(--surface-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); display: flex; flex-direction: column;}
.dashboard-content { display: flex; justify-content: space-around; padding: 1rem; gap: 1.5rem; }
.chart-container { flex: 1; text-align: center; }
.chart-container h4 { margin: 0 0 0.75rem 0; font-size: 0.8rem; font-weight: 500; color: var(--dark-gray); }
.chart { height: 80px; margin: 0 auto; }
.bar-chart { display: flex; justify-content: center; align-items: flex-end; gap: 0.5rem; border-bottom: 2px solid var(--light-gray); height: 90px; }
.bar-wrapper { display: flex; flex-direction: column; align-items: center; flex: 1;}
.bar { width: 80%; max-width: 25px; background-color: var(--primary-color); border-radius: 4px 4px 0 0; cursor: pointer; transition: opacity 0.2s; }
.bar:hover { opacity: 0.8; }
.pie-chart { width: 80px; height: 80px; border-radius: 50%; position: relative;}
.pie-chart circle { cursor: pointer; transition: opacity 0.2s; }
.pie-chart circle:hover { opacity: 0.8; }
.chart-label { font-size: 0.7rem; color: var(--dark-gray); margin-top: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.chart-legend { font-size: 0.8rem; color: var(--dark-gray); margin-top: 0.75rem; display: flex; justify-content: center; gap: 1rem; align-items: center; }
.legend-item { display: flex; align-items: center; gap: 0.3rem; }
.legend-color { width: 12px; height: 12px; border-radius: 50%; }
.dashboard-footer { text-align: right; padding: 0.25rem 0.75rem; border-top: 1px solid #f0f0f0;}
.dashboard-footer button { background: none; border: none; color: var(--primary-color); font-size: 0.8rem; cursor: pointer; padding: 0.5rem; }

/* --- Filtros --- */
.filter-container { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem; background-color: var(--surface-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); }
.filter-top-row { display: flex; gap: 0.5rem; align-items: center; }
.search-input-wrapper { flex-grow: 1; position: relative; }
.search-input-wrapper svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--dark-gray); width: 20px; height: 20px; }
.search-input { width: 100%; padding: 0.6rem 0.6rem 0.6rem 2.25rem; border: 1px solid var(--light-gray); border-radius: 8px; font-size: 0.9rem; background-color: #f7f7f7; }
.btn-secondary { background-color: var(--dark-gray); color: white; padding: 0.6rem 1rem; border: none; border-radius: 8px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.filter-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--dark-gray); }
.pill { padding: 0.3rem 0.8rem; border: 1px solid var(--light-gray); background: var(--surface-color); border-radius: 20px; font-size: 0.75rem; cursor: pointer; }
.pill.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

/* --- Lista de Estoque --- */
.section-header { display: flex; justify-content: space-between; align-items: center; margin: 0.5rem 0.25rem 0; }
.section-title { font-size: 0.8rem; color: var(--dark-gray); font-weight: 700; text-transform: uppercase; margin: 0; }
.export-btn { background: none; border: 1px solid var(--dark-gray); color: var(--dark-gray); border-radius: 20px; padding: 0.3rem 0.8rem; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; }
.export-btn svg { width: 14px; height: 14px; }
.stock-item-card { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 1rem; align-items: center; background: var(--surface-color); padding: 0.75rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-top: 0.75rem; grid-template-areas: "icon info qty" "icon details actions"; }
.item-icon { grid-area: icon; color: var(--dark-gray); }
.item-icon svg { width: 28px; height: 28px; }
.item-info { grid-area: info; }
.item-info .item-name { font-weight: 500; }
.item-info .item-sub-info { font-size: 0.8rem; color: var(--dark-gray); }
.item-details { grid-area: details; font-size: 0.75rem; color: var(--dark-gray); }
.item-details .item-category { font-weight: 700; }
.item-details .item-status.low-stock { color: var(--danger-color); font-weight: 700; }
.item-qty { grid-area: qty; text-align: center; }
.item-qty .qty-label { font-weight: 700; font-size: 1.2rem; }
.item-qty .qty-sub-label { font-size: 0.7rem; color: var(--dark-gray); }
.item-actions { grid-area: actions; }
.stock-item-card.editing { grid-template-areas: "form form form"; padding: 1rem; }
.edit-stock-form { width: 100%; display: flex; flex-direction: column; gap: 1rem; }
.edit-form-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; align-items: center; }
.edit-form-grid label { font-weight: 500; font-size: 0.9rem; text-align: right; }
.edit-form-grid input, .edit-form-grid select { width: 100%; padding: 0.5rem; border: 1px solid var(--light-gray); border-radius: 8px; font-size: 0.9rem; font-family: var(--font-family); background-color: #f7f7f7; }
.edit-stock-form .button-group { justify-content: flex-end; margin-top: 0.5rem; }

/* --- Botões de Ação Principais --- */
.action-buttons-container { display: flex; gap: 0.75rem; margin: 1rem 0 0.5rem 0; }
.action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem; border: none; border-radius: var(--border-radius); background: var(--primary-color); color: white; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: var(--box-shadow); }
.action-btn svg { width: 20px; height: 20px; }
.footer { text-align: center; font-size: 0.8rem; color: var(--dark-gray); padding: 0.5rem; }

/* --- Estilos Genéricos para Páginas Internas --- */
.page h2, .page h3 { margin-top: 0; color: var(--primary-color); text-align: center; margin-bottom: 1rem; font-weight: 500; }
.btn { width: 100%; padding: 0.85rem 1rem; border: none; border-radius: var(--border-radius); font-size: 1rem; font-weight: 700; cursor: pointer; text-align: center; background-color: var(--primary-color); color: white; }
.form-container { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; padding: 1rem; background-color: var(--surface-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); }
.form-description { font-size: 0.9rem; color: var(--dark-gray); margin: -0.5rem 0 1rem 0; text-align: center; }
.form-group { display: flex; flex-direction: column; }
.form-group label { margin-bottom: 0.25rem; font-weight: 500; font-size: 0.9rem; }
.form-container input, .form-container select { width: 100%; padding: 0.75rem; border: 1px solid var(--light-gray); border-radius: var(--border-radius); font-size: 1rem; font-family: var(--font-family); background-color: var(--background-color); }
.simple-form { flex-direction: row; align-items: center; }
.simple-form input { flex-grow: 1; }
.simple-form button { flex-grow: 0; width: auto; margin-left: 0.5rem; white-space: nowrap; }
.history-list { list-style: none; padding: 0; margin: 0; }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; gap: 0.5rem; margin-bottom: 0.75rem; background-color: var(--surface-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); }
.history-item > div:first-child:not(.button-group) { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.history-item > div:first-child strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item small { color: var(--dark-gray); font-size: 0.8rem; }
.button-group { display: flex; gap: 0.5rem; margin-left: auto; flex-shrink: 0; }
.btn-edit, .btn-delete { background-color: transparent; border: 1px solid; padding: 0.3rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
.btn-edit { border-color: var(--primary-color); color: var(--primary-color); }
.btn-delete { border-color: var(--danger-color); color: var(--danger-color); }
.btn-delete.cancel-btn { border-color: var(--dark-gray); color: var(--dark-gray); }
.inline-edit-form { display: flex; width: 100%; gap: 0.5rem; align-items: center; }
.inline-edit-form input { flex-grow: 1; padding: 0.5rem; border: 1px solid var(--light-gray); border-radius: 8px; font-size: 1rem; }
.list-empty { padding: 2rem; text-align: center; color: var(--dark-gray); }