/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
    font-size: 16px;
    /* Opcional: prevenir overflow horizontal */
    overflow-x: hidden;
}

/* Container */
.container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    background: #1e3a5f;
    color: white;
    position: fixed;
    top: 60px; /* below top nav */
    left: 0;
    height: calc(100vh - 60px);
    overflow-y: auto;
    transition: width 0.3s;
    padding: 20px;
}

/* Sidebar states */
.sidebar.collapsed {
    width: 50px;
}
.sidebar.expanded {
    width: 250px;
}

/* Sidebar toggle button */
.toggle-btn {
    background: #2c4f77;
    border: none;
    color: white;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

/* Sidebar Heading */
.sidebar h2 {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Sidebar Menu */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar ul li {
    margin: 15px 0;
}
.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px;
    background: #2c4f77;
    border-radius: 5px;
    transition: background 0.2s;
}
.sidebar ul li a i {
    margin-right: 10px;
    font-size: 1.2em;
}
/* Hide text when collapsed */
.sidebar.collapsed ul li a span {
    opacity: 0;
    transition: opacity 0.3s;
}
/* Cuando está expandido se muestran los textos */
.sidebar.expanded ul li a span {
    opacity: 1;
    transition: opacity 0.3s;
}
/* Optionally show text on hover in collapsed mode */
.sidebar.collapsed ul li a:hover span {
    opacity: 1;
}
.sidebar ul li a:hover {
    background: #40608c;
}

/* Top Navigation Bar */
.top-nav {
    background: #1e3a5f;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
.top-nav-left img {
    height: 45px;
}
.top-nav-center h1 {
    margin: 0;
    font-size: 1.2em;
    text-align: center;
}
.top-nav-right {
    position: relative;
    display: inline-flex;
}
.menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding-left: 15px;
}
.top-menu {
    display: none;
    position: absolute;
    right: 0;
    background: #1e3a5f;
    border: 1px solid #2c4f77;
    border-radius: 5px;
    margin-top: 58px;
    width: max-content;
}
.top-menu ul {
    list-style: none;
    padding: 10px;
    margin: 0;
}
.top-menu ul li {
    margin: 5px 0;
}
.top-menu ul li a {
    color: white;
    text-decoration: none;
}
.top-menu.show {
    display: block;
}

/* Main Content */
.content {
    padding-top: 50px;
    padding-left: 45px;
    flex-grow: 1;
    transition: margin-left 0.3s;
    margin-left: 50px; /* matches collapsed sidebar */
    margin-top: 60px;  /* below top nav */
}
.content h1 {
    margin: auto;
    text-align: center;
}
.sidebar.expanded ~ .content {
    margin-left: 250px;
}

/* Form Styles */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-section {
    width: -moz-available;
}

form input, form select, form button, form textarea {
    width: 90%;
    display: flow;
    padding: 10px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.row {
    background-color: deepskyblue;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px auto;
    width: 100%;
    max-width: 500px;
    display: flex;
    /**flex-direction: column;**/
    align-items: center;
    box-sizing: border-box;
}
.row label {
    width: 100%;
    display: flex;
    /**flex-direction: column;**/
    align-items: center;
}
.row label span {
    margin-bottom: 5px;
    font-weight: bold;
}
/* Asegurarse de que los contenedores de slider ocupen 100% */
.row .slider {
    width: 100%;
}

/* Uniformidad en los contenedores de secciones (quesos, sales, emulsionantes, objetivos) */
#cheeses_container, 
#salts_container, 
#emulsifiers_container,
#target_humidity_slider, 
#target_fat_slider, 
#target_total_solids_slider {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
table, th, td {
    border: 1px solid #ccc;
}
th, td {
    padding: 10px;
    text-align: center;
}
th {
    background: #1e3a5f;
    color: white;
}

/* Footer */
.footer {
    background: #1e3a5f;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}
.footer a {
    color: white;
    text-align: center;
}

/* Saved Formulations Table Container */
.formulation-list {
    margin-top: 30px;
    border-top: 2px solid #ddd;
    padding-top: 20px;
    margin-left: 20px;
}

/* Edit ID Notice */
.edit-id {
    background: #6cb5ff;
    padding: 5px;
    margin-bottom: 10px;
    text-align: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.action-icons a {
    margin-right: 20px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .sidebar {
        width: 50px;
        padding: 10px;
        top: 60px;
        height: calc(100vh - 2px);
    }
    .sidebar.expanded {
        width: 200px;
    }
    .content {
        padding: 25px;
        display: inline-block;
        text-align: left;
    }
    .sidebar.collapsed ul li a span {
        display: none;
    }
    form input, form select, form button, form textarea {
        width: 85%;
        text-align: center;
    }
    /* Ocultar columna de propiedades reológicas en la tabla */
    table thead th:nth-child(4),
    table tbody td:nth-child(4) {
        display: none;
    }
}

@media (max-width: 768px) {
    table.calc-summary thead { display: none; }
    table.calc-summary, table.calc-summary tbody, table.calc-summary tr, table.calc-summary td {
      display: inline-block;
      width: 85%;
      text-align: -webkit-auto;
    }
    table.calc-summary tr {
      margin-bottom: 15px;
      border-bottom: 2px solid #ddd;
    }
    table.calc-summary td {
      text-align: right;
      padding-left: 50%;
      position: relative;
      border: none;
      border-bottom: 1px solid #ccc;
    }
    table.calc-summary td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      width: 45%;
      font-weight: bold;
      text-align: left;
    }
    row {
        background-color: deepskyblue;
    }
}

/* Estilos para el Modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    position: relative;
}
.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

/* Asegurarse de que el canvas no exceda el ancho */
canvas {
  max-width: 100%;
  height: auto;
}

/* Forzar que el canvas se ajuste a su contenedor */
#resultsChart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  /* Contenedor para la gráfica con ancho limitado */
  #chart-container {
    width: 100%;
    max-width: 500px; /* Ajusta según lo necesario */
    margin: 0 auto;
  }

@media (max-width: 768px) {
    /* Eliminar el margen izquierdo para evitar el desborde */
    .content {
      margin-left: 0 !important;
      padding: 10px; /* Ajusta el padding si es necesario */
      padding-top: 50px;
    }
    /* Si el sidebar está colapsado, puedes posicionarlo de forma fija sobre el contenido */
    .sidebar {
      position: fixed;
      width: 50px;
      left: 0;
      top: 60px;
      height: calc(100vh - 60px);
      z-index: 1001; /* Encima del contenido */
    }
    #chart-container {
        height: 600px !important; /* Altura fija en móviles */
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
      }
      #resultsChart {
        height: 100% !important;
    }

    table thead th:nth-child(2),
    table thead th:nth-child(3),
    table tbody td:nth-child(2),
    table tbody td:nth-child(3) {
        display: none;
    }
      /* Asegurar que la columna de Acciones se muestre */
    table thead th:nth-child(4),
    table tbody td:nth-child(4) {
        display: table-cell;
    }
  }

/* --- Estilos para el Menú Desplegable de Usuario --- */

.user-dropdown {
    /* Elimina las viñetas y el padding por defecto de la lista */
    list-style: none !important;
    padding: 5px 0 !important;
    margin: 0;
}

.user-dropdown li {
    /* Asegura que cada item de la lista no tenga márgenes extra */
    margin: 0;
    padding: 0;
}

.user-dropdown a {
    /* Estilo para los enlaces dentro del menú */
    display: block; /* Hace que el enlace ocupe todo el ancho del item */
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}

.user-dropdown a:hover {
    background-color: #f1f1f1;
}

.user-dropdown .dropdown-divider {
    /* Estilo para el separador horizontal */
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
    background-color: #e9ecef;
}