/**
 * Rainbow UI v5 — Demo full parity (My Rainbow WMS)
 * Match React demo tokens + top-nav shell + card lists
 */
:root {
  --rb-bg: #f3f3f4;
  --rb-surface: #ffffff;
  --rb-surface-2: #f9f9f9;
  --rb-ink: #676a6c;
  --rb-heading: #333333;
  --rb-muted: #888888;
  --rb-subtle: #a7b1c2;
  --rb-border: #e7eaec;
  --rb-border-strong: #ddd;
  --rb-nav: #2f4050;
  --rb-nav-hover: #293846;
  --rb-accent: #1690d8;
  --rb-accent-hover: #0f6fad;
  --rb-accent-soft: #e8f4fb;
  --rb-ok: #1ab394;
  --rb-danger: #ed5565;
  --rb-warn: #f8ac59;
  --rb-radius: 3px;
  --rb-font: "open sans", "Helvetica Neue", Helvetica, "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
}

html, body, body.gray-bg, body.pace-done, body.fixed-sidebar, body.rb-topnav {
  background: var(--rb-bg) !important;
  font-family: var(--rb-font) !important;
  color: var(--rb-ink);
  font-size: 13px;
  line-height: 1.42857143;
}
#page-wrapper, .wrapper-content, .dashbard-1 { background: var(--rb-bg) !important; }
.wrapper-content { padding: 10px 12px !important; }
.wrapper.wrapper-content.animated { animation: none !important; }

/* Hide any old version badges */
body::before { display: none !important; content: none !important; }

/* ===== TOP NAV SHELL ===== */
body.rb-topnav .navbar-static-side { display: none !important; width: 0 !important; }
body.rb-topnav #page-wrapper {
  margin: 0 !important; width: 100% !important; padding: 0 !important;
  min-height: 100vh !important; background: var(--rb-bg) !important;
}
body.rb-topnav #wrapper { overflow: hidden; }

/* Content chrome */
.ibox {
  border: 1px solid var(--rb-border) !important;
  border-radius: var(--rb-radius) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.05) !important;
  background: var(--rb-surface) !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}
.ibox-title {
  border-bottom: 1px solid var(--rb-border) !important;
  background: #fff !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
}
.ibox-title h5 {
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--rb-heading) !important; margin: 0 !important;
}
.ibox-content { background: #fff !important; padding: 12px 14px !important; }

.form-control {
  height: 26px !important; padding: 2px 6px !important; font-size: 11px !important;
  border-radius: 2px !important; border: 1px solid var(--rb-border-strong) !important;
  box-shadow: none !important; color: var(--rb-heading) !important;
}
label, label.inline { font-size: 11px !important; color: var(--rb-ink) !important; font-weight: 400 !important; }

.btn {
  border-radius: 3px !important; font-size: 12px !important; font-weight: 400 !important;
  padding: 4px 10px !important;
}
.btn-xs { font-size: 11px !important; padding: 1px 6px !important; line-height: 1.5 !important; }
.btn-primary {
  background: var(--rb-accent) !important; border-color: var(--rb-accent) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--rb-accent-hover) !important; border-color: var(--rb-accent-hover) !important;
}
.btn-primary.btn-outline {
  color: var(--rb-accent) !important; background: #fff !important;
  border-color: rgba(22,144,216,.45) !important;
}
.btn-primary.btn-outline:hover {
  color: #fff !important; background: var(--rb-accent) !important; border-color: var(--rb-accent) !important;
}
.btn-danger, .btn-danger.btn-outline {
  color: var(--rb-danger) !important; background: #fff !important;
  border-color: rgba(237,85,101,.5) !important;
}
.btn-danger:hover, .btn-danger.btn-outline:hover {
  color: #fff !important; background: var(--rb-danger) !important; border-color: var(--rb-danger) !important;
}
.hr-line-dashed {
  border-top: 1px dashed var(--rb-border) !important; margin: 10px 0 !important;
  background: transparent !important; height: 0 !important; color: transparent !important;
}

.list_user a, .list_user .btn {
  display: inline-block !important; margin: 2px 4px 2px 0 !important;
  padding: 4px 10px !important; font-size: 11px !important; font-weight: 500 !important;
  border-radius: 3px !important; border: 1px solid rgba(22,144,216,.45) !important;
  background: #fff !important; color: var(--rb-accent) !important; text-decoration: none !important;
}
.list_user a:hover { background: var(--rb-accent) !important; color: #fff !important; }

/* Content tabs under top menu — demo-like thin bar */
body.rb-topnav .content-tabs {
  background: #fff !important;
  border-bottom: 1px solid var(--rb-border) !important;
  height: 36px !important;
  margin: 0 !important;
}
body.rb-topnav .page-tabs a {
  color: var(--rb-muted) !important; font-size: 12px !important;
  line-height: 34px !important; border: 0 !important;
}
body.rb-topnav .page-tabs a.active {
  background: var(--rb-accent-soft) !important;
  color: var(--rb-accent) !important;
  border-bottom: 2px solid var(--rb-accent) !important;
}
body.rb-topnav .roll-nav {
  background: #fff !important; color: var(--rb-muted) !important;
  border: 0 !important; height: 36px !important; line-height: 36px !important;
}
body.rb-topnav .J_mainContent {
  height: calc(100vh - 50px - 40px - 36px - 28px) !important;
}
body.rb-topnav .footer {
  background: #fff !important; border-top: 1px solid var(--rb-border) !important;
  height: 28px !important; line-height: 28px !important; margin: 0 !important;
  padding: 0 12px !important; font-size: 11px !important; color: var(--rb-muted) !important;
}

/* Card list */
.rb-card-list, .rb-plan-list { display: flex; flex-direction: column; gap: 10px; }
.rb-card, .rb-plan-card {
  border: 1px solid var(--rb-border);
  border-left: 3px solid var(--rb-accent);
  border-radius: var(--rb-radius);
  background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  overflow: hidden;
}
.rb-card.rb-danger { border-left-color: var(--rb-danger); }
.rb-card-row { display: flex; flex-wrap: wrap; align-items: stretch; }
.rb-card-main { flex: 1; min-width: 0; padding: 12px 14px; }
.rb-card-title {
  font-size: 14px; font-weight: 600; color: var(--rb-heading);
  font-family: Consolas, Menlo, monospace;
}
.rb-card-sub { font-size: 12px; color: var(--rb-muted); margin-top: 3px; line-height: 1.45; }
.rb-card-actions {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--rb-border); background: #fafbfc;
}
@media (min-width: 960px) {
  .rb-card-actions {
    border-top: 0; border-left: 1px solid var(--rb-border);
    flex-direction: column; justify-content: center; min-width: 108px;
  }
}
.rb-kv {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px 12px; margin-top: 8px;
}
.rb-kv > div { font-size: 11px; color: var(--rb-muted); }
.rb-kv > div b {
  display: block; color: var(--rb-heading); font-size: 12px; font-weight: 600;
  margin-top: 1px; white-space: pre-wrap;
}
.rb-badge {
  display: inline-block; padding: 1px 6px; border-radius: 2px;
  font-size: 10px; font-weight: 600; background: var(--rb-surface-2);
  border: 1px solid var(--rb-border); color: var(--rb-ink);
}
.rb-badge-info { background: var(--rb-accent-soft); border-color: #b6dff5; color: var(--rb-accent); }
.rb-badge-ok { background: #e7f7f4; border-color: #b8ebe0; color: var(--rb-ok); }
.rb-empty {
  text-align: center; padding: 40px 16px; color: var(--rb-subtle);
  border: 1px dashed var(--rb-border); border-radius: 3px; background: #fafafa;
}
.rb-pre { white-space: pre-wrap; font-family: inherit; margin: 0; font-size: 11px; color: var(--rb-heading); line-height: 1.4; }

/* Plan */
.rb-plan-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px;
  padding: 12px 14px; background: #f7f9fc; border-bottom: 1px solid var(--rb-border);
}
.rb-plan-no { font-size: 16px; font-weight: 700; color: var(--rb-heading); min-width: 56px; }
.rb-plan-meta { font-size: 12px; color: var(--rb-muted); flex: 1; min-width: 180px; }
.rb-plan-meta strong { color: var(--rb-heading); }
.rb-plan-remark { font-size: 12px; color: #374151; line-height: 1.45; max-width: 420px; }
.rb-plan-files { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.rb-plan-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.rb-plan-uld-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rb-plan-uld-table th {
  background: #f5f5f6; color: var(--rb-muted); font-size: 10px; font-weight: 600;
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rb-border);
}
.rb-plan-uld-table td { padding: 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.rb-plan-uld-table .mono { font-family: Consolas, Menlo, monospace; font-weight: 600; color: var(--rb-accent); }

/* ⋯ menu */
.rb-more { position: relative; display: inline-block; vertical-align: middle; }
.rb-more-menu {
  display: none; position: absolute; right: 0; top: 100%; z-index: 1000;
  min-width: 148px; margin-top: 2px; padding: 4px 0; background: #fff;
  border: 1px solid var(--rb-border); border-radius: 3px; box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.rb-more.open .rb-more-menu { display: block; }
.rb-more-menu a {
  display: block; padding: 7px 12px; font-size: 11px;
  color: var(--rb-heading) !important; text-decoration: none !important;
}
.rb-more-menu a:hover { background: var(--rb-surface-2); color: var(--rb-accent) !important; }

/* Tables still used on secondary pages */
.table-bordered { border-color: var(--rb-border) !important; }
.table-bordered > thead > tr > th {
  background: #f5f5f6 !important; color: var(--rb-muted) !important;
  font-size: 11px !important; font-weight: 600 !important; border-color: var(--rb-border) !important;
}
.table-bordered > tbody > tr > td {
  border-color: var(--rb-border) !important; font-size: 12px !important; vertical-align: top !important;
}
.table-bordered > tbody > tr.main-data > td {
  background: #f9f9f9 !important; border-left: 3px solid var(--rb-accent);
}
.option-btn-group { position: static !important; white-space: normal !important; }
.table-responsive, .example, .example-wrap { overflow: visible !important; }
.strikethrough-red, tr.strikethrough-red td {
  color: var(--rb-danger) !important; text-decoration: line-through;
}
.spiner-example { background: rgba(243,243,244,.7) !important; }

/* Login page if present */
body.signin { background: var(--rb-bg) !important; }

@media (max-width: 768px) {
  .wrapper-content { padding: 8px !important; }
  .ibox-content { padding: 10px !important; }
}


/* ===== v5.1 Demo registration cards (pixel-closer) ===== */
.rb-card-list { gap: 8px !important; }
.rb-card {
  border-left: 0 !important;
  border-radius: 3px !important;
}
.rb-card-demo {
  border: 1px solid #e7eaec;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}
.rb-card-demo-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-left: 4px solid #1690d8;
}
.rb-card-demo-main {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}
.rb-card-demo-line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.rb-so {
  font-family: Consolas, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #1690d8;
}
.rb-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid #e7eaec;
  background: #f5f5f6;
  color: #676a6c;
  text-transform: uppercase;
}
.rb-chip-air { background: #e6fafb; border-color: #b8e8ea; color: #1a9a9c; }
.rb-chip-sea { background: #e7f7f4; border-color: #b8ebe0; color: #1ab394; }
.rb-chip-port { background: #fff; }
.rb-user-name { font-size: 12px; font-weight: 600; color: #333; }
.rb-card-demo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: 11px;
  color: #888;
}
.rb-card-demo-meta strong {
  color: #333;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rb-card-demo-charges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.rb-charge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  border: 1px solid #e7eaec;
  background: #f9f9f9;
  color: #333;
}
.rb-charge.is-zero {
  border-color: transparent;
  background: transparent;
  color: #a7b1c2;
}
.rb-charge-sum {
  background: #e8f4fb;
  border-color: #b6dff5;
  color: #1690d8;
  font-weight: 700;
}
.rb-card-demo-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid #e7eaec;
  background: #fafbfc;
}
@media (min-width: 900px) {
  .rb-card-demo-acts {
    border-top: 0;
    border-left: 1px solid #e7eaec;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    max-width: 280px;
    min-width: 200px;
    justify-content: flex-end;
  }
}
.rb-act-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  background: #1690d8 !important;
  border: 1px solid #1690d8 !important;
  color: #fff !important;
}
.rb-act-primary:hover { background: #0f6fad !important; border-color: #0f6fad !important; color: #fff !important; }
.rb-act-outline {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  background: #fff !important;
  border: 1px solid rgba(22,144,216,.4) !important;
  color: #1690d8 !important;
}
.rb-act-outline:hover { background: #1690d8 !important; color: #fff !important; }
.rb-act-ghost {
  display: inline-flex !important;
  align-items: center;
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  background: #fff !important;
  border: 1px solid #e7eaec !important;
  color: #676a6c !important;
}
.rb-act-receipt-on {
  background: #0000cc !important;
  border-color: #0000cc !important;
  color: #fff !important;
}
.rb-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.rb-filterbar .rb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.rb-filterbar label {
  display: block;
  font-size: 11px !important;
  color: #888 !important;
  margin: 0 !important;
}
.rb-filterbar .form-control {
  margin-top: 2px;
  width: auto !important;
  display: inline-block;
}


/* ===== v5.2 Truck Order demo cards ===== */
.rb-to-card {
  border: 1px solid #e7eaec;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
  margin: 0;
}
.rb-to-card.is-red { border-color: rgba(237,85,101,.35); }
.rb-to-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-left: 4px solid #1690d8;
}
.rb-to-card.is-red .rb-to-inner { border-left-color: #ed5565; }
.rb-to-main { flex: 1; min-width: 0; padding: 10px 12px; }
.rb-to-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
}
.rb-to-client {
  font-size: 13px; font-weight: 700; color: #333;
}
.rb-to-card.is-red .rb-to-client {
  color: #ed5565; text-decoration: line-through;
}
.rb-to-date { font-size: 11px; color: #888; font-variant-numeric: tabular-nums; }
.rb-to-plate {
  font-family: Consolas, Menlo, monospace;
  font-size: 10px;
  background: #f5f5f6;
  border: 1px solid #e7eaec;
  border-radius: 2px;
  padding: 1px 6px;
  color: #333;
  white-space: pre-line;
}
.rb-to-ft {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .rb-to-ft { grid-template-columns: 1fr; }
}
.rb-to-box {
  border: 1px solid #e7eaec;
  border-radius: 3px;
  background: #f9f9f9;
  padding: 8px 10px;
  min-height: 48px;
}
.rb-to-box-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.rb-to-box-body {
  font-size: 11px;
  color: #333;
  white-space: pre-wrap;
  line-height: 1.45;
  margin: 0;
  font-family: inherit;
}
.rb-to-card.is-red .rb-to-box-body { color: #ed5565; }
.rb-to-table-wrap {
  margin-top: 8px;
  overflow-x: auto;
  border: 1px solid #e7eaec;
  border-radius: 3px;
}
.rb-to-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}
.rb-to-table thead th {
  background: #f5f5f6;
  color: #888;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 5px 8px;
  border-bottom: 1px solid #e7eaec;
}
.rb-to-table tbody td {
  padding: 6px 8px;
  border-top: 1px solid #eee;
  vertical-align: top;
  color: #333;
}
.rb-to-table tbody tr:nth-child(even) { background: #fafbfc; }
.rb-to-table .so {
  font-family: Consolas, Menlo, monospace;
  font-weight: 600;
  color: #1690d8;
}
.rb-to-card.is-red .rb-to-table .so,
.rb-to-card.is-red .rb-to-table td { color: #ed5565; }
.rb-to-remark {
  margin: 8px 0 0;
  font-size: 11px;
  color: #333;
  line-height: 1.45;
}
.rb-to-card.is-red .rb-to-remark { color: #ed5565; }
.rb-to-docs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.rb-to-doc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  border: 1px solid #c3e6cb;
  background: #dff0d8;
  color: #3c763d;
  text-decoration: none !important;
}
.rb-to-doc:hover { background: #c8e6c9; color: #2b542c !important; }
.rb-to-log {
  margin-top: 6px;
  font-size: 10px;
  color: #a7b1c2;
  white-space: pre-line;
}
.rb-to-acts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid #e7eaec;
  background: #fafbfc;
  min-width: 100px;
}
@media (min-width: 900px) {
  .rb-to-acts {
    border-top: 0;
    border-left: 1px solid #e7eaec;
  }
}
.rb-to-acts .rb-act-primary,
.rb-to-acts .rb-act-outline,
.rb-to-acts .rb-act-ghost,
.rb-to-acts .rb-act-danger {
  justify-content: center !important;
  width: 100%;
  text-align: center;
}
.rb-act-danger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  background: #fff !important;
  border: 1px solid rgba(237,85,101,.45) !important;
  color: #ed5565 !important;
  text-decoration: none !important;
}
.rb-act-danger:hover {
  background: #ed5565 !important;
  color: #fff !important;
}