:root {
          --primary: #6a11cb;
          --secondary: #2575fc;
          --accent: #ff3e80;
          --success: #00d26a;
          --warning: #ffca28;
          --danger: #ff4d4d;
          --text: #333;
          --bg: #f8f9fa;
          --card-bg: #ffffff;
          --border-radius: 20px;
          --shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
          --transition: all 0.3s ease;
      }

      [data-theme="dark"] {
          --text: #f8f9fa;
          --bg: #121212;
          --card-bg: #1e1e1e;
          --shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      }

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
          transition: var(--transition);
      }

      body {
          background-color: var(--bg);
          color: var(--text);
          padding-bottom: 80px;
      }

      .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 15px;
      }

      /* Header */
      header {
          background: var(--card-bg);
          color: var(--text);
          padding: 6px 0;
          position: sticky;
          top: 0;
          z-index: 1000;
          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
          border-bottom: 1px solid rgba(106, 17, 203, 0.08);
      }

      .logo img.logo-img {
          height: 76px;
          width: 76px;
          object-fit: contain;
      }

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

      .logo {
          font-size: 1.8rem;
          font-weight: 800;
          display: flex;
          align-items: center;
      }

      .logo-icon {
          margin-right: 8px;
          font-size: 2rem;
      }

      .search-bar {
          flex: 1;
          max-width: 400px;
          margin: 0 20px;
          position: relative;
      }

      .search-bar input {
          width: 100%;
          padding: 12px 20px;
          border-radius: 50px;
          border: none;
          background: rgba(255, 255, 255, 0.2);
          color: white;
          backdrop-filter: blur(10px);
      }

      .search-bar input::placeholder {
          color: rgba(255, 255, 255, 0.7);
      }

      .header-actions {
          display: flex;
          align-items: center;
          gap: 15px;
      }

      .theme-toggle {
          background: none;
          border: none;
          color: white;
          font-size: 1.5rem;
          cursor: pointer;
      }

      /* Navigation */
      .tabs {
          display: flex;
          justify-content: space-around;
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          margin: 20px 0;
          box-shadow: var(--shadow);
          position: sticky;
          top: 80px;
          z-index: 90;
          overflow-x: auto;
      }

      .tab {
          padding: 15px 0;
          flex: 1;
          text-align: center;
          font-weight: 600;
          cursor: pointer;
          border-bottom: 3px solid transparent;
          transition: var(--transition);
          min-width: 120px;
      }

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

      .tab-content {
          display: none;
      }

      .tab-content.active {
          display: block;
          animation: fadeIn 0.5s ease;
      }

      .profile-card {
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          padding: 20px;
          box-shadow: var(--shadow);
          margin: 20px 0;
          text-align: center;
      }

      .profile-avatar {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: linear-gradient(135deg, var(--primary), var(--secondary));
          margin: 0 auto 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 2.5rem;
      }

      .profile-name {
          font-weight: 800;
          font-size: 1.5rem;
          margin-bottom: 5px;
      }

      .profile-role {
          color: var(--secondary);
          margin-bottom: 20px;
      }

      .profile-stats {
          display: flex;
          justify-content: space-around;
          margin: 20px 0;
      }

      /* Dashboard */
      .dashboard-stats {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
          margin: 20px 0;
      }

      .stat-card {
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          padding: 20px;
          box-shadow: var(--shadow);
          text-align: center;
      }

      .stat-icon {
          font-size: 2.5rem;
          margin-bottom: 15px;
      }

      .stat-value {
          font-size: 2rem;
          font-weight: 800;
          margin-bottom: 5px;
          color: var(--primary);
      }

      .stat-label {
          font-size: 0.9rem;
          opacity: 0.8;
      }

      /* Tables */
      .table-container {
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          padding: 20px;
          margin: 20px 0;
          box-shadow: var(--shadow);
          overflow-x: auto;
      }

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

      .section-title {
          font-weight: 800;
          font-size: 1.5rem;
      }

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

      th, td {
          padding: 15px;
          text-align: left;
          border-bottom: 1px solid var(--bg);
      }

      th {
          font-weight: 700;
          color: var(--primary);
      }

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

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

      .status-pending {
          background-color: rgba(255, 202, 40, 0.2);
          color: var(--warning);
      }

      .status-confirmed {
          background-color: rgba(45, 245, 5, 0.212);
          color: var(--secondary);
      }

      .status-preparing {
          background-color: rgba(37, 117, 252, 0.2);
          color: var(--secondary);
      }

      .status-delivering {
          background-color: rgba(112, 255, 30, 0.2);
          color: var(--secondary);
      }

      .status-delivered {
          background-color: rgba(0, 210, 106, 0.2);
          color: var(--success);
      }

      .status-canceled {
          background-color: rgba(255, 77, 77, 0.2);
          color: var(--danger);
      }

      .action-button {
          padding: 8px 15px;
          border-radius: 50px;
          border: none;
          font-weight: 600;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          font-size: 0.9rem;
      }

      .btn-primary {
          background: linear-gradient(135deg, var(--primary), var(--secondary));
          color: white;
      }

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

      /* Forms */
      .form-container {
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          padding: 25px;
          margin: 20px 0;
          box-shadow: var(--shadow);
      }

      .form-title {
          font-weight: 800;
          font-size: 1.5rem;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          gap: 10px;
      }

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

      .form-group {
          margin-bottom: 20px;
      }

      .form-group label {
          display: block;
          margin-bottom: 8px;
          font-weight: 600;
      }

      .form-group input,
      .form-group select,
      .form-group textarea {
          width: 100%;
          padding: 12px 15px;
          border-radius: 12px;
          border: 2px solid var(--bg);
          background-color: var(--bg);
          color: var(--text);
      }

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

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

      /* Product List */
      .products-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
          gap: 20px;
          margin: 20px 0;
      }

      .product-card {
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          overflow: hidden;
          box-shadow: var(--shadow);
          transition: var(--transition);
          position: relative;
      }

      .product-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }

      .product-image {
          height: 180px;
          width: 100%;
          background: linear-gradient(135deg, #6a11cb, #2575fc);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 3rem;
      }

      .product-badge {
          position: absolute;
          top: 10px;
          right: 10px;
          padding: 5px 10px;
          border-radius: 50px;
          font-size: 0.8rem;
          font-weight: 600;
      }

      .badge-low {
          background-color: var(--danger);
          color: white;
      }

      .badge-medium {
          background-color: var(--warning);
          color: black;
      }

      .badge-high {
          background-color: var(--success);
          color: white;
      }

      .product-info {
          padding: 15px;
      }

      .product-name {
          font-weight: 700;
          font-size: 1.1rem;
          margin-bottom: 5px;
      }

      .product-price {
          font-weight: 800;
          font-size: 1.2rem;
          margin-bottom: 15px;
          color: var(--primary);
      }

      .product-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
      }

      .product-stock {
          font-size: 0.9rem;
          opacity: 0.7;
      }

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

      /* Charts */
      .chart-container {
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          padding: 20px;
          margin: 20px 0;
          box-shadow: var(--shadow);
          height: 300px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          color: var(--primary);
          font-weight: 700;
          font-size: 1.2rem;
      }

      .chart-placeholder {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
          border-radius: var(--border-radius);
          display: flex;
          align-items: center;
          justify-content: center;
      }

      /* Delivery Management */
      .delivery-card {
          background-color: var(--card-bg);
          border-radius: var(--border-radius);
          padding: 20px;
          margin-bottom: 15px;
          box-shadow: var(--shadow);
      }

      .delivery-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          flex-wrap: wrap;
          gap: 10px;
      }

      .delivery-id {
          font-weight: 700;
          color: var(--primary);
      }

      .delivery-client {
          font-weight: 600;
      }

      .delivery-details {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 15px;
          margin-bottom: 15px;
      }

      .detail-item {
          font-size: 0.9rem;
      }

      .detail-label {
          font-weight: 600;
          margin-bottom: 5px;
          opacity: 0.8;
      }

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

      /* Animations */
      @keyframes fadeIn {
          from {
              opacity: 0;
              transform: translateY(10px);
          }

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

      @keyframes pulse {
          0% {
              transform: scale(1);
          }

          50% {
              transform: scale(1.05);
          }

          100% {
              transform: scale(1);
          }
      }

      .pulse {
          animation: pulse 1.5s infinite;
      }

      /* Toast */
      .toast {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background-color: var(--success);
          color: white;
          padding: 15px 25px;
          border-radius: var(--border-radius);
          box-shadow: var(--shadow);
          display: flex;
          align-items: center;
          z-index: 1000;
          transform: translateY(100px);
          opacity: 0;
          transition: var(--transition);
      }

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

      .toast-error {
          background-color: var(--danger);
      }

      /* Responsive */
      @media (max-width: 768px) {
          .header-content {
              flex-direction: column;
              align-items: stretch;
          }

          .logo {
              margin-bottom: 15px;
              justify-content: center;
          }

          .search-bar {
              max-width: 100%;
              margin: 0 0 15px 0;
          }

          .header-actions {
              justify-content: center;
          }

          .dashboard-stats {
              grid-template-columns: 1fr;
          }

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

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

          .form-actions {
              flex-direction: column;
          }

          .products-grid {
              grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
          }

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

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

      .card {
          width: 100%;
          max-width: 500px;
          height: 200px;
          background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
          color: white;
          border-radius: 20px;
          box-shadow: 0 8px 20px rgba(106, 17, 203, 0.3);
          overflow: hidden;
          position: relative;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 30px 20px;
          text-align: center;
          transition: transform 0.3s ease;
          margin: 0 auto 30px;
      }

      .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 12px 30px rgba(106, 17, 203, 0.4);
      }

      .periodo {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100%;
          width: 100%;
      }

      .periodo h2 {
          margin: 0 0 15px 0;
          font-size: 1.2rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1px;
      }

      .periodo p {
          margin: 8px 0;
          font-size: 1.8rem;
          font-weight: 800;
      }

      .periodo p:first-of-type {
          margin-top: 10px;
      }

      /* Botões de período */
      .periodo-buttons {
          display: flex;
          gap: 10px;
          justify-content: center;
          margin-top: 20px;
          flex-wrap: wrap;
      }

      .periodo-btn {
          padding: 8px 16px;
          border: 2px solid rgba(255, 255, 255, 0.3);
          background: rgba(255, 255, 255, 0.1);
          color: white;
          border-radius: 20px;
          cursor: pointer;
          font-weight: 600;
          font-size: 0.9rem;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
      }

      .periodo-btn:hover,
      .periodo-btn.active {
          border-color: white;
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.05);
      }

      /* Modal */
      .modal {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.6);
          justify-content: center;
          align-items: center;
      }

      .modal-content {
          background: #fff;
          border-radius: 12px;
          width: 90%;
          max-width: 400px;
          padding: 20px;
          max-height: 80vh;
          overflow-y: auto;
      }

      #fecharModal {
          float: right;
          cursor: pointer;
          font-size: 20px;
          margin-bottom: 10px;
      }

      /* Chat Styles */
      .chats-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .chat-card {
          display: flex;
          align-items: center;
          padding: 15px;
          background-color: var(--card-bg);
          border-radius: 12px;
          box-shadow: var(--shadow);
          text-decoration: none;
          color: inherit;
          transition: var(--transition);
          cursor: pointer;
          border-left: 4px solid var(--primary);
      }

      .chat-card:hover {
          transform: translateX(5px);
          box-shadow: 0 8px 20px rgba(106, 17, 203, 0.15);
      }

      .chat-avatar {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          margin-right: 15px;
          object-fit: cover;
          border: 2px solid var(--primary);
      }

      .chat-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
      }

      .chat-name {
          font-weight: 700;
          font-size: 1rem;
      }

      .chat-last-message {
          font-size: 0.9rem;
          opacity: 0.7;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .chat-time {
          font-size: 0.85rem;
          opacity: 0.6;
          text-align: right;
      }

      .empty-chats {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 40px 20px;
          text-align: center;
          opacity: 0.7;
      }

      .empty-chats-icon {
          font-size: 3rem;
          margin-bottom: 15px;
      }