:root {
  --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-primary: #06499C;
  --brand-secondary: #00B98B;
  --brand-accent: #12D1C2;
  --brand-dark: #031D45;
  --brand-light: #E7F8F5;
  --fluxos-blue: #031D45;
  --fluxos-blue-light: #06499C;
  --fluxos-green: #06499C;
  --fluxos-green-dark: #053D83;
  --fluxos-gray-light: #f4f6f8;
  --fluxos-gray-bg: #EEF2F5;
  --fluxos-gray-dark: #1D344D;
  --fluxos-white: #ffffff;
  --fluxos-card: #ffffff;
  --fluxos-border: #DEE4E9;
  --fluxos-danger: #b42318;
  --fluxos-shadow: 0 10px 30px rgba(11, 42, 74, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  color: var(--fluxos-gray-dark);
  background: linear-gradient(145deg, #f5f7fa 0%, #e9eff6 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.muted {
  color: #64748b;
}

.container {
  width: min(1040px, 92vw);
  margin: 24px auto;
}

.error {
  color: var(--fluxos-danger);
  font-size: 12px;
  margin-top: 6px;
}

.success-banner,
.error-banner {
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid;
  font-size: 14px;
}

.success-banner {
  background: rgba(107, 207, 99, 0.12);
  border-color: rgba(47, 143, 75, 0.35);
  color: #245d31;
}

.error-banner {
  background: rgba(180, 35, 24, 0.12);
  border-color: rgba(180, 35, 24, 0.3);
  color: #9f2318;
}

.button,
.button-outline,
.button-green,
.button-danger,
.btn,
button {
  border: none;
  background: var(--fluxos-blue-light);
  color: var(--fluxos-white);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover,
.button-outline:hover,
.button-green:hover,
.button-danger:hover,
.btn:hover,
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(11, 42, 74, 0.18);
}

.button-green {
  background: linear-gradient(135deg, var(--fluxos-green) 0%, var(--fluxos-green-dark) 100%);
}

.button-outline,
.btn-outline {
  background: transparent;
  color: var(--fluxos-blue-light);
  border: 1px solid var(--fluxos-blue-light);
}

.button-danger {
  background: var(--fluxos-danger);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d9e1ec;
  border-radius: 10px;
  background: #f7f9fc;
  padding: 11px 12px;
  font: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(31, 111, 178, 0.8);
  box-shadow: 0 0 0 3px rgba(31, 111, 178, 0.15);
}

label {
  display: block;
  font-size: 13px;
  color: #1f2937;
  margin-bottom: 8px;
  font-weight: 500;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(31, 111, 178, 0.15);
  color: #13558d;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.card {
  background: var(--fluxos-card);
  border: 1px solid var(--fluxos-border);
  border-radius: 16px;
  box-shadow: var(--fluxos-shadow);
  padding: 18px;
}

.card-title {
  margin-bottom: 12px;
  font-size: 19px;
  color: #1e293b;
}

.table-wrap {
  overflow: auto;
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--fluxos-border);
  vertical-align: top;
}

th {
  color: #334155;
  font-weight: 600;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  background: #f8fafc;
  border: 1px solid var(--fluxos-border);
  border-radius: 10px;
  padding: 8px;
}

body.signup-page {
  height: 100vh;
  overflow: hidden;
}

.signup-shell {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.brand-top {
  background: #12D1C2;
  color: var(--fluxos-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
}

.brand-top-content {
  width: min(1040px, 94vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-top-logo {
  width: min(170px, 28vw);
  height: auto;
}

.brand-top-text strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
}

.brand-top-text p {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
}

.signup-main {
  padding: 6px 8px 8px;
  display: grid;
  justify-items: center;
  align-items: start;
  overflow: hidden;
}

.auth-card {
  width: min(860px, 100%);
  background: var(--fluxos-card);
  border-radius: 18px;
  border: 1px solid rgba(15, 44, 77, 0.08);
  box-shadow: 0 16px 35px rgba(11, 42, 74, 0.12);
  padding: 28px;
  display: grid;
  gap: 16px;
}

.auth-card-signup {
  width: min(1040px, calc(100vw - 20px));
  height: 100%;
  max-height: calc(100vh - 84px);
  padding: 10px;
  gap: 8px;
}

.auth-header h1 {
  font-size: 34px;
  color: #1e293b;
}

.auth-header.compact h1 {
  font-size: clamp(22px, 1.8vw, 26px);
}

.auth-header p {
  margin-top: 2px;
  color: #4b5563;
  font-size: 12px;
}

.signup-form {
  gap: 6px;
  overflow: hidden;
  padding-right: 0;
}

.signup-sections {
  display: grid;
  gap: 6px;
  grid-template-columns: 1.35fr 1fr;
}

.plan-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.term-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plan-option {
  border: 1px solid var(--fluxos-border);
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  background: #fafcff;
  margin-bottom: 0;
}

.plan-option:has(input:checked) {
  border-color: var(--fluxos-blue-light);
  background: rgba(31, 111, 178, 0.08);
}

.term-option {
  border: 1px solid var(--fluxos-border);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  background: #fafcff;
  margin-bottom: 0;
}

.term-option:has(input:checked) {
  border-color: var(--fluxos-blue-light);
  background: rgba(31, 111, 178, 0.08);
}

.plan-radio {
  width: auto;
  margin: 0 2px 0 0;
}

.term-radio {
  width: auto;
  margin: 0 2px 0 0;
}

.plan-thumb {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(140deg, #0d3b69 0%, #06499C 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.plan-thumb img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.plan-copy {
  display: grid;
  gap: 2px;
  font-size: 12px;
}

.plan-copy strong {
  font-size: 15px;
  line-height: 1.2;
}

.term-copy {
  display: grid;
  gap: 2px;
  font-size: 12px;
}

.term-copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.form-section {
  border: 1px solid var(--fluxos-border);
  border-radius: 14px;
  padding: 10px;
  background: #fcfdff;
}

.form-section.compact {
  padding: 8px;
}

.form-section h3 {
  margin-bottom: 12px;
  color: #1e293b;
}

.form-section.compact h3 {
  margin-bottom: 6px;
  font-size: 18px;
}

.accept-terms {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.accept-terms input {
  width: auto;
}

.signup-page label {
  margin-bottom: 5px;
  font-size: 12px;
}

.signup-page input,
.signup-page select {
  padding: 8px 10px;
  min-height: 36px;
}

.signup-page .actions button {
  padding: 8px 14px;
  min-height: 36px;
}

.login-page {
  min-height: 100vh;
  background: linear-gradient(140deg, #f5f7fb 0%, #eaf0f8 100%);
  overflow: hidden;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 45%) minmax(360px, 55%);
}

.login-brand {
  background: #12D1C2;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-brand-content {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  color: #fff;
}

.login-brand-logo {
  width: min(430px, 85%);
  height: auto;
}

.login-brand-content p {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: min(460px, 94%);
  background: #fff;
  border: 1px solid var(--fluxos-border);
  border-radius: 18px;
  box-shadow: var(--fluxos-shadow);
  padding: 24px;
  display: grid;
  gap: 12px;
}

.login-card h1 {
  font-size: 36px;
  color: #1e293b;
  line-height: 1.15;
}

.login-card p {
  color: #4b5563;
}

.login-form {
  display: grid;
  gap: 10px;
}

.login-form button {
  margin-top: 4px;
  min-height: 42px;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fluxos-gray-bg);
}

.sidebar {
  width: 100%;
  background: #12D1C2;
  color: #fff;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo {
  width: auto;
  max-width: 170px;
  margin: 0;
}

.sidebar-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
}

.sidebar-link:hover,
.sidebar-link.active {
  background: rgba(255, 255, 255, 0.14);
}

.sidebar-link img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.logout-form {
  margin-left: auto;
}

.logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
}

.logout-btn img {
  width: 14px;
  filter: brightness(0) saturate(100%) invert(33%) sepia(85%) saturate(760%) hue-rotate(177deg) brightness(90%) contrast(90%);
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid #e3e8ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.topbar-title {
  font-size: 22px;
  font-weight: 600;
  color: #23314b;
}

.page-content {
  padding: 18px 24px 26px;
  display: grid;
  gap: 14px;
}

.filters-form {
  display: grid;
  gap: 14px;
}

.inline {
  display: inline;
}

.page-note {
  font-size: 12px;
  color: #64748b;
}

@media (max-width: 1024px) {
  .login-page {
    overflow: auto;
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-brand {
    min-height: 170px;
    padding: 18px;
  }

  .login-brand-logo {
    width: min(280px, 70vw);
  }

  .login-panel {
    padding: 16px;
  }

  .login-card {
    width: 100%;
  }

  body.signup-page {
    overflow: auto;
  }

  .signup-main {
    overflow: visible;
  }

  .auth-card-signup {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .signup-form {
    overflow: visible;
  }

  .signup-sections {
    grid-template-columns: 1fr;
  }

  .plan-list {
    grid-template-columns: 1fr;
  }

  .term-list {
    grid-template-columns: 1fr;
  }

  .sidebar {
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 12px;
  }

  .sidebar-nav {
    width: 100%;
    justify-content: center;
  }

  .logout-form {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .topbar {
    padding: 0 14px;
  }

  .topbar-title {
    font-size: 18px;
  }

  .page-content {
    padding: 14px;
  }

  th,
  td {
    padding: 9px;
    font-size: 13px;
  }

  .brand-top-content {
    flex-direction: column;
    text-align: center;
  }

  .brand-top-logo {
    width: min(190px, 60vw);
  }

  .plan-copy strong {
    font-size: 16px;
  }

  .login-card {
    padding: 18px;
  }

  .login-card h1 {
    font-size: 28px;
  }
}

@media (max-height: 860px) {
  body.signup-page {
    overflow: auto;
  }

  .signup-main {
    overflow: visible;
  }

  .auth-card-signup {
    height: auto;
    max-height: none;
  }

  .signup-form {
    overflow: visible;
  }
}

/* Caixa Forte: shared Fluxos components with the product's own identity. */
body { background: #EEF2F5; line-height: 1.45; }
button,input,select,textarea { font: inherit; }
h1,h2,h3,h4 { color: var(--brand-dark); }
button,.button,.button-green,.btn { font-weight: 600; }
:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
input:focus,select:focus,textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px #06499c20; }
input[type=radio],input[type=checkbox] { accent-color: var(--brand-primary); }
.plan-option:has(input:checked),.term-option:has(input:checked) { background: var(--brand-light); border-color: var(--brand-secondary); }
.badge { background: var(--brand-light); color: #05654F; }
.app-shell { height: 100dvh; min-height: 0; display: grid; grid-template-columns: 232px minmax(0,1fr); overflow: hidden; }
.sidebar { width: auto; min-height: 0; background: var(--brand-accent); color: var(--brand-dark); padding: 16px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 24px; border-right: 1px solid #00b98b30; border-bottom: none; overflow-y: auto; scrollbar-gutter: stable; }
.sidebar-brand { display: block; background: white; border-radius: 16px; padding: 6px; }
.sidebar-logo { display: block; width: 100%; max-width: none; border-radius: 12px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.sidebar-link { min-height: 46px; padding: 8px 10px; color: var(--brand-dark); gap: 12px; font-size: 14px; font-weight: 500; }
.sidebar-link:hover { background: #ffffff60; }
.sidebar-link.active { background: var(--brand-light); color: var(--brand-primary); }
.nav-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #ffffff40; }
.sidebar-link img,.logout-btn img { width: 20px; height: 20px; filter: none; }
.sidebar-link.active .nav-icon { background: white; }
.logout-form { margin: auto 0 0; }
.logout-btn { width: 100%; border-color: #031d4530; color: var(--brand-dark); justify-content: flex-start; gap: 12px; min-height: 46px; }
.app-main { min-height: 0; overflow: hidden; }
.topbar { min-height: 64px; height: auto; flex: 0 0 auto; gap: 14px; padding: 12px 24px; }
.topbar-title { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--brand-dark); min-width: 0; }
.module-icon { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-light); border-radius: 12px; }
.module-icon img { width: 26px; height: 26px; }
.module-label { overflow-wrap: anywhere; }
.page-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 20px 24px 24px; align-content: start; }
.card { min-width: 0; box-shadow: 0 8px 24px #10223808; }
.card-title { font-size: 16px; }
.table-wrap { max-height: min(52dvh,560px); scrollbar-gutter: stable; padding: 0 10px 10px 0; overscroll-behavior: contain; }
th { background: #F7F9FB; position: sticky; top: 0; z-index: 1; font-size: 12px; color: #586B7D; }
td { vertical-align: middle; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #C6CED5; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.login-page { background: #F7F9FB; overflow: auto; }
.login-brand { background: linear-gradient(145deg,#06499C,#12D1C2 65%,#00B98B); }
.login-brand-logo { width: min(320px,85%); border-radius: 20px; }
.login-brand-content p { color: var(--brand-dark); font-weight: 500; }
.login-card { max-width: 400px; border-radius: 20px; padding: 30px; }
.login-card h1 { font-size: 26px; }
.login-card p { font-size: 14px; color: #586B7D; }
.login-form { gap: 16px; }
.brand-top { background: var(--brand-dark); }
.brand-top-content { gap: 20px; }
.brand-top-logo { width: 94px; height: 94px; object-fit: contain; border-radius: 12px; }
.signup-shell { height: 100dvh; }
.signup-main { min-height: 0; padding: 16px; }
.auth-card-signup { min-height: 0; max-height: none; height: 100%; padding: 20px; grid-template-rows: auto minmax(0,1fr); }
.signup-form { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: 10px; overscroll-behavior: contain; gap: 14px; }
.signup-sections { gap: 12px; }
.form-section.compact h3 { font-size: 15px; }
.plan-thumb { background: var(--brand-primary); }
.plan-thumb img { width: 20px; height: 20px; }
@media(max-width:900px) {
 .app-shell { grid-template-columns: 190px minmax(0,1fr); }
 .sidebar { padding: 12px 8px; gap: 18px; }
 .sidebar-nav { justify-content: flex-start; }
 .topbar { padding: 12px 16px; flex-wrap: wrap; }
 .page-content { padding: 16px; }
 .login-shell { min-height: 100dvh; grid-template-columns: 1fr; }
 .login-brand { min-height: 210px; padding: 24px; }
 .login-brand-logo { width: 170px; }
 .signup-shell { height: auto; min-height: 100dvh; }
 .signup-main { overflow: visible; }
 .auth-card-signup { height: auto; }
 .signup-form { overflow: visible; padding-right: 0; }
 .brand-top-content { flex-direction: row; text-align: left; }
 .brand-top-logo { width: 80px; height: 80px; }
}
@media(max-width:600px) {
 .app-shell { height: auto; min-height: 100dvh; display: flex; overflow: visible; }
 .sidebar { width: 100%; overflow: visible; gap: 12px; }
 .sidebar-brand { width: 112px; align-self: center; }
 .sidebar-nav { flex-direction: row; justify-content: center; flex-wrap: wrap; }
 .sidebar-link { gap: 8px; font-size: 12px; padding: 6px; }
 .logout-form { align-self: center; }
 .logout-btn { min-height: 36px; padding: 4px 14px; }
 .app-main { overflow: visible; }
 .page-content { overflow: visible; }
 .table-wrap { max-height: 55dvh; }
 .topbar .actions { flex-wrap: wrap; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; } }
@media(min-width:901px) { body.signup-page { height:100dvh; overflow:hidden; } .signup-main { overflow:hidden; } }

/* Administrative lists follow the shared Fluxos row/card pattern. */
.table-wrap:has(> .responsive-list) { padding: 0 4px 4px 0; border: 0; }
.responsive-list { border-collapse: separate; border-spacing: 0 8px; font-size: 13px; }
.responsive-list th { padding: 12px 14px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #617086; background: #f3f6fa; border: 0; }
.responsive-list td { padding: 14px; vertical-align: middle; background: #fff; border-block: 1px solid var(--fluxos-border); min-width: 0; overflow-wrap: anywhere; }
.responsive-list td:first-child { border-left: 1px solid var(--fluxos-border); border-radius: 12px 0 0 12px; font-weight: 600; }
.responsive-list td:last-child { border-right: 1px solid var(--fluxos-border); border-radius: 0 12px 12px 0; }
.responsive-list tbody tr:hover td { background: #f8fafc; }
.responsive-list :is(.button-outline,.button-green,button) { min-height: 44px; }
.responsive-list td pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; max-height: 180px; overflow: auto; margin: 0; font-size: 11px; }
.responsive-list td a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
@media (max-width: 900px) {
 .table-wrap:has(> .responsive-list) { max-height: none; overflow: visible; }
 .responsive-list { display: block; width: 100%; min-width: 0; }
 .responsive-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .responsive-list tbody { display: grid; gap: 12px; }
 .responsive-list tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 16px; border: 1px solid var(--fluxos-border); border-radius: 13px; background: #fff; }
 .responsive-list tbody td { display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; }
 .responsive-list tbody td:first-child, .responsive-list tbody td:last-child { border: 0; border-radius: 0; }
 .responsive-list tbody td:first-child { grid-column: 1/-1; border-bottom: 1px solid #edf1f5; padding-bottom: 12px; }
 .responsive-list td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #617086; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
 .responsive-list td:is([data-label="Payload"],[data-label="Ações"],[colspan]) { grid-column: 1/-1; }
 .responsive-list td[data-label="Ações"] a { width: 100%; text-align: center; }
}

/* Center listing actions without changing other columns or page toolbars. */
.responsive-list td[data-label="Ações"],
.responsive-list:has(td[data-label="Ações"]) th:last-child { text-align: center; vertical-align: middle; }
.responsive-list td[data-label="Ações"] > a { display: inline-flex; width: auto; align-items: center; justify-content: center; max-width: 100%; }
.responsive-list td[data-label="Ações"] .actions,
.responsive-list td[data-label="Ações"] > form { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; }

/* Shared administrative layout: consistent filters, rows and visible desktop pager. */
[hidden] { display:none !important; }
.actions,.topbar-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.topbar { justify-content:space-between; }
.topbar-actions { margin-left:auto; flex-shrink:0; }
.topbar-actions form { margin:0; }
.topbar-actions :is(a,button) { min-height:40px; gap:8px; }
.topbar-actions img { width:18px; height:18px; }
.page-content { display:flex; flex-direction:column; gap:16px; }
.filters-card { flex:0 0 auto; }
.filters-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.filters-form > .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; flex:1 1 600px; }
.filters-form .actions { margin:0; }
.filters-form label { display:block; font-size:12px; margin-bottom:6px; }
.filters-form :is(input,select) { width:100%; height:40px; }
.listing-card { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.listing-card > .table-wrap { flex:1 1 auto; min-height:0; max-height:none; overflow:auto; }
.list-search { display:grid; gap:6px; font-size:12px; }
.list-search input { width:100%; min-height:40px; }
.list-pagination { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--fluxos-border); padding-top:12px; font-size:12px; }
.pagination-controls { display:flex; gap:6px; border:1px solid var(--fluxos-border); border-radius:12px; padding:4px; }
.pagination-controls button { min-width:36px; min-height:40px; padding:8px 10px; }
.pagination-controls button:disabled { opacity:.4; cursor:default; box-shadow:none; transform:none; }
.list-note,.list-empty { font-size:13px; color:#617086; }
.event-payload summary { cursor:pointer; color:var(--brand-primary); font-weight:600; padding:10px 0; }
.login-card .central-login { margin:12px 0 0; }
.login-card .central-login a,.login-form > button { width:100%; min-height:44px; }
.modal-open { overflow:hidden; }
.admin-modal { width:min(1000px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--fluxos-border); border-radius:20px; color:var(--fluxos-gray-dark); }
.admin-modal[open] { display:flex; flex-direction:column; }
.admin-modal::backdrop { background:#031d4580; }
.admin-modal > header,.admin-modal > footer { flex-shrink:0; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--fluxos-border); }
.admin-modal > footer { justify-content:flex-end; border-bottom:0; border-top:1px solid var(--fluxos-border); }
.admin-modal h2 { font-size:20px; }
.admin-modal-body { overflow:auto; min-height:0; padding:20px; }
.admin-modal-body .page-content { padding:0; overflow:visible; }
.admin-modal .grid { gap:16px; }
.admin-modal .grid p { overflow-wrap:anywhere; }
.admin-modal .table-wrap { max-height:none; }
.admin-modal :is(.card,.responsive-list) { min-width:0; }
@media(max-width:900px) {
 .listing-card > .table-wrap { overflow:auto; }
 .responsive-list { table-layout:fixed; }
}
@media(max-width:767px), (max-width:991px) and (max-height:600px) {
 .app-shell { display:flex; flex-direction:column; height:auto; min-height:100dvh; overflow:visible; }
 .sidebar { width:100%; padding:10px 12px; gap:10px; overflow:visible; }
 .sidebar-brand { display:none; }
 .sidebar-nav { display:flex; flex-direction:row; flex-wrap:wrap; gap:6px; }
 .sidebar-link { padding:8px; font-size:12px; gap:6px; }
 .sidebar .nav-icon { width:28px; height:28px; }
 .sidebar .nav-icon img { width:20px; height:20px; }
 .app-main,.page-content { overflow:visible; }
 .topbar { padding:10px 12px; gap:8px; flex-wrap:wrap; }
 .topbar-title { gap:8px; font-size:14px; }
 .topbar-actions { gap:6px; flex-wrap:nowrap; }
 .topbar-actions :is(a,button) { width:36px; height:36px; min-height:36px; padding:8px; }
 .topbar-actions span { display:none; }
 .topbar > .actions { width:100%; }
 .page-content { padding:12px; }
 .listing-card { overflow:visible; flex:none; }
 .listing-card > .table-wrap { max-height:none; overflow:visible; }
 .filters-form > .grid { grid-template-columns:repeat(2,minmax(0,1fr)); flex-basis:100%; }
 .filters-form .actions { width:100%; }
 .filters-form .actions > * { flex:1; }
 .list-pagination { position:static; justify-content:center; }
 .list-pagination > span { width:100%; text-align:center; }
 .admin-modal { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
 .admin-modal-body { padding:12px; }
 .admin-modal .grid { grid-template-columns:minmax(0,1fr); }
}


.responsive-list td small { display:block; margin-top:6px; color:#617086; font-size:12px; }

.listing-card > .card-title { margin-bottom:0; }
@media(min-width:992px) { .listing-card > .list-search { grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; } }