/* Styling for the webpage. */

/* Font settings for the body element */
body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;  /* Padding around the content of the body */
}

/* ---------- TOP BANNER ---------- */
/* Style of the top banner that appears on every page (class "top-banner"). */
.top-banner {
    padding: 10px 20px; /* y and x padding around the content (logo and text) of the top banner */
}
/* Style of the text of the top banner (class "logo" within the class "top-banner"). */
.top-banner .logo {
    display: flex;  /* Specify that the logo image and text should be laid out horizontally (on the same line) */
    gap: 12px;  /* Gap between the logo and the text */
    color: #3087be;  /* Color of the text */
    font-weight: bold;  /* Bold text */
    font-size: 22px;  /* Font size of the text */
}
/* Style of the logo of the top banner (class "logo" within the class "top-banner"). */
.top-banner .logo img {
    height: 48px;
}

/* ---------- NAVIGATION BAR ---------- */
/* Style of the navigation bar (class "nav-bar"). */
.nav-bar {
    background: #f0f0f0;  /* Background color of the navigation bar */
    padding: 7px 10px;
    border-top: 1px solid #ddd; /* Top border of the navigation bar */
    border-bottom: 1px solid #ddd;  /* Bottom border of the navigation bar */
}
/* Links within the navigation bar. */
.nav-bar a { 
    color: #3087be; 
    text-decoration: none; 
    padding: 7px 10px; /* y and x padding around the links */
}
/* Style for the currently selected page. */
.nav-bar a.active {
    font-weight: bold;
}
/* Style for the pages currently not selected. */
.nav-bar a.not_active {
    font-weight: normal;
}

/* ---------- FLASH MESSAGES ---------- */
.flash { padding: 10px; border-radius: 3px; margin: 10px 0; }
.flash.error   { background: #fdecea; color: #8a1a1a; }
.flash.success { background: #e6f4ea; color: #1e6b32; }
.flash.warning { background: #fff8e1; color: #7a5700; }

/* ---------- SETTINGS PAGE ---------- */
/* Style of each option (label + input) in the setting page (class "settings_option"). */
.settings_option {
    background: #f0f8fb;  /* Background color of the option */
    padding: 15px 20px;  /* y and x padding around the content of the option */
    /* width: fit-content;  Width of the option is determined by the content */
    width: 300px;

}

/* Style for the list of columns names with instructor data such as name of the instructor (class "headers-list"). */
.headers-list {
    list-style: none;
    padding: 0;
    margin: 5px 0px 7px 0px;
    font-style: italic;
}
/* Style of the delete button next to the column names */
.delete-btn {
    background: none;
    border: none;
    color: #d32f2f;
    cursor: pointer;
}

/* Style for the simple list (used for unwanted instructors) */
.unwanted_instructor-list {
    list-style: none;
    padding: 0;
    margin: 5px 0px 10px 0px;
}
.unwanted_instructor-list li {
    background: #f0f8ff;
    border: 1px solid #b0d9f0;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 6px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.unwanted_instructor-list li span {
    display: flex;
    gap: 15px;
}

/* ---------- BUTTONS FOR THE EMAIL PAGE ---------- */
.btn {
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;  /* No line under the text, relevant if styling a href as a button */
}
.btn-save-text {
    background: #95cd9f;
    color: black;
}
.btn-blue {
    background: #aac8dc;
    color: black;
}
.btn-cancel {
    background: #f0807b;
    color: black;
}
.btn-copy-email-adresses {
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    background: #cadfed;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0px 0px 4px;  /* Asymmetric padding compensates for the "⧉" glyph's ink sitting top-left within its own box */
}
/* ---------- EMAIL PAGE, "MODTAGERE" ROW ---------- */
/* Aligns the label, textarea and copy-button on the same vertical center. */
.email-recipients-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---------- EMAIL PAGE, TEXT AREA WITH EMAIL ADRESSES ---------- */
.textarea-emails-adresses {
    width: 300px;
    height: 35px;
    resize: none;  /* Disable that the user can change the hight and width of the textarea */
    box-sizing: border-box;  /* Include padding and border in the element's total width and height */

    background-color: #f5f5f5;  /* Background color of the textarea */
    border: 1px solid #ccc;  /* Border of the textarea */
    border-radius: 6px;  /* Make the corners of the textarea rounded */
    padding: 0px;  /* Padding bet the textarea */

    color: #333;  /* Text color */
    font-family: monospace;  /* Text font */
    font-size: 14px;  /* Text size */
    line-height: 1.4;  /* Space between lines of text */

    
    overflow: auto;  /* Allows scrolling when the list is longer than the box */
}

/* ---------- EMAIL PAGE CLIPBOARD POPUP ---------- */
/* Layout of the outer div. This div create a transparent gray background on top of 
the normal webpage, making the normal webpage look dimmed when the popup is shown. */
#clipboard-modal {  
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* The popup box itself (for the inner div) */
#clipboard-dialog {
    background: white;
    padding: 25px;
    border-radius: 8px;
    width: min(600px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* ---------- TABLES ---------- */
.my-table {
    text-align: center;
}
.my-table th { /* Layout of table header */
    background-color: #d4e5f0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.my-table td { /* Layout of table rows */
    border-bottom: 1px solid #ccc;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ---------- MISCELLANEOUS ---------- */
.comment {
    font-size: smaller;
    font-style: italic;
    color: gray;
}
.bad-value {
    color: white;
    background-color: darksalmon;
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.good-value {
    color: white;
    background-color: darkseagreen;
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
}