/* ============================================================
   HelpDesk Tickets
   Arquivo: assets/css/style.css
   Descrição: Tema principal do sistema de chamados da HelpDesk.
   Padrão visual: dark, cards corporativos, laranja institucional,
   componentes customizados e responsividade.
   ============================================================ */

/* ============================================================
   01. Variáveis globais / Design tokens
   ============================================================ */
:root{
  --bg:#121318;
  --bg2:#17191f;
  --panel:#1f2025;
  --panel2:#25272e;
  --side:#0e1017;
  --line:#30333d;
  --soft:rgba(255,255,255,.065);

  --text:#f4f6fb;
  --muted:#9aa4b5;
  --dim:#667085;

  --orange:#ff861f;
  --orange2:#ff9b3d;
  --green:#35c98f;
  --green2:#6ee7b7;
  --red:#ff5c70;
  --yellow:#facc15;
  --blue:#5b8cff;
  --purple:#9b7cff;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 20px 70px rgba(0,0,0,.34);
  --font:Inter,Segoe UI,Roboto,Arial,sans-serif;
}

/* ============================================================
   02. Reset e base
   ============================================================ */
*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:
    radial-gradient(circle at 75% -10%,rgba(255,134,31,.08),transparent 30%),
    linear-gradient(180deg,var(--bg2),var(--bg));
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
}

.sga-page-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,134,31,.14), transparent 30%),
    rgba(10,11,15,.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, visibility .16s ease;
}

body.sga-page-loading .sga-page-loader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.sga-page-loader-box{
  min-width:190px;
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:20px 24px;
  border:1px solid rgba(255,134,31,.28);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(31,32,37,.96), rgba(13,14,18,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.46);
}

.sga-page-loader-spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.13);
  border-top-color:var(--orange);
  animation:sgaPageLoaderSpin .78s linear infinite;
}

.sga-page-loader-text{
  color:#f4f6fb;
  font-size:13px;
  font-weight:900;
}

@keyframes sgaPageLoaderSpin{
  to{transform:rotate(360deg)}
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}

/* ============================================================
   03. Estrutura principal
   ============================================================ */
.layout{
  display:grid;
  grid-template-columns:286px 1fr;
  min-height:100vh;
}

.main{
  padding:28px 32px 46px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:22px;
}

.title h1{
  margin:0;
  font-size:30px;
  letter-spacing:-.04em;
}

.title p{
  margin:8px 0 0;
  color:#a9b4c7;
}

.actions{
  display:flex;
  gap:10px;
}

/* ============================================================
   04. Sidebar / Navegação lateral
   ============================================================ */
.sidebar{
  min-height:100vh;
  height:100vh;
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  overflow:visible;
  padding:18px 16px;
  background:linear-gradient(180deg,#0f1118,#0b0d13);
  border-right:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:24px;
  padding:4px 2px 12px;
}

.brand img{
  width:48px;
  max-height:34px;
  object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(255,134,31,.12));
}

.brand strong{
  display:block;
  font-size:17px;
  letter-spacing:-.02em;
}

.brand span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
}

.nav{
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  gap:7px;
}

.nav-item{
  position:relative;
  height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:10px;
  color:#cbd5e1;
  font-weight:850;
  transition:.18s ease;
}

.nav-item:before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:99px;
  background:transparent;
}

.nav-ico{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#8f98aa;
  transition:.18s ease;
}

.nav-ico svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-item:hover{
  background:rgba(255,255,255,.045);
  color:#fff;
  transform:translateX(3px);
}

.nav .nav-item:nth-child(odd):hover{border-color:rgba(53,201,143,.22)}
.nav .nav-item:nth-child(even):hover{border-color:rgba(255,134,31,.25)}
.nav .nav-item:nth-child(odd):hover .nav-ico{color:var(--green)}
.nav .nav-item:nth-child(even):hover .nav-ico{color:var(--orange)}

.nav-item.active{
  background:linear-gradient(135deg,rgba(255,134,31,.16),rgba(255,255,255,.035));
  color:#fff;
  border-color:rgba(255,134,31,.36);
  box-shadow:inset 0 0 0 1px rgba(255,134,31,.08);
}

.nav-item.active:before{background:var(--orange)}
.nav-item.active .nav-ico{color:var(--orange)}
.nav-item.active:hover{color:#fff;border-color:rgba(255,134,31,.50)}
.nav-item.active:hover .nav-ico{color:var(--orange)}

/* ============================================================
   05. Menu do usuário / Rodapé da sidebar
   ============================================================ */
.user-menu{
  position:relative;
  z-index:100;
  margin-top:auto!important;
}

.user-menu summary{list-style:none}
.user-menu summary::-webkit-details-marker{display:none}

.userbox{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:#fff;
  font-weight:850;
  cursor:pointer;
}

.userbox small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-weight:600;
}

.user-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--orange),#ffc078);
  color:#111318;
  font-weight:1000;
}

.user-info{
  min-width:0;
  flex:1;
}

.user-info span,
.user-info small{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-arrow{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  color:#8f98aa;
  transition:.25s ease;
}

.user-arrow svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.user-menu:hover .user-arrow{color:var(--orange)}
.user-menu[open] .user-arrow{color:var(--orange);transform:rotate(180deg)}

.user-dropdown{
  position:absolute;
  left:0;
  right:0;
  bottom:68px;
  display:none;
  gap:7px;
  padding:10px;
  background:linear-gradient(180deg,#1d1f26,#15171d);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  z-index:9999;
}

.user-menu[open] .user-dropdown{display:grid}

.user-dropdown a{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:10px;
  color:#fff;
  font-weight:850;
  transition:.18s ease;
}

.user-dropdown a:hover{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,134,31,.28);
  transform:translateX(3px);
}

.user-dropdown a:hover .nav-ico{color:var(--orange)}

/* ============================================================
   06. Botões, badges e alertas
   ============================================================ */
.btn{
  border:0;
  border-radius:9px;
  padding:13px 18px;
  font-weight:950;
  cursor:pointer;
  background:var(--panel2);
  color:#fff;
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:.18s ease;
}

.btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#0f1115}
.btn.green{background:linear-gradient(135deg,var(--green),var(--green2));color:#07130e}
.btn.danger{background:rgba(255,92,112,.12);color:#ff9aaa;border:1px solid rgba(255,92,112,.25)}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}

.badge{
  display:inline-flex;
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:950;
  border:1px solid var(--soft);
}

.badge.open{color:#d9e5ff;background:rgba(91,140,255,.13);border-color:rgba(91,140,255,.35)}
.badge.progress{color:#7ee3bb;background:rgba(53,201,143,.12);border-color:rgba(53,201,143,.32)}
.badge.waiting{color:#fde68a;background:rgba(250,204,21,.12);border-color:rgba(250,204,21,.32)}
.badge.critical{color:#ff9aaa;background:rgba(255,92,112,.12);border-color:rgba(255,92,112,.32)}
.badge.dark{color:#cbd5e1;background:rgba(255,255,255,.045)}

.alert{
  border-radius:9px;
  padding:12px 14px;
  margin-bottom:14px;
  font-weight:850;
}

.alert.err{background:rgba(255,92,112,.12);color:#ff9aaa;border:1px solid rgba(255,92,112,.35)}
.alert.ok{background:rgba(53,201,143,.12);color:#78dfba;border:1px solid rgba(53,201,143,.35)}

/* ============================================================
   07. Cards, grids, KPIs e painéis
   ============================================================ */
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(4,1fr)}
.stats2{grid-template-columns:repeat(4,1fr);margin-top:16px}
.twocol{grid-template-columns:1.55fr .95fr}
.threecol{grid-template-columns:1.2fr .9fr .9fr}

.card{
  background:linear-gradient(180deg,var(--panel),#1b1d22);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.stat{
  min-height:122px;
  position:relative;
  overflow:hidden;
}

.stat:after{
  content:"";
  position:absolute;
  right:-32px;
  top:-32px;
  width:116px;
  height:116px;
  border-radius:50%;
  background:rgba(255,134,31,.095);
}

.stat .num{
  margin-bottom:12px;
  font-size:36px;
  font-weight:1000;
  letter-spacing:-.04em;
}

.stat .label{font-weight:950;color:#d6deec}
.stat .sub{position:relative;z-index:1;margin-top:8px;color:var(--dim);font-size:12px}
.stat.critical:after{background:rgba(255,92,112,.14)}
.stat.greenish:after{background:rgba(53,201,143,.14)}
.stat.blueish:after{background:rgba(91,140,255,.13)}

.section-title{
  margin:0 0 18px;
  font-size:20px;
  letter-spacing:-.025em;
}

.section-title small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.opsbar{
  display:grid;
  grid-template-columns:1.5fr repeat(4,auto);
  gap:14px;
  align-items:center;
  margin-bottom:18px;
  padding:15px 18px;
  background:linear-gradient(180deg,#1d1f26,#181a20);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.ops-brand{display:flex;gap:12px;align-items:center}
.ops-brand strong{display:block;font-size:15px}
.ops-brand span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.ops-pill{display:flex;gap:9px;align-items:center;border-left:1px solid var(--line);padding-left:14px;color:#cbd5e1}
.ops-pill b{font-size:18px;color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(53,201,143,.12)}

/* ============================================================
   08. Tabelas e listagens
   ============================================================ */
.table{width:100%;border-collapse:collapse}
.table th{
  padding:13px 10px;
  border-bottom:1px solid var(--line);
  color:#8290a8;
  font-size:12px;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.table td{padding:15px 10px;border-bottom:1px solid rgba(255,255,255,.05);color:#dce5f3}
.table tr:hover td{background:rgba(255,255,255,.025)}
.table-wrap{width:100%;overflow-x:auto}
.table-clickable tbody tr,
.clickable-row,
.ticket-row{cursor:pointer}
.table-clickable tbody tr:hover td,
.clickable-row:hover td,
.ticket-row:hover td{background:rgba(255,134,31,.035)!important}
.row-sub{display:block;color:var(--dim);margin-top:4px;font-size:12px}
.empty{color:var(--muted);padding:30px;text-align:center}

.list{display:grid;gap:10px}
.list-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.045)}
.list-row strong{display:block}
.list-row small{display:block;color:var(--muted);margin-top:3px}

.progress-line{height:8px;border-radius:99px;background:#303541;overflow:hidden;width:120px}
.progress-line i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--orange))}

/* ============================================================
   09. Formulários, inputs e anexos
   ============================================================ */
.form{display:grid;gap:14px}
.field label{display:block;color:#cbd5e1;margin-bottom:7px;font-weight:850}
.field label span{color:var(--orange)}
.field small,.field-help{display:block;margin-top:8px;color:var(--dim);font-size:12px;line-height:1.4}

.input,
.select,
.textarea{
  width:100%;
  background:#13151b;
  border:1px solid var(--line);
  border-radius:9px;
  color:#fff;
  padding:12px 13px;
  outline:none;
}

.textarea{min-height:130px;resize:vertical}
.input:hover,.select:hover,.textarea:hover{border-color:rgba(255,134,31,.25)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,134,31,.08)}

.form-grid,.form-grid-2,.form-grid-3,.form-grid-4{display:grid;gap:14px}
.form-grid.two,.form-grid-2{grid-template-columns:repeat(2,1fr)}
.form-grid.three,.form-grid-3{grid-template-columns:repeat(3,1fr)}
.form-grid.four,.form-grid-4{grid-template-columns:repeat(4,1fr)}
.filters{display:grid;grid-template-columns:2fr repeat(3,1fr) auto;gap:12px;margin-bottom:16px}
.page-note{margin:-6px 0 18px;color:var(--muted)}

/* Campo de anexos customizado */
.file-ui{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  width:100%!important;
  min-height:52px!important;
  padding:8px!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  background:#101219!important;
  cursor:pointer!important;
  overflow:hidden!important;
  transition:.18s ease;
}

.file-ui:hover{border-color:rgba(255,134,31,.32)!important;box-shadow:0 0 0 4px rgba(255,134,31,.06)}
.file-ui input[type="file"]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:10!important}
.file-ui input[type="file"]::file-selector-button,
.file-ui input[type="file"]::-webkit-file-upload-button{display:none!important}

.file-ui-btn{
  position:relative!important;
  z-index:2!important;
  height:36px!important;
  padding:0 18px!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,#ff861f,#ff9b3d)!important;
  color:#111318!important;
  font-weight:950!important;
  font-size:14px!important;
  line-height:36px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:none!important;
}

.file-ui-text{
  position:relative!important;
  z-index:2!important;
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#ff9b3d!important;
  font-weight:850!important;
  font-size:14px!important;
  pointer-events:none!important;
}

/* ============================================================
   10. Dropdown customizado
   Observação: o select nativo continua no HTML para envio do form,
   mas é substituído visualmente pelo JS custom-selects.js.
   ============================================================ */
.js-select-hidden{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

.custom-select{
  position:relative;
  width:100%;
}

.custom-select-trigger{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 13px;
  background:#101219;
  border:1px solid var(--line);
  border-radius:9px;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}

.custom-select-trigger:hover,
.custom-select.is-open .custom-select-trigger{
  border-color:rgba(255,134,31,.36);
  box-shadow:0 0 0 4px rgba(255,134,31,.06);
}

.custom-select-trigger:after{
  content:"";
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--orange);
  transition:.18s ease;
}

.custom-select.is-open .custom-select-trigger:after{transform:rotate(180deg)}

.custom-select-menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:9500;
  display:none;
  max-height:260px;
  overflow:auto;
  padding:7px;
  background:linear-gradient(180deg,#181a21,#101219);
  border:1px solid rgba(255,134,31,.30);
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.58);
}

.custom-select.is-open .custom-select-menu{display:grid;gap:4px}

.custom-select-option{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:9px;
  color:#dce5f3;
  font-weight:750;
  cursor:pointer;
  transition:.14s ease;
}

.custom-select-option:hover,
.custom-select-option.is-focused{
  background:rgba(255,134,31,.10);
  border-color:rgba(255,134,31,.20);
  color:#fff;
}

.custom-select-option.is-selected{
  background:rgba(255,134,31,.16);
  border-color:rgba(255,134,31,.32);
  color:var(--orange2);
}

.custom-select-option.is-disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Mantém o select nativo minimamente aceitável caso o JS não carregue. */
select.input,
select.select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:#101219;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--orange) 50%),
    linear-gradient(135deg,var(--orange) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:40px;
  color:#fff;
  color-scheme:dark;
  cursor:pointer;
}
select.input option,select.select option{background:#101219;color:#fff}

/* ============================================================
   11. Modais e popups
   ============================================================ */
.modal-locked{overflow:hidden}

.modal-backdrop,
.modal-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(5,7,12,.70);
  backdrop-filter:blur(12px);
  z-index:9000;
}

.modal-backdrop:target,
.modal-backdrop.show,
.modal-overlay.is-open{display:flex}

.modal-panel,
.modal-window{
  width:min(760px,100%);
  max-height:calc(100vh - 56px);
  overflow:auto;
  position:relative;
  background:linear-gradient(180deg,rgba(31,32,37,.98),rgba(18,19,24,.98));
  border:1px solid rgba(255,255,255,.095);
  border-radius:20px;
  box-shadow:0 32px 120px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,134,31,.04);
  padding:24px;
  animation:modalIn .18s ease-out;
}

.modal-large,.modal-lg{width:min(1120px,96vw)}
.modal-md{width:min(780px,96vw)}
.modal-xl,.modal-window.modal-xl{width:min(1240px,96vw)}

@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

.modal-header,
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.modal-header h2,
.modal-head h2{margin:0;font-size:24px;letter-spacing:-.035em}
.modal-head h2{font-size:22px}
.modal-header p,
.modal-head p{margin:7px 0 0;color:var(--muted);font-size:13px}

.modal-close{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:#15171d;
  color:#fff;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  transition:.18s ease;
}

.modal-close:hover{background:rgba(255,134,31,.12);border-color:rgba(255,134,31,.42);color:var(--orange)}
.modal-form{gap:16px}
.modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.compact-actions{justify-content:space-between;border-top:0;padding-top:0;margin-top:0}

/* ============================================================
   12. Módulo Clientes
   ============================================================ */
.client-popup-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.popup-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.065);border-radius:16px;padding:16px}
.popup-card h3{margin:0 0 13px;font-size:16px;letter-spacing:-.02em}
.info-list{display:grid;gap:10px;margin:0}
.info-list div{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:start;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.045)}
.info-list div:last-child{border-bottom:0;padding-bottom:0}
.info-list dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:900}
.info-list dd{margin:0;color:#fff;font-weight:800;word-break:break-word}
.info-list a{color:var(--orange)}
.popup-note{color:#dce5f3;margin:0;line-height:1.55}
.check-line,.checkline{display:flex;align-items:center;gap:9px;color:#cbd5e1;font-weight:850}

/* ============================================================
   13. Módulo Dispositivos
   ============================================================ */
.device-head{display:grid;grid-template-columns:1.2fr repeat(5,auto);gap:14px;align-items:center;background:#090b14;border-bottom:1px solid var(--line);padding:9px 18px}
.device-head img{height:35px}
.mini{display:flex;gap:7px;align-items:center;color:#cbd5e1;font-size:12px}
.bar{width:70px;height:5px;background:#374151;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green)}
.device-filters{grid-template-columns:2fr 1.2fr 1fr auto}
.device-grid-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.device-card{background:linear-gradient(180deg,#202229,#191b21);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 16px 46px rgba(0,0,0,.24);transition:.18s ease}
.device-card:hover{transform:translateY(-2px);border-color:rgba(255,134,31,.28)}
.device-main{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:0;color:#fff;text-align:left;cursor:pointer;padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.055)}
.device-main strong{display:block;font-size:17px;letter-spacing:-.02em}
.device-main small{display:block;color:var(--muted);margin-top:4px}
.device-status-dot{width:11px;height:11px;border-radius:50%;display:inline-flex;box-shadow:0 0 0 5px rgba(255,255,255,.045);flex:0 0 auto}
.device-status-dot.online{background:var(--green);box-shadow:0 0 0 5px rgba(53,201,143,.14)}
.device-status-dot.offline{background:var(--red);box-shadow:0 0 0 5px rgba(255,92,112,.14)}
.device-status-dot.unknown{background:var(--yellow);box-shadow:0 0 0 5px rgba(250,204,21,.12)}
.device-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
.device-meta span{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.045);border-radius:12px;padding:10px;color:#dce5f3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-meta b{display:block;color:#8290a8;font-size:11px;text-transform:uppercase;margin-bottom:4px}
.device-disk{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#cbd5e1;font-size:13px;margin-bottom:14px}
.device-actions{display:flex;justify-content:flex-end;gap:9px}
.device-detail-head{display:flex;align-items:center;gap:12px;padding:16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-bottom:16px}
.device-detail-head strong{display:block;font-size:22px}
.device-detail-head small{display:block;color:var(--muted);margin-top:4px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.detail-grid div,.detail-box{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);border-radius:14px;padding:13px;min-width:0}
.detail-grid b,.detail-grid span,.detail-box span{display:block;color:#8290a8;font-size:11px;text-transform:uppercase;margin-bottom:7px;font-weight:800;letter-spacing:.03em}
.detail-grid strong,.detail-grid span+strong{display:block;color:#fff;font-size:14px}
.detail-grid span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-box p{margin:7px 0 0;color:#dce5f3;line-height:1.5;white-space:pre-wrap}

/* ============================================================
   14. Módulo Chamados
   ============================================================ */
.chamados-kpis{margin-bottom:16px}
.chamados-panel{margin-top:16px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.chamados-filters{grid-template-columns:2fr 1fr 1fr 1.1fr auto}
.ticket-open-card{max-width:980px}
.quick-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}
.quick-ticket-wrap{align-items:flex-start}
.quick-ticket-card{width:min(980px,100%)}
.quick-ticket-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px}
.quick-ticket-head p{color:var(--muted);margin:-8px 0 0}

.ticket-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.ticket-main,.ticket-side{display:grid;gap:14px}
.ticket-description,.ticket-timeline,.reply-box,.side-card{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px}
.ticket-description h3,.ticket-timeline h3,.side-card h3{margin:0 0 12px;font-size:16px}
.ticket-description p{margin:0;color:#dce5f3;line-height:1.65}
.ticket-timeline{display:grid;gap:12px}
.timeline-item{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px}
.timeline-dot{width:10px;height:10px;border-radius:50%;margin-top:7px;background:var(--green);box-shadow:0 0 0 5px rgba(53,201,143,.12)}
.timeline-item.internal .timeline-dot{background:var(--orange);box-shadow:0 0 0 5px rgba(255,134,31,.12)}
.timeline-body{padding:12px;border-radius:14px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.045)}
.timeline-body strong{display:block}
.timeline-body small{display:block;margin-top:3px;color:var(--muted)}
.timeline-body p{margin:10px 0 0;line-height:1.55;color:#dce5f3}
.info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.info-row:last-child{border-bottom:0}
.info-row span{color:var(--muted)}
.info-row b{text-align:right;color:#fff}

.technical-snapshot{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(0,0,0,.16)}
.technical-snapshot div{min-width:0}
.technical-snapshot span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
.technical-snapshot b{display:block;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   15. Gráficos e componentes operacionais
   ============================================================ */
.kpi-note{color:var(--dim);font-size:12px;margin-top:8px}
.chart-card{min-height:260px}
.chart-bars{height:170px;display:flex;align-items:flex-end;gap:14px;padding:20px 4px 4px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(53,201,143,.055),transparent)}
.chart-bars span{flex:1;min-width:12px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--green),rgba(53,201,143,.12));position:relative}
.chart-bars span:nth-child(even){background:linear-gradient(180deg,var(--orange),rgba(255,134,31,.10))}
.chart-legend{display:flex;gap:18px;color:var(--muted);font-size:12px;margin-top:14px}
.login-card{width:min(440px,100%)}

/* ============================================================
   16. Responsividade
   ============================================================ */
@media(max-width:1200px){
  .stats,.stats2,.twocol,.threecol,.opsbar,.device-filters,.chamados-filters{grid-template-columns:1fr}
  .ops-pill{border-left:0;border-top:1px solid var(--line);padding:12px 0 0}
  .filters{grid-template-columns:1fr}
  .device-grid-list{grid-template-columns:1fr}
  .form-grid-4,.technical-snapshot,.ticket-detail-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:1100px){
  .client-popup-grid,.form-grid.two,.form-grid.three,.form-grid.four,.form-grid-3{grid-template-columns:1fr}
  .form-grid-4{grid-template-columns:repeat(2,1fr)}
  .modal-backdrop,.modal-overlay{align-items:flex-start;padding:18px}
  .modal-panel,.modal-window{max-height:calc(100vh - 36px)}
  .info-list div{grid-template-columns:1fr;gap:4px}
  .compact-actions,.modal-actions{flex-direction:column;align-items:stretch}
}

@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
  .main{padding:22px}
  .device-head{display:none}
}

@media(max-width:760px){
  .modal-backdrop,.modal-overlay{padding:14px}
  .modal-panel,.modal-window{max-height:calc(100vh - 28px);padding:16px}
  .ticket-detail-grid,.form-grid-2,.form-grid-3,.form-grid-4,.technical-snapshot,.detail-grid{grid-template-columns:1fr}
  .modal-actions{flex-direction:column-reverse;align-items:stretch}
  .modal-actions .btn{justify-content:center}
}
/* ============================================================
   HelpDesk Tickets - Etapa 11
   Central de atendimento do chamado
   ============================================================ */
.ticket-service-page .topbar{
  margin-bottom:18px;
}

.ticket-hero{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
}

.ticket-hero > div{
  min-height:92px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

.ticket-hero strong{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:17px;
  line-height:1.25;
}

.ticket-hero small{
  display:block;
  margin-top:7px;
  color:var(--muted);
  line-height:1.35;
}

.ticket-overline{
  display:block;
  color:#8290a8;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.ticket-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:16px;
  align-items:start;
}

.client-ticket-workspace{
  grid-template-columns:minmax(0,1fr);
}

.ticket-thread{
  display:grid;
  gap:14px;
}

.ticket-side-panel{
  display:grid;
  gap:16px;
  position:sticky;
  top:24px;
}

.timeline-message{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
}

.timeline-avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#111318;
  font-weight:1000;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

.tech-message .timeline-avatar{
  background:linear-gradient(135deg,var(--green),var(--green2));
}

.internal-message .timeline-avatar{
  background:linear-gradient(135deg,#5b6478,#9aa4b5);
}

.timeline-content{
  padding:14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

.client-message .timeline-content{
  border-color:rgba(255,134,31,.15);
}

.tech-message .timeline-content{
  border-color:rgba(53,201,143,.16);
}

.internal-message .timeline-content{
  border-color:rgba(154,164,181,.18);
  background:rgba(154,164,181,.055);
}

.timeline-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.timeline-meta strong{
  color:#fff;
  font-weight:950;
}

.timeline-meta span{
  color:var(--muted);
  font-size:12px;
}

.timeline-content p{
  margin:12px 0 0;
  color:#dce5f3;
  line-height:1.65;
}

.internal-pill{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  color:#111318;
  background:#aeb7c6;
  font-size:11px;
  font-weight:950;
}

.attachment-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.attachment-list a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(255,134,31,.10);
  border:1px solid rgba(255,134,31,.20);
  color:#ffb16c;
  font-weight:850;
  font-size:12px;
}

.attachment-list a:hover{
  border-color:rgba(255,134,31,.45);
  background:rgba(255,134,31,.16);
}

.reply-panel{
  margin-top:8px;
  padding:16px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.065);
  display:grid;
  gap:14px;
}

.ticket-info-card .info-row,
.ticket-side-panel .info-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ticket-info-card .info-row:last-child,
.ticket-side-panel .info-row:last-child{
  border-bottom:0;
}

.ticket-info-card .info-row span,
.ticket-side-panel .info-row span{
  color:var(--muted);
}

.ticket-info-card .info-row b,
.ticket-side-panel .info-row b{
  color:#fff;
  text-align:right;
}

.checkline{
  display:flex;
  align-items:center;
  gap:9px;
  color:#cbd5e1;
  font-weight:850;
}

.checkline input{
  width:16px;
  height:16px;
  accent-color:var(--orange);
}

@media(max-width:1280px){
  .ticket-workspace{
    grid-template-columns:1fr;
  }
  .ticket-side-panel{
    position:relative;
    top:auto;
  }
}

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

@media(max-width:640px){
  .ticket-hero,
  .timeline-message{
    grid-template-columns:1fr;
  }
  .timeline-avatar{
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .timeline-meta{
    align-items:flex-start;
    flex-direction:column;
  }
}
/* ============================================================
   HelpDesk Tickets - Etapa 12 - SLA Operacional
   Indicadores visuais de prazo, vencimento e tempo aberto.
   ============================================================ */

.sla-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}

.sla-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

.sla-ok{
  color:var(--green);
  background:rgba(53,201,143,.10);
  border-color:rgba(53,201,143,.28);
}

.sla-warning{
  color:var(--yellow);
  background:rgba(250,204,21,.10);
  border-color:rgba(250,204,21,.28);
}

.sla-expired{
  color:var(--red);
  background:rgba(255,92,112,.11);
  border-color:rgba(255,92,112,.32);
}

.sla-unknown{
  color:var(--muted);
  background:rgba(255,255,255,.045);
}

.sla-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#303541;
  margin-top:8px;
}

.sla-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--orange),var(--red));
}

.sla-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;
}

.sla-card strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.sla-card small{
  color:var(--muted);
}

.ticket-row.sla-row-expired td{
  background:rgba(255,92,112,.035);
}

.ticket-row.sla-row-warning td{
  background:rgba(250,204,21,.025);
}

.time-open{
  color:#dce5f3;
  font-weight:850;
}
/* ============================================================
   HelpDesk Tickets - Etapa 12 - SLA Operacional
   Indicadores visuais de prazo, vencimento e tempo aberto.
   ============================================================ */

.sla-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}

.sla-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

.sla-ok{
  color:var(--green);
  background:rgba(53,201,143,.10);
  border-color:rgba(53,201,143,.28);
}

.sla-warning{
  color:var(--yellow);
  background:rgba(250,204,21,.10);
  border-color:rgba(250,204,21,.28);
}

.sla-expired{
  color:var(--red);
  background:rgba(255,92,112,.11);
  border-color:rgba(255,92,112,.32);
}

.sla-unknown{
  color:var(--muted);
  background:rgba(255,255,255,.045);
}

.sla-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  overflow:hidden;
  background:#303541;
  margin-top:8px;
}

.sla-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--orange),var(--red));
}

.sla-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;
}

.sla-card strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.sla-card small{
  color:var(--muted);
}

.ticket-row.sla-row-expired td{
  background:rgba(255,92,112,.035);
}

.ticket-row.sla-row-warning td{
  background:rgba(250,204,21,.025);
}

.time-open{
  color:#dce5f3;
  font-weight:850;
}

/* Integração adicional do SLA nas telas de atendimento e listagem */
.ticket-hero.ticket-hero-sla{
  grid-template-columns:repeat(5,1fr);
}

.sla-time{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
}

.table .sla-pill{
  vertical-align:middle;
}

@media(max-width:1400px){
  .ticket-hero.ticket-hero-sla{
    grid-template-columns:repeat(3,1fr);
  }
}

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

/* ============================================================
   HelpDesk Tickets - Etapa 14
   Atendimento refinado: chat, anexos, SLA visual e ações rápidas.
   Cole este conteúdo no final de assets/css/style.css.
   ============================================================ */

.ticket-hero.ticket-hero-sla{
  gap:14px;
}

.ticket-hero.ticket-hero-sla > div{
  transition:.18s ease;
}

.ticket-hero.ticket-hero-sla > div:not(.sla-card):hover{
  border-color:rgba(255,134,31,.28);
  background:rgba(255,134,31,.035);
  transform:translateY(-1px);
}

.ticket-workspace{
  align-items:start;
}

.ticket-thread{
  overflow:hidden;
}

.ticket-thread .section-title{
  margin-bottom:22px;
}

.timeline-message{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:14px 0;
  border:0!important;
  background:transparent!important;
}

.timeline-message .timeline-avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-weight:1000;
  color:#101318;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}

.timeline-message.tech-message{
  flex-direction:row-reverse;
}

.timeline-message.tech-message .timeline-avatar{
  background:linear-gradient(135deg,var(--green),var(--green2));
}

.timeline-message.internal-message .timeline-avatar{
  background:linear-gradient(135deg,#94a3b8,#cbd5e1);
}

.timeline-content{
  width:min(820px,calc(100% - 60px));
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
  box-shadow:0 14px 40px rgba(0,0,0,.20);
  position:relative;
}

.client-message .timeline-content{
  border-color:rgba(255,134,31,.20);
}

.tech-message .timeline-content{
  border-color:rgba(53,201,143,.20);
  background:linear-gradient(180deg,rgba(53,201,143,.075),rgba(255,255,255,.025));
}

.internal-message .timeline-content{
  border-style:dashed;
  border-color:rgba(148,163,184,.32);
  background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(255,255,255,.025));
}

.timeline-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.timeline-meta strong{
  color:#fff;
  display:flex;
  gap:8px;
  align-items:center;
}

.timeline-meta span{
  color:#9fb0c8;
  font-size:12px;
  white-space:nowrap;
}

.timeline-content p{
  margin:0;
  line-height:1.65;
  color:#e5edf8;
}

.internal-pill{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  color:#111318;
  background:#cbd5e1;
  font-size:11px;
  font-weight:950;
}

.attachment-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.attachment-chip{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 10px;
  border-radius:10px;
  color:#ffb169!important;
  border:1px solid rgba(255,134,31,.30);
  background:rgba(255,134,31,.10);
  font-weight:900;
  max-width:100%;
}

.attachment-chip:hover{
  background:rgba(255,134,31,.16);
  transform:translateY(-1px);
}

.attachment-chip .att-icon{
  font-size:16px;
  line-height:1;
}

.attachment-chip small{
  color:#9aa4b5;
  font-weight:800;
  margin-left:4px;
}

.sla-card .sla-bar,
.sla-bar{
  height:8px;
  border-radius:999px;
  background:#303541;
  overflow:hidden;
  margin-top:10px;
  position:relative;
}

.sla-card .sla-bar i,
.sla-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--green2));
  transition:width .25s ease;
}

.sla-bar-warning i{
  background:linear-gradient(90deg,var(--yellow),var(--orange));
}

.sla-bar-expired i{
  background:linear-gradient(90deg,var(--red),#ff9aaa);
}

.sla-bar-resolved i{
  background:linear-gradient(90deg,var(--green),var(--green2));
}

.quick-actions-card{
  margin-bottom:14px;
}

.quick-actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.quick-actions-grid form{
  margin:0;
}

.quick-action-btn{
  width:100%;
  min-height:42px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  cursor:pointer;
  color:#fff;
  font-weight:950;
  background:rgba(255,255,255,.045);
  transition:.18s ease;
}

.quick-action-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

.quick-action-btn.green{background:rgba(53,201,143,.14);border-color:rgba(53,201,143,.28);color:#8df3c8}
.quick-action-btn.yellow{background:rgba(250,204,21,.13);border-color:rgba(250,204,21,.28);color:#fde68a}
.quick-action-btn.blue{background:rgba(91,140,255,.13);border-color:rgba(91,140,255,.28);color:#bcd0ff}
.quick-action-btn.orange{background:rgba(255,134,31,.13);border-color:rgba(255,134,31,.30);color:#ffb169}

.reply-panel{
  margin-top:22px;
  padding:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(0,0,0,.14);
}

@media(max-width:900px){
  .timeline-message,
  .timeline-message.tech-message{
    flex-direction:row;
  }
  .timeline-content{
    width:calc(100% - 54px);
  }
  .timeline-meta{
    flex-direction:column;
    align-items:flex-start;
  }
  .quick-actions-grid{
    grid-template-columns:1fr;
  }
}
/* ============================================================
   HelpDesk Tickets - Etapa 16A
   Agentes / Inventário Automático
   ============================================================ */

.agent-table td{
  vertical-align:top;
}

.mono-token{
  display:inline-flex;
  padding:6px 9px;
  border-radius:8px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  color:#ff9b3d;
  font-family:Consolas,Monaco,monospace;
  font-weight:900;
  font-size:12px;
}

.inline-form{
  display:flex;
  align-items:center;
  gap:6px;
}

.interval-input{
  width:76px;
  padding:9px 10px;
}

.mini-btn{
  height:36px;
  border:0;
  border-radius:8px;
  padding:0 10px;
  cursor:pointer;
  font-weight:950;
  color:#111318;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
}

.command-box{
  min-height:78px;
  resize:vertical;
  font-family:Consolas,Monaco,monospace;
  font-size:12px;
  color:#dce5f3;
}

.action-stack{
  display:grid;
  gap:8px;
}

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

.agent-help-grid div{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px;
}

.agent-help-grid strong{
  display:block;
  color:#fff;
  margin-bottom:8px;
}

.agent-help-grid p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

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

/* Tooltip global SGA: padrão visual dos botões de ação. */
.hd-action-tooltip{
  position:fixed;
  left:0;
  top:0;
  z-index:20000;
  box-sizing:border-box;
  width:max-content;
  max-width:min(280px,calc(100vw - 24px));
  padding:8px 11px;
  border-radius:10px;
  border:1px solid rgba(251,146,60,.78);
  background:rgba(15,23,42,.98);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  line-height:1.35;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-100%) translateY(-7px);
  transition:opacity .045s ease,visibility .045s ease,transform .045s ease;
}

.hd-action-tooltip.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-100%) translateY(-10px);
}

.hd-action-tooltip.is-below{
  transform:translate(-50%,7px);
}

.hd-action-tooltip.is-below.show{
  transform:translate(-50%,10px);
}