/* 
    Created on : 21 avr. 2022, 13:38:14
    Author     : TCHAPTCHET Njinga
*/
/* Define a new primary color for a fresher look */

:root {
    --primary-color: #004d99; /* Deep Blue, more professional than the existing #3771c8 */
    --accent-color: #e6e6e6;  /* Light gray for backgrounds/borders */
    --primary: #2563eb;
    --secondary: #64748b;
    --success: #10b981;
    --bg: #f3f4f6;
    --border: #e5e7eb;
    --text: #1f2937;

    --primary-legal: #4a6582;      /* Soft Slate Blue */
    --primary-legal-light: #f0f4f8; /* Very light blue-grey */
    --border-soft: #e2e8f0;        /* Softer border grey */
    --bg-page: #f9fbff;            /* Clean off-white/blue */
    --text-main: #2d3748;          /* Professional dark grey */
}

body {
    margin: 0;
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95em;
    /* Ensure the main content starts below the fixed header (Adjust this value if header height changes) */
    padding-top: 85px;
    background-color: white;
}

html {
    /* This creates a 60px buffer when scrolling to an anchor (#id) */
    scroll-padding-top: 85px;
}

html,h1,h2,h3,h4,h5,p {
    font-weight: lighter;
}

.content{
    margin-left: 10%;
    margin-right: 15%;

}

/* Custom CSS for Sticky Header and Layout */
.sticky-header-container {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 8px 0; /* Add vertical padding for breathing room */
    display: flex; /* Makes it a flexible container */
    align-items: center; /* Vertically centers the content */
}

/* Style the search input and container */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    padding-right: 35px !important; /* Make room for the search icon */
    transition: all 0.3s;
}

/* 1. Style the submit button (replaces the icon's position) */
.search-button {
    /* Position the button over the input */
    position: absolute;
    right: 5px; /* Adjust this value */
    top: 50%;
    transform: translateY(-50%);

    /* Make it look invisible/like an icon */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0; /* Remove default button padding */
    line-height: 1; /* Match the icon size */
}

/* 2. Style the icon inside the button */
.search-button i.search-icon-inside-button {
    color: #999; /* Set the icon color */
    font-size: 18px; /* Match the desired icon size */
}
#mobileMenu {
    background-color: #fff; /* solid background so text is readable */
    position: absolute; /* ensures it sits on top */
    top: 60px; /* adjust based on your header height */
    right: 0;
    left: 0;
    z-index: 9999; /* keeps it above other content */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* optional for separation */
}
@media screen and (max-width: 600px) {
    .search-container {
        display: flex;
        width: 100%;
    }
    .search-input {
        flex: 1;              /* take all available space */
        font-size: 16px;      /* larger text for usability */
    }
    .search-button {
        flex-shrink: 0;       /* keep button visible */
        padding: 8px 12px;
    }
}

.icon-button {
    font-size: 20px !important;
    padding: 8px 12px !important;
    margin-left: 5px;
}

/* Custom styles from original file */
h4{
    font-size: 0.95em
}

/* Clean anchor link styling */

a {
    color: #007bff; /* Blue color for links */
    text-decoration: none; /* Removes the default underline */
}

a:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: underline; /* Adds underline on hover */
}

a:active {
    color: #004085; /* Even darker blue when clicked */
    text-decoration: underline;
}

a:visited {
    /*color: #6610f2; Purple color for visited links */
    color: #007bff; /* Blue color for links */
}

.dialog{
    max-width: 75%;
    max-height: 50%;
}

/* dialog box beginning */
/* Dialog styles */
#openDialogButton {
    cursor: pointer;
}
#dialogBox::backdrop {
    opacity: 0.7;
    background-color: rgb(109, 103, 82);
    backdrop-filter: blur(5px);
}
#dialogBox {
    box-shadow: 1px 2px #888888;
    border-radius: 5px;
    border-color: #6d6752
}
#dialogBox header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#deleteButton {
    background-color: red;
    border: none;
    color: white;
    padding: 12px 32px;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
#closeDialogFooter {
    background-color: gray;
    border: none;
    color: white;
    padding: 12px 32px;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
/* Styles spécifiques pour le dialogue */
.custom-dialog {
    /* Fixe la taille de la modale et active le flex pour structurer le contenu */
    max-width: 500px;
    width: 90%;
    height: 90vh; /* Hauteur relative pour forcer l'overflow */
    border: none;
    padding: 0;
    background-color: white;

    /* Utiliser Flexbox pour que la section puisse prendre la hauteur restante */
    display: flex;
    flex-direction: column;
}
/* This is the mandatory line to hide it when closed */
.custom-dialog:not([open]) {
    display: none !important;
}
/* La section de contenu doit être celle qui défile */
.scrollable-section {
    /* Permet à la section de défiler verticalement si nécessaire */
    overflow-y: auto;
    /* Permet à la section de s'étendre pour remplir l'espace restant */
    flex-grow: 1;
}

/* Classe pour le header sticky (essentiel) */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
}
/* dialog box end */

@media (max-width: 600px) {
    html,h1,h2,h3,h4,h5,p {
        font-weight: normal;
    }

    body {
        margin: 0;
        padding-top: 85px; /* keep the buffer on mobile too */
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-size: 1.1em;
    }
    .content{
        margin-left: 5%;
        margin-right: 5%;
    }
    .dialog{
        max-width: 95%;
        max-height: 90%;
    }
}

.main {
    flex-grow: 1;
}


h4 {
    color: #3771c8;
}

ol {
    counter-reset: item;
    list-style-type: none;
}
ol>li {
    counter-increment: item;
}
ol>li::before {
    content: counters(item, '.') ' - ';
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
        height: auto;
    }
}