/* ========== MOBILE LARGE - 480px ========== */
@media (max-width: 480px) {
  .dashboard-container {
    padding: 8px;
  }

  .dashboard-header h1 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  /* Stats Grid - Single Column */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-bottom: 12px;
  }

  /* ========================================
     MOBILE: SEMBUNYIKAN SIDEBAR & BUTTON
     TAMPILKAN DROPDOWN
     ======================================== */

  /* Sembunyikan sidebar kategori di mobile */
  .category-sidebar {
    display: none !important;
  }

  .sidebar-overlay {
    display: none !important;
  }

  /* Sembunyikan button toggle kategori di mobile */
  .category-toggle-btn.desktop-only {
    display: none !important;
  }

  /* Tampilkan dropdown kategori di mobile */
  .category-dropdown.mobile-only {
    display: block !important;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 30px 8px 12px;
    font-size: 12px;
    height: 38px;
    box-sizing: border-box;
  }

  /* SEMBUNYIKAN RIGHT SIDEBAR DI MOBILE - JADI SIDEBAR */
  .right-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #0e4a8e !important;
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.3) !important;
    transition: right 0.3s ease !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    padding: 15px !important;
    flex-direction: column !important;
  }

  .right-sidebar.open {
    right: 0 !important;
  }

  /* TAMPILKAN TOMBOL TOGGLE CALENDAR DI MOBILE */
  .calendar-toggle-btn {
    display: inline-flex !important;
    width: 100%;
    justify-content: center;
    padding: 8px 14px;
    font-size: 12px;
    margin-bottom: 10px;
    height: 38px;
    box-sizing: border-box;
  }

  /* TAMPILKAN HEADER SIDEBAR DI MOBILE */
  .calendar-sidebar-header {
    display: flex !important;
  }

  /* CALENDAR CARD DI SIDEBAR - RESET STYLES */
  .calendar-card {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Timeline Card */
  .timeline-card {
    padding: 10px;
  }

  .timeline-card h2 {
    font-size: 15px;
    margin-bottom: 10px;
  }

  /* PERBAIKAN FILTER ROW */
  .filter-row {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
  }

  .filter-row select {
    width: 100%;
    padding: 8px 28px 8px 8px;
    font-size: 12px;
    min-width: auto;
    height: 38px;
    box-sizing: border-box;
  }

  /* PERBAIKAN SEARCH BOX */
  .search-box {
    width: 100%;
    margin: 0;
    display: flex;
  }

  .search-box input {
    padding: 8px;
    font-size: 12px;
    border-radius: 6px 0 0 6px;
    flex: 1;
    height: 38px;
    box-sizing: border-box;
    border: 1.5px solid #ccc;
  }

  .search-box button {
    padding: 8px 12px;
    height: 38px;
    min-width: 45px;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
  }

  /* Filter Type - TIDAK DIGUNAKAN DI MOBILE (sudah jadi dropdown) */
  .filter-type {
    display: none !important;
  }

  /* Timeline Body */
  .timeline-body {
    min-height: 150px;
    padding-top: 10px;
  }

  /* Order Items - PERBAIKAN STATUS TETAP DI KANAN */
  .order-item {
    padding: 8px;
    border-left-width: 3px;
    margin-bottom: 8px;
  }

  .order-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px;
    margin-bottom: 5px;
    justify-content: space-between;
  }

  .order-id {
    font-size: 10px;
    flex-shrink: 0;
  }

  .order-status {
    font-size: 8px;
    padding: 2px 6px;
    flex-shrink: 0;
  }

  .order-details {
    font-size: 10px;
    line-height: 1.3;
    margin-bottom: 4px;
  }

  .order-time {
    font-size: 8px;
  }

  .order-hint {
    font-size: 8px;
    margin-top: 3px;
  }

  /* Calendar Grid */
  .calendar-grid {
    gap: 3px;
    margin-top: 10px;
  }

  .calendar-grid .day {
    font-size: 9px;
    padding: 2px;
  }

  .calendar-grid .date {
    padding: 5px 2px;
    font-size: 9px;
    border-radius: 4px;
  }

  .calendar-grid .date.active {
    transform: scale(1.05);
  }

  /* Deadline Section */
  .deadline-section {
    margin-top: 12px;
  }

  .deadline-section h4 {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .deadline-item {
    padding: 8px;
    margin-bottom: 6px;
    border-left-width: 3px;
    border-bottom-width: 2px;
  }

  .deadline-item h4 {
    font-size: 11px;
  }

  .deadline-item p {
    font-size: 9px;
  }

  .deadline-item span {
    font-size: 8px;
  }

  /* Modal */
  .modal-content {
    width: 95%;
    padding: 12px;
    border-radius: 8px;
    max-height: 85vh;
  }

  .modal-content h2 {
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }

  .modal-content table {
    font-size: 11px;
  }

  .modal-content table td {
    padding: 6px 8px !important;
  }

  .modal-content table tr[style*="background"] td {
    font-size: 13px;
    padding: 8px !important;
  }

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

  .grid-form input,
  .grid-form select,
  .modal-content input,
  .modal-content select {
    padding: 7px 8px;
    font-size: 12px;
  }

  .close {
    font-size: 24px;
    top: 10px;
    right: 12px;
  }

  /* Messages */
  .no-orders-message {
    padding: 25px 12px;
  }

  .no-orders-message p {
    font-size: 13px;
  }

  .no-orders-message small {
    font-size: 10px;
  }

  .filter-message,
  .search-message {
    padding: 10px;
    font-size: 12px;
    margin-bottom: 12px;
  }
}

/* ========== MOBILE SMALL - 360px ========== */
@media (max-width: 360px) {
  .dashboard-container {
    padding: 6px;
  }

  .dashboard-header h1 {
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* Timeline Card */
  .timeline-card {
    padding: 8px;
  }

  .timeline-card h2 {
    font-size: 13px;
    margin-bottom: 8px;
  }

  /* Dropdown kategori lebih kecil */
  .category-dropdown.mobile-only {
    padding: 7px 28px 7px 10px;
    font-size: 11px;
    height: 36px;
  }

  /* Filter Row */
  .filter-row select {
    padding: 7px 26px 7px 7px;
    font-size: 11px;
    height: 36px;
  }

  .search-box input {
    padding: 7px;
    font-size: 11px;
    height: 36px;
  }

  .search-box button {
    padding: 7px 10px;
    height: 36px;
    min-width: 42px;
    font-size: 12px;
  }

  /* Tombol Toggle Calendar */
  .calendar-toggle-btn {
    padding: 7px 12px;
    font-size: 11px;
    height: 36px;
  }

  .timeline-body {
    min-height: 140px;
    padding-top: 8px;
  }

  /* Order Items */
  .order-item {
    padding: 7px;
    margin-bottom: 7px;
  }

  .order-header {
    gap: 5px;
    margin-bottom: 4px;
  }

  .order-id {
    font-size: 9px;
  }

  .order-status {
    font-size: 7px;
    padding: 2px 5px;
  }

  .order-details {
    font-size: 9px;
    line-height: 1.2;
  }

  .order-time {
    font-size: 7px;
  }

  .order-hint {
    font-size: 7px;
  }

  /* Calendar */
  .calendar-card h3 {
    font-size: 12px;
  }

  .calendar-nav button {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .calendar-grid {
    gap: 2px;
  }

  .calendar-grid .day {
    font-size: 7px;
    padding: 2px 1px;
  }

  .calendar-grid .date {
    padding: 4px 1px;
    font-size: 7px;
  }

  /* Deadline */
  .deadline-section h4 {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .deadline-item {
    padding: 6px;
    margin-bottom: 5px;
  }

  .deadline-item h4 {
    font-size: 9px;
  }

  .deadline-item p {
    font-size: 7px;
  }

  .deadline-item span {
    font-size: 6px;
  }

  /* Modal */
  .modal-content {
    padding: 10px;
  }

  .modal-content h2 {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .modal-content table {
    font-size: 9px;
  }

  .modal-content table td {
    padding: 4px 5px !important;
  }

  .close {
    font-size: 20px;
  }
}