/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400,1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,700&display=swap');

/* Variables */
:root {
    --primary-color: rgb(0, 82, 96);
    --primary-background-color: rgb(242, 246, 247);
    --font-color: rgb(0, 0, 0);
    --font-color-inverted: rgb(255, 255, 255);
    --link-color: rgb(0, 82, 96);
    --link-color-hover: rgb(0, 0, 0);
    --spacing: 1rem;
    --spacing-small: 0.5rem;
    --font-size-root: 1rem;
    --font-size-small: 0.9rem;
}

/* Body style */
body {
    font-family: 'Nunito Sans', Arial, sans-serif;
    margin: 20px;
    line-height: 1.6;
    background-color: var(--primary-background-color);
    color: var(--font-color);
    padding-top: 70px; /* Ensure enough space for the header */
    padding-left: 10px; /* Adjust padding for logo alignment */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
}

/* Input and textarea */
input, textarea {
    font-family: inherit;
    font-size: var(--font-size-root);
    width: 100%;
    padding: var(--spacing-small);
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
    border: 2px solid var(--primary-color);
    border-radius: 0.4rem;
    background-color: var(--primary-background-color);
}

input[type="text"] {
    font-family: inherit;
    font-size: var(--font-size-root);
    width: 100%;
    padding: var(--spacing-small);
    margin-bottom: var(--spacing);
    border: 2px solid var(--primary-color);
    border-radius: 0.4rem;
    background-color: var(--primary-background-color);
}

input[type="date"] {
    width: auto; /* Adjust width to fit content */
    padding: var(--spacing-small);
    margin-bottom: 1rem; /* Add spacing below date picker */
    cursor: pointer; /* Make the entire field clickable */
}

input:hover, textarea:hover {
    background-color: var(--primary-color-10);
}

input:focus-visible, textarea:focus-visible {
    outline: 4px solid var(--primary-color);
    outline-offset: -4px;
}

/* Button style */
button {
    font-family: inherit;
    font-size: var(--font-size-root);
    padding: var(--spacing-small) var(--spacing);
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--font-color-inverted);
    border: none;
    border-radius: 0.4rem;
    transition: background-color 0.3s ease;
    display: block;
    margin-top: var(--spacing);
}

button:hover {
    background-color: var(--primary-color); /* Keep the primary color */
    color: var(--font-color-inverted); /* Ensure text remains visible */
    opacity: 0.9; /* Slightly reduce opacity for hover effect */
}

button:disabled {
    background-color: var(--primary-background-color);
    color: grey;
    cursor: not-allowed;
}

/* Status message */
#status {
    margin-top: var(--spacing-small);
    font-weight: bold;
    color: var(--primary-color);
}

/* Links */
a {
    color: var(--link-color);
    text-decoration: underline;
}

a:hover {
    color: var(--link-color-hover);
}

/* Event list */
#eventList {
    text-align: left; /* Venstrejuster innholdet */
    margin-top: var(--spacing); /* Legg til litt avstand over */
}

#eventList div {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-small);
}

#eventList input[type="radio"] {
    margin-right: var(--spacing-small); /* Avstand mellom radioknapp og tekst */
}

#eventList table {
    border-collapse: collapse; /* Ensure borders do not double up */
}

#eventList th, #eventList td {
    padding: 0.5rem; /* Add padding to table cells */
    text-align: left; /* Ensure text is left-aligned */
}

/* Meeting details */
#meetingDetails {
    font-family: 'Nunito Sans', Arial, sans-serif;
    background-color: var(--primary-background-color);
    border: 1px solid var(--primary-color);
    border-radius: 0.5rem;
    padding: var(--spacing);
    margin-bottom: var(--spacing);
    width: 40%; /* Match the width of #eventList */
    box-sizing: border-box; /* Include padding and border in the width */
}

#meetingDetails h2 {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-small);
    color: var(--primary-color);
}

#meetingDetails p {
    margin: var(--spacing-small) 0;
    font-size: var(--font-size-root);
    color: var(--font-color);
}

#meetingDetails strong {
    color: var(--primary-color);
}

/* Logout button */
#logoutButton {
    display: inline-block !important;
    position: static !important;
    font-size: 1.1rem !important;
    color: #d32f2f !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
    transform: translateY(1px) !important;
}

#logoutButton:hover {
    color: #b71c1c !important;
}

/* Login button */
#loginButton {
    display: block;
    margin: 0 auto; /* Center horizontally */
    text-align: center;
}

/* Header styles */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #e9f7fb;
    padding: 32px 16px 32px 16px;
    width: 100%;
    box-sizing: border-box;
}

.header-left {
    display: flex;
    align-items: center;
    min-width: 300px;
}

.fk-logo {
    width: 150px;
    height: 60px;
    margin-right: 20px;
    background-size: contain; /* Skaler bildet til å passe */
    background-repeat: no-repeat; /* Unngå gjentakelse av bildet */
    background-position: center; /* Plasser bildet i midten */
    display: inline-block; /* Sørg for at elementet oppfører seg som en blokk */
}

.fk-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #111;
}

.fk-subtitle {
    letter-spacing: 1px;
    font-size: 0.95rem;
    color: #222;
    font-weight: 400;
    margin-top: 2px;
}

.header-center {
    display: flex;
    align-items: center;
    flex: 1 0 0;
    justify-content: center;
}

.dust-logo {
    width: 45px;
    height: 45px;
    margin-right: 14px;
}

.dust-title {
    font-size: 2.1rem;
    font-weight: bold;
    color: #111;
    letter-spacing: 2px;
    max-width: 300px; /* Sett en maksimal bredde */
    word-wrap: break-word; /* Aktiver tekstbryting */
    text-align: center; /* Sentraliser teksten */
}

.header-right {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-end; /* Align items to the right */
    min-width: 170px;
    margin-top: 10px;
    position: relative;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.7rem;
    position: relative;
    min-width: 200px;
    width: 320px;
}

.user-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    justify-content: flex-end !important;
}

.user-name {
    font-size: 1.1rem !important;
    color: #035b68 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
}

/* Button alignment */
#exportTableButton,
#printParticipantListButton,
#updateStatusButton {
    display: inline-block; /* Ensure buttons are inline when visible */
}

.button-container {
    display: none; /* Hidden by default */
    gap: var(--spacing-small); /* Add spacing between buttons */
    margin-top: var(--spacing); /* Add spacing above the container */
}

.button-container.visible {
    display: flex; /* Show when the class is added */
}

/* Data table */
#dataTable {
    width: 100%; /* Ensure the table takes up the full width of its container */
    border-collapse: collapse; /* Ensure borders do not double up */
    table-layout: auto; /* Allow columns to adjust based on content */
}

#dataTable th {
    width: 150px; /* Set a fixed width for all headers */
}

#dataTable th, #dataTable td {
    padding: 0.5rem; /* Add padding to table cells */
    text-align: left; /* Ensure text is left-aligned */
    word-wrap: break-word; /* Allow long words to break */
    white-space: normal; /* Ensure text wraps */
    overflow-wrap: break-word; /* Ensure consistent text wrapping */
    word-break: break-word; /* Break long words without spaces */
}

#dataTable tr:first-child th {
    width: 120px; /* Set a fixed width for the first row headers */
}

/* Data table column styles */
#dataTable th:first-child, #dataTable td:first-child {
    width: 50px; /* Set a fixed width for the checkbox column */
    text-align: center; /* Center align the checkboxes */
}

/* Data table responsiveness */
#dataTable-container {
    width: 100%; /* Ensure the container takes up the full width */
    overflow-x: auto; /* Add horizontal scrolling for small screens */
    margin-top: var(--spacing); /* Add spacing above the table */
    display: block; /* Ensure the container behaves as a block element */
}

/* Data table responsiveness */
@media (max-width: 900px) {
    .header {
        flex-direction: column;
        align-items: center;
    }
    .header-left,
    .header-center,
    .header-right {
        margin-bottom: 10px;
    }
    #dataTable-container {
        overflow-x: auto; /* Ensure horizontal scrolling on smaller screens */
    }
    #dataTable th:first-child, #dataTable td:first-child {
        width: 60px; /* Slightly increase width for smaller screens */
    }
}

/* Additional responsiveness for smaller screens */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .header-left, .header-center, .header-right {
        margin-bottom: 10px;
        width: 100%; /* Ensure full width for header sections */
    }

    .fk-logo {
        width: 100px; /* Juster bredden for mindre skjermer */
        height: auto; /* Behold proporsjonene */
    }

    .fk-logo, .dust-logo {
        width: 100px; /* Scale down logos */
        height: auto;
    }

    .fk-title, .dust-title {
        font-size: 1.5rem; /* Reduce font size */
    }

    #meetingDetails {
        width: 100%; /* Make meeting details take full width */
    }

    #dataTable-container {
        overflow-x: auto; /* Ensure horizontal scrolling for tables */
    }

    #dataTable th, #dataTable td {
        font-size: 0.8rem; /* Reduce font size for table content */
        white-space: normal; /* Ensure text wraps */
        word-wrap: break-word; /* Allow long words to break */
        overflow-wrap: break-word; /* Ensure consistent text wrapping */
        word-break: break-word; /* Break long words without spaces */
    }

    .button-container {
        flex-direction: column; /* Stack buttons vertically */
        gap: var(--spacing-small);
    }

    button {
        width: 100%; /* Make buttons full width */
    }
}

/* Calendar select menu */
.select-calendar {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-color);
    border-radius: 0.4rem;
    background-color: var(--primary-background-color);
    color: var(--font-color);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.2s;
}

.select-calendar:focus {
    outline: 4px solid var(--primary-color);
    outline-offset: -4px;
}

.select-calendar:hover {
    border-color: var(--primary-color);
    background-color: #e9f7fb;
}

/* Calendar dropdown styles */
.calendar-dropdown-container {
    display: none;
    position: absolute;
    right: 0;
    top: 38px;
    min-width: 260px;
    padding-bottom: 2rem;
    flex-direction: column;
    gap: 0.5rem;
    background: #e9f7fb;
    border: 1px solid var(--primary-color);
    border-radius: 0.4rem;
    z-index: 10;
}

.calendar-dropdown-container input[type="text"] {
    margin-top: 2.2rem;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    display: block;
    position: relative;
    z-index: 12;
}

.calendar-dropdown-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.2rem;
    color: #035b68;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 11;
    font-weight: bold;
}

.calendar-dropdown-close:hover {
    color: #d32f2f;
}

.calendar-label {
    cursor: pointer;
    color: #035b68;
    font-size: 0.95rem;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
    font-weight: 600;
}

/* Additional styles for hidden elements */
#calendarSelect {
    display: block;
}
#datePickerLabel {
    text-align: center;
    margin-top: 2rem;
    display: none;
}
#datePicker {
    display: none;
    margin-bottom: 1rem;
}
#fetchEventsButton {
    display: none;
}
#meetingDetails {
    display: none;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    background-color: #f9f9f9;
}
#meetingDetails h2 {
    margin-bottom: 0.5rem;
}
#statusMessage {
    display: none;
    color: red;
    text-align: center;
    margin-top: 1rem;
}
.button-container {
    display: none;
}
#previewTable {
    display: none;
    margin-top: 1rem;
}
#participantSummary {
    display: none;
    margin-top: 1rem;
    font-weight: bold;
}

/* Mailbox suggestion styles */
.mailbox-suggestion {
    display: none;
    position: relative;
    left: 0;
    top: 0.2rem;
    background: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 0.3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    min-width: 220px;
    z-index: 11;
    padding: 0.3rem 0.7rem;
    margin-left: auto;
    margin-right: auto;
}

.mailbox-suggestion-item {
    display: block;
    padding: 0.3rem 0.2rem;
    cursor: pointer;
    color: #035b68;
    font-size: 0.98rem;
}

.mailbox-suggestion-item:hover {
    background: #e9f7fb;
    color: #222;
}

.mailbox-suggestion-title {
    font-weight: bold;
    color: #035b68;
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
    margin-top: 0.1rem;
    letter-spacing: 0.5px;
}

/* Driftsmelding style */
.driftsmelding {
    width: 100%;
    background: #ffe9c6;
    color: #a15c00;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid #ffd18c;
    letter-spacing: 0.5px;
    z-index: 100;
}