/* contents extracted from your "Add Shipment" page styles (no changes to design) */
:root{
  --container-max-width: 920px;
  --container-padding-desktop: 16px;
  --container-padding-mobile: 10px;
  --main-padding-mobile: 6px;
  --shipment-col-1: 18%;
  --shipment-col-2: 54%;
  --shipment-col-3: 28%;
}
body { font-family: 'Almarai', Arial, Tahoma, sans-serif; background: linear-gradient(135deg,#e0e7ff 0%,#e0ffe7 100%); margin: 0; padding: 0;}
.main-wrapper { padding: 0 var(--main-padding-mobile); }
.container { background: #fff; border-radius: 14px; box-shadow: 0 6px 24px rgba(30,144,255,.12); max-width: var(--container-max-width); width: 100%; margin: 12px auto; padding: var(--container-padding-desktop); box-sizing: border-box;}
.popup-success { display: none; position: fixed; top: 51%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: linear-gradient(135deg,#e0ffe7 0%,#b1fce5 100%); color: #137547; border: 2px solid #36edc1; border-radius: 18px; padding: 18px 28px; font-size: 1.12rem; font-weight: 700; text-align: center; box-shadow: 0 7px 19px rgba(30,144,255,.13); }
h2 { text-align: center; color: #0b72b9; margin-bottom: 14px; font-size: 1.25rem; font-weight: 800;}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px;}
.full-width { grid-column: 1 / 3;}
.section-card { background: #f5fbff; border: 1.6px solid #00BFFF; border-radius: 10px; padding: 12px; margin-bottom: 18px; }
.section-title { color: #0b3b66; font-size: 0.98rem; font-weight: 800; margin-bottom: 8px; text-align: right;}
.flex-row { display: flex; gap: 12px; }
#flight_num, #shipment_num, #sender_name, #sender_phone, #sender_phone2, #receiver_name, #receiver_phone, #receiver_phone2, #status, #destination, #notes { border: 1.8px solid #00BFFF !important; border-radius: 9px !important; }
.row-fields { display: flex; gap: 12px; width: 100%; box-sizing: border-box; margin-bottom: 12px; }
#status, #destination { flex: 1 1 0; min-width: 0; }
.search-bar-pretty { width: 100%; margin: 14px 0 8px 0; display: flex; gap: 10px; align-items: center; }
#searchInput { width: 50%; box-sizing: border-box; padding: 10px; }
#filterStatus { width: 50%; box-sizing: border-box; padding: 10px; }
input, select, textarea { width: 100%; box-sizing: border-box; padding: 10px 8px; border: 1.2px solid #cfd8dc; border-radius: 8px; background: #fafcfe; font-size: 15px; text-align: right; direction: rtl; outline: none; transition: border 0.12s; font-family: inherit; color: #0b3b66;}
input:focus, select:focus, textarea:focus { border-color: #42a5f5; box-shadow: 0 6px 20px rgba(11,114,185,0.06); }
::placeholder { color: #9ab4d3; font-size: 13px; }
textarea { min-height: 56px; resize: vertical; }
button { background: linear-gradient(90deg,#0b72b9,#0b3b66); box-shadow: 0 4px 14px rgba(11,114,185,0.12); cursor: pointer; color: white; font-size: 16px; font-weight: 800; border-radius: 8px; border: none; padding: 10px 14px; transition: transform 0.08s ease, filter 0.12s ease;}
button:hover { transform: translateY(-2px); filter: brightness(.98); }
.notes-row { grid-column: 1 / 3;}
.row-end { display: flex; flex-direction: column; gap: 10px; grid-column: 1/3;}
.input-warning { display: block; color: #e53935; margin-top: 6px; font-size: 13px; font-family: inherit; text-align: right;}
#destination { max-width: 220px; }

/* Table - fixed layout with column percentages (18% / 54% / 28%) - no horizontal scrollbar */
.shipments-list { margin-top: 12px; }
.table-wrap { overflow-x: visible; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(11,114,185,0.03); padding: 0; }
.shipments-list table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
}
.shipments-list thead th,
.shipments-list td {
  padding: 8px 10px;
  border: 1px solid #e6f0f8;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.shipments-list thead th:nth-child(1),
.shipments-list tbody td:nth-child(1) { width: 18%; text-align: right; white-space: nowrap; }
.shipments-list thead th:nth-child(2),
.shipments-list tbody td:nth-child(2) { width: 54%; text-align: right; }
.shipments-list thead th:nth-child(3),
.shipments-list tbody td:nth-child(3) { width: 28%; text-align: right; }
.shipments-list td a { color: #0b72b9; text-decoration: none; font-weight: 800; display:inline-block; max-width:100%; }
.shipments-list thead th { background: linear-gradient(180deg,#f6fbff,#eef6ff); color:#0b72b9; font-weight:800; }

/* reduce side margins & paddings on mobile */
@media (max-width:720px){
  :root { --container-padding-desktop: 12px; --shipment-col-2: 56%; --shipment-col-3: 26%; }
  .main-wrapper { padding: 0 var(--main-padding-mobile); }
  .container { margin: 10px var(--main-padding-mobile); padding: var(--container-padding-mobile); border-radius: 10px; }
  input, select, textarea { padding: 8px 6px; font-size: 14px; }
  .form-grid { grid-template-columns: 1fr; gap: 10px; }
  #searchInput, #filterStatus { width: 100%; }
}

@media (max-width:420px){
  :root { --shipment-col-1: 16%; --shipment-col-2: 58%; --shipment-col-3: 26%; }
  h2 { font-size: 1.05rem; }
  input, select, textarea { font-size: 13px; padding: 7px 6px; }
  .shipments-list thead th, .shipments-list td { padding: 6px 8px; font-size: 13px; }
}