/* =====================================================
   osTicket v1.18.2 - Modern Client Theme
   ===================================================== */

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

:root{
    --primary:#2563eb;
    --primary-hover:#1d4ed8;
    --bg:#f3f6fb;
    --card:#ffffff;
    --text:#334155;
    --border:#e2e8f0;
    --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Base */

html,
body{
    background:var(--bg);
    font-family:'Inter',sans-serif;
    color:var(--text);
    font-size:14px;
}

/* Layout */

#container{
    width:95%;
    max-width:1400px;
    margin:20px auto;
    background:transparent;
    box-shadow:none;
}

/* Header */

#header{
    background:#0f172a;
    min-height:80px;
    height:auto;
    padding:20px 30px;
    border-radius:16px 16px 0 0;
    box-sizing:border-box;
}

#header a{
    color:#ffffff;
    text-decoration:none;
}

#header a:hover{
    border-bottom:none;
    opacity:.9;
}

#header p{
    margin:5px 0;
}

/* Logo */

#logo img{
    max-height:60px;
    width:auto;
}

/* Navegação */

/* MENU */

/* MENU */

#nav{
    margin:0;
    padding:10px 20px;
    height:auto;
    background:#fff;
    border:none;
    box-shadow:none;
}

#nav li{
    display:inline-block;
}

#nav li a{
    display:inline-block;
    line-height:20px;
    padding:10px 16px 10px 36px;
    border-radius:10px;
    font-weight:600;
    color:#475569;

    background-position:10px center;
    background-repeat:no-repeat;
}

#nav li a:hover{
    background-color:#eff6ff;
    color:#2563eb;
    border-bottom:none;
}

#nav li a.active{
    background-color:#2563eb;
    color:white;
}
#nav li a.home,
#nav li a.kb,
#nav li a.new,
#nav li a.status,
#nav li a.tickets{
    background-size:16px;
}

/* Conteúdo */

#content{
    background:#ffffff;
    margin:0;
    padding:30px;
    min-height:600px;
    border-radius:0 0 16px 16px;
    box-shadow:var(--shadow);
}

/* Títulos */

h1{
    color:#0f172a;
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;

}

h2,
h3{
    color:#0f172a;
}

/* Links */

a{
    color:var(--primary);
}

a:hover{
    border-bottom:none;
}

/* Formulários */

input,
select,
textarea{
    width:auto;
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    font-family:'Inter',sans-serif;
    box-sizing:border-box;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

/* Botões */

.button,
.btn,
input[type=submit],
input[type=button],
input[type=reset]{
    background:var(--primary);
    color:white;
    border:none;
    border-radius:10px;
    padding:10px 18px;
    font-weight:600;
    cursor:pointer;
}

.button:hover,
.btn:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover{
    background:var(--primary-hover);
}

/* Tabelas */

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
}

table th{
    background:#f8fafc;
    color:#475569;
    font-weight:600;
    padding:14px;
}

table td{
    padding:14px;
    border-bottom:1px solid #eef2f7;
}

table tr:hover{
    background:#f8fafc;
}

/* Alertas */

#msg_notice,
.notice_bar{
    border-radius:10px;
    padding:12px 15px;
}

#msg_warning,
.warning_bar{
    border-radius:10px;
    padding:12px 15px;
}

#msg_error,
.error_bar{
    border-radius:10px;
    padding:12px 15px;
}

/* Paginação */

#pagination li a{
    border-radius:8px;
    padding:8px 12px;
}

#pagination .active{
    background:var(--primary);
    color:white;
    border-radius:8px;
}

/* Caixas */

.box,
.thread-entry,
.ticket-info,
.form-table{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:15px;
}

/* Responsivo */

@media (max-width: 768px){

    #container{
        width:100%;
        margin:0;
    }

    #header{
        border-radius:0;
        padding:15px;
    }

    #content{
        border-radius:0;
        padding:15px;
    }

    #nav{
        padding:10px;
    }

    #nav li{
        width:100%;
    }

    #nav li a{
        display:block;
    }

    table{
        display:block;
        overflow-x:auto;
    }
}
/* =======================================
   LOGIN MODERNO OSTICKET
======================================= */

.login-wrapper{
    max-width:620px;
    margin:20px auto;
}

.login-header{
    text-align:center;
    margin-bottom:20px;
}

.login-header h1{
    font-size:38px;
    font-weight:700;
    color:#0f172a;
    margin:0 0 8px 0;
}

.login-header p{
    color:#64748b;
    font-size:15px;
    margin:0;
}

/* Caixa principal */

#clientLogin{
    border:1px solid #d8d8d8;
    border-radius:6px;
    padding:20px;
    background:#fff;
}

/* Campos */

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:6px;
    font-size:15px;
    font-weight:600;
    color:#1e293b;
}

/* Inputs */

.form-group input,
#clientLogin input[type=text],
#clientLogin input[type=password],
#clientLogin input[type=email]{

    width:92%;

    height:44px;

    border:1px solid #cbd5e1;

    border-radius:6px;

    padding:0 14px;

    font-size:15px;

    background:#ffffff !important;

    color:#111827;

    box-sizing:border-box;

    box-shadow:none !important;
}

/* Autofill Chrome */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

    -webkit-text-fill-color:#111827 !important;

    -webkit-box-shadow:
        0 0 0px 1000px #ffffff inset !important;

    transition:background-color 5000s ease-in-out 0s;
}

/* Foco */

.form-group input:focus,
#clientLogin input:focus{

    border-color:#2563eb;

    outline:none;

    background:#fff !important;

    box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* Botão */

.login-btn,
#clientLogin button,
#clientLogin input[type=submit]{

    width:92%;

    height:46px;

    margin-top:8px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.login-btn:hover,
#clientLogin button:hover,
#clientLogin input[type=submit]:hover{

    background:#1d4ed8;
}

/* Links */

.forgot-link{
    display:block;
    text-align:center;
    margin-top:15px;
    font-size:14px;
}

.register-link{
    text-align:center;
    margin-top:15px;
    font-size:14px;
}

/* Mensagem de erro */

.login-error{
    background:#fef2f2;
    border:1px solid #fecaca;
    color:#b91c1c;
    padding:10px;
    border-radius:6px;
    margin-bottom:15px;
}

/* Remove estilos antigos */

.login-box{
    background:none !important;
    border:none !important;
    padding:0 !important;
    box-shadow:none !important;
}

/* Cadeado do osTicket */

.login-box img,
.login-box .login-image{
    max-width:64px;
}

/* Mobile */

@media(max-width:768px){

    .login-wrapper{
        width:95%;
    }

    .form-group input,
    .login-btn,
    #clientLogin input[type=submit]{
        width:100%;
    }
}
.sidebar section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.sidebar section .header {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 15px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
}

.sidebar section div a {
    display: block;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: .2s;
    color: #2563eb;
}

.sidebar section div a:hover {
    background: #eff6ff;
    text-decoration: none;
}
/* ==========================
   Sidebar moderna
========================== */

.sidebar section {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
}

.sidebar section .header {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.faq-item {
    margin-bottom: 8px;
}

.faq-item a {
    display: block;
    padding: 10px;
    border-radius: 8px;
    color: #2563eb;
    transition: all .2s;
}

.faq-item a:hover {
    background: #eff6ff;
    text-decoration: none;
}

/* Botão principal */

.front-page-button .blue.button {
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
}
#content > div:last-child > h1 {
    display: none !important;
}
.sidebar {
    width: 320px !important;
}

.sidebar .content {
    background: transparent;
    border: none;
    padding: 0;
}

.knowledge-card {
    background: #fff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
#landing_page > div:last-child > h1 {
    display: none;
}
/* Oculta o link Entrar do topo */

#header .pull-right a[href*="login.php"]{
    display:none !important;
}
#nav li a.status {
    display: none !important;
}
.search-form {
    position: relative;
    top: 260px;
	
}
/* Campo de pesquisa */
.search-form input.search {
    height: 42px;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 14px;
}
.thread-body {
    margin-top: 0px;
}