/* Lumi Necto ITE 2026.3.1 — Summer Sun Patch 1
 * Component-only styling. This file deliberately does not restyle the Summer
 * Sun header, top navigation, page shell, progress bars, or existing cards.
 */

/* -------------------------------------------------------------------------
   Commissioner: Withdraw Request
   ------------------------------------------------------------------------- */
.ite-p1-withdraw-btn {
  border-color: var(--burgundy, #805457) !important;
  color: var(--burgundy, #805457) !important;
  background: #fff !important;
}

.ite-p1-withdraw-btn:not(:disabled):hover,
.ite-p1-withdraw-btn:not(:disabled):focus-visible {
  background: #f4e9ea !important;
}

.ite-p1-withdraw-btn:disabled {
  border-color: var(--gray-300, #d4d1cc) !important;
  color: var(--gray-400, #a8a29e) !important;
  background: var(--gray-100, #f5f4f2) !important;
  cursor: not-allowed !important;
  opacity: .82;
}

.ite-p1-withdraw-help {
  margin-top: 6px;
  color: var(--gray-500, #78716c);
  font-family: 'figtree', 'Segoe UI', sans-serif;
  font-size: 9.5px;
  line-height: 1.35;
}

.ite-p1-withdraw-modal[hidden],
.ite-p1-modal[hidden] { display: none !important; }

.ite-p1-withdraw-modal,
.ite-p1-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
}

.ite-p1-withdraw-backdrop,
.ite-p1-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(33, 24, 20, .62);
}

.ite-p1-withdraw-dialog,
.ite-p1-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid var(--gray-300, #d4d1cc);
  border-radius: 14px;
  background: var(--white, #fff);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
  padding: 22px;
  color: var(--brown, #4d3a32);
  font-family: 'figtree', 'Segoe UI', sans-serif;
}

.ite-p1-withdraw-dialog h2,
.ite-p1-modal-card h2 {
  margin: 0 32px 10px 0;
  color: var(--brown, #4d3a32);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
}

.ite-p1-withdraw-dialog p,
.ite-p1-modal-card p {
  margin: 0 0 12px;
  line-height: 1.55;
}

.ite-p1-withdraw-course {
  margin: 14px 0;
  padding: 10px 12px;
  border-left: 4px solid var(--burgundy, #805457);
  border-radius: 6px;
  background: #f7eeee;
  font-weight: 800;
}

.ite-p1-withdraw-close,
.ite-p1-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--gray-600, #57534e);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ite-p1-withdraw-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.ite-p1-withdraw-confirm {
  border-color: var(--burgundy, #805457) !important;
  background: var(--burgundy, #805457) !important;
  color: #fff !important;
}

.ite-p1-withdraw-status,
.ite-p1-inline-status {
  min-height: 1.2em;
  margin-top: 10px;
  color: var(--green, #477628);
  font-size: .82rem;
  font-weight: 700;
}

.ite-p1-withdraw-status.is-error,
.ite-p1-inline-status.is-error { color: #991b1b; }
.ite-p1-withdraw-status.is-success { color: var(--green, #477628); }

/* -------------------------------------------------------------------------
   Clerk Home: one clean attention line and six roster cards
   ------------------------------------------------------------------------- */
.ite-p1-attention-change { margin-top: 2px; }
.ite-p1-attention-link {
  gap: 0.25em;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--burgundy, #805457);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ite-p1-roster-section,
.ite-p1-selection-changes,
.ite-p1-response-fallback {
  margin-top: 14px;
}

.ite-p1-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}

.ite-p1-section-heading h2 {
  margin: 0 0 3px;
  color: var(--green, #477628);
  font-family: inherit;
}

.ite-p1-section-heading p {
  margin: 0;
  color: var(--gray-600, #57534e);
  font-size: .82rem;
  line-height: 1.4;
}

.ite-p1-count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--burgundy, #805457);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}

.ite-p1-roster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ite-p1-roster-card {
  min-width: 0;
  border: 1px solid var(--gray-200, #e8e6e3);
  border-radius: 11px;
  background: #fff;
  padding: 13px;
  box-shadow: 0 2px 8px rgba(77, 58, 50, .05);
}

.ite-p1-roster-card h3 {
  margin: 0 0 3px;
  color: var(--brown, #4d3a32);
  font-size: .98rem;
}

.ite-p1-roster-role {
  color: var(--gray-500, #78716c);
  font-size: .76rem;
}

.ite-p1-roster-status {
  display: inline-block;
  margin: 8px 0;
  border-radius: 999px;
  background: var(--green-pale, #e8f0e0);
  color: var(--green, #477628);
  padding: 3px 8px;
  font-size: .69rem;
  font-weight: 800;
}

.ite-p1-roster-meta {
  min-height: 46px;
  color: var(--gray-600, #57534e);
  font-size: .76rem;
  line-height: 1.45;
}

.ite-p1-roster-card.is-flex {
  border: 2px dashed var(--gold, #b97921);
  background: var(--gold-pale, #fdf6e8);
}

.ite-p1-roster-card.is-flex .ite-p1-roster-status {
  background: #f3dfb8;
  color: #7a4c10;
}

.ite-p1-roster-card.is-vacant {
  border-style: dashed;
  background: var(--gray-50, #fafaf9);
}

.ite-p1-card-actions,
.ite-p1-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* -------------------------------------------------------------------------
   Clerk class notes and overrides
   ------------------------------------------------------------------------- */
.ite-p1-class-list { display: grid; gap: 8px; }

.ite-p1-class-tools {
  border: 1px solid var(--gray-200, #e8e6e3);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  margin-top: 9px;
}

.ite-p1-class-tools > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--brown, #4d3a32);
}

.ite-p1-class-tools > summary::-webkit-details-marker { display: none; }
.ite-p1-class-tools > summary::after {
  content: '▾';
  color: var(--gray-500, #78716c);
  font-weight: 900;
}
.ite-p1-class-tools[open] > summary::after { content: '▴'; }

.ite-p1-class-tools > summary > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.ite-p1-course-name {
  color: var(--gray-600, #57534e);
  font-size: .78rem;
  font-weight: 500;
}

.ite-p1-status {
  margin-left: auto;
  border-radius: 999px;
  background: var(--green-pale, #e8f0e0);
  color: var(--green, #477628);
  padding: 3px 8px;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}
.ite-p1-status.is-withdrawn { background: #f4e9ea; color: var(--burgundy, #805457); }

.ite-p1-class-body {
  border-top: 1px solid var(--gray-200, #e8e6e3);
  padding: 12px;
  background: #fcfcfb;
}

.ite-p1-event-line {
  margin: 0 0 10px;
  color: var(--gray-600, #57534e);
  font-size: .78rem;
}

.ite-p1-change-alert {
  margin-bottom: 11px;
  border-left: 4px solid var(--burgundy, #805457);
  border-radius: 6px;
  background: #f7eeee;
  color: var(--brown, #4d3a32);
  padding: 9px 10px;
  font-size: .78rem;
  line-height: 1.4;
}

.ite-p1-label {
  display: block;
  margin: 8px 0 5px;
  color: var(--brown, #4d3a32);
  font-size: .78rem;
  font-weight: 800;
}

.ite-p1-note,
.ite-p1-input,
.ite-p1-override-value,
.ite-p1-override-reason {
  width: 100%;
  border: 1px solid var(--gray-300, #d4d1cc);
  border-radius: 7px;
  background: #fff;
  color: var(--brown, #4d3a32);
  padding: 8px 9px;
  font: inherit;
  font-size: .8rem;
}

.ite-p1-note { min-height: 68px; resize: vertical; }
.ite-p1-note:focus,
.ite-p1-input:focus,
.ite-p1-override-value:focus,
.ite-p1-override-reason:focus {
  outline: none;
  border-color: var(--green, #477628);
  box-shadow: 0 0 0 2px rgba(71, 118, 40, .12);
}

.ite-p1-note-meta,
.ite-p1-help {
  color: var(--gray-500, #78716c);
  font-size: .7rem;
  line-height: 1.4;
}

.ite-p1-override-box {
  margin-top: 12px;
  border-top: 1px solid var(--gray-200, #e8e6e3);
  padding-top: 10px;
}

.ite-p1-override-grid {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(180px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
}

.ite-p1-btn {
  border: 1px solid var(--green, #477628);
  border-radius: 7px;
  background: var(--green, #477628);
  color: #fff;
  padding: 7px 10px;
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}
.ite-p1-btn:hover,
.ite-p1-btn:focus-visible { filter: brightness(.94); }
.ite-p1-btn:disabled { opacity: .62; cursor: wait; }
.ite-p1-btn.is-secondary { background: #fff; color: var(--green, #477628); }
.ite-p1-btn.is-danger { border-color: var(--burgundy, #805457); background: var(--burgundy, #805457); }

.ite-p1-modal-card .ite-p1-input { margin-bottom: 10px; }

@media (max-width: 980px) {
  .ite-p1-roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .ite-p1-roster-grid { grid-template-columns: 1fr; }
  .ite-p1-override-grid { grid-template-columns: 1fr; }
  .ite-p1-section-heading { display: block; }
  .ite-p1-count { margin-top: 8px; }
  .ite-p1-withdraw-actions { justify-content: stretch; }
  .ite-p1-withdraw-actions .wf-btn { flex: 1; }
}

/* -------------------------------------------------------------------------
   Public ITE Home: permanent sixth Flex Slot card
   ------------------------------------------------------------------------- */
.ite-p1-home-flex-card {
  border: 2px dashed var(--gold, #b97921) !important;
  border-radius: 14px;
  background: var(--gold-pale, #fdf6e8) !important;
  overflow: hidden;
}
.ite-p1-home-flex-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 132px;
  padding: 18px;
  color: var(--brown, #4d3a32);
  text-decoration: none;
}
.ite-p1-home-flex-mark {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--gold, #b97921);
  color: #fff;
  font-size: 34px;
  font-weight: 300;
}
.ite-p1-home-flex-link h2 { margin: 0 0 3px; font-size: 1.05rem; }
.ite-p1-home-flex-link p { margin: 0 0 8px; color: var(--gray-600, #57534e); font-size: .8rem; }
.ite-p1-home-flex-link span { color: var(--green, #477628); font-size: .75rem; font-weight: 800; }
.ite-p1-home-flex-link:hover,
.ite-p1-home-flex-link:focus-visible { background: rgba(185, 121, 33, .08); outline: none; }


/* Commissioner lifecycle correction */
.ite-p1-lifecycle-warning {
  margin: 12px 0 14px;
  border-left: 5px solid var(--burgundy, #805457);
  border-radius: 8px;
  background: #f7eeee;
  padding: 12px 14px;
  color: var(--brown, #4d3a32);
  line-height: 1.5;
}
.ite-p1-modal-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:16px; }
.ite-p1-optional { font-weight:400; color:var(--gray-500, #78716c); }
.ite-p1-template-note { margin-top:9px; color:var(--gray-500, #78716c); font-size:.7rem; font-style:italic; }
.ite-p1-access-blocked[hidden] { display:none !important; }
.ite-p1-access-blocked {
  position:fixed; inset:0; z-index:20000; display:grid; place-items:center; padding:20px;
  background:linear-gradient(135deg, rgba(77,58,50,.98), rgba(107,85,72,.98));
  font-family:'figtree','Segoe UI',sans-serif;
}
.ite-p1-access-blocked section { width:min(100%,560px); border-radius:16px; background:#fff; padding:28px; box-shadow:0 24px 70px rgba(0,0,0,.35); color:var(--brown,#4d3a32); }
.ite-p1-access-blocked h1 { margin:6px 0 12px; font-family:Georgia,'Times New Roman',serif; }
.ite-p1-access-blocked p { line-height:1.55; }
.ite-p1-access-eyebrow { color:var(--green,#477628); font-size:.72rem; font-weight:900; letter-spacing:1.4px; text-transform:uppercase; }
html.ite-p1-access-denied body > *:not(.ite-p1-access-blocked) { pointer-events:none !important; user-select:none !important; }
.ite-p1-home-vacant, .ite-p1-home-pending { cursor:default; }
.ite-p1-home-district { display:inline-block; margin:0 0 5px; color:var(--green,#477628); font-size:.75rem; font-weight:800; }

/* Patch 1 district/board-role correction */
.ite-p1-roster-fixed-value {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--gray-300, #d6d3d1);
  border-radius: 8px;
  background: var(--gray-100, #f5f5f4);
  color: var(--brown, #4d3a32);
  font-weight: 800;
}

/* -------------------------------------------------------------------------
   Commissioner staging and board-role management
   ------------------------------------------------------------------------- */
.ite-p1-manage-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 9px;
  background: var(--green-pale, #e8f0e0);
  color: var(--brown, #4d3a32);
}

.ite-p1-manage-summary span { color: var(--green, #477628); font-weight: 800; }

.ite-p1-manage-choices { display: grid; gap: 10px; }

.ite-p1-choice-button {
  width: 100%;
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--gray-300, #d4d1cc);
  border-radius: 10px;
  background: #fff;
  padding: 13px;
  color: var(--brown, #4d3a32);
  cursor: pointer;
}

.ite-p1-choice-button:hover,
.ite-p1-choice-button:focus-visible { border-color: var(--green, #477628); background: #f7faf4; }
.ite-p1-choice-button span { color: var(--gray-600, #57534e); font-size: .78rem; line-height: 1.4; }
.ite-p1-choice-button.is-danger { border-color: #d7b7ba; }
.ite-p1-choice-button.is-danger strong { color: var(--burgundy, #805457); }

.ite-p1-staged-list { display: grid; gap: 9px; margin: 14px 0; }
.ite-p1-staged-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--gray-200, #e8e6e3);
  border-radius: 10px;
  padding: 11px;
  background: #fff;
}
.ite-p1-staged-meta { margin-top: 3px; color: var(--gray-500, #78716c); font-size: .73rem; }
.ite-p1-empty-state,
.ite-p1-helper-note { color: var(--gray-600, #57534e); font-size: .8rem; line-height: 1.45; }
.ite-p1-helper-note { padding: 9px 11px; border-left: 4px solid var(--gold, #b97921); background: var(--gold-pale, #fdf6e8); }
.ite-p1-role-conflict { margin: 12px 0; padding: 12px; border: 1px solid #e6c98f; border-radius: 9px; background: #fff8e8; }
.ite-p1-role-conflict p { margin: 5px 0 10px; font-size: .8rem; }
.ite-p1-modal-actions.is-left { justify-content: flex-start; }

@media (max-width: 680px) {
  .ite-p1-staged-row { align-items: flex-start; flex-direction: column; }
}


/* -------------------------------------------------------------------------
   All-at-once board-role manager
   ------------------------------------------------------------------------- */
.ite-p1-modal-card.is-wide { width: min(100%, 820px); }

.ite-p1-board-role-table {
  margin-top: 14px;
  border: 1px solid var(--gray-300, #d4d1cc);
  border-radius: 11px;
  overflow: hidden;
}

.ite-p1-board-role-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(110px, .65fr) minmax(170px, .85fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-200, #e8e6e3);
  background: #fff;
}

.ite-p1-board-role-row:last-child { border-bottom: 0; }

.ite-p1-board-role-row.is-header {
  background: var(--gray-100, #f5f4f2);
  color: var(--gray-600, #57534e);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ite-p1-board-role-person {
  display: grid;
  gap: 3px;
}

.ite-p1-board-role-person span {
  color: var(--gray-500, #78716c);
  font-size: .72rem;
}

.ite-p1-board-role-district {
  color: var(--brown, #4d3a32);
  font-weight: 700;
}

.ite-p1-board-role-row .ite-p1-input { margin: 0; }

.ite-p1-board-role-note {
  margin-top: 14px;
  border-left: 5px solid var(--green, #477628);
  border-radius: 8px;
  background: var(--gray-100, #f5f4f2);
  padding: 11px 13px;
  color: var(--gray-600, #57534e);
  font-size: .78rem;
  line-height: 1.45;
}

.ite-p1-board-role-validation {
  min-height: 1.25em;
  margin-top: 8px;
  color: var(--burgundy, #805457);
  font-size: .8rem;
  font-weight: 800;
}

@media (max-width: 700px) {
  .ite-p1-modal-card.is-wide { width: min(100%, 540px); }
  .ite-p1-board-role-row { grid-template-columns: 1fr; gap: 6px; }
  .ite-p1-board-role-row.is-header { display: none; }
}

/* Temporarily hide ACCG logos */
.accg-logo {
  display: none !important;
}