/* =========================================
   BASE E RESET
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { background-color: #f4f7f6; color: #333; display: flex; min-height: 100vh; }

/* =========================================
   MENU LATERAL (SIDEBAR)
========================================= */
.sidebar {
  width: 260px; background: #ffffff; box-shadow: 2px 0 15px rgba(0,0,0,0.05);
  display: flex; flex-direction: column; padding: 20px 0; z-index: 100;
}
.sidebar-logo {
  padding: 0 20px 20px; border-bottom: 1px solid #eee; margin-bottom: 20px;
  font-size: 1.5rem; font-weight: bold; color: #1976d2; display: flex; align-items: center; gap: 10px;
}
.sidebar a {
  display: block; padding: 14px 20px; color: #555; text-decoration: none;
  font-weight: 500; transition: all 0.2s ease; border-left: 4px solid transparent;
}
.sidebar a:hover, .sidebar a.ativo {
  background: #f0f7ff; color: #1976d2; border-left-color: #1976d2;
}
.sidebar-footer { margin-top: auto; padding: 20px; border-top: 1px solid #eee; font-size: 0.9rem; }
.logout-btn {
  width: 100%; padding: 10px; margin-top: 10px; background: #ffebee; color: #d32f2f;
  border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s;
}
.logout-btn:hover { background: #ffcdd2; }

/* =========================================
   ÁREA PRINCIPAL E CARDS
========================================= */
.main-content { flex: 1; padding: 30px 40px; overflow-y: auto; overflow-x: hidden; }
h1 { color: #2c3e50; margin-bottom: 25px; font-size: 1.8rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 30px; }
.card {
  background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  border-left: 5px solid #1976d2; transition: transform 0.2s;
}
.card:hover { transform: translateY(-5px); }
.card h2 { font-size: 0.95rem; color: #7f8c8d; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.card .value { font-size: 2.2rem; color: #2c3e50; font-weight: bold; }
.card.green { border-left-color: #2ecc71; }
.card.orange { border-left-color: #f39c12; }
.card.purple { border-left-color: #9b59b6; }

/* =========================================
   TABELAS E BUSCAS
========================================= */
.topo-tabela { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; flex-wrap: wrap; }
.search-input {
  padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px;
  width: 100%; max-width: 400px; font-size: 0.95rem; transition: border 0.3s;
}
.search-input:focus { outline: none; border-color: #1976d2; box-shadow: 0 0 0 3px rgba(25,118,210,0.1); }
.table-container { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); overflow-x: auto; padding: 5px 20px 20px; }
table { width: 100%; border-collapse: collapse; min-width: 700px; margin-top: 10px; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #eee; font-size: 0.95rem; }
th { color: #7f8c8d; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
tr:hover { background: #f9fbfd; }

.acoes-btn { padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: bold; margin-right: 5px; transition: opacity 0.2s; }
.acoes-btn:hover { opacity: 0.8; }
.btn-new { background: #28a745; color: white; text-decoration: none; padding: 12px 20px; border-radius: 8px; font-weight: bold; display: inline-block; }
.btn-new:hover { background: #218838; }
.btn-os { background: #1976d2; color: white; }
.btn-delete { background: #dc3545; color: white; }
.btn-view { background: #17a2b8; color: white; }
.btn-edit { background: #ffc107; color: #333; }

/* =========================================
   FORMULÁRIOS
========================================= */
.form-card { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); margin-bottom: 25px; }
.form-card h3 { color: #1976d2; margin-bottom: 20px; font-size: 1.2rem; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { font-weight: bold; color: #555; margin-bottom: 8px; font-size: 0.9rem; }
.input-group input, .input-group select, .input-group textarea {
  padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; transition: border 0.3s;
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
  outline: none; border-color: #1976d2; box-shadow: 0 0 0 3px rgba(25,118,210,0.1);
}
.input-group.full { grid-column: 1 / -1; }
.btn-submit {
  background: #28a745; color: white; border: none; padding: 15px 30px; font-size: 1.1rem;
  font-weight: bold; border-radius: 8px; cursor: pointer; transition: background 0.3s; width: 100%; margin-top: 10px;
}
.btn-submit:hover { background: #218838; }
.btn-submit:disabled { background: #90caf9; cursor: not-allowed; }
.upload-box { border: 2px dashed #ccc; padding: 20px; border-radius: 8px; text-align: center; cursor: pointer; background: #fafafa; }
.upload-box:hover { border-color: #1976d2; background: #f0f7ff; }

/* =========================================
   MÁGICA: AJUSTES PARA CELULAR (SISTEMA ADMIN)
========================================= */
@media (max-width: 768px) {
  /* Transforma o layout para coluna vertical */
  body { flex-direction: column; }

  /* O Menu Lateral sobe e vira um cabeçalho */
  .sidebar {
    width: 100%; padding: 10px 15px; flex-direction: row; flex-wrap: wrap; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: relative;
  }
  .sidebar-logo {
    width: 100%; justify-content: center; padding: 0 0 10px 0;
    margin-bottom: 10px; border-bottom: 1px solid #eee;
  }

  /* Os botões do menu viram "pastas" curtas */
  .sidebar a {
    flex: 1 1 30%; /* 3 botões por linha */
    text-align: center; padding: 8px 5px; font-size: 0.8rem;
    border-left: none; border-bottom: 3px solid transparent;
    white-space: nowrap; margin: 2px;
  }
  .sidebar a:hover, .sidebar a.ativo {
    border-left-color: transparent; border-bottom-color: #1976d2; background: #f0f7ff;
  }

  /* Rodapé do menu (Olá, Técnico) */
  .sidebar-footer {
    width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;
    align-items: center; padding-top: 10px; border-top: 1px solid #eee; margin-top: 10px;
  }
  .logout-btn { margin-top: 10px; width: 100%; padding: 10px; }

  /* Área Principal e Cards */
  .main-content { padding: 15px; }
  h1 { font-size: 1.4rem; margin-bottom: 15px; text-align: center; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
  .card { padding: 15px; }
  .card .value { font-size: 1.6rem; }

  /* Barras de Busca e Botões no Topo da Tabela */
  .topo-tabela-os, .topo-tabela { flex-direction: column; align-items: stretch; gap: 10px; }
  .grupo-busca { max-width: 100%; flex-direction: column; }
  .search-input, .grupo-busca input, .grupo-busca select { width: 100%; max-width: 100%; height: auto; padding: 12px; }
  .btn-new { text-align: center; justify-content: center; }

  /* Ajustes da Tabela e Botões de Ação */
  .table-container { padding: 10px; border-radius: 8px; }
  th, td { padding: 10px; font-size: 0.85rem; }
  .acoes-btn { padding: 10px 8px; margin-bottom: 5px; display: inline-block; }

  /* Formulários e Wizard (Abertura de OS) */
  .form-card { padding: 15px; }
  .form-grid { grid-template-columns: 1fr; /* Força os campos para 1 coluna no celular */ }
  .wizard-steps { gap: 10px; flex-wrap: wrap; }
  .nav-buttons { flex-direction: column; gap: 10px; }
  .btn-prev, .btn-next, .btn-submit { width: 100%; margin: 0; text-align: center; }
}

/* Telas MUITO pequenas (ex: iPhone SE) */
@media (max-width: 480px) {
  .dashboard-grid { grid-template-columns: 1fr; /* Apenas 1 card por linha */ }
  .sidebar a { flex: 1 1 45%; /* 2 botões de menu por linha */ }
}

/* 🔥 CORREÇÃO ULTRA-RESPONSIVA PARA OS BOTÕES DE AÇÃO */
.grupo-acoes-tabela {
  display: flex;
  gap: 6px;
  flex-wrap: wrap; /* Permite que os botões quebrem a linha se não houver espaço */
  max-width: 180px; /* Limita a largura para a coluna não esticar a tabela */
}

.grupo-acoes-tabela .acoes-btn {
  flex: 1 1 calc(50% - 4px); /* Faz os botões ocuparem metade do espaço (2x2) em telas menores */
  text-align: center;
  margin: 0; /* Zera margens antigas que desalinhavam */
  padding: 6px 8px;
  font-size: 0.8rem;
}