:root {

       --azul-escuro: #2c3e50;
       --azul-primario: #3498db;
       --azul-hover: #2980b9;

       --bg: #f5f6fa;
       --surface: #ffffff;
       --surface2: #f8f9fa;

       --border: #e0e4ea;

       --text: #2c3e50;
       --text-muted: #7f8c8d;

       --verde: #4caf50;
       --laranja: #ff9800;
       --vermelho: #e74c3c;

       --radius: 12px;
       --radius-sm: 8px;



       --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
       --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

       --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

       --branco: #ffffff;
       --cinza-texto: #7f8c8d;

   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: var(--font);
       background: var(--bg);
       color: var(--text);
       min-height: 100vh;
   }

   .header {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }

   .header-info {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       text-align: left;
   }

   .btn-logout {
       margin-left: auto;
   }

   .btn-icon {
       width: 30px;
       height: 30px;
       padding: 0;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .acoes {
       display: flex;
       flex-direction: column;
       gap: 4px;
       align-items: center;
   }

   .container {
       display: flex;
       min-height: 100vh;
   }

   .sidebar {
       width: 250px;
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       color: white;
       display: flex;
       flex-direction: column;
       transition: left 0.3s ease;
       z-index: 1000;
   }

   .table-container {
       width: 100%;
       overflow-x: auto;

   }

   .sidebar {
       display: flex;
       flex-direction: column;
       height: 100vh;
       background: #0f172a;
       /* azul escuro moderno */
       color: #e2e8f0;
       border-right: 1px solid rgba(255, 255, 255, 0.05);
   }

   .menu-footer {
       margin-top: auto;
       padding: 16px;
       border-top: 1px solid rgba(255, 255, 255, 0.08);
   }

   /* Reaproveita o estilo do menu, mas com destaque sutil */
   .menu-footer .menu-item {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: 10px;
       text-decoration: none;
       color: #cbd5f5;
       transition: all 0.25s ease;
       font-size: 14px;
   }

   /* Hover elegante */
   .menu-footer .menu-item:hover {
       background: rgba(59, 130, 246, 0.15);
       color: #fff;
       transform: translateX(3px);
   }

   /* Ícone mais refinado */
   .menu-footer svg {
       width: 18px;
       height: 18px;
       opacity: 0.8;
   }

   /* Indicador de link externo */
   .menu-footer .menu-item span::after {
       content: " ↗";
       font-size: 12px;
       opacity: 0.6;
   }

   .assinaturas {
       display: flex;
       justify-content: space-around;
       gap: 40px;
       margin-top: 40px;
   }

   .table-container table {
       width: 100%;
       border-collapse: collapse;

   }

   .menu-icon-img {
       width: 20px;
       height: 20px;
       object-fit: contain;
       border-radius: 4px;
       /* suaviza se tiver fundo */
   }

   /* Garante alinhamento com os outros itens */
   .menu-item {
       display: flex;
       align-items: center;
       gap: 10px;
   }

   /* Header da Sidebar */
   .sidebar-header {
       padding: 20px;
       border-bottom: 1px solid #34495e;
       margin-bottom: 20px;
       position: relative;

       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;

   }

   /* Logo da Sidebar */
   .sidebar-header img {
       width: 80px;
       height: 80px;
       object-fit: contain;
       margin-bottom: 10px;

   }

   /* Título */
   .sidebar-header h2 {
       font-size: 18px;
       margin-bottom: 4px;
       font-weight: 600;

   }

   /* Subtítulo */
   .sidebar-header p {
       font-size: 12px;
       color: #95a5a6;
       line-height: 1.4;
   }


   #progressbar-global {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.35);
       z-index: 99999;
       display: flex;
       align-items: center;
       justify-content: center;
       pointer-events: all;
       backdrop-filter: blur(2px);
   }

   #progressbar-global.hidden {
       display: none;
   }

   #progress-spinner {
       width: 52px;
       height: 52px;
       border: 5px solid rgba(255, 255, 255, 0.2);
       border-top-color: #3498db;
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
       background: transparent;
   }

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

   .admin-only,
   .master-only {
       display: none;
   }

   .paginacao {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 12px;
       margin-top: 24px;
       padding: 12px 0;
   }

   .paginacao button {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 9px 20px;
       background: var(--azul-primario);
       color: white;
       border: none;
       border-radius: var(--radius-sm);
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.2s, transform 0.15s;
   }

   .paginacao button:hover {
       background: var(--azul-hover);
       transform: translateY(-1px);
   }

   .paginacao button:disabled {
       background: var(--border);
       color: var(--text-muted);
       cursor: not-allowed;
       transform: none;
   }

   #pagina-info {
       font-size: 13px;
       font-weight: 600;
       color: var(--text-muted);
       min-width: 70px;
       text-align: center;
   }

   .sidebar.oculto .sidebar-header {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 15px 0;
   }

   .sidebar.oculto .menu-item span {
       display: none;
   }


   .sidebar.oculto .menu-item {
       justify-content: center;
       padding: 0;
   }

   /* esconder logo e texto do header */
   .sidebar.oculto .sidebar-header img,
   .sidebar.oculto .sidebar-header h2,
   .sidebar.oculto .sidebar-header p {
       display: none;
   }


   /* manter apenas ícones */
   .sidebar.oculto .menu-item svg {
       margin: 0;
   }




   .menu-item {
       height: 55px;
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 0 20px;
       cursor: pointer;
   }

   .menu-item:hover {
       background: #34495e;
   }

   .menu-item.active {
       background: #3498db;
       border-left: 4px solid #2980b9;

   }

   .menu-item svg {
       width: 20px;
       height: 20px;
       flex-shrink: 0;
   }

   .os-bloco {
       border: 1px solid #000;
       padding: 12px;

       /* impede quebrar a OS */
       page-break-inside: avoid;
       break-inside: avoid;
   }

   .main-content {
       flex: 1;
       margin-left: 250px;
       padding: 30px;
       position: relative;
       z-index: 1;

   }

   .header {
       background: var(--branco);
       padding: 20px 30px;
       border-radius: 10px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       margin-bottom: 30px;
       border: 1px solid #e0e4ea;
   }

   .header h1 {
       font-size: 28px;
       color: var(--azul-escuro);

   }

   .header p {
       color: var(--cinza-texto);
       margin-top: 5px;
   }

   /* Dashboard Cards */
   .cards-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 20px;
       margin-bottom: 30px;

   }

   .card {
       background: white;
       padding: 25px;
       border-radius: 10px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       transition: transform 0.3s;
       border: 1px solid #e0e4ea;
   }

   .card:hover {
       transform: translateY(-5px);
   }

   .card-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 15px;

   }

   .card-title {
       font-size: 14px;
       color: #7f8c8d;
       text-transform: uppercase;
       font-weight: 600;

   }

   .card-icon {
       width: 40px;
       height: 40px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .card-value {
       font-size: 32px;
       font-weight: bold;
       color: #2c3e50;
   }

   .card-blue .card-icon {
       background: #e3f2fd;
       color: #2196f3;
   }

   .card-green .card-icon {
       background: #e8f5e9;
       color: #4caf50;
   }

   .card-orange .card-icon {
       background: #fff3e0;
       color: #ff9800;
   }

   .card-purple .card-icon {
       background: #f3e5f5;
       color: #9c27b0;
   }

   .table-container {
       background: white;
       border-radius: 10px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       overflow-x: auto;
       border: 1px solid #e0e4ea;
   }

   .table-header {
       padding: 20px 25px;
       border-bottom: 1px solid #ecf0f1;
   }

   .table-header h3 {
       font-size: 18px;
       color: #2c3e50;
   }



   #page-relatorios table {
       width: 100%;
   }

   #page-relatorios table {
       table-layout: fixed;
   }

   #page-relatorios th,
   #page-relatorios td {
       font-size: 13px;
       white-space: normal;
       word-break: break-word;
   }

   #page-relatorios td:nth-child(6) {
       max-width: 260px;
   }

   table {
       width: 100%;
       border-collapse: collapse;
       page-break-inside: avoid;
   }

   th,
   td {
       padding: 15px 25px;
       text-align: left;
   }

   th {
       background: #f8f9fa;
       color: #7f8c8d;
       font-weight: 600;
       font-size: 13px;
       text-transform: uppercase;
   }

   tr:hover {
       background: #f8f9fa;
   }




   .status-badge {
       padding: 5px 12px;
       border-radius: 20px;
       font-size: 12px;
       font-weight: 600;
   }

   .status-aberta {
       background: #e3f2fd;
       color: #2196f3;
   }

   .status-andamento {
       background: #fff3e0;
       color: #ff9800;
   }

   .status-encerrada {
       background: #e8f5e9;
       color: #4caf50;
   }

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

   .filter-group input {
       height: 38px;
   }

   /* Form Styles */
   .form-section {
       background: white;
       padding: 25px;
       border-radius: 10px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       margin-bottom: 20px;
   }

   .form-section h3 {
       margin-bottom: 20px;
       color: #2c3e50;
       padding-bottom: 10px;
       border-bottom: 2px solid #3498db;
   }

   .form-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 20px;
       margin-bottom: 20px;
   }

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

   .form-group label {
       margin-bottom: 8px;
       color: #2c3e50;
       font-weight: 600;
       font-size: 14px;
   }

   .form-group input,
   .form-group select,
   .form-group textarea {
       padding: 12px;
       border: 1px solid #ddd;
       border-radius: 5px;
       font-size: 14px;
       transition: border 0.3s;
   }

   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus {
       outline: none;
       border-color: var(--azul-primario);
   }

   .form-group textarea {
       resize: vertical;
       min-height: 100px;
   }

   .form-group input[readonly] {
       background: #f8f9fa;
       color: #7f8c8d;
   }

   .grid-duplo {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       grid-column: 1 / -1;
   }

   /* Material List */
   .material-list {
       border: 1px solid #ddd;
       border-radius: 5px;
       padding: 15px;
       margin-top: 10px;
   }

   .material-item {
       display: flex;
       justify-content: space-between;
       padding: 10px;
       border-bottom: 1px solid #ecf0f1;
       align-items: center;
   }

   .material-item:last-child {
       border-bottom: none;
   }

   .material-info {
       flex: 1;
   }

   .material-info strong {
       color: #2c3e50;
   }

   .material-info small {
       color: #7f8c8d;
       display: block;
       margin-top: 3px;
   }

   /* Buttons */
   .btn {
       padding: 12px 24px;
       border: none;
       border-radius: 5px;
       font-size: 14px;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s;
       display: inline-flex;
       align-items: center;
       gap: 8px;
   }

   .btn-primary {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       padding: 9px 20px;
       background: var(--azul-primario);
       color: white;
       border: none;
       border-radius: var(--radius-sm);
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.2s, transform 0.15s;
   }

   .btn-primary:hover {
       background: var(--azul-hover);
       transform: translateY(-1px);
   }

   .btn-primary:disabled {
       background: var(--border);
       color: var(--text-muted);
       cursor: not-allowed;
       transform: none;
   }

   .btn-success {
       background: #4caf50;
       color: white;
   }

   .btn-success:hover {
       background: #45a049;
   }

   .btn-danger {
       background: #e74c3c;
       color: white;
   }

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

   .btn-secondary {
       background: #95a5a6;
       color: white;
   }

   .btn-secondary:hover {
       background: #7f8c8d;
   }

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

   .button-group {
       display: flex;
       gap: 10px;
       margin-top: 20px;
   }

   /* Filter Section */
   .filter-section {
       background: white;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
       margin-bottom: 20px;
   }

   .filter-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 15px;
       align-items: end;
   }

   /* Empty State */
   .empty-state {
       text-align: center;
       padding: 60px 20px;
       color: #7f8c8d;
   }

   .empty-state svg {
       width: 100px;
       height: 100px;
       margin-bottom: 20px;
       opacity: 0.3;
   }

   /* Hidden */
   .hidden {
       display: none !important;
   }

   .sugestao-container {
       position: relative;
       z-index: 1000;
   }

   .form-group {
       position: relative;
   }

   .sugestoes-box {
       position: absolute;
       top: calc(100% + 4px);
       /* 👈 pequeno espaçamento */
       left: 0;
       width: 100%;

       background: #fff;
       border: 1px solid #ddd;
       border-radius: 8px;

       z-index: 999999;

       max-height: 220px;
       overflow-y: auto;

       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
       /* 🔥 PROFISSIONAL */
   }

   @media(max-width:600px) {

       .material-item {
           flex-direction: column;
           align-items: flex-start;
           gap: 8px;
       }

   }

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



   /* 🔥 OCULTAR AÇÕES NA IMPRESSÃO */
   @media print {

       /* Esconde coluna AÇÕES (cabeçalho) */
       th:last-child {
           display: none !important;
       }

       /* Esconde coluna AÇÕES (conteúdo) */
       td:last-child {
           display: none !important;
       }

       /* Opcional: esconder botões de filtro */
       .filter-section {
           display: none !important;
       }

       /* Opcional: esconder menu lateral */
       .sidebar,
       .overlay,
       .menu-item,
       .topbar {
           display: none !important;
       }

       body {
           margin: 0;
       }
   }

   /* ===== MODAL PADRÃO ===== */

   .modal {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.5);
       z-index: 3000;
       align-items: center;
       justify-content: center;
   }

   .modal.show {
       display: flex;
   }

   .modal-content {
       background: white;
       border-radius: 10px;
       padding: 30px;
       max-width: 600px;
       width: 90%;
       max-height: 90vh;
       overflow-y: auto;
   }

   .modal-header {
       margin-bottom: 20px;
       padding-bottom: 15px;
       border-bottom: 2px solid #ecf0f1;
   }

   .modal-header h2 {
       color: #2c3e50;
   }

   .detail-row {
       padding: 12px 0;
       border-bottom: 1px solid #ecf0f1;
   }

   .detail-row:last-child {
       border-bottom: none;
   }

   .detail-label {
       font-weight: 600;
       color: #7f8c8d;
       font-size: 12px;
       text-transform: uppercase;
       margin-bottom: 5px;
   }

   .detail-value {
       color: #2c3e50;
       font-size: 14px;
   }

   @media (max-width:768px) {

       .header {
           display: flex;
           flex-direction: column;
           gap: 10px;
           padding: 15px;
       }

       .header-info {
           width: 100%;
       }

       .btn-logout {
           align-self: flex-end;
       }

   }


   /* Responsive */


   /* Print Styles */
   @media print {

       .sidebar,
       .btn,
       .filter-section {
           display: none;
       }

       .main-content {
           margin-left: 0;
       }
   }


   /* =========================
   LOGIN – SISTEMA OS
========================= */

   .login-body {
       min-height: 100vh;
       background: #0f172a;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .login-container {
       background: #ffffff;
       width: 100%;
       max-width: 420px;
       border-radius: 12px;
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
       overflow: hidden;
   }

   /* Cabeçalho */
   .login-header {
       text-align: center;
       padding: 30px 25px 20px;
       background: #f8f9fa;
       border-bottom: 1px solid #e0e0e0;
   }

   .login-photo {
       width: 120px;
       height: auto;
       object-fit: contain;
       border: none;
       /* remove o contorno azul */
       border-radius: 0;
       /* remove formato circular */
       margin-bottom: 15px;
   }

   .login-header h2 {
       font-size: 20px;
       color: #2c3e50;
       margin-bottom: 5px;
   }

   .login-header p {
       font-size: 13px;
       color: #7f8c8d;
       margin-bottom: 5px;
   }

   .login-header span {
       font-size: 12px;
       color: #95a5a6;
   }

   /* Formulário */
   .login-form {
       padding: 25px;
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .login-form input {
       padding: 12px 14px;
       border: 1px solid #dcdde1;
       border-radius: 6px;
       font-size: 14px;
   }

   .login-form input:focus {
       outline: none;
       border-color: #3498db;
   }

   .login-form button {
       padding: 12px;
       background: var(--azul-primario);
       border: none;
       border-radius: 6px;
       color: white;
       font-size: 15px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.3s;
   }

   .login-form button:hover {
       background: #2980b9;
   }

   /* Rodapé */
   .login-footer {
       text-align: center;
       padding: 15px;
       background: #f8f9fa;
       border-top: 1px solid #e0e0e0;
       font-size: 12px;
       color: #7f8c8d;
   }


   /* ===== LOADING LOGIN ===== */

   .progress-container {
       width: 100%;
       height: 6px;
       background: #ecf0f1;
       border-radius: 4px;
       overflow: hidden;
       margin-bottom: 10px;
       display: none;
   }

   .progress-bar {
       height: 100%;
       width: 0%;
       background: linear-gradient(90deg, #3498db, #2ecc71);
       animation: loading 1.2s infinite;
   }

   @keyframes loading {
       0% {
           width: 0%;
       }

       50% {
           width: 70%;
       }

       100% {
           width: 100%;
       }
   }


   /* ===== ERRO LOGIN ===== */

   .input-group {
       display: flex;
       flex-direction: column;
   }

   .password-wrapper {
       position: relative;
       display: flex;
       align-items: center;
   }

   .password-wrapper input {
       width: 100%;
       padding-right: 42px;
   }

   .login-form .toggle-senha {
       position: absolute;
       right: 10px;
       background: none !important;
       border: none !important;
       outline: none !important;
       box-shadow: none !important;
       cursor: pointer;
       color: #888;
       font-size: 16px;
       padding: 0;
       line-height: 1;
       width: auto;
       border-radius: 0;
   }

   .login-form .toggle-senha:hover { color: #333; }
   .login-form .toggle-senha:focus { outline: none; box-shadow: none; }

   .error-msg {
       display: none;
       font-size: 12px;
       color: #e74c3c;
       margin-top: 4px;
   }

   .input-error {
       border-color: #e74c3c !important;
   }

   /* FOOTER */


   .main-content {
       padding-bottom: 60px;
       overflow-x: hidden;
   }

   /* =========================
   TOPBAR MOBILE
========================= */
   .topbar {
       display: none;
   }


   .menu-toggle {
       display: flex;
       align-items: center;
       justify-content: flex-start;

       width: 100%;
       height: 55px;

       padding: 0 20px;

       background: none;
       border: none;
       color: white;

       font-size: 22px;
       cursor: pointer;
   }

   .sidebar.oculto .menu-toggle {
       justify-content: center;
       padding: 0;
   }

   .topbar {
       display: none;
   }


   /* ===== FOOTER ===== */
   .app-footer {
       position: fixed;
       bottom: 0;
       left: 250px;
       /* empurra pra fora da sidebar */
       right: 0;
       height: 40px;

       background: #ffffff;
       border-top: 1px solid #ecf0f1;

       display: flex;
       align-items: center;
       justify-content: space-between;

       padding: 0 20px;
       font-size: 12px;
       color: #7f8c8d;

       z-index: 900;
       /* 🔥 MENOR que a sidebar */
   }




   .header-global {
       display: flex;
       align-items: flex-start;
       gap: 15px;
       flex-wrap: wrap;
   }

   /* 🔹 Container dos detalhes da OS */
   #detalhes-content {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   /* 🔹 Cada linha */
   .detail-row {
       display: flex;
       flex-direction: column;
       /* 👈 FORÇA VERTICAL */
       padding: 8px 0;
       border-bottom: 1px solid #e0e0e0;
   }

   /* 🔹 Título do campo */
   .detail-label {
       font-weight: 600;
       font-size: 13px;
       color: #555;
       margin-bottom: 4px;
   }

   /* 🔹 Valor do campo */
   .detail-value {
       font-size: 15px;
       color: #111;
   }

   /* 🔹 Materiais listados um abaixo do outro */
   #materiais-detalhe div {
       margin-bottom: 4px;
   }

   /* 🔹 Botão de exportar materiais alinhado à esquerda */
   .detail-row button {
       align-self: flex-start;
   }

   .user-card {
       background: #fff;
       border-radius: 10px;
       padding: 20px;
       margin-bottom: 15px;
       box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
       transition: 0.2s;
   }

   .user-card:hover {
       transform: translateY(-3px);
   }

   .user-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .user-header h4 {
       margin: 0;
   }

   .badge {
       padding: 4px 10px;
       border-radius: 20px;
       font-size: 12px;
       color: white;
   }

   .badge-admin {
       background: #1e40af;
   }

   .badge-user {
       background: #059669;
   }

   .status-ativo {
       color: #059669;
       font-weight: bold;
   }

   .status-inativo {
       color: #dc2626;
       font-weight: bold;
   }

   .user-info {
       margin-top: 10px;
       font-size: 14px;
   }

   .user-actions {
       margin-top: 15px;
       display: flex;
       gap: 10px;
   }

   .btn-edit,
   .btn-warning,
   .btn-delete {
       padding: 6px 12px;
       border: none;
       border-radius: 6px;
       cursor: pointer;
       font-size: 13px;
   }

   .btn-edit {
       background: #2563eb;
       color: white;
   }

   .btn-warning {
       background: #f59e0b;
       color: white;
   }

   .btn-delete {
       background: #dc2626;
       color: white;
   }


   .sidebar.oculto {
       width: 70px;
   }

   .main-content.expandido {
       margin-left: 70px;
   }

   .modal-content h3 {
       margin-top: 0;
   }

   .modal-buttons {
       margin-top: 20px;
       display: flex;
       justify-content: space-between;
   }

   .modal {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.45);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
   }

   .modal.hidden {
       display: none;
   }

   .modal-box {
       background: #fff;
       width: 400px;
       max-width: 95%;
       border-radius: 8px;
       padding: 25px;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
       animation: fadeIn 0.2s ease;
   }

   .modal-box h3 {
       margin-bottom: 15px;
   }

   .modal-actions {
       margin-top: 20px;
       display: flex;
       justify-content: flex-end;
       gap: 10px;
   }

   @keyframes fadeIn {
       from {
           transform: scale(0.95);
           opacity: 0;
       }

       to {
           transform: scale(1);
           opacity: 1;
       }
   }

   .charts-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 20px;
       margin-top: 10px;
   }

   .chart-box {
       background: #fff;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
       display: flex;
       flex-direction: column;
       align-items: flex-start;
   }

   .chart-box h3 {
       margin-bottom: 15px;
       font-size: 16px;
   }

   .chart-box canvas {
       height: 280px !important;
   }

   .chart-box canvas {
       width: 100% !important;
       max-width: 100%;
   }

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

   #grafico-status {
       width: 100% !important;
       max-width: 240px;
       margin: auto;
       display: block;
   }

   .chart-box:has(#grafico-status) {
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   /* Botões menores no modal de detalhes */
   #modal-detalhes .button-group .btn {
       padding: 6px 12px;
       font-size: 13px;
   }

   #modal-detalhes .button-group {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       justify-content: center;
   }

   /* ═══════════════════════════════
CELULAR PEQUENO
═══════════════════════════════ */



   @media (max-width:480px) {

       .main-content {
           padding: 12px;
       }

       /* header */

       .header h1 {
           font-size: 18px;
       }

       /* cards */

       .card {
           padding: 18px;
       }

       .card-value {
           font-size: 24px;
       }

       /* botões */

       .btn {
           font-size: 13px;
           padding: 10px;
       }

       /* login */

       .login-container {
           margin: 15px;
       }

       .login-photo {
           width: 60px;
       }

   }


   /* =========================
MOBILE PRINCIPAL
========================= */

   @media (max-width:768px) {

       /* esconder sidebar padrão */
       .sidebar {
           left: -260px;
       }

       /* abrir sidebar */
       .sidebar.open {
           left: 0;
       }

       /* conteúdo ocupa tela toda */
       .main-content {
           margin-left: 0;
           padding: 15px;
           padding-top: 70px;
       }

       .header {
           display: flex;
           align-items: flex-start;
           gap: 15px;
           flex-wrap: wrap;
       }

       .btn-logout {
           margin-left: auto;
       }



       /* cards */
       .cards-grid {
           grid-template-columns: 1fr;
       }

       /* formulários */
       .form-grid {
           grid-template-columns: 1fr;
       }

       /* filtros */
       .filter-grid {
           grid-template-columns: 1fr;
       }

       /* botões */
       .button-group {
           flex-direction: column;
       }

       .btn {
           width: 100%;
           justify-content: center;
       }

       .table-container {
           overflow-x: auto;
           -webkit-overflow-scrolling: touch;
       }

       table {
           min-width: 650px;
       }

       /* gráficos */
       .charts-grid {
           grid-template-columns: 1fr;
       }

       /* modal */
       .modal-content {
           width: 95%;
           padding: 20px;
       }

   }


   @media(max-width:768px) {

       .container {
           display: block;
       }

       .main-content {
           margin-left: 0;
           width: 100%;
       }

       .container {
           display: block;
           width: 100%;
       }

   }

   @media(max-width:768px) {

       .chart-box {
           width: 100%;
       }

       .chart-box canvas {
           height: 220px !important;
       }

   }

   @media (max-width: 768px) {

       .app-footer {
           position: relative;
           /* 🔥 ESSENCIAL */
           left: 0;
           right: 0;
           bottom: auto;

           flex-direction: column;
           gap: 6px;
           text-align: center;
           padding: 14px 16px;
           font-size: 11px;
       }

       .main-content {
           padding-bottom: 20px;
           /* normal */
       }
   }


   @media(max-width:768px) {

       .modal-buttons {
           flex-direction: column;
           gap: 10px;
       }

       .modal-buttons .btn {
           width: 100%;
       }

   }

   @media(max-width:768px) {

       .topbar {
           display: flex;
           align-items: center;
           justify-content: flex-start;
           gap: 12px;
           padding: 12px 15px;
           background: #2c3e50;
           color: white;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           z-index: 2000;
       }


       .topbar-title {
           font-size: 15px;
           font-weight: 600;
           margin-left: 5px;
       }

       .menu-toggle {
           background: none;
           border: none;
           font-size: 22px;
           color: white;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 0;
           width: auto;
           height: auto;
       }

       .topbar-title {
           font-size: 15px;
           font-weight: 600;
       }

       /* Sidebar vira gaveta */
       .sidebar {
           position: fixed;
           top: 0;
           left: -260px;
           width: 250px;
           height: 100vh;
           transition: left 0.3s ease;
           z-index: 3000;
       }

       .sidebar.open {
           left: 0;
       }

       /* Conteúdo desce por causa do topo */
       .main-content {
           margin-left: 0;
           padding-top: 70px;
       }

       /* Fundo escuro ao abrir menu */
       .overlay {
           display: none;
           position: fixed;
           inset: 0;
           background: rgba(0, 0, 0, 0.4);
           z-index: 2500;
       }

       .overlay.show {
           display: block;
       }
   }