/* =========================
   Global typography for form labels + controls
   ========================= */
:root{
    --form-font-size: 0.9rem;   /* change once, affects all templates */
}

label,
input,
select,
textarea,
form button {
    font-size: var(--form-font-size);
}

:root{
    --table-font-size: 0.85rem;   /* change once for all table grids */
}

table{
    font-size: var(--table-font-size);
}

/* Ensure cells inherit consistently */
table th,
table td{
    font-size: inherit;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
      font-family: sans-serif;
      margin: 20px;
      background: #f5f5f5;
    }
/*body {
    min-height: 100vh;
    background-color: f5f5f5;
    color: whitesmoke;
    font-size: 3rem;
}*/

nav {
    padding: 0.5rem;
    background-color: #d6d6d6;
    color: white;
    font-size: 1.0rem;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

main {
    padding: 1rem;
}

section {
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

h1,
h2 {
    font-size: 1.5rem;
}

p {
    font-size: 1rem;
}

a:hover {
    opacity: .85;
}

.banner {
    display: block;
    width: 100%;
    max-width: 800px;
}

.form-with-validation {
    font-size: 1rem;
    /*padding: 1rem;*/
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.form-with-validation div {
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
}

.form-with-validation input {
    padding: 0.25rem;
    max-width: 300px;
}

.form-submit {
    padding: 0.5rem;
    border-radius: 10px;
    width: 125px;
}

.helptext {
    font-size: 1rem;
    margin-left: 1rem;
}

.helptext ul {
    list-style-type: none;
}

.errorlist {
    color: #F00;
    margin-left: 2rem;
}

.errorlist li::marker {
    content: '🚨 ';
}

.logout {
    display: inline-block;
}

.logout-button {
    font-size: 2.5rem;
    background-color: rgb(0, 0, 0, 0);
    border: none;
}

.logout-button:hover {
    opacity: .85;
}

label { 
    display: block; 
    margin-top: 4px; 
}

input[type="text"], input[type="number"], input[type="url"], select {
      width: 350px;
}

table {
  font-size: 12px; /* Or use other units like em, rem, or percentage */
}

table_country_list { 
    border-collapse: collapse; 
    width: 400px; 
}

table_expertise_list { 
    border-collapse: collapse; 
    width: 100%; 
    max-width: 700px; 
}

table_organization_list { 
    border-collapse: collapse; 
    width: 100%; 
}

th, td { 
    border: 1px solid #ccc; 
    padding: 6px 8px; 
    text-align: left; 
}

th { 
    background: #f0f0f0; 
}

.pagination a, .pagination span {
      margin: 0 3px;
      padding: 3px 6px;
      border: 1px solid #ccc;
      text-decoration: none;
}

.pagination .current {
      font-weight: bold;
      background: #eee;
}

h1 {
      margin-top: 0;
    }
    
.section {
      background: #ffffff;
      border: 1px solid #ddd;
      border-radius: 6px;
      padding: 2px 16px;
      margin-bottom: 8px;
    }

.section h2 {
      margin-top: 0;
      font-size: 1.1rem;
      border-bottom: 1px solid #eee;
      padding-bottom: 2px;
    }

.button-row {
      margin-top: 4px;
    }

.btn {
      display: inline-block;
      margin: 4px 6px 4px 0;
      padding: 6px 12px;
      background: #1976d2;
      color: #fff;
      border-radius: 4px;
      text-decoration: none;
      font-size: 0.9rem;
      border: none;
      cursor: pointer;
      height: 27px;
    }

.btn.secondary {
      background: #555;
    }

.btn:hover {
      filter: brightness(1.05);
    }

.box {
      border: 1px solid #ddd;
      padding: 10px 12px;
      border-radius: 4px;
      margin-bottom: 20px;
      max-width: 700px;
    }

.toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

summary {
    font-weight: normal; 
    font-size: 0.9rem; 
    cursor: pointer;
}

.nav-menu a,
.nav-menu a:visited {
        color: #000;
        text-decoration: none;
        font-weight: 400; /* keeps it from looking bold */
}

.nav-menu a:hover,
.nav-menu a:focus {
        color: #000;          /* keep black on hover too */
        text-decoration: underline; /* optional: or remove this line */
}

/* Remove default arrow from <summary> */
details > summary {
    list-style: none;        /* Firefox */
}

details > summary::-webkit-details-marker {
    display: none;           /* Chrome / Edge / Safari */
}

.btn_save_cancel {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 2px;
    border: 1px solid #999;
    background: #eee;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.8rem;
    height: 27px;
}

.btn_save_cancel:hover {
    background: #ddd;
}

.filter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
}

.filter-form .field-group {
        display: flex;
        flex-direction: column;   /* label on top, input below */
        font-size: 0.9rem;
}

.filter-form .field-group label {
        margin-bottom: 2px;
}

.filter-form input[type="text"],
.filter-form select {
        font-size: 0.9rem;
        width: 120px;             /* narrower text boxes & selects */
}

.two-col-form {
    width: 100%;
    border-collapse: collapse;
}

.two-col-form > tbody > tr > td {
    width: 50%;
    vertical-align: top;
    padding-right: 2rem;  /* space between the two columns */
}

.two-col-form-inner {
    width: 100%;
    border-collapse: collapse;
}

.two-col-form-inner th {
    text-align: right;
    padding: 4px 8px;
    white-space: nowrap;
    vertical-align: top;
}

.two-col-form-inner td {
    padding: 4px 8px;
    vertical-align: top;
}

.two-col-form-inner .field-errors {
    color: #b94a48;
    font-size: 0.85rem;
    margin-top: 2px;
}

.nonfield-errors {
    color: #b94a48;
    margin-bottom: 0.75rem;
}

.form-actions {
    margin-top: 1rem;
}

.list-submit-btn {
    display: none;
}

/* Ministers & HoS filter layout */
.filter-form.ministernhos-filter {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;  /* allows wrapping on small screens */
}

.filter-form.ministernhos-filter .filter-field,
.filter-form.ministernhos-filter .filter-actions {
    display: inline-block;
}

/* Optional: narrow the selects a bit */
.filter-form.ministernhos-filter select {
    max-width: 180px;
}

/* Optional: hide the Filter button but keep it functional */
.list-submit-btn {
    display: none;
}

.stats-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-block {
    min-width: 220px;
}

.stat-graph {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.85rem;
}

.stat-graph-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    white-space: nowrap;
}

/* Example colors */
.gender-female { background: #f8d0e5; }
.gender-male   { background: #cde3ff; }

.lang-english  { background: #e0f5d0; }
.lang-french   { background: #f5e0d0; }

.stat-graph-label {
    padding: 0 4px;
}

.tiny-bar {
    display: inline-block;
    font-family: monospace;
    font-size: 0.85rem;
}

#id_event {
    width: 420px;
    max-width: 100%;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Colored bullet circle */
.feature-list li::before {
    content: "";
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    margin-top: 0.45rem;
    background: var(--accent);
}

/* Text inside bullet list */
.feature-list li span {
    display: block;
    color: var(--text);
}
.feature-list li small {
    display: block;
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.multi-dropdown {
    position: relative;
    display: inline-block;
    min-width: 220px;
}

.multi-dropdown-toggle {
    width: 100%;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.multi-dropdown-toggle span {
    font-size: 0.9rem;
    color: #111827;
}

.multi-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    max-height: 260px;
    overflow-y: auto;
    display: none;
}

.multi-dropdown-menu.open {
    display: block;
}

.multi-dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    color: #111827;
}

.multi-dropdown-arrow {
    font-size: 0.8rem;
}

/* Two-column layout for Expert Event Register page */
.expert-register-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.5fr);
    gap: 1.5rem;
    align-items: flex-start;
}

/* Left column */
.expert-register-col1 {
    min-width: 0;
}

/* Right column */
.expert-register-col2 {
    min-width: 0;
}

/* Filters row inside the left filter toolbar */
.filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

.filter-actions-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.add-expert-group {
    margin-left: auto;
    text-align: right;
}

/* Expertise card in the right column */
.expertise-card {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 0.75rem 0.9rem;
}

.expertise-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.expertise-header span {
    font-weight: 600;
}

.expertise-header-actions {
    display: flex;
    gap: 0.3rem;
}

.expertise-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.expertise-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

/* Horizontal scroll for experts table */
.expert-table-wrapper {
    overflow-x: auto;
}

/* Optional: keep table from shrinking too small */
.expert-table {
    min-width: 1200px;
}

.organ-subscriber-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* Switchboard: same-size square buttons, spaced evenly */
.switchboard .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;              /* space between buttons */
}

.switchboard .button-row .btn {
    width: 110px;           /* pick a size you like */
    height: 55px;          /* same as width -> square */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;             /* avoid extra growth from padding */
    text-align: center;
    white-space: normal;    /* allow text to wrap */
}

.missing-cell input,
.missing-cell select {
    border: 1px solid #c00;
    background: #ffecec;
}
.status-ok {
    color: #0a7b14;
    font-weight: 600;
}
.status-error {
    color: #c00;
    font-weight: 600;
}

.expert-import-table {
    min-width: 150%;
    table-layout: fixed;
}

.expert-import-table th,
.expert-import-table td {
    padding: 2px 4px;
    font-size: 11px;
    white-space: nowrap;
}
.expert-import-table input[type="text"],
.expert-import-table select {
    display: inline-block;
    width: 100%;
    max-width: 130px;
    box-sizing: border-box;
    font-size: 11px;
    padding: 2px 4px;     /* same padding */
    height: 24px;         /* 🔹 force same height */
    line-height: 1.2;
}
.expert-import-table input[type="checkbox"] {
    width: auto;
}

.import-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;              /* space between left & right blocks */
    margin-bottom: 0.75rem; /* optional */
}

.import-event-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;            /* space between label and select */
}

.import-event-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;            /* space between buttons */
}

/* Fix table width regardless of data */
.registered-participants-table {
    width: 100%;              /* or e.g. 1200px if you prefer */
    table-layout: fixed;      /* columns don't auto-resize based on content */
    border-collapse: collapse;
}

/* Cells: truncate long text with ... */
.registered-participants-table th,
.registered-participants-table td {
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;      /* keep on one line */
}

/* Optional: tweak specific column widths (percentages must add up to ~100) */
.registered-participants-table th:nth-child(1),
.registered-participants-table td:nth-child(1) { width: 4%; }   /* Sal. */
.registered-participants-table th:nth-child(2),
.registered-participants-table td:nth-child(2) { width: 7%; }   /* First */
.registered-participants-table th:nth-child(3),
.registered-participants-table td:nth-child(3) { width: 7%; }   /* Last */
.registered-participants-table th:nth-child(4),
.registered-participants-table td:nth-child(4) { width: 9%; }  /* Email */
.registered-participants-table th:nth-child(5),
.registered-participants-table td:nth-child(5) { width: 6%; }   /* City */
.registered-participants-table th:nth-child(6),
.registered-participants-table td:nth-child(6) { width: 6%; }   /* Country */
.registered-participants-table th:nth-child(7),
.registered-participants-table td:nth-child(7) { width: 10%; }  /* Org */
.registered-participants-table th:nth-child(8),
.registered-participants-table td:nth-child(8) { width: 9%; }  /* Expertise */
.registered-participants-table th:nth-child(9),
.registered-participants-table td:nth-child(9) { width: 9%; }  /* Func title */
.registered-participants-table th:nth-child(10),
.registered-participants-table td:nth-child(10) { width: 6%; }  /* Gender */
.registered-participants-table th:nth-child(11),
.registered-participants-table td:nth-child(11) { width: 11%; }  /* Role */
.registered-participants-table th:nth-child(12),
.registered-participants-table td:nth-child(12) { width: 8%; }  /* Sponsored */
.registered-participants-table th:nth-child(13),
.registered-participants-table td:nth-child(13) { width: 8%; }  /* Confirmed */
.registered-participants-table th:nth-child(14),
.registered-participants-table td:nth-child(14) { width: 9%; }  /* Badge */
.registered-participants-table th:nth-child(15),
.registered-participants-table td:nth-child(15) { width: 6%; }  /* QRCode */
.registered-participants-table th:nth-child(16),
.registered-participants-table td:nth-child(16) { width: 7%; }  /* Actions */

/* Force the dropdown to fit inside that column */
.registered-participants-table td:nth-child(11) .role-select {
    width: 100%;          /* or 90%, or a fixed px width if you prefer */
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Slightly different background for event-meta columns */
.registered-participants-table th.meta-col,
.registered-participants-table td.meta-col {
    background-color: #eaf3fd;  /* very light blue/grey */
}


/* 3-column layout for the top section */
.email-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.25fr;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
    align-items: start;
}

.email-top-col {
    display: flex;
    flex-direction: column;
    gap: 0.05rem; /* spacing between field-blocks */
}

.email-top-col .field-row,
.email-top-col .field-block {
    margin-bottom: 0; /* handled by gap */
}

/* Responsive: collapse to 1 column on small screens */
@media (max-width: 900px) {
    .email-top-grid {
        grid-template-columns: 1fr;
    }
}

.email-top-col .field-row {
    margin-bottom: 0.35rem;
}

.field-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.buttons-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Tabs */
.email-tabs {
    margin-top: 0.5rem;
}

.email-tabs-header {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab-btn {
    border: 1px solid #ccc;
    padding: 0.35rem 0.75rem;
    background: #f5f5f5;
    cursor: pointer;
}

.tab-btn.active {
    background: #e0e0e0;
    font-weight: 600;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Recipients count */
#recipients-display {
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: #f0f7ff;
}

.center {
  display: flex;
  align-items: center;
}

/* Email top layout: 3 columns */
.event-email-form .email-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.25fr;
    gap: 1.5rem;
    align-items: start;
}

.email-top-grid > .email-top-col:nth-child(3) {
    align-items: flex-end;
    text-align: right;
}

.email-top-grid > .email-top-col:nth-child(3) .btn,
.email-top-grid > .email-top-col:nth-child(3) .btn_save_cancel {
    width: auto;
}

/* Responsive: collapse to 1 column on small screens */
@media (max-width: 900px) {
    .event-email-form .email-top-grid {
        grid-template-columns: 1fr;
    }
}

.event-email-form .email-top-col .field-block {
    margin-bottom: 0.35rem;
}

/* Keep generic field-block styling */
.event-email-form .field-block {
    margin-bottom: 0.35rem;
}

/* Buttons row in top-right column */
.buttons-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Recipients badge */
#recipients-display {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    background: #f0f7ff;
    font-weight: 700;
}

/* Tabs */
.email-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.email-tab-button {
    border: 1px solid #ccc;
    padding: 0.4rem 0.8rem;
    background: #f7f7f7;
    cursor: pointer;
}

.email-tab-button.active {
    background: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}

.email-tab-pane {
    display: none;
    border: 1px solid #ccc;
    padding: 0.25rem;
    margin-top: -1px; /* fuse with tabs */
    background: #fff;
}

.email-tab-pane.active {
    display: block;
}

.richtext-field {
    width: 100%;
}

/*For keeping attachment label+link on same line*/
.field-label-row{
    display:flex;
    /*justify-content:space-between;*/
    align-items:baseline;
    gap:0.75rem;
}

.current-file-link{
    font-size:0.8rem;
    white-space:nowrap;
}