/* Order Logs page styles using brand_overrides.css variables */

/* General */
body { 
  font-family: 'Inter', sans-serif; 
  background: var(--bg-primary); 
  color: var(--text-primary); 
  margin: 0; 
  padding: 0; 
  overflow-x: hidden; /* Prevent horizontal scroll on body */
}
.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 20px; 
  overflow-x: hidden; /* Prevent container overflow */
  box-sizing: border-box;
}

/* Header */
.page-header { background: var(--bg-off-white); border-bottom: 1px solid var(--border-color); padding: 16px; text-align: center; }
.page-title { font-size: 24px; font-weight: 700; color: var(--primary); display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.page-title .add-new i { width: 20px; height: 20px; stroke: var(--primary); }

/* Filters */
.page-options { margin-top: 10px; }
.order_btn_group { display: inline-flex; flex-wrap: wrap; gap: 8px; padding-left: 4px; }
.order_btn_group .list-inline-item { margin-right: 0 !important; }
.order_btn_group .list-inline-item .nav-link.btn { font-size: 0.9rem; font-weight: 600; background: var(--bg-off-white); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 999px; padding: 8px 14px; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.order_btn_group .list-inline-item .nav-link.btn:hover { background: var(--bg-card); transform: translateY(-1px); }
.order_btn_group .list-inline-item .nav-link.btn.btn-info { background: var(--primary); border-color: var(--primary); color: #fff; }

.badge-error-orders { position: relative; left: 5px; background: #DC3545; color: #fff; font-size: .75rem; padding: 2px 6px; border-radius: 8px; }

/* Cards */
.white_card { background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; margin-bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.white_card_header { padding-bottom: 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 12px; }
.card-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }

/* Table */
.table-responsive { 
  background: var(--bg-light); 
  border-radius: 8px; 
  overflow-x: auto; 
  overflow-y: visible;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); 
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table { 
  width: 100%; 
  border-collapse: collapse; 
  color: var(--text-primary); 
  min-width: 800px; /* Ensure minimum width to prevent cramping */
}
.table th, .table td { 
  padding: 12px 8px; 
  border-bottom: 1px solid var(--border-color); 
  text-align: left; 
  vertical-align: middle; 
  white-space: nowrap; /* Prevent text wrapping in cells */
}
.table thead th { 
  background: var(--bg-off-white); 
  font-weight: 700; 
  color: var(--primary); 
  position: sticky;
  top: 0;
  z-index: 10;
}
.table tbody tr { 
  background: var(--bg-light); 
  transition: background .2s; 
}
.table tbody tr:hover { 
  background: var(--bg-off-white); 
}

/* Allow text wrapping for specific columns that can handle it */
.table td[data-label="Order Details"],
.table td[data-label="Note"] {
  white-space: normal;
  max-width: 300px;
}

/* Title block */
.title h6 { font-size: 16px; font-weight: 700; margin: 0; color: var(--text-primary); }
.title small ul { list-style: none; padding-left: 0; margin: 0; }
.title small ul li { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.title small ul li a { color: var(--primary); text-decoration: underline; }
.title small ul li a:hover { color: var(--primary-dark); }

/* Status chips */
.btn-info { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.btn-orange { background: #FEA82D !important; border-color: #FEA82D !important; color: #01040D !important; }
.btn-blue { background: #3A8DFF !important; border-color: #3A8DFF !important; color: #fff !important; }
.btn-danger { background: #DC3545 !important; border-color: #DC3545 !important; color: #fff !important; }
.btn.round.btn-sm { padding: 4px 10px; font-size: .85rem; border-radius: 8px; text-transform: none; }

/* Refill button */
.btn-success { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; border: none !important; padding: 6px 12px; border-radius: 8px; font-size: .85rem; transition: opacity .2s; }
.btn-success.disabled { background: var(--bg-off-white) !important; color: var(--text-secondary) !important; opacity: .6; cursor: not-allowed; }

/* Dropdown */
.item-action .dropdown-menu { background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); padding: 8px 0; }
.item-action .dropdown-item { color: var(--text-primary); font-size: 14px; padding: 8px 16px; transition: background .2s; }
.item-action .dropdown-item:hover { background: var(--bg-off-white); }
.item-action .dropdown-icon { margin-right: 8px; color: var(--primary); }

/* Note text */
.text-red { color: #DC3545 !important; }

/* Pagination */
.float-right .page-link { background: var(--bg-off-white); border: 1px solid var(--primary); color: var(--primary); margin: 0 4px; border-radius: 6px; padding: 6px 10px; }
.float-right .page-link:hover { background: var(--primary); color: #fff; }

/* Empty */
.empty-data { text-align: center; padding: 40px; color: var(--text-secondary); font-size: 1rem; }

/* Responsive for tablets and medium screens */
@media (max-width: 1024px) and (min-width: 769px) {
  .table {
    min-width: 700px; /* Reduce minimum width for tablets */
  }
  .table th, .table td {
    padding: 10px 6px; /* Reduce padding slightly */
    font-size: 0.9rem; /* Slightly smaller font */
  }
  /* Hide less important columns on tablets */
  .table th:nth-child(2), /* API Order ID */
  .table td:nth-child(2),
  .table th:nth-child(7), /* Note */
  .table td:nth-child(7) {
    display: none;
  }
}

/* Responsive for small tablets */
@media (max-width: 992px) and (min-width: 769px) {
  .table {
    min-width: 600px;
  }
  .table th, .table td {
    padding: 8px 4px;
    font-size: 0.85rem;
  }
  /* Hide additional columns */
  .table th:nth-child(2), /* API Order ID */
  .table td:nth-child(2),
  .table th:nth-child(6), /* Refill */
  .table td:nth-child(6),
  .table th:nth-child(7), /* Note */
  .table td:nth-child(7) {
    display: none;
  }
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .page-title { font-size: 20px; }
  .white_card { padding: 12px; }
  .page-options { display: block; }
  .order_btn_group { display: flex; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 8px; margin-bottom: 6px; gap: 8px; flex-wrap: nowrap; scroll-snap-type: x proximity; }
  .order_btn_group::-webkit-scrollbar { display: none; }
  .order_btn_group .list-inline-item { flex: 0 0 auto; display: inline-block; scroll-snap-align: start; }
  .page-options .order_btn_group { margin-left: 0 !important; margin-right: 0 !important; }
  .order_btn_group .list-inline-item .nav-link.btn { border-radius: 999px !important; padding: 8px 12px; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Transform table into card list */
  .table { min-width: 0; width: 100%; }
  .table thead { display: none; }
  .table tbody tr { display: block; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-light); box-shadow: 0 4px 10px rgba(0,0,0,0.06); margin-bottom: 12px; overflow: hidden; }
  .table tbody td { display: grid; grid-template-columns: minmax(96px, 42%) 1fr; align-items: start; gap: 8px; padding: 12px; border: none; border-top: 1px solid var(--border-color); }
  .table tbody td:first-child { border-top: none; }
  .table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--text-secondary); }
  .table tbody td[data-label="Order ID"] { font-weight: 800; font-size: 1rem; background: var(--bg-off-white); }
  .table tbody td[data-label="Status"] .btn { justify-self: start; }
  .table tbody td[data-label="Action"] { text-align: left; }
  /* Hide low-priority columns on mobile */
  .table tbody td[data-label="API Order ID"],
  .table tbody td[data-label="Note"] { display: none; }
  .title small ul li { word-break: break-word; hyphens: auto; }
  .title small ul li a { word-break: break-all; }
  .btn.round.btn-sm { font-size: .75rem; padding: 3px 8px; }
}

/* Admin users: Keep full table view on mobile */
@media (max-width: 768px) {
  .admin-user .table thead { display: table-header-group !important; }
  .admin-user .table tbody tr { display: table-row !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; margin-bottom: 0 !important; overflow: visible !important; }
  .admin-user .table tbody td { display: table-cell !important; grid-template-columns: none !important; align-items: center !important; gap: 0 !important; padding: 8px !important; border: 1px solid var(--border-color) !important; border-top: 1px solid var(--border-color) !important; }
  .admin-user .table tbody td::before { display: none !important; }
  .admin-user .table tbody td[data-label="Order ID"] { font-weight: normal !important; font-size: inherit !important; background: transparent !important; }
  .admin-user .table tbody td[data-label="Status"] .btn { justify-self: auto !important; }
  .admin-user .table tbody td[data-label="Action"] { text-align: center !important; }
  /* Show all columns for admin users */
  .admin-user .table tbody td[data-label="API Order ID"],
  .admin-user .table tbody td[data-label="Note"] { display: table-cell !important; }
}