:root{
  color-scheme: light;
  --color-primary: #4457ea;
  --color-primary-dark: #3345c9;
  --color-primary-light: #eef0ff;
  --color-text: #191b26;
  --color-text-muted: #666c80;
  --color-border: #e3e5ec;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f7fb;
  --color-danger: #cc3d3d;
  --color-danger-light: #fcebeb;
  --color-warning: #8a6d00;
  --color-warning-light: #fff8dc;
  --color-success: #2f9e44;
  --color-success-light: #e6f7ec;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 3px rgba(20, 22, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 22, 40, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 22, 40, 0.16);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body{
  margin: 0;
  padding: 0;
  margin-left: 0;
  height: 100%;
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* Vertical Menue - in nav_layout*/
.vertical-menu{
  height: 100%;
  width: 15%;
  margin: 0 0 0 0;
  padding: 0;
  padding-top: 10px;
  list-style-type: none;
  float:left;
  display: block;
  background-color: var(--color-surface-alt);
  position: fixed;
}

.vertical-menu a {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  list-style: none;
  background-repeat: repeat-y;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vertical-menu a:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.vertical-menu a.disabled {
  pointer-events: none;
  cursor: default;
  color: #ccc;
}

.vertical-menu a.active {
  background-color: var(--color-primary);
  color: white;
}

.buffer{
  width: 5%;
  height: 100%;
  float:left;
  margin-left: 15%;
  display: block;
  position: fixed;
}

.join-refresh-box{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 15%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  background-color: var(--color-surface-alt);
}

.join-refresh-timestamp{
  margin-top: 6px;
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
}

.site-content{
  float: left;
  margin-left: 20%;
  width: 80%;
  position: absolute;
}

.admin-site-content{
  /* Chair pages nest a .content (70%) inside .site-content, which naturally leaves room on
     the right. Admin pages put their content directly in .site-content (no such wrapper), so
     without this it runs straight to .site-content's own right edge. */
  padding-right: 2.5%;
  box-sizing: border-box;
}

.content{
  float: left;
  display: block;
  padding: 10px;
  padding-left: 0;
  padding-right: 0;
  width: 70%;
  text-align: left;
  line-height: 1.5;
}
.content-imprint{
  float: left;
  display: block;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  text-align: left;
}

.sub-content{
  float: left;
  display: block;
  padding: 10px;
  padding-left: 0;
  width: 100%;
  text-align: left;
  margin-top: 1%;
}

.right-column{
  float: left;
  display: block;
  text-align: left;
  width: 25%;
  padding: 10px;
  padding-left: 0;
}

#edit-right-column{
  /* Lines "Change Log" up with "Add a country" in the .content column, which sits below the
     full-width status banner (.set-up-banner) -- roughly that banner's own height + margin,
     plus a little extra so the gap reads as deliberate rather than exactly flush. */
  margin-top: 113px;
  /* .content (70%) and .right-column (25%) are adjacent floats with no gap between them, so
     anything filling .content's full width (e.g. a focused <summary>'s outline) visually
     touches this box. Add a small left margin for breathing room, and shrink the width by the
     same amount so the right edge still lands at 93.75% of .site-content -- matching
     .set-up-nav/.set-up-banner's right edge instead of the unscoped .right-column's 95%. */
  margin-left: 2%;
  width: 21.75%;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 16px 16px 20px;
  box-sizing: border-box;
}

.edit-right-column-actions{
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.edit-right-column-actions button{
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.85em;
}

#edit-right-column h3{
  margin-top: 0;
}

.conference-title{
  font-weight: bold;
  padding-top: 10px;
  margin-top: 5%;
}

.committee-title{
  display: inline;
}

.committee-logo{
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-bottom: 25px;;
  max-height: 100px;

}

/* Landing page (bare domain, no nav bar) */
.landing{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 65%),
    radial-gradient(ellipse 1000px 600px at 15% -10%, #ffffff 0%, transparent 55%);
  padding: 0 20px 70px 20px;
  box-sizing: border-box;
}

.landing-nav{
  width: 100%;
  max-width: 1000px;
  padding: 20px 0 0 0;
}

.landing-nav img{
  height: 36px;
  display: block;
}

.landing-hero{
  max-width: 680px;
  text-align: center;
  margin-top: 28px;
}

.landing-hero h1{
  font-size: 2.6em;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 18px 0;
  color: var(--color-text);
}

.landing-hero p{
  font-size: 1.1em;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.landing-boxes{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 56px;
  width: 100%;
  max-width: 900px;
}

.landing-box{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.landing-box:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.landing-box-icon{
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-box-icon svg{
  width: 22px;
  height: 22px;
}

.landing-box h2{
  margin: 0;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-text);
}

.landing-box p{
  margin: 0;
  font-size: 0.92em;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.landing-box.disabled{
  cursor: default;
  background-color: var(--color-surface-alt);
}

.landing-box.disabled:hover{
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--color-border);
}

.landing-box.disabled .landing-box-icon{
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}


.landing-reference{
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  max-width: 460px;
}

.landing-reference img{
  height: 34px;
  width: auto;
  border-radius: 6px;
  flex-shrink: 0;
}

.landing-reference p{
  margin: 0;
  font-size: 0.85em;
  color: var(--color-text-muted);
  text-align: left;
  line-height: 1.4;
}

.landing-reference a{
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.landing-reference a:hover{
  text-decoration: underline;
}

.landing-footer{
  margin-top: 32px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9em;
  max-width: 480px;
  line-height: 1.6;
}

.landing-footer a{
  color: var(--color-primary);
  text-decoration: none;
}

.landing-footer a:hover{
  text-decoration: underline;
}

@media (max-width: 720px){
  .landing-boxes{
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  .landing-hero h1{
    font-size: 2em;
  }
}
.form{
  text-align: left;
  margin-left: 50px;
}

.form form{
  text-align: left;
  line-height: 2;
}

#div-home{
  text-align: center;
  width: 80%;
}

.status-opened{
  color: #008000;
}

.status-closed{
  color: #ff0000;
}

.speakers-list{
  list-style-type: none;
  padding-left: 0;
  display: block;
}

.country-on-speakers-list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
}

.country-on-speakers-list:last-child{
  border-bottom: none;
}

.speakers-list-remove-btn{
  flex: 0 0 auto;
  min-width: 0;
  width: 22px;
  height: 22px;
  line-height: 1;
  padding: 0;
  border-radius: 999px;
  font-size: 0.9em;
}




.scroll-enabled{
  overflow: auto;
  height: 100px;
}


#speakers-list-ul-delview{
  columns: 2;
  list-style-type: decimal;
  align-self: center;
  padding-left: 7%;
}


#current-speaker-div{
  float: left;
  display: block;
  width: 50%;
}
#current-speaker-div-mod{
  float: left;
  display: block;
  width: 50%;
}
#current-speaker-div-del-view{
  float: left;
  display: block;
  width: 50%;
}
#speaker-status-delview{
  margin-top: 2%;
}

#speech-console{
  float: left;
  display: block;
  width: 50%;
}
#speech-console-del-view{
  float: left;
  display: block;
  width: 40%;
  position: relative;
  font-weight: bold;
  font-size: 200%;

}
.variable-text{
  display: inline;
}
.invisible-text{
  display: inline;
  color: white;
}

#current-speaker-table{
  margin-top: 25px;
  text-align: left;
  width: 95%;
}
#current-speaker-table-delview{
  margin-top: 25px;
  text-align: left;
  font-size: 125%;
}

.current-speakers-time{
  font-weight: bold;
}



button{
  background-color: var(--color-primary);
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

button:hover:not(:disabled){
  background-color: var(--color-primary-dark);
}

button:active:not(:disabled){
  transform: translateY(1px);
}

button:disabled{
  background-color: #ccc;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: default;
}

.disabled{
  background-color: #ccc;
  border: none;
  padding: 5px;
}

input{
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
}

select{
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
}


/*table countries roll call*/
.contains-countries-roll-call{
  z-index: -1;
  overflow: auto;
  height: 60%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.countries-roll-call-table{
  text-align: left;
  border-collapse: collapse;
  width: 100%;
}

.countries-roll-call-table th,td{
  padding: 10px;
  border-bottom: 1px solid var(--color-border);
}

.countries-roll-call-table tr:last-child td{
  border-bottom: none;
}

.countries-roll-call-table tbody tr:hover{
  background-color: var(--color-surface-alt);
}

.countries-roll-call-td{
  padding-left: 16px;
  text-align: left;
  width:50%;
}

.roll-call-flag-td{
  width: 48px;
  padding: 8px;
  box-sizing: border-box;
}

.roll-call-flag-td img{
  width: 32px;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}
.countries-roll-call-table td{
  padding-top: 10px;
  padding-bottom: 10px;
}

.countries-roll-call-table-header{
  background-color: var(--color-surface-alt);
}

.countries-roll-call-table-header th{
  /* Browsers center <th> by default (own UA rule, beats the table's inherited text-align:left)
     -- without this, a header sits centered over a wide column while its data stays left-
     aligned, drifting apart the wider the column gets. */
  text-align: left;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.countries-roll-call-table-form,
.voting-table-form{
  margin: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  max-width: 340px;
}

.countries-roll-call-table-form button,
.voting-table-form button{
  white-space: nowrap;
  flex-shrink: 0;
}

.country-presence-not-selected,
.country-vote-not-selected{
  background-color: var(--color-border);
  color: var(--color-text-muted);
}

.country-presence-selected,
.country-vote-selected{
  background-color: var(--color-primary);
  color: white;
}


/* roll call control panel*/

.roll-call-ctrl-panel{
  position: fixed;
  margin-top: 25px;
  /* .content (70%) and .right-column (25%) are adjacent floats with no gap between them (see
     #edit-right-column) -- now that .contains-countries-roll-call has a visible border, this
     panel needs the same 2% breathing room or it visually touches that border. */
  margin-left: 2%;
}


.right{
  float: left;
  margin-left: 10%;
}

.buttons-ctrl-panel{
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 12px;
}

#voting-upon-select{
  width: 100%;
  margin-bottom: 8px;
}

.voting-pending-doc{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.voting-pending-doc span{
  flex: 1;
  font-size: 0.85em;
}

.voting-pending-doc input{
  width: 70px;
}

.buttons-ctrl-panel p{
  margin: 8px 0;
}

.overview-majorities{
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}

.overview-majorities-table{
  border-style: none;
  text-align: left;
  width: 100%;
}

.overview-majorities-table td{
  padding: 4px 0;
}

.overview-majorities-table td:first-child{
  color: var(--color-text-muted);
}

.note{
  font-size: 80%;
}



/*Styles Del View -- insession_del_view.html/voting_del_view.html (the projector-facing pages)
  reuse the cockpit's own card language (.cockpit-panel, .cockpit-majority-*, .cockpit-timer)
  scaled up for legibility from across a room, instead of the old icon-image majority symbols
  and float-based two-column layout. */

.time-red{
  color: red;
}

.time-yellow{
  color: #deae1d;
}
.topics-list{
  margin-bottom: 0;
  width: 100%;
}

.ctrl-panel-topic-buttons{
  padding: 1%;
}
.ctrl-panel-topic-button{
  margin-right: 1%;
  float: right;
}

body.delview-body{
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 65%),
    radial-gradient(ellipse 1000px 600px at 15% -10%, #ffffff 0%, transparent 55%);
}

.delview-page{
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  text-align: left;
  position: relative;
}

.delview-conference-logo{
  /* Large branding logo pinned to the corner -- purely decorative (for photos of the room),
     so it sits above the layout instead of pushing header content around. */
  position: absolute;
  top: 8px;
  right: 24px;
  max-height: 140px;
  max-width: 220px;
}

.delview-speaker-flag{
  width: 64px;
  height: auto;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.delview-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.delview-header-left{
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.delview-header-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 1.1em;
}

.delview-topic-bar{
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 1.3em;
}

.delview-main-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.delview-label{
  font-size: 1em;
  color: var(--color-text-muted);
}

.delview-speaker-name{
  font-size: 2.2em;
  font-weight: 700;
  margin: 4px 0 0;
}

.taboo-word-card{
  text-align: center;
  padding: 20px 0 8px;
}

.delview-speaker-name-next{
  font-size: 1.6em;
  color: var(--color-text-muted);
}

.delview-speech-panel .cockpit-timer{
  font-size: 2.2em;
  margin: 10px 0;
}

.delview-speech-panel .cockpit-timer-label{
  font-size: 1.3em;
  text-transform: capitalize;
}

.delview-suspension-box{
  text-align: center;
  padding: 30px 0;
}

.delview-suspension-mode{
  font-size: 2.2em;
  font-weight: 700;
  margin: 6px 0;
}

.delview-suspension-until{
  font-size: 1.2em;
  color: var(--color-text-muted);
}

.delview-speakers-scroll{
  max-height: 360px;
  font-size: 1.15em;
}

.delview-footer-row{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
}

.delview-agenda-list{
  font-size: 1.1em;
}

.delview-committee-logo{
  display: block;
  max-height: 60px;
  margin: 0 auto 12px;
}

.delview-header-logo{
  /* Conference logo (left) and committee logo (right) mirrored across .delview-header --
     inline with their own side's text, not the centered-card sizing .delview-committee-logo
     uses elsewhere (see voting_del_view.html). Sized to roughly match the title block's own
     height so there's no dead space around it -- the text baseline-aligns to its bottom
     (align-items:flex-end on the parent) rather than floating centered next to it. */
  display: block;
  max-height: 100px;
}

.delview-reso-header{
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 10px;
}

.delview-reso-content{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 240px;
  overflow: auto;
  padding: 10px 14px;
  margin-top: 10px;
}

/* Styles Resolutions */

.symbol-reso{
  max-height: 50px;
  float: right;
  margin-top: -1.5%;
  margin-left: 1.5%;
}

.panel-reso{
  padding: 2.5%;
  background-color: #449cef;
  color: white;
  margin-top: 2.5%;
}

.form-reso{
  padding: 2.5%;
  border-color: #eee;
  border-style: solid;
}

.display-reso{
  padding: 2.5%;
  border-color: #eee;
  border-style: solid;
}

.textarea-reso{
  width: 100%;
  min-height: 150px;
  overflow: auto;
  margin-top: 2.5%;
}

.content-bottom-reso{
  width: 100%;
  border-color: #eee;
  border-style: solid;
  margin-top: 2.5%;
  overflow: auto;
}

.content-left{
  float: left;
}

.content-right{
  float: right;
}

/*Styles FAQ*/

.question-wrapper{
  width: 100%;
  text-align: left;
  margin-bottom: 2%;
  padding: 2%;
  border: 2.5px;
  border-color: #eee;
  border-style: solid;
}
.question{
  font-weight: bold;
  margin-bottom: 1%;
}

/*Styles scenarios*/

.scenario-intro{
  color: var(--color-text-muted);
  margin-bottom: 24px;
}

.scenario-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.scenario-card{
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.scenario-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.scenario-card-img{
  width: 100%;
  height: 140px;
  object-fit: contain;
  background-color: var(--color-surface-alt);
  padding: 16px;
  box-sizing: border-box;
}

.scenario-card-body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 20px 20px;
}

.scenario-card-title{
  font-weight: 700;
  font-size: 1.05em;
}

.scenario-card-blurb{
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92em;
  line-height: 1.5;
  flex-grow: 1;
}

.scenario-card-action{
  align-self: center;
  margin-top: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.scenario-card-action:hover{
  background-color: var(--color-primary-dark);
}

#contains-bingo{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 10px;
  text-align: center;
}
.contains-phrase{
  width: 25%;
  height: 90px;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  font-size: 0.9em;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.contains-phrase:hover{
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.contains-phrase.done{
  background-color: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
  font-weight: 700;
}

.bingo-board-panel,
.bingo-propose-panel{
  margin-top: 16px;
}

.bingo-screenshot-hint{
  margin-top: 12px;
}

.bingo-propose-details{
  margin-top: 10px;
}

.bingo-propose-details summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary);
}

.bingo-propose-form{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 500px;
}

.bingo-propose-form label{
  font-size: 0.9em;
  font-weight: 700;
}

.bingo-propose-submit{
  align-self: flex-start;
  margin-top: 6px;
}




/*flags */

/*Styling Voting*/
.voting-ctrl-panel{
  position: fixed;
  margin-top: 25px;
  /* Same 2% breathing room as .roll-call-ctrl-panel -- see its comment. */
  margin-left: 2%;
}

.voting-in-favor-button{
  background-color: var(--color-success);
}

.voting-against-button{
  background-color: var(--color-danger);
}

#countries-passed{
  margin-top: 0;
  margin-bottom: 0;
}

#countries-with-rights{
  margin-top: 0;
  margin-bottom: 0;
}

.majority-reached{
  color: var(--color-success);
  font-weight: 700;
}

.please-vote{
  color: var(--color-danger);
  font-weight: 700;
}
.yay-voted{
  color: var(--color-success);
  font-weight: 700;
}

/*Styles Support Us*/





.helper-voting{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  padding: 10px;
  margin-bottom: 10px;
}


/*Styles Set Up*/
.set-up-banner{
  /* Match .set-up-nav's width even though this banner lives inside .content (70% of
     .site-content) rather than as its sibling (93.75% of .site-content):
     93.75 / 70 = 133.93% of .content's own width lines both up. */
  width: 133.93%;
  box-sizing: border-box;
}

.feedback{
  padding: 14px 18px;
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin-top: 2.5%;
}
.negative-feedback{
  padding: 14px 18px;
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  margin-top: 2.5%;
}

/* Same warning tone as .negative-feedback but sized for sitting inline in a table cell/line of
   text instead of standing alone as a full-width banner. */
.negative-feedback-inline{
  color: var(--color-danger);
  font-size: 0.9em;
}

.set-up-nav{
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  min-height: 50px;
  /* .site-content is 80% of the viewport; 93.75% of that = 75% of the viewport, leaving a
     5%-of-viewport gap on the right -- matching the existing 5% gap on the left between the
     sidebar (15%) and .site-content's own margin-left (20%). */
  width: 93.75%;
  margin: 10px 0 0 0;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  gap: 4px;
}

/* .set-up-nav's 93.75% width is calibrated for pages that nest it inside .content (70% of
   .site-content) -- .cockpit-page is already 93.75% of .site-content on its own, so a nested
   .set-up-nav needs to just fill it (100%) to match its sibling .cockpit-panels' width, instead
   of compounding into a narrower bar. */
.cockpit-page > .set-up-nav,
.admin-site-content > .set-up-nav{
  width: 100%;
}

.set-up-nav-button{
  flex: 1;
  color: var(--color-text-muted);
  background-color: transparent;
  height: auto;
  min-height: 42px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.set-up-nav-promo{
  /* Same 133.93% full-bleed trick as .set-up-banner -- matches .set-up-nav's width. */
  width: 133.93%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 2%;
}

.set-up-nav-promo a{
  color: var(--color-primary);
  font-weight: 600;
}

.set-up-nav-button:hover{
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.set-up-nav-button.active{
  background-color: var(--color-primary);
  color: white;
}

.set-up-nav-button.active:hover{
  background-color: var(--color-primary-dark);
  color: white;
}

/* Chair session cockpit -- consolidated Formal Session / Moderated Caucus / Motions (replaces
   the old separate insession.html + mod-caucus.html two-column split-screen layout). */
.cockpit-page{
  width: 93.75%;
  box-sizing: border-box;
  text-align: left;
}

.cockpit-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px;
}

.cockpit-tab{
  margin-top: 16px;
}

.cockpit-main-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.cockpit-main-grid .cockpit-panel{
  height: 100%;
  box-sizing: border-box;
}

.cockpit-panel{
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-sizing: border-box;
}

.cockpit-panel-title{
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}

.cockpit-speaker-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cockpit-speaker-box{
  display: flex;
  align-items: center;
  gap: 8px;
}


.cockpit-timer{
  font-size: 2em;
  font-weight: 700;
  text-align: center;
  margin: 6px 0;
}

.cockpit-timer-label{
  font-size: 0.8em;
  color: var(--color-text-muted);
  text-align: center;
  display: block;
}

.cockpit-button-row{
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cockpit-button-row button{
  flex: 1;
  min-width: 70px;
}

.cockpit-preset-label{
  font-size: 0.8em;
  color: var(--color-text-muted);
  margin: 10px 0 4px;
  display: block;
}

.cockpit-list-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cockpit-speakers-scroll{
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.cockpit-majority-row{
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.cockpit-majority-stat{
  flex: 1;
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 8px;
  text-align: center;
}

.cockpit-majority-value{
  font-size: 1.2em;
  font-weight: 700;
  display: block;
}

.cockpit-majority-label{
  font-size: 0.75em;
  color: var(--color-text-muted);
}

.cockpit-topic-bar{
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-top: 16px;
}

.cockpit-topic-bar-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cockpit-topic-agenda{
  margin-top: 12px;
  display: none;
}

.cockpit-topic-agenda.open{
  display: block;
}

.cockpit-topic-bar-extra{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.country-search-wrap{
  position: relative;
}

.country-search-wrap input{
  width: 100%;
  box-sizing: border-box;
}

.country-search-suggestions{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 180px;
  overflow-y: auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.country-search-suggestions.open{
  display: block;
}

.country-search-suggestion{
  padding: 6px 10px;
  cursor: pointer;
  text-align: left;
}

.country-search-suggestion:hover,
.country-search-suggestion.active{
  background-color: var(--color-surface-alt);
}

.cockpit-notifications-wrap{
  position: relative;
  display: inline-block;
}

.cockpit-notifications-overlay{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  width: 280px;
  margin-top: 6px;
  padding: 10px;
  text-align: left;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.cockpit-notifications-overlay.open{
  display: block;
}

.cockpit-notification-item{
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.cockpit-notification-item:last-child{
  border-bottom: none;
}

.cockpit-notification-item-pinned{
  background-color: var(--color-warning-light);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}

.cockpit-notification-meta{
  font-size: 0.75em;
  color: var(--color-text-muted);
}

.cockpit-notification-pinned-label{
  color: var(--color-warning);
  font-weight: 700;
}

.cockpit-notifications-viewall{
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  text-align: right;
}

.cockpit-motions-form{
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.cockpit-motions-form > div{
  flex: 1 1 150px;
  min-width: 140px;
  box-sizing: border-box;
}

.cockpit-motions-form select,
.cockpit-motions-form input{
  width: 100%;
  box-sizing: border-box;
}

.cockpit-motions-form label{
  font-size: 0.8em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 4px;
}

/* Preset active state & disabled timer buttons */
.preset-btn-active{
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary-dark) !important;
  font-weight: 700;
}

button:disabled, button.disabled{
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Voting Pass & With Rights pill buttons */
.voting-pill-box{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  min-height: 28px;
}

.voting-pill-button{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #e2e8f0;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.voting-pill-button:hover{
  background-color: #cbd5e1;
}

.voting-pill-remove{
  margin-left: 2px;
  color: #ef4444;
  font-weight: bold;
  cursor: pointer;
}

.fun-award-category-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.fun-award-category-row label{
  flex: 1;
  text-align: left;
  font-weight: 600;
}

.fun-award-category-row select{
  flex: 1;
}

.fun-awards-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.cockpit-motions-table{
  width: 100%;
}

.cockpit-motion-details{
  /* Overrides .admin-list-table td's overflow:hidden/ellipsis -- a motion with several fields
     (e.g. Suspension of the Meeting for a moderated caucus: type + total time + speaker time +
     topic + moderator) needs to stack onto multiple lines instead of getting truncated. */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 0.85em;
  line-height: 1.4;
  vertical-align: top;
}

.cockpit-motion-details div{
  padding: 1px 0;
}

.cockpit-motion-status{
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.cockpit-motion-status-applied{
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.cockpit-motion-status-passed{
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.cockpit-motion-status-failed{
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.cockpit-motions-divider{
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

#cockpit-voting-button{
  background-color: var(--color-success);
}

/* User Management tab bar -- same look as .set-up-nav (chair SETTINGS page), but sized for
   admin's plain .site-content instead of chair's narrower nested .content column. */
.user-mgmt-nav{
  display: flex;
  background-color: var(--color-surface-alt);
  border-radius: 14px;
  width: 100%;
  margin: 10px 0 20px;
  padding: 4px;
  box-sizing: border-box;
  gap: 4px;
}

.user-mgmt-nav-button{
  flex: 1;
  color: var(--color-text-muted);
  background-color: transparent;
  border: none;
  cursor: pointer;
  height: auto;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.92em;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.user-mgmt-nav-button:hover:not(.active){
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-text-main);
  text-decoration: none !important;
}

.user-mgmt-nav-button.active{
  background-color: var(--color-primary);
  color: white !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.set-up-create-table{
  width: 100%;
}

.admin-list-table{
  /* List-style tables (Committee/Countries/Session code, Email/Role/Action) supply their own
     explicit per-column widths (summing to 100%) instead of the 50%-desc-column convention
     .set-up-create-table-desc uses for 2-column key/value forms -- fixed layout makes every
     row respect the header row's widths instead of auto-sizing to content. */
  table-layout: fixed;
}

.admin-list-table td{
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-code{
  display: inline-block;
  max-width: calc(100% - 26px);
  vertical-align: middle;
  white-space: nowrap;
}

.copy-code-btn{
  padding: 2px 6px;
  font-size: 0.9em;
  vertical-align: middle;
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.copy-code-btn:hover{
  background-color: var(--color-surface-alt);
}

.set-up-create-table td{
  padding-left: 2.5%;
}

.admin-list-table td{
  /* Overrides .set-up-create-table td's padding-left:2.5% (same pattern as .roster-table td
     below) -- 2.5% of these wider list tables reads as too much left gap, uneven across
     columns, and especially odd now that a column can hold an input (see the search box in
     user-management.html's header row). */
  padding-left: 8px;
}

.set-up-create-table-desc{
  width: 50%;
}

.set-up-create-table-input{
  width: 95%;
}

#user-search-input{
  /* Sits inside a table header cell right next to the column border -- .set-up-create-table-
     input's usual 95% leaves too little room there, unlike in a key/value form row. */
  width: 85%;
}

.add-country-row{
  display: flex;
  align-items: center;
  gap: 4px;
}

.add-country-row input{
  flex: 1;
}

.roster-table{
  width: 100%;
  table-layout: fixed;
}

.head-delegate-marker{
  color: var(--color-primary);
  font-weight: 700;
}

.roster-table td{
  /* Overrides .set-up-create-table td's padding-left:2.5% (this table also carries that class
     for its width/font styling) -- that padding was throwing off flag centering and adding
     unwanted space before the name input on every row. */
  padding-left: 0;
  vertical-align: middle;
  padding-top: 4px;
  padding-bottom: 4px;
}

.roster-table .roster-flag-td{
  width: 40px;
  text-align: center;
  background-color: #eee;
}

.roster-flag-td img{
  width: 28px;
  height: auto;
  vertical-align: middle;
  display: inline-block;
}

.roster-table td.roster-name-td{
  /* The input is width:100% of this cell, so without padding here its own border sits flush
     against the cell boundary (touching the flag cell right next to it). Needs to out-specify
     .roster-table td's own padding-left:0 (equal-ish selectors otherwise, wrong one would win). */
  padding-left: 10px;
}

.roster-name-input{
  width: 100%;
  box-sizing: border-box;
  padding-left: 10px;
}

.roster-table .roster-actions-td{
  width: 140px;
  white-space: nowrap;
  padding-left: 10px;
}

.roster-actions-td button{
  margin-right: 6px;
  padding: 4px 10px;
  font-size: 0.85em;
}

#roster-search{
  /* 100% + border-box so its right edge lines up with the table's own right edge below it. */
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

#roster-details summary{
  cursor: pointer;
}

.roster-details-heading{
  /* Matches the "Add a country" <h2> next to it (24px/700) so the two section headings read
     as the same weight of heading, with the usage hint kept as a smaller trailing note. */
  font-size: 24px;
  font-weight: 700;
}

.roster-details-hint{
  font-size: 0.85em;
  font-weight: 400;
  color: var(--color-text-muted);
}

#changelog-list{
  text-align: left;
  padding-left: 20px;
}

.changelog-empty{
  color: #888;
}

/*Styles Mod*/

.includes-settings-mod input{
  margin-top: 5px;
}

.includes-settings-mod button{
  margin-top: 5px;
}

/* Admin dashboard -- conference tiles (Teil 5) */
.dashboard-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.dashboard-tile{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-tile:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.dashboard-tile-logo{
  height: 44px;
  max-width: 100%;
  object-fit: contain;
}

.dashboard-tile-name{
  font-weight: 700;
  font-size: 1.05em;
}

.dashboard-tile-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.dashboard-tile-badge{
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Danger zone / double-confirm modal (Teil 5) */
.danger-button{
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.success-button{
  background-color: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.success-button:hover{
  background-color: var(--color-success);
  color: white;
}

.success-button:disabled,
.danger-button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.danger-button:hover,
button.danger-button:hover,
button.btn-danger:hover,
button.red-button:hover,
button[style*="background: #dc3545"]:hover,
button[style*="background:#dc3545"]:hover,
button[style*="background: red"]:hover,
button[style*="background:red"]:hover,
button[style*="background: #d9534f"]:hover,
button[style*="background:#d9534f"]:hover,
button[style*="background: #bd2130"]:hover,
button[style*="background:#bd2130"]:hover {
  background-color: #bd2130 !important;
  color: white !important;
  border-color: #bd2130 !important;
}

.confirm-modal-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(20, 22, 40, 0.45);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-modal-overlay.open{
  display: flex;
}

.confirm-modal{
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 24px;
  width: 90%;
  max-width: 420px;
  text-align: left;
}

.confirm-modal-title{
  margin: 0 0 10px;
}

.confirm-modal-message{
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: 0.92em;
}

.confirm-modal-input{
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
}

.confirm-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Live monitoring (Teil 6) */
.mode-badge{
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  text-decoration: none;
}

/* 403/404 "Return to the start page" link -- styled as an inactive-looking badge/button, but
   still needs a hover cue since it's actually clickable. */
.error-page-link:hover{
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.mode-badge-formal_session{
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.mode-badge-unmoderated_caucus, .mode-badge-moderated_caucus{
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.mode-badge-voting{
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.mode-badge-press_conference{
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.live-badge{
  background-color: var(--color-danger);
  color: white;
  vertical-align: middle;
}

.nav-live-item{
  padding: 8px 10px !important;
}

.nav-live-name{
  font-size: 0.85em;
  margin-bottom: 6px;
  overflow-wrap: break-word;
}

.nav-live-actions{
  display: flex;
  gap: 4px;
}

.nav-live-actions a{
  flex: 1;
  padding: 4px 2px !important;
  border-radius: var(--radius-sm);
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  display: block;
}

.nav-live-view{
  background-color: var(--color-danger);
  color: white;
}

.nav-live-view:hover{
  background-color: var(--color-danger) !important;
  color: white !important;
}

.nav-live-notify:hover{
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary-dark) !important;
}

.nav-live-notify{
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.nav-badge{
  display: inline-block;
  background-color: var(--color-danger);
  color: white;
  font-size: 0.7em;
  font-weight: 700;
  min-width: 8px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}

.presence-badge{
  display: inline-block;
  font-size: 0.85em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.presence-badge-present, .presence-badge-present_and_voting{
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.dashboard-tile-live{
  border-color: var(--color-danger);
}

/* join.* delegate app (Teil 7) */
.join-identity{
  background-color: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  /* .site-content starts at 20% of the viewport (15% sidebar + 5% .buffer), so a bar filling
     just .site-content's own width leaves that 5%-of-viewport buffer zone showing as a gap
     between the sidebar and this bar's background. Pull left and widen by that same 5% of
     viewport, expressed as a percentage of .site-content's own width (80% of viewport):
     5 / 80 = 6.25%. Left padding grows by the same amount so the text itself still lines up
     with the rest of the page instead of drifting into the reclaimed space. */
  margin: 0 0 20px -6.25%;
  width: 106.25%;
  padding: 10px 20px 10px calc(20px + 6.25%);
  box-sizing: border-box;
  font-size: 0.9em;
  color: var(--color-text-muted);
}

.join-identity b{
  color: var(--color-text);
}

/* NOTIFICATIONS tab (Teil 8) */
.notification-mute-controls{
  display: flex;
  gap: 20px;
  margin: 10px 0 20px;
  color: var(--color-text-muted);
}

.notification-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-item{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  padding: 10px 16px;
  text-align: left;
  position: relative;
}

.notification-item-pinned{
  background-color: var(--color-warning-light);
  border-color: var(--color-warning);
}

.notification-meta{
  font-size: 0.8em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.notification-message{
  margin-top: 4px;
}

.notification-pin-btn{
  position: absolute;
  top: 10px;
  right: 16px;
}

.notification-hidden-section{
  margin-top: 16px;
  border-top: 1px dashed var(--color-border);
  padding-top: 16px;
}

.notification-hidden-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.notification-hidden-toggle:hover{
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.notification-hidden-toggle.open{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.notification-hidden-arrow{
  font-size: 0.8em;
}

.notification-hidden-items{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.notification-item-muted{
  opacity: 0.75;
  background-color: var(--color-surface);
  border-style: dashed;
}

/* Sponsors/signatories chip list on join.*'s documents form */
.document-country-list{
  list-style-type: none;
  padding-left: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.document-country-chip{
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 0.9em;
  cursor: pointer;
}

.document-country-chip:hover{
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

/* Read-only variant (e.g. sponsor/reaction lists on the chair Documents page and join To Do
   tab) -- same chip look, but not clickable-to-remove, so it shouldn't hint removal on hover. */
.document-country-chip-static{
  cursor: default;
  display: flex;
  align-items: center;
  gap: 6px;
}

.document-country-chip-static:hover{
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.doc-card{
  text-align: left;
}

.doc-card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.doc-passed-amendments-section{
  margin-top: 14px;
  border-top: 1px dashed var(--color-border);
  padding-top: 10px;
}

.doc-passed-amendments-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.doc-passed-amendments-toggle:hover{
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.doc-passed-amendments-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.doc-passed-amendment-item{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-alt);
  padding: 8px 12px;
  text-align: left;
}

.doc-passed-amendment-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85em;
}

.amendment-header{
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.amendment-header:hover{
  opacity: 0.9;
}

.amendment-arrow{
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.doc-inline-form{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.doc-inline-form input[type="text"]{
  min-width: 120px;
}

.reorder-chip-list{
  list-style-type: none;
  padding-left: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reorder-chip{
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: grab;
  font-weight: 600;
}

.reorder-chip.dragging{
  opacity: 0.4;
}

/* FAQ filter button active/inactive styling */
.faq-filter-role,
.faq-filter-feature {
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid #cbd5e1;
  background-color: #e2e8f0;
  color: #475569;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.faq-filter-role:hover:not(.active),
.faq-filter-feature:hover:not(.active) {
  background-color: #cbd5e1;
  color: #1e293b;
}

.faq-filter-role.active,
.faq-filter-feature.active {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary-dark) !important;
  font-weight: bold;
}

/* Status Badges for Admin Tables */
.status-badge-pending {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.status-badge-accepted,
.status-badge-published,
.status-badge-passed,
.status-badge-friendly {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.status-badge-rejected {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.status-badge-neutral {
  background-color: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Coherent FAQ Accordion Card Styling */
.faq-card {
  width: 100%;
  text-align: left;
  margin-bottom: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
}

.faq-header {
  padding: 14px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-surface-alt);
}

.faq-answer {
  padding: 16px 18px;
  line-height: 1.6;
  color: var(--color-text-main);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.form-no-break {
   display:inline;
   margin:0;
   padding:0;
}