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

 :root {
     /* Mantenha suas cores aqui */
     --primary: #294788;
     --bg: #F0F0F0;

     --white: #ffffff;
     --border: #e8eaf0;
     --text: #1a1d2e;
     --muted: #7c8099;
     --accent: #2563eb;
     --accent-light: #eff4ff;
     --danger: #ef4444;
     --danger-light: #fef2f2;
     --success: #22c55e;
     --success-light: #f0fdf4;
     --pending: #f59e0b;
     --pending-light: #fffbeb;
     --radius: 10px;
     --shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.04);
 }

 body {
     font-family: 'Segoe UI', sans-serif;
     margin: 0;
     padding: 0;
     background: var(--bg);
     color: var(--text);
     /* ADICIONE ESTAS DUAS LINHAS: */
     min-height: 100vh;
     overflow-y: auto !important;
 }

 /* ---- LAYOUT ---- */
 .page {
     max-width: 1100px;
     margin: 0 auto;
     padding: 32px 24px;
 }

 /* ---- HEADER ---- */
 .page-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
 }

 .page-header h1 {
     font-size: 22px;
     font-weight: 600;
 }

 .header-actions {
     display: flex;
     gap: 10px;
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 16px;
     border-radius: var(--radius);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     border: none;
     transition: all .15s;
 }

 .btn-primary {
     background: var(--accent);
     color: #fff;
 }

 .btn-primary:hover {
     background: #1d4ed8;
 }

 .btn-secondary {
     background: var(--white);
     color: var(--text);
     border: 1px solid var(--border);
 }

 .btn-secondary:hover {
     background: var(--bg);
 }

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

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

 .btn-ghost {
     background: transparent;
     color: var(--muted);
     border: none;
     padding: 6px 8px;
 }

 .btn-ghost:hover {
     color: var(--text);
     background: var(--bg);
 }

 /* ---- TABS ---- */
 .tabs {
     display: flex;
     gap: 4px;
     margin-bottom: 18px;
     border-bottom: 1px solid var(--border);
 }

 .tab {
     padding: 8px 14px;
     font-size: 13px;
     font-weight: 500;
     color: var(--muted);
     cursor: pointer;
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
     transition: all .15s;
 }

 .tab.active {
     color: var(--accent);
     border-bottom-color: var(--accent);
 }

 .tab:hover:not(.active) {
     color: var(--text);
 }

 /* ---- TOOLBAR ---- */
 .toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
     gap: 10px;
 }

 .toolbar-left {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .toolbar-right {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .search-wrap {
     position: relative;
 }

 .search-wrap input {
     padding: 7px 12px 7px 34px;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     background: var(--white);
     color: var(--text);
     width: 220px;
     outline: none;
     transition: border .15s;
 }

 .search-wrap input:focus {
     border-color: var(--accent);
 }

 .search-wrap svg {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     color: var(--muted);
     pointer-events: none;
 }

 .filter-select {
     padding: 7px 30px 7px 12px;
     border: 1px solid var(--border);
     border-radius: var(--radius);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8099' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
     appearance: none;
     color: var(--text);
     outline: none;
     cursor: pointer;
 }

 /* ---- TABLE ---- */
 .card {
     background: var(--white);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     overflow: hidden;
 }

 table {
     width: 100%;
     border-collapse: collapse;
 }

 thead th {
     padding: 11px 16px;
     text-align: left;
     font-size: 12px;
     font-weight: 600;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .04em;
     border-bottom: 1px solid var(--border);
     background: #fafbfc;
 }

 tbody tr {
     border-bottom: 1px solid var(--border);
     transition: background .12s;
 }

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

 tbody tr:hover {
     background: #fafbff;
     cursor: pointer;
 }

 td {
     padding: 12px 16px;
     vertical-align: middle;
 }

 .checkbox-col {
     width: 36px;
 }

 input[type=checkbox] {
     accent-color: var(--accent);
     width: 15px;
     height: 15px;
     cursor: pointer;
 }

 .avatar {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 13px;
     color: #fff;
     flex-shrink: 0;
 }

 .customer-cell {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .customer-name {
     font-weight: 500;
     font-size: 13px;
 }

 .badge {
     display: inline-flex;
     align-items: center;
     padding: 3px 8px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 600;
 }

 .badge-success {
     background: var(--success-light);
     color: #16a34a;
 }

 .badge-pending {
     background: var(--pending-light);
     color: #b45309;
 }

 .badge-danger {
     background: var(--danger-light);
     color: #dc2626;
 }

 .icon-btn {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--muted);
     padding: 4px;
     border-radius: 6px;
     transition: all .12s;
     display: inline-flex;
 }

 .icon-btn:hover {
     color: var(--text);
     background: var(--bg);
 }

 .icon-btn.danger:hover {
     color: var(--danger);
     background: var(--danger-light);
 }

 /* ---- PAGINATION ---- */
 .pagination {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 16px;
     border-top: 1px solid var(--border);
 }

 .page-info {
     font-size: 12px;
     color: var(--muted);
 }

 .page-btns {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .page-btn {
     width: 30px;
     height: 30px;
     border-radius: 7px;
     border: 1px solid var(--border);
     background: var(--white);
     color: var(--text);
     font-size: 12px;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all .12s;
     font-family: 'DM Sans', sans-serif;
 }

 .page-btn.active {
     background: var(--accent);
     color: #fff;
     border-color: var(--accent);
 }

 .page-btn:hover:not(.active) {
     background: var(--bg);
 }

 .page-btn:disabled {
     opacity: .4;
     cursor: not-allowed;
 }

 /* ---- MODAL OVERLAY ---- */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(15, 20, 40, .45);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 100;
     backdrop-filter: blur(2px);
     animation: fadeIn .15s ease;
 }

 .modal-overlay.open {
     display: flex;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .modal {
     background: var(--white);
     border-radius: 14px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
     width: 100%;
     max-width: 640px;
     max-height: 90vh;
     overflow-y: auto;
     animation: slideUp .2s ease;
 }

 @keyframes slideUp {
     from {
         transform: translateY(16px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 24px 0;
 }

 .modal-header h2 {
     font-size: 17px;
     font-weight: 600;
 }

 .modal-close {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--muted);
     padding: 4px;
     border-radius: 6px;
 }

 .modal-close:hover {
     color: var(--text);
     background: var(--bg);
 }

 .modal-body {
     padding: 20px 24px 24px;
 }

 .section-title {
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 4px;
 }

 .section-sub {
     font-size: 12px;
     color: var(--muted);
     margin-bottom: 14px;
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin-bottom: 20px;
 }

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

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

 .form-group label {
     font-size: 12px;
     font-weight: 500;
     color: var(--muted);
 }

 .form-group input,
 .form-group select,
 .form-group textarea {
     padding: 8px 12px;
     border: 1px solid var(--border);
     border-radius: 8px;
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     color: var(--text);
     outline: none;
     transition: border .15s;
     background: var(--white);
 }

 .form-group input:focus,
 .form-group select:focus,
 .form-group textarea:focus {
     border-color: var(--accent);
 }

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

 .divider {
     border: none;
     border-top: 1px solid var(--border);
     margin: 20px 0;
 }

 .modal-footer {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     padding: 16px 24px;
     border-top: 1px solid var(--border);
 }

 /* ---- DETAIL VIEW ---- */
 .detail-layout {
     display: grid;
     grid-template-columns: 1fr 260px;
     gap: 20px;
 }

 .detail-card {
     background: var(--white);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     padding: 20px;
     margin-bottom: 16px;
 }

 .customer-hero {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
 }

 .customer-hero-left {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .avatar-lg {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     font-weight: 700;
     color: #fff;
 }

 .customer-meta h3 {
     font-size: 16px;
     font-weight: 600;
 }

 .customer-meta p {
     font-size: 12px;
     color: var(--muted);
     margin-top: 2px;
 }

 .stars {
     color: #f59e0b;
     font-size: 16px;
     letter-spacing: 1px;
 }

 .orders-table {
     width: 100%;
     border-collapse: collapse;
 }

 .orders-table th {
     padding: 8px 12px;
     text-align: left;
     font-size: 11px;
     font-weight: 600;
     color: var(--muted);
     text-transform: uppercase;
     border-bottom: 1px solid var(--border);
 }

 .orders-table td {
     padding: 10px 12px;
     font-size: 13px;
     border-bottom: 1px solid var(--border);
 }

 .orders-table tr:last-child td {
     border-bottom: none;
 }

 .side-label {
     font-size: 11px;
     color: var(--muted);
     font-weight: 500;
     margin-bottom: 3px;
 }

 .side-value {
     font-size: 13px;
     color: var(--text);
     margin-bottom: 12px;
 }

 .tag {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     background: var(--accent-light);
     color: var(--accent);
     padding: 3px 8px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 600;
     margin: 3px 3px 3px 0;
 }

 .tag button {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--accent);
     font-size: 13px;
     line-height: 1;
     padding: 0;
 }

 .tag-input-wrap {
     display: flex;
     gap: 8px;
     margin-top: 8px;
 }

 .tag-input-wrap input {
     flex: 1;
     padding: 6px 10px;
     border: 1px solid var(--border);
     border-radius: 7px;
     font-size: 12px;
     font-family: 'DM Sans', sans-serif;
     outline: none;
 }

 .tag-input-wrap input:focus {
     border-color: var(--accent);
 }

 .tag-input-wrap button {
     padding: 6px 12px;
     background: var(--accent);
     color: #fff;
     border: none;
     border-radius: 7px;
     font-size: 12px;
     cursor: pointer;
 }

 .delete-link {
     color: var(--danger);
     font-size: 13px;
     cursor: pointer;
     font-weight: 500;
     background: none;
     border: none;
     margin-top: 8px;
     display: block;
 }

 .delete-link:hover {
     text-decoration: underline;
 }

 /* ---- VIEWS ---- */
 #view-list {
     display: block;
 }

 #view-detail {
     display: none;
 }

 /* ---- BACK ---- */
 .back-btn {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     color: var(--muted);
     font-size: 13px;
     cursor: pointer;
     background: none;
     border: none;
     margin-bottom: 16px;
     font-family: 'DM Sans', sans-serif;
 }

 .back-btn:hover {
     color: var(--text);
 }

 /* ---- TOAST ---- */
 .toast {
     position: fixed;
     bottom: 24px;
     right: 24px;
     background: var(--text);
     color: #fff;
     padding: 10px 18px;
     border-radius: 10px;
     font-size: 13px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
     opacity: 0;
     transform: translateY(10px);
     transition: all .25s;
     pointer-events: none;
     z-index: 999;
 }

 .toast.show {
     opacity: 1;
     transform: translateY(0);
 }

 @media (max-width: 700px) {
     .detail-layout {
         grid-template-columns: 1fr;
     }

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

     .search-wrap input {
         width: 160px;
     }
 }

 /* Layout Geral */
 .app-layout {
     display: flex;
     min-height: 100vh;
 }

 /* Sidebar Fixa */
 .sidebar {
     position: fixed;
     top: 0;
     left: 0;
     height: 100vh;
     z-index: 1000;
     background: #fff;
     transition: width 0.3s ease;
 }

 /* Largura da Sidebar */
 .sidebar.collapsed {
     width: var(--sidebar-width-collapsed);
 }

 .sidebar:not(.collapsed) {
     width: var(--sidebar-width);
 }

 /* Garante que o container principal ocupe todo o espaço disponível */
 .main-content {
     flex: 1;
     width: 100%;
     /* Força ocupar o restante da tela */
     padding: 30px;
     /* Espaçamento interno para não colar nas bordas */
     margin-left: var(--sidebar-width-collapsed);
     /* Largura da sidebar colapsada */
     transition: margin-left 0.3s ease;
     box-sizing: border-box;
 }

 /* Se a sidebar estiver aberta, empurra o conteúdo */
 .sidebar:not(.collapsed)+.main-content {
     margin-left: var(--sidebar-width);
 }

 /* Remove qualquer trava de largura da página e do card */
 .page,
 .card {
     width: 100% !important;
     max-width: none !important;
     /* Remove o limite de 1013px ou 1200px */
     margin: 0;
     /* Remove o centralizado margin: auto */
     min-height: 100vh;
 }

 /* Garante que a tabela use 100% da largura do card */
 table {
     width: 100%;
     border-collapse: collapse;
 }

 /* Ajuste para telas menores */
 @media (max-width: 768px) {
     .main-content {
         margin-left: 0 !important;
     }

     .sidebar.collapsed {
         left: calc(-1 * var(--sidebar-width-collapsed));
     }
 }