/* Staff panel chrome. Semantic UI still styles tables/forms; this file is the look. */
:root {
  --side: #fff;
  --side-2: #eef5ff;
  --muted: #6b7280;
  --green: #4094f7;
  --slate: #8ea0b5;
  --link: #2b7de9;
  --line: #e6eaf0;
  --text: #1c2430;
  --page: #f3f5f8;
  --field: #fff;
  --field-line: #d7dee8;
  --radius: 6px;
}
html, body, #app { margin: 0; height: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 13px; color: var(--text); background: var(--page); overflow: hidden; min-width: 0;
}

.ui.slate.button { background: var(--slate); color: #fff; text-shadow: none; border-radius: var(--radius); }
.ui.slate.button:hover, .ui.slate.button:focus { background: #7a8ea4; color: #fff; }
.ui.slate.button:active { background: #6d8197; color: #fff; }
.ui.green.button { background: var(--green); color: #fff; text-shadow: none; border-radius: var(--radius); }
.ui.green.button:hover, .ui.green.button:focus { background: #2f84ea; color: #fff; }
.ui.button { font-size: 13px; border-radius: var(--radius); }
.ui.mini.button { font-size: 11px; }

.shell { display: flex; height: 100%; min-height: 0; overflow: hidden; }
.side {
  width: 220px; flex: 0 0 220px; height: 100%; background: var(--side); color: var(--text);
  display: flex; flex-direction: column; border-right: 1px solid var(--line);
}
.backdrop { display: none; }
.menu-btn { display: none; }
.logo { padding: 18px 16px 10px; font-weight: 600; font-size: 16px; letter-spacing: .2px; color: var(--text); }
.logo span { color: var(--green); }
.logo small { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .8px; color: var(--muted); font-weight: 600; }
.nav { flex: 1; overflow: auto; padding-bottom: 8px; }
.side .sec { color: var(--text); font-size: 13px; font-weight: 600; padding: 14px 16px 4px; }
.side .item, .side .sub {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; color: var(--muted); text-align: left;
  padding: 8px 16px; font: inherit; cursor: pointer; border-radius: 0;
}
.side .sub { padding-left: 28px; }
.side .item.active, .side .sub.active { background: var(--side-2); color: var(--green); font-weight: 600; }
.side .item:hover, .side .sub:hover { color: var(--text); background: #f7f9fc; }
.side-foot { padding: 12px 14px 16px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.lang { color: var(--muted); font-size: 12px; }
.users-head { color: var(--text); font-size: 13px; font-weight: 600; padding: 12px 16px 2px; }
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--page); overflow: auto; }
.topbar, .header {
  position: sticky; top: 0; z-index: 3; flex: 0 0 auto; background: #fff;
  min-height: 50px; height: 50px; border-bottom: 1px solid var(--line); display: flex; align-items: center;
  justify-content: flex-end; gap: 18px; padding: 0 16px; font-size: 13px;
}
.header__meta { display: flex; align-items: center; gap: 18px; color: var(--muted); margin-right: auto; }
.header__meta b { color: var(--text); font-weight: 600; }
.et-language { color: var(--muted); font-size: 13px; }
.et-language__top { line-height: 17px; }
.header__out {
  height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius);
  background: var(--green); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.header__out:hover { background: #2f84ea; }
.topbar select {
  height: 30px; border: 1px solid var(--field-line); border-radius: var(--radius);
  background: var(--field); font: inherit; padding: 0 8px; color: var(--text);
}
.site-pick { color: var(--muted); }
.topbar #site-pick { font-weight: 600; }
.who-wrap { display: contents; }
.who { color: var(--muted); }
.who b { color: var(--text); font-weight: 600; }
.menu-btn i.icon, .topbar #top-out i.icon, .header__out i.icon { display: none; }
.content { padding: 0 0 24px; }
.content > .crumb, .content > h2, .content > .panel, .content > .err { padding: 16px 16px 0; }
.crumb { color: var(--muted); }
.err { color: #c0392b; min-height: 16px; margin: 6px 0; }
.content > .err:empty { display: none; }

.ui.form.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; margin: 0; background: #fff; padding: 16px; border-bottom: 1px solid var(--line); }
.ui.form.filters .field { margin: 0; }
.ui.form input, .ui.form select {
  border-radius: var(--radius) !important;
  border-color: var(--field-line) !important;
}
.filters-toggle { display: none; }
.filter-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.filter-actions .right { display: flex; gap: 8px; }
#reset, #x-reset { min-width: 140px; }

.table-wrap { overflow-x: auto; margin-top: 0; padding: 0 16px; background: #fff; -webkit-overflow-scrolling: touch; }
.ui.table { margin: 0; min-width: 640px; font-size: 12px; border: 0; border-radius: 0; }
.ui.table.users-table { min-width: 1660px; }
.ui.table th, .ui.table td { text-align: center; vertical-align: middle; }
.ui.table th.num, .ui.table td.num { text-align: right; white-space: nowrap; }
.ui.table thead th { white-space: nowrap; background: #fff; color: #6b7280; font-weight: 500; padding-top: .9em; padding-bottom: .9em; }
.ui.table tbody td { padding-top: .5em; padding-bottom: .5em; }
.iconlink { background: none; border: 0; padding: 0 4px; color: #2f3337; font-size: 14px; line-height: 1; cursor: pointer; }
.iconlink i.icon { margin: 0; }
.iconlink:hover { color: #000; }
.ui.table th .sort { background: none; border: 0; font: inherit; padding: 0; cursor: pointer; color: inherit; }
.ui.table th .sort .arr { color: #9aa1a9; letter-spacing: -1px; }
.ui.table th .sort.on .arr { color: var(--green); }
.ui.table tbody tr:hover td { background: #f8fafc; }
.ui.table tr.st-banned td, .ui.table tr.st-banned:hover td { background: #fdf0f0; }
.ui.table tr.st-suspended td, .ui.table tr.st-suspended:hover td { background: #fdf8ee; }
.ui.table tr.st-closed td, .ui.table tr.st-closed:hover td { background: #f6f7f8; }
.ui.table .link, .link { color: var(--link); text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.link:hover { color: #0d4894; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 10px; border: 1px solid; border-radius: 11px; font-size: 11px;
}
.chip i.icon { margin: 0; font-size: 11px; height: auto; }
.chip-banned { color: #c0392b; background: #fdeaea; border-color: #eeb3b3; }
.chip-suspended { color: #b26a00; background: #fdf4e5; border-color: #e9c993; }
.chip-closed { color: #5d6469; background: #f1f2f4; border-color: #d5d8dc; }
.chip-games { color: #5d6469; background: #f1f2f4; border-color: #d5d8dc; }
.tree-name { text-align: left !important; }

.ui.table tr.tree-row.st-active.lvl-1 td, .ui.table tr.tree-row.st-active.lvl-1:hover td { background: #efefef; }
.ui.table tr.tree-row.st-active.lvl-2 td, .ui.table tr.tree-row.st-active.lvl-2:hover td { background: #e2e2e2; }
.ui.table tr.tree-row.st-active.lvl-3 td, .ui.table tr.tree-row.st-active.lvl-3:hover td { background: #d5d5d5; }
.ui.table tr.tree-row.st-active.lvl-4 td, .ui.table tr.tree-row.st-active.lvl-4:hover td { background: #c8c8c8; }
.tree-toggle { color: var(--green); }
.tree-toggle:hover { color: #2f84ea; }
.tree-toggle.on { color: #c0392b; }
.tree-toggle.on:hover { color: #9e2f22; }
td.acts { white-space: nowrap; width: 1%; }
td.transfer { white-space: nowrap; }
td.transfer .amt-inline {
  width: 72px; height: 26px; margin: 0 4px; padding: 0 6px; text-align: center;
  font: inherit; border: 1px solid var(--field-line); border-radius: var(--radius); background: #fff;
}
.ui.button.icon-btn { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ui.button.icon-btn i.icon { margin: 0; }
.ui.button.gear, .ui.button.eye { width: 32px; height: 32px; }
.ui.button.eye { background: #eaf2fe; color: #2b7de9; }
.ui.button.edit-btn { min-width: 72px; height: 31px; padding: 0 14px; line-height: 31px; }
.pager { display: flex; justify-content: flex-end; gap: 8px; align-items: center; margin: 0; padding: 12px 16px 16px; background: #fff; }

.page-head { padding: 16px 16px 0; }
.page-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.kpi-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 16px; padding: 0;
}
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; min-height: 78px;
}
.kpi span { display: block; color: var(--muted); font-size: 13px; }
.kpi b { display: block; font-size: 22px; margin-top: 8px; font-weight: 600; letter-spacing: .2px; }
.date-pair { display: flex; align-items: center; gap: 8px; }
.date-pair input { flex: 1; }
.profit-filters { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.profit-total {
  display: flex; align-items: center; gap: 28px; margin: 0 16px 16px;
  padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted);
}
.profit-total b { color: var(--text); font-weight: 600; }
.pcard-head { margin-bottom: 14px; }
.pcard-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; word-break: break-all; }
.pcard-tags { display: flex; gap: 8px; margin-bottom: 10px; }
.pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.pill.on { background: #e8f7ee; color: #1a7a33; }
.pill.off { background: #f1f2f4; color: #6b7280; }
.pcard-line { margin: 4px 0; }
.pcard-line span { color: var(--muted); margin-right: 6px; }
.pcard-line.muted { color: var(--muted); }
.pcard-balance { margin-top: 10px; color: var(--muted); }
.pcard-balance b { color: var(--text); }
.pcard-pass, .pcard-limits { margin: 12px 0; }
.pcard-pass-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pcard-pass-row input { flex: 1 1 160px; }
.dlg.wide { width: min(580px, 100%); }
.ui.form.panel { max-width: 460px; background: #fff; padding: 16px; border-radius: var(--radius); }
.panel h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }

.dlg-back { position: fixed; inset: 0; z-index: 50; background: rgba(28,36,48,.35); display: grid; place-items: center; padding: 16px; }
.dlg { width: min(420px, 100%); background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: 0 8px 28px rgba(28,36,48,.18); }
.dlg.wide { width: min(700px, 100%); max-height: 88vh; overflow: auto; }
.dlg h3 { margin: 0 0 10px; }
.dlg-note { color: #767676; margin: -4px 0 0; }
.ui.form.dlg label { display: block; margin-top: 8px; font-weight: 600; }
.row-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.settings-list { display: flex; flex-direction: column; gap: 8px; }
.settings-list .ui.button { width: 100%; margin: 0; }

.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-top h3 { margin: 0; }
.card-x { background: none; border: 0; color: #555; padding: 0; cursor: pointer; font-size: 14px; }
.ui.tabular.menu.ctabs { margin: 12px 0 0; font-size: 12px; }
.ui.bottom.attached.segment.card-body { min-height: 120px; }
.card-head { display: flex; justify-content: space-between; gap: 12px; background: #f7f8fa; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.card-name { font-size: 20px; font-weight: 700; }
.card-sub { color: #666; margin-top: 2px; }
.card-tags { display: flex; gap: 6px; align-items: flex-start; }
.card-tags .ui.label { text-transform: capitalize; }
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cbox { background: #f7f8fa; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.cbox span { color: #666; display: block; }
.cbox b { display: block; margin-top: 3px; font-size: 14px; }
.card-body h4 { margin: 16px 0 0; }
.guard { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.guard:last-child { border-bottom: 0; }
.guard-name { flex: 1 1 auto; font-weight: 700; }
.guard .ui.label { text-transform: capitalize; }
.status-cell .ui.label { text-transform: capitalize; margin: 1px; }
.card-empty { color: #666; }

/* Login — same layout as admin.a9wabet.net light theme */
.login-page {
  min-height: 100vh; display: grid; place-items: center;
  background: #f4f6f8; padding: 24px;
}
.sign-in {
  width: min(340px, 92vw); display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  background: transparent; border: 0; margin: 0; padding: 0;
}
.sign-in__title {
  margin: 0 0 8px; text-align: center; font-size: 18px; font-weight: 500; color: #1c2430;
}
.sign-in__note { margin: 0 0 4px; text-align: center; color: var(--muted); font-size: 13px; }
.sign-in__field {
  width: 100%; height: 38px; box-sizing: border-box;
  border: 1px solid var(--field-line); border-radius: var(--radius);
  background: #fff; color: var(--text); font: inherit; font-size: 15px;
  padding: 0 12px; outline: none; appearance: none;
}
.sign-in__field::placeholder { color: #9aa3af; }
.sign-in__field:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(64,148,247,.15); }
.sign-in select.sign-in__field { padding-right: 28px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path fill='%239aa3af' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.sign-in__pass { position: relative; }
.sign-in__pass .sign-in__field { padding-right: 40px; }
.sign-in__eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: none; color: #9aa3af;
  padding: 0; cursor: pointer; display: grid; place-items: center;
}
.sign-in__eye svg { width: 20px; height: 20px; display: block; }
.sign-in__eye:hover { color: #6b7280; }
.sign-in__btn {
  width: 100%; height: 38px; border: 0; border-radius: var(--radius);
  background: #8eb8f0; color: #fff; font: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer;
}
.sign-in__btn:hover, .sign-in__btn:focus { background: #7aa9ea; }
.sign-in__btn:disabled { opacity: .7; cursor: wait; }
.sign-in .err { text-align: center; margin: 0; min-height: 0; }
.sign-in .err:empty { display: none; }
.sign-in__lang {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; color: #6b7280; font-size: 13px;
}
.sign-in__lang .flag { font-size: 16px; line-height: 1; }

@media (max-width: 900px) {
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--green); color: #fff; border: 0; border-radius: var(--radius);
    padding: 8px 12px; font: inherit; font-weight: 600; cursor: pointer;
  }
  .side {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: 240px; height: auto;
    transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 18px rgba(0,0,0,.18);
  }
  .shell.menu-open .side { transform: none; }
  .backdrop { position: fixed; inset: 0; border: 0; background: rgba(0,0,0,.4); z-index: 15; }
  .shell.menu-open .backdrop { display: block; }
  .side .item, .side .sub { padding-top: 10px; padding-bottom: 10px; }

  .topbar { flex-wrap: nowrap; min-height: 48px; padding: 0 8px; gap: 8px; justify-content: space-between; }
  .topbar .tz { display: none; }
  .site-pick { flex: 0 0 auto; font-size: 0; }
  .topbar #site-pick { height: 30px; max-width: 104px; font-size: 11px; }
  .menu-btn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; }
  .menu-btn span { display: none; }
  .menu-btn i.icon { display: block; margin: 0; font-size: 15px; }
  .who-wrap { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
  .topbar .who { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header__meta { display: none; }
  .et-language { display: none; }
  .topbar #top-out.ui.button, .header__out {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .topbar #top-out span, .header__out span { display: none; }
  .topbar #top-out i.icon, .header__out i.icon { display: block; margin: 0; font-size: 14px; }

  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 10px 12px; text-align: left; background: #fff;
    border: 0; border-bottom: 1px solid var(--line);
    font: inherit; font-weight: 700; color: #4a4a4a; cursor: pointer;
  }
  .filters-toggle::after { content: '\25be'; color: var(--green); font-size: 14px; }
  .content:has(.filters.open) .filters-toggle::after { content: '\25b4'; }
  .ui.form.filters { display: none; }
  .ui.form.filters.open { display: grid; }
  .ui.form.filters, .kpi-grid, .profit-filters { grid-template-columns: 1fr; }
  .ui.form.filters, .pager { padding-left: 10px; padding-right: 10px; }
  .kpi-grid { margin: 10px; gap: 8px; }
  .profit-total { flex-wrap: wrap; gap: 12px; margin: 0 10px 10px; }
  .filter-actions, .filter-actions .right { flex-direction: column; align-items: stretch; }
  .filter-actions .ui.button { width: 100%; margin: 0; }
  .ui.form.filters input, .ui.form.filters select, .ui.form.panel input, .ui.form.panel select,
  .ui.form.dlg input, .ui.form.dlg select { font-size: 16px; min-height: 38px; }

  .table-wrap { margin-top: 0; padding: 0; border-top: 1px solid var(--line); overscroll-behavior-x: contain; }
  .ui.table { font-size: 11px; }
  .ui.table.users-table { min-width: 1180px; }
  .ui.compact.table th, .ui.compact.table td { padding-left: .5em; padding-right: .5em; }
  .ui.table thead th { padding-top: .7em; padding-bottom: .7em; }
  .ui.button.icon-btn { width: 32px; height: 32px; }
  td.transfer .amt-inline { width: 64px; height: 32px; }
  .pager { justify-content: center; }
  .pager .ui.button { min-height: 34px; }
  .content > .crumb, .content > h2, .content > .panel, .content > .err { padding: 10px 10px 0; }
  .ui.form.panel { max-width: none; }
  .dlg-back { padding: 10px; }
  .dlg, .dlg.wide { width: 100%; max-height: 92vh; overflow: auto; }
  .row-btns { flex-direction: column-reverse; align-items: stretch; }
  .row-btns .ui.button { width: 100%; margin: 0; }
  .cgrid { grid-template-columns: 1fr; }
  .card-head { flex-direction: column; }
  .ui.tabular.menu.ctabs .item { flex: 1 1 auto; justify-content: center; padding: 8px 6px; }
}

@media (max-width: 520px) {
  .side { width: 82vw; max-width: 280px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi b { font-size: 16px; }
  .content > h2 { font-size: 16px; }
}