/* KAIROS — enrollment invite panel (ENROLLMENT-INVITE A2)
 *
 * Styles for the shared invite panel mounted by
 * /shared/js/enrollment-invite-panel.js in BOTH the Tetrahedron (teacher) and
 * Octahedron (director / school admin) portals.
 *
 * Theming contract: every colour here resolves from --kip-* custom properties
 * which mount() writes onto the mount element from its `accent` config. The
 * fallbacks below are deliberately neutral (they inherit the page's own --k-*
 * shell tokens where those exist) so the panel lands correctly on all three
 * surfaces this ships to, which do NOT share one theme:
 *   • tetrahedron/course-detail/students — dark kairos skin
 *   • tetrahedron/enrollment/roster      — light tetra-shell-v2, no skin
 *   • octahedron/enrollment              — dark octa kairos skin
 * That is why nothing here hardcodes a background or text colour.
 */

/* Bug found in QA for ENROLLMENT-INVITE A3, already live since A2: any class
   below that sets its own `display` (only .kip-field does) defeats the
   browser's native `[hidden]{display:none}` rule at equal specificity —
   author styles win ties over the UA stylesheet. mount()'s JS sets
   `el.hidden = true` in several places (ctxLabel/kindLabel when there's
   nothing to choose, the whole course-picker step vs. the invite form) and
   relies on that actually hiding the element. This single rule is the fix,
   written once so no future class in this file can reintroduce the same
   silent-no-op. */
[hidden]{ display:none !important; }

.kip-back{
  position:fixed; inset:0; z-index:9998;
  display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(39,43,61,.28); backdrop-filter:blur(5px);
}
.kip-back.kip-open{ display:flex; }

.kip-box{
  width:min(100%, 980px); max-height:88vh; overflow:auto;
  /* Two layers, deliberately. --k-panel is a SEMI-TRANSPARENT glass colour on
     both kairos skins — correct for a panel sitting on the page, wrong for a
     modal, where it let the page's own buttons and text show straight through
     the dialog (observed, not theorised). Compositing the theme colour over an
     opaque --kip-base restores the glass look while guaranteeing the dialog is
     never see-through. mount() samples --kip-base from the host page's real
     background so this adapts to light and dark surfaces alike. */
  background:linear-gradient(145deg,#211a3e 0%,#17243d 55%,#13343b 100%);
  color:#f4f1ff;
  border:1px solid rgba(167,139,250,.26);
  border-radius:var(--kip-radius, 18px);
  padding:22px 22px 18px;
  box-shadow:0 28px 76px rgba(3,5,18,.58);
}
.kip-shell{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px;align-items:stretch}.kip-main{min-width:0}
.kip-orbital{min-width:0;overflow:hidden;border-left:1px solid rgba(167,139,250,.18);padding:18px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#b9b4d0}
.kip-orbital [data-kairos-orbit]{display:grid;place-items:center;flex:0 0 auto;width:156px;height:156px;margin:0 auto;--ka-r:61px;--ka-orb-size:20px;--ka-core-size:50px}
.kip-orbital strong{display:block;color:#f4f1ff;margin-top:10px}.kip-orbital span{display:block;max-width:190px;font-size:.78rem;line-height:1.45;margin:5px auto 0}
.kip-activity{padding:12px;margin:0 0 14px;border:1px solid rgba(79,209,197,.22);border-radius:13px;background:linear-gradient(135deg,rgba(77,182,255,.10),rgba(167,139,250,.12));display:grid;gap:8px}.kip-activity>strong{color:#f4f1ff;font-size:.88rem}.kip-activity-row{display:flex;align-items:center;gap:9px;padding-top:8px;border-top:1px solid rgba(167,139,250,.14)}.kip-activity-copy{display:flex;flex:1;min-width:0;flex-direction:column}.kip-activity-copy b{overflow:hidden;text-overflow:ellipsis;font-size:.82rem}.kip-activity-copy small{color:#73ddb0;font-weight:800;text-transform:capitalize}.kip-btn-small{padding:6px 9px;font-size:.73rem}.kip-activity-wait{font-size:.72rem;color:#b9b4d0}

.kip-title{ margin:0 0 4px; font-size:1.15rem; font-weight:800; }
.kip-sub{ margin:0 0 16px; font-size:.9rem; color:#b9b4d0; }

.kip-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px;margin:0 0 18px;background:rgba(7,8,24,.34);border:1px solid rgba(167,139,250,.17);border-radius:13px;}
.kip-tab{flex:0 0 auto;border:0;background:transparent;color:#b9b4d0;border-radius:9px;padding:9px 12px;font:inherit;font-size:.82rem;font-weight:750;cursor:pointer;}
.kip-tab.active{background:rgba(167,139,250,.22);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);}
.kip-pane{min-height:135px;}
.kip-pane-copy{margin:0 0 12px;color:#b9b4d0;font-size:.9rem;}

.kip-field{ display:block; margin:0 0 6px; font-weight:700; font-size:.88rem; }
.kip-optional{ font-weight:400; opacity:.7; }
.kip-input, .kip-select{
  width:100%; padding:10px 12px; margin:0 0 12px;
  font:inherit; color:#f4f1ff;
  background:rgba(7,8,24,.42);
  border:1px solid rgba(167,139,250,.24);
  border-radius:10px;
}
.kip-input:focus, .kip-select:focus{
  outline:none; border-color:var(--kip-accent, #4b2aad);
  box-shadow:0 0 0 3px var(--kip-accent-soft, rgba(75,42,173,.18));
}
/* The native select popup inherits the page background, which on the dark
   skins would render dark-on-dark. Force option contrast explicitly. */
.kip-select option{ color:#1f2430; background:#fff; }

.kip-status{ margin:12px 0 0; min-height:1.25em; font-size:.9rem; }
.kip-status.kip-err{ color:var(--kip-danger, #ff8d8d); }
.kip-status.kip-ok{ color:var(--kip-ok, #1b7f4b); }

/* ── Course picker (ENROLLMENT-INVITE A3) ─────────────────────────────────
   Shown instead of the invite form when the panel is opened with no
   pre-resolved context. Reuses .kip-field/.kip-select for the dropdown and
   the same status colour vocabulary, so it never looks like a second widget
   grafted onto the panel. */
.kip-pick-status{ margin:0 0 14px; min-height:1.25em; font-size:.88rem; }
.kip-pick-status.kip-err{ color:var(--kip-danger, #ff8d8d); }
.kip-pick .kip-btn{ margin-top:2px; }

.kip-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.kip-btn{
  padding:9px 16px; font:inherit; font-weight:700; cursor:pointer;
  color:#f4f1ff; background:rgba(255,255,255,.08);
  border:1px solid rgba(167,139,250,.24);
  border-radius:10px;
}
.kip-btn:hover{ border-color:var(--kip-accent, #4b2aad); }
.kip-btn:disabled{ opacity:.55; cursor:not-allowed; }
.kip-btn-primary{
  color:var(--kip-on-accent, #fff);
  background:var(--kip-accent, #4b2aad);
  border-color:var(--kip-accent, #4b2aad);
}

.kip-invite-card{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid rgba(167,139,250,.20);border-radius:16px;background:rgba(7,8,24,.28);}
.kip-invite-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e9e4ff;color:#5638ad;font-size:1.3rem;font-weight:900;}
.kip-invite-copy{flex:1;display:flex;flex-direction:column;gap:3px;}.kip-invite-copy strong{color:#f4f1ff;}.kip-invite-copy span{color:#b9b4d0;font-size:.86rem;line-height:1.4;}
.kip-file{display:block;width:100%;padding:11px;margin:0 0 10px;border:1px dashed #cbd2e3;border-radius:11px;background:#f7f9fd;color:#50576a;}
.kip-sheet-paste{min-height:92px;resize:vertical;}
.kip-existing-list{display:grid;gap:7px;margin:12px 0;max-height:240px;overflow:auto;}
.kip-existing-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(167,139,250,.18);border-radius:10px;background:rgba(7,8,24,.30);color:#f4f1ff;}
.kip-classroom-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:18px;border:1px solid #dfe5f2;border-radius:16px;background:#f7f9fd;}.kip-classroom-card span{color:#6e7587;font-size:.88rem;max-width:540px;}
.kip-invite-grid{display:grid;gap:7px;margin-bottom:11px;}
.kip-invite-grid-head,.kip-invite-grid-row{display:grid;grid-template-columns:.9fr 1.25fr 1.25fr 34px;gap:8px;align-items:center;}
.kip-invite-grid-head{padding:0 3px;color:#6b6f83;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.kip-invite-grid-row{padding:9px;background:rgba(7,8,24,.28);border:1px solid rgba(167,139,250,.16);border-radius:12px;}
.kip-invite-grid-row .kip-input{margin:0;min-width:0;padding:9px 10px;}
.kip-row-remove{width:30px;height:30px;border:0;border-radius:9px;background:#eeeafb;color:#6855a4;font-size:18px;cursor:pointer;}.kip-row-remove:disabled{opacity:.35;cursor:not-allowed;}
.kip-existing-identity{display:flex;flex-direction:column;gap:2px;}.kip-existing-identity small{color:#b9b4d0;font-size:.78rem;}.kip-existing-identity strong{color:#f4f1ff;}
@media(max-width:760px){.kip-shell{grid-template-columns:1fr}.kip-orbital{display:none}.kip-invite-grid-head{display:none}.kip-invite-grid-row{grid-template-columns:1fr 1fr 34px}.kip-invite-grid-row .kip-input:first-child{grid-column:1/-1}}
.kip-btn-primary:hover{ filter:brightness(1.08); }

/* ── Bulk mode ─────────────────────────────────────────────────────────── */
.kip-bulk-list{
  margin:0 0 4px; padding:0; list-style:none;
  max-height:260px; overflow:auto;
  border:1px solid var(--kip-line, var(--k-line, #e7e9f2));
  border-radius:10px;
}
.kip-bulk-row{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; font-size:.88rem;
  border-bottom:1px solid var(--kip-line, var(--k-line, #e7e9f2));
}
.kip-bulk-row:last-child{ border-bottom:0; }
.kip-bulk-email{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kip-bulk-state{ flex:0 0 auto; font-size:.8rem; font-weight:700; opacity:.85; }
.kip-bulk-row[data-state="sent"]   .kip-bulk-state{ color:var(--kip-ok, #1b7f4b); }
.kip-bulk-row[data-state="failed"] .kip-bulk-state{ color:var(--kip-danger, #ff8d8d); }
.kip-bulk-row[data-state="skipped"] .kip-bulk-state{ opacity:.6; }

.kip-progress{
  height:6px; margin:10px 0 4px; overflow:hidden;
  background:var(--kip-line, var(--k-line, #e7e9f2)); border-radius:999px;
}
.kip-progress-bar{
  height:100%; width:0%;
  background:var(--kip-accent, #4b2aad);
  transition:width .18s ease;
}

/* ── Theme-adaptive colours ─────────────────────────────────────────────────
   This dialog ships a dark-glass look by default (correct for the dark portals
   and for dark theme). Under the LIGHT portal theme, re-light every surface so
   it matches the light teacher UI. Gated to :root[data-tetra-theme="light"];
   dark/obsidian keep the default dark treatment. */
:root[data-tetra-theme="light"] .kip-box{
  background:linear-gradient(145deg,#ffffff 0%,#fbfbff 55%,#f6f7fd 100%)!important;
  color:#182033!important;
  border-color:#e7eaf3!important;
  box-shadow:0 28px 76px rgba(31,50,76,.20)!important;
}
:root[data-tetra-theme="light"] .kip-title{ color:#0f172a!important; }
:root[data-tetra-theme="light"] .kip-sub,
:root[data-tetra-theme="light"] .kip-field,
:root[data-tetra-theme="light"] .kip-activity-wait,
:root[data-tetra-theme="light"] .kip-orbital,
:root[data-tetra-theme="light"] .kip-orbital span{ color:#6d7688!important; }
:root[data-tetra-theme="light"] .kip-orbital{ border-left-color:#e7eaf3!important; }
:root[data-tetra-theme="light"] .kip-orbital strong,
:root[data-tetra-theme="light"] .kip-activity>strong{ color:#182033!important; }
:root[data-tetra-theme="light"] .kip-tabs{ background:#f4f2fb!important; border-color:#e7eaf3!important; }
:root[data-tetra-theme="light"] .kip-tab{ color:#6d7688!important; }
:root[data-tetra-theme="light"] .kip-tab.active{ background:#efe9ff!important; color:#4b2aad!important; box-shadow:none!important; }
:root[data-tetra-theme="light"] .kip-input,
:root[data-tetra-theme="light"] .kip-select{ background:#ffffff!important; border-color:#e7eaf3!important; color:#182033!important; }
:root[data-tetra-theme="light"] .kip-invite-card,
:root[data-tetra-theme="light"] .kip-activity{ background:#faf8ff!important; border-color:#e7eaf3!important; }
:root[data-tetra-theme="light"] .kip-btn{ background:#ffffff!important; border-color:#e7eaf3!important; color:#4b2aad!important; }
:root[data-tetra-theme="light"] .kip-back{ background:rgba(31,50,76,.28)!important; }
:root[data-tetra-theme="light"] .kip-existing-row{ background:#ffffff!important; border-color:#e7eaf3!important; }
:root[data-tetra-theme="light"] .kip-existing-row:hover,
:root[data-tetra-theme="light"] .kip-existing-row.selected,
:root[data-tetra-theme="light"] .kip-existing-row:has(input:checked){ background:#faf8ff!important; }
:root[data-tetra-theme="light"] .kip-existing-identity strong{ color:#182033!important; }
:root[data-tetra-theme="light"] .kip-existing-identity small{ color:#6d7688!important; }