:root {
  /* Liar Neo-Brutal Cyberpunk Palette */
  --bg: #fefdf9;
  --ink: #111;
  --accent1: #ff005c;
  --accent2: #00ffe0;
  --accent3: #ffe600;
  --white: #ffffff;
  --gray: #222;
  --card-bg: #f5f4f1;
  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-neon: 0 0 25px var(--accent2);
  --radius: 8px;
  --transition: all 0.25s cubic-bezier(0.83, 0, 0.17, 1);
}

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

/* Body */
body {
  font-family: "Clash Display", "Space Grotesk", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  letter-spacing: -0.02em;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 270px;
  height: 100vh;
  background: linear-gradient(170deg, var(--ink), var(--gray));
  color: var(--white);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  border-right: 4px solid var(--accent1);
  box-shadow: var(--shadow-hard);
  clip-path: polygon(0 0, 100% 0, 100% 98%, 92% 100%, 0 100%);
}

.sidebar .brand {
  font-size: 1.8rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--accent3);
  margin-bottom: 2rem;
  text-align: center;
  letter-spacing: 1px;
  filter: drop-shadow(0 0 4px var(--accent3));
}

.sidebar a {
  color: var(--white);
  text-decoration: none;
  display: block;
  padding: 0.9rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  margin-bottom: 0.4rem;
  transition: var(--transition);
  position: relative;
}

.sidebar a:hover {
  background: var(--accent1);
  border-color: var(--white);
  transform: translate(-3px, -3px) rotate(-1deg);
  box-shadow: var(--shadow-neon);
}

.sidebar a.active {
  background: var(--accent2);
  color: var(--ink);
  font-weight: 800;
  transform: translate(3px, -3px) rotate(1deg);
}

.kasir-info {
  margin-top: auto;
  border-top: 2px dashed rgba(255, 255, 255, 0.3);
  padding-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--accent3);
}

/* Toggle Button */
.btn-toggle-sidebar {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 55px;
  height: 55px;
  background: var(--accent1);
  color: var(--white);
  border: 3px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  font-weight: 800;
  font-size: 1.2rem;
  z-index: 1100;
  transition: var(--transition);
  display: none;
}

.btn-toggle-sidebar:hover {
  background: var(--accent2);
  color: var(--ink);
  transform: rotate(10deg) scale(1.1);
  box-shadow: var(--shadow-neon);
}

/* Main Container */
.main-container {
  display: flex;
  margin-left: 270px;
  min-height: 100vh;
  padding: 2rem;
  gap: 2rem;
  background: repeating-linear-gradient(
    45deg,
    #fafafa 0,
    #fafafa 10px,
    #fff 10px,
    #fff 20px
  );
}

.content {
  flex: 1;
  min-width: 0;
}

/* Search Input */
#searchMenu {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  font-weight: 600;
  box-shadow: var(--shadow-hard);
  transition: var(--transition);
  margin-bottom: 2rem;
}

#searchMenu:focus {
  outline: none;
  border-color: var(--accent1);
  background: #fff7f9;
  transform: translate(-3px, -3px);
}

/* Header */
h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border-bottom: 4px solid var(--accent3);
  display: inline-block;
}

/* Menu Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Menu Card */
.menu-card {
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  transform: rotate(0deg);
}

.menu-card:hover {
  transform: translate(-6px, -6px) rotate(-2deg);
  box-shadow: var(--shadow-neon);
}

.menu-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 3px solid var(--ink);
}

.menu-card h4 {
  margin: 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
}

.menu-card p {
  margin: 0 1rem 1rem;
  color: var(--gray);
  font-weight: 600;
}

/* Add Button */
.menu-card button {
  width: calc(100% - 2rem);
  margin: 0 1rem 1rem;
  padding: 0.9rem;
  background: var(--accent1);
  color: var(--white);
  font-weight: 800;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  transition: var(--transition);
  text-transform: uppercase;
}

.menu-card button:hover {
  background: var(--accent3);
  color: var(--ink);
  transform: translate(-3px, -3px) rotate(1deg);
  box-shadow: var(--shadow-neon);
}

/* Order Sidebar */
.order-sidebar {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  flex-basis: 380px;
  max-width: 380px;
  padding: 1.5rem;
  position: sticky;
  top: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 3px solid var(--accent2);
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Order Item */
.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.5rem;
  transition: var(--transition);
}

.order-item:hover {
  transform: rotate(-1deg) translate(-3px, -3px);
  background: #fff3f6;
}

/* Qty */
.qty-btn {
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--accent2);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  transition: var(--transition);
}

.qty-btn:hover {
  transform: scale(1.1) rotate(-10deg);
  background: var(--accent1);
  color: var(--white);
}

/* Total Section */
.total-section {
  background: var(--accent3);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  text-align: center;
  font-weight: 900;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-hard);
}

/* Pay Button */
.bayar-btn {
  width: 100%;
  padding: 1rem;
  background: var(--accent2);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--ink);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: var(--transition);
}

.bayar-btn:hover {
  background: var(--accent1);
  color: var(--white);
  transform: translate(-4px, -4px);
  box-shadow: var(--shadow-neon);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: var(--ink);
  color: var(--accent3);
  border: 3px solid var(--accent3);
  padding: 14px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-neon);
  opacity: 0;
  transform: translateY(30px);
  transition: 0.3s ease;
  font-weight: 800;
  text-transform: uppercase;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
  .main-container {
    flex-direction: column;
    margin-left: 0;
    padding: 1rem;
  }

  .sidebar {
    transform: translateX(-100%);
    width: 100%;
    max-width: 320px;
    transition: var(--transition);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .btn-toggle-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===== RIWAYAT KASIR STYLES - 1PARADE ===== */

/* Reset dan Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f8fafc; /* Warna latar belakang */
    color: #1a202c; /* Warna teks */
    line-height: 1.6; /* Tinggi baris */
}

/* Main Container */
.main-container {
    display: flex;
    min-height: 100vh; /* Tinggi minimum untuk konten */
}

.content {
    flex: 1;
    padding: 1rem; /* Padding untuk konten */
    margin-left: 0; /* Margin kiri */
    transition: margin-left 0.3s ease; /* Transisi untuk margin */
}

/* Riwayat Container */
.riwayat-container {
    max-width: 1200px; /* Lebar maksimum untuk konten riwayat */
    margin: 0 auto; /* Margin otomatis untuk pusat */
    padding: 1rem; /* Padding untuk konten riwayat */
}

/* Header Section */
.riwayat-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Jarak antara elemen */
    margin-bottom: 1.5rem; /* Margin bawah */
    padding: 1.5rem; /* Padding untuk header */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Gradient latar belakang */
    border-radius: 16px; /* Sudut melengkung */
    color: white; /* Warna teks */
    text-align: center; /* Teks rata tengah */
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3); /* Bayangan */
}

.riwayat-title {
    font-size: 1.75rem; /* Ukuran font untuk judul */
    font-weight: 700; /* Ketebalan font */
    margin: 0; /* Menghapus margin */
    display: flex; /* Menampilkan sebagai flex */
    align-items: center; /* Rata tengah secara vertikal */
    justify-content: center; /* Rata tengah secara horizontal */
    gap: 0.5rem; /* Jarak antara elemen */
}

.riwayat-date {
    font-size: 1rem; /* Ukuran font untuk tanggal */
    opacity: 0.9; /* Opasitas */
    font-weight: 500; /* Ketebalan font */
}

/* Filter Form */
.form-filter {
    display: flex; /* Menampilkan sebagai flex */
    gap: 0.75rem; /* Jarak antara elemen */
    margin-bottom: 1.5rem; /* Margin bawah */
    padding: 1.25rem; /* Padding untuk form */
    background: white; /* Warna latar belakang */
    border-radius: 16px; /* Sudut melengkung */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* Bayangan */
    border: 1px solid #e2e8f0; /* Garis batas */
}

.form-filter input[type="date"] {
    flex: 1; /* Mengisi ruang yang tersedia */
    padding: 0.875rem 1rem; /* Padding untuk input */
    border: 2px solid #e2e8f0; /* Garis batas */
    border-radius: 10px; /* Sudut melengkung */
    font-size: 0.95rem; /* Ukuran font */
    font-family: inherit; /* Menggunakan font yang sama */
    transition: all 0.3s ease; /* Transisi untuk efek */
    background: #f8fafc; /* Warna latar belakang */
}

.form-filter input[type="date"]:focus {
    outline: none; /* Menghapus outline */
    border-color: #667eea; /* Warna garis batas saat fokus */
    background: white; /* Warna latar belakang saat fokus */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); /* Bayangan saat fokus */
}

/* Summary Card */
.summary-card {
    background: white; /* Warna latar belakang */
    border-radius: 16px; /* Sudut melengkung */
    padding: 1.75rem; /* Padding untuk kartu */
    margin-bottom: 1.5rem; /* Margin bawah */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* Bayangan */
    border: 1px solid #e2e8f0; /* Garis batas */
}

.summary-title {
    font-size: 1.25rem; /* Ukuran font untuk judul */
    font-weight: 600; /* Ketebalan font */
    margin-bottom: 1.25rem; /* Margin bawah */
    color: #1a202c; /* Warna teks */
    display: flex; /* Menampilkan sebagai flex */
    align-items: center; /* Rata tengah secara vertikal */
    gap: 0.5rem; /* Jarak antara elemen */
}

.summary-grid {
    display: grid; /* Menampilkan sebagai grid */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Kolom grid */
    gap: 1rem; /* Jarak antara elemen */
}

.summary-item {
    text-align: center; /* Teks rata tengah */
    padding: 1.25rem; /* Padding untuk item */
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* Gradient latar belakang */
    border-radius: 12px; /* Sudut melengkung */
    border: 1px solid #e2e8f0; /* Garis batas */
    transition: transform 0.2s ease; /* Transisi untuk efek */
}

.summary-item:hover {
    transform: translateY(-2px); /* Efek hover */
}

/* Transactions List */
.transactions-list {
    display: flex; /* Menampilkan sebagai flex */
    flex-direction: column; /* Arah kolom */
    gap: 1rem; /* Jarak antara elemen */
}

.card-transaksi {
    background: white; /* Warna latar belakang */
    border-radius: 16px; /* Sudut melengkung */
    padding: 1.75rem; /* Padding untuk kartu transaksi */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* Bayangan */
    border: 1px solid #e2e8f0; /* Garis batas */
    border-left: 4px solid #667eea; /* Garis batas kiri */
    transition: all 0.3s ease; /* Transisi untuk efek */
}

.card-transaksi:hover {
    transform: translateY(-2px); /* Efek hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Bayangan saat hover */
}

.trx-header {
    display: flex; /* Menampilkan sebagai flex */
    justify-content: space-between; /* Rata kiri dan kanan */
    align-items: center; /* Rata tengah secara vertikal */
    margin-bottom: 1rem; /* Margin bawah */
}

.trx-id {
    font-weight: 600; /* Ketebalan font */
    color: #667eea; /* Warna teks */
    font-size: 1rem; /* Ukuran font */
    display: flex; /* Menampilkan sebagai flex */
    align-items: center; /* Rata tengah secara vertikal */
    gap: 0.5rem; /* Jarak antara elemen */
}

.trx-time {
    font-size: 0.9rem; /* Ukuran font */
    color: #64748b; /* Warna teks */
    background: #f1f5f9; /* Warna latar belakang */
    padding: 0.4rem 0.875rem; /* Padding untuk waktu */
    border-radius: 20px; /* Sudut melengkung */
    font-weight: 500; /* Ketebalan font */
    display: flex; /* Menampilkan sebagai flex */
    align-items: center; /* Rata tengah secara vertikal */
    gap: 0.4rem; /* Jarak antara elemen */
}

.trx-total {
    font-size: 1.3rem; /* Ukuran font */
    font-weight: 700; /* Ketebalan font */
    color: #059669; /* Warna teks */
    margin-bottom: 1.25rem; /* Margin bawah */
    display: flex; /* Menampilkan sebagai flex */
    align-items: center; /* Rata tengah secara vertikal */
    gap: 0.5rem; /* Jarak antara elemen */
}

/* Menu List */
.list-menu {
    list-style: none; /* Menghapus bullet */
    padding: 0; /* Menghapus padding */
    margin: 0 0 1.25rem 0; /* Margin bawah */
}

.menu-item {
    display: flex; /* Menampilkan sebagai flex */
    justify-content: space-between; /* Rata kiri dan kanan */
    align-items: center; /* Rata tengah secara vertikal */
    padding: 0.75rem 0; /* Padding untuk item */
    border-bottom: 1px solid #f1f5f9; /* Garis batas bawah */
    transition: background-color 0.2s ease; /* Transisi untuk efek */
}

.menu-item:last-child {
    border-bottom: none; /* Menghapus garis batas bawah untuk item terakhir */
}

.menu-item:hover {
    background-color: #f8fafc; /* Warna latar belakang saat hover */
    margin: 0 -0.5rem; /* Menghapus margin */
    padding: 0.75rem 0.5rem; /* Padding untuk item saat hover */
    border-radius: 8px; /* Sudut melengkung */
}

.menu-name {
    font-weight: 500; /* Ketebalan font */
    color: #1a202c; /* Warna teks */
    font-size: 0.95rem; /* Ukuran font */
}

.menu-price {
    font-weight: 600; /* Ketebalan font */
    color: #059669; /* Warna teks */
    font-size: 0.95rem; /* Ukuran font */
}

/* Transaction Footer */
.trx-footer {
    display: flex; /* Menampilkan sebagai flex */
    justify-content: space-between; /* Rata kiri dan kanan */
    align-items: center; /* Rata tengah secara vertikal */
    padding-top: 1rem; /* Padding atas */
    border-top: 1px solid #f1f5f9; /* Garis batas atas */
    font-size: 0.9rem; /* Ukuran font */
}

.payment-method {
    display: flex; /* Menampilkan sebagai flex */
    align-items: center; /* Rata tengah secara vertikal */
    gap: 0.5rem; /* Jarak antara elemen */
    color: #64748b; /* Warna teks */
    font-weight: 500; /* Ketebalan font */
}

.payment-amount {
    font-weight: 600; /* Ketebalan font */
    color: #1a202c; /* Warna teks */
}

/* Back Button */
.back-btn-container {
    margin-top: 2rem; /* Margin atas */
    text-align: center; /* Teks rata tengah */
}

.btn-back {
    display: inline-flex; /* Menampilkan sebagai flex */
    align-items: center; /* Rata tengah secara vertikal */
    gap: 0.5rem; /* Jarak antara elemen */
    padding: 0.875rem 1.75rem; /* Padding untuk tombol */
    background: linear-gradient(135deg, #64748b 0%, #475569 100%); /* Gradient latar belakang */
    color: white; /* Warna teks */
    text-decoration: none; /* Menghapus underline */
    border-radius: 10px; /* Sudut melengkung */
    font-weight: 600; /* Ketebalan font */
    font-size: 0.95rem; /* Ukuran font */
    transition: all 0.3s ease; /* Transisi untuk efek */
}

/* Empty State */
.empty-state {
    text-align: center; /* Teks rata tengah */
    padding: 3rem 1rem; /* Padding untuk empty state */
    color: #64748b; /* Warna teks */
    background: white; /* Warna latar belakang */
    border-radius: 16px; /* Sudut melengkung */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* Bayangan */
}

.empty-state i {
    font-size: 3.5rem; /* Ukuran font untuk icon */
    margin-bottom: 1rem; /* Margin bawah */
    opacity: 0.3; /* Opasitas */
    color: #94a3b8; /* Warna icon */
}

.empty-state h3 {
    font-size: 1.25rem; /* Ukuran font untuk judul */
    margin-bottom: 0.5rem; /* Margin bawah */
    color: #1a202c; /* Warna teks */
    font-weight: 600; /* Ketebalan font */
}

.empty-state p {
    font-size: 0.95rem; /* Ukuran font untuk deskripsi */
    color: #64748b; /* Warna teks */
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 768px) {
    .riwayat-container {
        padding: 0.75rem; /* Padding untuk tablet */
    }
    
    .riwayat-header {
        padding: 1.25rem; /* Padding untuk header */
    }
    
    .riwayat-title {
        font-size: 1.5rem; /* Ukuran font untuk judul */
    }
    
    .form-filter {
        padding: 1rem; /* Padding untuk form */
    }
    
    .summary-card {
        padding: 1.25rem; /* Padding untuk kartu */
    }
    
    .summary-grid {
        grid-template-columns: 1fr 1fr; /* Kolom grid untuk tablet */
        gap: 0.75rem; /* Jarak antara elemen */
    }
    
    .summary-item {
        padding: 1rem; /* Padding untuk item */
    }
    
    .card-transaksi {
        padding: 1.25rem; /* Padding untuk kartu transaksi */
    }
    
    .trx-total {
        font-size: 1.2rem; /* Ukuran font untuk total */
    }
    
    .menu-item {
        flex-direction: column; /* Arah kolom untuk item menu */
        align-items: flex-start; /* Rata kiri */
        gap: 0.5rem; /* Jarak antara elemen */
        padding: 0.875rem 0; /* Padding untuk item */
    }
    
    .trx-footer {
        flex-direction: column; /* Arah kolom untuk footer */
        align-items: flex-start; /* Rata kiri */
        gap: 0.5rem; /* Jarak antara elemen */
    }
}

/* Mobile */
@media (max-width: 480px) {
    .riwayat-title {
        font-size: 1.2rem; /* Ukuran font untuk judul */
    }
    
    .summary-value {
        font-size: 1rem; /* Ukuran font untuk nilai */
    }
    
    .trx-total {
        font-size: 1rem; /* Ukuran font untuk total */
    }
    
    .menu-item {
        font-size: 0.85rem; /* Ukuran font untuk item menu */
    }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #0f172a; /* Warna latar belakang gelap */
        color: #e2e8f0; /* Warna teks gelap */
    }
    
    .form-filter,
    .summary-card,
    .card-transaksi,
    .empty-state {
        background: #1e293b; /* Warna latar belakang gelap */
        border-color: #334155; /* Garis batas gelap */
    }
    
    .form-filter input[type="date"] {
        background: #334155; /* Warna latar belakang input gelap */
        color: #e2e8f0; /* Warna teks input gelap */
        border-color: #475569; /* Garis batas input gelap */
    }
    
    .summary-item {
        background: linear-gradient(135deg, #334155 0%, #475569 100%); /* Gradient latar belakang gelap */
        border-color: #475569; /* Garis batas item gelap */
    }
    
    .menu-item:hover {
        background-color: #334155; /* Warna latar belakang item menu gelap */
    }
}

/* Print Styles */
@media print {
    .form-filter,
    .back-btn-container {
        display: none; /* Sembunyikan form dan tombol kembali saat print */
    }
    
    .riwayat-header {
        background: none !important; /* Hapus latar belakang saat print */
        color: black !important; /* Warna teks hitam saat print */
        box-shadow: none !important; /* Hapus bayangan saat print */
    }
    
    .card-transaksi {
        break-inside: avoid; /* Hindari pemisahan saat print */
        box-shadow: none !important; /* Hapus bayangan saat print */
        border: 1px solid #ccc !important; /* Garis batas saat print */
    }
}

/* ===== TOGGLE BUTTON FIXES ===== */
.btn-toggle-sidebar {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    background: #7a4b32;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.btn-toggle-sidebar:hover {
    background: #6b3e2a;
    transform: scale(1.1);
}

/* Tambahkan ini di media query mobile */
@media (max-width: 768px) {
    .btn-toggle-sidebar {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        height: 100vh;
        transition: transform 0.3s ease;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .main-container {
        margin-left: 0;
    }
}