/* Minimal styling for the DSR intranet mockup.
   Color theme uses #3087be as accent. Layout is desktop-only. */

* { box-sizing: border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    color: #222;
    background: #fafafa;
}

/* Top banner that appears on every page. */
.top-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: white;
    border-bottom: 1px solid #ddd;
}
.top-banner .logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.top-banner .logo img {
    height: 48px;
}
.top-banner .site-title {
    color: #3087be;
    font-weight: bold;
    font-size: 22px;
}
.top-banner .user-info { color: #444; }

/* Two-column layout when logged in: sidebar + main. */
.layout { display: flex; min-height: calc(100vh - 70px); }

.sidebar {
    background: #3087be;
    color: white;
    width: 220px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sidebar a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.sidebar a:hover { text-decoration: underline; }

.main { flex: 1; padding: 24px; }

/* Top public nav for unauthenticated visitors. */
.public-nav {
    background: #f0f0f0;
    padding: 8px 20px;
    display: flex;
    gap: 16px;
    border-bottom: 1px solid #ddd;
}
.public-nav a { color: #3087be; text-decoration: none; }

/* Shared button styling — color theme rule. */
.btn,
button,
input[type="submit"] {
    background: #3087be;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}
.btn:hover, button:hover { opacity: 0.9; }
.btn.secondary { background: #888; }

/* Button that looks and behaves like a hyperlink. Used on the join-group list. */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: #1a73e8;
    font-size: inherit;
    cursor: pointer;
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; opacity: 1; }

/* Greyed-out button for actions that are no longer available (e.g. past events). */
.btn-disabled {
    background: #bbb;
    color: #666;
    border: none;
    padding: 8px 16px;
    cursor: not-allowed;
    border-radius: 4px;
    font-size: 14px;
}

/* Vote button variants: muted green for 'for', muted red for 'against' */
.btn-for {
    background: #97bb90; /* muted green */
    color: white;
}
.btn-against {
    background: #c97b7b; /* muted red */
    color: white;
}
.btn-for:hover, .btn-against:hover { opacity: 0.95; }

/* Button for irreversible action (such as deleting a group) */
.btn-irreversible-action {
    background: #cd625d;
    color: white;
}
.btn-irreversible-action:hover { opacity: 0.9; }

/* Profile picture avatars. Always square source, displayed round. */
.avatar {
    object-fit: cover;
    border-radius: 50%;
    background: #e0e0e0;
    vertical-align: middle;
}
.avatar-small { width: 32px; height: 32px; }
.avatar-medium { width: 50px; height: 50px; }
.avatar-large { width: 160px; height: 160px; }

/* Group member list: no bullets, more vertical spacing, aligned avatars. */
.member-list {
    list-style: none;
    padding-left: 0;
}
.member-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.member-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Form layout. */
form label { display: block; margin-top: 10px; font-weight: bold; }
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="number"],
form select,
form textarea {
    width: 100%;
    max-width: 420px;
    padding: 6px;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 14px;
}
form textarea { min-height: 80px; }

/* Password input with inline toggle button (eye icon) */
.pw-wrapper { position: relative; max-width: 420px; }
.pw-wrapper input[type="password"], .pw-wrapper input[type="text"] {
    padding-right: 38px; /* space for the toggle */
}
.pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
}
.pw-toggle svg { display: block; }

/* 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; }

/* Tabs on group detail. */
.tabs { display: flex; gap: 8px; margin: 12px 0; }
.tabs a {
    padding: 6px 12px;
    background: #eee;
    text-decoration: none;
    color: #333;
    border-radius: 3px;
}
.tabs a.active { background: #3087be; color: white; }

/* Scrollable table frame used for showing participants and the waiting list for events. */
.registration-table-wrapper {
    max-height: 240px;
    max-width: 1200px;   /* Maximum width of table */
    overflow-x: auto;   /* horizontal scroll if columns exceed container */
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 16px;
}
.registration-table {
    width: 100%;
    table-layout: auto; /* browser stretches columns between min/max */
    border-collapse: collapse;
    font-size: 14px;
}
.registration-table thead {
    position: sticky;
    top: 0;
    background: #3087be;
    color: #3087be;
}
.registration-table th,
.registration-table td {
    padding: 6px 10px;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eee;
    /* prevent very long text from breaking layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column 1: Order that you signed up in */
.registration-table th:nth-child(1),
.registration-table td:nth-child(1) { width: 30px; }

/* Column 2: Registration timestamp */
.registration-table th:nth-child(2),
.registration-table td:nth-child(2) { width: 120px; }

/* Column 3: Profile picture */
.registration-table th:nth-child(3),
.registration-table td:nth-child(3) { width: 40px; }

/* Column 4: Name */
.registration-table th:nth-child(4),
.registration-table td:nth-child(4) { width: 400px; }

/* Column 5: Email */
.registration-table th:nth-child(5),
.registration-table td:nth-child(5) { width: 200px; }

/* Column 6: Phone */
.registration-table th:nth-child(6),
.registration-table td:nth-child(6) { width: 120px; }

.registration-table tbody tr:hover {
    background: #f0f7fc;
}

/* Posts and comments. */
.post {
    background: white;
    border: 1px solid #ddd;
    padding: 12px;
    margin: 10px 0;
}

/* Post header: avatar beside the author name and timestamp. */
.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.post-author-info {
    display: flex;
    flex-direction: column;
}
.post-delete-form {
    margin: 0 0 0 auto; /* push the delete button to the far right */
}

/* Author name in bold; timestamp small and light grey beneath it. */
.author-name { font-weight: bold; }
/* Profile links inside author name stay bold and black (no default link colour). */
.author-name a { color: #000; text-decoration: none; }
.timestamp { font-size: 12px; color: #999; }

/* Post body sits below the header, like the sketch. */
.post-body { margin-top: 4px; }

.comments { margin-left: 16px; border-left: 2px solid #eee; padding-left: 10px; }

/* Each comment: avatar beside a message bubble. */
.comment {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}
.comment-bubble {
    background: #f1f3f5;
    border-radius: 12px;
    padding: 8px 12px;
    flex: 1;
}
.comment-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.comment-author-info {
    display: flex;
    flex-direction: column;
}
.comment-delete-form { margin: 0 0 0 auto; }
.comment-content { margin-top: 2px; }
/* Indent the new-comment form to align with the bubble left edge
   (avatar-small 32px + gap 10px = 42px) and add extra top spacing,
   but only when at least one comment precedes it. */
.comment ~ .comment-form { margin-left: 42px; margin-top: 20px; }

/* Icon-only action buttons for edit and delete inside own-post/comment-actions. */
.btn-icon {
    background: none;
    border: none;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #555;
    border-radius: 3px;
    transition: background 0.1s, color 0.1s;
}
.btn-icon:hover { background: #e8e8e8; }
/* Edit icon: apply greyscale so the ✏ emoji renders grey instead of coloured. */
.btn-icon:not(.btn-icon-delete) { filter: grayscale(1); }
.btn-icon-delete:hover { background: #fdecea; color: #c00; }

/* Own-actions (edit + delete): hidden by default, revealed when hovering the post/comment. */
.own-post-actions,
.own-comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s;
}
.post:hover .own-post-actions,
.comment:hover .own-comment-actions {
    visibility: visible;
    opacity: 1;
}
/* Disabled icon button: greyed out, not-allowed cursor, no hover highlight. */
.btn-icon-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.btn-icon-disabled:hover { background: none !important; color: inherit !important; }

/* Inline edit forms: hidden by default via CSS; shown by JS. */
.post-edit-form,
.comment-edit-form {
    display: none;
    margin-top: 6px;
}

/* "Se ældre opslag" ghost link: grey italic text that shows a background on hover. */
.load-older-link {
    text-decoration: none;
    color: gray;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background 0.15s;
}
.load-older-link:hover {
    background: #f0f0f0;
}

/* Tables. */
table { border-collapse: collapse; width: 100%; background: white; }
th, td { padding: 6px 10px; border: 1px solid #ddd; text-align: left; }
th { background: #f0f0f0; }

/* Tooltip for membership info icons. */
.tooltip {
    position: relative;
    display: inline-block;
    color: #3087be;
    cursor: help;
    margin-left: 4px;
}
.tooltip .tooltip-text {
    visibility: hidden;
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    position: absolute;
    bottom: 125%;
    left: 0;
    white-space: nowrap;
    font-size: 12px;
}
.tooltip:hover .tooltip-text { visibility: visible; }

/* Calendar grid for events. */
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar .cell {
    background: white;
    border: 1px solid #ddd;
    min-height: 90px;
    padding: 4px;
    font-size: 12px;
}
.calendar .day-number { color: #888; font-weight: bold; }
.calendar .event-pill {
    display: block;
    background: #3087be;
    color: white;
    padding: 2px 4px;
    margin-top: 2px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 11px;
}

.checkmark { color: green; font-weight: bold; }
.gear { cursor: pointer; text-decoration: none; color: inherit; }

/* Remove underline for links in the events list (title and gear) */
.events-list-table a { text-decoration: none; color: inherit; }

/* Accent color for event titles inside the events list/calendar */
.events-list-table a.event-title { color: #0000EE; text-decoration: none; }

/* Green badge shown when a user is registered for an event. */
.badge-registered {
    display: inline-block;
    background: #2a9d4e;
    color: white;
    padding: 1px 8px;
    margin-left: 6px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}

/* Subtle badge marking an event in the past on the events list. */
.badge-past {
    display: inline-block;
    background: #f6c177;  /* muted orange */
    color: #333;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Filter form container with a distinct background. */
.filter-box {
    background: #eef5fa;
    border: 1px solid #d0dfe8;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

/* Inline responsive layout for filter controls. Fields stay on the same
   line while there is horizontal space; they wrap when needed. Left padding
   separates boxes so they don't sit too close. */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 0; /* vertical gap 12px; horizontal spacing via left padding */
}
.filter-field {
    display: flex;
    flex-direction: column;
    min-width: 250px; /* keeps fields readable before wrapping */
    padding-right: 20px; /* rightpad to separate boxes */
}
.filter-field:first-child { padding-left: 0; }
.filter-field label { margin-bottom: 6px; font-weight: bold; }

/* =========================================================================
   Visual calendar (day / week / month) for the events page.
   See app/calendar_view.py for the data model rendered by these styles.
   ========================================================================= */

/* Navigation bar above the calendar. */
.cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cal-nav .cal-title {
    margin: 0 0 0 12px;
    font-size: 18px;
}

/* ---------- Day & week time grid ---------- */

/* Scrollable wrapper: fixed viewport height, header stays visible. */
.cal-scroll-wrapper {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.cal-grid {
    background: white;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* allow flex child to shrink for scrolling */
}
/* Header row: sticky so it stays visible while the body scrolls. */
.cal-grid-header {
    display: grid;
    grid-template-columns: 60px repeat(var(--cal-cols, 7), 1fr);
    border-bottom: 1px solid #ddd;
    background: #f0f4f8;
    flex-shrink: 0; /* never shrink — it is the sticky part */
}
.cal-grid-header > .cal-time-col-header { border-right: 1px solid #ddd; }
.cal-day-col-header {
    padding: 6px 8px;
    font-weight: bold;
    text-align: center;
    border-right: 1px solid #eee;
}
.cal-day-col-header.is-today { background: #d4e8f4; color: #1a5078; }

/* Body: scrollable area with time axis + day columns.
   Height = 25 rows (00:00–24:00) × 40px each = 1000px. */
.cal-grid-body-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.cal-grid-body {
    display: grid;
    grid-template-columns: 60px repeat(var(--cal-cols, 7), 1fr);
    height: 1000px;
}
.cal-grid-body > .cal-time-col {
    border-right: 1px solid #ddd;
    background: #fafafa;
    display: flex;
    flex-direction: column;
}
.cal-hour-label {
    flex: 1;
    border-bottom: 1px dashed #eee;
    font-size: 11px;
    color: #888;
    padding: 2px 4px;
    text-align: right;
}
.cal-day-col {
    position: relative;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
}
.cal-day-col.is-today { background: #f4faff; }
.cal-hour-row { flex: 1; border-bottom: 1px dashed #eee; }
/* Quiet hours (before 06:00 and from 22:00) get a discrete grey background. */
.cal-hour-row.off-hour { background: #f0f0f0; border-bottom-color: #e0e0e0; }
.cal-hour-label.off-hour { background: #f0f0f0; color: #bbb; }

/* Absolutely-positioned event boxes inside a day column.
   The entire box is clickable via an onclick handler on the div (rather than
   wrapping in <a>) to avoid invalid nested-anchor HTML. */
.cal-event {
    position: absolute;
    left: 2px;
    right: 2px;
    background: #3087be;
    color: white;
    border-radius: 3px;
    padding: 3px 5px;
    font-size: 11px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    cursor: pointer;
    display: block;
}
.cal-event:hover { opacity: 0.9; }
.cal-event-head {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: bold;
}
.cal-event-title {
    color: white;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-event .gear { color: white; }
.cal-event-time { font-size: 10px; opacity: 0.9; }
.cal-event-badges { margin-top: 2px; }
.cal-event-badges .badge-registered,
.cal-event-badges .badge-past { margin-left: 0; margin-right: 4px; }

/* ---------- Month grid ---------- */

/* Scrollable wrapper for the month view. */
.cal-month-scroll-wrapper {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-y: auto;
    max-height: 75vh;
}

.cal-month {
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    overflow: hidden;
}
.cal-month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f0f4f8;
    border-bottom: 1px solid #ddd;
}
.cal-month-weekday {
    padding: 6px 8px;
    font-weight: bold;
    text-align: center;
    border-right: 1px solid #eee;
}
.cal-month-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.cal-month-cell {
    min-height: 100px;
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    padding: 4px;
    font-size: 12px;
    background: white;
}
.cal-month-cell.not-in-month { background: #fafafa; color: #aaa; }
.cal-month-cell.is-today { background: #f4faff; }
.cal-month-day-number { font-weight: bold; color: #555; margin-bottom: 4px; }
.cal-month-cell.not-in-month .cal-month-day-number { color: #bbb; }

/* Compact event box inside a month cell. */
.cal-month-event {
    background: #3087be;
    color: white;
    border-radius: 3px;
    padding: 2px 4px;
    margin-bottom: 2px;
    font-size: 11px;
}
.cal-month-event .cal-event-title {
    color: white;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.cal-month-event .gear { color: white; }