/* ============================================================
   Referência TI — identidade visual do HelpDesk
   Mesmos tokens do site www.referenciait.com.br.
   Arquivo carregado por último (libraries_user.html): só sobrescreve,
   não altera o tema do Mad Builder. Para reverter, remova a linha
   que inclui este arquivo em app/templates/theme3/libraries_user.html.
   ============================================================ */

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

:root{
  --rt-ink:        #16283F;
  --rt-ink-2:      #1C3049;
  --rt-ink-3:      #233A56;
  --rt-surface:    #FFFFFF;
  --rt-surface-2:  #F4F7FA;
  --rt-line:       #E1E8EF;
  --rt-line-dark:  rgba(255,255,255,.13);

  --rt-cyan:       #00B2DD;
  --rt-cyan-br:    #45CFF2;
  --rt-cyan-deep:  #007FA0;
  --rt-cyan-hover: #1497C6;

  --rt-text:       #101826;
  --rt-text-2:     #4E5D70;
  --rt-text-inv-2: #B2C4D4;

  --rt-radius:     14px;
  --rt-radius-sm:  9px;
  --rt-shadow:     0 1px 2px rgba(16,24,38,.05), 0 12px 32px -12px rgba(16,24,38,.14);

  --rt-ff: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rt-logo: url('../../../images/referencia/logo-simbolo.png');
}

/* ---------- Base (todas as telas) ---------- */
body.builder-template-login,
body#builder-layout{
  font-family:var(--rt-ff) !important;
  -webkit-font-smoothing:antialiased;
}
body#builder-layout .form-control,
body#builder-layout .btn,
body#builder-layout h1, body#builder-layout h2, body#builder-layout h3,
body#builder-layout h4, body#builder-layout h5,
body#builder-layout .panel-title, body#builder-layout .card-title{
  font-family:var(--rt-ff);
}

/* ============================================================
   LOGIN
   ============================================================ */
body.builder-template-login{
  background:var(--rt-ink) !important;
  color:#fff;
  min-height:100vh;
  position:relative;
  isolation:isolate;
}
/* grade técnica do hero do site */
body.builder-template-login::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 8%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 8%,transparent 72%);
}
/* brilho ciano */
body.builder-template-login::after{
  content:"";position:fixed;z-index:-2;pointer-events:none;
  width:900px;height:900px;left:50%;top:-520px;transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,178,221,.30),rgba(0,178,221,0) 64%);
  filter:blur(14px);
}

.builder-template-login #login-wrapper{
  display:flex;flex-direction:column;
  margin-top:clamp(40px,11vh,110px) !important;
  max-width:420px !important;
}

/* marca: símbolo + Referência<em>TI</em> */
.builder-template-login #login-wrapper h1{
  order:1;
  margin:0 !important;
  padding-top:66px;
  background:var(--rt-logo) no-repeat top center / auto 54px;
  font-size:0 !important;
  line-height:1;
  text-align:center;
}
.builder-template-login #login-wrapper h1::before,
.builder-template-login #login-wrapper h1::after{
  font-family:var(--rt-ff);
  font-size:26px;font-weight:700;letter-spacing:-.02em;
}
.builder-template-login #login-wrapper h1::before{content:"Referência";color:#fff}
.builder-template-login #login-wrapper h1::after{content:"TI";color:var(--rt-cyan-br)}

/* subtítulo, no lugar do "CONSULTORIA" do site */
.builder-template-login .login-medium-logo{
  order:2;
  display:block !important;
  background:none !important;
  width:auto !important;height:auto !important;
  margin:9px 0 28px !important;
  text-align:center;
}
.builder-template-login .login-medium-logo::after{
  content:"CENTRAL DE CHAMADOS";
  font-size:11px;font-weight:600;letter-spacing:.28em;
  color:var(--rt-text-inv-2);
}

/* cartão */
.builder-template-login #login-wrapper .card,
.builder-template-login #login-wrapper .panel{
  order:3;
  background:rgba(34,56,84,.72) !important;
  border:1px solid var(--rt-line-dark) !important;
  border-radius:var(--rt-radius) !important;
  box-shadow:0 30px 70px -30px rgba(3,10,20,.55) !important;
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  overflow:hidden;
  color:#fff;
}
.builder-template-login #login-wrapper .card-header,
.builder-template-login #login-wrapper .panel-heading{
  background:transparent !important;
  border-top:0 !important;
  border-bottom:1px solid var(--rt-line-dark) !important;
  padding:20px 26px 16px !important;
}
.builder-template-login #login-wrapper .panel-title,
.builder-template-login #login-wrapper .card-title{
  font-size:0 !important;text-align:left !important;
}
.builder-template-login #login-wrapper .panel-title::before,
.builder-template-login #login-wrapper .card-title::before{
  content:"Acesse sua conta";
  font-size:17px;font-weight:600;letter-spacing:-.01em;color:#fff;
}
.builder-template-login #login-wrapper .card-body,
.builder-template-login #login-wrapper .panel-body{
  background:transparent !important;
  padding:14px 16px 4px !important;
}

/* campos */
.builder-template-login .login-avatar{
  display:flex !important;align-items:center;justify-content:center;
  width:40px;height:42px;
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--rt-line-dark) !important;
  border-right:0 !important;
  border-radius:var(--rt-radius-sm) 0 0 var(--rt-radius-sm) !important;
  color:var(--rt-text-inv-2) !important;
}
.builder-template-login .fb-inline-field-container:has(.login-avatar){padding-right:0 !important}
.builder-template-login #login-wrapper .form-control{
  height:42px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid var(--rt-line-dark) !important;
  border-radius:0 var(--rt-radius-sm) var(--rt-radius-sm) 0 !important;
  color:#fff !important;
  font-size:15px !important;
  box-shadow:none !important;
  transition:border-color .16s ease, background .16s ease;
}
.builder-template-login #login-wrapper .form-control::placeholder{color:rgba(159,179,198,.7)}
.builder-template-login #login-wrapper .form-control:focus{
  border-color:var(--rt-cyan) !important;
  background:rgba(0,178,221,.06) !important;
}
/* autopreenchimento do navegador (fundo azul claro) */
.builder-template-login #login-wrapper .form-control:-webkit-autofill,
.builder-template-login #login-wrapper .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 60px #243B57 inset !important;
  caret-color:#fff;
}
.builder-template-login .tpassword button{
  color:var(--rt-text-inv-2) !important;
  background:transparent !important;
}

/* botão Entrar */
.builder-template-login #login-wrapper .card-footer,
.builder-template-login #login-wrapper .panel-footer{
  background:transparent !important;
  border-top:0 !important;
  padding:6px 26px 26px !important;
}
.builder-template-login #login-wrapper .card-footer .btn,
.builder-template-login #login-wrapper .panel-footer .btn{
  width:100%;
  height:46px;
  background:var(--rt-cyan) !important;
  border:0 !important;
  border-radius:var(--rt-radius-sm) !important;
  color:#fff !important;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 8px 22px -10px rgba(0,178,221,.9) !important;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.builder-template-login #login-wrapper .card-footer .btn:hover,
.builder-template-login #login-wrapper .panel-footer .btn:hover{
  background:var(--rt-cyan-hover) !important;
  transform:translateY(-1px);
  box-shadow:0 14px 30px -12px rgba(0,178,221,1) !important;
}

/* link "Redefinir senha" */
body.builder-template-login > div[style*="text-align:center"]{margin-top:22px}
body.builder-template-login > div[style*="text-align:center"] a{
  color:var(--rt-text-inv-2) !important;font-size:14px;
  transition:color .16s ease;
}
body.builder-template-login > div[style*="text-align:center"] a:hover{color:var(--rt-cyan-br) !important}
body.builder-template-login > div[style*="text-align:center"] .fa{color:var(--rt-cyan-br) !important}

/* ============================================================
   SISTEMA (após o login) — AdminLTE (desktop e mobile)
   ============================================================ */

/* ---------- Cabeçalho ---------- */
#builder-layout .main-header .logo,
#builder-layout .main-header .logo:hover{
  background:var(--rt-ink) !important;
  border-bottom:1px solid var(--rt-line-dark);
  border-right:1px solid var(--rt-line-dark);
}
#builder-layout .main-header .navbar{
  background:var(--rt-ink) !important;
  border-bottom:1px solid var(--rt-line-dark);
}
#builder-layout .main-header .navbar .nav>li>a,
#builder-layout .main-header .navbar .sidebar-toggle{
  color:var(--rt-text-inv-2) !important;
}
#builder-layout .main-header .navbar .nav>li>a:hover,
#builder-layout .main-header .navbar .nav>.active>a,
#builder-layout .main-header .navbar .nav .open>a,
#builder-layout .main-header .navbar .sidebar-toggle:hover{
  color:#fff !important;
  background:rgba(255,255,255,.05) !important;
}
#builder-layout .main-header .navbar .label{border-radius:99px}

/* marca no canto: símbolo + Referência<em>TI</em> / HELPDESK */
.main-header .logo .logo-lg{
  display:grid !important;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:10px;
  align-content:center;
  justify-content:start;
  height:100%;
  text-align:left;
}
.main-header .logo .logo-lg::before{
  content:"";grid-row:1 / span 2;grid-column:1;
  width:26px;height:32px;align-self:center;
  background:var(--rt-logo) no-repeat center / contain;
}
.main-header .logo .logo-lg b{
  grid-row:1;grid-column:2;
  font-size:0;line-height:1;align-self:end;
}
.main-header .logo .logo-lg b::before,
.main-header .logo .logo-lg b::after{
  font-size:16px;font-weight:700;letter-spacing:-.02em;
}
.main-header .logo .logo-lg b::before{content:"Referência";color:#fff}
.main-header .logo .logo-lg b::after{content:"TI";color:var(--rt-cyan-br)}
.main-header .logo .logo-lg::after{
  content:"HELPDESK";grid-row:2;grid-column:2;
  margin-top:4px;line-height:1;align-self:start;
  font-size:9.5px;font-weight:600;letter-spacing:.28em;color:var(--rt-text-inv-2);
}
/* menu recolhido: só o símbolo */
.main-header .logo .logo-mini b{font-size:0}
.main-header .logo .logo-mini{
  background:var(--rt-logo) no-repeat center / auto 30px;
  height:100%;
}

/* ---------- Menu lateral ---------- */
#builder-layout .wrapper,
#builder-layout .main-sidebar,
#builder-layout .left-side{
  background:var(--rt-ink-2) !important;
}
#builder-layout .main-sidebar{border-right:1px solid var(--rt-line-dark)}
#builder-layout .user-panel>.info,
#builder-layout .user-panel>.info>a,
#builder-layout .user-panel>.info>p{color:#fff !important;font-weight:600}
#builder-layout .user-panel>.info span{color:var(--rt-text-inv-2)}
#builder-layout .user-panel{border-bottom:1px solid var(--rt-line-dark);padding-bottom:14px}

#builder-layout .sidebar-menu>li.header{
  background:transparent !important;
  color:rgba(159,179,198,.6) !important;
  font-size:11px;font-weight:600;letter-spacing:.18em;
}
#builder-layout .sidebar a,
#builder-layout .sidebar-menu>li>a{
  color:var(--rt-text-inv-2) !important;
  border-left:3px solid transparent !important;
  font-weight:500;
  transition:color .16s ease, background .16s ease;
}
#builder-layout .sidebar-menu>li:hover>a{
  color:#fff !important;
  background:rgba(255,255,255,.06) !important;
}
#builder-layout .sidebar-menu>li.active>a,
#builder-layout .sidebar-menu>li.menu-open>a{
  color:#fff !important;
  background:rgba(0,178,221,.10) !important;
  border-left-color:var(--rt-cyan) !important;
}
#builder-layout .sidebar-menu>li>.treeview-menu,
#builder-layout .sidebar-menu .treeview-menu{
  background:rgba(0,0,0,.22) !important;
}
#builder-layout .sidebar-menu .treeview-menu>li>a{color:var(--rt-text-inv-2) !important}
#builder-layout .sidebar-menu .treeview-menu>li.active>a,
#builder-layout .sidebar-menu .treeview-menu>li>a:hover{color:var(--rt-cyan-br) !important}

/* ---------- Área de conteúdo ---------- */
#builder-layout .content-wrapper,
#builder-layout .right-side{background:var(--rt-surface-2) !important}
body#builder-layout{color:var(--rt-text)}
body#builder-layout a{color:var(--rt-cyan-deep)}
body#builder-layout a:hover{color:var(--rt-cyan)}
body#builder-layout .main-sidebar a,
body#builder-layout .main-header a{color:inherit}

/* cartões e painéis */
body#builder-layout .content .card,
body#builder-layout .content .panel{
  border:1px solid var(--rt-line) !important;
  border-radius:var(--rt-radius) !important;
  box-shadow:var(--rt-shadow) !important;
  overflow:hidden;
}
body#builder-layout .content .card-header,
body#builder-layout .content .panel-heading{
  background:var(--rt-surface) !important;
  border-bottom:1px solid var(--rt-line) !important;
}
body#builder-layout .content .panel-title,
body#builder-layout .content .card-title{
  font-weight:600;letter-spacing:-.01em;color:var(--rt-text);
}
body#builder-layout .content .card-footer,
body#builder-layout .content .panel-footer{
  background:var(--rt-surface-2) !important;
  border-top:1px solid var(--rt-line) !important;
}

/* campos */
body#builder-layout .form-control{
  border-color:var(--rt-line);
  border-radius:var(--rt-radius-sm);
  box-shadow:none;
}
body#builder-layout .form-control:focus{
  border-color:var(--rt-cyan);
  box-shadow:0 0 0 3px rgba(0,178,221,.15);
}

/* botões */
body#builder-layout .btn{
  border-radius:var(--rt-radius-sm);
  font-weight:500;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body#builder-layout .btn-primary,
body#builder-layout .btn-info{
  background:var(--rt-cyan) !important;
  border-color:var(--rt-cyan) !important;
  color:#fff !important;
}
body#builder-layout .btn-primary:hover,
body#builder-layout .btn-info:hover{
  background:var(--rt-cyan-hover) !important;
  border-color:var(--rt-cyan-hover) !important;
}
body#builder-layout .btn-default{
  background:var(--rt-surface);
  border-color:var(--rt-line);
  color:var(--rt-text);
}
body#builder-layout .btn-default:hover{
  border-color:var(--rt-cyan);
  color:var(--rt-cyan-deep);
}

/* grades de dados */
body#builder-layout .table>thead>tr>th,
body#builder-layout .tdatagrid_table thead th{
  color:var(--rt-text-2);
  font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--rt-line) !important;
}
body#builder-layout .tdatagrid_table tbody tr:hover td{background:rgba(0,178,221,.04) !important}

/* abas */
body#builder-layout .nav-tabs>li.active>a,
body#builder-layout .nav-tabs .nav-link.active{
  border-top:2px solid var(--rt-cyan);
  color:var(--rt-text);
}

/* paginação */
body#builder-layout .pagination>.active>a,
body#builder-layout .pagination>.active>span,
body#builder-layout .page-item.active .page-link{
  background:var(--rt-cyan) !important;
  border-color:var(--rt-cyan) !important;
  color:#fff !important;
}

/* rodapé */
#builder-layout .main-footer{
  background:var(--rt-surface);
  border-top:1px solid var(--rt-line);
  color:var(--rt-text-2);
  font-size:13px;
}