/* =========================================================================
   BlueMed — Portal TISS
   Design tokens + light/dark theme + components
   ========================================================================= */

/* ---------- Tokens: tema claro (padrão) ---------- */
:root,
body {
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --text: #1B2344;
  --muted: #5A6382;
  --border: #E3E7F2;
  --field: #FFFFFF;

  --navy: #22397F;
  --navy-hover: #1A2C66;
  --accent: #C4127D;
  --accent-hover: #9D0E64;
  --link-blue: #3A55B0;

  /* semânticas — claro */
  --success: #0E7A4A;      --success-bg: #E2F6EC;
  --warning: #8A5A00;      --warning-bg: #FBF0D9;
  --danger:  #B01E3F;      --danger-bg:  #FBE4E9;

  /* perfis — claro */
  --perfil-admin:     #22397F; --perfil-admin-bg:     rgba(34,57,127,.10);
  --perfil-master:    #C4127D; --perfil-master-bg:    rgba(196,18,125,.10);
  --perfil-operador:  #3A55B0; --perfil-operador-bg:  rgba(58,85,176,.10);
  --perfil-prestador: #0E9F8A; --perfil-prestador-bg: rgba(14,159,138,.10);

  --shadow-md: 0 12px 32px rgba(15,22,60,.16);
  --shadow-sm: 0 4px 12px rgba(15,22,60,.08);
  --radius-card: 14px;
  --radius-input: 10px;
  --radius-btn: 10px;
  --radius-pill: 99px;
  --header-h: 72px;
  /* Largura fluida do shell: cresce com o viewport. Cap alto (2800px)
     pra aproveitar 2K/4K/ultrawide; a 97vw evita que o conteúdo cole na
     borda. Em telas <=1080px o breakpoint mobile zera o teto e usa
     100% via padding reduzido. */
  --max-w: min(97vw, 2800px);
  --gutter: clamp(16px, 2.4vw, 56px);
}

/* ---------- Tokens: tema escuro ---------- */
body[data-theme="escuro"] {
  --bg: #0E1327;
  --surface: #161D38;
  --text: #E9ECF8;
  --muted: #9AA3C4;
  --border: #28325A;
  --field: #101736;

  --success: #4CC38A;      --success-bg: rgba(30,180,110,.16);
  --warning: #E7B34A;      --warning-bg: rgba(231,179,74,.14);
  --danger:  #F07C93;      --danger-bg:  rgba(240,124,147,.14);

  --perfil-admin:     #ADBBF0; --perfil-admin-bg:     rgba(90,120,220,.18);
  --perfil-master:    #F08BC4; --perfil-master-bg:    rgba(196,18,125,.20);
  --perfil-operador:  #9FB4EE; --perfil-operador-bg:  rgba(58,85,176,.22);
  --perfil-prestador: #5ED4C0; --perfil-prestador-bg: rgba(14,159,138,.18);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
h1, h2, h3, h4, h5 { margin: 0; }

/* ---------- Layout: App Shell ---------- */
.bm-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ---------- Header ---------- */
.bm-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 60;
}
.bm-header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--gutter);
  height: var(--header-h);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.bm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--text);
}
.bm-brand:hover { text-decoration: none; }
.bm-brand-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(15,22,60,.08);
}
.bm-brand-text {
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.bm-brand-text small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .1em;
}

/* ---------- Nav horizontal ---------- */
.bm-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.bm-nav-group { position: relative; }
.bm-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.bm-nav-btn > .nav-ico {
  width: 18px; height: 18px;
  color: var(--muted);
  transition: color .18s;
  flex-shrink: 0;
}
.bm-nav-btn:hover {
  background: var(--bg);
  text-decoration: none;
}
.bm-nav-btn:hover > .nav-ico { color: var(--navy); }
.bm-nav-btn.active {
  background: rgba(34,57,127,.10);
  color: var(--navy);
}
.bm-nav-btn.active > .nav-ico { color: var(--navy); }
.bm-nav-btn.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: -6px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
body[data-theme="escuro"] .bm-nav-btn.active { color: #ADBBF0; }
body[data-theme="escuro"] .bm-nav-btn.active > .nav-ico { color: #ADBBF0; }
.bm-nav-btn .chev {
  transition: transform .2s;
  line-height: 0;
  opacity: .55;
}
.bm-nav-group.open > .bm-nav-btn .chev { transform: rotate(180deg); }

.bm-nav-dd {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 70;
  flex-direction: column;
  gap: 2px;
}
.bm-nav-group.open > .bm-nav-dd { display: flex; }
.bm-nav-dd a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.bm-nav-dd a:hover {
  background: var(--bg);
  text-decoration: none;
}
.bm-nav-dd a.active {
  background: rgba(34,57,127,.10);
  color: var(--navy);
}
body[data-theme="escuro"] .bm-nav-dd a.active { color: #ADBBF0; }
.bm-nav-dd .dd-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.bm-nav-dd .dd-ico svg { width: 16px; height: 16px; }
.bm-nav-dd a:hover .dd-ico {
  background: rgba(34,57,127,.10);
  color: var(--navy);
}
.bm-nav-dd a.active .dd-ico {
  background: var(--navy);
  color: #fff;
}
body[data-theme="escuro"] .bm-nav-dd a.active .dd-ico {
  background: #ADBBF0;
  color: var(--surface);
}
.bm-nav-dd .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(34,57,127,.25);
  flex-shrink: 0;
}
body[data-theme="escuro"] .bm-nav-dd .dot { background: rgba(255,255,255,.25); }
.bm-nav-dd a.active .dot { background: var(--accent); }

/* ---------- Header right ---------- */
.bm-spacer { flex: 1; }
.bm-search {
  height: 42px;
  width: clamp(220px, 24vw, 480px);
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--text);
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.bm-search:focus { border-color: var(--navy); }

.bm-icon-btn {
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.bm-icon-btn:hover { color: var(--accent); border-color: var(--accent); }

.bm-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}
.bm-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bm-logout-btn {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.bm-logout-btn:hover { color: var(--accent); }
.bm-hamburger { display: none; }

/* ---------- Drawer mobile ---------- */
.bm-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,14,35,.55);
  z-index: 80;
}
.bm-backdrop.show { display: block; }

.bm-drawer {
  width: 280px;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 90;
  transform: translateX(-105%);
  transition: transform .25s ease;
}
.bm-drawer.open { transform: translateX(0); }
.bm-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
}
.bm-drawer-head img { width: 44px; height: 44px; border-radius: 12px; }
.bm-drawer-head .txt {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
}
.bm-drawer-head small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
  letter-spacing: .1em;
}
.bm-drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bm-drawer-group { display: flex; flex-direction: column; }
.bm-drawer-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.9);
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.bm-drawer-btn:hover { background: rgba(255,255,255,.1); text-decoration: none; color: #fff; }
.bm-drawer-btn.active { background: rgba(255,255,255,.14); color: #fff; }
.bm-drawer-btn .flex1 { flex: 1; }
.bm-drawer-btn .drawer-ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.bm-drawer-btn.active .drawer-ico { opacity: 1; }
.bm-drawer-sub .drawer-sub-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  opacity: .55;
}
.bm-drawer-sub a.active .drawer-sub-ico { opacity: 1; color: var(--accent); }
.bm-drawer-btn .chev {
  transition: transform .2s;
  line-height: 0;
}
.bm-drawer-group.open > .bm-drawer-btn .chev { transform: rotate(180deg); }
.bm-drawer-sub {
  display: none;
  padding: 2px 0 6px;
  flex-direction: column;
}
.bm-drawer-group.open > .bm-drawer-sub { display: flex; }
.bm-drawer-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.62);
  padding: 9px 12px 9px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.bm-drawer-sub a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.bm-drawer-sub a.active { color: #fff; background: rgba(255,255,255,.14); }
.bm-drawer-sub .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}
.bm-drawer-sub a.active .dot { background: var(--accent); }
.bm-drawer-foot {
  padding: 22px 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  gap: 12px;
}
.bm-drawer-foot span {
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bm-drawer-foot img { height: 22px; opacity: .95; }

/* ---------- Main ---------- */
.bm-main {
  flex: 1;
  padding: 24px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}
.bm-page-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bm-page-head h1 {
  font-size: 23px;
  font-weight: 800;
}
.bm-page-head .subtitle {
  font-size: 14px;
  color: var(--muted);
}
.bm-page-head .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.bm-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.bm-footer span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bm-footer img { height: 26px; opacity: .9; transition: opacity .15s; }
.bm-footer img:hover { opacity: 1; }

/* ---------- Cards ---------- */
.bm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bm-card-body { padding: 18px 20px; }
.bm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.bm-card-head h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
.bm-card-head .hint {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- KPI Grid ---------- */
.bm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.bm-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bm-kpi-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.bm-kpi-value {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bm-kpi-delta {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

/* ---------- Table ---------- */
.bm-table-wrap { overflow-x: auto; }
.bm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.bm-table thead th {
  text-align: left;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.bm-table thead th:first-child { padding-left: 20px; }
.bm-table thead th:last-child  { padding-right: 20px; }
.bm-table tbody td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--border);
}
.bm-table tbody td:first-child { padding-left: 20px; }
.bm-table tbody td:last-child  { padding-right: 20px; }
.bm-table tbody tr:last-child td { border-bottom: 0; }
.bm-table tbody tr:hover td { background: var(--bg); }
.bm-table td.num, .bm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bm-table td.center, .bm-table th.center { text-align: center; }
.bm-table td.bold { font-weight: 700; }
.bm-table td.muted { color: var(--muted); }
.bm-table td.proto { font-weight: 700; color: var(--link-blue); }
.bm-table .empty { text-align: center; color: var(--muted); padding: 32px 20px; font-size: 14px; }

/* Pagination */
.bm-pagi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--muted);
  gap: 12px;
  flex-wrap: wrap;
}
.bm-pagi-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.bm-pagi-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.bm-pagi-btn:hover { border-color: var(--navy); text-decoration: none; }
.bm-pagi-btn[disabled], .bm-pagi-btn.disabled { color: var(--muted); cursor: not-allowed; }
.bm-pagi-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Badges ---------- */
.bm-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1.4;
}
.bm-badge-success { color: var(--success); background: var(--success-bg); }
.bm-badge-warning { color: var(--warning); background: var(--warning-bg); }
.bm-badge-danger  { color: var(--danger);  background: var(--danger-bg); }
.bm-badge-info    { color: var(--link-blue); background: rgba(58,85,176,.10); }
.bm-badge-muted,
.bm-badge-secondary { color: var(--muted); background: rgba(90,99,130,.10); }

.bm-badge-perfil-admin     { color: var(--perfil-admin);     background: var(--perfil-admin-bg); }
.bm-badge-perfil-master    { color: var(--perfil-master);    background: var(--perfil-master-bg); }
.bm-badge-perfil-operador  { color: var(--perfil-operador);  background: var(--perfil-operador-bg); }
.bm-badge-perfil-prestador { color: var(--perfil-prestador); background: var(--perfil-prestador-bg); }

/* ---------- Buttons ---------- */
.bm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-btn);
  border: none;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
  line-height: 1;
  font-family: inherit;
}
.bm-btn:hover { text-decoration: none; }
.bm-btn-primary {
  background: var(--navy);
  color: #fff;
}
.bm-btn-primary:hover { background: var(--navy-hover); color: #fff; }
.bm-btn-secondary {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
}
.bm-btn-secondary:hover { color: var(--text); border-color: var(--navy); }
.bm-btn-danger {
  background: var(--danger);
  color: #fff;
}
.bm-btn-danger:hover { filter: brightness(.9); color: #fff; }
.bm-btn-ghost {
  background: transparent;
  color: var(--accent);
  padding: 0;
  height: auto;
  font-weight: 700;
  font-size: 14px;
}
.bm-btn-ghost:hover { color: var(--accent-hover); text-decoration: underline; }
.bm-btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.bm-btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
}
.bm-btn-icon:hover { color: var(--accent); border-color: var(--accent); }
.bm-btn-icon.danger:hover { color: var(--danger); border-color: var(--danger); }

/* ---------- Forms ---------- */
.bm-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.bm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.bm-field.col-full { grid-column: 1 / -1; }
.bm-field .hint {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}
.bm-field .err {
  font-size: 13px;
  color: var(--danger);
  font-weight: 600;
  margin-top: 2px;
}
.bm-input, .bm-select, .bm-textarea {
  height: 44px;
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--text);
  padding: 0 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
  width: 100%;
}
.bm-input:focus, .bm-select:focus, .bm-textarea:focus { border-color: var(--navy); }
.bm-textarea { height: auto; min-height: 88px; padding: 10px 14px; resize: vertical; }
.bm-input[readonly], .bm-input:disabled, .bm-select:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
}
.bm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.bm-check input[type=checkbox] {
  accent-color: var(--navy);
  width: 16px;
  height: 16px;
  margin: 0;
}
.bm-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ---------- Dropzone (Upload) ---------- */
.bm-dropzone {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: 16px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.bm-dropzone.hover { border-color: var(--navy); background: rgba(34,57,127,.03); }
.bm-dropzone-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(34,57,127,.10);
  color: var(--link-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-dropzone-title { font-size: 16px; font-weight: 800; }
.bm-dropzone-sub { font-size: 14px; color: var(--muted); }

/* ---------- Alerts ---------- */
.bm-alert {
  padding: 12px 16px;
  border-radius: var(--radius-card);
  font-size: 14.5px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
}
.bm-alert-success { color: var(--success); background: var(--success-bg); border-color: var(--success-bg); }
.bm-alert-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-bg); }
.bm-alert-danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-bg); }
.bm-alert-info    { color: var(--link-blue); background: rgba(58,85,176,.10); border-color: rgba(58,85,176,.20); }
.bm-alert ul { margin: 4px 0 0 18px; padding: 0; }

/* ---------- Definition list ---------- */
.bm-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  font-size: 14px;
}
.bm-dl dt {
  color: var(--muted);
  font-weight: 600;
}
.bm-dl dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.bm-dl dd.hi { font-weight: 800; }
.bm-dl code {
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Accordion ---------- */
.bm-acc-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.bm-acc-head {
  width: 100%;
  border: none;
  background: transparent;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}
.bm-acc-head:hover { background: var(--bg); }
.bm-acc-head .title { font-weight: 700; font-size: 14.5px; flex: 1; }
.bm-acc-head .title small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; margin-top: 2px; }
.bm-acc-head .chev { transition: transform .2s; line-height: 0; }
.bm-acc-item.open > .bm-acc-head .chev { transform: rotate(180deg); }
.bm-acc-body {
  display: none;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--border);
}
.bm-acc-item.open > .bm-acc-body { display: block; }

/* ---------- Empty state ---------- */
.bm-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.bm-empty img { width: 44px; opacity: .5; filter: grayscale(1); }
.bm-empty h3 { font-size: 17px; font-weight: 800; }
.bm-empty p { margin: 0; max-width: 380px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* ---------- Login page ---------- */
.bm-login {
  min-height: 100vh;
  display: flex;
  background: #fff;
  font-family: 'Manrope', sans-serif;
}
.bm-login-panel {
  flex: 1.15;
  background: #22397F;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  color: #fff;
}
.bm-login-panel .deco {
  position: absolute;
  right: -120px;
  bottom: -100px;
  width: 520px;
  opacity: .08;
  pointer-events: none;
}
.bm-login-panel .logo {
  width: 200px;
  margin: -40px 0 0 -40px;
  border-radius: 12px;
}
.bm-login-panel .msg {
  position: relative;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bm-login-panel h1 {
  color: #fff;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
}
.bm-login-panel p {
  margin: 0;
  color: rgba(255,255,255,.75);
  font-size: 17px;
  line-height: 1.6;
}
.bm-login-panel .powered {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bm-login-panel .powered span {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  letter-spacing: .04em;
}
.bm-login-panel .powered img { height: 22px; opacity: .9; }

.bm-login-form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: #fff;
  color: #1B2344;
}
.bm-login-form {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bm-login-mobile-brand {
  display: none;
  align-items: center;
  gap: 12px;
}
.bm-login-mobile-brand img { width: 56px; height: 56px; border-radius: 14px; }
.bm-login-mobile-brand .txt { font-weight: 800; font-size: 20px; color: #1B2344; }
.bm-login-mobile-brand .txt small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #5A6382;
  letter-spacing: .08em;
}
.bm-login-form h2 {
  font-size: 28px;
  font-weight: 800;
  color: #1B2344;
}
.bm-login-form .sub {
  color: #5A6382;
  font-size: 15px;
  margin: 4px 0 0;
}
.bm-login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1B2344;
}
.bm-login-field input {
  height: 46px;
  border-radius: 10px;
  border: 1px solid #E3E7F2;
  background: #fff;
  color: #1B2344;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.bm-login-field input:focus { border-color: #22397F; }
.bm-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bm-login-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #5A6382;
  cursor: pointer;
  font-weight: 500;
}
.bm-login-row label input { accent-color: #22397F; width: 16px; height: 16px; }
.bm-login-row a { color: #C4127D; font-size: 14px; font-weight: 700; }
.bm-login-btn {
  height: 48px;
  border-radius: 10px;
  border: none;
  background: #22397F;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.bm-login-btn:hover { background: #1A2C66; }
.bm-login-note {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: #5A6382;
}
.bm-login-mobile-powered {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.bm-login-mobile-powered span {
  color: #5A6382;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bm-login-mobile-powered img { height: 24px; opacity: .9; }

/* ---------- Utilities ---------- */
.bm-flex   { display: flex; }
.bm-col    { display: flex; flex-direction: column; }
.bm-row    { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bm-gap-8  { gap: 8px; }
.bm-gap-12 { gap: 12px; }
.bm-gap-16 { gap: 16px; }
.bm-gap-20 { gap: 20px; }
.bm-mt-8   { margin-top: 8px; }
.bm-mt-16  { margin-top: 16px; }
.bm-w-max  { max-width: clamp(860px, 68vw, 1600px); }
.bm-nowrap { white-space: nowrap; }
.bm-muted  { color: var(--muted); }
.bm-text-right { text-align: right; }
.bm-text-center{ text-align: center; }
.bm-mono   { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.bm-hi     { font-weight: 800; color: var(--success); font-size: 20px; }
.bm-grow   { flex: 1; }
.bm-hidden { display: none !important; }

/* Split 2-col: 8/4 e 6/6 */
.bm-split-84 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.bm-split-66 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Filters bar */
.bm-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.bm-filters .bm-search-lg {
  height: 40px;
  flex: 1;
  min-width: 220px;
  max-width: clamp(340px, 36vw, 720px);
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--text);
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}
.bm-filters .bm-search-lg:focus { border-color: var(--navy); }
.bm-filters .bm-select-sm {
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--field);
  color: var(--text);
  padding: 0 10px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.bm-filters .bm-select-sm:focus { border-color: var(--navy); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .bm-nav, .bm-search, .bm-logout-btn { display: none; }
  .bm-hamburger { display: flex; }
  .bm-main { padding: 16px; gap: 16px; }
  .bm-header-inner { padding: 0 14px; }
  .bm-split-84, .bm-split-66 { grid-template-columns: 1fr; }

  .bm-login-panel { display: none; }
  .bm-login-form-wrap { background: #fff; }
  .bm-login-mobile-brand { display: flex; }
  .bm-login-mobile-powered { display: flex; }
}