/* =====================================================
   AutoProcess Orchestrator - Global Style
   ===================================================== */


/* LOGIN MODAL */

.modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.6);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;
}

.login-modal-content{
    position:relative;

    background:#ffffff;

    width:400px;
    max-width:90%;

    padding:40px;

    border-radius:16px;

    animation:fadeIn 0.25s ease;
}

.modal-close{
    position:absolute;

    top:12px;
    right:15px;

    border:none;
    background:none;

    font-size:28px;
    cursor:pointer;

    color:#64748b;
}

.modal-close:hover{
    color:#0f172a;
}


/* =====================================================
   REGISTER MODAL
   ===================================================== */

.register-modal-content{
    position:relative;

    width:500px;
    max-width:92%;

    background:white;

    padding:40px;

    border-radius:18px;

    animation:fadeIn 0.25s ease;
}

.register-title{
    font-size:32px;
    font-weight:700;

    color:#0f172a;

    margin-bottom:10px;
}

.register-subtitle{
    color:#64748b;
    margin-bottom:30px;
}

.register-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-size:14px;
    font-weight:600;

    color:#334155;

    margin-bottom:8px;
}

.form-group input,
.form-group select{
    padding:14px;

    border-radius:10px;

    border:1px solid #cbd5e1;

    font-size:14px;

    transition:0.2s;
}

.form-group input:focus,
.form-group select:focus{
    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,0.15);
}

.input-help{
    margin-top:8px;

    font-size:12px;

    color:#64748b;

    line-height:1.4;
}

.register-submit-btn{
    margin-top:10px;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:0.2s;
}

.register-submit-btn:hover{
    background:#1d4ed8;
}




/* =====================================================
   HEADER
   ===================================================== */

header{
    width:100%;
    background:#07101f;
    border-bottom:1px solid rgba(255,255,255,0.08);
    flex-shrink:0;
}

.navbar-container{
    width:100%;

    height:90px;

    padding:0 30px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* LOGO NAVBAR */

.navbar-logo{
    height:100%;

    display:flex;
    align-items:center;
}

.navbar-logo img{
    height:180px; /* Tamanho da imagem no navbar */
    width:auto;

    display:block;
    object-fit:contain;

    position:relative;
    top:4px;
}

/* MENU */

.menu{
    display:flex;
    align-items:center;
    gap:14px;
}

.menu a{
    font-size:15px;
    color:#d9d9d9;
    transition:0.3s;
    text-decoration:none;
}

.menu a:hover{
    color:#3b82f6;
}

/* =====================================================
   HERO SECTION
   ===================================================== */

.hero{
    flex:1;

    display:flex;
    align-items:center;

    padding:80px;

    background:linear-gradient(
        90deg,
        #081122 0%,
        #09142a 50%,
        #07101f 100%
    );
}

.hero-content{
    max-width:900px;
}

.hero h1{
    color:white;

    font-size:72px;
    line-height:1.05;

    font-weight:800;

    margin-bottom:30px;
}

.hero p{
    color:#b7c0d1;

    font-size:24px;

    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    gap:18px;
}

/* ================= RESET ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}
/* menu desabilitado */

.menu-disabled{
    opacity:0.45;
    cursor:not-allowed;
}

.menu-disabled span{
    display:flex;
    align-items:center;
    gap:8px;
}
/* =====================================================
   LOGIN PAGE
   ===================================================== */

.login-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1f2937, #111827);
}



.login-logo {
    width:95%;
    max-width: 400px;
    height: auto;
    margin-bottom: 25px;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-form input {
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    transition: 0.2s ease-in-out;
}

.login-form input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.login-form button {
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.login-form button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

#error {
    color: red;
    margin-top: 10px;
    font-size: 13px;
}

/* =====================================================
   DASHBOARD LAYOUT
   ===================================================== */

body {
    background-color: #f3f4f6;
}

/* Sidebar */
.sidebar {
    width: 240px;
    background: #1e293b;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding-top: 20px;
}

/* Logo da Sidebar */

.logo{
    text-align:center;
    margin-bottom:30px;
}

.logo img{
    width:220px;
    height:auto;
    display:block;
    margin:0 auto;
}

/* Logo da Sidebar */
.sidebar-logo {
    text-align: center;
    margin-bottom: 30px;
}

.sidebar-logo img {
    width: 250px;
    height: auto;
}

/* Menu */
.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin: 5px 0;
}

.sidebar ul li a {
    display: block;
    padding: 12px 20px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.sidebar ul li a i {
    margin-right: 8px;
}

.sidebar ul li a:hover {
    background: #334155;
    color: white;
}

/* Área principal */
.main {
    margin-left: 240px;
    min-height: 100vh;
}

/* Topbar */
.topbar {
    height: 60px;
    background: #0f172a;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 25px;
    font-weight: 500;
}

/* Conteúdo */
.content {
    padding: 30px;
}

/* =====================================================
   ORCHESTRATOR PAGE
   ===================================================== */

.tabs {
    margin-bottom: 20px;
}

.tabs button {
    padding: 8px 14px;
    border: none;
    background: #e2e8f0;
    margin-right: 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.tabs button:hover {
    background: #cbd5e1;
}

.tab-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Tabelas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: white;
}

table th {
    background: #1e293b;
    color: white;
    padding: 10px;
    text-align: left;
}

table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

table tr:hover {
    background: #f1f5f9;
}

table button {
    padding: 6px 10px;
    background: #2563eb;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}

table button:hover {
    background: #1d4ed8;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =====================================================
   DASHBOARD CARDS
   ===================================================== */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}

.card h3 {
    font-size: 15px;
    color: #64748b;
    margin-bottom: 8px;
}

.card p {
    font-size: 28px;
    font-weight: bold;
    color: #0f172a;
}
/* =====================================================
   NOTIFICATIONS
   ===================================================== */

.notification {
    position: relative; /* necessário para posicionar o botão */
    padding: 15px 40px 15px 15px; /* espaço extra para o botão */
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    animation: fadeIn 0.3s ease-in-out;
}

/* Botão fechar fixo no canto superior direito */
.close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    padding: 0;
}

/* Pequeno efeito ao passar o mouse */
.close-btn:hover {
    opacity: 0.7;
}
.notification.informativo {
    background: #dcfce7;
    border-left: 4px solid #16a34a;
    color: #166534;
}

.notification.alerta {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

.notification.erro {
    background: #fee2e2;
    border-left: 4px solid #dc2626;
    color: #7f1d1d;
}

/* style para settings */

.card form {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.card form label {
    margin-top: 10px;
    font-size: 14px;
    color: #334155;
}

.card form input {
    padding: 10px;
    margin-top: 5px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
}

.card form button {
    margin-top: 15px;
    padding: 10px;
    border: none;
    background: #2563eb;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

.card form button:hover {
    background: #1d4ed8;
}

/* =====================================================
   SETTINGS PAGE IMPROVEMENT
   ===================================================== */

.settings-container {
    max-width: 750px;
}

.settings-card {
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.form-group label {
    font-size: 14px;
    margin-bottom: 5px;
    color: #334155;
    font-weight: 500;
}

.form-group input {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    transition: 0.2s;
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-row {
    display: flex;
    gap: 15px;
}

.form-row .form-group {
    flex: 1;
}

.button-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}






.btn-primary {
    background: #3b82f6;
    border: none;
    padding: 7px 14px;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.btn-primary:hover {
    background: #2563eb;
}

.btn-secondary {
    background: #3b82f6;
    border: none;
    padding: 7px 14px;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.btn-secondary:hover {
    background: #2563eb;
}






.disabled-card {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================= */
/* DASHBOARD LAYOUT */
/* ============================= */
#jobsChart {
    max-height: 220px;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
}

/* GRID DOS 4 CARDS */
.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* CARD DOS STATUS */
.status-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 120px;
    text-align: center;
}

.status-card h3 {
    font-size: 14px;
    margin-bottom: 8px;
    color: #64748b;
}

.status-card p {
    font-size: 28px;
    font-weight: bold;
    color: #0f172a;
}

/* CARD DO GRÁFICO */
.chart-card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
}

.chart-card canvas {
    flex: 1;
}

/* MENSAGENS */
.messages-card {
    margin-top: 10px;
}

#toastContainer{
    position: fixed;
    top: 20px;
    right: 20px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 999999;
}

.toast{
    min-width: 300px;
    max-width: 450px;

    padding: 15px 20px;

    border-radius: 8px;

    color: white;
    font-size: 14px;
    font-weight: 500;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);

    animation: slideIn .3s ease;
}

.toast.success{
    background: #22c55e;
}

.toast.error{
    background: #ef4444;
}

.toast.warning{
    background: #f59e0b;
}

.toast.info{
    background: #3b82f6;
}

@keyframes slideIn{
    from{
        opacity:0;
        transform:translateX(100%);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}