@import url("./profile.css");

body { overflow-x: hidden; }
body.sidebar-collapsed .sidebar { transform: translateX(calc(100% + 12px)); }

.store-main, .store-main *, .store-main *::before, .store-main *::after { box-sizing: border-box; }
main { padding-block: var(--sp-5) var(--sp-6); }
.orders-content { width: min(100%, 1200px); margin-inline: auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--pp-text-muted); font-size: .82rem; }
.breadcrumbs a { color: inherit; text-decoration: none; transition: color .16s; }
.breadcrumbs a:hover { color: var(--pp-primary); }
.orders-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); padding-block-end: var(--sp-5); }
.orders-total, .section-count { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--pp-blue-800); background: var(--pp-primary-soft); border: 1px solid var(--pp-primary-border); border-radius: var(--pp-radius-pill); padding: .35rem .8rem; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.orders-section { overflow: hidden; margin-block-end: var(--sp-4); }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-block-end: 1px solid var(--pp-border); }
.section-header h2 { margin: 0; color: var(--pp-text-strong); font-size: 1.375rem; line-height: 1.4; font-weight: 700; }
.section-kicker { display: block; margin-block-end: 2px; color: var(--pp-primary-hover); font-size: .72rem; font-weight: 700; }
.section-count { color: var(--pp-text-muted); background: var(--pp-surface-muted); border-color: var(--pp-border); }
.orders-table-wrap { width: 100%; overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.orders-table th { padding: var(--sp-3) var(--sp-4); color: var(--pp-text-strong); background: var(--pp-navy-50); border-block-end: 1px solid var(--pp-border); text-align: start; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.orders-table td { min-height: 84px; padding: var(--sp-4); color: var(--pp-text-body); border-block-end: 1px solid var(--pp-border); text-align: start; vertical-align: middle; font-size: .82rem; }
.actions-group { display: flex; flex-direction: column; gap: 8px; }
.actions-group .cancel-order, .actions-group .details-button { width: 100%; justify-content: center; min-height: 36px; padding: .4rem .6rem; }
.actions-group .details-button { border: 1px solid var(--pp-primary-border); }
.actions-group .details-button:hover { border-color: var(--pp-primary); }
.orders-table tbody tr:last-child td { border-block-end: 0; }
.orders-table tbody tr { transition: background-color .16s ease; }
.orders-table tbody tr:hover { background: var(--pp-navy-50); }
.orders-table th:nth-child(1), .orders-table td:nth-child(1) { width: 11%; }
.orders-table th:nth-child(2), .orders-table td:nth-child(2) { width: 27%; }
.orders-table th:nth-child(3), .orders-table td:nth-child(3) { width: 16%; }
.orders-table th:nth-child(4), .orders-table td:nth-child(4) { width: 12%; }
.orders-table th:nth-child(5), .orders-table td:nth-child(5) { width: 18%; }
.orders-table th:nth-child(6), .orders-table td:nth-child(6) { width: 16%; }
.order-number { color: var(--pp-blue-700); font-weight: 700; direction: ltr; display: inline-block; }
.order-number:hover { text-decoration: underline; }
.product-cell { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.product-cell .product-thumb { display: flex; justify-content: center; width: 46px; height: 46px; flex: none; overflow: hidden; background: var(--pp-navy-50); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); }
.product-cell > img { width: 46px; height: 46px; flex: none; object-fit: contain; background: var(--pp-navy-50); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); }
.product-cell div { min-width: 0; }
.product-cell strong { display: block; overflow: hidden; color: var(--pp-text-strong); text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.product-cell span { display: block; color: var(--pp-text-muted); font-size: .68rem; white-space: nowrap; }
.price { color: var(--pp-text-strong); font-weight: 700; white-space: nowrap; }
.status { display: inline-flex; min-width: 112px; align-items: center; justify-content: center; gap: .35rem; padding: .3rem .65rem; border-radius: var(--pp-radius-pill); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.status-review { color: #92400e; background: #fef3c7; }
.status-progress { color: #075985; background: #e0f2fe; }
.status-print { color: #6b21a8; background: #f3e8ff; }
.status-shipping { color: #0f766e; background: #ccfbf1; }
.status-done { color: #15803d; background: #dcfce7; }
.status-cancelled { color: #b91c1c; background: #fee2e2; }
.cancel-order, .details-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: var(--sp-2); padding: .4rem .75rem; background: transparent; border-radius: var(--pp-radius-sm); cursor: pointer; font-size: .75rem; font-weight: 700; transition: background-color .16s ease, transform .16s ease; white-space: nowrap; }
.cancel-order { color: var(--pp-danger); border: 1px solid #fca5a5; }
.cancel-order:hover { background: #fef2f2; transform: translateY(-2px); }
.details-button { color: var(--pp-blue-700); border: 0; }
.details-button:hover { background: var(--pp-primary-soft); }
.details-button i { transition: transform .16s ease; }
.details-button:hover i { transform: translateX(-3px); }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-4); border-block-start: 1px solid var(--pp-border); }
.pagination button { display: grid; width: 38px; height: 38px; place-items: center; color: var(--pp-text-body); background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); cursor: pointer; font-weight: 700; }
.pagination button:hover:not(:disabled):not(.active) { color: var(--pp-primary-hover); background: var(--pp-primary-soft); border-color: var(--pp-primary-border); }
.pagination button.active { color: #fff; background: var(--pp-primary); border-color: var(--pp-primary); box-shadow: var(--pp-shadow-primary); }
.pagination button:disabled { opacity: .45; cursor: not-allowed; }
.modal-backdrop { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: var(--sp-4); background: rgba(var(--pp-navy-rgb), .52); backdrop-filter: blur(3px); }
.modal-backdrop[hidden] { display: none; }
.confirm-modal { position: relative; width: min(100%, 430px); padding: var(--sp-6); text-align: center; background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow-lg); }
.modal-close { position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3); display: grid; width: 40px; height: 40px; place-items: center; color: var(--pp-text-muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.modal-close:hover { background: var(--pp-surface-muted); }
.modal-icon { display: grid; width: 60px; height: 60px; place-items: center; margin: 0 auto var(--sp-4); color: var(--pp-danger); background: #fef2f2; border-radius: 50%; font-size: 1.5rem; }
.confirm-modal h2 { margin: 0 0 var(--sp-2); color: var(--pp-text-strong); font-size: 1.375rem; }
.confirm-modal p { margin: 0; color: var(--pp-text-muted); font-size: .875rem; }
.modal-actions { display: flex; justify-content: center; gap: var(--sp-3); margin-block-start: var(--sp-5); }
.danger-button { min-height: 44px; padding: .7rem 1.15rem; color: #fff; background: var(--pp-danger); border: 1px solid var(--pp-danger); border-radius: var(--pp-radius); cursor: pointer; font-weight: 700; }
.danger-button:hover { background: #b91c1c; }
.is-cancelled-row { opacity: .62; }

.orders-table-empty { padding: var(--sp-5) !important; color: var(--pp-text-muted); text-align: center !important; }
.orders-empty-state__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); text-align: center; }
.orders-empty-state__icon { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: var(--sp-2); color: var(--pp-primary); background: var(--pp-primary-soft); border-radius: 50%; font-size: 1.75rem; }
.orders-empty-state__inner h2 { margin: 0; color: var(--pp-text-strong); font-size: 1.125rem; }
.orders-empty-state__inner p { margin: 0 0 var(--sp-2); color: var(--pp-text-muted); font-size: .875rem; }

.details-modal { position: relative; width: min(100%, 460px); max-height: 88vh; overflow-y: auto; padding: var(--sp-6); text-align: start; background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-lg); box-shadow: var(--pp-shadow-lg); }
.details-modal h2 { margin: 0 0 var(--sp-4); padding-block-end: var(--sp-3); border-block-end: 1px solid var(--pp-border); color: var(--pp-text-strong); font-size: 1.05rem; }
.details-modal h2 span { color: var(--pp-primary); direction: ltr; display: inline-block; }
.details-modal__items { display: grid; gap: var(--sp-3); }
.details-modal__item { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: var(--sp-3); }
.details-modal__item .details-modal__thumb { display: flex; justify-content: center; width: 56px; height: 56px; overflow: hidden; background: var(--pp-navy-50); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); }
.details-modal__item > img { width: 56px; height: 56px; object-fit: contain; background: var(--pp-navy-50); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); }
.details-modal__item strong { display: block; color: var(--pp-text-strong); font-size: .85rem; }
.details-modal__item small { display: block; margin-block-start: 2px; color: var(--pp-text-muted); font-size: .72rem; }
.details-modal__item b { color: var(--pp-text-strong); font-size: .82rem; white-space: nowrap; }
.details-modal__list { display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-block-start: 1px solid var(--pp-border); }
.details-modal__list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.details-modal__list dt { margin: 0; color: var(--pp-text-muted); font-size: .8rem; }
.details-modal__list dd { margin: 0; color: var(--pp-text-strong); font-weight: 700; font-size: .85rem; text-align: end; }

@media (max-width: 1050px) {
  .orders-table { min-width: 850px; }
}
@media (max-width: 720px) {
  .orders-heading { align-items: flex-start; }
  .orders-heading h1 { margin: 4px 0 2px; font-size: 1.4rem; line-height: 1.3; }
  .orders-heading p { margin: 0; font-size: .85rem; line-height: 1.6; }
  .section-header { padding-inline: var(--sp-4); }
  .orders-table-wrap { overflow: visible; }
  .orders-table, .orders-table tbody, .orders-table tr, .orders-table td { display: block; width: 100%; min-width: 0; }
  .orders-table thead { display: none; }
  .orders-table tbody { display: grid; gap: var(--sp-3); padding: var(--sp-3); background: var(--pp-surface-muted); }
  .orders-table tbody tr { padding: var(--sp-3); background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow-sm); }
  .orders-table td, .orders-table td:nth-child(n) { display: flex; width: 100%; min-height: 44px; height: auto; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-block-end: 1px dashed var(--pp-border); text-align: end; }
  .orders-table td:last-child { border: 0; padding-block-end: 0; }
  .orders-table td::before { content: attr(data-label); flex: none; color: var(--pp-text-muted); font-size: .7rem; font-weight: 600; }
  .product-cell { max-width: 70%; text-align: start; }
  .cancel-order, .details-button { min-height: 44px; }
  .actions-group { flex-direction: row; flex: 1; justify-content: flex-end; }
  .actions-group .cancel-order, .actions-group .details-button { width: auto; }
}
@media (max-width: 480px) {
  .orders-heading { flex-direction: column; padding-inline: 0; }
  .section-header h2 { font-size: 1.125rem; }
  .section-count { display: none; }
  .product-cell span { display: none; }
  .modal-actions { flex-direction: column; }
}

/* The print settings of a paper order, under its line in the details window. */
.details-modal__specs { display: grid; gap: 8px; margin-top: -2px; padding: 12px 14px; background: var(--pp-navy-50); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); }
.details-modal__specs h4 { margin: 0 0 2px; color: var(--pp-text-strong); font-size: .85rem; font-weight: 800; }
.details-modal__spec { display: grid; grid-template-columns: minmax(84px, 130px) 1fr; gap: 10px; align-items: start; font-size: .8rem; line-height: 1.7; }
.details-modal__spec span { color: var(--pp-text-muted, #667a96); }
.details-modal__spec strong { color: var(--pp-text-strong); font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 520px) { .details-modal__spec { grid-template-columns: 1fr; gap: 0; } }
.details-modal__file { display: grid; gap: 6px; padding: 10px 12px; background: #fff; border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm); }
.details-modal__file > strong { color: var(--pp-text-strong); font-size: .82rem; overflow-wrap: anywhere; }