/* Inter was previously @imported from fonts.googleapis.com — Zoom's
   embedded webview blocks that CDN with a 403, polluting the console.
   Removed for now; system / fallback fonts kick in. Self-host Inter
   woff2 + an @font-face block here if we want the exact face back
   everywhere. */

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --primary-color:                #f6faff;
    --secondary-color:              #cfe8ff;
    --gradient-first-color:         #ffffff;
    --gradient-second-color:        #dbe9ff;
    --primary-text-color:           #333333;
    --secondary-text-color:         #475467;
    --primary-link-color:           #c7d1db;
    --secondary-link-color:         #2c343b;
    --primary-button-color:         #4180f3;
    --secondary-button-color:       #3186f5;
    --secondary-button-text-color:  #e4e9f0;
    --disabled-button-color:        #cccccc;
    --disabled-button-text-color:   #666666;
    --primary-button-hover-color:   #0ab495;
    --information-error-color:      #d30012d4;
    --information-valid-color:      #00bb4e;
    --input-background-color:       #ffffff;
    --input-primary-text-color:     #222222;
    --input-placeholder-color:      #888888;
    --fx-shadow-color:              #00000033;
    --org-chart-grid:               #e2e8f0;
    --org-chart-muted:              #94a3b8;
}


.alert-popup {
    background: var(--gradient-first-color) !important; /* Dark background */
    color: var(--primary-text-color);
    border: 2px solid var(--primary-button-hover-color); /* Border color */
    box-shadow: 0px 0px 10px var(--secondary-text-color); /* Subtle glow */
}
a,
a:link,
a:visited,
a:active {
    text-decoration: none;
    color: #00a86b; /* MV brand green */
}
a:hover {
    text-decoration: none;
    color: #3186F5; /* MV brand blue */
}

.learning {
  max-width: 75%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Body Styling
   Sticky-footer pattern: the body is a column flex container with at least
   the viewport height. The <main class="page-main"> grows to fill leftover
   space, which pushes .wrapper (the footer) to the bottom on short pages. */
body {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    color: var(--primary-text-color);
    background: radial-gradient(circle at center, #FFFFFF 0%, #CFE8FF 100%);
    background-attachment: fixed;
    min-width:319px;
    min-height:100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.page-main {
    flex: 1 0 auto;
}
.wrapper {
    flex-shrink: 0;
}

.buffer {
    flex: 1;
    height: calc(var(--buffer-size, 1) * 1vh);
}

/* Buttons */
button, .btn {
    display: inline-block;
    background-color: var(--primary-button-color);
    color: var(--secondary-button-text-color);
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
}

button:hover, .btn:hover {
    background-color:var(--primary-button-hover-color);
    color: var(--secondary-button-text-color);
    transition: 0.3s ease;
    transform: scale(1.09);
}

.card {
    background-color:var(--gradient-second-color);
    color: var(--primary-text-color);
    padding: 10px 20px;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.center-off {
    text-align: left !important; /* Default text alignment */
    display: block !important;   /* Ensures block-level elements do not use flexbox centering */
    justify-content: flex-start !important; /* Align items to the left in flexbox */
    align-items: flex-start !important;     /* Align items to the top in flexbox */
}

.center-text {
    display:block;
    width:100%;
    text-align:center;
    font-size: 1.25em;
    margin:auto;

}

/* Container */
.container {
    min-width: 319px;
    width: 100%;
    max-width: 540px;
    margin: auto;
    padding: 20px;
    background: var(--primary-color);
    border-radius: 32px;
    line-height: 1.5; /* Adjust this value as needed */
    text-align: center;
    box-sizing: border-box;
}
@media (min-width: 768px)  { .container { max-width: 720px;  } }
@media (min-width: 992px)  { .container { max-width: 960px;  } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Narrow modifier: pins the container to the original 699px regardless of
   viewport. Use on focused single-purpose views like login / signup. */
.container.container-narrow,
.container.container-narrow.container-narrow {
    max-width: 699px;
}

.content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 5px;
    padding: 20px;
    width: 100%;
    z-index: 100;
}

.daysofweek {
    display:flex;
}

.disabled-btn, .disabled-btn:hover{
    background-color:var(--disabled-button-color) !important;
    color: var(--disabled-button-text-color) !important;
    cursor: not-allowed !important;
    transform: scale(1.0) !important;
}

.divider {
    display:block;
    max-width: 699px;

}

.email {
    font-size: .75em;
}

.error { color: var(--information-error-color); font-size: 0.9em; }

.footer-content {

    flex: 1; /* Only pushes the footer if needed */
    background-color: var(--secondary-color);

}

/* ------------------------------------------------------------------------
   Site footer
   Clean two-zone layout: a brand block on the left, a sitemap nav with
   columns on the right, and a copyright bar at the bottom.
   ------------------------------------------------------------------------ */
.site-footer {
    display: block;             /* override the legacy `footer { display:flex; ... }` */
    background: var(--secondary-color);
    color: var(--primary-text-color);
    padding: 2rem 1.5rem 1rem;
    margin-top: 2rem;
    border-radius: 12px 12px 0 0;
    text-align: left;
}
.site-footer-inner {
    max-width: 699px;
    margin: 0 auto 1rem;
    padding: 0;
}
.site-footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem 1rem;
    justify-items: start;
    text-align: left;
}
.site-footer-col h5 {
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--secondary-text-color);
}
.site-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer-col li {
    margin: 0 0 0.25rem;
}
/* Doubled .site-footer-col bumps specificity so no other a:hover rule wins. */
.site-footer-col.site-footer-col a,
.site-footer-col.site-footer-col a:link,
.site-footer-col.site-footer-col a:visited {
    color: var(--primary-text-color);
    text-decoration: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 400;
    transition: color 0.15s ease;
}
.site-footer-col.site-footer-col a:hover,
.site-footer-col.site-footer-col a:focus {
    color: var(--primary-text-color);
    text-decoration: underline;
    background: transparent;
    transform: none;
    box-shadow: none;
}
.site-footer-bottom {
    max-width: 699px;
    margin: 0 auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    color: var(--secondary-text-color);
    text-align: center;
}

/* Zoom-context footer (no nav, just contact info) */
.site-footer-zoom {
    display: block;
    text-align: center;
    max-width: 700px;
}
.site-footer-zoom p {
    margin: 0.25rem 0;
    font-size: 0.95rem;
}
.site-footer-zoom a {
    color: #3186F5;
    text-decoration: none;
}
.site-footer-zoom a:hover { text-decoration: underline; }

/* Stack the brand block above the columns on narrow screens */
@media (max-width: 700px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Footer */
footer {
    display:flex;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    background: var(--secondary-color);
    color: var(--primary-text-color);
    margin-top: 20px;
    border-radius: 8px;
    min-width:100vw;
    flex:1;
}

/* Forms */
form {
    max-width: 699px;
    border-radius: 8px;
}

.form-container {
    display: flex !important;
    align-items: center; /* Ensures vertical alignment */
    gap: 10px; /* Space between elements */
    flex-wrap: wrap; /* Prevents breaking on small screens */
}

.form-container form {
    display: flex !important;
    align-items: center; /* Aligns form elements in a row */
}

.form-field{
    display:grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 0;
}
.form-field label {
    text-align: left;
}

/* Green rounded div */
.green-rounded {
    background-color:var(--information-valid-color); /* Lovely green */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Padding for spacing inside the div */
    color: var(--secondary-button-text-color); /* White text color to contrast with green */
    margin-bottom: 20px; /* Space below the div */
    font-family: Arial, sans-serif; /* Font styling */
}

/* Grid Layout */
.grid {
    display: grid;
    gap: 20px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive */
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

h1 {
    color: var(--secondary-text-color);
}

/* original front page */
h2{
    text-align:left;
    display:block;
}

/* Header */
header {
    padding: 20px;
    text-align: center;
    border-radius: 8px 8px 0 0;
}

header h1 {
    font-size: 24px;
}

.heading {
    text-decoration:none;
    display:flex;
}

.hidden {
    display: none;
}

img {
    background:none;
}

input {
    font-size:16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    vertical-align: middle;
}

input[type="checkbox"] {
    transform: scale(1.5); /* Increase size by 1.5x */
    margin: 5px; /* Adjust spacing if needed */
}

input[type="text"] {
    width:100%;
}

input.guest {
    width:100%;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--secondary-button-color);
    outline: none;
}
/* Change the color to black once the user starts typing or on focus */
.input-field:focus,
.input-field:not(:placeholder-shown) {
    color: var(--input-primary-text-color);
}
/* Styling for the placeholder text */
.input-field::placeholder {
    color: var(--input-placeholder-color); /* Placeholder text is grey */
}

.interface {
    display:block;
    display: grid;
    grid-template-columns: 1fr;
    margin: auto;
    max-width: 699px;
    min-width: 200px;
    padding: 16px;
    box-sizing: border-box;
}

label { display: block; margin-top: 10px;  font-weight: bold;}
.label {
    display:block;
    padding: 10px;
    text-align: left;
}


.left {
    display:flex;
    white-space: nowrap;
    text-align:center;
    align-items:center;

}

/* Logo styling */
.logo {
    max-width: 50%;  /* Ensures responsiveness */
    max-height: 80vh; /* Prevents logo from being too tall */
    object-fit: contain; /* Keeps aspect ratio */
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-text-color);
}
/* Logo styling */
.logo_icon {
    max-width: 80%;  /* Ensures responsiveness */
    max-height: 80vh; /* Prevents logo from being too tall */
    object-fit: contain; /* Keeps aspect ratio */
}

.logout-btn {
    background-color:#53627f;
    color: var(--primary-text-color);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.logout-btn:hover {
    background-color:var(--primary-button-hover-color);
    color: var(--primary-link-color);
    transform: scale(1.05);
}

.logout-btn a {
    color:var(--primary-text-color);
}

.logout-btn a:link {
    color:var(--primary-link-color);
}
.logout-btn a:active {
    color:var(--primary-text-color);
}

.logout-btn a:visited {
    color:var(--primary-text-color);
}

/* Desktop Navigation (Default) */
.nav-links {
    display: flex;
    background-color: var(--secondary-color);
    gap: 15px;
}

.nav-links a {
    color: var(--secondary-link-color);
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--secondary-link-color);
    text-decoration: none;
}

/* Mobile Menu Button (Hidden on Desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--secondary-link-color);
    font-size: 1.8rem;
    cursor: pointer;
}

/* Mobile Dropdown (Hidden by Default) */
.mobile-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    right: 20px;
    background: var(--secondary-color);
    width: 200px;
    padding: 10px;
    border-radius: 5px;
}

.mobile-menu a {
    color: var(--primary-link-color);
    text-decoration: none;
    padding: 10px;
    display: block;
}
.meeting-button {
    display:block;
    width:100%;
    text-align:left;
    border:0;
    text-decoration: none;
    background-color: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    cursor: pointer;
    font-size: 16px;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.meeting-button a {
    color:var(--primary-link-color);
}

.meeting-button a:active {
    text-decoration:none;
    color:var(--primary-text-color);
}

.meeting-button a:visited {
    text-decoration:none;
    color:var(--secondary-button-text-color);
}
.meeting-button a:hover {
    text-decoration:none;
    color:var(--secondary-button-text-color);
}
.meeting-button:hover {
    text-decoration:none;
    background-color: var(--primary-button-hover-color);
    color:var(--secondary-button-text-color);
    transform: scale(1.05);
}

.menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px;
    background: none;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    min-width: 300px;
    margin: auto;
    z-index: 100;
    width: 100%;
}


/* Navigation */

nav a {
    color: var(--primary-link-color);
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    transition: 0.3s ease;
    border-radius: 8px;
}

nav a:hover {
    background: #0AB495;
    color: var(--secondary-button-text-color);
}

.profile-icon {
    text-align:center;
    margin:auto;
    max-width:35%;
    max-height:35vh;

}

.privacy-section {
    margin-bottom: 30px;
    text-align:left;
    justify-content: baseline;
}

/* Original home page */
.right {
    display:flex;
    white-space: nowrap;
    text-align:center;
    align-items:center;
}

/* Red rounded div */
.red-rounded {
    background-color: var(--information-error-color); /* A soft, warm red */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Padding for spacing inside the div */
    color: var(--secondary-button-text-color); /* White text color to contrast with red */
    margin-bottom: 20px; /* Space below the div */
    font-family: Arial, sans-serif; /* Font styling */
}

.search-form {
    display: flex !important;
    width:100%;
    gap: 5px; /* Space between input and button */
}

.search-form input {
    padding: 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    flex-grow: 1 !important; /* Allows input to take available space */
    min-width: 150px !important; /* Ensures it doesn’t shrink too small */
}

.search-form button, .logout-btn, .logout-btn:visited {
    padding: 8px 12px;
    border: none;
    background-color: var(--secondary-button-color);
    color:var(--secondary-button-text-color);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap; /* Prevents buttons from breaking */
}

.search-form button:hover, .logout-btn:hover {
    background-color: var(--primary-button-hover-color);
    color: var(--secondary-button-text-color);
}

/* Space between logo and button */
.signin-container {
    margin-top: 20px;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
}

/* Top Bar Styling */
.top-bar {
    background: #CFE8FF;
    color: var(--secondary-text-color);
    padding: 12px 24px;
    width: 100%;
    box-shadow: 0 1px 4px var(--fx-shadow-color);
}

.top-bar .interface {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    grid-template-columns: none;
}

/* Center the search bar between the brand and the auth button */
.top-bar .form-container {
    flex: 1;
    display: flex;
    justify-content: center;
}
.top-bar .form-container .search-form {
    max-width: 480px;
    width: 100%;
}

/* Brand (logo + product name) on the left of the top bar */
.brand,
.brand:visited,
.brand:active,
.brand:hover {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #3186F5;
}
.brand img {
    height: 6rem;
    width: auto;
}
.brand-name,
.brand:visited .brand-name,
.brand:active .brand-name,
.brand:hover .brand-name {
    font-size: 2.75rem;
    font-weight: 300;
    color: #3186F5;
    line-height: 1;
}

/* Sign In / Register button slot in top bar */
.auth-button {
    margin-left: auto;
}
.auth-button a {
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
.auth-button a:hover {
    background: var(--primary-button-hover-color);
    color: var(--secondary-button-text-color);
}

/* Blue site nav bar below the top bar */
.nav-bar {
    background: var(--primary-button-color);
    color: var(--secondary-button-text-color);
    box-shadow: 0 1px 4px var(--fx-shadow-color);
}
.nav-bar .interface {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    padding: 0.85rem 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    grid-template-columns: none;
}
.nav-bar a {
    color: var(--secondary-button-text-color);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
}
.nav-bar a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Pushes the dark/light theme toggle to the far right of the nav bar */
.nav-bar-settings {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.nav-bar-settings .search-form {
    margin: 0;
    width: auto;
}
.nav-bar-settings button.simple-btn {
    background: transparent;
    border: 1px solid var(--secondary-button-text-color);
    color: var(--secondary-button-text-color);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: none;
}
.nav-bar-settings button.simple-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: none;
}

/* === Landing page === */

.landing-container {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.landing-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.landing-card {
    background: rgba(234, 234, 234, 0.5);
    color: var(--primary-text-color);
    padding: 1rem;
    border-radius: 12px;
}
.landing-card h2,
.landing-card h3 {
    color: var(--primary-text-color);
    margin: 0 0 0.5rem 0;
}
.landing-card h3 + .topic-list {
    margin-bottom: 1rem;
}

.topic-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.topic-link,
.topic-link:visited,
.topic-link:active {
    display: block;
    background: var(--gradient-first-color);
    color: var(--primary-text-color);
    padding: 0.85rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1em;
    transform-origin: center;
    transition: transform 0.15s ease;
}
.topic-link:hover {
    background: var(--gradient-first-color);
    color: var(--primary-text-color);
    transform: scale(1.04);
}

.join-discussions,
.join-discussions:link,
.join-discussions:visited,
.join-discussions:active {
    display: block;
    width: 100%;
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    padding: 0.65rem 1rem;
    border-radius: 8px;
    text-align: center;
    margin-top: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.join-discussions:hover {
    background: var(--primary-button-hover-color);
    color: var(--secondary-button-text-color);
}

.landing-main h2 {
    margin: 0 0 1rem 0;
    text-align: left;
}

.landing-article {
    background: rgba(255, 255, 255, 0.5);
    padding: 1.25rem;
    border-radius: 8px;
    margin: 2em 0;
}
.landing-article-banner {
    background: rgba(212, 212, 212, 0.5);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.landing-article h3 {
    margin: 1em 0;
}
.landing-article-meta {
    color: #555;
    font-size: 0.8em;
    font-weight: normal;
    margin-left: 0.5rem;
}
.landing-article-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.landing-article-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.continue-reading {
    color: var(--secondary-button-color);
    font-weight: 500;
}

/* Newsletter signup */
.landing-newsletter form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: none;
}
.landing-newsletter .name-email {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.landing-newsletter input[type="text"],
.landing-newsletter input[type="email"] {
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #c8d0e0;
    background: var(--gradient-first-color);
    width: 100%;
}
.landing-newsletter textarea {
    padding: 0.6rem;
    border-radius: 12px;
    border: 1px solid #c8d0e0;
    background: var(--gradient-first-color);
    min-height: 6em;
    resize: vertical;
    width: 100%;
}
.landing-newsletter .disclaimer {
    font-size: 0.7em;
    color: #555;
    margin: 0;
    line-height: 1.3;
}
.landing-newsletter button {
    align-self: flex-end;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
}

/* Article hero image: fits the available width of its container without
   overflowing or scaling above its natural size. */
.hero-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.body-content p {
    font-size: 0.85em;
    padding: 4px;
}
.body-content h3 {
    margin: 1em 0;
}

.more-link {
    font-size: 1.5em;
}

/* Newsletter status banner (shown when validation/errors flow back) */
.newsletter-status {
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    margin: 0 0 0.75rem 0;
    font-size: 0.9em;
    line-height: 1.3;
}
.newsletter-status-ok {
    background: rgba(0, 187, 78, 0.15);
    color: #006b2e;
    border: 1px solid rgba(0, 187, 78, 0.4);
}
.newsletter-status-error {
    background: rgba(211, 0, 18, 0.15);
    color: #8b000a;
    border: 1px solid rgba(211, 0, 18, 0.4);
}

/* Successful signup: replaces the form */
.newsletter-success {
    text-align: center;
    padding: 1.5rem 1rem;
}
.newsletter-success h3 {
    color: #006b2e;
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
}
.newsletter-success p {
    margin: 0 0 1rem 0;
}
.newsletter-success-link,
.newsletter-success-link:visited,
.newsletter-success-link:active,
.newsletter-success-link:hover {
    color: var(--secondary-button-color);
    text-decoration: underline;
    font-size: 0.9em;
}

/* Stack to single column on smaller viewports */
@media (max-width: 1024px) {
    .landing-container {
        grid-template-columns: 1fr;
    }
    .landing-article-grid {
        grid-template-columns: 1fr;
    }
}

textarea, select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

.text_link a{
    text-decoration:none;
    color:var(--primary-link-color);
}

.text_link a:visited{
    text-decoration:none;
    color:var(--primary-text-color);
}


.text_link a:active{
    text-decoration:none;
    color:var(--primary-text-color);
}

.text_link a:hover{
    text-decoration:none;
    color:var(--primary-link-color);
}

.terms-section {
    margin-bottom: 30px;
    text-align:left;
    justify-content: baseline;
}
.user_name {
    display: flex;
    margin:auto;
    padding:10px;
    max-width: 500px;
    min-width: 200px;
}

.wrapper {
    position:relative;
    display:flex;
    flex-direction: column;
    margin:0;
}

.zoom-btn {
    background-color: var(--secondary-button-color);
    min-width:200px;
}

.zoom-text {
    min-width:200px;
}

@media (max-width: 599px) {
    .right {
        margin-left:50px;
    }
    .mobile-hidden {
      display: none;
    }
  }

/* ===========================================================================
   Meeting Dashboard (?page=home)
   Two-column layout: persistent sidebar on the left, meeting detail on the
   right. Below 800px the sidebar collapses to the top, then the detail.
   =========================================================================== */
.dashboard {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    max-width: 1140px;
    margin: 1rem auto;
    padding: 0 1rem;
    align-items: start;
}
.dashboard-error-wrap {
    max-width: 1140px;
    margin: 1rem auto 0;
    padding: 0 1rem;
}
.dashboard-error {
    background: rgba(211, 0, 18, 0.10);
    color: #8b000a;
    border: 1px solid rgba(211, 0, 18, 0.4);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}
.dashboard-success {
    background: rgba(0, 187, 78, 0.10);
    color: #006b2e;
    border: 1px solid rgba(0, 187, 78, 0.4);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}
@media (max-width: 800px) {
    .dashboard {
        grid-template-columns: 1fr;
    }
}

.dashboard-sidebar {
    background: #ffffff;
    border: 1px solid #d6e1ef;
    border-radius: 10px;
    padding: 1rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.dashboard-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eef2f8;
}
.dashboard-sidebar-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text-color);
}
/* The Events header sits below the meetings list — give it some breathing
   room and its own divider so it's visually distinct. */
.dashboard-sidebar-header-events {
    margin-top: 1.5rem;
}
.dashboard-link-meta {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 400;
    white-space: nowrap;
}
.dashboard-new-btn,
.dashboard-new-btn:link,
.dashboard-new-btn:visited {
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
}
.dashboard-new-btn:hover {
    background: var(--primary-button-hover-color);
    color: var(--secondary-button-text-color);
    text-decoration: none;
}

.dashboard-section {
    margin: 0 0 1rem;
}
.dashboard-section h3 {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5a6470;
    margin: 0 0 0.4rem;
}
.dashboard-section-count {
    color: #94a3b8;
    font-weight: 400;
    margin-left: 0.25rem;
}
.dashboard-section-empty {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8;
    font-style: italic;
}

.dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dashboard-list li {
    margin: 0;
}
.dashboard-link,
.dashboard-link:link,
.dashboard-link:visited {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    color: var(--primary-text-color);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
    word-wrap: break-word;
}
.dashboard-link-title {
    /* The meeting / event name itself */
    word-break: break-word;
}
.dashboard-link-tags {
    /* Row of pills / badges / dates beneath the title */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.dashboard-link:hover {
    background: #f4f7fc;
    text-decoration: none;
}
.dashboard-link.is-active {
    background: #e3ecfa;
    color: #2a5fb0;
    font-weight: 500;
}

.mod-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #fef3c7;
    color: #92400e;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* ----- Right pane: empty state ----- */
.dashboard-main {
    background: #ffffff;
    border: 1px solid #d6e1ef;
    border-radius: 10px;
    padding: 1.5rem;
}
.dashboard-empty {
    text-align: center;
    padding: 2rem 1rem;
}
.dashboard-empty h2 {
    margin: 0 0 0.75rem;
    font-weight: 500;
    color: var(--primary-text-color);
}
.dashboard-empty p {
    color: #5a6470;
    margin: 0 0 0.5rem;
}
.dashboard-empty-tip {
    font-size: 0.9rem;
    font-style: italic;
}

/* ----- Right pane: selected meeting detail ----- */
.meeting-detail h1 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--primary-text-color);
}
/* Role badge in the detail-pane header — small pill that distinguishes
   the viewer's privilege level for THIS meeting/event. SUPER, OWNER, and
   MOD each get their own color so a super never sees a "MOD" label. */
.role-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.role-badge-super { background: #fde68a; color: #78350f; }
.role-badge-owner { background: #d1fae5; color: #065f46; }
.role-badge-mod   { background: #dbeafe; color: #1e3a8a; }
.meeting-detail h2 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6470;
}
.meeting-meta {
    margin: 0 0 1rem;
    color: #5a6470;
    font-size: 0.9rem;
}
.meeting-meta-small {
    color: #94a3b8;
    font-size: 0.85rem;
}

.meeting-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eef2f8;
}
.meeting-btn,
.meeting-btn:link,
.meeting-btn:visited {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border-radius: 6px;
    background: #eef2f8;
    color: #2a3340;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid #d6e1ef;
}
.meeting-btn:hover {
    background: #dde6f3;
    text-decoration: none;
}
.meeting-btn-primary,
.meeting-btn-primary:link,
.meeting-btn-primary:visited {
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    border-color: transparent;
    font-weight: 500;
}
.meeting-btn-primary:hover {
    background: var(--primary-button-hover-color);
    color: var(--secondary-button-text-color);
}

/* Danger variant for Delete actions */
.meeting-btn-danger,
.meeting-btn-danger:link,
.meeting-btn-danger:visited {
    background: transparent;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.meeting-btn-danger:hover {
    background: #fee2e2;
    color: #991b1b;
    transform: none;
}
/* The hidden form that backs the Delete anchor — the anchor click submits
   it via JS, but we don't want the form itself to take any layout space. */
.meeting-delete-form {
    display: none;
}
/* The delete form is invisible in the flex layout so its button becomes a
   direct sibling of the other action buttons (matches their height etc.). */
.meeting-delete-form {
    display: contents;
    margin: 0;
}

.meeting-section {
    margin: 0 0 1.25rem;
}
.meeting-section p {
    margin: 0 0 0.4rem;
    line-height: 1.5;
    color: var(--primary-text-color);
}
.meeting-subsection-title {
    margin: 1rem 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6470;
}
.meeting-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
}
.meeting-events-header .meeting-subsection-title {
    margin: 0;
}
.meeting-related-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.meeting-related-events li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}
.meeting-related-events a {
    color: var(--secondary-button-color);
    text-decoration: none;
}
.meeting-related-events a:hover {
    text-decoration: underline;
}

/* "When" list with one row per schedule (multiple records sharing a name) */
.meeting-when-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.meeting-when {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}
.meeting-when.is-current {
    background: #f4f7fc;
}
.meeting-when-text {
    flex: 1;
    color: var(--primary-text-color);
}
/* Click-to-select schedule rows: keep them looking like body text, not links. */
.meeting-when-link,
.meeting-when-link:link,
.meeting-when-link:visited,
.meeting-when-link:hover,
.meeting-when-link:active {
    color: var(--primary-text-color);
    text-decoration: none;
}
.meeting-when-link:hover {
    text-decoration: underline;
}
.meeting-when-actions {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
}
.meeting-when-actions a,
.meeting-when-actions a:link,
.meeting-when-actions a:visited {
    color: var(--secondary-text-color);
    text-decoration: none;
}
.meeting-when-actions a:hover {
    text-decoration: underline;
}
.meeting-when-delete {
    color: #b91c1c !important;
}
.meeting-when-add {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.meeting-detail-footer {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eef2f8;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Edit mode: the form_edit_meeting view wraps itself in a .container with
   its own background, padding, and centering. Neutralize those when nested
   inside the dashboard pane so the form blends into our card. */
.dashboard-main > .buffer { display: none; }
.dashboard-main .container,
.dashboard-main .interface {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    min-width: 0;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
}
.dashboard-edit-back {
    margin: 0 0 1rem;
    font-size: 0.9rem;
}
.dashboard-edit-back a {
    color: #5a6470;
    text-decoration: none;
}
.dashboard-edit-back a:hover {
    color: var(--primary-text-color);
    text-decoration: underline;
}

/* ---- Edit form rendered inside .dashboard-main ----
   The form's existing markup uses .form-field, .content, .center-off, etc.
   Style those scoped to the dashboard pane so it matches the detail pane
   aesthetic (small uppercase section headers, clean inputs, paired layout). */

.dashboard-main form h1 {
    margin: 0 0 1.25rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--primary-text-color);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eef2f8;
}
.dashboard-main form .form-field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
    margin: 0 0 0.85rem;
    text-align: left;
}
.dashboard-main form .form-field label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6470;
    margin: 0;
    text-align: left;
}
.dashboard-main form .form-field .left,
.dashboard-main form .form-field .right {
    width: auto;
    text-align: left;
}
.dashboard-main form input[type="text"],
.dashboard-main form input[type="email"],
.dashboard-main form input[type="tel"],
.dashboard-main form input[type="number"],
.dashboard-main form input[type="url"],
.dashboard-main form input[type="date"],
.dashboard-main form input[type="time"],
.dashboard-main form select,
.dashboard-main form textarea {
    padding: 0.5rem 0.7rem;
    border: 1px solid #c8d0e0;
    border-radius: 6px;
    background: #fbfcff;
    font: inherit;
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
    color: var(--primary-text-color);
}
.dashboard-main form textarea {
    resize: vertical;
    min-height: 4em;
}
.dashboard-main form input:focus,
.dashboard-main form select:focus,
.dashboard-main form textarea:focus {
    border-color: var(--secondary-button-color);
    outline: none;
}

/* Checkbox rows: small label-with-input style, inline */
.dashboard-main form input[type="checkbox"] {
    margin-right: 0.4rem;
    transform: translateY(1px);
}
.dashboard-main form .form-field label[for="online"],
.dashboard-main form .form-field label[for="in_person"],
.dashboard-main form .form-field label[for="hol"],
.dashboard-main form .form-field label[for="open"],
.dashboard-main form .form-field label[for$="mon"],
.dashboard-main form .form-field label[for$="tue"],
.dashboard-main form .form-field label[for$="wed"],
.dashboard-main form .form-field label[for$="thu"],
.dashboard-main form .form-field label[for$="fri"],
.dashboard-main form .form-field label[for$="sat"],
.dashboard-main form .form-field label[for$="sun"],
.dashboard-main form label.daysofweek,
.dashboard-main form .content > div > label {
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--primary-text-color);
    cursor: pointer;
}

/* Create form uses h2 for "Days of the week:" and "Other:" section headers */
.dashboard-main form h2 {
    margin: 1rem 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6470;
}
.dashboard-main form .label {
    text-align: left;
}
/* Days-of-week grid: 4 columns instead of 2, since each label is short */
.dashboard-main form > .content:has(label.daysofweek) {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.dashboard-form-title {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--primary-text-color);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #eef2f8;
}

/* Search result list — matches the meeting-detail aesthetic */
.search-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.search-result {
    margin: 0;
}
.search-result-link,
.search-result-link:link,
.search-result-link:visited {
    display: block;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d6e1ef;
    border-radius: 8px;
    text-decoration: none;
    color: var(--primary-text-color);
    background: #fbfcff;
}
.search-result-link:hover {
    background: #f1f5fc;
    border-color: #b6c8e2;
    text-decoration: none;
}
.search-result-title {
    font-weight: 500;
    color: var(--primary-text-color);
}
.search-result-meta {
    font-size: 0.82rem;
    color: #5a6470;
    margin-top: 0.15rem;
}

/* Two-up layout for the Online / In Person row and the Start / End time row */
.dashboard-main form .content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0 0 0.85rem;
    padding: 0;
    width: 100%;
}
.dashboard-main form .content .form-field {
    margin: 0;
}

/* Submit button: primary action, left-aligned, matches .meeting-btn-primary */
.dashboard-main form button[type="submit"] {
    display: inline-block;
    padding: 0.55rem 1.25rem;
    border-radius: 6px;
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    border: 0;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 0.5rem;
    box-shadow: none;
}
.dashboard-main form button[type="submit"]:hover {
    background: var(--primary-button-hover-color);
    transform: none;
}

/* ===========================================================================
   Wizard — multi-step meeting / event creation
   =========================================================================== */

/* Progress bar */
.wizard-progress {
    margin: 0 0 1.5rem;
}
.wizard-progress-track {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.wizard-progress-fill {
    height: 100%;
    background: var(--secondary-button-color);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 20%;
}
.wizard-steps-label {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #5a6470;
    text-align: right;
}

/* Steps: only show the active one */
.wizard-step {
    display: none;
}
.wizard-step.is-active {
    display: block;
}

/* Type selection cards */
.wizard-type-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1rem 0 0;
}
.wizard-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 2px solid #d6e1ef;
    border-radius: 10px;
    background: #fbfcff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font: inherit;
    color: var(--primary-text-color);
    text-align: center;
}
.wizard-type-card:hover {
    border-color: var(--secondary-button-color);
    background: #f0f6ff;
    transform: translateY(-1px);
}
.wizard-type-card.is-selected {
    border-color: var(--secondary-button-color);
    background: #e8f0fe;
    box-shadow: 0 0 0 3px rgba(49, 134, 245, 0.15);
}
.wizard-type-icon {
    font-size: 2rem;
    line-height: 1;
}
.wizard-type-label {
    font-size: 1.1rem;
    font-weight: 600;
}
.wizard-type-desc {
    font-size: 0.82rem;
    color: #5a6470;
    line-height: 1.35;
}

/* Nav buttons */
.wizard-nav {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eef2f8;
}
.wizard-btn {
    padding: 0.55rem 1.25rem;
    border-radius: 6px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border: 0;
}
.wizard-btn-back {
    background: transparent;
    color: #5a6470;
    border: 1px solid #c8d0e0;
}
.wizard-btn-back:hover {
    background: #f5f7fa;
    color: var(--primary-text-color);
}
.wizard-btn-next {
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
}
.wizard-btn-next:hover {
    background: var(--primary-button-hover-color);
}
.wizard-btn-create {
    background: var(--information-valid-color);
    color: #fff;
}
.wizard-btn-create:hover {
    filter: brightness(0.9);
}

/* Review summary */
.wizard-review {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.wizard-review h2 {
    margin: 0 0 0.6rem;
}
.wizard-review-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    font-size: 0.9rem;
}
.wizard-review-list dt {
    font-weight: 600;
    color: #5a6470;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding-top: 0.15rem;
}
.wizard-review-list dd {
    margin: 0;
    color: var(--primary-text-color);
}

/* Conditional visibility (toggled by JS) */
.wizard-meeting-only,
.wizard-event-only {
    display: none;
}

/* Post-create automation prompt banner */
.automation-prompt {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: #e8f5e9;
    border: 1px solid #a8d8ad;
    border-left: 4px solid var(--information-valid-color);
    border-radius: 6px;
    color: var(--primary-text-color);
}
.automation-prompt-text {
    flex: 1 1 60%;
    font-size: 0.95rem;
}
.automation-prompt-actions {
    display: flex;
    gap: 0.5rem;
}
.automation-prompt-btn,
.automation-prompt-btn:link,
.automation-prompt-btn:visited {
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
}
.automation-prompt-yes,
.automation-prompt-yes:link,
.automation-prompt-yes:visited {
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
}
.automation-prompt-yes:hover {
    background: var(--primary-button-hover-color);
}
.automation-prompt-no,
.automation-prompt-no:link,
.automation-prompt-no:visited {
    background: transparent;
    color: #5a6470;
    border: 1px solid #c8d0e0;
}
.automation-prompt-no:hover {
    background: #f5f7fa;
    color: var(--primary-text-color);
}

/* Automation wizard: step 3 "more messages?" actions */
.automation-extra {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.automation-extra-btn,
.automation-extra-btn:link,
.automation-extra-btn:visited {
    text-decoration: none;
}
.automation-extra-skip {
    /* visually distinct from the primary "open editor" CTA */
    border: 1px solid #c8d0e0;
}

/* Automation wizard step helpers */
.automation-step-help {
    margin: 0 0 1rem;
    color: #5a6470;
    font-size: 0.9rem;
}
.automation-inline {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.4rem;
    margin-left: 1.7rem;
    font-size: 0.88rem;
    color: #5a6470;
}
.automation-inline input[type="number"] {
    width: 5rem;
}

/* Warning-style inline pill for short cautionary notes under form fields */
.warning-pill {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.25rem 0.6rem;
    background: #fff8e1;
    border: 1px solid #f0d674;
    border-left: 3px solid #e0a800;
    border-radius: 999px;
    font-size: 0.75rem;
    color: #5a4a10;
    line-height: 1.3;
}

/* Inline date input (e.g. wizard "First occurrence"). The parent
   .form-field is a single-column grid, so a plain width override
   doesn't shrink the input. justify-self: start collapses it to its
   content width. Background / border / color come from the broader
   .dashboard-main form input[type="date"] rule above so dark theme
   inherits cleanly. */
.dashboard-main form input[type="date"].wiz-inline-date {
    width: auto;
    max-width: max-content;
    justify-self: start;
}

/* Day-of-week pill toggle row */
.day-toggles {
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    margin: 0.5rem 0 0.25rem;
}
.day-toggle {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.55rem 0.4rem;
    border: 1px solid #c8d0e0;
    border-radius: 999px;
    background: #fbfcff;
    color: var(--primary-text-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.day-toggle input { display: none; }
.day-toggle:hover {
    border-color: var(--secondary-button-color);
    background: #f0f6ff;
}
.day-toggle:has(input:checked) {
    background: var(--secondary-button-color);
    border-color: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
}

/* Inline step error */
.wizard-step-error {
    margin-top: 0.85rem;
    padding: 0.6rem 0.8rem;
    background: #fde8ea;
    border: 1px solid #f5b5bc;
    border-left: 4px solid var(--information-error-color);
    border-radius: 6px;
    color: #8a1d27;
    font-size: 0.88rem;
}

/* Long-meeting hint inline panel */
.wizard-hint {
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    background: #fff8e1;
    border: 1px solid #f0d674;
    border-left: 4px solid #e0a800;
    border-radius: 6px;
    color: var(--primary-text-color);
}
.wizard-hint p {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
}
.wizard-hint-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.wizard-hint-actions .wizard-btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}
.wizard-hint-suppress {
    display: block;
    font-size: 0.82rem;
    color: #5a6470;
    cursor: pointer;
}
.wizard-hint-suppress input {
    margin-right: 0.35rem;
}

/* Mobile: stack type cards */
@media (max-width: 600px) {
    .wizard-type-cards {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
   Forum module
   Used by views in /forum/src/Views/ rendered through ?page=support.
   Override the centered-text default that .container imposes, and lay out
   posts as cards instead of bullets.
   =========================================================================== */
.forum {
    text-align: left;
    max-width: 920px;
    margin: 0 auto;
    padding: 0.5rem 0.25rem 1.5rem;
}
.forum h2 {
    margin: 0.25rem 0 1rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--primary-text-color);
}
.forum h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 0.6rem;
}
/* Forum-specific link color: brand blue, with a darker hover and a subtle
   dimming on visited so users can still tell what they've read without the
   link going washed-out. */
.forum a,
.forum a:link,
.forum a:active {
    color: #3186F5;
    text-decoration: none;
    font-weight: 500;
}
.forum a:visited {
    color: #2769c2;
}
.forum a:hover {
    color: #1f5cae;
    text-decoration: underline;
}
/* Crumbs and post-action links sit at body-text weight, not bold */
.forum-crumbs a,
.forum-post-actions a,
.forum-post-actions .link-button,
.forum-cancel {
    font-weight: 400;
}

/* Breadcrumb trail above the page title */
.forum-crumbs {
    font-size: 0.85rem;
    color: #5a6470;
    margin: 0 0 0.5rem;
}
.forum-crumbs a {
    color: var(--primary-link-color);
    text-decoration: none;
}

/* Tag pill for Sticky / Locked badges */
.forum-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #e3ecfa;
    color: #2a5fb0;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-right: 0.35rem;
}

/* ----- Index: sectioned category lists ----- */
.forum-section {
    margin: 0 0 1.25rem;
}
.forum-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5a6470;
    margin: 0 0 0.45rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #d6e1ef;
}
.forum-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.forum-category {
    background: #ffffff;
    border: 1px solid #d6e1ef;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}
.forum-category-link {
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
}
.forum-category-desc {
    margin: 0.25rem 0 0;
    color: #5a6470;
    font-size: 0.9rem;
}

/* ----- Category: thread table ----- */
.forum-actions {
    margin: 0 0 1rem;
}
/* Match .auth-button a — same padding, radius, weight, color variables */
.forum-button,
.forum a.forum-button,
.forum a.forum-button:link,
.forum a.forum-button:visited {
    display: inline-block;
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
.forum-button:hover,
.forum a.forum-button:hover {
    background: var(--primary-button-hover-color);
    color: var(--secondary-button-text-color);
    text-decoration: none;
}

.forum-thread-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #d6e1ef;
    border-radius: 10px;
    overflow: hidden;
}
.forum-thread-table th,
.forum-thread-table td {
    text-align: left;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #eef2f8;
    font-size: 0.92rem;
}
.forum-thread-table th {
    background: #f4f7fc;
    font-weight: 500;
    color: #5a6470;
}
.forum-thread-table tr:last-child td {
    border-bottom: 0;
}
.forum-thread-table .is-sticky td {
    background: #fbfcff;
}
.forum-thread-table a {
    text-decoration: none;
}

/* ----- Thread page: posts ----- */
.forum-post-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.forum-post {
    background: #ffffff;
    border: 1px solid #d6e1ef;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
}
.forum-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid #eef2f8;
    font-size: 0.85rem;
}
.forum-post-author {
    font-weight: 600;
    color: var(--primary-text-color);
    font-size: 0.95rem;
}
.forum-post-time,
.forum-post-edited {
    color: #5a6470;
}
.forum-post-body {
    color: var(--primary-text-color);
    line-height: 1.55;
    font-size: 0.95rem;
    word-wrap: break-word;
}
/* Rendered formatting inside post bodies */
.forum-post-body p {
    margin: 0 0 0.75rem;
}
.forum-post-body p:last-child {
    margin-bottom: 0;
}
.forum-post-body strong { font-weight: 600; }
.forum-post-body em     { font-style: italic; }
.forum-post-body code {
    background: #f1f5f9;
    color: #1f2937;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.88em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.forum-post-body pre.forum-code {
    background: #f1f5f9;
    color: #1f2937;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 0.75rem;
    font-size: 0.88em;
    line-height: 1.5;
}
.forum-post-body pre.forum-code code {
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.forum-post-body ul.forum-list,
.forum-post-body ol.forum-list {
    margin: 0 0 0.75rem 1.25rem;
    padding: 0;
}
.forum-post-body ul.forum-list li,
.forum-post-body ol.forum-list li {
    margin: 0.15rem 0;
}
.forum-post-body blockquote.forum-quote {
    border-left: 3px solid #cbd5e1;
    padding: 0.25rem 0.75rem;
    margin: 0 0 0.75rem;
    color: #475467;
    font-style: italic;
}
.forum-post-body img.forum-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5rem 0;
}
/* Markdown headings get bigger sizes and a clear breathing gap above so
   they read like real section breaks, not inline emphasis. */
.forum-post-body h1.forum-h1 { font-size: 1.85rem; font-weight: 600; margin: 1.75rem 0 0.5rem; line-height: 1.2; }
.forum-post-body h2.forum-h2 { font-size: 1.45rem; font-weight: 600; margin: 1.5rem 0 0.5rem;  line-height: 1.25; }
.forum-post-body h3.forum-h3 { font-size: 1.2rem;  font-weight: 600; margin: 1.25rem 0 0.4rem; line-height: 1.3; }
.forum-post-body h1.forum-h1:first-child,
.forum-post-body h2.forum-h2:first-child,
.forum-post-body h3.forum-h3:first-child { margin-top: 0; }

/* Updates page: keep header content (badge, title, posted date) all
   left-aligned so the date doesn't drift to the right under the title. */
.update-detail-header,
.update-detail-header h2,
.update-detail-header .meeting-meta-small {
    text-align: left;
}

/* Updates page: auto-generated table of contents above the body. */
.update-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.update-toc li {
    margin: 0.2rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
}
.update-toc-l2 { padding-left: 1rem; }
.update-toc-l3 { padding-left: 2rem; font-size: 0.9rem; }
.update-toc a {
    color: var(--secondary-text-color);
    text-decoration: none;
}
.update-toc a:hover {
    text-decoration: underline;
}
/* Anchor offset so jumping to a heading doesn't bury it under any
   sticky header that may exist now or later. */
.forum-post-body :is(h1, h2, h3)[id] { scroll-margin-top: 1rem; }

/* Formatting cheat sheet under each post-body textarea */
.forum-format-help {
    font-size: 0.82rem;
    color: #5a6470;
    margin-top: 0.4rem;
}
.forum-format-help summary {
    cursor: pointer;
    color: #3186F5;
    user-select: none;
}
.forum-format-help summary:hover { text-decoration: underline; }
.forum-format-help ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: #f4f7fc;
    border: 1px solid #d6e1ef;
    border-radius: 6px;
}
.forum-format-help li { margin: 0.2rem 0; }
.forum-format-help code {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}
.forum-format-note {
    margin: 0.4rem 0 0;
    color: #5a6470;
    font-style: italic;
}
.forum-post-actions {
    margin-top: 0.6rem;
    text-align: right;
    font-size: 0.85rem;
}
.forum-post-actions a,
.forum-post-actions .link-button {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 0.85rem;
    color: var(--primary-link-color);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
}
.forum-post-actions a:hover,
.forum-post-actions .link-button:hover {
    text-decoration: underline;
}

/* Mod bar (Lock / Pin / Delete thread) — small, secondary, right-aligned */
.forum-mod-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    margin: 0 0 1rem;
}
.forum-mod-bar form {
    margin: 0;
}
.forum-mod-bar button {
    background: #eef2f8;
    color: #2a3340;
    border: 1px solid #d6e1ef;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.forum-mod-bar button:hover {
    background: #dde6f3;
}

.forum-locked-note {
    text-align: center;
    color: #5a6470;
    font-style: italic;
    background: #f4f7fc;
    border: 1px dashed #c8d0e0;
    border-radius: 8px;
    padding: 0.75rem;
    margin: 1rem 0 0;
}

/* ----- Reply / new-thread / edit-post forms ----- */
.forum-reply-form,
.forum-new-thread form,
.forum-edit-post form {
    background: #ffffff;
    border: 1px solid #d6e1ef;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.forum-reply-form h3 {
    margin: 0 0 0.25rem;
    text-align: left;
}
.forum-reply-form textarea,
.forum-new-thread textarea,
.forum-edit-post textarea,
.forum-new-thread input[type="text"] {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid #c8d0e0;
    border-radius: 8px;
    font: inherit;
    font-size: 0.95rem;
    resize: vertical;
    background: #fbfcff;
}
.forum-reply-form button[type="submit"],
.forum-new-thread button[type="submit"],
.forum-edit-post button[type="submit"] {
    align-self: flex-start;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    background: var(--primary-button-color, #3186F5);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 0.9rem;
}
.forum-cancel {
    align-self: flex-start;
    margin-top: -0.25rem;
    font-size: 0.85rem;
    color: #5a6470;
    text-decoration: none;
}
.forum-cancel:hover {
    text-decoration: underline;
}

.topic-empty {
    color: #5a6470;
    font-style: italic;
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

/* =====================================================================
   Verifications page (?page=verifications)
   Renders inside .dashboard-main, replacing the right-pane content with
   a table of the user's receipts. Status badges mirror the .role-badge
   pill convention used in the meeting detail header.
   ===================================================================== */
.verifications-page h1.dashboard-form-title {
    margin: 0 0 1rem;
}
.verifications-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.verifications-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid #d6e1ef;
    color: #5a6470;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.verifications-table tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #eef2f8;
    vertical-align: middle;
    color: var(--primary-text-color);
}
.verifications-table tbody tr:last-child td {
    border-bottom: none;
}
.verifications-row:hover td {
    background: #f4f7fc;
}
.verifications-row-expired td,
.verifications-row-invalid td {
    color: #94a3b8;
}

/* Verification request page (?page=verification) — When/Format/Location/
   Zoom/Contact details rendered as a definition list under the parent name. */
.verification-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 1rem 0 0;
    text-align: left;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.verification-details dt {
    color: #5a6470;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: start;
}
.verification-details dd {
    margin: 0;
    color: var(--primary-text-color);
    word-break: break-word;
}
.verification-details dd a {
    color: var(--secondary-button-color);
    text-decoration: none;
}
.verification-details dd a:hover {
    text-decoration: underline;
}

/* Kind pill (Meeting / Event) in the Type column */
.kind-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
.kind-meeting { background: #dbeafe; color: #1e3a8a; }
.kind-event   { background: #ede9fe; color: #5b21b6; }

/* Status pill — same shape as .role-badge */
.status-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
.status-active  { background: #d1fae5; color: #065f46; }
.status-expired { background: #fde68a; color: #78350f; }
.status-invalid { background: #e2e8f0; color: #475569; }

/* Actions column: link + (optional) re-issue form on the same row.
   Stay as a normal <td> so the cell honors the table's vertical-align:middle.
   Each action is inline-block so they line up cleanly with the row's text. */
.verifications-actions {
    white-space: nowrap;
}
.verifications-actions > * {
    vertical-align: middle;
}
.verifications-actions .action-link {
    display: inline-block;
    color: var(--secondary-button-color);
    text-decoration: none;
    font-weight: 500;
    margin-right: 0.6rem;
}
.verifications-actions .action-link:hover {
    text-decoration: underline;
}
.verifications-actions .inline-form {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.verifications-actions button[type="submit"] {
    background: var(--secondary-button-color);
    color: var(--secondary-button-text-color);
    border: none;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.verifications-actions button[type="submit"]:hover {
    background: var(--primary-button-hover-color);
}
.verifications-actions span.muted {
    display: inline-block;
    font-size: 0.78rem;
    color: #94a3b8;
    font-style: italic;
}

/* ===========================================================================
   Organiser verification activity chart
   Shown in _meeting_admin.php and _event_admin.php
   =========================================================================== */

.org-stats-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: var(--primary-text-color);
}
.org-stats-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6470;
}
.org-stats-controls select,
.org-stats-controls input[type="datetime-local"] {
    font-size: 0.82rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: var(--input-background-color);
    color: var(--input-primary-text-color);
    font-family: inherit;
}
.org-refresh-btn {
    align-self: flex-end;
}
.org-summary-strip {
    display: flex;
    gap: 0.6rem;
    margin: 0 0 0.65rem;
    flex-wrap: wrap;
}
.org-summary-card {
    background: var(--secondary-color);
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    min-width: 130px;
}
.org-summary-card .label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary-text-color);
    display: block;
}
.org-summary-card .value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary-text-color);
    display: block;
}
.org-stats-chart-card {
    background: var(--primary-color);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem;
    position: relative;
}
.org-stats-chart-card svg {
    width: 100%;
    height: auto;
    display: block;
}
.org-stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.org-stats-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
    color: var(--primary-text-color);
    transition: opacity 0.1s;
}
.org-stats-legend-item.off {
    opacity: 0.35;
}
.org-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.org-stats-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    color: var(--secondary-text-color);
    font-size: 0.85rem;
    font-style: italic;
}
.org-stats-error {
    color: #dc2626;
    font-size: 0.82rem;
    margin: 0 0 0.4rem;
}
.org-copy-toast {
    position: absolute;
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
    z-index: 10;
}
.org-copy-toast.show {
    opacity: 1;
}