/* VPSTTT WAF UI v2 shell, ported from /root/waf/waf shoptui. */
:root {
  --waf-bg: #f7f6fa;
  --waf-surface: #ffffff;
  --waf-surface-2: #fbfafd;
  --waf-border: #e7e4ef;
  --waf-border-2: #d9d4e6;
  --waf-text: #1e1b29;
  --waf-text-2: #5c5870;
  --waf-text-3: #8f8ba0;
  --waf-brand: #7426d9;
  --waf-brand-700: #6320ba;
  --waf-brand-50: #f5f0fd;
  --waf-brand-100: #ebe1fb;
  --waf-brand-200: #d8c5f6;
  --waf-danger: #d92d20;
  --waf-ok: #15803d;
  --waf-warn: #b45309;
  --waf-info: #0e7490;
  --waf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --waf-sans: "IBM Plex Sans", Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --waf-shadow-1: 0 1px 2px rgba(30, 27, 41, 0.06);
  --waf-shadow-2: 0 4px 16px rgba(30, 27, 41, 0.10);
}

html,
body {
  background: var(--waf-bg) !important;
  color: var(--waf-text);
  font-family: var(--waf-sans) !important;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: 0;
}

a {
  color: var(--waf-brand);
}

code,
kbd,
pre,
samp,
.font-mono {
  font-family: var(--waf-mono) !important;
}

@media (min-width: 768px) {
  #appSidebar {
    width: 182px !important;
    max-width: 182px !important;
    background: var(--waf-surface) !important;
    border-right: 1px solid var(--waf-border) !important;
    box-shadow: none !important;
  }

  main.min-h-screen {
    padding-left: 182px !important;
  }
}

#appSidebar {
  color: var(--waf-text-2);
}

#appSidebar .h-full {
  background: var(--waf-surface);
}

#appSidebar .border-b {
  border-color: var(--waf-border) !important;
}

#appSidebar img[alt="VPSTTT WAF"] {
  height: 31px !important;
  max-width: 142px !important;
  object-fit: contain;
}

#appSidebar .px-4.pt-3.pb-3 {
  padding: 13px 10px 9px !important;
}

#appSidebar .rounded-lg.bg-slate-50,
#appSidebar .app-sidebar-status {
  border-radius: 8px !important;
  border: 1px solid var(--waf-border) !important;
  background: var(--waf-surface-2) !important;
  box-shadow: none !important;
}

.app-sidebar-scroll {
  padding: 2px 6px 14px !important;
}

.app-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(143, 139, 160, .35);
  border-radius: 999px;
}

.app-nav-search {
  min-height: 32px !important;
  border-radius: 7px !important;
  border: 1px solid var(--waf-border-2) !important;
  background: var(--waf-surface) !important;
  color: var(--waf-text) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 5px 8px !important;
}

.app-quick-grid {
  gap: 4px !important;
  margin: 6px 2px 4px !important;
}

.app-quick-link {
  min-height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid var(--waf-border) !important;
  background: var(--waf-surface) !important;
  color: var(--waf-text-2) !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
}

.app-quick-link:hover {
  background: var(--waf-brand-50) !important;
  border-color: var(--waf-brand-200) !important;
  color: var(--waf-brand) !important;
  text-decoration: none;
}

.app-nav-system {
  margin: 8px 2px 2px !important;
  padding: 9px 6px 3px !important;
  border: 0 !important;
  background: transparent !important;
}

.app-nav-system-title,
.app-nav-section {
  color: var(--waf-text-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.app-nav-system-desc {
  display: none !important;
}

.app-nav-section {
  padding: 11px 8px 4px !important;
}

.app-nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  color: var(--waf-text-2) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.app-nav-link:hover {
  background: var(--waf-surface-2) !important;
  color: var(--waf-text) !important;
  text-decoration: none;
}

.app-nav-link > span:first-child {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: var(--waf-text-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.app-nav-active,
.nav-item-active {
  background: var(--waf-brand-50) !important;
  color: var(--waf-brand) !important;
  font-weight: 650 !important;
}

.app-nav-active > span:first-child,
.nav-item-active > span:first-child {
  color: var(--waf-brand) !important;
}

.app-topbar {
  height: 44px;
  background: var(--waf-surface);
  border-bottom: 1px solid var(--waf-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  position: sticky;
  top: 0;
  z-index: 35;
}

.app-topbar-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--waf-text-3);
  font-size: 13px;
  white-space: nowrap;
}

.app-topbar-crumb b {
  color: var(--waf-text);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar-spacer {
  flex: 1;
}

.app-shell-pad {
  padding: 10px 12px 32px !important;
}

.app-page {
  max-width: none !important;
}

.app-page h1,
.app-page-head h1 {
  color: var(--waf-text) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.app-panel,
.app-card,
.card-elev {
  background: var(--waf-surface) !important;
  border: 1px solid var(--waf-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--waf-shadow-1) !important;
}

.app-panel .border-b,
.app-card .border-b {
  border-color: var(--waf-border) !important;
}

.app-btn {
  min-height: 32px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

.app-btn-primary,
.app-btn-blue {
  background: var(--waf-brand) !important;
  border-color: var(--waf-brand) !important;
  color: #fff !important;
}

.app-btn-primary:hover,
.app-btn-blue:hover {
  background: var(--waf-brand-700) !important;
  border-color: var(--waf-brand-700) !important;
}

.app-btn-soft {
  background: var(--waf-surface) !important;
  border: 1px solid var(--waf-border-2) !important;
  color: var(--waf-text) !important;
}

.app-btn-soft:hover {
  background: var(--waf-surface-2) !important;
  border-color: var(--waf-text-3) !important;
}

.app-badge {
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  padding: 2px 8px !important;
  line-height: 1.45 !important;
}

.app-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
  border-radius: 7px !important;
}

.app-table th {
  background: var(--waf-surface-2) !important;
  color: var(--waf-text-3) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  padding: 7px 10px !important;
}

.app-table td {
  padding: 6px 10px !important;
}

table tbody tr:hover {
  background: var(--waf-surface-2);
}

/* Prototype-compatible primitives. */
.page-h {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.page-h h1 {
  margin: 0;
  color: var(--waf-text) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

.page-h .sub {
  color: var(--waf-text-2);
  font-size: 12.5px;
  margin-top: 2px;
  max-width: 860px;
}

.page-h .grow,
.grow {
  flex: 1;
}

.kpi-row {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.kpi {
  background: var(--waf-surface) !important;
  border: 1px solid var(--waf-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--waf-shadow-1) !important;
  min-width: 0;
}

.ui-pill,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px !important;
  border: 1px solid transparent;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
  padding: 1.5px 8px !important;
  white-space: nowrap;
}

.ui-pill-ok,
.bg-green-50.text-green-700,
.bg-emerald-50.text-emerald-700 {
  color: var(--waf-ok) !important;
  background: #e9f7ef !important;
  border-color: #c4e8d1 !important;
}

.ui-pill-warn,
.bg-amber-50.text-amber-700 {
  color: var(--waf-warn) !important;
  background: #fdf3e3 !important;
  border-color: #f3ddb5 !important;
}

.ui-pill-info,
.bg-sky-50.text-sky-700,
.bg-blue-50.text-blue-700 {
  color: var(--waf-info) !important;
  background: #e8f6f9 !important;
  border-color: #bfe3ec !important;
}

.ui-pill-mute,
.bg-slate-100.text-slate-600,
.bg-slate-100.text-slate-700 {
  color: var(--waf-text-2) !important;
  background: var(--waf-surface-2) !important;
  border-color: var(--waf-border) !important;
}

.bg-red-50.text-red-700 {
  color: var(--waf-danger) !important;
  background: #fdeceb !important;
  border-color: #f6c6c2 !important;
}

.bg-violet-50.text-violet-700,
.bg-purple-50.text-purple-700 {
  color: var(--waf-brand) !important;
  background: var(--waf-brand-50) !important;
  border-color: var(--waf-brand-200) !important;
}

/* Sidebar shell: make legacy PHP structure read like the shoptui shell. */
.sidebar {
  background: var(--waf-surface) !important;
  border-right: 1px solid var(--waf-border) !important;
  color: var(--waf-text-2) !important;
}

.sb-logo {
  align-items: center;
  gap: 7px;
  padding: 13px 10px 9px !important;
  border-bottom: 0 !important;
}

.sb-logo .rounded-lg.bg-slate-50 {
  margin-top: 8px !important;
}

.sb-nav {
  padding: 2px 6px 14px !important;
}

.sb-group {
  color: var(--waf-text-3) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.sb-item .sb-ico {
  width: 16px !important;
  height: 16px !important;
  background: transparent !important;
  color: var(--waf-text-3) !important;
  opacity: .9;
}

.sb-item.app-nav-active .sb-ico {
  color: var(--waf-brand) !important;
  opacity: 1;
}

.app-topbar .app-badge {
  border: 1px solid var(--waf-border) !important;
  background: var(--waf-surface-2) !important;
  color: var(--waf-text-2) !important;
}

/* Traffic page port from PageMonitor prototype. */
.traffic-v2 {
  color: var(--waf-text);
}

.traffic-v2 .traffic-page-head {
  margin-bottom: 10px;
}

.traffic-v2 .traffic-page-head .app-btn-primary::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1.8px solid currentColor;
  border-radius: 3px;
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.2);
}

.traffic-v2 .traffic-hero {
  border-radius: 12px !important;
  margin-bottom: 10px !important;
}

.traffic-v2 .traffic-domain {
  margin: 0 !important;
  color: var(--waf-text) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.traffic-v2 .traffic-hero .app-card {
  border-radius: 8px !important;
  background: var(--waf-surface-2) !important;
}

.traffic-v2 .traffic-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.traffic-v2 .traffic-kpi {
  padding: 9px 12px !important;
}

.traffic-v2 .traffic-kpi > div:first-child,
.traffic-v2 .app-card > .text-sm.text-slate-500:first-child {
  color: var(--waf-text-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.traffic-v2 .traffic-kpi .text-3xl {
  color: var(--waf-text) !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

.traffic-v2 .traffic-card {
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  overflow: hidden;
}

.traffic-v2 .traffic-card h2 {
  color: var(--waf-text) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}

.traffic-v2 .traffic-card p,
.traffic-v2 .traffic-card .text-slate-500,
.traffic-v2 .traffic-card .text-slate-400 {
  color: var(--waf-text-3) !important;
}

.traffic-v2 .traffic-chart-card {
  min-height: 332px;
}

.traffic-v2 #trafficChartBlock {
  border: 1px solid var(--waf-border);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #fbfafd 100%);
  padding: 8px;
}

.traffic-v2 #trafficChartBlock svg {
  color: var(--waf-text-3);
}

.traffic-v2 .bg-blue-500,
.traffic-v2 .bg-indigo-500,
.traffic-v2 .bg-blue-600 {
  background-color: var(--waf-brand) !important;
}

.traffic-v2 .text-blue-600,
.traffic-v2 .text-blue-700,
.traffic-v2 .hover\:text-blue-600:hover {
  color: var(--waf-brand) !important;
}

.traffic-v2 .border-blue-200,
.traffic-v2 .border-blue-400 {
  border-color: var(--waf-brand-200) !important;
}

.traffic-v2 .traffic-seg {
  min-height: 28px !important;
  border: 1px solid var(--waf-border) !important;
  background: var(--waf-surface-2) !important;
  color: var(--waf-text-2) !important;
  border-radius: 6px !important;
}

.traffic-v2 .traffic-seg-on {
  background: var(--waf-brand) !important;
  border-color: var(--waf-brand) !important;
  color: #fff !important;
}

.traffic-v2 .topbar-row {
  border-radius: 6px !important;
  min-height: 28px;
  overflow: hidden;
}

.traffic-v2 .topbar-row > .absolute {
  background: var(--waf-brand-50) !important;
  border-right: 1px solid var(--waf-brand-100);
}

.traffic-v2 .topip-row {
  border: 1px solid transparent;
  border-radius: 7px !important;
}

.traffic-v2 .topip-row:hover {
  background: var(--waf-surface-2) !important;
  border-color: var(--waf-border);
}

.traffic-v2 input[type="checkbox"] {
  accent-color: var(--waf-brand);
}

.traffic-v2 .app-table,
.traffic-v2 table.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px !important;
}

.traffic-v2 .app-table th {
  position: sticky;
  top: 0;
  text-align: left;
  text-transform: uppercase;
}

.traffic-v2 .app-table td {
  border-bottom: 1px solid var(--waf-border);
  color: var(--waf-text-2);
}

.traffic-v2 .app-table tr:last-child td {
  border-bottom: none;
}

.traffic-v2 .traffic-log-card > div:first-child {
  padding: 9px 12px !important;
  border-bottom-color: var(--waf-border) !important;
}

.traffic-v2 .traffic-log-card form {
  background: var(--waf-surface-2);
  border: 1px solid var(--waf-border);
  border-radius: 8px;
  padding: 8px;
}

.traffic-v2 .traffic-log-card label {
  color: var(--waf-text-3) !important;
  letter-spacing: .06em;
}

.traffic-v2 details summary {
  color: var(--waf-text-2) !important;
}

@media (max-width: 1180px) {
  .traffic-v2 .traffic-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .traffic-v2 .traffic-kpi-row {
    grid-template-columns: 1fr;
  }

  .traffic-v2 .traffic-page-head .app-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .app-topbar {
    top: 61px;
    overflow-x: auto;
  }

  .app-shell-pad {
    padding: 10px 8px 28px !important;
  }
}