@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --ink:#14181C;
  --paper:#F5F4F0;
  --paper-2:#EBE9E3;
  --line:#DCD8CF;
  --rust:#72B808;
  --rust-dark:#568D06;
  --teal:#2F6F5E;
  --muted:#767B72;
  --white:#FFFFFF;
  --danger:#B3261E;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);}
a{color:inherit;}

.brandmark{display:flex;align-items:center;gap:10px;}
.brandmark .dot{width:10px;height:10px;border-radius:50%;background:var(--rust);}
.brandmark span{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.01em;}

/* ================= LOGIN ================= */
#login{display:flex;min-height:100vh;}
.login-side{flex:1;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;
  justify-content:space-between;padding:48px;position:relative;overflow:hidden;}
.login-side .hub{position:relative;width:100%;height:280px;margin:auto 0;}
.hub svg{width:100%;height:100%;}
.hub-node{fill:#20261F;stroke:#3A4136;}
.hub-node.active{stroke:var(--rust);}
.hub-line{stroke:#2A302C;stroke-width:1;}
.hub-line.active{stroke:var(--rust);stroke-width:1.4;opacity:.7;}
.hub-center{fill:var(--rust);}
.login-side .tagline{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.3;max-width:340px;}
.login-side .foot{font-family:var(--font-mono);font-size:11px;color:#6B7168;letter-spacing:.03em;}
.login-main{flex:1;max-width:460px;display:flex;flex-direction:column;justify-content:center;
  padding:48px;margin:0 auto;}
.login-main > img{align-self:flex-start;max-width:100%;height:auto;}
.login-main h1{font-family:var(--font-display);font-size:24px;font-weight:600;margin-bottom:6px;}
.login-main p.sub{color:var(--muted);font-size:14px;margin-bottom:32px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.04em;}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:6px;
  background:var(--white);font-size:14px;font-family:var(--font-body);color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--rust);outline-offset:1px;border-color:var(--rust);}
.field textarea{resize:vertical;line-height:1.5;}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px;}
.row-between{display:flex;justify-content:space-between;align-items:center;margin:14px 0 24px;}
.checkbox-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.link{color:var(--rust-dark);font-size:13px;font-weight:500;text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--font-body);}
.link:hover{text-decoration:underline;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--rust);color:var(--white);
  border:none;border-radius:6px;padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer;width:100%;
  font-family:var(--font-body);}
.btn:hover{background:var(--rust-dark);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn.secondary:hover{background:var(--paper-2);}
.btn.danger{background:var(--white);color:var(--danger);border:1px solid #E3B3AF;}
.btn.danger:hover{background:#FBEDEC;}
.divider-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);}
.alert{background:#EEF6E4;border:1px solid #C9E3A8;color:var(--rust-dark);font-size:13px;padding:10px 12px;
  border-radius:6px;margin-bottom:18px;}
.alert.error{background:#FBEDEC;border-color:#E3B3AF;color:var(--danger);}

/* ================= DASHBOARD / SHARED SHELL ================= */
.topbar{background:var(--white);border-bottom:1px solid var(--line);padding:14px 32px;
  display:flex;justify-content:space-between;align-items:center;position:relative;}
.topbar-right{display:flex;align-items:center;gap:18px;}
.brand-sub{font-size:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:10px;margin-left:2px;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);border:none;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;}
button.avatar{cursor:pointer;}
button.avatar:focus-visible,.icon-btn:focus-visible,.dd-item:focus-visible{outline:2px solid var(--rust);outline-offset:2px;}
.icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;font-family:var(--font-body);text-decoration:none;}
.icon-btn:hover{color:var(--ink);}

/* Dropdowns da barra superior (Administração / menu da conta) */
.dd{position:relative;}
.dd-toggle{display:inline-flex;align-items:center;gap:5px;}
.dd.open .dd-toggle{color:var(--ink);}
.dd-caret{font-size:10px;transition:transform .15s;}
.dd.open .dd-caret{transform:rotate(180deg);}
.dd-panel{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:230px;z-index:50;
  background:var(--white);border:1px solid var(--line);border-radius:8px;padding:6px;
  box-shadow:0 8px 24px rgba(20,24,28,.12);}
.dd.open .dd-panel{display:block;}
.dd-heading{padding:10px 10px 4px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);cursor:default;user-select:none;}
.dd-heading:not(:first-child){margin-top:4px;border-top:1px solid var(--line);}
.dd-user-name{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:8px;}
.dd-item{display:block;padding:8px 10px;border-radius:6px;font-size:13.5px;color:var(--ink);text-decoration:none;}
.dd-item:hover{background:var(--paper-2);}
.dash-wrap{max-width:1080px;margin:0 auto;padding:44px 32px;}
.dash-head{margin-bottom:28px;}
.dash-head .eyebrow{font-family:var(--font-mono);font-size:11px;color:var(--rust-dark);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px;}
.dash-head h1{font-family:var(--font-display);font-size:28px;font-weight:600;}
.sys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.sys-card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:20px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;position:relative;
  transition:border-color .15s;}
.sys-card:hover{border-color:var(--rust);}
.sys-card .top{display:flex;justify-content:space-between;align-items:flex-start;}
.sys-mark{height:40px;display:flex;align-items:center;}
.sys-mark img{max-height:40px;max-width:120px;object-fit:contain;}
.sys-mark .code{font-family:var(--font-mono);font-size:12px;color:var(--muted);letter-spacing:.03em;}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);}
.sys-card h3{font-family:var(--font-display);font-size:15px;font-weight:600;}
.sys-card p{font-size:12px;color:var(--muted);}
.sys-card .go{font-size:12px;color:var(--rust-dark);font-weight:600;margin-top:auto;}
.empty-state{background:var(--white);border:1px dashed var(--line);border-radius:10px;padding:44px 24px;
  text-align:center;color:var(--muted);font-size:14px;}

/* ================= CONFIGURAÇÕES ================= */
.cfg-wrap{max-width:760px;margin:0 auto;padding:44px 32px;}
.cfg-section{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:28px;margin-bottom:20px;}
.cfg-section h2{font-family:var(--font-display);font-size:16px;margin-bottom:4px;}
.cfg-section .desc{font-size:13px;color:var(--muted);margin-bottom:22px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.cfg-foot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line);gap:12px;flex-wrap:wrap;}
.btn.small{width:auto;padding:9px 16px;font-size:13px;}
.save-status{font-size:12px;color:var(--muted);font-family:var(--font-mono);}
.save-status.ok{color:var(--rust-dark);}
.save-status.err{color:var(--danger);}

/* ================= PERMISSÕES ================= */
.perm-wrap{max-width:1080px;margin:0 auto;padding:44px 32px;display:grid;grid-template-columns:340px 1fr;gap:20px;}
.search-box{position:relative;}
.search-box input{width:100%;padding:10px 32px 10px 12px;border:1px solid var(--line);border-radius:6px;font-size:13px;margin-bottom:14px;font-family:var(--font-body);}
.search-box #btnLimparBusca{position:absolute;top:0;right:0;height:100%;width:32px;border:none;background:none;
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding-bottom:14px;}
.search-box #btnLimparBusca:hover{color:var(--ink);}
.user-list{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:70vh;overflow-y:auto;}
.user-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);
  cursor:pointer;font-size:13px;background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;font-family:var(--font-body);}
.user-row:last-child{border-bottom:none;}
.user-row.selected{background:var(--paper-2);}
.user-row.inativo{opacity:.5;}
.user-row .mini-avatar{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-family:var(--font-mono);flex-shrink:0;}
.user-row .name{font-weight:500;}
.user-row .email{color:var(--muted);font-size:11px;}
.badge-master{margin-left:auto;font-family:var(--font-mono);font-size:9px;background:var(--rust);color:#fff;
  padding:2px 6px;border-radius:4px;letter-spacing:.03em;flex-shrink:0;}

.busca-filtro-row{display:flex;gap:8px;align-items:flex-start;}
.busca-filtro-row .search-box{flex:1;}
.filtro-wrap{position:relative;flex-shrink:0;}
.btn-filtro{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--muted);cursor:pointer;position:relative;}
.btn-filtro:hover{color:var(--ink);border-color:var(--rust);}
.btn-filtro.ativo{color:var(--rust-dark);border-color:var(--rust);background:#EEF6E4;}
.filtro-badge{position:absolute;top:-6px;right:-6px;background:var(--rust);color:#fff;font-size:10px;
  font-family:var(--font-mono);min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;padding:0 4px;}
.filtro-painel{position:absolute;top:44px;right:0;width:260px;background:var(--white);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:16px;z-index:20;max-height:70vh;overflow-y:auto;}
.filtro-grupo{margin-bottom:16px;}
.filtro-grupo:last-of-type{margin-bottom:0;}
.filtro-grupo-titulo{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--rust-dark);margin-bottom:8px;}
.filtro-opcao{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0;cursor:pointer;}
.filtro-opcao input{accent-color:var(--rust);}
.filtro-opcoes-scroll{max-height:150px;overflow-y:auto;}
.filtro-painel select{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:6px;font-size:12.5px;
  font-family:var(--font-body);}
.filtro-rodape{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);text-align:right;}

.perm-panel{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:28px;}
.perm-panel .who{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;
  padding-bottom:20px;border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap;}
.perm-panel .who h2{font-family:var(--font-display);font-size:18px;}
.perm-panel .who p{font-size:12px;color:var(--muted);margin-top:2px;}
.master-toggle{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;margin-bottom:24px;}
.master-toggle .txt{flex:1;}
.master-toggle .txt strong{font-size:13px;display:block;}
.master-toggle .txt span{font-size:11px;color:var(--muted);}
.switch{position:relative;width:38px;height:22px;background:var(--line);border-radius:12px;flex-shrink:0;cursor:pointer;border:none;}
.switch.on{background:var(--rust);}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;
  transition:left .15s;}
.switch.on::after{left:18px;}
.perm-section-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--rust-dark);margin:22px 0 10px;}
.chip-grid{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:20px;padding:7px 12px 7px 8px;
  font-size:12.5px;cursor:pointer;background:var(--paper);}
.chip input{accent-color:var(--rust);width:14px;height:14px;}
.chip.on{background:#EEF6E4;border-color:var(--rust);color:var(--rust-dark);font-weight:500;}
.chip.sub{margin-left:14px;font-size:11.5px;padding:5px 10px 5px 6px;}
.chip.disabled{opacity:.45;cursor:not-allowed;}

.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:var(--paper);padding:10px 16px;
  border-radius:8px;font-size:13px;font-family:var(--font-mono);box-shadow:0 4px 16px rgba(0,0,0,.2);
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:100;}
.toast.show{opacity:1;transform:translateY(0);}
.toast.err{background:var(--danger);}

/* ================= TABELAS SIMPLES (ex: departamentos) ================= */
.simple-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.simple-table col.col-status{width:110px;}
.simple-table col.col-acoes{width:170px;}
.simple-table th{text-align:left;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding:0 10px 12px;border-bottom:1px solid var(--line);}
.simple-table th.col-status{text-align:center;}
.simple-table th.col-acoes{text-align:right;}
.simple-table td{padding:14px 10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.simple-table tr:last-child td{border-bottom:none;}
.simple-table tr:hover td{background:var(--paper);}
.simple-table td.col-status{text-align:center;}
.simple-table .acoes{display:flex;gap:16px;justify-content:flex-end;align-items:center;}
.simple-table form{display:inline;}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.03em;padding:3px 10px;border-radius:10px;}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.status-pill.ativo{background:#EEF6E4;color:var(--rust-dark);}
.status-pill.ativo::before{background:var(--rust);}
.status-pill.inativo{background:#F1F0EC;color:var(--muted);}
.status-pill.inativo::before{background:var(--muted);}
.inline-edit-form{display:flex;gap:8px;align-items:center;}
.inline-edit-form input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13.5px;
  font-family:var(--font-body);}

@media (max-width: 760px){
  .topbar{padding:12px 16px;}
  .topbar-right{gap:12px;}
  .brand-sub{display:none;}
  /* painéis ocupam a largura da barra, sem estourar a tela */
  .dd{position:static;}
  .dd-panel{left:12px;right:12px;top:calc(100% + 4px);min-width:0;}
  #login{flex-direction:column;}
  .login-side{display:none;}
  .perm-wrap{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
}
@media (max-width: 480px){
  .nav-home{display:none;} /* o logo já leva à home */
}
