/* Minimal custom CSS layered on top of Tailwind CDN.
   Only contains: button-look, pills, copy button SVG masks, table polish,
   COD highlighting, payload <pre>, flash messages. Layout/spacing/responsive
   are done with Tailwind utility classes directly in templates. */

:root {
  --accent: #0a0a0a;
  --muted: #78716c;       /* stone-500 */
  --border: #e7e5e4;      /* stone-200 */
  --surface: #ffffff;
  --bg: #fafaf9;          /* stone-50 */
  --prepaid: #15803d;     /* green-700 */
  --prepaid-bg: #f0fdf4;  /* green-50 */
}

* { box-sizing: border-box; }
html, body { font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* ===== Buttons ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { background: var(--accent); color: var(--surface); }
.btn-primary { background: var(--accent); color: var(--surface); }
.btn-primary:hover { background: var(--surface); color: var(--accent); }
.btn-ghost { border-color: var(--border); color: #44403c; }
.btn-ghost:hover { background: #f5f5f4; color: var(--accent); border-color: var(--accent); }
.btn-danger { border-color: #b91c1c; color: #b91c1c; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 11px; gap: 4px; }
.btn-icon { padding: 6px 8px; }

/* ===== Copy button ========================================================= */
.btn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  margin-left: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.12s;
  text-transform: uppercase;
  font-family: inherit;
  white-space: nowrap;
}
.btn-copy::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z'/></svg>") no-repeat center / contain;
}
.btn-copy:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.btn-copy.copied { background: var(--prepaid); color: var(--surface); border-color: var(--prepaid); }
.btn-copy.copied::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/></svg>") no-repeat center / contain;
}

/* ===== Pills =============================================================== */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.pill-prepaid { background: var(--prepaid-bg); color: var(--prepaid); border: 1px solid #bbf7d0; }
.pill-warn { background: #FFF5D9; color: #8A6D00; border: 1px solid #F2DDA0; }
.pill-ttn { background: var(--accent); color: var(--surface); border: 1px solid var(--accent); padding: 4px 10px; font-size: 13px; font-family: "SF Mono", Consolas, "Liberation Mono", monospace; }
.pill-no-cod { background: #FDECEC; color: #8A2929; border: 1px solid #F2C5C5; font-weight: 500; padding: 4px 10px; font-size: 12px; }
.pill-shipping { padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.pill-shipping-kyiv { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.pill-shipping-zht { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* NP status pills (status tracking column) */
.status-created  { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; padding: 4px 10px; font-size: 11px; }
.status-transit  { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; padding: 4px 10px; font-size: 11px; }
.status-ready    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; padding: 4px 10px; font-size: 11px; font-weight: 600; }
.status-done     { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; padding: 4px 10px; font-size: 11px; }
.status-deleted  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 4px 10px; font-size: 11px; }
.status-refused  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 4px 10px; font-size: 11px; font-weight: 600; }
.status-unknown  { background: #f5f5f4; color: #57534e; border: 1px solid #e7e5e4; padding: 4px 10px; font-size: 11px; }

/* ===== Nav tabs ============================================================ */
.nav-tab {
  display: inline-block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #78716c;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.nav-tab:hover { color: var(--accent); }
.nav-tab-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== Inputs ============================================================== */
.input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 14px;
  color: #1c1917;
  font-family: inherit;
  min-width: 200px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,10,10,0.06); }
.input-xs { padding: 5px 8px; font-size: 12px; min-width: 0; }

/* ===== Table =============================================================== */
table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
table.data th,
table.data td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  background: #fafaf9;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #fafaf9; }

/* Sticky table header — stays visible while scrolling long lists. */
table.data thead th {
  position: sticky;
  top: 0;
  background: #fafaf9;
  z-index: 3;
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Sortable headers: cursor + arrow indicator, set by JS via [data-sortable]. */
table.data thead th.sortable {
  cursor: pointer;
  user-select: none;
}
table.data thead th.sortable:hover { background: #f3f4f6; }
.sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: #d4d4d8;
  transition: color 120ms;
}
table.data thead th[data-dir] { color: #18181b; }
table.data thead th[data-dir] .sort-arrow { color: #18181b; }

.table-scroll { overflow-x: auto; }

/* Floating horizontal scrollbar mirror for wide tables — wired up by the
   script in base.html. Stays pinned to the viewport bottom while the table
   itself extends below the fold, so you don't have to scroll to the end of
   a long table to reach the slider. Toggled via .visible from JS. */
.table-scroll-proxy {
  position: fixed;
  bottom: 0;
  z-index: 40;
  overflow-x: auto;
  overflow-y: hidden;
  height: 16px;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
  display: none;
}
.table-scroll-proxy.visible { display: block; }
.table-scroll-proxy > .inner { height: 1px; }

/* ===== Misc helpers ======================================================== */
.muted { color: var(--muted); }
.mono { font-family: "SF Mono", Consolas, "Liberation Mono", monospace; font-size: 13px; }
.cod-amount { font-weight: 600; font-size: 15px; }
code { font-family: "SF Mono", Consolas, monospace; background: #f5f5f4; padding: 1px 6px; border-radius: 3px; font-size: 12px; }

/* ===== Flash messages ====================================================== */
.msg {
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  margin-bottom: 8px;
}
.msg-success { background: var(--prepaid-bg); border-color: #bbf7d0; color: var(--prepaid); }
.msg-error { background: #FDECEC; border-color: #F2C5C5; color: #8A2929; }
.msg-warning { background: #FFF5D9; border-color: #F2DDA0; color: #8A6D00; }
.msg-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* ===== Inline warning under TTN =========================================== */
.warning-inline {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  background: #FFF5D9;
  color: #8A6D00;
  border: 1px solid #F2DDA0;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.3;
  max-width: 100%;
}

/* ===== Payload <pre> block ================================================ */
.payload-row td { background: #fafaf9; padding: 8px 14px 14px; }
.payload {
  margin: 8px 0 0;
  padding: 14px 16px;
  background: #fffdf6;
  border: 1px solid #f0e8d0;
  border-radius: 6px;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  color: #3a2f00;
  overflow: auto;
  max-height: 420px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===== Cards (sender info, print page) ===================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.card-title { font-family: Georgia, serif; font-size: 16px; color: var(--accent); }
.def-list { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.def-list dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding-top: 2px; }
.def-list dd { margin: 0; }

/* ===== Empty / placeholder ================================================= */
.empty {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* ===== Form rows =========================================================== */
.ttn-create-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ===== Source link ========================================================= */
.source-link { color: var(--muted); font-size: 12px; text-decoration: none; }
.source-link:hover { color: var(--accent); }