/* Same palette and components as the Transfer Data Tool admin (upload.kangaroo.vn). */
:root {
  --green: #2e8b3e; --green-dark: #236d30; --blue: #2a6fc9; --yellow: #f5c400;
  --bg: #eef0ee; --panel: #fff; --panel-head: #f3f4f3; --text: #222; --muted: #666; --line: #cfd4cf;
  --ok: #1f7a33; --warn: #8a6100; --err: #b3261e;
  --row-hover: #f6f8f6;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 Tahoma, "Segoe UI", Arial, sans-serif; }
a { color: var(--blue); }
[hidden] { display: none !important; }

header.top { background: var(--green); color: #fff; border-bottom: 3px solid var(--yellow); }
.top-inner { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.top-inner .brand { font-weight: bold; font-size: 17px; color: #fff; text-decoration: none; }
nav.menu { display: flex; gap: 4px; }
nav.menu a { color: #fff; text-decoration: none; padding: 4px 10px; border-radius: 2px; }
nav.menu a.active, nav.menu a:hover { background: rgba(0,0,0,.18); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.top-right form { margin: 0; }

main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 40px; }
.page-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
h1 { font-size: 18px; margin: 0; }
.intro { margin: 2px 0 12px; font-size: 13px; }
.status { font-size: 12px; }
.muted { color: var(--muted); }
.hint { font-weight: normal; font-size: 12px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; margin-bottom: 14px; }
.panel-head { background: var(--panel-head); border-bottom: 1px solid var(--line); padding: 7px 12px; font-weight: bold; }
.panel-body { padding: 12px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters label, .form-row > label { display: block; font-size: 12px; color: var(--muted); font-weight: bold; margin-bottom: 2px; }
.actions { display: flex; gap: 6px; }
fieldset.range { border: 1px solid var(--line); border-radius: 3px; padding: 4px 10px 8px; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
fieldset.range legend { font-size: 12px; color: var(--muted); font-weight: bold; padding: 0 4px; }
fieldset.range legend .hint { font-weight: normal; }
.filters fieldset.range label { display: inline; margin: 0; font-weight: normal; font-size: 13px; color: var(--text); }

input[type=text], input[type=password], input[type=date], input[type=search], select {
  padding: 5px 7px; border: 1px solid var(--line); border-radius: 2px; font: inherit; background: #fff; color: var(--text);
}

.btn { font: inherit; font-size: 13px; padding: 5px 14px; cursor: pointer; border-radius: 3px; border: 1px solid #a9aea9;
       background: linear-gradient(#fff, #e6e8e6); color: #222; text-decoration: none; display: inline-block; }
.btn:hover { background: linear-gradient(#f7f8f7, #dcdfdc); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { border-color: var(--green-dark); background: linear-gradient(#3aa04b, var(--green)); color: #fff; font-weight: bold; }
.btn-primary:hover { background: linear-gradient(#34963f, var(--green-dark)); }
.btn-small { padding: 2px 9px; font-size: 12px; }
.btn-link { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

.alert { padding: 8px 12px; border: 1px solid #e6a7a2; background: #fdecea; color: var(--err); border-radius: 3px; margin-bottom: 12px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 3px; padding: 8px 12px; }
.card .num { font-size: 20px; font-weight: bold; font-variant-numeric: tabular-nums; }
.card .lbl { font-size: 12px; color: var(--muted); }
.unit-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font: inherit; font-size: 12px; padding: 0 7px; border: 1px solid var(--line); border-radius: 2px; background: var(--panel-head); color: var(--text); cursor: pointer; }
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.active { background: var(--green); border-color: var(--green-dark); color: #fff; }
.card.ok { border-left-color: var(--ok); } .card.warn { border-left-color: var(--yellow); } .card.err { border-left-color: var(--err); }

/* Filter form on the left, the two summary cards on the right of the same row. */
.filter-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.filter-row .filters { flex: 0 1 auto; }
.cards-inline { flex: 1 1 320px; display: grid; grid-template-columns: auto 1fr; margin: 0; }
.cards-inline .card { padding: 6px 12px; }

.table-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.table-tools input[type=search] { flex: 1 1 240px; }
.table-tools .muted { margin-right: auto; font-size: 13px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 8px; border: 1px solid var(--line); white-space: nowrap; }
th { background: var(--panel-head); font-size: 12px; cursor: pointer; user-select: none; }
th.sorted-asc::after { content: " ▲"; }
th.sorted-desc::after { content: " ▼"; }
tbody tr:hover { background: var(--row-hover); }
td.empty { text-align: center; color: var(--muted); padding: 20px; }

.pagination { margin-top: 10px; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; font-size: 13px; }

.login-panel { max-width: 380px; margin: 40px auto; }
.login-panel .form-row input { width: 100%; }
.form-row { margin: 0 0 12px; }
.form-row .help, .help { font-size: 12px; color: var(--muted); margin-top: 3px; }
.checks label { display: inline-block; margin-right: 16px; font-weight: normal; color: var(--text); font-size: 14px; }
.w-360 { width: 360px; max-width: 100%; }
.w-320 { width: 320px; max-width: 100%; }
input:disabled { background: var(--panel-head); color: var(--muted); }

.top-link { color: #fff; }
.notice { padding: 8px 12px; border: 1px solid #9ccfa6; background: #e8f5eb; color: var(--ok); border-radius: 3px; margin-bottom: 12px; }
.back, .toolbar { margin: 0 0 10px; }
h1 + .panel, h1 + .alert, h1 + .notice { margin-top: 12px; }
.toolbar { margin-top: 12px; }
.panel-warn { border-color: #e0c56b; }
.panel-warn .panel-head { background: #fff8dc; }
code.secret { font-size: 16px; user-select: all; }
.btn-danger { border-color: #9d2a22; background: linear-gradient(#d04a40, var(--err)); color: #fff; }
.panel-body.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-body.actions form { margin: 0; }
table.plain th { cursor: default; }
.s { font-weight: bold; white-space: nowrap; }
.s-ok { color: var(--ok); } .s-err { color: var(--err); }
dl.meta { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; margin: 0; }
dl.meta dt { color: var(--muted); } dl.meta dd { margin: 0; }

@media (max-width: 800px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .panels { grid-template-columns: 1fr; }
}