/* =========================================================================
 * AsianNearby Admin Panel v2  (admin.asiannearby.com)
 * Self-contained stylesheet — does not depend on the public-site style.css.
 * Sidebar layout, light content surface, dark rail.
 * ========================================================================= */

:root {
  --bg:        #0f1117;
  --rail:      #161924;
  --rail-2:    #1d2130;
  --rail-line: #272c3d;
  --surface:   #f5f6f8;
  --card:      #ffffff;
  --line:      #e6e8ec;
  --line-2:    #eef0f3;
  --ink:       #1a1d27;
  --ink-soft:  #5b6170;
  --ink-faint: #8b909d;
  --brand:     #e5397f;
  --brand-2:   #ff5c95;
  --brand-ink: #ffffff;
  --accent:    #4f7cff;
  --ok:        #1f9d5b;
  --ok-bg:     #e4f6ec;
  --warn:      #c98a02;
  --warn-bg:   #fbf1d8;
  --danger:    #d6342c;
  --danger-bg: #fbe6e5;
  --muted-bg:  #eef0f3;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgba(16,18,27,.06), 0 6px 20px rgba(16,18,27,.05);
  --rail-w:    236px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.panel {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout shell ----------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  background: var(--rail);
  color: #c7ccda;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rail-line);
  z-index: 30;
}
.rail-brand {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--rail-line);
  color: #fff;
}
.rail-brand .mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #fff;
  letter-spacing: -.5px;
}
.rail-brand .txt { font-weight: 700; font-size: 15px; line-height: 1.15; }
.rail-brand .txt small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-faint); }

.rail-nav { padding: .75rem .6rem; overflow-y: auto; flex: 1; }
.rail-nav .group {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: #6c7488; padding: .9rem .8rem .35rem;
}
.rail-nav a {
  display: flex; align-items: center; gap: .7rem;
  padding: .56rem .8rem; margin: 1px 0;
  border-radius: var(--radius-sm);
  color: #c0c6d6; font-weight: 500; font-size: 13.6px;
}
.rail-nav a:hover { background: var(--rail-2); color: #fff; text-decoration: none; }
.rail-nav a.active { background: var(--rail-2); color: #fff; }
.rail-nav a.active .ico { color: var(--brand-2); }
.rail-nav .ico { width: 18px; text-align: center; color: #828aa0; font-size: 15px; }
.rail-nav a:hover .ico, .rail-nav a.active .ico { color: var(--brand-2); }
.rail-nav .badge-n {
  margin-left: auto; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700; min-width: 19px; height: 19px;
  border-radius: 10px; padding: 0 6px; display: grid; place-items: center;
}
.rail-foot {
  border-top: 1px solid var(--rail-line);
  padding: .85rem 1rem; font-size: 12.5px; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.rail-foot form { margin: 0; }
.rail-foot .who { overflow: hidden; }
.rail-foot .who b { color: #e7eaf2; font-weight: 600; display: block; font-size: 13px; }

.content { flex: 1; margin-left: var(--rail-w); min-width: 0; }

/* ---- Topbar ----------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.6rem;
  background: rgba(245,246,248,.85);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.2px; }
.topbar .sub { color: var(--ink-faint); font-size: 13px; margin-top: 1px; }
.topbar .spacer { flex: 1; }
.burger { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink); }

.page { padding: 1.6rem; max-width: 1280px; }

/* ---- Cards / sections ------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 1.15rem 1.25rem; }
.card-head {
  display: flex; align-items: center; gap: .75rem;
  padding: .95rem 1.25rem; border-bottom: 1px solid var(--line-2);
}
.card-head h2 { font-size: 15px; font-weight: 700; margin: 0; }
.card-head .spacer { flex: 1; }
.section { margin-bottom: 1.4rem; }

/* ---- Stat cards ------------------------------------------------------- */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 1.4rem; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.15rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.stat .l { color: var(--ink-soft); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: .45rem; }
.stat .n { font-size: 27px; font-weight: 800; letter-spacing: -.5px; margin-top: .35rem; }
.stat .d { font-size: 12px; margin-top: .25rem; color: var(--ink-faint); }
.stat .d.up { color: var(--ok); }
.stat .ico { color: var(--brand); font-size: 15px; }
.stat.accent { background: linear-gradient(135deg, #1d2130, #2a2140); border-color: #34304a; color: #fff; }
.stat.accent .l { color: #b9bed0; }
.stat.accent .n { color: #fff; }

/* ---- Tables ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13.6px; }
table.grid th {
  text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: .65rem .9rem; border-bottom: 1px solid var(--line);
  background: #fafbfc; white-space: nowrap; position: sticky; top: 0;
}
table.grid td { padding: .7rem .9rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover { background: #fafbfd; }
table.grid .num { font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.empty { padding: 2.2rem; text-align: center; color: var(--ink-faint); }

/* ---- User cell -------------------------------------------------------- */
.ucell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--muted-bg); flex: 0 0 auto; }
.ava.lg { width: 76px; height: 76px; }
.ucell .nm { font-weight: 600; color: var(--ink); }
.ucell .hd { color: var(--ink-faint); font-size: 12px; }

/* ---- Badges / pills --------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .55rem; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; text-transform: capitalize;
  background: var(--muted-bg); color: var(--ink-soft); white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill.flat::before { display: none; }
.pill.active, .pill.verified, .pill.approved, .pill.granted { background: var(--ok-bg); color: var(--ok); }
.pill.pending, .pill.open { background: var(--warn-bg); color: var(--warn); }
.pill.suspended, .pill.deleted, .pill.rejected, .pill.dismissed, .pill.denied { background: var(--danger-bg); color: var(--danger); }
.pill.admin { background: #ece9ff; color: #6b4bff; }
.pill.none { background: var(--muted-bg); color: var(--ink-faint); }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
  text-decoration: none;
}
.btn:hover { background: #f3f4f6; text-decoration: none; }
.btn.sm { padding: .34rem .6rem; font-size: 12px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: #d12b6f; }
.btn.dark { background: var(--rail-2); border-color: var(--rail-2); color: #fff; }
.btn.dark:hover { background: #262b3d; }
.btn.danger { background: #fff; border-color: var(--danger-bg); color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: var(--muted-bg); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.inline { display: inline; margin: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---- Forms ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: .3rem; }
label.lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.input, select.input, textarea.input {
  width: 100%; padding: .55rem .7rem; font-family: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,124,255,.15); }
.toolbar { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.toolbar .input { width: auto; }
.search { position: relative; }
.search .input { padding-left: 2rem; min-width: 240px; }
.search .mag { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); }

/* ---- Tabs / filter chips --------------------------------------------- */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  padding: .35rem .8rem; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.chip:hover { text-decoration: none; background: #f3f4f6; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- Pagination ------------------------------------------------------- */
.pager { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; justify-content: flex-end; }
.pager .info { color: var(--ink-faint); font-size: 12.5px; margin-right: auto; }

/* ---- Flash ------------------------------------------------------------ */
.flash {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 1.6rem; margin-top: 1.1rem;
  padding: .7rem 1rem; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; border: 1px solid transparent;
}
.flash .x { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 17px; opacity: .6; color: inherit; }
.flash-success { background: var(--ok-bg); color: #136b3e; border-color: #b9e6cc; }
.flash-error { background: var(--danger-bg); color: #97231d; border-color: #f3c6c3; }
.flash-info { background: #e7efff; color: #29457f; border-color: #c5d8fb; }

/* ---- Detail layout ---------------------------------------------------- */
.detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.4rem; align-items: start; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: .5rem .8rem; font-size: 13.5px; }
.kv dt { color: var(--ink-faint); }
.kv dd { margin: 0; color: var(--ink); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--muted-bg); }
.photo-grid .ph { position: relative; }
.photo-grid .ph .tag { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.7); color: #fff; font-size: 9.5px; padding: 1px 5px; border-radius: 5px; }
.msg-body { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.muted { color: var(--ink-faint); }
.crumb { color: var(--ink-faint); font-size: 13px; margin-bottom: .15rem; }
.crumb a { color: var(--ink-faint); }
.note { background: #fafbfc; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .6rem .75rem; font-size: 13px; }

/* ---- Login ------------------------------------------------------------ */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(1200px 500px at 50% -10%, #2a2140 0%, #0f1117 55%); }
.login-card { width: 100%; max-width: 380px; background: var(--card); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4); padding: 2rem; }
.login-card .mark { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto .9rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 18px; }
.login-card h1 { text-align: center; font-size: 20px; margin: 0 0 .2rem; }
.login-card p.s { text-align: center; color: var(--ink-faint); font-size: 13px; margin: 0 0 1.4rem; }
.login-card .field { margin-bottom: .85rem; }
.login-card .btn { width: 100%; padding: .65rem; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .rail { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.nav-open .rail { transform: translateX(0); }
  .content { margin-left: 0; }
  .burger { display: block; }
  .detail-grid { grid-template-columns: 1fr; }
  .scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; }
  body.nav-open .scrim { display: block; }
}