@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #cfd8e3;
  --bg-2: #c2cddb;
  --surface: #f1f5fa;
  --surface-2: #e5ecf4;
  --surface-3: #d8e2ed;
  --surface-warm: #fff4ec;
  --stroke: #b8c5d3;
  --stroke-strong: #a6b5c5;
  --text: #243244;
  --text-strong: #142031;
  --muted: #64748b;
  --muted-soft: #7c8a9a;
  --accent: #e66124;
  --accent-2: #f08a5b;
  --accent-soft: #fff0e7;
  --accent-blue: #54789d;
  --accent-blue-soft: #edf4fb;
  --ok: #16a34a;
  --warn: #d97706;
  --live: #2563eb;
  --danger: #dc2626;
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, .08), 0 1px 4px rgba(15, 23, 42, .06);
  --shadow: 0 18px 42px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 30px 72px rgba(15, 23, 42, .18), 0 10px 28px rgba(15, 23, 42, .10);
  --radius: 18px;
  --radius2: 22px;
  --font: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Escala global da interface — ver bloco "Escala da interface" abaixo.
     1 = tamanho natural; a escala real é aplicada no @media mais adiante. */
  --ui-scale: 1;

  /* Altura de viewport CORRIGIDA pela escala. Use estas no lugar de vh/dvh:
       height: calc(100 * var(--vh))   em vez de   height: 100vh
     Motivo: vh mede o viewport real e o zoom NÃO se aplica a ela, então
     dentro da raiz escalada um 100vh vira 85% da tela (foi o que quebrou as
     sidebars do CRM e do Compras). Dividir pela escala devolve a altura cheia. */
  --vh: calc(1vh / var(--ui-scale));
  --dvh: calc(1dvh / var(--ui-scale));
}

*{box-sizing:border-box}
html,body{height:100%}

/* ── Escala da interface ──────────────────────────────────────────────────────
   O sistema foi desenhado com tamanhos em px pensados para telas grandes; num
   notebook isso obrigava a deixar o navegador em ~80% de zoom o tempo todo.
   Em vez de reescrever todos os tamanhos, aplicamos o zoom na raiz: o efeito é
   igual ao do navegador (a área útil em px CSS cresce na mesma proporção), só
   que já embutido no sistema. Para calibrar, mexa só em --ui-scale aqui embaixo
   (valores menores = interface menor) — --vh/--dvh se ajustam sozinhas.

   Só vale a partir de 1024px: em celular/tablet os tamanhos atuais já estão
   certos para toque, e mexer neles bagunçaria os breakpoints. */
@media screen and (min-width: 1024px){
  :root{ --ui-scale: .85; }
}

html{ zoom: var(--ui-scale); }

/* O painel de TV é lido de longe: desfaz a escala e volta ao tamanho natural. */
#tvOverlay{ zoom: calc(1 / var(--ui-scale)); }

/* A impressão tem medida física própria (mm/A4) — nunca escalar. */
@media print{
  html{ zoom: 1 !important; }
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background-color:var(--bg);
  overflow-x:hidden;
}

/* ── Fundo do sistema ─────────────────────────────────────────────────────────
   Camada fixa no viewport: os gradientes não esticam junto com a altura da
   página (era isso que criava as faixas em telas longas) e as transições são
   suaves entre o azul-acinzentado e o laranja da marca. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 12% -12%, rgba(84,120,157,.22) 0%, rgba(84,120,157,.10) 38%, rgba(84,120,157,0) 68%),
    radial-gradient(95% 75% at 106% -6%, rgba(230,97,36,.15) 0%, rgba(230,97,36,.06) 40%, rgba(230,97,36,0) 66%),
    radial-gradient(130% 80% at 50% 118%, rgba(84,120,157,.15) 0%, rgba(84,120,157,.06) 42%, rgba(84,120,157,0) 68%),
    linear-gradient(168deg, #e1e8f0 0%, #d3dce6 48%, #c9d4e0 100%);
}

/* Ruído sutil por cima do gradiente: quebra o banding (faixas de cor visíveis
   em degradês amplos) sem aparecer como textura a olho nu. */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

img{
  max-width:100%;
  height:auto;
}

button,
input,
select,
textarea{
  font:inherit;
}

.wrap{
  max-width:1260px;
  margin:0 auto;
  padding:30px 20px 72px;
}

/* Container largo: páginas com tabelas de muitas colunas (ex.: reports dos
   eventos) usam toda a largura da tela em vez do limite de 1260px. Ativa-se
   definindo $wrapWide = true antes de incluir inc/layout_top.php. */
.wrap.wrap-wide{
  max-width:none;
  padding-left:24px;
  padding-right:24px;
}

@media (max-width: 720px){
  .wrap.wrap-wide{
    padding-left:12px;
    padding-right:12px;
  }
}

.site-footer{
  padding:0 0 14px;
}

.site-footer-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding-top:2px;
}

.site-footer-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
  padding:8px 13px;
  border:1px solid rgba(20,32,49,.08);
  border-radius:999px;
  background:rgba(255,255,255,.30);
  box-shadow:0 8px 18px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.45);
  color:rgba(20,32,49,.56);
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
  text-align:center;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.site-footer-logo{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 3px 10px rgba(15,23,42,.08);
  flex:0 0 auto;
}

.site-footer-text{
  line-height:1.35;
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(180deg, rgba(10,12,16,.97), rgba(16,20,26,.94));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 32px rgba(0,0,0,.28);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.topbar-dashboard-link{
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease, opacity .16s ease;
}

.topbar-dashboard-link:hover{
  color:inherit;
  text-decoration:none;
  opacity:.96;
}

.topbar-dashboard-link:focus-visible{
  outline:2px solid rgba(255,255,255,.28);
  outline-offset:4px;
  border-radius:18px;
}

.logo_freza{
  width:400px;
  height:auto;
  max-width:100%;
}

.logo-dot{
  width:auto;
  height:auto;
}

.brand-title{
  font-size:15px;
  font-weight:700;
  color:#f8fafc;
  letter-spacing:.01em;
}

.brand-sub{
  margin-top:3px;
  font-size:12px;
  font-weight:600;
  color:rgba(226,232,240,.66);
}

.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-left:auto;
}

.topbar-action{
  min-width:118px;
  text-align:center;
}

.topbar-clock{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:122px;
  padding:9px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.18);
}

.topbar-clock-date{
  color:rgba(226,232,240,.56);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.topbar-clock-time{
  color:#f8fafc;
  font-size:18px;
  font-weight:800;
  line-height:1.05;
}

.topbar-status-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(226,232,240,.76);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.topbar-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid transparent;
  box-shadow:none;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.topbar-btn:hover{
  transform:translateY(-1px);
}

.topbar-btn-icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.topbar-btn-icon svg{
  width:18px;
  height:18px;
}

.topbar-btn-label{
  white-space:nowrap;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
}

.topbar-session{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:0;
}

.topbar-session-user{
  max-width:132px;
  color:rgba(226,232,240,.56);
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:uppercase;
  text-align:center;
}

.topbar-btn-primary{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color:rgba(230,97,36,.22);
  color:#ffffff;
  box-shadow:0 10px 22px rgba(230,97,36,.22);
}

.topbar-btn-primary:hover{
  box-shadow:0 14px 26px rgba(230,97,36,.26);
}

.topbar-btn-secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.10);
  color:#f8fafc;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.topbar-btn-secondary:hover{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}

.topbar-btn-logout{
  background:linear-gradient(90deg, #dc2626, #b91c1c);
  border-color:rgba(248,113,113,.26);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(185,28,28,.24);
  min-height:32px;
  padding:6px 9px;
  border-radius:10px;
  gap:5px;
}

.topbar-btn-logout:hover{
  background:linear-gradient(90deg, #ef4444, #b91c1c);
  border-color:rgba(252,165,165,.34);
  box-shadow:0 14px 26px rgba(185,28,28,.34);
}

.btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--text-strong);
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  line-height:1.2;
  box-shadow:0 1px 0 rgba(255,255,255,.9), var(--shadow-sm);
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.btn:hover{
  background:var(--surface-2);
  border-color:var(--stroke-strong);
  transform:translateY(-1px);
}

.btn-ghost{
  background:var(--surface-2);
}

.topbar-btn.topbar-btn-primary{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color:rgba(230,97,36,.22);
  color:#ffffff;
  box-shadow:0 10px 22px rgba(230,97,36,.22);
}

.topbar-btn.topbar-btn-primary:hover{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-color:rgba(230,97,36,.22);
  color:#ffffff;
  box-shadow:0 14px 26px rgba(230,97,36,.26);
}

.topbar-btn.topbar-btn-secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.10);
  color:#f8fafc;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.topbar-btn.topbar-btn-secondary:hover{
  border-color:rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:#f8fafc;
}

.topbar-btn.topbar-btn-logout{
  background:linear-gradient(90deg, #dc2626, #b91c1c);
  border-color:rgba(248,113,113,.26);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(185,28,28,.24);
  min-height:32px;
  padding:6px 9px;
  border-radius:10px;
  gap:5px;
}

.topbar-btn.topbar-btn-logout:hover{
  background:linear-gradient(90deg, #ef4444, #b91c1c);
  border-color:rgba(252,165,165,.34);
  color:#ffffff;
  box-shadow:0 14px 26px rgba(185,28,28,.34);
}

.btn-warning{
  background:linear-gradient(135deg, rgba(230,97,36,.15), rgba(84,120,157,.10));
  border-color:rgba(230,97,36,.20);
  color:var(--text-strong);
}

.btn-warning:hover{
  background:linear-gradient(135deg, rgba(230,97,36,.20), rgba(84,120,157,.14));
}

.btn-danger{
  border-color:#fecaca !important;
  color:#dc2626 !important;
  background:#fff4f4 !important;
}

.btn-danger:hover{
  background:#feeaea !important;
}

.grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:16px;
}

.stack-layout{
  display:grid;
  gap:16px;
}

.stack-layout-form{
  width:100%;
}

.list-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.list-toolbar-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex:1 1 420px;
  flex-wrap:wrap;
}

.list-toolbar-search{
  flex:0 1 320px;
  width:min(100%, 320px);
}

.table-search-status{
  min-height:18px;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.table-search-empty td{
  color:var(--muted) !important;
  text-align:center;
  font-style:italic;
}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr;}
}

@media (max-width: 640px){
  .site-footer-badge{
    border-radius:20px;
    padding:7px 11px;
  }

  .site-footer-logo{
    width:20px;
    height:20px;
  }
}

.card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(245,248,252,.98) 0%, rgba(231,238,246,.98) 100%);
  border:1px solid var(--stroke-strong);
  border-radius:var(--radius2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), var(--shadow);
  padding:22px;
}

.card::before,
.card::after{
  pointer-events:none;
}

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--accent), rgba(84,120,157,.75));
}

.card h1,
.card h3{
  margin:0 0 12px;
  color:var(--text-strong);
}

.card h1{
  font-size:30px;
  line-height:1.1;
}

.card h2{
  margin:0 0 12px;
  border:none;
  background:none;
  border-radius:0;
  display:inline-block;
  padding:2px 0 8px;
  position:relative;
  font-size:22px;
  line-height:1.15;
  color:var(--text-strong);
}

.card h2::after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:8px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), rgba(84,120,157,.20));
}

.card p{
  margin:0 0 10px;
  color:var(--muted);
  line-height:1.55;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--stroke-strong);
  background:#ffffff;
}

.table th,
.table td{
  padding:14px 12px;
  border-bottom:1px solid var(--stroke);
  vertical-align:top;
}

.table th{
  background:var(--surface-2);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.table td{
  color:var(--text);
  background:#ffffff;
}

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

.table tr:hover td{
  background:#f5f8fc;
}

/* Linha escondida pela busca some em qualquer tamanho de tela.
   No mobile as tr viram display:block (cartões) e isso sobrepõe o atributo
   [hidden] — sem esta regra o filtro de busca não funciona no celular. */
.table tr[hidden]{
  display:none !important;
}

.input,
.select,
textarea,
select,
select.input{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke-strong) !important;
  background:var(--surface) !important;
  color:var(--text-strong) !important;
  padding:12px 12px;
  outline:none;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.04);
}

textarea{
  min-height:110px;
  resize:vertical;
}

.input:focus,
.select:focus,
textarea:focus,
select:focus,
select.input:focus{
  border-color:rgba(230,97,36,.45) !important;
  box-shadow:0 0 0 4px rgba(230,97,36,.10);
}

select,
.select,
select.input{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:40px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(100,116,139,.9) 50%),
    linear-gradient(135deg, rgba(100,116,139,.9) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%,
    100% 0;
  background-size:6px 6px, 6px 6px, 2.5em 2.5em;
  background-repeat:no-repeat;
}

select option,
select optgroup{
  color:var(--text-strong) !important;
  background:#ffffff !important;
}

select:disabled,
.select:disabled,
select.input:disabled,
.input:disabled,
input:disabled,
textarea:disabled{
  opacity:.75;
  color:var(--muted) !important;
  background:#f1f5f9 !important;
  cursor:not-allowed;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width: 700px){
  .row{grid-template-columns:1fr;}
}

.kpis{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.kpis.kpis--compact{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.kpis.kpis--compact > .kpi{
  flex:1 1 220px;
  max-width:360px;
  text-align:center;
}

@media (max-width: 900px){
  .kpis{
    grid-template-columns:1fr;
  }

  .kpis.kpis--compact{
    justify-content:stretch;
  }

  .kpis.kpis--compact > .kpi{
    flex:1 1 100%;
    max-width:none;
  }
}

.kpi{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border:1px solid var(--stroke-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78), var(--shadow-sm);
}

.kpi::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, rgba(230,97,36,.92), rgba(84,120,157,.72));
}

.kpi .v{
  font-size:28px;
  font-weight:800;
  color:var(--text-strong);
}

.kpi .l{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.45;
}

.kpi-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

.kpi-link:hover{
  border-color:rgba(84,120,157,.22);
  background:#ffffff;
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}

.kpi-alert{
  border-color:rgba(217,119,6,.26);
  background:linear-gradient(180deg, #fff7ed, #ffffff);
  animation:kpiPulse 1.8s ease-in-out infinite;
}

.kpi-alert .v{
  color:#b45309;
}

.kpi-alert .l{
  color:#9a6b31;
}

@keyframes kpiPulse{
  0%{ box-shadow:0 0 0 0 rgba(245,158,11,0); }
  50%{ box-shadow:0 0 0 6px rgba(245,158,11,.14); }
  100%{ box-shadow:0 0 0 0 rgba(245,158,11,0); }
}

@media (prefers-reduced-motion: reduce){
  .kpi-alert,
  .dashboard-tool-card--alert{animation:none;}
}

.dashboard-tools-shell{
  margin:20px 0 22px;
}

.dashboard-tools-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.dashboard-tool-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.dashboard-tool-card{
  --tool-accent: var(--accent);
  --tool-soft: var(--accent-soft);
  flex:0 1 210px;
  width:min(210px, 100%);
  min-height:92px;
  padding:10px 11px;
  display:flex;
  flex-direction:column;
  gap:5px;
  position:relative;
  overflow:hidden;
  border-color:var(--stroke-strong);
  background:linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78), var(--shadow-sm);
}

.dashboard-tool-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, var(--tool-accent), rgba(84,120,157,.62));
}

.dashboard-tool-card::after{
  content:none;
}

.dashboard-tool-card:hover{
  border-color:rgba(84,120,157,.28);
  background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82), var(--shadow);
}

.dashboard-tool-card--alert{
  border-color:rgba(217,119,6,.26);
  background:linear-gradient(180deg, #fff7ed, #ffffff);
  animation:kpiPulse 1.8s ease-in-out infinite;
}

.dashboard-tool-card--alert .dashboard-tool-metric{
  color:#b45309;
}

.dashboard-tool-card--alert .dashboard-tool-label{
  color:#9a6b31 !important;
}

.dashboard-tool-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px;
}

.dashboard-tool-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:21px;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(84,120,157,.12);
  background:var(--tool-soft);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--tool-accent);
}

.dashboard-tool-metric{
  font-size:16px !important;
  line-height:1;
  color:var(--text-strong);
}

.dashboard-tool-title{
  font-size:14px;
  font-weight:800;
  line-height:1.15;
  color:var(--text-strong);
}

.dashboard-tool-label{
  margin-top:-2px;
  color:var(--muted) !important;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9px !important;
  font-weight:800 !important;
}

.dashboard-tool-description{
  color:var(--muted);
  line-height:1.3;
  font-size:10px;
}

.dashboard-tool--ember{
  --tool-accent:#e66124;
  --tool-soft:#fff0e7;
}

.dashboard-tool--ocean{
  --tool-accent:#54789d;
  --tool-soft:#edf4fb;
}

.dashboard-tool--sun{
  --tool-accent:#c88719;
  --tool-soft:#fff8dd;
}

.dashboard-tool--mint{
  --tool-accent:#2f8b6f;
  --tool-soft:#eaf7f3;
}

.dashboard-tool--violet{
  --tool-accent:#7261a8;
  --tool-soft:#f1edfb;
}

.dashboard-tool--rose{
  --tool-accent:#bf5d5d;
  --tool-soft:#fdf0f0;
}

.dashboard-tool--slate{
  --tool-accent:#60748a;
  --tool-soft:#eef3f7;
}

.dashboard-tool--amber{
  --tool-accent:#b57937;
  --tool-soft:#fff3e3;
}

@media (max-width: 1040px){
  .dashboard-tool-card{
    flex:1 1 320px;
    max-width:420px;
  }
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:var(--surface-2);
  color:var(--text-strong);
  font-size:12px;
  font-weight:700;
}

.dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#cbd5e1;
}

.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.live{background:var(--live)}
.dot.danger{background:var(--danger)}

.hr{
  height:1px;
  background:var(--stroke);
  margin:14px 0;
}

.bg-orb{
  position:fixed;
  inset:auto auto 0 0;
  width:520px;
  height:520px;
  border-radius:999px;
  filter:blur(70px);
  opacity:.18;
  pointer-events:none;
}

.orb-1{
  left:-120px;
  bottom:-180px;
  background:rgba(84,120,157,.32);
}

.orb-2{
  right:-160px;
  top:110px;
  background:rgba(230,97,36,.20);
}

.topbar-monitor{
  display:grid !important;
  grid-template-columns:1fr 1.4fr 1fr;
  align-items:center;
  gap:16px;
}

.tb-left{
  display:flex;
  justify-content:flex-start;
}

.tb-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.tb-center{
  display:block;
  text-align:center;
}

.tb-title{
  font-weight:800;
  letter-spacing:.05em;
  line-height:1.1;
  color:#f8fafc;
}

.tb-sub{
  font-size:10px;
  color:rgba(226,232,240,.62);
  letter-spacing:.2em;
  margin-top:4px;
  text-transform:uppercase;
  font-weight:700;
}

.note-box{
  font-size:14px;
  margin-top:10px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, #ffffff, var(--surface-2));
  color:var(--muted);
  text-align:left;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.note-box strong{
  color:var(--text-strong);
}

.notice-board{
  border-color:rgba(220,38,38,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 0 0 1px rgba(220,38,38,.06),
    var(--shadow);
  background:
    radial-gradient(circle at top right, rgba(255,214,102,.22), transparent 28%),
    radial-gradient(circle at left center, rgba(220,38,38,.12), transparent 34%),
    linear-gradient(180deg, #fff4ef, #ffe6de 100%);
}

.notice-board::before{
  height:6px;
  background:linear-gradient(90deg, #dc2626, #f59e0b 58%, #e66124);
}

.notice-board-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.notice-board-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(220,38,38,.18);
  background:rgba(255,255,255,.58);
  color:#991b1b;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(220,38,38,.10);
}

.notice-board-kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(180deg, #dc2626, #f97316);
  box-shadow:0 0 0 4px rgba(220,38,38,.12);
}

.notice-board-title{
  margin:0 !important;
  font-size:28px !important;
  color:#7f1d1d !important;
}

.notice-board-title::after{
  background:linear-gradient(90deg, #dc2626, rgba(249,115,22,.24)) !important;
}

.notice-board-summary{
  margin:8px 0 0 !important;
  max-width:620px;
  color:#8b3a1a !important;
  font-weight:600;
}

.notice-board-count{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:140px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(220,38,38,.18);
  background:rgba(255,255,255,.62);
  box-shadow:0 10px 24px rgba(220,38,38,.10);
}

.notice-board-count-label{
  color:#9a3412;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.notice-board-count-value{
  color:#7f1d1d;
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.notice-list{
  display:grid;
  gap:14px;
}

.notice-item{
  border:1px solid rgba(220,38,38,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,246,242,.98) 100%);
  border-radius:18px;
  padding:16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 24px rgba(220,38,38,.08),
    0 4px 12px rgba(15, 23, 42, .05);
}

.notice-item-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.notice-item-meta .badge{
  background:rgba(220,38,38,.08);
  border-color:rgba(220,38,38,.14);
  color:#991b1b;
}

.notice-item-message,
.notice-cell{
  white-space:pre-line;
  line-height:1.6;
  color:#3b1f16;
  font-size:16px;
  font-weight:700;
}

.notice-viewers-empty{
  display:inline-flex;
  align-items:center;
  min-height:72px;
  color:#7c8ba1;
  font-size:13px;
  font-weight:700;
}

.notice-viewers-summary{
  min-width:220px;
  display:grid;
  gap:8px;
}

.notice-viewers-countline{
  display:flex;
  align-items:baseline;
  gap:8px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.notice-viewers-countline strong{
  color:#243244;
  font-size:24px;
  line-height:1;
  letter-spacing:-.04em;
}

.notice-viewers-preview{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.notice-viewers-chip,
.notice-viewers-more{
  display:inline-flex;
  align-items:center;
  max-width:132px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #dbe4ee;
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.notice-viewers-more{
  border-color:rgba(230,97,36,.18);
  background:rgba(230,97,36,.08);
  color:#c25019;
}

.notice-viewers-last{
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}

.notice-viewers-last strong{
  color:#243244;
}

.notice-viewers-open{
  align-self:flex-start;
  min-height:auto;
  padding:7px 11px;
  font-size:12px;
}

.notice-viewers-modal-card{
  width:min(620px, calc(100% - 24px));
}

.notice-viewers-modal-notice{
  white-space:pre-line;
  line-height:1.55;
}

.notice-viewers-modal-list{
  display:grid;
  gap:10px;
  max-height:min(calc(52 * var(--vh)), 420px);
  overflow:auto;
  padding-right:4px;
}

.notice-viewers-modal-item{
  display:grid;
  gap:5px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
}

.notice-viewers-modal-name{
  color:#243244;
  font-size:14px;
  font-weight:900;
}

.notice-viewers-modal-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

.ev-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.ev-modal.is-open{
  display:block;
}

.ev-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 23, 42, .32);
  backdrop-filter:blur(4px);
}

.ev-card{
  position:relative;
  width:min(560px, calc(100% - 24px));
  margin:10vh auto 0;
  border-radius:18px;
  border:1px solid #dbe4ee;
  background:#ffffff;
  color:#243244;
  box-shadow:0 22px 60px rgba(15, 23, 42, .16);
  overflow:hidden;
  transform:translateY(8px);
  animation:evIn .14s ease-out forwards;
}

@keyframes evIn{
  from { opacity:0; transform:translateY(14px) scale(.99); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

.ev-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 12px;
  border-bottom:1px solid #e2e8f0;
  background:#f8fafc;
}

.ev-title{
  font-weight:900;
  letter-spacing:.2px;
  font-size:1.06rem;
  line-height:1.25;
}

.ev-sub{
  margin-top:6px;
  color:#64748b;
  font-weight:700;
  font-size:.88rem;
}

.ev-x{
  border:1px solid #dbe4ee;
  background:#ffffff;
  color:#475569;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}

.ev-x:hover{
  background:#f8fafc;
}

.ev-body{
  padding:14px;
}

.ev-row{
  margin-bottom:12px;
}

.ev-label{
  color:#64748b;
  font-weight:800;
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.7px;
  margin-bottom:6px;
}

.ev-value{
  background:#f8fafc;
  border:1px solid #dbe4ee;
  border-radius:14px;
  padding:10px 12px;
  font-weight:700;
  color:#243244;
  line-height:1.35;
  word-break:break-word;
}

.ev-pre{
  white-space:pre-wrap;
}

.ev-foot{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
  padding:12px 14px 14px;
  border-top:1px solid #e2e8f0;
}

.ev-btn{
  border:1px solid rgba(230,97,36,.18);
  background:linear-gradient(90deg, #e66124, #f08a5b);
  color:#ffffff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(230,97,36,.18);
}

.ev-btn:hover{
  filter:brightness(1.02);
}

.ev-btn-ghost{
  background:#ffffff;
  color:#243244;
  border-color:#dbe4ee;
  box-shadow:none;
}

.notice-alert-card{
  border-color:rgba(220,38,38,.22);
  background:
    radial-gradient(circle at top right, rgba(255,214,102,.18), transparent 30%),
    linear-gradient(180deg, #fff8f5, #fff0ea);
}

.notice-alert-card .ev-head{
  background:linear-gradient(180deg, #fff0ea, #fff6f2);
  border-bottom-color:rgba(220,38,38,.14);
}

.notice-alert-list{
  display:grid;
  gap:12px;
}

.notice-alert-item{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(220,38,38,.14);
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 24px rgba(220,38,38,.08), 0 4px 12px rgba(15,23,42,.05);
}

.notice-alert-message{
  color:#3b1f16;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  white-space:pre-line;
}

.notice-alert-meta{
  margin-top:8px;
  color:#9a3412;
  font-size:12px;
  font-weight:700;
}

.notice-alert-pref{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(220,38,38,.12);
  background:rgba(255,255,255,.62);
  color:#7c2d12;
  font-size:13px;
  font-weight:700;
  line-height:1.45;
  cursor:pointer;
}

.notice-alert-pref input{
  margin-top:2px;
  flex:0 0 auto;
  accent-color:#dc2626;
  transform:scale(1.05);
}

@keyframes noticePulse{
  0%{ box-shadow:0 0 0 0 rgba(220,38,38,0); }
  50%{ box-shadow:0 0 0 8px rgba(220,38,38,.10); }
  100%{ box-shadow:0 0 0 0 rgba(220,38,38,0); }
}

.notice-board,
.monitor-notice-card{
  animation:noticePulse 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .notice-board,
  .monitor-notice-card{
    animation:none;
  }
}

.card,
.card form,
.card .row{
  max-width:100%;
}

.btn-file{
  background:var(--surface);
  border:1px solid var(--stroke-strong);
  color:var(--text-strong);
  font-weight:700;
  padding:7px 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .18s ease;
  box-shadow:var(--shadow-sm);
}

.btn-file:hover{
  background:var(--surface-2);
  border-color:var(--stroke-strong);
  transform:translateY(-1px);
}

.btn-file.os{
  border-color:rgba(217,119,6,.22);
  background:#fff8eb;
  color:#a16207;
}

.btn-file.os:hover{
  background:#ffefcb;
}

.btn-file.extra{
  border-color:rgba(37,99,235,.18);
  background:#eef5ff;
  color:#1d4ed8;
}

.btn-file.extra:hover{
  background:#e0eeff;
}

.btn-file.report{
  border-color:rgba(220,38,38,.16);
  background:#fff2f2;
  color:#c2410c;
}

.btn-file.report:hover{
  background:#ffe4e4;
}

[style*="color:#fff"],
[style*="color: #fff"]{
  color:var(--text-strong) !important;
}

[style*="color:rgba(255,255,255,.92)"],
[style*="color: rgba(255,255,255,.92)"],
[style*="color:rgba(255,255,255,.90)"],
[style*="color: rgba(255,255,255,.90)"],
[style*="color:rgba(255,255,255,.88)"],
[style*="color: rgba(255,255,255,.88)"],
[style*="color:rgba(255,255,255,.85)"],
[style*="color: rgba(255,255,255,.85)"],
[style*="color:rgba(255,255,255,.82)"],
[style*="color: rgba(255,255,255,.82)"],
[style*="color:rgba(255,255,255,.80)"],
[style*="color: rgba(255,255,255,.80)"]{
  color:var(--text) !important;
}

[style*="color:rgba(255,255,255,.78)"],
[style*="color: rgba(255,255,255,.78)"],
[style*="color:rgba(255,255,255,.75)"],
[style*="color: rgba(255,255,255,.75)"],
[style*="color:rgba(255,255,255,.72)"],
[style*="color: rgba(255,255,255,.72)"],
[style*="color:rgba(255,255,255,.70)"],
[style*="color: rgba(255,255,255,.70)"],
[style*="color:rgba(255,255,255,.65)"],
[style*="color: rgba(255,255,255,.65)"],
[style*="color:rgba(255,255,255,.62)"],
[style*="color: rgba(255,255,255,.62)"],
[style*="color:rgba(255,255,255,.60)"],
[style*="color: rgba(255,255,255,.60)"],
[style*="color:rgba(255,255,255,.55)"],
[style*="color: rgba(255,255,255,.55)"]{
  color:var(--muted) !important;
}

[style*="background: rgba(255,255,255,.03)"],
[style*="background:rgba(255,255,255,.03)"],
[style*="background: rgba(255,255,255,.04)"],
[style*="background:rgba(255,255,255,.04)"],
[style*="background: rgba(255,255,255,.05)"],
[style*="background:rgba(255,255,255,.05)"],
[style*="background: rgba(255,255,255,.06)"],
[style*="background:rgba(255,255,255,.06)"],
[style*="background: rgba(255,255,255,.08)"],
[style*="background:rgba(255,255,255,.08)"],
[style*="background: rgba(255,255,255,.10)"],
[style*="background:rgba(255,255,255,.10)"]{
  background:var(--surface-2) !important;
}

[style*="background: rgba(20,20,20,.92)"],
[style*="background:rgba(20,20,20,.92)"],
[style*="background: rgba(18,18,22,.98)"],
[style*="background:rgba(18,18,22,.98)"]{
  background:var(--surface) !important;
}

[style*="border-color: rgba(255,255,255,.08)"],
[style*="border-color:rgba(255,255,255,.08)"],
[style*="border-color: rgba(255,255,255,.10)"],
[style*="border-color:rgba(255,255,255,.10)"],
[style*="border-color: rgba(255,255,255,.12)"],
[style*="border-color:rgba(255,255,255,.12)"],
[style*="border-color: rgba(255,255,255,.14)"],
[style*="border-color:rgba(255,255,255,.14)"],
[style*="border-color: rgba(255,255,255,.16)"],
[style*="border-color:rgba(255,255,255,.16)"],
[style*="border-color: rgba(255,255,255,.18)"],
[style*="border-color:rgba(255,255,255,.18)"],
[style*="border:1px solid rgba(255,255,255,.08)"],
[style*="border: 1px solid rgba(255,255,255,.08)"],
[style*="border:1px solid rgba(255,255,255,.10)"],
[style*="border: 1px solid rgba(255,255,255,.10)"],
[style*="border:1px solid rgba(255,255,255,.12)"],
[style*="border: 1px solid rgba(255,255,255,.12)"],
[style*="border:1px solid rgba(255,255,255,.14)"],
[style*="border: 1px solid rgba(255,255,255,.14)"],
[style*="border:1px solid rgba(255,255,255,.16)"],
[style*="border: 1px solid rgba(255,255,255,.16)"],
[style*="border:1px solid rgba(255,255,255,.18)"],
[style*="border: 1px solid rgba(255,255,255,.18)"],
[style*="border-bottom:1px solid rgba(255,255,255,.10)"],
[style*="border-bottom: 1px solid rgba(255,255,255,.10)"]{
  border-color:var(--stroke) !important;
}

@media (max-width: 900px){
  .table[data-mobile-ready="1"]{
    display:block;
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:transparent;
  }

  .table[data-mobile-ready="1"] thead{
    display:none;
  }

  .table[data-mobile-ready="1"] tbody,
  .table[data-mobile-ready="1"] tr{
    display:block;
    width:100%;
  }

  .table[data-mobile-ready="1"] tr{
    margin:0 0 12px;
    border:1px solid var(--stroke);
    border-radius:16px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:var(--shadow-sm);
  }

  .table[data-mobile-ready="1"] td{
    display:block !important;
    width:100%;
    padding:12px !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    border-bottom:1px solid var(--stroke);
    background:#ffffff;
  }

  .table[data-mobile-ready="1"] td:last-child{
    border-bottom:none;
  }

  .table[data-mobile-ready="1"] td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:6px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .table[data-mobile-ready="1"] td[colspan]::before,
  .table[data-mobile-ready="1"] td[data-label=""]::before{
    content:"";
    display:none;
  }

  .card form[style*="display:flex"],
  .table[data-mobile-ready="1"] td form[style*="display:flex"]{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  .card form [style*="min-width"],
  .table[data-mobile-ready="1"] td form [style*="min-width"]{
    min-width:0 !important;
    width:100% !important;
    flex:1 1 auto !important;
  }
}

@media (max-width: 720px){
  .wrap{
    padding:18px 12px 56px;
  }

  .topbar{
    padding:0;
  }

  .topbar-inner{
    padding:6px 8px;
    gap:6px;
  }

  .topbar-monitor{
    grid-template-columns:minmax(0, 64px) minmax(0, 1fr) auto;
    text-align:initial;
    gap:6px;
  }

  .brand{
    gap:8px;
  }

  .brand img,
  .tb-center img{
    height:30px !important;
  }

  .brand-title{
    font-size:12px;
  }

  .brand-sub{
    display:none;
  }

  .tb-left{
    justify-content:flex-start;
    min-width:0;
  }

  .tb-right{
    justify-content:flex-end;
    align-items:center;
    gap:4px;
    flex-wrap:nowrap;
    min-width:0;
  }

  .topbar-actions{
    width:100%;
    justify-content:center;
    margin-left:0;
    gap:6px;
  }

  .topbar-action{
    min-width:0;
  }

  .topbar-clock{
    min-width:64px;
    padding:4px 6px;
    border-radius:10px;
    gap:0;
  }

  .topbar-clock-date{
    font-size:8px;
  }

  .topbar-clock-time{
    font-size:11px;
  }

  .topbar-status-chip{
    padding:5px 7px;
    font-size:10px;
  }

  .topbar-btn{
    min-height:30px;
    padding:5px 7px;
    border-radius:9px;
    gap:5px;
  }

  .topbar-btn-icon,
  .topbar-btn-icon svg{
    width:14px;
    height:14px;
  }

  .topbar-btn-label{
    font-size:10px;
  }

  .topbar-btn-logout{
    padding:5px;
    min-width:30px;
    min-height:30px;
  }

  .topbar-btn-logout .topbar-btn-label{
    display:none;
  }

  .topbar-session{
    flex-direction:row;
    align-items:center;
    gap:4px;
  }

  .topbar-session-user{
    order:-1;
    max-width:72px;
    font-size:8px;
    letter-spacing:.02em;
    text-align:right;
  }

  .tb-title{
    font-size:11px;
    line-height:1;
    letter-spacing:.03em;
  }

  .tb-sub{
    display:none;
  }

  .card{
    padding:16px;
    border-radius:18px;
  }

  .card h1{
    font-size:24px;
  }

  .card h2{
    font-size:19px;
  }

  .dashboard-tool-grid{
    justify-content:stretch;
  }

  .dashboard-tool-card{
    flex:1 1 100%;
    width:100%;
    max-width:none;
    min-height:0;
    padding:9px;
  }

  .dashboard-tool-title{
    font-size:13px;
  }

  .dashboard-tool-metric{
    font-size:15px !important;
  }

  .dashboard-tool-description{
    font-size:9px;
  }

  .badge{
    max-width:100%;
    white-space:normal !important;
    word-break:break-word;
  }

  .notice-viewers-summary{
    min-width:0;
  }

  .notice-viewers-chip,
  .notice-viewers-more{
    max-width:100%;
  }

  .btn{
    padding:9px 11px;
  }
}

@media (max-width: 520px){
  .brand-title{
    font-size:11px;
  }

  .brand img,
  .tb-center img{
    height:26px !important;
  }

  .topbar-inner{
    padding:5px 7px;
    gap:5px;
  }

  .topbar-monitor{
    grid-template-columns:minmax(0, 54px) minmax(0, 1fr) auto;
    gap:5px;
  }

  .topbar-clock{
    min-width:0;
    padding:3px 5px;
  }

  .topbar-clock-date{
    display:none;
  }

  .topbar-clock-time{
    font-size:10px;
  }

  .topbar-btn{
    min-height:28px;
    padding:4px 6px;
    gap:4px;
  }

  .topbar-btn-icon,
  .topbar-btn-icon svg{
    width:13px;
    height:13px;
  }

  .topbar-btn-label{
    font-size:9px;
  }

  .topbar-btn-logout{
    min-width:28px;
    min-height:28px;
    padding:4px;
  }

  .topbar-session-user{
    max-width:58px;
    font-size:7px;
  }

  .tb-title{
    font-size:10px;
  }
}
/* ─── Módulo Planejamento: utilitários de print ─────────────────── */
@media print {
  .topbar, header, nav, .site-footer { display: none !important; }
  .wrap { padding: 0 !important; max-width: 100% !important; }
  body { background: #fff !important; }
}

/* ─── Botões sólidos de ação (texto branco garantido) ─────────────────
   O shim de migração do tema escuro reverte inline color:#fff para texto
   escuro; estas classes ficam no fim do arquivo para vencer essa regra. */
.btn-solid-danger{
  background:linear-gradient(135deg, #dc2626, #ef4444) !important;
  border-color:rgba(185,28,28,.55) !important;
  color:#ffffff !important;
  box-shadow:0 8px 18px rgba(220,38,38,.28), var(--shadow-sm);
}
.btn-solid-danger:hover{
  background:linear-gradient(135deg, #b91c1c, #dc2626) !important;
  color:#ffffff !important;
}
.btn-solid-amber{
  background:linear-gradient(135deg, #d97706, #f59e0b) !important;
  border-color:rgba(180,83,9,.55) !important;
  color:#ffffff !important;
  box-shadow:0 8px 18px rgba(217,119,6,.28), var(--shadow-sm);
}
.btn-solid-amber:hover{
  background:linear-gradient(135deg, #b45309, #d97706) !important;
  color:#ffffff !important;
}
.btn-solid-accent{
  background:linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border-color:rgba(230,97,36,.5) !important;
  color:#ffffff !important;
  box-shadow:0 8px 18px rgba(230,97,36,.28), var(--shadow-sm);
}
.btn-solid-accent:hover{
  background:linear-gradient(135deg, #c9511b, var(--accent)) !important;
  color:#ffffff !important;
}

/* ── Rascunho automático de formulários longos (FrezaDraft) ── */
.freza-draft-banner{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin:0 0 16px; padding:12px 16px; border-radius:12px;
  background:rgba(230,97,36,.08); border:1px solid rgba(230,97,36,.28);
}
.freza-draft-msg{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
.freza-draft-msg strong{ color:var(--accent); }
.freza-draft-msg span{ color:var(--muted); }
.freza-draft-actions{ display:flex; gap:8px; }
.freza-draft-actions button{
  border:none; cursor:pointer; border-radius:9px; padding:8px 14px;
  font-size:13px; font-weight:800; color:#fff;
}
.freza-draft-yes{ background:linear-gradient(90deg,#16a34a,#22c55e); }
.freza-draft-no{ background:#9aa3ad; }
.freza-draft-actions button:hover{ filter:brightness(1.07); }

.freza-draft-status{
  margin-top:10px; font-size:12.5px; font-weight:700; color:#16a34a; text-align:right;
}
.freza-draft-status.is-error{ color:var(--danger); }

.freza-session-warn{
  margin:0 0 16px; padding:12px 16px; border-radius:12px; font-size:13.5px;
  background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.30); color:var(--danger);
}
.freza-session-warn a{ color:var(--danger); font-weight:800; }

/* ── Tópicos dentro de um aviso ───────────────────────────────────────
   O `- ` no começo da linha vira lista (ver frezaNoticeTopicos). Fica no
   CSS global porque o mesmo aviso é desenhado em três lugares: a tela de
   Avisos, o card do dashboard e o modal de quem visualizou. */
.fz-topicos { margin: 6px 0; padding: 0; list-style: none; }
.fz-topicos li {
  position: relative;
  padding-left: 18px;
  margin: 3px 0;
  line-height: 1.5;
}
/* A bolinha é o "destaque do início do tópico": numa lista de oito itens
   lida no celular, é ela que diz onde cada um começa. */
.fz-topicos li::before {
  content: "•";
  position: absolute;
  left: 3px;
  top: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 900;
  color: var(--accent);
}
.fz-topicos li strong { color: var(--text-strong); }