/* The whole theme comes from these variables. To change the brand color, change --ax-accent*. */
:root {
  --ax-ink: #151a25;
  --ax-muted: #5f6b7c;
  --ax-line: #e5e8ee;
  --ax-page: #f5f7fa;
  --ax-card: #ffffff;
  --ax-accent: #0062e6;
  --ax-accent-dark: #004fbd;
  --ax-accent-soft: #e8f1ff;
  --ax-violet: #6300db;
  --ax-violet-soft: #f1e9fc;
  --ax-good: #12805c;
  --ax-good-soft: #e3f4ed;
  --ax-bad: #c0392b;
  --ax-bad-soft: #fbe9e7;
  --ax-warn: #a15f00;
  --ax-warn-soft: #fdf1dc;
  --ax-grey-soft: #eef1f5;
  --ax-side-width: 252px;
  --bs-primary: #0062e6;
  --bs-primary-rgb: 0, 98, 230;
  --bs-link-color: #004fbd;
  --bs-link-color-rgb: 0, 79, 189;
  --bs-link-hover-color: #003c91;
  --bs-font-sans-serif: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { background: var(--ax-page); color: var(--ax-ink); font-size: .9rem; }
a { text-decoration: none; }
h1, h2, h3, h4, h5 { font-weight: 650; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
:focus-visible { outline: 2px solid var(--ax-accent); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 100; background: #fff; padding: .4rem .8rem; border-radius: 6px; }
.skip-link:focus { left: .5rem; }

.btn-primary { --bs-btn-bg: var(--ax-accent); --bs-btn-border-color: var(--ax-accent); --bs-btn-hover-bg: var(--ax-accent-dark);
  --bs-btn-hover-border-color: var(--ax-accent-dark); --bs-btn-active-bg: var(--ax-accent-dark); --bs-btn-active-border-color: var(--ax-accent-dark);
  --bs-btn-disabled-bg: var(--ax-accent); --bs-btn-disabled-border-color: var(--ax-accent); }
.btn-outline-primary { --bs-btn-color: var(--ax-accent-dark); --bs-btn-border-color: var(--ax-accent); --bs-btn-hover-bg: var(--ax-accent);
  --bs-btn-hover-border-color: var(--ax-accent); --bs-btn-active-bg: var(--ax-accent-dark); --bs-btn-active-border-color: var(--ax-accent-dark); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--ax-line); --bs-btn-hover-bg: var(--ax-grey-soft); --bs-btn-hover-border-color: #d5dae2; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ax-accent); box-shadow: 0 0 0 .2rem rgba(0, 98, 230, .16); }
.form-check-input:checked { background-color: var(--ax-accent); border-color: var(--ax-accent); }
.form-label { font-weight: 550; font-size: .82rem; margin-bottom: .3rem; }
.form-text { font-size: .76rem; }

/* Shell */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--ax-side-width); flex: 0 0 var(--ax-side-width); background: var(--ax-card); border-right: 1px solid var(--ax-line);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 40; }
.brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; color: var(--ax-ink); font-weight: 700; font-size: 1rem; flex: 0 0 auto; }
.brand:hover { color: var(--ax-ink); }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #006cff, #6300db); display: grid; place-items: center; font-size: 1rem; color: #fff; flex: 0 0 auto; }
.brand small { display: block; font-weight: 500; font-size: .7rem; color: var(--ax-muted); }
.brand-row { display: flex; align-items: center; flex: 0 0 auto; padding-right: .6rem; }
.icon-btn.side-close { display: none; margin-left: auto; }
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 .7rem .6rem; scrollbar-width: thin; scrollbar-color: #d5dae2 transparent; }
.side-section { padding: .85rem .6rem .25rem; font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ax-muted); font-weight: 650; }
.side-link { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; margin-bottom: 1px; border-radius: 7px; color: #3b4556; font-weight: 500; font-size: .85rem; }
.side-link i { font-size: 1rem; width: 1.1rem; text-align: center; color: #76839a; }
.side-link:hover { background: var(--ax-grey-soft); color: var(--ax-ink); }
.side-link.active { background: var(--ax-accent-soft); color: var(--ax-accent-dark); font-weight: 600; }
.side-link.active i { color: var(--ax-accent); }
.side-foot { flex: 0 0 auto; border-top: 1px solid var(--ax-line); padding: .6rem .7rem; display: flex; align-items: center; gap: .3rem; }
.side-user { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1 1 auto; padding: .3rem; border-radius: 7px; color: var(--ax-ink); }
.side-user:hover { background: var(--ax-grey-soft); color: var(--ax-ink); }
.side-user .name { font-weight: 600; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .role { font-size: .7rem; color: var(--ax-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--ax-accent-soft); color: var(--ax-accent-dark); display: grid; place-items: center; font-weight: 700; font-size: .78rem; text-transform: uppercase; }
.icon-btn { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 7px; color: var(--ax-muted); display: grid; place-items: center; flex: 0 0 34px; }
.icon-btn:hover { background: var(--ax-bad-soft); color: var(--ax-bad); }
.side-backdrop { display: none; position: fixed; inset: 0; background: rgba(21, 26, 37, .45); z-index: 35; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: var(--ax-card); border-bottom: 1px solid var(--ax-line); padding: .75rem 1.75rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 20; min-height: 60px; }
.topbar h1 { font-size: 1.12rem; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.topbar .sub { color: var(--ax-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content { padding: 1.5rem 1.75rem 3rem; }
.menu-toggle { display: none; }

/* Cards and stats */
.card { border: 1px solid var(--ax-line); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: transparent; border-bottom: 1px solid var(--ax-line); padding: .8rem 1.1rem; font-weight: 620; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.card-body { padding: 1.1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
.stat-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { background: var(--ax-card); border: 1px solid var(--ax-line); border-radius: 10px; padding: .85rem 1rem; display: flex; gap: .75rem; align-items: center; min-width: 0; }
.stat-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; background: var(--ax-grey-soft); color: var(--ax-muted); }
.stat-label { color: var(--ax-muted); font-size: .74rem; font-weight: 550; line-height: 1.25; }
.stat-value { font-size: 1.28rem; font-weight: 680; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tone-good .stat-icon { background: var(--ax-good-soft); color: var(--ax-good); }
.tone-bad .stat-icon { background: var(--ax-bad-soft); color: var(--ax-bad); }
.tone-warn .stat-icon { background: var(--ax-warn-soft); color: var(--ax-warn); }
.tone-info .stat-icon { background: var(--ax-violet-soft); color: var(--ax-violet); }
.tone-accent .stat-icon { background: var(--ax-accent-soft); color: var(--ax-accent-dark); }

/* Tables */
.table { margin: 0; --bs-table-bg: transparent; font-size: .84rem; }
.table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ax-muted); font-weight: 650; border-bottom: 1px solid var(--ax-line); white-space: nowrap; padding: .6rem .8rem; background: #fafbfc; }
.table td { padding: .6rem .8rem; border-color: #eef1f5; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #f7f9fb; }
.text-truncate-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; color: var(--ax-muted); padding: 2.5rem 1rem; }
.empty i { font-size: 1.8rem; display: block; margin-bottom: .4rem; color: #b6c0cd; }

/* Status */
.status-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 999px; font-size: .73rem; font-weight: 600; white-space: nowrap; }
.status-success { background: var(--ax-good-soft); color: var(--ax-good); }
.status-danger { background: var(--ax-bad-soft); color: var(--ax-bad); }
.status-warning { background: var(--ax-warn-soft); color: var(--ax-warn); }
.status-info, .status-primary { background: var(--ax-accent-soft); color: var(--ax-accent-dark); }
.status-secondary { background: var(--ax-grey-soft); color: #4b5a6e; }
.simulated-tag { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .04em; padding: .08rem .38rem; border-radius: 4px; background: var(--ax-violet); color: #fff; }
.progress { height: .55rem; background: var(--ax-grey-soft); }
.progress-bar { background: var(--ax-accent); }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; padding: .8rem 1.1rem; border-bottom: 1px solid var(--ax-line); }
.filter-field { display: block; margin: 0; flex: 0 1 170px; min-width: 130px; }
.filter-field span { display: block; font-size: .68rem; color: var(--ax-muted); font-weight: 600; margin-bottom: .1rem; }
.filter-field .form-control, .filter-field .form-select { font-size: .82rem; padding-top: .3rem; padding-bottom: .3rem; width: 100%; }

/* Password show / hide */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 2.6rem; background-image: none !important; }
.password-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2.5rem; border: 0; background: transparent; color: var(--ax-muted); display: grid; place-items: center; border-radius: 0 6px 6px 0; }
.password-toggle:hover { color: var(--ax-ink); }

/* Wizard */
.steps { display: flex; gap: .5rem; margin-bottom: 1.25rem; font-size: .8rem; color: var(--ax-muted); flex-wrap: wrap; }
.steps .step { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.steps .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e4e8ee; font-size: .72rem; }
.steps .step.on { color: var(--ax-ink); }
.steps .step.on .dot { background: var(--ax-accent); color: #fff; }
.steps .sep { flex: 0 0 26px; height: 1px; background: var(--ax-line); align-self: center; }
.dropzone { border: 1.5px dashed #c5ced9; border-radius: 10px; padding: 2.2rem 1rem; text-align: center; background: #fafbfc; cursor: pointer; transition: .15s; display: block; margin: 0; }
.dropzone:hover, .dropzone.over { border-color: var(--ax-accent); background: var(--ax-accent-soft); }
.dropzone i { font-size: 1.9rem; color: var(--ax-accent); }
.choice { display: flex; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--ax-line); border-radius: 9px; margin-bottom: .5rem; cursor: pointer; background: #fff; }
.choice:hover { border-color: #b9c4d1; }
.choice.is-off { background: #fafbfc; color: var(--ax-muted); cursor: not-allowed; }
.choice .note { font-size: .76rem; color: var(--ax-muted); }
.sublist { margin: -.2rem 0 .6rem 2rem; font-size: .8rem; }
.preview-table td, .preview-table th { font-size: .76rem; padding: .3rem .55rem; white-space: nowrap; }
.preview-table .picked { background: var(--ax-accent-soft); }
.share-list { max-height: 170px; overflow-y: auto; border: 1px solid var(--ax-line); border-radius: 8px; padding: .5rem .7rem; }

.chart-box { position: relative; height: 240px; }
.chart-box .empty { padding-top: 5.5rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; font-size: .84rem; }
dl.facts dt { color: var(--ax-muted); font-weight: 500; }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Login */
.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--ax-page); padding: 1rem; }
.login-card { width: 100%; max-width: 390px; background: #fff; border: 1px solid var(--ax-line); border-top: 4px solid var(--ax-accent); border-radius: 12px; padding: 2rem; box-shadow: 0 10px 30px rgba(21, 26, 37, .07); }
.login-card .brand-mark { width: 42px; height: 42px; font-size: 1.25rem; margin-bottom: .9rem; }

/* Toasts */
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 2rem); }
.toast { border: 1px solid var(--ax-line); border-left-width: 4px; font-size: .84rem; }
.toast.success { border-left-color: var(--ax-good); }
.toast.error { border-left-color: var(--ax-bad); }
.toast.warning { border-left-color: var(--ax-warn); }
.toast.info { border-left-color: var(--ax-accent); }
.toast .btn-close { font-size: .6rem; flex: 0 0 auto; }

@media (max-width: 1199.98px) {
  .stat-grid, .stat-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .sidebar { position: fixed; top: 0; left: 0; transform: translateX(-100%); transition: transform .18s; }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(21, 26, 37, .2); }
  .sidebar.open ~ .side-backdrop { display: block; }
  .menu-toggle { display: inline-grid; }
  .icon-btn.side-close { display: grid; }
  .icon-btn.side-close:hover { background: var(--ax-grey-soft); color: var(--ax-ink); }
  .content { padding: 1rem; }
  .topbar { padding: .6rem 1rem; gap: .6rem; }
}

@media (max-width: 575.98px) {
  .stat-grid, .stat-grid.cols-3, .stat-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .stat { padding: .65rem .7rem; gap: .5rem; }
  .stat-icon { width: 30px; height: 30px; flex-basis: 30px; font-size: .85rem; }
  .stat-value { font-size: 1.05rem; }
  .stat-grid > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .filter-field { flex: 1 1 45%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}